‫‪ ,HTML5‬ווב נייד ותקנים‬
‫פתוחים ברשת‬
‫ביה"ס הגבוה לטכנולוגיה (מכון לב) ירושלים‬
‫‪28/12/2011‬‬
‫אייל סלע‬
‫מנהל פרויקטים‪ ,‬איגוד האינטרנט הישראלי ומשרד ה‪ W3C-‬הישראלי‬
‫תוכנית‬
‫‪MOBILE‬‬
‫• ‪Native vs web‬‬
‫‪ HTML5‬ושות'‬
‫• יכולות ואפליקציות‬
‫• מי משתמש‬
‫יותר רחוק‪...‬‬
‫‪2‬‬
‫איגוד האינטרנט הישראלי‬
‫שלוחת האיגוד הבינלאומי‬
‫עמותה ללא מטרת רווח‬
‫קידום האינטרנט והטמעתו בישראל כתשתית‬
‫טכנולוגית‪ ,‬מחקרית‪ ,‬חינוכית‪ ,‬חברתית ועסקית‬
‫‪3‬‬
‫‪W3C‬‬
‫ארגון בינלאומי‬
‫כ‪ 350-‬ארגונים‬
‫פורום ניטראלי ליצירת תקני הווב‬
‫משימה‪:‬‬
‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬
‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח‬
‫ארוך‪.‬‬
‫‪4‬‬
A NEW WAVE of
TRANSFORMATIONS
Just as the Web
has transformed
everything…
5
…It will
transform
everything again
6
bit.ly/g63C9F
‫האינטרנט‬
‫)המ ְר ֶׁש ֶׁתת(‬
‫ִ‬
‫ווב )‪(web‬‬
‫)המאֲ ָרג(‬
‫ַ‬
‫‪7‬‬
MOBILE
8
3D Explorer
http://j.mp/uAjvj3
j.mp/w3ca2
9
Mobile vs deskop internt user projection
2007-2015
j.mp/dsafaa
10
Source: thenextweb.com
‫מחקר ‪ :Cisco‬צמיחה של פי ‪26‬‬
‫בתעבורת הנתונים ברשת‬
‫הסלולרית עד ‪2015‬‬
‫‪http://bit.ly/eP3OWQ‬‬
‫‪11‬‬
‫גרטנר‪ :‬ב‪ 2011 -‬יירכשו בארה"ב‬
‫יותר טלפונים חכמים מכל מוצר‬
‫צריכה אלקטרוני אחר‬
‫‪http://bit.ly/hZK3Gm‬‬
‫‪12‬‬
In 2015, tablets will generate as
much traffic as the entire global
mobile network of 2010…
http://bit.ly/g2Twdf
13
he average amount of traffic per
smartphone doubled in 2010
http://bit.ly/g2Twdf
14
‫איך לחשוב על זה?‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫‪.7‬‬
‫‪.8‬‬
‫סוגים שונים (גדלים שונים למסך)‬
‫סנסורים )מיקום ‪,‬מצפן ‪,‬מצלמה‪)...‬‬
‫קלט אחר (הזנת קלט בצורה שונה ‪,‬קולי‪ ,‬תמונה)‬
‫חיבוריות‬
‫משתמש ממוקד‬
‫מגבלות ובעיות‬
‫הרבה פלטפורמות‬
‫‪Native vs web‬‬
‫‪15‬‬
‫סוגי מכשירים ניידים‬
Smartphone
Laptop
Tablets
…
16
‫סנסורים‬
‫‪ ,GPS‬כיוון‪ ,‬מצלמה‪ ,‬מיקרופון‪...‬‬
‫‪17‬‬
‫קלט‬
‫מהסנסורים‪ ,...‬אוטומטי ‪ ,‬מגע‬
‫‪18‬‬
Google Goggles
Use pictures to search the web
19googlemobile.blogspot.com
‫קלט קולי‬
Shazam
20
SoundHound
Augmented Reality
combine a view of the physical world with information
j.mp/w3il70
21
Augmented Reality
j.mp/adfeg12
22
by: Amber Case
23
26/02/11 16:00
by: Amber Case
24
26/02/11 16:00
Design for Multiple Interaction Methods
‫שלושה סוגי אינטראקציה עיקריים‬
• Focus Based
• Pointer Based
• Touch Based
25
25
‫חיבוריות‬
‫רוחב פס‪ ,‬עלות‪ ,‬ניתוק‪ ,‬מטוס‪ ,‬עומס‬
‫‪26‬‬
‫אחסון מידע מקומי וסנכרון‬
‫‪27‬‬
Minimize Perceived Latency
?‫איך‬
• Incremental Rendering
• Keep the User Informed of Activity
(progress bars)
• Avoid Page Reloads
• Preload Probable Next Views
MapQuest.com
28
28
‫משתמש ממוקד‬
•
•
•
•
•
29
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.
30
‫מגבלות ובעיות‬
•
•
•
•
•
31
Input
processing power
Battery
Small screen
…
bit.ly/egXfIx
‫אל תכבידו על משאבי המכשיר‬
‫זיכרון‬
‫עיבוד‬
‫רוחב פס‬
Latency
Interaction method
Data consistency
Caching
32
‫להתחיל צ'יק צ'ק‬
Optimize For Application Start-up Time
?‫איך‬
• Use Offline Technology (e.g. AppCache) –
Resources (HTML, JavaScript, CSS) stored
http://www.flickr.com/photos/66475767@N00/4333416050/
33
33
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.
‫הרבה פלטפורמות‬
‫‪34‬‬
Smartphone sales - 2011 Q2
Source: http://en.wikipedia.org/wiki/File:Smartphone_share_current.png
35
35
36
36
‫אז צריך לבנות אפליקציה לכל סוג מכשיר?‬
‫לא‪.‬‬
‫אפשר לבנות אפליקציה וובית‬
‫‪37‬‬
Native vs web
38
38
Web Application
Web page(s) that provide an "application-like" experience
within a Web browser.
39
39
validator.w3.org/mobile/
bit.ly/w3cmbp
‫הבדל מאתר רגיל‬
include locally executable elements of interactivity and
persistent state.
:‫למשל‬
e-resistible.co.uk/public/eres/
40
bbc.co.uk/1xtra/touch/
Standards for Web Applications on Mobile
j.mp/w3c736
41
Kiva ‫דוגמא‬
j.mp/w3cmo10
42
42
‫כשאי אפשר אפליקציה במכשיר – אפליקציה וובית‬
‫‪j.mp/w3il80‬‬
‫‪43‬‬
‫‪43‬‬
‫גישת דפדפנים למידע ומשאבי המכשיר‬
‫(קיימים‪/‬בעבודה)‬
‫•‬
‫•‬
‫•‬
‫•‬
‫•‬
‫•‬
‫•‬
‫מיקום )‪(geolocation API‬‬
‫‪ API‬לרשימת אנשי קשר‬
‫‪ API‬ליומן‬
‫‪ API‬למדיה‬
‫‪ API‬להודעות )‪)SMS, MMS, email‬‬
‫‪ API‬למידע מערכת‬
‫‪ API‬לגלרייה‬
‫• ‪Accelerometer / Orientation‬‬
‫…‬
‫‪44‬‬
‫הכירו את‬
Mobile Web Application Best
Practices Cards
j.mp/thecards
45
frameworks
Mobile web application frameworks
• Sencha Touch
• jQuery Mobile
• …
Into native
• PhoneGap
• Titanium
• …
46
j.mp/mob244
Mobile Graded Browser Support
jquerymobile.com/gbs/
47
47
HTML5FEST
w3c.org.il/HTML5fest/mobile
48
48
HTML5
'‫ושות‬
49
49
‫‪HTML4‬‬
‫דפים‬
‫‪HTML5‬‬
‫אפליקציות‬
‫‪50‬‬
New & Improved:
51
SEMANTICS
CSS3
DEVICE
ACCESS
3D, GRAPHICS
& EFFECTS
OFFLINE &
STORAGE
CONNECTIVITY
MULTIMEDIA
PERFORMANCE
& INTEGRATION
And it’s all free!
52
Build once deploy
everywhere
53
‫מדלגים על חנות האפליקציות‬
Discovery kills distribution: why the web needs a new leader via VisionMobile
j.mp/qJYuVN
54
‫יכולות ואפליקציות‬
‫‪55‬‬
‫‪55‬‬
The Open web platform
caniuse.com
56
56
(geolocation)‫זיהוי מיקום‬
mouse.co.il/mobile
57
57
Web Notifications
58
58
Video & Audio
videojs.com
59
59
Drag and drop, files
60
60
Web Sockets
Streamie
‫זמן אמת‬
Notifications
‫איתור מיקום‬
61
streamie.org
61
Timeline Reader
‫לטאבלטים‬
Canvas
‫אלמנטים חדשים‬
62
html5.labs.ap.org
62
Auto mobile
‫מתוך‬
HTML5FEST APP CONTEST
‫כל מכשיר נייד‬
‫ללא הורדה‬
OFFLINE ‫עבודה‬
api.auto.co.il/contest
63
‫תרשימים וגרפיקה עשירה‬
Canvas
offline
gregmurray.org/fish
64
64
touchsolitaire.mobi/app
j.mp/w3cmo15
65
three.js - webgl dynamic cube reflection demo
http://j.mp/ocMabi
66
Remote whiteboard
j.mp/w3cge1
67
‫מי משתמש‬
‫‪68‬‬
Facebook
developers.facebook.com/html5
69
Scribd
Scribd CTO: "We Are Scrapping Flash And
Betting The Company On HTML5”
Erick Schonfeld, Techcrunch, May 5th, 2010
70
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.”
71
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.
May 11, 2011
j.mp/oJruQ9
72
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
73
‫גוגל‬
....GOOGLE VOICE ‫המקרה של‬
http://j.mp/pgoaAI
74
Financial Times
“Financial Times Proves HTML5 Can Beat Native
Mobile Apps”
John Paul Titlow, RWW, September 23, 2011
m.ft.com
75
Zynga, Disney, Motorola
Zynga, Disney embrace Web game technology
Stephen Shankland, CNET, March 3, 2011
“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.”
j.mp/nhMjpr
76
‫תמיכת דפדפנים‬
‫היצרנים מתחרים על רמת יישום התקן בדפדפנים‬
‫‪77‬‬
‫יותר רחוק‪...‬‬
‫‪78‬‬
TV
Car
hyperdevices
79
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/
80
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
81
‫מה לעשות עכשיו?‬
‫‪82‬‬
‫‪82‬‬
• learn
• Plan
• Implement
www.w3c.org.il
83
‫אייל סלע‬
eyal@isoc.org.il
@isociltech @eyalsela
84
w3c.org.il/prs286 :‫המצגת‬