[6] inserción de elementos multimediajorgesanchez.net › presentaciones › lenguajes-de... ·...
Post on 04-Jul-2020
4 Views
Preview:
TRANSCRIPT
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
top related