Pregunta:
Herramienta que muestra el esquema de documentos HTML5
unor
2014-02-05 07:17:29 UTC
view on stackexchange narkive permalink

La especificación HTML5 define un algoritmo para crear un esquema de documento.

Estoy buscando herramientas que sigan este algoritmo de forma exacta y mostrar el contorno . Sería bueno poder exportar el esquema como texto, pero no es necesario.

La herramienta debe admitir al menos una de estas formas de ingresar un documento HTML5:

  • a través de una URL HTTP (obteniéndola de la Web)
  • mediante entrada directa (pegando todo el documento HTML)

No importa qué tipo de herramienta (soporte solo o integrado en navegadores, editores de texto,…; para escritorio, móvil o servidor; GUI o basado en texto), pero no servicios web (que no se pueden instalar en mi propio servidor).

Tres respuestas:
#1
+5
braveterry
2014-02-07 02:40:04 UTC
view on stackexchange narkive permalink

Eche un vistazo a la extensión de Google Chrome HTML5 Outliner. Esta herramienta también está disponible como marcador, JavaScript, extensión de Opera y una extensión experimental de Firebug: https://code.google.com/p/h5o/.

HTML5 Outliner tooltip UI

Parece que esta herramienta también está disponible como bookmarklet, JavaScript, extensión Opera y una extensión experimental Firebug: http://code.google.com/p/h5o/ - Las últimas [versiones] (http: // code. google.com/p/h5o/downloads/list) parecen ser de 2010, sin embargo; pero no sé si el algoritmo de esquema se cambió en este momento.
@braveterry, ¿agregarías la información del comentario de unors a la respuesta para que sea mejor visible (no todos los usuarios leen los comentarios)?
Lo acabo de probar (extensión Chromium y bookmarklet). Parece funcionar muy bien en la mayoría de los casos, pero no sigue el algoritmo al 100% correctamente. Ejemplos: (1) Los elementos con el atributo `hidden` no deberían contribuir al contorno, pero en h5o sí lo hacen. (2) El elemento `dialog` es una raíz de seccionamiento, pero h5o no lo maneja así.
Solo un nombre, un enlace y una captura de pantalla no son una buena respuesta. Consulte [esta meta publicación] (http://meta.softwarerecs.stackexchange.com/q/356/185) sobre lo que se considera una respuesta de alta calidad en este sitio.
Si bien, en teoría, esto puede responder a la pregunta, [sería preferible] (http://meta.stackexchange.com/q/8259) incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia.
#2
+5
unor
2014-03-10 17:35:15 UTC
view on stackexchange narkive permalink

HTML5 Outliner está disponible como bookmarklet y archivo JavaScript. (También hay una demostración en línea disponible).

Cuando hace clic en el marcador, el esquema se superpone en la página (posición fija). Al hacer clic en cualquier parte de la página (o nuevamente en el bookmarklet) se oculta el esquema.

Licencia

Tiene licencia de WTFPL (Versión 2), por lo que es software libre (pero no software de código abierto).

Ejemplo

A continuación se muestra un ejemplo utilizado en el artículo de Wikipedia Stack Exchange :

HTML5 Outliner: overlayed outline

Funciones

Al hacer clic en una entrada se desplaza la página al encabezado / sección correspondiente.

Puede cambiar la numeración de un nivel (predeterminado, vea la captura de pantalla) a varios niveles ( 1 , 1.7 , 1.7.1 ,…). También se puede inhabilitar.

Puede inhabilitar la función que hace clic en cualquier parte de la página oculta el esquema (por lo que tendría hacer clic en el bookmarklet nuevamente para ocultarlo).

Puede habilitar información sobre herramientas , que contiene detalles técnicos (por ejemplo, qué elemento de sección y / o elemento de encabezado se utiliza).

Los colores de entrada (así como otros CSS) se pueden cambiar fácilmente.

#3
+2
sideshowbarker
2015-09-23 02:27:23 UTC
view on stackexchange narkive permalink

El código de backend actual del W3C HTML Checker tiene una función Mostrar esquema que se ajusta al algoritmo de esquema en la especificación HTML.

I He escrito instrucciones sobre cómo puede ejecutar fácilmente su propia instancia del verificador localmente.

Puede descargarlo y ejecutarlo en minutos (si no segundos) con solo dos comandos :

  wget https://sideshowbarker.net/releases/jar/vnu.jarjava -cp ./vnu.jar nu.validator.servlet.Main 8888  

Luego, abra http: // localhost: 8888 / en su navegador y tendrá un formulario que puede usar para verificar documentos especificando sus URL o cargando archivos.

Para obtener un esquema de un documento, simplemente marque la casilla de verificación esquema en ese formulario.



Esta pregunta y respuesta fue traducida automáticamente del idioma inglés.El contenido original está disponible en stackexchange, a quien agradecemos la licencia cc by-sa 3.0 bajo la que se distribuye.
Loading...