DAVID J. Malan: Εντάξει. Είμαστε πίσω. Έτσι, ο στόχος αυτής της τελικής συνεδρίασης είναι να παρουσιάσω κάποια επιπλέον έννοιες αλλά και να δώσει σε όλους την ευκαιρία σε είδος τεντώσει τα δάχτυλά σας και πραγματικά να κάνουμε κάτι λίγο hands-on. Ο στόχος δεν είναι να γυρίσει είναι όλους μας σε προγραμματιστές web με οποιοδήποτε μέσο, ​​αλλά πραγματικά ακριβώς για να σας δώσει μια γεύση από μερικά των θεμελιωδών κατασκευάσματα του τι πηγαίνει σε web προγραμματισμό και σήμερα web ανάπτυξη, έτσι ώστε η στατική πλευρά της things-- καμία λογική, κανένας προγραμματισμός γλώσσα, απλά στατικό περιεχόμενο. Και αυτό θα μας δώσει την ευκαιρία για να δούμε πραγματικά τι ένα web server είναι, Δείτε τι ένα αρχείο HTML είναι, να δούμε τι είναι HTTP είναι στην πραγματικότητα εξυπηρετούν επάνω. Αλλά πριν βουτήξει μέσα, καμία αναδρομική ερωτήσεις σχετικά με το cloud computing ή την ασφάλεια ή οτιδήποτε στο μεταξύ; Όχι? Εντάξει, καλά, ας να το κάνετε αυτό, μόνο στην περίπτωση η διαδικασία της υπογραφής για κάτι που διαρκεί λίγα λεπτά. Θα αφήσουμε να το κάνει στο παρασκήνιο. Προχωρήστε, αν μπορούσε, να c9.io. αυτό το URL here-- Αυτό είναι ένα από τρίτους υπηρεσία-- πλατφόρμα ως υπηρεσία, εάν will-- ότι πρόκειται να σας καλέσει για να εγγραφείτε για ένα λογαριασμό, και πρόκειται να δώσει ο καθένας από εσάς ένας λογαριασμός στο λεγόμενο cloud σχετικά με την υποδομή κάποιου άλλου, μια εταιρεία που ονομάζεται Cloud9. Αλλά τι είναι ωραίο για αυτό είναι ότι σας δίνουν μια προσέγγιση ενός πραγματική ανάπτυξη του πραγματικού κόσμου περιβάλλοντος, αν και στο σύννεφο και σε ένα web browser, και θα χρησιμοποιήσουμε αυτό το πραγματικά πειραματιστείτε λίγο σήμερα. Και στη συνέχεια να προχωρήσει και απλά περιηγηθείτε το δρόμο σας προς τη διαδικασία εγγραφής αν μπορούσες. Γι 'αυτό να συμβεί για να χρησιμοποιήσετε αυτό στην τάξη Διδάσκω για όλους τους μαθητές μας, τόσο στην πανεπιστημιούπολη και off τώρα, και αυτό είναι αντικατασταθεί ποια ιστορικά ήταν διαφορετικά λήψης λογισμικού. Έτσι, ό, τι ήταν να αποκτήσουν πρόσβαση σε είναι μία από αυτές τις εικονικές μηχανές, κατ 'ουσίαν, ότι περιέγραψα νωρίτερα. Έτσι, η εν λόγω εταιρεία Cloud9 πιθανώς ενοίκια από τρίτη party-- πράγματι σε αυτή την περίπτωση, ένα ολόκληρο Google-- δέσμη των εικονικών μηχανών ότι με κάποιο τρόπο τεμαχίσουν σε η ψευδαίσθηση της ατομικής servers ότι κάθε ένας από εμάς έχει τον πλήρη έλεγχο. Δεν είναι αρκετά ακριβές να πούμε ότι είναι εικονικές μηχανές, όμως, γιατί ό, τι Cloud9 χρησιμοποιεί στην πραγματικότητα Είναι μια κάπως νεότερη τεχνολογία που ονομάζεται εμπορευματοκιβώτια. Και επιτρέψτε μου να αρπάξει αυτή την εικόνα εδώ για να ζωγραφίσει αυτή την εικόνα. 

Ένα δοχείο είναι, αν θυμάστε την εικόνα από νωρίτερα, λίγο ελαφρύτερο βάρος από μια εικονική μηχανή. Στην πραγματικότητα, ενώ τελευταία φορά μιλήσαμε για εκεί είναι ένα λειτουργικό σύστημα και ένα hypervisor και, στη συνέχεια, φιλοξενούμενο λειτουργικό σύστημα, επισκεπτών λειτουργικό σύστημα, επισκεπτών λειτουργίας συστήματος, στην κορυφή του σας φυσικό υλικό, η διαφορά με αυτήν την νεότερη τεχνολογία, εμπορευματοκιβώτια, είναι ότι όλοι με κάποιο τρόπο μοιραστεί το ίδιο λειτουργικό σύστημα. Αλλά εξακολουθούν να δημιουργούν η ψευδαίσθηση του καθενός έχει τη δική του αποκλειστική διοικητικά δικαιώματα και τα αρχεία στο διακομιστή. Αλλά υπάρχει λιγότερη λογισμικού ανάμεσα σε εσάς και το υλικό. Το αποτέλεσμα των οποίων είναι, σε Θεωρητικά, μια υψηλότερη απόδοση, επειδή χρησιμοποιείτε ή σπατάλη λιγότερους πόρους σε αυτό το λεγόμενο στρώμα virtualization. Έτσι, αυτό ονομάζεται εμπορευματοκιβώτια από τη φύση μέσω μιας τεχνολογίας που ονομάζεται Λιμενεργάτη, η οποία είναι πολύ πολύ να έρχεται σε δική της. Και αυτό είναι κάτι που Οι μηχανικοί της εταιρείας σας θα μπορούσε να είδος είδος αρχίσουμε να μιλάμε σχετικά σύντομα, εάν δεν το έχετε ήδη, αν και δεν υπάρχει βεβαίως καμία λόγος για να μεταβείτε σε οποιαδήποτε bandwagons. 

Έτσι, με ότι είπε, αυτό που ίσως δούμε τώρα είναι μια οθόνη που μοιάζει λίγο σαν αυτό. ΕΝΤΆΞΕΙ. Και μόλις μου τηλεφωνήσει πάνω, αν όχι. Και αν so-- εγώ θα έρθω αν δεν είναι. Προχωρήστε και κάντε κλικ στο μεγάλο συν για να δημιουργήσετε ένα χώρο εργασίας, και θα δείτε μια οθόνη σαν αυτή. Μπορείτε να καλέσετε τον χώρο εργασίας αναφέρουμε ό, τι θέλετε για τώρα. Και ακριβώς στην πραγματικότητα για την απλότητα, πάει and-- καλά, κάποιοι από εσάς έχουν ήδη χώρους εργασίας. Κλήση αυτό ό, τι want-- των επιχειρήσεων, Χάρβαρντ, Πέμπτη, ό, τι θέλετε. Δεν χρειάζεται μια περιγραφή. Μπορείτε να αφήσετε ιδιωτικά, εκτός αν έχουν ήδη μια δέσμη των χώρων εργασίας. Αν είστε αναγκασμένοι να το δημοσιοποιήσει, ότι το πρόστιμο για τη σημερινή σκοπούς. Εδώ, επίσης, είναι ένα από τα upsells. Μπορείτε να πάρετε ένα ιδιωτικό χώρο εργασίας με αθέτηση. Αλλά αν θέλετε περισσότερα, θα πρέπει να πληρώσει για περισσότερα. Διαφορετικά, θα σας αναγκάσει να δημοσιοποιήσει το έργο σας. Αλλά αυτό είναι εντάξει, επειδή, επίσης, στόχο αυτό σε κοινότητες ανοιχτού κώδικα να ενθαρρύνει τους ανθρώπους να στην πραγματικότητα συνεργάζονται. 

Και το τελευταίο πράγμα που είναι σημαντικό, όμως, είναι, αφού επιλέξετε ένα όνομα και αφού επιλέξετε ιδιωτικό ή δημόσιο, κάντε κλικ HTML5, το μεγάλο πορτοκαλί εικονίδιο δεύτερος από αριστερά, και Στη συνέχεια κάντε κλικ στην επιλογή Δημιουργία χώρου εργασίας. Και αυτό μάλλον θα πάρτε ένα λεπτό ή έτσι, αλλά θα έχουν στη συνέχεια μια περιβάλλον, τη στιγμή που θα το κάνουμε αυτό, που μοιάζει θυμίζει τι έχω στην οθόνη εδώ τώρα. Αλλά, πάλι, μπορεί να πάρει ένα λεπτό ή περισσότερο για να πάρετε σε αυτήν την οθόνη αφού κάνετε κλικ στην Δημιουργία χώρου εργασίας. Αλλά ακριβώς μου σημαίας επί αν θέλετε μου αρέσει να ρίξετε μια ματιά σε τίποτα ή συμβουλές. Εντάξει. Έτσι, Πάω να υπόβαθρο αυτό για τώρα. Τηλεφώνησέ μου πάνω αν φαίνεται να έχετε οποιεσδήποτε τεχνικές δυσκολίες. Αλλά, πάλι, μπορεί να πάρει μια λίγο γι 'αυτό για να ανοίξει. Και ας πάμε μπροστά και να μιλήσουμε για το τι αυτό σημαίνει στην πραγματικότητα να κάνει μια ιστοσελίδα, τι HTML είναι, και πώς όλα αυτά τώρα διασυνδέει καθώς αρχίζουμε να χρησιμοποιούν πραγματικά κάποια από την τεχνολογία. Έτσι αποδεικνύεται ότι μπορώ να πάει στο μικρό μου Mac εδώ, ανοίξετε ένα απλό πρόγραμμα που ονομάζεται TextEdit, ή στα Windows θα μπορούσα ανοιχτή κάτι που ονομάζεται Notepad.exe. Και θα μπορούσα απλά να κάνουμε κάτι όπως this-- "Hello, world." Και τότε θα μπορούσε να σώσει αυτό ως hello.txt Έτσι, δεν έχει μαγικό εκεί. Αυτό δεν έχει καμία σχέση με το web προγραμματισμού, τίποτα να κάνει με την HTML. Απλά δημιουργώντας ένα απλό αρχείο κειμένου. Αλλά αποδεικνύεται ότι ένα web σελίδα ακριβώς είναι κυριολεκτικά αυτό. Είναι ένα απλό αρχείο κειμένου που περιέχει το κείμενο ότι μπορείτε να πληκτρολογήσετε στο πληκτρολόγιό σας, αλλά συνήθως αλλά όχι πάντα καταλήγει στο να μην .txt αλλά .html ή .htm. Και δεν το κάνετε μόνο πληκτρολογήστε λέξεις στο αρχείο. Μπορείτε πραγματικά πρέπει να χρησιμοποιήσετε τα πράγματα που ονομάζεται ετικέτες ή, γενικότερα, κάτι που ονομάζεται γλώσσα σήμανσης. 

Έτσι, Πάω να πληκτρολογήσετε πολύ γρήγορα και στη συνέχεια να εξηγήσει τα ακόλουθα. Πάω στην πρώτη πληκτρολογήστε αυτό που λέει, hey, πρόγραμμα περιήγησης, έρχεται εδώ ένα ιστοσελίδα γραμμένη σε HTML. Και αυτά τα δύο πράγματα μαζί πω, hey, πρόγραμμα περιήγησης, τα ακόλουθα είναι πράγματι HTML. Γεια σου, πρόγραμμα περιήγησης, εδώ έρχεται το το κεφάλι ή το επάνω μέρος της σελίδας μου. Γεια σου, πρόγραμμα περιήγησης, μέσα από την κορυφή του σελίδα μου, βάλτε έναν τίτλο που είναι, "γειά σου, κόσμος." Γεια σου, πρόγραμμα περιήγησης, αφού ο επικεφαλής της μου σελίδα, εδώ έρχεται το σώμα της σελίδας μου. Και, hey, πρόγραμμα περιήγησης, το σώμα μου σελίδα πρέπει επίσης να πω, "hello world". Έτσι ποια είναι τα βασικά στοιχεία εδώ; Αυτό είναι ό, τι είναι γενικά ονομάζεται δήλωση doc-τύπου, και, ειλικρινά, είναι ένα μικρό δύσκολο να απομνημονεύσετε αυτό από την πρώτη. Μπορείτε ακριβώς το είδος του copy-paste αυτό. Αυτό είναι το επίσημο τρόπο της λέει, hey, πρόγραμμα περιήγησης, Είμαι με τη χρήση HTML έκδοση 5 που βγήκε κάπως πρόσφατα. Είναι ένα μαγικό ξόρκι ότι ορισμένοι ανθρώπους με μια κακή αίσθηση του σχεδιασμού αποφάσισε να θέσει στη κορυφή του αρχείου. Ακόμα κι αν αυτό είναι ένα λίγο απόκρυφες, αυτό είναι όλο το means-- hey, πρόγραμμα περιήγησης, εδώ έρχεται με την έκδοση 5 της HTML. 

Το υπόλοιπο αυτό ήταν μαζί μας για αρκετό καιρό τώρα, ιστορικά, αλλά είναι ήδη εξελίσσεται, και είναι ίσως πάρει λίγο απλούστερο. Παρατηρήστε μερικά χαρακτηριστικά από ό, τι έχω υπογράμμισε. Υπάρχουν αυτά τα πράγματα με γωνία brackets-- τον αριστερό βραχίονα και η δεξιά αγκύλη. Και παρατηρήστε τη συμμετρία εδώ. Και από τη συμμετρία, εννοώ, ακριβώς όπως εγώ έχουν αυτή την ετικέτα έναρξης εδώ ή ένα ανοιχτό ετικέτα αν θέλετε, εδώ κάτω έχω ένα κοντά ετικέτα ή ετικέτα λήξης που είναι διαφορετικά μόνο στο βαθμό που έχει αυτό κάθετο στην αρχή της λέξης HTML. Και μπορείτε να σκεφτείτε αυτό όπως ήμουν επιπόλαια προτείνει πριν, hey, πρόγραμμα περιήγησης, εδώ έρχεται κάποια HTML. Και, αντιστρόφως, hey, πρόγραμμα περιήγησης, αυτό είναι ότι για την έναρξη HTML-- και το τέλος. 

Εν τω μεταξύ hey, πρόγραμμα περιήγησης, εδώ έρχεται το κεφάλι της σελίδας μου. Γεια σου, πρόγραμμα περιήγησης, αυτό είναι για το κεφάλι. Γεια σου, πρόγραμμα περιήγησης, είναι εδώ το σώμα της σελίδας μου. Γεια σου, πρόγραμμα περιήγησης, αυτό είναι για το σώμα. Και μέσα από αυτό είναι μερικοί αυθαίρετο κείμενο για τώρα. Και εσωτερικό της κεφαλής, εν τω μεταξύ, είναι κάποια αυθαίρετη, αλλά ετικέτα, να το πω έτσι, το κείμενο που λέει, τον τίτλο της σελίδας μου είναι «γειά σου, τον κόσμο." Τώρα, για τώρα, μπορείτε να υποθέσουμε ότι τα προγράμματα περιήγησης έχουν only-- ή, μάλλον, ιστοσελίδες έχουν μόνο δύο parts-- το κεφάλι και το σώμα. Και το κεφάλι είναι γενικά μόνο όπως και η γραμμή μενού, η ουσία πραγματικά μόνο στην κορυφή. Και το σώμα είναι τα κότσια της σελίδας, τα πάντα σε αυτό το μεγάλο ορθογώνιο που γεμίζει την οθόνη. Έτσι, Πάω να προχωρήσει και να το κάνουμε αυτό. Θα πάω να προχωρήσει και να κάντε κλικ στο κουμπί Αποθήκευση, Αποθήκευση αρχείου. Και Πάω να αποθηκεύσετε αυτό ως hello.html, και είμαι απλώς πρόκειται να το βάζουμε στην επιφάνεια εργασίας μου. Και Πάω να πάει προχωρήσει και κάντε κλικ στο κουμπί Αποθήκευση. Και notice-- Mac μου τουλάχιστον φωνάζει σε μένα. Είστε σίγουροι ότι θέλετε να το κάνετε αυτό; Και Πάω να πω, ναι, χρησιμοποιούν HTML. Ξέρω καλύτερα σε αυτή την περίπτωση. Και τώρα είμαι πρόκειται να πάει στην επιφάνεια εργασίας μου όπου έχω αυτό το αρχείο ξαφνικά. Και Πάω να κάνετε διπλό κλικ σε αυτό. Και θα παρατηρήσετε ότι, προεπιλογή, το Chrome ανοίξει. Αυτό συμβαίνει γιατί αυτό είναι προεπιλεγμένο πρόγραμμα περιήγησης. Και αυτό ακριβώς λέει, "γειά σου, τον κόσμο." Αλλά λέει "γεια σου, κόσμο »σε δύο μέρη. Παρατηρήστε πάνω αριστερά. Αρκετά δύσκολο να χάσουμε αυτό. Είναι μεγάλο και τολμηρό. Και πού αλλού δεν φαίνεται να πει, "Γεια σου, κόσμε"; 

ΚΟΙΝΟ: Η καρτέλα. 

DAVID J. Malan: Ναι, η ίδια η καρτέλα. Έτσι, όταν μου είπε ο επικεφαλής της σελίδα είναι τα πάντα top-- και πράγματι αυτό είναι ο τίτλος. Είναι ακριβώς στην καρτέλα εδώ. Και μπορώ να τραβήξει αυτήν την καρτέλα έξω, έτσι ώστε να μην συγχέουμε. Αυτή είναι μόνο μια ενιαία καρτέλα τώρα, και μάλιστα βλέπουμε "Γεια σου, κόσμε" εδώ και το "Hello, world" εδώ κάτω. Έτσι, αρκετά απλή. Αλλά είναι επίσης αρκετά απλή. Και, πραγματικά, εγώ μεγέθυνση. Μπορώ να αλλάξω το μέγεθος της γραμματοσειράς μόνο για να μεγεθύνετε για την προσβασιμότητα. Αλλά ας κάνουμε τώρα κάτι λίγο πιο ενδιαφέρον. 

Πάω να go-- κραυγών, ας με πάρει πίσω στο αρχείο κειμένου μου. Πάω πίσω στο μου αρχείο κειμένου, και θα πάω να αλλάξει αυτό και να πω "Γεια σας, Disney World." Αποθηκεύσετε. Και να πάει πίσω στο μου πρόγραμμα περιήγησης και κάντε κλικ στο κουμπί Ανανέωση. Και τώρα, φυσικά, λέει "Disney World." Και Πάω να μεγεθύνετε τεχνητά σε ακριβώς έτσι είναι πιο εύκολο να δούμε. Μέχρι τώρα, δυστυχώς, εγώ το είδος θέλετε to-- πραγματικότητα, αυτό είναι ένα χαρακτηριστικό Mac. Θέλω να κάνετε κλικ στο Disney World και να πάει κάπου σαν disney.com, αλλά αυτό δεν λειτουργεί. Έτσι, μια βασική αρχή του web είναι υπερσυνδέσμους, συνδέσμους που πάνε αλλού. Λοιπόν, πώς μπορώ να το κάνω αυτό; Λοιπόν, θα μπορούσα να πω, "Γεια σας, http://www.disney.com." Αποθήκευση αυτής. Φορτώνω πάλι. Αλλά αυτό πάρα πολύ, δεν είναι clickable. Και τι ωραία εδώ, έστω και αν Αυτό δεν είναι λειτουργική ακόμα, είναι ότι φαίνεται ότι ο πρόγραμμα περιήγησης κάνει κυριολεκτικά μόνο τι μπορώ να πω για να το κάνουμε. Έτσι, αν εγώ απλά πληκτρολογήστε μια διεύθυνση URL όπως αυτό, είναι ακριβώς πρόκειται να μου δείξει το URL. Θα πρέπει να χρησιμοποιήσετε ετικέτες ή σήμανσης γλώσσας στην πραγματικότητα να πει το πρόγραμμα περιήγησης για να κάνουμε ακόμη περισσότερα. Έτσι, Πάω να πάει μπροστά και να διαγράψετε αυτό για μια στιγμή. Και Πάω να πω, hey, πρόγραμμα περιήγησης, ξεκινήστε μια άγκυρα εδώ, ένας σύνδεσμος να το πω έτσι. Και η υπερ-αναφορά, ο προορισμός της άγκυρας, θα πρέπει να είναι αυτό το URL. Και παρατηρήσετε εισαγωγικά μου. Θα μπορούσα να χρησιμοποιήσω μονά εισαγωγικά, πάρα πολύ, αλλά θα πρέπει να είναι συνεπής, και θα ήθελα γενικά απλά χρησιμοποιήστε διπλά εισαγωγικά για να το κρατήσετε απλό. Ανακοίνωση Πάω να κλείσει την ετικέτα. Και τότε εδώ θα πάω να πει, "Disney World." Και τώρα χρειάζομαι κάποια symmetry-- ανοιχτό βραχίονα / α, κλειστό βραχίονα. 

Έτσι, αυτό που έχω εισαχθεί; Είχαμε μερικές ετικέτες ήδη. HTML, Head, Τίτλος, Φορέας, είναι όλες οι ετικέτες, να το πω έτσι, με ανοικτού και κλειστού ομολόγων. Αλλά προειδοποίηση, αυτό είναι το είδος των ριζικά διαφορετικές. Αυτό είναι ό, τι θα καλέσουμε σε μορφή HTML ένα χαρακτηριστικό. Και ένα χαρακτηριστικό είναι μόνο ένα ζεύγος κλειδιού-τιμής. Αυτό είναι ένα κοινό πράγμα στη υπολογιστή science-- ζεύγος κλειδιού-τιμής. Είναι το είδος του εργαλείου του εμπορίου. Ένα κλειδί και μια τιμή. Μια λέξη και στη συνέχεια κάποιες άλλη λέξη ή λέξεις. Και σε αυτή την περίπτωση, το κλειδί είναι href, και η τιμή είναι η πλήρης διεύθυνση URL. Και τι είναι το χαρακτηριστικό που κάνει είναι να επηρεάζει τη συμπεριφορά μιας ετικέτας. Και σε αυτή την περίπτωση, θα πρέπει να επηρεάσει η συμπεριφορά του ετικέτα αγκύρωσης, γιατί πρέπει να αγκυροβολήσουν συνδέσμου κάπου. Και πώς να το κάνεις αυτό είναι μέσω του χαρακτηριστικού. 

Έτσι, Πάω να πάει μπροστά και να αποθηκεύσετε το αρχείο τώρα. Πηγαίνετε πίσω στο πρόγραμμα περιήγησης και reload μου. Και, ιδού, έχουμε τώρα το απαρχή μιας νόμιμης ιστοσελίδας. Super-απλό, αλλά αν αιωρούνται πάνω this-- ανακοίνωση στην κάτω αριστερή γωνία, Είναι σούπερ-μικρά. Αλλά εσείς δείτε www.disney.com. Και αν το κλικ, πράγματι αυτό whisks μου μακριά για να disney.com. Τώρα, το περίεργο πράγμα εδώ είναι ότι δεν είναι η best-- το πιο εμπορεύσιμα URL, αλλά ότι είναι εντάξει, επειδή αυτό το αρχείο δεν υπάρχουν στο World Wide Web. Υπάρχει ως ένα τοπικό αρχείο σε φαινομενικά Οι χρήστες μου directory-- / jharvard-- για τον John Harvard-- / desktop. Αλλά έχει μια διεύθυνση URL. Συμβαίνει ακριβώς να είναι τοπικές. Δυστυχώς, κανένας από εσάς να επισκεφθείτε αυτό, γιατί αν πληκτρολογήσετε αυτό το URL, θα ήθελα να λέει το πρόγραμμα περιήγησής σας, αναζητήστε ένα αρχείο που ονομάζεται hello.html στο σκληρό σας δίσκο. Και, φυσικά, αν έχετε παρακολουθεί μαζί με το χέρι, δεν πρόκειται να υπάρχουν. 

Έτσι ώστε να είναι μια χαρά. Χρειαζόμαστε ακόμη έναν τρόπο, εν τέλει, για να πάρει αυτό το αρχείο στο διαδίκτυο, αλλά ας δώσουμε έμφαση, εκτός ένα ζευγάρι των συνέπειες για την ασφάλεια του τι ακριβώς είδε και γραβάτα πίσω στην προηγούμενη συζήτηση από το πρωί. Αποδεικνύεται ότι, αν ένας πρόγραμμα περιήγησης κυριολεκτικά ακριβώς κάνει τι μπορώ να πω για να το κάνουμε, και φαίνεται να είναι η περίπτωση που μία ετικέτα αγκύρωσης είναι επηρεάζεται από την αξία του αυτό το χαρακτηριστικό που ονομάζεται href αλλά εμφανίζει αυτό κείμενο, αυτό θα φαίνεται να σημαίνει ότι θα μπορούσα να βάλω το URL και στα δύο μέρη και, στη συνέχεια, τοποθετήστε ξανά και τώρα δείτε το URL και να πάει στο URL. Προειδοποίηση, αν αιωρείται πάνω από την κάτω-αριστερά, Είμαι πράγματι πρόκειται ακόμα να disney.com. 

Έτσι, αν έχετε ποτέ phished-- Ρ-Η-Ι-δ-Η-Ε-D-- με μία από αυτές τις ψεύτικες e-mail από, όπως το PayPal τράπεζά σας, πιθανώς έχετε πάρει τις συνδέσεις στο εσωτερικό του ηλεκτρονικού ταχυδρομείου που διαβάζετε αυτό σας λέει να κάνετε κλικ εδώ για να μεταβείτε επιβεβαιώνουν κωδικό πρόσβασης ή επιβεβαιώστε την ημερομηνία γέννησής σας σας ή κοινωνική ή κάτι κοινωνικά μηχανική μπορείτε να αποκαλύψει πληροφορίες. Λοιπόν, θα μπορούσα να το είδος του να λάβει πλεονέκτημα αυτό, δεν θα μπορούσα; Θα μπορούσα να πω κάτι όπως, www.paypal.com. Και αντί disney.com, Ι θα μπορούσε να πάει στο, όπως, badguy.com. Φορτώνω πάλι. Και πόσο εύκολο είναι να κοροϊδεύω, ειδικά ένα μη τεχνικό αναγνώστη ή ένα τροχάδην ανάγνωση αναγνώστη, παρά να κάνετε κλικ μια σύνδεση όπως αυτή, η οποία αν κάνω κλικ it-- Εγώ πραγματικά δεν θέλουν να πάνε badguy.com. Δεν ξέρω τι είναι πραγματικά εκεί. Έτσι paypal.com, προειδοποίηση, είναι αυτό που λέει ότι πρόκειται να, αλλά φυσικά, αν κοιτάξουμε προς τα κάτω σούπερ-χαμηλά, είναι λίγο θολή, αλλά λέει badguy.com. Αυτός είναι ο μόνος πω αυτή τη στιγμή ότι θα πάω σε λάθος μέρος. Και όταν είπα νωρίτερα ότι οι τράπεζες Πραγματικά δεν πρέπει να ενθαρρύνουν ή να εκπαιδεύσει χρήστες να κάνουν κλικ συνδέσεις, αυτό το είναι μόνο μία εκδήλωση του. Και είναι τόσο απλό. Είστε πλέον ένας αντίπαλος, αν κάνετε κάτι σαν αυτό και προσπαθούν να ξεγελάσουν τον χρήστη σε επισκέπτονται την ιστοσελίδα σας. Αλλά για τώρα, θα συνεχίσουμε τα πράγματα ωραία και καθαρή. Εμείς πάμε για να πάει μπροστά και rewind αυτές τις αλλαγές. Ανανέωση της σελίδας. Και να πάω πίσω στο disney.com. 

Ας δούμε αν δεν μπορούμε να πειράζω αυτό εκτός λίγο περισσότερο. Έτσι, "γειά σου, Disney World." Πάω να πω εδώ κάτω. Ίσως Πάω να κάνω κάποια αίθουσα. «Ελπίζουμε να απολαύσετε τη διαμονή σας!" Αποθηκεύσετε. Φορτώνω πάλι. Δεν είναι rea-- ότι δεν είναι ό, τι είχα την πρόθεση, έτσι δεν είναι; Θέλω να πω, αν είμαι θεραπεία κείμενό μου αρχείο, όπως ένα πρόγραμμα επεξεργασίας κειμένου, τι έκανες ελπίζω θα συμβεί εδώ; Ναι, νιώθω σαν να υπάρχει θα πρέπει να είναι μια αλλαγή γραμμής εδώ, έτσι ώστε να αισθάνεται λάθη με κάποιο τρόπο. Αλλά αυτό είναι πραγματικά σκόπιμη, επειδή ακριβώς όπως και πριν, το πρόγραμμα περιήγησης πρόκειται μόνο για κάνει ό, τι μπορείτε να πείτε για να το κάνει. Δεν το έχω πει να σπάσει τις γραμμές. Εγώ δεν έχω πει να μετακινηθείτε προς τα κάτω, ακόμα και όμως, διαισθητικά, νιώθω σαν να έκανα. Έτσι αποδεικνύεται χρειαζόμαστε λίγο πιο σήμανσης, και πάω να το διορθώσω αυτό ως εξής. Πάω να πρόλογο αυτό το πρώτο γεια με ό, τι λέγεται παράγραφο ετικέτα. Και τότε Πάω να πάει μπροστά και τυλίξτε αυτό άλλη ποινή Σε μια άλλη παράγραφο ετικέτα, μολονότι από όπου και αν υπερ-σύντομες παραγράφους. Τώρα Πάω να σώσει. Φορτώνω πάλι. Και τώρα έχουμε ότι χώρο, και το είδος της έχουν τη σημασιολογία της δύο ξεχωριστές παραγράφους. 

Αυτό είναι όλα ωραία και καλά, αλλά θα είναι ωραίο να προσθέσετε μια εικόνα σε αυτή τη σελίδα, έτσι Πάω να πάμε να βρούμε Μίκυ Μάους στις Εικόνες Google. Και μόνο για διασκέδαση, είμαι πρόκειται να αρπάξει αυτή την εικόνα. Πάω να προχωρήσει τώρα και πιάσε το URL αυτής της εικόνας, αν υπάρχει διαφορετική τρόποι να γίνει αυτό. Προς το παρόν, είμαι απλώς πρόκειται να αντιγράψετε τη διεύθυνση URL. Πάω να πάει πίσω στο κείμενο μου αρχείο, και θα πάω να πω εδώ, img src = απόσπασμα unquote ότι η διεύθυνση URL, υπερ-μακρά. Και τότε η έννοια της εικόνα είναι λίγο διαφορετική. Δεν υπάρχει πραγματικά καμία ιδέα της εκκίνησης μια εικόνα και τελειώνει μια εικόνα, σαν ένα ξεκίνημα επισημάνετε ένα τέλος ετικέτα. Έτσι ώστε να αισθάνεται λίγο περίεργο να με σημασιολογικά να το κάνετε αυτό, να έχουν μια ετικέτα close-εικόνα. Δεν είναι εσφαλμένη. Είναι απόλυτα σωστό, και αυτό είναι που ενθάρρυνε, αλλά υπάρχει στενογραφία σημειογραφία. Δεν μπορώ να το είδος της ταυτόχρονης ανοίξετε και να κλείσετε την ίδια ετικέτα, και ότι θα κάνει το πρόγραμμα περιήγησης ευτυχισμένη. Έτσι είναι λίγο πιο σύντομη για τα πράγματα ότι εννοιολογικά πραγματικά δεν το κάνουν έχει νόημα να ξεκινήσει και το τέλος. Απλώς υπάρχουν, ή δεν είσαι. 

Έτσι, Πάω να σώσει αυτό και να πάει πίσω για να μου "Γεια σου, κόσμε" σελίδα και reload. Και αυτό είναι λίγο εκτός ελέγχου, επειδή αυτή η εικόνα είναι πραγματικά λίγο μεγάλη, αλλά αυτό είναι εντάξει. Θα μπορούσα να αλλάξετε το μέγεθος σε ένα πρόγραμμα. Ή ξέρετε τι. Ακριβώς για να αποδείξει, είμαι πρόκειται πραγματικά να πω ότι το πλάτος αυτού του πράγματος πρέπει μόνο να είναι 200 ​​pixels, 200 κουκκίδες. Επιτρέψτε μου να πάει μπροστά και να σώσει και να φορτώσετε εκ νέου, και τώρα η σελίδα φαίνεται λίγο πιο λογικό. Αλλά παρατηρήσετε το μοτίβο. Λοιπόν, έχω το είδος του δίδαξε σε όλους σας της HTML με κάποια έννοια, τουλάχιστον εννοιολογικά, επειδή όλα HTML είναι είναι αυτά tags-- ανοιχτή ετικέτες, κλειστά ετικέτες, και τις ιδιότητες που τροποποιήσουν τη συμπεριφορά τους. Και, προφανώς, κάθε ετικέτα μπορεί να έχει μηδέν ή ένα ή δύο ή περισσότερα χαρακτηριστικά, το καθένα από το οποίο κάνει κάτι λίγο διαφορετικό. Τώρα, πώς ξέρεις τι υπάρχει; Μπορείτε απλά να ακούσετε κάποιον όπως μου να σας πω ό, τι υπάρχει, ή απλά το Google γύρω για ένα σεμινάριο σε HTML, και είναι πραγματικά αυτό απλό. 

Πραγματικά, όταν ήμουν φοιτητής χρόνια και έμαθα HTML, μία της διδασκαλίας των μαθηματικών μου βοηθούς μόλις πέρασε ένα μικρό κομμάτι του χρόνου τη διδασκαλία μου για ομοειδή μισή ώρα, μια ώρα, και στη συνέχεια ήμουν στο δρόμο μου. Ήμουν στο δρόμο μου προς την πραγματοποίηση τα πιο αποτρόπαια ιστοσελίδες ποτέ, η οποία, προφανώς, δεν έχω πραγματικά προχωρήσει πέρα. Αλλά το θέμα είναι ότι, από τη στιγμή που κατανοήσουμε αυτές τις απλές ideas-- αν απόκρυφες text-- αλλά αυτά τα απλά ιδέες για την έναρξη μιας σκέψης και το κλείσιμο μιας σκέψης, διατηρώντας όλα όμορφα ισορροπημένη, αναζητούν κάτι επάνω, τροποποιώντας το η συμπεριφορά της εν λόγω ετικέτας, αυτό είναι πραγματικά όλα υπάρχει σε αυτό. Και στην πραγματικότητα, αν τώρα πάμε να κάτι σαν google.com-- στην πραγματικότητα, ας πάμε μια θέση λίγο πιο reasonable-- stanford.edu. Και Πάω να πάει στην προβολή, Developer, Προβολή προέλευσης. Είναι άσχημο, αλλά notice-- και εγώ θα μεγεθύνετε ειδοποίηση κάποια πράγματα που είναι γνωστά ήδη. Υπάρχει αυτό εδώ, το οποίο είναι ένα πρόγραμμα περιήγησης. Εδώ έρχεται HTML5. Υπάρχει HTML. Προφανώς, υπάρχει μια χαρακτηριστικό που δεν το έκανα χρήση που ορίζει η τη γλώσσα της σελίδας, και αυτό μπορεί να βοηθήσει με την αυτόματη μετάφραση και τέτοια πράγματα. Εδώ είναι ο επικεφαλής της σελίδας. Εδώ είναι ο τίτλος της σελίδας του Στάνφορντ. Υπάρχει μια ετικέτα δεν το έκανα μιλήσουμε για Meta tag yet--. Είναι ακριβώς το είδος του γενικές πληροφορίες. Βοηθά με το SEO, ή Βελτιστοποίηση αναζήτησης του κινητήρα, ή τα αποτελέσματα του Google αναζήτησης ή παρόμοια. Αλλά αν συνεχίσετε να ψάχνετε, να τηρούν αναζητούν, εδώ είναι η ετικέτα του σώματος. Και υπάρχει τσαμπιά από άλλους ετικέτες δεν έχουμε μιλήσει ακόμα. Αλλά Div είναι ένα για ένα διαίρεση της σελίδας. Είναι σαν ένα αόρατο τετράγωνο αν το είδος του θέλουν να διανοητικά χωρίζουν τη σελίδα σας σε διαφορετικές μονάδες σε απευθείας σύνδεση. Και τότε πολλά divs μου Βλέπετε, κάτι που ονομάζεται Class, αλλά θα επανέλθω σε αυτό. 

Αυτό είναι interesting-- Μορφές. Μορφές είναι σε όλο το web. Κάθε πλαίσιο αναζήτησης είστε χρησιμοποιήσει ποτέ είναι μια μορφή. Και, έτσι, ας δούμε πραγματικά. Μορφή. Δράση. Η δράση αυτής της μορφής, για οποιοδήποτε ιστορικούς λόγους, είναι ότι η διεύθυνση URL. Μέθοδος είναι "post". Αποδεικνύεται ότι τα αιτήματα HTTP μπορούν να χρησιμοποιήσουν το ρήμα "πάρει", όπως είδαμε πριν, ή "post". Και θα δείτε τη διαφορά αυτό σε μια στιγμή. Ας δούμε πραγματικά τι είναι αυτό. Επιτρέψτε μου να επιστρέψω στη σελίδα του Στάνφορντ. Ποια μορφή είναι αυτοί που μιλούν περίπου, νομίζεις; Τι πηδά έξω σε σας; 

Κοινό: κουτί αναζήτησης. 

DAVID J. Malan: Ναι. Έτσι, στην κορυφή δεξιά εδώ είναι αυτό το πλαίσιο αναζήτησης. Και αυτό είναι το πώς θα εφαρμοστεί it-- ένα ετικέτα που είναι κυριολεκτικά μορφή ανοικτού βραχίονα. Και τότε ας αναζήτηση για κάτι. Ας αναζήτηση για ένα φιλαράκο της mine-- "Nick Parlante." Εισάγω. Και φυσικά, πήγε να μια ελαφρώς διαφορετική διεύθυνση URL. Επιτρέψτε μου να επιστρέψω εδώ. Ας αναζήτηση για "μαθήματα". Ανάθεμα. Πήγε σε μια διαφορετική διεύθυνση URL. Έτσι, Στάνφορντ προσθέτοντας κάποια μαγική ότι δεν παίρνετε μου στο URL που είδαμε στο δράση αποδίδουν εκεί. Αλλά αυτή η μορφή εδώ υλοποιείται καθαρά μέσω αυτής της σήμανσης εδώ, αυτές οι ετικέτες. Στην πραγματικότητα, εδώ είναι η είσοδος για το είδος της αναζήτησης που θέλετε. Εδώ είναι η είσοδος για ένα άλλο είδος της αναζήτησης. Εδώ είναι η είσοδος για το ίδιο το κορδόνι. Και έτσι ο στόχος δεν είναι να τυλίξετε το μυαλό μας γύρω από όλες αυτές τις ετικέτες αλλά ακριβώς για να δούμε. Είναι ακριβώς το άνοιγμα και το κλείσιμο ετικέτες και αναζητούν τα πράγματα. Ναι; Βικτώρια? 

Κοινό: [δεν ακούγεται] DAVID J. Malan: Αυτή είναι μια καλή ερώτηση. Αυτό είναι λίγο πιο περίπλοκη για να δείτε. Επιτρέψτε μου να επανέλθω στο θέμα αυτό ερώτηση μέσα σε λίγα λεπτά όταν κοιτάμε κάτι που ονομάζεται φύλλα CSS ή Cascading Style, και μπορούμε να προσπαθήσουμε να συμπεράνουμε τόσο από τη σελίδα. Έτσι, αν τώρα ρίξτε μια ματιά στο google.com, ας δούμε τι μοιάζει σελίδα τους, όπως. Θα μαζεύουν ότι είναι χαριτωμένο σήμερα. ΕΝΤΆΞΕΙ. Όλα τελείωσαν. Εντάξει, έτσι Προβολή προέλευσης. Θα πίστευε κανείς ότι η Google έχει πραγματικά ωραίο πηγαίο κώδικα. Έτσι, προφανώς, τι συμβαίνει εδώ; Και στην πραγματικότητα, αυτό δεν είναι καν HTML. Αυτό είναι κάτι που ονομάζεται το JavaScript. Και ας συνεχίσουμε και να πηγαίνει. Εγώ δεν γνωρίζουν καν από πού ξεκινά η σελίδα. Πάω να χρησιμοποιούν τη γραμμή F, ανοιχτή HTML βραχίονα. Εντάξει, εκεί είναι. Βρήκα την έναρξη της σελίδας, και υπάρχει τόσο πολύ τα πράγματα εδώ. 

Τι πραγματικά συμβαίνει; Λοιπόν, ξέρετε τι, μπορούμε να καθαρίσει αυτό επάνω. Αν μου αντί να πάει σε αυτό το Επιθεωρήστε γραμμή εργαλείων, αυτό το ειδικό διαγνωστικό εργαλείο, και πηγαίνετε να μην δικτύου, όπου συνεχίζουμε και σήμερα, αλλά αν πάω στο Elements, τι είναι πραγματικά ωραία είναι ότι ένα πρόγραμμα περιήγησης έχει πολλά πολύ καλύτερα από ό, τι τα μάτια κάνω. Και το πρόγραμμα περιήγησης μπορεί να διαβάσει ότι το χάος μιας ιστοσελίδας, ότι η HTML ταχυδρομείου εμείς απλά κοίταξε, και μπορεί να αναλύσει αυτό ή να διαβάσετε και αναλύσει και να διαμορφώσετε το σε ένα ωραίο φιλικό προς τον άνθρωπο τρόπο. Έτσι, αυτό που βλέπω τώρα σε αυτή την οθόνη εδώ σύμφωνα με στοιχεία, το ίδιο ακριβώς περιεχόμενο, αλλά έχουν εσοχή τα πάντα, το έχουν χρωματίζονται, αλλά Είναι ακριβώς το ίδιο κείμενο που έχω κατεβάσει από το διακομιστή. 

Και τι ωραίο είναι τώρα μπορώ να δω στο σώμα, για instance-- ειδοποίηση, η σελίδα εξακολουθεί να αποτελείται μόνο ένα κεφάλι και ένα σώμα, και μπορώ να ιεραρχικά βουτήξει εδώ. Παρατηρήστε ότι η Google φαίνεται να έχει να divs-- αυτό το ένα και το αυτό. Μπορώ να επεκτείνουν αυτό. Υπάρχει ένα σωρό άλλα divs. Γι 'αυτό είναι λίγο περίπλοκο. Αλλά περίμενε. Αυτό φαίνεται τόσο πολύ περισσότερο αναγνώσιμη, σχετικά, από αυτό. Γιατί η Google ενοχλητικό ίδια με την απλή αποστολή αυτό το τεράστιο χάος του κώδικα μερικών είδος απλά για να εφαρμόσει κάτι ότι φαίνεται τόσο απλό με την πρώτη ματιά; Όπως, γιατί δεν προσθέτουν περισσότερους χώρους; Γιατί δεν χτύπησε Εισάγετε όπως έκανα; Κοίτα πόσο καλός ήμουν στο γράψιμο μιας ιστοσελίδας. Χτύπησα Εισάγετε τόσο επιμελώς. Έχω εσοχή έτσι ώστε τα πάντα είναι τόσο όμορφη και ευανάγνωστη. Γιατί η Google δεν ασκεί το ίδιο; 

Κοινό: [δεν ακούγεται] DAVID J. Malan: Καλή. Πολύ δίκαιο. Δεν έχουν κάποια πρόσωπο στο Google με το χέρι επικαιροποίηση της αρχικής σελίδας πια. Δεν είναι 1999 πια. Έτσι ώστε να έχουν το λογισμικό. Έχουν άλλα εργαλεία που δημιουργούν δυναμικά όπου και αν HTML. Φυσικά, η ίδια κωδικός γράφτηκε από τον άνθρωπο, αλλά η πραγματικότητα είναι, είναι αρκετά δίκαιο να πούμε, το πρόγραμμα περιήγησης σίγουρα δεν κάνει με νοιάζει πόσο βρώμικο ο κωδικός είναι. Αλλά υπάρχει μια ακόμη πιο αναγκάζοντας τεχνικός λόγος ότι η Google διανέμει HTML τους κώδικα σε μια τέτοια προχειρότητα, φαινομενικά συντριπτική τρόπο όλα τα συσκευασμένα μαζί με πολύ μικρή τρόπο-- πολύ λίγο με τον τρόπο της μορφοποίησης, όπως έκανα. 

Κοινό: [δεν ακούγεται] 

DAVID J. Malan: Ταχύτερη; Γιατί; Και τι είπες, Λυδία; Πιο γρήγορα; Γιατί γρηγορότερα; Κοινό: [δεν ακούγεται] DAVID J. Malan: Υπάρχει δεν υπάρχει χώρος για να διαβάσετε. Ναι. Έτσι, σκεφτείτε τι ένας χώρος είναι. Έτσι, κάθε χαρακτήρας στο πληκτρολόγιο παίρνει κάποια ποσότητα του χώρου να εκπροσωπεί, είτε σωματικά, είτε μας αρέσει καταλαμβάνει τόσο πολύ χώρο, ή με κάποιο τρόπο κάτω από το κουκούλα, που απαιτεί μνήμη. Και ως aside-- και θα μιλήσουμε περισσότερο για αυτό tomorrow-- κάθε χαρακτήρα στο πληκτρολόγιο τυπικά απαιτεί 8 bits, ή ένα byte. Έτσι, ένα μοτίβο από 8 μηδενικά ή αυτά, ή μόλις 1 byte, όπως οι άνθρωποι συνήθως θα έλεγα. Έτσι ώστε να είναι μικρό, αλλά εξακολουθούν να είναι μη μηδενική. Είναι ακόμα κάποια ποσότητα του χώρου. Έτσι, εάν ένας μηχανικός ή Google χτυπά ο χώρος μπαρ μόνο μία φορά, και ας υποθέσουμε Google-- είναι υπερ-popular-- ας υποθέσουμε ότι ένα δισεκατομμύριο άνθρωποι επισκεφθείτε την αρχική σελίδα τους την ημέρα, ή κάποιο αριθμό των ατόμων επισκεφθείτε την αρχική σελίδα του μια δισεκατομμύρια φορές την ημέρα, πόσα επιπλέον bytes έχει ότι μηχανικός λογισμικού κοστίζει μόλις Google με το χτύπημα μπαρ του ή το χώρο της μια φορά; 

Κοινό: [δεν ακούγεται] DAVID J. Malan: Δεν είναι τόσο άσχημα. Μόλις μία φορές byte ένα δισεκατομμύριο. έτσι a-- Κοινό: 8000000000 gigabytes. DAVID J. Malan: Δεν 8000000000. 8000000000 bytes. Αλλά 1 gigabyte. 1 gigabyte θα είναι η μονάδα μέτρησης. Αν αυτός ή αυτή κάνει δύο χώροι, 2 gigabytes. Τρεις gigabytes. Δικαίωμα? Είναι κλίμακες ακριβά. Και έτσι σε περιπτώσεις όπως η Google, η οποία, χορηγούνται, είναι ακραίες περιπτώσεις, υπάρχουν και άλλα θέματα που προκύπτουν μόνο κάνοντας πολύ λογικές αποφάσεις ή τη λήψη πολύ απλό ανθρώπινες ενέργειες, επειδή έχει αυτό μεγεθύνεται αποτέλεσμα. Έτσι ένας από τους λόγους αυτό φαίνεται τόσο συμπιεσμένο Είναι ακριβώς όπως Victoria said-- ήταν μόλις δημιουργείται από τους υπολογιστές έτσι κι αλλιώς. Έτσι, δεν είναι μεγάλη υπόθεση. Αφήστε το πρόγραμμα περιήγησης να το καταλάβω. Αλλά επίσης εσκεμμένα δεν έχει πολύ χώρο, επειδή ο χώρος δεν είναι απαραίτητη. Και ο χώρος κοστίζει πραγματικά χρήματα. 

Είναι είτε κοστίζει το χρόνο, επειδή ακριβώς για να ωθήσει ότι πολύ περισσότερα δεδομένα από έδρα google.com ακριβώς έχει να πάρει κάποιο ποσό της ώρα, ακόμη και αν είναι χιλιοστά του δευτερολέπτου ή μικροδευτερόλεπτα, αλλά αυτό προσθέτει μέχρι πάνω από τόσους πολλούς χρήστες, ή το πιθανότερο, κοστίζει κατά πάσα πιθανότητα τα χρήματα. Google συνδέει πιθανώς να κάποιος άλλος στον κόσμο, ένα εκείνων ανταλλαγής κίνησης σημεία, και αν έχουν κάποιο είδος των οικονομικών σχέσεων σύμφωνα με την οποία το κόστος των δεδομένων τους χρήματα, θα μπορούσε κάλλιστα ελαχιστοποιούν τον όγκο των δεδομένων από όπου και αν φτύσιμο σε τη σύνδεσή τους στο διαδίκτυο. 

Έτσι, το αστείο πράγμα, όμως, τελικά, ή ίσως η καθησυχαστική πράγμα, είναι ότι ακόμα κι αν αυτό φαίνεται τρομερά συντριπτική, στο τέλος της ημέρας, εξακολουθούν να είναι οι ίδιες ακριβώς αρχές, όπως Αυτή η πολύ απλή σελίδα εδώ μιας HTML σελίδα. Έτσι απλά για να συνοψίσει και έτσι ώστε να έχουν μια κανονική έκδοση, αν δεν ήταν μετά μαζί με την επιλογή εδώ, εδώ θα μπορούσε να είναι η πιο απλή των ιστοσελίδων, έτσι κάτι για να παίξει με ίσως αργότερα. 

Λοιπόν, ας εισαγάγει ένα μερικές άλλες ιδέες τώρα. Είμαστε έτοιμοι να εισαγάγουν κάτι που ονομάζεται μια ετικέτα στυλ. Μπορούμε να στυλιζάρω αυτή τη σελίδα πιο ενδιαφέροντες τρόπους. Έτσι, ενώ HTML email Είναι όλα σχετικά με τη σήμανση μέχρι τα δεδομένα, το είδος της προσδιορίζοντας ένα πρόγραμμα περιήγησης πώς να δομήσει τα δεδομένα, πού να το βάλετε, CSS, ή επικαλυπτόμενα φύλλα στυλ, είναι μια δεύτερη γλώσσα που γενικά παίρνει ενώνονται με HTML όπως θα see-- αλλά μπορούμε να καθαρίσει ότι σε μια moment-- που παίρνει ότι το τελικό μίλι, και το stylizes. Παίρνει τα χρώματα ακριβώς δεξιά, η γραμματοσειρά μεγέθη μόνο δικαίωμα, η τοποθέτηση ακριβώς δεξιά. Είναι όλα σχετικά με την αισθητική ή μορφοποίηση, όχι για η ίδια η θεμελιώδης δεδομένων. Και ο ευκολότερος τρόπος για να δείξει Αυτό είναι ίσως το παράδειγμα. Έτσι, Πάω να πάει πέρα ​​από σε απλό αρχείο κειμένου μου. Και ακριβώς σε μια στιγμή, εγώ θα τα πόδια μας μέσα από τη διαδικασία για να γίνει αυτό τον εαυτό μας. 

Πάω να πάει πίσω στο αρχείο μου εδώ και επαναλάβετε τη φόρτωση της σελίδας μόνο για να επιβεβαιώσει τι μοιάζει. Αυτός είναι όπου είμαστε τώρα. Νιώθω σαν παιδιά θα απολαύσουν έχει λίγο χρώμα σε αυτή την ιστοσελίδα. Έτσι, Πάω να πάει εδώ στο κεφάλι της σελίδας. Και Πάω να κάνω το στυλ, / στυλ. Και τότε μέσα από αυτό, θα πάω να πει το σώμα του page-- μου και αυτή η μορφοποίηση είναι, σε Εκ πρώτης όψεως, ίσως λίγο περίεργο, αλλά τα συμβατικά. Πάω να πω ότι στο παρασκήνιο χρώμα αυτής της σελίδας θα πρέπει να είναι πράσινη. Και αυτό είναι, δυστυχώς, είδος δεν είναι η καλύτερη σχεδίαση. Παρατηρήστε ότι στο παρελθόν στον κόσμο της HTML, Είπα ότι τα χαρακτηριστικά είναι αυτά τα ζεύγη κλειδιού-τιμής. Κάτι ισούται με παράθεση αυτού του μηνύματος εισαγωγικά "κάτι". Στον κόσμο του CSS, η οποία ήταν σχεδιάστηκε από μερικούς διαφορετικούς ανθρώπους, αποφάσισαν ότι, στο έδαφός τους κόσμο, τα ζεύγη κλειδιών-τιμών θα ήταν λέξη κάτι παχέος εντέρου. Έτσι είναι η ίδια ιδέα, όμως. Είναι συνδέει μια τιμή με μερικά βασικά ότι κατά κάποιον τρόπο επηρεάζει τη συμπεριφορά αυτής της σελίδας. 

Και μπορείτε να μαντέψετε. Τι είναι αυτό κατά πάσα πιθανότητα θα να κάνει ακόμα και αν έχετε ποτέ δεν δει HTML ή CSS πριν; Κοινό: Αλλάξτε το χρώμα του φόντου. DAVID J. Malan: Ναι, αλλάξετε το χρώμα του φόντου. Και συγκεκριμένα η χρώμα του φόντου του σώματος. Αλλά εφόσον η σώματος για τώρα είναι το διαδίκτυο page-- αυτό είναι το μόνο πράγμα κάτω από τη γραμμή τίτλου really-- είναι κατά πάσα πιθανότητα πρόκειται να επηρεάζουν το ίδιο πράγμα. Ας δούμε λοιπόν. Ας σώσει αυτό. Πηγαίνετε εδώ και να φορτώσετε εκ νέου. Είναι αρκετά φρικτή. Και τι συμβαίνει εδώ είναι μια παρενέργεια. Απλά επέλεξε αυτή την εικόνα τυχαία. Γιατί είναι το να μην πράσινο διαπερνά πίσω Μίκυ; Κοινό: [δεν ακούγεται] DAVID J. Malan: Ακριβώς. Αποδεικνύεται ότι οι εικόνες, αρκετά πολύ όλες οι εικόνες που θα μπορούσαν να χρησιμοποιήσουν, είναι όλα rectangles-- των ορθογωνίων. Ακόμα κι αν Mickey έχει κάποιες καμπύλες για τον εαυτό του και να έχει ένα υπόβαθρο, ότι το υπόστρωμα πρέπει να είναι κάτι. Πρέπει να είναι λευκό. Πρέπει να είναι μαύρο ή κάτι άλλο. Μπορεί να είναι διαφανής. Και στην πραγματικότητα, θα μπορούσα ανοίξτε Μίκυ Μάους εδώ σε ένα πρόγραμμα που ονομάζεται Photoshop ή κάτι παρόμοιο και να αλλάξει όλο αυτό το λευκό φόντο με διαφανή, έτσι το πράσινο θα λάμψει. Αλλά αυτό είναι κάτι που θα χρειαστεί να ρωτήσω τον εαυτό μου ή ενός γραφίστα ή ένας σχεδιαστής στο μου εταιρεία, για παράδειγμα, να κάνει, ειδικά από τότε που μόλις δανείστηκε αυτό το ένα από το διαδίκτυο. Αλλά αυτό είναι γιατί συμβαίνει αυτό. 

Λοιπόν, τι άλλο μπορεί να θέλουμε να κάνουμε; Λοιπόν, θα μπορούσαμε να θέλουμε να πούμε εμείς Πραγματικά ελπίζω να απολαύσετε τη διαμονή σας. Και για έμφαση, θέλω για να κάνουν αυτό το ισχυρό, και γι 'αυτό θα πω ανοιχτά ισχυρή και κλείστε ισχυρή και στη συνέχεια να φορτώσετε εκ νέου. Και αυτό είναι λίγο δύσκολο για να δείτε τον προβολέα αλλά ίσως πραγματικά τώρα πηδά έξω σε σας λίγο περισσότερο. Έτσι, μπορείτε να προσθέσετε πλάγιους σε αυτό τρόπο, έντονα προσανατολισμό με αυτόν τον τρόπο. Θα μπορούσαμε να αλλάξετε τα χρώματα. Στην πραγματικότητα, μόνο για κλωτσιές, είμαι πρόκειται να προχωρήσει και να το κάνουμε αυτό. Δεν μου αρέσει πραγματικά πώς μου παραγράφους είναι αυτό κοντά μεταξύ τους, έτσι θα μπορούσα να κάνω κάτι τέτοιο. Πάω να πω το πρόγραμμα περιήγησης, αλλάζουν κάθε σημείο της ετικέτας να έχει, ας say-- πραγματικότητα, ξέρετε τι, ας ευθυγράμμισή text-align, κέντρο. Και πάλι, ξέρω ότι αυτό μόνο επειδή κάποιος δίδαξε σε μένα ή έψαξα στο ένα online αναφοράς. Έτσι, επιτρέψτε μου να σώσει αυτό. Και, αχ, τώρα έχω με επίκεντρο την εικόνα εκεί. Και στην πραγματικότητα, ξέρετε τι, αν Κινούμαι εικόνα μου σε μια παράγραφο tag-- έτσι, ένα τρίτο εδάφιο, ακόμα κι αν δεν είναι κείμενο. Ας σώσει αυτό και να φορτώσετε εκ νέου. Τώρα η σελίδα έχει αρχίσει να εξετάσουμε το είδος τον αριθμό τους μπορώ να πω, είναι ακόμα αρκετά άσχημο, αλλά τουλάχιστον μοιάζει Πέρασα δυο λεπτά αντί ενός λεπτού καταφέρνοντάς το. 

Και έτσι, σταδιακά, μπορούμε να κάνουμε Αυτές οι αισθητικές αλλαγές τώρα στη σελίδα; Δεν έχω αλλάξει πραγματικά τα δεδομένα στο σελίδα, εκτός από την προσθήκη της λέξης πραγματικά. Έχω προσθέσει μεταδεδομένα, αν θέλετε. Γεια σου, πρόγραμμα περιήγησης, κάνει το λέξη "πραγματικά" τολμηρή. Αλλά τα δεδομένα δεν είναι ισχυρή. Αυτό είναι μεταδεδομένων. Τα δεδομένα είναι "πραγματικά". Έτσι έχουμε ακόμα μερικά από τα οι ίδιες έννοιες όπως και πριν. Τώρα, φυσικά, αυτό δεν είναι στο διαδίκτυο, έτσι Πάω να κάνω ένα τελικό βήμα εδώ. 

Πάω να πάει στο hello.html και μόλις επισημάνετε και να αντιγράψετε αυτό. Και τώρα Πάω να πάει σε Cloud9, η οποία Θα σας καθοδηγήσει σε μια στιγμή. Και οι πιθανότητες είναι εσείς θα είναι σύντομα, αν δεν είναι ήδη, σε μια οθόνη σαν αυτή. Και επιτρέψτε μου να σας δώσω ένα γρήγορο περιοδεία του τι Cloud9 πραγματικά είναι. Έτσι και πάλι Cloud 9 είναι Αυτή η υπηρεσία που βασίζεται σε σύννεφο ότι εσείς και μου δίνει την ψευδαίσθηση της έχοντας το δικό μας εικονική μηχανή στο σύννεφο, τεχνικά ένα δοχείο στο σύννεφο, ότι έχουμε πλήρη δικαιώματα διαχειριστή για να. Έτσι, θεωρητικά, κανείς δεν αλλού στον κόσμο έχει πρόσβαση στην οθόνη είμαι κοιτάζοντας τώρα, εκτός ίσως από τους ανθρώπους που διοικούν την περιοχή, γιατί τεχνικά δεν έχουν φυσική πρόσβαση και ούτω καθεξής. 

Έτσι, αυτό που βλέπουμε σε αυτό το περιβάλλον; Πάω για σμίκρυνση, επειδή είναι λίγο μικρό. Και επιτρέψτε μου να επισημάνω πάνω εδώ μόνο για μια στιγμή. Από την αριστερή πλευρά του μου και σας οθόνη, υπάρχει ένα πρόγραμμα περιήγησης στο αρχείο στα αριστερά. Έτσι παρόμοια σε πνεύμα για Mac OS και Windows. Αυτά είναι όλα τα τα αρχεία του λογαριασμού μου. Και από προεπιλογή, αν σας λογαριασμού είναι σαν τη δική μου, θα δείτε ή να δείτε σύντομα HelloWorld.html και readme.md. Πάνω από εδώ στα δεξιά, αυτό είναι όπου τα αρχεία κειμένου μου πρόκειται να πάει. Εάν έχετε χρησιμοποιήσει ποτέ Microsoft Word ή το Notepad ή TextEdit, αυτή είναι η λέξη μοντάζ μου αρχείων πρόκειται να πάει. Και τότε το πιο απόκρυφες χαρακτηριστικό αυτού του περιβάλλοντος ότι δεν θα πρέπει πραγματικά να χρησιμοποιήσετε είναι εδώ κάτω που ονομάζεται ένα παράθυρο τερματικού. Αν έχετε χρησιμοποιήσει το DOS από χθες, αυτό είναι το Linux ή το ισοδύναμο Linux του DOS. Είναι ένα κείμενο που βασίζεται interface-- Δεν κλικ του ποντικιού, δεν σύρσιμο. Όλα μπορείτε να κάνετε είναι να πληκτρολογήσετε εντολές, αλλά αυτές οι εντολές μπορεί να δημιουργήσει αρχεία, να μετακινήσετε αρχεία, ανοίξτε καταλόγους, κοντά καταλόγους, κάνει πολλά πράγματα. Αλλά για τώρα, απλά θα περνούν το χρόνο μας εδώ. 

Και έτσι ας κάνουμε αυτό. Αν είστε σε αυτή την περιβάλλον, το οποίο θα πρέπει να είναι αν έχετε δημιουργήσει ένα χώρο εργασίας ήδη, να προχωρήσει και μόλις ανεβαίνουν σε αρχείο, New για μια στιγμή. Και αυτό θα σας δώσει μια νέα καρτέλα εδώ στη μέση. Και εγώ just-- και ας να προχωρήσει και να το κάνουμε αυτό. Ας πάμε μπροστά και τώρα δεν File, Save και να προχωρήσει και να το ονομάσουμε hello.html, δεν πρέπει να συγχέεται με HelloWorld.html, η οποία ήρθε με το νέο σας δωρεάν λογαριασμό, η οποία είναι απλώς ένα δείγμα αρχείου. Θα δείτε να εμφανίζεται ξαφνικά, πιθανότατα από την αριστερή πλευρά, και η καρτέλα θα είναι ακόμα ανοιχτή. Και επιτρέψτε μου να σας ενθαρρύνω τώρα να αναδημιουργήσει Αυτό το αρχείο ή κάποιες παραλλαγές αυτής. Και αν δεν μπορείτε να δείτε αρκετά σχετικά με το οθόνη, αυτή είναι πανομοιότυπη με τις διαφάνειες ότι θα πρέπει κατά πάσα πιθανότητα σε μια άλλη καρτέλα. 

Έτσι, με λίγα λόγια, κάνει την πρώτη ιστοσελίδα σας, αποθηκεύσετε, και στη συνέχεια, ακριβώς σε μια στιγμή, Θα σας δείξουμε πώς μπορείτε μπορεί πραγματικά να δείτε αυτό. Αλλά αλλάξει τουλάχιστον ένα πράγμα. Αλλαγή helloworld να κάτι της επιλογής σας, έτσι ώστε να είστε πεπεισμένοι ότι είναι σας αρχείο και όχι το ένα που μόλις δημιουργήσατε. Εντάξει. Και όταν είστε Ready-- δεν rush-- όταν είστε έτοιμοι, να προχωρήσει και να αποθηκεύσετε το αρχείο τη στιγμή που έχετε κάνει τις αλλαγές αυτές. Και αν κάνετε κλικ στο Εκτελέστε το πλήκτρο επάνω στην κορυφή, αυτό θα πρέπει να ανοίξει μια νέα καρτέλα που θα πει σας τι URL, μπορείτε να επισκεφθείτε το αρχείο σας σε, αλλά μπορεί να πάρει λίγο χρόνο για να απόσπασμα πελάτη στο "Start Apache," η οποία είναι το όνομα του web server. Γι 'αυτό να είστε προσεκτικοί για να κάνουμε ακριβώς τι είναι στο αρχείο τελικά. Έτσι τώρα, εγώ θα μεγεθύνετε. Αν αρχίσω να πληκτρολογείτε ανοικτού βραχίονα HTML, προειδοποίηση αυτό είναι που μου ζητά να τελειώσω τη σκέψη μου. Και αν τελείωσα τη σκέψη μου, μου δίνει αυτόματα την ετικέτα κλεισίματος. Αλλά η προσδοκία τότε θα χτυπήσει Enter και στη συνέχεια να προχωρήσουμε εκεί μέσα και μην το κεφάλι μέσα και τότε θα κάνει το σώμα μέσα. Και αυτό είναι λίγο περίεργο στην αρχή, γιατί είναι να κάνει τη δουλειά για σας, αλλά συνειδητοποιούν ότι τελικά αυτό σας σώζει πληκτρολογήσεις. Και στην πραγματικότητα, ένα πολύ κοινό χαρακτηριστικό των περιβάλλοντα προγραμματισμού αυτές τις μέρες τόσο για την ανάπτυξη Ιστού, όπως αυτό και την πραγματική προγραμματισμό, το οποίο θα μιλήσουμε για το αύριο, Είναι αυτά αυτόματη συμπλήρωση χαρακτηριστικά, πράγματα που επιτρέπουν μόνο ένα προγραμματιστής ή ένας σχεδιαστής για να πληκτρολογήσετε λιγότερες πληκτρολογήσεις για να επιτύχει το ίδιο πράγμα. Μερικές φορές είναι καλό, όμως. Μερικές φορές είναι απλά ενοχλητικό. Και, πάλι, αφού έχετε μεταγραφεί η διαφάνεια ή κάποια παραλλαγή αυτής, μπορείτε να κάνετε κλικ στο κουμπί Εκτέλεση επάνω στην κορυφή. Και στη συνέχεια, στο κάτω μέρος παράθυρο, θα πρέπει να ενημερώνεται σε ποια διεύθυνση URL μπορείτε να επισκεφθείτε την ιστοσελίδα σας. Ορυχείο, για παράδειγμα, είναι σε business-daharvard.c9users.io και ούτω καθεξής. Εντάξει, έτσι, ας me-- απορίες; Οποιεσδήποτε άλλες ερωτήσεις σχετικά με το απλά να πάρει Αυτό λειτουργεί πριν προσθέτουν χαρακτηριστικά; Και επιτρέψτε μου να προτείνω, απλά για να πάρει τους λαούς comfortable-- επειδή είναι ένα πράγμα σε μόλις copy-paste τυφλά ό, τι έχω κάνει. Αλλά ακριβώς έτσι ότι οι λαοί παλεύουν με τουλάχιστον ένα to-do, Πάω να ενεργοποιήσετε κάποια μουσική. Πάω να προτείνει έναν κατάλογο πράγματα που μπορείτε ενδεχομένως να προσθέσετε. Και σίγουρα μπορείτε να χρησιμοποιήσετε το Google. Και γιατί δεν μπορούμε απλά προτείνω να προσπαθήσουμε να λύσουμε τουλάχιστον ένα συγκεκριμένο πρόβλημα εδώ. Έτσι, από την άποψη των ετικετών, επιτρέψτε μου να χρησιμοποιήσετε ξανά αυτό εδώ. 

Στην πραγματικότητα, επιτρέψτε μου να βάλω είναι σε μορφή κειμένου. Ας πούμε ότι ανάμεσα στις ετικέτες θα μπορούσαμε χρησιμοποιούμε εδώ είναι μερικές ετικέτες εδώ. Έχουμε δει την παράγραφο ετικέτα. Τώρα πρόκειται να αυτόματη συμπλήρωση. Παράγραφο ετικέτα, η ετικέτα άγκυρα. Ας υποθέσουμε ότι θέλετε να κάνει κάτι μεγαλύτερο, οπότε ίσως like-- η ετικέτα διάστημα μπορεί να βοηθήσει. Λοιπόν, μπορεί να χρειαστεί κάποια βοήθεια γι 'αυτό ακριβώς σε μια στιγμή. Έχουμε δει div. Θα δείτε ότι υπάρχει τραπέζι. Υπάρχει κάτι που ονομάζεται tr, td. Θ, td. Επανέλθουμε σε αυτό σε λίγο. Τι άλλο θα μπορούσε να είναι χρήσιμο; Υπάρχει ισχυρή. Υπάρχει έμφαση, ή μάλλον em. There's-- τι άλλο ίσως φαντάζεστε εδώ; Λοιπόν, θα πάρουμε μια δούμε ότι μαζί. Μορφή, που έχουμε δει. Υπάρχει μορφή. Υπάρχει εισόδου και μερικοί άλλοι. Εντάξει, ας το κάνουμε αυτό. Για να απαντήσετε σε μια Βικτώριας ερώτηση, επιτρέψτε μου πρώτα απλά βεβαιωθείτε ότι όλοι είναι είναι σε θέση να πάρει γεια εργασίας τους. Στη συνέχεια, επιτρέψτε μου να εισαγάγει ένα ζευγάρι άλλες ιδέες. Τότε εμείς θα σας αφήσει λαοί λύσει κάποιο πρόβλημα μόνοι τους. Τότε θα έρθει πραγματικά πίσω στην εν λόγω έννοια της μορφής, και εμείς θα πράγματι εκ νέου την εφαρμογή μαζί το front-end interface, να το πω έτσι, για το ίδιο το Google. Θα χρησιμοποιήσουμε το Google ως το πίσω τέλος και αφήστε να κάνουν τη σκληρή δουλειά, την αναζήτηση, αλλά θα αναδημιουργήσει το εμπρόσθιο άκρο της Google και τη φόρμα αναζήτησης ότι έχουν τη δική τους αρχική σελίδα. Και έτσι θα επανέλθουμε Αυτές οι ετικέτες ακριβώς σε μια στιγμή. 

Έτσι, αυτό ήταν ό, τι πρότεινε μόλις πριν από ένα χρόνο. Μπορούμε να προσθέσουμε το στυλιζάρισμα σε ένα σελίδα στο εσωτερικό αυτής της ετικέτας στυλ, και μπορούμε να στυλιζάρω το φόντο το χρώμα, τη στοίχιση του κειμένου, είτε πρόκειται για το κέντρο ή προς τα αριστερά ή προς τα δεξιά. Αλλά πολύ γρήγορα θα κάνατε βρείτε ή web designer, Θα διαπιστώσετε ότι αυτό γίνεται λίγο δυσκίνητο, γιατί κάνετε ό, τι είναι κάλεσε το περιεχόμενο ανάμιξη με την παρουσίαση αυτών. Είσαι ανάμειξη των δεδομένων σας και την αισθητική τους. Και στην πραγματικότητα, αν σκεφτεί κανείς τι πρόκειται να συμβεί πάνω από time-- αυτό είναι ένα πολύ μικρό ιστοσελίδας, φυσικά. Αλλά αν μπορώ να προσθέσω περιεχόμενο σε αυτή τη σελίδα και έχω προσθέσει στυλ σε αυτή τη σελίδα, η σελίδα παίρνει πολύ γρήγορα περισσότερο και όλο και περισσότερο. Και ας υποθέσουμε ότι θέλω έχουν μια δεύτερη ιστοσελίδα που μοιράζεται μερικά από αυτά τα χαρακτηριστικά. Ας υποθέσουμε ότι το δεύτερο ιστοσελίδα μου για μου site-- επίσης, θέλω κέντρο τα πάντα, και θέλω επίσης τα πάντα με πράσινο φόντο. Είμαι λίγο πολύ θα πρέπει να αντιγραφή και επικόλληση μερικές από αυτές τις γραμμές σε αυτό το δεύτερο αρχείο, που αισθάνεται μια χαρά. Θα λύσει το πρόβλημα. 

Αλλά τι γίνεται αν θέλω ένα τρίτο της σελίδας ή 30η σελίδα ή 40η σελίδα; Τώρα είμαι πρόκειται να αντιγράψετε και επικόλληση πολλά εις διπλούν κώδικα σε πολλαπλά αρχεία. Και έτσι ας υποθέσουμε ότι Έχω αποφασίσει ή μου έχουν πει, hey, δεν είμαστε χρησιμοποιώντας ένα πράσινο φόντο πια. Εμείς πάμε για να αρχίσετε να χρησιμοποιείτε το πορτοκαλί. Τι πρέπει να αλλάξει; Λοιπόν, θα πρέπει να αλλάξετε αυτό το στυλ από πράσινο σε πορτοκαλί σε πόσα μέρη; Όπως 30 ή 40 θέσεις. Είναι κουραστικό. Είναι επιρρεπής σε λάθη. Υπάρχει μια σειρά από λόγους όπου δεν θα θέλατε να προκαλέσουν αυτό το είδος του πόνου για τον εαυτό σας. Και έτσι δεν θα ήταν ωραίο αν θα μπορούσαμε να πάρουμε αυτό που μόλις θέσει μεταξύ αυτών των δύο κίτρινες ετικέτες, αυτές οι ετικέτες στυλ, παράγοντα έξω, και να θέσει όλα μου στυλιζάρισμα σε ένα κεντρικό αρχείο ότι όλα τα 30 ή 40 της άλλα αρχεία μου δανείζονται από ή με κάποιο τρόπο αναφοράς, δεν σε αντίθεση με τη δικτύωση διαγράμματα κάναμε πριν; 

Έτσι, αν πάω εδώ, είμαι πρόκειται στην πραγματικότητα να προτείνει ότι θα αντικαταστήσει το ετικέτα στυλ με κάτι ονομάζεται η ετικέτα συνδέσμου, η οποία είναι φοβερά, φοβερά το όνομα, γιατί δεν θέλετε να χρησιμοποιήσετε το ετικέτα σύνδεσμο για να δημιουργήσετε ό, τι εμείς οι άνθρωποι γνωρίζουμε ως σύνδεσμος σε μια ιστοσελίδα. Για αυτό, μπορείτε να χρησιμοποιήσετε το οποίο tag; Πώς μπορείτε να δημιουργήσετε ένα σύνδεσμο σε μια ιστοσελίδα; ΚΟΙΝΟ: Το ένα. David J. Malan: Το ένα, ή να αγκυροβολούν ετικέτα, που πήγε να της Disney πριν. Η ετικέτα link εδώ λέει this-- σύνδεση σε ένα αρχείο που ονομάζεται styles.css, η σχέση με την οποία πρόκειται να είναι ότι είναι στυλ μου. Έτσι, αυτό είναι ένα από τα S στην CSS-- επικαλυπτόμενα φύλλα στυλ. Στυλ sheet-- δύο από τους S στο CSS. Επικαλυπτόμενα φύλλα στυλ. Αυτό ακριβώς σημαίνει, hey, πρόγραμμα περιήγησης, μεταβείτε βρείτε styles.css στον τοπικό διακομιστή και να το χρησιμοποιήσετε ως φύλλο στυλ σας, πράγμα που σημαίνει εσωτερικό αυτού του αρχείου πρόκειται να είναι όλα τα stylizations που έχουμε ακριβώς κάνει. Και έτσι αυτό το αρχείο μπορεί να μοιάζει είναι αυτό. Και θα κάνω ακριβώς αυτό είναι μια γρήγορη παράδειγμα, γιατί δεν χρειαζόμαστε για να πάρει πάρα πολύ στα ζιζάνια εδώ. Αλλά αν μπορώ να αντιγράψω αυτό, ό, τι είμαι προτείνοντας είναι ότι ένας προγραμματιστής δημιουργήσει ένα νέο αρχείο, επικόλληση σε αυτές lines-- whoops-- επικολλήσετε σε αυτές τις γραμμές, αποθηκεύσετε ως styles.css και, στη συνέχεια, στην το άλλο αρχείο, διαγράψτε όλα αυτά και να την αντικαταστήσει αντ 'αυτού με αυτήν την ετικέτα σύνδεσμο. Έτσι ώστε αν μπορώ να συνδέσω href = "styles.css», η σχέση πρέπει να είναι "στυλ" κοντά ετικέτα. Σώσε το. Πηγαίνετε πίσω στο helloworld μου. Φορτώνω πάλι. 

Κυριολεκτικά τίποτα δεν έχει συμβεί. Αυτό είναι ένα καλό πράγμα, επειδή σημαίνει ότι είναι στην πραγματικότητα όλα εργασίας. Για να αποδείξει τόσο πολύ, ας υποθέσουμε ότι έχω κάνει μια τυπογραφικό λάθος, και καλώ αυτό το "styles.css" με κεφαλαίο S, η οποία είναι λανθασμένη, και στη συνέχεια να φορτώσετε εκ νέου. Τώρα μπορείτε να δείτε ότι απλά δεν λειτουργεί. Τώρα, για ποιο λόγο; Λοιπόν, ας χρησιμοποιήσουμε μια τεχνική από την προηγούμενη. Επιτρέψτε μου να πάμε μπροστά και, browser μου, στο Chrome, είμαι πρόκειται να ανοίξει η ειδική καρτέλα δικτύου όπως και πριν, και επιτρέψτε μου να επαναλάβετε τη φόρτωση της σελίδας. Αυτό που δεν είναι έκπληξη να δούμε τώρα; Ή ίσως είστε έκπληκτος για να το δείτε. Είτε έτσι είτε αλλιώς, αυτό που βλέπετε τώρα; Κοινό: [δεν ακούγεται] DAVID J. Malan: Είναι δεν βρέθηκε. Γιατί δεν βρέθηκε; Λοιπόν, Styles.css-- κεφαλαίου S-- δεν υπάρχει. Μου κακώς αποκαλείται. Απλό τυπογραφικό λάθος. Αλλά παίρνω κατανοητό τώρα 404, επειδή ο διακομιστής λέει, hey, δεν βρήκε. Κυριολεκτικά, δεν ξέρω στην περίπτωση που το αρχείο είναι. Έτσι, ως αποτέλεσμα, το πρόγραμμα περιήγησης σας δείχνει ό, τι μπορεί, η πρώτη το περιεχόμενο της σελίδας, το οποίο ήταν ένα 200, το HTML, αλλά το στυλιζάρισμα δεν μπορεί να προστεθούν στη συνέχεια. Και αυτό είναι ό, τι είναι γραφτό από υπερχείλιση. Μπορείτε να ταξινομήσετε από το προσθέσετε μετά, και το είδος της βελτιώνει την αισθητική της ιστοσελίδας. Και μπορείτε ακόμη και να παρακάμψετε αυτές που στυλ με ακόμη άλλα αρχεία stylesheet αν θέλεις. Δεν είναι βρεθεί, εν τούτοις, στην περίπτωση αυτή, γιατί φυσικά, μου κακώς αποκαλείται. Γι 'αυτό και θα πρέπει να καθορίσει ότι η πρώτη. 

Ας πάμε μπροστά και να προτείνει τα ακόλουθα. Ας πάμε μπροστά και να το κάνουμε αυτό. Ξεκινώντας με ίσως αρχείο helloworld σας, επιτρέψτε μου να καλέσει ένα ζευγάρι του διαθέτουν προτάσεις. Έτσι, Βικτώρια, θελήσατε να κάνει κάποιο κείμενο μεγαλύτερο, έτσι δεν είναι; Εντάξει, έτσι μπορούμε κάνουν το κείμενο μεγαλύτερο. Και θα κόβω από κάθε μόνο ένα πρόβλημα προς επίλυση. Κάντε το κείμενο μεγαλύτερο. Είμαι δεν πρόκειται να ενοχλήσει γράφοντας αυτό όταν εμείς έχουν την τεχνολογία σφαίρα ακριβώς εδώ. Έτσι, κάποια προβλήματα. Έτσι θα πάμε να προσπαθήσουμε για να κάνετε το κείμενο μεγαλύτερο. Εντάξει. Τι άλλο θα κάποιος να προτείνει; Τι άλλο μπορεί να θέλουμε να κάνουμε σε μια ιστοσελίδα; Ας καταλήξουμε σε μια σύντομη λίστα των πραγμάτων και στη συνέχεια να αναθέσει στην ομάδα για να το καταλάβουν αυτό. 

Κοινό: [δεν ακούγεται] 

DAVID J. Malan: Εντάξει, το κείμενο θέση σε διαφορετικές πλευρές της σελίδας; Εντάξει. Κάτι άλλο. 

Κοινό: [δεν ακούγεται] DAVID J. Malan: Είναι. Έτσι, ένα gif είναι απλώς ένα διαφορετική μορφή αρχείου. Εμείς απλά χρησιμοποιείται, τι, ένα png ή jpg ίσως; Χρησιμοποιήσαμε ένα jpg. Εάν είστε περίεργοι, υπερβολικό απαντήσω στην ερώτησή σας είναι ένα jpg χρησιμοποιείται γενικά για φωτογραφίες, επειδή υποστηρίζει εκατομμύρια χρώματα ή το χρώμα 24-bit. Ένα gif χρησιμοποιείται γενικά για την, όπως, μιμίδια στο διαδίκτυο αυτές days-- κινούμενα σχέδια, όπως κινούμενα gifs. Αλλά συμβαίνει να χρησιμοποιήσετε ένα μικρότερο χρώμα παλέτα, μόνο 256 πιθανά χρώματα, αλλά υποστηρίζει διαφάνειας και animation. Και έπειτα υπάρχει png, η οποία υποστηρίζει διαφάνειας και περισσότερα χρώματα αλλά όχι κινούμενα σχέδια. Έτσι είναι ένα trade-off. Προσθέτοντας έτσι ένα gif, όμως, θα είναι λειτουργικά που ισοδυναμεί με την προσθήκη ενός png ή jpg. Ναι. πηγή εικόνας ισούται με. Έτσι κάτι άλλο. Ας καταλήξουμε σε κάτι που στείλαμε στη Βικτώρια να κάνουμε εδώ. 

Κοινό: Προσθέστε κουμπιά για μια φόρμα. DAVID J. Malan: OK. Έτσι προσθέσετε κουμπιά για μια φόρμα. Και εμείς θα κάνουμε ότι το ένα μαζί. Έτσι, αυτό θα είναι ένα τέλειο segue αμέσως μετά την πρόκληση αυτή. Τίποτα άλλο; Τι μπορεί να θέλετε να κάνετε; Το web αισθάνεται πολύ απογοητευτικό αν αυτό είναι το μόνο που μπορούμε να κάνουμε. Κοινό: Αλλάξτε το χρώμα του κειμένου. DAVID J. Malan: Αλλάξτε το τι; Κοινό: Χρώμα του κειμένου. DAVID J. Malan: Αλλαγή χρώματος του κειμένου. Εντάξει. Οπότε, ας κάνουμε αυτό. Απλά και πάλι έτσι δεν είναι ότι είστε, απλά από συνήθεια, κάνει ακριβώς αυτό που κάνω, Πάω να ενεργοποιήσετε τη μουσική ίσως για πέντε λεπτά εδώ. Είστε ευπρόσδεκτοι να χρησιμοποιήσετε το Google. Είστε ευπρόσδεκτοι για να με ρωτήσεις, και Θα ψιθυρίζω μια υπόδειξη στο αυτί σας. Είστε ευπρόσδεκτοι να κοιτάξουμε πάνω στους ώμους του άλλου. Αλλά λύσει μόνο ένα από αυτά τα προβλήματα. Αλλά εμείς θα κάνουμε το τελευταίο, το σχηματίζει ένα, αν μπορούσαμε, μαζί. Έτσι πέντε λεπτά για να λύσει οποιαδήποτε από αυτά τα προβλήματα τη χρήση του Google, η διαίσθηση, ή οποιαδήποτε άλλες διαθέσιμες σε εσάς μέσα. 

[ΜΟΥΣΙΚΗ Playing] Εντάξει. Μην ανησυχείτε αν θέλετε για να κρατήσει μαστορέματα, αλλά εγώ θα χαλάσει ένα ζευγάρι από αυτές τις απαντήσεις. Έτσι, η πρώτη πρόταση από Victoria ήταν να κάνετε το κείμενο μεγαλύτερο. Έτσι, υπάρχει μερικοί τρόποι για να γίνει αυτό. Έχω σήμερα αποκαταστάθηκε οθόνη μου σε αυτό το μέγεθος, αν και έχω μεγέθυνση τεχνητά ακριβώς για να δούμε τα πράγματα. Και ας το κάνουμε αυτό. Επιτρέψτε μου να προχωρήσει και να αρπάξει Μερικοί από τους γενικούς Λατινική κείμενο ακριβώς έτσι έχουμε κάτι να εργαστεί με. Έτσι μου δώσει μόνο μια στιγμή. Θα κάνω τρεις παραγράφους. ΕΝΤΆΞΕΙ. Αυτό θα είναι ένα καλύτερο παράδειγμα. Έτσι, για τους περίεργους, σε hello.html μου, εγώ απλά επικολληθεί τρεις παράλογο Λατινική παραγράφους ακριβώς έτσι έχουμε κάποιο κείμενο για να εργαστεί με. Και ο στόχος της Βικτώριας ήταν να κάνουν μερικά από το κείμενο μεγαλύτερο. Γι 'αυτό και θα μπορούσε, όπως και πριν, πηγαίνετε εδώ. Και επιτρέψτε μου να το κάνουμε με τον σωστό τρόπο. Πάω να έχουν μια σύνδεση ετικέτα που οδηγεί σε ένα αρχείο που ονομάζεται "styles.css," η σχέση εκ των οποίων είναι και πάλι «στυλ». Και τότε Πάω να σώσει ότι και να ανοίξει αυτό το "styles.css." 

Έτσι, όπως και πριν, έχω το ικανότητα σε αυτό το αρχείο CSS για να παρακάμψετε πραγματικά την προεπιλεγμένη αισθητική μιας ιστοσελίδας, και οι προεπιλεγμένες αισθητική, Φυσικά, είναι αρκετά βαρετή. Είναι το είδος του κανονικού μεγέθους γραμματοσειράς, μαύρο κείμενο, λευκό φόντο, και ούτω καθεξής. Έτσι, ας υποθέσουμε ότι θέλω να κάνω ολόκληρο το κείμενο μεγαλύτερο. Θα μπορούσα να κάνω μερικά πράγματα. Στο αρχείο styles.css μου, θα μπορούσα να πω, ξέρετε τι, ισχύουν τα ακόλουθα για να το σώμα της σελίδας μου. Προχωρήστε και να το μέγεθος γραμματοσειράς 24 πόντους, η οποία είναι ένας αριθμός που θα μπορούσε χρησιμοποιήσετε το Microsoft Word. Επιτρέψτε μου να πάω πίσω στην ιστοσελίδα μου σελίδα εδώ και επαναλάβετε τη φόρτωση, και μπορείτε να δείτε ότι είναι ήδη πολύ μεγαλύτερο. Και μπορούμε να πάρουμε λίγο τρελός, ακριβώς όπως μπορούμε σε desktop-- κάνει 96 πόντους. Φορτώνω πάλι. Και αυτό είναι να πάρει λίγο δυσκίνητο σε αυτό το σημείο. 

Αλλά εγώ θα μπορούσε να είναι λίγο πιο ακριβή. Αντί να εφαρμόσει αυτή φύλλο στυλ με το σώμα της σελίδας μου, τι άλλο θα μπορούσε να μπορώ να ισχύουν για αντ 'αυτού, τι άλλο ετικέτα που μπορεί να εξακολουθούν λειτουργία με τον ίδιο τρόπο; 

ΚΟΙΝΟ: Το p tag; DAVID J. Malan: ετικέτα P. Έτσι, το κεφάλι δεν θα ήταν σωστή, επειδή το κεφάλι, δεν μπορείτε πραγματικά ελέγχουν την αισθητική του. Υπάρχει είτε κείμενο εκεί ή όχι. Αλλά το p tag-- μπορώ να βουτήξει σε λίγο βαθύτερα, να το πω έτσι, στην παράγραφο ετικέτες. Και παρόλο που υπάρχουν τρία, ότι είναι απολύτως εντάξει, επειδή σε CSS, όταν εγώ μόνο να πω "σ" αυτό σημαίνει εφαρμόστε την ακόλουθη σε οποιαδήποτε ετικέτα που να ταιριάζει με αυτό επιλογέα, ο επιλογέας μόνο είναι το όνομα της ετικέτας. Έτσι, όπου κι αν δείτε ένα "P", εφαρμόζεται το μέγεθος της γραμματοσειράς, και ας το κάνει περισσότερα λογικές again-- 24 σημείο. Και ξέρετε τι, μόνο για το καλό μέτρο, ας κάνουμε το χρώμα κόκκινο μόνο για το παρόν. Και τώρα αν φορτώσετε εκ νέου, τώρα δείτε τρεις άσχημο παραγράφους. 

Αλλά τώρα ας υποθέσουμε ότι είμαι το είδος τον αριθμό τους θέλω το πρώτο εδάφιο να πηδούν έξω στο χρήστη. Δεν θέλω να αυξηθεί μόνο το μέγεθος της γραμματοσειράς του τα πάντα. Και γι 'αυτό πραγματικά θέλουν να προσδιορίσουν ή διάκριση μεταξύ αυτών των παραγράφων. Ας απαλλαγούμε από το κόκκινο, γιατί αυτό είναι ακριβώς το είδος της κολλώδες, και ας πάμε μπροστά και να κάνουν το μέγεθος γραμματοσειράς 12 σημείων από προεπιλογή, έτσι ώστε να είμαστε πίσω σε κάτι λίγο πιο λογικό. Και τώρα θέλω μόνο να αυξηθεί η μέγεθος γραμματοσειράς της πρώτης παραγράφου. Μπορώ να το κάνετε αυτό σε λίγες τρόπους, αλλά ένα τρόπο που είναι ίσως το πιο εκπαιδευτικό κατά τη στιγμή είναι να κάνουμε το εξής. Επιτρέψτε μου να προχωρήσει και να πω, αυτό παράγραφο έχει ένα μοναδικό αναγνωριστικό του «πρώτου». Θα μπορούσαμε να ονομάσουμε αυτό το κάτι που θέλω. Θα μπορούσαμε να ονομάσουμε αυτό το "foo" ή οποιαδήποτε άλλη λέξη, αλλά Πάω να δώσει κάποιες σημασιολογικά όνομα με νόημα όπως "πρώτη". Αυτό είναι το μοναδικό αναγνωριστικό, το αναγνωριστικό, για πρώτη μου σκέψη. 

Και τώρα τι μπορώ να κάνω στο στυλ μου είναι να είναι λίγο πιο ακριβή. Αντί να λέει, ισχύουν τα ακόλουθα στο p tag, Μπορώ να πω το following-- ισχύουν τα ακόλουθα, ή επιλέξτε το στοιχείο HTML ότι έχει ένα μοναδικό αναγνωριστικό του «πρώτου». Τι θέλω να ισχύουν γι 'αυτό; Ένα μέγεθος γραμματοσειράς 24 σημείων. Έτσι έχω δύο επιλογείς τώρα. Μία κάνει όλα τα σκέψεις 12 σημείων. Αλλά αυτό, δεδομένου μάλιστα ότι πρόκειται για second-- έρχεται τελευταία στην αρχείου απέτυχε αυτό έχει αλυσιδωτές αντιδράσεις. Έχω μόλις έκανε όλες μου παράγραφο ετικέτες 12-σημείο, αλλά αυτό τώρα καταρράκτες και υπερισχύει ότι για οποιαδήποτε στοιχεία στην σελίδα, οποιαδήποτε ετικέτα στη σελίδα της οποίας μοναδικό αναγνωριστικό είναι απόσπασμα unquote "πρώτη". Και το hashtag στο πλαίσιο αυτό ακριβώς σημαίνει «μοναδικό αναγνωριστικό". Εγώ δεν το βάλετε στο αρχείο HTML. Εγώ, εδώ, απλώς να πω απόσπασμα εισαγωγικά "πρώτη". 

Έτσι, επιτρέψτε μου να φορτώσετε εκ νέου. Και τώρα βλέπω, αχ, εντάξει. Θέλω να πω, δεν είναι ότι αρκετά, αλλά είναι το είδος σαν πρόλογο ένα βιβλίο ή κάτι τέτοιο, όπου η πρώτη παράγραφος είναι μεγαλύτερη. Θα μπορούσε να είναι ακόμα πιο ακριβή με μόνο τα πρώτα γράμματα, αλλά τουλάχιστον Έχω ασκήσει περισσότερο έλεγχο. Τώρα maybe-- ίσως θέλω να κάνω αυτό κατά καιρούς για οποιοδήποτε λόγο, και έτσι δεν θέλω αυτό να ισχύουν για μία μόνο ετικέτα HTML. Αντίθετα, ας say-- ας Επίσης, κάνουμε το εξής. Class = "εισαγωγή". Ενώ ένα αναγνωριστικό χρησιμοποιείται για μοναδικά προσδιορίσει ένα πράγμα, μία ετικέτα, στην ιστοσελίδα σας, μια κατηγορία είναι γραφτό να γίνει χρησιμοποιηθεί σε οποιοδήποτε αριθμό στοιχείων ή ετικέτες στην ιστοσελίδα σας. Έτσι είναι επαναχρησιμοποιήσιμα. Ένα αναγνωριστικό δεν είναι επαναχρησιμοποιήσιμα. Μια κατηγορία είναι επαναχρησιμοποιήσιμη. 

Και ξέρετε τι, για οποιοδήποτε φιλοσοφική reasons-- Δεν είχα τελειώσει μου νόμιζε Πάω να πω ότι το πρώτο εδάφιο και η δεύτερο εδάφιο είναι σημαντικές. Έτσι, Πάω να εφαρμόσει την κατηγορία που ονομάζεται "Σημαντικό", ότι, αν μπορώ να αποθηκεύσετε το αρχείο μου και να φορτώσετε εκ νέου, δεν έχει λειτουργικές επιπτώσεις ακόμα. Αλλά έχω προσθέσει μερικά μεταδεδομένα στο αρχείο, είδος της κάτι το ξεχωριστό από τα βασικά στοιχεία του φακέλου, έτσι ώστε τώρα το στυλ μου, αν μου αντί να πει ".important" - ξέρετε, κάτι που είναι σημαντικό, είμαι πρόκειται να κάνει font-χρώμα, red-- ή μάλλον δεν font-χρώμα, μόνο το χρώμα. Υπάρχει ασυνέπειες σε CSS, δυστυχώς. Και επαναλάβετε τη φόρτωση. Τώρα παρατηρήσετε την πρώτη δύο παραγράφους είναι κόκκινα αλλά όχι η τρίτη, γιατί μόνο εφάρμοσε την κατηγορία των "σημαντικών" με την πρώτη δύο από αυτά τα πράγματα. 

Έτσι, σε αναγνωριστικά, έχετε τη δυνατότητα για να καθορίσετε με μεγάλη ακρίβεια. Με τις κατηγορίες, έχετε επαναχρησιμοποίησης. Αλλά και στις δύο περιπτώσεις, η ανακοίνωση είδος της αρχής καλής σχεδίασης όπου θα συνυπολογίζονται όλα του αισθητική στο αρχείο styles.css μου. Έτσι δεν υπάρχει καμία ακαταστασία εδώ. Δεν υπάρχει καμία αναφορά σε κόκκινο ή τολμηρό προσανατολισμό ή το μέγεθος της γραμματοσειράς σε αυτό το αρχείο. Μάλλον έχω σημασιολογικά, ουσιαστικά χαρακτηρίζεται στοιχεία μου, εδώ είναι μερικά σημαντικά στοιχεία. Εδώ είναι μερικά πιο σημαντικά δεδομένα. Επιπλέον, εδώ είναι η "Πρώτη" των σημαντικών δεδομένων μου. Έτσι HTML είναι όλα σχετικά με το είδος του tagging, κυριολεκτικά, οι λέξεις και των παραγράφων και κατασκευές σε σας σελίδα με αυτά τα μικρά υποδείξεις, αν θα είναι, ότι μπορείτε να κατά κάποιον τρόπο μόχλευσης χρησιμοποιώντας άλλες τεχνικές όπως CSS με αυτόν τον τρόπο. 

Έτσι, σε απάντηση στην ερώτηση της Βικτώριας, μπορούμε να κάνουμε το κείμενο μεγαλύτερο με αυτό τον τρόπο. Υπάρχουν τόσοι πολλοί άλλοι τρόποι, αλλά η γραμματοσειρά tag-- ανοικτό στήριγμα "γραμματοσειρά" - είναι στην πραγματικότητα αρκετά χρόνια παλιά. Και αυτό είναι το πρόβλημα, πάρα πολύ, με στηριζόμενη μόνο σε απευθείας σύνδεση resources-- τείνουν να είναι ξεπερασμένη. Και πράγματι, αυτό είναι ήδη ξεπερασμένες, γιατί ο κόσμος συνειδητοποίησε, τι σημαίνει "font-size = 7" σημαίνει; Αυτό δεν το κάνει. Και έτσι για πολλά χρόνια και να αυτό day-- μία από την πλευρά της σημειώνει εδώ είναι ότι είναι πράγματι απίστευτα επώδυνη ακόμα μερικές φορές για την ανάπτυξη χώρων για την web, επειδή η Microsoft και η Google και Mozilla και άλλοι συχνά διαφωνούν ως προς τον τρόπο να ερμηνεύσει μια προδιαγραφή όπως HTML. 

Υπάρχει ένα σύνολο κανόνων για την HTML που γενικά λέει τι σημαίνει κάθε ετικέτα. Αλλά μερικές φορές μένει να το διακριτική ευχέρεια εφαρμογής του, διακριτικότητα και η Google της Microsoft. Και έτσι θα είναι πολύ συχνά βλέπετε σε μια ιστοσελίδα κάτι φαίνεται διαφορετικό σε ένα PC από ό, τι σε Mac, και αυτό είναι πραγματικά, διότι, στο τέλος της μέρας, δεν το δοκιμάσετε καλά και στις δύο πλατφόρμες. Αλλά είναι, επίσης, επειδή λογικές, έξυπνοι άνθρωποι θα διαφωνήσουν και οι εταιρείες θα διαφωνήσουν, και έτσι μία από τις προκλήσεις του προγραμματισμού για το web ή σχεδιασμό πράγματα για το web γράφει την ιστοσελίδα σας με έναν τρόπο που λειτουργεί σε κάθε web browser. Αλλά ακόμα και αυτό είναι παράλογο, σωστά; Υπάρχουν τόσες πολλές εκδόσεις των τόσων browsers εκεί έξω που, σε κάποιο σημείο, θα πρέπει επίσης να κάνει μια κλήση κρίσης και θα πρέπει να αποφασίσει ως εταιρεία, ιδιαίτερα για το ηλεκτρονικό εμπόριο στιλ τοποθεσίες όπου είστε προσπαθεί να χρησιμοποιήσει την τελευταία και μεγαλύτερη τεχνολογιών για να δώσει μια πραγματικά καλή χρήστη εμπειρία. Αλλά μερικοί ποσοστό των χρηστών σας θα μπορούσε εξακολουθούν να χρησιμοποιούν τον Internet Explorer 6 ή 7 ή 8, ιδίως σε συνάρτηση με το χώρα που από όπου και αν προέρχονται. 

Και έτσι πολύ συχνά στη διαβούλευση είναι κάτι όπως «τα στατιστικά στοιχεία web browser." Και αν πάμε to-- ας δούμε Wikipedia και να δούμε πώς up-to-ημερομηνία αυτό το διάγραμμα είναι εάν υπάρχει. Έτσι, εδώ μπορείτε να δείτε όπου browsers πραγματικότητα είναι, σύμφωνα με το Δεκέμβριο του 2015, σύμφωνα με την κυβέρνηση των ΗΠΑ. Chrome είναι σε μερίδιο αγοράς 42%, ακολουθούμενη από IE σε μεγάλο βαθμό στην εταιρική ρυθμίσεις ή ρυθμίσεις του υπολογιστή, φυσικά, ακολουθούμενη από τον Firefox, Στη συνέχεια Safari, Opera, στη συνέχεια, δεν το έκανε κάνουν τον χάρτη εδώ για κάποιο λόγο, και στη συνέχεια τους άλλους. Ίσως είναι υπό Άλλα. Αλλά το πιο προβληματικό από αυτό is-- ας δούμε αν η Wikipedia έχει επίσης εκδόσεις των browsers version-- 

Ας πάμε με τα στατιστικά στοιχεία του προγράμματος περιήγησης. IE. Ακόμη και αυτό δεν είναι αρκετό. στατιστικά στοιχεία του προγράμματος περιήγησης. δική μου εκδοχή. Αυτό δεν πρόκειται να είναι σωστό. Ας δούμε εκδόσεις. το μερίδιο αγοράς του προγράμματος περιήγησης. Ας δούμε αν αυτό έρχεται. ΕΝΤΆΞΕΙ. Τώρα αυτό γίνεται όλο και λίγο πιο χρήσιμο. Μέχρι εδώ, παρατηρούμε ότι έχουμε όλα διαφορετικές εκδόσεις των browsers. Και, Θεέ μου, αν look-- Chrome 48, το Chrome 47, Chrome 31, Chrome 45. Θέλω να πω, προγράμματα περιήγησης στο ολοένα και πιο ενημερωμένο, και μερικές φορές κάποιες από αυτές τις αλλαγές είναι σημαντικές σε όσον αφορά τη λειτουργικότητα. Και έτσι σε κάποιο σημείο, ο διαχειριστές προϊόν ή οι μηχανικοί πρέπει να κάνει μια decision-- σας ξέρετε τι, μόνο το 1% του παγκόσμιου εξακολουθεί να χρησιμοποιεί IE 7. Για την κόλαση μαζί τους. Εμείς απλά δεν πρόκειται να υποστηρίζει ότι το πρόγραμμα περιήγησης. Και τι σημαίνει να μην υποστηρίξει; Θα μπορούσε να σημαίνει ότι τα κουμπιά δεν λειτουργούν στην ιστοσελίδα σας, ή θα μπορούσε να σημαίνει ότι η μορφοποίηση είναι εντελώς off. Ή ίσως χρειαστεί να κάνετε ότι η ίδια κλήση κρίσης στο κινητό αυτές τις ημέρες, όπου, είμαστε δεν πρόκειται να υποστηρίξει IOS 5 πια. Έτσι, οι άνθρωποι πρέπει ακριβώς να αναβαθμίσουν. Ή εμείς δεν πρόκειται να υποστηρίξει Cupcake για το Android OS για συσκευές Android, γιατί ως world-- όπως η tech κόσμο θέλει να κινηθεί προς τα εμπρός, αυτό το είδος θέλει να σύρετε το κόσμο με το έτσι ώστε να μην πρέπει να συνεχίσει να είναι συμβατό έτσι ώστε να μπορούν να προσφέρουν νέες και καλά χαρακτηριστικά. Αυτό είναι πράγματι ένας από τους λόγους γιατί τόσες πολλές εταιρείες τροχαίο έξω αυτόματες ενημερώσεις και το είδος αναγκάζοντας οι τελευταίες εκδόσεις του λογισμικού μας. Και ακόμη και εταιρείες όπως η Apple θα ταξινομήσετε της σας αναγκάσει σχεδόν ή να τον υποχρεώνουν σας από την άποψη των δυνάμεων της αγοράς να αγοράσετε ένα νέο τηλέφωνο, επειδή ακριβώς δεν θα ενημερώσει το παλιό σας τηλέφωνο πια. Έτσι θα χάσετε το τελευταίες και μεγαλύτερες δυνατότητες, επειδή είναι δαπανηρή σε αυτούς ως ένα εταιρεία να διατηρήσει τα μεγαλύτερα, αναμφισβήτητα κατώτερη εκδόσεις του λογισμικού. Αλλά το καθαρό αποτέλεσμα είναι ότι μπορούμε επίσης να υποφέρουν και αυτό. 

Έτσι, ας ρίξουμε μια ματιά σε μόλις ένα ζευγάρι του τελικού πράγματα εδώ. Ας χτυπήσει από πραγματικά γρήγορα μερικά από τα αυτές οι άλλες σφαίρες, αν περίεργος. Έτσι, αν προσπαθούσαν να, για παράδειγμα, η θέση του το κείμενο σε διαφορετικές πλευρές του σελίδα, Πάω να κάνω ένα γρήγορο τρόπο, αλλά υπάρχει διαφορετική τρόποι για να γίνει αυτό. Επιτρέψτε μου να προχωρήσει και να eliminate-- απλουστευθεί αυτή ως εξής. Επιτρέψτε μου να πάω πίσω για να μου απλό, απλό παραγράφους. Επιτρέψτε μου να πάω πίσω στο styles.css μου. Και είμαι απλώς πρόκειται να χρησιμοποιήσετε το simple-- που μπορεί να έχετε δει στο Google ή ανάκληση από earlier-- text-align δεξιά. Και φορτώστε ξανά αυτή τη σελίδα. Τώρα τα πάντα φαίνεται να είναι δεξιά στοίχιση, όπως μπορείτε να δείτε στην εναέρια εδώ. 

Μπορούμε να φανεί λίγο πιο που μοιάζει με βιβλίο, και μπορούμε να πούμε "justify" και να φορτώσετε εκ νέου. Τώρα είναι ωραίο και την πλατεία και στις δύο πλευρές, το οποίο είναι το είδος της Νίκαιας. Ένας άλλος στόχος που είχαμε εδώ ήταν το χρώμα του κειμένου αλλαγής. Έτσι είδαμε ότι με κόκκινο κείμενο μου. Και τώρα να προσθέσετε κουμπιά για μια φόρμα. Γιατί λοιπόν να μην προσπαθούμε να κάνουμε ακριβώς αυτό; Αλλά πρώτα επιτρέψτε μου να πάω σε ένα site που οι περισσότεροι από εμάς χρησιμοποιούν κάθε day-- Google. Και ας ρίξουμε μια ματιά πώς το Google λειτουργεί πραγματικά. Αλλά Πάω να το κάνουμε αυτό. Κατ 'αρχάς επιτρέψτε μου να το κάνω in-- yep, επιτρέψτε μου να πάω στο Google πρώτα. Πάω να πρέπει να πάει σε Ρυθμίσεις Google, γιατί θέλω να απενεργοποιήσετε κάτι που ονομάζεται άμεσα αποτελέσματα. 

Έτσι, μπορεί να έχετε παρατηρήσει στο Google αυτά days-- επιτρέψτε μου να πάω πίσω και να μετατρέψει αυτό σε. Έτσι, αν μπορώ να ξεκινήσω την αναζήτηση για "γάτες", όπως αυτό, παρατηρήσετε ότι όχι μόνο Παίρνω auto-complete up κορυφή, ξαφνικά, η ίδια σελίδα φαίνεται να αλλάζει αρκετά γρήγορα, καθώς, και αυτό είναι το Google, χρησιμοποιώντας μια γλώσσα κάλεσε την Javascript προσπαθεί να είναι χρήσιμη. Αλλά, δυστυχώς, αυτό το είδος των λεσχών συζήτησης μας για το τι πραγματικά συμβαίνει κάτω από την κουκούλα εδώ. Έτσι, είμαι ακριβώς το είδος του γρήγορα απενεργοποιήστε άμεσα αποτελέσματα. Και Πάω να κάνετε κλικ στην επιλογή Αποθήκευση. Και τώρα πάω να ανοίξει ότι διαγνωστικών εργαλείων που έχω κρατήσει το άνοιγμα κάτω από την καρτέλα Δίκτυο. Ας το κάνουμε αυτό. Ας me-- whoops-- μετακινηθείτε προς αυτό κάτω από ένα κομμάτι. Και επιτρέψτε μου να ψάξετε για "γάτες". 

Και τώρα notice-- στην πραγματικότητα, αυτή είναι μια καλή ευκαιρία για να συζητήσουν για μια στιγμή. Παρατηρήστε τη στιγμή που type-- το σταματήσει. Σταμάτα το. ΕΝΤΆΞΕΙ. Παρατηρήστε τη στιγμή που πληκτρολογείτε το γράμμα C, να παρακολουθήσετε το κάτω μέρος της οθόνης. Α Τ Σ Τι κάνει το κάτω μέρος αυτής της οθόνης, καρτέλα δικτύου μου, Προτείνω συμβαίνει κάθε φορά που πληκτρολογείτε ένα γράμμα; Δυστυχώς, ο βάτραχος είναι πολύ αποσπά την προσοχή σήμερα ή το τριφύλλι ή ό, τι είναι. Τι συνέβαινε κάθε φορά που θα πληκτρολογήσει; Και επιτρέψτε μου να καταργήσετε την επιλογή του ρυθμιστικό και πληκτρολογήστε το ξανά. So-- κραυγών. Κάθε φορά που πληκτρολογείτε ένα γράμμα, C- Α- T-- έτσι μια νέα σειρά, προφανώς, συνεχίζει να εμφανίζεται. Τι σημαίνει κάθε μία από αυτές τις σειρές αντιπροσωπεύουν, με βάση όσα έχουμε δει και συζήτησε ως εδώ? Κοινό: Μια αναζήτηση; DAVID J. Malan: Μια αναζήτηση, ή πιο γενικά, ένα αίτημα HTTP από τον browser μου στον server. Λοιπόν, γιατί είναι το πρόγραμμα περιήγησής μου κάνει μια HTTP να ζητήσει κάθε φορά που πληκτρολογείτε ένα γράμμα; 

Κοινό: [δεν ακούγεται] DAVID J. Malan: Ναι, αυτό είναι δίνοντας μένα αυτά αυτόματη συμπλήρωση αποτελεσμάτων. Όπως, όπου κάνει αυτά αποτελέσματα αναζήτησης προέρχονται από; Λοιπόν, κάθε φορά που πληκτρολογείτε μια επιστολή, η Google στέλνει περισσότερα και όλο και περισσότερο από η λέξη Είμαι πληκτρολόγηση. Γιατί; Επειδή θέλουν να μου δώσει ένα και καλύτερα, καλύτερη πρόταση, μια λίστα με προτάσεις, για ποιο λόγο Προσπαθώ πραγματικά να ολοκληρωθεί. Έτσι, αυτό είναι να πω κυριολεκτικά κάθε χαρακτήρας που πληκτρολογείτε σε Google αποστέλλεται, τελικά, στην χύμα, αλλά και μερικές φορές ένα σε έναν χρόνο προκειμένου να εφαρμόσουν Αυτά τα auto-complete χαρακτηριστικά όταν τα δεδομένα είναι, φυσικά, από τον ιστό. 

Τώρα, ας ρίξουμε μια ματιά στο τι πραγματικά συμβαίνει όταν κάνω κλικ αναζήτησης Google. Και τότε θα αξιοποιήσει αυτό τον εαυτό μας. Έτσι, αν μετακινηθείτε προς τα κάτω τώρα στην πολύ πρώτο αίτημα που μόλις συνέβη. Παρατηρήστε την ακόλουθη. Είχε σταλεί σε μια αρκετά μεγάλη URL-- https://www.google.com/search; και στη συνέχεια ένα σωρό πράγματα. Ας δούμε αυτό στην πραγματικότητα τώρα στην ίδια την καρτέλα του προγράμματος περιήγησης. Ας απαλλαγούμε από τη γραμμή εργαλείων εδώ. Εδώ είναι η σελίδα των αποτελεσμάτων αναζήτησης. Και προειδοποίηση εδώ είναι η διεύθυνση URL. Τώρα, μπορείτε να μαντέψετε τι συμβαίνει εδώ εν μέρει. Έτσι, πρώτα απ 'όλα, ένας ορισμός. Αυτό προφανώς είναι ο προορισμός στο οποίο υποβάλλεται το έντυπο. Έτσι, όταν έχω πληκτρολογήσει το λέξεις "γάτες" και πατήστε Enter, προφανώς Google έστειλε εισαγωγής κειμένου μου σε αυτή τη διεύθυνση URL ότι έχω επισημανθεί εκεί, κάθετος αναζήτησης. Βγάζει, σε μια διεύθυνση URL, κάτι που συμβαίνει μετά από ένα ερωτηματικό είναι, όπως μας λένε διαρκώς, ένα ζεύγος κλειδιού-τιμής που είχε πληκτρολογήσει στη φόρμα ή με κάποιο τρόπο που μεταδίδεται από το πρόγραμμα περιήγησης στο διακομιστή. 

Έτσι, κάθε φορά που πληκτρολογείτε εισόδου σε μία μορφή στον ιστό και αυτό είναι που αποστέλλονται ως έχουμε συζητούν, μέσω ενός get, ένα από αυτά τα εικονικά φακέλους, τα περιεχόμενα του ότι envelope-- ναι, να τηρούν να πάρει γεμιστό σωματικά στο φάκελο της κατηγορίας σήμερα, αλλά τεχνολογικά αυτό είναι πραγματικά μπαίνουν στο URL. Έτσι, στην πραγματικότητα, επιτρέψτε μου να κοσκινίζω μέσα από αυτό. Πού βλέπετε εισόδου του χρήστη; Πού βλέπετε κάτι ότι εγώ ο ίδιος πληκτρολογήσει μέχρι εδώ; Ναι, έτσι "γάτες". Δικαίωμα? Επιτρέψτε μου λοιπόν απόσταξη αυτή σε κάτι πιο απλό. Πάω να διαγράψει τα πάντα για Αυτή η διεύθυνση URL που δεν καταλαβαίνω, και είμαι απλώς πρόκειται να φύγει ως this-- / αναζήτησης; q = γάτες. Θα δούμε, όπου q προέρχεται από σε μια στιγμή, αλλά ότι αισθάνεται σαν το ελάχιστο ποσότητα των πληροφοριών που παρέχονται. Και τώρα πάω να πατήστε Enter. Και παρατηρήσετε εξακολουθεί να λειτουργεί. Εξακολουθούμε να πάρει πίσω ένα σωρό γάτες. Έτσι, η Google είναι εκτροφέα από αυτό αυτές τις μέρες. Είναι το 2016, όχι το 1999. Έτσι, δεν υπάρχει άλλη ουσία που μου πρόγραμμα περιήγησης στέλνει στον server. Αλλά αυτό είναι ελάχιστα το μόνο που χρειάζεται. 

Λοιπόν τι συμβαίνει? Λοιπόν, πρώτα επιτρέψτε μου να πάει μπροστά και να πάει Επιστροφή στην Cloud9 και επιτρέψτε μου να πάει μπροστά και κλείστε καρτέλες μου νωρίτερα. Και θα κάνω αυτό στο μου Διαθέτουμε μόνο για μια στιγμή. Πάω να πάει μπροστά και να δημιουργήσετε νέο αρχείο. Και Πάω να το αποθηκεύσετε ως google.html. Και Πάω σε πολύ quickly-- Πάω να κλέψουν, στην πραγματικότητα, μερικά από αυτό το κείμενο ακριβώς για να εξοικονομήσετε χρόνο. Πάω να επικολλήσετε αυτό εδώ. Είμαι δεν πρόκειται να ασχοληθείτε με οποιαδήποτε σχηματοποίηση αυτή τη φορά. Εμείς πάμε για να καλέσετε αυτό το "Google μου." Και Πάω να απαλλαγούμε τα πάντα στο σώμα. Και Πάω να κάνω το εξής. Επιτρέψτε μου να μεγεθύνετε. Μορφή action-- και όπως ανέφερα εν συντομία earlier-- whoops-- όπως εν συντομία αναφέρθηκε νωρίτερα, η δράση της α μορφή είναι όπου μπορείτε να στείλετε τα δεδομένα σε. Έτσι google.com/search. Και η μέθοδος που θέλετε να χρησιμοποιήσετε μπορεί να είναι ένα από τα δύο πράγματα. Μπορεί είτε να "πάρει", όπως κρατάμε συζητούν, ή μπορεί να είναι "post". Προς το παρόν, η θεμελιώδης διαφορά είναι, αν χρησιμοποιείτε "πάρει" όλες τις πληροφορίες ότι η χρήστης παρέχει παίρνει αποστέλλονται στη διεύθυνση URL. 

Αυτό είναι μεγάλο για τα πράγματα όπως αναζήτηση κινητήρες και μερικές άλλες εφαρμογές, αλλά υπό ποιες συνθήκες θα ήταν δεν θέλετε να συμπληρώσετε μια φόρμα και έχουν τις πληροφορίες που καταλήγουν το URL, όπως και στη γραμμή διευθύνσεων του browser σας; Τι είδους μορφές κάνουν you-- Κοινό: [δεν ακούγεται] DAVID J. Malan: Ναι, σαν αυτό; Κοινό: Οι κωδικοί πρόσβασης. DAVID J. Malan: Ναι, έτσι μπορείτε να συνδεθείτε στο Facebook ή κάποια ιστοσελίδα. Αυτό είναι που εισάγει ο χρήστης από μια μορφή, ένα πλαίσιο κειμένου, αλλά ίσως δεν το θέλουν εμφανίζονται σε URL του προγράμματος περιήγησης. Γιατί; Θέλω να πω, ίσως υπάρχουν κάποια συνέπειες για την ασφάλεια του δικτύου, αλλά πιο-- αρέσει, πιο απλά, τι εάν συγκάτοικό σας, σημαντικό άλλο σας, τα παιδιά σας, ο σύζυγός σας φαίνεται μέσα από την ιστορία του προγράμματος περιήγησης σας; Υπάρχει σωστό κωδικό πρόσβασης σας υπάρχει στην ιστορία του browser σας. Ότι δεν αισθάνεται σαν καλό σχεδιασμό. Ή ακόμα πιο τεχνικά, ας υποθέσουμε ότι προσπαθείτε για να ανεβάσετε μια φωτογραφία στο Flickr ή το Facebook ή wherever-- δηλαδή εισόδου του χρήστη, ακόμη και αν είναι λίγο πιο interesting-- πώς μπορώ να χώνω μια εικόνα στη γραμμή διευθύνσεων URL; Μπορείτε είδος του είδους δεν μπορούν. Μπορείτε είδους μπορεί. Αλλά, πραγματικά, είμαι πιεσμένοι να φανταστεί το κάνουμε αυτό. Γι 'αυτό χρειάζεται μια άλλη μέθοδο για την ανέβασμα φωτογραφιών σε μια ιστοσελίδα, και ότι άλλη μέθοδος ονομάζεται "post". Αλλά για τώρα, θα μιλάμε μόνο για "Πάρει", η οποία είναι η απλούστερη από τις δύο. Είναι απλά βάζει όλα τα εισόδου του χρήστη στο URL. 

Έτσι, εδώ είναι η μορφή Είμαι δημιουργία. Θέλω μια είσοδο. Και ξέρετε τι; Πάω να λάβει μια εικασία εδώ. Πάω να υπενθυμίσω μου εισόδου "Q" για την "απορία". Και νομίζω ότι αυτό είναι ένα από τα πρωτότυπα σχέδια, ίσως, από το 1999. Και τότε ο τύπος αυτής της εισόδου είναι ακριβώς πρόκειται να είναι "κείμενο". Και τότε Πάω να έχουν μια άλλη είσοδο ότι δεν χρειάζεται ένα όνομα, όπως σύντομα θα Βλέπετε, ο τύπος του οποίου είναι «να υποβάλει». Και αυτό πρόκειται να να μου δώσει ένα ειδικό κουμπί. Και αυτό είναι όλο. 

Επιτρέψτε μου λοιπόν να πάει μπροστά και να αποθηκεύσετε αυτό το αρχείο. Πάω να πάει πίσω στο μου πρόγραμμα περιήγησης και μεταβείτε στη google.html. Εισάγω. Και αυτό είναι το είδος της αραιές για να πούμε το λιγότερο. Αλλά επιτρέψτε μου να πάει μπροστά και η αναζήτηση για "γάτες". Και παρατηρήσετε είμαι σήμερα σε αυτή τη διεύθυνση URL Cloud9. Αλλά από τη στιγμή που κάνετε κλικ σε αυτό, πού να ελπίζουμε ότι θα καταλήξουν; 

Κοινό: Google. 

DAVID J. Malan: Google. Ας κάντε κλικ στο κουμπί Υποβολή. Και πράγματι έχω ξανά σε εφαρμογή της Google. Δικαίωμα? Είναι απλό. Είναι ελαφρύτερο. Θέλω να πω, ο κωδικός μου είναι σαφώς καλύτερη από ό, τι δικοί τους, από το χάος που είδαμε νωρίτερα. Και ξέρετε τι; Πάω να μπαχαρικό αυτό μέχρι λίγο. Δεν αναφέρω αυτό νωρίτερα. Υπάρχουν ετικέτες όπως H1, για τον τομέα 1, το πιο σημαντικό τίτλο σε μια σελίδα. "Google μου," Θα καλέσω αυτό. Επιτρέψτε μου να φορτώσετε εκ νέου. Είναι αναζητούν λίγο καλύτερα ήδη. Και, πραγματικά, ξέρετε τι; Έχω already-- είπα ψέματα. Είπα ότι δεν επρόκειτο να το στυλ αυτό, αλλά Πάω να το στυλ αυτό όπως πριν. Και το σώμα μου πρόκειται να είναι, ας πούμε, το κέντρο text-align. Είναι μοιάζει περισσότερο με το Google ήδη. 

Χρειάζομαι ένα διάλειμμα γραμμή, όμως, γι 'αυτό το κουμπί Υποβολή. Και αποδεικνύεται, μπορείτε μπορούν να χρησιμοποιήσουν τις σκέψεις, ή μπορείτε να περισσότερο κυριολεκτικά μόνο να πω, να μου δώσει μια γραμμή διάλειμμα here-- την ετικέτα br. Και αν φορτώσετε εκ νέου αυτό, τώρα θα πάει εκεί. Είναι λίγο άσχημο, γι 'αυτό θα μπορούσε να κάνει πολλαπλές αλλαγές γραμμής, αλλά ας μην πάρει πάρα πολύ άπληστοι εδώ. Έτσι τώρα ας δούμε αν δουλεύει για "σκυλιά". Φαίνεται να λειτουργεί για "σκυλιά", όπως καλά. Έτσι ποια είναι η επιτακτική takeaway εδώ; Ένα-- δεν ήταν ένα τεράστιο άλμα για την εισάγουν μερικές περισσότερες ετικέτες, όπως το tag μορφή στην ετικέτα εισόδου. Αλλά πιο ουσιαστικά είναι, όλοι κάνουμε αξιοποιεί την κατανόησή μας του ΗΤΤΡ και του γεγονότος ότι οι μορφές, τελικά, να αλλάξει τι είναι το URL του προγράμματος περιήγησης, και έτσι, ως εκ τούτου, μπορούμε μηχανικά παρέχουν είσοδο σε ένα διακομιστή κάνοντας μια φόρμα HTML και γνωρίζοντας ότι ο διακομιστής καταλαβαίνει HTTP, ακριβώς όπως το σώμα μας καταλαβαίνει, όπως, κουνώντας το χέρι μου, το ίδιο πρωτόκολλο, και έτσι παίρνουμε πίσω την απάντηση ότι μπορούμε τελικά να περιμένουμε. 

Έτσι, ας προσπαθήσουμε να κάνουμε ένα τελευταίο πράγμα τώρα με το κινητό, και εγώ θα make-- εγώ θα προσθέσω αυτός ο κώδικας με τις διαφάνειες. Έτσι, αν θέλετε να πειραματιζόμαστε, να σας μπορεί σίγουρα να το πάρετε από εκεί. Αλλά Πάω να πάει μπροστά και να κάνουν ένα πράγμα. Πάω να πάει μπροστά και να ανοίξει page-- δείκτη μου σελίδα γεια μου όπως και πριν, η οποία έχει πολλά αυτού του faux-Λατινικής κειμένου, ή νόημα λατινικό κείμενο, και has-- μοιάζει με αυτό σε αυτό το μέγεθος της γραμματοσειράς. Αλλά επιτρέψτε μου να προχωρήσει και να το κάνουμε αυτό. Πάω να μπω σε Cloud9. Και δεν χρειάζεται να το κάνουμε αυτό το βήμα. Εγώ απλώς θα το κάνω εγώ. Πάω να κάνετε κλικ Share. Και αυτό είναι ένα χαρακτηριστικό μόνο του Cloud9, σύμφωνα με την οποία Μπορώ να κάνω το περιβάλλον μου δημόσια. 

Και μόνο για χάρη της επίδειξης, επιτρέψτε μου να το κάνουμε αυτό. Πάω να κάνει δημόσια την αίτησή μου. Παρατηρήστε ότι είναι με προειδοποίηση, είμαι Εγώ σίγουρα θέλω να κάνω αυτό, γιατί αυτό πρόκειται να κάνει ο καθένας στον κόσμο, είτε είναι εδώ τώρα ή παρακολουθώντας το βίντεο αργότερα η διαδίκτυο σε θέση να δουν αυτό που βλέπω. Αλλά αυτό είναι εντάξει. Πάω να πω "Done". Και επιτρέψτε μου να σας ενθαρρύνω, αν το έκανα Αυτό correctly-- επιτρέψτε μου να το δοκιμάσετε πρώτα. Προχωρήστε, εάν δεν mind-- σε ένα πρόγραμμα περιήγησης στον υπολογιστή σας, πηγαίνετε σε αυτό το URL, και ελπίζω θα δείτε τη Λατινική κείμενό μου. Και για να είναι σαφές, είναι Δεν τρέχει στο laptop μου. Είναι στο σύννεφο. Είναι στο Cloud9, κυριολεκτικά, αλλά Έχω κάνει δημόσιες χώρο εργασίας μου έτσι ώστε ο καθένας στο διαδίκτυο μπορούν να έχουν πρόσβαση Λατινική αρχική σελίδα μου. 

Πηγαίνετε στην ίδια διεύθυνση URL για τηλέφωνό σας, αν μπορούσε. Εάν αυτό θα σας κοστίσει, όμως, θα μπορεί απλά να κοιτάξουν πέρα ​​από έναν ώμο. Κοινό: [δεν ακούγεται] DAVID J. Malan: Λυπάμαι; Κοινό: [δεν ακούγεται] DAVID J. Malan: Ακριβώς λατινικές λέξεις. Αυτό είναι όλο. Αλλά αυτό είναι που πρέπει να δείτε. 

Κοινό: Ναι. DAVID J. Malan: Ναι. Ναι. ΕΝΤΆΞΕΙ. Έτσι μπορώ να κρατήσει ψηλά σας τηλεφώνου για μια στιγμή; Έτσι, ελπίζουμε, αν έχετε πρόσβαση αυτό, πρέπει να εξετάσουμε σχεδόν δυσανάγνωστο. Είναι ακόμα-- Θέλω να πω, ότι είναι δυσανάγνωστο λόγω της Λατινικής. Αλλά είναι επίσης δυνατή η ανάγνωσή του για ό, τι άλλο λόγο; Όπως, τι δυσαρεστεί γι 'αυτό; Κοινό: Είναι μικρό. DAVID J. Malan: Είναι σούπερ, σούπερ μικρό. Λοιπόν, πώς θα μπορούσαμε να το διορθώσω αυτό; Είναι σούπερ, σούπερ μικρά στο τηλέφωνο Βικτώριας και, αν έχετε τραβήξει αυτό τον εαυτό σας, ίσως μικρό στο τηλέφωνό σας, καθώς και, αν δεν έχετε ενεργοποιήσει ρυθμίσεις προσβασιμότητας. Τι είναι αυτό? Θα μπορούσατε απλά να τσιμπήσετε και ζουμ, η οποία είναι εφαρμόσιμη, αλλά στη συνέχεια το μόνο που βλέπετε λίγα λόγια σε μια στιγμή. Έτσι, περιμένετε ένα λεπτό. Ξέρω πώς να το διορθώσω αυτό. Δικαίωμα? Θα μπορούσα να χρησιμοποιήσω CSS, και θα μπορούσε να αλλάξει η μέγεθος γραμματοσειράς από το 12-σημείο 24-σημείο. Αλλά η παρενέργεια του ότι, Φυσικά, πρόκειται να είναι τώρα, σε έναν επιτραπέζιο ή φορητό υπολογιστή, τώρα το κείμενο είναι δύο φορές πιο μεγάλο. Και γι 'αυτό θα ήταν το είδος του είναι ωραία να γίνει διάκριση μεταξύ των συσκευών, και αποδεικνύεται εκεί έξω είναι οι τρόποι για να γίνει αυτό. Υπάρχουν αρκετές διαφορετικούς τρόπους, στην πραγματικότητα, σύμφωνα με την οποία, χρησιμοποιώντας CSS και φανταχτερά χαρακτηριστικά ότι δεν θα πάει σε με μεγάλη λεπτομέρεια, μπορείτε ουσιαστικά να υποβάλετε ερώτημα το πρόγραμμα περιήγησης και να πω, Αν η οθόνη σας είναι μικρότερη από αυτή πολλά pixels, χρησιμοποιούν αυτό το μέγεθος της γραμματοσειράς. Αν η οθόνη σας είναι μεγαλύτερο από αυτό πολλά pixels, χρησιμοποιήστε αυτό το άλλο μέγεθος της γραμματοσειράς. 

Μπορείτε να είστε ακόμη πιο φανταχτερά ακόμα. Αν έχετε επισκεφθεί ποτέ ένα ιστοσελίδα που, σε μια επιφάνεια εργασίας, έχει ένα μεγάλο μενού ίσως μακριά για να το πλευρά, και στη συνέχεια όλο το περιεχόμενο είναι προς την πλευρά της ότι μενού- αυτό είναι το είδος ενός κοινού προτύπου. Μενού στα αριστερά, το περιεχόμενο στα δεξιά, ή το αντίστροφο. δεν λειτουργεί πραγματικά στο κινητό όταν σας οθόνη είναι μόνο αυτό πολλά pixels πλάτος. Έτσι, πιο συχνή σε κινητά είναι, μενού σας θα πάρει ξαφνικά κατέρρευσε, και θα πρέπει να κάντε κλικ σε ένα κουμπί για να το δείτε, ή η ιστοσελίδα θα βάλει το μενού πάνω από αυτό και να θέσει το περιεχόμενο κάτω από αυτό. Και μπορείτε να εφαρμόσετε αυτά τα πράγματα με πολλούς τρόπους, πάρα πολύ. Μπορείτε να ζητήσετε από τους προγραμματιστές σας, hey, ομάδα, οποιαδήποτε στιγμή θα δείτε μια αίτηση HTTP από το Android συσκευή, μια συσκευή Microsoft, Google, συσκευή, μια συσκευή της Apple, χρησιμοποιήστε αυτό το μέγεθος γραμματοσειράς και να χρησιμοποιήσετε αυτή τη διάταξη του μενού, ή αλλιώς να χρησιμοποιήσετε αυτό το προεπιλεγμένο μεγαλύτερο διάταξη. 

Τώρα, χρησιμοποιώντας ό, τι θεμελιώδη τεχνική σήμερα θα μπορούσαν να χρησιμοποιήσουν οι μηχανικοί να γνωρίζει αν πρόκειται για ένα iPhone, ένα ανδροειδές τηλέφωνο, ένα φορητό υπολογιστή, ένα desktop επίσκεψη του server της εταιρείας; Όπου παίρνουν αυτές τις πληροφορίες; 

ΚΟΙΝΟ: Επικεφαλίδα; 

DAVID J. Malan: Ναι, η κεφαλίδα HTTP. Έτσι, κάθε αίτηση HTTP που προέρχονται από πελάτες τους για να τους διακομιστές περιλαμβάνουν, μέσα σε αυτό το εικονικό φάκελο, ένα σωρό των κεφαλίδων HTTP, ένα εκ των οποίων είναι το πρόγραμμα περιήγησης και το λειτουργικό σύστημα ακόμα, αν σας ενδιαφέρει να ότι το επίπεδο της λεπτομέρειας. Τώρα, είναι ένα αινιγματικό μέλλον εγχόρδων, αλλά υπάρχει λογισμικό που θα μόλις απλοποίηση ότι, και μπορείτε απλά να ζητήσετε στον προγραμματισμό code-- PHP, Java, C ++, whatever-- τι τηλέφωνο είναι this-- ποια συσκευή είναι αυτός ο χρήστης χρησιμοποιώντας; Και τότε θα μπορούμε να πούμε, να τους δείξουμε αυτό έκδοση της ιστοσελίδας αν είναι ένα τηλέφωνο. Δείξτε τους Αυτή η έκδοση του ιστοσελίδα αν είναι ένα φορητό ή επιτραπέζιο υπολογιστή. Αλλά εσείς δεν χρειάζεται καν server-side πολυπλοκότητα. Μπορείτε να κάνετε ακόμη και το απλούστερο των πραγμάτων. 

Πάω να το κάνουμε αυτό. Πάω να προχωρήσει σε Cloud9 περιβάλλον μου, και πάω να προσθέσετε μια ετικέτα ότι είδατε στο Google πριν. Ονομάζεται η μεταετικέτας. Και ποτέ δεν θυμάμαι αυτό το ένα, έτσι Πάω να το μεταγράψει εδώ. Meta name = "θύρα προβολής" και, στη συνέχεια, content = "width = πλάτος συσκευής, intital κλίμακα = 1 "και αυτό είναι όλο. 

Έτσι, θα μπορούσε κάλλιστα να είναι σαν ένα μαγικό ξόρκι. Δεν είναι όλα αυτά σαφές, αλλά αυτό δεν έχει κάτι να κάνει με το παράθυρο, και το παράθυρο είναι μόνο το σώμα ενός ιστοσελίδας, η ορθογώνια περιοχή η οποία καθορίζει το μεγαλύτερο μέρος της σελίδας. Και αυτό ακριβώς λέει το πρόγραμμα περιήγησης, ξέρετε τι; Κάντε το πλάτος αυτής της σελίδας αποτελεσματικά ίσο με το πλάτος της συσκευής. Με άλλα λόγια, μην υποθέσετε ότι Έχετε είδος απεριόριστο χώρο. Ας υποθέσουμε ότι έχετε μόνο όσο χώρο ως την ίδια τη συσκευή είναι μεγάλη. Και έτσι τώρα, αν μου επαναλάβετε τη φόρτωση του στο πρόγραμμα περιήγησής μου, δεν βλέπω καμία αλλαγή. Αλλά αν το έκανα αυτό correctly-- και επιτρέψτε μου να διασχίσουν πατήματα μου, αν όλα σας reload τηλέφωνα σας, κάνετε δείτε μια συγκλονιστική αλλαγή; Ναι, είναι ερμήνευα-- 

Κοινό: [δεν ακούγεται] DAVID J. Malan: Ναι. ΕΝΤΆΞΕΙ. Έτσι, αναμφισβήτητα πιο ευανάγνωστο τώρα; Ακόμα μικρή, για να είμαστε δίκαιοι, αλλά όχι τόσο μικρό ώστε να είναι ανεξέλεγκτη. Και θα μπορούσα σίγουρα παρακάμψετε αυτό περαιτέρω με CSS ή στην πλευρά του server, αλλά όλο αυτό που είσαι βλέπουμε είναι όλο και περισσότερα χαρακτηριστικά να προστίθεται στο client-side environments-- JavaScript, όπως θα συζητήσουμε αύριο, CSS, και HTML-- έτσι ότι όλα αυτά τα ερωτήματα μπορεί να γίνει στον πελάτη έτσι ώστε να ενοχλεί το εξυπηρετητή πολύ λιγότερο και δεν να πρέπει να συμβαδίσει με, για παράδειγμα, η συνεχής επίθεση του νέου λειτουργικού συστήματος εκδόσεις, νέες εκδόσεις του προγράμματος περιήγησης. Μπορείτε να αφήσετε απλά το πρόγραμμα περιήγησης να ζητήσει από τη συσκευή, πόσο μεγάλη θα είναι, και στη συνέχεια να κάνει κάπως λογικό αποφάσεις που βασίζονται σε αυτό. Αλλά θα δούμε περισσότερες ευκαιρίες για λογικές αποφάσεις αύριο στο πλαίσιο μιας γλώσσας προγραμματισμού. 

Έτσι, οποιεσδήποτε ερωτήσεις, στη συνέχεια, για την ανάπτυξη web; Σήμερα δεν είναι web προγραμματισμό, ανά se, δεδομένου ότι οι περισσότεροι ό, τι κάναμε Ήταν πολύ αισθητική, αν θέλετε. Δεν υπάρχει διαδικασία λήψης αποφάσεων σε ο κώδικας που έχουμε γράψει, και έτσι ώστε ο λόγος HTML είναι μια σήμανση γλώσσα, δεν είναι μια γλώσσα προγραμματισμού. Αλλά αύριο θα πάρουμε μια γρήγορη ματιά, σε τελική ανάλυση, σε JavaScript, που είναι μια πραγματική προγραμματισμού γλώσσα που μας επιτρέπει να κάνουμε λίγο περισσότερο. 

Καμιά ερώτηση? Λοιπόν, επιτρέψτε μου να προτείνω δύο ευκαιρίες προαιρετική για το σπίτι. Ένα is-- αυτά Cloud9 λογαριασμούς δεν θα λήξει. Είστε ευπρόσδεκτοι να χρησιμοποιήσετε να πειραματιζόμαστε με. Είναι η ελεύθερη επίπεδο των υπηρεσιών. Συνειδητοποιήστε ότι, εάν κατά τη δημιουργία το χώρο εργασίας σας, κάνατε το κοινό, Αυτό δεν σημαίνει ότι ο καθένας για το διαδίκτυο μπορεί να δει αυτό που πληκτρολογείτε. Έτσι ίσως απλά να εξετάσει Δεν αμηχανία τον εαυτό σας αν είστε βάζοντας την πρώτη σας web σελίδα εκεί έξω στο κοινό κατά λάθος, αλλά κανείς δεν πρόκειται να ξέρουν να ψάξουν εκεί ούτως ή άλλως. 

Και two-- επιτρέψτε μου να πετάξει μέχρι αυτό το URL, καθώς, ειδικά αν ήρθε στο σήμερα λίγο λιγότερο άνετα από ό, τι άλλα, σίγουροι για το τι σημαίνουν όλα αυτά τα πράγματα. Συνειδητοποιήστε ότι πολύ περισσότερο από αυτό το βίντεο, η οποία είναι και ένας καλός τρόπος για να κοιμηθείτε και, επίσης, να γελάσει, ενώ αυτόν τον τρόπο, έχει επίσης πολλά societally ενδιαφέροντα και την ασφάλεια σχετικές συζητήσεις εκεί από τον John Oliver, αν και κωμικός. 

Αλλά αν δεν υπάρχουν περαιτέρω ερωτήσεις, που μας φέρνει στη ρεσεψιόν. Γιατί λοιπόν να μην μπορώ να ενεργοποιήσετε τη μουσική. Θα πρέπει να υπάρχει ποτά και σνακ έξω. Είμαι στην ευχάριστη θέση να σμίξει με Όσο οι λαοί θα ήθελαν, απαντήσει σε ερωτήσεις πιο one-on-one. Αλλά, αλλιώς, είστε ευπρόσδεκτοι να απογειωθεί σε οποιοδήποτε σημείο, και θα σας ξαναδώ αύριο το πρωί για λίγο περισσότερο. Εντάξει, ευχαριστώ.