3.7 Multimedia y gráficos

Sin duda uno de los aspectos más vistosos y atractivos de las páginas web es el aspecto visual y los recursos multimedia, estos  se presentan en formatos diferentes ( “puede ser casi cualquier cosa que usted puede escuchar o ver”). ¡Imposible pensar en una página web sin ellos hoy en día!

Ejemplos serían: fotos, música, sonido, vídeos, discos, películas, animaciones y mucho más.

Imagen

En HTML, las imágenes son elementos en línea que se insertan a partir de la etiqueta <img>  que está vacía y solo contiene atributos no siendo necesaria la etiqueta de cierre. 

Los principales atriburos son src (indica la ruta donde se ubica el archivo), alt (texto alternativo si no se visualizase la imagen) , width (establece la anchura en pixeles) y height (define la altura de la imagen). Un ejemplo sería:

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

La ruta o url  puede incluirse de tres formas diferentes:

  • Ruta absoluta, imagen en un servidor externo: src=”http://dominio.com/ruta/imagen.jpg”
  • Ruta absoluta , imagen en el subdiretorio : src=”img/imagen.jpg”
  • Ruta relativa , imagen en el directorio anterior (padre) : src="../imagen.jpg”

Los principales formatos de imágenes son:

images
Imagenes en Pixabay  de Raedon, W3C, Clker  bajo licencia de Creative Common CCO

Sonido

HTML5 ha proporcionado un estándar para escuchar los ficheros de audio ya que en versiones anteriores era necesario un plug-in. Es importante ofrecer distintas alternativas de formato .  Se inserta en HTML mediante la etiqueta <audio>. Un ejemplo sería para la misma canción ofrecer distintos formatos al navegador.

sonido
Imagen de creación propia vista previa del reproductor  Google Chrome  licencia de CC

<audio controls>
  <source src="cancion.ogg" type="audio/ogg">
  <source src="cancion.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Vídeo

El video en HTLM se puede insertar con la etiqueta <video> o <iframe> para vídeos de youtube. En el caso de <video> es importante ofrecer distintas alternativas de formato  al igual que ocurría para el audio. Veamos unos ejemplos.

sonido

<video width="320" height="240" controls>
     <source src="movie.mp4" type="video/mp4">
     <source src="movie.ogg" type="video/ogg">
      Your browser does not support the video tag.
</video>

Vídeo HTML5 de  W3bajo licencia de Creative Common CCO

Objetivos

Gráficos

El HTML <canvas> es el elemento que nos permite dibujar gráfico a través de Javascript (que estudiaremos en próximas unidades)

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Quizas te parezca interesante saber  que hay juegos en HTML5 disponibles realizados con canvas,  un ejemplo sería "Angry Birds",