Mobile web best practices eyal sela [hebrew]

1. 1

2. W3CDF ‫1. מפגש‬
#w3cdf :‫2. תג בטוויטר‬
http://www.flickr.com/photos/8774945@
N07/3859690596/
2

3. ‫מילה על הווב‬
‫3‬

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

5. j.mp/w3cdoc
5

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

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

8. ‫‪W3C‬‬
‫ארגון בינלאומי‬ ‫•‬
‫כ-053 ארגונים‬ ‫•‬
‫פורום ניטראלי ליצירת תקני רשת באינטרנט.‬ ‫•‬
‫משימה:‬ ‫•‬
‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬
‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה‬
‫לטווח ארוך.‬
‫8‬

9. Mobile Web -‫אודות ה‬
Application Best
Practices
9

10. Web Application
a Web page (XHTML + CSS) or collection of Web pages
delivered over HTTP which use server-side or client-side
processing (e.g. JavaScript) to provide an "application-like"
experience within a Web browser.
10

11. bit.ly/w3cmbp validator.w3.org/mobile/
)BP1( ‫הבדל מאתר רגיל‬
include locally executable elements of interactivity and
persistent state.
nextbus.com/webkit/
11

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

13. Best practices
13

14. ‫(3)‬ ‫נתוני האפליקציה‬ ‫1.‬
‫ביטחון מידע ופרטיות (1)‬ ‫2.‬
‫יידוע המשתמש ושליטתו באפליקציה (4)‬ ‫3.‬
‫שימוש מוגבל במשאבים (11)‬ ‫4.‬
‫חווית משתמש (01)‬ ‫5.‬
‫התאמה ל-‪)5( Delivery Context‬‬ ‫6.‬
‫שיקולים נוספים (1)‬ ‫7.‬
‫(סה"כ 53)‬
‫41‬

15. ‫(3)‬ ‫1. נתוני האפליקציה‬
‫(1)‬ ‫ביטחון מידע ופרטיות‬ ‫2.‬
‫יידוע המשתמש ושליטתו באפליקציה (4)‬ ‫3.‬
‫שימוש מוגבל במשאבים (11)‬ ‫4.‬
‫חווית משתמש (01)‬ ‫5.‬
‫התאמה ל-‪)5( Delivery Context‬‬ ‫6.‬
‫שיקולים נוספים (1)‬ ‫7.‬
‫51‬

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

17. ‫המעיטו את השימוש בעוגיות‬
‫מה?‬
‫נשלחות לשרת בכל בקשה‬
‫יתכן ולא יהיה פעילות במכשיר‬
‫איך?‬
‫בנו אפליקציה שיכולה להשאר פעילה גם ללא עוגיות‬
‫(למשל עם ‪)URI decoration‬‬
‫‪Image by: D Sharon Pruitt‬‬
‫71‬

18. ‫השתמשו בטכנולוגיות המתאימות לאחסון מידע בצד הלקוח‬
‫מה?‬
‫עדיף להשתמש במנגנונים בצד לקוח לאחסון‬
‫מידע, בעיקר בכמויות גדולות.‬
‫(מועיל ב ‪)Responsiveness , start-up time‬‬
‫איך?‬
‫• ‪BONDI‬‬
‫• 5‪- HTML‬‬
‫‪Offline - j.mp/w3coff‬‬
‫• ‪Opera Widgets‬‬
‫|/‪by Remy Sharp-remysharp.com/demo/rubiks‬‬
‫81‬

19. ‫שכפלו מידע לשרת במידת הצורך‬
‫מה?‬
‫•תצוגה אחידה במכשירים שונים‬
‫•מגבה למקרה של אובן המכשיר‬
‫(לא צריך לשכפל למשל העדפות תצוגה של מכשיר ספציפי)‬
‫‪j.mp/mozoff‬‬
‫איך?‬
‫טכנולוגיות לאחסון מידע צד לקוח מספקת גם‬
‫בדיקת קישוריות.‬
‫דוגמא‬
‫‪j.mp/mozoff‬‬
‫91‬

20. ‫1. נתוני האפליקציה (3)‬
‫(1)‬ ‫2. ביטחון מידע ופרטיות‬
‫(4)‬ ‫יידוע המשתמש ושליטתו באפליקציה‬ ‫3.‬
‫שימוש מוגבל במשאבים (11)‬ ‫4.‬
‫חווית משתמש (01)‬ ‫5.‬
‫התאמה ל-‪)5( Delivery Context‬‬ ‫6.‬
‫שיקולים נוספים (1)‬ ‫7.‬
‫02‬

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

22. Do not Execute Unescaped or Untrusted
JSON 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. ‫1. נתוני האפליקציה (3)‬
‫2. ביטחון מידע ופרטיות (1)‬
‫(4)‬ ‫3. יידוע המשתמש ושליטתו באפליקציה‬
‫(11)‬ ‫שימוש מוגבל במשאבים‬ ‫4.‬
‫חווית משתמש (01)‬ ‫5.‬
‫התאמה ל-‪)5( Delivery Context‬‬ ‫6.‬
‫שיקולים נוספים (1)‬ ‫7.‬
‫32‬

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

25. ‫הודיעו למשתמש על שימוש במידע על‬
‫המכשיר או פרטים אישיים‬
‫מה?‬
‫בעת כניסה ראשונה לשירות או בגישה ראשונה‬
‫למידע.‬
‫איך?‬
‫לרוב ל-‪ API‬יש בקשת רשות מובנת‬
‫(‪.)confirmation dialog ; recover gracefully‬‬
‫‪MapQuest.com‬‬
‫52‬

26. ‫אפשרו ‪ Sign-in‬אוטומטי‬
‫מה?‬
‫כי יותר קשה להזין תוכן....‬
‫איך?‬
‫בעוגיות, או ‪local storage‬‬
‫(לא לשכוח לשים לינק ל-‪)log out‬‬
‫62‬

27. ‫האפליקציה (3)‬
‫1. נתוני‬
‫2. ביטחון מידע ופרטיות (1)‬
‫3. יידוע המשתמש ושליטתו באפליקציה (4)‬
‫(11)‬ ‫4. שימוש מוגבל במשאבים‬
‫(01)‬ ‫5. חווית משתמש‬
‫6. התאמה ל-‪)5( Delivery Context‬‬
‫7. שיקולים נוספים (1)‬
‫72‬

28. ‫אל תכבידו על משאבי המכשיר‬
‫זיכרון‬
‫עיבוד‬
‫רוחב פס‬
‫מוגבלים יותר במכשירים ניידים‬
‫82‬

29. ‫מזערו את גודל האפליקציה והנתונים‬
?‫מה‬
‫תרד יותר מהר‬
‫תפעל יותר טוב‬
?‫איך‬
JavaScript-‫ ו‬HTML ,CSS ‫הקטינו‬
(removal of white space and comments; shorter tokens (variables, method names, selector names)
See http://compressorrater.thruhere.net
29

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

31. ‫‪Optimize Network Requests‬‬
‫מה?‬
‫עדיף לבצע בקשות גדולות לשרת אך מועטות‬
‫יותר (מאשר הרבה בקשות קטנות)‬
‫איך?‬
‫• קיבוץ בקשות‬
‫• תעדוף בקשות‬
‫• פעילות בהתאם לרמת הקישוריות‬
‫13‬

32. ‫צמצמו שימוש במקורות חיצוניים‬
‫מה?‬
‫‪style sheets, scripts, image - each of which‬‬
‫‪requires an HTTP request‬‬
‫איך?‬
‫‪ CSS‬ו-‪ JavaScript‬כל אחד בקובץ אחד בלבד‬
‫‪OR‬‬
‫או שהם ישולבו לפני שהעמוד מוגש ללקוח‬
‫23‬

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. Keep DOM Size Reasonable
?‫איך‬
pagination ‫למשל בעזרת‬
34

35. ‫נתוני האפליקציה‬
‫(3)‬ ‫1.‬
‫ביטחון מידע ופרטיות (1)‬ ‫2.‬
‫יידוע המשתמש ושליטתו באפליקציה (4)‬ ‫3.‬
‫שימוש מוגבל במשאבים (11)‬ ‫4.‬
‫(01)‬ ‫5. חווית משתמש‬
‫(5)‬ ‫6. התאמה ל-‪Delivery Context‬‬
‫7. שיקולים נוספים (1)‬
‫53‬

36. ‫בגלל מורכבות רבה יותר בשימוש במכשירים ניידים‬
‫– חשוב לשפר את חווית המשמש‬
‫‪• Latency‬‬
‫‪• interaction method‬‬
‫‪• data consistency‬‬
‫63‬

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 Queries
http://www.flickr.com/photos/66475767@N00/4333416050/ before the first view can be displayed.
37

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 Views
MapQuest.com
38

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 rollovers
Image 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. "Click-to-Call"-‫השתמש במספרי טלפון ב‬
‫איך‬
<a href="tel:[PHONE-NUMBER]">[PHONE-NUMBER]</a>
entered using the full international
prefix
my.springpadit.com
RFC3966
40

41. ‫‪Ensure Paragraph Text Flows‬‬
‫מה?‬
‫• מנע גלילה אנכית‬
‫• ואפשר קריאה בשינוי אוריאנטציה‬
‫איך?‬
‫‪Image by: curiouslee‬‬
‫לא להשתמש ביחידות מוחלטות / פיקסלים‬
‫כן להשתמש ביחידות יחסיות ל- ‪containers‬‬
‫14‬

42. Ensure Consistency Of State Between
Devices
?‫מה‬
‫הקפידו על עקיבות באפליקציה בין מכשירים‬
‫שונים‬
• Credentials
• preferences
• Data
?‫איך‬
‫שימורו על השרת מידע שאינו רלוונטי רק‬
‫למכשיר הספציפי‬
http://www.flickr.com/photos/osde-info/4336196538/sizes/o/
42

43. ‫האפליקציה (3)‬ ‫נתוני‬ ‫1.‬
‫ביטחון מידע ופרטיות (1)‬ ‫2.‬
‫יידוע המשתמש ושליטתו באפליקציה (4)‬ ‫3.‬
‫שימוש מוגבל במשאבים (11)‬ ‫4.‬
‫חווית משתמש (01)‬ ‫5.‬
‫(5)‬ ‫6. התאמה ל-‪Delivery Context‬‬
‫(1)‬ ‫7. שיקולים נוספים‬
‫34‬

44. ‫התאימו ל- ‪ Delivery Context‬שונים‬
‫צרו אפליקציה בעלת יכולת זיהוי ההקשר (כגון יכולות המכשיר) והסתגלות להן. (התאמת‬
‫תוכן, ניווט, מבנה עמוד...)‬
‫44‬

45. Prefer Server-Side Detection Where
Possible
HTTP request header: Accept; User-Agent; X-Wap-Profile
Use Client-Side Capability Detection
Where Necessary
JavaScript: (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. ‫אפשר למשתמש לבחור את התצוגה‬
‫מה?‬
‫אפשר למשתמש לשנות את‬
‫סוג התצוגה‬
‫כברירת מחדל ספק את ה-‪UI‬‬
‫המתאים ביותר‬
‫אבל זכור את העדפות‬
‫המשתמש!‬
‫64‬

47. ‫(3)‬ ‫נתוני האפליקציה‬ ‫1.‬
‫ביטחון מידע ופרטיות (1)‬ ‫2.‬
‫יידוע המשתמש ושליטתו באפליקציה (4)‬ ‫3.‬
‫שימוש מוגבל במשאבים (11)‬ ‫4.‬
‫חווית משתמש (01)‬ ‫5.‬
‫התאמה ל-‪)5( Delivery Context‬‬ ‫6.‬
‫(1)‬ ‫7. שיקולים נוספים‬
‫74‬

48. (published as advisory notes)
48

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. ‫הודיעו למשתמש על גישה אוטומטית לרשת‬
‫מה?‬
‫שימוש ברשת מרוקן את הסוללה‬
‫עולה כסף...‬
‫איך?‬
‫• אייקון המודיע על פעילות ברגע‬
‫• הודיעו על שימוש רב ברשת (בחיבור ראשון,‬
‫בהרשמה או בדפי העזרה)‬
‫(כמה זמן,‬ ‫• ספקו מידע על אופי החיבור‬
‫תדירות,סה"כ שימוש)‬
‫.‬
‫05‬

51. ‫ספק אמצעים לשליטה בחיבור אוטומטי לרשת‬
‫מה?‬
‫אפשר למשתמש למנוע חיבור אוטומטי‬
‫לרשת‬
‫(כאשר זה מבוטל – הציגו הודעת חיבור מעת לעת.)‬
‫אפשרי –‬
‫אפשר למשמש לשלוט במועדי החיבור או בפעילויות אשר יכולות‬
‫להתחבר.‬
‫‪Image by: Jeff Sonstein‬‬
‫15‬

52. ‫כלים נוספים‬
‫25‬

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. ‫תודה ‪‬‬
‫• הירשמו לידיעון‬
‫• צרו קשר‬
‫‪@isociltech @eyalsela‬‬
‫45‬