Pojedynczy plik HTML + CSS + JS + obrazy


8

Czy istnieje format pliku, który integruje całą treść HTML w jednym pliku?

Zamiast doc, docx, odt lub pdf chcę używać dokumentów HTML5 do tworzenia moich treści. Ale to stanowi problem, gdy chcę wysłać pliki HTML na przykład pocztą elektroniczną; Musiałbym go skompresować, a następnie dołączyć do wiadomości e-mail. Oczywiście jest .lit i .chm, ale z oczywistych powodów nie jest to właściwy sposób. Możliwe jest również wstawianie kodu javascript i CSS w plikach HTML. Ma to również wadę: obrazy są nadal wykluczone, a osadzanie wszystkich zewnętrznych plików CSS i Javascript w jednym pliku HTML jest uciążliwe. Narzędzia mogą to zautomatyzować, ale problem z obrazem nadal istnieje.

Najważniejszą motywacją do korzystania z HTML zamiast pdf / doc / docx / odt jest to, że HTML nie jest przeznaczony do drukowania, podczas gdy pdf / doc / docx / odt wszystkie są (a zatem nie zoptymalizowane pod kątem screenreadingu). Ponadto HTML jest w pełni akceptowanym i otwartym standardem, którego nie można powiedzieć o nazwanych formatach (odt jest otwarty, ale nie jest powszechnie akceptowany).

Odpowiedzi:


7

Osadzanie wszystkiego w normalnym pliku HTML jest dobrym rozwiązaniem. Czy kiedykolwiek widziałeś TiddlyWiki ? Myślę, że widziałem to jako „aplikację pojedynczej strony” - wszystko jest osadzone w jednym pliku HTML, więc działa jako (no prawie) samodzielne oprogramowanie. Nie używam tego, ale myślę, że jest to technicznie całkiem imponujące.

Obrazy mogą być dołączane wbudowane przy użyciu kodowania base64 przy użyciu identyfikatora URI danych. Ale wsparcie w Internet Explorerze 8 nie jest kompletne (istnieje limit wielkości IIRC), a wsparcie całkowicie brakuje w starszych wersjach IE. Większość innych nowoczesnych przeglądarek ma dobre wsparcie.

Zauważ, że ogólnie zwiększy to rozmiar obrazu o około jedną trzecią (ponieważ „używasz” tylko 6 z każdych 8 bitów na bajt, więc musisz użyć jeszcze jednej trzeciej bajtów, aby dostosować się do tej przerwy).

Na przykład dostajesz coś takiego:

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

Albo to:

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

Możesz także przeczytać artykuł w Wikipedii na temat URI danych , zawiera on komentarze dotyczące obsługi przeglądarki i kilka przykładów użycia.


Czy są jakieś narzędzia (klejnoty, jajka, pakiety węzłów itp.), Które obsługują konwersję i włączenie? Czy istnieje narzędzie, które wstawi JS i CSS tam, gdzie widzi src="..."lub href="..."atrybut? A następnie konwersję obrazów do base64 i wymienić <img src="..."z <img src="data:image/..."?
Sukima,

Nie mam pojęcia, nigdy nie próbowałem zawijać czegoś takiego, aby kiedykolwiek musiałem poszukać.
DMA57361,

3

Myślę, że format MHTML (MIME HTML) (rozszerzenie pliku .MHT) jest prawdopodobnie tym, czego szukasz. To osadza wszystko w jednym pliku (podobnie jak wiadomość e-mail w formacie HTML). Obrazy itp. Są osadzone z kodowaniem base64.

Obsługa przeglądarek jest rozsądna. IE i Opera mogą zapisywać i wyświetlać pliki MHT. W IE wystarczy „Zapisz jako ...” i wybrać „Archiwum sieciowe, pojedynczy plik (* mht)”. Jednak Firefox i Chrome wymagają rozszerzeń przeglądarki.

Osobiście prawdopodobnie przesłałbym treść HTML na stronę internetową (prawdopodobnie chronioną hasłem) i po prostu rozpowszechniłem link. Pliki MHT nie są w pełni edytowalne przez użytkownika, więc wymagają regeneracji, jeśli chcesz je rozpowszechniać. Czy po połączeniu wszystkich elementów w plik MHT jest on tak samo dostępny jak HTML?

PDF jest łatwo dostępny. Ma własne możliwości odczytu ekranu. Nie wiesz jednak, jak obsługuje obrazy - chyba że możesz to zrobić za pomocą konkretnego narzędzia?


Oprócz wymagań technicznych istnieje również wymóg organizacyjny, aby nie współpracować z żadnym zastrzeżonym standardem (pdf może być otwarty, nadal jest zastrzeżony). Zajrzę do mhtml.
user45971,

Zobacz tools.ietf.org/html/rfc2557 . To otwarty standard. Zaskoczyło mnie, że IE ma lepsze wsparcie niż Firefox (ten ostatni woli własny format), ale masz go. Prawdopodobnie jest jednak lepsza obsługa narzędzi dla zależności pdf lub HTML +.
Iiridayn
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.