:::: 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 2018

  • Jun 28 / 2018
  • Comentarios desactivados en Programa del ejercicio Diseño Web 2018
Diseño III, Programas

Programa del ejercicio Diseño Web 2018

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. Circuela
    Escuela de circo para chicos y chicas de hasta 12 años ubicada en el barrio de Palermo. Brinda un espacio único para el aprendizaje y el desarrollo de los niños a través de sus clases de malabares, acrobacias, equilibrios, elasticidad y acrobacias en telas y aro. Divididos en diferentes niveles por dificultad y grupos reducidos para poder otorgarle a cada niño la atención y cuidado que necesita. Las características especiales de este espacio y sus profesionales le permiten dar además un servicio de clases especiales para un cumpleaños diferente, con capacidad limitada.
  2. Dizzy’s
    Club de jazz y bar en Microcentro con ambientación tradicional inspirada en los años 20, orientado al público en general. Con tragos de autor y suave música de fondo es el lugar ideal para una salida especial. Epicentro de los principales festivales de jazz en Buenos Aires, con shows los viernes y sábados. Reconocidos músicos del ambito local e internacional se dan cita en este club. Escondido en las calles más porteñas de la ciudad, difícilmente sea hallado sin tener su dirección exacta.
  3. Lado B

    Hostel moderno en Barrio Norte, con bar 24 hs., música y eventos especiales, orientado a estudiantes y jóvenes viajeros. Sus instalaciones son limpias, utilitarias, pero coloridas y divertidas, pensadas para la comodidad, distensión y diversión de los viajeros. Destaca su decoración con muebles simples y prácticos, que hacen de cada espacio un lugar para disfrutar. Ofrece variedad de actividades para los huéspedes, para que tengan una experiencia única de la vida en Buenos Aires. Ideal para turistas que viajan solos o simplemente con ganas de conocer gente de todo el mundo.

  4. Jackson
    Barbería ubicada en Las Cañitas, con ambientación basada en un mix de elementos actuales y retro de entre fines del siglo XIX y mediados del siglo XX. Su principal objetivo es brindar una experiencia masculina en servicios de peluquería y barbería, para jóvenes con gran sensibilidad por la estética personal y la estética en general. Brinda un espacio de entretenimiento y distracción, que pone en valor lo «hecho a mano» y el trato personal. Buena música, excelente atención.

Descargar Logotipos

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 y 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:

2018_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: 2018_dg3_web-institucional_Nombre-Apellido.zip

El plazo máximo para subir los archivos de la entrega al Drive es el Jueves 16 de agosto 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)
  • 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