Přejít k navigační liště

Zdroják » Webdesign » Jak vzniká ebook „Vzhůru do CSS3“?

Jak vzniká ebook „Vzhůru do CSS3“?

Články Webdesign

Dnes vám nabídneme technické detaily z tvorby ebooků. Třeba vás inspirujeme k přípravě vlastního.

Nálepky:

Článek původně vyšel na medium.com.

Už je to rok, co vyšel můj ebook o technologiích dnešní webové kodéřiny. Letos jsem také vydal jeho anglickou verzi  — „CSS Mine“.

Nejdřív k formátům, ve kterých se e-knihy vydávají: potřebujete hlavně ePUB pro iOS nebo Android a MOBI pro Amazon Kindle čtečky. Volitelně pak PDF…

Formáty elektronické: PDF musí být

PDF… PDF mě překvapilo! V prvé řadě náročností přípravy, v druhé řadě zájmem ze strany čtenářů.

Oba ebook formáty (MOBI a ePUB) vlastně představují jen specifičtější odrůdu webových technologií HTML a CSS. Jde tedy o volný proud stylovaného textového obsahu.

PDF je formát pevný; má stránky, hlavičky, patičky a podobné srandičky. Ty se v PDF neudělají samy jako v ebook formátech. A musí je do PDF přidat kdo? Ano, my! Proto příprava PDF obnáší daleko, daleko více práce než je tomu u ePUB a MOBI. Pokud s ebooky začínáte, PDF odkládejte nebo prostě vůbec nedělejte.

Mezi webovými vývojáři je o něj ale zájem. Přesné statistiky zatím nemám, ale většina dialogů se čtenáři se točí právě kolem PDF verze.

ePUB a MOBI je určitě dobré mít. Mezi mými čtenáři je o ně menší zájem než o PDF, ale jejich uživatelská báze je v mé cílové skupině nezanedbatelná. A rozhodně poroste, protože oproti PDF mají své výhody.

ePUB je kamarád. MOBI mně nevadí, ale jeho ladění pro všechny možné Kindle čtečky je tak trochu jako když jsem kódoval své první weby koncem devadesátých let. A kodéřina tehdy byla dřina!

Psaní: díky za Markdown!

Texty ukládám v Markdownu Extra. Zkusil jsem hodně možností, ale Markdown vede. Je jednoduchý, široce uznávaný za standard a existuje pro něj řada nástrojů.

Editor Mou. Vzhled náhledu je upravený tak, aby se podobal tomu co uvidíte na webu nebo v eboocích.

Editor Mou. Vzhled náhledu je upravený tak, aby se podobal tomu, co uvidíte na webu nebo v eboocích.

Jako psací editor primárně používám Mou, občas jen Sublime Text s rozšířením Markdown Preview. V případě, že na textu spolupracuji s někým jiným, vezmeme do party Google dokumenty. Odtud jde ale draft textu opět do Markdownu.

Na korekturách nešetřete

Pokud chcete peníze na přípravu ebooku investovat jen do jedné věci, investujte do korektora. Správná gramatika a stylistika je něco, na čem nelze šetřit. Lidé jsou na chyby citliví, zdržují je od čtení a jejich výskyt zbytečně zpochybňuje vaše odborné kvality. Až budete korektora hledat, doporučuji Petra Behúna z Proofreading.cz.

Generování: díky za Pandoc!

Některé texty publikuji na webu a zároveň v ebooku. Než se z Markdown holobrádka stane dospělý článek, jeho HTML kód prochází transformacemi:

Takhle vypadá hlavní zdroják ebooku. Funkci transform() vidět nechcete. Věřte mi!

Takhle vypadá hlavní zdroják ebooku. Funkci transform() vidět nechcete. Věřte mi!

Transformace obvykle k částem článků přidává nějaký HTML kód nebo naopak odstraňuje text, který je vhodný jen pro zveřejnění na webu. Z Mardown zdrojáků se díky PHP transformacím stane HTML soubor s kompletním obsahem ebooku.

Pak přichází Pandoc, výborný meziformátový převodník. V prvé řadě z HTML souboru generuji ePUB. Tenhle formát je dost dobrý začátek, protože s ním moc problémů nebývá a slouží jako zdroj pro ostatní:

pandoc -o vdcss3.epub vdcss3.html src/isbn-epub.html — epub-metadata=src/metadata.xml — epub-stylesheet=../assets/dist/epub.css — epub-cover-image=src/vdcss3-cover.jpg — toc — toc-depth=3

Příkaz vypadá složitě, že? V zásadě ale kromě převodu z HTML do ePUB přidává jen soubor s ISBN číslem, pak metadata s názvem atd., CSS styly, titulní obrázek a nakonec sám vygeneruje obsah (TOC).

První ebook je na světě. Říkal jsem, že ePUB a Pandoc jsou prima? Proto si i MOBI verzi připravuji v ePUB:

pandoc -o vdcss3-for-mobi.epub vdcss3.html src/isbn-mobi.html — epub-metadata=src/metadata.xml — epub-stylesheet=../assets/dist/mobi.css — epub-cover-image=src/vdcss3-cover.jpg — toc — toc-depth=3

Pro převod z ePUB do MOBI pak používám Kindlegen:

kindlegen -o vdcss3.mobi vdcss3-for-mobi.epub

Máme ePUB a MOBI.

Teď ještě to zpropadené PDF

Po zkoušení všeho možného jsem skončil u mPDF, knihovny pro generování PDF z HTML pomocí PHP. (Aby těch zkratek nebylo málo.)

Skript, který PDF vytvoří, má asi 200 řádek, za každou jsou ale hodiny zkoušení a experimentování. Asi jako když se kodér pustí do programování ebooku. Nakonec to PDF ale nevypadá špatně a hlavně je tam potenciál, aby vypadalo ještě lépe.

PDF, ty potvoro jedna!

PDF, ty potvoro jedna!

Prodej a distribuce musí být automatizované

Od doby, co vyšel, si prakticky každý den někdo ebook koupí.

Umíte si představit, že objednávky vyřizujete ručně? Nevím jak vy, já radši stavím hrady z Dupla.

Samozřejmě, že to musí být automatizované. Po vyplnění objednávky se napojíme na Fakturoid, prohodíme přes API pár slov a chvíli se o vás stará on. Vystaví proforma fakturu. Nabídne všechny možné platby včetně platebních karet. Jakmile zjistí, že se platba provedla, dialog se zákazníkem přesměrujeme na FetchApp, přes který se odehrává finální distribuce souborů.

…a po měsíce trvajícím porodu pak íbůček na obrázku vypadá takhle nevinně.

…a po měsíce trvajícím porodu pak íbůček na obrázku vypadá takhle nevinně.

Závěr

To je zhruba vše. Samozřejmě jsem vynechával detaily, ve kterých je zašitá nejedna zajímavá zkušenost. Pokud by vás zajímaly, neváhejte napsat do komentářů nebo na martin@vzhurudolu.cz.

Tak přátelé, už běžíte napsat vlastní ebook? Podívejte se ještě jak jej dělal Michal Kašpárek nebo třeba Marek Prokop. Můžete si také přečíst článek o „byznysovém“ pozadí práce na mém ebooku.

Komentáře

Subscribe
Upozornit na
guest
16 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Já

Na korekturách nešetřete a proto je v článku:

..MOBI m*(N)*ě nevadí.. ? :)

milan.holy

vyzkousej vygenerovat pdf pomoci nodejs (https://github.com/amir20/phantomjs-node) oproti mpdf je to uplne jinde.

Karel

Jelikoz mam vsechny projekty na takovych serverech ke kterym mam plny pristup tak pouzivam wkhtmltopdf – PDF vypadaji stejne jako v Chrome :-)

Jirka Kosek

No právě, že to vypadá stejně jako v Chrome.

Pro generování pořádných PDF z HTML+CSS jsou mnohem lepší nástroje, např. https://www.antennahouse.com/antenna1/formatter/
https://www.princexml.com/
http://www.pdfreactor.com/

Bohužel zatím neexistuje nic pořádného zdarma.

ghibulo

„Proti gustu žádný dišputáát“, ale vytáhnout si z Asciidocu těch pár věcí co Markdown umí stojí pár minut a rozdíly jsou zanedbatelné. Křivka učení tedy prakticky stejně nízká jako u Markdownu a zůstává výhoda možnosti osvojovat si v budoucnosti další věci, které mám v Asciidoc připravené, bez nutnosti „vynalézat kolo“ v podobě „vlastního formátu“

.

tdvorak

Pro méně technicky zdatné by mohla být dobrá alternativa Gitbook. Ať už jen jako toolchain nebo celá platforma. Zdrojový text v markdownu, výstupy do běžných e-book formátů, PDF, HTML. Přizpůsobení pluginy i vlastním CSS a JS.

Tomáš Votruba

Na psaní a rovnou i prodávání knížek přes GIT je skvělý Leanpub – http://leanpub.com.

Skvělou featurou, kterou se liší od ostatních, je „feedback as you write“ od pár čtenářů. Kniha je tedy od začátku směřovaná ke kvalitě.

Jan Pobořil

Zaujalo mě to postavení jednoduchého eshopu pomocí Fakturoidu. Zveřejníš zdrojáky?

Martin Hassman

Já bych radši uvítal rovnou článek 8-)

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.