Author: marcus

PHP-Info Code als Snippet – phpinfo()

Posted on by marcus

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

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.

Form-Submit per Enter-Taste erzwingen

Posted on by marcus

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

Posted on by marcus

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.