ה-Mobile Web Application Best Practices
הוא מסמך קווים מנחים של ה-W3C, המועמד להפוך להמלצה רשמית (Candidate Recommendation). במהלך הסדנא נעבור באופן מפורט על 35 הסעיפים המופיעים במסמך, המתארים שיטות לשיפור חווית המשתמש באפליקציות ווב למכשירים ניידים, ומזהיר מפני אלו הנחשבות למזיקות
Los organismos públicos y las administraciones publican cada día más datos en la Web. Compartir estos datos facilita lograr una mayor transparencia, permite ofrecer un mejor servicio público, y fomenta un mayor uso y reutilización tanto pública como comercial de los mismos. Algunas administraciones incluso han creado catálogos o portales que los datos sean más fáciles de encontrar y utilizar. Aunque las razones varían de caso en caso, la problemática y logística de publicar dichos datos es la misma.
Para ayudar a las administraciones a abrir y compartir sus datos, el Grupo de Interés sobre eGovernment en W3C ha desarrollado un conjunto de pautas. Estos sencillos pasos enfatizan estándares y métodos que fomentan la publicación de datos del sector público, permitiendo su reutilización de maneras nuevas e innovadoras.
Esta ponencia repasará las pautas anteriormente mencionadas y los modos de publicar datos del sector público, poniendo el énfasis en el mejor método existente: Linked Government Data, así como mostrará casos y aplicaciones reales de la aplicación de dichos métodos en proyectos desarrollados por la Fundación CTIC para diversas administraciones, así como de otras partes del mundo.
Los organismos públicos y las administraciones publican cada día más datos en la Web. Compartir estos datos facilita lograr una mayor transparencia, permite ofrecer un mejor servicio público, y fomenta un mayor uso y reutilización tanto pública como comercial de los mismos. Algunas administraciones incluso han creado catálogos o portales que los datos sean más fáciles de encontrar y utilizar. Aunque las razones varían de caso en caso, la problemática y logística de publicar dichos datos es la misma.
Para ayudar a las administraciones a abrir y compartir sus datos, el Grupo de Interés sobre eGovernment en W3C ha desarrollado un conjunto de pautas. Estos sencillos pasos enfatizan estándares y métodos que fomentan la publicación de datos del sector público, permitiendo su reutilización de maneras nuevas e innovadoras.
Esta ponencia repasará las pautas anteriormente mencionadas y los modos de publicar datos del sector público, poniendo el énfasis en el mejor método existente: Linked Government Data, así como mostrará casos y aplicaciones reales de la aplicación de dichos métodos en proyectos desarrollados por la Fundación CTIC para diversas administraciones, así como de otras partes del mundo.
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Raj Lal
Learn how to design an HTML5 application which supports people with disabilities, and know why its a good business decision. An accessible web application gives maximum reach to your application's information, functionalities and benefits, by allowing multiple input methods, different interaction models, and customization based on special needs and limited device supports. The four major disabilities that effect user capabilities are visual, hearing, mobility (difficulty in using the mouse), and cognitive disabilities, which are related to learning abilities. Know how to use the latest technologies to accommodate these users in the user interface.
What is hot on the web right now - A W3C perspectiveArmin Haller
HTTP and HTML and the Web itself enter their third decade of existence. Still, the Web continues to transform human communication, information sharing, commerce, education, and entertainment. Social networking, cloud computing, and the convergence of Web, television, video and online gaming are among the phenomena stretching the Web in exciting new directions. In this talk, Armin will present what the World Wide Web Consortium (W3C), overlooking and steering the development of new Web standards is up to for the third decade of the Web. The W3C community is building an Open Web Platform that will enable the Web to grow and foster future innovation. This presentation present technology highlights of 2011 for advancing the Web platform. Focus topics of this talk will be the new HTML5 standard, the Data for Web Applications initiative which includes the next generation of RDF, and standards that allow people to create Semantic Web enabled Web Apps that have access to data from a variety of sources, including data-in-documents (RDFa) and data-from-databases (W3C's RDB2RDF).
¿Por qué los servicios electrónicos se usan tan poco? cómo hacer frente a la ...Open Data @ CTIC
En el actual panorama nacional e internacional de administración electrónica el impulso de los servicios electrónicos se ha realizado en base a una premisa: incrementar el número de servicios electrónicos online con el mayor grado de sofisticación posible. Pero esta premisa no ha dado el rendimiento esperado. A pesar de que varias administraciones ya superan los mil servicios online con el máximo grado de sofisticación, el uso de los mismos es bajo y, en algunos casos, preocupantemente bajo. ¿Cuáles son las causas? ¿Cómo hacerles frente? ¿Cómo optimizar la inversión en servicios electrónicos, aumentar el rendimiento y el número de usuarios? En esta ponencia, José Manuel Alonso hace un breve repaso al panorama actual, a las contradictorias asunciones, y da algunas recetas sobre como optimizar las inversiones, reducir los costes y maximizar el impacto de los servicios públicos.
These slides were originally a tutorial presented for the SIG preceding the May 2009 meeting of the PRISM Forum.
They attempt to give a survey of the technologies, tools, and state of the world with respect to the Semantic Web as of the first half of 2009.
ב-24 במרץ 2010 התקיים המפגש השני של פורום מפתחי ה-W3C הישראלי (W3C Developers Forum - W3CDF). המפגש עסק בפיתוח אפליקציות ואתרים למכשירים ניידים (Mobile Web).
W3Cהינו ארגון בינלאומי המאגד כ-350 ארגונים מכל העולם לכדי יצירת פורום ניטראלי ליצירת תקני רשת באינטרנט. משימת ה-W3C היא להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח פרוטוקולים וקווים מנחים שיאפשרו צמיחה של הרשת לטווח ארוך. ה-W3C הישראלי הוקם בשנת 1999, ומופעל משנת 2008 על ידי איגוד האינטרנט הישראלי. נלמד כיצד פועל הגוף שמפתח את תקני הרשת, כיצד למצוא את התקנים והקווים המנחים הרלוונטיים לנו וכיצד נוכל להשפיע על הפיתוחים.
אייל עובד כמנהל פרויקטים בתחום הטכנולוגי באיגוד האינטרנט ומפעיל את משרד ה-W3C הישראלי.
המצגת ניתנת לשימוש באופן חופשי, ללא תשלום או תנאים מגבילים למעט ייחוס לאיגוד האינטרנט הישראלי, כפי שמופיע ב"רישון ייחוס 2.5 ישראל (CC BY 2.5)"מידע נוסף על רישיון השימוש: creativecommons.org/licenses/by/2.5/ilהנ"ל אינו תקף לתמונות וחומרים מממקורות חיצוניים.
HTML5, הגרסה הבאה של HTML, יאפשר לתאר תוכן אתרים בצורה טובה יותר, סוגי תוכן מורכבים יותר, יתמוך במדיה ואפליקציות רשת מתקדמות וישפר את התאימות של מסמכי HTML. הגרסה החדשה באה לענות הצורך הגדל בתוכן מגוון ומורכב יותר ברשת. בהרצאה, אשר נבנתה יחד עם ראש קבוצת העבודה המפתחת את HTML 5, Michael(tm) Smith, יצגו עקרונות פיתוח הגרסה החדשה, דוגמאות למאפיינים חדשים ויוסבר כיצד תוכלו לשלב אותה בפיתוח אתרים.
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...Raj Lal
Learn how to design an HTML5 application which supports people with disabilities, and know why its a good business decision. An accessible web application gives maximum reach to your application's information, functionalities and benefits, by allowing multiple input methods, different interaction models, and customization based on special needs and limited device supports. The four major disabilities that effect user capabilities are visual, hearing, mobility (difficulty in using the mouse), and cognitive disabilities, which are related to learning abilities. Know how to use the latest technologies to accommodate these users in the user interface.
What is hot on the web right now - A W3C perspectiveArmin Haller
HTTP and HTML and the Web itself enter their third decade of existence. Still, the Web continues to transform human communication, information sharing, commerce, education, and entertainment. Social networking, cloud computing, and the convergence of Web, television, video and online gaming are among the phenomena stretching the Web in exciting new directions. In this talk, Armin will present what the World Wide Web Consortium (W3C), overlooking and steering the development of new Web standards is up to for the third decade of the Web. The W3C community is building an Open Web Platform that will enable the Web to grow and foster future innovation. This presentation present technology highlights of 2011 for advancing the Web platform. Focus topics of this talk will be the new HTML5 standard, the Data for Web Applications initiative which includes the next generation of RDF, and standards that allow people to create Semantic Web enabled Web Apps that have access to data from a variety of sources, including data-in-documents (RDFa) and data-from-databases (W3C's RDB2RDF).
¿Por qué los servicios electrónicos se usan tan poco? cómo hacer frente a la ...Open Data @ CTIC
En el actual panorama nacional e internacional de administración electrónica el impulso de los servicios electrónicos se ha realizado en base a una premisa: incrementar el número de servicios electrónicos online con el mayor grado de sofisticación posible. Pero esta premisa no ha dado el rendimiento esperado. A pesar de que varias administraciones ya superan los mil servicios online con el máximo grado de sofisticación, el uso de los mismos es bajo y, en algunos casos, preocupantemente bajo. ¿Cuáles son las causas? ¿Cómo hacerles frente? ¿Cómo optimizar la inversión en servicios electrónicos, aumentar el rendimiento y el número de usuarios? En esta ponencia, José Manuel Alonso hace un breve repaso al panorama actual, a las contradictorias asunciones, y da algunas recetas sobre como optimizar las inversiones, reducir los costes y maximizar el impacto de los servicios públicos.
These slides were originally a tutorial presented for the SIG preceding the May 2009 meeting of the PRISM Forum.
They attempt to give a survey of the technologies, tools, and state of the world with respect to the Semantic Web as of the first half of 2009.
ב-24 במרץ 2010 התקיים המפגש השני של פורום מפתחי ה-W3C הישראלי (W3C Developers Forum - W3CDF). המפגש עסק בפיתוח אפליקציות ואתרים למכשירים ניידים (Mobile Web).
W3Cהינו ארגון בינלאומי המאגד כ-350 ארגונים מכל העולם לכדי יצירת פורום ניטראלי ליצירת תקני רשת באינטרנט. משימת ה-W3C היא להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח פרוטוקולים וקווים מנחים שיאפשרו צמיחה של הרשת לטווח ארוך. ה-W3C הישראלי הוקם בשנת 1999, ומופעל משנת 2008 על ידי איגוד האינטרנט הישראלי. נלמד כיצד פועל הגוף שמפתח את תקני הרשת, כיצד למצוא את התקנים והקווים המנחים הרלוונטיים לנו וכיצד נוכל להשפיע על הפיתוחים.
אייל עובד כמנהל פרויקטים בתחום הטכנולוגי באיגוד האינטרנט ומפעיל את משרד ה-W3C הישראלי.
המצגת ניתנת לשימוש באופן חופשי, ללא תשלום או תנאים מגבילים למעט ייחוס לאיגוד האינטרנט הישראלי, כפי שמופיע ב"רישון ייחוס 2.5 ישראל (CC BY 2.5)"מידע נוסף על רישיון השימוש: creativecommons.org/licenses/by/2.5/ilהנ"ל אינו תקף לתמונות וחומרים מממקורות חיצוניים.
HTML5, הגרסה הבאה של HTML, יאפשר לתאר תוכן אתרים בצורה טובה יותר, סוגי תוכן מורכבים יותר, יתמוך במדיה ואפליקציות רשת מתקדמות וישפר את התאימות של מסמכי HTML. הגרסה החדשה באה לענות הצורך הגדל בתוכן מגוון ומורכב יותר ברשת. בהרצאה, אשר נבנתה יחד עם ראש קבוצת העבודה המפתחת את HTML 5, Michael(tm) Smith, יצגו עקרונות פיתוח הגרסה החדשה, דוגמאות למאפיינים חדשים ויוסבר כיצד תוכלו לשלב אותה בפיתוח אתרים.
המצגת עוסקת בנגישות לאינטרנט ע"פ התקן הישראלי להצגת תכנים נגישים באתרי אינטרנט המבוסס על הנחיות ה Wcag 2.0 של משרד ה W3C הבינלאומי. מציגה את עיקרי התקן, דוגמאות לבעיות נגישות באתרי אינטרנט וטיפים להנגשת אתרים.
ליאור שיאון, CTO GetTaxi, מספר בכנס איגוד האינטרנט "פיתוח וניו מדיה תחת אש" על יוזמת הפיתוח האישית שלו שהובילה ליצירת "מפת המקלטים".
http://www.isoc.org.il/conf_heb/under_fire.html
טל גלילי, סטטיסטיקאי ואקטביסט רשת, מספר בכנס "פיתוח וניו מדיה תחת אש" של איגוד האינטרנט, על פרויקט הקוד , פתוח "אושאידי" ועל היוזמה שלו לתרגם אותה לעברית ולנצל אותה לטובת אסונות עתידיים
אמרי באומר, יוזם האקתון החירום "חוסן לאומי" מספר בכנס איגוד האינטרנט "פיתוח וניו מדיה תחת אש" על היוזמה שלו לגיבוש קבוצת מפתחים להאקתון חירום
http://www.isoc.org.il/conf_heb/under_fire.html
אופיר בן אבי, מנהל ממשל זמין, מספר בכנס איגוד האינטרנט "פיתוח וניו מדיה תחת אש" על יוזמות הפיתוח של ממשל זמין. http://www.isoc.org.il/conf_heb/under_fire.html
יובל טיסונה, מנכל זברהאפס, מספר בכנס איגוד האינטרנט "פיתוחוניו מדיה תחת אש" על האפליקציה שפיתחה החברה שלו "המלחמה הבאה"
http://www.isoc.org.il/conf_heb/under_fire.html
בן לנג בכנס איגוד האינטרנט "פיתוח וניו מדיה תחת אש" מספר על הפעילות שלו במדיה החברתית בזמן המבצע הצבאי, עמוד ענן
http://www.isoc.org.il/conf_heb/under_fire.html
המצגת מציגה פרקטיקות לשיפור אבטחת המידע של עובדים בארגונים. היא מבוססת על המלצות של ארגונים ברחבי העולם, כולל מרכזי CERT ופרוייקטים ייעודיים לשיפור אבטחת המידע במדינות שונות. המצגת מיועדת לעובדים עצמם (ולא לצוות ה-IT), ומציגה נושאים כגון אבטחת מידע אישי, מודעות לפישינג ושיטות פריצה, ססמאות, מסירת ואיבוד מידע, ועוד.
3. ...תוכנית
W3Cמבוא - איגוד האינטרנט הישראלי ו
mobile web applications best practices-אודות ה
The Best practices
www.w3.org/TR/mwabp
3
4. איגוד האינטרנט הישראלי
• שלוחת האיגוד הבינלאומי:
• עמותה ללא מטרת רווח
פועל לקידום האינטרנט והטמעתו בישראל
כתשתית טכנולוגית, מחקרית, חינוכית, חברתית
ועסקית.
/www.w3.org/TR/mwabp
www.w3c.org.il
4
5. W3C
ארגון בינלאומי •
כ-053 ארגונים •
פורום ניטראלי ליצירת תקני רשת באינטרנט. •
משימה: •
להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח
פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה
לטווח ארוך.
www.w3.org/TR/mwabp
5
10. הגישו דיווח יישום...
למה לכם?
- כי חייבים להציג יישום בכדי שזה יהפוך לתקן
- כי האפליקציה שלכם תופיע בדוח היישומים
- כי אני אכתוב על זה באתר W3Cהישראלי
www.w3.org/TR/mwabp
1j.mp/w3cmo
01
27. 1. המעיטו את השימוש בעוגיות
מה?
נשלחות לשרת בכל בקשה
יתכן ולא יהיה פעילות במכשיר
איך?
בנו אפליקציה פעילה גם ללא עוגיות
(למשל עם )URI decoration
Image by: D Sharon Pruitt
1. Use Cookies Sparingly
www.w3.org/TR/mwabp
72
28. 2. השתמשו בטכנולוגיות המתאימות לאחסון מידע בצד הלקוח
?מה
עדיף להשתמש במנגנונים בצד לקוח לאחסון
.מידע, בעיקר בכמויות גדולות
)Responsiveness , start-up time (מועיל ב
?איך
BONDI •
- HTML5 •
Offline - j.mp/w3coff
Opera Widgets •
by Remy Sharp - remysharp.com/demo/rubiks/
2. Use Appropriate Client-Side Storage Technologies for Local Data
j.mp/w3cmo7 www.w3.org/TR/mwabp
28
29. 3. שכפלו מידע לשרת במידת הצורך
מה?
תצוגה אחידה במכשירים שונים
מגבה למקרה של אובן המכשיר
(לא צריך לשכפל למשל העדפות תצוגה של מכשיר ספציפי)
איך?
טכנולוגיות לאחסון מידע צד לקוח מספקת גם
בדיקת קישוריות.
דוגמא...
3. Replicate Local Data
www.w3.org/TR/mwabp
92
31. 1. נתוני האפליקציה (3)
(1) 2. ביטחון מידע ופרטיות
(4) יידוע המשתמש ושליטתו באפליקציה 3.
שימוש מוגבל במשאבים (11) 4.
חווית משתמש (01) 5.
התאמה ל-)5( Delivery Context 6.
שיקולים נוספים (1) 7.
/www.w3.org/TR/mwabp
13
www.w3c.org.il
32. ביטחון מידע ופרטיות – השתמשו במידע אמין והגנו
על פרטיות המשתמש
www.w3.org/TR/mwabp
23
33. 4. Do not Execute Unescaped or Untrusted
JSON data
direct execution of a
datafeed that contains
unescaped user-
generated data =
security risk
Use JSON parser
Image by: D Sharon Pruitt
4. Do not Execute Unescaped or Untrusted JSON data
www.w3.org/TR/mwabp
33
34. 1. נתוני האפליקציה (3)
2. ביטחון מידע ופרטיות (1)
(4) 3. יידוע המשתמש ושליטתו באפליקציה
(11)שימוש מוגבל במשאבים 4.
חווית משתמש (01) 5.
התאמה ל-)5( Delivery Context 6.
שיקולים נוספים (1) 7.
/www.w3.org/TR/mwabp
43
www.w3c.org.il
35. התייחסו יפה למידע רגיש...
מדיה, פרטי קשר ו- ,calendarפירוט שיחות, מידע
על המכשיר, מיקום (!), חיבור לרשת
(הקפידו על ההמלצות הבאות אם הדפדפן אינו מספק אותן)
www.w3.org/TR/mwabp
53
36. 5. הודיעו למשתמש על גישה אוטומטית לרשת*
מה?
שימוש ברשת מרוקן את הסוללה
עולה כסף...
איך?
אייקון המודיע על פעילות ברקע
הודיעו על שימוש רב ברשת (בחיבור ראשון, בהרשמה
או בדפי העזרה)
(כמה זמן, תדירות,סה"כ ספקו מידע על אופי החיבור
שימוש)
.
5. Inform the User About Automatic Network Access
www.w3.org/TR/mwabp
63
37. 6. ספק אמצעים לשליטה בחיבור אוטומטי לרשת *
מה?
אפשר למשתמש למנוע חיבור אוטומטי לרשת
(כאשר זה מבוטל – הציגו הודעת חיבור מעת לעת.)
אפשרי –
אפשר למשתמש לשלוט במועדי החיבור או בפעילויות אשר יכולות
להתחבר.
Image by: Jeff Sonstein
6. Provide Sufficient Means to Control Automatic Network Access
www.w3.org/TR/mwabp
73
38. 7. הודיעו למשתמש על שימוש במידע על
המכשיר או פרטים אישיים
?מה
בעת כניסה ראשונה לשירות או בגישה ראשונה
.למידע
?איך
יש בקשת רשות מובנתAPI-לרוב ל
.)confirmation dialog ; recover gracefully(
7. Ensure the User is Informed About Use of Personal and Device Information
www.w3.org/TR/mwabp
MapQuest.com
38
39. 8. אפשרו Sign-inאוטומטי
מה?
כי יותר קשה להזין תוכן....
איך?
בעוגיות, או local storage
(לא לשכוח לשים לינק ל-)log out
8. Enable Automatic Sign-in
www.w3.org/TR/mwabp
04
40. האפליקציה (3)
1. נתוני
2. ביטחון מידע ופרטיות (1)
3. יידוע המשתמש ושליטתו באפליקציה (4)
(11) 4. שימוש מוגבל במשאבים
(01) 5. חווית משתמש
6. התאמה ל-)5( Delivery Context
7. שיקולים נוספים (1)
/www.w3.org/TR/mwabp
14
www.w3c.org.il
42. 9. Use Transfer Compression
מה?
השתמשו בדחיסה של התוכן.
אבל זכרו שיש עלות של זמן וחיי סוללה.
איך?
... Gzip
לרוב לא צריך לדוחס: תמונות, אדיו, וידאו, קבצים קנטים מ-1k
9. Use Transfer Compression
www.w3.org/TR/mwabp
34
43. 01. מזערו את גודל האפליקציה והנתונים
?למה
תרד יותר מהר
תפעל יותר טוב
?איך
JavaScript- וHTML ,CSS הקטינו
(removal of white space and comments; shorter tokens (variables, method names, selector names)
10. Minimize Application and Data Size
compressorrater.thruhere.net www.w3.org/TR/mwabp
44
44. 11. המנעו מ-Redirects
מה?
לרוב נעשה שימוש ב HTTP 3xxאו HTML meta refreshלהעברת מידע
)(e.g. account authentication
איך?
פשוט נסו להמנע מהן.
אם צריך יותר משתיים, אפשר להציג דף מעבר )בכדי שהמשתמש ידע ש'זה טעון'(
11. Avoid Redirects
www.w3.org/TR/mwabp
54
45. 12. Optimize Network Requests
מה?
עדיף לבצע בקשות גדולות לשרת אך מועטות יותר
(מאשר הרבה בקשות קטנות)
איך?
קיבוץ בקשות
תעדוף בקשות
פעילות בהתאם לרמת הקישוריות
12. Optimize Network Requests
www.w3.org/TR/mwabp
64
46. 31. צמצמו שימוש במקורות חיצוניים
למה?
כל קובץ סקריפט, ,CSSתמונה = = HTTP requestטיול לשרת
איך?
CSSו- JavaScriptכל אחד בקובץ אחד בלבד
OR
או שהם ישולבו לפני שהעמוד מוגש ללקוח
13. Minimize External Resources
www.w3.org/TR/mwabp
74
47. (Sprites) 41. אחדו תמונות
?איך
similar sizes and color palettes.
That do not change often.
use CSS positioning and clipping.
Image by: Kriplozoik דוגמא
www.yahoo.com
14. Aggregate Static Images into a Single Composite Resource (Sprites)
www.w3.org/TR/mwabp
48
48. CSS-51. שלבו תמונות רקע ב
?מה
CSS-במקום להוריד תמונות, אפשר לכלול אותן ב
buzz
data:image/png;base64,iVBORw0KGgoAAAANSUh
data:image/png;base64, EUgAAAAgAAAAhCAYAAADkrOp1AAAAGXRFWH
iVBORw0KGgoAAAANSUhEUgA
AABAAAAAQAQMAAAAlPW0iAA
RTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllP
AAAAYFJREFUeNqEU7FOwzAQvXMuJSC1oqlKuo
aZkakrGyti5i+Q+AZ+goERiR9hYEJiZKVIFaqgtJV9
?איך
nO04SdO0TfQk5+75vedLgswM45vnDADuBOcCuy
AABlBMVEUAAAD/ 4vkmaOCE/ZqJ+nabcbxzFh0Zx8fQPFpG6z0eD0JE data URI
//+l2Z/dAAAAM0lEQVR4nGP uPVUSglAJATyGaAxnm8WDY70WdBKIawd4RxUB
4/5/h/1+G/58ZDrAz3D/McH a81EnSRTFHUdAu7tQQBUB+QW5B7BwvSKFEB2
BpSCHAXsiZnQVV5dnKlauxAxlsyh7ggQFNKaSLg :דוגמא
8yw83NDDeNGe4U mmRvAeDUJQMAxKBAw0CRwIxmHdwCv7U4iCV
UHYamFcyKZCGVLLbmhRMEHBD2jzFFCGlDruzY
g9C9zwz3gVLMDA/A6P9/AFG BtGbiaA2JbhkDQvonNSZraoGCnhbYpNxXsvkrBBd
GFyjOXZtQAAAAAElFTkSuQm 2mwMWgkHdYQAshhNQiz7hpYfYrQO1145YM8mf
9afGIkBVg82XJnzDsH76vFr+z8FWtQTzU1UX+yKu
CC fj+V8NtVGh0/Dgd38mLsvb5PL
15. Include Background Images Inline in CSS Style Sheet
www.w3.org/TR/mwabp
49
49. 16. Fingerprinting Resource for chach
?מה
לקבצים שמשתנים מדי פעםcache אפשר לעשות
?איך
לתאריך רחוק מאוד בעתידchase-- הגדירו את ה
שישתנה כשצריך לעדכןhash של הקובץURL-- הוסיפו בסיומת ה
.אותו
<img src="http://www.example.com/userimages/joeblogs-67f90da089da">
16. Cache Resources By Fingerprinting Resource References
www.w3.org/TR/mwabp
50
50. 17. Cache AJAX Data
?מה
cache כפי שעושים עם תוכן רגיל, אפשר לעשות
.AJAX-למידע שמגיע ב
?איך
כרגיל
Expires Cache-Control header- וfingerprinting
17. Cache AJAX Data
www.w3.org/TR/mwabp/
51
www.w3c.org.il
51. 81. שלחו עוגיות רק כשצריך
מה?
תוכן סטטי אינו צריך עוגיות – אז עדיף להימנע
איך?
דומיין, תת דומיין או pathנפרד לתוכן סטטי 1.
הגדירו pathלעוגיות 2.
18. Do not Send Cookie Information Unnecessarily
www.w3.org/TR/mwabp
25
52. Keep DOM Size Reasonable .19
?איך
pagination למשל בעזרת
X Fail V win
19. Keep DOM Size Reasonable
www.w3.org/TR/mwabp
53
54. בגלל מורכבות רבה יותר בשימוש במכשירים ניידים
– חשוב לשפר את חווית המשמש
Latency
interaction method
data consistency
www.w3.org/TR/mwabp
55
55. 02. להתחיל צ'יק צ'ק
?איך
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/
...דוגמא
20. Optimize For Application Start-up Time
www.w3.org/TR/mwabp
56
56. High responsiveness with Local storage - example
מבוסס על
IBM:
Unlock local storage for
mobile Web applications
with HTML 5:
j.mp/w3cmo3
www.w3.org/TR/mwabp
j.mp/w3cmo2
57. 21. Minimize Perceived Latency
?איך
Incremental Rendering
JavaScript at the bottom + useful information that
might be available is viewable while 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
...דוגמא
21. Minimize Perceived Latency
www.w3.org/TR/mwabp
58
59. 22. 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
Image 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)
22. Design for Multiple Interaction Methods
www.w3.org/TR/mwabp
60
61. fragment identifiers -42. השתמשו ב
לתצוגה
?מה
בכדי לאפשר שמירתfragment identifiers -השתמשו ב
back-הקישור לתצוגה, ולא לפגוע ב
...דוגמא
http://myapp.example.org/myapp#view
24. Use Fragment IDs to Drive Application View
www.w3.org/TR/mwabp
62
63. "Click-to-Call"-52. השתמש במספרי טלפון ב
איך
<a href="tel:[PHONE-NUMBER]">[PHONE-NUMBER]</a>
entered using the full international
prefix
my.springpadit.com
25. Make Telephone Numbers "Click-to-Call"
www.w3.org/TR/mwabp
64
64. 26. Ensure Paragraph Text Flows
מה?
• מנע גלילה אנכית
• ואפשר קריאה בשינוי אוריאנטציה
איך?
בקונטיינרים:
כן: באחוזים / יחידות מידה יחסיות
לא יחידות מוחלטות או פיקסלים
Image by: curiouslee
דוגמא...
26. Ensure Paragraph Text Flows
www.w3.org/TR/mwabp
56
66. 27. Ensure Consistency Of State
Between Devices
?מה
הקפידו על עקיבות באפליקציה בין מכשירים
שונים
• Credentials
• preferences
• Data
?איך
שימורו על השרת מידע שאינו רלוונטי רק
למכשיר הספציפי
http://www.flickr.com/photos/osde-info/4336196538/sizes/o/
27. Ensure Consistency Of State Between Devices
www.w3.org/TR/mwabp
67
68. התאימו ל- Delivery Contextשונים
צרו אפליקציה בעלת יכולת זיהוי ההקשר (כגון יכולות המכשיר) והסתגלות להן. (התאמת
תוכן, ניווט, מבנה עמוד...)
www.w3.org/TR/mwabp
96
69. push-82. מומלץ – שימוש ב
?מה
...אם מכשיר היעד תומך
?איך
OMA Push
QR Codes
SMS
…
28. Consider Mobile Specific Technologies for Initiating Web Applications
www.w3.org/TR/mwabp
70
70. 92.הגדירו את גודל התצוגה הרצוי
?מה
צריך למנוע ממכשירים לעשות זום אוטומטי באפליקציה שהותאמה
....לניידים
?איך
<meta name="viewport" content="width=device-width,
initial-scale=1.0"/>
...דוגמא
29. Use Meta Viewport Element To Identify Desired Screen Sizes
www.w3.org/TR/mwabp
71
71. דוגמא - הגדרת גודל תצוגה
Viewport
Offlines
Data URI
http://nils-dehl.de/m/
j.mp/w3cmo9 www.w3.org/TR/mwabp
72
72. 30. Prefer Server-Side Detection
Where Possible
?איך
HTTP request header: Accept
User-Agent
X-Wap-Profile
:דוגמא
30. Prefer Server-side Detection Where Possible
j.mp/w3cmo11 www.w3.org/TR/mwabp
73
73. '13. כשצריך – זיהוי יכולות 'צד לקוח
?איך
JavaScript: if (some_api_exists) { ...
CSS Media Types
CSS Media Queries
...דוגמא
31. Use Client-side Detection When Necessary
www.w3.org/TR/mwabp
74
74. CSS3 Media query layout example
j.mp/w3cmo18 www.w3.org/TR/mwabp
75. 32. 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.
32. Use Device Classification to Simplify Content Adaptation
www.w3.org/TR/mwabp
76
76. JavaScript 33. לתפוצה מרבית – צרו גרסה ללא
?איך
synchronous FORM posts
<noscript> או לפחות – הודעה מתאימה או
33. Support a non-JavaScript Variant if Appropriate
www.w3.org/TR/mwabp
77
77. 43. אפשר למשתמש לבחור את התצוגה
מה?
אפשר למשתמש לשנות את
סוג התצוגה
כברירת מחדל ספק את ה-UI
המתאים ביותר
אבל זכור את העדפות
המשתמש!
34. Offer Users a Choice of Interfaces
www.w3.org/TR/mwabp
87
79. 35. Consider Canvas or SVG For
Dynamic Graphics
?מה
canvas
מאפשר לצייר גרפיקה פשוטה
JavaScript באמצעות
SVG
להגדרת אלמנטים שלXML שפת
-גרפיקה וקטורית המתווספים ל
, וניתנים לשינוי בעזרתDOM
http://www.mozilla.com/en-US/firefox/stats/ JavaScript
...דוגמא
35. Consider Use Of Canvas Element or SVG For Dynamic Graphics
www.w3.org/TR/mwabp
80
80. SVG and canvas demos
• Bomomo.com
• zwibbler.com
• www.iconza.com
j.mp/w3cmo16 j.mp/w3cmo14
Video - Cool mobile apps with SVG and other Web technologies - j.mp/w3cmo13
www.w3.org/TR/mwabp
82. Mobile Web Best Practices (MWBP) Flipcards
j.mp/w3cfcc
www.w3.org/TR/mwabp
83
83. The world is getting more
platform-fragmented, not less.
Source: j.mp/w3cmo5
Do www.w3.org/TR/mwabp/
yourself a favor and write
84
your next app in HTML5.
www.w3c.org.il