Académique Documents
Professionnel Documents
Culture Documents
HTML 5
2013
EL PRESENTE DE
LA WEB.
Website: www.futurodelweb.com
Email: info@futurodelweb.com
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:
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.
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.
Cdigo:
<script src="js/prefixfree.min.js"></script>
.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);
}
Direccin de descarga
WAMPSERVER
http://www.wampserver.com/en/
XAMPP
http://www.apachefriends.org/es/xampp.html
APPSERV
http://www.appservnetwork.com/
10