Proyecto SCRUD

Lenguajes y tecnología

Por el momento los elementos que aparecen en la siguiente lista son todos los lenguajes que he empleado. Pero cuando adquiera cierta habilidad con Vue.js, Webpack y TDD, los incorporaré al proyecto.

• HTML5
• CSS3
• LESS
• JavaScript
• jQuery
• PHP
• MySQL
• Git

Objetivos y motivaciones

Si tienes interés en saber cómo ha evolucionado la aplicación y qué es lo último en lo que he estado trabajando, lee esta introducción. De lo contrario puedes saltártela e ir directamente al listado de los objetivos principales.

Retomé el proyecto pasado un año desde que presenté la idea original. Durante ese tiempo aprendí CSS orientado a objetos (OOCSS), los componentes atómicos y la nomenclatura BEM. De modo que lo primero que hice fue refactorizar las 3000 líneas de CSS que había escrito en su día. Con ello pude familiarizarme y adoptar rápidamente la nueva manera de escribir hojas de estilo que todas las empresas demandan.

Dado que el código existente relacionado con la lógica y el modelo podía mejorarlo con creces, decidí empezar el proyecto desde cero.

Lo que me motivó a hacerlo fue poder implementar el modelo MVC por primera vez en un proyecto. Para lograrlo me apoyé principalmente en un artículo del blog de Victor Robles y algunas otras fuentes para realizar consultas puntuales.
Fue un cambio de paradigma tan radical como necesario para asegurarme que en el futuro fuese escalable. De modo que ahora está mucho mejor planteado que el proyecto original.

En la misma línea, el siguiente objetivo que me propuse fue refactorizar la lógica del registro y del login para mejorar la seguridad. Reescribí las sentencias de MySQL por consultas preparadas de la extensión PDO de PHP, usé listas blancas e implementé el servicio de Google reCAPTCHA.

Por otro lado amplié la lógica del enrutador para que fuera capaz de detectar desde qué página el usuario había decidido registrarse y/o iniciar sesión. Es una característica que tienen muchas aplicaciones web, y quería sacarle provecho para poder redirigir al usuario inmediatamente tras haber iniciado sesión en lugar de mostrarle siempre la página de bienvenida (exceptuando el primer login).

A continuación me centré en mejorar el menú principal y la versión responsive de la página más relevante de la aplicación debido a algunas carencias notables que detecté en ambos casos.

En este punto volví a analizar el conjunto y decidí qué mejoras y/o cambios quería introducir a nivel de toda la aplicación. Era el mejor momento para hacerlo porque estaba reconstruyendo todas las partes prácticamente desde cero.
Dediqué un tiempo considerable a documentar funcionalidades de la interfaz gráfica de distintas secciones y su lógica para poderlas retomar en el futuro sin tener que dedicar tanto esfuerzo en recordar el motivo que las suscitó ni cómo las concebí originalmente.

Tras ese proceso pasé a rediseñar la base de datos, que es el elemento sobre el que se sustenta todo lo demás. Eso conllevó crear numerosas tablas y modificar las existentes para lograr dos aspectos importantes: poder escribir consultas adaptadas a las necesidades actuales, y cumplir con el nuevo Reglamento General de Protección de Datos (RGPD) que entraría en vigor el 25 de mayo de 2018.

Por último me dediqué a desarrollar otras secciones para poder interactuar entre ellas.
Y finalmente ocupé todo mi tiempo en resolver una de las tareas que más me ilusionaba y que a la vez era de las más complejas para mí: diseñar la lógica y las consultas del buscador avanzado para que fueran 100% personalizables y permitieran filtrar los resultados por múltiples campos, además de poder anidar consultas con condicionales.

Ahora que ya conoces todos los aspectos que he trabajado, voy a enumerarte los objetivos principales y mis motivaciones:

• Aplicar el modelo MVC.
• Ofrecer una gran experiencia de usuario.
• Lograr que los usuarios realicen unas tareas determinadas en tiempo récord.
• Organizar un proyecto grande.
• Introducir mejoras según vaya adquiriendo nuevos conocimientos durante el tiempo que me lleve desarrollarla.
• Ante un nuevo cambio, analizar el impacto que podría provocar a todos los niveles de la aplicación (interfaz, lógica de negocio y base de datos) antes de implementarlo.
• No empezar con una fase del proyecto hasta tener bien definida la anterior para evitar trabajar más de la cuenta cuando surjan cambios a posteriori.
• Mi intención es que esta aplicación se convierta en una página exitosa y se registre la mayor cantidad de usuarios posible. Eso conlleva la responsabilidad de poderles garantizar que internamente estás haciendo bien las cosas. De ahí que haya dedicado tantos esfuerzos en rediseñar la base de datos por completo para cumplir con el RGPD, ajustándola para satisfacer todos los requisitos legales en materia de protección de datos y el ejercicio de sus derechos. Ahora me siento orgulloso de haberlo afrontado, porque podré asegurar a los usuarios que tendrán un control absoluto sobre los datos que deseen compartir y que no guardaré datos que les puedan identificar en el caso de que decidan eliminar sus cuentas.
• Me gusta visualizar mentalmente cómo será la experiencia cuando la aplicación esté terminada, e imaginarme qué podría necesitar en función de las características propias del proyecto. Gracias a ello se me ocurrieron algunas opciones interesantes que por ahora nunca he visto en ningún otro sitio. Desde luego esta circunstancia me da una gran satisfacción y me motiva para finalizar la aplicación y mostrar mis propuestas.

Características y funcionalidades

Tal como he comentado en la introducción, prefiero no mostrar wireframes ni capturas de la versión actual para evitar que alguien pueda desarrollar mi idea. Pero sí quiero dar a conocer qué principios estoy aplicando para llevarla a cabo y qué características tiene y/o están en progreso:

• Aplicación web con métodos SCRUD (Search, Create, Read, Update, Delete).
• Multilingüe.
• Principios de diseño: Mobile first, Content first y Vertical rhythm.
• Gran atención a la accesibilidad y la usabilidad.
• Enrutador y modelo MVC creado desde cero en PHP.
• Basada en peticiones AJAX, procesando la información en formato JSON.
• Uso de tokens de seguridad para generar URLs únicas con vida limitada.
• Uso de tokens con propósitos estadísticos y de scoring.
• Envío de emails transaccionales con tokens de seguridad para las acciones relacionadas con la gestión de los datos personales.
• Interfaz gráfica diseñada cuidadosamente para ofrecer una gran experiencia en cualquier dispositivo.
• CSS: breakpoints definidos para cada componente según sus necesidades, no basados en puntos generales.
• CSS: uso de componentes UI atómicos, como botones, etc.
• Buscador principal basado en AJAX.
• Buscador avanzado con múltiples filtros.
• Vista de la página de resultados de una búsqueda en modo lista y/o tabla, siendo ambos personalizables.
• Los usuarios tendrán la posibilidad de consultar, ordenar y filtrar toda la información que hayan introducido en su cuenta y obtener datos estadísticos de su actividad en un dashboard.
• Incremento de la seguridad con consultas preparadas y mediante validación de los datos introducidos por el usuario contrastándolos con una lista blanca.
• Será gratuita, sin letra pequeña y sin sacar provecho de los datos de los usuarios como moneda de cambio. Los perfiles serán privados por defecto. Los usuarios compartirán públicamente la información que deseen y cuando lo deseen.
• Será abierta, permitiendo que los usuarios que no estén registrados puedan usarla, pero no interactuar.

Galería de imágenes