CURSO DE HTML5

En este pequeño curso de HTML5 contaremos algunas de las mejoras de esta versión, sus new tags, tml tools, CSS3, Canvas, Edge, etc.

Hoy en día solo se oye la palabra HTML y 5, buscando y buscando por la parece que HTML5 va a ser una revolución para todos los desarrolladores.

Efectivamente HTML5 era un gran cambio y  creo que HTML5 va a traer multitud de cosas buenas, y la principal de todas es la desaparición paulatina de los navegadores antiguos, principalmente de IE6. Y la posibilidad de hacer animaciones sin necesidad de Flash.

Pero nos va a ofrecer mucho más, la caída del flash, el fin de los div, el fin de las cookies como las conocemos, más posibilidades multimedia, más semántica a nuestros contenidos.

NEW TAGS: CONCEPTOS BASICOS  DE HTML5

La idea de HTML5 es la de presentar una serie de nuevas ‘ new tags’ en el lenguaje de marcas que se centran principalmente en el dibujo, la animación/multimedia para HTML5 asimilándolo ligeramente a Flash.

Marcado semántico y diseño de página

Los elementos semánticos describen su significado o propósito claramente al navegador y al desarrollador. Por ejemplo la etiqueta <div>.

La etiqueta <div> define una división o una sección de un documento HTML, pero no nos dice nada acerca de su contenido, los desarrolladores si utilizan identificadores pero los navegadores no lo reconocen.

< div id =”header”>

En HTML5 hay nuevos elementos semánticos  o new tags enriquecidos que transmiten el propósito del elemento a ambos desarrolladores y navegadores.

< header >

Aquí están algunos de los nuevos elementos semánticos o new tags en HTML5:

  • Footer
  • Figcaption y figure: especifican una figura en mi contenido como por ejemplo una imagen, gráfico, foto.
  • header: Los Headers y footers resultan claros.
  • hgroup: agrupo a mis encabezados h1 , h2, h3, h4..
  • mark: El elemento mark me permitió resaltar o marcar el texto importante.
  • Nav: Entonces la etiqueta nav crea una barra de menú o navegación.
  • Section y article: Puede utilizar sections y articles para agrupar su contenido.
  • Time
  • Aside: Por último, el elemento aside puede ser usado para contenido secundario, por ejemplo, una barra lateral de enlaces relacionados.

new-tags-html5

Este es un ejemplo sencillo de código que utiliza estos elementos con un poco de css3:

<section>

Este es el segundo artículo. Estos artículos pueden ser secciones del blog, etc.

</section>

</article>

</section>

<aside>

<section>

<h1>Links</h1>

<ul>

<li><a href=”#”>Link 1</a></li>

<li><a href=”#”>Link 2</a></li>

<li><a href=”#”>Link 3</a></li>

</ul>

</section>

<figure>

<img width=”85″ height=”85″

src=”http://www.guellcom.com/wp-content/uploads/JennMar.jpg&”

alt=”Jennifer Marsman” />

<figcaption>Jennifer Marsman</figcaption>

</figure>

</aside>

<footer>Footer – Copyright 2011</footer>

</body>

</html>

 

CANVAS: Dibujo en HTML5

Otro elemento novedoso en HTML5 es la etiqueta o new tags <canvas> y código de Javascript como por ejemplo se utiliza en Flash, mediante el cual podrás dibujar en pantalla.

Dentro de Canvas puedes ilustrar formas complejas y llenar esas formas con colores o se pueden colocar las imágenes en el lienzo y aplicar efectos sobre las imágenes.

Entre <canvas> y </canvas>, se puede especificar un texto para mostrar en los navegadores que no soportan el elemento canvas.

1.           <!DOCTYPE HTML>

2.            

3.           <html>

4.            

5.           <body>

6.            

7.               <canvas id=”myCanvas”>Your browser does not support the canvas tag.</canvas>

8.            

9.               <script type=”text/javascript”>

10.        

11.        

12.        

13.               var canvas = document.getElementById(‘myCanvas’);

14.        

15.               var ctx = canvas.getContext(‘2d’);

16.        

17.        

18.        

19.               // Draw blue rectangle

20.        

21.               ctx.fillStyle = ‘#0065BD’;

22.        

23.               ctx.fillRect(0, 0, 125, 75);

24.        

25.        

26.        

27.               // Draw white X

28.        

29.               ctx.beginPath();

30.        

31.               ctx.lineWidth = “15”;

32.        

33.               ctx.strokeStyle = “white”;

34.        

35.               ctx.moveTo(0, 0);

36.        

37.               ctx.lineTo(125, 75);

38.        

39.               ctx.moveTo(125, 0);

40.        

41.               ctx.lineTo(0, 75);

42.        

43.               ctx.stroke();

44.        

45.        

46.        

47.           </script>

48.        

49.       </body>

50.        

51.       </html>

 

1.      Creo el lienzo y le doy una ID. Si el navegador no soporta CANVAS saldrá un mensaje de error.

2.      Secuencia de comandos. Debe usar JavaScript para dibujar y representar gráficos sobre ella.

En primer lugar llamo al ID del Canvas.

Después especifico ” 2d” para la elaboración y manipulación de la gráfica.

3.      A continuación, dibujo el rectángulo azul.

Uso fillStyle para especificar el color azul.

Uso fillRect para dibujar el rectángulo, indico tamaño y posición.especificando el tamaño y la posición.

Ejemplo: fillRect(0, 0, 125, 75)

En la esquina superior izquierda dibuja un rectángulo con ancho=125 alto=75 píxeles.

4.      Dibujar la X blanca sobre la bandera.

Primero solicito beginPath para iniciar el proceso pintar en una ruta.

Especifico lineWidth (ancho de línea) de 15 píxeles

StrokeStyle de “blanco” para trazar la ruta del color blanco.

MoveTo para trazar  la ruta utilizando. Mueve el cursor sin trazar una línea

LineTo A para trazar  la ruta utilizando. Dibuja una línea mientras se desplaza

Por último, el método stroke hace que estos trazos se vean.

canvas-html5

 

Soporte de Audio y Video

Una de las grandes características que es nueva en HTML5 es la capacidad de reproducción de audio y videos.

El soporte para audio y video se implementó de manera brillante, donde no existe la posibilidad de tratar diferentes formatos de archivo.

Por último, cualquier texto entre las etiquetas de apertura y cierre (como <audio> and </audio>) aparecerá en los navegadores que no soporten el elemento de audio o video.

1.           <audio controls="controls">
2.            
3.               <source src="laughter.mp3" type="audio/mp3" />
4.            
5.               <source src="laughter.ogg" type="audio/ogg" />
6.            
7.               Su navegador no soporta el elemento de audio.
8.            
9.           </audio>

Con este código, el navegador intentará primero reproducir el archivo laughter.mp3. Si no tiene los códecs adecuados para reproducirlo, intentará a continuació reproducir el archivo laughter.ogg. Si el elemento de audio no es reconocido por el navegador en absoluto, mostrará el texto “Su navegador no soporta el elemento audio” en donde debió estar el control audio.

 

Video

Veamos ahora el elemento <video> element.

1.           <video width="320" height="240" controls="controls">
2.            
3.               <source src="movie.ogg" type="video/ogg" />
4.            
5.               <source src="movie.mp4" type="video/mp4" />
6.            
7.               <source src="movie.webm" type="video/webm" />
8.            
9.               Your browser does not support the video tag.
10.        
11.       </video>

 

Al igual que el audio, el video tiene un atributo controls.

PASOS A SEGUIR:

1.      Creo el lienzo y le doy una ID. Si el navegador no soporta CANVAS saldrá un mensaje de error.

2.      Secuencia de comandos. Debe usar JavaScript para dibujar y representar gráficos sobre ella.

En primer lugar llamo al ID del Canvas.

Después especifico ” 2d” para la elaboración y manipulación de la gráfica.

3.      A continuación, dibujo el rectángulo azul.

Uso fillStyle para especificar el color azul.

Uso fillRect para dibujar el rectángulo, indico tamaño y posición.especificando el tamaño y la posición.

Ejemplo: fillRect(0, 0, 125, 75)

En la esquina superior izquierda dibuja un rectángulo con ancho=125 alto=75 píxeles.

4.      Dibujar la X blanca sobre la bandera.

Primero solicito beginPath para iniciar el proceso pintar en una ruta.

Especifico lineWidth (ancho de línea) de 15 píxeles

StrokeStyle de “blanco” para trazar la ruta del color blanco.

MoveTo para trazar  la ruta utilizando. Mueve el cursor sin trazar una línea

LineTo A para trazar  la ruta utilizando. Dibuja una línea mientras se desplaza

Por último, el método stroke hace que estos trazos se vean.

 

Soporte de Audio HTML5

Una de las grandes características que es nueva en HTML5 es la capacidad de reproducción de audio y videos.

El soporte para audio y video se implementó de manera brillante, donde no existe la posibilidad de tratar diferentes formatos de archivo.

Por último, cualquier texto entre las etiquetas de apertura y cierre (como <audio> and </audio>) aparecerá en los navegadores que no soporten el elemento de audio o video.

1.           <audio controls="controls">
2.            
3.               <source src="laughter.mp3" type="audio/mp3" />
4.            
5.               <source src="laughter.ogg" type="audio/ogg" />
6.            
7.               Su navegador no soporta el elemento de audio.
8.            
9.           </audio>

Con este código, el navegador intentará primero reproducir el archivo laughter.mp3. Si no tiene los códecs adecuados para reproducirlo, intentará a continuació reproducir el archivo laughter.ogg. Si el elemento de audio no es reconocido por el navegador en absoluto, mostrará el texto “Su navegador no soporta el elemento audio” en donde debió estar el control audio.

 

Soporte de Video HTML5

Veamos ahora el elemento <video> element.

1.           <video width="320" height="240" controls="controls">
2.            
3.               <source src="movie.ogg" type="video/ogg" />
4.            
5.               <source src="movie.mp4" type="video/mp4" />
6.            
7.               <source src="movie.webm" type="video/webm" />
8.            
9.               Your browser does not support the video tag.
10.        
11.       </video>

Al igual que el audio, el video tiene un atributo controls.

Otros atributos divertidos en el elemento de video incluyen:

Atributo

Valores Posibles

Descripción

audio

Muted

Establece el estado predeterminado del audio (actualmente, “silenciado” es la única opción)

autoplay

autoplay

Se inicia la reproducción de video tan pronto como esté listo

controls

controls

Muestra los controles de reproducción de video en la página

height

(valor en píxeles)

Establece la altura del reproductor de vídeo

loop

Loop

Hace que el audio se repita cada vez que termina

poster

(algún URL)

Especifica la dirección URL de una imagen para representar el vídeo cuando no se dispone de datos de vídeo

preload

auto, metadata, none

Determina si se debe cargar el video cuando se carga la página. El valor auto cargará el video, metadata cargará sólo metadatos asociados con el archivo de video, y none evitará la precarga del video. (Este atributo será ignorado si la reproducción automática está especificada)

src

(algún URL)

Especifica la dirección URL del archivo de video a reproducir

width

(valor en píxeles)

Establece el ancho del reproductor de vídeo

 

HTML5 and CSS3: Animacion

El CSS le permiten transformar (mover) los estilos en la pantalla con la animación entre los dos estados de estilo.

Esto se puede hacer tan simple como cambiar el estilo de algo en la pantalla, de un estado de cursor del mouse o al hacer clic.

http://www.the-art-of-web.com/css/css-animation/

La necesidad de herramientas tools y el cumplimiento de las normas

Desde Adobe aún ven el HTML5 como parte de su plan de trabajo para la liberación de Adobe Edge, una nueva herramienta para ayudar a los desarrolladores a crear animaciones basadas HTML5.

CMS para plantillas HTML5

IMCreator