בסיסו של קידוד

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

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

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

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

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

דבר נוסף הוא הבדל בתמיכה של הדפדפנים בפקדים מסויימים, לדוגמה פקד למסגרות מעוגלות (השייך ל-CSS 3) שנתמך רק בדפדפנים מבוססי Gecko, WebKit (כמו למשל השועל וספארי), על כן נקדיש לעיתים חשיבה מראש של במה אנו רוצים להשתמש.

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

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

סוגי תגיות: מבנה הדף
התגיות הבסיסיות ביותר בשפת ה-HTML הן התגיות שחייבות להופיע בכל דף, והן המבנה של דף ה-HTML:

• html - פותח וסוגר את מסמך ה-HTML, התגית מכילה את התגיות head ו-body.
• head - בתגית הראש אנו מגדירים מידע על הדף, את האופי שלו, והתנהלות מול הדפדפן.
• title - תגית שנכנסת תחת תגית הראש, ובה אנו קובעים את שם הדף.
  
• body - מה שבא בין התגיות נקרא גוף המסמך, ובו אנו כותבים את התוכן של אותו הדף.
  

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

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

תגיות נוספות (מרכזיות):

• style - לצורך קביעות הנוגעות לעיצוב. ניתן לייבא מסמכי CSS בעזרתו.
  
• script - עבור שימוש בסקריפטים. ניתן לייבא מסמכי Javascript בעזרתו.
• meta - תגיות המגדירות מאפיינים בדף והתנהלות מול המשתמש (לדוגמה הגדרת קידוד שפה בדף).
• link - קשרי גומלין של הדף, ניתן לטעון בעזרתו מסמכי CSS.
• base - הגדרת נתיב עבור קישורים, תמונות ואלמנטים נוספים בדף (לא ממליץ להשתמש בזה).
  

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

סוגי תגיות: סוגי האלמנטים ב-body
בניגוד ל-head, בגוף המסמך קיימים מספר סוגים של אלמנטים, כאשר כל אחד מהם מחזיק במאפיינים משלו בהתאם לסוג, ומתנהג באופן שונה.

2 סוגי האלמנטים הבסיסיים:

• אלמנטי block - אלמנטים אלו בעלי תכונה שהם מתפרסים בברירות מחדל על 100% מהשטח האפשרי להם בצורה רוחבית, על כן אם תגדיר צבע רקע לאלמנט מסוג block, הצבע יתבטא לכל הרוחב, ולא רק היכן שמופיע טקסט. אלמנטים אלו יגרמו לבאים אחריהם לרדת שורה.
• אלמנטי inline - אלמנטים אלו משתלבים בתוך השורה, אינם גורמים לירידת שורה של התוכן הבא אחריהם, ואינם צורכים רוחב הגדול מהתוכן שנמצא בתוכם, על כן אם נגדיר צבע רקע לאלמנט inline, רק הרקע מאחורי התוכן אותו הוא תוחם ייצבע בהתאם, ולא כל השורה.

את 2 תכונות אלו מייצגות 2 תגיות: div שמוגדר כאלמנט block, ו-span שמוגדר כאלמנט inline, ומלבד התכונות הללו אין לתגיות אלו שום תכונות אחרות, ועל כן נוח להשתמש בהן במהלך העיצוב.

סוגי תגיות: סוגי אלמנטים נוספים ב-body
מלבד 2 סוגי האלמנטים שכבר ציינתי, קיימים מספר סוגי אלמנטים נוספים:

• אלמנטי none - אלמנטים אלו בלתי נראים ואינם שומרים מקום. אלמנטים נפוצים מסוג זה הם הערות ו-input מסוג hidden.
• אלמנטי inline block - אלמנטים מסוג זה יהיו אלמנטים מסוג block ויאפשרו השתמשות בהגדרות CSS המיועדות לאלמנטי block, אך ישתלבו בתוך השורה ולא יגרמו לירידת שורה של הטקסט אחריהן (לא מתפרסים על 100% מהרוחב).
• אלמנטי list-item - מדובר על אלמנטים ספציפיים השייכים לרשימות, מתנהגים בצורה הדומה ל-block.
• אלמנטי table - מדובר על הטבלה ספציפית, שעובדת ברוב המקרים דומה לאלמנט block, אך מושפעת ברוחבה מהתוכן הנכתב בה. לאלמנטי הטבלה השונים מוגדרת ב-CSS הגדרה ייחודית לתצוגה (לדוגמה table-row עבור tr).

שימו לב: התגיות ul ו-ol הינן אלמנטים מסוג block בדומה לשאר התגיות המצהירות על רשימה, ואילו האלמנט li שבתוכן מוגדר כ-list-item בדומה לשאר התגיות של הרשימות.

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

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

עניין התקנים הוא הכרחי ולא מעט אתרים כבר אימצו לעצמם את התקנים.

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

• תגיות מסוג block שמכילות אלמנטים מסוג block ו-inline.
• תגיות מסוג block שמכילות אלמנטים מסוג inline.
• תגיות מסוג inline שמכילות אלמנטים מסוג inline.

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

בנוסף קיימות תגיות שמכילות תחתן תגיות מוגדרות מראש, לדוגמה תגית ul (תגית block המצהירה על רשימה) מכילה רק את התגית li (תגית מסוג list-item, היכולה להכיל תגיות מסוג block ו-inline).

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

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

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

רגע של מחשבה - האם התגית נדרשת?
לעיתים בשל ההרגל להשתמש ב-div כתגית נטרלית שנוח לעצב, אנשים לא משתמשים בתגיות המתאימות, או שמשתמש בתגית div שלא כצורך, לדוגמה תגית div עם class בשם menu, ובתוך תגית ul של רשימה.
לא רק שהדבר מוסיף תוכן מיותר לדף, כל מה שניתן לעשות בעזרת div ניתן לעשות בעזרת ul, וכיוון ששני אלמנטים אלו מסוג block, אין צורך ב-div, ויצירה ישירות של תגית ul עם class בשם menu תיהיה הרבה יותר יעילה וברורה.

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

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

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

הקשר בין CSS ל-HTML
כדי לקשר בין CSS ל-HTMLl נוהגים להוסיף לתגיות את המאפיין class, בעזרתו ניתן להגדיר שם של מחלקה, או כמה שמות של מחלקות, בכדי לאפיין את האלמנט ולתת לו ערכי עיצוב שונים.
לדוגמה להגדיר class בעל הערך menu primary יאפשר לנו בעזרת css לאפיין כל אחת מהמחלקות האלו בנפרד, ובסופו של דבר לקבל תוצר.

חלק חשוב ועיקרי בעת קידוד הוא בחירת השמות למחלקות, כאשר על השם לתאר את המחלקה והתפקיד שלה, לדוגמה sideMenu כדי לציין כי מדובר בתפריט צדדי.
שימו לב כי שמות כמו rightDiv ו-leftDiv בעיתיים, שכן במידה ותחליטו לעדכן בעתיד את ה-CSS ולהחליף את הסדר ביניהם, תמצאו את עצמכם עם שמות שלא מתארים את המחלקות נכונה.

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

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

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

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

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

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

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

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

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

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

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

המשך קידוד נעים.