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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כל הכבוד ;)

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

היה מאוד כיף לקרוא את המאמר =]

וואלה צודק, אני אתקן את האפליה הזאת במאמר באתר שלי..


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

אני חושב שאף אחד לא אימץ את המונח קידוד מלבד משתמשים בפורומים כמו הוסטס

אתה בהחלט ממציא מושגים נהדר!

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

מיפוי תמונה הוא כלי שכמעט נעלם, וכבר כמעט שלא משתמשים בו.

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

:-D
סליחה על ה'תוקפנות' בתגובות הקודמות..
פשוט אני שונא לעבוד עם DIVים
ואני לא תוכנה שעושה את החיתוך אוטמטית ;)

מאמר טוב מאוד חוץ מהחלק של הטבלאות שלא כתבת..

תודה, אני משתדל.

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

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

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

נ.ב
300 שורות - DIV
600 שורות - טבלאות
כן?

וואלה!
טוב לדעת!

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

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

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

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

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

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

חיתוך בפוטושופ הוא כן תקני...

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

אני יכול להבין את הדימיון שבא מכתיבת קוד HTML (תקני או לא תקני) אבל המקצוע של כתיבת קוד הוא לא קידוד.

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

-טל

הוא לא,
במאמר גם כתוב הקוד שהאימג' רדי פולט הוא לא תקני

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

הוא תקני מאוד, אם תרצה דוגמאות בפרטי רק תבקש (בפרטי)...

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

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


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

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

אתם יודעים מה? עזבו את התיקניות. לא קשור לתיקניות בכלל - אבל אתם רוצים אתר "איכותי" - DIVים. רוצים אתר "ג'אנק"? טבלאות.

וואלה, אם הקידוד שלה היה ב-DIVים, אתם יודעים כמה כסף היא הייתה חוסכת?

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

אם חותך אתרים זאת מילת הסלנג "מקדד אתרים" - אז מה זה רק לחתוך את התמונות?

באותה המידה, כשאתה תבוא לילד קטן, אתה תדבר אליו במילים שהוא יבין - כדי שהוא יבין.


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

נכון שדינאמיות לא תלויה במתכנת - אבל המקסימום בטבלאות והמקסימום ב-DIVים, יש הבדל.

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

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

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


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


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


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

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

המשך יום נעים (וכל הכבוד לכם שקראתם עד פה ולא נשבר לכם |Lol|),
כפיר.

סליחה על הדאבל פוסט בטעות לחצתי שלח פעמיים ><
מנהלים בבקשה למחוק

החיתוך נעשה ע"י Adobe Photoshop CS3 מחבילת Adobe Creative Suite 3 Web Premium זאת אומר שאין פוטושופ יותר מותאם מזה לבניית אתרים אבל הקוד שהוא פלט לי בסוף החיתוך נראה כך:
הוא כמובן לא תקני מהסיבה הפשוטה שאין לו בתחילת הקוד את "שורת התקנים" שדיברתי עליה במאמר שלי. בשורה התחתונה בלי השורה הזאתי כל דפדפן יכול לעשות כרצונו ולהציג את הקוד שפוטושופ הכי עדכני פלט לי איך שהוא רוצה.

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

שיהיה לך בהצלחה בהמשך לימודיך, ללמוד זה חשוב! |קורץ|

הסיבה שאמרתי את מה שאמרתי היא לא בגלל שלא הרחבת על הנושא אלא בגלל שקראת לזה תקן...

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

בקשר לXML אני רוצה ללמוד אבל עדיין לא יצא לי ללמוד ;P