דוד י מלאן: בסדר. חזרנו. אז, המטרה של המפגש האחרון הזה הוא להציג מושגים עוד כמה אלא גם לתת לכולם הזדמנות סוג של למתוח את האצבעות ולמעשה לעשות משהו על הידיים קצת. המטרה היא לא להפוך כולנו לתוך מפתחי אינטרנט בכל אמצעים, אבל באמת רק כדי לתת לכם טעימה של כמה של המבנים הבסיסיים של מה נכנס תכנות אינטרנט וכיום האינטרנט פיתוח, כך הצד סטטי של things-- ללא היגיון, ללא תכנות שפה, רק תוכן סטטי. וזה ייתן לנו הזדמנות ממש לראות מה שרת אינטרנט הוא, ראה מהו קובץ HTML, לראות מה זה HTTP למעשה מזללה. אבל לפני שאנחנו מתחילים בשאלות, כל רטרוספקטיבי שאלות לגבי מיחשוב ענן או ביטחון או כל מה שביניהם? לא? בסדר, טוב, בואו לשם כך, רק למקרה בתהליך של שנרשם משהו לוקח כמה דקות. נצטרך לתת לו לעשות את זה ברקע. קדימה, אם זה היה אפשרי, כדי c9.io. כאן-- אתר זו זהו צד שלישי service-- פלטפורמה כשירות, אם אתה will-- כי הוא הולך להזמין אותך כדי להירשם לקבלת חשבון, וזה הולך לתת לכל אחד מכם חשבון בענן שנקרא על התשתית של מישהו אחר, חברה בשם Cloud9. אבל מה שיפה זו היא שהם נותנים לך קירוב של פיתוח בעולם האמיתי בפועל הסביבה, אם כי ב ענן בדפדפן אינטרנט, ואנחנו נשתמש במידע זה כדי למעשה להתנסות קצת היום. ואז קדימה ופשוט לניווט הדרך אל תהליך ההרשמה אם אתה יכול. אז אנחנו לקרות להשתמש בזה בכיתה אני מלמד על כל התלמידים שלנו, הן בקמפוס לסירוגין עכשיו, זה החליף מה היסטורי היו אחרת תוכנות להורדה. אז מה היית לקבל גישה הוא אחד מכונה ווירטואלי אלה, בעצם, שתיארתי קודם לכן. אז החברה הזו Cloud9 כנראה דמי שכירות מתוך party-- שלישי אכן במקרה זה, Google-- כולה חבורה של מכונות וירטואליות כי הם איכשהו גרזנים לתוך האשליה של שרתים בודדים יש שכל אחד מאיתנו שליטה מלאה על. זה לא מדויק למדי, בלשון כי הם מכונים וירטואליים, בכל זאת, כי מה Cloud9 משתמשת בפועל היא טכנולוגיה חדשה יותר במקצת קרא מכלה. ותנו לי לתפוס את התמונה הזאת הנה לצייר את התמונה הזאת. 

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

אז עם זה אמר, מה אתה כנראה רואה עכשיו מסך זה נראה קצת כמו זה. בסדר. ובדיוק קוראים מעלי אם לא. ואם ולכן-- אני אבוא אם לא. קדימה, לחץ כל כך גדול בתוספת כדי ליצור סביבת עבודה, ותראה מסך כזה. אתה יכול לקרוא את סביבת העבודה שם כל מה שאתה רוצה עכשיו. ובדיוק למעשה לפשטות, ללכת ו-- היטב, כמה מכם כבר יש סביבות עבודה. תקראו לזה מה שאתה want-- עסקים, הרווארד, יום חמישי, מה שאתה רוצה. אתה לא צריך תיאור. אתה יכול להשאיר אותו פרטים, אלא אם כן אתה כבר יש חבורה של סביבות עבודה. אם אתה נאלץ לעשות את זה לציבור, זה בסדר למטרות של היום. גם כאן, הוא אחד upsells. אתה מקבל סביבת עבודה פרטית אחד על ידי בְּרִירַת מֶחדָל. אבל אם אתה רוצה יותר, אתה צריך לשלם עבור יותר. אחרת, הם מכריחים אותך לפרסם את העבודה שלך. אבל זה בסדר, כי הם גם ביעד זה קהילות קוד פתוח כדי לעודד אנשים למעשה פעולה. 

והדבר האחרון זה חשוב, אם כי, היא, אחרי שאתה בוחר שם ואחרי שאתה בוחר פרטי או ציבורי, לחץ HTML5, הסמל הכתום הגדול שני משמאל, ו ולאחר מכן לחץ על צור סביבת עבודה. וזה יהיה כנראה לקחת דקה או שתיים, אבל אז אתה תהיה לכם גישה אל סביבה, ברגע שאתה לעשות את זה, זה נראה מזכיר מה שיש לי על המסך כאן עכשיו. אבל, שוב, זה עלול לקחת דקה או יותר כדי להגיע למסך זה אחרי שלחצת על יצירת סביבת עבודה. אבל רק דגל מעל אותי אם תרצה אותי להעיף מבט על כל דבר או לייעץ. בסדר. אז אני הולך רקע זה לעת עתה. התקשר מעלי אם אתה נראה יש לבעיות טכניות. אבל, שוב, זה עלול לקחת קצת בשביל זה לפתוח. ועכשיו בואו נלך קדימה ולדבר על מה זה בעצם אומר לעשות דף אינטרנט, מה זה HTML, ואיך כל זה עכשיו חיבורים כפי שאנו מתחילים למעשה להשתמש כמה הטכנולוגיה. אז מתברר שאני יכול ללכת על Mac הקטנה שלי כאן, לפתוח תוכנית פשוט שנקרא TextEdit, או על Windows שיכולתי משהו פתוח בשם Notepad.exe. ואני רק יכול לעשות פשוט משהו כמו זה- "שלום, עולם". ואז אני יכול לשמור את זה כמו hello.txt אז לא קסם שם. אין לזה שום קשר עם אינטרנט תכנות, מה לעשות עם HTML. רק יצירת קובץ טקסט פשוט. אבל מתברר כי רשת הדף הוא ממש בדיוק את זה. זהו טקסט המכיל קובץ טקסט פשוט כי תוכל להקליד על המקלדת שלך, אבל זה בדרך כלל אבל לא תמיד מסתיים לא .txt אבל .html או .htm. ואתה לא רק להקליד מילים בקובץ. אתה באמת צריך להשתמש דברים בשם תגיות או, באופן כללי יותר, משהו בשם שפת סימון. 

אז אני הולך מאוד להקליד במהירות ולאחר מכן להסביר את הדברים הבאים. אני הולך ראשון מסוג זה, אשר אומר, היי, דפדפן, הנה מגיע דף האינטרנט כתוב ב- HTML. וזה שני הדברים האלה יחד לומר, היי, הדפדפן, להלן אכן HTML. היי, דפדפן, הנה בא הראש או החלק העליון של הדף שלי. היי, דפדפן, בתוך החלק העליון של הדף שלי, לתת כותרת כלומר, "שלום, עוֹלָם." היי, דפדפן, לאחר שהראש שלי דף, הנה מגיע הגוף של הדף שלי. ו, היי, דפדפן, הגוף של שלי דף צריך גם לומר, "hello world". אז מה הם הפרטים הבולטים כאן? זה מה בדרך כלל קרא הצהרה מסוג doc, ובכנות, זה קצת קשה לשנן זה בהתחלה. אתה פשוט סוג של העתק הדבק אותו. זוהי הדרך הפורמלית לומר, היי, דפדפן, אני משתמש בגרסת HTML 5 אשר יצא מעט לאחרונה. זהו לחש קסום שחלק בני אדם עם תחושה ירודה של עיצוב החלטתי לשים בבית העליון של הקובץ. למרות שזה מסתוריות קטנה, זה כל זה means-- היי, דפדפן, כאן מגיע עם גרסה 5 של HTML. 

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

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

קהל: הכרטיסייה. 

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

אני הולך go-- אופס, תן לי לחזור לקובץ הטקסט שלי. אני הולך בחזרה שלי קובץ טקסט, ואני הולך כדי לשנות זאת ולומר "שלום, דיסני וורלד." להציל. ולחזור שלי דפדפן ולחץ רענן. ועכשיו, כמובן, זה אומר "דיסני וורלד". ואני הולך כדי להגדיל באופן מלאכותי רק אז זה יותר קל לראות. אז עכשיו, לצערי, אני די רוצה עם-- למעשה, שמהווה מרכיב Mac. אני רוצה ללחוץ על דיסני וורלד וללכת למקום כמו disney.com, אבל זה לא עובד. אז עיקרון בסיסי של האינטרנט הוא קישורים, קישורים ללכת למקום אחר. אז איך אני עושה את זה? ובכן, אני יכול רק לומר, "שלום, http://www.disney.com." שמור. לִטעוֹן מִחָדָשׁ. אבל זה גם לא ניתן ללחוץ. ומה נחמד כאן, למרות זו אינה תפקודית עדיין, הוא נראה כי דפדפן ממש רק עושה מה אני אומר את זה כדי לעשות. אז אם אני פשוט להקליד כתובת כמו זו, זה פשוט הולך להראות לי את כתובת האתר. אני צריך להשתמש בתגיות או סימון שפה בעצם אומרת הדפדפן לעשות אפילו יותר. אז אני הולך קדימה, למחוק את זה לרגע. ואני הולך להגיד, היי, דפדפן, להתחיל עוגנים כאן, קישור כביכול. ואת הפנית היתר, היעד של עוגן, צריך להיות כתובת האתר הזו. ושים לב הציטוטים שלי. יכולתי להשתמש בגרשיים בודדים, מדי, אבל אתה צריך להיות עקבי, והייתי בדרך כלל פשוט להשתמש במרכאות כפולות כדי לשמור את זה פשוט. שים לב אני הולך לסגור את התג. ואז הנה, אני מתכוון לומר, "דיסני וורלד". ועכשיו אני צריך קצת symmetry-- סוגר פתוח, / a, סגור סוגריים. 

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

אז אני הולך קדימה ושמור את הקובץ עכשיו. חזור אל הדפדפן הרענן שלי. וגם, וזהו, עכשיו יש לנו את ראשיתה של דף אינטרנט לגיטימי. סופר-פשוט, אבל אם אני לרחף מעל הודעה זה- בפינה התחתונה השמאלית, זה סופר-קטן. אבל אתה רואה www.disney.com. ואם אני לוחץ עליו, ואכן זה whisks אותי משם כדי disney.com. עכשיו, והדבר המעניין כאן הוא שזה לא best-- את כתובת האתר הסחירה ביותר, אבל זה בסדר, כי קובץ זה לא קיימים על World Wide Web. היא קיימת כקובץ מקומי ב כנראה המשתמשים שלי directory-- / jharvard-- לג'ון Harvard-- / שולחן העבודה. אבל יש לו כתובת אתר. זה קורה רק כדי להיות מקומי. למרבה הצער, אף אחד מכם יכול לבקר זה, כי אם אתה מקליד כתובת אתר זו, היית אומר הדפדפן שלך, לחפש hello.html קובץ בשם בכונן הקשיח. וגם, כמובן, אלא אם אתה בעל כבר הבא יחד באופן ידני, זה לא הולך להתקיים שם. 

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

אז אם היית אי פעם phished-- P-H-I-S-H-E-D-- עם אחד מאותם מיילים המזויפים מ כמו הבנק שלך PayPal, אתה כנראה הפצתו קישורים בתוך של הדוא"ל שאתה קורא כי אומר לך לחץ כאן כדי לעבור confirm הסיסמה שלך או לאשר את תאריך הלידה שלך או חברתי או משהו חברתי הנדסה לך לחשוף מֵידָע. ובכן, אני יכול סוג של לקחת היתרון של זה, לא? יכולתי לומר משהו כמו, www.paypal.com. ובמקום disney.com, אני יכול ללכת, כמו, badguy.com. לִטעוֹן מִחָדָשׁ. ואיך זה קל להוליך שולל, במיוחד לקורא שאינו טכני או לקרוא ברפרוף הקורא מאשר ללחוץ קישור כזה, אשר אם אני לוחץ it-- אני ממש לא רוצה ללכת badguy.com. אני לא יודע מה שבאמת נמצא שם. אז paypal.com, הודעה מוקדמת, היא מה זה אומר שזה הולך, אבל כמובן, אם אני מסתכל למטה סופר-נמוך, שזה קצת מטושטש, אבל זה אומר badguy.com. זה אומר רק עכשיו כי אני הולך למקום הלא נכון. וכשאני אמרתי מוקדם יותר כי בנקים באמת לא צריך לעודד או לאמן משתמש לקישורי לחיצה, זה הוא רק ביטוי אחד של זה. וזה כל כך פשוט. כעת אתה יריב אם אתה עושה משהו כזה ולנסות לתמרן את המשתמש אל הביקור באתר שלך. אבל לעת עתה, נשמור דברים יפים ונקיים. אנחנו הולכים קדימה אחורה שינויים אלה. טען מחדש את הדף. ואני לחזור disney.com. 

בוא נראה אם ​​אנחנו לא יכולים להקניט מלבד זה קצת יותר. אז "שלום, דיסני וורלד." אני הולך לומר כאן למטה. אולי אני הולך לעשות קצת מקום. "אנו מקווים שאתה נהנה להישאר שלך!" להציל. לִטעוֹן מִחָדָשׁ. זה לא rea-- זה לא מה שהתכוונתי, נכון? זאת אומרת, אם אני בטיפול הטקסט שלי להגיש כמו מעבד תמלילים, מה אתה מקווה שקורה כאן? כן, אני מרגישה כאילו יש צריך להיות מעבר שורה כאן, כך זה מרגיש מרכבה בדרך כלשהי. אבל זה בעצם מכוון, כי בדיוק כמו קודם, את הדפדפן רק הולך לעשות מה שאתה אומר את זה כדי לעשות. לא ספרתי את זה כדי לשבור קווים. אני כבר לא ספרתי לו לנוע למטה, אפילו אם כי, באופן אינטואיטיבי, אני מרגיש כמו שאני עשיתי. אז מתברר שאנחנו צריכים סימון קצת יותר, ואני הולך לתקן את זה כדלקמן. אני הולך בהקדמה זו הראשונה שלום עם מה שנקרא תג פסקה. ואז אני הולך קדימה ולעטוף את המשפט הזה אחר אחר תג פסקה, למרות הם פסקאות סופר-קצר. עכשיו אני הולך להציל. לִטעוֹן מִחָדָשׁ. ועכשיו יש לנו כי מרחב, ואנחנו פחות או יותר יש את הסמנטיקה של כשתי פסקאות. 

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

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

באמת, כשהייתי סטודנט שנה לפני שנים ולמד HTML, אחד הוראת המתמטיקה שלי עוזרים פשוט בילו קצת זמן להשכיל אותי עבור כמו חצי שעה, שעה, ואז הייתי בדרכי. הייתי בדרכי לקראת קבלה האתרים המחרידים ביותר אי פעם, אשר, ככל הנראה, אין לי באמת התקדם מעבר. אבל הנקודה היא, ברגע שאתה להבין ideas-- אלה פשוט אם מסתוריות text-- אבל אלה פשוט רעיונות של החל מחשבה וסגירת מחשבה, שמירה הכל מאוזנים יפה, מחפש משהו, שינוי התנהגות של התג, זה באמת כל מה מה שיש לי להגיד. ואכן, אם אנחנו עכשיו ללכת משהו כמו google.com-- למעשה, בואו נלך למקום קצת יותר reasonable-- stanford.edu. ואני הולך לך לתצוגה, Developer, צג מקור. זה מכוער, אבל notice-- ואני זום בהודעה כמה דברים זה כבר מכיר. יש את זה כאן, אשר הוא דפדפן. הנה בא HTML5. יש HTML. ככל הנראה, קיים מייחסים שעשיתי לא להשתמש המציין את שפה של הדף, וזה יכול לעזור עם אוטומטי תרגום ודברים כאלה. הנה ראש הדף. הנה הכותרת של הדף של סטנפורד. יש תג עשיתי לא מדברים על תג yet-- Meta. זה פשוט סוג של מידע רקע. זה עוזר עם קידום אתרים, או אופטימיזציה למנועי חיפוש, או תוצאות החיפוש של Google או משהו דומה. אבל אם נשמור מחפש, לשמור מחפש, הנה תג הגוף. ויש צרורות של אחרים תגי שמנו לא דיברו על עדיין. אבל דיב הוא אחד עבור חלוקת הדף. זה כמו מלבן בלתי נראה אם אתה סוג של רוצה נפשי לחלק את הדף שלך לתוך יחידות שונות באינטרנט. ולעומת זאת המון divs לי לראות, משהו שנקרא ייצוגיות, אבל נחזור לזה. 

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

קהל: תיבת חיפוש. 

דוד י מלאן: כן. אז עד בפינה הימנית העליונה הנה תיבת חיפוש זו. וככה הם יישמו it-- תג זה ממש טופס פתוח תומך. ואז בואו לחפש משהו. בואו לחפש חבר של "ניק Parlante." mine-- להיכנס. וכמובן, זה הלך כתובת שונה במקצת. תן לי לחזור לכאן. בואו לחפש "קורסים". לעזאזל. הלכתי לכתובת אתר אחר. אז, סטנפורד של הוספת כמה קסם כי הם לא לוקחים אותי אל URL כי שראינו פעולה מייחסים שם. אבל בטופס זה כאן מיושם גרידא בדרך של סימון זה כאן, תגים אלה. למעשה, הנה קלט עבור את סוג החיפוש הרצוי. הנה הקלט עבור סוג אחר של חיפוש. הנה קלט עבור המחרוזת עצמה. וכך המטרה היא לא לעטוף במוחנו סביב כל התגים האלה אבל רק כדי לראות. זה פשוט פותח וסוגר תגים ודברים להרים. כֵּן? ויקטוריה? 

קהל: [לא ברור] דוד י מלאן: זאת שאלה טובה. זה קצת יותר מסובך לראות. תן לי לחזור לזה השאלה רק כמה דקות כשאנחנו מסתכלים על משהו שנקרא CSS, או גיליונות סגנון מדורגים, ואנחנו יכולים לנסות להסיק כמו הרבה מהעמוד בו. אז אם אנחנו עכשיו נסתכל google.com, בואו לראות מה הדף שלהם נראה. היית they're-- זה חמוד היום. בסדר. הכל גמור. בסדר, אז צג המקור. אפשר היה לחשוב לגוגל קוד מקור ממש נחמד. אז, ככל הנראה, מה קורה כאן? ולמעשה, זה אפילו לא HTML. זהו משהו שנקרא JavaScript. ובואו להמשיך וללכת. אני אפילו לא יודע איפה הדף מתחיל. אני הולך להשתמש פיקוד F, HTML הסוגר פתוח. בסדר, זה מה שיש. מצאתי את תחילת הדף ולאחר יש כל כך הרבה דברים כאן. 

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

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

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

קהל: [לא ברור] 

דוד י מלאן: מהר? למה? ומה אמרת, לידיה? מהיר יותר? מדוע מהר? קהל: [לא ברור] דוד י מלאן: יש אין מקום לקרוא. כֵּן. אז תחשוב על איזה מקום הוא. אז כל תו במקלדת לוקח מידה מסוימת של מרחב לייצג, בין באופן פיזי, כמו זה תופס כל כך הרבה שטח, או איכשהו מתחת מכסה מנוע, הדורש זיכרון. ובתור aside-- ואנו נדבר עוד על tomorrow-- זה כל תו במקלדת בדרך כלל דורש 8 סיביות, או בית אחד. אז דפוס של 8 אפסים או אלה, או סתם 1 byte, כפי שאנו בני אדם בדרך כלל היה אומר. אז זה קטן, אבל זה עדיין אפס שאינם. זה עדיין מידה מסוימת של מרחב. אז אם מהנדס או בגוגל על מקש הרווח פעם אחת בלבד, ונניח Google-- היא סופר-popular-- נניח ממיליארד בני אדם לבקר בדף הבית שלהם ביום, או למספר אנשים בקר בדף הבית מיליארדים פעמים ביום, כמה בתים נוספים יש כי מהנדס תוכנה רק לעלות Google על ידי להכות הבר שלו או שטח אותה פעם? 

קהל: [לא ברור] דוד י מלאן: לא בדיוק כך רע. רק אחד פעמים בייט מיליארדים. אז לזה-- הקהל: 8 מיליארד ג'יגה-בייט. דוד י מלאן: לא -8 מיליארד. 8 מיליארד בייטים. אבל 1 ג'יגה. ג'יגה 1 יהיה יחידת המידה. אם הוא או היא עושה שני מרחבים, 2 ג'יגה-בייט. שלושה גיגהבייט. ימין? לו קשקשים ביוקר. וכך במקרים כמו גוגל, אשר, כמובן מאליו, הם במקרים קיצוניים, ישנם נושאים אחרים שעולים רק על ידי קבלת החלטות סבירות מאוד או ביצוע פעולות אדם פשוט מאוד, כי יש לו שפעה מוגדלת. אז אחת הסיבות זה נראה כל כך דחוס בדיוק כמו ויקטוריה said-- זה היה רק שנוצר על ידי מחשבים בכל מקרה. אז זה לא עניין גדול. תנו הדפדפן להבין את זה. אבל זה גם בכוונה אין הרבה מקום, כי החלל אינו הכרחי. ואת השטח בעצם עולה כסף. 

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

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

ובכן, בואו להציג כמה רעיונות אחרים עכשיו. אנחנו עומדים להציג משהו שנקרא תג בסגנון. אנחנו יכולים לסגנן בדף זה בדרכים מעניינות יותר. אז בעוד הדוא"ל HTML הכל על מציין למעלה הנתונים, מעין ציון על הדפדפן כיצד להבנות את הנתונים, איפה לשים את זה, CSS, או גיליונות סגנון מדורג, היא שפה שנייה כי בדרך כלל מקבל מעורבב עם HTML כפי שאנו שתראה-- אבל אנחנו יכולים לנקות כי up in a moment-- שלוקח זה כשאת הקילומטר האחרון, וזה stylizes זה. הוא מקבל את הצבעים בדיוק כמו שצריך, הגופן גדל בדיוק כמו שצריך, המיצוב בדיוק כמו שצריך. זה הכול עניין של אסתטיקה או עיצוב, לא על עצמו את הנתונים הבסיסיים. והדרך הקלה ביותר כדי להראות זה אולי על ידי דוגמא. אז אני הולך לעבור על לקובץ הטקסט הפשוט שלי. ובכל רגע, אני יהיה ללוות אותנו בתהליך לעשות זאת בעצמנו. 

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

ואתה יכול לנחש. מה זה כנראה הולך אפילו לעשות אם אף פעם לא HTML או CSS ראיתי לפני? קהל: לשנות את צבע הרקע. דוד י מלאן: כן, לשנות את צבע הרקע. ובמיוחד צבע הרקע של הגוף. אבל ככל גוף לעת עתה הוא האינטרנט page-- זה הדבר היחיד מתחת באמת-- בשורת הכותרת זה כנראה הולך להשפיע על אותו הדבר. אז בואו נראה. בואו נשמור את זה. עבור כאן וטען מחדש. זה די מחריד. ומה קורה כאן היא תופעת לוואי. אני פשוט בוחר את התמונה באופן אקראי. למה הוא ירוק לא מחלחל מאחורי מיקי? קהל: [לא ברור] דוד י מלאן: בדיוק. מתברר תמונות, די הרבה כל התמונות שבהן אנחנו יכולים להשתמש, הם כל rectangles-- של מלבנים. גם אם מיקי יש כמה עיקולים לעצמו ויש לו רקע, הרקע חייב להיות משהו. זה חייב להיות לבן. זה חייב להיות שחור או משהו אחר. זה יכול להיות שקוף. ואכן, שיכולתי לפתוח מיקי מאוס כאן ב תוכנית בשם Photoshop או משהו דומה ולשנות את כל זה לבן רקע שקוף, כך ירוק ישתקף מבעד. אבל זה משהו שהייתי צריך לשאול את עצמי או גרפיקאי או מעצב שלי חברה, למשל, לעשות, במיוחד מאז אני רק לווה אחד זה מהאינטרנט. אבל זאת הסיבה שזה קורה. 

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

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

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

אז מה אנחנו רואים בסביבה זו? אני הולך כדי להתרחק, כי זה קצת קטן. ותנו לי להצביע על כאן רק לרגע. בצד שמאל של שלי שלך המסך, יש דפדפן קבצים בצד שמאל. אז דומות ברוחן ל- Mac OS ו- Windows. כל אלה הם של קבצים בחשבון שלי. ו כברירת מחדל, אם שלך החשבון הוא כמו שלי, תראה או לראות בקרוב helloworld.html ו readme.md. כאן מימין, זהו איפה קבצי הטקסט שלי הולכים ללכת. אם השתמשת אי פעם מיקרוסופט Word או פנקס רשימות או TextEdit, זוהי מילת העריכה שלי של קבצים הוא הולך. ואז המסתוריות ביותר תכונה של סביבה זו כי אנחנו באמת לא צריכים להשתמש הוא כאן למטה שנקרא חלון Terminal. אם השתמשת DOS מהכתובת פעם, זהו לינוקס או שווה ערך לינוקס של DOS. זהו interface-- מבוסס טקסט אין לחיצות עכבר, לא גרירה. כל מה שאתה יכול לעשות הוא להקליד פקודות, אבל פקודות אלה ניתן ליצור קבצים, להעביר קבצים, פתוח ספריות, ספריות קרובות, לעשות כל מיני דברים. אבל לעת עתה, אנחנו פשוט מבלים את זמננו כאן. 

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

אז בקיצור, להפוך את דף האינטרנט הראשון שלך, לשמור אותו, ולאחר מכן בעוד רגע, אני אראה לך איך אתה באמת יכול להציג את זה. אבל לשנות לפחות דבר אחד. שנת HelloWorld כדי משהו של הבחירה שלכם, כך אתה משוכנע שזה שלך להגיש ולא אחת אני פשוט נוצרתי. בסדר. וכאשר אתה ready-- לא rush-- כשתהיה מוכן, קדימה, לשמור את הקובץ פעם שתבצע שינויים אלה. ואם אתה לוחץ על העליון לכפתר לרוץ, זה צריך לפתוח כרטיסייה חדשה כי תגיד לך מה כתובת האתר שאתה יכול לבקר את הקובץ ב, אבל זה עלול לקחת רגע כדי במירכאות, "להתחיל Apache," אשר השם הוא של שרת האינטרנט. אז להיזהר לעשות בדיוק מה בקובץ בסופו של דבר. אז עכשיו, אני להתקרב. אם אני אתחיל הקלדה פתוח סוגרת HTML, הודעה זה מה שגרם לי לסיים המחשבה שלי. ואם אני סיימתי את המחשבה שלי, זה באופן אוטומטי נותן לי את תג הסגירה. אבל הציפייה היא אז אני אכה זן ולאחר מכן זז בפנים ואל הראש פנימה אז אני עושה את הגוף מבפנים. וזה קצת מוזר בהתחלה, כי זה עושה את העבודה בשבילך, אבל מבין כי בסופו של דבר זה חוסך לך הקשות. ואכן, מאפיין נפוץ מאוד של תכנות סביבות בימים אלה הן בפיתוח אינטרנט כמו זה ותכנות בפועל, אשר נדברנו על מחר, הוא תכונות ההשלמה האוטומטית אלה, דברים פשוט לאפשר מתכנת או מעצב להקליד פחות קשה להשיג את אותו הדבר. לפעמים זה טוב, אם כי. לפעמים זה פשוט מעצבן. וגם, שוב, ברגע שאתה כבר עבדת השקופית או ואריאציה שלה, אתה יכול ללחוץ על כפתור ההפעלה למעלה. ואז בתחתית חלון, אתה תהיה הודעת ובאיזה URL אתה יכול לבקר בדף האינטרנט שלך. שלי, למשל, הוא business-daharvard.c9users.io וכן הלאה. בסדר, אז, בואו לי-- שאלות? עוד שאלות על פשוט מקבל זה עובד לפני שאנחנו להוסיף תכונות? ותנו לי להציע, רק להשיג אנשים comfortable-- כי זה דבר אחד פשוט קופי-פייסט בעיוורון מה שעשיתי. אבל רק כך אנשים להתאבק עם לפחות אחת המטלות, אני הולך להפעיל קצת מוסיקה. אני הולך להציע רשימה של דברים שאתה יכול להוסיף פוטנציאל. ואתה בהחלט יכול להשתמש ב- Google. ולמה אנחנו לא פשוט מציע שתנסה לפתור לפחות בעיה אחת מסוימת כאן. אז מבחינת תגים, תן לי לעשות שימוש חוזר זה כאן. 

למעשה, אני אנסח אותה בצורה טקסטואלית. נניח כי בין התגים נוכל להשתמש הנה כמה תגים לכאן. ראינו את תג פסקה. עכשיו זה הולך השלמה אוטומטית. תג פסקה, תג העוגן. נניח שאתה רוצה לעשות משהו גדול יותר, לכן ייתכן בהדגשה כמו שתג span יכול לעזור. ובכן, ייתכן שיהיה עליך קצת עזרה בשביל זה בדיוק רגע. ראינו div. תראה יש שולחן. יש משהו שנקרא tr, td. Th, td. אחזור לזה בעוד רגע. מה עוד יכול להיות שימושי? יש חזק. יש דגש, או ליתר דיוק em. שיש-- מה עוד אולי מתחשק לכם כאן? ובכן, ניקח תראו מה זה יחד. טופס, אשר שראינו. יש טופס. יש קלט ועוד כמה אנשים. בסדר, אז בואו נעשה את זה. למען ויקטוריה שאלה, תן לי קודם רק לוודא שכולם מסוגל לקבל עבודת השלום שלהם. אז הרשה לי להציג את כמה רעיונות אחרים. ואז נודיע אנשים לפתור קצת בעיה בכוחות עצמם. אז אנחנו ממש רואים נחזור לזה רעיון של צורה, ו אנחנו בעצם מחדש ליישם יחד ממשק החזיתי, כביכול, עבור גוגל עצמה. נשתמש Google כמו סוף חזרה ולתת אותם לעשות את העבודה הקשה, את החיפוש, אבל נצטרך לשחזר את הקצה הקדמי של Google ואת טופס חיפוש כי יש להם בדף הבית שלהם. וכך נבוא חזרה תגים אלה בעוד רגע. 

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

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

אז אם אני נכנסתי כאן, אני הולך בעצם מציעים כי אנו מחליפים את תג בסגנון עם משהו נקרא תג הקישור, אשר נקרא להחריד, להחריד, כי אתה לא להשתמש תג קישור כדי ליצור את מה בני אדם שאנו מכירים כחוליה דף אינטרנט. בשביל זה, אתה משתמש בו תג? איך אתה יוצר קישור בדף אינטרנט? קהל: א. דוד י מלאן: א, או עוגן תג, כי הלך דיסני לפני. תג הקישור כאן הוא אומר זה- קישור לקובץ שנקרא styles.css, הקשר שאליו הולך להיות שזה stylesheet שלי. אז זהו אחד S של ב גיליונות סגנון מדורגים CSS--. סגנון sheet-- שני של S של ב- CSS. מדורג גיליון סגנונות. זה רק אומר, היי, דפדפן, ללכת למצוא styles.css בשרת המקומי ולהשתמש בו בתור הסגנונות, כלומר בתוך של אותו קובץ הולך להיות כל stylizations כי רק שעשינו. אז מה זה קובץ עשוי להיראות היא זו. ואני פשוט אעשה את זה הוא מהיר למשל, כי אנחנו לא צריכים מדי כדי לקבל הרבה לתוך העשבים כאן. אבל אם אני מעתיק זה, מה שאני מציע הוא מתכנת ליצור קובץ חדש, להדביק באותם lines-- whoops-- להדביק את השורות הללו, ולשמור אותו בתור styles.css, ולאחר מכן, לקובץ השני, למחוק את כל זה ולהחליף אותו במקום עם תג הקישור הזה. אז אם אקשר href = "styles.css", הקשר יהיה "stylesheet" תג סגירה. שמור את זה. אחזור HelloWorld שלי. לִטעוֹן מִחָדָשׁ. 

פשוטו כמשמעו דבר לא קרה. זה דבר טוב, כי זה כלומר, זה בעצם כל העבודה. כדי להוכיח זאת, נניח אני עושה טעות דפוס, ואני קורא לזה "styles.css" עם S גדול, שהוא לא נכון, ולאחר מכן לטעון מחדש. עכשיו אתה יכול לראות את זה פשוט לא עובד. עכשיו, למה? ובכן, בואו להשתמש טכניקה מוקדם יותר. תן לי ללכת קדימה, ב הדפדפן שלי, ב- Chrome, אני הולך להיפתח כי מיוחד כרטיסיית רשת כמו קודם, ותן לי מחדש את הדף. מה אתה לא מופתע לראות עכשיו? או אולי אתה מופתע לראות אותו. כך או כך, מה אתה רואה עכשיו? קהל: [לא ברור] דוד י מלאן: הוא לא נמצא. למה זה לא נמצא? ובכן, הון Styles.css-- S-- אינו קיים. אני misnamed זה. טעות דפוס פשוטה. אבל אני די מובן עכשיו 404, מכיוון שהשרת אומר, היי, הוא לא נמצא. פשוטו כמשמעו, אני לא יודע איפה זה קובץ. אז כתוצאה מכך, הדפדפן מראה לך את מה שהיא יכולה, תוכן הגלם של הדף, אשר היה 200, HTML, אבל המסוגנן לא יכול יתווספו לאחריו. וזה מה פירוש מדורג. אתה יכול מעין להוסיפו לאחר, וזה סוג של משכלל את האסתטיקה של דף האינטרנט. ואתה יכול אפילו לעקוף אותם סגנונות עם קבצים stylesheet אחרים עדיין אם אתה רוצה. הוא לא נמצא, אם כי, במקרה זה, כי כמובן, אני misnamed זה. אז הייתי צריך לתקן את זה קודם. 

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

קהל: [לא ברור] 

דוד י מלאן: אישור, טקסט עמדה על צדדים שונים של הדף? בסדר. משהו אחר. 

קהל: [לא ברור] דוד י מלאן: זהו. אז gif הוא רק בתבנית קובץ שונה. אנחנו פשוט להשתמש, מה, png או jpg כנראה? השתמשנו jpg. אם אתה סקרן, גידול מופרז התשובה לשאלתך הוא jpg משמש בדרך כלל עבור צילומים, משום שהוא תומך מיליוני צבעים או צבע של 24 סיביות. קובץ GIF משמש בדרך כלל עבור, כמו, תופעת אינטרנט אנימציות days-- אלה, אנימציות GIF כמו. אבל זה קורה להשתמש בצבע קטן לוח, רק 256 צבעים אפשריים, אבל הוא תומך שקיפות ואנימציה. ואז יש png, התומך שקיפות וצבעים יותר אבל לא אנימציה. אז זה trade-off. אז הוספת gif, לעומת זאת, יהיה פונקציונלי שווה הוספת png או jpg. כֵּן. מקור תמונה שווה. אז משהו אחר. בואו לבוא עם משהו ששלחנו ויקטוריה לעשות כאן. 

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

[מוסיקה מתנגנת] בסדר. אל דאגה, אם אתה רוצה לשמור התעסקות, אבל אני אקלקל זוג תשובות אלה. אז את ההצעה הראשונה ויקטוריה הייתה כדי להפוך טקסט גדול יותר. אז יש כמה דרכים לעשות זאת. אני כבר שוחזר כרגע המסך שלי לגודל זה, למרות שאני כבר הגדלה באופן מלאכותי רק כדי לראות את הדברים. ובואו לעשות זאת. תן לי ללכת קדימה לתפוס טקסט גנרי לטיני רק אז יש לנו משהו לעבוד איתו. אז תן לי רק רגע אחד. אני אכין שלוש פסקאות. בסדר. זו תהיה דוגמה טובה יותר. אז עבור הסקרנים, ב hello.html שלי, אני פשוט הודבק שלוש שטותיים פסקאות הלטינית רק כך יש לנו כמה טקסט לעבוד עם. והמטרה של ויקטוריה הייתה להפוך חלק מהטקסט הגדול. אז יכולתי, כמו קודם, ללכת כאן. ותן לי לעשות את זה בדרך הנכונה. אני הולך לקבל קישור תג המצביע על קובץ בשם "styles.css," היחסים אחד מהם הוא שוב "stylesheet". ואז אני הולך להציל את ולפתוח "styles.css." זה 

אז, כמו קודם, יש לי את היכולת בקובץ CSS זה למעשה לעקוף את ברירת המחדל אסתטיקה של דף אינטרנט, ואת האסתטיקה מחדל, כמובן, הם די משעממים. זוהי מעין גודל גופן רגיל, שחור טקסט, רקע לבן, וכן הלאה. אז נניח שאני רוצה לעשות כל הטקסט הזה גדול. יכולתי לעשות כמה דברים. בקובץ styles.css שלי, אני אפשר לומר, אתה יודע מה, להחיל את הפעולות הבאות כדי הגוף של הדף שלי. קדימה ולהפוך את גודל גופן 24 נקודות, שהוא מספר אני עלול להשתמש ב- Microsoft Word. תן לי לחזור האינטרנט שלי דף כאן וטען מחדש, ואתה יכול לראות את זה זה כבר הרבה יותר גדול. ואנחנו יכולים לקבל קצת משוגעים, בדיוק כמו שאנחנו יכולים על desktop-- לעשות את זה 96 נקודות. לִטעוֹן מִחָדָשׁ. וזה מתחיל קצת מסורבל בנקודה זו. 

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

קהל: תג p? דוד י מלאן: תג P. אז הראש לא יהיה נכון, כי הראש, אתה לא ממש יכול לשלוט על האסתטיקה של. יש גם טקסט שם או לא. אבל p tag-- אני יכול לצלול קצת עמוק, אם אפשר לומר כך, על ההפסקה תגיות. ואף על פי שיש שלוש, וזה בסדר גמור, כי ב- CSS, כשאני רק להגיד "עמ '," זה פירושו להחיל את הבאים לכל תג תואם זה בורר, בורר רק להיות השם של התג. אז בכל פעם שאתה רואה "P" להחיל את גודל הגופן, ובואו לעשות את זה יותר נקודה סבירה 24 again--. ואתם יודעים מה, רק למען הסדר הטוב, בוא נעשה את הצבע רק אדום לרגע. ועכשיו אם אני מחדש, ועכשיו אנחנו לראות שלוש פסקאות מכוערת. 

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

מה אני יכול לעשות עכשיו ב- stylesheet שלי הוא להיות קצת יותר מדויק. במקום לומר, להחיל הבאים אל תג p, אני יכול לומר following-- להחיל את הבאה, או בחר, אלמנט HTML כי יש מזהה ייחודי של "הראשון." מה אני רוצה להחיל על זה? גודל גופן של 24 נקודות. אז יש לי שני בוררים עכשיו. אחת עושה את כל סעיפי נקודות 12. אבל זה אחד, בעיקר משום שהוא מגיע שהדבר-- מדובר האחרון file-- יש לכך השפעה מדורגת. אני פשוט עושה את כל שלי תגי פסקה נקודות 12, אבל עכשיו זה מפלים עוקף את כל אלמנטים בדף, כל תג בדף אשר מזהה ייחודי הוא סוף ציטוט ציטוט "הראשון." ואת hashtag בהקשר זה רק אומר "מזהה ייחודי." אני לא לשים את זה בקובץ HTML. אני, כאן, רק אומר ציטוט סוף ציטוט "הראשון." 

אז תנו לי מחדש. ועכשיו אני רואה, אה, אוקיי. אני מתכוון, זה לא כל כך יפה, אבל זה סוג של כמו בהקדמה ספר או משהו כזה, שם בפסקה הראשון הוא גדול. יכול להיות אפילו יותר מדויק עם רק את האותיות הראשונות, אבל לפחות אני כבר ממשתי יותר שליטה. עכשיו maybe-- אולי אני רוצה לעשות את זה מדי פעם מסיבה כלשהי, ולכן אני לא רוצה את זה כדי חלות רק תג HTML אחד. במקום זאת, בואו say-- בואו גם לבצע את הפעולות הבאות. Class = "יבוא." בעוד מזהה משמש באופן ייחודי לזהות דבר אחד, תג אחד, בדף האינטרנט שלך, נועדה בכיתה להיות בשימוש על כל מספר של אלמנטים או תגים בדף האינטרנט שלך. אז זה לשימוש חוזר. מזהה אינו לשימוש חוזר. כיתה היא לשימוש חוזרת. 

ואתם יודעים מה, מסיבה reasons-- פילוסופים לא סיימתי את שלי thought-- אני הולך להגיד כי הפיסקה הראשונה ואת בפסק השנייה חשובה. אז אני הולך ליישם את המעמד שנקרא "חשוב", כי, אם אני שומר קובץ שלי וטען מחדש, אין השפעה תפקודית עדיין. אבל הוספתי קצת metadata לקובץ, פרוש משהו נפרד מנתוני הליבה של הקובץ, כך שכעת בגיליון הסגנונות שלי, אם אני במקום לומר ".important" - אתה יודע, דבר זה חשוב, אני יהפכו את צבע הגופן, red-- או ליתר דיוק לא font-צבע, רק צבע. יש חוסר עקביות לצערי ב- CSS. וטען מחדש. עכשיו שם לב הראשון שתי פסקאות אדומות אבל לא את השלישי, כי אני רק להחיל את המעמד של "חשוב" אל שני הדברים האלה הראשונים. 

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

אז בתשובה לשאלה של ויקטוריה, אנחנו יכולים להפוך את הטקסט גדול יותר ככה. יש כל כך הרבה דרכים אחרות, אבל הגופן tag-- סוגר פתוח "גופן" - הוא בעצם ישן כמה שנים. וזו בעיה, גם עם להסתמך רק על resources-- באינטרנט הם נוטים להיות מיושנים. ואכן, שהוצא משימוש, משום שהעולם הבין, מה המשמעות של "font-size = 7" אומר? זה לא. וכך במשך שנים רבות וכדי זה day-- אחד של הצד מציין כאן הוא שזה בעצם מאוד כואב עדיין לפעמים לפתח אתרים עבור אינטרנט, כי מיקרוסופט ו- Google ו- Mozilla ו אחרים לעתים קרובות אינם מסכימים באשר לאופן לפרש מפרט כמו HTML. 

יש ספר חוקים עבור ה- HTML בדרך כלל אומר מה כל תג אומר. אבל לפעמים זה מה שנשאר אל שיקול דעתו של היישום, השיקול ו- Google של מיקרוסופט. וכך תמצאו לעתים קרובות מאוד ראו על משהו באתר נראה אחר במחשב מאשר במקינטוש, וזה באמת בגלל, בסופו של היום, הם לא לבדוק את זה גם על שתי הפלטפורמות. אבל זה גם בגלל סביר, אנשים חכמים לא יסכימו וחברות לא יסכימו, וכן הלאה אחד האתגרים של תכנות עבור האינטרנט או בעיצוב דברים עבור האינטרנט כותב באתר שלך בצורה שעובד על כל דפדפן אינטרנט. אבל אפילו זה לא הגיוני, נכון? יש כל כך הרבה גרסאות של כל כך הרבה דפדפנים בחוץ כי, בשלב כלשהו, יש לך גם לבצע שיחת שיפוט ואתה צריך להחליט כחברה, במיוחד עבור מסחר אלקטרוני בסגנון אתרים שבהם אתה מנסה להשתמש חדיש וטוב ביותר טכנולוגיות לתת משתמש ממש טוב ניסיון. אבל כמה אחוז המשתמשים שלך אולי עדיין להיות משתמש ב- Internet Explorer 6 או 7 או 8, במיוחד תלוי מדינה שהם מגיעים. 

וכך מאוד נפוץ התייעץ משהו כמו "סטטיסטיקת דפדפן האינטרנט." ואם נלך עם-- בוא נראה ויקיפדיה ולראות איך עַדכָּנִי תרשים זה אם יש אחד. אז הנה אתה יכול לראות שם דפדפנים למעשה הם, על פי עד דצמבר 2015, על פי ממשלת ארה"ב. Chrome הוא עם נתח שוק של 42%, ואחריו על ידי IE בעיקר בהגדרות חברות או הגדרות במחשב, כמובן, ואחריו Firefox, אז Safari ולאחר מכן האופרה לא להפוך את המפה כאן מסיבה כלשהי, ואז אחרים. אולי זה תחת אחרים. אבל יותר בעייתי מזה הוא-- בוא נראה אם ​​ויקיפדיה יש גם הגירסאות של הדפדפנים version-- 

בואו נלך סטטיסטיקת דפדפן. כְּלוֹמַר. גם זה לא מספיק. סטטיסטיקה דפדפנים. הגירסה שלי. זה לא הולך להיות צודק. בואו לראות גרסאות. נתח השוק של הדפדפן. בוא נראה אם ​​זה עולה. בסדר. עכשיו זה הוא מקבל קצת יותר שימושי. אז הנה, שם לב כי יש לנו את כל גרסאות של דפדפנים שונים. וגם, אלוהים, אם אתה תראה-- Chrome 48, 47 Chrome, 31 Chrome, Chrome 45. אני מתכוון, דפדפנים מעודכנים יותר ויותר, ולפעמים כמה מאותם שינויים הם משמעותיים מבחינה פונקציונלית. וכך בשלב מסוים, את מנהלי מוצר או מהנדסים צריך לעשות decision-- לך יודע מה, רק 1% של העולם עדיין משתמש ב- IE 7. לעזאזל איתם. אנחנו פשוט לא הולכים תומך בדפדפן זה. ומה זה אומר שלא לתמוך? אולי זה אומר כפתורים לא עובד על דף האינטרנט שלך, או שהוא עשוי מתכוון עיצוב הוא לגמרי. או שאולי יש לך לעשות באותה שיחה שיפוט בימים אלה ניידים, שם, אנחנו לא הולך לתמוך IOS 5 יותר. אז אנשים פשוט צריכים לשדרג. או שאנחנו לא הולכים לתמוך Cupcake על מערכת ההפעלה אנדרואיד עבור מכשירי אנדרואיד, כי כמו בעולם-- כמו עולם טק רוצה להתקדם, זה סוג של רוצה לגרור את בעולם עם זה, כך שהם לא צריך להמשיך להיות תואם לאחור כדי שהם יכול להציע תכונות חדשות טובות. זוהי אכן אחת הסיבות למה כל כך הרבה חברות מושקות עדכונים אוטומטיים ולמיין לאלץ הגרסאות של התוכנה העדכנית ביותר עלינו. ואפילו חברות כמו אפל ימיין של להכריח אותך כמעט או להכריח אתה במונחים של כוחות השוק לקנות טלפון חדש כי הם פשוט לא עדכן הטלפון הישן שלך יותר. אז אתה להחמיץ את חדשני ותכונות גדולות, כי זה יקר להם בתור החברה לשמור על מבוגרים, שיש הטוענים גרסאות של תוכנה נחותה. אבל והתוצאה הסופית היא כי אנחנו גם בכך נוכינו. 

אז בואו נסתכל רק כמה דברים סופיים כאן. בואו לדפוק ממש מהר חלק אלה כדורים אחרים, אם סקרן. אז אם היית מנסה, למשל, עמדה הטקסט על צדדים שונים של דף, אני הולך לעשות דרך אחת מהירה, אבל יש שונה דרכים לעשות זאת. תן לי ללכת קדימה eliminate-- לפשט את זה כדלקמן. תן לי רק לחזור שלי פשוט, פסקאות פשוטות. תן לי לחזור styles.css שלי. ואני בדיוק הולך להשתמש פשוט-- שבו אתה יכול לראות ב- Google או זוכר מן earlier-- טקסט ליישור מימין. וטען מחדש דף זה. עכשיו הכל נראה להיות מיושר לימין, כפי שאתה עשוי לראות על תקורה כאן. 

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

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

ועכשיו notice-- למעשה, זוהי הזדמנות טובה לדון לרגע. שימו לב שברגע שאני type-- לעצור את זה. תפסיק. בסדר. שימו לב שברגע שאני להקליד את האות C, לצפות את החלק התחתון של המסך. A- טי ס מה עושה התחתון של מסך זה, כרטיסיית הרשת שלי, מציע קורה כל פעם שאני להקליד אות? למרבה הצער, את הצפרדע מאוד היום להסיח או תלתן או מי שזה לא יהיה. מה קורה בכל פעם הקלדתי? ותנו לי לנקות את חיץ להקליד אותה שוב. אופס ולכן--. בכל פעם שאני להקליד אות, C- A- T-- כך שורה חדשה ללא ספק שומרת להופיע. מה כל אחת משורות אלה מייצגים, על סמך מה שראינו ודנו עַד כֹּה? קהל: חיפוש? דוד י מלאן: חיפוש, או באופן כללי יותר, בקשת HTTP מהדפדפן שלי לשרת. ובכן, למה הוא הדפדפן שלי ביצוע HTTP לבקש בכל פעם שאני להקליד אות? 

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

עכשיו, בואו נסתכל מה בעצם יקרה אם אלחץ על Google חיפוש. ואז נצטרך למנף זאת לעצמנו. אז אם אני לגלול למטה עכשיו אל מאוד הבקשה הראשונה זה פשוט קרה. שים לב הבא. הוא נשלח ארוך למדי URL-- https://www.google.com/search? ואז כל מיני דברים כולו. בואו לראות את זה ממש עכשיו בלשונית הדפדפן עצמו. בואו להיפטר הכלים כאן. הנה הדף של תוצאות החיפוש. והודעה הנה את כתובת האתר. עכשיו, אתה יכול כנראה לנחש מה קורה כאן בחלקה. אז קודם כל, הגדרה. זה כנראה הוא היעד שם שהטופס נשלח. לכן, כאשר הקלדתי את המילים "חתולים" והקש Enter, כנראה ש- Google שלחה קלט הטקסט שלי אל כתובת האתר הזו כי הדגשתי שם, לוכסן החיפוש. מסתבר, ב- URL, כל דבר קורה אחרי סימן שאלה הוא, כפי שאנו חוזרים ואומרים, זוג מפתחות-ערך שהוקלד לתוך טופס או איכשהו המועבר מן דפדפן לשרת. 

אז כל פעם שאתה מקליד קלט לצורה באינטרנט וזה נשלח כפי שכבר דן, באמצעות גט, אחד מאלה וירטואליים מעטפות, את התוכן זה envelope-- כן, לשמור מקבל ממולאים פיסיים למעטפה בכיתה היום, אבל מבחינה טכנולוגית זה בעצם להכניס את כתובת האתר. אז למעשה, תן לי לנפות זה. איפה אתה רואה את קלט משתמש? איפה אתה רואה משהו שאני עצמי הדפסתי כאן? כן, אז "חתולים". ימין? אז תנו לי לזקק זה למשהו פשוט יותר. אני הולך למחוק כל מה שקשור כתובת האתר הזה כי אני לא מבין, ואני רק הולך לעזוב זה כמו זה- / לחפש? q = חתולים. נצטרך לראות כאשר q מגיע רגע, אבל זה מרגיש כמו מינימום כמות המידע שסיפקתי. ועכשיו אני הולך על Enter. ושימו לב זה עדיין עובד. אנחנו עדיין מקבלים בחזרה חבורה של חתולים כולו. אז גוגל הוא להשתכלל מזה בימים אלה. זה 2016, לא 1999. אז יש דברים אחרים, כי שלי הדפדפן שולח לשרת. אבל זו היא מינימלית כל מה שנחוץ. 

אז מה קורה? ובכן, קודם תן לי להמשיך וללכת חזרה Cloud9 ותן לי ללכת קדימה ולסגור הכרטיסיות שלי קודם לכן. ואני אעשה את זה על שלי הבעלים רק לרגע. אני הולך קדימה וליצור קובץ חדש. ואני הולך לשמור אותו כ google.html. ואני הולך מאוד quickly-- אני הולך לגנוב, למעשה, שטקסטים זה רק כדי לחסוך זמן. אני הולך להדביק את זה לכאן. אני לא הולך לטרוח כל סגנון הפעם. אנחנו הולכים לקרוא לזה "Google שלי." ואני הולך להיפטר של כל הגוף. ואני הולך לעשות את הדברים הבאים. הרשו לי להתקרב. טופס action-- ובעודי בקצרה שהוזכרו earlier-- whoops-- כפי שאני בקצרה שהוזכר קודם לכן, הפעולה של טופס שבו אתה שולח את הנתונים. אז google.com/search. והשיטה אני רוצה להשתמש יכול להיות אחד משני דברים. זה יכול להיות או "לקבל", כפי שאנו לשמור דן, או שזה יכול להיות "פוסט". לעת עתה, את היסוד ההבדל הוא, אם אתה משתמש "לקבל" כל המידע כי משתמש מספק נשלח ב- URL. 

זה נהדר עבור דברים כמו חיפוש מנועים וכמה יישומים אחרים, אבל באילו נסיבות היו אתה לא רוצה למלא טופס ויש לי את המידע בסופו של דבר את כתובת האתר, כמו בשורת הכתובת של הדפדפן? איזה סוג של צורות לעשות שאתם-- קהל: [לא ברור] דוד י מלאן: כן, כמו מה? הקהל: סיסמאות. דוד י מלאן: כן, אז אתה נכנסת לפייסבוק או אתר כלשהו. זה קלט מהמשתמש צורה, תיבת טקסט, אבל אתה בטח לא רוצה שזה להופיע ב- URL של הדפדפן. למה? זאת אומרת, אולי יש כמה השלכות ביטחוניות ברשת, אבל יותר-- אוהב, יותר פשוט, מה אם השותפה שלך, אחרים משמעותיים שלך, הילדים שלך, בן הזוג שלך נראה לאורך ההיסטוריה בדפדפן שלך? יש נכון הסיסמה שלך יש בהיסטוריה של הדפדפן. זה לא מרגיש כמו עיצוב טוב. או אפילו יותר מבחינה טכנית, נניח שאתה מנסה כדי להעלות תמונה Flickr או פייסבוק או wherever-- כי הוא קלט משתמש, למרות זה קצת יותר interesting-- איך אני לדחוס תמונה בשורת כתובת האתר? אתה סוג של מעין לא יכול. אתה סוג של יכול. אבל, באמת, אני מתקשה כדי לדמיין את עצמי עושה את זה. אז אני צריך שיטה אחרת העלאת תמונות לאתר אינטרנט, וכי שיטה אחרת נקראת "פוסט". אבל לעת עתה, אנחנו רק נדבר על "לקבל", המהווה את פשוט של השניים. זה פשוט מעביר את כל משתמש קלט לתוך URL. 

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

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

קהל: Google. 

דוד י מלאן: Google. אז בואו לוחץ על שלח. ואכן ביצעתי מחדש מיושם Google. ימין? זה יותר פשוט. זה קל יותר. אני מתכוון, הקוד שלי הוא ברור יותר מאשר שלהם, מן הבלגן שראינו קודם. ואתם יודעים מה? אני הולך כדי לתבל את זה קצת. לא הזכרתי את זה קודם. ישנם תגים כמו H1, עבור כותרת 1, הכותרת החשובה ביותר בדף. "Google שלי," אני אתקשר זה. הרשו לי לטעון מחדש. זה נראה קצת יותר טוב כבר. וזה, בעצם, אתה יודע מה? לי already-- שיקרתי. אמרתי שאני לא הולך הסגנון הזה, אבל אני הולך הסגנון הזה כמו לפני. והגוף שלי הולך להיות, נניח, מרכז יישור טקסט. זה נראה יותר כמו גוגל כבר. 

אני צריך הפסקת קו, אם כי, בשביל זה כפתור שלח. ומתברר, אתה יכול להשתמש פסקאות, או שאתה יכול יותר, פשוטו כמשמעו, רק לומר, לתת לי קו הפסקת כאן-- תג br. ואם אני רענן, עכשיו זה הולך שם. זה קצת מכוער, אז אני יכול לעשות מעברי שורה מרובים, אבל בואו לא מקבל חמדן מדי כאן. אז עכשיו בוא נראה אם ​​זה עובד "כלבים". נראה שזה עובד עבור "כלבים", גם כן. אז מה takeaway משכנעת כאן? One-- לא היתה קפיצה ענקית להציג כמה תגים יותר, כמו תג הטופס בתג הקלט. אבל יותר מן היסוד הוא, כל מה שאנחנו עושים ממנף את הבנתנו של HTTP והעובדה שצורות בסופו של דבר לשנות מה יש את ה- URL של הדפדפן, וכך, אם כן, אנחנו יכולים לספק קלט מכאני לשרת על ידי ביצוע טופס HTML ולדעת שהשרת מבין HTTP, בדיוק כמו הגוף שלנו מבין, כמו, לוחץ לי את היד, פרוטוקול אותה, וכך אנחנו מקבלים בחזרה את התגובה כי אנחנו בסופו של דבר לצפות. 

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

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

הולכים לאותו URL על הטלפון שלך, אם אתה יכול. אם זה יעלה לך, אבל אתה יכול רק להסתכל מעבר לכתף. קהל: [לא ברור] דוד י מלאן: אני מצטער? קהל: [לא ברור] דוד י מלאן: רק מילים בלטינית. זה הכל. אבל זה מה שאתה צריך לראות. 

קהל: כן. דוד י מלאן: כן. כֵּן. בסדר. אז אני יכול להחזיק עד שלך טלפון לרגע? אז, אני מקווה, אם אתה מנסה להיכנס זה, זה צריך להיראות כמעט בלתי קריא. זה עדיין-- אני מתכוון, זה קריא בגלל הלטינית. אבל זה גם קריא מסיבה מה אחרת? כאילו, מה למורת רוחם לך על זה? קהל: הוא קטן. דוד י מלאן: זה סופר, סופר קטן. אז איך אפשר לתקן את זה? זה סופר, סופר קטן בטלפון של ויקטוריה ו, אם אתה כבר משכת אותו בעצמך, כנראה קטן בטלפון וכן, אלא אם כן אתה יש הגדרות נגישות מופעלות. מה זה? אתה יכול פשוט לצבוט הזום, הוא עביד, אבל אז אתה רואה רק כמה מילים בכל פעם. אז חכו רגע. אני יודע איך לתקן את זה. ימין? יכולתי להשתמש ב- CSS, ויכולתי לשנות את גודל גופן נקודות 12 עד 24 נקודות. אבל תופעת הלוואי של זה, כמובן, הולך להיות עכשיו, על שולחני או מחשב נייד, עכשיו את הטקסט גדול פי שניים. וכך זה היה סוג של להיות נחמד להבחין בין התקנים, ומתברר שיש דרכים לעשות את זה. יש כמה בדרכים שונות, למעשה, לפיה באמצעות CSS ותכונות להשתכלל כי אנחנו לא ניכנס בפירוט רב, למעשה אתה יכול לבצע שאילתה הדפדפן ולומר, אם המסך הוא קטן יותר מאשר זה פיקסלים רבים, השתמשו בגודל גופן זה. אם המסך שלך הוא גדול יותר מאשר זה פיקסלים רבים, השתמשו בגודל גופן אחר זה. 

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

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

קהל: לתחתית עמוד 

דוד י מלאן: כן, כותרת HTTP. אז כל בקשת HTTP המגיעה שלהם ללקוחות השרתים שלהם כוללים, בתוך וירטואלי מעטפה, חבורה שלמה של כותרות HTTP, שאחד מהם הוא הדפדפן ומערכת ההפעלה אפילו, אם אכפת לך רמה כזו של פירוט. עכשיו, זה מחרוזת נסתרת למראה, אבל קיימת תוכנה אשר רק לפשט את זה, ואתה יכול פשוט לבקש בתכנות code-- PHP, Java, C ++, whatever-- מה הטלפון זה-- באיזה מכשיר הוא משתמש זה משתמש? ואז אתה יכול להגיד, להראות להם את זה גרסה של האתר, אם זה טלפון. הראה להם בגירסה זו של אתר אם זה מחשב נייד או שולחני. אבל אתה אפילו לא צריך מורכבות בצד השרת. אתה יכול לעשות אפילו את הדברים הפשוטים ביותר. 

אני הולך לעשות את זה. אני הולך קדימה לתוך סביבת Cloud9 שלי, ואני הולך להוסיף תג שראית ב- Google לפני. זה נקרא מטא תג. ואני אף פעם לא זוכר את המכתב הזה, כך אני הולך לתמלל אותו כאן. meta name = "של נקודת מבט" ולאחר מכן content = "width = רוחב מכשיר, intital סולם = 1 "וזהו. 

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

קהל: [לא ברור] דוד י מלאן: כן. בסדר. אז לטעון יותר קריא עכשיו? עדיין קטן, כדי להיות הוגן, אבל לא כך זעיר כמו להיות נשלט. ואני בהחלט יכול לשנות זאת נוסף עם CSS או בצד השרת, אבל יותר ויותר מה אתה לראות זה עוד ועוד תכונות להתווסף בצד הלקוח environments-- JavaScript, כמו נדונו מחר, CSS, ו HTML-- כך שכל שאילתות אלו ניתן לעשות זאת על הלקוח כדי להטריד את שרת הרבה פחות ולא צריך לשמור על קשר עם, עבור למשל, המתקפה המתמדת של מערכת ההפעלה החדשה גרסאות, גרסאות דפדפן חדש. אתה פשוט יכול לאפשר לדפדפן לשאול את המכשיר, כמה אתה גדול, ולאחר מכן לבצע מעט הגיוני החלטות על בסיס זה. אבל נראים יותר הזדמנויות להחלטות הגיוניות מחר בהקשר של שפת תכנות. 

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

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

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

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