כלים ושיטות לבניית אתרים תקניים, נגישים ועשירים יותר
DESCRIPTION
הרצאה בכנס 'ערך מוסף' www.w3c.org.ilTRANSCRIPT
www.isoc.org.il
www.w3c.org.il
, כלים ושיטות לבניית אתרים תקניים
נגישים ועשירים יותר
אייל סלע
איגוד האינטרנט הישראלי , מנהל פרויקטים
הישראלי W3C-ומשרד ה
www.isoc.org.il
www.w3c.org.il
cdoc3j.mp/w
2
www.isoc.org.il
www.w3c.org.il
...תוכנית
-W3Cאיגוד האינטרנט הישראלי ו - מבוא•
•HTML & CSS
נגישות•
מובייל•
3
www.w3c.org.il4
איגוד האינטרנט הישראלי
: שלוחת האיגוד הבינלאומי•
עמותה ללא מטרת רווח •
פועל לקידום האינטרנט והטמעתו בישראל
חברתית , חינוכית, מחקרית, כתשתית טכנולוגית
.ועסקית
www.isoc.org.il
www.w3c.org.il
W3C
ארגון בינלאומי •
ארגונים 350-כ•
. פורום ניטראלי ליצירת תקני רשת באינטרנט•
:משימה•
להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח
פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה .לטווח ארוך
www.isoc.org.il
www.w3c.org.il
W3C השנה
סידרת מפגשים למפתחים
קבוצות עניין
פיתוח אפליקציה
סדנאות תגובה למומחים
(שלכם, שלנו)הרצאות אורח
קהילות/תמיכה בפעילות קבוצות
שילוב מומחים בקבוצות עבודה
...עוד
6
()
www.isoc.org.il
www.w3c.org.il
ישראל W3Cאתר
8
תקנים
יצירת
, קשר
אירועים
השתתפו
בפיתוח
והפצת תקנים
ידיעות
שוטפות
www.isoc.org.il
www.w3c.org.il
המשך -ישראל W3Cאתר
9
מאמרים
מומלצים
ידיעות
מאתרים
אחרים
קישור
לאתר
מרוקו
כלים
למפתחים
www.isoc.org.il
www.w3c.org.il
HTML, CSS-מנוע חיפוש לאלמנטים ב: כלי עזר
...דוגמא
8 cmo3j.mp/w12
–וגם
נגישות•
•Mobile
•SVG
www.isoc.org.il
www.w3c.org.il
floatחיפוש המושג –דוגמא
138 cmo3j.mp/w
www.isoc.org.il
www.w3c.org.il
DOCTYPEהגדירו . 1
:מנחה את הדפדפן כיצד יש לקרוא את הדף-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
...HTML5-ב-
5av3j.mp/w15
www.isoc.org.il
www.w3c.org.il
כתבו תגיות באותיות קטנות. 2
:נכון
<html>, <body>, <div>
:לא נכון
<HTML>, <BODY>, <DIV>
5av3j.mp/w17
www.isoc.org.il
www.w3c.org.il
קינון נכון של תגיות. 3
:נכון
<p><span>טקסט</span></p>
:לא נכון
<p><span>טקסט</p></span>
3add3j.mp/w18
www.isoc.org.il
www.w3c.org.il
על פי –תג פתיחה וסגירה לכל האלמנטים . 4
התקן
adb3j.mp/w19
:נכון
<p>טקסט</p>
:לא נכון
<p>טקסט
www.isoc.org.il
www.w3c.org.il
5 .Attributes מרכאותבתוך
:נכון
<img height="52" width="279"
alt="W3C Israel Office logo" src="/logo-il.png" />
:לא נכון
<img height=52 width=279
Alt=W3C Israel Office logo src=/logo-il.png />
20
www.isoc.org.il
www.w3c.org.il
הפרידו תוכן מעיצוב. 6
123j.mp/dkrg
...דוגמא
21
•HTML לתוכן
•CSS לעיצוב
עיצוב ללא טבלאות •
, אותו אתר
CSSללא
www.isoc.org.il
www.w3c.org.il
שינוי עיצוב–דוגמא
standards.co.il
22
csszengarden.com
www.isoc.org.il
www.w3c.org.il
CSS-וה HTML-בדקו את תקינות ה. 7
HTML - .org3validator.wבודק תקינות •
CSS-1add3j.mp/wבודק תקינות •
...דוגמא
23
www.isoc.org.il
www.w3c.org.il
gov.il -ב CSSבדיקת תקינות
gov.il24
www.isoc.org.il
www.w3c.org.il
?למה אתר תקני
(מכשירים, ...דפדפנים)מאפשר תצוגה אחידה 1.
מקטין את גודל הדף2.
'חסין עתיד'3.
נגיש יותר4.
(.debugging, שינוי עיצוב, שינוי מבנה)קל לתחזוקה 5.
SEO-טוב ל6.
25
www.isoc.org.il
www.w3c.org.il
3CSS–דוגמא
8add3j.mp/w28
www.isoc.org.il
www.w3c.org.il
HTML5 -דוגמא Notifications - http://slides.html5rocks.com/#slide12
semantic tags http://slides.html5rocks.com/#slide17
New form field types http://slides.html5rocks.com/#slide21
Audio + Video http://slides.html5rocks.com/#slide22
8av3j.mp/w29
www.isoc.org.il
www.w3c.org.il
?אילו טכנולוגיות ואלמנטים נתמכים כיום
caniuse.com30
www.isoc.org.il
www.w3c.org.il
?מהו אתר נגיש
אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה
.של יעילות והנאה ככל הגולשים
:סוגי מוגבלויות
מוטוריקה, קוגניציה, שמיעה, ראייה
32
www.isoc.org.il
www.w3c.org.il
2.0 (WCAG)הנחיות להנגשת תכני אתרי אינטרנט
j.mp/w3av233
www.isoc.org.il
www.w3c.org.il
עקרונות 4
קווים מנחים 12
מדדי הצלחה
שיטות
ada3j.mp/w34
www.isoc.org.il
www.w3c.org.il
nagish.org.il
nagish.org.il35
www.isoc.org.il
www.w3c.org.il
נתפס: 1עקרון .את תוכן האתר( perceive)מבחינה חושית ' לתפוס'ניתן
(וקול לוידאוכתוביות ,CAPTCHA-חלופה ל, תיאור תמונה)חלופה טקסטואלית
קרבה בין , הפרדת תוכן מעיצוב, תגיות נכונות וסמנטיות)תוכן הניתן להתאמה
(זיהוי כותרות ורשימות, אלמנטים קשורים
גודל אותיות , אי שימוש בצבע בלבד למשמעות–הפרדת חזית מרקע )בר הבחנה
(, ניגודיות, אי שימוש בתמונה כטקסט, בר הגדלה
37
www.isoc.org.il
www.w3c.org.il
שימוש בצבע
אין להשתמש בצבע כאמצעי החזותי היחיד להעברת
.מידע
, ,עיבויהדגישו גם באמצעות
8ad3j.mp/w38
שינוי רקעהוספת מסגרת
www.isoc.org.il
www.w3c.org.il
צבעים-ניגוד
4.5:1ניגוד של לפחות -יחס
)j.mp/w3ad9 השתמשו בבודק ניגודיות : )
39
כי קשה לקרוא כאשר אין מספיק
ניגודיות
www.w3c.org.il
טקסט חלופי
40
www.isoc.org.il
www.w3c.org.il
ניתן להפעלה: 2עקרון
.המרכיבים והניווט ניתנים להפעלה
41
עקיפת בלוקים החוזרים על , הגעה לכל הניווט) תפקוד מלא ממקלדת
(אין מלכודות מקלדת, פוקוס נראה לעין, סדר פוקוס נכון, עצמם
, דפים מובנים עם כותרות נכונות, מספר דרכים לאותו תוכן)קלות ניווט
(קישורים ברורים
(מעת הבהובים וחלקים זזים, עצירת תזוזה)מניעת התקפים
www.isoc.org.il
www.w3c.org.il
ניתן להבנה :3עקרון
הטקסט ניתן לקראה ולהבנה
42
זיהוי מכונה של השפה בדף , רמת הטקסט)טקסט בר הבנה
(רגון 'פירוש קיצורים וז, כולו ובחלקיו
אי שינוי ההקשר בפוקוס או בלי שהמשתמש )תפעול צפוי
(ניווט עקבי, ביקש
, הסבר על מה צריך להזין, הסבר מדויק לטעיות)תמיכה בהזנה
(טקסט עזרה, ולידציה
www.w3c.org.il
קפיצה , אין שינוי במסך ללא התראה -דוגמא
קישורים מובנים מההקשר, לתוכן
43
www.isoc.org.il
www.w3c.org.il
יציבות - 4עקרון
תוכנות וכדומה, תאימות מרבית עם דפדפנים
44
Parsing (אי כפילות , קינון נכון, תג פתיחה וסגירהattributes ,IDs are unique)
(שימוש בפקדים רגילים פותר את זה) ערך ברורים-תפקיד-שם
www.isoc.org.il
www.w3c.org.il
מֹו checkboxזהו : לדוגמה : מצבו, "קראתי את תנאי השימוש: "שְׁ
".לא מסומן"
addd3j.mp/w45
<input type="checkbox" id="markuplang" name="computerskills"
checked="checked“ /> <label for="markuplang"> קראתי את תנאי
<label/>השימוש
www.isoc.org.il
www.w3c.org.il
כתוביות בסרטונים•
•Alt בתמונות
•Skip לתוכן ראשי
(בתפריט עליון)אין תמיכה מלאה במקלדת •
לא תקני•
4)אם כי לא מושלם -שימוש יפה בכותרות • h1כותרות
הצבעים לא כל כך קונטרסטים•
לא ניתן לעצור תוכן מתחלף•
47
whitehouse.gov
www.w3c.org.il49
תצוגה •
הזנת תוכן•
רוחב פס ועלות •
מטרות המשתמש•
מגבלות המכשיר•
מכשירים ניידים לעומת שולחניים–מגבלות והבדלים
cmbp3bit.ly/w
www.w3c.org.il
Mobile Web Best Practices 1.0
50
www.w3c.org.il
Some practices…
• [TESTING] Carry out testing on actual devices as well as emulators.
• [URIS] Keep the URIs of site entry points short.
51
www.w3c.org.il
Some practices…
• [NAVBAR] Provide only minimal navigation at the top of the page.
• [BALANCE] Take into account the trade-off between having too many links on a page and asking the user to follow too many links to reach what they are looking for.
• [NAVIGATION] Provide consistent navigation mechanisms.
52
www.w3c.org.il
Some practices…
• [ACCESS_KEYS] Assign access keys to links in navigational menus and frequently accessed functionality.
• [LINK_TARGET_FORMAT] Note the target file's format unless you know the device supports it.
• [POP_UPS] Do not cause pop-ups or other windows to appear and do not change the current window without informing the user.
53
www.w3c.org.il
Some practices…
• [AUTO_REFRESH] Do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it.
• [SUITABLE] Ensure that content is suitable for use in a mobile context.
• [CLARITY] Use clear and simple language.
54
www.w3c.org.il
Mobile OK checker
cmbl3j.mp/w
55
www.w3c.org.il
Mobile Web Apps
56
www.isoc.org.il
www.w3c.org.il
(BP1) הבדל מאתר רגיל
include locally executable elements of interactivity and
persistent state.
:למשל
/nextbus.com/webkit app.clichespotting.com m.jobscentral.com.sgapp.clichespotting.com
www.isoc.org.il
www.w3c.org.il
1cmo3j.mp/w58
/webkitnextbus.com/
+ User Agent Switcher
www.isoc.org.il
www.w3c.org.il
touchsolitaire.mobi/app
j.mp/w3cmo15
www.isoc.org.il
www.w3c.org.il
Sencha touch (!!)
6cmo3j.mp/w
http://www.sencha.com/
www.w3c.org.il61
Best practices
www.isoc.org.il
www.w3c.org.il
(3)נתוני האפליקציה 1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)-התאמה ל6.
(1)שיקולים נוספים 7.
(35כ "סה)
www.isoc.org.il
www.w3c.org.il
השתמשו בטכנולוגיות המתאימות לאחסון מידע בצד הלקוח. 2
?מהעדיף להשתמש במנגנונים בצד לקוח לאחסון
.בעיקר בכמויות גדולות, מידע(start-up time ,Responsivenessמועיל ב)
?איך•BONDI
•5HTML - coff3j.mp/w-Offline
•Opera Widgets
63
by Remy Sharp - remysharp.com/demo/rubiks/
2. Use Appropriate Client-Side Storage Technologies for Local Data
j.mp/w3cmo7
www.isoc.org.il
www.w3c.org.il
צמצמו שימוש במקורות חיצוניים. 13
?למהטיול לשרת= HTTP request= תמונה , CSS, כל קובץ סקריפט
?איךCSS ו-JavaScript בלבד אחדכל אחד בקובץ
OR
או שהם ישולבו לפני שהעמוד מוגש ללקוח
64
13. Minimize External Resources
www.isoc.org.il
www.w3c.org.il
26. Ensure Paragraph Text Flows?מה
מנע גלילה אנכית•
ואפשר קריאה בשינוי אוריאנטציה•
?איך:בקונטיינרים
יחידות מידה יחסיות/ באחוזים :כן
יחידות מוחלטות או פיקסלים לא
...דוגמא
65
curiousleeImage by:
26. Ensure Paragraph Text Flows
www.isoc.org.il
www.w3c.org.il
טקסט צף ומתאים לגודל המסמך–דוגמא
c.org3W
www.isoc.org.il
www.w3c.org.il
הגדרת גודל תצוגה -דוגמא
Viewport
Offlines
Data URI
9cmo3j.mp/w67
http://nils-dehl.de/m/
www.isoc.org.il
www.w3c.org.il
35. Consider Canvas or SVG For
Dynamic Graphics
?מהcanvas
מאפשר לצייר גרפיקה פשוטה JavaScriptבאמצעות
68
http://www.mozilla.com/en-US/firefox/stats/
SVGלהגדרת אלמנטים של XMLשפת
-גרפיקה וקטורית המתווספים ל
DOM , וניתנים לשינוי בעזרת
JavaScript
...דוגמא
35. Consider Use Of Canvas Element or SVG For Dynamic Graphics
www.isoc.org.il
www.w3c.org.il
SVG and canvas demos
Video - Cool mobile apps with SVG and other Web technologies - j.mp/w3cmo13
• Bomomo.com
• zwibbler.com
• www.iconza.com
14cmo3j.mp/w16cmo3j.mp/w
www.isoc.org.il
www.w3c.org.il
www.w3c.org.il
@isociltech @eyalsela
70
תודה
j.mp/presentation12