¿Qué es DevOps?

¿Alguna vez has escuchado hablar sobre DevOps? existen varios puntos de vista sobre el término DevOps ( Develop / Operations ), pero la gran mayoría coinciden en que es una cultura que promueve la comunicación entre el departamento de desarrollo (Development) y el departamento de Administración de sistemas (Operations). 

La cultura DevOps tiene como objetivo acelerar la entrega de software de manera ágil asegurando la calidad del software, todo esto, por medio de buenas prácticas, herramientas de integración de código, pruebas automatizadas, administración de infraestructura, etc.

Las prácticas más populares de la cultura DevOps son las siguientes:

Infraestructura como código: Infraestructura como código es un método de automatización que está basada en prácticas de desarrollo de software. Los cambios realizados a los sistemas y sus configuraciones específicas son bien definidas y capturadas en archivos de configuración (scripts, playbooks, manifests, módulos).

Integración continua ( CI ): La integración continua es una práctica de desarrollo de software mediante la cual los desarrolladores combinan los cambios en el código en un repositorio central de forma periódica, tras lo cual se ejecutan versiones y pruebas automáticas.

Entrega continua ( CD ): La entrega continua es una práctica de desarrollo de software mediante la cual se preparan automáticamente los cambios en el código y se entregan a la fase de producción.

Herramientas DevOps más populares: Red Hat Ansible, Jenkins,Terraform, Chef, Docker, GIt, GitLab, Kubernetes, Nagios, Puppet.

DevOps en BigPink

Nosotros en BigPink adoptamos una cultura DevOps que va desde la configuración de los proyectos, testing y pruebas de integración de código hasta entornos automatizados con despliegue continuo ( continuous delivery ), para ello, implementamos las siguientes practicas y herramientas:

Configuración de proyectos: Todos los proyectos son configurados con GIT como sistema de control de versiones de software, así como el uso estricto de linters para detectar errores de estilo y mantener el código limpio.

Infraestructura como código (IaC): Toda la infraestructura la manejamos como código por medio de configuración de plantillas cloud formation para Amazon Web Services. 

Integración continua (CI): Para la integración del código utilizamos GitLab como plataforma de repositorios privados en donde por medio de Pipelines ejecutamos varias pruebas (build, linters, testing, etc.) para asegurar la calidad antes de que el código sea integrado en el repositorio central.


Entrega continua (CD): Para lograr la entrega continua se automatiza el despliegue de nuestros proyectos por medio de Pipelines programadas en GitLab que se conectan a nuestra infraestructura previamente montada en Amazon Web Services, una vez pasadas las pruebas de integración del código.

Edgar Leyva
www.girasolo.com
www.ThinkBigPink.com

Big Pink

Branding por Girasolo.

Hola soy Edith y hoy te voy a platicar de cómo fue crear la identidad visual de Big Pink, recuerdo que todo empezó cuando Chen nos habló de la nueva idea que tenía en mente y no pude evitar comenzar a bocetar el logo justo en ese momento, llegó repentinamente la idea, lo primero que me di cuenta era que necesitábamos algo muy fuerte, en cuanto a tipografía, pues el nombre conllevaba todo un reto: hacer que no luciera femenino, ya que Big Pink se podría asociar a eso, también que proyectará que se trataba de algo digital y de tecnología, sin quitar toda la parte formal que se necesitaba para que el futuro cliente sintiera esa confianza y seguridad de confiarnos su proyecto.

A partir del aquel primer boceto, comencé a trabajar mi idea, como ya he mencionado antes me gusta crear tipografías desde cero, Big Pink no podría ser la excepción, también tenía claro que tenía que evitar lo orgánico o lo delicado, ya que se necesitaba dar contraste a lo que podías llegar a pensar de primera impresión del nombre, mi inspiración fue a partir de líneas rectas, en concreto de los rectángulos, también quería que el logotipo fuera de fácil visualización en diferentes tamaños y que no se perdiera su legibilidad . Hice énfasis en la palabra Big fuera precisamente eso y la coloque de manera superior, por otra parte Pink estaría en la parte inferior con un tamaño más reducido y así al agruparse forman un rectángulo hecho de mayúsculas dando la sensación de fortaleza sin dejar de lado el toque jovial, algo también que quisiera mencionar son las i que lleva,  están formadas por dos cuadrados que a su vez puedes interpretar por “dos puntos” algo que es muy usado en el lenguaje de los desarrolladores.

A la hora de aplicar el color, ya tenía previsto la inspiración del CMYK, una idea que tuvo Chen y quise implementar, pues concuerdo con lo que él menciona antes, si bien Big Pink trabaja en lo digital nació a partir de una empresa de diseño, el protagonista principal sería el rosa o magenta y acompañándolo el amarillo como contraste, no sólo para hacer alusión a la parte de Pink, también porque quería que en un futuro Big Pink  se destacará de la competencia, ya que previo a esto, hice una investigación y note que había un gran número de empresas que se dedicaban a lo mismo y hacían mayor uso de tonos azules o grises, por lo que jugar con una paleta diferente a lo usual, se haría notar y aportaría una sensación fresca.

El logo y los complementos al ser tan versátiles se prestan para hacer diversas variaciones, según sea necesario, ahora sí, para hablar de lleno en los complementos de esta imagen, quería formas bastante sencillas, buscaba la limpieza y claridad en el diseño, usando rectángulos y cuadrados, como plastas de color sin ningún orden en específico, pero si buscando siempre un equilibrio visualmente, en la parte donde predominan imágenes o poco texto el uso de colores y formas se usa bastante, mientras que para documentos o presentaciones que implican más texto el diseño se hace más discreto, procurando el fondo blanco para descansar la vista y sólo dar un pop de color, en la tipografía o en algún un gráfico.

Usos, colores y formas para la imagen de Big Pink

Como tipografía complementaría, se decidió por una san serif, llamada Hack que fue creada para desarrolladores y su función principal es lucir bien siempre en pantalla, al implementarla nosotros en nuestros textos da la sensación de que estas escribiendo algún código,  esto también ayuda a la comunicación que estamos utilizando, que es el uso de algunos elementos propios del lenguaje de los desarrolladores en los textos, no sólo en el uso de algunos signos, como: las comillas, las diagonales, las llaves o paréntesis, también en el uso de los colores para destacar algunas palabras.

Una vez teniendo como base estos elementos , se empezó la creación de diferentes materiales de apoyo, como plantillas para presentaciones, tarjetas, hojas membretadas y la página web que ya esta vigente, también se hicieron algunas fotografías a cargo del equipo de multimedia donde se capturaron algunas escenas de un día laboral y como transcurr.

La imagen de Big Pink se sigue construyendo hasta la fecha, personalmente me ha gustado mucho el resultado que estamos teniendo, los invito a visitar la página web que próximamente se estarán subiendo proyectos  en los que han trabajado mis compañeros.

@edithcd9269f173
www.girasolo.com
www.ThinkBigPink.com

Páginas con React.

Construye páginas, más rápidas y con mejor experiencia de usuario gracias a React y su virtual dom.

React es una biblioteca de JavaScript para construir interfaces de usuario basada en la creación de componentes; su principal característica es el Virtual DOM que es una copia en memoria del DOM real, este Virtual DOM se encarga de hacer actualizaciones hacia el DOM real (La interfaz gráfica que ve el usuario) de manera atómica gracias a su librería diferencial capaz de detectar los cambios que existen en ambos DOM y poder renderizar solo los elementos que han cambiado.

Funcionamiento del Virtual DOM de Reactjs

Con este render atómico react proporciona una UX superior a cualquier Framework o librería para front, asi como un mejor performance al solo renderizar los cambios y no el componente entero dando una sensación de fluidez en tiempo real de la aplicación web.

En Girasolo buscamos la innovación en la tecnología para ofrecer mejores resultados en todos nuestros proyectos, por ello esta vez decidimos implementar react en uno de los nuevos proyectos del área: la página oficial de BigPink(nuestro spin off).

Inicio Página Big Pink
Extracto de la página en su versión Inglés.

Obteniendo como resultado un sitio web ligero para el usuario, que renderiza al instante la información además de ofrecer otras características atractivas para el cliente como: el intercambio de props con lo cual se puede reducir considerablemente el código ya que los componentes son reutilizables, el multilenguaje en la aplicación con lo cual tu sitio web esta un escalón más arriba en los estándares de Ux, además, react es isomorfico lo que significa que: con el mismo código, somos capaces de renderizar tanto en el cliente como el servidor. Por tanto, cuando llega un buscador como Google, con la misma base de código se le puede entregar el HTML con el contenido ya renderizado, lo que lleva a que una aplicación React sea capaz de posicionarse tan bien como una aplicación web tradicional que renderice del lado del servidor, como es el caso de un desarrollo tradicional o un desarrollo basado en un CMS como WordPress, todo esto gracias a Nodejs.

Extracto de la página en su versión Español.

En conclusion React nos permite un desarrollo ágil, ordenado y con una arquitectura mantenible, focalizada en componentes y que nos ofrece un gran performance.

A continuación, se muestra un poco de lo que se logró realizar con ente framework.

Conoce nuestro sitio web: https://www.thinkbigpink.com/

Si quieres conocer por qué nos llamamos BigPink conoce la histora en nuestra entrada anterior.

Cecy Pérez
cecy@girasolo.com
www.girasolo.com
www.ThinkBigPink.com