WEB LAS RECETITAS DE ISABELITA CON HTML Y CSS
Esta web fue mi proyecto final del módulo de Desarrollo Web con HTML5 y CSS3 que llevé a cabo en CEI.
Al conceptualizar la idea sobre el tema en el que basar mi proyecto llegué a la conclusión de que era la oportunidad perfecta de poner solución dos problemas que en principio parecerían no guaradar relación: el primero y más lógico era conseguir hacer una web entera a código con mi inexperiencia y, el otro, conseguir habilitar un sitio en el que mi madre pudiera almacenar, compartir y actualizar sus recetas constantemente y de una manera sencilla. Con estas dos premisas sobre la mesa decidí, como ya te imaginas, hacer una página web para mi madre, de esta manera al fin conseguiría que pudiera pasarle las recetas a sus amigas sin tener que copiar la receta cada en un trozo de papel cada vez que quería hacerlo.
Antes de ponerme manos a la obra me di cuenta de el problema que generaba esta idea: mi madre no sabe nada de programación por lo que llegué a la conclusión de que tenía que simplificar el proceso al máximo, para que ella sola pudiera mantener la web actualizada. Para conseguirlo creé una interfaz visual y práctica sin complicaciones, intentando que el HTML fuera lo más sencillo posible para que incluso mi madre pudiera seguir ampliándolo conforme a sus necesidades.
Como has podido ver es bastante sencillo, de hecho, nombré las secciones de manera que ni siquiera necesitara entender que es un h2, solo lo que tendría que incluir en ese apartado. Para facilitar todo el proceso creé una plantilla que incluyera la sección para el título, la foto y el contenido, de esta manera ella solo tenía que copiarla a continuación de la anterior y rellenarla con la información pertinente.
Una vez conseguido mi propósito seguí añadiendo pequeños detalles la web para hacer la navegación más sencilla, uno de ellos fueron las diferentes páginas dentro de cada sección; con esto conseguía, a pesar de tener bastante contenido, evitar tener una página con demasiado scroll .
Además, como podemos ver en el siguiente trozo de código añadí el título para que aparezca en las pestañas y el favicon con el logo.
La web está dividida en 4 secciones: "Entrantes", "Principales" y "Postres" en lo que a las recetas se refiere, seguidas de una sección de "Sobre mí" en la que se incluye una presentación del libro de recetas físico y una presentación sobre Isabel, es decir, mi madre. La sección "Sobre mí" incluye una galería modal hecha con JSS.
Dentro de cada sección de la web encontramos la siguiente estructura:
título de la receta, imagen del resultado final, ingredientes necesarios y pasos a seguir.
Si hablamos de la estructura interna general de cada una de las páginas es de dos recetas por página y una navegación mediante páginas numeradas como recurso para facilitar la navegación y evitar el scroll excesivo.
DISEÑO RESPONSIVE
Esto lo conseguí a través de diferentes media queries ajustándo el diseño a los diferentes tamaños de pantalla con la idea de que se adapte a todo tipo de pantallas; tanto de desktop como de tablet y teléfono.
Una de las principales adaptaciones del diseño que fueron necesarias fue la creación de un menú desplegable. Esto lo hice a través de JSS buscando que fuera lo más sencillo posible pero aún así práctico.
