Tag: entwicklung

Code Bubbles: Konzept für Entwicklungsumgebung

Die Entwicklung von komplexen Anwendungen oder Funktionen erfordert eine durchdachte und gut organisierte Code-Struktur. Sicherlich dürfte diese Thematik im Bereich der grundlegenden Frontend-Entwicklung mit HTML, CSS und JavaScript nur ansatzweise eine Rolle spielen, da in der Regel keine Module, Klassen, Methoden oder andere objektorientierte Aspekte benötigt werden. Dennoch ist es interessant zu sehen, was sich in der Welt der Entwicklungsumgebungen (IDEs) tut. Andrew Bragdon arbeitet im Department of Computer Science an einem Projekt, welches das Grundmodell einer IDE neu erfinden will. Mit dem "Code Bubbles Project" wird versucht, die Zusammenhänge und Strukturen einer Java-Anwendung übersichtlich darzustellen. Dabei wird auf die Visualisierung der Bestandteile gesetzt, die als Blasen (Bubbles) angezeigt werden.

In einem Video wird demonstriert, wie es sich mit der Entwicklungsumgebung arbeiten lässt. Entwickler können auf einer nicht limitierten Arbeitsfläche beliebig viele Fragmente (also Klassen, Methoden, usw.) anlegen und den Sichtbereich frei bewegen oder vergrößern. Die Codeblöcke können zudem mit Kommentaren versehen werden. Dabei steht die Übersichtlichkeit des Codes im Vordergrund. Das Video zeigt sehr schön, was mit einer derartigen IDE möglich ist.
Interessierte können sich für die Beta-Version anmelden und sich selbst überzeugen. Den Ansatz der grafischen Darstellung verfolgt man teilweise in dem Editor Sublime Text, der an der Seite eine Miniatur-Ansicht des Codes zur Navigation anbietet.

CSS3: Generator für Cross-Browser-Deklarationen

Die Idee von Border-Radius.com scheint großen Anklang zu finden und so haben Paul Irish und Jonathan Neal einen Generator für moderne CSS3-Effekte entwickelt. Mit CSS3 Please! steht ein komfortabler Editor für die möglichen CSS-Regeln zur Verfügung, mit dem sich einfach Cross-Browser-Regeln erstellen lassen. Bei dem interaktiven Editor ist eine Echtzeit-Vorschau enthalten, so dass man die Effekte direkt anpassen kann. Per Knopfdruck kann der CSS-Code in die Zwischenablage kopiert werden.

Zur Auswahl stehen Effekte wie abgerundete Ecken, Schatten, Verläufe, Rotationen oder die @font-face-Technik. Sehr schön sind die generierten Deklarationen für Internet Explorer, da nahezu alle Effekte mit "DXImageTransform"-Filtern realisiert werden können. Eine Ausnahme bilden runde Ecken, die erst mit Version 9 des Microsoft-Browsers verwendet werden können. Erlaubt es die Zielgruppe eines Webprojektes, kann mit der Verwendung von CSS3-Effekten viel Zeit gespart werden, da unnötige Verschachtelungen und transparente PNG-Grafiken entfallen.

Border-Radius.com: Vorschau für abgerundete Ecken

CSS3-Effekte und WebKit-Funktionen erfreuen sich trotz der relativ geringen Verbreitung großer Beliebtheit. Die Entscheidung über die Verwendung von modernen CSS-Deklarationen liegt nicht zuletzt beim Kunden und dessen gewünschter Zielgruppe für ein Projekt. Es wird sicherlich noch eine Zeit vergehen, bis die neue Browser-Ära einen globalen Anklang gefunden haben wird. Besonders Microsofts Internet Explorer 9 dürfte noch eine Weile auf sich warten lassen. Version 6 wurde am 1. März 2010 offiziell in Denver begraben (sogar Microsoft schickte Blumen mit Gruß).
Der Microsoft-Browser stellt das eigentliche Dilemma bei abgerundeten Ecken dar: Hierfür gibt es nur diverse Workarounds, ein HTC-Skript sowie eine offizielle Stellungnahme der Microsoft-Entwickler.
Wer bei Projekten dennoch modernen CSS-Code einsetzen kann, findet auf Border-Radius.com einen schönen Echtzeit-Generator für abgerundete Ecken.

Das kleine Online-Tool bietet die Möglichkeit, für jede Ecke einen anderen Radius zu definieren. Als Ausgabe erhält man Deklarationen für WebKit, Gecko und CSS3. Die CSS3-Eigenschaft "border-radius" ist hauptsächlich für Opera notwendig, da Apple- und Mozilla-Browser mit den eigenen Definitionen auskommen.

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.

Browser Ballot: Wahl in Deutschland am 17. März

Einige werden den Begriff "Browser Ballot" (Browser-Abstimmung) sicher schon häufiger gehört haben. Dabei handelt es sich um einen Auswahlbildschirm, der per Windows-Update an die Benutzer gesendet wird und darauf hinweist, dass es noch andere Webbrowser neben Internet Explorer gibt. Die Browser-Abstimmung musste von Microsoft auf Drängen der EU-Kommission umgesetzt werden, da die Vorinstallation des Internet Explorers als Manko galt. Die Auslieferung des Update-Pakets, das die Auswahl enthält, erfolgte für Nutzer in Frankreich, Großbritannien und Belgien bereits am 1. März 2010. In Deutschland werden Anwender am 17. März wählen können.
Die eigentliche Abstimmung ist eine Website, die in einem Fenster eingeblendet wird: Auf BrowserChoice.eu lässt sich die Auswahl der Browser begutachten.

Interessant sind vor allem die Texte, die sich unter den Browsern befinden — hier durften die Browserhersteller kreativ werden. Ein weiterer Punkt ist die Zufälligkeit der Reihenfolge, in der die Browser angezeigt werden. Der Algorithmus für den Zufall wurde von IBMs ODF-Architekt Rob Weir bemängelt und ist inzwischen durch den Fisher-Yates-Algorithmus korrigiert worden. Dadurch wird ein Array gleichmäßig per Zufall neu sortiert. Für Interessierte:

• function ArrayShuffle(a) {
• var d, c, b = a.length;
• while(b) {
• c = Math.floor(Math.random() * b);
• d = a[--b];
• a[b] = a[c];
• a[c] = d;
• }
• }

Lobenswert bei dem Auswahlbildschirm ist die Berücksichtigung der unabhängigen Webbrowser, die per Scrollbalken ausgewählt werden können.

RequireJS: JavaScript-Dateien als Module laden

Bei größeren Projekten kann es vorkommen, dass durch die Komplexität mehrere JavaScript-Dateien verwendet werden oder diese aufgrund eines bestehenden Frameworks schon vorhanden sind. Dann kann es der Fall sein, dass bestimmte Funktionen oder Aufrufe erst erfolgen sollen, nachdem eine Bibliothek fertig geladen wurde. Als Entwickler hat man ohne zusätzlichen JavaScript-Code keinen Einfluss auf die Reihenfolge, in der die Dateien einer Website geladen werden. Eine Möglichkeit besteht in der Umstrukturierung des HTML-Gerüsts, doch dieser Ansatz lässt sich in der Praxis nur selten umsetzen.
Um JavaScript-Dateien nun als separate Module zu nutzen, bietet sich ein Skript wie RequireJS an — dadurch werden Befehle erst dann ausgeführt, wenn die gewünschten Skripte fertig geladen wurden. Die Implementierung für das einfache Laden von mehreren Dateien könnte dann so aussehen:

• …
• <script src="scripts/require.js"></script>
• <script>
• require(["datei1.js", "datei2.js", "datei3.js"],
• function() {
• // This function will be called when all the
• // dependencies listed above are loaded.
• // Note that this function could be called
• // before the page is loaded. This callback
• // is optional.
• }
• );
• </script>
• …

Mit RequireJS lassen sich Skripte zudem als Module mit bestimmten Abhängigkeiten behandeln. Weiterhin können sich mit der Bibliothek Sprachvarianten (I18N) für die Ausgabe von Texten erstellt werden. Mehr über die Verwendung der unterschiedlichen Funktionen findet sich in der API-Dokumentation. Eine Schnittstelle für jQuery ist ebenfalls enthalten.
Interessant ist schließlich das Optimization Tool, das den Google Closure Compiler nutzt, um mehrere JavaScript-Dateien in einer Datei zu kombinieren. Dieser Schritt sollte am Ende der Entwicklungsphase stehen und reduziert die Anzahl der Requests, die für ein JavaScript-Projekt benötigt werden.

jQuery: Klicks außerhalb eines Elements feststellen

Bei der Entwicklung von Benutzeroberflächen und Interaktionen sind in manchen Fällen die gegebenen Möglichkeiten unzureichend. Daher haben einige Entwickler schon virtuelle DOM-Events konzipiert, mit denen erweiterte Abfragen möglich sind — so lässt sich beispielsweise feststellen, wie lange der Mauszeiger über einer Fläche verweilt oder wie lange die Maustaste vom Anwender betätigt wurde. Eine weitere Funktionalität in Form eines jQuery-Plugins bietet Ben Alman mit seinem "clickoutside"-Event an: Damit können Programmierer auf Ereignisse reagieren, die auftreten, sobald der Benutzer einen Punkt außerhalb eines entsprechenden Elements angeklickt hat.

Dies könnte zum Beispiel bei einer Lightbox der Fall sein. Das Verwenden einer großen Overlay-Fläche würde dadurch entfallen. Testen lässt sich das jQuery-Event auf der Demoseite.
Ein Bonbon gibt es vom Plugin-Autor für interessierte JavaScript-Entwickler: Der Quelltext ist kommentiert und kann bei GitHub eingesehen werden.