html5, ווב נייד ותקנים פתוחים ברשת

HTML5 , ווב נייד

ותקנים פתוחים

ברשת

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

1

1/3/2011

file:///H:/Erase/mob

ileOK.png

תוכנית

•MOBILE

•Native vs web

•HTML5 ושות'

יכולות ואפליקציות•

מי משתמש•

2

איגוד האינטרנט הישראלישלוחת האיגוד הבינלאומי

עמותה ללא מטרת רווח

פועל לקידום האינטרנט והטמעתו בישראל כתשתית

חברתית ועסקית, חינוכית, מחקרית, טכנולוגית

3

4

W3C

ארגון בינלאומי•

ארגונים 350-כ•

פורום ניטראלי ליצירת תקני הווב•

:משימה•

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

פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח

.ארוך

האינטרנט

5

(web)ווב ת) ת (המארג)(המרש

MOBILE

6

Mobile vs deskop internt user

projection 2007-2015

j.mp/dsafaa 7Source: thenextweb.com

26צמיחה של פי : Ciscoמחקר

בתעבורת הנתונים ברשת הסלולרית

2015עד

http://bit.ly/eP3OWQ

ב "יירכשו בארה 2011 -ב: גרטנר

יותר טלפונים חכמים מכל מוצר

צריכה אלקטרוני אחר

http://bit.ly/hZK3Gm

In 2015, tablets will generate

as much traffic as the entire

global mobile network of

2010…

http://bit.ly/g2Twdf

The average amount of traffic

per smartphone doubled in

2010

http://bit.ly/g2Twdf

mobile's share of web consumption

?איך לחשוב על זה(למסךשוניםגדלים)שונים סוגים1.

...(מצלמה ,מצפן ,מיקום (סנסורים2.

(תמונה ,קולי ,שונהבצורהקלטהזנת)אחר קלט3.

(עומס/מטוס ,ניתוק/עלות ,פסרוחב) חיבוריות4.

.ממוקדמשתמש5.

.ובעיותמגבלות6.

.פלטפורמותהרבה7.

.8Native vs web

סוגי מכשירים ניידים•Iphone/android/nokia/win

•Laptop

•Tablets

• Mobile phone / PDA

•(Wearable computer)

סנסורים

GPS,מיקרופון,מצלמה,כיוון...

קלט

, מגע, אוטומטי , ...מהסנסורים

Google GogglesUse pictures to search the web

googlemobile.blogspot.com17

foursquare.com18

Foursquare :דוגמא

Augmented Realitycombine a view of the physical world with information

70il3j.mp/w19

AR - מקל על תפעול המדפסת

12j.mp/adfeg20

DBpedia Mobileפריטים מוויקיפדיה

על מפה

:טכנולוגיות

סמנטי-

מובייל-

זיהוי מיקום-

21

beckr.org/DBpediaMobile

26/02/11 16:00by: Amber Case

26/02/11 16:00by: Amber Case

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)

24

Image by: Dennis Bournique

חיבוריות

(עומס/מטוס, ניתוק/עלות, רוחב פס)

אחסון מידע מקומי וסנכרון

Minimize Perceived Latency

?איך

• IncrementalRendering: 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

27

MapQuest.com

משתמש ממוקד

• Immediate

• goal-directed

• specific pieces of information

• relevant to context.

• less interested in lengthy documents or in browsing.

egXfIxbit.ly/

Eg.

schedules for a journey they are

currently undertaking.

מגבלות ובעיות

• keyboard and the screen

• limited processing power

• processing uses more power as does communication

• limited memory

• …

egXfIxbit.ly/

זיכרון

עיבוד

רוחב פס

LatencyInteraction method

Data consistency---

Caching

31

אל תכבידו על משאבי המכשיר

ק'יק צ'להתחיל צ

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.

32

http://www.flickr.com/photos/66475767@N00/4333416050/

כמות הפלטפורמות

Smartphone market share - Q1 2010

bit.ly/h755vK 34

(Q1 ’10:

23% of mobile

consumers have

a smartphone)

35

אז צריך לבנות אתר נפרד לכל סוג

?מכשיר

.לא

אפשר לבנות חלופות ווביות

Native vs web

37

www.isoc.org.il

www.w3c.org.il

eyal@isoc.org.il38

Web ApplicationWeb page(s) that provide an "application-like" experience

within a Web browser.

www.isoc.org.il

www.w3c.org.il

eyal@isoc.org.il

(BP1)הבדל מאתר רגיל

include locally executable elements of interactivity and

persistent state.

:למשל

cmbp3bit.ly/wvalidator.w3.org/mobile/

resistible.co.uk/public/eres/-e xtra/touch/1bbc.co.uk/

Kivaדוגמא

10cmo3j.mp/w

40

www.isoc.org.il

www.w3c.org.il

eyal@isoc.org.il

אפליקציה –כשאי אפשר אפליקציה במכשיר

וובית

80il3j.mp/w41

APIים חדשים לדפדפן

קיימים

(geolocation API)מיקום •

בעבודה

•API לרשימת אנשי קשר

•API ליומן

•API למדיה

•API להודעותSMS, MMS, email) )

•API למידע מערכת

•API לגלרייה

•DeviceOrientation

הכירו אתMobile Web Application Best

Practices Cards•j.mp/thecards

Use Device Classification to

Simplify Content Adaptation

45

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.

frameworks

46

Mobile web application frameworks

• Sencha Touch

• jQuery Mobile

Into native

• PhoneGap

• Titanium

47

244j.mp/mob

Jquery mobile phone/browser support

jquerymobile.com/gbs/ 48

כנס שנתי

isoc.org.il/conf2011/mobile49

HTML5

'ושות50

HTML4HTML5

אפליקציותדפים

51

?איך

אלמנטים חדשים•

הסרת ושינוי אלמנטים•

ממשקי תכנות חדשים•

סוגי תוכן חדשים•

52

And it’s all free!

The Open web platform

caniuse.com 54

תמיכת דפדפנים

55

היצרנים מתחרים על רמת יישום התקן

בדפדפנים

56

יכולות ואפליקציות

57

www.isoc.org.il

www.w3c.org.il

eyal@isoc.org.il

Video element Audio element

videojs.com58

Offline web applications

59

www.isoc.org.il

www.w3c.org.il

eyal@isoc.org.il

(geolocation)זיהוי מיקום

m.radiustalk.com60

www.isoc.org.il

www.w3c.org.il

eyal@isoc.org.il

Drag and drop, files

61

Web Notifications

62

File API

63

contenteditable attribute

עורך טקסט עשיר

aloha-editor.com

64

זמן אמת

Notifications

איתור מיקום

•streamie.org 65

Streamie

Web Sockets

Web Workers

66

SVG

67

canvas

68

Timeline Reader

html5.labs.ap.org 69

לטאבלטים

Canvas

אלמנטים חדשים

תרשימים וגרפיקה עשירה

Canvas

offline

70

gregmurray.org/fish

CSS

71

www.isoc.org.il

www.w3c.org.il

eyal@isoc.org.il

touchsolitaire.mobi/app

j.mp/w3cmo15

touchstyle.mobi/app/ 73

התאמה לגודל מסך•

iswc.mobi/2010 74

מי משתמש

75

•<video>

76

Video

Geolocation

Web Storage

WebSockets

77January 26, 2011: Facebook to empower its massive mobile platform with HTML5

• Drag and drop

78

79

...מסכיםעוד

TV

Build once deploy

everywhere

?לעשות עכשיומה

82

HTML5למדו •

יישמו בהדרגתיות•

השתמשו בהגדרות החדשות•

שלבו את הארכיטקטורה•

התקן נמצא בתהליך עבודה–זכרו •

83

אייל סלע

eyal@isoc.org.il

:המצגת

84

תודה