Novedades en html5

DIRECCION GENERAL DE EDUCACIÓN SUPERIOR TECNOLÓGICA
Instituto Tecnológico del Valle de Oaxaca
“NOVEDADES DE HTML5”
DOCUMENTO QUE PRESENTA:
Jorge Ivan López Morales
M. T. I Ambrosio Cardoso Jiménez
Ing. Tecnologías de la Información y las Comunicaciones
Ex-Hacienda de Nazareno, Xoxocotlán, Oaxaca.
Marzo de 2014.

NOVEDADES DE HTML5
Novedades y mejoras que ofrece HTML 5
La nueva versión del lenguaje HTML (Hypertext Markup Language), va a traer
consigo una serie de mejoras importantes, así como nuevas etiquetas de marcado
y otras etiquetas que por el contrario van a desaparecer.
Una de los puntos a destacar del lenguaje HTML 5, es que nos ofrece más potencia
a la hora del desarrollo web, sin tener que pasar a utilizar otras tecnologías.
Así mismo con las nuevas etiquetas del lenguaje vamos a simplificar y ahorrar a la
hora de escribir código.
Desde la web del w3C, nos encontramos una introducción a las novedades del
HTML5:
Algunos de las nuevas características más interesantes para los autores son APIs
para dibujar gráficos en dos dimensiones, incorporar y controlar contenido de audio
y vídeo, mantener persistente en la parte del cliente el almacenamiento de datos y
para ofrecer a los usuarios la edición de documentos, o partes de éstos, de forma
interactiva. Otras características facilitan la representación de elementos familiares
de las páginas, incluyendo <section> (sección) <footer> (pie); <nav> (para
navegación) y <figure> (para asignación de un título a una foto u otro contenido
incluido en la página). Los autores escriben el HTML 5 usando una sintaxis HTML
"clásica" o una sintaxis XML, de acuerdo con las necesidades de la aplicación.
Aquí ya nos están hablando de algunas de las nuevas etiquetas que va a traer
consigo el lenguaje.
1. Nuevo Doctype
Lo primero que está en toda página web, el doctype, es hora ya de cambiar ese
antiguo, largo e inmemorizable doctype:
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Por el nuevo corto y simple doctype de HTML5:
<!DOCTYPE html>
2. Elementos <script> y <link> más simples
En HTML5 ya no es necesario usar el atributo type cuando llamamos 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 rel en el caso de los estilos:
<link rel="stylesheet" href="estilos.css" />
<script src="funciones.js"></script>
3. Las comillas en HTML5
En HTML5 ya no es necesario que los atributos de los elementos estén envueltos
entre comillas, ahora podemos declararlos así:
<p class=parrafo id=contenido>Lorem ipsum dolor sit amet</p>
4. Elementos más 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>
Hay que notar que una página web puede tener múltiples de estos elementos, por
ejemplo puede haber un header para la página entera y un header para cada artículo
en el caso de un blog y lo mismo con el footer.
Nota: estos elementos no son soportados nativamente en navegadores antiguos
como IE 6, 7 y 8, para hacer que sean compatibles puedes usar HTML5 Shiv, un

minúsculo archivo JS que se encarga de ‘crear’ estos elementos que no existen en
navegadores antiguos:

5. Contenido editable
Ahora con HTML5 podemos hacer que cualquier elemento que contenga textos
(párrafos, listas, títulos, etc.) sea editable en el mismo navegador, por ejemplo un
párrafo:
<p contenteditable="true">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum se
d pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Ali
quam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetr
a posuere sapien.
</p>
6. Placeholders en campos de textos.
Placeholders se les conoce al texto que se está en los campos de textos cuando
estos no están activos, antes de HTML5 había que usar algo de Javascript para
lograr este efecto, pero ahora ya casi todos los navegadores soportan esta nueva
facultad:
<input name="username" type="text" placeholder="Ingrese su username" />
7. Validación nativa en HTML5
En HTML5 podemos declarar el atributo requiere 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>
8. Autofocus
HTML5 introduce también el atributo autofocus para campos de formulario, esta
facultad hace que al cargar la página el foco del usuario se concentre en el campo
de texto deseado, ideal para el campo de búsqueda de una página web:
<input type="text" autofocus>
<button>Buscar</button>
9. Tipos específicos de campos de formulario.

Si declaramos type=”number” a un campo de texto, este solo permitirá que se
ingresen números:
<form>
<input type="number" />
<button type="submit">Enviar</button>
</form>
Lo mismo para fechas:
<form>
<input type="date" />
</form>
Y para URLs y emails:
<form>
<input type="url" />
<input type="email" />
</form>
10. Canvas
Canvas, es sin duda alguna uno de los elementos más interesantes que introduce
HTML5, el canvas es un plano vacío en el cual podemos dibujar gráficos con la
ayuda de Javascript:
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<canvas id="micanvas">Tu navegador no soporta canvas</canvas>
<script type="text/javascript">
var canvas=document.getElementById('micanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#b8dc69';
ctx.fillRect(0,0,200,200);
</script>
</body>
</html>
FUENTES DE INFORMACIÓN:
http://www.albasuardiaz.com/html5-novedades/
http://www.angelvicen.com/blog/html5-novedades-html5.html
http://webintenta.com/novedades-de-html5.html

Novedades en html5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (12)

Similar a Novedades en html5

Similar a Novedades en html5 (20)

Más de Jorge Ivan López Morales

Más de Jorge Ivan López Morales (10)

Novedades en html5