אנחנו כותבים ב-XHTML. למה זה צריך לעניין אתכם?
26 בדצמבר 2006 מאת רן בן אהרוןיש הרבה דרכים לבנות אתר. כל דרך מביאה איתה חבילה של יתרונות וחסרונות. אנחנו בנטקראפט כותבים בשפת קוד הקרויה XHTML - שיטה אותה מאמצים בוני אתרים בכל העולם בזכות יתרונות שמועילים למשתמשים, למפתחים ואפילו לבעלי האתר.
גלישה מהירה יותר
קוד XHTML הוא קצר ולעניין. קוד קצר וחכם מצמצם את גדלי הקבצים המועברים לגולש ובכך מאפשר העלאה יותר מהירה של הדפים. העלאה מהירה פירושה חויית משתמש טובה יותר שמשאירה את הגולש באתר וגם דואגת שיחזור.
בנוסף, קוד XHTML אינו משתמש בטבלאות למיקום אלמנטים על המסך - שיטה שידועה בתוצאותיה השליליות על ביצועי האתר ותחזוקתו.
פיתוח ותחזוקה קלים יותר
קוד XHTML הינו קצר וקריא לכן קל יותר לבצע בו שינויים ותיקונים. פחות עבודה למפתחים - יותר חסכוני לכולם.
קידום האתר שלכם במנועי חיפוש
היתרונות השיווקיים והתדמיתיים של הופעה כקישור ראשון בדף תוצאות חיפוש ברורים לכולם. מנועי חיפוש נותנים עדיפות לאתרים הכתובים ב-XHTML תקני בזכות היותו קריא וקל לקיטלוג.
תצוגה נכונה בכל הדפדפנים
נכון להיום 85% מהגולשים בעולם משתמשים בדפדפן של מיקרוסופט - אינטרנט אקספלורר. 15% הנותרים עלולים להקליק על אתר מתחרה שמוצג כיאות בדפדפן שלהם. XHTML תקני הוא קוד שעומד בסטנדרטים נוקשים הנקבעים על ידי ארגון ה-W3C ומאפשר לכל הדפדפנים התקניים להציג את האתר באופן זהה.
יציבות
אתר הכתוב בקוד XHTML נכון, יעמוד במבחן הזמן ויוצג כראוי בדפדפנים בגרסאות חדשות וישנות כאחד. פחות הפתעות לגולשים וחסכון בהוצאות תחזוקה לבעלי האתרים.
קלות המרה לפורמטים שונים
רוצים להציג את האתר במחשבי כף יד? בטלפונים סלולריים? אולי בטלויזיה? אתר הבנוי ב-XHTML יחסוך מכם הוצאות פיתוח של אתרים שלמים יעודיים.
נגישות לבעלי מוגבלויות
חלק מכלל הגולשים בעולם הם בעלי מוגבלויות ראייה. כתיבה נכונה ב-XHTML תאפשר לדפדפנים שאינם גרפיים, להקריא את התוכן באופן שנוח גם לפלח שוק זה.
מידע נוסף:
סטנדרטים באינטנרט - בשביל מה הם טובים ואיך משתמשים בהם?
הסעיפים של "תצוגה נכונה בכל הדפדפנים" ו-"יציבות" לא רלוונטיים לXHTML דווקא, אלא לכתיבה תואמת תקנים. כתיבה לפי תקנים ב-HTML תייצר את שתי התכונות האלה, כתיבת XHTML לא תקנית תכשיל אותן.
אין ספק שכתיבה שאינה תואמת את הסטנדרטים, גם אם ה-syntax הוא XHTML, לא תבטיח תאימות לדפדפנים.
יחד עם זאת, עבודה עם XHTML כסטנדרט הבסיס משפרת את סיכויי ההצלחה מול סטנדרטים ישנים יותר.
כתבה חשובה מאד, קצרה וקולעת.
כן ירבו.
אופיר
כתבה קצרה - המון טעויות, או שעלי לאמר "הטעיות":
1. גלישה מהירה יותר : קוד XML קצר יותר אך בצורה כל כך לא משמעותית שלא נוכל להרגיש בשינוי.
2. פיתוח ותחזוקה: XML ו-HTML קריאים באותה המידה. אין שום חיסכון זמן למתכנתים.
3. קידום האתר במנועי חיפוש: שוב, קידום אתרים הוא מדע לא מדוייק ואף אחד לא יכול להבטיח לאתר שהוא יהיה פופולארי. הקפדה על חוקים בסיסיים בכתיבת הקוד יכולה לעזור. בהמלצות הרשמיות של גוגל לבוני אתרים לא מוזכרת מילה אחת על :XHTML http://www.google.com/support/webmasters/bin/answer.py?answer=35769
4. תצוגה נכונה בכל הדפדפנים: חוץ מהישנים כמובן … אפשר לראות מטבלת התאימות של ה-w3c עצמו עד כמה XHTML לא נתמך http://www.w3.org/People/mimasa/test/xhtml/media-types/results
5. יציבות: הקוד יהיה יציב בגלל ש-XHTL לא תקין, לא עובד - ולמעשה מכריח את המפתח לאמץ הרגלי כתיבה נכונים. קוד HTML תקין, יציב באותה מידה.כמו כן כל אתר פופולארי משתנה, באינטרנט מי שלא מחדש לא שורד. אני לא הייתי מעוניין לשעמם את הגולשים שלי: אני רוצה להפתיע אותם.
6. קלות המרה לפורמטים שונים? מחשבי כף יד וטלוויזיות משתמשות באותו HTML כמו המחשב. פלאפונים משתמשים ב-WML שהיא שפה מבוססת XML אבל אין שום הבדל בקושי ההמרה בין XHTML או HTML לשפה זאת.
7. נגישות לבעלי מוגבלויות: כאן קינחתם בשטות הכי גדולה שלכם. אנשים קצרי ראייה צריכים אתרים עם קונטרסט גבוה או אפשרות להגדלת הטקסטים שהם סוגיות עיצובית. כבדי שמיעה צריכים קול מלווה או תיאור נרחב, נושאים הקשורים לתכני האתר. אין שום קשר בין הטכנולוגיה בה נבנים הדפים לבין היכולת של דבדפים לבעלי מוגבלויות לקרוא אותם. אתר הנגישות באינטרנט בישראל מפרסם מדריך להנגשת אתר http://www.nagish.org.il/
XHTL לא מוזכר בו גם.
לסיכום:
היתרונות של XHTML הוא תאימות קדימה ושילוב עם טכנולוגיות אחרות מבוססות XML (כמו SVG). הכתבה שלכם מתלאה בהנחות כוללניות וחסרות בסיס. אבל תהנו לכתוב XHTML :)
היי קובי,
אנחנו שמחים שהעלת את הנקודה הזו.
למעשה אין מילה אחת היום ל"קוד תקני, סמנטי ובעל הפרדה בין תוכן לעיצוב להתנהגות".
אמנם זה לא מדויק אבל אנחנו מכנים את זה XHTML. אם קראת את הפוסט בקפידה, אני מניח שהגעת למסקנה הזו לבד.
עכשיו כשהבנו אחד את השני הנה ההתיחסות לכל סעיף:
1. כפי שצוין, שימוש בטבלאות למטרת פריסה (layout) מנפחת באופן משמעותי את גודל קבצי האתר. בנוסף, מנוע הרינדור של הדפדפדנים מעבד מידע בטבלאות ביעילות נמוכה וגורם לטעינת דף ארוכה יותר – נוסה והוכח בפרויקטים רבים שלנו במהלך השנים. יותר מכך, ההבדל הלא משמעותי לגולש שאתה מדבר עליו, הינו משמעותי מאוד לשרת שמקבל אלפי קריאות בו זמנית - כמובן שאם אתה מפתח אתרים קטנים שאין בהם תנועה זה פחות חשוב - אך בפרויקטים גדולים כמו אלו שאנו מפתחים החשביות היא קריטית.
2. יצא לנו לעבוד עם חברות פיתוח כאשר אנו מגישים להם מוקאפ – תתפלא אלו תגובות אנו מקבלים מהמפתחים ששמחו לעבוד עם קוד ברור וסמנטי שחסך מהם שעות עבודה רבות שציפו להם. יותר מכך, כשאנחנו נדרשים לבצע שינוי עיצובי, אנו מסוגלים לתת מענה מהיר ויעיל בזכות הקוד הקריא וההפרדה בינו לבין קבצי ה.CSS
3. זה נכון שאף אחד לא ידע בוודאות מה מחפשים האלגוריתמים של מנועי החיפוש אבל חברות SEO בעולם מסכימות פה אחד שכתיבה סמנטית משפרת את הקיטלוג של האתר. ישנו אפילו כלי מצוין של חברת sitening שמאפשר לקבל ציון על רמת מוכנות הקוד.
4. טוב, ברור לשנינו שקוד ולידי התואם את תקני W3C יראה דומה בכל דפדפן (לעיתים בשילוב האקים לIE לצערינו).
5.כל בעל אתר רוצה להפתיע ולחדש ללקוחותיו אבל לא כולם יכולים לעמוד בהשלכה התקציבית הכרוכה באתר חדש. כשמיקרוסופט מוציאים דפדפן חדש כולם תקווה שהאתר שלהם פשוט לא יתפרק..
6. כתבנו בעבר ב-WML – אתה בטח יודע כמה מוגבל הHTML שניתן להשתמש בו. כיום הכיוון הוא לXHTML בתחום הזה. הנה לינק.
7. כדי לאפשר הגדלת טקסט נכונה בכל הדפדפדנים יש צורך להשתמש בקוד CSS מאוד מסוים – זהו לא עניין עיצובי. כדי שמקראי הטקסטים למינהם ידעו לקשר בין התכנים לאלמנטים על המסך (לדוגמה כותרת של טבלה או שם של שדה בטופס) יש צורך במבנה HTMLי שיאפשר זאת. כל המאמרים בנושאי נגישויות מורים על כך.
כל הרשום בפוסט מבוסס על ניסיונינו מעבודה יומיומית בשיטות כתיבה אלה.
קובי, נהניתי מהדיאלוג המקצועי - בשביל זה קיים הבלוג שלנו. תשאר בסביבה כי ימשיך להיות כאן מעניין. :-)
שלום ותודה על ההתייחסות.
אבל יש כמה דברים שדורשים התייחסות נוספת:
1. לא ציינתי שימוש בטבלאות לפריסה. כתיבה תקנית ב-HTML שוקלת אותו הדבר כמו XHTML.
2. שוב, קוד סמנטי והפרדת העיצוב ל-CSS הם דרכי עבודה שמיושמות ב-HTML.
3. פעם שלישלית גלידה: כתיבה סמנטית זה לא XHTML (!)
4. אני שמח שאנחנו מסכימים
5. לא התנסחתי כמו שצריך כי לא קלטתי את הכוונה במילה "להפתיע" בכתבה המקורית. טעות שלי. בכל מקרה, גם אני לא רוצה להפתיע את הגולשים בבאגים למיניהם אבל זה כבר תלוי ביצאני הדפדפנים.
6. לא מכיר לעומק WML. אם אתה אומר שיש מגבלות ציניות בפרוייקטים גדולים - אני אקח את המילה שלך.
7. אבל מה קשור סמנטיקה ל-XHTML ???
מה שאתם מנסים להעביר בידיעה שלכם הוא שמשום שאתם כותבים ב-XHTML איכות האתרים שלכם עולה משמעותית, כאשר בפועל לא השגתם שום יתרון מלבד שדרוג שיטת העבודה שלכם. אני שמח שאתם מתייעלים אבל להציג את המידע בצורה כזאת זאת הטעייה.
אני אגיש חומר קריאה למחשבה שסוקר את הנושא מאת האתר המוביל בתחום (a list apart): http://www.alistapart.com/articles/xhtml/
כיום, לנו כמפתחי אתרים, אי יתרון משמעותי במעבר ל-XHTML.
קובי שלום,
חומר הקריאה אכן מעניין. אני זוכר שקראתי את הכתבה בזמנה (איי שם בשנת 2000) עוד כאשר XHTML היה בחיתוליו ו-CSS היתה מילת buzzword שאסור להגיד :). אפנה את תשומת ליבך לכך שכותב המאמר פיטר-פול קוץ' ,מפעיל אתר quirksmode כיום, משתמש באתר שלו ב- DOCTYPE: XHTML 1.0 Transitional בדומה לאתר נטקראפט וגם בדומה לאתר המוביל בתחום כדבריך alistapart .
במהלך עבודתנו עם חברות אחרות בשוק אנו לעיתים נתקלים בקוד html שגוי ומסורבל שאף הוצא משימוש. זה ה-html שאנו למדנו להכיר. להבדיל מ-xhtml המציג מגבלות סף שלא מאפשרות פרשנות כה "חופשית" של הקוד ובכך מביא לקיומם של היתרונות שרן ציין בפוסט. לצערי, כאשר שוק הדפדפנים נשלט ברוב מוחץ על ידי IE6 אנחנו עדיין רחוקים ממימוש פוטנציאל של אינטרנט xml-י אמיתי.
מתשובתך האחרונה אני מסיק שהקוד שאתה כותב הינו HTML 4.01/Strict שהוא קוד תקני (valid) ומובנה (well formed) הדומה מאוד בחוקיו הנוקשים (ולכן גם בחלק מיתרונותיו) ל-xhtml, דבר שאנו בנטקראפט מברכים עליו.
אז למה אנחנו בנטקראפט בחרנו ב-xhtml ? פשוט מאחר ואנחנו מעדיפים להביט קדימה. והעתיד כמו שהוא נראה כרגע הוא xml-י. אני רוצה להפנות אותך לחומר קריאה מעניין אחר ,שנכתב על ידי האנשים שכתבו את ה-html (ארגון הw3c כמובן) :
http://www.w3.org/MarkUp/2004/xhtml-faq#need
"קוד XHTML אינו משתמש בטבלאות למיקום אלמנטים על המסך" -
אני לא בטוח אם לזה קובי שהגיב קודם התכוון,
אבל למיטב ידיעתי זה לא שאי אפשר, אלא שזה לא נכון לעשות.
עדיף להשתמש ב CSS ולהפריד את העיצוב מהתוכן.
(הבאתם דוגמה מהאתר של PPK - קניתי אפילו את הספר שלו, הוא תותח,
ומומלץ לכל מי שמתעניין בתחום לקרוא אותו ו/או לחרוש באתר שלו (-: )
אחלה כתבה.
טיפ: דוגמאות היו יכולות לחסוך את כל התגובת המתחכמות.
קוד XML לא תמיד קצר יותר, מאוד תלוי על איזה מקרה מדובר..
מה עם .NET?
הי
ומה קורה אם יש בכל זאת מספר טעויות ב XHTML והעמוד מתפקד היטב?
ל-יד שניה:
נכון שXML לא תמיד הקצר ביותר - אבל מבחינה מבנית הוא מאפשר גמישות שפרוטוקולים אחרים פשוט לא תומכים. לגבי .NET - הטכנולוגיה היא server side (שרת) והדיון הוא על ה- client side (דפדפן).
ל-אופטומטריסט:
את מה יקרה במידה ויהיו שגיאות ב-XHTML אפשר לחלק לשני מצבים:
1. העמוד מוגש כ-HTML - כמו רוב האתרים כיום - לא יקרה דבר
2. העמוד מוגש כ-XML - יתכן שהעמוד "ישבר" בדפדפן.
כמו שאמרתי, אנחנו עדיין רחוקים מלהגיש עמודים כXML ולמפתחים שעושים זאת ישנם סיבות טכנולוגיות שמצדיקים זאת (בנייה למובייל לדוגמא) .