En la última jornada de Be Better Sessions el tema planteado fue “Introducción a HTML5 y CSS3”, las dos nuevas versiones que están revolucionando la red en estos momentos, exponiendo las nuevas funciones.
La comunión entre ambas versiones aporta mayores opciones a los diseñadores para realizar diseños más atractivos de una forma sencilla y eficaz sin tener que acudir a otras tecnologías como flash o Silverlight.
Un nuevo avance son los nuevos selectores en CSS3 amplían los de CSS2, introduciendo conceptos muy interesantes tales como:
- Ele[atr$='val']: Selecciona todos los elementos que terminen con un valor especifico
- Ele[atr*='val']: Selecciona todos los elemento en cualquier ubicación, un valor especifico.
- Ele:nth-child(n): Selecciona el enésimo hijo de su elemento padre. Este selector tiene diferentes versiones :
- Ele:nth-last-child(n)empezando por abajo,
- Ele:nth-of-type(n) enésimo elemento de su tipo
- ::before: Selecciona antes de un elemento para agregar contenido
- ::after: Selecciona después de un elemento para agregar contenido
- …
Las novedades de HMTL 5 se centraron sobre todo en la estructura del documento, con las nuevas etiquetas que nos ofrece HTML 5 se consigue una web más semántica y mejor estructurada tanto para lograr búsquedas más precisas y rápidas, como para mejorar el posicionamiento en buscadores (SEO), pudiendo estructurar cada contenido con más de un encabezado principal (H1).
Por otra parte se debatió la evolución y el significado semántico que adquieren las etiquetas en HTML5, pasando de las etiquetas <div> que carecían de un significado semántico para describir las áreas y apareciendo las nuevas etiquetas de HML5 con carácter personal, tales como:
- <header> Cabecera del documento
- <nav> Sección relacionada con la navegación.
- <article> Etiqueta que nos permite relacionar su contenido con un artículo.
- <section> Secciones del contenido.
- <aside> Etiqueta cuyo contenido el cual está relacionado levemente con el resto del contenido del documento.
- <footer> Sección que contendrá la información del pie de página, tal como copyrigth, autor, términos legales,…
- <audio> Etiqueta para audio.
- <video> Etiqueta para video.
- …
Estas dos últimas etiquetas son las más impactantes, ya que HTML4 carecía de estas opciones de inserción y control de elementos multimedia, normalmente teniendo que acudir a otros medios ajenos al HTML como flash.
Además, con HTML5 y CSS3 se facilita y homogeniza el trabajo entre diseñadores y programadores, pudiendo crear aplicaciones de internet enriquecidas (RIA) con elementos multimedia sin recurrir a otras tecnologías.
Asier Lopez/Iñaki Lorenzo
Enviar comentarios