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

23,689 views
23,564 views

Published on

הרצאה בכנס 'ערך מוסף'
www.w3c.org.il

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
23,689
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. ‫כלים ושיטות לבניית אתרים תקניים,‬ ‫נגישים ועשירים יותר‬ ‫אייל סלע‬ ‫מנהל פרויקטים, איגוד האינטרנט הישראלי‬ ‫ומשרד ה-‪ W3C‬הישראלי‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫1‬ ‫‪eyal@isoc.org.il‬‬
  2. 2. j.mp/w3cdoc www.isoc.org.il www.w3c.org.il 2 eyal@isoc.org.il
  3. 3. ...‫תוכנית‬ W3C-‫מבוא - איגוד האינטרנט הישראלי ו‬ • HTML & CSS • ‫נגישות‬ • ‫מובייל‬ • www.isoc.org.il www.w3c.org.il 3 eyal@isoc.org.il
  4. 4. ‫איגוד האינטרנט הישראלי‬ ‫• שלוחת האיגוד הבינלאומי:‬ ‫• עמותה ללא מטרת רווח‬ ‫פועל לקידום האינטרנט והטמעתו בישראל‬ ‫כתשתית טכנולוגית, מחקרית, חינוכית, חברתית‬ ‫ועסקית.‬ ‫‪www.w3c.org.il‬‬ ‫4‬
  5. 5. ‫‪W3C‬‬ ‫ארגון בינלאומי‬ ‫•‬ ‫כ-053 ארגונים‬ ‫•‬ ‫פורום ניטראלי ליצירת תקני רשת באינטרנט.‬ ‫•‬ ‫משימה:‬ ‫•‬ ‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬ ‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה‬ ‫לטווח ארוך.‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫5‬ ‫‪eyal@isoc.org.il‬‬
  6. 6. ‫‪ W3C‬השנה‬ ‫סידרת מפגשים למפתחים‬ ‫קבוצות עניין‬ ‫פיתוח אפליקציה‬ ‫סדנאות תגובה למומחים‬ ‫הרצאות אורח (שלנו, שלכם)‬ ‫תמיכה בפעילות קבוצות/קהילות‬ ‫שילוב מומחים בקבוצות עבודה‬ ‫)‬ ‫(‬ ‫‪www.isoc.org.il‬‬ ‫עוד...‬ ‫‪www.w3c.org.il‬‬ ‫6‬ ‫‪eyal@isoc.org.il‬‬
  7. 7. ‫מבנה האתר הישראלי‬ www.isoc.org.il www.w3c.org.il 7 eyal@isoc.org.il
  8. 8. ‫ידיעות‬ ‫שוטפות‬ ‫אתר ‪ W3C‬ישראל‬ ‫יצירת‬ ‫קשר,‬ ‫אירועים‬ ‫תקנים‬ ‫השתתפו‬ ‫בפיתוח‬ ‫והפצת תקנים‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫8‬ ‫‪eyal@isoc.org.il‬‬
  9. 9. ‫אתר ‪ W3C‬ישראל - המשך‬ ‫מאמרים‬ ‫מומלצים‬ ‫כלים‬ ‫למפתחים‬ ‫ידיעות‬ ‫מאתרים‬ ‫אחרים‬ ‫קישור‬ ‫‪www.isoc.org.il‬‬ ‫לאתר‬ ‫‪www.w3c.org.il‬‬ ‫9‬ ‫מרוקו‬ ‫‪eyal@isoc.org.il‬‬
  10. 10. (Preview) www.isoc.org.il www.w3c.org.il 10 eyal@isoc.org.il
  11. 11. CSS-‫ ו‬HTML www.isoc.org.il www.w3c.org.il 11 eyal@isoc.org.il
  12. 12. HTML, CSS-‫כלי עזר: מנוע חיפוש לאלמנטים ב‬ – ‫וגם‬ ‫• נגישות‬ Mobile • SVG • ...‫דוגמא‬ j.mp/w3cmo8 www.isoc.org.il www.w3c.org.il 12 eyal@isoc.org.il
  13. 13. float ‫דוגמא – חיפוש המושג‬ www.isoc.org.il j.mp/w3cmo8 www.w3c.org.il 13 eyal@isoc.org.il
  14. 14. ‫תקינות‬ www.isoc.org.il www.w3c.org.il 14 eyal@isoc.org.il
  15. 15. DOCTYPE ‫1. הגדירו‬ :‫- מנחה את הדפדפן כיצד יש לקרוא את הדף‬ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> ...HTML5-‫- ב‬ j.mp/w3av5 www.isoc.org.il www.w3c.org.il 15 eyal@isoc.org.il
  16. 16. <!doctype html> www.isoc.org.il www.w3c.org.il 16 eyal@isoc.org.il
  17. 17. ‫2. כתבו תגיות באותיות קטנות‬ :‫נכון‬ <html>, <body>, <div> :‫לא נכון‬ <HTML>, <BODY>, <DIV> j.mp/w3av5 www.isoc.org.il www.w3c.org.il 17 eyal@isoc.org.il
  18. 18. ‫3. קינון נכון של תגיות‬ :‫נכון‬ <p><span>‫/<טקסט‬span></p> :‫לא נכון‬ <p><span>‫/<טקסט‬p></span> j.mp/w3add3 www.isoc.org.il www.w3c.org.il 18 eyal@isoc.org.il
  19. 19. ‫4. תג פתיחה וסגירה לכל האלמנטים – על פי‬ ‫התקן‬ ‫נכון:‬ ‫>‪</p‬טקסט>‪<p‬‬ ‫לא נכון:‬ ‫טקסט>‪<p‬‬ ‫‪j.mp/w3adb‬‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫91‬ ‫‪eyal@isoc.org.il‬‬
  20. 20. ‫ בתוך מרכאות‬Attributes .5 :‫נכון‬ <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 /> www.isoc.org.il www.w3c.org.il 20 eyal@isoc.org.il
  21. 21. ‫6. הפרידו תוכן מעיצוב‬ ‫אותו אתר,‬ ‫ללא ‪CSS‬‬ ‫• ‪ HTML‬לתוכן‬ ‫• ‪ CSS‬לעיצוב‬ ‫דוגמא...‬ ‫• עיצוב ללא טבלאות‬ ‫321‪j.mp/dkrg‬‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫12‬ ‫‪eyal@isoc.org.il‬‬
  22. 22. ‫דוגמא – שינוי עיצוב‬ csszengarden.com standards.co.il www.isoc.org.il www.w3c.org.il 22 eyal@isoc.org.il
  23. 23. CSS-‫ וה‬HTML-‫7. בדקו את תקינות ה‬ validator.w3.org - HTML ‫• בודק תקינות‬ j.mp/w3add1 - CSS ‫• בודק תקינות‬ ...‫דוגמא‬ www.isoc.org.il www.w3c.org.il 23 eyal@isoc.org.il
  24. 24. gov.il -‫ ב‬CSS ‫בדיקת תקינות‬ gov.il www.isoc.org.il www.w3c.org.il 24 eyal@isoc.org.il
  25. 25. ‫למה אתר תקני?‬ ‫מאפשר תצוגה אחידה (דפדפנים..., מכשירים)‬ ‫1.‬ ‫מקטין את גודל הדף‬ ‫2.‬ ‫'חסין עתיד'‬ ‫3.‬ ‫נגיש יותר‬ ‫4.‬ ‫5. קל לתחזוקה (שינוי מבנה, שינוי עיצוב, ‪.)debugging‬‬ ‫6. טוב ל-‪SEO‬‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫52‬ ‫‪eyal@isoc.org.il‬‬
  26. 26. ‫התפלגות סוגי דפדפנים באתר האיגוד‬ www.isoc.org.il www.w3c.org.il 26 eyal@isoc.org.il
  27. 27. CSS3-‫ ו‬HTML5 www.isoc.org.il www.w3c.org.il 27 eyal@isoc.org.il
  28. 28. CSS3 – ‫דוגמא‬ j.mp/w3add8 www.isoc.org.il www.w3c.org.il 28 eyal@isoc.org.il
  29. 29. Notifications - http://slides.html5rocks.com/#slide12 HTML5 - ‫דוגמא‬ 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 www.isoc.org.il www.w3c.org.il 29 eyal@isoc.org.il
  30. 30. ?‫אילו טכנולוגיות ואלמנטים נתמכים כיום‬ caniuse.com www.isoc.org.il www.w3c.org.il 30 eyal@isoc.org.il
  31. 31. ‫נגישות‬ www.isoc.org.il www.w3c.org.il 31 eyal@isoc.org.il
  32. 32. ‫מהו אתר נגיש?‬ ‫אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה‬ ‫של יעילות והנאה ככל הגולשים.‬ ‫סוגי מוגבלויות:‬ ‫ראייה, שמיעה, קוגניציה, מוטוריקה‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫23‬ ‫‪eyal@isoc.org.il‬‬
  33. 33. (WCAG) 2.0 ‫הנחיות להנגשת תכני אתרי אינטרנט‬ j.mp/w3av2 www.isoc.org.il www.w3c.org.il 33 eyal@isoc.org.il
  34. 34. ‫4 עקרונות‬  ‫21 קווים מנחים‬  ‫מדדי הצלחה‬  ‫שיטות‬ j.mp/w3ada www.isoc.org.il www.w3c.org.il 34 eyal@isoc.org.il
  35. 35. nagish.org.il nagish.org.il www.isoc.org.il www.w3c.org.il 35 eyal@isoc.org.il
  36. 36. AAA ,AA ,A – ‫שלוש רמות נגישות‬ www.isoc.org.il www.w3c.org.il 36 eyal@isoc.org.il
  37. 37. ‫עקרון 1: נתפס‬ ‫ניתן 'לתפוס' מבחינה חושית (‪ ) perceive‬את תוכן האתר.‬ ‫חלופה טקסטואלית (תיאור תמונה, חלופה ל-‪, CAPTCHA‬כתוביות לוידאו וקול)‬ ‫תוכן הניתן להתאמה (תגיות נכונות וסמנטיות, הפרדת תוכן מעיצוב, קרבה בין‬ ‫אלמנטים קשורים, זיהוי כותרות ורשימות)‬ ‫בר הבחנה (הפרדת חזית מרקע – אי שימוש בצבע בלבד למשמעות, גודל אותיות‬ ‫בר הגדלה, אי שימוש בתמונה כטקסט, ניגודיות, )‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫73‬ ‫‪eyal@isoc.org.il‬‬
  38. 38. ‫שימוש בצבע‬ ‫אין להשתמש בצבע כאמצעי החזותי היחיד להעברת‬ ‫מידע.‬ ‫הדגישו גם באמצעות עיבוי, הוספת מסגרת, שינוי רקע‬ ‫8‪j.mp/w3ad‬‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫83‬ ‫‪eyal@isoc.org.il‬‬
  39. 39. ‫ניגוד-צבעים‬ ‫יחס-ניגוד של לפחות 1:5.4‬ ‫כי קשה לקרוא כאשר אין מספיק‬ ‫ניגודיות‬ ‫)השתמשו בבודק ניגודיות: 9‪)j.mp/w3ad‬‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫93‬ ‫‪eyal@isoc.org.il‬‬
  40. 40. ‫טקסט חלופי‬ www.w3c.org.il 40
  41. 41. ‫עקרון 2: ניתן להפעלה‬ ‫המרכיבים והניווט ניתנים להפעלה.‬ ‫תפקוד מלא ממקלדת (הגעה לכל הניווט, עקיפת בלוקים החוזרים על‬ ‫עצמם, סדר פוקוס נכון, פוקוס נראה לעין, אין מלכודות מקלדת)‬ ‫קלות ניווט (מספר דרכים לאותו תוכן, דפים מובנים עם כותרות נכונות,‬ ‫קישורים ברורים )‬ ‫מניעת התקפים (עצירת תזוזה, מעת הבהובים וחלקים זזים )‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫14‬ ‫‪eyal@isoc.org.il‬‬
  42. 42. ‫עקרון 3: ניתן להבנה‬ ‫הטקסט ניתן לקראה ולהבנה‬ ‫טקסט בר הבנה ( רמת הטקסט, זיהוי מכונה של השפה בדף‬ ‫כולו ובחלקיו, פירוש קיצורים וז'רגון )‬ ‫תפעול צפוי ( אי שינוי ההקשר בפוקוס או בלי שהמשתמש‬ ‫ביקש, ניווט עקבי)‬ ‫תמיכה בהזנה (הסבר מדויק לטעיות, הסבר על מה צריך להזין,‬ ‫ולידציה, טקסט עזרה)‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫24‬ ‫‪eyal@isoc.org.il‬‬
  43. 43. ‫דוגמא - אין שינוי במסך ללא התראה, קפיצה‬ ‫לתוכן, קישורים מובנים מההקשר‬ ‫‪www.w3c.org.il‬‬ ‫34‬
  44. 44. ‫עקרון 4 - יציבות‬ ‫תאימות מרבית עם דפדפנים, תוכנות וכדומה‬ ‫‪( Parsing‬תג פתיחה וסגירה, קינון נכון, אי כפילות ‪IDs are , attributes‬‬ ‫‪)unique‬‬ ‫שם-תפקיד-ערך ברורים (שימוש בפקדים רגילים פותר את זה)‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫44‬ ‫‪eyal@isoc.org.il‬‬
  45. 45. :‫ שמֹו: "קראתי את תנאי השימוש", מצבו‬checkbox ‫לדוגמה: זהו‬ ְׁ ."‫"לא מסומן‬ <input type="checkbox" id="markuplang" name="computerskills" checked="checked“ /> <label for="markuplang"> ‫קראתי את תנאי‬ ‫/<השימוש‬label> j.mp/w3addd www.isoc.org.il www.w3c.org.il 45 eyal@isoc.org.il
  46. 46. ....‫דוגמא‬ nagish.org.il www.isoc.org.il www.w3c.org.il 46 eyal@isoc.org.il
  47. 47. ‫כתוביות בסרטונים‬ ‫•‬ ‫‪ Alt‬בתמונות‬ ‫•‬ ‫‪ Skip‬לתוכן ראשי‬ ‫•‬ ‫אין תמיכה מלאה במקלדת (בתפריט עליון )‬ ‫•‬ ‫לא תקני‬ ‫•‬ ‫שימוש יפה בכותרות - אם כי לא מושלם (4‬ ‫•‬ ‫כותרות 1‪h‬‬ ‫‪whitehouse.gov‬‬ ‫הצבעים לא כל כך קונטרסטים‬ ‫•‬ ‫לא ניתן לעצור תוכן מתחלף‬ ‫•‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫74‬ ‫‪eyal@isoc.org.il‬‬
  48. 48. ‫ווב נייד‬ www.isoc.org.il www.w3c.org.il 48 eyal@isoc.org.il
  49. 49. ‫מגבלות והבדלים – מכשירים ניידים לעומת שולחניים‬ ‫תצוגה‬ ‫•‬ ‫הזנת תוכן‬ ‫•‬ ‫רוחב פס ועלות‬ ‫•‬ ‫מטרות המשתמש‬ ‫•‬ ‫מגבלות המכשיר‬ ‫•‬ ‫‪bit.ly/w3cmbp‬‬ ‫94‬ ‫‪www.w3c.org.il‬‬
  50. 50. Mobile Web Best Practices 1.0 www.w3c.org.il 50
  51. 51. Some practices… • [TESTING] Carry out testing on actual devices as well as emulators. • [URIS] Keep the URIs of site entry points short. www.w3c.org.il 51
  52. 52. 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. www.w3c.org.il 52
  53. 53. 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. www.w3c.org.il 53
  54. 54. 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. www.w3c.org.il 54
  55. 55. Mobile OK checker j.mp/w3cmbl www.w3c.org.il 55
  56. 56. Mobile Web Apps 56 www.w3c.org.il
  57. 57. ) BP1( ‫הבדל מאתר רגיל‬ include locally executable elements of interactivity and persistent state. :‫למשל‬ nextbus.com/webkit/ app.clichespotting.com m.jobscentral.com.sg www.isoc.org.il www.w3c.org.il 57 eyal@isoc.org.il
  58. 58. nextbus.com/webkit/ + User Agent Switcher j.mp/w3cmo1 www.isoc.org.il www.w3c.org.il 58 eyal@isoc.org.il
  59. 59. touchsolitaire.mobi/app j.mp/w3cmo15 www.isoc.org.il www.w3c.org.il eyal@isoc.org.il
  60. 60. Sencha touch (!!) http://www.sencha.com/ j.mp/w3cmo6 www.isoc.org.il www.w3c.org.il eyal@isoc.org.il
  61. 61. Best practices 61 www.w3c.org.il
  62. 62. ‫(3)‬ ‫נתוני האפליקציה‬ ‫1.‬ ‫ביטחון מידע ופרטיות (1 )‬ ‫2.‬ ‫יידוע המשתמש ושליטתו באפליקציה (4)‬ ‫3.‬ ‫שימוש מוגבל במשאבים (11)‬ ‫4.‬ ‫חווית משתמש (01)‬ ‫5.‬ ‫התאמה ל-‪) 5( Delivery Context‬‬ ‫6.‬ ‫שיקולים נוספים (1)‬ ‫7.‬ ‫(סה"כ 53 )‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫26‬ ‫‪eyal@isoc.org.il‬‬
  63. 63. ‫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.isoc.org.il www.w3c.org.il 63 eyal@isoc.org.il
  64. 64. ‫31. צמצמו שימוש במקורות חיצוניים‬ ‫למה?‬ ‫כל קובץ סקריפט, ‪ , CSS‬תמונה = ‪ = HTTP request‬טיול לשרת‬ ‫איך?‬ ‫‪ CSS‬ו-‪ JavaScript‬כל אחד בקובץ אחד בלבד‬ ‫‪OR‬‬ ‫או שהם ישולבו לפני שהעמוד מוגש ללקוח‬ ‫‪13. Minimize External Resources‬‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫46‬ ‫‪eyal@isoc.org.il‬‬
  65. 65. ‫‪26. Ensure Paragraph Text Flows‬‬ ‫מה?‬ ‫מנע גלילה אנכית‬ ‫•‬ ‫ואפשר קריאה בשינוי אוריאנטציה‬ ‫•‬ ‫איך?‬ ‫בקונטיינרים :‬ ‫כן: באחוזים / יחידות מידה יחסיות‬ ‫לא יחידות מוחלטות או פיקסלים‬ ‫‪Image by: curiouslee‬‬ ‫דוגמא...‬ ‫‪26. Ensure Paragraph Text Flows‬‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫56‬ ‫‪eyal@isoc.org.il‬‬
  66. 66. ‫דוגמא – טקסט צף ומתאים לגודל המסמך‬ www.isoc.org.il W3c.org www.w3c.org.il eyal@isoc.org.il
  67. 67. ‫דוגמא - הגדרת גודל תצוגה‬ Viewport Offlines Data URI http://nils-dehl.de/m/ j.mp/w3cmo9 www.isoc.org.il www.w3c.org.il 67 eyal@isoc.org.il
  68. 68. 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.isoc.org.il www.w3c.org.il 68 eyal@isoc.org.il
  69. 69. 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.isoc.org.il www.w3c.org.il eyal@isoc.org.il
  70. 70.  ‫תודה‬ j.mp/presentation12 www.w3c.org.il @isociltech @eyalsela eyal@isoc.org.il www.isoc.org.il www.w3c.org.il 70 eyal@isoc.org.il

×