לאחר חלק א' בו סקרתי את הרצאתו של ד"ר ישע סיוון בנושא 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 לא פולשני – כפי הוסבר קודם לכן.
    
• היה נכון (ומעודכן)

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

• לימוד צד לקוח מההתחלה
• מיקומים באמצעות css
• קישורים לקריאה קלילה, פעם בשבוע
• לגרום לאיכספלורר 6 להתנהג כמו 7 או 8
• אם אתם עדיין תומכים בו… איך לכתוב קוד לאקספלורר 6 בלי לשבור את הראש על כל הבאגים שלו
• תוכלו כמובן להמשך להתעדכן דרך הבלוג צד הלקוח של יובל רז

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

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

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