0
‫יחידת לימוד –‬         ‫תכנון ופיתוח אפליקציות ווב‬              ‫למכשירים ניידים‬                    ‫על פי מסמך ה-‪W3C‬...
‫• תקן ‪-Mobile Web Application Best Practices - W3C‬‬                             ‫פורסם ב-41 בדצמבר 0102‬             ‫•...
Mobile Web Application Best -‫אודות ה‬                Practices               The goal ‘Mobile Web Application Best       ...
Web Application    a Web page (XHTML + CSS) or collection of Web    pages delivered over HTTP which use server-side or    ...
‫מגבלות והבדלים – מכשירים ניידים לעומת‬                    ‫שולחניים‬                                       ‫תצוגה‬   ‫•‬ ...
Best practices6
‫1. נתוני האפליקציה‬                 ‫2. אבטחת מידע ופרטיות‬    ‫3. יידוע המשתמש ושליטתו באפליקציה‬               ‫4. שימו...
‫1. נתוני האפליקציה‬                 ‫2. אבטחת מידע ופרטיות‬    ‫3. יידוע המשתמש ושליטתו באפליקציה‬               ‫4. שימו...
‫השתמשו בטכנולוגיות ושיטות מתאימות‬          ‫לאחסון נתוני האפליקציה‬‫9‬
‫המעיטו את השימוש בעוגיות‬                                                                   ‫מה?‬                        ...
‫השתמשו בטכנולוגיות המתאימות לאחסון מידע‬                 ‫בצד הלקוח‬                                                     ...
‫שכפלו מידע לשרת במידת הצורך‬                                                      ‫מה?‬                               ‫•ת...
‫1. נתוני האפליקציה‬                 ‫2. אבטחת מידע ופרטיות‬     ‫3. יידוע המשתמש ושליטתו באפליקציה‬                ‫4. שי...
‫אבטחת מידע ופרטיות – השתמשו במידע‬         ‫אמין והגנו על פרטיות המשתמש‬‫41‬
Do not Execute Unescaped or Untrusted JSON                   data                                                         ...
‫1. נתוני האפליקציה‬                   ‫2. אבטחת מידע ופרטיות‬     ‫3. יידוע המשתמש ושליטתו באפליקציה‬                 ‫4....
‫מכשירים ניידים מכילים מידע אישי רב -‬     ‫מדיה, פרטי קשר, ולוח שנה, פירוט שיחות,‬       ‫מידע על המכשיר, מיקום, חיבור לר...
‫הודיעו למשתמש על שימוש במידע על המכשיר‬             ‫או פרטים אישיים‬                                                    ...
‫1. נתוני האפליקציה‬                  ‫2. אבטחת מידע ופרטיות‬     ‫3. יידוע המשתמש ושליטתו באפליקציה‬              ‫4. שימ...
‫אל תכבידו על משאבי המכשיר – זיכרון,‬ ‫עיבוד, רוחב פס - מוגבלים יותר במכשירים‬                  ‫ניידים‬‫02‬
‫מזערו את גודל האפליקציה והנתונים‬                                                                          ‫מה?‬         ...
‫המנעו מ-‪Redirects‬‬                                                               ‫מה?‬     ‫לרוב נעשה שימוש ב ‪ HTTP 3x...
‫‪Optimize Network Requests‬‬                                                            ‫מה?‬     ‫עדיף לבצע בקשות גדולות...
‫צמצמו שימוש במקורות חיצוניים‬                                                                   ‫מה?‬ ‫‪style sheets, scr...
(Sprites) ‫אחדו תמונות‬                                                              ?‫איך‬                               ...
Keep DOM Size Reasonable                                        ?‫איך‬                      pagination ‫למשל בעזרת‬26
‫1. נתוני האפליקציה‬                  ‫2. אבטחת מידע ופרטיות‬     ‫3. יידוע המשתמש ושליטתו באפליקציה‬                ‫4. ש...
‫בגלל מורכבות רבה יותר בשימוש במכשירים‬   ‫ניידים – חשוב לשפר את חווית המשמש‬‫82‬
Optimize For Application Start-up Time                                                                                    ...
Minimize Perceived Latency                                                             ?‫איך‬                    • Increme...
"Click-to-Call"-‫השתמש במספרי טלפון ב‬                                                             ?‫איך‬                 ...
‫‪Ensure Paragraph Text Flows‬‬                                                               ‫מה?‬                       ...
Ensure Consistency Of State Between Devices                                                                               ...
‫אפשרו ‪ Sign-in‬אוטומטי‬                                           ‫מה?‬                  ‫קשה להזין תוכון ופרטי הזדהות‬ ...
‫1. נתוני האפליקציה‬                 ‫2. אבטחת מידע ופרטיות‬     ‫3. יידוע המשתמש ושליטתו באפליקציה‬                ‫4. שי...
‫התאימו ל- ‪ Delivery Context‬שונים.‬     ‫צרו אפליקציה בעלת יכולת זיהוי ההקשר‬       ‫(כגון יכולות המכשיר) והסתגלות להן.‬...
‫התאימו פונקציונליות ליכולות המכשיר‬                                                          ?‫איך‬ • Use Client-Side Cap...
‫אפשר למשתמש לבחור את התצוגה‬                                               ‫מה?‬                   ‫אפשר למשתמש לשנות את ...
‫1. נתוני האפליקציה‬                  ‫2. אבטחת מידע ופרטיות‬     ‫3. יידוע המשתמש ושליטתו באפליקציה‬                ‫4. ש...
Consider Use of Canvas Element or SVG For                 Dynamic Graphics                                                ...
‫כלים נוספים‬‫14‬
• Web Compatibility Test for Mobile Browsers       j.mp/w3ctmb     • Mobile Web Best Practices (MWBP) Flipcards       j.mp...
‫סוף‬       ‫עריכה: אייל סלע, מנהל פרוייקטים, איגוד האינטרנט הישראלי ומשרד ה-‪W3C‬הישראלי‬                        ‫‪www.w3...
Upcoming SlideShare
Loading in...5
×

יחידת לימוד – תכנון ופיתוח אפליקציות ווב למכשירים ניידים

868

Published on

המצגת ניתנת לשימוש באופן חופשי, ללא תשלום או תנאים מגבילים למעט ייחוס לאיגוד האינטרנט הישראלי, כפי שמופיע ב"רישון ייחוס 2.5 ישראל (CC BY 2.5)" מידע נוסף על רישיון השימוש: creativecommons.org/licenses/by/2.5/il הנ"ל אינו תקף לתמונות וחומרים מממקורות חיצוניים.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
868
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "יחידת לימוד – תכנון ופיתוח אפליקציות ווב למכשירים ניידים"

  1. 1. ‫יחידת לימוד –‬ ‫תכנון ופיתוח אפליקציות ווב‬ ‫למכשירים ניידים‬ ‫על פי מסמך ה-‪W3C‬‬ ‫" ‪"Mobile Web Application Best Practices‬‬ ‫המצגת ניתנת לשימוש באופן חופשי, ללא תשלום או תנאים מגבילים למעט ייחוס לאיגוד‬ ‫האינטרנט הישראלי, כפי שמופיע ב"רישון ייחוס 5.2 ישראל (5.2 ‪")CC BY‬‬ ‫מידע נוסף על רישיון השימוש: ‪creativecommons.org/licenses/by/2.5/il‬‬‫1‬ ‫הנ"ל אינו תקף לתמונות וחומרים מממקורות חיצוניים.‬
  2. 2. ‫• תקן ‪-Mobile Web Application Best Practices - W3C‬‬ ‫פורסם ב-41 בדצמבר 0102‬ ‫• יחידת לימוד זו הוכנה במהלך ספטמבר 2102.‬ ‫• היחידה כוללת חלקים רלוונטיים מהתקן וכן הערות למרצה‬ ‫בתחתית כל שקופית, המבוססות על התקן.‬‫2‬
  3. 3. Mobile Web Application Best -‫אודות ה‬ Practices The goal ‘Mobile Web Application Best Practices’ is to aid the development of rich and dynamic mobile Web applications. It collects the most relevant engineering practices, promoting those that enable a better user experience and warning against those that are considered harmful. www.w3.org/TR/mwabp3
  4. 4. 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.4
  5. 5. ‫מגבלות והבדלים – מכשירים ניידים לעומת‬ ‫שולחניים‬ ‫תצוגה‬ ‫•‬ ‫הזנת תוכן‬ ‫•‬ ‫רוחב פס ועלות‬ ‫•‬ ‫מטרות המשתמש‬ ‫•‬ ‫מגבלות המכשיר‬ ‫•‬‫‪bit.ly/w3cmbp‬‬‫5‬
  6. 6. Best practices6
  7. 7. ‫1. נתוני האפליקציה‬ ‫2. אבטחת מידע ופרטיות‬ ‫3. יידוע המשתמש ושליטתו באפליקציה‬ ‫4. שימוש מוגבל במשאבים‬ ‫5. חווית משתמש‬ ‫6. התאמה ל-‪Delivery Context‬‬ ‫7. שיקולים נוספים‬‫7‬
  8. 8. ‫1. נתוני האפליקציה‬ ‫2. אבטחת מידע ופרטיות‬ ‫3. יידוע המשתמש ושליטתו באפליקציה‬ ‫4. שימוש מוגבל במשאבים‬ ‫5. חווית משתמש‬ ‫6. התאמה ל-‪Delivery Context‬‬ ‫7. שיקולים נוספים‬‫8‬
  9. 9. ‫השתמשו בטכנולוגיות ושיטות מתאימות‬ ‫לאחסון נתוני האפליקציה‬‫9‬
  10. 10. ‫המעיטו את השימוש בעוגיות‬ ‫מה?‬ ‫נשלחות לשרת בכל בקשה‬ ‫יתכן ולא יהיה פעילות במכשיר‬ ‫איך?‬ ‫בנו אפליקציה שיכולה להשאר פעילה גם ללא‬ ‫עוגיות (למשל עם ‪)URI decoration‬‬ ‫‪Image by: D Sharon Pruitt‬‬‫01‬
  11. 11. ‫השתמשו בטכנולוגיות המתאימות לאחסון מידע‬ ‫בצד הלקוח‬ ‫מה?‬ ‫עדיף להשתמש במנגנונים בצד לקוח לאחסון מידע,‬ ‫בעיקר בכמויות גדולות.‬ ‫(מועיל ב ‪)Responsiveness , start-up time‬‬ ‫איך?‬ ‫• 5‪offline HTML‬‬ ‫• ‪BONDI‬‬ ‫• ‪Opera Widgets‬‬ ‫!#/‪https://mobile.twitter.com‬‬‫11‬
  12. 12. ‫שכפלו מידע לשרת במידת הצורך‬ ‫מה?‬ ‫•תצוגה אחידה במכשירים שונים‬ ‫•מגבה למקרה של אובן המכשיר‬ ‫‪j.mp/mozoff‬‬ ‫איך?‬ ‫טכנולוגיות לאחסון מידע צד לקוח מספקת גם בדיקת קישוריות.‬ ‫דוגמא‬‫21‬
  13. 13. ‫1. נתוני האפליקציה‬ ‫2. אבטחת מידע ופרטיות‬ ‫3. יידוע המשתמש ושליטתו באפליקציה‬ ‫4. שימוש מוגבל במשאבים‬ ‫5. חווית משתמש‬ ‫6. התאמה ל-‪Delivery Context‬‬ ‫7. שיקולים נוספים‬‫31‬
  14. 14. ‫אבטחת מידע ופרטיות – השתמשו במידע‬ ‫אמין והגנו על פרטיות המשתמש‬‫41‬
  15. 15. 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 Image by: D Sharon Pruitt accept only valid JSON, preventing potentially malicious code from running.15
  16. 16. ‫1. נתוני האפליקציה‬ ‫2. אבטחת מידע ופרטיות‬ ‫3. יידוע המשתמש ושליטתו באפליקציה‬ ‫4. שימוש מוגבל במשאבים‬ ‫5. חווית משתמש‬ ‫6. התאמה ל-‪Delivery Context‬‬ ‫7. שיקולים נוספים‬‫61‬
  17. 17. ‫מכשירים ניידים מכילים מידע אישי רב -‬ ‫מדיה, פרטי קשר, ולוח שנה, פירוט שיחות,‬ ‫מידע על המכשיר, מיקום, חיבור לרשת‬ ‫הקפידו על ההמלצות הבאות אם הדפדפן‬ ‫אינו מספק אותן‬‫71‬
  18. 18. ‫הודיעו למשתמש על שימוש במידע על המכשיר‬ ‫או פרטים אישיים‬ ‫מה?‬ ‫בעת כניסה ראשונה לשירות או בגישה ראשונה‬ ‫למידע.‬ ‫איך?‬ ‫לרוב ל-‪ API‬יש בקשת רשות מובנת‬ ‫(‪.)confirmation dialog ; recover gracefully‬‬ ‫‪MapQuest.com‬‬‫81‬
  19. 19. ‫1. נתוני האפליקציה‬ ‫2. אבטחת מידע ופרטיות‬ ‫3. יידוע המשתמש ושליטתו באפליקציה‬ ‫4. שימוש מוגבל במשאבים‬ ‫5. חווית משתמש‬ ‫6. התאמה ל-‪Delivery Context‬‬ ‫7. שיקולים נוספים‬‫91‬
  20. 20. ‫אל תכבידו על משאבי המכשיר – זיכרון,‬ ‫עיבוד, רוחב פס - מוגבלים יותר במכשירים‬ ‫ניידים‬‫02‬
  21. 21. ‫מזערו את גודל האפליקציה והנתונים‬ ‫מה?‬ ‫האפליקציה תרד יותר מהר‬ ‫ותפעל טוב יותר‬ ‫‪See http://compressorrater.thruhere.net‬‬ ‫איך?‬ ‫השתמשו ב-‪ Minification‬ו- ‪Compress content‬‬‫12‬
  22. 22. ‫המנעו מ-‪Redirects‬‬ ‫מה?‬ ‫לרוב נעשה שימוש ב ‪ HTTP 3xx‬או ‪ HTML meta refresh‬להעברת מידע‬ ‫)‪(e.g. account authentication‬‬ ‫איך?‬ ‫פשוט נסו להמנע מהן.‬ ‫אם צריך יותר משתיים, אפשר להציג דף מעבר )בכדי שהמשתמש ידע‬ ‫שהמידע נטען(‬‫22‬
  23. 23. ‫‪Optimize Network Requests‬‬ ‫מה?‬ ‫עדיף לבצע בקשות גדולות לשרת אך מועטות יותר (מאשר הרבה בקשות‬ ‫קטנות)‬ ‫איך?‬ ‫• קיבוץ בקשות‬ ‫• תעדוף בקשות‬ ‫• פעילות בהתאם לרמת הקישוריות‬‫32‬
  24. 24. ‫צמצמו שימוש במקורות חיצוניים‬ ‫מה?‬ ‫‪style sheets, scripts, image - each of which requires an HTTP request‬‬ ‫איך?‬ ‫‪ CSS‬ו-‪ JavaScript‬כל אחד בקובץ אחד בלבד‬ ‫או שהם ישולבו לפני שהעמוד מוגש ללקוח‬‫42‬
  25. 25. (Sprites) ‫אחדו תמונות‬ ?‫איך‬ • similar sizes and color palettes. • That do not change often. • use CSS positioning and clipping. Image by: Kriplozoik25
  26. 26. Keep DOM Size Reasonable ?‫איך‬ pagination ‫למשל בעזרת‬26
  27. 27. ‫1. נתוני האפליקציה‬ ‫2. אבטחת מידע ופרטיות‬ ‫3. יידוע המשתמש ושליטתו באפליקציה‬ ‫4. שימוש מוגבל במשאבים‬ ‫5. חווית משתמש‬ ‫6. התאמה ל-‪Delivery Context‬‬ ‫7. שיקולים נוספים‬‫72‬
  28. 28. ‫בגלל מורכבות רבה יותר בשימוש במכשירים‬ ‫ניידים – חשוב לשפר את חווית המשמש‬‫82‬
  29. 29. Optimize For Application Start-up Time ?‫איך‬ • Use Offline Technology (e.g. AppCache) – Resources (HTML, JavaScript, CSS) stored locally. • Use Local Storage: store a snapshot http://www.flickr.com/photos/66475767@N00/4333416 of last state - display it immediately 050/ on start-up • Minimize Number of Local Storage Queries before the first view can be displayed.29
  30. 30. Minimize Perceived Latency ?‫איך‬ • Incremental Rendering • 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 MapQuest.com state or show different views) • Preload Probable Next Views30
  31. 31. "Click-to-Call"-‫השתמש במספרי טלפון ב‬ ?‫איך‬ <a href="tel:[PHONE- NUMBER]">[PHONE-NUMBER]</a> entered using the full international prefix my.springpadit.com 3131
  32. 32. ‫‪Ensure Paragraph Text Flows‬‬ ‫מה?‬ ‫• מנע גלילה אופקית‬ ‫• ואפשר קריאה בשינוי אוריאנטציה‬ ‫איך?‬ ‫לא להשתמש ביחידות מוחלטות / פיקסלים‬ ‫‪Image by: curiouslee‬‬ ‫כן להשתמש ביחידות יחסיות ל- ‪containers‬‬ ‫23‬‫23‬
  33. 33. Ensure Consistency Of State Between Devices ?‫מה‬ ‫הקפידו על עקיבות באפליקציה בין מכשירים‬ ‫שונים‬ • Credentials • preferences • Data ?‫איך‬ ‫שימורו על השרת מידע שאינו רלוונטי רק‬ ‫למכשיר הספציפי‬ http://www.flickr.com/photos/osde- info/4336196538/sizes/o/ 3333
  34. 34. ‫אפשרו ‪ Sign-in‬אוטומטי‬ ‫מה?‬ ‫קשה להזין תוכון ופרטי הזדהות‬ ‫איך?‬ ‫עוגיות, או ‪local storage‬‬ ‫(לא לשכוח לשים לינק ל-‪)log out‬‬‫43‬
  35. 35. ‫1. נתוני האפליקציה‬ ‫2. אבטחת מידע ופרטיות‬ ‫3. יידוע המשתמש ושליטתו באפליקציה‬ ‫4. שימוש מוגבל במשאבים‬ ‫5. חווית משתמש‬ ‫6. התאמה ל-‪Delivery Context‬‬ ‫7. שיקולים נוספים‬‫53‬
  36. 36. ‫התאימו ל- ‪ Delivery Context‬שונים.‬ ‫צרו אפליקציה בעלת יכולת זיהוי ההקשר‬ ‫(כגון יכולות המכשיר) והסתגלות להן.‬ ‫(התאמת תוכן, ניווט, מבנה עמוד...)‬‫63‬
  37. 37. ‫התאימו פונקציונליות ליכולות המכשיר‬ ?‫איך‬ • Use Client-Side Capability Detection Where Necessary • Prefer Server-Side Detection Where Possible 3737
  38. 38. ‫אפשר למשתמש לבחור את התצוגה‬ ‫מה?‬ ‫אפשר למשתמש לשנות את סוג התצוגה‬ ‫כברירת מחדל ספק את ה-‪ UI‬המתאים ביותר‬ ‫אבל זכור את העדפות המשתמש!‬ ‫83‬‫83‬
  39. 39. ‫1. נתוני האפליקציה‬ ‫2. אבטחת מידע ופרטיות‬ ‫3. יידוע המשתמש ושליטתו באפליקציה‬ ‫4. שימוש מוגבל במשאבים‬ ‫5. חווית משתמש‬ ‫6. התאמה ל-‪Delivery Context‬‬ ‫7. שיקולים נוספים‬‫93‬
  40. 40. Consider Use of Canvas Element or SVG For Dynamic Graphics ?‫מה‬ canvas ‫מאפשר לצייר גרפיקה פשוטה‬ JavaScript ‫באמצעות‬ http://www.mozilla.com/en-US/firefox/stats/ SVG ‫ להגדרת אלמנטים של‬XML ‫שפת‬ ,DOM-‫גרפיקה וקטורית המתווספים ל‬ JavaScript ‫וניתנים לשינוי בעזרת‬ 4040
  41. 41. ‫כלים נוספים‬‫14‬
  42. 42. • Web Compatibility Test for Mobile Browsers j.mp/w3ctmb • Mobile Web Best Practices (MWBP) Flipcards j.mp/w3cfcc • Mobile Web Application Best Practices Cards w3.org/2010/09/MWABP42
  43. 43. ‫סוף‬ ‫עריכה: אייל סלע, מנהל פרוייקטים, איגוד האינטרנט הישראלי ומשרד ה-‪W3C‬הישראלי‬ ‫‪www.w3c.org.il | www.isoc.org.il‬‬ ‫המצגת ניתנת לשימוש באופן חופשי, ללא תשלום או תנאים מגבילים למעט ייחוס לאיגוד‬ ‫האינטרנט הישראלי, כפי שמופיע ב"רישון ייחוס 5.2 ישראל (5.2 ‪")CC BY‬‬ ‫מידע נוסף על רישיון השימוש: ‪creativecommons.org/licenses/by/2.5/il‬‬ ‫הנ"ל אינו תקף לתמונות וחומרים מממקורות חיצוניים.‬‫34‬
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×