El objetivo de este ejercicio es demostrar que se han adquirido los conocimientos y habilidades necesarios para maquetar correctamente una página web, así como el uso de herramientas y tecnologías que faciliten esta labor, y/o que amplíen su funcionalidad y alcance.
- Maquetación de una landing page, según las especificaciones e instrucciones facilitadas para ello.
- Uso de las tecnologías y técnicas aprendidas durante el curso.
- Uso de GitHub, como servidor de control de versiones con distintas ramas de desarrollo.
- Uso de GitHub Pages como servidor donde alojar y publicar nuestra página web.
El ejercicio se desarrolla durante 4 días, con un fin de semana de por medio. Aunque el enunciado nos fue entregado el jueves por la tarde, ese día tan solo le eché una ojeada para saber de qué se trataba y poder hacerme ua idea de los tiempos que necesitaría y utilizaría. Fruto de esa primera revisión establecí los siguientes plazos y objetivos:
- Revisión y repaso del temario menos asentado, a fin de reforzar mis puntos débiles:
- Ramas de GitHub.
- Posicionamientos.
- Animaciones y transiciones.
- Comenzar con la maquetación de la página.
- Continuar con la maquetación de la página, y terminarla.
- Añadir alguna transición sencilla a elementos como los enlaces y los botones.
- Comenzar a jugar con las transiciones y animaciones.
- Investigar las animaciones y transiciones más a fondo, buscando la forma de conseguir los efectos deseados para mi página extra (huevito de pascua).
- Maquetar la página extra "Experiments", e implementar en ella animaciones y transiciones más complejas.
- Subir todo a GitHub Pages y comprobar que funciona correctamente.
- Corrección de los issues de la evaluación intermedia.
- Revisión completa del código.
- Consulta y petición de soporte con el profesorado para la resolución de pequeñas dudas y errores menores.
- Corrección de errores menores
- Redacción del archivo Readme.
- Última subida del código a GitHub.
- Comprobación final de que todo funciona.
- Slack
- Zoom
- Visual Studio Code
- GitHub
- GitHub Pages
- Firefox Developer Edition
- Zeplin
- Sketch
Cuando me puse a analizar el ejercicio me di cuenta de que había algunas inconsistencias en el diseño que se nos presentaba a través de zeplin, sobre todo en cuanto a las distancias que separaban los elementos y los tamaños de algunos de ellos.
Mi intención entonces fue crear una página, que se ajustara menos a las especificaciones dadas, pero que fuera más funcional y estéticamente más atractiva, con distancias uniformes entre elementos similares, mismas distancias hasta los margenes, elementos centrados en la horizontal, etc. En definitiva mantener una cierta coherecia en el diseño.
Lo consulte con una persona del profesorado, y tras darme el visto bueno, es así como he desarrollado la página, por lo que habrá diferencias respecto a lo pautado en Zeplin, pero son diferencias valoradas de forma consciente, y decididas en función de un objetivo.
Con este mismo fin, he añadido cierta fluidez a algunos elementos, de modo que se muestren correctamente en todos los tamaños de pantalla, y en ningún caso lleguen a colapsar o a rozar los márgenes.
He decidido crear una página extra "Experiments", en la que poder jugar y practicar con elementos y efectos que me parecen interesantes e importantes, pero que no estaban en el ejercicio original. Se accede a ella mediante el icono del huevo que hay en el footer, al lado de los de las redes sociales
La idea no ha sido en ningún momento conseguir un resultado excelente, ni visualmente ni en cuanto al comportamiento de la página, y tampoco tener un código limpio y bien estructurado (aunque con más tiempo sí habría sido así), sino tener un espacio de experimentación en el que poder jugar con elementos que me eran menos conocidos, como los formularios, y en especial las animaciones y transiciones.
He estado muy tentada de meter alguna línea de js para conseguir ciertos efectos, sobre todo modificar un elemento (el header) en función del scroll de la página. Sin embargo he decidido no hacerlo dado que no es algo que hayamos estudiado aún. Desafortunadamente con Pure CSS no parece que sea sencillo de conseguir, al menos de momento.
Me he enfrentado algunos retos que no me esperaba. En especial al de quedarme en blanco ante algo que sé hacer (aún con mucho margen de mejora) por la sencilla razón de que fuera una prueba técnica. También a la toma de decisiones ante elementos que no estaban del todo definidos o comportamientos que no habían sido especificados (breakpoints, anchos máximo, flexibilidad de ciertos elementos, etc.)
Y finalmente, espero que la experiencia con el experimento del huevo de pascua resulte divertida y agradable. A mí me ha servido para aprender, de modo que estoy satisfecha.
¡Saludos, Gusaxo!
Satory ^^