ديفيد جيه مالان: حسنا. لقد عدنا. لذلك، فإن الهدف من هذه الدورة النهائية هو أن أعرض بضعة مفاهيم ولكن أيضا إعطاء الجميع فرصة إلى نوع من تمتد أصابعك والواقع أن تفعل شيئا القليل من التدريب العملي على. والهدف هو عدم تحويل جميعا إلى مطوري الويب بأي وسيلة ولكن في الحقيقة فقط لتعطيك طعم بعض من بنيات الأساسية للما يذهب الى برمجة الويب واليوم على شبكة الإنترنت تطوير، وبالتالي فإن الجانب ثابت من things-- أي منطق، لا البرمجة اللغة ومحتوى ثابت فقط. وسوف يتيح لنا الفرصة لنرى في الواقع ما هو خادم الويب، انظر ماذا هو ملف HTML، ونرى ما فمن HTTP يقضي فعليا. ولكن قبل أن يغوص في، أي بأثر رجعي أسئلة حول الحوسبة السحابية أو الأمن أو أي شيء بينهما؟ لا؟ كل الحق، حسنا، دعنا القيام بذلك، فقط في حالة عملية الاشتراك شيء يستغرق بضع دقائق. ونحن سوف تتيح لها أن تفعل ذلك في الخلفية. المضي قدما، إذا كنت تستطيع، لهذا URL here-- c9.io. هذا هو طرف ثالث service-- منصة كخدمة، إذا كنت will-- هذا هو الذهاب الى أدعوكم للاشتراك في حساب، وانها سوف تعطي كل واحد منكم حساب في ما يسمى السحابة على البنية التحتية لشخص آخر، دعت شركة Cloud9. ولكن ما هو لطيف حول هذا هو أنها تعطيك تقريبي ل تنمية في العالم الحقيقي الفعلي بيئة، وإن كان ذلك في سحابة وفي متصفح الويب، وسنستخدم هذا الواقع تجربة قليلا اليوم. ثم المضي قدما والتنقل فقط طريقك إلى عملية الاشتراك إذا كان بإمكانك. ولذا فإننا يحدث لاستخدام هذا في فئة أنا أدرس لجميع طلابنا، سواء داخل الحرم الجامعي وخارجه الآن، و انها محل ما مر التاريخ كان تنزيل البرمجيات غير ذلك. ذلك ما كنت الوصول إلى هو واحد من هذه الأجهزة الظاهرية، أساسا، التي وصفتها في وقت سابق. لذلك هذه الشركة Cloud9 ربما الإيجارات من party-- ثلث الواقع في هذه الحالة، Google-- ككل مجموعة من الأجهزة الظاهرية انهم ختم بطريقة ما يصل إلى وهم لخدمة الفرد أن كل واحد منا لديه السيطرة الكاملة على. انها ليست دقيقة تماما القول انهم الأجهزة الظاهرية، رغم ذلك، لأن ما يستخدم Cloud9 الواقع هي تقنية جديدة نوعا ما دعا الحاويات. واسمحوا لي أن الاستيلاء على هذه الصورة هنا لرسم هذه الصورة. 

والحاوية، إذا تذكرون الصورة في وقت سابق من، قليلا أخف وزنا الوزن من الجهاز الظاهري. في الواقع، في حين أن الأخيرة الوقت تحدثنا عن وجود كونه التشغيل نظام وبرنامج مراقبة الأجهزة الافتراضية ثم نظام التشغيل الضيف، ضيف نظام التشغيل، التشغيل الضيف النظام، على رأس الخاص بك الأجهزة الفعلي، الفرق مع هذا أحدث التكنولوجيا، والحاويات، غير أنهم يشتركون جميعا بطريقة أو بأخرى نفس نظام التشغيل. لكنها لا تزال خلق وهم من الجميع وجود حضارته حصرية حقوق الإدارية والملفات على الخادم. ولكن هناك أقل البرمجيات في بينك وبين الأجهزة. والنتيجة التي هي، في نظرية، والأداء العالي، لأنك كنت تستخدم أو إهدار موارد أقل على أن ما يسمى طبقة الافتراضية. لذلك وهذا ما يسمى الحاويات من الطبيعة عن طريق تقنية تسمى عامل الميناء، الذي يأتي كثيرا إلى جانبها. وهذا هو الشيء الذي المهندسين في شركتك قد النوع من النوع من بدء الحديث حول قريبا إذا لم تقم بذلك بالفعل، رغم أن هناك بالتأكيد لا السبب للقفز على أي bandwagons. 

هكذا قال مع ذلك، ما وربما كنت أرى الآن هي الشاشة التي تبدو قليلا مثل هذا. حسنا. ومجرد دعوة لي أكثر إن لم يكن. وإذا so-- سآتي على إن لم يكن. المضي قدما وفوق ذلك كبيرة بالإضافة إلى إنشاء مساحة عمل، وسترى شاشة مثل هذا. يمكنك الاتصال مساحة العمل تسمية أي شيء تريده في الوقت الراهن. وفقط في الواقع عن البساطة، الذهاب and-- جيدا، البعض منكم لديك بالفعل مساحات. يطلق عليه مهما كنت want-- الأعمال، جامعة هارفارد، الخميس، كل ما تريد. أنت لا تحتاج إلى وصف. يمكنك ترك الأمر سرا، إلا إذا لديك بالفعل حفنة من مساحات العمل. إذا كنت اضطر لجعله الجمهور، هذا شيء طيب لأغراض اليوم. هنا، أيضا، هو واحد من upsells. يمكنك الحصول على مساحة العمل الخاص واحدا تلو افتراضي. ولكن إذا كنت تريد أكثر من ذلك، لديك لدفع المزيد. وإلا، يجبرك لجعل الجمهور عملك. ولكن هذا شيء طيب، لأنها أيضا تستهدف هذه في المجتمعات المفتوحة المصدر لتشجيع الناس على التعاون معها بالفعل. 

والشيء الأخير الذي هو مهم، رغم ذلك، هو، بعد اختيار اسم وبعد اختيار الخاص أو العام، انقر HTML5، والبرتقالي رمز كبير الثاني من اليسار، و ثم انقر فوق إنشاء مساحة عمل. ومن المرجح انه اتخاذ دقيقة أو نحو ذلك، ولكن عليك بعد ذلك ل البيئة وبمجرد نفعل ذلك، يبدو أن تذكرنا ما لدي على الشاشة هنا الآن. ولكن، مرة أخرى، فإنه قد يستغرق دقيقة واحدة أو أكثر للوصول إلى هذه الشاشة بعد النقر على خلق مساحة عمل. ولكن مجرد وضع علامة لي أكثر إذا كنت مثلي لنلقي نظرة على أي شيء أو تقديم المشورة. حسنا. لذلك أنا ذاهب لخلفية هذا الآن. اتصل بي أكثر من لو بدا لك لديك أي مشاكل فنية. ولكن، مرة أخرى، فإنه قد يستغرق قليلا لذلك لفتح. ودعونا نمضي قدما ونتحدث عن ما وهو ما يعني في الواقع لجعل صفحة على شبكة الإنترنت، ما هو HTML، وكيف كل هذا تربط الآن ونحن بدأنا لاستخدامها في الواقع بعض من هذه التكنولوجيا. هكذا اتضح أن يمكنني الذهاب على بلدي قليلا ماك هنا، فتح برنامج بسيط يسمى برنامج TextEdit، أو على ويندوز أستطع شيء مفتوح دعا NOTEPAD.EXE. وأنا لا يمكن ببساطة أن تفعل شيئا مثل this-- "مرحبا، العالم". وبعد ذلك يمكن أن ينقذ هذا النحو hello.txt لذلك لا سحر هناك. هذا له علاقة مع شبكة الإنترنت لا شيء البرمجة، على أن تفعل مع HTML لا شيء. مجرد إنشاء ملف نصي. ولكن تبين أن شبكة الإنترنت الصفحة حرفيا تماما. انها نصي ملف نصي يحتوي على التي قد اكتب في لوحة المفاتيح، ولكنه عادة ولكن ليس دائما ينتهي في لا. TXT لكن أتش تي أم أل أو. HTM. وأنت لا فقط اكتب الكلمات في الملف. لديك فعلا لاستخدام الأشياء تسمى علامات أو بصورة أعم، شيء دعا اللغة المبرمجة. 

لذلك أنا ذاهب لكتابة بسرعة جدا ثم شرح ما يلي. أنا ذاهب لأول مرة اكتب هذا، والذي يقول: مهلا، متصفح، هنا يأتي صفحة ويب مكتوب في HTML. وهذين الأمرين يقول معا، مهلا، متصفح، ما يلي هو في الواقع HTML. مهلا، متصفح، هنا يأتي الرأس أو الجزء العلوي من الصفحة الخاصة بي. مهلا، المتصفح، داخل الجزء العلوي من صفحتي، وضع العنوان الذي هو، "مرحبا، العالم." مهلا، المتصفح، بعد رئيس بلدي الصفحة، وهنا يأتي جسد صفحتي. و، مهلا، المتصفح، والجسم من بلدي الصفحة يجب أن يقول أيضا: "مرحبا العالم". فما هي تفاصيل البارزة هنا؟ هذا هو ما هو عموما ودعا إعلان وثيقة من نوع، وبصراحة، انها قليلا من الصعب أن يحفظ هذا في البداية. كنت مجرد نوع من نسخ لصقه. هذه هي الطريقة الرسمية القول، مهلا، المتصفح، أنا باستخدام HTML الإصدار 5 التي خرج بعض الشيء مؤخرا. انها التعويذة السحرية التي بعض البشر بشعور الفقراء من تصميم قررت وضع في أعلى جدا من الملف. على الرغم من انها غامضة قليلا، وهذا كل شيء ذلك means-- مهلا، متصفح، هنا يأتي مع الإصدار 5 من HTML. 

وكانت بقية هذا معنا لبعض الوقت الآن، من الناحية التاريخية، الا انه كان متطور، وانها ربما تم الحصول على أبسط قليلا. لاحظت وجود بعض الخصائص ما كنت قد سلط الضوء. هناك هذه الأمور مع الزاوية brackets-- قوس الأيسر وقوس الصحيح. ولاحظ التماثل هنا. والتماثل، أعني، تماما كما كنت يكون هذا بداية الوسم هنا أو علامة مفتوحة اذا صح التعبير، إلى هنا ولدي علامة انهاء أو علامة نهاية هذا تختلف فقط من حيث أنه لديه هذا خفض في بداية الكلمة HTML. ويمكن ان يخطر لك هذا كما كنت عرضا اقتراح من قبل، مهلا، متصفح، هنا يأتي بعض HTML. وعلى العكس، مهلا، متصفح، وهذا ذلك لبدء HTML-- ونهاية. 

وفي الوقت نفسه مهلا، متصفح، هنا ويأتي على رأس الصفحة الخاصة بي. مهلا، المتصفح، هذا كل شيء على الرأس. مهلا، متصفح، هنا جسد صفحتي. مهلا، المتصفح، هذا كل شيء للجسم. وداخل هذا هو بعض النص التعسفي في الوقت الراهن. وداخل الرأس، وفي الوقت نفسه، هو بعض تعسفية ولكن المعلمة، إذا جاز التعبير، والنص الذي يقول: عنوان صفحتي يكون "مرحبا، العالم". الآن، في الوقت الراهن، يمكنك نفترض أن المتصفحات لدينا only--، أو بالأحرى، وصفحات الويب لها parts-- اثنين فقط من الرأس والجسم. والرأس هو عموما فقط مثل شريط القوائم، والاشياء حقا فقط في أعلى جدا. والجسد هو الشجاعة الصفحة، كل شيء في هذا المستطيل الكبير أن تملأ الشاشة. لذلك أنا ذاهب إلى المضي قدما ونفعل ذلك. أنا ذاهب إلى المضي قدما و فوق حفظ أو حفظ ملف. وانا ذاهب لإنقاذ هذا كما hello.html، وأنا ذاهب لمجرد وضعه على سطح المكتب. وانا ذاهب للذهاب قدما وانقر حفظ. وnotice-- بلدي ماك في ويصرخ في وجهي الأقل. هل أنت متأكد أنك تريد أن تفعل هذا؟ وأنا أريد أن أقول، نعم، استخدم HTML. أعرف أفضل في هذه الحالة. والآن أنا ذاهب للذهاب الى سطح المكتب حيث لدي هذا الملف فجأة. وانا ذاهب الى انقر نقرا مزدوجا فوقه. وستلاحظ أنه بحلول افتراضيا، فتحت كروم يصل. ذلك لأن هذا المتصفح الافتراضي. وتقول فقط، "مرحبا، العالم". لكنه يقول "مرحبا، العالم "في مكانين. لاحظ أعلى اليسار. من الصعب جدا أن تفوت ذلك. انها كبيرة وجريئة. وأي مكان آخر لا يبدو يقول: "مرحبا، العالم"؟ 

الحضور: لسان. 

ديفيد جيه مالان: نعم، علامة التبويب نفسه. لذلك عندما قال لي رئيس الصفحة هو كل شيء top-- وبالفعل هذا هو العنوان. انها فقط في علامة التبويب هنا. ويمكنني سحب هذا التبويب خارج حتى لا نخلط بين. هذا هو مجرد علامة تبويب واحدة الآن، وبالفعل نرى "مرحبا، العالم" هنا و"مرحبا، العالم" إلى هنا. لذلك واضحة جدا. لكنه أيضا بسيطة الى حد كبير. و، في الواقع، كنت أسرع في. يمكنني تغيير حجم الخط فقط لتكبير للمعاقين. ولكن دعونا الآن نفعل شيئا قليلا أكثر إثارة للاهتمام. 

انا ذاهب الى go-- يصيح، اسمحوا لي أن نعود إلى ملف نصي. انا ذاهب الى بلدي ملف نصي، وانا ذاهب لتغيير هذا ويقولون "مرحبا، عالم ديزني". حفظ. وأعود إلى بلدي المتصفح وانقر فوق تحديث. والآن، وبطبيعة الحال، وتقول "عالم ديزني". وانا ذاهب لتكبير مصطنع في غضون ذلك فمن السهل أن نرى. وحتى الآن، للأسف، أنا نوع من تريد ل-- في الواقع، وهذا هو ميزة ماك. أريد أن النقر على عالم ديزني وتذهب إلى مكان ما مثل disney.com، ولكن هذا لا يعمل. لذلك المبدأ الأساسي لشبكة الإنترنت هو وصلات وروابط ذلك الذهاب إلى مكان آخر. فكيف أفعل ذلك؟ حسنا، أستطيع أن أقول فقط، "مرحبا، http://www.disney.com." احفظ هذا. تحديث الصفحة. ولكن هذا أيضا، لا يمكن النقر عليها. وما هو جميل هنا، على الرغم من هذه ليست وظيفية بعد، غير أنه يبدو أن المتصفح لا حرفيا فقط ما أقول أن تفعله. حتى لو كنت فقط اكتب عنوان URL من هذا القبيل، انها مجرد ذاهب الى تبين لي URL. أنا بحاجة إلى استخدام علامات أو علامات لغة لقول الحقيقة المتصفح لبذل المزيد من الجهد حتى. لذلك أنا ذاهب إلى المضي قدما و حذف هذا للحظة واحدة. وانا ذاهب الى القول، مهلا، المتصفح، بدء تشغيل مرساة هنا، وصلة إذا جاز التعبير. وفرط إشارة، الوجهة لذلك مرساة، يجب أن يكون هذا العنوان. وتلاحظ نقلت بلدي. ويمكنني أن استخدام علامات الاقتباس المفردة، أيضا، ولكن عليك أن تكون متسقة، وأود أن عموما مجرد استخدام علامات الاقتباس المزدوجة للحفاظ على أنها بسيطة. لاحظ انا ذاهب لإغلاق علامة. ثم هنا انا ذاهب يقول: "عالم ديزني". والآن انا بحاجة الى بعض symmetry-- قوس مفتوح، / أ، أغلقت قوس. 

وذلك ما قد تعرفت؟ لقد كان لدينا عدد قليل من علامات بالفعل. HTML، رئيس، عنوان، الجسم، كلها علامات، إذا جاز التعبير، مع نظرائهم المفتوحة والمغلقة. لكن إشعار، وهذا هو النوع من تختلف اختلافا جوهريا. هذا ما سوف ندعو في HTML سمة. والسمة مجرد زوج قيمة المفتاح. هذا أمر شائع في زوج قيمة المفتاح الكمبيوتر science--. انها نوع من أداة للتجارة. مفتاح وقيمة. كلمة وبعد ذلك بعض كلمة أو عبارة أخرى. وفي هذه الحالة، والمفتاح هو HREF، وكانت قيمة هذا العنوان الكامل. وما سمة تفعله هو عليه يؤثر على سلوك علامة. وفي هذه الحالة، نحن بحاجة إلى التأثير سلوك العلامة مرساة، لأننا في حاجة إلى ترسيخ هذا الرابط إلى مكان ما. وكيف نفعل ذلك عن طريق السمة. 

لذلك أنا ذاهب إلى المضي قدما وحفظ الملف الآن. العودة الى متصفحي وتحديث. و، فويلا، لدينا الآن بدايات صفحة على شبكة الإنترنت المشروعة. سوبر بسيطة، ولكن إذا كنت تحوم فوق إشعار this-- في أسفل الزاوية اليسرى، انها فائقة صغيرة. ولكنك ترى www.disney.com. وإذا كنت فوق ذلك، في الواقع هذا يخفق لي بعيدا إلى disney.com. الآن، والشيء الغريب هنا هو أنه لا وbest-- عنوان URL أكثر للتسويق، ولكن وهذا جيد لأن هذا الملف لا موجودة على الشبكة العالمية. كما وجدت ملف محلي في ما يبدو بلدي المستخدمين directory-- / jharvard-- لجون Harvard-- / سطح المكتب. لكنه لا يملك URL. ذلك يحدث لمجرد أن تكون محلية. للأسف، لا أحد منكم يستطيع زيارة هذا، لأنه إذا قمت بكتابة هذا العنوان، تريد ان تكون إخبار المتصفح الخاص بك، ابحث عن الملف hello.html على القرص الصلب الخاص بك. وبطبيعة الحال، إلا إذا كنت قد تم بعد طول يدويا، انها لن تكون موجودة هناك. 

لذلك هذا شيء طيب. ما زلنا بحاجة إلى وسيلة، في نهاية المطاف، للحصول على هذا الملف إلى شبكة الإنترنت، ولكن دعونا ندف بعيدا بضع الآثار الأمنية المترتبة على ما نحن فقط رأى وربطة عنق إعادته إلى سابق مناقشة من هذا الصباح. اتضح أنه إذا كان المتصفح لا حرفيا فقط ما أقوله هو أن تفعل، وعلى ما يبدو ليكون هذا هو الحال علامة مرساة ل تتأثر قيمة هذه السمة دعا أ href ولكنه يعرض هذا النص، فإن هذا يبدو تعني أن أتمكن من وضع URL في كلا المكانين ثم إعادة تحميل ونرى الآن URL وانتقل إلى URL. لاحظ، إذا أنا تحوم فوق الجزء السفلي الأيسر، انا ذاهب لا يزال في الواقع إلى disney.com. 

حتى إذا كنت في أي وقت مضى phished-- P-H-I-S-H-E-D-- مع واحدة من هذه الرسائل المزيفة من مثل باي بال البنك الذي تتعامل معه، ربما كنت قد حصلت على الروابط داخل من البريد الإلكتروني الذي كنت تقرأ هذا يروي لك انقر هنا للذهاب تأكيد كلمة السر أو تأكيد تاريخ الميلاد الخاص بك أو اجتماعية أو شيء اجتماعيا هندسة منك التصريح معلومات. حسنا، أنا يمكن نوع من اتخاذ ميزة هذا، لا يمكن لي؟ ويمكنني أن أقول شيئا مثل، www.paypal.com. وبدلا من disney.com، وأنا يمكن أن تذهب badguy.com ل، مثل،. تحديث الصفحة. وكيف هو أنه من السهل خداع، خصوصا قارئ غير التقنية أو قراءة خاطفة القارئ من فوق وصلة من هذا القبيل، والتي إذا كنت اضغط it-- أنا في الواقع لا تريد أن تذهب badguy.com. أنا لا أعرف ما هو في الواقع هناك. حتى paypal.com، لاحظ، هو ما تقول انه سيكون ل، ولكن بطبيعة الحال، إذا كنت تنظر إلى أسفل فائقة منخفضة، انها ضبابية قليلا، لكنه يقول badguy.com. هذا هو فقط ان اقول الان أنني ذاهب إلى المكان الخطأ. وعندما قلت في وقت سابق أن البنوك حقا لا ينبغي أن تشجع أو تدريب المستخدمين إلى روابط النقر، وهذا هو واحد فقط مظهر من مظاهر ذلك. وانها بهذه البساطة. أنت الآن خصما إذا تفعل شيئا من هذا القبيل ومحاولة لخداع المستخدم إلى زيارة موقع الويب الخاص بك. ولكن الآن، ونحن سوف تبقى أشياء جميلة ونظيفة. ونحن في طريقنا إلى المضي قدما والترجيع هذه التغييرات. تحديث الصفحة. وأعود إلى disney.com. 

دعونا نرى ما اذا كنا لا يمكن أن ندف أكثر هذا بصرف النظر قليلا. حتى "مرحبا، عالم ديزني". أنا أريد أن أقول هنا. ربما أنا ذاهب إلى جعل بعض غرفة. "نأمل أن تستمتع إقامتك!" حفظ. تحديث الصفحة. انها ليست rea-- هذا ليس ما كنت أنوي، أليس كذلك؟ أعني، إذا أنا علاج النص الخاص بي ملف مثل معالج النصوص، ماذا كنت آمل أن يحدث هنا؟ نعم، أنا أشعر بأن هناك ينبغي أن يكون هناك خط فاصل هنا، لذلك يشعر عربات التي تجرها الدواب في بعض الطريق. ولكن هذا متعمد في الواقع، لمجرد كما كان من قبل، المتصفح لن يؤدي الا الى لا ما كنت أقول أن تفعله. أنا لم أخبر لكسر خطوط. أنا لم أخبر أن تتحرك إلى أسفل، حتى على الرغم من بداهة، أشعر وكأنني فعلت. لذلك تبين أننا بحاجة أكثر من ذلك بقليل العلامات، وانا ذاهب لإصلاح هذا على النحو التالي. انا ذاهب الى أن أستهل هذا أولا مرحبا مع ما يسمى علامة الفقرة. ثم انا ذاهب الى المضي قدما والانتهاء من هذه الجملة الأخرى في العلامة فقرة أخرى، على الرغم من انهم الفقرات فائقة قصيرة. الآن أنا ذاهب لإنقاذ. تحديث الصفحة. والآن لدينا هذا الفضاء، ونحن نوع من لديها دلالات فقرتين منفصلتين. 

هذا كل شيء على ما يرام وجيد، لكنه أراد يكون لطيفا لإضافة صورة إلى هذه الصفحة، لذلك أنا ذاهب ليذهب للبحث عن ميكي ماوس على صور Google. وفقط من أجل المتعة، وأنا الذهاب الى الاستيلاء على هذه الصورة. انا ذاهب الى المضي قدما الآن و الاستيلاء على عنوان URL لهذه الصورة، وإن كان هناك من يختلف طرق للقيام بذلك. الآن، أنا ذاهب لمجرد نسخ عنوان URL. أنا ذاهب إلى العودة إلى النص الخاص بي الملف، وانا ذاهب الى القول هنا، IMG SRC = الإقتباس هذا العنوان، السوبر الطويل. وبعد ذلك فكرة وجود الصورة مختلفة قليلا. هناك حقا أي فكرة من البداية صورة وتنتهي صورة، مثل بداية الوسم علامة نهاية. لذلك يشعر غريب قليلا ل لي غويا للقيام بذلك، أن يكون علامة على مقربة الصورة. انها ليست صحيحة. انها صحيحة تماما، وانها تشجع، ولكن هناك تدوين الاختزال. يمكنني نوع من وقت واحد فتح وإغلاق نفس العلامة، والتي من شأنها أن تجعل المتصفح سعيدة. لذلك فمن قليلا أكثر اقتضابا لأشياء هذا المفهوم حقا لا معنى لبداية ونهاية. هم فقط هناك، أو أنهم لا. 

لذلك أنا ذاهب لإنقاذ هذا والعودة إلى بلادي "مرحبا، العالم" صفحة وتحديث. وانها قليلا خارج نطاق السيطرة، لأن هذه الصورة هي في الواقع كبير قليلا، ولكن هذا ما يرام. أنا يمكن أن حجمه في البرنامج. أو كنت تعرف ما. فقط لإثبات، وأنا سأقول في الواقع أن عرض هذا شيء ينبغي يكون فقط 200 بكسل، و 200 نقطة. اسمحوا لي أن المضي قدما وحفظ وتحميل، والآن الصفحة تبدو أكثر قليلا معقولة. ولكن لاحظ نمط. حسنا، لقد نوع من علمك كل من HTML بمعنى ما، على الأقل من الناحية النظرية، لأن كل HTML هي غير هذه tags-- علامات مفتوحة، والعلامات مغلقة، والصفات التي تعديل سلوكهم. وعلى ما يبدو، كل العلامة يمكن أن يكون صفر أو واحد أو اثنين أو أكثر من الصفات، كل من الذي يفعل شيئا مختلفا قليلا. الآن، كيف يمكنك أن تعرف ما هو موجود؟ كنت استمع فقط لشخص مثل لي ان اقول لكم ما هو موجود، أو كنت مجرد جوجل حول لتعليمي في HTML، وأنها هي حقا هذا بسيط. 

حقا، عندما كنت الطالب الجامعي منذ سنوات وتعلمت HTML، واحدة من بلدي تدريس الرياضيات مساعدين قضى قليلا من الوقت دروس في لي لمثل نصف ساعة، ساعة، ثم كنت في طريقي. كنت في طريقي نحو جعل المواقع أبشع من أي وقت مضى، التي، على ما يبدو، وأنا لم حقا يرتقوا. ولكن النقطة هي أنه بمجرد فهم هذه الأفكار- بسيطة إذا text-- غامضة ولكن هذه البساطة أفكار بدء التفكير وإغلاق الفكر، وحفظ كل شيء متوازنة بشكل جيد، أبحث عن شيء ما، تعديل سلوك تلك العلامة، وهذا هو حقا كل ما في الامر. وفي الواقع، إذا كنا الآن اذهب إلى شيء من هذا القبيل google.com-- في الواقع، دعنا نذهب إلى مكان أكثر قليلا reasonable-- stanford.edu. وانا ذاهب للذهاب إلى عرض، المطور، عرض المصدر. انها قبيحة، ولكن notice-- وسوف تكبير إشعار بعض الاشياء التي مألوف بالفعل. هناك هذا الأمر هنا، الذي هو متصفح. هنا يأتي HTML5. هناك HTML. على ما يبدو، هناك ل السمة التي لم أكن استخدام هذا يحدد لغة الصفحة، وهذا يمكن أن يساعد مع التلقائي الترجمة وأشياء من هذا القبيل. وهنا رأس الصفحة. وهنا عنوان الصفحة ستانفورد. هناك علامة لم أكن الحديث عن yet-- علامة التعريف. انها مجرد نوع من معلومات أساسية. كما أنه يساعد مع كبار المسئولين الاقتصاديين، أو تطوير محرك البحث، أو نتائج بحث Google أو ما شابه ذلك. ولكن إذا أردنا الحفاظ على المظهر، والحفاظ على المظهر، وهنا علامة الجسم. وهناك باقات من الآخر علامات ليس لدينا تحدث عن بعد. ولكن شعبة واحدة ل تقسيم الصفحة. انها مثل مستطيل غير مرئية إذا كنت نوع من تريد عقليا تقسيم صفحتك في وحدات مختلفة على شبكة الإنترنت. وبعد ذلك الكثير من عناصر div أنا ترى، ما يسمى من الدرجة الاولى، ولكن سوف نعود لذلك. 

هذا هو أشكال interesting--. أشكال هي في جميع أنحاء الشبكة. أي مربع البحث كنت استعملت هو النموذج. و، لذلك، دعونا نرى في الواقع. شكل. عمل. عمل هذا النموذج، مهما كان أسباب تاريخية، هو أن URL. الأسلوب هو "آخر". تبين أن طلبات HTTP يمكن استخدام الفعل "الحصول على" كما رأينا من قبل، أو "ما بعد". وسوف نرى الفرق هذا في لحظة. دعونا نرى في الواقع ما هو هذا. واسمحوا لي أن أعود إلى الصفحة ستانفورد. ما هو الشكل الذي يتحدثون حول، هل تعتقد؟ ما يقفز في لك؟ 

الحضور: مربع البحث. 

ديفيد جيه مالان: نعم. حتى تصل في اعلى اليمين هنا هو هذا مربع البحث. وهذه هي الطريقة التي نفذت it-- ل العلامة التي حرفيا شكل قوس مفتوح. ثم دعونا البحث عن شيء ما. دعونا بحث عن الأصدقاء من mine-- "نيك Parlante." أدخل. وبطبيعة الحال، فإنه ذهب إلى عنوان URL مختلف قليلا. واسمحوا لي أن أعود هنا. دعونا البحث عن "دورات". عليك اللعنة. ذهبت إلى عنوان مختلف. لذلك، ستانفورد إضافة بعض السحر انهم لا يأخذني إلى عنوان URL الذي رأيناه في ويعزو عمل هناك. ولكن هذا النموذج هنا يتم تنفيذ بحتة عن طريق هذه العلامات هنا، هذه العلامات. في الواقع، وهنا مدخل ل نوع البحث الذي تريده. هنا هو المدخل ل نوع آخر من البحث. هنا هو المدخل الخاص السلسلة نفسها. وبالتالي فإن الهدف من ذلك هو عدم التفاف عقولنا حول كل من هذه العلامات ولكن لمجرد رؤيته. انها مجرد فتح وإغلاق العلامات وتبحث الامور. بلى؟ فيكتوريا؟ 

الحضور: [غير مسموع] ديفيد جيه مالان: هذا سؤال جيد. هذا اصعب قليلا لنرى. اسمحوا لي أن أعود إلى ذلك مسألة في دقائق معدودة عندما ننظر إلى ما يسمى ورقة CSS، أو الأنماط المتتالية، ويمكننا أن نحاول أن نستنتج بقدر من الصفحة. حتى إذا كنا الآن نلقي نظرة على google.com، دعونا نرى ما تبدو مثل صفحتهم. هل they're-- هذا لطيف اليوم. حسنا. كل ذلك. كل الحق، لذلك عرض المصدر. هل تعتقد غوغل الشفرة المصدرية لطيف حقا. لذلك، على ما يبدو، ما الذي يجري هنا؟ في واقع الأمر، وهذا ليس حتى HTML. وهذا هو ما يسمى جافا سكريبت. ودعونا نمضي والذهاب. أنا لا أعرف حتى من أين تبدأ الصفحة. انا ذاهب الى استخدام القيادة F، مفتوحة HTML قوس. كل الحق، ومن هناك. لقد وجدت بداية من الصفحة، و هناك الكثير من الاشياء في هنا. 

ما يجري في الواقع على؟ حسنا، أنت تعرف ما، يمكننا تنظيف هذا. لو كنت بدلا من الذهاب إلى هذا فحص شريط الأدوات، هذه الأداة التشخيصية الخاصة، ولا تسر إلى الشبكة، حيث واصلنا الذهاب اليوم، ولكن إذا ذهبت إلى عناصر، ما هو لطيف هو أن المتصفح لديه الكثير عيون أفضل بكثير مما أفعل. والمتصفح يمكن قراءة تلك الفوضى من صفحة ويب، أن HTML الإلكتروني نحن فقط نظرت، وأنها يمكن أن تحليل أو قراءة و نحللها وإعادة صياغة بطريقة صديقة للإنسان لطيف. ذلك ما اراه الآن في هذه الشاشة هنا ضمن عناصر، نفس المضمون المحدد، لكنهم بادئة كل شيء، لقد الملونة، ولكن انها نفس النص المحدد التي قمت بتنزيلها من الخادم. 

وما هو جميل الآن أستطيع أن أرى في الجسم، لإشعار instance--، الصفحة ما زالت تتألف من مجرد الرأس والجسم، وأستطيع أن الغوص هرمي هنا. لاحظ أن جوجل يبدو أن لديها لdivs-- هذا واحد وهذا واحد. أنا يمكن توسيع ذلك. هناك مجموعة كاملة من عناصر div أخرى. حتى انها معقدة قليلا. لكن انتظر. هذا يبدو أكثر من ذلك بكثير قراءة، نسبيا، من هذا. لماذا هو جوجل محرجة نفسها مجرد ارسال هذه فوضى كبيرة من التعليمات البرمجية من بعض النوع فقط لتنفيذ شيء التي تبدو في غاية البساطة للوهلة الأولى؟ مثل، لماذا لا إضافة المزيد من المساحات؟ لماذا لم هاهنا كما فعلت؟ انظر جيدا كيف كنت في كتابة صفحة على شبكة الإنترنت. أنا هاهنا بجد. أنا بادئة لذلك كل شيء هي جميلة جدا وقابلة للقراءة. لماذا جوجل لا يمارسون الشيء نفسه؟ 

الحضور: [غير مسموع] ديفيد جيه مالان: جيد. عادل جدا. لم يكن لديهم بعض شخص في جوجل يدويا تحديث الصفحة البيت بعد الآن. انها ليست 1999 بعد الآن. بحيث يصبح لديهم برنامج. لديهم الأدوات الأخرى التي توليد حيوي انهم HTML. بطبيعة الحال، أن القانون نفسه كتبه البشر، ولكن الحقيقة هي، انها عادلة تماما أن أقول، المتصفح لا بالتأكيد لا يهمني كيف الفوضى الشفرة. ولكن هناك لأكثر سبب فني مقنع أن توزع Google أتش تي أم أل التعليمات البرمجية في هذا قذرة، على ما يبدو طريقة الساحقة جميع معبأة معا مع way-- القليل جدا القليل جدا في الطريق من التنسيق كما فعلت. 

الحضور: [غير مسموع] 

ديفيد جيه مالان: أسرع؟ لماذا؟ وماذا أقول لكم، ليديا؟ أسرع؟ لماذا أسرع؟ الحضور: [غير مسموع] ديفيد جيه مالان: هناك لا توجد مساحة للقراءة. بلى. حتى التفكير في ما هو الفضاء. لذلك كل حرف على لوحة المفاتيح يأخذ بعض مقدار المساحة لتمثيل، إما جسديا، مثل ذلك يستغرق فترة تصل مساحة كبيرة، أو بطريقة أو بأخرى تحت غطاء محرك السيارة، التي تتطلب ذاكرة. وباعتبارها aside-- وسنقوم نتحدث أكثر عن هذا tomorrow-- كل حرف على لوحة المفاتيح عادة ما يتطلب 8 بت أو بايت واحد. لذلك النمط من 8 أصفار أو منها، أو فقط 1 بايت، ونحن سيقول عادة البشر. بحيث صغيرة، ولكن انها لا تزال غير صفرية. انها لا تزال بعض مقدار المساحة. حتى إذا كان مهندسا أو Google يضرب شريط الفضاء مرة واحدة فقط، ونفترض Google-- انها فائقة popular-- لنفترض أن مليار شخص زيارة صفحة طنهم يوميا، أو بعض عدد من الناس زيارة الصفحة الرئيسية ل مليار مرات في اليوم، كم بايت إضافية لها أن مهندس البرمجيات فقط يكلف جوجل من خلال ضرب له أو لها مساحة شريط مرة واحدة؟ 

الحضور: [غير مسموع] ديفيد جيه مالان: ليس تماما بهذا السوء. واحد فقط مرات بايت مليار دولار. a-- ذلك الحضور: 8000000000 غيغابايت. ديفيد جيه مالان: غير 8000000000. 8000000000 بايت. ولكن 1 غيغا بايت. سوف 1 غيغا بايت تكون وحدة القياس. إذا كان هو أو هي لا اثنين مسافات، 2 غيغابايت. ثلاثة غيغابايت. حق؟ ومن المقاييس ثمنا باهظا. وحتى في الحالات مثل جوجل، التي منحت، هي الحالات القصوى، وهناك غيرها من القضايا التي تنشأ فقط من خلال اتخاذ قرارات معقولة جدا أو اتخاذ إجراءات الإنسان بسيطة جدا، لأنه يترك أثر مضاعف. ذلك أحد الأسباب وهذا يبدو ومضغوط جدا تماما كما said-- فيكتوريا كان ولدت للتو من قبل أجهزة الكمبيوتر على أي حال. لذلك لا صفقة كبيرة. السماح للمتصفح الرقم بها. ولكنه أيضا عمدا لم يكن لديك الكثير من الفضاء، لأن مساحة ليست ضرورية. والفضاء الواقع يكلف مالا. 

إما تكاليف الوقت، لمجرد أن يدفع أن بيانات أكثر بكثير من مقر google.com للتو وقد حصلت على اتخاذ بعض كمية من الوقت، حتى لو كان ميلي ثانية أو ميكروثانية، ولكن أن يصل أكثر من هذا العدد الكبير من المستخدمين، أو على الأرجح، وربما تكلف أموالا. ربما تتصل Google أي شخص آخر في العالم، واحد تلك يطل نقاط، وإذا كان لديهم نوع من العلاقة المالية حيث تكاليف البيانات أموالهم، أنها قد كذلك تقليل مقدار البيانات انهم بصق على الاتصال بشبكة الانترنت. 

ذلك الشيء مضحك، على الرغم من، في نهاية المطاف، أو ربما شيء يبعث على الاطمئنان، غير أنه على الرغم من أن هذا يبدو بشكل رهيب الساحقة، في نهاية المطاف، انها لا تزال نفس المبادئ بالضبط كما هذه الصفحة بسيطة جدا هنا لHTML الصفحة. حتى مجرد تلخيص وحتى يتسنى لك لديك إصدار قانوني إذا لم تكن بعد طول عن طريق الاختيار هنا، هنا قد يكون أبسط من صفحات الويب، ذلك شيء للعب مع ربما في وقت لاحق. 

حسنا، دعونا إدخال بضع أفكار أخرى الآن. نحن على وشك إدخال شيء يسمى علامة الاسلوب. يمكننا أن أسلب هذه الصفحة بطرق أكثر إثارة للاهتمام. ذلك في حين البريد الإلكتروني HTML هو كل شيء حول ترميز البيانات، نوع من تحديد ل متصفح كيفية تنظيم البيانات، حيث وضعه، CSS، أو اوراق النمط المتعاقب، هي اللغة الثانية التي عموما يحصل امتزجت مع HTML ونحن سوف see-- لكننا يمكن تنظيف ان ما يصل في اللحظات، التي تأخذ ذلك الميل الأخير، وذلك stylizes ذلك. فإنه يحصل على الألوان الحق فقط، على الخط أحجام مجرد حق، تحديد المواقع والحق فقط. انها كل شيء عن جماليات أو تنسيق، وليس حول البيانات الأساسية نفسها. وأسهل طريقة لاظهار ولعل هذا هو بالقدوة. لذلك أنا ذاهب للذهاب أكثر إلى بلدي ملف نصي. وبعد لحظات، وسوف أكون المشي لنا من خلال عملية للقيام بذلك بأنفسنا. 

انا ذاهب الى العودة الى الملف الخاص بي هنا وإعادة تحميل الصفحة فقط لتأكيد ما يبدو. هذا هو المكان الذي نحن في الوقت الراهن. أشعر الاطفال سيتمتعون وجود بعض الألوان لهذه الصفحة على شبكة الإنترنت. لذلك أنا ذاهب لترتفع هنا في رأس الصفحة. وانا ذاهب الى القيام النمط، / النمط. ثم داخل هذا، وأنا ذاهب لنقول للهيئة من بلدي page-- وهذا التنسيق هو، في وهلة الأولى، ربما قليلا غريب لكن التقليدية. انا ذاهب الى القول ان الخلفية لون هذه الصفحة يجب أن تكون خضراء. وهذا للأسف نوع من لا أفضل تصميم. لاحظ أنه في السابق في عالم HTML، قلت إن الصفات وهذه الأزواج قيمة المفتاح. شيء يساوي الاقتباس نهاية الاقتباس "شيء". في عالم المغلق، الذي كان المصممة من قبل بعض الناس مختلفة، قرروا، في حياتهم العالم، أزواج الرئيسية ذات القيمة ستكون كلمة القولون شيء. حتى انها نفس الفكرة، وإن كان. انها ربط قيمة مع بعض المفتاح الذي بطريقة أو بأخرى يؤثر على سلوك هذه الصفحة. 

وربما يمكنك تخمين. ما هو هذا على الارجح للقيام حتى لو كنت قد أبدا شهدت HTML أو CSS من قبل؟ الحضور: تغيير لون الخلفية. ديفيد جيه مالان: نعم، تغيير لون الخلفية. وعلى وجه التحديد لون الخلفية من الجسم. ولكن بقدر ما الجسم في الوقت الراهن هو على شبكة الإنترنت page-- هذا هو الشيء الوحيد تحت شريط العنوان really-- انه سيكون على الارجح الى التأثير على الشيء نفسه. لذلك دعونا نرى. دعونا حفظ هذا. اذهب هنا وتحميل. انها البشعة جدا. وما يحدث هنا هو أحد الآثار الجانبية. أنا فقط اختار هذه الصورة بشكل عشوائي. لماذا هو الأخضر لا تتخلل راء ميكي؟ الحضور: [غير مسموع] ديفيد جيه مالان: بالضبط. وتبين أن الصور، جميلة كثيرا عن الصور التي قد نستخدمها، كلها rectangles-- من المستطيلات. حتى لو ميكي لديه بعض المنحنيات لنفسه ولديه خلفية، هذه الخلفية يجب أن تكون شيئا. يجب أن يكون أبيض. يجب أن يكون أسود أو أي شيء آخر. ويمكن أن تكون شفافة. في واقع الأمر، لم أستطع فتح ميكي ماوس هنا في برنامج يسمى فوتوشوب أو شيئا من هذا القبيل وتغيير كل ذلك الأبيض خلفية شفافة، حتى الأخضر سيكون من خلال تألق. ولكن هذا شيء أود أن الحاجة أن يطلب من نفسي أو فنان الرسم أو مصمم في بلدي شركة، على سبيل المثال، القيام به، خاصة وأنني فقط اقترضت هذا واحد من شبكة الإنترنت. ولكن هذا لماذا يحدث هذا. 

لذلك ماذا يمكن نحن نريد أن نفعل؟ حسنا، نحن قد أريد أن أقول نحن نأمل حقا أن تستمتع إقامتك. وتأكيدا لكلامه، وأنا أريد لجعل هذا قوية، ولذا فإنني سوف أقول مفتوحة قوية و إغلاق قوية وثم إعادة تحميل. وانها قليلا من الصعب لنرى على العرض ولكن ربما حقا الآن يقفز عليك أكثر قليلا. حتى تتمكن من إضافة المائل في هذا الطريقة، تواجه جريئة في هذا الطريق. نحن يمكن أن تغير الألوان. في الواقع، لمجرد الركلات، وأنا الذهاب إلى المضي قدما ونفعل ذلك. أنا في الحقيقة لا أحب الطريقة بلدي الفقرات هي هذه قريبة من بعضها البعض، ولذا فإنني قد تفعل شيئا مثل هذا. انا ذاهب الى تخبر المتصفح، تغيير كل علامة الفقرة لديك، دعونا say-- فعلا، وانت تعرف ما، دعونا محاذاته محاذاة النص، المركز. ومرة أخرى، وأنا أعلم هذا فقط لأن أحدهم يدرس لي أو كنت قد بحثت عنه في اشارة على الانترنت. لذلك اسمحوا لي أن يوفر هذا. و، آه، الآن لدي تركز الصورة هناك. وفعلا، وانت تعرف ما إذا أنتقل صورة بلدي في فقرة tag-- ذلك فقرة ثالثة، على الرغم من انها ليست نص. دعونا حفظ ذلك وإعادة تحميل. الآن الصفحة بدأت تبدو نوع of-- أعني، انها لا تزال قبيحة جدا، ولكن على الأقل يبدو أن قضيت دقيقتين بدلا من دقيقة واحدة أصنعه. 

وهكذا، تدريجيا، يمكننا أن نجعل هذه التغييرات الجمالية الآن إلى الصفحة؟ أنا لم يتغير حقا البيانات في صفحة أخرى من إضافة كلمة حقا. واضاف لقد الفوقية، اذا صح التعبير. مهلا، المتصفح، وجعل كلمة "حقا" جريئة. ولكن البيانات ليست قوية. هذا التعريف. البيانات هو "حقا". لذلك لا يزال لدينا بعض نفس المفاهيم كما كان من قبل. الآن، بالطبع، وهذا ليس على شبكة الإنترنت، لذلك أنا ذاهب الى القيام به خطوة واحدة أخيرة هنا. 

انا ذاهب للذهاب الى hello.html وتسليط الضوء فقط ونسخ هذا. والآن أنا ذاهب ل الذهاب إلى Cloud9، التي سوف المشي لكم من خلال في لحظة فقط. والاحتمالات هي عليك أن تكون قريبا، إذا لا بالفعل، في مثل هذه الشاشة. واسمحوا لي أن أقدم لكم سريعة جولة ما Cloud9 هو في الواقع. ذلك مرة أخرى سحابة 9 غير هذه الخدمة القائمة على السحابة أن يعطي لي ولكم الوهم وجود لدينا آلة الافتراضية الخاصة في السحابة، من الناحية التقنية حاوية في السحابة، أن لدينا كاملة امتيازات إدارية ل. حتى من الناحية النظرية، لا أحد آخر في العالم لديها الوصول إلى الشاشة أنا تبحث في الوقت الراهن، ربما باستثناء الشعب الذين يديرون الموقع، لأنه من الناحية الفنية لديهم الوصول المادي وهكذا دواليك. 

فماذا نرى في هذه البيئة؟ انا ذاهب للتصغير، لأنه صغير قليلا. واسمحوا لي أن أشير على هنا لمجرد لحظة. على الجانب الأيسر من بلدي والخاص الشاشة، وهناك ملف المتصفح في اليسار. على غرار ذلك في روح لنظام التشغيل ماك وويندوز. وهذه كلها من الملفات في حسابي. وافتراضيا، إذا كان لديك الحساب مثل الألغام، سترى أو نرى قريبا helloworld.html وreadme.md. هنا على الحق، وهذا هو حيث تسير ملفات نصية لي للذهاب. إذا كنت قد استخدمت من أي وقت مضى مايكروسوفت كلمة أو المفكرة أو برنامج TextEdit، هذا هو كلامي التحرير ملفات ستذهب. وثم الأكثر غامضة سمة من سمات هذه البيئة أننا لن حقا بحاجة إلى استخدام غير أسفل يسمى هنا نافذة الطرفية. إذا كنت قد استخدمت DOS من الأمس، وهذا هو لينكس أو ما يعادلها لينكس من DOS. انها interface-- يستند إلى نص لا نقرات الماوس، أي سحب. كل ما يمكن القيام به هو نوع الأوامر، ولكن تلك الأوامر يمكن إنشاء الملفات، نقل الملفات، وفتح الدلائل والأدلة وثيقة، القيام بأي عدد من الأشياء. ولكن الآن، وسوف نقوم فقط قضاء بعض الوقت لدينا هنا. 

وذلك دعونا نفعل هذا. إذا كنت في هذا بيئة، والتي ينبغي يكون إذا قمت بإنشاء مساحة عمل بالفعل، والمضي قدما فقط ترتفع إلى ملف جديد للحظة واحدة. والتي سوف اعطيكم جديدة علامة التبويب هنا في الوسط. وأنا just-- ودعونا والمضي قدما في القيام بذلك. دعونا نمضي قدما والآن لا ملف، حفظ والمضي قدما والذي يطلق عليه hello.html، وينبغي عدم الخلط مع helloworld.html، التي جاء مع حساب مجاني الجديد الخاص بك، الذي هو مجرد نموذج للملف. سترى أن يظهر فجأة، على الأرجح على الجانب الأيسر، والتبويب سوف يكون لا يزال مفتوحا. واسمحوا لي أن أشجعكم الآن لإعادة هذا الملف أو بعض المتغيرات منها. وإذا كنت لا تستطيع رؤية ذلك تماما على الشاشة، وهذا مطابق لالشرائح التي ربما لديك في علامة تبويب أخرى. 

هكذا وباختصار، وجعل أول صفحة الويب الخاصة بك، حفظه، ثم في لحظة فقط، سأريكم كيف يمكن عرض هذا الواقع. ولكن تغيير شيء واحد على الأقل. تغيير helloworld ل شيء من اختيارك، بحيث كنت مقتنعا أنه لديك ملف وليس واحد أنا خلقت للتو. حسنا. وعندما كنت ready-- لا rush-- عندما تكون مستعدا، المضي قدما وحفظ الملف بمجرد إجراء هذه التغييرات. وإذا قمت بالنقر فوق تشغيل زر فوق أعلى، وهذا يجب فتح علامة تبويب جديدة من شأنها أن أقول لك ما URL يمكنك زيارة ملفك في، ولكن قد يستغرق لحظة ل الإقتباس "بدء أباتشي"، والتي هو اسم خادم الويب. لذا كن حذرا أن تفعل بالضبط ما في الملف في نهاية المطاف. حتى الآن، وسوف تكبير. إذا أبدأ في الكتابة قوس مفتوح HTML، لاحظ انها دفع لي لإنهاء تفكيري. وإذا انتهيت من تفكيري، فإنه يعطي تلقائيا لي علامة إغلاق. لكن التوقع وبعد ذلك سوف تصل أدخل، ومن ثم الانتقال داخل هناك ولا يتوجه داخل و ثم أفعل الجسم في الداخل. وانها غريبة بعض الشيء في البداية، لأنه يقوم بعمل لك، ولكن ندرك أنه في نهاية المطاف فإنه يوفر لك ضربات المفاتيح. في واقع الأمر، وهذه سمة شائعة جدا من بيئات البرمجة في هذه الأيام على حد سواء لتطوير الشبكة مثل هذا والبرمجة الفعلية، والتي سوف نتحدث عن الغد، هذه هي ميزات الإكمال التلقائي، الأشياء التي تسمح فقط مبرمج أو مصمم لكتابة عدد أقل من ضربات المفاتيح ل إنجاز نفس الشيء. في بعض الأحيان انها جيدة، على الرغم من. في بعض الأحيان انها مجرد مزعج. ومرة أخرى، مرة واحدة كنت قد كتب الشريحة أو أشكال منها، يمكنك النقر على زر تشغيل حتى أعلى. ثم في الجزء السفلي نافذة، عليك أن تكون على علم في ما URL يمكنك زيارة صفحة الويب الخاصة بك. الألغام، على سبيل المثال، هو في business-daharvard.c9users.io وهكذا دواليك. كل الحق، لذلك، دعونا me-- أي أسئلة؟ أي أسئلة أخرى حول مجرد الحصول على هذا العمل قبل أن إضافة ميزات؟ واسمحوا لي أن أقترح، فقط للحصول على الناس comfortable-- لأنه شيء واحد لمجرد نسخ لصق عمياء ما قمت به. ولكن فقط حتى أن الناس يتصارع مع واحد على الأقل إلى القيام، أنا ذاهب لتشغيل بعض الموسيقى. انا ذاهب الى اقتراح قائمة الأشياء التي من المحتمل أن إضافته. ويمكنك بالتأكيد استخدام جوجل. ولماذا لا نحن فقط أقترح أن محاولة حل مشكلة واحدة معينة على الأقل هنا. وذلك من حيث العلامات، اسمحوا لي أن إعادة استخدام هذا هنا. 

في الواقع، اسمحوا لي أن أطرح في شكل النص. دعنا نقول أن من بين العلامات أننا ربما استخدام هنا بعض العلامات أكثر من هنا. لقد رأينا علامة الفقرة. الآن انها سوف الإكمال التلقائي. العلامة الفقرة، العلامة مرساة. دعونا نقول لكم تريد تقديم شيء أكبر، لذلك قد like-- علامة الامتداد يمكن أن تساعد. حسنا، قد تحتاج بعض المساعدة لأنه في لحظة فقط. لقد رأينا شعبة. سترى هناك جدول. هناك شيء يسمى آر، ت. ال، ت. أعود إلى أنه في لحظة. ماذا يمكن أن تكون مفيدة؟ هناك قوي. هناك التركيز، أو بالأحرى م. There's-- ماذا قد كنت يتوهم هنا؟ حسنا، سوف نأخذ ننظر في ذلك معا. النموذج، الذي رأيناه. هناك شكل. هناك المدخلات وعدد قليل من الآخرين. كل الحق، لذلك دعونا نفعل هذا. للرد على فيكتوريا سؤال، اسمحوا لي أولا فقط للتأكد من أن الجميع قادرة على الحصول على عمل مرحبا بهم. ثم اسمحوا لي أن أعرض بضع أفكار أخرى. ثم سنسمح الناس حل بعض المشاكل من تلقاء نفسها. ثم نحن سوف تأتي في الواقع مرة أخرى إلى أن فكرة وجود شكل من الأشكال، وسنقوم في الواقع إعادة تنفيذ معا الواجهة الأمامية، إذا جاز التعبير، لجوجل نفسها. سنستخدم جوجل كما النهاية الخلفية وترك منهم القيام بالعمل الشاق، والبحث، ولكننا سوف إعادة الواجهة الأمامية غوغل ونموذج البحث أن لديهم على الصفحة الرئيسية الخاصة بهم. ولذا فإننا سوف أعود ل هذه العلامات في مجرد لحظة. 

لذلك كان هذا ما كنت اقترح منذ قليل. يمكننا أن نضيف التنميق ل الصفحة داخل هذه العلامة أسلوب، ويمكننا أن أسلب الخلفية لون، ومحاذاة النص، سواء كان ذلك في الوسط أو اليسار أو اليمين. لكن سرعان ما تفضلتم العثور على أو مصمم على شبكة الإنترنت سوف تجد أن هذا يصبح غير عملي قليلا، لأنك تفعل ما هو دعا محتوى الاختلاط مع تقديمه. كنت خلط البيانات الخاصة بك وجماليات منه. في واقع الأمر، إذا كنت تنظر ما الذي سيحدث خلال time-- هذا هو صغير جدا صفحة على شبكة الإنترنت، بطبيعة الحال. ولكن إذا كنت إضافة محتوى لهذه الصفحة وأود أن أضيف إلى هذا النمط صفحة، صفحة يحصل بسرعة جدا أطول وأطول وأطول. ولنفترض أنني أريد لديك صفحة ويب الثانية التي أسهم بعض من هذه الصفات. لنفترض بلدي صفحة الويب الثانية لبلدي site-- أيضا، أريد مركز كل شيء، وأنا أيضا أريد كل شيء مع خلفية خضراء. انا ذاهب الى حد كبير لدينا ل نسخ ولصق بعض من هذه الخطوط إلى أن الملف الثاني، الذي يشعر غرامة. وسوف يحل المشكلة. 

ولكن ماذا لو أريد الصفحة الثالثة أو صفحة ال30 أو ال40 الصفحة؟ الآن أنا ذاهب إلى أن نسخ و لصق الكثير من التعليمات البرمجية مكررة في ملفات متعددة. وهكذا نفترض أن أقرر أو قيل لي، مهلا، نحن لا تستخدم خلفية خضراء بعد الآن. ونحن في طريقنا للبدء في استخدام اللون البرتقالي. ماذا لديك لتغيير؟ حسنا، لديك لتغيير هذا النمط من الأخضر إلى اللون البرتقالي في كيفية العديد من الأماكن؟ مثل 30 أو 40 الأماكن. انها مملة. انها عرضة للخطأ. هناك عدد من الأسباب حيث كنت لا تريد للحث هذا النوع من الألم لنفسك. وهكذا لن يكون لطيفا إذا كنا قد يستغرق ما أنا فقط نضع بين هذه الأصفر اثنين العلامات، وهذه العلامات النمط، عامل بها، ووضع كل من بلدي التنميق في ملف مركزي واحد أن كل 30 أو 40 من بلادي الملفات الأخرى الاقتراض من أو بطريقة أو بأخرى مرجعية، لا تختلف عن الشبكات الرسوم البيانية كنا نفعل من قبل؟ 

حتى إذا ذهبت هنا، وأنا الذهاب إلى اقتراح فعلا أن نستبدل العلامة الاسلوب مع شيء دعا العلامة الارتباط، التي وفظيعة، واسمه فظيعة، لأنك لا تستخدم رابط على كلمة دلالية لخلق ما نحن البشر كما نعرف ارتباط في صفحة ويب. لذلك، يمكنك استخدام أي بطاقة؟ كيف تقوم بإنشاء ارتباط في صفحة ويب؟ الحضور: وأ. ديفيد جيه مالان: إن لذلك، أو مرساة العلامة، التي ذهبت إلى ديزني قبل. العلامة الارتباط هنا يقول this-- تصل إلى ملف يسمى styles.css، والعلاقة التي سيكون ذلك انها بلدي الأنماط. لذلك هذا هو واحد من ال S في CSS-- أوراق الأنماط المتتالية. أسلوب sheet-- اثنين من ال S في CSS. المتتالية ورقة الأنماط. هذا يعني فقط، مهلا، المتصفح، انتقل تجد styles.css على الملقم المحلي واستخدامه بمثابة الأنماط الخاصة بك، وهو ما يعني داخل هذا الملف سيكون كل من stylizations أن فعلناه فقط. وهكذا ما هذا الملف قد تبدو وكأنها غير ذلك. وأنا مجرد قيام بذلك هو سريعة سبيل المثال، لأننا لسنا في حاجة للحصول على الكثير في الحشائش هنا. ولكن إذا كنت نسخ هذا، ما أنا اقتراح غير أن مبرمجا إنشاء ملف جديد، لصق في تلك lines-- whoops-- لصق في تلك الخطوط، حفظه كما styles.css، وبعد ذلك، في ملف آخر، وحذف كل ذلك والاستعاضة عنها بدلا من ذلك مع هذه العلامة الارتباط. بحيث إذا أنا ربط أ href = "styles.css" يجب العلاقة ستكون "أنماط" علامة انهاء. احفظها. أعود إلى بلدي helloworld. تحديث الصفحة. 

حرفيا شيئا لم يحدث. هذا أمر جيد، لأنه يعني انه في الواقع عن العمل. لإثبات قدر، لنفترض أن أقوم بإجراء الخطأ المطبعي، وأنا أسمي هذا "Styles.css" برأسمال S، الذي هو غير صحيحة، ومن ثم إعادة تحميل. الآن يمكنك أن ترى أنه لا يعمل فقط. الان لماذا؟ حسنا، دعونا استخدام تقنية من قبل. اسمحوا لي أن المضي قدما، وفي متصفحي، في كروم، وأنا الذهاب لفتح تلك الخاصة علامة التبويب الشبكة كما كان من قبل، واسمحوا لي أن إعادة تحميل الصفحة. ما أنت لا يدهشني أن أرى الآن؟ أو ربما كنت مندهشا لرؤيته. وفي كلتا الحالتين، ماذا ترى الآن؟ الحضور: [غير مسموع] ديفيد جيه مالان: ليست وجد. لماذا هو غير موجود؟ حسنا، عاصمة Styles.css-- S-- غير موجود. أنا مساء تسمية ذلك. خطأ مطبعي بسيط. ولكن أنا اتلقى مفهومة الآن 404، لأن الخادم يقول، مهلا، انها ليست وجدت. حرفيا، وأنا لا أعرف حيث أن الملف. وذلك نتيجة لذلك، فإن المتصفح يظهر لك ما في وسعها، محتوى الخام من الصفحة، الذي كان 200، وأتش تي أم أل، ولكن أسلوب لا يمكن تضاف بعد ذلك. وهذا هو ما تعنيه المتتالية. يمكنك نوع من إضافتها بعد، وأنها نوع من تهذب جماليات صفحة الويب. ويمكنك حتى تجاوز تلك الأساليب مع الملفات الأنماط بعد أخرى إن أردت. ليست جدت أنه، على الرغم من، في هذه الحالة، لأنه بطبيعة الحال، أنا مساء تسمية ذلك. لذلك أود أن إصلاح هذا أولا. 

لذلك دعونا نمضي قدما و أقترح ما يلي. دعونا نمضي قدما ونفعل هذا. بدءا ربما ملف helloworld الخاص بك، اسمحوا لي أن أدعو زوجين من ميزة الاقتراحات. لذا، فيكتوريا، أردت جعل بعض النص أكبر، أليس كذلك؟ كل الحق، حتى نتمكن من لا تجعل النص أكبر. وسنقوم كل نتف من مشكلة واحدة فقط لحلها. جعل النص اكبر. أنا لن يكلف نفسه عناء أكتب هذا عندما كنا لدينا التكنولوجيا رصاصة حق أكثر من هنا. وحتى بعض المشاكل. لذلك نحن ذاهبون لمحاولة لجعل النص اكبر. حسنا. ماذا سوف يقترح شخص ما؟ ماذا قد نرغب للقيام في صفحة على شبكة الإنترنت؟ دعونا نخرج مع قائمة قصيرة من الأشياء ثم يفوض ل مجموعة لهذا الرقم. 

الحضور: [غير مسموع] 

ديفيد جيه مالان: موافق، والنص الموقف على جوانب مختلفة من الصفحة؟ حسنا. شيء آخر. 

الحضور: [غير مسموع] ديفيد جيه مالان: هو كذلك. لذلك GIF هو مجرد تنسيق ملف مختلف. كنا فقط، ما، ل بابوا نيو غينيا أو جي بي جي على الأرجح؟ كنا جي بي جي. إذا كنت غريبة، وهي مفرطة الإجابة على سؤالك ويستخدم جي بي جي عموما ل الصور، لأنها تدعم الملايين من الألوان أو ألوان 24 بت. ويستخدم اف عموما ل، مثل، ميم إنترنت هذه الرسوم المتحركة days--، صور متحركة الرسوم المتحركة مثل. ولكنه يحدث لاستخدام اللون أصغر لوحة، فقط 256 الألوان الممكنة، لكنه يدعم الشفافية والرسوم المتحركة. وبعد ذلك هناك بابوا نيو غينيا، التي تدعم الشفافية والمزيد من الألوان ولكن ليس للرسوم المتحركة. لذلك هو المفاضلة. ذلك إضافة GIF، على الرغم من سيكون ظيفيا أي ما يعادل إضافة بابوا نيو غينيا أو جي بي جي. بلى. مصدر الصورة يساوي. ذلك شيء آخر. دعونا نخرج بشيء أرسلنا فيكتوريا القيام به هنا. 

الحضور: إضافة أزرار للنموذج. ديفيد جيه مالان: موافق. ذلك إضافة أزرار للنموذج. ونحن سوف نفعل ذلك واحد معا. بحيث سوف تكون سغ] الكمال مباشرة بعد هذا التحدي. أي شيء آخر؟ ما قد تريد أن تفعل؟ يشعر الويب مخيب جدا إذا كان هذا هو كل ما يمكننا القيام به. الحضور: تغيير لون النص. ديفيد جيه مالان: تغيير ماذا؟ الحضور: لون النص. ديفيد جيه مالان: تغيير لون النص. حسنا. لذا، دعونا نفعل هذا. فقط مرة أخرى بحيث كنت لا، فقط عن ظهر قلب، والقيام بالضبط ما أفعله، أنا ذاهب لتشغيل الموسيقى لربما خمس دقائق هنا. فنحن نرحب بك لاستخدام جوجل. كنت موضع ترحيب أن يسألني، و سوف تهمس تلميحا في أذنك. فنحن نرحب بك للبحث أكثر على أكتاف الآخرين. ولكن حل واحد فقط من هذه المشاكل. ولكن سنفعل آخر واحد، و تشكل واحدة، إذا استطعنا، جنبا إلى جنب. حتى بعد مرور خمس دقائق على حل أي واحدة من هذه المشاكل باستخدام جوجل، والحدس، أو أي الوسائل الأخرى المتاحة لك. 

[موسيقى] حسنا. لا تقلق إذا كنت تريد للحفاظ على ترقيع، ولكنني سوف يفسد زوجين هذه الإجابات. لذلك الاقتراح الأول من كانت فيكتوريا لجعل النص اكبر. لذا فإن هناك عدد قليل من الطرق للقيام بذلك. لقد أعاد حاليا شاشتي لهذا الحجم، على الرغم من أنني قمت بالتكبير مصطنع لمجرد أن نرى الأشياء. ودعونا نفعل هذا. اسمحوا لي أن نمضي قدما وانتزاع بعض النصوص اللاتينية عام فقط لذلك لدينا شيء للعمل مع. حتى تعطي لي لحظة واحدة فقط. سوف يجعل ثلاث فقرات. حسنا. وسيكون هذا أفضل مثال. حتى لافتة، في بلدي hello.html، أنا فقط لصق ثلاثة لا معنى لها الفقرات اللاتينية فقط لذلك لدينا بعض النصوص للعمل مع. وكان الهدف فيكتوريا ل جعل جزء من النص أكبر. حتى أتمكن، كما كان من قبل، اذهب هنا. واسمحوا لي أن تفعل ذلك بالطريقة الصحيحة. انا ذاهب الى وجود صلة العلامة التي تشير إلى ملف ودعا "styles.css،" العلاقة منها مرة أخرى "أنماط". ثم انا ذاهب الى ان انقاذ وفتح هذا "styles.css." 

لذلك، كما كان من قبل، ولدي القدرة في هذا الملف المغلق لتجاوز الواقع الافتراضي جماليات صفحة على شبكة الإنترنت، وجماليات الافتراضي، وبطبيعة الحال، هي مملة جدا. انها نوع من حجم الخط العادي والأسود النص، خلفية بيضاء، وهكذا دواليك. لذلك أفترض تريد أن تجعل كل هذا النص اكبر. أنا يمكن أن تفعل بعض الأشياء. في ملف styles.css بلدي، وأنا يمكن القول، وانت تعرف ما، تطبيق التالية ل جسد صفحتي. المضي قدما وجعل حجم الخط 24 نقطة، وهو الرقم الذي قد استخدام في Microsoft Word. اسمحوا لي أن أعود إلى بلدي الويب الصفحة هنا وتحميل، ويمكنك أن ترى أن انها بالفعل أكبر من ذلك بكثير. ويمكن أن نحصل على مجنون قليلا، تماما مثل ما في وسعنا على desktop-- جعله 96 نقطة. تحديث الصفحة. والأمر يزداد قليلا غير عملي في هذه المرحلة. 

ولكن يمكن أن يكون قليلا أكثر دقة. بدلا من تطبيق هذا أنماط للجسم من صفحتي، ماذا يمكن أن أتقدم بطلب لبدلا من ذلك، ما العلامة الأخرى التي قد لا تزال وظيفة في نفس الطريق؟ 

الحضور: العلامة ع؟ ديفيد جيه مالان: P العلامة. وبالتالي فإن رئيس لا يكون صحيح، لأن الرأس، لا يمكنك فعلا السيطرة على جماليات. هناك إما النص هناك أم لا. لكن ع tag-- أستطيع الغوص في قليلا أعمق، إذا جاز التعبير، إلى الفقرة العلامات. وعلى الرغم من أن هناك ثلاثة، هذا على ما يرام تماما، لأنه في CSS، عندما أقول فقط "ص"، هذا يعني تطبيق التالية إلى أي بطاقة يطابق هذا محدد، محدد فقط كونه اسم العلامة. لذلك أينما كنت ترى "ص" تطبيق حجم الخط، ودعونا جعلها أكثر معقولة again-- 24 نقطة. وتعلم ماذا، فقط لحسن التدبير، دعونا نجعل من لون فقط الأحمر في الوقت الراهن. والآن إذا كنت تحميل، ونحن الآن نرى ثلاث فقرات قبيحة. 

ولكن الآن لنفترض أنني نوع of-- أريد الفقرة الأولى القفز على المستخدم. أنا لا أريد أن زيادة فقط حجم الخط من كل شيء. وذلك أريد فعلا لتحديد هويتك أو التمييز بين هذه الفقرات. لذلك دعونا نتخلص من اللون الأحمر، لأن هذا هو مجرد نوع من مبتذل، ودعونا نمضي قدما وجعل حجم الخط 12 نقطة افتراضيا، ذلك أن نعود إلى شيء أكثر من ذلك بقليل معقولة. والآن أريد فقط لزيادة حجم الخط في الفقرة الأولى. أستطيع أن أفعل ذلك في عدد قليل الطرق، ولكن طريقة واحدة هذا ربما الأكثر التعليمية في لحظة هي أن تفعل ما يلي. اسمحوا لي أن نمضي قدما والقول، وهذا الفقرة رقم تعريف فريد من "لأول مرة". أنا يمكن أن نسمي هذا ما أريد. أنا يمكن أن نسمي هذا "فو" أو أي كلمة أخرى، ولكن انا ذاهب لاعطائها بعض اسما ذا معنى لغويا مثل "لأول مرة". هذا هو معرف فريد، الهوية، بالنسبة للفقرة الأولى بلدي. 

ما يمكنني القيام به الآن في بلدي الأنماط غير أن يكون قليلا أكثر دقة. بدلا من أن تقول، وتطبيق ما يلي إلى العلامة ص، ويمكنني أن أقول following-- تطبيق ما يلي، أو حدد، عنصر HTML يحتوي على معرف فريد من "لأول مرة". ماذا أريد أن تطبق عليه؟ وحجم الخط 24 نقطة. لذلك ليس لدي اثنين من محددات الآن. واحد يجعل جميع الفقرات 12 نقطة. ولكن هذا واحد، لا سيما وأنه يأتي second-- يتعلق الأمر الماضي في الملف-- هذا له تأثير المتتالية. لقد أدلى به للتو كل من بلدي علامات الفقرة 12 نقطة، ولكن هذا الآن شلالات و يتجاوز ذلك لأية عناصر في الصفحة، أي العلامة في الصفحة التي معرف فريد هو قوسي اقتبس "لأول مرة". والهاشتاج في هذا السياق يعني فقط "معرف فريد". أنا لا وضعها في ملف HTML. أنا، هنا، نقول فقط الإقتباس "لأول مرة". 

لذلك اسمحوا لي تحميل. والآن أرى، آه، حسنا. أعني، انها ليست جميلة، ولكن هذا النوع من مثل مقدمة ل كتاب أو شيء من هذا القبيل، حيث الفقرة الأولى هي الأكبر. يمكن أن يكون أكثر دقة مع فقط الحروف الأولى، ولكن على الأقل لقد مارست المزيد من السيطرة. الآن maybe-- ربما كنت تريد أن تفعل هذا أحيانا لأي سبب من الأسباب، وحتى أنا لا أريد هذا ل تنطبق على علامة HTML واحدة فقط. بدلا من ذلك، دعونا say-- دعونا أيضا القيام بما يلي. الطبقة = "استيراد". في حين يستخدم معرف لفريد تحديد شيء واحد، علامة واحدة، في صفحة الويب الخاصة بك، والمقصود فئة أن تكون استخدامها على أي عدد من العناصر أو العلامات على صفحة الويب الخاصة بك. لذلك فمن قابلة لإعادة الاستخدام. معرف ليست قابلة لإعادة الاستخدام. وهناك فئة غير قابلة لإعادة الاستخدام. 

وأنت تعرف ما، مهما كان reasons-- فلسفية لم أكن الانتهاء من بلدي thought-- انا ذاهب الى القول أن الفقرة الأولى و الفقرة الثانية مهمة. لذلك أنا ذاهب لتطبيق فئة تسمى "مهم" أنه إذا أنا حفظ الملف الخاص بي وتحديث، لا يوجد لديه تأثير وظيفي حتى الان. لكني أضفت بعض الفوقية للملف، نوع من شيء منفصل من البيانات الأساسية للملف، حتى أنه الآن في بلدي الأنماط، إذا أنا بدلا من ذلك قل ".important" - كما تعلمون، كل ما هو مهم، وأنا الذهاب الى جعل الخط لون، red-- أو بالأحرى لا FONT-اللون، اللون فقط. هناك تناقضات في CSS للأسف. وإعادة تحميل. لاحظ الآن أول فقرتين الحمراء ولكن ليس الثالث، لأنني فقط تطبيق فئة من "مهم" لأول اثنين من تلك الأشياء. 

حتى في معرفات، لديك القدرة لتحديد بدقة متناهية. مع الطبقات، لديك إعادة استخدام. ولكن في كلتا الحالتين، لاحظ نوع من مبدأ حسن التصميم حيث أنا يؤخذ من كل من جماليات إلى ملف styles.css بلدي. لذلك ليس هناك فوضى هنا. لم يكن هناك ذكر للأحمر أو الجريئة التي تواجه أو حجم الخط في هذا الملف. وبدلا من ذلك لدي لغويا، تتميز مجدية البيانات بصفتي، هنا بعض البيانات الهامة. وهنا بعض البيانات أكثر أهمية. وعلاوة على ذلك، وهنا هو "أولا" من بلدي البيانات الهامة. لذا HTML هو كل شيء عن نوع من العلامات، حرفيا، والكلمات والفقرات ويبني في حياتك الصفحة مع هذه التلميحات قليلا، إذا كنت صح التعبير، التي يمكنك الاستفادة بطريقة أو بأخرى باستخدام تقنيات أخرى مثل CSS بهذه الطريقة. 

وذلك في إجابة على سؤال فيكتوريا، يمكننا أن نجعل النص اكبر في هذا الطريق. هناك العديد من الطرق الأخرى، ولكن خط tag-- فتح قوس "الخط" - هو في الواقع عدة سنوات من العمر. وهذه هي المشكلة، أيضا، مع الاعتماد فقط على resources-- على الانترنت فإنها تميل إلى أن تكون قديمة. وبالفعل، تم إيقافه، لأن العالم أدرك، ما المقصود ب "FONT-SIZE = 7" يعني؟ لا. وكذلك لسنوات عديدة ول هذا day-- واحد من الجانب ويلاحظ هنا هو أنه في الواقع مؤلمة بشكل لا يصدق لا يزال في بعض الأحيان لتطوير المواقع ل على شبكة الإنترنت، وذلك لأن مايكروسوفت وجوجل وموزيلا و غالبا ما يختلف آخرون عن كيفية تفسير مواصفات مثل HTML. 

هناك كتاب القواعد لHTML التي يقول عادة ما تعنيه كل علامة. لكن في بعض الأحيان انها تترك لل تقدير التنفيذ، و تقدير مايكروسوفت وجوجل. وهكذا لن تضطر في كثير من الأحيان ترى على موقع على شبكة الانترنت شيء تبدو مختلفة على جهاز الكمبيوتر من يفعل على جهاز ماكنتوش، وهذا هو حقا لأنه، في نهاية اليوم، انهم لا اختباره كذلك على كل المنابر. لكنه أيضا لأنه معقول، الناس الذكية سوف نختلف والشركات سوف نختلف، وهكذا واحدة من التحديات التي تواجه البرمجة لشبكة الإنترنت أو تصميم أشياء لشبكة الإنترنت يكتب موقع الويب الخاص بك في طريقة الذي يعمل على كل متصفح ويب. ولكن حتى هذا غير معقول، أليس كذلك؟ هناك إصدارات عديدة من الكثير المتصفحات الى ان هناك، في مرحلة ما، لديك أيضا لإجراء مكالمة حكم وعليك أن تقرر كشركة، خاصة بالنسبة لل-على غرار التجارة الإلكترونية المواقع التي كنت محاولة استخدام أحدث وأكبر تقنيات لإعطاء المستخدم جيد حقا تجربة. ولكن بعض نسبة من المستخدمين قد لا تزال تستخدم انترنت اكسبلورر 6 أو 7 أو 8، وخاصة تبعا ل بلد انهم قادمون من. 

وعادة بحيث جدا استشارة شيء مثل "إحصاءات متصفح الويب". وإذا ذهبنا ل-- دعونا نرى ويكيبيديا ونرى كيف ما يصل إلى تاريخ هذا المخطط هو إذا كان هناك واحد. حتى هنا ترون حيث المتصفحات الواقع هي وفقا للديسمبر 2015، وفقا لحكومة الولايات المتحدة. الكروم هو في حصتها في السوق 42٪، تليها قبل شركة آي إي إلى حد كبير في ضبط الشركات أو ضبط جهاز الكمبيوتر، وبطبيعة الحال، يليه فايرفوكس، ثم فعلت سفاري، ثم أوبرا لا جعل الخريطة هنا لسبب ما، وبعد ذلك آخرون. ربما انها تحت آخرون. ولكن أكثر تعقيدا من أن أعرف، دعونا نرى ما اذا كان ويكيبيديا أيضا إصدارات المتصفحات version-- 

دعنا نذهب للاحصاءات المتصفح. أي. حتى هذا لا يكفي. إحصاءات المتصفح. بلدي الإصدار. هذا لن يكون على حق. دعونا نرى الإصدارات. حصة سوق المتصفحات. دعونا نرى ما اذا يأتي هذا الأمر. حسنا. الآن هذا هو الحصول على أكثر من ذلك بقليل مفيدة. حتى هنا، لاحظ أن لدينا جميع إصدارات مختلفة من المتصفحات. و، يا إلهي، إذا كنت look-- كروم 48، والكروم 47، والكروم 31، والكروم 45. أعني، متصفحات تحديثها على نحو متزايد، وأحيانا بعض من تلك التغييرات تعتبر هامة في حيث الأداء الوظيفي. وذلك في نقطة ما، مديري المنتجات أو المهندسين بحاجة الى تقديم decision-- لك تعرف ماذا، فقط 1٪ من سكان العالم لا تزال تستخدم IE 7. إلى الجحيم معهم. نحن فقط لن دعم هذا المتصفح. وماذا يعني ذلك عدم دعم؟ قد يعني أن أزرار لا تعمل على صفحة الويب الخاصة بك، أو أنه قد يعني التنسيق هو تماما. أو قد يكون لديك لجعل هذا النداء حكم نفسها في الهاتف النقال في هذه الأيام، حيث، ونحن لن دعم IOS 5 بعد الآن. لذلك الناس لديهم فقط للترقية. أو أننا لن دعم كب كيك على الروبوت نظام التشغيل لأجهزة الروبوت، لأنه كما world-- باسم عالم التكنولوجيا يريد ان يتحرك إلى الأمام، هو نوع من يريد جر العالم معها بحيث لا يجب أن تستمر في أن تكون متوافقة إلى الوراء حتى يمكن أن تقدم مزايا جديدة وجيدة. هذا هو في الواقع أحد الأسباب لماذا هذا العدد الكبير من الشركات والمتداول خارج التحديثات التلقائية ونوع من إجبار أحدث إصدارات البرامج علينا. وحتى الشركات مثل أبل سوف فرز لل يجبرك تقريبا أو إرغام لك من حيث قوى السوق لشراء الهاتف الجديد لأنهم فقط لن يتم تحديث هاتفك القديم بعد الآن. لذلك كنت تفوت على أحدث وأكبر الميزات، لأنها مكلفة لهم كما شركة للحفاظ على كبار السن، ويمكن القول إصدارات أدنى من البرمجيات. لكن الأثر الصافي هو أن نحن أيضا يعانون من هذا أيضا. 

لذلك دعونا نلقي نظرة على مجرد بضعة أشياء النهائية هنا. دعونا ضرب قبالة حقيقية سريعة بعض تلك الرصاصات أخرى، إذا الفضوليين. حتى إذا كنت تحاول، على سبيل المثال، موقف النص على جوانب مختلفة من الصفحة، انا ذاهب الى القيام به طريقة سريعة واحدة، ولكن هناك مختلفة طرق للقيام بذلك. اسمحوا لي أن نمضي قدما وeliminate-- تبسيط هذا على النحو التالي. واسمحوا لي أن أعود إلى بلدي بفقرات بسيطة وبسيطة. اسمحوا لي أن أعود إلى بلدي styles.css. وأنا ذاهب لمجرد استخدام simple-- التي كنت قد رأيت على جوجل أو تذكر من earlier-- محاذاة النص الصحيح. وإعادة تحميل هذه الصفحة. الآن يبدو أن كل شيء أن يكون على حق الانحياز، كما قد ترى على النفقات العامة هنا. 

يمكننا جعلها تبدو أكثر قليلا كتاب مثل، ويمكننا أن نقول "تبرير" وإعادة تحميل. الآن انها لطيفة ومربع على حد سواء الجانبين، والذي هو نوع من لطيف. هدف آخر أن كان لدينا هنا كان تغيير لون النص. لذلك رأينا أنه مع بلدي النص الأحمر. والآن إضافة أزرار للنموذج. لذلك لماذا لا نحاول أن نفعل هذا بالضبط؟ ولكن أولا اسمحوا لي أن انتقل إلى موقع معظمنا استخدام كل day-- جوجل. ودعونا نلقي نظرة على كيف جوجل يعمل فعلا. ولكن انا ذاهب للقيام بذلك. أولا اسمحوا لي أن نفعل ذلك in-- صحيح، اسمحوا لي أن أذهب إلى Google أولا. انا ذاهب لدينا للذهاب في إعدادات جوجل، لأنني أريد أن تعطيل شيء يسمى نتائج فورية. 

لذلك كنت قد لاحظت في جوجل هذه days-- اسمحوا لي أن أعود وهذا بدوره على. حتى لو كنت بدء البحث "قطط" من هذا القبيل، لاحظت أن لا تفعل سوى أحصل على صناعة السيارات في استكمال ما يصل أعلى، وفجأة، الصفحة نفسها يبدو أن تتغير بسرعة جدا كذلك، وهذا هو Google باستخدام لغة ودعا جافا سكريبت تحاول أن تكون مفيدة. ولكن للأسف، هو نوع من عبث مناقشتنا ما يحدث في الواقع تحت غطاء محرك السيارة هنا. لذلك أنا مجرد نوع من بسرعة إيقاف نتائج فورية. وانا ذاهب الى انقر فوق حفظ. والآن أنا ذاهب لفتح أن شريط أدوات التشخيص بأنني الحفاظ افتتاح تحت علامة التبويب الشبكة. لذلك دعونا نفعل هذا. السماح me-- whoops-- انتقل هذا قليلا. واسمحوا لي أن البحث عن "القطط". 

والآن notice-- في الواقع، هذه فرصة جيدة لمناقشة لحظة. لاحظ هذه اللحظة أنا type-- وقفه. توقف عن ذلك. حسنا. لاحظ هذه اللحظة أنا اكتب حرف C، مشاهدة الجزء السفلي من الشاشة. أ- تي إس ماذا الأسفل من هذه الشاشة، يا علامة التبويب الشبكة، أقترح يحدث كل مرة كنت اكتب الرسالة؟ وللأسف، فإن الضفدع جدا اشغال اليوم أو النفل أو أيا كان هو. ما كان يحدث في كل مرة أنا كتبته؟ واسمحوا لي أن مسح العازلة وكتابته مرة أخرى. يصيح So--. في كل مرة كنت اكتب بريد إلكتروني، ج أ T-- لذلك من الواضح صف جديد وتبقي الظهور. ماذا كل تلك الصفوف تمثيل، بناء على ما رأيناه ومناقشتها حتى الآن؟ الحضور: بحث؟ ديفيد جيه مالان: بحث، أو أكثر بشكل عام، طلب HTTP من متصفحي بالخادم. حسنا، لماذا متصفحي تبذل HTTP يطلب في كل مرة كنت اكتب الرسالة؟ 

الحضور: [غير مسموع] ديفيد جيه مالان: نعم، انها تعطي لي هذه النتائج الإكمال التلقائي. مثل، أين هذه نتائج البحث تأتي من؟ حسنا، في كل مرة كنت اكتب بريد إلكتروني، وجوجل ترسل المزيد وأكثر من ذلك وأكثر من كلمة أنا كتابة. لماذا؟ لأنهم يريدون أن تعطيني أفضل وأفضل، وأفضل اقتراح، قائمة من الاقتراحات، لماذا كلمة أنا أحاول أن تكتمل في الواقع. لذلك هذا هو القول حرفيا كل حرف تكتبه في جوجل يتم إرسالها، في نهاية المطاف السائبة، ولكن أيضا في بعض الأحيان واحد في وقت لتنفيذ هذه الميزات الإكمال التلقائي عند البيانات هو، بطبيعة الحال، على شبكة الإنترنت. 

الآن، دعونا نلقي نظرة على ما في الواقع يحدث عند النقر فوق بحث Google. وبعد ذلك سنقوم استفادة من هذا أنفسنا. حتى لو كنت انزل الآن إلى غاية الطلب الأول الذي حدث للتو. لاحظ ما يلي. تم إرساله إلى وقت طويل إلى حد ما URL-- https://www.google.com/search؟ ثم مجموعة كاملة من الاشياء. دعونا نرى هذا الواقع الآن في علامة التبويب المتصفح نفسه. دعونا نتخلص من شريط الأدوات هنا. من هنا صفحة نتائج البحث. وإشعار هنا عنوان URL. الآن، ربما يمكنك تخمين ما الذي يحدث هنا في جزء. حتى في المقام الأول، تعريف. يبدو أن هذا هو المقصد حيث يتم إرسال النموذج. حتى عندما كنت كتبته في عبارة "القطط" وضرب أدخل، يبدو أرسلت جوجل إدخال النص الخاص بي إلى هذا الرابط أنني قد سلط الضوء هناك، خفض البحث. تبين، في عنوان URL، أي شيء يحدث بعد علامة السؤال هو، ونحن نواصل القول، وزوج المفاتيح ذات قيمة الذي كتبته في النموذج أو بطريقة أو بأخرى تنتقل من المتصفح إلى الخادم. 

ذلك في أي وقت قمت بكتابة مدخلات في نموذج على شبكة الإنترنت وأن يتم إرسالها كما كنا تم مناقشة، عن طريق الحصول عليها، واحدة من هذه الظاهري المظاريف، ومحتويات لذلك envelope-- نعم، والحفاظ على الحصول على محشوة جسديا في المغلف في الصف اليوم، ولكن من الناحية التكنولوجية انها وضعت في الواقع في URL. ذلك في الواقع، واسمحوا لي من خلال التدقيق هذه. أين ترى إدخال المستخدم؟ أين ترى شيئا أني أنا كتبته هنا؟ نعم، وذلك "القطط". حق؟ لذلك اسمحوا لي استخلاص هذا إلى شيء أكثر بساطة. انا ذاهب الى حذف كل شيء عن هذا عنوان URL الذي أنا لا أفهم، وأنا ذاهب لمجرد ترك أنها this-- / بحث؟ ف = القطط. سنرى حيث q تأتي من في لحظة، ولكن هذا يبدو وكأنه الحد الأدنى كمية المعلومات التي قدمناها. والآن أنا ذاهب إلى هاهنا. ولاحظ أنه لا يزال يعمل. ما زلنا نعود في مجمله مجموعة من القطط. حتى غوغل مربي الحيوانات من هذا في هذه الأيام. انها 2016، وليس 1999. ولذلك لا يوجد غيرها من الاشياء التي بلدي متصفح يرسل إلى الخادم. ولكن هذا هو الحد الأدنى كل ما هو ضروري. 

ماذا يحصل؟ حسنا، أولا اسمحوا لي أن المضي قدما والذهاب العودة إلى Cloud9 واسمحوا لي أن المضي قدما وإغلاق علامات التبويب الخاصة بي في وقت سابق. وسأفعل هذا في بلدي تملك مجرد لحظة. انا ذاهب الى المضي قدما وإنشاء ملف جديد. وانا ذاهب لإنقاذ بأنها google.html. وانا ذاهب الى quickly-- جدا انا ذاهب الى سرقة، في الواقع، بعض من هذا النص فقط لتوفير الوقت. أنا ذاهب للصق هذا هنا. أنا لا أذهب إلى عناء مع أي أسلوب هذا الوقت. ونحن في طريقنا لهذه الكلمة "يا جوجل". وانا ذاهب للتخلص كل شيء في الجسم. وانا ذاهب الى القيام بما يلي. اسمحوا لي في التكبير. تشكيل action-- وكما ذكرت لفترة وجيزة earlier-- whoops-- وأنا لفترة وجيزة ذكر في وقت سابق، والعمل ل النموذج حيث يمكنك إرسال البيانات إلى. google.com/search ذلك. وطريقة أريد أن استخدام يمكن أن يكون واحدا من أمرين. ويمكن أن تكون إما "على"، كما واصلنا مناقشة، أو أنه يمكن أن يكون "آخر". أما الآن، فإن أساسية الفرق هو، إذا كنت تستخدم "الحصول على" جميع المعلومات التي يوفر يحصل على إرسال المستخدم في URL. 

هذا شيء عظيم لأشياء مثل البحث محركات وعدد قليل من التطبيقات الأخرى، ولكن في ما من شأنه الظروف كنت لا تريد أن ملء استمارة ووالمعلومات في نهاية المطاف ل URL، كما في شريط عنوان المتصفح الخاص بك؟ أي نوع من أشكال القيام you-- الحضور: [غير مسموع] ديفيد جيه مالان: نعم، مثل ماذا؟ الحضور: كلمات المرور. ديفيد جيه مالان: نعم، لذلك قمت بتسجيل الدخول في لالفيسبوك أو بعض المواقع. هذا إدخال المستخدم من نموذج مربع نص، ولكن ربما كنت لا ترغب في ذلك تظهر في عنوان المتصفح. لماذا؟ أعني، وربما هناك بعض تداعيات أمنية على الشبكة، لكن more-- تريد، ببساطة أكثر، ماذا لو الحجرة الخاصة بك، وغيرها الخاص كبيرة، أطفالك، يبدو زوجك عبر التاريخ متصفحك؟ هناك حق كلمة المرور هناك في تاريخ المتصفح الخاص بك. أن لا يشعر مثل التصميم الجيد. أو حتى أكثر من الناحية الفنية، لنفترض أنك تحاول لتحميل صورة على موقع فليكر أو الفيسبوك أو wherever-- وهذا هو الإدخال المستخدم، على الرغم من انها اكثر قليلا interesting-- كيف أقوم الالزام صورة في شريط العنوان؟ أنت نوع من نوع لا يمكن. أنت نوع من يمكن. ولكن، في الحقيقة، أنا مضطرة تخيل القيام بذلك. لذلك أنا بحاجة الى طريقة أخرى ل تحميل الصور على موقع على شبكة الانترنت، ويسمى هذا الأسلوب الآخر "وظيفة". ولكن الآن، وسوف نتحدث فقط عن "الحصول على"، والتي هي أبسط من اثنين. فإنه يضع مجرد جميع إدخال المستخدم في URL. 

حتى هنا شكل أنا خلق. أريد مدخلا. وتعلم ماذا؟ انا ذاهب الى اتخاذ تخمين هنا. انا ذاهب الى أذكر بلدي المدخلات "ف" ل "الاستعلام". وأعتقد أن هذا هو واحد من تصاميم الأصلية، ربما، من عام 1999. وبعد ذلك نوع من هذه المدخلات هو مجرد الذهاب ليكون "نص". ثم أنا ذاهب لآخر مساهمة لا حاجة الى اسم، كما سنقوم قريبا ترى، نوع منها هو "تقديم". وهذا يحدث ل تعطيني زر خاص. وهذا كل شيء. 

لذلك اسمحوا لي المضي قدما وحفظ هذا الملف. أنا ذاهب لأعود إلى بلدي المتصفح والذهاب إلى google.html. أدخل. وانها نوع من متفرق على أقل تقدير. ولكن اسمحوا لي أن المضي قدما وابحث عن "القطط". وتلاحظ أنا حاليا في هذا URL Cloud9. ولكن لحظة وفوق هذا، أين كنت آمل سوف ينتهي؟ 

الحضور: جوجل. 

ديفيد جيه مالان: جوجل. لذلك دعونا انقر فوق إرسال. وبالفعل لقد إعادة تنفيذها جوجل. حق؟ ومن أبسط. انها أخف وزنا. أعني، قانون بلدي أفضل من الواضح لهم، من الفوضى رأينا سابقا. وتعلم ماذا؟ أنا ذاهب لالتوابل هذا الأمر قليلا. لم أذكر هذا في وقت سابق. هناك علامات مثل H1، على العنوان 1، العنوان الأكثر أهمية في الصفحة. "بلدي جوجل،" سأتصل هذا. اسمحوا لي تحميل. انها تبدو أفضل قليلا بالفعل. و، في الواقع، أنت تعرف لماذا؟ لقد already-- أنا كذبت. قلت لم أكن أريد أن أسلوب هذا، ولكن انا ذاهب الى أسلوب هذا مثل قبل. وجسدي سيكون، دعنا نقول، مركز محاذاة النص. انها تبدو أكثر مثل جوجل بالفعل. 

أنا في حاجة الى كسر خط، على الرغم من لذلك زر إرسال. وكما تبين، كنت يمكن استخدام الفقرات، أو يمكنك أكثر حرفيا نقول فقط، أعطني كسر خط here-- العلامة ر. وإذا كنت إعادة تحميل هذه، والآن يذهب هناك. انها قبيحة قليلا، لذلك أنا يمكن أن تفعل فواصل متعددة، ولكن دعونا لا يحصل الجشع جدا هنا. حتى الآن دعونا نرى ما اذا كان يعمل ل "الكلاب". يبدو للعمل من أجل "الكلاب"، فضلا. فما هي الوجبات الجاهزة مقنعة هنا؟ احدا-- لم يكن قفزة هائلة ل إدخال عدد قليل من أكثر العلامات، مثل علامة نموذج في العلامة الإدخال. ولكن الأهم من هو، كل ما تفعلونه والاستفادة من فهمنا من HTTP وحقيقة أن أشكال تغير في نهاية المطاف ما هو في عنوان المتصفح، وهكذا، وبالتالي فإننا يمكن توفير ميكانيكيا المدخلات إلى ملقم عن طريق شكل HTML ومعرفة أن الخادم يفهم HTTP، مثلما يفهم جسمنا، مثل، تهز يدي، أن نفس البروتوكول، وهكذا نعود الرد أن نتوقع في نهاية المطاف. 

لذلك دعونا نحاول أن نفعل واحد آخر شيء الآن مع المحمول، وسوف make-- سأضيف هذا الرمز إلى الشرائح. حتى إذا كنت ترغب في العبث، كنت يمكن أن تأخذ بالتأكيد من هناك. ولكن انا ذاهب للذهاب قدما ونفعل شيئا واحدا. انا ذاهب الى المضي قدما و فتح بلدي مؤشر page-- الصفحة مرحبا يا كما كان من قبل، والتي لديه الكثير من هذا النص مزيف اللاتينية، أو معنى النص اللاتيني، وhas-- يبدو مثل هذا في هذا الحجم الخط. ولكن اسمحوا لي أن نمضي قدما ونفعل هذا. انا ذاهب للذهاب إلى Cloud9. ولم يكن لديك للقيام بهذه الخطوة. أنا فقط أفعل ذلك بنفسي. أنا ذاهب إلى انقر فوق مشاركة. وهذه هي ميزة فقط من Cloud9، حيث أنا يمكن أن تجعل بيئتي الجمهور. 

وفقط من أجل مظاهرة، واسمحوا لي أن تفعل ذلك. انا ذاهب الى جعل طلبي الجمهور. لاحظ انها تحذير لي، وأنا أنا على يقين من أنني أريد أن أفعل هذا، لأن هذا سوف يجعل الجميع في العالم، سواء أكانت هنا الآن أو مشاهدة الفيديو في وقت لاحق على الإنترنت قادرة على رؤية ما أرى. ولكن هذا موافق. انا ذاهب الى القول "تم". واسمحوا لي أن أشجعكم، إذا فعلت هذا correctly-- اسمحوا لي اختبار لأول مرة. المضي قدما، إذا كنت لا mind-- في مستعرض على جهاز الكمبيوتر الخاص بك، يذهب إلى هذا العنوان، ونأمل سترى بلادي النص اللاتيني. وأن يكون واضحا، انها تشغيل وليس على جهاز الكمبيوتر المحمول. انها في السحابة. انها على Cloud9، حرفيا، ولكن لقد قدمت لي مساحة العمل العام بحيث يمكن لأي شخص على الإنترنت يمكن الوصول إلى بلدي الصفحة الرئيسية اللاتينية. 

انتقل إلى URL نفسه على الهاتف الخاص بك، إذا كنت تستطيع. إذا كان سوف يكلفك، رغم ذلك، كنت يمكن أن ننظر فقط على الكتف. الحضور: [غير مسموع] ديفيد جيه مالان: أنا آسف؟ الحضور: [غير مسموع] ديفيد جيه مالان: مجرد كلمات لاتينية. هذا كل شئ. ولكن هذا ما يجب أن ترى. 

الجمهور: نعم. ديفيد جيه مالان: نعم. بلى. حسنا. لذلك يمكنني أن تصمد الخاص بك الهاتف لمجرد لحظة؟ لذلك، ونأمل، إذا كنت الوصول ذلك، يجب أن يبدو غير قابل للقراءة تقريبا. انها لا أزال في-- أعني، انها غير قابل للقراءة بسبب اللاتينية. لكنه أيضا غير قابل للقراءة ما سبب آخر؟ مثل، ما يضايقك هذا؟ الحضور: انها صغيرة. ديفيد جيه مالان: انها سوبر، سوبر صغيرة. فكيف يمكن حل هذه المشكلة؟ انها سوبر، سوبر صغيرة على الهاتف فيكتوريا وإذا كنت قد سحبت الامر نفسك، وربما صغيرة على الهاتف الخاص بك أيضا، إلا إذا لديها إعدادات الوصول مكنت. ما هذا؟ هل يمكن أن قرصة فقط و التكبير، وهي قابلة للتطبيق، ولكن بعد ذلك ترى فقط بضع كلمات في وقت واحد. لذا انتظر لحظة. أنا أعرف كيفية إصلاح هذه. حق؟ أنا يمكن أن تستخدم CSS، وأنا لا يمكن تغيير حجم الخط من 12 نقطة إلى 24 نقطة. ولكن الآثار الجانبية لذلك، بالطبع، سيكون الآن، على سطح المكتب أو الكمبيوتر المحمول، الآن هذا النص هو ضعف كبير. ولذا سيكون نوع من يكون لطيفا للتمييز بين الأجهزة، واتضح هناك هي الطرق لفعل ذلك. هناك العديد طرق مختلفة، في الواقع، حيث باستخدام CSS وميزات مربي الحيوانات أننا لن ندخل في تفاصيل كثيرة، يمكنك الاستعلام أساسا المتصفح ويقول، إذا الشاشة هو أصغر من ذلك العديد من بكسل، واستخدام هذا حجم الخط. إذا كانت الشاشة أكبر من هذا العديد من بكسل، واستخدام هذا حجم الخط الآخر. 

هل يمكن أن يكون حتى مربي الحيوانات لا يزال. إذا كنت قد أي وقت مضى زار صفحة الويب التي، على سطح المكتب، لديه قائمة كبيرة ربما خارج ل الجانب، وبعد ذلك كل من المحتوى هو إلى جانب ذلك menu-- هذا النوع من نموذج مشترك. القائمة على اليسار، المحتوى على اليمين، أو العكس بالعكس. لا يعمل حقا على الهاتف المحمول الخاص بك عندما الشاشة هو فقط هذا العدد الكبير من بكسل. حتى أكثر شيوعا على الهاتف المحمول هو، سوف القائمة الخاصة بك تحصل فجأة انهارت، وكان لديك ل انقر على زر لرؤيته، أو موقع سيضع القائمة فوقه ووضع المحتوى تحتها. ويمكنك تنفيذ هذه الأشياء بطرق متعددة أيضا. يمكنك ان تطلب من المبرمجين الخاص بك، مهلا، فريق، في أي وقت ترى طلب HTTP من الروبوت جهاز، جهاز مايكروسوفت، جوجل جهاز، جهاز أبل، واستخدام هذه حجم الخط واستخدام تخطيط القائمة هذا، وإلا استخدام تخطيط هذه الافتراضي أكبر. 

الآن، وذلك باستخدام ما تقنية الأساسية اليوم ويمكن استخدام المهندسين لمعرفة ما اذا كان اي فون، الروبوت الهاتف، جهاز كمبيوتر محمول، سطح المكتب زيارة خادم الشركة؟ حيث يحصلون على هذه المعلومات؟ 

الحضور: رأس؟ 

ديفيد جيه مالان: نعم، رأس HTTP. وذلك في كل طلب HTTP قادمة من عملائها لأجهزتهم تشمل، داخل تلك الظاهري المغلف، مجموعة كاملة رؤوس HTTP، واحدة منها هي المتصفح ونظام التشغيل حتى إذا كنت تهتم ل هذا المستوى من التفاصيل. الآن، انها سلسلة أبحث خفي، ولكن هناك وجود البرامج التي سوف فقط تبسيط ذلك، ويمكنك أن تسأل فقط في البرمجة code-- PHP، جافا، C ++، whatever-- ما هو الهاتف this-- ما الجهاز هو هذا العضو تستخدمه؟ وبعد ذلك يمكنك أن تقول، وتبين لهم هذا نسخة من الموقع اذا كان الهاتف. تبين لهم هذا الإصدار من الموقع اذا كان جهاز كمبيوتر محمول أو كمبيوتر سطح المكتب. ولكنك لا تحتاج حتى التعقيد من جانب الخادم. يمكنك أن تفعل حتى أبسط الأشياء. 

انا ذاهب للقيام بذلك. انا ذاهب الى المضي قدما في بلدي Cloud9 البيئة، وانا ذاهب لإضافة علامة أن تقول أنك رأيت في Google من قبل. انها تسمى بينية. وأنا لم أذكر هذا واحد، لذلك انا ذاهب الى نسخ هنا. اسم ميتا = "إطار العرض" ثم المحتوى = "العرض = عرض الجهاز، intital نطاق = 1 "وهذا كل شيء. 

لذلك قد يكون كذلك مثل التعويذة السحرية. انها ليست كل ما واضحة، ولكن هذا له أن تفعل شيئا مع العرض، والعرض هو مجرد جثة صفحة على شبكة الإنترنت، ومنطقة مستطيلة يعرف معظم الصفحة. وهذا مجرد قول المتصفح، أنت تعرف لماذا؟ جعل عرض هذه الصفحة على قدم المساواة على نحو فعال لعرض الجهاز. وبعبارة أخرى، لا تفترض أن لديك نوع من مساحة غير محدودة. نفترض أنك لا تملك إلا بقدر الفضاء، الجهاز نفسه هو كبير. وحتى الآن، إذا كنت تحميل هذه في متصفحي، وأنا لا أرى أي تغيير. ولكن إذا فعلت ذلك correctly-- و اسمحوا لي أن عبور بلدي fingers-- إذا لكم جميعا تحميل الهواتف الخاصة بك، هل نرى تغييرا مقنعة؟ نعم، هو هكذا- يضرب 

الحضور: [غير مسموع] ديفيد جيه مالان: نعم. حسنا. لذلك يمكن القول إن أكثر قابلية للقراءة الآن؟ لا تزال صغيرة، لكي نكون منصفين، ولكن ليس صغيرة بحيث تكون لا يمكن السيطرة عليها. وأنا لا يمكن بالتأكيد تجاوز هذا مع مزيد من CSS أو على جانب الملقم، ولكن على نحو متزايد ما كنت رؤية والمزيد والمزيد من الميزات إضافتها إلى environments-- من جانب العميل جافا سكريبت، كما سنناقش غدا، CSS، وHTML-- ذلك أن جميع هذه الاستفسارات ويمكن أن يتم على العميل وذلك ليزعج الخادم أقل كثيرا وليس لدينا لمواكبة، ل سبيل المثال، الهجوم المستمر من جديد نظام تشغيل الإصدارات، إصدارات متصفح جديدة. يمكنك فقط السماح للمتصفح طرح الجهاز، كيف كبيرة أنت، وجعل ثم منطقية إلى حد ما القرارات بناء على ذلك. ولكن سنرى المزيد من الفرص لاتخاذ قرارات منطقية غدا في سياق لغة البرمجة. 

لذلك، على أية أسئلة، ثم، على تطوير الشبكة؟ اليوم ليس برمجة الويب، في حد ذاته، لأن معظم كل شيء فعلناه كان جمالية جدا، اذا صح التعبير. ليس هناك عملية صنع القرار في التعليمات البرمجية التي كتبناه، وولهذا السبب HTML هي العلامات اللغة ليست لغة برمجة. ولكن غدا سوف نتخذ نظرة سريعة، في نهاية المطاف، في جافا سكريبت، الذي هو والبرمجة الفعلية اللغة التي تتيح لنا القيام به أكثر قليلا. 

أي أسئلة؟ حسنا، اسمحوا لي أن أقترح اثنين فرص اختياري لالواجبات المنزلية. واحد أعرف، هذه Cloud9 وحسابات لا تنتهي. فنحن نرحب بك لاستخدام لهم العبث به. انها مستوى خال من الخدمة. ندرك أنه إذا عند إنشاء مساحة العمل الخاصة بك، يمكنك جعل من الجمهور، أن لا يعني أن أي شخص على الإنترنت يمكن أن يرى ما كنت تكتب. ولذلك ربما يكون مجرد النظر لا إحراج نفسك إذا كنت وضع على شبكة الإنترنت الخاص بك أولا الصفحة هناك علنا ​​عن طريق الخطأ، ولكن لا أحد يذهب ل أعرف أن ننظر هناك على أي حال. 

وtwo-- اسمحوا لي أن إرم حتى هذا URL كذلك، خاصة إذا جئت في اليوم قليلا أقل راحة من غيرها، غير متأكد ما يعني كل هذه الأشياء. ندرك أن أكثر بكثير من هذا الفيديو، وهو على حد سواء وسيلة جيدة لتغفو وأيضا أن تضحك في حين القيام بذلك، لديها أيضا الكثير من اهتمام societally والمناقشات المتعلقة بالأمن فيها من جون أوليفر، وإن كان الممثل الكوميدي. 

ولكن إذا لم تكن هناك أسئلة أخرى، هذا يقودنا إلى حفل الاستقبال. لذلك لماذا لا استطيع تشغيل الموسيقى. ينبغي أن يكون هناك المشروبات والوجبات الخفيفة خارج. أنا سعيد لتختلط لكما دام الناس يود، الإجابة على الأسئلة أكثر واحد على واحد. ولكن، وإلا، فنحن نرحب بك لخلع في أي لحظة، وسنرى لك مرة أخرى صباح الغد لأكثر قليلا. حسنا شكرا.