Tag: tutorials

Code School: Die Anatomie von Backbone.js

Wer sich in eine Programmiersprache einarbeiten will oder die Materie zu einer komplexen Thematik vertiefen möchte, findet auch im Netz gute Anlaufstellen. Seiten wie Codecademy oder Code School bieten hier gute Quellen, die auch interaktiv genutzt werden können. So kann das Erlernte direkt auf der Seite ausprobiert und angewendet werden. Kürzlich erschien bei Code School auch eine Anleitung für Backbone.js, die Entwicklern das JavaScript-MVC-Framework näherbringen soll.

Die Anleitung, die aus Videos und interaktiven Bereichen besteht, gliedert sich in 7 Teile, in denen die Grundzüge von MVC, Templating, Events, Collections und Routing beleuchtet werden. Der komplette Kurs kostet 55 USD — hinter den Anleitungen von Code School steckt immerhin ein hoher Aufwand und die Qualität kann sich sehen lassen. Wer sich erst einmal selbst überzeugen will, kann das erste Level des Backbone-Tutorials auch ohne Anmeldung ausprobieren. Das Prinzip der "Levels" bei Code School zeigt den persönlichen Fortschritt der Anwender und hilft, das eigene Wissen in einem Bereich besser einzuschätzen.

Test-Driven Development: Tests mit jQuery und QUnit

Ich hatte vor einiger Zeit einen Artikel über testgetriebene Entwicklung mit jQuery gefunden, der Einsteigern ein einfaches Beispiel an die Hand geben soll. Wer sich mit der Thematik "Test-Driven Development" in JavaScript auseinandersetzt, könnte den Beitrag von Attachments.me interessant finden. Dort beschreiben die Entwickler des Webdienstes ein einfaches Szenario, in dem sie mit jQuery und dem Test-Framework QUnit zwei einfache Tests entwickeln.

Bei der testgetriebenen Entwicklung wird Produktionscode anhand von zuvor durchgeführten Tests geschrieben: Das bedeutet, dass die Tests am Anfang stehen und zu Beginn fehlschlagen. Durch das Schreiben des entsprechenden Produktionscodes werden die Tests erfolgreich validiert und weitere Tests können durchgeführt werden. Nachdem ein Modul (Unit) durch ausreichende Testdurchläufe validiert wurde, kann es in das Gesamtsystem integriert werden.
In dem Artikel von Attachments.me werden die Grundzüge des Paradigmas beleuchtet und einfache Ajax-Tests durchgeführt. Die Code-Snippets finden sich auch bei GitHub. Ein nützliches Tool zum Erstellen von Stubs und Mocks stellt übrigens Sinon.JS, das auch mit QUnit eingesetzt werden kann.

Reveal.js: HTML/CSS-Präsentationstool mit 3D-Effekten

Präsentation im Web sind schon lange keine Seltenheit mehr und gewinnen immer stärker an Bedeutung. Ein Framework wie beispielsweise Deck.js hilft dabei, HTML-Präsentation zu erstellen. Wer auch Flash als Technologie einsetzen kann, dürfte mit Prezi gut bedient sein, da sich mit diesem Tool interaktive Präsentationen nach dem Baukasten-Prinzip erzeugen lassen. Inzwischen gibt es auch eine HTML/CSS3-Version von Prezi, die sich Impress.js nennt und ähnliche Effekte durch Webstandards bietet.
Hakim El Hattab hat nun mit seinem Präsentationstool Reveal.js eine weitere Lösung geschaffen, mit der sich ebenfalls Web-Präsentationen entwickeln lassen, die von 3D-Effekten Gebrauch machen.

Der Entwickler setzt bei seinem Framework auf CSS3-3D-Transforms, wobei als Fallback auf gewöhnliche 2D-Transforms zurückgegriffen wird. Eine Reveal-Präsentation benötigt folgende HTML-Struktur:

• <div id="reveal">
• <div class="slides">
• <section>
• Slide-Inhalt
• </section>
• </div>
• </div>

Ein section-Bereich repräsentiert also einen Slide, wobei auch mehrere Sections verschachtelt werden können. Reveal bietet zudem verschiedene Optionen und so können die Slides auch in der Browser-History gespeichert werden. Weitere Details sowie eine Dokumentation finden sich bei GitHub.

Windows 8: Microsoft erklärt die Neuerungen

Der ursprüngliche Startknopf fehlt, es gibt einen zweiten Desktop und der klassische Desktop ist eine Metro-App: Microsoft hat mit Windows 8 einige Änderungen eingeführt, an die sich die Benutzer erst gewöhnen müssen. Tastaturbefehle sind wichtiger geworden, da sich darüber schneller bestimmte Aktionen erzielen lassen. Die Ausrichtung auf Tablet-PCs mit Touch-Display begründet sich zwar in vielen Innovationen, löst aber gleichzeitig auch Fragen bei den Benutzern aus. Diese Fragen will Microsoft in einem aktuellen Blog-Eintrag beantworten, in dem Kent Walter (Windows-Team) die wichtigsten Neuerungen behandelt.

So wird zuerst die Frage nach dem versteckten "Start"-Button geklärt, der sich in Windows 8 in der "Charm-Bar" versteckt, die zur Metro-Oberfläche gehört. Dort findet sich auch die Suche sowie grundsätzliche PC-Einstellungen, die separat zur klassischen Systemsteuerung stehen. Deutlich wird in dem Blog-Eintrag auch der Wechsel zwischen Desktop-Anwendungen und Metro-Apps, denn Letztere lassen sich mit einem separaten Manager umschalten.
Wichtig in Windows 8 sind schließlich die Tastaturkürzel, da diesen durch die Existenz von zwei Desktops ein höherer Wert zugeschrieben ist. Daher hat Microsoft eine Übersicht veröffentlicht, in der die neuen Shortcuts aufgelistet sind. Für Interessierte und Windows 8-Einsteiger dürfte der Blog-Eintrag also nützliche Informationen enthalten.

WebGL: Einführung und Grundlagen von Opera

Wer sich mit WebGL vertraut machen möchte, benötigt ein Grundverständnis der Technologie: Die Programmierung ist komplexer, da es schließlich um die Darstellung von dreidimensionalen Szenen geht, die zudem durch die Hardware beschleunigt werden. Wissen über Shader-Programmierung und 3D-Geometrie ist also Grundvoraussetzung. Eine gute Anlaufstelle ist nach wie vor die Seite "Learning WebGL", die viele Ressourcen und Tutorials bietet.
Dennoch schadet es nicht, auch andere Quellen heranzuziehen: Von Opera wurde vor einiger Zeit beispielsweise eine Tutorial-Serie über WebGL veröffentlicht, die sehr hilfreich sein dürfte. Nun wurde von Opera-Entwickler Erik Möller noch eine zweite Reihe ins Leben gerufen, die ebenfalls eine Einführung in WebGL darstellt. Teil 1 der "Raw WebGL 101"-Serie bietet einen guten Einstieg in die Materie.

Besonders gelungen ist die Veranschaulichung der Rendering-Pipeline von OpenGL ES 2.0, auf die WebGL aufbaut. Hier wird sehr deutlich, wie die Vertex-Informationen auf dem Bildschirm dargestellt werden und an welcher Stelle die Vertex- und Fragment-Shader zu finden sind. Ich bin gespannt auf die weiteren Teile dieser Serie, da die Opera-Entwickler sehr gute Arbeit leisten.

Webentwicklung: JavaScript-Referenz von Microsoft

JavaScript wird für die Entwicklung von modernen Webanwendungen und mobilen Versionen von Websites immer wichtiger. Die Auswahl an komfortablen Frameworks, Tools und Ressourcen wächst stetig und dennoch dürfen die nativen Aspekte von JavaScript nicht vernachlässigt werden. Es gibt bereits sehr gute Anlaufstellen und Referenzen für angehende und bestehende JavaScript-Entwickler:

• Superexpert JavaScript Reference
• ECMAScript 5-Kompatibilität im Blick
• Google JavaScript Style Guide
• JavaScript Garden
• Mozilla: Neu-Einführung in JavaScript
• Eloquent JavaScript

Eine weitere Quelle, die sehr aktuell ist und im Prinzip alle Bereiche von JavaScript abdeckt, wäre die JavaScript Language Reference von Microsoft. Die Seite ist umfasst Neuerungen, Grundlagen, fortgeschrittene Techniken sowie eine Referenz zu JavaScript.

Die Dokumentation ist eigentlich ein Teil der Anleitung zur Erstellung von Metro-Style-Apps, die essentiell in Windows 8 sein werden. Die Apps können sowohl mit C#, C++ oder Visual Basic als auch mit HTML5, JavaScript und CSS3 entwickelt werden. Unabhängig Windows 8 ist die gesamte Dokumentation zur Entwicklung mobiler WebApps sehr empfehlenswert, da hier die grundsätzlichen Gegebenheiten behandelt werden.

JavaScript: Sammlung mit Patterns und Anti-Patterns

In der Softwareentwicklung stellen Entwurfsmuster (Design Patterns) Lösungsansätze für bestimmte Probleme dar und lassen sich daher ganz unterschiedlich einsetzen. Ein Muster ist nur in einigen Fällen sinnvoll und sollte außerdem bestimmte Kriterien erfüllen. Auch für JavaScript gibt es bereits Entwurfsmuster, die verschiedene Bereiche abdecken.
So wie es Muster gibt, bestehen auch Antimuster (oder Anti-Patterns), die als "Bad Practices" anzusehen sind. Der Entwickler Shi Chuan hat sich die Mühe gemacht, etliche Muster und Antimuster für JavaScript zusammenzutragen. Auf dieser Website findet sich die Sammlung, die eine große GitHub-Seite widerspiegelt.

In der Sammlung finden sich allgemeine Muster, funktionale und objektbezogene Muster, Entwurfsmuster oder auch jQuery-Muster. Ein kleines Beispiel, das für die Erstellung eines Objekts das dazugehörige Muster und Antimuster zeigt:

• // Anti-Pattern
• var car = new Object();
• car.goes = "far";
•  
• // Empfohlenes Pattern
• var car = { goes: "far" };

Die Muster stammen von unterschiedlichen Quellen und diese sind auch im Quelltext vermerkt. Unter den klassischen Entwurfsmustern finden sich häufig verwendete Design-Patterns wie der Observer, das Singleton oder die Factory.
Die Sammlung soll künftig noch um weitere Patterns erweitert werden, wie etwa DOM- oder Browser-Muster.

Webdesign: Farbspiele, Typografie und mehr

Mit Farben lässt sich nicht nur in Bildbearbeitungsprogrammen spielen: Zur kommenden Seite Method of Action wurde das Spiel Color entwickelt, in dem es darum geht, möglichst schnell Farben und Farbpaare anhand eines Farbkreises zuzuordnen. Was zu Beginn relativ einfach durch die Werte "Hue" und "Saturation" zu bewerkstelligen ist, wird später schon etwas schwieriger, wenn analoge oder ternäre Farbschemata erkannt werden müssen.
Das Spiel ist sehr gelungen und hilft in jedem Fall dabei, Farben und deren Anordnungen besser zu verstehen. Zudem stehen noch zwei weitere Spiele bereit, mit denen sich typografische Details studieren lassen: Bei Shape Type und Kern Type können sowohl die Pfade einzelner Buchstaben als auch deren Laufweite in ganzen Wörtern analysiert und abgeschätzt werden.

Bei der Seite "Method of Action", die sich derzeit in einer Preview-Phase befindet, wird es unter Anderem darum gehen, ein besseres Verständnis für Design zu vermitteln. In "Missionen" können Benutzer bestimmte Design-Tasks erledigen und von erfahrenen Benutzern bewerten lassen. Nach und nach werden dann komplexere Missionen freigeschaltet und mit jeder erfolgreich abgeschlossenen Mission steigt auch die virtuelle "Erfahrung", die dann auch dazu genutzt werden kann, über eingereichte Design-Tasks von anderen Benutzern zu entscheiden. Man darf also gespannt sein.