וובמאסטר - תיכנות ובניית אתרים

להתחיל מההתחלה

ניר טייב/‏ 16 ינואר, 2005
F+
F-
הגעת להחלטה שאתה רוצה לבנות אתר. אתה מאוד מתלהב מהחלטה זו אבל אינך יודע מאיפה להתחיל ?
הגעת למקום הנכון :-). במאמר זה אני אסביר מאיפה מתחילים, מי נגד מי וכל מה שאתה באמת צריך לדעת כשאתה מתחיל לבנות אתר.

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

אני קיים!!!

".

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

כדי ללמוד לבנות אתר חייבים לדעת שפה אחת בסיסית שקוראים לה HTMLו (Hyper Text Markup Language). שפה זו היא השפה שעליה מושתתים כל אתרי האינטרנט הקיימים ברשת. השפה היא שפת סימון, כלומר שאתה כותב טקסט מסוים ומקיף אותו בתגיות (תגית-מילה שיש לה משמעות מסוימת בשפה המוקפת בסוגריים משולשים - <תגית>. לפעמים יקראו לתגית גם אלמנט).
את קודי ה-HTML אתה כותב בתוך מסמכי HTML (קבצים במחשב שהסיומת שלהם היא HTML/HTM) ומציג אותם בעזרת הדפדפן.

הארגון בשם W3Cו(World Wide Web Consrtium) אחראי על הוצאת תקנים לאינטרנט (תקן זה כמו חוק רק להבדיל מחוק אחרי תקן לא חייבים לאכוף אבל רצוי מאוד ללכת אחריו). הגולשים באתרינו יכולים להשתמש בדפדפנים אחרים מזה שאנחנו משתמשים. שבונים אתר רצוי מאוד להתאים את האתר לתקן ה-XHTML, שזהו תקן ש-W3C קבעו עבור מבנה נכון של עמוד ה-HTML שאנו בונים. התאמת האתר לתקנים מבטיחה שהאתר שלך יראה כמו שאתה רוצה ברוב המוחלט של הדפדפנים.
הדפדפנים הנפוצים כיום בשוק הם:

אינטרנט אקספלורר (מכאן והלאה נקרא לו בשמו המקוצר IE)
דפדפן מבית היוצר של ענקית התוכנה מיקרוסופט. דפדפן זה בא עם מערכת ההפעלה חלונות (של מיקרוסופט) וגרסתו האחרונה היא 6 (לה יש תת גרסאות: SP 1 ו-SP 2)
מוזילה/פיירפוקס (מכאן והלאה נכתוב את השם המקוצר MOZ או FF)
דפדפן קוד פתוח, חינמי, אחד הדפדפנים החמים בשוק בעל אפשרויות רבות. תומך בטכנולוגיות אינטרנט חדשות ועבור מפתחי האתרים הוא גן עדן של ממש (מכיל הרחבות שעוזרות במהלך בניית האתר).
אופרה
דפדפן זה הוא על סף כניסה עבור הגולשים הישראליים, כיוון שהוא אינו תומך בעברית בצורה מלאה הוא לא נתפס עדיין בשוק הישראלי. למרות זאת אם האתר שלך לא נועד רק עבור ישראליים רצוי מאוד להתאים את האתר לדפדפן זה.

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

שפת HTML לא נועדה לעיצוב! היא נועדה רק כדי להגדיר את סוג המידע שאותו היא מכילה. כדי לעצב את האתר יש ללמוד את שפת CSSו(Cascading Style Sheets)
CSS בעברית זה - גליונות סגנון מדורגים. ב-CSS בעצם מגדירים איך תגית/תגיות מסוימות יראו על גבי המסך, בזמן ההדפסה, בדפדפנים לאנשים בעלי מגבלה (מה שנקרא בימינו נגישות אתרים). CSS זה כמו אנגלית - כדי להגדיר למשל איך צבע הרקע של העמוד/אלמנט אנו נכתוב background-color:color או למשל אם אנחנו רוצים לקבוע את גודל הכתב אנו נכתוב font-size:12px. ל-CSS יש עוד צד עבור מתקדמים (בקצת מהמתחילים) שנקרא "מודל הקופסא", צד זה בעצם מגדיר כמה מקום האלמנט יתפוס על המסך ואיך/איפה הוא ימוקם ביחס לאלמנט אחר.

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

JavaScript - ג'אווה סקריפט(JS)
שפה זו הומצאה ע"י חברת netscape במקור. כיום זו שפה חזקה מאוד שיש לה תקן בשם EcmaScript. היא שפה מונחית עצמים(אם לא באתם מתחום התכנות אז אל תתייחסו לביטוי זה בשלב זה) לא מלאה אך חזקה מאוד. קצת קשה ללמידה למתחילים, אך כדי שאתר דינמי יתאים לדפדפנים המודרניים שפה זו צועדת בראש ובראשונה.
חברת מיקרוסופט כתגובה ל-netscape "המציאו" מוטציה של JavaScript שנקראת JScript. אין טעם להתייחס לשפה זו בכלל.
(VBS)VBScript
שפה זו הומצאה ע"י מיקרוסופט היא שפת בת של השפה/תוכנה Visual Basic. יתרונה היחיד היא קלות הלמידה שכן שפה זו היא דומה מאוד לאנגלית. לא כדאי לתכנת בשפה זו כיוון שהיא עובדת אך ורק על IE והוכחה ע"י רבים כשפה פחות *יעילה* מ-JavaScript.

JS ו-VBS הן בסה"כ אמצעים. כדי ליצור דינמיות באתר עלינו להשתמש בטכנולוגיית (Document Object Model) DOM . טכנולוגייה זו עוזרת לנו לגשת לתגיות ולשנות מאפיינים שונים שלה כמו הגדרות ה-CSS שנתנו עבור התגית או מאפיינים כמו כתובת תמונה. (השילוב של JS ו-DOM נקרא DHTML)

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

עיצוב האתר

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

תכנות מערכות לבד

כדי לתכנת מערכות לבד עליך להשתמש בשפה/טכנולוגיה שעובדת בצד השרת. המשמעות של העבודה בצד השרת היא שהגולש לא יכול לראות את הקוד שנעשה אלה הוא רואה פלט - קוד HTML שיצא כתוצאה מהפעולות שנעשו בצד השרת.
בצד השרת בעצם עושים את כל פעולות האימות והשליפה ממאגרי נתונים שונים (מסדי נתונים, XML (יוסבר בהמשך) וכדומה...)
קיימות מספר טכנולוגיות/שפות צד שרת. הראשונה שבהם היא CGI (ראשי תיבות של Common Getaway Interface)
בעזרת טכנולוגייה זו אפשר לטפל במידע שהדפדפן שולח לשרת (בעזרת טפסים למשל). בטכנולוגייה זו אפשר לכתוב עם כל שפת תכנות שרוצים העיקר זה לשלוח פלט HTML בחזרה לדפדפן.
כדי להבין עוד אודות הטכנולוגיה קראו כאן.

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

PHP
PHP, ראשי תיבות רקורסיביים של PHP: Hypertext Preprocessor, היא שפת תכנות בקוד פתוח, שמיועדת בעיקר לשימוש ברשת האינטרנט, שנכתבת ומייצרת HTML. את השפה פיתחו בין היתר ישראלים מהטכניון, שכיום עומדים בראש חברת Zend, שמשחררת את גרסאות ה-PHP, באתר הבית של PHP
JSP/Servlets
ראשי תיבות של Java Server Page. טכנולגויה מתקדמת והמהירה ליצירת דפי אינטרנט דינמיים. משתמשים בה בשפת התכנות JAVA ובמחלקותיה. דפי ה-JSP מתקמפלים ל-servlets בשרת ובכך אין צורך לפירוש מחדש (בניגוד ל-ASP)
ASP
ASP - Active Server Pages הינה טכנולוגיית צד-שרת שפותחה ע"י מיקרוסופט ומאפשרת הצגת תוכן דינמי בדפי אינטרנט. ASP עצמה אינה שפת תיכנות. היא אוסף אובייקטים אשר את המניפולציות עליהם אנו מבצעים באמצעות שפת סקריפט כלשהי, כשהנפוצות שבהן הן VBScript ו- JavaScript.
ASP.NET
ASP.NET זו סביבת עבודה שמושתתת על ה-Common Language Runtime שיכולה לפעול באמצעות שרתי אינטרנט כדי ליצור מערכות אינטרנט חזקות

אחסון האתר

בנית אתר. אבל עכשיו נשאלת השאלה איך אני מעלה אותו לאינטרנט ?
עקרונית יש מספר דרכים לעשות זאת:

שימוש בשרתים חינמיים
קניית אחסון

לדעתי המאמר שבקישור יסביר זאת באופן הטוב ביותר.

תודה לאנשים שעזרו בכתיבת המאמר:

ניר טייב

בונה אתרים ומתכנת בשפות:
HTML, CSS, JavaScript, PHP 5, JSP&Servlets ורובי.

עוד בנושא זה

תגיות:

תגובות בפייסבוק

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות