Rediseño de una aplicación Web Django: Expedientes.co

En este post mostraré la experiencia del rediseño del sitio web y Expedientes.co, mediante las tecnologías de Sass, Bower , Gulp, npm. 

 

Para empezar, anotaré que Expedientes.co es un proyecto para encontrar Expedientes Judiciales en Colombia, que inició como una Startup y  tuvo su primer MVP implementado con Python/Django por cuestiones de facilidad y un Front-End comprado en Wrapbootstrap, llamado bravo.  A continuación algunas capturas de pantalla de la primera versión del sitio. 

 

 

Tecnologías empleadas para el rediseño

 

• Sass : metalenguaje de Hojas de Estilo en Cascada (CSS). Además de ser un lenguaje de script convertido a CSS.
• Bower : herramienta que permite encontrar proyectos y herramientas de Javascript para administrarlas dentro de nuestros proyectos. Dicho de forma fácil, nos permite descargar y actualizar de forma sencilla paquetes como Jquery, Bootstrap, etc. Para nuestro rediseño facilitó el manejo de todos los paquetes de Frontend como Bootsrap3 y jQuery.
  
• Gulp:  herramienta, en forma de script en NodeJS, que nos ayudó a automatizar tareas comunes en el desarrollo como compilar el Sass.
• npm (node ​​package manager) es un gestor de paquetes de node.js, que descarga y enlaza librerías y/o programas de js. Con esta herramienta descargué herramientas como Gulp.

 

 

Procedimiento del rediseño

1. Creación de las pantallas con Photoshop.
2. Conversión de los Photoshop en HTML+CSS.
3. Definición de la estructura de archivos SASS del nuevo proyecto.
4. Configuración del SASS con el proyecto Django existente.
5. Transformación de LESS a SASS.
6. Cambio de las plantillas de Django con el contenido de los nuevos HTML.

Reto del proceso

El mayor reto encontrado fue pasar de LESS  a SASS . En Swapps preferimos SASS sobre LESS, porque es más completo y su curva de aprendizaje es más corta. Por ello, debemos encontrar la manera de pasar el código a SASS, así que usamos lo siguiente:  https://github.com/brauliobo/less2sass.

Para conocer otras ventajas de SASS sobre LESS, visite:  https://css-tricks.com/sass-vs-less/ .

Y para conocer el nuevo diseño en el sitio, visite: expedientes.co. De igual modo, conozca algunas capturas de la página, a continuación.