הידעתם – קידוד אתרים? (מאמר)

[עידנסמית]

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

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

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

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

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

מיפוי תמונה
שיטה זו כבר קצת יותר קשה לקידוד בה אתרים בכך שלא צריך לחתוך שום תמונה בפוטושופ אלא להשאיר אותה שלמה + לתכנת את כל הקוד לבד בלי עזרת פלט קוד פוטושופית. טוב לא לגמרה לבד אפשר להיעזר בתוכנות עזר כמו Map Designer Pro קצת-מאוד-ישנה ולא תואמת את זמנינו אך לוקחת קורדינטות מצויין. בכל מקרה, בשיטה זו לוקח מקודד האתרים את תמונת העיצוב של המעצב ועליה "מלביש" את התכנות. לדוגמא: במקום לחתוך ריבוע "קישור תמונה" בפוטושופ, מקודד האתר ישתמש במיפוי אזור הקישור בתמונת העיצוב ע"י קורדינטות X & Y, רוחב והאורך כדי ל"גדר" את אזור הקישור, וכך הלאה. החיסרון בשיטה זו – היא מתאימה בעיקר לעמודי פתיחה של אתרים בהם אין הרבה תוכן כתוב. היתרון של שיטה זו בכך שתמונה אחת נטענת הרבה יותר מהר וחלק מאשר עיצוב פוטושופ המחולק לטבלאות ונטען בעילגות יתרה כאשר תמונה אחת מפה ותמונה משם כבר נטענו כשרוב תמונות העיצוב נתקעו איפשהו באמצע הטעינה.

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

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

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

XHTML/HTML Transitional - התקן "הרגיל" לתכנות אתרים.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML/HTML Strict - תקן נוקשה יותר בו נעשה כל עיצוב העמודים דרך CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML/HTML Frameset - תקן הקשור אך ורק לתכנות אתרים בעזרת פריימים.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

*הדוגמאות נתנו לקודי תקינות XHTML בלבד.

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

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

פלאש, וג'אווה סקריפט
אלו שני אויביו הגדולים של מקודד האתרים התקני, ואחר כך גם של מקדם האתרים. מהסיבה הפשוטה שפלאש וג'אווה סקריפט לא נסרק ע"י מנועי החיפוש. אם כבר אתם משתמשים בג'אווה סקריפט נסו שג'אווה סקריפט יהיה כמה שפחות מעורב בתוך תגית ה-BODY ובכלל בבקשה תשתמשו ב-CSS ליצירת תפריטים, נכון שלא תמיד אפשר לבנות תפריט רק ב-CSS אך תשתדלו לפחות את הפשוטים לבנות נקי בלי ג'אווה סקריפט או אפילו גרוע יותר פלאש. לפלאש אני מציע להשתמש ב-SWFObject סקריפט כתחליף מעולה, נקי ופשוט של כל מערך תגיות הפלאש מבית אדובי. כמו כן כדי מאוד להתרחק מתפריטי ג'אווה סקריפט או פלאש מאותה סיבה ברורה שהם לא יסורקו ע"י מנועי החיפוש ולא ימשיכו לסרוק את האתר כולו אלא רק את העמוד הראשי. פתרון לכך יכול להיות בניית עמוד SITEMAP שאותו תגדירו בקובץ - ROBOTS.TXT שלכם.

iFrames & Frames
אם אתם משתמשים באתרכם בפריימים או אי-פריימס אתם צריכים לדעת את הדבר הפשוט הבא – מנועי חיפוש כמו גוגל וחבריו שסורקים אתרים הם סורקים עמוד-עמוד (פריים-פריים) ומצרפים את העמודים שנסרקו למאגר. מנועי החיפוש לא סורקים את כל קונספט הפריימים שיצרתם להנאתכם עלה פריים-פריים (עמוד-עמוד). אחר כך גולש מחפש משהו במנוע החיפוש ועמוד מאתרכם עולה לו בתוצאות החיפוש, הוא מקליק על הלינק ונכנס לעמוד המבוקש. עד כאן הכל בסדר נכון? וכאן מתחילה הבעיה, הגולש נכנס רק לפריים (או אי-פריימס) אחד של האתר הפריימים שלכם שבו בד"כ נמצא התוכן של אתרכם. זאת אומרת שכל עבודת הפריימים שלכם הלכה לאיבוד ברגע אחד כי לגולש לא מוצג שום תפריט שבניתם בפריים אחר אלא רק את התוכן שהוא חיפש. אם מישהו עדיין מתעקש על בניית הפריימים שיצרו סקריפט הבודק את שלמות הפריימים כל פעם שמישהו נכנס לאתר. לבעיית האי-פרייס יש פיתרון, פשוט הופכים אותו לתא דיו פשוט עם overflow: auto; כאשר חובה להגדיר לו גם כן רוחב ואורך. כך יבצר תא דיו בעל גבולות ברורים ואופציה לסקרול במידה ואם תוכן אותו תא דיו יעבור את המידות שהוגדרו לו.

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

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

[mayden]

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

מאיפה הבאת את המאמר הזה? תן קרדיט\משהו.

[עידנסמית]

יש קרדיט בשורת החתימה =]
אם אתה לא מאמין הנה הקישור הישיר - http://www.idansmith.com/comments.ph...y071201-175144

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

[NDVNDV]

מה קרה לחיתוך בטבלאות?
לא בסדר יותר?

[עידנסמית]

זה מה שקרה - חיתוך "פוטושופ" אוטומטי.

[Derey22]

היה כיף לקרוא,למדתי והשכלתי.
תודה לך.

[NDVNDV]

נכתב במקור על ידי IdanSmith

זה מה שקרה - חיתוך "פוטושופ" אוטומטי.

סליחה?
מה אוטומטי בלעשות אותו דבר בדיוק כמו שכתבת בDIVים רק להשתמש בטבלאות?

[Gil B]

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

[DavidBD]

פשש, מאמר מושקע ביותר.

כל הכבוד

[WebProject]

המאמר מושקע.. אבל למה לעזאזל אתה (ועוד מספיק גולשים) קורא לזה "קידוד אתרים" ? קידוד = encoding , אתה מדבר על חיתוך אתרים.