[Powered by Google Translate] [שבוע 7, המשך] [דוד י מלאן, אוניברסיטת הרווארד] [זה CS50.] [CS50.TV] בסדר. ברוך שובך. זה CS50, וזה סוף השבוע 7. אז אחת מהדברים הקטנים והטיפשים האלה שמסתובב באינטרנט ואנחנו גמענו, ואת זה צריך עכשיו לעשות קצת תחושת חנונית אליך. ובכן, זה היה מצחיק לבחור הזה מזה שהיה לכם. אם כבר מדבר על, נו, חבר 'ה, היום הוא יום הולדתו של נייט. כדי לתת לך תחושה של נייט רק כמה טוב ואני נמצא בפיתוח אינטרנט המבוסס על מעמדו של יום שני ומתבסס כעת על זה, חשבתי שאני רוצה למשוך את דף הבית של נייט, אם לא ראית אותו. זה כאן-HTML של ia נייט. אז רואה sourcecode אם אתה רוצה לראות איך לעשות את זה, ונייט, אם תוכל embarass זמן קצר בלבד, צוות קבל אותך משהו קטן אם אתה רוצה לחלוק קינוח עם חלק מהילדים בכיתה כאן. אם אתה רוצה לבוא אליו למטה. כולכם מריעים והם מאוד נחמדים, אבל אף אחד לא יושבים בקרבת מקום נייט, מסיבה כלשהי, שבאזור הגב. אז אולי אתה יכול למצוא כמה אנשים כדי ליהנות אלה עם. יום הולדת שמח, נייט. 

דברי ברכה נוספים: הראנו כמה קטעים מתלמידי CS50x. אם אתה רוצה לראות מי עוד זה בעולם זה לאחר יחד, אתם יכולים לגשת לכתובת אתר זו, שם יוסף, אחד מTFS שלנו, יש להרכיב מונטאז' של מינים לכל מי שכבר הגישו את סרטי הווידאו האלה, ביניהם ריק אסטלי. ואם אתה לגלול דרך כל אלה, זה באמת די מעורר השראה כדי לראות את המגוון של מדינות וערים שממנו יוצאי אנשים. אז אם אתה רוצה להעיף מבט על זה, שיהיה עד עד הסוף הסמסטר. כיום אנו ממשיכים המבט שלנו באינטרנט, תכנות אינטרנט, HTML וכדומה, ויש לנו גם ארוחת הצהריים המגיעים ביום שישי הקרוב אם אתה רוצה, ובמיוחד, לא עשית זאת בעבר. הנושא זה של יום שישי יהיה יום הולדתו של נייט, כך שאם אתה רוצה לאכול ארוחת צהריים לכבוד יום הולדת עם נייט ואחרים, שחלק מחברינו מתעשייה, אנא אל ראש כך שכתובת אתר לשם. שטח, כמו תמיד, הוא מוגבל. כמו כן, אם שכחת, מבין שבשבוע הבא הוא המועד האחרון לבעיה המוגדרת של 4 ציד נבלות, לפי לאחר שחלים כל JPEGs האלה מcard.raw, אתה והחברים שלך הסעיף, אם תרצה, תוכל לנסות לצלם כרבים ממדעני המחשב שמכרטיס הזיכרון שאפשר, ואתה והקטע שלך אז יהיה לזכות בפרס מדהים. לחזור ולעיין במפרט של pset 4 על מה להגיש ומתי. כמו כן, אם אתה רוצה שתהיה לי מעשה ידיך הונצח באתר האינטרנט של הקורס ואת ההיסטוריה שלה של הלבשה, יודע שאתה מוזמן עכשיו להתחיל הגשת עיצובים לחולצות של השנה והסוודרים וכדומה. נעשינו כמיטב יכולתנו כדי לכלול כמה שאנחנו יכולים, אבל יהיה לנו חלק מחברי צוות הביקורת את כל העיצובים כדי לוודא שהם עולים בקנה אחד עם המפרטים, ולאחר מכן לבחור בדרך קומץ מהם להיות מוצג. אז אם אתה הסוג של העיצוב, פשוט יודע שהדרישות לגרפיקה PNG, לפחות 200 DPI, הם לא צריכים להיות יותר מ 4000 4000 פיקסלים, ולא יותר מ 10 מגה בייט, אבל אתה מוזמן להשתמש בדברים כמו פוטושופ או GIMP או תוכניות שונות של הגרפיקה, כל מה שיש לך לרשותך. 

גם באופק הוא פרויקט הגמר. פרויקט הגמר הוא באמת השיא של 50, לפי כל המטלות בקורס, זה ההזדמנות שלך באמת לעשות את הדבר שלך. וזה יכול להיות פשוט לעשות משהו בשביל כיף, זה יכול להיות כדי לפתור חלק הבעיה דוחקת קבוצת התלמיד שלך, עבור חלק האתר חדש, מנגנון כלשהו אוסף חדש לנתונים. זה יכול להיות יישומים ניידים עבור אנדרואיד, לiOS. באמת, השמים הוא הגבול, ובמהלך השבועות הקרובים, כפי שאנו מעבר מ C לשפות ברמה גבוהה יותר אלה כמו PHP ו-JavaScript, אתה תמצא את עצמך יותר ויותר להכיר עם כמה טכניקות בעולם אמיתי, כמה כלים בעולם אמיתי, וכדי להשלים את זה, יודע שכמובן יש לו היסטוריה של סמינרים, לפי במהלך שבועות הקרובים, חלק מסגל ההוראה וחברים שלנו מקמפוס יציעו סמינרים אופציונליים שמעל ומעבר למה שנעשה בדרך כלל בסעיף כדי להכיר לך את הדברים כמו תכנות אנדרואיד, כדי להכיר לך את הדברים כמו iOS תכנות או טכניקות מתקדמות יותר אינטרנט פיתוח. יש כל ההיסטוריה שלהם כבר נמצאים באינטרנט. אם אתה הולך לcs50.net/seminars, אנחנו כבר עושים את זה במשך כמה וכמה שנים, ותראה שארכיון כאן עם קבצי PDF וקטעי וידאו וכמו כמה עשרות קטעי וידאו של סמינרים. בשנה שעברה, למשל, היה לנו סמינר על acing הראיונות הטכניים שלך, אם אתה באמת מחפש ללכת ולעשות התמחות או חלטורה במשרה מלאה. נייד פיתוח של Windows, אנדרואיד פיתוח, Google Maps, API, CSS, פיתוח עבור בלקברי, Emacs. באמת, אתה מוזמן להעיף מבט בכל סמינרים אלה בנוחות שלך. ואנחנו נהיה מחזיקים כמה חדשים בסמסטר הזה, גם כן. 

אז מה היא קדימה עם פרויקט הגמר? ובכן, ראשית, למרות שמועד זה הוא קצת קרוב, זה באמת רק הזדמנות להתחיל לחשוב על פרויקט גמר די מציאותי. אנחנו יודעים רק את ההתחלה של חלק ממה שאנחנו עדיין נהיה כיסוי בקורס, HTML, PHP והכד ', אבל אתה מכיר עם האינטרנט, ואני הטית השיחה הזאת לכיוון האינטרנט רק בגלל רוב האנשים עושים בסופו של פרויקט גמר מבוסס אינטרנט, אבל זה בהחלט לא הכרחי. שימוש C הוא בסדר, האובייקטיבי C, Java, כל שפה אחרת שאולי יודע או רוצה לדעת היא די בסדר. אבל כדי לקבל את המיצים הזורמים בתחילה, אנו מצפים להגשת preproposal אשר, לקובץ PDF באתר, שנמצא כעת בcs50.net, ובפינה השמאלית העליונה תראה פרויקט גמר הוא מפרט פרויקט הגמר, ויש פרטים על preproposal וכדומה. זה די הרבה מסתכם דוא"ל לעמית ההוראה שלך רק כדי לפתוח בשיחה עימו או לה על מה שאתה חושב. על projects.cs50.net הוא מאגר של רעיונות מאנשים בקמפוס אם אתה נאבק כדי לבוא עם רעיון מסוים, וmanual.cs50.net/APIs הוא מאגר הקישורים לממשקי API. 

מה, אם כי, הוא API? מה API? אני כבר אמרתי את זה לפחות פעמים, לפי פרוטוקול של השבועות האחרונים. מה זה? [סטודנטים, לא מובנים] >> אוקיי, טוב. אז ממשק תכנות משהו. ממשק תכנות יישומים, וזה יכול לקחת כמה צורות, אבל מה זה באמת מסתכם הוא עד קוד שמישהו אחר כתב או hs נתונים שמישהו אחר שנאסף כי הוא נעשה זמין לך בדרך כלשהי תוכניתית. אתה יכול לכתוב קוד ב-C, PHP, Python, Ruby, מה השפה של בחירה שלך בדרך כלל היא, ואתה איכשהו יכול לבנות על הפונקציונליות של מישהו אחר או של מישהו אחר ערכת נתונים. לדוגמה, אם אני הולך לקישור הזה כאן, ותראה זוג הקישורים בדף הבא לפי שיש לנו ממשקי API של CS50 עצמו, שהם מאוד ממוקדים הרווארד, ולאחר מכן APIs של הצד השלישי. בין ממשקי API של הצד השלישי הם דברים באמת שימושיים כמו להיות מסוגל לשלוח אנשים לשל SMS, להיות מסוגלת לקבל הודעות SMS מאנשים. ודברים כאלה שאולי יש לך מושג איך ליישם את עצמך, אך הודות לשירותים, חלק בחינם וחלק מסחרי, אתה יכול לבנות על גבי אלה ולעשות משהו שמעניין אותך. בין ממשקי API של CS50 הם הדברים האלה קמפוס ממוקד כמו קורסי הרווארד, אנרגיה, מזון, אירועים, מפות, חדשות, טוויטים וShuttleboy של עצמו, ואלה הם ממשקי API שנראים משהו קטן כזה. 

תן לי להכין את ה-API HarvardFood. אם אי פעם בקר באתר של HUD, שכנראה הייתי שם רק כדי לראות מה יש לארוחת ערב או לראות מה הן השעות עבור חלק ד-האולם. ובכן, זה לא קל במיוחד לניווט, ואז מה שעשינו לפני כמה זמן היה לנו כתבתי תוכנה, זה קורה להיות ב-PHP, כי למעשה מסך מגרד את השלמות של אתר האינטרנט של HUD. להקרין משהו לגרד פירוש הדבר לכתוב תכנית בשפה כמו PHP המתיימר להיות דפדפן, למרות שאתה אולי להפעיל אותו בשורת פקודה, המתיימר להיות דפדפן, מתחבר לאתר, מוריד HTML שלה, השפה שבה זה כתוב, ואז קורא אותו, או לייתר דיוק, מנתח אותו מלמעלה למטה, משמאל לימין. ומה שעשינו זה שכתבנו את הקוד שלנו בצורה כזאת, כי כל פעם שראינו משהו שבHTML שנראה כמו משהו בתפריט, כמו המבורגר, שהיינו לאחר מכן לייבא לתוך מסד הנתונים ש. וכל פעם שראינו את הערך תזונתי, הייתי לייבא לתוך מסד הנתונים שלנו. ומה שעשינו היה למנף את העובדה כי אתר האינטרנט של HUD, למרות שזה יכול להיות קצת אתגר עבורנו בני האדם לניווט מתחת למכסת המנוע, כל HTML מופק על ידי תוכנות המחשב שלהם. אז כולם HTML, למרות שזה עשוי להיראות מבולגן, כמו רוב האתרים שמתחת למכסת המנוע זה כדלקמן דפוס. אז אנחנו פשוט בילינו כמה שעות להבין שדפוס כך שבסופו של דבר, אנחנו זורקים את כל הבלגן HTML, כל האסתטיקה של מול ההדגשה והטיה וכדומה, ומה שאנחנו אז נוכל לעשות הוא נציג אותו הנתונים. לדוגמה, בדרך זו. אז, על פי התיעוד כאן, הודיע ​​לעולם שאם אתה מבקש כתובה URL שנראה כמו זה, food.cs50.net / משהו, ואתה מספק פרמטרים מסוימים, שנדברנו עליו היום, כמו תאריך הסיום זמן תאריך ההתחלה זמן, ארוחה, וכן הלאה, מה השרתים שלנו יחזרו אליך, למשל, הוא קובץ CSV, פסיק separted ערכים כמו קובץ Excel, המכיל את כל מה לארוחת בוקר בתאריך מסוים זה במרץ של שנה שעברה כאשר יזדמנו לי לכתוב את התיעוד הזה. 

למי שמכיר, CSV אינו תבנית קובץ בלבד. יש תבנית אחרת זה כל עוד הצדדים נקרא JSON, סימון אובייקט JavaScript. הנתונים יכולים לחזור בפורמט זה. אז takeaway כאן הוא שאם אתה צולל לתוך API זה או כל אחד אחר משל CS50 או משהו שם בחוץ באינטרנט, או בכלל לא, להבין שהעולם החל יותר ויותר כדי לתקן איך מכשירי תקשורת הדדית ביניהם. אנו משתמשים בתבניות נתונים סטנדרטיות כמו CSV או JSON. ומה זה אומר לגביך הוא שאתה יכול לכתוב את החלק המעניין של תכנית המאפשר למשתמש שלך לחפש תפריט חדר אוכל, המאפשר להם ליצור רשימות של מועדפים, המאפשרות להם לקבל התראות טקסט כאשר הארוחה האהובה עליהם עומדת להיות מוגשים בחלק ד באולם באמצעות של מישהו אחר ערכות נתונים ובנייה על גבי ממשקי API שלהם. אז עוד על כך בצורה של סמינרים והתיעוד שיש לך כאן באינטרנט. אז מי, אם כן, ממשקי API. 

זה מחזיר אותנו ל-HTML. סיכום מהיר. מה זה HTML? [סטודנטים, לא מובן] טובים. >> שפת HyperText Markup. מישהו אחר, מה היא שפת סימון היפר? שפת HyperText Markup. אוקיי. אז HTML, HyperText. HyperText פשוט מתייחס לאינטרנט, על פי רוב. סימון אומר שזה לא ממש שפת תכנות, HTML. זה לא שפה שאתה יכול להביע את ההיגיון פנימה זה לא חייב לולאות. זה לא חייב תנאים. זה לא חייב פונקציות, כשלעצמה. במקום זאת, יש דברים שנקראים תגים, או לייתר דיוק, אלמנטים. והאלמנטים האלה יש תגי התחלה ותגי קצה, או תגים פתוחים ותגים סגורים, ומה שהתגים האלה בדרך כלל מתכוונים לדפדפן הוא, להתחיל לעשות משהו ואז תפסיק לעשות משהו, למרות שיש יוצאים מן הכלל לכך. לפעמים זה פשוט "לשים מעבר שורה כאן ', למשל. וראינו דוגמאות של שהיום השני, בין הפונה נועזת, מעברי שורה, ואחריו זוג של תגים אחרים. אז HTML הוא השפה שבה כתובים דפי אינטרנט. אז אם אני הולך למשהו כמו Google.com ולמשוך רק דף הבית שלהם, זוכר שאם אתה לוחץ לחיצה ימני או לשלוט לחץ ולהסתכל על מקור דף תצוגה, בדרך כלל זה בלגן שלם בימים אלה מתחת למכסת המנוע, אבל זה בגלל מחשבים לא אכפת חלל לבן, ולכן זה לא צריך להיראות יפה. אבל אם להתמקד על חלקים ממנה, שם לב שהכרום, רק כדי להיות נחמד, יש צבע מקודד דברים. אכן, מדובר בתג הראשון שראינו בדף אינטרנט. ושוב, HTML 5, הגרסה האחרונה של שפה זו, אין לי הדבר הזה בהתחלה, <! DOCTYPE html, בין אם קטן או באותיות גדולות, אבל זה רק סוג של תקן שאומר, היי עולם, כאן מגיע קובץ HTML בגרסה 5. 

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

אז היום, אנחנו מציגים את שרת אינטרנט בפועל והרעיון של ממש משרת תוכן באינטרנט ואיך כל זה מתחיל להתחבר לי. אז מתברר שכל הזמן הזה במכשיר CS50 יש לך שרת אינטרנט במחשב שלך. יש לנו, בהגינות, השתמשתי בו רק לgedit, לקלאנג, לGDB וכדומה, אבל גם מותקן על ידינו עבורך במכשיר הוא שרת אינטרנט, וששרת האינטרנט קורה להיות חופשי, קוד פתוח, אחד מאלה הפופולריים ביותר בעולם, בשם אפצ'י. השם שלו הוא יותר הטכני httpd, ד להיות לדמון כאן, שמילה טכנית לשרת. אז התקין במכשיר CS50 הוא שרת אינטרנט, ומה זה אומר? ובכן, שרת אינטרנט, מושגית, חלק השרת באינטרנט שמשרת את התוכן באינטרנט. כשנשאל לקובץ, הוא יורק את ה-HTML שמלחין קובץ זה, וזהו. אתה רואה את דף הבית של אתר מסוים. אבל שרת הוא, לייתר דיוק, חלק מתוכנה. זה לא חייב להיות במחשב פיזי, זה פשוט צריך להיות חתיכת ריצת תוכנה. אז מכשיר CS50, כמובן, הוא חלק מתוכנה למרות שזה סוג של מתחזה למכונה. זה מתיימר להיות בתוך מחשב של מחשב, אבל זה רק אומר שהמכשיר בהחלט יכול להריץ דברים כמו שרתי אינטרנט. זה באמת יכול להריץ שרתי דואר. אנו יכולים להריץ את שרת מסרים מיידי במכשיר אם רצינו, ואכן, אנו מפעילים סוג אחד אחר של שרת, הידוע בשרת מסד נתונים, MySQL. אבל גם על זה בשבוע הבא. זה אומר שאני באמת יכול לבקר בדפי אינטרנט הפנימי של המכשיר שלי באמצעות דפדפן בתוך המכשיר או אפילו במחשב הנייד שלי, שלי או Mac המחשב שלי. אז מה זה אומר? מתברר כי בכל פעם שאתה מפעיל מחשב לינוקס, הכינוי שלה הוא "מארח מקומי." זה לא חייב שם הדומיין כי אנחנו לא קנינו שם תחום למשהו כמו המכשיר, כך ששם ברירת המחדל שלו היא המארח מקומי. 

אבל כדי לקבל את המכשיר, כדי להתחיל להציג את דפי אינטרנט, אנחנו צריכים ליצור אותם ראשונים. אז בואו נעשה את זה. בואו ילכו לחלון מסופי כאן ושים לב שאני בג'ון הרווארד הפקודה הטיפוסית שלי. תן לי ללכת קדימה והקלד ls, ואנו רואים כמה דברים מוכרים מהסמסטר הזה, שולחן עבודה, הורדות, Dropbox וכן הלאה, אבל עכשיו אנחנו מתחילים מפנים את תשומת לבנו לזוג. על שרתי האינטרנט Linux רבים יש תיקייה שנקראת html הציבור, אבל אנחנו הולכים לדלג כי אחד לעת עתה ולהתמקד ב, vhosts זה. מישהו יודע מה הוא vhost? רק ז'רגון מטופש למארח וירטואלי, ומה זה אומר הוא שעל שרת טיפוסי אתה בעצם יכול לארח מספר אתרי אינטרנט. אתה יכול לקנות שם דומיין כמו foo.com, ואתה יכול לארח אותו בשרת. אבל אתה יכול גם לקנות bar.com ולארח אותו באותו השרת. הסיבה לכך, דפדפנים הן חכמים מספיק כדי ליידע את השרת כאשר משתמש מבקש דף אינטרנט כלשהו, ​​מה שם הדומיין המשתמש רוצה דף הבית ל. אז מה שיפה זה שאתה לא צריך שרת פיזי אחד או CS50 מכשיר אחד לכל אתר אינטרנט, ייתכן שתרצה ליצור. אתה יכול להשתמש באותו השרת ולפתח מאה אתרים שונים. ואכן, אם אתה אדם מנסה להקים אתר אינטרנט, בין אם להנאה או לעסקים, בדרך כלל אתה יוצא באינטרנט, ואתה תשלם 10 דולרים מישהו חודש, מאה דולרים בחודש כדי לארח את אתר האינטרנט שלך עבורך. ואופן שבו עובד הוא שהם לחייב אנשים אחרים 10 דולרים לחודש או 100 דולרים בחודש לארח אתרי האינטרנט של אנשים אחרים על אותו השרת שלהם. הסיבה שהם יכולים לעשות את זה בגלל תכונה זו נקראת bhosts, אבל עוד על זה כשזה מגיע זמן לעבודות גמר. 

לעת עתה, בואו פשוט לצלול שם. אז vhosts cd, ואם אני מקליד ls עכשיו, שם לב שיש תיקייה בשם 'מארח מקומי. הסיבה לכך, כברירת מחדל, נתוני המכשיר אתה אי פעם הולך לרוץ אתר אחד על מכשיר. זה לא באמת העולם האמיתי, זה לא שרת אינטרנט בעולם האמיתי. אז תן לי ללכת למארח מקומי, ועכשיו אנחנו נראה שם המדריך האחרון שנקרא ה-HTML. אז זה קצת עמוק, ההיררכיה, אבל אם וכאשר אתה מחליט להתחיל בפיתוח אתרים מרובים בחודשים או השנים הקרובים n, סוג זה של מבנה תיקיות נוטה להיות מועיל. עכשיו בואו נלך לHTML כרק עשיתי, ls סוג, ואין לי כלום. אז עכשיו בואו נלך ותעשה את זה. בואו תפתחו לי כרום פנימי של המכשיר, ותנו לי ללכת לhttp://localhost. אז ממש שם למכשיר שלי, להיכנס, ואני מקבל את המדד /. זה באמת לא מראה לי משהו מעניין, אבל מתברר כי מה שאנחנו רואים הוא שתיקייה, HTML. אין שום דבר בתוך תיקייה עכשיו, אז במקום זה, מה שאני הולך לעשות הוא ליצור קובץ ראשון. צור קובץ HTML כמו שעשינו ביום שני, אבל הפעם שם אותו בתוך המכשיר. לאלו מכם שמנסים לבצע יחד עם מחשבים ניידים עכשיו, תנו לי לעשות אחד בצד שאהיה מכוסה בpset מבוסס אינטרנט, אבל כדי לקבל את זה עובד בפעם הראשונה, אתה הולך צריך לרוץ בפקודה זו: מתחילה httpd שירות sudo. וזה, שוב, יחזור על עצמו בpset האחרון, אבל אם אתה משחק יחד בבית עכשיו, שרת האינטרנט כבוי במכשיר, וזה, כך שזה לא להתיש את זכרון RAM וזיכרון במשך 7 שבועות מתוך הסמסטר שבו אנחנו לא צריכים את זה. אז אתה צריך להפעיל את הפקודה הזאת פעם אחת, ותקבל פלט כזה. אז אתה צריך להיות מסוגל לשחק יחד כאן. עכשיו בואו נחזור לתיקייה זו. תיקייה זו ריקה, אז תן לי להתחיל ביצירת קובץ, gedit hello.html. 

בסדר. Gedit פתוח, כרגיל. תן לי לעשות doctype, html, html, תן לי מקדים את המאוחר ולהתחיל לסגור התגים שלי מראש. עכשיו יש לי בראש. תן לי ללכת קדימה ולסגור את הראש, תן לי עכשיו לעשות את הכותרת של הדף, שלום עולם, כמו בפעם שעברה, כותרת קרובה, עכשיו תן לי את גוף. כאן אני אגיד שלום, עולם עם כמה exclams כדי להבהיר שמדובר במחרוזת אחרת. גוף סגור, ועכשיו תן לי ללכת קדימה ולהגיש לשמור. תן לי לחזור לחלון המסוף שלי, ואם אני מקליד ls, אני צריך, כנראה, לראות hello.html. ואני עושה. אז עכשיו בואו נחזור לדפדפן שלי, לחץ על טענת מחדש, ואתה יכול לראות שהם אכן בתוך תיקיית ה-HTML. אני לא רואה בדף אינטרנט, עדיין, זה אפצ'י, שרת האינטרנט, פשוט מראה לי את תוכן הרשימה של מדריך זה. בדיוק כמו Mac OS או Windows הייתי עושה בדרך כלל בכונן הקשיח המקומי שלך. אז אם אני רוצה לראות את דף האינטרנט הזה, אני יכול ללחוץ על קישור זה קצת פה, hello.html, ואכן, זה מה שציפיתי לראות. עכשיו, שוב, זה לא כתובת אתר שכל אחד מכם יכול לבקר עכשיו, כי בשבילך מארח, מקומי, אם יש לך מחשב נייד כאן, הוא התייחס למקרה של המכשיר שלך. זה על המכשיר האישי שלי, אבל זה קצת טיפש ויהיה לי, שיהיה לי משתמש כמוני לחץ על hello.html באמת לראות את התוכן של דף זה. מתברר כי שרתי אינטרנט כמו Apache לתת לך קובץ ברירת מחדל עבור כל שרת אינטרנט. שים לב שיש לנו כאן hello.html. מה הפקודה בלינוקס לשנות את שם קובץ? 

MV, למהלך. אז תן לי לעשות את זה, ותנו לי לשנות את השם hello.html לindex.html. תן לי להקליד ls כדי לאשר עכשיו זה השתנה. עכשיו זה הולך - אם אני חוזר למארח מקומי, שם לב עכשיו שאני באופן אוטומטי אני רואה שדף האינטרנט. זה זהה לשלי / index.html בעצם עושה, אבל הדבר הנחמד כרגע הוא ששרת האינטרנט של חישובים, או, אם יש לך קובץ ש, על ידי מוסכמות אדם, נקרא index.html, תן לי להראות לי את המשתמש שקובץ כברירת מחדל במקום כמה רישום בספרייה טיפש שהוא בכלל לא ידידותי למשתמש. ואכן, רוב האתרים שאתה מבקר באינטרנט אין לי רשימת הקבצים ללחוץ על, הם פשוט להראות לך את התוכן. אז ככה שאנחנו יכולים לעשות את זה, index.html. אז כל זה כיף וטוב, אבל זה הוא דף אינטרנט פשוט למדי. תן לי ללכת קדימה, לפתוח את index.html בvhosts, מארחים מקומיים, ספריית ה-HTML, ובואו יוסיפו משהו מעניין יותר. אז יש שלום עולם, בואו במקום לומר, "זהו CS50, הרווארד של מכללה. . '. אז ראשית תיאור הקטלוג כמובן כלשהי שם. עכשיו, אם אני מחדש, אני צריך לראות את זה בדף הבית שלי. אוקיי, ואני רואה את זה, אבל אניח שאני רוצה עכשיו לרשימה עוד קצת תוכן בקובץ זה. אני יכול ללכת לכאן ואומר, אף אחד תנאים מוקדמים, למרות שחלק מכם בטח כמו ', חה חה חה, אין תנאים מוקדמים. " אבל - באופן רשמי. אז לטעון מחדש, ועכשיו יש לנו את אותו שיגיון שראינו בפעם אחרונה. אבל למה זה? זה היה תיקון פשוט. למה דף זה הוא שבור? [סטודנטים, לא מובן] >> כן, אנחנו פתרנו את זה קודם באומרו במפורש דפדפן 'לשים מעבר שורה כאן.' וזה כי, שוב, דפדפן רק ילכו ויעשו במפורש מה שפת הסימון אומרת לו לעשות, אז למרות שאולי פגעו להיכנס פעם או פעמים או אפילו עשר פעמים, זה הולך לשלב את זה לתוך כל חלל אחד, רק על ידי ועידה. אז אם אתה באמת רוצה מעבר שורה, אתה צריך להשתמש בתג br, ועכשיו להודעה, כמו יום שני, אני מניח / פנימי של תג זה, רק בגלל שזה פשוט לא מרגיש נכון כדי להתחיל מעבר שורה ועצור אותו עם שום דבר באמצע. 

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

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

מה היה התג קרא לזה? [סטודנטים, לא מובנים] >> כן. אז href לעיון יתר. תן לי ללכת קדימה ומדביק פנימה זה כתובת אתר יפה ארוכה, אז בואו להתקרב בחזרה החוצה. סוגריים קרובים, אז עכשיו ישימו לב שאני בדרך לכאן מכיוון שכתובת אתר שבמקרה הייתה די ארוך. בואו לגלול אותי לכאן לסוף שועל חום מהיר, ואז תן לי לסגור את התג הזה עם </, שם סגרתי את השם של התג היחיד. עכשיו תן לי ללכת קדימה ולשמור את הקובץ, לטעון מחדש את דף האינטרנט, ועכשיו, כברירת מחדל, כי זה הולך להיות מודגש בכחול בשבילי, אבל אכן, עכשיו אני יכול ללחוץ על זה וזהו. יש תמונה ש. וזה לא חייב להיות תמונה, זה יכול להיות קשור לאתר כלשהו באופן אקראי אחר באינטרנט. אני יכול לעשות את זה, למשל, עם CS50, כך שהדוגמא האחרונה כאן. "זה CS50 'אולי הגיוני ללכת, href = http://www.cs50.net, ציטוט קרוב, עוגן קרוב. אז עכשיו זה אפילו URL קצרה יותר, והפעם אנחנו לא מתכוונים לקישור לתמונה. במקום זאת, אתה הולך לקישור לדף אחר. עכשיו, יש לנו תמונה כאן. אני מרגיש שאנחנו יכולים לעשות קצת יותר טובים מאשר רק קישור לתמונה. מה אם אנחנו רוצים באמת לגלם אותו בדף האינטרנט שלנו? 

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

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

אין לנו שיקול דעת על מה הדברים האלה נקראים, מישהו אחר שהמציא HTML בא עם השמות הללו. אז אתה רק צריך להתחיל לדעת או לחפש, בכל פעם שאתה צריך אותם, מה השמות הם לתגים ותכונות אלה. במקרה של תכונות אלה, מייחס בדרך לשנות את ההתנהגות של תג מסוים. במקרה זה, תכונת המקור מספרת את תג התמונה מה המקור של התמונה צריך להיות. תכונת href מספרת את תג העוגן מה זה צריך להיות ממש מקשר. אבל במונחים של המבנה של דף אינטרנט, למרות שפייסבוק ו-Google ונראה כמו כמו בלגן שלם מתחת למכסת המנוע במבט הראשון, אם אתה מתחיל לקרוא את זה יותר באופן שיטתי, כולם נאמן למבנה זה בסיסי, בסיסי. אבל אנחנו יכולים לשפר את הסגנון של הדברים האלה. אז תן לי ללכת לכמה דוגמאות שהוכנתי מבעוד מועד. תן לי ללכת קדימה ולהעתיק אותם מתיקייה אחרת כאן ולהכניס אותם לספרייה זו. מראש, מה שעשיתי היה להכין כמה קבצים: search0, search1, search2, וsearch3 ו4. תן לי ללכת קדימה ולפתוח הראשון של קבצים אלה, ובואו נראים אם אנחנו לא יכולים להתחיל ליצור מנוע חיפוש משלנו. בחלק העליון של קובץ זה, כפי שקורה בדרך כלל בכיתה, פשוט חבורה של הערות. ב-HTML, אם כי, זה שבאמצעותו אתה מתחיל תגובה הוא <- ואז אתה בתוך תגובה, הערה מרובה שורות. כאשר אתה מוכן להפסיק תגובה, כי אתה יכול לעשות ->. כך שהכול בראש בכחול הוא רק תגובה. 

זוהי הצהרת doctype שלי, ששוב, אתה יכול פשוט להעתיק ולהדביק באמונה, לעת עתה. זה פשוט אומר לדפדפן, "הנה בא חלק 5 HTML. ' מתחת לזה, בקו 14, הוא הראשון מהתגים שלי בפועל, וזה רק אומר, כמו בעבר, כאן מגיע חלק HTML, הנה מגיע ראש הדף שלי, הנה מגיע את התואר, ולאחר מכן, לעומת זאת, זה אותו על התואר, זה הכל לראש. הנה עכשיו מגיע לגוף של הדף שלי. אז כמה תגים חדשים עכשיו: h1 עומד לכותרת 1. יש מסורת בHTML לשנים רבות לאחור שיש גדלים שונים של טקסט. ובחזרה באותו היום, כל אחד מהם התכוון, בדרך כלל, רק גדול ונועז. אבל יש גם H2, שהיא גדולה אבל לא ממש גדולה ונועזת. יש H3, שהוא סוג של גדול אבל לא כל כך גדול ונועז, וכן הלאה, כל הדרך למטה לh6. בימים אלה, אם כי, H1, H2 ו H3 הם באמת התכוונו יש משמעות סמנטית יותר אליהם, לפי h1 הוא באמת כותרת: הכותרת של דף אינטרנט, הכותרת של עמודה או משהו כזה של טקסט. אז בכוונה שאמר h1 CS50 חיפוש> h1 לspecifiy שזה באמת הכותרת, הכותרת של הדף שלי. לא הכותרת, במובן שורת הכותרת, אבל הכותרת שאתה בעצם רואה בדף האינטרנט עצמו, בגוף. ועכשיו זה, כנראה שאתה יכול לנחש מה זה, למרות שיש לנו כמה קטעים חדשים של תחביר. זוהי צורה. אז האינטרנט באמת מתחיל להיות מעניין כאשר אתרים לקחת מידע ממשתמשים. במעמד הזה, בבעיה להגדיר בתכנות האינטרנט, אנחנו לא מתכוונים לעשות אתר, כשלעצמה, עם תוכן סטטי המציג תצלומים שצלמתם, או זה קורות החיים שלי, ועליי הדברים, בגלל הדברים האלה הם יחסית קלים להרכיב. זה קשה לעשות דברים יפים באינטרנט, אבל לפחות לשים את התוכן הוא די טריוויאלי. אבל דברים מקבלים באמת מעניינים כאשר מישהו יכול לבקר באתר האינטרנט שלך ולספק קלט ויכול למלא טפסים, יכול לבדוק את תיבות סימון ויכול לקיים אינטראקציה עם האתר שלך. ואכן, כנראה בכל אתר שאכפת לך בימים אלה, בכל פרט, הוא איכשהו אינטרקטיווי. פייסבוק, גוגל, וכמו, שייקח את קלט משתמש ולהפיק פלט מותאם אישית. 

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

הפעם זה הולך להיות בשימוש לשליחת הטופס. אז זה הולך להיות על הכפתור הגדול שאפשר ללחוץ כדי לשלוח את הטופס, והתווית על כפתור זה הולכת להיות 'CS50 חפש'. צורה סגורה, גוף קרוב, קרוב HTML. בואו נראה מה יש לנו בצורה של דף אינטרנט זה. אז תן לי ללכת לדפדפן שלי, תן לי ללכת, עדיין, למארח מקומי. זה עדיין index.html, כך שאם אני רוצה לראות את הקובץ הזה שנקרא search0, אני יכול פשוט לעשות / search0.html, זן - והראשון מהטעויות שלי. מה קורה? אני בבירור אין לך הרשאה כדי לגשת לקובץ זה, מסיבה כלשהי. אבל זה משום שבניגוד העבודה שעשינו עד כה ב-C, איפה את התוכניות שאתה כותב הם הניחו להיות runable על ידך, הפעלה על ידי לך, זה לא ממש המקרה באינטרנט, לפי לפעמים אולי כדאי לך ליצור קבצים בשרת, אבל אתה לא רוצה שכל העולם יוכל לראות אותם. במקום זאת, אתה רוצה שהעולם רואה כמה קבצים אך לא לאחרים, רק למען השמירה על הפרטיות. אז זה יותר מבסיס opt-in כשאתה עושה דברים באינטרנט. ואז תן לי דווקא הקלד ls כאן, ואתה רואה את הקבצים שיש לי, אבל תזכור שאם אני עושה ls-l לזמן רב, אני אקבל רשימה ארוכה יותר שנותנת לי קצת יותר פרטים, קבצים אלה כי עכשיו, באמת, לזמן הרלוונטי אלינו הראשון. שימו לב כי בקצה הימני הם השמות של הקבצים שלי, ואז הזמן שבו הם שונים לאחרונה או העתקה. מספר זה הנה מה? האם אתה זוכר? הגודל בבתים, כמה גדול הוא הקובץ. 

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

אז מערכת ההפעלה פשוט נותנת לי RW באופן אוטומטי. אלה ביניים מתייחסים לקבוצה שלי, זה של תלמידים, שהוא סוג של משמעות על המכשיר משום שאני האדם היחיד שמשתמש במכשיר. אז תן לי רק לנפנף בידות שלי בזה לעת עתה. אבל אלה האחרונים הם חשובים ביותר עבור האינטרנט. זה כל אחד אחר בעולם, ואת העובדה ש--- אומר שאף אחד אחר בעולם יש לו כל הרשאות משתמשת בקובץ זה. ברור שבעיה, אז אני צריך לתקן את זה על ידי מתן לעולם מה איכשהו? קריאה וכתיבה? זה כנראה טיפשי, נכון? אני לא רוצה שאף אחד באינטרנט ללכת לבקר בדף שלי ואיכשהו לשנות את הקובץ, למרות שהם ממש לא יכולים עם קובץ HTML, אבל רק בעיקרון, ככל הנראה לא רוצה שהם יהיו מסוגלים לקרוא אותו. מה זה אומר לקרוא אותו? זה לא אומר שהם הולכים לאכפת HTML בפועל, אבל הדפדפן צריך להיות מסוגל לנתח ששפת הסימון, מלמעלה למטה, משמאל לימין. אז מישהו באינטרנט צריך להיות מסוגל לקרוא אותו, אז אני מינימאלי צריך לתת לו r. אני יכול לעשות זאת בכמה דרכים שונות, אבל אולי הפשוט ביותר הוא הפעלת פקודה זו כאן. Chmod, שינוי מצב, אז + R אז כל, כל אחד בעולם + לקרוא, ולאחר מכן את השם של הקובץ, search0.html. 

עכשיו, אם אני עושה ls-l שוב, שים לב שהקובץ שהשתנה, ואכן, אני כבר פניתי למחקר לכולם. גם אני כבר הפכתי אותו בקבוצה שלי, אבל זה בסדר, כי אם פניתי בכולם, הקבוצה שלי היא קבוצת משנה של זה. כך שגם זה בסדר. זה רק אומר שהמחשב הפך עכשיו זה קריא. עכשיו תנו לי לחזור לדפדפן שלי, לחץ על רענן. אה, חה. עכשיו יש לנו CS50 חיפוש. אני כבר זנקתי באופן מלאכותי קטן - מנוע חיפוש די מחריד. אבל בואו נראים אם זה באמת עובד. ראשית, הרשה לי לעשות את בדיקת שפיות מהירה, תן לי לשלוט לחץ ולהציג מקור של דף. שים לב שבתוך Chrome אנחנו רואים עכשיו אותו HTML שאני עצמי יצרתי. אל תתבלבל אף כאן,. אני לא יכול להתחיל לשנות את הקוד כאן, משום שיש לדפדפן תצוגה לקריאה בלבד של קוד זה. הדפדפן בדיוק שאל את המארח מקומי לקובץ שנקרא search0.html. עכשיו זה צירוף מקרים בלבד שהמכשיר במקרה באותו המחשב כדפדפן שלי. אני רק יכול להיות, באופן שקול, הקליד בwww.facebook.com/search0.html, ואם פייסבוק היה קובץ בשם זה, הייתי אז להיות רואה HTML שלהם. וכמובן, אני לא יכול לשנות את הקובץ שחוזר מפייסבוק, או. אז עכשיו אנחנו בסוג של טשטוש גבולות. המכשיר הוא גם שרת, המשרת את דפי אינטרנט, אבל זה גם לקוח במובן זה שאני משתמש בדפדפן בעצם לדבר ששרת. אז בואו לראות אם מנוע החיפוש של Google שלי עובד. תן לי ללכת קדימה ולחפש שועל חום זריז, להיכנס. וזהו, עכשיו יש לי מנוע החיפוש שלי. 

אבל איך זה עובד? קצת למתוח, אבל - ועכשיו אתה לא יכול לראות, בדיוק, זה חלק מעניין. שים לב מה קורה. שים לב לכתובת האתר. מתברר כי שיטה ש, נקרא להגיע, הוא סופר פשוט. כשאתה מציין בצורה שאתה רוצה 'להגיע' תוצאות משרת כלשהו, מה זה הולך לעשות הוא לקחת את כל מה שהקלדת לתוך הטופס ולשים אותו ב-URL. זה הולך לתקנן איך זה יכניס אותו לכתובת באופן בא. שים לב שזו היא כתובת האתר שהיה הערך של תכונת הפעולה שלי. זה המקום שאני רוצה את הטופס לסופו. אבל אז הבחין בסימן השאלה הזה. זו מוסכמה באינטרנט לפיה כדי לספק קלט משתמש לאתר אינטרנט, אתה מצרף את כתובת האתר בסימן שאלה, ואז יש לך חבורה שלמה של זוגות מפתח וערכים. השם של מפתח, הידוע כפרמטר באינטרנט, אז יש לך סימן שוויון, אז יש לך את הערך של פרמטר זה. אז זה בעצם שם משתנה וערך משתנה, אבל שמות וערכים אלה של משתנים הגיעו מטופס HTML. למה את הפלוסים שם, אתה חושב? בגלל שלא להקליד ב+ בין המילים שלי. [סטודנטים, לא מובנים] >> כן, זה רק למרווח. רוב הסיכויים הם, בכל פעם שראית את כתובת אתר, אף פעם אין רווחים כלשהם בזה, ולו רק בגלל אם היו, אתה לא באמת יכול להעתיק ולהדביק אותו למיידי או לדוא"ל כי זה יישבר. אתה רוצה שכל הדבר יהיה מחרוזת רציפה אחד של תווים. 

אז הדפדפן הוא חכם מספיק כדי להבין, לא ולא. האם לא פשוט לשים רווח שם. תן לי לקודד את החלל בדרך סטנדרטית. אחת הוועידות לכך הוא שיש לדפדפן באופן אוטומטי את + בך אחרת היה חלל. אז עכשיו, ההודעה גוגל כבר סוג של ידידותי למשתמש. אני בוודאי לא ליצור דף אינטרנט זה, אבל הם מאוכלסים מראש שדה טקסט משלהם עם מה, בדיוק, הקלדתי פנימה אניח שאני רוצה לחפש משהו אחר, כמו כלב עצלן. אני יכול פשוט להקליד את זה כאן, מחדש חיפוש. שים לב שכתובת האתר משנה עד כאן, אבל אז שם לב שאני ממש יכול לחפש כל דבר שאני רוצה רק על ידי הבנת אופן עבודה של כתובות אתרים. אני יכול לעשות את החתול עצל, זן, ושים לב עכשיו אני מקבל מאוד עצלן - אנחנו צריכים? אני מרגיש שאנחנו צריכים. אני מקבל חתול עצלן מאוד. בסדר. זה אחד הדברים הכי הטיפשיים שעשינו. אבל זה חתול עצלן. בכל אופן, מה ממסעדה המפתח כאן? עכשיו אנחנו סוג של משחק בעולם של HTTP. HTML הוא רק שפה זה סימון, תג פתוח, תג סגירה, שאומר לי דפדפן כיצד לעבד את התוכן בדף אינטרנט. אבל כשאתה מתחיל העברת נתונים דרך האינטרנט בין דפדפן והשרת, ששם זה פרוטוקול מכונה HyperText Transfer Protocol משתלט. זה הסוג של מוסכמה אנושית; כאשר סם ואני לחצתי ידות ביום שני, החל חיבור ולאחר מכן לסגור את אותו חיבור רעיון, כאן. איך התוצאות של גוגל חוזרות אליי? איך טופס ההגשה שלי הולכת לגוגל? ובכן, זוכר מהימים כי מה שבאמת קורה מתחת למכסת המנוע כאשר אתה מבקש דף אינטרנט הוא, הדפדפן שלך שולח הודעה במקצת, מסתורית כמו GET / HTTP/1.1 לדף הבית המוגדר כברירת מחדל. 

או, במקרה זה, משום שאני דווקא בקשתי קודם לכן search0.html, אז זה יהיה המסר של מקצת-הסתום כי הדפדפן שלי שולח למכשיר. או, במקרה זה של גוגל, מה ששלח בפועל היא בקשה ל/ חיפוש, ולאחר מכן? q = חתול עצלן, עם תוספת שם. אז המסר הזה, שאני, האדם, אני בחיים לא הקלדה, אבל הוא נשלח על ידי הדפדפן שלי, זה איך קורה HTTP. זו מקבילה של הידות שלנו שהוא המוכה והחבולים. זו הבקשה, והשרת עומד לשלוח תגובה. אז בואו נסתכל על זה מתחת למכסת המנוע. כמו בעבר, אנחנו יכולים לפתוח את השדה המיוחד הזה בדפדפן. צפייה בדף, לבדוק מרכיבים. וכך, תחת לבדוק אלמנט, שים לב כי מה שקרה בכרום, וIE ו-Firefox יש מנגנונים דומים, יש לנו כלי פיתוח אלו נגישים לנו. אנשים נורמלים לא להשתמש בכרטיסיות אלה. אבל אנחנו, עכשיו, מתעניייינים במה שקורה מתחת למכסת המנוע ברמת הרשת. אז אם אני מוריד את רמת הרשת כאן, תנו לי ללכת קדימה ולהרחיב את החלון הזה, לפתוח את הפוסט הזה כאן, ומסתכל על הכותרות. אז מה קורה כאשר אני מבקש קובץ משרת אינטרנט הדפדפן שלי הוא שולח חבורה שלמה של דברים. ותן לי להציג את המקור. וכך, תחת כותרות בקשה, וזה רק מראה לי כמה Chrome פלט אבחון, כמו סוג של הבאגים מסוג כלשהו, תבחין כי מה שמודגש כאן היא בדיוק מה כרום הוא שולח לשרת כדי לבקש קובץ שנקרא search0.html. הוא אומר מה שהוא חושב שרת שמה, הודות לתחום מעי גס מארח זה, אז יש כמה דברים די אזוטרי בפה, כמו משהו שצריך לעשות עם תאריכים ושעות, משהו לעשות עם השפות שהדפדפן מבין, אבל הקווים החשובים באמת הם אלה שני ראשונים כאן. 

מה השרת מגיב עם? ובכן, אם אנחנו לגלול למטה כאן ולהציג את המקור של הדבר הזה, שים לב שהשרת גם הגיב עם הודעה סתומה למדי, 304 לא שונו. זה קצת מוזר, תן לי באמת מנסה לתקן את זה. תן לי להחזיק את המקש SHIFT לחוץ ולחץ טענתי מחדש כאן כדי לאלץ את הדפדפן בפועל לביצוע בקשה זו בפעם הראשונה. אז תן לי להתמקד ב, ואנו רואים עכשיו שהתגובה של השרת, כי אני נערכתי משמרת, הוא 200 אישור. אז יש לך כנראה מעולם לא ראה את המספר 200 בהקשר של האינטרנט, אבל מה שהמספרים יש לך לפעמים ראה לא צפוי משרת? 404, קובץ לא נמצא, 403, אסור; 500, שגיאת שרת. אז יש קודים מספריים אלה, שהעולם משתמש באינטרנט כדי לסמן טעויות, בדיוק כמו פונקציות C יכול לחזור ושגיאות עיקריות יכול להחזיר קודי יציאה. 200, אם כי, אתה כמעט ולא רואה, כי זה אומר שהכול בסדר. ו304 אתה כנראה לא תראה, כי מה זה מסמל? ששום דבר לא - בואו נראה אם ​​אנחנו יכולים לדמות את זה שוב - הו, עכשיו זה לא משתף פעולה. 304 אמרו לא שונים, אז למה היה השרת אפילו להגיב? ובכן, ליעילות, שרת אינטרנט באופן אוטומטי עבורך, אם הקובץ לא השתנה, היא לא לשדר קובץ HTML כולה. זה פשוט יגיד לו הדפדפן לא השתנה. פשוט להשתמש בעותק כבר יש לך. אז יש את הרעיון הזה במטמון באינטרנט עבור ביצועים, כך שאתה לא לבזבז את הזמן ורוחב פס פסולת הורדת קבצים שוב ושוב שלא לצורך. 

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

אני אתמודד עם זה בהמשך. אז אם אנחנו באמת להציג המקור של הדף, שאני יכול לעשות כאן למטה על ידי לחיצה על תגובה, זה מה שבעצם הייתה יורק בחזרה, בנוסף לאישור שההודעה מסתורית 200 מהשרת. לא ברור מספיק, אבל לאן כל זה מגיע? ובכן, בואו לעשות דבר אחד אחר כאן. עוד פקודה במקצת, מסתורית, אבל סוג שלו מסודר של זה בכך שהוא מגלה לנו בדיוק את מה שקורה מתחת למכסת המנוע. אז אני חוזר על Mac שלי כאן, יש לי קשר באמצעות תוכנה בשם SSH, Shell המאובטח, לשרת אחר משום שרוב המחשבים של הרווארד לחסום את הפקודה שאנחנו עומדים לרוץ בגלל שיש בפקודה זו על שרתים מסוימים בשם traceroute זה מאפשר לך לעקוב אחר המסלול שבין נקודתי A ו-B, ועד כה אנחנו כבר לוקחים כמובן מאליו לחלוטין שאני יכול להקליד בGoogle.com ואיכשהו לקבל נתונים בחזרה מצד השני של הארץ או בקצה השני של העולם. עם traceroute אנחנו באמת יכולים לצלול בקצת יותר לעומק לגבי איך האינטרנט עובד, ולראות מה קורה מתחת למכסת המנוע. אז בואו נלך קדימה ושרירותי לעקוב אחר מסלול, להגיד, Stanford.edu, אשר הוא בכל רחבי הארץ, והקש על Enter. פקודה זו יכולה להיות סופר מהירה או סופר איטי, אבל מה שאנחנו רואים עכשיו, שורה אחרת שורה, הוא כל אחד מהשלבים או במסיבות בינינו ופאלו אלטו, או סטנפורד, שם יש להם שרת האינטרנט שלהם. אז מה עושה כל אחד מהקווים הללו מייצגים יותר קונקרטיים, אם כי? חתיכת העגה מהאינטרנט? [סטודנטים, לא מובנים] >> מה זה? [סטודנטים, לא מובנים] >> אה, אז יש פעמים, אבל מה זה כל שורה - מה שאני מתכוון בופ? 

ובכן, יש את הדברים האלה באינטרנט שנקראים נתבים. ונתבים, כפי שהשם מרמז, מידע מסלול מנקודה לנקודה ב '. אבל יש כמה נקודות מעבר וb. יש C ו-D וה F ובין השורה 1, אשר קורה להיות כתובת ה-IP של המחשב שלי, או הכתובת המספרית שלי, שמזהה באופן ייחודי את המחשב שלי, ואת שלב 15, שהוא למעשה שרת האינטרנט 6, כנראה, שאני הסקתי את זה, או הגרסה 6 של שרת האינטרנט שלהם בסטנפורד. אבל מה הוא סוג של מסודר, אנחנו יכולים לראות את הנתיב ש 0 שלי ושל 1 לוקחים מהמחשב שלי לסטנפורד. אז בשלב 1 הוא הכתובת של המחשב שלי. בכל מחשב באינטרנט יש מזהה ייחודי שנראה כך. Number.number.number.number. במקום כלשהו בקמפוס הזה, כנראה במרכז המדע, הוא נתב בשם Gateway Core 2-te83, מה זה אומר, אז זה אחד מהנתבים הגדולים והמפוארים של הרווארד שמסלולים הרבה התנועה שלהם. הנה עוד אחד מהנתבים של הרווארד, זה אחד הוא גבול שער, משמעות גבול זה כנראה בשולי קמפוס איפשהו. אז יש NOx אחד, השורה 4, שהוא פרש דרכים בצפון, שהוא גדול ISP, ספק שירותי אינטרנט, שמקומות כמו הרווארד חבר עד. אבל אז דברים לקבל קצת מעניינים בקו 6. איפה הביטים שלי פתאום? קנזס. העולם יש מנהג של שימוש בקודי שדות תעופה בהרבה מהדברים האלה, או בקיצורים ביותר עבור מדינות או ערים, כך זה נראה, במרחק של רק 60 אלפיות השני, חבילת המידע, 0 ו 1 זה מהמחשב הנייד שלי עשה את כל הדרך לקנזס, ושוב, ב60 אלפיות השניים. 

יתר על כן, לאחר שקנזס, הם לקחו את הסיור ביוסטון, כנראה, כפי שהוצע על ידי שמו של שרת זה. אז בדיוק כמו שרת באינטרנט חייב להיות כתובת מספרית, זה גם יכול, לחלופין, יש כתובת קצת יותר ידידותי לאדם שבני האדם המציא. עכשיו, בשלב 8, אנחנו לא יודעים מה זה. לפעמים נתבים פשוט סוג של מתעלמים ממך, והם פשוט לא לענות על השאלות, אז זה בסדר. אחד אחרי השלב 8 הוא כנראה שם? לוס אנג'לס שים לב רק 78 בטרשת נפוצה, מה שלוקח אותנו בני אדם כמו 6 + שעות לעשות מבחינה פיזית, לוקח מנות של מידע באינטרנט 78 אלפית לנסוע כל כך רחוק. שלב 10 הוא בלוס אנג'לס, כמו גם, ושלב 11 נראה שנסע צפונה עד בסמוך לאוניברסיטת סטנפורד. זה נתב גבולם, או נתבו גבול. בכמה צעדים מאוניברסיטת סטנפורד שמתעלמים מאתנו, ולבסוף, אנחנו מגיעים לשרת האינטרנט פשוט ב87 אלפיות שני. עכשיו, כל המספרים האלה, כמו בצד, רק להגיד לך כמה הזמן לוקח לנתונים כדי לקבל ממני לכל אחד מהנתבים האלה, וזה לא מצטבר. מה התכנית הזו עושה זה, הוא שולח הודעה 1, למעשה, לנתב הראשון. אז אחד לנתב 2: ואז אחד לנתב השלישי, מדידה בכל פעם. כך בתאוריה, זמנים אלו גדלו או לפחות די קרוב לזה, ואכן, את אלו שממש כאן בקמפוס הם סופר קטנים. ברגע שאתה מתחיל ללכת בכל רחבי הארץ, זה לוקח נתונים עוד קצת לנסוע, קרוב יותר ל 100 אלפיות שניים, פחות או יותר. אבל בואו נלך עכשיו לכיוון השני. מה דעתך על אוניברסיטת קיימברידג' בבריטניה? תן לי במקום לרוץ traceroute של www.cam לקיימברידג', . Ac לאקדמי,. בריטניה, ולהיט להיכנס לכאן. זה היה די מהיר. הנתונים שלי ממש יצאו לקיימברידג' באנגליה, באותו שבריר השני של זמן. 

אז בואו לראות את הנתיב שלקח. הרווארד, אוניברסיטת הרווארד, אוניברסיטת הרווארד, פרשת דרכים בצפון, שהוא ספק אינטרנט, ואז זה Crossroads הצפון, ואז בום. מה בין השלבים 6 ו 7, נתב 6 ו 7? האוקיינוס ​​האטלנטי. ואנחנו להסיק זאת מהעובדה ש אנחנו הולכים מכאן 20 עד 80 אלפיות שניים ms כאן. אז משהו לקח 60 אלפיות השני, פחות או יותר, כדי להתגבר עליו. וזאת הייתה כנראה גוף גדול של מים. מה שקורה לאחר מכן? ובכן, הנה אנחנו בלונדון, רק 88 אלפיות שני מאוחר יותר. יותר לונדון, לונדון יותר, לא בטוח איפה זה, אבל נניח שזה מחוץ ללונדון, קיימברידג' כאן, ולבסוף - פשוטו כמשמעו, אוניברסיטת קיימברידג' . Something.net, ואז, סוף סוף, בקו 16, שרת האינטרנט שלהם נקרא ככל הנראה עקרב מתחת למכסת המנוע, למרות שאנחנו מכירים אותו כwww. הסוג של המוח נושב-, אני חושב. הפעם הראשונה שעשיתי את זה, זה לחלוטין פוצצה את דעתי. למרבה הצער, הרווארד חוסם סוג זה של תנועה, בדרך כלל, ברשת. אז אתה לא יכול לעשות את זה סופר בקלות. תבין, אם כי, זה כאן הוא אפשרי. בסדר. בואו ניקח ההפסקה שלנו 5-הרגע פה. אנחנו נחזור ולצלול עמוק יותר. אז אנחנו נמצאים מאחור, וסוג שלנו השתרכנו על בכמה כיוונים שונים כאן. אז בואו נסכם בדיוק מה שקורה כאן. התחלנו את השיחה מדברת על שפה זו נקראת HTML. שוב, לא שפת תכנות. זה רק שפת סימון שהוא במידה רבה על אסתטיקה ובנייה של תוכן בצורה של דף אינטרנט. אבל HTML, ולכן, צריך איזה מנגנון נסיעה בין דפדפן אינטרנט לשרת. HTML ולכן סוג של רוכב על גבי לשון אחרת זה, או יותר כמו שצריך, פרוטוקול, המכונה HTTP. 

וHTTP, כפי שראינו אותו עד כה, הוא סוג של אנלוגיה לכינוס האנושי הזה של לחיצת ידות. כאשר דפדפן רוצה לבקש דף משרת, הוא שולח כי "מקבל" בקשה מדפדפן לשרת, ולאחר מכן השרת מגיב עם מספר כמו 200, הכל בסדר, כמו גם את ה-HTML או מספר רע כמו 404, קובץ לא נמצא. אבל בינתיים, HTTP עצמו הוא לא באינטרנט, כשלעצמה. HTTP הוא רק שירות, תכונה של האינטרנט כמו G צ'אט הוא שירות אחר, כמו דואר אלקטרוני הוא שירות אחר. יש כל מיני דברים שאנחנו יכולים לעשות באינטרנט. HTTP הוא רק אחד מהיישומים אלה. אז בראש - HTTP הוא על גבי משהו אחר שלא לדבר בשמו, אתה אולי שמעת על ידי שם, TCP / IP. אז הסיפור פשוט אמרתי שיש הוא על כל כמה נתונים נוסעים מנקודת א 'לנקודה ב. ובמקרה הזה, שראינו ברמה נמוכה מאוד הנתב מנתב לנתב לנתב, כיצד הנתונים בפועל משודרים. אבל לאורך הדרך, זה הולך להיתקל במכשולים שונים. חוץ נתבים אלה, יש דברים שנקראים חומות אש באינטרנט, וכן נתונים, כגון שאנחנו פשוט משדרים ממני לסטנפורד, ממני לקיימברידג', הוא נשלח ל, ברמה זו, משהו שנקרא כתובת IP. ראינו את זה לפני רגע, וכתובת ה-IP רק כתובת מספרית של w.x.y.z הצורה, שם כל אחד מאלה הוא בין, פחות או יותר, 0 ל 255, למרות שאתה לא ממש יכול להשתמש בכל המספרים האלה. אבל כל אחד מבעלי המקום אלה הוא מספר בין 0 ל 255. אז כתובת ה-IP בימים אלה הם 32 סיביים. 

עכשיו, שנותן לנו כמה אפשרי כתובות IP בעולם? בערך 4 מליארד דולרים, משום שכל זמן שאנחנו סופרים בחזקים של 2 כל הדרך עד 32 במשהו, זה בדרך כלל נותנת לנו 4 מליארד שקל. אז זה הרבה כתובות IP, אך ייתכן שקראת, או שעכשיו ייתכן שיבחין בעיתונות הפופולרית, דחיפה לעבר גרסה חדשה של ה-IP בשם IPv6. כרגע אנחנו משתמשים בגרסה 4. יש באמת לא הייתה גרסה 5, אנחנו רק קופצים זכות 6. גרסה 6 היא מתכוונת להשתמש 128 סיביות של כתובות IP, שמתחרפנת ענקית ל. אנחנו לא צריכים לרוץ החוצה די הרבה זמן עכשיו, אבל אנחנו התחלנו לרוץ החוצה 4 כתובות IP של גרסה, כי לכולנו יש דברים לא רק כמו מחשבים ניידים ומחשבים שולחניים, הרבה מאתנו יש טלפונים, הרבה מאתנו יש מכשירים אחרים כמו TiVo וכמו שיש כתובות IP בעצמם. הרווארד עצמו יש עשרות אלף מחשבים. אז באמת העולם הולך ואוזל של כתובות IP, לפחות בצורה זו. וכך, במשך השנים הקרובות, אתה הולך לראות את הכתובות במחשבים שלך כנראה משתנה באיטיות כאשר יותר ויותר חברות ואוניברסיטות תתחלנה לתמוך בגרסה החדשה יותר. אבל כתובת IP היא לא מספיק למחשב כדי לבקש נתונים ממחשב ב. בגלל מחשב ב יכול להיות שרת, ושרת, כפי שהזכרתי קודם, יכול לעשות צרורות של דברים. הוא יכול לארח דפי אינטרנט, זה יכול להיות שרת דואר אלקטרוני, זה יכול להיות שרת סקייפ, זה יכול להיות שרת צ'אט G. 

כל שירותים שונים שיכולים להינתן על שרת אפשר הכל, מבחינה פיזית, להיות על אותו מחשב. אז בנוסף לכתובות IP, בעולם יש דברים בשם יציאות באינטרנט. נמל הוא רק מספר, כך שיש מספר ייחודי עבור HTTP. המספר שלו הוא 80. HTTP משתמש גם במספר 443, אבל באופן ספציפי יותר, לHTTPS המוצפן. בכל פעם שאתה רואה את זה, למאובטח, שמשתמש במספר אחר. יש מספרים אחרים, כמו 25, המשמשים למשהו שנקרא SMTP, הידוע גם בכינויו דואר אלקטרוני. יש משהו שנקרא 22 עבור SSH, ויש חבורה שלמה של נמלים אחרות שם בחוץ. עכשיו, אנחנו בני אדם כמעט ולא רואה את המספרים האלה. עם זאת, בעת הקלדה בכתובת כמו http://www.facebook.com, דפדפן חשאי הכנסת 80, כי אתה משתמש בפרוטוקול HTTP. אם, במקום זאת, HTTPS סוג, זה חשאי הכנסה 443. ואנחנו יכולים לראות את זה סוג של ידני אם אני חונה בראוור וללכת לhttp://www.facebook.com:80. לכן במפורש מצטט לא רק את שמו של האתר אבל היציאה שאני רוצה לדבר איתו, והקש על Enter. שים לב, זה נעלם, כי הדפדפן מניח, הו, 80, אני לא אפילו לא אטרח להראות לך את זה. אבל הסיבה לכך היא שאם באמת הייתי רוצה לשלוח מישהו דוא"ל, אני באמת תהיה לשלוח להם את זה ביציאה 25, כי להיות ה-SMTP. קצת פשטני, אבל כמה מכם יש חברים שבאמת עובדים בפייסבוק, והם, באופן דומה, יש שרתים שמקבלים דוא"ל. 

בכל פעם שאתה שולח דואר אלקטרוני, מה gmail עושה בשבילך או Outlook או כל תכנית אתה משתמש, זה סוג של החדרת חשאי גם את המספר הזה, 25, במקרה זה. זהו זה שילוב של כתובת ומספר שמזהה באופן ייחודי ה-IP מחשב באינטרנט ושירות מסוים באותו מחשב. עכשיו, כמובן, רובנו כנראה מעולם לא הקלידה באופן ידני כתובת IP. אולי יש לך במכשיר, אבל בעולם האמיתי, לא כל כך הרבה. למה אנחנו לא להקליד כתובות IP לדפדפנים? כך זה עובד, למעשה, אנחנו יכולים לראות את זה, תן לי להראות לך פקודה אחת אחרת שצריך לעבוד ביותר בכל מקום בקמפוס של אוניברסיטת הרווארד במקינטוש או ב-PC. אין בפקודה זו נקראת nslookup, בדיקת שרת שם. אם אני מסתכל למעלה www.cnn.com, מתברר כי CNN יש - הו, מעניין. CNN החל להשתמש בשירותי אינטרנט של אמזון. אתה אולי יודע של מחשוב ענן, אחד של אמזון של השחקנים הגדולים במחשוב ענן. מה שאני פשוט לא היה, אמרתי, 'תן לי את הכתובת של שרת האינטרנט של CNN,' אבל מסתבר ששרת האינטרנט של CNN מנוהל על ידי אמזון, אמזון שירותי אינטרנט, זה מצביע. ואת הכתובת של שרת שזה כאן. אז אני לא בטוח אם זה יעבוד, כי הם לא נהגו להשתמש באמזון. אבל בואו ננסה את זה; כתובת http://, IP, זן, ו-- זה הולך לעבוד? כן. הוא הולך לעבודה. אינטרנט הוא כיום סופר איטי. אבל, ברגע אחד, אתה תראה איזה סיפור חדשות. הנה. הבנק אוף אמריקה שנתבע. בסדר. 

הסיבה לכך היא כתובת ה-IP זה פשוט קורית שם נרדף על ידי www.cnn.com. כמובן, זה יהיה נורא שיווק לומר, לבקר אותנו באינטרנט ב50.112.94.127. אתה לעולם לא הייתי זוכר. כך שאפילו בימים אלה אתם אולי זוכרים דברים כמו 1-800-COLLECT או המנמוניקה העולם בא עם מספרי טלפון. אשר, לפני טלפונים סלולריים, ולא היו קשה לזכור עד שאתה יכול פשוט להקליד אותו ובתשכח מזה. אז האינטרנט, גם לה יש אמנה זו של שמות וכתובות IP, ויש את הדברים האלה בחוץ נקראים שרתי DNS, שרתי שם דומיין מערכות, המתרגמים כתובות IP לשמות ולהיפך. אז זה מה שקורה מתחת למכסת המנוע. בסופו, יש לנו פרוטוקול TCP / IP, שהוא פרוטוקול נמוך מאוד ברמה זו כי, באמת, פשוט מקבל 0 ו 1 של ברחבי רשת האינטרנט, והיא עושה זאת על ידי לשים אותם לתוך מעטפה וירטואלית, אם תרצה, וכותב בצד החיצוני של המעטפה כתובת IP של היעד, כמו גם את מספר היציאה המספרי של השירות שביעד שהוא רוצה לדבר איתו. בינתיים, על המעטפה יש גם משהו ידוע ככתובת שולח, שכתובת ה-IP שלך, כך שכאשר CNN מקבל חבילת המידע ממך, פותח מעטפה הווירטואלית הזה, רואה שאתה רוצה בדף הבית, הוא יודע מחלק השולח של מעטפה וירטואלית, זה מי לשלוח חזרה לHTML. אז בואו נסתכל על זה בפירוט קצת יותר. זה מחברה שנקראת אריקסון, מכמה שנים אחורה. והם לקחו כמה חירויות עם איך האינטרנט עובד באמת, אבל זה מצייר תמונה הרבה יותר ויזואלי מגיר לכאן בלבד. אז אני נותן לך "קצת באינטרנט". 

[קריין] בפעם הראשונה בהיסטוריה, אנשים ומכונות עובדים יחד, הגשמת חלום. כוח המאחד שאינו יודע גבולות גיאוגרפיים. ללא הבדל גזע, דת או צבע. עידן חדש שבו תקשורת באמת מביאה אנשים יחד. זהו השחר הנקי. רוצה לדעת איך זה עובד? לחץ כאן כדי להתחיל את המסע שלך לרשת. עכשיו, בדיוק מה שקרה בעת לחיצה על הקישור הזה? אתה התחלת זרימת המידע. מידע זה עובר למטה לחדר הדואר האישי שלך בי חבילות IP מר, מתייגות אותו, ושולחת אותו לדרך. כל מנה היא מוגבלת בגודלו. חדר הדואר צריך להחליט כיצד לחלק את המידע וכיצד לארוז אותו. כעת, החבילה זקוקה לתווית המכילה מידע חשוב כגון כתובת השולח, כתובתו של כונס הנכסים, וסוג החבילה שהוא. בגלל המנה המסוימת הזה היא יוצא לאינטרנט, הוא גם מקבל כתובת לשרת Proxy, שיש לו תפקיד מיוחד, כפי שנראים בהמשך. המנה עכשיו השיקה גבי הרשת המקומית, או LAN. רשת זו משמשת לחיבור כל המחשבים המקומיים ' נתבים, מדפסות, וכן הלאה, להחלפת מידע בתוך החומות הפיזיות של הבניין. LAN היא מקום די מבוקר, ולמרבה הצער, תאונות יכולות לקרות. הכביש המהיר של רשת ה-LAN הוא ארוז עם כל סוגי המידע. אלו הן מנות IP, Novell מנות, AppleTalk מנות. הם הולכים נגד כיוון תנועה, כרגיל. הנתב המקומי קורא את הכתובת ואם יש צורך, מרים את המנה לרשת אחרת. אה, את הנתב. סמל של שליטה בעולם שנראה לא מאורגן. [נתב ממלמל ומדבר לעצמו] 

[קריין] הנה הוא, שיטתי, אדיש, ​​שיטתי, שמרני, ולפעמים לא ממש עד מהירות. אבל לפחות הוא מדויק, על פי רוב. כמנות לעזוב את הנתב, שהם עושים את דרכם לאינטרנט של החברה ואת הראש של מתג הנתב. קצת יעיל יותר מהנתב, מתג הנתב משחק מהר ומשוחרר עם מנות IP, זריזות ניתובם לאורך דרך. 'אשף פינבול, "דיגיטלי, אם תרצה. [מתג נתב מדבר לעצמו] [קריין] כפי שמנות מגיעות לייעדם, הם נאספים על ידי ממשק הרשת, מוכן לשליחה לרמה הבאה. במקרה זה, ה-proxy. פרוקסי משמש חברות רבות כסוג של איש באמצע כדי להפחית את העומס על חיבור לאינטרנט ומטעמי ביטחון, גם כן. כפי שניתן לראות, המנות הן כל גדלים שונים בהתאם את התוכן שלהם. פרוקסי פותח את החבילה ומחפש את כתובת האינטרנט או את כתובת אתר. תלויה אם הכתובה מקובלת, המנה נשלחת לאינטרנט. יש, עם זאת, חלק מכתובות שאינם עומדים באישור פרוקסי. כלומר, הנחיות ארגוניות או ניהול. אלה עסקו בשיפוט המהיר. יהיה לנו שום דבר כזה. למי שעושה את זה, זה על הכביש שוב. 

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

בהתאם לנקודת המבט שלך כחבילת נתונים, חומת האש יכולה להיות מעוז של ביטחון או יריב אימתני. הכל תלוי באיזה צד אתה נמצא ומה הכוונות שלך. חומת האש נועדה לאפשר רק במנות אלה העומדים בקריטריונים שלה. חומת אש זו פועלת ביציאות 80 ו 25. כל ניסיונות הזנה דרך יציאות אחרות סגורים לעסקים. יציאה 25 משמשת למנות אלקטרוניות, בזמן יציאה 80 היא הכניסה למנות מהאינטרנט לשרת האינטרנט. בתוך חומת האש, מנות מוקרנות באופן יסודי יותר. מנות מסוימות להפוך אותו בקלות במכס, בעוד שאחרים נראים קצת מפוקפקים. כעת, קצין חומת האש לא מצליח לשטות בקלות, כגון כאשר פינג זה של מנות מוות מנסה להסוות את עצמו כמנת פינג נורמלית. [קצין חומת אש מדבר מנות] [קריין] למנות מזל מספיק כדי לעשות את זה כל כך רחוק ההם, המסע כמעט נגמר. זה רק קו על הממשק להיות נלקח לשרת האינטרנט. כיום, שרת אינטרנט יכול לרוץ על הרבה דברים, ממיינפריים למצלמת אינטרנט למחשב על השולחן שלך. למה לא המקרר שלך? עם ההתקנה הנכונה, אתה יכול לברר אם יש לך את המצרכים לCacciatore עוף, או אם יש לך ללכת לקניות. זכור, זה השחר של הרשת. כמעט כל דבר אפשרי. אחד אחד, את המנות קבלה, פתח, ופרק. המידע שהם מכילים, כלומר, הבקשה לקבלת מידע, הוא נשלח ליישום בשרת האינטרנט. המנה עצמו ממוחזר, מוכן לשימוש נוסף, ומלא במידע המבוקש שלך, התייחס, ונשלח בדרכה חזרה אליך. חזור עבר חומת האש, נתבים, ועל דרך לאינטרנט. חזרה דרך חומת האש הארגונית שלך ועל הממשק שלך, מוכן לספק דפדפן האינטרנט שלך עם המידע שבקשת. כלומר, זה סרט. מרוצה ממאמציהם, ולבטוח בעולם הטוב יותר, מנות נתונינו הנאמנים לרכב את האושר אל השקיעה של יום נוסף, ידיעה מלאה הם שירתו את אדוניהם טובים. עכשיו, זה לא הסוף טוב? [מלאן] אוקיי, זה מספיק. ניראה אותך בשבוע הבא. [CS50.TV]