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.