Universidad de Palermo

Materiales y Procesos I | Producción Digital I - 2021

Wenceslao I. Zavala

Guía de Trabajos Prácticos 2020

[TP 1] - [TP 2] - [TP 3] - [TP 4] - [TP 5] - [TP 6] - [TP 7] - [Portfolio]

[TP 4] Sitio Adaptable, navegable entre secciones y barra como lista

Consignas: A partir del sitio en HTML que se viene trabajando se debe mejorar la adaptación del sitio a los dispositivos mediante los estilos CSS, agregar una barra de navegación, y que pueda entrar a cada archivo de sección.

Para que sea adaptable, el tamaño para escritorio no debe superar los 1300px, y si la resolución es más pequeña, debe adaptarse al navegador. Escritorio o mayor de 1300px, Tabletas hasta 768px; Móviles hasta 480px.

Para la navegación se deben realizar los archivos de la página de inicio (index.html) y de las secciones principales del sitio. El mismo debe navegar desde la página de inicio a las secciones y viceversa.

La barra de navegación principal debe ser una lista (cada etiqueta <a> dentro de una etiqueta <li>), y los botones deben tener el comportamiento de ROLL-OVER.

El sitio tendrá sólo una hoja de estilo (ej. estilos.css).

Fecha de entrega: Clase N° 5 (16/09/20).
Modo de Entrega: Se sube vía FTP.

 

[TP 3] Sitio Adaptable

Consignas:

A partir del sitio en HTML que se viene trabajando se debe mejorar la adaptación del sitio a los dispositivos mediante los estilos CSS

El ancho de la caja del sitio no debe superar los 1300 px, y si la resolución es más pequeña, debe adaptarse al navegador. Escritorio o mayor de 1300px, Tabletas hasta 768px; Móviles hasta 480px.

El sitio tendrá sólo una hoja de estilo (ej. estilos.css).

A ningún archivo le debe faltar la etiqueta TITLE, acorde a donde se encuentre el usuario.

Fecha de entrega: Clase N° 4 (09/09/20).
Modo de Entrega: Se entrega por el sitio de la materia.

 

[TP 2] Maqueta HTML de INDEX para escritorio a partir del Wireframe TP1

Consignas:

Realizar la maqueta en HTML de la versión de escritorio del Wireframe entregado en el trabajo anterior. El tamaño de pantalla de base para computadoras es de 1300 pixeles como ancho máximo.

Fecha de entrega: Clase N° 3 (02/09/20)
Modo de Entrega: Se entrega por el sitio de la materia.

 

[TP 1] Desarrollo Proyecto de un Sitio a Elección + Arquitectura de la Información/Wireframe

Consignas:
Realizar un proyecto web a elección del alumno. En el informe del proyecto el alumno deberá establecer los siguientes puntos:

  1. Etapa de Estrategia
    1. Objetivo del Sitio (Definir temática del sitio y nombre del mismo)
    2. Necesidades del Usuario (Definir audiencia/usuarios)
  2. Etapa de Alcance
    1. Especificaciones funcionales (Definir el/los objetivos y funciones del sitio)
    2. Requerimientos de contenido (Definición de Contenidos que serán incluídos en el sitio)
  3. Etapa de Estructura
    1. Definir que interacciones podrá realizar el usuario
    2. Arquitectura de la Información (mapa del sitio):
      Realizar la categorización y etiquetado de los contenidos definiendo niveles, secciones y los contenidos propiamente dicho (agrupar y etiquetar contenidos) para definir el Mapa del Sitio (árbol de contenidos).
  4. Boceto o wireframe de la pantalla de inicio del sitio a realizar

Fecha de entrega: Clase N° 2 (26/08/20).

Modo de Entrega: Se sube online.
Se debe entregar en un archivo de word o similar.
El nombre del archivo debe ser el Apellido del alumno/a. (Ej.: zavala.doc).

 

Normas de Presentación

Muy Importante: en los trabajos prácticos se evaluará tanto el contenido como su presentación. Se evalúa también si el trabajo tiene errores de ortografía o redacción.
Tanto los nombres de los archivos como de las carpetas de los trabajos que se entreguen deben tener formato para subir a un servidor de Internet. De ser en minúsculas, sin espacios, ni acentos, ni ñ, sólo letras y números. El orden de las carpetas debe ser el explicado en clase.

Las consignas del trabajo pueden cambiar en el momento de ser presentadas al alumno por parte del profesor.