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.

Ejercicio

Creación de las cuentas FTP de los estudiantes y de las páginas de cada estudiante en el sitio web del curso. ¿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. Cree su propio directorio en el directorio del sitio web de la clase "proyectos/[usuario]". Cuando desarrolle la estructura recuerde que habrá 10 problemas en total y cada uno tendrá tres partes. Publique los resultados de las anteriores preguntas en esta estructura.

Lecturas, recursos y links

índice

Temática

Entrada en materia con HTML. Introducción al código HTML y a editores What You See Is What You Get — WYSIWYG —.

Técnica

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 un editor de texto o un editor HTML WYSIWYG de su preferencia. Recomendamos Dreamweaver. Si usa WYSIWYG, muévase continuamente entre el código y el diseño para reforzar 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.

  1. Re-cree la Tabla periódica de los elementos usando solamente tablas en HTML y texto.
  2. Cree una representación de un árbol (JPG o GIF) en menos de 5 Kilobytes.
  3. Cree una página HTML acerca de su tema que integre texto e imagen. Esta debe contener al menos una tabla, links externos, texto HTML, texto como imágenes, e imágenes.

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

1. En no menos de 200 palabras, explique los beneficios de separar estilo de estructura.

2. 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.

3. Seleccione un texto (de al menos 200 palabras) de su libro favorito. En el espíritu de una exploración tipográfica expresiva, re-interprete este texto mediante el control de los atributos de las letras. Imagine el texto como si fuera leído, y resalte el ritmo, volumen y tono del lector. Module los elementos tipográficos (tamaño, color, kerning, leading, etc.) para adicionar énfasis a cada frase. Use solamente CSS para conseguir el efecto (no incluya el tag ).

Ejemplos: Si dos personas están hablando use un font diferente para cada una de ellas. Si alguien suspira, disminuya el tamaño del texto. Si la escritura es agresiva use negrilla y enfatice las palabras claves.

Lecturas, recursos y links

índice

Temática

Los formularios como elementos de comunicación del usuario con el sitio web. Usar JavaScript para validar la información que envía el usuario.

Técnica

Programación con JavaScript para validar información de formularios. Utilizar los comportamientos de Dreamweaver para automatizar algunas validaciones.

Ejercicio

  1. En Web Design in a Nutshell, Niederst dice "CGI (Common Gateway Interface) is the interface between HTTP/web server software (the program responsible for web transactions) and other programs on the server." ¿En sus propias palabras que significa esto?
  2. Use su conocimiento en CSS, formas y JavaScript para re-diseñar la página frontal del sitio web de la clase. Diseñe la página de una manera consistente con el contenido de la clase. Del diseño de la página puede cambiar radicalmente, pero la estructura, información y links deben permanecer intactos. Esté preparado para explicar todas sus decisiones.
  3. En el espíritu de la Forma en Arte, construya una composición con elementos de forma.

Lecturas, recursos y links

índice

Temática

¿HTML vs Flash? ¿HTML vs PHP? Sitios web “animados”. Sitios web “interactivos”. Tecnologías de servidor como PHP, ASP, CF y JSP. Definición de “interactivo” y “dinámico”.

Técnica

“Visita” a sitios web dinámicos, interactivos, en Flash, en Java. Discusión sobre la “estética de Flash”.

Ejercicio

Este problema involucra cierta complejidad. Recuerde seguir una metodología de diseño inteligente. Divida sus planes en tareas pequeñas más manejables. Comience de manera simple y agregue complejidad gradualmente, siempre manteniendo una versión de proyecto que funcione. Recuerde que estos son ejercicios de diseño, y las cualidades estéticas de estos ejercicios deben ser excelentes.

  1. ¿Por qué razones escogería usted realizar un sitio web con Flash en lugar de HTML? ¿Por qué razones escogería usted diseñar un sitio web con PHP u otras tecnologías con acceso a bases de datos en lugar de HTML?
  2. Cree una animación repetitiva o generativa con al menos 5 líneas rectas blancas en un fondo negro. Cada línea debe tener diferente calidad de movimiento. Por ejemplo una línea puede ser lenta y moverse en un camino recto y otra puede ser rápida y moverse intermitentemente. Use Flash para realizar este ejercicio. Si usted usa Flash, usted puede usar el timeline y las transiciones automáticas para minimizar la complejidad del ejercicio.
  3. Cree dos botones circulares blanco y negro. Ellos deben ser visualmente idénticos, pero deben tener distintos comportamientos. Revele el comportamiento de cada botón mediante su respuesta al Mouse. El comportamiento de los botones debe revelar como son — por ejemplo agresivo, tímido o fatigado; un botón agresivo será rápido en responder, y luego puede pulsar violentamente hasta que el usuario mueva el Mouse fuera de este —. Use Flash o Processing para realizar este ejercicio. Ayuda: Si usa Flash puede aprovechar la plantilla de botón con MovieClips para minimizar la complejidad del ejercicio.

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.

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

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

Asuma que su sitio web se desarrollará usando HTML y PHP.

  1. Usando “Understanding the Web as Media” de Cloninger como una referencia, determine cómo puede usted usar las características del web como una ventaja en la creación de su sitio dinámico para esta clase. En no menos de 200 palabras explique sus ideas.
  2. 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?
  3. 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.

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 “Arquitectura de informació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

Una vez seleccionado un diseño “ganador”, que puede ser un híbrido de las variaciones, se realiza un refinamiento del mismo que servirá como punto de partida para el diseño del sitio web.

Ejercicio

Refine un diseño escogido de las tres direcciones de diseño presentadas en el ejercicio “Variaciones de diseño”. Cada diseño refinado debe tener una versión adicional anotada incluyendo los detalles de la implementación (tamaño de las imágenes, bordes de tablas, etc.) y notas de cada transición o animaciones. Estos diseños deben ser finales así usted no tiene que tomar decisiones grandes en diseño mientras que usted hace la implementación. Al entregarle este diseño a un tercero, este debe ser capaz de implementar el sitio usando únicamente estos documentos como referencia. Desarrolle los refinamientos usando herramientas de diseño como Photoshop, Fireworks, Freehand e Illustrator. Si su sitio incluye animación usted debe realizar pruebas de las animaciones.

  1. Home page(s). Muestre la página de navegación principal.
  2. Página(s) de texto(s). Muestre la(s) pantalla(s) de contenido general.
  3. Página(s) adicional(es). Cree documentos para los pantallazos adicionales en el sitio web.

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. Independientemente si usted está construyendo un sitio web en Flash, en PHP, o en HTML “puro” usted 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.

Usted recibirá crítica individual en cada ejercicio.

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
Smart Mobs
Online Gaming
Instant Messaging
Google
Carnivore
Bots (Web Spiders)
Weblogs (blogs) + Movable Type
Wiki
Apache Server
Sourceforge
Open Source
Bluetooth
GSM/GPRS/3G
WiFi
Wearable Computers
Netomat
Arpanet
Modem
NCSA Mosaic
Hypertext
BBS (Bulletin Board System)
Compuserve
Amazon
eBay
Napster
Praystation
K10K
Douglas Englebart
Tim Berners-Lee

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.

Lecturas, recursos y links

índice

Ejercicio

Entrega de trabajos Finales

Jurados

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

índice