מגמות וטכנולוגיות באינטרנט ובווב

1,464 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,464
On SlideShare
0
From Embeds
0
Number of Embeds
292
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

מגמות וטכנולוגיות באינטרנט ובווב

  1. 1. ‫1102/3/1‬ ‫מגמות באינטרנט‬ ‫‪file:///H:/Erase/mobil‬‬ ‫‪eOK.png‬‬ ‫אייל סלע‬ ‫מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה-‪ W3C‬הישראלי‬ ‫1‬
  2. 2. ‫תוכנית‬‫אודות -איגוד האינטרנט ו ‪-W3C‬‬ ‫‪‬‬ ‫מגמות בעולם הווב‬ ‫‪‬‬ ‫‪Mobile‬‬ ‫‪‬‬ ‫מגמות בישראל‬ ‫‪‬‬ ‫שאלות‬ ‫‪‬‬ ‫2‬
  3. 3. ‫ווב)‪(web‬‬ ‫האינטרנט‬‫)המא ָג(‬ ‫ַ ֲר‬ ‫)המ ְשתת(‬ ‫ִ ר ֶׁ ֶׁ‬ ‫3‬
  4. 4. ‫איגוד האינטרנט הישראלי‬ ‫שלוחת האיגוד הבינלאומי‬ ‫עמותה ללא מטרת רווח‬‫פועל לקידום האינטרנט והטמעתו בישראל כתשתית‬ ‫טכנולוגית, מחקרית, חינוכית, חברתית ועסקית‬
  5. 5. ‫מה אנחנו עושים‬ ‫תשתית )שמות מתחם, ‪(IIX‬‬ ‫•‬ ‫חברה )גיל שלישי, אוכלוסיות, קו חם ...(‬ ‫•‬ ‫תוכן )מפגשים, פרסומים ....(‬ ‫•‬ ‫משפט )צנזורה, ממשל, 6‪(...... ,IPV‬‬ ‫•‬ ‫טכנולוגיה )‪ ,W3C ,STS‬קוד פתוח(‬ ‫•‬‫34:70 11/40/62‬
  6. 6. ISOCInternet related standards educationand policy(IETF), the Internet Architecture Board (IAB), the InternetEngineering Steering Group (IESG), and the Internet ResearchTask Force (IRTF)IPV6…. 26/04/11 07:43
  7. 7. What Will The Internet LookLike In 10 Years?shttp://www.isoc.org/tools/blogs/scenarios/ 26/02/11 16:00
  8. 8. ‫‪W3C‬‬ ‫• ארגון בינלאומי‬ ‫• כ-053 ארגונים‬ ‫• פורום ניטראלי ליצירת תקני הווב‬ ‫• משימה:‬ ‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח‬ ‫ארוך.‬ ‫8‬
  9. 9. www.isoc.org.il www.w3c.org.ilbit.ly/g63C9F eyal@isoc.org.il
  10. 10. Recommendation track appropriate for widespread•Review deployment and promote•implementation•interoperability. -sufficient implementation experience -sent to the Advisory Committee for review -feedback - first plementation -Fulfill all requirements -seeks technical review bit.ly/w3cpro 10
  11. 11. What we doj.mp/w3cac 11
  12. 12. HTML5 ‫ושות‬ 12
  13. 13. ‫5‪HTML‬‬ ‫4‪HTML‬‬‫אפליקציות‬ ‫דפים‬ ‫31‬
  14. 14. ‫איך?‬ ‫•אלמנטים חדשים‬‫• הסרת ושינוי אלמנטים‬ ‫•ממשקי תכנות חדשים‬ ‫•סוגי תוכן חדשים‬ ‫41‬
  15. 15. And it’s all free!
  16. 16. The Open web platformcaniuse.com 16
  17. 17. ‫תמיכת דפדפנים‬ ‫71‬
  18. 18. ‫היצרנים מתחרים על רמת יישום התקן‬ ‫בדפדפנים‬ ‫81‬
  19. 19. ‫יכולות ואפליקציות‬ ‫91‬
  20. 20. Video element Audio elementvideojs.com www.isoc.org.il www.w3c.org.il 20 eyal@isoc.org.il
  21. 21. Offline web applications 21
  22. 22. (geolocation)‫זיהוי מיקום‬m.radiustalk.com www.isoc.org.il www.w3c.org.il 22 eyal@isoc.org.il
  23. 23. Drag and drop, files www.isoc.org.il www.w3c.org.il 23 eyal@isoc.org.il
  24. 24. Web Notifications 24
  25. 25. File API 25
  26. 26. contenteditable attribute‫עורך טקסט עשיר‬ aloha-editor.com 26
  27. 27. Web Sockets Streamie ‫זמן אמת‬ Notifications ‫איתור מיקום‬ streamie.org • 27
  28. 28. Web Workers 28
  29. 29. SVG 29
  30. 30. canvas 30
  31. 31. Timeline Reader ‫לטאבלטים‬ Canvas‫אלמנטים חדשים‬html5.labs.ap.org 31
  32. 32. ‫תרשימים וגרפיקה עשירה‬Canvasoffline gregmurray.org/fish 32
  33. 33. CSS 33
  34. 34. touchsolitaire.mobi/appj.mp/w3cmo15 www.isoc.org.il www.w3c.org.il eyal@isoc.org.il
  35. 35. touchstyle.mobi/app/ 35
  36. 36. ‫• התאמה לגודל מסך‬ ‫63‬
  37. 37. ‫מי משתמש‬ ‫73‬
  38. 38. <video> • 38
  39. 39. VideoGeolocationWeb StorageWebSocketsJanuary 26, 2011: Facebook to empower its massive mobile platform with HTML5 39
  40. 40. • Drag and drop 40
  41. 41. 41
  42. 42. ‫עוד מסכים...‬ ‫‪TV‬‬
  43. 43. Build once deploy everywhere
  44. 44. ‫מה לעשות עכשיו?‬ ‫44‬
  45. 45. ‫• למדו 5‪HTML‬‬ ‫• יישמו בהדרגתיות‬ ‫• השתמשו בהגדרות החדשות‬ ‫• שלבו את הארכיטקטורה‬‫• זכרו – התקן נמצא בתהליך עבודה‬ ‫54‬
  46. 46. MOBILE 46
  47. 47. Mobile vs deskop internt userprojection 2007-2015j.mp/dsafaa Source: thenextweb.com 47
  48. 48. ‫מחקר :‪ Cisco‬צמיחה של פי 62‬ ‫בתעבורת הנתונים ברשת הסלולרית‬ ‫עד 5102‬‫‪http://bit.ly/eP3OWQ‬‬
  49. 49. ‫גרטנר: ב- 1102 יירכשו בארה"ב יותר‬ ‫טלפונים חכמים מכל מוצר צריכה‬ ‫אלקטרוני אחר‬‫‪http://bit.ly/hZK3Gm‬‬
  50. 50. In 2015, tablets will generate asmuch traffic as the entire global mobile network of 2010…http://bit.ly/g2Twdf
  51. 51. The average amount of traffic per smartphone doubled in 2010http://bit.ly/g2Twdf
  52. 52. Via StatCounter:http://gs.statcounter.com/#mobile_os-ww-monthly-200812-201105
  53. 53. mobiles share of web consumption
  54. 54. ‫איך לחשוב על זה?‬ ‫סוגים שונים( גדלים שונים למסך)‬ ‫1.‬ ‫סנסורים )מיקום ,מצפן ,מצלמה)...‬ ‫2.‬‫קלט אחר( הזנת קלט בצורה שונה ,קולי ,תמונה)‬ ‫3.‬ ‫חיבוריות( רוחב פס ,עלות/ניתוק ,מטוס/עומס)‬ ‫4.‬ ‫משתמש ממוקד.‬ ‫5.‬ ‫מגבלות ובעיות.‬ ‫6.‬ ‫הרבה פלטפורמות.‬ ‫7.‬ ‫‪Native vs web‬‬ ‫8.‬
  55. 55. ‫סוגי מכשירים ניידים‬ •Iphone/android/nokia/win •Laptop •Tablets • Mobile phone / PDA •(Wearable computer)
  56. 56. ‫סנסורים‬‫מיקרופון ,מצלמה ,כיוון ,‪GPS‬‬ ‫קלט‬‫מגע, סנסורים, אוטומטי...‬
  57. 57. LBS = Location bases services :‫מאת‬ 23/12/10 12:44http://gigaom.com/2010/02/09/everything-you-ever-wanted-to-know-about-
  58. 58. ‫‪Waze‬‬ ‫• מידע משתמשים מה-‪GPS‬‬ ‫44:21 01/21/32‬
  59. 59. How The iPhone Became The World’s Most Popular CameraVia thenextweb.com 23/12/10 12:44tnw.co/muiwbB
  60. 60. Google GogglesUse pictures to search the web 60googlemobile.blogspot.com
  61. 61. Facebook places gowallafoursquare.com 61
  62. 62. Augmented Realitycombine a view of the physical world with informationj.mp/w3il70 62
  63. 63. ‫- ‪AR‬מקל על תפעול המדפסת‬‫21‪j.mp/adfeg‬‬ ‫36‬
  64. 64. ‫‪DBpedia Mobile‬‬ ‫פריטים מוויקיפדיה‬ ‫על מפה‬ ‫טכנולוגיות:‬ ‫- סמנטי‬ ‫- מובייל‬ ‫- זיהוי מיקום‬ ‫‪beckr.org/DBpediaMobile‬‬ ‫46‬
  65. 65. by: Amber Case 26/02/11 16:00
  66. 66. by: Amber Case 26/02/11 16:00
  67. 67. 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 rolloversImage 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) 67
  68. 68. ‫חיבוריות‬‫(רוחב פס, עלות/ניתוק, מטוס/עומס)‬
  69. 69. ‫אחסון מידע מקומי וסנכרון‬
  70. 70. 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.com70
  71. 71. ‫משתמש ממוקד‬• Immediate• goal-directed• specific pieces of information• relevant to context.• less interested in lengthy documents or in browsing.bit.ly/egXfIx
  72. 72. Eg.schedules for a journey they are currently undertaking.
  73. 73. ‫מגבלות ובעיות‬• keyboard and the screen• limited processing power• processing uses more power as does communication• limited memory• …bit.ly/egXfIx
  74. 74. ‫אל תכבידו על משאבי המכשיר‬ ‫זיכרון‬ ‫עיבוד‬ ‫רוחב פס‬ Latency Interaction method Data consistency --- Caching 74
  75. 75. ‫להתחיל ציק צק‬ 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. 75
  76. 76. ‫כמות הפלטפורמות‬
  77. 77. Smartphone market share - Q1 2010(Q1 ’10:23% of mobileconsumers havea smartphone)bit.ly/h755vK 77
  78. 78. 78
  79. 79. ‫אז צריך לבנות אתר נפרד לכל סוג‬ ‫מכשיר?‬ ‫לא.‬ ‫אפשר לבנות חלופות ווביות‬
  80. 80. Native vs web 80
  81. 81. Web ApplicationWeb page(s) that provide an "application-like" experiencewithin a Web browser. www.isoc.org.il www.w3c.org.il 81 eyal@isoc.org.il
  82. 82. 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
  83. 83. Kiva‫דוגמא‬j.mp/w3cmo10 83
  84. 84. ‫כשאי אפשר אפליקציה במכשיר – אפליקציה‬ ‫וובית‬j.mp/w3il80 www.isoc.org.il www.w3c.org.il 84 eyal@isoc.org.il
  85. 85. ‫‪API‬ים חדשים לדפדפן‬ ‫קיימים‬ ‫• מיקום)‪(geolocation API‬‬ ‫בעבודה‬ ‫• ‪API‬לרשימת אנשי קשר‬ ‫• ‪ API‬ליומן‬ ‫• ‪API‬למדיה‬ ‫• ‪API‬להודעות) )‪SMS, MMS, email‬‬ ‫• ‪API‬למידע מערכת‬ ‫• ‪API‬לגלרייה‬ ‫• ‪DeviceOrientation‬‬
  86. 86. ‫הכירו את‬Mobile Web Application Best Practices Cards j.mp/thecards•
  87. 87. Use Device Classification to Simplify Content AdaptationClass 1: Basic XHTML support, no or very basic scripting.Class 2: Full AJAX and JavaScript support.Class 3: Advanced device APIsClass 1: Pointer Based.Class 2: Touch Based. 88
  88. 88. frameworks89
  89. 89. Mobile web application frameworks• Sencha Touch• jQuery MobileInto native• PhoneGap• Titaniumj.mp/mob24490
  90. 90. Jquery mobile phone/browser supportjquerymobile.com/gbs/ 91
  91. 91. ‫כנס שנתי‬isoc.org.il/conf2011/mobile 92
  92. 92. ‫אבטחת מידע‬
  93. 93. ‫בעיות?‬ ‫49‬
  94. 94. ‫כל המקומות בהם האייפון שלי היה‬ ‫מאז שקניתי אותו‬‫מאת רן יניב הרנשטיין1801/‪- ranh.co.il‬‬
  95. 95. ‫מעדכנים סטטוס? תשלמו יותר על ביטוח תכולת‬ ‫הדירה‬‫54‪j.mp/iscd‬‬ ‫69‬
  96. 96. Air Force issues warning to troopsconcerning Facebook Placesj.mp/9kWt3q 97
  97. 97. ‫כביש פטפטן: צירי ביטחון שוטף של צה"ל חשופים‬ ‫ב‪-Waze‬‬‫מאת חורים ברשת‪: http://bit.ly/i71Esb‬‬ ‫89‬
  98. 98. ‫ישראל‬
  99. 99. : ‫נתונים מאת‬http://gs.statcounter.com
  100. 100. ‫רוחב פס‬ ‫-כניסת חברת החשמל‬ ‫-הכנסת כבל תת ימי נוסף‬‫עשוים לשנות את חוויית השימוש באינטרנט‬
  101. 101. ‫בריאות‬ ‫אנו בתחילת פריצת דרך בשירותי בריאות מקוונים.‬ ‫קופ"ח כללית החלה בשירותים שכיום הם בלעדיים,‬‫יש להניח שהתחרות בין קופות חולים וחסכון בעלויות‬ ‫ידחוף את כולם להרחבת השירותים .‬ ‫השאלה היא האם ייוצר הפער הדיגיטאלי בו‬ ‫לפריפריה יהיה ‪ tele medicine‬ולאיזור המרכז יהיו‬ ‫שירותים רפואיים ברמה גבוהה )כלומר אישיים)‬
  102. 102. ‫התערבות ממשלתית‬‫מגמה עולמית היא של יותר התערבות ממשלתית‬ ‫באינטרנט )גם פנימית, לא רק לאיום חיצוני(‬‫כל אירוע בעייתי עלול לעורר תגובות של "פאניקה‬‫מוסרית" ולגרור חקיקה של התערבות עמוקה של‬ ‫גורמי מימשל.‬
  103. 103. ‫חוקים‬ ‫יידוע לקוחות בדבר אתרים פוגעניים ברשת האינטרנט ואפשרויות ההגנה‬ ‫•‬ ‫מפניהם‬ ‫הצעת חוק איסור לשון הרע )תיקון - חשיפת פרטי מעוול(‬ ‫•‬ ‫הצעת חוק אחריות אתר אינטרנט לתגובות הגולשים‬ ‫•‬ ‫איסור גביית עמלה בעסקה שבוצעה באמצעות האינטרנט‬ ‫•‬ ‫הנגשת אתרים‬ ‫•‬‫הצעת חוק התקשורת )בזק ושידורים( )תיקון - ניידות שירותי דואר אלקטרוני(‬ ‫•‬ ‫הצעת חוק העונשין )תיקון – משחקים אסורים, הגרלות והימורים ברשת‬ ‫•‬ ‫האינטרנט(‬
  104. 104. ‫הדבר הקבוע הוא חדשנות ושינוי‬ ‫:פייסבוק נוצר ב 4002 – תוך 7 שנים הוא נהפך‬‫לרבים שווה ערך ל"אינטרנט" : אז מי מוכן לדבר על‬ ‫מגמות לעתיד?...‬
  105. 105.  ‫תודה‬ ‫אייל סלע‬ eyal@isoc.org.il j.mp/eyalprs : ‫המצגת‬ 106
  106. 106. ‫‪Q&A‬‬ ‫- חשיפת פרטי גולשים?‬ ‫- חסימת אתרים?‬ ‫- קוד פתוח‬‫- שיתוף וחשיפת מידע, סנסורים, רשתות חברתיות...‬

×