¡Hola, mundo!
Una de las ideas que tienes que tener más claras es que los diferentes elementos de HTML no representan propiedades *estéticas* de su contenido (como, por ejemplo, si un texto se muestra en negrita o si se ha de mostrar separado del texto precedente por un espacio vertical), sino únicamente propiedades *semánticas* (este texto enfatiza una determinada idea o este otro texto constituye un párrafo). Los aspectos estéticos se definen mediante lenguajes de estilo como CSS, que estudiaremos más adelante. Esta separación de presentación y contenido hace que el documento HTML sea independiente de la representación visual, táctil o auditiva que hagamos de él: en diferentes contextos podrían usarse diferentes hojas de estilo para el mismo documento; o un *screen reader* podría usar el contenido del bloque `nav` para permitir a una persona ciega elegir directamente qué sección del documento desea escuchar o consultar en un `terminal braille`_; o un programa que procesa automáticamente un documento HTML (por poner un ejemplo, un buscador) no tendría que lidiar con aspectos secundarios meramente cosméticos. Además, gracias a la *externalización* de los estilos en un fichero aparte, es posible reutilizar los mismos estilos en múltiples documentos de HTML sin tener que duplicar su definición. .. _`terminal braille`: https://en.wikipedia.org/wiki/Refreshable_braille_display .. Attention:: Una parte importante de la sociedad tiene alguna discapacidad (visual, motora, intelectual...), ya sea congénita o adquirida (por enfermedad, accidente o edad, por ejemplo), que le puede dificultar la interacción con una página o aplicación web si esta no se desarrolla adecuadamente bajo principios de accesibilidad que atiendan a la diversidad funcional de la sociedad. El uso de HTML como lenguaje de anotación semántica de contenido es uno de los principios fundamentales para cumplir este objetivo. HTML tiene aproximadamente un centenar de elementos diferentes, cada uno de ellos con un propósito semántico bien definido. En este curso vamos a estudiar un subconjunto de ellos, cuyo cometido puedes consultar en `MDN web docs`_ y que se muestran en este documento más completo_. .. _`MDN web docs`: https://developer.mozilla.org/en-US/docs/Web/HTML/Element .. _completo: _static/data/franz.html .. admonition:: Hazlo tú ahora :class: hazlotu La especificación estándar de HTML es un documento demasiado técnico para los propósitos de este curso y para la mayoría de los desarrolladores. La web `MDN`_ muestra esta información de forma más sencilla. En principio, acostúmbrate a usar esta web como referencia, frente a otras que pueden aparecer más arriba en los resultados de los buscadores. Usa la versión en inglés, ya que otros idiomas no siempre están actualizados. Estudia en `MDN web docs`_ todos los elementos de HTML que aparecen en este tema y asegúrate de que entiendes su propósito. Elementos adicionales, como los relacionados con los formularios, se estudiarán en otro tema. Reserva cita para tutoría si crees que no lo tienes todo claro. .. _MDN: https://developer.mozilla.org/en-US/ El código del documento HTML más completo enlazado anteriormente es el siguiente: .. literalinclude:: _static/data/franz.html :language: html :linenos: .. ficheros de código: ../../code/a.java Representación en memoria de un documento HTML ---------------------------------------------- Imaginemos que tenemos que escribir un programa que cargue en memoria un documento HTML para luego realizar algún procesamiento sobre sus elementos (por ejemplo, mostrarlo en la ventana de un navegador, extraer los datos de una tabla desde un programa en Java u obtener sus palabras para indexarlas en la base de datos de un buscador). La estructura de datos que se utiliza para ello es un árbol en el que cada nodo es un objeto que representa una parte del documento. El DOM (*Document Object Model*) es un conjunto estándar de métodos (una interfaz) independientes del lenguaje para interactuar con este árbol que suele, por tanto, llamarse *árbol DOM*. En un tema posterior estudiaremos algunos de los métodos del DOM, pero por ahora centrémonos en la forma del árbol. La siguiente figura muestra parte de un árbol DOM: .. figure:: https://upload.wikimedia.org/wikipedia/commons/5/5a/DOM-model.svg :target: https://commons.wikimedia.org/wiki/File:DOM-model.svg :alt: ejemplo de árbol DOM Árbol DOM por Birger Eriksson .. admonition:: Hazlo tú ahora :class: hazlotu Dibuja el árbol DOM de los documentos HTML que hemos estudiado anteriormente y utiliza la herramienta `Live DOM Viewer`_ para comprobar si tu solución es correcta. Observa en especial el tratamiento que se hace de los espacios en blanco entre dos elementos: estos blancos tienen su propio nodo asociado lo que puede ser necesario tener en cuenta al movernos por el árbol. HTML es un lenguaje en el que, en general, las secuencias de más de un espacio en blanco, tabulador o salto de línea se tratan como si fueran un único espacio en blanco. .. _`Live DOM Viewer`: https://software.hixie.ch/utilities/js/live-dom-viewer/ .. Hint:: Podría ser que en alguna ocasión necesites que entre dos elementos (por ejemplo, entre dos palabras) de tu página haya un espacio más grande lo habitual. Podrías en ese caso tener la tentación de usar la entidad `` `` (también `` ``), repetida varias veces, para obtener aproximadamente este espacio extra. Comprueba una vez cómo funciona (observa la diferencia entre ``a b`` y ``a b``) y luego no vuelvas a usarla nunca más (salvo para su verdadero propósito; sigue leyendo). Posteriormente veremos que, dentro del espíritu de separar presentación y contenido, son las hojas de estilo las que se han de encargar de definir de forma precisa la separación entre los elementos de una página. ¿Para qué existe entonces una entidad como `` ``? Su propósito es indicar al navegador que nunca introduzca un salto de línea en el punto en el que aparece la entidad (cosa que el navegador puede decidir hacer con cualquier otro espacio en blanco) y la interprete estrictamente como un espacio en blanco. Escribe una latitud como ``40° 41′ 21.4” N`` en un documento HTML, cambia el ancho de la ventana del navegador e intenta que se separen sus componentes en dos líneas consecutivas. Herramientas para desarrolladores --------------------------------- Los navegadores suelen incorporar de serie un conjunto de herramientas para facilitar el trabajo de los desarrolladores. En particular, a estas alturas del curso ya puedes usar el panel :guilabel:`Elements` de las *Chrome DevTools* para inspeccionar los distintos elementos de tu página; para ello, en el navegador Google Chrome (o Chromium) sitúa el puntero del ratón encima de alguna posición de tu página web y selecciona :guilabel:`Inspeccionar` en el menú contextual; otra opción para acceder a estas herramientas es abrirlas desde el menú :menuselection:`Más herramientas --> Herramientas para desarrolladores` del navegador o mediante el atajo de teclado :kbd:`Ctrl+Shift+I` o :kbd:`F12`. Existen extensiones similares para otros navegadores, como *Firebug* para *Mozilla Firefox*. .. admonition:: Hazlo tú ahora :class: hazlotu Familiarízate, siguiendo esta `página de su documentación`_, con la pestaña :guilabel:`Elements` del entorno de las Chrome DevTools, ya que te será extremadamente útil. Práctica después las distintas posibilidades con un documento de HTML más complejo como este_. .. _`página de su documentación`: https://developers.google.com/web/tools/chrome-devtools/dom/ .. _este: https://htmldog.com/guides/html/intermediate/sectioning/ .. Attention:: El panel :guilabel:`Elements` de las *Chrome DevTools* muestra una información potencialmente distinta de la opción :guilabel:`Ver código fuente la página` que aparece en el menú contextual de una página (atajo de teclado :kbd:`Ctrl+U`), ya que esta última opción muestra siempre el código inicial descargado por el navegador y no el HTML dinámico que el navegador tiene en memoria en un determinado momento, que puede ser diferente al inicial por manipulaciones del árbol DOM, como veremos en posteriores temas. .. Important:: Durante el ciclo de desarrollo de una aplicación web es habitual realizar cambios en los ficheros de la aplicación (por ejemplo en el documento HTML, en las hojas de estilo o en el código de JavaScript) y comprobar a continuación cómo queda la aplicación tras recargarla. En algunas ocasiones el navegador puede optar, pese a la recarga, por utilizar el contenido previo almacenado en la caché lo que nos puede llevar a la falsa impresión de que nuestros cambios no tienen efecto. Dentro de la pestaña ``Network`` de las Chrome DevTools existe una opción ``Disable cache`` que hace que el navegador ignore el contenido de la caché, pero solo mientras las herramientas de desarrolladores estén abiertas. Es recomendable tenerla siempre marcada. Codificación de caracteres -------------------------- Aunque hoy día la mayor parte de los sistemas operativos trabajan con la codificación de caracteres de longitud variable UTF-8, que permite representar todos los caracteres del juego de caracteres Unicode, es importante que seas capaz de saber qué codificación de caracteres se usa en tus documentos web, en los de terceros, o en tu servidor web. No tener esto en cuenta puede hacer que tu web se visualice incorrectamente en algunos navegadores. En esta actividad hablaremos de codificación de caracteres siguiendo `estas diapositivas`_. .. _`estas diapositivas`: _static/slides/070-codificacion-slides.html .. admonition:: Hazlo tú ahora :class: hazlotu Observa que indicar una determinada codificación en el atributo ``charset`` del elemento ``meta`` no garantiza que los caracteres del documento usen realmente dicha codificación. Usa un editor de textos que permita redactar documentos bajo diferentes codificaciones y graba tu documento HTML usando las codificaciones *UTF-8* e *ISO-8859-15* (Latin-1); prueba a poner el valor correcto y el incorrecto en la directiva ``meta`` y observa el resultado con los caracteres especiales al abrir el documento en el navegador. Estudia cómo se representan a nivel de bytes los caracteres en las distintas codificaciones con editores hexadecimales como `HexEd.it`_. .. _`HexEd.it`: https://hexed.it/ Alojamiento en un servidor -------------------------- Una página web normalmente se aloja en un servidor web. Si la máquina en la que lo hacemos fuera pública (nuestro ordenador personal normalmente no lo será), se podría acceder entonces al documento desde cualquier máquina conectada a internet usando convenientemente la URL del servidor. Existen muchos servidores web diferentes; algunos de los más conocidos son Apache HTTP Server (HTTPD), Internet Information Services, Apache Tomcat o Jetty. Mientras un programador desarrolla una aplicación web es habitual que lance un servidor en su máquina para ir probando sus cambios; en ese caso, el URL de acceso al servidor suele tener la forma ``http://localhost:8080`` donde ``localhost`` es el nombre de la propia máquina como *host* (IP 127.0.0.1) y ``8080`` es un puerto libre que es necesario indicar en el URL, ya que de no hacerlo el protocolo HTTP usa por defecto el puerto 80 (y HTTPS el 443), que estará normalmente reservado para comunicarse mediante HTTP con otros ordenadores. .. admonition:: Hazlo tú ahora :class: hazlotu Una de las formas más sencillas de lanzar un servidor local es usar el que Python incluye por defecto. Colócate en el directorio raíz del contenido que quieres servir y haz: .. code-block:: python -m SimpleHTTPServer Validación de documentos HTML ----------------------------- Un aspecto básico de los documentos HTML es que estos cumplan estrictamente con las directrices de HTML, tanto a nivel sintáctico (por ejemplo, las marcas de apertura y clausura respetan el anidamiento entre elementos) como semántico (no hay dos atributos *id* con el mismo valor o no se usan en un elemento atributos que correspondan a otros elementos). De esta manera, se allana el camino hacia la compatibilidad entre navegadores y la usabilidad de la página web; la validación, sin embargo, no asegura que el documento se vaya a ver como el desarrollador tiene en la cabeza ni que se muestre de igual manera en todos los navegadores. .. admonition:: Hazlo tú ahora :class: hazlotu Usa el `validador del W3C`_ para validar alguna de las páginas web usadas en actividades anteriores; corrige todos los errores que te indique el validador hasta conseguir validarla. Algunas de las cosas que puedes probar son: - dejar una etiqueta sin cerrar - mover el elemento ``meta`` de la cabecera al cuerpo (``body``) del documento - mover un párrafo (``p``) a la cabecera (``head``) del documento - eliminar el título (``title``) de la cabecera del documento - poner una imagen (``img``) sin el atributo ``alt`` - colocar un elemento de lista (``li``) fuera de la marca de lista (``ul``) .. _`validador del W3C`: http://validator.w3.org/ .. Attention:: En `determinadas ocasiones`_ el estándar de HTML permite omitir algunas etiquetas de clausura (por ejemplo, en ciertas ocasiones no es necesario cerrar la etiqueta ``