UNIDAD DIDÁCTICA 3:

Implantación de contenido multimedia.

Módulo profesional:
Diseño de interfaces Web

Duración: 126 Horas.

Código:0615

Ciclo Formativo de Grado Superior:

Diseño de aplicaciones Web
Índice
Tabla de contenido
UNIDAD DIDÁCTICA 3: Implantación de contenido multimedia. ............... 1

Módulo profesional: Diseño de interfaces Web .................................... 1

Duración: 126 Horas. Código:0615 .................................................... 1

Ciclo Formativo de Grado Superior: .................................................... 1

Diseño de aplicaciones Web............................................................... 1

Índice................................................................................................ 2

Resumen introductorio. ....................................................................... 5

Introducción....................................................................................... 5

Caso introductorio .............................................................................. 6

1. Derechos de la propiedad intelectual. Licencias. Ley de la propiedad

intelectual. Derechos de autor. ............................................................. 7

1.1. Derechos de la propiedad intelectual. ...................................... 8

Propiedad Industrial: ..................................................................... 8

Obras artísticas protegidas por derechos de autor: ............................ 8

Estrategias comerciales: ................................................................ 8

1.2. ¿Cómo se protege la propiedad intelectual? .............................. 9

1.3. Mecanismos de protección de la propiedad intelectual .............. 11

1.4. Licencias. ............................................................................ 12

Software Libre o Free Software ...................................................... 14

Copyleft ...................................................................................... 14

Licencias GPL ............................................................................... 15

Licencia AGPL .............................................................................. 16

(Open Source y BSD) ................................................................... 16

Open Source................................................................................ 16

BSD............................................................................................ 16
 Debian ........................................................................................ 16

X.org .......................................................................................... 17

Licencias Creative Commons: ........................................................ 17

.. 17

(Software con dominio público y software semi-libre) ....................... 18

El Software con dominio público ..................................................... 18

Software Semi-libre ...................................................................... 18

Shareware................................................................................... 18

Software Propietario ..................................................................... 18

(Trial y demo).............................................................................. 19

Trial ........................................................................................... 19

Demo ......................................................................................... 19

1.5. Ley de la propiedad intelectual .............................................. 19

1.6. Derechos de autor ............................................................... 21

Otros conceptos relacionados con los derechos de autor: .................. 21

1.7. Licencias de imágenes .......................................................... 22

Tipos de licencias de imágenes ...................................................... 23

2. Tipos de imágenes en la web. ..................................................... 26

3. Imágenes mapa de bits, imagen vectorial. Software para crear y

procesar imágenes. Formato de imágenes. ........................................... 28
 3.1. Conceptos básicos de imágenes. ............................................ 28

El píxel ....................................................................................... 28

Resolución de imagen ................................................................... 29

Profundidad de color ..................................................................... 30

3.1.1. Modos de color ............................................................ 31

3.1.2. Mapa de bits ................................................................ 33

3.1.3. Imagen vectorial ......................................................... 34

3.1.4. Software para crear y procesar imágenes. ............................ 36

3.1.5. Formato de imágenes. ................................................. 39

3.1.6. Insertar imágenes en la web ....................................... 42

4. Optimización de imágenes para la web. ........................................ 48

4.1. ¿Por qué es importante la optimización de imágenes a la hora de

hacer tu página web? ...................................................................... 48

4.2. Reducir tramaño de imagenes .................................................... 49

5. Audio: formatos. Conversiones de formatos (exportar e importar) ... 52

5.1. Formatos ............................................................................ 54

5.1.1. Conceptos Audio.............................................................. 54

5.1.2. Formatos de audio .......................................................... 55

5.2 Conversión de formatos ............................................................. 58

6. Video: Codificación de datos de video, conversiones de formatos

(exportar e importar) ......................................................................... 61

6.1. Codificación de datos de video ............................................... 62

6.2. Conversiones de formatos ..................................................... 63

6.2.1. Vídeo con compresión intra-frame ........................................ 64

6.2.2 Vídeo con compresión inter-frame .......................................... 65

6.2.3. Software para vídeo digital .............................................. 66

7. Animaciones. ............................................................................ 72

7.2. Animación de imágenes y texto. ............................................ 74

 7.2.3. Etiqueta Marquee ........................................................... 75

7.2.4. jQuery .......................................................................... 77

7.3. Integración de audio y video en una animación. ...................... 80

8. Aplicación de guías de estilo. ...................................................... 81

Resumen Final ................................................................................... 82

Glosario ............................................................................................ 85

Bibliografía y Webgrafía ...................................................................... 89

Bibliografía. .................................................................................... 89

Webgrafía. ..................................................................................... 89

Resumen introductorio.
En las webs actuales abunda todo tipo de información multimedia y es muy
importante la interactividad, por ello se incluyen sonidos, gráficos, video y
multimedia en general, lo que hace que una página web sea más atractiva y
dinámica para el usuario.

Introducción
Existe mucho material multimedia en internet, que en muchos casos es
gratuito, en otros casos, tenemos que tener en cuenta, que no podemos
usar este material al libre albedrio debido a los derechos de autor y de la
propiedad intelectual.

Es por ello, que debemos seleccionar bien los contenidos que ponemos en
nuestra web y seguir la legislación que regula a nivel nacional e
internacional este tipo de material.
Veremos en este tema diferentes aspectos relacionados con la legalidad, los
derechos de autor, la ley de la propiedad intelectual y los derechos de la
propiedad intelectual.

Posteriormente conoceremos los diferentes tipos de imágenes y software

que nos permita crear y procesar imágenes y diferentes formatos de
archivo.
Aprenderemos cuestiones relacionadas sobre los formatos de audio y video
y su inserción en la web desde el punto de vista de HTML 5

Caso introductorio
La incorporación de imágenes, video, audio y
multimedia puede dar un toque sofisticado a
nuestra web, pero ¿Conviene llenarlo todo de
elementos multimedia y animaciones?
La respuesta es no, todo en su justa medida,
ya que si ponemos muchos elementos en la
web con animaciones y videos, así como con audio de fondo lo único que
provocaremos será confusión y nerviosismo en el usuario final, lo que hará
que no tardando mucho abandone la web. Por tanto, imágenes, multimedia,
animaciones sí, pero con mesura
1. Derechos de la propiedad intelectual. Licencias.
Ley de la propiedad intelectual. Derechos de autor.
Es esencial proteger toda creatividad humana y por ello, son importantes
los derechos de la propiedad intelectual y de autor, que constituyen uno de
los principales derechos de propiedad intelectual, cuyo objetivo es dar
solución a una serie de conflictos de intereses que nacen entre los autores
de las creaciones intelectuales, los editores y demás intermediarios que las
distribuyen y el público que las consume (Bondía, 1988).

Cuando se tiene una idea grandiosa e innovadora debemos de ser

cautelosos antes de darla a conocer y pensar en protegerla como propiedad
intelectual (PI). el sistema de derechos garantiza a los autores que puedan
divulgar sus obras sin miedo a que se realicen copias no autorizadas o actos
de piratería.

Las grandes ideas únicamente adquieren valor si se puede reivindicar su

autoría legalmente.
 1.1. Derechos de la propiedad intelectual.
La propiedad intelectual se refiere a productos, obras o procesos que son
creados por alguien y que por tanto, le puedan proporcionar una ventaja
competitiva.

Distinguimos tres subcategorías:

Propiedad Industrial: son las invenciones o patentes, también dibujos y
modelos industriales así como las marcas comerciales, obtenciones
vegetales e indicaciones geográficas de orígenes.

Obras artísticas protegidas por derechos de autor: obras literarias y artísticas

originales, composiciones musicales, programas de televisión, programas
informáticos, bases de datos, proyectos arquitectónicos, creaciones
publicitarias y multimedia.
Estrategias comerciales: secretos comerciales, pericia, acuerdos de
confidencialidad o políticas de producción rápida.

Fuente:
https://www.oepm.es/es/sobre_oepm/noticias/2017/2017_02_01_CursosLi
neaOMPIespaniol.html
Imagen 1: Derechos de autor
Fuente: https://pixabay.com/es/derechos-de-autor-s%C3%ADmbolo-signo-
850371/

1.2. ¿Cómo se protege la propiedad intelectual?

La propiedad intelectual se puede proteger por medio de los derechos de
propiedad intelectual (DPI) fijados por la Organización Mundial de la
Propiedad Intelectual (OMPI). La modalidad de protección depende del tipo
de propiedad intelectual:

 Patentes permiten impedir que terceras personas fabriquen, utilicen

o vendan la invención de cualquier persona durante un periodo
determinado, que depende del tipo de invención
 Marcas protegen la denominación de un producto al impedir que
otras empresas vendan otro producto con el mismo nombre
  Derechos de autor informan a terceros de que el autor tiene
previsto controlar la producción, distribución, exhibición o ejecución
de su trabajo. Los derechos de autor se conceden automáticamente
sin necesidad de registro oficial, y su símbolo se puede empezar a
utilizar inmediatamente.

Podemos distinguir dos grupos relativamente a los derechos que conforman

la propiedad intelectual:
Derechos morales: son derechos que se reconocen para autores, artistas
e intérpretes. Son irrenunciables y pertenecen al autor o artista durante
toda su vida, y que se heredan. Entre ellos podemos destacar:
 el derecho al reconocimiento de la condición de autor de la obra o del
reconocimiento del nombre del artista sobre sus interpretaciones o
ejecuciones.
 El derecho a exigir el respeto a la integridad de la obra o actuación y
la no alteración de las mismas.
Derechos de carácter patrimonial:
Hay que distinguir entre:
 Derechos relacionados con la explotación de la obra o prestación
protegida, que a su vez se subdividen en derechos exclusivos y en
derechos de remuneración:
o Los derechos exclusivos permiten a su titular autorizar o
prohibir los actos de explotación de su obra o prestación
protegida por el usuario, y a exigir de este una retribución a
cambio de la autorización que le conceda.
o Los derechos de remuneración, no facultan a su titular a
autorizar o prohibir los actos de explotación de su obra o
prestación protegida por el usuario, aunque sí obligan a este al
pago de una cantidad dineraria por los actos de explotación
que realice, cantidad que es determinada, bien por la ley o en
su defecto por las tarifas generales de las entidades de
gestión.
 Derechos compensatorios, como el derecho por copia privada que
compensa los derechos de propiedad intelectual dejados de percibir
 por razón de las reproducciones de las obras o prestaciones
protegidas para uso exclusivamente privado del copista.

Imagen 2: Derechos de autor

Fuente: https://pixabay.com/es/internet-derechos-de-autor-1013675/

1.3. Mecanismos de protección de la propiedad

intelectual
Por otra parte, la legislación española ofrece una serie de mecanismos de
protección de los derechos de propiedad intelectual, existiendo la posibilidad
de acudir a acciones administrativas, acciones civiles y acciones penales.

En concreto, la Ley de Propiedad Intelectual ofrece en su Libro III, Título I,

acciones y procedimientos que no sólo pueden plantearse en los supuestos
de infracción de los derechos exclusivos de explotación, sino que también
amparan y comprenden los derechos morales, y aquellos actos de
desconocimiento de los derechos de remuneración; del mismo modo, se
ofrece la protección tanto si los citados derechos corresponden al autor, a
un tercero adquirente de los mismos, o a los titulares de los derechos
conexos o afines.

También dentro del Libro III se regula, en su Título II, el Registro General
de la Propiedad Intelectual. En el Título III del mismo Libro se regulan los
símbolos o indicaciones de la reserva de derechos, y en el Titulo IV, las
Entidades de gestión colectiva de derechos de propiedad intelectual.

Fuente: http://www.mecd.gob.es/cultura-mecd/areas-
cultura/propiedadintelectual/la-propiedad-intelectual/derechos.html

En el siguiente enlace encontrarás más información

referente sobre la LPI
https://www.boe.es/boe/dias/2014/11/05/pdfs/BOE
-A-2014-11404.pdf

1.4. Licencias.
Una licencia de software es la autorización que un autor, quien tiene el
derecho intelectual de su obra, concede a otros el poder usarla, en este
caso, para usar un programa, por ejemplo.
Existen diferentes tipos de licencias, los autores se sirven de ellas para
poder autorizar el uso de la obra, para permitir modificaciones en la misma,
su distribución, etc., como veremos más adelante.
Básicamente, una licencia es un contrato entre el autor de la aplicación y el
usuario que hace uso de ella, donde se describen los términos del contrato,
cláusulas de uso, advertencias legales, etc.

Imagen 3: Términos licencia de Cobian Backup

Fuente: Propia

Imagen 4: Lo que permite la licencia

Fuente propia. Términos de licencia Cobian Backup.

Es importante no confundir el software libre con el software gratuito, en el

caso del software libre tenemos que tener en cuenta que puede ser gratuito
o de pago, aunque en este caso el usuario será libre de usarlo a su antojo.
Al software gratuito lo podríamos llamar también freeware, ya que a pesar
de ser gratuito, se restringe con licencias, por lo que el usuario no es libre
de actuar como en el caso del software libre.
Entre las licencias cabe destacar las siguientes:

Software Libre o Free Software

Los Programas libres suelen venir incluidos en sistemas operativos libres,
como por ejemplo en algunas versiones de Linux. El software libre permite:
• Uso
• copia
• distribución (bien en su forma original o con modificaciones lo
que implica que el código fuente sea accesible)

Copyleft
El copyleft, o lo que es lo mismo, sin derecho de copia o sin derecho de
autor, es una práctica que versa en el ejercicio del derecho de autor con el
único objetivo de permitir unaq libre distribución de copias y versiones ue
hayan sido modificadas de una obra u otro trabajo, exigiendo que esos
mismos derechos sigan siendo preservados en las versiones posteriormente
modificadas.

Es de aplicación a programas informáticos, arte, cultura, ciencias, o

cualquier otro tipo de obra creativa que sea regida por los derechos de
autor.
Los programas publicados sin copyleft tienen permiso de redistribución y
también de modificación, así también, se permite agregar restricciones.

Si una aplicación informática es libre pero carece de copyleft, posiblemente

algunas copias o modificaciones de la misma no sean libres.
Imagen 5: Copyleft
Fuente: https://pixabay.com/es/copyleft-s%C3%ADmbolo-libertad-40848/

Licencias GPL
Llamada también GNU GPL (GNU General Public License GPL).
En este tipo de licencia el autor sigue teniendo los derechos de autor, pero
permite su libre distribución, modificación y uso, en el caso de que se haga
una modificación del software, el nuevo resultado debe quedar de forma
obligatoria con la misma licencia.

Se puede considerar como la primera licencia copyleft y, según la misma

filosofía, el código fuente GPL, debe estar disponible y accesible para su
modificación, disponible para copias ilimitadas y para cualquier persona.
Para el usuario final es gratuito, pudiendo pagar en algunos casos por
gastos de copiado y distribución.

Es la licencia que suele venir con los paquetes distribuidos por el Proyecto
GNU, que incluye el núcleo del sistema operativo Linux.
Licencia AGPL
Es un tipo de licencia que modifica el derecho de autor derivada de GNU.
Su novedad radica en que además de las cláusulas propias de una GNU
GPL, la licencia AGPL obliga a que se distribuya el software que se destine a
dar servicios a través de una red de ordenadores, lo que quiere decir que si
se queremos usarlo como parte de un desarrollo de una nueva aplicación,
esta quedaría obligada a su libre distribución.

(Open Source y BSD)

Open Source
La licencia de Open Source Initiative deriva de Debian.

BSD
La licencia BSD cubre las distribuciones de software de Berkeley Software
Distribution, además de otros programas. impone pocas restricciones sobre
su forma de uso, alteración y redistribución del software, y no hay
obligaciones de incluir el código fuente. Además, permite que otras
versiones puedan tener otros tipos de licencias, tanto libres como
propietarias; como ejemplo de ello tenemos el sistema operativo Mac OS X.

Debian
Esta licencia forma parte del contrato realizado entre Debian y la comunidad
de usuarios de software libre, que se denomina como Debian Free Software
Guidelines (DFSG).
Exige:
• la publicación del código fuente
• la redistribución libre
• el código fuente debe ser incluido y se ha de poder redistribuir.
• Las aplicaciones derivadas se deben poder redistribuir bajo la misma
licencia del original.
• Esta licencia no puede discriminar a ninguna persona o grupo de
personas.
• los derechos otorgados no dependen del sitio donde se encuentre el
software.
• la licencia no puede 'contaminar' a otro software.
X.org
El Consorcio X distribuye X Window System bajo una licencia que lo hace
software libre, pero sin adherirse al copyleft. Existen distribuciones bajo
esta licencia que son software libre, y otras que no lo son.
Licencias Creative Commons:
Se basa en cuatro condiciones:
 Atribución, con la cual se puede distribuir, exhibir, representar…
siempre y cuando se reconozca y se cite a su autor.
 No comercial, no permite fines comerciales.
 No derivadas, no se puede modificar dicha obra
 Compartir igual, incluye la creación de obras derivadas siempre que
mantengan la licencia original.
Bajo las licencias Creative Commons, existen combinaciones de las cuatro
condiciones. Así, el desarrollador puede elegir lo que crea más conveniente
para su obra.
Esta decisión implica renunciar a algunos derechos reservados inherentes al
derecho de autor, como son el derecho de reproducción y el de
transformación que, por otro lado, puede contribuir a la divulgación de la
obra y permitir el derecho de acceso por parte del público a la misma.

Imagen 6: Creative Commons

Fuente: https://pixabay.com/es/creative-commons-licencias-iconos-
783531/
(Software con dominio público y software semi-libre)

El Software con dominio público

Es software sin copyright.

Software Semi-libre
El Software semi-libre no es libre, pero permite que se use, la copia, la
distribución y hasta lo modificación. Ejemplo de ello son las primeras
versiones de Internet Explorer, y algunas versiones Netscape, y StarOffice.

(Shareware y software propietario)

Shareware
Shareware es el software con permiso para su redistribución, pero su uso
implica el pago. Generalmente, su código fuente no está disponible, por lo
que no es posible modificarlo.
Se distribuye gratuitamente, aunque por tiempo limitado o con restricciones
de uso, pudiendo obtener la versión completa pagando. Abarca las licencias
adware, trial y demo.

Software Propietario
El Software propietario es aquel cuya copia, redistribución o modificación
están, son prohibidos por su propietario. Para usar, copiar o redistribuir, se
ha de solicitar permiso al propietario o pagar por ello.
Imagen 7: software propietario
Fuente: https://pixabay.com/es/software-cd-dvd-digital-disco-417880/

(Trial y demo)

Trial
Es una versión de un programa de pago, que se distribuye de forma
gratuita con todas sus funciones activas, pero sólo por un tiempo,
generalmente 30 días de uso ilimitado, después deja de funcionar.
Para poder seguir usándolo se debe comprar la clave de registro. Ejemplo
de ello son aplicaciones como Nero, Alcohol 120% y Photoshop.

Demo
Versión de demostración, liberada por el autor, que no tiene todas las
funciones que tiene el original. Se distribuye de forma gratuita, y no tiene
plazo de validez.

1.5. Ley de la propiedad intelectual

La OMPI (Organización Mundial de la Propiedad Intelectual) realiza dos
clasificaciones de la propiedad intelectual:
 Derechos ligados a la propiedad industrial
o Patentes
o Marcas
o diseños industriales
o denominaciones de origen)
 Derecho de autor y los derechos conexos.

En la legislación española se entiende como propiedad intelectual la

segunda vertiente, es decir los derechos de autor.
La propiedad intelectual se integra por derechos de carácter personal y
patrimonial, que dotan al autor de toda disposición y derecho exclusivo a
poder explotar la obra, sin más limitaciones que las que establezca la Ley.

Teniendo en cuenta el desarrollo de las nuevas tecnologías digitales de la

información y de las redes informáticas descentralizadas, estas han
generado un gran impacto en torno a los derechos de propiedad intelectual,
lo que ha supuesto un esfuerzo por parte de la comunidad internacional y
de la Unión Europea para así poder proporcionar instrumentos que
permitieran una mejor y mayor protección de estos derechos legítimos, sin
perjudicar el desarrollo de Internet, que en gran parte se basa en la libertad
de los usuarios para poder aportar contenidos.

Imagen 8: Legislación
Fuente: https://pixabay.com/es/la-justicia-oro-escala-derecho-450209/

En el siguiente enlace encontrarás más información

referente a LPI u derechos de autor
 http://noticias.juridicas.com/base_datos/Admin/rdleg1-
1996.html

https://www.boe.es/buscar/act.php?id=BOE-A-1996-8930

Real Decreto Legislativo 1/1996, de 12 de abril, por el que

se aprueba el texto refundido de la Ley de Propiedad
Intelectual

http://www.boe.es/buscar/act.php?id=BOE-A-1996-8930

Propiedad Intelectual. lnformación general. Ministerio de

Cultura

http://www.mcu.es/propiedadInt/CE/InformacionGeneral/Inf
ormacionGeneral.html
 1.6. Derechos de autor
El derecho de autor se puede definir como un conjunto de derechos de una
persona natural sobre su obra de naturaleza literaria, artística o científica,
las personas jurídicas también pueden ser titulares de los derechos.

La legislación quiere que la obra del autor sea siempre reconocida y

favorece que pueda obtener unos beneficios por su trabajo intelectual y por
su aportación a la cultura o a la ciencia, beneficios que se reconocen
durante un tiempo limitado.

Los derechos de autor son:

 Derechos morales, irrenunciables e inalienables, como el derecho
de reconocimiento de autoría y el derecho de integridad de la obra,
entre otros.
 Derechos económicos o de explotación, transferibles y de duración
limitada en el tiempo. El autor tiene los derechos de explotación de
su obra, lo que incluye su facultad de autorizar su reproducción,
distribución, comunicación pública y transformación. Una obra no
puede ser explotada sin su autorización, salvo en determinados casos
previstos en la ley.

Otros conceptos relacionados con los derechos de autor:

Dominio público
Cuando vence el plazo de protección de los derechos de explotación y
económicos, una obra literaria, artística o científica pasa a ser de dominio
público y puede ser explotada libremente, aunque aún así, debemos
respetar la autoría y la integridad de la misma.
En la legislación española los derechos de explotación se mantienen hasta
70 años tras la muerte del autor, tras ello la obra pasa a ser de dominio
público.

Copyright
Se utiliza para designar solamente los derechos de explotación de una obra,
pero no los derechos morales. Estrictamente significa derecho de copia, que
es un derecho considerado como básico y previo a cualquier explotación.

El símbolo © asociado a un nombre indica la titularidad de derechos de

explotación. Su uso no es obligatorio, y a veces va asociado a la frase
"todos los derechos reservados".

Derecho de cita
El artículo 32 de la Ley de Propiedad Intelectual recoge el derecho de cita,
que permite incorporar fragmentos de obras protegidas a documentos o
materiales que se elaboren. Se excluyen los libros de textos y manuales
universitarios.

1.7. Licencias de imágenes

Uno de los mayores problemas a los que nos enfrentamos a la hora de crear
una web o publicar un post en un blog, es elegir las imágenes que van a
acompañar al texto. Tendemos a buscar en Google, y poner lo primero que
nos parezca bien, pero esto puede resultar peligroso ya que las imágenes,
tienen derechos de autor.

Otra opción emplear imágenes de un banco de imágenes, aunque en

ocasiones estas vienen con una marca de agua o hay que pagar por la
descarga de un número determinado de imágenes.
Los derechos de autor, como ya hemos visto en apartados anteriores,
defienden la propiedad intelectual de la obra.
Pensamos que las cosas que encontramos en internet son gratis y que
podemos copiarlo y hacer y deshacer a nuestro antojo, así como
compartirlo como si fuera de nuestra propiedad. Pues bien, esto no es así.

Los derechos de autor de una obra están vigentes sea cual sea canal
mediante el cual se difunda, una web, una revista, etc.
Nos centraremos aquí en las imágenes, pero estas licencias se aplican a
todo tipo de creaciones.

Tipos de licencias de imágenes

Existen tres tipos de licencias:
• Con derechos de autor
• Creative Commons
• De dominio público

Con derechos de autor (©Copyright)

Protege todo el contenido, que pertenece al autor o a quien haya sido
cedido (cesionario).
Los derechos de autor comienzan al crear la obra, y noo requieren de
registro previo.
Si un autor de una obra sea del tipo que sea, o por ejemplo, un diseñador
crea una imagen y la sube a su web, la puede distinguir mediante una ©.
Pero si crea una imagen, y posteriormente esta es vendida, ya no podría
utilizarla, ya que el cesionario en este caso, sería el cliente.

Una variante del Copyright sería el Copyleft, que como ya dijimos, permite
la libre modificación y distribución de las copias, lo que garantiza libre
acceso a las ellas.

Creative Commons

Es un tipo de licencia específicamente creada para internet, que es

compatible con los derechos de autor, pero además ofrece algunos derechos
a terceros, que varían en función de las condiciones concretas relativas a
cada obra.

Las licencias Creative Commons no surgen por sí mismas, se hace necesaria

la intervención de su autor.

Tenemos que tener en cuenta que se den cuatro condiciones:

  Reconocimiento: necesario para el reconocimiento de la autoría.
 No comercial: no será utilizada con fines comerciales.
 Sin obras derivadas: no se permite transformar la obra original.
 Compartir igual: está permitida la creación de obras derivadas
siempre que sigan manteniendo la misma licencia.

Estos requisitos anteriores dan lugar a 6 tipos diferentes de licencias

Creative Commons:

 Reconocimiento (by)
Se permite cualquier explotación de la obra, y también se pueden crear
obras derivadas permitiendo su distribución.
 Reconocimiento – No comercial (by-nc)
Es permitida toda explotación de la obra siempre que no tenga un fin
comercial.
 Reconocimiento – No comercial – Compartir Igual (by-nc-sa)
No está permitido su uso comercial, aplicable tanto a la obra original como
a las derivadas. Su distribución mantendrá el mismo tipo de licencia
original.
 Reconocimiento – No Comercial – Sin Obra Derivada (by-nc-
nd)
No se permite la comercialización de la obra original y tampoco se pueden
crear obras derivadas, independientemente de cual sea su finalidad.

 Reconocimiento – Compartir Igual (by-sa)

Se permite el uso comercial tanto de la obra original como derivadas,
siempre que se mantenga la licencia que regula al original.

 Reconocimiento – Sin Obra Derivada (by-nd)

Es permitido el uso comercial de la obra, pero no se pueden crear obras
derivadas.
Si se quiere obtener una licencia Creative Commons debemos acudir a la
página oficial, hecho esto , podremos mostrar nuestra licencia de tres
maneras diferentes:
 Commons Deed:
Resumen del texto legal con los iconos relevantes.
 Legal Code:
Código legal de la licencia al completo.
 Digital Code:
Código digital que sirve para que los motores de búsqueda
puedanidentificar nuestra autoría.

Puedes encontrar más información sobre los derechos

de autor en el siguiente enlace:
http://www.clarkemodet.com/es/faqs/derechos-
autor/que-protege.html

Imagen 9: Creative Commons

Fuente: https://pixabay.com/es/creative-commons-cc-personajes-785334/

COMPRUEBA LO QUE SABES:

Busca en internet imágenes con diferentes tipos de
licencias, y explica cuáles podríamos usar libremente y
por qué.
 2. Tipos de imágenes en la web.
Las imágenes son muy importantes en una página web, ya que la hacen
más agradable y atractiva de cara al visitante.

Una de las principales decisiones que debemos tomar a la hora de incluir

imágenes en nuestra web pasa por elegir el formato correcto de manera
que logremos una buena relación entre la calidad visual de la imagen y su
peso en Kb, ya que esto supone que la página, y más en concreto la imagen
cargue más rápido y nuestro visitante no se canse de esperar a que esta se
muestre, hay que tener en cuenta que si la demora es larga, el visitante se
aburrirá y generalmente abandonará la web.

Es por ello, que debemos saber que no todos estos formatos son adecuados
para una web, ya que pueden ocupar mucha memoria, cargarse más
despacio o porque no son compatibles con algunos navegadores.

Cuando hablamos de formatos de imagen en la web, generalmente nos

limitarnos a 3, pese a que existan más formatos de imagen, ya que son los
únicos generalmente soportados por los navegadores de internet. Los
formatos más utilizados son el GIF PNG y el JPG porque ocupan poco
tamaño en disco y se consigue que se transmitan más rápidamente por la
Red, y por tanto, que su carga sea más rápida.

(formato de imagenes)
Las imágenes pueden ser de otros muchos formatos diferentes, como por
ejemplo, bmp, tiff, jpg de alta calidad, etc., y pese a ser imágenes de
mayor calidad que las imágenes gif, png o jpg, no son recomendables
debido a que ocupan más memoria.

Además, también debemos saber que el uso de imágenes puede ser causa
de graves errores en las páginas e incluso acarrear problemas al propietario
del sitio web, por lo que ya hemos dicho a cerca de la propiedad intelectual
y los derechos de autor.
Para evitar todo esto, debemos tener unas unas nociones básicas sobre el
uso de imágenes, de forma que podamos crear diseños atractivos y rápidos,
y así conseguir que nuestras páginas tengas más visitas.

Respecto a los tipos de imágenes más usados, y como veremos más

adelante, GIF se usa para imágenes con dibujos y animaciones, JPG para
las fotografías. Estos dos formatos realizan compresión de la imagen. Por
otra parte, el formato PNG tiene una muy buena compresión y calidad en
las imágenes, aunque no se usa tanto, y no todos los navegadores ofrecen
compatibilidad.

Imagen 10: Formatos de imagen

Fuente: https://www.shutterstock.com/es/image-illustration/3d-rendering-
image-file-format-text-
91390172?irgwc=1&utm_medium=Affiliate&utm_campaign=Hans%20Brax
meier%20und%20Simon%20Steinberger%20GbR&utm_source=44814
 3. Imágenes mapa de bits, imagen vectorial.
Software para crear y procesar imágenes. Formato
de imágenes.
Una imagen digital se puede almacenar en distintos formatos. Cada uno de
ellos tiene una extensión específica que marca las características del archivo
que lo contiene, y que permite que ciertas aplicaciones lo puedan leer. Los
más utilizados son: BMP, GIF, JPG, TIF y PNG.

3.1. Conceptos básicos de imágenes.

Antes de comenzar a describir los formatos de imagen debemos conocer
algunos aspectos relativos a las imágenes que son de importancia.

El píxel
El píxel es la unidad mínima que se puede visualizar en una imagen digital.
Si hacemos zoom sobre una imagen observamos que está formada por
puntos o píxeles, en una especie de cuadrícula. Las cámaras digitales y los
escáneres capturan las imágenes en una matriz de píxeles.
Imagen 11: Pixeles
Fuente: https://pixabay.com/es/verde-digitales-cuadrados-dise%C3%B1o-
1884796/

Resolución de imagen
Es el detalle o calidad de una imagen digital que viene expresada en ppp
(píxeles por pulgada) también llamados dpi (dots per inch) por sus siglas
del inglés. A mayor número de pixeles por pulgada en una imagen, mayor
calidad tendrá la misma.
La resolución en un monitor se refiere a esto mismo, es decir al número
total de píxeles por pulgada que puede mostrar.

Busca en internet más información acerca de

las resoluciones para distintos dispositivos,
como puedan ser una pantalla de ordenador,
una TV, impresora, móvil o Tablet.
Imagen 12: Resolución de imagen 4K
Fuente: https://pixabay.com/es/ultra-hd-resoluci%C3%B3n-1194134/

Profundidad de color
La profundidad de color hace referencia al número de bits necesarios para
poder codificar y guardar la información de color de cada píxel en una
imagen.

SABÍAS QUE…

Un bit es una posición de memoria que puede tener el

valor 0 ó 1.

Cuanto mayor es la profundidad de color en bits, la imagen tendrá una

paleta de colores más amplia.

Se utilizan más o menos bits para obtener un

determinado número de colores:

1bit ->imágenes en blanco/negro, sin grises.

0=color negro
1= color blanco
 2bits -> 4 colores
00=color negro
01=color X
10=color Y
11=color blanco

3-bits = 8 colores

8-bits = 256 colores

24-bits = 16.7 millones de colores.

3.1.1. Modos de color

Nos referimos a modo de color cuando hablamos de un sistema de
coordenadas que sirve para describir el color que tiene cada píxel usando un
valore numérico.
Los modos de color que más se usan son:
 Modo monocromático.
Es correspondiente a una profundidad de color de 1 bit.
La imagen se forma por píxeles blancos o negros puros.
 Modo Escala de Grises.
Usa el canal negro.
Se permiten hasta 256 tonalidades de gris entre el blanco y negro.
 Modo Color indexado.
Usa un canal de color indexado de 8 bits.
Se pueden obtener hasta un máximo de 256 colores 28.

 Modo RGB.
En este modo cada color está formado por la combinación de tres
canales de color, rojo, verde y azul (RGB).
Se les asigna un valor de intensidad a cada uno que va de 0 a 255, y
de estas combinaciones para cada canal de color surgiendo hasta
16,7 millones de colores. Este modo de color es el que usan las
pantallas.
 En el siguiente ejemplo vemos como asignando el valor 255 al rojo y
el 0 al resto, obtenemos el color rojo.

Imagen 13: Paleta de colores de Office. Modo RGB

Fuente: propia

 Modo HSB.
Cada color se obtiene de los valores de tres parámetros que son:
o Hue oTono: que es el valor del color: rojo, azul, verde, etc.
o Saturation oSaturación: hace referencia a la pureza del color
sus valores oscilan de 0% al 100%.
o Brightness o Brillo: se refiere a la intensidad de luz del color,
es decir, la cantidad de negro o blanco que contiene el color
estando su valor entre 0 (negro) y 100 (blanco).
 Modo CMYK.
Cada color se obtiene por la combinación de cuatro colores o canales,
que son: Cyan, Magenta, Amarillo y Negro (Cyan, magent, yellow,
black). Cada canal puede tomar valores entre 0 y 255. Estas
imágenes tienen una profundidad de color de 32 bits, y este modo de
color es el usado en impresión.
 SABÍAS QUE…

 La definición de colores que vemos por pantalla no

es la misma que cuando imprimimos una imagen que
estamos viendo, ya que usan diferentes colores en la
composición de la imagen, RGB para la pantalla y CMYK
para impresión, por tanto cuando imprimamos una
imagen esta no se verá con los mismos colores o nitidez
que la estábamos viendo en pantalla, es por ello que se recomienda
calibrar las pantallas.

Imagen 14: RGB y CMYK

Fuente: https://pixabay.com/es/ojo-ver-punto-de-vista-colores-161558/

3.1.2. Mapa de bits

Las imágenes de mapa de bits o imágenes raster son imágenes formadas
por un conjunto de puntos (píxeles) en una matriz. Cada uno de estos
puntos tiene un valor que describe su color. También se las conoce como
imágenes pixeladas o bmp.
BMP, bitmap o mapa de bits ha sido uno de los formatos de mayor uso ya
que inicialmente se desarrolló para aplicaciones Windows.
(Beneficios)
Es un formato sin pérdidas de calidad y muy adecuado para el
almacenamiento de imágenes que queramos manipular posteriormente.
Entre sus ventajas, cabe destacar que como no tiene compresión, permite
guardar mucha cantidad de información de la imagen, por contrapartida, el
archivo que genera tiene un tamaño expresado en Kb o MB muy grande.
Imagen 15: Imagen pixelada
Fuente:
https://pixabay.com/es/corazon-pixel-cuadrado-amor-rojo-1847868/

COMPRUEBA LO QUE SABES:

Cuál es la diferencia entre un pixel y un voxel.

3.1.3. Imagen vectorial

Las imágenes vectoriales son representaciones de entidades geométricas
como pueden ser círculos, rectángulos polígonos o segmentos. Se
representan por fórmulas matemáticas. El procesador gráfico es el
encargado de traducir estas formas en información para que pueda ser
interpretada.

Como este tipo de imágenes están compuestas por entidades matemáticas,

se les puede aplicar fácilmente transformaciones geométricas como
ampliación, expansión, etc., lo que no se puede hacer con imágenes de
mapa de bits, que si se someten a estas transformaciones sufren pérdidas
de información, lo que se conoce como distorsión de la imagen.
Cuando ampliamos una imagen bmp, esta se pixela o sufre el llamado
efecto escalonado, no ocurre así en las imágenes vectoriales.
Además, otra ventaja de las imágenes vectoriales también conocidas como
clipart en el caso de un objeto vectorial, es que permiten obtener una
imagen con muy poca información, por lo que el tamaño de archivo
resultante es bastante pequeño.

Como desventaja de las imágenes vectoriales, decir que ya que están

formadas por la representación de formas simples, y aunque estas se
pueden superponer obteniendo grandes resultados, no es posible describir
todo tipo de imágenes con vectores, como por ejemplo cuando se trata de
fotografías realistas.

Imagen 16: Imagen vectorial

Fuente:https://pixabay.com/es/enredadera-rama-hojas-naturaleza-
1948358/

Los estándares más populares de formatos de imagen vectorial son:

Adobe:
.eps
.ps
.pfd
.fla
.swf
Microsoft
.wmf
W3C
.svg
 COMPRUEBA LO QUE SABES:

Busca en internet aplicaciones que usen o sean

capaces de crear imágenes vectoriales.

3.1.4. Software para crear y procesar imágenes.

Un sitio Web debe incluir además del texto, imágenes, animaciones, sonido,
etc, por lo que además de las aplicaciones que nos permiten dar estructura
a las páginas de nuestro sitio, tendremos que manejar otras aplicaciones
para procesar imágenes, sonido, animaciones o video, así como multimedia
en general.

Ya hemos mencionado anteriormente que las imágenes resultan esenciales

para atraer la atención de nuestros visitantes y como también hemos visto
en temas anteriores transmiten, no solo la esencia de un sitio, sino además
sentimientos y sensaciones.

Para optimizar nuestras imágenes para la web tenemos un gran repertorio

de aplicaciones para procesar imágenes.
Sin lugar a dudas, quien lidera este mercado es Adobe Photoshop que nos
proporciona muchísimas herramientas para crear, editar y retocar imágenes
y fotografías.

Imagen 17: Icono Photoshop

Fuente: https://pixabay.com/es/photoshop-logotipo-s%C3%ADmbolo-
adobe-1065296/
La aplicación de Macromedia para trabajar con imágenes es Fireworks,
resulta interesante si queremos trabajar con otro tipo de archivos
multimedia, ya que nos permite varias modificaciones de una misma
imagen.

Además de los anteriores encontraras otros programas como Photoshop

Elements que incluye varias de las herramientas incluidas en Photoshop, es
una versión más elemental pero que cumple perfectamente su cometido,
también podemos usar Paint Shop Pro de precio similar al anterior y que
también proporciona muchas herramientas para crear gráficos
profesionales.
Si eres principiante, y por su fácil manejo puede usar Photo Paint de Corel
que también incluye múltiples herramientas para el diseño artístico y
creativo.

No podemos dejar de mencionar Adobe Image Ready, que se incluye en el

paquete de Photoshop, que proporciona el mismo juego de herramientas
que éste para crear y editar imágenes y además permite crear rollovers.

Cuando hablamos de crear animaciones, el líder indiscutible es Flash de

Macromedia. Flash es el estándar de la animación en la Web, para crear
animaciones, sonido y efectos interactivos. Flash es capaz de crear archivos
de poco tamaño, y sus películas y animaciones son interactivas, además el
formato vectorial de sus gráficos los hace pequeños y escalables.

Existen otros programas como Adobe Live Motion, el paquete multimedia de

Adobe para crear contenido interactivo. Apple Quick Time, se utiliza junto
con QuickTime Player Pro para editar y exportar archivos sencillos de audio
y video.
Macromedia Director MX, este tipo de ficheros creados con Directo solo
pueden visualizarse en el navegador si disponemos del plugin adecuado,
Shockwave, puede descargarse en la página web de Macromedia.
Por otra parte, podemos encontrar en internet páginas online que nos
permiten hacer edición de imagen y cambios de formato. TE mostramos a
continuación algunas de ellas.
(Photofancy, pixrl.com y splashup)
 Photofancy
Permite editar fotos online de forma sencilla y gratuita.
Permite acciones que van desde la corrección profesional de la
imagen hasta los efectos fotográficos más divertidos.

 Pixlr.com
Ésta es una herramienta con muchas opciones, no requiere registro y
permite realizar ajustes y utilizar capas para tus retoques.
 Photoshop Express
De adobe. Sus controles son muy simples y los ajustes están
prediseñados por el programa, lo malo es que no se pueden
personalizar los retoques de la imagen.
 Splashup
También permite usar capas para los retoques, y permite una gran
cantidad de ajustes que puedes realizar a tus imágenes. Además
podemos editar las imágenes e indicarle la dirección web donde la
tenemos alojada para poder publicarla directamente en tu red social
favorita.

(Picnik, PicMagic, PhotoFlexer y Sumo Paint)

 Picnik
Tiene una gran cantidad de filtros predeterminados y es muy sencilla
de usar, con una interfaz muy intuitiva por lo que es una herramienta
muy accesible a cualquiera que no tenga muchos conocimientos de
edición de imágenes.
 PicMagick
Es un editor rápido y sencillo de imágenes, una vez subida la imagen
podemos utilizar los ajustes predeterminados: cortar, girar, algunos
filtros, y una vez editada la volvemos a descargar con los cambios
realizados.
  PhotoFlexer
Muy similar a Picnik en cuanto funcionamiento y a PicMagic en cuanto
a su uso.

 Sumo Paint
Parece una aplicación de escritorio e incorpora muchas funciones,
entre ellas, podemos usar capas para la edición, modificar los niveles,
cortar, girar, etc. Nos aporta muchas posibilidades diferentes de
edición.

En el siguiente enlace accederás a photofancy

http://www.photofancy.es

3.1.5. Formato de imágenes.

Las imágenes digitales se pueden guardar en distintos formatos. Cada
formato se corresponde a una extensión específica del archivo que lo
contiene, y aporta sus propiedades. Los más utilizados son: BMP, GIF,
JPEG, TIF y PNG.

BMP
 Bitmap o mapa de bits
 Desarrollado para aplicaciones Windows.
 La imagen se forma mediante una matriz de píxeles.
 BMP no sufre pérdida de calidad y guarda bastante información de la
imagen.
 El archivo tiene un tamaño muy grande.
GIF
 Graphics Interchange Format o formato de Intercambio Gráfico
 Diseñado únicamente para comprimir imágenes digitales. Tiene una
excelente compresión.
  Es capaz de reducir la paleta de colores a 256 colores con una
profundidad de color de 8 bits.
 Admite gamas con menor número de colores permitiendo la
optimización del tamaño del archivo.
 Es un formato adecuado para publicar imagenes en la web.
 No se recomienda para fotografías ya que no tiene gran calidad ni
para originales, porque muestra muchos menos colores.
 Se le puede aplicar transparencia. Para conseguir un dibujo con
transparencia tenemos que utilizar un programa de diseño gráfico.
 Con este formato de imagen podemos utilizar una paleta de 256
colores diferentes, cuantos menos colores utilicemos en la imagen,
menos espacio ocupará el archivo en disco.

JPG
 JPG-JPEG o Joint Photographic Experts Group, en español, Grupo de
Expertos Fotográficos Unidos
 Admite una paleta de hasta 16 millones de colores.
 Junto con GIF es uno de los formatos más usados en la publicación
de imágenes en la web.
 La compresión JPEG supone cierta pérdida de calidad en la imagen,
pero esta es asumible en tanto en cuanto nos deja reducir el tamaño
del archivo y a la vista no se nota gran diferencia o esta es más que
aceptable.
 Se recomienda usar una calidad del 60-90 % del original.
 Es un formato con pérdida, por lo que cada vez que modificamos y
guardamos un archivo en formato JPEG, se tiende a perder parte de
su calidad, al volver a aplicar cierta compresión al guardarlo.
 Las cámaras digitales almacenan por defecto las imágenes en
formato JPEG con máxima calidad y sin compresión.
 Ideal para publicar fotografías en la web configurando
adecuadamente dimensiones y compresión.
 Ya que es un formato con pérdida y compresión no se recomienda
para almacenar los originales.
 No permite La transparencia.
  JPG utiliza 16 millones de colores diferentes, lo que lo hace que sea
un formato adecuado para fotografías.

TIF-TIFF
 Tagged Image File Format o Formato de Archivo de Imagen
Etiquetada.
 Almacena imágenes de alta calidad usando una profundidad de color
que abarca de 1 a 32 bits.
 Es el formato ideal para editar o imprimir una imagen.
 Adecuado para archivar archivos originales.
 Produce archivos muy grandes, por lo que no es adecuado para la
web.

PNG
 Portable Network Graphic o Gráfico portable para la red
 Es una alternativa al formatoGIF.
 Su tasa de compresión es superior a la del formato GIF (+10%)
 Permite usar un mayor número de colores a diferencia de los 256
que ofrece el GIF.

Imagen 17: Iconos que identifican el formato de una imagen

Fuente: Propia

En resumen:
JPG GIF PNG
Número de Hasta 256 colores Número de
colores: 24 bits colores: 24 bits
color o 8 bits color
B/N
Muy alto grado Formato de Mayor compresión
de compresión compresión que GIF (+10%)
Admite carga Admite carga Permite carga
progresiva progresiva progresiva
No admite Admite fondos Permite fondos
fondos transparentes transparentes de
transparentes 8-bits
No permite Permite animación No permite
animación animación
 En la siguiente imagen podrás observar las diferencias
entre diferentes formatos de imagen

 http://www.guiawebmaster.com/diseno-
web/tipos-imagenes-web.php

COMPRUEBA LO QUE SABES:

Cuál es la diferencia entre una imagen tiff y una jpeg y

cuáles son sus usos.

3.1.6. Insertar imágenes en la web

La etiqueta <img> permite introducir una imagen en un documento HTML,
además, necesita un atributo que indica la dirección de la imagen. Este es el
atributo "src"

La sintaxis es la siguiente:
<img src="direccion de la imagen">
<img src="Logo.png" />

Esta etiqueta no necesita etiqueta de cierre.

<img src="direccion de la imagen" />
La etiqueta <IMG> tiene varios atributos que podemos aplicar y que
facilitan su uso. Veamos cuáles son.

ALT
Alt se usa para comentar con texto imágenes, y su uso es fundamental y
debemos incluirlo en la creación de sitios web por diferentes razones:
 En algún caso los navegadores pueden no mostrar la imagen.
 Los navegadores textuales para invidentes necesitan interpretar las
imágenes y de no comentarlas no podrías interpretar las imágenes.
  Permite quitar pies de imagen ya que podemos incluir comentarios
dentro de la imagen.
 Ayuda a optimizar la página web. La sintaxis usada para comentarios
quedaría de la siguiente forma:

<IMG SRC="Perro Yorkshire.gif" ALT="Foto de un perro de raza Yorkshire">

Para comprobar el funcionamiento de la etiqueta alt sólo tenemos que pasar
el ratón sobre la imagen del ejemplo.

<!DOCTYPE HTML
PUBLIC ="-//IETF//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Mis perritos</TITLE>

<BODY BGCOLOR="white">

<IMG SRC="Perro.gif" ALT="Imagen de mi perro" width="178"

height="180">

</HEAD>

</HTML>
WIDTH y HEIGHT
Con Weidth y heith podemos establecer las medidas, ancho y alto de la
imagen.

<IMG SRC="PerroYOrkshire.gif" WIDTH=190 HEIGHT=180 ALT="Foto de mi

perro YOrkshire">

donde WIDTH=190 es el ancho de la imagen expresada en píxel, y

HEIGHT=180 corresponde al alto.

En cualquier caso, lo mejor es insertar imágenes con su tamaño real

mayormente si su formato es GIF, por razones de pérdida de calidad al
modificar su tamaño, provocando efectos visuales no deseados, o de poca
calidad.

BORDER
Con el atributo BORDER aplicamos bordes a la imagen.
Los valores también son numéricos y se expresan en píxel, significando el
valor 0 que no va a haber borde. Por otro lado, si omitimos este atributo,
simplemente no se aplican los bordes. La sintaxis correcta es:

<IMG SRC="Perro.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Foto de

mi perro">
<!DOCTYPE HTML
PUBLIC ="-//IETF//DTD HTML 4.0//EN">
<HTML>

<HEAD>

<TITLE>Mi perrito</TITLE>
</HEAD>

<BODY BGCOLOR="white">

<IMG SRC="Perro.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Foto

de mi perro">

</BODY>

</HTML>

HSPACE y VSPACE

Estos dos atributos permiten establecer la distancia medida en píxeles que

existe desde la imagen hacia los objetos que están a los cuatro lados de la
misma.
• HSPACE hace referencia a la distancia de los lados derecho e izquierdo
desde la imagen a los objetos que haya alrededor como texto, imágenes,
apliques, etc.
• VSPACE es la distancia de los lados superior e inferior de la imagen con
respecto a los objetos que hay alrededor como texto, imágenes, etc.). La
sintaxis de este atributo es la siguiente:

<IMG SRC="PerroYOrkshire.gif" WIDTH=178 HEIGHT=180 BORDER=3

VSPACE=2 HSPACE=2 ALT="Foto de mi perro Yorkshire">
Estos atributos resultan de utilidad cuando queremos generar espacio entre
la imagen y los objetos adyacentes.

ALIGN

El atributo ALIGN define la alineación de la imagen con respecto al texto

que se haya colocado antes o después de la misma. Dispone de varias
opciones para el atributo ALIGN:

 ALIGN=top: alinea la primera línea de texto con la parte superior de

la imagen.
 ALIGN=middle: alinea la primera línea del texto con el centro de la
imagen.
 ALIGN=bottom: alinea la primera línea de texto con la parte inferior
de la imagen.
 ALIGN=left: el texto se posiciona a la derecha de la imagen
comenzando desde la parte superior de la misma.
 ALIGN=right: el texto se posiciona a la izquierda de la imagen
comenzado desde la parte superior de la misma.

Si queremos optimizar el uso de estos archivos de imagen. Tenemos que

reducir el número de colores de nuestra paleta para los archivos GIF. Y para
los archivos JPG ajustar la calidad del archivo a la hora de guardarlo porque
este formato nos permite bajar la calidad de la imagen sin que esta pierda
mucho en su aspecto visual.

En HTML5 se añade una nueva etiqueta <picture> que permite describir con
todo detalle cómo deben cargarse las imágenes del sitio web.

Al margen de los nuevos atributos srcset y sizes definidos recientemente

para los elementos <img>, el nuevo elemento <picture> permite una
mayor flexibilidad al especificar qué imágenes utiliza el sitio.
Gracias a este elemento <picture>, será posible escribir código HTML limpio
y semántico, dejando que el navegador haga todo el trabajo de seleccionar
la mejor imagen para cada situación.

Cuando el navegador soporta el elemento <picture>, sólo tenemos que

definir todas las imágenes responsive, y es el navegador el que se encarga
de seleccionar la mejor alternativa.

Esta es la sintaxis de <picture>

La sintaxis del elemento <picture>

<picture>
<source
media="(min-width: 650px)"
srcset="images/kitten-stretching.png">
<source
media="(min-width: 465px)"
srcset="images/kitten-sitting.png">
<img
src="images/kitten-curled.png"
alt="a cute kitten">
</picture>

COMPRUEBA LO QUE SABES:

Trata de buscar más información acerca de la etiqueta

<picture>
 En el siguiente enlace encontrarás más información
referente a la la etiqueta <picture>:
http://librosweb.es/tutorial/el-nuevo-elemento-
de-html5-para-crear-imagenes-responsive/#toc-art-
direction

4. Optimización de imágenes para la web.

Como ya hemos visto, existen buenas herramientas para la edición de

imágenes entre ellas, Photoshop, el CorelDraw, el Fireworks, etc.

Estas herramientas nos permitirán realizar el tratamiento y optimización de

imágenes de todo tipo. De forma que una vez creada la imagen, las
pasamos por estos programas y podremos comprimir más, haciéndolas
rápidas de transferir y, por tanto, mejores para Internet.

Podemos realizar esta operación de optimización con otras herramientas

como: WebGraphics Optimizer, ProJPG, GIF Imantion, etc.

4.1. ¿Por qué es importante la optimización de imágenes a

la hora de hacer tu página web?

1. Es de vital importancia que los archivos de imágenes ocupen lo mínimo

posible, lo que facilitará y hará más rápida su descarga y visualización por
Internet.
2. El tamaño o peso de una imagen viene determinado por varios aspectos,
las dimensiones que tenga la imagen, resolución, número de colores y su
formato, que puede ser JPG, GIF o PNG normalmente.
3. Es importante que creemos y guardemos nuestras imágenes con una
resolución que no sea superior a 72 ppp, que es la que suelen usar las
pantallas de ordenador.
4. Es posible que nos pueda interesar hacer una reducción del número de
colores de la paleta de color, ya que esto supone una reducción del tamaño
de archivo.
5. Es conveniente el uso de algún programa que permita la edición de
imagen para así poder definir las dimensiones deseadas de la imagen antes
de subirla a la página web.
6. La imágenes originales las guardaremos en formato sin compresión,
como son BMP, TIFF ó JPEG, para conservar una imagen de calidad y a
partir de la imagen original crearemos una copia en formato comprimido
como GIF, PNG o JPEG con las dimensiones, resolución y paletas de colores
deseados y adecuados para su publicación en la web.
7. Como ya sabemos las imágenes GIF resultan mejores para dibujos,
gráficos y logotipos, ya que permiten representar mejor color sólido y
tienen una paleta de color con un número muy reducido de colores.
8. Las imágenes JPEG se usan para fotografías e imágenes que contengan
degradados, ya que admiten un mayor número de colores y mejor
definición, color de 24 bits, y también porque ya que están comprimidas
ofrecen una imagen mejor y que ocupa un menor espacio en disco.
9. SEO: uno de los factores que contribuye al posicionamiento es la
velocidad de la carga de la página, las imágenes pesadas (muchos KB o MB)
hacen que la velocidad de carga de una página se vea ralentizada.
10. Conversión: Una página cuya estructura y la combinación de imágenes
y textos sea organizada, tendrá más posibilidades de atraer, retener y
"convertir" en clientes a las visitas.
11. Estética: las imágenes de pésima calidad hacen de todo menos
transferir una imagen seria y profesional de nuestro negocio.

4.2. Reducir tramaño de imagenes

Para bajar el peso de una imagen se pueden modificar algunos de sus
parámetros usando cualquier editor de imágenes como por ejemplo
Photoshop, GIMP o cualquiera de los ya mencionados, si estás en
Photoshop, debes guardar tus imágenes mediante la opción “archivo >
Guardar para web…“. Algunos de los parámetros a modificar son:
 Formato del archivo gráfico:
o Conversión de formatos.
 Paleta de colores:
o Reducción de la paleta de colores.
 Tamaño de la imagen (Anchura x Altura)
o Reducción del tamaño de una imagen.
o Recorte de imágenes
Para que las imágenes ayuden a organizar el contenido y funcionen como
un elemento de atracción, debemos hacer que tengan el mismo tamaño
(ancho x largo) o el mismo ratio (16:9, 4:3, 1:1)

Para esta labor de optimización de imágenes podemos acudir a diversas

páginas online, al igual que diferentes optimizadores.

Compressor.io
Permite comprimir y optimizar tus imágenes de forma sencilla desde la web.
Soporta 4 tipos de formatos: JPEG, PNG, GIF, y SVG.
Dispone de dos tipos de compresión: Lossless y Lossy, la primera mantiene
la fidelidad de la imagen, pero el archivo es de mayor tamaño, y la segunda
puede reducir hasta el 90% del tamaño de imagen lo que repercute un poco
en la calidad de la imagen.

Kraken.io
Permite optimizar y comprimir imágenes.
Hay una versión gratuita y una de pago con más opciones, en la gratuita,
aunque con ciertas limitaciones, podemos comprimir archivos JPEG y PNG, y
podemos elegir entre "Lossy" y "Lossless".

ImageOptim
Para Mac OS X, además de comprimir imágenes, permite eliminar
metadatos y ahorrar espacio. Es gratuita y soporta PNG y JPEG.

Image Optimizer
Es un servicio en linea para redimensionar, comprimir, y optimizar
imágenes. Solo tenemos que subir el archivo, elegir el tamaño de salida, y
escoger entre los 6 tipos de compresión que nos ofrecen que varían de muy
pequeño, a la mejor calidad. También podemos descargar esta herramienta
gratuitamente para plataformas Windows.

SuperPNG:
Es un Plugin gratuito para Photoshop, compatible con todos los navegadores
y que además se puede utilizar con Windows y Mac.

Dynamic Optimizer:
Esta herramienta, además, nos ofrece la posibilidad de seleccionar el tipo de
formato en el que queremos tener la imagen optimizada que nos vayamos a
descargar.

TinyJPEG y TinyPNG
TinyPGN utiliza un tipo de compresión inteligente "lossy", para reducir el
tamaño de tus archivos PNG y conserva la transparencia alfa del archivo.
Además, cuentan con un plugin para WordPress, y otro para Photoshop.
TinyJPEG hace lo mismo, pero sobre archivos JPEG, reduciendo el tamaño
de un archivo hasta en un 70% sin perder nada de calidad a simple vista.
 5. Audio: formatos. Conversiones de formatos
(exportar e importar)

En una página web podemos incorporar diferentes tipos de contenidos

multimedia.
Podemos introducir diferentes formatos de audio en una web, aunque de
todos los formatos de audio que existen, no todos son soportados o
adecuados para los navegadores.

En versiones antiguas de HTML podíamos insertar audio de varias formas,

como verás a continuación:
 Sonido mediante enlace al archivo:
Requiere de una aplicación asociada en el equipo.
<a href=”sonido.wav”> Pincha aquí para que suene</a>

 Sonido de fondo
Sonido que se carga junto con la página web, y que suena de fondo durante
su visualización. Esto se hacía con la etiqueta <bgsound> y con el atributo
src para indicar el archivo a reproducir.

Adicionalmente podríamos añadir más atributos como por ejemplo

loop=”infinite” para que se reproduzca una vez tras otra de forma
indefinida, aunque podríamos especificar un nº concreto de veces a
reproducir.
<bgsound src=sonido.mid>
Otra etiqueta para esta misma función es <embed> con los siguientes
atributos, src para indicar el nombre del archivo de audio; width y height
para establecer el tamaño de los controles del reproductor de audio;
autostart=”true” para que arranque la reproducción de forma automática;
Loop=”true” para que se reproduzca indefinidamente el audio hasta que
abandonemos la página web; hidden=”true” si queremos que el reproductor
esté oculto.

En HTML 5 usamos la etiqueta <audio>, un ejemplo de su uso sería el

siguiente:
<audio src=”música.mp3” controls> </audio>
En caso de que el navegador no entienda esta etiqueta aparecerá un
mensaje como el que sigue “El navegador no soporta la etiqueta audio de
HTML5” siempre y cuando lo hayamos incluido entre las etiquetas de
apertura y cierre, como sigue a continuación:

<audio src=”música.mp3” controls>

El navegador no soporta la etiqueta audio de HTML5
</audio>

Algunos de sus atributos son:

 Autoplay: hace que suene de forma automática
 Controls: sirve para mostrar los controles de reproducción del audio.
 Loop: reproducción en bucle.
 Muted: mutea o silencia el audio.
 Preload: con los siguientes valores: con el valor auto el audio es
cargado junto con la página, con el valor metada sólo se cargan los
metadatos,y con el valor none el sonido no se carga con la página,
sino al final.

 Src con el valor url, especifica la dirección del archivo de audio que
se va a reproducir.
 5.1. Formatos
UN archivo de audio se guarda con una extensión propia, que define varias
características del archivo, como por ejemplo las relativas a su tipo de
compresión y calidad del archivo. Algunas extensiones de audio son: .mid,
.wav, .ogg, .mp3, .wma, etc.

Antes de pasar a definir algunos de estos formatos y sus características,

debemos tener claros una serie de conceptos relativos al audio.

5.1.1. Conceptos Audio

Frecuencia: ciclos por segundo, se mide en hertzios. El espectro de sonido
es caracterizado por su rango de frecuencias. El oído humano es capaz de
distinguir sonidos comprendidos entre 20Hz y 20000Hz (20Khz). Este es un
aspecto a tener en cuenta a la hora de definir los aspectos en los que se
basan los diferentes métodos de compresión de audio.

Tasa de muestreo o simple rate: Cuando se convierte audio analógico a

digital, se obtiene una secuencia de ceros y unos de la señal analógica
muestreada, la tasa de muestreo, define cada cuanto tiempo se van a coger
muestras del sonido original o analógico para convertirlo en digital. Esta
tasa se mide en Hertzios, así por ejemplo, tenemos muestreos de 44100Hz
es decir, que en un segundo se toman 44100 muestras del audio original
que se convierten en ceros y nos. A mayor tasa de muestreo mayor calidad
de audio.

Resolución o bit resolution: La resolución hace referencia al número de

bits usados para almacenar cada muestra de la señal analógica, así una
resolución de 8 bits, 28 nos ofrece 256 niveles de amplitud. Un audio de
calidad cd por ejemplo suele ener un sonido de 44100Hz a 16 bits en
stereo.

Bitrate o velocidad de transmisión: Define el espacio físico en bits que

ocupa un segundo de audio, asi 3 minutos de mp3 a 128Kbit/s ocupan
2,81Mb de espacio en disco. A mayor bitrate, mayor calidad de audio, pero
por contrapartida tendrá mayor peso.

CBR/VBR: CBR o constant bitrate rate y VBR o variable bitrate rate, CBR
indica que el audio se codifico con un bitrate constante, a diferencia de VBR
que lo hace variando entre un rango máximo y mínimo en base a la tasa de
transferencia.
Códec: Codificación/decodificación. Un códec es un algoritmo que permite
la reducción del nº de bytes que ocupa el archivo. Cuando se codifica con
un códec determinado, se requiere el mismo códec para poder decodificar el
archivo y así pode r reproducirlo. Uno de los códec que más se usan
actualmente es el MP3.

Decibelio: Es una unidad de medida que se aplica a cosas muy diferentes,

y entre ellas a la intensidad de un sonido, sus valores van desde 0db que
indica ausencia de sonido a 120 dB que es el umbral de dolor del oído
humano, a partir del cual se puede producir la rotura del tímpano.

5.1.2. Formatos de audio

Dentro de los formatos de audio tenemos archivos digitales con compresión
y sin ella, lo que va a influir no sólo en la cantidad de espacio que ocupan,
sino en su calidad y definición.

Arhivos de audio digital sin comprimir

.PCM: No es en sí un formato, sino más bien una técnica de convertir audio

analógico en digital sin compresión. Se trabaja con PCM a la hora de
digitalizar, pero posteriormente se guardan los archivos en otras
extensiones como las que se nombran a continuación.
.WAV: WaveForm audio file, es un tipo de archivo que originalmente fue
desarrollado por Microsoft. Estos archivos tienen extensión “.wav”
Es un tipo de archivo sin compresión por lo que lo hace adecuado para
guardar archivos originales a partir de los cuales obtener otros formatos con
otras extensiones y nivel de compresión más adecuados para la web.
UN archivo en este formato ocupa unos 20-30Mb
.AIFF: Audio interchange file format, es parecido al formato WAV pero para
Apple.
.CDA: Son las pistas que se graban en un CD que usan el sistema PCM.

Formatos con compresión de audio

Cuando hablamos de comprimir hacemos alusión a que perdemos calidad en
un archivo, aunque los avances en tecnología y los estudios fisiológicos
sobre la audición en el caso del sonido y la visión en el caso de la imagen e
incluso sobre la integración de señales por parte de nuestro cerebro, han
permitido que estas técnicas de compresión se usen provocando las
menores pérdidas posibles, o al menos que aunque las haya no sean
perceptibles por nuestro oído o nuestra visión.

El tamaño de un archivo comprimido puede pasar de lo 30 Mb que decíamos

que ocupa un archivo en formato WAV a los 3 Mb que pasaría a ocupar con
un formato MP3 por ejemplo. Estamos hablando de que un archivo ocupa 10
veces menos y conservando calidad.

La mayor parte de sistemas de compresión de audio se aprovechan de los

defectos de nuestra fisiología, en este caso de nuestro oído para así poder
reducir el tamaño del archivo, en base a la eliminación de toda la
información que este no es capaz de integrar, a esta técnica se la llama
enmascaramiento, que no es más que una propiedad del oído humano que
le impide distinguir dos frecuencias muy próximas dentro del mismo rango,
ya que una enmascara a la otra. Por ejemplo, si en una canción suena al
mismo instante un sonido con una frecuencia de 13 Khz y otro de 13.2 Khz,
podríamos quitar una de las dos sin que lo notemos al escucharlo.
Así, lo que hace el compresor es ir “restando” todas las frecuencias que por
distintas razones son enmascaradas, reduciendo así el número de bytes,
generando archivos de menor tamaño.

SABÍAS QUE…

 A menor número de Kbps, más compresión, menor

tamaño del archivo, pero menor calidad.

 A mayor número de Kbps, menor compresión,

mayor tamaño del archivo y más calidad.

(MP3 Y OGG)
.MP3: El formato MP3 (Mpeg 1 Layer 3) es un formato que tiene un alto
grado de compresión, pero a su vez conserva una buena calidad.
Actualmente es el más usado e ideal para publicar audio en nuestra página
web. Es compatible con la mayoría de los reproductores. De 128 Kbps para
abajo no es recomendable.

.OGG (Vorbis): Es un códec libre para la compresión de audio, similar a

mp3 por lo que se está empezando a emplear bastante, entre otras cosas
también porque mp3 implica pagar una patente y ogg no. Reproductores
como VLC incorporan este códec, aunque el códec también se puede
descargar libremente de www.xiph.org.

(WMA y MID)
.WMA: Este es el formato de Microsoft creado para reproducirse en
Windows Media Player. Compite directamente con mp3 en cuanto a calidad,
su extensión es .wma.

Además de estos formatos existen otros con y sin compresión que no

trataremos aquí por desviarse de nuestros objetivos, si que no queremos
olvidar el formato de audio .MID.
.MID: Este es el formato de interfaz digital para instrumentos musicales, en
inglés Musical Instrument digital Interface, que en sí mismo no resulta de
un proceso de digitalización de un sonido analógico. .Mid almacena sonidos
de dispositivos MIDI (sintetizadores), recoge sus eventos, tipo de
instrumento que interviene, de qué forma, y cuando interviene. Es un tipo
de archivo que se puede editar y manipular, aunque requiere conocimientos
musicales. Hasta no hace mucho tiempo se solían usar en las páginas web
como música de fondo.

En el siguiente enlace encontrarás una infografía

sobre los formatos de audio:

https://www.xatakahome.com/reproductores/conoce-
mejor-los-formatos-de-audio-digital-con-y-sin-
perdida-de-calidad-con-esta-infografia

5.2 Conversión de formatos

Existen en el mercado múltiples aplicaciones llamada editores de audio que

permiten tanto la edición como la conversión de formatos simplemente
guardando el archivo con otra extensión de las permitidas, incluso a veces
según el formato nos permiten realizar ciertos ajustes relativos al nivel de
compresión que queramos, en función de la relación calidad/tamaño que
queramos obtener.
Veamos algunas herramientas editoras de audio tanto gratuitas como de
pago:
(Recording Studio y Sony Sound Forge Audio Studio 10)

Recording Studio
Diseñado para una edición rápida e intuitiva, simplifica la grabación, edición
y mezcla. Dispone de una versión gratuita y otra de pago.

Sony Sound Forge Audio Studio 10

Esta herramienta de pago es de Sony, permitirá grabar, editar y energizar
nuestra música y sonidos. Puedes descargarla en el siguiente enlace para
obtener una versión trial de 30 días:
http://dl03.magix.net/trial_soundforgepro11.exe?_ga=2.38035299.115674
7642.1496349629-989944383.1496349629
(Audacity y Ocean audio)

Audacity
Audacity es el editor de sonido gratuito más usado para manipular los
archivos de audio más comunes, entre los que se encuentran MP3, WAV u
OGG. Con él podremos editar archivos de audio en todos los formatos más
conocidos, además de importar archivos de sonido y música, así como
agregar efectos a las pistas de audio y unir, por ejemplo, canciones o
podcasts. Puedes descargarlo para probarlo en el siguiente enlace:
https://sourceforge.net/projects/audacity/

Ocen Audio
También permite editar archivos de audio, manipular eficientemente
archivos muy grandes y es multiplataforma.

Imagen 18: interfaz Ocean Audio

Fuente: http://www.ocenaudio.com/en/whatis

(Wavosaur y Nero Wave Editor )

Wavosaur
Este programa ocupa 1MB de tamaño y no requiere de instalación, contiene
una gran lista de opciones y funciones para modificar nuestros archivos de
audio.

Imagen 19: Pantallas e interfaz Wavosaur

Fuente: http://www.wavosaur.com/screenshot.php

Nero Wave Editor

La conocida suite de grabación de CDs, Nero, dispone de una utilidad
gratuita, llamada Nero Wave Editor. Es un sencillo editor que permite
manipular archivos de audio, eliminar siseos y clicks, o aplicar una gran
cantidad de efectos y otras operaciones, así como guardar en diferentes
formatos de audio.

COMPRUEBA LO QUE SABES:

Comprueba qué tipo de formatos maneja la aplicación

Nero Wave Editor.
 6. Video: Codificación de datos de video,
conversiones de formatos (exportar e importar)

La razón principal de usar video en nuestra web, es porque impacta y

mantiene la atención del usuario, además nos permite transmitir y resumir
el propósito de tu web en un solo vistazo. Es un elemento con gran poder
estético y que hace que nuestra web sea elegante, bonita y atractiva,
además, es un lugar donde poder contar y mostrar historias, transmitiendo
sensaciones y sentimientos que son más poderosos que una imagen
estática.
Es importante que en nuestra web usemos vídeos que no pesen demasiado
y que tratemos de que lo que se cuenta en él sea lo más corto posible para
reducir los tiempos de carga de la web, y también porque si el video dura
mucho tiempo y no resulta muy interesante para nuestro visitante, también
puede hacer que abandone la página.

Para insertar video con HTML5 usaremos la etiqueta <video>, como en el

ejemplo:
<video id="sampleMovie" src="HTML5Sample.mov" controls></video>
 SABÍAS QUE…

 Poner videos de fondo en tu web puede ser una

gran idea, ayudando que tenga un aspecto más dinámico
y elegante.

En los siguientes enlaces encontrarás tres ejemplos

de webs que incorporan video de fondo:

http://www.eva.co/
http://www.volkswagen-coccinelle.fr/espritcox/
http://glouglouwifi.com/en

En los siguientes enlaces conocerás más a fondo las

peculiaridades de la etiqueta <video>
 https://desarrolloweb.com/articulos/integrar-video-
html5.html

http://www.ite.educacion.es/formacion/materiales/182/cd/ci
nco/insertar_un_vdeo.html

6.1. Codificación de datos de video

En vídeo analógico digital existen dos sistemas o normas de codificación de
señal básicos.
NTSC
El sistema NTSC (National Televisión System Commitee) transmite 30
imágenes por segundo, y está compuesto por 525 líneas horizontales en dos
campos entrelazados compuestos de 262,5 líneas. (sólo 486 de ellas son
visibles). Cada línea tiene 648 píxels.
Este formato es el usado en América del Norte, América Central y Japón.
PAL
PAL (Phase Alternating Line). Su tasa de refresco es de 25 imágenes por
segundo. Es elformato usado en Asia, África y Europa y algunos países de
América del sur. Tiene un aspecto de ratio 4:3.

SECAM

SECAM significa Séquentiel Couleur à Mémoire.

Es la norma para la codificación desarrollada y usada en Francia y otros
países como la Unión Soviética.

Es compatible con el sistema PAL ya que tiene el mismo número de líneas y

la misma tasa de refresco.
Se diferencian por su forma de codificar el color.

SABÍAS QUE…

Los sistemas PAL y NTSC son totalmente incompatibles

entre sí.

6.2. Conversiones de formatos

La digitalización de vídeo analógico ocupa mucho espacio por lo que se
requiere comprimirlo, para que no ocupe tanto espacio de almacenamiento.
Para que un vídeo resulte fluido y nuestro ojo perciba correctamente el
movimiento continuo necesita alrededor de 25 imágenes por segundo,
llamados también frames por segundo o fps.
Si no comprimimos el video 25fps, ocuparán 1Mb, para 30 Mbps de video
necesitaremos una capacidad de 1,5 Gb por minuto.
Al igual que ocurría con el audio, en video también hay una serie de
algoritmos de codificación que reducen el tamaño de los archivos de vídeo,
haciéndolos más manejables y permitiendo que ocupen menos espacio,
estos algoritmos son los llamados Códecs. También existen formatos de
compresión con pérdida de calidad y sin ella.
(Fomas de compresión de archivos)
Podemos comprimir archivos de video de dos formas:
 Compresión Intra-frame: o compresión espacial, que comprime
cada frame individualmente sin tener en cuenta las imágenes que le
rodean. Se basa en la redundancia espacial y el resultado que ofrecen
son videos de buena calidad. El formato de este tipo más conocido es
el *.avi.

 Compresión Inter-frame: o compresión temporal, sus resultados

son archivos de menor tamaño ya que desecha más información. El
formato de este tipo más extendido es el *.mpeg-2.

6.2.1. Vídeo con compresión intra-frame

Los vídeos digitales comprimidos con el sistema intra-frame son de mayor
más calidad que los por el método inter-frame. Calidad implica archivos de
mucho tamaño.

Formatos AVI

AVI (Audio Video Interleave). Es uno de los formatos más usados con
compresión intra-frame, desarrollado por Microsoft para Windows.
Este formato tiene una extensión de archivo *.avi, y se le denomina
contenedor porque además de video puede soportar audio en cualquier
formato y varias pistas. Vídeo y audio se graban en distintas capas, de ahí
lo que se conoce como "interleave".
Formato DV

DV (Digital Video). Es un formato estándar de compresión desarrollado por

empresas como Panasonic, Sony o JVC. Tiene una resolución de 720 x 480
en NTSC y 720 x 576 en PAL.

Su frecuencia de transmisión de datos de 25 Mbps, y las pistas de audio se

almacenan sin comprimir.

6.2.2 Vídeo con compresión inter-frame

Compresión para internet

El formato de compresión de vídeo digital más extendido es el MPEG,

desarrollado por el Moving Picture Experts Group (Grupo de Expertos en
Imágenes en Movimiento) para producir patrones estándar de compresión
de vídeo y audio.

La técnica que usa este formato para comprimir la imagen se basa en la

similitud de contenidos y utiliza técnicas estadísticas, consiguiendo una
reducción de espacio con cierta pérdida de calidad, que sobre todo
dependerá de la complejidad de la escena y del tipo de algoritmo de
compresión utilizado.
Desde 1988 hasta la actualidad se han normalizado distintos formatos de
compresión:

Formatos MPEG

1.- MPEG-1: Comprime un vídeo digital para que pueda en un cd-rom. El

audio es comprimido en formato mp3. Es el formato más extendido en la
red y tiene una resolución limitada a 352 x 240.
Su calidad es similar al vídeo VHS y su velocidad de transmisión de datos es
de 1,3 Mbps.
2.- MPEG-2: Este estándar fue creado en 1992 y está dedicado a la
televisión digital. Ofrece una calidad de imagen muy alta. Su velocidad de
transmisión de datos oscila entre los 3 y los 10 Mbps. La resolución mayor
alcanzada es de 1920 x 1152. Puede tener hasta 5 canales de audio.
También es utilizado en los DVD de vídeo.

3.- MPEG-3: No llegó a buen término debido a su similitud con el MPEG-2.

4.- MPEG-4: Es utilizado para codificar los datos multimedia. Resulta muy
apropiado para los contenidos web. Ofrece muy buena calidad con una
compresión mucho mayor que otros formatos. Los Códecs más utilizados
con este formato son los DivX. Su resolución es de 176 x 144 pixels.

Existen otros formatos MPEG como el MPEG-7 o el MPEG-21 que aún están
en desarrollo y que configurarán nuevo estándar.

6.2.3. Software para vídeo digital

En la actualidad disponemos de muchas posibilidades a la hora de editar
vídeo digital, tanto en el ámbito de uso doméstico y profesional como
aplicaciones que se pueden descargar de forma gratuita. Los programas de
uso profesional suelen ser caros, y para nuestro propósito, los gratuitos
sirven igualmente, además tenemos muchas herramientas online que nos
permiten realizar conversiones de formatos e incluso con funciones básicas
de edición.

Programas de uso doméstico

 Windows Movie Maker:
Es una aplicación de Microsoft, que viene incluida en sus sistemas
operativos, actualmente se llama Windows Live Movie Maker y no
viene preinstalado, pero lo podemos descargar e instalar
gratuitamente.
Esta aplicación nos permite editar el vídeo digital y añadir incluso
transiciones y efectos de todo tipo. Es una herramienta de fácil uso e
incorpora una pista de audio aunque su edición es muy limitada.
  iMovie: Software para montar vídeo doméstico compatible sólo con
el sistema operativo de Apple.

Programas de uso profesional

 Adobe Premiere Pro: Adobe Premiere Pro es un software de edición

de video semiprofesional, que ofrece muchas funciones, entre ellas,
capturar, editar tanto la pista de vídeo como de audio y volcar a un
soporte físico.

 Final Cut: Es reconocido software profesional que requiere

conocimientos de video y edición, permite editar y reproducir la
mayoría de los formatos de vídeo. Final Cut destaca por la capacidad
de compresión a la hora de volcar el resultado final.

Imagen 20: Edición de video

Fuente: https://pixabay.com/es/cortar-edici%C3%B3n-tira-de-
pel%C3%ADcula-150066/
Conversores video online
En internet también podemos encontrar multitud de convertidores de
formatos gratuitos, a continuación, se muestran algunos de ellos.

 Online Convert:
Su URL es: http://www.online-convert.com/es
Online-convert nos permite convertir audio, video, imágenes,
documentos, etc., a diversos formatos.

Imagen 21: Online-convert

Fuente: Online-convert
Imagen 22: Online-convert formatos
Fuente: Online-convert

 Video.online-convert
Su URL es: http://video.online-convert.com/es
Igual que la web anterior también permite multitud de conversiones
de formatos.
Convierte tus archivos de vídeo a otros formatos con este rápido y
gratuito conversor online. Sólo tienes que subir tu fichero o indicar
una URL para codificar tu vídeo.
Imagen 22: Video Online-convert
Fuente: Video.online-convert.com

 Onlinevideoconverter
Su URL es: https://www.onlinevideoconverter.com/es
Con esta herramienta es muy fácil convertir a otro formato,
simplemente introduces el enlace del vídeo que quieres convertir o
eliges un archivo de tu dispositivo o almacenamiento en la nube,
después, escogemos el formato al que queremos convertir y
personalizamos la configuración, hacemos click en convertir y cuando
termine el proceso, en pocos segundos ya lo podemos descargar.
Imagen 23: Web online videoconverter
Fuente: https://www.onlinevideoconverter.com/es

Con estas herramientas online tan sólo debemos tener cuidado con los
enlaces que nos redirigen a veces a páginas de publicidad.

SABÍAS QUE…

 También podemos encontrar en internet

herramientas con las que editar video y guardarlo en
diferentes formatos, algunas de ellas son Vimeo,
Youtube, Magistro para Android, Wevideo, Loopster o
Shotclip entre otras.
7. Animaciones.
Cualquier animación que está pensada para ser utilizada en una página
web, ya que el formato que usan puede visualizarse directamente desde un
navegador web.
La animación para diseño web es un recurso que resalta la interactividad y
hace que el sitio web sea más atractivo, aun así, no debemos de abusar de
las animaciones y tenemos que tener en cuenta que no son para toda la
web.
Se suelen utilizar para publicidad, banners, detalles de diseño, efectos,
botones animados, etc.
Normalmente se implementan en los siguientes formatos:

 Flash (puede incluir programación en ActionScript).

 Shockwave.
 GIF animados u otros formatos gráficos animados.
También se pueden implementar mediante HTML dinámico (con JavaScript u
otros) o con Java (empleando Java Applets), y a través de formatos de
video como AVI, MPG, WMV, etc. Si bien, aunque no son formatos de
animaciones, cumplen funciones similares.

Existen dos tipos de animaciones:

 A gran escala. Son una herramienta de interacción primaria que
crea impacto en los usuarios, estas incluyen efectos como scroll
parallax y notificaciones emergentes.
 En pequeña escala. Incluye, por ejemplo, barras de carga y no
requieren ninguna intervención del usuario.

En función de las técnicas de animación se distinguen:

 Animación de carga. Son las animaciones que aparecen cuando
abrimos una página y que mantienen expectantes a los usuarios
 durante la carga, No deben contener sonido, si coincidir con la paleta
de colores de la web.
 Navegación y menús (nonscrolling). Son menús de navegación
ocultos que permiten ahorrar espacio en pantalla.
 Galerías y presentaciones de diapositivas. Es una manera de
poder mostrar varias imágenes sin sobrecargar a los usuarios. Se
suelen usar en webs de fotografía, presentaciones de productos y
carteras.
 Animación en movimiento. Permiten llamar la atención del
usuario. Con la jerarquía visual añaden interés al sitio.
 Desplazamiento. El scrolling se basa en la animación y ofrece un
mayor control al usuario, que es quien determina el ritmo del
movimiento sobre cómo se desarrolla la animación.
 Animaciones de fondo / vídeos. Un fondo animado simple puede
añadir visibilidad a un sitio, pero no debemos abusar, ya que a veces
resultan molestos.
 Animación a pasar el mouse. Es el “efecto mover” que da una
sensación más intuitiva a un sitio cuando se mueve el cursor por el
contenido.

En los siguientes enlaces podrás ver alguno de los

ejemplos de animación mencionados anteriormente.
https://www.awwwards.com/6-web-design-
trends-you-must-know-for-2015-2016.html
http://www.comunidademe.com/12-ejemplos-
increibles-de-paginas-web-con-animacion-y-flat-
design/163/
 7.2. Animación de imágenes y texto.

Si trabajamos sólo con HTML y queremos hacer una simple de animación

con HTML podemos hacer uso de Marquee.
<MARQUEE> es una etiqueta no estándar de HTML, pero que es soportada
por los navegadores más comunes, sirve para animar elementos dentro de
la página del contenido que pongamos dentro de la etiqueta, bien sea texto,
fotografías, o ambas cosas, y hacer que se desplacen horizontalmente por
la página.

Esta etiqueta no requiere ningún conocimiento de lenguajes de

programación.
Se plantean ciertos inconvenientes a la hora de usar esta etiqueta, por lo
que tenemos que usarla con cuidado.

Estos inconvenientes son, por una parte, no es una etiqueta estándar de

HTML, y además, puede plantear problemas de accesibilidad en personas
con alguna discapacidad en particular, por otro lado aunque animar
elementos favorece el dinamismo de la web, haciendo foco en determinados
mensajes de texto o imágenes, pero según se use pude marear y crear
confusión en el usuario.
Esta es la sintaxis de la etiqueta <marquee>:
<marquee>texto que se mueve</marquee>

Veamos otro ejemplo de uso, como son las tablas con movimiento:

<marquee>
<table align="center" width="120"border="2">
<tr>
<td>Esta tabla se mueve, con todo su contenido</td>
</tr>
</table>
</marquee>

7.2.3. Etiqueta Marquee

LA etiqueta marquee soporta una serie de atributos:
 WIDTH
Anchura de la marquesina.
 DIRECTION
Hacia donde queremos que se displace el contenido del marquee, izquierda
con el valor "LEFT" y derecha con "RIGHT".
 BEHAVIOR
Es el comportamiento de la marquesina:
o SCROLL (el comportamiento por defecto) indica que tiene que
hacer el desplazamiento siempre en una misma dirección.
o ALTERNATE, que indica que el desplazamiento se hace a un
lado y al otro de manera alternada.
 SCROLLDELAY
Es el tiempo en milisegundos que tiene que pasar entre cada cambio de la
posición de lo que hay desplazándose. A mayor valor, más milisegundos
tardará la marquesina en moverse. El valor por defecto es 85.
 SCROLLAMOUNT
Es la cantidad de pixeles que tienen que desplazarse el contenido de la
marquesina cada vez que se mueve. A mayor scrollamount la animación
será más rápida. El valor por defecto es 6.
 LOOP
El número de ciclos que va a moverse el texto o contenido de la
marquesina. El valor por defecto es INFINITE, pero si colocamos un valor
como 3, la marquesina sólo realizará tres movimientos y luego parará.
 BGCOLOR
El color de fondo de la marquesina.
 HSPACE y VSPACE
Estos dos atributos sirven para definir el espacio en pixeles que debe
aparecer entre la marquesina y otros contenidos de la página, en horizontal
y vertical.
Veamos la sintaxis con los atributos y valores correspondientes:
Algunos ejemplos de marquee:
<marquee width=100 direction=right>
Marquesina a la derecha y con ancho 100
</marquee>

<marquee behaviour=alternate scrolldelay=400 bgcolor="#ff6633">

texto en movimiento
</marquee>

Caso práctico
UN ejemplo completo que puedes probar:

<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Ejemplos con marquee</title>
</head>
<body>
<marquee>texto en movimiento</marquee>
<br>
<br>
<marquee>
<table align="center" width="200" border="1">
<tr>
 <td>Esta tabla se desplaza , con su contenido</td>
</tr>
</table>
</marquee>
<br><br>
Esto es un <marquee behaviour=alternate scrolldelay=400
bgcolor="#ff6633">texto en movimiento</marquee>
<br><br>
Hola
<marquee width=200 direction=right hspace=200>
Marquesina a la derecha y con ancho 200
</marquee>

</body>
</html

En el siguiente enlace verás cómo crear banners

animados con HTML5 y Canvas:
http://www.codigrafia.com/programacion/mostrar/15

7.2.4. jQuery
jQuery nos permite realizar animaciones en nuestros códigos sin necesidad
de recurrir a Flash, pero a día de hoy con CSS3 y HTML5 también podemos
crear grandes efectos.

Expondremos aquí algunos ejemplos:

 Stack & Grow
Es un efecto que permite que pasemos el puntero sobre de la imagen y
que esta se amplíe tanto a lo ancho como a lo alto.
img{
height: 200px;
width: 400px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}

img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}

 Escalado
Este efecto, también llamado ampliación permite eso mismo, ampliar
una imagen al realizar hover o foco sobre ella. Se usa sobre todo en
catálogos de tiendas virtuales o listas de productos.

img:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5)
}

 Bumb up o saltito.
En el ejemplo a continuación se modifica el margin-top de la imagen que
hace que quede destacada por encima de las demás.
img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}

img:hover {
margin-top: 2px;
}

 Fade in and reflect

Permite añadir a las imágenes un reflejo.
img {
margin: 25px;
opacity: 0.8;
border: 10px solid #eee;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left
bottom, from(transparent), color-stop(.7, transparent),
to(rgba(0,0,0,0.1)));
}
img:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left
bottom, from(transparent), color-stop(.7, transparent),
to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
 box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
 Crooked photo
Este efecto permite rotar la imagen.
img {
margin: 20px;
border: 5px solid #eee;
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

img:hover {
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
}

7.3. Integración de audio y video en una animación.

Ya hemos visto formas de integrar audio y video en nuestra web, así como
de integrar animaciones.
Una alternativa es utilizar las herramientas de edición de audio y video y
después animarlas con los diferentes métodos vistos anteriormente.

En el siguiente enlace encontrarás guías de la W3C, en este

caso de tecnologías multimedia
http://www.w3c.es/Divulgacion/GuiasBreves/TecnologiasMu
ltimedia
 En el siguiente enlace podrás descargar un pdf de la UNED
sobre Integración de medios con herramientas de autoría
Web.
https://ocw.innova.uned.es/mm2/tm/contenidos/pdf/tema6
/tmm_tema6_integracion_medios_digitales.pdf

SABÍAS QUE…

Con A5 HTML5 Animator se pueden crear sorprendentes

animaciones sin Flash. al terminar la animación y
exportarla, el resultado es un código HTML5 totalmente
listo para subir a la web.

8. Aplicación de guías de estilo.

Una guía de estilo es algo parecido a un manual donde se encuentran todas
las indicaciones y reglas que debemos seguir en la creación de nuestra web,
de esta forma no importa quien desarrolle el proyecto, ya que, siguiendo
esta guía, sabrá que colores debe usar, logos, videos, imágenes, sonidos,
medidas, tipos de letras, etc.
Ya hemos tratado este punto en temas anteriores por lo que sabemos cuál
es su importancia.
En relación a las imágenes una guía de estilo nos indica tamaños y
proporciones de imágenes usados en la web y cómo se disponen dentro de
nuestro diseño. Además, también nos indicará los efectos o variaciones que
puedan tener según sus aplicaciones, especificando si se trata uso en el
footer, de una galería, foto destacada, u otros.
 RECUERDA...
Es muy importante crear primero la guía de estilo, antes
de comenzar a crear el código de la web.

Resumen Final
En este tema hemos podido comprobar la importancia que tienen los
derechos de autor.

Existe mucho material multimedia en internet, que en muchos casos es

gratuito, en otros casos, tenemos que tener en cuenta, que no podemos
usar este material al libre albedrio debido a los derechos de autor y de la
propiedad intelectual.

La propiedad intelectual hace referencia a los productos, obras o procesos

que han sido creados por alguien y que le proporcionan una ventaja
competitiva.

La propiedad intelectual se puede proteger por medio de los derechos de

propiedad intelectual (DPI) fijados por la Organización Mundial de la
Propiedad Intelectual (OMPI).

Por otra parte, la legislación española ofrece una serie de mecanismos de

protección de los derechos de propiedad intelectual, existiendo la posibilidad
de acudir a acciones administrativas, acciones civiles y acciones penales.
Una licencia de software es la autorización que un autor, quien tiene el
derecho intelectual de su obra, concede a otros el poder usarla, en este
caso, para usar un programa, por ejemplo.

El derecho de autor se puede definir como un conjunto de derechos de una

persona natural sobre su obra de naturaleza literaria, artística o científica,
las personas jurídicas también pueden ser titulares de los derechos.

Uno de los mayores problemas a los que nos enfrentamos a la hora de crear
una web o publicar un post en un blog, es elegir las imágenes que van a
acompañar al texto. Tendemos a buscar en Google, y poner lo primero que
nos parezca bien, pero esto puede resultar peligroso ya que las imágenes,
tienen derechos de autor.

Las imágenes son muy importantes en una página web, ya que la hacen
más agradable y atractiva de cara al visitante.
Una de las principales decisiones que debemos tomar a la hora de incluir
imágenes en nuestra web pasa por elegir el formato correcto de manera
que logremos una buena relación entre la calidad visual de la imagen y su
peso en Kb, ya que esto supone que la página, y más en concreto la imagen
cargue más rápido y nuestro visitante no se canse de esperar a que esta se
muestre, hay que tener en cuenta que si la demora es larga, el visitante se
aburrirá y generalmente abandonará la web.

Las imágenes de mapa de bits o imágenes raster son imágenes formadas

por un conjunto de puntos (píxeles) en una matriz. Cada uno de estos
puntos tiene un valor que describe su color. También se las conoce como
imágenes pixeladas o bmp.

Las imágenes vectoriales son representaciones de entidades geométricas

como pueden ser círculos, rectángulos polígonos o segmentos. Se
representan por fórmulas matemáticas.
Como ya hemos visto, existen buenas herramientas para la edición de
imágenes entre ellas, Photoshop, el CorelDraw, el Fireworks, etc.
Estas herramientas nos permitirán realizar el tratamiento y optimización de
imágenes de todo tipo. De forma que una vez creada la imagen, las
pasamos por estos programas y podremos comprimir más, haciéndolas
rápidas de transferir y, por tanto, mejores para Internet.
En una página web podemos incorporar diferentes tipos de contenidos
multimedia.

Podemos introducir diferentes formatos de audio en una web, aunque de

todos los formatos de audio que existen, no todos son soportados o
adecuados para los navegadores.
UN archivo de audio se guarda con una extensión propia, que define varias
características del archivo, como por ejemplo las relativas a su tipo de
compresión y calidad del archivo. Algunas extensiones de audio son: .mid,
.wav, .ogg, .mp3, .wma, etc.

La razón principal de usar video en nuestra web, es porque impacta y

mantiene la atención del usuario, además nos permite transmitir y resumir
el propósito de tu web en un solo vistazo. Es un elemento con gran poder
estético y que hace que nuestra web sea elegante, bonita y atractiva,
además, es un lugar donde poder contar y mostrar historias, transmitiendo
sensaciones y sentimientos que son más poderosos que una imagen
estática.

La digitalización de vídeo analógico ocupa mucho espacio por lo que se

requiere comprimirlo, para que no ocupe tanto espacio de almacenamiento.
Los vídeos digitales comprimidos con el sistema intra-frame son de mayor
más calidad que los por el método inter-frame. Calidad implica archivos de
mucho tamaño.

Cualquier animación que está pensada para ser utilizada en una página
web, ya que el formato que usan puede visualizarse directamente desde un
navegador web.
La animación para diseño web es un recurso que resalta la interactividad y
hace que el sitio web sea más atractivo, aun así, no debemos de abusar de
las animaciones y tenemos que tener en cuenta que no son para toda la
web.

Glosario
 AIFF: Audio interchange file format, es parecido al formato WAV pero
para Apple.
 ALT: atributo de etiquetas para comentar las imágenes.
 AVI (Audio Video Interleave). Es uno de los formatos más usados
con compresión intra-frame, desarrollado por Microsoft para
Windows.
 Bitrate o velocidad de transmisión: Define el espacio físico en bits
que ocupa un segundo de audio.
 BMP: bitmap o mapa de bits ha sido un formato muy usado ya que
se desarrolló para aplicaciones Windows.
 BSD: distribuciones de software de Berkeley Software Distribution.
 CBR/VBR: CBR o constant bitrate rate y VBR o variable bitrate rate,
CBR indica que el audio se codifico con un bitrate constante, a
diferencia de VBR que lo hace variando entre un rango máximo y
mínimo en base a la tasa de transferencia.
 CDA: Son las pistas que se graban en un CD que usan el sistema
PCM.
 CMYK: Cada color se forma por combinación de cuatro canales, que
son: Cyan, Magenta, Amarillo y Negro (Cyan, magent, yellow, black).
 Códec: Codificación/decodificación. Un códec es un algoritmo que
permite la reducción del nº de bytes que ocupa el archivo.
 Compresión Inter-frame: o compresión temporal, sus resultados
son archivos de menor tamaño ya que desecha más información.
 Compresión Intra-frame: o compresión espacial, que comprime
cada frame individualmente sin tener en cuenta las imágenes que le
rodean.
 Copyleft: sin derecho de copia o sin derecho de autor, en referencia
a los derechos de autor.
 Copyright: Se utiliza para designar solamente los derechos de
explotación de una obra, pero no los derechos morales.
 Creative Commons: Es un tipo de licencia creada particularmente
para internet, siendo compatible con los derechos de autor, pero
ofreciendo algunos derechos a terceras personas, que pueden variar
según las condiciones concretas de cada obra.
 Decibelio: Es una unidad de medida que se aplica a cosas muy
diferentes, y entre ellas a la intensidad de un sonido.
 Demo: Versión de demostración, liberada por el autor, que no tiene
todas las funciones que tiene el original. Se distribuye de forma
gratuita, y no tiene plazo de validez.
 DivX: MPEG-4: Es utilizado para codificar los datos multimedia.
Resulta muy apropiado para los contenidos web. Ofrece muy buena
calidad con una compresión mucho mayor que otros formatos.
 DPI: derechos de propiedad intelectual.
 DV (Digital Video). Es un formato estándar de compresión
desarrollado por empresas como Panasonic, Sony o JVC. Tiene una
resolución de 720 x 480 en NTSC y 720 x 576 en PAL.
 Frames por segundo o fps: imágenes por segundo.
 Frecuencia: ciclos por segundo, se mide en hertzios.
 GIF: Graphics Interchange Format o formato de Intercambio Gráfico
 GNU GPL: GNU General Public License GPL
 HSB: Valores de tono, saturación y brillo.
 Imagen vectorial: Las imágenes vectoriales son representaciones
de entidades geométricas como pueden ser círculos, rectángulos
polígonos o segmentos. Se representan por fórmulas matemáticas.
 JPG: JPG-JPEG o Joint Photographic Experts Group, en español,
Grupo de Expertos Fotográficos Unidos
 LPI: ley de protección intelectual.
 Mapa de bits: Las imágenes de mapa de bits o imágenes raster son
imágenes formadas por un conjunto de puntos (píxeles) en una
matriz.
 MID: Este es el formato de interfaz digital para instrumentos
musicales, en inglés Musical Instrument digital Interface, que en sí
mismo no resulta de un proceso de digitalización de un sonido
analógico.
 Modos de color: sistema de coordenadas que permite describir el
color de cada píxel usando valores numéricos.
 MP3: El formato MP3 (Mpeg 1 Layer 3) es un formato que tiene un
alto grado de compresión, pero a su vez conserva una buena calidad.

 MPEG: El formato de compresión de vídeo digital más extendido es el

MPEG, desarrollado por el Moving Picture Experts Group (Grupo de
Expertos en Imágenes en Movimiento) para producir patrones
estándar de compresión de vídeo y audio.
 NTSC: Sistema de video. El sistema NTSC (National Televisión
System Commitee) transmite 30 imágenes por segundo.
 OGG (Vorbis): Es un códec libre para la compresión de audio.
 OMPI: Organización Mundial de la Propiedad Intelectual
 PAL: Sistema de video. (Phase Alternating Line). Su tasa de refresco
es de 25 imágenes por segundo.
 PCM: No es en sí un formato, sino más bien una técnica de convertir
audio analógico en digital sin compresión.
 Píxel: El píxel es la unidad mínima de visualización de una imagen
digital. Si hacemos zoom sobre una imagen observamos que está
formada por puntos o píxeles, en una especie de cuadrícula.
 PNG: Portable Network Graphic o Gráfico portable para la red.
 Profundidad de color: La profundidad de color hace referencia al
número de bits necesarios para poder codificar y guardar la
información de color de cada píxel en una imagen.
 Resolución de imagen: Es el grado de detalle o calidad de una
imagen digital que se expresa en ppp (píxeles por pulgada) también
llamados dpi (dots per inch) por sus siglas del inglés. A mayor
número de pixeles en una imagen por pulgada lineal, mayor calidad
tendrá.
 Resolución o bit resolution: La resolución hace referencia al
número de bits usados para almacenar cada muestra de la señal
analógica.
 RGB: Cada color se forma por combinación de tres canales de color,
rojo, verde y azul (RGB).
 SECAM:significa Séquentiel Couleur à Mémoire. Es la norma para la
codificación desarrollada y usada en Francia y otros países como la
Unión Soviética.
 Shareware: es el software con permiso para su redistribución, pero
su uso implica el pago.

 Tasa de muestreo o simple rate: Cuando se convierte audio

analógico a digital, se obtiene una secuencia de ceros y unos de la
señal analógica muestreada, la tasa de muestreo, define cada cuanto
tiempo se van a coger muestras del sonido original o analógico para
convertirlo en digital.
 TIF-TIFF: Tagged Image File Format o Formato de Archivo de
Imagen Etiquetada.
 Trial: Es una versión de un programa de pago, que se distribuye de
forma gratuita con todas sus funciones activas, pero sólo por un
tiempo, generalmente 30 días de uso ilimitado, después deja de
funcionar.
 WAV: WaveForm audio file, es un tipo de archivo que originalmente
fue desarrollado por Microsoft. Estos archivos tienen extensión “.wav”
 WMA: Este es el formato de Microsoft creado para reproducirse en
Windows Media Player.
 Bibliografía y Webgrafía

Bibliografía.
Diseño de interfaces web, Córcoles, Montero, 2012 Ed. RA-MA.
El Gran Libro De Html5 Css3 Y Javascript (2ª Ed) - Gauchat Juan Diego

Webgrafía.
 http://europa.eu/youreurope/business/start-grow/intellectual-
property-rights/index_es.htm
 http://www.clarkemodet.com/es/faqs/derechos-autor/que-
protege.html
 https://www.ida.cl/blog/diseno/guia-de-estilo-diseno-web/
 http://www.xn--guiadiseo-s6a.com/08_cont_animaciones.php
 https://www.interactius.com/es/general-es/12-efectos-css-en-una-
imagen-con-el-evento-hover/
 http://www.ite.educacion.es/formacion/materiales/107/cd/video/pdf/
video06.pdf
 https://www.campusmvp.es/recursos/post/como-insertar-audio-en-
html5.aspx
 https://www.xatakahome.com/reproductores/conoce-mejor-los-
formatos-de-audio-digital-con-y-sin-perdida-de-calidad-con-esta-
infografia
 http://quiwiq.com/diseno-web/programas-utiles-para-optimizar-
imagenes-para-web/2480
 http://www.w3c.es/Divulgacion/GuiasBreves/TecnologiasMultimedia
 http://librosweb.es/tutorial/el-nuevo-elemento-de-html5-para-crear-
imagenes-responsive/
 http://www.eoi.es/wiki/index.php/Los_Derechos_de_Propiedad_Intel
ectual_e_Industrial_(DPI)_en_general_en_Propiedad_industrial

 https://www.ugr.es/~derechosdeautor/derechos_autor.html
 https://www.boe.es/buscar/act.php?id=BOE-A-1996-8930
 http://www.clarkemodet.com/es/faqs/derechos-autor/que-
protege.html
 http://www.wipo.int/about-ip/es/
 http://www.mecd.gob.es/cultura-mecd/areas-
cultura/propiedadintelectual/la-propiedad-intelectual/mecanismos-de-
proteccion.html