Fathom: un framework para entender las páginas web

9 septiembre, 2017 20:12 por

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.

The following two tabs change content below.

Compartir artículo:

Join the discussion at foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Armada alucinante »
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa