המדריך למתכנת האינטרנט המתחיל

הקדמה לתכנות אינטרנט – צעדים ראשונים
בכדי שנתחיל לכתוב אתרי אינטרנט עלינו להבין באמת מה הוא אתר אינטרנט, ממה הוא מורכב, איך הוא עובד ואת צורת המחשבה מאחוריו. מדריך זה נועד בכדי לגרום לכם, בוני האתרים או מתכנתי האינטרנט, להבין איך אתרי האינטרנט עובדים ולעזור לכם בתחילת הדרך.
מושגים בסיסיים
בכדי להתחיל לתכנת אתר אינטרנט עלינו להבין מספר מושגים בסיסיים:
דף HTML – מסמך המכיל בתוכו "סימנים" (תגיות) המתארים לדפדפן כיצד יש להציג את תוכן הדף. תוכן הדף מכיל מידע כמו: קישורים, טקסט, תכנות צד שרת (נרחיב בהמשך), תגיות Meta ועוד. נהוג לקרוא לדף HTML גם "דף אינטרנט". דפי האינטרנט משמשים להעברת תוכן למשתמשים, בדיוק כפי שעמודים בספר קריאה מעבירים לקורא את התוכן.
בחלק העליון של התמונה ניתן ליראות כיצד דף האינטרנט מוצג למשתמש בדפדפן, בחלק התחתון ניתן ליראות את קוד המקור שפועל מאחורי הקלעים
אתר אינטרנט – קבוצת דפי HTML המכילה קישורים האחד אל השני. אתר האינטרנט מכיל מידע המחולק בין כמה וכמה דפי HTML על מנת לעזור למשתמש למצוא תוכן בקלות. בכדי שמשתמשים יוכלו להגיע לאזורים השונים באתר נהוג ליצור תפריט ניווט אשר יקל על המשתמשים להגיע לדפים אלו. ניתן לחשוב על זה כך: אתר אינטרנט הוא הספר, בזמן שדפי HTML הם העמודים.
אתר פשוט ללא עיצוב. ניתן ליראות בחלק העליון את תפריט הניווט אשר מפנה את הגולש אל עמודים שונים באתר
דפדפן – התוכנה אשר קוראת את דפי ה-HTML ומציגה אותם בהתאם על מחשב הלקוח. היא ה"מנוע" שמריץ את דפי האינטרנט, ביכולתה לקבוע איך דף האינטרנט יוצג ומה ביכולתו לבצע. בגלל מגוון הדפדפנים (Internet Explorer, Firefox, Google Chromee ועוד) נוצר סיכון שדף האינטרנט אינו יראה אחיד (הרחבה בהמשך). הדפדפן אחראי לפעולה של תכנות צד הלקוח אשר נרחיב עליו בהמשך.
שרת – בכדי לגשת למסמכים המתוארים לעיל, האחרונים חייבים להיות מאוכסנים על מחשב מרוחק. מחשב זה נקרא שרת. השרת מכיל בתוכו את קבוצת המסמכים שביחד מרכיבים את האתר. נחשוב על שרת כתיקיה שבכדי לגשת אל המסמכים שבתוכה עלינו להקליד את הכתובת של כל מסמך ומסמך. השרת הוא ה"מוציא לאור", הוא זה שמאפשר לנו לפרסם את ה"ספרים" (אתרי האינטרנט) שלנו לאור.
צד שרת/צד לקוח – בשביל להתחיל להבין איך מסמך מוצג, איך הוא נבנה ומתעדכן עלינו להבין מה הוא צד שרת וצד לקוח, עליהם נשוחח בהמשך.
איך זה עובד?
ברגע שאנחנו מקלידים כתובת של אתר אינטרנט, אנו מבקשים מהשרת (אותו המחשב המרוחק) שישלח לנו העתק של הדף הראשי (מסמך ה-HTML). שמו של מסמך זה הוא בד"כ index.htm. הצד ששולח לנו את ההעתק של הדף הראשי נקרא צד שרת. צד השרת הוא זה ששולח לנו את המסמך המבוקש, ובנוסף, ביכולתו ליצור את המסמך ברגע שהתקבלה בקשה. במילים אחרות, הוא מאפשר לנו ליצור תוכן דינאמי (תוכן משתנה, שאינו סטטי) לאחר שהתקבל מסמך ה-HTML. בכדי שהדף יהפוך לאינטראקטיבי (תמונות מתחלפות, טקסט שמתעדכן, אנימציות וכו') על המתכנת לכתוב תכנות צד לקוח. במילים אחרות, להסביר לדפדפן איך להגיב כאשר המשתמש עושה דבר מסויים על אותו המסמך.
תכנות צד שרת
כתיבת מסמך HTML ללא שום שימוש בשפת תכנות צד שרת (כגון PHP) יגרום לכך שהתוכן שהאתר יציג יהיה תוכן סטטי, משמע השרת תמיד ישלח לנו את אותו עמוד ה-HTML. אומנם זה אפשרי לעדכן דפי HTML, אולם אפשרות זו אינה רצויה ממספר סיבות: כל משתמש אשר ירצה לשנות את הדף יהיה חייב להבין שפת HTML (חסרון אדיר לאתרים בעלי תוכן שמשתנה באופן רציף) ובנוסף, יצטרך לקבל גישה לאותו המסמך שמונח על השרת, דבר היוצר פרצת אבטחה משמעותית לאתרים בעלי מספר רב של אנשים עם גישה לתוכן. יתר על כן, כל שינוי של דף ה-HTML עלול לגרום לשגיאות, אשר עלולות לפגוע בדף כולו.

פרסומת

פיתרון לכך הוא שימוש בתכנות צד שרת. תכנות צד שרת מאפשר לנו לכתוב מערכות ניהול תוכן אשר יעזרו לנו לעדכן את תוכן האתר בקלות, בלי לגעת במסמך ה-HTML המקורי וללא צורך בידע מקדים ב-HTML. דוגמה טובה ליישום תכנות צד שרת הוא האתר Facebook אשר מאפשר למיליונים לעדכן את הפרופיל שלהם בקלות. דוגמה לשפת תכנות צד שרת היא PHP .PHP היא שפה פשוטה ללמידה המאפשרת לנו ליצור דף HTML דינאמי שנבנה מרגע שהתקבלה בקשה למסמך. שימוש בשפת תכנות צד שרת הולכת יד ביד עם מסדי נתונים.בכדי שתוכן האתר יתעדכן עלינו לאחסן את כל המידע החדש (שאנו רוצים לעדכן) במסד נתונים. מסד הנתונים מכיל בתוכו את כל המידע הדינאמי, וכאשר אנו מבקשים את המסמך מהשרת, האחרון קורא את המסמך ומחפש פקודות שעליו לבצע (תכנות צד השרת שכתבנו). לדוגמה, לאסוף מספר כתבות שנרשמו לאחרונה ממסד הנתונים. לאחר שהשרת אסף את המידע הנדרש ממסד הנתונים וסיים ליצור את המסמך המעודכן, הוא שולח לנו את דף ה-HTML בלבד, ללא תכנות צד השרת.
עלינו לזכור שהשרת הוא סה"כ מחשב מרוחק, וכמו כל מחשב עליו להריץ מערכת הפעלה. כיום שתי מערכות ההפעלה העיקריות ששרתים מריצים הן Windows ו-לינוקס. בכדי לדעת באיזו מערכת הפעלה עלינו להשתמש, עלינו לבחור את השפה שבה נרצה לכתוב בצד השרת. שני שפות תכנות צד שרת נפוצות הן:
PHP – שפה מונחת עצמים (OOP) חוצת פלטפורמות (Cross Platform) פשוטה, קלה, מהירה ומומלצת ביותר ללמידה בתור התחלה. רבים יעדיפו את השפה הזו מבחינת עלות הפיתוח מכיוון שסביבת הפיתוח הינה חינמית וכמו כן הדרישות מהשרת הן מינימליות. ניתן לפתח ב-PHP על כל שרת לינוקס שברוב המקרים עלות התחזוקה שלו או השכרת השרת זולה בהרבה משרת מבוסס ווינדוס.
ASP.NET – זו פלטפורמה וובית מבית מיקרוסופט, כאשר התכנות בה מתבצע באחת מהשפות בסביבת דוט-נט. השפה הנפוצה היא C# ואחריה VB.NET ועבור שתי השפות האלו ניתן למצוא הרבה מאוד דוגמהות קוד ברחבי הרשת. ASP.NET מוגבלת עבור שרתי Windowss, ולכן עלות התחזוקה שלה גבוהה יותר, וזאת כיוון שיש צורך לשלם עבור רישיון התוכנה של חלונות. לכן במידה ונרצה לרכוש שרת או מקום אחסון סביר להניח שעלותו תהיה גבוהה יותר מאשר שרת לינוקס. כמו כן, סביבת הפיתוח היא Visual Studio שהיא לא חינמית. בשנים האחרונות מיקרוסופט השכילה ושיחררה גרסאות Express קלילות וחינמיות המאפשרות לכתוב לסביבה זו וסביר להניח שהאפשרויות שגרסאות אלו מציעות יספיקו בהחלט למשתמש הממוצע.
קצת על מסדי נתונים
ניתן להבין את החשיבות של מסדי נתונים באמצעות הדרך הבאה: בעוד שמסמך ה-HTML מתאר לנו את צורת הספר ואיך כל דף ודף יראה, מסד הנתונים יתאר לנו את הטקסט של הספר. כאשר המשתמש "יפתח את הספר" הספר ישאב את תוכן העמודים מתוך מסד הנתונים. תכנות צד שרת הוא המתווך, האחראי על איזה מידע לשאוב ממסד הנתונים ומה לעשות איתו. דוגמה לשימוש במסד נתונים היא חנות מקוונת (eBay) המציעה מוצרים שמתעדכנים באופן שוטף – שימוש במסדי נתונים מקל על הוספת מוצרים חדשים מבלי שום צורך להתעסק במסמך ה-HTML המקורי, אלא רק בעזרת ממשק ניהול פשוט למדי.
מסדי נתונים נפוצים:
MySQL – מסד נתונים מאוד נפוץ ליישומי רשת וסביר להניח שניתקל בו בהרבה חבילות אחסון. היתרון של מסד נתונים זה שהוא חינמי ותומך בהמון אפשרויות נפוצות הקיימות בלא מעט בסיסי נתונים אחרים.
SQL Server – מבית מיקרוסופט והוא אחד ממסדי הנתונים הנפוץ ביותר. תכנות בשפת ASP.NET מכיל כבר המון כלים היודעים להשתלב ולעבוד בצורה חלקה עם מסד נתונים זה לכן רוב המתכנתים העובדים בסביבת .NET יעדיפו להשתמש בו. הוא כמובן אינו חינמי אך קיימת גרסת Express שניתן לעבוד איתה.
MS Access – מסד נתונים מקומי גם מבית מיקרוסופט. מיועד ליישומים מאוד קטנים וניתן לנייד אותו מאוד בקלות. כיום כבר פחות ופחות עושים בו שימוש וכן הוא אינו תומך בצורה מלאה בתקן ה-SQLL. מסיבה זו ומסיבות אחרות לא מומלץ לעבוד איתו אך כדאי לדעת על קיומו.
ודאי שמתם לב שרוב מסדי הנתונים מכילים את המילה SQL (ר"ת Structured Query Language).  זו למעשה שפת שאילתות שהיא תקן חזק וכל מסדי הנתונים משתמשים בשפה זו כאשר הבסיס שלה הוא זהה ומסדי נתונים שונים מרחיבים אותה בהתאם לראות עיניהם.
כדי להשתמש במסד נתונים בצורה יעילה מומלץ מאוד לדעת את השפה וללמוד על מבנהו של מסד הנתונים (איך המידע מסודר בו וכו'). ישנן שפות (כמו ASP.NET) המכילות אובייקטים אשר כל תפקידם הוא לתקשר עם מסד הנתונים ולשלוף ולהכניס אליו מידע עם מינימום שימוש בשפת SQL מצד המתכנת.

תכנות צד לקוח

 

כמו שניתן ליצור מסמכי HTML דינאמיים בצד השרת, ניתן לעשות זאת גם בצד הלקוח. צד הלקוח הוא המחשב שביקש את מסמך ה-HTML או במילים אחרות, המחשב של המשתמש שגולש באינטרנט. לאחר שדף ה-HTML נשלח לצד הלקוח השרת כבר לא יכול לשנותו ולכן נוצרה האפשרות להישתמש בתכנות צד לקוח. תכנות צד הלקוח נותן לנו את האפשרות לערוך את מסמך ה-HTML שהתקבל מהשרת. כתוצאה מכך, מתאפשר למסמך להתעדכן בהתאם לאירועים שונים (מעבר העכבר על כפתור, לחיצה על קישור, ועוד). בעזרת תכנות צד לקוח אנחנו יכולים להפוך את המסמך למסמך אינטראקטיבי אשר משפר את חווית המשתמש ומאפשר למתכנת להפיק את המקסימום מהאתר. דוגמה לשפת תכנות צד לקוח היא Javascript אשר מאפשרת למתכנת להורות למסמך כיצד להגיב לאירועים שונים.
שילוב תכנות צד לקוח וצד שרת
בכדי להפיק את המקסימום מהאתר בדרך כלל משלבים בין סוגי התכנות השונים. תכנות צד שרת ועבודה עם מסד נתונים הוא דבר בסיסי שניתן למצוא כמעט בכל אתר (מלבד מאתרים סטטים שכמעט ולא מתעדכנים) והכרחי לאתרים שמתעדכנים באופן רציף.
בנוסף, אתרים רבים שמכבדים את עצמם משתמשים בשפת תכנות צד לקוח כמו Javascript בכדי ליצור למשתמש חווית גלישה אינטראקטיבית. דוגמה לכך היא בדיקת תקינות טפסים בטרם שליחתם לשרת.
דוגמה לבודק הסיסמא של שירות GMAIL – פידבק חי למשתמש
הדוגמה הנ"ל ממחישה לנו את שיתוף הכוחות בין צד הלקוח, צד השרת ומסד הנתונים. טופס יצירת חשבון ב-Gmail מכיל בתוכו בודק סיסמא המסוגל לתת פידבק בזמן אמת ולהודיע למשתמש על אי תקינות הסיסמא. לאחר שהטופס נשלח, כאבטחה נוספת בודק השרת (באמצעות תכנות צד השרת) את תקינות הסיסמא. אם כל המידע שהוכנס תקין, המשתמש החדש נוסף למסד הנתונים.
דרך נוספת שלוקחת את השילוב של צד הלקוח והשרת אל הקצה היא Ajax. Ajax מאפשרת לנו ליצור דף אינטרנט שמתעדכן גם לאחר שנטען. מטרת טכנולוגיה זו היא לאפשר למשתמש לפעול על הדף הנוכחי ולקבל מידע נוסף ומעודכן מהשרת מבלי שיצטרך לרענן את אותו הדף. היתרון בכך היא שאותו העמוד לא יצטרך להיטען מחדש שוב ושוב ובכך לחסוך זמן יקר וליצור ממשק שמגיב בצורה מהירה למדי. דוגמה לכך היא ה-Google Suggest אשר מציע לנו אפשרויות חיפוש בעוד אנו מקלידים את מה שברצוננו לחפש.
עיצוב מסמכי HTML (פוטושופ ואיך הוא משתלב)
HTML מתאר לנו איך הדפדפן יציג את העמוד, ומספק לנו בסיס קטן בכדי לעצב את העמוד כפי שנרצה. ב-HTML בלבד נוכל ליצור עמוד פשוט ביותר אשר יתן למשתמש חוויה דלה במקרים מסויימים, וכתוצאה מכך נולד ה-CSS. ה-CSS נותן לנו את האפשרות לקבוע את הצורה שבה הדף יהיה מעוצב, לדוגמה: איך הטקסט יתיישר, איך הרקע יופיע, איך יוצגו התמונות, מה יהיה גודל הפונט וכו'. כאן בדיוק נכנס פוטושופ לתמונה. בעזרת תוכנות עיצוב גרפי כמו פוטושופ המשתמש יכול לעצב את הדף באיזו צורה שירצה. תהליך הפיכת האתר מתמונה סטטית לעמוד אינטרנט נקרא קידוד (חיתוך אתרים), בעזרתו יכולים בעלי אתרים לגרום לאתר להראות טוב ומלוטש יותר.
ניתן לראות כי ללא שימוש ב-CSS מימין הטקסט נראה רגיל ומשעמם ללא שוליים מוקצבות, לעומת השימוש ב-CSS משמאל
מגוון הדפדפנים – היתרונות והחסרונות
כיום ניתן למצוא בשוק הדפדפנים מגוון רחב של דפדפנים. החל מהאינטרנט אקספלורר של מיקרוסופט, ועד לדפדפן של אפל, ספארי. היתרון במגוון רחב זה הוא שכל משתמש יכול לבחור את הדפדפן המתאים לו ביותר. חלק מהדפדפנים מכילים פונקציות ייחודיות כמו שימוש במאיץ גרפי ותמיכה ב-HTML5, אלה נותנות למתכנתים אפשרות להפיק את המקסימום מאתרם. אך המגוון הרחב של דפדפני האינטרנט והפונקציות הרבות עומדות לנו לרועץ. כל דפדפן קורא את מסמך ה-HTML בצורה שונה, וכתוצאה מכך אתרים מסויימים מוצגים באופן שונה ולא אחיד. במקרים כאלה, על המתכנת לבחון את האתר במספר דפדפנים, החל מהדפדפנים המוכרים ביותר ועד לשכוחי האל שביניהם. יש לזכור, תאימות היא קריטית כאשר נרצה להתאים את האתר לקהל הרחב ביותר שניתן. שימוש בפונקציות ייחודיות בדפדפנים השונים כמו האצה גרפית אינה הדרך הנכונה ללכת בה, ואינה מומלצת כלל עקב הקהל המצומצם של אותו הדפדפן וחוסר התמיכה בדפדפנים האחרים.
כמענה לבעיה זו הוקם ארגון ה-W3C, ארגון אשר עוסק בכתיבת תקנים אשר מטרתם היא לגרום לכך שאתרים יוצגו באופן דומה במגוון הדפדפנים. עקיבה אחרי תקנים אלו עוזרת למפתחים ליישר קו ולהציג אתרים בצורה עקבית בכל הדפדפנים. ציטוט מאתר ה-W3C הישראלי: "W3C מפתח תקנים וקווים מנחים הנקראים 'המלצה' (Recommendation). תהליך הפיתוח נועד להביא להסכמה רחבה, איכות גבוהה, ותמיכה על ידי הקהילה"
מולטימדיה וממשק אינטראקטיבי משופר (פלאש ו-HTML5)
בעבר הלא כל כך רחוק נדרש להשתמש בתוספים צד שלישי (ובראשם פלאש) בכדי לתת למשתמשים את האפשרות לראות סרטונים או לשמוע מוסיקה באתרי אינטרנט. פלאש הינו תוסף המאפשר לנו (המפתחים) להוסיף רכיבי מולטימדיה לאתר כגון: סרטונים, אנימציות, מצגות, מוסיקה ועוד… ומשפר את חווית השימוש שלנו בצורה ניכרת. החיסרון של השימוש בפלאש הוא הצורך להתקין את התוסף בנפרד וחוסר התמיכה של דפדפנים מסויימים בתוסף. כאשר HTML5 נכנס לשוק הוא פישט את העניין וסוף סוף איפשר לנו המשתמשים ליהנות ממולטימדיה ללא שום צורך בתוסף צד שלישי ולכתוב אפליקציות אשר משאירות את HTML4 הסטטי הרבה מאחור. כיום, פלאש עדיין נמצא בפסגה ונמצא בשימוש באתרי אינטרנט ידועים רבים זאת בגלל חוסר התמיכה של דפדפנים ב-HTML5, אך ככל הנראה תמונה זו תשתנה בעתיד, ו-HTML יהפוך לסטנדרט. דוגמה טובה לשימוש בפלאש להעברת תכני ווידאו היא YouTube אשר מהקמתה ועד היום עושה שימוש בפלאש. רק בזמן האחרון YouTube הוסיפה תמיכה ב-HTML5, אך הוא אינו "ברירת המחדל" עדיין. ניתן לראות את כניסתו של HTML5 גם במקומות נוספים, אחד מהם הוא ב-iPad, מכשיר כף היד מבית אפל.
איך הכל מתחבר
בכדי שנוכל להבין בדיוק מי מה איפה ואיך משתמשים ניקח דוגמה פשוטה:
בתמונה הנ"ל ניתן ליראות בדיוק היכן מתבטא תכנות צד הלקוח, היכן טכנולוגיית הפלאש נמצא בשימוש, כיצד CSS עוזר לנו לעצב את המסמך ואיפה במסמך נשאב מידע ממסד הנתונים
השימוש בפלאש היא בעיקר לפרסומות אשר מטרתן למשוך את תשומת לב הקורא, ובדוגמה הנ"ל ניתן ליראות אותו בפעולה למטרות הללו. בנוסף ניתן ליראות כי באמצעות CSS בונה האתר יכול ליישר את העיצוב ולהתאימו לדפדפן. באזור החדשות והכתבות ניתן ליראות תבנית, הכתבות והחדשות תמיד יראו אותו הדבר רק עם תוכן שונה (טקסט ותמונה אחרת), הן לא יזוזו ממקומן ויתעדכנו בהתאם למסד הנתונים.
טיפים למתכנת המתחיל
לאחר שהבנו כמה דברים, רובכם שואלים בוודאי מאיפה להתחיל?
  1. חובה להתחיל ללמוד HTML, בלעדיו אי אפשר להתקדם לאף מקום אחר. ניתן למצוא באינטרנט מדריכים רבים וכמובן, חלק מתהליך הלמידה היא התנסות כתיבת מסמכי HTML.
  2. לאחר כתיבת מסמך ה-HTML הראשון מומלץ מאוד שנתנסה בעצמנו ונלמד לעלות אותו לשרת. ישנם שרתים חינמיים רבים (כגון Tripod) אשר מאפשרים לנו להעלות את המסמך ולשתף אותו עם החברים, התנסות זו מומלצת ותעזור לנו בעתיד.
  3. לימוד CSS ושילובו במסמכי ה-HTML.
  4. לימוד שפת תכנות צד שרת (מומלץ בתור התחלה ללכת על PHP) וליצור עמודים דינאמיים פשוטים.
  5. לימוד שימוש במאגרי נתונים, מה הם, איך משתמשים בהם ולמה הם נועדו. לימוד שפת SQL ליצירת שאילתות באמצעות שפת תכנות צד שרת. השילוב בין השניים יעזור לנו ליצור מערכת ניהול תוכן אשר תקל עלינו מאוד בעתיד.
  6. לימוד שפת תכנות צד לקוח (Javascript) בכדי ליצור ממשק אינטראקטיבי. יהיו אלה שיטענו כי סעיף זה אמור להיות מעל סעיף 4, אולם לדעתי Javascript אינו עד כדי כך הכרחי.
סיכום ונקודות חשובות
חלקכם אולי הלכתם לאיבוד, וחלקכם אולי קצת נלחצתם – אל פחד. יש ללכת בזהירות, צעד צעד, ולזכור שהניסיון הוא הקובע ובמשך הזמן הכל יהפוך לברור. למידת הקשר בין שפות צד שרת, מסדות נתונים ושפות צד לקוח הוא חשוב להבנה הכללית של אופן פעולת דף אינטרנט ועדכונו. קצב וכיוון ההתקדמות תלוי רק בכם, אולם יש לזכור שחובה ללמוד HTML ורק אז להרשות לעצמכם להיסחף לכיוונים שונים. תהליך הלמידה וההנאה יעלו כאשר תלמדו את מה שאתם הכי אוהבים.