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

‫1102/3/1‬ ‫מגמות באינטרנט‬ ‫‪file:///H:/Erase/mobil‬‬ ‫‪eOK.png‬‬ ‫אייל סלע‬ ‫מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה-‪ W3C‬הישראלי‬ ‫1‬

‫תוכנית‬‫אודות -איגוד האינטרנט ו ‪-W3C‬‬ ‫‪‬‬ ‫מגמות בעולם הווב‬ ‫‪‬‬ ‫‪Mobile‬‬ ‫‪‬‬ ‫מגמות בישראל‬ ‫‪‬‬ ‫שאלות‬ ‫‪‬‬ ‫2‬

‫ווב)‪(web‬‬ ‫האינטרנט‬‫)המא ָג(‬ ‫ַ ֲר‬ ‫)המ ְשתת(‬ ‫ִ ר ֶׁ ֶׁ‬ ‫3‬

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

‫מה אנחנו עושים‬ ‫תשתית )שמות מתחם, ‪(IIX‬‬ ‫•‬ ‫חברה )גיל שלישי, אוכלוסיות, קו חם ...(‬ ‫•‬ ‫תוכן )מפגשים, פרסומים ....(‬ ‫•‬ ‫משפט )צנזורה, ממשל, 6‪(...... ,IPV‬‬ ‫•‬ ‫טכנולוגיה )‪ ,W3C ,STS‬קוד פתוח(‬ ‫•‬‫34:70 11/40/62‬

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

What Will The Internet LookLike In 10 Years?shttp://www.isoc.org/tools/blogs/scenarios/ 26/02/11 16:00

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

www.isoc.org.il www.w3c.org.ilbit.ly/g63C9F eyal@isoc.org.il

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

What we doj.mp/w3cac 11

HTML5 ‫ושות‬ 12

‫5‪HTML‬‬ ‫4‪HTML‬‬‫אפליקציות‬ ‫דפים‬ ‫31‬

‫איך?‬ ‫•אלמנטים חדשים‬‫• הסרת ושינוי אלמנטים‬ ‫•ממשקי תכנות חדשים‬ ‫•סוגי תוכן חדשים‬ ‫41‬

And it’s all free!

The Open web platformcaniuse.com 16

‫תמיכת דפדפנים‬ ‫71‬

‫היצרנים מתחרים על רמת יישום התקן‬ ‫בדפדפנים‬ ‫81‬

‫יכולות ואפליקציות‬ ‫91‬

Video element Audio elementvideojs.com www.isoc.org.il www.w3c.org.il 20 eyal@isoc.org.il

Offline web applications 21

(geolocation)‫זיהוי מיקום‬m.radiustalk.com www.isoc.org.il www.w3c.org.il 22 eyal@isoc.org.il

Drag and drop, files www.isoc.org.il www.w3c.org.il 23 eyal@isoc.org.il

Web Notifications 24

File API 25

contenteditable attribute‫עורך טקסט עשיר‬ aloha-editor.com 26

Web Sockets Streamie ‫זמן אמת‬ Notifications ‫איתור מיקום‬ streamie.org • 27

Web Workers 28

SVG 29

canvas 30

Timeline Reader ‫לטאבלטים‬ Canvas‫אלמנטים חדשים‬html5.labs.ap.org 31

‫תרשימים וגרפיקה עשירה‬Canvasoffline gregmurray.org/fish 32

CSS 33

touchsolitaire.mobi/appj.mp/w3cmo15 www.isoc.org.il www.w3c.org.il eyal@isoc.org.il

touchstyle.mobi/app/ 35

‫• התאמה לגודל מסך‬ ‫63‬

‫מי משתמש‬ ‫73‬

<video> • 38

VideoGeolocationWeb StorageWebSocketsJanuary 26, 2011: Facebook to empower its massive mobile platform with HTML5 39

• Drag and drop 40

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

Build once deploy everywhere

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

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

MOBILE 46

Mobile vs deskop internt userprojection 2007-2015j.mp/dsafaa Source: thenextweb.com 47

‫מחקר :‪ Cisco‬צמיחה של פי 62‬ ‫בתעבורת הנתונים ברשת הסלולרית‬ ‫עד 5102‬‫‪http://bit.ly/eP3OWQ‬‬

‫גרטנר: ב- 1102 יירכשו בארה"ב יותר‬ ‫טלפונים חכמים מכל מוצר צריכה‬ ‫אלקטרוני אחר‬‫‪http://bit.ly/hZK3Gm‬‬

In 2015, tablets will generate asmuch 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

Via StatCounter:http://gs.statcounter.com/#mobile_os-ww-monthly-200812-201105

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‬‬ ‫קלט‬‫מגע, סנסורים, אוטומטי...‬

LBS = Location bases services :‫מאת‬ 23/12/10 12:44http://gigaom.com/2010/02/09/everything-you-ever-wanted-to-know-about-

‫‪Waze‬‬ ‫• מידע משתמשים מה-‪GPS‬‬ ‫44:21 01/21/32‬

How The iPhone Became The World’s Most Popular CameraVia thenextweb.com 23/12/10 12:44tnw.co/muiwbB

Google GogglesUse pictures to search the web 60googlemobile.blogspot.com

Facebook places gowallafoursquare.com 61

Augmented Realitycombine a view of the physical world with informationj.mp/w3il70 62

‫- ‪AR‬מקל על תפעול המדפסת‬‫21‪j.mp/adfeg‬‬ ‫36‬

‫‪DBpedia Mobile‬‬ ‫פריטים מוויקיפדיה‬ ‫על מפה‬ ‫טכנולוגיות:‬ ‫- סמנטי‬ ‫- מובייל‬ ‫- זיהוי מיקום‬ ‫‪beckr.org/DBpediaMobile‬‬ ‫46‬

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) 67

‫חיבוריות‬‫(רוחב פס, עלות/ניתוק, מטוס/עומס)‬

‫אחסון מידע מקומי וסנכרון‬

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

‫משתמש ממוקד‬• 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 74

‫להתחיל ציק צק‬ 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

‫כמות הפלטפורמות‬

Smartphone market share - Q1 2010(Q1 ’10:23% of mobileconsumers havea smartphone)bit.ly/h755vK 77

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

Native vs web 80

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

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 83

‫כשאי אפשר אפליקציה במכשיר – אפליקציה‬ ‫וובית‬j.mp/w3il80 www.isoc.org.il www.w3c.org.il 84 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. 88

frameworks89

Mobile web application frameworks• Sencha Touch• jQuery MobileInto native• PhoneGap• Titaniumj.mp/mob24490

Jquery mobile phone/browser supportjquerymobile.com/gbs/ 91

‫כנס שנתי‬isoc.org.il/conf2011/mobile 92

‫אבטחת מידע‬

‫בעיות?‬ ‫49‬

‫כל המקומות בהם האייפון שלי היה‬ ‫מאז שקניתי אותו‬‫מאת רן יניב הרנשטיין1801/‪- ranh.co.il‬‬

‫מעדכנים סטטוס? תשלמו יותר על ביטוח תכולת‬ ‫הדירה‬‫54‪j.mp/iscd‬‬ ‫69‬

Air Force issues warning to troopsconcerning Facebook Placesj.mp/9kWt3q 97

‫כביש פטפטן: צירי ביטחון שוטף של צה"ל חשופים‬ ‫ב‪-Waze‬‬‫מאת חורים ברשת‪: http://bit.ly/i71Esb‬‬ ‫89‬

‫ישראל‬

: ‫נתונים מאת‬http://gs.statcounter.com

‫רוחב פס‬ ‫-כניסת חברת החשמל‬ ‫-הכנסת כבל תת ימי נוסף‬‫עשוים לשנות את חוויית השימוש באינטרנט‬

‫בריאות‬ ‫אנו בתחילת פריצת דרך בשירותי בריאות מקוונים.‬ ‫קופ"ח כללית החלה בשירותים שכיום הם בלעדיים,‬‫יש להניח שהתחרות בין קופות חולים וחסכון בעלויות‬ ‫ידחוף את כולם להרחבת השירותים .‬ ‫השאלה היא האם ייוצר הפער הדיגיטאלי בו‬ ‫לפריפריה יהיה ‪ tele medicine‬ולאיזור המרכז יהיו‬ ‫שירותים רפואיים ברמה גבוהה )כלומר אישיים)‬

‫התערבות ממשלתית‬‫מגמה עולמית היא של יותר התערבות ממשלתית‬ ‫באינטרנט )גם פנימית, לא רק לאיום חיצוני(‬‫כל אירוע בעייתי עלול לעורר תגובות של "פאניקה‬‫מוסרית" ולגרור חקיקה של התערבות עמוקה של‬ ‫גורמי מימשל.‬

‫חוקים‬ ‫יידוע לקוחות בדבר אתרים פוגעניים ברשת האינטרנט ואפשרויות ההגנה‬ ‫•‬ ‫מפניהם‬ ‫הצעת חוק איסור לשון הרע )תיקון - חשיפת פרטי מעוול(‬ ‫•‬ ‫הצעת חוק אחריות אתר אינטרנט לתגובות הגולשים‬ ‫•‬ ‫איסור גביית עמלה בעסקה שבוצעה באמצעות האינטרנט‬ ‫•‬ ‫הנגשת אתרים‬ ‫•‬‫הצעת חוק התקשורת )בזק ושידורים( )תיקון - ניידות שירותי דואר אלקטרוני(‬ ‫•‬ ‫הצעת חוק העונשין )תיקון – משחקים אסורים, הגרלות והימורים ברשת‬ ‫•‬ ‫האינטרנט(‬

‫הדבר הקבוע הוא חדשנות ושינוי‬ ‫:פייסבוק נוצר ב 4002 – תוך 7 שנים הוא נהפך‬‫לרבים שווה ערך ל"אינטרנט" : אז מי מוכן לדבר על‬ ‫מגמות לעתיד?...‬

 ‫תודה‬ ‫אייל סלע‬ eyal@isoc.org.il j.mp/eyalprs : ‫המצגת‬ 106

‫‪Q&A‬‬ ‫- חשיפת פרטי גולשים?‬ ‫- חסימת אתרים?‬ ‫- קוד פתוח‬‫- שיתוף וחשיפת מידע, סנסורים, רשתות חברתיות...‬

http://www.w3c.org.il	108
http://eyalsela.blogspot.com	51
http://w3c.cpo.co.il	24
http://w3c.org.il	3
https://test.w3c.org.il	2
https://www.w3c.org.il	1
http://www.directrss.co.il	1

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

by Israeli Internet Association technology committee on May 02, 2011

Accessibility

Upload Details

Usage Rights

7 Embeds 190

Statistics

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