1. ‫5‪ ,HTML‬ווב נייד ותקנים‬
‫פתוחים ברשת‬
‫ביה"ס הגבוה לטכנולוגיה (מכון לב) ירושלים‬
‫1102/21/82‬
‫אייל סלע‬
‫מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה-‪ W3C‬הישראלי‬

2. ‫תוכנית‬
‫‪MOBILE‬‬
‫• ‪Native vs web‬‬
‫5‪ HTML‬ושות'‬
‫• יכולות ואפליקציות‬
‫• מי משתמש‬
‫יותר רחוק...‬
‫2‬

3. ‫איגוד האינטרנט הישראלי‬
‫שלוחת האיגוד הבינלאומי‬
‫עמותה ללא מטרת רווח‬
‫קידום האינטרנט והטמעתו בישראל כתשתית‬
‫טכנולוגית, מחקרית, חינוכית, חברתית ועסקית‬
‫3‬

4. ‫‪W3C‬‬
‫ארגון בינלאומי‬
‫כ-053 ארגונים‬
‫פורום ניטראלי ליצירת תקני הווב‬
‫משימה:‬
‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬
‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח‬
‫ארוך.‬
‫4‬

5. A NEW WAVE of
TRANSFORMATIONS
Just as the Web
has transformed
everything…
…It will
transform
5 everything again

6. 6
bit.ly/g63C9F

7. ‫ווב )‪(web‬‬ ‫האינטרנט‬
‫)המא ָג(‬
‫ַ ֲר‬ ‫)המ ְשתת(‬
‫ִ ר ֶׁ ֶׁ‬
‫7‬

8. MOBILE
8

9. 3D Explorer
http://j.mp/uAjvj3
j.mp/w3ca2
9

10. Mobile vs deskop internt user projection
2007-2015
j.mp/dsafaa Source: thenextweb.com
10

11. ‫מחקר ‪ :Cisco‬צמיחה של פי 62‬
‫בתעבורת הנתונים ברשת‬
‫הסלולרית עד 5102‬
‫‪http://bit.ly/eP3OWQ‬‬
‫11‬

12. ‫גרטנר: ב- 1102 יירכשו בארה"ב‬
‫יותר טלפונים חכמים מכל מוצר‬
‫צריכה אלקטרוני אחר‬
‫‪http://bit.ly/hZK3Gm‬‬
‫21‬

13. In 2015, tablets will generate as
much traffic as the entire global
mobile network of 2010…
http://bit.ly/g2Twdf
13

14. he average amount of traffic per
smartphone doubled in 2010
http://bit.ly/g2Twdf
14

15. ‫איך לחשוב על זה?‬
‫סוגים שונים (גדלים שונים למסך)‬ ‫1.‬
‫סנסורים )מיקום ,מצפן ,מצלמה...)‬ ‫2.‬
‫קלט אחר (הזנת קלט בצורה שונה ,קולי, תמונה)‬ ‫3.‬
‫חיבוריות‬ ‫4.‬
‫משתמש ממוקד‬ ‫5.‬
‫מגבלות ובעיות‬ ‫6.‬
‫הרבה פלטפורמות‬ ‫7.‬
‫‪Native vs web‬‬ ‫8.‬
‫51‬

16. ‫סוגי מכשירים ניידים‬
Smartphone
Laptop
Tablets
…
16

17. ‫סנסורים‬
‫‪ ,GPS‬כיוון, מצלמה, מיקרופון...‬
‫71‬

18. ‫קלט‬
‫מהסנסורים..., אוטומטי , מגע‬
‫81‬

19. Google Goggles
Use pictures to search the web
19googlemobile.blogspot.com

20. ‫קלט קולי‬
Shazam SoundHound
20

21. Augmented Reality
combine a view of the physical world with information
j.mp/w3il70
21

22. Augmented Reality
j.mp/adfeg12
22

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

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

25. Design for Multiple Interaction Methods
‫שלושה סוגי אינטראקציה עיקריים‬
• Focus Based
• Pointer Based
• Touch Based
25
25

26. ‫חיבוריות‬
‫רוחב פס, עלות, ניתוק, מטוס, עומס‬
‫62‬

27. ‫אחסון מידע מקומי וסנכרון‬
‫72‬

28. 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
29

30. Eg.
schedules for a journey they are
currently undertaking.
30

31. ‫מגבלות ובעיות‬
• Input
• processing power
• Battery
• Small screen
• …
bit.ly/egXfIx
31

32. ‫אל תכבידו על משאבי המכשיר‬
‫זיכרון‬
‫עיבוד‬
‫רוחב פס‬
Latency
Interaction method
Data consistency
Caching
32

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
http://www.flickr.com/photos/66475767@N00/4333416050/ the first view can be displayed.
33
33

34. ‫הרבה פלטפורמות‬
‫43‬

35. Smartphone sales - 2011 Q2
Source: http://en.wikipedia.org/wiki/File:Smartphone_share_current.png
35
35

36. 36
36

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

38. Native vs web
38
38

39. Web Application
Web page(s) that provide an "application-like" experience
within a Web browser.
39
39

40. validator.w3.org/mobile/ bit.ly/w3cmbp
‫הבדל מאתר רגיל‬
include locally executable elements of interactivity and
persistent state.
:‫למשל‬
e-resistible.co.uk/public/eres/ bbc.co.uk/1xtra/touch/
40

41. Standards for Web Applications on Mobile
j.mp/w3c736
41

42. Kiva ‫דוגמא‬
j.mp/w3cmo10
42
42

43. ‫כשאי אפשר אפליקציה במכשיר – אפליקציה וובית‬
‫08‪j.mp/w3il‬‬
‫34‬
‫34‬

44. ‫גישת דפדפנים למידע ומשאבי המכשיר‬
‫(קיימים/בעבודה)‬
‫מיקום )‪(geolocation API‬‬ ‫•‬
‫‪ API‬לרשימת אנשי קשר‬ ‫•‬
‫‪ API‬ליומן‬ ‫•‬
‫‪ API‬למדיה‬ ‫•‬
‫‪ API‬להודעות )‪)SMS, MMS, email‬‬ ‫•‬
‫‪ API‬למידע מערכת‬ ‫•‬
‫‪ API‬לגלרייה‬ ‫•‬
‫• ‪Accelerometer / Orientation‬‬
‫…‬
‫44‬

45. ‫הכירו את‬
Mobile Web Application Best
Practices Cards
j.mp/thecards
45

46. frameworks
Mobile web application frameworks
• Sencha Touch
• jQuery Mobile
• …
Into native
• PhoneGap
• Titanium
• …
46
j.mp/mob244

47. Mobile Graded Browser Support
jquerymobile.com/gbs/ 47
47

48. HTML5FEST
w3c.org.il/HTML5fest/mobile
48
48

49. HTML5
'‫ושות‬
49
49

50. ‫5‪HTML‬‬ ‫4‪HTML‬‬
‫אפליקציות‬ ‫דפים‬
‫05‬

51. New & Improved:
SEMANTICS CSS3 DEVICE 3D, GRAPHICS
ACCESS & EFFECTS
OFFLINE & CONNECTIVITY MULTIMEDIA PERFORMANCE
STORAGE & INTEGRATION
51

52. And it’s all free!
52

53. Build once deploy
everywhere
53

54. ‫מדלגים על חנות האפליקציות‬
Discovery kills distribution: why the web needs a new leader via VisionMobile
j.mp/qJYuVN
54

55. ‫יכולות ואפליקציות‬
‫55‬
‫55‬

56. The Open web platform
caniuse.com 56
56

57. (geolocation)‫זיהוי מיקום‬
mouse.co.il/mobile
57
57

58. Web Notifications
58
58

59. Video & Audio
videojs.com
59
59

60. Drag and drop, files
60
60

61. Web Sockets
Streamie
‫זמן אמת‬
Notifications
‫איתור מיקום‬
61 streamie.org 61

62. Timeline Reader
‫לטאבלטים‬
Canvas
‫אלמנטים חדשים‬
62
html5.labs.ap.org 62

63. Auto mobile
‫מתוך‬
HTML5FEST APP CONTEST
‫כל מכשיר נייד‬
‫ללא הורדה‬
OFFLINE ‫עבודה‬
api.auto.co.il/contest
63

64. ‫תרשימים וגרפיקה עשירה‬
Canvas
offline
gregmurray.org/fish
64
64

65. touchsolitaire.mobi/app
j.mp/w3cmo15
65

66. three.js - webgl dynamic cube reflection demo
http://j.mp/ocMabi
66

67. Remote whiteboard
j.mp/w3cge1
67

68. ‫מי משתמש‬
‫86‬

69. Facebook
developers.facebook.com/html5
69

70. Scribd
Scribd CTO: "We Are Scrapping Flash And
Betting The Company On HTML5”
Erick Schonfeld, Techcrunch, May 5th, 2010
70

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.”
71

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.
May 11, 2011
j.mp/oJruQ9
72

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
73

74. ‫גוגל‬
....GOOGLE VOICE ‫המקרה של‬
http://j.mp/pgoaAI
74

75. Financial Times
“Financial Times Proves HTML5 Can Beat Native
Mobile Apps”
John Paul Titlow, RWW, September 23, 2011
m.ft.com
75

76. 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. ‫תמיכת דפדפנים‬
‫היצרנים מתחרים על רמת יישום התקן בדפדפנים‬
‫77‬

78. ‫יותר רחוק...‬
‫87‬

79. TV
Car
hyperdevices
79

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/
80

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
81

82. ‫מה לעשות עכשיו?‬
‫28‬
‫28‬

83. • learn
• Plan
• Implement
www.w3c.org.il
83

84. ‫אייל סלע‬
eyal@isoc.org.il
@isociltech @eyalsela
84
w3c.org.il/prs286 :‫המצגת‬