:::: MENU ::::

Programa del ejercicio Web Institucional 2016

  • Ago 05 / 2016
  • Comentarios desactivados en Programa del ejercicio Web Institucional 2016
Diseño III, Programas

Programa del ejercicio Web Institucional 2016

1. Objetivos

Que el alumno rediseñe y produzca un sitio web responsive para una empresa u organización asignada por la Cátedra, con el objeto de mejorar el rendimiento respecto del sitio existente.

2. Contenidos

  • Códigos de programación (HTML, CSS, Javascript, PHP, ASP, etc.)
  • Tecnologías para el desarrollo gráfico de sitiow Web (jQuery, plugins para jQuery, Bootstrap, plantillas, LESS y SASS, etc.).
  • ¿Qué es diseñar para la web? ¿Qué es un buen diseño web?
  • Tipologías web: funciones y características.
  • Sitios Web de empresas e instituciones.
  • Experiencia de usuario (UX) desde el punto de vista del diseño (UI) gráfico.
  • SEO (optimización del código para motores de búsqueda)
  • Navegabilidad, usabilidad, interactividad y accesibilidad.
  • Diseño responsive

3. Requerimiento

Cada alumno desarrollará un sitio web responsive, de carácter comercial/persuasivo, para una empresa u organización que le será asignada. Si se tratase de un trabajo real, el sitio podría o no tener más páginas de las que se requieren en este ejercicio, pero a los efectos de unificar el alcance de todos los trabajos, se requiere el diseño y desarrollo exclusivamente de los siguientes elementos:

  • La página principal del sitio (Home).
  • Un listado (de productos o servicios), que eventualmente podría incluirse en la página principal (si el caso no justificara una página independiente).
  • Una página modelo de uno de los productos o servicios que la organización ofrece.
  • Un formulario de contacto (sea un popup, una página indepentiente o una sección en la home o en las páginas de producto, según convenga al caso).

Los sitios a rediseñar son:

  1. Hotel: http://www.villaisidro.com.ar
  2. Bodega: http://www.bodegananni.com
  3. Restaurant: http://www.notorious.com.ar

Estos sitios necesitan fundamentalmente mejorar la calidad gráfica, realizar una buena adecuación estilística al emisor y presentar sus propuestas con mayor claridad.

Por tratarse de un ejercicio cuyo resultado no termina en el papel —sino en la pantalla—, a lo largo de las clases los alumnos presentarán sus propuestas en un navegador. En ese sentido, convendrá que quienes cuenten con computadoras portátiles las lleven al taller todas las veces que puedan. Asimismo, para poder probar los sitios en tabletas y teléfonos móviles, convendrá que mantengan una versión accesible desde la web.

4. Pautas de evaluación

  • Calidad gráfica: selección y combinación de elementos gráficos acorde a los estándares de calidad del género en la actualidad.
  • Claridad comunicacional: correcta selección, organización y jerarquización de los contenidos.
  • Adecuación a los códigos funcionales del medio Web: respeto de los códigos de funcionamiento impuestos y ya conocidos por el público.
  • Adecuación estilística: el clima visual de la propuesta gráfica debe resultar adecuado al emisor y al tipo de mensaje.
  • Presentación: cumplimiento de las pautas requeridas.

5. Entrega

La entrega será virtual (no hay que asistir a la facultad) y estará compuesta de dos partes:

  1. Subir el código completo del sitio y el código de la plantilla utilizada via Dropbox.
  2. Publicación en la Web del sitio desarrollado.
    Seguir la Guía Cómo publicar un sitio via FTP.

El código completo del sitio desarrollado y de la plantilla utilizada debe incluir solamente los archivos del sitio. Muchas plantillas incluyen otras carpetas con recursos y documentación que no forman parte del sitio. Parhttp://catedrabelluccia.com.ar/wp-admin/post.php?post=4044&action=edit&message=1#a que no queden dudas sobre la carpeta que necesitamos, es solamente la que incluye la home del sitio y las carpetas css, js, etc. Cualquier otra carpeta fuera de esa carpeta principal del sitio, por favor no la incluyan en la entrega. Esto aplica tanto al sitio desarrollado como a la plantilla utilizada.

La entrega por dropbox debe realizarse subiendo una carpeta con la siguiente denominación:

2016_dg3_web-institucional_Nombre-Apellido

Esta carpeta deberá incluir en su raíz únicamente dos carpetas y un archivo html:

• web
• plantilla
• entrega.html

Ejemplo de la estructura de la carpeta:

Mantener las denominaciones mencionadas. El archivo «entrega.html» deberá ser editado para incluir los datos del alumno y los links al sitio publicado y al preview del template utilizado.

Descargar el archivo «entrega.html»

A quien le resulte más fácil subir todo el contenido de la carpeta zipeado, por supuesto que puede hacerlo. Solamente les pedimos asegurarse de que al descomprimir el archivo el resultado incluya la carpeta con la denominación solicitada. Obviamente, el zip deberá tener mismo nombre que la carpeta. Por ejemplo: 2016_dg3_web-institucional_Nombre-Apellido.zip

El plazo máximo para subir los archivos de la entrega al dropbox es el lunes 5 de septiembre a las 18 Hs.

6. Recursos útiles para realizar el ejercicio

Ver trabajos de alumnos de años anteriores

Tutoriales en video necesarios para el ejercicio:

Tutoriales en video para quienes quieran aprender sobre el tema, más allá del ejercicio:

Software para editar código:

  • Brackets (gratuito, para Mac y Windows)
  • Atom (gratuito, para Mac y Windows)
  • Koala (preprocesador CSS gratuito, para compilar LESS y SASS, para Mac y Windows)

Referecia técnica de código para consultar en caso de ser necesario (a quienes puedan leer en inglés, les recomendamos utilizar las referencias en ese idioma, ya que son mejores y más actualizadas que las que están en español):

Plantillas HTML5:

Hosting gratuito: