Google hat nun den eigenen URL-Shortener-Service http://goo.gl/ öffentlich gemacht und die dazugehörige Website gelauncht.
Ist man mit seinem Google-Account angemeldet, dann hat man auch Zugriff auf Historie und Klick-Statistiken der angelegten Kurz-URLs.
Was auch cool ist: durch Anhängen der Endung „.qr“ an eine gekürzte URL erhält man automatisch einen QR-Code, den man schick zum Aufrufen von Web-Adressen mit Mobilgeräten verwenden kann, die eine Kamera (und die entsprechende Software) an Bord haben.
Der Dienst ist laut Matt Cutts schnell, stabil, sicher und verhält sich hinsichtlich 301/permanent-Redirects vorbildhaft.
Web & Programmierung
kostenloses Vim-Tutorial mit dem Vim Tutor
Vim ist ein mächtiger und weit verbreiteter Editor. Er stellt quasi eine erweiterte Version des auf den meisten Unix-Systemen zur Verfügung stehenden Editors Vi dar. Die beste, allerdings relativ unbekannte Ressource zum Erlernen von Vim kommt direkt mit und ist kostenfrei. Einfach nur in den normalen Modus (also nach Aufrufen vom Kommando „vim“ oder im Edit-Modus nach Aufrufen von „vim filename.ext„) gehen und dann :! vimtutor eintippen.
Es erscheint der folgende Begrüßungs-Bildschirm:
Der VIM-Tutor
Vim bietet dann einen ungefähr halbstündigen Praxiskurs an, in dem man alle wichtigen Funktionen und Kommandos kennenlernt – viel Spass!
Favicons mit transparentem Hintergrund – so klappt die Erstellung
Das Erstellen von Favicons mit transparentem Hintergrund kann mit den gängigen Web-Diensten zum Problem werden, wie ich festgestellt habe. Allerdings braucht man genau diese immer öfter, da sie auch als Shortcurt auf dem Desktop und so weiter abgelegt werden können – und dies sieht häßlich aus, wenn keine Transparenz vorhanden ist. Nach etlichem Rumprobieren hab ich’s nun direkt mit Photoshop hinbekommen. Vielleicht hilft’s ja dem ein oder anderem, hier also folgt die kurze Anleitung:
1. Ladet Euch das ICO-Format-Plugin von telegraphics.com.au runter, in dem Archiv, das Ihr erhaltet, findet Ihr eine Datei mit der Endung .8bi
2. Diese Datei legt Ihr in das <Photoshop-Installationsverzeichnis>/plug-ins/fileformats/ Verzeichnis. Es gibt von dem Plugin übrigens auch eine OS X-Version.
3. Nach dem Neustart von Photoshop könnt Ihr Euch nun Euer Bild mit dem speichern-unter-Dialog auch im .ico-Format abspeichern.
Mit der beschriebenen Vorgehensweise wurde bei meinen Versuchen erfolgreich die Transparenz erhalten, juhu, mission accomplished.
CSS3: box-shadow für schöne Schatten-Effekte
Schöne neue CSS-Welt. Mit CSS3 wurde box-shadow eingeführt, mit dem man Elementen einen Schatteneffekt verpassen kann. Man hat dabei den praktischen Vorteil, dass sich der Schatten bei Größenänderung automatisch an die Box anpasst und sich bei Verwendung von abgerundeten Ecken mit border-radius ebenfalls abrundet. Supported wird box-shadow von Safari (ab 3.1), Firefox (ab 3.5), Chrome und Opera (ab 10.5). CSS-Chatten nehmen üblicherweise 3 Werte (horizontal offset, vertical offset, blur) und eine Farbe. Die Offset-Werte können positiv oder negativ sein, es ist auch möglich mehrere Schatten-Effekte zu verwenden, die Werte-Angabe werden dann einfach mehrfach nacheinender im CSS notiert. Es ist einiges möglich, es empfiehlt sich, etwas damit herumzuspielen, macht Spaß.
Hier findet Ihr die W3C-Spezifikation.
Und hier habe ich eine kleine Beispielseite zum Thema box-shadow für Euch.
Mantis Bugtracker – Administrator-Anmeldedaten nach der Installation
Bestimmt bin ich nicht der Erste, der sich nach der Installation vom kostenlosen Bugtracking-System Mantis gefragt hat, wie man sich denn das erste Mal anmeldet; denn Anmeldedaten verrrät weder der Installationsprozess, noch ist irgendwas in den Readme-Files oder in der Dokumentation zu finden. Nach langem Suchen bin ich im Wiki fündig geworden, vielleicht kann ich also irgendjemandem Zeit sparen mit diesem Post. Die Anmeldedaten für den Admin nach der ersten Installation sind:
Username: Administrator
Passwort: root
Überflüssig zu erwähnen, dass man dies umgehend ändern sollte…
PHP-Info Code als Snippet – phpinfo()
Boah ey, jetzt hab ich’s so oft gegoogelt, und weil ich mir die Sytax nie merke, lege ich mir den (zugegebenermaßen sehr kurzen) phpinfo() Code jetzt endlich mal hier als Snippet ab.
Mit phpinfo() lassen sich Informationen über die auf dem Server installierte PHP-Version anzeigen. Einfach eine php-Datei mit dem nachstehenden Code uploaden und im Browser aufrufen – aber Vorsicht, da sind sensible Serverdaten dabei, die niemand Unbefugtes zu Gesicht bekommen sollte.
Beispielscript:
<?PHP
phpinfo();
?>
HTML5 Formular Features Teil 1
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
reflektierender Spiegel-Effekt mit CSS
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>
Trim-Funktionen in SQL Server 2005/2008
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.
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>