Trabajo Práctico Nº 4
SITIO WEB:
LOCAL GASTRONÓMICO - SEGUNDA PARTE
Este práctico es nuestro comodín 2020!
Vamos a basarnos en el TP3, para no perder tiempo eligiendo la marca, buscando material, imágenes, etc. Directamente vamos a realizar todas las correcciones sobre diseño, estructura, recursos, contenido y navegabilidad que resulten de las devoluciones del TP3 y al mismo tiempo sumaremos el funcionamiento responsivo para que nuestro sitio se pueda visualizar correctamente en múltiples dispositivos.
METODOLOGÍA:
PRIMER ETAPA:
A corregir los errores del TP3
Dependiendo de las devoluciones del trabajo anterior haremos todo tipo de ajustes y mejoras, no se olviden que las correcciones las pueden encontrar en la carpeta de Dropbox y muy importante los comentarios realizados durante la clase.
Ajustaremos todo lo referido al diseño en general, como uso del color, manejo de texto, estructura, comunicación, etc.
Realizaremos correcciones sobre las cuestiones técnicas y la aplicación de herramientas / recursos, en el caso de ser necesario agregar animaciones CSS y efectos de superposición hover y mejorar la navegabilidad.
SEGUNDA ETAPA:
Correcta visualización en múltiples dispositivos
Haremos las modificaremos a nuestro sitio para que funcione de manera responsiva y nuestra estructura se ajuste a diferentes resoluciones de pantalla.
- Escritorio
- Tablet
- Celular
TERCERA ETAPA:
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.
RESPONSIVE:
Para poder lograr que nuestro sitio se adapte a diferentes resoluciones debemos comprender ciertos conceptos básicos:
Viewport:
Es una etiqueta para configurar el espacio que utilizara tu sitio web:
width=device-width define el ancho del sitio web en el dispositivo.
Las otras dos que dicen: initial-scale=1, maximum-scale=1 sirven para definir la escala del sitio web, ¿Te haz dado cuenta que puedes hacer zoom? a esto se refiere con la escala al definir una escala inicial y una maxima iguales te aseguras de que no se pueda hacer zoom, esto es util en sitios web móviles ya que el zoom en estos generalmente estropean la visibilidad del sitio.
Media Queries:
Utiliza la regla @media para incluir un bloque de propiedades de CSS sólo si una determinada condición es verdadera.
Grilla de columnas:
Una cuadrícula de vista sensible a menudo tiene 12 columnas, y tiene una anchura total de 100%, y se encogerá y expandirse a medida que cambia el tamaño de la ventana del navegador.
No olvidar insertar el estilo: * {box-sizing: border-box;} Esto asegura que el relleno y el borde están incluidas en el ancho total y la altura de los elementos.
Ancho máximo:
No olviden indicar un ancho máximo a determinados elementos para que no crezcan mas de lo necesario, como así mismo podemos indicar medidas mínimas. max- min-
Criterios de evaluación y contenido obligatorio:
- Fecha de puesta en linea del trabajo práctico.
- Nombre correcto de archivos y carpetas en el servidor.
- Optimización de imágenes.
- Correcto uso del titulo del documento y favicon.
- Correcta utilización de estilos CSS3.
- 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 Lightbox y Slideshow
- One page scroll (todas las secciones en un solo html) y Header en posición fija.
- Organización y estructura responsiva.
- Creatividad y esfuerzo.
- Vinculaciones relativas y absolutas con su correcto destino.
- Diseño 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!
