Questão:
Ferramenta que exibe esboço de documentos HTML5
unor
2014-02-05 07:17:29 UTC
view on stackexchange narkive permalink

A especificação HTML5 define um algoritmo para criar um esboço de documento.

Estou procurando ferramentas que sigam exatamente esse algoritmo e exibir o esboço . Ser capaz de exportar o esboço como texto seria bom, mas não é obrigatório.

A ferramenta deve oferecer suporte a pelo menos uma dessas maneiras de inserir um documento HTML5:

  • via URL HTTP (obtendo-o da Web)
  • via entrada direta (colando todo o documento HTML)

Não importa o tipo de ferramenta (stand- sozinho ou integrado a navegadores, editores de texto, ...; para desktop, celular ou servidor; GUI ou baseado em texto), mas sem serviços da web (que não podem ser instalados em meu próprio servidor).

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

Dê uma olhada na extensão do Google Chrome HTML5 Outliner. Esta ferramenta também está disponível como um bookmarklet, JavaScript, extensão Opera e uma extensão Firebug experimental: https://code.google.com/p/h5o/.

HTML5 Outliner tooltip UI

Parece que esta ferramenta também está disponível como bookmarklet, JavaScript, extensão Opera e uma extensão Firebug experimental: http://code.google.com/p/h5o/ - Os últimos [lançamentos] (http: // código. google.com/p/h5o/downloads/list) parece ser de 2010; mas eu não sei se o algoritmo de estrutura de tópicos foi alterado neste momento.
@braveterry, você adicionaria as informações do comentário de unors à resposta para que fique mais visível (nem todos os usuários leem os comentários)
Acabei de testar (extensão e bookmarklet do Chromium). Parece funcionar bem na maioria dos casos, mas não segue o algoritmo 100% corretamente. Exemplos: (1) Elementos com o atributo `hidden` não devem contribuir para o contorno, mas em h5o contribuem. (2) O elemento `dialog` é uma raiz de seccionamento, mas h5o não lida com isso dessa forma.
Apenas um nome, um link e uma captura de tela não são uma boa resposta. Por favor, veja [esta meta postagem] (http://meta.softwarerecs.stackexchange.com/q/356/185) sobre o que é considerado uma resposta de alta qualidade neste site.
Embora isso possa teoricamente responder à pergunta, [seria preferível] (http://meta.stackexchange.com/q/8259) incluir as partes essenciais da resposta aqui e fornecer o link para referência.
#2
+5
unor
2014-03-10 17:35:15 UTC
view on stackexchange narkive permalink

HTML5 Outliner está disponível como bookmarklet e arquivo JavaScript. (Há também uma demonstração online disponível.)

Quando você clica no bookmarklet, o contorno é sobreposto na página (posição fixa). Clicar em qualquer lugar da página (ou novamente no bookmarklet) esconde o esboço.

Licença

É licenciado sob o WTFPL (Versão 2), então é software livre (mas não software de código aberto).

Exemplo

Aqui está um exemplo usado no artigo da Wikipedia Stack Exchange :

HTML5 Outliner: overlayed outline

Recursos

Clicar em uma entrada rola a página para o título / seção correspondente.

Você pode alterar a numeração de nível único (padrão, veja a captura de tela) para vários níveis ( 1 , 1.7 , 1.7.1 ,…). Também pode ser desativado.

Você pode desativar a funcionalidade de que clicar em qualquer lugar da página oculta o contorno (então você teria que clicar no bookmarklet novamente para ocultá-lo).

Você pode habilitar dicas de ferramentas , contendo detalhes técnicos (por exemplo, qual elemento de seção e / ou elemento de título é usado).

As cores de entrada (assim como outras CSS) podem ser alteradas facilmente.

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

O código de back-end atual do W3C HTML Checker tem um recurso Mostrar contorno que está em conformidade com o algoritmo de contorno na especificação HTML.

I escrevi instruções sobre como você pode facilmente executar sua própria instância do verificador localmente.

Você pode baixá-lo e executá-lo em minutos (se não segundos) com apenas dois comandos :

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

Em seguida, abra http: // localhost: 8888 / em seu navegador e você terá um formulário que pode usar para verificar documentos especificando seus URLs ou enviando arquivos.

Para obter o esboço de um documento, basta marcar a caixa de seleção esboço desse formulário.



Estas perguntas e respostas foram traduzidas automaticamente do idioma inglês.O conteúdo original está disponível em stackexchange, que agradecemos pela licença cc by-sa 3.0 sob a qual é distribuído.
Loading...