[6] inserción de elementos multimedia

Transcripción

1 [6] inserción de elementos multimedia LMSGI, 1º de ASIR [Unidad 1] HTML

2 Multimedia La palabra hace referencia a la posibilidad de que el contenido incorpore elementos de todo tipo Ejemplos Imágenes Vídeos Sonido Elementos Flash

3 Premisas a tener en cuenta 1. El contenido de un elemento multimedia se almacena en un archivo aparte 2. El contenido multimedia forma parte de nuestro sitio web 3. El contenido se añade gracias a etiquetas especiales que indicarán la ruta y las características del mismo 4. La posición de esas etiquetas indica la posición del elemento en la página

4 Premisas a tener en cuenta 5. El navegador debe tener la capacidad de poder mostrar ese contenido 6. Sólo se puede mostrar contenido compatible 7. Ejemplo Flash requiere el plugin de Flash 8. Los contenidos multimedia ocupan mucho, es prioritario optimizarles

5 Imágenes Es el contenido más importante de una página web (tras el texto) Los navegadores actuales sólo reconocen de forma nativa tres formatos: JPG GIF PNG

6 Imágenes Se colocan mediante el elemento <img> Parámetros obligatorios src Url a la imagen alt Texto alternativo

7 Mapas Imágenes a las que se las demarcan áreas sensibles de hacer clic (enlaces) Pasos: 1. Usar una etiqueta map, donde se indica un nombre (atributos name e id) 2. En la etiqueta img se indica que hay un mapa en ella mediante el parámtro usemap= #nombre donde el nombre es de la etiqueta map 3. Se usa un elemento area con cada zona que deseamos dibujar.

8 Mapas Atributos del elemento area: Shape. Posibilidades: rect, circle o poly Coords. Coordenadas del elemento. Alt. Texto alternativo para el área Href. URL a la que se dirigirá el navegador cuando se haga clic en el área definida

9 Canvas (HTML5) Define un área para crear elementos gráficos Utiliza JavaScript El elemento canvas simplemente define un área dibujable Atributos: id width Anchura height altura

10 SVG Define imágenes vectoriales Se basa en XML Cada vez se utiliza más La etiqueta raíz de un dibujo SVG es: <svg xmlns= width= xxx height= xxx >

11 MathML Define ecuaciones Se basa en XML El elemento raíz de un dibujo SVG es <math>

12 Otros elementos El audio y el vídeo son más problemáticos Hay excesivos formatos y no hay un claro estándar Muchos tipos de audio y vídeo requieren plugins especiales

13 Elemento embed Permite añadir cualquier contenido El navegador deberá contener el plugin apropiado para que los usuarios le puedan ver Atributos src type height width

14 Elemento object Ideada para sutituir a la anterior Atributos data type height width usemap name form

15 Elemento param Interior a object Permite pasar parámetros al objeto incrustado Atributos Name Value

16 Elemento iframe Pensada para incrustar páginas dentro de otras páginas Se considera obsoleto, pero se sigue usando bastante Atributos src width height sandbox seamless

17 Elemento video Recomendación actual de HTML5 para incrustar vídeo Atributos src width height autoplay loop controls preload: auto, none, metadata poster muted

18 Elemento source Va dentro del anterior Permite indicar los distintos posibles vídeos a reproducir Cada elemento source indicará un formato de vídeo Si un navegador no puede reproducir el primer source, lo intenta con el siguiente Atributos Src type

19 Elemento track Sirva para cargar pista de subtítulos Atributo src kind, tipo: subtitles, captions, descriptions, chapters, metadata label srclang

20 Elemento audio Funciona igual que video (dentro también se ponen elementos source) Lógicamente no hay subtítulos