You are here

Mozilla Hispano

Usando la nueva API de tematización en Firefox

Noticias de Mozilla Hispano - Sáb, 11/08/2018 - 19:20

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Desde las poderosas extensiones como Stratiform o FT Deep Dark hasta los sencillos temas ligeros, los temas han sido bastantes populares dentro de Firefox. Ahora que Firefox Quantum (57) se ha lanzado con muchas mejoras de desempeño y una nueva interfaz brillante, queremos cerrar la brecha con una nueva API de tematización que te permita ir más allá de los básicos temas de peso ligero.

Demostración por John Gruen

¿Qué puedes tematizar?

Antes del lanzamiento de Quantum, los temas ligeros tenían un limitado conjunto de propiedades que podían ser tematizadas: sólo podías agregar una imagen de cabecera y establecer el color de texto y el color de fondo del marco. La nueva API de tematización introduce algunas nuevas propiedades. La lista completa puede ser encontrada en MDN. Un objeto Theme básico luce como esto:

{ "colors": { "accentcolor": "tomato", "textcolor": "white", "toolbar": "#444", "toolbar_text": "lightgray", "toolbar_field": "black", "toolbar_field_text": "white" }, "images": { "headerURL": "" } }

Así es como se muestra el tema anterior:

Nota cómo la propiedad images.headerURL es establecida con una cadena de texto vacía. Esto es porque es una de las tres propiedades obligatorias: images.headerURL, colors.accentcolor y colors.textcolor.

Finalmente, otra mejora sobre los temas ligeros es el soporte para múltiples imágenes, usando el campo images.additional_backgrounds que toma una matriz de rutas de imágenes. Las alineaciones y mosaicos de estas imágenes se logran usando properties.additional_backgrounds_alignment y properties.additional_backgrounds_tiling, que toman una matriz de valores background-position y background-repeat respectivamente. Puedes revisar esto en la MDN para un ejemplo. Puedes usar múltiples fondos para mostrar cortinas en ambos lados de la interfaz del navegador, o como una forma de agregar varios indicadores temáticos (deportes/clima/navegación privada) en la interfaz.

Temas dinámicos

Digamos que te gustaría introducir un modo noche a tu tema. Los temas dinámicos te permiten hacer esto. Éstos tienen el poder completo de una extensión normal de navegador. Para usar la tematización dinámica, necesitas agregar el permiso de theme en tu archivo manifest.

El método browser.theme.update() es el núcleo de este tipo de tematización. Éste toma un objeto Theme como parámetro. El método puede ser llamada en cualquier lugar de tus scripts en segundo plano.

Para este ejemplo, vamos a crear una extensión que cambie el tema dependiendo de si es de noche o de día. El primer paso es crear una función en tu script de background que cambie tu tema al tema de día o al tema de noche:

var currentTheme = ''; const themes = { 'day': { images: { headerURL: 'sun.jpg', }, colors: { accentcolor: '#CF723F', textcolor: '#111', } }, 'night': { images: { headerURL: 'moon.jpg', }, colors: { accentcolor: '#000', textcolor: '#fff', } } }; function setTheme(theme) { if (currentTheme === theme) { // No se cambia el tema si ya ha sido cambiado return; } currentTheme = theme; browser.theme.update(themes[theme]); }

El código anterior define dos temas: El tema de día y el tema de noche, la función setTheme usa browser.theme.update() para establecer el tema. El siguiente paso ahora es usar esta función setTheme y verificar periódicamente si la extensión debe intercambiar los temas. Puedes hacer esto usando la API de alarmas. El código anterior verifica periódicamente y establece el tema de acuerdo a:

function checkTime() { let date = new Date(); let hours = date.getHours(); // Se establecerá el tema de día entre las 8am y 8pm. if (hours > 8 && hours < 20) { setTheme('day'); } else { setTheme('night'); } } // Al inicio, verificar el tiempo para ver qué tema mostrar. checkTime(); // Configurar la alarma para verificar esto regularmente. browser.alarms.onAlarm.addListener(checkTime); browser.alarms.create('checkTime', {periodInMinutes: 5});

¡Eso es todo para este ejemplo! El ejemplo completo está disponible en el repositorio de GitHub de webextension-examples.

Otros método que no es cubierto por el ejemplo es browser.theme.reset(). Este método simplemente reinicia el tema al tema predeterminado del navegador.

Temas por ventana

La API de tematización es muy poderosa, ¿pero qué pasa si necesitas aplicar un tema diferente para ventanas privadas o ventanas inactivas? Desde Firefox 57 en adelante, es posible especificar un parámetro windowId tanto a browser.theme.update() como browser.theme.reset(). El windowId es el mismo ID retornado por la API de ventanas.

Vamos a hacer un ejemplo sencillo que agrega un tema oscuro a ventanas privadas y mantiene las otras ventanas con el tema predeterminado

Empezamos definiendo la función themeWindow:

function themeWindow(window) { // Verifica si la ventana está en navegación privada if (window.incognito) { browser.theme.update(window.id, { images: { headerURL: "", }, colors: { accentcolor: "black", textcolor: "white", toolbar: "#333", toolbar_text: "white" } }); } // De otra forma, reinicia al tema predeterminado else { browser.theme.reset(window.id); } }

Una vez que está hecho, podemos conectar esto con la API de ventanas:

browser.windows.onCreated.addListener(themeWindow); // Tematizar todas las ventanas abiertas actualmente browser.windows.getAll().then(wins => wins.forEach(themeWindow));

Bastante sencillo, ¿verdad? El ejemplo completo lo puedes encontrar aquí. Así es como se ve el ejemplo:

Otro complemento que hace uso de estas capacidades es Containers Theme por Jonathan Kingston, que establece el tema de cada ventana según el contenedor de la pestaña seleccionada. El código fuente de este complemento lo puedes encontrar aquí.

El complemento VivaldiFox también hace uso de esta capacidad para mostrar diferentes temas de sitios web en diferentes ventanas.

Obtener información sobre el tema actual

Desde Firefox 58 en adelante, puedes obtener información sobre el tema actual y vigilar actualizaciones del tema. He aquí por qué esto importa:

Esto permite a los complementos integrar su interfaz de usuario sin problemas con el actual tema instalado por el usuario. Un ejemplo de esto sería coincidir los colores de tu barra lateral con los colores de tu tema actual.

Para hacerlo, Firefox 58 provee dos nuevas API: browser.theme.getCurrent() y browser.theme.onUpdate.

Aquí está un ejemplo que aplica algunas de las propiedades del tema actual al estilo de un sidebar_action:

function setSidebarStyle(theme) { const myElement = document.getElementById("myElement"); // colors.frame y colors.accentcolor son alias if (theme.colors && (theme.colors.accentcolor || theme.colors.frame)) { document.body.style.backgroundColor = theme.colors.accentcolor || theme.colors.frame; } else { document.body.style.backgroundColor = "white"; } if (theme.colors && theme.colors.toolbar) { myElement.style.backgroundColor = theme.colors.toolbar; } else { myElement.style.backgroundColor = "#ebebeb"; } if (theme.colors && theme.colors.toolbar_text) { myElement.style.color = theme.colors.toolbar_text; } else { myElement.style.color = "black"; } } // Establecer los estilos cuando la página de la extensión se carga browser.theme.getCurrent().then(setSidebarStyle); // Observar cambios de tema browser.theme.onUpdated.addListener(async ({ theme, windowId }) => { const sidebarWindow = await browser.windows.getCurrent(); /* Solo actualiza el tema si aplica a la ventana donde está la barra lateral. Si se pasa un windowId en una actualización, el tema solo se aplica a esa ventana. Sino, el tema se aplica globalmente a todas las ventanas. */ if (!windowId || windowId == sidebarWindow.id) { setSidebarStyle(theme); } });

El ejemplo completo puede ser encontrado en Github. Como puedes ver en la siguiente captura de pantalla, la barra lateral usa los colores del tema del navegador aplicado actualmente:

Otro ejemplo es el complemento Tree Style Tab que hace uso de estas API para integrar su interfaz con el tema usado actualmente. Este es un ejemplo real del complemento funcionando junto con VivaldiFox:

¿Qué sigue?

¡Hay más APIs llegando! Tenemos planeado expandir el conjunto de propiedades soportadas y pulir algunas asperezas a la forma en cómo los temas son aplicados. El registro de bug para el API puede ser encontrado en Bugzilla.

Por mientras, no podemos esperar para ver de lo que serás capaz de hacer con la nueva API de tematización. Por favor, déjanos saber qué mejoras te gustaría ver.

Categorías: Mozilla Hispano

Mozilla Activate Day 2018 – San Salvador

Noticias de Mozilla Hispano - Lun, 06/08/2018 - 12:16

Desde hace tres años la comunidad Mozilla en Centroamérica realiza un evento anual donde se reúnen diversos representantes de los distintos países de la región para dar a conocer los proyectos en los que la comunidad Mozilla está trabajando y asi unir esfuerzos para mejorar las comunidades y la organización por país.

Este año, el encuentro se realizó en la Universidad Don Bosco ubicado en la ciudad de San Salvador el día miércoles 11 de julio del 2018 y se enfocó en los temas relacionados a la campaña Mozilla Activate,  donde se dieron a conocer al público los proyectos, actividades, iniciativas y eventos que se están realizando dentro de la comunidad hispana.

Dentro de este Mozilla Activate Day se hablaron diversos temas:

  • Como participar en la comunidad
  • Desarrollo con Rust
  • Realidad virtual para la web abierta
  • AFrame y WebVR
  • Using & Testing Nightly
  • Charlas de Tecnología con Tech Speakers!
  • Crea tu propia extensión para Firefox
  • Diversidad e inclusión en Mozilla
  • El proyecto Common Voices
  • Desarrollo de video juegos
  • Mozilla IOT (Internet of Things)

La Agenda del día se presentó de la siguiente manera:

Introducción a la comunidad Mozilla
  • Expositor: Aaron Galagarza (Mozilla Costa Rica)
  • Descripción: Se Presentaron los temas relacionados a la comunidad Mozilla general, breve descripción sobre qué es el proyecto Mozilla, y como es la participación de la comunidad en los distintos países de la región.

Realidad Virtual y WebVR 
  • Expositor: David Gonzalez Blanchard (Mozilla Nicaragua)
  • Descripción: WebVR es una especificación abierta que hace posible experimentar VR en su navegador. El objetivo de la charla fué proporcionar a todos los participantes acceso a experiencias de realidad virtual, sin importar qué dispositivo se utilice y que tengan conocimientos básicos sobre cómo crear contenido VR para la web.

Diversidad e inclusión en Mozilla / El proyecto Womoz 
  • Expositor: Karla Hernández (Mozilla El Salvador)
  • Descripción: Esta charla se enfocó en el corazón de Mozilla, el cual son las personas. Las personas son nuestra prioridad y hacemos todo lo posible por reconocer, valorar y respetar la diversidad de nuestros colaboradores globales. En el proyecto Mozilla se aceptan las contribuciones de todos aquellos que compartan nuestros objetivos y deseen contribuir de una manera positiva y constructiva dentro de nuestra comunidad.

Programación de extensiones web (Web extensions) 
  • Expositores:
  • Descripción: Los complementos proporcionan una forma segura, simple y potente de personalizar su experiencia de navegación. Gracias a las API de WebExtensions, es más fácil que nunca crear extensiones que puedan trasladarse fácilmente a Firefox, Chrome, Edge y Opera. A través de esta actividad, se mostró a los nuevos desarrolladores la oportunidad de crear extensiones de navegador para resolver problemas reales y mejorar sus vidas y la web.

Dive into Rust: el futuro de la programación de sistemas
  • Expositores:
  • Descripción: Rust es un lenguaje de programación de sistemas importante para el futuro de la web. Funciona increíblemente rápido, previene fallas de segmentación y garantiza la seguridad de los hilos de ejecución. Con esta charla, queremos que más desarrolladores entiendan, usen y evangelicen este lenguaje para hacer que la web sea mejor y más segura.

Como participar en la Comunidad 

Mozilla IOT (Internet of Things) 
  • Expositor: Yeffri Salazar (Mozilla Guatemala)
  • Descripción: El Internet de las cosas es un concepto que se refiere a la interconexión digital de objetos cotidianos. Con esta charla se demostró la apuesta de Mozilla para el mundo de Internet de las cosas o como ellos lo denominan web de las cosas, una manera entretenida y sencilla de utilizar tu navegador como control de cosas conectadas a Internet

Privacidad en la web y tips para navegar seguro. 
  • Expositor: Roni De León. (Mozilla Panamá)
  • Descripción: Su privacidad es un factor importante considerado por Mozilla en el desarrollo de cada uno de nuestros productos y servicios.  Mozilla tiene como misión que Internet siga creciendo de forma saludable. En esta charla se mostraron algunos tips para navegar de forma segura y que aspectos de la privacidad debemos tomar en cuenta diariamente.

Servo, el motor para el navegador del futuro 
  • Expositor: Carlos Cárcamo (Mozilla El Salvador)
  • Descripción: Charla sobre el nuevo motor de renderizado de Mozilla para el firefox del futuro y cómo colaborar con el proyecto. El proyecto Servo es un esfuerzo comunitario para crear un motor de navegador capaz de aprovechar el hardware multinúcleo para mejorar la velocidad, la estabilidad y la capacidad de respuesta. Servo está escrito en el lenguaje de programación Rust, brindando un rendimiento increíblemente rápido y seguridad de memoria al navegador.

Desarrollo de Videojuegos para la Web 
  • Expositor: Jorge Aguilar (Mozilla Honduras)  
  • Descripción: El objetivo de la charla fue dar a conocer el estado y el mercado de los videojuegos para la web. se mostraron ejemplos de diferentes proyectos open source para el desarrollo de videojuegos web y se presentó en vivo un juego funcional creado con VanillaJS.

Conversatorio sobre experiencias de trabajo en la web y la comunidad Mozilla.

 

Agradecemos mucho a todos los participantes del evento, a la comunidad en general, a la universidad Don Bosco y sus autoridades y en especial a Mozilla por permitirnos la oportunidad de llevar su misión y representar a la comunidad en este evento.

El próximo año estamos planeando llevar el Encuentro Mozillero centroamericano hacia Guatemala, por lo que están cordialmente invitados para el próximo año. Coméntanos ¿que te gustaría que presentemos el próximo año? y que expectativas tendrías para un próximo Activate day.

Categorías: Mozilla Hispano

Firefox 60 – Módulos y más

Noticias de Mozilla Hispano - Dom, 22/07/2018 - 19:44

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Ya Firefox 60 está aquí, y continúa el desarrollo de Quantum. El poder del procesamiento paralelo de Quantum CSS ahora se encuentra disponible  en Firefox para Android,  y seguimos trabajando en WebRender, que moderniza toda la idea de lo que significa dibujar una página web. Pero no estamos aquí solo para adorar las cosas internas del navegador. Pues Firefox 60 trae un montón de mejoras para la web y algunas de ellas orientadas a los desarrolladores. Aquí vemos las más importantes:

¡Los módulos ES están aquí!

 

El código modular no solo es una buena idea, se debe hacer por ley ¡es una gran idea! La posibilidad de separar unidades funcionales del software, permite la reutilización individual de módulos y facilita la inclusión de código de terceros.  Muchos lenguajes tienen soporte para módulos, y si estás familiarizado con NodeJS, éstos han estado disponibles desde hace tiempo mediante el uso de require en el API de  CommonJS , pero una sintaxis estandarizada se creó como parte de ES2015 (ES6).

Aunque la sintaxis para módulos de ES fue estandarizada, solo faltaba que los navegadores entendieran y descargaran dichos módulos. Esto toma un poco de tiempo adicional, pero ahora que el comportamiento de carga del navegador fue estandarizado, ha iniciado su soporte, y en este lanzamiento se ha agregado el soporte a Spidermonkey, el motor de JavaScript de Firefox. Puedes chequear la documentación en MDN, y por supuesto no te pierdas el articulo en inglés de Lin Clark’s sobre los detalles de los módulos de ES.

Mantén las cookies solo para ti

Firefox 60 soporte el atributo Same-Site cuando se establecen las cookies. Cuando se activa, el navegador no enviará las cookies junto a una petición cross-origin request al servidor, por ejemplo, cuando se descarga una imagen. Este ayuda a mitigar las vulnerabilidades de tipo Cross-Origin Request Forgery. Existe un modo “relajado”  que implementa lo anterior, además de un modo estricto que, adicionalmente no enviará las cookies al recibir conexiones. Esto previene que un sitio malicioso enlace a una página donde pueda ocurrir un comportamiento extraño cuando se envíen las cookies. Puedes leer mas sobre esto en este artículo (en inglés) del blog de Mozilla Security.

API de Autenticación Web

Es conocido desde hace tiempo, que en muchos contextos, la combinación de un usuario conocido (como una dirección de correo) y las contraseñas generadas por usuarios no son los suficientemente seguras para la autenticación. Esto ha llevado a implementar autenticación de múltiples factores (Multi-Factor Authentication en inglés), usualmente 2 factores de autenticación, el cual, adicionalmente a la contraseña, los usuarios también deben proveer información de una fuente adicional. Muchos sitios envían un mensaje SMS con un código a un dispositivo móvil, y otros aceptan códigos generados por una aplicación generadora de códigos o con un hardware construido para ello. Todo esto ha requerido que el usuario copie números de una pantalla a un campo de texto o un hardware que simule la presión de las teclas.

La API de Autenticación Web (también conocido como WebAuthn) busca eliminar la incomodidad de este proceso al permitir a un dispositivo o aplicación de autenticación de multi-factores, comunicarse directamente con el sitio. El proceso de cómo funciona esto es un poco complejo para manejarse en esta entrada, pero puedes aprender de WebAuthn en MDN o en este blog.

Un trazo de estilo

La propiedad (aún no es estándar)  text-stroke define una línea centrada horizontalmente a lo largo de los caracteres de un texto. Permite hacer efectos que no son posibles hacer solo con text-shadow. Un trazo ancho puede obstruir porciones de caracteres porque por defecto, la línea es dibujada sobre la tipografía. Esto puede ser un poco feo. Para arreglarlo, los navegadores están tomando prestado la propiedad paint-order del estándar SVG. Cuando se coloca la propiedad, los navegadores dibujarán un trazo debajo la tipografía, por ejemplo:

Check out the demo on Glitch

Es súper elegante, pero no olvides que aún no es un estándar, y siempre debes chequear que el texto es legible sin aplicar efectos. Puedes leer más en MDN y chequear la matriz de comparación.

ESR / Política de Grupos

Firefox 60 es la siguiente versión de Firefox diseñada a ser una versión de soporte extendido, mejor conocido como ESR “Extended Support Release”. Las versiones ESR están orientadas a administradores de sistemas que implementan y mantienen entornos de escritorio en organizaciones grandes. Ellas reciben actualizaciones de seguridad en sincronización con las últimas versiones de lanzamiento de Firefox, y el soporte de cada versión ESR se traslapa con la siguiente versión. El período entre estas versiones permite a las organizaciones certificar e implementar nuevas versiones ESR  antes de dejar el soporte a la versión anterior.

Firefox 60 se lanza junto a la primera encarnación del Motor de Políticas que permite a los administradores de las organizaciones configurar Firefox para todos los usuarios de su organización. En Windows,  esto se logra utilizando Windows Group Policy, y por medio de un archivo de configuración para otras plataformas. No es una funcionalidad que la mayoría de usuarios de Firefox necesite, pero si tu trabajo es administrar miles de instalaciones de Firefox, esperamos que disfrutes de esta funcionalidad.

¿Te gustaría saber más?

Como siempre,  la lista completa de cambios orientada a desarrolladores está en MDN y puedes encontrar las notas de lanzamiento aquí.

¡Sigue rockeando la web libre!

Categorías: Mozilla Hispano

Encuentro Centroamericano de Software Libre 2018

Noticias de Mozilla Hispano - Vie, 20/07/2018 - 16:29

Los días 11, 12 y 13 de julio de 2018, se llevo a cabo el X Encuentro centroamericano de software libre y como parte de la comunidad Mozilla centroamérica participamos de la mejor manera en este evento que se llevó a cabo en la ciudad de San Salvador, El Salvador.

El Encuentro Centroamericano de Software Libre (ECSL) es un evento anual organizado desde el año 2009 por y para la comunidad de Software Libre Centroamérica (SLCA). El ECSL es una reunión de activistas e integrantes de comunidades y grupos de usuarios/as que sirve como punto de encuentro y espacio de articulación, educación, coordinación e intercambio de ideas para fortalecer acuerdos y formas de trabajo conjuntas que faciliten la promoción del uso y desarrollo del Software Libre en la región.

El Encuentro de software libre de este año tenia los siguientes ejes temáticos:

  • Eje Temático #1: Aportemos al desarrollo de más y mejor software libre.
  • Eje Temático #2: Desarrollemos y conozcamos más sobre hardware libre.
  • Eje Temático #3: Liberemos espacios en la web con software libre.
  • Eje Temático #4: Usemos geo-tecnologías libres para la gestión de información geográficas.
  • Eje Temático #5: Seamos una comunidad más inclusiva y diversa.
  • Eje Temático #6: Democraticemos los medios de comunicación con el apoyo del software libre.
  • Eje Temático #7: Fortalezcamos la comunidad centroamericana de software libre.
  • Eje Temático #8: Abramos un espacio de desconferencia.

A la fecha, se ha realizado en Nicaragua (2009), Costa Rica (2010), El Salvador (2011), Guatemala (2012), Belice (2013), Panamá (2014), Honduras (2015), Nicaragua (2016) y Costa Rica (2017). En su décima edición, se realizó en la ciudad de San Salvador, El Salvador los días 11, 12 y 13 de julio del 2018.

 

Este año fue nuestro cuarto año consecutivo en el cual participamos arduamente del evento y realizamos diversas presentaciones relacionadas a los proyectos que Mozilla está llevando a cabo en este momento. Dentro de los principales tópicos tenemos la campaña de Mozilla Activate.

Los temas que presentados por la comunidad Mozilla fueron: ¿Qué es el proyecto Mozilla?


Impartida por Aaron Galagarza de Mozilla Costa Rica: La conferencia consistió en mostrar cómo funciona el proyecto de Mozilla y toda la información referente a las actividades que se realizan en la comunidad.

Realidad virtual con A-Frame


Impartida por David Antonio Gonzalez Blanchard de Mozilla Nicaragua: El objetivo del taller fue mostrarle a los participantes como crear experiencias en realidad virtual utilizando este framework  y que estos entiendan el funcionamiento de la realidad virtual con Mozilla.

Programación de extensiones web

Impartida por Jorge Mizrain Aguilar Perez de Mozilla Honduras: Durante esta charla se explicó cómo desarrollar complementos para Firefox utilizando Extension APIs, y que a su vez sean compatibles con otros navegadores que soporten esta tecnología.

Desarrollo de videojuegos para la web


Impartida por Jorge Mizrain Aguilar Perez de Mozilla Honduras: El objetivo del taller fué mostrar el estado y el mercado de los videojuegos para la web. se mostraron diferentes ejemplos de proyectos open source para el desarrollo de videojuegos web y el desarrollo en vivo de un juego funcional con VanillaJS.

Diversidad e Inclusión en Mozilla


Impartida por Karla Hernández de Mozilla El Salvador: Durante la charla se habló sobre el trabajo que se realiza en Mozilla en temas de diversidad e inclusión y también se habló sobre la colaboración, inclusión social y acercamiento de los diversos grupos al mundo de las tecnologías de información.

Colabora con Mozilla


Impartida por Eduaro Enrique Gómez Valencia de Mozilla El Salvador: El objetivo principal de esta charla fue dar a conocer la comunidad, sus principios e iniciativas en cuanto a Software Libre y como pueden incluirse en la comunidad local y global.

Privacidad web y consejos para navegar seguro


Impartida por Roni De León Villaeral de Mozilla Panamá: La principal visión de este panel de discusión fue promover el uso de Firefox como un navegador enfocado en el cuidado de la privacidad, así como diferentes complementos que brindan una navegación segura.

Servo: El motor para el navegador del futuro


Impartida por Carlos Eduardo Carcamo Mendoza de Mozilla El Salvador: Esta charla se trató sobre el nuevo motor de renderizado de Mozilla para el Firefox del futuro y cómo colaborar. El proyecto Servo es un esfuerzo comunitario para crear un motor de navegador capaz de aprovechar el hardware multi-núcleo para mejorar la velocidad, la estabilidad y la capacidad de respuesta.

Introducción a Rust y Demo práctica


Impartida por Andrés Alonzo de Mozilla Guatemala: En esta charla se dio una introducción al nuevo lenguaje de programación Rust, el cual es un lenguaje de programación compilado, de propósito general y multiparadigma que está siendo desarrollado por Mozilla.

Internet de las cosas y Mozilla IOT

 


Impartido por Yeffri Salazar de Mozilla Guatemala: El Internet de las cosas es un concepto que se refiere a la interconexión digital de objetos cotidianos. Con esta charla se demostró la apuesta de Mozilla para el mundo de Internet de las cosas, una manera entretenida y sencilla de utilizar tu navegador como control de cosas conectadas a Internet.

Agradecemos mucho a los organizadores, los patrocinadores y todas las personas que apoyaron y participaron en el ECSL El Salvador, 2018. Agradecemos de todo corazón a Mozilla por permitirnos participar en dicho evento y poder apoyarnos, ademas de permitirnos la oportunidad de representar a la comunidad a nivel centroamericano.  Esperamos participar en el próximo ECSL 2019 el cual se llevará a cabo en la ciudad de Guatemala.

Para ver más fotos el evento puedes consultar el siguiente enlace:

https://photos.app.goo.gl/y6P2DQKauNjw3YY46

Categorías: Mozilla Hispano

Depurando Web Push con Mozilla Firefox

Noticias de Mozilla Hispano - Mar, 17/07/2018 - 03:59

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Introducción

Este artículo es parte de una serie sobre el uso y funcionamiento con Web Push y el servicio Web Push de Mozilla. Este artículo no pretende ser una guía general, sino ofrecer sugerencias y visión en el mejor uso del servicio. Se presume algún conocimiento de JavaScript, Python, u otras tecnologías.

Uno de los retos con los problemas de implementación de Web Push es intentar averiguar qué pasó mal. Web Push tiene un gran número de “partes en movimiento”, sistemas y componentes que necesitan trabajar juntos para que tu mensaje sea satisfactoriamente enviado y recibido. Mientras este artículo no puede localizar todas las razones que un mensaje dado de Push podría fallar, intentaré proporcionar herramientas y guía para los problemas más comunes.

Problemas comunes Informes de errores

El problema más grande que vemos es desde sitios que no prestan atención a los códigos de retorno que suministramos. Un artículo previo mencionó como puedes manejar suscripciones para reducir tu coste de envío de mensajes que nunca serán entregados. Es también importante prestar atención a el error que es devuelto.

Un error puede retornar un cuerpo como el siguiente:

{ 'errno': 102, 'message': 'Request did not validate invalid token', 'code': 404, 'more_info': 'http://autopush.readthedocs.io/en/latest/http.html#error-codes', 'error': 'Not Found' }

La lista de valores errno está disponible en la documentación de Autopush. (Autopush es el nombre del servidor open source que ejecutamos para manejar la recepción y envío de actualizaciones de subscripciones push.) El servidor intenta proporcionar tanto detalle y ayuda como sea posible, así que si tus mensaje no están llegando, los mensajes Autopush pueden ayudarte un poco.

Asuntos relacionados con VAPID

Otro problema potencial es la confusión sobre VAPID. VAPID es una especificación en desarrollo para la “auto identificación” de sitios de suministro de suscripciones. Esto significa que si hay un problema importante, el operador del servidor push tiene una manera de contactar a quien está enviando mensajes problemáticos. Si estás viendo un amplio número de mensajes con código de respuesta “401”,  es posible que tienes un problema con tu autenticación VAPID.

VAPID también permite a un sitio crear “suscripciones restringidas”. Estas suscripciones son bloqueadas así que solo la parte que tiene la clave VAPID puede enviarlas. Esto puede ser un poco confuso.

Muy simple, VAPID es un bloque de datos criptográficos firmado con una clave que consta de dos partes: una clave privada que nunca compartes y es usada para firmar el token VAPID, y una clave pública que es segura para compartir y es usada para crear la suscripción restringida. Generalmente, tienes una clave VAPID que dura por bastante tiempo. No es una buena idea que dure para siempre, pero ciertamente puede durar por un año o similar. Hablaré sobre las implicaciones de esto en un momento.

Cuando tu aplicación solicita un endpoint push, tienes la opción de proporcionar tu clave pública VAPID como applicationServerKey. Esto creará una nuevo endpoint de suscripción que está bloqueado a esa clave. Para poder enviar una petición de suscripción con éxito, debes firmar el bloque VAPID usando la clave privada correspondiente, e incluir la clave pública con tu petición. (Cómo incluir la clave pública cambió entre la versión (Draft) 01 y la versión 02. Probablemente quieres encontrar una librería que realice la firma. También querrás consultar la documentación para el servicio de push que elijas para ver qué formas aceptan. La mayoría de las plataformas push aceptan la versión 02.)

Ten en cuenta que la clave pública VAPID está atada a la URL que hayas solicitado. Esto significa que necesitas usar el mismo par de claves cada vez que quieras enviar datos a esa URL. Si alguna vez quieres cambiar la clave VAPID, necesitarás acceder a un nuevo endpoint y descartar el anterior. Tu decides como hacer esto, por supuesto. Tu aplicación podría simplemente acceder la nueva clave pública desde una localización conocida, generar una nueva petición URL y enviar la nueva información de registro de nuevo al servidor. Estos usa mucho del mismo código que usarías para un evento pushsubscriptionchange.

Así que , para errores 401 VAPID, querrás chequear:

  1. ¿Estás usando la misma clave para que usaste para adquirir la suscripción restringida?
  2. ¿Has firmado correctamente tu clave de autorización VAPID?
  3. ¿Has incluido todas las cabeceras VAPID requeridas con tu petición?
Encriptado de datos

Finalmente, está la encripción de datos. Esto puede ser lo más complicado de depurar porque el servidor push no tiene forma de saber si la encripción es correcta cuando acepta un mensaje para entrega. Además, un mensaje solo es entregado por el agente usuario (UA) si el UA puede descifrarlo satisfactoriamente. Esto previene tu aplicación de despertar para mensajes falsos, lo cual podría agotar la vida de la batería.

De nuevo, la mejor manera de resolver esta clase de problemas es usar una librería. Esto no es siempre posible, y puedes tener situaciones donde necesites crear una propia. Hay una página que te puede ayudar a guiarte al proceso de encriptado de tus datos, sin embargo actualmente solo funciona para Firefox.

Ten en cuenta que hay numerosos cambios en las especificaciones que podrían no estar soportadas aún. A partir de la fecha de publicación, la mayoría de implementaciones push aceptaran el encoding ECE Draft 03 “aesgcm”.

Hay una propuesta para que el agente reporte las formas de criptografía que soporta, pero esto no ha sido formalmente aceptado todavía. Desafortunadamente, este es uno de los problemas con el uso de tecnología que aún está en desarrollo. Si deseas seguir con los cambios que están siendo propuestos, deberías seguir los grupos de trabajo.

Desafortunadamente, muchos errores de encriptación no son detectados por el Servicio Push. Esto es porque el servicio Push no puede descrifrar tu mensaje. Afortunadamente, es posible to echar un vistazo al cliente para ver si podría haber un error.

Depurar el escritorio

Usa la consola del navegador para que te ayude a depurar el escritorio. Date cuenta, que esto es diferente a la consola web que aparece en el panel de las herramientas de desarrollador. La consola de navegador muestra un mayor nivel de mensajes que pueden no ser visibles por la página o la consola web.

El beneficio es que serás capaz de ver mensajes que tu service worker así como otros mensajes push. Por ejemplo, si miras a la página de pruebas que usamos, podrías ver algo similar en tu navegador:


Un ejemplo de la salida de la consola de navegador.

Cerca del final de esa ventana, podrías notar cuatro mensajes desde “sw.js”. Los primeros tres son mensajes console.info() que indican que un nuevo mensaje ha llegado, qué contiene el mensaje, y los clientes asociados. Nota que el cuarto mensaje es un console.error() diciendo "Service worker couldn't send message: Error: No valid client to send to.". Esto puede ocurrir cuando un service worker pierde su asociación con el padre. En resumen: las buenas noticias es que el mensaje llega bien, las malas noticias es que no tiene dónde ir.

Otra herramienta útil para considerar es el depurador de service worker en about:debugging#workers. Esta página muestra todos los service workers registrados y permite desregistrarles, opcionalmente enviar eventos push, y depurar el script de service worker. Mozilla hacks tiene más detalles sobre about: debugging page.

Depurar Android

Depurar push en Android es algo similar. Así como en el escritorio, querrás establecer dom.push.debug como true y dom.push.loglevel como debug. Desafortunadamente, no como en el escritorio, no hay una manera fácil de ver la consola de navegador desde Android. Los mensajes son registrados en el log de error de android, así que es posible usar un comando como adb logcat para seguir el log de error. Algunos desarrolladores pueden ser capaces de usar grep para buscar solo los registros que contengan "Gecko(Push|Console)".

Desafortunadamente, esta vista no es tan bonita, pero muestra más de lo mismo, incluyendo mensajes de consola desde service workers los cuales te pueden ayudar a identificar y resolver bugs. Merece la pena apuntar que adb puede truncar mensajes muy largos.

Un ejemplo de adb log sería así:

04-24 15:18:04.432 7015 7037 I GeckoPushGCM: Cached GCM token exists: crWSbvAk4e4:APA91bHozW8bSTCrBwPerd7... 04-24 15:18:04.432 7015 7037 D GeckoPushManager: Existing uaid is fresh; no need to request from autopush endpoint. 04-24 15:18:04.488 7015 7037 I GeckoPushManager: Got chid: c0ef2... and endpoint: https://updates.push.services... 04-24 15:18:04.500 7015 7038 I GeckoPush: console.debug: PushServiceAndroidGCM: 04-24 15:18:04.520 7015 7038 I GeckoConsole: put() [object Object] 04-24 15:18:04.521 7015 7038 I Gecko : put() 04-24 15:18:04.522 7015 7038 I Gecko : Object 04-24 15:18:04.522 7015 7038 I Gecko : - pushEndpoint = https://updates.push.services.mozilla.com/wpush/v1/... 04-24 15:18:04.522 7015 7038 I Gecko : - scope = https://jrconlin.github.io/Webpush_QA/ ... 04-24 15:18:04.526 7015 7038 I Gecko : console.debug: PushDB: 04-24 15:18:04.528 7015 7038 I GeckoConsole: put: Request successful. Updated record c0ef2... 04-24 15:18:04.528 7015 7038 I Gecko : put: Request successful. Updated record 04-24 15:18:04.528 7015 7038 I Gecko : c0ef2... 04-24 15:18:04.563 7015 7038 I GeckoConsole: receiverKey BNPFRn... 04-24 15:18:04.565 7015 7038 I GeckoConsole: Auth key: 0Gkt8... 04-24 15:18:04.567 7015 7038 I GeckoConsole: data: Amidst the mists and coldest frosts, I thrust my fists against ... ... 04-24 15:18:04.650 7015 7038 I GeckoConsole: echo -ne "\xa\xc6\xfb\xd3\x13\x0e\xa\xa\xa\xad\x59\xad\x71\xa\xa\... 04-24 15:18:04.652 7015 7038 I GeckoConsole: payload 191,40,74,54,29,62,188,190,133,70,86,70,120,194,173,100,62,... 04-24 15:18:04.653 7015 7038 I GeckoConsole: Fetching: https://updates.push.services.mozilla.com/wpush/v1/gAAAAA... 04-24 15:18:04.960 7015 7038 I GeckoConsole: Message sent 201 04-24 15:18:05.753 7015 9696 D GeckoPushGCM: Message received. Processing on background thread. 04-24 15:18:05.754 7015 7037 I GeckoPushService: Google Play Services GCM message received; delivering. ... 04-24 15:18:05.774 7015 7038 I Gecko : console.debug: PushService: 04-24 15:18:05.774 7015 7037 I GeckoPushService: Delivering dom/push message to Gecko! 04-24 15:18:05.777 7015 7038 I GeckoPush: console.debug: PushServiceAndroidGCM: 04-24 15:18:05.781 7015 7038 I GeckoPush: ReceivedPushMessage with data 04-24 15:18:05.782 7015 7038 I GeckoPush: Object 04-24 15:18:05.782 7015 7038 I GeckoPush: - channelID = c0ef2... 04-24 15:18:05.782 7015 7038 I GeckoPush: - con = aesgcm ... 04-24 15:18:05.783 7015 7038 I GeckoPush: console.debug: PushServiceAndroidGCM: 04-24 15:18:05.784 7015 7038 I GeckoConsole: Delivering message to main PushService: [object ArrayBuffer] ... ... 04-24 15:18:05.786 7015 7038 I Gecko : console.debug: PushService: 04-24 15:18:05.787 7015 7038 I GeckoConsole: receivedPushMessage() 04-24 15:18:05.787 7015 7038 I Gecko : receivedPushMessage() 04-24 15:18:05.788 7015 7038 I Gecko : console.debug: PushDB: 04-24 15:18:05.789 7015 7038 I GeckoConsole: getByKeyID() 04-24 15:18:05.789 7015 7038 I Gecko : getByKeyID() 04-24 15:18:05.795 7015 7038 I Gecko : console.debug: PushDB: 04-24 15:18:05.797 7015 7038 I GeckoConsole: getByKeyID: Got record [object Object] 04-24 15:18:05.810 7015 7038 I Gecko : console.debug: PushDB: 04-24 15:18:05.811 7015 7038 I GeckoConsole: update: Update successful c0ef2... ... 04-24 15:18:05.840 7015 7038 I Gecko : console.debug: PushService: 04-24 15:18:05.841 7015 7038 I GeckoConsole: notifyApp() https://jrconlin.github.io/Webpush_QA/ 04-24 15:18:05.841 7015 7038 I Gecko : notifyApp() 04-24 15:18:05.841 7015 7038 I Gecko : https://jrconlin.github.io/Webpush_QA/ 04-24 15:18:05.848 7015 7038 I GeckoConsole: **** Recv'd a push message:: {"isTrusted":true} 04-24 15:18:05.850 7015 7038 I GeckoConsole: Service worker just got: Amidst the mists and coldest frosts, I ... 04-24 15:18:05.853 7015 7038 I GeckoConsole: Service worker found clients {} 04-24 15:18:05.854 7015 7038 I GeckoConsole: Service worker sending to client... [object WindowClient] 04-24 15:18:05.857 7015 7038 I GeckoConsole: Service Worker sent: {"type":"content","content":"Amidst the mists ... 04-24 15:18:08.033 527 32517 E ResourceManagerService: Rejected removeResource call with invalid pid. 04-24 15:18:05.865 7015 7015 D GeckoToolbar: onTabChanged: LOCATION_CHANGE

Date cuenta que tienes un poco más de información aquí, incluyendo mensajes indicando que GCM recibió el mensaje y transmitido a Gecko. Puede que los mensajes de log hayan sido borrados o comprimidos sin espacios para la publicación, pero esto puede ayudar a aislar si el problema está en tu aplicación o en la red.

Conclusión

Trabajar con Push es gratificante, pero recuerda que es una tecnología nueva. Esto significa que las cosas pueden cambiar, y que puede haber elementos ásperos para tener en cuenta. Como siempre, apreciamos los bugs cuando los encuentres y sugerencias en como hacer las cosas más fáciles. Puedes encontrarnos en irc.mozilla.org en el canal #push si tienes preguntas.

Categorías: Mozilla Hispano

Nuevas guías sobre flexbox en MDN

Noticias de Mozilla Hispano - Dom, 03/06/2018 - 17:51

Esta es una traducción del artículo original publicado en el blog de Hacks.

En preparación para incluir CSS Grid en los navegadores en marzo de 2017, Rachel Andrew trabajó en un número de guías y materiales de referencia para la especificación de CSS Grid, que fueron publicadas en la MDN. Con ese material actualizado, pensamos que sería bueno completar la documentación con guías similares para Flexbox, y asi actualizar el material existente para reflejar los casos de uso centrales de Flexbox.

Esto funciona bien; con el actual estado de la especificación, Flexbox ahora se sienta al lado de Grid y Box Alignment para formar una nueva forma de pensar sobre el diseño para la web. Es útil reflejar esto en la documentación.

La nueva documentación de un vistazo

Se han agregado ocho nuevas guías a MDN:

Una de las cosas que se ha intentado hacer en crear este material mostrar a Flexbox como parte de un sistema de diseño global. Antes de Grid, Flexbox fue visto como la especificación para resolver todos los problemas de diseño. Sin embargo, gran parte de la dificultad de usar Flexbox es cuando intentamos usarlo para crear el tipo de diseños bidimensionales para los que Grid está diseñado. Una vez más, nos encontramos luchando para persuadir a un método de diseño para que haga cosas para las que no fue diseñado.

Por lo tanto, estas guías están centradas en los casos de uso reales de Flexbox, analizándose en dónde debería usarse Grid en su lugar y también se aclara cómo funciona la especificación con los modos de escritura (Writing Modes), la alineación de cuadros (Box alignment) y ordenamiento de elementos.

Un plan de estudios para el diseño

Nos preguntan sobre si es mejor aprender primero Flexbox y luego pasar a Grid Layout. Se sugiere aprender los conceptos básicos de cada especificación y las razones para usar cada método de diseño. En la etapa de producción, es probable que tengas algunos patrones que den sentido para diseñar usando Flexbox y algunos usando Grid.

En MDN puedes empezar con Conceptos Básicos de flexbox junto con el artículo complementario para Grid — Conceptos básicos de grid layout. A continuación, echa un vistazo a los dos artículos que detallan cómo Flexbox y Grid encajan en la imagen general de diseño de CSS:

Después de haber trabajado con estas guías, tendrás una visión general razonable. Cuando empieces a crear patrones de diseño usando las especificaciones, puedes profundizar en las guías más detalladas para cada especificación.

Similitudes entre Flexbox y Grid

Cuando estudies Flexbox y Grid, descubrirás que hay muchas similitudes entre las especificaciones. Esto es por diseño; encontrarás esta nota en la especificación Grid:

“Si observas alguna incoherencia entre este módulo de Grid Layout y el módulo de Flexible Box Layout, por favor repórtala al CSSWG ya que es probable que se trate de un error.”

Las Propiedades de Box Alignment que son parte de la especificación Flexbox han sido movidas dentro de su propia especificación — Box Alignment Level 3. Grid usa esa especificación como una referencia en lugar de duplicar las propiedades. Esto significa que deberías encontrar la información sobre Alineación de elementos en un contenedor flexible muy similar a la que encontrada en Alineación de Cajas en Grid Layout. De muchas maneras, el alineamiento es fácil de entender cuando se trabaja con Grid Layout ya que siempre tienes los dos ejes en juego.

Este movimieto de propiedades de Flexbox a Grid también funciona en la otra dirección. En Grid tenemos la propiedad grid-gap, representando un atajo para establecer grid-column-gap y grid-row-gap. Durante el transcurso de este año estas serán movidas a la especificación Box Alignment también, y renombrado a gap, column-gap y row-gap. Una vez que los navegadores implementen estas para Flexbox, seremos capaces de tener separadores en Flexbox como lo hacemos con Grid, en lugar de necesitar que usar márgenes para crear espacio entre los elementos.

Soporte de navegadores paara flexbox

Flexbox tiene un excelente soporte en navegadores en este momento. Se han detallado las cosas a tener en cuenta en la compatibilidad con versiones anteriores de flexbox. Actualmente, los problemas tienden a estar en las versiones anteriores de los navegadores que admitían versiones anteriores de la especificación bajo los prefijos de los creadores. Los problemas están bien documentados en este momento en la guía de MDN y en el sitio Flexbugs, que detalla los problemas de interoperabilidad y soluciones para ellos.

Las especificaciones Flexbox y Grid están juntas ahora en estado de Candidato a Recomendación. No esperamos que haya grandes cambios en las especificaciones en este momento. Debes tener confianza en aprender e integrar Flexbox y Grid en sitios web de producción.

Pasando a un nuevo modelo de pensamiento sobre el diseño

Con Flexbox y Grid, más las especificaciones relacionadas de Box Alignment y Writing Modes (modos de escritura), tenemos nuevos modelos para la web, que han sido diseñados para permitir los tipos de diseño que necesitamos crear. Aquellos de nosotros que hemos luchado con elementos flotantes para crear diseños por años tenemos que cambiar nuestro pensamiento para realmente aprovechar lo que ahora es posible, en lugar de intentar forzarlo a regresar a lo que es familiar. Ya sea que estés interesado en implementar más diseños creativos, o simplemente para optimizar el desarrollo de interfaces de usuario complejas, esperamos que los materiales que hemos creado te ayuden a obtener una comprensión muy completa de estas especificaciones.

Categorías: Mozilla Hispano

Utilizando dispositivos 2FA con la API WebAuthn

Noticias de Mozilla Hispano - Dom, 13/05/2018 - 20:34

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Emmanuel Sanchez.

Para proveer una seguridad mayor al momento de iniciar sesiones, los sitios web utilizan la autenticación de dos pasos (2FA, two-factor authentication), comúnmente utilizando una aplicación de smartphone o mensajes de texto. Estos mecanismos hacen que los usuarios sean menos susceptibles a los ataques de phishing, pero no son perfectos (los usuarios pueden ser engañados para que entreguen sus códigos y los mensajes de texto pueden ser interceptados de varias maneras).

Firefox 60 llegará con la API WebAuthn activada por defecto, proporcionando autenticación de dos factores basada en criptografía pública inmune al phishing como lo conocemos el día de hoy. A continuación daremos una introducción para aprender la forma de proteger a millones de usuarios que ya poseen dispositivos USB U2F FIDO.

Creando una nueva credencial

Empecemos con un ejemplo simple: vamos a requerir credenciales compatibles con el estándar de dispositivos USB FIDO U2F; existen muchos dispositivos compatibles con nombre como Yubikey, U2F Zero, y otros:

const cose_alg_ECDSA_w_SHA256 = -7; /* El reto debe de iniciarse en el servidor */ let challenge = new Uint8Array([21,31,105 /* 29 bytes más de números aleatorios generados por el servidor */]); let pubKeyCredParams = [{ type: "public-key", alg: cose_alg_ECDSA_w_SHA256 }]; let rp = { name: "Test Website" }; let user = { name: "Firefox User <firefox @example.com>", displayName: "Firefox User", id: new TextEncoder("utf-8").encode("firefox@example.com") }; let publicKey = {challenge, pubKeyCredParams, rp, user}; navigator.credentials.create({publicKey}) .then(decodeCredential);

En el caso de dispositivos U2F USB, esto hace que todos los dispositivos conectados esperen a algún tipo de interacción por parte del usuario. Tan pronto como el usuario toca el dispositivo este genera una nueva credencial y la promesa (Promise) se resuelve.

El función decodeCredential() descifrará la respuesta para recibir una referencia a una llave, ya sea  una referencia un par de llaves ECDSA almacenadas en el dispositivo, o las mismas llaves ECDSA cifradas con una llave del dispositivo secreta. La llave pública se envía sin cifrar.

La referencia de la llave, la llave pública, y la firma deben de ser verificadas por el servidor utilizando un reto generado al azar. Debido a que la información está relacionada criptográficamente con el servidor, la verificación fallará si el servidor origen no coincide. Esto evita que se utilicen credenciales de otros sitios web.

La referencia de la llave y la llave pública ahora estarán asociadas al usuario actual. La api WebAuthn no exige algún tipo de interfaz en el navegador, por lo que es responsabilidad del sitio web indicarle al usuario el momento en el que debe de conectar y registrar su dispositivo.

Obtener evidencia de una credencial ya existente

La siguiente ocasión que un usuario trate de autenticarse en un sitio web, este le solicitará que pruebe que aún posee el “segundo factor” que se creó en la sección anterior. El backend obtendrá la referencia de la llave y le enviará un nuevo desafío al usuario. Debido a que allowCredentials es un array, permite el envío de más de un token, en caso de un usuario tenga varios tokens (dispositivos) registrados en la misma cuenta.

/* El reto debe de realizarse en el servidor */ let challenge = new Uint8Array([42,42,33 /* 29 bytes más de números aleatorios generados por el servidor */]); let key = new Uint8Array(/* … obtener referencia de llave … */); let allowCredentials = [{ type: "public-key", id: key, transports: ["usb"] }]; let publicKey = {challenge, allowCredentials}; navigator.credentials.get({publicKey}) .then(decodeAssertion);

De nuevo, todos los dispositivos USB U2F van a esperar alguna interacción por parte del usuario. Cuanto el usuario toca un token este va a tratar de encontrar la llave que se encuentra en el dispositivo a través de su referencia, o tratará de desencriptarla en base a su llave secreta. En caso exitoso, entregará una firma. Sino, la autenticación fallará y se deberá de iniciar de nuevo el proceso para ingresar al sitio.

Después de decodificar, la firma y la llave son enviados al servidor. Si la clave almacenada con el manejador de llaves es capaz de resolver el desafío, se considera que fue exitoso y se le permite al usuario ingresar.

Autenticación de primer factor

La especificación Web Authentication también contiene mecanismos para poder autenticar a usuarios sin utilizar un usuario o una contraseña, solo un dispositivo seguro, como un entorno de ejecución seguro dentro de tu smartphone. En este modo, tu dispositivo no solo verifica que tienes posesión de él, sino que además lo desbloqueaste cib una contraseña (algo que tú conoces) y/o seguridad biométrica (algo que tú eres).

Esto le permitirá a los sitios web verificar tu identidad a su web desde tu computadora respondiendo a un mensaje que te aparecería en tu smartphone.

Los dispositivos FIDO U2F aún no son tan avanzados para permitir que esto ocurra, pero la siguiente generación sí lo será y los desarrolladores web podrán interactuar con esos dispositivos FIDO 2.0 usando Web Authentication.

WebAuthn, disponible en tu Firefox más cercano

Ésta fue una introducción muy pequeña al mundo de la autenticación Web e intencionalmente ignora muchos detalles como lo son la codificación CBOR y los formatos COSE_KEY, así como los parámetros que pueden ser utilizados para las funciones .create() y .get().

Nos gustaría fomentar que los desarrolladores empiecen a experimentar con WebAuthn, y permitirle a sus usuarios proteger sus sesiones con autenticaciones de dos factores tan pronto como estén disponibles. Al momento de escribir esto no conocemos bibliotecas para la utilización de WebAuthn-U2F, pero esperamos que estén disponilbes pronto. Si tú llegas a ver algo prometedor no dudes en avisarnos por los comentarios.

Es muy emocionate traer la estandarización de la autenticación de dos factores a la web; la criptografía de llave pública también protege nuestra información cuando viaja a través de internet a través del protocolo TLS, y ahora permite que los ataques phishing sean más difíciles de realizar. Prueba WebAuthn en Firefox (firefox.com).

Una nota final sobre pruebas

La autenticación Web es una poderosa característica. eso implica que solo puede ser utilizada en entornos seguros del navegador, y solo puede ser utilizado cuando el documento original tenga el mismo origen. Esto significa que puedes encontrar errores de seguridad cuando experimentes utilizando sitios web de pruebas (como jsfiddle.net).

Categorías: Mozilla Hispano

FLISoL Bogotá 2018: innovación social, cultura libre y software libre

Noticias de Mozilla Hispano - Mié, 09/05/2018 - 16:47

 

El pasado 28 de abril celebramos de la mejor manera el Festival Latinoamericano de instalación de Software libre en Bogotá.

 

Flisol Bogotá. Imagen en En TIC confío@EnTICconfio Apr 28 de 2018. “Hoy estamos en @flisol_bogota, festival de instalación de software libre más grande del mundo con más de 70 actividades durante todo el día. ¡No te lo pierdas! Inscripciones GRATIS en https://flisolbogota.org“.

 

 

En esta ocasión el festival permitió observar que la cultura libre, más allá de ser un espacio para la instalación de distribuciones de software, sistemas operativos o programas que promueven la apertura de Internet y el empoderamiento de las personas respecto a la tecnología, es una forma de contribuir y construir sociedades.

Flisol Bogotá. pb‏ @dicepb Apr 28 Retweeted #FlisolBogota (@flisol_bogota): #FlisolBogota y todas las salas llenas!

 

Asistieron más de 1600 personas las que participaron en más de 90 actividades en las que se incluían charlas, talleres, paneles, espacios para niños -FLISoL Kids-, un cinema de cultura libre, música, origami y mucho más.

 

Cinema Libre. Foto de: Viviana‏ @lviviana13 Apr 28. @GrupoLinuxUD presente con #CineLibre #FlisolBogotá

 

Flisol Bogotá. Foto de: RuБén AvilaH‏ @rubenavilah Apr 28

Así luce hoy #Flisol2018 Bogotá todos en la gran apertura de este evento. @flisol_bogota @FabaBogota

Mozilla Colombia dirigió de dos actividades: el testeo de Nightly y la creación de extensiones para Firefox. Las dos actividades estaban orientadas a personas con conocimientos avanzados en las herramientas y tecnologías de Mozilla, sin embargo, dada la diversidad de público, al final los talleres permitieron incluir a personas que no conocían Firefox, usuarios de Firefox y también desarrolladores y personas con conocimientos avanzados.

 

Taller Nightly. Foto de Gutemonik

 

Durante nuestro taller de testeo de Nightly instalamos la versión con fines de prueba preliminar a Firefox. Vimos las diferencias entre Nightly y Firefox, hicimos pruebas y también presentamos fallas. En esta actividad no solo hicimos revisiones desde la versión de escritorio, sino que tuvimos muchas instalaciones y ejercicios de testeo desde los celulares. Para las personas que tenían conocimientos avanzados, revisamos el Bug Tracker de Mozilla, el Blog de Firefox Nightly y también la documentación en Mozilla Developer Network. Este taller estuvo a cargo de los Mozillians Camilo Baquero y Kevín Díaz.

 

Participantes del taller Nightly. Foto de Gutemonik

 

De igual forma tuvimos el taller para crear extensiones Web para Firefox -y que también pueden ser compatibles con otros navegadores-. Hablamos y exploramos Firefox y el directorio de extensiones, de igual forma exploramos las API de WebExtensions. En seguida a través de un ejercicio práctica creamos nuestra primer extensión para Firefox. Para el público avanzado realizamos una exploración más profunda introduciéndonos en la anatomía y publicación de extensiones, además de revisar algo de RUST y dar una introducción para empezar a contribuir e involucrarse con la comunidad Mozilla. En este taller participó Alejandro Cortazar, representante del Grupo GLUD y Mónica Bonilla, Rep de Mozilla en Colombia.

 

Imagen tomada del perfil de Twitter de una participante del taller (@ingdalvarez)

 

Al final, tuvimos un grupo de personas que están interesadas en contribuir con los proyectos de Mozilla y con las que haremos versiones más avanzadas de las actividades desarrolladas durante el FLISoL. Entre estas personas están las chicas de Geek Girls Latam con quienes próximamente tendremos actividades y talleres bajo el marco de WoMoz.

 

Foto tomada del perfil de una Geek Girl Colombia (@Cangreja533)

 

¡Gracias a los organizadores, patrocinadores y todas las personas que estuvieron detrás de la organización del FLISoL Bogotá, 2018! Definitivamente es el evento de difusión de Software Libre más grande del mundo. ¿Quieres participar con una actividad, charla o taller para mostrar los proyectos y desarrollos de Mozilla el próximo año? ¡Ponte en contacto con algunos de los Mozillians en Colombia!

Categorías: Mozilla Hispano
Subscribe to Proyecto NAVE aggregator - Mozilla Hispano