–יחידת לימוד תכנון ופיתוח אפליקציות ווב

למכשירים ניידים

W3C-על פי מסמך ה"Mobile Web Application Best Practices "

1

ללא תשלום או תנאים מגבילים למעט ייחוס לאיגוד , המצגת ניתנת לשימוש באופן חופשי

("CC BY 2.5)ישראל 2.5רישון ייחוס "כפי שמופיע ב, האינטרנט הישראלי /il/5.2creativecommons.org/licenses/by: מידע נוסף על רישיון השימוש

.תמונות וחומרים מממקורות חיצונייםל אינו תקף ל"הנ

2

-W3C - Mobile Web Application Best Practicesתקן •

2010בדצמבר 14-פורסם ב

. 2012יחידת לימוד זו הוכנה במהלך ספטמבר •

היחידה כוללת חלקים רלוונטיים מהתקן וכן הערות למרצה • .המבוססות על התקן, בתחתית כל שקופית

3

Mobile Web Application Best-אודות הPractices

The goal ‘Mobile Web Application Best Practices’ is to aid the development of rich and dynamic mobile Web applications.

It collects the most relevant engineering practices, promoting those that enable a better user experience and warning against those that are considered harmful.

www.w3.org/TR/mwabp

4

Web Application

a Web page (XHTML + CSS) or collection of Web pages delivered over HTTP which use server-side or client-side processing (e.g. JavaScript) to provide an "application-like" experience within a Web browser.

5

מכשירים ניידים לעומת –מגבלות והבדלים

שולחניים

bit.ly/w3cmbp

תצוגה •

הזנת תוכן •

רוחב פס ועלות •

מטרות המשתמש •

מגבלות המכשיר •

6

Best practices

7

נתוני האפליקציה1.

אבטחת מידע ופרטיות2.

יידוע המשתמש ושליטתו באפליקציה3.

שימוש מוגבל במשאבים4.

חווית משתמש5.

Delivery Context-התאמה ל6.

שיקולים נוספים7.

8

נתוני האפליקציה1.

אבטחת מידע ופרטיות2.

יידוע המשתמש ושליטתו באפליקציה3.

שימוש מוגבל במשאבים4.

חווית משתמש5.

Delivery Context-התאמה ל6.

שיקולים נוספים7.

9

השתמשו בטכנולוגיות ושיטות מתאימות

לאחסון נתוני האפליקציה

10

?מה

נשלחות לשרת בכל בקשה

יתכן ולא יהיה פעילות במכשיר

?איך

בנו אפליקציה שיכולה להשאר פעילה גם ללא (URI decorationלמשל עם )עוגיות

המעיטו את השימוש בעוגיות

Image by: D Sharon Pruitt

11

?מה

, עדיף להשתמש במנגנונים בצד לקוח לאחסון מידע

.בעיקר בכמויות גדולות

(start-up time ,Responsivenessמועיל ב)

?איך• offline HTML5 •BONDI •Opera Widgets

השתמשו בטכנולוגיות המתאימות לאחסון מידע

בצד הלקוח

https://mobile.twitter.com/#!

12

שכפלו מידע לשרת במידת הצורך

?מה

תצוגה אחידה במכשירים שונים•

מגבה למקרה של אובן המכשיר•

?איך

.טכנולוגיות לאחסון מידע צד לקוח מספקת גם בדיקת קישוריות

דוגמא

j.mp/mozoff

13

נתוני האפליקציה1.

אבטחת מידע ופרטיות2.

יידוע המשתמש ושליטתו באפליקציה3.

שימוש מוגבל במשאבים4.

חווית משתמש5.

Delivery Context-התאמה ל6.

שיקולים נוספים7.

14

השתמשו במידע –אבטחת מידע ופרטיות

אמין והגנו על פרטיות המשתמש

15

Do not Execute Unescaped or Untrusted JSON data

Image by: D Sharon Pruitt

?מה

direct execution of a

datafeed that contains

unescaped user-

generated data = security

risk

?איך

A JSON parser will

accept only valid JSON,

preventing potentially

malicious code from

running.

16

נתוני האפליקציה1.

אבטחת מידע ופרטיות2.

יידוע המשתמש ושליטתו באפליקציה3.

שימוש מוגבל במשאבים4.

חווית משתמש5.

Delivery Context-התאמה ל6.

שיקולים נוספים7.

17

-מכשירים ניידים מכילים מידע אישי רב

, פירוט שיחות, ולוח שנה, פרטי קשר, מדיה

חיבור לרשת, מיקום, מידע על המכשיר

הקפידו על ההמלצות הבאות אם הדפדפן

אינו מספק אותן

18

הודיעו למשתמש על שימוש במידע על המכשיר או פרטים אישיים

?מה

בעת כניסה ראשונה לשירות או בגישה ראשונה

.למידע

?איך

יש בקשת רשות מובנת API-לרוב ל

(recover gracefully ;confirmation dialog .)

MapQuest.com

19

נתוני האפליקציה1.

אבטחת מידע ופרטיות2.

יידוע המשתמש ושליטתו באפליקציה3.

שימוש מוגבל במשאבים4.

חווית משתמש5.

Delivery Context-התאמה ל6.

שיקולים נוספים7.

20

, זיכרון – אל תכבידו על משאבי המכשיר

מוגבלים יותר במכשירים -רוחב פס , עיבוד

ניידים

21

מזערו את גודל האפליקציה והנתונים

?מה

האפליקציה תרד יותר מהר

ותפעל טוב יותר

?איך

Compress content-ו Minification-השתמשו ב

See http://compressorrater.thruhere.net

22

Redirects-המנעו מ

?מה

להעברת מידע HTML meta refresh או HTTP 3xxלרוב נעשה שימוש ב

(e.g. account authentication)

?איך

.מהן להמנעפשוט נסו

בכדי שהמשתמש ידע (אפשר להציג דף מעבר , אם צריך יותר משתיים

)שהמידע נטען

23

Optimize Network Requests

?מה

מאשר הרבה בקשות )יותר מועטותלשרת אך גדולותעדיף לבצע בקשות (קטנות

?איך

בקשות קיבוץ•

בקשות תעדוף•

רמת הקישוריותפעילות בהתאם ל•

24

צמצמו שימוש במקורות חיצוניים

?מה

style sheets, scripts, image - each of which requires an HTTP request

?איך

CSS ו-JavaScript כל אחד בקובץ אחד בלבד

או שהם ישולבו לפני שהעמוד מוגש ללקוח

25

?איך

• similar sizes and color palettes.

• That do not change often.

• use CSS positioning and clipping.

(Sprites)אחדו תמונות

Image by: Kriplozoik

26

Keep DOM Size Reasonable

?איך

paginationלמשל בעזרת

27

נתוני האפליקציה1.

אבטחת מידע ופרטיות2.

יידוע המשתמש ושליטתו באפליקציה3.

שימוש מוגבל במשאבים4.

חווית משתמש5.

Delivery Context-התאמה ל6.

שיקולים נוספים7.

28

בגלל מורכבות רבה יותר בשימוש במכשירים

חשוב לשפר את חווית המשמש –ניידים

29

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.

http://www.flickr.com/photos/66475767@N00/4333416

050/

30

?איך

• Incremental Rendering

• 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

Minimize Perceived Latency

MapQuest.com

31

"Click-to-Call"-השתמש במספרי טלפון ב

?איך

<a href="tel:[PHONE-NUMBER]">[PHONE-NUMBER]</a>

entered using the full international prefix

31

my.springpadit.com

32

Ensure Paragraph Text Flows

?מה

גלילה אופקיתמנע •

ואפשר קריאה בשינוי אוריאנטציה•

?איך

פיקסלים/ להשתמש ביחידות מוחלטות לא

- containersלהשתמש ביחידות יחסיות לכן

32

Image by: curiouslee

33

Ensure Consistency Of State Between Devices

?מה

הקפידו על עקיבות באפליקציה בין מכשירים

שונים

• Credentials

• preferences

• Data

?איך

שימורו על השרת מידע שאינו רלוונטי רק למכשיר הספציפי

33

http://www.flickr.com/photos/osde-

info/4336196538/sizes/o/

34

אוטומטי Sign-inאפשרו

?מה

קשה להזין תוכון ופרטי הזדהות

?איך

local storageאו , עוגיות

(log out-לא לשכוח לשים לינק ל)

35

נתוני האפליקציה1.

אבטחת מידע ופרטיות2.

יידוע המשתמש ושליטתו באפליקציה3.

שימוש מוגבל במשאבים4.

חווית משתמש5.

Delivery Context-התאמה ל6.

שיקולים נוספים7.

36

.שונים Delivery Context-התאימו ל

צרו אפליקציה בעלת יכולת זיהוי ההקשר

. והסתגלות להן( כגון יכולות המכשיר)

...(מבנה עמוד, ניווט, התאמת תוכן)

37

התאימו פונקציונליות ליכולות המכשיר

?איך

• Use Client-Side Capability Detection Where Necessary

• Prefer Server-Side Detection Where Possible

37

38

אפשר למשתמש לבחור את התצוגה

?מה

אפשר למשתמש לשנות את סוג התצוגה

המתאים ביותר UI-כברירת מחדל ספק את ה

!אבל זכור את העדפות המשתמש

38

39

נתוני האפליקציה1.

מידע ופרטיותאבטחת 2.

יידוע המשתמש ושליטתו באפליקציה3.

שימוש מוגבל במשאבים4.

חווית משתמש5.

Delivery Context-התאמה ל6.

שיקולים נוספים7.

40

Consider Use of Canvas Element or SVG For Dynamic Graphics

?מה

canvas

מאפשר לצייר גרפיקה פשוטה JavaScriptבאמצעות

SVG

להגדרת אלמנטים של XMLשפת

, DOM-גרפיקה וקטורית המתווספים ל

JavaScriptוניתנים לשינוי בעזרת

40

http://www.mozilla.com/en-US/firefox/stats/

41

כלים נוספים

42

• Web Compatibility Test for Mobile Browsers j.mp/w3ctmb

• Mobile Web Best Practices (MWBP) Flipcards j.mp/w3cfcc

• Mobile Web Application Best Practices Cards w3.org/2010/09/MWABP

43

ללא תשלום או תנאים מגבילים למעט ייחוס לאיגוד , המצגת ניתנת לשימוש באופן חופשי

("CC BY 2.5)ישראל 2.5רישון ייחוס "כפי שמופיע ב, האינטרנט הישראלי /il/5.2creativecommons.org/licenses/by: מידע נוסף על רישיון השימוש

.תמונות וחומרים מממקורות חיצונייםל אינו תקף ל"הנ

סוף הישראליW3C-איגוד האינטרנט הישראלי ומשרד ה, מנהל פרוייקטים, אייל סלע: עריכה

www.isoc.org.il| c.org.il3www.w