Pro Geeky se PowerPoint nehodí!

Nastala chvíle odbourat další zlozvyk minulosti. Rozhodl jsem se, že na prezentace už PowerPoint a jemu podobné aplikace nepoužiji. Přemýšlel jsem o tom už nějakou dobu a na poslední Google Group v Pardubicích mě Martin Görner nadchl svou prezentací, která byla postavená nad HTML 5 šablonou původně určenou jako základ prezentací na Google IO 2012. Google IO šablona samozřejmě není v tomto směru nijak unikátní - podobných šablon a "frameworků" existuje na webu celá spousta (určitě musím zmínit ještě velmi pěkně navržený ekosystém Deck.js).

Možná si řeknete, jestli to za tu práci stojí - vytváření prezentace v PowerPointu nebo jiném klikátku musí být přeci jednodušší, ale já si myslím, že dělání šablon v HTML o mnoho složitější není a má celou řadu výhod:

  • prezentaci můžete upravovat v libovolném editoru na libovolném systému
  • prezentaci můžete mít na GitHubu a při tvorbě využívat výhod verzovacího systému
  • prezentaci můžete z GitHubu jednoduše rovnou spouštět
  • prezentace bude funkční na každém počítači s rozumně novým prohlížečem a bude fungovat i na tabletech a mobilech
  • pro tvorbu prezentace používáte svůj skill-set, zase píšete kód
  • tento typ šablony vám dává obrovskou příležitost se učit a zkoušet si parádičky s CSS3 a JavaScriptem
  • je to zábava a je to cool!

Pojďme se podívat co Google šablona umí

Režim přednášejícího

Pokud při spuštění přidáte do url ?presentme=true spustí se prezentace v režimu, kdy v jednom okně prohlížeče uvidíte vlastní prezentaci a v druhém samostatném okně prezentaci s náhledem předchozího a následujícího snímku včetně vašich poznámek pro přednášení.

Ukázka

Poznámky přednášejícího se vkládají v tagu aside:

<aside class="note">
    <section>
        <p>Moje poznámky</p>
    </section>
</aside>

Náhled prezentace

Stiskem tlačítka O se zobrazí náhled všech okolních slajdů s vysvíceným aktuálním snímkem. Pokud se člověk potřebuje rychle přesunout v prezentaci na ten správný snímek je to pomocí tohoto režimu velmi snadné.

Širokoúhlý a standardní režim

Tlačítko F zapíná režim prezentace na celou obrazovku a tlačítko W vypíná širokoúhlý formát do formátu 4:3 (což je na starších promítačkách velmi šikovná věc).

Obarvování zdrojového kódu

Byla by to špatná geekovská šablona, pokud by si neuměla poradit s obarvováním zdrojového kódu. Pro tyto účely se používá JavaScriptová knihovna Prettify.js. Ta podporuje většinu základních jazyků a ve slajdu stačí kód obalit tagem pre:


<pre class="prettyprint" data-lang="javascript/java/html/css/cs"/>

Kromě prostého obarvení kódu je možné ještě zvýraznit některé části pomocí bold tagu a stiskem klávesy H skrýt nepodstatné části zdrojového kódu a zaměřit pozornost diváků na to hlavní.

Obrázky přes celý slajd - hype markeťáků posledních let

Samozřejmostí jsou i celoobrázkové slajdy, kterým jsem osobně zatím nepřišel na chuť. V HTML stačí takovýto slajd označit tímto stylem:


<slide class="fill nobackground" style="background-image: url(images/sky.jpg)"/>

Standardní obrázky

Se vkládají pomocí klasického tagu img s možností použití třídy reflect, která způsobí vykreslení 3D odrazu na podložce.

Element footer pak může obsahovat informaci o zdroji daného obrázku (credits).


<footer class="source">http://www.flickr.com/photos/61444548@N00/110855053/</footer>

Třídy flexbox vcenter na elementu article, pak zajišťují vycentrování obrázku na střed slajdu.

Potenciál komunity a open source

Šablona je jen zdrojový kód, který dokáže rozvíjet každý alespoň trochu znalý JavaScriptu (require.js) a CSS (respektive SASS). Všude možně na webu najdete plno nápadů a skriptů, které vám pomůžou prezentaci zajímavě oživit - jste omezeni jen svou fantazií a znalostí webových technologií.

S ohledem na rozšiřitelnost na například Deck.js nad Google IO šablonou jednoznačně navrch (a také má už řadu rozšíření). Google šablona vám kromě možnosti definovat si vlastní CSS nedává žádný podrobnější návod, kde a jak je možné ji rozšiřovat. Na druhou stranu se mi zdá zase v základu dotažená mnohem dál.

A na závěr poděkování Eriku Bidelmanovi za jeho počin a open-sourcování šablony prezentace, pro mě je příprava prezentace touto technologií zážitek :)

Jak hostovat prezentace z GitHubu

Problém hostování HTML stránek na GitHubu vězí v tom, že standardně se vám zobrazují v RAW formátu, který se neinterpretuje. Pokud budete chvilku Googlit naleznete doporučení na použití HtmlPreview služby, která vám umožní zobrazit libovolnou HTML stránku na GitHubu interpretovaně. Problémem ovšem je, že při použití šablon v tomto "preview" nefunguje režim přednášejícího.

Všechny problémy vyřeší až použití GitHub Pages, které spočívají ve vytvoření speciální branche s názvem gh-pages a pushnutí do GitHub repository. Kompletní návod krok po kroku naleznete zde.

Formát URL na takto hostované prezentace je pak: http://username.github.com/repository

V mém případě tedy: http://novoj.github.io/io-2012-slides/presentations/authorization/authorization-nerddinner.html

Referenční příručka k šabloně

Nastylované tagy a předpřipravené styly:

  • slide
    • fill - vyplnění slajdu bes celou šířku a výšku
    • nobackground - slajd bez pozadí
    • segue - přechodový obrázek
  • article
    • flexbox
    • vcenter - zarovnání na střed
    • vleft - zarovnání doleva
    • vright - zarovnání doprava
    • smaller - zmenšení velikosti písma
  • hgroup - hlavička slajdu
  • h1, h2, h3
  • p, ul, ol, b, a, dl, q
  • table, th, td
    • highlight - zvýraznění konkrétní buňky
  • pre (formátování kódu)
    • prettyprint (+ atribut data-lang)
  • button
  • cokoliv:
    • blue, blue2, blue3 - barevné varianty písma
    • yellow, yellow2, yellow3 - barevné varianty písma
    • green, green2, green3 - barevné varianty písma
    • red, red2, red3 - barevné varianty písma
    • gray, gray2, gray3, gray4 - barevné varianty písma
    • white - barevné varianty písma
    • black - barevné varianty písma
    • build - postupné nabíhání obsahu (platí pro subelementy tagu, na kterém je tato třída)
    • fade - při nabíhání obsahu, starší obsah stáhne do pozadí
    • centered - zarovnání na střed
    • reflect - odraz na podložce
  • aside - postranní box
    • note - poznámky přednášejícího

Mimo výše uvedené je možné na element slide přidat atributy:

  • slideenter
  • slideleave

A do nich uvést JavaScriptovou funkci, která bude zavolána při opuštění nebo naopak vstupu na stránku. V případě, že budete chtít k prezentaci přiliknovat jQuery, je třeba do souboru slides.js přidat novou dependency na stažený jquery.js soubor.