Embed Size (px)
DESCRIPTION
כלים ושיטות לבניית אתרים תקניים, נגישים ועשירים יותר. אייל סלע מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה- W3C הישראלי. j.mp/w3cdoc. תוכנית. מבוא - איגוד האינטרנט הישראלי ו W3C- HTML & CSS נגישות מובייל. איגוד האינטרנט הישראלי. שלוחת האיגוד הבינלאומי: עמותה ללא מטרת רווח - PowerPoint PPT Presentation
Citation preview
1
כלים ושיטות לבניית אתרים תקניים, נגישים ועשירים יותר
אייל סלע
מנהל פרויקטים, איגוד האינטרנט הישראלי הישראליW3Cומשרד ה-
www.w3c.org.il4
איגוד האינטרנט הישראלישלוחת האיגוד הבינלאומי: •
עמותה ללא מטרת רווח •
פועל לקידום האינטרנט והטמעתו בישראל כתשתית טכנולוגית, מחקרית, חינוכית,
חברתית ועסקית.
5
W3C
ארגון בינלאומי •
ארגונים350כ-•
פורום ניטראלי ליצירת תקני רשת באינטרנט. •
משימה:•להוביל את הרשת למיצוי הפוטנציאל על ידי
פיתוח פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח ארוך.
W3Cהשנה
סידרת מפגשים למפתחים
קבוצות עניין
פיתוח אפליקציה
סדנאות תגובה למומחים
הרצאות אורח )שלנו, שלכם(
תמיכה בפעילות קבוצות/קהילות
שילוב מומחים בקבוצות עבודה
עוד...
6
()
- המשך ישראלW3Cאתר
9
מאמרים מומלצים
ידיעות מאתרי
ם אחריםקישור לאתר מרוקו
כלים למפתחים
,HTMLכלי עזר: מנוע חיפוש לאלמנטים ב-CSS
דוגמא.... / 3 8 j mp w cmo
12
וגם –נגישות••Mobile•SVG
DOCTYPE. הגדירו 1
מנחה את הדפדפן כיצד יש לקרוא את הדף:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
...HTML5ב--
. / 3 5j mp w av
15
. כתבו תגיות באותיות קטנות2
נכון:
<html>, <body>, <div>
לא נכון:
<HTML>, <BODY>, <DIV>
. / 3 5j mp w av
17
. קינון נכון של תגיות3
נכון:
<p><span>טקסט</span></p>
לא נכון:
<p><span>טקסט</p></span>
. / 3 3j mp w add
18
. תג פתיחה וסגירה לכל האלמנטים – על 4פי התקן
. / 3j mp w adb
19
נכון:
<p>טקסט</p>
לא נכון:
<p>טקסט
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
. הפרידו תוכן מעיצוב6
. / 123j mp dkrg
דוגמא...
21
•HTML לתוכן •CSS לעיצוב עיצוב ללא טבלאות•
אותו אתר, CSSללא
CSS וה-HTML. בדקו את תקינות ה-7HTML - validator.w3.orgבודק תקינות •
j.mp/w3add1 - CSSבודק תקינות •
...דוגמא
23
למה אתר תקני?
, מכשירים(...מאפשר תצוגה אחידה )דפדפנים1.
מקטין את גודל הדף2.
'חסין עתיד'3.
נגיש יותר4.
(. debuggingקל לתחזוקה )שינוי מבנה, שינוי עיצוב, 5.
SEOטוב ל-6.
25
HTML5דוגמא - Notifications - http://slides.html5rocks.com/#slide12semantic tags http://slides.html5rocks.com/#slide17New form field types http://slides.html5rocks.com/#slide21Audio + Video http://slides.html5rocks.com/#slide22
. / 3 8j mp w av
29
מהו אתר נגיש?
אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה של יעילות והנאה ככל הגולשים.
סוגי מוגבלויות:
ראייה, שמיעה, קוגניציה, מוטוריקה
32
: נתפס1עקרון ( את תוכן האתר.perceiveניתן 'לתפוס' מבחינה חושית )
,כתוביות לוידאו וקול(CAPTCHA )תיאור תמונה, חלופה ל- חלופה טקסטואלית 1.1
חלופות עבור מדיה מבוססת-זמן.1.2
)תגיות נכונות וסמנטיות, הפרדת תוכן מעיצוב, קרבה בין אלמנטים תוכן הניתן להתאמה 1.3קשורים, זיהוי כותרות ורשימות(
)הפרדת חזית מרקע – אי שימוש בצבע בלבד למשמעות, גודל אותיות בר בר הבחנה 1.4הגדלה, אי שימוש בתמונה כטקסט, ניגודיות, (
37
שימוש בצבע
אין להשתמש בצבע כאמצעי החזותי היחיד להעברת מידע.
, ,עיבויהדגישו גם באמצעות
. / 3 8j mp w ad
38
שינוי רקעהוספת מסגרת
ניגוד-צבעים
4.5:1יחס-ניגוד של לפחות
) j.mp/w3ad9 השתמשו בבודק ניגודיות: )
39
כי קשה לקרוא כאשר אין מספיק ניגודיות
www.w3c.org.il
טקסט חלופי
40
: ניתן להפעלה2עקרון המרכיבים והניווט ניתנים להפעלה.
41
)הגעה לכל הניווט, עקיפת בלוקים תפקוד מלא ממקלדת2.1החוזרים על עצמם, סדר פוקוס נכון, פוקוס נראה לעין, אין מלכודות
מקלדת(
מספיק זמן2.2
)עצירת תזוזה, מעת הבהובים וחלקים זזים( מניעת התקפים 2.3
)מספר דרכים לאותו תוכן, דפים מובנים עם כותרות קלות ניווט 2.4נכונות, קישורים ברורים(
: ניתן להבנה3עקרון הטקסט ניתן לקראה ולהבנה
42
)רמת הטקסט, זיהוי מכונה של השפה טקסט בר הבנה 3.1בדף כולו ובחלקיו, פירוש קיצורים וז'רגון (
)אי שינוי ההקשר בפוקוס או בלי תפעול צפוי 3.2שהמשתמש ביקש, ניווט עקבי(
)הסבר מדויק לטעיות, הסבר על מה תמיכה בהזנה 3.3צריך להזין, ולידציה, טקסט עזרה(
www.w3c.org.il
דוגמא - אין שינוי במסך ללא התראה, קפיצה לתוכן, קישורים מובנים מההקשר
43
- יציבות4עקרון תאימות מרבית עם דפדפנים, תוכנות וכדומה
44
4.1 Parsing תג פתיחה וסגירה, קינון נכון, אי כפילות(attributes, IDs are unique)
)שימוש בפקדים רגילים פותר את זה( שם-תפקיד-ערך ברורים4.2
מֹו: "קראתי את תנאי השימוש", checkboxלדוגמה: זהו Fְׁשמצבו: "לא מסומן".
. / 3j mp w addd
45
<input type="checkbox" id="markuplang" name="computerskills" checked="checked“ /> <label for="markuplang"> קראתי את תנאי<label/> השימוש
כתוביות בסרטונים••Alt בתמונות •Skip לתוכן ראשי
אין תמיכה מלאה במקלדת )בתפריט עליון(•לא תקני• 4שימוש יפה בכותרות - אם כי לא מושלם )•
h1כותרות הצבעים לא כל כך קונטרסטים•לא ניתן לעצור תוכן מתחלף•
47
whitehouse.gov
www.w3c.org.il49
תצוגה•הזנת תוכן • רוחב פס ועלות•מטרות המשתמש •מגבלות המכשיר •
מגבלות והבדלים – מכשירים ניידים לעומת שולחניים
bit.ly/w3cmbp
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
j.mp/w3cmbl
55
www.w3c.org.il
Mobile Web Apps
56
57
(BP1) הבדל מאתר רגיל
include locally executable elements of interactivity and persistent state.
למשל:
nextbus.com/webkit/ app.clichespotting.com m.jobscentral.com.sgapp.clichespotting.com
www.w3c.org.il61
Best practices
62
(3)נתוני האפליקציה 1.
( 1)ביטחון מידע ופרטיות 2.
(4)יידוע המשתמש ושליטתו באפליקציה 3.
(11)שימוש מוגבל במשאבים 4.
(10)חווית משתמש 5.
Delivery Context (5)התאמה ל-6.
(1)שיקולים נוספים 7.
(35)סה"כ
. השתמשו בטכנולוגיות המתאימות לאחסון מידע בצד 2הלקוח
מה?עדיף להשתמש במנגנונים בצד לקוח
לאחסון מידע, בעיקר בכמויות גדולות.(start-up time , Responsiveness)מועיל ב
איך?•BONDI
•HTML5 - Offline - . / 3j mp w coff
•Opera Widgets
63
by Remy Sharp - remysharp.com/demo/rubiks/
2. Use Appropriate Client-Side Storage Technologies for Local Data
j.mp/w3cmo7
. צמצמו שימוש במקורות חיצוניים13
למה? = טיול לשרתHTTP request, תמונה = CSSכל קובץ סקריפט,
איך?CSS-ו JavaScript בלבדאחד כל אחד בקובץ
ORאו שהם ישולבו לפני שהעמוד מוגש ללקוח
64
13. Minimize External Resources
26. Ensure Paragraph Text Flowsמה?
מנע גלילה אנכית•ואפשר קריאה בשינוי אוריאנטציה•
איך?בקונטיינרים:
באחוזים / יחידות מידה יחסיותכן:
יחידות מוחלטות או פיקסליםלא
דוגמא...
65
Image by: curiouslee
26. Ensure Paragraph Text Flows
דוגמא - הגדרת גודל תצוגה
ViewportOfflinesData URI
j.mp/w3cmo967
http://nils-dehl.de/m/
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
SVG and canvas demos
Video - Cool mobile apps with SVG and other Web technologies - j.mp/w3cmo13
• Bomomo.com • zwibbler.com• www.iconza.com
j.mp/w3cmo14j.mp/w3cmo16
www.w3c.org.il@isociltech @eyalsela
70
תודה
j.mp/presentation12
