Cada día salen mejoras o nuevas tecnologías, cuyo objetivo es facilitarnos la vida. En el mundo de la tecnología entendemos que si no nos adaptamos a los cambios y nos montamos en el tren de esta revolución, nuestra empresa perderá terreno y en consecuencia su fracaso al final del camino.
Pero esa no es la única razón, el factor clave es aprovechar las herramientas disponibles y a nuestro alcance para continuar con el crecimiento y madurando la organización. Cada compañía se maneja de maneras distintas pero al final, existen razones generales para el rediseño del sitio web, con las cuales muchas empresas se sentirán relacionadas, entonces
###¿Por qué una organización debe rediseñar su sitio Web?
Para entrar en contexto, podemos analizar el caso de [Banvivienda](https://www.banvivienda.com/es), donde nuestro cliente decidió rediseñar el sitio para lograr una mejor experiencia a sus usuarios a través de módulos de calculadora de préstamos y mejorando la forma de mostrar la información.
En el caso de Rootstack, continuamos con el proceso de rediseño de nuestro sitio web, ya que como empresa de desarrollo, debemos transmitir las posibilidades, beneficios y escalabilidad que tienen muchas de las tecnologías con las cuales trabajamos como [Drupal](https://www.drupal.org), [Angular JS](https://angularjs.org/) y [Symfony](https://symfony.com)
Antes de tomar la decisión de rediseñar nuestro sitio web se tomaron en cuenta factores claves que nos diferencian en el mercado y muestran nuestra evolución institucional.
- El enfoque actual y el flujo de información
- La percepción de los usuarios de lo que hacemos como empresa
- Un sitio que represente la marca y organización
- Transmitir lo que hemos hecho y lo que podemos hacer.
Estos factores nos permitieron hacer un análisis interno y entender que debíamos ajustarnos al siempre-cambiante mundo de la tecnología. Para darle continuidad al proceso del rediseño, lo dividimos en 3 etapas.
###Planificación
Ya teníamos un sitio hecho en Drupal por lo que queríamos ver la forma de mantener la administración de la información que le hemos ido dando durante años y construir sobre esta estructura de información que tenemos.
Una de las principales necesidades era identificar como agrupar los servicios, tecnologías y soluciones de la compañía en distintos canales. Una vez definida y teniendo en cuenta el futuro crecimiento de la empresa, cada canal tenía que sustentar su contenido en base a los servicios y soluciones.
###Estrategia
Con la primera fase del rediseño del sitio buscamos refrescar la linea gráfica del sitio y buscar una mejor manera de poder transmitir lo que hacemos. Con el propósito de aplicar los conocimientos que hemos ido desarrollando para nuestros clientes, decidimos separar el backend del frontend del sitio buscando que el tiempo de carga del sitio fuera mucho más rápido.
Para esto, decidimos usar [Angular JS](https://angularjs.org/) junto con Webpack para el Front-End, y tomando el requerimiento de mantener la administración y la estructura de la información teníamos, decidimos mantener el Back-End en Drupal.
###Desarrollo
Construimos los servicios web para consumir la información y para ingresar información al backend en Drupal. Utilizamos [Services API](https://www.drupal.org/project/services) y Views para construir los servicios que usaríamos para consumir la información: Portafolio, Blogs, Eventos, Testimonios y casos de estudio. Para el formulario de Contacto y el formulario de Carreras construimos los servicios a la medida.
Por la parte del front-end decidimos usar [Angular](https://angularjs.org/) junto con Webpack. La decisión de usar Webpack fue pensando en como el sitio web podrá crecer en el futuro, ya que nuestro objetivo es que el sitio web se sienta más mucho más fluida para el visitante y este bundler precisamente brinda la flexibilidad y robustez que buscabamos.
###Retos
El primer reto es que queríamos cambiar la página de inicio y poco a poco ir migrando secciones del sitio a la aplicación en Angular. Para lograr esto necesitábamos poder seguir viendo el sitio en Drupal pero que fuera la aplicación en Angular que lo cargara, removiendo el header y footer del sitio "viejo". Para esto, implementamos un servicio que se encarga de hacer el llamado a Drupal y cuando recibe la respuesta, remueve y reemplaza cierta información en el HTML del sitio antes de cargarlo.
El segundo requerimiento era que queríamos afectar el posicionamiento en los buscadores lo menos posible. Debido a que la aplicación está construida sobre JS, decidimos usar el servicio de [Prerender.io](https://prerender.io/) para generar una versión en HTML de las páginas del sitio y que los buscadores pudieran indexar ese contenido. Una herramienta útil que nos ayudó a verificar que se estuviera generando bien estos caches y que estuvieran funcionando bien las redirecciones es la herramienta de [GoogleBot Fetch](https://www.google.com/webmasters/tools/googlebot-fetch).
Lo segundo es que quisimos mantener la estructura de URL's que teníamos hasta la fecha y no tener que lidiar con redirecciones. Desarrollamos controladores por cada patrón de URL's y un servicio para que trajera la información de titulo, meta description y meta keywords de Drupal y la ingresara para cada página que se renderize a través de la aplicación en Angular.
Al culminar el proceso de desarrollo, nos encontramos con un nuevo sitio, el cual va a ir creciendo durante el tiempo y que iremos mudando poco a poco a ser un sitio completamente desalocado el Front-End del Back-end. La experiencia ha sido enriquecedora y seguiremos construyendo y mejorandola con nuevos conocimientos que vayamos desarrollando.
Cualquier duda, comentario, si desean realizar un proyecto o simplemente quieren pasar a saludar, no duden en [contactarnos.](http://rootstack.com/en/contact)