הגעת להחלטה
שאתה רוצה לבנות אתר. אתה מאוד
מתלהב מהחלטה זו אבל אינך יודע
מאיפה להתחיל ?
הגעת למקום הנכון :-). במאמר זה
אני אסביר מאיפה מתחילים, מי
נגד מי וכל מה שאתה באמת צריך
לדעת כשאתה מתחיל לבנות אתר.
לפני שמתחילים במידע הטכני עליך
להחליט מספר דברים:
- על מה
יהיה האתר ?
- מי הוא
קהל היעד של אתרך ? (טווח
גילאים, מין הגולשים וכו')
- מהי מטרת
האתר ? (אתר תדמית, אתר
מעריצים, אתר עסקי, פורטל וכו')
לאחר שהחלטת
על 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)
הן שפות הבסיס לאתר אינטרנט
ממוצע, חשוב מאוד לשלוט בהם
בצורה בסיסית ומעלה. צד אחד של
בניית אתר אינטרנט זה הקוד
והתכנות שלו שעד עכשיו דיברנו
על זה. צד אחר של בניית אתר
אינטרנט זה עיצוב האתר.
עיצוב האתר
כדי שהגולש
יחזור לאתרך רצוי מאוד שהוא
יעוצב באופן מקצועי שיתאים
לתוכן האתר. (אתר משחקי אונליין
לא יראה כמו אתר עיוני מן
הסתם). רצוי לשים באתר מדיות
שונות (תמונות, אנימציות,
סרטונים).
כדי ללמוד על עיצוב אתרים ולקבל
השראה עבור עיצוב לאתר אפשר
להיכנס לאתרים הבאים:
ASD
KidiArt
קונספציה
ויש עוד רבים אחרים...
סקרים, ספרי
מבקרים ושאר הירקות...
ראית
באתרים רבים שיש להם סקרים,ספרי
מבקרים וכל מיני מערכות יפות
ומגוונות שנועדו ליצור
קומוניקציה(קשר) בין הגולש לאתר
וגולשים אחרים.מערכות אלו לרוב
נבנו לבד (ע"י שפות צד שרת
שיפורטו בהמשך) או ע"י שירותים
לבוני אתרים. אני שם כאן כמה
קישורים לאתרים שמספקים שירותים
אלו בחינם. בנוסף לכך באתר יש
קטגוריה שלמה לכך (בתפריט -->
עזריי בנייה):
-
סופר סקר
- נבנה ע"י אחד מגולשי האתר
כיום אחד מהאתרים הפופולריים
במיוחד עבור שירותי סקר בחינם
לאתר
-
סוסיתא
- אחד מהאתרים הותיקים בתחום
השירות לבוני אתרים
מאפשר לכם להוסיף סקרים,
פורומים, ספרי מבקרים,
מועדוני ICQ ועוד בחינם
-
טולז
- מאפשר לך להוסיף פורום חינם
לאתרך
באפשרותך
להוריד/לקנות מערכות מוכנות
עבור אתרך. היתרון שבהם שאינך
צריך לשבת ולתכנת אותם בעצמך.
החיסרון שלהם זה שאינך יודע האם
המערכות מאובטחות, כמו כן
מערכות אלו נמצאות ברוב האתרים
שקיימים כיום בשוק הישראלי בפרט
ובשוק העולמי בכלל ולכן זה
ישעמם את גולשיך.
באם בחרת באפשרות של מערכות אתר
מוכנות הנה כמה קישורים למערכות
מוכנות פופולריות:
-
PHPBB- Heb
- אחת ממערכות הפורומים
הנפוצות ביותר בעולם
ובארץ.מערכת זו הינה מערכת
קוד פתוח וחינמית.
-
PHPNuke
- מערכת תוכן שלמה. אחת
מהנפוצות ביותר בארץ ובעולם,
קוד פתוח, חינמית
-
Hot Scripts
- אתר זה מקשר אותך לאלפי
מערכות מוכנות מכל הסוגים
ומכל השפות.
תכנות
מערכות לבד
כדי לתכנת
מערכות לבד עליך להשתמש
בשפה/טכנולוגיה שעובדת בצד
השרת. המשמעות של העבודה בצד
השרת היא שהגולש לא יכול לראות
את הקוד שנעשה אלה הוא רואה פלט
- קוד 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
שיכולה לפעול באמצעות שרתי
אינטרנט כדי ליצור מערכות
אינטרנט חזקות
...
אחסון האתר
בנית אתר.
אבל עכשיו נשאלת השאלה איך אני
מעלה אותו לאינטרנט ?
עקרונית יש מספר דרכים לעשות
זאת:
- שימוש
בשרתים חינמיים
- קניית
אחסון
לדעתי המאמר
שבקישור יסביר זאת באופן
הטוב ביותר.
קישורים רלוונטיים:
-
X/HTML:
-
דפדפני
אינטרנט:
-
CSS:
-
JavaScript:
-
עיצוב:
תודה
לאנשים שעזרו בכתיבת המאמר: