20 Feb Ejemplo de creación de página web con capas y migración a HTML5
Durante esta serie de apuntes de HTML hemos mencionado que el lenguaje de marcas sirve para dotar de estructura y contenido a un documento web.
Hoy veremos la etiqueta div y algunas otras que sirven para organizar y dotar de semántica a las páginas web.
Pero en primer lugar hagamos el símil de cómo se debería estructurar una página web comparándolo con un libro.
En un libro encontramos por este orden:
- Una portada.
- Un prólogo o introducción.
- Un índice.
- Un conjunto de capítulos dónde se desarrolla el contenido verdaderamente importante.
- Un epílogo.
- Una contraportada.
Todas estas partes las deberíamos encontrar en un escrito de calidad. Y si os fijáis en bloggers de calidad que se trabajan las publicaciones así suele ser…
El lenguaje de marcado es la herramienta que nos permite conseguirlo.
Este resumen tendrá 2 partes:
Estructuración de contenidos a la vieja usanza
Antiguamente o cuando tenemos dudas o no disponemos de una etiqueta en HTML5 adecuada para crear una capa usamos la etiqueta <div>.
La etiqueta <div> suele llevar algunos de los atributos class o id. Aunque también puede llevar algunos otros.
Una capa es un contenedor que agrupa informaciones relacionadas.
Volviendo al símil del libro, el vocabulario que se suele usar en jerga inglesa es el siguiente:
- Header (no confundir con head). Lo usaremos para designar la cabecera de un documento.
- Nav o menú para designar una lista de navegación.
- Main (lo usaremos para definir el contenido principal de un documento.
- Aside(lo usaremos para definir el contenido secundario anexo en una página web. En ocasiones veremos la palabra sidebar.
- Footer (servirá para designar un pié de página)
- Usaremos contenedores auxiliares con nombres ingleses como container y/o wrapper.
Algunas de las palabras anteriores dieron lugar a etiquetas HTML5 que veremos a posteriori.
La transformación de la siguiente propuesta de estructura web:
Derivaría en la siguiente resolución que se hizo en la pizarra:
Estructuración de contenidos con nuevas etiquetas HTML5
Entra las muchas novedades que la actualitzación del XHTML nos ha traído encontramos la inclusión de etiquetas semánticas que ayudan a aportar significado semántico a determinades secciones de un documento web.
De este modo, los motores de búsquedas saben interpretar mejor las páginas web y quedarse con la información más relevante.
Se ha estado hablando de HTML5 durante más de 10 años hasta que el stándard oficial salió a la luz en 2014.
Por el camino se han creado y deshecho muchas propuestas de etiquetas que han salido en todo tipo de medios especializados como revistas y blogs.
Como consecuencia, algunes etiquetas que parecía que saldrían a la luz finalment e no lo hicieron o si lo hicieron no con la intención inicial. (como ejemplos econtramos las etiquetas sidebar y menú.)
Existen muchas etiquetas importantes. Pero las imprescindibles para mi con el fin de dotar de estructura son las siguientes:
- <header> se recomienda sólo uno por documento web. A no confundir con <head>
- <nav> – se recomienda sólo uno por documento web.
- <main>
- <aside>
- <section>
- <article>
- <figure>
Después ya encontraríamos otras con el fin de dar significado semántico como <mark>, <blockquote>, <figcaption>, … que está bien recordarlas y usarlas pero que tampoco nos tienen que quitar el sueño.
Una posible solución para el ejercicio anterior podría ser la que se muestra en la imagen a continuación.
Notar que
- Únicamente se ha usado un <nav> en considerar la capa nav2 del aside de poca importancia.
- En el <main> hemos optado por poner <article> dentro de <section> aunque también hubiese podido ser los <section> dentro de <article>. Es una cuestión subjetiva. Puedes tener un escrito muy largo con varias secciones o viceversa
Querido lector, hasta aquí el ejemplo de hoy. Espero que las imágenes te puedan ser de utilidad para ponerte a escribir tu ahora también.
¡Da igual que lo hagas con Sublime o Brackets pero hazlo!
Enseguida verás que no es difícil, sólo requiere de práctica.
rafael
Posted at 09:12h, 20 febreroMuy buena, más contenido con menos instrucciones.