Month: Juni 2010

HTML5 Formular Features Teil 1

Posted on by marcus

In diesem Beitrag möchte ich ein paar neue und praktische HTML5-Features für Formulare zeigen, die man bedenkenlos heute schon einsetzen kann. Die Browser, die diese neuen Funktionalitäten noch nicht unterstützen, ignorieren die Neuigkeiten einfach, während User, die Safari, Chrome oder auch Opera einsetzen, von den neuen Möglichkeiten profitieren. Für die eMail- und URL-Validierungen ist es allerdings sinnvoll und empfehlenswert, eine Fallback-Validierung vorsehen.

1. das Attribut autofocus
autofocus kann als Attribut für ein beliebiges Formularfeld verwendet werden und es tut genau das, was man erwartet: der Cursor wird automatisch onload in diesem Formularfeld gesetzt, man braucht kein extra Javascript mehr dazu wie bisher.

<input type="text" name="firstname" autofocus />

2. das Attribut placeholder
placeholder kann dazu benutzt werden, um ein Textfeld mit einem Default-Wert zu belegen. Sobald der User in das Formular-Feld klickt, verschwindet der Text wie gewohnt, funktioniert also nun auch ohne Javascript.

<input type="text" name="lastname" placeholder="Egger" />

3. type url
Ein Input-Feld kann nun  auch vom Typ „url“ sein. Automatisch wird das Feld auf eine gültige Web-Adresse hin validiert. Opera zeigt zusätzlich ein URL-Icon innerhalb des Formularfeldes an. Wenn man mit dem iPhone-Safari auf so ein Formular kommt und ins Feld klickt, zeigt die Tastatur automatisch die dafür meinst gebrauchten „.com“, „.“ und „/“ Buttons.

<input type="url" name="url" />

4. type email
Ein Input-Feld kann nun  auch vom Typ „email“ sein. Automatisch wird das Feld auf eine gültige eMail-Adresse hin validiert. Opera zeigt zusätzlich ein eMail-Icon innerhalb des Formularfeldes an. Wenn man mit dem iPhone-Safari auf so ein Formular kommt und ins Feld klickt, zeigt die Tastatur automatisch die dafür meinst gebrauchten „@“ und „.“ Buttons.

<input type="email" name="email" />

Browser-Validierung ohne zusätzliches Javascript

Browser-Validierung ohne zusätzliches Javascript

reflektierender Spiegel-Effekt mit CSS

Posted on by marcus
Bild mit webkit-box-reflect Effekt

Bild mit webkit-box-reflect Effekt

Heute bin ich über eine coole webkit-Sache gestolpert: man kann mit CSS Bildern einen äußerst ansprechenden reflektierenden Spiegel-Effekt verpassen, das kennt man aus den ansprechenden Produktabbildungen. Der Effekt funktioniert zwar nur in Webkit-Browsern (Safari/Chrome), ist aber natürlich nicht weiter schlimm, die anderen Browser ignorieren diese Eigenschaft halt dann einfach.
Spielt also einfach mal damit rum, man kann echt schöne Effekte erzielen. Nachstehend findet Ihr noch ein kurzes Beispiel, wie es grundlegend läuft, außerdem findet Ihr hier ein Beispiel zum Anschauen.

Wenn’s Euch ebenso gut gefällt wie mir, dann könnt Ihr Euch hier weiter einlesen.

<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
#container {
width: 600px;
margin: auto;
font: 16px/1.4em helvetica, arial, sans-serif;
}
img {
float: left;
margin: 0 20px 0 0;
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.6, transparent), to(white));
-webkit-border-radius: 0px;
border-radius: 3px;
border: 3px solid #666;
}
</style>
</head>
<body>
<div id="container">
<h1>Spiegel-Effekt</h1>
<img class="post-image" src="hope.jpg" alt="hope" />
</div>
</body>
</html>

Safari 5 jetzt mit Reader-Funktion

Posted on by marcus

Habe ich grade zur eigenen Überraschung frisch entdeckt nach dem letzten Update auf Safari 5, allerdings handelt es sich ehrlicherweise dabei ja wahrscheinlich um die auffälligste Änderung, die einem ins Auge sticht: es gibt jetzt in der Adresszeile einen praktischen Reader-Button, wenn man sich in einem Artikel befindet.

Reader-Funktion in Safari 5

Reader-Funktion in Safari 5

Der neue Modus wird direkt in der Adressleiste über die Schaltfläche „Reader“ aktiviert. Die Website wird dann abgedunkelt und im Vordergrund wird der Artikel ähnlich wie ein Word-Dokument inklusive aller zugehöriger Media-Elemente angezeigt und kann über eigene Schaltflächen ausgedruckt, gezoomt oder auch per eMail verschickt werden.
Mehrseiter werden ebenfalls erkannt, die Reader-Ansicht ist scroll-fähig.

Wie genau Safari erkennt, weiß ich nicht im Detail, vermutlich ein Zählen von p-Tags und das Auftreten von zusammenhängendem Text. Faktisch handelt es sich wohl um eine nun fest in den Browser eingebaute Version des Readability-Bookmarklets

Trim-Funktionen in SQL Server 2005/2008

Posted on by marcus

Zumindest wenn man mit dem SQL Server von Microsoft als Datenbank arbeitet, gibt es einen kleinen Fallstrick hinsichtlich nicht vorhandener TRIM()-Funktion. Diese in fast allen Sprachen implementierte und oft benutzte Standard-Funktion gibt es nämlich ärgerlicherweise einfach nicht (Stand SQL Server 2005/2008). Es gibt nur die beiden Funktionen LTRIM() und RTRIM(), die eben die leading beziehungsweise die trailing spaces entfernen. Es wird also Lösung empfohlen beide Funktionen zu benutzen, schön ist natürlich aber was anderes:

LTRIM(RTRIM(string))

Einen Feature-Request dazu gibt es schon. Alternativ dazu gibt es unter http://sqltrim.codeplex.com/ eine angepasste Funktion, um TRIM() benutzen zu können, ist für SQL Server 2005/2008 benutzbar.

mehr Schriftarten im Web mit Google Font API

Posted on by marcus

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

Posted on by marcus

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>

bequem Verzeichnisse synchronisieren unter OS X mit SyncTwoFolders

Posted on by marcus

Ein kleiner Software-Tipp am Rande, hat mir sehr gut gefallen das nützliche Freeware-Tool „SyncTwoFolders“. Wie der Name schon vermuten lässt, sorgt das Tool dafür, dass man 2 Verzeichnisse bequem synchron halten kann. Ich benutze das Programm regelmäßig, um das Backup meiner recht umfangreichen iTunes-Libraryauf der externen Festplatte aktuell zu halten. Man wählt einfach die 2 Ordner aus, die man synchronisieren möchte, dann kann man seine Auswahl auch erstmal simulieren, um sicher zu sein, dass der Sync auf wie gewünscht durchgeführt wird. Man kann frei bestimmen, ob die Quelle das Ziel oder das Ziel die Quelle ersetzen soll oder ob der Abgleich wechselseitig vorgenommen werden soll.

Ich kann das Tool nur empfehlen, hier ist der Link zum Download bei Softonic.