‫‪Mobile Web Application Best‬‬
‫‪Practices‬‬
‫אייל סלע‬
‫מנהל פרויקטים‪ ,‬איגוד האינטרנט הישראלי‬
‫ומשרד ה‪ W3C-‬הישראלי‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪1‬‬
j.mp/w3cdoc
www.w3.org/TR/mwabp
2
...‫תוכנית‬
W3C‫ איגוד האינטרנט הישראלי ו‬- ‫מבוא‬
mobile web applications best practices-‫אודות ה‬
The Best practices
www.w3.org/TR/mwabp
3
‫איגוד האינטרנט הישראלי‬
‫• שלוחת האיגוד הבינלאומי‪:‬‬
‫• עמותה ללא מטרת רווח‬
‫פועל לקידום האינטרנט והטמעתו בישראל‬
‫כתשתית טכנולוגית‪ ,‬מחקרית‪ ,‬חינוכית‪ ,‬חברתית‬
‫ועסקית‪.‬‬
‫‪www.w3.org/TR/mwabp/‬‬
‫‪www.w3c.org.il‬‬
‫‪4‬‬
‫‪W3C‬‬
‫•‬
‫•‬
‫•‬
‫•‬
‫ארגון בינלאומי‬
‫כ‪ 350-‬ארגונים‬
‫פורום ניטראלי ליצירת תקני רשת באינטרנט‪.‬‬
‫משימה‪:‬‬
‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬
‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה‬
‫לטווח ארוך‪.‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪5‬‬
‫‪ W3C‬השנה‬
‫סידרת מפגשים למפתחים‬
‫קבוצות עניין‬
‫פיתוח אפליקציה‬
‫סדנאות תגובה למומחים‬
‫הרצאות אורח (שלנו‪ ,‬שלכם)‬
‫תמיכה בפעילות קבוצות‪/‬קהילות‬
‫שילוב מומחים בקבוצות עבודה‬
‫עוד‪...‬‬
‫(‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪6‬‬
‫)‬
Mobile Web -‫אודות ה‬
Application Best
Practices
www.w3.org/TR/mwabp
7
‫מסמך קווים מנחים של ה‪.W3C-‬‬
‫מגדיר ‪ 35‬שיטות לשיפור חווית המשתמש‬
‫באפליקציות ווב למכשירים ניידים‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪8‬‬
Candidate recomendation ‫המסמך נמצא בשלב‬
You are
here
j.mp/w3crec
www.w3.org/TR/mwabp
9
‫הגישו דיווח יישום‪...‬‬
‫למה לכם?‬
‫ כי חייבים להציג יישום בכדי שזה יהפוך לתקן‬‫ כי האפליקציה שלכם תופיע בדוח היישומים‬‫‪ -‬כי אני אכתוב על זה באתר ‪W3C‬הישראלי‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪10‬‬
‫‪j.mp/w3cmo1‬‬
public-bpwg-comments@w3.org
j.mp/w3cmobp
www.w3.org/TR/mwabp
11
‫דיווח יישום‪...‬‬
‫מי יכול להגיש?‬
‫ כל מי שפיתח אפליקציה‬‫‪ -‬וישים חלק מהשיטות במסמך (גם בדיעבד)‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪12‬‬
?‫מה מיישמים‬
www.w3.org/TR/mwabp
13
‫על מה אנחנו‬
‫מדברים?‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪14‬‬
Web Application
Web page(s) that provide an "application-like" experience
within a Web browser.
www.w3.org/TR/mwabp
15
validator.w3.org/mobile/
bit.ly/w3cmbp
)BP1(
‫הבדל מאתר רגיל‬
include locally executable elements of interactivity and
persistent state.
:‫למשל‬
nextbus.com/webkit/
app.clichespotting.com
m.jobscentral.com.sg
www.w3.org/TR/mwabp
16
nextbus.com/webkit/
+ User Agent Switcher
j.mp/w3cmo1
www.w3.org/TR/mwabp
17
touchsolitaire.mobi/app
j.mp/w3cmo15
www.w3.org/TR/mwabp
app.clichespotting.com
app.clichespotting.com
www.w3.org/TR/mwabp
19
m.jobscentral.com.sg
m.jobscentral.com.sg
www.w3.org/TR/mwabp
20
Sencha touch (!!)
http://www.sencha.com/
j.mp/w3cmo6
www.w3.org/TR/mwabp
‫מגבלות והבדלים – מכשירים ניידים לעומת שולחניים‬
‫• תצוגה‬
‫• הזנת תוכן‬
‫• רוחב פס ועלות‬
‫• מטרות המשתמש‬
‫• מגבלות המכשיר‬
‫‪bit.ly/w3cmbp‬‬
‫‪www.w3.org/TR/mwabp/‬‬
‫‪www.w3c.org.il‬‬
‫‪22‬‬
Best practices
www.w3.org/TR/mwabp/
23
www.w3c.org.il
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫‪.7‬‬
‫נתוני האפליקציה‬
‫ביטחון מידע ופרטיות (‪)1‬‬
‫יידוע המשתמש ושליטתו באפליקציה (‪)4‬‬
‫שימוש מוגבל במשאבים (‪)11‬‬
‫חווית משתמש (‪)10‬‬
‫התאמה ל‪)5( Delivery Context-‬‬
‫שיקולים נוספים (‪)1‬‬
‫(‪)3‬‬
‫(סה"כ ‪)35‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪24‬‬
‫‪ .1‬נתוני האפליקציה‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫‪.7‬‬
‫(‪)3‬‬
‫ביטחון מידע ופרטיות‬
‫יידוע המשתמש ושליטתו באפליקציה (‪)4‬‬
‫שימוש מוגבל במשאבים (‪)11‬‬
‫חווית משתמש (‪)10‬‬
‫התאמה ל‪)5( Delivery Context-‬‬
‫שיקולים נוספים (‪)1‬‬
‫(‪)1‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪25‬‬
‫השתמשו בטכנולוגיות ושיטות מתאימות לאחסון‬
‫נתוני האפליקציה‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪26‬‬
‫‪ .1‬המעיטו את השימוש בעוגיות‬
‫מה?‬
‫נשלחות לשרת בכל בקשה‬
‫יתכן ולא יהיה פעילות במכשיר‬
‫איך?‬
‫בנו אפליקציה פעילה גם ללא עוגיות‬
‫(למשל עם ‪)URI decoration‬‬
‫‪Image by: D Sharon Pruitt‬‬
‫‪1. Use Cookies Sparingly‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪27‬‬
‫ השתמשו בטכנולוגיות המתאימות לאחסון מידע בצד הלקוח‬.2
?‫מה‬
‫עדיף להשתמש במנגנונים בצד לקוח לאחסון‬
.‫ בעיקר בכמויות גדולות‬,‫מידע‬
)Responsiveness , start-up time ‫(מועיל ב‬
?‫איך‬
BONDI •
- HTML5 •
Opera Widgets •
Offline - j.mp/w3coff
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
28
‫‪ .3‬שכפלו מידע לשרת במידת הצורך‬
‫מה?‬
‫תצוגה אחידה במכשירים שונים‬
‫מגבה למקרה של אובן המכשיר‬
‫(לא צריך לשכפל למשל העדפות תצוגה של מכשיר ספציפי)‬
‫איך?‬
‫טכנולוגיות לאחסון מידע צד לקוח מספקת גם‬
‫בדיקת קישוריות‪.‬‬
‫דוגמא‪...‬‬
‫‪3. Replicate Local Data‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪29‬‬
Local storage + offline - demo
www.html5rocks.com/tutorials/offline/todo/
www.w3.org/TR/mwabp
j.mp/mozoff
30
‫‪ .1‬נתוני האפליקציה (‪)3‬‬
‫‪ .2‬ביטחון מידע ופרטיות‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫‪.7‬‬
‫(‪)1‬‬
‫יידוע המשתמש ושליטתו באפליקציה‬
‫שימוש מוגבל במשאבים (‪)11‬‬
‫חווית משתמש (‪)10‬‬
‫התאמה ל‪)5( Delivery Context-‬‬
‫שיקולים נוספים (‪)1‬‬
‫(‪)4‬‬
‫‪www.w3.org/TR/mwabp/‬‬
‫‪www.w3c.org.il‬‬
‫‪31‬‬
‫ביטחון מידע ופרטיות – השתמשו במידע אמין והגנו‬
‫על פרטיות המשתמש‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪32‬‬
4. Do not Execute Unescaped or Untrusted
JSON data
direct execution of a
datafeed that contains
unescaped usergenerated data =
security risk
Use JSON parser
Image by: D Sharon Pruitt
4. Do not Execute Unescaped or Untrusted JSON data
www.w3.org/TR/mwabp
33
‫‪ .1‬נתוני האפליקציה (‪)3‬‬
‫‪ .2‬ביטחון מידע ופרטיות (‪)1‬‬
‫‪ .3‬יידוע המשתמש ושליטתו באפליקציה‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫‪.7‬‬
‫(‪)4‬‬
‫שימוש מוגבל במשאבים‬
‫חווית משתמש (‪)10‬‬
‫התאמה ל‪)5( Delivery Context-‬‬
‫שיקולים נוספים (‪)1‬‬
‫(‪)11‬‬
‫‪www.w3.org/TR/mwabp/‬‬
‫‪www.w3c.org.il‬‬
‫‪34‬‬
‫התייחסו יפה למידע רגיש‪...‬‬
‫מדיה‪ ,‬פרטי קשר ו‪ ,calendar-‬פירוט שיחות‪ ,‬מידע‬
‫על המכשיר‪ ,‬מיקום (!)‪ ,‬חיבור לרשת‬
‫(הקפידו על ההמלצות הבאות אם הדפדפן אינו מספק אותן)‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪35‬‬
‫‪ .5‬הודיעו למשתמש על גישה אוטומטית לרשת*‬
‫מה?‬
‫שימוש ברשת מרוקן את הסוללה‬
‫עולה כסף‪...‬‬
‫איך?‬
‫אייקון המודיע על פעילות ברקע‬
‫הודיעו על שימוש רב ברשת (בחיבור ראשון‪ ,‬בהרשמה‬
‫או בדפי העזרה)‬
‫ספקו מידע על אופי החיבור‬
‫(כמה זמן‪ ,‬תדירות‪,‬סה"כ‬
‫שימוש)‬
‫‪.‬‬
‫‪5. Inform the User About Automatic Network Access‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪36‬‬
‫‪ .6‬ספק אמצעים לשליטה בחיבור אוטומטי לרשת *‬
‫מה?‬
‫אפשר למשתמש למנוע חיבור אוטומטי לרשת‬
‫(כאשר זה מבוטל – הציגו הודעת חיבור מעת לעת‪).‬‬
‫אפשרי –‬
‫אפשר למשתמש לשלוט במועדי החיבור או בפעילויות אשר יכולות‬
‫להתחבר‪.‬‬
‫‪Image by: Jeff Sonstein‬‬
‫‪6. Provide Sufficient Means to Control Automatic Network Access‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪37‬‬
‫ הודיעו למשתמש על שימוש במידע על‬.7
‫המכשיר או פרטים אישיים‬
?‫מה‬
‫בעת כניסה ראשונה לשירות או בגישה ראשונה‬
.‫למידע‬
?‫איך‬
‫ יש בקשת רשות מובנת‬API-‫לרוב ל‬
.)confirmation dialog ; recover gracefully(
7. Ensure the User is Informed About Use of Personal and Device Information
MapQuest.com
www.w3.org/TR/mwabp
38
‫‪ .8‬אפשרו ‪ Sign-in‬אוטומטי‬
‫מה?‬
‫כי יותר קשה להזין תוכן‪....‬‬
‫איך?‬
‫בעוגיות‪ ,‬או ‪local storage‬‬
‫(לא לשכוח לשים לינק ל‪)log out-‬‬
‫‪8. Enable Automatic Sign-in‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪40‬‬
‫האפליקציה (‪)3‬‬
‫‪ .1‬נתוני‬
‫‪ .2‬ביטחון מידע ופרטיות (‪)1‬‬
‫‪ .3‬יידוע המשתמש ושליטתו באפליקציה (‪)4‬‬
‫‪ .4‬שימוש מוגבל במשאבים‬
‫(‪)11‬‬
‫‪ .5‬חווית משתמש‬
‫‪ .6‬התאמה ל‪)5( Delivery Context-‬‬
‫‪ .7‬שיקולים נוספים (‪)1‬‬
‫(‪)10‬‬
‫‪www.w3.org/TR/mwabp/‬‬
‫‪www.w3c.org.il‬‬
‫‪41‬‬
‫אל תכבידו על משאבי המכשיר‬
‫מוגבלים בניידים ‪-‬‬
‫זיכרון‬
‫עיבוד‬
‫רוחב פס‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪42‬‬
‫‪9. Use Transfer Compression‬‬
‫מה?‬
‫השתמשו בדחיסה של התוכן‪.‬‬
‫אבל זכרו שיש עלות של זמן וחיי סוללה‪.‬‬
‫איך?‬
‫‪... Gzip‬‬
‫לרוב לא צריך לדוחס‪ :‬תמונות‪ ,‬אדיו‪ ,‬וידאו‪ ,‬קבצים קנטים מ‪1k-‬‬
‫‪9. Use Transfer Compression‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪43‬‬
‫ מזערו את גודל האפליקציה והנתונים‬.10
?‫למה‬
‫תרד יותר מהר‬
‫תפעל יותר טוב‬
?‫איך‬
JavaScript-‫ ו‬HTML ,CSS ‫הקטינו‬
(removal of white space and comments; shorter tokens (variables, method names, selector names)
10. Minimize Application and Data Size
compressorrater.thruhere.net www.w3.org/TR/mwabp
44
‫‪ .11‬המנעו מ‪Redirects-‬‬
‫מה?‬
‫לרוב נעשה שימוש ב ‪ HTTP 3xx‬או‪ HTML meta refresh‬להעברת מידע‬
‫)‪(e.g. account authentication‬‬
‫איך?‬
‫פשוט נסו להמנע מהן‪.‬‬
‫אם צריך יותר משתיים‪ ,‬אפשר להציג דף מעבר )בכדי שהמשתמש ידע ש'זה טעון'(‬
‫‪11. Avoid Redirects‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪45‬‬
‫‪12. Optimize Network Requests‬‬
‫מה?‬
‫עדיף לבצע בקשות גדולות לשרת אך מועטות יותר‬
‫(מאשר הרבה בקשות קטנות)‬
‫איך?‬
‫קיבוץ בקשות‬
‫תעדוף בקשות‬
‫פעילות בהתאם לרמת הקישוריות‬
‫‪12. Optimize Network Requests‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪46‬‬
‫‪ .13‬צמצמו שימוש במקורות חיצוניים‬
‫למה?‬
‫כל קובץ סקריפט‪ ,CSS ,‬תמונה = ‪ = HTTP request‬טיול לשרת‬
‫איך?‬
‫‪ CSS‬ו‪ JavaScript-‬כל אחד בקובץ אחד בלבד‬
‫‪OR‬‬
‫או שהם ישולבו לפני שהעמוד מוגש ללקוח‬
‫‪13. Minimize External Resources‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪47‬‬
(Sprites) ‫ אחדו תמונות‬.14
?‫איך‬
similar sizes and color palettes.
That do not change often.
use CSS positioning and clipping.
‫דוגמא‬
Image by: Kriplozoik
www.yahoo.com
14. Aggregate Static Images into a Single Composite Resource (Sprites)
www.w3.org/TR/mwabp
48
CSS-‫ שלבו תמונות רקע ב‬.15
?‫מה‬
CSS-‫ אפשר לכלול אותן ב‬,‫במקום להוריד תמונות‬
buzz
data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgA
AABAAAAAQAQMAAAAlPW0iAA
AABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP
4/5/h/1+G/58ZDrAz3D/McH
8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFG
GFyjOXZtQAAAAAElFTkSuQm
CC
data:image/png;base64,iVBORw0KGgoAAAANSUh
EUgAAAAgAAAAhCAYAAADkrOp1AAAAGXRFWH
RTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllP
AAAAYFJREFUeNqEU7FOwzAQvXMuJSC1oqlKuo
aZkakrGyti5i+Q+AZ+goERiR9hYEJiZKVIFaqgtJV9
nO04SdO0TfQk5+75vedLgswM45vnDADuBOcCuy
4vkmaOCE/ZqJ+nabcbxzFh0Zx8fQPFpG6z0eD0JE
uPVUSglAJATyGaAxnm8WDY70WdBKIawd4RxUB
a81EnSRTFHUdAu7tQQBUB+QW5B7BwvSKFEB2
BpSCHAXsiZnQVV5dnKlauxAxlsyh7ggQFNKaSLg
mmRvAeDUJQMAxKBAw0CRwIxmHdwCv7U4iCV
UHYamFcyKZCGVLLbmhRMEHBD2jzFFCGlDruzY
BtGbiaA2JbhkDQvonNSZraoGCnhbYpNxXsvkrBBd
2mwMWgkHdYQAshhNQiz7hpYfYrQO1145YM8mf
9afGIkBVg82XJnzDsH76vFr+z8FWtQTzU1UX+yKu
fj+V8NtVGh0/Dgd38mLsvb5PL
?‫איך‬
data URI
:‫דוגמא‬
15. Include Background Images Inline in CSS Style Sheet
www.w3.org/TR/mwabp
49
16. Fingerprinting Resource for chach
?‫מה‬
‫ לקבצים שמשתנים מדי פעם‬cache ‫אפשר לעשות‬
?‫איך‬
‫ לתאריך רחוק מאוד בעתיד‬chase-‫ הגדירו את ה‬‫ שישתנה כשצריך לעדכן‬hash ‫ של הקובץ‬URL-‫ הוסיפו בסיומת ה‬.‫אותו‬
<img src="http://www.example.com/userimages/joeblogs-67f90da089da">
16. Cache Resources By Fingerprinting Resource References
www.w3.org/TR/mwabp
50
17. Cache AJAX Data
?‫מה‬
cache ‫ אפשר לעשות‬,‫כפי שעושים עם תוכן רגיל‬
.AJAX-‫למידע שמגיע ב‬
?‫איך‬
‫כרגיל‬
Expires \ Cache-Control header-‫ ו‬fingerprinting
17. Cache AJAX Data
www.w3.org/TR/mwabp/
www.w3c.org.il
51
‫‪ .18‬שלחו עוגיות רק כשצריך‬
‫מה?‬
‫תוכן סטטי אינו צריך עוגיות – אז עדיף להימנע‬
‫איך?‬
‫‪.1‬‬
‫‪.2‬‬
‫דומיין‪ ,‬תת דומיין או ‪ path‬נפרד לתוכן סטטי‬
‫הגדירו ‪ path‬לעוגיות‬
‫‪18. Do not Send Cookie Information Unnecessarily‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪52‬‬
Keep DOM Size Reasonable .19
?‫איך‬
pagination ‫למשל בעזרת‬
V win
X Fail
19. Keep DOM Size Reasonable
www.w3.org/TR/mwabp
53
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫נתוני האפליקציה‬
‫ביטחון מידע ופרטיות (‪)1‬‬
‫יידוע המשתמש ושליטתו באפליקציה (‪)4‬‬
‫שימוש מוגבל במשאבים (‪)11‬‬
‫(‪)3‬‬
‫‪ .5‬חווית משתמש‬
‫(‪)10‬‬
‫‪ .6‬התאמה ל‪Delivery Context-‬‬
‫‪ .7‬שיקולים נוספים (‪)1‬‬
‫(‪)5‬‬
‫‪www.w3.org/TR/mwabp/‬‬
‫‪www.w3c.org.il‬‬
‫‪54‬‬
‫בגלל מורכבות רבה יותר בשימוש במכשירים ניידים‬
‫– חשוב לשפר את חווית המשמש‬
‫‪Latency‬‬
‫‪interaction method‬‬
‫‪data consistency‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪55‬‬
‫ להתחיל צ'יק צ'ק‬.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.
http://www.flickr.com/photos/66475767@N00/4333416050/
...‫דוגמא‬
20. Optimize For Application Start-up Time
www.w3.org/TR/mwabp
56
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 Reloads
To reflect changes in state or show different views
21. Minimize Perceived Latency
Preload Probable Next Views
...‫דוגמא‬
www.w3.org/TR/mwabp
58
kiva - ‫דוגמא‬
j.mp/w3cmo10
www.w3.org/TR/mwabp
59
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 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)
22. Design for Multiple Interaction Methods
www.w3.org/TR/mwabp
60
‫‪ .23‬הימנעו משינוי הפוקוס בדפים דינמיים‬
‫איך?‬
‫)(‪ – .focus‬רק כשחייבים וכזה לא פוגע בשליטה‬
‫‪23. Preserve Focus on Dynamic Page Updates‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪61‬‬
fragment -‫ השתמשו ב‬.24
‫לתצוגה‬identifiers
?‫מה‬
‫ בכדי לאפשר שמירת‬fragment identifiers -‫השתמשו ב‬
back-‫ ולא לפגוע ב‬,‫הקישור לתצוגה‬
...‫דוגמא‬
http://myapp.example.org/myapp#view
24. Use Fragment IDs to Drive Application View
www.w3.org/TR/mwabp
62
W3C Cheat Sheet
j.mp/w3cmo8
www.w3.org/TR/mwabp
63
"Click-to-Call"-‫ השתמש במספרי טלפון ב‬.25
‫איך‬
<a href="tel:[PHONE-NUMBER]">[PHONE-NUMBER]</a>
entered using the full international
prefix
my.springpadit.com
25. Make Telephone Numbers "Click-to-Call"
www.w3.org/TR/mwabp
64
‫מה?‬
‫•‬
‫•‬
‫‪26. Ensure Paragraph Text Flows‬‬
‫מנע גלילה אנכית‬
‫ואפשר קריאה בשינוי אוריאנטציה‬
‫איך?‬
‫בקונטיינרים‪:‬‬
‫כן‪ :‬באחוזים ‪ /‬יחידות מידה יחסיות‬
‫לא יחידות מוחלטות או פיקסלים‬
‫‪Image by: curiouslee‬‬
‫דוגמא‪...‬‬
‫‪26. Ensure Paragraph Text Flows‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪65‬‬
‫דוגמא – טקסט צף ומתאים לגודל המסמך‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪W3c.org‬‬
27. Ensure Consistency Of State
Between Devices
?‫מה‬
‫הקפידו על עקיבות באפליקציה בין מכשירים‬
‫שונים‬
• Credentials
• preferences
• Data
?‫איך‬
‫שימורו על השרת מידע שאינו רלוונטי רק‬
‫למכשיר הספציפי‬
http://www.flickr.com/photos/osde-info/4336196538/sizes/o/
27. Ensure Consistency Of State Between Devices
www.w3.org/TR/mwabp
67
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫האפליקציה (‪)3‬‬
‫נתוני‬
‫ביטחון מידע ופרטיות (‪)1‬‬
‫יידוע המשתמש ושליטתו באפליקציה (‪)4‬‬
‫שימוש מוגבל במשאבים (‪)11‬‬
‫חווית משתמש (‪)10‬‬
‫‪ .6‬התאמה ל‪Delivery Context-‬‬
‫‪ .7‬שיקולים נוספים‬
‫(‪)5‬‬
‫(‪)1‬‬
‫‪www.w3.org/TR/mwabp/‬‬
‫‪www.w3c.org.il‬‬
‫‪68‬‬
‫התאימו ל‪ Delivery Context -‬שונים‬
‫צרו אפליקציה בעלת יכולת זיהוי ההקשר (כגון יכולות המכשיר) והסתגלות להן‪( .‬התאמת‬
‫תוכן‪ ,‬ניווט‪ ,‬מבנה עמוד‪)...‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪69‬‬
push-‫ מומלץ – שימוש ב‬.28
?‫מה‬
...‫אם מכשיר היעד תומך‬
?‫איך‬
OMA Push
QR Codes
SMS
…
28. Consider Mobile Specific Technologies for Initiating Web Applications
www.w3.org/TR/mwabp
70
‫הגדירו את גודל התצוגה הרצוי‬.29
?‫מה‬
‫צריך למנוע ממכשירים לעשות זום אוטומטי באפליקציה שהותאמה‬
....‫לניידים‬
?‫איך‬
<meta name="viewport" content="width=device-width,
initial-scale=1.0"/>
...‫דוגמא‬
29. Use Meta Viewport Element To Identify Desired Screen Sizes
www.w3.org/TR/mwabp
71
‫ הגדרת גודל תצוגה‬- ‫דוגמא‬
Viewport
Offlines
Data URI
http://nils-dehl.de/m/
j.mp/w3cmo9
www.w3.org/TR/mwabp
72
30. Prefer Server-Side Detection
Where Possible
?‫איך‬
HTTP request header: Accept
User-Agent
X-Wap-Profile
:‫דוגמא‬
30. Prefer Server-side Detection Where Possible
j.mp/w3cmo11
www.w3.org/TR/mwabp
73
'‫ כשצריך – זיהוי יכולות 'צד לקוח‬.31
?‫איך‬
JavaScript: if (some_api_exists) { ...
CSS Media Types
CSS Media Queries
...‫דוגמא‬
31. Use Client-side Detection When Necessary
www.w3.org/TR/mwabp
74
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.
32. Use Device Classification to Simplify Content Adaptation
www.w3.org/TR/mwabp
76
JavaScript ‫ לתפוצה מרבית – צרו גרסה ללא‬.33
?‫איך‬
synchronous FORM posts
>noscript> ‫או לפחות – הודעה מתאימה או‬
33. Support a non-JavaScript Variant if Appropriate
www.w3.org/TR/mwabp
77
‫‪ .34‬אפשר למשתמש לבחור את התצוגה‬
‫מה?‬
‫אפשר למשתמש לשנות את‬
‫סוג התצוגה‬
‫כברירת מחדל ספק את ה‪UI-‬‬
‫המתאים ביותר‬
‫אבל זכור את העדפות‬
‫המשתמש!‬
‫‪34. Offer Users a Choice of Interfaces‬‬
‫‪www.w3.org/TR/mwabp‬‬
‫‪78‬‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫נתוני האפליקציה‬
‫ביטחון מידע ופרטיות (‪)1‬‬
‫יידוע המשתמש ושליטתו באפליקציה (‪)4‬‬
‫שימוש מוגבל במשאבים (‪)11‬‬
‫חווית משתמש (‪)10‬‬
‫התאמה ל‪)5( Delivery Context-‬‬
‫(‪)3‬‬
‫‪ .7‬שיקולים נוספים‬
‫(‪)1‬‬
‫‪www.w3.org/TR/mwabp/‬‬
‫‪www.w3c.org.il‬‬
‫‪79‬‬
35. Consider Canvas or SVG For
Dynamic Graphics
?‫מה‬
canvas
‫מאפשר לצייר גרפיקה פשוטה‬
JavaScript ‫באמצעות‬
SVG
‫ להגדרת אלמנטים של‬XML ‫שפת‬
-‫גרפיקה וקטורית המתווספים ל‬
‫ וניתנים לשינוי בעזרת‬,DOM
JavaScript
http://www.mozilla.com/en-US/firefox/stats/
...‫דוגמא‬
35. Consider Use Of Canvas Element or SVG For Dynamic Graphics
www.w3.org/TR/mwabp
80
SVG and canvas demos
• Bomomo.com
• zwibbler.com
• www.iconza.com
j.mp/w3cmo16
j.mp/w3cmo14
Video - Cool mobile apps with SVG and other Web technologies - j.mp/w3cmo13
www.w3.org/TR/mwabp
‫כלים נוספים‬
www.w3.org/TR/mwabp
82
Mobile Web Best Practices (MWBP) Flipcards
j.mp/w3cfcc
www.w3.org/TR/mwabp
83
The world is getting more
platform-fragmented, not less.
Source: j.mp/w3cmo5
84
Do www.w3.org/TR/mwabp/
yourself a favor and write
your
next app in HTML5.
www.w3c.org.il
 ‫תודה‬
www.w3c.org.il
@isociltech @eyalsela
eyal@isoc.org.il
j.mp/w3cmobp
www.w3.org/TR/mwabp
85