Mobile Web Best Practices Eyal Sela [Hebrew]

מפגש שני של W3CDF
תג בטוויטר : #w3cdf
מה קורה עכשיו ?? j.mp/noww3c
המפגש הבא ...
http://www.flickr.com/photos/8774945@N07/3859690596/

המפגש הבא - עיצוב וגרפיקה CSS3 , SVG ...
מתארח במכללת אפקה
22 באפריל
16:30-21:00

מפגשים נוספים ....
[ מחר ] סדנת סקירה ומשוב למסמך Additional Requirements for Bidi in HTML
[ 7/4 ] מפגש תגובה ל mobile web best practices- ( פירוט בהמשך )
[ ? ] Coding session + פרויקטי פיתוח

W3C השנה
סידרת מפגשים למפתחים
קבוצות עניין
פיתוח אפליקציה ?
סדנאות תגובה למומחים
הרצאות אורח ( שלנו , שלכם )
תמיכה בפעילות קבוצות / קהילות
שילוב מומחים בקבוצות עבודה
עוד ...
( ) אבל אין הודעות  חדש

היום
16:30 התכנסות
17:00 מבוא לשוק האינטרנט הסלולרי בישראל - מהביטים עד האגורות , מהבייטים עד הבעיטות - זאב קוצר , מנכ " ל , פסקול טכנולוגיות מתקדמות .
17:45 הצגת מסמך Mobile Web Application Best Practices של ה - W3C - - אייל סלע , מנהל פרויקטים - איגוד האינטרנט הישראלי
18:15 הפסקה
18:30 אינטרנט נייד , כאוס ותקנים – ניל אוסמן , בעלים WW3.LTD.
19:15 טכנולוגיות HTML5 בטלפונים חכמים - מיכאל וקולנקו , מומחה לטלפונים חכמים ותקשורת ניידת בפס רחב , Wave Compass ltd
20:00 הפסקה
20:15 הדגמה חיה של בניית אפליקציה לדפדפנים סלולריים מבוססי Webkit - יובל רז , מהנדס ממשק משתמש ויועץ שימושיות , אנסוף קונקט .

Mobile Web Application Best Practices אייל סלע מנהל פרויקטים , איגוד האינטרנט הישראלי ומשרד ה - W3C הישראלי

j.mp/w3cdoc

תוכנית ...
מבוא - W3C ואיגוד האינטרנט הישראלי
אודות ה - mobile web applications best practices
The Best practices

W3C
ארגון בינלאומי
כ -350 ארגונים
פורום ניטראלי ליצירת תקני רשת באינטרנט .
משימה :
להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח ארוך .

אודות ה - Mobile Web Application Best Practices

No feature has been identified as at risk
advance to Proposed Recommendation 15 April 2010 .
You are here j.mp/w3crec

סדנת סקירה ומשוב
7 באפריל
משרדי איגוד האינטרנט הישראלי ( פתח תקווה )
מ -17:00
נסו אותו מראש ....! חובה להכיר , שם רק נגיב ...
j.mp/w3crevu

j.mp/w3cmobrp

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 .

הבדל מאתר רגיל ( BP1 ) include locally executable elements of interactivity and persistent state. bit.ly/w3cmbp validator.w3.org/ mobile /
nextbus.com/webkit /

תצוגה
הזנת תוכן
רוחב פס ועלות
מטרות המשתמש
מגבלות המכשיר
מגבלות והבדלים – מכשירים ניידים לעומת שולחניים bit.ly/w3cmbp

Best practices

נתוני האפליקציה (3)
ביטחון מידע ופרטיות (1)
יידוע המשתמש ושליטתו באפליקציה (4)
שימוש מוגבל במשאבים (11)
חווית משתמש (10)
התאמה ל - Delivery Context (5)
שיקולים נוספים (1)
( סה " כ 35)

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

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

השתמשו בטכנולוגיות המתאימות לאחסון מידע בצד הלקוח
מה ?
עדיף להשתמש במנגנונים בצד לקוח לאחסון מידע , בעיקר בכמויות גדולות .
( מועיל ב start-up time , Responsiveness )
איך ?
BONDI
HTML5 - Offline - j.mp/w3coff
Opera Widgets
by Remy Sharp remysharp.com/demo/rubiks/ | -

שכפלו מידע לשרת במידת הצורך
מה ?
תצוגה אחידה במכשירים שונים
מגבה למקרה של אובן המכשיר
( לא צריך לשכפל למשל העדפות תצוגה של מכשיר ספציפי )
j.mp/mozoff
איך ?
טכנולוגיות לאחסון מידע צד לקוח מספקת גם בדיקת קישוריות .
דוגמא
j.mp/mozoff

ביטחון מידע ופרטיות – השתמשו במידע אמין והגנו על פרטיות המשתמש

Do not Execute Unescaped or Untrusted JSON data
RFC4627 for details
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.

מדיה , פרטי קשר ו - calendar , פירוט שיחות , מידע על המכשיר , מיקום (!), חיבור לרשת
הקפידו על ההמלצות הבאות אם הדפדפן אינו מספק אותן
התייחסו יפה למידע רגיש ...

הודיעו למשתמש על גישה אוטומטית לרשת
מה ?
שימוש ברשת מרוקן את הסוללה
עולה כסף ...
איך ?
אייקון המודיע על פעילות ברגע
הודיעו על שימוש רב ברשת ( בחיבור ראשון , בהרשמה או בדפי העזרה )
ספקו מידע על אופי החיבור ( כמה זמן , תדירות , סה " כ שימוש )
.

ספק אמצעים לשליטה בחיבור אוטומטי לרשת
מה ?
אפשר למשתמש למנוע חיבור אוטומטי לרשת
( כאשר זה מבוטל – הציגו הודעת חיבור מעת לעת .)
אפשרי –
אפשר למשמש לשלוט במועדי החיבור או בפעילויות אשר יכולות להתחבר .
Image by: Jeff Sonstein

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

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

זיכרון
עיבוד
רוחב פס
מוגבלים יותר במכשירים ניידים
אל תכבידו על משאבי המכשיר

מזערו את גודל האפליקציה והנתונים
מה ?
תרד יותר מהר
תפעל יותר טוב
איך ?
הקטינו CSS , HTML ו - JavaScript
(removal of white space and comments ; shorter tokens (variables, method names, selector names)
See http://compressorrater.thruhere.net

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

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

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

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

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

בגלל מורכבות רבה יותר בשימוש במכשירים ניידים – חשוב לשפר את חווית המשמש
Latency
interaction method
data consistency

להתחיל צ ' יק צ ' ק 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/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
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 l arge 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)
Image by: Dennis Bournique

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

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

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

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

Prefer Server-Side Detection Where Possible
HTTP request header: Accept; User-Agent; X-Wap-Profile
Use Client-Side Capability Detection Where Necessary
JavaScript: (e.g. if (some_api_exists) { ...). CSS Media Types / Queries
Use Device Classification to Simplify Content Adaptation Class 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 המתאים ביותר
אבל זכור את העדפות המשתמש !

Consider Use of Canvas Element or SVG For Dynamic Graphics
מה ?
canvas
מאפשר לצייר גרפיקה פשוטה באמצעות JavaScript
http://www.mozilla.com/en-US/firefox/stats/ SVG שפת XML להגדרת אלמנטים של גרפיקה וקטורית המתווספים ל - DOM , וניתנים לשינוי בעזרת JavaScript

כלים נוספים

Web Compatibility Test for Mobile Browsers - version 2 - j.mp/w3ctmb
Mobile Web Best Practices (MWBP) Flipcards j.mp/w3cfcc

הירשמו לידיעון
צרו קשר
@isociltech @eyalsela תודה  קישור זמני למצגות - j.mp/w3cmpr

http://www.w3c.org.il	40
http://eyalsela.blogspot.com	25
http://www.slideshare.net	3
http://www.directrss.co.il	1
https://www.w3c.org.il	1

Mobile Web Best Practices Eyal Sela [Hebrew]

by Israeli Internet Association technology committee on Mar 28, 2010

Accessibility

Upload Details

Usage Rights

5 Embeds 70

Statistics

Mobile Web Best Practices Eyal Sela [Hebrew] — Presentation Transcript