CSS Tutorial: Personalisierte Checkboxen

Wie ich bereits berichtet habe, nutze ich seit Kurzem personalisierte Checkboxen. In diesem Tutorial möchte ich zeigen, wie das funktioniert.

Zuerst der HTML-Teil:

<span>
  <input type="checkbox" name="channel[]" id="channel1" class="checkbox" value="wronnaysblog">
  <label id="lbl1" for="channel1"> Wronnays (B)log</label>
</span>
<span>
  <input type="checkbox" name="channel[]" id="channel2" class="checkbox" value="wronnaycms">
  <label id="lbl2" for="channel2"> WronnayCMS</label>
</span>
<span>
  <input type="checkbox" name="channel[]" id="channel3" class="checkbox" value="forenhosting">
  <label id="lbl3" for="channel3"> ForenHosting.net</label>
</span>
<span>
  <input type="checkbox" name="channel[]" id="channel4" class="checkbox" value="webpage4me">
  <label id="lbl4" for="channel4"> WebPage4.Me</label>
</span>
<span>
  <input type="checkbox" name="channel[]" id="channel5" class="checkbox" value="cdm">
  <label id="lbl5" for="channel5"> C D Ms Blog</label>
</span>

Nachfolgend der CSS-Teil:

span {
  margin-bottom:1em;
}
input[type="checkbox"],
label[for] {
  display:inline-block;
}
label[for] {
  margin-left:1em;
  cursor:pointer;
}
input[type="checkbox"] {
  visibility:hidden;
}
input[type="checkbox"] + label[for] {
  margin-left:-1em;
}
input[type="checkbox"] + label[for]:before {
  content:"\2713";
  color:white;
  background:white;
  border:1px solid grey;
}
input[type="checkbox"]:checked + label[for]:before {
  color:black;
}
input[type="checkbox"] + label[for]:hover:before,
input[type="checkbox"] + label[for]:focus:before {
  color:grey;
}

content:“\2713″; zeigt das eigentliche Checkbox-Symbol. Das verstecken wir mit „color:white;“ und „background:white;“. Da wir mit „input[type=“checkbox“]:checked“ definieren, wie die Checkbox angeklickt aussehen soll und da „color:black;“ angegeben wurde, wird das Checkbox-Symbol nach dem Anklicken schwarz. Mit „label[for]:hover:before“, „label[for]:focus:before“ und „color:grey;“ geben wir dann noch an, dass das Checkbox-Symbol bei einem Hover- und Focus-Effekt grau sein soll.

Mehrsprachige Webseiten und Suchmaschinenoptimierung

Eine mehrsprachige Webseite ist etwas Schönes. Durch die Vielfalt der Sprachen kann man meist mehr als doppelt so viele Nutzer ansprechen wie vergleichbare einsprachige Webseiten. Allerdings gibt es bei mehrsprachigen Webseiten auch einen Haken: Entweder muss der Nutzer selbst die Sprache auswählen oder die Webseite liest die Daten von dem Browser aus. Das Problem ist, dass Suchmaschinen keine Sprachdaten an die Webseite übermitteln. Also wird die Webseite bei Suchmaschinen mit der Standard-Sprache ausgeliefert (meist ist dies Englisch). So wird aus einer zweisprachigen Webseite bei Google ganz schnell eine einsprachige Webseite. Ich möchte nun meine Lösung zu diesem Problem präsentieren: zwei Domains (bzw.: Subdomains). Denn wenn man zwei Domains für eine Webseite hat, dann kann man die Sprachauswahl so einstellen, dass wenn keine Sprachdaten gefunden werden, einfach die eine Webseite auf Deutsch ausgeliefert wird und die andere auf Englisch. So findet Google statt einer mehrsprachigen Webseite zwei Webseiten mit jeweils einer anderen Sprache. Dies ist optimal für die Suchmaschinenoptimierung.

Hier noch ein Beispiel in PHP:

    if (isset($_SERVER['HTTP_ACCEPT_LANGUAGE'])) // Sind Sprachdaten vorhanden?
    {
      $_SESSION['lang'] = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'],0,2);
    }
	else // Keine Sprachdaten vorhanden!
    {
if($_SERVER['SERVER_NAME'] == 'homepage-versammlung.tk') {$_SESSION['lang'] = 'de';}
elseif($_SERVER['SERVER_NAME'] == 'homepage-meeting.tk') {$_SESSION['lang'] = 'en';}	
else {$_SESSION['lang'] = 'en';} 	
    }

Alternativer Server (PHP Tut)

<?php
error_reporting(0);
ob_start();
function pingSite($webserver) 
{ 
   foreach ($webserver as $key => $host) 
    { 
        $fp = curl_init($host['url']);
        curl_setopt($fp,CURLOPT_TIMEOUT,10);
        curl_setopt($fp,CURLOPT_FAILONERROR,1);
        curl_setopt($fp,CURLOPT_RETURNTRANSFER,1);
        curl_exec($fp);
        if (curl_errno($fp) != 0)  
        { 
            $webserver[$key]['status'] = false;
        } 
        else  
        { 
            $webserver[$key]['status'] = true;
        } 
        curl_close($fp);
    }
    return $webserver;
} 
$webserver[0]['name'] = 'lima-city';
$webserver[0]['url'] = 'http://webfreclan.lima-city.de';
$webserver = pingSite($webserver);
?>
<html>
<head>
<title>Server Check</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<?PHP
foreach ($webserver as $key => $host) 
{ 
   if(!$host['status'])
   {
    echo 'Die Server sind zurzeit offline!';
	Header("Location: http://www3.wronnay.tk");
   }
   else
   {
    echo 'Die Server sind zurzeit online!';
    Header("Location: http://webfreclan.lima-city.de");
   }
}  
?>
</body>
</html>
<?php
ob_end_flush();
?>

Dieser Code überprüft, ob der Server „http://webfreclan.lima-city.de“ online ist und leitet im Fall, dass er offline ist, auf http://www3.wronnay.tk weiter.

Anti Spam Updates + Tutorial

In meinen letzten Beitrag habe ich berichtet, dass ich ein SPAM-Problem hatte. Dieses habe ich jetzt beseitigt und gleich ein neues Script namens „AntiSpam NewsSystem“ zum Download bereitgestellt. Wie ich das angestellt habe, möchte ich in diesem Artikel erklären:

Zuerst sollte man wissen, dass SPAM-Autoren meistens keine Menschen, sondern Programme („Spambots“) sind, die das Web ähnlich wie Google durchsuchen und versuchen, in jeden Formular, dass sie finden, Werbung einzutragen. Dabei füllen die Spambots meistens typisch benannte Formulare aus, die man meistens ausfüllen muss (also z.B.: Email, Text, Betreff, Name, …). Das kann man sich zunutze machen, indem man ein Feld mit dem Namen „Email“ anlegt, den Besucher aber seine E-Mail-Adresse in das Feld „hallo“ eintragen lässt. Danach überprüft man, ob in das Feld „Email“ etwas eingegeben wurde und wertet es dementsprechend aus. Sollte das immer noch nicht funktionieren, überprüft man noch, ob Wörter wie „Viagra“ oder „Buy“ eingegeben wurden.

Hier meine Lösung:

Zuerst das HTML-Formular:

<form action="" method="post">
<p class="hallo"><input id="email" type="text" name="email" value="" size="60" /></p>
Kommentar schreiben:
<textarea class="li" name="comment" rows="5" cols="40"></textarea>
Ihr Name: <input class="li" type="text" name="name" />
<input class="lb" type="submit" name="submit" value="Kommentieren" />
</form>

Dann muss man noch per CSS die Class „hallo“ auf dispaly:none; setzen (So sehen die Besucher die Email-Abfrage nicht):

.hallo {display:none;}

Und abschließend wird mit PHP überprüft, ob etwas in das Feld „Email“ eingegeben wurde (der Besucher also ein Spambot ist):

<?php
  if(isset($_POST['submit']) AND $_POST['submit'] == "Kommentieren") {
	  if(isset($_POST['email']) && $_POST['email']) {
	  echo"<div class=\"fehler\">You are an SPAM-Bot!</div>";
	  }
      // hier dann noch der restliche Code...
  }
?>