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: 25 augustus 2006 22u56 | 0 reacties


Terugblik op Pukkelpop 2006

Het zit er weer op, 4 dagen Pukkelpop. Ondanks het voorspelde slechte weer is het al bij al toch een wenselijk weertje geweest. Neem daarbij de groepen die speelden en de gezellige sfeer en ik kom tot een van de leukste dagen van dit jaar.

Ik heb zoveel mogelijk geprobeerd de op voorhand gemarkeerde groepen te gaan bekijken, wat me redelijk gelukt is. De groepen de me het meest bijgebleven zijn voor de donderdag: Infadels, The Knife, DJ Shadow, Radiohead. Radiohead heb ik niet helemaal gezien wegens te vermoeid, maar ik heb kunnen genieten van het eerste half uur. DJ Shadow is ook meegevallen ondanks zijn nieuwe stijl sinds zijn laatste cd. Hij speelde meer van zijn goede oude albums wat het publiek ook meer bleek te smaken. Bij de nieuwe nummers liepen er veel weg uit de tent.

Vrijdag vielen Scissor Sisters, The Raconteurs en uiteraard Massive Attack op. Zaterdag waren 65daysofstatic, Yonderboi, Placebo, en het letterlijk schitterende Daft Punk de betere groepen. Ook HIM en Technasia zijn me opgevallen.

Gepost: 21 augustus 2006 16u45 | 0 reacties


Experimentele Atom newsfeed

Zoals ik eerder beloofde heb ik vandaag een newsfeed voor mijn blog gemaakt. Het is nog experimenteel en daarom is de link voorlopig alleen in deze blogpost te vinden. Het is een Atom newsfeed en er wordt telkens 1 paragraaf van mijn blog in weergegeven in plain/text.

Graag zou ik weten hoe jij het liefst je newsfeeds leest. Volledige tekst in html, of ben je iemand die net als ik steeds naar de site gaat om daar het artikel te lezen.
Mijn keuze om maar een deeltje van mijn blog in de feed te zetten is om je te verplichten naar de site te gaan zodat ik bezoekerstatistieken kan bijhouden. Ook omdat je dan sneller commentaren zal geven en lezen.

Ik moet nog eens verder naar de specificatie kijken om te zien of alles wel juist is en welke regels ik nog moet bijvoegen. Momenteel zijn de datums nog niet helemaal juist omdat mijn blog tabel nog geen voorziening heeft voor tijdszone's. Het zal dus in een van de volgende updates zijn dat ik een definitieve feed zal aanbieden.

Gepost: 6 augustus 2006 17u58 | 0 reacties


Widgets, hype of toekomst?

De informatie in dit artikel is mogelijk verouderd.

Onlangs werd Opera 9 gelanceerd. Een van de meest in het oog springende veranderingen zijn de omstreden widgets. Widgets zijn kleine web applicaties die zonder de GUI van de browser werken.

Screenshot van enkele Opera Widgets

Sinds de laatste jaren verhuizen applicaties steeds meer naar het web. Mail clients worden vervangen door webmail sites zoals Hotmail of Gmail. Bladwijzers worden opgeslagen met diensten zoals del.icio.us en foto's worden bewaard op Flickr om makkelijk te kunnen delen met vrienden. Widgets proberen het gat tussen desktop applicaties en webpaginas op te vullen. Ze worden geschreven in html, css en javascript, net zoals een webpagina, maar worden uitgevoerd als een gewone desktop applicatie.

Yahoo Widgets icoon Opera is niet de eerste die een widget engine aanbied. Google, Apple, Yahoo en Microsoft hebben of plannen ook widgets in hun software. Het jammere is dat elk van hun eigen standaarden gebruikt voor hun widgets. Daardoor zijn ze niet compatibel met elkanders software. Het W3C heeft nog geen specificatie voor web applicaties maar er is wel al een conceptueel document over Web Application Format te vinden.

Wat is het nut nu van widgets? Ze zijn makkelijk te ontwikkelen, meestal is een kennis van html, xml, javascript en css al genoeg. Het is de bedoeling dat de applicaties op ieder platform kunnen werken net zoals JAVA applicaties. Opera heeft al een werkend platform, het Opera Platform, voor mobiele telefoons.

Of widgets echt in de smaak zullen vallen van de gebruikers valt af te wachten. Opera probeert aan de hand van verschillende wedstrijden developers aan te zetten om goede widgets te ontwikkelen. De Widgetize dienst stelt dan weer gebruikers zonder html kennis in staat om eigen widgets te laten generen van een nieuwsfeed van hun blog of een diapresentatie widget te maken van foto's van op een Flickr account. Opera browser met Widget icoon in de adresbalk In de Opera browser kan er via html code een widget icoon in de adresbalk geplaatst worden. Klik je op het icoon wordt de blogwidget waar in de code naar gelinkt wordt gedownload. Het is de bedoeling enkel naar een blogwidget te linken.

Enkele sites waar widgets te downloaden zijn:

Gepost: 5 augustus 2006 01u42 | 0 reacties