ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Mobile and Accessibility

•
•
E
Eti Y

מצגת שהוצגה בכנס השנתי של ×יגוד ×”×ינטרנט הישר×לי (22.2.10), במסגרת המושב "מתחבר×™× ×œ×¢×•×œ× × ×™×™×“".

1 of 22
‫×תי יער×™, הכנס השנתי של ×יגוד ×”×ינטרנט הישר×לי )01.2.22(‬
Mobile and Accessibility
Mobile and Accessibility
Mobile and Accessibility
‫/‪h³Ù³Ù±è://·É·É·É.·É3.´Ç°ù²µ/²Ñ´Ç²ú¾±±ô±ð‬â¶Ä¬ ‫עשר×” עקרונות‬ ‫ק‬ ‫06 הנחיות‬ ‫‪Web Surfing‬‬ ‫שיפור חווית המשתמש‬
‫בעת הפיתוח יש לקחת בחשבון שהגישה ×ל התוכן‬ ‫עשויה להתבצע ×ž×”×ª×§× ×™× ×©×•× ×™×‬ ‫‪ ‬חשוב להעניק למשתמש עקביות בחוויה‬ ‫ל‬ ‫ל‬ ‫‪ ‬לבדוק ×ת ×”×תר הן ב×מצעות סימולציות והן על המכשיר עצמו‬
‫שפע התקני×, שפע דפדפני×‬ ‫סטנדר×˜×™× ×–×• התשובה !‬ ‫‪ ‬שפה תקנית, פור×ž×˜×™× ×•×§×™×“×•×“ ×©× ×ª×ž×›×™× ×‘×ž×’×•×•×Ÿ התקני×‬ ‫‪ ‬העדפה לשימוש בגליונות סגנון )×ך ×’× "גיבוי" למקר×” שההתקן ×œ× ×ª×•×ž×š(‬ ‫‪ ‬במקר×” ל שגי××” – ספק למשתמש תי×ור מפורט ו×פשרות לחזור ×חורה‬ ‫ל‬ ‫ל‬ ‫של‬
‫פחות בעיות שמישות‬ ‫תכנון ×—×›×‬ ‫‪ ‬להימנע מחלונות קופצי×‬ ‫ע מוד‬ ‫‪ ‬לה מנע משימוש בטבל×ות ×œ×©× ×¢×™×ž×•×“â€¬ ‫להימנע מש מוש‬ ‫‪ ‬להימנע משימוש בגרפיקה ×œ×©× ×¨יווח‬ ‫‪ ï‚§â€¬×œ×”×•×¦×™× ×ž×”×ª×ž×•× ×” ×ת המסגרות )‪(frames‬‬ ‫‪ ‬להימנע ממפות תמונה )×œ×•×•×“× ×©×”×”×ª×§×Ÿ תומך(‬
‫ר×•×¦×™× ×œ×©×œ×‘ טכנולוגיה מסוימת ב×תר ?‬ ‫ווד×ו שהטכנולוגיה נתמכת במגוון התקני×‬ ‫‪ ‬רצוי ×œ× ×œ×”×¡×ª×ž×š על תמיכה בעוגיות ובסקריפטי×‬ ‫‪ ‬לספק חלופה לגיליונות סגנון ולטבל×ות‬ ‫‪ ‬רצוי ×œ× ×œ×”×©×ª×ž×© ×‘×¤×•× ×˜×™× ×ž×™×•×—×“×™×‬ ‫‪ ‬שימוש בצבע להמחשת מידע – להימנע ולספק חלופה‬
‫מסך קטן + מקלדת + רוחב פס‬ ‫מסע ניווט מ×תגר‬ ‫‪ ‬להקפיד על ניווט מינימלי )בר עליון מצומצ×(‬ ‫‪ ‬לציין ל×ן מ ב ל כל לינק‬ ‫ל ל מוביל ל נ‬ ‫‪ ‬×× ×™×© קישור לקובץ, לציין ברור מה סוג הקובץ‬ ‫‪Access Key ‬‬ ‫‪ ‬כתובות קצרות‬
‫תמונה שווה ×לף מילי×‬ ‫וצבע עושה ×ור בעיניי×‬ â€«×™×©× × ×”×ª×§× ×™× ×¢× × ×™×’×•×“×™×•×ª נמוכה‬ ‫ו××™ תמיכה בפור×ž×˜×™× ×ž×¡×•×™×ž×™×‬ ‫‪ ‬להימנע משימוש בתמונות גדולות ×ו ברזולוציה גבוהה‬ ‫)××œ× ×× ×”×“×‘×¨ נחוץ ×œ×©× ×”×¢×‘×¨ת מידע(‬ ‫‪ ‬לכל ×למנט ש×ינו טקסטו×לי – לצר×£ טקסט ×לטרנטיבי‬ ‫‪ ‬להקפיד על ניגודיות טובה בין צבע הרקע לצבע התוכן‬ â€«×‘×’×“×œ×™× ××‘×¡×•×œ×•×˜×™×™× ×‘×¤ קסל ×‬ ‫‪ ï‚§â€¬× ×Ÿ להשתמש בגדל × ×בסולוט × ×ו בפיקסלי×‬ ‫×ין‬
‫×× ×©×™× ×©×ž×—×™×‬ ‫×נש × ×©×ž×— ×‬ ‫×תר×™× ×§×˜× ×™×‬ ‫×תר × ×§×˜×  ×‬ ‫פחות זמן וכסף‬ ‫‪ ‬בדקו ×ת גודל העמוד:‬ ‫העמוד:‬ ‫)ההמלצה – העמוד כולו ‪ ,20KB‬ה-‪(10KB Markup‬‬ ‫‪ ‬בדקו ×ת גודל גיליון הסגנון‬ ‫‪ ‬הקפידו שהגלילה תהיה לצד ×חד בלבד )למעלה-למטה(‬
‫"חסכנות" ברשת‬ ‫‪caching ‬‬ ‫‪ ‬להימנע מריפרוש ×וטומטי )××œ× × ×ž×•×“×™×¢×™× ×œ×ž×©×ª×ž×©â€¬ â€«× ×œ×ž תמ‬ ‫ט מט ל ×× ×žâ€¬ ‫לה מנ מר פר‬ ‫על כך ומ×פשר×™× ×œ×• שליטה‬ ‫על הנעשה(‬ ‫‪ ‬הפניה מחדש – רק בשרת )קוד 003(‬
‫להפחית ×œ×ž×™× ×™×ž×•× ×ת הצורך‬ ‫ב×מצעי קלט‬ ‫‪ ‬סדר הגיוני של מעבר משדה לשדה )‪(Tab‬‬ ‫‪ ‬כמה שפחות שדות טקסט חופשי חובה‬ ‫‪ ‬שימוש בתוויות בטופס – טקסט מובן ×•×ž×™×§×•× ×‘×¨ור‬ ‫‪ ‬×× ×פשר, לספק ערך ברירת מחדל שיסומן מר×ש‬
‫הזמן קצר וההסחה מרובה !‬ ‫השימוש נעשה בתנועה ....‬ ‫‪ ‬כותרת ברור×” לעמוד‬ ‫מ ב פה בר ר×” ופשוטה‬ ‫‪ ‬שימוש בשפה ברור×” פ טה‬ ‫‪ ï‚§â€¬×§×•×“× ×ž×” שחשוב, ××—"×› מה שפחות‬ ‫‪ ‬הקפידו לספק רק ×ת מה שהמשתמש חפץ בו‬ ‫‪ ‬בדקו שהתוכן מת××™× ×œ×¦×¨×™×›×” בהתקן נייד‬
‫מה למדנו ?‬ ‫בכמה ×¦×¢×“×™× ×¤×©×•×˜×™×‬ ‫×פשר להפוך ×ת ×”×¢×•×œ× ×”× ×™×™×“ לנגיש עבור הרבה יותר ×נשי×...‬ ‫ר×•×¦×™× ×¢×ª עוד ?‬ ‫לדעת ע‬
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
http://mobiready.com/start.jsp http://mobiready com/start jsp
http://validator.w org/mobile/ http://validator w3.org/mobile/
³ó³Ù³Ù±è://·É·É·É.·É3.´Ç°ù²µ/°Õ¸é/2010/°ä¸éâ€m·É²¹²ú±èâ€20100211/ ‫מפגש – פיתוח למובייל‬ 16:30-21:00 24.3 ,â€«×™×•× ×¨ביעי‬ http://www.w3c.org.il/
‫ערוץ ×”-‪ youtubeâ€¬× ×ž×¦× ×‘×¢×¨×™×›×” – הקישור יעודכן בהקד×‬
Mobile and Accessibility

More Related Content

Mobile and Accessibility

  • 1. ‫×תי יער×™, הכנס השנתי של ×יגוד ×”×ינטרנט הישר×לי )01.2.22(‬
  • 5. ‫/‪h³Ù³Ù±è://·É·É·É.·É3.´Ç°ù²µ/²Ñ´Ç²ú¾±±ô±ð‬â¶Ä¬ ‫עשר×” עקרונות‬ ‫ק‬ ‫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
  • 20. ³ó³Ù³Ù±è://·É·É·É.·É3.´Ç°ù²µ/°Õ¸é/2010/°ä¸éâ€m·É²¹²ú±èâ€20100211/ ‫מפגש – פיתוח למובייל‬ 16:30-21:00 24.3 ,â€«×™×•× ×¨ביעי‬ http://www.w3c.org.il/
  • 21. ‫ערוץ ×”-‪ youtubeâ€¬× ×ž×¦× ×‘×¢×¨×™×›×” – הקישור יעודכן בהקד×‬