Mobile Web Application Best Practices

1. Mobile Web Application Best Practices אייל סלע מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה-W3C הישראלי

2. j.mp/w3cdoc

3. תוכנית... מבוא - איגוד האינטרנט הישראלי ו W3C אודות ה-mobile web applications best practices The Best practices

4. איגוד האינטרנט הישראלי שלוחת האיגוד הבינלאומי: עמותה ללא מטרת רווח פועל לקידום האינטרנט והטמעתו בישראל כתשתית טכנולוגית, מחקרית, חינוכית, חברתית ועסקית.

5. W3C ארגון בינלאומי כ-350 ארגונים פורום ניטראלי ליצירת תקני רשת באינטרנט. משימה: להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח ארוך.

6. W3C השנה סידרת מפגשים למפתחים קבוצות עניין פיתוח אפליקציה סדנאות תגובה למומחים הרצאות אורח (שלנו, שלכם) תמיכה בפעילות קבוצות/קהילות שילוב מומחים בקבוצות עבודה עוד... ( )

7. אודות ה- Mobile Web Application Best Practices

8. מסמך קווים מנחים של ה-W3C. מגדיר 35 שיטות לשיפור חווית המשתמש באפליקציות ווב למכשירים ניידים

9. המסמך נמצא בשלב Candidate recomendation You are here j.mp/w3crec

10. הגישו דיווח יישום... למה לכם? כי חייבים להציג יישום בכדי שזה יהפוך לתקן כי האפליקציה שלכם תופיע בדוח היישומים כי אני אכתוב על זה באתר W3Cהישראלי j.mp/w3cmo1 10

11. public-bpwg-comments@w3.org j.mp/w3cmobp

12. דיווח יישום... מי יכול להגיש? כל מי שפיתח אפליקציה וישים חלקמהשיטות במסמך (גם בדיעבד) 12

13. מה מיישמים? 13

14. על מה אנחנו מדברים? 14

15. Web Application Web page(s) that provide an "application-like" experience within a Web browser.

16. validator.w3.org/mobile/ bit.ly/w3cmbp הבדל מאתר רגיל(BP1) include locally executable elements of interactivityand persistentstate. למשל: app.clichespotting.com app.clichespotting.com • nextbus.com/webkit/ m.jobscentral.com.sg

17. + User Agent Switcher • nextbus.com/webkit/ j.mp/w3cmo1 17

18. touchsolitaire.mobi/app j.mp/w3cmo15

19. app.clichespotting.com app.clichespotting.com 19

20. m.jobscentral.com.sg m.jobscentral.com.sg 20

21. Sencha touch (!!) http://www.sencha.com/ j.mp/w3cmo6

22. מגבלות והבדלים – מכשירים ניידים לעומת שולחניים • תצוגה • הזנת תוכן • רוחב פס ועלות • מטרות המשתמש • מגבלות המכשיר bit.ly/w3cmbp

23. Best practices

24. נתוני האפליקציה (3) • ביטחון מידע ופרטיות (1) • יידוע המשתמש ושליטתו באפליקציה (4) • שימוש מוגבל במשאבים (11) • חווית משתמש (10) • התאמה ל-Delivery Context(5) • שיקולים נוספים (1) (סה"כ 35)

25. נתוני האפליקציה (3) • ביטחון מידע ופרטיות (1) • יידוע המשתמש ושליטתו באפליקציה (4) • שימוש מוגבל במשאבים (11) • חווית משתמש (10) • התאמה ל-Delivery Context(5) • שיקולים נוספים (1)

26. השתמשו בטכנולוגיות ושיטות מתאימות לאחסון נתוני האפליקציה

27. 1. המעיטו את השימוש בעוגיות מה? נשלחות לשרת בכל בקשה יתכן ולא יהיה פעילות במכשיר איך? בנו אפליקציה פעילה גם ללא עוגיות (למשל עם URI decoration) Image by: D Sharon Pruitt 1. Use Cookies Sparingly

28. 2. השתמשו בטכנולוגיות המתאימות לאחסון מידע בצד הלקוח מה? עדיף להשתמש במנגנונים בצד לקוח לאחסון מידע, בעיקר בכמויות גדולות. (מועיל בstart-up time , Responsiveness) איך? BONDI HTML5 - Offline - j.mp/w3coff OperaWidgets by Remy Sharp - remysharp.com/demo/rubiks/ 2. Use Appropriate Client-Side Storage Technologies for Local Data j.mp/w3cmo7

29. 3. שכפלו מידע לשרת במידת הצורך מה? תצוגה אחידה במכשירים שונים מגבה למקרה של אובן המכשיר (לא צריך לשכפל למשל העדפות תצוגה של מכשיר ספציפי) איך? טכנולוגיות לאחסון מידע צד לקוח מספקת גם בדיקת קישוריות. דוגמא... 3. Replicate Local Data

30. Local storage + offline - demo www.html5rocks.com/tutorials/offline/todo/ j.mp/mozoff

31. נתוני האפליקציה (3) • ביטחון מידע ופרטיות (1) • יידוע המשתמש ושליטתו באפליקציה (4) • שימוש מוגבל במשאבים (11) • חווית משתמש (10) • התאמה ל-Delivery Context(5) • שיקולים נוספים (1)

32. ביטחון מידע ופרטיות – השתמשו במידע אמין והגנו על פרטיות המשתמש

33. 4. Do not Execute Unescaped or Untrusted JSON data direct execution of a datafeed that contains unescaped user-generated data = security risk Use JSON parser Image by: D Sharon Pruitt 4. Do not Execute Unescaped or Untrusted JSON data

34. נתוני האפליקציה (3) • ביטחון מידע ופרטיות (1) • יידוע המשתמש ושליטתו באפליקציה (4) • שימוש מוגבל במשאבים (11) • חווית משתמש (10) • התאמה ל-Delivery Context(5) • שיקולים נוספים (1)

35. התייחסו יפה למידע רגיש... מדיה, פרטי קשר ו-calendar, פירוט שיחות, מידע על המכשיר, מיקום (!), חיבור לרשת (הקפידו על ההמלצות הבאות אם הדפדפן אינו מספק אותן)

36. 5. הודיעו למשתמש על גישה אוטומטית לרשת* מה? שימוש ברשת מרוקן את הסוללה עולה כסף... איך? אייקון המודיע על פעילות ברקע הודיעו על שימוש רב ברשת (בחיבור ראשון, בהרשמה או בדפי העזרה) ספקו מידע על אופי החיבור (כמה זמן, תדירות,סה"כ שימוש) . 5. Inform the User About Automatic Network Access

37. 6. ספק אמצעים לשליטה בחיבור אוטומטי לרשת * מה? אפשר למשתמש למנוע חיבור אוטומטי לרשת (כאשר זה מבוטל – הציגו הודעת חיבור מעת לעת.) אפשרי – אפשר למשתמש לשלוט במועדי החיבור או בפעילויות אשר יכולות להתחבר. Image by: Jeff Sonstein 6. Provide Sufficient Means to Control Automatic Network Access

38. 7. הודיעו למשתמש על שימוש במידע על המכשיר או פרטים אישיים מה? בעת כניסה ראשונה לשירות או בגישה ראשונה למידע. איך? לרוב ל-API יש בקשת רשות מובנת (recover gracefully ;confirmation dialog ). 7. Ensure the User is Informed About Use of Personal and Device Information MapQuest.com

39. 8. אפשרו Sign-in אוטומטי מה? כי יותר קשה להזין תוכן.... איך? בעוגיות, או local storage (לא לשכוח לשים לינק ל-log out) 8. Enable Automatic Sign-in

40. נתוני האפליקציה (3) • ביטחון מידע ופרטיות (1) • יידוע המשתמש ושליטתו באפליקציה (4) • שימוש מוגבל במשאבים (11) • חווית משתמש (10) • התאמה ל-Delivery Context(5) • שיקולים נוספים (1)

41. אל תכבידו על משאבי המכשיר מוגבלים בניידים - זיכרון עיבוד רוחב פס

42. 9. Use Transfer Compression מה? השתמשו בדחיסה של התוכן. אבל זכרו שיש עלות של זמן וחיי סוללה. איך? Gzip ... לרוב לא צריך לדוחס: תמונות, אדיו, וידאו, קבצים קנטים מ-1k 9. Use Transfer Compression

43. 10. מזערו את גודל האפליקציה והנתונים למה? תרד יותר מהר תפעל יותר טוב איך? הקטינו CSS, HTML ו-JavaScript (removal of white space and comments; shorter tokens (variables, method names, selector names) 10. Minimize Application and Data Size compressorrater.thruhere.net

44. 11. המנעו מ-Redirects מה? לרוב נעשה שימוש ב HTTP 3xx או HTML meta refresh להעברת מידע (e.g. account authentication) איך? פשוט נסו להמנע מהן. אם צריך יותר משתיים, אפשר להציג דף מעבר )בכדי שהמשתמש ידע ש'זה טעון'( 11. Avoid Redirects

45. 12. Optimize Network Requests מה? עדיף לבצע בקשות גדולות לשרת אך מועטות יותר (מאשר הרבה בקשות קטנות) איך? קיבוץ בקשות תעדוף בקשות פעילות בהתאם לרמת הקישוריות 12. Optimize Network Requests

46. 13. צמצמו שימוש במקורות חיצוניים למה? כל קובץ סקריפט, CSS, תמונה = HTTP request = טיול לשרת איך? CSS ו-JavaScript כל אחד בקובץ אחד בלבד OR או שהם ישולבו לפני שהעמוד מוגש ללקוח 13. Minimize External Resources

47. 14. אחדו תמונות (Sprites) איך? similar sizes and color palettes. That do not change often. use CSS positioning and clipping. דוגמא www.yahoo.com Image by: Kriplozoik 14. Aggregate Static Images into a Single Composite Resource (Sprites)

48. 15. שלבו תמונות רקע ב-CSS מה? במקום להוריד תמונות, אפשר לכלול אותן ב-CSS איך? data URI דוגמא: buzz data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAhCAYAAADkrOp1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYFJREFUeNqEU7FOwzAQvXMuJSC1oqlKuoaZkakrGyti5i+Q+AZ+goERiR9hYEJiZKVIFaqgtJV9nO04SdO0TfQk5+75vedLgswM45vnDADuBOcCuy4vkmaOCE/ZqJ+nabcbxzFh0Zx8fQPFpG6z0eD0JEuPVUSglAJATyGaAxnm8WDY70WdBKIawd4RxUBa81EnSRTFHUdAu7tQQBUB+QW5B7BwvSKFEB2BpSCHAXsiZnQVV5dnKlauxAxlsyh7ggQFNKaSLgmmRvAeDUJQMAxKBAw0CRwIxmHdwCv7U4iCVUHYamFcyKZCGVLLbmhRMEHBD2jzFFCGlDruzYBtGbiaA2JbhkDQvonNSZraoGCnhbYpNxXsvkrBBd2mwMWgkHdYQAshhNQiz7hpYfYrQO1145YM8mf9afGIkBVg82XJnzDsH76vFr+z8FWtQTzU1UX+yKufj+V8NtVGh0/Dgd38mLsvb5PL data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/ //+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC 15. Include Background Images Inline in CSS Style Sheet

49. 16. Fingerprinting Resource for chach מה? אפשר לעשות cache לקבצים שמשתנים מדי פעם איך? • הגדירו את ה-chase לתאריך רחוק מאוד בעתיד • הוסיפו בסיומת ה-URL של הקובץ hash שישתנה כשצריך לעדכן אותו. <img src="http://www.example.com/userimages/joeblogs-67f90da089da"> 16. Cache Resources By Fingerprinting Resource References

50. 17. Cache AJAX Data 17. Cache AJAX Data 51 מה? כפי שעושים עם תוכן רגיל, אפשר לעשות cache למידע שמגיע ב-AJAX. איך? כרגיל Expires \ Cache-Control header ו-fingerprinting