Noticias

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

WebVR combina el poderoso alcance de la Internet con la atractiva inmersión del contenido de la realidad virtual. Con WebVR, una experiencia de realidad virtual está una URL de distancia. Sin embargo, el equipamiento VR todavía es muy costoso y no está completamente adoptado para el uso del consumidor. Por esta razón, es útil poder grabar tus proyectos VR para que otros puedan experimentar y disfrutar, al menos desde una perspectiva de espectador.

Grabando contenido VR

Este vídeo tutorial enseña cómo grabar una experiencia virtual que has creado usando el modo espejo en SteamVR. Capturar un ojo le permite a tu audiencia disfrutar el video en un modo 2D regular, pero capturar ambos ojos permitirá una experiencia más inmersiva gracias al vídeo estereoscópico.

Este tutorial asume que tienes una configuración compatible con SteamVR y Open Broadcast Software instalado.

Hay otras opciones para capturar tus experiencias VR. Si eres un usuario de Windows 10, quizás prefieras usar Game DVR, que funciona fuera de la caja.

Extraer un GIF de tu parte favorita

Ahora que tienes un video con tu contenido VR, puedes hacer un GIF de éste con Instagiffer para Windows. Instagiffer no es el software más rápido que existe, pero la calidad del resultado de los GIF es espléndido.

Inicia instalando e iniciando Instagiffer. La interfaz gráfica está dividida en tres secciones o pasos.

Haz click en Load Video en la sección Step 1, y selecciona el video del cual quieres extraer el GIF.

Localiza la secuencia que quieres convertir en GIF y llena las opciones en la sección Step 2. En este caso, queremos extraer 5.5 segundos de vídeo empezando desde el segundo 18; una secuencia en que le disparo a un enemigo.

Length, Smoothness y Frame Size afectarán al tamaño de tu GIF: valores más altos incrementarán el tamaño del archivo resultante.

En la sección Step 3, puedes recortar la imagen arrastrando los recuadros rojos. En este caso, estoy removiendo el marco negro alrededor del video. También puedes usarlo para aislar cada ojo por separado.

Ten en cuenta que el tamaño del GIF es mostrado en la esquina inferior derecha de la vista previa. Puedes ajustar el tamaño moviendo el deslizador de Frame Size en la sección Step 2.

Finalmente, haz click en el botón Create GIF! en la parte inferior de la ventana para empezar la conversión.

Una de las cosas que me gustan de Instagiffer es que, al terminar, mostrará mensajes de compatibilidad sobre el GIF, probándolo en algunos de los más populares servicios de Internet.

Haz click en el resultado final para ver la animación ¡Es realmente buena!

Si eres más de herramientas de la vieja escuela, puedes revisar la utilidad en línea de comandos de Kevin, Gifpardy y ver cómo funciona.

Haz un video 3D para YouTube

Una de las ventajas de grabar ambos ojos es que puedes ensamblar videos 3D lado a lado estereoscópicos. Puedes usar YouTube, por ejemplo.

Sólo sube tu video y edítalo. Ve a la pestaña Configuración avanzada dentro de la vista Información y configuración.

Haz clic en la casilla que dice Este es un video 3D y selecciona Lado a lado: Vídeo de la izquierda en el lado izquierdo de la lista desplegable.

Los mensajes de advertencia sobre depreciación alientan a que hagas eso fuera de línea, con tu editor de vídeo favorito.

Una vez que lo has hecho, YouTube seleccionará la mejor opción para mostrar el contenido en 3D, aplicando los filtros apropiados o las correcciones necesarias.

Por ejemplo, verás una representación de un anaglifo cuando revises tu vídeo con Firefox en el escritorio.

Puedes cambiar a una representación 2D también.

Cuando ves tu video con Firefox para Android verás ambos ojos lado a lado.

Y si pruebas con la aplicación nativa de YouTube, un ícono para Cardboard/Daydream VR aparecerá, transportándote a una sala de cine virtual en donde podrás disfrutar del video.

En conclusión

La realidad virtual no está completamente adoptada y tampoco es fácilmente accesible, pero las herramientas están disponibles para alcanzar más personas y distribuir tu trabajo creativo grabando tus demos de WebVR en vídeo. Descubre galerías VR en Twitter, GIPHY o Tumblr. ¡Escoge tus mejores videos y compártelos!

¿Prefieres vídeos en alta calidad? Revisa el contenido VR en YouTube o Vimeo.

En Mozilla, apoyamos el éxito de WebVR y apuntamos a demostrar que la gente puede compartir y disfrutar de experiencias de la realidad virtual en la Web. Por favor, comparte tus proyectos WebVR con el mundo. Amaremos lo que estás haciendo. Déjanos saber en Twitter etiquetando tus proyectos con #aframevr, ¡y te retuitearemos! Sigue a @AframeVR y @MozillaVR para conocer los últimos desarrollos y nuevos trabajos creativos.

Artículos relacionados:

• Firefox 55: el primer navegador con soporte para WebVR
• Conceptos básicos para construir juegos 3D en la Web
• Construye la web de realidad virtual con A-Frame

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

Es hora de que vayamos más allá de un navegador que sólo muestre páginas web. En la web moderna, intentar completar una simple tarea puede hacer que seas golpeado por pop-overs, entrecerrar los ojos para ver el contenido empotrado en una columna diminuta, e intentar descubrir el comportamiento de otro widget personalizado de una página. Para restablecer el equilibrio de potencia y recuperar la eficiencia del usuario, necesitamos un navegador más inteligente.

Imagina que Firefox comprendiese las páginas como lo hace un humano:

• Los inicios de sesión arduos podrían ser cosa del pasado. El navegador podría reconocer un enlace de inicio de sesión, seguirlo en segundo plano e iniciar sesión, todo ello sin perder su lugar. Los enlaces podrían desaparecer de la página y ser movidos a una interfaz de usuario de navegador estándar.
• Los productos podrían ser reconocidos como tales y manipulados como trozos cohesivos. Podrías arrastrarlos a un carrito de compra, completo con imágenes y precios, para la comparación de compras en múltiples sitios. Podrías disfrutar de columnas fácilmente escaneables en lugar de un circo de pestañas.
• Al fin podría eliminarse la interfaz ineficiente e incoherente. Podríamos tener teclas de acceso rápido proporcionadas por el navegador para descartar pop-overs, navegar a la siguiente página lógica, estandarizar el aspecto de los elementos de la interfaz o reconocer y allanar las presentaciones de diapositivas innecesariamente paginadas.
• En pantallas pequeñas o ventanas, la navegación superflua o secciones de cabecera podrían ocultarse, incluso en las páginas que no utilizan un diseño web adaptable. Podríamos imaginar inteligentemente qué imprimir, incluso en ausencia de hojas de estilo de impresión.

Estos posibles futuros suponen que el navegador puede identificar partes significativas de la página. Durante décadas, han habido muchos intentos de hacer esto más fácil. Pero los microformatos, las etiquetas semánticas, el RDF y los elementos de encabezado link / rel no han podido hacerse cargo del mundo, debido tanto al incentivo de las páginas para permanecer sin posibilidad de ser raspadas como al trabajo extra que representan. Como resultado, los motores de búsqueda modernos y los modos de lectura de los navegadores han adoptado un tono alternativo: extraen el significado aceptando el desorden, yendo directamente a través de un marcado no semántico con un cinturón de herramientas lleno de heurísticas.

Pero un problema continúa: estos proyectos son de un solo propósito y costosos de producir. Readability, la base de los modos de lectura de Safari y Firefox, es de 1800 líneas de JavaScript y se cerró recientemente. El DOM Distiller de Chrome tiene 23000 líneas de Java. Estos enfoques imperativos se atascan en los mecanismos de recorrer el DOM y la acumulación del estado, oscureciendo las partes operativas de los “entendedores” y haciéndolos difíciles de escribir y difíciles de comprender. Están más enredados con los sistemas improvisados de puntuación difusos y la heurística específica de la página que necesitan incluir. La economía está en contra de ellos desde el principio, y consecuentemente pocos de ellos son creados, especialmente fuera de las grandes organizaciones.

¿Pero qué sería si los “entendedores” fuesen baratos escribir? ¿Qué pasa si Readability se pudiese implementar con tan solo 4 simples reglas?

const rules = ruleset( rule(dom('p,div,li,code,blockquote,pre,h1,h2,h3,h4,h5,h6'), props(scoreByLength).type('paragraphish')), rule(type('paragraphish'), score(fnode => (1 - linkDensity(fnode, fnode.noteFor('paragraphish') .inlineLength)) * 1.5)), rule(dom('p'), score(4.5).type('paragraphish')), rule(type('paragraphish') .bestCluster({splittingDistance: 3, differentDepthCost: 6.5, differentTagCost: 2, sameTagCost: 0.5, strideCost: 0}), out('content').allThrough(domSort)) );

Eso se sitúa dentro del 7% de la salida de Readability en una selección de sus propios casos de prueba, medida por la distancia de Levenshtein1. El marco de trabajo que permite esto es Fathom, y dirige el coste de escribir “entendedores” a través del piso.

Fathom es un mini-lenguaje para escribir extractores semánticos. Los conjuntos de reglas que componen sus programas están incrustados en JavaScript, por lo que puedes utilizarlos en el lado del cliente o servidor tal y como dicta la privacidad. Y Fathom maneja toda tu contabilidad para que puedas concentrarte en tus heurísticas:

• El recorrer por árboles desaparece. Fathom es un lenguaje de flujo de datos como Prolog, por lo que los datos “aparecen” convenientemente cuando existen reglas aplicables que aún no se han visto.
• El control de flujo desaparece. Fathom determina el orden de ejecución basado en dependencias, ejecutando sólo lo que necesita para responder a la consulta y almacenando en caché los resultados intermedios.
• La tentación de escribir sistemas de plugins desaparece. Las reglas de Fathom están desordenadas, por lo que se pueden añadir otras tan fácilmente como añadir un nuevo elemento a una matriz de JavaScript. Esto hace que los programas Fathom (o conjuntos de reglas) se conecten de forma inherente. Se mezclan como corrientes de agua, sólo teniendo que ponerse de acuerdo sobre los nombres de los tipos, haciéndolos maduros para la experimentación colaborativa o la envoltura especial sin hacer un lío.
• La necesidad de mantener estructuras de datos paralelas al DOM desaparece. Fathom proporciona nodos DOM de proxy en los que puede hacer garabatos, junto con un sistema en blanco y negro de tipos y un sistema de puntuación de grises para clasificar los nodos y guiar las decisiones.
• La necesidad de encontrar el equilibrio óptimo de pesos para tu heurística desaparece, gracias a un arnés de optimización basado en recocido simulado. Todas esas constantes numéricas en el código anterior se descubrieron incitando a la máquina en una selección de entrada y salida correcta y alejándose.

La mejor parte es que los conjuntos de reglas de Fathom son datos. Se parecen a las llamadas de función JavaScript, pero las llamadas sólo hacen anotaciones en una especie de árbol de sintaxis, haciendo que todo sea fácilmente manipulable por una máquina. Hoy en día, eso nos lleva a la mejora automática de constantes de puntuación. ¡Mañana podría conseguirnos la generación automática de reglas por ellos mismos!

Fathom es joven pero febril. Ya está en producción, alimentando el Flujo de Actividad de Firefox (Activity Stream), donde selecciona descripciones de páginas, imágenes principales, etc. En 70 líneas, reemplazó un conocido servicio comercial de análisis de metadatos.

Lo que necesitamos ahora es imaginación. Recoger todas esas ideas que descartamos porque requerían demasiada comprensión por el navegador. Podemos hacer eso ahora. Es barato.

¿Tienes una idea? ¡Estupendo! Echa un vistazo a la documentación completa para empezar, toma el paquete npm, envía parches y únete a nosotros en el canal #fathom en irc.mozilla.org y en la lista de correo a medida que construyes. Vamos a hacer un navegador que sea, de forma audaz, ¡el agente del usuario!

1Las salvedades del ejemplo son bastante manejables. Es más lento que Readability, porque el agrupamiento es O (n2 log n). Pero también hay muchos pendientes sencillos que no se han tomado todavía: no hacemos nada en lo anterior para aprovechar las clases CSS o las etiquetas semánticas como <article>, ambas fuentes ricas de indicaciones, y no tratamos de reducir los candidatos a la agrupación con umbrales. Finalmente, parte de la diferencia del 7% representa en realidad mejoras sobre la salida de Readability.

Artículos relacionados:

• Puede que no necesites un framework CSS
• Firefox renueva sus páginas de inicio y de pestañas nuevas
• Edición para Desarrolladores 44: Nuevo editor visual y herramientas para el manejo de memoria

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

Soporte WebVR en el Firefox de escritorio

Firefox para Windows es el primer navegador de escritorio que soporta el nuevo estándar WebVR (¡y el soporte para Mac OS ya está en Nightly!). Como los creadores de WebVR, Mozilla quería que representara los mismos principios de estandarización, apertura e interoperabilidad que son las características de la Web, por lo que WebVR funciona en cualquier dispositivo: Vive, Rift y más.

Para obtener más información, echa un vistazo a vr.mozilla.org, o indaga sobre A-Frame, un framework de código abierto para construir experiencias de realidad virtual en la Web.

Nuevas funcionalidades para desarrolladores

Firefox 55 tiene soporte para nuevas funcionalidades de ES2017/2018, incluyendo los generadores asíncronos y los operadores rest y spread(“...“) para objetos:

let a = { foo: 1, bar: 2 }; let b = { bar: 'two' }; let c = { ...a, ...b }; // { foo: 1, bar: 'two' };

MDN tiene una gran documentación sobre el uso de ... con arrays literales o para la asignación por desestructuración, y la propuesta TC39 también proporciona una descripción concisa de esta funcionalidad.

En las herramientas de desarrollador, el panel de red ahora permite el filtrado de resultados mediante consultas como “status-code:200“.

También hay nuevas columnas opcionales para cookies, protocolo, esquema y más que se pueden ocultar o mostrar en el Panel de Red, tal y como se ve en la captura de pantalla anterior.

Haciendo Firefox más veloz

Hemos implementado varias nuevas funcionalidades para mantener la ejecución de Firefox rápida:

• Las nuevas instalaciones de Firefox en Windows ahora tendrán por defecto una versión más estable y segura de 64 bits. Las instalaciones existentes se actualizarán a 64 bits con nuestra próxima versión, Firefox 56.
• Restaurar una sesión o reiniciar Firefox con muchas pestañas abiertas ahora es un orden de magnitud más rápido. Por razones desconocidas, Dietrich Ayala tiene un perfil de Firefox con 1691 pestañas abiertas. Con Firefox 54, iniciar su instancia de Firefox llevaba 300 segundos y 2 GB de memoria. Hoy en día, con Firefox 55, tarda sólo 15 segundos y 0,5 GB de memoria. Esta mejora se debe principalmente al trabajo incansable de un colaborador externo, Kevin Jones, que prácticamente eliminó los costes fijos asociados a la restauración de pestañas.
• Ahora los usuarios pueden ajustar el número de procesos de contenido de Firefox desde las Preferencias. Los procesos de contenido múltiples debutaron en Firefox 54, y permiten al navegador aprovechar mejor las CPUs multi-core modernas, sin dejar de respetar el uso de memoria RAM.
• Firefox ahora utiliza sus listas de protección contra el rastreo integradas para identificar y retrasar los scripts de rastreo que se ejecutan en las páginas en segundo plano. Después de un corto período, Firefox aumentará el setInterval o setTimeout mínimo para las devoluciones de llamada programadas por scripts de rastreo a 10 segundos mientras la pestaña está en segundo plano. Esto se suma a nuestra habitual regulación de 1 segundo para las pestañas en segundo plano, y ayuda a garantizar que las pestañas no utilizadas no pueden estropear el rendimiento o la duración de la batería. Por supuesto, las pestañas que están reproduciendo audio o video no se regulan, por lo que la música de una pestaña de fondo no se entrecorta.
• Con el anuncio del final de Flash, y en coordinación con Microsoft y Google, Firefox 55 requiere ahora que los usuarios hagan clic explícitamente para activar Flash en páginas web mientras trabajamos juntos para eliminar completamente Flash de la plataforma web en el 2020.

Haciendo más rápida la web

Firefox 55 introduce algunas nuevas características de bajo nivel que ayudan a mejorar el rendimiento de las aplicaciones web más exigentes:

• La API IntersectionObserver permite al navegador responder a la visibilidad de los elementos de una página de manera mucho más eficiente y confiable que las soluciones existentes con polling o películas Flash invisibles. Puedes leer más en mi artículo sobre IntersectionObserver de la semana pasada.See the Pen Hello IntersectionObserver by Dan Callahan (@callahad) on CodePen.
  
• Los objetos SharedArrayBuffer y Atomics son nuevos tipos primitivos de JavaScript que permiten a los workers compartir y acceder simultáneamente a la misma memoria. Esto finalmente hace que el multihilo (multi-threading) eficaz sea una realidad en la Web. ¿Cuál es el único inconveniente? Los desarrolladores tienen que preocuparse por la seguridad del hilo, de los mutex, etc. al compartir la memoria, al igual que en cualquier otro lenguaje multihilo. Puedes obtener más información sobre SharedArrayBuffer en esta introducción ilustrada y este artículo explicativo del año pasado.
• La API requestIdleCallback () ofrece una nueva forma de programar devoluciones de llamada siempre que el explorador tenga unos milisegundos adicionales, milisegundos no utilizados entre cuadros (frames) o cada vez que haya transcurrido un tiempo máximo de espera. Esto hace posible comprimir el trabajo en los márgenes donde el navegador estaría inactivo y diferir el trabajo de menor prioridad mientras el navegador está ocupado. El uso de esta API requiere un poco de finura, pero MDN tiene una gran documentación sobre cómo usar requestIdleCallback() de manera efectiva.

Haciendo la Web más segura

La geolocalización y el almacenamiento se unen a las filas de las poderosas API que al igual que los Service Workers sólo se permiten en entornos seguros https://. Si tu sitio necesita un certificado TLS, considera Let’s Encrypt: una autoridad de certificado completamente gratuita, automatizada y sin ánimo de lucro.

Además, Firefox 55 no permitirá que los plug-ins se carguen desde o en esquemas que no sean HTTP/S, como file:.

Nuevas APIs WebExtensions

WebExtensions ahora puede:

• Reemplazar la página de nueva pestaña y modificar el motor de búsqueda del navegador.
• Cambiar dinámicamente la configuración del proxy.
• Solicitar e inspeccionar los permisos que se han concedido.
• Usar el estilo nativo del navegador a través de la propiedad browser_styles del manifiesto en barras laterales, menús de acción y mucho más.

Y más …

Hay muchos más cambios mientras nos preparamos para la próxima era de Firefox en noviembre. Algunos usuarios de Firefox 55 comenzarán a ver la nueva funcionalidad de capturas de pantalla de Firefox (Firefox Screenshots), la barra lateral de marcadores/historia ahora se puede acoplar a ambos lados del navegador y acabamos de anunciar tres nuevos experimentos en Test Pilot.

Para obtener una visión general y completa de las novedades, consulta las notas de versión oficiales, Firefox 55 para desarrolladores de MDN y el anuncio del blog de Mozilla.

Artículos relacionados:

• Soporte para tareas multiprocesos en el futuro de Firefox
• Firefox se actualiza con mejor soporte para Windows 10
• Actualización en el soporte de Firefox para OS X

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

Con el paso de Firefox a una moderna API de extensiones de estilo web para el navegador, ahora es posible mantener un solo un código fuente y publicar una extensión en varios navegadores. Sin embargo, como los distintos navegadores pueden tener diferentes habilidades, algunas extensiones pueden requerir modificaciones para ser realmente portables. Con esto en mente hemos creado el Extension Compatibility Tester (verificador de compatibilidad de extensiones) para dar a los desarrolladores una mejor idea de si sus extensiones funcionarán en Firefox.

La herramienta actualmente admite archivos de extensiones de Chrome (.crx), pero estamos trabajando en ampliar los tipos de extensiones que puede comprobar. La herramienta genera un informe que muestra los posibles usos de las API o permisos incompatibles con Firefox, junto con los siguientes pasos a dar sobre cómo distribuir a los usuarios de Firefox una extensión compatible.

Seguiremos participando en el Grupo de Comunidades de Extensiones para el Navegador y apoyando su objetivo de encontrar un subconjunto común de puntos extensibles en navegadores y APIs que los desarrolladores puedan usar. ¡Esperamos que pruebes la herramienta y nos cuentes lo que piensas!

¡Pruébalo!

“La herramienta dice que mi extensión puede no ser compatible”

¡No es para preocuparse! Nuestro análisis solo muestra el uso de APIs y los permisos, y no dispone del contexto completo. Si la funcionalidad incompatible no es esencial para tu extensión, puedes utilizar las pruebas de prestaciones para utilizar sólo la API cuando esté disponible:

// provoca un error browser.unavailableAPI(...); // ¡prueba de soporte! if ('unavailableAPI' in browser) {     browser.unavailableAPI(...); }

Además, estamos ampliando constantemente las API de extensiones disponibles, por lo que puede que una funcionalidad que ahora no está disponible ¡esté a tan sólo unas pocas semanas de estarlo!

“¡La herramienta dice que mi extensión es compatible!”

¡Hurra! Dicho esto, sin duda prueba tu extensión en Firefox antes de enviarla para asegurarte de que las cosas funcionan como esperas. Las API más comunes pueden tener efectos distintos en navegadores diferentes.

“No quiero subir mi código a un sitio web de terceros”

¡No hay problema! Las pruebas de compatibilidad están disponibles como parte de nuestra herramienta de desarrollo de extensiones para línea de comandos o como un módulo independiente.

Si tienes algún problema al usar la herramienta, por favor reporta un problema o deja un comentario aquí. La esperanza es que esta herramienta sea un primer paso útil para ayudar a los desarrolladores a portar sus extensiones, y obtener un ecosistema de extensiones más saludable y más interoperable.

¡Esperamos que disfrutes portando!

Artículos relacionados:

• La extensión Personas ahora tiene temas navideños
• Extensiones multi-navegador, disponibles ahora en Firefox
• ¿Cómo reducir el impacto de una extensión al iniciar Firefox?

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

Agilizar nuestro proceso de entrega y llevar rápidamente nuevas características a la versión estable para usuarios y desarrolladores es una prioridad para Firefox.  Mirando de cerca y de forma crítica nuestros canales de entrega, quedó en claro que Aurora no reunía nuestras expectativas como primer canal de estabilización.

El 18 de Abril (del 2017), el canal Aurora de Firefox dejó de actualizarse, y durante los siguientes meses, Aurora fue removido del ciclo de entrega. La edición para desarrolladores ahora está basada en la versión Beta. Los usuarios de la edición para desarrolladores mantienen sus temas, herramientas y preferencias. Siguen manejando su perfil actual y no tendrían que experimentar ningún inconveniente.

Este cambio beneficia a los desarrolladores de muchas formas:

• Elecciones más simples sobre los canales de prelanzamiento: Nightly para características experimentales y la versión para desarrolladores/beta para estabilidad.
• Mayor calidad y un entorno más estable para los usuarios de la versión para desarrolladores.
• Un ciclo de entrega más rápido de nuevas características. (¡Beneficiándonos a todos!)

Aquí está la línea del tiempo: el 18 de abril, el código de Firefox 54 se cambió de Aurora a Beta como siempre, mientras Firefox 55 se mantuvo en Nightly para un segundo ciclo seguido (un total de 14 semanas). En el siguiente día de actualización, junio 12, Firefox 55 se movió directamente desde Nightly a Beta. Entre abril y junio, Firefox Aurora para escritorio (54) siguió recibiendo actualizaciones críticas de seguridad, y los usuarios de Aurora y de la versión para Desarrolladores fueron migrados al canal Beta. En Android, los usuarios de Aurora fueron migrados a Nightly.

Aurora fue originalmente creado en 2011 para brindar una mayor retroalimentación por parte de los usuarios después de que Firefox se actualizara de la versión 5 a un ciclo de entregas de alta velocidad. Hoy, en 2017, tenemos procesos más modernos sosteniendo nuestro modelo de trenes, y creemos que podemos entregar productos estables y ricos en características sin la fase adicional de 6-8 semanas de Aurora.

Un proceso de despliegue escalonado, similar a lo que hacemos actualmente con la versión estable, será utilizado para las primeras semanas de Beta. Nuestro flujo de trabajo de entrega e ingeniería continuará teniendo revisiones adicionales y ajustes para asegurarnos que entregamos una versión de alta calidad. Una nueva característica se añadirá de Nightly a Beta solo cuando sea considerada lista, basados en criterios preestablecidos determinados por nuestros equipo de ingeniería, producto y de integridad de producto. Si las nuevas características no están listas, no serán migradas de Nightly a Beta.

Las nuevas herramientas y procesos incluyen:

• La integración de analizadores fijos como parte del flujo de trabajo, para detectar fallas durante la fase de revisión. Estos serán capaces de identificar defectos potenciales, minimizando la deuda técnica.
• Los resultados de la cobertura de código serán usados para analizar la calidad de la plataforma de pruebas y el riesgo de realizar el cambio.
• La habilidad de identificar riesgos potenciales producidos por cambios incluso antes de ser realizados, relacionando datos de varias fuentes (VCS, Bugzilla, etc.) Esto para identificar funciones en donde una modificación seguramente conllevaría a una regresión.
• Monitoreando la cantidad de fallas, control de calidad, datos de telemetría y nuevas regresiones, para determinar la calidad en general de Nightly y la preparación de características para ser agregadas a Beta.

Para saber un poco más respecto a los detalles de esta transición, por favor visita el blog de Administración de Versiones de Mozilla, donde encontrarás respuestas más profundas respecto a las preguntas más frecuentes relacionadas a este cambio.

Artículos relacionados:

• El nuevo cronograma de desarrollo para Firefox
• Más búsquedas en Firefox para Android
• Las nuevas caracteristicas de las Herramientas de Desarrollo en Firefox 23

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

React, en conjunto con Redux, son uno de los frameworks para interfaces de usuario más rápidos y flexibles que existen para la web. Es fácil de escribir, de usar y excelente para equipos. De hecho, la comunidad de Mozilla utiliza React para construir gran parte de la interfaz de las herramientas de desarrollo de Firefox, y la famosa interfaz de usuario de Facebook está escrita con React. A pesar de su popularidad, aún no es fácil de depurar React desde el navegador. Las herramientas de desarrollo de React de Facebook y las herramientas de desarrollo de Redux de Zalmoxisus te dejan inspeccionar, modificar y depurar tu código desde el navegador. Y ahora están disponibles para Firefox. Estos complementos y otros como el complemento de Vue para Firefox harán la depuración de frameworks de JavaScript mas fácil. Cuando se combinan con la herramienta Debugger.html de Mozilla, permiten que todas estas herramientas transformen tu navegador en un excelente depurador de código.

React

Obtén la última versión del complemento React DevTool desde aquí. Una vez instalado, podrás examinar código de React en cualquier sitio que lo utilice. Cuando visitas un sitio construido en React, el ícono del complemento aparecerá en la derecha de la barra de direcciones de Firefox:

Abre tus herramientas de desarrollo con la combinación de teclas Command-Option-i (Ctrl-Shift-i para Windows), haz click en el botón de la barra de las herramientas o haz clic derecho en la página y luego selecciona “Inspeccionar”. Verás el panel de React en conjunto con los otros paneles de las Herramientas de desarrollo. El panel principal ahora te mostrará el código de React:

La herramienta de React funciona muy parecido como cualquier otra herramienta de desarrollo. Utiliza las teclas direccionales o las teclas h,j,k,l para navegar en el código, haz click derecho en los componentes para examinarlos en el panel de elementos, mostrar la fuente y así. Puedes expandir los elementos al hacer click en las flechas.

El panel lateral es un gran lugar para almacenar variables y ver las actualizaciones del código.

También posee una barra genial para búsquedas.

Inspecciona un elemento de React en una página utilizando el inspector por defecto, entonces cambia a la pestaña de React. Entonces el elemento estará seleccionado automáticamente en el árbol de React.

También puedes hacer clic derecho en un elemento y seleccionar “Encontrar nodo DOM” para, bueno, encontrar el nodo DOM de cualquier elemento.

Redux

React y Redux van de la mano. Redux crea un contenedor de estado predictivo para que tu librería de React pueda ejecutarse virtualmente en cualquier sistema de forma confiable. También te permite viajar en el tiempo a una versión anterior de tus estados. Las herramientas de desarrollo de Redux para Firefox te permite inspeccionar acciones de  Redux y cargas, cancelar acciones, registrar errores de las acciones y automáticamente revaluar acciones a medida que cambias el código de reducer.

Las herramientas de desarrollo de Redux poseen gran documentación en inglés en su repositorio de GitHub, incluyendo argumentos, métodos, e inclusive un tutorial de como crear una tienda en Redux para depurar. ¡Chequéalos!

Con los complementos de Firefox, puedes tener un conjunto de herramientas para depurar React/Redux directamente desde el navegador. Descarga Firefox Edición para Desarrolladores y entonces puedes chequear todos los complementos disponibles en addons.mozilla.org.

Artículos relacionados:

• Usando Neutrino para iniciar el desarrollo de JavaScript moderno
• Presentando debugger.html
• Optimizando el rendimiento de JavaScript con las herramientas de Firefox