עיצוב מחדש של אתר - שיעור חמישי

דף הבית

דף פירוט מדריכים

עיצוב מחדש של האתר - דף השיעורים

שיעור חמישי-מבט במפנים

עיצוב מחדש של אתר - שיעור חמישי
מבט מבפנים

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

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

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

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

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

<html>
<head><title>Widget Watch</title></head>
<body>
<"font face="arial>
<h1>Widget Watch</h1><br>
<h3>The weekly column that keeps you up to date with the fast-paced changes in the world of widgets</h3>
<font/>
<br><br>
<"font face="arial" size="4>
by John Q. Guy
<br><br>
... In this week's fascinating column we delve into the seedy world of sales and marketing ...
blah blah blah, yadda yadda yadda
<font/>
<"font face="arial" size="2>
.Copyright Widget Watch Enterprises Inc
<font/>
<body/>
<html/>

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

<html>
<head><title>Widget Watch</title></head>
<body>
<"font face="arial>
<h1>Widget Watch</h1><br>
<h3>The weekly column that keeps you up to date with the fast-paced changes in the world of widgets</h3>
<font/>
<br><br>

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

<"font face="arial" size="4>
by John Q. Guy
<br><br>

זה תוכן טרי - הוא ישתנה כל שבוע - כך שאתה צריך להסיר אותו מהתבנית. צור עמוד שנקרא
index.html ושים בו את הדברים הבאים כשורת הקוד הראשונה:

<-- 'set var='author' value='John Q. Guy#--!>

זה מציב ערך משתנה שנקרא "כותב" (AUTHOR) ונותן לו את הערך הזמני של ג'ון גאי. הערך
המשתנה יכול להדהד עכשיו בקובץ התבנית כך:

<"font face="arial" size="4>
<-- 'by <!--#echo var='author
<br><br>

אחר כך יש לנו:

... In this week's fascinating column, we delve into the seedy world of sales and marketing ...
blah blah blah, yadda yadda yadda
<font/>

זה נכון, עוד תוכן טרי. צור קובץ חדש שנקרא story.htmlf ושים בו את טקסט הטור הזה.
בתבנית שלך אתה יכול עכשיו לכלול את הקובץ הזה כך:

<-- 'include virtual='story.htmlf#--!>
<font/>

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

<-- 'include virtual='/1998/august/week_one/story.htmlf#--!>
<font/>

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

/august/week_one/1998/

... ושים אותו כערך של משתנה שנקרא מעבר בקובץ index.html כך:

<-- '/set var='path' value='/1998/august/week_one#--!>

ובקובץ התבנית, תשנה

<-- 'include virtual='/1998/august/week_one/story.htmlf#--!>
<font/>

ל-

<include virtual='${path}story.htmlf' --> </font#--!>

טוב, החלק האחרון של הקוד שאנחנו רואים הוא:

<"font face="arial" size="2>
.Copyright Widget Watch Enterprises Inc
<font/>

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

<-- "include virtual="copyright.htmlf#--!>

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

<-- "include virtual="/global/copyright.htmlf#--!>

והתבנית צריכה להראות עכשיו כך:

<html>
<head><title>Widget Watch</title></head>
<body>
<"font face="arial>
<h1>Widget Watch</h1><br>
<h3>The weekly column that keeps you up to date with the fast-paced changes in the world of widgets</h3>
<font/>
<br><br>
<"font face="arial" size="4>
<-- 'by <!--#echo var='author
<br><br>
<-- 'include virtual='${path}story.htmlf#--!>
<font/>
<"font face="arial" size="2>
<-- "include virtual="/global/copyright.htmlf#--!>
<font/>
<body/>
<html/>

שמור את התבנית הזו כ- widget_story.htmlf בספרייה שנקראת תבניות בשורש השרת שלך.
עד כאן, עמוד ה- index.html נראה כך:

<-- 'set var='author' value='John Q. Guy#--!>
<-- '/set var='path' value='/1998/august/week_one#--!>

הצעד האחרון הוא לכלול את התבנית בעצמה, כדי שקובץ ה- index.html שלך צריך להיקרא
כך:

<-- 'set var='author' value='John Q. Guy#--!>
<-- '/set var='path' value='/1998/august/week_one#--!>
<-- 'include virtual='/templates/widget_story.htmlf#--!>

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

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

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