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 -קישור זמני למצגות