Hablemos de escribir
código limpio. Cuando hablo de código
limpio, hablo de aprender cómo escribir código que va a funcionar en
tantos dispositivos como sea posible. Para hacerlo, necesitas saber un poco
de document object model, también llamado DOM. Cuando HTML5
fue desarrollado el principal objetivo
era ajustarse al estándar. Todas las nuevas características
deberían basarse en HTML, CSS, DOM y Javascript, y tienes la oportunidad de
aprender cada uno de ellos. Pero quiero hablar
de DOM un poco porque te ayudará a entender
el HTML un poco mejor. Una cosa sobre los científicos en
computación como yo, es que amamos los árboles. No como los árboles de fuera
que son verdes y bellos en otoño. Nos gustan los
árboles matemáticos. Estas estructuras como árboles que
podemos probar si son válidos o inválidos. Cuando hablamos del HTML
como un árbol, nos referimos a la idea de que en cada
raíz del árbol crearemos HTML. De ese árbol cuando decimos, "Voy a crear un documento HTML". Queremos dos partes. Queremos el encabezado
aquí, y queremos el cuerpo. En el encabezado
queremos mantener toda la información que el usuario
no va a ver la mayoría del tiempo. La única diferencia es que
podríamos hablar del título, pero lo que tendremos es cosas
escondidas que a nadie le importan. En el cuerpo es donde vamos a aprender
a colocar las etiquetas de HTML5. Hablemos de HTML
como un árbol. En este caso, te muestro
esta idea de que en la raíz cada página HTML debería ser lo
que llamamos la etiqueta HTML. El tipo de cosa que dice, hagamos que el navegador sepa. Voy a darte ciertas etiquetas,
así es como quiero que funcionen. Si no lo vemos
como una imagen, puedo también decirte que cada árbol tiene tres partes
como un documento bien formado. El doctype, que es la versión
de HTML que vas a usar. El head es los metadatos o
información extra, y el body. El body es el contenido
que se muestra. Lo que la mayoría de la gente recibirá
cuando hagan el ciclo de solicitud respuesta. Hablemos del doctype. Eres muy afortunado. Cuando estaba creando páginas
web al inicio y estábamos en HTML4, teníamos que dar con todas estas
diferentes formas de explicar si el HTML 4 tenía estándares muy
estrictos o si era transicional. En HTML5, es muy
simple decir, "No , solo hay una única cosa y se llama
DOCTYPE HTML" y está todo definido. El encabezado que se encuentra
dentro de la etiqueta head, tendremos toda la información
adicional usada por el navegador. Por ejemplo, podrías decir el lenguaje
en el que estás creando tu página. Podrías incluso incluir, y si realmente quieres incluir
cuál es el título de tus páginas. Cuando hablo del título no hablo del
tipo grande de encabezado que ves. Hablo de la pequeña cosa que
ves en la pestaña de tu navegador. Después, podrías querer agregar
archivos de soporte también. Podrías querer tener archivos
CSS que darán estilo a tu página, o Javascript que puedes añadir
en diferentes interacciones, o realmente cualquier tipo
de adiciones que harán que cambie la manera en que la gente
vea e interactúe con tu sitio. Excepto el título, los metadatos
no se presentan, la gente no los verá. Lo que la gente sí verá es la información
que está en la etiqueta body. La etiqueta body es
la masa de tu página. Es muy importante que escribas código
bien formateado o con estructura de árbol que te asegure que cada
etiqueta tiene un final. Que no estás colocando
etiquetas en órdenes raros. La mayoría del contenido del cuerpo
se muestra en el navegador, pero de vez en cuando hay
algún metadato allí también. Pero no abordaremos
esto en esta clase. Vamos a ver un ejemplo. Justo aquí, tengo un archivo
llamado template.html, te estoy mostrando
el código en la pantalla. ¿Puedes encontrar las tres partes
de un documento bien formado? La primera cosa que
verás es el doctype. Lo tenemos justo aquí. Haciéndote saber que es
un documento HTML5. Luego tenemos la etiqueta de HTML,
que era la raíz de nuestro árbol científico, estoy haciendo saber a la gente que el
lenguaje que quiero mostrar es inglés. En la sección de encabezado,
tenemos los metadatos. Donde nos dirá
cosas como, "eh, sé que hay muchos
teclados diferentes y formas de representar
letras en todo el mundo. Quiero que uses
algo llamado UTF-8". No te preocupes,
solo úsalo cada vez. Luego la siguiente parte de los metadatos
es el título que queremos que diga, "Mi primera página".
Eso es todo. Son dos de las tres partes. La última parte
de la etiqueta body que muestra el contenido que
queramos ver en la pantalla. Veamos esto en el navegador.
¿Qué tenemos? Tengo el título
aquí arriba, y el contenido a
mostrar aquí abajo. He escrito el código, el próximo paso es que deberías
siempre validar el código. "He escrito un código
que tiene buen aspecto, pero se que los navegadores
son muy lindos y hacen que se muestren las cosas lindas
incluso si no has escrito buen código". Si vas al validador,
ese w3.org, puedes chequear cualquier sitio web para
ver si el código es válido y tienes tres opciones. Puedes subir la URL, puedes enviar un archivo, o puedes, de hecho, copiar
y pegar el código ahí mismo. En este caso, puse la URL de
template.html, le doy a "check", y ¡bien!, no me sorprende,
porque lo había preparado para este vídeo,
la comprobación tuvo éxito. No te preocupes
por los warnings. Los warnings, en general,
aparecen por formalidades. ¿Qué pasa si quieres validar un archivo, pero todavía
no está en Internet? Veamos rápido, paso a paso,
un ejemplo de cómo hacerlo. Digamos que quiero chequear
mi archivo template.html. Y quiero señalar que
entré y modifiqué el archivo y metí un
error intencionado. Deletreé mal la etiqueta
de cierre de <title>. así que miremos que pasa Si el navegador o el
validador lo detectan. Lo que voy a hacer es
ir a validator.w3.org, y voy a seleccionar la tercera opción:
"validar por entrada directa". Vuelvo a mi archivo, le doy a
control+A (o command+A en Mac) si estás en un PC control+C, Copié todo el código y ahora
lo pego en el validador. Le doy a "check", y si bajamos,
lo voy a ampliar. Puedes ver que
me dio dos errores. ¿Por qué tengo dos errores si
yo solo cometí un error? Es que los validadores
no son perfectos. El error que dice
que encontró dice, "Llegué al final del archivo
antes de lo esperado". La razón de que eso pase es,
veamos el segundo error, nos dice: "¡Oh! olvidaste
cerrar la etiqueta <title>". A veces un solo error puede
causar muchos mensajes. No te preocupes. Me han aparecido hasta
50 ó 60 errores que al corregir una línea de código se arreglaron
más del 80% de esos errores. Vuelvo a mi código, lo voy a corregir, a poner
</title> y a guardarlo. Lo vuelvo a copiar, pegar
y vuelvo a chequear. Esta vez, comprobación
completa sin errores. Entonces, para repasar, tenemos que seguir la estructura del
DOM si queremos una página bien formada. Seguir esa estructura consiste en usar
siempre las etiquetas de inicio y fin. Además, debemos cerrar las etiquetas
interiores antes que las exteriores. Esto significa que si
empezamos una etiqueta <title> tenemos que cerrarlo antes
de cerrar la etiqueta <body>. También debemos usar atributos válidos, es algo
de lo que vamos a hablar luego, cuando
hablemos de imágenes y de partes de la página que
necesitan información adicional. El problema con los navegadores es que
arreglan el código incorrecto por nosotros. Los llamo, "los padres
helicóptero del código". Dicen, "yo sé qué aspecto quieres que tenga, lo voy a mostrar
así en la pantalla". El problema es que no
siempre funciona para todos. El hecho de que tu sitio tenga buen
aspecto cuando lo ves en el navegador, no significa que
sea correcto. Hay que usar un validador
y chequear el código.