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
- Creación de las pantallas con Photoshop.
- Conversión de los Photoshop en HTML+CSS.
- Definición de la estructura de archivos SASS del nuevo proyecto.
- Configuración del SASS con el proyecto Django existente.
- Transformación de LESS a SASS.
- 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.
