מפגש העשרה בנושא עתיד ה-Web – חלק שלישי ואחרון

 

לאחר חלק א' בו סקרתי את הרצאתו של ד"ר ישע סיוון בנושא HTML5 ועתיד האינטרנט, חלק ב' בו אייל סלע סיפר לנו על ארגון W3C, כעת אני אעבור להרצאה האחרונה מפי יובל רז. שמה של ההרצאה היה "היופי בסמנטיקה", יובל נתן הרצאה מקצועית ומעניינת שגרמה לצופים באמת להתחבר לנושא (למי שלא היה מחובר). השליחות שהרגשתי מיובל בהרצאתו, נתנה לי באמת השראה ורצון לכתוב קוד נכון יותר וסמנטי.

היופי בסמנטיקה מפי יובל רז

למרות בכי רב שנשמע מקרב הקהל על משך הרצאתו המועט (בצדק) של יובל, ב-45 הדקות שהיו לו, יובל פתח את נושא הסמנטיקה (נושא שאפשר להיכנס ולשמוע עליו שעות רבות) באופן ברור מאוד ובנקודות פשוטות מאוד. כעת אני אתן לכם את הרשימה הראשונה שיובל הציג, כללים לסמנטיקה בצד לקוח:

  • תיוג מושכל (P לפסקה, H1 לכותרת)
  • זרימת מסמך קריאה (H1, אח"כ H2 וכ"ו…)
  • הפרדת עיצוב מתוכן (ומפעולה)

לגביי הנקודה הראשונה, בגלל לימוד לא מסודר/נכון, הרבה מאוד בוני אתרים משתמשים בתגיות HTML באופן שרירותי. ב-HTML ישנם הרבה מאוד תגיות שרבים מבוני האתרים לא מכירים כלל (כולל אני עד לפני ההרצאה). תגיות כמו: acronym, address ו- ins כולם תגיות שמתאימות ליצוג של תוכן וכולן נותנות ערך סמנטי (משמעות) לתוכן שהן תוחמות. לכן כדאי מאוד ללמוד את כל התגיות שיש ב-HTML ולהשתמש בהן באופן מושכל, תגית P לפסקה ו-H1 לכותרת.

זרימת מסמך קריאה, בעצם אומרת שמסמך ראוי, בנוי לפי סדר הגיוני. בתחילת המסמך תהיה כותרת עטופה בתגית H1 ורק אח"כ H2. בסופו של דבר ניתן לעצב ולמקם כל דבר ב-CSS, מיקום עוקב של תגיות במסמך יעזור לאנשים עם מוגבליות וגם לגוגל.

הפרדת עיצוב מתוכן, זוהי נקודה חשובה מאוד. יש HTML ויש CSS, כל מה שקשור לעיצוב תנו ל-CSS לטפל בו. אתם לא מבינים כמה זמן אתם חוסכים לכם בסופו של דבר, כאשר אתם מפרידים בין עיצוב לתוכן. תיקון עיצוב כאשר העיצוב לא נמצא כלל בקובץ ה-HTML הופך לפשוט מאוד ונעשה אך ורק בקובץ ה-CSS. כמו כן, אל תשתמשו בתגיות HTML שמשמשות לתצוגה. בדומה להפרדה של תוכן והעיצוב תפרידו כמובן גם בין קוד JS (פעולה) לבין התוכן, אתם מוזמנים לקרוא על כך עוד בJavaScript לא פולשני.

יובל סיכם את החלק הזה במשפט הכל-כך נכון:

תעתיקו, תדפיסו, תתלו מעל המחשב. זה אחלה מוטו.

כעת יובל עבר לחלק "הפרכת המיתוסים" גם כאן הוא נגע בכמה נקודות חשובות:

  • ואלידציה של קוד כתנאי לקידום
  • CSS Positioning
  • Divitis, ספנת (span) וחשיבה טבלאית

הנקודה הראשונה היא נקודה שאני מתחבר אליה באופן אישי, לא פעם צץ מקדם אתרים שלא מבין דבר בסמנטיקה ולא חצי דבר בכתיבת קוד תקני, וטוען שעל-מנת שהוא יוכל לקדם את האתר הוא חייב שהאתר יהיה כתוב בקוד תיקני – שהאתר יעבור ולידציה.

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

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

הנקודה השלישית שוב מתחברת לנושא הסמנטיקה שבתגיות, הרבה מאוד בוני אתרים משתמשים באופן לא מחושב בתגיות, DIV ו-SPAN. לתגיות אלא אין שום משמעות! קוד שמורכב כולו רק מדיוים וספאנים הוא חסר ערך הגיוני, שימו לב לזה. כמובן שעדיף לא לבחור באפשרות של עיצוב באמצעות טבלאות (הפרדה בין התוכן לעיצוב אמרתי כבר?), מי כמוני יודע כמה קשה לתקן עיצוב (אפילו התיקון הקטן ביותר) כאשר העיצוב נעשה באמצעות טבלאות. מצד שני יובל הסביר שלמרות שעיצוב בטבלאות הוא נחות יותר, עיצוב טבלאי שנכתב עם חשיבה סמנטית יהיה עדיף על עיצוב מבוסס CSS ללא סמנטיקה. (בנק הפועלים למשל, הוא אתר שמועצב בעיצוב טבלאי אך למרות זאת הוא בנוי במבנה נכון וסמנטי).

סטנדרטים של פיתוח

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

אלה הם הסטנדרטים לפיתוח לפי יובל רז:

  • גישה לפרוייקט:
    • לא להתחיל בגרפיקה – להתחיל בתכנון, בניה של wireframe (מוסבר בהמשך) והלבשת הגרפיקה בסוף על המבנה הקיים.
    • לערב איש צד-לקוח מתחילת הפרוייקט – לאיש צד-לקוח יש הרבה מאוד ידע על אופן בו ימומשו הדברים בפרוייקט. הוא יכול לחסוך הרבה זמן.
  • תכנון עיצוב וגרפיקה:
    • לבנות קודם wireframe – תבנית או מבנה לאתר. ישנם כלים ברחבי הרשת שעוזרים בבנית wireframe ואפשר גם כמובן לבנות לבד באמצעות CSS ו-HTML.
    • איפוס גליונות הסגנון – לפני שמתחילים לכתוב CSS רצוי מאוד לאפס את ההגדרות ברירת המחדל של כל סוגי הדפדפנים. אתם פשוט יכולים להוריד קובץ איפוס.
    • תאימות בין דפדפנים – דאגו לתאימות של העיצוב שלכם, לכל הדפדפנים.
    • JS לא פולשני – כפי הוסבר קודם לכן.
  • היה נכון (ומעודכן)

למי שנשאר לאחר ההרצאה יובל נתן המלצות נוספות לקריאה נוספת:

זה סוף הסיקור מתוך מפגש העשרה, בשתי מילים, היה טוב, ואני כבר מחכה למפגש ההעשרה הבא. למי שנכח ומעוניין להשפיע על התכנים במפגשים הבאים, ISOC פרסמו טופס משוב, מלאו אותו וכך פעם הבאה יהיה אפילו יותר טוב.

שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

עוד באותו נושא:

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

תגובות
יובל רזNo Gravatar 4 באוקטובר

נו, עכשיו אני באמת יכול לקפוץ מהאגו לאיי-קיו. אשתי צריכה לדבר איתך, היא טוענת שהזחיחות שלי עכשיו בלתי נסבלת… :-)

[תגובה]

אורן רוטNo Gravatar 4 באוקטובר

עכשיו העלית צפיות, בהרצאה הבאה אני מבטיח לקטול :)

[תגובה]

שמוליקNo Gravatar 4 באוקטובר

כי אתה באמת זחוח

[תגובה]

יובל רז

אני מנסה להבין אם זה נאמר בקונוטציה חיובית או שלילית…
אבל אני זחוח, אז אני יוצא מנקודת המוצא שכל מה שנאמר עלי חיובי :-)

[תגובה]

גדיNo Gravatar 20 באוקטובר

סליחה, אבל הערה/שאלה כללית: מי לעזאזל מודע לכל תקני ה- W3C (בייחוד בארץ)? אתם באמת חושבים שיש יותר מ-5 מפתחים (במקרה הטוב) שקראו, הטמיעו ומשתמשים באופן קבוע בתקנים? הרי התקנים משתרעים על פני מאות על גבי מאות של עמודים, עם הגדרות ספציפיות ומאפיינים שונים לתגים השונים. הנה רעיון טוב לסקר: מי קרא 50% מהתקן?
ביננו – רוב המפתחים היום נותנים לסביבות העבודה שלהם לייצר את קוד ה- HTML באופן אוטומטי (מישהו אמר Visual Studio?), בלי להבין את המשמעויות ובלי לשלוט ממש בתוצר הסופי.
אין באמור לעיל לטעון נגד המרצים, ושוב – ברור לי שיש כמה מפתחים ש"יקפצו" ויגידו "מה זאת אומרת – אני עובד רק לפי התקנים, באחריות". שייערב להם. בסופו של דבר, לרוב אין מושג מה אומר התקן.
הערה אחרונה לסיום, למי שלא יודע, למרות שהוזכר שוב ושוב: כתיבה בקוד תקני אין משמעותה שהאתר שלכם ייראה זהה בכל הדפדפנים. זו פשוט טעות. כל דפדפן "מפרש" אחרת את קוד ה- HTML. יותר גרוע – כל גירסת דפדפן מפרשת אחרת את הקוד (ראו IE לדוגמה).

[תגובה]

אורן רוט

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

[תגובה]

יובל רז

למען האמת מה שאתה כותב כאן יכול להשמע כמו נסיון ליצירת מהומה, אבל אני מעדיף להתייחס לכך עניינית:

אמרתי את זה בהרצאה שלי ואני אחזור על כך – אין שום סיבה למפתח לעבור על כל התקנים של ה-WC3 ולשנן אותם. מקסימום להסתכל מה מותר ומה אסור אם עולה התהייה. תאמין לי שניסיתי לעבור על כולם. חנות המשקאות ליד הקיבוץ שלי עשתה עלי קופה והכבד שלי לא היה שמח במיוחד…
לפיכך השאלה שלך על מי באמת קרא את התקן – אינה רלוונטית לעניינינו. על מפתחים להתייחס אל התקן כהמלצה, לא כאל דברי אלוהים חיים.

בנוגע לנקודה שלך בעניין "רוב המפתחים היום נותנים לסביבת העבודה שלהם לייצר קוד…":
תראה לי מפתח צד לקוח (דגש על צד לקוח. לצערי אנשי צד שרת מחפפים כאן…) שעושה את זה ואני אראה לך חובבן או חאפר, או שניהם. בנוסף לכך אני יכול להפנות אותך לכמה וכמה קהילות מפתחים שוקקות למדי ברשת הישראלית שעובדות על טהרת הסטנדרטים והסמאנטיקה.

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

שוב – כתיבה תקינה אינה בהכרח תקנית וכתיבה תקנית אינה בהכרח תקינה. מדובר בשילוב בין השתיים.

[תגובה]

גדיNo Gravatar 21 באוקטובר

יובל – ממש לא התכוונתי לעורר פרובוקציות. וסליחה אם זה השתמע. אני עובד כמפתח אתרי אינטרנט כבר כ-10 שנים, ובאופן אישי – "מרגיזות" אותי כל חברות פיתוח האתרים המפרסמות את עצמן בנוסח "אנחנו בונים את האתרים לפי התקן, ולכן האתרים שלנו תואמים לכל הדפדפנים הקיימים"…
סתם למי שמעוניין – הנה מאמר קטן ומעניין בנושא (באנגלית): http://www.moovinonup.com/w3c_validation_standards.html
שימו לב גם למשפט הבא, לקראת סוף המאמר:
"…beware of some website design companies who claim to make your website web standard compliant…"
כמו כן, כאנקדוטה משעשעת, מופיע במאמר קישור לסרטון שבו Matt Cutts מגוגל מסביר מדוע דף הבית של Google עצמו אינו עובר ולידציה…
שוב תודה למגיבים.

[תגובה]

יובל רז

גדי, בנוגע לזה אני לא חולק עליך. גם אותי מרגיזות אותן החברות. פיתוח לפי תקנים != פיתוח תואם דפדפנים. מה שכן, היצמדות לתקנים תורמת מאוד לדעתי בהנחלת שיטות עבודה נכונות אשר בתורן מפחיתות בצורה דראסטית את בעיות התאימות בין דפדפנים.
אני לא צריך להתחיל להסביר למה קוד סמאנטי אשר בנוי בתצורה של הפרדת עיצוב מתוכן עדיף מבחינת תחזוקה ושימוש מחודש מאשר קוד אשר משתמש בטבלאות לעימוד…

בכל מקרה, אני מניח שאנחנו תמימי דעים בעניין ולכן אמשיך בענייני :-)

[תגובה]

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון