–יחידת לימוד תכנון ופיתוח אפליקציות ווב
למכשירים ניידים
W3C-על פי מסמך ה"Mobile Web Application Best Practices "
1
ללא תשלום או תנאים מגבילים למעט ייחוס לאיגוד , המצגת ניתנת לשימוש באופן חופשי
("CC BY 2.5)ישראל 2.5רישון ייחוס "כפי שמופיע ב, האינטרנט הישראלי /il/5.2creativecommons.org/licenses/by: מידע נוסף על רישיון השימוש
.תמונות וחומרים מממקורות חיצונייםל אינו תקף ל"הנ
2
-W3C - Mobile Web Application Best Practicesתקן •
2010בדצמבר 14-פורסם ב
. 2012יחידת לימוד זו הוכנה במהלך ספטמבר •
היחידה כוללת חלקים רלוונטיים מהתקן וכן הערות למרצה • .המבוססות על התקן, בתחתית כל שקופית
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
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.
5
מכשירים ניידים לעומת –מגבלות והבדלים
שולחניים
bit.ly/w3cmbp
תצוגה •
הזנת תוכן •
רוחב פס ועלות •
מטרות המשתמש •
מגבלות המכשיר •
6
Best practices
7
נתוני האפליקציה1.
אבטחת מידע ופרטיות2.
יידוע המשתמש ושליטתו באפליקציה3.
שימוש מוגבל במשאבים4.
חווית משתמש5.
Delivery Context-התאמה ל6.
שיקולים נוספים7.
8
נתוני האפליקציה1.
אבטחת מידע ופרטיות2.
יידוע המשתמש ושליטתו באפליקציה3.
שימוש מוגבל במשאבים4.
חווית משתמש5.
Delivery Context-התאמה ל6.
שיקולים נוספים7.
9
השתמשו בטכנולוגיות ושיטות מתאימות
לאחסון נתוני האפליקציה
10
?מה
נשלחות לשרת בכל בקשה
יתכן ולא יהיה פעילות במכשיר
?איך
בנו אפליקציה שיכולה להשאר פעילה גם ללא (URI decorationלמשל עם )עוגיות
המעיטו את השימוש בעוגיות
Image by: D Sharon Pruitt
11
?מה
, עדיף להשתמש במנגנונים בצד לקוח לאחסון מידע
.בעיקר בכמויות גדולות
(start-up time ,Responsivenessמועיל ב)
?איך• offline HTML5 •BONDI •Opera Widgets
השתמשו בטכנולוגיות המתאימות לאחסון מידע
בצד הלקוח
https://mobile.twitter.com/#!
12
שכפלו מידע לשרת במידת הצורך
?מה
תצוגה אחידה במכשירים שונים•
מגבה למקרה של אובן המכשיר•
?איך
.טכנולוגיות לאחסון מידע צד לקוח מספקת גם בדיקת קישוריות
דוגמא
j.mp/mozoff
13
נתוני האפליקציה1.
אבטחת מידע ופרטיות2.
יידוע המשתמש ושליטתו באפליקציה3.
שימוש מוגבל במשאבים4.
חווית משתמש5.
Delivery Context-התאמה ל6.
שיקולים נוספים7.
14
השתמשו במידע –אבטחת מידע ופרטיות
אמין והגנו על פרטיות המשתמש
15
Do not Execute Unescaped or Untrusted JSON data
Image by: D Sharon Pruitt
?מה
direct execution of a
datafeed that contains
unescaped user-
generated data = security
risk
?איך
A JSON parser will
accept only valid JSON,
preventing potentially
malicious code from
running.
16
נתוני האפליקציה1.
אבטחת מידע ופרטיות2.
יידוע המשתמש ושליטתו באפליקציה3.
שימוש מוגבל במשאבים4.
חווית משתמש5.
Delivery Context-התאמה ל6.
שיקולים נוספים7.
17
-מכשירים ניידים מכילים מידע אישי רב
, פירוט שיחות, ולוח שנה, פרטי קשר, מדיה
חיבור לרשת, מיקום, מידע על המכשיר
הקפידו על ההמלצות הבאות אם הדפדפן
אינו מספק אותן
18
הודיעו למשתמש על שימוש במידע על המכשיר או פרטים אישיים
?מה
בעת כניסה ראשונה לשירות או בגישה ראשונה
.למידע
?איך
יש בקשת רשות מובנת API-לרוב ל
(recover gracefully ;confirmation dialog .)
MapQuest.com
19
נתוני האפליקציה1.
אבטחת מידע ופרטיות2.
יידוע המשתמש ושליטתו באפליקציה3.
שימוש מוגבל במשאבים4.
חווית משתמש5.
Delivery Context-התאמה ל6.
שיקולים נוספים7.
20
, זיכרון – אל תכבידו על משאבי המכשיר
מוגבלים יותר במכשירים -רוחב פס , עיבוד
ניידים
21
מזערו את גודל האפליקציה והנתונים
?מה
האפליקציה תרד יותר מהר
ותפעל טוב יותר
?איך
Compress content-ו Minification-השתמשו ב
See http://compressorrater.thruhere.net
22
Redirects-המנעו מ
?מה
להעברת מידע HTML meta refresh או HTTP 3xxלרוב נעשה שימוש ב
(e.g. account authentication)
?איך
.מהן להמנעפשוט נסו
בכדי שהמשתמש ידע (אפשר להציג דף מעבר , אם צריך יותר משתיים
)שהמידע נטען
23
Optimize Network Requests
?מה
מאשר הרבה בקשות )יותר מועטותלשרת אך גדולותעדיף לבצע בקשות (קטנות
?איך
בקשות קיבוץ•
בקשות תעדוף•
רמת הקישוריותפעילות בהתאם ל•
24
צמצמו שימוש במקורות חיצוניים
?מה
style sheets, scripts, image - each of which requires an HTTP request
?איך
CSS ו-JavaScript כל אחד בקובץ אחד בלבד
או שהם ישולבו לפני שהעמוד מוגש ללקוח
25
?איך
• similar sizes and color palettes.
• That do not change often.
• use CSS positioning and clipping.
(Sprites)אחדו תמונות
Image by: Kriplozoik
26
Keep DOM Size Reasonable
?איך
paginationלמשל בעזרת
27
נתוני האפליקציה1.
אבטחת מידע ופרטיות2.
יידוע המשתמש ושליטתו באפליקציה3.
שימוש מוגבל במשאבים4.
חווית משתמש5.
Delivery Context-התאמה ל6.
שיקולים נוספים7.
28
בגלל מורכבות רבה יותר בשימוש במכשירים
חשוב לשפר את חווית המשמש –ניידים
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 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/4333416
050/
30
?איך
• 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 state or show different views)
• Preload Probable Next Views
Minimize Perceived Latency
MapQuest.com
31
"Click-to-Call"-השתמש במספרי טלפון ב
?איך
<a href="tel:[PHONE-NUMBER]">[PHONE-NUMBER]</a>
entered using the full international prefix
31
my.springpadit.com
32
Ensure Paragraph Text Flows
?מה
גלילה אופקיתמנע •
ואפשר קריאה בשינוי אוריאנטציה•
?איך
פיקסלים/ להשתמש ביחידות מוחלטות לא
- containersלהשתמש ביחידות יחסיות לכן
32
Image by: curiouslee
33
Ensure Consistency Of State Between Devices
?מה
הקפידו על עקיבות באפליקציה בין מכשירים
שונים
• Credentials
• preferences
• Data
?איך
שימורו על השרת מידע שאינו רלוונטי רק למכשיר הספציפי
33
http://www.flickr.com/photos/osde-
info/4336196538/sizes/o/
34
אוטומטי Sign-inאפשרו
?מה
קשה להזין תוכון ופרטי הזדהות
?איך
local storageאו , עוגיות
(log out-לא לשכוח לשים לינק ל)
35
נתוני האפליקציה1.
אבטחת מידע ופרטיות2.
יידוע המשתמש ושליטתו באפליקציה3.
שימוש מוגבל במשאבים4.
חווית משתמש5.
Delivery Context-התאמה ל6.
שיקולים נוספים7.
36
.שונים Delivery Context-התאימו ל
צרו אפליקציה בעלת יכולת זיהוי ההקשר
. והסתגלות להן( כגון יכולות המכשיר)
...(מבנה עמוד, ניווט, התאמת תוכן)
37
התאימו פונקציונליות ליכולות המכשיר
?איך
• Use Client-Side Capability Detection Where Necessary
• Prefer Server-Side Detection Where Possible
37
38
אפשר למשתמש לבחור את התצוגה
?מה
אפשר למשתמש לשנות את סוג התצוגה
המתאים ביותר UI-כברירת מחדל ספק את ה
!אבל זכור את העדפות המשתמש
38
39
נתוני האפליקציה1.
מידע ופרטיותאבטחת 2.
יידוע המשתמש ושליטתו באפליקציה3.
שימוש מוגבל במשאבים4.
חווית משתמש5.
Delivery Context-התאמה ל6.
שיקולים נוספים7.
40
Consider Use of Canvas Element or SVG For Dynamic Graphics
?מה
canvas
מאפשר לצייר גרפיקה פשוטה JavaScriptבאמצעות
SVG
להגדרת אלמנטים של XMLשפת
, DOM-גרפיקה וקטורית המתווספים ל
JavaScriptוניתנים לשינוי בעזרת
40
http://www.mozilla.com/en-US/firefox/stats/
41
כלים נוספים
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
43
ללא תשלום או תנאים מגבילים למעט ייחוס לאיגוד , המצגת ניתנת לשימוש באופן חופשי
("CC BY 2.5)ישראל 2.5רישון ייחוס "כפי שמופיע ב, האינטרנט הישראלי /il/5.2creativecommons.org/licenses/by: מידע נוסף על רישיון השימוש
.תמונות וחומרים מממקורות חיצונייםל אינו תקף ל"הנ
סוף הישראליW3C-איגוד האינטרנט הישראלי ומשרד ה, מנהל פרוייקטים, אייל סלע: עריכה
www.isoc.org.il| c.org.il3www.w
Recommended