שיטות לפיתוח אפליקציות ווב למכשירים ניידים - מובייל מונדי 28 ביוני 2010

‫‪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‬‬
‫ארגון בינלאומי‬ ‫•‬
‫כ-053 ארגונים‬ ‫•‬
‫פורום ניטראלי ליצירת תקני רשת באינטרנט.‬ ‫•‬
‫משימה:‬ ‫•‬
‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬
‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה‬
‫לטווח ארוך.‬

‫5‬

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

‫)‬ ‫(‬
‫עוד...‬

‫6‬

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

www.w3.org/TR/mwabp
7

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

‫8‬

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

You are
here

j.mp/w3crec
www.w3.org/TR/mwabp
9

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

‫1‪j.mp/w3cmo‬‬
‫01‬

public-bpwg-comments@w3.org

j.mp/w3cmobp
www.w3.org/TR/mwabp
11

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

‫21‬

?‫מה מיישמים‬

www.w3.org/TR/mwabp
13

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

‫41‬

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
www.w3.org/TR/mwabp
j.mp/w3cmo1
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/


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

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

‫‪bit.ly/w3cmbp‬‬

‫22‬

Best practices

www.w3.org/TR/mwabp/

23
www.w3c.org.il

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

‫(3)‬ ‫1. נתוני האפליקציה‬
‫(1)‬ ‫ביטחון מידע ופרטיות‬ ‫2.‬

‫52‬

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

‫62‬

‫1. המעיטו את השימוש בעוגיות‬
‫מה?‬
‫נשלחות לשרת בכל בקשה‬
‫יתכן ולא יהיה פעילות במכשיר‬

‫איך?‬

‫בנו אפליקציה פעילה גם ללא עוגיות‬
‫(למשל עם ‪)URI decoration‬‬
‫‪Image by: D Sharon Pruitt‬‬

‫‪1. Use Cookies Sparingly‬‬
‫72‬

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

?‫מה‬
‫עדיף להשתמש במנגנונים בצד לקוח לאחסון‬
.‫מידע, בעיקר בכמויות גדולות‬
)Responsiveness , start-up time ‫(מועיל ב‬

?‫איך‬
BONDI •
- HTML5 •
Offline - j.mp/w3coff

Opera Widgets •
by Remy Sharp - remysharp.com/demo/rubiks/

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

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

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

‫92‬

Local storage + offline - demo

www.html5rocks.com/tutorials/offline/todo/
j.mp/mozoff www.w3.org/TR/mwabp
30

‫1. נתוני האפליקציה (3)‬
‫(1)‬ ‫2. ביטחון מידע ופרטיות‬
‫(4)‬ ‫יידוע המשתמש ושליטתו באפליקציה‬ ‫3.‬


‫13‬

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

‫23‬

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
www.w3.org/TR/mwabp
33

‫1. נתוני האפליקציה (3)‬
‫2. ביטחון מידע ופרטיות (1)‬

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


‫43‬

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

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

‫53‬

‫5. הודיעו למשתמש על גישה אוטומטית לרשת*‬
‫מה?‬
‫שימוש ברשת מרוקן את הסוללה‬
‫עולה כסף...‬

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

‫.‬
‫‪5. Inform the User About Automatic Network Access‬‬
‫63‬

‫6. ספק אמצעים לשליטה בחיבור אוטומטי לרשת *‬
‫מה?‬
‫אפשר למשתמש למנוע חיבור אוטומטי לרשת‬
‫(כאשר זה מבוטל – הציגו הודעת חיבור מעת לעת.)‬

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

‫‪Image by: Jeff Sonstein‬‬

‫‪6. Provide Sufficient Means to Control Automatic Network Access‬‬
‫73‬

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

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

7. Ensure the User is Informed About Use of Personal and Device Information
www.w3.org/TR/mwabp
MapQuest.com
38

‫8. אפשרו ‪ Sign-in‬אוטומטי‬
‫מה?‬
‫כי יותר קשה להזין תוכן....‬

‫איך?‬
‫בעוגיות, או ‪local storage‬‬
‫(לא לשכוח לשים לינק ל-‪)log out‬‬

‫‪8. Enable Automatic Sign-in‬‬
‫04‬

‫האפליקציה (3)‬
‫1. נתוני‬
‫2. ביטחון מידע ופרטיות (1)‬

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

‫(11)‬ ‫4. שימוש מוגבל במשאבים‬
‫(01)‬ ‫5. חווית משתמש‬
‫6. התאמה ל-‪)5( Delivery Context‬‬

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


‫14‬

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

‫מוגבלים בניידים -‬
‫זיכרון‬
‫עיבוד‬
‫רוחב פס‬

‫24‬

‫‪9. Use Transfer Compression‬‬
‫מה?‬
‫השתמשו בדחיסה של התוכן.‬
‫אבל זכרו שיש עלות של זמן וחיי סוללה.‬

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

‫‪9. Use Transfer Compression‬‬
‫34‬

‫01. מזערו את גודל האפליקציה והנתונים‬
?‫למה‬
‫תרד יותר מהר‬
‫תפעל יותר טוב‬

?‫איך‬
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‬‬
‫54‬

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

‫איך?‬
‫קיבוץ בקשות‬
‫תעדוף בקשות‬
‫פעילות בהתאם לרמת הקישוריות‬

‫‪12. Optimize Network Requests‬‬
‫64‬

‫31. צמצמו שימוש במקורות חיצוניים‬
‫למה?‬
‫כל קובץ סקריפט, ‪ ,CSS‬תמונה = ‪ = HTTP request‬טיול לשרת‬

‫איך?‬
‫‪ CSS‬ו-‪ JavaScript‬כל אחד בקובץ אחד בלבד‬
‫‪OR‬‬
‫או שהם ישולבו לפני שהעמוד מוגש ללקוח‬

‫‪13. Minimize External Resources‬‬
‫74‬

(Sprites) ‫41. אחדו תמונות‬

?‫איך‬
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-‫51. שלבו תמונות רקע ב‬
?‫מה‬
CSS-‫במקום להוריד תמונות, אפשר לכלול אותן ב‬
buzz
data:image/png;base64,iVBORw0KGgoAAAANSUh
data:image/png;base64, EUgAAAAgAAAAhCAYAAADkrOp1AAAAGXRFWH
iVBORw0KGgoAAAANSUhEUgA
AABAAAAAQAQMAAAAlPW0iAA
RTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllP
AAAAYFJREFUeNqEU7FOwzAQvXMuJSC1oqlKuo
aZkakrGyti5i+Q+AZ+goERiR9hYEJiZKVIFaqgtJV9
?‫איך‬
nO04SdO0TfQk5+75vedLgswM45vnDADuBOcCuy
AABlBMVEUAAAD/ 4vkmaOCE/ZqJ+nabcbxzFh0Zx8fQPFpG6z0eD0JE data URI
//+l2Z/dAAAAM0lEQVR4nGP uPVUSglAJATyGaAxnm8WDY70WdBKIawd4RxUB
4/5/h/1+G/58ZDrAz3D/McH a81EnSRTFHUdAu7tQQBUB+QW5B7BwvSKFEB2
BpSCHAXsiZnQVV5dnKlauxAxlsyh7ggQFNKaSLg :‫דוגמא‬
8yw83NDDeNGe4U mmRvAeDUJQMAxKBAw0CRwIxmHdwCv7U4iCV
UHYamFcyKZCGVLLbmhRMEHBD2jzFFCGlDruzY
g9C9zwz3gVLMDA/A6P9/AFG BtGbiaA2JbhkDQvonNSZraoGCnhbYpNxXsvkrBBd
GFyjOXZtQAAAAAElFTkSuQm 2mwMWgkHdYQAshhNQiz7hpYfYrQO1145YM8mf
9afGIkBVg82XJnzDsH76vFr+z8FWtQTzU1UX+yKu
CC fj+V8NtVGh0/Dgd38mLsvb5PL

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/
51
www.w3c.org.il

‫81. שלחו עוגיות רק כשצריך‬

‫מה?‬
‫תוכן סטטי אינו צריך עוגיות – אז עדיף להימנע‬
‫איך?‬
‫דומיין, תת דומיין או ‪ path‬נפרד לתוכן סטטי‬ ‫1.‬
‫הגדירו ‪ path‬לעוגיות‬ ‫2.‬

‫‪18. Do not Send Cookie Information Unnecessarily‬‬
‫25‬

Keep DOM Size Reasonable .19
?‫איך‬
pagination ‫למשל בעזרת‬

X Fail V win

19. Keep DOM Size Reasonable
www.w3.org/TR/mwabp
53

‫נתוני האפליקציה‬
‫(3)‬ ‫1.‬
‫(01)‬ ‫5. חווית משתמש‬
‫(5)‬ ‫6. התאמה ל-‪Delivery Context‬‬
‫7. שיקולים נוספים (1)‬


‫45‬

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

‫55‬

‫02. להתחיל צ'יק צ'ק‬
?‫איך‬
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

www.w3.org/TR/mwabp
j.mp/w3cmo2

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

Preload Probable Next Views
...‫דוגמא‬
21. Minimize Perceived Latency
www.w3.org/TR/mwabp
58

kiva - ‫דוגמא‬

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

‫32. הימנעו משינוי הפוקוס בדפים דינמיים‬

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

‫‪23. Preserve Focus on Dynamic Page Updates‬‬
‫16‬

fragment identifiers -‫42. השתמשו ב‬
‫לתצוגה‬
?‫מה‬
‫ בכדי לאפשר שמירת‬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

www.w3.org/TR/mwabp
j.mp/w3cmo8
63

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

‫איך‬
<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‬‬
‫56‬

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

‫‪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

‫האפליקציה (3)‬
‫נתוני‬ ‫1.‬
‫(5)‬ ‫6. התאמה ל-‪Delivery Context‬‬
‫(1)‬ ‫7. שיקולים נוספים‬


‫86‬

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

‫96‬

push-‫82. מומלץ – שימוש ב‬
?‫מה‬
...‫אם מכשיר היעד תומך‬
?‫איך‬
OMA Push
QR Codes
SMS
…
28. Consider Mobile Specific Technologies for Initiating Web Applications
www.w3.org/TR/mwabp
70

‫92.הגדירו את גודל התצוגה הרצוי‬
?‫מה‬
‫צריך למנוע ממכשירים לעשות זום אוטומטי באפליקציה שהותאמה‬
....‫לניידים‬

?‫איך‬
<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/

72

30. Prefer Server-Side Detection
Where Possible
?‫איך‬
HTTP request header: Accept
User-Agent
X-Wap-Profile

:‫דוגמא‬

30. Prefer Server-side Detection Where Possible

73

'‫13. כשצריך – זיהוי יכולות 'צד לקוח‬
?‫איך‬
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


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

‫43. אפשר למשתמש לבחור את התצוגה‬
‫מה?‬
‫אפשר למשתמש לשנות את‬
‫סוג התצוגה‬

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

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

‫‪34. Offer Users a Choice of Interfaces‬‬
‫87‬

‫(3)‬ ‫נתוני האפליקציה‬ ‫1.‬
‫(1)‬ ‫7. שיקולים נוספים‬


‫97‬

35. Consider Canvas or SVG For
Dynamic Graphics
?‫מה‬
canvas
‫מאפשר לצייר גרפיקה פשוטה‬
JavaScript ‫באמצעות‬

SVG
‫ להגדרת אלמנטים של‬XML ‫שפת‬
-‫גרפיקה וקטורית המתווספים ל‬
‫, וניתנים לשינוי בעזרת‬DOM
http://www.mozilla.com/en-US/firefox/stats/ JavaScript

...‫דוגמא‬
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

Do www.w3.org/TR/mwabp/
yourself a favor and write
84
your next app in HTML5.
www.w3c.org.il

 ‫תודה‬

www.w3c.org.il
@isociltech @eyalsela
j.mp/w3cmobp eyal@isoc.org.il
www.w3.org/TR/mwabp
85

שיטות לפיתוח אפליקציות ווב למכשירים ניידים - מובייל מונדי 28 ביוני 2010

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (9)

Similaire à שיטות לפיתוח אפליקציות ווב למכשירים ניידים - מובייל מונדי 28 ביוני 2010

Similaire à שיטות לפיתוח אפליקציות ווב למכשירים ניידים - מובייל מונדי 28 ביוני 2010 (20)

Plus de Israeli Internet Association technology committee

Plus de Israeli Internet Association technology committee (20)

שיטות לפיתוח אפליקציות ווב למכשירים ניידים - מובייל מונדי 28 ביוני 2010