1

W3CDF מפגש1.

cdf3#w :בטוויטר תג2.

2

@8774945http://www.flickr.com/photos/

/3859690596/07N

מילה על הווב

3

4

Mobile Web Application Best

Practicesאייל סלע

איגוד האינטרנט הישראלי , מנהל פרויקטיםהישראלי W3C-ומשרד ה

cdoc3j.mp/w

5

...תוכנית

ואיגוד האינטרנט הישראלי 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

תודה