Einzelne HTML + CSS + JS + Bilddatei


8

Gibt es ein Dateiformat, das den gesamten HTML-Inhalt selbst in eine Datei integriert?

Anstelle von doc, docx, odt oder pdf möchte ich HTML5-Dokumente verwenden, um meine Inhalte zu erstellen. Dies ist jedoch ein Problem, wenn ich die HTML-Dateien beispielsweise per E-Mail senden möchte. Ich müsste es komprimieren und dann an eine E-Mail anhängen. Natürlich gibt es .lit und .chm, aber aus offensichtlichen Gründen ist dies nicht der richtige Weg. Es ist auch möglich, Javascript und CSS-Code in HTML-Dateien einzubinden. Dies hat auch einen Nachteil: Bilder sind immer noch ausgeschlossen, und das Einbetten aller externen CSS- und Javascript-Dateien in eine HTML-Datei ist umständlich. Tools können dies automatisieren, aber dann besteht das Image-Problem weiterhin.

Die wichtigste Motivation, HTML über pdf / doc / docx / odt zu verwenden, ist, dass HTML nicht für den Druck konzipiert ist, wohingegen pdf / doc / docx / odt alle (und daher nicht für das Screenreading optimiert) sind. Außerdem ist HTML ein vollständig akzeptierter und offener Standard, der von den genannten Formaten nicht gesagt werden kann (odt ist offen, aber nicht allgemein akzeptiert).

Antworten:


7

Das Einbetten von allem in eine normale HTML-Datei ist der richtige Weg. Hast du jemals TiddlyWiki gesehen ? Ich glaube, ich habe gesehen, dass es als "Einzelseitenanwendung" bezeichnet wird - alles ist in eine HTML-Datei eingebettet, sodass es (fast) als eigenständige Software fungiert. Ich benutze es nicht, aber ich finde es technisch ziemlich beeindruckend.

Bilder können mithilfe der Base64-Codierung mithilfe eines Daten-URI inline eingefügt werden. Die Unterstützung in Internet Explorer 8 ist jedoch nicht vollständig (es gibt eine Größenbeschränkung für IIRC), und die Unterstützung fehlt in älteren IE-Versionen vollständig. Die meisten anderen modernen Browser bieten gute Unterstützung.

Beachten Sie, dass dies im Allgemeinen die Größe des Bildes um etwa ein Drittel erhöht (da Sie nur 6 von 8 Bits pro Byte "verwenden" und daher ein Drittel mehr Bytes verwenden müssen, um diese Lücke auszugleichen).

Zum Beispiel erhalten Sie so etwas:

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

Oder dieses:

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

Vielleicht möchten Sie auch den Wikipedia-Artikel über Daten-URIs lesen, der Kommentare zur Browserunterstützung und einige Verwendungsbeispiele enthält.


Gibt es Werkzeuge (Edelsteine, Eier, Knotenpakete usw.), die das Konvertieren und Einschließen übernehmen? Gibt es ein Tool, das JS und CSS dort einbindet, wo es ein src="..."oder href="..."Attribut sieht ? Und dann Bilder zu Base64 konvertieren und ersetzen die <img src="..."mit <img src="data:image/..."?
Sukima

Ich habe keine Ahnung, ich habe noch nie versucht, so etwas zusammenzufassen, um jemals nachsehen zu müssen.
DMA57361

3

Ich denke, das MHTML-Format (MIME HTML) (.MHT-Dateierweiterung) ist wahrscheinlich das, wonach Sie suchen. Dadurch wird alles in eine einzelne Datei eingebettet (ähnlich wie bei einer HTML-E-Mail). Bilder usw. sind mit Base64-Codierung eingebettet.

Browser-Unterstützung ist angemessen. IE und Opera können MHT-Dateien speichern und anzeigen. Im IE einfach "Speichern unter ..." und "Webarchiv, einzelne Datei (* mht)" auswählen. Für Firefox und Chrome sind jedoch Browsererweiterungen erforderlich.

Persönlich würde ich wahrscheinlich den HTML-Inhalt auf eine Website hochladen (möglicherweise passwortgeschützt) und nur den Link verteilen. MHT-Dateien können nicht genau vom Benutzer bearbeitet werden. Sie müssen daher neu generiert werden, wenn Sie sie verteilen möchten. Ist alles, was zu einer MHT-Datei zusammengefasst wurde, immer noch so zugänglich wie HTML?

PDF ist einigermaßen zugänglich. Es verfügt über eigene Bildschirmlesefunktionen. Sie sind sich nicht sicher, wie es mit Bildern umgeht - es sei denn, Sie erstellen dies mit einem bestimmten Tool?


Abgesehen von den technischen Anforderungen gibt es auch eine organisatorische Anforderung, nicht mit einem proprietären Standard zu arbeiten (PDF kann offen sein, es ist immer noch proprietär). Ich werde mich allerdings mit HTML befassen.
user45971

Siehe tools.ietf.org/html/rfc2557 . Es ist ein offener Standard. Es hat mich überrascht, dass IE eine bessere Unterstützung hatte als Firefox (letzteres bevorzugt sein eigenes proprietäres Format), aber da haben Sie es. Es gibt wahrscheinlich eine bessere Tool-Unterstützung für PDF- oder HTML + -abhängigkeiten.
Iiridayn
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.