febrero 26, 2013 Rafa Villaplana

Diseño Web: Las últimas novedades introducidas en HTML5


Novedades html5

Esta es una recopilación de algunos de los nuevos elementos de HTML5 que puedes encontrarte en la nueva versión de HTML5

1. Elementos <script> y <link> mas simples

En HTML5 ya no es necesario usar el atributo type cuando declaramos los archivos .css o .js:

<link rel="stylesheet" href="estilos.css" type="text/css" />
<script type="text/javascript" src="funciones.js"></script>

Sin embargo, aún es necesario declarar un atributo rel en el caso de la hoja de estilos:

<link rel="stylesheet" href="estilos.css" />
<script src="funciones.js"></script>

2. Nuevo Doctype

La definición del tipo de documento, el doctype, también ha modificado su formato por uno más sencillo e intuitivo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3. Mayor elementos semánticos
<div class="header">
</div><div class="nav">
</div><div class="content">
</div><div class="sidebar">
</div><div class="footer">
</div>
El código anterior puede ser reemplazado por los nuevos elementos header y footer de HTML5:
<header>></header>
<nav></nav>
<section></section>
<aside></aside>
<footer></footer>
4. Las comillas en HTML5

En HTML5 ya no es necesario que los atributos de los elementos esten encerrados entre comillas, ahora se pueden declarar de la siguiente forma:

<p class=parrafo id=contenido>Esto es un ejemplo de contenido</p>
5. Nuevas etiquetas para HTML5

Desaparecen las etiquetas como <embed> y <object> a la hora de incluir audio, animaciones flash y video. Para ello, en la nueva versión HTML5, disponemos de dos nuevas etiquetas <audio> y <video>, así como otra etiqueta <canvas>, que nos permite trabajar con gráficos y animaciones.

6. Nuevas APIS

El nuevo lenguaje HTML5 incorpora nuevas APIS que nos permiten trabajar con bases de datos en local, interactuar por parte del usuario final con distintos elementos de la interfaz  (arrastrar y soltar) , mejoras en la Geolocalización, entre otros.

7. Contenido editable

Ahora con HTML5 podemos hacer que cualquier elemento que contenga textos(párrafos, listas, títulos, entre otros) sea editable en el mismo navegador:

<p contenteditable="true">
Esto sería un ejemplo de texto editable.
</p>

8. Validación nativa HTML5

En HTML5 podemos declarar el atributo required en los campos de un formulario que queremos que sean obligatorios de rellenar:

<form method="post" action="">
<input type="text" required>
<button>Enviar</button>
</form>

9. Autofocus

HTML5 introduce el atributo autofocus para campos de formulario, esta propiedad hace que al cargar la pagina el foco del usuario se centre en el campo de texto deseado, ideal para los campo de búsqueda de una pagina web:

<input type="text" autofocus>
<button>Buscar</button>

10.Canvas

Canvas, es sin lugar a dudas, uno de los elementos mas interesantes que introduce HTML5, el canvas es un plano vacío en el cual podemos dibujar graficos con la ayuda de Javascript:

<!DOCTYPE html>
<html>
<body>
<canvas id="mycanvas">Tu navegador no soporta canvas</canvas>
<script type="text/javascript">
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#ffffff';
ctx.fillRect(100,100,200,200);
</script>
</body>
</html>

Hay que tener en cuenta que estos elementos no están soportados por las versiones más antiguas de Internet Explorer 6, 7 y 8. Para hacer que sean compatibles puedes usar HTML5 Shiv, un archivo javascript que se encarga de crear los nuevos elementos en los navegadores más antiguos.
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Autor: Rafa Villaplana

Deja una respuesta

Tu dirección de correo electrónico no será publicada.