html5, ווב נייד ותקנים פתוחים ברשת
TRANSCRIPT
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
Augmented Realitycombine a view of the physical world with information
70il3j.mp/w19
DBpedia Mobileפריטים מוויקיפדיה
על מפה
:טכנולוגיות
סמנטי-
מובייל-
זיהוי מיקום-
21
beckr.org/DBpediaMobile
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
Web ApplicationWeb page(s) that provide an "application-like" experience
within a Web browser.
www.isoc.org.il
www.w3c.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
אפליקציה –כשאי אפשר אפליקציה במכשיר
וובית
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!
תמיכת דפדפנים
55
היצרנים מתחרים על רמת יישום התקן
בדפדפנים
56
יכולות ואפליקציות
57
www.isoc.org.il
www.w3c.org.il
Video element Audio element
videojs.com58
www.isoc.org.il
www.w3c.org.il
(geolocation)זיהוי מיקום
m.radiustalk.com60
contenteditable attribute
עורך טקסט עשיר
aloha-editor.com
64
זמן אמת
Notifications
איתור מיקום
•streamie.org 65
Streamie
Web Sockets
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
touchsolitaire.mobi/app
j.mp/w3cmo15
התאמה לגודל מסך•
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
