Code | Web Developer | ¿Qué es el HTML5? | Insertar Vídeo y atributos

¿Qué es el HTML5?

HTML es un lenguaje de etiquetado para estructurar y presentar contenido en la Web

CSS es un lenguaje para crear hojas de estilo, que se usan para describir la presentación (aspecto) de un documento escrito en HTML.

Javascript es un lenguaje de programación (de scripts). Uno de sus numerosos usos es acceder y manipular los elementos definidos en el HTML.

Principales cambios del HTML5 respecto a HTML4

• Cambios en el etiquetado

  Elementos más semánticos, formularios más potentes

• Cambios en el estilo

  Nuevos selectores, uso de tipografías, columnas, rejillas, y muchas otras mejoras visuales

• Mejor soporte multimedia

  Soporte de video y audio, canvas, webGL, SVG...

• Interactividad

  Geolocalización, almacenamiento local, sockets, acceso a hardware, ...

Nuevo etiquetado

• Etiquetado más semántico

  header, footer, aside, article, section... DEMO

• Formularios más potentes

  nuevos elementos: email, number, color, date... En los dispositivos móbiles esto es muy útil DEMO

• Estructura menos rígida

  Simplificación de la estructura de los documentos con respecto al XHTML

Un nuevo estilo

• Mejor CSS

  nuevos selectores que permiten seleccionar mejor los elementos HTML

• Soporte de tipos de letra

  ahora podemos usar los tipos de letra que queramos DEMO

• Columnas de texto

  podemos dividir los bloques de texto en columnas DEMO

• Media Queries

  Hojas de estilo específicas para diferentes tamaños de pantalla DEMO

• Muchas cosas molantes

  degradados, bordes redondeados, transparencia, animacións, etc... DEMO

Integración multimedia

• Soporte de elmentos multimedia

  Los navegadores pueden mostrar audio y video sin necesidad de plugins externos

• Canvas

  API de manejo de elementos gráficos basado en Javascript DEMO

• WebGL

  Gráficos en 3D DEMO

• SVG

  Gráficos vectoriales manipulables DEMO
• 
  

¿en que quedamos? ¿que é el HTML5?

• Estrictamente, el HTML5 es la nueva versión del lenguaje HTML

• Pero, la mayoría de las veces cuando hablamos de HTML5 nos referimos a un conjunto de tecnologías más amplio que abarca HTML, javascript y css.

• La combinación de esas tecnologías forman las herramientas para construír una web más abierta, más potente y más multimedia que la que conocemos

De donde venimos?

Cuando eramos jóvenes, en los años 90...

• Solo había soporte para imágenes en formato gif, jpg e ico. Más tarde llegó el PNG
• Si queríamos incluír sonido tenía que ser en MIDI
• Video? Eh.., bueno, las imágenes en GIF podían ser animadas

Finales de los 90

• Aparecieron los applets de Java, que eran como pequeñas aplicaciones que funcionaban dentro de nuestro navegador
• Llega el RealPlayer y con el el audio y video
• Más tarde llegaron más alternativas: quicktime, windows media...

y llegó el 2002... y con él también llegó el: FLASH

Todas estas soluciones compartían los mismos problemas

• Tienes que instalar plugins y actualizarlos zillones de veces

• Formatos cerrados, APIs cerradas

• Interacción limitada con el resto de los elementos de la página.

HTML5 arregla todo esto

• Los navegadores soportan varios formatos de audio y video

• Los elementos multimedia son tan accesibles como el resto de elementos del sitio web

• Podemos darle estilo y manipular los elementos multimedia como cualquier otro elemento HTML.

Un modo sencillo de verlo: pasamos de necesitar todo este código para mostrar un vídeo en la web:

<object width="640" height="360"><param name="movie" value="http://www.youtube.com/v/SJixW2u4IvQ?fs=1&amp;hl=en_US" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/SJixW2u4IvQ?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="360" /></object>

a este:

<video src="myvideo.ogv" width="640" height="360"></video>

Formatos multimedia

Le llamamos formato a un contenedor multimedia con una o más pistas de audio y video comprimidos

• MP4 Vídeo: h.264 / Audio: AAC o MP3

  Soportado por: Safari, Google Chrome, Internet explorer 9+ y otros...

• OGG Vídeo: Theora / Audio: Vorbis

  Soportado por: Firefox, Google Chrome, Opera y outros ...

• WebM Vídeo: VP8 / Audio: Vorbis

  Soportado por: Firefox, Google Chrome, Opera y outros ...

Ejemplo de código HTML para representar un vídeo

<video width="640" height="360" id="example" poster="screenshot.jpg" preload controls loop>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogv" type="video/ogg">
    ...
    Tu navegador no soporta video. <a href="video.mp4"> Pero puedes bajarlo</a></video>







Propiedades del código:

• id: usamos esta propiedad para seleccionar el elemento con javascript
• width, height: ancho y alto
• poster: una imagen estática que se verá antes de que el usuario pulse play
• controls: permite mostrar u ocultar los controles de play, pausa, etc...
• preload: le dice al navegador que vaya cargando el video antes de que el usuario pulse play
• loop: repite el video en bucle
• source: como vimos antes, no todos los navegadores soportan los mismos formatos de video, usanto la etiqueta source podemos definir varios formatos para garantizar que se pueda ver en todos los navegadores

<video width="640" height="360" id="example" poster="screenshot.jpg" preload controls loop>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogv" type="video/ogg">
    ...
    O teu navegador non soporta video. <a href="video.mp4"> Pero podes baixalo</a></video>




Para saber más:

• HTML5 Specification

  La especificación oficial de HTML5

• Dive into HTML5

  Un completo tutorial que repasa detalladamente todas estas cosas de las que hablamos, muchos ejemplos

• HTML5 Rocks

  Un sitio flipante con toneladas de recursos y demos

• Mozilla HTML5 demos

  Demos por mozilla

• Chrome Experiments

  Demos por Google

• HTML5 Tests

  Para testear lo bien que soporta HTML5 nuestro navegador

• CSS3 Tests

  Para testear lo bien que soporta CSS3 nuestro navegador

• Can I Use?

  Información sobre el soporte actual de las tecnologías relacionadas con HTML5 por parte de los navegadores.

Fuente: http://anavallasuiza.com/

Apps - Aplicaciones -Test

Soporte de Navegacion HTML5 

https://html5test.com/

Test: ¿Cuánto Sabes De HTML5? (Nivel Principiante A Intermedio)

http://www.htmlcinco.com/test-cuanto-sabes-de-html5-nivel-principiante-a-intermedio/

Test: Ancho de banda

http://speedof.me/

by @AQPComputer