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

‫כלים ושיטות לבניית אתרים תקניים,‬
‫נגישים ועשירים יותר‬
‫אייל סלע‬
‫מנהל פרויקטים, איגוד האינטרנט הישראלי‬
‫ומשרד ה-‪ W3C‬הישראלי‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫1‬
‫‪eyal@isoc.org.il‬‬

j.mp/w3cdoc
www.isoc.org.il
www.w3c.org.il 2
eyal@isoc.org.il

...‫תוכנית‬

W3C-‫מבוא - איגוד האינטרנט הישראלי ו‬ •
HTML & CSS •
‫נגישות‬ •
‫מובייל‬ •

www.isoc.org.il
www.w3c.org.il 3
eyal@isoc.org.il

‫איגוד האינטרנט הישראלי‬
‫• שלוחת האיגוד הבינלאומי:‬
‫• עמותה ללא מטרת רווח‬

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

‫‪www.w3c.org.il‬‬
‫4‬

‫‪W3C‬‬

‫ארגון בינלאומי‬ ‫•‬
‫כ-053 ארגונים‬ ‫•‬
‫פורום ניטראלי ליצירת תקני רשת באינטרנט.‬ ‫•‬
‫משימה:‬ ‫•‬
‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬
‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה‬
‫לטווח ארוך.‬


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

‫)‬ ‫(‬
‫עוד...‬


‫מבנה האתר הישראלי‬

www.isoc.org.il
www.w3c.org.il 7
eyal@isoc.org.il

‫ידיעות‬
‫שוטפות‬ ‫אתר ‪ W3C‬ישראל‬

‫יצירת‬
‫קשר,‬
‫אירועים‬

‫תקנים‬

‫השתתפו‬
‫בפיתוח‬
‫והפצת תקנים‬ ‫‪www.isoc.org.il‬‬

‫אתר ‪ W3C‬ישראל - המשך‬
‫מאמרים‬
‫מומלצים‬

‫כלים‬
‫למפתחים‬

‫ידיעות‬
‫מאתרים‬
‫אחרים‬

‫קישור‬
‫לאתר‬ ‫‪www.w3c.org.il‬‬ ‫9‬
‫מרוקו‬ ‫‪eyal@isoc.org.il‬‬

(Preview)

www.isoc.org.il
www.w3c.org.il 10
eyal@isoc.org.il

CSS-‫ ו‬HTML

www.isoc.org.il
www.w3c.org.il 11
eyal@isoc.org.il

HTML, CSS-‫כלי עזר: מנוע חיפוש לאלמנטים ב‬

– ‫וגם‬
‫• נגישות‬
Mobile •
SVG •
...‫דוגמא‬
j.mp/w3cmo8 www.isoc.org.il
www.w3c.org.il 12
eyal@isoc.org.il

float ‫דוגמא – חיפוש המושג‬

www.isoc.org.il
j.mp/w3cmo8 www.w3c.org.il 13
eyal@isoc.org.il

‫תקינות‬

www.isoc.org.il
www.w3c.org.il 14
eyal@isoc.org.il

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

<!doctype html>

www.isoc.org.il
www.w3c.org.il 16
eyal@isoc.org.il

‫2. כתבו תגיות באותיות קטנות‬
:‫נכון‬
<html>, <body>, <div>

:‫לא נכון‬
<HTML>, <BODY>, <DIV>

www.w3c.org.il 17
eyal@isoc.org.il

‫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

‫4. תג פתיחה וסגירה לכל האלמנטים – על פי‬
‫התקן‬
‫נכון:‬
‫>‪</p‬טקסט>‪<p‬‬

‫לא נכון:‬
‫טקסט>‪<p‬‬

‫‪j.mp/w3adb‬‬ ‫‪www.isoc.org.il‬‬

‫ בתוך מרכאות‬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

‫6. הפרידו תוכן מעיצוב‬

‫אותו אתר,‬
‫ללא ‪CSS‬‬

‫• ‪ HTML‬לתוכן‬
‫• ‪ CSS‬לעיצוב‬
‫דוגמא...‬ ‫• עיצוב ללא טבלאות‬
‫321‪j.mp/dkrg‬‬ ‫‪www.isoc.org.il‬‬

‫דוגמא – שינוי עיצוב‬

csszengarden.com standards.co.il
www.isoc.org.il
www.w3c.org.il 22
eyal@isoc.org.il

CSS-‫ וה‬HTML-‫7. בדקו את תקינות ה‬
validator.w3.org - HTML ‫• בודק תקינות‬
j.mp/w3add1 - CSS ‫• בודק תקינות‬

...‫דוגמא‬
www.isoc.org.il
www.w3c.org.il 23
eyal@isoc.org.il

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

gov.il www.isoc.org.il
www.w3c.org.il 24
eyal@isoc.org.il

‫למה אתר תקני?‬
‫מאפשר תצוגה אחידה (דפדפנים..., מכשירים)‬ ‫1.‬
‫מקטין את גודל הדף‬ ‫2.‬
‫'חסין עתיד'‬ ‫3.‬
‫נגיש יותר‬ ‫4.‬

‫5. קל לתחזוקה (שינוי מבנה, שינוי עיצוב, ‪.)debugging‬‬
‫6. טוב ל-‪SEO‬‬


‫התפלגות סוגי דפדפנים באתר האיגוד‬

www.isoc.org.il
www.w3c.org.il 26
eyal@isoc.org.il

CSS3-‫ ו‬HTML5

www.isoc.org.il
www.w3c.org.il 27
eyal@isoc.org.il

CSS3 – ‫דוגמא‬

j.mp/w3add8 www.isoc.org.il
www.w3c.org.il 28
eyal@isoc.org.il

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

www.w3c.org.il 29
eyal@isoc.org.il

?‫אילו טכנולוגיות ואלמנטים נתמכים כיום‬

caniuse.com www.isoc.org.il
www.w3c.org.il 30
eyal@isoc.org.il

‫נגישות‬

www.isoc.org.il
www.w3c.org.il 31
eyal@isoc.org.il

‫מהו אתר נגיש?‬
‫אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה‬
‫של יעילות והנאה ככל הגולשים.‬

‫סוגי מוגבלויות:‬
‫ראייה, שמיעה, קוגניציה, מוטוריקה‬


(WCAG) 2.0 ‫הנחיות להנגשת תכני אתרי אינטרנט‬

www.w3c.org.il 33
eyal@isoc.org.il

‫4 עקרונות‬

‫21 קווים מנחים‬

‫מדדי הצלחה‬

‫שיטות‬
j.mp/w3ada www.isoc.org.il
www.w3c.org.il 34
eyal@isoc.org.il

nagish.org.il

nagish.org.il www.isoc.org.il
www.w3c.org.il 35
eyal@isoc.org.il

AAA ,AA ,A – ‫שלוש רמות נגישות‬

www.isoc.org.il
www.w3c.org.il 36
eyal@isoc.org.il

‫עקרון 1: נתפס‬
‫ניתן 'לתפוס' מבחינה חושית (‪ ) perceive‬את תוכן האתר.‬

‫חלופה טקסטואלית (תיאור תמונה, חלופה ל-‪, CAPTCHA‬כתוביות לוידאו וקול)‬

‫תוכן הניתן להתאמה (תגיות נכונות וסמנטיות, הפרדת תוכן מעיצוב, קרבה בין‬
‫אלמנטים קשורים, זיהוי כותרות ורשימות)‬

‫בר הבחנה (הפרדת חזית מרקע – אי שימוש בצבע בלבד למשמעות, גודל אותיות‬
‫בר הגדלה, אי שימוש בתמונה כטקסט, ניגודיות, )‬


‫שימוש בצבע‬

‫אין להשתמש בצבע כאמצעי החזותי היחיד להעברת‬
‫מידע.‬

‫הדגישו גם באמצעות עיבוי, הוספת מסגרת, שינוי רקע‬

‫8‪j.mp/w3ad‬‬ ‫‪www.isoc.org.il‬‬

‫ניגוד-צבעים‬
‫יחס-ניגוד של לפחות 1:5.4‬

‫כי קשה לקרוא כאשר אין מספיק‬
‫ניגודיות‬

‫)השתמשו בבודק ניגודיות: 9‪)j.mp/w3ad‬‬

‫טקסט חלופי‬

www.w3c.org.il
40

‫עקרון 2: ניתן להפעלה‬
‫המרכיבים והניווט ניתנים להפעלה.‬

‫תפקוד מלא ממקלדת (הגעה לכל הניווט, עקיפת בלוקים החוזרים על‬
‫עצמם, סדר פוקוס נכון, פוקוס נראה לעין, אין מלכודות מקלדת)‬

‫קלות ניווט (מספר דרכים לאותו תוכן, דפים מובנים עם כותרות נכונות,‬
‫קישורים ברורים )‬

‫מניעת התקפים (עצירת תזוזה, מעת הבהובים וחלקים זזים )‬


‫עקרון 3: ניתן להבנה‬
‫הטקסט ניתן לקראה ולהבנה‬

‫טקסט בר הבנה ( רמת הטקסט, זיהוי מכונה של השפה בדף‬
‫כולו ובחלקיו, פירוש קיצורים וז'רגון )‬

‫תפעול צפוי ( אי שינוי ההקשר בפוקוס או בלי שהמשתמש‬
‫ביקש, ניווט עקבי)‬

‫תמיכה בהזנה (הסבר מדויק לטעיות, הסבר על מה צריך להזין,‬
‫ולידציה, טקסט עזרה)‬

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

‫34‬

‫עקרון 4 - יציבות‬
‫תאימות מרבית עם דפדפנים, תוכנות וכדומה‬

‫‪( Parsing‬תג פתיחה וסגירה, קינון נכון, אי כפילות ‪IDs are , attributes‬‬
‫‪)unique‬‬

‫שם-תפקיד-ערך ברורים (שימוש בפקדים רגילים פותר את זה)‬


:‫ שמֹו: "קראתי את תנאי השימוש", מצבו‬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

....‫דוגמא‬

nagish.org.il

www.isoc.org.il
www.w3c.org.il 46
eyal@isoc.org.il

‫כתוביות בסרטונים‬ ‫•‬
‫‪ Alt‬בתמונות‬ ‫•‬
‫‪ Skip‬לתוכן ראשי‬ ‫•‬

‫אין תמיכה מלאה במקלדת (בתפריט עליון )‬ ‫•‬
‫לא תקני‬ ‫•‬
‫שימוש יפה בכותרות - אם כי לא מושלם (4‬ ‫•‬
‫כותרות 1‪h‬‬
‫‪whitehouse.gov‬‬ ‫הצבעים לא כל כך קונטרסטים‬ ‫•‬
‫לא ניתן לעצור תוכן מתחלף‬ ‫•‬


‫ווב נייד‬

www.isoc.org.il
www.w3c.org.il 48
eyal@isoc.org.il

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

‫תצוגה‬ ‫•‬
‫הזנת תוכן‬ ‫•‬
‫רוחב פס ועלות‬ ‫•‬
‫מטרות המשתמש‬ ‫•‬
‫מגבלות המכשיר‬ ‫•‬

‫‪bit.ly/w3cmbp‬‬

‫94‬

Mobile Web Best Practices 1.0

www.w3c.org.il
50

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

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

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

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

Mobile OK checker

j.mp/w3cmbl

www.w3c.org.il
55

Mobile Web Apps

56
www.w3c.org.il

) 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

nextbus.com/webkit/

+ User Agent Switcher

www.w3c.org.il 58
eyal@isoc.org.il

touchsolitaire.mobi/app

www.w3c.org.il
eyal@isoc.org.il

Sencha touch (!!)

http://www.sencha.com/

www.w3c.org.il
eyal@isoc.org.il

Best practices

61
www.w3c.org.il

‫(3)‬ ‫נתוני האפליקציה‬ ‫1.‬
‫ביטחון מידע ופרטיות (1 )‬ ‫2.‬
‫יידוע המשתמש ושליטתו באפליקציה (4)‬ ‫3.‬
‫שימוש מוגבל במשאבים (11)‬ ‫4.‬
‫חווית משתמש (01)‬ ‫5.‬
‫התאמה ל-‪) 5( Delivery Context‬‬ ‫6.‬
‫שיקולים נוספים (1)‬ ‫7.‬
‫(סה"כ 53 )‬

‫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
www.w3c.org.il 63
eyal@isoc.org.il

‫31. צמצמו שימוש במקורות חיצוניים‬
‫למה?‬
‫כל קובץ סקריפט, ‪ , CSS‬תמונה = ‪ = HTTP request‬טיול לשרת‬

‫איך?‬
‫‪ CSS‬ו-‪ JavaScript‬כל אחד בקובץ אחד בלבד‬
‫‪OR‬‬
‫או שהם ישולבו לפני שהעמוד מוגש ללקוח‬

‫‪13. Minimize External Resources‬‬


‫‪26. Ensure Paragraph Text Flows‬‬
‫מה?‬
‫מנע גלילה אנכית‬ ‫•‬
‫ואפשר קריאה בשינוי אוריאנטציה‬ ‫•‬

‫איך?‬
‫בקונטיינרים :‬
‫כן: באחוזים / יחידות מידה יחסיות‬
‫לא יחידות מוחלטות או פיקסלים‬
‫‪Image by: curiouslee‬‬

‫דוגמא...‬
‫‪26. Ensure Paragraph Text Flows‬‬


‫דוגמא – טקסט צף ומתאים לגודל המסמך‬

www.isoc.org.il
W3c.org www.w3c.org.il
eyal@isoc.org.il

‫דוגמא - הגדרת גודל תצוגה‬

Viewport
Offlines
Data URI

http://nils-dehl.de/m/

www.w3c.org.il 67
eyal@isoc.org.il

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

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

 ‫תודה‬

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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (9)

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

Ähnlich wie כלים ושיטות לבניית אתרים תקניים, נגישים ועשירים יותר (20)

Mehr von Israeli Internet Association technology committee

Mehr von Israeli Internet Association technology committee (20)

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