Tag: tipps

ZURB CSS Grid Builder: CSS-Code für Raster erstellen

Für das Erstellen von CSS-Rastern gibt es mittlerweile verschiedene Tools: Mit dem Yahoo! CSS Grid Builder oder Plumb lässt sich CSS-Code für die entsprechenden CSS-Frameworks erstellen. Eine Overlay-Grafik kann beispielsweise mit dem Gridmaker von Paul Holliday generiert werden und mithilfe von Hashgrid lässt sich per jQuery ein Raster über der Website einblenden.
Wer nun ein CSS-Raster erstellen möchte, ohne dabei auf ein CSS-Framework zurückgreifen zu wollen, kann den ZURB CSS Grid Builder nutzen. Die Online-Anwendung bietet komfortable Möglichkeiten, fertigen CSS-Code aus benutzerdefinierten Vorgaben zu generieren.

Neben der Spaltenbreite kann der Abstand zwischen den Spalten angegeben werden. Schließlich lässt sich noch die Anzahl der Unterteilungen definieren. Sehr schön bei dem Werkzeug ist die verkleinerte Browserfenster-Vorschau, in der das finale Raster betrachtet werden kann. Das Miniatur-Fenster kann auf verschiedene Breiten (1440, 1280 und 1024 Pixel) eingestellt werden. Per Knopfdruck wird im unteren Seitenbereich der fertige CSS-Code angezeigt. Interessant sind unter Anderem die Korrekturen für Internet Explorer 6, die für eine konstante Browser-Darstellung sorgen.

MooTools 1.2 Beginner's Guide: Eine Rezension

Mit MooTools lassen sich relativ einfach und schnell dynamische Webprojekte realisieren. Neben Effekten und Animationen stellt Ajax ein weiterer Bereich dar, für den die JavaScript-Bilbiothek gute Möglichkeiten bietet. Das MooTools-Framework ist aktuell in Version 1.2 verfügbar und zeichnet sich vor allem auch durch seinen objektorientierten Ansatz aus — JavaScript bietet nativ nur eingeschränkte Möglichkeiten für Objekte, Klassen und Vererbung.

Für MooTools gibt es mittlerweile verschiedene Bücher. Ich habe das kürzlich veröffentlichte Werk "MooTools 1.2 Beginner's Guide" von Jacob Gube (Six Revisions) und Garrick Cheung unter die Lupe genommen. In dieser Rezension will ich den Inhalt des Buches, das sich an Einsteiger und Anfänger richtet, beleuchten. Voraussetzung für die Arbeit mit dem Buch (und entsprechenden Projekten) sind JavaScript-Grundkenntnisse sowie fortgeschrittene HTML- und CSS-Fähigkeiten.

Support Details: Systemdaten anzeigen lassen

Wenn es um die Abstimmung von Webprojekten geht, ist die Kommunikation mit dem Kunden ein wichtiger Aspekt. Um Missverständnisse auf der technischen Seite zu vermeiden, müssen Entwickler über die Systemdaten des Computers (Betriebssystem, Browser-Version, Bildschirmauflösung, Flash-Version, etc.) des Kunden und der Zielgruppe informiert sein. Oft ist es der Fall, dass nicht alle notwendigen Details bekannt sind oder ausfindig gemacht werden können. Um nun Kunden das Auslesen der notwendigen Daten zu erleichtern, kann beispielsweise die Seite "Support Details" genutzt werden.

Die Website stellt alle notwendigen Daten als Grafiken dar und verschickt die Zusammenfassung bei Bedarf per E-Mail an den gewünschten Empfänger. Sehr gelungen ist vor allem die "Export PDF"-Funktion, mit der die Systemdaten in einem PDF-Dokument aufgeschlüsselt werden und anschließend heruntergeladen werden können. Alternativ können die Informationen als CSV-Tabelle gespeichert werden.

Cheat-Sheets.org: Große Sammlung an Referenzen

Vor einiger Zeit berichtete ich über die Seite "DevCheatSheet", auf der sich eine umfangreiche Liste an Cheat Sheets (Referenzkarten) findet. Da man nie genug Ressourcen zur Verfügung haben kann, gibt es eine weitere Sammlung, die eine Unmenge an Cheat Sheets für Programmiersprachen und Programme beinhaltet. Bei Cheat-Sheets.org hat man sich auf das Wesentliche konzentriert: Auf der linken Seite findet sich eine Liste mit den verfügbaren Sprachen und Anwendungen, während im rechten Bereich die Links zu den Cheat Sheets platziert sind.

In der Sammlung finden sich alle denkbaren Bereiche, angefangen bei Auszeichnungssprachen über Content-Management-Systeme bis hin zu Datenbanken und Programm-Shortcuts. Sicherlich sind manche Referenzkarten nicht aktuell, aber dennoch dürften sich in der Liste nützliche Übersichten finden.

Adobe Font Finder: Schriftarten von Adobe finden

Adobe verfügt über ein umfangreiches Repertoire an Schriftarten, die im Adobe Store ab 29,99 USD erworben werden können. Dabei handelt es sich meistens um OpenType-Fonts, die sich auf allen gängigen Systemen einsetzen lassen. Wichtig bei den Schriftarten sind die Lizenzen zur Einbettung (Embedding) — soll eine Schriftart im Web verwendet werden (etwa durch Cufón oder "@font-face"), muss der Zeichensatz entsprechenden Lizenzbestimmungen unterliegen. Bei Adobe gibt es daher die Variante "Editable" bei den Richtlinien (Embedding Permissions) für das Einbetten von Schriftarten. So unterliegen beispielsweise alle Fonts der Familie "Adobe Originals" dem Lizenztyp "Editable" und können entsprechend genutzt werden.
Für das Durchsuchen der Adobe-Schriftarten bietet Adobe auch ein Werkzeug an, mit dem sich Fonts nach Klassifizierung, Stil, Thema oder Benutzung sortieren lassen. Der Adobe Font Finder ermöglicht zudem eine Echtzeit-Vorschau für selbst definierte Vorschau-Texte der Schriftarten.

Die Flash-Anwendung listet die gefundenen Schriftarten alphabetisch auf. Per Klick gelangt man direkt zur Detailseite des gewünschten Zeichensatzes. Anschließend kann die Schriftart einzeln oder im Paket gekauft werden. An manchen Stellen lässt die Kategorisierung des Font Finders noch zu wünschen übrig. Dennoch stellt die Seite ein schönes Werkzeug für das Stöbern in der Font-Sammlung dar.

JSPatterns: Nützliche Funktionen und Entwurfsmuster

Stoyan Stefanov dürfte vielen Webentwicklern durch sein Blog "PHPied" ein Begriff sein. Er hat diverse Bücher veröffentlicht, darunter auch "Object-Oriented JavaScript ". Der Entwickler betreibt seit geraumer Zeit auch eine Website, die sich mit allgemeinen Funktionen und Entwurfsmustern (Design Patterns) für JavaScript befasst. Bei JSPatterns sammelt und erklärt Stoyan Stefanov diverse JavaScript-Snippets, die zum Teil sehr interessante Eigenschaften der Skriptsprache offenlegen. Dabei geht es hauptsächlich um Klassen, Vererbung (Inheritance) oder andere objektorientierte Aspekte.

Die Patterns sind meistens mit praxisnahen Beispielen versehen, so dass sie besser verstanden werden können. JavaScript-Entwickler werden in der Sammlung viele hilfreiche Funktionen finden. Die Snippets sind in der Regel nicht komplex und dennoch interessant. So findet sich auf dem Blog beispielsweise ein Pattern, mit dem eine Funktion beim Instanziieren eine einmalige Funktion ausführt — dies kann etwa für das Einstellen (Setup) von Eigenschaften sinnvoll sein. Das Snippet wäre:

• function setup() {
• alert(1);
• return function() {
• alert(2);
• };
• }
•  
• var my = setup(); // Ausgabe: 1
• my(); // Ausgabe: 2

Wer Grundkenntnisse oder eine umfangreiche Einführung in JavaScript benötigt, ist mit "Eloquent JavaScript" bestens bedient.

YUI Library: Alles rund um die Yahoo!-Frameworks

Die verschiedenen JavaScript-Bibliotheken eignen sich für verschiedene Projekte. Manche Frameworks unterscheiden sich nur wenig, andere variieren stark im Funktionsumfang. Die Yahoo! User Interface Library (YUI) gibt es derzeit in den Versionen 2 und 3. Neben den Seiten beim Yahoo! Developer Network (YDN) gibt es noch eine offizielle Website für die JavaScript-Frameworks. Hier findet sich eine große Community, die das Projekt durch Forenbeiträge und eigene Skripte bereichert.

Besonders interessant für YUI-Entwickler ist die Galerie, in der sich fertige Plugins finden. Dabei ist für jeden Geschmack etwas dabei: Angefangen bei Accordions über Date Picker bis hin zu kompletten WYSIWYG-Editoren. Die Benutzerskripte sind mit Beispiel-Codes und Dokumentationen versehen. Zudem finden sich auf den Plugin-Seiten direkt Diskussionen aus dem Forum.
Die YUI-Community ist sehr vorbildlich und auch andere Framework-Websites haben interessante Bereiche: Bei jQuery besteht beispielsweise mit den jQuery Meetups die Möglichkeit, mit anderen Entwicklern Kenntnisse auszutauschen.

Password Meter: Sichere Passwörter erstellen

Die Sicherheit beim Surfen im Netz wird von verschiedenen Faktoren beeinflusst. Eine vollständige Sicherheit wird nie gewährleistet sein und dennoch lässt sich das Risiko auf ein Minimum reduzieren. Dabei spielen vor allem starke Passwörter eine wichtige Rolle. Ein gutes und sicheres Passwort besteht aus verschiedenen Komponenten und Kombinationen — dazu gehören Zahlen, Groß- und Kleinbuchstaben sowie Sonderzeichen. Dennoch sollte man sich ein Passwort in der Regel merken können, weshalb es nicht zu kompliziert sein sollte. Um also ein gutes Passwort zu erstellen, bietet sich ein Werkzeug wie der Password Meter an. Bei der JavaScript-Anwendung wird in Echtzeit die Stärke eines Passwortes ermittelt. Dadurch kann ein Benutzer durch Ausprobieren die Stärke des Passwortes wesentlich erhöhen.

Der Password Meter (oder Password Strength Checker) ist sehr durchdacht und bezieht bei der Bewertung eines Passwortes intelligente Aspekte ein. So werden verschiedene Bereiche (wiederholende Zeichen, Sonderzeichen, Buchstabenanteil, aufeinanderfolgende Zeichen, etc.) ausgewertet und im Optimalfall mit einem Bonus versehen.
Der Password Meter lässt sich auch herunterladen und kann somit offline genutzt werden.

Webentwicklung: Ablauf eines URL-Aufrufs

Grundlegende und selbstverständliche Dinge in Bereich der Web-Technik sind nicht immer selbstverständlich. In manchen Bereichen genügen Basiskenntnisse aus, um die Arbeit an Projekten durchführen zu können. Wer sich dennoch etwas tiefer mit bestimmten Aspekten befassen will, findet im Netz genügend Ressourcen. So gibt es auch einen ausführlichen Artikel von Igor Ostrovsky über den Ablauf eines URL-Aufrufs. Der Entwickler geht in seinem Beitrag auf die einzelnen Vorgänge ein, die nach dem Eingeben einer Adresse in den Browser durchgeführt werden.

Der Autor untermalt die theoretischen Erklärungen durch Illustrationen und Aufzählungen, was die ganze Thematik noch besser verständlich macht. Dabei werden die einzelnen Stationen wie Webserver-Software, Request-Handler, Redirects oder AJAX-Anfragen anhand von Beispielen beschrieben.
Für das Auffrischen oder Nachschlagen dieser Thematik ist der Artikel also empfehlenswert und zudem verständlich geschrieben.

SimpleSlider: Einfacher Schiebe-Effekt mit jQuery

Nicht immer sind aufwendige und effektlastige Animationen bei Webprojekten gefragt — einfache Effekte können dezent die gewünschten Informationen übertragen oder bestimmte Aspekte besser beleuchten. Wer auf der Suche nach einem einfachen Slider (Verschiebung) ist, kann sich das jQuery-Plugin von Justin Jones ansehen: Der SimpleSlider wurde von dem Entwickler für ein eigenes Projekt erstellt und erfüllt seinen Zweck. Listenelemente (li) aus einer Liste (ul) werden einfach von rechts nach links animiert. Zudem kann die Animation manuell durch Schaltflächen gesteuert werden.

Das Skript kann in 3 Demonstrationen getestet werden: Als Basis-Version, mit CSS-Eigenschaften oder erweiterten Einstellungen. Das Plugin wird in der einfachen Variante wie folgt eingebettet:

• $("element").simpleslider();

Bei dem aufgerufenen Element handelt es sich wie oben erwähnt um eine Liste, deren Kind-Elemente animiert werden. In den Optionen des jQuery-Plugins können diverse Anpassungen (Geschwindigkeit, Schaltflächen, etc.) vorgenommen werden. Die Buttons können per CSS umgestaltet werden.