search

Adalab / project-promo-r-module-1-team-7

http://beta.adalab.es/project-promo-r-module-1-team-7/
MIT License
1 stars 3 forks source link

DIARIO DE TRABAJO #70

Open VirginiaMSordo opened 2 years ago

VirginiaMSordo commented 2 years ago

Archivo para ir documentando el proceso de trabajo.

https://docs.google.com/document/d/1Miz4BCDwjj0ufn2tipwFwOwKKNb2fTBtFF9Z_zQ0TPs/edit?usp=sharing

yarapaz commented 2 years ago

SEGUNDO SPRINT - YARA

RETOS Y LOGROS

  1. COLOCACIÓN DEL LEMA Y CUADRADO:

Colocarlos de manera eficiente fue todo un reto ya que nos dimos cuenta de que no los habiamos planteado organicamente desde un principio.

Finalmente pensamos en utilizar position absolute y no fixed o sticky porque usando las dos ultimas se pegaba al navegador y nos perseguía según bajabamos por la página, característica que no queríamos desarrollar para la misma, y de la otra forma se pegaba a su contenedor y crecía y decrecía con él.

Por ello decidimos pasarlos de elementos aparte a, el lema elemento del contenedor equipo colocandose en su top.

Y el cuadrado elemento del contenedor fortalezas colocandose en su top.

¿Por que no poner el cuadrado en el contenedor equipo? porque se escondería debajo del contenedor fortalezas de manera natural y nos obligaría a utilizar z index mientras que de la otra manera el z index nos lo podemos ahorrar como hicimos con el lema.

  1. POSICIÓN DE LOS ELEMENTOS EN VENTANA: Si veis que los elementos del hero y equipo tienen una position distinta al de los demás elementos es normal: si lo pensais el hero está por debajo del header literalmente, es decir, en vez de seguir el orden clasico del html, nosotros le estamos dando un orden forzado por motivos estéticos. Por lo que todos los elementos del main deben ser movidos

  2. PERSONALIZACIÓN DE LA PÁGINA: Nos hemos centrado también en personalizar nuestro producto para que así el cliente reciba lo más parecido a la página web final de lo que podamos incluyendo toda la información personal como podeis observar. En todo momento hemos seguido la temática de la marca.

  3. ETIQUETA PICTURE EN VEZ DE BACKGROUND IMAGE: ambas opciones serían válidas pero al final decidimos optar por picture para aprender nuevas etiquetas

  4. VERSIÓN TABLET Y DESKTOP:

    • He tenido que tener muchísimo cuidado con los márgenes heredados y calcular correspondientemente los valores y adecuarlo al máximo a la visión del diseño porque a veces se sumaban y aun calculandolos perfectamente daban error por la position de nuestro hero.
    • El lema cambio de estar en equipo a estar en hero: error de visión en la version tablet y mobile
    • En el form tuve que englobar en un div para wrappear el elemento mail y el elemento phone que anteriormente no necesitaba

  5. COLOCACIÓN DE CUADRADITO BLANCO: al intentar probar con transform translate nos daba error asi que sigue en estudio y por mientras utilizamos position absolute que es mas comun .