Una carta de comida online - Wordpress

Para la siguiente prueba, revisar este documento y trabajar leyendo atentamente las siguientes instrucciones:

Es importante que hayas visto todas las experiencias online para trabajar en esta prueba.

Instrucciones

Un día como hoy te contacta un cliente dueño de un prestigioso restaurante de comida italiana llamado Il fonti di modena. Giuilia te comenta que desea crear un sitio web que ayude a sus clientes a decidir qué comerán antes de ingresar, a modo de mejorar los tiempos de espera de su local, los cuales son muy largos debido a la gran fama que tiene Il fonti di modena.

La dueña prosigue contándonos que quiere algo parecido a una carta de comidas, pero digital, la cual contenga todos los productos promocionados en su carta física. Además, ella menciona que esta carta digital debe ser totalmente modificable, ya que sus platos cambian semanalmente.

Tú, al terminar de escuchar le respondes que puedes cumplir con todos sus requerimientos creando un sitio web desarrollado en WordPress, el que podrá mostrar toda la información de la carta de manera dinámica a través de un tema.

Giuilia, muy contenta con tu respuesta, pregunta si necesitas alguna información para crear el sitio. Tú respondes que sí, pidiendo:

• La carta del restaurant
• Información referente a la ubicación, teléfono y redes sociales
• Algunas referencias acerca del diseño del sitio
• Las características específicas que desea para el sitio web
• Imágenes, que quiera agregar para la carta y algunas imágenes referenciales
• Colores y tipografías, logos usados en el diseño de su marca

Ella, responde que al final del día tendrá toda la información que necesitas.

En la madrugada llega un correo de Giuilia con toda el contenido que necesitas. En su interior este contiene lo siguiente:

• La carta del restaurant

  • La carta se encuentra en el interior de la carpeta assets

• Información referente a la ubicación, teléfono y redes sociales:

  • Dirección: Av. Colón 161, Providencia | Teléfono: +56 2 2345 4653 | redes sociales: Facebook: ilfontidimodena - twitter: @ilfontidimodena - instagram: ilfontidimodena

• Referencias de diseño

  • One Page Love
  • Dribble
  • Awwwards

• Características del sitio

  • El sitio debe ser de una sola página
  • También deberá ser editable, es decir, que yo pueda modificar:
    • Nombre del plato
    • Descripción del plato
    • Imagen del plato
    • Precio del plato
  • La carta online deberá tener todos los ítems que se encuentran dentro de la carta física
  • El sitio debe contener algunas imágenes referenciales del local, y sus instalaciones
  • Quiero que al final de la página aparezca la dirección del local, el telefóno, y las redes sociales con iconos que representen a estas
  • Quiero que mis clientes al terminar de ver la carta puedan reservar una mesa

• Imágenes referenciales

  • Las imágenes se encuentran dentro de la carpeta assets/img/platos

  • Las imágenes con fotos del local y sus clientes se encuentran en la carpeta assets/img/sitio

• Colores y tipografías, logos

  • El chico que hizo el diseño de marca me dejó un documento en el que aparecen la fuentes y colores que usó para el restaurante

    • La guía se encuentra en la siguiente ruta assets/img/marca/guide_style.png

  • El logo se encuentra en el siguiente assets/img/marca/logo.png

Al terminar de leer el correo, respondes este, aceptando el trabajo con Giuilia.

¿Qué debes hacer?

Para poder entregar el trabajo a tiempo deberás:

• Crear el diseño del sitio inspirándote en las referencias que envió Giulia (2 ptos)

• Crear el layout del sitio (2 ptos)

  • HINT: Se recomienda usar Bootstrap para crear el layout del sitio

• Traducir todos los requerimientos visuales y técnicos en una maqueta, que luego deberá ser un tema de Wordpress (5 ptos)

• Hacer que el contenido del sitio, o sea, los ítems de la carta sean dinámicos (4 ptos)

Cuando termines el sitio web deberás:

• Hacer un deploy de manera manual (2 ptos)
• Revisar en GT Metrix el rendimiento del sitio subido (0.5 ptos)
  • Hacer un screenshot con el reporte de rendimiento de GT Metrix
• Optimizar el sitio usando herramientas de caché, minificado de archivos JavaScript y CSS y optimizando las imágenes del sitio web (2ptos)
• Revisar nuevamente en GT Metrix el rendimiento del sitio subido (0.5 ptos)
  • Hacer un screenshot con el reporte final de rendimiento de GT Metrix

Desafío avanzado

Integrar un plugin con el que Giuilia pueda gestionar las reservas de sus clientes (5 ptos extras)

• HINT: Usa el plugin booking calendar y lee su documentación para integrarlo correctamente

Entrega desafío

• Crea una carpeta que contenga:

  • Un archivo README con el link del sitio web, junto con los screenshot tomados de GT Metrix
  • La carpeta wp-content y la base de datos en formato .sql del sitio web

• Todos los archivos mencionados anteriormente deberán ser versionados vía push en GitHub, y luego subidos a la plataforma empieza

  ¡Vamos con todo!