tablas que ejemplos ejemplo con agregar javascript firefox firefox-reader-view

javascript - ejemplos - innerhtml que es



¿Cómo funciona la vista de lector de Firefox? (3)

Leyendo el código de gitHub, esta mañana, el proceso es que los elementos de la página se enumeran en un orden de probabilidad, con <section> , <p> , <div> , <article> en la parte superior de la lista (es decir, lo más probable).

Luego, a cada uno de estos "nodos" se le asigna una puntuación basada en cosas como el recuento de comas y los nombres de clase que se aplican al nodo. Este es un proceso de múltiples facetas en el que se agregan puntajes para fragmentos de texto, pero también se reducen los puntajes para partes o sintaxis no válidas. Los puntajes en las sub-partes del "nodo" se reflejan en el puntaje del nodo como un todo. es decir, el elemento padre contiene las puntuaciones de todos los elementos inferiores, creo.

Este valor de puntuación decide si la página HTML se puede "ver página" en Firefox.

No tengo absolutamente claro si Firefox o la función de legibilidad establecen el valor del puntaje.

Javascript no es realmente mi punto fuerte, y creo que alguien más debería revisar el enlace proporcionado por Richard ( github.com/mozilla/readability ) y ver si pueden proporcionar una respuesta más completa.

Lo que no vi pero que esperaba ver fue la puntuación basada en la cantidad de contenido de texto en una <p> o una <div> (u otras) etiquetas relevantes.

¡Cualquier mejora en esta pregunta o respuesta, por favor comparta!

EDITAR: Las imágenes en las <div> o <figure> (HTML5) dentro del elemento <p> parecen mantenerse en la Vista del lector cuando el contenido del texto de la página es válido.

Resumen

Estoy buscando los criterios por los cuales puedo crear una página web y estar [bastante] seguro de que aparecerá en la Vista del lector de Firefox , si el usuario lo desea.

Algunos sitios tienen esta opción, otros no. Algunos con más texto no tienen esta opción que otros con mucho menos texto. Stack Overflow, por ejemplo, muestra solo la pregunta en lugar de las respuestas en la Vista del lector.

Pregunta

He actualizado mi Firefox de 38.0.1 a 38.0.5 y he encontrado una nueva función llamada ReaderView, que es una especie de superposición que elimina el "desorden de páginas" y hace que el texto sea más fácil de leer. La vista de lector se encuentra en el lado derecho de la barra de direcciones como un icono en el que se puede hacer clic en ciertas páginas.

Esto está bien, pero desde el punto de vista de la programación, quiero saber cómo funciona la "vista del lector", a qué criterios se aplica a qué páginas. He hecho una exploración del sitio web de Mozilla Firefox sin respuestas claras (todas las respuestas de programación de cualquier tipo que encontré), por supuesto, busqué en Google / Binged esto y esto solo regresó con referencias a complementos de Firefox, esto no es un complemento pero una parte básica de la nueva versión de Firefox.

Supuse que la vista del lector usaba HTML5 y extraería el contenido de <article> pero este no es el caso, ya que funciona en Wikipedia, que no parece usar <article> o etiquetas HTML5 similares, sino que la vista de lectura extrae ciertos <div> sy los muestra solos. Esta característica funciona en algunas páginas HTML5, como wikipedia, pero no en otras.

Si alguien tiene alguna idea de cómo funciona realmente Firefox ReaderView y cómo los desarrolladores de sitios web pueden utilizar esta operación, ¿pueden compartirla? O si puede encontrar dónde se puede ubicar esta información, ¿puede señalarme en la dirección correcta, ya que no he podido encontrar esto?

Necesita al menos una etiqueta <p> alrededor del texto, desea ver en la Vista del lector y al menos 516 caracteres en 7 palabras dentro del texto.

Por ejemplo, esto activará ReaderView:

<body> <p> 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789 123456 </p> </body>

Vea mi ejemplo en https://.com/a/30750212/1069083

Seguí el enlace de Martin al repositorio GitHub de Readability.js y eché un vistazo al código fuente. Esto es lo que hago de eso.

El algoritmo funciona con etiquetas de párrafo. En primer lugar, trata de identificar partes de la página que definitivamente no son contenido, como formularios, etc., y las elimina. Luego pasa por los nodos de párrafo en la página y asigna una puntuación basada en la riqueza de contenido: les da puntos por cosas como número de comas, longitud del contenido, etc. Observe que un párrafo con menos de 25 caracteres se descarta de inmediato.

Los puntajes luego "burbujean" el árbol DOM: cada párrafo agregará parte de su puntaje a todos sus nodos principales: un padre directo obtiene el puntaje completo agregado a su total, un abuelo solo la mitad, un bisabuelo un tercio y así en. Esto permite que el algoritmo identifique elementos de nivel superior que probablemente sean la sección de contenido principal.

Aunque esto es solo el algoritmo de Firefox, supongo que si funciona bien para Firefox, también funcionará para otros navegadores.

Para que estos algoritmos de Vista de lector funcionen para su sitio web, desea que identifiquen correctamente las secciones de su página con mucho contenido. Esto significa que desea que los nodos con más contenido en su página obtengan puntajes altos en el algoritmo.

Aquí hay algunas reglas generales para mejorar la calidad de la página a la vista de estos algoritmos:

  1. ¡Use etiquetas de párrafo en su contenido! Muchas personas tienden a pasarlos por alto a favor de las etiquetas <br /> . Si bien puede parecer similar, muchos algoritmos relacionados con el contenido (no solo los de Reader View) dependen en gran medida de ellos.
  2. Utilice elementos semánticos HTML5 en su marcado, como <article> , <nav> , <section> , <aside> . Aunque no son el único criterio (como señaló en la pregunta), estos son muy útiles para las computadoras que leen su página (no solo la Vista del lector) para distinguir diferentes secciones de su contenido. Readability.js los usa para adivinar qué nodos es probable o improbable que contengan contenido importante.
  3. Envuelva su contenido principal en un contenedor, como un elemento <article> o <div> . Esto recibirá puntos de puntuación de todas las etiquetas de párrafo dentro de él y se identificará como la sección de contenido principal.
  4. Mantenga su árbol DOM bajo en áreas con contenido denso. Si tiene muchos elementos que dividen su contenido, solo está haciendo la vida más difícil para el algoritmo: no habrá un solo elemento que se destaque como padre de muchos párrafos con mucho contenido, sino muchos elementos separados con puntajes bajos.