NUEVO!!! EN HTML 5

HTML ha estado en constante evolución desde que se
introdujo a la Internet a principios de 1990. Algunas
características fueron introducidas en las especificaciones,
mientras que otros se introdujeron en versiones de
software. En algunos aspectos, las implementaciones y
prácticas autor han convergido entre sí y con las
especificaciones y normas, pero en otros aspectos, siguen
divergiendo.
INTRODUCCION A HTML
1990

HTML 4 se convirtió en una Recomendación del W3C en 1997. A
pesar de que continúa sirviendo como una guía aproximada de
muchas de las características básicas de HTML, que no
proporciona suficiente información para construir
implementaciones que interactúan entre sí y, lo más importante,
con una masa crítica de contenido desplegado. Lo mismo ocurre
con XHTML1, que define una serialización XML para HTML 4 y
DOM Level 2 HTML, que define las API de JavaScript para HTML y
XHTML. [ HTML4 ] [ XHTML1 ] [ DOM2HTML ]
HTML 4 A HTML 5

HTML 5, un lenguaje que ha ido evolucionando
desde 2008 como sucesor de Flash. A finales de
2011, Adobe anunció que no habría más versiones
de Flash para móviles, lo que animaba aun mas a
las grandes empresas a impulsar HTML5 como
estándar en la web.
Porque HTML5 esta sustituyendo a Flash

Normalmente, HTML y Flash suelen compararse como dos lenguajes de
programación distintos, cuando en realidad no es así. A diferencia de HTML, Flash
no es un lenguaje libre, sino un entorno de desarrollo multimedia, siendo muy
agradable para los programadores. Así, puede reproducir vídeo en un determinado
formato en cualquier navegador que le de soporte de manera rápida y sencilla.
Sin embargo, a medida que aumentan los usuarios de dispositivos móviles, las
posibilidades de Flash se ven cada vez más reducidas. De hecho, lo que resulta
extraño es que a pesar de los millones de usuarios de móviles que ya hay, no haya ya
una solución a esta dichosa incompatibilidad. ¿No estáis cansados de entrar en una
página con el móvil o la tablet y no poder visualizar algún vídeo o aplicación
interna?
Porque HTML5 esta sustituyendo a
Flash

Hay que resaltar que Flash no está muerto aún, sino que más
bien ha visto redefinido su concepto. Ahora, se enfoca más a
los juegos y algunas aplicaciones específicas, por lo que deja
de tener el peso de antes en la web. Por tanto se hace
oportuno, de una vez por todas, el cambio a otro sistema que
mayor compatibilidad y versatilidad.
HTML5 proporciona todas las utilidades necesarias para el
desarrollo de la nueva Web, ofreciendo soporte a cualquier
tipo de dispositivo móvil o desktop.
PORQUE CAMBIAR FLASH POR HTML 5

 Las reglas básicas que se plantearon a la hora de actualizar a
HTML 5 fueron:
 Basarse en HTML, CSS, DOM y Javascript.
 Reducir la necesidad del uso de plugins, como por ejemplo flash.
 Mejorar el tratamiento de errores.
 Crear etiquetas que reemplacen el uso de scripts.
 Lenguaje que pueda utilizarse en cualquier tipo de dispositivo,
como móviles, PDA's, etc.
 Eliminación de etiquetas y atributos obsoletos o no deseables
NOVEDADES DE HTML 5

 Los atributos de formato de muchas etiquetas han sido eliminados.
Deben definirse en los estilos CSS. Así, se pretende separar el
formato del contenido definitivamente. Prácticas que hasta ahora
eran desaconsejadas, como el atributo background de <body> o los
atributos align y border, pasan a estar prohibidas. Algunos ejemplos
más son los atributos cellpadding, cellspacing de las tablas, o las
etiquetas <u>, <font>, <center> o <strike>.
 Se han eliminado etiquetas problemáticas como <frame>. Para
mostrar una página dentro de otra se deberá utilizar <iframe>.
 También se eliminan otras etiquetas que habían caido en el desuso
porque son perfectamente reemplazables, como <dir> (que no es
más que un <ul>) o <applet> (se utiliza <embed>).
Eliminación de etiquetas

Lo primero que esta en toda pagina 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/xht
ml1/DTD/xhtml1-transitional.dtd">
10 NOVEDADES DE HTML 5
1 - Nuevo Doctype

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 aun es necesario declarar un rel en el caso de los
estilos:
<link rel="stylesheet" href="estilos.css" />
<script src="funciones.js"></script>
2 - Elementos <script> y <link> mas
simples

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 a
met</p>
3- Las comillas en HTML5

<div class="header">
</div>
<div class="nav">
</div>
<div class="content">
</div>
<div class="sidebar">
</div>
<div class="footer">
</div>
4- Elementos mas semánticos
<header>
</header>
<nav>
</nav>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
Hay que notar que una
pagina web puede tener
multiples de estos
elementos, por ejemplo
puede haber un header
para la pagina entera y un
header para cada articulo
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:

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">
La definición de literatura o texto literario surge de la combinación de estas
dos palabras: arte y palabra escrita. Desde tiempos remotos, la humanidad ha
buscado diversas formas de expresar sus ideas y sentimientos. La palabra
escrita sin duda fue un pilar de esa manifestación. </p>
5- Contenido editable

Placeholders se les conoce al texto que se esta en los
campos de textos cuando estos no están activos, antes de
HTML5 habia 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="Ingr
ese su username" />
6- Placeholders en campos de
textos

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>
Este atributo es soportado solo por las ultimas versiones de
navegadores.
7- Validación nativa en HTML5

HTML5 introduce tambien el atributo autofocus para campos de
formulario, esta facultad hace que al cargar la pagina el foco del
usuario se concentre en el campo de texto deseado, ideal para el
campo de búsqueda de una pagina web:
<input type="text" autofocus>
<button>Buscar</button>
8- Autofocus

Si declaramos type=”number” a un campo de texto, este solo permitira que se
ingresen numeros:
<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>
9- Tipos específicos de campos de
formulario

Canvas, es sin duda alguna 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:
10- Canvas
<!DOCTYPE html>
<html>
<body>
<canvas id="micanvas">Tu navegador no soporta canva
s</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>

Arrastrar y soltar
Arrastrar y soltar es una característica muy común. Es cuando se "agarra"
un objeto y arrastrarlo a una ubicación diferente.
En HTML5, arrastrar y soltar es parte de la norma, y cualquier elemento
puede ser arrastrable.
HTML5: Arrastrar y soltar

NUEVO!!! EN HTML 5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a NUEVO!!! EN HTML 5

Similar a NUEVO!!! EN HTML 5 (20)

Más de Elias Herrera

Más de Elias Herrera (10)

Último

Último (20)

NUEVO!!! EN HTML 5