1 / 83

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

1/3/2011. HTML5 , ווב נייד ותקנים פתוחים ברשת. אייל סלע מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה W3C- הישראלי. file:///H:/Erase/mobileOK.png. 1. תוכנית. MOBILE Native vs web HTML5 ושות' יכולות ואפליקציות מי משתמש. 2. איגוד האינטרנט הישראלי. שלוחת האיגוד הבינלאומי

blue
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 1/3/2011 HTML5 , ווב נייד ותקנים פתוחים ברשת אייל סלעמנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה W3C-הישראלי file:///H:/Erase/mobileOK.png 1

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

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

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

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

  6. MOBILE 6

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

  8. מחקר Cisco: צמיחה של פי 26 בתעבורת הנתונים ברשת הסלולרית עד 2015 http://bit.ly/eP3OWQ

  9. גרטנר: ב- 2011 יירכשו בארה"ב יותר טלפונים חכמים מכל מוצר צריכה אלקטרוני אחר 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. איך לחשוב על זה? • סוגיםשונים (גדליםשוניםלמסך) • סנסורים) מיקום, מצפן, מצלמה...) • קלטאחר (הזנתקלטבצורהשונה, קולי, תמונה) • חיבוריות (רוחבפס, עלות/ניתוק, מטוס/עומס) • משתמשממוקד. • מגבלותובעיות. • הרבהפלטפורמות. • Native vs web

  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 - מקל על תפעול המדפסת j.mp/adfeg12 20

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

  22. by: Amber Case

  23. by: Amber Case

  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 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) Image by: Dennis Bournique 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 the first view can be displayed. http://www.flickr.com/photos/66475767@N00/4333416050/ 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. 38

  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/

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

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

  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. HTML4 HTML5 דפים אפליקציות 51

More Related