-
Nowadays Mobile Testing is so important to ensure Quality, but one of the most common problems is the speed of an automated test. There’s no point in automating a set of test cases if the execution time of a single Automated Test is more than one or more Manual Tests.
This problem is really common when automating Android Test Cases using Appium and UIAutomator or UIAutomator2, one solution is to use “Espresso Driver” but requires:
- App has to be an Android Native.
- It’s important to have the source code of the App.
But most of the time, Companies doesn’t always provide the source code (Commonly if the App was made by a third-party) or the App’s development is with a No-Native Android App using external frameworks as React-Native.
In these scenarios, there’s also another big problem, not all developers use unique and fast locators while developing an App, whether for Android or IOS like the usage of IDs. Most of the time we have to deal with XPaths, that is not only not recommended, due to the change of the DOM’s structure but also are extremely slow when are processed by Appium’s most common drivers like UIAutomator and UIAutomator2.
Here is where TestProject comes to help, even though I don’t recommend using the UI Interface of TestProject for big Projects because of the lack of maintainability and scalability. Using the UI of TestProject has a lot of dependency on the tool itself because it’s more focused on the “No Coding” Framework. Later on, if there’s a feature or functionality that TestProject doesn’t provide, we’re going to start coding, which it’s going to be more difficult to adapt the code generated by TestProject and adapt it to our necessities.
Anyhow, TestProject comes with an SDK for Java and Python, which easily (there’s almost none of the documentation) to integrate with our code to avoid using Appium and UIAutomator.
- We need to register in TestProject Web Page at https://testproject.io/ and Download the TestProject Agent.
TestProject Agent is available for Windows, Mac OS X and Linux (It’s also available in DockerHub). 2. To be able to run the Agent, we need to get our “Developer Token”, to get it, go to “https://app.testproject.io/#/integrations/sdk”, save this token for later.
3. In a Maven Project, let’s add these new dependencies, “io.testproject”, “org.slf4j” and “org.seleniumhq.selenium”. It’s also important to use the last version of Appium, there’re some libraries problems if the last version of Appium is not used.
This are all the dependencies used in this project. 4. In the class we create our old driver, in this case, it’s “Setup”, let’s remove Appium import and replace it with “io.testproject.sdk.drivers.android.AndroidDriver.
**Modify the Driver.
5. It’s important to add an environment variable called “TP_DEV_TOKEN” with the obtained token in Step 2, under Environment Variables > New System Variable.
6. Let run the TestProject Agent, by clicking on TestAgent.exe.
7. Now let’s run our test and see the performance improvement!. (Don’t forget to change the type of the new Driver in all classes.
In this basic example, there’s no much improvement on the performance and speed of the test, but for complex Apps and Test, the increseace of speed can go up to 50 %. For further information on how to use TestProject consult: “https://testproject.io“.
Links of interest:
Automating with Appium – Selenium and TestNG
The Agile Team Approach
What Scrum Master Certification to Choose?These are some recommended books to learn more:
Any help is welcome to help us keeping this effort alive! PayPal Account BTC (Bech32): bc1qx6f8nczr5ram6d57svlnsfmk5mhu6lsr9q7mxw BTC: 1DDcWbphm1bKMvWruotNKLSM8ypVaHg5Nv ETH: 0x58D137fb142D946bCD815f0ded0fa3b3fE5AB3BF
Angélica Viridiana Rebolloza
Computing Engineer specialized in Automation, working with different tools for Mobile and Web, using languages, tools, and platforms like JAVA, VBScript, JavaScript, C#, Appium, Protractor, UFT (QTP), Selenium, WinAppDriver, Jenkins among others.
Viridiana also has been working using practices like TDD & BDD under Cascade and Agile approaches.
Some certifications include: ISTQB Foundations Certification, SeU Selenium Certified, ITIL Foundations Certification.
No Comment
Nowadays Automation has grown so much, that even working in an environment of just ‘Manual Testing‘, it’s really important to ensure and improve the testing process to include a percentage of ‘Automation‘.
It’s important to mention that there’s impossible to cover 100 % of Automated Test Cases because automation has its limits like the abilities and knowledge about coding in a language programming of the Testers, the most used are Java, Python, and JavaScript, which not all actual Testers have.
Another important key is that not all the types of testing are able to automate like look and feel test.
So to keep it simple, if you want to automate a test you have to take the following points at least to start automating:
1. There are Regression Test Cases that you need to run always before a release.
2. There are flows that are just too large but also repetitive.
3. The scope of the Company is implement Continuous Integration (CI).
There are a lot of automation tools for different platforms like Android, IOS, and Web, but also for different scopes like Selenium, Mocha, Jazmine and Espresso.
Let’s start with Mobile (Android & IOS) using Selenium and TestNG with Java.
Create a Maven Project in Eclipse
For the next example, we’ll be using Eclipse as IDE and Maven of libraries management.
1. Create a Maven Project, it’ll look something like this.
2. In Folder “src/main/java“, create the packages “example.enviroment“, “example.pages” “example.test.base” and “example.pages.base“. This packages will contain our code.
3. Now let’s create the class “Setup” for the package “example.environment“, the class “BasePage” for the package “example.pages.base” and the class “BaseTest” for the package “example.test.base”.
4. It’s necessary to add de dependencies to the “pom.xml” file.
5. In Setup class we create de AppiumDriver that will interact with the device and our test.
To Appium to been able to connect your device is necessary to define the next capabilities: - udid = The ID of the device.
- device_Name = Generic name of the device usually just “My Phone”.
- appPackage = Is the name of the application’s package.
- appActivity = Is the name of the main activity (First Page) that the app loads when the app it’s launch.
- noReset = It’s an extra capability to avoid the information of the app got wiped out each time we run a test.
6. Let’s use ADB to obtain the previous capabilities.
By executing “adb devices” we obtain the UDID of the devices and emulator connected to our computer, in this case, is just one device “7MLNW18B29001109”.
To be able to see the device we must enable de “Developer Mode” and the “USB DEBUGGER”.
For the “appPackage” and “appActivity“, let’s type “adb shell” and then “dumpsys window windows | grep -E ‘mCurrentFocus‘”. It’s important to mention that the app to automate needs to be open on the device when we type the last command.
“com.huawei.android.FMRadio“: is the “appPackage” of the app.
“com.huawei.android.FMRadio.FMRadioMainActivity“: is the “appActivity” of the app.Create our First Test using TestNg
1. In class “BaseTest” we are going to call our driver (Setup class) each time a test is executed that’s why it is going to be called in BaseTest is going to be base for all the tests. With the tag @BeforeMethod, we assure that the Setup class and its method are always called before our tests. Also with the tag @AfterMethod we are going to set the close of the objects open, each time a test finishes. The tag @Parameters is going to help us to send the values from the xml file of TestNG.
2. Now let’s run Appium to inspect the elements of our app.
The host is our computer it can be assigned as 0.0.0.0 or 127.0.0.1 is the local host.
The port can be changed if it’s occupied or we want to run tests in parallel (I recommend separate the ports at least 10 units to avoid conflicts).
Now we have Appium Service running, we can use this console to debbug or use the Eclipse console. 3. Let’s click “Start inspection Session“.
4. Insert the next capabilities, click the button “Start Session“, and then we’ll see the app main activity, in this example the “Radio app“.
5. This main activity it’s going to be the “Principal Page“.
We are going to use “Page object Model” (POM) and “Page Factory” for the implementation of the test.
POM is a framework to organize the elements of an application in a way that it’s easier to understand and to maintain via “Pages”, in each page (Class) it’s defined the elements of only that page, in this example, we are only going to have two pages, the “Principal Page” and the “Radio Channels Page“.6. Let’s inspect and get the locators of the elements of “Principal Page“.
The most common locators are “ID” and “XPath“.
The ID locator is a unique locator that avoids having issues like duplicate elements if it is available de ID locator is much better to use it always.
The XPath locator depends on the DOM of the app source, so it’s not recommended to use it because it can change and also affects the performance because it has to go through all the DOM to find an element.
There are other locators like “name“, “class” and “text“, this locator it’s better to use them as a complement of each other because it’s possible that two or more elements have the same name, class, and text.
In this example:
The previous buttons ID is: “com.huawei.android.FMRadio:id/iv_prev“.
The next button ID is: “
com.huawei.android.FMRadio:id/iv_next“.
The Power button ID is: “com.huawei.android.FMRadio:id/btnPower”. 
The stations button menu ID is: “com.huawei.android.FMRadio:id/action_stations“. 7. Now let’s create our methods in the class “PrincipalPage“, create a package called “example.pages.java” and the class “PrincipalPage“.
The first part of the PrincipalPage consists of the following: - This class extends BasePage that will have the methods used by all the pages.
- In the Class’s Constructor it’s defined the “driver” that we create in Setup.
- PageFactory.initElements: Initialize the elements of the page, this is the main function of Page Factory, at the moment it’s instantiated the class PrincipalPage all the elements of the page are initialized.
- The structure to create these page elements are by the tag @FindBy and the type of locator to use like id, XPath, class, name etcetera; and the value of the locator.
Finally, it only needs the name of the element in our case a WebElement.
The last part is the definition of the methods aka actions of the elements.
In these examples the actions of each element are just clicks, this “Click” method/action is defined by Selenium as other many actions like sendKeys, clear, getText, getLocation, and many others.
The failedMethod and staticWait are not declared on this page because it comes from BasePage.8. Let’s define the actions in BasePage.
In this class is defined the methods “failedMethod” that prints the exceptions encountered on each method of the pages, and the method “staticWait” it converts from miliseconds to seconds, is a static wait to see the execution of the test, without it it’s not possible to see the actions. 9. Let’s create the last package where our Test Suites will be called as package “example.test.java” and class “FirstTest“.
10. The main test script resides in FirstTest.
This is the script of the test, where are just called the methods to make the actions. 11. Finally, let’s create the “PossitiveTests.xml” that TestNG will use to execute the tests and also is where the input parameters are defined.
The parameters are the input data of the test in Setup.
The class name is composed: package_name.class_name.
The methods include name is composed : method_name_of_FirstTest_class12. Lets just run it!
Right click on “PossitiveTests.xml“, select “Run As” and then “TestNG Suite”.
If there’s a problem finding this option be sure to have installed TestNG on the IDE, for more information about the installation of TestNG refers to https://testng.org/doc/download.html.
These are the result displayed in TestNG.
Links of interest:
Speed up Android Testing with TestProject Agent
Upload a File With HTML5
The Agile Team Approach
What Scrum Master Certification to Choose?These are some recommended books to learn more:
Any help is welcome to help us keeping this effort alive! PayPal Account BTC (Bech32): bc1qx6f8nczr5ram6d57svlnsfmk5mhu6lsr9q7mxw BTC: 1DDcWbphm1bKMvWruotNKLSM8ypVaHg5Nv ETH: 0x58D137fb142D946bCD815f0ded0fa3b3fE5AB3BF
Angélica Viridiana Rebolloza
Computing Engineer specialized in Automation, working with different tools for Mobile and Web, using languages, tools, and platforms like JAVA, VBScript, JavaScript, C#, Appium, Protractor, UFT (QTP), Selenium, WinAppDriver, Jenkins among others.
Viridiana also has been working using practices like TDD & BDD under Cascade and Agile approaches.
Some certifications include: ISTQB Foundations Certification, SeU Selenium Certified, ITIL Foundations Certification.
2 Comments
¿Qué es Crunchyroll?
Antes de entrar en definiciones me gustaría recordar y compartir con los lectores más jóvenes, que hasta hace un par de décadas, las personas que gustaban del anime tenían que estar sujetas a los camprichos de la compañías importadoras, quedar bien con el amigo que conseguía ilegalmente el video cassette VHS o Beta con la codiciada película, serie u OVA. Años más tarde las cosas mejoraban, pero había que “exprimir” la última gota de ancho de banda disponible sólo para descargar fragmentos de nuestras series o películas favoritas, o dejar descargando por noches enteras y rezar para que nadie hablara por teléfono. Por fortuna los servicios de streaming de video han venido a cambiar todo eso.
Crunchyroll es un servicio de streaming de vídeo de pago global para anime japonés, aunque también contiene animes chinos y coreanos. Es una plataforma de que transmite anime legal y licenciado a distintos países de toda América. Lo más destacable de la plataforma es su rápida emisión de episodios a sólo una hora después de su transmisión en Japón.
¿En dónde puedo usar Crunchyroll?
Crunchyroll, al igual que otras plataformas de vídeo como Netflix, cuenta con una gran variedad de dispositivos donde se puede ver su contenido que ofrece mediante aplicaciones las cuales se encuentran los siguientes sistemas como Android, Iphone, Xbox, Playstation, etc.
La propuesta de Crunchyroll no es muy original en terminos tecnológicos, ni tiene porque serlo, usted sólo debe pagar mensualmente y tendrá acceso a un amplio catálogo animaciones, incluyendo algunos videos de eventos que por lo general son del gusto del aficionado al anime.
La plataforma ha logrado acuerdos con algunos estudios de anime muy populares como Funimation, lo cual garantiza tener varios éxitos como Dragon Ball, One Piece o Shingeki no Kyojin entre otros, disponibles dentro de la plataforma. Pero si desea experimentar con animes menos populares, puede probar un interesante botón que reproducirá aleatoriamente alguno de los animes disponibles.
¿Hay inconvenientes con Crunchyroll?
Desafortunadamente no encontraremos todos los animes o mangas a los que podría estar acostumbrados el fan hardcore más exigente, ya que, como mencioné, transmite los que son producidos por grandes animadoras en Japón o son más populares. Inclusive títulos de antaño que algunos aficionados de vieja escuela quisieran ver, no se encuentran actualmente disponibles, aunque quizá probablemente en algún futuro se encuentren, ya que la plataforma se actualiza constantemente en otros países de habla no hispana.
La plataforma aun utiliza reproductores Flash y no HTML5, lo cual puede ser un inconveniente para algunos navegadores, pero es funcional y no tuve realmente ningún problema durante la reproducción. El reproductor cuenta con las opciones que comunmente vemos en servicios de streaming como control de volumen, pantalla completa, selección de calidad, autoplay, selección de idioma en algunos casos, subtítulos, y selección de calidad.
Competencia de Neflix, Amazon Prime Video y Hulu
Respecto a Netflix, Amazon Prime Video, Hulu y otros, que como ya sabemos cuenta con una oferta de contenido muy amplia y Crunchyroll no compite con ellos en términos de películas, series y producciones exclusivas, pero lo que si es interesante es que estas plataformas han puesto atención al anime, ofreciendo contenidos que no están en Crunchyroll y son muy interesantes.
Netflix cuenta con un catálogo de anime muy moderado pero interesante. Amazon Prime Video está haciendo lo propio con un muy humilde catálogo pero con buena material el cual yo creo que mejorará con el tiempo. Hulu no está disponible en países de habla hispana, pero lo menciono porque su catálogo es bueno y más amplio que el de Netflix y Amazon Prime Video, lo cual creo que indica una tendencia interesante.
Hoy en día por lo menos, se puede decir que Crunchyroll tiene más amplitud de títulos en lo que anime respecta, y se lleva por muchos a la competencia legal, y si usted es muy fan del anime, la decisión es fácil…por ahora.
Otras funcionalidades
La interfaces de la plataforma, no es la mejor que he visto, sin embargo tiene algunas cosas destacables:
- Cuenta con una opción para marcar animes de interés, pero que quieres dejar para después.
- Ya lo mencionaba antes, pero el ícono con forma de dado, lleva a una serie al azar, lo cual ofrece agradables sugerencias que de otro modo no hubiera visto.
- Reanudar la reproducción de un anime que hubo que interrumpir desde el minuto donde sucedió la interrupción en cualquier otro dispositivo es algo que no es nuevo, pero es útil.
- Para los que son muy susceptibles a los spoilers, los comentarios con estos se pueden ocultar.
Conclusiones
Crunchyroll es un buen sitio si lo que quiere es ver anime en calidad HD, con buenos subtítulos, con acceso en dispositivos móviles y con capítulos que se estrenan a tan solo 1 hora de su transmisión en Japón. Además de que hay personas que opinan que es una buena forma de apoyar, para que más anime llegue a los países hispanohablantes.
Por otro lado, no es un servicio perfecto y a muchos puede no agradarles demasiado por dos razones: La primera es porque es un servicio de paga; y en latinoamerica no todos estamos acostumbramos a pagar por algo que vemos gratis por otras fuentes. La segunda razón es por su catálogo, este no es el más amplio, y sin duda le faltan animes; sobre todo los antiguos.
Creo que los aficionados al anime deben considerar que un servicio como este hasta hace sólo unos años era completamente inpensable, por lo que es de agredecer el tener esta propuesta a nuestro alcance. Desde luego que la plataforma tiene espacio para mejorar, pero aun considerando sus posibles inconvenientes, es un servicio muy recomendable.
Quizá también le interese:
Ponte Trebel, la app que compite con torrentes
🙂
No Comment
¿Qué es una VPN?
El Wi-Fi público gratuito en la cafetería podría no ser tan seguro como parece. Si te unes a la red, podría interceptar e inspeccionar todo tu tráfico web, enviando esa información a fuerzas malévolas. Su ISP, o el ISP conectado a esa red Wi-Fi pública, también desea espiar sus actividades web para vender esa información a los anunciantes. Es por eso que necesitas una VPN o Red Privada Virtual (Virtual Private Network) si desea evitar esos riesgos.
Cuando su VPN está activa, su tráfico web viaja a través de un túnel encriptado a un servidor administrado por el servicio VPN. Eso mantiene su información a salvo de los ladrones de datos con redes falsas. También ayuda a protegerse contra los ISP que venden metadatos anónimos sobre sus hábitos web. Cuando su tráfico sale a la web a través del servidor VPN, parece que tiene una dirección IP en la ubicación de ese servidor. Esto protege su identidad real mientras navega por la Web.
Las VPN a menudo son utilizadas por periodistas o personas que viven en países con políticas restrictivas hacia Internet. También son una forma útil de suplantar su ubicación para necesidades menos serias. El contenido bloqueado por región, como los eventos deportivos o las películas de Netflix que están disponibles en algunos países, pero no en otros, se pueden ver con una VPN porque el servicio suplanta su ubicación. Netflix y otros servicios de transmisión de video pueden ser bastante agresivos para bloquear el uso de VPN como resultado.
Precios y características
TunnelBear es uno de los pocos proveedores que he revisado que ofrece un servicio de VPN gratuito. Sin embargo, el nivel TunnelBear gratuito lo restringe a solo 500 MB de datos por mes. Puede ganar más datos al tuitear sobre la empresa, lo que puede aumentar su límite a un total de 1 GB por un mes. La versión gratuita de HotSpot Shield Elite le sirve anuncios en su lugar, pero no restringe el uso de datos.
Puede pagar TunnelBear utilizando las principales tarjetas de crédito o transacciones BitCoin anónimas.
Con una cuenta gratuita o una cuenta de pago, puede usar hasta cinco dispositivos en una sola cuenta TunnelBear. Eso es promedio para VPN, aunque NordVPN ofrece seis, de fábrica. Tanto TorGuard VPN como KeepSolid VPN Unlimited ofrecen ranuras adicionales para más dispositivos a tarifas mensuales.
TunnelBear tiene software de cliente para Windows, macOS, iOS y dispositivos Android. También ofrece complementos de navegador para Chrome y Opera. También me gustaría ver una extensión para Firefox, pero no tuve tanta suerte hasta ahora. El uso de un complemento de navegador VPN solo ejecuta los datos de su navegador a través del servicio VPN, permitiendo que sus otras aplicaciones funcionen sin restricciones, pero también sin protección. Es una característica que me gusta, ya que ofrece protección para casi cualquier dispositivo que pueda ejecutar un navegador. No es, sin embargo, un sustituto de la protección VPN completa del servicio, que es lo que probé.
Protocolos VPN
Las VPN han existido por mucho tiempo y, como resultado, hay una gran cantidad de formas de crear una conexión VPN. TunnelBear protege su conexión con el protocolo OpenVPN para Android, macOS y Windows. Este es mi protocolo preferido, ya que es más nuevo, más rápido, más seguro y de código abierto.
La aplicación TunnelBear iPhone, mientras tanto, usa el protocolo IKEv2, que es una buena opción para esa plataforma. No puede cambiar qué protocolo utiliza TunnelBear en su aplicación, pero eso está bien para la mayoría de los usuarios.
Servidores y ubicaciones de servidores
Cuando reviso las VPN, considero cuántos servidores ofrece, dónde están ubicados esos servidores y cuántos de esos servidores son virtuales. El primer punto es simplemente un reflejo de la solidez del servicio VPN. Es cierto que una empresa más grande que haga más negocios probablemente tendrá más servidores, y también es cierto, que las empresas harán girar los servidores hacia arriba y hacia abajo según sea necesario. Pero mientras más servidores proporcione una empresa, es menos probable que tenga que compartir ancho de banda con muchos otros usuarios en el mismo servidor.
La distribución de servidores de una VPN también es importante. Cuantas más ubicaciones de servidor tenga un servicio, más opciones tendrá para suplantar su ubicación. Una gran diversidad geográfica también significa que es más probable que encuentre un servidor cercano al viajar al extranjero, que probablemente será más rápido y resistente que uno distante.
Los servidores virtuales son servidores definidos por software. Eso significa que varios servidores virtuales pueden ejecutarse en un solo servidor físico. También significa que un servidor virtual puede configurarse para comportarse como si estuviera ubicado en un país, cuando en realidad está en otro. Si le preocupa qué países específicos manejan sus datos, desea saber cuántos servidores virtuales usa una VPN y dónde se encuentran realmente.
Su privacidad con TunnelBear
La mayor fortaleza de TunnelBear, además de sus poderosos usos, es su postura sobre la privacidad. Tiene una de las mejores políticas de privacidad que he visto, explicando en gran detalle y con un lenguaje sencillo, exactamente lo que recopila y por qué. También incluye secciones de discusión, donde la compañía explica cómo llegó a una decisión en particular. Por ejemplo, una sección de extracción explica cómo la compañía solía reunir los nombres de los usuarios para personalizar las comunicaciones, pero decidió que no era necesario recopilar o almacenar esta información y que su pérdida podía poner en riesgo a los clientes.
La política de privacidad de TunnelBear también establece claramente que no almacena las direcciones IP de quienes visitan el sitio web de la compañía, la dirección IP de los usuarios al conectarse, las consultas DNS de los usuarios mientras están conectadas o cualquier información relacionada con otras actividades de los usuarios mientras usan TunnelBear. Esto incluye otras aplicaciones que pueda estar ejecutando u otros sitios que pueda visitar. Al no tener esta información en primer lugar, no se puede obligar a la compañía a entregarla a la policía, o perder el control de la misma en una violación de datos.
Notablemente, TunnelBear dice que no divulgará, venderá o intercambiará información personal con compañías de terceros. Ese es un compromiso notable que no todas las compañías VPN hacen. TunnelBear utiliza terceros para el procesamiento de pagos, pero esto no es inusual. Además, un representante de la compañía me confirmó que la única fuente de ingresos de TunnelBear son las suscripciones, no la minería de datos o la reorientación de anuncios.
La compañía tiene su sede en Canadá, y un representante de la compañía explicó que no está sujeta a ninguna ley obligatoria de retención de datos.
TunnelBear tiene la notable distinción de haber completado una auditoría de código independiente y publicado públicamente los resultados. El objetivo de una auditoría de código es encontrar fallas potenciales en el diseño de la aplicación, por lo que esta es una buena noticia. Este tipo de evaluaciones de terceros no siempre se llevan a cabo o se hacen públicas, y me alegra ver que TunnelBear considera que la privacidad y seguridad son lo suficientemente serias como para tomarse el tiempo de someterse a la auditoría.
Manos a la obra con TunnelBear
Anteriormente, la aplicación TunnelBear utilizaba una interfaz útil pero anticuada que dependía en gran medida de metáforas visuales antiguas como conmutadores y diales. La compañía se ha alejado de este enfoque y me gusta el resultado. El nuevo cliente es elegante y sutil, construido alrededor de un mapa central del mundo que muestra las ubicaciones de servidores de la compañía. Seleccione la ubicación que desee desde el menú de arriba, active la protección y recibirá una animación sorprendentemente suave de un oso que se aleja de su ubicación actual. Las aplicaciones móviles usan el mismo diseño, por lo que tendrás una experiencia familiar sin importar a dónde vayas con TunnelBear.
A diferencia de otras aplicaciones Windows VPN, TunnelBear incluye un modo minimizado. Esto es más funcional que el atajo de la barra de tareas pero menos gráfico que la aplicación en toda regla.
TunnelBear tiene una actitud irónica que aporta a todos los aspectos de su aplicación. Es encantador y colorido, sin ser dominante ni empalagoso. Por ejemplo, cada vez que se conecta a un servidor VPN, aparece una notificación con un oso con un sombrero representante de ese país.
TunnelBear no tiene muchas ubicaciones entre las que elegir, pero un cuadro de búsqueda de ubicación sería una excelente adición, como lo sería una lista de servidores, con información básica, como carga y tiempo de ping. NordVPN hace un excelente trabajo al transmitir estadísticas vitales sobre sus servidores VPN, y ofrece servidores especializados para conectarse a Tor, transmitir video y más.
La aplicación TunnelBear incluye algunas características avanzadas, como el Modo Vigilant. Esto evita que los datos se escapen a través de su conexión a Internet durante los segundos que demora TunnelBear en volverse a conectar en caso de que se desconecte. GhostBear tiene como objetivo eludir el bloqueo de VPN al disfrazar el tráfico VPN como tráfico HTTPS normal.
Otra característica de seguridad importante es Trusted Networks. Esto es básicamente una lista blanca de redes Wi-Fi en las que confías. Cuando esta función está activada, TunnelBear se conectará automáticamente si la red Wi-Fi en la que se encuentra no es una de las redes en su lista blanca. Me gusta esta característica, pero otras compañías que incluyen una característica similar la enmarcan más claramente al decir que la VPN se conectará en redes que no son de confianza. Aún así, hace el trabajo.
TunnelBear y Netflix
Si bien nadie puede saber que eres un perro en línea, las empresas de transmisión como Netflix sí toman nota de tu ubicación. Eso se debe a que las empresas a menudo tienen que respetar las restricciones geográficas con el contenido que proporcionan. Por ejemplo, si vive en los EE. UU., Debe pagar una suscripción a CBS All Access para ver Star Trek: Discovery. Si vives fuera de EE. UU., Puedes mirar el programa a través de Netflix. Esta es la razón por la que Netflix en particular ha sido tan agresivo al bloquear usuarios de VPN.
Afortunadamente, no tendrás esos problemas con TunnelBear. No tuve problemas para acceder a Netflix desde mi teléfono Android mientras la VPN se estaba ejecutando. También funcionó sin problemas en una computadora que utilizaba el complemento Chrome VPN de TunnelBear.
Después de leer los Términos de uso de Netflix, no tengo claro si la compañía considera que es una violación usar una VPN para cualquier propósito. La sección 6c de los Términos de uso dice que Netflix intentará verificar su ubicación y que solo se le garantiza el acceso al contenido dentro de su país de residencia principal. Lo que está claro es que a Netflix no le gustan las VPN.
Más allá de VPN
Cuando la mayoría de las compañías VPN incluyen bloqueo de anuncios, tienden a hacerlo a nivel de red, bloqueando los anuncios incluso antes de que lleguen a su computadora. TunnelBear no hace esto. En cambio, la compañía lanzó discretamente un complemento de navegador independiente llamado Blocker. Conserva los osos y el encanto de la marca TunnelBear, y está sorprendentemente bien pulido para un plugin de Chrome.
Cuando visita un sitio, la cantidad de anuncios bloqueados aparece en la boca del icono del pequeño oso, como si los hubiera arrancado del cuerpo aún caliente del sitio web. Al hacer clic en la flecha al lado de la sección Bloqueo, se expande una lista de todos los elementos bloqueados. Me gusta esto, ya que te permite bloquear algunos elementos en un sitio web, pero no todos. Podría, por ejemplo, bloquear rastreadores que desafían la privacidad y, al mismo tiempo, permitir la publicación de anuncios. TunnelBear Blocker también maneja elementos más complejos, como etiquetas ultrasónicas. Estos son tonos de alta frecuencia que se reproducen durante los anuncios y que las aplicaciones reciben para indicarles a los anunciantes que se está viendo su anuncio.
Los controles finos, como las listas blancas del sitio, son especialmente importantes con los bloqueadores de anuncios. Algunos bloqueadores rompen elementos en los sitios, lo que los hace prácticamente inutilizables. A veces, aguantar algunos anuncios es el precio a pagar para ver un sitio en funcionamiento.
Del mismo modo, TunnelBear lanzó un administrador de contraseñas llamado RememBear. Actualmente, la compañía ofrece clientes RememBear para Android, iOS, macOS y Windows. Es gratis para usar en un dispositivo, pero si desea la conveniencia de sincronizar en todos sus dispositivos. Descubrimos que es un buen servicio que maneja los conceptos básicos de una manera divertida y caprichosa, con muchos osos animados. Sin embargo, carece de funciones avanzadas de administración de contraseñas, como autentificación de dos factores, uso compartido seguro y herencia de contraseñas.
Prueba de velocidad
No importa la VPN que elija, verá un impacto en su experiencia de navegación web. Eso es porque estás agregando algunos aros adicionales para que tu tráfico salte. Las velocidades son una preocupación perenne para los consumidores, pero procuro y desanimo a cualquiera de usar solo los resultados de velocidad como un punto de referencia para elegir un servicio VPN.
En el mundo a menudo osificado y excesivamente técnico de los productos de seguridad, es alegre y simpático. La compañía siempre ha puesto especial énfasis en el diseño y la experiencia del usuario, que es muy necesario en el mundo de las VPN específicamente y en general en la seguridad digital en general. TunnelBear hace todo eso sin dejar de ofrecer un producto seguro y simple con una red troncal robusta. Es una gran compra, y una que se ha vuelto más convincente desde la última vez que la evaluamos. Lo que es más importante, tiene una política de privacidad clara y sólida (puede estar seguro de que no se cansará de estos osos).
Sin embargo, no es un producto perfecto. El servicio carece del tipo de diversidad geográfica amplia que nos gusta ver. Tampoco tiene servidores especializados, aunque podría argumentarse que evita estos a favor de la simplicidad. Y aunque no creemos que los puntajes de las pruebas de velocidad sean la mejor medida del valor de un servicio VPN, los resultados de las pruebas de TunnelBear están significativamente por debajo del promedio en algunas categorías.
Lo que TunnelBear hace bien es crear un producto de seguridad que realmente usará. Es un producto potente y asequible.
Otras ligas de interés:
Ponte Trebel, la app que compite con torrents
Google Wallet y Android Pay Son Uno, son Google Pay
🙂
No Comment
Descrubriendo Trebel
En 2015, en un viaje relámpago a EU, tuve oportunidad de probar un poco Trebel Music, la cual a primera vista, parecía similar a la versión gratuita de Spotify. Mi primera impresión fue que en un mundo dominado por Apple Music, Play Music y Spotify a este jugador no le esperaba un vida tan larga.
Casi al final de ese viaje me topé con un grupo de estudiantes norteamericanos de entre 16 y 18 años de edad y noté que muchos de ellos usaban la misma app. Mi curiosidad creció suficiente como para acercarme un grupo de algunos de esos estudiantes y preguntar porque usaban esa app, y los muchachos me dijeron:
Oh! se llama Trebel, esta buena porque no tienes que pagar suscripción y puedes escuchar la música offline.
Esa respuesta llamó mi atención y de inmediato comencé a probarla, lo malo es que en ese momento sólo pude probarla algunos minutos, pero lo suficiente para notar que la app utilizaba publicidad para permitir la descarga de música, también me encantó percibir mucho elementos de Gamifición.
Desafortunadamente como la aplicación solo estaba disponible en EU y yo ya de regreso en mi país, no la seguí utilizando y eventualmente la olvidé. Pero en 2018, tuve la sorpresa de enterarme que la app ya estaba disponible en mi país México, y aparentemente con planes de expandirse a otros lugares, así que ahora sí tu ve la oportunidad de probar más a fondo esta app.
Un modelo de negocio diferente
Como mencioné, usted podría pensar que esta app compite directamente con Apple Music, Play Music, TuneIn u otras, y eso puede ser cierto, sin embargó Gary Mekikian, CEO de M&M Media, quienes crearon Trebel, dice lo siguiente:
Competimos con sitios de torrents. Trebel no es un servicio de streaming… No somos un servicio de radio. Somos un servicio de descarga y reproducción.
Con Trebel, un usuario puede descargar cualquier canción del catálogo de la aplicación y luego reproducir esa canción sin hacer streaming. De esta manera, los usuarios tienen la libertad de reproducir cualquier canción que quieran pero sin tener que pagar una tarifa regularmente. De esta manera, Trebel Music imita a los sitios de torrents, pero con esta aplicación, los artistas son recompensados por su trabajo.
Trebel compensa a los artistas llenando la aplicación con publicidad, eso quizá sea de esperarse, pero lo interesante es que cada vez que el usuario ve un anuncio, obtiene una moneda digital o T-Coins, lo que le permite descargar y escuchar más canciones. Esta moneda digital es el insentivo para los usuarios que a su vez ayuda a pagar a los artistas por su música.
El usuario también pude obtener monedas solo por registrarse en la aplicación, por invitar a otros a registrarse, ver videos promocionales y hacer check-in en comercios afiliados, o bien, también puede pagar para no exponerse a toda esta publicidad (¿alguien dijo Gamificación? 🙂 ).
M&M Media trae una solución interesante, debido a que si bien pensaron principalmente en jóvenes que aún no están percibiendo un ingreso, y que son atraidos a descargar música ilegalmente, la verdad es que en paises de economía emergente como el mio, hay mucha gente que no es necesariamente joven pero tampoco quiere o puede pagar por un servicio premium.
Le doy 3.5 de 5
En general, mi experiencia con Trebel Music ha sido positiva, pero ciertamente no perfecta. El concepto único de la aplicación permite a los usuarios escuchar música sin invertir en un costoso plan de datos o esperar por buffering. Sin embargo, al usar la aplicación, la sentí como si se hubieran dedicado más esfuerzos a las características sociales y cosméticas que al factor real de venta de la aplicación, por supuesto esto pude deberse también a que estoy demasiado viejo para estar en el nicho principal de esta app. 😀
Una bonita característica de la aplicación es que cuando tocas una canción, la portada del álbum gira como un disco. Incluso puede interactuar con el disco virtual girándolo hacia adelante para saltar adelante en la canción, o girando hacia atrás para rebobinar.
Esta característica es efectiva, pero hubiera sido bueno tener más interactividad. En un disco real, escuchas un cierto efecto de sonido cuando giras el vinilo manualmente. La falta de este sonido como retroalimentación en la aplicación hace que parezca que falta algo, pero es un detalle perdonable.
En términos de características sociales, Trebel toma nota de otras aplicaciones. El usuario puede seguir a otros usuarios, compartir listas de reproducción con sus contactos dentro de la app e incluso enviarles monedas virtuales, compartir en redes sociales, y todo lo que esperaría a ese respecto. Pero Trebel intenta llevar el tema social un paso más allá, conectándolo con sus compañeros de colegio con la opción Campus. Los estudiantes pueden ver las canciones principales reproducidas y descargadas en su colegio, aunque esta opción por ahora no incluye escuelas Mexicanas ni Latinas, ignoro cual sea el proceso para incluir más colegios.
Este tema de la edad es aun más claro al ver el catálogo disponible, ya que es fácil encontrar los éxitos pop del momento, pero si el usuario desea algo más exquisito de décadas pasadas las opciones no serán tantas, aunque muchas veces el mensaje “próximamente” aparece, y como la app solo tienes unos meses en México, mis esperanzas aún no mueren…de lo contrario siempre está Radio Universal (chiste reservado para habitante de la Ciudad de México).
La aplicación funciona bien la mayor parte del tiempo, pero ocasionalmente se encuentra con un error donde el hacer clic en una canción no la reproduce. También me encontré con el problema de que la descarga se cuelga (no avanza) incluso por WI-FI.
La verdad sea dicha, aún sigo prefiriendo mi stock personal de música guardada en mi teléfono de manera tradicional y el amplio catálogo de Spotify, pero Trebel es útil para álbumes en los que no quiero gastar dinero o que todavía estoy valorando.
Sin embargo, hay que tener en cuenta que Trebel es un competidor nuevo, y seguramente mejorará en el futuro cercano. Los inconvenientes son comunes en cualquier iniciativa nueva, pero me parece que el concepto y el diseño de Trebel hacen que valga la pena la descarga la cual está diponible en la App Store de Apple y Google Play Store.
Otras entradas que pueden ser de su interés:
Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
No Comment
Revelación
Hacer la estimación y la planeación del desarrollo de un producto puede ser una tarea desalentadora que se hace más complicada por nuestra ignorancia o mala interpretación acerca de los proyectos, como concepto y en proyectos específicos. Hace tiempo leí (enlaces al final) que un proyecto no debía ser visto sólo como una secuencia de pasos, sino que también debía ser visto como un flujo rápido que genera nuevas capacidades y nuevo conocimiento. Las nuevas capacidades se entregan como parte del nuevo producto y el nuevo conocimiento se utiliza para hacer un mejor producto (Cohn 2006). Esto es la base para el enfoque de la Planificación Agile sobre la planeación.
Al comenzar a leer sobre administración de proyectos, trabajaba como desarrollador, y esa frase (del párrafo anterior) fué una de mis primeras revelaciones serias acerca de porque trabajaba tan duro codificando para funcionalidades que al final no se utilizaban o bien en proyectos que no lograban sus objetivos plenamente. Parte de las fallas de esos proyectos fueron desde luego, a veces no planear en lo absoluto, pero también tratar de planear todo desde el principio.
Plan En un proyecto Agile utilizamos las nuevas capacidades y el nuevo conocimiento obtenido como guía para el trabajo mismo que se está realizando. El conocimiento obtenido puede ser acerca del producto o del mismo proyecto en general, lo importante es que este nuevo conocimiento nos da mejor idea de cómo debería ser el producto en el cual trabajamos o bien se convierte en mejor entendimiento sobre una tecnología, sobre el equipo, sobre los riesgos, etc.
Cuando pretendemos planear todo desde el principio (ni hablar cuando no planeamos) estamos fallando en integrar nuevo conocimiento al plan, y por lo tanto eso nos lleva a caer en suposiciones erróneas, como creer que estamos incluyendo TODO lo necesario en nuestro plan (lo que en el mundo del software rara vez sucede).
Mis amigos desarrolladores son mayormente gordos y feos (pero aún así los quiero 😃) y no les gusta correr (ejercitarse, hacer cardio, etc.) , pero a mí sí, por lo que utilizaré la siguiente analogía: Una aproximación tradicional a un proyecto puede ser como una carrera de 10km donde usted sabe exactamente dónde está la meta y trata de alcanzarla tan rápido como sea posible. Un proyecto Agile es como cuando usted se toma el tiempo y ve que tan lejos puede llegar en 60 minutos. Un equipo Agile sabe cuándo termina, pero no exactamente que entregará al final. Por lo tanto, planear se convierte en proceso en donde crean y revisan objetivos periódicamente que eventualmente llevan a una meta de más largo término.
Niveles de planificación Agile
Cuando estamos preparando los objetivos de un plan es importante reconocer que no podemos ver más allá de cierto horizonte y que la exactitud de nuestro horizonte será cada vez menor entre más lejos queramos ver. En mis cursos menciono los primeros capítulos de una serie de TV llamada Vikings en donde plantean someramente el uso regular de un compás solar, un piedra solar y cuervos para poder corregir el rumbo periódicamente y mantener un curso correcto; de esta misma manera nosotros debemos revisar el estado de nuestro proyecto y ajustar nuestro plan de acuerdo a ello. Desde este punto ya estamos hablando de la elaboración de una planeación estratégica con el enfoque Agile.
Como ya expresé, el riesgo de un plan se incrementa de acuerdo a que tan lejos en el futuro queramos planear, por ello cada cierto tiempo debemos levantar nuestra vista para ver el nuevo horizonte y ajustar el plan. Los equipos Agile hacen esto planeando en por lo menos 3 distintos horizontes (podrían ser más dependiendo de la aproximación de su organización, pero en esta entrada solo explicare estos). Los 3 horizontes son el Release (Liberación), Iteración y Diaria (actual). Puede tomar como referencia el siguiente diagrama (este no es un estándar, puede encontrar diferentes diagramas similares, pero los 3 horizontes principales no cambian):
Niveles de la Planificación Agile Planificación del Release (Liberación).
Aquí determinamos respuestas a preguntas que se relacionan con el alcance, el calendario y los recursos del proyecto. Este plan debe ser actualizado a lo largo del proyecto, usualmente al inicio de cada iteración para reflejar las expectativas actuales que serán incluidas en el Release.
Planificación de la Iteración.
Esta se lleva a cabo al inicio de cada iteración y basada en el trabajo que se hizo en la iteración anterior (si no es la primera desde luego). El cliente o sus representantes (el Product Owner) deben identificar los elementos de mayor prioridad en los cuales el equipo concentrará sus esfuerzos en la nueva iteración. Esto porque estamos en un horizonte más cercano que el del Release. En este horizonte se establecen las tareas requeridas para obtener una parte funcional y probada de nuestro producto.
Planificación Diaria.
Puede sonar muy excesivo (y quizá lo es) llamar planificación a este horizonte, esto no son más que reuniones diarias e informales (que usualmente se hacen de pie ya que solo deben durar unos minutos) en donde se sincronizan los esfuerzos diarios individualmente. Esto es, que cada miembro del equipo comparte que ha hecho el día anterior, que piensa hacer hoy y comunica los obstáculos que afronta.
Con estos tres horizontes (Release, Iteración y Diaria) los equipos ágiles se concentran sólo en lo que es visible e importante en el plan que han creado. De esta manera han adoptado el enfoque de la planificación Agile.
Condiciones de Satisfacción.
En una futura entrada dedicaré más detalle a esto (lo merece) pero no quiero dejar de mencionar el tema en esta misma entrada, por lo menos de manera breve. Todo proyecto debe comenzar con una meta, quizá de esta se deriven varios objetivos relacionados con fechas, presupuesto, recursos humanos, etc., pero típicamente solo habrá una meta. No dé por hecho que usted debe crear el mejor auto del mundo, la mejor puerta del mundo, el mejor ERP del mundo; los objetivos sólo deben alinearse con las condiciones de satisfacción del Producto Owner (la voz del cliente); esto es, los criterios que serán utilizados para evaluar y determinar el éxito del proyecto.
Lo pondré de otra forma, hace mucho tiempo, cuando estaba en la secundaria era común que a la clase entera nos asignaran escribir un artículo sobre un libro, y de inmediato aparecía la pregunta obligada al profesor, la cual era qué tan largo debía ser artículo. El respondía algo así como “cinco páginas”, entonces conociamos su primera Condición de Satisfacción. Hubo, por supuesto, una serie de condiciones adicionales de satisfacción no escritas, como que el documento estubiera bien escrito, que fuera mi propio trabajo (no plagios), sin faltas de ortografía, etc.
Al comienzo de la planificación Agile del Release o lanzamiento, el equipo y el propietario del producto exploran en colaboración las condiciones de satisfacción del propietario del producto. Estos incluyen los elementos habituales (alcance, calendario, presupuesto y calidad), aunque los equipos ágiles suelen prefieren tratar la calidad como no negociable. El equipo y el propietario del producto buscan formas de cumplir con todas las condiciones de satisfacción. El propietario del producto puede, por ejemplo, estar igualmente satisfecho con un Release en cinco meses que incluya un conjunto de historias de usuarios, que con un sólo lanzamiento de un mes que incluya historias de usuarios adicionales.
A veces, sin embargo, no se pueden cumplir todas las condiciones de satisfacción del propietario del producto. El equipo puede construir el mejor procesador de textos del mundo, pero no pueden construirlo para el próximo mes. Cuando no se puede encontrar una solución factible, las condiciones de satisfacción deben cambiar. Debido a esto, la planificación del lanzamiento y la exploración de las condiciones de satisfacción del propietario del producto son altamente iterativas
Conclusión
Los proyectos deben considerarse como una generación rápida y confiable de un flujo de nuevas capacidades útiles y nuevos conocimientos, en lugar de solo la ejecución de una serie de pasos. Los proyectos generan dos tipos de conocimiento nuevo: conocimiento sobre el producto o servicio y conocimiento sobre el proyecto. Este conocimiento debe ser validado para evitar trabajo infructuoso (waste).
La siguiente imagen muestra como la planifiación Agile existe dentro de una dinámica que busca adaptar conocimiento de manera pronta y altamente iterativa (como ya se mencionó). Hemos basado esta ilustración en la propuesta del buen @sdelbecque quien toma en cuenta la filosofía de Lean, con la cual la agilidad es altamente compatible:
Lean Agile Enlaces relacionados:
El Origen Y Los Valores De Agile
Planeación, Cono de Incertidumbre y Estimaciones en IT
Estos son alguno libros recomendables para saber más:
Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
No Comment
About This Post
Some years ago I get interested in Agile software development and I have been using the Scrum product development framework in several projects, but eventually, I decided to formalize this knowledge starting with a Scrum Master certification. When I talked about this with some friends and acquaintances I was surprised when a lot of them started to ask me about it with many doubts and confusions.
To try to shed some light, I will get into a heated territory within the Scrum community, sharing my experience while and I will try to answer several of the first questions that come to mind when you’re interested in a Scrum certification. It should be noted that nobody is paying me for my opinion (I wish….).
Why get a Scrum Master certification?
I was a developer who finds himself involved with Agile and Scrum some years ago (more by emergency than by good judgment) in order to finish projects near of collapse. Little by little and still with many setbacks but also proposing good practices to the management and in an active role, the teams which I was part of, successfully managed to get out of several quagmires, but the truth is that I never felt the need to obtain any formal validation for that knowledge. Eventually, fate, time and several fellow developers pushed me to take a more active role on the project management side, but I found that several clients and employers were asking me for certified Skills in Scrum and/or Project Management (foolish!).
Around 2013, while I was looking for a new job, I began to notice that more and more vacancies, for project managers and even developers, required Scrum knowledge. Considering that many times in the past managers, directors and even project managers asked me what was that Scrum thing, I noticed that things were changing in a remarkable way.
So, the message was clear. If I wanted to have a better chance of finding interesting (and reasonably paid) jobs, I had to certify my knowledge. But that was the easy part; I spent a good amount of time researching what my options were. In the rest of this post, I condensed what I learned about Scrum certifications under the Scrum Master role.
Scrum Master Certifications
The first thing is to clarify that there are several organizations offering Scrum Master certifications, the best known are:
- Certified Scrum Master (CSM) by Scrum Alliance.
- Professional Scrum Master (PSM) by Scrum.org.
- Scrum Master Certified (SMC) by SCRUMstudy.
- SAFe Scrum Master by Scaled Agile Framework
This post only addresses these four certifications, but there are others that probably you want to consider:
- PMI_ACP. Project Management Institute Agile Certified Practitioner is offered by the Project Management Institute.
- ICAgile Certifications. Certifications offered by the International Consortium for Agile.
*Please note that all figures presented are valid as of the date of publication of this entry and may change without prior notice.
Certified Scrum Master (CSM) from Scrum Alliance
This is the most known and long-lived certification of all. The Scrum Alliance was founded by one of the two creators of Scrum, Ken Schwaber along with other heavyweights of Agile and Scrum world such as Esther Derby and Mike Cohn.
However, today there are some criticisms for this certification because although it is the most widely recognized certification, it’s open knowledge that all certifications issued before 2012 did not require any evaluation, being the only requirement to attend an official course of the Scrum Alliance. In response, the Scrum Alliance has changed the Certified Scrum Master (CSM) certification process to the following mandatory steps:
- Familiarize yourself with the basic concepts of Scrum.
- Attend the official CSM course.
- Obtain the certificate that verifies the completion of the CSM course and passes the CSM evaluation with a minimum score of 69% (still considered a low percentage by some practitioners).
The courses can only be taught by the Certified Scrum Trainers, but as the courses are not approved, it seems that the quality of each course depends on the skills, experience, and materials that each instructor can offer independently.
The course cost includes the evaluation, can change from region to region, but ranges are between *$850 USD and *$1,300 USD. To maintain valid CSM certification, it must be renewed every two years at a cost of *$100 USD but the Scrum Alliance also introduced the Scrum Education Units, which can be used to renew its certifications. In the same vein, for those holding PMI certifications, these courses also provide PDUs.
Update 2018: The Scrum Alliance integrated new certifications to its offer, including one more as Scrum Master. Following a similar strategy to Scrum.org a certification called Advanced Certified ScrumMaster (A-CSM) have been added, which has as requirements:
- Attend to a required A-CSM course.
- Successfully complete the previous or later work to the course that the instructor may consider necessary in order to meet the learning goals.
- Validate at least one year of work experience specific to the role of ScrumMaster (within the past five years). This point is important because at least 12 months must be logged since you got your CSM certification before you can try for A-CSM.
- Hold an active Certified ScrumMaster (CSM) certification with the Scrum Alliance.
The cost of the course and the right to A-CSM exam also can vary depending on the region but according to our investigation, this is about $2500 USD.
Professional Scrum Master (PSM) from Scrum.org
The Scrum Alliance and Ken Schwaber had a separation in 2009 and this led to the latter founding of a new organization called Scrum.org, which offers courses and certifications for PSM among others. After the Scrum Alliance certification, this is the most widespread Scrum Master certification, gaining more and more recognition in the industry. Something different in Scrum.org is they don’t offer just a single certification, you can get three different levels of Scrum Master certification from them, this is the PSM I, PSM II and PSM III.
It’s important to mention that today a large part of the Scrum community address to these certifications as the most difficult to obtain, because PSM I, PSM II and PSM III require evaluations with minimum scores of 85% and since they include questions of high difficulty, being required to get the PSM I to be able to obtain the PSM II, and these two before being able to try the PSM III test. Several sources reported that there is a relatively high amount of people who, even with experience in Scrum or other certifications, fail these assessments.
In spite of how intimidating this may sound, an encouraging point is that none of these evaluations require the applicant to attend a course, so in theory, these certifications can be achieved with the appropriate time for study, revision and/or experience, in addition, these certifications do not need to be renewed.
The cost for the PSM I evaluation is *$150 USD, for the PSM II it’s *$250 USD and for the PSM III it’s *$500 USD, with the right to one single attempt.
The optional Professional Scrum Master course offered by Scrum.org can only be taught by the Professional Scrum Trainers, who have approved materials. The costs of the courses seem to go between *$1295 and *$1995 USD.
As with the Scrum Alliance courses, PMI certification holders can obtain PDUs for the PSM courses.
PSM I Exam Simulator: In order to help those who want this certification, in internet80 we have undertaken the task of developing a simulator of this test completely free. The simulator is in the testing phase but is now available to everyone. Evaluate your knowledge about the Scrum framework now here: PSM I Exam Simulator 1
Scrum Master Certified (SMC) from SCRUMstudy
This is the most controversial certification of those mentioned in this post and within the Scrum community, So far I don’t know who is/are exactly the founders of this organization, but they have the credit of having created a free book in its digital version, called the SBOK Guide or Scrum Body of Knowledge whose main author is Tridibesh Satpathy. This organization offers SCM certification.
The SCM certification bases its assessment on the SBOK Guide, which has a process approach (similar to the PMI’s PMBOK), and another concepts called principles and aspects, that is, everything is in the context of the interpretation made by the authors about Scrum in the SBOK Guide, which has caused this organization to have serious differences with many practitioners and founders of Scrum who even took part in the creation of the Agile manifesto and therefore with a large part of the Scrum community; although on the other hand, it has achieved a certain amount of acceptance from the industry.
One point against this certification, which may be eventually important for some people, is that the most popular Scrum scaling frameworks such as SAFe, LeSS or Nexus are based on the Scrum Guide and do not recognize SBOK. This may be important since being SAFe the most influential scaling framework so far, and if you want to obtain a certification as SAFe Advanced Scrum Master, the Scaled Agile organization does NOT consider relevant the SCRUMstudy certification.
Update 2017: The Scaled Agile Framework organization who provides SAFe, now offers its own Scrum Master certification, called SAFe Scrum Master (SSM), don’t get confused with SAFe Advanced Scrum Master certification, this one puts a pre-prerequisite neither CSM nor PSM anymore, but put them as highly suggested in order to take its certification course.
The minimum score in their respective evaluation to obtain this certification is of *95%, although in my research I have obtained testimonies and mixed comments on their difficulty, they do not have prerequisites although their SBOK must be strongly studied since apparently the exam attacks only the perspective of this guide.
The cost of the test is *$450 USD with *3 attempts and requires *40 re-certification units every *3 years (these units are obtained by different activities).
According to my research, the SMC course content is approved and can only be provided by the SCRUMstudy Certified Trainers whose are based mostly on the SBOK guide, the costs are around *$450 USD, but costs can change between regions and partners. The testimonials I got were quite mixed, I got good comments about the courses materials offered but one thing I was told several times is that when the trainers face questions and/or scenarios outside the context of the SBOK Guide, these instructors really struggle a lot to solve doubts from the “real world”. SCRUMstudy has several partners to offer their courses.
PDUs are also offered if you take the SMC course.
Update 2018: SCRUMstudy has followed the strategy that Scrum.org started and also Scrum Alliance followed. Now, this organization offers an advanced Scrum Master certification which is called Expert Scrum Master Certified (ESMC), and its requirements are:
- Having three years of experience in Scrum / Agile project management.
- Hold the certifications SMC, SAMC y SPOC.
- Submit 500 words write up about two Scrum / Agile projects.
- The official web page also indicates that you can attend to a 2-days ESMC face to face training, of course, provided by SCRUMstudy, however, doesn’t clearly indicate whether this is mandatory, substitute or facilitates any of the previous requirements.
The cost of the exam to obtain this certification at the time of this publication is $800 USD which may vary depending on the region. You will also have to obtain 60 RCUs every 3 years to maintain this certification.
SAFe Scrum Master
I added this certification this year (2018) because this emerged in late 2016 (months after this post), don’t get confused with the SAFe Advanced Scrum Master certification. SAFe focuses on large organizations Agile model implementation and today is the most popular escalation framework, but it’s not the only one (there are others such as Nexus, LeSS, DaD, and others). But let’s take it one step at a time because I’ve discovered out that this certification has aroused some confusion.
Previously the Scaled Agile Framework only offered the SAFe Advanced Scrum Master which is totally dedicated to this Scrum scaling framework approach, and within its prerequisites, it was required to have either CSM or PSM certifications.
Now offers its own “basic” certification which uses the Scrum Guide approach but also introduces its SAFe escalation framework approach early on, this is the SAFe Scrum Master certification. The prerequisites for this certification are knowing the agile approach and knowing the Scrum, Kanban and XP frameworks, and at the same time having first-hand experience in the software and hardware development process, and of course to take obligatorily the SAFe Scrum Master course.
According to the testimonies I’ve got, the contents of this course are homologated and are abundant, I didn’t find anything about the instructor’s qualifications who teach the courses, but apparently, both the instructors and the exam are totally oriented to the content provided during it. The first attempt for this certification test is included in the course cost (which varies between countries and regions), each additional attempt costs *$50 USD, it is a web-based test (is not clear for me if you can take the this from anywhere), to approve requires between *33 and 45 correct answers (73% of accuracy).
Something good is that just about three years ago you had to travel to the United States to take some of the SAFe courses and exams, but now these are available in several countries on all continents, which speaks of the popularity of this scaling model. Keep in mind that if you get this certification you must renew it *every year at a cost of $100 USD (which is a short-term compared with rest of the certifications).
This course offers PDUs for PMI certification holders and SEUs for those with some Scrum Alliance certifications.
Resumen
- The Certified Scrum Master (CSM) certification is more widely known than the Professional Scrum Master (PSM) and the Scrum Master Certified (SMC).
- The training costs for PSM are (on average) higher than CSM and SMC training courses and are not available in all countries. The costs of CSM are usually higher than SMC.
- The costs of acquiring and maintaining CSM certification are higher than those for SMC and PSM, the latter being the cheapest since no payment is required to maintain the certification.
- The value of CSM certification is very questioned especially if it was issued before 2012 (it was granted without evaluation).
- The materials and the quality of the courses for CSM can vary greatly since they are not approved.
- The materials provided for PSM and SMC in their training are approved (and according to several testimonies are usually good).
- The SMC certification is based on the practices described in the SBOK and not necessarily as described in the Scrum Guide (text by the creators of Scrum).
- The value of the SMC certification is questioned by many important members and organizations in the Scrum community.
- The most important scaling framework at the moment (SAFe) strongly suggests holding either the SAFe Scrum Master (SSM), Certified Scrum Master (CSM) or Professional Scrum Master (PSM) certifications in order to obtain several of its certifications including the SAFe Advanced Scrum Master (SASM).
- SAFe offers the SAFe Scrum Master (SSM) certification which is oriented to Scrum scaling in large organizations but is not the only escalation model and not every organization have or plan to use this approach.
- The SAFe Scrum Master (SSM) certification must be renewed every year for a cost, which is short-term compared with the rest of the certification.
* Correct figures at the time of publication. They can change without notice.
Sorry about my English I’m not a natural speaker (don’t be grumpy, help me to improve 🙂 ).
Related Links:
PSM I FREE Exam Simulator 1
Agile’s origins and valuesSome book that can be interesting for you:
Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
14 Comments
The XMLHttpRequest object
The XMLHttpRequest object has been updated several times since was defined as the WHATWG’s HTML effort using Microsoft technology; then we had the original XMLHttpRequest Level 1 specification as part of W3C, we also had the XMLHttpRequest Level 2 updated specification, and now we have the last version of this object known as XMLHttpRequest Living Specification. We can summarize its advantages in the following points:
- Allows upload and download files as stream bytes, large binaries (BLOBs) or data forms
- It has event handlers for progress, errors, abortion, start, and end of operations
- Cross-domain capabilities (CORS)
- New type for JSON responses
- Is a fundamental part of the HTML5 File API specification
It’s important to emphasize that before HTML5 and the latest versions of XMLHttpRequest object it was required to resort to server-side technology in order to able to perform an uploading file operation, that is, it wasn’t possible to upload a file natively from the client side. Technologies as AJAX and Flash did their own effort but with serious limitations, so XMLHttpRequest comes to cover this old problem in a big way. There are other additional features that come with XMLHttpRequest, if you want to know more you can resort to the official specification.
Starting
The first thing we’ll do is to define the user interface for this small implementation starting with the HTML tags, the code is very simple and only includes some form elements, and some div tags that are only used to give a better presentation using CSS3. I won’t analyze in this post anything related to the used cascade style sheets since is not something really necessary for the operation of this example.
<!DOCTYPE html> <html> <head> <title>Upload File</title> <meta charset="iso-8859-1" /> </head> <body> <div id="wrap"> <div class="field"> <ul class="options"> <li><input type="file" id="myfile" name="myfile" class="rm-input" onchange="selectedFile();"/></li> <li><div id="fileSize"></div></li> <li><div id="fileType"></div></li> <li><input type="button" value="Subir Archivo" onClick="uploadFile()" class="rm-button" /></li> </ul> </div> <progress id="progressBar" value="0" max="100" class="rm-progress"></progress> <div id="percentageCalc"></div> </div> </body> </html>The previous code explains itself, but let’s summarize what is in there:- A file-type input which will be used to select the file to be uploaded
- A div which will be used to print the size of the selected file
- A div which will be used to print the MIME type of the selected file
- A button which will fire the uploading process for the selected file
- A progress bar to indicate the uploading process progress of the selected file
- Finally, a div where the progress will be shown in a percentage format
The selectedFile() function
Each time you select a file using the file element, you also trigger the onchange event which calls the selectedFile() function. In this function very interesting things happen, to start, a reference to a file array instantiated by the HTML5 object FileList is done, the objects that we get as members of FileList are File objects. In this case, we’ll get the size and type properties from the gotten File object.Using the information provided by the size property, the size of the selected file is calculated and shown in megabytes or kilobytes within the function. With the type property, the MIME type of the selected files is gotten and showed in the corresponding div.function selectedFile() { var archivoSeleccionado = document.getElementById("myfile"); var file = archivoSeleccionado.files[0]; if (file) { var fileSize = 0; if (file.size > 1048576) fileSize = (Math.round(file.size * 100 / 1048576) / 100).toString() + ' MB'; else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + ' Kb'; var divfileSize = document.getElementById('fileSize'); var divfileType = document.getElementById('fileType'); divfileSize.innerHTML = 'Tamaño: ' + fileSize; divfileType.innerHTML = 'Tipo: ' + file.type; } }The uploadFile() function
Esta es la función que hace un mayor uso de las nuevas posibilidades de XMLHttpRequest , y es la que se encargará de disparar el proceso principal del lado cliente.
function uploadFile(){ //var url = "/ReadMoveWebServices/WSUploadFile.asmx/UploadFile"; var url = "/ReadMoveWebSite/UploadMinimal.aspx"; var archivoSeleccionado = document.getElementById("myfile"); var file = archivoSeleccionado.files[0]; var fd = new FormData(); fd.append("archivo", file); var xmlHTTP = new XMLHttpRequest(); //xmlHTTP.upload.addEventListener("loadstart", loadStartFunction, false); xmlHTTP.upload.addEventListener("progress", progressFunction, false); xmlHTTP.addEventListener("load", transferCompleteFunction, false); xmlHTTP.addEventListener("error", uploadFailed, false); xmlHTTP.addEventListener("abort", uploadCanceled, false); xmlHTTP.open("POST", url, true); //xmlHTTP.setRequestHeader('book_id','10'); xmlHTTP.send(fd); }At the beginning, we have the variable url that we’ll use to indicate where is the page o web service which is going to receive the request from this page to do the proper process on server side. Immediately like in the selectedFile() function, a reference to the gotten File object member is also done.In the fourth line, there is something new and very useful, that is the FormData object, this object allows to instantiate a web form via JavaScript, that is, is like you put an HTML form using tags, or you can refer to an already existing one assigning it to a FormData object. No doubt this is really helpful since means now you can create a web form y alter the sending values dynamically. To append values to, either instantiated or referenced web form with FormData, use the append(file, object) method, this way in the fifth line our File object is added with the file name.This is the code of the function that covers what was just stated://var url = "/ReadMoveWebServices/WSUploadFile.asmx/UploadFile"; var url = "/ReadMoveWebSite/UploadMinimal.aspx"; var archivoSeleccionado = document.getElementById("myfile"); var file = archivoSeleccionado.files[0]; var fd = new FormData(); fd.append("archivo", file);Event handlers
Continuing with the rest of the function, we can observe that the XMLHttpRequest object is finally instantiated and is assigned to the xmlHTTP variable, and then we proceed to the next novelty, I mean the possibility of creating new events which are part of XMLHttpRequest thanks to the upload object. The added events for this particular case are:- loadstart. Is triggered when the uploading file process initiates.
- progress. Is triggered each time there is an advance in the file uploading process.
- load. Is triggered when the transfer is complete successfully.
- error. Is triggered when the transfer fails
- abort. Is triggered when the user/developer interrupts the process.
These aren’t the only available events, check the official specification for more information.The event handlers are declared in the following code:var xmlHTTP= new XMLHttpRequest(); //xmlHTTP.upload.addEventListener("loadstart", loadStartFunction, false); xmlHTTP.upload.addEventListener("progress", progressFunction, false); xmlHTTP.addEventListener("load", transferCompleteFunction, false); xmlHTTP.addEventListener("error", uploadFailed, false); xmlHTTP.addEventListener("abort", uploadCanceled, false);The triggered events functions are the following:
function progressFunction(evt){ var progressBar = document.getElementById("progressBar"); var percentageDiv = document.getElementById("percentageCalc"); if (evt.lengthComputable) { progressBar.max = evt.total; progressBar.value = evt.loaded; percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%"; } } function loadStartFunction(evt){ alert('Comenzando a subir el archivo'); } function transferCompleteFunction(evt){ alert('Transferencia completa'); var progressBar = document.getElementById("progressBar"); var percentageDiv = document.getElementById("percentageCalc"); progressBar.value = 100; percentageDiv.innerHTML = "100%"; } function uploadFailed(evt) { alert("Hubo un error al subir el archivo."); } function uploadCanceled(evt) { alert("La operación se canceló o la conexión fue interrunpida."); }ProgressFunction() updates the progress bar and percentage which indicate in a graphical and numerical way the process progress, the rest of the functions only display the proper message for each case.
Commented code
If you have observed the code you probably noticed some commented lines, this is because this is just the base code to create something a little bit more complex, but I decided to leave those lines because maybe can be useful for someone:
//var url = "/ReadMoveWebServices/WSUploadFile.asmx/UploadFile";
The previous line of code is a call to a .Net HTTP service instead of a page. Here is where you should call your own server-side implementation.
//xmlHTTP.upload.addEventListener("loadstart", loadStartFunction, false);This line calls a function that shows a message when the process starts. I commented this line after I executed the code several times because was annoying.
The completo code
This is how the complete implementation of the code looks:
<!DOCTYPE html> <html> <head> <title>Upload File</title> <meta charset="iso-8859-1" /> <link rel="stylesheet" type="text/css" href="estilosUploadFile.css" /> <script type="text/javascript"> function selectedFile() { var archivoSeleccionado = document.getElementById("myfile"); var file = archivoSeleccionado.files[0]; if (file) { var fileSize = 0; if (file.size > 1048576) fileSize = (Math.round(file.size * 100 / 1048576) / 100).toString() + ' MB'; else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + ' Kb'; var divfileSize = document.getElementById('fileSize'); var divfileType = document.getElementById('fileType'); divfileSize.innerHTML = 'Tamaño: ' + fileSize; divfileType.innerHTML = 'Tipo: ' + file.type; } } function uploadFile(){ //var url = "http://localhost/ReadMoveWebServices/WSUploadFile.asmx?op=UploadFile"; var url = "/ReadMoveWebServices/WSUploadFile.asmx/UploadFile"; var archivoSeleccionado = document.getElementById("myfile"); var file = archivoSeleccionado.files[0]; var fd = new FormData(); fd.append("archivo", file); var xmlHTTP= new XMLHttpRequest(); //xmlHTTP.upload.addEventListener("loadstart", loadStartFunction, false); xmlHTTP.upload.addEventListener("progress", progressFunction, false); xmlHTTP.addEventListener("load", transferCompleteFunction, false); xmlHTTP.addEventListener("error", uploadFailed, false); xmlHTTP.addEventListener("abort", uploadCanceled, false); xmlHTTP.open("POST", url, true); //xmlHTTP.setRequestHeader('book_id','10'); xmlHTTP.send(fd); } function progressFunction(evt){ var progressBar = document.getElementById("progressBar"); var percentageDiv = document.getElementById("percentageCalc"); if (evt.lengthComputable) { progressBar.max = evt.total; progressBar.value = evt.loaded; percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%"; } } function loadStartFunction(evt){ alert('Comenzando a subir el archivo'); } function transferCompleteFunction(evt){ alert('Transferencia completa'); var progressBar = document.getElementById("progressBar"); var percentageDiv = document.getElementById("percentageCalc"); progressBar.value = 100; percentageDiv.innerHTML = "100%"; } function uploadFailed(evt) { alert("Hubo un error al subir el archivo."); } function uploadCanceled(evt) { alert("La operación se canceló o la conexión fue interrunpida."); } </script> </head> <body> <div id="wrap"> <div class="field"> <ul class="options"> <li> <input type="file" id="myfile" name="myfile" class="rm-input" onchange="selectedFile();"/> </li> <li> <div id="fileSize"></div></li> <li> <div id="fileType"></div></li> <li> <input type="button" value="Subir Archivo" onClick="uploadFile()" class="rm-button" /></li> </ul> </div> <progress id="progressBar" value="0" max="100" class="rm-progress"></progress> <div id="percentageCalc"></div> </div> </body> </html>I’m not describing the CSS3 code because is irrelevant in terms of functionality, but I share an image that shows how it looks the implementation in the browser and the link to the CSS3 estilosUploadFile.zip.
I’m also sharing the original HTTP service that I used to test this example -the server-side code, backend file or any name that you prefer 😃- but this won’t be very useful for you unless you use the exact same stack that I was using at the moment- in other words, if you are the kind of person who just wants to copy and paste….hehehe well….maybe you’re not ready for this yet. Here is the file WSUploadFile.zip
Sorry about my English I’m not a natural speaker (don’t be grumpy, help me to improve).
This is all for now folks, I hope this can be useful for you.
Here some books that can help you in your HTML5 journey:
Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
4 Comments
Administración / Management / Administración de Proyectos / Project Management / Agile / IT / Scrum / SoftwareSobre esta entrada
Desde hace ya varios años me interesé en desarrollo Ágil de software y he venido utilizando el marco de trabajo para el desarrollo de productos Scrum en varios proyectos, pero hace unos tres años decidí comenzar a formalizar este conocimiento empezando por ser un Scrum Master certificado. Cuando comenté esto con amigos y conocidos me sorprendió que muchos de ellos me comenzaron a preguntar al respecto con muchas dudas y confusiones.
Para intentar arrojar un poco de luz, me meteré en un terreno un tanto acalorado dentro de la comunidad Scrum, compartiendo mi experiencia mientras trataré de contestar varias de las primeras preguntas que vienen a la mente cuando le interesa convertirse en un Scrum Master certificado. Cabe aclarar que nadie me ha pagado por ninguna opinión o por escribir esta entrada (ya quisiera…).
¿Por qué obtener una certificación como Scrum Master?
Yo era un desarrollador que se vio envuelto con Agile y Scrum hace ya algunos años (más por emergencia que por buen juicio) con el fin de lograr concretar proyectos que estaban al borde del colapso. Poco a poco y aún con muchos contratiempos pero proponiendo buenas prácticas a la gerencia y con un rol activo, los equipos de los cuales formé parte logramos salir exitósamente de varios atolladeros, pero la verdad es que nunca sentí la necesidad de obtener ninguna validación formal para esos conocimientos. Eventualmente el destino, el tiempo y varios compañeros desarrolladores empujaron para que tomara un rol más activo del lado de la gestión de proyectos, pero encontré que varios clientes y empleadores me estaban pidiendo habilidades certificadas en Scrum y/o Project Management (¡insensatos!).
Alrededor del 2013 mientras analizaba el mercado laboral comencé a notar que cada vez mas vacantes, para directores de proyecto e incluso desarrolladores, solicitaban conocimientos de Scrum. Considerando que muchas veces en el pasado las gerencias, los directores e incluso project managers me preguntaban con que se comía Scrum, observé que las cosas estaban cambiando de manera notable.
Entonces, el mensaje fue claro. Si quería tener una mejor oportunidad de encontrar trabajos interesantes (y razonablemente pagados) había que certificar mis conocimientos, en este caso convertime en un Scrum Master certificado. Pero eso fue la parte fácil; pasé un buen rato investigando cuales eran mis opciones. En el resto de esta entrada condenso lo que aprendí respecto a las certificaciones Scrum bajo el rol de Scrum Master.
Certificaciones Scrum Master
Lo primero es aclarar que hay varias organizaciones que ofrecen certificaciones como Scrum Master, las que se muestran como las más conocidas son:
- Certified Scrum Master (CSM) de Scrum Alliance
- Professional Scrum Master (PSM) de Scrum.org
- Scrum Master Certified (SMC) de SCRUMstudy
- SAFe Scrum Master de la Scaled Agile Framework
Esta entrada solo aborda estas cuatro certificaciones, pero hay otras que quizá quiera considerar (más las que se sumen):
- PMI_ACP. Project Management Institute Agile Certified Practitioner ofrecida por el Project Management Institute.
- ICAgile Certifications. Certificaciones ofrecidas por el International Consortium for Agile.
*Tenga en cuenta que todas la cifras presentadas son válidas a la fecha de publicación de esta entrada y pueden cambiar sin previo aviso.
Certified Scrum Master (CSM) de Scrum Alliance
Esta es la certificación más conocida de todas y la más longeva. La Scrum Alliance fue fundada por uno de los dos creadores de Scrum, Ken Schwaber junto con otros de los pesos pesados del mundo Agile y Scrum como Esther Derby y Mike Cohn.
Sin embargo, han existido muchas críticas hacia esta certificación debido a que aunque es la certificación más ámpliamente reconocida, es de conocimiento abierto el que todas las certificaciones emitidas antes del 2012 no requerían evaluación alguna, siendo el único requerimiento asistir a un curso oficial de la Scrum Alliance. Como respuesta la Scrum Alliance ha cambiado el proceso de certificación a los siguientes pasos obligatorios:
- Familiarizarse con los conceptos básicos de Scrum.
- Asistir al curso CSM oficial.
- Obtener el certificado que comprueba la finalización del curso CSM y aprobar la evaluación con una puntuación mínima de *69% (aun considerado un porcentaje bajo por algunos practicantes).
Los cursos solo pueden ser enseñados por los Certified Scrum Trainers, pero al no estar homologados, parece ser que la calidad de cada curso está sujeto a las habilidades, experiencia y materiales que cada instructor puede ofrecer de manera independiente.
El costo del curso que incluye la evaluación cambia su costo de región en región, pero oscila entre los $850 USD y los $1300 USD. Para mantener la certificación CSM válida, esta debe ser renovada cada dos años a un costo de *$100 USD, pero la Scrum Alliance también presentó las Scrum Education Units, que se pueden utilizar para renovar sus certificaciones. Del mismo modo, para aquellos que tienen certificaciones del PMI, estos cursos también proporcionan PDUs.
Update 2018: La Scrum Alliance integró nuevas certificaciones a su oferta, incluyendo una más como Scrum Master. Siguiendo una estrategia similar a la Scrum.org se ha añadido otra certficacion llamada Advanced Certified ScrumMaster (A-CSM) la cual tiene como requisitos:
- Asistir a un curso obligatorio para A-CSM.
- Completar con éxito el trabajo previo o posterior al curso que el instructor pueda considerar necesario para completar los objetivos de aprendizaje.
- Validar al menos un año de experiencia laboral específica para el rol de Scrum Master (en los últimos cinco años). Este punto es importante porque deben haber pasado por lo menos 12 meses desde que obtuvo su certificación como CSM antes de poder obtener una como A-CSM.
- Mantener una certificación activa como Scrum Master certificado con Scrum Alliance (CSM).
El costo del curso y el derecho a evaluación para la certificación como A-CSM también puede variar dependiento de la región, pero de acuerdo a lo que investigamos, esto está alrededor de los $2500 USD.
Professional Scrum Master (PSM) de Scrum.org
La Scrum Alliance y Ken Schwaber tuvieron una separación en el 2009 y ello llevó a que este último fundara una nueva organización llamada Scrum.org, donde se ofrece un curso y certificaciones para PSM entre otras. Después de la certificación de la Scrum Alliance estas son las certificaciones Scrum Master más difundidas cobrando cada vez más reconocimiento en la industria. Algo diferente en la Scrum.org es que no es una una si no tres certificaciones las que se pueden obtener como Scrum Master, la PSM I y la PSM II y la PSM III.
Es importante mencionar, que al día de hoy gran parte de la comunidad Scrum señala a estas certificaciones como las más difíciles de obtener, debido a que tanto la PSM I, la PSM II y la PSM III requieren evaluaciones con puntuaciones mínimas del *85% ya que incluyen preguntas de dificultad alta que se deben contestar en un tiempo corto, siendo requerido conseguir la PSM I para obtener la PSM II y estas dos para aspirarar a la PSM III. En diversas fuentes se reporta que hay un relativo alto índice de personas que aun con experiencia en Scrum u otras certificaciones fallan estas evaluaciones.
A pesar de lo intimidante que puede sonar lo anterior, un punto alentador es que ninguna de estas evaluaciones requieren que el postulante asista obligatoriamente a algún curso, por lo que en teoría estas certificaciones pueden ser logradas con el apropiado tiempo de estudio y revisión, además de que las certificaciones no requieren ser renovadas.
El costo de la evaluación PSM I es de $150 USD, para la PSM II es de $250 USD y para la PSM III es de $500 USD, con derecho a un un solo intento.
El curso opcional Professional Scrum Master que ofrece la Scrum.org solo puede ser impartido por los Professional Scrum Trainers, quienes tienen materiales homologados. Los costos de los cursos parecen ir entre $1295 y $1995 USD en Estados Unidos, no he encontrado cursos oficiales en México o Latinoamérica.
Al igual que sucede con la Scrum Alliance, los poseedores de certificaciones del PMI pueden obtener PDUs por el curso PSM.
PSM I Exam Simulator: Con el fin de ayudar a los que deseen esta certificación, en internet80 nos hemos dado a la terea de elaborar un simulador de esta prueba completametne gratuito. El simulador esta en fase de pruebas pero ya esta disponible para todos. Es necesario que conozca lo suficiente del idioma Inglés ya que la evaluación oficial sólo esta disponible en este idioma. Evalúe su conocimiento sobre el marco de trabajo Scrum ahora aqui: PSM I Exam Simulator 1
Scrum Master Certified (SMC) de SCRUMstudy
La certificación SCM basa su evaluación en la guía SBOK la cual tiene una aproximación por procesos (similar al PMBOK del PMI) y a lo que llama principios y aspectos, es decir, todo es bajo el contexto de la interpretación que hacen los autores de la guía SBOK sobre el marco Scrum, lo cual ha ocasionado que esta organización tenga serias diferencias con muchos practicantes y fundadores de Scrum que incluso tomaron parte en la creación del manifiesto Agile y por lo tanto con gran parte de la comunidad Scrum; aunque por otro lado ha logrado cierto grado de aceptación por parte de la industria.
Un punto en contra de esta certificación, que eventualmente puede ser importante para algunos, es que los marcos de escalamiento más populares como SAFe, LeS o Nexus están basados en la Scrum Guide y no reconocen al SBOK. Esto puede ser importante ya que siendo SAFe el marco de escalamiento más influyente hasta ahora, y si usted desea obtener una certificación como SAFe Advanced Scrum Master, la Scaled Agile NO considera relevante la certificacione de la SCRUMStudy.
Update 2017: La organización Scaled Agile Framework quien provee SAFe, ahora ofrece su propia certificación como Scrum Master, llamada SAFe Scrum Master (SSM), no confundir con su certificación SAFe Advanced Scrum Master, esta última ya NO coloca como pre-requisito las certificaciones CSM ni PSM, pero si las coloca como altamente sugeridas para tomar su curso de certificación.
La puntuación mínima en su respectiva evaluación para obtener esta certificación es del *95%, aunque en mi investigación he obtenido testimonios y comentarios mixtos sobre su dificultad, no tienen prerequisitos aunque se debe estudiar fuertemente su SBOK ya que aparentemente el examen ataca más la perspectiva de esta guía que la visión de los creadores de Scrum en la Scrum Guide .
El costo de la evaluación es de *$450 USD con 3 intentos y requiere 40 unidades de re-certificación cada 3 años (estas unidades se obtienen por diferentes actividades).
Según mi investigación, el curso SMC está homologado y solo puede ser proporcionado por los SCRUMstudy Certified Trainers que se basan mayormente en la guía SBOK, los costos están alrededor de $450 USD variando un poco entre regiones y partners. Los testimonios que obtuve fueron bastante mixtos, obtuve buenos comentarios de los materiales ofrecidos, pero una cosa que me señalaron varias veces es que cuando los capacitadores se enfrentan a preguntas y/o escenarios fuera del contexto de la guía SBOK, estos instructores batallan mucho para resolver dudas de manera contundente. SCRUMstudy tiene varios partners en México y Latinoamérica que ofrecen sus cursos.
También se ofrecen PDUs por el curso SMC.
Update 2018: SCRUMstudy ha seguido la misma estrategia que inicio Scrum.org y que su vez siguió Scrum Alliance. Ahora esta organización ofrece una certificación como Scrum Master avanzado a la cual llama Expert Scrum Master Certified (ESMC), y sus requisito son:
- Tener tres años de experiencia en la gestión de proyectos Scrum / Agile.
- Estar certificado con las certificaciones SMC, SAMC y SPOC.
- Debe enviar un ensayo de 500 palabras donde escriba sobre dos proyectos Scrum / Agile.
- La página oficicial señala que también puede asistir a una capacitación presencial ESMC de 2 días, proporcionada desde luego por SCRUMstudy, sin embargo no señala claramente si esto es obligatorio, sustituye o facilita alguno de los requerimiento previos.
El costo del examen para obtener esta certificación al momento de esta publicación de de $800 USD los cuales pueden variar dependiendo de la región. También se tendrán que obtener 60 RCUs cada 3 años para mantener la certificación.
SAFe Scrum Master de Scaled Agile Framework
Agregué esta certificación en 2018 porque surgió a fines de 2016 (meses después de la primera publicación de esta emtrada), no se confunda con la certificación SAFe Advanced Scrum Master. SAFe se enfoca en la implementación de modelos Agile de organizaciones grandes y hoy en día es el marco de escalamiento más popular, pero no es el único (hay otros como Nexus, LeSS, DaD y otros). Pero vamos a dar un paso a la vez, porque he descubierto que esta certificación ha generado cierta confusión.
Anteriormente la Scaled Agile sólo ofrecía la SAFe Advanced Scrum Master la cual está dedicada totalmente al enfoque de este framework de escalamiento Scrum, y dentro de sus prerequisitos se requería tener certificaciones CSM o PSM:
Requitments SAFe 4 0 Advanced Scrum Master 2016 (scaledagile.com) Ahora ofrece su propia certificación “básica” la cual ataca el enfoque Scrum de la Scrum Guide pero también introduce de manera temprana la aproximación de su marco de escalamiento SAFe, esta es la SAFe Scrum Master. Los pre-requisitos para esta certificación son conocer el enfoque Agile, conocer los marcos Scrum, Kanban y XP y a su vez tener experiencia de primera mano en el proceso de desarrollo de software y hardware, y desde luego tomar obligatoriametne el curso para SAFe Scrum Master.
De acuerdo a los testimonios que he obtenido, los contenidos de este curso están homologados y son abundantes, no encontré nada acerca de las calificaciones de los instructores que imparten los cursos, pero aparentemente tanto los instructores como el examen están totalmente orientados a los contenidos proporcionados durante el mismo. El primer intento para su examen de certificación está incluido en los costos del curso (el cual varía entre paises y regiones), cada intento adicional cuesta *$50 USD, el examen es vía web (no tengo claro si se puede accesar a el desde cualquier sitio), para aprobar requiere contestar *33 de 45 respuestas correctas (73% de aciertos).
Algo bueno es que hasta hace solo unos tres años usted tenía que viajar a los Estados Unidos para tomar los cursos y examenes de SAFe, pero ahora estos se ofrecen en varios paises de todos los continentes, lo cual habla de la popularidad de este modelo de escalamiento. Tenga en cuentas que si obtiene la certificación debe renovarla *cada año a un costo de $100 USD (lo cual es plazo corto comparado con el resto de las certificaciones).
Este curso afrece PDUs para los poseedores de certificaciones del PMI y SEUs para aquellos con certificaciones de la Scrum Alliance.
Resumen
- La certificación del Certified Scrum Master (CSM) es más ámpliamente conocida que la Professional Scrum Master (PSM) y la Scrum Master Certified (SMC).
- Los costos de entrenamiento para PSM son (en promedio) más altos que los de CSM y SMC y no están disponibles en todo los países. Los costos de CSM suelen ser más altos que los de SMC.
- Los costos de adquirir y mantener la certificación CSM son mayores a las de SMC y PSM, siendo esta última la más económica ya que no se requiere pagar por mantener la certificación.
- El valor de la certificación CSM es muy cuestionado sobre todo si se emitió antes del 2012 (se otorgaba sin evaluación).
- Los materiales y la calidad de los cursos para CSM pueden variar mucho al no estar homologados.
- Los materiales proporcionados para PSM y SMC en sus capacitaciones están homologados (y según varios testimonios suelen ser buenos).
- La certificación SMC se basa en la prácticas descritas en su SBOK y no necesariamente en lo descrito en la Scrum Guide (texto de los creadores de Scrum).
- El valor de la certificación SMC es cuestionada por muchos miembros y organizaciones de peso en la comunidad Scrum.
- El marco de escalamiento más popular al momento (SAFe) sugiere fuertemente las certificaiones SAFe Scrum Master (SSM), Certified Scrum Master (CSM) y a la Professional Scrum Master (PSM) para obtener varias de sus certificaciones incluyendo la SAFe Avanced Scrum Master (SASM).
- SAFe ofrece la certificación SAFe Scrum Master (SSM) la cual está orientada a Scrum y su escalamiento en organizaciones grandes, pero no es el único modelo de escalamiento y no todas las organizaciones tienen o piensan usar esta aproximación.
- La certificación SAFe Scrum Master (SSM) debe ser renovada cada año por un costo, el cual es un plazo muy corto comparado con el resto de las certificaciones.
*Cifras correctas al tiempo de la publicación de esta entrada. Pueden cambiar sin previo aviso.
Algunos enlaces de interés:
El Origen Y Los Valores De Agile
El Enfoque De La Planificación Agile
Algunos libros que pueden ser de su interés:
Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
30 Comments
En las entradas anteriores sobre la experiencias de usario (Parte 1 y Parte 2) hablé de lo interesante y ventajoso que puede ser el diseño de experiencia de usuario, pero aun siendo así, la verdad es que esta disciplina tampoco puede hacerlo todo ni es la medicina para todas los casos.
El diseño UX no viene en unitalla para todos.
El diseño de experiencia de usuario no funcionará en todos los casos para toda la gente debido a nuestra condición humana en la que todos somos diferentes. Lo que funciona para una persona probablemente funciona de manera totalmente opuesta para otra, de modo que lo que el diseño UX puede hacer es únicamente procurar alguna experiencia específica para promover cierto comportamiento, pero NO puede fabricar, imponer o predecir con total exactitud una experiencia en si misma.
El diseño de experiencia de usuario NO puede replicar de manera literal la experiencia de un sitio web o aplicación en otro sitio web o aplicación, las experiencias de un usuario siempre serán diferentes entre servicios y productos, es por eso que cuando se diseña algo, ese diseño es adaptado para buscar ciertos objetivos, valores o procesos de producción pero siempre en función de una iniciativa en particular.
No existen métricas para evaluar al UX
Desafortunadamente no hay ningún indicador que pueda señalar directamente el rendimiento o la calidad del diseño de la experiencia de usuario, esto solo lo podremos saber con la suma de múltiples factores como las clásicas estadísticas de vistas a páginas, porcentajes comparativos, tasas de conversiones de usuario, reportes ventas, colocación y otras evidencias enecdóticas, pero no existe ningún código o algoritmo que evalúe la experiencia de usuario, por lo que es importante que los diseñadores UX y los responsables de proyectos y cadenas de producción trabajen juntos con todos los indicadores al alcance bien documentados para comparar el antes y el después y así justificar la inversión en UX.UX no es usabilidad ni diseño gráfico.
Todavía encuentro blogs, videos, comentarios, etc., donde se habla de usabilidad como sinónimo de experiencia de usuario, y si bien es cierto que la usabilidad juega un papel importante, NO son lo mismo. La usabilidad se refiere a la eficiencia con la que una interface se relaciona con las acciones de un usuario, mientras que UX se refiere a lo que siente y piensa una usuario con respecto al uso de un sistema completo y como se comporta en consecuencia.Algo parecido sucede a veces con el diseño gráfico, el cual desde luego tiene un rol preponderante, pero NO es UX. Es verdad que es importante que un sitio web o aplicación resulten estéticos, con uso inteligentes de contrastes, colores y comunicación visual, pero solo por nombrar un caso ¿qué pasa si para comenzar nuestro usuario es alguien que no puede ver?, ésta es solo una razón por la que otros factores también tienen un rol importante, como lo son por ejemplo la accesibilidad, la ciencia humana, la arquitectura de información, el análisis de contexto, el análisis y ejecución de pruebas, la mercadotecnia, la psicología, la correcta gestión del proyecto entre otros.Críticas al UX como profesión.
No todo el mundo ve el valor de un diseñador de UX, la mayoría de los argumentos que he escuchado o leído giran en torno ha los costos adicionales involucrados, la redundancia con actividades de otras áreas y/o el miedo/pereza al cambio.Otra observación que algunos pueden tomar como crítica, y admito es un argumento interesante, es que los diseñadores UX no se pueden “crear de cero” como una carrera o disciplina aislada, si no que es más bien el resultado de una “especialización” de personas que han sido diseñadores web o desarrolladores quienes eventualmente deciden profundizar en los temas relacionados al UX, haciendo así indispensable un “background” en programación, desarrollo multimedia, etc. y sumarlo a conocimientos posteriores para efectuar un buen diseño UX. Usted ¿qué piensa de esta postura?
No se puede negar lo innegable.
Ya había hecho un guiño a esta situación, pero la reitero, una organización o proyecto con presupuesto realmente pequeño y personal limitado no puede invertir en un especialista UX por lo tanto el desarrollador solitario, o la compañía compuesta por dos amigos tendrían que integrar algunos (los que puedan) de los conceptos de UX como parte de sus actvidades habituales, lo cual es visto como desventaja por unos y ventaja por otros.¿Más?
Por el momento es todo lo que mi experiencia y memoria dan para mencionar, pero si a usted se le ocurre algo más no dude en comentarlo 😉Algunos enlaces de interés:
Diseño de la Experiencia de Usuario (Parte 1)
Diseño de la Experiencia de Usuario (Parte 2)
El Enfoque de la Planeación Agile
Estos son alguno libros recomendables para saber más:
Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
2 Comments
Administración / Management / Desarrollo / Development / Diseño Web / Experiencia de Usuario / UX / Ideas / IT / Programación / Programming / Software¿Por qué no se utiliza el UX en su organización?
A lo largo de mi experiencia profesional trabajando en el mundo del desarrollo para Internet, me he topado con una enorme cantidad de discusiones y desacuerdos entre desarrolladores, diseñadores gráficos, project managers, clientes, jefes y un laaaargo etcetera de personas involucradas en el desarrollo de algún proyecto, de manera que muchos de ellos han sido renuentes a incluir procesos o personas explícitamente dedicadas el diseño de experiencia de usuario dentro de su organigrama de desarrollo o de personal, en otros casos, simplemente ignoran la existencia de tal disciplina (…así de triste).
El problema principal con las personas renuentes o que no conocen realmente acerca de la experiencia de usuario como disciplina, es que una vez que se les plantea la inclusión del proceso de UX, por lo general lo ven como un proceso que alarga los ya apretados tiempos de entrega (lo cual es una afirmación coja), o bien, hay gente que argumenta que el UX se “encima” con pasos de metodologías ya existententes (suspiro…esos amados procesos coporativos escritos en piedra). Con todo esto ¿porqué implementar UX en nuestros proyectos de desarrollo?.
¿Qué o quienes se benefician del diseño UX?
Si decimos en voz alta que cualquier sistema se beneficiaría de una sólida implementación de pruebas dirigidas a la experiencia de usuario, desde luego en pro de la satisfacción de este, seguramente encontraremos muy pocos o ningún argumento en contra y todos parecerán estar a favor de tan certera afirmación, pero en la práctica es ooootro cantar.
En la realidad siempre hay recursos y tiempo limitados y muchas organizaciones tienden a concentrar sus esfuerzos en el proceso de elaboración o ejecución per se, dejando descuidadas las estrategias de planeación, adaptación y mejora. Pero incluso en esta situación el diseño orientado a al experiencia de usuario puede ser beneficioso y vale la pena hacer el máximo esfuerzo por incluirlo en las tareas habituales de planeación, ejecución, monitoreo, pruebas y calidad. En mi experiencia (y no sin batallar un poco) he podido identificar algunos casos que se pueden ver particularmente beneficiados del diseño UX:
Sistemas complejos.
Entré más complejo un sistema más relevantes se vuelven la planeación adaptativa, el aprendizaje, la organización, la arquitectura progresiva y validación de condiciones de satisfacción para la correcta creación y uso de nuestro sistema. Mientras que invertir en un equipo interdiciplinario de personas que se dedicarán al UX podría ser excesivo para la elaboración de una pequeña página de presencia que solo contendrá algunos datos de contacto, en otros casos tenemos que el desarrollo de sitios, soluciones empresariales, aplicaciones web o móviles innovadoras o mucho más elaboradas, en donde se requieren de múltiples opciones, vistas y herramientas, y que además pretenden llegar a cada vez más usuarios, son las situaciones donde sin duda se verán ámpliamente los beneficios del UX.
Aquellos sitios y aplicaciones que simplemente muestran información extensa con pobre organización, que no ofrecen métodos de búsqueda efectivos, que priorizan torpemente la información, que antepone agendas propias antes de las necesidades reales del negocio y/o el usuario, que someten a sus usuarios a interminables formularios esperando que estos proporcionen información sin chistar y en una sola “sentada”, para finalmente brindar un servicio mediocre o malo, estarán proporcionando negligencia en cuanto a la experiencia de usuario y al final verán sumamente afectados el éxito, ganancias y/o longevidad de su producto o servicio. Son todos estos casos donde la UX cobra gran importancia para ayudar a prevenir o minimizar estas situaciones y lograr con ello que estos proyectos finalmente se perciban como eficientes, valiosos, exitosos y agradables tanto de ver como de utilizar.
Proyectos con presupuestos moderados y start-ups.
Sin duda las empresas pequeñas o las que apenas comienzan por lo general no cuentan con los recursos para contratar empleados dedicados 100% al la experiencia de usuario.
Otro hecho que podemos ver constantemente es que las empresas pequeñas y medianas en el afán de mantener costos bajos y priorizar entregables para obtener recursos, se concentran más en el proceso de producción o ejecución que en el de planificación, investigación y análisis para mejorar y adaptarse a nuevas condiciones, es decir, estas empresas giran alrededor del lanzamiento de un producto final.
Sin embargo, incluso estas organizaciones que pueden ser iniciativas pequeñas, pero que ya han logrado la venta de algún producto o servicio, comúnmente cuentan con una o más individualidades talentosas que son capaces de tomar diferentes roles en la organización según se necesite. Piense en ese programador, diseñador o persona entusiasta que ya está dentro de su organización y que por alguna razón parece tener cierta afinidad para crear cosas agradables y funcionales que son del gusto de clientes o usuarios. Ese tipo de talento es el que puede comenzar a entrenarse en los principios y procesos de la UX, y eventualmente comenzar a integrarlo al proceso común de desarrollo en la organización de manera incluso paulatina.
Cabe mencionar que las filosfías Lean y Agile puden potencializar mucho el correcto uso de UX gracias a sus enfoques adaptativos, iterativos, enfáticos en el aprendizaje y enfocados a la entrega de valor real más que un estricto apego a planes y procesos.
Empresas que desean reducir tiempos de entrega y costos.
Así como lo lee, a pesar de la suspicacia que despierta en algunos la implementación del diseño UX (como mencioanaba al principio de esta entrada), la integración de este puede acortar eventualmente los tiempos de desarrollo e incluso los costos del mismo.
Es verdad que con UX se deben agregar etapas adicionales a proceso de desarrollo que requieren de tiempo asignado, sin embargo en la teoría un diseñador UX realiza muchas de sus tareas paralelamente al trabajo que hacen los desarrolladores y diseñadores web, e incluso observará que mucho del trabajo que hacían estos ahora quedará en manos del mismo diseñador UX, también puede ocurrir que el trabajo que hacen un project manager, un scrum master, un product owner, un ingeniero de requerimientos, un arquitecto de información un analista de sistemas entre otros, puede verse realmente beneficiado y facilitado por el responsable del diseño UX, así potencialmente los costos causados por el bucle de revisiones y validaciones se verán reducidos y los otros miembros del equipo podrán pasar más tiempo productivo en su respectiva especialidad. Llendo incluso más lejos, la correcta y habitual implementación del diseño UX, al generar clientes más satisfechos eventualmente logrará traducirse en mayores beneficios para usted y su organización.
Enlaces de interés:
Diseño de la Experiencia de Usuario (Parte 1).
Diseño de la Experiencia de Usuario (Parte 3)
El Enfoque de la Planeación Agile
Estos son alguno libros recomendables para saber más:
Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
3 Comments
Desarrollo / Development / Diseño Web / Experiencia de Usuario / UX / Ideas / Programación / Programming / SoftwareLa Experienecia de Usuario siempre ha estado ahí
La primera vez que programé fue por ahí en la década de los 90s, y entonces desarrollé muchas cosas, de las cuales algunas funcionaban y otras (la mayoría) no o por lo menos no como esperaba, así la mayor parte de lo que desarrollaba en esos años eran solo experimentos para mi deleite personal o para cumplir con alguna tarea escolar. Eventualmente algunos de estos experimentos personales se volvieron más o menos populares entre algunos de mis compañeros de clase, o para decirlo en palabras más capitalistas y emprendedoras, comencé a vender tareas (de las clases de programación y relacionadas) por encargo a algunos de mis compañeros, sin embargo, en las primeras ocasiones en que vendí tareas observé que mis “clientes” no entendían del todo (o en lo absoluto) como utilizar los pequeños programas que les entregaba y me resultaba bastante molesto tener que explicar cómo diablos se usaban, y considerando que tenía que parecer que ellos lo habían hecho, me resultaba un problema. Durante un buen tiempo me la pasé pensando en como podía lograr hacer que mis compañeros entendieran más rápido mis programas.
En esos años su servidor era un ávido lector de comics, y entonces comencé a meditar en lo hábiles que eran los dibujantes y escritores de estas historietas para dar a entender cosas complejas con tan solo algunos trazos, algunas viñetas bien colocadas o algunos “globitos” con texto, !y entonces vino la epifanía!, rápidamente comencé a observar con más atención los libros ilustrados e historietas dirigidos a niños, adolescentes y adultos, después de un rato de planificación llegué a que debía cumplir con lo siguiente:
- Distinguir mis usuarios “tontos” de los “menos tontos” para determinar el grado de esmero para los siguientes pasos (no fuí para nada políticamente correcto).
- Asegurarme que mis compañeros explicaran BIEN que era lo que querían para comprenderlo sin ninguna duda (cosa nada fácil).
- Ser los más explícito pero breve que pudiera en todos los textos que presentaba (opciones, menús avisos, etc.).
- Así como hacían los comics, los juegos y esas raras computadoras de manzana de color, tratar de auxiliarme de colores para contrastar unos elementos de otros y si era posible usar imágenes que respaldaran a los textos (este punto era mi favorito).
Palabras más palabras menos, esos fueron los pasos que diseñé para tratar que mis “encargos” salieran a la primera, mis compañeros-clientes molestaran menos y obtener un poco de dinero o alimento (tortas, churros, frutsis, .etc) en el proceso. Quisiera decir que todo fue felicidad y viento en popa, pero escribir mis pasos fue más fácil que seguirlos cabalmente, pero sí puedo decir que aunque la lata de mis clientes no desapareció, sí se redujo drásticamente. Muchos años después caí en cuenta de lo que había hecho de manera ingenua, empírica, simplona y corta de hecho tenía un nombre: Diseño de Experiencia de Usuario.
¿Pero qué es la Experiencia de Usuario?
Si usted busca en la web encontrará muchas definiciones, pero para aportar algo con la propia, la “Experiencia de Usuario“, conocida en inglés como “User Experience” y abreviada como “UX” es la manera en que una persona (un usuario) se siente acerca de su interacción con un sistema, tal sistema puede ser un programa de computadora tradicional, un sitio web, una aplicación web o una aplicación móvil entre otros, todo desde luego en un contexto de desarrollo actual.
La anécdota personal con la que inicié este post fue una feliz coincidencia basada en algo de sentido común, pero en realidad hay gente verdaderamente dedicada al estudio en profundidad del diseño de sistemas pensado en el usuario como el elemento fundamental de cualquier sistema tecnológico, la persona que probablemente ha aportado más en este campo es el Dr. Donald Arthur Norman, un investigador de ciencia cognitiva, diseño y usabilidad.
El Dr. Norman fue el primero en hablar de manera realmente científica y formal de la importancia del diseño de sistemas centrado en el usuario (user-centered design), lo cual es, en términos generales, la idea de que cualquier diseño de sistema debe estar basado en las necesidades reales del usuario (simple pero profundo cual frase de filósofo chino).
¿Porqué es importante la Experiencia de Usuario?
Usted podría pensar: ¡Pues obvio, si me la paso matándome horas programando para tener contento al #$@&% usuario! pero como diría el Dr. Andrés Roemer “no te creas todo lo que piensas“, para nadie en México (donde vivo) y en América Latina es novedad que por lo general estamos un tanto atrasados con respecto a muchas prácticas del primer mundo, donde todo este tema del desarrollo de sistemas centrado en la experiencia de usuario ya lleva un rato tomándose bastante en serio, pero en nuestra región es algo que apenas comienza a cobrar fuerza, es decir, apenas nos estamos dando cuenta de la importancia real de elaborar estrategias, alcances, estructuración, codificación y diseño enfocados realmente en el usuario.
Antes de que alguien me tire tomatazos déjeme decirle algo, para ver si le resulta familiar, aquellos que llevamos tiempo trabajando en la industria del desarrollo hemos tomado decisiones basados en dos cosas principalmente:
- Los elementos e interacciones que construimos en los sistemas son basados en lo que nosotros creemos que funciona. Basamos la estética y la funcionalidad con muy poca idea de como el usuario final usará el sistema, es decir, diseñamos para nosotros mismos (¿dónde está ese documento donde se entrevistaron, evaluaron, cuantificaron, segmentaron a los usuarios finales y sus dispositivos?).
- Todo se elabora en base a lo que el “jefe de alguien quiere ver”. Sucede que todo el trabajo que realizamos está en función del gusto de un individuo con un jerarquía mayor, ya sea de nuestra propia organización o dentro de la del cliente, sí, hablo de ese sujeto que por alguna razón cree ser experto en todo, poseer un sentido común superior y desde luego tener mejor gusto que todos (¿dónde está el documento que dice que ese stakeholder será el único usuario del sistema o si será usuario en lo absoluto?).
Sin embargo, en los últimos años la Internet y por lo tanto la web ha evolucionado y crecido más en su alcance, los sitios en web se han hecho más complejos y con características cada vez más ricas, y por si fuera poco, hoy en día la gente tiene más medios para consumir información en Internet: teléfonos inteligentes y tabletas con diferentes tamaños y capacidades, más navegadores web junto con diferentes tipos de conexiones, y todo ello nos obliga a tener que utilizar estrategias más inteligentes para lidiar con nuestros clientes y usuarios.
Otro punto importante es el tema de la accesibilidad, lo cual se refiere a el acceso universal de los servicios y productos basados en Internet para personas con necesidades diferentes (como débiles visuales por ejemplo) o bien para personas que no cuentan con buenos anchos de banda o que aún utilizan dispositivos viejos.
Tomando en cuenta todos estos cambios, hemos podido observar que todos los productos y servicios que giran alrededor de la Internet y han sobrevivido a lo largo del tiempo son solo aquellos que han logrado adaptarse para seguir siendo útiles y agradables de usar. Así, la moraleja para los que desarrollamos es: todo lo que construimos hoy se convierte en la experiencia que deseamos para con los usuarios que usan lo que hacemos.
Algunos enlaces de interés:
Diseño de la Experiencia de Usuario (Parte 2)
Diseño de la Experiencia de Usuario (Parte 3)
El Enfoque de la Planeación Agile
Estos son alguno libros recomendables para saber más:
Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
2 CommentsCSS3 / Desarrollo / Development / HTML5 / Ideas / JavaScript / Programación / Programming / Software
Desde hace un tiempo todas aquellas personas que coqueteaban con el desarrollo de contenido multimedia pero que no tenían un perfil técnico (o como diría un antiguo colaborador: “programan poquito”) en los últimos años se han visto afectados y frustrados debido a que algunas de las herramientas que ya habían adoptado para estas labores se han visto relegadas para ciertos fines. Por ejemplo, los diseñadores gráficos que hacían elementos web como banners y headers con pequeñas animaciones, se han topado con que los clientes quieren cada vez menos al contenido creado con Flash y si hoy usted desea hacer contenido rico, animado y dinámico con los nuevos estándares sin duda requerirá de conocimientos sólidos de HTML5, Javascript y CSS3. La buena noticia es que están saliendo herramientas, que aunque quizá no cambian esta situación, sí pueden ser alternativas que hagan el terreno un poco más plano.
Adobe en sus esfuerzos por mantenerse como uno de los líderes en el mercado de herramientas destinadas a la elaboración de recursos gráficos e interactivos, lanzó hace casi 2 años una herramienta llamada Adobe Edge que pretendía ser algo así como la herramienta de autoría sustituta para Flash, lo cual no logró además de ser ampliamente criticada (yo fui uno de esos críticos mala leche), sin embargo Adobe no ha desistido y ha seguido desarrollando su herramienta, pero ahora con el nombre de Adobe Edge Animate, y no solo eso, si no que ahora este programa es parte de una suit de interesantes aplicaciones que juntas forman la “familia” Adobe Edge. Debo mencionar que mi experiencia con este software apenas se ha reiniciado, ya que lo probé cuando salió hace dos años y no me gustó, pero al ver que Adobe seguía trabajando en él, decidí darle otra oportunidad y probarlo nuevamente.
¿Pero qué es Adobe Edge Animate?, es una herramienta de desarrollo web basada en HTML5, Javascript-jQuery y CSS3 y por lo tanto hace al contenido que genera “compatible” con cualquier software que pueda interpretar HTML5 (en teoría), su UI es bastante similar a cualquiera familiarizado con las herramientas multimedia basadas en línea de tiempo, Adobe Edge Animate tiene un “stage” o área de trabajo basada en el motor Webkit que permite colocar y crear gráficos (jpeg, png, gif, svg), colocar texto, previsualizar animaciones, tiene panel de propiedades y desde luego la línea de tiempo.
La línea de tiempo utiliza “keyframes”, que así somo en Flash, ayudan a generar el “tween” entre ellos automáticamente. También se puede utilizar la herramienta Pin para animar, cada Pin permite modificar las propiedades de un elemento en algún punto de la línea de tiempo sin tener que hacer el “keyframe” de manera manual, de esta manera, usted puede crear una animación desde donde está el “playhead” hasta donde esta el Pin con todo y keyframe en un solo paso. Otra características interesante es que se pueden copiar y pegar animación de un elemento a otro, es decir, si usted tiene un circulo que se mueve de derecha a izquierda, y tiene un triángulo estático pero desea que se mueva de la misma forma que el círculo, usted únicamente copia la animación del círculo (no el elemento) y la pega en el triángulo sin tener que crear o hacer algo más.
También puede hacer un grupo de elementos y reutilizar este en otra animación, en otras palabras puede crear símbolos (para los acostumbrados a Flash), desde luego estos símbolos pueden tener animación interna. Aunque debo decir que hay algunos problemas de reposicionamiento cuando se cambia el tamaño de la página donde se está desplegando la animación y también cuando veo la animación en Safari, no he logrado encontrar una solución efectiva…aunque como menciono apenas estoy reutilizando la herramienta otra vez…o sea, soy novato en Adobe Edge.
Triggers!, así es, Adobe Edge utiliza mucho el mecanismo de los “triggers” para indicar que hacer cuando se llega a un determinado punto de la línea de tiempo (stop(), play(), etc.) o bien se pueden aplicar a un elemento en el área de trabajo directamente para dar respuesta a ciertos eventos, como el click del ratón o el “touch” en una tableta, todo ello por medio de una ventana separada (pop-up) de código. Si hay algún veterano del AS2 todo esto le va a recordar a la manera en la que se insertaba código en las versiones 3, 4 y 5 de Flash hace unos 14 años :p .
He de reconocer que Adobe mejoró bastante su Adobe Edge desde la primera vez que lo utilicé, el flujo de trabajo utilizando la herramienta Pin, las herramientas de “easing” para los elementos, el copiado y pegado de animaciones y algunos otros detalles, hacen de esta aplicación algo interesante para la creación de animaciones HTML5. La parte más decepcionante para mi es que al momento no soporta audio.
Estas son mis primeras impresiones del programa, y todas ellas las saqué gracias a que elaboré una pequeñísima y muy simple presentación para ilustrar una charla que tuve en la Facultad de Ingeniería Mecánica y Eléctrica de la Universidad de Colima, en ella se puede apreciar como diferentes navegadores responden con diferente rendimiento, lo mas notable son las diferencia en velocidad de despliegue, calidad en el rendereo de imágenes png (que son las que utilicé) y algunos problemas de posicionamiento en Safari, el mejor resultado lo obtuve en Chrome, si alguien desea probar de lo que hablo y descargar este pequeño recurso para estudiarlo, modificarlo y/o destrozarlo adelante (coloco los archivos fuentes (requieren Adobe Edge Animate) y los archivos publicados, en 2 diferentes zips):
*Haga clic en el nombre:
*Haga click en cada ícono central, de izquierda a derecha:
Update. Hace un mes aproximadamente salió Adobe Edge Animate CC que sería la versión 2.0 del programa.
Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
2 Comments
CSS3 / Desarrollo / Development / Destacadas / Featured / Diseño Web / HTML5 / Ideas / Programación / Programming / SoftwareHTML5, HTML Living, HTML .Next, y ¿HTML6?
Durante las charlas que he tenido oportunidad de dar ante una audiencia, en algún blog o bien por alguna red social me he topado con algunos planteamientos que hacen referencias a HTML6 (OMG!!!!) o bien a HTML Living y/o HTML .Next, a que HTML5 ya caducó (OMG again!!!) y otra serie de afirmaciones o preguntas que van de lo veraz a lo absurdo, pasando por verdades a medias. Para aclarar un poco la situación he decidido hacer esta entrada y describir lo que pasa con HTML5, HTML Living, HTML .Next, y HTML6.Algo de contexto.
HTML5 ha sido una exitosa tecnología apoyada por muchas organizaciones con diferentes perfiles e intereses relacionados de diferente forma con el desarrollo web, como son empresas, universidades, organizaciones civiles,etc., pero el grupo más representativo y con mayor historia aunque no siempre el más influyente, ha sido el World Wide Web Consortium (W3C) el cual ha generado muchas recomendaciones para la world wide web, estas recomendaciones van dirigidas mayormente al desarrollo del HTML y tecnologías conexas. Sin embargo la W3C no ha sido el único grupo haciendo recomendaciones y trabajando constantemente para evolucionar el HTML y tecnologías relacionadas desde su perspectiva, otro de estos grupos el cual sin duda obtuvo gran relevancia es el Web Hypertext Application Technology Working Group (WAHTWG). Ambos grupos han sido importantes gracias a sus iniciativas y a sus miembros, los cuales incluyen entre muchos otros a organizaciones tan influyentes como Google, Microsoft, Apple, Adobe, Mozilla Fundation y Opera Software.
Enlarge
World Wide Web Consortium logo
En el 2007 ambos grupos deciden unir fuerza y utilizar la especificación HTML propuesta por WAHTWG como punto de partida para continuar con el desarrollo de la especificación HTML, lo cual se conoció eventualmente como HTML5. Dado esto, todas las nuevas especificaciones se comenzaron a publicar de manera oficial por me dio de W3C, sin embargo el principal y único editor oficial con la facultad de publicación fue el miembro de WAHTWG, Ian Hickson quien a su vez trabaja con Google.
El ascenso de HTML5.
Gracias al esfuerzo conjunto de ambas organizaciones y sus miembros HTML5 comenzó a hacerse popular, adquiriendo muchísima más relevancia extra gracias el exponencial crecimiento de dispositivos móviles y las ventajas técnicas que representa HTML5 sobre las alternativas dominantes hasta el momento. El punto quizá más relevante para la popularidad de HTML5 surgió gracias a las polémicas declaraciones del entonces CEO de Apple Steve Jobs, quien puso de manifiesto las desventajas de desarrollar para los nuevos dispositivos utilizando el entonces estándar de facto en la realización de implementaciones de rico contenido gráfico, Flash (en internet80 ya dedicamos un a larga perodata a este tema algunas entradas).
Desde luego un factor esencial para el éxito de HTML5 es que W3C incluye entre sus miembros a aquellos que también son los fabricantes de los principales navegadores, y que estos tratando de apoyar la nueva especificación dieron soporte a HTML5 haciendo que Chrome, Explorer, Safari, Mozilla y Opera lo soportaran aunque con diferentes grados de avance en su implementación. Todas estas circunstancias favorecieron a que HTML5 pudiera tener nombre, presencia, crecimiento e incluso logotipo que lo identifica ante propios y extraños.
El drama.
Desafortunadamente no todo es felicidad, como sucede en todas las organizaciones (creo) existe desacuerdos y complicaciones. Desde el 2011 se escapaba uno que otro rumor que giraba en torno a diferencias entre W3C y WAHTWG, sin embargo el punto de quiebre es cuando efectivamente estas organizaciones deciden separarse a mediados del 2012 e Ian Hickson publica una carta abierta donde explica el status de la relación entre ambos grupos.
Enlarge
Web Hypertext Application Technology Working Group logo
Pero ¿que pasó en realidad? bueno pues todo son versiones de diferentes fuentes y no puedo corroborarlo todo, pero si me permite resumiré todo lo que he leído en 3 puntos persistentes en la mayor parte de las fuentes consultadas:
- W3C está más preocupado por la estandarización de HTML mientras que WAHTWG está más preocupado por la implementación de nuevas funcionalidades para HTML. Esto significa que la W3C está priorizando más el orden y la consistencia de la especificación para que los fabricantes de navegadores, desarrolladores y otros interesados cuenten con una referencia más precisa y mucho más compatible, mientras que WAHTWG considera que lo más importante es dar más y mejores características innovadoras a HTML para ampliar la gama de posibilidades en la creación de todo tipo implementaciones.
- Descontento del editor. Ian Hickson es una persona que sin duda se ha hecho de un nombre en la industria y comunidad web ya que ha trabajado para diferentes empresas de mucho peso y ha colaborado con el desarrollo de varias especificaciones importantes, actualmente como empleado de Google y anteriormente como único editor oficial de la especificación HTML5 , parte de su trabajo consistía en analizar, corregir y conciliar las diferencias de las propuestas técnicas de la W3C y WAHTWG con respecto a la especificación, lo cual lo llevó eventualmente manifestar su inconformidad con las implicaciones y diferencias entre las propuestas y en tener que unificarlas. Otro factor de desacuerdo es la visión de Hickson acerca de irrelevancia de usar versiones en la especificación HTML, ya que desde su punto de vista no debería existir HTML4, HTML5 , HTML6, etc., sino simplemente HTML con su intrínsica evolución.
- Intereses y DRM. Hasta el día de hoy existe muchas críticas hacia la W3C, ya que varios grupos argumentan que la insistencia de este grupo por estandarizar HTML obedece principalmente al interés de las empresas más grandes que son miembros de la organización ya que buscan maneras de patentar y hacer desarrollos cerrados, lo que incluye la posibilidad de integrar DRM a la especificación. Algunas de las voces que suman ha estas críticas son la Free Software Foundation, Web Content Accessibility Guidelines Working Group (WCAGWG), la propia WAHTWG y su miembro Ian Hickson. Pese a todo la recomendación para DRM en HTML5 es hoy ya una realidad que fue publicada en Septiembre del 2017 como la recomendación Encrypted Media Extensions (EME), por lo que pronto verá a Netflix, HULU, Amanzon, etc. echando mando de esto para ofrecer sus servicios.
Las consecuencias…HTML Living y HTML .Next
La especificación HTML5 ha tenido diferentes “deadlines”…2011, 2012, 2014, 2022, todos estos años han sido mencionados para terminar la especificación, pero la verdad sea dicha, nadie sabe a ciencia cierta cual será la fecha final o la versión buena, tampoco si el nombre se mantendrá o cambiará, ni siquiera todas las agrupaciones mencionadas, ya que todo obedece a muchos factores incluyendo desacuerdos y reconciliaciones (sí, cual telenovela mexicana de adolecentes dramáticos y despechad@s).
W3C extraoficialmente hizo una especie de corte en 2014 para dejar en una especie “cierre de etapa” a la especificación HTML5 y desde ahí comenzarón a usar el término HTML .Next, HTML Next (sin el punto), HTML /Next o HTML5 Next. Por su parte, WAHTWG ha comenzado con lo que llama la especificación HTML Living para dar nombre a los avances de sus especificaciones.
¿HTML6?
Permítame aclaro esto de una vez por todas, hoy NO EXISTE ALGO QUE SE LLAME HTML6, lo que a algunas personas les ha dado por llamar HTML6 es precisamente al conjunto de los conceptos HTML Living y HTML .Next, los cuales cada navegador soporta a discreción, HTML6 NO es un nombre oficial ni nada por el estilo, mañana tal vez, pero hoy no lo es.
¿Cómo nos afecta esto a los desarrolladores?
!No lo sabemos!, antes de que cunda el pánico y corra a buscar libros y manuales de HTML Living y HTML .Next, la realidad es que la última palabra la tendrán los fabricantes de navegadores que son los que decidirán a que especificación apoyar en su momento, pero tenga presente que las cosas en el mundo de la tecnología cambian muy rápido y a veces de manera inesperada, y que las empresas y las organizaciones son finalmente dirigidas por personas que pueden cambiar de opinión en cualquier momento, ¿alguien se acuerda del choque Blu-Ray VS HD-DVD, donde supuestamente ganó el BR? (aunque el verdadero ganador fue el streaming). Por otro lado, si quiere saber el peor de los casos, este sería que los desarrolladores tuviéramos que lidiar con varias especificaciones HTML.
¿Debería dejar de aprender HTML5?
NOOO!! no cometa ese error, HTML5 sigue vigente y avanzando, hoy en día la realidad es que las especificaciones HTML Living y HTML .Next más populares terminan ciendo integradas a la especificación de la W3C, es decir, ambas especificaciones parten evolucionan y regresan a la especificación de HTML5, ya que los navegadores usan todo lo que perciban como mejora a pesar de los desacuerdos, de manera que es todo lo contrario, hay que continuar aprendiendo HTML5 .
Para saber más:Can I use (una lista detallada de características HTML5 y su estado de implementación en la mayoría de los navegadores de escritorio y dispositivos móviles)The Burning Edge (developments in nightly builds for Firefox)Algunos libros recomendables:Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
No Comment
CSS3 / Desarrollo / Development / Diseño Web / Experiencia de Usuario / UX / HTML5 / JavaScript / Programación / Programming / Software
Arrastrar y Soltar en HTML5
Sin duda la posibilidad que introdujo HTML5 para Arrastrar y Soltar de manera nativa representó un avance, esto sin duda fue una novedad ya que en la era pre-HTML5, la única manera de lograr esto era con la utilización de complejas operaciones con JavaScript, por lo que la mayoría de los desarrolladores terminábamos utilizando alguna librería como JQuery, MooTools u otras para contar con la funcionalidad de Arrastrar y Soltar (Drag and Drop), o si la situación requería de mucha interactividad y gráficos la utilización de Flash era casi imperiosa. La clase nativa para Arrastrar y Soltar de HTML5 lleva un tiempo existiendo pero tenía varios problemas que se han ido solucionando poco a poco. El principal problema quizá era que los ejemplos que se podía encontrar por ahí, continuamente solo funcionaban en un navegador y no en los demás, pero los fabricantes han ido homologando cada vez más la clase aunque no todos todavía. La clase aún no es totalmente perfecta y tiene aún varios detractores y críticos muy enfáticos, sin embargo, posee varias ventajas sobre otras opciones. En esta entrada abordaré lo que necesita saber para comenzar a utilizar la clases Arrastrar y Soltar de HTML5 explicando sus puntos más básicos e importantes. Puede ver el ejemplo que a continuación explicaré en este enlace, comencemos…
Ventajas sobre otras implementaciones Arrastrar y Soltar
Como mencioné, he podido encontrar que en varios blogs aseguran que el Arrastrar y Soltar de HTML5 no debería ser utilizado, a lo cual me gustaría contra argumentar, sobre todo porque la clase me ha sido de gran ayuda últimamente:
- Interacción con otras aplicaciones o aplicacion de derivadas. La implementación del Arrastrar y Soltar de HTML5 permite la interacción entre iframes e incluso entre ventanas de navegadores. Si me permiten ser un poco entusiasta en este punto, invito a quien sea a que intente implementar un Arrastrar y Soltar entre iframes y/o ventanas utilizando librerías JavaScript…¡el horror!….
- El framework nativo es independiente de terceros. Tener una clase nativa siempre tiene la ventaja de independencia en cuanto a las situaciones que pueden rodear y afectar al desarrollo de un tercero, lo que evidentemente no sucede con las alternativas que presentan JQuery, MooTools, Dojo, etc., ahí la dependencia es total.
- Interacción con aplicaciones que no son web. Un ejemplo de esto es que ahora es posible arrastrar un archivo del escritorio a una aplicación en el navegador.
Las bases, paso a paso
Para facilitar un poco las cosas he organizado esta entrada en pasos, cada paso describe un concepto o varios que iré ejemplificando.
1. Especificando los elementos arrastrables (draggable object)
Lo primero que necesita hacer es definir que nodo o nodos del documento HTML5 serán susceptibles de ser arrastrados, en HTML5 casi cualquier elemento visible puede ser arrastrado, como son imágenes, divs, links, etc., para lograr esto se utiliza el atributo draggable=”true”. Por ahora no aplica el manejo de valores falso o verdadero a la manera clásica de XHTML en los navegadores que he probado, es decir, al atributo no funciona si lo escribimos como draggable=”draggable” incluso dentro de un archivo xhtml. También hay elementos que son arrastrables por default para algunos navegadores, como lo son imágenes y selecciones de texto. En el sigiente ejemplo se muestran algunos cuadros que serán los elementos arrastrables para este ejemplo:
<div id="squares"> <div class="square" draggable="true"> <h1>1</h1> </div> <div class="square" draggable="true"> <h1>2</h1> </div> <div class="square" draggable="true"> <h1>3</h1> </div> </div>Acompañando este código colocamos los siguientes estilos CSS:
.square { height: 100px; width: 100px; border: 1px solid #000; float: left; background-color: #eee; margin: 5px; -webkit-box-shadow: inset -1px -1px 3px #000; -ms-box-shadow: inset -1px -1px 3px #000; box-shadow: inset -1px -1px 3px #000; text-align: center; cursor: move; } h1 { font-size: 75px; } .target { height: auto; min-height: 150px; width: 320px; float: left; border: 1px solid #000; margin: 5px; background-color: #ccc; -webkit-box-shadow: inset -1px -1px 3px #000; -ms-box-shadow: inset -1px -1px 3px #000; box-shadow: inset -1px -1px 3px #000; text-align: center; cursor: move; }En navegadores webkit (Chrome, Safari) y Firefox el código anterior nos presenta una serie de cuadrados que originarán una especie de “fantasma” si intenta arrastrarlos, ahora hay que agregar los eventos apropiados. Resultado:
2. Asignando eventos a los elementos arrastrables (Drag Objects)
Ahora que tenemos los objetos que deseamos se puedan arrastrar, debemos asignarles algunos eventos utilizando JavaScript, estos objetos pueden disparar lo siguientes tres eventos:
- dragstart. Se dispara cuando el usuario comienza a arrastrar el objeto.
- drag. Se dispara cada vez que el puntero del mouse se mueve mientras que un objeto está siendo arrastrado.
- dragend. Se dispara cuando el usuario suelta el botón mientras un objetos está siendo arrastrado. Estos eventos se asignan como lo hace normalmente JavaScript o la librería de su preferencia. Vamos a agregar unos cuantos elementos al código HTML:
<div id="squares"> <div class="square" draggable="true"> <h1>1</h1> </div> <div class="square" draggable="true"> <h1>2</h1> </div> <div class="square" draggable="true"> <h1>3</h1> </div> </div> <p id="event"></p> <p id="status_drag"></p> <p id="status_over"></p> <p id="status_drop"></p>Agreguemos el siguiente código JavaScript para asignar los eventos descritos a nuestros cuadros:
/* * En el evento dragstart se coloca un mensaje que se verá muy brevemente * o quizá no se note, cuando el usuario inicia el arrastre */ function dragStartEvent(e) { eventStatus.innerHTML = "evento dragStart" } /* * El evento drag reporta al usario cuando inicia y que un arrastre * está actualmente en progreso */ function dragEvent(e) { eventStatus.innerHTML = "evento drag." dragStatus.innerHTML = "Arrastrando en este momento."; } /* * El evento dragover despliega un mensaje cuando es llamado y otro que * que indica que el arrastre ha terminado */ function dragEndEvent(e) { eventStatus.innerHTML = "evento dragend." dragStatus.innerHTML = "Arrastre terminado." } //variables para elementos informativos var eventStatus = document.getElementById('event'); var dragStatus = document.getElementById('status_drag'); //variable para alamacenar todos los divs que usan la clase square var squareItems = document.querySelectorAll('.square'); //ciclo para asignar los eventos a cada cuadro (div square) [].forEach.call(squareItems , function(squareItem) { squareItem.addEventListener('dragstart',dragStartEvent, false); squareItem.addEventListener('drag',dragEvent, false); squareItem.addEventListener('dragend',dragEndEvent, false); });Este código deber ser llamado cuando el documento HTML está cargado, note como simplemente se asignaron los eventos y estos despliegan mensajes cuando son disparados.
3. Asignando eventos al elemento objetivo (Drop Object)
Hasta ahora hemos logrado arrastrar elementos por la ventana, pero tenemos que asignar algún objeto en donde los elementos arrastrables puedan ser soltados, a este elemento lo llamaremos objetivo o drop target. Al elemento objetivo o drop target le podemos asignar los siguientes eventos:
- dragenter. Se dispara cuando un objeto arrastrable es el primero en arrastrase dentro de un objeto.
- dragover. Se dispara cuando un objeto arrastrable es arrastrado dentro de un objeto. Hay que tener presente que si se desea que el objeto que está siendo arrastrado pueda ser soltado dentro de otro, debe cancelar el comportamiento por default de este.
- dragleave. Se dispara cuando un objeto arrastrable es arrastrado fuera de un nodo objetivo.
- drop. Se dispara cuando un objeto arrastrable es soltado dentro de un nodo objetivo. Si desea convertir un objeto en un elemento o nodo objetivo que permita soltar elementos arrastrables, debe de asignar los eventos dragover y drop de manera obligatoria, es fácil entender porque el evento drop debe ser usado, pero quizá no sea tan claro porque dragover también, la razón es porque el elemento que se está arrastrando puede tener otro funcionamiento que no se desea cuando se suelta, por ejemplo, si está arrastrando un enlace y no previene el comportamiento por default, cuando suelte este elemento el navegador se direccionará a la URL del enlace como si usted hubiera hecho un clic normal, lo que no es deseable mientras se arrastra y se suelta el elemento. Al código que tiene actualmente, agregue al final el elemento objetivos para soltar el elemento:
<div id="target1" class="target">Suelte elementos aquí</div>
Agregaremos dos variables solo para alertar cuando se disparan los nuevos eventos y tener mejor idea de que el elemento objetivo está siendo efectivamente afectado.
var overStatus = document.getElementById('status_over'); var dropStatus = document.getElementById('status_drop');Y claro el código para asignar los nuevos elementos:
dropItem.addEventListener('dragover', dragOverEvent, false); dropItem.addEventListener('drop', dropEvent, false);Los otros ventos que no incluí no son indispensables (dragenter y dragleave) pero son útiles, por ejemplo, para ofrecer más indicadores visuales al usuario y hacer una experiecia más intuitiva, pero por ahora lo omito para mayor claridad, si desea más ejemplos incluyendo estos eventos, recuerde que en el pedir está el dar 😉 Resultado:
4. Transferecia de datos del elemento arrastrable al elemento objetivo (Datratrasfer object).
En este punto está casi todo listo, pero donde culmina todo lo que hemos hecho es en la transferencia de datos del elemento que estamos arrastrando. Por ahora, aunque nuestro elemento parace estar haciendo todo bien, aún no lo logra ser “soltado” dentro del elemento objetivo como esperaríamos, es aquí donde la transferencia de datos hace su magia. Lo que se necesita es la propiedad dataTransfer y sus métodos setData() y getData(). Lo primero es utilizar el método setData() dentro de uno de los eventos asignados al elemento que se arrastra, usualmente se utiliza el evento dragstart, por parte de los eventos del elemento objetivo, estos pueden recibir los datos transferidos en algunos de sus eventos asignados, es ahí de donde se utiliza getData(), entonces: setData(format, data). Establece la información que se intercambia entre el nodo que se arrastra y y el nodo objetivo. El parámetro format establece el tipo de dato que se va a intercambiar, hasta ahorita los únicos tipos de dato que existan son “text” y “url” (se usa el formato de mimetype). El parámetro data es el información persé que sera intercambiada, lo cual es una cadena de texto, comunmente se utiliza innerHTML. getData(format). Recupera la información que fue previamente asignada por setData(), el setData puede estar incluso en otra página, incluso en otro navegador. El parámetro format es el tipo de dato asociado con lo que se espera, los tipos de dato pueden ser “text” y “url” (se usa el formato de mimetype). Ahora utilicemos lo que hemos aprendido en nuestro código. Dentro del evento dragstart coloquemos la siguiente línea:
e.dataTransfer.setData('text/html', this.innerHTML);Con la línea anterior ha preparado la información que se va a transferir en el arrastre, ahora toca el turno de indicarle al nodo objetivo cual es información que va a recibir cuando el usuario suelte el elemento que está arrastrando, sin más agreguemos las siguientes líneas de código al evento drop:
var dropedelement = document.createElement('span'); dropedelement.innerHTML = e.dataTransfer.getData('text/html'); this.appendChild(dropedelement);Para terminar.
El código JavaScript completo debería lucir aproximadamente de la siguiente manera:
/* * En el evento dragstart se coloca un mensaje que se verá muy brevemente * o quizá no se note, cuando el usuario inicia el arrastre */ function dragStartEvent(e) { eventStatus.innerHTML = "evento dragStart."; overStatus.innerHTML = ""; dropStatus.innerHTML = ""; e.dataTransfer.setData('text/html', this.innerHTML); } /* * El evento drag reporta al usario cuando inicia y que un arrastre * está actualmente en progreso */ function dragEvent(e) { eventStatus.innerHTML = "evento drag."; dragStatus.innerHTML = "Arrastrando en este momento."; } /* * El evento dragover despliega un mensaje cuando es llamado y otro que * que indica que el arrastre ha terminado */ function dragEndEvent(e) { eventStatus.innerHTML = "evento dragend."; dragStatus.innerHTML = "Arrastre terminado."; } /* * El evento dragend despliega un mensaje cuando es llamado y otro que * que indica sobre que elemento objetivo se arratra actualemte, si es * el caso */ function dragOverEvent(e) { if (e.preventDefault) { e.preventDefault(); // Necesario para permitir soltar. } eventStatus.innerHTML = "evento over."; overStatus.innerHTML = "Elemento arrastrable sobre " + this.id; } /* * El evento drop despliega un mensaje cuando es llamado y otro que * que indica en que elemento objetivo se ha soltado el elemento */ function dropEvent(e) { eventStatus.innerHTML = "evento drop"; dropStatus.innerHTML = "Se ha soltado un elemento dentro de " + this.id; var dropedelement = document.createElement('span'); dropedelement.innerHTML = e.dataTransfer.getData('text/html'); this.appendChild(dropedelement); } //variables para elementos informativos var eventStatus = document.getElementById('event'); var dragStatus = document.getElementById('status_drag'); //variables para elementos informativos var overStatus = document.getElementById('status_over'); var dropStatus = document.getElementById('status_drop') //variable para alamacenar todos los divs que usan la clase square var squareItems = document.querySelectorAll('.square'); var dropItem = document.getElementById('target1'); //ciclo para asignar los eventos a cada cuador (div square) [].forEach.call(squareItems , function(squareItem) { squareItem.addEventListener('dragstart',dragStartEvent, false); squareItem.addEventListener('drag',dragEvent, false); squareItem.addEventListener('dragend',dragEndEvent, false); }); dropItem.addEventListener('dragover', dragOverEvent, false); dropItem.addEventListener('drop', dropEvent, false);Lo que obtenemos tiene este aspecto después de arrastrar todos los elementos:
Note que este ejemplo copia los elementos en lugar de moverlos (no elimina el elemento original) pero usted puede hacerlo si lo desea. Por supuesto se pueden hacer implementaciones un tanto más sofisticadas, pero por ahora usted ha cubierto las bases para posteriormente hacer un uso más interesante e intenso de la la clase Arrastrar y Soltar de HTML5. Si usted tiene alguna opinión, crítica, aportación o cualquier otra cosa, deje un comentario en esta entrada, o bien envíelo a @ManuGekko o @RealInernet80 en Twitter.Otros enlaces de interés:
Arrancar con HTML5 Curso de Programación
Transiciones y Transformaciones en Botones (CSS3 y HTML5)
Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
