מגמות באינטרנט
אייל סלעהישראלי-W3Cאיגוד האינטרנט הישראלי ומשרד ה, מנהל פרויקטים
1
1/3/2011
file:///H:/Erase/mobil
eOK.png
2
תוכנית
והאינטרנטאיגוד-אודות-W3C
הוובבעולםמגמות
Mobile
בישראלמגמות
שאלות
האינטרנט
3
(web)וובת) ת (המארג)(המרש
איגוד האינטרנט הישראלישלוחת האיגוד הבינלאומי
עמותה ללא מטרת רווח
פועל לקידום האינטרנט והטמעתו בישראל כתשתית
חברתית ועסקית, חינוכית, מחקרית, טכנולוגית
מה אנחנו עושים
)IIX, שמות מתחם(תשתית •
...)קו חם , אוכלוסיות, גיל שלישי(חברה •
....)פרסומים , מפגשים(תוכן •
......), IPV6, ממשל, צנזורה(משפט •
)קוד פתוח, STS ,W3C(טכנולוגיה •
26/04/11 07:43
ISOC
Internet related standards educationand policy
26/04/11 07:43
(IETF), the Internet Architecture Board (IAB), the Internet
Engineering Steering Group (IESG), and the Internet Research
Task Force (IRTF)
IPV6
….
What Will The Internet Look
Like In 10 Years?shttp://www.isoc.org/tools/blogs/scenarios/
26/02/11 16:00
8
W3C
ארגון בינלאומי•
ארגונים 350-כ•
פורום ניטראלי ליצירת תקני הווב•
:משימה•
להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח
פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח
.ארוך
10
cpro3bit.ly/w
Recommendation track
•Review
•implementation
•interoperability.
-Fulfill all requirements
-seeks technical review
-feedback
- first plementation
-sufficient implementation experience
-sent to the Advisory Committee for
review
appropriate for widespread
deployment and promote
HTML5
'ושות12
HTML4HTML5
אפליקציותדפים
13
?איך
אלמנטים חדשים•
הסרת ושינוי אלמנטים•
ממשקי תכנות חדשים•
סוגי תוכן חדשים•
14
And it’s all free!
תמיכת דפדפנים
17
היצרנים מתחרים על רמת יישום התקן
בדפדפנים
18
יכולות ואפליקציות
19
www.isoc.org.il
www.w3c.org.il
Video element Audio element
videojs.com20
www.isoc.org.il
www.w3c.org.il
(geolocation)זיהוי מיקום
m.radiustalk.com22
contenteditable attribute
עורך טקסט עשיר
aloha-editor.com
26
זמן אמת
Notifications
איתור מיקום
•streamie.org 27
Streamie
Web Sockets
canvas
30
Timeline Reader
html5.labs.ap.org 31
לטאבלטים
Canvas
אלמנטים חדשים
תרשימים וגרפיקה עשירה
Canvas
offline
32
gregmurray.org/fish
CSS
33
www.isoc.org.il
www.w3c.org.il
touchsolitaire.mobi/app
j.mp/w3cmo15
התאמה לגודל מסך•
36
מי משתמש
37
•<video>
38
Video
Geolocation
Web Storage
WebSockets
39January 26, 2011: Facebook to empower its massive mobile platform with HTML5
• Drag and drop
40
41
...עוד מסכים
TV
Build once deploy
everywhere
?מה לעשות עכשיו
44
HTML5למדו•
יישמו בהדרגתיות•
השתמשו בהגדרות החדשות•
שלבו את הארכיטקטורה•
התקן נמצא בתהליך עבודה–זכרו •
45
MOBILE
46
Mobile vs deskop internt user
projection 2007-2015
j.mp/dsafaa 47Source: thenextweb.com
26צמיחה של פי :Ciscoמחקר
בתעבורת הנתונים ברשת הסלולרית
2015עד
http://bit.ly/eP3OWQ
ב יותר "יירכשו בארה 2011 -ב: גרטנר
טלפונים חכמים מכל מוצר צריכה
אלקטרוני אחר
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
2010
http://bit.ly/g2Twdf
Via StatCounter:
http://gs.statcounter.com/#mobile_os-ww-monthly-200812-201105
mobile's share of web consumption
?איך לחשוב על זה (למסךשוניםגדלים)שוניםסוגים1.
(...מצלמה ,מצפן ,מיקום (סנסורים2.
(תמונה ,קולי ,שונהבצורהקלטהזנת)אחרקלט3.
(עומס/מטוס ,ניתוק/עלות ,פסרוחב)חיבוריות4.
.ממוקדמשתמש5.
.ובעיותמגבלות6.
.פלטפורמותהרבה7.
.8Native vs web
סוגי מכשירים ניידים•Iphone/android/nokia/win
•Laptop
•Tablets
• Mobile phone / PDA
•(Wearable computer)
סנסוריםGPS, מיקרופון ,מצלמה ,כיוון
קלט...אוטומטי, סנסורים, מגע
23/12/10 12:44: מאת
-about-know-to-wanted-ever-you-/everything09/02/2010http://gigaom.com/
location/
LBS = Location bases services
Waze
GPS-מידע משתמשים מה•
23/12/10 12:44
How The iPhone Became The
World’s Most Popular Camera
23/12/10 12:44Via thenextweb.com
tnw.co/muiwbB
Google GogglesUse pictures to search the web
googlemobile.blogspot.com60
Augmented Realitycombine a view of the physical world with information
70il3j.mp/w62
DBpedia Mobileפריטים מוויקיפדיה
על מפה
:טכנולוגיות
סמנטי-
מובייל-
זיהוי מיקום-
64
beckr.org/DBpediaMobile
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)
67
Image by: Dennis Bournique
חיבוריות
(עומס/מטוס, ניתוק/עלות, רוחב פס)
אחסון מידע מקומי וסנכרון
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
70
MapQuest.com
משתמש ממוקד
• 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
זיכרון
עיבוד
רוחב פס
LatencyInteraction 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 before the first view can be displayed.
75
http://www.flickr.com/photos/66475767@N00/4333416050/
כמות הפלטפורמות
Smartphone market share - Q1 2010
bit.ly/h755vK 77
(Q1 ’10:
23% of mobile
consumers have
a smartphone)
78
אז צריך לבנות אתר נפרד לכל סוג
?מכשיר
.לא
אפשר לבנות חלופות ווביות
Native vs web
80
www.isoc.org.il
www.w3c.org.il
Web ApplicationWeb page(s) that provide an "application-like" experience
within a Web browser.
www.isoc.org.il
www.w3c.org.il
(BP1)הבדל מאתר רגיל
include locally executable elements of interactivity and
persistent state.
:למשל
cmbp3bit.ly/wvalidator.w3.org/mobile/
resistible.co.uk/public/eres/-e xtra/touch/1bbc.co.uk/
Kivaדוגמא
10cmo3j.mp/w
83
www.isoc.org.il
www.w3c.org.il
אפליקציה –כשאי אפשר אפליקציה במכשיר
וובית
80il3j.mp/w84
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 Adaptation
88
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.
frameworks
89
Mobile web application frameworks
• Sencha Touch
• jQuery Mobile
Into native
• PhoneGap
• Titanium
90
244j.mp/mob
Jquery mobile phone/browser support
jquerymobile.com/gbs/ 91
כנס שנתי
isoc.org.il/conf2011/mobile92
מידעאבטחת
?בעיות
94
היהשליהאייפוןבהםהמקומותכל
אותושקניתימאז
-/1081ranh.co.ilמאת רן יניב הרנשטיין
תשלמו יותר על ביטוח תכולת ? מעדכנים סטטוס
הדירה
45j.mp/iscd96
Air Force issues warning to troops
concerning Facebook Places
j.mp/9kWt3q97
ל חשופים "צירי ביטחון שוטף של צה: כביש פטפטן
Waze-ב
Esb71http://bit.ly/i: 98מאת חורים ברשת
ישראל
:נתונים מאת
http://gs.statcounter.com
רוחב פס
כניסת חברת החשמל-
הכנסת כבל תת ימי נוסף-
עשוים לשנות את חוויית השימוש באינטרנט
בריאות
. אנו בתחילת פריצת דרך בשירותי בריאות מקוונים
, ח כללית החלה בשירותים שכיום הם בלעדיים"קופ
יש להניח שהתחרות בין קופות חולים וחסכון בעלויות
.ידחוף את כולם להרחבת השירותים
השאלה היא האם ייוצר הפער הדיגיטאלי בו ולאיזור המרכז יהיו tele medicineלפריפריה יהיה
(כלומר אישיים(שירותים רפואיים ברמה גבוהה
התערבות ממשלתית
מגמה עולמית היא של יותר התערבות ממשלתית
)לא רק לאיום חיצוני, גם פנימית(באינטרנט
פאניקה "כל אירוע בעייתי עלול לעורר תגובות של
ולגרור חקיקה של התערבות עמוקה של " מוסרית.גורמי מימשל
חוקים
יידוע לקוחות בדבר אתרים פוגעניים ברשת האינטרנט ואפשרויות ההגנה •
מפניהם
)חשיפת פרטי מעוול -תיקון (הצעת חוק איסור לשון הרע •
הצעת חוק אחריות אתר אינטרנט לתגובות הגולשים•
איסור גביית עמלה בעסקה שבוצעה באמצעות האינטרנט•
הנגשת אתרים•
)ניידות שירותי דואר אלקטרוני -תיקון ) (בזק ושידורים(הצעת חוק התקשורת •
הגרלות והימורים ברשת , משחקים אסורים–תיקון (הצעת חוק העונשין •
)האינטרנט
הדבר הקבוע הוא חדשנות ושינוי
שנים הוא נהפך 7תוך –2004פייסבוק נוצר ב :
אז מי מוכן לדבר על " : אינטרנט"לרבים שווה ערך ל?...מגמות לעתיד
Q&A
?חשיפת פרטי גולשים -
?חסימת אתרים -
קוד פתוח -
...רשתות חברתיות, סנסורים, שיתוף וחשיפת מידע -
Recommended
