DAVID J. MALAN: EstÃ¡ bien. Estamos de vuelta. Por lo tanto, el objetivo de esta sesiÃ³n final es introducir unos cuantos conceptos sino tambiÃ©n dar a todos la oportunidad para estirar la clase de los dedos y en realidad hacer algo un poco de prÃ¡ctica. El objetivo no es convertir todos nosotros en los desarrolladores web por cualquier medio, pero en realidad sÃ³lo para darle un sabor de algunos de los constructos fundamentales de lo entra en la programaciÃ³n web y hoy Web el desarrollo, por lo que la lado estÃ¡tico de cosas-- sin lÃ³gica, sin necesidad de programaciÃ³n idioma, simplemente el contenido estÃ¡tico. Y nos darÃ¡ una oportunidad para ver realmente lo que es un servidor web, ver lo que es un archivo HTML, ver quÃ© HTTP es en realidad estÃ¡ sirviendo. Pero antes de sumergirse en cualquier retrospectiva preguntas acerca de la computaciÃ³n en nube o la seguridad o cualquier otra cosa? Â¿No? EstÃ¡ bien, bueno, vamos a hacer esto, por si acaso el proceso de inscribirse en algo que lleva unos pocos minutos. Vamos a dejar que lo haga en el fondo. Vaya por delante, si se pudiera, c9.io. a este URL aquÃ­-- Se trata de un tercero clientes-- plataforma como servicio, si Voluntad-- que va a invitar a usted para registrarse en una cuenta, y que va a dar a cada uno de ustedes una cuenta en el llamado nube en la infraestructura de otra persona, una compaÃ±Ã­a llamada Cloud9. Pero lo bueno de esto es que te dan una aproximaciÃ³n de una desarrollo real en el mundo real ambiente, aunque en el nube y en un navegador web, y vamos a utilizar esto en realidad experimentar un poco hoy. Y luego seguir adelante y simplemente navegar su camino hacia el proceso de registro Si tu pudieras. AsÃ­ que nos pasÃ³ a utilizar esto en la clase Doy clases para todos los estudiantes, tanto en el campus y fuera ahora, y es reemplazado lo que histÃ³ricamente era lo contrario de software descargable. AsÃ­ que lo que estaban ganando acceso a es una de las mÃ¡quinas virtuales, en esencia, que he descrito anteriormente. AsÃ­ que esta empresa probablemente Cloud9 rentas procedentes de un tercer hecho Party-- en este caso, Google-- conjunto manojo de mÃ¡quinas virtuales que de alguna manera para arriba en picar la ilusiÃ³n de servidores individuales que cada uno de nosotros tiene un control total sobre. No es exacto decir que son mÃ¡quinas virtuales, sin embargo, porque lo Cloud9 utiliza en realidad es un poco mÃ¡s nueva tecnologÃ­a llama la contenerizaciÃ³n. Y dÃ©jame agarrar esta foto aquÃ­ para pintar este cuadro. 

Un contenedor es, si recuerdan la imagen de antes, un poco mÃ¡s ligero peso que una mÃ¡quina virtual. De hecho, mientras que la Ãºltima vez que hablamos de que hay ser un operativo sistema y un hipervisor y luego el sistema operativo huÃ©sped, invitado sistema operativo, operativo invitado sistema, en la parte superior de su hardware fÃ­sico, la diferencia con este nuevo la tecnologÃ­a, la contenerizaciÃ³n, es que todos ellos comparten alguna manera el mismo sistema operativo. Pero todavÃ­a crean la ilusiÃ³n de todo el mundo aun teniendo su propia y exclusiva derechos administrativos y archivos en el servidor. Pero hay menos en el software entre el usuario y el hardware. El resultado de los cuales es, de teorÃ­a, un mayor rendimiento, porque usted estÃ¡ utilizando o desperdiciar menos recursos en que la llamada capa de virtualizaciÃ³n. AsÃ­ que este se llama contenerizaciÃ³n por naturaleza por medio de una tecnologÃ­a llamada acoplable, que es mucho entrar en su cuenta. Y esto es algo que ingenieros de su empresa podrÃ­a tipo de especie de comenzar a hablar acerca pronto si no lo han hecho ya, aunque ciertamente no hay razÃ³n para saltar sobre cualquier bandwagons. 

AsÃ­ que con eso dicho, lo es probable que ves ahora es una pantalla que se parece un poco a esto. DE ACUERDO. Y sÃ³lo me llaman de nuevo si no. Y si asÃ­ que-- Voy a venir si no. Vaya por delante y haga clic en ese gran ademÃ¡s de crear un espacio de trabajo, y verÃ¡ una pantalla como esta. Puede llamar al Ã¡rea de trabajo nombrar cualquier cosa que desee, por ahora. Y de la misma realidad, por simplicidad, y- ir bien, algunos de ustedes ya tienen espacios de trabajo. Llamar lo que want-- negocio, Harvard, jueves, lo que usted desea. No es necesario una descripciÃ³n. Puede dejarlo privada, a menos que ya tienen un montÃ³n de espacios de trabajo. Si uno se ve obligado a hacerlo pÃºblico, eso estÃ¡ bien para los propÃ³sitos de la actualidad. AquÃ­, tambiÃ©n, es una de las ventas adicionales. Se obtiene un espacio de trabajo privado defecto. Pero si quieres mÃ¡s, usted tiene que pagar mÃ¡s. De lo contrario, te obligan para hacer su trabajo pÃºblico. Pero eso estÃ¡ bien, porque tambiÃ©n apuntar esto en las comunidades de cÃ³digo abierto animar a la gente a En realidad colaborar. 

Y la Ãºltima cosa que es importante, sin embargo, es, despuÃ©s de elegir un nombre y despuÃ©s de su elecciÃ³n privada o pÃºblica, haga clic en HTML 5, el icono naranja grande segundo desde la izquierda, y a continuaciÃ³n, haga clic en Crear espacio de trabajo. Y probablemente lo harÃ¡ tomar un minuto mÃ¡s o menos, pero vas a continuaciÃ³n, tiene una medio ambiente, una vez que se hacer eso, que parece una reminiscencia de lo que tengo en la pantalla aquÃ­ ahora. Pero, de nuevo, puede ser que tome un minuto o mÃ¡s para llegar a esta pantalla una vez que haya hecho clic en Crear espacio de trabajo. Pero sÃ³lo me Indicador sobre si le gustarÃ­a mÃ­ para echar un vistazo a cualquier cosa o asesoramiento. Todo bien. AsÃ­ que voy a este fondo por ahora. LlÃ¡mame sobre si parece tiene alguna dificultad tÃ©cnica. Pero, de nuevo, puede ser que tome una poco para que se abra. Y vamos a seguir adelante y hablar de lo que en realidad significa hacer una pÃ¡gina web, lo que es HTML, y cÃ³mo todo esto Ahora interconecta como estamos empezando utilizar realmente parte de la tecnologÃ­a. AsÃ­ resulta que lo que pueda ir en mi pequeÃ±o Mac aquÃ­, abrir un programa simple llamado EdiciÃ³n de textos, o en Windows que pude abierto algo que se llama el Bloc de notas. Y podrÃ­a simplemente hacer algo asÃ­- "hola, mundo". Y entonces podrÃ­a guardar esto como hola.txt AsÃ­ que hay magia allÃ­. Esto no tiene nada que ver con la Web programaciÃ³n, nada que ver con el lenguaje HTML. SÃ³lo la creaciÃ³n de un archivo de texto simple. Pero resulta que una banda pÃ¡gina es literalmente eso. Es un simple archivo de texto que contiene el texto que podrÃ­a escribir en su teclado, pero tÃ­picamente, pero no siempre No termina en .txt pero .html o .htm. Y no lo hace solo escribir palabras en el archivo. De hecho tienes que usar cosas llamadas etiquetas o, mÃ¡s en general, algo llamado lenguaje de marcas. 

AsÃ­ que voy a escribir muy rÃ¡pidamente y luego explicar lo siguiente. Voy a primera escriba esto, que dice: Hey, navegador, aquÃ­ viene una pÃ¡gina Web escritas en HTML. Y estas dos cosas juntas dicen, oye, navegador, la siguiente es de hecho HTML. Hey, navegador, aquÃ­ viene la cabeza o la parte superior de mi pÃ¡gina. Hey, navegador, en el interior de la parte superior de mi pÃ¡gina, poner un tÃ­tulo que es, "hola, mundo." Hey, navegador, despuÃ©s de que la cabeza de mi pÃ¡gina, aquÃ­ viene el cuerpo de la pÃ¡gina. Y, oye, el navegador, el cuerpo de mi pÃ¡gina tambiÃ©n deberÃ­a decir, "hola mundo". Â¿CuÃ¡les son los detalles mÃ¡s destacados en esta lista? Esto es lo que generalmente llama una declaraciÃ³n de tipo de documento, y, la verdad, que es un poco difÃ­cil de memorizar esto al principio. Usted sÃ³lo tipo de copiar-pegar. Esta es la manera formal de decir, oye, navegador, Estoy utilizando la versiÃ³n de HTML 5, lo cual saliÃ³ un poco recientemente. Es un encantamiento mÃ¡gico que algunos los seres humanos con un pobre sentido del diseÃ±o decidido poner en el muy superior del archivo. A pesar de que se trata de una poco arcano, eso es todo que designa todas oye, navegador, aquÃ­ viene con la versiÃ³n 5 de HTML. 

El resto de lo que ha estado con nosotros desde hace algÃºn tiempo, histÃ³ricamente, pero ha ido evolucionando, y es Probablemente estado recibiendo un poco mÃ¡s simple. Notar algunas caracterÃ­sticas de lo que he resaltado. Hay estas cosas con Ã¡ngulo brackets-- del soporte izquierdo y el soporte de la derecha. Y notar la simetrÃ­a aquÃ­. Y por simetrÃ­a, es decir, al igual que yo tener esta etiqueta de inicio aquÃ­ o una etiqueta abierta si se quiere, aquÃ­ tengo una cerca de la etiqueta o una etiqueta de cierre que es diferentes sÃ³lo en la medida en que tiene esta barra al comienzo de la palabra HTML. Y que se pueda imaginar esto como yo estaba casualmente proponiendo antes, bueno, navegador, aquÃ­ viene algo de HTML. Y, a la inversa, hey, navegador, que es que para el inicio y el final HTML--. 

Mientras tanto, oye, navegador, aquÃ­ viene la cabecera de mi pÃ¡gina. Hey, navegador, eso es todo por la cabeza. Hey, navegador, aquÃ­ es el cuerpo de la pÃ¡gina. Hey, navegador, eso es todo por el cuerpo. Y dentro de eso es cierto texto arbitrario por ahora. Y en el interior de la cabeza, por su parte, es arbitraria, sino que algunos etiquetados, por asÃ­ decirlo, el texto que dice, el tÃ­tulo de mi pÃ¡gina serÃ¡ "Hola, mundo". Ahora, por ahora, se puede asumir que los navegadores tienen only-- o, mÃ¡s bien, las pÃ¡ginas web tienen sÃ³lo dos parts-- la cabeza y el cuerpo. Y la cabeza es generalmente solo al igual que la barra de menÃºs, la materia en realidad sÃ³lo en la parte superior. Y el cuerpo es la tripa de la pÃ¡gina, todo en ese gran rectÃ¡ngulo que llena la pantalla. AsÃ­ que voy a seguir adelante y hacerlo. Me va a seguir adelante y haga clic en Guardar, Guardar archivo. Y voy a ahorrar esto como hello.html, y yo sÃ³lo voy a ponerla en mi escritorio. Y voy a ir adelante y haga clic en Guardar. Y notice-- en mi Mac menos estÃ¡ gritando a mÃ­. Â¿Seguro que quieres hacer esto? Y voy a decir, sÃ­, usar HTML. Yo sÃ© mejor en este caso. Y ahora voy a ir a mi escritorio donde tengo este archivo repente. Y voy hacer doble clic en Ã©l. Y se darÃ¡ cuenta de que, por De forma predeterminada, Chrome abierto. Esto se debe a que es mi navegador por defecto. Y que sÃ³lo dice: "hola, mundo". Pero dice "hola, mundo "en dos lugares. Observe la parte superior izquierda. Bastante difÃ­cil pasar por alto eso. Es grande y en negrita. Y donde mÃ¡s hace que parezca decir, "hola, mundo"? 

AUDIENCIA: La pestaÃ±a. 

DAVID J. MALAN: SÃ­, la ficha en sÃ­. AsÃ­ que cuando le dije al jefe de la la pÃ¡gina es todo hasta top-- y de hecho este es el tÃ­tulo. Es sÃ³lo en la pestaÃ±a aquÃ­. Y puedo tirar de esta ficha a cabo de manera que no se confunda. Esto es sÃ³lo una Ãºnica pestaÃ±a ahora, y de hecho vemos "hola, mundo" aquÃ­ y "hola, mundo" aquÃ­ abajo. Por lo tanto bastante sencillo. Pero tambiÃ©n es bastante simple. Y, en realidad, el zoom. Puedo cambiar el tamaÃ±o de la fuente apenas para ampliar la accesibilidad. Pero ahora vamos a hacer algo un poco mÃ¡s interesante. 

Voy a vaya-- gritos, y mucho Me regreso a mi archivo de texto. Voy a volver a mi archivo de texto, y voy para cambiar esto y decir "Hola, Disney World." Salvar. Y volver a mi navegador y haga clic en Actualizar. Y ahora, por supuesto, dice "Disney World". Y voy a enfocar artificialmente en tan sÃ³lo por lo que es fÃ¡cil de ver. AsÃ­ que ahora, por desgracia, que tipo de deseo a-- realidad, esta es una caracterÃ­stica de Mac. Quiero hacer clic en Disney World e ir a un lugar como disney.com, pero eso no funciona. Por lo que un principio bÃ¡sico de la web es hipervÃ­nculos, enlaces que van en otro lugar. Entonces, Â¿cÃ³mo lo hago? Bueno, podrÃ­a simplemente decir, "Hola, http://www.disney.com." Guarda esto. Recargar. Pero esto tambiÃ©n, no se puede hacer clic. Y lo que es agradable aquÃ­, a pesar de que esto todavÃ­a no es funcional, es que parece que la navegador, literalmente, sÃ³lo lo hace lo que le digo que haga. AsÃ­ que si acabo de escribir una direcciÃ³n URL como esta, sÃ³lo va a mostrarme la URL. Necesito usar etiquetas o marcas idioma para contar realidad el navegador para hacer aÃºn mÃ¡s. AsÃ­ que voy a seguir adelante y Eliminar esto por un momento. Y voy a decir, oye, explorador, inicie un ancla aquÃ­, un enlace por asÃ­ decirlo. Y la hiper-referencia, el destino de ese anclaje, deberÃ­a ser este URL. Y note mis citas. PodrÃ­a usar comillas simples, tambiÃ©n, pero hay que ser coherente, y se lo general sÃ³lo tiene que utilizar comillas dobles que sea sencillo. Noto que voy a cerrar la etiqueta. Y entonces aquÃ­ voy decir, "Disney World". Y ahora necesito un poco de symmetry-- corchete abierto, / a, soporte cerrado. 

Entonces, Â¿quÃ© he introducido? Hemos tenido algunas etiquetas ya. HTML, cabeza, tÃ­tulo, el cuerpo, son todas las etiquetas, por asÃ­ decirlo, con sus homÃ³logos abiertos y cerrados. Pero aviso, esto es una especie de fundamentalmente diferente. Esto es lo que llamaremos en HTML un atributo. Y es un atributo sÃ³lo un par clave-valor. Esto es una cosa comÃºn en par clave-valor ciencias-- equipo. Es una especie de la herramienta de trabajo. Una clave y un valor. Palabras y algo mÃ¡s otra palabra o palabras. Y en este caso, la clave es href, y el valor es la URL completa. Y lo que es un atributo que hace influye en el comportamiento de una etiqueta. Y en este caso, tenemos que influir el comportamiento de la etiqueta de anclaje, porque tenemos que anclar este enlace a alguna parte. Â¿Y cÃ³mo se hace eso es por medio del atributo. 

AsÃ­ que voy a seguir adelante y guardar el archivo ahora. Volver a mi navegador y recarga. Y, voilÃ¡, ahora tenemos la comienzos de una pÃ¡gina Web legÃ­timo. -Super simple, pero si se ciernen sobre esto-- aviso en la esquina inferior izquierda, Es sÃºper pequeÃ±o. Pero lo hace ver www.disney.com. Y si hago clic en Ã©l, de hecho, esta Me bate lejos a disney.com. Ahora, lo curioso aquÃ­ es que no es la mejor-- el URL mÃ¡s comercial, pero eso estÃ¡ bien porque este archivo no lo hace existir en la World Wide Web. Existe como un archivo local en apariencia Mis usuarios directory-- / jharvard-- para John Harvard-- / escritorio. Pero tiene una URL. Que sÃ³lo pasa a ser local. Por desgracia, ninguno de ustedes puede visitar esto, porque si escribe esta URL, que estarÃ­a diciendo a su navegador, buscar un archivo llamado hello.html en su disco duro. Y, por supuesto, a menos que haya estado siguiendo de forma manual, que no va a existir allÃ­. 

AsÃ­ que eso estÃ¡ bien. TodavÃ­a tenemos una forma, en Ãºltima instancia, para obtener este archivo en la web, pero vamos a desmenuzar un par de implicaciones de seguridad de lo que acabamos de sierra y atarlo de nuevo a la anterior la discusiÃ³n de esta maÃ±ana. Resulta que, si una navegador, literalmente, sÃ³lo hace lo que le digo que lo haga, y parece ser el caso de que una etiqueta de anclaje es influido por el valor de este atributo llamado href pero muestra este texto, esto parecerÃ­a dar a entender que podrÃ­a poner la URL en ambos lugares y vuelva a cargar y ahora ver la URL e ir a la URL. Aviso, si se ciernen sobre la parte inferior izquierda, de hecho voy a disney.com todavÃ­a. 

AsÃ­ que si alguna vez has estado phished-- P-H-I-S-H-E-D- con uno de esos correos electrÃ³nicos falsos como PayPal desde su banco, es probable que haya conseguido el interior de enlaces del correo electrÃ³nico que usted estÃ¡ leyendo que le indica que haga clic aquÃ­ para ir confirman su contraseÃ±a o confirmar su fecha de nacimiento social o social o algo ingenierÃ­a que divulga informaciÃ³n. Bueno, podrÃ­a tomar la clase de ventaja de esto, no iba a hacerlo? PodrÃ­a decir algo como, www.paypal.com. Y en vez de disney.com, me podrÃ­a ir a, como, badguy.com. Recargar. Y lo fÃ¡cil que es para engaÃ±ar, especialmente un lector no tÃ©cnico o una lectura somera lector de hacer clic un enlace como este, que si hago clic it-- En realidad, yo no quiero ir badguy.com. No sÃ© lo que estÃ¡ realmente allÃ­. AsÃ­ paypal.com, aviso, es lo que dice que va a, pero por supuesto, si miro hacia abajo sÃºper bajo, que es un poco borrosa, pero no dice badguy.com. Esa es la Ãºnica digo en este momento que voy a un lugar equivocado. Y cuando he dicho antes que los bancos realmente no deberÃ­a alentar o entrenar los usuarios hacen clic en los enlaces, esto es sÃ³lo una manifestaciÃ³n de la misma. Y es asÃ­ de simple. Ahora eres un adversario si se hace algo como esto y tratar de engaÃ±ar a un usuario para que visite su sitio web. Pero por ahora, vamos a seguir todo limpio y ordenado. Vamos a seguir adelante y rebobinar estos cambios. Recargar la pÃ¡gina. Y vuelvo a disney.com. 

Vamos a ver si no podemos molestar esto aparte un poco mÃ¡s. Por lo tanto "hola, Disney World." Voy a decir aquÃ­ abajo. Tal vez voy a hacer un poco de espacio. "Â¡Esperamos que disfrute su estadÃ­a!" Salvar. Recargar. No es que eso no es rea-- lo que querÃ­a, Â¿verdad? Es decir, si yo estoy tratando mi texto presentar como un procesador de textos, Â¿QuÃ© esperaba que sucederÃ­a aquÃ­? SÃ­, me siento como si hubiera debe ser un salto de lÃ­nea aquÃ­, asÃ­ que se siente con errores de alguna manera. Pero que en realidad es deliberada, porque al igual que antes, el navegador sÃ³lo se va a hacer lo que diga que haga. No he dicho que para romper las lÃ­neas. Yo no he dicho que se mueva hacia abajo, incluso sin embargo, intuitivamente, siento que lo hice. AsÃ­ que resulta que necesitamos un poco mÃ¡s de margen de beneficio, y voy a arreglar esto de la siguiente manera. Voy a incondicional esta primera hola con lo que se llama una etiqueta de pÃ¡rrafo. Y luego voy a seguir adelante y envolver esta otra frase en otra etiqueta de pÃ¡rrafo, a pesar de que son los pÃ¡rrafos sÃºper cortos. Ahora voy a guardar. Recargar. Y ahora tenemos que espacio, y que tipo de tienen la semÃ¡ntica de dos pÃ¡rrafos separados. 

Eso es todo bien y bueno, pero serÃ­a ser agradable para aÃ±adir una imagen a esta pÃ¡gina, asÃ­ que voy a ir a buscar Mickey Mouse en Google ImÃ¡genes. Y sÃ³lo por diversiÃ³n, yo soy va a tomar esta imagen. Voy a seguir adelante y ahora agarrar la URL de esta imagen, aunque hay diferentes maneras de hacer esto. Por ahora, sÃ³lo voy a copiar la URL. Voy a volver a mi texto archivo, y lo voy a decir aquÃ­, img src = entre comillas esa URL, sÃºper larga. Y entonces la nociÃ³n de una la imagen es un poco diferente. En realidad no hay nociÃ³n de partida una imagen y terminando una imagen, como una etiqueta de inicio una etiqueta final. AsÃ­ que parece un poco raro Me semÃ¡nticamente Para ello, tener una etiqueta de cerca la imagen. No es incorrecto. Es perfectamente correcto, y se animÃ³, pero hay notaciÃ³n abreviada. Puedo tipo de forma simultÃ¡nea abrir y cerrar la misma etiqueta, y que va a hacer feliz al navegador. AsÃ­ que es sÃ³lo un poco mÃ¡s sucinta de las cosas que, conceptualmente, realmente no hacer tener sentido para iniciar y finalizar. Ellos simplemente estÃ¡n ahÃ­, o no lo son. 

AsÃ­ que voy a guardar esta y volver a mi "hola, mundo" pÃ¡gina y recarga. Y es un poco fuera de control, porque que la imagen es en realidad un poco grande, pero eso estÃ¡ bien. PodrÃ­a cambiar su tamaÃ±o en un programa. O usted sabe quÃ©. SÃ³lo para demostrar, estoy va a decir en realidad que la anchura de esta cosa debe sÃ³lo serÃ¡ de 200 pÃ­xeles, 200 puntos. DÃ©jame ir por delante y guardar y volver a cargar, y ahora la pÃ¡gina se ve un poco mÃ¡s razonable. Pero note el patrÃ³n. Bueno, he tipo de enseÃ±ado a todos de HTML, en cierto sentido, al menos conceptualmente, porque todo el HTML es decir Ã©stos tags-- etiquetas abiertas, cerradas las etiquetas, y atributos que modificar su comportamiento. Y, al parecer, cada la etiqueta puede tener cero o uno o dos o mÃ¡s atributos, cada uno de el que hace algo un poco diferente. Ahora, Â¿cÃ³mo saber lo que existe? Usted acaba de escuchar a alguien como yo te diga lo que existe, o simplemente Google en torno a un tutorial en HTML, y lo que realmente es asÃ­ de simple. 

En verdad, cuando yo era un estudiante universitario Hace aÃ±os y aprendiÃ³ HTML, uno de mi enseÃ±anza de matemÃ¡ticas acabamos de pasar asistentes un poco de tiempo me tutorÃ­a para como media hora, una hora, y entonces yo estaba en mi camino. Yo estaba en mi camino hacia la fabricaciÃ³n los sitios web mÃ¡s horribles nunca, que, al parecer, no lo he hecho Realmente progresado mÃ¡s allÃ¡. Pero el punto es que, una vez que se entender estas simples ideas-- si arcano texto-- pero estos simples ideas de comenzar un pensamiento y el cierre de un pensamiento, manteniendo todo muy bien equilibrado, mirando algo, la modificaciÃ³n de la comportamiento de esa etiqueta, que es realmente todo que hay que hacer. Y de hecho, si ahora vamos a algo asÃ­ como google.com-- realidad, vamos a ir a un lugar un poco mÃ¡s razonable-- stanford.edu. Y voy a ir a Ver, Desarrollador, Ver cÃ³digo fuente. Es feo, pero notice-- y voy a zoom en el aviso algunas cosas que es familiar ya. Hay esta aquÃ­, que es un navegador. AquÃ­ viene HTML5. Hay HTML. Al parecer, hay una atribuyo que no lo hice que especifica el uso idioma de la pÃ¡gina, y esto puede ayudar con cambio automÃ¡tico traducciÃ³n y cosas por el estilo. AquÃ­ estÃ¡ la cabeza de la pÃ¡gina. AsÃ­ es el tÃ­tulo de la pÃ¡gina de Stanford. Hay una etiqueta que no lo hice hablar yet-- etiqueta Meta. Es sÃ³lo una especie de informaciÃ³n de fondo. Ayuda con SEO, o optimizaciÃ³n de motores de bÃºsqueda, o los resultados de bÃºsqueda de Google o similares. Pero si seguimos mirando, mantenga mira, aquÃ­ estÃ¡ el cuerpo de la etiqueta. Y hay racimos de otra etiquetas que no han hablado todavÃ­a. Pero Div es uno para una la divisiÃ³n de la pÃ¡gina. Es como un rectÃ¡ngulo invisible si quieres tipo de mental dividir la pÃ¡gina en diferentes unidades de lÃ­nea. Y luego un montÃ³n de divs I ver, algo que se llama la clase, pero vamos a volver a eso. 

Esto es Forms interesting--. Los formularios estÃ¡n en toda la web. Cualquier cuadro de bÃºsqueda que estÃ¡ Ha usado alguna vez es una forma. Y, entonces, vamos a ver realmente. Formar. AcciÃ³n. La acciÃ³n de esta forma, por cualquier razones histÃ³ricas, es que el URL. MÃ©todo es "post". Resulta que las solicitudes HTTP pueden utilizar el verbo "obtener", como vimos antes, o "post". Y va a ver una diferencia de esto en un momento. Vamos a ver en realidad lo que es esto. PermÃ­tanme volver a la pÃ¡gina de Stanford. Â¿QuÃ© forma estÃ¡n hablando sobre, quÃ© te parece? Lo que salta a la vista? 

AUDIENCIA: cuadro de bÃºsqueda. 

DAVID J. MALAN: SÃ­. AsÃ­ que en la parte superior derecha aquÃ­ es la siguiente caja de bÃºsqueda. Y asÃ­ es como se implementÃ³ un it-- etiqueta que literalmente forma parÃ©ntesis abierto. Y luego vamos a buscar algo. Vamos a buscar un compaÃ±ero mine-- de "Nick Parlante". Entrar. Y, por supuesto, fue a una URL ligeramente diferente. DÃ©jame volver aquÃ­. Vamos a buscar "cursos". MaldiciÃ³n. Fuimos a una URL diferente. AsÃ­, Stanford de la adiciÃ³n de un poco de magia que no estÃ¡n llevÃ¡ndome a la URL que vimos en el acciÃ³n atributo allÃ­. Pero esta forma se lleva a cabo aquÃ­ puramente a travÃ©s de este marcado aquÃ­, estas etiquetas. De hecho, aquÃ­ estÃ¡ la entrada para el tipo de bÃºsqueda que desea. AquÃ­ estÃ¡ la entrada para otro tipo de bÃºsqueda. AquÃ­ es la entrada para la propia cadena. Y por lo que el objetivo no es envolver nuestra mente alrededor de todas estas etiquetas pero sÃ³lo para ver. Es sÃ³lo abrir y cerrar etiquetas y mirando las cosas. Â¿SÃ­? Â¿Victoria? 

AUDIENCIA: [inaudible] DAVID J. MALAN: Esa es una buena pregunta. Eso es un poco mÃ¡s difÃ­cil de ver. PermÃ­tanme volver a ese pregunta en tan sÃ³lo unos minutos cuando nos fijamos en algo que se llama hojas CSS, o de estilo en cascada, y podemos tratar de inferir tanto desde la pÃ¡gina. AsÃ­ que si ahora echar un vistazo a google.com, vamos a ver lo que su pÃ¡gina se parece. Se podrÃ­a they're-- eso es lindo hoy. DE ACUERDO. Todo listo. Muy bien, asÃ­ Ver cÃ³digo fuente. Se podrÃ­a pensar que Google tiene cÃ³digo fuente muy agradable. AsÃ­ que, al parecer, lo que estÃ¡ pasando aquÃ­? Y de hecho, esto no es aÃºn HTML. Esto es algo que se llama JavaScript. Y vamos a seguir yendo y viniendo. Ni siquiera sÃ© dÃ³nde empieza la pÃ¡gina. Voy a utilizar Command M, abierta HTML soporte. Muy bien, ahÃ­ estÃ¡. Me pareciÃ³ que el inicio de la pÃ¡gina, y hay tanto cosas aquÃ­. 

Lo que realmente estÃ¡ pasando? Bueno, ya sabes lo que, podemos limpiar esto. Si en lugar de ir a este Inspeccionar barra de herramientas, esta herramienta de diagnÃ³stico especial, e ir no a red, donde seguimos hacia el dÃ­a de hoy, pero si voy a los elementos, lo que es realmente agradable es que un navegador tiene mucho mucho mejores ojos que yo. Y el navegador puede leer que lÃ­o de una pÃ¡gina web, que el correo HTML que acabamos mirado, y puede analizar o leer y analizarla y volver a darle formato de una manera agradable de usar humano. AsÃ­ que lo que estoy viendo ahora en esta pantalla aquÃ­ En Elementos, exactamente el mismo contenido, pero han sangrÃ­a todo, que han colorized, pero que es exactamente el mismo texto que he descargado desde el servidor. 

Y lo que es agradable ahora es que puedo ver en el cuerpo, para la notificaciÃ³n instance--, La pÃ¡gina aÃºn se compone de sÃ³lo una cabeza y un cuerpo, y puedo bucear jerÃ¡rquicamente aquÃ­. Tenga en cuenta que Google parece tener divs-- a Ã©ste y Ã©ste. Puedo ampliar eso. Hay un montÃ³n de otros divs. AsÃ­ que es un poco mÃ¡s compleja. Pero espera. Esto parece mucho mÃ¡s legible, relativamente, que esto. Â¿Por quÃ© es Google embarazosa sÃ­ sÃ³lo enviando este gran lÃ­o de cÃ³digo de algunas tipo que acabamos de implementar algo que parece tan simple a primera vista? Al igual que, Â¿por quÃ© no aÃ±adir mÃ¡s espacios? Â¿Por quÃ© no se pulse Enter como lo hice? Mira lo bien que estaba en la escritura de una pÃ¡gina web. Yo golpe entra de forma diligente. Yo con sangrÃ­a asÃ­ que todo que es muy bonita y fÃ¡cil de leer. Â¿Por quÃ© Google no practica la misma? 

AUDIENCIA: [inaudible] DAVID J. MALAN: Bueno. Muy justo. No tienen alguna persona en Google manualmente la actualizaciÃ³n de la pÃ¡gina de inicio mÃ¡s. No es 1.999 mÃ¡s. AsÃ­ que tienen el software. Tienen otras herramientas que generar dinÃ¡micamente son HTML. Por supuesto, que el cÃ³digo en sÃ­ fue escrito por los seres humanos, pero la realidad es, que es bastante justo decir, el navegador ciertamente no hace importa cÃ³mo es sucio es el cÃ³digo. Pero hay una aÃºn mÃ¡s razÃ³n tÃ©cnica convincente que Google distribuye su HTML cÃ³digo en un descuidado por ejemplo, aparentemente manera abrumadora todo ello incluido en conjunto con muy poco muy poco manera-- en el camino de formato, como lo hice. 

AUDIENCIA: [inaudible] 

DAVID J. MALAN: mÃ¡s rÃ¡pido? Â¿Por quÃ©? Y lo que has dicho, Lydia? Â¿MÃ¡s rÃ¡pido? Â¿Por quÃ© mÃ¡s rÃ¡pido? AUDIENCIA: [inaudible] DAVID J. MALAN: Hay no hay espacio para leer. SÃ­. AsÃ­ que pensar en lo que es un espacio. Por lo que cada carÃ¡cter en el teclado toma una cierta cantidad de espacio para representar, ya sea fÃ­sica, al igual que ocupa mucho espacio, o de alguna manera por debajo de la campana, que requiere memoria. Y como un aside-- y vamos a hablar mÃ¡s sobre este tomorrow-- cada carÃ¡cter en el teclado normalmente requiere 8 bits, o un byte. AsÃ­ que un patrÃ³n de 8 ceros o queridos, o sÃ³lo 1 byte, como hemos los seres humanos dirÃ­a normalmente. AsÃ­ que es pequeÃ±a, pero todavÃ­a es distinto de cero. Es todavÃ­a una cierta cantidad de espacio. AsÃ­ que si un ingeniero o Google golpea la barra espaciadora una vez, y supongamos Google, sino super-popular-- Supongamos que un mil millones de personas visite su pÃ¡gina de inicio un dÃ­a, o algÃºn nÃºmero de personas visitar la pÃ¡gina principal de una mil millones de veces al dÃ­a, cuÃ¡ntos bytes adicionales que tiene ingeniero de software de Google solo cuestan por golpear a su barra espaciadora una vez? 

AUDIENCIA: [inaudible] DAVID J. MALAN: No es tan malo. A sÃ³lo una veces byte de mil millones. AsÃ­ A-- PÃBLICO: 8 millones de gigabytes. DAVID J. MALAN: No 8 mil millones. 8 mil millones de bytes. Pero 1 gigabyte. 1 gigabyte serÃ­a la unidad de medida. Si Ã©l o ella hace dos espacios, 2 gigabytes. Tres gigabytes. Â¿Derecha? Se escala costosamente. Y asÃ­, en casos como Google, el cual, es cierto, son casos extremos, hay otras cuestiones que surgen justo tomando decisiones muy razonables o tomar las acciones humanas muy simples, porque tiene este efecto magnificado. AsÃ­ que una de las razones esto se ve tan comprimida es exactamente como Victoria said-- era simplemente generado por los ordenadores de todos modos. AsÃ­ que no es gran cosa. Deje que el navegador a resolverlo. Pero tambiÃ©n deliberadamente no tiene mucho espacio, debido a que el espacio no es necesario. Y el espacio de realidad cuesta dinero. 

Es bien cuesta tiempo, porque justo para empujar que muchos mÃ¡s datos de cada La sede de google.com solo tiene que tomar una cierta cantidad de tiempo, incluso si se trata de milisegundos o microsegundos, sino que se suma mÃ¡s de lo que muchos usuarios, o mÃ¡s probablemente, es probable que cuesta dinero. Google probablemente se conecta a otra persona en el mundo, uno de los que mira con fijeza puntos, y si tienen algÃºn tipo de relaciÃ³n financiera por lo que los costos de sus datos dinero, pues que lo hagan reducir al mÃ­nimo la cantidad de datos que estÃ¡n escupiendo en su conexiÃ³n a Internet. 

AsÃ­ que lo mÃ¡s divertido, sin embargo, en Ãºltima instancia, o tal vez lo mÃ¡s tranquilizador, es que a pesar de que esto parece terriblemente abrumadora, al final de la dÃ­a, sigue siendo los mismos principios exactos como esta pÃ¡gina muy simple aquÃ­ de un HTML pÃ¡gina. AsÃ­ que para resumir y para que tener una versiÃ³n canÃ³nica si no fueras siguiendo a lo largo de elecciÃ³n aquÃ­, aquÃ­ podrÃ­a ser la mÃ¡s simple de las pÃ¡ginas web, asÃ­ que algo para jugar con quizÃ¡s mÃ¡s adelante. 

Bueno, vamos a introducir una par de otras ideas ahora. Estamos a punto de introducir algo que se llama una etiqueta de estilo. Podemos estilizar esta pÃ¡gina en formas mÃ¡s interesantes. AsÃ­, mientras correo electrÃ³nico HTML se trata de marcar los datos, tipo de especificaciÃ³n a una navegador cÃ³mo estructurar los datos, donde ponerlo, CSS o Hojas de estilo en cascada, es una segunda lengua que consigue generalmente mezclados con HTML como vamos a ver-- pero podemos limpiar que hasta en un moment-- que toma que la Ãºltima milla, y se estiliza ella. Se pone los colores apenas a la derecha, el tamaÃ±o de la fuente apenas a la derecha, el posicionamiento justo. Es todo acerca de la estÃ©tica o el formato, no se trata de los datos fundamental en sÃ­. Y la manera mÃ¡s fÃ¡cil para mostrar este es quizÃ¡s el ejemplo. AsÃ­ que voy a ir a mi archivo de texto sencillo. Y en un momento, me quedo nos guiarÃ¡ por el proceso de hacer esto por nosotros mismos. 

Voy a volver a mi archivo aquÃ­ y volver a cargar la pÃ¡gina para confirmar lo que parece. AhÃ­ es donde estamos ahora. Siento que los niÃ±os disfrutarÃ­an tener un poco de color a esta pÃ¡gina web. AsÃ­ que voy a subir aquÃ­ en la cabecera de la pÃ¡gina. Y yo voy a hacer el estilo, / estilo. Y luego dentro de esta, voy para decirle al cuerpo de mi page-- y este formato es, por lo primera vista, tal vez un poco extraÃ±o, pero convencional. Voy a decir que el fondo color de esta pÃ¡gina debe ser de color verde. Y esto es, por desgracia tipo de diseÃ±o no es el mejor. Tenga en cuenta que con anterioridad en el mundo de HTML, Le dije que los atributos son estos pares de valores clave. Algo es igual a la cita Fin de la cita "algo". En el mundo de CSS, que era diseÃ±ada por algunas personas diferentes, decidieron que, en su mundo, pares de valores clave serÃ­a la palabra de colon algo. AsÃ­ que es la misma idea, sin embargo. Se asocia un valor con alguna clave que de alguna manera influye en el comportamiento de esta pÃ¡gina. 

Y que es fÃ¡cil adivinar. Â¿QuÃ© es esto probablemente va que hacer, incluso si usted nunca ha visto HTML o CSS antes? AUDIENCIA: Cambiar el color de fondo. DAVID J. MALAN: SÃ­, cambiar el color de fondo. Y especÃ­ficamente el color de fondo del cuerpo. Pero en la medida en la cuerpo por ahora es la web page-- que es la Ãºnica cosa por debajo de la barra de tÃ­tulo realmente-- que probablemente va a influir en el mismo. AsÃ­ que vamos a ver. Vamos a guardar esto. Vaya aquÃ­ y volver a cargar. Es bastante horrible. Y que esta pasando aquÃ­ es un efecto secundario. Acabo de elegir esta imagen al azar. Â¿Por quÃ© el no verdes impregnando detrÃ¡s de Mickey? AUDIENCIA: [inaudible] DAVID J. MALAN: Exactamente. Pues resulta que las imÃ¡genes, bastante tanto todas las imÃ¡genes que podrÃ­amos usar, son todos rectangles-- de rectÃ¡ngulos. Incluso si Mickey tiene algunas curvas para sÃ­ mismo y tiene un fondo, que el fondo tiene que ser algo. Tiene que ser de color blanco. Tiene que ser negro o alguna otra cosa. Puede ser transparente. Y, de hecho, podrÃ­a abrir Mickey Mouse aquÃ­ en un programa llamado Photoshop o algo similar y cambiar todo eso blanca fondo a transparente, por lo que el verde brille a travÃ©s. Pero eso es algo que necesitarÃ­a a pedir de mÃ­ mismo o un artista grÃ¡fico o un diseÃ±ador en mi compaÃ±Ã­a, por ejemplo, hacer, sobre todo porque acabo prestado Ã©ste de internet. Pero eso es por quÃ© ocurre esto. 

Entonces, Â¿quÃ© mÃ¡s podrÃ­amos desear hacer? Pues bien, lo que se quiere decir que Realmente esperamos que disfrute de su estancia. Y para dar Ã©nfasis, quiero para hacer de este fuerte, y por lo que voy a decir abierta y fuerte cerrar fuerte y vuelva a cargar. Y es un poco difÃ­cil para ver en el proyector pero tal vez realmente ahora salta a un poco mÃ¡s. Lo que puede aÃ±adir cursiva en este AsÃ­, frente negrita de esta manera. PodrÃ­amos cambiar los colores. De hecho, sÃ³lo por diversiÃ³n, yo soy va a seguir adelante y hacer esto. Realmente no me gusta la forma en que mi pÃ¡rrafos son tan cerca juntos, por lo que podrÃ­a hacer algo como esto. Voy a decirle al navegador, cambiar cada etiqueta de pÃ¡rrafo para tener, vamos a decir-- realidad, sabes quÃ©, vamos a alinear se text-align, centro. Y de nuevo, sÃ© que esto sÃ³lo se porque alguien me lo enseÃ±Ã³ o que lo busquÃ© en una referencia en lÃ­nea. AsÃ­ que me deja guardar esto. Y, ah, ahora tengo centrada en la imagen allÃ­. Y en realidad, Â¿sabes quÃ©, si Muevo la imagen en un pÃ¡rrafo tag-- por lo que un tercer pÃ¡rrafo, a pesar de que no es de texto. Guardamos el archivo y volver a cargar. Ahora la pÃ¡gina estÃ¡ empezando a verse especie de-- Es decir, sigue siendo bastante feo, pero al menos parece que pasÃ© dos minutos en lugar de un minuto y haciendolo. 

Y asÃ­, de forma incremental, podemos hacer estos cambios estÃ©ticos ahora a la pÃ¡gina? Realmente no he cambiado los datos en el pÃ¡gina que no sea la adiciÃ³n de la palabra de verdad. He aÃ±adido metadatos, si se quiere. Hey, navegador, hacen que el palabra "realmente" en negrita. Sin embargo, los datos no es fuerte. Eso es metadatos. Los datos son "realmente". AsÃ­ que todavÃ­a tenemos algunos de los mismos conceptos como antes. Ahora, por supuesto, esto no es en la web, asÃ­ que voy a hacer un paso final aquÃ­. 

Voy a ir a hello.html y acaba de seleccionar y copiar esto. Y ahora voy a entrar en Cloud9, que Voy a caminar a travÃ©s de un momento. Y las probabilidades son que pronto serÃ¡, si no lo ha hecho, en una pantalla como esta. Y permÃ­tanme darle una rÃ¡pida Cloud9 recorrido de lo que realmente es. AsÃ­ que de nuevo Cloud 9 es este servicio basado en la nube y que me da la ilusiÃ³n de tener nuestra propia mÃ¡quina virtual en la nube, tÃ©cnicamente un contenedor en la nube, que tenemos plena privilegios administrativos a. Por lo tanto, en teorÃ­a, nadie otra parte del mundo tiene el acceso a la pantalla estoy mirando en este momento, excepto quizÃ¡s las personas que dirige el sitio, porque tÃ©cnicamente tienen el acceso fÃ­sico y asÃ­ sucesivamente. 

Entonces, Â¿quÃ© es lo que vemos en este entorno? Voy a alejar, porque es un poco pequeÃ±a. Y permÃ­tanme seÃ±alar lo largo aquÃ­ sÃ³lo por un momento. En el lado izquierdo de mi y su la pantalla, hay un explorador de archivos de la izquierda. AsÃ­ similar en espÃ­ritu para Mac OS y Windows. Estos son todos de la archivos en mi cuenta. Y por defecto, si su cuenta es como la mÃ­a, verÃ¡ o poco ves holamundo.html y readme.md. Por aquÃ­ a la derecha, esto es donde mis archivos de texto se van a ir. Si alguna vez has utilizado Microsoft Word o el Bloc de notas o TextEdit, este es mi palabra de ediciÃ³n de archivos que se va a ir. Y entonces el mÃ¡s arcano caracterÃ­stica de este entorno que no vamos a utilizar realmente necesita es aquÃ­ se llama una ventana de terminal. Si ha utilizado desde DOS antaÃ±o, este es el Linux o el equivalente para Linux de DOS. Es un interface-- basado en texto no hay clics del ratÃ³n, sin arrastre. Todo lo que puedes hacer es escribir comandos, pero esos comandos puede crear archivos, mover archivos, abierto directorios, cerca de directorios, hacer cualquier nÃºmero de cosas. Pero por ahora, sÃ³lo tendremos pasar el tiempo aquÃ­. 

Y asÃ­ vamos a hacer esto. Si estÃ¡s en esta medio ambiente, que debe ser si ha creado un espacio de trabajo ya, seguir adelante y sÃ³lo tiene que ir hasta a Archivo, Nuevo por un momento. Y eso le darÃ¡ un nuevo pestaÃ±a derecha aquÃ­ en el medio. Y solo-- y de dejar seguir adelante y hacerlo. Vamos a seguir adelante y ahora no Archivo, Guardar y seguir adelante y llamar hello.html, No debe confundirse con holamundo.html, que llegÃ³ con su nueva cuenta gratuita, que es simplemente un archivo de ejemplo. VerÃ¡ que aparecen de repente, mÃ¡s probable en el lado de la izquierda, y la ficha seguirÃ¡ siendo abierta. Y deja que te animo ahora para recrear este archivo o algunas variantes de los mismos. Y si no puede verlo del todo en el pantalla, esto es idÃ©ntico a las diapositivas que es probable que tenga en otra pestaÃ±a. 

AsÃ­ que en resumen, hacer su primera pÃ¡gina web, guardarlo y, a continuaciÃ³n, en un momento, Voy a mostrar cÃ³mo se en realidad puede ver esto. Pero cambiar al menos una cosa. Cambiar a holamundo algo de su propia elecciÃ³n, por lo que estÃ¡ convencido de que es su presentar y no la acabo de crear. Todo bien. Y cuando haya ningÃºn lista-- rush-- cuando estÃ© listo, seguir adelante y guardar el archivo una vez que haya realizado estos cambios. Y si hace clic en el botÃ³n hasta ejecutar la parte superior, esta debe abrir una nueva pestaÃ±a que le dirÃ¡ lo URL se puede visitar el archivo en, pero puede ser que tome un momento para entre comillas "iniciar Apache", que es el nombre del servidor web. AsÃ­ que tenga cuidado de hacer exactamente lo que estÃ¡ en el archivo, en Ãºltima instancia. AsÃ­ que ahora mismo, voy a acercar. Si comienzo a escribir -Corchete abierto HTML, previo aviso me estÃ¡ incitando a terminar mi pensamiento. Y si he terminado mi pensamiento, Me da automÃ¡ticamente la etiqueta de cierre. Pero la expectativa es entonces me va a golpear Entrar y, a continuaciÃ³n, pasar el interior hay y no dentro de la cabeza y entonces que hago en el interior del cuerpo. Y es un poco raro al principio, porque estÃ¡ haciendo un trabajo para usted, pero se dan cuenta de que en Ãºltima instancia que le ahorra pulsaciones de teclas. Y de hecho, una caracterÃ­stica muy comÃºn de entornos de programaciÃ³n de estos dÃ­as tanto para el desarrollo web como esto y programaciÃ³n real, de la cual hablaremos en el maÃ±ana, Son estas caracterÃ­sticas de auto-completado, cosas que simplemente permiten una programador o un diseÃ±ador para escribir menos pulsaciones a lograr la misma cosa. A veces es bueno, sin embargo. A veces es sÃ³lo una molestia. Y, de nuevo, una vez que haya transcrito la corredera o alguna variante de la misma, puede hacer clic en el botÃ³n Ejecutar encima de la tapa. Y luego, en la parte inferior ventana, se le informarÃ¡ en quÃ© URL se puede visitar su pÃ¡gina web. La mÃ­a, por ejemplo, estÃ¡ en business-daharvard.c9users.io EtcÃ©tera. Muy bien, asÃ­, dejar que me-- alguna pregunta? Cualquier otra pregunta sobre conseguir justo este trabajo antes de aÃ±adir caracterÃ­sticas? Y permÃ­tanme proponer, justo para conseguir que la gente comfortable-- porque una cosa es simplemente copiar y pegar ciegamente lo que he hecho. Pero sÃ³lo para que la gente luchan con al menos una tarea pendiente, Voy a encender un poco de mÃºsica. Voy a proponer una lista de cosas que potencialmente puede aÃ±adir. Y que sin duda puede utilizar Google. Â¿Y por quÃ© no nos Proponemos que intenta resolver al menos un determinado problema aquÃ­. AsÃ­ que en tÃ©rminos de etiquetas, permÃ­tanme volver a utilizar este aquÃ­. 

En realidad, dÃ©jenme poner en una forma textual. Digamos que entre las etiquetas que podrÃ­amos utilizar aquÃ­ estÃ¡n algunas etiquetas aquÃ­. Hemos visto la etiqueta de pÃ¡rrafo. Ahora se va a auto-completar. etiqueta de pÃ¡rrafo, la etiqueta de anclaje. Digamos que usted quiere hacer algo mÃ¡s grande, por lo que podrÃ­a como- la etiqueta span puede ayudar. Bueno, es posible que necesite un poco de ayuda para que, en un momento. Hemos visto div. Usted verÃ¡ que hay tabla. Hay algo que se llama tr, td. Th, td. Volver a eso en un momento. Â¿QuÃ© otra cosa podrÃ­a ser Ãºtil? Hay fuertes. Hay Ã©nfasis, o mÃ¡s bien em. There's-- quÃ© otra cosa puede ser que le apetece aquÃ­? Bueno, vamos a echar un mira que en su conjunto. Forma, que hemos visto. No hay forma. Hay entrada y algunos otros. Muy bien, asÃ­ que vamos a hacer esto. Para responder a una Victoria pregunta, me dejÃ³ entrar primero sÃ³lo asegÃºrese de que todo el mundo estÃ¡ capaz de conseguir su trabajo hola. A continuaciÃ³n voy a presentar un par de otras ideas. A continuaciÃ³n, vamos a dejar que la gente a resolver algÃºn problema por su cuenta. A continuaciÃ³n, vamos a realmente volver a la nociÃ³n de una forma, y vamos a volver a implementar en realidad juntos la interfaz para el usuario, por asÃ­ decirlo, por el propio Google. Vamos a utilizar Google como la parte de atrÃ¡s y dejamos ellos hacen el trabajo duro, la bÃºsqueda, pero vamos a recrear el extremo delantero de Google y el formulario de bÃºsqueda que tienen en su propia pÃ¡gina. Y asÃ­ vamos a volver a estas etiquetas en un momento. 

AsÃ­ que esto era lo que yo propuesta hace un momento. Podemos aÃ±adir la estilizaciÃ³n a una pÃ¡gina dentro de esta etiqueta de estilo, y podemos estilizar el fondo el color, la alineaciÃ³n del texto, ya sea central o hacia la izquierda o la derecha. Pero muy rÃ¡pidamente que lo harÃ­a encontrar o un diseÃ±ador de pÃ¡ginas web se verÃ¡ que esta se vuelve un poco difÃ­cil de manejar, porque estÃ¡s haciendo lo que hay denominada mezcla de contenido con la presentaciÃ³n de los mismos. Que va a mezclar sus datos y la estÃ©tica de la misma. Y de hecho, si se tiene en cuenta lo que va a suceder con el tiempo-- esta es una muy pequeÃ±a pÃ¡gina Web, por supuesto. Pero si aÃ±ado contenido a esta pÃ¡gina y aÃ±ado estilo a esta pÃ¡gina, la pÃ¡gina se pone muy rÃ¡pidamente mÃ¡s y mÃ¡s y mÃ¡s. Y supongamos que yo quiero tener una segunda pÃ¡gina web que comparte algunos de estos atributos. Supongamos que mi pÃ¡gina web para mi segundo site-- tambiÃ©n, quiero centro de todo, y yo tambiÃ©n quiero todo con un fondo verde. Estoy mÃ¡s o menos va a tener que copiar y pegar algunas de estas lÃ­neas en ese segundo archivo, que se siente bien. Se va a resolver el problema. 

Pero lo que si quiero una tercera pÃ¡gina o una pÃ¡gina o una pÃ¡gina 30 de 40Âº? Ahora voy a ser copiado y pegar una gran cantidad de cÃ³digo duplicado en varios archivos. Y asÃ­ suponer que Decido o me han dicho, Hey, no estamos utilizando una fondo verde mÃ¡s. Vamos a empezar a usar naranja. Â¿QuÃ© hay que cambiar? Bueno, usted tiene que cambiar ese estilo de verde a naranja en la forma en muchos lugares? Como 30 o 40 plazas. Es tedioso. Es propenso a error. Hay una serie de razones en el que no quiere inducir ese tipo de dolor por sÃ­ mismo. Y asÃ­, Â¿no serÃ­a agradable si podÃ­amos tomar lo que acabo poner entre estos dos amarillas etiquetas, estas etiquetas de estilo, factorizarlo a cabo, y poner todo de mi estilizaciÃ³n en un archivo central que todos los 30 o 40 de mis otros archivos prestado de alguna manera o de referencia, no muy diferente de la creaciÃ³n de redes diagramas que hacÃ­amos antes? 

AsÃ­ que si entro aquÃ­, estoy va a proponer en realidad que se sustituye la etiqueta de estilo con algo llama la etiqueta de enlace, el cual es horrible, horrible llamado, porque no se utiliza el etiqueta de enlace para crear lo Sabemos que los seres humanos como un enlace en una pÃ¡gina web. Para ello, se utiliza la cual la etiqueta? Â¿CÃ³mo se crea un enlace en una pÃ¡gina web? AUDIENCIA: La a. DAVID J. MALAN: La una o anclaje etiqueta, que fue a Disney antes. La etiqueta de enlace aquÃ­ estÃ¡ diciendo esto-- enlace a un archivo llamado styles.css, la relaciÃ³n a la que va a ser que es mi estilo. AsÃ­ que este es uno de los de S en las hojas de estilo en cascada CSS--. Estilo sheet-- dos de la dÃ©cada de S en CSS. Hoja estilo cascada. Esto sÃ³lo significa, bueno, navegador, ir styles.css encuentra en el servidor local y utilizarlo como su hoja de estilo, lo que significa dentro de ese archivo va a ser la totalidad de la estilizaciones que acabamos de hecho. Y asÃ­ lo que ese archivo podrÃ­a ser como es Ã©sta. Y sÃ³lo voy a hacer esto es un rÃ¡pido ejemplo, debido a que no es necesario para obtener demasiado en las malas hierbas aquÃ­. Pero si copio esto, lo que estoy proponiendo es que un programador crear un nuevo archivo, pegar en aquellos lines-- whoops-- pegar en esas lÃ­neas, guardarlo como styles.css y, a continuaciÃ³n, en el otro archivo, eliminar todo eso y vuelva a colocar en su lugar con esta etiqueta de enlace. AsÃ­ que si me enlace href = "styles.css", la relaciÃ³n serÃ¡ "estilo" el cÃ³digo de cierre. Guardarlo. Volver a mi holamundo. Recargar. 

Literalmente no ha pasado nada. Eso es una buena cosa, porque significa en realidad es todo trabajo. Para probar tanto, supongo que hago una error tipogrÃ¡fico, y esto lo llamo "styles.css" con un capital S, que es incorrecto y, a continuaciÃ³n, volver a cargar. Ahora se puede ver que simplemente no funciona. Â¿Ahora por quÃ©? Bueno, vamos a utilizar una tÃ©cnica de antes. DÃ©jame ir adelante y, en mi navegador, en Chrome, estoy va a abrir ese especial pestaÃ±a de red como antes, y deja que vuelva a cargar la pÃ¡gina. Lo que no te sorprende ver ahora? O quizÃ¡s usted es sorprendido al verlo. De cualquier manera, Â¿quÃ© ves ahora? AUDIENCIA: [inaudible] DAVID J. MALAN: No ha encontrado. Â¿Por quÃ© no se encontrÃ³? Asimismo, el capital Styles.css-- S- no existe. Yo mal llamada ella. simple error tipogrÃ¡fico. Pero me estoy comprensiblemente ahora 404, porque el servidor estÃ¡ diciendo, hey, no ha encontrado. Literalmente, no sÃ© donde dicho archivo es. AsÃ­, como resultado, el navegador te muestra lo que puede, el contenido en bruto de la pÃ¡gina, el cual era un 200, el cÃ³digo HTML, pero la estilizaciÃ³n no puede se aÃ±ade despuÃ©s de eso. Y esto es lo que se quiere decir con cascada. Puede especie de agregarlo despuÃ©s, y que tipo de refina la estÃ©tica de la pÃ¡gina web. E incluso se puede anular los sin embargo, los estilos con otros archivos de hojas de estilo si tu quieres. No ha encontrado, sin embargo, en este caso, porque, por supuesto, que mal llamada ella. AsÃ­ que tendrÃ­a que arreglar eso primero. 

AsÃ­ que vamos a seguir adelante y proponer la siguiente. Vamos a seguir adelante y hacer esto. A partir de tal vez holamundo su archivo, me dejaron de invitar a una pareja de presentar sugerencias. AsÃ­, Victoria, que querÃ­a hacer un poco de texto mÃ¡s grande, Â¿verdad? Muy bien, asÃ­ que puede no hacer el texto mÃ¡s grande. Y vamos a arrancar cada uno sÃ³lo un problema a resolver. Hacer texto mÃ¡s grande. Yo no me voy a molestar escribir esto cuando contar con tecnologÃ­a de bala por aquÃ­. AsÃ­ algunos problemas. AsÃ­ que vamos a tratar para hacer el texto mÃ¡s grande. Todo bien. Â¿QuÃ© otra cosa podrÃ­a proponer a alguien? Â¿QuÃ© mÃ¡s podrÃ­amos queremos que hacer en una pÃ¡gina web? Vamos a llegar a una lista corta de cosas y luego delegar en el grupo para resolver esto. 

AUDIENCIA: [inaudible] 

DAVID J. MALAN: OK, texto de la posiciÃ³n en diferentes lados de la pÃ¡gina? Todo bien. Algo mÃ¡s. 

AUDIENCIA: [inaudible] DAVID J. MALAN: Es. Por lo que un gif es sÃ³lo una formato de archivo diferente. Que la utilizamos, lo que, una png o jpg, probablemente? Se utilizÃ³ un jpg. Si tienes curiosidad, una excesiva responder a su pregunta es un archivo JPG se utiliza generalmente para fotografÃ­as, ya que soporta millones de colores o color de 24 bits. Un GIF se utiliza generalmente para, como, memes de Internet, estas animaciones days-- gifs animados similares. Pero sucede utilizar un color mÃ¡s pequeÃ±a paleta, sÃ³lo 256 colores posibles, pero apoya la transparencia y la animaciÃ³n. Y luego estÃ¡ png, que apoya transparencia y mÃ¡s colores pero no animaciÃ³n. AsÃ­ que es un trade-off. Por lo que aÃ±adir un gif, sin embargo, serÃ­a funcionalmente equivalente a aÃ±adir un png o jpg. SÃ­. Fuente de la imagen es igual. AsÃ­ que otra cosa. Vamos a llegar a algo que enviamos a Victoria a hacer aquÃ­. 

AUDIENCIA: Agrega botones para un formulario. DAVID J. MALAN: OK. AsÃ­ que aÃ±adir botones para un formulario. Y haremos todo lo que uno juntos. De manera que habrÃ¡ una transiciÃ³n perfecta justo despuÃ©s de este desafÃ­o. Â¿Algo mÃ¡s? Â¿QuÃ© podrÃ­a hacer? La web siente muy decepcionante si esto es todo lo que podemos hacer. AUDIENCIA: Cambiar el color del texto. DAVID J. MALAN: Cambiar el quÃ©? PÃBLICO: El color del texto. DAVID J. MALAN: Cambiar el color del texto. Todo bien. Por lo tanto, vamos a hacer esto. SÃ³lo una vez mÃ¡s de manera que usted no es, simplemente de memoria, haciendo exactamente lo que estoy haciendo, Voy a encender la mÃºsica para tal vez cinco minutos aquÃ­. Usted es bienvenido a usar Google. De nada para preguntarme, y Voy a susurrar una pista en su oÃ­do. De nada mirar sobre los hombros de otros. Pero resolver sÃ³lo uno de estos problemas. Pero nosotros haremos el Ãºltimo de ellos, el forma uno, si pudiÃ©ramos, juntos. AsÃ­ cinco minutos para resolver cualquiera de estos problemas a travÃ©s de Google, la intuiciÃ³n, o cualquier otros medios disponibles para usted. 

[REPRODUCIENDO MÃSICA] Todo bien. No se preocupe si usted desea para mantener pequeÃ±os ajustes, pero voy a echar a perder un par de estas respuestas. AsÃ­ que la primera sugerencia de Victoria fue para hacer el texto mÃ¡s grande. AsÃ­ que hay un par de maneras de hacer esto. Actualmente he restaurado mi pantalla para este tamaÃ±o, aunque he zoom artificialmente sÃ³lo para ver las cosas. Y vamos a hacer esto. DÃ©jame ir por delante y agarrar un texto genÃ©rico de AmÃ©rica por lo que sÃ³lo tenemos algo con que trabajar. AsÃ­ que dame sÃ³lo un momento. Voy a hacer tres pÃ¡rrafos. DE ACUERDO. Este serÃ¡ un mejor ejemplo. AsÃ­ que para los curiosos, en mi hello.html, acabo pegado tres sin sentido pÃ¡rrafos Latina por lo que sÃ³lo tenemos un poco de texto para trabajar. Y la meta de Victoria era hacer que algunos de los textos mÃ¡s grande. AsÃ­ que pude, como antes, vaya aquÃ­. Y dÃ©jame hacer de la manera correcta. Voy a tener un vÃ­nculo etiqueta que apunta a un archivo llamado "styles.css," la relaciÃ³n de los cuales es nuevo "estilo". Y luego voy a salvar lo y abrir este "styles.css." 

AsÃ­ que, como antes, tengo el capacidad en este archivo CSS para anular efectivamente el valor por defecto estÃ©tica de una pÃ¡gina web, y la estÃ©tica predeterminados, por supuesto, son bastante aburrida. Es una especie de tamaÃ±o de fuente normal, negro texto, el fondo blanco, y asÃ­ sucesivamente. AsÃ­ que supongamos que quiero hacer todo esto texto mÃ¡s grande. PodrÃ­a hacer algunas cosas. En mi archivo styles.css, me podrÃ­a decir, sabes quÃ©, aplicarÃ¡n lo siguiente a el cuerpo de la pÃ¡gina. Seguir adelante y hacer el tamaÃ±o de fuente de 24 puntos, que es un nÃºmero que podrÃ­a utilizar en Microsoft Word. DÃ©jame volver a mi web La pÃ¡gina de aquÃ­ y volver a cargar, y se puede ver que que ya es mucho mÃ¡s grande. Y podemos conseguir un poco loco, al igual que puede en un desktop-- que sea 96 puntos. Recargar. Y cada vez es un poco difÃ­cil de manejar en este punto. 

Pero podrÃ­a ser un poco mÃ¡s preciso. En lugar de aplicar este hoja de estilo para el cuerpo de la pÃ¡gina, Â¿QuÃ© mÃ¡s podrÃ­a yo aplicarlo a su lugar, lo que otra etiqueta que aÃºn podrÃ­a funcionan de la misma manera? 

AUDIENCIA: La etiqueta p? DAVID J. MALAN: etiqueta P. AsÃ­ que la cabeza no serÃ­a correcta, porque la cabeza, realidad no se puede controlar la estÃ©tica de. Hay ya sea texto o no. Pero la p tag-- que puede sumergirse en un poco mÃ¡s profundo, por asÃ­ decirlo, en el pÃ¡rrafo las etiquetas. Y a pesar de que hay tres, eso es perfectamente bien, porque en CSS, cuando acabo de decir "p", este significa aplicar la siguiente a cualquier etiqueta que coincida con esta selector, el selector simplemente es el nombre de la etiqueta. AsÃ­ que donde quiera que vea una "P", aplicar el tamaÃ±o de la fuente, y vamos a hacer que sea mÃ¡s razonable nuevo-- 24 puntos. Y sabes quÃ©, sÃ³lo por si acaso, vamos a hacer el color simplemente roja por el momento. Y ahora si vuelvo a cargar, ahora nos ver tres pÃ¡rrafos feas. 

Pero ahora supongamos que yo soy una especie de-- Quiero que el primer pÃ¡rrafo que saltan a la vista del usuario. No quiero simplemente para aumentar el tamaÃ±o de la fuente de todo. Y lo que en realidad quiero identificar o distinguir entre estos pÃ¡rrafos. AsÃ­ que vamos a deshacernos de los nÃºmeros rojos, porque eso es sÃ³lo un poco de mal gusto, y vamos a seguir adelante y hacer que el tamaÃ±o de letra de 12 puntos por defecto, por lo que estamos de vuelta a algo un poco mÃ¡s razonable. Y ahora sÃ³lo quiero aumentar la tamaÃ±o de la fuente del primer pÃ¡rrafo. Puedo hacer esto en unos pocos maneras, pero una manera que es tal vez la mayorÃ­a de instrucciÃ³n en el es momento de hacer lo siguiente. DÃ©jame ir por delante y decir, este pÃ¡rrafo tiene un identificador Ãºnico de la "primera". PodrÃ­a llamar a este lo que quiera. PodrÃ­a llamar a esta "foo" o cualquier otra palabra, pero voy a darle un poco Nombre semÃ¡nticamente significativa asÃ­ como "primero". Este es el identificador Ãºnico, la identificaciÃ³n, para mi primer pÃ¡rrafo. 

Lo que ahora puedo hacer en mi hoja de estilo es ser un poco mÃ¡s preciso. En lugar de decir, aplicar lo siguiente a la etiqueta p, Puedo decir el following-- aplicarÃ¡ lo siguiente, o seleccione el elemento HTML que tiene un identificador Ãºnico de la "primera". Â¿QuÃ© quiero para aplicar a ella? Un tamaÃ±o de fuente de 24 puntos. AsÃ­ que tengo dos selectores ahora. Uno hace todo el los pÃ¡rrafos 12 puntos. Pero Ã©ste, sobre todo porque se trata de second-- que es el Ãºltimo en el archivo: esto tiene un efecto en cascada. Yo sÃ³lo he hecho toda mi etiquetas de pÃ¡rrafo 12 puntos, pero esto ahora y cascadas prevalece sobre cualquier elemento que por en la pÃ¡gina, cualquier etiqueta de la pÃ¡gina cuyo ID Ãºnico es, entre comillas "primero". Y el hashtag en este contexto sÃ³lo significa "identificador Ãºnico". Yo no puse en el archivo HTML. Yo, por aquÃ­, sÃ³lo decir entre comillas "primero". 

AsÃ­ que permÃ­tanme volver a cargar. Y ahora veo, ah, OK. Es decir, que no es tan bastante, pero es un poco asÃ­ como el prefacio de una libro o algo por el estilo, donde el primer pÃ¡rrafo es mÃ¡s grande. PodrÃ­a ser aÃºn mÃ¡s preciso con sÃ³lo las primeras letras, pero al menos He ejercido mÃ¡s control. Ahora maybe-- tal vez desee hacer esto de vez en cuando por cualquier razÃ³n, y por lo que no quiero que esto aplicar a una sola etiqueta HTML. MÃ¡s bien, vamos a decir-- vamos TambiÃ©n hacer lo siguiente. Class = "importaciÃ³n". Mientras que un ID se utiliza para Ãºnicamente identificar una cosa, una etiqueta, en su pÃ¡gina web, una clase estÃ¡ destinado a ser utilizado en cualquier nÃºmero de elementos o etiquetas en su pÃ¡gina web. AsÃ­ que es reutilizable. Un ID no es reutilizable. Una clase es reutilizable. 

Y sabes quÃ©, por cualquier reasons-- filosÃ³fica No he terminado mi thought-- voy a decir que el primer pÃ¡rrafo y el pÃ¡rrafo segundo, son importantes. AsÃ­ que voy a aplicar la clase llamada "Importante" que, si salvo mi archivo y volver a cargar, no tiene impacto funcional todavÃ­a. Pero he aÃ±adido un poco metadatos para el archivo, especie de algo separado a partir de los datos bÃ¡sicos del archivo, por lo que ahora en mi hoja de estilo, si en cambio decir ".importante" - usted sabe, todo lo que es importante, estoy va a hacer font-color, red-- o mÃ¡s bien no font-color, solo color. Hay inconsistencias CSS en desgracia. Y volver a cargar. Ahora note la primera dos pÃ¡rrafos son rojos pero no la tercera, porque sÃ³lo aplicado a la clase de "importante" a las dos primeras de esas cosas. 

AsÃ­ que en los ID, usted tiene la capacidad para especificar de manera muy precisa. Con las clases, tiene capacidad de reutilizaciÃ³n. Pero en ambos casos, la cuenta especie de principio de buena diseÃ±o donde eliminado casi todo de la la estÃ©tica a mi archivo styles.css. AsÃ­ que no hay desorden aquÃ­. No hay menciÃ³n de color rojo o negrita orientaciÃ³n o el tamaÃ±o de fuente en este archivo. MÃ¡s bien tengo semÃ¡nticamente, caracterizado significativa mis datos como, aquÃ­ hay algunos datos importantes. He aquÃ­ algunos datos mÃ¡s importantes. Por otra parte, aquÃ­ estÃ¡ el "Primero" de mis datos importantes. AsÃ­ HTML tiene que ver con una especie de etiquetado, literalmente, palabras y los pÃ¡rrafos y las construcciones en su PÃ¡gina con estos pequeÃ±os consejos, si voluntad, que pueda de alguna manera aprovechar el uso otras tÃ©cnicas como el CSS de esta manera. 

AsÃ­ que en respuesta a la pregunta de Victoria, podemos agrandar el texto de esa manera. Hay muchas otras maneras, pero la fuente tag-- parÃ©ntesis abierto "fuente" - es en realidad varios aÃ±os de edad. Y este es el problema, tambiÃ©n, con confiar sÃ³lo resources-- en lÃ­nea tienden a ser obsoleta. Y, en efecto, que ya no utiliza, porque el mundo se dio cuenta, Â¿quÃ© significa "font-size = 7"? No es asÃ­. Y asÃ­ durante muchos aÃ±os y que este dÃ­a-- uno de los laterales seÃ±ala aquÃ­ es que es en realidad increÃ­blemente doloroso todavÃ­a a veces para desarrollar sitios para la web, porque Microsoft y Google y Mozilla y otros a menudo no estÃ¡n de acuerdo en cuanto a cÃ³mo para interpretar una especificaciÃ³n como HTML. 

Hay un libro de reglas de HTML que en general, dice el significado de cada etiqueta. Pero a veces se deja a la discreciÃ³n de aplicaciÃ³n, discreciÃ³n y Google de Microsoft. Y por lo que tendrÃ¡ muy a menudo ver en una pÃ¡gina web algo se ve diferente en un PC que lo hace en un Mac, y eso es realmente porque, al final del dÃ­a, no probaron que bien en ambas plataformas. Pero tambiÃ©n es debido razonable, las personas inteligentes no estarÃ¡n de acuerdo y las empresas no estÃ¡n de acuerdo, y asÃ­ uno de los retos de la programaciÃ³n para la red o diseÃ±ar cosas para la web estÃ¡ escribiendo su sitio web de una manera que funciona en todos los navegadores web. Pero incluso eso es razonable, Â¿verdad? Hay tantas versiones de tantos navegadores allÃ­ que, en algÃºn momento, tambiÃ©n hay que hacer un juicio y usted tiene que decidir como una empresa, especialmente para el comercio electrÃ³nico de estilo sitios donde le tratando de usar y mÃ¡s nuevo tecnologÃ­as para dar un muy buen usuario experiencia. Pero un porcentaje de sus usuarios podrÃ­an siendo el uso de Internet Explorer 6 o 7 o 8, especialmente en funciÃ³n de la paÃ­s que estÃ¡n viniendo. 

Y asÃ­, con mucha frecuencia Consultado es algo asÃ­ como "las estadÃ­sticas del navegador web." Y si vamos a-- vamos a ver Wikipedia y vea cÃ³mo hasta a la fecha de la tabla se encuentra si hay uno. AsÃ­ que aquÃ­ se puede ver cuando en realidad los navegadores son, segÃºn diciembre de 2015, de acuerdo con el gobierno de Estados Unidos. Chrome es en la cuota de mercado del 42%, seguido por IE en gran medida en los entornos corporativos o la configuraciÃ³n del PC, por supuesto, seguido por Firefox, a continuaciÃ³n, Safari, Opera y luego no lo hizo hacer el mapa aquÃ­ por alguna razÃ³n, y que otros. Tal vez sea en Otros. Pero mÃ¡s problemÃ¡tica que la es-- vamos a ver si tambiÃ©n tiene Wikipedia versiones de navegadores version-- 

Vayamos a las estadÃ­sticas del navegador. ES DECIR. Incluso eso no es suficiente. estadÃ­sticas del examinador. Mi versiÃ³n. Eso no va a estar bien. Veamos versiones. cuota de mercado de los navegadores. Vamos a ver si esto sale. DE ACUERDO. Ahora esto se estÃ¡ poniendo un poco mÃ¡s Ãºtil. AsÃ­ que aquÃ­, darse cuenta de que tenemos todo diferentes versiones de los navegadores. Y, por Dios, si look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Es decir, los navegadores cada vez mÃ¡s informado, y, a veces algunos de esos cambios son significativos en tÃ©rminos de funcionalidad. Y asÃ­, en algÃºn momento, la gerentes de producto o de los ingenieros necesitarÃ¡ hacer una en decisiÃ³n que saber quÃ©, sÃ³lo el 1% del mercado mundial sigue utilizando IE 7. Al diablo con ellos. Simplemente no vamos a apoyar ese navegador. Y Â¿quÃ© significa no apoyar? PodrÃ­a significar que los botones no funcionan en su pÃ¡gina web, o podrÃ­a significar la el formato es completamente apagado. O puede que tenga que hacer esa misma cuestiÃ³n de criterio en los telÃ©fonos en estos dÃ­as, en los que, las que estamos no va a apoyar IOS 5 mÃ¡s. AsÃ­ que las personas sÃ³lo tienen que actualizar. O no vamos a apoyar la magdalena en Android OS para dispositivos Android, porque como el mundo-- como el mundo de la tecnologÃ­a quiere avanzar, es como que quiere arrastrar el mundo con ella de modo que no lo hacen tiene que seguir siendo compatible hacia atrÃ¡s para que puede ofrecer nuevas y buenas caracterÃ­sticas. Este es de hecho una de las razones por quÃ© tantas empresas estÃ¡n desplegando actualizaciones automÃ¡ticas y tipo de forzamiento las Ãºltimas versiones del software de nosotros. E incluso empresas como Apple va a clasificar de que casi forzar u obligar que en tÃ©rminos de las fuerzas del mercado para comprar un nuevo telÃ©fono, ya que sÃ³lo no actualizarÃ¡ su telÃ©fono antiguo mÃ¡s. Por lo que se pierda en el Los Ãºltimos y mejores caracterÃ­sticas, porque es costoso a ellos como una compaÃ±Ã­a mantener mayores, podrÃ­a decirse que versiones inferiores de software. Sin embargo, el efecto neto es que tambiÃ©n sufrimos esto tambiÃ©n. 

AsÃ­ que vamos a echar un vistazo a sÃ³lo un par de cosas finales aquÃ­. Vamos a golpe de extracciÃ³n muy rÃ¡pido algunos de esas otras balas, si es curioso. AsÃ­ que si usted intentaba, por ejemplo, la posiciÃ³n el texto en diferentes lados de la pÃ¡gina, voy a hacerlo de una manera rÃ¡pida, pero hay diferentes maneras de hacer esto. DÃ©jame ir adelante y eliminate-- simplificar esta de la siguiente manera. PermÃ­tanme volver a mi , pÃ¡rrafos simples simples. DÃ©jame volver a mi styles.css. Y yo sÃ³lo voy a utilizar el simple-- el cual se puede haber visto en Google o llamar desde antes les hablÃ© text-align derecha. Y volver a cargar esta pÃ¡gina. Ahora todo parece para ser alineado a la derecha, como se puede ver en la cabeza aquÃ­. 

Podemos hacer que se vea un poco mÃ¡s a modo de libro, y podemos decir "justificar" y volver a cargar. Ahora es agradable y cuadrado en ambos lados, lo cual es un poco agradable. Otro de los objetivos que tenÃ­amos aquÃ­ fue el cambio de color del texto. AsÃ­ hemos visto que con mi texto en rojo. Y ahora aÃ±adir botones para un formulario. Entonces, Â¿por quÃ© no tratamos de hacer exactamente esto? Pero primero dÃ©jame ir a un sitio que la mayorÃ­a de nosotros usamos cada dÃ­a-- Google. Y vamos a echar un vistazo a Google cÃ³mo funciona realmente. Pero voy a hacer esto. Primero dÃ©jame hacerlo en-- sÃ­, quiero ir a Google en primer lugar. Voy a tener que ir en ConfiguraciÃ³n de Google, porque quiero desactivar algo que se llama resultados inmediatos. 

AsÃ­ que usted puede haber notado en Google days-- Ã©stos permiten que vuelva y activar esta opciÃ³n. AsÃ­ que si me pongo a buscar para "gatos" de este tipo, cuenta de que no sÃ³lo hacer Recibo auto-completar hasta cima, de repente, la propia pÃ¡gina parece cambiar bastante rÃ¡pidamente, asÃ­, y eso es Google el uso de un lenguaje llamada JavaScript tratando de ser Ãºtil. Pero, por desgracia, que tipo desordena de nuestra discusiÃ³n de lo que estÃ¡ sucediendo realmente debajo de la campana aquÃ­. AsÃ­ que soy sÃ³lo un poco de rapidez desactivar los resultados instantÃ¡neos. Y voy a hacer clic en Guardar. Y ahora voy a abrir que la barra de herramientas de diagnÃ³stico que I mantener la abertura debajo de la ficha Red. AsÃ­ que vamos a hacer esto. Deje me-- whoops-- desplazarse esta un poco. Y permÃ­tanme bÃºsqueda de "gatos". 

Y ahora notice-- realidad, esta es una buena oportunidad para discutir por un momento. Observe el momento en que type-- detenerlo. Para. DE ACUERDO. Observe el momento en que escribe la letra C, ver la parte inferior de la pantalla. A-T- S. Lo que hace la parte inferior de esta pantalla, mi ficha Red, sugerir que estÃ¡ sucediendo cada vez que se escriba una carta? Por desgracia, la rana es muy hoy distracciÃ³n o el trÃ©bol o lo que sea. Lo que estaba sucediendo cada vez que he escrito? Y permÃ­tanme aclarar la buffer y vuelva a escribirla. tan-- gritos. Cada vez que se escriba una carta, C- A- T- por lo que una nueva fila, obviamente, sigue apareciendo. Â¿QuÃ© cada una de las filas representan, en base a lo que hemos visto y discutido Â¿hasta ahora? AUDIENCIA: Una bÃºsqueda? DAVID J. MALAN: Una bÃºsqueda o mÃ¡s genÃ©ricamente, una solicitud HTTP desde el navegador al servidor. Bueno, Â¿por quÃ© es mi navegador haciendo un HTTP solicitar cada vez que se escriba una carta? 

AUDIENCIA: [inaudible] DAVID J. MALAN: SÃ­, se da Me estos resultados de auto-completado. Al igual que, Â¿de dÃ³nde Ã©stos resultados de la bÃºsqueda vienen? Bueno, cada vez que escriba una carta, Google envÃ­a mÃ¡s y mÃ¡s y mÃ¡s de la palabra que estoy escribiendo. Â¿Por quÃ©? Porque quieren darme una mejor y mejor, mejor sugerencia, una lista de sugerencias, por lo que la palabra Estoy intentando realmente completa. AsÃ­ que esto quiere decir, literalmente, cada personaje que se teclea en Google estÃ¡ siendo enviado, en Ãºltima instancia, en mayor, pero tambiÃ©n a veces uno a la vez con el fin de poner en prÃ¡ctica estas caracterÃ­sticas de auto-completado cuando los datos son, por supuesto, en la web. 

Ahora, vamos a echar un vistazo a lo que en realidad que sucede cuando hago clic en BÃºsqueda de Google. Y luego vamos a aprovechar este nosotros mismos. AsÃ­ que si me desplazo hacia abajo ahora a la muy primera solicitud que acaba de pasar. Observe lo siguiente. Fue enviado a un tiempo bastante largo URL-- https://www.google.com/search? y luego un montÃ³n de cosas. Veamos esto en realidad ahora en la pestaÃ±a del navegador en sÃ­. Vamos a deshacernos de la barra de herramientas aquÃ­. Esta es la pÃ¡gina de resultados de bÃºsqueda. Y noten que aquÃ­ estÃ¡ la URL. Ahora, probablemente puede adivinar lo que estÃ¡ pasando aquÃ­ en parte. AsÃ­, en primer lugar, una definiciÃ³n. Al parecer, esto es el destino donde se envÃ­a el formulario. Por eso, cuando he escrito en el palabras "gatos" y pulsa Enter, al parecer, Google enviÃ³ mi entrada de texto a esta URL que He destacado allÃ­, reducir la bÃºsqueda. Resulta que, en una direcciÃ³n URL, cualquier cosa que que ocurre despuÃ©s de un signo de interrogaciÃ³n es, a medida que seguimos diciendo, un par clave-valor que se introduce en el formulario o de alguna manera transmitida desde el navegador al servidor. 

AsÃ­ que cada vez que el tipo de entrada en una forma en la web y se envÃ­a como hemos estado discutiendo, a travÃ©s de un encuentro, uno de estos virtual sobres, los contenidos de ese envelope-- sÃ­, mantener conseguir rellenos fÃ­sicamente en el sobre en la clase hoy en dÃ­a, pero tecnolÃ³gicamente que es en realidad poner en la URL. AsÃ­ que, de hecho, que me tamizar a travÃ©s de este. Â¿DÃ³nde se ve la entrada del usuario? Â¿DÃ³nde se ve algo que yo mismo escribÃ­ aquÃ­ arriba? SÃ­, por lo que "gatos". Â¿Derecha? AsÃ­ que permÃ­tanme destilar este en algo mÃ¡s simple. Voy a eliminar todo lo relacionado esta direcciÃ³n URL que no entiendo, y yo sÃ³lo voy a dejar como esto- / search? q = gatos. Veremos donde q viene desde muy pronto, pero que se siente al mÃ­nimo cantidad de informaciÃ³n que he proporcionado. Y ahora voy a presionar Enter. Y note que todavÃ­a funciona. TodavÃ­a recibimos de vuelta un montÃ³n de gatos. AsÃ­ que Google es mÃ¡s elegante que esta en estos dÃ­as. Es 2016, no de 1999. AsÃ­ que hay otras cosas que mi el navegador envÃ­a al servidor. Pero esto es mÃ­nimamente todo lo que es necesario. 

Entonces, Â¿quÃ© estÃ¡ pasando? Bueno, en primer lugar quiero seguir adelante e ir de nuevo a Cloud9 y me dejÃ³ ir por delante y cerrar las pestaÃ±as antes. Y voy a hacer esto en mi poseer sÃ³lo por un momento. Voy a seguir adelante y crear nuevo archivo. Y voy a guardarlo como google.html. Y voy a muy quickly-- Voy a robar, en realidad, Parte de este texto sÃ³lo para ahorrar tiempo. Voy a pegar esto aquÃ­. Yo no me voy a molestar con cualquier estilizaciÃ³n este momento. Vamos a llamar a esta "Mi Google." Y voy a deshacerme de todo en el cuerpo. Y voy a hacer lo siguiente. PermÃ­tanme Ampliar. Formo acciÃ³n-- y como he mencionado brevemente antes les hablÃ© brevemente como me whoops-- se mencionÃ³ anteriormente, la acciÃ³n de una la forma es la que envÃ­a los datos a. AsÃ­ google.com/search. Y el mÃ©todo que desea utilizar puede ser una de dos cosas. O bien puede ser "conseguir", ya que mantenemos discutiendo, o puede ser "post". Por ahora, la frecuencia fundamental diferencia es, si se utiliza "conseguir" toda la informaciÃ³n que la Usuario facilite es enviado en la direcciÃ³n URL. 

Esto es grande para cosas como la bÃºsqueda motores y algunas otras aplicaciones, pero en quÃ© circunstancias usted no desea llenar un formulario y tener la informaciÃ³n a terminar la URL, como en la barra de direcciones del navegador? Â¿QuÃ© tipo de formas de hacer usted-- AUDIENCIA: [inaudible] DAVID J. MALAN: SÃ­, como quÃ©? PÃBLICO: Las contraseÃ±as. DAVID J. MALAN: SÃ­, por lo que se conecte a Facebook o algÃºn sitio web. Esa es la entrada del usuario un formulario, un cuadro de texto, pero es probable que no lo quiere aparecer en la URL del navegador. Â¿Por quÃ©? Es decir, tal vez hay alguna implicaciones para la seguridad de la red, pero mÃ¡s-- gustarÃ­a, mÃ¡s simplemente, si lo su compaÃ±ero de cuarto, su otro significativo, sus hijos, su cÃ³nyuge se ve a travÃ©s de su historial de navegaciÃ³n? No es su derecho contraseÃ±a existe en el historial del navegador. Que no se siente como un buen diseÃ±o. O incluso mÃ¡s tÃ©cnicamente, supongamos que usted estÃ¡ tratando subir una foto a Flickr o Facebook o wherever-- que es la entrada del usuario, aunque que es un poco mÃ¡s cÃ³mo interesting-- CÃ³mo puedo cram una imagen en la barra de direcciones? De alguna especie de no se puede. De alguna manera se puede. Pero, en serio, estoy en apuros imaginar hacer eso. AsÃ­ que necesito otro mÃ©todo para la posibilidad de subir fotos a un sitio web, y que otro mÃ©todo se llama "post". Pero por ahora, sÃ³lo hablaremos de "HÃ¡gase", que es el mÃ¡s simple de los dos. Simplemente pone toda la la entrada del usuario en la URL. 

AsÃ­ que aquÃ­ estÃ¡ la forma que estoy creando. Quiero una entrada. Â¿Y sabes quÃ©? Voy a tomar una conjetura aquÃ­. Voy a recordar mi entrada "q" por "consulta." Y creo que esto es una de las diseÃ±os originales, tal vez, a partir de 1999. Y a continuaciÃ³n, el tipo de esta entrada es sÃ³lo va a ser "texto". Y luego voy a tener otra entrada que no necesita un nombre, como veremos pronto ver, el tipo de los cuales es "enviar". Y esto va a dame un botÃ³n especial. Y eso es. 

AsÃ­ que dÃ©jame ir adelante y guardar este archivo. Voy a volver a mi navegador y vaya a google.html. Entrar. Y es una especie de escasa por decir lo menos. Pero dÃ©jame ir por delante y la bÃºsqueda de "gatos". Y noto que estoy actualmente en esta direcciÃ³n URL Cloud9. Pero el momento en que haga clic en este, Â¿dÃ³nde se espera que voy a terminar? 

AUDIENCIA: Google. 

DAVID J. MALAN: Google. AsÃ­ que haga clic en Enviar. Y, de hecho he reimplementado Google. Â¿Derecha? Es mÃ¡s sencillo. Es mÃ¡s ligero. Es decir, mi cÃ³digo es claramente mejor que de ellos, desde el desastre en el que vimos anteriormente. Â¿Y sabes quÃ©? Voy a darle vida a esto un poco. No he mencionado esto antes. Hay etiquetas como H1, para la rÃºbrica 1, el tÃ­tulo mÃ¡s importante de una pÃ¡gina. "Mi Google," llamarÃ© a esto. PermÃ­tanme volver a cargar. Se ve un poco mejor ya. Y, en realidad, Â¿sabes quÃ©? Tengo ya-- mentÃ­. Le dije que no iba a labrar esto, pero voy con el estilo de este como antes. Y mi cuerpo va a ser, digamos, el centro text-align. Se ve mÃ¡s como Google ya. 

Necesito un salto de lÃ­nea, sin embargo, para ese botÃ³n Enviar. Y resulta, que puede usar pÃ¡rrafos, o puede simplemente decir mÃ¡s literalmente, dame una lÃ­nea de ruptura aquÃ­-- la etiqueta br. Y si vuelvo a cargar esto, ahora se va allÃ­. Es un poco feo, asÃ­ que podrÃ­a hacer mÃºltiples saltos de lÃ­nea, pero no vamos a entrar aquÃ­ demasiado codicioso. AsÃ­ que ahora vamos a ver si funciona para "perros." Parece que funciona para perros "," tambiÃ©n. Â¿CuÃ¡l es la comida para llevar convincente aquÃ­? Uno-- no fue un gran salto para introducir un poco mÃ¡s de las etiquetas, al igual que la etiqueta de formulario en la etiqueta de entrada. Pero mÃ¡s fundamentalmente es decir, todo lo que estamos haciendo estÃ¡ aprovechando nuestra comprensiÃ³n de HTTP y el hecho de que las formas en Ãºltima instancia alteran lo que estÃ¡ en la direcciÃ³n URL del navegador, y asÃ­, por lo tanto, podemos mecÃ¡nicamente proporcionar informaciÃ³n a un servidor al hacer un formulario HTML y saber que el servidor HTTP entiende, Al igual que nuestro cuerpo entiende, como, agitando la mano, el mismo protocolo, y asÃ­ volvamos la respuesta que en Ãºltima instancia esperamos. 

AsÃ­ que vamos a tratar de hacer una Lo Ãºltimo que ahora con el mÃ³vil, y voy a make-- Voy a aÃ±adir este cÃ³digo para las diapositivas. AsÃ­ que si desea retocar, se sin duda puede tomar desde allÃ­. Pero voy a ir adelante y hacer una cosa. Voy a seguir adelante y abrir mi Ã­ndice de page-- hola mi pÃ¡gina como antes, que tiene una gran cantidad de este texto imitaciÃ³n de AmÃ©rica, o sin sentido texto latino, y has-- parece que este en este tamaÃ±o de fuente. Pero dÃ©jame seguir adelante y hacer esto. Voy a entrar en Cloud9. Y usted no tiene que hacer este paso. Voy a hacerlo yo mismo. Voy a hacer clic en Compartir. Y esta es una caracterÃ­stica acaba de Cloud9, con lo cual Puedo hacer mi entorno pÃºblico. 

Y sÃ³lo por el hecho de demostraciÃ³n, vamos a hacer esto. Voy a hacer pÃºblica mi solicitud. Tenga en cuenta que me estÃ¡ advirtiendo, soy Yo si quiero hacer esto, porque esto va a hacer que todos en el mundo, ya sea que estÃ©n aquÃ­ ahora o ver el vÃ­deo mÃ¡s tarde en el Internet capaz de ver lo que veo. Pero eso esta bien. Voy a decir "Hecho". Y deja que te animo, si lo hiciera este correctly-- dÃ©jame probarlo primero. Vaya por delante, si no mente-- en un navegador en su ordenador, vaya a esta direcciÃ³n URL, y es de esperar verÃ¡ mi texto latino. Y para que quede claro, que es No se ejecuta en mi ordenador portÃ¡til. EstÃ¡ en la nube. EstÃ¡ en Cloud9, literalmente, pero He hecho pÃºblica mi espacio de trabajo de manera que cualquier usuario de Internet puede acceder a mi pÃ¡gina de inicio AmÃ©rica. 

Ir a la misma URL en su telÃ©fono, si pudiera. Si te costarÃ¡, sin embargo, puede simplemente mirar por encima de un hombro. AUDIENCIA: [inaudible] DAVID J. MALAN: Lo siento? AUDIENCIA: [inaudible] DAVID J. MALAN: SÃ³lo palabras latinas. Eso es todo. Pero eso es lo que deberÃ­a ver. 

AUDIENCIA: SÃ­. DAVID J. MALAN: SÃ­. SÃ­. DE ACUERDO. AsÃ­ que puedo aguantar su telÃ©fono por un momento? Por lo tanto, es de esperar, si accede ella, que debe ser casi ilegible. Es still-- quiero decir, es ilegibles debido a la AmÃ©rica. Pero tambiÃ©n es ilegible Â¿por quÃ© otra razÃ³n? Al igual, lo que desagrada al respecto? PÃBLICO: Es pequeÃ±o. DAVID J. MALAN: Es sÃºper, sÃºper pequeÃ±o. Entonces, Â¿cÃ³mo podemos solucionar este problema? Es super, super pequeÃ±a en el telÃ©fono de Victoria y, si se ha tirado tÃº mismo, probablemente pequeÃ±a en su telÃ©fono, asÃ­, a menos que tienen la configuraciÃ³n de accesibilidad habilitadas. Â¿Que es eso? Se podÃ­a pellizcar y zoom, que es viable, pero entonces sÃ³lo se ve unas pocas palabras a la vez. AsÃ­ que espere un minuto. Yo sÃ© cÃ³mo solucionar este problema. Â¿Derecha? PodrÃ­a usar CSS, y podrÃ­a cambiar el tamaÃ±o de fuente de 12 puntos a 24 puntos. Pero el efecto secundario de que, por supuesto, va a ser ahora, en un sobremesa o un portÃ¡til, Ahora el texto es dos veces mÃ¡s grande. Y por lo que serÃ­a la clase de ser agradable para distinguir entre los dispositivos, y resulta que hay son formas de hacer eso. Hay varios diferentes maneras, de hecho, por lo que el uso de CSS y las caracterÃ­sticas mÃ¡s elegantes que no vamos a entrar en gran detalle, se puede consultar en esencia el navegador y decir, Si la pantalla es mÃ¡s pequeÃ±a que esta muchos pÃ­xeles, utilizan esta fuente. Si la pantalla es mÃ¡s grande que esto muchos pÃ­xeles, utilizan esta otra fuente. 

Puede ser incluso aÃºn mÃ¡s elegante. Si alguna vez has estado en una pÃ¡gina web que, en un escritorio, tiene un gran menÃº tal vez fuera a la lado, y luego todo el contenido es el lado de que menÃº-- que es una especie de un paradigma comÃºn. MenÃº a la izquierda, el contenido a la derecha, o viceversa. En realidad no trabajar en el mÃ³vil cuando su pantalla es sÃ³lo esta cantidad de pÃ­xeles de ancho. AsÃ­ que mÃ¡s comÃºn en el mÃ³vil es, su menÃº de repente obtendrÃ¡ colapsado, y hay que haga clic en un botÃ³n para verlo, o el sitio web pondrÃ¡ el menÃº por encima de ella y poner el contenido debajo de ella. Y se puede poner en prÃ¡ctica estos cosas en mÃºltiples formas. Usted puede pedir a sus programadores, Ey, equipo, en cualquier momento ves una solicitud HTTP desde un Android dispositivo, un dispositivo de Microsoft, un Google dispositivo, un dispositivo de Apple, utilice esta tamaÃ±o de la fuente y el uso de este diseÃ±o del menÃº, o bien utilizar el diseÃ±o de este defecto mÃ¡s grande. 

Ahora, con lo tÃ©cnica fundamental hoy podrÃ­an utilizar los ingenieros saber si se trata de un iPhone, un telÃ©fono con Android, un ordenador portÃ¡til, un escritorio visitar el servidor de la empresa? En el que no consiguen que la informaciÃ³n? 

AUDIENCIA: Cabecera? 

DAVID J. MALAN: SÃ­, la cabecera HTTP. AsÃ­ que cada peticiÃ³n HTTP procedente de sus clientes a sus servidores incluir, dentro de esa virtuales sobre, en su conjunto manojo de cabeceras HTTP, uno de los cuales es el navegador y el sistema operativo incluso, si es que quiere ese nivel de detalle. Ahora, es una cadena de aspecto crÃ­ptico, pero existe un software que acaba de simplificar eso, y sÃ³lo se puede pedir en la programaciÃ³n code-- PHP, Java, C ++, whatever-- quÃ© telÃ©fono es esto- quÃ© dispositivo es el uso de este usuario? Y entonces se puede decir, mostrar que esta versiÃ³n de la pÃ¡gina web si se trata de un telÃ©fono. Mostrarles esta versiÃ³n de la pÃ¡gina web si se trata de un ordenador portÃ¡til o de sobremesa. Pero usted ni siquiera necesita la complejidad del lado del servidor. Usted puede hacer incluso el mÃ¡s simple de las cosas. 

Voy a hacer esto. Voy a seguir adelante en Cloud9 mi entorno, y voy a aÃ±adir una etiqueta que vio en Google antes. Se llama la metaetiqueta. Y nunca me acuerdo de Ã©ste, por lo Voy a transcribir aquÃ­. meta name = "viewport" y luego content = "width = anchura del dispositivo, intital escala = 1 "y eso es todo. 

Por lo que bien podrÃ­a ser como un encantamiento mÃ¡gico. No es del todo clara, pero esto no tiene algo que ver con el visor, y la vista es sÃ³lo el cuerpo de una pÃ¡gina web, la regiÃ³n rectangular que define la mayor parte de la pÃ¡gina. Y esto es sÃ³lo diciendo el navegador, Â¿sabes quÃ©? Hacer que el ancho de esta pÃ¡gina efectivamente igual a la anchura del dispositivo. En otras palabras, no asuma que se Tiene una especie de espacio ilimitado. Suponga que sÃ³lo tiene tanto espacio que el dispositivo en sÃ­ es grande. Y por lo que ahora, si vuelvo a cargar esta en mi navegador, no veo ningÃºn cambio. Pero si hiciera esto y correctly-- dÃ©jame cruzar mi fingers-- si todo lo que recargar sus telÃ©fonos, Â¿verdad ver un cambio de peso? SÃ­, es que-- 

AUDIENCIA: [inaudible] DAVID J. MALAN: SÃ­. DE ACUERDO. AsÃ­ que sin duda mÃ¡s fÃ¡cil de leer ahora? AÃºn pequeÃ±o, para ser justos, pero no tan pequeÃ±a como para ser inmanejable. Y no me resultaba difÃ­cil reemplazar este aÃºn mÃ¡s con CSS o en el lado del servidor, pero cada vez mÃ¡s lo que eres ver para mÃ¡s y mÃ¡s caracterÃ­sticas se aÃ±ade a environments-- del lado del cliente JavaScript, como veremos maÃ±ana, CSS, y por lo HTML-- que todas estas consultas se puede hacer en el cliente de manera que se molesta al servidor mucho menos y no a tener que seguir el ritmo, para ejemplo, el ataque constante de nuevo del sistema operativo versiones, nuevas versiones de navegadores. Puede dejar que el navegador preguntar al dispositivo, lo grande que eres, y luego hacer algo lÃ³gicos decisiones en base a eso. Pero veremos mÃ¡s oportunidades para decisiones lÃ³gicas maÃ±ana en el contexto de un lenguaje de programaciÃ³n. 

Por lo tanto, cualquier pregunta, entonces, en el desarrollo web? Hoy en dÃ­a no es la programaciÃ³n web, por en sÃ­, ya que la mayorÃ­a todo lo que hicimos era muy estÃ©tico, si se quiere. No hay en la toma de decisiones el cÃ³digo que hemos escrito, y por eso es que el HTML es un margen de beneficio idioma, no es un lenguaje de programaciÃ³n. Pero maÃ±ana vamos a tomar una mirada rÃ¡pida, en Ãºltima instancia, en JavaScript, que es una programaciÃ³n real el lenguaje que nos permite hacer un poco mÃ¡s. 

Â¿Alguna pregunta? Bueno, permÃ­tanme proponer dos oportunidades opcionales para hacer la tarea. Una es-- estos Cloud9 cuentas no expirarÃ¡. Le invitamos a utilizar a jugar con. Es el nivel de servicio gratis. Darse cuenta de que, si al crear su espacio de trabajo, se hizo pÃºblica, eso significa que cualquier persona en el Internet puede ver lo que estÃ¡s escribiendo. AsÃ­ que tal vez sÃ³lo tener en cuenta No avergonzarse si usted estÃ¡ poniendo su primera banda pÃ¡gina pÃºblicamente por ahÃ­ por accidente, pero nadie va a saber para buscar allÃ­ de todos modos. 

Y dos-- dejarme lanzo esta URL, asi, especialmente si usted entrÃ³ hoy una poco menos cÃ³modos que otros, sin saber quÃ© significa todo esto. Darse cuenta de que mucho mÃ¡s de este video, el cual es a la vez una buena manera de conciliar el sueÃ±o y tambiÃ©n para reÃ­rse mientras Al hacerlo, tambiÃ©n tiene una gran cantidad de interesantes socialmente y discusiones relevantes para la seguridad en ella de John Oliver, aunque un comediante. 

Pero si no hay mÃ¡s preguntas, Esto nos lleva a la recepciÃ³n. Entonces, Â¿por quÃ© no me enciendo la mÃºsica. No debe haber bebidas y aperitivos fuera. Estoy feliz de mezclarse durante el siempre y cuando la gente le gustarÃ­a, responder a las preguntas mÃ¡s de uno-a-uno. Pero, por lo demÃ¡s, de nada para despegar en cualquier momento, y nos veremos de nuevo maÃ±ana por la maÃ±ana por un poco mÃ¡s. Muy bien, gracias.