Hieronder een mockup van hoe ik graag mijn lockscreen zie, gedoopt: Nativ. Binnenkort te downloaden op MacThemes!

In ieder geval van ‘t weekend m’n iPhone een restore gegeven na de nieuwe software update (Visual Voicemail werkte niet meer dankzij het Tethering Profiel).

Dan maar niet. Downgraden kreeg ik ook niet voor elkaar anders had ik al op 3.0 gedraaid weerd. Maar goed na installatie en restore merkte ik dus ineens dat GoogleMaps wist waar ik zat in Amsterdam (tot 10m nauwkeurig), terwijl ik dus binnen zat.

Dit heb ik nog niet eerder meegemaakt want eerder gaf het ding alleen de stad aan waar ik me bevond. Buiten werkte echter alles wel gewoon perfect dankzij het GPS signaal. Maar binnen heb je dit dus niet. Kennelijk werkt de telefoonmast triangulatie beter of het is gefixt dankzij de update+restore.

Anyway, wellicht de moeite waard als je soortgelijke problemen hebt. Visual Voicemail fix je in ieder geval met een complete restore van je iPhone. Succes

Booktoday.nl biedt zowel goedkope zonvakanties als goedkope wintersport vakanties aan naar alle populaire vakantiebestemmingen. Qua wintersport aanbiedingen is het aanbod zeer breed, bestemmingen als Val Thorens, La Plagne, Châtel, Morzine, Les Arcs, Gerlos, Saalbach/Hinterglemm en Tignes zitten standaard in het assortiment. Genoeg keuze voor de fanatieke wintersporter dus!

De aanbiedingen veranderen dagelijks en zorgen ervoor dat u de beste en goedkoopst mogelijke prijs betaalt voor uw vakantie. Kijk snel voor een goedkope vakantie Spanje, goedkope vakanties in Turkije en goedkope vakanties in Griekenland.

Dus, op zoek naar een zonnige vakantie? En het liefst morgen? Dat kan met Booktoday.nl.

Prijzen voor hotels in Europa daalden met 16 procent, in Noord-Amerika en Azië met 17 procent en in Latijns-Amerika met 18 procent. Marketing manager Bastiaan Ellen van Hotels.com denkt dat de bodem nu wel is bereikt. ,,Hotels kunnen zich niet veroorloven nog meer te dalen in prijs.” De prijzen van de hotelkamers staan nu op het niveau van 2003.

De Russische hoofdstad Moskou voert de lijst aan. Hotelgasten betaalden daar gemiddeld 39 procent minder voor een kamer per nacht dan een jaar eerder. Behalve de crisis heeft de daling te maken met de hoge prijzen in de Russische hoofdstad vorig jaar door een voetbalfinale.

Bron: Noordhollands Dagblad

Hiermee komt Buma/Stemra terug op het plan dat uit 2008 waarin de organisatie melden dat weblogs buiten de regeling zouden vallen.

Dit gaan zij doen door middel van een spider die de audio van deze filmpjes analyseert en herkent. Voor € 130 euro (Exclusief BTW….uiteraard) mag je namelijk 6 embedded files op je blog zetten.

Je ontvangt eerst een brief dat er muziek op jouw website staat en je krijgt de mogelijkheid deze te verwijderen. Of je betaalt natuurlijk.

Deze regeling is bij veel bloggers in het verkeerde keelgat geschoten en daarom is er een online petitie opgesteld om tegen deze regeling te stemmen.

Achja… dan maar een linkje naar het filmpje……. of met robots.txt aan de slag

Kijk! We hebben ook video opname “ge-enabled” en Voice Control! Yeah! Whoooooo alle Applefielen gilden het uit. Eigenlijk is het te belachelijk voor woorden: eerst halen ze een zooi features eruit omdat ze waarschijnlijk geen tijd hebben om het er allemaal in te krijgen (MoSCoW anyone?) en daarna stoppen ze deze features er wél in, maar maken ze tegelijkertijd een nieuwer model met nagenoeg dezelfde hardware om daarna deze features te locken voor de vorige iPhone versie.

Lekker als je een 3G hebt. Wéér geen video opname. Voice Control… goh volgens mij had ik dat ook al op mijn HTC Herald met 30Mhz…. nee zeggen ze bij Apple… dat is ook alleen voor de iPhone 3GS. Ik denk dat ze ook geen tijd hadden om de iPhone 3GS van fatsoenlijke nieuwe features konden voorzien en daarom net als bij de 3G Launch een zooi features hebben uitgezet bij de 3G om vervolgens deze “features” als geweldig en nieuw te introduceren bij de 3GS terwijl deze gewoon hardware matig mogelijk zijn bij de 3G. Maarja… wat voor nieuw product biedt je dan aan he? Dan maar een digitaal kompas erin…

Apple iPhone 3GS - S stands for Speed and Storage was misschien beter geweest. Maarja… wie wil er nog een nieuwe als je oude het ook gewoon nog prima doet he?

Dit komt omdat browsers de beperking hebben maximaal 3 objecten (1 object per connectie) gelijktijdig te kunnen downloaden. Dus iedere keer als er een JavaScript, CSS file of Image moet worden gedownload op je website wordt er hiervoor 1 van de 3 beschikbare connecties gebruikt. Hoe minder objecten (HTTP Request), hoe sneller je website zal laden. Denk hier dus aan bij het bouwen van je website, want deze regel geldt ook voor images die in CSS gebruikt worden. Iedere keer als je dus een background image gebruikt zul je je dus af moeten vragen of je niet beter met HTML kleuren kan werken. Sommige ontwerpers gebruiken images bij het maken van bijvoorbeeld boxjes met een border. Dit is eenvoudig na te bootsen in HTML door een CSS class te maken met de dimensies (width/height) met daar een border element in (border: 1px solid #000000;) bijvoorbeeld.

Tip: Hier is nog een aanvulling op, maar deze is wat prijziger ;). De regel hierboven (van 3 objecten per keer) geldt per server/domein. Je voelt ‘m misschien al aankomen. Sommige websites hebben een aparte media server, deze server is vaak een wat lichtere machine (om het goedkoper te maken) waar alle images, flash, css, javascript en filmpjes vanaf worden geladen. Dit is helaas een prijzigere oplossing die niet 1,2,3 te realiseren is, maar zeker wel een goede tip om te vermelden.

CSS Optimaliseren
Bij de meeste mensen zullen de Cascading Style Sheets (CSS) er ongeveer zo uitzien:

.class1 {
background: #000000;
color: #FFFFFF;
width: 550px;
height; 430px;
margin-left: 130px;
margin-right: auto;
float:left;
}
.class2 {
background: #FFFFFF;
color: #000000;
width: 550px;
height: 430px;
margin-left: 130px;
margin-right: auto;
float:right;
}
.class3 {
background: #FFFFFF;
color: #FF0000;
width: auto;
height: 430px;
clear: both;
}

Hier is niks mis mee, het doet wat het moet doen en zoals je ziet is de code hierboven overzichtelijk en leesbaar. Hier kleeft echter ook een groot nadeel aan, namelijk: white space! Bij het schrijven van tekst is white space wel weer heel belangrijk omdat het de leesbaarheid van de tekst heel erg ten goede komt. Denk hierbij aan letter- en regelafstanden, maar ook aan breaks tussen de zinnen, hoofdstukken en paragrafen. Bij het optimaliseren van je CSS is het belangrijk dat je white spaces juist zoveel mogelijk gaat vermijden.

Ja zul je denken, maar dan zijn m’n stylesheets slecht onderhoudbaar. Ja dat klopt, maar hier moet je weer de balans in zien te vinden. Idealiter (in performance termen dan) zou je CSS code er zo uit moeten zien:

.class1{background:#000000;color:#FFFFFF;width:550px;height;430px;margin-left:130px;margin-right:auto;float:left;}.class2{background:#FFFFFF;color:#000000;width:550px;height:430px;margin-left:130px;margin-right:auto;float:right;}.class3{background:#FFFFFF;color:#FF0000;width:auto;height:430px;clear:both;}

Zoals je kan zien staat alle CSS code op 1 regel. Hier zit hem ook de truc: het maakt een browser namelijk geen fluit uit of alles op 1 regel staat of dat het duidelijk te lezen is hoe en wat je hebt gemaakt in je CSS bestand.

Bovenstaande regel bevat 3 CSS classes, moet je nagaan dat je dit voor 100 classes doet. En dan is dit nog niet eens een extreem voorbeeld van CSS optimalisatie, maar enkel het weghalen van white spaces uit je code. Nu zitten we dus met het probleem van onderhoud. Een stylesheet zoals hierboven deels is weergegeven is dus totaal niet onderhoudbaar. Je zoekt je waarschijnlijk een bult om iets aan te passen en je moet nog heel voorzichtig zijn dat er geen fouten in je CSS sluipen, waardoor je CSS bijvoorbeeld niet meer zal valideren of je de verkeerde elementen aan past. Ik ga meestal voor de gulden middenweg, omdat CSS via HTTP Compression ook kan worden ingepakt en zo klein mogelijk naar de browser wordt verstuurd. Nu is het niet zo dat HTTP Compression maar de ultieme oplossing is voor al je performance problemen. Als je je files nog kleiner maakt, resulteert dat natuurlijk ook weer in een nog kleinere gecomprimeerde file, waardoor alles nog sneller zal worden.

Mijn oplossing is als volgt, zet iedere class op een nieuwe regel:
.class1 { background: #000000; color: #FFFFFF; width: 550px; height; 430px; margin-left: 130px; margin-right: auto; float: left; }
.class2 { background: #FFFFFF; color: #000000; width: 550px; height: 430px; margin-left: 130px; margin-right: auto; float: right; }
.class3 { background: #FFFFFF; color: #FF0000; width: auto; height: 430px; clear: both; }

Dit zorgt ervoor dat je toch al die enters en lege regels vermijdt, maar dat je naar mijn mening toch die overzichtelijkheid blijft houden. Daarnaast zie je dat ik spaces tussen parameters in heb gehouden, dit heeft als reden dat je dan makkelijk dingen kunt selecteren in je editor. Sommige editors selecteren namelijk de complete regel als je dubbelklikt op 1 parameter ergens in die regel, hiermee voorkom je dat dus en kun je dus makkelijk blijven copy/pasten.

Tip 1: Geef in je HTTP Compression module aan dat je ook CSS files gecomprimeerd naar de browser wilt versturen, dit zorgt ervoor dat je CSS files aanzienlijk worden verkleind net als je HTML wat resulteert in een veel snellere laadtijd van je website.

Tip 2: Maak gebruik van overerving van je code. Overerving wil zeggen dat je iets op een zo hoog mogelijk niveau aangeeft in de boomstructuur zodat dit gegeven wordt overgegeven aan alle child classes in die CSS class. In plaats van bijvoorbeeld dit te doen:

.class1 { font-family: Arial, Verdana, Helvetica; font-size: 12px; color: #000000; }
.class2 { font-family: Arial, Verdana, Helvetica; font-size: 12px; color: #FFFFFF; }
.class3 { font-family: Arial, Verdana, Helvetica; font-size: 12px; color: #FF0000; }

De code hieronder is a) sneller om te maken en b) veel compacter omdat je maar 1 keer font-family en font-size gebruikt i.p.v. 3 keer.

body { font-family: Arial, Verdana, Helvetica; font-size: 12px; }
.class1 { color: #000000; }
.class2 { color: #FFFFFF; }
.class3 { color: #FF0000; }

Class 1, 2 en 3 zullen nu de font-family en font-size overerven van de body. Dit betekent dat de gehele body overal en altijd dezelfde font-family en font-size zal vertonen. Dus als je dit wilt overschrijven moet je dit binnen de div, span of font tags via een class of id (of style tag) doen. Nu moet je dit voorbeeld niet nemen in de zin van als je dit 1x in je code zou doen, je moet ervan uit gaan dat je dit wel 300x vermijd)t.

Tip 3: Indien je meerdere stylesheets gebruikt (stel je hebt een heleboel verschillende templates met veel CSS code) kun je deze aan elkaar hechten(stitchen in het Engels) via bijvoorbeeld PHP. Wat je dan doet is je CSS netjes maken (zoals hierboven beschreven) en een nieuwe PHP file aanmaakt in dezelfde map als je CSS files. Noem deze file bijvoorbeeld homepage.php. Wat je in deze PHP file aangeeft is het volgende:

<?
include(”header.css”);
include{”fonts.css”);
include(”color.css”);
include{”navigation.css”);
include{”homepage.css”);
include{”footer.css”);
?>

Dit zorgt ervoor dat je de “objecten” (zoals bij “Beperk het aantal HTTP Requests” is beschreven) terugbrengt van 6 naar 1. Dit betekent dat de browser van je bezoeker dus veel sneller je CSS heeft ingeladen dan dat je ze allemaal apart zou includen via de normale 6 regels:

<link href=”header.css” rel=”stylesheet” type=”text/css” />
<link href=”fonts.css” rel=”stylesheet” type=”text/css” />
<link href=”color.css” rel=”stylesheet” type=”text/css” />
<link href=”navigation.css” rel=”stylesheet” type=”text/css” />
<link href=”homepage.css” rel=”stylesheet” type=”text/css” />
<link href=”footer.css” rel=”stylesheet” type=”text/css” />

De gehechte PHP file include je vervolgens als een standaard stylesheet link, alleen link je nu dus naar de PHP file
in plaats van de CSS. Ditzelfde kun je ook doen met Javascript, al

<link href=”homepage.php” rel=”stylesheet” type=”text/css” />

Afbeeldingen Optimaliseren
Hier gebruik ik zelf altijd Adobe Photoshop voor (net als de meeste mensen). Tegenwoordig maak je een mooi Photoshop documentje van je website alvorens je deze in elkaar bouwt. Je headers, backgroundjes, images met schaduwen etc. knip je los en sla je op als JPEG. De fout die hierbij vaak al meteen gemaakt wordt is dat de images als JPEG 100% quality worden opgeslagen. Dit is alleen nodig als je afbeelding heel veel verschillende kleuren bevat die dicht naast elkaar liggen (Gradients bijvoorbeeld). Je normale afbeeldingen kun je als 60% quality saven want je oog zal geen verschil zien bij foto’s die niet super gedetailleerd zijn. Dit scheelt wel vaak 30 tot 50% van de bestandsgrootte.

Tip: Een truc (of bug) die ik vorige keer heb ontdekt in Photoshop (CS3) is deze. Bewaar je afbeeldingen ALTIJD met “Save for Web”. Ik weet niet waarom dit is, maar als je een afbeelding opslaat met “Save As” is hij op de een of andere manier 2x zo groot dan als je het via “Save for Web” doet. Dit heb ik ondervonden met Photoshop CS3, hoe dit met andere Photoshop versies is weet ik niet (graag reacties indien dit hetzelfde is). Denk je maar eens in dat je 30 images in je design hebt die allemaal een paar kb te groot zijn, vooral op high traffic sites scheelt dit enorm in laadtijd als je deze kostbare kb’s eraf weet te snoepen!

Succes met optimaliseren!