Producción Hipermedia

(1)

CONCEPTOS BÁSICOS

Carlos H. Cerón Meza

Producción

Hipermedia

(2)

HIPERTEXTO

 El hipertexto es una tecnología que organiza una base de información en bloques distintos de contenidos, conectados a través de una serie de enlaces cuya activación o selección provoca la recuperación de información

A diferencia de los libros impresos, en los cuales la lectura se realiza en forma secuencial desde el principio hasta el final, en un ambiente hipermedial la "lectura" puede realizarse en forma no lineal, y los usuarios no están obligados a seguir una

(3)

HIPERTEXTO - Hipervínculos

 Los hipervínculos son los enlaces de hipertexto que se

construyen a partir de una palabra, frase o imagen para ir de una a otra unidad de información.

 TIPOS DE HIPERVÍNCULOS:

– Enlace para ir a otra página del sitio

– Enlace para ir a otro sitio o a la página de otro sitio

– Enlace a parte del mismo documento

(4)

(5)

MULTIMEDIA

 Multimedia = varios medios

 _{Cuáles medios?} – Videos – Imágenes – Audio – Texto – Animaciones

(6)

MULTIMEDIA

Capacidad de poder presentar gráficos, texto, videos, animaciones y sonido de manera

integrada en un mismo entorno de trabajo, mejorando notablemente la atención y

(7)

HIPERMEDIA

HIPERTEXTO+MULTIMEDIA = HIPERMEDIA

 Concepto HIPERMEDIA surge de la fusión entre hipertexto y multimedia

 Los sistemas de Hipermedia se pueden entender como «Organización de información textual, visual, gráfica y sonora a través de vínculos que crean asociaciones entre información relacionada dentro del sistema

(8)

(9)

HTML

 HyperText Markup Language = Lenguaje de marcado de hipertexto

 Se puede crear utilizando cualquier programa de edición de textos como notepad, block de notas,

dreamweaver, etc. El archivo se guarda con extensión .htm o .html

 Un archivo .html creado con dreamweaver se puede abrir con otro programa

(10)

HTML

 Este lenguaje se escribe mediante etiquetas, que aparecen especificadas por corchetes angulares (< y >).

 Por otra parte, el HTML permite

incluir scripts (por ejemplo, de Javascript),

códigos que pueden modificar el comportamiento de los navegadores web y de otros procesadores de HTML

(11)

CSS

 Cascading Style Sheets – Hojas de estilo en

cascada

 Describe como se va a mostrar un documento en pantalla

 Tipos de estilos:

– Hoja de estilo externa

– Hoja de estilo interna

(12)

…CSS

 Modelo anterior

PAG 1 PAG 2 PAG 3 PAG 4 PAG 5

Si el cliente quiere cambiar el fondo y tipo de letra a todo el sitio web entonces hay que

(13)

…CSS

 Con CSS

PAG 1 PAG 2 PAG 3 PAG 4 PAG 5

Se cambia en el CSS según solicite el cliente y el cambio se aplica para todas las páginas que vinculan el archivo CSS

(14)

USABILIDAD

 Es definida como el rango en el cual un producto puede ser usado por un grupo de usuarios

específicos para alcanzar ciertas metas definidas con efectividad, eficiencia y satisfacción en un

contexto de uso especificado3. La usabilidad es la percepción de qué tan consistente, organizada, eficiente, productiva, fácil de usar e intuitivo es el proceso de completar una tarea en particular

(15)

ACCESIBILIDAD

 El concepto se utiliza para nombrar al grado en el que todas las personas, más allá de sus capacidades físicas o técnicas, pueden utilizar un cierto objeto o acceder a un servicio.

(16)

…ACCESIBILIDAD

 Las rampas para discapacitados, las sillas de ruedas, el alfabeto Braille y las señales auditivas son algunas de las ayudas

técnicas.

 La accesibilidad supone un derecho que otorga a una persona la real posibilidad de ingresar, transitar y permanecer en un lugar, de forma segura, autónoma y confortable.

(17)

HOSTING

 Espacio en un servidor web (computador con características especificas para soportar

muchos usuarios concurrentes) en el cual se colocan los archivos que conforman una

página web (archivos html, archivos php, archivos css, imágenes, videos, fotos, etc).

(18)

…HOSTING

 Se compra en el mercado según el tamaño que se requiera en Megas o Gigas

1024 kb = 1 mega

1024 megas = 1 giga

 Para una página web sencilla es suficiente con 500 Megas de espacio

(19)

DOMINIO

 Es la dirección por medio de la cual se accederá a los archivos en el hosting (servidor web)

– www.google.com

– www.uao.edu.co

(20)

…DOMINIO

 2 o más dominios pueden apuntar al mismo hosting.

 Normalmente se compra junto con el hosting y el pago casi siempre se hace anual

 Precio promedio de Hosting de 2000 megas + 1 dominio = $150.000 anuales

 El precio depende de las características del hosting y de la terminación del dominio (.com,

(21)

DREAMWEAVER

 Programa Comercial de ADOBE

(anteriormente de Macromedia) con el cual se pueden hacer páginas web. El programa permite crear las páginas sin tener mucho

conocimiento en HTML aunque internamente siempre se guardará un código HTML.

 Nota: traer DVD doble capa para quienes deseen que les copie el instalador de

(22)

FIREWORKS

 Programa Comercial de Adobe por medio del cual se pueden hacer retoque de fotos,

cambiar el tamaño y la resolución a una

imagen, creación de imagenes GIF, creación de diseños gráficos para sitios web, etc.

(23)

FLASH

 Programa comercial de ADOBE por medio del cual se pueden crear animaciones. Una animación se puede poner en una página web o se puede crear una

aplicación multimedia y grabarla en un CD o memoria USB.

 Útil para hacer Banners animados

 Se utilizaba mucho para hacer Intros

 El formato de los archivos es .fla pero al compilarlo

guarda un archivo .swf el cual es el que se utiliza en las páginas web

(24)

Streaming

El streaming es la distribución de multimedia a través de una red de computadoras de manera que el usuario consume el producto al mismo tiempo que se descarga. La palabra streaming se refiere a que se trata de una corriente continua (sin interrupción). Este tipo de

tecnología funciona mediante un búfer de datos que va almacenando lo que se va descargando para luego

mostrarse al usuario. Esto se contrapone al mecanismo de descarga de archivos, que requiere que el usuario

(25)

PALABRAS CLAVE - KEYWORDS

 Palabras por medio de las cuales esperamos que los usuarios encuentren nuestra página web en los buscadores (google, altavista, etc).

 Ideal que cada keyword tenga mínimo 2 palabras. Ejem: «peluquerias sur de cali»

(26)

PALABRAS CLAVE - KEYWORDS

 Tarea en parejas:

Escriba con sus propias palabras la definición para :

– Dropbox – Linkedin – Google Drive – Sky Drive – La Nube – Captcha

– CMS – Content Management System – Google Adwords