linea del tiempo Multimedia

Multimedia

Historia

1992

Toma auge en los vídeo-juegos:

•Se pueda navegar

•Buscar la información que se desea sobre un

tema

•Interactuar con la computadora

•Información no sea lineal sino asociativa.

Se integran: audio (música, sonido estéreo

y voz), vídeo, gráficas, animación y texto al mismo tiempo.

Tipos de información

multimedia:

3.Desarrollo

o guion.

En esta etapa

sólo interviene

la agencia que

es la especialista

4.Creación de

un prototipo.

Creación de un prototipo

que no es sino una pequeña

parte o una selección

para testear la aplicación.

Ordenadores

y

Programas

DREAMWEAVER

•Aplicación en forma de estudio•Enfocada a la construcción y edición de sitios y aplicaciones Web basados en estándares.

•Integración con otras herramientas como Adobe Flash y World Wide Web Consortium.

•Permite crear sitios de forma gráfica, y dispone de funciones para acceder al código HTML generado.

•Permite la conexión a un servidor, a base de datos, soporte para programación en ASP, PHP,

Javascript, cliente FTP integrado, etc.

ADOBE FIREWORKS CS5

• Esta aplicación de diseño de Adobe esta dirigida a diseñadores web

• Las imagenes trabajadas con este software son optimizadas y comprimidas para su uso en web

• Posee algunas herramientas muy buenas como organización de paginas o areas de trabajo.

DROPBOX

• Servicio de almacenamiento en linea muy bueno y gratis.

• Es una utilidad perfecta y necesaria de cualquier diseñador web, para poder compartir archivos

con tus clientes y tener sincronizados estos con todos tus equipos ya sean computadoras o

moviles, el servicio es gratuito con una cuota de 2GB.

Formatos

¿Qué medidas son la ideales al generar el diseño en photoshop,

es decir, cuales son las medidas web estandar?

•La decisión se debe tomar teniendo en cuenta un aspecto

principal: a quien está dirigido el sitio, es decir, el target.

•La resolución mínima recomendada es de 1024 x 768 px,

que corresponde a un monitor de 17 CTR, y por lo tanto,

nuestro diseño no debe ser mayor a 980px de ancho.

(recordemos que perdemos

unos 30px en el ancho, debido a la barra de scroll lateral)

Estas son las estadísticas de resoluciones

utilizadas (fines del 2010) Medidas pagina web:

1.1024×768 : 23.63%2.

1280×800 : 17.41%3.

1280×1024: 10.86%4.

1440×900: 7.99%5.

1366×768 : 6.67%6.

1680×1050: 5.44%7.

800×600: 2.35%8.

1920×1080: 2.29%9.

1152 x 864: 2.17%10.

1920×1200: 2.02%

Ventajas

•Interactividad. Contacto con la informática

•Alfabetización audiovisual.

Multisensorial•Información multimedia.

Exploración•Vaersatilidad y facilidad de manejo

•Motivación trabajo individual o en grupo

•Actividad mental continua e intensa

•Aprendizajes evaluación

•Corrección inmediata aprendizaje del error

•Trabajo autónomo, metodico, iniciativa

•Comunicación y proceso de la información

•Entornos para la expresión y la creación

Desventajas

•Adicción. El multimedia interactivo resulta motivador, pero un exceso de motivación puede provocar adicción.

•Ansiedad. La continua interacción ante el ordenador puede provocar ansiedad en los estudiantes.

•Aprendizajes incompletos y superficiales. a menudo proporciona aprendizajes incompletos con visiones de la realidad simplistas y poco profundas.

•Diálogos muy rígidos. Los materiales didácticos exigen la formalización previa de la materia que se pretende enseñar y que el autor haya previsto los caminos y diálogos que los alumnos seguirán en su proceso de descubrimiento

de la materia.

El diálogo profesor-alumno es más abierto y rico

•Desorientación informativa. Muchos estudiantes se pierden en los

hipertextos y la atomización de la información les dificulta obtener visiones globales.

Sistemas

y

Operatividad

•DOS: El famoso DOS, que quiere decir Disk Operating System (sistema operativo de disco), es más conocido por los nombres de PC-DOS y MS-DOS. MS-DOS

•Windows 95: incluyen soporte multitareas y arquitectura de 32 bits, permitiendo así correr mejores aplicaciónes para mejorar la eficacia del trabajo.

•Windows NT:

Esta versión de Windows se especializa en las redes y servidores. Con este SO se puede interactuar de forma eficaz entre dos o más computadoras

•OS/2 El problema que presenta este sistema operativo es que no se le ha dad el apoyo que se merece en cuanto a aplicaciones se refiere. Es decir, no se han creado muchas aplicaciones que aprovechen las características de el SO, ya que la mayoría del

mercado de software ha sido monopolizado por Windows.

•Mac OS: Este sistema operativo es tan amigable para el usuario que cualquier persona puede aprender a usarlo en muy poco tiempo. Por otro lado, es muy bueno para organizar archivos y usarlos de manera eficaz.

•UNIX: Es usado como una de las bases para la supercarretera de la información. Unix es un SO multiusuario y multitarea, que corre en diferentes computadoras, desde supercomputadoras, Mainframes, Minicomputadoras, computadoras personales y estaciones de trabajo. Esto quiere decir que muchos usuarios puede estar usando una misma computadora por medio de terminales o usar muchas de ellas.

Linux

Sistema operativo, muy eficiente y tiene un excelente diseño. Es multitarea, multiusuario, multiplataforma y multiprocesador; usa un sistema de memoria virtual por páginas; usa hasta 64 consolas virtuales; tiene un sistema de archivos avanzado pero puede usar los de los otros sistemas; y soporta redes tanto en TCP/IP como en otros protocolos.

Usuarios

• Un individuo que utiliza una computadora, sistema operativo, servicio o cualquier sistema informático

• Se identifica frente al sistema o servicio utilizando un nombre de usuario (nick) y a veces una contraseña, este tipo es llamado usuario registrado.

• Una persona puede llegar a tener múltiples cuentas en un mismo sistema o servicio (si eso está permitido).

• Un usuario registrado accede a un servicio a través de un login luego de su autentificación.

• Un usuario también puede ser anónimo si no posee una cuenta de usuario, por ejemplo, al navegar por un sitio web sin registrase el usuario puede considerarse parcialmente anónimo (parcialmente porque puede ser identificado por su dirección IP).

• La navegación anónima sólo puede lograrse utilizando un proxy anónimo (sólo es más seguro, no es 100% anónimo). También se puede acceder a un servicio de forma anónima, por lo general se poseen menos opciones y posibilidades que un usuario registrado. Los usuarios anónimos a veces son referidos simplemente como "invitados".

Usuario administrador

Usuario registrado

Usuario anónimo

Reticula

•Es la base visual para organizar la información de una página web. •Cualquier documento que tenga que ser maquetado tendrá que estar compuesto en base a una retícula.•La retícula son una serie de guias que nos darán los tamaños de las

columnas para el texto, gráficos e imágenes que tengamos que

componer.

Sistematizando la retícula

•Dividir la retícual en un número suficiente de columnas y filas, para poder alojar todo tipo de elementos, sin que sean demasiados como para que parezca demasiado complejo.•Trabajar de forma orgánica al principio creando el layout de forma libre. Photoshop suele ser la herramienta más cómoda. •Componer las fotografías, posibles gráficas de forma natural y ver como sistematizar los elementos. •Debemos separar los procesos de diseño y de producción. •El diseñador debe liberarse de posibles trabas técnicas que le impidan expresar con libertar el concepto a plasmar.•El diseño basado en la retícula es la única vía que te garantiza que tu proyecto, a nivel de diseño, sea escalable.:

•Ancho de parrafo: 350 px

•Ancho de columna 1: 150 px

•Ancho de columna 2: 150 px

Metodologia

La fase de diseño se subdivide en las siguientes etapas: •Preparación del diseño. •Diseño total de los subsistemas. •Diseño total de los componentes. •Diseño detallado de las partes. •Preparación de los dibujos de ensamble, construcción experimental, programa de pruebas del producto, análisis y predicción y rediseño.

Asimow plantea las siguientes fases: análisis, síntesis, evaluación y decisión, optimización, revisión e implementación.

•"EI método sistemático para diseñadores"•Fue publicado durante 1963 y 1964 por la revista inglesa Design.•Archer propone como definición de diseño: "...seleccionar los materiales correctos y darles forma para satisfacer las necesidades de función y estéticas dentro de las limitaciones de los medios de producción disponibles", lo que implica reconciliar un amplio rango de factores.• El proceso de diseño por, debe contener fundamentalmente las etapas analítica, creativa y de ejecución. A su vez estas etapas se subdividen en las siguientes fases:

1. Definición del problema y preparación del programa detallado. 2. Obtener datos relevantes, preparar especificaciones y con base en éstas retroalimentar la fase 3. Análisis y síntesis de los datos para preparar propuestas de diseño. 4. Desarrollo de prototipos. 5. Preparar y ejecutar estudios y experimentos que validen el diseño. 6. Preparar documentos para la producción.

Forma

•Característica primaria para identificar un volumen.•La componen los contornos e interrelaciones de los puntos, las líneas y los planos que definen los límites del mismo.

•Existen dos tipos de formas dentro del lenguaje gráfico:

1.la forma material :Cuando viene determinada por sus límites

2.la forma perceptual:Cuando cambia considerablemente estos límites al igual que su orientación espacial y su entorno.Es el resultado de un juego recíproco entre el objeto material, el medio luminoso (transmisor de la información) y las condiciones reinantes en el sistema nervioso del observador.Los objetos, según sea el grado de percepción, adquieren formas regulares o irregulares también llamadas formas simples o complejas.

Otros tipos de Formas:

*Formas Simbólicas: Tienen una significación que va más allá de lo que se representa.

*Formas Abiertas y Cerradas: La forma abierta se percibe con mayor facilidad cuando se relacionan con el fondo. La forma cerrada se diferencia de la abierta por su contorno, por la continuidad del contraste con respecto al fondo.

*Formas Abstractas: son aquellas que no representan algo concreto.

*Formas Figurativas: Son aquellas formas concretas usadas normalmente para expresar ideas de imágenes con formas existentes.

*Forma Simétrica: Las formas simétricas son aquellas que Correspondencia exacta en forma tamaño y posición de las partes de un todo.

Importancia de la forma en el diseño gráfico

•Emplea los elementos expresivos del dibujo y la pintura: línea- color - valor - textura - ritmo para expresar mensajes y darle forma a las cosas.

•El diseño gráfico se emplea para dar a conocer acontecimientos artísticos y políticos, así como para transmitir mensajes publicitarios, divulgar el arte, etc.

Color

•Color Primario: es el tono básico de la página, el que la define, y el que ocupa la gran mayoría de la misma. Sería el color del atributo "background" de la página.

•Color Secundario: es el segundo tono predominante en la página, aunque en mucha menor medida que el primario. Normalmente debe acotar o resaltar áreas y debe ser bastante próximo en tono al primario.

•Color Destacado: es el color que se utiliza para resaltar aspectos concretos de la página. Por definición debe contrastar mucho con los colores primario y secundario y, por tanto, debe utilizarse con moderación.

Cuando se diseña una página web el elegir el contraste entre los colores que vamos a usar es muy importante porque va a influir directamente en la sensación que vamos a transmitir a los visitantes.El contraste está relacionado directamente con las distancias entre dos colores dentro del Círculo Estándar de Color descritas en el apartado 3. Relación entre colores. así, cuanta mayor es la distancia entre dos colores dentro del círculo, mayor es el contraste entre ambos.

1.Entonces, una pareja de colores complementarios produce el máximo contraste, mientras que para cualquier color el que menor contraste produce con este es su adyacente.2.Es interesante el contraste ce tono entre colores fríos y cálidos. Los colores cálidos siempre aparecen al espectador más próximos, mientras que los colores fríos aparecen al espectador más distantes.3.En una página web será más conveniente utilizar colores fríos para marcos, tapices o elementos secundarios y colores calientes para menús, iconos o barras de herramientas que queramos que el usuario siempre tenga presente.4.Para la relación texto y background normalmente no será suficiente cfontraste de tono ya que no garantizará legibilidad suficiente. Será necesario aplicar algún tipo de contraste adicional.

Contraste de Luminancia (o de Valor): Permite crear grandes contrastes con el mismo tono de color sólo mediante el brillo de luz. Contraste de Saturación: El contraste de saturación con frecuencia es el más adecuado para resaltar aspectos de la página web de una forma moderada, poco estridente.Contraste Simultáneo: Es un efecto creado por nuestro sistema visual que, dado un color predominante, tiende a requerir su color complementario.Combinación de contrastes: Es lo más frecuente, sobre todo cuando se trata de resaltar textos. Los colores tienen unas características naturales de luminosidad. Así el turquesa o azul mar es naturalmente más claro que el rojo violáceo. Habida cuenta que son complementarios, la mezcla funciona bien y aporta suficiente contraste.

Los colores y el texto:

Es especialmente importante cuando se trata de escribir texto y resaltarlo suficientemente para garantizar su legibilidad a la totalidad de nuestros usuarios. Hay combinaciones de colores que:

•Son especialmente conflictivas para usuarios con disfunciones en la vista

Ceguera al color:

Hay múltiples tipos de disfunciones en la visualización de los colores, como describimos en nuestra página de los colores. Sin embargo a efectos de accesibilidad sólo necesitamos preocuparnos de los daltónicos, grupo que constituye la inmensa mayoría de los que sufren alteraciones en la percepción del color.Pensando en ellos, deberemos tratar de evitar siempre las combinaciones de texto en cualquiera de las variedades del verde sobre fondos rojizos, áreas con motivos en este color predominante, etc., y biceversa. Independiente de la luminosidad o saturación de los colores.

G.A.G.C

UNID ATLIXCO

Imágenes:

• son documentos formados por píxeles.
• Pueden generarse por copia del entorno (escaneado, fotografía digital)
• tienden a ser ficheros muy voluminosos.

Animación:

Presentación de un número de gráficos por segundo que genera en el observador la sensación de movimiento.

Vídeo:

• Presentación de un número de imágenes por segundo
• que crean en el observador la sensación de movimiento.
• Pueden ser sintetizadas o captadas.

Sonido:

• puede ser habla
• música
• otros sonidos.

Texto:

• sin formatear
• formateado
• lineal e hipertexto.

FIREFOX O GOOGLE CHROME

•Excelentes herramientas para un diseñador web,

•Preferidos para diseño web •Existe un gran numero de extensiones para trabajar mejor,

encontrar errores y optimizar nuestro trabajo.

Enero de 1992:

Se anunció el CD multiusos:

•Multiplayer interactivo capaz de reproducir sonido, animación, fotografía y vídeo, por medio de la computadora o por vía óptica, en la pantalla de televisión.

2. Conocer

al público.

*Buscar qué le puede

gustar al público para

que interactúe con

el mensaje.

*Formular una

estrategia de

ataque fuerte.

*Se trabaja con

el cliente.

*Se crea una

"ficha técnica",

"concepto" o

"ficha de producto".

Gráficos:

• utilizados para representar esquemas
• planos
• dibujos lineales

1. •Definir el

mensaje clave.

Saber qué se

quiere decir.

Conocer al cliente y

pensar en su mensaje

comunicacional

Pasos para elaborar el producto.

Propuesta por Bruce Archer

Propuesta por Morris Asimow

•Windows 3.1: Microsoft tomo una decisión, hacer un sistema operativo que tuviera una interfaz gráfica amigable para el usuario, y como resultado obtuvo Windows. Este sistema muestra íconos en la pantalla que representan diferentes archivos o programas, a los cuales se puede accesar al darles doble click con el puntero del mouse.