HTML5 y CSS3 no son dos siglas meramente, hacen referencial al futuro en la evolución de dos de los lenguajes que soportan la web, uno dedicado dar estructura (HTML o HyperText Markup Language) y el otro a estilo (CSS o Cascading Style Sheets) .
HTML5
El primero de los mencionados anteriormente es la 5ta revisión del lenguaje, proceso donde se depura y se adicionan nuevas funcionalidades. No se limita solo a crear nuevas etiquetas o atributos, sino que incorpora muchas características nuevas y proporciona una plataforma de desarrollo de complejas aplicaciones web (mediante los APIs).
HTML5 está destinado a sustituir no solo HTML 4, sino también XHTML 1 y DOM Nivel 2. Esta versión nos permite una mayor interacción entre nuestras páginas web y el contenido media (video, audio, entre otros) así como una mayor facilidad a la hora de codificar nuestro diseño básico.
Algunas de las nuevas características de HTML5 serían:
- Nuevas etiquetas semánticas para estructurar los documentos HTML, destinadas a remplazar la necesidad de tener una etiqueta
<div>que identifique cada bloque de la página. - Los nuevos elementos multimedia como
<audio>y<video>. - La integración de gráficos vectoriales escalables (SVG) en sustitución de los genéricos
<object>, y un nuevo elemento<canvas>que nos permite dibujar en él. - El cambio, redefinición o estandarización de algunos elementos, como
<a>,<cite>o<menu>. MathMLpara fórmulas matemáticas.- Almacenamiento local en el lado del cliente.
CSS3
Complementando el lenguaje HTML se encuentra por otra parte las Hojas de Estilo en Cascada o lo que conocemos como CSS (Cascading Style Sheets), estas definen las reglas de estilo y representación de los contenidos de las páginas web en los diferentes dispositivos de visualización (Móviles, PC, Tablets, etc.)
Principales características
1. Atributo gradiente de colores en borde con CSS y Firefox: Posibilidad de definir un gradiente de color en el borde de los elementos con CSS, en un atributo no estándar de Firefox.
2. Bordes redondeados en CSS 3: Las características de CSS 3 incluyen bordes redondeados, a través del atributo border-radius, que define la curvatura que debe tener el borde del elemento.
3. Múltiples imágenes de fondo con CSS: Cómo conseguir que un elemento de la página tenga varias imágenes de fondo a la vez, con CSS básico y con características de CSS 3.
4. Colores RGBA en CSS 3: Veremos qué son los colores RGBA y su notación, que se incluyen en la especificación de Hojas de Estilo en Cascada CSS 3.
5. Word-wrap en CSS 3: Una propiedad de CSS 3 que sirve para romper las palabras que son demasiado largas y no caben enteras por la anchura de una caja.
6. Textos multi-columna con CSS 3: CSS 3 incorpora nuevos atributos para que el navegador se encargue de producir texto multicolumna, es decir, que maquete directamente el texto en varias columnas sin tener que hacer nosotros nada.
7. Bordes con imágenes en CSS 3: El atributo border-image y varios otros de CSS 3 harán posible la utilización de imágenes como bordes de los elementos de la página, sin código HTML especial, simplemente con hojas de estilo.
8. Sombras en CSS 3 con box-shadow: Crear sombras en CSS3 con el atributo box-shadow. Por fin podremos aplicar sombras a los elementos de la página, sin usar imágenes, Javascript ni nada extra, simplemente con un atributo de CSS 3.
9. Resplandor exterior con CSS3: Cómo realizar un elemento que tenga un resplandor exterior con CSS3 y la propiedad box-shadow.
10. Propiedad background-origin de CSS 3: La propiedad de CSS 3 background-origin permite decidir la posición de la imagen de fondo con respecto al borde, padding o el contenido del elemento.
11. Atributos CSS3 overflow-x y overflow-y: Descripción de los atributos de CSS3 overflow-x y overflow-y, que sirven para definir cómo renderizar un contenido cuando sobrepasa los límites de un contenedor en la horizontal o vertical.
12. Introducción a @font-face de CSS: Fuentes en CSS 3. Sintaxis y principales características de la regla CSS @font-face, que nos permite utilizar cualquier tipografía en una página web.
13. Sombras en el texto con text-shadow de CSS: Cómo aplicar sombras y otros efectos en los textos con CSS y el atributo text-shadow.