HTML5, ווב נייד ותקנים פתוחים ברשת
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,081 views

 

Statistics

Views

Total Views
1,081
Views on SlideShare
941
Embed Views
140

Actions

Likes
0
Downloads
2
Comments
0

8 Embeds 140

http://eyalsela.blogspot.com 53
http://www.w3c.org.il 35
http://eyalsela.blogspot.ru 24
http://eyalsela.blogspot.co.il 23
http://eyalsela.blogspot.gr 2
http://webcache.googleusercontent.com 1
http://www.directrss.co.il 1
https://www.w3c.org.il 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • ‫1102/3/1‬ ‫5‪ ,HTML‬ווב נייד‬ ‫ותקנים פתוחים‬ ‫ברשת‬ ‫‪file:///H:/Erase/mob‬‬ ‫‪ileOK.png‬‬ ‫אייל סלע‬ ‫מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה-‪ W3C‬הישראלי‬ ‫1‬
  • ‫תוכנית‬ ‫• ‪MOBILE‬‬ ‫• ‪Native vs web‬‬ ‫• 5‪ HTML‬ושות‬‫• יכולות ואפליקציות‬ ‫• מי משתמש‬ ‫2‬
  • ‫איגוד האינטרנט הישראלי‬ ‫שלוחת האיגוד הבינלאומי‬ ‫עמותה ללא מטרת רווח‬‫פועל לקידום האינטרנט והטמעתו בישראל כתשתית‬ ‫טכנולוגית, מחקרית, חינוכית, חברתית ועסקית‬ ‫3‬
  • ‫‪W3C‬‬ ‫• ארגון בינלאומי‬ ‫• כ-053 ארגונים‬ ‫• פורום ניטראלי ליצירת תקני הווב‬ ‫• משימה:‬ ‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח‬ ‫ארוך.‬ ‫4‬
  • ‫ווב )‪(web‬‬ ‫האינטרנט‬ ‫)המא ָג(‬ ‫ַ ֲר‬ ‫)המ ְשתת(‬ ‫ִ ר ֶׁ ֶׁ‬ ‫5‬
  • MOBILE 6
  • Mobile vs deskop internt userprojection 2007-2015j.mp/dsafaa Source: thenextweb.com 7
  • ‫מחקר ‪ :Cisco‬צמיחה של פי 62‬ ‫בתעבורת הנתונים ברשת הסלולרית‬ ‫עד 5102‬‫‪http://bit.ly/eP3OWQ‬‬
  • ‫גרטנר: ב- 1102 יירכשו בארה"ב‬ ‫יותר טלפונים חכמים מכל מוצר‬ ‫צריכה אלקטרוני אחר‬‫‪http://bit.ly/hZK3Gm‬‬
  • In 2015, tablets will generate as much traffic as the entire global mobile network of 2010…http://bit.ly/g2Twdf
  • The average amount of traffic per smartphone doubled in 2010http://bit.ly/g2Twdf
  • mobiles share of web consumption
  • ‫איך לחשוב על זה?‬ ‫סוגים שונים (גדלים שונים למסך)‬ ‫1.‬ ‫סנסורים )מיקום ,מצפן ,מצלמה...)‬ ‫2.‬‫קלט אחר (הזנת קלט בצורה שונה , קולי , תמונה)‬ ‫3.‬ ‫חיבוריות (רוחב פס , עלות/ניתוק ,מטוס/ עומס)‬ ‫4.‬ ‫משתמש ממוקד.‬ ‫5.‬ ‫מגבלות ובעיות.‬ ‫6.‬ ‫הרבה פלטפורמות.‬ ‫7.‬ ‫‪Native vs web‬‬ ‫8.‬
  • ‫סוגי מכשירים ניידים‬ •Iphone/android/nokia/win •Laptop •Tablets • Mobile phone / PDA •(Wearable computer)
  • ‫סנסורים‬‫‪ ,GPS‬כיוון, מצלמה, מיקרופון...‬
  • ‫קלט‬‫מהסנסורים..., אוטומטי , מגע,‬
  • Google GogglesUse pictures to search the web 17googlemobile.blogspot.com
  • : Foursquare‫דוגמא‬foursquare.com 18
  • Augmented Realitycombine a view of the physical world with informationj.mp/w3il70 19
  • ‫‪ - AR‬מקל על תפעול המדפסת‬‫21‪j.mp/adfeg‬‬ ‫02‬
  • ‫‪DBpedia Mobile‬‬ ‫פריטים מוויקיפדיה‬ ‫על מפה‬ ‫טכנולוגיות:‬ ‫- סמנטי‬ ‫- מובייל‬ ‫- זיהוי מיקום‬ ‫‪beckr.org/DBpediaMobile‬‬ ‫12‬
  • by: Amber Case 26/02/11 16:00
  • by: Amber Case 26/02/11 16:00
  • 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) 24
  • ‫חיבוריות‬‫(רוחב פס, עלות/ניתוק, מטוס/עומס)‬
  • ‫אחסון מידע מקומי וסנכרון‬
  • 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.com27
  • ‫משתמש ממוקד‬• Immediate• goal-directed• specific pieces of information• relevant to context.• less interested in lengthy documents or in browsing.bit.ly/egXfIx
  • Eg.schedules for a journey they are currently undertaking.
  • ‫מגבלות ובעיות‬ • keyboard and the screen • limited processing power • processing uses more power as does communication • limited memory • …bit.ly/egXfIx
  • ‫אל תכבידו על משאבי המכשיר‬ ‫זיכרון‬ ‫עיבוד‬ ‫רוחב פס‬ Latency Interaction method Data consistency --- Caching 31
  • ‫להתחיל ציק צק‬ 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. 32
  • ‫כמות הפלטפורמות‬
  • Smartphone market share - Q1 2010(Q1 ’10:23% of mobileconsumers havea smartphone)bit.ly/h755vK 34
  • 35
  • ‫אז צריך לבנות אתר נפרד לכל סוג‬ ‫מכשיר?‬ ‫לא.‬ ‫אפשר לבנות חלופות ווביות‬
  • Native vs web 37
  • Web ApplicationWeb page(s) that provide an "application-like" experiencewithin a Web browser. www.isoc.org.il www.w3c.org.il 38 eyal@isoc.org.il
  • 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
  • Kiva‫דוגמא‬j.mp/w3cmo10 40
  • ‫כשאי אפשר אפליקציה במכשיר – אפליקציה‬ ‫וובית‬j.mp/w3il80 www.isoc.org.il www.w3c.org.il 41 eyal@isoc.org.il
  • ‫‪API‬ים חדשים לדפדפן‬ ‫קיימים‬ ‫• מיקום )‪(geolocation API‬‬ ‫בעבודה‬ ‫• ‪ API‬לרשימת אנשי קשר‬ ‫• ‪ API‬ליומן‬ ‫• ‪ API‬למדיה‬ ‫• ‪ API‬להודעות )‪)SMS, MMS, email‬‬ ‫• ‪ API‬למידע מערכת‬ ‫• ‪ API‬לגלרייה‬ ‫• ‪DeviceOrientation‬‬
  • ‫הכירו את‬Mobile Web Application Best Practices Cards j.mp/thecards•
  • 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. 45
  • frameworks46
  • Mobile web application frameworks• Sencha Touch• jQuery MobileInto native• PhoneGap• Titaniumj.mp/mob24447
  • Jquery mobile phone/browser supportjquerymobile.com/gbs/ 48
  • ‫כנס שנתי‬isoc.org.il/conf2011/mobile 49
  • HTML5 ‫ושות‬ 50
  • ‫5‪HTML‬‬ ‫4‪HTML‬‬‫אפליקציות‬ ‫דפים‬ ‫15‬
  • ‫איך?‬ ‫•אלמנטים חדשים‬‫• הסרת ושינוי אלמנטים‬ ‫• ממשקי תכנות חדשים‬ ‫• סוגי תוכן חדשים‬ ‫25‬
  • And it’s all free!
  • The Open web platformcaniuse.com 54
  • ‫תמיכת דפדפנים‬ ‫55‬
  • ‫היצרנים מתחרים על רמת יישום התקן‬ ‫בדפדפנים‬ ‫65‬
  • ‫יכולות ואפליקציות‬ ‫75‬
  • Video element Audio elementvideojs.com www.isoc.org.il www.w3c.org.il 58 eyal@isoc.org.il
  • Offline web applications 59
  • (geolocation)‫זיהוי מיקום‬m.radiustalk.com www.isoc.org.il www.w3c.org.il 60 eyal@isoc.org.il
  • Drag and drop, files www.isoc.org.il www.w3c.org.il 61 eyal@isoc.org.il
  • Web Notifications 62
  • File API 63
  • contenteditable attribute‫עורך טקסט עשיר‬ aloha-editor.com 64
  • Web Sockets Streamie ‫זמן אמת‬ Notifications ‫איתור מיקום‬ streamie.org • 65
  • Web Workers 66
  • SVG 67
  • canvas 68
  • Timeline Reader ‫לטאבלטים‬ Canvas‫אלמנטים חדשים‬ html5.labs.ap.org 69
  • ‫תרשימים וגרפיקה עשירה‬Canvasoffline gregmurray.org/fish 70
  • CSS 71
  • touchsolitaire.mobi/appj.mp/w3cmo15 www.isoc.org.il www.w3c.org.il eyal@isoc.org.il
  • touchstyle.mobi/app/ 73
  • ‫• התאמה לגודל מסך‬‫0102/‪iswc.mobi‬‬ ‫47‬
  • ‫מי משתמש‬ ‫57‬
  • <video> • 76
  • VideoGeolocationWeb StorageWebSocketsJanuary 26, 2011: Facebook to empower its massive mobile platform with HTML5 77
  • • Drag and drop 78
  • 79
  • ‫עוד מסכים...‬ ‫‪TV‬‬
  • Build once deploy everywhere
  • ‫מה לעשות עכשיו?‬ ‫28‬
  • ‫• למדו 5‪HTML‬‬ ‫• יישמו בהדרגתיות‬ ‫• השתמשו בהגדרות החדשות‬ ‫• שלבו את הארכיטקטורה‬‫• זכרו – התקן נמצא בתהליך עבודה‬ ‫38‬
  • ‫תודה‬ ‫אייל סלע‬‫‪eyal@isoc.org.il‬‬ ‫המצגת:‬ ‫48‬