לרצות פשוט

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

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

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

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

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

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

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

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

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

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

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

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

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

גלישה פשוטה לכולם.

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

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

הבהרה - המושג קידוד
במהלך המאמר תראו אותי מרבה להשתמש במילים מקודד וקידוד, אם כי זאת מילים אלו הינן בסלנג, כיוון שאין בעברית מילה המתארת את העבודה של בניית עמודי אינטרנט באמצעות 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, ומגיעים לאתר לתפארת.

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

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

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

יומהולדת + פרוייקט נגישות לבעלי מוגבלויות

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

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

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

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

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

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

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

עדיפויות לנגישות
קיימות 3 עדיפויות לתאימות.

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

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

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

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

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

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

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

אז מזל טוב לי, והמשך גלישה מהנה.

הילד שצעק "תקנים תקנים"

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

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

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

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

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

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

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

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

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


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

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

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

המשך גלישה לא אדישה לכולם.

מתחילים ללמוד קידוד

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

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

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

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

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

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

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

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

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

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

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

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

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

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

יצירת תפריט לאתר

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

המשך גלישה מהנה.

קידוד בעזרת DIV, אבל לא רק

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

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

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

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

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

דוגמה לדפים משלב 2:

HTML Document (index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>game</title>
<link rel="stylesheet" href="./global.css" type="text/css" />
</head>

<body>
<!-- Text -->
</body>
</html>

CSS Document (global.css):

body
{
direction: ltr;
padding: 0px;
margin: 0px;
font-size: 14px;
font-family: arial,verdana,sans-serif;
}

שלב 3 - אלמנט גלובאלי
הערה לפני: מעתה קוד ה-HTML עליו אני אכתוב בא במקום ההערה במסמך ה-html שהצגתי קודם.

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

HTML Document (index.html):

<div id="global">

</div>

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

CSS Document (global.css):

#global
{
width: 800px;
border: 1px solid gray;
margin: 10px auto 5px;
}

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

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

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

HTML Document (index.html):

<div id="global">
 <div id="top">

 </div>
 <div id="left">

 </div>
 <div id="right">

 </div>
 <div id="bottom">

 </div>
</div>

כעת בעזרת CSS אנו דואגים שכל דבר יהיה במקומו, ניתן לעשות זאת בעזרת float, בעזרת margin, בעזרת padding, שימוש ב-clear, או בכל אלמנט אחר שיכול לעזור בקביעת המבנה.
ניתן ואף רצוי לתת רקע שונה לכל אחד מהאלמנטים, כדי שנוכל לזהותם.
מה שאני לא ממליץ לעשותו הוא קביעה של גובה לאלמנטים, כי אנו רוצים אותם גמישים בלי הגבלה לגובה מסויים (ברוב המקרים).

CSS Document (global.css):

#top, #bottom
{
padding: 0.5em;
background-color: gray;
color: white;
clear: left;
}

#left
{
float: left;
width: 30%;
margin: 0;
padding: 1em;
}

#right
{
border-left: 1px solid gray;
margin-left: 32%;
padding: 1em;
}

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

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

1. נשתמש בתגי ה-H עבור כותרות.
2. נשתמש ברשימה (UL) עבור תפריטי קישורים.
3. בתגית P עבור פסקאות.
4. בכל אלמנט אחר בעת הצורך.

כאשר יש בידינו את המסמך הכללי, אנו ניצור תגית H1 לכותרת העליונה, ורשימה ב-DIV השמאלי עבור לינקים (הכוללת בתוכה כבר לינקים לצורך העניין), אשר מעליה נוסיף תגית H2 לכותרת של הרשימה.
ניתן כבר להוסיף תוכן בשביל שנידע סדר גודל של דברים, ובכדי שנוכל לעצב הכל בהתאם.

HTML Document (index.html):

<div id="global">
 <div id="top">
   <h1>iBlog</h1>
 </div>
 <div id="left">
   <h2>Links</h2>
   <ul>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
     <li><a href="#">Link 4</a></li>
     <li><a href="#">Link 5</a></li>
   </ul>
 </div>
 <div id="right">
   <p>
     text text text text text text text text text text text<br />
     text text text text text text text text text text text<br />
     text text text text text text text text text text text<br />
     text text text text text text text text text text text
   </p>
   <p>
     text text text text text text text text text text text<br />
     text text text text text text text text text text text
   </p>
 </div>
 <div id="bottom">
   (c) Copyright
 </div>
</div>

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

CSS Document (global.css):

h1, h2, #left ul
{
padding: 0;
margin: 0;
list-style: none;
}

אלמנטים נפוצים שהייתי ממליץ להשתמש בהגדרות עיצוב אלו כדי לבטל את שלהן:
ul, dl, dt, dd, form, h1, h2, h3, h4, h5, h6, h7, p

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

CSS Document (global.css):

h1
{
text-align: center;
}

#left ul a
{
display: block;
width: 90%;
background-color: gray;
color: white;
margin-bottom: 2px;
text-align: center;
text-decoration:none;
}

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

CSS Document (global.css):

#left ul a:hover
{
background-color: black;
color: white;
}

שימו לב: חובה לבדוק אם ה-HTML וה-CSS תקינים בעזרת ולידטור.

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

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

קודים מלאים

HTML Document (index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>game</title>
<link rel="stylesheet" href="./global.css" type="text/css" />
</head>

<body>
<div id="global">
 <div id="top">
   <h1>iBlog</h1>
 </div>
 <div id="left">
   <h2>Links</h2>
   <ul>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
     <li><a href="#">Link 4</a></li>
     <li><a href="#">Link 5</a></li>
   </ul>
 </div>
 <div id="right">
   <p>
     text text text text text text text text text text text<br />
     text text text text text text text text text text text<br />
     text text text text text text text text text text text<br />
     text text text text text text text text text text text
   </p>
   <p>
     text text text text text text text text text text text<br />
     text text text text text text text text text text text
   </p>
 </div>
 <div id="bottom">
   (c) Copyright
 </div>
</div>
</body>
</html>

CSS Document (global.css):

body
{
direction:ltr;
padding: 0px;
margin: 0px;
font-size:14px;
font-family: arial,verdana,sans-serif;
}

#global
{
width: 800px;
border: 1px solid gray;
margin: 10px auto 5px;
}

#top, #bottom
{
padding: 0.5em;
background-color: gray;
color: white;
clear: left;
}

#left
{
float: left;
width: 20%;
margin: 0;
padding: 1em;
}

#right
{
border-left: 1px solid gray;
margin-left: 22%;
padding: 1em;
}

h1, h2, #left ul
{
padding: 0;
margin: 0;
list-style: none;
}

h1
{
text-align: center;
}

#left ul a
{
display: block;
width: 90%;
background-color: gray;
color: white;
margin-bottom: 2px;
text-align: center;
text-decoration:none;
}

#left ul a:hover
{
background-color: black;
color: white;
}

בהצלחה, והמשך גלישה מהנה.

איך מתחילים HTML

הרבה אנשים שניגשים להתחלה של השפה, לא באמת יודעים איך להתחיל איתה, איפה לומדים אותה ואיך אמורים להשתמש.
במהלך המדריך הבא אני הולך לעבור על ההתחלה של שפת התגיות HTML.

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

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

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

פרוייקט איתן

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

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

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

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

• ולידטור
• רשימת תגיות (על ידי W3S, אנגלית)

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

בהצלחה למתחילים, והמשך גלישה נעימה.

תקני הקידוד באינטרנט בעולם המודרני

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

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

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

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

[המאמר- פרק שני חלקים שהשמיטו (החלק שאני מציג בא אחרי החלק שמוצג במאמר)]
השאלה שעולה היא בעצם למה להשתמש בתקנים ש-W3C יצרו, התשובה לכך פשוטה:

1. תאימות דפדפנים- כתיבה על פי התקנים נותנת אחידות ברמה גבוהה בתצוגת האתר בין הדפדפנים שונים, ובהרבה מקרים גם דפדפנים שלא תומכים בתקני W3C יציגו את האתר כראוי.
2. מנועי חיפוש- כתיבה על פי התקנים גורמת לנגישות טובה יותר על ידי מנועי החיפוש, ולכן הדירוג אותו יתנו המנועים יהיה טוב יותר.
3. בעלי מוגבלויות- הדפדפנים של בעלי המגבלויות מכירים רק את התקנים, וכאשר מעל 10% מכלל הגולשים בעולם משתמשים בדפדפנים לבעלי מוגבלויות, לא כדאי לפספס את האפשרות להתאים את עצמנו אליהם.

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



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

אני מקווה שתעיינו במאמר ותמצאו אותו ענייני.
המשך גלישה מהנה.

פיתוח אתר בעזרת CSS

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

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

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

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

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

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

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

שיטה מוכרת לחלוקה של התוכן והתגיות היא כזאת:
תחת ה-body יש div גלובאלי, אליו נכנסות שאר התגיות, בתוך ה-div יש חלוקה של תגיות לפי מיקום, אם זה נניח אזור עליון שנפרש על כל ה-div הגלובאלי, מתחת חלוקה של 2 divs אחד לצד השני, ואז div תחתון שנפרש כמו העליון.
בעזרת החלוקה של תגיות לפי מיקום אנחנו מקבלים את מבנה האתר בעצם (המבנה שתיארתי במקרה הזה דומה למבנה של הבלוג שלי).
תחת התגיות על פי מיקום אנחנו ממקמים את התוכן בהתאם לתכונות שנתנו לו, נניח h1 אנחנו נכניס ל-DIV העליון שנמצא בגלובאל ונכתוב את שם האתר, ובעצם כעת אנו נחלק את התכנים לפי המיקום המתאים.

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

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

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

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

אני מאחל לכולם בהצלחה, והמלצה קטנה: כשאתם משתמשים ב-CSS, תנסו לחשוב מחוץ לקופסא.

בקרוב: מאמר על קידוד(?)

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

הפרקים הם:

• פתיחה [מה שכתבתי בלילה].
  
• W3C - מכון התקנים ולמה כדאי לשים עליו עין.
• תקנים שונים:
  • HTML - התייחסות לתקנים 4.01 ו-5.
  • XHTML - התייחסות לתקנים 1.0 (שמתחלק ל-3: מסגרות, טבלאות ו-DIVs) ו-1.1.
    
• גליונות עיצוב מדורגים (CSS).
• שיטות קידוד נפוצות: 3 השיטות וההבט עליהן בקצרה מבחינת קידום אתרים.
• פרק סיכום (מתחכם במיוחד).

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

אני מאחל לו בהצלחה בסינון המחמיר של K.co.il ולכם המשך גלישה נעימה ותקינה.

התחלת פיתוח אתר

לקוח מהבלוג הישן שלי

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

שלב א' - למידת השפות הרצויות
בשלב הראשון צריך קודם כל לדעת HTML, בסיסו של כל אתר ומה שיש ב-HTML זה בדר"כ מה שהמשתמש רואה.
הרבה פעמים אנשים אוהבים להתייחס לשלב הזה בזלזול או לדלג עליו, שלמעשה זה לדעתי הלב של האתר, כי פה מוגדר מה שהמשתמש רואה, מה שהרובוטים רואים ופה כתוב הטקסט שאליו האנשים נגשים.
קודם כל חשוב להכיר קצת את השפה, ולכתוב אותה נכון.
לאחר אימונים ויצירת אתר קטן ב-HTML אני מניח שיהיה אפשר לעבור לקטע היותר עיצובי.
בשלב הזה לומדים CSS, ומתאמנים הרבה מאוד, יותר ממה שמתאמנים על HTML, כיוון ש-CSS עלולה להיות לעיתים מכה..
CSS מאפשר לעצב את האתר בצורה קבועה וליצור תבנית חוזרת, בנוסף הפלט ל-HTML יהיה יותר קטן ולא יהיה צורך לחזור על תבניות שונות כי לעצב את הדף.
לאחר שלמדנו CSS אפשר (ומומלץ) ללמוד XHTML, למען תקינות הדף.
אם אתם כותבים נכון ב-HTML הקטע של ה-XHTML מיותר, אבל ללמוד את ה-XHTML זה בדיוק 10 דקות, אז אולי כדאי לשים עליו עין.
בהרבה אתרים יש שימוש ב-JS, (קיצור של JavaScript) ככה הדפים יותר דינאמים ומושכים את העין, למידה של JS יכולה לעזור למשוך את העין לצופים באתר.
לאחר שלמדתם את החלק הזה עוברים לצד שרת ולמסדי נתונים.
מי שרוצה אתר יותר מעמיק ויותר דינאמי יכול ללמוד PHP או ASP, שפות דיי פשוטות (ב-ASP אין יחס לתקינות הקוד, אז לא ממש ממליץ) שעוזרות לתוכן דינאמי ומתעדכן.
אני לא אכנס לפרטים אבל עבודה עם מסד לעיתים תכריח אותכם ללמוד SQL, שפה דיי קצרה ופשוטה^^

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

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

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

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

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

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

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