1 / 70

כלים ושיטות לבניית אתרים תקניים, נגישים ועשירים יותר

כלים ושיטות לבניית אתרים תקניים, נגישים ועשירים יותר. אייל סלע מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה- W3C הישראלי. j.mp/w3cdoc. תוכנית. מבוא - איגוד האינטרנט הישראלי ו W3C- HTML & CSS נגישות מובייל. איגוד האינטרנט הישראלי. שלוחת האיגוד הבינלאומי: עמותה ללא מטרת רווח

adelio
Download Presentation

כלים ושיטות לבניית אתרים תקניים, נגישים ועשירים יותר

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. כלים ושיטות לבניית אתרים תקניים, נגישים ועשירים יותר אייל סלע מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה-W3C הישראלי

  2. j.mp/w3cdoc

  3. תוכנית... מבוא - איגוד האינטרנט הישראלי ו W3C- HTML & CSS נגישות מובייל

  4. איגוד האינטרנט הישראלי שלוחת האיגוד הבינלאומי: עמותה ללא מטרת רווח פועל לקידום האינטרנט והטמעתו בישראל כתשתית טכנולוגית, מחקרית, חינוכית, חברתית ועסקית.

  5. W3C ארגון בינלאומי כ-350 ארגונים פורום ניטראלי ליצירת תקני רשת באינטרנט. משימה: להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח ארוך.

  6. W3C השנה סידרת מפגשים למפתחים קבוצות עניין פיתוח אפליקציה סדנאות תגובה למומחים הרצאות אורח (שלנו, שלכם) תמיכה בפעילות קבוצות/קהילות שילוב מומחים בקבוצות עבודה עוד... ( )

  7. מבנה האתר הישראלי

  8. אתר W3C ישראל ידיעות שוטפות יצירת קשר, אירועים תקנים השתתפו בפיתוח והפצת תקנים

  9. אתר W3C ישראל- המשך מאמרים מומלצים כלים למפתחים ידיעות מאתרים אחרים קישור לאתר מרוקו

  10. (Preview)

  11. HTML ו-CSS

  12. כלי עזר: מנוע חיפוש לאלמנטים ב-HTML, CSS דוגמא... וגם – • נגישות • Mobile • SVG j.mp/w3cmo8

  13. דוגמא – חיפוש המושג float j.mp/w3cmo8

  14. תקינות

  15. 1. הגדירו DOCTYPE מנחה את הדפדפן כיצד יש לקרוא את הדף: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> ב-HTML5... j.mp/w3av5

  16. <!doctype html>

  17. 2. כתבו תגיות באותיות קטנות נכון: <html>, <body>, <div> לא נכון: <HTML>, <BODY>, <DIV> j.mp/w3av5

  18. 3. קינון נכון של תגיות נכון: <p><span>טקסט</span></p> לא נכון: <p><span>טקסט</p></span> j.mp/w3add3

  19. 4. תג פתיחה וסגירה לכל האלמנטים – על פי התקן נכון: <p>טקסט</p> לא נכון: <p>טקסט j.mp/w3adb

  20. 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 />

  21. 6. הפרידו תוכן מעיצוב אותו אתר, ללא CSS • HTML לתוכן • CSS לעיצוב • עיצוב ללא טבלאות j.mp/dkrg123 דוגמא...

  22. דוגמא – שינוי עיצוב standards.co.il csszengarden.com

  23. 7. בדקו את תקינות ה-HTML וה-CSS בודק תקינות HTML - validator.w3.org בודק תקינות j.mp/w3add1 - CSS דוגמא...

  24. בדיקת תקינות CSS ב- gov.il gov.il

  25. למה אתר תקני? מאפשר תצוגה אחידה (דפדפנים..., מכשירים) מקטין את גודל הדף 'חסין עתיד' נגיש יותר קל לתחזוקה (שינוי מבנה, שינוי עיצוב, debugging). טוב ל-SEO

  26. התפלגות סוגי דפדפנים באתר האיגוד

  27. HTML5 ו-CSS3

  28. דוגמא – 3CSS j.mp/w3add8

  29. דוגמא - 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 j.mp/w3av8

  30. אילו טכנולוגיות ואלמנטים נתמכים כיום? caniuse.com

  31. נגישות

  32. מהו אתר נגיש? אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה של יעילות והנאה ככל הגולשים. סוגי מוגבלויות: ראייה, שמיעה, קוגניציה, מוטוריקה

  33. הנחיות להנגשת תכני אתרי אינטרנט (WCAG) 2.0 j.mp/w3av2

  34. 4 עקרונות  12 קווים מנחים  מדדי הצלחה  שיטות j.mp/w3ada

  35. nagish.org.il nagish.org.il

  36. שלוש רמות נגישות – A, AA, AAA

  37. עקרון 1: נתפס ניתן 'לתפוס' מבחינה חושית (perceive) את תוכן האתר. 1.1 חלופה טקסטואלית (תיאור תמונה, חלופה ל- CAPTCHA,כתוביות לוידאו וקול) 1.2 חלופות עבור מדיה מבוססת-זמן. 1.3 תוכן הניתן להתאמה (תגיות נכונות וסמנטיות, הפרדת תוכן מעיצוב, קרבה בין אלמנטים קשורים, זיהוי כותרות ורשימות) 1.4 בר הבחנה (הפרדת חזית מרקע – אי שימוש בצבע בלבד למשמעות, גודל אותיות בר הגדלה, אי שימוש בתמונה כטקסט, ניגודיות, )

  38. שימוש בצבע אין להשתמש בצבע כאמצעי החזותי היחיד להעברת מידע. הדגישו גם באמצעות עיבוי, , שינוי רקע הוספת מסגרת j.mp/w3ad8

  39. ניגוד-צבעים יחס-ניגוד של לפחות 4.5:1 כי קשה לקרוא כאשר אין מספיק ניגודיות ) j.mp/w3ad9 השתמשו בבודק ניגודיות: )

  40. טקסט חלופי

  41. עקרון 2: ניתן להפעלה המרכיבים והניווט ניתנים להפעלה. 2.1 תפקוד מלא ממקלדת (הגעה לכל הניווט, עקיפת בלוקים החוזרים על עצמם, סדר פוקוס נכון, פוקוס נראה לעין, אין מלכודות מקלדת) 2.2 מספיק זמן 2.3 מניעת התקפים (עצירת תזוזה, מעת הבהובים וחלקים זזים) 2.4 קלות ניווט (מספר דרכים לאותו תוכן, דפים מובנים עם כותרות נכונות, קישורים ברורים)

  42. עקרון 3: ניתן להבנה הטקסט ניתן לקראה ולהבנה 3.1 טקסט בר הבנה (רמת הטקסט, זיהוי מכונה של השפה בדף כולו ובחלקיו, פירוש קיצורים וז'רגון ) 3.2 תפעול צפוי (אי שינוי ההקשר בפוקוס או בלי שהמשתמש ביקש, ניווט עקבי) 3.3 תמיכה בהזנה (הסבר מדויק לטעיות, הסבר על מה צריך להזין, ולידציה, טקסט עזרה)

  43. דוגמא - אין שינוי במסך ללא התראה, קפיצה לתוכן, קישורים מובנים מההקשר

  44. עקרון 4 - יציבות תאימות מרבית עם דפדפנים, תוכנות וכדומה 4.1 Parsing(תג פתיחה וסגירה, קינון נכון, אי כפילות attributes, IDs are unique) 4.2 שם-תפקיד-ערך ברורים (שימוש בפקדים רגילים פותר את זה)

  45. לדוגמה: זהו checkbox שְׁמוֹ: "קראתי את תנאי השימוש", מצבו: "לא מסומן". <input type="checkbox" id="markuplang" name="computerskills" checked="checked“ /> <label for="markuplang"> קראתי את תנאי השימוש </label> j.mp/w3addd

  46. דוגמא.... nagish.org.il

  47. כתוביות בסרטונים Alt בתמונות Skip לתוכן ראשי אין תמיכה מלאה במקלדת (בתפריט עליון) לא תקני שימוש יפה בכותרות - אם כי לא מושלם (4 כותרות h1 הצבעים לא כל כך קונטרסטים לא ניתן לעצור תוכן מתחלף whitehouse.gov

  48. ווב נייד

  49. מגבלות והבדלים – מכשירים ניידים לעומת שולחניים • תצוגה • הזנת תוכן • רוחב פס ועלות • מטרות המשתמש • מגבלות המכשיר bit.ly/w3cmbp

  50. Mobile Web Best Practices 1.0

More Related