DAVID J. Malan: Està bé. Hem tornat. Per tant, l'objectiu d'aquesta sessió final és introduir uns quants conceptes sinó també donar a tothom l'oportunitat per estirar la classe dels dits i en realitat fer alguna cosa una mica de pràctica. L'objectiu no és convertir tots nosaltres en els desenvolupadors web per qualsevol mitjà, però en realitat només per donar-li un gust d'alguns dels constructes fonamentals del que entra a la programació web i avui Web el desenvolupament, de manera que la costat estàtic de coses-- sense lògica, sense necessitat de programació idioma, simplement el contingut estàtic. I ens donarà una oportunitat per veure realment el que és un servidor web, veure el que és un arxiu HTML, veure què HTTP és en realitat està servint. Però abans de submergir-se en qualsevol retrospectiva preguntes sobre la computació en núvol o la seguretat o qualsevol altra cosa? No? Està bé, bé, anem a fer això, per si de cas el procés d'inscriure en cosa que porta uns pocs minuts. Anem a deixar que ho faci en el fons. Vagi per davant, si es pogués, c9.io. a aquest URL aquí-- Es tracta d'un tercer clients-- plataforma com a servei, si voluntat-- que va a convidar a vostè per registrar en un compte, i que va a donar a cada un de vosaltres un compte en l'anomenat núvol en la infraestructura d'una altra persona, una companyia anomenada Cloud9. Però el millor de això és que et donen una aproximació d'una desenvolupament real en el món real ambient, encara que en el núvol i en un navegador web, i utilitzarem això en realitat experimentar una mica avui. I després seguir endavant i simplement navegar el seu camí cap al procés de registre si poguéssis. Així que ens va passar a utilitzar això en la classe Dono classes per a tots els estudiants, tant al campus i fora ara, i és reemplaçat el que històricament era el contrari de programari descarregable. Així que el que estaven guanyant accés a és una de les màquines virtuals, en essència, que he descrit anteriorment. Així que aquesta empresa probablement Cloud9 rendes procedents d'un tercer fet Party-- en aquest cas, Google-- conjunt manat de màquines virtuals que d'alguna manera cap amunt en picar la il·lusió de servidors individuals que cada un de nosaltres té un control total sobre. No és exacte dir que són màquines virtuals, però, perquè el Cloud9 s'utilitza en realitat és una mica més nova tecnologia crida l'contenerització. I m'ho dius a mi agafar aquesta foto aquí per pintar aquest quadre. 

Un contenidor és, si recorden la imatge d'abans, una mica més lleuger pes que una màquina virtual. De fet, mentre que l'última vegada que parlem que hi ha ser un operatiu sistema i un hipervisor i després el sistema operatiu hoste, convidat sistema operatiu, operatiu convidat sistema, a la part superior de la seva maquinari físic, la diferència amb aquest nou la tecnologia, la contenerització, és que tots ells comparteixen alguna manera el mateix sistema operatiu. Però encara creen la il·lusió de tot el món tot i tenir la seva pròpia i exclusiva drets administratius i arxius al servidor. Però hi ha menys en el programari entre l'usuari i el maquinari. El resultat dels quals és, de teoria, un major rendiment, perquè vostè està utilitzant o desaprofitar menys recursos en què l'anomenada capa de virtualització. Així que aquest es diu contenerització per naturalesa per mitjà d'una tecnologia anomenada acoblable, que és molt entrar en el seu compte. I això és una cosa que enginyers de la seva empresa podria tipus d'espècie de començar a parlar sobre aviat si no ho han fet ja, encara que certament no hi ha raó per saltar sobre qualsevol bandwagons. 

Així que amb això dit, el és probable que veus ara és una pantalla que s'assembla una mica a això. D'ACORD. I només em diuen de nou si no. I si així que-- Vaig a venir si no. Vagi per davant i feu clic en aquest gran a més de crear un espai de treball, i veureu una pantalla com aquesta. Pot trucar a l'àrea de treball nomenar qualsevol cosa que desitgi, per ara. I de la mateixa realitat, per simplicitat, i- anar bé, alguns de vostès ja tenen espais de treball. Trucar el que want-- negoci, Harvard, dijous, el que vostè desitja. No cal una descripció. Pot deixar-ho privada, llevat que ja tenen un munt d'espais de treball. Si un es veu obligat a fer-ho públic, això està bé per als propòsits de l'actualitat. Aquí, també, és una de les vendes addicionals. S'obté un espai de treball privat predeterminat. Però si vols més, vostè ha de pagar més. Altrament, t'obliguen per fer la seva feina pública. Però això està bé, perquè també apuntar això en les comunitats de codi obert animar la gent a En realitat col·laborar. 

I l'última cosa que és important, però, és, després de triar un nom i després de la seva elecció privada o pública, feu clic en HTML 5, la icona taronja gran segon des de l'esquerra, i a continuació, feu clic a Crea espai de treball. I probablement ho farà prendre un minut més o menys, però vas a continuació, té una medi ambient, una vegada que es fer, que sembla una reminiscència de el que tinc a la pantalla aquí ara. Però, de nou, pot ser que prengui un minut o més per arribar a aquesta pantalla una vegada que hagi fet clic a Crea espai de treball. Però només em Indicador sobre si li agradaria mi per fer una ullada a qualsevol cosa o assessorament. Tot bé. Així que vaig a aquest fons per ara. Llámame sobre si sembla té alguna dificultat tècnica. Però, de nou, pot ser que prengui una poc perquè s'obri. I seguirem endavant i parlar del que que en realitat vol dir fer una pàgina web, el que és HTML, i com tot això Ara interconnecta com estem començant utilitzar realment part de la tecnologia. Així resulta que el que pugui anar al meu petit Mac aquí, obrir un programa simple anomenat Edició de textos, o en Windows que vaig poder obert una cosa que es diu el Bloc de notes. I podria simplement fer alguna cosa així- "hola, món". I llavors podria guardar això com hola.txt Així que hi ha màgia allà. Això no té res a veure amb la Web programació, res a veure amb el llenguatge HTML. Només la creació d'un arxiu de text simple. Però resulta que una banda pàgina és literalment això. És un simple arxiu de text que conté el text que podria escriure en el seu teclat, però típicament, però no sempre No acaba en .txt però .html o .htm. I no ho fa només escriure paraules a l'arxiu. De fet has de fer servir coses trucades etiquetes o, més en general, una cosa anomenat llenguatge de marques. 

Així que vaig a escriure molt ràpidament i després explicar el següent. Vaig a primera escrigui això, que diu: Hey, navegador, aquí ve una pàgina web escrites en HTML. I aquestes dues coses juntes diuen, escolta, navegador, la següent és de fet HTML. Hey, navegador, aquí ve la cap o la part superior de la meva pàgina. Hey, navegador, a l'interior de la part superior de la meva pàgina, posar un títol que és, "hola, món ". Hey, navegador, després que el cap de la meva pàgina, aquí ve el cos de la pàgina. I, escolta, el navegador, el cos de la meva pàgina també hauria de dir, "hola món". Quins són els detalls més destacats en aquesta llista? Això és el que generalment diu una declaració de tipus de document, i, la veritat, que és una mica difícil de memoritzar això al principi. Vostè només tipus de copiar-enganxar. Aquesta és la manera formal de dir, escolta, navegador, Estic utilitzant la versió d'HTML 5, la qual cosa va sortir una mica recentment. És un encanteri màgic que alguns els éssers humans amb un pobre sentit del disseny decidit posar al molt superior de l'arxiu. Tot i que es tracta d'una poc arcà, això és tot designant totes escolta, navegador, aquí ve amb la versió 5 d'HTML. 

La resta del que ha estat amb nosaltres des de fa algun temps, històricament, però ha anat evolucionant, i és Probablement estat rebent una mica més simple. Notar algunes característiques del que he ressaltat. Hi ha aquestes coses amb angle brackets-- del suport esquerre i el suport de la dreta. I notar la simetria aquí. I per simetria, és a dir, igual que jo tenir aquesta etiqueta d'inici aquí o una etiqueta oberta si es vol, aquí tinc una a prop de l'etiqueta o una etiqueta de tancament que és diferents només en la mesura que té aquesta barra al començament de la paraula HTML. I que es pugui imaginar això com jo estava casualment proposant abans, bé, navegador, aquí ve una mica d'HTML. I, al revés, hey, navegador, que és que per a l'inici i el final HTML--. 

Mentrestant, escolta, navegador, aquí ve la capçalera de la meva pàgina. Hey, navegador, això és tot pel cap. Hey, navegador, aquí és el cos de la pàgina. Hey, navegador, això és tot pel cos. I dins d'això és cert text arbitrari per ara. I a l'interior del cap, per la seva banda, és arbitrària, sinó que alguns etiquetats, per així dir-ho, el text que diu, el títol de la meva pàgina serà "Hola, món". Ara, per ara, es pot assumir que els navegadors tenen only-- o, més aviat, les pàgines web tenen només dos parts-- el cap i el cos. I el cap és generalment només de la mateixa manera que la barra de menús, la matèria en realitat només en la part superior. I el cos és el budell de la pàgina, tot en aquest gran rectangle que omple la pantalla. Així que vaig a seguir endavant i fer-ho. Em va a seguir endavant i feu clic a Desa, Desa arxiu. I vaig a estalviar això com hello.html, i jo només vaig a posar-la en el meu escriptori. I vaig a anar endavant i feu clic a Desa. I notice-- al meu Mac menys està cridant a mi. Estàs segur que vols fer això? I vaig a dir, sí, utilitzar HTML. Jo sé millor en aquest cas. I ara vaig a anar al meu escriptori on tinc aquest arxiu sobte. I vaig fer doble clic. I s'adonarà que, per Per defecte, Chrome obert. Això es deu al fet que és el meu navegador per defecte. I que només diu: "hola, món". Però diu "hola, món "en dos llocs. Observi la part superior esquerra. Bastant difícil passar per alt això. És gran i en negreta. I on més fa que sembli a dir, "hola, món"? 

AUDIÈNCIA: La pestanya. 

DAVID J. Malan: Sí, la fitxa en si. Així que quan li vaig dir al cap de la la pàgina és tot fins top-- i de fet aquest és el títol. És només a la pestanya aquí. I puc tirar d'aquesta fitxa a terme de manera que no es confongui. Això és només una única pestanya ara, i de fet veiem "hola, món" aquí i "hola, món" aquí baix. Per tant força senzill. Però també és bastant simple. I, en realitat, el zoom. Puc canviar la mida de la font just per ampliar l'accessibilitat. Però ara farem alguna cosa una mica més interessant. 

Vaig a vaya-- crits, i molt Em retorn al meu arxiu de text. Vaig a tornar al meu arxiu de text, i vaig per canviar això i dir "Hola, Disney World." Desa. I tornar al meu navegador i feu clic a Actualitza. I ara, per descomptat, diu "Disney World". I vaig a enfocar artificialment en tan sols pel que és fàcil de veure. Així que ara, per desgràcia, que tipus de desig A-- realitat, aquesta és una característica de Mac. Vull fer clic a Disney World i anar a un lloc com disney.com, però això no funciona. Pel que un principi bàsic de la web és hipervincles, enllaços que van en un altre lloc. Llavors, com ho faig? Bé, podria simplement dir, "Hola, http://www.disney.com." Desa aquesta. Recarregar. Però això també, no es pot fer clic. I el que és agradable aquí, tot i que això encara no és funcional, és que sembla que la navegador, literalment, només ho fa el que li dic que faci. Així que si acabo d'escriure una adreça URL com aquesta, només va a mostrar-me la URL. Necessito utilitzar etiquetes o marques idioma per explicar realitat el navegador per fer encara més. Així que seguiré endavant i Eliminar això per un moment. I vaig a dir, escolta, explorador, iniciï una àncora aquí, un enllaç per així dir-ho. I la hiper-referència, el destí d'aquest ancoratge, hauria de ser aquest URL. I noti meves cites. Podria fer servir cometes simples, també, però cal ser coherent, i es en general només ha d'utilitzar cometes dobles que sigui senzill. Noto que vaig a tancar l'etiqueta. I llavors aquí vaig a dir, "Disney World". I ara necessito una mica de symmetry-- claudàtor obert, / a, suport tancat. 

Llavors, què he introduït? Hem tingut algunes etiquetes ja. HTML, cap, títol, el cos, són totes les etiquetes, per així dir-ho, amb els seus homòlegs oberts i tancats. Però avís, això és una espècie de fonamentalment diferent. Això és el que anomenarem en HTML un atribut. I és un atribut només un parell clau-valor. Això és una cosa comuna en parell clau-valor Ciències- equip. És una espècie de l'eina de treball. Una clau i un valor. Paraules i una mica més una altra paraula o paraules. I en aquest cas, la clau és href, i el valor és l'URL completa. I el que és un atribut que fa influeix en el comportament d'una etiqueta. I en aquest cas, hem d'influir el comportament de l'etiqueta d'ancoratge, perquè hem de ancorar aquest enllaç a algun lloc. I com es fa això és per mitjà de l'atribut. 

Així que seguiré endavant i guardar el fitxer. Tornar al meu navegador i recàrrega. I, voilà, ara tenim la començaments d'una pàgina web legítim. -Super Simple, però si hi ha sobre esto-- avís a la cantonada inferior esquerra, És súper petit. Però ho fa veure www.disney.com. I si faig clic, de fet, aquesta Em bat lluny a disney.com. Ara, el curiós aquí és que no és la millor-- l'URL més comercial, però això està bé perquè aquesta imatge no ho fa existir a la World Wide Web. Existeix com un arxiu local en aparença Els meus usuaris directory-- / jharvard-- per a John Harvard-- / escriptori. Però té un URL. Que només passa a ser local. Malauradament, cap de vosaltres pot visitar això, perquè si escriu aquesta URL, que estaria dient al seu navegador, buscar un arxiu anomenat hello.html en el seu disc dur. I, per descomptat, llevat que hi hagi estat seguint de forma manual, que no va a existir allà. 

Així que això està bé. Encara tenim una forma, en última instància, per obtenir aquest arxiu a la web, però anem a esmicolar un parell de implicacions de seguretat del que acabem de serra i lligar-lo de nou a l'anterior la discussió d'aquest matí. Resulta que, si una navegador, literalment, només fa el que li dic que ho faci, i sembla ser el cas que una etiqueta d'ancoratge és influït pel valor de aquest atribut anomenat href però mostra aquest text, això semblaria donar a entendre que podria posar la URL en tots dos llocs i torneu a carregar i ara veure la URL i anar a la URL. Avís, si hi ha sobre la part inferior esquerra, de fet vaig a disney.com encara. 

Així que si alguna vegada has estat phished-- P-H-I-S-H-I-D- amb un d'aquests correus electrònics falsos com PayPal des del seu banc, és probable que hagi aconseguit l'interior d'enllaços del correu electrònic que vostè està llegint que li indica que feu clic aquí per anar confirmen la contrasenya o confirmar la seva data de naixement social o social o alguna cosa enginyeria que divulga informació. Bé, podria prendre la classe de avantatge d'això, no anava a fer-ho? Podria dir alguna cosa com, www.paypal.com. I en comptes de disney.com, em podria anar a, com, badguy.com. Recarregar. I el fàcil que és per enganyar, especialment un lector no tècnic o una lectura succinta lector de fer clic un enllaç com aquest, que si faig clic it-- En realitat, jo no vull anar badguy.com. No sé el que està realment allà. Així paypal.com, avís, és el que diu que va a, però per descomptat, si miro cap avall súper baix, que és una mica borrosa, però no diu badguy.com. Aquesta és l'única dic en aquest moment que vaig a un lloc equivocat. I quan he dit abans que els bancs realment no hauria encoratjar o entrenar els usuaris fan clic als enllaços, això és només una manifestació de la mateixa. I és així de simple. Ara ets un adversari si es fa alguna cosa com això i tractar d'enganyar un usuari perquè visiti el seu lloc web. Però per ara, seguirem tot net i ordenat. Seguirem endavant i rebobinar aquests canvis. A carregar la pàgina. I torno a disney.com. 

Anem a veure si no podem molestar això a part una mica més. Per tant "hola, Disney World." Vaig a dir aquí baix. Potser vaig a fer una mica d'espai. "Esperem que gaudeixi de la seva estada!" Desa. Recarregar. No és que això no és rea-- el que volia, oi? És a dir, si jo estic tractant meu text presentar com un processador de textos, Què esperava que passaria aquí? Sí, em sento com si hagués ha de ser un salt de línia aquí, així que se sent amb errors d'alguna manera. Però que en realitat és deliberada, perquè igual que abans, el navegador només es va a fer el que digui que faci. No he dit que per trencar les línies. Jo no he dit que es mogui cap avall, fins i tot però, intuïtivament, sento que ho vaig fer. Així que resulta que necessitem una mica més de marge de benefici, i vaig a arreglar això de la següent manera. Vaig a incondicional aquesta primera hola amb el que s'anomena una etiqueta de paràgraf. I després vaig a seguir endavant i embolicar aquesta altra frase en una altra etiqueta de paràgraf, tot i que són els paràgrafs súper curts. Ara vaig a desar. Recarregar. I ara hem de espai, i quin tipus de tenen la semàntica de dos paràgrafs separats. 

Això és tot bé i bo, però seria ser agradable per afegir una foto a aquesta pàgina, així que vaig a anar a buscar Mickey Mouse a Google Imatges. I només per diversió, jo sóc va a prendre aquesta imatge. Vaig a seguir endavant i ara agafar la URL d'aquesta imatge, encara que hi ha diferents maneres de fer això. Per ara, només vaig a copiar la URL. Vaig a tornar a la meva text arxiu, i ho vaig a dir aquí, img src = entre cometes aquesta URL, súper llarga. I llavors la noció d'una la imatge és una mica diferent. En realitat no hi ha noció de partida una imatge i acabant una imatge, com una etiqueta d'inici una etiqueta final. Així que sembla una mica estrany Em semànticament Per a això, tenir una etiqueta de prop la imatge. No és incorrecte. És perfectament correcte, i es va animar, però hi ha notació abreujada. Puc tipus de forma simultània obrir i tancar la mateixa etiqueta, i que va a fer feliç al navegador. Així que és només una mica més succinta de les coses que, conceptualment, realment no fer tenir sentit per iniciar i finalitzar. Ells simplement hi són, o no ho són. 

Així que vaig a guardar aquesta i tornar al meu "hola, món" pàgina i recàrrega. I és una mica fora de control, perquè que la imatge és en realitat una mica gran, però això està bé. Podria canviar la seva mida en un programa. O vostè sap què. Només per demostrar, estic dirà en realitat que l'amplada d'aquesta cosa ha de només serà de 200 píxels, 200 punts. Déjame anar per davant i guardar i tornar a carregar, i ara la pàgina es veu una mica més raonable. Però noti el patró. Bé, he tipus de ensenyat a tots d'HTML, en cert sentit, almenys conceptualment, perquè tot l'HTML és a dir aquests tags-- etiquetes obertes, tancades les etiquetes, i atributs que modificar el seu comportament. I, segons sembla, cada l'etiqueta pot tenir zero o un o dos o més atributs, cadascun el que fa alguna cosa una mica diferent. Ara, com saber el que existeix? Vostè acaba d'escoltar a algú com jo et digui el que existeix, o simplement Google al voltant d'un tutorial en HTML, i el que realment és així de simple. 

En veritat, quan jo era un estudiant universitari Fa anys i va aprendre HTML, un del meu ensenyament de matemàtiques acabem de passar assistents una mica de temps em tutoria per com mitja hora, una hora, i llavors jo estava en el meu camí. Jo estava en el meu camí cap a la fabricació els llocs web més horribles mai, que, segons sembla, no ho he fet Realment progressat més enllà. Però el punt és que, una vegada que es entendre aquestes simples ideas-- si arcà text-- però aquests simples idees de començar un pensament i el tancament d'un pensament, mantenint tot molt ben equilibrat, mirant alguna cosa, la modificació de la comportament d'aquesta etiqueta, que és realment tot que cal fer. I de fet, si ara anem a una mena de google.com-- realitat, anirem a un lloc una mica més razonable-- stanford.edu. I vaig a anar a Veure, Desenvolupador, Mostra la font. És lleig, però notice-- i vaig a zoom en l'avís algunes coses que és familiar ja. Hi ha aquesta aquí, que és un navegador. Aquí ve HTML5. Hi ha HTML. Pel que sembla, hi ha una atribueixo que no ho vaig fer que especifica l'ús idioma de la pàgina, i això pot ajudar amb canvi automàtic traducció i coses per l'estil. Aquí està el cap de la pàgina. Així és el títol de la pàgina de Stanford. Hi ha una etiqueta que no ho vaig fer parlar yet-- etiqueta Meta. És només una mena de informació d'antecedents. Ajuda amb SEO, o Optimització del Motor de Cerca, o els resultats de cerca de Google o similars. Però si seguim mirant, mantingui mira, aquí hi ha el cos de l'etiqueta. I hi ha raïms d'una altra etiquetes que no han parlat encara. Però Div és un per a una la divisió de la pàgina. És com un rectangle invisible si vols tipus de mental dividir la pàgina en diferents unitats de línia. I després un munt de divs I veure, una cosa que es diu la classe, però anem a tornar a això. 

Això és Forms interesting--. Els formularis estan en tot el web. Qualsevol quadre de recerca que està Ha usat alguna vegada és una forma. I, llavors, anem a veure realment. Formulari. Acció. L'acció d'aquesta forma, per qualsevol raons històriques, és que l'URL. Mètode és "post". Resulta que les sol·licituds HTTP poden utilitzar el verb "obtenir", com hem vist abans, o "post". I va a veure una diferència d'això en un moment. Anem a veure en realitat el que és això. Permetin-me tornar a la pàgina de Stanford. Quina forma estan parlant sobre, què et sembla? El que salta a la vista? 

AUDIÈNCIA: quadre de cerca. 

DAVID J. Malan: Sí. Així que a la part superior dreta aquí és la següent caixa de cerca. I així és com es va implementar un it-- etiqueta que literalment forma parèntesi obert. I després anem a buscar alguna cosa. Anem a buscar un company mine-- de "Nick Parlant". Enter. I, per descomptat, va anar a un URL lleugerament diferent. Déjame tornar aquí. Buscarem "cursos". Maleït sigui. Vam anar a un URL diferent. Així, Stanford de l'addició d'una mica de màgia que no estan portant-me a la URL que vam veure al acció atribut allà. Però aquesta forma es porta a terme aquí purament a través d'aquest marcat aquí, aquestes etiquetes. De fet, aquí hi ha l'entrada per el tipus de recerca que desitja. Aquí està l'entrada per un altre tipus de cerca. Aquí és l'entrada per la mateixa cadena. I pel que l'objectiu no és embolicar la nostra ment al voltant de totes aquestes etiquetes però només per veure. És només obrir i tancar etiquetes i mirant les coses. Sí? Victòria? 

AUDIÈNCIA: [inaudible] DAVID J. Malan: Aquesta és una bona pregunta. Això és una mica més difícil de veure. Permetin-me tornar a aquest pregunta en tan sols uns minuts quan ens fixem en alguna cosa que es diu fulles CSS, o d'estil en cascada, i podem tractar d'inferir tant des de la pàgina. Així que si ara fer una ullada a google.com, anem a veure el que la seva pàgina es sembla. Es podria they're-- això és bonic avui. D'ACORD. Tot fet. Molt bé, així Mostra la font. Es podria pensar que Google té codi font molt agradable. Així que, segons sembla, el que està passant aquí? I de fet, això no és encara HTML. Això és una cosa que es diu JavaScript. I continuarem anant i venint. Ni tan sols sé on comença la pàgina. Vaig a utilitzar Command M, oberta HTML suport. Molt bé, aquí està. Em va semblar que l'inici de la pàgina, i hi ha tant coses aquí. 

El que realment està passant? Bé, ja saps el que, podem netejar això. Si en lloc d'anar a aquest Inspeccionar barra d'eines, aquesta eina de diagnòstic especial, i anar no a xarxa, on seguim cap al dia d'avui, però si vaig als elements, el que és realment agradable és que un navegador té molt molt millors ulls que jo. I el navegador pot llegir que embolic d'una pàgina web, que el correu HTML que acabem mirat, i pot analitzar o llegir i analitzar-la i tornar a donar-li format d'una manera agradable d'usar humà. Així que el que estic veient ara en aquesta pantalla aquí En Elements, exactament el mateix contingut, però han sagnia tot, que han colorized, però que és exactament el mateix text que he descarregat des del servidor. 

I el que és agradable ara és que puc veure en el cos, per a la notificació instance--, La pàgina encara es compon de només un cap i un cos, i puc bussejar jeràrquicament aquí. Recordeu que Google sembla tenir divs-- a aquest i aquest. Puc ampliar això. Hi ha un munt d'altres divs. Així que és una mica més complexa. Però espera. Això sembla molt més llegible, relativament, que això. Per què és Google compromesa si només enviant aquest gran embolic de codi d'algunes tipus que acabem d'implementar alguna cosa que sembla tan simple a primera vista? Igual que, per què no afegir més espais? Per què no es premi Enter com ho vaig fer? Mira que bé que estava en l'escriptura d'una pàgina web. Jo cop entra de manera diligent. Jo amb sangria així que tot que és molt bonica i fàcil de llegir. Per què Google no practica la mateixa? 

AUDIÈNCIA: [inaudible] DAVID J. Malan: Bé. Molt just. No tenen alguna persona a Google manualment l'actualització de la pàgina d'inici més. No és 1.999 més. Així que tenen el programari. Tenen altres eines que generar dinàmicament són HTML. Per descomptat, que el codi en si va ser escrit pels éssers humans, però la realitat és, que és bastant just dir, el navegador certament no fa importa com és brut és el codi. Però hi ha una encara més raó tècnica convincent que Google distribueix la seva HTML codi en un descuidat per exemple, aparentment manera aclaparadora tot això inclòs en conjunt amb molt poc molt poc manera- en el camí de format, com ho vaig fer. 

AUDIÈNCIA: [inaudible] 

DAVID J. Malan: més ràpid? Per què? I el que has dit, Lydia? Més ràpid? Per què més ràpid? AUDIÈNCIA: [inaudible] DAVID J. Malan: Hi ha no hi ha espai per a llegir. Sí. Així que pensar en el que és un espai. Pel que cada caràcter en el teclat presa una certa quantitat d'espai per a representar, ja sigui física, igual que ocupa molt espai, o d'alguna manera per sota de la campana, que requereix memòria. I com un aside-- i anem a parlar més sobre aquest tomorrow-- cada caràcter en el teclat normalment requereix 8 bits, o un byte. Així que un patró de 8 zeros o estimats, o només 1 byte, com hem els éssers humans diria normalment. Així que és petita, però encara és diferent de zero. És encara una certa quantitat d'espai. Així que si un enginyer o Google colpeja la barra d'espai una vegada, i suposem Google, sinó super-popular- Suposem que un mil milions de persones visiti la seva pàgina d'inici un dia, o algun nombre de persones visitar la pàgina principal d'una mil milions de vegades al dia, quants bytes addicionals que té enginyer de programari de Google només costen per colpejar al seu barra d'espai un cop? 

AUDIÈNCIA: [inaudible] DAVID J. Malan: No és tan dolent. A només una vegades byte de mil milions. així A-- PÚBLIC: 8 milions de gigabytes. DAVID J. Malan: No 8000000000. 8 mil milions de bytes. Però 1 gigabyte. 1 gigabyte seria la unitat de mesura. Si ell o ella fa dos espais, 2 gigabytes. Tres gigabytes. Dret? Es escala costosament. I així, en casos com Google, el qual, és cert, són casos extrems, hi ha altres qüestions que sorgeixen just prenent decisions molt raonables o prendre les accions humanes molt simples, perquè té aquest efecte magnificat. Així que una de les raons això es veu tan comprimida és exactament com Victòria said-- era simplement generat pels ordinadors de totes maneres. Així que no és gran cosa. Deixeu que el navegador a resoldre-ho. Però també deliberadament no té molt d'espai, a causa que l'espai no és necessari. I l'espai de realitat costa diners. 

És ben costa temps, perquè just per empènyer que molts més dades de cada La seu de google.com només ha de prendre una certa quantitat de temps, fins i tot si es tracta de mil·lisegons o microsegons, sinó que se suma més del que molts usuaris, o més probablement, és probable que costa diners. Google probablement es connecta a una altra persona al món, un dels que mira de fit a fit punts, i si tenen algun tipus de relació financera per la qual cosa els costos de les seves dades diners, doncs que ho facin reduir al mínim la quantitat de dades que estan escopint a seva connexió a Internet. 

Així que el més divertit, però, en última instància, o potser el més tranquil·litzador, és que tot i que això sembla terriblement aclaparadora, al final de la dia, segueix sent els mateixos principis exactes com aquesta pàgina molt simple aquí d'un HTML pàgina. Així que per resumir i perquè tenir una versió canònica si no fossis seguint al llarg d'elecció aquí, aquí podria ser la més simple de les pàgines web, així que alguna cosa per jugar amb potser més endavant. 

Bé, anem a introduir una parell d'altres idees ara. Estem a punt d'introduir cosa que es diu una etiqueta d'estil. Podem estilitzar aquesta pàgina en formes més interessants. Així, mentre correu electrònic HTML es tracta de marcar les dades, tipus d'especificació a una navegador com estructurar les dades, on posar-ho, CSS o els fulls d'estil en cascada, és una segona llengua que aconsegueix generalment barrejats amb HTML com anem a veure-- però podem netejar que fins a en un moment-- que pren que l'última milla, i s'estilitza ella. Es posa els colors tot just a la dreta, la mida de la font just a la dreta, el posicionament just. És tot sobre l'estètica o el format, no es tracta de les dades fonamental en si. I la manera més fàcil per mostrar aquest és potser l'exemple. Així que vaig a anar al meu arxiu de text senzill. I en un moment, em quedo ens guiarà pel procés de fer això per nosaltres mateixos. 

Vaig a tornar al meu arxiu aquí i tornar a carregar la pàgina per confirmar el que sembla. Aquí és on som ara. Sento que els nens gaudirien tenir una mica de color a aquesta pàgina web. Així que vaig a pujar aquí a la capçalera de la pàgina. I jo faré l'estil, / estil. I després dins d'aquesta, vaig per dir-li al cos de la meva page-- i aquest format és, per primer cop d'ull, potser una mica estrany, però convencional. Vaig a dir que el fons color d'aquesta pàgina ha de ser de color verd. I això és, per desgràcia tipus de disseny no és el millor. Recordeu que amb anterioritat en el món de HTML, Li vaig dir que els atributs són aquests parells de valors clau. Una cosa és igual a la cita Fi de la cita "alguna cosa". En el món de CSS, que era dissenyada per algunes persones diferents, van decidir que, si món, parells de valors clau seria la paraula de còlon alguna cosa. Així que és la mateixa idea, però. S'associa un valor amb alguna clau que d'alguna manera influeix en el comportament d'aquesta pàgina. 

I que és fàcil endevinar. Què és això probablement va de fer, fins i tot si vostè mai ha vist HTML o CSS abans? AUDIÈNCIA: Canviar el color de fons. DAVID J. Malan: Sí, canviar el color de fons. I específicament el color de fons del cos. Però en la mesura en la cos per ara és la web page-- que és l'única cosa per sota de la barra de títol realmente-- que probablement va a influir en el mateix. Així que anem a veure. Anem a guardar això. Quin aquí i tornar a carregar. És bastant horrible. I el que està passant aquí és un efecte secundari. Acabo de triar aquesta imatge a l'atzar. Per què el no verds impregnant darrere de Mickey? AUDIÈNCIA: [inaudible] DAVID J. Malan: Exactament. Doncs resulta que les imatges, bastant tant totes les imatges que podríem fer servir, són tots rectangles-- de rectangles. Fins i tot si Mickey té alguns revolts per a si mateix i té un fons, que el fons ha de ser alguna cosa. Ha de ser de color blanc. Ha de ser negre o alguna altra cosa. Pot ser transparent. I, de fet, podria obrir Mickey Mouse aquí en un programa anomenat Photoshop o alguna cosa semblant i canviar tot això blanca fons a transparent, per la qual cosa el verd brilli a través. Però això és una cosa que necessitaria a demanar de mi mateix o un artista gràfic o un dissenyador en el meu companyia, per exemple, fer, sobretot perquè acabo prestat aquest d'internet. Però això és per què passa això. 

Llavors, què més podríem desitjar fer? Doncs bé, el que es vol dir que Realment esperem que gaudeixi de la seva estada. I per donar èmfasi, vull per fer d'aquest fort, i pel que vaig a dir oberta i forta tancar fort i torneu a carregar. I és una mica difícil per veure al projector però potser realment ara salta a una mica més. El que pot afegir cursiva en aquest Així, davant negreta d'aquesta manera. Podríem canviar els colors. De fet, només per diversió, jo sóc seguirà endavant i fer això. Realment no m'agrada la forma en què el meu paràgrafs són tan a prop junts, pel que podria fer alguna cosa com això. Vaig a dir-li al navegador, canviar cada etiqueta de paràgraf per tenir, anem a dir-- realitat, saps què, anem a alinear es text-align, centre. I de nou, sé que això només es perquè algú m'ho va ensenyar o que ho vaig buscar en una referència en línia. Així que em deixa guardar això. I, ah, ara tinc centrada en la imatge allà. I en realitat, saps què, si Moc la imatge en un paràgraf tag-- de manera que un tercer paràgraf, tot i que no és de text. Guardem l'arxiu i tornar a carregar. Ara la pàgina està començant a veure espècie de-- És a dir, segueix sent bastant lleig, però almenys sembla que vaig passar dos minuts en lloc d'un minut i pel que és. 

I així, de forma incremental, podem fer aquests canvis estètics ara a la pàgina? Realment no he canviat les dades en el pàgina que no és l'addició de la paraula de veritat. He afegit metadades, si es vol. Hey, navegador, fan que el paraula "realment" en negreta. No obstant això, les dades no és fort. Això és metadades. Les dades són "realment". Així que encara tenim alguns els mateixos conceptes com abans. Bé, és clar, això no és a la web, així que vaig a fer un pas final aquí. 

Vaig a anar a hello.html i acaba de seleccionar i copiar això. I ara vaig a entrar a Cloud9, que Vaig a caminar a través d'un moment. I les probabilitats són que aviat serà, si no ho ha fet, en una pantalla com aquesta. I permetin-me donar-li una ràpida Cloud9 recorregut del que realment és. Així que de nou Cloud 9 és aquest servei basat en el núvol i que em dóna la il·lusió de tenir la nostra pròpia màquina virtual en el núvol, tècnicament un contenidor en el núvol, que tenim plena privilegis administratius a. Per tant, en teoria, ningú una altra part del món té l'accés a la pantalla estic mirant en aquest moment, excepte potser les persones que dirigeix ​​el lloc, perquè tècnicament tenen l'accés físic i així successivament. 

Llavors, què és el que veiem en aquest entorn? Vaig a allunyar, perquè és una mica petita. I permetin-me assenyalar llarg aquí només per un moment. A la banda esquerra de la meva i la seva la pantalla, hi ha un explorador d'arxius de l'esquerra. Així similar en esperit per a Mac OS i Windows. Aquests són tots de la arxius al meu compte. I per defecte, si el seu compte és com la meva, veurà o poc veus holamundo.html i readme.md. Per aquí a la dreta, és a dir on els meus arxius de text es van a anar. Si alguna vegada has utilitzat Microsoft Word o el Bloc de notes o TextEdit, aquest és el meu paraula d'edició d'arxius que se n'anirà. I llavors el més arcà característica d'aquest entorn que no utilitzarem realment necessita és aquí es diu una finestra de terminal. Si ha utilitzat des de DOS antany, aquest és el Linux o l'equivalent per a Linux de DOS. És un interface-- basat en text no hi ha clics del ratolí, sense arrossegament. Tot el que pots fer és escriure ordres, però aquests comandaments pot crear arxius, moure arxius, obert directoris, prop de directoris, fer qualsevol nombre de coses. Però per ara, només tindrem passar el temps aquí. 

I així anem a fer això. Si estàs en aquesta medi ambient, que ha de ser si ha creat un espai de treball ja, seguir endavant i només ha d'anar fins a Arxiu, Nou per un moment. I això li donarà un nou pestanya dreta aquí al mig. I sol-- i de deixar seguir endavant i fer-ho. Seguirem endavant i ara no Arxiu, Guardar i seguir endavant i cridar hello.html, No s'ha de confondre amb holamundo.html, que va arribar amb la seva nova compte gratuït, que és simplement un arxiu d'exemple. Veureu que apareixen de cop i volta, més probable en el costat de l'esquerra, i la fitxa seguirà sent oberta. I deixa que et animo ara per recrear aquesta imatge o algunes variants dels mateixos. I si no pot veure-ho del tot en el pantalla, és idèntic a les diapositives que és probable que tingui en una altra pestanya. 

Així que en resum, fer la seva primera pàgina web, guardar-lo i, a continuació, en un moment, Vaig a mostrar com es en realitat pot veure això. Però canviar almenys una cosa. Canviar a HolaMon mica de la seva pròpia elecció, pel que està convençut que és el seu presentar i no la acabo de crear. Tot bé. I quan hagi cap llista-- rush-- quan estigui llest, seguir endavant i guardar l'arxiu una vegada que hagi realitzat aquests canvis. I si fa clic al botó fins a executar la part superior, aquesta ha d'obrir una nova pestanya que li dirà el URL es pot visitar l'arxiu en, però pot ser que prengui un moment per entre cometes "iniciar Apache", que és el nom del servidor web. Així que vagi amb compte de fer exactament el que està a l'arxiu, en última instància. Així que ara mateix, vaig a apropar. Si començo a escriure -Corchete Obert HTML, previ avís m'està incitant a acabar el meu pensament. I si he acabat el meu pensament, Em fa automàticament l'etiqueta de tancament. Però l'expectativa és llavors em va a colpejar Entrar i, a continuació, passar l'interior hi ha i no dins del cap i llavors que faig a l'interior del cos. I és una mica estrany al principi, perquè està fent un treball per a vostè, però s'adonen que en última instància que li estalvia pulsacions de tecles. I de fet, una característica molt comuna de entorns de programació d'aquests dies tant per al desenvolupament web com això i programació real, de la qual parlarem al matí, Són aquestes característiques d'auto-completat, coses que simplement permeten una programador o un dissenyador per escriure menys pulsacions a aconseguir la mateixa cosa. De vegades és bo, però. A vegades és només una molèstia. I, de nou, una vegada que hagi transcrit la corredora o alguna variant de la mateixa, pot fer clic al botó Executar sobre de la tapa. I després, a la part inferior finestra, se li informarà en quina URL es pot visitar la seva pàgina web. La meva, per exemple, està en business-daharvard.c9users.io i així successivament. Molt bé, així, deixar que me-- alguna pregunta? Qualsevol altra pregunta sobre aconseguir just aquest treball abans d'afegir característiques? I permetin-me proposar, just per aconseguir que la gent comfortable-- perquè una cosa és simplement copiar i enganxar cegament el que he fet. Però només perquè la gent lluiten amb almenys una tasca pendent, Vaig a encendre una mica de música. Vaig a proposar una llista de coses que potencialment pot afegir. I que sens dubte pot utilitzar Google. ¿I per què no ens Proposem que intenta resoldre almenys un determinat problema aquí. Així que en termes d'etiquetes, permetin-me tornar a utilitzar aquest aquí. 

En realitat, deixin-me posar en una forma de text. Diguem que entre les etiquetes que podríem utilitzar aquí hi ha algunes etiquetes aquí. Hem vist l'etiqueta de paràgraf. Ara es va a acte-completar. etiqueta de paràgraf, l'etiqueta d'ancoratge. Diguem que vostè vol fer alguna cosa més gran, pel que podria com- l'etiqueta span pot ajudar. Bé, és possible que necessiti una mica d'ajuda perquè, en un moment. Hem vist div. Veuràs que hi ha taula. Hi ha una cosa que es diu tr, td. Th, td. Tornar a això en un moment. Quina altra cosa podria ser útil? Hi ha forts. Hi ha èmfasi, o més aviat em. There's-- què més pot ser que li ve de gust aquí? Bé, anem a fer una mira que en el seu conjunt. Forma, que hem vist. No hi ha manera. Hi ha entrada i alguns altres. Molt bé, així que anem a fer això. Per respondre a una Victòria pregunta, em va deixar entrar primer només assegureu-vos que tothom està capaç d'aconseguir el seu treball hola. A continuació presentaré un parell d'altres idees. A continuació, anem a deixar que la gent a resoldre algun problema pel seu compte. A continuació, anem a realment tornar a la noció d'una forma, i anem a tornar a implementar en realitat junts la interfície per a l'usuari, per així dir-ho, pel mateix Google. Utilitzarem Google com a la part de darrere i deixem ells fan el treball dur, la recerca, però anem a recrear l'extrem davanter de Google i el formulari de cerca que tenen en la seva pròpia pàgina. I així anem a tornar a aquestes etiquetes en un moment. 

Així que això era el que jo proposta fa un moment. Podem afegir l'estilització a una pàgina dins d'aquesta etiqueta d'estil, i podem estilitzar el fons el color, l'alineació del text, ja sigui central o cap a l'esquerra o la dreta. Però molt ràpidament que ho faria trobar o un dissenyador de pàgines web es veurà que aquesta es torna una mica difícil de manejar, perquè estàs fent el que cal anomenada barreja de contingut amb la presentació dels mateixos. Que va a barrejar les seves dades i l'estètica de la mateixa. I de fet, si es té en compte el que succeirà amb el temps-- aquesta és una molt petita pàgina web, és clar. Però si afegeixo contingut a aquesta pàgina i afegeixo estil a aquesta pàgina, la pàgina es posa molt ràpidament més i més i més. I suposem que jo vull tenir una segona pàgina web que comparteix alguns d'aquests atributs. Suposem que la meva pàgina web per el meu segon site-- també, vull centre de tot, i jo també vull tot amb un fons verd. Estic més o menys haurà de copiar i enganxar algunes d'aquestes línies en aquest segon arxiu, que se sent bé. Es va a resoldre el problema. 

Però el que si vull una tercera pàgina o una pàgina o una pàgina 30 de 40 º? Ara vaig a ser copiat i enganxar una gran quantitat de codi duplicat en diversos arxius. I així suposar que Decideixo o m'han dit, Ei, no estem utilitzant una fons verd més. Anem a començar a utilitzar taronja. Què cal canviar? Bé, vostè ha de canviar aquest estil de verd a taronja a la forma en molts llocs? Com 30 o 40 places. És tediós. És propens a error. Hi ha una sèrie de raons en el qual no vol induir aquest tipus de dolor per si mateix. I així, no seria agradable si podíem prendre el que acabo posar entre aquests dos grogues etiquetes, aquestes etiquetes d'estil, factoritzar-lo a terme, i posar tot de la meva estilització en un arxiu central que tots els 30 o 40 dels meus altres arxius prestat d'alguna manera o de referència, no molt diferent de la creació de xarxes diagrames que fèiem abans? 

Així que si entro aquí, estic va a proposar en realitat qual se substitueix la etiqueta d'estil amb una mica crida l'etiqueta d'enllaç, el qual és horrible, horrible anomenat, perquè no s'utilitza el etiqueta d'enllaç per crear el Sabem que els éssers humans com un enllaç en una pàgina web. Per a això, s'utilitza la qual l'etiqueta? Com es crea un enllaç a una pàgina web? AUDIÈNCIA: La a. DAVID J. Malan: La una o ancoratge etiqueta, que va anar a Disney abans. L'etiqueta d'enllaç aquí està dient esto-- enllaç a un arxiu anomenat styles.css, la relació a la qual serà que és el meu estil. Així que aquest és un dels de S a els fulls d'estil en cascada CSS--. Estil sheet-- dues de la dècada de S en CSS. En cascada de fulles d'estil. Això només vol dir, bé, navegador, anar styles.css troba al servidor local i utilitzar-lo com el seu full d'estil, el que significa dins d'aquest arxiu serà la totalitat de la estilitzacions que acabem de fet. I així el que aquest arxiu podria ser com és aquesta. I només vaig a fer això és un ràpid exemple, pel fet que no cal per obtenir massa en les males herbes aquí. Però si copio això, el que estic proposant és que un programador crear un nou arxiu, enganxar en aquells lines-- whoops-- enganxar en aquestes línies, guardar-lo com styles.css i, a continuació, en l'altre arxiu, eliminar tot això i torni a posar en el seu lloc amb aquesta etiqueta d'enllaç. Així que si em enllaç href = "styles.css", la relació serà "estil" el codi de tancament. Guarda-ho. Tornar al meu HolaMon. Recarregar. 

Literalment no ha passat res. Això és una bona cosa, perquè significa en realitat és tot treball. Per provar tant, suposo que faig una error tipogràfic, i això ho dic "styles.css" amb un capital S, que és incorrecte i, a continuació, tornar a carregar. Ara es pot veure que simplement no funciona. Ara, per què? Bé, anem a utilitzar una tècnica d'abans. Déjame anar endavant i, en meu navegador, a Chrome, estic va a obrir aquest especial pestanya de xarxa com abans, i deixa que torni a carregar la pàgina. El que no et sorprèn veure ara? O potser vostè és sorprès al veure-ho. De qualsevol manera, què veus ara? AUDIÈNCIA: [inaudible] DAVID J. Malan: No ha trobat. Per què no es va trobar? Així mateix, el capital Styles.css-- S- no existeix. Jo mal anomenada ella. simple error tipogràfic. Però m'estic comprensiblement ara 404, perquè el servidor està dient, hey, no ha trobat. Literalment, no sé on aquest arxiu és. Així, com a resultat, el navegador et mostra el que pot, el contingut en brut de la pàgina, el qual era un 200, el codi HTML, però l'estilització no pot s'afegeix després d'això. I això és el que es vol dir amb cascada. Pot espècie d'agregar després, i quin tipus de refina l'estètica de la pàgina web. I fins i tot es pot anul·lar els però, els estils amb altres arxius de fulls d'estil si vols. No ha trobat, però, en aquest cas, perquè, per descomptat, que mal anomenada ella. Així que hauria de arreglar això primer. 

Així que seguirem endavant i proposar la següent. Seguirem endavant i fer això. A partir d'potser HolaMon seu arxiu, em van deixar de convidar a una parella de presentar suggeriments. Així, Victòria, que volia fer una mica de text més gran, oi? Molt bé, així que pot no fer el text més gran. I anem a arrencar cadascun només un problema a resoldre. Fer text més gran. Jo no em vaig a molestar escriure això quan comptar amb tecnologia de bala per aquí. Així alguns problemes. Així que anem a tractar per fer el text més gran. Tot bé. Quina altra cosa podria proposar a algú? Què més podríem volem de fer en una pàgina web? Anem a arribar a una llista curta de coses i després delegar en el grup per resoldre això. 

AUDIÈNCIA: [inaudible] 

DAVID J. Malan: OK, text de la posició en diferents costats de la pàgina? Tot bé. Alguna cosa més. 

AUDIÈNCIA: [inaudible] DAVID J. Malan: Es. Pel que un gif és només una format de fitxer diferent. Que la utilitzem, el que, un png o jpg, probablement? Es va utilitzar un jpg. Si tens curiositat, una excessiva respondre a la seva pregunta és un arxiu JPG s'utilitza generalment per fotografies, ja que suporta milions de colors o color de 24 bits. Un GIF s'utilitza generalment per a, com, memes d'Internet, aquestes animacions days-- gifs animats similars. Però succeeix utilitzar un color més petita paleta, només 256 colors possibles, però dóna suport la transparència i l'animació. I després hi png, que dóna suport transparència i més colors però no animació. Així que és un trade-off. Per afegir un gif, però, seria funcionalment equivalent a afegir un png o jpg. Sí. Font de la imatge és igual. Així que una altra cosa. Anem a arribar a alguna cosa que enviem a Victòria a fer aquí. 

AUDIÈNCIA: Afegeix botons per a un formulari. DAVID J. Malan: OK. Així afegir botons per a un formulari. I farem tot el que un junts. De manera que hi haurà una transició perfecta just després d'aquest desafiament. Alguna cosa més? Què podria fer? El web sent molt decebedor si això és tot el que podem fer. AUDIÈNCIA: Canviar el color del text. DAVID J. Malan: Canviar el què? PÚBLIC: El color del text. DAVID J. Malan: Canviar el color del text. Tot bé. Per tant, anem a fer això. Només una vegada més de manera que vostè no és, simplement de memòria, fent exactament el que estic fent, Vaig a encendre la música per potser cinc minuts aquí. Vostè és benvingut a utilitzar Google. De res per preguntar-me, i Vaig a xiuxiuejar una pista a l'orella. De res mirar sobre les espatlles d'altres. Però resoldre només un d'aquests problemes. Però nosaltres farem l'últim d'ells, el forma un, si poguéssim, junts. Així cinc minuts per resoldre qualsevol d'aquests problemes a través de Google, la intuïció, o qualsevol altres mitjans disponibles per a vostè. 

[MÚSICA] Tot bé. No us preocupeu si vostè vol per mantenir petits ajustos, però vaig a fer malbé un parell d'aquestes respostes. Així que el primer suggeriment de Victòria va ser per fer el text més gran. Així que hi ha un parell de maneres de fer això. Actualment he restaurat la meva pantalla per aquesta grandària, encara que he zoom artificialment només per veure les coses. I anem a fer això. Déjame anar per davant i agafar un text genèric d'Amèrica de manera que només tenim alguna cosa amb què treballar. Així que dóna'm només un moment. Vaig a fer tres paràgrafs. D'ACORD. Aquest serà un millor exemple. Així que per als curiosos, en el meu hello.html, acabo enganxat 3 sense sentit paràgrafs Llatina de manera que només tenim una mica de text per treballar. I la meta de Victòria era fer que alguns dels textos més gran. Així que vaig poder, com abans, aneu aquí. I m'ho dius a mi fer de la manera correcta. Vaig a tenir un vincle etiqueta que apunta a un arxiu anomenat "styles.css," la relació dels quals és nou "estil". I després vaig a salvar el i obrir aquest "styles.css." 

Així que, com abans, tinc el capacitat en aquest arxiu CSS per anul·lar efectivament el valor per defecte estètica d'una pàgina web, i l'estètica predeterminats, per descomptat, són bastant avorrida. És una espècie de mida de font normal, negre text, el fons blanc, i així successivament. Així que suposem que vull fer tot això text més gran. Podria fer algunes coses. En el meu arxiu styles.css, em podria dir, saps què, s'aplicaran el següent a el cos de la pàgina. Seguir endavant i fer el mida de font de 24 punts, que és un nombre que podria utilitzar en Microsoft Word. Déjame tornar a la meva web La pàgina d'aquí i tornar a carregar, i es pot veure que que ja és molt més gran. I podem aconseguir una mica boig, de la mateixa manera que pot en un desktop-- que sigui 96 punts. Recarregar. I cada vegada és una mica difícil de manejar en aquest punt. 

Però podria ser una mica més precís. En lloc d'aplicar aquest full d'estil per al cos de la pàgina, Què més podria jo aplicar-lo a seu lloc, el que una altra etiqueta que encara podria funcionen de la mateixa manera? 

AUDIÈNCIA: L'etiqueta p? DAVID J. Malan: etiqueta P. Així que el cap no seria correcta, perquè el cap, realitat no es pot controlar l'estètica de. Hi ha ja sigui text o no. Però la p tag-- que pot submergir-se en una mica més profund, per dir-ho, en el paràgraf les etiquetes. I tot i que n'hi ha tres, això és perfectament bé, perquè en CSS, quan acabo de dir "p", aquest significa aplicar la següent a qualsevol etiqueta que coincideixi amb aquesta selector, el selector simplement és el nom de l'etiqueta. Així que allà on vegi 01:00 "P", aplicar la mida de la font, i farem que sigui més raonable nou-- 24 punts. I saps què, només per si de cas, farem el color simplement vermella de moment. I ara si torno a carregar, ara ens veure tres paràgrafs lletges. 

Però ara suposem que jo sóc una espècie de-- Vull que el primer paràgraf que salten a la vista de l'usuari. No vull simplement per augmentar la mida de la font de tot. I el que en realitat vull identificar o distingir entre aquests paràgrafs. Així que anem a desfer-nos dels números vermells, perquè això és només una mica de mal gust, i seguirem endavant i fer que el grandària de lletra de 12 punts per defecte, pel que estem de tornada a alguna cosa una mica més raonable. I ara només vull augmentar la mida de la font del primer paràgraf. Puc fer això en uns pocs maneres, però una manera que és potser la majoria d'instrucció en el és moment de fer el següent. Déjame anar per davant i dir, aquest paràgraf té un identificador únic de la "primera". Podria trucar a aquest el que vulgui. Podria anomenar aquesta "foo" o qualsevol altra paraula, però vaig a donar-li una mica Nom semànticament significativa així com "primer". Aquest és l'identificador únic, la identificació, per al meu primer paràgraf. 

El que ara puc fer en el meu full d'estil és ser una mica més precís. En lloc de dir, aplicar el següent a l'etiqueta p, Puc dir el following-- s'aplicarà el següent, o seleccioneu l'element HTML que té un identificador únic de la "primera". Què vull per aplicar-hi? Una mida de font de 24 punts. Així que tinc dos selectors ara. Un fa tot el els paràgrafs 12 punts. Però aquest, sobretot perquè es tracta d' second-- que és l'últim a l'arxiu: això té un efecte en cascada. Jo només he fet tota la meva etiquetes de paràgraf 12 punts, però això ara i cascades preval sobre qualsevol element que per a la pàgina, qualsevol etiqueta de la pàgina el ID únic és, entre cometes "primer". I el hashtag en aquest context només significa "identificador únic". Jo no vaig posar a l'arxiu HTML. Jo, per aquí, només dir entre cometes "primer". 

Així que permetin-me tornar a carregar. I ara veig, ah, OK. És a dir, que no és tan bastant, però és una mica així com el prefaci d'una llibre o alguna cosa per l'estil, on el primer paràgraf és més gran. Podria ser encara més precís amb només les primeres lletres, però almenys He exercit més control. Ara maybe-- potser vulgui fer això de tant en tant per qualsevol raó, i pel que no vull que això aplicar a una sola etiqueta HTML. Més aviat, anem a dir-- anem També fer el següent. Class = "importació". Mentre que un ID s'utilitza per únicament identificar una cosa, una etiqueta, a la seva pàgina web, una classe està destinat a ser utilitzat en qualsevol nombre d'elements o etiquetes a la seva pàgina web. Així que és reutilitzable. Un ID no és reutilitzable. Una classe és reutilitzable. 

I saps què, per qualsevol reasons-- filosòfica No he acabat el meu thought-- diré que el primer paràgraf i el paràgraf segon, són importants. Així que vaig a aplicar la classe anomenada "Important" que, si excepte el meu arxiu i tornar a carregar, no té impacte funcional encara. Però he afegit una mica metadades per l'arxiu, espècie d'alguna cosa separat a partir de les dades bàsiques de l'arxiu, de manera que ara en el meu full d'estil, si en canvi dir ".importante" - vostè sap, tot el que és important, estic va a fer font-color, xarxa-- o més aviat no font-color, sol color. hi ha inconsistències CSS en desgràcia. I tornar a carregar. Ara noti la primera dos paràgrafs són vermells però no la tercera, perquè només aplicat a la classe d ' "important" a les dues primeres d'aquestes coses. 

Així que en els ID, vostè té la capacitat per especificar de manera molt precisa. Amb les classes, té capacitat de reutilització. Però en tots dos casos, el compte mena de principi de bona disseny on eliminat gairebé tot de la l'estètica al meu arxiu styles.css. Així que no hi ha desordre aquí. No hi ha menció de color vermell o negreta orientació o la mida de font en aquest arxiu. Més aviat tinc semànticament, caracteritzat significativa les meves dades com, aquí hi ha algunes dades importants. Heus aquí algunes dades més importants. D'altra banda, aquí hi ha el "Primer" de les meves dades importants. Així HTML té a veure amb una mena d'etiquetatge, literalment, paraules i els paràgrafs i les construccions en el seu Pàgina amb aquests petits consells, si voluntat, que pugui d'alguna manera aprofitar l'ús altres tècniques com el CSS d'aquesta manera. 

Així que en resposta a la pregunta de Victòria, podem engrandir el text d'aquesta manera. Hi ha moltes altres maneres, però la font tag-- parèntesi obert "font" - és en realitat diversos anys d'edat. I aquest és el problema, també, amb confiar només resources-- en línia tendeixen a ser obsoleta. I, en efecte, que ja no utilitza, perquè el món es va adonar, ¿Què significa "font-size = 7"? No és així. I així durant molts anys i que aquest dia-- un dels laterals assenyala aquí és que és en realitat increïblement dolorós encara de vegades per desenvolupar llocs per a la web, perquè Microsoft i Google i Mozilla i altres sovint no estan d'acord quant a com per interpretar una especificació com HTML. 

Hi ha un llibre de regles de HTML que en general, diu el significat de cada etiqueta. Però de vegades es deixa a la discreció d'aplicació, discreció i Google de Microsoft. I pel que tindrà molt sovint veure en una pàgina web una mica es veu diferent en un PC que ho fa en un Mac, i això és realment perquè, al final del dia, no van provar que bé en ambdues plataformes. Però també és degut raonable, les persones intel·ligents no estaran d'acord i les empreses no estan d'acord, i així un dels reptes de la programació per a la xarxa o dissenyar coses per a la web està escrivint el seu lloc web d'una manera que funciona a tots els navegadors web. Però fins i tot això és raonable, oi? Hi ha tantes versions de tants navegadors allà que, en algun moment, també cal fer un judici i vostè ha de decidir com una empresa, especialment per al comerç electrònic d'estil llocs on li tractant d'usar i més nou tecnologies per donar un molt bon usuari experiència. Però un percentatge dels seus usuaris podrien sent l'ús d'Internet Explorer 6 o 7 o 8, especialment en funció de la país que estan venint. 

I així, amb molta freqüència Consultat és una cosa així com "les estadístiques del navegador web." I si anem A-- anem a veure Wikipedia i vegi com fins a la data de la taula es troba si n'hi ha un. Així que aquí es pot veure quan en realitat els navegadors són, segons desembre de 2015, d'acord amb el govern d'Estats Units. Chrome és en la quota de mercat del 42%, seguit per IE en gran mesura en els entorns corporatius o la configuració del PC, per descomptat, seguit per Firefox, a continuació, Safari, Opera i després no ho va fer fer el mapa aquí per alguna raó, i que altres. Potser sigui en Altres. Però més problemàtica que la és-- veurem si també té Wikipedia versions de navegadors versió-- 

Anem a les estadístiques del navegador. IE. Fins i tot això no és suficient. estadístiques de l'examinador. La meva versió. Això no va a estar bé. Vegem versions. quota de mercat dels navegadors. Ja veurem si això surt. D'ACORD. Ara això s'està posant una mica més útil. Així que aquí, adonar-se que tenim tot diferents versions dels navegadors. I, per Déu, si look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. És a dir, els navegadors cada vegada més informat, i, de vegades alguns d'aquests canvis són significatius en termes de funcionalitat. I així, en algun moment, la gerents de producte o dels enginyers necessitarà fer una a decisió que saber què, només l'1% del mercat mundial segueix utilitzant IE 7. Al diable amb ells. Simplement no anem a recolzar aquest navegador. I què vol dir no donar suport? Podria significar que els botons no funcionen a la seva pàgina web, o podria significar la el format és completament apagat. O pot ser que hagi de fer aquesta mateixa qüestió de criteri en els telèfons en aquests dies, en els quals, les quals estem no donarà suport IOS 5 més. Així que les persones només han de actualitzar. O no recolzarem la magdalena en Android OS per a dispositius Android, perquè com el món-- com el món de la tecnologia vol avançar, és com que vol arrossegar el món amb ella de manera que no ho fan ha de seguir sent compatible cap enrere perquè pot oferir noves i bones característiques. Aquest és de fet una de les raons per què tantes empreses estan desplegant actualitzacions automàtiques i tipus de forçament les últimes versions del programari de nosaltres. I fins i tot empreses com Apple va a classificar de que gairebé forçar o obligar que en termes de les forces del mercat per comprar un nou telèfon, ja que només no actualitzarà el seu telèfon antic més. Pel que es perdi en el Els últims i millors característiques, perquè és costós a ells com una companyia mantenir grans, podria dir-se que versions inferiors de programari. No obstant això, l'efecte net és que també patim això també. 

Així que anem a fer una ullada a un parell de coses finals aquí. Anem a cop d'extracció molt ràpid alguns aquestes altres bales, si és curiós. Així que si vostè intentava, per exemple, la posició el text en diferents costats de la pàgina, vaig a fer-ho d'una manera ràpida, però hi ha diferents maneres de fer això. Déjame anar endavant i eliminate-- simplificar aquesta de la següent manera. Permetin-me tornar a la meva , Paràgrafs simples simples. Déjame tornar al meu styles.css. I jo només vaig a utilitzar el simple-- el qual es pot haver vist a Google o trucar des d'abans els he parlat text-align dreta. I tornar a carregar aquesta pàgina. Ara tot sembla per a ser alineat a la dreta, com es pot veure en el cap aquí. 

Podem fer que es vegi una mica més a manera de llibre, i podem dir "justificar" i tornar a carregar. Ara és agradable i quadrat en ambdós costats, la qual cosa és una mica agradable. Un altre dels objectius que teníem aquí va ser el canvi de color del text. Així hem vist que amb el meu text en vermell. I ara afegir botons per a un formulari. Llavors, ¿per què no tractem de fer exactament això? Però primer m'ho dius a mi anar a un lloc que la majoria de nosaltres fem servir cada dia-- Google. I anem a fer una ullada a Google com funciona realment. Però vaig a fer això. Primer m'ho dius a mi fer-ho en-- si, vull anar a Google en primer lloc. Vaig a haver d'anar a Configuració de Google, perquè vull desactivar cosa que es diu resultats immediats. 

Així que vostè pot haver notat en Google days-- aquests permeten que torni i activar aquesta opció. Així que si em poso a buscar per "gats" d'aquest tipus, adonar que no només fer Rebut acte-completar fins cim, tot d'una, la mateixa pàgina sembla canviar bastant ràpidament, així, i això és Google l'ús d'un llenguatge anomenada JavaScript tractant de ser útil. Però, per desgràcia, que tipus desordena de la nostra discussió del que està succeint realment sota de la campana aquí. Així que sóc només una mica de rapidesa desactivar els resultats instantanis. I vaig a fer clic a Desa. I ara vaig a obrir que la barra d'eines de diagnòstic que I mantenir l'obertura sota de la fitxa Xarxa. Així que anem a fer això. Deixi me-- whoops-- desplaçar-se aquesta una mica. I permetin-me recerca de "gats". 

I ara notice-- realitat, aquesta és una bona oportunitat per discutir per un moment. Observi el moment en què type-- aturar-lo. Aturar-lo. D'ACORD. Observi el moment en què escriu la lletra C, veure la part inferior de la pantalla. A-T- S. El que fa la part inferior d'aquesta pantalla, la meva fitxa Xarxa, suggerir que està succeint cada vegada que s'escrigui una carta? Per desgràcia, la granota és molt avui distracció o el trèvol o el que sigui. El que estava succeint cada vegada que he escrit? I permetin-me aclarir la buffer i torni a escriure-la. tan-- crits. Cada vegada que s'escrigui una carta, C- A- T- pel que una nova fila, òbviament, segueix apareixent. Què cadascuna de les files representen, en base al que hem vist i discutit fins ara? AUDIÈNCIA: Una recerca? DAVID J. Malan: Una recerca o més genèricament, una sol·licitud HTTP des del navegador al servidor. Bé, per què és el meu navegador fent un HTTP sol·licitar cada vegada que s'escrigui una carta? 

AUDIÈNCIA: [inaudible] DAVID J. Malan: Sí, es dóna Em aquests resultats d'auto-completat. Igual que, d'on aquests resultats de la recerca vénen? Bé, cada vegada que escrigui una carta, Google envia més i més i més de la paraula que estic escrivint. Per què? Perquè volen donar-me una millor i millor, millor suggeriment, una llista de suggeriments, de manera que la paraula Estic intentant realment completa. Així que això vol dir, literalment, cada personatge que escriviu a Google està sent enviat, en última instància, en gran, però també a vegades un alhora per tal de posar en pràctica aquestes característiques d'auto-completat quan les dades són, per descomptat, a la web. 

Ara, anem a fer una ullada al que en realitat que succeeix quan faig clic a Cerca de Google. I després aprofitarem aquest nosaltres mateixos. Així que si em desplaço cap avall ara a la molt primera sol·licitud que acaba de passar. Observi el següent. Va ser enviat a un temps bastant llarg URL-- https://www.google.com/search? i després un munt de coses. Vegem això en realitat ara a la pestanya del navegador en si. Anem a desfer-nos de la barra d'eines aquí. Aquesta és la pàgina de resultats de cerca. I notin que aquí està la URL. Ara, probablement pot endevinar el que està passant aquí en part. Així, en primer lloc, una definició. Pel que sembla, això és el destí on s'envia el formulari. Per això, quan he escrit en el paraules "gats" i prem Enter, pel que sembla, Google va enviar la meva entrada de text a aquesta URL que He destacat allà, reduir la cerca. Resulta que, en una adreça URL, qualsevol cosa que que ocorre després d'un signe d'interrogació és, a mesura que seguim dient, un parell clau-valor que s'introdueix en el formulari o d'alguna manera transmesa des del navegador al servidor. 

Així que cada vegada que el tipus d'entrada en una forma a la web i s'envia com hem estat discutint, a través d'una trobada, un d'aquests virtual sobres, els continguts d'aquest envelope-- si, mantenir aconseguir farcits físicament en el sobre a la classe avui en dia, però tecnològicament que és en realitat posar a la URL. Així que, de fet, que em tamisar a través d'aquest. On es veu la entrada de l'usuari? On es veu alguna cosa que jo mateix vaig escriure aquí dalt? Sí, de manera que "gats". Dret? Així que permetin-me destil·lar aquest en alguna cosa més simple. Vaig a eliminar tot el relacionat aquesta adreça URL que no entenc, i jo només vaig a deixar com això- / search? q = gats. Veurem on q ve des de molt aviat, però que se sent al mínim quantitat d'informació que he proporcionat. I ara vaig a pressionar Enter. I noti que encara funciona. Encara vam rebre de tornada un munt de gats. Així que Google és més elegant que aquesta en aquests dies. És 2016, no del 1999. Així que hi ha altres coses que el meu el navegador envia al servidor. Però això és mínimament tot el que és necessari. 

Llavors, què està passant? Bé, en primer lloc vull seguir endavant i anar de nou a Cloud9 i em va deixar anar per davant i tancar les pestanyes abans. I vaig a fer això en el meu posseir només per un moment. Vaig a seguir endavant i crear nou arxiu. I vaig a guardar-lo com google.html. I vaig a molt quickly-- Vaig a robar, en realitat, Part d'aquest text només per estalviar temps. Vaig a pegar això aquí. Jo no em vaig a molestar amb qualsevol estilització aquest moment. Anem a trucar a aquesta "El meu Google." I vaig a desfer de tot en el cos. I vaig a fer el següent. Permetin-me Amplia. Formo acció-- i com he esmentat breument abans els vaig parlar breument com em whoops-- es va esmentar anteriorment, l'acció d'una la forma és la que envia les dades a. Així google.com/search. I el mètode que voleu utilitzar pot ser una de dues coses. O bé pot ser "aconseguir", ja que mantenim discutint, o pot ser "post". Per ara, la freqüència fonamental diferència és, si s'utilitza "aconseguir" tota la informació que la Usuari faciliti és enviat a l'adreça URL. 

Això és gran per a coses com la recerca motors i algunes altres aplicacions, però en quines circumstàncies vostè no desitja omplir un formulari i tenir la informació a acabar la URL, com a la barra d'adreces del navegador? Quin tipus de formes de fer usted-- AUDIÈNCIA: [inaudible] DAVID J. Malan: Sí, com què? PÚBLIC: Les contrasenyes. DAVID J. Malan: Sí, pel que es connecti a Facebook o algun lloc web. Aquesta és l'entrada de l'usuari un formulari, un quadre de text, però és probable que no ho vol aparèixer a la URL del navegador. Per què? És a dir, potser hi ha alguna implicacions per a la seguretat de la xarxa, però més-- agradaria, més simplement, si ho seu company de cambra, el seu altre significatiu, seus fills, el seu cònjuge es veu a través del seu historial de navegació? No és el seu dret contrasenya existeix en l'historial del navegador. Que no se sent com un bon disseny. O fins i tot més tècnicament, suposem que vostè està tractant pujar una foto a Flickr o Facebook o wherever-- que és l'entrada de l'usuari, encara que que és una mica més com interesting-- Com puc cram una imatge a la barra d'adreces? D'alguna espècie de no es pot. D'alguna manera es pot. Però, de debò, estic en dificultats imaginar fer això. Així que necessito un altre mètode per la possibilitat de pujar fotos a un lloc web, i que un altre mètode es diu "post". Però per ara, només parlarem de "Feu-vos", que és el més simple dels dos. Simplement posa tota la l'entrada de l'usuari a la URL. 

Així que aquí està la manera que estic creant. Vull una entrada. I saps què? Vaig a prendre una conjectura aquí. Recordaré la meva entrada "q" per "consulta." I crec que això és una de les dissenys originals, tal vegada, a partir de 1999. I a continuació, el tipus d'aquesta entrada és només va a ser "text". I després vaig a tenir una altra entrada que no necessita un nom, com veurem aviat veure, el tipus dels quals és "enviar". I això va a fes-me un botó especial. I ja està. 

Així que permetin-me anar endavant i guardar aquest arxiu. Vaig a tornar al meu navegador i vagi a google.html. Enter. I és una espècie d'escassa per dir el menys. Però m'ho dius a mi anar per davant i la recerca de "gats". I noto que estic actualment en aquesta adreça URL Cloud9. Però el moment en què feu clic en aquest, On s'espera que vaig a acabar? 

AUDIÈNCIA: Google. 

DAVID J. Malan: Google. Així que feu clic a Envia. I, de fet he reimplementat Google. Dret? És més senzill. És més lleuger. És a dir, el meu codi és clarament millor que d'ells, des del desastre en què vam veure anteriorment. I saps què? Vaig a donar-li vida a això una mica. No he esmentat això abans. Hi ha etiquetes com H1, per la rúbrica 1, el títol més important d'una pàgina. "El meu Google," trucaré a això. Permetin-me tornar a carregar. Es veu una mica millor ja. I, en realitat, saps què? Tinc ya-- vaig mentir. Li vaig dir que no anava a llaurar això, però vaig amb l'estil d'aquest com abans. I el meu cos va a ser, diguem, el centre text-align. Es veu més com Google ja. 

Necessito un salt de línia, però, per a aquest botó Envia. I resulta, que pot usar paràgrafs, o pot simplement dir més literalment, dóna'm una línia de ruptura aquí-- l'etiqueta br. I si torno a carregar això, ara es va allà. És una mica lleig, així que podria fer múltiples salts de línia, però no entrarem aquí massa cobdiciós. Així que ara anem a veure si funciona per "gossos." Sembla que funciona per a gossos "," també. Quina és el menjar per emportar convincent aquí? Un-- no va ser un gran salt per a introduir una mica més de les etiquetes, de la mateixa manera que l'etiqueta de formulari a l'etiqueta d'entrada. Però més fonamentalment és a dir, tot el que estem fent està aprofitant la nostra comprensió d'HTTP i el fet que les formes en última instància alteren el que està en l'adreça URL del navegador, i així, per tant, podem mecànicament proporcionar informació a un servidor en fer un formulari HTML i saber que el servidor HTTP entén, Igual que el nostre cos entén, com, agitant la mà, el mateix protocol, i així tornem la resposta que en última instància esperem. 

Així que anem a tractar de fer una L'últim que ara amb el mòbil, i vaig a make-- Vaig a afegir aquest codi per a les diapositives. Així que si voleu retocar, es sens dubte pot prendre des d'allà. Però vaig a anar endavant i fer una cosa. Vaig a seguir endavant i obrir el meu índex de page-- hola la meva pàgina com abans, que té una gran quantitat d'aquest text imitació d'Amèrica, o sense sentit text llatí, i has-- sembla que aquest en aquesta grandària de font. Però m'ho dius a mi seguir endavant i fer això. Vaig a entrar a Cloud9. I vostè no ha de fer aquest pas. Vaig a fer-ho jo mateix. Vaig a fer clic a Comparteix. I aquesta és una característica acaba de Cloud9, amb la qual cosa Puc fer la meva entorn públic. 

I només pel fet de demostració, farem això. Vaig a fer pública la meva sol·licitud. Recordeu que m'està advertint, sóc Jo si vull fer això, perquè això va a fer que tots al món, ja sigui que estiguin aquí ara o veure el vídeo més tard al Internet capaç de veure el que veig. Però això està bé. Vaig a dir "Fet". I deixa que et animo, si ho fes aquest correctly-- m'ho dius a mi provar primer. Vagi per davant, si no mente-- en un navegador al seu ordinador, aneu a aquesta adreça URL, i és d'esperar veurà el meu text llatí. I perquè quedi clar, que és No s'executa en el meu ordinador portàtil. Està en el núvol. Està en Cloud9, literalment, però He fet pública meu espai de treball de manera que qualsevol usuari d'Internet pot accedir a la meva pàgina d'inici Amèrica. 

Anar a la mateixa URL en el seu telèfon, si pogués. Si et costarà, però, pot simplement mirar per sobre d'una espatlla. AUDIÈNCIA: [inaudible] DAVID J. Malan: Ho sento? AUDIÈNCIA: [inaudible] DAVID J. Malan: Només paraules llatines. Això és tot. Però això és el que hauria de veure. 

AUDIÈNCIA: Sí. DAVID J. Malan: Sí. Sí. D'ACORD. Així que puc aguantar el seu telèfon per un moment? Per tant, és d'esperar, si accedeix ella, que ha de ser gairebé il·legible. És still-- vull dir, és il·legibles a causa de Amèrica. Però també és il·legible Per què una altra raó? Igual, el que desagrada al respecte? PÚBLIC: És petit. DAVID J. Malan: És súper, súper petit. Llavors, com podem solucionar aquest problema? És super, super petita al telèfon de Victòria i, si s'ha tirat tu mateix, probablement petita en el seu telèfon, així, llevat que tenen la configuració d'accessibilitat habilitades. Què és això? Es podia pessigar i zoom, que és viable, però llavors només es veu unes poques paraules alhora. Així que esperi un minut. Jo sé com solucionar aquest problema. Dret? Podria utilitzar CSS, i podria canviar el mida de font de 12 punts a 24 punts. Però l'efecte secundari que, per descomptat, va a ser ara, en un sobretaula o un portàtil, Ara el text és dues vegades més gran. I pel que seria la classe de ser agradable per distingir entre els dispositius, i resulta que hi ha són formes de fer això. hi ha diversos diferents maneres, de fet, per la qual cosa l'ús de CSS i les característiques més elegants que no entrarem en gran detall, es pot consultar en essència el navegador i dir, Si la pantalla és més petita que aquesta molts píxels, utilitzen aquesta font. Si la pantalla és més gran que això molts píxels, utilitzen aquesta altra font. 

Pot ser fins i tot encara més elegant. Si alguna vegada has estat en una pàgina web que, en un escriptori, té un gran menú potser fora a la banda, i després tot el contingut és el costat que menú-- que és una espècie d'un paradigma comú. Menú a l'esquerra, el contingut a la dreta, o viceversa. En realitat no treballar al mòbil quan el seu pantalla és només aquesta quantitat de píxels d'ample. Així que més comú en el mòbil és, el seu menú de cop i volta obtindrà col·lapsat, i cal feu clic a un botó per veure-ho, o el lloc web posarà el menú per sobre d'ella i posar el contingut sota d'ella. I es pot posar en pràctica aquests coses en múltiples formes. Vostè pot demanar als seus programadors, Ey, equip, en qualsevol moment veus una sol·licitud HTTP des d'un Android dispositiu, un dispositiu de Microsoft, un Google dispositiu, un dispositiu d'Apple, utilitzeu aquesta mida de la font i l'ús d'aquest disseny del menú, o bé utilitzar el disseny d'aquest defecte més gran. 

Ara, amb la qual tècnica fonamental avui podrien utilitzar els enginyers saber si es tracta d' un iPhone, un telèfon amb Android, un ordinador portàtil, escriptori visitar el servidor de l'empresa? Al que no aconsegueixen que la informació? 

AUDIÈNCIA: Capçalera? 

DAVID J. Malan: Sí, la capçalera HTTP. Així que cada petició HTTP procedent de seus clients als seus servidors incloure, dins d'aquesta virtuals sobre, en el seu conjunt manat de capçaleres HTTP, un dels quals és el navegador i el sistema operatiu fins i tot, si és que vol aquest nivell de detall. Ara, és una cadena d'aspecte críptic, però hi ha un programari que acaba de simplificar això, i només es pot demanar en la programació code-- PHP, Java, C ++, whatever-- quin telèfon és això- quin dispositiu és l'ús d'aquest usuari? I llavors es pot dir, mostrar que aquesta versió de la pàgina web si es tracta d'un telèfon. Mostrar-aquesta versió de la pàgina web si es tracta d'un ordinador portàtil o de sobretaula. Però vostè ni tan sols necessita la complexitat del costat del servidor. Vostè pot fer fins i tot el més simple de les coses. 

Vaig a fer això. Vaig a seguir endavant en Cloud9 meu entorn, i vaig a afegir una etiqueta que va veure a Google abans. Es crida l'metaetiquetes. I mai em acord d'aquest, per la qual Vaig a transcriure aquí. meta name = "viewport" i després content = "width = amplada del dispositiu, intital escala = 1 "i això és tot. 

Pel que bé podria ser com un encanteri màgic. No és del tot clara, però això no té alguna cosa a veure amb el visor, i la vista és només el cos d'una pàgina web, la regió rectangular que defineix la major part de la pàgina. I això és només dient el navegador, saps què? Fer que l'ample d'aquesta pàgina efectivament igual a l'amplada del dispositiu. En altres paraules, no assumeixi que es Té una mena d'espai il·limitat. Suposeu que només té tant espai que el dispositiu en si és gran. I pel que ara, si torno a carregar aquesta en el meu navegador, no veig cap canvi. Però si fes això i correctly-- m'ho dius a mi creuar la meva fingers-- si tot el que recarregar els seus telèfons, oi veure un canvi de pes? Sí, és que-- 

AUDIÈNCIA: [inaudible] DAVID J. Malan: Sí. D'ACORD. Així que sens dubte més fàcil de llegir ara? Encara petit, per ser justos, però no tan petita com per ser immanejable. I no em resultava difícil reemplaçar aquest encara més amb CSS o al costat del servidor, però cada vegada més el que ets veure per més i més característiques s'afegeix a environments-- del costat del client JavaScript, com veurem matí, CSS, i per HTML-- que totes aquestes consultes es pot fer en el client de manera que es molesta a servidor molt menys i no a haver de seguir el ritme, per exemple, l'atac constant de nou del sistema operatiu versions, noves versions de navegadors. Pot deixar que el navegador preguntar al dispositiu, el gran que ets, i després fer alguna cosa lògics decisions en base a això. Però veurem més oportunitats per decisions lògiques demà en el context d'un llenguatge de programació. 

Per tant, qualsevol pregunta, aleshores, en el desenvolupament web? Avui dia no és la programació web, per en si, ja que la majoria tot el que vam fer era molt estètic, si es vol. No hi ha en la presa de decisions el codi que hem escrit, i per això és que l'HTML és un marge de benefici idioma, no és un llenguatge de programació. Però demà anem a prendre una mirada ràpida, en última instància, en JavaScript, que és una programació real el llenguatge que ens permet fer una mica més. 

Qualsevol pregunta? Bé, permetin-me proposar dos oportunitats opcionals per fer la tasca. Una és-- aquests Cloud9 comptes no expirarà. El convidem a utilitzar a jugar amb. És el nivell de servei gratis. Adonar-se que, si en crear el seu espai de treball, es va fer pública, això vol dir que qualsevol persona al Internet pot veure el que estàs escrivint. Així que potser només tenir en compte no avergonyir si vostè està posant la seva primera banda pàgina públicament per aquí per accident, però ningú va a saber per buscar-hi de totes maneres. 

I dos-- deixar-me llanço aquesta URL, així, especialment si vostè va entrar avui una poc menys còmodes que altres, sense saber què vol dir tot això. Adonar-se que molt més d'aquest vídeo, el qual és alhora una bona manera d'agafar el son i també per riure mentre En fer-ho, també té una gran quantitat d'interessants socialment i discussions rellevants per a la seguretat en ella de John Oliver, encara que un comediant. 

Però si no hi ha més preguntes, Això ens porta a la recepció. Llavors, ¿per què no em encenc la música. No ha d'haver begudes i aperitius fora. Estic content de barrejar-se durant el sempre i quan la gent li agradaria, respondre a les preguntes més d'un-a-un. Però, d'altra banda, de res per sortir en qualsevol moment, i ens veurem de nou demà al matí per una mica més. Molt bé, gràcies.