Google host een aantal javascript frameworks op google code. Er zijn diverse voordelen om deze frameworks te laden via google dan via je eigen server. (lees verder)

Vandaag even ge-experimenteerd met een (voor mij) nieuwe css-code: Text-overflow. Check hier het voorbeeld.

text-overflow: ellipsis;

(lees verder)

WordPress 2.7 beta 1 is uit. Gisteren op mijn localhost geïnstalleerd en vanavond vluchtig even getest. Wat natuurlijk meteen opvalt is het nieuwe uiterlijk. Het is even wennen, maar éémaal gewend aan de nieuwe indeling werkt het erg overzichtelijk. De buttons staan veel handiger en je komt snel op de pagina’s die je het meest gebruikt. Waar ik gelijk gretig gebruik van maakte was de QuickPress functie op het Dashboard. Hiermee schrijf je snel berichten (ik gebruik dit ook al via 2.6, maar niet vanuit het Dashboard). Er zijn een aantal nieuwe features/verbeteringen die WordPress steeds beter maken. Laat de 2.7 release maar snel komen!

Ik heb 4 CSS menu’s online gezet die handig zijn om als basis te gebruiken. Door op de tekst “download” te klikken download je alleen de betreffende code die bij het menu hoort.

Met onderstaand formulier is het mogelijk om een routebeschrijving via google maps te genereren. Je plaatst het formulier op je eigen site en google maps doet de rest…

<form action="http://maps.google.nl/maps" method="get" onclick="target='_blank';">
<label for="vanaf">Vul uw eigen postcode of straatnaam in:</label>
<input name="saddr" type="text" class="TextField" id="vanaf" size="45" />
<input type="submit" class="contactbutton" value=" > " />
<input type="hidden" name="daddr" value="Kalverstraat, Amsterdam, 1012" />
<input type="hidden" name="hl" value="nl" />
</form>

Vervang “Kalverstraat, Amsterdam, 1012″ nog wel even door je eigen adresgegevens. Bekijk hier een werkend voorbeeld.

In de vorige post vertelde ik dat je in een dynamische stylesheet automatisch kleuren kunt genereren. Hiervoor gebruiken we het script csscolor.

style.php

<?php header('Content-type: text/css'); 

// csscolor.php invoegen
include_once("csscolor.php");

// kleuren
$kleur_A = new CSS_Color('ff0099');
$kleur_B = new CSS_Color('00ccff');

echo <<<CSS

/*LAYOUT
********/
body{}
p{}
h1{}
/*etc.*/

CSS;
?>

div#A5    {background-color: #<?= $kleur_A->bg['+5'] ?>;}
div#A4    {background-color: #<?= $kleur_A->bg['+4'] ?>;}
div#A3    {background-color: #<?= $kleur_A->bg['+3'] ?>;}
div#A2    {background-color: #<?= $kleur_A->bg['+2'] ?>;}
div#A1    {background-color: #<?= $kleur_A->bg['+1'] ?>;}
div#A0    {background-color: #<?= $kleur_A->bg['0'] ?>;}
div#A-1   {background-color: #<?= $kleur_A->bg['-1'] ?>;}
div#A-2   {background-color: #<?= $kleur_A->bg['-2'] ?>;}
div#A-3   {background-color: #<?= $kleur_A->bg['-3'] ?>;}
div#A-4   {background-color: #<?= $kleur_A->bg['-4'] ?>;}
div#A-5   {background-color: #<?= $kleur_A->bg['-5'] ?>;}

We gebruiken csscolor om van een kleur verschillende tinten te genereren. We kunnen kleuren dus donkerder of lichter weergeven. Bekijk mijn voorbeeld dat is gemaakt met bovenstaande code.

Ik ben momenteel bezig met een project waar diverse sites gebruik maken van een zelfde stramien. Om de sites snel een nieuw uiterlijk te kunnen geven (kan via cms) maak ik gebruik van dynamische stylesheets waar kleurcodes en achtergronden overzichtelijk kunnen worden veranderd en in de gehele site worden doorgevoerd.

In de head plaatsen we de volgende regel:

<link href="style.php" rel="stylesheet" type="text/css" />

Style.php ziet er als volgt uit:

<?php header('Content-type: text/css'); 

//VOORBEELD
$bgcolor = "green"; 

echo <<<CSS
body{ background: $bgcolor1;}
CSS;
?> 

Bovenstaande code is de basis waarin ik momenteel aan het werken ben. Door php te gebruiken kunnen we heel veel extra “trucjes” in de stylesheets doorvoeren zoals bijvoorbeeld random afbeeldingen, automatische kleuren en tekstgrootte.

Is je “F5″ knop lam van de hele tijd refreshen. Of vind je het irritant om de hele tijd je cache te moeten legen wanneer je aanpassingen in je website wil gaan bekijken. Er is een simpele oplossing! Door gebruik te maken van een “timestamp” kunnen we elke seconde een unieke url genereren.

<?php echo date("dmyhis"); ?>

Bovenstaande code geeft ons een hele rits getallen “141008113156″ die elke seconde veranderd. Plak er een “?” voor en plaats de code achter je stylesheet-url en je hoeft nooit meer te refreshen.

In Wordpress heb ik de volgende code gebruikt:

@import url( <?php bloginfo('stylesheet_url');
                    echo('?');
                    echo date("dmyhis"); ?>  );

Afbeeldingen groter dan 200px krijgen in internet explorer een kleine “toolbar” in de linker bovenhoek wanneer je met de muis over de afbeelding heen gaat. In 99% van de gevallen wil je dit niet. De image toolbar is heel makkelijk te verbergen door onderstaande regel in de head te kopieren.

<meta http-equiv="imagetoolbar" content="no" />

Dit is echt het toppunt! Hyves is dit jaar gekozen tot website van het jaar 2008. De meest trage site van Nederland, de broncode is een zootje vol tabellen en de layout laat veel te wensen over.

Natuurlijk snap ik dat hyves erg populair is. (bijna) Iedereen heeft tegenwoordig een profiel. Veel vrienden en kennissen, mijn moeder, mijn opa en ja -natuurlijk- ook ik. De kracht van hyves is dan ook het gigantische ledenaantal in Nederland. Maar laten we even realistisch zijn. Hyves is het niet waard om gekozen te worden tot website van het jaar of ziet de gemiddelde internetgebruiker dit anders?