HTML5 is het buzzwoord, Flash is vies en de <video>-tag is de toekomst. Heel goed, Steve kreeg zijn zin. Nu de uitvoering nog. Die brengt vaak toch issues met zich mee. Zoals dat het ene platform/browser de ene codec ondersteund, het andere platform weer wat anders. Zoek maar eens op Google en je zult zien dat het een groot feest is.
Helaas ben ik er toch al meermaals tegenaan gelopen dat het allemaal net iets moeilijker gaat dan je zou verwachten. Dit wordt met name veroorzaakt door de aanwezigheid van mobiele devices en tablets. Reden dus om het eens verder uit te zoeken te te kijken waarom andere oplossingen zoals "Video for Everybody!" toch niet altijd werken.
Aan de slag
Aan de slag dan maar. Gelukkig is het meeste nu wel uitgedacht en geïmplementeerd (in HTML5). De video-tag in zijn simpelste vorm is als volgt:
<video src="hippevideo.mp4" controls />
Helaas, je bent er nog niet. Zo hebben met name mobieltjes nog wel eens moeite met bepalen hoe ze een MP4-bestand moeten afspelen, zelfs als de benodigde codes gewoon worden ondersteund. Dit is gelukkig eenvoudig op te lossen door zelf te benoemen welk type en vooral welke codes worden gebruikt:
Zijn we er dan? Nee. Een ander probleem is dat de verschillende browsers en devices verschillende formaten ondersteunen. Het formaat hierboven, MP4, maakt gebruik van gepatenteerde codecs. Om die reden wordt dit formaat niet ondersteund door Firefox en Opera. Ook Google geeft hier geen voorkeur aan.
Tot ongeveer een jaar geleden was het alternatief OGG. Deze codec werd wel door Chrome, Firefox en Opera ondersteund, maar over het algemeen is de mening dat de beeldkwaliteit bij dezelfde bestandsgrootte net wat minder is dan MP4. En nog wat diplomatieke redenen. Safari en Internet Explorer ondersteunen echter weer geen OGG.
Google heeft daar een oplossing voor gekocht en beschikbaar gesteld: WebM. Deze standaard doet niet onder voor MP4, maar er rusten geen patenten op. Helaas voor alle sitebouwers, Safari en Internet Explorer ondersteunen WebM (nog) niet. Net als verschillende mobiele devices.
Dus wat nu
Dus wat nu? Nu weten we dat er ten minste twee formaten nodig zijn: MP4 en WebM. Eventueel aangevuld met OGG. Hoe?
Nu wordt het allemaal al een stuk completer. Ten eerste zijn er meerdere videoformaten beschikbaar. Praktisch hierbij is om als eerste MP4 aan te bieden. Met name de mobiele apparaten hebben hier profeit van. In sommige gevallen is dit zelfs noodzaak. In sommige gevallen kan het namelijk zijn dat de audio in het bestand wel wordt ondersteund en de video niet. In dat geval zal toch de video worden afgespeeld met slechts deels ondersteuning terwijl een ander format wellicht wel geheel wordt ondersteund.
Sinds een paar maanden wordt er ontwikkeld aan een WhatsApp client voor de Nokia N9, N950 en N900. Er zijn een paar initiatieven geweest, waarover ik ook eerder schreef. Maar de ontwikkeling van Wazapp lijkt de meeste potentie te hebben. Helaas werd de ontwikkelaar Tarek Galal (@tgalal) de laatste tijd uitgemaakt voor een neppert in de Developer thread op TMO. Om een eind te maken aan deze beschuldigingen heeft hij een video online gezet om te laten zien hoe ver hij inmiddels is met de ontwikkelingen.
Ubuntu is op weg naar haar volgende release: 12.04. Dit is weer een zogenaamde LTS release, een Long Time Service release. Het voordeel van de LTS releases is, dat hier langer support op wordt gegeven dan op de reguliere releases. Maar voor dagelijks gebruik is er weinig reden om niet elk half jaar een upgrade uit te voeren.
Nu is het een kwestie van wachten tot de release daar is. De laatste beta is inmiddels gaande, dus als je al wilt zien hoe het gaat worden, dan kun je deze downloaden op ubuntu.com. Net als andere jaren heeft Ubuntu weer een aantal banners beschikbaar gesteld ter promotie van de release, de Ubuntu Countdown Banners.
Ajax Showtime (AS) is een onafhankelijke website over voetbalclub Ajax dat in 2001 het licht zag. De site is in 9 jaar uitgegroeid tot de op een na best bezochte website over Ajax. De nadruk ligt op het publiceren van actueel nieuws middels tekst, foto en video.
Mijn NokiaN9 doet de laatste tijd een beetje vreemd. Reageert soms wel, soms niet. Heeft grote moeite met het installeren van nieuwe apps in de Nokia Store. Slaagt er totaal niet in om te zoeken naar nieuwe updates. En notificaties van Twitter en Facebook doen het eigenlijk alleen direct na een herstart.
En dat alles na de installatie van PR1.2. Met andere woorden, daar lijkt iets niet helemaal goed gegaan. Dus wat doe je?
Terug naar af, ofwel Factory reset
De meest voor de hand liggende stap is herstellen naar fabrieksinstellingen. Sommige Nokia'rs herkennen hier een #*7370# in. Behalve dan dat je op de N9 iets anders te werk gaat. Ga naar Instellingen, Herstellen, Apparaat wissen. Dit doe je natuurlijk pas nadat je een hele goede backup hebt gemaakt.
Lang verhaal kort, als dit niet werkt baal je. Dat is bij mij dus het geval. Na een keer of wat deze procedure uitvoeren is mijn toestel eindelijk leeg, maar vertoond ook vreemde bijwerkingen. Ik kan niet meer scrollen op mijn launcher-homescreen. Da's niet handig kan ik je vertellen.
Mozilla, voor velen vooral bekend om hun browser Firefox, timmert hard aan de weg aan allerlei interessante diensten en producten. Een daarvan is Mozilla Boot to Gecko. Dit is een 'schil' voor mobieltjes, geheel in webtechnieken zoals HTML5, CSS en Javascript geschreven.
Op het MWC werd hiervan een handson demo gegeven. Het ziet er veelbelovend uit.
Voor een project zijn we op zoek naar een hip en blij geanimeerd loading plaatje. Als je niet zelf helemaal los wilt gaan in Photoshop kom je vrij snel uit bij het zeer handige ajaxload.info. Hier kun je snel en eenvoudig je animated gifs bouwen waarbij je zelf de voorgrondkleur en achtergrondkleur opgeeft. En kunt kiezen uit iets van 30 verschillende animaties.
En wat betreft ons project? Daar hadden we deze voor nodig:
Geloof het of niet, maar binnen het design van ons project, is dit een hele mooie :-)
Binnen CSS zijn er allerlei manieren om elementen te stylen, daar dient het voor. Een class hier, een id daar en je kunt helemaal los gaan. Maar dat is niet altijd nodig. Door slim met je code om te gaan kun je ook op andere manieren elementen beïnvloeden.
De + selector
De + selector stelt dat als element b direct na element a komt in de HTML, de CSS regel geldt.
Neem het volgende stukje HTML:
<p>Some irrelevant text</p>
<span>I will be red</span>
<span>I won't be red</span>
En de volgende CSS:
p + span {
color: red;
}
In dit geval wordt de eerste <span> rood, deze volgt namelijk direct op de <p>. De tweede <span> blijft ongewijzigd. Bekijk het resultaat in jsFiddle.
De > selector
De > selector stelt dat als element b in de HTML direct binnen element a valt, de CSS regels gelden.
Neem het volgende stukje HTML:
<p>
<span>I will be red<br />
<strong>I won't be green</strong>
</span>
<span>
I will be red too
</span>
<strong>I will be green</strong>
</p>
En de volgende CSS:
p > span {
color: red;
}
p > strong {
color: green;
}
In dit geval wordt de <span> in de <p> rood, maar de <strong> in de <span> niet groen. De <span> zit namelijk wel direct binnen de <p>, maar de <strong> niet. Bekijk het resultaat in jsFiddle.
De lijst met interessante boeken van A List Apart voor Frontend Developers blijft groeien. Kennelijk is daar ook alweer een tijdje het boek "Responsive Web Design" te krijgen.
Dit boek besteed aandacht aan een steeds belangrijker wordende discipline binnen webdesign, de grotere verscheidenheid in scherm en device. Uitgaan van IE6 en een resolutie van 800 bij 600 pixels is al jaren niet meer de realiteit. Maar het klopt ook niet meer om te werken vanuit een resolutie van 1024x768 en Firefox. Nee, de opkomst van smartphones en tablets maakt het ontwikkelen een stuk complexer. Zie daar Responsive Web Design.
From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs. Ethan Marcotte will explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display.
Koop het boek via A Book Apart of lees de PDF via LiteTune. Jaja, downloaden kan ook zonder toegang tot Piratebay.org.
Update: Het is blijkbaar toch nog mogelijk om python2.6 te installeren in Ubuntu 11.10. Daarna kun je de Unified Installer vertellen dat je die python wil gebruiken.
sudo apt-get install python2.6-dev
Een nieuwe versie van Ubuntu, een nieuwe dag issues met Plone :-(
Aangezien ik Plone issues tegenwoordig niet meer met directe collega's kan oplossen, duren ze soms ook wat langer. Zo had ik nu te maken met een Python 2.6 issue op Ubuntu 11.10.
Hoe dan ook moet je je installatie voorbereiden met een aantal packages:
Ik volg niet altijd wat er nu goed of fout gaat, maar uit de beperkte doch zinnige resultaten op Google kan ik wel opmaken dat het komt doordat de installatie van Python2.6 zoekt naar libraries op bepaalde paden i.p.v. dit te 'vragen' aan het systeem. Of dit in volgende versies nu is gefixed door in nog meer paden te kijken of daadwerkelijk te vragen weet ik niet, maar in Python 2.6.x is het niet opgelost.
Download en pak de Unified installer uit (als je dat nog niet had gedaan). Open de directory.
cd packages
tar xfj Python-2.6.7.tar.bz2
wget http://hg.python.org/cpython/raw-rev/7582a78f573b
cd Python-2.6.7
patch < ../7582a78f573b
cd ..
mv Python-2.6.7.tar.bz2 Python-2.6.7.tar.bz2.orig
tar cfj Python-2.6.7.tar.bz2 Python-2.6.7
HTML5 is het buzzwoord, Flash is vies en de 
Sinds een paar maanden wordt er ontwikkeld aan een WhatsApp client voor de Nokia N9, N950 en N900. Er zijn een paar initiatieven geweest, waarover ik ook eerder schreef. Maar de ontwikkeling van Wazapp lijkt de meeste potentie te hebben. Helaas werd de ontwikkelaar Tarek Galal (
Mijn 
De lijst met interessante boeken van A List Apart voor Frontend Developers blijft groeien. Kennelijk is daar ook alweer een tijdje het boek "Responsive Web Design" te krijgen.