[6] inserción de elementos multimediajorgesanchez.net › presentaciones › lenguajes-de... ·...

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

[6] inserción de elementos multimedia

LMSGI, 1º de ASIR[Unidad 1] HTML


@jorgesancheznet

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


@jorgesancheznet

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


@jorgesancheznet

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


@jorgesancheznet

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


@jorgesancheznet

Imágenes

•Se colocan mediante el elemento <img>•Parámetros obligatorios• srcUrl a la imagen• altTexto alternativo


@jorgesancheznet

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.


@jorgesancheznet

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


@jorgesancheznet

Canvas (HTML5)

•Define un área para crear elementos gráficos•Utiliza JavaScript•El elemento canvas simplemente define un área dibujable•Atributos:• id• widthAnchura• heightaltura


@jorgesancheznet

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”>


@jorgesancheznet

MathML

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


@jorgesancheznet

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


@jorgesancheznet

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


@jorgesancheznet

Elemento object

• Ideada para sutituir a la anterior• Atributos

• data• type• height• width• usemap• name• form


@jorgesancheznet

Elemento param

• Interior a object•Permite pasar parámetros al objeto incrustado•Atributos• Name• Value


@jorgesancheznet

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


@jorgesancheznet

Elemento video

• Recomendación actual de HTML5 para incrustar vídeo• Atributos

• src• width• height• autoplay• loop• controls• preload: auto, none, metadata• poster• muted


@jorgesancheznet

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


@jorgesancheznet

Elemento track

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


@jorgesancheznet

Elemento audio

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

[6] inserción de elementos multimediajorgesanchez.net › presentaciones › lenguajes-de... ·...

Documents