1
W3CDF ‫1. מפגש‬                                        #w3cdf :‫2. תג בטוויטר‬http://www.flickr.com/photos/8774945@N07/385...
‫מילה על הווב‬           ‫3‬
‫‪Mobile Web Application Best‬‬        ‫‪Practices‬‬                ‫אייל סלע‬  ‫מנהל פרויקטים, איגוד האינטרנט הישראלי‬   ...
j.mp/w3cdoc              5
...‫תוכנית‬         ‫ ואיגוד האינטרנט הישראלי‬W3C - ‫• מבוא‬mobile web applications best practices-‫• אודות ה‬            ...
‫איגוד האינטרנט הישראלי‬                       ‫שלוחת האיגוד הבינלאומי‬                         ‫עמותה ללא מטרת רווח‬‫פועל...
‫‪W3C‬‬                            ‫ארגון בינלאומי‬     ‫•‬                           ‫כ-053 ארגונים‬       ‫•‬  ‫פורום ני...
Mobile Web -‫אודות ה‬ Application Best    Practices                      9
Web Applicationa Web page (XHTML + CSS) or collection of Web pagesdelivered over HTTP which use server-side or client-side...
bit.ly/w3cmbp       validator.w3.org/mobile/                                  )BP1(   ‫הבדל מאתר רגיל‬include locally exec...
‫מגבלות והבדלים – מכשירים ניידים לעומת שולחניים‬                                    ‫• תצוגה‬                             ...
Best practices13
‫(3)‬    ‫נתוני האפליקציה‬    ‫1.‬                  ‫ביטחון מידע ופרטיות (1)‬     ‫2.‬‫יידוע המשתמש ושליטתו באפליקציה (4)‬...
‫(3)‬   ‫1. נתוני האפליקציה‬                     ‫(1)‬  ‫ביטחון מידע ופרטיות‬    ‫2.‬     ‫יידוע המשתמש ושליטתו באפליקציה ...
‫השתמשו בטכנולוגיות ושיטות מתאימות לאחסון‬                          ‫נתוני האפליקציה‬                                     ...
‫המעיטו את השימוש בעוגיות‬                                      ‫מה?‬                     ‫נשלחות לשרת בכל בקשה‬          ...
‫השתמשו בטכנולוגיות המתאימות לאחסון מידע בצד הלקוח‬                                                                       ...
‫שכפלו מידע לשרת במידת הצורך‬                                                       ‫מה?‬              ‫•תצוגה אחידה במכשי...
‫1. נתוני האפליקציה (3)‬                ‫(1)‬   ‫2. ביטחון מידע ופרטיות‬     ‫(4)‬   ‫יידוע המשתמש ושליטתו באפליקציה‬     ...
‫ביטחון מידע ופרטיות – השתמשו במידע אמין והגנו‬                          ‫על פרטיות המשתמש‬                               ...
Do not Execute Unescaped or UntrustedJSON data                            direct execution of a                           ...
‫1. נתוני האפליקציה (3)‬                           ‫2. ביטחון מידע ופרטיות (1)‬ ‫(4)‬   ‫3. יידוע המשתמש ושליטתו באפליקציה...
‫התייחסו יפה למידע רגיש...‬‫מדיה, פרטי קשר ו-‪ ,calendar‬פירוט שיחות, מידע על המכשיר, מיקום (!), חיבור לרשת‬        ‫הקפיד...
‫הודיעו למשתמש על שימוש במידע על‬                  ‫המכשיר או פרטים אישיים‬                                               ...
‫אפשרו ‪ Sign-in‬אוטומטי‬                               ‫מה?‬      ‫כי יותר קשה להזין תוכן....‬                           ...
‫האפליקציה (3)‬                                       ‫1. נתוני‬                    ‫2. ביטחון מידע ופרטיות (1)‬     ‫3. י...
‫אל תכבידו על משאבי המכשיר‬                         ‫זיכרון‬                         ‫עיבוד‬                       ‫רוחב פ...
‫מזערו את גודל האפליקציה והנתונים‬                                                                                        ...
‫המנעו מ-‪Redirects‬‬                                           ‫מה?‬‫לרוב נעשה שימוש ב ‪ HTTP 3xx‬או ‪HTML meta‬‬        ...
‫‪Optimize Network Requests‬‬                                            ‫מה?‬             ‫עדיף לבצע בקשות גדולות לשרת אך...
‫צמצמו שימוש במקורות חיצוניים‬                                               ‫מה?‬  ‫‪style sheets, scripts, image - each ...
(Sprites) ‫אחד תמונות‬                                                           ?‫איך‬                         •   simila...
Keep DOM Size Reasonable                            ?‫איך‬             pagination ‫למשל בעזרת‬                            ...
‫נתוני האפליקציה‬                              ‫(3)‬              ‫1.‬                     ‫ביטחון מידע ופרטיות (1)‬   ‫2....
‫בגלל מורכבות רבה יותר בשימוש במכשירים ניידים‬                ‫– חשוב לשפר את חווית המשמש‬ ‫‪• Latency‬‬ ‫‪• interaction m...
‫להתחיל ציק צק‬     Optimize For Application Start-up Time                                                                ...
Minimize Perceived Latency                                                              ?‫איך‬               • Incremental...
Design for Multiple Interaction Methods                                                                                   ...
"Click-to-Call"-‫השתמש במספרי טלפון ב‬                                                                 ‫איך‬              ...
‫‪Ensure Paragraph Text Flows‬‬                                                           ‫מה?‬                           ...
Ensure Consistency Of State Between     Devices                                                                           ...
‫האפליקציה (3)‬  ‫נתוני‬   ‫1.‬                     ‫ביטחון מידע ופרטיות (1)‬    ‫2.‬     ‫יידוע המשתמש ושליטתו באפליקציה ...
‫התאימו ל- ‪ Delivery Context‬שונים‬‫צרו אפליקציה בעלת יכולת זיהוי ההקשר (כגון יכולות המכשיר) והסתגלות להן. (התאמת‬       ...
Prefer Server-Side Detection Where  PossibleHTTP request header: Accept; User-Agent; X-Wap-Profile   Use Client-Side Capab...
‫אפשר למשתמש לבחור את התצוגה‬                                ‫מה?‬               ‫אפשר למשתמש לשנות את‬                   ...
‫(3)‬  ‫נתוני האפליקציה‬   ‫1.‬                       ‫ביטחון מידע ופרטיות (1)‬    ‫2.‬     ‫יידוע המשתמש ושליטתו באפליקצי...
(published as advisory notes)48
Consider Use of Canvas Element or      SVG For Dynamic Graphics                                                           ...
‫הודיעו למשתמש על גישה אוטומטית לרשת‬                                                    ‫מה?‬                        ‫שימ...
‫ספק אמצעים לשליטה בחיבור אוטומטי לרשת‬                                                                        ‫מה?‬      ...
‫כלים נוספים‬          ‫25‬
Web Compatibility Test for Mobile Browsers - version 2 -  j.mp/w3ctmb              Mobile Web Best Practices (MWBP) Flipca...
‫תודה ‪‬‬        ‫• הירשמו לידיעון‬               ‫• צרו קשר‬‫‪@isociltech @eyalsela‬‬                   ‫45‬
Upcoming SlideShare
Loading in …5
×

שיטות לפיתוח אפליקציות ווב למכשירים ניידים על פי Mobile Web Application Best Practices

1,899 views

Published on

Mobile web best practices eyal sela [hebrew]

  • Be the first to comment

  • Be the first to like this

שיטות לפיתוח אפליקציות ווב למכשירים ניידים על פי Mobile Web Application Best Practices

  1. 1. 1
  2. 2. W3CDF ‫1. מפגש‬ #w3cdf :‫2. תג בטוויטר‬http://www.flickr.com/photos/8774945@N07/3859690596/ 2
  3. 3. ‫מילה על הווב‬ ‫3‬
  4. 4. ‫‪Mobile Web Application Best‬‬ ‫‪Practices‬‬ ‫אייל סלע‬ ‫מנהל פרויקטים, איגוד האינטרנט הישראלי‬ ‫ומשרד ה-‪ W3C‬הישראלי‬ ‫4‬
  5. 5. j.mp/w3cdoc 5
  6. 6. ...‫תוכנית‬ ‫ ואיגוד האינטרנט הישראלי‬W3C - ‫• מבוא‬mobile web applications best practices-‫• אודות ה‬ The Best practices • 6
  7. 7. ‫איגוד האינטרנט הישראלי‬ ‫שלוחת האיגוד הבינלאומי‬ ‫עמותה ללא מטרת רווח‬‫פועל לקידום האינטרנט והטמעתו בישראל כתשתית‬ ‫טכנולוגית, מחקרית, חינוכית, חברתית ועסקית‬ ‫7‬
  8. 8. ‫‪W3C‬‬ ‫ארגון בינלאומי‬ ‫•‬ ‫כ-053 ארגונים‬ ‫•‬ ‫פורום ניטראלי ליצירת תקני רשת באינטרנט.‬ ‫•‬ ‫משימה:‬ ‫•‬‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה‬ ‫לטווח ארוך.‬ ‫8‬
  9. 9. Mobile Web -‫אודות ה‬ Application Best Practices 9
  10. 10. Web Applicationa Web page (XHTML + CSS) or collection of Web pagesdelivered over HTTP which use server-side or client-sideprocessing (e.g. JavaScript) to provide an "application-like"experience within a Web browser. 10
  11. 11. bit.ly/w3cmbp validator.w3.org/mobile/ )BP1( ‫הבדל מאתר רגיל‬include locally executable elements of interactivity andpersistent state. nextbus.com/webkit/ 11
  12. 12. ‫מגבלות והבדלים – מכשירים ניידים לעומת שולחניים‬ ‫• תצוגה‬ ‫• הזנת תוכן‬ ‫• רוחב פס ועלות‬ ‫• מטרות המשתמש‬ ‫• מגבלות המכשיר‬‫‪bit.ly/w3cmbp‬‬ ‫21‬
  13. 13. Best practices13
  14. 14. ‫(3)‬ ‫נתוני האפליקציה‬ ‫1.‬ ‫ביטחון מידע ופרטיות (1)‬ ‫2.‬‫יידוע המשתמש ושליטתו באפליקציה (4)‬ ‫3.‬ ‫שימוש מוגבל במשאבים (11)‬ ‫4.‬ ‫חווית משתמש (01)‬ ‫5.‬ ‫התאמה ל-‪)5( Delivery Context‬‬ ‫6.‬ ‫שיקולים נוספים (1)‬ ‫7.‬ ‫(סה"כ 53)‬ ‫41‬
  15. 15. ‫(3)‬ ‫1. נתוני האפליקציה‬ ‫(1)‬ ‫ביטחון מידע ופרטיות‬ ‫2.‬ ‫יידוע המשתמש ושליטתו באפליקציה (4)‬ ‫3.‬ ‫שימוש מוגבל במשאבים (11)‬ ‫4.‬ ‫חווית משתמש (01)‬ ‫5.‬ ‫התאמה ל-‪)5( Delivery Context‬‬ ‫6.‬ ‫שיקולים נוספים (1)‬ ‫7.‬‫51‬
  16. 16. ‫השתמשו בטכנולוגיות ושיטות מתאימות לאחסון‬ ‫נתוני האפליקציה‬ ‫61‬
  17. 17. ‫המעיטו את השימוש בעוגיות‬ ‫מה?‬ ‫נשלחות לשרת בכל בקשה‬ ‫יתכן ולא יהיה פעילות במכשיר‬ ‫איך?‬‫בנו אפליקציה שיכולה להשאר פעילה גם ללא עוגיות‬ ‫(למשל עם ‪)URI decoration‬‬ ‫‪Image by: D Sharon Pruitt‬‬ ‫71‬
  18. 18. ‫השתמשו בטכנולוגיות המתאימות לאחסון מידע בצד הלקוח‬ ‫מה?‬ ‫עדיף להשתמש במנגנונים בצד לקוח לאחסון‬ ‫מידע, בעיקר בכמויות גדולות.‬ ‫(מועיל ב ‪)Responsiveness , start-up time‬‬ ‫איך?‬ ‫• ‪BONDI‬‬ ‫• 5‪- HTML‬‬ ‫‪Offline - j.mp/w3coff‬‬ ‫• ‪Opera Widgets‬‬‫|/‪by Remy Sharp-remysharp.com/demo/rubiks‬‬ ‫81‬
  19. 19. ‫שכפלו מידע לשרת במידת הצורך‬ ‫מה?‬ ‫•תצוגה אחידה במכשירים שונים‬ ‫•מגבה למקרה של אובן המכשיר‬ ‫(לא צריך לשכפל למשל העדפות תצוגה של מכשיר ספציפי)‬ ‫‪j.mp/mozoff‬‬ ‫איך?‬ ‫טכנולוגיות לאחסון מידע צד לקוח מספקת גם‬ ‫בדיקת קישוריות.‬ ‫דוגמא‬ ‫‪j.mp/mozoff‬‬ ‫91‬
  20. 20. ‫1. נתוני האפליקציה (3)‬ ‫(1)‬ ‫2. ביטחון מידע ופרטיות‬ ‫(4)‬ ‫יידוע המשתמש ושליטתו באפליקציה‬ ‫3.‬ ‫שימוש מוגבל במשאבים (11)‬ ‫4.‬ ‫חווית משתמש (01)‬ ‫5.‬ ‫התאמה ל-‪)5( Delivery Context‬‬ ‫6.‬ ‫שיקולים נוספים (1)‬ ‫7.‬‫02‬
  21. 21. ‫ביטחון מידע ופרטיות – השתמשו במידע אמין והגנו‬ ‫על פרטיות המשתמש‬ ‫12‬
  22. 22. Do not Execute Unescaped or UntrustedJSON data direct execution of a datafeed that contains unescaped user- generated data = security risk A JSON parser will accept only valid JSON, preventing potentially malicious code from running.Image by: D Sharon Pruitt RFC4627 for details 22
  23. 23. ‫1. נתוני האפליקציה (3)‬ ‫2. ביטחון מידע ופרטיות (1)‬ ‫(4)‬ ‫3. יידוע המשתמש ושליטתו באפליקציה‬ ‫(11)‬ ‫שימוש מוגבל במשאבים‬ ‫4.‬ ‫חווית משתמש (01)‬ ‫5.‬ ‫התאמה ל-‪)5( Delivery Context‬‬ ‫6.‬ ‫שיקולים נוספים (1)‬ ‫7.‬‫32‬
  24. 24. ‫התייחסו יפה למידע רגיש...‬‫מדיה, פרטי קשר ו-‪ ,calendar‬פירוט שיחות, מידע על המכשיר, מיקום (!), חיבור לרשת‬ ‫הקפידו על ההמלצות הבאות אם הדפדפן אינו מספק אותן‬ ‫42‬
  25. 25. ‫הודיעו למשתמש על שימוש במידע על‬ ‫המכשיר או פרטים אישיים‬ ‫מה?‬ ‫בעת כניסה ראשונה לשירות או בגישה ראשונה‬ ‫למידע.‬ ‫איך?‬ ‫לרוב ל-‪ API‬יש בקשת רשות מובנת‬ ‫(‪.)confirmation dialog ; recover gracefully‬‬‫‪MapQuest.com‬‬ ‫52‬
  26. 26. ‫אפשרו ‪ Sign-in‬אוטומטי‬ ‫מה?‬ ‫כי יותר קשה להזין תוכן....‬ ‫איך?‬ ‫בעוגיות, או ‪local storage‬‬ ‫(לא לשכוח לשים לינק ל-‪)log out‬‬ ‫62‬
  27. 27. ‫האפליקציה (3)‬ ‫1. נתוני‬ ‫2. ביטחון מידע ופרטיות (1)‬ ‫3. יידוע המשתמש ושליטתו באפליקציה (4)‬ ‫(11)‬ ‫4. שימוש מוגבל במשאבים‬ ‫(01)‬ ‫5. חווית משתמש‬ ‫6. התאמה ל-‪)5( Delivery Context‬‬ ‫7. שיקולים נוספים (1)‬‫72‬
  28. 28. ‫אל תכבידו על משאבי המכשיר‬ ‫זיכרון‬ ‫עיבוד‬ ‫רוחב פס‬ ‫מוגבלים יותר במכשירים ניידים‬ ‫82‬
  29. 29. ‫מזערו את גודל האפליקציה והנתונים‬ ?‫מה‬ ‫תרד יותר מהר‬ ‫תפעל יותר טוב‬ ?‫איך‬ JavaScript-‫ ו‬HTML ,CSS ‫הקטינו‬ (removal of white space and comments; shorter tokens (variables, method names, selector names)See http://compressorrater.thruhere.net 29
  30. 30. ‫המנעו מ-‪Redirects‬‬ ‫מה?‬‫לרוב נעשה שימוש ב ‪ HTTP 3xx‬או ‪HTML meta‬‬ ‫‪ refresh‬להעברת מידע‬ ‫)‪(e.g. account authentication‬‬ ‫איך?‬ ‫פשוט נסו להמנע מהן.‬‫אם צריך יותר משתיים, אפשר להציג דף מעבר‬ ‫)בכדי שהמשתמש ידע שזה טעון(‬ ‫03‬
  31. 31. ‫‪Optimize Network Requests‬‬ ‫מה?‬ ‫עדיף לבצע בקשות גדולות לשרת אך מועטות‬ ‫יותר (מאשר הרבה בקשות קטנות)‬ ‫איך?‬ ‫• קיבוץ בקשות‬ ‫• תעדוף בקשות‬ ‫• פעילות בהתאם לרמת הקישוריות‬ ‫13‬
  32. 32. ‫צמצמו שימוש במקורות חיצוניים‬ ‫מה?‬ ‫‪style sheets, scripts, image - each of which‬‬ ‫‪requires an HTTP request‬‬ ‫איך?‬ ‫‪ CSS‬ו-‪ JavaScript‬כל אחד בקובץ אחד בלבד‬ ‫‪OR‬‬ ‫או שהם ישולבו לפני שהעמוד מוגש ללקוח‬ ‫23‬
  33. 33. (Sprites) ‫אחד תמונות‬ ?‫איך‬ • similar sizes and color palettes. • That do not change often. • use CSS positioning and clipping.Image by: Kriplozoik ‫דוגמא‬ www.yahoo.com 33
  34. 34. Keep DOM Size Reasonable ?‫איך‬ pagination ‫למשל בעזרת‬ 34
  35. 35. ‫נתוני האפליקציה‬ ‫(3)‬ ‫1.‬ ‫ביטחון מידע ופרטיות (1)‬ ‫2.‬ ‫יידוע המשתמש ושליטתו באפליקציה (4)‬ ‫3.‬ ‫שימוש מוגבל במשאבים (11)‬ ‫4.‬ ‫(01)‬ ‫5. חווית משתמש‬ ‫(5)‬ ‫6. התאמה ל-‪Delivery Context‬‬ ‫7. שיקולים נוספים (1)‬‫53‬
  36. 36. ‫בגלל מורכבות רבה יותר בשימוש במכשירים ניידים‬ ‫– חשוב לשפר את חווית המשמש‬ ‫‪• Latency‬‬ ‫‪• interaction method‬‬ ‫‪• data consistency‬‬ ‫63‬
  37. 37. ‫להתחיל ציק צק‬ Optimize For Application Start-up Time ?‫איך‬ • Use Offline Technology (e.g. AppCache) – Resources (HTML, JavaScript, CSS) stored locally. • Use Local Storage: store a snapshot of last state - display it immediately on start-up • Minimize Number of Local Storage Querieshttp://www.flickr.com/photos/66475767@N00/4333416050/ before the first view can be displayed. 37
  38. 38. Minimize Perceived Latency ?‫איך‬ • Incremental Rendering: Place JavaScript at the bottom of the page+ configure the page so that any useful information that might be available is viewable while the main content of the application is still loading. • Keep the User Informed of Activity (progress bars) • Avoid Page Reloads (To reflect changes in state or show different views) • Preload Probable Next ViewsMapQuest.com 38
  39. 39. Design for Multiple Interaction Methods ?‫מה‬ ‫שלושה סוגי אינטראקציה עיקריים‬ .‫עדיף להתאים לשיטת מכשיר היעד. אם אי אפשר – להתאים לכולם‬ ?‫איך‬ Focus Based: (focus "jumps" from link to link) . Pointer Based: (Key-based navigation + pointer ) Selectable elements that are associated with each other need to be close Selectable elements need to be large enough (pointer often moves in steps) Selectable elements should have rolloversImage by: Dennis Bournique Touch Based: (finger ) Selectable elements may be widely spaced since the user can select them directly Selectable elements must be large enough to be easily selected (list items - at least 30px) 39
  40. 40. "Click-to-Call"-‫השתמש במספרי טלפון ב‬ ‫איך‬ <a href="tel:[PHONE-NUMBER]">[PHONE-NUMBER]</a> entered using the full international prefixmy.springpadit.com RFC3966 40
  41. 41. ‫‪Ensure Paragraph Text Flows‬‬ ‫מה?‬ ‫• מנע גלילה אנכית‬ ‫• ואפשר קריאה בשינוי אוריאנטציה‬ ‫איך?‬‫‪Image by: curiouslee‬‬ ‫לא להשתמש ביחידות מוחלטות / פיקסלים‬ ‫כן להשתמש ביחידות יחסיות ל- ‪containers‬‬ ‫14‬
  42. 42. Ensure Consistency Of State Between Devices ?‫מה‬ ‫הקפידו על עקיבות באפליקציה בין מכשירים‬ ‫שונים‬ • Credentials • preferences • Data ?‫איך‬ ‫שימורו על השרת מידע שאינו רלוונטי רק‬ ‫למכשיר הספציפי‬http://www.flickr.com/photos/osde-info/4336196538/sizes/o/ 42
  43. 43. ‫האפליקציה (3)‬ ‫נתוני‬ ‫1.‬ ‫ביטחון מידע ופרטיות (1)‬ ‫2.‬ ‫יידוע המשתמש ושליטתו באפליקציה (4)‬ ‫3.‬ ‫שימוש מוגבל במשאבים (11)‬ ‫4.‬ ‫חווית משתמש (01)‬ ‫5.‬ ‫(5)‬ ‫6. התאמה ל-‪Delivery Context‬‬ ‫(1)‬ ‫7. שיקולים נוספים‬‫34‬
  44. 44. ‫התאימו ל- ‪ Delivery Context‬שונים‬‫צרו אפליקציה בעלת יכולת זיהוי ההקשר (כגון יכולות המכשיר) והסתגלות להן. (התאמת‬ ‫תוכן, ניווט, מבנה עמוד...)‬ ‫44‬
  45. 45. Prefer Server-Side Detection Where PossibleHTTP request header: Accept; User-Agent; X-Wap-Profile Use Client-Side Capability Detection Where NecessaryJavaScript: (e.g. if (some_api_exists) { ...). CSS Media Types / Queries Use Device Classification to Simplify Content Adaptation Class 1: Basic XHTML support, no or very basic scripting. Class 2: Full AJAX and JavaScript support. Class 3: Advanced device APIs Class 1: Pointer Based. Class 2: Touch Based. 45
  46. 46. ‫אפשר למשתמש לבחור את התצוגה‬ ‫מה?‬ ‫אפשר למשתמש לשנות את‬ ‫סוג התצוגה‬ ‫כברירת מחדל ספק את ה-‪UI‬‬ ‫המתאים ביותר‬ ‫אבל זכור את העדפות‬ ‫המשתמש!‬ ‫64‬
  47. 47. ‫(3)‬ ‫נתוני האפליקציה‬ ‫1.‬ ‫ביטחון מידע ופרטיות (1)‬ ‫2.‬ ‫יידוע המשתמש ושליטתו באפליקציה (4)‬ ‫3.‬ ‫שימוש מוגבל במשאבים (11)‬ ‫4.‬ ‫חווית משתמש (01)‬ ‫5.‬ ‫התאמה ל-‪)5( Delivery Context‬‬ ‫6.‬ ‫(1)‬ ‫7. שיקולים נוספים‬‫74‬
  48. 48. (published as advisory notes)48
  49. 49. Consider Use of Canvas Element or SVG For Dynamic Graphics ?‫מה‬ canvas ‫מאפשר לצייר גרפיקה פשוטה‬ JavaScript ‫באמצעות‬http://www.mozilla.com/en-US/firefox/stats/ SVG ‫, וניתנים לשינוי בעזרת‬DOM-‫ להגדרת אלמנטים של גרפיקה וקטורית המתווספים ל‬XML ‫שפת‬ JavaScript 49
  50. 50. ‫הודיעו למשתמש על גישה אוטומטית לרשת‬ ‫מה?‬ ‫שימוש ברשת מרוקן את הסוללה‬ ‫עולה כסף...‬ ‫איך?‬ ‫• אייקון המודיע על פעילות ברגע‬ ‫• הודיעו על שימוש רב ברשת (בחיבור ראשון,‬ ‫בהרשמה או בדפי העזרה)‬ ‫(כמה זמן,‬ ‫• ספקו מידע על אופי החיבור‬ ‫תדירות,סה"כ שימוש)‬ ‫.‬ ‫05‬
  51. 51. ‫ספק אמצעים לשליטה בחיבור אוטומטי לרשת‬ ‫מה?‬ ‫אפשר למשתמש למנוע חיבור אוטומטי‬ ‫לרשת‬ ‫(כאשר זה מבוטל – הציגו הודעת חיבור מעת לעת.)‬ ‫אפשרי –‬ ‫אפשר למשמש לשלוט במועדי החיבור או בפעילויות אשר יכולות‬ ‫להתחבר.‬‫‪Image by: Jeff Sonstein‬‬ ‫15‬
  52. 52. ‫כלים נוספים‬ ‫25‬
  53. 53. Web Compatibility Test for Mobile Browsers - version 2 - j.mp/w3ctmb Mobile Web Best Practices (MWBP) Flipcards j.mp/w3cfcc Mobile Web Application Best Practices Cards w3.org/2010/09/MWABP/ 53
  54. 54. ‫תודה ‪‬‬ ‫• הירשמו לידיעון‬ ‫• צרו קשר‬‫‪@isociltech @eyalsela‬‬ ‫45‬

×