Consigna Examen Final
SITIO WEB RESPONSIVE:
trabajo profesional (excluido diseñador gráfico)
INTRODUCCIÓN:
Este trabajo final consiste en crear un sitio web RESPONSIVE un sitio web para un profesional, el mismo queda a elección de cada alumno/a.
La selección de tema es bastante amplia, de tal modo que puedan elegir algo que les guste y los motive, les dejo algunos ejemplos: artista plástico/a, tatuador/a, ceramista, carpintero/a, arquitecto/a, diseñador/a de interiores, ingeniero/a, artista, ilustrador/a, fotógrafo/a, diseñador/a de modas, chef, peluquero/a, abogado/a, etc.
Evaluar la comunicación, diseño y contenidos correctos dependiendo del profesional seleccionado. Pensar bien el funcionamiento y la navegabilidad tanto desde la vista del visitante del sitio como del cliente seleccionada.
Estructura mínima recomendada:
A modo de guía MINIMA les indico una cantidad de secciones y divisiones de estructura, etiquetas, divisiones y contenidos recomendados para que tengan a mano.
Header:
- Header al 100% de ancho y con posición fija, Top y Left:0.
- Div contenedor con ancho 100% y ancho máximo de 950px, centrado para la info del Header.
- Div para insertar el Logo.
- Etiqueta Nav, dentro el menú utilizando <ul> y <li>
- Hover con css para los li a del menú.
- Active funcional en el menú.
- Scroll smooth y scroll-padding-top en el selector html.
- Vínculos a redes sociales en pestaña.
Main:
- Main para el contendido principal del sitio, en el insertaremos las secciones principales.
- Section, un mínimo de 6, para dividir las diferentes secciones del sitio, indicando un ID a cada una, el cual luego utilizaremos para vincular.
- Podemos utilizar fondos de color o con imágenes que abarquen el 100% de ancho, pero recuerden que los contenidos deben tener un ancho máximo de 950px para poder mantener la info dentro de una caja.
Secciones de ejemplo:
- INICIO: esta es la primera sección también llamada Hero Section el famoso Call to action, también puede ser un Slide de 3 imágenes con información como texto y botón.
- SOBRE MÍ: 2 columnas (foto – texto)
- SERVICIOS: 4 / 3 columnas
- PORTFOLIO: 4 / 3 columnas
- COMENTARIOS / FORMACIÓN.
- CONTACTO: formulario de contacto, embebido de mapa, embebido de redes, etc.
Footer:
- Footer: pie de página con información adicional como redes sociales, menú simplificado, datos de contacto, etc.
Recuerden utilizar algunos elementos embebidos, animaciones CSS, efectos hover, Lightbox y diferentes recursos de terceros que puedan aplicar.
METODOLOGÍA:
Primer etapa: FIGMA
Selección de tema y bocetos
- Elegimos el profesional sobre el cual vamos a realizar el sitio web, evaluamos la comunicación y recopilamos toda la información posible.
- Evaluamos los contenidos mediante un MAPA de SITIO.
- Realizamos el WIREFRAME para tener clara nuestra estructura y como esta se comportara de manera responsiva.
- BOCETAMOS el DISEÑO del sitio lo más acabado posible.
- Establezco cual es la función del sitio, de este modo logro también una jerarquización de la información y los elementos dentro de una estructura coherente.
- Nos tomamos un momento para evaluar que información se pretende comunicar y que información buscarían los eventuales usuario.
Segunda etapa: DREAMWEAVER
Comenzamos el armado del sitio en html
- Una vez que tenemos todo planificado, comenzamos a generar la estructura en HTML y aplicamos los estilos mediante CSS.
- Incorporamos todos los recursos requeridos, como slides, lightbox, embebidos, animaciones, hovers, etc.
TERCERA ETAPA: RESPONSIVE
Correcta visualización en múltiples dispositivos
Haremos las modificaremos y ajustes necesarias a nuestro sitio para que funcione de manera responsiva y nuestra estructura se adapte a diferentes resoluciones de pantalla.
- Escritorio
- Tablet
- Celular
CUARTA ETAPA: SUBIR Y REVISAR
Puesta en marcha!
Subimos el sitio al servidor y realizar un control general, verificar la correcta visualización del favicon, imágenes, titulo del documento.
Chequeamos el correcto funcionamiento de los vínculos.
Revisamos la correcta visualización del sitio en diferentes resoluciones de pantalla, recuerden que pueden utilizar el Inspector del navegador para probar el funcionamiento responsivo.
No olviden vincular desde la portada y cambiar el estado del botón indicando la entrega del trabajo práctico.
Criterios de evaluación y contenido obligatorio:
- Desarrollo del proceso y bocetos.
- Nombre correcto de archivos y carpetas en el servidor.
- Optimización de TODAS las imágenes.
- Correcto uso del titulo del documento y favicon.
- Correcta utilización de estilos CSS.
- Tratamiento de textos, jerarquía, legibilidad, redacción, etc.
- Correcta visualización en diferentes resoluciones escritorio/tablet/celular.
- Maquetación semántica.
- Uso de Google Fonts.
- Utilización de recursos embebidos.
- Aplicación de animaciones CSS y efectos Hover.
- Uso de recursos de terceros como Carrusel, Lightbox y Slideshow.
- Organización y estructura responsiva.
- Creatividad y esfuerzo.
- Vinculaciones relativas y absolutas con su correcto destino.
- Vínculos a redes sociales.
- Diseño en general: jerarquización de la información, manejo texto, legibilidad, composición, manejo del espacio, uso del color, contraste, etc.