Trabajo Práctico Nº 4
SITIO WEB RESPONSIVE:
LOCAL GASTRONÓMICO
INTRODUCCIÓN:
Este ejercicio consiste en crear un sitio web RESPONSIVE para un local gastronómico a elección, en el caso de estar desarrollando una identidad gráfica sobre el mismo rubro les aconsejo utilizarla para este práctico.
Evaluar la comunicación, diseño y contenidos correctos dependiendo del rubro seleccionado. Pensar bien el funcionamiento y la navegabilidad tanto desde el usuario como de la empresa seleccionada.
Estructura mínima recomendada:
Para este trabajo práctico vamos a utilizar una cantidad especifica de secciones y deberemos cumplir con ciertas divisiones de estructura, les dejo las 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 y scroll smooth.
- Vínculos a redes sociales.
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.
Las secciones obligatorias son:
- INICIO: Slide de 3 imágenes con información como texto y botón.
- SERVICIOS: 3 columnas
- CARTA/MENÚ: 4 columnas
- NOSOTROS: 2 columnas
- SECCIÓN LIBRE
- CONTACTO
Recuerden utilizar algunos elementos embebidos y Lightbox en algunas imágenes.
Footer:
- Footer: pie de página con información adicional como redes sociales, menú simplificado, datos de contacto, etc.
RESPONSIVE:
Diseño responsivo
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 y mínimo:
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-
METODOLOGÍA:
PRIMER ETAPA: FIGMA
Selección de tema y bocetos
- Elegimos el emprendimiento gastronómico sobre el cual vamos a realizar el sitio web, evaluamos la comunicación y recopilamos toda la información posible.
- 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.
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.
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!
Este método de acceso es cada día mas común en bares y restaurantes, el mismo permite reemplazar el menú tradicional impreso abaratando costos de impresión y actualización de precios constante, pudiendo también permitir mayor interactividad y utilización de promociones o eventos temporales.
Video tutoriales (viejos)
Criterios de evaluación y contenido obligatorio:
- Fecha de entrega y desarrollo de bocetos.
- Fecha de puesta en linea del trabajo práctico.
- 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 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.
- 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.
FECHAS DE ENTREGA
La fecha de entrega del trabajo practico, asi como las entregas de las diferentes instancias de evaluación, serán indicadas en las listas de cada curso, posicionarse sobre las fechas!
