You are here

Agregador de canales

Los 9 errores más comunes al usar CSS Grid

Noticias de Mozilla Hispano - Dom, 11/11/2018 - 16:13

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

Es fácil tener muchos errores usando una tecnología nueva, especialmente algo que tuvo un gran cambio desde la versión anterior, tal como en CSS Grid. En este vídeo (en inglés) explico los 9 errores más comunes que la gente tiene al usar esta tecnología, con consejos y tips para evitar estas trampas y romper viejos hábitos.

Para más información (vídeos en inglés):

Error 1: Creer que CSS Grid lo es todo

Flexbox vs CSS Grid – ¿Cuál es mejor?

Usando Flexbox y Grid juntos

Eliminar Cajas con CSS Shapes

Error 2: Usar únicamente porcentajes en las dimensiones

Mínimo y Máximo, dimensionando contenido en CSS Grid

Unidades FR en CSS Grid

MinMax en CSS Grid

Error 3: Asumir que necesitas breakpoints

Diseño asombrosamente sencillo con CSS Grid

Error 4: Confundirse al enumerar

Diseñador Gráfico Ingenioso y Práctico con CSS Grid

Lo Básico de CSS Grid: El gran cuadro

Error 5: Siempre usar 12 columnas

Explico esto al final de “Unidades FR en CSS Grid”

Error 6: Ignorar el poder de las filas

Flexibilidad y dobleces

Espacio Blanco en la Web

Error 7: Buscar un Framework

Error 8: Esperar a la muerte de IE11

¿Internet Explorer + CSS Grid?

Serie de 7 partes sobre escribir CSS flexible que trabaje en todos los navegadores

Error 9: Titubear en vez de jugar

Mondrian Responsivo

CSS Grid como si fueras Jan Tschicold

Categorías: Mozilla Hispano

Una caricatura sobre el DNS a través de HTTPS

Noticias de Mozilla Hispano - Sáb, 22/09/2018 - 17:24

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

Las amenazas a la privacidad y seguridad de los usuarios está creciendo. En Mozilla hemos seguido de cerca estas amenazas. Creemos que tenemos la obligación de hacer todo lo que podamos para proteger a los usuarios de Firefox así como sus datos.

Nos enfrentamos a las compañías y organizaciones que en secreto recolectan y venden información de los usuarios. Esa es la razón por la que hemos agregado la protección contra rastreo y lanzamos la extensión Facebook Container. En los próximos meses nos verás haciendo más cosas en favor de la protección de nuestros usuarios.

Dos nuevas protecciones que estamos agregando son:

  1. DNS a través de HTTPS, un nuevo estandar del IETF que hemos promovido
  2. “Resolutivo Recursivo de Confianza”, una nueva forma de resolver DNS para el cual nos hemos asociado con Cloudflare

Con estas dos iniciativas, estamos quitando algunos de los posibles riesgos para tus datos que han sido parte del sistema de nombres de dominio (DNS) desde que fue creado hace 35 años. Por lo mismo nos gustaría que nos ayudes a probar estas iniciativas. Veamos la forma en la que el DNS sobre HTTPS y el Resolutivo Recursivo de Confianza protegen a nuestros usuarios.

Pero primero veamos la forma en la que las páginas se mueven a través de Internet.

Un breve curso sobre HTTP

Cuando se trata de explicar la forma en la que un navegador descarga una página, generalmente se hace así:

  1. Tu navegador realiza una solicitud GET al servidor
  2. El servidor responde con un archivo HTML

Este sistema es llamado HTTP.

Pero el diagrama está demasiado simplificado. El navegador no se comunica con el servidor directamente. Esto debido a que probablemente no se encuentra cerca uno del otro.

El servidor podría estar a miles de kilómetros de distancia. Y probablemente no exista una conexión directa entre tu computadora y el servidor.

Entonces la solicitud entre el servidor y el navegador va a pasar a través de múltiples manos antes llegar. Lo mismo ocurrirá cuando el servidor responda.

Me gusta pensar en que es parecido a la forma en la que los niños se pasan notas entre sí durante una clase. Escrito en la parte de afuera, la nota indica la persona a la que se debe dirigir. El niño que escribió la nota se la pasara a su vecino. Después los niños lo van a pasar a sus “vecinos”, que probablemente no son el destinatario, pero es alguien que se encuentra más cerca a él.

El problema de esto es que cualquiera a través del recorrido puede abrir la nota y leerla. Además no hay forma de saber de antemano el camino que la nota va a recorrer, ni las personas que tendrán acceso a ella.

Puede terminar en manos de personas que realicen acciones peligrosas…

Como compartir el contenido de la nota con todos.

O cambiar la respuesta.

Para evitar estas situaciones, se ha creado una nueva versión de HTTP. Ésta es llamada HTTPS. Con HTTPS, es como si cada mensaje tuviera un candado.

Tanto el navegador como el servidor conocen la combinación para abrir el candado, pero no los que se encuentran en medio del camino.

Con esto aunque los mensajes pasen a través de varias manos, solo tu y el sitio web (el servidor), serán capaces de leer el contenido de los mensajes.

Esto resuelve muchos agujeros de seguridad. Pero algunos de los mensajes entre tu navegador y el servidor no son cifrados. Esto significa que personas que se encuentren en medio pueden seguir viendo parte de lo que estás haciendo.

Un momento en el cual los datos siguen están expuestos es cuando se está realizando la conexión con el servidor. Cuando envías un mensaje inicial al servidor, envías el nombre del servidor también (en un campo llamado “Indicador del Nombre del Servidor”). Esto le permite a los administradores de servidores utilizar la misma computadora (el mismo servidor) para múltiples sitios, y conocer con cuál de ellos deseas hablar. Esta solicitud inicial es parte del proceso para establecer el cifrado, pero la solicitud en sí no está cifrada.

El otro lugar donde los datos son expuestos es en el DNS. Pero, ¿qué es el DNS?

DNS: el Sistema de Nombres de Dominio

En la metáfora anterior, mencioné que el nombre del receptor debía de estar en la parte de afuera de la nota. Esto también ocurre en peticiones HTTP; se necesita decir quién va a recibir el mensaje.

Pero no puedes usar un nombre. Ningún enrutador (router) sabe dónde se encuentra el sitio web con el que deseas hablar. Entonces, en vez de eso utilizamos una dirección IP. De esta forma los enrutadores conocen el servidor con el que te deseas comunicar.

Esto genera un problema. No vas a querer que los usuarios tengan que recordar la dirección IP de tu sitio. En vez de eso, quieres darle a tu sitio un nombre que puedan recordar.

Esa es la razón por la cual tenemos un sistema de nombre de dominio (DNS). Tu navegador utiliza DNS para convertir el nombre de dominio en una dirección IP. El proceso de convertir un nombre de dominio a una dirección IP se denomina “resolución de nombre de dominio”.

¿Cómo sabe el navegador hacer esto?

Una opción sería tener una gran lista en el navegador, parecido a un directorio telefónico. Pero debido a que continuamente llegan nuevos sitios, o se mueven a otros servidores, sería muy difícil tener una lista adecuadamente actualizada.

En vez de tener una gran lista que registre todos los dominios, existen muchas pequeñas relacionadas entre sí. Esto permite que sean manejadas independientemente.

Para obtener la dirección IP que corresponde al nombre del dominio, se debe de buscar la lista que contiene ese nombre de dominio. Hacer esto es un poco como la búsqueda de un tesoro.

¿Como se vería la búsqueda de la versión en inglés de Wikipedia (en.wikipedia.org)?

Podemos dividir el dominio en partes: subdominio, dominio de segundo nivel y dominio de primer nivel.

Con estas partes tenemos lo necesario para encontrar la lista que contiene la dirección IP del sitio. Pero para esto debemos de solicitar ayuda. La herramienta que nos ayudará a convertir el nombre de dominio en una dirección IP se llama “resolutivo” (resolver).

Primero, el resolutivo se comunica con un Root DNS (algo así como un servidor DNS principal). Él conoce unos pocos servidores Root DNS, así que envía mensaje a uno de ellos y le pregunta el lugar donde podrá obtener más información sobre el dominio de primer nivel .org.

El servidor Root DNS le dará la dirección de un servidor que conoce las direcciones .org.

El siguiente servidor se llama servidor de nombres de dominio de nivel superior (top-level domain, TLD). El servidor TLD conoce todos los nombre del dominio que terminan en .org.

Sin embargo, no sabe nada sobre los subdominios de wikipedia.org, por tanto no conoce la dirección IP para en.wikipedia.org.

El servidor TLD le dirá al resolutivo que pregunte al servidor de nombres de dominio de Wikipedia.

El resolutivo casi ha terminado de realizar su trabajo. El servidor de Wikipedia es llamado “servidor autoritario”. Él conoce todo sobre los subdominios de wikipedia.org, incluyendo en.wikipedia.org, o la versión alemana de.wikipedia.org. El servidor autoritario le dice al resolutivo la dirección IP que contiene los archivos HTML del sitio (en este caso en.wikipedia.org).

El resolutivo devolverá al sistema operativo la dirección IP de en.wikipedia.org.

Este proceso es llamado resolución recursiva, debido a que va a diferentes servidores a realizarles básicamente la misma pregunta.

Anteriormente dijimos que el resolutivo nos ayudaría. Pero, ¿cómo hace el navegador para encontrarlo? En general le pide al sistema operativo que le provea con un resolutivo que le pueda ayudar.

¿Cómo conoce el sistema operativo el resolutivo que debe utilizar? Existen dos posibles caminos.

Tu puedes configurar un resolutivo en el cual confías. Pero pocas personas hacen esto.

En vez de eso, la mayoría de la gente utiliza el que se encuentra por defecto. Y el que se encuentra por defecto, es cualquiera que la red le haya dicho al sistema operativo que se conectara. Cuando una computadora se conecta a la red y obtiene su dirección IP, la red le recomienda un resolutivo a utilizar.

Esto significa que el resolutivo que estés utilizando puede cambiar a lo largo del día. Si vas a una cafetería por la tarde, es probable que estés utilizando un resolutivo diferente al que estabas utilizando en la mañana. Y esto puede ocurrir aunque hayas configurado tu propio resolutivo, dado que no existe seguridad en el protocolo DNS.

¿Cómo se puede vulnerar el protocolo DNS?

¿Cómo puede hacer esto vulnerables a los usuarios?

Usualmente un resolutivo le dirá al servidor DNS el dominio que está buscando. En esta solicitud en ocasiones se incluye su dirección IP completa. E inclusive si no se entrega a dirección IP completa, comúnmente se entrega la mayor parte de la dirección IP, la cual puede combinarse con otros datos para saber el origen (el usuario que está realizando la solicitud).

Esto significa que cada servidor al que le solicites ayuda,va a poder visualizar el sitio que estás buscando. Esto significa también que cualquiera en el camino a través de esos servidores podrán ver tu solicitud.

Los dos más grandes riesgos para los usuarios son el rastreo y la suplantación de identidad.

Rastreo

Como acabamos de ver, es relativamente fácil tomar de forma parcial o completa tu dirección IP y saber el sitio que estás buscando. Tanto el servidor DNS como cualquier otro servidor que esté entre tú y ese servidor pueden hacer un perfil tuyo y registrar los sitios que has estado visitando.

Los datos tienen un valor. Muchas personas y empresas pagarán mucho dinero para saber los sitios por los cuales has estado navegando.

Aún si confías en los servidores DNS y los enrutadores que por defecto se encuentran en medio, tu información aún así puede ser recabada y vendida. Esto debido a que el mismo resolutivo que te dio tu red podría no ser de confianza.

E inclusive si confías en el resolutivo que utilizas, lo más probable es que solo lo utilices en tu casa. Como se mencionó anteriormente, cada vez que vas a la cafetería o a un hotel o cualquier otra red es probable que estés utilizando otro resolutivo. Y, ¿acaso sabes cuáles son sus políticas de recolección de datos?

Más allá de que los datos sean recolectados y vendidos sin tu conocimiento o consentimiento explícito, existen otras maneras en que tu información puede estar en peligro.

Suplantación de identidad

Con la suplantación de identidad, alguien en el camino al servidor DNS cambia la respuesta del servidor DNS. En vez de decirte la dirección IP real, te dará una dirección IP diferente. De esta forma, se puede bloquear tu acceso a cierto sitio, o enviarte a una versión falsa del mismo.

De nuevo, este es un caso en el cual el resolutivo puede actuar maliciosamente.

Por ejemplo, imaginemos que tu estas comprando algo en Megatienda. Deseas revisar si el producto que estás planeando comprar se encuentra más barato en la tienda en línea otratienda.com.

Pero estás conectado a la red inalámbrica de Megatienda, y por tanto utilizando el resolutivo que ellos te indican. El resolutivo podría alterar la respuesta para decir que otratienda.com no está disponible.

¿Cómo lo podemos arreglar?

En Mozilla creemos que tenemos la responsabilidad de proteger a nuestros usuarios y sus datos. Por ello hemos estado trabajando en arreglar estas vulnerabilidades.

Hemos desarrollando dos nuevas características para arreglar esto –  Resolutivo Recursivo de Confianza (Trusted Recursive Resolver, TRR) y DNS sobre HTTPS (DNS over HTTPS, DoH). Realmente existen tres amenazas aquí:

  1. Puedes llegar a utilizar un “resolutivo” que rastree tus solicitudes, o modifique las respuestas de los servidores DNS.
  2. Los enrutadores que se encuentra en medio de tu y el servidor DNS pueden hacer lo mismo.
  3. Los servidores DNS pueden rastrear tus solicitudes de DNS.

Entonces, ¿cómo se puede solucionar esto?:

  1. Evitar los resolutivos en los que no confiamos, con TRR.
  2. Protegerse en contra del espionaje o posible manipulación de mensajes que se pueda generar en el camino hacia el servidor, utilizando DoH.
  3. Enviar tan poca información como sea posible para evitar la identificación de los usuarios.
Evitar la desconfianza de resolutivos usando TRR

Las redes pueden proveer resolutivos no confiables que pueden robar datos o engañar a los usuarios para dirigirlos a otros sitios webs, debido a que muy pocos usuarios conocen los riesgos o la forma en la que pueden protegerse.

Incluso para los usuarios que conocen los riesgos, es difícil para ellos cerciorarse que su ISP u otra organización maneja los datos de DNS adecuadamente.

En Mozilla hemos estudiado los riesgos, y en conjunto con nuestro poder de negociación hemos buscado una empresa que colabore con nosotros para proteger los datos de los usuarios. Y la hemos encontrado: Cloudflare.

Cloudflare provee un servicio de resolución recursiva, con una política de privacidad enfocada en los usuarios. Se han comprometido a borrar todo los datos que puedan identificar a un usuario después de 24 horas, así como nunca compartir esos datos a terceros. También habrán auditorías periódicas para verificar que los datos son borrados como se espera.

Con esto tenemos un resolutivo en el cual podemos confiar para proteger la privacidad de los usuarios. Esto significa que Firefox puede ignorar el resolutivo que le proporcione la red e ir directamente a Cloudflare. Y con ello no tenemos que preocuparnos de utilizar un resolutivo que venda los datos de los usuarios o que dirija a los usuarios a sitios web maliciosos.

¿Por qué los elegimos? Cloudflare está tan emocionado como nosotros en construir un servicio resolutivo de DNS enfocado en la privacidad. Ellos han trabajado con nosotros para construir un servicio de DoH transparente para los usuarios. Han estado muy abiertos a agregar protecciones para los usuarios, por lo que estamos muy felices de colaborar con ellos.

Pero esto no significa que los usuarios de Firefox solo puedan usar los servicios de Cloudflare. Los usuarios tienen la libertad de configurar Firefox para usar cualquier servicio que deseen. Así que a medida que las ofertas de estos servicios crezcan, planeamos facilitar el descubrimiento y utilización de los mismos.

Proteger contra el espionaje y los intrusos mediante DoH

El resolutivo no es la única amenaza. Los enrutadores pueden rastrear y falsificar las respuestas del DNS, debido a que pueden ver los contenidos tanto de las solicitudes hacia el DNS como de sus respuestas. Pero ya se han desarrollado métodos para asegurarse que los enrutadores no puedan hacer cosas como esas. Es el cifrado del cual hablé antes.

Utilizando HTTPS para intercambiar los paquetes entre el equipo y el DNS, nos podemos asegurar que no se puedan espiar ni modificar los solicitudes entre ellos.

Enviar la menor cantidad de datos posibles para evitar la identificación

Además de proveer un resolutivo confiable usando DoH, Cloudflare está trabajando con nosotros para hacer de esto todavía más seguro.

Normalmente, un resolutivo envía el nombre del dominio completo a cada servidor –  el servidor Root, el TLD, etc. Pero Cloudflare hará algo diferente. Solo enviará aquello que es importante al servidor DNS con el que esté hablando ese momento. Esto es llamado minimización QNAME.

El resolutivo usualmente también incluye los primeros 24 bits de tu dirección IP en la solicitud. Esto puede ayudar al servidor DNS a saber el lugar donde te encuentras y poder seleccionar el CDN más cercano a ti, pero esta información puede ser utilizada para relacionar diferentes solicitudes de DNS a un mismo usuario.

En vez de hacer esto, Cloudflare hará la solicitud desde la IP de uno de sus servidores que se encuentra más cerca del usuario. Esto permite la geolocalización sin vincularlo a un usuario en particular. Además de esto estamos buscando la forma de hacer esto aún mejor sin olvidarnos de la privacidad.

Haciendo esto – eliminado las partes relevantes del nombre del dominio y no incluyendo la dirección IP del usuario – significa que los servidores DNS tienen muchos menos datos que puedan recolectar.

¿Que no está arreglando TRR or DoH?

Con estas correcciones hemos sido capaces de reducir la cantidad de personas que pueden visualizar los sitios que tú estás visitando. Pero esto no elimina las filtraciones de datos por completo.

Después de que se utiliza el servicio de DNS para encontrar la dirección IP, aún se debe de realizar la conexión al servidor. Para realizar esto, se debe de hacer una solicitud. Esta solicitud incluye el nombre del sitio en el servidor al cual te quieres conectar, y esta solicitud no está cifrada.

Esto significa que tu ISP puede conocer los sitios que estás visitando. Además los enrutadores que llevan tu solicitud desde tu navegador al servidor también pueden ver la información.

Una vez que se ha realizado la conexión al servidor web, todo las conexiones futuras son cifradas, permitiendo no solo utilizar la conexión con un sitio web en especifico, sino con todos los sitios que estén alojados en el servidor.

Esto se llama reutilización de conexión. Cuando tu te conectas a un servidor que lo soporta, el servidor te va a decir los otros sitios que almacena. Entonces puedes visitar dichos sitios mediante una conexión cifrada.

¿Por qué esto ayuda? Porque ya no tienes que iniciar una nueva conexión para visitar los otros sitios web. Esto significa que no tendrás que enviar un mensaje sin cifrar indicando el sitio al que te quieres conectar. Lo cual permite que te conectes a otros sitios en el mismo servidor sin revelar dichos sitios a tu ISP o a los enrutadores que utilices.

Con el aumento de servicio de CDN, más sitios están siendo servidos a través de un único servidor. Permitiendo reutilizar la conexión con dicho servidor para conectarse a diversos sitios web y con ello evitar filtrar datos cuando te conectes a otros sitios web. Esto significa que conforme pase el tiempo esto aumentará, así como la privacidad de los usuarios.

¿Cuál es el avance?

Tu puedes utilizar DNS sobre HTTPS hoy, de hecho te motivamos a ello.

Queremos activar esta función por defecto para todos los usuarios. Nosotros creemos que todos los usuarios merecen tener privacidad y seguridad de sus datos sin importar el nivel que conocimientos técnicos que tengan.

Esto es un gran cambio y debemos de hacer las pruebas pertinentes primero. Es por esto que estamos realizando un estudio acerca de esta función. Hemos solicitado a la mitad de los usuarios de Firefox Nightly que nos apoyen para la recolección de dato sobre el rendimiento de la función.

Nosotros usamos el resolutivo por defecto como lo conocemos, pero también enviamos una solicitud al resolutivo de Cloudflare con DNS sobre HTTPS. Entonces comparamos los dos “resultados”, para verificar que todo se encuentra funcionando como se espera.

Para los participantes en este estudio, la respuesta que entregue Cloudflare no se utilizará. De momento solo verificamos que todo funcione adecuadamente y después ignoramos la respuesta de Cloudflare.

Estamos agradecidos por el apoyo que hemos obtenido por parte de los usuarios de Firefox Nightly – esas personas que nos ayudan día con día a probar Firefox para que funcione cada vez mejor para todos – y esperamos que nos ayuden con esta funcionalidad también.

Categorías: Mozilla Hispano

A propósito de la salud de Internet

Noticias de Mozilla Hispano - Jue, 20/09/2018 - 20:31

El jueves pasado estuvimos en la semana Linux a través de una presentación del Reporte para la salud de Internet (IHR) que Mozilla lanzó este año.

Definir cómo Internet es saludable se hace complejo porque los contextos, historias y también oportunidades que tenemos son diferentes, y esto gracias a los lugares en los que nos encontramos. Sin embargo, una forma de saber cómo internet puede ser saludable es a través de casos en los que se vulneran los derechos de los cibernautas, prácticas, actores y sobre todo, las oportunidades que se dan.

Para el contexto colombiano y buscando la participación, percepción y reflexión de más personas, presentamos casos específicos para cada uno de los puntos en los que se centra el IHR, además de definir lo que se entiende en cada ámbito y también formular preguntas para conocer más de la percepción y opinión de los asistentes.

 

A continuación presentamos el recuento de la presentación y reflexión en torno a cada una de las áreas que se presentan en el Reporte para la Salud de Internet: privacidad y seguridad, apertura, descentralización, inclusión digital,  y alfabetización digital.

 

Privacidad y seguridad. Presentamos información respecto al caso colombiano en el que los ataques de ransomware cayeron de 638 millones a 184 millones en 2017: Ataques de ransomware cayeron de 638 millones a 184 millones en 2017. 

Y también reflexionamos sobre nuestra navegación diaria a través de las siguientes preguntas: cuando usted navega en internet ¿se siente seguro? ¿siente que tiene el control de su información, datos, privacidad? ¿Si? ¿No? ¿Por qué? ¿En qué contextos si y en cuáles no?

Apertura. En Colombia se encuentra activa la iniciativa del Portal de datos abiertos del Estado, sin embargo una pregunta que tenemos es: ¿Qué tan abiertos son los datos y dinámicas en las que se obtiene y da acceso a los mismos?

De igual forma, presentamos para el caso de reformas o leyes de derechos de autor, el caso Colombiano, en el que hace unos meses la sociedad civil participó de manera muy activa en la reforma de la ley de derechos de autor, planteando desafíos en términos de acceso a la información, derechos de autor, el funcionamiento de bibliotecas, entre otros. Pueden encontrar más información en una publicación de la Fundación Karisma de Colombia sobre la Reforma de derecho de autor.

Descentralización. En términos de neutralidad, la invitación que hacemos es a pensar y reflexionar respecto a nuestras prácticas diarias de navegación. ¿Qué aplicaciones usamos? ¿A quiénes pertenecen? ¿Quién las controla? Respecto a este tema hablamos del caso de Mark Zuckerberg, además de WeChat en China y el monopolio de los navegadores web.

Inclusión digital. Partiendo de la premisa que Internet debería reflejar la diversidad y experiencia de todas las personas, en cualquier lugar del mundo; que todos y todas deberíamos tener la oportunidad de participar en la creación, avance y estructuración de internet, sin tener algún tipo de amenaza. Al respecto, hablamos de los grupos y colectivos que empoderan a mujeres para que incremente su participación en Internet. De igual forma, hablamos de Mozilla Nativo, la comunidad de Mozilla que se dedica a empoderar a través de proyectos de localización de Software a hablantes de lenguas indígenas para que ellos se vuelvan constructores de herramientas (Firefox, Firefox para Android, mozilla.org, entre otras herramientas y plataformas) y estas estén en sus lenguas.

Alfabetización digital. En este punto se plantea que no solo es necesaria la conectividad a internet, también se necesita de habilidades como leer, escribir y participar en el mundo digital. En Colombia también hay varias inicitiavidas, así que dentro de la presentación hablamos de los Puntos vive Digital de MINTIC, del tema de ciudadanía digital y también de la nueva modalidad de trabajo, el teletrabajo.

 

Agradecemos al GLUD -Grupo Linux de la Universidad Distrital-, a los participantes que estuvieron en nuestra presentación y a nuestra nueva voluntaria, Alejandra Zerta, quien se integra a la comunidad desde Manizales.

 

¿Quieres participar del equipo local de reflexión e investigación sobre el Reporte de la Salud de Internet?

¡Escríbenos!

Nuestras redes sociales: FanpageTwitter o al Correo: monica@mozillacolombia.org

Te incitamos a descargar y compartir nuestra presentación. ¡Somos Mozilla Colombia!

Categorías: Mozilla Hispano

Depurando aplicaciones web modernas

Noticias de Mozilla Hispano - Dom, 26/08/2018 - 22:00

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

El desarrollo y depuración de aplicaciones JavaScript modernas en las herramientas de desarrollador de Firefox dieron un salto cuántico hacia adelante. En colaboración con Logan Smyth, Líder Técnico para Babel, subimos de nivel el soporte a mapas de fuente para permitirte inspeccionar el código que realmente escribiste. Combinado con la iniciativa en marcha para ofrecer soporte de primera clase a frameworks JS a través de nuestras herramientas, esto aumentará la productividad para desarrolladores de aplicaciones web modernas.

Los frameworks JS y las herramientas de construcción (build) juegan un rol crítico hoy en día. Frameworks como React, Angular y Ember le permiten a los desarrolladores construir interfaces de usuario declarativas con JSX, directivas y plantillas. Herramientas como Webpack, Babel y PostCSS le permiten a los desarrolladores usar las nuevas características de JS y CSS antes que sean soportadas por los creadores de navegadores. Estas herramientas ayudan a los desarrolladores a escribir código más simple, pero generan código más complicado de depurar.

En el siguiente ejemplo, usamos Webpack y Babel para compilar Módulos ES y funciones asíncronas dentro de JS simple, que puede correr en cualquier navegador. El código original a la izquierda es muy simple. El código generado, compatible con navegadores a la derecha es mucho más complicado.

Archivo original a la izquierda, archivo generado a la derecha.

Cuando el depurador se pausa, usa los mapas de fuentes para navegar desde la línea 13 en el código generado a la línea 4 en el código original. Desafortunadamente, ya que la pausa realmente ocurre en la línea 13, eso puede hacer difícil para el usuario para descubrir cuál es el valor que dancer tiene en ese momento. Moviendo el puntero del ratón sobre la variable dancer retorna undefined y la única manera para encontrar el contexto de dancer es abrir todos los seis contextos en el panel de Contextos seguidos por expandir el objeto _emojis. Este proceso complicado y frustrante es el por qué mucha gente opta por deshabilitar los mapas de fuentes.

Valor de dancer es undefined, seis contextos separados en el panel de Contextos.

Para hacer frente a este problema, formamos un equipo con Logan Smyth para ver si era posible hacer que la interacción se sintiera más natural, como si estuvieras depurando el código original. El resultado es un nuevo motor que mapea los datos de mapas de fuentes con el árbol de sintaxis de Babel para mostrar las variables que esperas ver en la manera que quieres verlas.

El valor correcto de dancer es mostrado, el panel de Contextos muestra un contexto.

Estas mejoras fueron implementadas primero para Babel y Webpack, y actualmente estamos agregando soporte para TypeScript, Angular, Vue, Ember y muchas otras. Si tu proyecto genera fuentes de mapas hay una buena posibilidad para que esta característica funcione para ti.

Para probarlo, sólo dirígete y descarga Firefox Developer Edition. Puedes ayudarnos probando esto en tu propio proyecto y reportando cualquier error. Si quieres seguir adelante, decir hola, o contribuir, también puedes encontrarnos en los canales de devtools en GitHub, Mozilla Discourse o en el Slack de devtools.

Nuestro objetivo para el 2018 es mejorar la vida de los desarrolladores web que desarrollan aplicaciones modernas usando los últimos frameworks, herramientas y mejoras prácticas. Corregir variables es sólo el inicio ¡El futuro es brillante!

Categorías: Mozilla Hispano

El Arco: Uso de Rust y WebAssembly para animar 30 mil luces LED de colores

Noticias de Mozilla Hispano - Mar, 21/08/2018 - 03:08

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

En junio, Mozilla colaboró con un artista llamado Ian Brill para crear una instalación llamada el “Arco” en la JSConf EU de Berlín. Este ambiente interactivo permitió a la gente experimentar la intersección del arte y la tecnología de una manera física, palpitante e inmersiva.

Los visitantes pudieron ver el Arco impresionante y experimentar un espectáculo de luces siempre cambiante compuesto de 30.000 LEDs de colores. Para apoyar la exposición, los ingenieros de Mozilla construyeron una plataforma que permitía a cualquiera utilizar tecnologías web (con una implementación subyacente en Rust y WebAssembly) para controlar las animaciones del Arco y hacer que la pantalla de luz fuera interactiva. El resultado fue divertido y colorido, y dio a los desarrolladores la oportunidad de interactuar con nuevas tecnologías desconocidas.

Tal vez recuerdes haber leído el post de Lin Clark sobre “Primer módulo Rust+WebAssembly para bebés“. Ofrece una excelente visión general de por qué decidimos crear una instalación artística en torno a Rust y WebAssembly. TL:DR: Los proyectos “Hola mundo” están bien, pero esto proporciona una forma divertida y atractiva de aprender algo nuevo.

JSConf recientemente publicó el vídeo completo de la charla de Lin. Puedes comprobarlo más abajo:

Enlaces adicionales:

Categorías: 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
Subscribe to Proyecto NAVE agregador