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

‫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

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

‫אז צריך לבנות אתר נפרד לכל סוג‬ ‫מכשיר?‬ ‫לא.‬ ‫אפשר לבנות חלופות ווביות‬

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

‫עוד מסכים...‬ ‫‪TV‬‬

Build once deploy everywhere

‫מה לעשות עכשיו?‬ ‫28‬

‫• למדו 5‪HTML‬‬ ‫• יישמו בהדרגתיות‬ ‫• השתמשו בהגדרות החדשות‬ ‫• שלבו את הארכיטקטורה‬‫• זכרו – התקן נמצא בתהליך עבודה‬ ‫38‬

‫תודה‬ ‫אייל סלע‬‫‪eyal@isoc.org.il‬‬ ‫המצגת:‬ ‫48‬

http://eyalsela.blogspot.com	48
http://www.w3c.org.il	17
http://webcache.googleusercontent.com	1
http://www.directrss.co.il	1
https://www.w3c.org.il	1

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

by Israeli Internet Association technology committee on Feb 28, 2011

Accessibility

Upload Details

Usage Rights

5 Embeds 68

Statistics

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