Programa del Curso

Curso de nivel intermedio que explora la producción creativa en ambientes multimedia en red, enfocándose principalmente en el web. Se revisará su amplio rango de posibilidades, entendiéndola como un medio dinámico. Enfocado hacia aprender los conceptos básicos detrás del web para que las habilidades aprendidas puedan ser extendidas a contextos futuros.

DISE 3315 es un curso de diseño, no un curso técnico. Se aprenderá cómo utilizar diversas tecnologías al servicio del diseño, la percepción y la comunicación, y se dedicará un tiempo a aprender técnicas para luego ser aplicadas en contextos específicos de diseño.

índice

Sembrar inquietudes intelectuales y gráficas que permitan al estudiante asumir proyectos web y entender el funcionamiento de la red en cuanto a sus posibilidades de diseño.

índice

A través de talleres y ejercicios que introduzcan a los diferentes temas se familiarizará a los estudiantes procedimientos característicos de la investigación. Se buscará presentar los temas desde diferentes perspectivas y puntos de vista para enriquecer la lectura que se haga de los mismos.

índice

La red será el gran recurso permitiendo acceso las veinticuatro horas del dia a la información que habrá consignada en un sitio web del curso. Este sitio web estará disponible para que los estudiantes puedan dar seguimiento a la mayoría de lecturas y observar el trabajo de sus compañeros. Queda en manos del estudiante aprovechar estos recursos y asumir una actitud inquisitiva con respecto al curso para un mayor provecho.

índice

La calificación del curso está dada por los ejercicios realizados y un proyecto final. Los ejercicios no se considerarán completos hasta que se encuentren en el sitio web de la clase. Cada semana habrá planteamientos de inquietudes que deben ser resueltas por el estudiante. Cada ejercicio será evaluado en términos de los siguientes parámetros: calidad del diseño gráfico, optimización de recursos, funcionalidad y excelencia en la implementación. Ejercicio que no sea entregado el día especificado tendrá de calificación cero. Una nota definitiva entre 2.99 y 2.5 se aproximará a 2.5.

* la inasistencia al 15% de las clases (5 clases) constituye la pérdida de la materia.

índice

Temática

Lectura del programa, planteamiento de objetivos, planteamiento de ejercicios y proyectos. Se determinan fechas de entrega de los trabajos, se estudiará la metodología. Creación de la lista de correo del curso y sitio web. Introducción del curso. Breve introducción a la historia de internet, el nacimiento del concepto de hipertexto. El Hypertext Markup Language — HTML, aproximación a su estructura básica y su importancia dentro del mundo de Internet. El concepto de Wiki y Blog y su importancia en la red actual. Manejo básico de un programa cliente de FTP para que cada estudiante pueda publicar los resultados del curso en su página personal. Creación de las cuentas FTP de los estudiantes y de los directorios web para cada estudiante "proyectos/[usuario]".

Explicación del funcionamiento de un sitio web — servidor web, navegador web, interpretación del código HTML. Uso de programas de línea de comando como ping, ipconfig y tracert. El archivo predeterminado de índice — index.html.

Ejercicio

¿Por qué esta tomando este curso? ¿Qué experiencia tiene diseñando para el Web? ¿Cuáles son sus sitios web favoritos y por qué? Construya una estructura en el web para mostrar su trabajo de la clase. Cuando desarrolle la estructura tenga en cuenta que habrá varios ejercicios que deberá organizar de alguna manera. Determine un criterio de organización y asegúrese que su estructura lo refleje. La estructura podrá cambiar en el transcurso del semestre. Publique los resultados de las anteriores preguntas en esta estructura.

Lecturas, recursos y links

índice

Temática

Los sitios web no se usan como uno espera. Un sitio web y las páginas que lo componen son interfases gráficas a las que se enfrenta el visitante/usuario dependiendo de sus objetivos personales. Salvo contadas excepciones, cada página de un sitio web debe responder muchas preguntas como: ¿qué sitio es este? ¿dónde estoy? ¿que secciones tiene este sitio? ¿a dónde puedo ir?

Un sitio web también debe sacar provecho de conceptos de diseño como: estructura, jerarquía, composición, coherencia, consistencia.

Técnica

Entrada en materia con HTML. Introducción al código HTML y a editores What You See Is What You Get — WYSIWYG —. Dreamweaver como herramienta hipermedial. Introducción al manejo de Dreamweaver, su estructura, creación de hipervínculos, tablas etc. Introducción al manejo del FTP y su forma de intercambio de archivos con el servidor.

Ejercicio

Cree estos ejercicios con Dreamweaver y Fireworks. Al usar Dreamweaver, asegúrese de utilizar tanto la ventana de código como la de diseño para entender la relación entre las dos representaciones. La estructura del HTML será parte de la evaluación. Recuerde estos son ejercicios de diseño y ejercicios técnicos y usted será evaluado por su aproximación y refinamiento visual así como finalizar el ejercicio exitosamente.

inicio / sección 1 / página índice
                     página 1
       / sección 2 / página índice
                     página 1
                     página 2
                     página 3
       / sección 3 / página índice
                     página 1
El inicio debe ser accesible desde todas las páginas. Todas las secciones deben ser accesibles desde todas las páginas. Todas las páginas de una sección deben ser accesibles desde todas las páginas de esa sección. Al escribir el URL de una sección, la página índice debe cargar automáticamente. Tenga cuidado al nombrar carpetas y archivos pues Linux es case-sensitive y los caracteres especiales pueden presentar problemas. Reemplace el espacio por un underscore "_" en los archivos y las carpetas y reemplace los acentos por su equivalente sin acento. Ingrese texto simulado en todos los documentos. Implemente un layout básico para todas las páginas de este minisite, con excepción de la página de inicio, usando tablas HTML para lograr un diseño a tres columnas con encabezado y pie de página.

Lecturas, recursos y links

índice

Temática

La página home es de las más importantes de un sitio. Esta página determina muchas veces la primera impresión de un sitio web. Dependiendo del sitio web también suele ofrecer más posibilidades y caminos que las páginas interiores. También suele ser la página más controvertida en un proyecto web puesto que los involucrados querrán tener presencia en ella. Esta página también suele tener un tratamiento gráfico ligeramente diferente al resto de páginas. No obstante, dada la naturaleza del web y su carácter no-lineal de navegación, la página home no necesariamente es la primera página que una persona visita. No debemos depender completamente del homepage para un entendimiento de nuestro sitio web y su navegación.

Técnica

Análisis de sitios web comunes en busca de aciertos y desaciertos en su página home.

Ejercicio

Diseñe la página home para un minisite con información sobre su película favorita. Dicho diseño debe hacerse gráficamente sin necesidad de implementarlo en HTML — en otras palabras se trata de un pantallazo realizado usando Fireworks. El minisite va a contener estas secciones: reparto, galería de fotos, trailers, descargas, historia. Recuerde que sólo debe diseñar la página home así que debe ser exhaustivo en su boceto. Diseñe un home para este sitio que sea acorde con la película.

Lecturas, recursos y links

índice

Temática

Las páginas interiores de un sitio deben responder muchos interrogantes, algunos mencionados anteriormente como ¿qué sitio es este? ¿dónde estoy? ¿que secciones tiene este sitio? ¿a dónde puedo ir? y otros como ¿que subsecciones tiene esta sección? ¿en qué nivel de profunidad me encuentro? ¿que información hay relacionada a este producto/documento/persona/artículo? mientras que presentan la información que le compete a esa página. Es por esto que una página interior puede ser más compleja de diseñar que la página de inicio. Estudie las páginas interiores de sitios web populares y descubra sus aciertos y desaciertos.

Técnica

Análisis de sitios web comunes en busca de aciertos y desaciertos en sus páginas interiores.

Ejercicio

Usted recibirá algunos pantallazos de diferentes sitios web. Basado en lo que ve responda las siguientes preguntas y señale en los pantallazos las respuestas:

¿qué sitio es este? ¿dónde estoy? ¿que secciones tiene este sitio? ¿a dónde puedo ir? ¿en qué nivel de navegación me encuentro?

Diseñe las páginas interiores del minisite del ejercicio anterior. Implemente el diseño tanto del home como de las páginas interiores en HTML. Todo el sitio web debe ser funcional. Recuerde que estos son ejercicios de diseño, y las cualidades estéticas de estos ejercicios deben ser excelentes. Recuerde incluir una anotación en el pie de página de todo el sitio web dando el crédito correspondiente por el material que está tomando prestado para hacer su ejercicio. La estructura del sitio debe ser algo similar a:

inicio / reparto / índice de protagonistas
                 / protagonista 1
                 / protagonista 2
                 / ...
       / galería de fotos / índice de fotos
                          / foto 1
                          / foto 2
                          / ...
       / trailers / índice de trailers
                  / trailer en baja calidad (o trailer 1)
                  / trailer en alta calidad (o trailer 2)
                  / ...
       / descargas / índice de descargas
                   / descarga 1
                   / descarga 2
                   / ...
       / historia

Lecturas, recursos y links

índice

Temática

Los formularios son interfases de comunicación de un visitante con su sitio web. Un buen uso de los formularios permitirá un mayor nivel de interacción de los usuarios con su sitio y mejorará la percepción que éstos tengan del mismo. Los formularios son también puertas de entrada a usuarios inescrupulosos por lo cual es necesario tratar con mucho cuidado la información que sea ingresada a ellos. El lenguaje HTML incluye varios tags útiles para el diseño adecuado de formularios que deben ser utilizados apropiadamente.

Técnica

Diseño efectivo de formularios. Validación client-side vs server-side. Uso efectivo de cada tag de formularios incluyendo el tag

Ejercicio

Cree un formulario de contacto para el minisite de los ejercicios anteriores. Dicho formulario debe incluir los siguientes campos requeridos: e-mail, mensaje, y los siguientes campos opcionales: nombre, aceptación de recibir un newsletter relacionado con la película y sexo. El formulario debe incluir validación client-side y estar incluido en una nueva sección "contacto" del minisite de la película.

Lecturas, recursos y links

índice

Temática

Separación del diseño en estructura y contenido por medio de los Cascading Style Sheets.

Técnica

Usar Notepad y Dreamweaver para el diseño de sitios con CSS.

Ejercicio

Realice su propia versión del CSS Zen Garden. Primero realice un boceto en Fireworks que después convertirá en CSS. Utilice el código HTML del proyecto para realizar su propio diseño. Visite la galería de proyectos para encontrar ideas. En la página de soluciones a ejercicios del curso deberá publicar el CSS correspondiente a su diseño. En su sitio web personal deberá publicar el diseño funcionando.

Lecturas, recursos y links

índice

Temática

De esta semana en adelante se desarrollará el proyecto final. Dicho proyecto es el resultado de la investigación basada en un “cliente” que busca re-diseñar su sitio web y que tiene unas necesidades de diseño y objetivos de comunicación particulares. El nombre del “cliente” será revelado en el transcurso del curso. El propósito del proyecto final es acercar al estudiante a la realidad en el diseño y desarrollo de proyectos web. El estudiante deberá realizar una investigación del “cliente” que será revisada periódicamente y entregada al final con el resto del proyecto. Este proyecto se hará en grupos de mínimo dos y máximo cuatro estudiantes.

El éxito de todo proyecto está en un buen proceso de planeación preliminar. De esta planeación se desprenden costos, tiempos de ejecución, aspectos gráficos, aspectos técnicos y tantos otros elementos que componen un proyecto web. La arquitectura de información forma parte del proceso de planeación. Este ejercicio busca familiarizar al estudiante con uno de los pasos más importantes en el desarrollo de proyectos web.

Técnica

Usando papel, lápiz, computador o cualquier herramienta se desarrolla el proceso de planeación del sitio web para el “cliente”.

Ejercicio

  1. Construya un mapa de la arquitectura de su sitio. Este mapa es su herramienta para explicar la experiencia del visitante en su sitio web. ¿Cuántas páginas, interfases o plantillas tendrá y qué harán? ¿Qué secciones o páginas de soporte plantea usted? ¿Cómo se navega de una página a otra?
  2. Construya esquemas de borrador para cada página en su sitio. ¿Cuántas plantillas tendrá? ¿Qué elementos habrá en cada página o plantilla? ¿Dónde están los elementos de navegación? ¿Está usando formularios y dónde están localizados? Debe haber un esquema para cada plantilla. Estos diagramas determinan la ubicación de cada elemento gráfico o visual — contenido, navegación, presencia de marca, etcétera — en cada página. Cuando construya la navegación tenga en mente las siguientes preguntas con referencia al visitante: ¿Dónde estoy? ¿A dónde más puedo ir? ¿A dónde quiere usted dirigir al visitante? ¿A dónde quiere ir el visitante?

Notas: Se recomienda inicialmente usar papel y lápiz para hacer borradores. Dichos borradores deben ser escaneados y publicados en el sitio web del curso.

Lecturas, recursos y links

índice

Ejercicio

Explore el elemento de comunicación visual del sitio web. ¿Qué lenguaje de forma desarrollará usted? ¿Qué colores usará? ¿Que tipografía seleccionará? Las respuestas a este ejercicio deben venir de su idea del contenido del sitio y de la audiencia. Para quienes hace usted este sitio web? ¿Qué estilo sería apropiado para un sitio web de esta naturaleza?

Tome sus decisiones acerca del contenido y la audiencia. Desarrolle y explore elementos de diseño apropiados mediante el desarrollo de al menos cinco imágenes de estilo de 800 x 600 píxeles. Cree una página adicional con una lista de texto explicando sus fuentes de inspiración, técnicas, y enumerando los sitios web que se aproximan o sirvieron de inspiración a su estilo. Cabe anotar que no se aceptarán copias literales de diseños de sitios web existentes.

Para la revisión, usted mostrará sus exploraciones y claramente explicará la razón para sus decisiones. Este trabajo servirá como fundamento para el ejercicio “Variaciones de diseño”.

Notas: Por favor no use “clip art” o “stock photography” a menos que ellas sean parte central de su concepto. Tome sus propias fotografías y desarrolle su propio lenguaje gráfico.

Lecturas, recursos y links

índice

Temática

Todo proyecto debe contemplar varias opciones de diseño. Puede tratarse de variaciones que enfatizen uno u otro elemento de diseño como color, tipografía, interacción o comunicación. Las variaciones dejan ver opciones de donde tanto el diseñador como el cliente podrán evaluar y seleccionar.

Ejercicio

Desarrolle al menos tres variaciones de diseño por cada integrante de su grupo independientes y aplique a cada una de ellas las plantillas y los elementos de página articulados en el ejercicio “Planeación”. Todas las variaciones de diseño deben directamente emerger del ejercicio “Exploración de Estilo y Diseño”, pero ellas deberán explorar un rango de ideas potenciales de comunicación. Haga pruebas rápidas de borrador de animaciones si ellas son esenciales para entender el diseño de su sitio. Explore el rango de diseños desde radicales a conservadores. Desarrolle las variaciones usando herramientas de diseño como Photoshop, Fireworks, Freehand e Illustrator.

  1. Variación de Diseño 1
  2. Variación de Diseño 2
  3. Variación de Diseño 3

Lecturas, recursos y links

índice

Temática

Implementación del diseño refinado en cada una de las páginas del sitio web.

Técnica

Utilización mixta de recursos como Dreamweaver, Fireworks, Flash o cualquier otro software que sea necesario para el correcto desarrollo del proyecto.

Ejercicio

Construya el sitio que usted ha diseñado. Debe implementar todos los contenidos. Usted será evaluado en términos de los siguientes parámetros: calidad del diseño gráfico, arquitectura de la información, funcionalidad y excelencia en la implementación.

Reporte de Investigación

Internet y el web están continuamente cambiando. Nuevas tecnologías se originan y desaparecen permanentemente. Tendencias culturales y económicas permiten que ciertas ideas y aplicaciones proliferen y otras fallen. Los siguientes tópicos de investigación son representativos de la historia, presente y futuro del web:

Friendster
Online Gaming
Instant Messaging
Google
Weblogs (blogs)
Wikis
Open Source
WiFi
Modem
Browser
Hypertext
BBS (Bulletin Board System)
Amazon
eBay
Napster
Praystation
K10K
Douglas Englebart
Tim Berners-Lee
[cualquier otro tema relevante]

Seleccione el tópico e investigue exhaustivamente sobre su contexto e importancia. Citas y referencias deben seguir el manual de Chicago para el formato de estilos, o MLA. Su reporte escrito y la presentación deben literalmente seguir el siguiente esquema:

  1. Abstract (60 - 100 palabras) Resumen del tópico
  2. Background (300 - 400 palabras) Precedentes tecnológicos y precedentes conceptuales
  3. Descripción (300 - 400 palabras) Una descripción real, con hechos reales del tópico escogido
  4. Análisis (300 - 400 palabras) ¿Porque es/era este tópico importante? ¿Qué es bueno acerca del tópico? ¿Cuáles son las debilidades o fallas del tópico?
  5. Conclusiones (60 - 100 palabras)
  6. Referencias Mínimo tres libros, artículos, ensayos acerca del tópico

Entregables:

Documento impreso tamaño carta. El documento se entregará en grupo el día de la presentación del proyecto final.

Lecturas, recursos y links

índice

Ejercicio

Entrega de trabajos Finales

Jurados

Mauricio Giraldo
Hernando Barragán
Andrés Burbano
otro(s) por definir

índice