Zifp.nl

Google Font Directory

Admin — Thu, 20 May 2010 18:23:41 +0000

Een paar weken geleden legde ik in dit artikel uit hoe je @font-face kon gebruiken om je eigen fonts op een webpagina te gebruiken. Nu is het gebruiken van andere fonts nog gemakkelijk gemaakt.

Google heeft namelijk een bibliotheek met vrij beschikbare fonts ter beschikking gesteld. Met de Google Font Directory en de Google Font API wil de zoekgigant het gebruik van fonts op webpagina’s gemakkelijker maken.

Op deze pagina kun je zelf je eigen lettertype samenstellen waarbij Google de code genereert die je voor je webpagina kunt gebruiken.

Je kunt natuurlijk ook zelf naar een font toe linken door een link in de head van je HTML te plaatsen:

Code blok

<head>
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
</head>

Daarna kun je deze font gewoon in je CSS gebruiken:

Code blok

h1 { font-family: 'Cantarell', arial, serif; }

Het grote voordeel van deze service is dat je niet zelfs je eigen fonts hoeft te hosten. Ze staan namelijk allemaal op de server van Google die in veel gevallen sneller is dan je eigen server. Ook zijn alle fonts open en vrij te gebruiken zodat je naderhand niet word overvallen door copyright problemen.

Browsers die ondersteunt worden zijn :

Google Chrome: versie 4.249.4 of hoger
Mozilla Firefox: versie 3.5 of hoger
Apple Safari: versie 3.1 of hoger
Microsoft Internet Explorer: versie 6 of hoger
Opera versie 10 of hoger

E-mail validatie op de juist manier

Admin — Wed, 05 May 2010 19:16:49 +0000

De belangrijkste regel voor het ontwikkelen van een website in PHP is dat alles wat gebruikers kunnen invoeren gecontroleerd moet worden.

Het controleren van bijvoorbeeld een E-mail adres zou dan toch goed ingeburgerd moeten zijn bij de gemiddelde website ontwerper. Toch blijkt dit vaak fout te gaan.

Heel vaak een functie zoals de volgende gebruikt:

Code blok

function checkEmail($email) {
if(preg_match("/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])
â†ª*@([a-zA Z0-9_-])+([a-zA-Z0-9\._-]+)+$/", $email))
// Checkt door middel van een reguliere expressie of de email kan bestaan
   {list($username,$domain)=split('@',$email);
// splitst email adres in stuk voor en achter het @ symbool
 
   if(!checkdnsrr($domain,'MX')){
      return false;
   }
// kijk of het stuk achter @ een geldige domein is
   return true;
}
return false;

Deze code houd veel foute email adressen tegen maar blokkeert ook veel geldige adressen.

Wist je dat de volgende adressen gewoon geldig zijn:

Abc\@abc@voorbeeld.com
voorbeeld=voorbeeld@voorbeeld.com
!abc!def%abc@voorbeeld.com

Deze adressen werden door de voorbeeldfunctie geblokkeerd.

Als je op de juiste manier e-mail wil valideren is het belangrijk om de regels eens goed te bekijken.

Volgens het IETF gelden voor een e-mail adres de volgende regels:

An e-mail address consists of local part and domain separated by an at sign (@) character (RFC 2822 3.4.1).
The local part may consist of alphabetic and numeric characters, and the following characters: !, #, $, %, &, ‘, *, +, -, /, =, ?, ^, _, `, {, |, } and ~, possibly with dot separators (.), inside, but not at the start, end or next to another dot separator (RFC 2822 3.2.4).
The local part may consist of a quoted string—that is, anything within quotes (“), including spaces (RFC 2822 3.2.5).
Quoted pairs (such as \@) are valid components of a local part, though an obsolete form from RFC 822 (RFC 2822 4.4).
The maximum length of a local part is 64 characters (RFC 2821 4.5.3.1).
A domain consists of labels separated by dot separators (RFC1035 2.3.1).
Domain labels start with an alphabetic character followed by zero or more alphabetic characters, numeric characters or the hyphen (-), ending with an alphabetic or numeric character (RFC 1035 2.3.1).
The maximum length of a label is 63 characters (RFC 1035 2.3.1).
The maximum length of a domain is 255 characters (RFC 2821 4.5.3.1).
The domain must be fully qualified and resolvable to a type A or type MX DNS address record (RFC 2821 3.6).

Aan de hand van deze regels kunnen we een goede email validator bouwen.

Code blok

function validEmail($email)
{
   $isValid = true;
   $atIndex = strrpos($email, "@"); //kijkt waar de @ zit
   if (is_bool($atIndex) && !$atIndex) //controleert of @ in de mail voorkomt
   {
      $isValid = false;
   }
   else
   {
      $domain = substr($email, $atIndex+1);
      $local = substr($email, 0, $atIndex); //splits de e-mail in een stuk voor en na het @ teken
      $localLen = strlen($local);
      $domainLen = strlen($domain); //bekijkt de lengte van stukjes
      if ($localLen < 1 || $localLen > 64)
      {
         // kijkt of het stuk voor de @ tussen  de 1 en 64 tekens bevat
         $isValid = false;
      }
      else if ($domainLen < 1 || $domainLen > 255)
      {
         // Bekijkt of het stuk na de @ tussen de 1 en 255 tekens bevat
         $isValid = false;
      }
      else if ($local[0] == '.' || $local[$localLen-1] == '.')
      {
         // kijkt of het locale deel begint of eindigt met een  '.'
         $isValid = false;
      }
      else if (preg_match('/\\.\\./', $local))
      {
         // kijkt of er 2 punten achter elkaar zitten
         $isValid = false;
      }
      else if (!preg_match('/^[A-Za-z0-9\\-\\.]+$/', $domain))
      {
         // Kijkt voor een ongeldig teken in het domein deel
         $isValid = false;
      }
      else if (preg_match('/\\.\\./', $domain))
      {
         // Kijkt of het domein 2 punten achter elkaar bevat
         $isValid = false;
      }
      else if
(!preg_match('/^(\\\\.|[A-Za-z0-9!#%&`_=\\/$\'*+?^{}|~.-])+$/',
                 str_replace("\\\\","",$local)))
      {
         // Kijkt naar een ongeldig teken in het domein
         // Als er quotes in staan is deze toch geldig
         if (!preg_match('/^"(\\\\"|[^"])+"$/',
             str_replace("\\\\","",$local)))
         {
            $isValid = false;
         }
      }
      if ($isValid && !(checkdnsrr($domain,"MX") ||
 ↪checkdnsrr($domain,"A")))
      {
         // Bekijkt of het domein in het DNS gevonden kan worden
         $isValid = false;
      }
   }
   return $isValid;
}

Ondanks dat deze vreemde email adressen niet vaak gebruikt worden is het toch een goed idee om deze niet bij voorbaat al te blokkeren. Deze vreemde adressen zijn voor veel mensen een manier om bijvoorbeeld spam tegen te houden.

Gebruik je eigen fonts met @font-face

Admin — Wed, 05 May 2010 17:53:48 +0000

De meeste websites maken gebruik van de zogenaamde web veilige fonts, fonts zoals Arial, Helvetica, Verdana, sans-serif. Deze fonts zijn op iedere computer aanwezig en op die manier veilig om te gebruiken.

Tegenwoordig is het ook mogelijk om gebruik te maken andere fonts. Fonts die je zelf hebt gemaakt of die je van het internet hebt gehaald. Op Fontsquirrel staan veel gratis fonts.

Hoe gebruik je deze fonts nou? Dit gaat heel eenvoudig met behulp van @font-face in CSS.

Kijk maar naar het voorbeeld:

Code blok

@font-face {
font-family:ColabReg;
src: local("ColabReg.otf") url(fonts/ColabReg.otf) format("opentype");
}

Met font-family geef je aan hoe je font heet. Met url geef je aan waar je, je font hebt staan.
Met format geeft je aan om wat voor type bestand het gaat.
Met local geef je aan dat er eerst gekeken moet worden of de font al op de computer staat voordat deze gedownload moet worden.

Wil je die font dan voor een stuk tekst gebruiken, dan doe je dit net zoals je iedere andere font gebruikt:

Code blok

@font-face {
p{
font-family: "ColabReg", sans-serif;
}

Fonts bestanden die je kan gebruiken zijn OpenType Fonts(otf) en TrueType Fonts (ttf). Deze worden ondersteunt door alle moderne browsers behalve Internet Explorer.

Voor Internet Explorer heb je fonts in het Embeded OpenType (eot) formaat nodig. Fonts kun je bij onlinefontconverter omzetten naar het eot formaat.

Deze zet je er dan als volgt tussen:

Code blok

@font-face {
font-family:ColabReg;
src: url(ColabReg.eot); /* Speciaal voor IE */
src: local("ColabReg.otf") url(fonts/ColabReg.otf) format("opentype");
}

Let op dat de volgorde voor ie belangrijk is. De font voor IE moet bovenaan staan.

Fontface word ondersteunt door:Firefox 3.1+, Safari 3.1+, Opera 10 and IE4+