יום רביעי, 18 ביוני 2008

התחלת פיתוח אתר

לקוח מהבלוג הישן שלי

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

שלב א' - למידת השפות הרצויות
בשלב הראשון צריך קודם כל לדעת HTML, בסיסו של כל אתר ומה שיש ב-HTML זה בדר"כ מה שהמשתמש רואה.
הרבה פעמים אנשים אוהבים להתייחס לשלב הזה בזלזול או לדלג עליו, שלמעשה זה לדעתי הלב של האתר, כי פה מוגדר מה שהמשתמש רואה, מה שהרובוטים רואים ופה כתוב הטקסט שאליו האנשים נגשים.
קודם כל חשוב להכיר קצת את השפה, ולכתוב אותה נכון.
לאחר אימונים ויצירת אתר קטן ב-HTML אני מניח שיהיה אפשר לעבור לקטע היותר עיצובי.
בשלב הזה לומדים CSS, ומתאמנים הרבה מאוד, יותר ממה שמתאמנים על HTML, כיוון ש-CSS עלולה להיות לעיתים מכה..
CSS מאפשר לעצב את האתר בצורה קבועה וליצור תבנית חוזרת, בנוסף הפלט ל-HTML יהיה יותר קטן ולא יהיה צורך לחזור על תבניות שונות כי לעצב את הדף.
לאחר שלמדנו CSS אפשר (ומומלץ) ללמוד XHTML, למען תקינות הדף.
אם אתם כותבים נכון ב-HTML הקטע של ה-XHTML מיותר, אבל ללמוד את ה-XHTML זה בדיוק 10 דקות, אז אולי כדאי לשים עליו עין.
בהרבה אתרים יש שימוש ב-JS, (קיצור של JavaScript) ככה הדפים יותר דינאמים ומושכים את העין, למידה של JS יכולה לעזור למשוך את העין לצופים באתר.
לאחר שלמדתם את החלק הזה עוברים לצד שרת ולמסדי נתונים.
מי שרוצה אתר יותר מעמיק ויותר דינאמי יכול ללמוד PHP או ASP, שפות דיי פשוטות (ב-ASP אין יחס לתקינות הקוד, אז לא ממש ממליץ) שעוזרות לתוכן דינאמי ומתעדכן.
אני לא אכנס לפרטים אבל עבודה עם מסד לעיתים תכריח אותכם ללמוד SQL, שפה דיי קצרה ופשוטה^^

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

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

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

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

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

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

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