mobile web application best practices

www.w3.org/TR/mwabp

1

Mobile Web Application Best Practices

אייל סלע

מנהל פרויקטים, איגוד האינטרנט הישראלי הישראליW3Cומשרד ה-

www.w3.org/TR/mwabpj.mp/w3cdoc

2

www.w3.org/TR/mwabp

תוכנית...

W3C - איגוד האינטרנט הישראלי ומבוא

mobile web applications best practices ה-אודותThe Best practices

3

www.w3c.org.ilwww.w3.org/TR/mwabp/

4

איגוד האינטרנט הישראלישלוחת האיגוד הבינלאומי: •

עמותה ללא מטרת רווח •

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

חברתית ועסקית.

www.w3.org/TR/mwabp

5

W3C

ארגון בינלאומי •

ארגונים350כ-•

פורום ניטראלי ליצירת תקני רשת באינטרנט. •

משימה:•להוביל את הרשת למיצוי הפוטנציאל על ידי

פיתוח פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח ארוך.

www.w3.org/TR/mwabp

W3Cהשנה

סידרת מפגשים למפתחים

קבוצות עניין

פיתוח אפליקציה

סדנאות תגובה למומחים

הרצאות אורח )שלנו, שלכם(

תמיכה בפעילות קבוצות/קהילות

שילוב מומחים בקבוצות עבודה

עוד...

6

()

www.w3.org/TR/mwabp

Mobile Web אודות ה-Application Best

Practices

7

www.w3.org/TR/mwabp

.W3Cמסמך קווים מנחים של ה-

שיטות לשיפור חווית המשתמש 35מגדיר באפליקציות ווב למכשירים ניידים

8

www.w3.org/TR/mwabp

Candidateהמסמך נמצא בשלב recomendation

9

You are here

j.mp/w3crec

www.w3.org/TR/mwabp

הגישו דיווח יישום...למה לכם?

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

. / 3j mp w cmo1 10

www.w3.org/TR/mwabp

. / 3j mp w cmobp

11

public-bpwg-comments@w3.org

www.w3.org/TR/mwabp

דיווח יישום...מי יכול להגיש?

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

12

www.w3.org/TR/mwabp

מה מיישמים?

13

www.w3.org/TR/mwabp

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

14

www.w3.org/TR/mwabp

15

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

www.w3.org/TR/mwabp

16

(BP1) הבדל מאתר רגיל

include locally executable elements of interactivity and persistent state.

למשל:

bit.ly/w3cmbpvalidator.w3.org/mobile/

nextbus.com/webkit/ app.clichespotting.com m.jobscentral.com.sgapp.clichespotting.com

www.w3.org/TR/mwabp. / 3 1j mp w cmo

17

nextbus.com/webkit/

+ User Agent Switcher

www.w3.org/TR/mwabp

touchsolitaire.mobi/app

j.mp/w3cmo15

www.w3.org/TR/mwabpapp.clichespotting.com

19

app.clichespotting.com

www.w3.org/TR/mwabp. . .m jobscentral com sg

20

m.jobscentral.com.sg

www.w3.org/TR/mwabp

Sencha touch)!!(

j.mp/w3cmo6

http://www.sencha.com/

www.w3c.org.ilwww.w3.org/TR/mwabp/

22

תצוגה•הזנת תוכן • רוחב פס ועלות•מטרות המשתמש •מגבלות המכשיר •

מגבלות והבדלים – מכשירים ניידים לעומת שולחניים

bit.ly/w3cmbp

www.w3c.org.ilwww.w3.org/TR/mwabp/

23

Best practices

www.w3.org/TR/mwabp

24

(3)נתוני האפליקציה 1.

( 1)ביטחון מידע ופרטיות 2.

(4)יידוע המשתמש ושליטתו באפליקציה 3.

(11)שימוש מוגבל במשאבים 4.

(10)חווית משתמש 5.

Delivery Context (5)התאמה ל-6.

(1)שיקולים נוספים 7.

(35)סה"כ

www.w3.org/TR/mwabp

25

(3)נתוני האפליקציה 1.

( 1)ביטחון מידע ופרטיות 2.

(4)יידוע המשתמש ושליטתו באפליקציה 3.

(11)שימוש מוגבל במשאבים 4.

(10)חווית משתמש 5.

Delivery Context (5)התאמה ל-6.

(1)שיקולים נוספים 7.

www.w3.org/TR/mwabp

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

26

www.w3.org/TR/mwabp

27

1 . Use Cookies Sparingly

. המעיטו את השימוש בעוגיות1

מה?

נשלחות לשרת בכל בקשה

יתכן ולא יהיה פעילות במכשיר

איך?

בנו אפליקציה פעילה גם ללא עוגיות

(URI decoration)למשל עם Image by :D Sharon Pruitt

www.w3.org/TR/mwabp

. השתמשו בטכנולוגיות המתאימות לאחסון מידע בצד 2הלקוח

מה?עדיף להשתמש במנגנונים בצד לקוח

לאחסון מידע, בעיקר בכמויות גדולות.(start-up time , Responsiveness)מועיל ב

איך?•BONDI

•HTML5 - Offline - . / 3j mp w coff

•Opera Widgets

28

by Remy Sharp - remysharp.com/demo/rubiks/

2. Use Appropriate Client-Side Storage Technologies for Local Data

j.mp/w3cmo7

www.w3.org/TR/mwabp

. שכפלו מידע לשרת במידת הצורך3מה?

תצוגה אחידה במכשירים שונים

מגבה למקרה של אובן המכשיר)לא צריך לשכפל למשל העדפות תצוגה של מכשיר ספציפי(

איך?

טכנולוגיות לאחסון מידע צד לקוח מספקת גם בדיקת קישוריות.

דוגמא...

29

3 .Replicate Local Data

www.w3.org/TR/mwabp

Local storage + offline - demo

. /j mp mozoff

30

www.html5rocks.com/tutorials/offline/todo/

www.w3c.org.ilwww.w3.org/TR/mwabp/

31

(3נתוני האפליקציה )1.

( 1)ביטחון מידע ופרטיות 2.

(4)יידוע המשתמש ושליטתו באפליקציה 3.

(11)שימוש מוגבל במשאבים 4.

(10)חווית משתמש 5.

Delivery Context (5)התאמה ל-6.

(1)שיקולים נוספים 7.

www.w3.org/TR/mwabp

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

32

www.w3.org/TR/mwabp

4. Do not Execute Unescaped or Untrusted JSON data

33

Image by :D Sharon Pruitt

direct execution of a datafeed that contains unescaped user-generated data = security risk

Use JSON parser

4. Do not Execute Unescaped or Untrusted JSON data

www.w3c.org.ilwww.w3.org/TR/mwabp/

34

(3נתוני האפליקציה )1.

( 1)ביטחון מידע ופרטיות 2.

יידוע המשתמש ושליטתו באפליקציה 3.(4)

(11)שימוש מוגבל במשאבים 4.

(10)חווית משתמש 5.

Delivery Context (5)התאמה ל-6.

(1)שיקולים נוספים 7.

www.w3.org/TR/mwabp

, פירוט שיחות, מידע calendarמדיה, פרטי קשר ו-על המכשיר, מיקום )!(, חיבור לרשת

מספק אותן(אינו )הקפידו על ההמלצות הבאות אם הדפדפן

35

התייחסו יפה למידע רגיש...

www.w3.org/TR/mwabp

. הודיעו למשתמש על גישה אוטומטית 5*לרשת

מה?שימוש ברשת מרוקן את הסוללה

עולה כסף...

איך?המודיע על פעילות ברקעאייקון )בחיבור ראשון, על שימוש רב ברשת הודיעו

בהרשמה או בדפי העזרה(

)כמה זמן, תדירות,אופי החיבור ספקו מידע על סה"כ שימוש(

.

36

5. Inform the User About Automatic Network Access

www.w3.org/TR/mwabp

*. ספק אמצעים לשליטה בחיבור אוטומטי לרשת6

מה?אפשר למשתמש למנוע חיבור אוטומטי

לרשת)כאשר זה מבוטל – הציגו הודעת חיבור מעת לעת.(

אפשרי –

אפשר למשתמש לשלוט במועדי החיבור או בפעילויות אשר יכולות להתחבר.

37

Image by :Jeff Sonstein

6. Provide Sufficient Means to Control Automatic Network Access

www.w3.org/TR/mwabp

. הודיעו למשתמש על שימוש במידע על 7המכשיר או פרטים אישיים

מה?בעת כניסה ראשונה לשירות או בגישה

ראשונה למידע.

איך?

יש בקשת רשות מובנתAPIלרוב ל-(recover gracefully ;confirmation dialog .)

38

MapQuest.com

7. Ensure the User is Informed About Use of Personal and Device Information

www.w3.org/TR/mwabp

אוטומטיSign-in. אפשרו 8

מה?כי יותר קשה להזין תוכן....

איך? local storageבעוגיות, או

(log out)לא לשכוח לשים לינק ל-

40

8. Enable Automatic Sign-in

www.w3c.org.ilwww.w3.org/TR/mwabp/

41

(3 )נתוני האפליקציה1.

( 1)ביטחון מידע ופרטיות 2.

(4)יידוע המשתמש ושליטתו באפליקציה 3.

(11)שימוש מוגבל במשאבים 4.

(10)חווית משתמש 5.

Delivery Context (5)התאמה ל-6.

(1)שיקולים נוספים 7.

www.w3.org/TR/mwabp

מוגבלים בניידים -

זיכרון

עיבוד

רוחב פס

42

אל תכבידו על משאבי המכשיר

www.w3.org/TR/mwabp

9. Use Transfer Compression

מה?השתמשו בדחיסה של התוכן.

אבל זכרו שיש עלות של זמן וחיי סוללה.

איך?

Gzip... 1kתמונות, אדיו, וידאו, קבצים קנטים מ-לרוב לא צריך לדוחס:

43

9. Use Transfer Compression

www.w3.org/TR/mwabp

. מזערו את גודל האפליקציה 10והנתונים

למה?תרד יותר מהר

תפעל יותר טוב

איך?JavaScript ו-CSS, HTMLהקטינו

(removal of white space and comments; shorter tokens (variables, method names, selector names)

44

10. Minimize Application and Data Size

compressorrater.thruhere.net

www.w3.org/TR/mwabp

Redirects. המנעו מ-11

מה? להעברת HTML meta refresh או HTTP 3xxלרוב נעשה שימוש ב

מידע(e.g. account authentication)

איך?פשוט נסו להמנע מהן.

בכדי שהמשתמש ידע ש'זה (אם צריך יותר משתיים, אפשר להציג דף מעבר )טעון'

45

11. Avoid Redirects

www.w3.org/TR/mwabp

12. Optimize Network Requests

מה? יותר מועטות לשרת אך גדולותעדיף לבצע בקשות

)מאשר הרבה בקשות קטנות(

איך? בקשותקיבוץ

בקשותתעדוף

רמת הקישוריותפעילות בהתאם ל

46

12. Optimize Network Requests

www.w3.org/TR/mwabp

. צמצמו שימוש במקורות חיצוניים13

למה? = טיול לשרתHTTP request, תמונה = CSSכל קובץ סקריפט,

איך?CSS-ו JavaScript בלבדאחד כל אחד בקובץ

ORאו שהם ישולבו לפני שהעמוד מוגש ללקוח

47

13. Minimize External Resources

www.w3.org/TR/mwabp

(Sprites). אחדו תמונות 14

איך?similar sizes and color palettes. That do not change often. use CSS positioning and clipping.

דוגמאwww.yahoo.com

48

Image by: Kriplozoik

14. Aggregate Static Images into a Single Composite Resource )Sprites(

www.w3.org/TR/mwabp

CSS. שלבו תמונות רקע ב-15

מה?CSSבמקום להוריד תמונות, אפשר לכלול אותן ב-

איך?data URIדוגמא:

49

15. Include Background Images Inline in CSS Style Sheet

data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/ //+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAhCAYAAADkrOp1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYFJREFUeNqEU7FOwzAQvXMuJSC1oqlKuoaZkakrGyti5i+Q+AZ+goERiR9hYEJiZKVIFaqgtJV9nO04SdO0TfQk5+75vedLgswM45vnDADuBOcCuy4vkmaOCE/ZqJ+nabcbxzFh0Zx8fQPFpG6z0eD0JEuPVUSglAJATyGaAxnm8WDY70WdBKIawd4RxUBa81EnSRTFHUdAu7tQQBUB+QW5B7BwvSKFEB2BpSCHAXsiZnQVV5dnKlauxAxlsyh7ggQFNKaSLgmmRvAeDUJQMAxKBAw0CRwIxmHdwCv7U4iCVUHYamFcyKZCGVLLbmhRMEHBD2jzFFCGlDruzYBtGbiaA2JbhkDQvonNSZraoGCnhbYpNxXsvkrBBd2mwMWgkHdYQAshhNQiz7hpYfYrQO1145YM8mf9afGIkBVg82XJnzDsH76vFr+z8FWtQTzU1UX+yKufj+V8NtVGh0/Dgd38mLsvb5PL

buzz

www.w3.org/TR/mwabp

16. Fingerprinting Resource for chach

50

16. Cache Resources By Fingerprinting Resource References

מה?

לקבצים שמשתנים מדי פעםcacheאפשר לעשות

איך? לתאריך רחוק מאוד בעתידchaseהגדירו את ה-- שישתנה כשצריך hash של הקובץ URLהוסיפו בסיומת ה--

לעדכן אותו.

<img src="http://www.example.com/userimages/joeblogs-67f90da089da>"

www.w3c.org.ilwww.w3.org/TR/mwabp/

17. Cache AJAX Data

מה? cacheכפי שעושים עם תוכן רגיל, אפשר לעשות

.AJAXלמידע שמגיע ב-

איך?כרגיל

Expires \ Cache-Control header ו-fingerprinting

51

17. Cache AJAX Data

www.w3.org/TR/mwabp

. שלחו עוגיות רק כשצריך18

מה?תוכן סטטי אינו צריך עוגיות – אז עדיף להימנע

איך? נפרד לתוכן סטטיpathדומיין, תת דומיין או 1.

לעוגיותpathהגדירו 2.

52

18. Do not Send Cookie Information Unnecessarily

www.w3.org/TR/mwabp

19 .Keep DOM Size Reasonable

איך? paginationלמשל בעזרת

53

19. Keep DOM Size Reasonable

X Fail V win

www.w3c.org.ilwww.w3.org/TR/mwabp/

54

(3)נתוני האפליקציה 1.

( 1)ביטחון מידע ופרטיות 2.

(4)יידוע המשתמש ושליטתו באפליקציה 3.

(11)שימוש מוגבל במשאבים 4.

(10)חווית משתמש 5.

Delivery Context (5)התאמה ל-6.

(1)שיקולים נוספים 7.

www.w3.org/TR/mwabp

בגלל מורכבות רבה יותר בשימוש במכשירים ניידים – חשוב לשפר את חווית המשמש

Latencyinteraction methoddata consistency

55

www.w3.org/TR/mwabp

. להתחיל צ'יק צ'ק20

איך?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 before the first view can be displayed.

דוגמא...

56

http://www.flickr.com/photos/66475767@N00/4333416050/

20. Optimize For Application Start-up Time

www.w3.org/TR/mwabp

High responsiveness with Local storage - example

מבוסס עלIBM:Unlock local storage for

mobile Web applications with HTML 5: j.mp/w3cmo3

j.mp/w3cmo2

www.w3.org/TR/mwabp

21. Minimize Perceived Latencyאיך?

Incremental Rendering JavaScript at the bottom + useful information that might be available is viewable while loading.

Keep the User Informed of Activity (progress bars)

Avoid Page ReloadsTo reflect changes in state or show different views

Preload Probable Next Viewsדוגמא...

58

21. Minimize Perceived Latency

www.w3.org/TR/mwabp

kivaדוגמא -

. / 3 10j mp w cmo

59

www.w3.org/TR/mwabp

22. 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 closeSelectable elements need to be large enough (pointer often moves in steps)Selectable elements should have rollovers

Touch Based: (finger )Selectable elements may be widely spaced since the user can select them directlySelectable elements must be large enough to be easily selected (list items - at

least 30px)

60

Image by: Dennis Bournique

22. Design for Multiple Interaction Methods

www.w3.org/TR/mwabp

. הימנעו משינוי הפוקוס בדפים 23דינמיים

איך?

.focus)( רק כשחייבים וכזה לא פוגע – בשליטה

61

23 . Preserve Focus on Dynamic Page Updates

www.w3.org/TR/mwabp

fragment. השתמשו ב-24identifiers לתצוגה

מה? בכדי לאפשר שמירת fragment identifiersהשתמשו ב-

backהקישור לתצוגה, ולא לפגוע ב-

דוגמא...

http://myapp.example.org/myapp#view

62

24 . Use Fragment IDs to Drive Application View

www.w3.org/TR/mwabp

W3C Cheat Sheet

. / 3 8 j mp w cmo

63

www.w3.org/TR/mwabp

-Click-to". השתמש במספרי טלפון ב-25Call"

איך

<a href="tel:[PHONE-NUMBER]">[PHONE-NUMBER]</a>

entered using the full international prefix

64

 my.springpadit.com

25. Make Telephone Numbers "Click-to-Call"

www.w3.org/TR/mwabp

26. Ensure Paragraph Text Flowsמה?

מנע גלילה אנכית•ואפשר קריאה בשינוי אוריאנטציה•

איך?בקונטיינרים:

באחוזים / יחידות מידה יחסיותכן:

יחידות מוחלטות או פיקסליםלא

דוגמא...

65

Image by :curiouslee

26. Ensure Paragraph Text Flows

www.w3.org/TR/mwabp

דוגמא – טקסט צף ומתאים לגודל המסמך

W3c.org

www.w3.org/TR/mwabp

27. Ensure Consistency Of State Between Devices

מה?הקפידו על עקיבות באפליקציה בין

מכשירים שונים • Credentials• preferences • Data

איך?שימורו על השרת מידע שאינו רלוונטי רק

למכשיר הספציפי

67

http://www.flickr.com/photos/osde-info/4336196538/sizes/o/

27. Ensure Consistency Of State Between Devices

www.w3c.org.ilwww.w3.org/TR/mwabp/

68

(3 )נתוני האפליקציה1.

( 1)ביטחון מידע ופרטיות 2.

(4)יידוע המשתמש ושליטתו באפליקציה 3.

(11)שימוש מוגבל במשאבים 4.

(10)חווית משתמש 5.

Delivery Context (5)התאמה ל-6.

(1)שיקולים נוספים 7.

www.w3.org/TR/mwabp

69

שונים Delivery Contextהתאימו ל-צרו אפליקציה בעלת יכולת זיהוי ההקשר )כגון יכולות המכשיר( והסתגלות להן.

)התאמת תוכן, ניווט, מבנה עמוד...(

www.w3.org/TR/mwabp

push. מומלץ – שימוש ב-28

מה?אם מכשיר היעד תומך...

איך?OMA PushQR CodesSMS…

70

28 . Consider Mobile Specific Technologies for Initiating Web Applications

www.w3.org/TR/mwabp

.הגדירו את גודל התצוגה הרצוי29

מה?צריך למנוע ממכשירים לעשות זום אוטומטי באפליקציה שהותאמה

לניידים....

איך?<meta name="viewport" content="width=device-width,

initial-scale=1.0"/> דוגמא...

71

29 .Use Meta Viewport Element To Identify Desired Screen Sizes

www.w3.org/TR/mwabp

דוגמא - הגדרת גודל תצוגה

ViewportOfflinesData URI

j.mp/w3cmo972

http://nils-dehl.de/m/

www.w3.org/TR/mwabp

30. Prefer Server-Side Detection Where Possible

איך?HTTP request header: AcceptUser-AgentX-Wap-Profile

דוגמא:

73

30. Prefer Server-side Detection Where Possible

j.mp/w3cmo11

www.w3.org/TR/mwabp

. כשצריך – זיהוי יכולות 'צד 31לקוח'איך?

JavaScript: if (some_api_exists) { ...

CSS Media Types

CSS Media Queriesדוגמא...

74

31 .Use Client-side Detection When Necessary

www.w3.org/TR/mwabp

CSS3 Media query layout example

j.mp/w3cmo18

www.w3.org/TR/mwabp

32. 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.

76

32 .Use Device Classification to Simplify Content Adaptation

www.w3.org/TR/mwabp

JavaScript. לתפוצה מרבית – צרו גרסה ללא 33

איך?synchronous FORM posts 

<<noscriptאו לפחות – הודעה מתאימה או

77

33 .Support a non-JavaScript Variant if Appropriate

www.w3.org/TR/mwabp

. אפשר למשתמש לבחור את התצוגה34

מה?אפשר למשתמש לשנות

את סוג התצוגה

כברירת מחדל ספק את המתאים ביותרUIה-

אבל זכור את העדפות המשתמש!

78

34. Offer Users a Choice of Interfaces

www.w3c.org.ilwww.w3.org/TR/mwabp/

79

(3)נתוני האפליקציה 1.

( 1)ביטחון מידע ופרטיות 2.

(4)יידוע המשתמש ושליטתו באפליקציה 3.

(11)שימוש מוגבל במשאבים 4.

(10)חווית משתמש 5.

Delivery Context (5)התאמה ל-6.

(1)שיקולים נוספים 7.

www.w3.org/TR/mwabp

35. Consider Canvas or SVG For Dynamic Graphics

מה?canvas

מאפשר לצייר גרפיקה פשוטה באמצעות

JavaScript

80

http://www.mozilla.com/en-US/firefox/stats/

SVG להגדרת אלמנטים XMLשפת

של גרפיקה וקטורית המתווספים , וניתנים לשינוי בעזרת DOMל-

JavaScript

דוגמא...

35. Consider Use Of Canvas Element or SVG For Dynamic Graphics

www.w3.org/TR/mwabp

SVG and canvas demos

Video - Cool mobile apps with SVG and other Web technologies - j.mp/w3cmo13

• Bomomo.com • zwibbler.com• www.iconza.com

j.mp/w3cmo14j.mp/w3cmo16

www.w3.org/TR/mwabp

כלים נוספים

82

www.w3.org/TR/mwabp

Mobile Web Best Practices (MWBP) Flipcards j.mp/w3cfcc

83

www.w3c.org.ilwww.w3.org/TR/mwabp/

84

The world is getting more platform-fragmented, not less.

Source: j.mp/w3cmo5

Do yourself a favor and write your next app in HTML5.

www.w3.org/TR/mwabp

www.w3c.org.il@isociltech @eyalsela

eyal@isoc.org. il

85

תודה

j.mp/w3cmobp