Cómo generar certificados HTTPS para desarrollo local que no produzcan errores

19/01/2019
Artículo original

Ya hace mucho tiempo que la Web se ha vuelto "segura", con la lista de sitios que utilizan HTTPS creciendo cada día y alcanzando un porcentaje muy alto del total.

Además de los sitios y aplicaciones que están en producción y utilizan HTTPS, el uso de conexiones seguras se está volviendo imprescindible también a la hora de desarrollar. El principal motivo es que cada día más APIs de HTML5 requieren el uso de HTTPS para poder funcionar. Por ejemplo, la API de geolocalización, la de notificaciones o la de service workers entre otras muchas. Debido a ello, si necesitamos desarrollar aplicaciones con ciertas características, no nos queda más remedio que utilizar también HTTPS en nuestros equipos de desarrollo para poder probar y afinar el código.

Hace poco os contaba cómo podías solucionar en parte esta necesidad gracias a una interesantísima herramienta llamada ngrok que lo que hace es exponer hacia Internet cualquier sitio web local, de modo que lo pruebas en tu máquina pero saliendo a Internet y volviendo a entrar en ella desde un dominio externo.

ngrok es una utilidad genial y con muchas aplicaciones, pero ¿no sería mejor para desarrollar poder probar directamente contra localhost con HTTPS y sin necesidad de una vuelta tan grande? Es más, ¿no sería incluso mejor si pudiésemos desarrollar usando en local el mismo dominio que tendrá la aplicación final (o incluso uno inventado) con conexiones seguras incluidas?

Te voy a contar cómo puedes montar un entorno con estas características de manera sencilla en cualquier sistema operativo de escritorio (Windows, Mac y Linux).

El problema con los certificados HTTPS auto-firmados para localhost

Crear un certificado HTTPS para usar con el "dominio" localhost es bastante sencillo de conseguir en la mayor parte de los servidores web que se usan en producción. Por ejemplo en nginx o en Apache en Linux o Mac gracias a OpenSSL y también en Windows con Internet Information Server.

Estos certificados en realidad no son válidos ya que no están firmados por una entidad certificadora de confianza (se auto-firman por la propia máquina local), y cuando nos conectamos a un sitio web local que los utilice, pasa esto:

Nos sale una advertencia del navegador y tenemos que desplegar una zona oculta y seguir adelante. Esto en Chrome. En Firefox es incluso más complicado. Una vez que lo aceptamos ya nbo vuelve a salir mientras no cerremos el navegador, pero tenemos el recordatorio constante en la barra de tareas de que el certificado no es válido:

Sería mucho mejor tener un certificado verdaderamente válido para localhost. No solo eso, como decía antes, sería genial poder usar directamente el dominio real de la aplicación en local, y dotarlo de un certificado HTTPS válido también.

Vamos a ver cómo lograrlo gracias a una pequeña utilidad.

Crea tu propia entidad certificadora "virtual" con un solo comando

mkcert es una pequeña utilidad creada por el "crack" programador italiano Filippo Valsorda. Filippo ha trabajado en Cloudflare en programación relacionada con la criptografía, y actualmente está en Google en Nueva York en el equipo del lenguaje Go y en proyectos de seguridad y criptografía.

En junio de 2018 creó la utilidad llamada mkcert, que es gratuita y Open Source. mkcert permite crear certificados digitales para cualquier dominio, incluido localhost, que son siempre válidos para usar en la máquina local.

Lo consigue usando un truco interesante: en lugar de generar certificados auto-firmados como los que hemos visto, crea una autoridad certificadora "virtual" local, que se añade a las entidades raíz de confianza del sistema. Los certificados que genera van firmados por esta autoridad local, y como el sistema confía en ellos, tu navegador los ve como un certificado normal y corriente y muestra el iconito del candado de confianza. Fuera de tu máquina no valdrán para nada, pero en local son certificados de tanta confianza como cualquier otro. Justo lo que queremos para poder desarrollar en local sin problema.

¡Estupendo, vamos a probarlo!

Instalando la entidad certificadora "virtual" con mkcert

El uso de mkcert no podría ser más sencillo. Lo único que hay que hacer es descargar el ejecutable apropiado para tu sistema operativo desde la zona de "releases" del proyecto en Github. Por ejemplo, en mi caso la versión para Windows:

Descargas disponible para mkcert

Este ejecutable es ya el programa. No tiene dependencias ni necesita instalación. Es descargar y usar, lo cual es muy de agradecer. Eso sí, por sencillez de uso yo le cambio el nombre por defecto (que tiene la plataforma y la versión) y le dejo simplemente mkcert.exe. Cópialo a una carpeta donde lo tengas a mano para cuando lo necesites.

Para utilizarlo debes abrir una línea de comandos en Windows, o un terminal si estás en Mac o Linux. Ni siquiera necesitas elevar los privilegios para usarlo.

OJO: en Windows la protección de seguridad Smart Screen, al no identificar el programa, saca un aviso de que puede ser peligroso utilizarlo. Lo puedes ejecutar igual pulsando sobre el enlace y luego sobre la opción de continuar de todos modos:

Smart Screen en acción

Si lo pasas por VirusTotal refrendará que es un programa inocuo:

El programa no marca ningún positivo en VirusTotal.com

Lo primero que debes hacer es instalar la entidad certificadora "virtual" que se usará para gestionar los certificados. Esto solo tienes que hacerlo una vez, luego ya no vuelve a ser necesario. Para ello escribe:

mkcert -install

Y el sistema te mostrará un aviso de seguridad indicándote de que se va a instalar un certificado raíz de confianza para tu entidad certificadora. Aceptas y listo.

Animación que muestra la ejecución del comando y el aviso de seguridad

En Windows puedes comprobar que el certificado raíz está instalado haciendo lo siguiente:

  1. Busca la utilidad mmc.exe (la Microsoft Management Console) y ejecútala (necesitarás privilegios de administrador).
  2. Añade el complemento de certificados para el usuario actual desde el menú Archivo tal y como se muestra en esta animación:

Animación que muestra cómo añadir el complemento a MMC

3- Si ahora vas al nodo Trusted Root Certificate Authorities y ves los certificados, verás uno cuyo nombre empieza por "mkcert", que es el de la autoridad raíz virtual. Si haces doble-clic sobre él para examinarlo verás que su utilidad es la de firmar certificados:

Muestra el certificado raíz en MMC

Muestra el certificado raíz y sus propiedades

¡Genial, todo correcto! Ahora vamos a generar un certificado, que es lo que necesitamos.

Generando certificados con mkcert

Hacerlo es muy sencillo: basta con ejecutar mkcert seguido del nombre o nombres de dominio para los que queremos generar certificados. Por ejemplo, para un certificado válido para localhost:

mkcert localhost

Esto genera por defecto un certificado digital y un archivo de clave privada en formato PEM, muy común y que contiene la información en formato de texto codificada como Base64.

Este tipo de certificados son los más comunes en servidores en Mac o Linux y será lo que necesitas si estás en estos sistemas o si usas Apache o nginx. Sin embargo, para Windows deberías generar el certificado en formato PKCS 12, que guarda la información protegida con una contraseña. Para ello solo tienes que usar el parámetro -pkcs12, así:

Generación del certificado en formato PKCS 12

Esto generará el certificado digital en un único archivo con extensión .p12 que ya contiene tanto el certificado como la clave privada para encriptación.

Del mismo modo que lo haces para localhost, también puedes generar certificados para cualquier otro dominio, de modo que luego puedas simular que tu servidor local es dicho dominio, y así desarrollar, incluso, usando el dominio final que tendrá la web o la aplicación:

mkcert localhost www.dominio.com otrodominio.es

Como ves, se pueden especificar varios certificados en el mismo comando y se generará un único certificado para todos ellos.

Con esto conseguiremos disponer de certificados HTTPS que nos valen exactamente igual que certificados reales, solo que será nuestra máquina la única que los de por válidos.

Gracias a ellos podremos desarrollar en local del mismo modo que si estuviésemos trabajando contra el servidor real, lo cual es una gran ventaja.

Ahora lo único que nos faltaría es incorporarlos a la lista de los certificados de la máquina y asignarlos a un sitio web. Esto dependerá de tu sistema operativo y del servidor web que utilices.

En mi próximo post te explicaré cómo puedes usar estos certificados con Internet Information Server Express (IIS Express) en Windows, que no es una cosa muy directa que digamos.

Mientras tanto ¡espero que este post te haya resultado útil!

Plastic SCM Mergebot: automatizando tu pipeline de desarrollo

18/01/2019
Artículo original

Plastic SCM Mergebot: automatizando tu pipeline de desarrollo

Tradicionalmente muchos equipos de desarrollo cuentan con la figura del integrador o build master encargado de realizar las integraciones de código (merges) de cada una de los feature branch que pueda tener el proyecto que se esté implementando. En otros casos, es directamente cada desarrollador quien se ocupa de realizar sus propios merges de las ramas ya revisadas. En ambos casos la necesidad de la intervención manual representa un freno para la escalabilidad del equipo y su velocidad.

Por ello, la tendencia en el desarrollo de soluciones devops va encaminada hacia automatización de ese proceso. Es decir, un miembro virtual del equipo que juega ese papel de integrador de código. Con ellos podemos automatizar el trabajo manual siguiendo una serie de pasos, lanzar tests y generar los correspondientes checks de forma automática conectándolo a cada uno de los sistemas con los que contemos como repositorios de código, gestores de tareas, sistemas de integración continua e incluso nuestra herramientas de comunicación interna.

Además de la automatización de una parte del proceso, un mergebot incide directamente en la productividad de los desarrolladores ya que evita los temidos cambios innecesarios de contexto. Con un ciclo pull request clásico, alguien debe "pulsar el botón de merge".

Orquestación DevOps automatizada: mergebots

Ya hemos hablado sobre Plastic SCM en Genbeta Dev, un control de versiones distribuido desarrollado por Codice Software en el Parque Tecnológico de Boecillo (Valladolid). La solución que proponen para solventar todos esos problemas son los los mergebots](https://www.plasticscm.com/mergebot-devops), los cuales permite automatizar merges y orquestar las tareas necesarias hasta la creación final de la build final.

Es decir, por un lado, son capaz de automatizar hasta el 30 % de las integraciones de código que hasta ahora eran manuales y lo hacen en base a reglas previas; por otro lado, son capace de lanzar builds, lanzar integración continua, ejecutar todos los tests y una vez el proceso ha concluido satisfactoriamente, integrarlo en la rama principal.

Todo esto de manera automatizada apoyándose en el stack tecnológico que ya cuenta con xmerge y semanticmerge para evaluar la viabilidad de la integración.

Mergebot Integrar Branch

Dos ejemplos de mergebots: TrunkBot y ConflictsBot.

TrunkBot está conectado al servidor central de Plastic SCM esperando a que una rama sea etiquetada como reviewed. Está diseñado para cumplir con la metodología Trunk Based Development cuyo éxito se basa en las ramas por funcionalidad de vida muy corta. Es decir, una funcionalidad por branch.

Cuando un desarrollador ha terminado su tarea puede marcarla como resuelta lo que avisará al revisor para que revise el código y valide la tarea. El TrunkBot confirmará que el código ha sido revisado y lanzará los pasos configurados en el CI integrando la rama si puede resolver los conflictos. Recordemos que Plastic SCM utiliza una serie de motores de merge sintacticos y semanticos para facilitar la tarea. Si por el contrario no es posible, avisará al responsable para resolver los conflictos de forma manual y volver arrancar el proceso.

Conflictsbots está orientado a inspeccionar cualquier problema relacionado con los merges automáticos de las tareas marcadas como "resolved". Si existe algún conflicto notificará a los usuarios y reabrirá la tarea. Si todo es correcto, es el encargado de validar el proceso previo de Trunkbot para poder hacer la integración.

Cada mergebot cuenta con una configuración específica para definir los pasos que debe seguir que podéis ver en la documentación de Plastic SCM.

Qué es Velneo y por qué hemos creado un curso de formación sobre esta herramienta

17/01/2019
Artículo original

Imagen ornamental - Cortesía de Velneo

Recientemente en el catálogo de CampusMVP hemos incluido un curso nuevo para aprender a desarrollar aplicaciones de gestión empresarial en colaboración con el fabricante de la plataforma Velneo, que también, como nosotros, es una empresa española y que casualmente tiene su sede a unos 20 kilómetros de la nuestra.

Velneo es una herramienta de nicho, mucho menos conocida que .NET o Java o cualquier otra plataforma de propósito general de alcance mundial. Así que te puedes preguntar ¿por qué hemos hecho un curso sobre ella?

En las siguientes líneas vamos a explicarte qué es Velneo, por qué nos pareció buena idea incorporarlo a nuestro catálogo y qué ventajas e inconvenientes tiene la plataforma.

TL;DR

Este artículo es un poco más largo de lo normal, para poder explicarlo todo con detalle. Aparte de leértelo sin más, si lo prefieres, puedes ver este vídeo en el que nuestro director de eLearning y fundador José Manuel Alarcón te cuenta los porqués y los cómos de la existencia de este curso de Velneo. También explica algunas cosas que no están en el artículo, por ejemplo, cómo podría salirte el curso sin coste si estás trabajando en cualquier empresa española:

[youtube:KTjA_rsolwg]

Y si prefieres leer... ¡Vamos a ello!

¿Por qué Velneo?: crear aplicaciones de gestión, una necesidad poco cubierta

Nuestro pequeño equipo de atención al alumno se pasa el día interaccionando con vosotros, las personas que están interesadas en aprender programación. Y reciben muchas consultas a diario mediante correo electrónico, teléfono, redes sociales y el chat que tenemos en el catálogo de cursos.

Algunas personas, aunque tienen dudas, tienen claro qué tipo de tecnología, lenguaje o plataforma necesitan aprender. Este tipo de personas preguntan más sobre que los orientemos dentro de la tecnología concreta que les interesa, pues cada vez hay más opciones y son más complejas, o también sobre nuestros cursos en particular.

Otros de los que se ponen en contacto con nosotros, generalmente perfiles que están empezando a programar, saben que necesitan aprender programación, pero no tienen claro por dónde tirar. A estos les ayudamos a enfocarse en lo que más les pueda aportar según su interés (salida laboral, desarrollar cierto tipo de aplicaciones que necesitan, tipo de empresas a las que pueden acceder, etc....). Incluso tenemos un asesor online sobre cursos de programación que les ayuda a tomar la decisión por su cuenta.

Existe un tercer grupo, menos numeroso pero relevante, que se pone en contacto con nosotros porque lo que necesitan exclusivamente es poder desarrollar aplicaciones de gestión. Y a ser posible en tiempo récord. Dentro de estos hay además un subgrupo importante formado por profesionales que han programado muchos años en herramientas ya desfasadas como Visual Basic 6, Visual Foxpro, COBOL, etc... y que ahora quieren retomarlo para vender software de gestión personalizado a sus clientes: ERPs, CRMs, programas de facturación y contabilidad, etc... pero con las necesidades actuales: multiplataforma, rápido, disponible en la nube y en móviles...

Foto CC0 por rawpixel en Unsplash - https://unsplash.com/photos/_FjGHwVdE_Q

Con este último grupo siempre teníamos problemas para orientarlos. El motivo es que, si se plantean seriamente aprender una plataforma de propósito general como Java o .NET para luego utilizarla en exclusiva para crear aplicaciones de gestión, están en un aprieto. Cualquiera de estas plataformas requiere aprender muchas cosas antes de poder hacer nada serio:

  • Una nueva forma de pensar, más moderna, atada a este tipo de plataformas
  • El lenguaje de programación que corresponda, con sus complejidades, tipos y conceptos particulares
  • La plataforma en cuestión, que tiene miles de clases y como poco deberían conocer unos cuantos cientos de ellas
  • Una base de datos (Oracle, SQL Server, MySQL/MariaDB), junto al lenguaje SQL que le corresponda y sus particularidades
  • Algún ORM
  • Alguna biblioteca para crear interfaces de usuario

Esto para empezar a hablar, ya que nos estamos dejando fuera las especializaciones y muchas otras cuestiones transversales "opcionales", como buenas prácticas, patrones, testing...

En la práctica esto se traduce que, si además tienes que trabajar, necesitas como mínimo un año de estar estudiando para al menos empezar a hacer algo útil. Luego aún te queda crear las aplicaciones de gestión que te interesan.

Lo que nos ocurría es que una gran parte de esta gente optaba por no formarse y por no programar tampoco. Una pena y algo que nos fastidiaba especialmente.

Por eso, decidimos buscar alguna herramienta o plataforma más especializada que nos permitiese cubrir esta necesidad que muchos de nuestros prealumnos tienen: partir de cero y en poco tiempo estar creando completas aplicaciones de gestión empresarial sin tener que estar 1 año estudiando solo para empezar a planteárselo.

Y es por esto por lo que surgió la idea de ponernos en contacto con Velneo. Ya los conocíamos, ya sabíamos que tenían una herramienta conocida de calidad, y encima da la casualidad de que su edificio corporativo está a unos 20 kilómetros de nuestras oficinas. Así que más a mano, difícil.

Sumando su conocimiento de la herramienta y nuestra experiencia en crear formación online para programadores, tras casi 1 año de trabajo tenemos otro estupendo curso para nuestro catálogo que cubre una necesidad real del mercado.

¿Para qué sirve Velneo?

Velneo sirve para desarrollar aplicaciones de gestión empresarial que pueden ejecutarse en Windows, Linux, macOS, iOS o Android sin tener que adaptarlas a cada plataforma. Permite gestionar bases de datos de gran tamaño y su despliegue puede hacerse en local o en el Cloud sin mayor complejidad.

Todo el desarrollo se realiza principalmente de manera visual y la plataforma te permite ir viendo en "caliente" cómo va quedando tu aplicación.

El factor más diferencial de Velneo probablemente es cómo ha sido diseñada su base de datos. Tiene unas características especiales ideadas para programar y mantener con mayor rapidez la interfaz de las aplicaciones de gestión de datos. La plataforma está compuesta por una serie de componentes individuales que se dividen las tareas: desarrollar, almacenar, servir y visualizar, entre otros.

En menos de 90 segundos, Jesús Arboleya, el jefe de producto de Velneo y uno de los autores del curso, te cuenta rápidamente en qué consiste esta arquitectura:

[youtube:DX7Qzza094U]

Como toda plataforma, tiene su curva de aprendizaje, pero puedes estar creando tu primera aplicación sencilla en unas pocas horas. Y, con un aprendizaje de calidad y bien dirigido, en unas pocas semanas puedes estar creando productos de gestión reales, listos para poner a la venta.

Y eso es precisamente lo que hemos buscado con nuestro curso de Velneo. Se trata de un curso práctico pero que al mismo tiempo te da las bases necesarias para desarrollar con buenas prácticas, y te deja claros todos los conceptos importantes de la plataforma. A lo largo del curso desarrollas desde cero una aplicación de gestión completa: con compras, ventas, facturas, informes...

Pero mejor que te lo cuente de nuevo Jesús, en minuto y medio:

[youtube:qXIulHy-E4Y]

Puedes ver más detalles en la ficha del curso.

¿Quién desarrolla aplicaciones en Velneo?

Velneo tiene una comunidad muy entusiasta dentro de España y Latinoamérica, en la que podemos participar desde su foro público oficial. Sus usuarios son, por lo general, empresas de desarrollo que han optado por un vertical y que tienen un modelo de negocio muy definido. Un gran ejemplo es NaturalSoft, que lleva varias décadas desarrollando software de gestión para hospitales, y que ahora mismo es líder de su sector. En su página de desarrolladores certificados (en la que solo aparecen aquellos programadores más expertos) se puede observar que tienen clientes en varios países de habla-hispana, pero con mayor arraigo en España.

Entre sus desarrolladores también hay miembros de departamentos de informática de empresas y algunos programadores autónomos. Y también gente que busca una salida profesional en el mundo de las aplicaciones de gestión.

¿Existe demanda laboral de programadores en Velneo?

Foto ornamental - Entrevista de trabajo - CC0 por rawpixel en Unsplash - https://unsplash.com/photos/-zUg56LG0tY

Sí. Existe una bolsa de trabajo oficial en las que las empresas que desarrollan en Velneo publican sus demandas laborales para que los desarrolladores se pongan en contacto. Además, nuestro curso es el único curso oficial de fundamentos de la plataforma Velneo. Si lo terminas y apruebas, obtienes un diploma firmado por campusMVP y el fabricante y te conviertes en "Programador Cualificado Velneo". Si lo deseas, aparecerás listado en la web del fabricante para poder ser contactado por empresas que necesiten de tus servicios.

No obstante, no todo es bonito...

Velneo, como cualquier otra tecnología, tiene sus complejidades y una curva de aprendizaje media. Aunque se desarrolle más rápido y con menos errores que con otras plataformas (las generalistas de las que hablábamos al principio), tampoco con Velneo es llegar y triunfar. Las empresas que desarrollan en Velneo tradicionalmente tienen dificultades a la hora de encontrar trabajadores cualificados en la herramienta. El fabricante ha tomado medidas para intentar facilitar la contratación y la formación en su tecnología, con seminarios, video-tutoriales enlatados y una documentación muy extensa. Todo, naturalmente, en español.

Sin embargo, los esfuerzos nunca han sido suficientes y ese es el motivo principal por el que, cuando nos pusimos en contacto con ellos, Velneo también había llegado a la conclusión por su cuenta de que necesitaban un curso como dios manda que fuera desde los fundamentos hasta un nivel intermedio, con una metodología y una pedagogía contrastadas. Al fin y al cabo, Velneo es una empresa especializada en desarrollar y evolucionar su plataforma, no una empresa de formación para programadores... Ese papel lo suplimos nosotros.

Desde campusMVP hemos desarrollado cursos para otros fabricantes como por ejemplo Microsoft, pero con autores y tutores de los cursos independientes, no vinculados laboralmente con el fabricante. En este caso hemos trabajado directamente con el jefe de producto y el responsable de soporte técnico del fabricante (Jesús Arboleya y Rafael Cueto-Felgueroso, respectivamente). Puedes encontrar más información sobre ellos en la ficha del curso.

La verdad es que, según nos cuentan, muchas personas llegan a Velneo, se registran, prueban el producto y les genera mucha curiosidad e interés, pero la realidad también demuestra que no son capaces en muchos casos de entender en profundidad la potencia de la plataforma, y eso es algo que este curso también pretende subsanar. Si ese problema no existiese, tampoco existiría este curso.

Muchas empresas buscan buenos desarrolladores en Velneo, no personas que hayan hecho "sus pinitos", y eso es lo que pretende este curso: formar profesionales de programación en Velneo de garantías.

Ventajas y desventajas de Velneo

Imagen ornamental - Botones + y - de Alexa

Una de las ventajas de Velneo que, de hecho, es algo que nos gustó y que nos decidió a apostar por meter la herramienta en nuestro catálogo, es que como empresa siempre nos ha parecido que es accesible, ya desde el primer contacto: desde los consultores técnicos hasta el servicio de soporte. Además, a la hora de decidir el rumbo y evolución de la plataforma tienen en cuenta la opinión de los programadores en un foro de ideas.

Ahora bien, en su especialización también están sus desventajas: es un entorno cerrado y con una especie de lenguaje de programación propio (aunque también permite hacer cosas con JavaScript). Velneo no se concibe como un entorno de programación generalista y esa idea resulta "chocante" en la mente de algunos desarrolladores. Su diseño, su base de datos, y toda su filosofía es por y para el desarrollo de aplicaciones de gestión empresarial. Para algunos, especializarse tanto en una tecnología y en un nicho no es atractivo. Pero claro, si crear este tipo de aplicaciones es lo que te interesa, esta especialización es su principal ventaja.

Otra desventaja es que, al ser una herramienta española, de nicho y estrictamente profesional (en el sentido de que solo la usan empresas de desarrollo empresarial) no existen muchos foros públicos fuera de los propios de Velneo que hagan difusión de la herramienta. Aunque su foro oficial sí que es un gran recurso, el nivel suele ser alto y muy profesional, y a muchos foreros principiantes les da cierto reparo preguntar cosas muy básicas.

Para un novato, un estudiante o un aficionado resulta más accesible aprender tecnologías que tienen más difusión internacional en sitios como StackOverFlow, por poner el ejemplo más relevante. Como consecuencia, otra dificultad de la que muchos programadores se quejan es de que no tienen una forma de aprender Velneo desde cero, un inconveniente que pretendemos subsanar con este curso.

Por otro lado, formándote bien en Velneo te convierte en un "oscuro objeto de deseo" por parte de ciertas empresas repartidas por toda la geografía española y en muchos lugares de Latinoamérica.

Por último, decir que la plataforma es de pago, tanto su uso como su sistema de licenciamiento, y que tiene un sistema de suscripción mensual. Obviamente tienen que ganarse la vida, y por eso cobran. Si la vas a usar profesionalmente no te supondrá un problema pues los precios son razonables y en función de lo avanzadas que sean tus necesidades y, al ahorrarte tanto tiempo y dado que tú también te ganas la vida y les vas a cobrar a tus clientes, el ratio beneficio/coste de la solución es altísimo.

De todos modos, si haces nuestro curso, Velneo te facilitará todo lo que necesitas para poder aprender y hacer tus desarrollos en la nube durante un año sin coste adicional. Si además decides contratar una de las capas de pago del producto, pregúntales diciendo que te has formado con nosotros y tendrás ventajas y ahorros especiales para la contratación.

¿Es Velneo para mí?

No debes aprender a desarrollar aplicaciones de gestión empresarial con Velneo si:

  • Si quieres trabajar con un entorno generalista, abierto y con diferentes bases de datos que valga para crear todo tipo de aplicaciones, no solo de gestión.
  • Si quieres programar videojuegos u otros software gráficos animados.
  • Si quieres hacer desarrollos estrictamente para la Web.
  • Si no te interesa el funcionamiento interno de los procesos de las empresas ni todo el tema empresarial.

Debes aprender a desarrollar aplicaciones de gestión empresarial con Velneo si:

  • Necesitas crear aplicaciones de gestión para tus clientes o para uso interno de tu empresa, sin tener que dedicar un año al aprendizaje solo para empezar a crear algo.
  • Ya trabajas una empresa de desarrollo de software o de consultoría, y quieres tener una tecnología específica para el desarrollo de aplicaciones empresariales en tu repertorio de herramientas profesionales.
  • Trabajas en un departamento de informática de una empresa que necesita informatizarse o mejorar los programas de gestión que utilizan actualmente.
  • Te interesa el análisis de los flujos de negocio de las empresas y cómo poder mejorar su rentabilidad mediante el desarrollo de software
  • Quieres especializarte en una tecnología de nicho con demanda profesional, como salida laboral.

Te dejamos nuevamente el enlace al curso para más detalles, y te invitamos a preguntar sobre cualquier otro aspecto en la sección de comentarios de debajo.

10 libros no técnicos que todo techie debería leer

16/01/2019
Artículo original

Imagen Gerd Altmann en Pixabay - CC0 (No se requiere atribución)

En alguna ocasión hemos recomendado “libros clásicos” que todo programador debería leer en algún momento, pues aportan una serie de conocimientos no técnicos que te ayudarán a desarrollar tu carrera profesión.

Sin embargo, como no todo es trabajo, os traemos una serie de libros que consideramos que pueden ser de vuestro interés. Han sido escritos por una serie de tecnólogos, empresarios, científicos, historiadores, investigadores e innovadores.

A continuación encontrarás más de 10 recomendaciones ordenadas por orden alfabético de autor.

Four: El ADN secreto de Amazon, Apple, Facebook y Google de Scott Galloway

Portada del libro Four: el ADN secreto de Amazon, Apple, Facebook y Google

Scott Galloway, uno de los profesores de negocios más famosos actualmente, disecciona las estrategias ocultas bajo la deslumbrante apariencia de estos cuatro gigantes y muestra cómo apelan a las necesidades básicas que han movido a la humanidad desde tiempos ancestrales:

  • Amazon, a la de cazar y recolectar
  • Apple, a la de procrear
  • Facebook, a la de amar y
  • Google, a la de creer en un Dios.

Sapiens. De animales a dioses: Breve historia de la humanidad de Yuval Noah Harari

Portada del libro Sapiens. De animales a dioses: Breve historia de la humanidad

En Sapiens, Yuval Noah Harari traza una breve historia de la humanidad, desde los primeros humanos que caminaron sobre la Tierra hasta los radicales y a veces devastadores avances de las tres grandes revoluciones que nuestra especie ha protagonizado: la cognitiva, la agrícola y la científica. A partir de hallazgos de disciplinas tan diversas como la biología, la antropología, la paleontología o la economía, Harari explora cómo las grandes corrientes de la historia han modelado nuestra sociedad, los animales y las plantas que nos rodean e incluso nuestras personalidades. El libro del Dr. Harari es una lectura fascinante que ayudará a responder las grandes preguntas acerca de dónde venimos, y más importante, hacia donde nos dirigimos como especie.

Breves respuestas a las grandes preguntas de Stephen Hawking

Portada del libro Breves respuestas a las grandes preguntas

Se trata de la obra póstuma del famoso físico teórico y cosmólogo Stephen Hawking. En este libro ofrece su punto de vista personal a las grandes preguntas que desde siempre se hacen los humanos: ¿Hay un Dios? ¿Cómo empezó todo? ¿Es posible viajar en el tiempo? ¿La tecnología nos salvará o nos destruirá?... Hawking hace hincapié en el uso de la ciencia para ayudarnos a resolver los problemas a los que nos enfrentamos, y anima a las generaciones más jóvenes a que definan su propio futuro.

Innovation and its enemies de Calestous Juma

Portada del libro Innovation and its enemies

Aunque no hemos encontrado este título traducido al español, creemos que es una lectura muy recomendable. 

Esta cautivadora panorámica muestra la historia de la innovación y pone de relieve por qué la gente se resiste a las nuevas tecnologías. Calestous Juma, utilizando estudios del caso detallados de café, imprenta, margarina, mecanización de granjas, electricidad, refrigeración mecánica, música grabada, cultivos transgénicos y animales transgénicos, muestra cómo emergen, arraigan y crean nuevas ecologías institucionales que favorecen su establecimiento en el mercado. El libro utiliza estas lecciones de la historia para contextualizar los debates contemporáneos sobre tecnologías como la inteligencia artificial, el e-learning, la impresión 3D, la edición de genes, la robótica y los drones. En última instancia, aboga por transferir una mayor responsabilidad a los líderes públicos para que trabajen con científicos, ingenieros y empresarios para gestionar el cambio tecnológico, realizar los ajustes institucionales asociados y ampliar el compromiso público en asuntos científicos y tecnológicos.

Lo inevitable de Kevin Kelly

Portada del libro Lo Inevitable

En este libro, su autor Kevin Kelly, director ejecutivo fundador de la revista Wired, expone su visión del futuro y cómo la tecnología afectará nuestra vida diaria. Desde la realidad virtual en el hogar hasta la inteligencia artificial incorporada en todos los productos manufacturados, Kelly, examina estas y otras tendencias profundas, mientras explora cómo se superponen y son parte de una red codependiente.

Kelly explica que hay 12 fuerzas tecnológicas que según él revolucionarán completamente la forma en que compramos, trabajamos, aprendemos y nos comunicamos unos con otros. Al entenderlas y adoptarlas, dice Kelly, será más fácil para nosotros estar al tanto de la próxima ola de cambios y arreglar nuestras relaciones cotidianas con la tecnología de manera que produzcan los máximos beneficios.

Machine, Platform, Crowd: Harnessing Our Digital Future de Andrew McAfee y Erik Brynjolfsson

Portada del libro Machine, platforma, crowd

De los mismos autores que “La segunda era de las máquinas” nos llega este ahora este libro que, al menos nosotros, no lo hemos encontrado traducido al español, por eso hemos dejado su título en inglés.

Según sus autores (ambos colaboradores en el MIT de la iniciativa sobre la economía digital) hemos pasado de la primera fase de la revolución digital a una etapa en la que las plataformas y las multitudes de su título se han vuelto tan influyentes como las máquinas. Estamos viviendo en una era de cambios técnicos muy acelerados, pero la humanidad aún está a tiempo de controlar su propio destino. En lugar de hacer redundantes a los seres humanos, la tecnología nos brinda una oportunidad sin precedentes para dar forma a nuestro futuro.

En palabras de los propios autores, “El éxito de una empresa casi nunca se basa en la cantidad de tecnología a la que puede acceder, sino en cómo la gente usa esa tecnología y en los valores que incorporan en la organización".

Armas de destrucción matemática: Cómo el BigData aumenta la discriminación y amenaza la democracia de Cathy O’Neil

Portada del libro Armas de destrucción matemática

Es obvio que vivimos en la edad del algoritmo donde las decisiones que afectan a nuestras vidas no están hechas por humanos, sino por modelos matemáticos. En teoría, esto debería conducir a una mayor equidad: todos son juzgados de acuerdo con las mismas reglas, sin sesgo. Pero en realidad, ocurre exactamente lo contrario. Los modelos que se utilizan en la actualidad son opacos, no regulados e incontestables, incluso cuando están equivocados. Esto deriva en un refuerzo de la discriminación.

O’Neil profundiza en el lado oscuro del Big Data, anima a los que trabajan en la definición de dichos modelos a responsabilizarse de estos problemas y a los ciudadanos a adquirir más conocimientos sobre cómo se utilizan estos algoritmos y a exigir un cambio.

En defensa de la Ilustración de Steven Pinker

Portada del libro En defensa de la ilustración

En este libro, el científico cognitivo y autor Steven Pinker explica que las soluciones a nuestros problemas llegan a través del ideal de la Ilustración de usar la razón y la ciencia. Pinker nos insta a ver con otra perspectiva los titulares alarmistas y las profecías de la perdición que juegan con nuestros prejuicios psicológicos. Haciendo uso de datos empíricos, muestra que la vida, la salud, la prosperidad, la seguridad, la paz, el conocimiento y la felicidad van en aumento, no solo en Occidente, sino en todo el mundo. Él dice que este fenómeno no se debe a fuerzas que están fuera de nuestro control, sino que cree que la razón y la ciencia mejoran la humanidad.

Factfulness: Diez razones por las que estamos equivocados sobre el mundo. Y por qué las cosas están mejor de lo que piensas de Hans Rosling

Portada del libro Factfulness

Hans Rosling, una eminencia del análisis y divulgación de tendencias globales, afirma que tenemos diez instintos que distorsionan nuestra visión. Desde nuestra tendencia a dividir el mundo en dos campos (nosotros contra ellos) a la manera en que consumimos la información de los medios (basada en la explotación del miedo), pasando por el modo en que percibimos el progreso (creyendo que las cosas siempre empeoran). Nuestro problema es que no somos conscientes de lo que no sabemos, e incluso cuando estamos informados nos dejamos llevar por sesgos inconscientes y predecibles.

El autor se explica con gratificante claridad, mediante palabras y sobre todo a través de excelentes gráficos. Además, las fuentes en que se basan son generalmente publicaciones de organismos internacionales que cualquiera puede descargarse de Internet con un clic.

Las mujeres en la tecnología de varios autores

Este no es realmente el título de ningún libro (o quizás sí) sino que en este caso hemos querido recoger varios títulos (todos ellos en inglés) que guardan relación con el tema indicado:

  • The woman who smashed code de Jason Fagone: el libro cuenta la increíble historia de Elizebeth Smith Friedman y su esposo, William, quienes inventaron la ciencia moderna de la criptología y cómo la utilizaron para encontrar espías nazis, ayudando así en la victoria de la Segunda Guerra Mundial.
  • Brotopia de Emily Chang: la periodista de Bloomberg TV Emily Chang descubre lo que sucede entre bambalinas en las empresas de Silicon Valley. La narración se basa en entrevistas realizadas a personas que trabajan para dichas empresas, como Sheryl Sandberg, directora ejecutiva de Facebook, Susan Wojcicki, CEO de YouTube, y Marissa Mayer, ex directora ejecutiva de Yahoo, quienes describen las dificultades que tuvieron para romper el techo de cristal de este centro tecnológico.
  • Geek Girl Rising, de Heather Cabot y Samantha Walravens: este libro se adentra en el mundo de las menos conocidas emprendedoras y tecnólogas que están construyendo la próxima generación de empresas y luchando en el altamente mundo competitivo de Silicon Valley. Los lectores aprenderán sobre modelos a seguir como Debbie Sterling, la inventora de GoldieBox; Tracy Chou, exdesarrolladora líder en Pinterest; y Kathryn Minshew, CEO de The Muse, entre otras.

Plastic SCM Mergebot: automatizando tu pipeline de desarrollo

16/01/2019
Artículo original

Plastic SCM Mergebot: automatizando tu pipeline de desarrollo

Tradicionalmente muchos equipos de desarrollo cuentan con la figura del integrador o build master encargado de realizar las integraciones de código (merges) de cada una de los feature branch que pueda tener el proyecto que se esté implementando. En otros casos, es directamente cada desarrollador quien se ocupa de realizar sus propios merges de las ramas ya revisadas. En ambos casos la necesidad de la intervención manual representa un freno para la escalabilidad del equipo y su velocidad.

Por ello, la tendencia en el desarrollo de soluciones devops va encaminada hacia automatización de ese proceso. Es decir, un miembro virtual del equipo que juega ese papel de integrador de código. Con ellos podemos automatizar el trabajo manual siguiendo una serie de pasos, lanzar tests y generar los correspondientes checks de forma automática conectándolo a cada uno de los sistemas con los que contemos como repositorios de código, gestores de tareas, sistemas de integración continua e incluso nuestra herramientas de comunicación interna.

Además de la automatización de una parte del proceso, un mergebot incide directamente en la productividad de los desarrolladores ya que evita los temidos cambios innecesarios de contexto. Con un ciclo pull request clásico, alguien debe "pulsar el botón de merge".

Orquestación DevOps automatizada: mergebots

Ya hemos hablado sobre Plastic SCM en Genbeta Dev, un control de versiones distribuido desarrollado por Codice Software en el Parque Tecnológico de Boecillo (Valladolid). La solución que proponen para solventar todos esos problemas son los los mergebots](https://www.plasticscm.com/mergebot-devops), los cuales permite automatizar merges y orquestar las tareas necesarias hasta la creación final de la build final.

Es decir, por un lado, son capaz de automatizar hasta el 30 % de las integraciones de código que hasta ahora eran manuales y lo hacen en base a reglas previas; por otro lado, son capace de lanzar builds, lanzar integración continua, ejecutar todos los tests y una vez el proceso ha concluido satisfactoriamente, integrarlo en la rama principal.

Todo esto de manera automatizada apoyándose en el stack tecnológico que ya cuenta con xmerge y semanticmerge para evaluar la viabilidad de la integración.

Mergebot Integrar Branch

Dos ejemplos de mergebots: TrunkBot y ConflictsBot.

TrunkBot está conectado al servidor central de Plastic SCM esperando a que una rama sea etiquetada como reviewed. Está diseñado para cumplir con la metodología Trunk Based Development cuyo éxito se basa en las ramas por funcionalidad de vida muy corta. Es decir, una funcionalidad por branch.

Cuando un desarrollador ha terminado su tarea puede marcarla como resuelta lo que avisará al revisor para que revise el código y valide la tarea. El TrunkBot confirmará que el código ha sido revisado y lanzará los pasos configurados en el CI integrando la rama si puede resolver los conflictos. Recordemos que Plastic SCM utiliza una serie de motores de merge sintacticos y semanticos para facilitar la tarea. Si por el contrario no es posible, avisará al responsable para resolver los conflictos de forma manual y volver arrancar el proceso.

Conflictsbots está orientado a inspeccionar cualquier problema relacionado con los merges automáticos de las tareas marcadas como "resolved". Si existe algún conflicto notificará a los usuarios y reabrirá la tarea. Si todo es correcto, es el encargado de validar el proceso previo de Trunkbot para poder hacer la integración.

Cada mergebot cuenta con una configuración específica para definir los pasos que debe seguir que podéis ver en la documentación de Plastic SCM.

Entendiendo el posicionamiento absoluto de elementos HTML con CSS

15/01/2019
Artículo original

El comportamiento de un elemento con position:absolute; quizá te puede parecer errático de entrada, especialmente si no tienes suficiente experiencia maquetando con CSS y no conoces el detalle fundamental que te voy a contar en este post. Así que, si alguna vez te has desesperado al intentar posicionar un elemento de forma absoluta, mejor sigue leyendo.

Pero empecemos por el principio. La propiedad position, tal y como su propio nombre indica, define cómo se va a posicionar un elemento.

Por defecto su valor es static y sigue el flujo normal del documento, esto es, que se va colocando de arriba a abajo y de izquierda a derecha en función de si es un elemento de línea o bloque, y del espacio y de los elementos que encuentren antes que él.

Pero también puede tomar otros valores, que pueden ser: relative, absolute, fixed o sticky.

A partir de que se haya definido su posicionamiento, su posición exacta se puede modificar usando las propiedades top, bottom, left y right, que harán que se desplace como en un sistema de coordenadas.

Un ejemplo probando position

Ahora veremos un ejemplo práctico donde lo entenderemos todo mejor:

Tenemos cuatro divs, y dentro del último, un enlace con la clase .logo que alberga una imagen que es el logo de campusMVP. Los cuatro con position:static;, que es el valor que el navegador le aplica por defecto a cualquier elemento:

<div class="div1">
	<h2>Div 1</h2>
	<div class="div2">
		<h2>Div 2</h2>
		<div class="div3">
			<h2>Div 3</h2>
			<div class="div4">
				<h2>Div 4</h2>
				<a class="logo" href="https://www.campusmvp.es">
					<img src="img/logo-campusmvp.png" alt="logo de campusmvp"/>
				</a>
			</div>
		</div>
	</div>
</div>

Ejemplo inicial donde todos los elementos son static

Ahora posiciono el enlace del logo como absoluto en las coordenadas 0,0 arriba a la izquierda, a ver qué pasa:

a.logo {
	position:absolute;
	top:0;
	left:0;
}

Vemos que se ha colocado en las coordenadas 0,0 con respecto a la ventana del navegador:

Ejemplo de position:absolute; con ancestros static

Probamos a aplicarle a un div position:relative;

Ahora bien, ¿qué pasa si le pongo al .div1 un position: relative;?:

.div1 {
	position:relative;
}

 

Ejemplo de position:absolute; y contenedor position:relative;

Mmmm, interesante. Se posiciona respecto a él.

Position: fixed;

¿Y si le ponemos al .div2 un position: fixed;?:

   

.div2 {
	position:fixed;
}

Ejemplo de position:absolute; y un ancestro position:fixed;

¡Vaya! Ocurre lo mismo con este.

Position: absolute;

Otro más, ahora le ponemos al .div3 un position: absolute;

 

.div3 {
	position:absolute;
}

Ejemplo de position:absolute; y un ancestro position:absolute;

También se posiciona el logo respecto a él.

Position: sticky;

Y para rematar, le ponemos al .div4 un position: sticky;

.div4 {
	position:sticky;
}

Ejemplo de position:absolute; y un ancestro position:sticky;

De nuevo ocurre lo mismo.

En conclusión...

Pues bien, parece que hemos averiguado que nuestro logo con position: absolute; se posicionará en función de su ancestro más cercano que tenga un valor distinto a static. O lo que es lo mismo, que esté posicionado (se le llama así, si no es static se dice que está posicionado). Y si no encuentra ningún ancestro posicionado, se colocará en función de la ventana del navegador.

Esta es la norma general. En la práctica, la fórmula que más se usa es ponerle position:relative; al contenedor del elemento que queremos posicionar en absoluto, porque es la que menos problemas de posicionamiento con el resto de elementos te va a dar. Sin embargo este tema tiene más sutilezas que debes controlar (sistemas de referencia, unidades, colapso de elementos, flotaciones...) y que se explican con detalle en nuestro curso online de online de HTML5 y CSS3.

Espero haberte aclarado un poco el panorama. Aquí te dejo el ejemplo para que sigas jugando tú con él, o mejor aún, créate tu propio ejemplo.

La maquetación web no es difícil, pero está llena de sutiles trampas como esta. Si quieres aprender a evitarlas con conocimientos sólidos, échale un vistazo al curso anterior y, si ya dominas los fundamentos de HTML y CSS, seguro que te puede interesar aprender en serio cómo hacer maquetación Responsive con HTML5, Flexbox, CSS Grid y Bootstrap.

Qué pasa cuando escribes la dirección de una web en tu navegador y cómo simular cualquier dominio en tu equipo local para desarrollo

13/01/2019
Artículo original

Imagen ornamentalLo que voy a contar hoy es algo de "cultura general", pero también es cierto que muchas personas lo desconocen todavía, sobre todo si están comenzando en el mundo de la programación web.

Empezaré repasando cómo es el funcionamiento básico desde el momento en el que escribimos una dirección web en un navegador y hasta que empieza a solicitarse la página de verdad, y luego explicaré un sencillo proceso que te permite simular que cualquier dominio de internet, exista o no, está en cualquier servidor que tu quieras. Por ejemplo, si te interesara por el motivo que fuese, podrías hacer que cuando escribas en un navegador www.google.com en vez de ir a Google vaya a, por ejemplo, una página de prueba en tu servidor local de desarrollo.

Quizá lo de Google no sea muy útil, claro, pero sí que puede resultar de gran ayuda para poder probar de la manera más realista posible una web o aplicación, utilizando para el desarrollo o las pruebas no solo el mismo código, incluso el mismo dominio que usaríamos en la realidad.

Por ejemplo, vamos a suponer que tenemos una aplicación web funcionando en el dominio misuperapp.com y que en nuestra máquina local queremos seguir trabajando en ella para aumentar sus características, y utilizar directamente ese dominio en lugar de localhost o 127.0.0.1 (que es siempre la dirección de la máquina actual).

Cómo funciona la resolución de nombres de dominio

No quiero extenderme demasiado con esto, porque además da para mucho, pero es importante que cualquiera que se dedique a la programación (y no solo a la programación Web) conozca el funcionamiento básico de Internet. Así que ahí va una pequeña explicación...

Cada máquina conectada a Internet dispone de una o varias direcciones IP asignadas que la identifican de manera única. Estas direcciones pueden ser de dos tipos IPv4 o IPv6. Las direcciones IPv4 son cuatro numeritos entre 0 y 255 separados por puntos y son las más comunes. Cuando se empezaron a usar hace unas décadas parecía suficientes para que duraran siempre. Sin embargo hay tantas máquinas conectadas a Internet que empiezan a escasear y es uno de los motivos de que hace tiempo se diseñasen las direcciones IPv6, que son una cadena larga e ininteligible que designa de manera única también a un dispositivo conectado a Internet.

De este modo, a través de su dirección IP, es posible encontrar cualquier dispositivo que esté conectado a la Red de redes.

Cuando un usuario abre su navegador y escribe la dirección de una web o aplicación, lo que ocurre por debajo es que el nombre de dominio (por ejemplo misuperapp.com) se transforma en la dirección IP del servidor encargado de servir las páginas web correspondientes a esa web o aplicación. De este modo el navegador sabe a qué servidor debe conectarse y solicitarle la página.

¿Cómo se sabe cuál es esa dirección IP? Gracias a un protocolo específico que se llama DNS (Domain Name System, Sistema de Nombres de Dominio). Un servidor DNS es un dispositivo especial conectado a Internet y que es responsable de almacenar un base de datos de parejas "dominio / IP" de modo que sabe encontrar uno a partir del otro y viceversa. De este modo si buscas un dominio te sabe decir su IP y si buscas una IP te sabe decir qué dominio o dominios tiene asociados.

Nota: en realidad a un dominio o subdominio se le pueden asignar muchos más registros que el que devuelve su dirección IP, y se utiliza también para crear alias entre dominios, entradas para saber cómo enviar y recibir correo electrónico, datos textuales de diversa utilidad (como la validación de dominios ante terceros o firma digital de correo), y muchas cosas más. Pero a os efectos de lo que quiero explicar hoy, lo anterior es suficiente.

La resolución de nombres con DNS es jerárquica. Existen unos servidores DNS raíz que contienen una base de datos con todos los dominios de primer nivel (TLD: Top Level Domain) del mundo y los servidors DNS que son a su vez responsables de las entradas para cada uno de ellos.

Tu operador de acceso a Internet también dispone de unos servidores DNS que se encargan de intermediar entre tu máquina y la jerarquía de servidores DNS para averiguar la dirección IP final al a que debes conectarte. Esto es algo a lo que no se le da mucha importancia habitualmente, pero que es crítica por varios motivos:

  • Si el servidor DNS de tu proveedor fuese hackeado podrían hacer que, por ejemplo, al introducir la dirección de tu banco fueses a parar al servidor de un ladrón que simula ser tu banco, y no podrías enterarte.
  • La resolución de nombres puede llevar bastante tiempo, por lo que si el servidor DNS de tu proveedor es lento esto lo acabarás notando en la velocidad aparente de conexión que tienes a la web.
  • El que controla tu servidor DNS controla también exactamente a qué sitios web te conectas, y esto es información muy valiosa.

De hecho muchas empresas, como por ejemplo Google, ofrecen servidores DNS para que puedas utilizarlos en lugar de los que te da tu proveedor de Internet, ofreciéndote más velocidad, más seguridad o ambas cosas. Lo que seguro que no te ofrece Google es más privacidad, así que aunque son muy rápidos igual no son los más recomendables (aunque si ya usas Chrome poco te importará que sepan a dónde te conectas ¿verdad?)

Yo personalmente uso los servidores DNS de Cloudflare (1.1.1.1) porque son muy rápidos, son seguros y sé que Cloudflare no va a guardar ni utilizar mi información.

En resumen, cuando escribes una dirección en tu navegador lo que ocurre es esto:

  1. Se consulta el servidor DNS de tu proveedor.
  2. Este consulta a uno de los servidores raíz para averiguar cuáles son los servidores DNS responsables para tu dominio de primer nivel (.es, .com, etc...).
  3. Se consultan esos servidores para averiguar qué dirección IP le corresponde a tu navegador.
  4. Devuelve a tu sistema operativo (y éste a tu navegador) la dirección IP a la que debe conectarse.

Y todo esto sin que los usuarios lo veamos.

Nota: esto sería así sólo cuando se pida ese dominio por primera vez. Si ya lo ha pedido alguien antes lo más probable es que lo tengan en caché (ya que no cambian a menudo) y que te lo devuelva inmediatamente sin más consultas. Por eso cuando cambias la IP asociada a un dominio éste tarda en "propagarse": mientras todos los servidores DNS que ya lo habían anotado no borren sus cachés no se verá la nueva IP en todo el mundo. Esa caché puede durar desde unos minutos hasta varias horas.

Se puede ver esta información con una utilidad de línea de comandos llamada nslookup. Por ejemplo, estas son las IPs asociadas al dominio del buscador de Google:

Resolución de nombres de Google

Como vemos tiene dos direcciones asociadas, una IPv6 (2a00:1450:4003:801::2004) y la otra IPv4 (172.217.17.4). Poríamos usarlas directamente para conectarnos a ese dominio.

Por cierto, ese "Server" que aparece al principio es el servidor DNS que se está utilizando para la consulta inicial, que en tu caso probablemente sea el de tu proveedor de acceso a Internet y en mi caso, como decía, es el servidor DNS de Cloudflare.

También podemos ver cuáles son los servidores de dominio (DNS) que se encargan de devolver las entradas DNS de ese dominio (recuerda: no solo tenemos IPs en esas bases de datos asociadas a un dominio). En el caso de Google son:

Los DNS responsables de Google

En este caso vemos que el principal es ns1.google.com y que indica que se debe conservar en caché la resolución durante un minuto (default TTL).

El archivo hosts: la excepción en la resolución de DNS

Todo lo anterior es "cultura general", ya digo, pero conviene saberlo.

Ahora bien, existe una excepción a todo lo que he explicado antes: el archivo hosts.

Se trata de un archivo de texto sin extensión que existe en todos los sistemas operativos de escritorio y que permite especificar parejas de dominio / IP cuya relación queremos forzar. Este archivo se consulta antes de hacer cualquier consulta al servidor DNS real como acabamos de ver.

Por lo tanto, si introduces cualquier relación entre dominio y dirección en este archivo podrás hacer que el dominio apunte a donde quieras a los efectos de tu máquina. Es como "hackear" el servicio DNS pero haciéndolo para ti mismo.

El archivo hosts en Windows está ubicado en la carpeta C:\Windows\System32\drivers\etc:

El archivo hosts

Para poder escribir en él debes hacerlo con permisos de administrador. Así que abre por ejemplo el bloc de notas como administrador y navega hasta esa carpeta para abrirlo. Tendrás que mostrar todos los archivos en el selector del bloc de notas:

El selector de archivos del bloc de notas

Al abrirlo generalmente estará vacío y verás unas instrucciones sobre cómo utilizarlo:

El contenido de hosts

Ahora, volviendo a nuestro ejemplo inicial, vamos a asociar el dominio misuperapp.com a la máquina local:

La nueva entrada DNS falsa

Como ves solo hay que poner la dirección IP (en este caso la local), un tabulador y el nombre de dominio (no te olvides de las www si lo necesita).

A partir del momento en que grabes los cambios, si vas a un navegador cualquiera e intentas acceder al dominio, te responderá el servidor local (que obviamente tiene que tener asociado dicho dominio para poder responder. Eso o responder a cualquier dominio, cosa que pasa con muchos de desarrollo local como Fenix o Live Server, pero no con IIS).

Nota: los navegadores basados en Chromium (Chrome, Opera, Brave, Vivaldi...) hacen una caché propia de DNS. Por eso, es posible que si ya habías pedido anteriormente el dominio y es un dominio real, no pille los cambios ue acabas de hacer ni aunque entres en modo privado. Debes borrar el histórico de navegación o esperar el tiempo que considere Chrome para ver el cambio reflejado. Si el dominio no existe no hay problema.

De hecho, y este es un truco poco conocido, puedes forzar la descarga de la caché de DNS de Google para un determinado dominio utilizando esta página especial de la propia empresa, para cuando te urja que los usuarios de Chomium (la mayoria) vacíen sus cachés de tu dominio cuanto antes.

Como ves es algo muy sencillo de hacer, y siento el "rollo" previo que te he contado, pero creo que conocer estos detalles del funcionamiento de la Red es indispensable para los desarrolladores y por eso me gusta divulgarlo.

¡Espero que te resulte útil!

Bootstrap 4.2 - spinners, notificaciones "toast", interruptores y otras novedades

10/01/2019
Artículo original

Imagen ornamental con el logo de Bootstrap

Hace unos días Bootstrap liberó su versión 4.2.0, con algunas novedades dignas de mención que vamos a repasar a continuación.

Además también han incluido unas cuantas mejoras de características ya existentes.

Vamos a verlas.

Spinners o indicadores de carga y progreso

En muchas ocasiones hay procesos que pueden tardar algo de tiempo en llevarse a cabo: la carga de una parte de la página o incluso de la página entera, una llamada a través de AJAX en segundo plano... Este tipo de cosas. En estos casos, para que el usuario tenga la sensación de que algo está funcionando y que debe esperar, lo normal es proporcionar algún tipo de feedback visual con una animación. Y para esto precisamente es para lo que sirve el primero de los componentes que se lanzan con la versión 4.2: el spinner.

Existen dos tipos de spinners que generan dos tipos de animaciones diferentes:

  • El borde giratorio: que muestra un círculo dando vueltas.

Imagen animada de un spinner de tipo borde giratorio

  • El punto creciente: que utiliza un punto que aparece poco a poco creciendo desde la nada.

Imagen animada de un spinner de tipo punto creciente

Añadir uno a la página es realmente sencillo: basta con asignarle a cualquier elemento contenedor (por ejemplo un div) la clase .spinner-border o .spinner-grow respectivamente, siendo en su expresión más sencilla algo como esto:

<span class="spinner-border"></span>

que crearía un spinner de tipo borde giratorio con el tamaño y color por defecto, como el de la animación anterior.

Se puede controlar su color usando cualquiera de las clases predefinidas para colores de Bootstrap, es decir, text-primary, text-success, y similares... Por ejemplo, para tener un punto creciente de color rojo como indicador sería:

<span class="spinner-grow text-danger"></span>

Disponen de dos tamaños predefinidos: el que tienen por defecto y uno más pequeño que se consigue añadiéndoles el sufijo -sm (de "small") a su nombre de clase, aplicando ambas (la del spinner y la del tamaño), así:

<span class="spinner-border spinner-border-sm"></span>

Esto es útil, por ejemplo, para meterlos dentro de botones y elementos similares, que nos permite dar un efecto muy chulo cuando se genera alguna acción en segundo plano, como una llamada AJAX por ejemplo:

<button class="btn btn-primary text-nowrap" type="button">
  <span class="spinner-border spinner-border-sm mr-2"></span>
  Enviando datos...
</button>

que nos da algo como esto:

Imagen animada de un spinner de tipo borde giratorio dentro de un botón de color azul

Ten en cuenta que para crear este tipo de spinners se utilizan por debajo animaciones CSS, no JavaScript. En ambos casos lo que se hace es poner los bordes redondeados, con uno de los cuatro bordes transparentes en el caso del que gira.

Esto tiene dos implicaciones importantes:

  1. No es necesario incluir bootstrap.js para que funcionen.
  2. Si le aplicas estas clases a un elemento que no esté vacío, afectará a todo lo que tenga dentro. Por ejemplo, si usas .spinner-border en un elemento que tiene texto se convertirá todo, en un elemento redondo y girará todo el contenido. Por ejemplo, si tenemos esto:
<div class="spinner-border text-danger">
    <div>Girando!!</div>
</div>

veremos por pantalla una animación como esta:

Imagen animada de un spinner de tipo borde giratorio con un texto dentro

que en este caso es un poco "chusquera" pero que te dará una idea de las posibilidades.

Mediante JavaScript podemos iniciarlos y pararlos simplemente colocándoles o quitándoles la clase correspondiente. Así que, no tiene misterio alguno y son súper-fáciles de utilizar.

Accesibilidad de los spinners

Para conseguir que este tipo de elementos sean accesibles para lectores de pantalla deberíamos hacer dos cosas:

  • Marcarlos con un atributo aria de tipo role
  • Incluir un texto dentro que solo se vea en lectores de pantalla, que indique para qué valen

Por ejemplo, así:

<div class="spinner-border text-primary" role="status">
    <span class="sr-only">Procesando...</span>
</div>

En este caso el atributo role="status" indica que la función de este spinner es simplemente la obvia: un indicador de estado. La clase sr-only del texto que contiene es una clase de accesibilidad de Bootstrap que indica que solamente se verá para lectores de pantalla (screen readers, de ahí el prefijo). Con esto sería suficiente.

Notificaciones de tipo "toast"

Otro de los nuevos componentes que se incluyen con Bootstrap 4.2.0 es el que nos permite gestionar notificaciones de tipo "Toast", de las que aparecen cuando queremos dar un mensaje durante unos segundos.

Para construirlos necesitamos utilizar tres clases CSS específicas:

  • .toast: para el elemento contenedor que encierra los contenidos de la notificación.
  • .toast-header: para la cabecera de la notificación.
  • .toast-body: para el cuerpo.

Por lo tanto, para construirla necesitamos como mínimo 3 elementos, aunque es recomendable incluir algunos más para darle un aspecto más agradable. La estructura básica de una notificación sería la siguiente:

<div class="toast">
    <div class="toast-header">
        Título de la notificación
    </div>
    <div class="toast-body">
        Cuerpo de la notificación
    </div>
</div>

Con esto llegaría, pero es interesante, por cuestione estáticas y funcionales, incluir algunos elementos más, por ejemplo:

<div class="toast">
    <div class="toast-header">
        <div class="rounded mr-2" style="height: 16px;width: 16px;background-color: red;"></div>
        <strong class="mr-auto">Título de la notificación</strong>
        <small>Hace 2 segundos</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
          <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        Cuerpo de la notificación
    </div>
</div>

En este caso dentro de la cabecera hemos incluido un pequeño div con los estilos en línea que lo único que hace es crear un cuadrado rojo para dar un toque estético más bonito. A continuación va el título, esta vez en negrita y con margen automático a la derecha (clase .mr-auto), ponemos en pequeño texto para indicar cuánto hace desde que se mostró (puesto a mano para el ejemplo), y finalmente un elemento con un aspa (&times; representa una cruz de multiplicar en HTML) que se usará para cerrar la notificación.

Nota: el efecto de cerrar la notificación cuando se pulse sobre el aspa se consigue de manera automática decorando el elemento que contiene el aspa (el botón) con el atributo data-dimiss="toast" que es reconocido por Bootstrap y añade automáticamente esta acción.

Este sería el aspecto de esta notificación básica:

Aspecto de la notificación anterior una vez mostrada

Pero si incluyes el código anterior en una página no verás nada. Por defecto las notificaciones están ocultas (para ser exactos, tienen la opacidad a 0, por lo que son transparentes y hacen un efecto de difuminado sobre lo que tengan debajo).

Para lograr que se vea una notificación hay que usar un poco de JavaScript. En concreto lo único que hay que hacer es localizarlas, inicializarlas y mostrarlas, para lo cual usaremos jQuery, que como sabrás es una dependencia que tiene Bootstrap. Sería algo así:

//Durante la inicialización de la página
$('.toast').toast();

....

//Cuando la queramos mostrar
$('.toast').toast('show');

El método .toast() tiene varias sobrecargas y sirve tanto para inicializar las notificaciones como para mostrar y ocultarlas. Por defecto, cuando se inicializan, aplican una animación de la opacidad para mostrarse y se auto-cierran al cabo de medio segundo. Si queremos cambiar este comportamiento podemos pasarle al método toast() durante la inicialiación un objeto en formato JSON con tres posibles propiedades:

  • animation: que por defecto vale true, pero que si le ponemos false hará que se muestre de inmediato sin animación alguna.
  • autohide: para decidir si se quiere ocultar automáticamente o no. Si no queremos que se oculte le pasaremos false.
  • delay: el tiempo en milisegundos para que se oculte automáticamente en caso de que lo anterior tenga el valor por defecto o true.

Así, por ejemplo, si queremos que se oculten solas pero al cabo de 2 segundos en vez de medio, podemos poner:

$('.toast').toast({ delay: 2000 });

y lo mismo con las demás propiedades, separándolas con comas en el objeto literal que le pasamos.

Luego se muestran llamando también al mismo método pero pasándole la cadena 'show'. Si queremos ocultarlas le pasaríamos la cadena 'hide'. Le podemos pasar la cadena 'dispose' que también la ocultará y la dejará en el DOM, pero que evitará que se pueda volver a mostrar la misma notificación aunque llamemos a .toast('show');.

Nota: si queremos que aparezcan colocadas, por ejemplo, en la parte superior de la pantalla y no en el flujo del DOM de la página, las tenemos que posicionar nosotros mismos usando CSS. Dentro de la propia notificación el estilo de visualización que se utiliza es Flexbox, por lo que puedes usar cualquiera de sus propiedades (o utilidades correspondientes de Bootstrap) para posicionar y alinear los sub-elementos dentro de la cabecera o el cuerpo.

El método toast() es asíncrono. Esto quiere decir que en cuanto lo llamas vuelve y, aunque no se haya mostrado la notificación todavía, el código que hubiera a continuación se seguirá ejecutando. Tenlo en cuenta.

La API de JavaScript para este tipo de elementos define además cuatro eventos:

  • show.bs.toast: que salta cuando se llama a toast() para mostrar un elemento.
  • shown.bs.toast que se notifica cuando la notificación se acaba de mostrar, tras la animación (si la tiene).
  • hide.bs.toast: cuando se empieza a ocultar la notificación.
  • hiden.bs.toast: cuando se ha terminado de ocultar la notificación y ha desaparecido por completo de la pantalla.

Interruptores estilo iOS

En los formularios es muy habitual incluir cuadros de verificación para marcar opciones de tipo "Sí o No". Por defecto son unos cuadraditos muy anodinos que podemos marcar o desmarcar, pero cuando se trata de opciones de configuración es mucho más habitual encontrar el tipo interruptor que puso de moda Apple con sus iPhone. Algo como esto:

El interruptor de Boostrap 4.2 en acción

Boostrap define estos interruptores mediante el uso de una clase de control personalizado llamada .custom-switch, por lo que hay que agregarle esta y además la genérica .custom-control. Además, es necesario incluir dentro un control input de tipo check y la etiqueta con el mensaje correspondiente. Algo así:

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="opcion1">
  <label class="custom-control-label" for="opcion1">
    Marca o desmarca el interruptor de la izquierda
  </label>
</div>

consiguiendo el efecto que se ve en la animación anterior.

Este control no necesita JavaScript para funcionar, arreglándonos tan solo con la hoja de estilos de Bootstrap 4.

Por debajo lo que hace es ocultar el check original y meter el nuevo elemento en un pseudo-elemento ::before de la etiqueta, que cambia de estado en función de la pseudo-clase :checked del control, por lo que no es fácil cambiarle el aspecto.

Otras novedades de Bootstrap 4.2

Aparte de lo que he explicado hasta ahora, hay unas cuantas novedades más en esta versión, entre las que cabe destacar las siguientes:

  • Se da soporte para eventos táctiles en los carruseles, por lo que aparte de usar los controles, en los móviles podemos simplemente arrastrarlos con el dedo para cambiar lo que se muestra.
  • Los campos de los formularios que se estén validando muestran unos nuevos iconos para los estados :valid e :invalid.
  • Los "tooltips" y los desplegables de tipo popover ahora trabajan con el ShadowDOM para mayor rendimiento.
  • Se añaden algunos estilos nuevos para aspecto: .font-weight-lighter, .font-weight-bolder y .text-decoration-none.

Puedes ver a lista completa aquí.

Aquí te dejo un archivo ZIP con los ejemplos que he hecho más arriba (37.3Kb), para que puedas verlos en acción y probarlos.

Y si lo que quieres es aprender Bootstrap te recomiendo que hagas el curso online de Maquetación web multi-dispositivo con Bootstrap, Flexbox y CSS Grid de campusMVP, del que yo soy co-autor y tutor. No solo aprenderás Bootstrap en sus versiones 3 y 4, sino que dominarás el Responsive Web Design utilizando solo CSS además de las tecnologías CSS más recientes como Flexbox y CSS Grid.

¡Espero que te resulte útil!

Más de 10 títulos recomendados para techies

08/01/2019
Artículo original

Imagen Gerd Altmann en Pixabay - CC0 (No se requiere atribución)

En alguna ocasión hemos recomendado “libros clásicos” que todo programador debería leer en algún momento, pues aportan una serie de conocimientos no técnicos que te ayudarán a desarrollar tu carrera profesión.

Sin embargo, como no todo es trabajo, os traemos una serie de libros que consideramos que pueden ser de vuestro interés. Han sido escritos por una serie de tecnólogos, empresarios, científicos, historiadores, investigadores e innovadores.

A continuación encontrarás más de 10 recomendaciones ordenadas por orden alfabético de autor.

Four: El ADN secreto de Amazon, Apple, Facebook y Google de Scott Galloway

Portada del libro Four: el ADN secreto de Amazon, Apple, Facebook y Google

Scott Galloway, uno de los profesores de negocios más famosos actualmente, disecciona las estrategias ocultas bajo la deslumbrante apariencia de estos cuatro gigantes y muestra cómo apelan a las necesidades básicas que han movido a la humanidad desde tiempos ancestrales:

  • Amazon, a la de cazar y recolectar
  • Apple, a la de procrear
  • Facebook, a la de amar y
  • Google, a la de creer en un Dios.

Sapiens. De animales a dioses: Breve historia de la humanidad de Yuval Noah Harari

Portada del libro Sapiens. De animales a dioses: Breve historia de la humanidad

En Sapiens, Yuval Noah Harari traza una breve historia de la humanidad, desde los primeros humanos que caminaron sobre la Tierra hasta los radicales y a veces devastadores avances de las tres grandes revoluciones que nuestra especie ha protagonizado: la cognitiva, la agrícola y la científica. A partir de hallazgos de disciplinas tan diversas como la biología, la antropología, la paleontología o la economía, Harari explora cómo las grandes corrientes de la historia han modelado nuestra sociedad, los animales y las plantas que nos rodean e incluso nuestras personalidades. El libro del Dr. Harari es una lectura fascinante que ayudará a responder las grandes preguntas acerca de dónde venimos, y más importante, hacia donde nos dirigimos como especie.

Breves respuestas a las grandes preguntas de Stephen Hawking

Portada del libro Breves respuestas a las grandes preguntas

Se trata de la obra póstuma del famoso físico teórico y cosmólogo Stephen Hawking. En este libro ofrece su punto de vista personal a las grandes preguntas que desde siempre se hacen los humanos: ¿Hay un Dios? ¿Cómo empezó todo? ¿Es posible viajar en el tiempo? ¿La tecnología nos salvará o nos destruirá?... Hawking hace hincapié en el uso de la ciencia para ayudarnos a resolver los problemas a los que nos enfrentamos, y anima a las generaciones más jóvenes a que definan su propio futuro.

Innovation and its enemies de Calestous Juma

Portada del libro Innovation and its enemies

Aunque no hemos encontrado este título traducido al español, creemos que es una lectura muy recomendable. 

Esta cautivadora panorámica muestra la historia de la innovación y pone de relieve por qué la gente se resiste a las nuevas tecnologías. Calestous Juma, utilizando estudios del caso detallados de café, imprenta, margarina, mecanización de granjas, electricidad, refrigeración mecánica, música grabada, cultivos transgénicos y animales transgénicos, muestra cómo emergen, arraigan y crean nuevas ecologías institucionales que favorecen su establecimiento en el mercado. El libro utiliza estas lecciones de la historia para contextualizar los debates contemporáneos sobre tecnologías como la inteligencia artificial, el e-learning, la impresión 3D, la edición de genes, la robótica y los drones. En última instancia, aboga por transferir una mayor responsabilidad a los líderes públicos para que trabajen con científicos, ingenieros y empresarios para gestionar el cambio tecnológico, realizar los ajustes institucionales asociados y ampliar el compromiso público en asuntos científicos y tecnológicos.

Lo inevitable de Kevin Kelly

Portada del libro Lo Inevitable

En este libro, su autor Kevin Kelly, director ejecutivo fundador de la revista Wired, expone su visión del futuro y cómo la tecnología afectará nuestra vida diaria. Desde la realidad virtual en el hogar hasta la inteligencia artificial incorporada en todos los productos manufacturados, Kelly, examina estas y otras tendencias profundas, mientras explora cómo se superponen y son parte de una red codependiente.

Kelly explica que hay 12 fuerzas tecnológicas que según él revolucionarán completamente la forma en que compramos, trabajamos, aprendemos y nos comunicamos unos con otros. Al entenderlas y adoptarlas, dice Kelly, será más fácil para nosotros estar al tanto de la próxima ola de cambios y arreglar nuestras relaciones cotidianas con la tecnología de manera que produzcan los máximos beneficios.

Machine, Platform, Crowd: Harnessing Our Digital Future de Andrew McAfee y Erik Brynjolfsson

Portada del libro Machine, platforma, crowd

De los mismos autores que “La segunda era de las máquinas” nos llega este ahora este libro que, al menos nosotros, no lo hemos encontrado traducido al español, por eso hemos dejado su título en inglés.

Según sus autores (ambos colaboradores en el MIT de la iniciativa sobre la economía digital) hemos pasado de la primera fase de la revolución digital a una etapa en la que las plataformas y las multitudes de su título se han vuelto tan influyentes como las máquinas. Estamos viviendo en una era de cambios técnicos muy acelerados, pero la humanidad aún está a tiempo de controlar su propio destino. En lugar de hacer redundantes a los seres humanos, la tecnología nos brinda una oportunidad sin precedentes para dar forma a nuestro futuro.

En palabras de los propios autores, “El éxito de una empresa casi nunca se basa en la cantidad de tecnología a la que puede acceder, sino en cómo la gente usa esa tecnología y en los valores que incorporan en la organización".

Armas de destrucción matemática: Cómo el BigData aumenta la discriminación y amenaza la democracia de Cathy O’Neil

Portada del libro Armas de destrucción matemática

Es obvio que vivimos en la edad del algoritmo donde las decisiones que afectan a nuestras vidas no están hechas por humanos, sino por modelos matemáticos. En teoría, esto debería conducir a una mayor equidad: todos son juzgados de acuerdo con las mismas reglas, sin sesgo. Pero en realidad, ocurre exactamente lo contrario. Los modelos que se utilizan en la actualidad son opacos, no regulados e incontestables, incluso cuando están equivocados. Esto deriva en un refuerzo de la discriminación.

O’Neil profundiza en el lado oscuro del Big Data, anima a los que trabajan en la definición de dichos modelos a responsabilizarse de estos problemas y a los ciudadanos a adquirir más conocimientos sobre cómo se utilizan estos algoritmos y a exigir un cambio.

En defensa de la Ilustración de Steven Pinker

Portada del libro En defensa de la ilustración

En este libro, el científico cognitivo y autor Steven Pinker explica que las soluciones a nuestros problemas llegan a través del ideal de la Ilustración de usar la razón y la ciencia. Pinker nos insta a ver con otra perspectiva los titulares alarmistas y las profecías de la perdición que juegan con nuestros prejuicios psicológicos. Haciendo uso de datos empíricos, muestra que la vida, la salud, la prosperidad, la seguridad, la paz, el conocimiento y la felicidad van en aumento, no solo en Occidente, sino en todo el mundo. Él dice que este fenómeno no se debe a fuerzas que están fuera de nuestro control, sino que cree que la razón y la ciencia mejoran la humanidad.

Factfulness: Diez razones por las que estamos equivocados sobre el mundo. Y por qué las cosas están mejor de lo que piensas de Hans Rosling

Portada del libro Factfulness

Hans Rosling, una eminencia del análisis y divulgación de tendencias globales, afirma que tenemos diez instintos que distorsionan nuestra visión. Desde nuestra tendencia a dividir el mundo en dos campos (nosotros contra ellos) a la manera en que consumimos la información de los medios (basada en la explotación del miedo), pasando por el modo en que percibimos el progreso (creyendo que las cosas siempre empeoran). Nuestro problema es que no somos conscientes de lo que no sabemos, e incluso cuando estamos informados nos dejamos llevar por sesgos inconscientes y predecibles.

El autor se explica con gratificante claridad, mediante palabras y sobre todo a través de excelentes gráficos. Además, las fuentes en que se basan son generalmente publicaciones de organismos internacionales que cualquiera puede descargarse de Internet con un clic.

Las mujeres en la tecnología de varios autores

Este no es realmente el título de ningún libro (o quizás sí) sino que en este caso hemos querido recoger varios títulos (todos ellos en inglés) que guardan relación con el tema indicado:

  • The woman who smashed code de Jason Fagone: el libro cuenta la increíble historia de Elizebeth Smith Friedman y su esposo, William, quienes inventaron la ciencia moderna de la criptología y cómo la utilizaron para encontrar espías nazis, ayudando así en la victoria de la Segunda Guerra Mundial.
  • Brotopia de Emily Chang: la periodista de Bloomberg TV Emily Chang descubre lo que sucede entre bambalinas en las empresas de Silicon Valley. La narración se basa en entrevistas realizadas a personas que trabajan para dichas empresas, como Sheryl Sandberg, directora ejecutiva de Facebook, Susan Wojcicki, CEO de YouTube, y Marissa Mayer, ex directora ejecutiva de Yahoo, quienes describen las dificultades que tuvieron para romper el techo de cristal de este centro tecnológico.
  • Geek Girl Rising, de Heather Cabot y Samantha Walravens: este libro se adentra en el mundo de las menos conocidas emprendedoras y tecnólogas que están construyendo la próxima generación de empresas y luchando en el altamente mundo competitivo de Silicon Valley. Los lectores aprenderán sobre modelos a seguir como Debbie Sterling, la inventora de GoldieBox; Tracy Chou, exdesarrolladora líder en Pinterest; y Kathryn Minshew, CEO de The Muse, entre otras.

TRUCO - Depuración con Chrome: convertir archivos JavaScript en "cajas negras" para evitar depurarlos

07/01/2019
Artículo original

Por regla general, cuando estamos depurando una aplicación web hay ciertas cosas en las que podemos confiar. Por ejemplo en el hecho de que si se produce una excepción casi seguro que la culpa es de nuestro código y no de alguna biblioteca JavaScript conocida de las que estamos utilizando. Es decir, la excepción puede saltar en una línea de jQuery o de Angular, pero eso no significa que el error esté ahí, sino que se ha producido por una llamada previa hecha por nuestro código.

Por ello, cuando estamos depurando paso a paso, poniendo puntos de interrupción en ciertas líneas para luego ir ejecutando el código función a función, introduciéndonos en ellas con F11 o saltándolas con F10, no tiene mucho sentido que, de repente, se nos abra el código fuente de alguna de estas bibliotecas, pues no vamos a depurarlo. Y mucho menos si lo estamos usando ya minimizado y listo para producción, puesto que encima no veremos gran cosa tampoco:

La imagen muestra el depurador de Chrome parado en una línea ininteligible de jQuery

¡Estupendo que me pare el depurador en esta línea tan interesante! ¿no?

Por suerte los desarrolladores de Chrome ya han tenido en cuenta esta situación y nos permiten evitar que ocurra, permitiéndonos meter en una "caja negra" los scripts que nos interesen. La acción se denomina "blackboxing" y lo que hace es que el script se ejecuta normalmente pero, en lo que respecta a la depuración, actúa como una caja negra de modo que se saben los parámetros que entran y los que salen, pero jamás se accede a su interior.

En la práctica esto significa que el depurador jamás se parará en ningún código de su interior, agilizando nuestra depuración.

Vamos a ver cómo funciona...

Activando la capacidad de "blackboxing"

Por defecto esta característica está deshabilitada, por lo que no podremos utilizarla. Para activarla tenemos que ir a los ajustes de las herramientas del desarrollador y acceder al apartado correspondiente que se llama "Blackboxing", activándola desde allí, como se muestra en esta pequeña animación:

Esta animación muestra cómo activar la característica: F12, F1, Blackboxing y 'Blackbox content scripts'

Añadir scrips a la caja negra

Una vez activada la funcionalidad, tenemos dos opciones para añadir scripts a las caja negra:

1.- Añadir rutas y/o nombres genéricos

Por ejemplo, generalmente no querremos que el depurador se pare en ninguna biblioteca minimizada, de producción. Como los archivos de estas bibliotecas suelen terminar con el nombre .min.js, podemos agregar un patrón como este al nombre de archivo usando el botón que tenemos debajo del check que acabamos activar:

La animación muestra cómo agregar un patrón de archivos para convertir en caja negra

Fíjate en un par de cosas importantes:

  • El patrón es una expresión regular. Por lo tanto puedes usar toda la potencia que te dan éstas (que es mucha) para localizar todo tipo de archivos, Además, como se ve en la animación, en una expresión regular un punto representa cualquier carácter, por lo que si queremos indicar un punto de verdad hay que "escapearlo" poniéndole una barra inclinada delante, como se ve en la animación. Tenlo en cuenta. Gracias a esto podemos añadir muchos archivos de golpe. En la animación todos los que estén minimizados.
  • Estos patrones no solo nos permiten convertir archivos en cajas negras, sino lo contrario: deshabilitar la caja negra para ciertos archivos que estuviesen incluidos en alguno de los patrones que hayamos añadido. Así que vale para las dos cosas.

2.- Convertir individualmente cada archivo en una caja negra

Si además (o en lugar) de usar patrones queremos convertir en cajas negras archivos concretos, al cerrar el diálogo anterior y haber habilitado la funcionalidad, tendremos una nueva opción en los menús contextuales de los archivos en la pestaña de código fuente, Sources. Basta con que abramos cualquier archivo y pulsemos con el botón derecho en cualquier parte del archivo abierto para ver una nueva opción Blackbox Script que nos permite hace precisamente eso:

Animación que muestra el nuevo menú contextual con la opción de caja negra

A partir de ese momento el depurador no se detendrá en ese archivo, que es lo que queríamos.

Fíjate en como en la animación anterior, una vez convertido el archivo en una caja negra, podemos volver a habilitarlo para depuración con el mismo menú contextual, que ahora pone Stop blackboxing. ¡Súper-fácil!

En resumen

El "blackboxing" de scripts puede ser muy útil para ir más rápido a la hora de depurar y ser más productivo ya que raramente nos interesa entrar en el detalle del código de una biblioteca de terceros o que esté muy probada (salvo quizá con objetivos didácticos), y haciendo que actúen como cajas negras lo evitaremos. Además es muy fácil de deshabilitar si lo necesitásemos en un momento determinado.

Mi consejo sería que deshabilitases directamente la depuración de bibliotecas para producción (.min.js) y quizá las que. aunque no estén minimizadas, estén ampliamente utilizadas y probadas por miles de desarrolladores (frameworks y cosas así). Ahorrarás tiempo y te despistarás menos, fijándote tan solo en la información que trasiega tu programa y las acciones que se gestionan con éste, considerando tan solo los efectos que producen las otras bibliotecas de terceros.

¡Espero que te resulte útil!

Página Anterior Página Siguiente