Hallo, mein Name ist Philipp Menzel

Fachinformatiker für Anwendungsentwicklung
und Web- & Frontend-Entwickler.

Bild von mir

Relaunch von FishCounter

Es tut sich etwas in der Website-Schmiede! Das von mir etwas vernachlässigte Projekte "FishCounter" wurde einem Redesign unterzogen. Die Website ist nun im Responsive Design umgesetzt und ist somit mit diversen Endgeräten benutzbar. Die Angelfreunde können nun direkt vom Wasser aus ihren Fang eintragen. Des Weiteren gibt es einige neue Themes, die für noch mehr Individualität sorgen. Die Verwaltung wurde ebenfalls grunderneuert und bieten deutlich besseren Komfort. Neugierig geworden? Dann schauen Sie doch einfach auf www.fishcounter.de vorbei!

Responsive Webdesign

Es vergeht kaum ein Tag, an dem in der "Web-Welt" nicht eine neue Sau durchs Dorf getrieben wird.

Rückblick
Es ist gar nicht soooo lange her, da waren "Tabellen-Layouts" gang und gebe. Und auch heute noch stolpert man über den einen oder anderen historischen Fund. Von Webstandards und Barrierefreiheit war noch keine Rede. Usability spielte keine große Rolle. Ja sogar der Sinn einer Website war ein anderer als heute.

Das mobile Internet
Heute spielt das mobile Internet eine immer größere Rolle in unserem Leben. Apps, Web-Apps und für Mobilgeräte optimierte Webseiten bekommen einen immer wichtigeren Stellenwert. Aber auch die Fernseher bieten mittlerweile die Möglichkeit, das Internet zu nutzen. Dazwischen gibt es dann die gewohnten Desktop-Geräte und Notebooks mit den verschiedensten Auflösungen. Jeder Anwender dieser Geräte hat, je nachdem um welches Gerät es sich handelt, ein anderes Primärziel.
Während der "Desktop-Surfer" eher umfangreiche Informationen beschaffen möchte und zum Beispiel Notizen in einer parallel geöffneten Anwendung mitschreibt, ist der "Smartphone-Surfer" eher darauf fokusiert, schnell und einfach an die wirklich wichtigen Informationen zu gelangen. Dazu ein einfaches Szenario am Beispiel -Autohaus- .
Der "Desktop-Surfer" möchte das aktuelle Gebrauchtwagenangebot vergleichen, ausdrucken und erfassen. Der "Smartphone-Surfer" ist unterwegs und möchte schnell erfahren, ob das Autohaus, welches gleich in der Nähe ist, noch geöffnet hat.

Neue Anforderungen an Websites
Allein diese beiden Szenarien stellen neue Anforderungen an eine Website. Im Prinzip werden gleich zwei Webseiten für ein und das selbe Autohaus benötigt. In den meisten Fällen ist das auch der Fall. Es gibt für Smartphones und Desktop-Geräte jeweils eine Version der Website. Vollkommen voneinander getrennt. Beide Versionen sind in der Regel starre Konstrukte, d.h. sie sind auf eine bestimmte Auflösung "festgezogen". Und was passiert, wenn wir die Tablets oder die Fernseher mit ins Spiel bringen? Dann müssten noch 2 weitere Versionen her. Und wer soll das alles bezahlen? Und wie geht es weiter? Welche Geräte und Auflösungen kommen in der Zukunft?

Neue Anforderungen an Webentwickler!
Das Zauberwort heißt Responsive Webdesign! Es ist eine Entwicklungstechnik für die Gestaltung einer Website, die vom Endgerät bzw. der Auflösung vollkommen unabhängig ist. Die Website passt sich dem Gerät an. Egal, mit welchem Gerät der Besucher einer Website surft. Die Seite wird optimal angezeigt. In der modernen Webentwicklung lässt sich diese Technik mit HTML5, CSS3 und media queries umsetzen. Aber auch flexible Layouts müssen beherscht sein. Denn starre Konstrukte erfüllen hier nicht mehr ihren Zweck. Neben dem Format der Website kommt es auf geringe Ladezeiten an. Massen an Grafiken bremsen jedes Smartphone aus. Genug geredet... ein Beispiel dazu habe ich hier vorbereitet: Responsive Website




Progressive Enhancement

Progressive Enhancement erlaubt es jedem Nutzer den Basis-Inhalt und die Basis-Funktionalität einer Website zugänglich und nutzbar zu machen. Darauf aufgebaut bekommen Nutzer mit besseren Browsern und/oder erweiterten Browser-Funktionalitäten (z.B. HTML5, CSS3, Javascript oder Flash) eine verbesserte Funktionalität und Präsentation der Inhalte.

Da ich diese Methode der Webentwicklung für essentiell wichtig halte, habe ich einen ausführlichen Bericht dazu verfasst.
Weiterlesen...




HTML5 - Logo

HTML5 ist nicht nur eine Sprache. Das ist für alle die, die sich schon mal mit HTML5 intensiver beschäftigt haben, nichts Neues. Ich deute an der Stelle lediglich mal auf Geolocation, welches nur mit Javascript funktioniert. Das W3C geht noch einen Schritt weiter! Nach einer meiner Surf-Runden im Web stieß ich auf die Seite W3C HTML5 Logo. HTML5 hat jetzt ein Logo, welches wirklich Charakter hat! Neben der Gestaltung der Website, welche mir gut gefällt, wurde mir außerdem klar, dass HTML5 jetzt eine Marketing-Maßnahme wird. Jeder wird jetzt dieses Logo auf seiner Website verewigen wollen, um zu zeigen: Diese Website ist HTML5! Das Logo wird auch auf Websites zu sehen sein, welche nicht die definierten Bedingungen erfüllen. Dennoch freut es mich trotzdem! Denn so wird auf HTML5 und den Fortschritt im Web aufmerksam gemacht. Außerdem hat so ein Logo doch einen viel schöneren Reiz, als einfach nur zu sagen: "Ihre Website ist HTML5, tolle neue Technik, usw. blabla". Oder etwa nicht?



Recaptcha

recaptchaVor nicht allzu langer Zeit habe ich mich mit Spam in Gästebüchern beschäftigt. Dabei handelt es sich meist um kryptische Namen, Texte und dubiose Links. Ich habe die Erfahrung gemacht, dass eine Eingabeaufforderung, wie das Ergebnis einer Addition zweier zufälliger Zahlen im Zehn-Zahlen-Bereich (z.B. 3+7), nicht ausreicht. Eine wirkliche Abhilfe schafft dagegen Recaptcha. Vorraussetzung für diesen Dienst ist ein Google-Account. Nach erfolgreicher Registrierung und Herunterladen der Recaptcha-Bibliothek folgt eine recht schlanke Implementierung.


Und weil die "Ich will doch einfach nur einen Demo-Codesnippet" im Netz so rar sind, gibts an dieser Stelle gleich einen ;-)

Lediglich 3 Dinge müsst Ihr anpassen:

  • require_once('recaptcha-php-1.11/recaptchalib.php');
  • $publickey = "[YOUR PUBLIC KEY]";
  • $privatekey = "[YOUR PRIVATE KEY]";


<?php
require_once('recaptcha-php-1.11/recaptchalib.php');
$publickey = "[YOUR PUBLIC KEY]";

if (isset($_POST['absenden'])){
    $privatekey = "[YOUR PRIVATE KEY]";
    $resp = recaptcha_check_answer ($privatekey,
    $_SERVER["REMOTE_ADDR"],
    $_POST["recaptcha_challenge_field"],
    $_POST["recaptcha_response_field"]);
    if($resp->is_valid){
        $markup = '<p style="color:green;font-weight:bold;">Recaptcha erfolgreich
        </p>';
    }
}
?>
<!doctype html>
<html>
<head>
    <title>Recaptcha</title>
</head>

<body>
    <form name="test" action="" method="post">
        <table>
            <tr><td>Name:</td><td> <input type="text" name="name"/></td></tr>
            <tr><td>Dein Text:</td><td> <textarea></textarea></td></tr>
        </table>
        <?php echo recaptcha_get_html($publickey); ?>
        <input type="submit" value="Absenden" name="absenden"/>
    </form>
    <br />
    <?php echo $markup?>
</body>
</html>


Viel Spaß und Spam adé :-)



Flickr-API

Kennen Sie die Photo Sharing-Plattform Flickr? Diese stellt eine Schnittstelle zur Verfügung mit der es möglich ist diverse Anfragen, wie z.B. "hole mir alle meine öffentlichen Alben", zu senden. Alle Anfrage-Querys sind super in der API-Doku aufgelistet und beschrieben. Sehr praktisch finde ich den API-Explorer mit dem man live und direkt im Browser die Methoden ausprobieren und sich die Antworten ansehen kann. Zusätzlich ist es möglich die Größe der Bilder festzulegen. Von Thumbnail bis XXL-Format sollte für jeden das passende Format dabei sein. Zu Beachten gilt dass die großen Bilder bzw. viele Bilder eine hohe Ladezeit beanspruchen. An dieser Stelle wäre ein Caching sinnvoll. Ein Beispiel für den Einsatz der Flickr-API ist eine kleine Vorschaubild-Gallerie auf sina.menzel-philipp.de


Zum Abschluss gibt es noch ein Code-Snippet "alle Bilder von Album XYZ holen". Realisiert mit Curl und SimpleXML in PHP.

<?php
$api_key = 'Ihr API-Key';
$photoset_id = 'Ihre Photoset-ID';
$ch = @curl_init();
@curl_setopt($ch, CURLOPT_URL, "http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&photoset_id=".$photoset_id."&api_key=".$api_key);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$data = curl_exec($ch);
curl_close($ch);
unset($ch);
$xml = new SimpleXMLElement($data);
foreach ($xml->photoset[0]->photo as $photo) {
$markup = $markup.'<img src="http://farm'.$photo['farm'].'.static.flickr.com/'.$photo['server'].'/'.$photo['id'].'_'.$photo['secret'].'.jpg" alt=""/> ';
}
echo $markup;
?>



Praxistauglichkeit von HTML5 und CSS3

Tests während der Entwicklung meiner neuen Seite haben mir gezeigt, dass in den modernen Browsern wie z.B. dem Firefox 3.6 alles wunderbar aussieht. CSS-Anweisungen wurden richtig interpretiert und die neuen HTML5-Elemente richtig dargestellt. Meine 2. Wahl zum Testen ist der Internet Explorer 8 gewesen. Und wie könnte es anders sein. Alles kaputt. Und warum? Wenn man sich den Quellcode ansieht den der IE8 ausspuckt, erkennt man das die unbekannten Elemente nicht ignoriert und "runtergeschluckt", sondern geschlossen werden. Der header-Tag bekommt im öffnenden und schließenden Tag ein "/" (Slash) verpasst. So lange der IE die neuen Tags nicht interpretiert und man dennoch die neuen HTML5-Elemente nutzen möchte, wird man wieder mal auf Workarounds ausweichen müssen. Auf der Suche danach stieß ich auf http://code.google.com/p/html5shim/. Es ist letzten Endes nur eine Javascript-Datei mit relativ wenig Code die eingebunden wird um dem Internet Explorer diesen Fehler auszutreiben. Die unendliche Geschichte der Workarounds für den IE und das Hinterherhinken der Redmonder findet eine Fortsetzung und wird mich, sowie andere Webentwickler wohl noch einige Jahre verfolgen. Mit CSS3-Anweisungen sieht es nicht viel anders aus. Farbverläufe, Schatten und sonstige optische Gimmicks von CSS3 kann der Internet Explorer ebenfalls nicht darstellen. Besonders Schade finde ich es, dass die Darstellung rum um die Anweisungen column-count und column-gap fehlschlägt. Diese machen es wirklich bequem, Texte mehrspaltig darzustellen.
Persönliches Fazit: Wenn man veraltete Browser außen vor lässt und/oder einen Teil dazu beitragen möchte das sich das Web in die richtige Richtung entwickelt, kann man HTML5 und CSS3 im gesunden Maße einsetzen.



Relaunch meiner Website basierend auf HTML5 & CSS3-Features

Es ist wieder mal soweit... der halbjährliche Relaunch meiner Website steht an. Neben den neuen Elementen von HTML5 wie section, article und nav wurden auch CSS3-Anweisungen wie linear-gradient und column-count verwendet. Es gibt natürlich noch mehr HTML5-Elemente. Das wohl aufregendste ist canvas, das eine Schnittstelle zur Darstellung von beliebig programmierten visuellen Inhalten darstellt. Dann gibt es da noch video, welcher wohl über kurz oder lang den Flash-Player ersetzen wird und schon auf einigen Video-Portalen zum Einsatz kommt. Eine schöne Demo des video-Tags gibt es zum Beispiel hier zu sehen: http://www.dailymotion.com/openvideodemo.