Consigna Examen Final

SITIO WEB RESPONSIVE:

trabajo profesional (excluido diseñador gráfico)

IMPORTANTE Esto no es un simple trabajo práctico, es una instancia FINAL, por lo tanto el sitio debe estar a la altura de las circunstancias y debe ser el resultado, no solo de lo aprendido durante la cursada, debe ser un trabajo superador!

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.

Debe figurar la leyenda “sitio no oficial” Para evitar cualquier tipo de problemas por el acceso casual de usuarios al realizar búsquedas por internet.

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.

CANTIDAD DE PÁGINAS Dependiendo de nuestros contenidos y la organización de la información podremos hacer un solo HTML, tipo ONE PAGE SCROLL, pero tendremos que tener en cuenta que ciertas secciones mas nutridas de contenido - como la parte de portfolio, estudios, etc. - puede ser más acertado realizar sus propios archivos HTML.

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.

VINCULAR DESDE LA PORTADA! El final debe estar vinculado correctamente desde la portada.

QUINTA ETAPA: GENERAR QR

Broche de oro!

Por ultimo vamos a generar un código QR para acceder a nuestra web de manera rápida!

Es un lindo toque a la hora de presentar el final en la mesa de examen!

EJEMPLOS ALUMNOS/AS:

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.