Este ejercicio consistió en replicar el comportamiento de la pagina principal de slalom.
Aunque de base tenemos HTML, CSS Y JavaScript, se decidió implementar React principalmente para aprovechar el uso de componentes y no estar repitiendo código en algunas secciones como en las cards. Además, nos permite tener un código más organizado y escalable.
De igual manera en un principio se quiso aprovechar los componentes de Bootstrap para facilitar el desarrollo de algunas secciones de la página, pero conforme se avanzo en el desarrollo, esta decisión resulto poco favorable dado que la personalización y adaptabilidad de estos no cubría las necesidades deseadas, por lo que poco a poco se fue optando más por la estilización tradicional. No obstante, el framework sí que represento una ventaja en la primera sección de la página.
Por otro lado, se usó webpack y babel para asegurar que el código funcione en todos los navegadores y estuviera listo para implementarse, puede ver la versión de producción en la rama deploy.
Puede ver el resultado final Haciendo click aquí
La sección principal es la que, por lo general, más tiempo se le dedica, puesto que es la presentación, la primera impresión, y lo que mas gente vera. En un principio se quiso implementar un video de fondo como en la página original, pero hubo problemas al momento de trabajarlo con webpack dado que solo estaba optimizado para imágenes y como el tiempo era limitado, se opto por aprovechar el carrusel de Bootstrap para lograr un resultado similar.
Esta es una de las secciones donde mas se aprovecharon las ventajas de react, para hacer la galería de casos de estudio, se generó la card y el diseño en un componente y se construyó una mini base de datos local en un archivo JSON, posteriormente en un contenedor se llamo a la base de datos y se mapearon los datos en la card para cada objeto, generando así el resultado mostrado a continuación sin necesidad de repetir el código y facilitando la escalabilidad del mismo, puesto que solo se deben de agregar mas objetos al archivo json.
Como se puede observar, una de las prioridades fue lograr que la pagina se viera y comportara lo más similar a la versión original y para lograr esto se usaron las mismas imágenes traídas desde la URL para evitar generar demasiados assets locales.
Esta sección también se trabajó con mapeo de datos, pero el principal reto aquí fue el acomodo de cada componente y el diseño responsive, como se comentó en un principio, las facilidades que brindaba Bootstrap no fueron suficiente para generar el resultado esperado, al menos con el conocimiento actual del framework, si bien en un principio se genero un resultado muy similar usando la grilla de Bootstrap, al hacer la versión móvil, la grilla no se comporto como se esperaba además de que se presentaron problemas con el ancho de los componentes excediendo el ancho de la página. Al final se uso la grilla nativa de CSS.
Creo que esta es la sección que menos importancia se le da, pero que más peso tiene, puesto que es donde se encuentra toda la información importante y de contacto. El principal reto de esta sección fue lograr un responsive tan completo puesto que, como se puede observar, es jugar con cada uno de las secciones y elementos de manera individual para lograr que se adapten a cada tamaño de pantalla.
