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

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


  • 142 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' כלים ושיטות לבניית אתרים תקניים, נגישים ועשירים יותר' - adelio


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

אייל סלע

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


j.mp/w3cdoc נגישים ועשירים יותר


תוכנית... נגישים ועשירים יותר

מבוא - איגוד האינטרנט הישראלי ו W3C-

HTML & CSS

נגישות

מובייל


איגוד האינטרנט הישראלי נגישים ועשירים יותר

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

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

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


W3C נגישים ועשירים יותר

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

כ-350 ארגונים

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

משימה:

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


W3C נגישים ועשירים יותר השנה

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

קבוצות עניין

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

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

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

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

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

עוד...

( )


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


אתר נגישים ועשירים יותרW3C ישראל

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

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

תקנים

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


אתר נגישים ועשירים יותרW3C ישראל- המשך

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

כלים למפתחים

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

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


Preview
(Preview) נגישים ועשירים יותר


Html css
HTML נגישים ועשירים יותר ו-CSS


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

דוגמא...

וגם –

  • נגישות

  • Mobile

  • SVG

j.mp/w3cmo8


Float
דוגמא – חיפוש המושג נגישים ועשירים יותרfloat

j.mp/w3cmo8


תקינות נגישים ועשירים יותר


1 doctype
1. הגדירו נגישים ועשירים יותרDOCTYPE

מנחה את הדפדפן כיצד יש לקרוא את הדף:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

ב-HTML5...

j.mp/w3av5


<!doctype html> נגישים ועשירים יותר


2. כתבו תגיות באותיות קטנות נגישים ועשירים יותר

נכון:

<html>, <body>, <div>

לא נכון:

<HTML>, <BODY>, <DIV>

j.mp/w3av5


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

נכון:

<p><span>טקסט</span></p>

לא נכון:

<p><span>טקסט</p></span>

j.mp/w3add3


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

נכון:

<p>טקסט</p>

לא נכון:

<p>טקסט

j.mp/w3adb


5 attributes
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 />


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

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

  • HTML לתוכן

  • CSS לעיצוב

  • עיצוב ללא טבלאות

j.mp/dkrg123

דוגמא...


דוגמא – שינוי עיצוב על פי התקן

standards.co.il

csszengarden.com


7 html css
7. בדקו את תקינות ה- על פי התקןHTML וה-CSS

בודק תקינות HTML - validator.w3.org

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

דוגמא...


Css gov il
בדיקת תקינות על פי התקןCSS ב- gov.il

gov.il


למה אתר תקני? על פי התקן

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

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

'חסין עתיד'

נגיש יותר

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

טוב ל-SEO



Html5 css3
HTML5 ו-CSS3


3 css
דוגמא – 3 CSS

j.mp/w3add8


Html5
דוגמא - 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



נגישות כיום?


מהו אתר נגיש? כיום?

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

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

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



4 עקרונות כיום?

12 קווים מנחים

מדדי הצלחה

שיטות

j.mp/w3ada


Nagish org il
nagish.org.il כיום?

nagish.org.il



עקרון 1: נתפס כיום?

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

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

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

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

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


שימוש בצבע כיום?

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

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

שינוי רקע

הוספת מסגרת

j.mp/w3ad8


ניגוד-צבעים כיום?

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

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

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



עקרון 2: ניתן להפעלה כיום?

המרכיבים והניווט ניתנים להפעלה.

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

2.2 מספיק זמן

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

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


עקרון 3: ניתן להבנה כיום?

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

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

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

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


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


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

תאימות מרבית עם דפדפנים, תוכנות וכדומה

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

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


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

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

j.mp/w3addd


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

nagish.org.il


כתוביות בסרטונים קפיצה לתוכן, קישורים מובנים מההקשר

Alt בתמונות

Skip לתוכן ראשי

אין תמיכה מלאה במקלדת (בתפריט עליון)

לא תקני

שימוש יפה בכותרות - אם כי לא מושלם (4 כותרות h1

הצבעים לא כל כך קונטרסטים

לא ניתן לעצור תוכן מתחלף

whitehouse.gov


ווב נייד קפיצה לתוכן, קישורים מובנים מההקשר


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

  • תצוגה

  • הזנת תוכן

  • רוחב פס ועלות

  • מטרות המשתמש

  • מגבלות המכשיר

bit.ly/w3cmbp


Mobile Web Best Practices 1.0 לעומת שולחניים


Some practices
Some practices… לעומת שולחניים

[TESTING] Carry out testing on actual devices as well as emulators.

[URIS] Keep the URIs of site entry points short.


Some practices1
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.


Some practices2
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.


Some practices3
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 mobilecontext.

[CLARITY] Use clear and simple language.


Mobile ok checker
Mobile OK checker לעומת שולחניים

j.mp/w3cmbl


Mobile Web Apps לעומת שולחניים


הבדל מאתר רגיל לעומת שולחניים(BP1)

include locally executable elements of interactivityand persistentstate.

למשל:

app.clichespotting.com

app.clichespotting.com

  • nextbus.com/webkit/

m.jobscentral.com.sg


+ User Agent Switcher לעומת שולחניים

  • nextbus.com/webkit/

j.mp/w3cmo1

58


touchsolitaire.mobi/app לעומת שולחניים

j.mp/w3cmo15


Sencha touch
Sencha touch (!!) לעומת שולחניים

http://www.sencha.com/

j.mp/w3cmo6


Best practices לעומת שולחניים


  • נתוני האפליקציה לעומת שולחניים(3)

  • ביטחון מידע ופרטיות (1)

  • יידוע המשתמש ושליטתו באפליקציה (4)

  • שימוש מוגבל במשאבים (11)

  • חווית משתמש (10)

  • התאמה ל-Delivery Context(5)

  • שיקולים נוספים (1)

(סה"כ 35)


2. השתמשו בטכנולוגיות המתאימות לאחסון מידע בצד הלקוח

מה?

עדיף להשתמש במנגנונים בצד לקוח לאחסון מידע, בעיקר בכמויות גדולות.

(מועיל בstart-up time , Responsiveness)

איך?

BONDI

HTML5 - Offline - j.mp/w3coff

OperaWidgets

by Remy Sharp - remysharp.com/demo/rubiks/

2. Use Appropriate Client-Side Storage Technologies for Local Data

j.mp/w3cmo7


13. צמצמו שימוש במקורות חיצוניים לאחסון מידע בצד הלקוח

למה?

כל קובץ סקריפט, CSS, תמונה = HTTP request = טיול לשרת

איך?

CSS ו-JavaScript כל אחד בקובץ אחד בלבד

OR

או שהם ישולבו לפני שהעמוד מוגש ללקוח

13. Minimize External Resources


26 ensure paragraph text flows
26. Ensure Paragraph Text Flows לאחסון מידע בצד הלקוח

Image by: curiouslee

26. Ensure Paragraph Text Flows

מה?

מנע גלילה אנכית

ואפשר קריאה בשינוי אוריאנטציה

איך?

בקונטיינרים:

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

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

דוגמא...

65



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

Viewport

Offlines

Data URI

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

j.mp/w3cmo9


35 consider canvas or svg for dynamic graphics
35. Consider Canvas or SVG For Dynamic Graphics המסמך

SVG

שפת XML להגדרת אלמנטים של גרפיקה וקטורית המתווספים ל-DOM, וניתנים לשינוי בעזרת JavaScript

דוגמא...

http://www.mozilla.com/en-US/firefox/stats/

35. Consider Use Of Canvas Element or SVG For Dynamic Graphics

מה?

canvas

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

68


Svg and canvas demos
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.w3c.org.il

@isociltech @eyalsela

[email protected] il

j.mp/presentation12


ad