Tag: tutorials

Webdesign: Muster für interaktive Bedienelemente

Umfangreiche und anschauliche Bücher stellen neben Ressourcen aus dem Internet die beste Methode dar, um sich mit einem Thema vertraut zu machen. Ein schönes Werk zum Thema Web-Benutzeroberflächen stellt beispielsweise ein Buch vom O’Reilly-Verlag dar, in dem Prinzipien und Entwurfsmuster für interaktive Web-Auftritte behandelt werden. Passend zum Buch gibt es eine Website, auf der sich die Inhalte des Buches in einer kurzen Übersicht betrachten lassen. Weiterhin finden sich auf der Seite aber auch interessante Blog-Artikel: In diesem Beitrag werden 12 Beispiele zu bekannten Bedienelementen vorgestellt und beschrieben.

Dabei geht es also hauptsächlich um die Gestaltung und Darstellung von Spalten, Tabellen, Suchergebnissen, Formularen, Paletten oder sonstigen Anwendungsbereichen. In dem Beitrag finden sich zu jedem Entwurfsmuster verschiedene Screenshots von vorbildlichen Beispielen.
Weiterhin gibt es in dem Blog schöne Beiträge über Web-Komponenten oder interaktive Steuerelemente von Websites. Einen guten Artikel über die zukünftige Welt des User Interface Designs gab es übrigens im Februar bei WebDesignerWall.

JavaScript: Ajax-Inhalt durch Deep-Links darstellen

Der Artikel bei Impressive Webs ist zwar schon etwas älter, aber vielleicht kann er bei dem einen oder anderen Web-Projekt behilflich sein. In dem Beitrag geht es um die Umsetzung von Deep-Links in JavaScript- und Ajax-Anwendungen. Das bedeutet, dass bestimmte Inhaltsbereiche über einen Hash-Link (#-Zeichen) abgerufen und dargestellt werden können. In dem Artikel wird die Programmierung einer solchen Funktionalität in JavaScript beschrieben.

Neben dem eigentlichen JavaScript-Teil ist auch die Umsetzung der eigentlichen Seite interessant: Hier wurde eine PHP-Datei geschrieben, die verschiedene Inhalte per GET-Parameter im Stil von "?view=employee1" darstellt. Durch JavaScript wird anschließend der Teil "?view=" durch das Hash-Zeichen "#" ersetzt, so dass entsprechende Deep-Links entstehen, die bei einem direkten Aufruf den referenzierten Inhalt darstellen. Auf der Demo-Seite kann die Funktionalität angesehen werden.
Das Ganze lässt sich auch sehr einfach mit jQuery umsetzen, falls mit der Bibliothek gearbeitet wird. Hier wird der Ajax-Inhalt in den Container mit der ID "ajaxcontent" geladen:

• $(document).ready(function(){
• function ajaxHashContent(ajaxFile) {
• $("#ajaxcontent").load(ajaxFile);
• }
•  
• ajaxHashContent(location.hash.substr(1) + ".html");
• });

Voraussetzung ist natürlich, dass die Ajax-Dateien die Endung ".html" besitzen und sich im gleichen Verzeichnis befinden.

Webentwicklung: PHP-Endung bei URLs entfernen

Mit .htaccess-Befehlen lassen sich wichtige Aspekte der Suchmaschinenoptimierung umsetzen. Neben 404-Fehlerseiten oder dem Entfernen der "www"-Subdomain zählen vor allem saubere URLs zu den Vorzügen von .htaccess-Dateien. Wer eine einfache Website mit PHP realisiert hat und verschiedene Dateien in Form von "http://www.domain.com/name-der-seite.php" vorliegen hat, kann bei Bedarf die Erweiterung ".php" mit ein paar Zeilen .htaccess-Code ausblenden. Bei stuntSnippets findet sich dazu ein kleiner Artikel, in dem die Thematik behandelt wird.

Neben diesem Beitrag finden sich bei stuntSnippets noch weitere interessante Code-Bausteine, so dass die kleinen Lösungen der Seite in vielen Fällen behilflich sein dürften.
Unabhängig davon folgt hier noch ein kleines .htaccess-Snippet, durch das saubere URLs mit PHP und einer Struktur im Stil von "index.php?id=seite" erreicht werden können:

• RewriteEngine On
•  
• RewriteCond %{REQUEST_FILENAME} -f [OR]
• RewriteCond %{REQUEST_FILENAME} -d
• RewriteRule ^(.+) – [PT,L]
•  
• RewriteRule ^(.*) index.php?id=$1
• RewriteRule ^(.*)/(.*) $2

Weitere nützliche .htaccess-Snippets finden sich unter Anderem hier.

Webentwicklung: Sammlung etlicher PHP-Snippets

Gute Snippet-Sammlungen finden sich mittlerweile häufig im Netz. Wer noch ein paar interessante PHP-Snippets sucht, sollte bei PHPSnippets.info vorbeischauen. Hier werden in kurzen Zeitabständen nützliche Code-Schnipsel aus unterschiedlichen Bereichen veröffentlicht. Dabei handelt es sich um knappe, aber hilfreiche Funktionen, die zudem in Kategorien eingeteilt sind.

In den Snippets finden sich so beispielsweise Funktionen zur Währungsumrechnung oder automatischen Backup-Erstellung einer MySQL-Datenbank. Weiterhin gibt es ein Snippet, mit dem sich der Ursprung einer "TinyURL"-Adresse anzeigen lässt.
Die Seite dürfte einen Platz in den Lesezeichen finden, da auch in der kommenden Zeit sicherlich weitere Snippets folgen werden.

JavaScript: Alternative Methoden für If-Bedinungen

In Skriptsprachen stellt eine If-Bedingung die einfachste Form einer Abfrage dar, mit der sich Variablen und Objekte überprüfen lassen. Auch wenn If- und Switch-Bedingungen eine einfache Möglichkeit zur Überprüfung darstellen, gibt es oft elegantere Wege für die Erstellung von Kontrollstrukturen. Einige Optionen zeigt so auch Angus Croll in einem Blog-Eintrag. Darin erklärt er verschiedene Alternativen und geht dabei auf die Aspekte "Statement-Branching" (Ersatz von if, else, switch, for, while) und "Micro-Branching" (Nutzung von && und ||) ein.

So lassen sich in der Regel längere If-Bedinungen beispielsweise durch die Verwendung des "||"-Operators verkürzen. Weiterhin können Switch-Abfragen durch in Objekte verschachtelte Funktionen ersetzt werden. Der Artikel dürfte für objektorientierte Entwicklung in JavaScript einen Blick wert sein.

CSS: Mehr Möglichkeiten mit Conditional Comments

Eine Methode, um gesonderte Stile für verschiedene Versionen des Internet Explorers auszuliefern, stellen neben CSS-Hacks die beliebten "Conditional Comments" dar. Hierbei können durch spezielle Bedingungen im HTML-Code entsprechende Browser-Versionen angesteuert werden. Es bleibt dem Entwickler überlassen, was in dem "if"-Bereich definiert wird. Paul Irish empfiehlt beispielsweise in einem älteren Artikel die Benutzung von unterschiedlichen IDs für den body-Bereich — dadurch entfallen browserspezifische Stylesheets und auch CSS-Hacks werden überflüssig.
Ein Stück weiter hinten setzt man bei Impressive Webs an: Kürzlich wurde ein schöner Beitrag veröffentlicht, in dem erweiterte Möglichkeiten für Conditional Comments vorgestellt werden.

Dabei werden diverse Deklarationen beschrieben, die vielleicht nicht jedem CSS-Entwickler bekannt sind. So können noch genauere Angaben für den gewünschten Browser gemacht werden und auch erweiterte Operatoren wie "&" oder "|" sind in Verbindung mit Subexpression-Operatoren (Klammern) möglich. Der Artikel dürfte bestimmt für das eine oder andere Web-Projekt nützlich sein und sollte in den Bookmarks abgelegt werden.

TYPO3 4.3 Multimedia Cookbook: Eine Rezension

TYPO3 zählt wahrscheinlich zu den bekanntesten und auch komplexesten Content-Management-Systemen, die zudem als Open Source-Projekt zur Verfügung stehen. Aufgrund der vielen Aspekte, die mit einem aufwendigen Redaktionssystem verbunden sind, gibt es ebenso viele Ressourcen. Ein Bereich, der sehr gut in TYPO3 umgesetzt wurde, ist die Verwaltung und Einbindung von multimedialen Inhalten (Bilder, Musik, Videos, PDF-Dokumente, usw.).

Die Thematik zieht viele Möglichkeiten mit sich und bietet Raum für Nachschlagewerke. Ein Werk, in dem über 50 Rezepte für die Verwaltung von multimedialen Inhalten mit einer TYPO3-Website enthalten sind, stellt so auch das "TYPO3 4.3 Multimedia Cookbook" von Dan Osipov dar. In diesem Artikel will ich über meinen Eindruck des Buches, das sich an fortgeschrittene TYPO3-Entwickler richtet, schreiben. Für die Arbeit mit dem Buch werden erweiterte Kenntnisse in HTML, PHP und TypoScript vorausgesetzt.

jQuery Deconstructed: Blick hinter die Kulissen

Wer sich in die verborgenen Tiefen des jQuery-Frameworks vorarbeiten will, um den Kern der JavaScript-Bibliothek zu verstehen oder bestimmte Funktionen nachzuschlagen, kann sich den Quellcode ansehen. Die aktuelle Version von jQuery kann wie gehabt als Development-Release heruntergeladen werden — der Quelltext ist 6240 Zeilen lang und enthält Kommentare zu den verschiedenen Funktionen.
Eine schöne Möglichkeit, um die Wurzeln des Frameworks etwas anschaulicher darzustellen, steht mit jQuery Deconstructed zur Verfügung. Bei diesem Projekt wurde der Quelltext von jQuery in visuelle Blöcke unterteilt, die per Klick aufgeklappt werden können.

Durch verschiedene Farben für Sektionen, Funktionen, Objekte und Eigenschaften ist es sehr einfach, die unterschiedlichen Funktionsweisen von jQuery zu verstehen. Zudem werden wieder vorkommende Funktionen durch gepunktete Linien gekennzeichnet und erlauben es, direkt zu der entsprechenden Stelle im Quelltext zu springen.
Die jQuery-Bibliothek ist sehr komplex und mithilfe von jQuery Deconstructed kann der Aufbau sicherlich besser verstanden und erkundet werden.