mobile web best practices eyal sela [hebrew]
Post on 16-May-2015
2.170 Views
Preview:
DESCRIPTION
TRANSCRIPT
www.w3c.org.il
www.w3.org/TR/mwabp/
1
www.w3c.org.il
www.w3.org/TR/mwabp
W3CDF של שני מפגש1.
cdf3#w :בטוויטר תג2.
c3mp/noww.j ??עכשיו קורה מה3.
...המפגש הבא4.
2
@8774945http://www.flickr.com/photos/
/3859690596/07N
www.w3c.org.il
www.w3.org/TR/mwabp
...CSS3 , SVGעיצוב וגרפיקה -המפגש הבא
3
מתארח במכללת אפקה•
באפריל 22•
•16:30-21:00
www.w3c.org.il
www.w3.org/TR/mwabp
....מפגשים נוספים
Additional Requirementsסדנת סקירה ומשוב למסמך [מחר]1.for Bidi in HTML
(פירוט בהמשך)-mobile web best practicesמפגש תגובה ל[ 7/4]2.
.3[? ]Coding session +פרויקטי פיתוח
4
www.w3c.org.il
www.w3.org/TR/mwabp
W3C השנה
סידרת מפגשים למפתחים•
קבוצות עניין•
?פיתוח אפליקציה•
סדנאות תגובה למומחים•
(שלכם, שלנו)הרצאות אורח •
קהילות/תמיכה בפעילות קבוצות•
שילוב מומחים בקבוצות עבודה•
...עוד•
5
()
אבל אין
הודעות
חדש
www.w3c.org.il
www.w3.org/TR/mwabp
היוםהתכנסות16:30
מהביטים עד -בישראל הסלולרימבוא לשוק האינטרנט 17:00
פסקול ,ל"מנכ, זאב קוצר -מהבייטים עד הבעיטות , האגורות
.טכנולוגיות מתקדמות
-של ה Mobile Web Application Best Practicesהצגת מסמך 17:45
W3C - - איגוד האינטרנט הישראלי-מנהל פרויקטים , אייל סלע
הפסקה18:15
.WW3.LTD בעלים ,אוסמןניל –כאוס ותקנים , אינטרנט נייד18:30
מומחה לטלפונים , וקולנקומיכאל -בטלפונים חכמים HTML5טכנולוגיות 19:15
Wave Compass ltd ,חכמים ותקשורת ניידת בפס רחב
הפסקה20:00
Webkitמבוססי סלולרייםהדגמה חיה של בניית אפליקציה לדפדפנים 20:15 -.קונקטאנסוף ,מהנדס ממשק משתמש ויועץ שימושיות, יובל רז
6
www.w3c.org.il
www.w3.org/TR/mwabp
7
Mobile Web Application Best
Practicesאייל סלע
איגוד האינטרנט הישראלי , מנהל פרויקטיםהישראלי W3C-ומשרד ה
www.w3c.org.il
www.w3.org/TR/mwabp
cdoc3j.mp/w
8
www.w3c.org.il
www.w3.org/TR/mwabp
...תוכנית
ואיגוד האינטרנט הישראלי W3C - מבוא•
mobile web applications best practices-ה אודות•
•The Best practices
9
www.w3c.org.il
www.w3.org/TR/mwabp
10
W3C
ארגון בינלאומי •
ארגונים 350-כ•
. פורום ניטראלי ליצירת תקני רשת באינטרנט•
:משימה•
להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח
פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה .לטווח ארוך
www.w3c.org.il
www.w3.org/TR/mwabp
Mobile Web-אודות הApplication Best
Practices
11
www.w3c.org.il
www.w3.org/TR/mwabp
No feature has been identified as at risk
advance to Proposed Recommendation 15 April 2010.
12
You are
here
crec3j.mp/w
www.w3c.org.il
www.w3.org/TR/mwabp
סדנת סקירה ומשוב
באפריל 7
(פתח תקווה)משרדי איגוד האינטרנט הישראלי
17:00-מ
...שם רק נגיב, חובה להכיר....! נסו אותו מראש
13
crevu3j.mp/w
www.w3c.org.il
www.w3.org/TR/mwabp
14
cmobrp3j.mp/w
www.w3c.org.il
www.w3.org/TR/mwabp
15
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.
www.w3c.org.il
www.w3.org/TR/mwabp
16
(BP1) הבדל מאתר רגיל
include locally executable elements of interactivity and
persistent state.
cmbp3bit.ly/w validator.w3.org/mobile/
/nextbus.com/webkit
www.w3c.org.il
www.w3.org/TR/mwabp/
17
תצוגה •
הזנת תוכן•
רוחב פס ועלות •
מטרות המשתמש•
מגבלות המכשיר•
מכשירים ניידים לעומת שולחניים–מגבלות והבדלים
cmbp3bit.ly/w
www.w3c.org.il
www.w3.org/TR/mwabp/
18
Best practices
www.w3c.org.il
www.w3.org/TR/mwabp
19
(3)נתוני האפליקציה 1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
(35כ "סה)
www.w3c.org.il
www.w3.org/TR/mwabp/
20
(3)נתוני האפליקציה 1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
www.w3c.org.il
www.w3.org/TR/mwabp
אחסון השתמשו בטכנולוגיות ושיטות מתאימות ל
נתוני האפליקציה
21
www.w3c.org.il
www.w3.org/TR/mwabp
המעיטו את השימוש בעוגיות
?מה
נשלחות לשרת בכל בקשה
יתכן ולא יהיה פעילות במכשיר
?איך
בנו אפליקציה שיכולה להשאר פעילה גם ללא עוגיות
(URI decorationלמשל עם )
22
D Sharon PruittImage by:
www.w3c.org.il
www.w3.org/TR/mwabp
השתמשו בטכנולוגיות המתאימות לאחסון מידע בצד הלקוח
?מהעדיף להשתמש במנגנונים בצד לקוח לאחסון
.בעיקר בכמויות גדולות, מידע(start-up time ,Responsivenessמועיל ב)
?איך•BONDI
•5HTML - coff3j.mp/w-Offline
•Opera Widgets
23
Remy Sharpby |remysharp.com/demo/rubiks/-
www.w3c.org.il
www.w3.org/TR/mwabp
שכפלו מידע לשרת במידת הצורך
?מהתצוגה אחידה במכשירים שונים•
מגבה למקרה של אובן המכשיר•(לא צריך לשכפל למשל העדפות תצוגה של מכשיר ספציפי)
j.mp/mozoff
?איך
טכנולוגיות לאחסון מידע צד לקוח מספקת גם
.בדיקת קישוריות
דוגמא
24
j.mp/mozoff
www.w3c.org.il
www.w3.org/TR/mwabp/
25
(3)נתוני האפליקציה 1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
www.w3c.org.il
www.w3.org/TR/mwabp
השתמשו במידע אמין והגנו –ביטחון מידע ופרטיות
על פרטיות המשתמש
26
www.w3c.org.il
www.w3.org/TR/mwabp
Do not Execute Unescaped or Untrusted
JSON data
RFC4627 for details
27
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.
www.w3c.org.il
www.w3.org/TR/mwabp/
28
(3)נתוני האפליקציה 1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
www.w3c.org.il
www.w3.org/TR/mwabp
חיבור לרשת, )!(מיקום , מידע על המכשיר, פירוט שיחות, calendar-פרטי קשר ו, מדיה
מספק אותןאינו הקפידו על ההמלצות הבאות אם הדפדפן
29
... התייחסו יפה למידע רגיש
www.w3c.org.il
www.w3.org/TR/mwabp
הודיעו למשתמש על גישה אוטומטית לרשת
?מהשימוש ברשת מרוקן את הסוללה
...עולה כסף
?איךהמודיע על פעילות ברגעאייקון •
, בחיבור ראשון)על שימוש רב ברשת הודיעו•
(בהרשמה או בדפי העזרה
, כמה זמן)אופי החיבור ספקו מידע על •
(כ שימוש"סה,תדירות
.
30
www.w3c.org.il
www.w3.org/TR/mwabp
ספק אמצעים לשליטה בחיבור אוטומטי לרשת
?מהאפשר למשתמש למנוע חיבור אוטומטי
לרשת.(הציגו הודעת חיבור מעת לעת–כאשר זה מבוטל )
–אפשרי
אפשר למשמש לשלוט במועדי החיבור או בפעילויות אשר יכולות
.להתחבר
31
Jeff SonsteinImage by:
www.w3c.org.il
www.w3.org/TR/mwabp
הודיעו למשתמש על שימוש במידע על
המכשיר או פרטים אישיים
?מהבעת כניסה ראשונה לשירות או בגישה ראשונה
.למידע
?איך
יש בקשת רשות מובנת API-לרוב ל(recover gracefully ;confirmation dialog .)
32
MapQuest.com
www.w3c.org.il
www.w3.org/TR/mwabp
אוטומטי Sign-inאפשרו
?מה....כי יותר קשה להזין תוכן
?איך local storageאו , בעוגיות
(log out-לא לשכוח לשים לינק ל)
33
www.w3c.org.il
www.w3.org/TR/mwabp/
34
(3) נתוני האפליקציה1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
www.w3c.org.il
www.w3.org/TR/mwabp
זיכרון
עיבוד
רוחב פס
מוגבלים יותר במכשירים ניידים
35
אל תכבידו על משאבי המכשיר
www.w3c.org.il
www.w3.org/TR/mwabp
מזערו את גודל האפליקציה והנתונים
?מהתרד יותר מהר
תפעל יותר טוב
?איךJavaScript-ו CSS ,HTMLהקטינו
(removal of white space and comments; shorter tokens (variables, method names, selector names)
36
See http://compressorrater.thruhere.net
www.w3c.org.il
www.w3.org/TR/mwabp
Redirects-המנעו מ
?מה HTML metaאו HTTP 3xxלרוב נעשה שימוש ב
refresh להעברת מידע(e.g. account authentication)
?איך.מהן להמנעפשוט נסו
אפשר להציג דף מעבר , אם צריך יותר משתיים)'טעון זה'שבכדי שהמשתמש ידע (
37
www.w3c.org.il
www.w3.org/TR/mwabp
Optimize Network Requests
?מה מועטותלשרת אך גדולותעדיף לבצע בקשות
(מאשר הרבה בקשות קטנות)יותר
?איךבקשות קיבוץ•
בקשות תעדוף•
רמת הקישוריותפעילות בהתאם ל•
38
www.w3c.org.il
www.w3.org/TR/mwabp
צמצמו שימוש במקורות חיצוניים
?מהstyle sheets, scripts, image - each of which requires an HTTP request
?איךCSS ו-JavaScript כל אחד בקובץ אחד בלבד
OR
או שהם ישולבו לפני שהעמוד מוגש ללקוח
39
www.w3c.org.il
www.w3.org/TR/mwabp
(Sprites)אחד תמונות
?איך• similar sizes and color palettes.
• That do not change often.
• use CSS positioning and clipping.
דוגמאwww.yahoo.com
40
Image by: Kriplozoik
www.w3c.org.il
www.w3.org/TR/mwabp
Keep DOM Size Reasonable
?איך paginationלמשל בעזרת
41
www.w3c.org.il
www.w3.org/TR/mwabp/
42
(3)נתוני האפליקציה 1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
www.w3c.org.il
www.w3.org/TR/mwabp
בגלל מורכבות רבה יותר בשימוש במכשירים ניידים חשוב לשפר את חווית המשמש –
• Latency
• interaction method
• data consistency
43
www.w3c.org.il
www.w3.org/TR/mwabp
ק'יק צ'להתחיל צ
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.
44
http://www.flickr.com/photos/66475767@N00/4333416050/
www.w3c.org.il
www.w3.org/TR/mwabp
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
45
MapQuest.com
www.w3c.org.il
www.w3.org/TR/mwabp
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)
46
Image by: Dennis Bournique
www.w3c.org.il
www.w3.org/TR/mwabp
"Click-to-Call"-השתמש במספרי טלפון ב
איך
<a href="tel:[PHONE-NUMBER]">[PHONE-NUMBER]</a>
entered using the full international prefix
RFC3966
47
my.springpadit.com
www.w3c.org.il
www.w3.org/TR/mwabp
Ensure Paragraph Text Flows
?מה
מנע גלילה אנכית•
ואפשר קריאה בשינוי אוריאנטציה•
?איך
פיקסלים/ להשתמש ביחידות מוחלטות לא
- containersלהשתמש ביחידות יחסיות לכן
48
curiousleeImage by:
www.w3c.org.il
www.w3.org/TR/mwabp
Ensure Consistency Of State Between
Devices
?מההקפידו על עקיבות באפליקציה בין מכשירים
שונים
• Credentials
• preferences
• Data
?איךשימורו על השרת מידע שאינו רלוונטי רק
למכשיר הספציפי
49
/sizes/o/4336196538info/-http://www.flickr.com/photos/osde
www.w3c.org.il
www.w3.org/TR/mwabp/
50
(3) נתוני האפליקציה1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
www.w3c.org.il
www.w3.org/TR/mwabp
51
שונים Delivery Context-התאימו להתאמת . )והסתגלות להן( כגון יכולות המכשיר)צרו אפליקציה בעלת יכולת זיהוי ההקשר
...(מבנה עמוד, ניווט, תוכן
www.w3c.org.il
www.w3.org/TR/mwabp
Prefer Server-Side Detection Where
PossibleHTTP request header: Accept; User-Agent; X-Wap-Profile
52
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.
www.w3c.org.il
www.w3.org/TR/mwabp
אפשר למשתמש לבחור את התצוגה
?מה
אפשר למשתמש לשנות את
סוג התצוגה
UI-כברירת מחדל ספק את ה
המתאים ביותר
אבל זכור את העדפות !המשתמש
53
www.w3c.org.il
www.w3.org/TR/mwabp/
54
(3)נתוני האפליקציה 1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
www.w3c.org.il
www.w3.org/TR/mwabp
Consider Use of Canvas Element or
SVG For Dynamic Graphics
?מהcanvas
מאפשר לצייר גרפיקה פשוטה
JavaScriptבאמצעות
55
http://www.mozilla.com/en-US/firefox/stats/
SVGוניתנים לשינוי בעזרת , DOM-המתווספים ל וקטוריתלהגדרת אלמנטים של גרפיקה XMLשפת
JavaScript
www.w3c.org.il
www.w3.org/TR/mwabp
כלים נוספים
56
www.w3c.org.il
www.w3.org/TR/mwabp
Web Compatibility Test for Mobile Browsers - version 2 -j.mp/w3ctmb
Mobile Web Best Practices (MWBP) Flipcards j.mp/w3cfcc
57
www.w3c.org.il
www.w3.org/TR/mwabp
הירשמו לידיעון•
צרו קשר•
58
@isociltech @eyalsela
תודה
cmpr3j.mp/w -קישור זמני למצגות
top related