Prezentácia v Opere - projection

Vedeli ste, že Opera môže zobrazovať prezentáciu, ktorá je vytvorená iba v rýdzom XHTML a CSS kóde? Áno, aj toto je jedna z jej skvelých vlastností. XHTML/CSS sa môže zdať, ako extrémne riešenie a možno by ste radšej použili OpenOffice.org Impress, či Microsoft PowerPoint. Tí, ktorí sú zručnejší a nechcú iba klikať, si môžu napísať vlastné CSS a využiť v ňom selektor page-break-after a ním definovať jednotlivé stránky prezentácie. Zároveň zistia, že takéto prezentácie prinášajú mnoho výhod - sú veľmi dobre prenositeľné, pretože si ich môžete jednoducho nahrať na internet a premietať kdekoľvek, kde je pripojenie, projektor a Opera. Pre uľahčenie tvorby prezentácií skúste program QuickShow. Odkazujú naň aj na oficiálnej stránke Opery. Z môjho pohľadu je zbytočný (neskúšal som ho). Všetko si radšej radšej napíšem ako stránku v normálnom editore. Predtým, než sa do niečoho pustíte, prečítajte si aj Opera Show Documentation , kde sa dozviete nové metatagy spojené s prezentáciou.

Môj príklad prezentácie (CSS)

/**
 * Element <div class='onscreen'> sa bude
 * zobrazovať pri normálnom prehliadaní stránky,
 * teda nie pri prezentácií. 
 */
div.onscreen { display:block; padding:10px; }
div.onscreen kbd { font-weight:bold; color:blue; }

/**
 * Prezentácia bude používať element <div class='page'>,
 * ktorý pri media type screen nebude zobrazený  
 */
@media screen {
  div.page { display:none; }
}

/**
 * Pri aktivovanej projekcií sa element <div class='onscreen'>
 * skryjte a element <div class='page'> naopak zobrazí   
 */
@media projection {
  div.onscreen { display:none; }
  div.page { page-break-after:always; padding:10px; text-align:justify; }
  div.page:last-child { page-break-after:avoid; }
  div.page div.projector { display:block; width:250px; height:160px; background:url('projection.png') top right no-repeat; float:right; }
  div.page ol { list-style-type:none; }
  div.page ol li { font-size:16px; border-bottom:3px solid olivedrab; background:yellowgreen; padding:6px 10px 6px 10px; margin:10px 250px 10px 0; }
  div.pagenum { display:block; font-size:25px; color:midnightblue; border-bottom:1px solid black; margin:0 0 10px 0; }
}

XHTML kód nemá zmysel zobrazovať. Prezrite si ho v tomto príklade. Všetko som testoval v Opera 9.5 beta.

Odkazy

• Opera Show Tutorial (skúste na tejto stránke stlačiť F11)
• Použitie page-breaks podľa W3C
• Opera Show Generator