Cualquier duda, pregunten por MP,
HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un
termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5,
CSS3 y nuevas capacidades de Javascript.[/quote]
Si no sabes, te recomiendo que leas el Post de @powersh: De ahí aprendí yo y es muy bueno, sumamente recomendable
Pensemos esto, en HTML hasta el momento escribíamos el siguiente código:
<!DOCTYPE html>
<title>Ejemplo</title>
</head>
<body>
<div class="header"><h1>Titulo de Pagina</h1></div>
<div class="menu">
<ul>uno</ul>
<ul>dos</ul>
<ul>tres</ul>
</div>
<br>
<div class="cont"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
<br>
<center><div class="footer"> Pie de Pagina </div> </center>
</body>
</html>
Seria así:
Pero ahora en HTML 5 podemos escribirlo asi:
<!DOCTYPE html>
<title>Ejemplo</title>
</head>
<body>
<header>
<h1>Titulo de la Pagina</h1>
</header>
<nav>
<ul>uno</ul>
<ul>dos</ul>
<ul>tres</ul>
</nav>
<br>
<section>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</section>
<br>
<center><footer>
Pie de pagina
</footer></center>
</body>
</html>
Seria asi:
Conclusión: En HTML, usábamos mucho el Div para hacer los títulos, contenido, etc. Pero existiendo HTML5, creo que es algo innecesario de hacer. Este como otros son los beneficios de este HTML5, que ahora les pasare a explicar y mostrar.
<header> Está diseñada para reemplazar la necesidad de crear divs sin significado
semántico. Lo que nos ayuda esta etiqueta es no utilizar Div para todo.
Ejemplo:
<!DOCTYPE html>
<title>Ejemplo</title>
</head>
<body>
<header>
<h1>Titulo de la Pagina</h1>
</header>
</body>
</html>
Se vería así:
<hgroup> Pensada para utilizar en Blog, cuando tenemos que poner un Titulo y una descripción abajo. Permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar
otro h1 en el sitio.
Ejemplo:
<!DOCTYPE html>
<title>Ejemplo</title>
</head>
<body>
<header>
<hgroup>
<h1>Titulo del Blog</h1>
<h2>Subtitulo del Blog</h2>
</hgroup>
</header>
</body>
</html>
Se Vería así:
<nav>: El uso de esta etiqueta es para el menú de la Web. Dentro del mismo se puede poner la etiqueta <ul>
Ejemplo:
<!DOCTYPE html>
<title>Ejemplo</title>
</head>
<body>
<nav>
<ul>Opcion 1</ul>
<ul>Opcion 2</ul>
</nav>
</body>
</html>
Se Vería Así:
<section>: Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts.
Ejemplo:
<!DOCTYPE html>
<title>Ejemplo</title>
</head>
<body>
<section>Estoy viendo el Tuto de Juanmgonza en T!</section>
</body>
</html>
Se Vería Así:
<article>: Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article.
Ejemplo:
<!DOCTYPE html>
<title>Ejemplo</title>
</head>
<body>
<section>
<article>Estoy viendo el Tuto de Juanmgonza en T!</article>
<article>Espero que les sirva</article>
<article>Recomienden asi aprendes otras personas.</article>
</section>
</body>
</html>
Se Vería Así:
<footer>: No necesita ni explicacion.
Ejemplo:
<!DOCTYPE html>
<title>Ejemplo</title>
</head>
<body>
<footer>Pie de Pagina</footer>
</body>
</html>
<video> Inserta video sin necesidad de plugins. Es muy fácil usarla.
Uso del tag <video>:
Soporte en Navegadores: IE 9+, Firefox 3.5+, Chrome 3.0+, Safari 3.0+, Opera 10.5+, Android Browser 2.0+, Safari Mobile 1.0+
Ejemplo:
<video src=”un-video-mlw.avi” width=”320” height=”240”></video>
Atributos:
preload: que empezará a precargar el video independientemente de las acciones del usuario
sobre el player.
<video src=”un-video-mlw.avi” width=”320” height=”240” preload></video>
autoplay: dará play al video en cuanto cargue la página sin acción del usuario sobre los controles.
<video src=”un-video-mlw.avi” width=”320” height=”240” autoplay></video>
controls: Invoca a incluirse los controles (play, pausa, volumen, etc.) en el player del video. Estos
controles están predefinidos en cada navegador y como veremos más adelante en algunos players
opciones pueden ser modificados con javascript + css3.
<video src=”un-video-mlw.avi” width=”320” height=”240” controls></video>
Formatos que puedo usar: .avi, .mp4 (o .m4v), .flv (flash video), .ogv
<audio>: Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también
depende del navegador.
Ejemplo:
<audio controls="controls">
<source src="musica.mp3" type="audio/ogg" />
</audio>
Atribuciones:
autoplay: Especifica que el audio se reproducirá tan pronto como esté listo.
controls: Especifica que los controles de audio se debe mostrar.
preload: Comenzara a reproducirse cuando se cargue completamente.
loop: El Audio empezara a reproducirse ni bien termine, nuevamente.
src: Especifica la dirección URL del archivo de audio.
<canvas>: Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript. No cabe decir que debes saber JS.
<canvas id="miCanvas">Su navegador no puede reproducir Canvas de HTML5</canvas>
<script type="text/javascript">
var c=document.getElementById('miCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
<svg>: Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML.
Les recomiendo que se pasen por aquí para aprender SVG, ya que se me complica como explicarlo .
En el próximo Post veremos CSS3, que hay mas que aprender
Saludos!!