Único arquivo de imagens HTML + CSS + JS +

Question

Existe um formato de arquivo que integra todo o conteúdo HTML em um único arquivo?

Em vez de doc, docx, odt ou pdf, desejo usar documentos em HTML5 para criar meu conteúdo. Mas isso representa um problema quando eu quero enviar os arquivos HTML por exemplo por email; Eu teria que compactá-lo e anexá-lo a um email. Claro, há .lit e .chm, mas por razões óbvias, esse não é o caminho a seguir. Além disso, é possível embutir javascript e código CSS em arquivos HTML. Isso também tem uma desvantagem: as imagens ainda são excluídas e a incorporação de todos os arquivos CSS e Javascript externos em um arquivo HTML é incômoda. As ferramentas podem automatizar isso, mas o problema de imagem ainda existe.

A motivação mais importante para usar HTML em pdf / doc / docx / odt é que o HTML não é projetado para impressão, enquanto pdf / doc / docx / odt são todos (e portanto não otimizados para screenreading). Além disso, o HTML é um padrão totalmente aceito e aberto, que não pode ser dito dos formatos nomeados (odt é aberto, mas não amplamente aceito).

    

Answer 1

Incorporar tudo em um arquivo HTML normal é o caminho a seguir. Você já viu o TiddlyWiki ? Eu acho que já vi isso ser chamado de "Single Page Application" - tudo está embutido em um arquivo HTML, então ele funciona como (bem, quase) um software independente. Eu não uso, mas acho que é tecnicamente impressionante.

As imagens podem ser incluídas em linha usando a codificação base64 usando um URI de dados. Mas o suporte no Internet Explorer 8 não está completo (há um limite de tamanho IIRC) e o suporte está ausente totalmente em versões mais antigas do IE. A maioria dos outros navegadores modernos tem um bom suporte.

Observe que isso geralmente aumentará o tamanho da imagem em cerca de um terço (porque você só "usa" 6 de cada 8 bits por byte, por isso precisa usar um terço a mais de bytes para acomodar essa lacuna).

Por exemplo, você recebe algo assim:

<img src="data:image/png;base64,<BASE64 STRING>" />

Ou isto:

.someClass
{
    background-image:url(data:image/png;base64,<BASE64 STRING>");
}

Você também pode querer ler o artigo da Wikipedia sobre URIs de dados , ele tem comentários sobre o suporte ao navegador e alguns exemplos de uso.

    

Answer 2

Acho que o formato MHTML (MIME HTML) (extensão de arquivo .MHT) é provavelmente o que você procura. Isso incorpora tudo em um único arquivo (muito parecido com um email em HTML). Imagens etc. são incorporadas com codificação base64.

O suporte do navegador é razoável. IE e Opera podem salvar e visualizar arquivos MHT. No IE você simplesmente "Salvar como ..." e selecione "Arquivo da Web, arquivo único (* mht)". No entanto, o Firefox e o Chrome exigem extensões de navegador.

Pessoalmente, eu provavelmente faria o upload do conteúdo HTML para um site (possivelmente protegido por senha) e apenas distribuiria o link. Os arquivos MHT não são exatamente editáveis pelo usuário, portanto, é necessário regenerar quando você deseja distribuir. Uma vez que tudo foi combinado em um arquivo MHT, ele ainda é tão acessível quanto o HTML?

PDF é razoavelmente acessível. Ele tem seus próprios recursos de leitura de tela. Não sei como ele lida com as imagens - a menos que você crie isso com uma ferramenta específica?