[6] inserción de elementos multimedia LMSGI, 1º de ASIR [Unidad 1] HTML
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
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
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
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
Imágenes Se colocan mediante el elemento <img> Parámetros obligatorios src Url a la imagen alt Texto alternativo
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.
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
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
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=http://www.w3c.org/2000/svg width= xxx height= xxx >
MathML Define ecuaciones Se basa en XML El elemento raíz de un dibujo SVG es <math>
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
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
Elemento object Ideada para sutituir a la anterior Atributos data type height width usemap name form
Elemento param Interior a object Permite pasar parámetros al objeto incrustado Atributos Name Value
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
Elemento video Recomendación actual de HTML5 para incrustar vídeo Atributos src width height autoplay loop controls preload: auto, none, metadata poster muted
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
Elemento track Sirva para cargar pista de subtítulos Atributo src kind, tipo: subtitles, captions, descriptions, chapters, metadata label srclang
Elemento audio Funciona igual que video (dentro también se ponen elementos source) Lógicamente no hay subtítulos