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

1. ‫יחידת לימוד –‬
‫תכנון ופיתוח אפליקציות ווב‬
‫למכשירים ניידים‬
‫על פי מסמך ה-‪W3C‬‬
‫" ‪"Mobile Web Application Best Practices‬‬
‫המצגת ניתנת לשימוש באופן חופשי, ללא תשלום או תנאים מגבילים למעט ייחוס לאיגוד‬
‫האינטרנט הישראלי, כפי שמופיע ב"רישון ייחוס 5.2 ישראל (5.2 ‪")CC BY‬‬
‫מידע נוסף על רישיון השימוש: ‪creativecommons.org/licenses/by/2.5/il‬‬
‫1‬ ‫הנ"ל אינו תקף לתמונות וחומרים מממקורות חיצוניים.‬

2. ‫• תקן ‪-Mobile Web Application Best Practices - W3C‬‬
‫פורסם ב-41 בדצמבר 0102‬
‫• יחידת לימוד זו הוכנה במהלך ספטמבר 2102.‬
‫• היחידה כוללת חלקים רלוונטיים מהתקן וכן הערות למרצה‬
‫בתחתית כל שקופית, המבוססות על התקן.‬
‫2‬

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/mwabp
3

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. ‫מגבלות והבדלים – מכשירים ניידים לעומת‬
‫שולחניים‬
‫תצוגה‬ ‫•‬
‫הזנת תוכן‬ ‫•‬
‫רוחב פס ועלות‬ ‫•‬
‫מטרות המשתמש‬ ‫•‬
‫מגבלות המכשיר‬ ‫•‬
‫‪bit.ly/w3cmbp‬‬
‫5‬

6. Best practices
6

7. ‫1. נתוני האפליקציה‬
‫2. אבטחת מידע ופרטיות‬
‫3. יידוע המשתמש ושליטתו באפליקציה‬
‫4. שימוש מוגבל במשאבים‬
‫5. חווית משתמש‬
‫6. התאמה ל-‪Delivery Context‬‬
‫7. שיקולים נוספים‬
‫7‬

8. ‫1. נתוני האפליקציה‬
‫2. אבטחת מידע ופרטיות‬
‫3. יידוע המשתמש ושליטתו באפליקציה‬
‫4. שימוש מוגבל במשאבים‬
‫5. חווית משתמש‬
‫6. התאמה ל-‪Delivery Context‬‬
‫7. שיקולים נוספים‬
‫8‬

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

10. ‫המעיטו את השימוש בעוגיות‬
‫מה?‬
‫נשלחות לשרת בכל בקשה‬
‫יתכן ולא יהיה פעילות במכשיר‬
‫איך?‬
‫בנו אפליקציה שיכולה להשאר פעילה גם ללא‬
‫עוגיות (למשל עם ‪)URI decoration‬‬
‫‪Image by: D Sharon Pruitt‬‬
‫01‬

11. ‫השתמשו בטכנולוגיות המתאימות לאחסון מידע‬
‫בצד הלקוח‬
‫מה?‬
‫עדיף להשתמש במנגנונים בצד לקוח לאחסון מידע,‬
‫בעיקר בכמויות גדולות.‬
‫(מועיל ב ‪)Responsiveness , start-up time‬‬
‫איך?‬
‫• 5‪offline HTML‬‬
‫• ‪BONDI‬‬
‫• ‪Opera Widgets‬‬
‫!#/‪https://mobile.twitter.com‬‬
‫11‬

12. ‫שכפלו מידע לשרת במידת הצורך‬
‫מה?‬
‫•תצוגה אחידה במכשירים שונים‬
‫•מגבה למקרה של אובן המכשיר‬
‫‪j.mp/mozoff‬‬
‫איך?‬
‫טכנולוגיות לאחסון מידע צד לקוח מספקת גם בדיקת קישוריות.‬
‫דוגמא‬
‫21‬

13. ‫1. נתוני האפליקציה‬
‫2. אבטחת מידע ופרטיות‬
‫3. יידוע המשתמש ושליטתו באפליקציה‬
‫4. שימוש מוגבל במשאבים‬
‫5. חווית משתמש‬
‫6. התאמה ל-‪Delivery Context‬‬
‫7. שיקולים נוספים‬
‫31‬

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

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. ‫1. נתוני האפליקציה‬
‫2. אבטחת מידע ופרטיות‬
‫3. יידוע המשתמש ושליטתו באפליקציה‬
‫4. שימוש מוגבל במשאבים‬
‫5. חווית משתמש‬
‫6. התאמה ל-‪Delivery Context‬‬
‫7. שיקולים נוספים‬
‫61‬

17. ‫מכשירים ניידים מכילים מידע אישי רב -‬
‫מדיה, פרטי קשר, ולוח שנה, פירוט שיחות,‬
‫מידע על המכשיר, מיקום, חיבור לרשת‬
‫הקפידו על ההמלצות הבאות אם הדפדפן‬
‫אינו מספק אותן‬
‫71‬

18. ‫הודיעו למשתמש על שימוש במידע על המכשיר‬
‫או פרטים אישיים‬
‫מה?‬
‫בעת כניסה ראשונה לשירות או בגישה ראשונה‬
‫למידע.‬
‫איך?‬
‫לרוב ל-‪ API‬יש בקשת רשות מובנת‬
‫(‪.)confirmation dialog ; recover gracefully‬‬
‫‪MapQuest.com‬‬
‫81‬

19. ‫1. נתוני האפליקציה‬
‫2. אבטחת מידע ופרטיות‬
‫3. יידוע המשתמש ושליטתו באפליקציה‬
‫4. שימוש מוגבל במשאבים‬
‫5. חווית משתמש‬
‫6. התאמה ל-‪Delivery Context‬‬
‫7. שיקולים נוספים‬
‫91‬

20. ‫אל תכבידו על משאבי המכשיר – זיכרון,‬
‫עיבוד, רוחב פס - מוגבלים יותר במכשירים‬
‫ניידים‬
‫02‬

21. ‫מזערו את גודל האפליקציה והנתונים‬
‫מה?‬
‫האפליקציה תרד יותר מהר‬
‫ותפעל טוב יותר‬
‫‪See http://compressorrater.thruhere.net‬‬
‫איך?‬
‫השתמשו ב-‪ Minification‬ו- ‪Compress content‬‬
‫12‬

22. ‫המנעו מ-‪Redirects‬‬
‫מה?‬
‫לרוב נעשה שימוש ב ‪ HTTP 3xx‬או ‪ HTML meta refresh‬להעברת מידע‬
‫)‪(e.g. account authentication‬‬
‫איך?‬
‫פשוט נסו להמנע מהן.‬
‫אם צריך יותר משתיים, אפשר להציג דף מעבר )בכדי שהמשתמש ידע‬
‫שהמידע נטען(‬
‫22‬

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

24. ‫צמצמו שימוש במקורות חיצוניים‬
‫מה?‬
‫‪style sheets, scripts, image - each of which requires an HTTP request‬‬
‫איך?‬
‫‪ CSS‬ו-‪ JavaScript‬כל אחד בקובץ אחד בלבד‬
‫או שהם ישולבו לפני שהעמוד מוגש ללקוח‬
‫42‬

25. (Sprites) ‫אחדו תמונות‬
?‫איך‬
• similar sizes and color palettes.
• That do not change often.
• use CSS positioning and
clipping.
Image by: Kriplozoik
25

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

27. ‫1. נתוני האפליקציה‬
‫2. אבטחת מידע ופרטיות‬
‫3. יידוע המשתמש ושליטתו באפליקציה‬
‫4. שימוש מוגבל במשאבים‬
‫5. חווית משתמש‬
‫6. התאמה ל-‪Delivery Context‬‬
‫7. שיקולים נוספים‬
‫72‬

28. ‫בגלל מורכבות רבה יותר בשימוש במכשירים‬
‫ניידים – חשוב לשפר את חווית המשמש‬
‫82‬

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. 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 Views
30

31. "Click-to-Call"-‫השתמש במספרי טלפון ב‬
?‫איך‬
<a href="tel:[PHONE-
NUMBER]">[PHONE-NUMBER]</a>
entered using the full international
prefix
my.springpadit.com
31
31

32. ‫‪Ensure Paragraph Text Flows‬‬
‫מה?‬
‫• מנע גלילה אופקית‬
‫• ואפשר קריאה בשינוי אוריאנטציה‬
‫איך?‬
‫לא להשתמש ביחידות מוחלטות / פיקסלים‬
‫‪Image by: curiouslee‬‬ ‫כן להשתמש ביחידות יחסיות ל- ‪containers‬‬
‫23‬
‫23‬

33. Ensure Consistency Of State Between Devices
?‫מה‬
‫הקפידו על עקיבות באפליקציה בין מכשירים‬
‫שונים‬
• Credentials
• preferences
• Data
?‫איך‬
‫שימורו על השרת מידע שאינו רלוונטי רק‬
‫למכשיר הספציפי‬
http://www.flickr.com/photos/osde-
info/4336196538/sizes/o/
33
33

34. ‫אפשרו ‪ Sign-in‬אוטומטי‬
‫מה?‬
‫קשה להזין תוכון ופרטי הזדהות‬
‫איך?‬
‫עוגיות, או ‪local storage‬‬
‫(לא לשכוח לשים לינק ל-‪)log out‬‬
‫43‬

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

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

37. ‫התאימו פונקציונליות ליכולות המכשיר‬
?‫איך‬
• Use Client-Side Capability Detection Where Necessary
• Prefer Server-Side Detection Where Possible
37
37

38. ‫אפשר למשתמש לבחור את התצוגה‬
‫מה?‬
‫אפשר למשתמש לשנות את סוג התצוגה‬
‫כברירת מחדל ספק את ה-‪ UI‬המתאים ביותר‬
‫אבל זכור את העדפות המשתמש!‬
‫83‬
‫83‬

39. ‫1. נתוני האפליקציה‬
‫2. אבטחת מידע ופרטיות‬
‫3. יידוע המשתמש ושליטתו באפליקציה‬
‫4. שימוש מוגבל במשאבים‬
‫5. חווית משתמש‬
‫6. התאמה ל-‪Delivery Context‬‬
‫7. שיקולים נוספים‬
‫93‬

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 ‫וניתנים לשינוי בעזרת‬
40
40

41. ‫כלים נוספים‬
‫14‬

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/MWABP
42

43. ‫סוף‬
‫עריכה: אייל סלע, מנהל פרוייקטים, איגוד האינטרנט הישראלי ומשרד ה-‪W3C‬הישראלי‬
‫‪www.w3c.org.il | www.isoc.org.il‬‬
‫המצגת ניתנת לשימוש באופן חופשי, ללא תשלום או תנאים מגבילים למעט ייחוס לאיגוד‬
‫האינטרנט הישראלי, כפי שמופיע ב"רישון ייחוס 5.2 ישראל (5.2 ‪")CC BY‬‬
‫מידע נוסף על רישיון השימוש: ‪creativecommons.org/licenses/by/2.5/il‬‬
‫הנ"ל אינו תקף לתמונות וחומרים מממקורות חיצוניים.‬
‫34‬