CURSO DE

HTML 5

2013

HTML5 es la actualizacin de HTML, el lenguaje

EL PRESENTE DE

en el que es creada la web.

LA WEB.

Website: www.futurodelweb.com

Email: info@futurodelweb.com

RUTA DE APRENDIZAJE DEL CURSO

MODULO 1
COMPATIBILIDAD CON
NAVEGADORES.

MODULO 3
NUEVOS
FORMULARIOS.

MODULO 6
ANIMACIN,
TRANSICIONES Y
EFECTOS EN CSS3.

MODULO 2
ESTRUCTURA
SEMNTICA DE HTML5

MODULO 4
FUENTES Y
TIPOGRAFAS.

MODULO 7
VIDEO Y AUDIO

MODULO 5
DISEOS EN CSS3

MODULO 8
RESPONSIVE
DESING WEB.

COMPATIBILIDAD CON
NAVEGADORES

MDULO 1:

COMPATIBILIDAD CON NAVEGADORES.

Cuando trabajamos con HTML 5 surge un tema que genera dudas y que puede complicar nuestros proyectos si
no lo sabemos manejar, unos de los elementos importantes es la compatibilidad de navegadores y es lo que
desarrollaremos en este modulo.
En trminos generales debemos decir que ningn navegador es 100% compatible con todas las
caractersticas de HTML5 y CSS3. Esta regla se mantiene an hoy y seguir por un tiempo,
hasta que se estandaricen todas sus caractersticas. Claro que en este sentido encontraremos
navegadores que presentan mayor compatibilidad que otros.

Para comprender un poco mejor esto, debemos saber que HTML 5 comenz a transitar su ruta hacia
la estandarizacin en el ao 2008, con sus primeros borradores. En el 2009 algunos navegadores comenzaron
a ofrecer soporte a determinadas caractersticas, aunque recin en los aos siguientes encontraramos un
soporte ms extendido.
Las versiones ms recientes de los navegadores ms populares del mercado
soportan HTML 5. Entre ellos: Internet Explorer 9 (muy mejorada en IE10), Firefox 9,
Chrome 16, Safari 5.1 y Opera 11.60.
Varios de estos navegadores cuentan con soporte para HTML 5 en versiones
anteriores, especialmente las surgidas entre 2010 y 2011. En el caso de IE, las
versiones 6, 7 y 8 no tienen soporte para HTML 5. El primero en dar compatibilidad
en esta familia ha sido Internet Explorer 9, lanzado oficialmente en el ao 2011.
Una buena herramienta para saber el nivel de soporte de HTML 5 es el http://html5test.com/. Adems de
ofrecernos un puntaje global, nos indica el soporte de HTML 5, tem por tem, del navegador que estamos
usando para pasar el test.

http://html5test.com/ : para testear nuestro navegador y comprobar si tiene soporte de HTML 5

CMO RESOLVER LA COMPATIBILIDAD CON HTML 5

Seguramente esta es una de las grandes cuestiones. La clave est en detectar caractersticas soportadas por
el navegador. Cmo es esto? Bueno, primero es probable que no necesitemos utilizar todas las
caractersticas de HTML 5 en todos nuestros proyectos. Lo que debemos hacer, mediante JavaScript, es
detectar si la caracterstica que estamos incluyendo es soportada por el navegador.

Modernizr
Una librera Open Source que nos simplifica mucho este camino
es http://modernizr.com/. De una forma sencilla, nos permite incluirla
en nuestras pginas y comprobar la compatibilidad con el navegador.

html5shiv (http://code.google.com/p/html5shiv/ )
HTML5 shiv es algo que se escucha mucho a la hora de hacer un sitio web usando HTML 5.
Si el sitio que ests haciendo solo debe funcionar en navegadores ms
avanzados como los que usan Webkit (Chrome, Safari, etc) o Firefox,
entonces no es necesario que sigas leyendo esto a no ser que tu sitio en
HTML5 requiera de sercorrectamente interpretado por Internet Explorer.
IE no reconoce los nuevos elementos del HTML5 (article, section, etc), es
por esto que para que los mismos se visualicen correctamente estilizados en el mencionado navegador, es
necesario crearlos mediante javascript.
La solucin es bastante simple, tienes que poner el siguiente cdigo en el head de tu sitio:

Normalize.css (http://necolas.github.com/normalize.css/ )
Normalize.css que es una CSS customizable, con la que podemos renderizar nuestra css en todos los
navegadores de una manera ms consistente con los ms actualizados estndares de clases. Lo bueno es que
solamente trata las diferencias entre navegadores para conseguir el objetivo que es normalizar la CSS.
Que es lo que hace?
Conserva lo ms usado por defecto, como muchos resets CSS.
Normaliza estilos con un amplio rango de elementos HTML.
Corrige errores y las inconsistencias ms comunes de los navegadores.
Mejora la usabilidad con arreglos para la consistencia.
Explica lo que el cdigo hace usando comentarios detallados en el archivo .css.

Prefijos automticos en CSS3 con Prefix Free

CSS3 es muy necesario en la creacin de nuestros sitios web de eso no hay duda, lo que resulta muy molesto
son los prefijos. Existen varios que, si bien no son difciles de aprender, son tediosos de escribir y quitan tiempo
que podra invertirse en otras cosas.
Por suerte esta ingeniosa diseadora Lea Verou ha creado una librera Javascript para que no tengamos que
llenar de prefijos nuestra hoja de estilos.
http://leaverou.github.com/prefixfree/

El uso de la librera no es difcil, slo la agregamos a la cabecera de nuestro documento:

Cdigo:

<script src="js/prefixfree.min.js"></script>

Y la magia sucede en el archivo CSS, donde:

Cdigo:

.container {
width: 960px;
margin:10px 0;
-webkit-box-shadow: 20px;
-moz-box-shadow: 20px;
box-shadow: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: -webkit-linear-gradient(top, #e3e3e3 10%, white);
background: -moz-linear-gradient(top, #e3e3e3 10%, white);
background: -o-linear-gradient(top, #e3e3e3 10%, white);
background: -ms-linear-gradient(top, #e3e3e3 10%, white);
background: linear-gradient(top, #e3e3e3 10%, white);
}

Se convierte en:
Cdigo:

.container {
width: 960px;
margin:10px 0;
box-shadow: 20px;
border-radius: 4px;
background: linear-gradient(top, #e3e3e3 10%, white);
}

Se suprimieron todos los prefijos dejando solo el estndar. S, as de fcil.

Una nota importante es que debes tener configurado un servidor local en t maquina para que funciones,
algunos programas que nos pueden servir son:
Programas

Direccin de descarga

WAMPSERVER

http://www.wampserver.com/en/

XAMPP

http://www.apachefriends.org/es/xampp.html

APPSERV

http://www.appservnetwork.com/

10