Es un nuevo concepto para la realización de sitios web y aplicaciones que se entrelazan con dispositivos móviles, nube o trabajos en la red. Tiene 3 características: estructura, estilo y funcionalidad.
Es considerado como un producto de combinación de HTML, CSS y JavaScript. Estas tecnologías son dependientes y actúan como una sola bajo la especificación de HTML5. HTML está a cargo de la estructura, CSS presenta esa estructura y su contenido en la pantalla y JavaScript hace el resto que es extremadamente significativo.
Etiquetas nuevas en HTML5
1-<header> Presenta información introductoria y es aplicado en varias secciones del documento, su propósito es contener la cabecera de la sección.
2-<section> Representa una sección general del documento, usado para construir varios bloques de contenidos de manera que puedan verse ordenados.
3-<footer> Se utiliza para representar información adicional sobre el dueño de la página.
4-<nav> Indica una sección de enlaces de navegación, como menú o índice. No es necesario que todos estén dentro de dicho elemento, solo los que son bloques de navegación.
5-<figure> Representa una porción independiente de contenido (por ejemplo, imágenes, diagramas o videos) que son referenciadas desde el contenido principal. Esta es información que puede ser removida sin afectar el fluido del resto del contenido.
Ejemplos de Código
CSS3
Es un lenguaje de diseño de páginas web, que se puede interpretar por todos los navegadores web, sin importar el dispositivo o sistema operativo. Permite una división lógica entre la estructura de la página web, que es manejada por HTML y la forma que es visualizada.
Este lenguaje ha venido desarrollándose desde 1999, que contiene varias novedades en donde se podrá realizar webs más elaboradas y dinámicas, con mayor separación entre estilos y contenidos y a la vez brindar soporte sin tener la necesidad de recurrir a trucos de diseñadores o lenguajes de programación.
Animaciones y transiciones
En CSS3, las transiciones se puede cambiar la apariencia y el comportamiento de un elemento cada vez que se da un cambio de estado (por ejemplo, cuando el cursor se posa sobre dicho elemento). Por otro lado, las animaciones permiten que tanto la apariencia como el comportamiento de un elemento se altere en base a fotogramas.
Ventajas
- Logra estilos y efectos visuales que antes solo se podían realizar por medio de tecnologías adicionales.
- Ahorra tiempo y trabajo al permitir seguir varias técnicas (bordes redondeados, sombras en el texto, en cajas, etc).
- Muestra varias hojas de estilo dependiendo el dispositivo que se este utilizando o dejar que el usuario la elija.
Desventaja
- No es posible hacer muchas cosas a diferencia de con JS.
Ejemplos de Código
Alinear verticalmente cualquier cosa.
Animación de Degradado de fondo.
Relación entre HTML5 y CSS3
Directamente en el archivo HTML: consiste en colocar dentro de la etiqueta <head> todo el código CSS, esta manera es ideal para cuando se están dando los primeros pasos, sin embargo no es la más recomendada ya que si tenemos muchos estilos en el mismo archivo, la edición de código va ser mucha más compleja.
A través de la etiqueta <link>: Está etiqueta nos permite vincular a un archivo HTML con otros archivos o documentos (en este caso es una hoja de estilos .css) teniendo por separado lo que son los estilos gráficos y el contenido de la página web, en el ejemplo mostrado abajo se hace vinculo a un archivo de nombre estilos.css ubicado en el directorio css del root del sistema de archivos de nuestro sitio de hospedaje.
Nirolari 