You are here

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

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
Subscribe to Proyecto NAVE aggregator - Mozilla Hispano