יום שני, 4 באוגוסט 2008

קידוד בעזרת 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;
}

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

18 תגובות:

Unknown אמר/ה...

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

Itay Alon אמר/ה...

תיקנתי כמה דברים בנוגע לקוד שהיה מוצג, ולאחר בדיקה קיימת תמיכה ב:
IE6, IE7, Firefox, Safari, Opera

בכל מקרה תודה על ההערה.

אנונימי אמר/ה...

אחלה של מאמר.
עשית לי סדר בעניין הזה של עיצוב באמצעות div 'ם.

תודה :-)

אנונימי אמר/ה...

אבל למה, למה אתה קורא לזה קידוד???

Itay Alon אמר/ה...

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

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

Unknown אמר/ה...

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

Itay Alon אמר/ה...

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

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

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

lightpriest אמר/ה...

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

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

חוץ מזה, אחלה מאמר :)

אנונימי אמר/ה...

מדריך ממצה. האם תוכל להרחיב במדריכים הבאים בקשר לאיך "מלבישים" על עיצוב HTML שיצרנו קוד PHP דינאמי?

Itay Alon אמר/ה...

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

Sapir אמר/ה...

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

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

משרדים להשכרה אמר/ה...

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

moshevi אמר/ה...

מצטרף לאלה שטעונים שכותרת המדריך לא כל כך מובנת - עדיף אולי לשנות ל"קידוד HTML" או "כתיבת HTML"

אנונימי אמר/ה...

שלום איתי,

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

האם אתה מכיר CMS כזה? תוכל להמליץ על משהו?

תודה :) ואחלה בלוג

Itay Alon אמר/ה...

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

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

דינה אמר/ה...

תודה על התשובה :)
אתה מתכוון שאתה מפתח מערכת ניהול תוכן לכל לקוח לפי דרישותיו' ולא משתמש במשהו קיים?

Itay Alon אמר/ה...

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

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

pick 6 lotto wheel 15 number אמר/ה...

I simply desired to say thanks all over again. I am not sure the things that I might have done without the type of creative concepts shown by you about my subject matter. This has been a very intimidating case for me, but seeing your specialised mode you managed it made me to cry for joy. I am happy for the advice and trust you find out what a powerful job you have been accomplishing educating many others via a blog. Probably you have never met any of us.