Multimedia en la Web

WVO

Multimedia
UNIDAD 02: Formato Multimedia de Aplicación en el WWW

MSc. Wellington Villota O.
wvillota espol.edu.ec

¿Qué es Internet ?
Prof. Wellington Villota - wvillota@espol.edu.ec

Es una "red de redes", que no
sólo interconecta computadoras,
sino también redes de
computadoras entre sí..

¿ Qué es Internet ?

3 4 5

La mayor red de redes en el
mundo
Sus nodos se interconectan a través de
todos los medios físicos y de enlace de
datos.
Se basa en la arquitectura TCP/IP

Dr. Vinton Cerf,
Co-Creador de TCP/IP (Transmission Control Protocol/Internet Protocol)

Internet

Se basa en el

Modelo Cliente-Servidor

Servidor Cliente

computador que contiene computador que busca la
información que puede ser información contenida en
consultada por cualquier los servidores
usuario

Internet – ¿Cómo funciona ?

Solicitud

Cliente Respuesta Servidor

• El cliente solicita archivos de los servidores
• Los archivos viajan por la internet
• Los archivos contienen links (vínculos) a otros archivos.

Evolución de los usuarios en Internet - Ecuador

Fuente: SUPERTEL. Junio 2012

Proveedores de internet en Ecuador

Fuente: SUPERTEL. Junio 2012

Familia de protocolos de Internet

1 Protocolo de Control de Transmisión (TCP) y Protocolo de Internet (IP)

2 HTTP (HyperText Transfer Protocol)

Protocolos 3 FTP (File Transfer Protocol)

4 SMTP (Simple Mail Transfer Protocol)

5 POP (Post Office Protocol)

Servicios del Internet

WWW

FTP (File Transfer Protocol)

eMail.

Mailing Lists ( Mail Bomber)

IRC (Internet Relay Chat)

VoIP

Streaming

¿Qué es la web?

 La World Wide Web (Red de Alcance Mundial) es una
colección de documentos electrónicos que están
vinculados entre sí.

¿Qué son las páginas de Internet?

 Una página de Internet o página Web es un documento
electrónico que contiene información específica de un
tema en particular y que es almacenado en algún
sistema de cómputo que se encuentre conectado a la
red mundial de información.

Página …… n

Página 1

Web Server

¿Cómo funciona la Web? 1/2

 Las páginas Web están almacenadas en
servidores web situados por todo el mundo.

 HTML es el lenguaje que hace posible presentar
información (por ejemplo, información financiera de
alguna entidad) en Internet. Lo que se ve al
visualizar una página en Internet es la
interpretación que hace el navegador del código
HTML.

¿Cómo funciona la Web? 2/2

 Las páginas Web pueden contener texto, gráficos,
vídeo, animaciones, y sonido, así como elementos
interactivos, como formularios de entrada de datos.

Dominios de Internet genéricos

.aero para la Industria del transporte aéreo
.biz para los Negocios
.com para fines comerciales
.coop para Cooperativas
.info para Información
.museum para los Museos
.name para Nombres de personas
.jobs, para Departamentos de empleo y recursos humanos en empresas
.net, para Infraestructura de red
.org, para Organizaciones
.pro, para Profesionales
.gov, para Gobiernos y Entidades Públicas (en inglés)
.edu, para Educación
.int, para Internacional, organizaciones como la ONU
.travel, para páginas de la industria de viaje

Dominios por distribución geográfica

.ar (Argentina)
.br (Brasil)
.bo (Bolivia)
.cl (Chile)
.co (Colombia)
.cr (Costa Rica)
.cu (Cuba)
.es (España)
.it (Italia)
.ni (Nicaragua)
.pe (Perú)
.ve (Venezuela)
.mx (México)
.py (Paraguay)
.uy (Uruguay)

URL: Universal Resource Locator

Es una dirección universal de recursos en el universo de información
disponible en Internet

Cualquier información a la que un cliente Web
accede es conocida por su URL.

Definen a través de un sencillo formato, la
ubicación en la red de la información deseada.

Algunos ejemplos de URL’s

EJEMPLOS:
http://www.aprendamos.net
http://www.lsi.espol.edu.ec
http://gobierno.gov.ve/boletines/
http://cne.gob.ve/inscritos/default.html
http://www.unefa.edu.ve/cgi-bin/apunta.exe?
luis+romero
http://midget.towson.edu:8000/home.html
ftp://ftp.ula.ve/software/
ftp://ftp.ula.ve/indice.txt

Hipermedia

 El contenido no lineal le ofrece al usuario la
interactividad necesaria para controlar el progreso de
la presentación tal como ocurre en los videojuegos o
en el e-learning. Cuando el contenido se presenta en
una forma no lineal hablamos de hipermedia.

 Hipermedia - Concepto: llamamos al conjunto de
métodos o procedimientos para escribir, diseñar, o
componer contenidos que tengan texto, video, audio
u otros medios, y que además tenga la posibilidad de
interactuar con los usuarios.

Sitios Web

 Se componen de una o más páginas web
referidas a un asunto común, como a una
persona, un negocio, una organización o a un tema.

 La primera página se llama la página de inicio o
página principal, y hace las funciones de un índice,
indicando el contenido y panorama general del sitio.

Sitios Web

 En la página de inicio puede hacer clic en los
hipervínculos para acceder a otras páginas web y
éstos a su vez regresen a la página principal.

Inicio.htm – pagina principal.htm – default.htm

¿Qué es un navegador web?

Es el software que

Gestiona los procesos necesarios para descargar los archivos que
permiten visualizar una pagina web alojada en un servidor

Se le conoce también como

Navegador Web, Browser o Cliente Web

Al hecho de consultar páginas
web se le suele llamar navegar
por Internet

Navegadores Web

INTERNET EXPLORER

http://www.microsoft.com/spain/windows/ie

NAVEGADORES WEB MOZILLA
… de mayor uso http://www.mozilla.org/

OPERA
http://www.opera.com/

Test ACID 3

• Es un sitio hecho por WaSP que pone a prueba los navegadores con los
estándares web, especialmente los de DOM y ECMAScript.

• http://acid3.acidtests.org/

• La prueba consiste de 100 sub-pruebas divididas en seis grupos,
llamados "buckets“.

Test ACID 3

• Cubos:

Bucket 1: DOM Traversal,
Bucket 2: DOM2 Events
Bucket 3: DOM2 Views, DOM2 Style, Selectores de CSS3.
Bucket 4: Comportamiento de tablas HTML y formularios cuando son manipulados
por scripts y DOM2 HTML
Bucket 5: Pruebas de la competición Acid3, (SVG, HTML, SMIL, Unicode...)
Bucket 6: ECMAScript.

• Ejemplo :
http://daikyouju.wordpress.com/tag/pruebas-acid-3-navegadores/

Multimedia en la Web

 En Internet podemos encontrar algunos elementos
multimedia embebidos en las páginas Web y en
algunos formatos.

 El contenido de la página con multimedia puede
descargarse o transmitirse en flujo usando streaming.

 Streaming - Concepto: Se refiere a ver u oír un
archivo directamente en una página web mientras se
va recibiendo, sin necesidad de descargarlo antes a la
computadora.

DEBER

 Investigar 5 Sitios Web que incluyan streaming.
 Capturar la pantalla principal del sitio web.

 Investigar acerca de MMS
 Máximo 2 carillas, Letra 11pts, espacio 1.5 pts.

Nota: Trabajo será calificado. El trabajo es individual. Traerlo
impreso.

Diseño y estandarización de Web

Tendencias Gráficas y su diagramación

 Una página web o un blog es parte importante de la
imagen de un individuo, empresa o institución, es una
de sus partes visibles. De su apariencia y estilo
depende la imagen que proyecta, así los visitantes
tienen una idea o concepto sobre la organización o el
personaje a quien pertenece el sitio. Y ofrecen un
servicio 24/7.

Tendencias gráficas

8 REGLAS DE ORO

1.- Contenido:

 La página no debe ser atractiva solamente en su parte
visual, debe tener un contenido interesante que
atraiga lectores. Ninguna página puede considerarse
exitosa si no cuenta con un contenido apropiado y
actualizado frecuentemente. El contenido da la
posibilidad real de aumentar el número de visitas y
hacer que los viejos visitantes consulten la pagina a
menudo (porque encuentran siempre algo nuevo).

8 REGLAS DE ORO

2.- Imágenes:

 Deben usarse buenas fotografías, preferiblemente
tomadas por un profesional. Es importante presentar
imágenes que no estén pixeladas, con baja resolución
o desenfocadas, esto da una idea sobre la calidad
misma del sitio. También se pueden utilizar
ilustraciones sencillas (imágenes vectoriales).

8 REGLAS DE ORO

3.- Tipografía:

 Es importante utilizar fuentes llamativas pero que
conserven una fácil legibilidad. La tipografía debe
llamar la atención del usuario pero debe conservar la
línea de diseño del sitio. También es importante variar
el tamaño de una misma fuente para resaltar
secciones interesantes del texto.

8 REGLAS DE ORO

4.- Botones e iconos:

 Utilizar botones prácticos y representativos, así
como iconos grandes y vistosos aumenta la
facilidad de navegación en la página y se dan una
guía clara a los usuarios, no es necesario colocar
accesorios que no van a brindar un valor real, por
ejemplo un reloj para clientes que se encuentran en
el mismo uso horario.

8 REGLAS DE ORO

5.- Animaciones y movimiento:

 Para generar una sensación de dinamismo, es bueno
utilizar elementos animados. Pero es importante no
excederse con los elementos móviles, la cuota del
20% o 30% del total de la página es suficiente, porque
pueden causar saturación, distraer la atención de las
cosas importantes que se quieren decir y por último
sacar al usuario del sitio.

8 REGLAS DE ORO

6.- Fondos claros y sencillos:

 Los fondos claros o totalmente blancos facilitan la
visualización, también dan un aspecto despejado a la
página resaltando las imágenes, existe la tendencia a
utilizar fondos negros para lecturas largas, para no
cansar al lector con la luz del monitor.

8 REGLAS DE ORO

7.- Enlaces a redes:

 Es de gran ayuda para los usuarios incluir enlaces a
redes sociales con las cuales se tiene familiaridad
y se interactúa con regularidad, también a sitios de
interés. Esto con el fin de generar comunidad y crear
lazos de mutuo intercambio con sitios que pueden
apalancar la oferta, como proveedores y clientes
actuales.

8 REGLAS DE ORO

8.- Sobriedad:

 Una página debe permitir una fácil visualización de
los contenidos (videos, imágenes, textos), saturar al
cibernauta es contraproducente, si la información o
contenido tarda en ser cargado es una visita menos y
un potencial cliente o negocio que no conoció la oferta
que se propone.

Modos de color

 El modo de color expresa la cantidad máxima de
datos de color que se pueden almacenar en un
determinado formato de archivo gráfico.

 Podemos considerar el modo de color como el
contenedor en que colocamos la información sobre
cada píxel de una imagen.

Modos de color

 Modo Escala de Grises
 Modo Color CMYK
 Modo Color RGB

Modos de color

Modo Color RGB

 Trabaja con tres canales, ofreciendo una imagen
tricromática compuesta por los colores primarios de la
luz, Rojo(R), Verde(G) y Azul(B), construida con 8
bits/pixel por canal (24 bits en total).
 Las imágenes de color RGB se obtienen asignando un
valor de intensidad a cada píxel, desde 0 (negro puro) a
255 (blanco puro) para cada uno de los componentes
RGB.
 Es el modo más versátil, porque es el único que admite
todas las opciones y los filtros que proporcionan las
aplicaciones gráficas.

Tipografía para web

• Es posible afirmar que todos los tipos cuyo diseño es
igual o similar a los tipos clásicos latinos (romanos) son
los que ofrecen la mejor legibilidad.
• Hasta el momento el tipo que ofrece la máxima legibilidad
en documentos impresos es la Times New Roman
diseñado por Stanley Morison en 1932 para ser usado
especialmente para el periódico londinense The Times.
• Sin embargo para la red hay quienes consideran que una
de las mejores fuentes es la Verdana o Arial, porque no
cuenta con serifas que se distorsionen, por lo cual es una
de las legibles incluso a tamaños ínfimos en los monitores.

Formatos de video, imagen, sonido

Audio
Un archivo de audio digital es un sonido o secuencia
de sonidos que ha sido convertido a un formato
numérico para poder ser almacenado en un
computador.

 RA (Real Audio)
 AIFF
 WAV (Waveform)
 MP3
 MIDI


Imagen
La unidad mínima de una imagen digital es un pixel,
que es un pequeño punto; la menor unidad de
medida de una pantalla. Mientras más puntos
tenga una imagen, mayor será su detalle. La
resolución de pantalla mide el número de pixeles a
lo ancho y alto de la pantalla. Mientras más pixeles,
mejor calidad.

 JPEG (Joint Photographic Experts Group).
 GIF (Graphic Interchange Format).
 Bmp (bitmaps).
 Png.


Video
Un archivo de video es una mezcla de las dos
anteriores en un sólo archivo digital.

 MPEG (Moving Pictures Expert Group)
 QT (Quick Time) - MOV
 AVI
 WMV
 SWF
 FLV (Flash Video).

Web 2.0

Se ponen a disposición
Interactividad entre la del usuario una serie
web y el usuario de herramientas para
que él pueda
interactuar, como por
ejemplo, escribir
comentarios, opiniones,
enviar noticias, fotos,
videos, cms,etc.

Web 2.0

45

La Web de los usuarios

• La revista Time ha elegido
como Persona del Año 2006
1 al usuario de Internet,
porque han sido los usuarios
los protagonistas del
• Un espacio de cambio.
interacción entre lo
social y lo
tecnológico,
donde las nuevas
• Un cambio que ha
herramientas y
transformado la web de
aplicaciones
3 los datos en la web de
proporcionan 2
las personas.
servicios a los
usuarios.

Y esos servicios generan contenido, información y
comunicación.

La Web como plataforma

Los
usuarios

Los
Web 2.0 servicios

La Web 2.0 se constituye
en el escenario en el que Los medios y Un terreno en el que estas relaciones tejen
convergen : las redes sociales en las que la clave es la
herramientas participación, la posibilidad de conversar e
interactuar.

Evolución en la WEB

Ver video

Computación en la Nube

• Es un término que se define
como una tecnología que ofrece
servicios a través de la plataforma
de Internet.
• Los usuarios de este servicio
tienen acceso de forma gratuita o
de pago todo depende del servicio
que se necesite usar

Computación en la Nube

••Un ejemplo sencillo de computación en nube es el sistema de
Un ejemplo sencillo de computación en nube es el sistema de
documentos yyaplicaciones electrónicas Google Docs / /Google Apps.
documentos aplicaciones electrónicas Google Docs Google Apps.

••Para su uso no es necesario instalar software o disponer de un
Para su uso no es necesario instalar software o disponer de un
servidor, basta con una conexión a Internet para poder utilizar
servidor, basta con una conexión a Internet para poder utilizar
cualquiera de sus servicios.
cualquiera de sus servicios.

Google Docs en Educación

- Incluye un procesador de textos,
Suite de productos de ofimática
una hoja de cálculo y un
basada en Web que permite aplicación de presentaciones
crear documentos en línea de orientado a encuestas, entre
forma colaborativa. otras funciones.
- Ofrece una herramienta para
Tipos de archivo que soporta:
copiar y pegar: el
Documentos de texto (hasta 500 portapapeles web.
Kb): HTML, TXT, DOC, DOCX,
RTF, ODT o SXW.
Presentaciones (máximo 10 Mb o
200 diapositivas): PPT o PPS.
Archivos PDF (máximo 10 Mb).
Hojas de cálculo (máximo 1 Mb):
XLS, XLSX, CSV, ODS, TXT, TSV
o TSB.
Archivos de vídeo (máximo 40
Mb): .FLV, .DIVX, .AVI.


Accesibilidad
Se puede acceder desde Los documentos se pueden
cualquier navegador. navegar, ver y editar desde
dispositivos móviles.

Otras prestaciones

- No solo permite crear y editar - Compatible con otras
documentos en línea en tiempo real y herramientas como Youtube.
de forma colaborativa, sino también - Ofrece diferentes plantillas.
evaluar el desempeño del equipo: - Se puede compartir con
genera bitácora de edición. usuarios que no tengan cuenta
- Herramienta de chat. de google.

Google Docs

Ver video
Te ayuda a crear y compartir documentos en línea, totalmente gratis

Google Docs

Importante:

Para utilizar los servicios de
Google Docs debe tener creada o
crear una cuenta de correo en
Gmail

Google Docs

 Demostración
Uso de Google Docs

Buenas prácticas educativas con Google Docs

Aprender a colaborar

Aprender los instrumentos
Aprender a diseñar
Aprender a ser-estar
colaborativamente

Google Docs

Aprender a aprender y Aprender a crear a
Aprender a hacer partir de dichas
colaboraciones

Aprender a reflexionar a través de
los desempeños propios y ajenos

Otros Servicios en la Nube

Cloud Computing

SkyDrive
Compartir documentos, videos, etc

http://latam.msn.com/

Google Docs

 Laboratorios
Trabajar con los servicios de Google Docs o Office 365
y realizar los siguientes ejercicios:

• Ejercicio 2: Formatos.
• Ejercicio 3: Índice de Imágenes.
• Ejercicio 5: Página personal.
• Ejercicio 6: Diapositivas.
• Ejercicio 7: Trabajo con celdas.
• Ejercicio 8: Factura de muebles.
• Ejercicio 13: Vendedores.

• El trabajo será calificado.
• N° de integrantes: 1 .
• Tiempo: 2 horas.

Gracias
MSc. Wellington Villota O.
wvillota espol.edu.ec

Multimedia en la Web

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Multimedia en la Web

Similar to Multimedia en la Web (20)

More from Ph.D Wellington Villota - Investigador

More from Ph.D Wellington Villota - Investigador (18)

Recently uploaded

Recently uploaded (20)

Multimedia en la Web