Embed Size (px)
Citation preview
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
דיווח יישום...מי יכול להגיש?
כל מי שפיתח אפליקציה-מהשיטות במסמך )גם בדיעבד( חלקוישים -
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.
