:::: MENU ::::

Cátedra Belluccia

Cátedra Belluccia | Diseño Gráfico 1, 2, 3 y 4 | Universidad de Buenos Aires

Programa del ejercicio Diseño Web 2019

  • Ago 27 / 2019
  • Comentarios desactivados en Programa del ejercicio Diseño Web 2019
Diseño III, Programas

Programa del ejercicio Diseño Web 2019

1. Objetivos

Que el alumno diseñe y produzca un sitio web adaptable a los diferentes formatos de pantalla, para una empresa u organización asignada por la Cátedra.

2. Contenidos

  • Códigos de programación (HTML, CSS, Javascript, PHP, etc.)
  • Tecnologías para el desarrollo gráfico de sitiow Web (jQuery, Bootstrap, plantillas, LESS, 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) y diseño de interfases gráficas (UI).
  • SEO (optimización del código para motores de búsqueda).
  • Navegabilidad, usabilidad, interactividad y accesibilidad.
  • Diseño responsivo.

3. Requerimiento

Cada alumno desarrollará un sitio web adaptable (responsive), de carácter comercial/persuasivo, para una empresa u organización que le será asignada. 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.
  • Un listado de servicios o experiencias que la empresa brinda, que puede incluirse en la página principal.
  • Una página modelo de uno de los servicios que la organización/empresa ofrece.
  • Un formulario de contacto (puede ser un popup, una página indepentiente o una sección en las diferentes páginas del sitio, según convenga al caso).

A continuación se describe el perfil de las organizaciones para las que se requiere el diseño de un sitio web:

  1. SENZA
    Un Instituto de Yoga ubicado en el barrio de Palermo donde se enseña y difunde la práctica del Hatha Yoga. Cuenta con clases grupales divididas según el tipo de intensidad (suave, intermedio, fuerte) y clases individuales. Se dictan ademas clases especiales de Ashtanga Yoga para alumnos avanzados e instructores.
    Sus instalaciones cuentan con la calidez y simpleza necesarias para desarrollar esta practica, así como también un espacio para adquirir productos para la vida saludable que profesan.
  2. OCONNOR
    Cervecería 100% artesanal donde producen y comercializan cervezas rubia (Pale Ale), roja ( Scotish Ale) y negra (Porter) entre otras ademas de canillas invitadas que varian mes a mes.
    La elaboración se lleva a cabo en el local y puede ser visitado.
    Cuenta con la posibilidad de alquilar choperas así como también de recargar y comprar tu growler.
    En su local del barrio de Caballito podrán ademas compartir comidas para picar con amigos.
  3. MUSICALIA
    Escuela de música para niños y adolescentes (de 4 a 15 años) donde se dictan diversos talleres tanto de iniciación a la música y al canto, como también de instrumentos como guitarra, violin y piano.
    Sus instalaciones están diseñadas brindando un lugar amplio y abierto, ordenado, estético, simple, real, donde cada elemento tiene su razón de ser para el aprendizaje de los niños.
  4. HOOPS
    Heladería Boutique ubicada en el barrio de Belgrano. Cuenta con una selección de sabores creados específicamente por sus dueños con productos 100% naturales y de calidad premium, capaces de producir diversión y placer en quienes los prueben.
    Su local moderno y colorido es la principal atracción de grandes y chicos.

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 constará de 2 partes:

ENTREGA OFFLINE: se entregará un panel tamaño A2 montado con el preview del sitio web completo con la adecuación a las diferentes pantallas.

ENTREGA ONLINE: estará compuesta de dos partes:

  1. Subir el código completo del sitio y el código de la plantilla utilizada via Drive.
  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. Para que no queden dudas sobre la carpeta que necesitamos, es solamente la que incluye la home (página de inicio) del sitio y las carpetas css, js, etc. Cualquier otra carpeta fuera de esa carpeta principal del sitio, no debe formar parte de la entrega. Esto aplica tanto al sitio desarrollado como a la plantilla utilizada.

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

2019_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 «entregaWeb.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: 2019_dg3_web-institucional_Nombre-Apellido.zip

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)
  • Sublime Text (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:

Please activate some Widgets.

Cátedra Belluccia | Carrera de diseño gráfico | FADU | Universidad de Buenos Aires