Vor einiger Zeit hab ich auf einer englischen Website etwas von einem "365 day project" gelesen. Es ging darum jeden Tag ein paar Fotos zu machen und das schönste dann auf seiner Website oder Blog oder so zu veröffentlichen. Ich fand, dass das eine super Idee ist und wollte genau so einen Blog aufmachen, auf dem ich jeden Tag ein Foto veröffentliche. Leider hatte ich damals keine gute Kamera. Und Bilder, die ich mit meinem Sony W810i Handy sahen nicht wirklich gut aus. Also hatte ich mir vorgenommen bis zu den Sommerferien genug zu sparen, um mir eine Spiegelreflex Kamera zu kaufen. Das ist jetzt etwa 5 Monate her.

Das hat auch alles super geklappt: Die Sommerferien haben vor zweieinhalb Wochen angefangen und vor etwa einer Woche ist meine Canon EOS 500D angekommen. Jetzt hab ich auch schon fleißig geknippst und rumprobiert (die besten kann man sind auf Flickr ansehen). Und auch wenn ich noch nicht weiß, was die Blendeneinstellung und die Belichtungszeit bringen, glaub ich, dass einige Fotos gar nicht mal ganz schlecht geworden sind.

Kamera ist da, ein paar Erfahrungen auch, fehlt nur noch das "Visuelle Tagebuch". Nein, der Name stammt nicht von mir. Sondern von hier. Denn kurz bevor ich meine Idee umsetzen konnte, hatte noch jemand anderes die gleiche Idee: Martin nämlich. Angeregt davon haben dann auch noch Yannick (Artikel), Mr. Mooky (Artikel) und einige andere angefangen ihre "Visuellen Tagebücher" zu schreiben. Oder halt nicht zu schreiben, sondern mit Fotos zu füllen.

Ob ich jetzt auch auf den Zug aufspringe und ein "Visuelles Tagebuch" aufmache steht noch in den Sternen. Falls das aber der Fall sein sollte, dann auf jeden Fall unter http://daily.nico-knoll.de/.

Normale Links wie z.B.: "http://www.flashforum.de/forum/html-und-css/wie-zeig-ich-ne-hochzahl-html-51215.html" machen sich in Fließtexten nicht besonders gut. Da sehen Links wie "wie zeig ich ne Hochzahl in html an ? - Flashforum" meiner Meinung nach weit besser aus. Aber für jeden Link den passenden Titel rauszufindensuchen ist eine relativ langweilige bzw. langwiedrige Aufgabe. Das fand ich auch. Also habe ich ein PHP-Skript geschrieben, was das automatisch macht. (Achtung: Das Skript ist nicht besonders schnell!)

Ergebnis:

<?php
function get_title($url) {
	$file = @implode("", file($url));       // Der Seitenquelltext wird in einen String gespeichert, was das Skript leider verlangsamt...
	@preg_match('%\(.*)\%', $file, $matches);  // Der "Title"-Tag wird gesucht und der Inhalt ausgelesen

	if($matches[1]) {   // Falls eine "Title"-Tag wird dieser ausgegeben, wenn nicht die URL.
		return $matches[1];
	} else {
		return $url;
	}
}
?>

Benutzung

// natürlich kann man die Funktion noch erweitern.
// Derzeit wird sie so verwendet:

<?php echo get_title('http://www.nico-knoll.de'); ?>

Eigentlich ist es relativ kompliziert nicht vordefinierte Fonts auf seiner Website einzusetzten, da z.B. der Internet Explorer nur Fonts im .eot Format akzeptiert. Eine andere Variante eigene Fonts zu verwenden war die Flash-Methode, bei der der Text (häufig nur Überschriften) durch Flash-Dateien ersetzt wurden. Doch das gehört der Vergangenheit an... hoffe ich, denn Google bietet jetzt eine supereinfach zu benutzene Alternative: Die Google Font API.

Wie benutzt man die API?

Die API nutzt man ganz einfach per CSS:

/* Beispiel zur Einbindung anhand der Schriftart "Lobster" */

@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: normal;
  src: local('Lobster'), url('http://themes.googleusercontent.com/font?kit=X-CahsKZZcJfSyZ_tX4ptg') format('truetype');
}

/* Beispiel zur Benutzung */

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

Diesen Code kriegt man bei folgender URL: http://fonts.googleapis.com/css?family=Font+Name (FONT+NAME durch die gewünschte Schriftart ersetzen [in diesem Beipiel Lobster]. Eine Liste dieser Schriftarten bekommt man hier.)

Egal auf welchem Blog man ist, überall gibt es Listen wie "Top 5 Webseiten", "Sites of the Week", "Weekly Faves", etc. Diese Listen sind normalerweise wirklich voll mit guten Webdesignes (auch wenn es Designes gibt, welche immer wieder in einer auftauchen). Wenn ich jetzt auch so eine Liste auf machen würde, wäre das nich nur nachgemacht, sondern auch langweilig.
Also mach ich jetzt das Gegenteil: Eine Liste mit den 5 schlechstesten Webseiten des Monats!

Wann gehts los?

Am 1. August startet die Reihe und wird dann monatlich erweitert.

Für ein Webprojekt von mir (eine Art CMS) brauchte ich ein einfach zu integrierendes Validations-Skript. Also hab ich Angefangen zu suchen, aber leider nichts gefunden. Also hab ich selbst geforscht.

Ergebnis

Dabei kam ein Validations-Skript heraus, welches automatisch alle Inputfelder bzw. Textareas prüft. Dazu brauchte ich zwei Funktionen:

1. getElementsByClass (via Snipplr)

function getElementsByClass(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

2. validate (via Nico Knoll)

function validate() {
    var array = getElementsByClassName('required');
    for each (var string in array) {
        if(string.value == '') { alert('Bitte füllen Sie alle Felder aus!'); return false; }
    }
}

Und wie benutzt man das?

So:

Name:


E-Mail:


Website:


Text: