mehr Schriftarten im Web mit Google Font API

Frischer Wind im Web deutet sich derzeit an vielen Stellen an. Google bietet nun mit der Font API eine schnelle und simple Möglichkeit, OpenSource-Schriftarten in Webseiten zu integrieren.

So sieht das komplette HTML-Beispiel aus:
http://www.marcusegger.de/examples/webfont/index.html.

Im Prinzip ruft man das Stylesheet folgendermaßen auf:

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

Die gewünschte Schriftart kanndann ganz normal im CSS verwendet werden:

.cantarellParagraph {
font-family: 'Cantarell', arial, serif;
font-size: 48px;
}

Es besteht auch die Möglichkeit, mehrere Schriftarten auf einmal anzufordern, die Trennung der Font erfolgt dann mit dem Pipe-Symbol:

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

Weiter Informationen und Möglichkeiten bitte unter http://code.google.com/intl/de-DE/apis/webfonts/docs/getting_started.html#Quick_Start einsehen, es ist auch möglich, verschiedene Schnitte einer Schrift zu verwenden. Mit dem sogenannten WebFont Loader eine Javascript-Variante zur Verfügung.

Hier das vollständige HTML des Beispiels:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Font API Test</title>
<link href='http://fonts.googleapis.com/css?family=Cantarell|Lobster' rel='stylesheet' type='text/css'>
<style type="text/css">
.cantarellParagraph {
font-family: 'Cantarell', arial, serif;
font-size: 48px;
}
.lobsterParagraph {
font-family: 'Lobster', arial, serif;
font-size: 26px;
}
</style>
</head>
<body>
<p class="cantarellParagraph">Making the Web Beautiful!</p>
<p class="lobsterParagraph">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben</p>
</body>
</html>

mehrspaltiges Web-Layout mit CSS 3 Columns in Mozilla und Webkit

CSS3-Columns gibt es schon ewig, sie finden allerdings wenig Beachtung bis jetzt. Sie werden bis dato nur in Mozilla- und Webkit-basierten Browsern unterstützt, was natürlich zur Zeit bedeutet, dass Opera und der Internet Explorer da (noch) nicht mitmachen.  Aber bei gewissen Einsatz-Zwecken kann man das durchaus machen, finde ich, denn das Layout geht bei Nicht-Unterstützung nicht kaputt, sondern IE und Opera zeigen halt einfach einen längeren Absatz an, eben ohne Spalten – kein Drama, wie ich finde.

Das komplette Beispiel gibt es hier, so sieht das Ergebnis aus.

Der Code sieht folgendermaßen aus, kann man so als Basis nehmen und damit rumspielen, wenn Ihr mehr Spalten haben möchtet, dann einfach die column-count-Werte anpassen und so weiter:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>multi column test</title>
<style type="text/css">
#container {
width: 427px;
background-color: #CCC;
font:11px;
margin:auto;
padding:10px;
}
img {
width:100%;
}
#container p {
/*webkit*/
-webkit-column-count: 2;
-webkit-column-gap: 10px;
/* mozilla*/
-webkit-column-rule: 1px dashed black;
-moz-column-count: 2;
-moz-column-gap: 10px;
}
</style>
</head>
<body>
<div id="container">
<img src="paris.jpg" width="427" height="300" alt="Paris" longdesc="das ist das Filmplakat von Paris je t'aime" />
<h2>Paris je t'aime is a nice movie</h2>
<p>
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.
</p>
</div>
</body>
</html>

Form-Submit per Enter-Taste erzwingen

Im Zusammenhang mit Userinteraktion via Formular gibt es ab und an die Anforderung, dass man unbedingt eine vom User gedrückte Enter-Taste in Textfeldern oder Textareas erkennen muss. Mit der Möglichkeit, dieses bestimmte Keyboard-Event zu erkennen, kann man dann das Formular direkt und in allen Fällen senden, wenn die Enter-Taste gedrückt wurde, ohne das man den üblichen standardmäßigen Limitierungen unterworfen wäre.

Das nachfolgende Script zeigt wie das funktioniert:

<script language="javascript" type="text/javascript">
<!--
function checkEnter(e){
var characterCode;
var e;
if(e && e.which){
e = e;
characterCode = e.which;
}
else{
e = event;
characterCode = e.keyCode;
}
if(characterCode == 13){ //if generated character code equal to ascii 13 (enter key)
filterByGameTitle();
return false;
}
else{
return true;
}
}
//-->
</script>

Auaführliche Beschreibung ist unter http://jscript.psend.com/162/examples/stringEnterKeyDetector.php zu finden, nur drauf achten, dass da noch kleine Fehler im Script sind.

mySQL Backups auf Konsole

Sichern von Datenbanken ist eine Sache, die man täglich braucht – bzw. täglich brauchen sollte. Es gibt wie immer viele Wege, diesen Job zu erledigen, aber am schnellsten läßt sich das sicherlich direkt in der Kommandozeile erledigen, damit ist man dann auch unabhängig von GUI-basierten Tools wie dem mySQL-Administrator oder phpMyadmin.
Das Kommando ist sehr übersichtlich:

mysqldump -u mysqluser -p mysqldatabase

Zur Erklärung: mysqldump ist das Programm, das wir benutzen, um das Backup zu erstellen. Das Programm kann verschiedene Paramter entgegennehmen, wir verwenden hier diese:

„-u“ bedeutet, dass wir die Aktion mit einem bestimmten User durchführen, der Username muss dem -u nachfolgen wie oben im Beispiel gezeigt.
„-p“ bedeutet, dass ein Passwort mitübergeben wird, das eebenfalls direkt nach -p eingetippt wird. Wird es nicht angegeben, wird ein Promt erscheinen, wo man das Passwort eingibt.

Eine vollständige Liste der Parameter kann übrigens mit mysql –help oder dem Aufruf der Manpage des Tools eingesehen werden:

man mysqldump

Ok, wenn man das Kommando oben ausführt, sieht man die Aktionen direkt in der Konsole vorbeihuschen – das ist schön, denn wir wissen damit, dass unser Kommando funktioniert, allerdings fehlt eine entscheidende Information: wo ist unsere Sicherung? Die Antwort ist: nirgends, denn wir haben das Backup nicht in ein File geschrieben. Um das nachzuholen, benutzt man zusätzlich zum oberen Kommando eine Redirection, was sehr einfach ist:

mysqldump -u mysqluser -p mysqldatabase > my_DB_backup.sql

Nun wird das Backup in das File mit dem spezifiziertem Namen geschrieben. Wenn man das File mit der Endung .sql in einem Text-Editor öffnet, sieht man alle SQL-Anweisungen zum Erstellen der Struktur und Inhalte der Datenbank. Was jetzt möglicherweise noch sinnvoll wäre, ist das Backup-File auch gleich komprimiert zu haben. Dazu benutzen wir Piping, mittels Piping übergeben wir den Output von mysqldump an das Tool gzip, welches dann die Komprimierung für uns übernimmt:

mysqldump -u mysqluser -p mysqldatabase | gzip > my_DB_backup.sql.gz

Statt gzip kann natürlich analog auch ein anderes Tool wie zip oder tar verwendet werden.

tolle Icons für alle Einsatz-Zwecke

Icons braucht man immer, deswegen kann man nie genug gute Bookmarks haben: unter der Adresse http://findicons.com/ findet sich eine Icon-Sammlung, die es in sich hat. Egal ob ganze Icon-Packs oder einzelne Symbole, hier seid Ihr echt gut bedient.

Die Suchemaske mit Suggest-Funktione ist schnell und funktioniert präzise – das Suchergebnis kann auch nochmals nach Keywords eingegrenzt werden, außerdem kann man Farbfilter verwenden oder die gewünschte Lizenz-Art auswählen.

Icons auf www.findicons.com

Darüberhinaus stehen weitere Filter wie Icons-Größe etc. zur Verfügung.

http://findicons.com/

Coldfusion: Dubletten in einer Liste entfernen (CFML)

Aus aktuellem Anlass, weil ich’s grad mal wieder benötigt habe: ein kleines Code-Snippet zum Eliminieren von Dubletten in Listen. Es kommt ja immer wieder vor, dass man eine Liste hat, die doppelte Werte enthält. Manchmal benötigt man aber zum Weiterverarbeiten eine Liste, in der keine doppelten Einträge mehr vorhanden sind.
Das geht einfach und fix mit einem Loop über ein Struct:

<cfset myListWithDoubles = "1,1,5,4,6,1,4,6,12,4,5" />
<!--- elimate double values via struct --->
<cfset myStruct = StructNew()>
<cfloop index="idx" list="#myListWithDoubles#">
<cfset myStruct[idx] = "">
</cfloop>
<!--- convert back to a list --->
<cfset myListWithoutDoubles = StructKeyList(myStruct)>

Flash und das Attribut wmode: Ansicht von swf auf Websites

Wer kennt es nicht: man bindet ein swf auf einer Website ein, standardmäßig überlappt die Flash-Animation dann aber auch alle anderen Elemente auf der Site, Javascript-Navigationen und (D)HTML-Elemente beissen sich mit dem swf und werden überlagert.
Die Lösung ist das wmode-Attribut, das beim param- und beim embed-Tag angegeben werden muss.

<param name='wmode' value='opaque'>

Weitere Informationen dazu direkt bei Adobe: http://livedocs.adobe.com/flash/9.0_de/UsingFlash/help.html?content=WSd60f23110762d6b883b18f10cb1fe1af6-7ba7.html

Hier nachstehend ein kleines komplettes Beispiel:

<div style="padding-top: 10px; padding-bottom: 10px; padding-left: 8px;"> <object width="306" height="150" classid="clsid:27CDB6E-AE6D-11cf-96B8-1941085" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0">
<param name="movie" rel="nofollow" value="/flash/yourfile.swf"/>
<param name="quality" value="high"/>
<param name="wmode" value="opaque"/>
<param name="bgcolor" value="#bfbfbf"/> <embed width="306" height="150" wmode="opaque" src="/flash/yourfile.swf" rel="nofollow" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed> </object> </div>

So eingebunden sollte die Animation keine anderen Elemente mehr überlappen.

CSS-Optimierung mit dem Firebug-Plugin CSS Usage

Ich muss sagen, das sieht ziemlich vielversprechend aus auf die ersten paar Blicke zum CSS-Optimieren. Der dazugehörige Tipp kam vom Kollegen Michael Hnat von Bluegras: das Firebug-Plugin „CSS-Usage“ (erhältlich unter https://addons.mozilla.org/en-US/firefox/addon/10704). CSS-Usage erweitert Firebug um einen zusätzlichen Tab, wenn man den ausgewählt hat, kann man die Website scannen.

CSS Usage

CSS Usage

Nachdem der Scan beendet ist, sieht man die einzelnen Klassen aller beteiligten Stylesheets mit verschiedenen Farben gekennzeichnet. So sind zum Beispiel nicht verwendete Klassen mit rot markiert, was einem durchaus gut helfen kann, Altlasten loszuwerden. Hellgrün markierte Klassen wurden auf der momentan gescannten Seite gefunden, dunkelgrüne Klassen auf einer der vorher besuchten, man kann sich also größere Teile einer Website anschauen und übereinander scannen.

Man kann sich dann auch noch eine bereinigte Version des CSS exportieren, wo die nicht benutzten Klassen direkt auskommentiert sind, auf dieser Basis kann man die Stylesheets schon recht gut ausmisten. Momentan klappt die Anzeige der Zeilennummern noch nicht richtig, aber die Anhaltspunkte, die man durch das Add-On bekommt, sind wirklich sehr hilfreich. Wenn Ihr noch mehr darüber wissen wollt, könnt Ihr auch mal auf http://spaghetticoder.org/cssusage/ vorbeischauen.

Youtube Video an einem bestimmten Zeitpunkt starten

Ziemlich bekannt ist ja bereits, dass man mit den entsprechenden Zeitparamtern direkt an eine bestimmte Stelle in einem Youtube-Video springen kann. Das sieht ja dann so aus:

http://www.youtube.com/watch?v=F8UUFa9Lt4Q#t=01m28s

Der Paramter #01m28s lässt das Video erwartungsgemäß direkt bei 01:28 starten. Weit weniger bekannt ist, dass es so einen Paramter auch für embedded Videos gibt, dazu verwendet Ihr allerdings den start-Parameter, der in Sekunden angibt, wo das Video starten soll – hier ein kleines Beispiel:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="600" height="375" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/watch?v=F8UUFa9Lt4Q&start=36" /><embed type="application/x-shockwave-flash" width="600" height="375" src="http://www.youtube.com/watch?v=F8UUFa9Lt4Q&start=36" allowscriptaccess="always"></embed></object>

In diesem Fall würde das Video also entsprechend bei 36 Sekunden starten:

CFML-Dokumentation jetzt als AIR-Applikation

Drüben bei cfmldocs.com gibt es nun eine wirklich sehr praktische Sache: eine CFML-Language-Referenz als AIR-Applikation.
Schlicht und schnörkellos, perfekt übersichtlich gemacht und mit schöner Suche, die direkt bei der ersten Buchstabeneingabe alle Funktionen und Tags filtert. Das Teil schlägt alle mir bekannten Online-Docs um Längen, man kommt pfeilschnell zum gesuchten Ziel.

Also unbedingt hinsurfen und installieren: http://cfmldocs.com/air/index.html
Schneller war nachschlagen nie.

AIr-Applikation CFML-Docs

AIr-Applikation CFML-Docs