Trabajo Práctico Nº 1

PORTADA WEB:

LIBRE - PERSONAL - REPRESENTATIVO​

Este ejercicio consiste en crear una portada por la cual se podrá acceder a los trabajos prácticos que se realicen durante toda la cursada.

Nos servirá como introducción para la generación de estructuras mediante HTML y CSS, tipos de archivos, acceso y organización del servidor.

METODOLOGÍA:​

PRIMER ETAPA:

Pienso, luego diseño!​

  • Boceto rápido de estructura y funcionamiento, Wireframe!
  • Boceto final en Figma.

Al realizar los bocetos puedo determinar el funcionamiento y la navegabilidad de la portada.

Establezco cual es la función de la misma y de este modo logramos también una jerarquización de la información y los elementos dentro de una estructura coherente.

El boceto nos será muy útil para planificar la estructura y ganar tiempo al momento de la construcción!

SEGUNDA ETAPA:

Orden, planificación y armado

  • Creación de sitio y carpeta raíz en Dreamweaver.
  • Optimización de imágenes en Photoshop.
  • Utilización de etiqueta DIV para generar contenedores.
  • Aplicación de estilos mediante CSS.
  • Vinculaciones.

TERCERA ETAPA:

Puesta en marcha!​

Subir el sitio al servidor y realizar un control general, verificar la correcta visualización del favicon, imágenes, titulo del documento y chequear el correcto funcionamiento de los vínculos.

Criterios de evaluación y contenido obligatorio:

  • Fecha de entrega y desarrollo de bocetos.
  • Fecha de puesta en linea del trabajo práctico.
  • Envío en tiempo y forma de los datos de acceso por FTP, dominio y proyecto de Figma.
  • Nombre correcto de archivos y carpetas en el servidor.
  • Optimización de TODAS las imágenes.
  • Correcto uso del titulo del documento y favicon.
  • Botones que indiquen claramente los trabajos que se encuentran entregados, ya sea por atenuación, diferenciación, efecto hover u omisión.
  • Información completa del alumno: apellido, nombre, año, curso, año de cursada, email de dominio propio, etc.
  • Foto actual o ilustración del rostro del alumno para su identificación.
  • Vinculos a redes sociales, email y proyecto de Figma.
  • Diseño y maquetación en general: jerarquización de la información, manejo texto, legibilidad, composición, manejo del espacio,  uso del color, contraste, etc.

Fecha de entrega de boceto y trabajo final en la lista general de cada curso, posicionarse sobre las fechas!