HTML5, ווב נייד ותקנים פתוחים ברשת אייל סלע מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה W3C- הישראלי ביה " ס הגבוה לטכנולוגיה ( מכון לב ) ירושלים 28/12/2011

2 תוכנית MOBILE Native vs web HTML5 ושות ' יכולות ואפליקציות מי משתמש יותר רחוק...

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

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

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

6 bit.ly/g63C9F

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

8 MOBILE

9 3D Explorer j.mp/w3ca2

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

11 מחקר Cisco: צמיחה של פי 26 בתעבורת הנתונים ברשת הסלולרית עד

12 גרטנר : ב יירכשו בארה " ב יותר טלפונים חכמים מכל מוצר צריכה אלקטרוני אחר

13 In 2015, tablets will generate as much traffic as the entire global mobile network of 2010…

14 he average amount of traffic per smartphone doubled in

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

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

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

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

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

20 קלט קולי Shazam SoundHound

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

22 Augmented Reality j.mp/adfeg12

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

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

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

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

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

28 Minimize Perceived Latency איך ? Incremental Rendering Keep the User Informed of Activity (progress bars) Avoid Page Reloads Preload Probable Next Views 28 MapQuest.com

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

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

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

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

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 the first view can be displayed. 33

34 הרבה פלטפורמות

35 Smartphone sales Q2 Source: 35

36

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

38 Native vs web 38

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

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

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

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

43 כשאי אפשר אפליקציה במכשיר – אפליקציה וובית j.mp/w3il80 43

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

45 הכירו את Mobile Web Application Best Practices Cards j.mp/thecards פרסומת

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

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

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

49 HTML5 ושות' 49

50 HTML4 HTML5 דפים אפליקציות

51 New & Improved: SEMANTICSCSS3 DEVICE ACCESS 3D, GRAPHICS & EFFECTS OFFLINE & STORAGE CONNECTIVITYMULTIMEDIA PERFORMANCE & INTEGRATION

52 And it’s all free!

53 Build once deploy everywhere

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

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

56 The Open web platform caniuse.com 56

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

58 Web Notifications 58

59 Video & Audio videojs.com 59

60 Drag and drop, files 60

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

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

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

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

65 touchsolitaire.mobi/app j.mp/w3cmo15

66 three.js - webgl dynamic cube reflection demo

67 j.mp/w3cge1 Remote whiteboard

68 מי משתמש

69 Facebook developers.facebook.com/html5

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

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

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

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

74 גוגל המקרה של GOOGLE VOICE....

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

76 Zynga, Disney, Motorola Zynga, Disney embrace Web game technology Stephen Shankland, CNET, March 3, 2011 j.mp/nhMjpr “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.”

77 תמיכת דפדפנים היצרנים מתחרים על רמת יישום התקן בדפדפנים

78 יותר רחוק...

79 TV Car hyperdevices

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/

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

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

83 learn Plan Implement

84 המצגת : w3c.org.il/prs286