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.