מגמות וטכנולוגיות באינטרנט ובווב

מגמות באינטרנט

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

1

1/3/2011

file:///H:/Erase/mobil

eOK.png

2

תוכנית

והאינטרנטאיגוד-אודות-W3C

הוובבעולםמגמות

Mobile

בישראלמגמות

שאלות

האינטרנט

3

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

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

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

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

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

מה אנחנו עושים

)IIX, שמות מתחם(תשתית •

...)קו חם , אוכלוסיות, גיל שלישי(חברה •

....)פרסומים , מפגשים(תוכן •

......), IPV6, ממשל, צנזורה(משפט •

)קוד פתוח, STS ,W3C(טכנולוגיה •

26/04/11 07:43

ISOC

Internet related standards educationand policy

26/04/11 07:43

(IETF), the Internet Architecture Board (IAB), the Internet

Engineering Steering Group (IESG), and the Internet Research

Task Force (IRTF)

IPV6

….

What Will The Internet Look

Like In 10 Years?shttp://www.isoc.org/tools/blogs/scenarios/

26/02/11 16:00

8

W3C

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

ארגונים 350-כ•

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

:משימה•

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

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

.ארוך

www.isoc.org.il

www.w3c.org.il

eyal@isoc.org.ilbit.ly/g63C9F

10

cpro3bit.ly/w

Recommendation track

•Review

•implementation

•interoperability.

-Fulfill all requirements

-seeks technical review

-feedback

- first plementation

-sufficient implementation experience

-sent to the Advisory Committee for

review

appropriate for widespread

deployment and promote

11

cac3j.mp/w

What we do

HTML5

'ושות12

HTML4HTML5

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

13

?איך

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

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

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

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

14

And it’s all free!

The Open web platform

caniuse.com 16

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

17

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

בדפדפנים

18

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

19

www.isoc.org.il

www.w3c.org.il

eyal@isoc.org.il

Video element Audio element

videojs.com20

Offline web applications

21

www.isoc.org.il

www.w3c.org.il

eyal@isoc.org.il

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

m.radiustalk.com22

www.isoc.org.il

www.w3c.org.il

eyal@isoc.org.il

Drag and drop, files

23

Web Notifications

24

File API

25

contenteditable attribute

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

aloha-editor.com

26

זמן אמת

Notifications

איתור מיקום

•streamie.org 27

Streamie

Web Sockets

Web Workers

28

SVG

29

canvas

30

Timeline Reader

html5.labs.ap.org 31

לטאבלטים

Canvas

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

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

Canvas

offline

32

gregmurray.org/fish

CSS

33

www.isoc.org.il

www.w3c.org.il

eyal@isoc.org.il

touchsolitaire.mobi/app

j.mp/w3cmo15

touchstyle.mobi/app/ 35

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

36

מי משתמש

37

•<video>

38

Video

Geolocation

Web Storage

WebSockets

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

• Drag and drop

40

41

...עוד מסכים

TV

Build once deploy

everywhere

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

44

HTML5למדו•

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

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

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

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

45

MOBILE

46

Mobile vs deskop internt user

projection 2007-2015

j.mp/dsafaa 47Source: 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

Via StatCounter:

http://gs.statcounter.com/#mobile_os-ww-monthly-200812-201105

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, מיקרופון ,מצלמה ,כיוון

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

23/12/10 12:44: מאת

-about-know-to-wanted-ever-you-/everything09/02/2010http://gigaom.com/

location/

LBS = Location bases services

Waze

GPS-מידע משתמשים מה•

23/12/10 12:44

How The iPhone Became The

World’s Most Popular Camera

23/12/10 12:44Via thenextweb.com

tnw.co/muiwbB

Google GogglesUse pictures to search the web

googlemobile.blogspot.com60

foursquare.com61

Facebook places

gowalla

Augmented Realitycombine a view of the physical world with information

70il3j.mp/w62

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

12j.mp/adfeg63

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

על מפה

:טכנולוגיות

סמנטי-

מובייל-

זיהוי מיקום-

64

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)

67

Image by: Dennis Bournique

חיבוריות

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

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

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

70

MapQuest.com

משתמש ממוקד

• Immediate

• goal-directed

• specific pieces of information

• relevant to context.

• less interested in lengthy documents or in browsing.

bit.ly/egXfIx

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

• …

bit.ly/egXfIx

זיכרון

עיבוד

רוחב פס

LatencyInteraction method

Data consistency---

Caching

74

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

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

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.

75

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

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

Smartphone market share - Q1 2010

bit.ly/h755vK 77

(Q1 ’10:

23% of mobile

consumers have

a smartphone)

78

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

?מכשיר

.לא

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

Native vs web

80

www.isoc.org.il

www.w3c.org.il

eyal@isoc.org.il81

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

83

www.isoc.org.il

www.w3c.org.il

eyal@isoc.org.il

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

וובית

80il3j.mp/w84

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

88

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

89

Mobile web application frameworks

• Sencha Touch

• jQuery Mobile

Into native

• PhoneGap

• Titanium

90

244j.mp/mob

Jquery mobile phone/browser support

jquerymobile.com/gbs/ 91

כנס שנתי

isoc.org.il/conf2011/mobile92

מידעאבטחת

?בעיות

94

היהשליהאייפוןבהםהמקומותכל

אותושקניתימאז

-/1081ranh.co.ilמאת רן יניב הרנשטיין

תשלמו יותר על ביטוח תכולת ? מעדכנים סטטוס

הדירה

45j.mp/iscd96

Air Force issues warning to troops

concerning Facebook Places

j.mp/9kWt3q97

ל חשופים "צירי ביטחון שוטף של צה: כביש פטפטן

Waze-ב

Esb71http://bit.ly/i: 98מאת חורים ברשת

ישראל

:נתונים מאת

http://gs.statcounter.com

רוחב פס

כניסת חברת החשמל-

הכנסת כבל תת ימי נוסף-

עשוים לשנות את חוויית השימוש באינטרנט

בריאות

. אנו בתחילת פריצת דרך בשירותי בריאות מקוונים

, ח כללית החלה בשירותים שכיום הם בלעדיים"קופ

יש להניח שהתחרות בין קופות חולים וחסכון בעלויות

.ידחוף את כולם להרחבת השירותים

השאלה היא האם ייוצר הפער הדיגיטאלי בו ולאיזור המרכז יהיו tele medicineלפריפריה יהיה

(כלומר אישיים(שירותים רפואיים ברמה גבוהה

התערבות ממשלתית

מגמה עולמית היא של יותר התערבות ממשלתית

)לא רק לאיום חיצוני, גם פנימית(באינטרנט

פאניקה "כל אירוע בעייתי עלול לעורר תגובות של

ולגרור חקיקה של התערבות עמוקה של " מוסרית.גורמי מימשל

חוקים

יידוע לקוחות בדבר אתרים פוגעניים ברשת האינטרנט ואפשרויות ההגנה •

מפניהם

)חשיפת פרטי מעוול -תיקון (הצעת חוק איסור לשון הרע •

הצעת חוק אחריות אתר אינטרנט לתגובות הגולשים•

איסור גביית עמלה בעסקה שבוצעה באמצעות האינטרנט•

הנגשת אתרים•

)ניידות שירותי דואר אלקטרוני -תיקון ) (בזק ושידורים(הצעת חוק התקשורת •

הגרלות והימורים ברשת , משחקים אסורים–תיקון (הצעת חוק העונשין •

)האינטרנט

הדבר הקבוע הוא חדשנות ושינוי

שנים הוא נהפך 7תוך –2004פייסבוק נוצר ב :

אז מי מוכן לדבר על " : אינטרנט"לרבים שווה ערך ל?...מגמות לעתיד

אייל סלע

eyal@isoc.org.il

j.mp/eyalprs :המצגת

106

תודה

Q&A

?חשיפת פרטי גולשים -

?חסימת אתרים -

קוד פתוח -

...רשתות חברתיות, סנסורים, שיתוף וחשיפת מידע -