מצגת שהוצגה בכנס השנתי של איגוד האינטרנט הישראלי (22.2.10), במסגרת המושב "מתחברים לעולם נייד".

1. ‫אתי יערי, הכנס השנתי של איגוד האינטרנט הישראלי )01.2.22(‬

5. ‫/‪http://www.w3.org/Mobile‬‬
‫עשרה עקרונות‬
‫ק‬
‫06 הנחיות‬
‫‪Web Surfing‬‬
‫שיפור חווית המשתמש‬

6. ‫בעת הפיתוח יש לקחת בחשבון שהגישה אל התוכן‬
‫עשויה להתבצע מהתקנים שונים‬
‫‪ ‬חשוב להעניק למשתמש עקביות בחוויה‬
‫ל‬ ‫ל‬
‫‪ ‬לבדוק את האתר הן באמצעות סימולציות והן על המכשיר עצמו‬

7. ‫שפע התקנים, שפע דפדפנים‬
‫סטנדרטים זו התשובה !‬
‫‪ ‬שפה תקנית, פורמטים וקידוד שנתמכים במגוון התקנים‬
‫‪ ‬העדפה לשימוש בגליונות סגנון )אך גם "גיבוי" למקרה שההתקן לא תומך(‬
‫‪ ‬במקרה ל שגיאה – ספק למשתמש תיאור מפורט ואפשרות לחזור אחורה‬
‫ל‬ ‫ל‬ ‫של‬

8. ‫פחות בעיות שמישות‬ ‫תכנון חכם‬
‫‪ ‬להימנע מחלונות קופצים‬
‫ע מוד‬
‫‪ ‬לה מנע משימוש בטבלאות לשם עימוד‬
‫להימנע מש מוש‬
‫‪ ‬להימנע משימוש בגרפיקה לשם ריווח‬
‫‪ ‬להוציא מהתמונה את המסגרות )‪(frames‬‬
‫‪ ‬להימנע ממפות תמונה )לוודא שההתקן תומך(‬

9. ‫רוצים לשלב טכנולוגיה מסוימת באתר ?‬
‫וודאו שהטכנולוגיה נתמכת במגוון התקנים‬
‫‪ ‬רצוי לא להסתמך על תמיכה בעוגיות ובסקריפטים‬
‫‪ ‬לספק חלופה לגיליונות סגנון ולטבלאות‬
‫‪ ‬רצוי לא להשתמש בפונטים מיוחדים‬
‫‪ ‬שימוש בצבע להמחשת מידע – להימנע ולספק חלופה‬

10. ‫מסך קטן + מקלדת + רוחב פס‬
‫מסע ניווט מאתגר‬
‫‪ ‬להקפיד על ניווט מינימלי )בר עליון מצומצם(‬
‫‪ ‬לציין לאן מ ב ל כל לינק‬
‫ל ל מוביל ל נ‬
‫‪ ‬אם יש קישור לקובץ, לציין ברור מה סוג הקובץ‬
‫‪Access Key ‬‬
‫‪ ‬כתובות קצרות‬

11. ‫תמונה שווה אלף מילים‬
‫וצבע עושה אור בעיניים‬
‫ישנם התקנים עם ניגודיות נמוכה‬
‫ואי תמיכה בפורמטים מסוימים‬
‫‪ ‬להימנע משימוש בתמונות גדולות או ברזולוציה גבוהה‬
‫)אלא אם הדבר נחוץ לשם העברת מידע(‬
‫‪ ‬לכל אלמנט שאינו טקסטואלי – לצרף טקסט אלטרנטיבי‬
‫‪ ‬להקפיד על ניגודיות טובה בין צבע הרקע לצבע התוכן‬
‫בגדלים אבסולוטיים בפ קסל ם‬
‫‪ ‬א ן להשתמש בגדל ם אבסולוט ם או בפיקסלים‬
‫אין‬

12. ‫אנשים שמחים‬
‫אנש ם שמח ם‬ ‫אתרים קטנים‬
‫אתר ם קטנ ם‬
‫פחות זמן וכסף‬
‫‪ ‬בדקו את גודל העמוד:‬
‫העמוד:‬
‫)ההמלצה – העמוד כולו ‪ ,20KB‬ה-‪(10KB Markup‬‬
‫‪ ‬בדקו את גודל גיליון הסגנון‬
‫‪ ‬הקפידו שהגלילה תהיה לצד אחד בלבד )למעלה-למטה(‬

13. ‫"חסכנות" ברשת‬
‫‪caching ‬‬
‫‪ ‬להימנע מריפרוש אוטומטי )אלא ם מודיעים למשתמש‬
‫ם למ תמ‬ ‫ט מט ל אם מ‬ ‫לה מנ מר פר‬
‫על כך ומאפשרים לו שליטה‬
‫על הנעשה(‬
‫‪ ‬הפניה מחדש – רק בשרת )קוד 003(‬

14. ‫להפחית למינימום את הצורך‬
‫באמצעי קלט‬
‫‪ ‬סדר הגיוני של מעבר משדה לשדה )‪(Tab‬‬
‫‪ ‬כמה שפחות שדות טקסט חופשי חובה‬
‫‪ ‬שימוש בתוויות בטופס – טקסט מובן ומיקום ברור‬
‫‪ ‬אם אפשר, לספק ערך ברירת מחדל שיסומן מראש‬

15. ‫הזמן קצר וההסחה מרובה !‬
‫השימוש נעשה בתנועה ....‬
‫‪ ‬כותרת ברורה לעמוד‬
‫מ ב פה בר רה ופשוטה‬
‫‪ ‬שימוש בשפה ברורה פ טה‬
‫‪ ‬קודם מה שחשוב, אח"כ מה שפחות‬
‫‪ ‬הקפידו לספק רק את מה שהמשתמש חפץ בו‬
‫‪ ‬בדקו שהתוכן מתאים לצריכה בהתקן נייד‬

16. ‫מה למדנו ?‬
‫בכמה צעדים פשוטים‬
‫אפשר להפוך את העולם הנייד לנגיש עבור הרבה יותר אנשים...‬
‫רוצים עת עוד ?‬
‫לדעת ע‬

17. Emulators
http://cli.gs/g0TB6a
‫המכשיר‬ 1
http://iphonetester.com/
htt //i h t t /
‫הדפדפן‬ 2
http://www.opera.com/mini/demo/
‫3 מערכת ההפעלה‬
http://cli.gs/ZVeHvG
htt // li /ZV H G

18. http://mobiready.com/start.jsp
http://mobiready com/start jsp

19. http://validator.w org/mobile/
http://validator w3.org/mobile/

20. http://www.w3.org/TR/2010/CR‐mwabp‐20100211/
‫מפגש – פיתוח למובייל‬
16:30-21:00 24.3 ,‫יום רביעי‬
http://www.w3c.org.il/

21. ‫ערוץ ה-‪ youtube‬נמצא בעריכה – הקישור יעודכן בהקדם‬