Bienvenido a la primera entrada sobre html5 del Curso Html5 y Sass, recuerda que durante el curso una entrada estará dedicada a html5 y otra a sass, ambas temáticas pueden combinarse en una sola entrada cuando sea necesario explicarlos juntos.
Como ya sabes HTML5 (HyperText Markup Language) es un lenguaje de marcado o de etiqueta que nos ayuda a crear la estructura de nuestra página web / aplicación usando elementos llamados etiquetas (tags).
Es muy sencillo aprender a crear la estructura básica de una web con el lenguaje html5, lo difícil es comprender como usarlo de manera adecuada y aprovechar su potencia y flexibilidad.
Piensa en las etiquetas html5 como la estructura de un edificio o el esqueleto de un organismo vivo. Cuanto mejor sea la estructura, más perdurarán en el tiempo.
Vamos a esforzarnos al máximo por escribir un código html5 limpio, conciso y flexible.
La semántica en una estructura html5
La semántica es el pan y la mantequilla del código html5, aunque por desgracia, a mucha gente no termina gustando este sabor.
Aprender html5 de forma semántica elevará tu velocidad, calidad y comprensión de tu código. Llevándote al nivel pro en términos de desarrollo de buenas páginas webs y apps flexibles.
Además te permite pensar de forma modular. Dividir una estructura grande en pequeñas partes y reutilizar trozos de tu código en cualquier sitio de tu estructura.
Ventajas de escribir de forma semántica
- Mejora la legibilidad del código. Escribir código semántico mejora tu lectura a través de éste, permitiéndote identificar y segmentar visualmente de forma rápida lo que buscas.
- Aumenta la comprensión de tu estructura. Que entiendas tú código o el de alguien es importante si quieres un desarrollo ágil y sin errores; la semántica hace que el código hable por sí solo y diga qué es y cual es su función.
- Incrementa la modularidad del código. Permite que te guardes trozos de código para un uso posterior en otros contextos; creas piezas reutilizables (componentes) que te sirven para construir estructuras de muchas formas (imagínate que cada fragmento de tu html5 son piezas de LEGO).
- Reduce el código innecesario. Sobre todo de tags (etiquetas), limpiando así tu estructura y haciéndola más ligera.
Como desventaja (si es que se puede considerar una), es que a veces se crea una semántica que especifica más de lo necesario. Como todo en esta vida, el exceso de semántica no es beneficioso para nuestro código.
Ejemplos de semántica en html5:
Lista de personajes de Star Wars
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ul class="list characters type-jedi cols-2"> <li class="item character"> <a href="#" class="button" title="Elige a Obi-Wan Kenobi"> <span class="name">Obi-Wan Kenobi</span> <span class="the-force-power">60%</span> <span class="physical-force">100%</span> </a> </li> <li class="item character"> <a href="#" class="button" title="Elige a Yoda"> <span class="name">Yoda</span> <span class="the-force-power">120%</span> <span class="physical-force">70%</span> </a> </li> </ul> |
Vale, supongamos que molamos tanto que estamos trabajando en un juego de rol online de Star Wars. En este ejemplo he creado una minilista con dos valores (personajes) que puedes elegir.
Para esto es obvio que he usado una lista desordenada / unordered list (<ul>) que tiene la clase .list (porque es un componente de listado simple), la clase .characters (ya que esto es lo que contiene la lista), la clase .type-jedi (esta clase especifica el tipo de lista de personajes, en este caso son jedis, ya que podrían ser lista de personajes sith, cazarrecompensas o cosas peores) y por último la clase .col-2 que nos informa que los items se van a mostrar en dos columnas.
La lista contiene dos elementos <li> con las clases .item (puedes omitir usar esta clase si quieres) y .character (ya que en este caso los elementos de la lista son personajes).
Todos los elementos de nuestra lista contienen un botón cuyo objetivo es añadir el personaje seleccionado al juego, con el fin de escoger el que más te convenga.
El botón es un enlace (<a>) con la clase .button (porque eso es lo que es en este caso) y tiene su obligatorio atributo html, title. Obviamente el botón debería contener algo de texto, así que he creado tres elementos span, porque aquí tenemos tres posibles tipos de valor: el nombre del personaje (con la clase .name), el valor de la Fuerza (con la clase .the-force-power) y la fuerza física (.physical-force). Aquí usamos tres elementos span porque queremos que nuestro botón sea lo más modular posible y personalizable, así si queremos añadir alguna propiedad CSS a otro elemento entrante podemos hacerlo sin afectar a los otros elementos span restantes.
En el ejemplo hemos hecho uso de la semántica y de la reutilización (porque podemos usar cualquiera de estas piezas en cualquier parte del código html, incluso en otro contexto). Observa como todo ocupa su lugar natural en la estructura de tu html y lo claro que está todo para ti y para cualquiera que lea el código. Esto es lo bueno de la semántica 😀
Comentarios feedback
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="feedback"> <span class="client"> <img class="avatar" src="img/samples/avatar-1.jpg" width="240" height="240" alt="Avatar" /> <span class="name">Jane Doe</span> </span> <span class="quote"> <span class="icon main"></span> <span class="icon right"></span> <span class="content">Feedback Paragraph</span> </span> </div> |
En este ejemplo he construido un componente de feedback (comentarios) compuesto por un avatar con un nombre y el mensaje del feedback.
Estás son las partes principales del componente, ahora vamos a diseccionarlo mejor: el componente está envuelto en un elemento padre (parent element) que en este caso es un div con la clase .feedback; después tenemos los hijos directos de este elemento, que son dos elementos span, uno con la clase .client (que representa la persona / cliente que dejará el feedback) y otro con la clase .quote (que es el feedback actual dado).
El elemento con la clase .client contiene un elemento imagen (img) para la foto de avatar, y otro elemento span con la clase .name (el nombre del autor del feedback). El elemento con la clase .quote contiene otros 3 elementos span, dos de ellos son font icons y el otro es el cuerpo del feedback. Te habrás dado cuenta e que ambos iconos tienen la elemental clase icon y una clase secundaria (.main o .right).
La clase secundaria describe mejor la intención de cada icono, la clase .main nos dice que es es el icono principal usado en el quote (como puede ser las típicas comillas «), y la clase .right es una helper class o clase asistente. Uso la clase .main en un elemento que representa un icono cuando quiero señalar que este es el icono principal y que el resto son iconos adicionales.
Las helper classes son aquellas clases que te «ayudan» a hacer algo adicional con tu elemento, ampliando su comportamiento estándar. Hazte una idea de lo que es una helper class con estos ejemplos:
.big(incrementa el font-size de un elemento),.indented(anida el texto de un elemento),.right(desplaza un elemento con un float:right a la derecha) y así sucesivamente.
El último elemento span sostiene el texto del feedback y tiene la clase .content (porque aquí está el contenido principal del componente feedback).
Ahora que tenemos hecho el componente, puedes jugar con el como tú quieras. Puedes borrar el elemento con el icono del feedback, borrar la imagen de avatar, incluso crear una lista de feedback rápidamente reutilizando el componente: todo lo que tienes que hacer es cambiar el elemento div por un elemento li, duplicarlo cuantas veces desees y luego envolver todos los elementos <li> dentro de una lista desordenada <ul> como esta:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!-- FEEDBACKS --> <ul class="list feedbacks"> <!-- FEEDBACK 1 --> <li class="feedback"> <span class="client"> <img class="avatar" src="img/samples/avatar-1.jpg" width="240" height="240" alt="Avatar" /> <span class="name">Jane Doe</span> </span> <span class="quote"> <span class="icon main"></span> <span class="icon right"></span> <span class="content">Feedback 1 Paragraph</span> </span> </li> <!-- FEEDBACK 2 --> <li class="feedback"> <span class="client"> <img class="avatar" src="img/samples/avatar-2.jpg" width="240" height="240" alt="Avatar" /> <span class="name">John Doe</span> </span> <span class="quote"> <span class="icon main"></span> <span class="icon right"></span> <span class="content">Feedback 2 Paragraph</span> </span> </li> <!-- FEEDBACK 3 --> <li class="feedback"> <span class="client"> <img class="avatar" src="img/samples/avatar-3.jpg" width="240" height="240" alt="Avatar" /> <span class="name">Johnny Doe</span> </span> <span class="quote"> <span class="icon main"></span> <span class="icon right"></span> <span class="content">Feedback 3 Paragraph</span> </span> </li> </ul> <!-- //FEEDBACKS --> |
Como resultado, puedes crear una lista de feedback usarla y reutilizarla donde quieras. Semantic rules!
Ya tenemos un código y estructura html5 fácil de entender, modificar y reutilizar 😀
: Uso de la semántica en tu estructura html5){kind=link}