Mobile and Accessibility

670 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
670
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile and Accessibility

  1. 1. ‫אתי יערי, הכנס השנתי של איגוד האינטרנט הישראלי )01.2.22(‬
  2. 2. ‫/‪http://www.w3.org/Mobile‬‬ ‫עשרה עקרונות‬ ‫ק‬ ‫06 הנחיות‬ ‫‪Web Surfing‬‬ ‫שיפור חווית המשתמש‬
  3. 3. ‫בעת הפיתוח יש לקחת בחשבון שהגישה אל התוכן‬ ‫עשויה להתבצע מהתקנים שונים‬ ‫‪ ‬חשוב להעניק למשתמש עקביות בחוויה‬ ‫ל‬ ‫ל‬ ‫‪ ‬לבדוק את האתר הן באמצעות סימולציות והן על המכשיר עצמו‬
  4. 4. ‫שפע התקנים, שפע דפדפנים‬ ‫סטנדרטים זו התשובה !‬ ‫‪ ‬שפה תקנית, פורמטים וקידוד שנתמכים במגוון התקנים‬ ‫‪ ‬העדפה לשימוש בגליונות סגנון )אך גם "גיבוי" למקרה שההתקן לא תומך(‬ ‫‪ ‬במקרה ל שגיאה – ספק למשתמש תיאור מפורט ואפשרות לחזור אחורה‬ ‫ל‬ ‫ל‬ ‫של‬
  5. 5. ‫פחות בעיות שמישות‬ ‫תכנון חכם‬ ‫‪ ‬להימנע מחלונות קופצים‬ ‫ע מוד‬ ‫‪ ‬לה מנע משימוש בטבלאות לשם עימוד‬ ‫להימנע מש מוש‬ ‫‪ ‬להימנע משימוש בגרפיקה לשם ריווח‬ ‫‪ ‬להוציא מהתמונה את המסגרות )‪(frames‬‬ ‫‪ ‬להימנע ממפות תמונה )לוודא שההתקן תומך(‬
  6. 6. ‫רוצים לשלב טכנולוגיה מסוימת באתר ?‬ ‫וודאו שהטכנולוגיה נתמכת במגוון התקנים‬ ‫‪ ‬רצוי לא להסתמך על תמיכה בעוגיות ובסקריפטים‬ ‫‪ ‬לספק חלופה לגיליונות סגנון ולטבלאות‬ ‫‪ ‬רצוי לא להשתמש בפונטים מיוחדים‬ ‫‪ ‬שימוש בצבע להמחשת מידע – להימנע ולספק חלופה‬
  7. 7. ‫מסך קטן + מקלדת + רוחב פס‬ ‫מסע ניווט מאתגר‬ ‫‪ ‬להקפיד על ניווט מינימלי )בר עליון מצומצם(‬ ‫‪ ‬לציין לאן מ ב ל כל לינק‬ ‫ל ל מוביל ל נ‬ ‫‪ ‬אם יש קישור לקובץ, לציין ברור מה סוג הקובץ‬ ‫‪Access Key ‬‬ ‫‪ ‬כתובות קצרות‬
  8. 8. ‫תמונה שווה אלף מילים‬ ‫וצבע עושה אור בעיניים‬ ‫ישנם התקנים עם ניגודיות נמוכה‬ ‫ואי תמיכה בפורמטים מסוימים‬ ‫‪ ‬להימנע משימוש בתמונות גדולות או ברזולוציה גבוהה‬ ‫)אלא אם הדבר נחוץ לשם העברת מידע(‬ ‫‪ ‬לכל אלמנט שאינו טקסטואלי – לצרף טקסט אלטרנטיבי‬ ‫‪ ‬להקפיד על ניגודיות טובה בין צבע הרקע לצבע התוכן‬ ‫בגדלים אבסולוטיים בפ קסל ם‬ ‫‪ ‬א ן להשתמש בגדל ם אבסולוט ם או בפיקסלים‬ ‫אין‬
  9. 9. ‫אנשים שמחים‬ ‫אנש ם שמח ם‬ ‫אתרים קטנים‬ ‫אתר ם קטנ ם‬ ‫פחות זמן וכסף‬ ‫‪ ‬בדקו את גודל העמוד:‬ ‫העמוד:‬ ‫)ההמלצה – העמוד כולו ‪ ,20KB‬ה-‪(10KB Markup‬‬ ‫‪ ‬בדקו את גודל גיליון הסגנון‬ ‫‪ ‬הקפידו שהגלילה תהיה לצד אחד בלבד )למעלה-למטה(‬
  10. 10. ‫"חסכנות" ברשת‬ ‫‪caching ‬‬ ‫‪ ‬להימנע מריפרוש אוטומטי )אלא ם מודיעים למשתמש‬ ‫ם למ תמ‬ ‫ט מט ל אם מ‬ ‫לה מנ מר פר‬ ‫על כך ומאפשרים לו שליטה‬ ‫על הנעשה(‬ ‫‪ ‬הפניה מחדש – רק בשרת )קוד 003(‬
  11. 11. ‫להפחית למינימום את הצורך‬ ‫באמצעי קלט‬ ‫‪ ‬סדר הגיוני של מעבר משדה לשדה )‪(Tab‬‬ ‫‪ ‬כמה שפחות שדות טקסט חופשי חובה‬ ‫‪ ‬שימוש בתוויות בטופס – טקסט מובן ומיקום ברור‬ ‫‪ ‬אם אפשר, לספק ערך ברירת מחדל שיסומן מראש‬
  12. 12. ‫הזמן קצר וההסחה מרובה !‬ ‫השימוש נעשה בתנועה ....‬ ‫‪ ‬כותרת ברורה לעמוד‬ ‫מ ב פה בר רה ופשוטה‬ ‫‪ ‬שימוש בשפה ברורה פ טה‬ ‫‪ ‬קודם מה שחשוב, אח"כ מה שפחות‬ ‫‪ ‬הקפידו לספק רק את מה שהמשתמש חפץ בו‬ ‫‪ ‬בדקו שהתוכן מתאים לצריכה בהתקן נייד‬
  13. 13. ‫מה למדנו ?‬ ‫בכמה צעדים פשוטים‬ ‫אפשר להפוך את העולם הנייד לנגיש עבור הרבה יותר אנשים...‬ ‫רוצים עת עוד ?‬ ‫לדעת ע‬
  14. 14. 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
  15. 15. http://mobiready.com/start.jsp http://mobiready com/start jsp
  16. 16. http://validator.w org/mobile/ http://validator w3.org/mobile/
  17. 17. http://www.w3.org/TR/2010/CR‐mwabp‐20100211/ ‫מפגש – פיתוח למובייל‬ 16:30-21:00 24.3 ,‫יום רביעי‬ http://www.w3c.org.il/
  18. 18. ‫ערוץ ה-‪ youtube‬נמצא בעריכה – הקישור יעודכן בהקדם‬

×