1. ‫1102/3/1‬
‫5‪ ,HTML‬ווב נייד‬
‫ותקנים פתוחים‬
‫ברשת‬
‫‪file:///H:/Erase/mob‬‬
‫‪ileOK.png‬‬
‫אייל סלע‬
‫מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה-‪ W3C‬הישראלי‬
‫1‬

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

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

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

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

6. MOBILE
6

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

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

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

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

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

12. mobile's share of web consumption

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

14. ‫סוגי מכשירים ניידים‬
•Iphone/android/nokia/win
•Laptop
•Tablets
• Mobile phone / PDA
•(Wearable computer)

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

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

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

18. : Foursquare‫דוגמא‬
foursquare.com
18

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

20. ‫‪ - AR‬מקל על תפעול המדפסת‬
‫21‪j.mp/adfeg‬‬
‫02‬

21. ‫‪DBpedia Mobile‬‬
‫פריטים מוויקיפדיה‬
‫על מפה‬
‫טכנולוגיות:‬
‫- סמנטי‬
‫- מובייל‬
‫- זיהוי מיקום‬
‫‪beckr.org/DBpediaMobile‬‬
‫12‬

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

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

24. 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
Image by: Dennis Bournique
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

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

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

27. 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
MapQuest.com
27

28. ‫משתמש ממוקד‬
• Immediate
• goal-directed
• specific pieces of information
• relevant to context.
• less interested in lengthy documents
or in browsing.
bit.ly/egXfIx

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

30. ‫מגבלות ובעיות‬
• keyboard and the screen
• limited processing power
• processing uses more power as does
communication
• limited memory
• …
bit.ly/egXfIx

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

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

33. ‫כמות הפלטפורמות‬

34. Smartphone market share - Q1 2010
(Q1 ’10:
23% of mobile
consumers have
a smartphone)
bit.ly/h755vK 34

35. 35

36. ‫אז צריך לבנות אתר נפרד לכל סוג‬
‫מכשיר?‬
‫לא.‬
‫אפשר לבנות חלופות ווביות‬

37. Native vs web
37

38. Web Application
Web page(s) that provide an "application-like" experience
within a Web browser.
www.isoc.org.il
www.w3c.org.il 38
eyal@isoc.org.il

39. validator.w3.org/mobile/ bit.ly/w3cmbp
(BP1) ‫הבדל מאתר רגיל‬
include locally executable elements of interactivity and
persistent state.
:‫למשל‬
e-resistible.co.uk/public/eres/ bbc.co.uk/1xtra/touch/
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il

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

41. ‫כשאי אפשר אפליקציה במכשיר – אפליקציה‬
‫וובית‬
j.mp/w3il80 www.isoc.org.il
www.w3c.org.il 41
eyal@isoc.org.il

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

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

44. Use Device Classification to
Simplify Content Adaptation
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.
45

45. frameworks
46

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

47. Jquery mobile phone/browser support
jquerymobile.com/gbs/ 48

48. ‫כנס שנתי‬
isoc.org.il/conf2011/mobile
49

49. HTML5
'‫ושות‬
50

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

51. ‫איך?‬
‫•אלמנטים חדשים‬
‫• הסרת ושינוי אלמנטים‬
‫• ממשקי תכנות חדשים‬
‫• סוגי תוכן חדשים‬
‫25‬

52. And it’s all free!

53. The Open web platform
caniuse.com 54

54. ‫תמיכת דפדפנים‬
‫55‬

55. ‫היצרנים מתחרים על רמת יישום התקן‬
‫בדפדפנים‬
‫65‬

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

57. Video element Audio element
videojs.com www.isoc.org.il
www.w3c.org.il 58
eyal@isoc.org.il

58. Offline web applications
59

59. (geolocation)‫זיהוי מיקום‬
m.radiustalk.com www.isoc.org.il
www.w3c.org.il 60
eyal@isoc.org.il

60. Drag and drop, files
www.isoc.org.il
www.w3c.org.il 61
eyal@isoc.org.il

61. Web Notifications
62

62. File API
63

63. contenteditable attribute
‫עורך טקסט עשיר‬
aloha-editor.com
64

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

65. Web Workers
66

66. SVG
67

67. canvas
68

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

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

70. CSS
71

71. touchsolitaire.mobi/app
j.mp/w3cmo15 www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il

72. touchstyle.mobi/app/ 73

73. ‫• התאמה לגודל מסך‬
‫0102/‪iswc.mobi‬‬ ‫47‬

74. ‫מי משתמש‬
‫57‬

75. <video> •
76

76. Video
Geolocation
Web Storage
WebSockets
January 26, 2011: Facebook to empower its massive mobile platform with HTML5 77

77. • Drag and drop
78

78. 79

79. ‫עוד מסכים...‬
‫‪TV‬‬

80. Build once deploy
everywhere

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

82. ‫• למדו 5‪HTML‬‬
‫• יישמו בהדרגתיות‬
‫• השתמשו בהגדרות החדשות‬
‫• שלבו את הארכיטקטורה‬
‫• זכרו – התקן נמצא בתהליך עבודה‬
‫38‬

83. ‫תודה‬
‫אייל סלע‬
‫‪eyal@isoc.org.il‬‬
‫המצגת:‬
‫48‬