HTML5 , ווב נייד ותקנים

פתוחים ברשת

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

ירושלים( מכון לב)ס הגבוה לטכנולוגיה "ביה

28/12/2011

2

תוכנית

MOBILE

•Native vs web

HTML5 ושות'

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

משתמשמי •

...יותר רחוק

3

איגוד האינטרנט הישראלי

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

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

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

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

4

W3C

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

ארגונים 350-כ

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

:משימה

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

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

.ארוך

5

A NEW WAVE TRANSFORMATIONS

of

Just as the Web

has transformed

everything…

…It will

transform

everything again

6 bit.ly/g63C9F

7

(web) ווב האינטרנט

ת) ת (המארג) (המרש

8

MOBILE

9

3D Explorer

j.mp/w3ca2

3http://j.mp/uAjvj

10

Mobile vs deskop internt user projection 2007-2015

j.mp/dsafaa Source: thenextweb.com

11

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

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

2015עד הסלולרית

http://bit.ly/eP3OWQ

12

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

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

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

http://bit.ly/hZK3Gm

13

In 2015, tablets will generate as much traffic as the entire global

mobile network of 2010…

http://bit.ly/g2Twdf

14

he average amount of traffic per smartphone doubled in 2010

http://bit.ly/g2Twdf

15

?על זה לחשובאיך

(למסך שונים גדלים)שונים סוגים1.

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

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

חיבוריות4.

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

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

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

.8Native vs web

16

ניידים מכשיריםסוגי

Smartphone

Laptop

Tablets

…

17

סנסורים

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

18

קלט

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

19

Google Goggles Use pictures to search the web

googlemobile.blogspot.com

20

קלט קולי

Shazam SoundHound

21

Augmented Reality combine a view of the physical world with information

70il3j.mp/w

22

Augmented Reality

12j.mp/adfeg

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

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

25

Design for Multiple Interaction Methods

סוגי אינטראקציה עיקרייםשלושה

• Focus Based

• Pointer Based

• Touch Based

25

26

חיבוריות

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

27

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

28

Minimize Perceived Latency

?איך

• Incremental Rendering

• Keep the User Informed of Activity

(progress bars)

• Avoid Page Reloads

• Preload Probable Next Views

28

MapQuest.com

29

משתמש ממוקד

• Immediate

• goal-directed

• specific pieces of information

• relevant to context

• less interested in lengthy documents or in browsing

bit.ly/egXfIx

30

Eg. schedules for a journey they are

currently undertaking.

31

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

• Input

• processing power

• Battery

• Small screen

• …

egXfIxbit.ly/

32

זיכרון

עיבוד

רוחב פסLatency

Interaction method Data consistency

Caching

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

33

ק'יק צ'להתחיל צ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.

33

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

34

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

35

Smartphone sales - 2011 Q2

Source: http://en.wikipedia.org/wiki/File:Smartphone_share_current.png

35

36 36

37

?סוג מכשיראפליקציה לכל אז צריך לבנות

.לא

ווביתאפליקציה אפשר לבנות

38

Native vs web

38

39 39

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

within a Web browser.

40

רגיל מאתרהבדל include locally executable elements of interactivity and

persistent state.

:למשל

bit.ly/w3cmbp validator.w3.org/mobile/

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

41

Standards for Web Applications on Mobile

j.mp/w3c736

42

Kiva דוגמא

10cmo3j.mp/w

42

43

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

80il3j.mp/w 43

44

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

(בעבודה/קיימים)

(geolocation API) מיקום •

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

• API ליומן

•API למדיה

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

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

•API לגלרייה

•Accelerometer / Orientation …

45

את הכירוMobile Web Application Best

Practices Cards

j.mp/thecards

46

Mobile web application frameworks

• Sencha Touch

• jQuery Mobile

• …

Into native

• PhoneGap

• Titanium

• …

244j.mp/mob

frameworks

47

Mobile Graded Browser Support

jquerymobile.com/gbs/ 47

48

HTML5FEST

w3c.org.il/HTML5fest/mobile 48

49

HTML5

'ושות49

50

HTML4 HTML5

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

51

New & Improved:

SEMANTICS CSS3 DEVICE

ACCESS

3D, GRAPHICS

& EFFECTS

OFFLINE &

STORAGE

CONNECTIVITY MULTIMEDIA PERFORMANCE

& INTEGRATION

52

And it’s all free!

53

Build once deploy everywhere

54

מדלגים על חנות האפליקציות

Discovery kills distribution: why the web needs a new leader via VisionMobile

j.mp/qJYuVN

55

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

55

56

The Open web platform

caniuse.com 56

57

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

mouse.co.il/mobile

57

58

Web Notifications

58

59

Video & Audio

videojs.com 59

60

Drag and drop, files

60

61

זמן אמת

Notifications

איתור מיקום

streamie.org 61

Streamie

Web Sockets

62

Timeline Reader

html5.labs.ap.org

62

לטאבלטים

Canvas

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

63

Auto mobile

כל מכשיר נייד

ללא הורדה

OFFLINEעבודה

api.auto.co.il/contest

מתוך

HTML5FEST APP CONTEST

64

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

Canvas

offline

64

gregmurray.org/fish

65

touchsolitaire.mobi/app

j.mp/w3cmo15

66

three.js - webgl dynamic cube reflection demo

http://j.mp/ocMabi

67

1cge3j.mp/w

Remote whiteboard

68

מי משתמש

69

Facebook

developers.facebook.com/html5

70

Scribd

Scribd CTO: "We Are Scrapping Flash And Betting The Company On HTML5”

Erick Schonfeld, Techcrunch, May 5th, 2010

71

SlidhShare

“we wanted to reach the most number of users…

Download… (is) not a pleasant user experience.

We want presentations on mobile devices to be accessible to as many users as possible.”

72

Twitter

A better app for your mobile browser

We want you to be able to access Twitter no matter where you are; regardless of what device you use; or, whether you prefer to access Twitter through a mobile application or the browser.

j.mp/oJruQ9

May 11, 2011

73

Amazon – Kindle Reader

“Amazon Releases Web-Based HTML5 Kindle Cloud Reader, Skirts Apple's App Store”

Dan Rowinski, RWW, August 10, 2011

j.mp/o8f3Ln

74

גוגל

....GOOGLE VOICEהמקרה של

http://j.mp/pgoaAI

75

Financial Times

“Financial Times Proves HTML5 Can Beat Native Mobile Apps”

John Paul Titlow, RWW, September 23, 2011

m.ft.com

76

Zynga, Disney, Motorola

Zynga, Disney embrace Web game technology Stephen Shankland, CNET, March 3, 2011

j.mp/nhMjpr

“Zynga has recently started investing

heavily into the open Web stack. While

most of our current games (CityVille,

FarmVille) still run on Flash, our

subsidiary in Germany is exclusively

focussing on JavaScript driven game

technology.”

77

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

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

78

...יותר רחוק

79

TV

Car

hyperdevices

80

Requirements for Home Networking Scenarios

access to services and content provided by home network devices on other devices

(from traditional broadcast media and internet based services but also from the home network.)

w3.org/TR/hnreq/

81

Object Memory Modeling - smart labels

Barcodes, RFID, sensor nodes, …

object memory format - events or other information about individual physical artifacts, ideally over their lifetime

• Event Logging for Process Documentation

• Collecting Instructions for Future Processes

• Object Assembly History

82

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

82

83

• learn

• Plan

• Implement

www.w3c.org.il

84 w3c.org.il/prs286: המצגת

אייל סלע

eyal@isoc.org.il

@isociltech @eyalsela