slide1
Download
Skip this Video
Download Presentation
כלים ושיטות לבניית אתרים תקניים, נגישים ועשירים יותר

Loading in 2 Seconds...

play fullscreen
1 / 70

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


  • 148 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
slide1

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

אייל סלע

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

slide3
תוכנית...

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

HTML & CSS

נגישות

מובייל

slide4
איגוד האינטרנט הישראלי

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

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

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

slide5
W3C

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

כ-350 ארגונים

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

משימה:

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

slide6
W3C השנה

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

קבוצות עניין

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

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

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

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

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

עוד...

( )

slide8
אתר W3C ישראל

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

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

תקנים

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

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

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

כלים למפתחים

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

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

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

דוגמא...

וגם –

  • נגישות
  • Mobile
  • SVG

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

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

נכון:

<html>, <body>, <div>

לא נכון:

<HTML>, <BODY>, <DIV>

j.mp/w3av5

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

נכון:

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

לא נכון:

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

j.mp/w3add3

slide19
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 />

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

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

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

j.mp/dkrg123

דוגמא...

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

standards.co.il

csszengarden.com

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

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

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

דוגמא...

slide25
למה אתר תקני?

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

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

\'חסין עתיד\'

נגיש יותר

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

טוב ל-SEO

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

slide32
מהו אתר נגיש?

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

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

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

slide34

4 עקרונות

12 קווים מנחים

מדדי הצלחה

שיטות

j.mp/w3ada

nagish org il
nagish.org.il

nagish.org.il

slide37
עקרון 1: נתפס

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

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

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

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

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

slide38
שימוש בצבע

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

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

שינוי רקע

הוספת מסגרת

j.mp/w3ad8

slide39
ניגוד-צבעים

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

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

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

slide41
עקרון 2: ניתן להפעלה

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

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

2.2 מספיק זמן

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

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

slide42
עקרון 3: ניתן להבנה

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

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

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

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

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

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

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

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

slide45

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

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

j.mp/w3addd

slide46
דוגמא....

nagish.org.il

slide47

כתוביות בסרטונים

Alt בתמונות

Skip לתוכן ראשי

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

לא תקני

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

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

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

whitehouse.gov

slide49

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

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

bit.ly/w3cmbp

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.

slide57

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

include locally executable elements of interactivityand persistentstate.

למשל:

app.clichespotting.com

app.clichespotting.com

  • nextbus.com/webkit/

m.jobscentral.com.sg

slide58

+ User Agent Switcher

  • nextbus.com/webkit/

j.mp/w3cmo1

58

sencha touch
Sencha touch (!!)

http://www.sencha.com/

j.mp/w3cmo6

slide62

נתוני האפליקציה (3)

  • ביטחון מידע ופרטיות (1)
  • יידוע המשתמש ושליטתו באפליקציה (4)
  • שימוש מוגבל במשאבים (11)
  • חווית משתמש (10)
  • התאמה ל-Delivery Context(5)
  • שיקולים נוספים (1)

(סה"כ 35)

slide63
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

slide64
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

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

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

slide70

תודה 

www.w3c.org.il

@isociltech @eyalsela

[email protected] il

j.mp/presentation12

ad