View
1.713
Download
1
Embed Size (px)
DESCRIPTION
Mobile web best practices eyal sela [hebrew]
Citation preview
1
W3CDF מפגש1.
cdf3#w :בטוויטר תג2.
2
@8774945http://www.flickr.com/photos/
/3859690596/07N
מילה על הווב
3
4
Mobile Web Application Best
Practicesאייל סלע
איגוד האינטרנט הישראלי , מנהל פרויקטיםהישראלי W3C-ומשרד ה
...תוכנית
ואיגוד האינטרנט הישראלי W3C - מבוא•
mobile web applications best practices-ה אודות•
•The Best practices
6
איגוד האינטרנט הישראלישלוחת האיגוד הבינלאומי
עמותה ללא מטרת רווח
פועל לקידום האינטרנט והטמעתו בישראל כתשתית
חברתית ועסקית, חינוכית, מחקרית, טכנולוגית
7
8
W3C
ארגון בינלאומי •
ארגונים 350-כ•
. פורום ניטראלי ליצירת תקני רשת באינטרנט•
:משימה•
להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח
פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה .לטווח ארוך
Mobile Web-אודות הApplication Best
Practices
9
10
Web Applicationa 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.
11
(BP1) הבדל מאתר רגיל
include locally executable elements of interactivity and
persistent state.
cmbp3bit.ly/w validator.w3.org/mobile/
/nextbus.com/webkit
12
תצוגה •
הזנת תוכן•
רוחב פס ועלות •
מטרות המשתמש•
מגבלות המכשיר•
מכשירים ניידים לעומת שולחניים–מגבלות והבדלים
cmbp3bit.ly/w
13
Best practices
14
(3)נתוני האפליקציה 1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
(35כ "סה)
15
(3)נתוני האפליקציה 1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
אחסון השתמשו בטכנולוגיות ושיטות מתאימות ל
נתוני האפליקציה
16
המעיטו את השימוש בעוגיות
?מה
נשלחות לשרת בכל בקשה
יתכן ולא יהיה פעילות במכשיר
?איך
בנו אפליקציה שיכולה להשאר פעילה גם ללא עוגיות
(URI decorationלמשל עם )
17
D Sharon PruittImage by:
השתמשו בטכנולוגיות המתאימות לאחסון מידע בצד הלקוח
?מהעדיף להשתמש במנגנונים בצד לקוח לאחסון
.בעיקר בכמויות גדולות, מידע(start-up time ,Responsivenessמועיל ב)
?איך•BONDI
•5HTML - coff3j.mp/w-Offline
•Opera Widgets
18
Remy Sharpby |remysharp.com/demo/rubiks/-
שכפלו מידע לשרת במידת הצורך
?מהתצוגה אחידה במכשירים שונים•
מגבה למקרה של אובן המכשיר•(לא צריך לשכפל למשל העדפות תצוגה של מכשיר ספציפי)
j.mp/mozoff
?איך
טכנולוגיות לאחסון מידע צד לקוח מספקת גם
.בדיקת קישוריות
דוגמא
19
j.mp/mozoff
20
(3)נתוני האפליקציה 1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
השתמשו במידע אמין והגנו –ביטחון מידע ופרטיות
על פרטיות המשתמש
21
Do not Execute Unescaped or Untrusted
JSON data
RFC4627 for details
22
D Sharon PruittImage by:
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.
23
(3)נתוני האפליקציה 1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
חיבור לרשת, )!(מיקום , מידע על המכשיר, פירוט שיחות, calendar-פרטי קשר ו, מדיה
מספק אותןאינו הקפידו על ההמלצות הבאות אם הדפדפן
24
... התייחסו יפה למידע רגיש
הודיעו למשתמש על שימוש במידע על
המכשיר או פרטים אישיים
?מהבעת כניסה ראשונה לשירות או בגישה ראשונה
.למידע
?איך
יש בקשת רשות מובנת API-לרוב ל(recover gracefully ;confirmation dialog .)
25
MapQuest.com
אוטומטי Sign-inאפשרו
?מה....כי יותר קשה להזין תוכן
?איך local storageאו , בעוגיות
(log out-לא לשכוח לשים לינק ל)
26
27
(3) נתוני האפליקציה1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
זיכרון
עיבוד
רוחב פס
מוגבלים יותר במכשירים ניידים
28
אל תכבידו על משאבי המכשיר
מזערו את גודל האפליקציה והנתונים
?מהתרד יותר מהר
תפעל יותר טוב
?איךJavaScript-ו CSS ,HTMLהקטינו
(removal of white space and comments; shorter tokens (variables, method names, selector names)
29
See http://compressorrater.thruhere.net
Redirects-המנעו מ
?מה HTML metaאו HTTP 3xxלרוב נעשה שימוש ב
refresh להעברת מידע(e.g. account authentication)
?איך.מהן להמנעפשוט נסו
אפשר להציג דף מעבר , אם צריך יותר משתיים)'טעון זה'שבכדי שהמשתמש ידע (
30
Optimize Network Requests
?מה מועטותלשרת אך גדולותעדיף לבצע בקשות
(מאשר הרבה בקשות קטנות)יותר
?איךבקשות קיבוץ•
בקשות תעדוף•
רמת הקישוריותפעילות בהתאם ל•
31
צמצמו שימוש במקורות חיצוניים
?מהstyle sheets, scripts, image - each of which requires an HTTP request
?איךCSS ו-JavaScript כל אחד בקובץ אחד בלבד
OR
או שהם ישולבו לפני שהעמוד מוגש ללקוח
32
(Sprites)אחד תמונות
?איך• similar sizes and color palettes.
• That do not change often.
• use CSS positioning and clipping.
דוגמאwww.yahoo.com
33
Image by: Kriplozoik
Keep DOM Size Reasonable
?איך paginationלמשל בעזרת
34
35
(3)נתוני האפליקציה 1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
בגלל מורכבות רבה יותר בשימוש במכשירים ניידים חשוב לשפר את חווית המשמש –
• Latency
• interaction method
• data consistency
36
ק'יק צ'להתחיל צ
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.
37
http://www.flickr.com/photos/66475767@N00/4333416050/
Minimize Perceived Latency
?איך
• Incremental Rendering: Place JavaScript at the
bottom of the page+ configure the page so that any useful 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
38
MapQuest.com
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
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)
39
Image by: Dennis Bournique
"Click-to-Call"-השתמש במספרי טלפון ב
איך
<a href="tel:[PHONE-NUMBER]">[PHONE-NUMBER]</a>
entered using the full international prefix
RFC3966
40
my.springpadit.com
Ensure Paragraph Text Flows
?מה
מנע גלילה אנכית•
ואפשר קריאה בשינוי אוריאנטציה•
?איך
פיקסלים/ להשתמש ביחידות מוחלטות לא
- containersלהשתמש ביחידות יחסיות לכן
41
curiousleeImage by:
Ensure Consistency Of State Between
Devices
?מההקפידו על עקיבות באפליקציה בין מכשירים
שונים
• Credentials
• preferences
• Data
?איךשימורו על השרת מידע שאינו רלוונטי רק
למכשיר הספציפי
42
/sizes/o/4336196538info/-http://www.flickr.com/photos/osde
43
(3) נתוני האפליקציה1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
44
שונים Delivery Context-התאימו להתאמת . )והסתגלות להן( כגון יכולות המכשיר)צרו אפליקציה בעלת יכולת זיהוי ההקשר
...(מבנה עמוד, ניווט, תוכן
Prefer Server-Side Detection Where
PossibleHTTP request header: Accept; User-Agent; X-Wap-Profile
45
Use Client-Side Capability Detection
Where NecessaryJavaScript: (e.g. if (some_api_exists) { ...). CSS Media Types / Queries
Use Device Classification to Simplify
Content AdaptationClass 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.
אפשר למשתמש לבחור את התצוגה
?מה
אפשר למשתמש לשנות את
סוג התצוגה
UI-כברירת מחדל ספק את ה
המתאים ביותר
אבל זכור את העדפות !המשתמש
46
47
(3)נתוני האפליקציה 1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
48
(published as advisory notes)
Consider Use of Canvas Element or
SVG For Dynamic Graphics
?מהcanvas
מאפשר לצייר גרפיקה פשוטה
JavaScriptבאמצעות
49
http://www.mozilla.com/en-US/firefox/stats/
SVGוניתנים לשינוי בעזרת , DOM-המתווספים ל וקטוריתלהגדרת אלמנטים של גרפיקה XMLשפת
JavaScript
הודיעו למשתמש על גישה אוטומטית לרשת
?מהשימוש ברשת מרוקן את הסוללה
...עולה כסף
?איךהמודיע על פעילות ברגעאייקון •
, בחיבור ראשון)על שימוש רב ברשת הודיעו•
(בהרשמה או בדפי העזרה
, כמה זמן)אופי החיבור ספקו מידע על •
(כ שימוש"סה,תדירות
.
50
ספק אמצעים לשליטה בחיבור אוטומטי לרשת
?מהאפשר למשתמש למנוע חיבור אוטומטי
לרשת.(הציגו הודעת חיבור מעת לעת–כאשר זה מבוטל )
–אפשרי
אפשר למשמש לשלוט במועדי החיבור או בפעילויות אשר יכולות
.להתחבר
51
Jeff SonsteinImage by:
כלים נוספים
52
Web Compatibility Test for Mobile Browsers - version 2 -j.mp/w3ctmb
Mobile Web Best Practices (MWBP) Flipcardsj.mp/w3cfcc
53
/MWABP/09/2010.org/3w
Mobile Web Application Best Practices Cards
הירשמו לידיעון•
צרו קשר•
54
@isociltech @eyalsela
תודה