Slideshows in HTML en CSS

De informatie in dit artikel is mogelijk verouderd.

Een presentatie maken in HTML en CSS. Je hebt er vast ook al van gedroomd. Misschien heb je al eens een Powerpoint presentatie geïporteerd naar html. Als nieuwsgierige webdeveloper keek je dan naar de code om er plots een groene uitslag van te krijgen. Er is gelukkig een alternatief: Opera Show, S5 en meer.

Opera Show

Je weet ongetwijfeld wat een print CSS is. Het is CSS die enkel van toepassing wordt in afdruk modus. Opera kent naast deze modus ook een handheld modus (SHIFT + F11) om pagina's weer te geven zoals in Opera-mini, en een projectie- of volledig scherm modus (F11).

Iedere modus kan zijn eigen css krijgen, een voorbeeldje:

p {color: #00F;}
@media print { /* Enkel print modus */
	p {color: #000;}
}
@media projection { /* Projectie modus */
	p {font-size: xx-large;}
	div.slide {page-break-after: always;}
}

Tekst binnen p-tags is rood gekleurd. In print modus wordt deze zwart. In projectie modus blijft de tekst rood maar krijgt een grotere letter. Na het sluiten van een div met class="slide" wordt er een nieuwe slide begonnen.
Meer uitleg + werkend voorbeeld.

De projectie modus wordt jammer genoeg alleen door Opera ondersteund. Het lijkt mij nochtans geen grote moeite om dit in de Gecko engine toe te voegen aangezien deze print modus en css2 ondersteund.

S5 of Simple Standards-Based Slide Show System

Gelukkig zijn er projectjes zoals S5 die het nut ingezien hebben van presenteren met XHTML. S5 lijkt op een uitbreiding voor Opera Show. Het verschil is dat er javascript is aan toegevoegd. Deze brengt verbeteringen van het concept en min of meer cross-browser compatibiliteit. HTML Slidy gemaakt door het W3C werkt gelijkaardig en er zijn vast nog meer alternatieven.

Hopelijk worden deze tools beter, populairder en komen er goede WYSIWYG applicaties om XHTML slideshows te maken.

Update: ZohoShow is een online slideshow tool. Je kunt je presentaties opslaan met een account. Het is gebaseerd op S5 maar jammer genoeg incompatibel met Opera.

Gepost: 2006-08-25 22u56


Gelijkaardige posts


Reacties

Er werd nog niet gereageerd.

Reageren op dit artikel is niet meer mogelijk.