HTML5, ווב נייד ותקנים פתוחים ברשת

1,420 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

HTML5, ווב נייד ותקנים פתוחים ברשת

  1. 1. ‫5‪ ,HTML‬ווב נייד ותקנים‬ ‫פתוחים ברשת‬ ‫ביה"ס הגבוה לטכנולוגיה (מכון לב) ירושלים‬ ‫1102/21/82‬ ‫אייל סלע‬‫מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה-‪ W3C‬הישראלי‬
  2. 2. ‫תוכנית‬ ‫‪MOBILE‬‬ ‫• ‪Native vs web‬‬ ‫5‪ HTML‬ושות‬ ‫• יכולות ואפליקציות‬ ‫• מי משתמש‬ ‫יותר רחוק...‬‫2‬
  3. 3. ‫איגוד האינטרנט הישראלי‬ ‫שלוחת האיגוד הבינלאומי‬ ‫עמותה ללא מטרת רווח‬ ‫קידום האינטרנט והטמעתו בישראל כתשתית‬ ‫טכנולוגית, מחקרית, חינוכית, חברתית ועסקית‬‫3‬
  4. 4. ‫‪W3C‬‬ ‫ארגון בינלאומי‬ ‫כ-053 ארגונים‬ ‫פורום ניטראלי ליצירת תקני הווב‬ ‫משימה:‬ ‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬ ‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח‬ ‫ארוך.‬‫4‬
  5. 5. A NEW WAVE ofTRANSFORMATIONS Just as the Web has transformed everything… …It will transform5 everything again
  6. 6. 6 bit.ly/g63C9F
  7. 7. ‫ווב )‪(web‬‬ ‫האינטרנט‬ ‫)המא ָג(‬ ‫ַ ֲר‬ ‫)המ ְשתת(‬ ‫ִ ר ֶׁ ֶׁ‬‫7‬
  8. 8. MOBILE8
  9. 9. 3D Explorer http://j.mp/uAjvj3 j.mp/w3ca29
  10. 10. Mobile vs deskop internt user projection 2007-2015 j.mp/dsafaa Source: thenextweb.com10
  11. 11. ‫מחקר ‪ :Cisco‬צמיחה של פי 62‬ ‫בתעבורת הנתונים ברשת‬ ‫הסלולרית עד 5102‬‫‪http://bit.ly/eP3OWQ‬‬‫11‬
  12. 12. ‫גרטנר: ב- 1102 יירכשו בארה"ב‬ ‫יותר טלפונים חכמים מכל מוצר‬ ‫צריכה אלקטרוני אחר‬ ‫‪http://bit.ly/hZK3Gm‬‬‫21‬
  13. 13. In 2015, tablets will generate as much traffic as the entire global mobile network of 2010… http://bit.ly/g2Twdf13
  14. 14. he average amount of traffic per smartphone doubled in 2010 http://bit.ly/g2Twdf14
  15. 15. ‫איך לחשוב על זה?‬ ‫סוגים שונים (גדלים שונים למסך)‬ ‫1.‬ ‫סנסורים )מיקום ,מצפן ,מצלמה...)‬ ‫2.‬ ‫קלט אחר (הזנת קלט בצורה שונה ,קולי, תמונה)‬ ‫3.‬ ‫חיבוריות‬ ‫4.‬ ‫משתמש ממוקד‬ ‫5.‬ ‫מגבלות ובעיות‬ ‫6.‬ ‫הרבה פלטפורמות‬ ‫7.‬ ‫‪Native vs web‬‬ ‫8.‬‫51‬
  16. 16. ‫סוגי מכשירים ניידים‬ Smartphone Laptop Tablets …16
  17. 17. ‫סנסורים‬ ‫‪ ,GPS‬כיוון, מצלמה, מיקרופון...‬‫71‬
  18. 18. ‫קלט‬ ‫מהסנסורים..., אוטומטי , מגע‬‫81‬
  19. 19. Google GogglesUse pictures to search the web19googlemobile.blogspot.com
  20. 20. ‫קלט קולי‬ Shazam SoundHound20
  21. 21. Augmented Realitycombine a view of the physical world with information j.mp/w3il7021
  22. 22. Augmented Reality j.mp/adfeg1222
  23. 23. by: Amber Case23 26/02/11 16:00
  24. 24. by: Amber Case24 26/02/11 16:00
  25. 25. Design for Multiple Interaction Methods ‫שלושה סוגי אינטראקציה עיקריים‬ • Focus Based • Pointer Based • Touch Based 2525
  26. 26. ‫חיבוריות‬ ‫רוחב פס, עלות, ניתוק, מטוס, עומס‬‫62‬
  27. 27. ‫אחסון מידע מקומי וסנכרון‬‫72‬
  28. 28. Minimize Perceived Latency ?‫איך‬ • Incremental Rendering • Keep the User Informed of Activity (progress bars) • Avoid Page Reloads • Preload Probable Next Views MapQuest.com 2828
  29. 29. ‫משתמש ממוקד‬ • Immediate • goal-directed • specific pieces of information • relevant to context • less interested in lengthy documents or in browsing bit.ly/egXfIx29
  30. 30. Eg. schedules for a journey they are currently undertaking.30
  31. 31. ‫מגבלות ובעיות‬ • Input • processing power • Battery • Small screen • … bit.ly/egXfIx31
  32. 32. ‫אל תכבידו על משאבי המכשיר‬ ‫זיכרון‬ ‫עיבוד‬ ‫רוחב פס‬ Latency Interaction method Data consistency Caching32
  33. 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 beforehttp://www.flickr.com/photos/66475767@N00/4333416050/ the first view can be displayed. 3333
  34. 34. ‫הרבה פלטפורמות‬‫43‬
  35. 35. Smartphone sales - 2011 Q2Source: http://en.wikipedia.org/wiki/File:Smartphone_share_current.png 3535
  36. 36. 3636
  37. 37. ‫אז צריך לבנות אפליקציה לכל סוג מכשיר?‬ ‫לא.‬ ‫אפשר לבנות אפליקציה וובית‬‫73‬
  38. 38. Native vs web 3838
  39. 39. Web ApplicationWeb page(s) that provide an "application-like" experiencewithin a Web browser. 3939
  40. 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. 41. Standards for Web Applications on Mobile j.mp/w3c73641
  42. 42. Kiva ‫דוגמא‬ j.mp/w3cmo10 4242
  43. 43. ‫כשאי אפשר אפליקציה במכשיר – אפליקציה וובית‬ ‫08‪j.mp/w3il‬‬ ‫34‬‫34‬
  44. 44. ‫גישת דפדפנים למידע ומשאבי המכשיר‬ ‫(קיימים/בעבודה)‬ ‫מיקום )‪(geolocation API‬‬ ‫•‬ ‫‪ API‬לרשימת אנשי קשר‬ ‫•‬ ‫‪ API‬ליומן‬ ‫•‬ ‫‪ API‬למדיה‬ ‫•‬ ‫‪ API‬להודעות )‪)SMS, MMS, email‬‬ ‫•‬ ‫‪ API‬למידע מערכת‬ ‫•‬ ‫‪ API‬לגלרייה‬ ‫•‬ ‫• ‪Accelerometer / Orientation‬‬ ‫…‬‫44‬
  45. 45. ‫הכירו את‬ Mobile Web Application Best Practices Cards j.mp/thecards45
  46. 46. frameworks Mobile web application frameworks • Sencha Touch • jQuery Mobile • … Into native • PhoneGap • Titanium • …46 j.mp/mob244
  47. 47. Mobile Graded Browser Support jquerymobile.com/gbs/ 4747
  48. 48. HTML5FEST w3c.org.il/HTML5fest/mobile 4848
  49. 49. HTML5 ‫ושות‬ 4949
  50. 50. ‫5‪HTML‬‬ ‫4‪HTML‬‬‫אפליקציות‬ ‫דפים‬‫05‬
  51. 51. New & Improved: SEMANTICS CSS3 DEVICE 3D, GRAPHICS ACCESS & EFFECTS OFFLINE & CONNECTIVITY MULTIMEDIA PERFORMANCE STORAGE & INTEGRATION51
  52. 52. And it’s all free!52
  53. 53. Build once deploy everywhere53
  54. 54. ‫מדלגים על חנות האפליקציות‬Discovery kills distribution: why the web needs a new leader via VisionMobilej.mp/qJYuVN54
  55. 55. ‫יכולות ואפליקציות‬ ‫55‬‫55‬
  56. 56. The Open web platformcaniuse.com 5656
  57. 57. (geolocation)‫זיהוי מיקום‬ mouse.co.il/mobile 5757
  58. 58. Web Notifications 5858
  59. 59. Video & Audio videojs.com 5959
  60. 60. Drag and drop, files 6060
  61. 61. Web Sockets Streamie ‫זמן אמת‬ Notifications ‫איתור מיקום‬61 streamie.org 61
  62. 62. Timeline Reader ‫לטאבלטים‬ Canvas ‫אלמנטים חדשים‬62 html5.labs.ap.org 62
  63. 63. Auto mobile ‫מתוך‬ HTML5FEST APP CONTEST ‫כל מכשיר נייד‬ ‫ללא הורדה‬ OFFLINE ‫עבודה‬api.auto.co.il/contest63
  64. 64. ‫תרשימים וגרפיקה עשירה‬ Canvas offline gregmurray.org/fish 6464
  65. 65. touchsolitaire.mobi/app j.mp/w3cmo1565
  66. 66. three.js - webgl dynamic cube reflection demohttp://j.mp/ocMabi66
  67. 67. Remote whiteboard j.mp/w3cge167
  68. 68. ‫מי משתמש‬‫86‬
  69. 69. Facebookdevelopers.facebook.com/html569
  70. 70. Scribd Scribd CTO: "We Are Scrapping Flash And Betting The Company On HTML5” Erick Schonfeld, Techcrunch, May 5th, 201070
  71. 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. 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, 2011j.mp/oJruQ972
  73. 73. Amazon – Kindle Reader “Amazon Releases Web-Based HTML5 Kindle Cloud Reader, Skirts Apples App Store” Dan Rowinski, RWW, August 10, 2011j.mp/o8f3Ln73
  74. 74. ‫גוגל‬ ....GOOGLE VOICE ‫המקרה של‬http://j.mp/pgoaAI74
  75. 75. Financial Times “Financial Times Proves HTML5 Can Beat Native Mobile Apps” John Paul Titlow, RWW, September 23, 2011m.ft.com75
  76. 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/nhMjpr76
  77. 77. ‫תמיכת דפדפנים‬ ‫היצרנים מתחרים על רמת יישום התקן בדפדפנים‬‫77‬
  78. 78. ‫יותר רחוק...‬‫87‬
  79. 79. TV Car hyperdevices79
  80. 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. 81. Object Memory Modeling - smart labelsBarcodes, RFID, sensor nodes, …object memory format - events or other information aboutindividual physical artifacts, ideally over their lifetime • Event Logging for Process Documentation • Collecting Instructions for Future Processes • Object Assembly History81
  82. 82. ‫מה לעשות עכשיו?‬ ‫28‬‫28‬
  83. 83. • learn • Plan • Implement www.w3c.org.il83
  84. 84. ‫אייל סלע‬ eyal@isoc.org.il @isociltech @eyalsela84 w3c.org.il/prs286 :‫המצגת‬

×