Ako vytvoriť elektronický magazín s listovaním strán pomocou turn.js

Zadanie znelo jasne: normálna web stránka tadiaľto neprejde. Zadržte každú stránku a zobrazte ich s efektom listovania reálneho časopisu.

Je to proti prírode. Čo si budeme nahovárať. Webstránky sú prirodzene neobmedzované desktopom obrazovky. Takže viditeľná časť, viewport, nie je ohraničené ihrisko. A to sa nám snažia nahovárať rôzne marketingové ale aj programátorské názory. Plagátikoidné nezmysly bez obsahu asi áno. Lenže ak máte obsah, kladiete dôraz naň a nekladiete umelé prekážky, či už delením obsahu na dieliky. Iná otázka je správne štrukturovanie obsahu, správne formulovanie, kompresia a odrezávanie sena.

Poďme však k veci. Jedného pekného dňa k vám príde požiadavka, že ten obsah musíte na obrazovke v prehliadači prezentovať ako časopis. Listovateľné strany. Toto totálne obracia všetko, čo sa ujalo pri tvorbe webu. Nie celkom, technicky ani veľmi nie. No na obsah sa začínajú uplatňovať ďalšie silne obmedzujúce kritéria.

Kecy máme za sebou. Prijali sme fakt, že chceme bežný HTML dokument s obsahom pretransformovať, čo najmenej bolestne, do listovateľnej vizuálnej podoby.

Nemusíte sa priveľmi trápiť. Všetko, čo potrebujete je knižnica turn.js a kopec schopností pracovať s HTML, CSS a samozrejme s JAVASCRIPTOM. Skúsenosti s jQeury sú vítane. To na základ postačí.

Turn.js si stiahnete z webu a môžeme začať.

Princíp je jednoduchý. Musíte HTML kód s obsahom upraviť a rozdeliť tak, aby knižnica rozpoznala, čo je ten váš objekt „časopis“ a čo v ňom je „stránka“.

[code]
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>
[/code]

Ako vidíte z veľmi zjednodušeného príkladu, tak objekt časopisu je obaľovací DIV s idčkom flipbook. V ňom je len sled DIVov, ktoré reprezentujú samotné stránky „časopisu“. Všetko vnútri nich bude teda v obdĺžniku časopisu. Toto nám všetko pekne nahráva, pretože kreativita vo vizáži stránok spočíva len v našich schopnostiach dobre kódovať HTML a CSS, prípadne samozrejem nejaké tie výtvarné schopnosti neobmedzované neschopnosťou čosi nasekať v grafickom editore.

Určite ste si všimli krátky javascript. Ním sa „nakopne“ knižnica turn.js, aby rozožrala HTML kód dokumentu a miesto neho vyobrazila daný objekt ako časopis.

Nie je to však všetko. Príklad nemá:

• Hlavičku HTML s vloženými kódmi knižníc
• Všetky vhodné parametre turn.js pre reálne využitie
• neriešime veľkosti, schopnosti rôznych prehliadačov
• neriešime prisposobenie malým obrazovkám a Internet Exploreru…

Nechce sa mi podrobne opisovať použitie knižnice, bolo by to na dlho a dokumentácia turn.js je skoro dostatočná – v reáli prídete na to, že veľa detailov nerieši a musíte sa obrátiť Googlom na vývojárske weby s ukážkami riešení.

Poviem teraz pár tipov z konkrétneho riešenia.

Turn.js je masívna vec a pokusy použiť ďalšie knižnice môžu stroskotať v tom, že pôjdu principiálne alebo len nepochopiteľne dokopy. Hodne problémov budete mať všade, kde sa operuje s z-index, potom teda so všetkými vychtanými pseudotooltipmi, fullscreen a modálnymi okienkami, javascriptovými vizuálnymi objektami.

Prekvapivo dobre však pokryjete Internet Explorer, čo je dobrá správa. Dokonca s danými obmedzeniami grafického rozletu samotnej knižnice sa s tým dá v pohode žiť.

Pomerne ťažko sa rieši banálna vec. Rozmery. Vzdajte to a choďte do fixného rozmeru. Obsah je totiž textový a nedokážem si dobre predstaviť ako by ste to rozumne vyriešili, aby text nevytekal.

Zásadný problém týchto riešení je predstava ľudí, ktorí majú tento nápad, je že vnímajú reálne časopisy a neuvedomujú si zásadnú vec. Roztvorte si časopis, položte ho na obrazovku svojho počítača. Ak nie ste majiteľ peknej 27″ky, časopis bude o niečo väčší.

Grafici vedia, že tá „troška“ dokola je v percentách strašne veľké číslo.

Laik reaguje, že to proste „zmenšíme“. A neuvedomí si, že buď zmenším veľkosť písma.

Laik nechápe. Nevie si to predstaviť. Tak mu prácne namaľujete stránku, s písmom, ktoré je zmenšené z veľkosti pôvodného papierového časopisu. Vy dopredu viete, čo tvrdíte, laik to musí vidieť, aby zistil, že ZMENŠENIE ZNEČITATEĽNÍ TEXT.

Mykne plecom a že to nevadí. V skutočnosti to zmenšenie pre obrazovku skráti kapacitu textu stránky tak výrazne, že až vtedy prestane chápať. Vyrobte teda tabuľku kapacity znakov pre nové stránky.

Vopred si vyrobte základné layouty stĺpcov stránok. Hodne to pomôže a zároveň pri tvorbe obsahu bude jeho autor vedieť, aký má limit.

Ja som vytvoril okolo desať rôznych rozložení (rozdelení) stránok na plochy. Podľa mňa sa ďalej ako na dva stĺpce textu vedľa seba nikdy nedostanete.

Veľkým problémom je (hlavne pre ľudí od DTP) pochopiť, že v tomto riešení nedokážete spraviť pretekanie textu do stĺpcov.

To zároveň mení spôsob nalievania obsahu na stránky. Ak máte stránku s dvomi stĺpcami, proste nie sú nijako prepojené a obsah musíte rozdeliť aj fyzicky.

Problémom totiž je, že síce existuje javascript knižnica, ktorá to môže nasekávať ale v IE a v turn.js funguje proste ZLE.

Efekt na oči laikov je v takýchto weboch s turn.js vysoký, dokonca sa dajú vyrobiť nádherné vizuálne skvosty – čo sa nám aj podarilo.

Musíte však pamätať na to, čo treba vedieť ako prvé – pocit z listovania reálnym magazínom ale aj jeho hodnotu nikdy nevyriešite listovaním po obrazovke. Je dobre zvážiť aj fakt, že proste s listovaním končíme a prejdeme na elektronizované magaíny ale fungujúce podľa pravidiel tvorby webu.