• Das CSS Attribut @font-face, welches im Moment wieder ganz aktuell ist.
• sIFR, eine Alternative die mit Flash die Schriftart darstellt.
• Cufón arbeitet hingegen mit SVG, VML, Javascript und JSON.
• typeface.js ist eine Alternative die mit normalen HTML/CSS Definition arbeitet und mit Javascript unterstützt wird.

Typekit

Eine weitere Möglichkeit ist der neuer Dienst Typekit. Typekit gibt es noch nicht allzu lang. Es arbeit mit dem CSS Attribut @font-face. Das besondere dabei ist, dass die Schriftarten nicht selbst auf den Server gespeichert werden müssen. Diese werden durch zwei Zeilen Javascript von den Typekit Server geladen.
Vorteil an dieser Variante ist das nicht vorhandene Problem mit den Lizenzen der Schriften. Die Schriften auf Typekit haben alle eine extra Lizenz, welches das Einbinden in Webseiten erlaubt.

Fonts

Die Einbindung ist sehr einfach gehalten. Man wählt aus über 60 Schriftarten eine Schriftart aus und fügt sie zu seinem Kit hinzu. Hier kann man

Der Kiteditor

• Selektoren festlegen, auf die die Schrift angewendet werden soll
• weitere Schriftstile, die man zur Verfügung haben will, hinzufügen
• ein Fallback einrichten (Welche Schirft soll verwendet werden, falls es Probleme gibt?)
• Subsets festlegen (kommen demnächst noch dazu)

Typekit stellt vier verschiedene Pakete zur Verfügung. Das erste – kostenlose – Paket ist für eine Domain gedacht, auf welcher 2 Schriftarten eingebunden werden können. Dazu gibt es 5GB Trafficguthaben. Die drei anderen Pakete kosten zwischen $24,99 und $249,99 im Jahr.

Übersicht der Upgradepakete

4 Einladungen zu vergeben

Interesse geweckt? Dann schnell auf typekit.com gehen und anmelden. Ok, so einfach ist es dann doch nicht. Im Moment kommt man nur mit einer Einladung rein.
Und jetzt haltet euch fest.
Ich habe 4 exclusive Einladungen, welche ich nun hier, jetzt und in den nächsten Tagen unter allen eingehenden Kommentaren verlosen werde. Kein Tweet, kein Trackback, einfach nur ein Kommentar.
Die Auslosung findet dann am Samstag statt. Viel Glück!

Wie man vielleicht sieht wurde einiges geändert.
So habe ich mir die Zeit genommen und alle Artikel neu getaggt und in neue Kategorien eingeordnet. Jetzt gibt es anstatt 40 Kategorien nur noch 24, wobei Fun, Gadgets, Intern, Software, Webdesign, Webentwicklung, WordPress und WWW die Hauptkategorien sind. Die Tags wurden ebenfalls halbiert.
Leider musste ich dabei auch feststellen, dass durch den Wechsel auf WPMU einige Artikel nicht mehr vollständig waren, diese sind direkt gelöscht worden. Also, sollte jemand auf WPMU wechseln wollen, vorher schnell diesen Artikel durchlesen.

Zur neuen Version gehört natürlich auch ein neues Layout.
Diesmal ist es jedoch ein nicht von mir erstelltes Theme, sondern eins von Themeshift.com. Es trägt den schönen Namen deZine.
Hinter Themeshift steckt Simon, auch bekannt unter webdemar, der auch einen interessanten Blog über WordPress und Webdesign führt.

Das Theme deZine

Wie schon gesagt, stammt das Theme von Themeshift. Warum gerade das Theme?
Ganz einfach, mir hat es auf den ersten Blick sofort gefallen, sozusagen Liebe auf den ersten Blick.
Dazu führte unter anderem die übersichtliche Struktur des Themes – der Header mit Seiten.- und Kategorienavigation, der breite Contentbereich mit der Sidebar, der Footer mit Widgetunterstüzung – alles sauber voneinander getrennt.

Widgets

Apropo Widgets; dieses ist auch das erste Theme, womit ich die Widgetverwaltung von WordPress nutze, was vielleicht auch daran liegt, dass deZine Widgets unterstützt.
Mit dem Theme ist es möglich Widgets für verschiedenen Sidebars (Standard, Startseite, Kategoriearchiv, Artikel, Seiten) und für den Footer zu bestimmen, was eine inviduelle Gestaltung zulässt, ohne selbst im Theme Hand anlegen zu müssen.

Übersicht der Einstellungen

Damit auch sonst nicht ins Theme eingegriffen werden muss, bringt das Theme deZine von Haus aus eine Einstellungsseite mit.
Hier können verschiedene Features, wie zum Beispiel die Slideshow (de)aktiviert werden, ein Farbschema und/oder Hintergrundbild ausgewählt werden oder die Startseite im Bezug auf Spalten und Inhalt angepasst werden.
Ebenso ist im Theme auch eine Bannerveraltung eingebaut, wodurch es möglich ist sechs Banner auf seinem Blog zu platzieren.

Dropdown Menu

In Zeiten von Web 2.0 darf natürlich eins nicht fehlen, Javascript, insbesondere jQuery.
Mit jQuery wurde zum Beispiel die Slideshow auf der Startseite visualisiert. Bei mir zeigt sie die letzten fünf Beiträge aus der Kategorie WordPress an. Sie ist auch inviduell einstellbar.
Desweiteren werden die Eingaben der Suche und im Kommetarformular überprüft und gegebenfalls Fehlermeldungen ausgeben. Einfach mal bei der Suche auf der rechten Seite Ok klicken.
Mithilfe des jQuery Plugins Superfish sind die Navigationen mit dem Dropdownmenu im Header erstellt worden. Ein Tutorial dafür gibt es übrigens bei Simon im Blog.

Welche Features hat das Theme denn sonst noch?

• Unterstützung für Threaded Comments
• Verschiedene Seitentemplates (zB für eine volle Content Breite oder ein Archiv)
• Unterstützung für Thumbs mit Timthumb
• Verschiedene vordefinierte CSS Stile (zB .download, .info oder .preview)
• Unterstützung für Flickr und Twitter
• Ebenfalls gibts das Theme in drei Sprachen: Deutsch, Englisch und Spanisch

In der Summe ein Theme, wofür man auch gerne mal die 39€ hinblättert, denn Qualität hat nun mal seinen Preis und das Theme hat Qualität und der Preis ist somit völlig ok. Vorallem auch deshalb, weil man zu dem Theme auch noch einen erstklassigen Support bekommt. Kostenlose Updates sind da dann nur noch das i-Tüpfelchen. Hier ist der Kunde noch König!

Solltest du an dieser Stelle nun Interesse an dem Theme deZine bekommen haben, kannst du dir eine vollständige Demo auf Themeshift anschauen. Beachte auch die anderen tollen Themes von Themeshift.

Das Logo

Leider war bei dem Theme kein Logo für meinen Blog dabei (sowas aber auch. ). Somit habe ich einmal meine Gehirnzellen aktiviert und folgendes kam heraus:

Das neue Logo

Ein Logo welches mit den eigentlich Begriff ocean endlich verschmilzt. Das C ist zum Boot geworden, welches nun auf den Weltmeeren sein Unwesen treibt. Ich finds echt cool.

Bloggen, bloggen, bloggen

Mit diesem Artikel ist also die dritte Runde eröffnet und somit werden hier auch wieder ein paar mehr Artikel rausgehauen, damit ich den Pagerank von 4 auch weiterhin behalte.
Version 3, was steckt dahinter? – Theme deZine ist übrigens der erste Teil von der Artikelserie Version 3, was steckt dahinter?.
Also, dran bleiben!

Besitzt man einen Account bei Twitter bekommt man schnell mit, wenn Apple den Store mal wieder geschlossen hat. Doch nicht jeder ist schon bei Twitter angekommen.

Aus diesem Grund machen sich pfiffige Entwickler an die Arbeit und schreiben kleine Programme, welche den Status des Stores überprüfen. Dies hat zum Beispiel auch Sergej getan. Für die Apple Gemeinde gibt es deshalb ein schlichtes Dashboard Widget für Mac OS X. Den Download sowie weitere Infos können in diesem Artikel gefunden werden.

So, was macht die Windows Gemeinde? Interessieren sich nicht für den Apple Store. Nicht ganz, denn es gibt auch Leute, wie meine Wenigkeit, welche sich auch für Apple und den Apple Store interessieren, zum Beispiel, weil sie ein iPhone oder einen iPod besitzen.

Leider kann das Widget von Sergej aber nicht unter Windows eingesetzt werden. Jedoch gibt es seit Windows Vista die Gadgets für die Sidebar und in Windows 7 für den gesamten Desktop.

Apple Store Checker

Deshalb habe ich mich an ein Gadget für Windows rangesetzt, welches auch den Apple Store überwachen kann. Herausgekommen ist der Apple Store Checker.

Mit diesem Gadget ist es möglich den Store innerhalb eines bestimmten Intervalls zu prüfen. Bei einer Veränderungen wird die Farbe des Gadgets geändert und wenn gewünscht eine Infobox angezeigt werden. So verpasst man ganz bestimmt keine Offtime mehr.

Installation und Download

• AppleStoreChecker.gadget herunterladen
• AppleStoreChecker.gadget installieren
• Sollte das Gadget nicht direkt erscheinen, unter Windows Vista in der Sidebar auf das Plus klicken oder unter Windows 7 Rechtsklick auf den Desktop und dort Minianwendungen auswählen

Download
Version: 0.1
Link: Apple Store Checker
17 mal geladen

Das Gadget wird auf Wunsch gerne weiterentwickelt und Fehler werden natürlich schnellstmöglichst behoben.

Feedback ist gern gesehen.

WordPress MU wurde ursprünglich für wordpress.com erstellt und kann Hunderte von Blogs mit nur einer Installation verwalten, optimal für Bloghoster.

Wer schonmal einen Blog bei wordpress.com betrieben hat, konnte sehen, dass einige Funktionen deaktiviert sind, welche aber beim selbstgehosteten Blog existieren. Das ganze ist natürlich nur, damit keiner mit seinem Blog Unfug betreibt; es dient also der Sicherheit.

Wer allerdings WordPress MU nur für sich selbst nutzt, möchte die eine oder andere Funktion gerne (wieder) haben. So einer bin ich und deshalb eine kleine Liste mit Tricks, wie fehlende Elemente wieder aktiviert werden können.

Button: Medien einbetten

Damit via WYSIWYG Editor wieder Flash, Quicktime oder andere Medien eingebunden werden können, muss ein Plugin mit dem Namen Enable embedded media functionality aktiviert werden. Das Plugin gibt es auf iliveinperego.com. Inhalt in eine .php Datei kopieren und diese im /wp-content/mu-plugins/ Verzeichnis ablegen.
Das Plugin wird automatisch aktiv und der Button sollte wieder erscheinen.

Button: Mediaupload

Wo man in WordPress alle vier Buttons sieht, existiert nach der Installation von WordPress MU nur ein Button zum Dateien hinzufügen. Sollen alle vier wieder angezeigt werden, müssen diese in den Einstellungen einfach aktiviert werden.
Die Einstellung findet man unter /wp-admin/wpmu-options.php (Mediaupload-Button).

Filterung von Artikelinhalten

WordPress MU filtert den Inhalt von Beiträgen und Seiten stärker als beim normalen WordPress. So werden aus Sicherheitsgründen zum Beispiel alle PHP-Codeschnipsel entfernt oder zerstört. Damit WordPress MU dies nicht mehr macht, kann das Plugin Unfiltered MU genutzt werden. Laden, installieren, aktivieren, fertig.

Hinweis: Dieses Plugin sollte schon vor dem Import aktiviert werden!

Theme und Plugin Editor

Damit nicht jeder am Theme oder am Plugin rumspielen kann und schadhaften Code einsetzen kann, wurde der Plugin und Theme Editor deaktiviert. Durch ein paar Zeilen kann man die Links zu den Editoren wieder anzeigen lassen:

Erstelle eine PHP Datei mit einem Namen deiner Wahl. Kopiere anschließend folgende Zeilen in diese Datei, speichere ab und lade sie ins /wp-content/mu-plugins/ Verzeichnis.

<?php
function readd_editor_menu() {
global $submenu;
$submenu['wpmu-admin.php'][] = array(__('Theme Editor'), 'edit_themes', 'theme-editor.php');
$submenu['wpmu-admin.php'][] = array(__('Plugin Editor'), 'edit_plugins', 'plugin-editor.php');
}
 
add_action('_admin_menu','readd_editor_menu', 99);
?>

Die Links werden dadurch als Submenu vom Admin Menu angezeigt.

Pingdienste wieder eintragen

macpres hatte mich gefragt, ob man nicht auch die Rubrik Updare-Services wieder reaktivieren kann. Bis dato hatte ich garnicht gemerkt, dass diese auch weg war.
Wie in meinem Kommentar schon angesprochen, gibt es ein kostenpflichtiges Plugin dafür. Bezahlen für ein paar Zeilen Code? Wohl eher nicht. Also habe ich mich kurz rangesetzt und eine kostenlose Variante gebastelt. Genauso gut, nur kostenlos.

Um die Box wieder zum laufen zu bringen einfach die pingsites.php runterladen und ins /wp-content/mu-plugins/ Verzeichnis hochladen. Fertig, jetzt können wieder eigene Pingservices eingetragen werden.

Download
Version: 1.0
Link: Pingsites
48 mal geladen

Nach diesen Tipps wünsche ich noch ein schönes Wochenende.
Euer ocean90

Diesmal, wie man mit Hilfe von HTML, PHP und jQuery ein Kontaktformular erstellen kann. Gewünscht hatte es sich Peter nach dem Beitrag zu meinem Portfolio, wo ein solches Kontaktformular vorhanden ist.

Das Grundgerüst

Für das Formular benötigen wir erstmal ein HTML Gerüst mit ein paar Eingabefeldern. In diesem Tutorial werden wir ein Formular erstellen, welches folgende Felder bekommt: Name, E-Mail Adresse, Webseite, Betreff und Nachricht.

Hier nun ein Beispiel, wie ein solches Formular aussehen kann:

<form action="contact.php" method="post" id="contactform">
    <p><input type="text" class="text" onFocus="if(this.value=='Name*'){this.value=''};" onBlur="if(this.value==''){this.value='Name*'};" name="name" id="name" value="Name*" size="22" tabindex="1" /></p>
    <p><input type="email" class="text" onFocus="if(this.value=='E-Mail Adresse*'){this.value=''};" onBlur="if(this.value==''){this.value='E-Mail Adresse*'};" name="email" id="email" value="E-Mail Adresse*" size="22" tabindex="2" /></p>
    <p><input type="text" class="text" name="url" onFocus="if(this.value=='Webseite'){this.value=''};" onBlur="if(this.value==''){this.value='Webseite'};" id="url" value="Webseite" size="22" tabindex="3" /></p>
    <p><input type="text" class="text" onFocus="if(this.value=='Betreff*'){this.value=''};" onBlur="if(this.value==''){this.value='Betreff*'};" name="title" id="title" value="<?php echo _("Betreff*");?>" size="22" tabindex="4" /></p>
    <p><textarea name="message" tabindex="5" id="message" cols="50" rows="10"  onFocus="if(this.value=='Nachricht*'){this.value=''};" onBlur="if(this.value==''){this.value='Nachricht*'};" >Nachricht*</textarea></p>
    <p><small>Felder mit * müssen ausgefüllt werden.</small></p>
    <p><input name="submit" type="submit" id="submit" tabindex="6" value="Abschicken" /></p>
</form>

Sollte das Formular später erfolgreich abgeschickt worden sein, kann man eine Erfolgsmeldung erscheinen lassen. Beispiel:

<p class="success">Die Nachricht wurde erfolgreich versendet.</p>

Es kann auch jedes andere Element verwendet werden, sofern die Klasse success existiert.

Post Daten verarbeiten

Obige Form sendet die Datei an eine contact.php. Hier werden die geschickten Daten einer Überprüfung unterzogen.

So kann geprüft werden, ob die E-Mail Adresse valide ist, überhaupt Daten eingetragen wurden oder ob die Pflichtfelder ausgefüllt wurden.

Der Name:

In dem Formular ist der Name als Pflichtfeld deklariert, also soll überprüft werden, ob das Feld ausgefüllt wurde. Dies kann man mit folgenden Zeilen machen:

if(isset($_POST["name"]) && strtolower($_POST["name"]) != "name*") {
	$name = $_POST["name"];
} else {
	echo "Error_1";
	exit;
}

Mit isset wird überprüft, ob die Variable existiert, mit dem zweiten Teil wird überprüft, ob die Variable nicht den vorher definierten Inhalt des Feldes hat. Sollte dem nicht so sein, wird der Inhalt in die Variable $name übergeben. Andersfalls wird der Fehlercode Error_1 ausgeben und die Überprüfung mit exit beendet.

Die E-Mail Adresse

In dem Formular ist der Name ebenfalls als Pflichtfeld deklariert und soll nun mir folgendem Code überprüft werden:

if(isset($_POST["email"]) && strtolower($_POST["email"]) != "e-mail adresse*" && preg_match("!^w[w|.|-|+]+@w[w|.|-]+.[a-zA-Z]{2,4}$!", $_POST["email"])) {
	$email = $_POST["email"];
} else {
	echo "Error_2";
	exit;
}

Bei dieser Überprüfung wird die E-Mail Adresse ebenfalls auf ihre Validität hin überprüft. Ist alles in Ordnung wird der Inhalt in die Variable $email gespeichert, ansonsten wird der Fehlercode Error_2 ausgegeben.

Die Webseite

Die Angabe der Webseite ist freiwillig, sodass hier keine größere Überprüfung stattfinden muss.

if(isset($_POST["url"]) && strtolower($_POST["url"]) != "webseite") {
	$url = $_POST["url"];
}

Sollte die Domain nicht dem vorher definierten Inhalt entsprechen, wird sie in die Variable $url abgelegt. Wer trotzdem die Domain überprüfen möchte, kann sich bei Franks Artikel PHP Regular Expression Schnipsel Punkt 7 anschauen.

Der Betreff

Beim Betreff haben wir wieder den selben Fall wie beim Namen:

if(isset($_POST["title"]) && strtolower($_POST["title"]) != "betreff*") {
	$title = $_POST["title"];
} else {
	echo "Error_3";
	exit;
}

Bei richtiger Eingabe wird der Inhalt in $title gespeichert, ansonsten erscheint der Fehlercode Error_3.

Die Nachricht

Die Nachricht ist ebenso ein Pflichtfeld und wird dementsprechen geprüft.

if(isset($_POST["message"]) && strtolower($_POST["message"]) != "nachricht*" && (strlen($_POST["message"]) >= 20)){
	$message = stripslashes($_POST["message"]);
} else {
	echo "Error_4";
	exit;
}

Mit (strlen($_POST["message"]) >= 20) wird die Zeichenanzahl geprüft, sind weniger als 20 Zeichen vorhanden, wird der Fehlercode Error_4 ausgegeben. Die Anzahl kann beliebg gesetzt werden oder auch komplett weggelassen werden.

E-Mail versenden

Nachdem die ganzen Daten geprüft und in Variablen gespeichert wurde, kann die E-Mail verschickt werden. Dazu wird die mail() Funktion von PHP benutzt. Der Code sieht somit folgendermaßen aus:

$myemail = "Deine.Email@mailer.de";
$content = "URL: $urlnn$message";
 
if(mail($myemail,$title,$content,"From: $name <$email>" )) {
	echo "Ok"; 
} else {
	echo "Error_5";
}

Wurde die E-Mail erfolgreich verschickt, wird Ok ausgeben, andersfalls kommt der Fehlercode Error_5.

Jetzt ist das eigentliche Formular schon fertig. Wird das Formular in diesem Zustand abgeschickt, wird die contact.php geladen und die gibt die entsprechende Meldung aus. Damit die contact.php nicht direkt geladen wird, wird ein ein bisschen Javascript benötigt.

Daten mit jQuery abschicken

Für das Senden der Daten kann man die einfache Ajax Funktion jQuery.post verwenden.

$(document).ready(function(){
	$('#contactform').submit(function(){
		action = $(this).attr('action');
 
		$('#submit').after('<img src="img/loading.gif" class="loading">')
					.attr('disabled','disabled');
 
		$("input,textarea").removeClass("error");

Mit diesem Codeschnipsel wird beim drücken des Buttons der Inhalt des Attributs action abgerufen, welcher in diesem Fall contact.php ist. Danach wird nach dem Button ein Ladebild eingeblendet und der Button deaktiviert. Ebenso wird die Klasse error entfernt. Woher die kommt sieht man später.

		$.post(action, $("#contactform").serialize(), function(data){

Mit dieser Zeile wird die contact.php aufgerufen und mit Hilfe von serialize() werden die Formulardaten als Parameter mitgeschickt. Der letzte Teil ist die Callback Funktion. Die Antwort der contact.php ist jetzt in data gespeichert.

                       if(data=='Ok') {
				$('#contactform').slideUp(600,function(){
					$(".success").fadeIn(600)
				});
			} else if(data=='Error_1') {
				$('input#name').animate({opacity:"0"},200).addClass("error").animate({opacity:"1"},200).animate({opacity:"0"},200).animate({opacity:"1"},200);
			} else if(data=='Error_2') {
				$('input#email').animate({opacity:"0"},200).addClass("error").animate({opacity:"1"},200).animate({opacity:"0"},200).animate({opacity:"1"},200);
			} else if(data=='Error_3') {
				$('input#title').animate({opacity:"0"},200).addClass("error").animate({opacity:"1"},200).animate({opacity:"0"},200).animate({opacity:"1"},200);
			} else if(data=='Error_4') {
				$('textarea#message').animate({opacity:"0"},200).addClass("error").animate({opacity:"1"},200).animate({opacity:"0"},200).animate({opacity:"1"},200);
			}

Mithilfe dieser Funktion wird der Inhalt von data geprüft, welche den Inhalt Error_1 – Error_5 und Ok haben kann.

Bei dem Ausdruck Ok wird das Kontaktformular ‘aufgerollt’ und die Erfolgsmeldung wird angezeigt; das Element, welches die Klasse success besitzt.

Ist der Inhalt jedoch einer der Fehlercodes, so wird dem entsprechendem Feld die Klasse error gegeben (addClass) und das Feld blinkt zweimal auf (animate).

			$('#contactform #submit').attr('disabled','');
			$('#contactform img.loading').fadeOut(500,function(){$(this).remove()});
		});
 
	return false;
	});
});

Mit diesen letzten Zeilen wird der Button vom Kontaktformular wieder aktiviert und das Ladebildchen entfernt. Mit der Zeile return false; wird verhindert, dass die Daten normal an die contact.php gesendet werden.

Extras, Demo und Download

Jetzt ist das Ajax Kontaktformular mit jQuery und PHP soweit fertig. Für dem letzten Feinschliff gehört nun noch ein bisschen CSS. Die Klassen, die das Formular verwendet können zum Beispiel folgendermaßen gestylt werden:

.error {
	background: #FF8080;
	border-color: #F00
}
.success {
	display:none;
	font-weight:700
}

Wer das ganze nun nochmal Live sehen möchte, kann sich die Demo anschauen oder aber auch die Demo herunterladen:

Wie das ganze live aussieht.
Ajax Kontaktformular

Download
Version: 1.0
Link: Ajax Kontaktformular
299 mal geladen

Dieses Formular ist natürlich von jedem individuell erweiterbar, so können zum Beispiel mehr Überprüfungen stattfinden oder die Fehlercodes erhöhen um den Nutzer aussagekräftige Fehlermeldungen zu präsentieren.

Ich hoffe das Tutorial war hilfreich und wünsche viel Spaß beim nachbauen.

Euer Dominik