[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

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

@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

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

@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

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

@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

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

@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

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

@jorgesancheznet

Imágenes

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

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

@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.

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

@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

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

@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

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

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

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

@jorgesancheznet

MathML

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

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

@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

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

@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

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

@jorgesancheznet

Elemento object

• Ideada para sutituir a la anterior• Atributos

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

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

@jorgesancheznet

Elemento param

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

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

@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

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

@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

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

@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

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

@jorgesancheznet

Elemento track

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

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

@jorgesancheznet

Elemento audio

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