>> [Lecture de musique]
DAVID J Malan: Très bien, bienvenue.
Ceci est CS50.
Ceci constitue la fin de la septième semaine.
Et il est la fin de ce trésor chasse de problème mis en quatre
que vous pouvez vous rappeler.
Après avoir récupéré tous les fichiers JPEG du personnel,
vous ont été contestées, si vous le souhaitez, pour vous photographier avec le plus grand nombre
de ces gens que vous le pouvez.
Nous avons eu tout un tas de demandes au cours des dernières semaines,
en effet, tout à fait un peu juste avant midi aujourd'hui, dont certains sont ceux qui sont ici,
pris ici in-- semble like-- Annenberg Salle à des heures de bureau, un ici
dans Lowell House avec Nick.
Voici Ramon être pris sur le téléphone.
Ce fut lors d'un déjeuner de CS50.
Ce fut Jason Skyping avec un camarade de classe de plus de créativité,
qui lui a téléphoné de cette façon.
Nous ne savons pas ce que cela était.
>> [Rires]
>> DAVID J Malan: Mais ça vaut un gigaoctet.
Voici Chang, qui littéralement couru hors de la scène
pour éviter d'être photographié une jour, mais a finalement été pris.
Voici Nick.
Et voici Alison par les champs.
Et Zamyla même été trouvé lors d'une compétition de salle de bal.
Nous allons donc passer par ces photos, comprendre
qui a présenté le plus plus tôt, et récompense
un prix fabuleux, comme promis dans la spécification.
Et nous allons également faire un suivi sur l'espace qui a été impliqué.
>> Un couple de announcements-- donc déjeuner est, de nouveau, ce vendredi à 13h15.
Si vous souhaitez nous rejoindre, RSVP à cette URL ici.
Jason réapparaît ici d'un des sections deux ans
arrière, ce qui est arrivé de tomber sur Halloween.
Et en effet, il habillé comme un citrouille cette année-là.
Si vous regardez cette section de sa section de 2011
huit, si vous êtes curieux, à CS50.tv, je pense
ce fut l'année où sa pompe à air travaillait.
>> Si vous regardez alors la section similaire en 2012,
vous verrez ce Jason beaucoup dégonflé, depuis le procès ne fonctionnait plus,
qui est seulement à dire ce vendredi, si vous souhaitez
tiens à sculpter une citrouille avec Daven et Gabe et autres, RSVP pour les chefs
à l'adresse cs50.harvard.edu.
Il promet d'être très amusant.
Daven, on nous dit, est taillé citrouilles toute sa vie.
Gabriel du Brésil n'a jamais sculpté une citrouille pour Halloween.
Donc, être là avec eux qu'il apprend.
>> Séminaires, meanwhile-- de sorte que vous apprendrez bientôt
ce que nos attentes sont pour le projet final, qui essentiellement
se résument à la conception et la mise en œuvre
plus tout projet d'intérêt à vous, bien que soumis à l'approbation
et les conseils de votre collègue de l'enseignement.
Vers la fin de la semestre, nous introduisons un certain nombre
de séminaires, qui sont des cours facultatifs dirigée par les boursiers de l'enseignement et de Harvard
personnel, les amis du cours à travers campus, sur divers sujets qui
sont tangents à la programme sous-jacent de cours
mais néanmoins applicable, amusant, et différent pour les projets finaux potentiels.
>> Par exemple, d'abord, si vous le souhaitez à enregistrer, à la tête de cette URL là.
Et cela est la gamme de les séminaires de cette année.
Mais rendons compte que nous avons des dizaines de séminaires des années passées, qui tous
sont liés dans le menu Séminaires l'option du site Web de cours.
Donc, si vous songez à aller au-delà de votre zone de confort
ou ramasser quelques nouvelles compétences, par exemple, la programmation iPhone
applications avec Swift, une nouvelle langue d'Apple ou Objective-C
ou Android apps ou programmation [? cue?] ampoules, ou l'un des sujets
ici et plus, en raison chèque sur la page d'inscription.
>> Nous avons donc commencé et conclu sur Lundi, avec la recherche à HTTP.
Donc HTTP refresher-- rapide, HyperText Transfer Protocol.
Mais qu'est-ce que cela signifie réellement?
Qu'est-ce que cela signifie vraiment?
Est-ce un coup de main?
Je sais que vous êtes juste gratter la tête.
Mais vous voulez proposer ce qui est HTTP?
>> Public: Comment les ordinateurs communiquer avec [inaudible].
DAVID J Malan: je raté la dernière partie.
Comment les ordinateurs communiquent with--
>> serveurs Internet: de l'auditoire.
DAVID J Malan: Good-- avec internet serveurs, et en particulier, les serveurs Web.
Parce rappel, il ya un tas de services sur Internet, dont certaines
vous utilisez probablement tous les jours entre le chat et le message, chat, web et e-mail,
et analogues.
Et HTTP est que le protocole que les navigateurs Web
parler pour communiquer avec les serveurs Web, et vice versa.
Et l'analogue de la monde humain pourrait être,
Je tends la main pour secouer certains autre humain de et il ou elle
reconnaît en étendant sa main ainsi.
Voilà donc tout un protocole, un ensemble de conventions.
>> Et ce sont en effet ces conventions?
Eh bien, cela se résume juste en bas à l'envoi de messages d'avant en arrière,
comme nous l'avons représenté ici.
Et il ya deux façons de qui vous pouvez envoyer ces messages.
Et peut-être le plus commun est connu comme get.
Et nous allons voir un contraste à cette avant longtemps.
>> Mais une requête GET à partir d'un navigateur au serveur semble juste comme ça.
Il ya un tas de texte qu'il met à l'intérieur d'une enveloppe virtuelle.
A l'extérieur de cette enveloppe aller quelques morceaux de détails.
Que faut aller sur le enveloppe, pour ainsi dire,
afin d'obtenir une telle demande ce de moi pour un serveur web?
Ouais.
>> Public: Votre adresse IP.
>> DAVID J Malan: Mon adresse IP dans le domaine de, pour ainsi dire,
et bien entendu, la l'adresse IP du destinataire.
Mais dans le cas d'un paquet de bande, nous avons besoin d'un peu plus de détails
Il ne suffit pas seulement de envoyer une enveloppe à un serveur,
parce que le serveur peut être l'écoute de différents types
du trafic Internet.
Alors quoi d'autre avons-nous besoin d'ailleurs IP du destinataire?
Ouais?
>> Public: Est-ce des BCI?
DAVID J Malan: Bon.
TCP--
>> PUBLIC: Adresse.
>> DAVID J Malan: Adresse, ou le port, comme on l'appelle.
Close, mais un numéro de port TCP.
Et il ya un tas de ces.
Mais sûrement le plus familier devrait finalement
soit 80, qui est la valeur par défaut celui utilisé pour le trafic Web.
Et un autre familier une aura bientôt 443,
qui est utilisé pour Web sécurisé trafic, les URL qui commencent par https.
>> Voilà donc ce que va à l'intérieur de cette enveloppe.
Et obtenir / juste moyens, donner moi la page Web par défaut.
Donnez-moi la racine du disque conduire sur ce serveur Web.
Et nous espérons que, sur le web serveur répondra avec, OK
et le nombre 200, qui est juste une convention dire, oui, tout
est en effet OK.
Voici la page.
Le type de la page Web va être du texte, mais plus spécifiquement, HTML,
qui nous sommes sur le point de se replonger dans.
Et le point de dot dot juste moyens, voici le code HTML.
Et voilà où nous en ramasser l'histoire aujourd'hui,
fait écrire du HTML, HyperText Markup Language, qui
est la langue dans laquelle pages web sont écrites.
Il est pas un langage de programmation.
Il n'y a pas les fonctions ou des boucles ou des conditions.
Il est un langage de balisage, ainsi voir encore aujourd'hui,
qui vous permet de spécifier la façon de structurer et de styliser
esthétiquement une page Web.
>> Donc, ce fut une et que nous avons vraiment la page
regardé, si brièvement, lundi.
Et remarquez que quelques-uns principales caractéristiques.
Il ya beaucoup de l'open angle support et équerre près.
Entre ceux angle parenthèses sont des mots.
Et nous allons commencer appelant ces mots tags.
Tête de support de façon ouverte et la tête de support fermé
sont les balises d'ouverture et de fermeture, ou les balises de début et de fin
respectivement, d'un élément HTML, comme nous l'appelons, appelé tête.
Et le même jargon applique à corps en HTML et ainsi de suite.
>> Et ce qui est bien est HTML-- et en effet, nous allons
passer terriblement peu de temps sur elle, parce que vous aurez la plupart du temps juste à déterminer
quelles sont les caractéristiques qu'il possède lorsque vous avoir réellement un problème concret
à solve-- vous verrez que un navigateur est assez stupide.
Il va juste do-- pas la différence un computer-- ce que vous lui demandez de faire.
Et donc quand vous avez ouvert support HTML au sommet
y, qui essentiellement juste moyen, bon, navigateur,
voici une page Web écrite en HTML.
>> Quand il voit parenthèse ouverte tête, ce qui signifie tout simplement,
hey, navigateur, voici la tête, ou la partie supérieure de ma page web.
Quand il voit un support fermé tête, cela signifie juste, bon,
ça y est pour la tête.
Veille pour autre chose.
Et que quelque chose est apparemment va être le corps.
Et quand vous ne disposez pas d'une étiquette, comme vous avez juste bonjour, virgule, monde,
qui va juste être du texte brut qui en fin de compte est affiché à l'écran.
>> Maintenant, vous remarquerez aussi l'indentation ici.
Vous pouvez probablement déduire comment nous stylisant.
Chaque fois que je ouvre une balise, pour ainsi dire, je le retrait.
Et chaque fois que je ferme une étiquette, je ONU-tiret,
dans le même esprit à accolades.
Et au-delà de cela, je suis un peu de l'utilisation de mon jugement.
Notez que je ne l'ai pas pris la peine de frapper Entrez à l'intérieur de cette balise de titre.
Pourquoi?
Eh bien, je décidai qu'il avait l'air un peu plus propre à moi, l'être humain,
juste pas la peine de le faire.
Encore une fois, il ya une certaine jugement appelle simplement
comme il est dans C ou toute autre langue.
>> Mais notez aussi que cette voûte se prête à un modèle mental,
de ne pas trop compliquer.
Mais un arbre, non?
Si vous pensez à un web Cette page, apparemment écrite
comme ça, comme étant bien en retrait de cette façon,
vous pouvez presque penser à la parenthèse ouverte HTML support fermé balise délimitant
la racine d'un nœud, d'un arbre généalogique nœud de style dans le style des arbres
nous avons examiné vendredi dernier.
>> Et en effet, nous avons le droit ici ce que nous appellerons DOM, D-O-M, un document
modèle objet, une façon élégante de dire un arbre qui représente le HTML.
Et remarquez que HTML a, on va dire, comme un arbre de la famille, deux enfants.
Sur la gauche est la tête.
Sur la droite est corps.
>> Et juste comme un exercice de pensée stupide, tête, bien sûr, a le nombre d'enfants
selon cette structure?
Donc, un seul, title-- et voilà pourquoi nous avons
la flèche partant de la tête vers le titre.
Il est donc comme si cette personne dans le arbre généalogique avait qu'un seul progéniture.
Et puis le titre lui-même peut dire d'avoir un enfant trop.
>> Rappelons que le HTML a bonjour, virgule, monde dessous.
Et je l'ai simplement dessiné dans un ovale au lieu d'un rectangle suffit
à transmettre sémantiquement que même si il est un nœud de l'arbre, pour ainsi dire,
il est une sorte de fondamentalement différent.
Il est pas une étiquette.
Ou plus correctement, il est pas un élément.
Il est juste un noeud de texte, si vous voulez.
Mais ceux-ci sont complètement conventions sur les droits arbitraires.
Ceci est tout à l'heure ma façon de représentant ce que je vais comme un agrégat
appeler le document.
>> Et en passant, la chose à le coin super top de la main gauche,
parenthèse ouverte point d'exclamation doc Type HTML, cela ressemble à une étiquette,
mais il est le cas de coin stupide où qui est juste là, copié et collé
à indiquer les navigateurs cette est une version HTML 5.
Le monde ne cesse de changer ce que le première ligne de code dans une page devrait être.
Cela signifie simplement que la version 5.
Donc, il ne fait pas assez ressembler aux autres.
>> Très bien, alors avec qui dit, vous allez maintenant apprécier
ce assez stupide cette tatouage quelqu'un a eu.
>> [Rires]
>> DAVID J Malan: Très bien, et maintenant de laisser réellement plongée
à faire quelque chose avec cela.
Vous vous souviendrez que la dernière fois Je ouvert la Appliance CS50
et je faisais quelque chose comme simple que l'ouverture de gedit.
Et je sauvé le fichier, même sur mon desktop-- nulle part special--
comme hello.html.
>> Alors laissez-moi faire ce que again-- hello.html Entrée.
Et maintenant, dans ce dossier, je vais aller de l'avant et de reproduire ce que nous venons
saw-- Type doc html Alors je vais faire ouverte html de support support fermé.
Et puis je vais préventivement ouvrir et fermer la balise.
Pourquoi?
Juste pour que je ne l'oublie pas plus tard.
Il est une bonne pratique, comme ouverture une paire d'accolades à la fois.
>> Et puis ce qui est venu ensuite?
Vous pouvez penser que le tatouage.
>> PUBLIC: La tête.
>> DAVID J Malan: La tête.
Et puis ici, je eu le titre, je pense.
Et le titre était arbitrairement, bonjour, titre proche du monde.
Et puis ici, le corps, de course-- puis nous fermons la balise body.
Et puis juste un peu redondante, Je eu la même chose ici.
>> Donc, je prétends que ceci est une page web.
Ceci est quelque chose que pourraient maintenant vivre sur le web,
même si bien sûr, il est littéralement vivre sur mon bureau en ce moment.
Mais en fait, si je minimise gedit, Je vois sur mon bureau l'icône.
Même si cela est l'appareil, vous pouvez le faire sur Mac OS
sans TextEdit ou Bloc-notes de Windows avec même.
>> Et si je vais de l'avant et double-cliquez que même, et sélectionner-- bien, nous allons
Ne sélectionnez pas parce que Chrome est de ne pas ouvrir.
Allons de l'avant et ouvrir Chrome.
Et puis faire Commande + O pour ouvrir Et de naviguer sur mon bureau
et ouvrir ce fichier.
Voilà comment un navigateur interprète HTML, de haut en bas, de gauche à droite.
Hey, voici navigateur HTML.
Voici la tête.
Voici le titre.
Voici le corps.
Et en effet, voici comment elle rend cette page Web.
>> Mais notez l'URL.
Aucun d'entre vous pourrait tirer vers le haut ce spécifique page sur vos ordinateurs portables à l'heure actuelle,
même à l'intérieur de votre appareil via cette URL,
parce que file: // indique qu'il est en fait sur mon système de fichiers, mon disque dur,
pas le vôtre.
Donc, ce ne sont pas d'une grande utilité.
>> Passons maintenant vers l'utilisation d'un serveur Web réelle.
Et il se trouve le CS50 Appliance est plus que juste un environnement où
vous pouvez écrire du code C et compiler et exécutez-le comme vous l'avez fait.
Il a également été configuré par le personnel pour représenter une web typique
le serveur qui se trouve sur l'Internet, celui que vous pourriez payer pour
ou celui qui est dans le nuage soi-disant.
>> Et elle est en marche open source gratuit standard
logiciel, par exemple, quelque chose appelé Apache, qui est peut-être
encore le web le plus populaire un logiciel de serveur dans le monde
que des milliers de sites Web utilisent aujourd'hui.
Et il a aussi même logiciel comme MySQL,
qui est un serveur de base de données que nous finirons par arriver à,
qui est seulement à dire Je peux commencer à traiter
mon appareil comme un serveur à part entière que je ne vais pas payer pour ailleurs.
Il vit juste sur mon propre ordinateur portable pour des fins de développement et de commodité.
>> Donc, nous allons aller de l'avant et profiter de cette.
Je vais aller de l'avant et ouvrir une fenêtre de terminal.
Et je vais aller de l'avant et move-- fait, d'abord je suis
aller à naviguer sur mon bureau.
Si je fais ls, il ya hello.html.
Et je vais aller de l'avant et commencer à utiliser
un nouveau répertoire que nous avons pas utilisé avant aujourd'hui.
>> hello.html-- je vais passer à ../vhosts pour hosts-- virtuel
plus de détails dans le future-- puis dans un répertoire appelé localhost,
qui est le surnom donné à presque un ordinateur, que ce soit un Mac, PC,
ou un ordinateur Linux, puis spécifiquement dans un répertoire que nous,
le personnel déjà créé pour vous lorsque vous avez téléchargé l'appareil appelé
public.
Et comme son nom l'indique, rien Je mets dans ce dossier, en théorie,
va être maintenant publique, au moins pour les personnes
qui ont un effet direct Connexion à mon ordinateur.
>> Alors maintenant, laissez-moi aller de l'avant et faire cd à ce même répertoire
afin que je puisse voir ce qui est passe et tapez ls.
Et, en effet, que est le seule chose là-dedans.
Je prétends que maintenant parce que je l'ai mis cette déposer hello.html l'intérieur d'un répertoire
appelé à l'intérieur du public d'un répertoire appelé localhost à l'intérieur d'un répertoire
appelés serveurs virtuels, qui merci au personnel CS50
a été pré-configuré pour être la racine de votre serveur web,
Je peux maintenant nous espérons le faire.
>> Je vais ouvrir un nouvel onglet.
Et je vais pas à déposer: //.
Je vais utiliser réelle http / localhost, qui
encore une fois, est le surnom pour mon propre serveur.
Et puis je vais aller à ce le nom du fichier, juste pour être clair?
Où est cette histoire va probablement?
hello.html.
>> En d'autres termes, je veux maintenant cette est mon propre ordinateur, mon propre appareil,
comme si il est un serveur réel.
Son surnom est localhost.
Mais penser que localhost comme Facebook.com google.com, peu importe.
Il est juste mon nom local.
Et puis la finale, je veux est dans le racine du disque dur, pour ainsi dire,
ou la racine du serveur web, ergo la barre oblique, puis
le nom du fichier hello.html.
>> Permettez-moi de faire un zoom arrière et appuyez sur Entrée.
Et en effet, il est maintenant ma page web.
Donc, il est un peu différent.
Et il est tout aussi décevante.
Ceci est l'ancienne version.
Permettez-moi de réduire la police de retour.
Ceci est l'ancienne.
Telle est la nouvelle.
Mais ce qui est fondamentalement passe Il est maintenant que HTTP est utilisé.
>> Faisons ce un peu plus clair ou, si vous voulez, un peu plus compliqué.
Laissez-moi aller en bas à droite coin de mon appareil.
Et remarquez que tout cela temps, il ya eu un certain nombre.
Voilà l'adresse unique de votre CS50 Appliance.
Il est une adresse privée, comme le laisse entendre le 172.16,
qui signifie simplement que vous physiquement peut accéder à ce serveur Web.
Tout est un pare-feu et bien protégé du reste
du monde en raison de cet adressage.
>> Et maintenant remarquer que si je vais à cette adresse, pas dans mon appareil,
mais dans Mac OS-- je vais pour revenir ici.
Ceci est mon Mac maintenant.
Et maintenant, je vais ouvrir cette version de Chrome ici.
Et je vais aller à http: //172.16.25 / Et je ne sais plus le rest-- 133.
>> Donc, je vais rendre visite à mon Mac cette adresse IP /hello.html Entrée.
Et maintenant je vois depuis mon Mac que mon CS50 Appliance, qui est
adresse IP est que nombre, est en effet comporter
comme un serveur Web sur Internet.
Il n'a pas une belle facile à se souvenir du nom comme Facebook.com,
mais il utilise HTTP apparemment, même si Chrome
est une sorte de simplifier le monde pour nous, mais pas nous montrer HTTP.
Mais cela est en effet exactement cela.
Chrome est juste de sauver certains frappes de nos jours.
Et qui est ce que nous voyons maintenant.
>> Voilà donc tout beau et bon.
Mais il est une page assez décevante.
Laissez-moi aller et faire quelque chose un peu différent maintenant.
Alors permettez-moi de revenir à gedit.
Et au lieu de bonjour, monde, nous allons mettre une image.
Et je prétendais de before-- me laisser aller dans mon répertoire localhost public.
Et laissez-moi aller de l'avant et copier un tas ensemble de fichiers à partir d'aujourd'hui
de mon dossier Dropbox en ici.
>> Maintenant, si je tape ls, regarder à tous ces fichiers
que je vous ai distribué par le le site Web de cours à l'avance d'aujourd'hui,
dont l'un est encore hello.html.
Donc, il ya celui-là.
Et rappeler cette stupide un de la dernière cat.jpg time--.
Je vais donc essayer d'intégrer cat.jpg l'intérieur de ma page web.
>> Je vais aller de l'avant et faire cat.jpg, sauver.
Permettez-moi de revenir à Chrome.
Et permettez-moi de zoom dans le police et maintenant recharger.
Oops, où je mets ce?
Standby-- je dois encore l'ancien la version de mon bureau ouverte.
Alors laissez-moi aller dans mon serveur virtuel, mon localhost, mon public et hello.html.
Alors maintenant, laissez-moi aller de l'avant et cat.jpg-dire à l'intérieur du corps
où je veux que ce soit affiché et recharger.
Bien sûr, ce ne sont pas correctes.
>> Je dois donc dire au navigateur un peu plus délibérément ce que je veux faire.
Il suffit de taper le nom est évidemment pas suffisant.
Donc, rappeler qu'il y avait un autre étiquette, image, img pour faire court.
Voilà juste parce que les humains ne pas aimer les mots pleins de type.
Et puis nous pouvons faire source = "cat.jpg".
>> Et maintenant, je vais faire une chose différente ici.
Même si tous nos étiquettes ont jusqu'à présent
eu cette notion de balise de début et une balise de fin,
qui ne fait pas vraiment sens d'une image, non?
Une image est soit là ou pas.
Et si les humains sont venus avec une convention simple.
Lorsque vous avez une étiquette qui peut à la fois commencer et se terminer à la même time--
il peut être vide, pour ainsi speak-- juste mettre la barre oblique à l'intérieur de la balise
à la fin.
Maintenant, permettez-moi de revenir à mon navigateur.
Hit Recharger Merde, quelque chose qui ne va pas.
Vous avez probablement vu cette de temps en temps sur la bande,
même si cela n'a pas été votre faute.
Il est de la faute du serveur web.
Que ce odes semblent indiquer?
Il est cassé.
Voilà où l'image appartient.
Ouais?
>> PUBLIC: Mais il ne avoir accès à l'image.
>> DAVID J Malan: Il ne fait pas avoir accès à l'image.
Ce, ou pire encore, peut-être il n'a même pas exister.
Voyons voir si nous ne pouvons pas diagnostiquer que.
Rappel de la dernière fois que si en chrome, dans l'appareil,
ou encore sur votre Mac ou PC, vous allez dans le menu de développeur
et aller dans les Outils de développement option, qui probablement vous avez
pas utilisé beaucoup ou jamais.
Et si je vais au Réseau et rechargez la page,
nous allons examiner notre HTTP demandes qui sont faites.
>> Il ressemble à hello.html est en effet OK, donc le 200.
Mais cat.jpg est 403.
Donc, il est pas un 404.
Le fichier existe probablement.
403 signifie interdite.
Donc, cela est un peu confus.
Je vais revenir à ma fenêtre de terminal.
Permettez-moi de zoomer jusqu'à ici.
Et permettez-moi de faire une ls.
Il ya les mêmes fichiers.
>> Maintenant, permettez-moi de faire un ls -l, qui vous avez probablement
utilisé avant de regarder dans les fichiers peut-être la taille ou l'horodatage.
Et nous voyons tout un tas de informations écrasante.
Mais remarquez quelques détails.
Voici hello.html en ce ramer ici et voici cat.jpg.
Et il est juste l'appareil étant amical en soulignant JPEG de l'utilisateur
en violet comme ça.
Mais quoi d'autre est différent à côté la taille du fichier et le nom du fichier?
>> PUBLIC: [inaudible].
DAVID J Malan: Oui, il ya de plus ici deux plus R.
Notez ce hello.html a passe.
Ainsi, il apparaît que le nom de cet annuaire public est important.
Tout dans ce répertoire est destiné à être public.
Mais il ne suffit pas juste pour déposer des fichiers dedans.
Vous devez également modifier le mode de fichiers,
modifier les autorisations de le fichier de manière proactive pas
le réglage par défaut, qui est celle que je peux lire
et écrire, I étant le propriétaire.
Je veux tout le monde, tout le monde à être capable de lire mon dossier, pour ainsi dire.
Lire signifie simplement l'afficher.
>> Et en effet, comme vous le verrez dans le problème mis sept, qui est ce moyen de ces R.
La moyenne de ces deux R laisser tout le monde ailleurs dans le monde également lire,
surtout maintenant que il est dans ce répertoire.
Donc, la façon la plus simple de résoudre ce problème est de aller à mon message et faire chmod pour le changement
mode, puis font un + r, tout à fait, tout le monde, tous, plus r pour lecture,
et puis cat.jpg Entrée.
Rien ne semble se produire, qui signifie généralement une bonne chose.
Donc ls -l again-- maintenant regardons cat.jpg.
Et cette autorisation semblent avoir changé.
En passant, si vous faites une erreur et vous, par exemple,
juste fait votre-- je ne know-- essai accessible au public par accident,
vous pouvez faire l'inverse, un chmod-R.
Bien franchement, il ne devrait pas être dans le répertoire public
de toute façon si tel est le sujet de préoccupation.
>> Alors maintenant, revenons à mon navigateur et recharge.
Et je vais cliquez sur le petit Ghostbusters
symbole pour supprimer la partie de la écran afin que nous puissions voir les nouvelles demandes.
Et en effet, ici est Cat Grump d'avant.
Mais plus important encore, techniquement, il est
le nombre 200, qui signifie que nous avons eu sur OK.
Très bien, alors que tout est beau et bon.
Mais nous ne faisons pas le meilleur des sites,
ni que nous allons essayer trop dur à faire le plus chic de sites Web d'aujourd'hui.
Mais nous allons au moins faire quelque chose Super familier avant de cliquetis
de quelques autres balises.
Alors suppose que je ne veux pas juste un chat ici.
Supposons que je veux réellement ce chat de relier à quelque chose.
>> Je pourrais, par exemple faire quelque chose comme ça.
pour un ancrage pour href hyper equals-- de référence
et nous allons juste faire quelque chose comme www.google.com près
citer parenthèse fermante.
Et maintenant, la recherche pour les chats.
Fermer balise d'ancrage.
Cela a donc une seule sorte de fondamentalement nouveau détail.
La balise bien sûr, est différente.
Il est le nom d'une ancre pour référence href ou hyper.
>> Mais plus important encore, il est cette fonction syntaxique ici.
Voilà ce que nous allons commencer à appeler pas une étiquette, mais un attribut.
Et un attribut est quelque chose qui modifie le comportement d'une balise.
Et que cet attribut, href, des moyens modifier le comportement de cette ancre
de sorte que quand il est cliqué, il va à cette adresse ici.
Et bien sûr, cette URL est Google.
>> Pendant ce temps, qu'est-ce texte ici va être?
Eh bien, que ça va être ce qui en fait l'homme
voit que l'soulignée lien, aussi simple que cela.
Essayons donc cette.
Permettez-moi de le sauver.
Je suis toujours dans hello.html.
Mais dans les versions en ligne, vous verrez les noms de fichiers réels nous préparés à l'avance.
Permettez-moi aller de l'avant et recharger.
Et maintenant, il est un très Cette page décevante encore.
Mais si je survole there-- et il est un peu petite,
mais-- vous pouvez voir dans le fond coin gauche de votre écran,
il est en effet aller à google.com.
Et si je clique cela, il sera fouetter me sens à l'actuel Google.
>> Mais remarquez ici l'occasion pour exploitation, tout comme un côté.
Et nous reviendrons à l'autre les questions de sécurité avant longtemps.
Parce qu'il ya cette dichotomie entre l'endroit où vous allez et ce que vous dites,
vous pourriez faire quelque chose comme this-- http://www.google.com.
OK, et maintenant si je recharge après avoir sauvé cette page,
on dirait que je vais aller sur Google.
Mais il n'y a pas de raison que je avoir à aller sur Google, non?
Je pouvais aller à quelque chose comme badguy.com, recharger la page ici.
Et remarquez, il ressemble toujours à Google.
Et que si je suis forte assez pour planer au-dessus ici
je ne vois il est même aller à aller à un endroit différent.
>> Donc, si vous avez déjà reçu un courrier électronique, en particulier
un de Paypal, ou apparemment de Paypal
vous demandant de vous identifier à votre compte, ce
est pourquoi vous ne devriez jamais jamais cliquer sur des liens dans des e-mails,
franchement, tous les liens dans les emails.
Si vous savez que vous avez réel argent dans Paypal ou Banque
d'Amérique ou Fidelity ou tout site, tapez manuellement dans.
Parce que regardez comment il est facile de tromper quelqu'un en présentant ce
ressemble à un lien.
Mais il pourrait effectivement aller absolument partout.
>> Et il ya beaucoup plus menaces que cela.
En fait, ceci est un bit d'une tangente maintenant, mais un
des meilleurs que je jamais vu qui a depuis été fermé,
est quelqu'un conduit les gens to-- alors cela pourrait dire,
cliquez ici pour vous connecter à votre compte, un compte en banque.
Et ce fut Bank of the West.
>> Donc, quelqu'un a acheté ce.
Et il est un peu plus facile à voir dans une police mono espacées zoom
sur un projecteur de 30 pieds.
Mais quand elle est petite police dans un e-mail que vous recevez,
cela ressemble bankofthewest.com, pas bankofthevvest.com,
qui quelqu'un avait payé 10 $ à acheter.
Et puis ce qui les a conduit à la équivalent de quelque mauvais site.
>> Et vous verrez too-- fait que nous pouvons faire this-- si je vais sur le site actuel,
bankofthewest.com, de nouveau, rappel de la dernière fois
que si tel est leur page Web et vous êtes curieux de savoir comment cela fonctionne,
vous pouvez certainement aller à Les outils de développement de Chrome.
Et vous pouvez voir toutes les HTML bien formaté il.
>> Mais plus au point, vous cam-- Fermons
this-- vous pouvez aller à Voir Développeur Afficher la source.
Pourquoi puis-je copier non seulement tout cela et puis je
peut aller dans ma petite fenêtre gedit ici et faire ma propre page web.
Enregistrer ce en hello.html.
Et sans doute cela va casser, car il est pas aussi facile habituellement.
Mais maintenant, si je recharge ma propre page sur mon propre CS50 d'appareils et de recharger la page,
OK, quelques trucs cassé.
Mais je suis assez près d'avoir mon propre site web bancaire, droit?
Tout cela HTML--
>> [Rires]
>> DAVID J Malan: -I ne actually-- et vous
savoir qu'il ya quelqu'un là-bas qui serait effectivement cliquer sur ces liens trop.
Donc, clairement, certaines choses se brisa.
Mais cela va conduire nous dans une discussion,
inutilement en ce moment, à ce CSS, feuilles de style en cascade, sont,
et comment vous avez réellement télécharger les autres fichiers HTML
et JPEG fichiers GIF le site pourrait être utilisé.
Mais tout cela est réalisable.
Mais il se résume à ces heuristiques très simples.
>> Alors maintenant, nous allons simplement parcourir une quelques autres exemples de HTML
juste pour vous donner une idée de ce que vous pouvez faire.
Par exemple, ceci est list.html.
Supposons que je voulais faire une page web avec une liste de maisons dans le quad.
Je pourrais utiliser la balise ul pour non ordonnée liste, puis l'élément de liste enfant
et puis itérer over-- ou liste, rather-- les maisons en question.
>> Et si je l'ouvre cette place, nous allons le faire.
Allons pas à Hello.html, mais à list.html.
Bon sang.
Comment puis-je résoudre ce problème?
Il est de la même question que précédemment, non?
Alors laissez-moi faire oops-- chmod-- chmod a + r de list.html.
Et maintenant, si je reviens à mon navigateur et cliquez sur Reload, il est là.
Donc, si vous avez toujours voulu faire une liste à puces, vous pouvez le faire.
Si vous voulez être super chic et faire une liste ordonnée, pas une liste non ordonnée,
changer ceux ol, recharger la page, et maintenant le navigateur comptera pour vous.
>> Que pouvons-nous faire?
Eh bien, un couple de others-- si vous avez de longs paragraphes de text--
par exemple, certaines Texte latin comme this--
et vous voulez dans des paragraphes distincts, p ouvert, p près de la balise de paragraphe.
Et le faire encore et encore.
Et si je l'ouvre maintenant ce fichier, paragraphs.html, eh bien, ce
est d'obtenir ennuyeux.
Alors maintenant, nous allons simplement revenir à mon rapide, chmod a + r r étoiles .html--
un joli petit joker pour ainsi dire.
Il convient de fixer tous ces problèmes pour moi.
Disons recharger.
Il ya trois paragraphes.
>> Et maintenant, nous allons aller de l'avant et ouvrir un autre.
Que diriez-table?
Vous remarquerez la table regards un peu plus complexe.
Mais il en est de même idea-- étiquette ouverte, étiquette ouverte,
ouvert, ouvert, ouverture, fermeture, étiquette ouverte.
Et ceux-ci se produisent à tenir pour table, dont la frontière est apparemment
va être une épaisseur 1-- quelle que soit ce tableau désigne: rangée, table
données, ce qui signifie une cellule.
Et si je reviens à mon navigateur ici et aller à table.html,
vous pouvez voir quelque chose comme ça, hideux.
Mais nous y reviendrons au point où nous pouvons réellement
rendre les choses plus jolie que ça.
>> Permettez-moi donc stipuler maintenant.
Il ya des grappes de plusieurs balises.
Et HTML est merveilleux de prendre parce que, franchement, tout ce que vous devez faire
est de regarder des pages Web existantes avec lequel vous êtes familier.
Et vous êtes comme, oh, voilà comment ils l'ont fait cette esthétique.
>> Ou vous pouvez rechercher tout en ligne ressources sur la façon dont fonctionne HTML,
et vous verrez qu'il ya une vocabulaire ensemble des autres balises.
Mais avec le modèle mental simple, seul que presque toute étiquette vous ouvrez
doit être fermé, il a vraiment ne suffit à soi-même enseigner
HTML après comprendre ces idées de base de balises
et les attributs et la bonne forme que nous avons parlé,
fermer quoi que ce soit que nous puissions ouvrir de sorte que nous ne confondons pas un navigateur.
Prenons donc maintenant ce à un niveau plus intéressant
en allant à l'actuel.
Passons maintenant à mon Mac ici, à google.com.
Et maintenant notice-- de le faire.
Je suis gong pour aller à Paramètres, Paramètres de recherche.
Je veux éteindre cet instant ennuyeux Résultats chose où il immédiatement
commence à répondre à votre saisie.
Faisons cette ancienne école afin nous voyons réellement ce qui se passe.
>> Donc, je vais sauver ma Les paramètres de Google ici.
Et maintenant notice-- je vais chercher quelque chose comme les chats.
Et il est toujours de faire auto complète ici, mais basé sur des choses
les gens ont tapé dans le passé.
Mais remarquez ce qui va se passer.
>> Dans l'URL au moment est ce, juste google.com.
Et techniquement, il est oblique.
Google vient de sauver un caractère et pas nous qui l'affiche.
Ils nous montrent https, tout simplement être super rassurant que nous sommes
à une page sécurisée ou cryptée.
>> Alors laissez-moi aller de l'avant et cherche pour les chats.
Maintenant, cela a vraiment écrasante rapidement.
Regardez la longueur de cette adresse URL.
Mais il se trouve que la plupart de ce genre de choses dans l'URL est en fait assez inutile.
Je vais commencer à supprimer choses que je ne comprends pas.
Je vois les chats.
Je comprends les chats.
Je ne sais pas pourquoi les chats sont là de nouveau.
Je ne sais vraiment pas ce cette absurdité est.
Donc je vais juste garder mettre en évidence et de supprimer des trucs
que je ne comprends pas, distillation de l'URL dans tout cela.
>> Maintenant, permettez-moi de me ENTER.
Il ressemble à Google fonctionne encore.
Donc, pour une raison quelconque, ils sont en ajoutant un beaucoup de choses par le défaut de leur URL.
Mais il est pas strictement nécessaire.
Donc, ce qui est agréable à ce sujet?
Eh bien, laissez-moi aller de l'avant et ouvrir l'inspecteur de Chrome.
Il ya un raccourci de la souris peu pour elle.
>> Allez à l'onglet Réseau.
Et maintenant, permettez-moi de recharge cette page une fois de plus.
Et je suis maintenant la touche Maj.
En aparté, les navigateurs ont tendance à mettre en cache ou enregistrer
informations seulement pour des raisons d'efficience.
Mais généralement, la détention et Maj rechargement va forcer tout
à recommencer depuis le début.
Et voilà ce que je veux faire ici.
>> Et remarquez tous ces les lignes qui vient de paraître.
Il se trouve que dans tout donné web Cette page, il pourrait y avoir un seul fichier
involved-- hello.html-- ou il peut-être 52, comme dans ce cas.
Lorsque je visite google.com, apparemment, mon navigateur
coup d'envoi de 52 requêtes HTTP séparées.
Pourquoi donc?
>> Eh bien, regardez ce qui est à l'intérieur de cette page web en haut.
Il n'y a pas que du texte, mais il ya des images réelles
des chats de plus vers la droite.
Il ya un logo coloré ici à gauche.
Il ya toutes ces icônes pour un microphone et ainsi de suite.
Il ya beaucoup de pièces, la construction blocs, des morceaux de grattage, si vous voulez,
à cette page web.
Et ce que le navigateur est en train de faire sur obtenir le premier fichier, qui
est cette ligne ici, il est essentiellement itération sur le haut HTML
en bas, de gauche à droite, à la recherche de des choses comme balises d'images ou d'autres balises
qui mentionnent que d'autres fichiers et quand il les voit, va et les récupère
via HTTP, tout viable enveloppe métaphore,
et les affiche ensuite dans le emplacement approprié dans la page Web.
>> Mais remarquez ici si je me concentre sur les premiers chats lancer, recherche,
remarquer que, bien qu'il utilise HTTP 1.1.
Et malheureusement, Google Chrome dès maintenant en version 39
est une sorte de nivellement par le bas des choses et pas nous montrer les têtes réels.
Mais ce qui a été effectivement envoyé une demande pour ne pas réduire, mais / search? q = chats.
>> Maintenant, pourquoi est-ce important?
Eh bien, je vais conclure de ce que si vous Google
supporte les requêtes de cette forme, pourquoi puis-je mettre pas ma propre recherche
moteur pour CS50, mais juste l'avant fin, il suffit de l'interface utilisateur graphique.
Et nous allons confier l'extrémité arrière, la recherche que les résultats réels de Google.
>> Alors, comment puis-je faire cela?
Eh bien, laissez-moi aller dans gedit ici.
Et laissez-moi aller de l'avant et ouvre jusqu'à, disons, un nouveau fichier.
Et je vais enregistrer cette temporairement recherche-0.html.
Et puis finalement, nous allons rapidement avant à celui que je pré-établi.
>> Et je vais fouetter rapidement le type de doc
html parenthèse ouverte html près html de support.
Ensuite, je vais faire la tête proche de tête titre ouvert CS50
Recherche à la place de la recherche Google.
Ici-bas, je vais devoir le corps, ici-bas près du corps.
Et maintenant je dois CS50 Recherche.
Et effectivement, nous allons construire ce progressivement.
Je vais aller de l'avant et de fermer ce et en fait mettre dans mon répertoire public.
Alors donnez-moi un instant.
recherche-0.html-- je vais temporellement appeler search.html.
Je vais faire un chmod un search.html + r.
Et maintenant, je vais ouvrir.
Très bien, donc ça a été rapide.
Mais le but était simplement de nous faire le point
ayant de ce texte fichier appelé search.html.
Donc pas grand chose à voir encore.
En effet, si je vais à mon navigateur, et aller à search.html, qui est tout ce qu'il est.
Mais vous savez quoi?
Je peux être un peu amateur.
Je lis dans un livre qu'il ya une étiquette de titre appelé h1.
Et je vais aller de l'avant et utiliser que h1 h1 ouverture et de fermeture.
Recharger la page.
Et maintenant, il est plus grand et plus audacieux, pas tout à fait intéressant,
mais au moins il structurellement plus intéressant.
Mais maintenant, laissez-moi vous présenter une autre étiquette.
Il se trouve qu'il ya une balise form.
Et permettez-moi de conclure ce tag.
Et il se trouve qu'il ya une balise d'entrée
a un attribut appelé type, qui est le type de champ de données,
si vous voulez.
Et va être de type texte.
Et sa valeur va être CS50 Recherche.
Fermer étiquette.
Et il va y avoir aucune notion de ouverture et de fermeture avec séparer les tags.
>> Permettez-moi de revenir ici et voir ce qui se passe, recharger.
Obtenir intéressant.
On dirait qu'il est un champ de texte.
Et en fait, je ne voulais pas de mettre une valeur encore là.
Permettez-moi de revenir ici et obtenez réellement débarrasser de cette valeur à garder les choses simples.
Au lieu d'une valeur, ce que je voulais de donner à cette chose était un nom.
Et je ne sais pas ce qu'elle est, donc je vais y revenir.
>> Mais en dessous, je veux à faire input type = soumettre.
Et cette valeur sera CS50 Recherche.
Et nous verrons pourquoi je déplacé de la valeur à cette.
Quand je recharge, il me semble avoir maintenant Les débuts de ma propre recherche
moteur, super hideux, mais franchement, il est
pas un jet loin de ce que Défaut la page de Google ressemble.
>> Si je vais là maintenant, je peux taper dans les chats et nous espérons cliquez sur Rechercher.
Mais je ne suis pas encore tout à fait fini, parce que je ne l'ai pas mis en œuvre,
de toute évidence, une base de données.
Je ne l'ai pas exploré la Web pour obtenir des résultats de recherche.
Je dois donc externaliser à Google.
Alors, comment puis-je faire?
>> Eh bien, tout d'abord je besoin d'ajouter et d'action
attribuer à ma forme balise est http://www.google.com/search.
Et je sais que d'avoir seulement déduire en regardant de près
à leur URL.
Et maintenant prendre une supposition.
Qu'est-ce que ce champ de texte devrait probablement être appelé, sur la base d'où nous venons
avant?
>> PUBLIC: q.
>> DAVID J Malan: q.
Et nous ne sommes pas réellement besoin question marquer il se trouve, mais q est en effet il,
q pour la requête probablement par défaut, juste parce que ce
ce que Larry et Sergey venu il ya des années.
Alors maintenant, permettez-moi de recharger cette page.
Il ne semble pas si différent.
Mais maintenant regarder ce qui se passe.
>> Si je tape dans les chats et cliquez CS50 Recherche et de laisser aller,
remarque je suis battu loin de réelle Google.
Maintenant, Google est d'être un peu ennuyeux en ce qu'ils sont
ajoutant un paramètre supplémentaire, si vous voulez, à l'URL.
Voilà tout événement automatiquement sur le côté de Google.
>> L'important est que je crois avoir généré cette demande ici.
Et, en effet, que ce qui arrive.
Lorsque vous avez HTML ressemble à ceci, ce
est une sorte de notation des développeurs web pour dire, aller de l'avant et créer une forme
que quand il est soumis, il va aller à cette URL.
Et lorsque l'URL a fourni valeurs pour des choses comme q,
ne vont pas seulement à cette URL.
En fait, passez à la question marque et alors q = chats.
Ajoutez le paramètre, le paramètre HTTP comme ça.
>> Et juste pour être super précis, Ce qui est déduit ici--
mais je serai plus explicit-- est que la méthode que je veux utiliser
est d'obtenir, au lieu de quelque chose comme après, que nous allons finalement voir.
Donc en bref, simplement en compréhension HTML et en utilisant certaines balises assez simples,
nous pouvons maintenant commencer à créer notre propre utilisateur final avant
interface avec une recherche Moteur derrière elle.
>> Mais bien sûr, ceci est assez hideux.
Alors permettez-moi d'ouvrir effectivement en place un peu meilleure version.
Ceci est celui que je préparais en avancer qui a des commentaires.
Mais vous verrez que je à peu près recréé.
Donc, ce qui est déjà disponible en ligne.
Et je ne suis d'préventivement aller à https juste pour garder les choses simples.
>> Et maintenant, nous allons ouvrir une prochaine itération de cette.
Est la version 1 au lieu de 0.
Qu'est-ce que vous saute au visage comme légèrement différent dans cet exemple?
>> PUBLIC: [inaudible].
>> Ouais, il ya ce centre d'alignement de texte.
Ceci est un peu bizarre ici.
Mais cette nouvelle est en effet.
Et peut-être deviner ce qui va se passer.
Si je vais à mon navigateur maintenant et visiter la recherche-1.html,
il est presque la même chose.
Mais il est un pas de plus vers être un peu plus joli.
Il est toujours laid, mais plus joli que dans au moins tout est maintenant centré.
>> Donc, il se trouve que ce que je suis en utilisant est tout à fait une autre langue appelée
CSS, feuilles de style en cascade.
Et CSS, franchement, est en quelque sorte de, à mon avis personnel,
une langue atrocement conçu.
Il est très ennuyeux de se rappeler tous les différents détails.
Mais il est ce qui stylise la tout le Web dans le monde entier aujourd'hui.
Je offensé quelqu'un.
Bien.
Donc revenons ici et voir la façon dont nous sommes en train de l'utilisation de ce.
Et il se trouve, au moins il est en fait un langage assez simple.
Il est juste de paires clé-valeur, les propriétés et les valeurs, les propriétés et les valeurs.
En effet, voici un ces biens et de la valeur.
>> Simplement en utilisant le style attribuer sur ma balise body
et ce qui donne une valeur de un mot colon et un autre mot,
ou une propriété et une valeur, Je peux affecter l'esthétique
de la page Web, et non encore nécessairement la structure,
mais l'esthétique de ce.
Et par googler autour, je me rends compte que les feuilles CSS, style en cascade,
soutient une propriété appelée text-align, dont la valeur peut
être à gauche, à droite ou au centre, par exemple.
>> Alors maintenant, quand je recharge cette page, ce que je ne se
était une page centrée, mais encore assez laid.
Allons de l'avant et ouvrir jusqu'à la version 2 de Recherche.
Et remarque maintenant que je l'ai fait un peu plus.
Notez que ici à l'intérieur de la tête tag, il peut y avoir plus de titre.
En fait, il ya une balise de style.
Et là il est juste un peu désordonné vision CSS parfois.
>> Notez que je semble avoir quelque chose qui ressemble structurellement très différent.
Mais ici est le nom de la balise je veux stylisée.
Voici nos vieux amis bouclés accolades et accolade fermée.
Et puis ici est que propriété et sa valeur.
>> Si je charge ce fichier, search2.html, le résultat est identique.
Mais il est une étape vers une meilleure conception.
En tenant cette CSS, je l'ai pas mélangés avec mon HTML.
Et en effet, comme nous le verrons, je pouvais réutiliser ces propriétés et les valeurs.
Si je voulais faire des bouquets de parties de ma page web centrés,
Je ne dois pas taper style = text-align centre partout.
Je peux mettre dans un seul endroit peut-être, tiens au sommet.
>> Mais même cela ne le meilleur design.
En fait, une des choses que vous apprendrez que vous passez plus de temps avec
programmation web est que plus vous pouvez modularisation des choses et des choses de factoriser
comme les fichiers .h nous facteur trucs, helpers.c souhaitez nous laisser les choses de factoriser
il ya quelques psets.
De même, pourrions-nous vouloir atteindre cet objectif.
>> Donc remarquer dans la version trois search.html je l'ai
nettoyé la tête de la page et vient de mettre
en cela, une étiquette de lien, qui contrairement à son nom,
ne vous donne pas un lien hypertexte.
Il est relié à un autre fichier par le biais de un href dont la valeur, dans ce cas,
est la recherche-3.css
Donc, je me rends compte que nous allons rapidement.
Mais tout ce que je fais est un peu de déplacer des choses.
Laissez-moi libre recherche-3.css.
Ça y est, rien de vraiment à elle.
Je viens de copier et collé dans un nouveau dossier, tout comme nous affacturées trucs
dans d'autres fichiers avant.
Et la result-- complètement underwhelming--
va être exactement la même.
Mais nous allons de l'toward-- non, il est pas.
Oh, je sais pourquoi.
>> Il semble donc y avoir un bug.
Et il est dans un certain sens.
Mais laissez-moi ouvrir mon onglet Réseau.
Permettez-moi de recharger la page.
Ah, pourquoi le CSS ne sont pas appliquées?
Eh bien, le fichier CSS, de même, a pour être lisible monde, pour ainsi dire.
Et il est trop actuellement interdit.
Alors permettez-moi de faire un chmod a + r des étoiles dot CSS-- whoops--
nous sommes point CSS est que le extension de fichier pour les fichiers CSS.
Maintenant, permettez-moi de revenir à mon navigateur et recharge.
OK, un peu mieux.
>> Maintenant, permettez-moi de faire une dernière chose.
A la recherche-4.html.
Je dispose d'une version que je pensais juste était plus cool, quoique de manière plus
compliqué.
Regardons d'abord le résultat.
Fermer cette de nous donner plus de place.
Changez-la en recherche-4, Entrée.
>> Et maintenant un tas de choses sont cassées.
Je vais revenir dans mon répertoire ici.
Et maintenant, je vais juste faire un chmod a + r sur un file--
parce que je sais que ce exists-- appelé logo.gif, qui est une image.
Et maintenant recharger.
Et wow-- alors maintenant je suis assez proche, franchement,
à aimer la version de 1999 de Google, et franchement, la version 2014 de Google,
droit?
>> Donc, il est maintenant d'aller à leur site web, en fin de compte, si je cherche pour les chats.
Et en effet il est.
Mais qu'est-ce que je fais différemment dans cette version 4?
Donc, nous ne nous attarderons pas trop sur elle ici.
Vous verrez ce problème en mis sept finalement.
Mais je l'ai remarqué quelques petites choses.
>> Je présenté un div tag, qui est la division,
dans le même esprit à une balise de paragraphe.
Mais une division est juste comme, voici une région rectangulaire invisible
de l'écran.
Donnons-lui un unique, identifiant, un pied de page, juste
afin que nous puissions parler dans notre HTML ailleurs.
Voici un autre div de la page dont l'ID va être content.
Il est le contenu de la page.
Et ici est l'en-tête de la page.
>> En d'autres termes, je l'ai essentiellement en HTML suis mentalement
visualiser cette page web trois composantes, une tête
ici avec ce rectangle invisible, la teneur dans le milieu, et ensuite
le pied de page en bas, même si nous ne voyons pas les choses.
Parce que je veux dans ma tête de Cette page ici, ou dans un fichier .css,
Je peux utiliser cette syntaxe.
>> Header est pas une étiquette.
Il est un code d'identification, il se que en faisant #header,
Je peux maintenant appliquer une ou plusieurs des propriétés à la tête.
Je peux faire le même contenu, de même pour le contenu ici.
>> Ainsi, par exemple, dans le pied de page, un avis toutes ces propriétés Je ajout.
Et je sais qu'ils existent seulement par la lecture sur la documentation de CSS.
Taille de la police va être smaller-- de sorte que certains taille de police relative.
Le poids va être gras.
Margin-- le nombre de pixels autour it-- est de 20 pixels.
Et ça va être centré.
>> Mais pour l'instant, la page ressemble à ceci.
Si je ne suis pas heureux avec ma copie là,
Je pouvais faire quelque chose comme la couleur rouge.
Et puis je peux sauver ce, recharger, et maintenant je l'ai stylisé le pied de page.
Donc, cela est juste allusion à la puissance de ce que vous pouvez faire dans une page web
de changer les choses autour.
>> Et encore plus cool que cela, si vous voulez à fouiller avec des sites réels,
vous ne pouvez pas les changer de façon permanente.
Mais si je ouvrir Inspecteur de Chrome à nouveau
et je vais pas à la gauche ici, ce qui montre le code HTML de Facebook,
mais montre sur la droite côté la totalité de son CSS,
vous pouvez soit et changer les choses à la volée.
Alors laissez-moi aller de l'avant et le faire.
>> Permettez-moi aller de l'avant et de contrôle cliquez sur ce mot au hasard ici,
signer, puis cliquez sur Vérifier l'élément.
Chrome saute très bien à la balise h1 que Facebook utilise.
Et remarquez ici Facebook a en quelque sorte paresseusement
codé en dur la taille comme une propriété ici.
>> Donc, la chose intéressante est que que si je vais réellement ici
et dire, oh, Facebook, je ne aime pas 64 pixels, nous pouvons maintenant modifier Facebook.
Bien sûr, nous ne faisons que changer pour moi personnellement en ce moment.
Mais ceci est juste un autre outil dans notre trousse à outils
cela va nous permettre de peaufiner et de comprendre et de diagnostiquer aussi
questions dans nos propres pages web.
Et nous pourrions aller de même sur ici, ce qui est la même chose.
Si vous voulez vraiment obtenir la fantaisie, je dire, maintenant vous pouvez vraiment muter la page
et faire des choses folles.
>> Alors, pourquoi est-ce tout utile?
Eh bien, en fin de compte, nous sommes allez vouloir être
en mesure de créer des pages web qui sont entraînés par nos propres extrémités arrière,
pas seulement par Google et l'externalisation de la fin là-bas.
Nous voulons en fait la valeur, par exemple,
de l'action de notre moteur de recherche attribuer à aller pas à quelqu'un d'autre,
mais à quelque chose comme search.php, où search.php est sur notre propre serveur,
pas sur quelqu'un d'autre.
>> Et pour y arriver, nous avons effectivement besoin d'introduire un nouveau langage.
Donc, nous avons déjà examiné une nouvelle langue ici, ou deux vraiment, HTML
et CSS.
Mais ils sont vraiment juste langues structurelles et esthétiques.
Ils ne sont pas la programmation langues en soi.
Et qui est à peu près autant formelle temps que nous passons sur eux.
Parce que nous allons commencer maintenant la transition vers PHP.
>> Donc, PHP est un réel langage de programmation.
Il est un langage de script dans le sens où il est
censé être plus léger que quelque chose comme C
Et il est un langage interprété, ce qui signifie qu'il est pas établie.
Donc, en résumé, ce que cela voulait dire lorsque nous avons utilisé un langage comme C
et nous avons dû compiler?
Qu'est-ce que cela signifie pour compiler du code source C?
PUBLIC: [inaudible].
DAVID J Malan: Dites-le à nouveau?
PUBLIC: [inaudible].
DAVID J Malan: Parfait.
Il transforme en binaire.
Il transforme en zéros et de uns de réelle code source proche de l'anglais.
Et puis nous pouvons exécuter ces zéros et de uns
en les faisant passer à travers le CPU en double-cliquant sur une icône
ou exécuter une commande.
>> PHP et Python et Ruby et Perl et JavaScript
et grappes d'autres langues sont interprétées
langues, ce qui veut dire vous ne les compilez pas.
Au contraire, vous les nourrissez comme entrée un programme appelé un interprète.
Et qui interprète, qui quelqu'un d'autre a écrit,
lit le code source de haut en bas, de gauche à droite et seulement interprète
ces lignes et fait ce que vous dites.
>> Donc, si vous rencontrez un ligne qui dit impression,
il ne convertit pas nécessairement impression pour les zéros et de uns correspondant.
Il a juste cette interprète comme un grand état, si celui dit,
si l'instruction de programmeur est impression, puis procédez comme suit.
Donc, il l'interprète juste par type de raisonnement
par ce que vous lui disant de faire.
>> Et PHP est une de ces langues.
Et il ya PHP ans a été conçu précisément pour la programmation web.
Et ce fut d'abord un langue désordre très bâclée.
Et en effet, il ya une énorme quantité de mauvais code PHP là-bas.
Mais la langue elle-même a mûri au fil des ans,
tant et si bien que maintenant il est en fait une merveilleuse étape suivante
pédagogique de C parce qu'il est si sacrément familier à tout
vous avez vu au cours des dernières semaines.
>> La seule différence initiale, nous verrons est il n'y a pas la fonction principale plus.
Lorsque vous démarrez l'écriture de code, il est juste va se faire exécuter, peu importe ce que,
comme nous le verrons dans un instant.
En attendant, voici ce que un variables ressemble en PHP.
Il est un peu différent, mais à peine.
>> En PHP, il n'y a pas de typage fort.
Il ya semaine dactylographie, ce qui signifie juste là
sont des types de données comme les chaînes et nombre d'autres choses.
Mais vous ne vous souciez pas spécifier ce qu'ils sont plus.
PHP figure it out pour vous.
Le symbole du dollar est juste une décision que les personnes PHP faites ans
il ya de telle sorte que toute variable en PHP juste commence par un signe de dollar.
Il est en fait assez utile dans ce il vous saute au visage un peu plus.
>> Mais après cela, ce est une condition dans PHP.
Ce qui est différent par rapport à C?
Trick question-- rien, qui est effectivement très belle.
Expressions booléennes dans PHP-- la même.
Expressions booléennes avec et contre ou, interrupteurs, des boucles, des boucles, loops-- OK,
celui-ci est différent.
>> Donc, il se trouve qu'il ya une quelques autres fonctionnalités de PHP.
L'un d'eux est en fait présent, qui est merveilleusement pratique.
Si $ nombre est un tableau que vous avez déclaré précédemment dans un programme,
vous avez cette fantaisie pour chaque construction qu'au lieu de faire tout cela
Je ennuyeux est égal à 0, I est moins que cela, [? I ++?],
pour chacun des nombres que le nombre, où chaque de ces valeurs de signe de dollar est juste
une variable, et le second vous pouvez penser que I.
Vous pourriez l'appeler ce que vous voulez.
Je l'ai appelé nombre.
Cela va parcourir le tableau numéros appelés.
Et à chaque itération, il est va mettre à jour automatiquement
pour vous le nombre de signe dollar variable de sorte que vous constamment
avoir accès à la variable que vous souhaitez sans avoir à faire un crochet
notation ou d'indexation dans un tableau.
>> Au-delà de cela, nous avons même des choses comme tableaux, qui ressemblent presque la même,
sauf qu'il est très commun, comme nous allons voir, à la fois en PHP et JavaScript
à initialiser un tableau pré utilisant les crochets.
C utilise les accolades.
Donc, il est un peu différent, même si nous ne sommes pas vraiment utilisé ce truc bien.
>> Mais encore plus de force, PHP dispose de tableaux associatifs,
qui est une façon élégante de dire les tables de hachage.
En fait, si vous voulez déclarer une table de hachage tableau en PHP, contrairement à C-- combien
lignes de code at-il fallu pour effectivement mettre en œuvre une table de hachage en C?
Ou le nombre de lignes de code est il prendre pour mettre en œuvre une table de hachage en C?
Donc, il est probablement beaucoup, non?
Il est à quelques dizaines, peut-être 100 ou 200.
Il est non triviale.
Ou il est sur le point d'être, comme vous verrez bientôt, non triviale
à mettre en oeuvre une table de hachage [Inaudible] et également un essai.
Mais dans PHP-- et franchement, je ne devrait probablement pas vous dire ce
jusqu'à Monday-- en PHP, si vous voulez une table, fait.
Voilà un hachage table-- si avec une ligne de code.
Et
>> Un grand nombre de langues le faire.
Amusez-vous avec pset cinq.
Donc, beaucoup de langues le faire.
Ils vous donnent ces abstractions que d'autres personnes, d'autres programmeurs,
ont créé pour vous afin que vous pouvez vous tenir sur leurs épaules
et commencer à utiliser les idées qui sont super impérieux, comme les tables et les arbres hachage
et tente.
Mais vous ne devez pas nécessairement mettre en œuvre ces choses vous-même.
>> Et si en fin de compte, ce nous allons utiliser PHP pour
est potentiellement l'écriture de programmes de la ligne dite commande.
Nous pourrions recréer chaque programme nous avons écrit ce semestre à ce jour,
sauf peut-être en petits groupes qui utilise SPL, qui est spécifique à C pour le moment.
Mais tous les autres problèmes mis, certainement Mario et César
et Vigenère et [? Crack?] Et au-delà, nous
pourrait ré-implémenter en PHP, et sans doute un peu plus facilement.
>> Mais ce que nous allons finalement d'utiliser PHP pour la programmation web est.
Et nous allons mettre en place prochaine semaine un modèle mental, un paradigme appelé
MVC, vue du modèle contrôleur, qui, si vous avez fait la programmation
avant ou en Python Ruby ou ailleurs, vous
pourrait connaître de cette équipe avec Rails et Django et autres.
Mais si vous êtes nouveau cela aussi, vous verrez
que ce soit réellement une très naturel extension de la factorisation
et le genre de conception de code que nous avons
été fait en C. Nous allons maintenant appliquer certaines de ces leçons à PHP
de sorte que finalement, nous sommes mise en œuvre de nos propres sites Web.
Et si vous êtes en quelque sorte hypnotisé ou étonné
que nous allons faire tous les si vite,
se rendre compte que presque tous les semestre, près de 90%
des étudiants, y compris ceux CS50 qui ont jamais programmé avant,
finir par faire des projets définitifs qui sont basés sur la programmation web.
Et vous verrez que les rendements sont élevés dans les semaines à venir.
Nous allons donc vous voir ensuite le lundi.
>> ENCEINTE 1: Et maintenant, Deep Thoughts par Daven Farnham.
Les tables de hachage.
>> [Rires]