File gambar HTML + CSS + JS + tunggal

8

Apakah ada format file yang mengintegrasikan semua konten HTML itu sendiri dalam satu file?

Alih-alih doc, docx, odt atau pdf, saya ingin menggunakan dokumen HTML5 untuk membuat konten saya. Tapi itu menimbulkan masalah ketika saya ingin mengirim file HTML misalnya melalui email; Saya harus zip dan kemudian melampirkannya ke email. Tentu saja, ada .lit dan .chm, tetapi untuk alasan yang jelas itu bukan cara untuk pergi. Juga, dimungkinkan untuk memasukkan kode javascript dan CSS dalam file HTML. Ini memiliki kelemahan juga: gambar masih dikecualikan, dan menanamkan semua file CSS eksternal dan Javascript ke dalam satu file HTML rumit. Alat dapat mengotomatisasi ini, tetapi kemudian masalah gambar masih ada.

Motivasi paling penting untuk menggunakan HTML lebih dari pdf / doc / docx / odt adalah bahwa HTML tidak dirancang untuk dicetak, sedangkan pdf / doc / docx / odt semuanya (dan dengan demikian tidak dioptimalkan untuk screenreading). Juga, HTML adalah standar yang diterima sepenuhnya dan terbuka, yang tidak dapat dikatakan dari format yang disebutkan (odt terbuka tetapi tidak diterima secara luas).

document-management xhtml pengguna45971
sumber

Jawaban:

7

Menanamkan segala sesuatu dalam file HTML normal adalah cara yang harus dilakukan. Pernahkah Anda melihat TiddlyWiki ? Saya pikir saya telah melihatnya disebut sebagai "Aplikasi Halaman Tunggal" - semuanya tertanam dalam satu file HTML, sehingga berfungsi sebagai (well, hampir) perangkat lunak yang berdiri sendiri. Saya tidak menggunakannya, tapi saya pikir secara teknis cukup mengesankan.

Gambar dapat dimasukkan secara inline menggunakan dalam pengkodean base64 menggunakan URI Data. Tetapi dukungan di Internet Explorer 8 tidak lengkap (ada batas ukuran IIRC), dan dukungan hilang sepenuhnya pada versi IE yang lebih lama. Sebagian besar browser modern lainnya memiliki dukungan yang baik.

Perhatikan bahwa ini umumnya akan meningkatkan ukuran gambar sekitar sepertiga (karena Anda hanya "menggunakan" 6 dari setiap 8 bit per byte, jadi harus menggunakan sepertiga lebih banyak byte untuk mengakomodasi celah itu).

Misalnya, Anda mendapatkan sesuatu seperti ini:

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

Atau ini:

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

Anda mungkin juga ingin membaca artikel Wikipedia tentang Data URI , memiliki komentar mengenai dukungan browser dan beberapa contoh penggunaan.

DMA57361
sumber
Apakah ada alat (permata, telur, paket simpul, dll.) Yang menangani konversi dan termasuk? Apakah ada alat yang akan inline JS dan CSS di mana ia melihat sebuah src="..."atau href="..."atribut? Dan kemudian mengkonversi gambar ke base64 dan ganti <img src="..."dengan <img src="data:image/..."?
Sukima
Saya tidak tahu, saya belum mencoba untuk membungkus sesuatu seperti ini sebelumnya untuk memiliki kebutuhan untuk melihat.
DMA57361
3

Saya pikir format MHTML (MIME HTML) (ekstensi file .MHT) mungkin adalah apa yang Anda cari. Ini menanamkan semuanya dalam satu file (mirip email HTML). Gambar dll. Tertanam dengan pengkodean base64.

Dukungan browser masuk akal. IE dan Opera dapat Menyimpan dan Melihat file MHT. Di IE Anda cukup "Simpan Sebagai ..." dan pilih "Arsip Web, satu file (* mht)". Namun, Firefox dan Chrome memerlukan ekstensi browser.

Secara pribadi, saya mungkin akan mengunggah konten HTML ke situs web (mungkin dilindungi kata sandi) dan hanya membagikan tautannya. File MHT tidak dapat diedit oleh pengguna, jadi diperlukan regenerasi saat Anda ingin mendistribusikan. Setelah semuanya digabungkan menjadi file MHT, apakah masih dapat diakses seperti HTML?

PDF cukup mudah diakses. Ini memiliki kemampuan membaca layar sendiri. Tidak yakin bagaimana ini menangani gambar - kecuali Anda membuat ini dengan alat khusus?

TuanWhite
sumber
Terlepas dari persyaratan teknis, ada juga persyaratan organisasi untuk tidak bekerja dengan standar kepemilikan apa pun (pdf mungkin terbuka, itu masih berpemilik). Saya akan melihat mhtml.
user45971
Lihat tools.ietf.org/html/rfc2557 . Ini standar terbuka. Itu mengejutkan saya bahwa IE memiliki dukungan yang lebih baik daripada Firefox (yang terakhir lebih memilih format miliknya sendiri), tetapi di sana Anda memilikinya. Mungkin ada dukungan alat yang lebih baik untuk dependensi pdf atau html +.
Iiridayn