יום שישי, 29 באוגוסט 2008

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

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

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

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

אין תגובות: