DAVID J. Malan: Très bien. Nous sommes de retour. Ainsi, l'objectif de cette dernière session est d'introduire un peu plus de concepts mais aussi donner une chance à tous au genre d'étirer vos doigts et effectivement faire quelque chose un peu pratique. Le but est de ne pas tourner nous tous dans les développeurs web par tout moyen, mais vraiment juste pour vous donner un avant-goût de certains des constructions fondamentales de ce que va dans la programmation web et aujourd'hui web développement, de sorte que le côté statique de things-- aucune logique, aucune programmation la langue, tout le contenu statique. Et cela nous donnera l'occasion de voir réellement ce qu'est un serveur web est, voir ce qu'est un fichier HTML est, voir ce que il est HTTP est effectivement un service vers le haut. Mais avant de nous plonger dans, toute rétrospective questions sur le cloud computing ou à la sécurité ou quelque chose entre les deux? Non? Bon, eh bien, nous allons faire, juste au cas où le processus de signature pour quelque chose prend quelques minutes. Nous laissons le faire en arrière-plan. Allez-y, si vous pouviez, au c9.io. de cette URL Ceci est un tiers Clients-- la plate-forme en tant que service, si vous will-- qui va vous inviter pour vous inscrire à un compte, et il va donner à chacun de vous un compte dans le nuage que l'on appelle sur l'infrastructure de quelqu'un d'autre, une société appelée Cloud9. Mais ce qui est agréable au sujet est qu'ils vous donnent une approximation d'un développement réel du monde réel environnement, bien que dans le nuée et dans un navigateur Web, et nous allons utiliser ce réellement expérimenter un peu aujourd'hui. Et puis aller de l'avant et juste naviguer votre chemin vers le processus d'inscription si tu peux. Donc, il nous arrive d'utiliser dans la classe J'enseigne pour tous nos étudiants, à la fois sur le campus et en dehors maintenant, et il est remplacé ce qui historiquement était un logiciel téléchargeable autrement. Donc ce que vous gagnez l'accès à est l'une de ces machines virtuelles, en substance, que je l'ai décrit plus tôt. Donc, cette société Cloud9 probablement les loyers provenant d'une troisième Party-- effet dans ce cas, Google-- ensemble tas de machines virtuelles qu'ils coupent en quelque sorte vers le haut dans l'illusion de serveurs individuels que chacun de nous a un contrôle total sur. Il est pas tout à fait exact de dire qu'ils sont des machines virtuelles, cependant, parce que ce Cloud9 utilise en fait est une technologie un peu plus récente appelé conteneurisation. Et laissez-moi prendre cette image ici pour peindre cette image. 

Un conteneur est, si Vous rappelez-vous l'image à partir plus tôt, un peu plus léger poids qu'une machine virtuelle. En fait, alors que la dernière le temps nous avons parlé il étant une exploitation système et un hyperviseur puis le système d'exploitation invité, invité système d'exploitation, exploitation invité système, au-dessus de votre matériel physique, la différence avec ce plus récent la technologie, conteneurisation, est qu'ils partagent tous en quelque sorte le même système d'exploitation. Mais ils créent encore l'illusion de tout le monde ayant sa propre exclusive droits administratifs et les fichiers sur le serveur. Mais il y a moins de logiciels entre vous et le matériel. Dont le résultat est, en la théorie, une performance supérieure, parce que vous utilisez ou gaspiller moins de ressources sur ce que l'on appelle la couche de virtualisation. Donc, ce qu'on appelle conteneurisation, par nature, par le biais d'une technologie appelée Docker, qui est très bien venir dans son propre. Et ceci est quelque chose qui les ingénieurs de votre entreprise pourrait sorte de sorte de commencer à parler au sujet bientôt si elles ne l'ont pas déjà, mais il n'y a certainement pas raison de sauter sur tout bandwagons. 

Donc, avec cela dit, ce vous voyez probablement maintenant est un écran qui ressemble un peu à ce sujet. D'ACCORD. Et appelez-moi plus sinon. Et si so-- je viendrai plus sinon. Allez-y et cliquez sur ce grand ainsi que pour créer un espace de travail, et vous verrez un écran comme celui-ci. Vous pouvez appeler l'espace de travail le nom que vous voulez pour l'instant. Et effectivement, pour simplifier, aller et-- bien, certains d'entre vous ont déjà des espaces de travail. Appelez ça comme vous want-- affaires, Harvard, jeudi tout ce que vous souhaitez. Vous n'avez pas besoin d'une description. Vous pouvez le laisser privé, à moins que vous ont déjà un tas d'espaces de travail. Si vous êtes obligé de le rendre public, qui est très bien pour les besoins d'aujourd'hui. Ici aussi, est l'un des upsells. Vous obtenez un espace de travail privé par défaut. Mais si vous voulez plus, vous devez payer pour plus. Sinon, ils vous forcent pour rendre votre travail public. Mais ça va, parce que ils ont également cibler ce aux communautés open-source pour encourager les gens à effectivement collaborer. 

Et la dernière chose qui est important, cependant, est, après avoir choisi un nom et après que vous choisissez privé ou public, cliquez sur HTML5, l'icône big orange deuxième à partir de la gauche, et puis cliquez sur Créer l'espace de travail. Et ce sera probablement prendre une minute ou deux, mais vous aurez alors une environnement, une fois que vous faire, qui ressemble rappelle ce que je dois à l'écran ici maintenant. Mais, encore une fois, cela peut prendre une minute ou plus pour se rendre à cet écran une fois que vous avez cliqué sur Créer l'espace de travail. Mais juste signaler un moi plus si vous voulez que je à jeter un oeil à quelque chose ou conseiller. D'accord. Donc, je vais fond ce pour le moment. Appelez-moi plus si vous semblez ont des difficultés techniques. Mais, encore une fois, cela peut prendre un peu pour cela d'ouvrir. Et nous allons aller de l'avant et de parler de ce que cela signifie en fait de faire une page web, ce que HTML est, et comment tout cela interconnecte maintenant que nous commençons pour réellement utiliser une partie de la technologie. Donc, il se trouve que je peux aller sur mon petit Mac ici, ouvrir un programme simple appelé TextEdit, ou sur Windows je pouvais quelque chose d'ouvert appelé Notepad.exe. Et je ne pouvais tout simplement faire quelque chose comme this-- "bonjour, monde." Et alors je pourrais enregistrer comme hello.txt donc pas de magie là-bas. Cela n'a rien à voir avec web programmation, rien à voir avec HTML. Il suffit de créer un fichier texte simple. Mais il se trouve qu'une bande page est littéralement juste que. Il est un texte simple fichier texte contenant que vous pouvez taper à votre clavier, mais généralement, mais pas toujours se termine à ne pas .txt mais .html ou .htm. Et vous faites pas seulement taper des mots dans le fichier. Vous avez en fait d'utiliser des choses appelées balises ou, plus généralement, quelque chose appelé langage de balisage. 

Je vais donc taper très rapidement et ensuite expliquer ce qui suit. Je vais d'abord tapez ceci, qui dit, hey, navigateur, voici un page Web écrite en HTML. Et ces deux choses disent ensemble, hey, navigateur, ce qui suit est en effet HTML. Hey, navigateur, voici le tête ou le haut de ma page. Hey, navigateur, à l'intérieur de la partie supérieure ma page, mettez un titre qui est, "bonjour, monde." Hey, navigateur, après la tête de mon la page, voici le corps de ma page. Et, hé, navigateur, le corps de mon page devrait aussi dire «Bonjour tout le monde." Alors, quels sont les détails importants ici? Ceci est ce qui est généralement appelé une déclaration de type doc, et, franchement, il est un peu difficile à mémoriser ce au premier abord. Vous avez juste sorte de copier-coller. Ceci est la manière formelle de dire, hé, navigateur, J'utilise la version HTML 5 qui est sorti quelque peu récemment. Il est une incantation magique que certains l'homme avec un mauvais sens de la conception a décidé de mettre à la haut du fichier. Même si elle est un peu mystérieux, qui est tout il désigne: hey, navigateur, ici est livré avec la version 5 de HTML. 

Le reste de ce qui a été avec nous depuis un certain temps, historiquement, mais il a été en constante évolution, et il est sans doute été d'obtenir un peu plus simple. Notez quelques caractéristiques de ce que je l'ai souligné. Il y a ces choses avec un angle brackets-- le support gauche et le support droit. Et remarquez la symétrie ici. Et par symétrie, je veux dire, comme je avoir cette balise de début ici ou un tag ouvert si vous voulez, ici j'ai un à proximité tag ou une balise de fin qui est autrement que dans la mesure où elle a cette slash au début du mot HTML. Et vous pouvez penser ce que j'était nonchalamment proposer avant, hey, navigateur, voici quelques-uns HTML. Et, à l'inverse, hé, navigateur, qui est pour le début et la fin de HTML--. 

Pendant ce temps hey, navigateur, ici vient la tête de ma page. Hey, navigateur, qui est pour la tête. Hey, navigateur, voici le corps de ma page. Hey, navigateur, qui est pour le corps. Et à l'intérieur de c'est un peu texte arbitraire pour l'instant. Et à l'intérieur de la tête, en attendant, est un peu arbitraire, mais marqué, pour ainsi dire, le texte qui indique, le titre de ma page doit être "bonjour, monde." Maintenant, pour l'instant, vous pouvez supposer que les navigateurs avoir ou terre que: plutôt, pages web ont seulement deux parts-- la tête et le corps. Et la tête est généralement juste comme la barre de menu, les choses vraiment juste au sommet. Et le corps est le courage de la page, tout dans ce grand rectangle qui remplit l'écran. Je vais donc aller de l'avant et de le faire. Je vais aller de l'avant et cliquez sur Enregistrer, Enregistrer le fichier. Et je vais sauver ce que hello.html, et je vais juste le mettre sur mon bureau. Et je vais aller avant et cliquez sur Enregistrer. Et notice-- mon Mac au moins est crier après moi. Es-tu sûr de vouloir faire ça? Et je vais vous dire, oui, utiliser HTML. Je sais mieux dans ce cas. Et maintenant, je vais aller à mon bureau où je dois ce fichier soudainement. Et je vais double-cliquez dessus. Et vous remarquerez que, par par défaut, Chrome ouvert. C'est parce que ce mon navigateur par défaut. Et il dit simplement, "bonjour, monde." Mais il est dit "bonjour, monde »en deux endroits. Remarquez en haut à gauche. Jolie difficile de rater ça. Il est gros et gras. Et où il ne semble à-dire «bonjour, monde»? 

AUDIENCE: L'onglet. 

DAVID J. Malan: Oui, l'onglet lui-même. Alors, quand je l'ai dit le chef de la page est tout jusqu'à top-- et en effet cela est le titre. Il est juste dans l'onglet ici. Et je peux tirer cet onglet de manière à ne pas confondre. Ceci est juste un seul onglet maintenant, et en effet, nous voyons "bonjour, monde" ici et "bonjour, monde" ici-bas. Donc assez simple. Mais il est également assez simple. Et, en fait, je zoomé. Je peux changer la taille des caractères seulement pour agrandir l'accessibilité. Mais nous allons faire maintenant quelque chose un peu plus intéressant. 

Je vais go-- whoops, laissez Je reviens à mon fichier texte. Je vais revenir à mon fichier texte, et je vais de changer cela et dire "Bonjour, Disney World." Sauvegarder. Et revenir à mon navigateur et cliquez sur Recharger. Et maintenant, bien sûr, il dit «Disney World». Et je vais faire un zoom artificiellement en seulement il est donc plus facile de voir. Alors maintenant, malheureusement, je veux genre de to-- fait, c'est une fonctionnalité Mac. Je veux cliquer sur Disney World et aller quelque part comme disney.com, mais cela ne fonctionne pas. Ainsi, un principe de base de la nappe est hyperliens, des liens qui vont ailleurs. Alors, comment dois-je faire cela? Eh bien, je ne pouvais dire, "Bonjour, http://www.disney.com." Sauvegarde ça. Recharger. Mais cela aussi, pas cliquable. Et ce qui est bien ici, même si ce ne fonctionne pas encore, est qu'il semble que le navigateur ne littéralement seulement ce que je dis de faire. Donc, si je viens de taper une URL comme ceci, il va juste me montrer l'URL. Je dois utiliser des balises ou balisage langue pour réellement dire le navigateur pour faire encore plus. Je vais donc aller de l'avant et supprimer cela pour un moment. Et je vais dire, hey, navigateur, démarrez une ancre ici, un lien pour ainsi dire. Et l'hyper-référence, la destination de cette ancre, devrait être cette URL. Et remarquez mes citations. Je pourrais utiliser des guillemets simples, aussi, mais vous devez être cohérent, et je voudrais utiliser généralement guillemets pour le garder simple. Remarquez que je vais fermer la balise. Et puis ici, je vais à-dire, «Disney World». Et maintenant je besoin d'symmetry-- support ouvert, / a, support fermé. 

Alors qu'est-ce que j'introduit? Nous avons déjà quelques tags. HTML, Chef, Titre, Body, sont tous les tags, pour ainsi dire, avec leurs homologues ouverts et fermés. Mais remarquez, c'est une sorte de fondamentalement différent. Ceci est ce que nous appellerons en HTML un attribut. Et un attribut est juste une paire clé-valeur. Ceci est une chose courante dans la paire clé-valeur de l'ordinateur. Il est en quelque sorte de l'outil de travail. Une clé et une valeur. Un mot et puis certains ou plusieurs autres mots. Et dans ce cas, la clé est href, et la valeur est que l'URL complète. Et quel attribut fait est-il influe sur le comportement d'un tag. Et dans ce cas, nous avons besoin d'influencer le comportement de la balise d'ancrage, parce que nous devons ancrer ce lien quelque part. Et comment vous faites cela est par l'intermédiaire de l'attribut. 

Je vais donc aller de l'avant et enregistrez le fichier maintenant. Retour à mon navigateur et reload. Et voila, nous avons maintenant la début d'une page Web légitime. Super-simple, mais si je planer sur avis this-- dans le coin inférieur gauche, il est super-petite. Mais vous voyez www.disney.com. Et si je clique dessus, en effet cette me fouets loin pour disney.com. Maintenant, ce qui est curieux ici est qu'il n'y a pas l'best-- l'URL la plus commercialisable, mais qui est bien parce que ce fichier ne existent sur le World Wide Web. Il existe en tant que fichier local en apparence mes utilisateurs directory-- / jharvard-- pour John Harvard-- / bureau. Mais il a une URL. Il se trouve être local. Malheureusement, aucun d'entre vous pouvez visiter cela, parce que si vous tapez cette URL, vous seriez en parler à votre navigateur, chercher un hello.html de fichier appelé sur votre disque dur. Et, bien sûr, sauf si vous avez été suivant le long de la main, il ne va pas y exister. 

Donc, ça va. Nous avons encore besoin d'une façon, en fin de compte, pour obtenir ce fichier dans le web, mais nous allons démêler quelques conséquences sur la sécurité de ce que nous venons vu et l'attacher vers le plus haut discussion de ce matin. Il se trouve que, si navigateur ne littéralement juste ce que je dis de faire, et il semble d'être le cas où une balise d'ancrage est influencée par la valeur du cet attribut appelé href mais il affiche cette texte, cela semble impliquer que je pourrais mettre l'URL dans les deux endroits puis rechargez et maintenant voir l'URL et aller à l'URL. Remarquez, si je plane sur le fond à gauche, Je vais en effet encore disney.com. 

Donc, si vous avez déjà été phished-- P-H-I-S-H-E-D-- avec un de ces e-mails faux à partir comme PayPal votre banque, vous avez probablement eu des liens à l'intérieur de l'e-mail que vous avez lu que vous dit de cliquer ici pour aller confirmer votre mot de passe ou de confirmer votre date de naissance socialement ou social ou quelque chose vous ingénierie de divulguer information. Eh bien, je pourrais sorte de prendre avantage de cela, pourrait-ce pas? Je pourrais dire quelque chose comme, www.paypal.com. Et au lieu de disney.com, je pourrait aller, comme, badguy.com. Recharger. Et comment est-il facile à duper, en particulier un lecteur non-technique ou une lecture sommairement lecteur que de cliquer sur un lien comme celui-ci, qui, si je clique sur it-- En fait, je ne veux pas aller badguy.com. Je ne sais pas ce qui est réellement là. Donc paypal.com, avis, est ce qu'il dit qu'il va, mais bien sûr, si je regarde vers le bas super-bas, il est un peu floue, mais il dit badguy.com. C'est le seul dire en ce moment que je vais au mauvais endroit. Et quand je l'ai dit plus tôt que les banques ne devrait vraiment pas encourager ou former utilisateurs en liens en cliquant sur ce est juste une manifestation. Et il est aussi simple que cela. Vous êtes maintenant un adversaire si vous faites quelque chose comme ça et essayer de tromper un utilisateur à visiter votre site Web. Mais pour l'instant, nous allons continuer les choses belles et propres. Nous allons aller de l'avant et rembobiner ces changements. Recharger la page. Et je reviens à disney.com. 

Voyons voir si nous ne pouvons pas taquiner cet appart un peu plus. Donc, "bonjour, Disney World." Je vais dire ici. Peut-être que je vais faire de la place. "Nous esperons que vous aimez votre sejour!" Sauvegarder. Recharger. Il est pas rea-- ce n'est pas ce que je voulais, non? Je veux dire, si je traite mon texte le fichier comme un traitement de texte, qu'est-ce que vous espérez se passerait-il ici? Ouais, je me sens comme il devrait être un saut de ligne ici, donc il se sent bogué en quelque sorte. Mais cela fait délibérée, parce que tout comme avant, le navigateur ne va faire ce que vous lui demandez de faire. Je l'ai pas dit à briser les lignes. Je l'ai pas dit de se déplacer vers le bas, même mais, intuitivement, je me sens comme je l'ai fait. Donc, il se trouve que nous devons un peu plus de balisage, et je vais résoudre ce problème de la manière suivante. Je vais faire précéder ce premier bonjour avec ce qu'on appelle une étiquette de paragraphe. Et puis je vais aller de l'avant et envelopper cette autre phrase dans une autre balise de paragraphe, même si ils sont super-paragraphes courts. Maintenant, je vais sauver. Recharger. Et maintenant nous avons ce que l'espace, et nous sorte de ont la sémantique deux paragraphes distincts. 

C'est tout beau et bon, mais il serait être agréable d'ajouter une image à cette page, donc je vais aller chercher Mickey Mouse sur Google Images. Et juste pour le plaisir, je suis va saisir cette image. Je vais aller de l'avant maintenant et saisir l'URL de cette image, mais il est différent façons de le faire. Pour l'instant, je vais juste copier l'URL. Je vais retourner dans mon texte fichier, et je vais dire ici, img src = entre guillemets cette URL, super long. Et puis la notion de l'image est un peu différent. Il n'y a vraiment aucune idée de départ une image et se terminant une image, comme une balise de début d'une balise de fin. Donc, il se sent un peu bizarre me sémantiquement de faire cela, d'avoir une étiquette close-image. Il est pas incorrect. Il est parfaitement correct, et il est encouragé, mais il y a notation abrégée. Je peux sorte de simultanément ouvrir et fermer la même étiquette, et qui feront le navigateur heureux. Donc, il est juste un peu plus succinct pour les choses que conceptuellement vraiment pas logique de début et de fin. Ils ne sont tout simplement là, ou ils ne sont pas. 

Donc, je vais enregistrer ce et revenir à mon "bonjour, monde" la page et reload. Et il est un peu hors de contrôle, parce que cette image est en réalité un peu gros, mais c'est OK. Je pourrais le redimensionner dans un programme. Ou vous savez quoi. Juste pour montrer, je suis va effectivement dire que la largeur de cette chose devrait seulement 200 pixels, 200 points. Laissez-moi aller de l'avant et sauver et de recharger, et maintenant la page regarde un peu plus raisonnable. Mais remarquez le motif. Eh bien, je l'ai appris genre de vous tous du HTML dans un certain sens, au moins conceptuellement, parce que tout est HTML est ces tags-- balises ouvertes, balises fermées, et les attributs que modifier leur comportement. Et, apparemment, chaque tag peut avoir zéro ou un ou deux ou plusieurs attributs, chacun des qui fait quelque chose d'un peu différent. Maintenant, comment savez-vous ce qui existe? Vous venez d'écouter quelqu'un comme moi vous dire ce qui existe, ou que vous venez de Google autour d'un tutoriel le HTML, et il est vraiment ce simple. 

Vraiment, quand j'étais un étudiant de premier cycle il y a des années et appris HTML, un de mon enseignement de mathématiques assistants venons de passer un peu de temps à me tutorat car, comme une demi-heure, une heure, et puis je suis sur mon chemin. J'étais sur mon chemin vers la prise les sites les plus hideuses jamais, qui, apparemment, je n'ai pas vraiment progressé au-delà. Mais le fait est que, une fois que vous comprendre ces simples ideas-- si arcane text-- mais ces simples idées de départ une pensée et la fermeture d'une pensée, en gardant tout bien équilibré, regarder quelque chose, la modification de la comportement de cette balise, qui est vraiment tout il est à elle. Et en effet, si nous passons maintenant à quelque chose comme google.com-- fait, Allons un endroit un peu plus reasonable-- stanford.edu. Et je vais aller pour voir, Développeur, Afficher la source. Il est laid, mais notice-- et je zoome avis certaines choses qui sont déjà familiers. Il y a cette ici, qui est un navigateur. Voici HTML5. Il y a HTML. Apparemment, il y a une attribue que je ne l'ai pas utilisation qui spécifie le langue de la page, et cela peut aider avec automatique traduction et des trucs comme ça. Voici la tête de la page. Voici le titre de la page de Stanford. Il y a un tag que je ne l'ai pas parler yet-- Meta tag. Il est juste une sorte de Informations d'arrière-plan. Il aide avec la SEO, ou optimisation du moteur de recherche, ou les résultats Google-recherche ou similaire. Mais si nous continuons à regarder, garder la recherche, voici la balise Body. Et il y a des grappes d'autres balises nous avons pas encore parlé. Mais Div est un pour un division de la page. Il est comme un rectangle invisible si vous voulez sorte de mentalement diviser votre page en différentes unités en ligne. Et puis beaucoup de divs I voir, ce qu'on appelle la classe, mais nous reviendrons à cela. 

Ceci est interesting-- formes. Les formulaires sont sur tout le web. Toute boîte de recherche vous êtes jamais utilisé est une forme. Et, donc, nous allons effectivement voir. Forme. Action. L'action de cette forme, pour quelque des raisons historiques, est cette URL. Méthode est "post". Avère que les requêtes HTTP peuvent utiliser le verbe «obtenir», comme nous l'avons vu précédemment, ou "post". Et va voir une différence cela dans un moment. Voyons effectivement voir ce que cela est. Permettez-moi de revenir à la page de Stanford. Quelle forme sont-ils parler à propos, pensez-vous? Qu'est-ce que vous saute au? 

AUDIENCE: zone de recherche. 

DAVID J. Malan: Oui. Donc, jusqu'à en haut à droite voici ce champ de recherche. Et voilà comment ils ont mis un it-- tag qui est littéralement forme ouverte-support. Et puis nous allons chercher quelque chose. Cherchons un copain de mine-- "Nick Parlante." Entrer. Et bien sûr, il est allé à une URL légèrement différente. Permettez-moi de revenir ici. Cherchons "cours." Bon sang. Nous sommes allés à une URL différente. Donc, Stanford ajoutant un peu de magie qu'ils ne sont pas me prendre à l'URL que nous avons vu dans la attribut action là. Mais cette forme ici est mis en œuvre purement par le biais de ce balisage ici, ces balises. En fait, voici l'entrée pour le type de recherche que vous souhaitez. Voici l'entrée pour un autre type de recherche. Voici l'entrée de la chaîne elle-même. Et l'objectif est de ne pas envelopper nos esprits autour de l'ensemble de ces balises mais juste pour voir. Il vient d'ouvrir et de fermer tags et regardant les choses. Ouais? Victoria? 

AUDIENCE: [Inaudible] DAVID J. Malan: Voilà une bonne question. C'est un peu plus délicat à voir. Permettez-moi de revenir à ce que question en quelques minutes quand on regarde quelque chose appelé feuilles CSS, ou style en cascade, et nous pouvons essayer de déduire autant de la page. Donc, si nous prenons maintenant un regard sur google.com, nous allons voir ce que leur page ressemble. Vous they're-- c'est mignon aujourd'hui. D'ACCORD. Terminé. Très bien, alors Afficher la source. On pourrait penser que Google a vraiment sympa code source. Donc, apparemment, ce qui se passe ici? Et en fait, ce n'est pas même HTML. Ceci est quelque chose appelé JavaScript. Et nous allons continuer et aller. Je ne sais même pas où la page commence. Je vais utiliser la Command F, ouvert support HTML. D'accord, il est là. J'ai trouvé le début de la page, et il y a tellement de choses ici. 

Qu'est-ce qui se passe réellement? Eh bien, vous savez quoi, nous pouvons nettoyer cette place. Si je vais à la place de cette Inspectez barre d'outils, cet outil de diagnostic spécial, et pas aller au Réseau, où nous continuons aujourd'hui, mais si je vais à Elements, ce qui est vraiment agréable est qu'un navigateur a beaucoup bien meilleurs yeux que moi. Et le navigateur peut lire ce gâchis d'une page Web, que HTML courrier que nous venons regardé, et il peut analyser ou lire et analyser et reformater d'une manière humaine conviviale agréable. Donc, ce que je vois maintenant dans cet écran ici sous Elements, exactement le même contenu, mais ils ont tout en retrait, ils ont colorisées, mais il est exactement le même texte que j'ai téléchargé à partir du serveur. 

Et ce qui est agréable est maintenant je peux voir dans le corps, pour avis instance--, la page est toujours composé de seulement une tête et un corps, et je peux plonger hiérarchiquement ici. Notez que Google semble avoir à divs-- celui-ci et celui-ci. Je peux développer cela. Il y a tout un tas d'autres divs. Donc, il est un peu complexe. Mais attendez. Cela semble tellement plus lisible, relativement, que celui-ci. Pourquoi Google embarrassant lui-même en envoyant simplement cet immense gâchis de code de certains sorte juste pour mettre en œuvre quelque chose qui semble si simple à première vue? Comme, pourquoi ne pas ajouter plus de places? Pourquoi ne pas frapper Entrez comme je le faisais? Regardez à quel point je suis à l'écriture d'une page Web. Je frappe Entrez avec tant de diligence. J'indenté donc tout est si jolie et lisible. Pourquoi Google ne pratique pas la même chose? 

AUDIENCE: [Inaudible] DAVID J. Malan: Good. Très juste. Ils ne sont pas certains personne à Google manuellement mettre à jour la page d'accueil plus. Ce n'est pas plus 1999. Ils ont donc un logiciel. Ils ont d'autres outils générer dynamiquement ils sont HTML. Bien sûr, ce code lui-même a été écrit par les humains, mais la réalité est, il est tout à fait juste de dire, le navigateur ne certainement pas soin comment salissant le code est. Mais il y a encore plus raison technique convaincante que Google distribue leur HTML code dans un tel bâclée, apparemment manière écrasante tous emballés ensemble avec très peu way-- très peu dans la voie de mise en forme comme je le faisais. 

AUDIENCE: [Inaudible] 

DAVID J. Malan: Faster? Pourquoi? Et qu'est-ce que vous dites, Lydia? Plus vite? Pourquoi plus vite? AUDIENCE: [Inaudible] DAVID J. Malan: Il y a pas d'espace pour lire. Ouais. Alors, pensez à ce que l'espace est. Ainsi, chaque caractère sur le clavier prend une certaine quantité d'espace pour représenter, soit physiquement, comme il prend beaucoup de place, ou en quelque sorte sous le hotte, qui nécessite de la mémoire. Et comme un aside-- et nous parler plus sur ce tomorrow-- chaque caractère sur le clavier nécessite généralement 8 bits, ou un octet. Ainsi, un modèle de 8 zéros ou ceux, ou juste 1 octet, comme nous les humains diraient généralement. Voilà donc petit, mais il est toujours non nulle. Il est encore une certaine quantité d'espace. Donc, si un ingénieur ou Google frappe la barre d'espace qu'une seule fois, et supposons Google-- il est super-popular-- Supposons qu'un milliard de personnes visitez leur page d'accueil par jour, ou d'un nombre de personnes visitez la page d'accueil d'un milliards de fois par jour, combien d'octets supplémentaires a ce ingénieur logiciel juste coûte Google en frappant son espace bar une fois? 

AUDIENCE: [Inaudible] DAVID J. Malan: Pas tout à fait mauvais. Juste un temps d'octets d'un milliard. Alors a-- AUDIENCE: 8 milliards de gigaoctets. DAVID J. Malan: Non 8 milliards. 8 milliards d'octets. Mais 1 gigaoctet. 1 gigaoctet serait l'unité de mesure. S'il ou elle fait deux espaces, 2 gigaoctets. Trois gigaoctets. Droite? Il évolue cher. Et dans des cas comme Google, qui, certes, sont des cas extrêmes, il y a d'autres questions qui se posent tout simplement en prenant des décisions très raisonnables ou de prendre des actions humaines très simples, parce qu'il a cet effet amplifié. Donc, l'une des raisons cela ressemble tellement comprimé est exactement comme Victoria dit-- était vient d'être généré par les ordinateurs de toute façon. Donc, pas une grosse affaire. Laissez le navigateur comprendre. Mais elle a aussi délibérément n'a pas beaucoup d'espace, parce que l'espace est pas nécessaire. Et l'espace coûte réellement l'argent. 

Soit il coûte du temps, parce que juste à pousser que beaucoup plus de données sur siège de google.com juste a obtenu de prendre une certaine quantité de le temps, même si elle est millisecondes ou microsecondes, mais qui ajoute sur tant d'utilisateurs, ou plus probablement, il en coûte probablement de l'argent. Google relie probablement quelqu'un d'autre dans le monde, un de ceux peering des points, et si elles ont une sorte de relation financière de sorte que coûte de l'argent de leurs données, ils pourraient aussi bien minimiser les données combien ils cracher sur leur connexion Internet. 

Donc, la chose drôle, mais, en fin de compte, ou peut-être la chose rassurante, est que même si cela ressemble terriblement écrasante, à la fin de la journée, il est toujours les mêmes principes exacts que cette page très simple ici d'un HTML page. Donc, pour résumer et que vous avoir une version canonique si vous n'êtes pas suivant le long par le choix ici, ici pourrait être le plus simple des pages web, donc quelque chose à jouer avec peut-être plus tard. 

Eh bien, nous allons introduire un quelques autres idées maintenant. Nous sommes sur le point d'introduire ce qu'on appelle une balise de style. Nous pouvons styliser cette page de façon plus intéressante. Ainsi, alors que HTML email est tout au sujet de balisage les données, sorte de spécifier à un navigateur comment structurer les données, où le mettre, CSS, ou feuilles de style en cascade, est une deuxième langue généralement obtient amalgamés avec HTML comme nous allons see-- mais nous pouvons nettoyer que dans une moment-- qui prend il le dernier mile, et il stylise elle. Il obtient les couleurs juste, la taille de police juste à droite, le positionnement juste. Il est tout au sujet de l'esthétique ou le formatage, pas les données fondamentales lui-même. Et la meilleure façon de montrer cela est peut-être par exemple. Donc, je vais aller sur à mon fichier texte simple. Et dans un instant, je vais nous guider dans le processus de le faire nous-mêmes. 

Je vais revenir à mon dossier ici et recharger la page juste pour confirmer à quoi il ressemble. Voilà où nous en sommes maintenant. Je me sens comme les enfants jouiraient ayant une certaine couleur à cette page Web. Donc, je vais aller ici dans la tête de la page. Et je vais faire le style, / style. Et puis à l'intérieur de cela, je vais de dire le corps de mon page-- et cette mise en forme est, à première vue, peut-être un peu étrange, mais classique. Je vais dire que l'arrière-plan couleur de cette page doit être vert. Et cela est malheureusement sorte de ne pas la meilleure conception. Notez que précédemment dans le monde du HTML, Je dis que les attributs sont ces paires clé-valeur. Quelque chose égale citation «Quelque chose». Unquote Dans le monde de CSS, qui était conçu par des personnes différentes, ils ont décidé que, dans leur monde, paires clé-valeur serait mot colon quelque chose. Il est donc la même idée, cependant. Il est d'associer une valeur avec une certaine clé en quelque sorte influe sur le comportement de cette page. 

Et vous pouvez probablement le deviner. Quel est ce va probablement à faire même si vous avez jamais vu HTML ou CSS avant? AUDIENCE: Changer la couleur de fond. DAVID J. Malan: Oui, changer la couleur de fond. Et en particulier la la couleur de fond du corps. Mais dans la mesure où le corps pour le moment est le web page-- il est la seule chose en dessous de la barre de titre really-- il va probablement influencer la même chose. Voyons donc. Sauvons cela. Rendez-vous ici et recharger. Il est assez hideux. Et ce qui se passe ici est un effet secondaire. Je viens choisi cette image au hasard. Pourquoi le vert pas imprégnant derrière Mickey? AUDIENCE: [Inaudible] DAVID J. Malan: Exactement. Il se trouve que les images, assez beaucoup toutes les images que nous pourrions utiliser, sont tous rectangles-- de rectangles. Même si Mickey a des courbes à lui-même et a un fond, Dans ce contexte doit être quelque chose. Il doit être blanc. Il doit être noir ou autre chose. Il peut être transparent. Et en fait, je pouvais ouvrir Mickey Mouse ici dans un programme appelé Photoshop ou quelque chose de similaire et changer tout cela blanc arrière-plan transparent, de sorte que le vert serait briller à travers. Mais ce quelque chose que je devrais de demander à moi-même ou un artiste graphique ou un concepteur chez moi société, par exemple, à faire, d'autant plus que je viens emprunté celui de l'Internet. Mais c'est pourquoi ce qui se passe. 

Alors, que pourrions-nous faire? Eh bien, nous pourrions vouloir nous dire vraiment espérons que vous apprécierez votre séjour. Et pour mettre l'accent, je veux pour faire de cette forte, et je vais le dire fort et ouvert fermer fort et puis rechargez. Et il est un peu difficile à voir sur le projecteur mais peut-être vraiment maintenant vous saute au un peu plus. Ainsi, vous pouvez ajouter des italiques dans ce Ainsi, face gras de cette façon. Nous pourrions changer les couleurs. En fait, juste pour le plaisir, je suis aller de l'avant et de le faire. Je n'aime pas vraiment comment mon paragraphes sont ce rapprochés, donc je pourrais faire quelque chose comme ça. Je vais dire au navigateur, changer chaque balise de paragraphe pour avoir, nous allons say-- fait, vous savez quoi, nous allons alignez text-align, centre. Et encore, je sais que cela ne parce que quelqu'un me l'a enseigné ou je l'ai regardé dans une référence en ligne. Alors permettez-moi de sauver ce. Et, ah, maintenant je l'ai centré l'image là. Et en fait, vous savez quoi, si Je déplace mon image dans un paragraphe tag-- donc un troisième paragraphe, même si elle est pas de texte. Sauvons cela et recharger. Maintenant, la page est en train de regarder type de-- Je veux dire, il est encore assez laid, mais au moins il semble que je passai deux minutes au lieu d'une minute faire. 

Et donc, progressivement, pouvons-nous faire ces changements esthétiques maintenant à la page? Je ne l'ai pas vraiment changé les données dans le page autre que l'ajout du mot vraiment. J'ai ajouté des métadonnées, si vous voulez. Hey, navigateur, faire le mot "vraiment" gras. Mais les données ne sont pas forts. Voilà les métadonnées. Les données sont «vraiment». Nous avons donc encore quelques-uns les mêmes concepts que précédemment. Maintenant, bien sûr, cela ne figure pas sur le web, donc je vais faire une dernière étape ici. 

Je vais aller à hello.html et juste mettre en évidence et copier ce. Et maintenant, je vais aller dans Cloud9, qui Je vais vous guider à travers dans un instant. Et les chances sont que vous serez bientôt, si pas déjà, un écran comme celui-ci. Et permettez-moi de vous donner un rapide visite de ce Cloud9 est en réalité. Donc, encore une fois Cloud 9 est ce service en nuage que vous et me donne l'illusion d'avoir notre propre machine virtuelle dans le nuage, techniquement un conteneur dans le nuage, que nous avons plein privilèges administratifs à. Donc, en théorie, personne ne ailleurs dans le monde a l'accès à l'écran, je suis regardant en ce moment, sauf peut-être les gens qui gèrent le site, parce que techniquement ils ont l'accès physique et ainsi de suite. 

Alors qu'est-ce que nous voyons dans cet environnement? Je vais faire un zoom arrière, parce qu'il est un peu petite. Et permettez-moi de plus ici pour un moment. Sur le côté gauche de mon et votre écran, il y a un navigateur de fichiers à gauche. Donc, dans le même esprit pour Mac OS et Windows. Celles-ci sont toutes de la fichiers dans mon compte. Et par défaut, si votre compte est comme le mien, vous verrez ou à bientôt helloworld.html et readme.md. Ici à droite, cela est où vont mes fichiers texte à partir. Si vous avez déjà utilisé Microsoft Word ou Notepad ou TextEdit, c'est la parole de mon édition de fichiers va aller. Et puis le plus mystérieux caractéristique de cet environnement que nous allons pas vraiment besoin d'utiliser est ici appelé une fenêtre de terminal. Si vous avez utilisé DOS antan, c'est le Linux ou l'équivalent Linux de DOS. Il est un interface-- basé sur du texte pas de clics de souris, pas traîner. Tout ce que vous pouvez faire est de taper les commandes, mais ces commandes peut créer des fichiers, déplacer des fichiers, ouvert répertoires, répertoires proches, faire un certain nombre de choses. Mais pour l'instant, nous allons simplement passer notre temps ici. 

Et nous allons le faire. Si vous êtes dans cette environnement, vous devriez être si vous avez créé un espace de travail déjà, aller de l'avant et juste aller jusqu'à to File, New un instant. Et cela vous donnera une nouvelle onglet ici au milieu. Et je just-- et celui laissé aller de l'avant et le faire. Allons de l'avant et maintenant ne Fichier, Enregistrer et aller de l'avant et l'appeler hello.html, à ne pas confondre avec helloworld.html, qui est venu avec votre nouveau compte gratuit, qui est juste un exemple de fichier. Vous verrez apparaître tout à coup, très probablement sur le côté gauche, et l'onglet sera toujours ouverte. Et laissez-moi vous encourage maintenant à recréer ce fichier ou certaines variantes de ceux-ci. Et si vous ne pouvez pas tout voir sur le écran, cela est identique aux diapositives que vous avez probablement dans un autre onglet. 

Donc en bref, faites votre première page web, l'enregistrer, puis dans un instant, Je vais vous montrer comment vous peut réellement voir ce. Mais changer au moins une chose. Changer helloworld à quelque chose de votre choix, de sorte que vous êtes convaincu que c'est votre déposer et non celui que je viens de créer. D'accord. Et quand vous ready-- pas rush-- lorsque vous êtes prêt, aller de l'avant et enregistrez le fichier une fois que vous avez fait ces changements. Et si vous cliquez sur le button up top Run, cette devrait ouvrir un nouvel onglet qui indiquera vous ce que l'URL, vous pouvez visiter votre dossier, mais il pourrait prendre un moment pour je cite "start Apache", qui est le nom du serveur. Soyez donc prudent de faire exactement ce qui est dans le fichier en fin de compte. Donc maintenant, je vais un zoom avant. Si je commence à taper open-support HTML, un avis ça me demandant de terminer ma pensée. Et si je terminais ma pensée, il me donne automatiquement la balise de fermeture. Mais l'attente est alors je vais frapper Entrée, puis déplacer à l'intérieur il y et ne diriger à l'intérieur et alors je fais corps à l'intérieur. Et il est un peu bizarre au début, parce qu'il fait le travail pour vous, mais se rendre compte que finalement, il vous évite les frappes. Et en fait, une caractéristique très commune la programmation des environnements ces jours-ci à la fois pour le développement web comme Ceci et la programmation proprement dite, dont nous parlerons demain, est ces caractéristiques de l'auto-complétion, les choses qui permettent seulement programmeur ou un designer taper moins de frappes à accomplir la même chose. Parfois, il est bon, cependant. Parfois, il est tout simplement ennuyeux. Et, encore une fois, une fois que vous avez transcrite la glissière ou une variante de celui-ci, vous pouvez cliquer sur le bouton Exécuter en haut. Et puis dans le fond fenêtre, vous serez informé à quel URL vous pouvez visiter votre page Web. Mine, par exemple, est à business-daharvard.c9users.io et ainsi de suite. Très bien, alors, laissez moi-- des questions? Toutes les autres questions au sujet juste de ce travail avant d'ajouter des fonctionnalités? Et permettez-moi de proposer, juste pour obtenir les gens comfortable-- parce qu'il est une chose juste copier-coller aveuglément ce que je l'ai fait. Mais juste pour que les gens se débattent avec au moins un à faire, Je vais tourner de la musique. Je vais proposer une liste de choses que vous pouvez potentiellement ajouter. Et vous pouvez certainement utiliser Google. Et pourquoi ne pas nous venons de proposez que vous essayez de résoudre au moins un problème particulier ici. Donc, en termes d'étiquettes, permettez-moi de réutiliser cette ici. 

En fait, laissez-moi mettre sous une forme textuelle. Disons que, parmi les balises que nous pourrions utiliser voici quelques balises ici. Nous avons vu l'étiquette de paragraphe. Maintenant, il va à l'auto-complet. Paragraphe tag, la balise d'ancrage. Disons que vous voulez faire quelque chose de plus grand, de sorte que vous pourriez like-- la balise span peut vous aider. Eh bien, vous pourriez avoir besoin d'aide pour que, dans un instant. Nous avons vu div. Vous verrez qu'il ya table. Il quelque chose appelé tr, td. Th, td. Revenez dans un instant. Que peut-être à portée de main? Il y a fort. Il y a un accent, ou plutôt em. There's-- quoi d'autre pourriez vous avez envie d'ici? Eh bien, nous allons jeter un regarder cela ensemble. Forme, que nous avons vu. Il y a la forme. Il y a entrée et quelques autres. Très bien, alors nous allons le faire. Pour répondre à un de Victoria question, laissez-moi d'abord assurez-vous que tout le monde est en mesure d'obtenir leur travail de bonjour. Alors permettez-moi de vous présenter un couple d'autres idées. Ensuite, nous allons laisser les gens à résoudre un problème sur leur propre. Ensuite, nous allons effectivement revenir à cette notion d'une forme, et nous allons effectivement re-mettre en œuvre ainsi que l'interface frontale, pour ainsi dire, pour Google lui-même. Nous allons utiliser Google comme le back-end et laissez faire le travail dur, la recherche, mais nous recréons l'extrémité avant de Google et le formulaire de recherche qu'ils ont sur leur propre page d'accueil. Et nous reviendrons ces balises en un instant. 

Donc, ce fut ce que je proposé il y a un instant. Nous pouvons ajouter la stylisation à un page à l'intérieur de cette balise de style, et nous pouvons styliser l'arrière-plan la couleur, l'alignement du texte, que ce soit au centre ou à gauche ou à droite. Mais très vite vous le feriez trouver ou un concepteur web trouveraient que cette devient un peu lourde, parce que vous faites ce qui est appelé le mélange contenu avec la présentation de celui-ci. Vous mélangez vos données et l'esthétique de celui-ci. Et en fait, si vous considérez ce qui va se passer sur time-- ceci est très faible page Web, bien sûr. Mais si j'ajouter du contenu à cette page et ajouter du style à cette page, la page devient très rapidement plus et plus et plus longtemps. Et suppose que je veux une deuxième page Web partage certains de ces attributs. Supposons que ma deuxième page web pour mon site-- aussi, je veux centre de tout, et je veux aussi tout avec un fond vert. Je suis assez bien devoir copier et coller certaines de ces lignes dans ce second fichier, qui se sent bien. Il va résoudre le problème. 

Mais si je veux une troisième page ou d'une 30 page ou une page 40e? Maintenant, je vais être copier et coller beaucoup de code en double dans plusieurs fichiers. Et donc supposer que Je décide ou je l'ai dit, hé, nous ne sommes pas en utilisant un fond vert plus. Nous allons commencer à utiliser orange. Qu'est-ce que vous avez à changer? Eh bien, vous devez changer ce style du vert à l'orange dans combien de places? Comme 30 ou 40 places. Il est fastidieux. Il est sujet à l'erreur. Il y a un certain nombre de raisons où vous ne voudriez pas induire ce genre de douleur pour vous-même. Et ça ne serait pas agréable si nous pouvions prendre ce que je viens mis entre ces deux jaunes balises, ces balises de style, facteur it out, et de mettre tout mon stylisation dans un fichier central que tous les 30 ou 40 de mes autres fichiers emprunter de ou en quelque sorte de référence, pas contrairement à la mise en réseau diagrammes que nous faisions auparavant? 

Donc, si je vais ici, je suis va effectivement proposer que nous remplaçons la balise de style avec quelque chose appelé la balise link, qui est horriblement, horriblement nommé, parce que vous n'utilisez pas le lien tag pour créer ce nous, les humains connaissons comme un lien dans une page Web. Pour cela, vous utilisez qui tag? Comment créer un lien dans une page Web? AUDIENCE: Le a. DAVID J. Malan: L'un ou l'ancre tag, qui est allé à Disney avant. La balise de lien ici dit this-- lien vers un fichier appelé styles.css, la relation à laquelle va être qu'il est mon stylesheet. Donc, c'est l'un des les S dans CSS-- feuilles de style en cascade. sheet-- deux les S en style CSS. Cascading feuille de style. Cela signifie simplement, hé, navigateur, aller trouver styles.css sur le serveur local et l'utiliser comme votre feuille de style, ce qui signifie que l'intérieur de ce fichier va être tous les stylisations que nous venons de faire. Et qu'est-ce que le fichier pourrait ressembler à ceci. Et je vais le faire est un rapide par exemple, parce que nous ne devons pour obtenir trop dans les mauvaises herbes ici. Mais si je copie ce, ce que je propose est qu'un programmeur créer un nouveau fichier, coller dans ces lines-- whoops-- coller dans ces lignes, enregistrer comme styles.css, puis, dans l'autre fichier, supprimer tout cela et de le remplacer à la place avec cette balise de lien. Alors que si je me connecte href = "styles.css", la relation doit être "stylesheet" à proximité tag. Sauvegarde le. Retour à mon helloworld. Recharger. 

Littéralement rien n'a été fait. C'est une bonne chose, parce que ce signifie qu'il est en fait tout travail. Pour prouver que beaucoup, suppose que je fais typo, et ce que j'appelle "Styles.css" avec un S majuscule, ce qui est incorrect, puis recharger. Maintenant, vous pouvez voir qu'il ne fonctionne tout simplement pas. Maintenant pourquoi? Eh bien, nous allons utiliser un technique à partir plus tôt. Laissez-moi aller de l'avant et, mon navigateur, Chrome, je suis va ouvrir cette spéciale onglet réseau comme avant, et laissez-moi recharger la page. Que faites-vous pas surpris de voir maintenant? Ou peut-être vous êtes surpris de le voir. De toute façon, ce que vous voyez maintenant? AUDIENCE: [Inaudible] DAVID J. Malan: Il est introuvable. Pourquoi est-il pas trouvé? Eh bien, le capital Styles.css-- -S- N'existe pas. Je misnamed il. typo simple. Mais je suis en train compréhensible maintenant 404, parce que le serveur dit, hey, il est introuvable. Littéralement, je ne sais pas où ce fichier est. Donc, par conséquent, le navigateur vous montre ce qu'il peut, le contenu brut de la page, qui était un 200, le code HTML, mais la stylisation ne peut pas ajouter par la suite. Et voici ce qui signifie en cascade. Vous pouvez sorte d'ajouter après, et ce genre de affine l'esthétique de la page Web. Et vous pouvez même l'emporter sur celui styles avec encore d'autres fichiers de feuille de style si tu veux. Il ne le trouve pas, cependant, dans ce cas, parce que bien sûr, je misnamed il. Je dois donc de fixer cette première. 

Donc, nous allons aller de l'avant et proposer ce qui suit. Allons de l'avant et faire cela. À partir avec peut-être votre fichier helloworld, permettez-moi simplement inviter un couple des suggestions en vedette. Donc, Victoria, vous vouliez rendre le texte plus grand, non? Très bien, alors nous pouvons ne rendre le texte plus grand. Et nous chaque arrachez juste un problème à résoudre. Rendre le texte plus grand. Je ne vais pas déranger écrit lorsque nous disposer d'une technologie de balle juste ici. Donc, certains problèmes. Nous allons donc essayer pour rendre le texte plus grand. D'accord. Que voudrait-on proposer? Que pourrions-nous vouloir à faire dans une page web? Venons-en avec un courte liste des choses puis déléguer au groupe pour comprendre cela. 

AUDIENCE: [Inaudible] 

DAVID J. Malan: OK, le texte de la position sur les différents côtés de la page? D'accord. Autre chose. 

AUDIENCE: [Inaudible] DAVID J. Malan: Il est. Ainsi, un gif est juste un format de fichier différent. Nous avons juste utilisé, ce qui, a png ou jpg probablement? Nous avons utilisé un jpg. Si vous êtes curieux, une excessive répondre à votre question est un jpg est généralement utilisé pour photographies, car il prend en charge des millions de couleurs ou couleur 24 bits. Un gif est généralement utilisé pour, comme, Internet Memes ces animations days--, gifs animés comme. Mais il arrive d'utiliser une couleur plus petite palette, seulement 256 couleurs possibles, mais il soutient la transparence et l'animation. Et puis il y a png, qui soutient transparence et plus de couleurs mais pas d'animation. Il est donc un compromis. Donc, l'ajout d'un gif, bien que, serait fonctionnellement équivalent à l'ajout d'un png ou jpg. Ouais. Source de l'image est égale. Donc, quelque chose d'autre. Venons-en à quelque chose qui nous avons envoyé à Victoria à faire ici. 

AUDIENCE: Ajouter des boutons pour une forme. DAVID J. Malan: OK. Donc, ajouter des boutons pour une forme. Et nous ferons un ensemble. Donc, ce sera un enchaînement parfait juste après ce défi. Rien d'autre? Que pourriez-vous faire? Le web se sent très décevante si cela est tout ce que nous pouvons faire. AUDIENCE: Changer la couleur du texte. DAVID J. Malan: Changer quoi? AUDIENCE: Couleur du texte. DAVID J. Malan: Change la couleur du texte. D'accord. Donc, nous allons le faire. Juste à nouveau de sorte que vous n'êtes pas, juste par cœur, de faire exactement ce que je fais, Je vais tourner sur la musique pour peut-être cinq minutes ici. Vous êtes invités à utiliser Google. Vous êtes les bienvenus pour me demander, et Je murmure un indice dans votre oreille. Vous êtes invités à regarder plus sur les épaules des autres. Mais seulement une solution de ces problèmes. Mais nous ferons le dernier, le forme un, si nous pouvions, ensemble. Donc, cinq minutes pour résoudre l'un de ces problèmes en utilisant Google, l'intuition, ou tout d'autres moyens disponibles pour vous. 

[MUSIC PLAYING] D'accord. Pas de soucis si vous voulez de garder le bricolage, mais je vais gâcher un couple de ces réponses. Donc, la première suggestion de Victoria était de rendre le texte plus gros. Donc, il y a quelques façons de le faire. Je suis actuellement restauré mon écran à cette taille, si j'ai zoomé artificiellement juste pour voir les choses. Et nous allons le faire. Laissez-moi aller de l'avant et de saisir un texte générique latine juste pour que nous avons quelque chose à travailler avec. Alors donnez-moi un instant. Je vais faire trois paragraphes. D'ACCORD. Ce sera un meilleur exemple. Donc, pour les curieux, en mon hello.html, je viens collé trois absurde paragraphes latins juste si nous avons un peu de texte pour travailler avec. Et l'objectif de Victoria était de faire partie du texte plus grand. Je pourrais donc, comme auparavant, allez ici. Et permettez-moi de le faire de la bonne façon. Je vais avoir un lien tag qui pointe vers un fichier appelé "styles.css," la relation qui est à nouveau "stylesheet". Et puis je vais sauver ce et d'ouvrir cette "styles.css." 

Donc, comme avant, je le capacité dans ce fichier CSS à réellement remplacer la valeur par défaut esthétique d'une page web, et l'esthétique par défaut, bien sûr, sont assez terne. Il est une sorte de taille de police normale, noir texte, fond blanc, et ainsi de suite. Donc, supposons que je veux faire tous ce texte plus grand. Je pourrais faire quelques choses. Dans mon fichier styles.css, je pourrait dire, vous savez quoi, appliquer la suivante le corps de ma page. Allez-y et faire le la taille de police 24 points, qui est un numéro que je puisse utiliser dans Microsoft Word. Permettez-moi de revenir à mon web page, et la recharger, et vous pouvez voir que il est déjà beaucoup plus grand. Et nous pouvons obtenir un peu fou, tout comme nous pouvons sur un desktop-- faire 96 points. Recharger. Et ça devient un peu lourde à ce stade. 

Mais je pourrais être un peu plus précis. Au lieu d'appliquer cette stylesheet au corps de ma page, quoi d'autre pourrais-je l'appliquer à la place, quelle autre étiquette qui pourrait encore fonction de la même manière? 

AUDIENCE: La balise p? DAVID J. Malan: P tag. Donc, la tête ne serait pas correct, parce que la tête, vous ne pouvez pas réellement contrôler l'esthétique. Il y a soit du texte ou non. Mais le p tag-- je peux plonger dans un peu plus profond, pour ainsi dire, au paragraphe Mots clés. Et même si il y a trois, qui est parfaitement bien, parce que dans CSS, quand je viens de dire "p", ce des moyens d'appliquer la suivante à toute étiquette qui correspond à cette sélecteur, le sélecteur juste étant le nom de la balise. Donc, chaque fois que vous voyez un "P" appliquer la taille de la police, et nous allons le rendre plus raisonnable again-- 24 points. Et tu sais quoi, pour faire bonne mesure, nous allons faire la couleur juste rouge pour le moment. Et maintenant, si je recharge, maintenant nous voir trois paragraphes laid. 

Mais maintenant, suppose que je suis une sorte de-- Je veux que le premier paragraphe pour sauter à l'utilisateur. Je ne veux pas d'augmenter simplement la taille de la police de tout. Et donc je veux vraiment identifier ou la distinction entre ces paragraphes. Donc, nous allons nous débarrasser du rouge, parce que ce juste un peu collant, et nous allons aller de l'avant et de faire la taille de la police de 12 points par défaut, de sorte que nous sommes de retour à quelque chose un peu plus raisonnable. Et maintenant, je veux juste augmenter la taille de la police du premier alinéa. Je peux le faire dans quelques manières, mais d'une façon qui est peut-être plus d'enseignement à la moment est de faire ce qui suit. Laissez-moi aller de l'avant et de dire, ce paragraphe a un ID unique de «premier». Je pourrais appeler ce que je veux. Je pourrais appeler cela "foo" ou tout autre mot, mais je vais lui donner une certaine nom sémantiquement significatif comme «premier». Ceci est l'identifiant unique, l'ID, pour mon premier paragraphe. 

Qu'est-ce que je peux maintenant faire dans mon stylesheet est d'être un peu plus précis. Au lieu de dire, appliquer ce qui suit à la balise p, Je peux dire que le following-- appliquer ce qui suit, ou sélectionnez l'élément HTML qui a un ID unique de «premier». Qu'est-ce que je veux appliquer à elle? Une taille de police de 24 points. J'ai donc deux sélecteurs maintenant. On fait tous les paragraphes 12 points. Mais celui-ci, d'autant qu'il vient second-- il vient en dernier dans le file-- ce qui a un effet en cascade. Je viens de faire tout mon Les balises de paragraphe 12 points, mais maintenant cascades et l'emporte sur que, pour tous les éléments dans la page, toute balise dans la page dont ID unique est entre guillemets "en premier." Et le hashtag dans ce contexte juste signifie «identifiant unique». Je ne mets pas dans le fichier HTML. I, ici, dis simplement je cite "en premier." 

Alors permettez-moi de recharger. Et maintenant je vois, ah, OK. Je veux dire, ce n'est pas joli, mais il est un peu de comme la préface d'un livre ou quelque chose comme ça, lorsque le premier alinéa est plus grand. Peut-être encore plus précis avec seulement les premières lettres, mais au moins J'ai exercé plus de contrôle. Maintenant maybe-- peut-être que je veux faire de temps en temps pour une raison quelconque, et donc je ne veux pas que cela appliquer à une seule balise HTML. Au contraire, nous allons say-- de laisser aussi faire ce qui suit. Class = "import". Considérant qu'un ID est utilisé pour unique identifier une chose, une étiquette, dans votre page Web, une classe est censée être utilisé sur un certain nombre d'éléments ou de balises sur votre page Web. Il est donc réutilisable. Un ID est pas réutilisable. Une classe est réutilisable. 

Et vous savez quoi, quelle qu'en soit reasons-- philosophique Je ne l'ai pas fini mon thought-- Je vais dire que le premier alinéa et le deuxième alinéa sont importants. Donc, je vais appliquer la classe appelée "Important" que, si je sauvegarde mon dossier et rechargez, n'a pas impact fonctionnel encore. Mais je l'ai ajouté quelques métadonnées dans le fichier, sorte de quelque chose de séparé à partir des données de base du fichier, de sorte que maintenant dans mon stylesheet, si je au lieu dit ".important" - vous savez, tout ce qui est important, je suis va faire la police couleur, red-- ou plutôt pas de la police de couleur, juste la couleur. Il y a des incohérences en CSS malheureusement. Et recharger. Maintenant, remarquez la première deux paragraphes sont rouges mais pas le troisième, parce que je ne appliqué la classe de "important" aux deux de ces choses d'abord. 

Donc, dans les ID, vous avez la possibilité pour spécifier très précisément. Avec des classes, vous avez réutilisabilité. Mais dans les deux cas, notez le sorte de principe de bonne conception où je refactorisée tous les esthétique à mon fichier styles.css. Donc, il n'y a pas messiness ici. Il n'y a aucune mention de rouge ou gras-face ou taille de la police dans ce dossier. Au contraire, j'ai sémantiquement, significative caractérisé mes données, voici quelques données importantes. Voici quelques données plus importantes. De plus, voici le "Première" de mes données importantes. Donc HTML est tout genre de marquage, littéralement, les mots et les paragraphes et les constructions dans votre page avec ces petits conseils, si vous volonté, que vous pouvez en quelque sorte tirer parti de l'aide d'autres techniques comme CSS de cette manière. 

Donc, en réponse à la question de Victoria, nous pouvons agrandir le texte de cette façon. Il y a tellement d'autres façons, mais la police tag-- parenthèse ouverte "font" - est en fait vieux de plusieurs années. Et cela est le problème, aussi, avec en se fondant uniquement sur resources-- en ligne ils ont tendance à être dépassée. Et en effet, ce qui a été dépréciée, parce que le monde a réalisé, ce qui ne "font-size = 7" signifie? Il ne fait pas. Et pendant de nombreuses années et ce day-- l'un des côtés note ici est qu'il est effectivement incroyablement douloureux encore parfois de développer des sites pour la web, parce que Microsoft et Google et Mozilla et d'autres sont souvent en désaccord quant à la façon d'interpréter une spécification comme le HTML. 

Il y a un livre de règles pour HTML dit généralement ce que signifie chaque balise. Mais parfois, il est laissé à la la discrétion de la mise en œuvre, la discrétion et Google de Microsoft. Et vous aurez très souvent voir sur un site quelque chose semble différent sur un PC qu'elle ne le fait sur un Mac, et c'est vraiment parce que, à la fin de la journée, ils ne testent bien sur les deux plates-formes. Mais il est aussi parce que raisonnable, les gens intelligents seront en désaccord et les entreprises seront en désaccord, et ainsi l'un des défis de la programmation pour le web ou la conception choses pour le web est l'écriture de votre site web d'une manière qui fonctionne sur tous les navigateurs Web. Mais même cela est déraisonnable, non? Il y a tellement de versions de tant navigateurs là-bas qui, à un moment donné, vous devez aussi faire un appel du jugement et vous devez décider en tant que société, en particulier pour le commerce électronique de style sites où vous êtes d'essayer d'utiliser la plus récente et technologies pour donner un très bon utilisateur de l'expérience. Mais un certain pourcentage de vos utilisateurs pourraient toujours en utilisant Internet Explorer 6 ou 7 ou 8, en particulier en fonction de la pays ils viennent. 

Et très souvent consultés est quelque chose comme "les statistiques du navigateur Web." Et si nous allons to-- nous allons voir Wikipedia et de voir comment la mise à jour ce tableau est s'il y a un. Donc, ici vous pouvez voir où les navigateurs en fait sont, selon Décembre 2015, selon le gouvernement des États-Unis. Chrome est à 42% de parts de marché, suivi par IE largement utilisé dans les entreprises ou les paramètres du PC, bien sûr, suivi par Firefox, puis Safari, puis Opera n'a pas rendre la carte ici pour une raison quelconque, et puis les autres. Peut-être qu'il est sous les autres. Mais plus problématique que celle est-- nous allons voir si Wikipedia a aussi versions des navigateurs version-- 

Allons aux statistiques du navigateur. C'EST À DIRE. Même cela ne suffit pas. statistiques du navigateur. Ma version. Cela ne va pas être juste. Voyons voir versions. la part de marché du navigateur. Voyons voir si cela arrive. D'ACCORD. Maintenant, cela devient un peu plus utile. Donc, ici, notez que nous avons tous différentes versions de navigateurs. Et, mon dieu, si vous look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Je veux dire, les navigateurs de plus en plus mis à jour, et parfois certains de ces changements sont importantes dans termes de fonctionnalité. Et à un moment donné, la chefs de produit ou les ingénieurs besoin de faire un decision-- vous savoir ce que, seulement 1% du monde est encore en utilisant IE 7. Pour l'enfer avec eux. Nous sommes tout simplement pas aller à soutenir ce navigateur. Et qu'est-ce que cela veut dire de ne pas soutenir? Cela pourrait signifier que les boutons ne fonctionnent pas sur votre page web, ou cela pourrait signifier la la mise en forme est complètement éteint. Ou vous pourriez avoir à faire ce même appel de jugement en mobiles ces jours-ci, où, nous sommes ne va pas soutenir IOS 5 plus. Alors, les gens ont juste de mettre à niveau. Ou on ne va pas à soutenir Cupcake sur OS Android pour les appareils Android, parce que le monde-- le World Tech veut aller de l'avant, il sorte de veut faire glisser le monde avec elle afin qu'ils ne soient pas doivent continuer à être rétrocompatible donc ils peut offrir de nouvelles et de bonnes caractéristiques. Ceci est en effet une des raisons pourquoi tant d'entreprises déploient les mises à jour automatiques et sorte de forçage les dernières versions des logiciels sur nous. Et même les entreprises comme Apple va trier des vous forcer ou obliger presque vous en termes de forces du marché d'acheter un nouveau téléphone, car ils ont juste ne plus mettre à jour votre ancien téléphone. Donc, vous manquez la les plus récentes et les plus grands traits, parce qu'il est coûteux pour eux comme un entreprise de maintenir plus âgé, sans doute versions inférieures du logiciel. Cependant, l'effet net est que nous souffrons aussi cela aussi. 

Donc, nous allons jeter un coup d'oeil juste quelques dernières choses ici. Faisons tomber très vite certains ces autres balles, si curieux. Donc, si vous vouliez, par exemple, la position le texte sur différents côtés de la page, je vais le faire d'une manière rapide, mais il est différent façons de le faire. Laissez-moi aller de l'avant et eliminate-- simplifier la manière suivante. Permettez-moi de revenir à mon , paragraphes simples simples. Permettez-moi de revenir à mon styles.css. Et je vais juste utiliser le simple-- que vous pourriez avoir vu sur Google ou rappeler de l'heure, à text-align droite. Et recharger cette page. Maintenant, tout semble être aligné à droite, comme vous pouvez le voir sur le rétroprojecteur ici. 

Nous pouvons le faire paraître un peu plus réservez-like, et nous pouvons dire «justifier» et recharger. Maintenant, il est beau et carré à la fois côtés, ce qui est plutôt agréable. Un autre objectif que nous avions ici était le changement de couleur du texte. Donc, nous avons vu que mon texte en rouge. Et maintenant ajouter des boutons pour un formulaire. Alors, pourquoi ne pas essayer de faire exactement cela? Mais d'abord, laissez-moi aller à un site qui la plupart d'entre nous utilisent chaque day-- Google. Et nous allons jeter un coup d'oeil comment Google fonctionne réellement. Mais je vais le faire. D'abord, laissez-moi faire in-- yep, laissez-moi aller à Google en premier. Je vais devoir aller dans Google Paramètres, parce que je veux désactiver ce qu'on appelle des résultats instantanés. 

Donc, vous avez sans doute remarqué dans Google ces days-- permettez-moi de revenir en arrière et tourner cette suite. Donc, si je commence la recherche pour "chats" comme celui-ci, remarquer que non seulement Je reçois l'auto-complétion des top, tout d'un coup, la page elle-même semble changer assez rapidement aussi bien, et c'est Google en utilisant une langue appelé JavaScript essayer d'être utile. Mais malheureusement, ce genre de mess notre discussion de ce qui se passe réellement sous le capot ici. Je suis juste un peu rapidement désactiver des résultats instantanés. Et je vais cliquer sur Enregistrer. Et maintenant, je vais ouvrir cette barre d'outils de diagnostic I garder l'ouverture sous l'onglet Réseau. Donc, nous allons le faire. Laissez moi-- whoops-- faites défiler ce un peu. Et permettez-moi de la recherche pour "chats". 

Et maintenant notice-- effectivement, cela est une bonne occasion pour discuter un moment. Remarquez le moment où je bien-- l'arrêter. Arrêtez ça. D'ACCORD. Remarquez le moment où je tape la lettre C, regarder le bas de l'écran. A- T- S. Qu'est-ce que le fond de cet écran, mon onglet Réseau, suggérer se passe chaque fois que je tape une lettre? Malheureusement, la grenouille est très aujourd'hui distraire ou le trèfle ou tout ce qu'il est. Qu'est-ce qui se passait chaque fois que je tapé? Et laissez-moi effacer le tampon et tapez-le à nouveau. whoops So--. Chaque fois que je tape une lettre, C- A- T-- donc une nouvelle ligne continue évidemment apparaître. Qu'est-ce que chacune de ces lignes représentent, sur la base de ce que nous avons vu et discuté à ce jour? AUDIENCE: Une recherche? DAVID J. Malan: Une recherche ou de manière plus générale, une requête HTTP de mon navigateur au serveur. Eh bien, pourquoi est mon navigateur fait un HTTP demander à chaque fois que je tape une lettre? 

AUDIENCE: [Inaudible] DAVID J. Malan: Ouais, ça donne moi ces résultats de l'auto-complétion. Comme, où faire ces résultats de la recherche viennent? Eh bien, chaque fois que je tape un lettre, Google envoie plus et de plus en plus le mot que je tape. Pourquoi? Parce qu'ils veulent me donner un mieux en mieux, meilleure suggestion, une liste de suggestions, pour ce mot Je suis en train de réellement complète. Donc, c'est-à-dire littéralement chaque caractère que vous tapez dans Google est envoyé, en fin de compte en vrac, mais aussi parfois un à la fois pour mettre en œuvre ces caractéristiques de l'auto-complétion lorsque les données sont, bien entendu, sur le web. 

Maintenant, nous allons jeter un coup d'oeil à ce qui est réellement qui se passe lorsque je clique sur Google Search. Et puis nous exploitons nous-mêmes. Donc, si je fais défiler vers le bas maintenant à la très première demande qui vient de se passer. Notez ce qui suit. Il a été envoyé à une assez longue URL-- https://www.google.com/search? puis tout un tas de choses. Voyons voir ce fait maintenant dans l'onglet du navigateur lui-même. Mettons-nous débarrasser de la barre d'outils ici. Voici la page de résultats de recherche. Et remarquez, voici l'URL. Maintenant, vous pouvez probablement le deviner ce qui se passe ici en partie. Alors tout d'abord, une définition. Ceci est apparemment la destination où le formulaire est soumis. Alors, quand je tapé dans le mots «chats» et appuyez sur Entrée, apparemment envoyé par Google mon texte d'entrée à cette URL que je l'ai souligné là, slash recherche. Tours dehors, dans une URL, tout ce qui arrive après un point d'interrogation est, comme nous le disons, une paire clé-valeur qui a été tapé dans la forme ou en quelque sorte transmis à partir du navigateur au serveur. 

Donc, chaque fois que vous tapez entrée dans un formulaire sur le web et il est envoyé comme nous l'avons été discuter, via un get, l'un d'eux virtuel enveloppes, le contenu de ce envelope-- oui, gardez s'empaillé physiquement dans l'enveloppe en classe De nos jours, mais sur le plan technologique il est effectivement mis dans l'URL. Donc, en fait, permettez-moi de passer en revue ce. Où voyez-vous l'entrée d'utilisateur? Où voyez-vous quelque chose que je me suis tapé ici? Ouais, donc "chats". Droite? Alors laissez-moi distiller cette en quelque chose de plus simple. Je vais supprimer tout ce qui concerne cette URL que je ne comprends pas, et je vais juste laisser comme this-- / search? q = chats. Nous verrons où q provient en un instant, mais qui se sent comme le minimum quantité d'informations que je fournis. Et maintenant, je vais appuyez sur Entrée. Et remarquez qu'il fonctionne encore. Nous obtenons toujours revenir tout un tas de chats. Donc, Google est colombophile que ce ces jours-ci. Il est 2016, pas 1999. Donc, il y a d'autres choses que mon navigateur envoie au serveur. Mais cela est peu tout ce qui est nécessaire. 

Alors que se passe-t-il? Eh bien, d'abord laissez-moi aller de l'avant et aller retour à Cloud9 et laissez-moi aller de l'avant et fermer mes onglets plus tôt. Et je vais le faire sur mon posséder juste pour un moment. Je vais aller de l'avant et créer un nouveau fichier. Et je vais l'enregistrer comme google.html. Et je vais très quickly-- Je vais voler, en fait, une partie de ce texte juste pour gagner du temps. Je vais coller ce ici. Je ne vais pas vous embêter avec toute stylisation cette fois. Nous allons appeler cette «Mon Google." Et je vais vous débarrasser de tout dans le corps. Et je vais faire ce qui suit. Permettez-moi un zoom avant. La Forme action-- et comme je l'ai brièvement mentionné comme je l'heure, à whoops-- brièvement mentionné plus haut, l'action d'un formulaire où vous envoyez les données. Alors google.com/search. Et la méthode que je veux utiliser peut être l'une des deux choses. Il peut être soit «get», comme nous gardons discute, ou il peut être «post». Pour l'instant, la fondamentale la différence est, si vous utilisez "get" l'ensemble des informations que l' l'utilisateur fournit est envoyé dans l'URL. 

Ce qui est grand pour des choses comme la recherche moteurs et quelques autres applications, mais dans quelles circonstances vous voulez pas remplir un formulaire et ont l'information finir par la URL, comme dans la barre d'adresse de votre navigateur? Quel genre de formes vous-- faire AUDIENCE: [Inaudible] DAVID J. Malan: Oui, comme quoi? AUDIENCE: les mots de passe. DAVID J. Malan: Ouais, donc vous vous connectez à Facebook ou un site Web. C'est l'entrée d'utilisateur à partir une forme, une zone de texte, mais vous ne voulez probablement pas montrant dans l'URL du navigateur. Pourquoi? Je veux dire, peut-être il y a quelques implications de sécurité sur le réseau, mais plus-- aime, plus simplement, si votre colocataire, votre autre significatif, vos enfants, votre conjoint regarde à travers l'histoire de votre navigateur? Il est de votre droit de mot de passe là dans l'histoire de votre navigateur. Cela ne se sent pas comme une bonne conception. Ou encore plus techniquement, supposons que vous essayez de télécharger une photo sur Flickr ou Facebook ou wherever-- qui est saisie de l'utilisateur, même si il est un peu plus interesting-- comment dois-je bourre une image dans la barre d'URL? Vous ne pouvez pas sorte de quelque sorte. Vous sorte de possible. Mais, vraiment, je suis dur pressé d'imaginer faire cela. Il me faut donc une autre méthode pour télécharger des photos vers un site web, et cette autre méthode est appelée "post". Mais pour l'instant, nous allons parler de "Get", qui est le plus simple des deux. Il met juste toute la une entrée d'utilisateur dans l'URL. 

Alors, voici la forme que je crée. Je veux une entrée. Et tu sais quoi? Je vais faire une supposition ici. Je vais rappeler mon entrée "q" pour "requête." Et je pense que cela est l'un des dessins originaux, peut-être, de 1999. Et puis le type de cette entrée va tout simplement être «texte». Et puis je vais avoir une autre entrée qui n'a pas besoin d'un nom, comme nous allons bientôt voir, dont le type est «soumettre». Et cela va donnez-moi un bouton spécial. Et c'est tout. 

Alors laissez-moi aller de l'avant et enregistrer ce fichier. Je vais revenir à ma navigateur et allez à google.html. Entrer. Et il est un peu clairsemée Pour dire le moins. Mais laissez-moi aller de l'avant et la recherche de "chats". Et notez que je suis actuellement à cette adresse URL Cloud9. Mais au moment où je clique cela, où espérez-vous que je vais finir? 

AUDIENCE: Google. 

DAVID J. Malan: Google. Donc, nous allons cliquez sur Soumettre. Et en effet, je l'ai re-implémenté Google. Droite? Il est plus simple. Il est plus léger. Je veux dire, mon code est nettement meilleure que leur, du désordre, nous avons vu plus tôt. Et tu sais quoi? Je vais pimenter ce un peu. Je ne mentionnais plus tôt. Il y a des balises comme H1, pour la rubrique 1, le titre le plus important dans une page. "Mon Google," Je vais appeler cela. Permettez-moi de recharger. Il est à la recherche un peu mieux déjà. Et, en fait, vous savez quoi? J'ai already-- je mentais. Je dis que je ne voulais pas le style de cela, mais je vais coiffer ce comme avant. Et mon corps va être, disons, centre text-align. Il est à la recherche plus comme Google déjà. 

Je besoin d'un saut de ligne, cependant, pour ce bouton Soumettre. Et il se trouve, vous peuvent utiliser des paragraphes, ou vous pouvez plus littéralement juste dire, me donner un saut de ligne ici-- la balise br. Et si je recharge cela, maintenant il y va. Il est un peu moche, donc je pourrait faire plusieurs sauts de ligne, mais ne nous laissons pas trop gourmand ici. Alors maintenant, nous allons voir si cela fonctionne pour "chiens." Il semble fonctionner pour «chiens», aussi bien. Alors, quelle est la livraison convaincante ici? One-- n'a pas été un énorme bond à introduire un peu plus de tags, comme la balise form dans la balise d'entrée. Mais plus fondamentalement est, tout ce que nous faisons met à profit notre compréhension du protocole HTTP et le fait qui forme finalement modifient ce qui est dans l'URL du navigateur, et donc, par conséquent, nous pouvons fournir mécaniquement entrée à un serveur en faisant un formulaire HTML et sachant que le serveur comprend HTTP, tout comme notre corps comprend, comme, me serrant la main, ce même protocole, et ainsi nous serons de retour la réponse que nous attendons en fin de compte. 

Donc, nous allons essayer de faire un dernière chose maintenant avec mobile, et je vais make-- je vais ajouter ce code pour les diapositives. Donc, si vous souhaitez bricoler, vous peut certainement à partir de là. Mais je vais aller avant et faire une chose. Je vais aller de l'avant et ouvrir mon index page-- ma page bonjour comme avant, qui a beaucoup de ce texte faux-latine, ou le texte de sens latin, et has-- il ressemble à ceci à cette taille de la police. Mais laissez-moi aller de l'avant et de faire cela. Je vais aller dans Cloud9. Et vous ne devez pas faire cette étape. Je vais le faire moi-même. Je vais cliquez sur Partager. Et ceci est une caractéristique juste de Cloud9, de sorte que Je peux faire mon environnement public. 

Et juste pour le plaisir de démonstration, laissez-moi faire. Je vais faire ma demande publique. Notez qu'il est me prévenir, je suis Je sûr que je veux faire, parce que cela va rendre tout le monde dans le monde, que ce soit ici maintenant ou regarder la vidéo plus tard sur la Internet capable de voir ce que je vois. Mais ça va. Je vais dire "Terminé." Et laissez-moi vous encourage, si je faisais ce correctly-- permettez-moi de le tester en premier. Allez-y, si vous ne mind-- pas dans un navigateur sur votre ordinateur, aller à cette URL, et nous espérons vous verrez mon texte latin. Et pour être clair, il est fonctionnant pas sur mon ordinateur portable. Il est dans le nuage. Il est sur Cloud9, littéralement, mais J'ai fait mon espace de travail publique de sorte que toute personne sur Internet peut accéder à ma page d'accueil latine. 

Aller à la même URL sur votre téléphone, si vous le pouviez. S'il vous en coûtera, cependant, vous peut simplement regarder par-dessus l'épaule. AUDIENCE: [Inaudible] DAVID J. Malan: Je suis désolé? AUDIENCE: [Inaudible] DAVID J. Malan: Juste des mots latins. C'est tout. Mais c'est ce que vous devriez voir. 

AUDIENCE: Ouais. DAVID J. Malan: Oui. Ouais. D'ACCORD. Donc, je peux tenir votre téléphone pour un instant? Alors, espérons-le, si vous accédez , il devrait ressembler presque illisible. Il est still-- Je veux dire, il est illisible en raison du latin. Mais il est aussi illisible pour quelle autre raison? Comme, ce que vous déplaît à ce sujet? AUDIENCE: Il est petit. DAVID J. Malan: Il est super, super petit. Alors, comment pouvons-nous résoudre ce problème? Il est super, super petit sur le téléphone de Victoria et, si vous avez tiré il vous-même, probablement petit sur votre téléphone, ainsi, à moins que vous ont des paramètres d'accessibilité activés. Qu'est-ce que c'est? Vous pouvez tout simplement pincer et zoom, ce qui est réalisable, mais alors vous ne voyez que quelques mots à la fois. Donc, attendez une minute. Je sais comment résoudre ce problème. Droite? Je pourrais utiliser les CSS, et je pouvais changer le taille de la police de 12 points à 24 points. Mais l'effet secondaire de cela, bien sûr, va être maintenant, sur un bureau ou un ordinateur portable, maintenant le texte est deux fois plus grand. Et il en serait de nature agréable de faire la distinction entre les appareils, et il se trouve là-bas sont des moyens de le faire. Il y a plusieurs de différentes manières, en fait, de sorte que l'utilisation de CSS et de caractéristiques fantaisistes que nous ne rentrerons pas dans en détail, vous pouvez essentiellement interroger le navigateur et dire, si votre écran est plus petit que celui-ci de nombreux pixels, utilisent cette taille de la police. Si votre écran est plus grand que celui-ci de nombreux pixels, utilisent cette autre taille de la police. 

Vous pouvez être encore plus fantaisistes encore. Si vous avez déjà visité un page web qui, sur un bureau, a un grand menu de peut-être hors de la côté, puis tout le contenu est à côté de celui menu-- qui est une sorte de paradigme commun. Menu à gauche, le contenu à droite, ou vice versa. Ne fonctionne pas vraiment sur mobile lorsque votre l'écran est seulement ce nombre de pixels de large. Donc, plus commune sur mobile est, votre menu va soudainement se effondré, et vous devez cliquez sur un bouton pour voir, ou le site Web mettra le menu ci-dessus et mettre le contenu en dessous. Et vous pouvez mettre en œuvre ces les choses de plusieurs façons, aussi. Vous pouvez demander à vos programmeurs, hey, équipe, tout le temps vous voyez une requête HTTP à partir d'un Android appareil, un dispositif Microsoft, un Google appareil, un appareil Apple, utilisez cette taille de la police et utiliser ce menu mise en page, ou bien utiliser cette valeur par défaut plus grande mise en page. 

Maintenant, en utilisant ce que technique fondamentale aujourd'hui les ingénieurs pourraient utiliser de savoir si elle est un iPhone, un téléphone Android, un ordinateur portable, un ordinateur de bureau visitant le serveur de l'entreprise? En quoi font-ils cette information? 

AUDIENCE: en-tête? 

DAVID J. Malan: Oui, l'en-tête HTTP. Ainsi, chaque requête HTTP provenant de leurs clients à leurs serveurs inclure, à l'intérieur virtuel que enveloppe, tout un tas des en-têtes HTTP, dont l'un est le navigateur et le système d'exploitation même, si vous tenez à ce niveau de détail. Maintenant, il est une chaîne cryptique prospectifs, mais il existe un logiciel qui sera juste simplifier, et vous pouvez simplement demander dans la programmation code-- PHP, Java, C ++, whatever-- ce téléphone est this-- ce dispositif est cet utilisateur en utilisant? Et alors vous pouvez dire, leur montrer ce version du site si elle est un téléphone. Montrez-leur cette version de la site Web si elle est un ordinateur portable ou de bureau. Mais vous ne même pas besoin complexité côté serveur. Vous pouvez le faire même le plus simple des choses. 

Je vais le faire. Je vais aller de l'avant dans mon environnement Cloud9, et je vais ajouter un tag que vous avez vu dans Google avant. On l'appelle le metatag. Et je ne me souviens jamais celui-ci, de sorte Je vais transcrire ici. Meta name = "viewport", puis content = "width = largeur de l'appareil, intital échelle = 1 "et voilà. 

Ainsi, il pourrait aussi bien être comme une incantation magique. Il est pas tout à fait clair, mais cela a quelque chose à voir avec la fenêtre, et la fenêtre se trouve le corps d'un page web, la région rectangulaire définit la plupart de la page. Et cela est tout simplement dit le navigateur, vous savez quoi? Faire la largeur de cette page effectivement égale à la largeur de l'appareil. En d'autres termes, ne supposez pas que vous avez sorte d'espace illimité. Supposons que vous avez seulement autant l'espace que l'appareil lui-même est grand. Et maintenant, si je recharge cette dans mon navigateur, je ne vois aucun changement. Mais si je l'ai fait et correctly-- laissez-moi passer mon fingers-- si vous tous recharger vos téléphones, avez-vous voir un changement convaincant? Ouais, est that-- 

AUDIENCE: [Inaudible] DAVID J. Malan: Oui. D'ACCORD. Donc, sans doute plus lisible maintenant? Encore petite, pour être juste, mais pas si minuscule à être ingérable. Et je pourrais certainement remplacer cette en outre avec CSS ou sur le côté du serveur, mais de plus en plus ce que vous êtes voir est de plus en plus de fonctionnalités être ajouté à environments-- côté client JavaScript, comme nous le verrons demain, CSS et HTML-- donc que toutes ces questions peut être fait sur le client de manière à déranger le serveur beaucoup moins et non d'avoir à suivre, pour par exemple, l'assaut constant du nouveau système d'exploitation versions, de nouvelles versions du navigateur. Vous pouvez simplement laisser le navigateur demander à l'appareil, comment grand vous êtes, et ensuite faire un peu logique décisions sur cette base. Mais nous verrons plus de possibilités pour des décisions logiques demain dans le contexte d'un langage de programmation. 

Ainsi, des questions, puis, sur le développement web? Aujourd'hui est pas la programmation web, par soi, puisque la plupart tout ce que nous avons fait était très esthétique, si vous voulez. Il n'y a pas de décision dans le code que nous avons écrit, et voilà pourquoi HTML est un balisage langue, pas un langage de programmation. Mais demain, nous allons prendre un coup d'œil, en fin de compte, au JavaScript, qui est une programmation effective langue qui nous permet de faire un peu plus. 

Des questions? Eh bien, permettez-moi de proposer deux opportunités en option pour les devoirs. Un est-- ces Cloud9 comptes ne seront pas expirer. Vous êtes invités à utiliser qu'ils bricolent avec. Il est le niveau de service gratuit. Sachez que, si lors de la création votre espace de travail, vous a rendue publique, cela ne signifie pas que toute personne sur Internet peut voir ce que vous tapez. Alors peut-être considérer seulement pas vous embarrasser si vous mettez votre première web la page là publiquement accidentellement, mais personne ne va savoir pour y chercher de toute façon. 

Et two-- me jette cette URL aussi bien, surtout si vous êtes venu aujourd'hui peu moins confortable que d'autres, pas sûr ce que signifie tout ce genre de choses. Sachez que beaucoup plus de cette vidéo, qui est à la fois un bon moyen de se endormir et aussi de rire tout en Ce faisant, a également beaucoup de sociétalement intéressant et des discussions de sécurité pertinentes celui-ci de John Oliver, mais un comédien. 

Mais s'il n'y a pas d'autres questions, cela nous amène à la réception. Alors pourquoi je tourne pas sur la musique. Il devrait y avoir des boissons et des collations à l'extérieur. Je suis heureux de se mêler aussi Tant que les gens aimeraient, répondre à des questions plus en tête-à-un. Mais, sinon, vous êtes les bienvenus à décoller à tout moment, et nous vous reverrons demain matin pour un peu plus. Très bien, merci.