HTML5

HTML5

Autor: Samuel Ezerzer
http://www.mndesign.es

¿Qué puedo hacer por ti?
1 - ¿Qué es HTML5?
2 - De HTML a HTML5
3 - Ventajas del HTML5
3.1 - Semántica
3.2 – Off-Line y Almacenamiento
3.4 - Acceso a dispositivos
3.5 - Conectividad
3.6 - Multimedia
3.7 - 3D, gráficos y efectos
3.8 - Rendimiento e integración
4 - ¿Qué puedo hacer por ti?


¿Qué es HTML5?
HTML5 es la 5ª revisión en el estándar que define HTML. Aunque el borrador de especificación de
HTML5 está sujeto a cambios y no está finalizado.

Tag, body, head, www, link... y HTML, todas son palabras o siglas que te pueden sonar raras y
complicadas. Aquí te contaremos qué es HTML5, cómo funciona y por qué da tanto para hablar.

Mucho se está hablando últimamente sobre esta nueva versión del conocido lenguaje HTML.
Para los que aún no lo saben y siempre temieron preguntar: HTML es el lenguaje madre y básico de
todos los sitios web. Se trata de un conjunto de etiquetas que sirven para dar formato a diferentes
tipos de contenidos, sobre todo texto.
El HTML solamente formatea y muestra contenidos, y no tiene la capacidad de interactuar con
variables, bases de datos, etc.
Aún los sitios web más complejos, que utilizan grandes sistema de bases de datos y realizan complejas
tareas, envían al navegador (Internet Explorer, Chrome, etc.) puro código HTML.

HTML5 es una nueva versión de este lenguaje universal y, si bien aún está en fase de desarrollo, ya
podemos disfrutarlo en la mayoría de los navegadores. Google Chrome es pionero en soporte
HTML5 y es, actualmente, el navegador que brinda mayor soporte a esta versión de HTML.


¿De HTML a HTML5?
HTML5 es la versión 5 de HTML. Tú estarás acostumbrado a HTML4. El 5 es una nueva revisión,
que tiene muchas más funcionalidades. El código HTML4 sigue siendo válido, usarás HTML5
si deseas usar dichas nuevas funcionalidades. Si quieres usarlas busca un manual de HTML
versión 5 :-)

DIFERENCIA ENTRE HTML Y HTML5

IMPORTANTE: Si ya sabes HTML o XHTML pero no HTML5... lee bien esto...que aunque creas
que ya lo sabes... es importante aclarar algunas cositas.

Antes que nada... y esto es vital para comenzar Diseño Web... es entender que HTML... NO ES
UN LENGUAJE DE PROGRAMACIÓN. ¿Está claro?. He oído a muchos venir a dejar un
currículum y decir: Programo en HTML o hago aplicaciones HTML... ojo eh!... que con algo
así, ese currículum ni se lee.

EL HTML es un lenguaje de ETIQUETADO o MARCADO (de ahí Markup). ¿y esto que es?... que es
una forma de diseñar con código gracias a sus "etiquetas".


¿De HTML a HTML5?
HTML SUS INICIOS
<html>
<head><title>HTML</title></head>
<body bgcolor=#ffffff cellspadding =1 size=1 cellspacing=1 border=0>
<table size=2 font face=verdana>
<tr>
<td><font color=#ff0000><b>Métodos</b></font></td>
<td>
<table>
<tr>
<td border=1 bgcolor=#777777><font face=verdana>Básico</font></td>
<td><img></img></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>


¿De HTML a HTML5?
HTML4.01-XHTML-Transitional-Strict-Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>HTML</title>
<META name="Author" content="Tomas Nogales"> <META name="Keywords" content="HTML 4.0,
elementos HTML, etiquetas, tags, ejemplo, uso">
<LINK title="Manual en Portugués" type="text/html" rel="alternate"
hreflang="pt" href="http://manual/portug.html">
</head>
<body>
<div>
<img src=“” />
<div>
<p style=“background-color:#0785a; margin-left:1px; font-size:10px;”>Métodos</p>
<p style=“width:20px; height:30px; color:#333;”>Básico</p>
</div>
</div>
</table>
</body>
</html>


¿Ventajas del HTML5?
¿Qué nos ofrece HTML?
Si bien representará una gran cantidad de mejoras, respecto a su versión anterior, éstas son las
más importantes:

Semántica
Páginas más comprensibles y mejor estructuradas. Hasta la llegada de HTML5, los
desarrolladores hacían un uso intensivo de las etiquetas <div> dentro del código HTML para
deilimitar las diferentes secciones o partes de nuestro sitio web. Con la inclusión de nuevas
etiquetas dentro de HTML5, como section, article, header, footer, nav, hgroup, aside, article,
etc., daremos un valor semántico añadido a la distribución del contenido para que sea
fácilmente localizable desde los diferentes buscadores y pueda ser mejor entendida por los
navegadores y aplicaciones que accedan a ella.


Vídeo nativo sin instalaciones adicionales.
La reproducción de vídeos en la web iba ligada hasta hace bien poco a la instalación de Flash en
nuestro navegador. HTML5 proporciona un estándar común que permitirá la reproducción
de vídeos unificando así formatos y codificaciones sin tener que instalar elementos
adicionales para disfrutar de cualquier media.

Cómo funciona?
<video src="archivo.mp4" controls width="360" height="240"> </video>

Portada del vídeo
<video src="archivo.mp4" controls width="360" height="240" poster="poster.jpg"> </video>

MultiFormato
<video controls width="360" height="240" poster="poster.jpg">
<source src="archivo.ogv" type="video/ogg" />
<source src="archivo.mp4" type="video/mp4" />
</video>

Con Flash
<video controls width="360" height="240" poster="poster.jpg">
<source src="archivo.ogv" type="video/ogg" /> <source src="archivo.mp4"
type="video/mp4"/>
<object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?
file=archivo.mp4">
<param name="movie" value="player.swf?file=archivo.mp4" />
</object> </video>

Si no se desea Flash
<video controls width="360" height="240" poster="poster.jpg"> <source src="archivo.ogv"
type="video/ogg" /> <source src="archivo.mp4" type="video/mp4" /> <object
type="application/x-shockwave-flash" width="360" height="240" data="player.swf?
file=archivo.mp4"> <param name="movie" value="player.swf?file=archivo.mp4" /> <a
href="archivo.mp4">Descarga la película</a> </object> </video>


Geo localización.
Cada vez más presente en las redes sociales y aplicaciones móviles, la geo localización también
ha sido contemplada por el estándar HTML5. A través de esta característica, las
aplicaciones web pueden tener acceso a la latitud y longitud donde se encuentre el usuario
que accede a un site, independientemente del sistema de geo referenciación utilizado por
nuestro navegador (GPS, WiFi, 3G, etc.)


Aplicaciones offline.
El uso de aplicaciones web se ha enfrentado desde sus comienzos con una importante desventaja
en comparación con las aplicaciones de escritorio, y era la posibilidad de estas últimas de
trabajar en entornos desconectados. Además, con la utilización de dispositivos móviles, es
habitual no disponer siempre de una conexión de alta velocidad de calidad para el uso de
aplicaciones web. HTML5 aporta una importante mejora en este aspecto para permitir la
utilización de todas las funcionalidades de las aplicaciones web “sin conexión” a través
de APIs, que sincronizan sus datos cuando la conexión entre el dispositivo y la red se
restablece. SessionStorage-LocalStorage (se usa, por ej., para formularios)

Dibujos, animaciones y videojuegos.
Con la incoporación de la etiqueta <canvas>, HTML5 abre por fin la posibilidad de representación
y dibujado de formas sobre un lienzo o canvas. Esta nueva funcionalidad aparentemente
complementaria abre la web al mercado del videojuego, diseño y la animación nativa, que
anteriormente dependía de otras plataformas propietarias como Flash.


HTML5
Contactar:
mndesign.es
samuelezerzer.es
Localizatuempleo.com
creandomiempresa.com
@samuelezerzer
@mndesign_es

Enlaces:
xitrus.es/utilidades/Animaciones
desarrolloweb.com
cristalab.com
maestrosdelweb.com
Os invito a buscar información en la web


HTML5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie HTML5

Ähnlich wie HTML5 (20)

HTML5