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.

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

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?

Durante el semestre va a tener un sitio web personal. Dicho sitio será un espacio virtual para la expresión personal. Consigne ahí todos los ejercicios de manera ordenada y fácil de navegar.

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. Familiarización con los tags más importantes y cómo usarlos adecuadamente. Diferencia entre block-level e inline.

Ejercicio

Haga uso únicamente de los siguientes tags:
<html>, <head>, <title>, <meta>, <body>, <p>,
<a>, <table>, <th>, <tr>, <td>, <ul>, <li>, <em>, <strong>,
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <div>
El inicio debe ser accesible desde todas las páginas. Todas las secciones (biografía, proyectos, inspiración) 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 (evite usar tildes, espacios y la ñ, reemplace el espacio por un underscore "_" en los archivos y las carpetas y reemplace los acentos por su equivalente sin acento). En el sitio web del curso publique el link que lleva a este otro sitio web.

Lecturas, recursos y links

índice

Temática

El diseño de una interfaz web va más allá del aspecto gráfico que tenga. Una página web a la vez que sirve para presentar información permite la interacción con el usuario. Todos los conceptos de tipografía y diseño básico —como composición, retícula, jerarquía— aplican para una página web junto con otros más asociados con el desarrollo de interfaces gráficas —como usabilidad, accesibilidad, navegación. En el caso de HTML, el diseño está a cargo de las plantillas CSS —cascading stylesheets.

Técnica

Aprendizaje de CSS. Descubrir las ventajas de usar CSS en el diseño de sitios web.

Ejercicio

Usando la funcionalidad de edición de CSS (Edit CSS) de la extensión Web Developer de Mozilla Firefox, realice su propia versión de este documento XHTML. Publique el código CSS de la extensión en el campo código del ejercicio junto con una pequeña captura de la pantalla (haga uso de la extensión de captura de pantalla y Fireworks para recortar). Acá puede encontrar las extensiones. Guarde el código CSS para futura referencia.

Lecturas, recursos y links

índice

Temática

Los documentos HTML son en realidad "collages" de texto e imágenes; mientras que el texto va incluido en el documento como tal, las imágenes y otros elementos visuales son referencias a archivos externos. La mayoría de los navegadores tienen programas adicionales ( plug-ins) instalados que permiten la inclusión de archivos de diferentes tipos en los documentos HTML como Flash®, Quicktime® y otros.

Técnica

Utilización de imágenes para enriquecer el diseño e implementar funcionalidades adicionales.

Ejercicios

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

Ejercicio

Cree un formulario de contacto para su sitio personal. Dicho formulario debe incluir los siguientes campos requeridos: e-mail, mensaje, y los siguientes campos opcionales: nombre y la opción de recibir respuesta al mensaje. El formulario debe incluir validación client-side y estar incluido en una nueva sección "contacto" del sitio.

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:

Flickr
Last.FM
World of Warcraft
YouTube
Podcast

Seleccione uno de los tópicos anteriores 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

índice