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

www.isoc.org.ilwww.w3c.org.ileyal@isoc.org.il

אייל סלע

מנהל פרויקטים, איגוד האינטרנט הישראלי הישראליW3Cומשרד ה-

j.mp/w3cdoc

תוכנית...

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

מובייל•

www.w3c.org.il4

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

עמותה ללא מטרת רווח •

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

חברתית ועסקית.

ארגון בינלאומי •

ארגונים350כ-•

פורום ניטראלי ליצירת תקני רשת באינטרנט. •

משימה:•להוביל את הרשת למיצוי הפוטנציאל על ידי

פיתוח פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח ארוך.

W3Cהשנה

סידרת מפגשים למפתחים

קבוצות עניין

פיתוח אפליקציה

סדנאות תגובה למומחים

הרצאות אורח )שלנו, שלכם(

תמיכה בפעילות קבוצות/קהילות

שילוב מומחים בקבוצות עבודה

עוד...

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

ישראלW3Cאתר

תקנים

יצירת קשר,

אירועים

השתתפו בפיתוח והפצת תקנים

ידיעות שוטפות

- המשך ישראלW3Cאתר

מאמרים מומלצים

ידיעות מאתרי

ם אחריםקישור לאתר מרוקו

כלים למפתחים

)Preview(

HTML-ו CSS

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

דוגמא.... / 3 8 j mp w cmo

וגם –נגישות••Mobile•SVG

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

13j.mp/w3cmo8

תקינות

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

!<doctype html>

. כתבו תגיות באותיות קטנות2

נכון:

לא נכון:

. / 3 5j mp w av

. קינון נכון של תגיות3

נכון:

לא נכון:

. / 3 3j mp w add

. תג פתיחה וסגירה לכל האלמנטים – על 4פי התקן

. / 3j mp w adb

נכון:

לא נכון:

<p>טקסט

5 .Attributesבתוך מרכאות

נכון:

לא נכון:

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

. / 123j mp dkrg

דוגמא...

•HTML לתוכן •CSS לעיצוב עיצוב ללא טבלאות•

אותו אתר, CSSללא

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

standards.co.il

csszengarden.com

CSS וה-HTML. בדקו את תקינות ה-7HTML - validator.w3.orgבודק תקינות •

j.mp/w3add1 - CSSבודק תקינות •

...דוגמא

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

.gov il

למה אתר תקני?

, מכשירים(...מאפשר תצוגה אחידה )דפדפנים1.

מקטין את גודל הדף2.

'חסין עתיד'3.

נגיש יותר4.

(. debuggingקל לתחזוקה )שינוי מבנה, שינוי עיצוב, 5.

SEOטוב ל-6.

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

HTML5 -ו CSS3

3CSSדוגמא –

. / 3 8j mp w add

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

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

.caniuse com

נגישות

מהו אתר נגיש?

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

סוגי מוגבלויות:

ראייה, שמיעה, קוגניציה, מוטוריקה

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

j.mp/w3av233

עקרונות4

קווים מנחים12

מדדי הצלחה

שיטות

. / 3j mp w ada

nagish.org.il

. .nagish org il

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

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

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

חלופות עבור מדיה מבוססת-זמן.1.2

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

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

שימוש בצבע

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

, ,עיבויהדגישו גם באמצעות

. / 3 8j mp w ad

שינוי רקעהוספת מסגרת

ניגוד-צבעים

4.5:1יחס-ניגוד של לפחות

) j.mp/w3ad9 השתמשו בבודק ניגודיות: )

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

www.w3c.org.il

טקסט חלופי

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

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

מקלדת(

מספיק זמן2.2

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

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

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

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

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

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

www.w3c.org.il

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

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

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

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

מֹו: "קראתי את תנאי השימוש", checkboxלדוגמה: זהו Fְׁשמצבו: "לא מסומן".

. / 3j mp w addd

<input type="checkbox" id="markuplang" name="computerskills" checked="checked“ /> <label for="markuplang"> קראתי את תנאי<label/> השימוש

דוגמא....

nagish.org.il

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

אין תמיכה מלאה במקלדת )בתפריט עליון(•לא תקני• 4שימוש יפה בכותרות - אם כי לא מושלם )•

h1כותרות הצבעים לא כל כך קונטרסטים•לא ניתן לעצור תוכן מתחלף•

whitehouse.gov

ווב נייד

www.w3c.org.il49

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

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

bit.ly/w3cmbp

www.w3c.org.il

Mobile Web Best Practices 1.0

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.

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.

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.

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.

www.w3c.org.il

Mobile OK checker

j.mp/w3cmbl

www.w3c.org.il

Mobile Web Apps

(BP1) הבדל מאתר רגיל

include locally executable elements of interactivity and persistent state.

למשל:

nextbus.com/webkit/ app.clichespotting.com m.jobscentral.com.sgapp.clichespotting.com

. / 3 1j mp w cmo

nextbus.com/webkit/

+ User Agent Switcher

touchsolitaire.mobi/app

j.mp/w3cmo15

Sencha touch)!!(

j.mp/w3cmo6

http://www.sencha.com/

www.w3c.org.il61

Best practices

(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

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או שהם ישולבו לפני שהעמוד מוגש ללקוח

13. Minimize External Resources

26. Ensure Paragraph Text Flowsמה?

מנע גלילה אנכית•ואפשר קריאה בשינוי אוריאנטציה•

איך?בקונטיינרים:

באחוזים / יחידות מידה יחסיותכן:

יחידות מוחלטות או פיקסליםלא

דוגמא...

Image by: curiouslee

26. Ensure Paragraph Text Flows

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

W3c.org

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

ViewportOfflinesData URI

j.mp/w3cmo967

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

35. Consider Canvas or SVG For Dynamic Graphics

מה?canvas

מאפשר לצייר גרפיקה פשוטה באמצעות

JavaScript

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

eyal@isoc.org. il

תודה

j.mp/presentation12

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

Documents

לחיים טובים יותר

"הסדר" שבאי-סדר או לדעת יותר על אנטרופיה

עשרה צעדים לבניית אסטרטגיית שיווק מנצחת בפייסבוק

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

Tips for Better Life טיפים לחיים טובים יותר Cochemiea poselgeri Take a 10-30 minutes walk every day. And while you walk, smile. כל יום תלך 10 – 30 דקות

מאפיינים משמעותיים בגישות ושיטות טיפול בראי ההיסטוריה

מכרז 1006-18 הפעלת מרכזי הכוון תעסוקתי לאוכלוסייה הערבית ... · Web viewשני מציעים או יותר שיגישו את אותו מנהל

brancoweiss.org.il · Web viewתרגילי קריאה בקול צריכים להיעשות בין 15 עד 30 דקות ביום ואף יותר בנסיבות הדורשות מאמץ

חמישה צעדים לבניית אסטרטגיית גיוס ברשת

יותר ממאה פיתוחים, המצאות והצלחות ישראליות

עקרונות לבניית רשימת תפוצה איכותית

מדריך לבניית Chat Bot במערכת InforUMobile

meyda.education.gov.ilmeyda.education.gov.il/files/Rama/31-EVR-016-8B-SOF-net.docx · Web viewמניתוח תשובותיהם של יותר מ-3,500 בני נוער התברר כי

משחקים לעתיד טוב יותר

בקשה לדחיית מועד דיון - ADALAH · Web viewמתייחס למעשים שאירעו לפני יותר מחמש שנים, ביום 28.4.05, עת התקיימה בבילעין

א.ר. לוגיסטיק נדל"ן - מדוע השקעה ורכישת קרקע חקלאית טובה יותר מהשקעות אחרות?

כמה עובדות... בשנת 1993 היו ברשת 130 אתרים בלבד כיום יש יותר מ-4 מיליארד דפים בכל יום מתווספים כ 7.3 מיליון

טיפים לבניית מצגת

Safari On-line books. מה זה ספארי ספארי זו ספריה וירטואלית בנושא מחשבים היא כוללת יותר מ-12000 כותרים כל הספרים

כלים ושיטות להנגשת אתרי אינטרנט על פי WCAG 2.0