PDF de programación - Diseño y creación de páginas web: Tema 4. Contenido multimedia

Tema 4. Contenido multimedia

ETSI ICAI!

Departamento de Sistemas Informáticos!

Rafael Palacios Hielscher!
Cristina Puente Águeda!

Hipertexto!
–  Permiten conectar entre sí entre diferentes documentos,

elementos multimedia, páginas web, etc.

asociado el enlace
<a href="http://www.upco.es">Universidad Pontificia
Comillas</a>

–  Aquellos elementos (texto, imágenes, etc.) sobre los que se

desee insertar un enlace han de encontrarse entre las
etiquetas <a> y </a>

–  A través del atributo href se especifica la página a la que está

Tipos de referencias!
–  Referencia absoluta:

documento.

•  Conduce a una ubicación externa al sitio en el que se encuentra el

•  La ubicación pertenece a Internet, por lo que hay que empezar la

referencia por http:// ,el nombre del dominio y algunas veces el
nombre de la página.

•  Si no se escribe el nombre de la página se cargará la página de

inicio asociada al dominio.

<a href="http://www.upco.es">Universidad Pontificia Comillas</
a>

Tipos de referencias!
–  Referencia relativa al sitio:

•  Conduce a un documento que se encuentra en el mismo

directorio que el documento actual

•  Basta con poner el nombre del fichero junto con la extensión
<a href="pagina2.htm">Tema 4</a>
•  Si el documento pagina2.htm se encontrara, dentro de una
carpeta llamada tema4, y esta estuviera dentro de la misma
carpeta que el documento actual habría que escribir:
<a href="tema4/pagina2.htm">Tema 4: Hiperenlaces</a>



Tipos de referencias!
–  Punto de fijación:

•  Conduce a un punto dentro de un documento, ya sea dentro del

actual o de otro diferente.

•  Para ello el vínculo debe ser

"nombre_de_documento#nombre_de_punto"
<a href="tema4.htm#tiposdeenlace">Tipos de enlaces</a>
•  Para definir el punto de enlace basta con incluir un texto dentro



de una etiqueta de enlace sin el atributo href
<a name="miancla">Texto con ancla</a>

Destino del enlace!
–  El destino del enlace determina en qué ventana va a ser

abierta la página vinculada, se especifica a través del atributo
target
•  _blank: Abre el documento vinculado en una ventana nueva del

navegador

•  _parent: Abre el documento vinculado en la ventana del marco

que contiene el vínculo o en el conjunto de marcos padre

•  _self: Es la opción predeterminada. Abre el documento vinculado

en el mismo marco o ventana que el vínculo

•  _top: Abre el documento vinculado en la ventana completa del

navegador

<a href="http://www.upco.es" target ="_blank">Visita www.upco.es

en una ventana nueva</a>

Otros tipos enlaces!
–  Existen otros tipos de enlaces que no conducen a otra página

web
•  Correo electrónico: Abre la aplicación Outlook Express para

escribir un correo electrónico, cuyo destinatario será el
especificado en el enlace

<a href="mailto:[email protected]">escribe un mail</a>
•  Ficheros para descargar: Cuando el enlace no es a una página
web aparecerá el cuadro de diálogo que pide al usuario permiso
para descargar el fichero en el ordenador

<a href=“apuntes.doc" tarjet=_blank >haz clic aqu&iacute; para

descargarte el fichero</a>

Imágenes!
–  Para introducir una imagen es necesario insertar la etiqueta

<img>

–  Los principales atributos de la etiqueta son:

•  SRC ="ruta_imagen": Establece la localización de la imagen que

queremos insertar la ruta puede ser relativa a la estructura de
carpetas del sitio web o absoluta, en cuyo caso se debe dar la
URL completa del fichero gráfico

<IMG SRC="images/tiesto.jpg"> (ruta relativa)
<IMG SRC="http://www.upco.es/images/tiesto.jpg"> (ruta absoluta)

Alineación!
–  El atributo ALIGN="left / right / top / middle /bottom“, establece

la alineación que va a tener la imagen en la página con
respecto a la linea en la que se encuentra

–  Las alineaciónes pueden ser de tipo horizontal (left a la
izquierda - right a la derecha) o verticales (top en lo alto,
middle en medio y bottom abajo).

–  Por defecto la alineación es la siguiente
Ejemplo de<IMG SRC= "images/g1.jpg">imagen entre texto y

sin alineación

Ejemplo de

imagen entre texto y sin alineación

Alineación!
–  Alineación left
Ejemplo de<IMG SRC= "images/g1.jpg“ align=“left”>imagen

entre texto y alineación left ...
Ejemplo de imagen entre texto y alineación left Ejemplo de imagen

entre texto y alineación left

–  Si colocamos en el código primero la imagen con alineación y
después el texto, este rellenará el espacio lateral disponible,
sin que aparezca entonces la primera línea encima de la
imagen

Ejemplo de imagen entre texto y alineación left
Ejemplo de
imagen entre texto y alineación left

Alineación!
–  Si establecemos la alineación ALIGN= "top" la imagen se

situará encima del texto que le sigue, excepto la primera línea
de texto siguiente

<IMG SRC= "images/g1.jpg" align="top">Ejemplo de imagen y

alineación top ...

Texto alternativo!
–  Para mostrar el nombre o descripción de la imagen cuando no

puede ser visualizada o cuando pasamos el cursos por
encima

–  El atributo alt nos permite introducir el texto asociado a la

imagen

<IMG SRC= "images/ch.jpg" alt="Calvin & Hobbes">

Borde de una imagen!
–  Las imágenes aparecen sin ningún borde alrededor, pero es

posible establecer uno a través del atributo border

–  El atributo border puede tomar valores numéricos, que indican

el grosor en píxeles del borde

–  Si se desea establecer un vínculo sobre una imagen y no se

desea que se muestre el borde es necesario establecer
border="0"

–  Por defecto aparecerá de color negro a no ser que la imagen
sea un enlace, en cuyo caso el color del borde será el color
establecido para los vínculos.

<IMG SRC= "images/marvin.jpg" border="4">

con su tamaño original

–  A través de los atributos width (anchura) y height (altura)

puede modificarse el tamaño de la imagen.

Tamaño una imagen!
–  Al insertar una imagen, esta se muestra en los navegadores

–  Varía la visualización de la imagen en el navegador.
–  El valor que pueden tomar los atributos width y height ha de
ser un número, acompañado de % cuando se desee que sea
en porcentaje con respecto a la página

<IMG SRC= "images/ch.jpg" width="200" height="80">

original

Tratamiento del sonido!
–  Puede ralentizar la carga de la página
–  Los formatos de sonido más habituales en Internet son el

WAV, el MP3 y el MIDI. (HTML5 soporta MP3 y AAC)

–  La etiqueta <audio> (HTML5) se utiliza para incluir sonido

dentro de la página

–  A través del atributo src hay que especificar la ruta y el

nombre del archivo de audio

<audio
src="http://a1.phobos.apple.com/us/r1000/011/Music/12/14/7f/
mzm.ubzkrulq.aac.p.m4a" controls="controls">
Your browser does not support the audio element.
</audio>

Tratamiento del sonido!
–  La etiqueta <audio> puede tener los siguientes atributos:
•  autoplay: para que comience a sonar en cuanto se cargue el

archivo.

•  controls: muestra los controles de audio en la página
• 

loop: para repetir indefinidamente el audio

<audio
src=“http://a1.phobos.apple.com/us/r1000/011/Music/12/14/7f/
mzm.ubzkrulq.aac.p.m4a“ controls="controls">
Your browser does not support the audio element.
</audio>

Etiqueta embed!
–  Se usa para la inclusión en las páginas web de todos aquellos

archivos ajenos al navegador y que necesitan por lo tanto la
ejecución de algún plugin para su interpretación (como flash)

–  Atributos referentes a la consola:

•  hidden="true/false", que establece si la consola va a ser visible (false)
o no (true)
•  width="w", que determina el ancho visible de la consola, en pixels.
•  height="h", que determina el alto visible de la consola, en pixels

<embed src='http://www.upcomillas.es/flash/HomeUpcomillas.swf'

type='application/x-shockwave-flash' />

Tratamiento de video!
–  Dentro de los diferentes formatos de video posibles, existen cuatro
de ellos especialmente preparados para su descarga por Internet y
su inclusión en una página web

•  AVI, creado por Microsoft. no requiere de ningún tipo de hardware

especial para la descompresión y reproducción. Alcanza resoluciones de
320 x 240 pixels y 30 frames/segundo

•  QUICK TIME, con extensiones .mov ó .qt fue creado por Apple.

Proporciona una resolución de 320 x 240 y 30 frames/segundo, sin
necesidad de hardware especial

•  MPEG, creado por el Moving Pictures Expert Group, y que se unieron en
1988, bajo el auspicio de la ISO, para crear un formato de video estándar
para comprimir ficheros audio y video en formato digital.

•  RTV, Real Time Video, de Intel. están diseñados para su transmisión en

directo a través de Internet, utilizando la tecnología conocida con el
nombre de streaming

–  HTML5 soporta MPEG-4, H.264

Tratamiento de video!
–  Etiqueta <video> y </video> (HTML 5)
–  Se puede incluir una imagen por defecto para los navegadores

que no soporten HTML 5.

<video
id="videoShowcase"
width="848" height="352"
src="http://movies.apple.com/media/us/html5/showcase/2010/demos/
apple-html5-demo-tron_legacy-us-20100601_r848-2cie.mov"
poster="http://images.apple.com/html5/showcase/video/images/
tron_legacy.jpg"
loop="loop" autoplay="autoplay"
autobuffer="autobuffer"><img src="http://images.apple.com/html5/
showcase/video/images/tron_legacy.jpg" />
</video>

Tratamiento de video!
–  La etiqueta <video> puede tener los siguientes atributos:

•  Autoplay: para que comience el video en cuanto se cargue en la

web

•  Controls: muestra los controles de video en la página
•  Height y weight: para controlar la altura y la anchura del video
•  Loop: para repetir el video indefinid