[SCRUM] Ser Scrum Master Certified y ¡no morir en el intento! (Parte 2)

En la parte 1 de este artículo, mencioné donde encontrar los recursos/material de preparación para los exámenes Scrum Fundamentals Certified (SFC)  y Scrum Master Certified (SMC) disponibles por la empresa SCRUMstudy, bajo la cual yo me certifiqué. Durante mi revisión de artículos para la elaboración del presente, me encontré con algunas preguntas para certificación como Scrum Master que me parecieron “extrañas” pues utilizaban algunos términos diferentes a los que había aprendido con el SBOK, fue ahí que recordé que existen 3 grandes empresas certificadoras de Scrum:

  • SCRUMstudy
  • Scrum.org
  • Scrum Alliance

En el artículo de Scrum Alliance vs SCRUMstudy se muestra un cuadro comparativo de ambas empresas. Uno de los puntos que concuerdo con dicho artículo totalmente es que un verdadero Scrum Master (sin importar por cuál empresa obtuvo su certificación) podrá responder a qué se refiere el Manifiesto Ágil: “Hemos llegado a valorar …:

  • A los individuos y su interacción, por encima de los procesos y las herramientas.
  • El software que funciona, por encima de la documentación exhaustiva.
  • La colaboración con el cliente, por encima de la negociación contractual.
  • La respuesta al cambio, por encima del seguimiento de un plan.”

Dejando ese punto en claro, seguiré enfocada en el Scrum Master Certified (SMC) de SCRUMstudy.

Leer más

[SCRUM] Ser Scrum Master Certified y ¡no morir en el intento! (Parte 1)

Entre los días 1 y 2 de julio de 2017 llevé un Curso Oficial de Scrum en el Instituto Gesap en Lima y cuya experiencia relaté en un post anterior.

Para recordar qué es Scrum: Es uno de los métodos ágiles más populares. Es un framework adaptable, iterativo, rápido, flexible y eficaz, diseñado para ofrecer un valor considerable en forma rápida a lo largo del proyecto [1]. Así que vale la pena aplicarlo en la gestión de nuestros proyectos.

Figura 1 – Flujo Scrum para un sprint (SBOK)

El objetivo de este post es sugerirte material para que inicies su aprendizaje de Scrum para luego estar preparado para rendir el examen de Scrum Master Certified. Quizás te estés preguntando ¿debería certificarme? Personalmente te recomendaría que

¿Por qué?

Actualmente, en el mercado laboral, tanto en Perú como el mundo, existe una demanda de profesionales certificados en Scrum, pues ellos ayudarán a las organizaciones a obtener un mejor nivel en la gestión de proyecto y por tanto incrementar el indicador ROI (Retorno de la Inversión) [2].

Les voy a contar un poco de mi experiencia durante mi búsqueda de trabajo en Lima – Perú. Luego de participar del taller de Scrum, inicié mi búsqueda de puestos de trabajos que envolviera Scrum. Encontré que las principales empresas del Perú estaban/están optando por un enfoque ágil y por tanto requerían de profesionales con la misma visión y con conocimientos de Scrum. En algunos casos como requisito “deseable” y en otros como “obligatorio”. Admito que perdí posibles oportunidades por no certificarme. ¡Ahora ya no! … ¡y tú tampoco!

Leer más

[Front End] Creación de ícono personalizado – ¡Estilo Fontawesome!

¿Qué se te viene a la mente al ver estos íconos?

Seguramente, ya los has visto en alguna página web y reconoces su significado sin importar si tu idioma es el español, inglés o chino, debido a que los íconos se han convertido en un lenguaje universal. Con un simple ícono, representación visual simbólica de un objeto u concepto, nos ahorramos explicaciones largas e innecesarias. Además, si te encuentras en un sitio web, los íconos te facilitan la navegación [5][7].

Ejemplo: El famoso ícono de la “lupa” nos indica que iniciaremos una búsqueda.

En LiOnline buscamos diseñar sitios web enfocados en obtener una positiva experiencia del usuario y los íconos nos ayudan en ello pues hacen que las interfaces sean más intuitivas y amigables es decir de fácil entendimiento por parte de los usuarios.

El sitio web de nuestro cliente BYC Grupo Inmobiliario, empresa de venta/alquiler de propiedades, cuenta con íconos que representan las características que posee una propiedad:

  • Número de habitaciones – ícono de una cama
  • Número de baños – ícono de una ducha
  • Cantidad de fotos disponibles para esa propiedad – ícono de imagen
  • Metros cuadrados – ícono de un plano.

Imagen 1 – Sitio web de nuestro cliente ByC

Imagen 2 – Propiedad en Venta de ByC

Luego de haber entendido qué son los íconos y porqué son importantes, nos moveremos a ¿cómo los implementamos (creamos) en un sitio web. Antes del 2014, los íconos estaban en  *.jpg, *.png u otro archivo de imagen. Siguiendo el ejemplo de ByC, entonces podíamos tener un archivo “cama.png”, o “ducha.png”. ¿Qué problemas nos trae trabajar los íconos como archivo de imagen?

  • La solicitud de mútiples imágenes al servidor, hace que el sitio web se cargue lentamente.
  • Las imágenes pierden resolución/nitidez al aumentar su tamaño
  • Al tener un ícono en imagen, no es posible modificar, por ejemplo, el color. Había que crear la misma imagen pero con diferente versión de color.
  • No se pueden animarse las imágenes fácilmente.

Por tanto, definitivamente utilizar un archivo de imagen para un ícono no era una buena solución [1][4]

Veámoslo de forma gráfica: En la imagen 3, tenemos un ícono de “casa” (no es un archivo imagen) y un ícono de “regla” (archivo tasacion.png), con un zoom adecuado ambos se ven con buena resolución. ¡Ok!

 

Imagen 3 – Íconos para representar los servicios de  ByC

Sin embargo, hagamos un zoom ++++, ¿qué ha sucedido? en la imagen 4, vemos que la “casa” ha mantenido su resolución a pesar de haber aumentado de tamaño, algo que no sucede con la “regla” la cual vemos borrosa.

Imagen 4- Ícono en imagen vs Ícono en icon-font

Por suerte, hoy tenemos una solución para eso: “Icon Font”, el ícono de la “casa” es de ese tipo.

¿Qué es un Icon Font? ¿Cómo lo utilizo? ¿Puedo crear mi propio ícono?, ¡aquí responderemos esas preguntas!

Leer más

[Front End] Dale calidad a tu código JavaScript con ESLint

Si estás en el mundo del desarrollo de software, sabes que cada programador tiene su propio “estilo de programar”. Es por ello, que se recomienda que en un equipo de trabajo defina una guía de “buenas prácticas” de programación para poder tener un código estándar, es decir que cualquier miembro del equipo, o incluso un nuevo miembro, pueda entenderlo con facilidad y que de la sensación que fue escrito por un único programador (¡Ay qué ideal!)

Pongamos un ejemplo: “Creación de variables”

Un programador que crea sus variables con estilo “camelCase“, definirá una variable “idAluno”

Un programador que utiliza “guiones” ( – ) o “guión bajo” ( _ ), definirá “id_aluno”

Y no falta el programador que definirá “variable1” (¿es en serio?¿le pusiste “variable” como nombre?)

Otro ejemplo: Programando en JavaScript

Java, Visual Basic, C# entre otros lenguajes de tipo “compilado”: Necesitan pasar por el proceso de “compilación”, el cual permite encontrar errores antes de ser ejecutados. Los diferentes IDE’s (entornos de desarrollo) como Neatbeans para Java, detectan errores como “la falta del ‘punto y coma’ (‘ ; ‘) al final de cualquier sentencia” o “variable y/o import no utilizado”

¿Qué pasa con JavaScript? él es un lenguaje de tipo “interpretado” o sea no necesita pasar por el proceso de compilación, además que es más “permisivo” lo que hace que el programador esté propenso a errores y que solo los verá en la ejecución [7].

Aquí [8], un ejemplo sencillo de lo que nos permite JavaScript:

Para declarar variables, se usa la palabra clave var.  

// A single declaration.
var count;

Sin embargo, puedes declarar una variable sin utilizar la palabra clave var y asignarle un valor.  Se trata de una declaración implícita.  

// The variable noStringAtAll is declared implicitly.
noStringAtAll = "";

En ambos casos, todo funcionará Ok!.

Lamentablemente, no siempre es así

Por ejemplo, no nos daremos cuenta de variables que no han sido declaradas o estén mal escritas hasta que lo ejecutemos y veamos ese error en la consola del browser:

Resultado de imagen para error in console chrome

¿Pero sabías que se puede optimizar la calidad de nuestro código? La respuesta es la definición de las “buenas prácticas” o reglas a seguir en nuestro proyecto a través de herramientas de Linting, como ESLint para proyectos JavaScript (React, Angular otros).

Así que es hora de parar de decir “¿Por Dios quién programo esto?”, admítelo lo has dicho haha.

Leer más

[Front-End] Creación de un “sticky” footer

Como desarrolladores front-end, de seguro que ya se nos ha presentado este problema durante el desarrollo de nuestros sitios web:

Problema -> “Una sección footer que no se encuentra en la ubicación correcta (parte inferior) debido a la poca información que contiene la página web que visualizamos”

Figura 1: Footer azul se encuentra ubicado en la mitad de la página web (error de ubicación)

Lo que buscamos es que el footer se encuentre siempre “pegado” (sticky footer) en la parte inferior de la página web, sin importar la cantidad de contenido que haya en dicha página.

Solución-> Sticky Footer utilizando el CSS3 Flexbox

Figura 2: Footer azul ubicado en la parte inferior a pesar de no existir suficiente contenido en la página web

Aclaraciones:

En la figura 3, el navegador web (Google Chrome, Firefox, etc) es representado por el recuadro negro. En el lado izquierdo vemos que el “sticky footer” está en la parte inferior de la ventana del navegador pues la página web no contiene información suficiente. Sin embargo en el lado derecho, como existe mucho contenido, éste “empuja” al footer a la parte más inferior posible.

Figura 3 – Comportamiento del Sticky Footer [3]

 

OJO: Sticky Footer es diferente a Fixed Footer

Figura 4 – Los 3 tipos de footers: Default, sticky y fixed [5]

 

¡Vamos a ver cómo lo hacemos!

Leer más

¿Qué es Google Cloud Platform?

Los sitios web de la mayoría de los clientes de LiOnline están alojados en Godaddy pues nuestra experiencia ha sido positiva con dicho proveedor de hosting y dominios. Esos sitios web desarrollados y personalizados con el CMS (Content Management System): “WordPress“, nosotros los consideramos de tipo “informativos” ya que cuentan con una estructura básica para presentar el giro del negocio del cliente:

  • Inicio
  • Sobre nosotros
  • Catálogo de productos/ servicios y/o proyectos
  • Formulario de contacto
  • Blog (Publicación de noticias yo/o artículos)

Godaddy ha sido suficiente para soportar dichos sitios web. Sin embargo, ¿qué pasa con aquellos clientes que requieren soluciones web más complejas y con mayor nivel de seguridad/velocidad?

Ejemplo de sitio web con estructura básica
A inicios del año 2017, un cliente (que no era del área de tecnología) me comentó sobre Google Cloud Platform (GCP) y deseaba tener su sitio web allí. Fue la primera vez que oía sobre GCP, empecé a investigar un poco pero no fui más alla ya que el sitio web informativo de este cliente no necesitaba toda una infraestructura robusta como la que ofrece GCP (o al menos fue la razón que en ese momento consideré mejor). Hoy, julio 2018, surgió un proyecto de migración de un sitio web de Godaddy a GCP, que ¡LiOnline asumió!.
En este punto, seguro ya te estarás preguntando: pero ¿Qué es Google Cloud Platform?.
Si entramos al sitio oficial encontramos 2 mensajes que resaltan las ventajas más importantes de GCP:
“Juntos, nosotros podemos ayudarte a resolver tus problemas más difíciles y hacer crecer tu negocio. Con Google Cloud: nuestra infraestructura es tu infraestructura. Nuestras herramientas son tus herramientas. Nuestras innovaciones son tus innovaciones”
“Creemos que la seguridad empodera la innovación – así que si tú pones la seguridad en primer lugar, todo lo demás fluirá”
“Infraestructura”. “Seguridad” e “Innovación” las 3 palabras que considero clave para entender GCP.

Leer más

Diseño Web: Diferencia entre Wireframe, Mockups y Prototype

En LiOnline, antes de comenzar a desarrollar una página/sistema web, utilizamos algunas herramientas que nos permiten “bosquejar” lo que queremos construir, estas son: “sketchs” “wireframes“, “mockups” y/o “prototipos“. Éstas nos facilitan la comunicación con el cliente pues él puede visualizar cómo quedaría el producto que desea (antes de invertir tiempo en desarrollar) y dar sus comentarios/sugerencias las cuales se traducen en mejoras y/o cambios ¡a tiempo!.

En [1] nos dicen resumidamente cuáles son las ventajas de estas herramientas:

  • Generar una lluvia de ideas (brainstroming) para definir qué expectativas tiene el cliente del producto a ser desarrollado.
  • Ahorro de dinero/tiempo en la fase de desarrollo
  • Describir claramente qué es lo que necesita ser desarrollado
  • Usado para captar inversionistas, primeros clientes y/o co-fundadores, por ejemplo a través de aceleradoras de startups.

Nuestro proceso para el diseño de una página web es el siguiente:

  • Reunión preliminar con el cliente en el que nos cuenta las necesidades de su negocio y cómo le gustaría que sea su sitio web. A mano alzada realizamos un bosquejo de la web y sus funcionalidades, tomamos apuntes y damos sugerencias (Sketch)
  • De acuerdo a los requerimientos levantados durante la reunión preliminar y a la evaluación de los sitios webs de la competencia, proponemos la estructura o esqueleto del sitio web (Wireframe). El cliente podrá evaluarlo y solicitar las modificaciones pertinentes.
  • Luego de aprobado el wireframe, éste es explicado al diseñador gráfico que ¡hará su magia! y nos entregará cómo se verá la web o mejor dicho la representación visual de la web (textos con los tipos de letras y colores que forman parte del branding del negocio, imágenes,  íconos, logos, etc.) (mockups). En este fase, los diseñadores gráficos utilizan sus conocimientos de buenas prácticas de User Interface (UI).
  • Lo siguiente es el desarrollo de un prototipo (prototype), este paso es opcional según [1] [2] y efectivamente en nuestro equipo de trabajo lo hemos aplicado en pocas ocasiones. El prototipo es nuestro mockup pero enriquecido con piezas de User Experience (UX), en donde el usuario puede interactuar por ejemplo dando clic a botones, enlaces, ver animaciones, etc. ¡Ojo! el usuario sentirá que está utilizando la versión final sin embargo aún no hay funcionalidad, pues solo son piezas conectadas entre sí [2].
  • ¡Finalmente viene lo bueno! ¡A programar! y aplicar todos nuestros conocimientos de HTML, CSS, jQuery, php, frameworks, bibliotecas, APIs o más! ya sabiendo cómo debe verse y cómo debe funcionar.

Ejemplo de nuestro cliente BYC – Grupo Inmobiliario

Seguro que hasta este punto ya tienes una idea en qué se diferencia cada término. A continuación vamos a ver más a detalle qué son y qué softwares existen para crearlos.

Leer más

¡Alerta de Trackeadores!

Hoy me llevé un susto.

Alguien me dijo prácticamente “Sé lo que hiciste el verano pasado”. Las personas se están poniendo paranoicas con tantos plugins que para mí es una invasión a la privacidad.

Tener por cerca a una persona acosadora es realmente de temer. Alguien que sabe si leíste o no su e-mail, alguien que hace un seguimiento exhaustivo de tus movimientos en la red, no tiene otro nombre que … no lo diré mejor, cada quien coloque el adjetivo que desee.

Whatsap y Facebook poseen configuración de privacidad: Deseo mostrar mi hora de conexión? Deseo dar a conocer si leí o no el mensaje?. Bueno, Facebook no es un buen referente de seguridad de información (plop!), pero por lo menos sabemos que existe la opción.

Yo he probado Mailchimp y sí puedo hacer un tracking de los e-mails de campaña y existe un disclaimer para indicar ello. Sin embargo, que alguien sepa cuántas veces entraste a su mensaje (no necesariamente leer, porque ya estoy acostumbrada a “ver” sin leer cuando son cosas absurdas o SPAM) y que encima te diga “yo sé que me lees”: es de terror.

Alguien creó MailTrack, oh sí, alguien sin que tú lo hayas decidido (ni siquiera tener la oportunidad de aceptar o rechazar) sabe todos los movimientos que hagas sobre su mensaje

Pero se puede evitar 🙂

Leer más

Tip: Instalación de StarUml en ubuntu

A continuación unos pasos para instalar StarUML en ubuntu vía terminal de comandos. Sin algunos de los pasos (instalación estándar), no me fue posible instalar en mi computador, es por ello que hago una lista de todos los pasos que seguí para instalar con éxito:

1. Descargar el paquete libgcrypt11_1.5.3 (aquí)

2. Descargar el paquete de StarUML (aquí)

3. Instalar el paquete libgcrypt11_1.5.3 con dpkg

sudo dpkg -i libgcrypt11_1.5.3-2ubuntu4.2_amd64.deb

4. Instalar StarUML con dpkg

sudo dpkg -i StarUML-v2.7.0-64-bit.deb

5. Ejecutar el comando

sudo apt-get -f install

[SCRUM] Aplicando Scrum en Trello

En un post anterior, expliqué cómo aprendí Scrum y los aspectos/principios/procesos de este framework. En este nuevo post, hablaré sobre 3 elementos importantes que forman parte de Scrum:

  • Kanban
  • Product Backlog
  • Sprint Backlog

Además les comentaré sobre una herramienta de colaboración online : Trello.

Recordemos que Scrum busca entregar resultados de forma rápida y con menor costo, enfocándose en entregar productos y/o servicios que se alineen las necesidades del cliente. Cuando una organización decide implementar Scrum, es importante que todas las partes interesadas tengan mente que “el cliente está en primer lugar” [1]

Scrum se rige de 3 grandes pilares: Transparencia, Inspección y Adaptación

  • Transparencia: Cada aspecto del proceso debe definirse por un estándar común a todos los integrantes del equipo
  • Inspección: El avance hacia el objetivo fijado es responsabilidad de todos los integrantes del equipo
  • Adaptación: La inspección constante, garantiza la capacidad de respuesta y la subsiguiente adaptabilidad del framework

Trello es un software que permite organizar proyectos en tableros. Permite ver cuáles son las tareas que se llevan a cabo, quién trabaja en una tarea determinada y cuál es el estado de un proceso [3]. La característica de Trello de trabajar con tableros permite automatizar el Kanban Board, el cual es utilizado frecuentemente en proyectos Scrum.

El Kanban Board es una herramienta que permite la visualización de nuestro trabajo y flujo de trabajo (workflow) para así optimizar dicho flujo. Por ejemplo en la imagen siguiente se muestra un Kanban Board básico con 3 pasos de nuestro flujo de trabajo, representados por columnas o “lanes” [4]

“To do”, “Doing” o “In progress”, “Done” (Por Hacer, En Progreso, Hecho)

Las tareas son representadas por “Kanban cards” (tarjetas, en tableros físicos son comúnmente post-it). Estas tarjetas son colocadas en los lanes de acuerdo a su estado actual de trabajo.

El Kanban Board es un gran aliado en la promoción de la transparencia del Scrum. Pues, cuando un equipo Scrum posee un Kanban Board, todos consiguen fácilmente visualizar el flujo de trabajo, cuales tareas están siendo ejecutadas, quién es responsable de qué, en que situación se encuentra cada tarea, etc. Existen mayores posibilidades de éxito cuando existe mayor transparencia en el proyecto ya que el equipo se siente más involucrada y aumenta su nivel de confianza. [5]

Ahora, profundizaremos en los artefactos de Scrum y cómo reflejarlos en Trello para ya dar inicio a nuestro proyecto Scrum

Leer más

1 2