Integracin de Contenidos Multimedia

Diseo de Interfaces Web

DAW

Tema 4

Sergio de Mingo (IES G.M. Jovellanos)

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

1 / 22

1 Propiedad intelectual y licencias

2 Imgenes

3 Audio

4 Vdeo

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

2 / 22

Propiedad intelectual y licencias

Derechos de autor y propiedad intelectual

Dotar a las aplicaciones web de contenidos multimedia es algo
fundamental
Estos contenidos, como se vio en el tema 1 aportan y transmiten
informacin junto con los textos (imgenes, iconos, vdeos, etc.)
La explotacin de los contenidos generados por terceros puede estar
sujeta a derechos de autor o propiedad intelectual que hemos de
respetar
A su vez, los contenidos generados por nosotros tambin estarn
protegidos por estos derechos

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

3 / 22

Propiedad intelectual y licencias

Derechos de autor y propiedad intelectual

El derecho de proteccin sobre la obra artstica es fundamental para

asegurar la accin de crear
Este derecho asegura la distribucin de una obra sin prejuicio al plagio
o a la copia no autorizada
Este derecho realmente se encuentra cubierto por dos normativas: el
derecho de propiedad intelectual y el derecho de autor, de forma
ligeramente diferente en cuanto a su mbito de actuacin

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

4 / 22

Propiedad intelectual y licencias

Derecho de Propiedad Intelectual

Los derechos cubiertos bajo la Propiedad Intelectual cubre:

Derechos morales: Estos son irrenunciables y acompaan al autor y a
sus herederos durante toda su vida como el derecho al reconocimiento
Derechos de carcter econmico: Relacionados con la explotacin
de la obra (prohibiendo su explotacin por parte de terceros o exigiendo
una remuneracin por esta explotacin)
Derechos compensatorios: Relacionados con la copia privada de la
obra. El autor recibe una compensacin por los derechos de propiedad
intelectual dejados de percibir por la reproduccin privada de la obra

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

5 / 22

Propiedad intelectual y licencias

Derechos de autor

Para la Organizacin Mundial de la Propiedad Intelectual (OMPI), la

propiedad intelectual abarca dos ramas:
La propiedad industrial (patentes, diseos industriales, marcas de
comercio, etc.)
El derecho de autor (creaciones artsticas como libros, obras musicales,
pinturas, esculturas, pelculas y obras realizadas por medios
tecnolgicos como los programas informticos y las bases de datos)

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

6 / 22

Propiedad intelectual y licencias

Licencias

Las licencias son el contrato por el cual se articula la cesin de parte

de nuestros derechos de explotacin a quien adquiere una copia de
nuestra obra (libro, imagen, software, etc.)
Una formula de esta licencia que podemos aplicar a nuestras obras es
el modelo del copyright heredado de la tradicin anglosajona
Esta formula atribuye la totalidad de los derechos patrimoniales (de
carcter econmico) a su dueo. Generalmente el autor.

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

7 / 22

Propiedad intelectual y licencias

Licencias

Existen otras formulas para articular estas licencias basadas en la

cesin de ciertos derechos a quien adquiere la copia:
Copyleft: Licencia impulsada por GNU que se basa en la cesin de
todos los derechos de explotacin e impone la limitacin de que las
obras derivadas mantengan la misma licencia
Creative Commons: Son un conjunto de licencias algo ms
conservadoras que la anterior. Tienen varios enunciados que combinan
la cesin de ciertos derechos (en lugar de todos)

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

8 / 22

Imgenes

Imgenes

A la hora de incrustar imgenes en la web es fundamental conocer

bien los formatos ms usados
Adems, es conveniente tener a mano algn programa de retoque o de
procesamiento de imgenes para realizar la edicin de estas
De los formatos ms usados destacaremos las caractersticas ms
importantes

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

9 / 22

Imgenes

Imgenes: formatos

GIF
Formato sencillo
nicamente permite 24 bits para los colores

JPG
Mayor gama de colores
Compresin con prdida
No permite transparencias

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

10 / 22

Imgenes

Imgenes: formatos

PNG
Compresin sin prdida
Permite transparencias

SVG
Grficos vectoriales
Escalado sin prdida
Escasa aceptacin entre navegadores (nicamente versiones ms
modernas)

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

11 / 22

Imgenes

Insertar imgenes

El mtodo de insercin tradicional es la etiqueta <img>

Con el atributo src indicamos la url donde podemos localizar el
recurso de la imagen
Adems podemos usar el atributo alt para aportar una descripcin de
la imagen. Muy til a la hora de mejorar la accesibilidad de nuestra
web
El gran problema es la falta de semntica para indicar la resolucin de
nuestra imagen

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

12 / 22

Imgenes

Insertar imgenes
Usando la etiqueta <img> no podemos hacer cargas selectivas de
diferentes tamaos de una misma imagen segn la resolucin del
cliente
Esto se suele hacer aportando lgica adicional con JavaScript o JQuery
Con HTML5 tenemos la opcin de usar la etiqueta <picture>
recientemente aceptada
En esta etiqueta podemos definir cargas selectivas en funcin de
parmetros de resolucin,anchura, etc. (de forma similar a una media
query)

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

13 / 22

Imgenes

Insertar imgenes

<picture>
<source
media="(min-width: 650px)"
srcset="images/image-medium.png">
<source
media="(min-width: 465px)"
srcset="images/image-small.png">
<img src="images/image-default.png" >
</picture>

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

14 / 22

Audio

Audio

HTML5 ya permite la inclusin de audio directamente usando <audio>

Existen diferentes formatos segn el nivel de compresin usado o si
tiene o no perdida de calidad
Tambin hemos de diferenciar entre:
Codec o algoritmo de codificacin/decodificacin de los datos
Contenedor o formato de archivo en el que guardamos los datos
codificados junto con otra informacin

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

15 / 22

Audio

Audio: formatos
Ejemplos de codecs son:
FLAC
MP3
Vorbis
WMA

Ejemplos de contenedores son:

MPG
OGG (Permite Vorbis y otros codecs)
QuickTime
Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

16 / 22

Audio

Insertar audio

Antiguas etiquetas como <embed> que permitan reproducir sonido sin

descargarlo solo permitan formatos muy sencillos como MIDI
HTML5 ha propuesto una nueva etiqueta <audio> para solucionar el
problema de los diferentes codecs
Un ejemplo de uso de <audio> podra ser:
<audio controls=controls preload=auto>
<source src=cancion.mp3 type=audio/mpg />
<source src=cancion.ogg type=audio/ogg />
El navegador no soporta audio
</audio>

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

17 / 22

Vdeo

Vdeo

Respecto a los datos de vdeo tenemos tambin codecs y contenedores

Ahora los contenedores son ms complejos porque adems de
almacenar el vdeo codificado, almacenarn el audio codificado, los
subttulos, etc.
Gracias a HTML5 y a la etiqueta <video> podemos incrustrar el
propio vdeo en el documento web

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

18 / 22

Vdeo

Vdeo: formatos
Los codecs de vdeo ms utilizados son:
MPEG-2
h.264
Xvid/Divx

Ejemplos de contenedores son:

AVI
Matroska
Flash Video
MP4
Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

19 / 22

Vdeo

Insertar vdeo
Con la etiqueta <video> conseguimos compatibilidad entre
navegadores y sistemas pudiendo referenciar los codecs compatibles
con nuestros ficheros
Ejemplo:
<video width="640" height="360" controls autoplay preload>
<source src="mivideo.mp4" type=video/mp4;
codecs="avc1,mp4a" />
<source src="mivideo.ogv" type=video/ogg;
codecs="theora,vorbis" />
<source src="mivideo.webm" type=video/webm;
codecs="vp8,vorbis" />
</video>

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

20 / 22

Vdeo

Vdeo

Los atributos controls, autoplay controlan la visualizacin de los

controles del widget y del autoarranque al cargar la pgina
El atributo preload obliga a una precarga inicial antes de comenzar la
visualizacin
Respecto a los codecs se debe de tener en cuenta que no todos los
navegadores los integran todos. Adems para cada formato, podemos
tener diferentes codecs que lo reproduzcan para dos navegadores
distintos

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

21 / 22

(cc) Sergio de Mingo

Some rights reserved. This work is licensed under a Creative Commons
Attribution-Share Alike 3.0 Spain License, available at
http://creativecommons.org/licenses/by-sa/3.0/

http://apuntes-fp.blogspot.com
sergio.demingogil@educa.madrid.org

Diseo de Interfaces Web (DAW)

Integracin de Contenidos Multimedia

Tema 4

22 / 22