Web 2.0 total

Dienstag, 29. Januar 2008

Wer den Hype um neue Möglichkeiten nicht anerkennen möchte, der wird von der neuen BBC Homepage eines besseren belehrt. bbc.jpgDie Webdesigner haben eine ganz und gar customizable Startseite mithilfe von Ajax (AsynchroniusJavascript an XML) erstellt. Der Besucher hat die Möglichkeit einzelne Newsboxen zu verschieben oder ganz auszublenden. Außerdem kann jeder einstellen was für News er auf der Startseite sehen möchte. Der Clou: Alle Einstellungen werden gespeichert, sodass man beim nächsten Besuch seine perönliche Newsseite vor sich sieht. Alles in allem ein sehr schöner Vorstoß in Richtung Web 2.0.

www.bbc.com

 

CSS-Sprites

Montag, 21. Januar 2008

CSS-Sprites sind eine sehr gute Möglichkeit die Größe und Ladezeit einer Website erheblich zu verringern.
Angenommen man hat 10 Grafiken auf einer Seite die jeweils 2 KB groß sind, so bedeutet dies eine Gesamtgröße von 20 kb für die Grafiken und 10 HTTP Requests.
Wenn man nun alle Grafiken in einer einzigen Grafik vereint kommt man auf etwa 15 KB bei nur einem HTTP Request. Das Ganze hört sich kompliziert an ist aber sehr simpel und effektiv.
Als erstes muss man alle relevanten Grafiken z.B. einer Navigation, in ein großes Bild packen und soweit komprimieren, dass man das richtige Maß an Qualität erhält.
Daraufhin kann man sich an das CSS machen. In diesem haben wir die Möglichkeit die Position einer Hintergrundgrafik anzugeben.
Heißt für eine Navigation in dieser Form:

<ul id="navigation">
<li><a href="#" class="link1">link 1</a></li>
<li><a href="#" class="link2">link 2</a></li>
<li><a href="#" class="link3">link 3</a></li>
</ul>

dass wir den einzelnen Klassen jeweils das gleiche Bild aber mit unterschiedlicher Position der Grafik zuordnen können. Das passsende Stylesheet sieht dann so aus

#navigation { background: url(test-3.jpg); }
#navigation li { list-style: none; }
#navigation li, #navigation a { display: block; }
.link1 a:hover { background: transparent url(test-3.jpg) 0 -200px no-repeat;}
.link2 a:hover { background: transparent url(test-3.jpg) -96px -200px no-repeat;}
.link3 a:hover { background: transparent url(test-3.jpg) -172px -200px no-repeat;}

Und schon würde die Navigation in der gewünschten Position der Grafik hovern.

 

MySql – Funktionen im SELECT

Freitag, 4. Januar 2008

Manchmal kommt es vor, dass man ganz bestimmte Daten einer Datenbank braucht, z.B. eine bestimmte Anzahl oder Durchsschnittswerte, um das einfacher zu gestalten gibt es in MySql Funktionen die direkt in den SELECT Ausdruck geschrieben werden können.
Dazu gehören

Gruppen-Funktionen

COUNT(Feld) Anzahl der Datensätze, deren Feld nicht NULL (leer) ist
AVG(Feld) Durchschnitt vom Feldinhalt
MIN(Feld) Kleinster Wert der Gruppe
MAX(Feld) Größter Wert der Gruppe
SUM(Feld) Summe der Werte von Feld

mathematische Funktionen

%, MOD() Modulo (ganzzahliger Rest)
ABS() Betrag von
COS() Cosinus (in rad)
DEGREES() Umrechnung von rad in deg (Grad)
PI() Die Zahl Pi
POW(X,Y) X hoch Y
RAND() Liefert einen Zufallswert zwischen 0 und 1
ROUND(x,n) Rundet x auf n Stellen
SQRT() Wurzel (2.Grades)
TRUNCATE(x,n) Schneidet x nach n Kommastellen ab

Zeichenketten-(String-)Funktionen

CONCAT(str1, str2, ...) Verkettet alle in den Klammern angegebenen Strings zu einem String
LEFT(str,n) n Zeichen des Strings str, von links gezählt
LTRIM(str) Schneidet die Leerzeichen am Ende von str ab
PASSWORD(str) Verschlüsselter String von str
REVERSE(str) Umkehrung von str, also das letzte Zeichen steht am Anfang usw.
LCASE(str), LOWER(str), UCASE(str) Wandelt str in Kleinbuchstaben
UPPER(str) Wandelt str in Großbuchstaben

Datums-Funktionen

DAYOFWEEK(date) Nummer des Wochentages dieses Datums (1 = Sonntag, 7 = Sonnabend)
DAYOFMONTH(date) Tag im Monat dieses Datums
DAYOFYEAR(date) Tag im Jahr dieses Datums
WEEK(date,first) Nummer der Woche im Jahr dieses Datums. Wenn first = 1, beginnt die Woche mit Montag.
MONTH(date) Monat dieses Datums
YEAR(date) Jahr dieses Datums
UNIX_TIMESTAMP(date) Zeit laut Betriebssystem Unix, angegeben in Sekunden, vom 01.01.1970 bis zum angegebenen Datum
DATE_FORMAT(date, format) Datum in einem bestimmten Format:
%W - Wochentag
%w - Nummer des Wochentags (0 = Sonntag, 6 = Sonnabend)
%e - Tag des Monats (0 bis 31)
%d - Tag des Monats (00 bis 31)
%j - Tag im Jahr (001 bis 366)
%U - Woche im Jahr (1.Wochentag = Sonntag)
%u - Woche im Jahr (1.Wochentag = Montag)
%M - Name des Monats
%m - Nr des Monats (00 bis 12)
%c - Nr des Monats (0 bis 12)
%Y - Jahr (vierstellig)
%y - Jahr (zweistellig)
%T - Uhrzeit (24 Std. hh:mm:ss)
%H - Stunde (00 - 23)
%k - Stunde (0 - 23)
%I - Stunde (00 - 12)
%l - Stunde (0 - 12)
%i - Minuten (00 - 59)
%S - Sekunden (00 - 59)

Mit diesen Funktionen kann man dann ganz einfach zum Beispiel Geburtstage eines Jahres ausgeben lassen.

$q = "SELECT * FROM databse
WHERE DATE_FORMAT(birthday,'%m%d') >= DATE_FORMAT(CURRENT_DATE,'%m%d')
ORDER BY DATE_FORMAT(birthday,'%m%d')";

$result = mysql_query($q);