ios5 - que - mobile safari premios
¿Cómo habilitar iOS 5 Safari Reader en mi sitio web? (11)
Esta pregunta ( Cómo deshabilitar Safari Reader en una página web ) tiene más detalles. Copiado aquí:
Tengo curiosidad por saber más acerca de qué desencadena la opción Reader en Safari y qué no. No planeaba implementar nada que lo desactivara, pero era curioso como ejercicio técnico.
Esto es lo que he aprendido hasta ahora con algunos juegos básicos:
Necesita al menos una etiqueta H No va solo por el recuento de caracteres, sino por el número de etiquetas P y la longitud. Probablemente busca saltos de frase ''.'' y otros criterios Safari proporcionará el ''Reader'' si, con una etiqueta H, y lo siguiente:
1 etiqueta P, 2417 caracteres 4 etiquetas P, 1527 caracteres 5 etiquetas P, 1150 caracteres 6 etiquetas P, 862 caracteres Si resta 1 carácter de cualquiera de los anteriores, la opción "Lector" no está disponible.
Debo señalar que el número de caracteres de la etiqueta H juega un papel, pero lamentablemente no me di cuenta de esto cuando determiné los resultados anteriores. Asuma 20+ caracteres para la etiqueta H y corregidos a lo largo de los resultados anteriores.
Algunas otras cosas interesantes:
El ajuste de las etiquetas P las elimina de la pantalla de Configuración de conteo a ninguna, y luego las muestra 230ms más tarde, con Javascript evitado la opción Lector también
Me interesaría si alguien puede determinar esto en su totalidad.
¿Cómo funciona la función de lector de Mobile Safari en iOS 5? ¿Cómo lo habilito en mi sitio? ¿Cómo le digo qué contenido en mi página es un artículo para activar esta función?
Estaba luchando con esto. Finalmente saqué las marcas <ul>
en mi historia, ¡y viola! comenzó a funcionar.
No puse ningún envoltorio alrededor del cuerpo, pero puede haberlo hecho por accidente.
Estoy trabajando en algoritmos para limpiar sitios web a partir de "desperdicio" de información similar a la característica de Safari Reader. No es tan bueno como la legibilidad, pero tiene algunas cosas interesantes.
Puede obtener más información en la página del proyecto smartbrowser.codeplex.com .
He probado aproximadamente 100 variaciones de esto en mi iPhone para descubrir qué desencadena este elusivo estado de Reader. Mis conclusiones son las siguientes:
Esto es lo que encontré tuvo un impacto:
- Tener alrededor de 200 o más palabras (o 1000 caracteres incluyendo espacios en blanco) en el artículo que desea activar el "Reader" parece ser necesario
- El lector NUNCA se activó cuando tenía menos de 170 palabras; aunque a veces se activaba cuando tenía 180 o 190 palabras.
- El texto dentro de ciertos elementos como
<ol>
o<ul>
(que no se usan normalmente para contener una historia) no contará para las 200 palabras (sin embargo, se mostrarán en el lector si el lector se activa por otras razones) - Envolver las 200 palabras en un elemento de bloque como
<div>
o<article>
parece necesario (dicho esto, me sorprendería si hubiera sitios web donde ese no fuera el caso)
Para una divulgación completa, esto es lo que encontré que NO tuvo un impacto:
- Ya sea usando un encabezado o no
- Si envolver el texto en un
<p>
o dejarlo fluir libremente - Las puntuaciones (es decir, eliminar todos los puntos, comas, etc. no tuvieron ningún impacto)
La etiqueta del artículo HTML5 no se activa en mis pruebas. Tampoco parece funcionar en contenido sin conexión (es decir, páginas guardadas en su máquina local).
Lo que parece desencadenar es un bloque div con muchas p con mucho texto.
La teoría de la etiqueta p suena bien. Creo que también detecta otros elementos también. Una de nuestras páginas con 6 párrafos no activa el Reader, pero sí una con 4 párrafos y una etiqueta img.
También es lo suficientemente inteligente como para detectar artículos de varias páginas. Pruébelo en un artículo de varias páginas en nytimes.com o nymag.com. Estaría interesado en saber cómo lo detecta también.
Muchas de las respuestas publicadas aquí contienen información falsa. Aquí hay algunas correcciones / aclaraciones:
El elemento
<article>
funciona bien como un contenedor; Safari Reader lo reconoce. Mi sitio es un ejemplo . No importa qué elemento de envoltura elijas, siempre que haya uno, que no sea<body>
o<p>
. Puede usar<article>
,<div>
,<section>
; o elementos semánticamente incorrectos para este propósito, como<nav>
,<aside>
,<footer>
,<header>
; o incluso elementos en línea como<span>
(!).No se requieren encabezados para que Reader funcione. Aquí hay un ejemplo de un documento sin elementos
<h*>
en los que el lector funciona bien: http://mathiasbynens.be/demo/safari-reader-test-3
Publiqué algunos más detalles con respecto a mis hallazgos aquí: http://mathiasbynens.be/notes/safari-reader
Parece que el algoritmo en el que se basa busca p-Tags y cuenta con delimitadores como "." en el texto interno. La sección (div) con más puntos obtiene el foco.
ver: http://lab.arc90.com/experiments/readability/
Parece ser la base para el modo Lector, al menos Safari lo atribuye a los Agradecimientos, ver:
file: /// C: /Program%20Files/Safari/Safari.resources/Help/Acknowledgments.html
Arc90 (legibilidad) Copyright © Arc90 Inc.
La legibilidad está autorizada bajo la Licencia Apache, Versión 2.0.
Por sorprendente que pueda parecer, no presta ninguna atención a la etiqueta del artículo HTML5, particularmente decepcionante dado que Safari 5 tiene soporte completo para artículos, secciones, navegación, etc. en CSS; ahora se puede diseñar como un div, y se comportan igual que cualquier elemento de nivel de bloque.
Había configurado específicamente un sitio con una etiqueta de artículo y varias etiquetas de sección interna, en preparación para el etiquetado semántico HTML5 para exactamente ese propósito, así que realmente esperaba que Safari 5 lo usara para Reader. No tuve suerte, probablemente debería presentar un error al respecto, ya que tendría mucho sentido. De hecho, ignora por completo la mayoría de los subtítulos de nivel H2 en la página, cada uno marcado como una sección, y solo muestra el div único que cumple con los criterios mencionados anteriormente.
Irónicamente, la versión anterior del mismo sitio, que no tiene ni artículo, sección ni etiquetas div separadas, reconoce todo el cuerpo para mostrar en Reader.
Tanto Firefox como Chrome tienen el complemento similar llamado iReader. Aquí está su proyecto con código fuente.
http://code.google.com/p/ireader-extension/
Lee el código para obtener más.
Ver Pautas de publicación de artículos .
Aquí hay API sobre cómo leer y analizar: API de desarrollador de legibilidad . Ya hay un proyecto que puede recomendar: ruby-readability .
Una breve historia: la característica Safari Reader desde que el navegador Safari 5 de Apple incorporó una base de código llamada Readability y la Lectura comenzó como una herramienta simple de lectura basada en Javascript que convirtió cualquier página web en una vista de lectura personalizable. Fue lanzado por Arc90 (como un experimento Arc90 Lab), una tienda de diseño y tecnología con sede en la ciudad de Nueva York, a principios de 2009. También está incorporado en Amazon Kindle y aplicaciones populares de iPad como Flipboard y Reeder.