Kategorien
Boilerplates & andere Tools JavaScript & jQuery Programmierung Sonstige Programmiersprachen

Neu und kostenlos: Microsofts Editor Visual Studio Code für Windows, Mac und Linux

Mehr denn je öffnet sich Microsoft der Außenwelt. Auf der hauseigenen Build-Konferenz präsentierte Microsoft den neuen Code-Editor „Visual Studio Code“, der kostenlos verteilt wird. Als kleine Sensation darf gewertet werden, dass der Editor nicht nur für Windows, sondern auch für Mac OS X und Linux erhältlich ist. Visual Studio Code versteht sich hierbei nicht als komplette Entwicklungsumgebung wie sein großer Bruder Visual Studio, sondern als „leichte“ Variante im Stil von Sublime Text oder Atom. Schon in der Vergangenheit hatte Microsoft solche kleinen Lösungen im Angebot, aber stets limitiert auf Windows-User und Microsoft-Sprachen. Damit ist nun offenbar Schluss…

Microsofts Code-Editor Visual Studio Code für alle Betriebssysteme

Microsoft Visual Studio Code

Microsoft öffnet sich immer weiter und entwickelt nun auch im Developerbereich Applikationen für andere Betriebssysteme. Auf der offiziellen Haus-Entwicklerkonferenz Build stellte Microsoft völlig überraschend den neuen Code-Editor „Visual Studio Code“ vor. Der Editor befindet sich noch im „Preview“-Status. Es sind also noch nicht alle Funktionen integriert und es funktioniert noch nicht alles 100%ig reibungslos. Doch der erste Eindruck ist schon mal recht positiv und der Funktionsumfang brauchbar. Auch wenn der Editor für die Bearbeitung von ASP.NET und Node.js angepriesen wird, so kann er doch bedeutend mehr.

Die HTML- und JavaScript-Dateien des Editors werden mittels Chromium gehostet, der Open-Source-Variante von Googles Webbrowser Chrome. Allerdings wird der Umweg über das quelloffene Electron-Framework gegangen, aus dem der Atom-Editor entstanden ist. Der Vorteil dieses Weges ist, dass man die App direkt starten kann und nicht installieren muss. Das funktioniert unter allen Betriebssystemen.

MacWinLinux2

An den Funktionsumfang von Visual Studio kommt Visual Studio Code natürlich nicht heran. Das ist naheliegenderweise auch nicht beabsichtigt. Entwickelt wurde der Code-Editor für das Entwickeln und Debuggen von Cloud- und Webanwendungen. Der zurzeit noch rudimentäre Debugger ist aktuell nur für Node.js-Projekte nutzbar.

Microsoft Visual Studio Code
Debugging mit Visual Studio Code

Visual Studio Code bietet bereits in der Preview-Version Syntax-Highlighting für mehr als 20 Sprachen, IntelliSense Auto-Vervollständigung, Bracket Matching, anpassbare Keyboard-Shortcuts, Steuerung per Kommandozeile, automatische Einrückung und Snippet-Support. Unter anderem werden HTML5, CSS 3 und PHP unterstützt.

Visual Studio Code – Look and Feel

Der Editor erinnert stark an den Sublime Text 2 Editor und kann ebenfalls auf persönliche Bedürfnisse angepasst werden. Sehr praktisch ist die Möglichkeit, das Editor-Fenster zu teilen, um mehr als eine Datei gleichzeitig bearbeiten zu können.

visual-studio-code-unterteilt

Visual Studio Code kommt zurzeit mit 2 Themes daher, einem dunklen und einem hellen. Diese lassen sich entweder über das Menü oder über die Kommando-Zeile abrufen und einstellen.

theme-wechsel

Die Code-Vervollständigung funktioniert reibungslos und schnell. Hier geht Microsoft den richtigen Weg. Allerdings ist anzumerken, dass die Vervollständigung nur mit der Sprache funktioniert, die das Dateiformat vorgibt. Bei PHP existieren noch grundsätzliche Schwächen, bei gemischten Dateien wie WordPress-Theme-Templates ist man leider noch auf überwiegende Handarbeit angewiesen. Vielleicht bietet die Zukunft eine Erweiterung für die WordPress-Theme-Entwicklung.

Sehr gut funktioniert die Code-Vervollständigung mit reinen CSS- oder HTML-Dateien.

css-vervollstaendigung

html-vervollstaendigung

Integrierte Git Versions-Kontrolle

Sehr hilfreich kann die integrierte Git-Versionskontrolle sein. Ein einfaches Erstellen von Branches, Push, Pull und Synchronisation ist kein Problem.

GitVersionControl

Visual Studio Code und der Datenschutz

Visual Studio Code befindet sich noch im offiziellen Vorschau-Status. Programmabstürze und Freezes  können daher noch vorkommen. Wer sich zu diesem Zeitpunkt den Editor herunterlädt, erklärt sich damit einverstanden, dass Absturz-Berichte automatisch an Microsoft gesendet werden. Microsoft bittet explizit darum, den Editor nicht herunterzuladen, wenn man damit nicht einverstanden ist.

Ein Ausblick auf die Zukunft von Visual Studio Code

Den Funktionsumfang möchte Microsoft noch deutlich erweitern. Angedacht ist die Erweiterbarkeit durch Dritte. Hier möchte Microsoft wohl einen ähnlichen Weg beschreiten, wie die Macher von Atom oder Sublime Text 2. Jedoch soll Visual Studio Code stets ein leichter Editor für Web- und Cloud-Anwendungen bleiben, und keine aufgeblasene Entwicklungsumgebung werden. Das Potential zu einem vielgenutzten und beliebten Code-Editor hat Visual Studio Code. Die Zukunft wird zeigen, wie beliebt der Editor werden kann.

Das Video zu Visual Studio Code

Fazit

Microsofts Visual Studio Code macht einen recht interessanten Eindruck, kann mich aber zum jetzigen Zeitpunkt nicht zum Wechsel veranlassen. Da der Code-Editor sich in einer frühen Entwicklungsphase befindet, kann noch viel geschehen. Gerade die zukünftige Möglichkeit der Erweiterung durch Dritte kann recht interessant werden. Meine Empfehlung ist, den Editor nicht aus den Augen zu verlieren.

Links zum Beitrag

(dpe)

Kategorien
Apps Boilerplates & andere Tools Design Editoren HTML/CSS Programmierung Responsive Design UI/UX Webdesign

Hybrid-Apps entwickeln leicht gemacht: Top-Tools und Hilfsmittel

Erinnern Sie sich noch an die Zeit, als die ersten Smartphone-Apps auf den Markt kamen? Die iPhone-3G-Werbung wollte uns damals einreden, dass es für nahezu alles eine App gäbe. Das mag zu jener Zeit vielleicht ein bisschen übertrieben gewesen sein; heute aber würde dem wohl kaum einer mehr widersprechen. Und das liegt vor allem auch an der steigenden Popularität hybrider Apps in den letzten Jahren. Da immer mehr Unternehmen auf den App-Zug aufspringen, um ihren Kunden einen noch schnelleren und bequemeren Service zu bieten, sind App-Entwickler immer gefragter. Der einzige Haken an der Sache sind die für kleine Unternehmen extrem hohen Kosten für die Entwicklung nativer Apps sowie die Code-Weiterentwicklung für andere Systeme. Das Problem für die Entwickler besteht darin, dass das Erlernen des nativen Codes und die Bereitstellung von Updates für jede Sprache extrem aufwendig sind.

hybridapps-teaser

Aus diesem Grund schwenken immer mehr Unternehmen und Entwickler auf Hybrid-App-Entwicklung um. Hybride Apps nutzen Webcode wie z. B. HTML, CSS usw., sind aber in einer nativen App eingebettet und nutzen eine spezielle Plattform, sodass die App trotzdem Zugriff auf einige native Funktionen hat. Oder wie Adam Bradley in seinem Mozilla-Artikel schrieb: „In seiner einfachsten Form ist eine Hybrid-App nichts weiter als ein Internetbrowser ohne URL-Zeile und Zurück-Button.“

Die Vorteile einer Hybrid-App:

  • Keine besonderen Fähigkeiten oder Kenntnisse nötig; Ihre vorhandenen Kenntnisse über Webentwicklung reichen völlig aus.
  • Ein Code für alle Plattformen.
  • Ein responsives Design für alle Geräte.
  • Zugriff auf einige native Funktionen des Geräts.
  • Funktioniert sowohl auf mobilen Geräten als auch auf dem PC.

Es liegt auf der Hand, dass diese Vorteile sowohl die Kosten für Kleinunternehmen als auch das Kopfschmerzpotential für Entwickler um einiges mindern können. Ich weiß sehr wohl, dass Hybrid nicht für jede App geeignet ist. Beispielsweise ist der Zugriff auf native Funktionen beschränkt und es kann durchaus schwierig sein, sie wie eine App aussehen zu lassen und auszuführen. Damit riskiert man wiederum, dass die App nicht im Apple Store aufgenommen wird. Außerdem funktionieren Hybrid-Apps manchmal nicht richtig, wenn sie zu aufgeblasen sind wie z. B. bei einem 3-D-Spiel.

03-hybrid-app-development-tools
Songhop-App – erstellt mit dem Ionic Framework.

Wenn Sie jedoch eine App erstellen möchten, die hybridtauglich ist, lesen Sie weiter. Im Folgenden finden Sie eine Auswahl der besten Tools und Hilfsmittel, die Ihrer App das Aussehen und die Funktionen einer nativen App geben. Wir stellen Ihnen nützliche Framework SDKs, Entwicklungsumgebungen, Tutorials, Richtlinien und vieles mehr für die Entwicklung hybrider Apps vor.

Richtlinien für Designstandards

Bevor Sie mit der Erstellung der App beginnen, müssen Sie sich erst mal mit den jeweiligen Designstandards eines jeden Systems vertraut machen. Im Folgenden finden Sie die Richtlinien für die App-Entwicklung für iOS, Android und Windows.

Systemschriften für Hybrid-App-Entwicklung

02-hybrid-app-development-tools
Androids Standard-Schriftart Roboto

Verwenden Sie Systemschriften, um Ihrer App ein nativeres Feeling zu geben, denn ihre Nutzer werden die Schriftart erkennen. Glücklicherweise ist es mithilfe von Schriftartenstapel relativ einfach Systemschriften in Hybrid-Apps zu verwenden. Nutzen Sie für die Hybrid-App-Entwicklung die folgenden Anleitungen und Schriftarten:

Entwicklungsumgebungen und SDKs

Wenn Sie Ihre Hybrid-App nur aus einfachen Bausteinen erstellen möchten, können Sie eine der folgenden Entwicklungsumgebungen nutzen. Beachten Sie, dass Sie trotzdem für jedes System (Android, iOS usw.) eine SDK-Plattform benötigen. Einige dieser Entwicklungsumgebungen haben bereits ein SDK, für andere wiederum benötigen Sie das SDK eines Drittanbieters.

Die Verwendung eines SDK-Frameworks für die Erstellung Ihrer App erspart Ihnen viel Zeit und Aufwand. Ein Framework erleichtert Ihnen die Erstellung einer nativ-ähnlichen Hybrid-App, da sie nicht bei null anfangen müssen.

Apache Cordova

Apache Cordova ist eine Open-Source-Sammlung von Geräte-APIs, die den Zugriff auf native Funktionen erlauben. Zusammen mit einem Framework wie einem der unten genannten können Sie eine Hybrid-App mit HTML, CSS und Javascript erstellen. Dementsprechend kann die App mit wenig bis gar keiner Codeanpassung plattformübergreifend verwendet werden. Cordova bietet auch viele Plugins für den Zugriff auf native Gerätefunktionen.

Beachten Sie, dass Sie zuerst die Cordova-Kommandozeile (CLI) herunterladen müssen, bevor Sie mit der App-Entwicklung für eine Systemplattform mit einem der unten genannten SDKs beginnen. Es bleibt Ihnen überlassen, ob Sie den Großteil der App in Cordova oder dem SDK erstellen.

PhoneGap

PhoneGap ist ein sehr beliebtes Open-Source-SDK für die Entwicklung hybrider Apps, die auf Cordova als CLI setzt. Mit diesem Framework können Sie für jede Systemplattform plattformübergreifende Apps mit HTML, CSS und Javascript erstellen. Das Adobe PhoneGap Build sammelt Ihre Apps in der Cloud, sodass Sie den Code für mehrere Plattformen wiederverwenden können. Es hat sogar eine Entwickler-App, mit der Sie Änderungen am Code direkt auf dem Smartphone nachverfolgen können.

04-hybrid-app-development-tools
Apps, die mit PhoneGap erstellt wurden.

Ionic Framework

Auch das Ionic Framework ist ein sehr beliebtes Open-Source-Framework für mobile Hybrid-Apps. Es hat eine Bibliothek mit Gesten, Tools und Komponenten für HTML, CSS und Javascript, die allesamt für die mobile Nutzung optimiert sind. Ionic wurde mit SASS erstellt und ist eigentlich für AngularJS optimiert, sodass Sie ganz einfach eine interaktive App mit dynamischer Ansicht erstellen können. Den fertigen Code können Sie dann mit Cordova nutzen.

Onsen UI Framework

Dieses Open-Source-UI-Framework basiert auf Javascript und CSS und lässt Ihre mit PhoneGap/Cordova erstellte Hybrid-App wie eine native App aussehen. Das bedeutet weniger Kopfzerbrechen für Sie. Dieses Framework ist mit jQuery und AngularJS kompatibel, hat einen eingebauten Theme-Roller, setzt auf Font Awesome, bietet fließende Bildschirmübergänge und bald auch ein Gui-Tool für Drag-and-drop.

AngularJS

Da ich dieses nützliche Toolset nun schon ein paar Mal erwähnt habe, schauen wir es uns jetzt mal etwas genauer an. Es ist mit anderen Bibliotheken kompatibel und vollständig erweiterbar, sodass Sie mit Ihrer App – über die statischen HTML-Funktionen hinaus – einen Schritt weitergehen können. Mit AngularJS sind Sie nicht auf HTML-Funktionen limitiert und können extrem schnelle dynamische Ansichten erstellen.

Appcelerator Titanium

Die Open-Source-Entwicklungsumgebung Appcelerator Titanium bietet alles, was Sie für die Erstellung plattformübergreifender nativer Apps, Hybrid-Apps und Web-Apps mit einem Javascript SDK benötigen. Titanium beinhaltet Studio – eine auf Eclipse basierende IDE, ein MVC Framework (Alloy) und Cloud-Dienste.

05-hybrid-app-development-tools
Apps, die mit Appcelerator erstellt wurden.

Xamarin

Wenn Sie C#-Kenntnisse haben, könnte dies die richtige App-Plattform für Sie sein. Mit einer Codebasis in C# erstellen Sie native Apps für iOS, Android, Windows und Mac. Bei der IDE können Sie zwischen Xamarin Studio (Windows/Mac) und Visual Studio wählen. Testen können Sie Ihre App mit C# oder Ruby. Außerdem bietet das Tool detaillierte Fehlerreports zur Überwachung der App-Performance und noch eine Menge anderer Features.

Sencha Touch

Sencha Touch erlaubt Entwicklern Hybrid-Apps mit HTML5 und Themes für verschiedene Mobilgeräte zu erstellen. Mit Sencha erstellte Apps haben durch den Zugriff auf native Funktionen eine schnellere Performance als Web-Apps, sehen aus wie native Apps und verhalten sich auch entsprechend. Außerdem können Sie auch ohne Mac eine App für iOS erstellen. Sencha bietet über 300 Icons, MVC-Support, viele UI-Elemente, Datenbindungen, Datenpakete und vieles mehr.

Trigger.io

Trigger.io wirbt damit, die einfachste Lösung für die Entwicklung mobiler Apps zu sein. Mit Trigger.io schreiben Sie HTML5-Code mit der Javascript API und haben Zugriff auf Handyfunktionen wie die Kamera und die Contacts API. Die Cloud erledigt dann den Rest für iPhone, iPad und Android. Ebenso erlaubt das Tool Webgeschwindigkeits-Updates, benutzerdefinierte Module, Hooks und vieles mehr zu nutzen. Für die Entwicklung können Sie Ihre bevorzugte IDE oder einen beliebigen Texteditor verwenden und die App mit Triggers Toolkit GUI oder Kommandozeilen-Tools zusammenbauen und testen.

Anleitungen für den App-Vertrieb

06-hybrid-app-development-tools
Google Play Store

Mit der Veröffentlichung der App beginnt bei vielen das große Zittern, da es zig Gründe gibt, weshalb sie abgelehnt werden könnte. Wenn das Ihr erstes Mal ist, sollten Sie nicht allzu hohe Erwartungen haben – die Wahrscheinlichkeit, dass es mehr als einen Versuch braucht, ist recht hoch. Damit einer reibungslosen Veröffentlichung nichts im Weg steht, sollten Sie sich die jeweiligen Anleitungen für den App-Vertrieb durchlesen:

Tutorials und Artikel

Auch wenn man bei der Entwicklung hybrider Apps auf bereits vorhandene Kenntnisse der Webprogrammierung zurückgreifen kann, gibt es doch noch viel zu lernen. Am besten klappt das, wenn man einfach mit dem Lesen beginnt – und was bietet sich da mehr an als die Anleitungen der oben genannten Frameworks? Weitere hervorragende Möglichkeiten zur schnellen Aneignung von Wissen über die Hybrid-App-Entwicklung sind Tutorials oder Einführungen wie diese:

Mit welchem Tool entwickeln Sie Ihre hybriden Apps?

(dpe)

Kategorien
Boilerplates & andere Tools Design HTML/CSS Programmierung Responsive Design Webdesign

Voll im Trend: 9 Material Design Frameworks für moderne Webseiten

Google hat mit seinem für Android entwickelten Material Design einen der größten Design-Trends der letzten Zeit angestoßen. Nach langer Zeit sieht Android endlich gut aus. Viele meinen, dass das Design mittlerweile mit iOS gut mithalten kann. Doch nicht nur mobile Apps werden heute in Material Design umgesetzt, auch immer mehr Webseiten nutzen das neue Design. Um das Design gut und ansprechend umsetzen zu können, kann man sich entweder selbst an der Umsetzung versuchen, oder man nutzt eines der angebotenen Material Design Frameworks, wovon immer mehr auf den Markt kommen. Daher stellen wir Ihnen heute eine Auswahl von Frameworks vor, damit Sie Ihre nächste Webseite im neuen, schicken Material Design verwirklichen können.

material-design-frameworks-teaser

Was ist Material Design?

Material Design ist in erster Linie eine Design-Vorgabe von Google für die Entwicklung von Smartphone- und Tablet-Apps auf Basis von Android. Material Design wurde zuerst auf der Google I/O 2014 vorgestellt, ist aber ebenfalls angedacht für Googles Chrome OS und das Web insgesamt. Googles Vorschlag konzentriert sich dabei auf eine klare und einfache Design-Sprache und die Verwendung von zum Teil kräftigen Farben und einer eigenen Typografie. Der Hintergrund der Material Design Richtlinien ist hierbei, eine einheitliche Nutzererfahrung auf allen Plattformen zu schaffen.

Sehr gut ist, dass Google detaillierte Richtlinien und Informationen zur Verfügung stellt in Bezug auf Design, Interaktionen und fundamentale Dinge wie Animationen, Farben, Typografie, Struktur und wesentliche Muster.

Ein Beispiel zeigt die perfekte Umsetzung als Android-App:

material-design-example-app

Google stellt ebenfalls ein gutes Einführungsvideo zur Verfügung:

Material Design:  Webdesign-Frameworks

Heutzutage gibt es einige wirklich gute Frameworks zur Entwicklung von Webseiten im Material Design. Acht der neun vorgestellten Frameworks sind Drittanbieter-Frameworks, wurden also nicht von Google entwickelt, was ihrer Effektivität und dem gut umgesetzten Design keinen Abbruch tut.

1. Materialize

Materialize

Materialize ist ein modernes Front-End Design CSS-Framework basierend auf dem Material Design. Es bietet Ihnen die Option, neben CSS  auch SCSS zu nutzen. JavaScript und Material Design Icons sind ebenso vorhanden, wie der im Original Material Design verwendete Roboto Font. Grids, Formulare, Buttons, Navigationen und die neuen Cards sind ebenfalls dabei. Wer an diesem Framework mitarbeiten möchte, kann dies auf Github tun. Es wird ein Starter-Template angeboten, eine Demo des Starter-Themes finden Sie hier.

2. Material UI

Material-UI

Material UI ist ein CSS-Design-Framework für die Erstellung von Webseiten im Material Design. Unterstützt werden Komponenten wie Buttons, Dialoge, Dropdown-Menüs, Icons, Formular-Elemente und vieles mehr. Auch Material UI ist auf Github zu finden.

3. Paper Bootswatch for Bootstrap

Paper Material Theme for Bootswatch

Das Paper-Theme ist eines der Themes für das Boostrap-Framework. Es bringt alle Komponenten mit, die auch Bootstrap bietet, allerdings im Material Design. Bootswatch bietet zusätzlich zu dem Paper Theme auch noch einige andere, wirklich schicke Themes an.

4. Bootstrap Material

Material-Design-for-Bootstrap

Genau wie Paper ist auch das Bootstrap Material ein Theme für das Bootstrap-Framework. Bootstrap Material bringt daher alle Komponenten mit, die das Bootstrap-Framework bietet. Zusätzlich jedoch kommt noch die Unterstützung für die 740 Original Material Design Icons aus der Google Material Design Icons Bibliothek dazu.

5. Leaf BETA

leaf-beta-material-design-framework

Das Leaf CSS-Framework ist von Kim Korte entwickelt worden. Es befindet sich zur Zeit noch in der Beta-Phase, daher ist noch nicht jedes Element enthalten oder optimal gestaltet. Doch es bringt bereits eine umfassende Liste von Komponenten mit sich. Buttons, Slider, Cards, Menüs, Tabs und vieles mehr kommt mit diesem liebevoll gestalteten Framework auf die heimische Entwicklungsplattform. Die verwendeten Icons stammen nicht aus der Google Bibliothek, sondern von Icomoon, was der Funktionalität allerdings keinen Abbruch tut. Als CSS Pre-Processor wird übrigens Stylus verwendet. Auch das Leaf Material Design Framework ist auf GitHub vertreten.

6. MUI CSS Framework

MUI Material Design CSS Framework

Das MUI-Framework ist ein leichtgewichtiges HTML und CSS Framework zum Erstellen von Websites nach den Google Material Design Richtlinien. MUI wurde entwickelt, um schnell, handlich und klein, sowie wirklich entwicklerfreundlich zu sein. Es enthält nur die grundlegenden Komponenten, die Sie zur Entwicklung einer Website nach Googles Design-Richtlinien benötigen. Es gibt keinerlei externe Abhängigkeiten, so dass ein mit diesem Framework entwickeltes Projekt nicht unnötig aufgebläht wird. MUI ist ebenfalls auf GitHub vertreten und offen für weitere Entwickler, die an dem Projekt mitarbeiten möchten.

7. Polymer Project

Polymer Material Design Framework

Googles Polymer Projekt hat es sich zur Aufgabe gemacht, koponentenbasierte Entwicklungsprozesse in das Internet zu bringen. Es ist kein reines HTML/CSS Framework für die Webentwicklung, sondern kann ebenso zur Entwicklung von mobilen Apps genutzt werden. Polymer befindet sich noch im Status eines sogenannten „Developer Preview“, also im einem frühen Stadium der Entwicklung, doch die meisten Komponenten sind bereits jetzt sehr ausgereift. Alle modernen Browser (IE 10+, Chrome, Safari, Firefox) zeigen die Designs und Komponenten von Polymer korrekt an. Polymer stellt umfangreiche Dokumentationen, Kurzanleitungen und Videos zum Einstieg zur Verfügung.

8. LumX

LumX Material Design Framework

nt1m Material Framework

Das nt1m/Material Design Framework ist ein einfaches, responsives CSS-Framework, das es Ihnen erlaubt, Material Design in Ihrem nächsten Web-Projekt einzusetzen. Es lässt sich via Github herunterladen. Mitwirkung am Projekt ist gewünscht.

Fazit

Neun Material Design Frameworks habe ich bei der Recherche für diesen Artikel für Sie gefunden. Nun liegt die Qual der Wahl bei Ihnen, welchem der vorgestellten Frameworks Sie Ihr Vertrauen schenken möchten. Die Auswahl ist groß genug. Ich werde auf jeden Fall Materialize und die beiden Bootstrap-Erweiterungen ausprobieren und wünsche Ihnen auf jeden Fall viel Spaß beim Experimentieren mit dem Material Design.

Links zum Beitrag

(dpe)

Kategorien
Apps Boilerplates & andere Tools Design Programmierung Responsive Design

Origami: Freies Design-Prototyping für iOS, Android und das Web

Prototyping ist eine wichtige Sache im Entwicklungsprozess einer App. Animationen und Verlinkung aller Ebenen müssen stimmen und ausprobiert werden, bevor der eigentliche Entwicklungsprozess abgewickelt werden kann und die fertige App letztlich in den App-Store hochgeladen wird. Mit Origami ist ein von Facebook entwickeltes Design-Framework am Start, welches das Prototyping von iPhone- und iPad-Apps erleichtern möchte. Origami legt dabei besonderen Wert auf die Integration von Interaktionen und Animationen.

origami-teaser

[Image of iMac by Placeit]

Was ist Origami

Origami ist ein kostenloses Tool für die Gestaltung moderner Benutzerschnittstellen. Es wurde für die schnelle Erstellung von Design-Prototypen mit Animationen und Interaktionen entwickelt, die dann auf dem iPhone oder dem iPad ausgeführt werden können. Die Export-Funktion erlaubt es, den generierten Code zu exportieren und dem Entwickler als Snippet zur Verfügung zu stellen. Origami ist ein Open-Source Animations-Framework, welches Sie die benötigten Animationen der Benutzeroberfläche leichter und zielführender erstellen lassen soll. Das Framework ist eine Entwicklung von Facebook, erblickte erstmalig am 20. Dezember 2013 das Licht und wurde bis heute stetig weiter entwickelt.

Wichtig zu wissen ist, dass Origami nur mit dem Quartz Composer eingesetzt werden kann, also ausschließlich für Mac OS X zur Verfügung steht. Zudem muss man als Apple Developer registriert sein, um es nutzen zu können. Auch wenn Origami letztlich Code für iOS, Android und das Web exportieren kann, ist das Framework nur für Apple-Verwender nutzbar. Will man seine Prototypen ausprobieren, so ist das komfortabel nur mit iOS möglich, denn ausschließlich für diese Plattform steht eine dedizierte App namens Origami Live for iOS zum kostenlosen Download über den iTunes App Store bereit.

origami framework

Gehen wir nun gemeinsam durch einige Funktionen und schauen, was Origami für Sie leisten kann. Weil es immer besser ist, sich anzuschauen, was ein Tool kann, anstatt es nur zu lesen, habe ich am Ende des Beitrags einige Videos zu Origami verlinkt.

Die Homepage: Origami – Design Prototyping Tool

Gestensteuerung

origami-gesten

Origami bietet nach eigenen Angaben die fortschrittlichsten und am einfachsten zu benutzenden Gesten-Bauteile. Es unterstützt Scroll-, Swipe- und Tap-Gesten. Alle Komponenten sollen hierbei sehr leicht zu nutzen und zu integrieren sein.

Die Scroll-Komponente unterstützt freies Scrollen, seitenweises Scrollen oder „Wheel of Fortune“-Scrolling und bietet fortgeschrittene Funktionen zur Erstellung eines Scroll-Bereichs einer App. Der Swipe-Bereich macht es möglich, dass der derzeitige Bildschirm sich mittels Animation nach unten bewegt, um einen neuen Bildschirm; zum Beispiel für Einstellungen; freizugeben. Die dritte Komponente sorgt für „Taps“. Taps meint das Tippen auf den Bildschirm und die damit verbundenen Aktionen. Sie können relativ einfach festlegen, was mit einem Tipp auf den Bildschirm passiert, welche Funktion ein doppelter Tipp auf dem Bildschirm auslöst und was bei einem längeren Pressen eines Fingers auf dem Bildschirm passieren soll.

Die Code-Export Funktion

Origami beherrscht den Code-Export der von Ihnen erstellten Design-Komponenten mit nur einem Klick. Der Code Ihrer erstellten Animationen kann daher einfach als Snippet exportiert werden, damit die Coder sie per Copy und Paste in das Projekt übernehmen können. Origami will hierbei für denselben „Look and Feel“ auf allen Plattformen sorgen, das heisst, dass sich die fertige App auf allen Plattformen gleich anfühlen und auch aussehen soll.

Export Code Funktion von Origami

Exportiert werden kann der Code für iOS, Android und das Web. Damit Sie sich über die Qualität des exportierten Codes klar werden können, existiert jeweils ein beispielhafter Code.

Codebeispiele für:  iOS .m | Android .java | Web .js

Sketch und Origami

Origami arbeitet sehr gut mit dem neuen und immer beliebter werden Werkzeug Sketch zusammen, was das Prototyping noch weiter vereinfacht.

Mit Origami können Sie Links zwischen den einzelnen Ebenen im Prototypen und einer Sketch-Datei erstellen. Sobald die einzelnen Ebenen verlinkt sind, reicht eine einfache Tastaturkombination aus, um den Prototypen ohne Unterbrechung zu aktualisieren. Falls Sie ein Photoshop oder Affintity Photo Nutzer sind, so wird es Sie freuen zu hören, dass die Origami-Ebenen auch mit PSD-Dateien verknüpft werden können.

Sketch und Origami: Ein kurzes Video-Tutorial

Dieses kleine Video-Tutorial zeigt Ihnen, wie Sie Ihre Sketch-Datei mit Ihrem Origami-Prototypen verbinden. Nach kurzem Setup sind Sie in der Lage, alle Ebenen mit nur einer Tastaturkombination zu aktualisieren.

Prototyping für Desktop-Anwendungen

website-prototyping-mit-origami

Mit Origami lassen sich nicht nur Prototypen für iPhone- und iPad-Anwendungen erstellen, sondern auch Websites und Web-Anwendungen. Es können Features wie Text-Input, benutzerdefinierte Cursors, FaceTime Kamera und OS X Drag und Drop genutzt und entwickelt werden, die dann jeweils in einem in der Größe anpassbaren Browser-Frame kontrolliert werden können. So ist es Ihnen möglich, responsive Anwendungen für das Web als Prototyp zu erstellen.

Aus Beispielen lernen

Downloadbare Beispiele von Origami Code

Viele andere Design-Frameworks für das App-Prototyping sind ebenfalls hervorragend dokumentiert. Origami jedoch bietet Ihnen nicht nur eine Dokumentation zum Erlernen an, sondern auch noch vier Beispiele von Interaktionen und sieben Beispiele von Interfaces. Diese 11 Beispiele können jeweils als QTZ-Datei heruntergeladen und in das Projekt importiert werden. So können Sie genau sehen, was für eine bestimmte Animation oder einen bestimmten Bereich Ihres Prototyps vonnöten ist. Unter Umständen fällt Ihnen auf diese Art und Weise der Einstieg und das Erlernen des Prototypings mit dem Origami-Framework leichter.

Die Download-Seite mit den Origami Code-Beispielen

Die Origami Tutorials

Diese Videos führen Sie Schritt für Schritt durch die Erstellung von Prototypen mit dem Origami-Design-Framework. Zu jedem Video kann der Beispiel-Code heruntergeladen werden.

Eine Einführung in Origami

Dieses Video vermittelt Ihnen alles, was Sie zum Einstieg in das Prototyping mit Origami benötigen. Am Ende des Videos ist eine Interaktion erstellt worden, mit der Sie mit einem Fingertipp ein Foto heran- und herauszoomen können.

Download des Beispielcodes

Eine faltbare Navigationsleiste erstellen

Es wird eine Interaktion erstellt, bei der sich während des Scrollens die Navigationsleiste ansprechend zusammenfaltet und wieder entfaltet. Sie lernen, wie man eine Ebene scrollbar macht und auf Basis der Scroll-Position animiert.

Beispielcode für die Erstellung einer faltbaren Navigation

Eine Swipe-Away Navigation erstellen

In diesem Video geht es um die Erstellung einer sogenannten „Swipe-Away“ Navigation. Mit einem Fingertipp auf ein Element im Feed gleitet von rechts eine vollständige Ansicht des einzelnen Elements herein und kann mit einem Wisch nach rechts wieder aus dem Sichtbereich befördert werden. Besonders News-Apps arbeiten gerne mit diesem Effekt. Sie lernen in diesem Video, wie man Ebenen wischbar macht.

Beispielcode für die Erstellung einer „Swipe-Away“ Navigation

Einen neuen Beitrag erstellen

In diesem Video wird der Prototyp komplettiert. Mit dem „Plus-Button“ soll sich ein neuer Bereich öffnen, mit dem ein neuer Post dem Feed hinzugefügt werden kann. Sie lernen den Umgang mit dem „Wireless-Patch“ und wie man eine konditionelle Logik aufbaut. Auch die Erstellung einer mehrstufigen Animation wird im Video behandelt.

Beispielcode für die Erstellung eines neuen Beitrags

Fazit

Origami ist ein sehr gut dokumentiertes Open-Source-Framework zur Erstellung von Design-Prototypen. Dem Einsteiger in die Materie wird gleich mehrfach unter die Arme gegriffen – mit Code-Beispielen, guten Video-Tutorials und einer umfassenden Dokumentation. Wenn das noch nicht ausreicht, empfiehlt sich ein Beitritt zur entsprechenden Facebook-Community. Die Community kann man dann für Feature-Vorschläge oder Support-Anfragen nutzen.

Links zum Beitrag

(dpe)

Kategorien
Boilerplates & andere Tools JavaScript & jQuery Programmierung

Ember.js: MVC-Framework für Web-Apps mit JavaScript

In dem stetig an Beliebtheit gewinnenden MVC-Framework Ember.js sind Best Practices aus verschiedenen Frameworks und Programmiersprachen vereint. Daraus entstanden ist ein mächtiges Werkzeug mit einer relativ steilen Lernkurve. Wir wollen heute einen genaueren Blick darauf zu werfen, wie Ember.js begonnen hat, wo es heute steht und wo es sich hin entwickelt.

Ember.js - laut Entwickler ein Framework für ambitionierte Projekte
Ember.js – laut Entwickler ein Framework für ambitionierte Projekte

Als im November 2011 das Unternehmen Strobe von Facebook gekauft wurde, wurde aus Sproutcore 2.0 ein eigenständiges Projekt unter der Leitung von Yehuda Katz, Tom Dale und Peter Wagenet. Um den Neustart offensichtlich zu machen, sollte das Projekt fortan den Namen „Amber.js“ tragen, nur war der Name „Amber“ bereits vergeben. So einigte man sich kreativerweise auf „Ember.js“. Es entstand ein komplexes MVC-Framework in JavaScript, das als eines der ambitioniertesten Projekte im Web-Bereich gilt.

Zitiert man die Entwickler aus der Anfangszeit von Ember.js, dann ging es ihnen darum, Ansätze aus der Entwicklung von Desktopanwendungen in die Webentwicklung mit Javascript zu bringen. Darum finden heute in Ember.js verschiedene Konzepte Platz, die man aus diesem Bereich kennt. Die Architektur basiert auf dem MVC-Prinzip und ermöglicht es, Single-Page-Applikationen zu entwickeln. Besonders komfortabel lassen sich mit Ember klassische Master-Detail-Anwendungen umsetzen, da im Kern der Entwicklung ein gut durchdachtes Routing-Konzept und der Ansatz „convention over configuration“ steht.

Nebenbei erfüllt es prinzipiell alle Anforderungen an ein modernes JS-Framework, wie beispielsweise ein Two-Way Data-Binding. Dadurch werden Änderungen an einem Objekt sofort der gesamten Anwendung bekannt und in Echtzeit auf der Seite neu gerendert. Als Template-Engine wird standardmäßig Handlebars.js eingesetzt, welches von der Syntax her Ansätzen in anderen Frameworks ähnelt und damit keine allzu große Einarbeitungszeit benötigt.

Ember.js besitzt selber aber eine relativ steile Lernkurve. Um Ember richtig anwenden zu können, muss man die teils bereits erwähnten Konzepte gedanklich komplett durchdrungen haben, was gerade für Einsteiger zur Herausforderung werden kann. Versteht man aber die Konzepte, dann ist es auch kein Problem, mit Ember.js schnell neue Anwendungen zu entwickeln.

Convention over configuration

Eine besondere Eigenschaft von Ember.js sind die Naming Conventions. Da durch das MVC-Prinzip Logik, Daten und Darstellung voneinander getrennt wird, müssen diese späterhin wieder miteinander verknüpft werden. Die logische Verknüpfung dieser Dinge geschieht bei Ember dank der Naming Conventions relativ einfach. Wenn man zum Beispiel eine Route mit dem Namen „favorites“ einbindet, dann sucht Ember automatisch nach dem passenden Routing-Objekt „App.FavoritesRoute“ und dem richtigen Controller „App.FavoritesController“. Und ruft dann ebenfalls automatisch das passende Template mit dem Namen „favorites“ auf. Allerdings muss man auch hier aufpassen; etwa beim Routing zwischen „Ressourcen“ und „Routen“ unterscheiden.

Das kann jetzt durchaus verwirrend klingen, geht aber später wie von selbst von der Hand. Zum Einstieg empfiehlt sich aber in jedem Fall das Kapitel „Understanding Ember.js“ durchzuarbeiten.

Eine Ember-Anwendung besteht grundlegend aus folgenden Konzepten:

  • Router – kümmert sich darum, dass für eine eingegebene URL das passende Template aufgerufen wird. Dadurch können auch in einer Single-Page-Applikation URLs geteilt werden.
  • Templates – hier ist das HTML-Gerüst der Anwendung enthalten. Zu praktisch allen Templates gibt es auch ein Data-Model. Ändert sich dieses Data-Model, ändern sich auch die Daten im Template.
  • Components – mit Controls lassen sich wiederverwendbare HTML-Tags entwickeln, um Templates zu entzerren.
  • Controllers – neben dem Model kann ein Template auch einen Controller haben, welcher Daten manipuliert oder erweiterte Funktionen bereitstellt.
  • Models – enthalten die Daten und die Datenmodelle, um diese in den Templates darstellen zu können.

Ember Data

Wirklich mächtig wird Ember.js aber erst, wenn man es in Verbindung mit Ember-Data verwendet. Ember-Data kümmert sich – unabhängig von der Datenbank – darum, Daten zu erstellen, zu ändern, zu löschen oder auch lediglich darzustellen. Der Kern von Ember-Data besteht aus den Models, welche die Datensätze modellieren. Am wichtigsten ist aber, dass Ember-Data praktisch von alleine mit RESTful APIs kommunizieren kann. Im besten Fall muss nur der passende Adapter für eine API ausgewählt und die URL angegeben werden. Danach sollten die Datenmodelle selbständig mit der API arbeiten können. Man muss also keine eigenen AJAX-Calls entwickeln, um mit einer API kommunizieren zu können. Wer das Prinzip besser verstehen und ausprobieren möchte, sollte das ZUsammenspiel Firebase mit Ember.js ausprobieren.

Um bei den ganzen Konventionen und verschiedenen Konzepten den Überblick zu behalten, sollte man in der Entwicklung das Kommandozeilen-Tool Ember CLI in Betracht ziehen, welches auf Broccoli basiert. Es kümmert sich neben dem Dependency-Management auch um Vorlagen für wiederkehrende Aufgaben und führt eine übersichtliche Struktur ein. Außerdem unterstützt Ember CLI bei der testgetriebenen Entwicklung.

Ein weiteres nützliches Tool für Ember ist der Ember Inspector für Firefox und Google Chrome. Der Inspector funktioniert ähnlich wie die Entwickler-Konsolen in den Browsern. Dort kann man sich die aktuellen Daten anzeigen lassen und untersuchen, welche Templates, Models und Controller gerade aktiv sind.

Aktuell ist Ember momentan in der Version 1.8. Die Version 2.0 wurde aber bereits angekündigt. Diese enthält einige Verbesserungen und logische Änderungen, wie intuitivere Attribute Bindings. Wer sich über alle geplanten Änderungen informieren möchte, findet in den Links zum Beitrag eine ausführliche Beschreibung.

Mittlerweile gibt es auch viele Ressourcen für Autodidakten, die es vorziehen, sich Ember.js vom eigenen Schreibtisch aus beizubringen. Alleine die Dokumentation eignet sich dazu sehr gut und ist auch einer der Stärken von Ember. Wenn man erfolgreich die ersten Schritte hinter sich gebracht hat, empfiehlt es sich, das Video „Awesome Ember Tricks“ anzuschauen, um schnell ein noch besseres Verständnis für das Thema zu bekommen.

Ember.js in Zusammenarbeit mit anderen Frameworks

Für die meisten sinnvoll dafür geeigneten Frameworks und Werkzeuge gibt es bereits Erweiterungen, um besser mit Ember.js arbeiten zu können. So lässt sich mit Ember.js, jQuery Mobile und Phonegap relativ einfach eine App für mobile Geräte entwickeln. Dafür müssen nur ein paar Einstellungen für jQuery Mobile geändert werden.

Weiterhin gibt es REST-Adapter für die meisten großen Backend-Frameworks, so dass man mit Ember.js arbeiten und gleichzeitig seine vorhanden Infrastruktur nutzen kann.

Fazit

Ember lässt eigentlich keine Wünsche offen bei der Entwicklung moderner Single-Page-Applikationen, hat aber eben die erwähnte steile Lernkurve. Das ist durchaus ein spürbarer Nachteil gegenüber Alternativen wie Angular.js, welches mittlerweile, vor allem durch den einfacheren Einstieg, die Position des Platzhirsches bei den JS-Frameworks neben jQuery eingenommen hat. Ember punktet dagegen durch die starke Einbindung der Community bei der Entwicklung.

Wer mit Backend-Frameworks wie Ruby on Rails oder auch Django arbeitet und versteht, was RESTful bedeutet, sollte sich Ember.js unbedingt ansehen, da sich viele Konzepte stark ähneln und so in diesem Kontext die Lernkurve verflachen helfen.

Links zum Beitrag:

(dpe)

Kategorien
Boilerplates & andere Tools JavaScript & jQuery Programmierung

3D im Browser: Seen.js erstellt komplexe Grafiken und Animationen für Canvas und SVG

HTML5 und JavaScript bieten alle Funktionen, um komplexe Grafiken und Animationen im Browser zu realisieren. Die JavaScript-Bibliothek „seen.js“ bietet hierfür eine umfangreiche Auswahl an Möglichkeiten, um aufwändige 3D-Welten im Browser entstehen zu lassen. „seen.js“ ist unabhängig von jQuery oder anderen Bibliotheken und erstellt eindrucksvolle 3D-Objekte und Szenerien auf der Basis von HTML5-Canvas und SVG. 3D im Browser, ganz ohne Plugin…

seenjs

So entwickeln Sie mit Seen.js aus einfachen Flächen komplexe Szenerien

Der Einstieg in „seen.js“ ist nicht einfach – so vielseitig ist die Bibliothek. Dafür sind die Möglichkeiten umso beeindruckender. Starten wir am Anfang: zunächst muss die JavaScript-Bibliothek eingebunden werden. Auch wenn „seen.js“ ohne weitere Abhängigkeiten auskommt, sollte CoffeeScript ebenfalls mit eingebunden werden. Denn die komplette Dokumentation von „seen.js“ und alle Beispiele basieren auf CoffeeScript. Nachfolgend legen wir eine Zeichenfläche an – also ein „<canvas>“- oder „<svg>“-Element. Anschließend erfolgt die Programmierung per CoffeeScript.

<canvas width="640" height"425" id="seenjs"></canvas>

<script type="text/coffeescript">
…
</script>

Im Beispiel legen wir ein Canvas-Element an, welches als Zeichenfläche für „seen.js“ genutzt werden soll. Die Grundlage für 3D-Objekte sind die sogenannten „Shapes“, also Flächen. Diese „Shapes“ können in Größe, Farbe und Form definiert werden. Neben der Entwicklung eigener „Shapes“ bietet „seen.js“ auch einige einfache, vordefinierte Formen an. So lassen sich unter anderem Kugeln („spheres“) und Tetraeder („tetrahedron“) verwenden.

kugel = seen.Shapes.sphere(1).scale(100)

Im Beispiel wird per „Shapes.sphere()“ eine einfache Kugel definiert, die aus mehreren dreieckigen Flächen zusammengesetzt ist. Die Zahl innerhalb der Methode gibt an, wie komplex die Kugel sein soll. Je größer die Zahl ist, desto größer ist die Anzahl der dargestellten Flächen. Per „scale()“ geben wir der Kugel ihre Größe. Der Wert „1“ stellt dabei die kleinstmögliche Größe dar.

seenjs_sphere
Zwei Kugeln mit unterschiedlich vielen Flächen

Im nächsten Schritt definieren wir die Farbe der Kugel.

for flaeche in kugel.flaechen
  flaeche.fill.color = seen.Colors.rgb(0, 145, 190, 255)
  flaeche.fill.metallic = true
  flaeche.fill.specularColor = flaeche.fill.color

Im Beispiel wird per „for“-Schleife die Farbe jeder einzelnen Fläche der Kugel zugewiesen. Über die Eigenschaft „color“ legen wir dann die Farbe fest. Dabei gibt es mehrere Möglichkeiten, eine Farbe zu definieren. Per „Colors.rgb()“ wird ein Farbton per RGB inklusive eines Alphawertes ausgezeichnet. Alternativ kann die Farbe auch per „Colors.hrs()“ angegeben werden. Die Beigabe des Parameters „metallic“ bewirkt, das die Fläche metallisch reflektiert. In diesem Fall wird statt einer einfachen Lichtreflexion, die per „specularColor“ festgelegte Farbe als Reflexionsfarbe verwendet.

seenjs_sphere_metallic
Zwei Kugeln – ohne und mit Metallic-Effekt

Im nächsten Schritt wird die Kugel per „Models.default().add()“ einem Modell hinzugefügt.

objekte = seen.Models.default().add(kugel)

Anschließend wird die Szenerie definiert, in welche das Modell – hier die Kugel – hineingesetzt wird.

szenerie = new seen.Scene
  model : objekte
  viewport : seen.Viewports.center(640, 425)

Im Beispiel wird die Kugel der Szene über die Variable „objekte“ hinzugefügt. „Viewports.center()“ definiert, wo die Kugel innerhalb der Szene zentriert werden soll. Im Beispiel wollen wir die Kugel innerhalb der Zeichenfläche zentrieren, weshalb wir die Maße des „<canvas>“-Elementes übergeben.

Im letzten Schritt muss die Szenerie einschließlich der Kugel gerendert und dem Canvas-Element zugewiesen werden.

seen.Context("seenjs", szenerie).render()

Dies geschieht per „Context()“-Methode. Übergeben werden die ID des Canvas-Elements sowie die Szenerie. Zuletzt wird alles per „render()“ auf die HTML5-Canvas gezeichnet.

Wie Sie mit Seen.js mehrere 3D-Objekte erstellen

In einer Szene können wir beliebig viele 3D-Objekte platzieren. Dazu erstellen wir zunächst ein neues „Shapes“-Objekt.

pyramide = seen.Shapes.tetrahedron()
pyramide.scale(50)
seen.Colors.randomSurfaces2(pyramide)

Im Beispiel definieren wir per „Shapes.tetrahedron()“ eine einfache dreiseitige Pyramide und bringen sie per „scale()“ auf eine passende Größe. Die Farbe wird per „Colors.randomSurfaces2()“ per Zufall ausgewählt. Im nächsten Schritt weisen wir die Pyramide per „append()“ und „add()“ der Variablen „objekte“ zu. In dieser ist ja bereits die Kugel enthalten.

objekte.append().translate(-25, 25, 100).add(pyramide)

Mit der „translate()“-Methode platzieren wir die Pyramide in Relation zur Kugel. Ohne Angabe von „translate()“ erhält die Pyramide denselben Mittelpunkt wie die Kugel.

seenjs_append
Zwei Objekte innerhalb einer Szene

Mit den Methoden „rotx()“, „roty()“ und „rotz()“ lassen sich einzelne oder alle Objekte im Raum drehen.

pyramide.rotx(30)
objekte.roty(90)

Im Beispiel wird die Pyramide um 30 Grad auf der X-Achse gedreht. Gleichzeitig drehen alle Objekte der Szenerie um 90 Grad auf der Y-Achse.

seenjs_rot
Gedrehte Objekte

3D-Animationen mit Seen.js

Die definierten Objekte können nun mit wenig Aufwand innerhalb der Szenerie animiert werden. Dazu fügen wir der „render()“-Methode einfach noch die „animate()“-Methode hinzu. Über ein Event wird schließlich definiert, wie die Animation verlaufen soll.

seen.Context("seenjs", szenerie).render().animate()
  .onBefore((zeit, deltazeit) -> objekte.rotx(deltazeit * 1e-4).roty(0.5 * deltazeit * 1e-4))
  .start()

Im Beispiel definieren wir per „onBefore()“ ein Event, welches vor jedem Framewechsel aufgerufen wird. Übergeben werden die Zeit sowie die Deltazeit. Mit der Deltazeit lässt sich die Geschwindigkeit der Bewegung festlegen. Im Beispiel bringen wir alle Objekte der Szene per „rotx()“ und „roty()“ in Bewegung. Sie drehen sich um die eigene Achse, wobei die Rotation um die Y-Achse schneller abläuft.

So erstellen Sie mit Seen.js eigene Objekte

In „seen.js“ gibt es mehrere Möglichkeiten, eigene Objekte zu erstellen. Eine Möglichkeit ist die „extrude()“-Methode. Hierbei werden Flächen im dreidimensionalen Raum definiert, die zusammen ein Objekt bilden.

pfeil = seen.Shapes.extrude([
  seen.P(0, 0, 0)
  seen.P(1, 1, 0)
  seen.P(1, 0.5, 0)
  seen.P(2, 0.5, 0)
  seen.P(2, -0.5, 0)
  seen.P(1, -0.5, 0)
  seen.P(1, -1, 0)
 ], seen.P(0, 0, 0))

Im Beispiel erstellen wir per „Shapes.extrude()“ einen einfachen Pfeil. Die Koordinaten geben wir mit der Methode „P()“ an. Sie enthält je drei Koordinaten, um je einen Punkt auf der X-, Y- und X-Achse des Raums zu spezifizieren. Für komplexere Formen unterstützt „seen.js“ das Wavefront-Format. Hierbei handelt es sich um ein Dateiformat zum Speichern von geometrischen Formen. Es wird von vielen Animationsprogrammen verwendet und bietet sich daher gut an.

$.get "irgendwas.obj", {}, (inhalt) ->
  irgendwas = seen.Shapes.obj(inhalt, false)

Im Beispiel laden wir per jQuery eine Objektdatei im Wavefront-Format. Der Inhalt der Datei wird an die Methode „Shapes.opj()“ weitergegeben. Diese Methode interpretiert das Format und stellt daraus ein 3D-Objekt für „seen.js“ dar.

Die vielen weiteren Möglichkeiten der Seen.js

„seen.js“ bietet zahlreiche weitere Möglichkeiten, um Objekte zu erstellen, ihr Aussehen zu verändern und sie in Bewegung zu bringen. So gibt es etwa die Möglichkeit, eine Szenerie aus verschiedenen Blickwinkeln zu betrachten. Außerdem können unterschiedliche Lichtquellen definiert werden. Dank verschiedener Events besteht die Möglichkeit, auf Ereignisse wie Mausbewegungen und -klicks zu reagieren.

Seen.js: Kostenlos und gut dokumentiert

„seen.js“ steht unter der Apache-Lizenz. Das heißt, die Bibliothek steht jedem zur freien Verfügung. Auf der Website von „seen.js“ gibt es etliche Beispiele, die die Möglichkeiten von „seen.js“ gut darstellen. Trotz umfangreicher Dokumentation ist der Einstieg nicht einfach. Das Potenzial von „seen.js“ ist jedoch hoch. Vor allem, aber nicht nur in Anbetracht des aktuellen Low-Poly-Trends lohnt sich ein Blick in die Bibliothek, da vor allem diesem Trend folgend einige sehr vorzeigbare Grafiken und Animationen erstellt werden können.

(dpe)

Kategorien
Boilerplates & andere Tools JavaScript & jQuery Programmierung

MagicSuggest für jQuery: Schicke Eingabefelder mit Mehrfachauswahl auf Basis von Bootstrap 3

Mit dem „<select>“-Element ist es ein Leichtes, Eingabefelder auszuzeichnen, bei denen mehrere Einträge ausgewählt werden können. Allerdings funktioniert das nur mit einigen Einschränkungen und sieht bei weitem nicht so ansprechend aus wie bei MagicSuggest. Statt Auswahllisten lassen sich mit dem jQuery-Plugin schicke Eingabefelder erstellen, die eine Mehrfachauswahl an freien und vorgegebenen Einträgen ermöglicht.

Magic Wand

Einfache Einbindung

Da MagicSuggest jQuery voraussetzt, müssen Plug-in und jQuery gemeinsam im HTML-Head eingebunden werden. Zusätzlich stellt MagicSuggest eine Stylesheet-Datei auf der Basis von „Bootstrap“ zur Verfügung, die grundlegenden CSS-Eigenschaften für das Aussehen der Eingabefelder sowie der ausgewählten beziehungsweise eingegebenen Begriffe enthält. Im nächsten Schritt wird ein Element angelegt, welches als Eingabefeld genutzt werden soll. Dies kann ein „<input>“-Element sein, kann aber ebenso gut auch ein einfacher „<div>“-Container sein.

<input type="text" id="ms-eingabefeld" />

Im Beispiel wird ein einfaches „<input>“-Element ausgewählt. Hier können Sie auch ein passendes „<label>“-Element hinzufügen. Allerdings ist es nicht – wie sonst bei Formularen – möglich, durch einen Klick auf das „<label>“-Element, das „<input>“-Element zu fokussieren.

magicsuggest

Im nächsten Schritt wird per JavaScript ein „magisches“ Eingabefeld definiert. Hierzu wird das Plug-in aufgerufen und über die ID dem „<input>“-Element zugewiesen.

$("#ms-eingabe").magicSuggest({
  placeholder: "Wählen Sie aus",
  data: [{
    name: "Apfel"
  }, {
    name: "Banane"
  }]
});

Der Aufruf von „magicSuggest()“ kann gänzlich ohne weitere Parameter erfolgen. Dann werden keine Elemente zur Auswahl vorgegeben. Jede Eingabe, die per Return bestätigt wird, wird dann automatisch der Auswahl hinzugefügt. Über ein „x“ kann sie jederzeit wieder entfernt werden. Über den Parameter „placeholder“ wird der englische Standardtext für die Eingabeaufforderung überschrieben.

Mit dem Parameter „data“ lassen sich Werte für das Eingabefeld vorgeben. Alle vorgegebenen Elemente werden als Liste unterhalb des Eingabeformulars dargestellt. Bei passenden Eingaben werden diese Elemente als Vorschlag (per Autovervollständigung) verwendet.

Die Vorgaben für das Eingabefeld werden als JSON-Objekt hinterlegt. Statt der Angabe eines JSON-Objektes kann auch auf eine externe Datei verwiesen werden, die Werte als JSON-Objekt beinhaltet.

$("#ms-eingabe").magicSuggest({
  placeholder: "Wählen Sie aus",
  data: "werte.json"
});

Wenn viele Elemente vorgegeben oder diese beispielsweise per PHP aus einer Datenbank ausgelesen werden sollen, ist die Angabe einer externen Datei ein großer Vorteil.

Verschiedene Optionen möglich

MagicSuggest bietet eine Vielzahl von Optionen, um die Funktionalität der Eingabefelder individuell anzupassen. So kann festgelegt werden, ob eigene Elemente dem Eingabefeld hinzugefügt werden können oder ob ausschließlich aus den vorgegebenen Elementen gewählt werden darf. Außerdem ist es möglich, die Anzahl der Elemente, die ausgewählt werden können, festzulegen.

$("#ms-eingabe").magicSuggest({
  allowFreeEntries: true,
  maxSelection: 3
});

Im Beispiel wird die freie Eingabe von Elementen erlaubt und die maximale Anzahl von ausgewählten Elementen auf drei festgelegt. Eine komplette Liste der Parameter – jeweils mit einem Beispiel – gibt es in der ausführlichen Dokumentation zu MagicSuggest.

Individuelle Darstellung möglich

Auch die Darstellung der Vorschlagsliste ist individuell gestaltbar. So ist es möglich, neben einfachem Text auch formatierten Text und Bilder in der Liste darzustellen. Die nötigen Informationen wie Dateinamen können über den „data“-Parameter innerhalb des JSON-Objektes angegeben werden.

$("#ms-eingabe").magicSuggest({
  placeholder: "Wählen Sie aus",
  data: [{
    name: "New York",
    datei: "en.png"
  }, {
    name: "Paris",
    datei: "fr.png"
  }],
  renderer: function(data) {
    return "<img src=\"" + data.datei + "\" /> " + data.name;
  }
});

Neben dem Schlüssel „name“ enthält das JSON-Objekt für die Vorschlagselemente im Beispiel auch den Schlüssel „datei“. Über den Parameter „renderer“ wird das Aussehen der einzelnen Vorschlagselemente innerhalb der Liste festgelegt. Im Beispiel wird dazu eine Funktion übergeben, die als Rückgabewert ein HTML-Snippet enthält.

magicsuggest_renderer
Beispiel für eine individuelle Darstellung

Analog zu „renderer“ exisitiert noch der Parameter „selectionRenderer“, über den das Aussehen der ausgewählten Elemente geregelt wird.

Fazit und Link zum Beitrag

MagicSuggest ist ein vielseitiges und sehr individuell konfigurierbares Tool für Eingabefelder mit Mehrfachauswahl. Das jQuery-Plugin von Nicolas Bize liegt mittlerweile in Version 2 vor und setzt Bootstrap 3 voraus. Da es unter der MIT-LIzenz steht, kann es sowohl kommerziell, wie privat kostenlos genutzt werden.

(dpe)

Kategorien
Boilerplates & andere Tools Programmierung

HTML5: HTML-Dateien in HTML-Dateien importieren

Das <link>-Element ist ein Segen. Es ermöglicht das Einbinden von Stylesheet- und JavaScript-Dateien, die in mehreren Dokumenten benötigt werden. Allerdings war es bisher nicht möglich, darüber auch HTML-Dateien in ein Dokument zu laden. Wollte man diese einbinden, ging das bislang nur per <iframes>-Element oder über die JavaScript-Methode XMLHttpRequest(). Dank der neuen HTML5-Imports ist es jetzt auch möglich, HTML-Dateien per <link> in ein anderes Dokument zu laden.

Kategorien
Boilerplates & andere Tools JavaScript & jQuery Programmierung

Chrome-Entwicklertools mobil: Touch-Events und Geolocation am Desktop emulieren

Mit den Chrome-Entwicklertools stellt Google ein umfangreiches Werkzeug für seinen Browser zur Verfügung, das einen bei der Umsetzung von Webprojekten unterstützt. Vor recht kurzer Zeit stellten wir den sehr gelungenen Online-Kurs zu den DevTools vor, der nach wie vor kostenfrei zur Verfügung steht. Heute möchte ich Ihren Blick auf die interessanten Möglichkeiten lenken, die die Tools für die Entwicklung mobiler Anwendungen bieten und die einem den ständigen Wechsel zwischen Desktop- und Mobilgerät ersparen.

chromeentwicklertools

„Overrides“ in den Entwicklertools

Die Entwicklertools sind Bestandteil des Chrome-Browsers und werden über das Menü („Tools > Entwicklertools“) aufgerufen. Sodann erscheinen sie am unteren Rand des Browserfensters. Neben den unterschiedlichen Reitern gibt es rechts unten ein Zahnrad, über das man die Einstellungen erreicht.

chromeentwicklertools_override
„Overrides“ in den Entwicklertools

Dort findet man den Bereich „Overrides“, mit denen man bestimmte vom Browser festgelegte Eigenschaften überschreiben kann. Dazu gehört unter anderem auch die Möglichkeit, einen anderen User-Agent auszugeben oder die Seite als Druckansicht darstellen zu lassen. Aber auch speziell für Mobilgeräte vorgesehene Funktionen lassen sich emulieren.

Unterschiedliche Auflösungen einstellen

Wenn es darum geht, ein responsives Layout zu testen, reicht es ja in der Regel, das Browserfenster zu vergrößern oder zu verkleinern. Die Angabe individueller Auflösungen in den „Overrides“ ist daher nicht unbedingt nötig. Allerdings ermöglicht die Einstellung in den „Overrides“ die Auflösung per Mausklick komfortabel in fest definierte Werte zu verändern.

Touch-Events emulieren

Besonders interessant ist die Möglichkeit, Touch-Events zu emulieren. Ist die Einstellung aktiviert, interpretiert Chrome Bewegungen mit gedrückter Maus als Gesten. Allerdings beschränkt sich die Emulation von Gesten auf aktive Touch-Events, die entsprechend mit ontouchstart gestartet werden.

Außerhalb der Touch-Events bleibt das Mausverhalten, wie man es vom Desktop-Browser gewohnt ist. Das betrifft beispielsweise Hover-Effekte und das Scrollen.

Geolocation und Geräteorientierung „überschreiben“

Ebenfalls interessant ist die Möglichkeit, eine Positionsangabe zu emulieren, indem man eine Position manuell per Längen- und Breitengrad angibt. Wird per JavaScript die aktuelle Position abgefragt, gibt der Browser die manuell hinterlegte Angabe aus.

Ähnlich funktioniert es mit der Emulation der Geräteorientierung. Auch diese lässt sich per JavaScript auslesen. Die drei Werte für die horizontale und vertikale Neigung sowie die Drehung können ebenfalls manuell angegeben.

Fazit: Gerade für das Testen mobiler Anwendungen stellen die „Override“-Funktionen der Google-Entwicklertools eine große Arbeitserleichterung dar. Per Mausklick werden unterschiedliche Emulationen einfach hinzugeschaltet.

Links zum Beitrag

  • Pflichtprogramm für Web-Developer: Kostenloser Online-Lehrgang zu Chromes DevTools von Code School | Dr. Web Magazin

(dpe)

Kategorien
Boilerplates & andere Tools Essentials Freebies, Tools und Templates Programmierung

Dreamteam: Texte schreiben mit Sublime Text 2 und Markdown

Sublime Text 2 hat sich im letzten Jahr zum Lieblingseditor vieler Webentwickler gemausert. Dieser Beitrag zeigt, dass Sublime nicht nur für Code, sondern auch zum Schreiben von Webtexten geeignet ist. Idealer Partner ist dabei das in 2004 von John Gruber entwickelte Markdown.

Sublime – Markdown: Zwischen Text und HTML

Markdown vereinfacht Autoren das Schreiben von Texten für das Web und steht zwischen reinem Text und HTML. Im Gegensatz zu reinem Text kann man mit Markdown Überschriften, Zitate, Links und so weiter auszeichnen. Das geht mit HTML natürlich auch, aber Markdown ist einfacher zu schreiben und vor allem besser lesbar. Hier ein paar Beispiele:

  • Überschriften beginnen mit einer Raute: # wird zu h1, ## zu h2 und so weiter.
  • Hervorhebungen sind von *Sternchen* umgeben
  • Zitate haben wie in Text-Mails ein > am Anfang der Zeile

Markdown-Erfinder John Gruber hat eine Syntax-Übersicht veröffentlicht und es gibt auch eine deutsche Übersetzung. Zum Üben der Markdown-Syntax ist übrigens das Online-Tool Dingus echt gut: Markdown schreiben, per Klick in HTML konvertieren und direkt darunter das Ergebnis anschauen.

In Schreibwerkzeugen wie dem iA Writer findet Markdown inzwischen ebenso Verwendung wie im Web. Online-Communities wie Google+, Github, Reddit oder Stack Overflow benutzen zur Formatierung der Beiträge Abwandlungen von Markdown.

Und auch für Sublime Text gibt es ein paar sehr nützliche Markdown-Plugins, die den Editor zu einem richtig guten Prosa-Schreibwerkzeug werden lassen.

MarkdownEditing: Markdown in Sublime Text 2

Man kann in Sublime natürlich wie in jedem anderem Text-Editor auch völlig ohne zusätzliche Werkzeuge ganz normales Markdown schreiben, aber bequemer wird die Sache mit ein paar nützlichen Plugins, allen voran MarkdownEditing.

Am einfachsten ist die Installation über den Package Manager von Sublime. Falls das nicht funktioniert, einfach das ZIP-Paket von Github downloaden, entpacken und in den Ordner /packages/ kopieren. Wo genau der auf Ihrer Festplatte liegt, finden Sie über Preferences - Browse Packages... heraus.

Nach der Installation ist das Plugin automatisch für alle Dateien mit der Endung .md zuständig und sobald Sie eine Markdown-Datei öffnen, sieht Sublime völlig anders aus als vorher:

  • der Hintergrund wird hell und der Cursor hellblau (iA Writer lässt grüßen)
  • Markdown-Auszeichnungen werden zum Teil formatiert
  • es gibt ein Highlighting für die Markdown-Syntax
  • der Text steht in der Mitte des Editorfensters
  • Zeilen werden bei 70 Zeichen automatisch umgebrochen.
Das Sublime-Plugin MarkdownEditing
Das Sublime-Plugin MarkdownEditing mit den Standardeinstellungen

Die genauen Einstellungen des Plugins finden Sie unter Preferences - Package Settings - MarkdownEditing. Besonders im Distraction Free Mode aus dem Menü View lässt es sich so gut arbeiten.

Aber MarkdownEditing sieht nicht nur gut aus, sondern macht das Arbeiten mit Markdown-Dateien mit Syntax-Highlighting sehr viel bequemer und öffnende Klammern werden automatisch geschlossen. Unter OS X wird auch die Erstellung von Links zum Kinderspiel: URL in die Zwischenablage kopieren, Gewünschten Linktext markieren, URL per CMD-ALT-V aus der Zwischenablage einfügen.

Fertig ist der Markdown-Link. Eine Liste der aktuellen Features von MarkdownEditing finden Sie auf der Projektseite bei Github.

Markdown als HTML in der Zwischenablage und im Browser

Die perfekte Ergänzung zu MarkdownEditing sind die beiden folgenden Plugins:

  • Markdown to Clipboard fügt dem Kontextmenü im Editorfenster den Befehl Copy Markdown as HTML hinzu. Dieses HTML kann man dann in den WordPress-Editor oder in einem anderen Sublime-Fenster einfügen und bei Bedarf verfeinern. Das Plugin kann auch über den Package Manager installiert werden, auch wenn das in dem verlinkten Blogbeitrag nicht erwähnt wird.
  • OmniMarkupPreviewer schickt die geöffnete Markdown-Datei als HTML an den Browser. Im Kontextmenü wird dazu der Befehl Preview Current File in Browser hinzugefügt. Das Tastenkürzel ist auf dem MAC CMD+Alt+O (wie Oh, keine Null). Unter Windows mit CTRL statt CMD.

OmnimarkupPreview - Markdown als HTML-Vorschau im Browser
HTML-Vorschau im Browser – OmnimarkupPreview in Aktion

Weitere nützliche Plugins zum Schreiben von Texten in Sublime sind zum Beispiel SmartMarkdown, mit dem man Textpassagen einfach aus- und wieder einblenden kann, oder WordCount, das genau das tut was der Name andeutet.

Fazit: Sublime Text wird durch ein paar Markdown-Plugins zu einem richtig komfortablen Schreibwerkzeug für Webworker. Und das ist insbesondere auf der Windows-Plattform keine Selbstverständlichkeit.

(dpe)

Kategorien
Boilerplates & andere Tools Design Programmierung Responsive Design

Viewport Resizer: Extrem flexibles Bookmarklet für die Simulation unterschiedlicher Auflösungen

Webdesigner stehen zunehmend vor der Aufgabe, Websites für mehrere Auflösungen zu gestalten. Die einfache Unterscheidung zwischen Desktop- und Mobilversion reicht aufgrund der zahlreichen Geräte und ihrer Displays oft nicht aus. Mit Hilfe von Media Queries ist es kein (oder kaum) ein Problem, verschiedene Auflösungen zu berücksichtigen. Allerdings will jedes Layout zuvor getestet werden.


Viewport Resizer

Viewport Resizer als Bookmarklet

Der Viewport Resizer ist einer jener nützlichen Helfer, die man sich als Bookmarklet in die Adressleiste des Browsers ziehen und so bequem aufrufen kann. Das Bookmarklet gibt es in zwei verschiedenen Standard-Konfigurationen. Die eine beinhaltet zahlreiche Auflösungen für Smartphones, Tablets, Monitore sowie für diverse Apple-Geräte (iPhone und iPad); die andere Konfiguration beinhaltet nur Auflösungen diverser iOS-Geräte.


Die beiden Standard-Werkzeugleisten

Ist das Bookmarklet in der Adressleiste des Browser gelandet, lässt es sich auf beliebige Websites anwenden: einfach Website ansurfen und anschließend das Bookmarklet klicken. Über eine kleine Werkzeugleiste, die am oberen Seitenrand eingeblendet wird, werden die verschiedenen zur Verfügung stehenden Geräte angeboten. Ein Klick auf das entsprechende Icon sorgt dafür, dass die Website in der gewählten Auflösung dargestellt wird.

So lassen sich die per Media Queries hinterlegten Layouts schnell testen, ohne das Browserfenster anpassen zu müssen. Und für ganz ausgefallene Auflösungen besteht zudem die Möglichkeit, individuelle Werte anzugeben.

Individuell konfigurierbare Werkzeugleiste

Wem die beiden Standard-Konfigurationen nicht ausreichen, kann sich auch eine Werkzeugleiste mit Geräten individuell zusammenstellen. Der Viewport Resizer stellt neben Standard-Auflösungen auch konkrete Geräte und ihre Auflösungen bereit. Dazu zählen Smartphones und Tablets unter anderem von HTC, Nokia, Sony Ericsson und Motorola.

Über einen Text-Editor stellt man sich zudem individuelle Werte für Geräte zusammen, die nicht schon im Standard definiert sind. Hier vergibt man auch Namen und versieht sie nach Wunsch mit unterschiedlichen Icons. So entsteht schnell eine ganz eigene Werkzeugleiste, die anschließend als Bookmarklet in den Favoriten gespeichert werden kann.


Geräteauswahl und Result-Editor

Browser-Support und Einschränkungen

Der Viewport Resizer läuft unter allen gängigen Browsern mit Ausnahme des Internet Explorers. Wichtige Voraussetzung: Die zu testende Website muss innerhalb von Frames dargestellt werden können. Wer also „Framebreaker“ in seine Website eingebaut hat, muss diesen vorher deaktivieren.

(dpe)

Kategorien
Boilerplates & andere Tools Essentials Freebies, Tools und Templates Programmierung

Sublime Text 2: Editor nach dem Baukastenprinzip erlaubt flexibles Arbeiten

In den letzten Jahren konnte sich der kommerzielle Editor Sublime Text 2 einer immer größer werdenden Nutzergemeinschaft erfreuen. Und das durchaus zu Recht. Denn gerade für den Freelancer, der oft alleine arbeiten muss, ist der Editor sehr nützlich und bietet einige komfortable Vorteile. Für weniger entscheidungsfreudige Zeitgenossen könnte besonders interessant sein, dass sich Sublime Text 2, obwohl grundsätzlich kostenpflichtig, extrem lange kostenlos testen lässt.

Sublime Text 2
Sublime Text 2

Sublime Text 2 lässt sich generell in jede Entwicklungsumgebung integrieren und für die populärsten Programmier-, Skript- und Auszeichungssprachen verwenden. Dass kommt unter anderem daher, dass Bundles aus TextMate 2 eingebunden werden können. Darüber hinaus hat Sublime Text 2 eine Menge eigene Extensions zu bieten, die das Resultat der Arbeit einer großen Entwickler-Community sind. Der Grund hierfür könnte neben der steigenden Popularität auch die einfache Beschreibungssprache für Erweiterungen sein.

Zu beachten ist aber, dass Sublime Text 2 keine spezielle IDE ist, mit der man sofort loslegen kann, um sich direkt in einer wundervollen Arbeitsumgebung befindet. Hier ist noch echte Handarbeit angesagt, Erweiterungen müssen installiert werden. Damit das etwas leichter von der Hand geht, sollte der Package-Manager (Sublime Package Control) genutzt werden. Installieren kann man diesen mittels der integrierten Konsole, die über "View -> Show Console" geöffnet wird. In die Konsole muss anschließend nur noch ein Befehl hineinkopiert werden, den ihr auf der Seite wbond.net findet. Danach sollte der Editor neu gestartet werden. Der Paket-Manager kann dann anschließend über "Tools -> Command Palette" geöffnet werden. Im auftauchenden Dialog braucht man nur noch nach "Install Package" zu suchen und schon hat man eine riesige Liste mit möglichen Erweiterungen, die aus dem Paket-Manager installiert werden können. Empfehlungen zu einzelnen Erweiterungen gebe ich am Ende des Artikels. Das ist natürlich sehr subjektiv, denn jeder Entwickler arbeitet in einer anderen Umgebung und sollte sich seine Tools dementsprechend anpassen.

Ein Editor mit ungewohnten Features

Selbst ohne Erweiterungen hat Sublime Text 2 schon einige nette Features zu bieten. Wer gerne einen der Urväter der Editoren nutzt, könnte zum Beispiel den „Vintage Mode“ aktivieren. Diese Option bietet die Möglichkeit, Sublime Text 2 wie den guten alten VIM zu nutzen. Wer diesen bisher noch nicht verwendet hat, sollte sich von der etwas schwierigen Eingewöhnungsphase nicht abschrecken lassen. Es lohnt sich auf jeden Fall, denn man kann dafür in Zukunft während der Entwicklung die Maus beiseite legen. Wer den „Vintage Mode“ nicht nutzen möchte, kann zumindest viele Shortcuts bzw. Key Bindings von Sublime Text 2 nutzen. Diese lassen sich sogar in den vielen Konfigurationsdateien relativ komfortabel und unkompliziert auf die eigenen Bedürfnisse anpassen.

Ein weiteres, sinnvolles Feature sind „Split Windows“. Ein Feature, dass man ebenfalls vom VIM kennt, aber ansonsten selten eine so einfach Umsetzung in anderen Editoren gefunden hat. Damit ist es möglich, 4 Dateien in einem Editor zu öffnen, ohne dabei die Übersicht zu verlieren. Über "View -> Layout" kann ausgewählt werden, welche Anzeige man bevorzugt. Mittels "control + Nummer des Fensters" (also 1, 2, 3 oder 4 bei 4 Fenstern) kann man ohne Maus zwischen den Fenstern wechseln.

Es gibt allerdings auch Befehle, die für regelrechte „AHA-Effekte“ sorgen. Ein Beispiel: Befindet sich der Cursor in einem Wort und man drückt den Befehl "cmd + d" (auf Plattformen ohne Apfel ist es "control + d") werden nicht nur das Wort, sondern auch alle Stellen mit dem selben Wort im Dokument markiert. Das ist etwa dann großartig, wenn man die Bezeichnung einer Variablen ändern möchte. Mit dem Befehl "ctrl+shift+(up oder down)" wählt man mehrere Zeilen zum Markieren aus. Zeilen zu bewegen, kann schon manchmal ganz schön nervig sein. Sublime Text 2 hat hierfür eine Lösung. Mittels "ctrl+cmd+(up oder down)" kann eine markierte Zeile nach unten oder oben verschoben werden.

Erweiterungen in hoher Quantität und Qualität

Wie versprochen, will ich noch ein paar nützliche Erweiterungen für Sublime Text 2 nennen. Standard in vielen Editoren ist mittlerweile „ZenCoding„. Verkürzt gesagt geht es hierbei darum, für kompliziertes HTML-Markup nur noch eine Zeile zu schreiben, um die Syntax kümmert sich der Editor dann selbst. Die Erweiterung „Tag“ bietet ebenfalls einige Erleichterungen in Bezug auf die Entwicklung von HTML-Code. Bei Tag geht es, wie der Name bereits verrät, vor allem um HTML-Tags und das vereinfachte Bearbeiten von Inhalten in diesen oder auch das automatische Schließen geöffneter Tags. Das kann sehr hilfreich sein, da Sublime Text 2 hier von Haus aus kaum Unterstützung bietet.

Als Webdesigner kennt man auch das momentan noch vorhandene Prefix-Problem mit neuen Attributen aus der CSS3-Spezifikation. Doch dank der Erweiterung „Prefixr“ benötigt man in Zukunft nur noch die Version für einen Browser oder die Standard-Spezifikation und Prefixr kümmert sich darum, die restlichen Abhängigkeiten einzufügen.

Das Erscheinungsbild von Sublime Text 2 lässt sich ebenfalls mit Hilfe von Paketen verändern. Empfehlenswert ist hierbei vor allem das „Soda„-Theme. Mittels „SideBarEnhancements“ erweitert man die Toolbar von Sublime Text 2 um einige nette Features. Darüber hinaus gibt es Erweiterungen für viele speziellere Anforderungen. Mit Hilfe von „Shell-Turtlestein“ führt man aus Sublime Text 2 heraus Shell-Befehle aus. In Zusammenarbeit mit der Chrome-Extension wird der obligatorische Reload einer Seite im Browserfenster zukünftig automatisch von der Erweiterung „LiveReload“ erledigt.

Abschließend seien hier noch die Erweiterungen „SublimeCodeIntel„, welches für die nötige Intelligenz zum Autocomplete bei der Code-Eingabe sorgt und „SublimeHttpRequester„, das den Nutzer aus Sublime Text 2 heraus GET- und Post-Requests senden lässt.

Weitere Einstiegshilfen zu Sublime Text 2

Es dürfte deutlich geworden sein, dass Sublime Text 2 ein großer Baukasten ist, aus dem man sich seine gewünschte Umgebung zusammen basteln kann und auch muss. Zu diesem Thema gibt es viele Einstiegshilfen. Zum Beispiel eine große Screencast-Serie auf Englisch von Jeffrey Way. Darüber hinaus steht eine große „inoffizielle“ Dokumentation, die aber von den Entwicklern empfohlen wird, bereit.

Ein abschließendes Fazit zu Sublime Text 2

Nachdem ich Sublime Text 2 in den letzten Wochen immer wieder getestet habe, bin ich davon überzeugt, dass die Nutzergemeinde noch weiter wachsen wird. Für mich persönlich fehlen aber einige Dinge. Einstweilen will ich das Sublime Text 2 nicht anlasten. Wahrscheinlich liegt es eher daran, dass ich die dazu passenden Erweiterungen noch nicht gefunden habe, obwohl sie bestimmt bereits existieren.

Sublime Text 2 steht in Versionen für Mac OS X, Windows 32 und 64bit, sowie Linux, ebenfalls in 32 und 64bit zum Download bereit. Hat man sich nach einer frei zu definierenden Testphase vom Nutzen des Programms überzeugen können, wird eine Lizenz fällig. Diese schlägt mit 59 USD zu Buche, bezieht sich dabei aber auf einen User. Wenn Sie also ein MacBook, einen Windows-PC und einen Linux-Desktop haben, können Sie dennoch mit 59 USD alle drei Maschinen bestücken.

Dieser Text entstand schlussendlich unter Nutzung der Markdown-Unterstützung von Sublime Text 2.

(dpe)

Kategorien
Boilerplates & andere Tools Programmierung

Foundation: Eine ausführliche Einführung in das Top-Framework

Zurb, Entwickler des Frameworks, sagen über Foundation (sinngemäß übersetzt), dass es das fortschrittlichste Responsive Frontend Framework der Welt ist. Die Fokussierung ist damit klar. Während der Ansatz von Bootstrap eher für das Backend von Applikationen verwendet wird, ist Foundation sehr gut für die Entwicklung eines nutzerfreundlichen Frontends konzipiert. Ein weiterer Fokus liegt darauf, dass eine mit dem Foundation-Framework entworfene Website auf jedem Geräte-Typ nutzbar sein sollte, vom Smartphone, über Tablets, Monitore, Fernseher hin zu anderen HiDPI-Displays. Wir stellen Ihnen Foundation ausführlicher vor und sagen, was es damit tatsächlich auf sich hat…

Foundation: Die Zielsetzung

Mittlerweile muss beim Entwurf eines Designs für eine Webseite nicht mehr nur an Auflösungen zwischen 480×320 und 1900×1200 Pixeln gedacht, sondern darüber hinaus noch viel höhere Auflösungen vorgedacht werden. Es wird also von Webdesignern erwartet, dass Webseiten, die wir heute entwickeln, auch noch in 12 Monaten anspruchsvoll wirken. Und dass das zur Herausforderung werden kann, wissen wir alle längst seit dem Erscheinen von Geräten wie dem Macbook Pro Retina.

Foundation tritt mit keinem geringeren Anspruch an, als diese Probleme zu lösen. Ob das Framework dafür tatsächlich das richtige Tool ist, möchte ich in diesem Artikel beantworten.

Foundations Basis: Das Grid

Wie die größte Zahl aller Frameworks, nutzt auch Foundation das Prinzip der Grids. Wer bereits mit Bootstrap oder 960.gs gearbeitet hat, findet sich hier relativ schnell zurecht. Ein Grid-Element wird in Foundation an die Auflösung des jeweiligen Gerätes angepasst. Diese werden hier als columns bezeichnet und können einem DIV als Klasse zugewiesen werden. Columns müssen immer von einem DIV mit der Klasse row umschlossen sein. Dieses bestimmt die maximale Breite der Summe aller Grid-Elemente innerhalb des Divs mit der Klasse row. Eine Seite oder ein row-Div bestehen aus bis zu 12 columns.

Möchte man also eine Website aufbauen, die links einen Inhaltsbereich hat und rechts eine Sidebar, die halb so groß wie der Inhaltsbereich ist, kann man folgendes Konstrukt erstellen:

<div class="row">
    <div class="eight columns">
        <p>Hier befindet sich der Inhaltsbereich</p>
    </div>
    <div class="four columns">
        <p>Hier ist die Sidebar</p>
    </div>
</div>

Natürlich kann man diese Elemente auch verschachteln. Dabei muss aber beachtet werden, das immer erst ein Div mit der Klasse row aufgebaut werden muss, damit Foundation erkennt, dass die columns in einer neuen Ebene aufgebaut werden sollen. Dadurch erkennt man auch den Sinn des row-Elements. In einem Beispiel wollen wir im Inhaltsbereich ein neues Grid für einen Artikel und einem dazu passenden Bild aufbauen:

<div class="row">
    <div class="eight columns">
        <div class="row">
            <div class="three columns"
                ><img src="article.png" alt="Artikelbild">
            </div>
            <div class="nine columns"><p>Artikelinhalt</p></div>
        </div>
    </div>
    <div class="four columns">
        <p>Hier ist die Sidebar</p>
    </div>
</div>

Es sollten, aber es müssen nicht immer alle 12 Grid-Elemente innerhalb einer Reihe (row) genutzt werden. Man kann zum Beispiel auch nur ein Element mit der Größe einer Spalte (column)anlegen und dieses dann zentriert oder ganz rechts am Reihen-Element ausrichten. Zum Zentrieren eines Spalten-Elements ist nur die Erweiterung centered nötig. Um ein Element ganz rechts zu positionieren, sollte man Offsets nutzen. Wenn man ein 4 Spalten großes Element anlegen möchte, kann man durch die Erweiterung der Klasse offset-by-eight das Element ganz rechts innerhalb einer Reihe positionieren.

Beachten sollte man auch, wenn man nicht alle 12 Elemente des Grids ausfüllt, das letzte Element mit der Klasse end zu erweitern.

<div class="row">
    <div class="four columns centered">Zentriert</div>
    <div class="four columns">Links</div>
    <div class="four columns end">Mitte mit Abschluss</div>
</div>

Foundations mobiles Grid

Foundation passt zwar automatisch die Größe von Elementen an die Größe der Umgebung an. Allerdings ist es manchmal gewollt, dass Elemente sich auf mobilen Geräten anders verhalten sollen. Dafür gibt es in Foundation eine optionale Möglichkeit das Verhalten einzelner Elemente auf Geräten mit kleinen Bildschirmen durch ein sogenanntes Mobile Grid anzupassen.

Dieses Mobile Grid hat eine maximale Größe von 4 Spalten und kann der jetzigen Klasse einfach hinzugefügt werden.

<div class="row display">
    <div class="four mobile-two columns">Anderes Verhalten mobile Geräte</div>
    <div class="eight mobile-two columns">Anderes Verhalten mobile Geräte</div>
</div>

In diesem Beispiel würden die beiden Elemente auf sehr kleinen Bildschirmen untereinander dargestellt werden. Mit der expliziten Mobil-Anweisung erscheinen diese nun auf kleinen Geräten nebeneinander.

Foundation und Typographie, Buttons, Formulare

Bei den üblichen Dingen wie Überschriften, Links, Aufzählungen gibt es auf den ersten Blick nicht viel spektakuläres. Das braucht es allerdings bei der Typographie auch nicht. Es reicht, wenn diese sauber und angenehm wirkt. Dafür haben sich die Foundation-Entwickler durch das modular scale Konzept von Tim Brown inspirieren lassen, das unter Anderem den Goldenen Schnitt beinhaltet. Dadurch wirkt die gesamte typographische Gestaltung ruhig und sehr leicht zu lesen, was auch für die angenehme Umsetzung von Blockquotes und Subheader gilt.

Bei den Buttons fällt sofort auf, dass sie tatsächlich wie Buttons wirken. Das ist wichtig, denn aus der Erfahrung wissen Web-Nutzer, dass Elemente, die zur Interaktion konzipiert worden sind, in der Regel auch tatsächlich eine Interaktionsmöglichkeit widerspiegeln. Daher sollten Buttons auch wie Buttons wirken. Ich nutze diese Umsetzung sehr gerne, um einen ruhigen und übersichtlichen Stil auf einer Website aufbauen zu können. Denn dadurch erhält jedes Element einen Zweck, der für den unbedarften Nutzer auf den ersten Blick erkennbar ist.

Es existiert auch die Möglichkeit, Button-Gruppen anzulegen, um eine Zusammengehörigkeit der jeweiligen Button-Elemente zu demonstrieren.

Formulare sind ähnlich wie bei anderen Frameworks aufgebaut und haben dadurch auch ein ähnliches Look and Feel. Man kann hier aber .inline-Elemente nebeneinander platzieren, zum Beispiel ein Feld für die Hausnummer, neben einem Feld für Straße. Vor oder nach einem Input-Feld können prefix-, bzw. postfix-Zeichen oder Actions eingebunden werden (zum Beispiel für eine Währung oder einen Suchbutton).

Optional können vom Stil her angepasste Checkboxen und Radio-Buttons aktiviert und Select-Felder können als angepasste Dropdown-Boxen dargestellt werden.

Foundation und die Navigation

Die Navigation bzw. deren Handling für den User ist eins der Dinge, die mich noch nicht ganz überzeugen. Nutzen kann man es aber auf jeden Fall. Aufgebaut wird die Navigation im HTML5-Element nav zum Beispiel mit der Klasse top-bar und die Navigationselemente selbst als Liste. Listen können dabei entweder links oder rechts in der Navigation angeordnet sein.

<nav class="top-bar fixed">
    <section>
        <ul class="left">
            <li><a href="#">Link</a></li>
        </ul>

        <ul class="right">
            <li><a href="#">Link</a></li>
        </ul>
    </section>
</nav>

Standardmäßig verläuft die Navigation über die gesamte Breite des Browsers. Mit der Klasse contain-to-grid kann man dafür sorgen, dass sich die Navigation einem umschließenden Div mit der Klasse row anpasst. Gibt man der Navigation zusätzlich die Klasse fixed, wird diese, wie erwartet an der jeweiligen Position fixiert. Zum Beispiel bei den Klassen top-bar fixed fixiert sich die Navigationsbar am oberen Rand des Browserfensters.

Zusätzliche Features

Foundation bietet weitere Möglichkeiten wie einen integrierten Slider (Orbit), der sich der Umgebung anpasst, also zum Beispiel gut auf mobilen Geräten funktioniert. Wobei hier natürlich nicht vergessen werden darf, die jeweilige Bildgröße anzupassen. Mit Hilfe des Sliders kann entweder reiner Content oder auch Bildmaterial angezeigt werden. Die Integration klappt dabei ziemlich problemlos.

Des Weiteren kann man auch Modals einbinden, also schwebende Fenster, die sich über den Inhalt legen und sozusagen als Alert-Box-Ersatz fungieren. Natürlich kann man damit auch ganz andere Dinge anstellen. Auch Tabs sind bei Foundation dabei. Die sind zwar wenig spektakulär, aber auf mobilen Geräten gut zu bedienen, was bei Tabs einen echten Pluspunkt darstellt.

Darüber hinaus gibt es noch weitere Elemente wie Labels, Tooltips oder ein Accordion-Widget. Wichtig ist auch die Möglichkeit, über eine CSS-Klasse Elemente auf der Website für bestimmte Geräte auszublenden, oder auch nur für bestimmte Geräte anzuzeigen. Ein Element mit der Klasse hide-for-large ist auf großen Geräten nicht sichtbar, hingegen werden durch die Klasse show-for-small Elemente nur auf kleinen Bildschirmen sichtbar. Man kann sein Design auch darauf anpassen, ob sich das Gerät im Landscape- oder Porträt-Modus befindet oder ob es einen Touchscreen hat.

Unterschiede zu anderen Frameworks

Der größte Unterschied zu anderen Frameworks liegt in der expliziten Empfehlung, es für Frontend-Lösungen zu nutzen und besonders dort, wo ein responsives Design gefragt ist.

Skeleton hat dabei den gleichen Ansatz, bietet aber nicht denselben Funktionsumfang. Skeleton hat aber den Vorteil, dass es leichter anzupassen ist, respektive sogar angepasst werden muss. Bei Foundation besteht durch die Tatsache, dass es bereits ein fertiges Design mit den wichtigsten Features gibt, derselbe Effekt, der durch den Bootstrap-Einsatz entstehen kann. Nämlich, dass am Ende viele Seiten dasselbe grundlegende Design haben und so die Entwicklung lahmen kann.

Im Vergleich zu 960.gs, welches ein reines Grid-Framework ohne Elemente ist, hat Foundation Vorteile im Bereich Rapid Prototyping einer Webseite, weil es bereits von Haus aus responsives Design bietet. Dafür gibt es bei 960.gs zwar Lösungen, diese sind aber optional und müssten extra eingebunden werden, wie zum Beispiel Adapt.js [http://adapt.960.gs]. Allerdings ist 960.gs immer noch eine gute Alternative, vor allem, wenn man nach wie vor konzeptionelle Entwürfe zuerst in einer grafischen Umgebung wie Photoshop oder Fireworks entwerfen will.

Bootstrap wiederum ist vor allem für User-Interfaces im Backend-Bereich gedacht. Es ist nicht so verspielt und hat sich komplett auf die Usability fixiert. Auch Bootstrap hat den Fokus nicht auf responsives Design gesetzt, bietet aber eine einfache Möglichkeit, dies einzusetzen. Durch die vielen Möglichkeiten der Gestaltung eines Grid in Bootstrap, kann dies im Endeffekt etwas länger dauern, ist aber insgesamt variabler.

Fakt ist, dass Foundation und Bootstrap sich sehr ähneln. Es gibt Punkte, wie die Navigation oder die Möglichkeit, die Kontrolle über sein Design zu behalten. Dagegen bietet Foundation ein Design, mit dem sich schnell ein User-Interface entwerfen lässt, das einen vollen Funktionsumfang bietet und dabei gleichzeitig auf allen Geräten professionell wirkt und intuitiv bedienbar ist.

Welches Framework soll ich denn nun nehmen?

Es kommt also im Endeffekt, wie immer, auf den gewünschten Einsatzzweck an. Wer sich als Designer lieber auf die Arbeit eines erfahrenen Teams verlässt, was die Umsetzung eines responsiven Designs angeht, sollte Foundation oder Skeleton verwenden, je nach gewünschtem Funktionsumfang. Wer allerdings selber bestimmt möchte, wie sein Design auf den jeweiligen Endgeräten aussieht und auf einen großen Funktionsumfang nicht verzichten möchte, sollte auf Bootstrap setzen. Und wer von Anfang an die komplette Kontrolle über das Aussehen behalten und UI-Elemente ganz individuell gestalten möchte, aber trotzdem auf ein Grid setzen will, der sollte mit 960.gs arbeiten, je nach Bedarf auch mit Unterstützung durch Adapt.js

Ich habe für den schnellen Überblick eine Tabelle erstellt. (Bitte beachten Sie dabei, dass dies keine Wertung ist, sondern nur den Feature-Umfang darstellen soll. So ist es schneller möglich, das passende Framework zu wählen. Außerdem betrachte ich nur den Auslieferungszustand der Frameworks. Denn mit PlugIns ist es möglich, alle fehlenden Features zu ersetzen.)

Name Foundation Bootstrap Skeleton 960.gs
Photoshop-Vorlage X X X
Grid-basiert
Responsive-Grid ✓ (optional) X
Angepasste Typographie X
Erweiterte Formulare X X
Media Queries X
Online anpassbar X
Icon-Sets X X X
Slider X X
Modal X X

 

(dpe)

Kategorien
Boilerplates & andere Tools Programmierung

WeBuilder 2011: Web-Editor für Windows, nicht kostenlos, aber preiswert

Bis vor kurzem war ich noch Windows-User und total verliebt in meine Entwicklungsumgebung „WeBuilder 2011„. Viele Editoren hatte ich schon getestet und von keinem war ich so recht begeistert – bis der WeBuilder in mein Leben trat und mir meine Arbeit angenehm erleichterte. Endlich hatte ich einen Editor gefunden, der gut zu bedienen war, eine sehr kurze Ladezeit hatte und Funktionen mitbrachte, die besonders die Fehlersuche erleichterten.

Der Webuilder 2011 Webeditor für Windows

In diesem Artikel möchte ich, neben einer kurzen Vorstellung der Grundfunktionalität,  einige Funktionen hervorheben, die mir besonders gut gefallen haben.

Webuilder 2011 – eine Auswahl der Grundfunktionen

  1. Bearbeitung von HTML, CSS, JavaScript, PHP, ASP, Ruby in einem einzigen Programm
  2. Beherrscht HTML5 und CSS3
  3. Übersichtliches, leichtgewichtiges Programm mit extrem kurzer Ladezeit
  4. Upload per FTP oder SFTP integriert
  5. Hochwertiger, vollständig anpassbarer und vertrauter Texteditor
  6. Codeschnipsel-Bibliothek und Codevorlagen
  7. Hervorhebung zusammengehöriger und fehlender HTML-Tags
  8. Codefaltung
  9. SVN Unterstützung über TortoiseSVN und Kontextmenüs im Datei-Explorer

Der Webuilder 2011 Webeditor für Windows

Diese Funktionen des Webuilders 2011 gefallen mir am besten

1. – Highlighting der geschlossenen Divs

Der Webuilder 2011 zeigt geschlossene Divs an

2. – Sobald sich jedoch ein Fehler im Code findet, hier zum Beispiel ein nicht geschlossenes Div, wird auch das angezeigt.

Hier zeigt der Webuilder2011 Editor ein nicht geschlossenes Div an - Error Highlighting

3. – Ebenso wird eine Vorschaufunktion geboten, in der unteren Funktionsleiste kann man den Bildschirm horizontal und vertikal teilen.

Die eingebaute Vorschaufunktion im Webuilder2011

Die wesentlich bessere Vorschau erreicht man jedoch über das Menü, sie öffnet die betreffende Datei in einem Browser. Hier kann man auch mehrere Browser angeben, ganz nach persönlicher Vorliebe.

Die bessere Vorschaufunktion erreicht man über das Webuilder 2011 Menü

4. – HTML  und CSS überprüft man mit nur einem Klick. Hierbei werden die Validatoren des W3C (World Wide Web Consortium) genutzt.

Nur einen Klick entfernt ist die Validierung eines Webdokuments aus dem Webuilder 2011

Fazit

Der WeBuilder 2011 Web-Editor bietet unheimlich viel Funktionalität zu einem Preis von € 35,85 für die Privatlizenz. Die vollständige Lizenz kostet € 69,85. Meiner Meinung nach ist es der beste Web-Editor für Windows. Selbstverständlich läuft das Programm unter Windows 7.

Blumentals WeBuilder 2011 Webeditor – Informationen und Download

(dpe)

Kategorien
Boilerplates & andere Tools Programmierung

Initializr jetzt auch mit Bootstrap und „Mobile First“-Template

Initializr ist ein Onlinedienst, mit dessen Hilfe man sich eine Projektvorlage auf der Basis der HTML5 Boilerplate (H5BP) zusammenklicken kann. Vor ziemlich genau einem Jahr berichtete ich erstmals darüber. In der Zwischenzeit wurde das Projekt des Entwicklers Jonathan Verrechia deutlich erweitert. So ist es mittlerweile nicht nur möglich, H5BP zu verwenden. Vielmehr steht ein dediziertes Responsive-Template, sowie Twitters Shooting Star Bootstrap zur Verfügung.

Initializr: die Initialzündung für das eigene Webprojekt

Junge, wie die Zeit vergeht. Da dachte ich vor knapp 12 Monaten noch, Initializr habe keine große Perspektive. Zu limitiert erschienen mir die Möglichkeiten. Lediglich H5BP wurde unterstützt, responsives Design nur in dessen Rahmen und den Modernizr musste man sich manuell besorgen. Umso überraschter war ich, bei einem Routine-Blick auf ältere Projekte feststellen zu können, dass Verecchia in den letzten 12 Monaten keineswegs untätig gewesen ist.

So hat er vor allem eine handfeste Alternative für das responsive Webdesign durch den Einbau von Twitters Bootstrap in Initializr geschaffen, auch Modernizr backt er jetzt gleich mit ein. Bootstrap, das Framework aus dem Hause Twitter, stand zum Start des Initializr noch gar nicht zur Verfügung, sondern wurde erst letztes Jahr im Juli der Web-Öffentlichkeit zugänglich gemacht. Seither erlebt es einen regelrechten Boom.

Developern, die einen Mobile First Approach verfolgen, liefert Verecchia eine speziell unter diesem Ansatz gedachte eigene Vorlage mit. Die Kompilation des eigenen Initialzündsatzes ist simpel. Zunächst gilt es, die Entscheidung zu treffen, auf welcher Basis man sein Projekt starten will. Hat man sich zwischen H5BP, Bootstrap und Verecchias Responsive-Template entschieden, erfolgt in einem zweiten Schritt die Auswahl der Optionen im Detail. Hier ist die Möglichkeit der Einbindung von Modernizr und Respond, sowie die Option, das CSS als LESS generieren zu lassen, besonders erwähnenswert.


Initializr: Entdecke die Möglichkeiten…

Initializr verwendet zum Zeitpunkt dieses Beitrags die jeweils aktuellen Versionen aller Module, die es in das jeweilige Download-Zip der Wahl verpacken will. Verecchia liefert zu allen drei Varianten eine mehr oder weniger ausführliche, aber stets ausreichende Dokumentation in Form von Beiträgen auf seinem Blog mit.

Wer ohnehin vorhatte, ein Projekt auf Basis von H5BP oder Bootstrap zu starten, macht keinen Fehler, wenn er/sie die Grundkonfiguration über den Initializr vornimmt. Wer sich näher mit dem Ansatz Mobile First befassen will, sollte sich einmal das entsprechende Template Verecchias ansehen (Demo | Dokumentation).

Kategorien
Boilerplates & andere Tools Design HTML/CSS Programmierung

WYSIHTML5 – Rich Text-Editor für die Textarea erzeugt valides HTML5

WYSIHTML5 ist ein frischer Rich Text-Editor in der Tradition alter Bekannter wie TinyMCE. Er wird in eine Textarea implementiert und bietet Bearbeitungsfunktionen isoliert für die Inhalte dieses Elements. Das Prinzip ist nicht neu und seit Jahren gängig in den Blogs und CMS dieser Welt. Neu an WYSIHTML5 ist zweierlei. Zum einen schreibt es semantisches, valides HTML5, zum anderen lässt sich der zugrundeliegende Parser manuell anpassen.

WYSIHTML5: Javascript-Lösung für valide Auszeichnungen

Die als Open Source über GitHub verfügbare Javascript-Lösung WYSIHTML5 wirkt auf den ersten Blick wie der zwanzigste Klon bereits vorhandener Wettbewerber. Es handelt sich aber mitnichten um alten Wein in neuen Schläuchen, vielmehr bringt WYSIHTML5 tatsächlich sinnvolle Änderungen in eingefahrene Strukturen. Mit immerhin rund 150k ist der Editor weniger als halb so groß wie der TinyMCE. Zudem benötigt WYSIHTML5 kein jQuery oder sonstige Frameworks, sondern läuft als eigenständige Anwendung ohne jegliche Dependenzen.

Jedes iframe wird innerhalb einer Sandbox ausgeführt, weshalb die Entwickler den Editor als besonders Cross-Scripting-resistent annoncieren. Praktisch: URLs werden während des Eintippens automatisch verlinkt. Unter Chrome kann die Spracheingabe genutzt werden. Kollege Potschien schrieb kürzlich hier darüber. Wichtig für das konsistente semantische Markup der gesamten Site ist, dass WYSIHTML5 nicht mit Inline-Styles, sondern mit Klassen-Namen arbeitet.

WYSIHTML5: Anpassbarer Parser sorgt für beste Ergebnisse

Herzstück des Tools ist aber der separat einzubindende Parser. Dieser ist entwicklerseits bereits mit Regeln ausgestattet, die für eine valide HTML5-Auszeichnung sorgen. Das funktioniert sogar beim Einkopieren von sogenanntem HTML aus MS Word. Jederzeit kann man jedoch die Regeln manuell umschreiben. Immerhin gibt es bei manchen Auszeichnungen mehrere zulässige Varianten. Durch Anpassung des Parsers legt man seine persönliche Präferenz als Standard fest.

WYSIHTML5: Toolbar nach Maß

Ebenso anpassbar wie der Parser ist die Toolbar, die man innerhalb der Textarea anzeigen lässt. Innerhalb eines Div-Containers werden A-Elemente mit HTML5 Data-Attributen platziert, die wiederum von Funktionen des Javascript ausgelesen und verarbeitet werden. Sie erinnern sich, HTML5 Data-Attribute können beliebige Daten beinhalten ohne dass diese dem Endnutzer angezeigt würden. Sie sind also im Text der Seite, aber nicht in dessen Layout vorhanden.

Da jedes Werkzeug über ein eigenes A-Tag eingebunden wird, kann man natürlich frei über die bereit zu stellende Werkzeugvielfalt bestimmen und je nach Anwendungszweck mal mehr oder eben weniger Einzeltools verfügbar machen. Die Ansprache der einzelnen Teile des WYSIHTML5 erfolgt per Javascript über die ID des jeweiligen Elements. Das sieht bei der Textarea dann so aus:

Dass der Editor als Open Source unter GitHub zum kostenfreien Download bereit steht, erwähnte ich bereits. Unerwähnt blieb bislang, dass das Projekt eine erfreulich gute Dokumentation erfährt. Ebenfalls unerwähnt blieb der Initiator des Projektes. Es handelt sich dabei um unser aller XING, das soziale Netzwerk, das sich vor wenigen Jahren fast gegen Facebook durchzusetzen schien. WYSIHTML5 läuft unter Firefox ab Version 3.5, Chrome, dem Internet Exploder ab Version 8, Safari ab Version 4, Opera ab Version 11 und dem Safari unter iOS ab Version 5. In nicht unterstützten Browsern wird eine Standard-Textarea angezeigt.