Enjoy A New Student Discount All 55,000 Courses on sale for Only $12.99

Ends in 05h 23m 49s

HTML5 – Que nos trae de nuevo

HTML5_logo_and_wordmark.svgSi hablamos de HTML5, deberíamos también hablar de CSS3 y de Javascript, ya que son los tres componentes que van a compartir protagonismo en la web.

Es por eso que vamos a revisar que novedades traen, y que diferencias aportan respecto a recomendaciones anteriores.

Si queremos hacer un resumen simplista de las novedades que aporta HTML5, podríamos decir algo como esto:

  • Simplificación del Doctype ( < !DOCTYPE HTML >)
  • Etiquetas semánticas, para poder sustituir DIV y darles sentido
  • Etiquetas de audio y video que son atendidas directamente por el navegador
  • Integración de la validación de datos en los navegadores
  • Etiqueta <canvas> con soporte 2d, y en breve 3D
  • Supresión de etiquetas y atributos de formato
  • Web Local Storage, lo que deja a las cookies en pañales
  • Soporte para arrastrar y soltar

que podemos añadir a las novedades aportadas por CSS3:

  • Colores transparentes y/o degradados
  • Nuevos selectores
  • Bordes redondeados y decorados
  • Tipos de letras personalizado
  • Presentación de texto en varias columnas
  • Transformaciones, transiciones y animación sin Javascript
  • Sombras en los textos y cajas

Durante este curso, iremos explicando como utilizar  todos estos recursos, y sobre todo, como podemos encontrar mas información acerca de ellos (ver también Bibliografia)

Finalmente, y cerrando lo que podríamos considerar los prolegómenos del curso, os adjunto  la lista de las principales novedades de HTML5, ya que aunque iremos explicando como trabajar con HTML, siempre lo haremos desde el punto de vista de esta nueva recomendación.

El siguiente cuadro, que he visto en un monton de sitios,…proviene de wikipedia. Y considero que es un interesante resumen de las diferencias existentes entre HTML4.o y HTML 5.0

Etiqueta
Atributos de la etiqueta
Comentarios
<!– –>
Estándar o ninguno
<!DOCTYPE>
Estándar o ninguno
<a>
href | target | rel | hreflang | media | type

Atributo Añadido:media

Atributo cambiado: Target

<abb>
Estándar o ninguno
<acronym>
Etiqueta Eliminada
<address>
Estándar o ninguno
<applet>
Etiqueta eliminada
<area>
Estándar o ningunos
<article>
Atributos globales
Nueva etiqueta
<aside>
Atributos globales
Nueva etiqueta
<audio>
autobuffer | autoplay | controls | loop | src
Nueva etiqueta
<b>
Atributos globales
Etiqueta cambiada
<base>
Estándar o ninguno
<basefont>
Etiqueta eliminada
<bb>
Estándar o ninguno
<bdo>
Estándar o ninguno
<big>
Etiqueta eliminada
<blockquote>
Estándar o ninguno
<body>
Estándar o ninguno
<br>
Estándar o ninguno
<button>
Estándar o ninguno
<canvas>
height | width
Nueva etiqueta
<caption>
Estándar o ninguno
<center>
Etiqueta eliminada
<cite>
Atributos globales
Etiqueta cambiada
<code>
Estándar o ninguno
<col>
Estándar o ninguno
<colgroup>
Estándar o ninguno
<command>
checked | default | disabled | hidden | icon | label | radiogroup | type
Nueva etiqueta
<datagrid>
Estándar o ninguno
<datalist>
Atributos globales
Nueva etiqueta
<dd>
Estándar o ninguno
<del>
Estándar o ninguno
<details>
open
Nueva etiqueta
<dialog>
Atributos globales
Nueva etiqueta
<dir>
Etiqueta eliminada
<div>
Estándar o ninguno
<dfn>
Estándar o ninguno
<dl>
Estándar o ninguno
<dt>
Estándar o ninguno
<em>
Estándar o ninguno
<embed>
height | src | type | width
Nueva etiqueta
<fieldset>
Estándar o ninguno
<figure>
Atributos globales
Nueva etiqueta
<font>
Etiqueta eliminada
<footer>
Atributos globales
Nueva etiqueta
<form>
Estándar o ninguno
<frame>
Etiqueta eliminada
<frameset>
Etiqueta eliminada

<h1> … <h6>

Estándar o ninguno
<head>
Estándar o ninguno
<header>
Atributos globales
Nueva etiqueta
<hgroup>
hgroup ha sido eliminada de la especificación HTML5
<hr>
Ninguno
Etiqueta cambiada
<html>
Estándar o ninguno
<i>
Ninguno
Etiqueta cambiada
<iframe>
Estándar o ninguno
<img>
Estándar o ninguno
<input>
accept | alt | auto-complete | autofocus | cheked | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget | height | list | max | maxlength | min | multiple | name | pattern | placeholder | readonly | required | size | src | step | type | value | width
Etiqueta cambiada: Añadidos 13 elementos a type
<ins>
Estándar o ninguno
<isindex>
Etiqueta eliminada
<kbd>
Estándar o ninguno
<label>
Estándar o ninguno
<legend>
Estándar o ninguno
<li>
Estándar o ninguno
<link>
Estándar o ninguno
<mark>
Atributos globales
Nueva etiqueta
<map>
Estándar o ninguno
<menu>
Estándar o ninguno
<meta>
Estándar o ninguno
<meter>
high | low | max | min | optimum | value
Nueva etiqueta
<nav>
Atributos globales
Nueva etiqueta
<noframes>
Etiqueta eliminada
<noscript>
Estándar o ninguno
<object>
Estándar o ninguno
<ol>
Estándar o ninguno
<optgroup>
Estándar o ninguno
<option>
Estándar o ninguno
<output>
form
Nueva etiqueta
<p>
Estándar o ninguno
<param>
Estándar o ninguno
<pre>
Estándar o ninguno
<progress>
max | value
Nueva etiqueta
<q>
<ruby>
cite
Nueva etiqueta
<rp>
Atributos globales
Nueva etiqueta
<rt>
Atributos globales
Nueva etiqueta
<s>
Etiqueta eliminada
<samp>
Estándar o ninguno
<script>
Estándar o ninguno
<section>
cite
Nueva etiqueta
<select>
Estándar o ninguno
<small>
Atributos globales
Etiqueta Cambiada
<source>
media | src | type
Nueva etiqueta
<span>
Estándar o ninguno
<strike>
Etiqueta eliminada
<strong>
Estándar o ninguno
<style>
Estándar o ninguno
<sub>
Estándar o ninguno
<sup>
Estándar o ninguno
<table>
Estándar o ninguno
<tbody>
Estándar o ninguno
<td>
Estándar o ninguno
<textarea>
Estándar o ninguno
<tfoot>
Estándar o ninguno
<th>
Estándar o ninguno
<thead>
Estándar o ninguno
<time>
datetime | pubdate
Nueva etiqueta
<title>
Estándar o ninguno
<tr>
Estándar o ninguno
<tt>
Etiqueta eliminada
<u>
Define texto que debe tener un estilo diferente del texto normal3
<ul>
Estándar o ninguno
<var>
Estándar o ninguno
<video>
src | poster | autobuffer | autoplay | loop | controls | width | height
Nueva etiqueta
<xmp>
Etiqueta eliminada

Notas: En amarillo aquellas etiquetas introducidas en esta nueva versión (en rojo aquellas que fueron eliminadas de la especificación HTML5), en azul las etiquetas que han sido cambiadas todo o en parte y en gris las etiquetas eliminadas de esta versión. Si bien en la práctica los navegadores no lo están teniendo en cuenta para evitar perder cuota de mercado.

Una última recomendación. No todos los navegadores esta preparados para todas las nuevas etiquetas de HTML 5, y las nuevas reglas de CSS3, esto ha hecho que se popularice algo que llaman Polyfill ;  que no es ni mas ni menos que un código (normalmente Javascript), que me permite disponer, en este caso, de las propiedades del HTML5, en aquellos navegadores que todavía no las tengan implementadas. Y eso lo hacen para alguna etiqueta en concreto, o de forma genérica, para cualquier etiqueta.

Durante el curso iremos hablando de ellos, aunque la rutina mas conocida y que nos permite gestionar polyfills es Modernizr,  de visión generalista, que soluciona la mayoría de problemas por incompatibilidad, en Github encontrarás una lista de los polyfill con que podemos solucionar la mayoría de problemas, aunque puede que para algún caso concreto, tengamos que tirar de alguna que otra herramienta.

También hay un sitio, http://www.initializr.com/, que con un pequeño dialogo nos deja lista la estructura de nuestra pagina, pero todo ello lo dejaremos para cuando el HTML no tenga secretos para nosotros.

En http://html5please.com/ encontrareis una preciosa lista acerca de lo que conviene y no conviene usar, y si sois metódicos, en http://fmbip.com/litmus, tenéis la situación actual de la implementación de HTML5.0 y CSS3 en los principales navegadores y versiones; recordad que la recomendación HTML5.0 no tienen previsto que esté acabada hasta 2020, con lo que mientras tanto, deberemos disfrutar de las nuevas herramientas, con mucho cuidado. Y para que no perdáis tiempo, os dejo una dirección que os permitirá conocer que funciona y que no, en vuestro navegador; para ello, solo tenéis que visitar http://html5test.com/

Y antes de aparcar este tema, quiero recordaros que HTML5 adquiere una especial relevancia en el mundo de los móviles; por un lado, su implementación está mucho mas avanzada, ( http://mobilehtml5.org/), y por otro, dispone de la suficiente potencia como para ofrecer una alternativa interesante al desarrollo de aplicaciones de móviles, dejando aparte, que hay productos para transformar un conjunto de paginas HTML5 en una aplicación móvil (phonegap)

Esto es todo lo que quería explicar antes de empezar a trabajar , en el próximo artículo, veremos como preparar nuestra máquina, y como escribir nuestra primera página.

12 comentarios

  1. Muy bueno el artículo claro, conciso y sobre todo práctica. Estos son los tipos de artículos que nos permiten seguir actualizándose día a dia. Muchas gracias por el aporte

  2. Muy bueno el artículo claro, conciso y sobre todo práctica. Estos son los tipos de artículos que nos permiten seguir actualizándose día a dia. Muchas gracias por el aporte

  3. Muy bueno el artículo claro, conciso y sobre todo práctica. Estos son los tipos de artículos que nos permiten seguir actualizándose día a dia. Muchas gracias por el aporte

  4. Muy bueno el artículo claro, conciso y sobre todo práctica. Estos son los tipos de artículos que nos permiten seguir actualizándose día a dia. Muchas gracias por el aporte

Deja un comentario

/*Si te ha gustado el artículo
no dudes en compartirlo*/

Facebook
Twitter
LinkedIn

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies

Ver mi IP

Ver ip de mi máquina
tipo valor
Ip: 3.235.78.122
Proxy:
Remote host: ec2-3-235-78-122.compute-1.amazonaws.com
Remote port: 50500
** 3.235.78.122