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
(Kostenlose) Services Essentials

RhodeCode: Selbstgehostetes Admin-Tool für die Github-Alternative Mercurial

Vor einigen Wochen haben wir bereits GitLab vorgestellt als Alternative zu GitHub als Self-Hosting-Lösung. Für die Versionsverwaltung Mercurial(hg) heißt das entsprechende Pendant RhodeCode. Doch kann RhodeCode wirklich mit der git-Lösung mithalten?

rhodecode-summary-1024x486-w640

Mercurial und Git – Ähnliche Ansätze, ähnliche Zielgruppe, Unterschiede im Detail

Mercurial und Git sind zwei Versionsverwaltungen mit ähnlichen Ansätzen, diese Ähnlichkeiten sind auch bei RhodeCode und GitLab sichtbar. Die Features unterscheiden sich nur gering. In RhodeCode lassen sich Repositories anlegen, es gibt Statistiken zu Repos, ein Changelog, Verwaltung der Branches und eine File-Ansicht. Bei einigen Dingen fehlen allerdings noch kleinere Features, dies lässt sich jedoch verschmerzen. Erkennbar ist allerdings, dass man sich doch stark an GitHub ausgerichtet hat. Das wird deutlich an Features wie dem Folgen von Usern oder der Möglichkeit Repositories zu forken (klonen). Der Gemeinschaftsansatz ist hier ausgeprägter als zum Beispiel bei GitLab. Hier soll das Forken aber auch bald möglich sein. Das liegt sicherlich in der Natur von Mercurial, bei welcher das Klonen eine zentrale Rolle spielt.

Interessant ist die Volltextsuche. Alle Repositories zum Beispiel nach Schlüsseln oder anderen wiederkehrenden Informationen durchsuchen zu können, kann für einige Unternehmen interessant sein. Auch die Nutzerverwaltung mit der Zuweisung von Rechten ist wichtig, gerade um Hierarchien in Entwicklungsteams abbilden zu können. Ebenfalls möglich ist der direkte Upload von neuen Dateien in Repositories. Diese lassen sich wiederum direkt in RhodeCode bearbeiten und committen.

Die Installation und Integration ist für Teams, die Python als Entwicklungssprache bevorzugen, denkbar einfach. Mit Hilfe von pip oder easy_install besorgt sich RhodeCode alleine die nötigen Abhängigkeiten. Updates können dann ebenfalls relativ einfach eingespeist werden. Am Besten nutzt man hierfür virtualenv, wie auch in der Dokumentation vorgeschlagen.

Features und Wartbarkeit sind nicht die Probleme, die man bei RhodeCode vorfindet. Das größere Problem liegt in der Übersichtlichkeit des User-Interfaces. Diese ist nämlich kaum vorhanden. Insgesamt wirkt alles sehr überladen und groß. Einen responsiven Ansatz hat man nicht gewählt. Schade, denn gerade im mobilen Bereich wäre ein schönes Frontend der eigenen Projekte doch sehr hilfreich, zum Beispiel wenn man sich von unterwegs den aktuellen Entwicklungsstand ansehen will.

Die Anzahl und der Gedanke der Features sind wirklich großartig. Auch die Performance kann sich durchaus sehen lassen. Wenn das Team jetzt noch an der Oberfläche bastelt, hat RhodeCode auf jeden Fall großes Potential. Nicht verschweigen will ich dabei, dass man die Oberfläche auch selber anpassen kann. Dies liegt durchaus im Bereich des Machbaren und wird zunehmend öfter durchgeführt, gerade in Bezug auf die Integration der Software in die eigene Umgebung.

Wer Mercurial ohnehin bereits zur Versionsverwaltung nutzt, kann problemlos RhodeCode verwenden. Wer bei Github zufrieden ist, erhält auch mit RhodeCode kein zwingendes Wechselargument.

Links zum Beitrag:

  • Feature-List RhodeCode – packages.python.org
  • RhodeCode Projektseite – rhodecode.org
  • RhodeCode Demo – rhodecode.org

(dpe)

Kategorien
(Kostenlose) Services Essentials

GitLab 4.0: Github-Alternative zum Selberhosten

GitLab ist mittlerweile in der Version 4.0 erschienen. Dabei handelt es sich um eine „Git-Management-Software“ für das lokale Netzwerk, die zunächst wie ein GitHub-Klon wirkt, aber mit jeder Version stetig mehr Features bekommt. So wird GitLab mehr und mehr zu einer validen Alternative für GitHub-User, denen es lieber wäre, wenn die Projekte nicht im Weltennetz gepflegt werden müssten. Wer will seine Investition schon einem öffentlichen Service anvertrauen, wenn er es vermeiden kann?

Mit Hilfe von GitLab können Git-Repositories erstellt und verwaltet werden. Ähnlich wie bei GitHub kann dabei der veränderte Code angezeigt und teilweise bearbeitet werden. Eine Syntax-Hervorhebung, Unterschiede zwischen den einzelnen Commits und Darstellungen von Verzweigungen der Branches sind nur einige Features, welche die eigentliche Arbeit mit Git enorm erleichtern.

Gitlab Projektübersicht
Gitlab Projektübersicht

Rege Entwicklungstätigkeit: Neue Features mit jeder GitLab-Version

In der neuesten Version werden nun auch Nutzer-Gruppen unterstützt. Gruppen können Repositories anlegen und so den Mitgliedern der Gruppe automatisch Rechte für die neuen Repositories verleihen; eine Arbeitserleichterung, speziell bei größeren Gruppen. Darüber hinaus bietet GitLab ein kleines Ticket-System (Issues), sowie ein einfaches, aber funktionales Wiki und eine übersichtliche Administration. Über die Oberfläche können außerdem die SSH-Keys der Nutzer eingebunden werden. Auch die Abbildung einer Nutzer-Hierarchie in Git ist möglich. Merge-Requests können zum Beispiel direkt in GitLab bearbeitet werden.

GitLab ist ein sehr schönes Frontend für Git-Nutzer, die schnell eine Übersicht über den Status eines Projektes bekommen wollen. Das Design erinnert stark an die üblichen Bootstrap-Seiten, was jedoch den Vorteil birgt, dass man sich sehr schnell zurecht findet. Das Featureset erschlägt einen nicht unbedingt, bietet aber alles, was man landläufig so benötigt. Für die Arbeit in Projekten und in der agilen Softwareentwicklung ist dies vollkommen ausreichend. Für Dokumentationen kann zum Beispiel das integrierte Wiki genutzt werden.

Gretchen-Frage: GitHub oder GitLab?

Grundsätzlich stellt sich die Frage, ob es Sinn ergibt, den Aufwand für Hosting und Administration der Software zu übernehmen. Daten müssen gespiegelt und zusätzlich Backups erstellt werden. Ist es also nicht besser auf das zuverlässige GitHub zu setzen? Im Endeffekt kommt es auf die eigenen Bedürfnisse an. Wie streng intern müssen meine Daten und meine entwickelte Software behandelt werden? Will ich wirklich, dass meine Investition auf fremden Servern liegt?

Wenn für die Einbindung von GitLab und Git erst noch Expertise eingekauft werden muss, das Team nicht zu groß wird und man extra jemanden mit der Administration beauftragen muss, sollte man wohl eher GitHub nutzen. Einen nennenswerten Kostenvorteil darf man bei keinem der Systeme erwarten.

Gerade für größere Unternehmen kann es sinnvoll sein, auf GitLab zu setzen. Erfahrenen Unix-Administratoren geht die Einbindung und Installation schnell von der Hand, da GitLab auf Rails und Gitolite basiert. Sicherheitskritische Probleme sind bisher eher selten aufgetreten, dürften aber auch kaum eine Rolle spielen, da GitLab in der Regel nur im internen Netz erreichbar sein wird. Der Administrationsaufwand ist eher als gering einzustufen. Updates kommen zwar öfter, sind aber relativ einfach zu applizieren.

Mit jeder Version erschienen bis dato immer wieder neue hilfreiche Features. Auf Anregungen der Community wird ebenfalls schnell reagiert. Da GitLab intuitiv nutzbar ist und leicht, aber zuverlässig administriert werden kann, spricht kaum etwas dagegen, die Github-Alternative zumindest einmal auszuprobieren.

GitLab ist Open-Source, steht unter der liberalen MIT-Lizenz und stellt eine sinnvolle Erweiterung für die eigene Software-Umgebung dar. Wer sich erstmal ein Bild von GitLab machen will, kann sich einen kostenlosen Account auf GitLab.com, der Hostingplattform zu GitLab.org, anlegen. GitLab.com wurde dezidiert zu dem Zweck ins Leben gerufen, den Einstieg in die Nutzung von GitLab zu erleichtern.

Links zum Beitrag:

  • Self hosted Git management software – GitLab.org
  • Eine Fremdhostinglösung steht ebenfalls bereit – GitLab.com

(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
Design UI/UX

Rapid Prototyping mit dem Foundation-Framework

Webdesigner kennen das Problem. Der Kunde will schon in einem frühen Stadium etwas Vorzeigbares und auch Bedienbares sehen. Da reicht kein Bild, das aus Photoshop oder anderen Grafiksoftwares exportiert wurde. Er will was zu klicken haben, was im Übrigen völlig verständlich ist. Foundation kann den Webdesigner bei diesem Problem unterstützen. Denn es ist tatsächlich relativ schnell möglich, damit mehr als nur ein Mockup zu erstellen.

Vergleich des Beispiels auf dem IPhone und einem normalen Browser

Am Besten probiert man das natürlich selber aus und wir wären nicht Dr.Web, wenn wir nicht zufällig ein Beispiel parat hätten. Um dieses Beispiel nachvollziehen zu können, benötigt man Foundation. Dieses laden Sie bitte von der Download-Seite herunter, wobei Sie sich auch gleich Ihre Wunsch-Konfiguration zusammenstellen könnten. Nachdem Foundation runtergeladen ist, öffnen Sie bitte die mitgelieferte index.html und löschen jegliches Beispiel-Markup aus dem Body-Bereich, sprich: Der Bereich zwischen body und /body ist jetzt leer..

Eine Beispiel-Website entsteht

In unserem Beispiel geht es darum, eine Startseite für ein Unternehmen zu erstellen. Basierend auf dem Prinzip: „Make things as simple as possible, but not simpler“ wollen wir eine einfache, strukturierte Webseite mit klaren Handlungsanweisungen für den User erstellen.

Beginnen wir mit der Navigation. Diese wird in diesem Beispiel den Namen des Unternehmens tragen und vier Navigationspunkte haben. In der Navigationsleiste ganz rechts sollte man sich noch anmelden können. Auf eine Suche verzichten wir zunächst. Das Anmeldefenster sollte sich in einem Modal öffnen und die Möglichkeit bieten, eine Kundennummer und ein Passwort einzugeben. Außerdem benötigen wir einen Button zum Absenden des Formulars und einen Button, wenn man das Passwort vergessen hat.

Zuerst wird die Struktur der Navigation aufgebaut:

<div class="row">
  <div class="twelve columns">
    <nav class="top-bar">
      <ul>
        <li class="name"><h1><a href="#">Title</a></h1></li>
        <li class="toggle-topbar"><a href="#"></a></li>
      </ul>
      <section>
        <ul class="left">
          <li><a href="#">Startseite</a></li>
          <li><a href="#">Produkte</a></li>
          <li><a href="#">Unternehmen</a></li>
          <li><a href="#">Kontakt</a></li>
        </ul>

        <ul class="right">
          <li><a href="#" data-reveal-id="loginModal">Anmelden</a></li>
        </ul>
      </section>
    </nav>
  </div>
</div>

Zunächst legen wir ein umschließendes div mit der Klasse row an, welches ein 12 Spalten großes Div beinhaltet. Dort befindet sich die Navigation mit der Klasse top-bar. Der Rest ist eigentlich ziemlich selbsterklärend. Die Navigationspunkte neben dem Titel sind links angeordnet und haben daher die Klasse left. Der Punkt „Anmelden“ soll ganz rechts in der Navigationsleiste stehen und bekommt noch das data-Attribut data-reveal-id, welches man gleich für das Modal-Fenster zum Anmelden benötigt.

 

Foundation Navigation
Foundation Navigation

 

Dieses Modal besteht im Grundgerüst aus einem Div mit einer eindeutigen ID, über die das Modal später aufgerufen werden kann und einer Klasse reveal-modal, damit das Framework weiß, dass der Inhalt des Div Teil eines Modals ist. Im Modal wird eine h3-Überschrift angelegt, danach das Formular für Passwort und Kundennummer.

<div id="loginModal" class="reveal-modal">
    <h3>Login</h3>
    <div class="row">
        <div class="two mobile-one columns">
            <label class="right inline"><div class="hide-for-small">Kundennr.:</div><div class="show-for-small">KNR:</div> </label>
        </div>
        <div class="ten mobile-three columns">
            <input type="text" placeholder="000000" class="eight" />
        </div>
    </div>
    <div class="row">
        <div class="two mobile-one columns">
            <label class="right inline"><div class="hide-for-small">Passwort:</div><div class="show-for-small">PW:</div> </label>
        </div>
        <div class="ten mobile-three columns">
            <input type="text" class="eight" />
        </div>
    </div>
    <div class="row">
        <div class="two mobile-one columns">

        </div>
        <div class="ten mobile-three columns">
            <input type="submit" class="button small success">
            <a href="#" class="button small alert">Passwort vergessen ?</a>
        </div>
    </div>
</div>

Damit die Formulare auch auf mobilen Browser gut aussehen und bedienbar sind, braucht man ein paar Anpassungen. Das Label bekommt hier die zusätzlich die Klasse mobile-one und die Felder die Klasse mobile-three, damit diese auch auf dem mobilen Browser nebeneinander existieren. Dadurch entsteht aber der Effekt, dass sich Label und Eingabefeld überschneiden auf einige Geräten. Dafür nutzt man die Klassen show-for-small und hide-for-small, um für mobile Geräte Kurzfassungen der Labels anzeigen zu können. Das sollte man allerdings noch optimieren, würde aber hier den Rahmen sprengen. Zu beachten ist noch, dass das Markup für das Modal aus Performance-Gründen immer am Ende des Quellcodes im body-Bereich stehen sollte.

Foundation Login Modal
Foundation Login Modal

Damit ist die Gestaltung der Navigation und des LogIn abgeschlossen und wir kümmern uns um den Bereich mit Logo und Slider. Hier soll ein prominentes und daher großes Logo links vom Slider entstehen. Als Bildersatz verwende ich im Beispiel den Dienst von placehold.it, über den wir bei Dr. Web hier ausführlich berichteten.

Foundation Slider und Logo
Foundation Slider und Logo

Für diesen Bereich baut man ein Grid aus einem 4 und einem 8 Spalten großen Element auf. Im Element mit der Größe 4 wird das Logo platziert, hier einfach als img-Tag ausgeführt, und im größeren Element wird sich der Slider wiederfinden. Das Ganze wird von einem row-Div umschlossen.

Der Slider ist so aufgebaut, dass er nur ein Div mit der Klasse featured benötigt, in welchem die jeweiligen Bilder definiert werden. Also alles ziemlich unkompliziert gehalten. Das Logo sollte man bei mobilen Geräten ausblenden, da es sonst zu viel Platz wegnimmt. Alternativ könnte man eine kleinere Grafik einbinden. Das fertige Markup kann dann zum Beispiel so aussehen:

<div class="row">
    <div class="four columns hide-for-small">
        <img src="http://www.placehold.it/283x248&text=Firmenlogo" />
    </div>
    <div class="eight columns">
        <div id="featured">
            <img src="http://www.placehold.it/1200x500&text=slide" />
            <img src="http://www.placehold.it/1200x500&text=slide" />
            <img src="http://www.placehold.it/1200x500&text=slide" />
        </div>
    </div>
</div>

Im abschließenden Inhaltsbereich sollte sich ein Einführungstext und darunter zwei kleinere Texte befinden. Außerdem kommt noch eine Sidebar dazu, mit Markenzeichen der Partner.

Foundation Content
Foundation Content

Dazu bauen wir einfach wieder ein Div mit der Klasse row. Darin sollte ein Div mit 8 und ein Div mit 4 Spalten enthalten sein. Im Div mit 8 Spalten werden die Texte platziert. Dieser wird wiederum mit 2 Divs der Klasse row verschachtelt. Im ersten wird ein Grid mit nur einer Spalte von der Größe 12 angelegt und im zweiten ein Grid mit 2 gleich großen Spalten, also jeweils mit der Größe 6.

Die jeweiligen Spalten kann man nun mit Inhalt befüllen. Im Beispiel verwende ich eine h3-Überschrift und einen Absatz mit Text, der 50 Wörter lang ist.

In der Sidebar mit der Größe von 4 Spalten wird nun ganz simpel eine Überschrift integriert und darunter 4 Bilder mit der passenden Größe. Das Ergebnis kann beispielhaft so aussehen:

<div class="row">
    <div class="eight columns">
        <div class="row">
            <div class="twelve columns"><h3>Willkommen<small> auf unserer Seite</small></h3><p>Lorem ipsum dolor sit amet,
                consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
        </div>
        <div class="row">
            <div class="six columns"><h3>Willkommen<small> auf unserer Seite</small></h3><p>Lorem ipsum dolor sit amet,
                consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
            <div class="six columns"><h3>Willkommen<small> auf unserer Seite</small></h3><p>Lorem ipsum dolor sit amet,
                consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
        </div>
    </div>
    <div class="four columns">
        <h3>Unsere Partner</h3>
        <img src="http://www.placehold.it/300x100&text=Partnerlogo" />
        <img src="http://www.placehold.it/300x100&text=Partnerlogo" />
        <img src="http://www.placehold.it/300x100&text=Partnerlogo" />
        <img src="http://www.placehold.it/300x100&text=Partnerlogo" />
    </div>
</div>

Was jetzt noch fehlt, sind, neben der Optimierung, um eine gewisse Performance zu gewährleisten, zum Beispiel ein Fußbereich mit weiteren Informationen. Aber das sollte man nun anschließend problemlos selbst bewältigen können.

Vergleich des Beispiels auf dem IPhone und einem normalen Browser
Vergleich des Beispiels auf dem iPhone und in einem normalen Browser

Die Ergebnisse der Seite sehen auf verschieden Geräten doch schon annehmbar und auch vorzeigbar für einen Kunden aus. Zumindest ist das meine subjektive Ansicht. Und viel Zeit beansprucht das Ganze auch nicht wirklich. Foundation ist offenbar auf dem Wege, seine Beliebtheit und Verbreitung weiter zu steigern.

(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
Design Editoren HTML/CSS

Mac OS X: 5 Editoren im Vergleich

Dieser Beitrag beschäftigt sich mit Entwicklungsumgebungen für das Mac OS. Windows-Anwender warten also bitte auf den entsprechenden Beitrag zu ihrem System: Es kann schon einen guten Teil eines Entwicklerlebens beanspruchen, die ideale IDE zu finden. Damit das aber nicht ganz so lange dauert, werfen wir für Sie einen Blick auf die verschiedenen Möglichkeiten für Webworker unter Mac OS.

//Weitere Editoren-Testberichte gibt es hier//

Dreamweaver

Dreamweaver
Dreamweaver

Beim ersten Öffnen von Dreamweaver war ich überrascht. Positiv. Dreamweaver hatte ich schon einige Zeit nicht mehr genutzt und alles, was mir in Erinnerung geblieben ist, waren hässliche, automatisch erstellte HTML-Zeilen und ein riesiger lahmer Editor. Doch muss ich zugeben, dass mir die neue Oberfläche gefällt. Alles wirkt aufgeräumt und minimalistisch. Klar, Dreamweaver ist nicht der Editor für zwischendurch, den man schnell mal aufmacht, um was zu bearbeiten, das will Dreamweaver aber auch nicht sein.

Besonders gut hat mir die Multi-Screen-Vorschau gefallen. Sich eine Seite so bequem und schnell auf verschiedenen Devices anschauen zu können, kannte ich noch nicht. DW arbeitet nativ mit jQuery/jQuery Mobile und PhoneGap zusammen und hat dafür sogar ein paar nette Vorlagen. Erweiterungen gibt es für DW wahnsinnig viele, also auch hier keine Probleme. Gut ist die umfangreiche Dokumentation, aber hier leistete Adobe schon immer gute Arbeit.

Ich persönlich mag aber diesen „verwaschenen“ WYSIWYG-Ansatz nicht. Alles wirkt irgendwie immer so, als ob es nicht um den Code geht, sondern darum, sich irgendwas zusammenzuklicken. Aber okay, das ist dann wohl Geschmackssache. Dreamweaver versteht sich als IDE zum Entwickeln von Frontends und hat nur wenig für die Backend-Entwicklung zu bieten. Es gibt zwar Unterstützung für PHP, .NET und ColdFusion, den Rest muss man sich aber ggf. über Extensions besorgen.

DW ist einfach eine Referenz und bietet viele Möglichkeiten, aber eben mehr für den Webdesigner. Wer als Frontend-Entwickler eh mit Adobe-Produkten arbeitet, sollte durch die starke Integration z.B. durch Photoshop Dreamweaver nutzen. Einzeln kostet DW allerdings über 500€ und man muss ständig die neuesten Versionen dazukaufen, welche auch um die 150€ kosten. Es gibt ein Mietkonzept mit monatlicher Zahlung.

TextMate

TextMate
TextMate

Beim Begriff TextMate horchen die meisten Mac-Nutzer auf. Das ist doch dieses nette und schnelle Tool für Webentwickler und alle anderen Entwickler für den Mac. Ja, allerdings wirklich nur für den Mac. Windows-User gucken in die Röhre, können aber zumindest Snippets und Commands für TextMate nutzen mit Hilfe des kommerziellen Editors „E Text Editor“

TextMate ist etwas für die Freunde der wirklich minimalistischen Entwicklung und für jene, die sich ihre IDE gerne selber zusammenbasteln. Das geht dank einer großen Anzahl an Erweiterungen und der Möglichkeit, selber schnell Snippets zu schreiben, ohne Probleme und auch recht schnell.

TextMate ist schnell geöffnet und damit auch für den schnellen Bugfix geeignet. Es macht Spaß, damit zu arbeiten. Aber nicht alle Entwickler werden es mögen, viele Extensions einzubinden, die man dann ständig Up-to-Date halten muss. Aktuell kostet TextMate 44,85€. Das ist für eine IDE zwar ein fairer Preis, da TextMate aber eher ein einfacher Editor ist, ist der Preis nicht wirklich überzeugend.

Eclipse /Aptana Studio

Aptana basiert, wie man beim ersten Öffnen sieht, auf Eclipse. Allerdings wirkt Aptana etwas aufgeräumter und performanter. Aptana kommt von Haus aus mit Unterstützung für PHP, RoR, Python und Adobe AIR. Auf der JavaScript-Seite sind die wichtigsten Vertreter nativ dabei, so etwa jQuery oder YUI.

Über FTP/SFTP habt ihr die Möglichkeit, direkt auf externen Servern zu arbeiten. Git wird ebenfalls unterstützt. Erweiterungsmöglichkeiten gibt es einige, zum Beispiel Code-Completion für verschiedene Frameworks.

Aptana ist relativ mächtig und wer gerne mit Eclipse gearbeitet hat, fühlt sich hier auf jeden Fall wohl, wenn er in Zukunft nur noch für das Web entwickeln möchte. Aptana ist entweder unter der GPL oder APL frei erhältlich und für umsonst mehr als nur brauchbar. Aptana war lange Zeit mein Favorit für die Entwicklung von Webanwendungen in PHP. Es ist erhältlich für alle bekannten Plattformen.

Netbeans

Netbeans wirkt anfangs auch wie ein Eclipse-Fork. Doch ist Netbeans eine eigenständige Entwicklung und das macht sich auch bemerkbar. Ähnlich wie bei Eclipse ist es bei Netbeans möglich, verschiedene Bundles für den jeweiligen Anwendungszweck zu verwenden. Dabei ist zu beachten, dass man Netbeans als Complete Bundle wählen kann. Leider läuft dieses Bundle dann nicht mehr wirklich flüssig.

DAs PHP-Bundle bietet nativen Support für Symfony und Zend. Unit Testing mit PHPUnit oder Selenium ist genauso wie Debugging mit xdebug dabei. Seinen Ursprung hat Netbeans aber in der Java-Entwicklung, wofür es zum Beispiel ein GUI Design Tool mitbringt.

Support wird auch hier für Git, FTP/SFTP und MySQL angeboten. In Netbeans ist es möglich, sehr gut mit JavaScript zu arbeiten, denn es werden alle nötigen Dienste nativ mitgeliefert.

Oft ist Netbeans beim Arbeiten gefühlt sehr langsam. Allerdings bietet Netbeans dafür einen starken Funktionsumfang. Wer auf der Suche nach einer Eclipse-Alternative mit ähnlichem Umfang und guten Möglichkeiten zur Erweiterung ist, wird bei Netbeans, welches übrigens kostenlos und als Open-Source zur Verfügung steht, schnell fündig.

Coda 2

Coda 2
Coda 2

Coda 2 ist erst vor Kurzem veröffentlich worden. Es ist nur für den Mac erhältlich und vor allem ziemlich hübsch anzusehen. Nativ werden die meisten Entwicklungssprachen unterstützt, sowie Git, SFTP/FTP, WebDav und Amazon S3 bzw. SSH zur Verbindung mit dem Server. Außerdem gibt es eine Datensicht für MySQL-Server.

Persönlich finde ich, dass das Arbeiten mit Code sehr angenehm ist. Vor allem durch die aufgeräumte Arbeitsfläche und die schnelle Preview-Ansicht erleichtert Coda das Arbeiten für Webworker doch sehr.

Jedoch gibt es keine nennenswerten Erweiterungen für Coda. Wer sich also für Coda entscheidet, sollte sich bewusst sein, dass er seine IDE vorerst nicht groß erweitern kann. Allerdings bietet Coda 2 von Haus aus Support für verschiedene Programmiersprachen.

Coda 2 kostet regulär 99$, ist aber oft im Angebot und wer hier zuschlagen möchte, sollte auch darauf warten. Denn 99$ sind im Vergleich zur Konkurrenz, die sich auf Augenhöhe befindet und oft kostenlos ist, einfach zu viel.

JetBrains

Die Firma JetBrains entwickelt IDEs für verschiedene Anwendungszwecke. PHPStorm für PHP-Entwickler, RubyMine für Ruby-Entwickler, WebStorm für JavaScript-Entwickler, Pycharm für Python/Django-Entwickler und vieles mehr. Die IDEs ähneln sich zwar, sind aber für den jeweiligen Anwendungszweck angepasst.

Aus Erfahrung kann ich über die Entwicklung von Django-Anwendungen mit Pycharm schreiben. Hier bietet Django zahlreiche Dinge, um die Arbeit für Webworker zu erleichtern. Integriertes Unit-Testing, starten der Anwendung direkt aus Pycharm, Git-Integrationen und ein vereinfachtes Deployment.

Pycharm läuft eigentlich immer flüssig. Es gibt aber auch einen Nachteil. Es ist nämlich relativ schwierig, mehrere Projekte mit Pycharm parallel zu bearbeiten, da das jeweils geöffnete Fenster nur das aktuelle Projekt anzeigt.

Für ambitionierte Entwickler kann ich eine Kaufempfehlung für die Jetbrains-Produkte geben. Pycharm gibt es kostenlos für OpenSource-Projekte, für 29$ für Studenten und ab 99$ für professionelle Entwickler.

Fazit

Bei der Wahl eines neuen Editors oder einer kompletten IDE kommt es neben dem persönlichen Geschmack bzgl. des User-Interfaces vor allem auf die Anforderungen an. Wenn man in Teams an größeren Projekten arbeitet, sollte man die Eclipse-Varianten, Netbeans oder das entsprechende JetBrains-Produkt nutzen. Arbeitet man bereits mit anderen Adobe-Produkten und möchte gerne die gegenseitige Integration der Anwendungen beibehalten, ist Dreamweaver die richtige Wahl.

Wer dagegen selbstständig ohne Team an kleineren Projekten arbeitet und öfter mal einen schnellen Bugfix durchführen möchte, der sollte eines der minimalistischen Produkte wählen.

Und wer es ganz puristisch und schnell mag, dem sei der gute alte VIM-Editor ans Herz gelegt, den es in verschiedenen Formen für die meisten Plattformen gibt.

(dpe)

 

Kategorien
Inspiration Tutorials

Nginx – Erste Schritte mit der Apache-Alternative

Nginx (ausgesprochen Engine X) wird von vielen Entwicklern und Administratoren als leistungsstarke Alternative zu Apache angesehen. Dabei bietet es durch seine einfache Konfiguration und auf Performance angelegte Architektur auch Einsteigern in das Thema Webserver viele Vorteile.

nginx Logo

Anfangs ist zu betrachten, wofür Nginx eingesetzt werden soll. Neben dem Einsatz als einfacher HTTP-Server ist vor allem die Verwendung als Reverse-Proxy zur Lastverteilung beliebt. Aber auch bei statischen Webseiten bietet Nginx Performance-Vorteile gegenüber Apache. Um nicht gleich den Stab über Apache zu brechen, muss gesagt werden, dass dieser momentan noch eine weit größere Vielfalt an Modulen bietet, die für viele professionelle Entwickler und Administratoren unerlässlich sind. Nginx bietet weit weniger, aber zumindest schon die meisten wichtigen Module, wie SSL-Support oder erweiterte Caching-Möglichkeiten.

Nginx wird heute bereits, wenn man verschiedenen Quellen glauben mag, zum Betrieb von weltweit 9% aller Webseiten eingesetzt. In Russland, dem Heimatland von Nginx, liegt der Anteil angeblich gar über 50%. Repräsentative Anwender sind zum Beispiel GitHub, WordPress.com, Wikimedia oder Hulu. Nginx kann auch als Proxy für POP3- und SMTP-Protokolle auftreten.

Installation von Nginx

An einem Debian-Server möchte ich die Installation und Konfiguration von Nginx zuerst zum Betrieb von PHP demonstrieren und anschließend seine Verwendung als Reverse-Proxy zeigen. Installieren kann man Nginx über die gängigen Paketmanager.

Vor Beginn der Aktion sollten wir schauen, ob unter Umständen bereits Apache auf Port 80 läuft:

Unter Debian nutzen wir hierfür den Befehl:

netstat -an | grep :80 | wc -l

Falls als Ergebnis 1 ausgegeben wird, muss zunächst Apache gestoppt oder Nginx auf einen anderen Port gesetzt werden.

sudo apt-get install nginx

Um Nginx zu konfigurieren, öffnet man mit Hilfe von vim folgende Datei:

sudo vim /etc/nginx/sites-available/default

Dort können wir verschiedene Einstellungen vergeben. Als Einstieg setzen wir den Pfad /data/dev/php als Ausgangsordner für all unsere PHP-Dateien. Sie sollten allerdings beachten, dass man bei der Konfiguration eines Webservers viele verschiedene Dinge in Bezug auf die Sicherheit beachten muss. Das gilt insbesondere bei der Nutzung von PHP. Die folgende Config sollte nicht in einer produktiven Umgebung eingesetzt werden. Sie dient in meiner kleinen Einführung hier lediglich zum ersten Testen von Nginx. Es sind noch weitere Einstellungen, basierend auf ihren Systemen zum produktiven Betreiben von Nginx als Webserver nötig. Die folgenden Einstellungen bringen PHP unter Nginx ans Laufen.

## Allgemeine Server-Einstellungen
server {

## Ersetzt Apache
  listen 80;
  server_name localhost;
  access_log /var/log/nginx/localhost.access.log;

## Grundlegende Pfade
  location / {
   ## Absoluter Pfad zum Ordner mit den PHP-Dateien
   root /data/dev/php;
   index index.php;
   try_files $uri =404;
  }

## Einstellungen für Bilder und statischen Content
  location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|xml)$ {
   access_log off;
   expires 30d;
   root /data/dev/php;
  }

## Konfiguration zum Parsen der PHP-Dateien im Ordner (fastcgi)
  location ~ .php$ {
   fastcgi_split_path_info ^(.+\.php)(.*)$;
   fastcgi_pass backend;
   fastcgi_index index.php;
   fastcgi_param SCRIPT_FILENAME /data/dev/php$fastcgi_script_name;
   include fastcgi_params;
   fastcgi_param QUERY_STRING $query_string;
   fastcgi_param REQUEST_METHOD $request_method;
   fastcgi_param CONTENT_TYPE $content_type;
   fastcgi_param CONTENT_LENGTH $content_length;
   fastcgi_intercept_errors on;
   fastcgi_ignore_client_abort off;
   fastcgi_connect_timeout 60;
   fastcgi_send_timeout 180;
   fastcgi_read_timeout 180;
   fastcgi_buffer_size 128k;
   fastcgi_buffers 4 256k;
   fastcgi_busy_buffers_size 256k;
   fastcgi_temp_file_write_size 256k;
  }

## .htaccess und .htpwd können von außen nicht betrachtet werden
  location ~ /\.ht {
   deny all;
  }
}
upstream backend {
  server 127.0.0.1:9000;
}

PHP mit Nginx

Bevor man nun Nginx neustartet, sollte noch PHP und FastCGI für PHP installiert werden, damit Nginx alle Configs, die es benötigt, finden kann. Zuerst installiert man PHP und verschiedene Abhängigkeiten:

sudo echo "deb http://php53.dotdeb.org stable all" >> /etc/apt/sources.list
sudo apt-get update
sudo apt-get install php5-cli php5-common php5-suhosin

Als Nächstes folgt die FastCGI-Unterstützung:

sudo apt-get install php5-fpm php5-cgi

Dann muss Nginx neu gestartet werden:

sudo /etc/init.d/nginx restart

Das ist es eigentlich schon. Skripte im Ordner /data/dev/php sollten nun lokal unter der Adresse localhost erreichbar sein. Testen kann man die Lauffähigkeit seines Servers mit dem kleinen Tool siege:

apt-get install siege

Und mit folgendem Befehl startet man einen kleinen Test auf localhost. Das Ganze ergibt natürlich mehr Sinn für eine Load-Balancing-Umgebung, worum es dann im nächsten Abschnitt geht:

siege -d1 -c50 -t1m http://localhost

Der Parameter d steht für „delay“, c für die Anzahl der „Nutzer“, die versuchen, gleichzeitig den Server aufzurufen und t für die Zeit. M kann dabei durch s für Sekunden oder h für Stunden ersetzt werden. Man kann zum Benchmarking aber auch das bereits vorhandene Tool ab, welches mit Apache mitgeliefert wird, benutzen:

ab -kc 1000 -n 1000 http://localhost/index.php

Mit diesem Befehl sendet man 1000 Verbindungsanforderungen 1000 mal. Vergleicht man mit Hilfe von „ab“ Apache und Nginx lässt sich bei vielen Requests ein eindeutiger Vorteil von Nginx ablesen. Vor allem bei statischen Dateien wie HTML, die nicht erst interpretiert werden müssen, gibt es einen klaren Vorteil. Auf meinem Testserver hat Nginx, bei oben genannter Konfiguration, 960 Requests pro Sekunde geschafft, während Apache nur 60 Requests bearbeiten konnte.

Load-Balancing mit Nginx

Kommen wir nun zu einem spannenden Thema, mit dem die meisten Webentwickler nur selten in Berührung kommen. Es kann aber nie schaden, zu wissen, wie es ungefähr funktioniert. Beim Load-Balancing geht es um den Lastausgleich mit Hilfe eines Reverse-Proxy. Man erstellt praktisch einen Master-Server, der die Verteilung auf mehrere Slave-Server übernimmt. Dabei gibt es verschiedene Varianten des Load-Balancing, wie zum Beispiel Round-Robin, welches dafür sorgt, dass alle Server einfach nacheinander abgearbeitet werden. Beim gewichteten Round-Robin bekommt jeder Server eine Gewichtung nach Leistung und Kapazität. Wenn Server A beispielsweise eine Gewichtung von 100 erhält und Server B von 33, bekommt zuerst Server A zwei Anfragen und dann Server B eine Anfrage. Also eine 2/3 zu 1/3 Aufteilung der Last.

Least Connections überprüft die aktuellen Verbindungen der Server und entscheidet die Verteilung nach dem Server mit den wenigsten Verbindungen. Es gibt das selbe Verfahren auch in einer gewichteten Variante. Im Adaptive Balancing wird die momentane Last der Server überprüft und z.B. bei einer Überlastung eines Servers die Lastverteilung geändert.

Als bestes Verfahren werden oft gewichtete Least Connections betrachtet. Dazu benötigt man aber oft spezielle Hardware. Ich möchte hier, um es einfach zu halten, das Round-Robin-Verfahren nutzen. Dazu muss man sich einen Server als Reverse-Proxy mit Nginx denken, der eine Lastverteilung auf drei Server bearbeitet. Dabei muss auf den Servern nicht zwangsläufig Nginx laufen, andere Webserver sind genauso möglich. Die Konfiguration ist dabei ohne große Probleme einzurichten. Beachten muss man allerdings, dass es beim Load-Balancing immer auch Probleme mit Sessions gibt. Nginx hat dafür aber eine Lösung und verwendet ein IP Hash-Verfahren, um so die Anfragen eines Clients immer auf denselben Server zu leiten.

Konfiguration des Reverse-Proxy

Konfiguration des Reverse-Proxy

Zuerst benötigt man eine allgemeine Datei, die ich proxy.conf nenne und in demselben Ordner speichere, in dem auch die Nginx-Configs liegen. Die proxy.conf sollte folgenden Inhalt haben:

proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;s
proxy_buffers 32 4k

Als Nächstes folgen die spezifischen Einstellungen für die Umgebung:

upstream backend {
  server servera.domain.com weight=5;
  server serverb.domain.com max_fails=3 fail_timeout=30s;
  server serverc.domain.com;
}
server {
  listen 80;
  server_name domain.com;
  access_log /var/www/domain.com/log/nginx.access.log;
  error_log /var/www/domain.com/log/nginx_error.log debug;
  #set your default location
  location / {
   include proxy.conf;
   proxy_pass http://backend;
  }
}

Wie man sehen kann, ist die Config nicht sehr kompliziert. Zuerst setzt man einen upstream, in diesem Fall mit den Namen backend, in welchem man die verschiedenen Backend-Server angibt. In unserem Beispiel stehen diese alle in derselben Domäne. Servera hat zusätzlich eine Gewichtung erhalten von 5. Der zweite Server wird bei 3 fehlerhaften Versuchen innerhalb von 30 Sekunden als inoperativ deklariert. Der dritte Server hat einfach eine Plain-Beschreibung.

Im Block server folgen die üblichen Einstellungen: Auf welchem Port soll der Server hören und unter welcher Domain läuft der Server. Als nächstes werden die Orte der Logs festgelegt. Und zum Schluss geben wir die location an, an der wir die Config-Datei einbinden, die wir oben erstellt haben, sowie geben an, welcher upstream genutzt werden soll. Damit haben wir eine einfach Last-Verteilung eingerichtet. Ich persönlich finde, Nginx macht dies für jeden verständlich und leicht erweiterbar.

Fazit: In diesem Artikel ging es um die Vorteile von Nginx. Ich wollte zeigen, wie leicht man Nginx konfigurieren kann. Durch seine Leichtfüßigkeit wird er immer mehr zu einem starken Apache-Konkurrenten. Dass Nginx auch schon bei vielen Seiten mit riesigen Besucherzahlen seit längerer Zeit genutzt wird, spricht für seine Verlässlichkeit. Die Weiterentwicklung wird durch eine eigens dafür gegründete Firma stark vorangetrieben. In Zukunft wird es direkt vom Entwickler kommerzielle Module zur Erweiterung von Nginx geben. Man darf auf jeden Fall sehr gespannt sein.

(dpe)

Kategorien
Programmierung Sonstige Programmiersprachen

PHP 5.4 – Viele Änderungen und neue Möglichkeiten

Selten gab es so viele Kontroversen um eine neue Version von PHP. Dabei müssten schon auf den ersten Blick die meisten Entwickler mit der Version 5.4 durchaus zufrieden sein. Viele Altlasten wurden über Bord geworfen und potenzielle Sicherheitslücken geschlossen. Trotzdem, man mag das erstaunlich finden, hat dies kaum einen Einfluss auf die Lauffähigkeit bereits vorhandener Anwendungen.

PHP 5.4

Neu in PHP 5.4: Traits

PHP entwickelt sich merkbar in eine professionelle Richtung. Traits sorgen ab PHP 5.4 dafür, dass eine erweiterte Modularisierung und Kapselung bezüglich OOP ermöglicht wird. Traits bilden beispielhaft eine oder mehrere Methoden ab, die in verschiedenen Klassen verwendet werden können. Man sollte aber darauf achten, dass Methoden-Namen auch über mehrere Traits hinaus nicht den selben Namen verwenden sollten. Das Resultat wäre ein FATAL_ERROR (aber auch hier gibt es Möglichkeiten mittels insteadof). Für die Arbeit mit Traits wurde ebenfalls eine neue Magic Constant eingeführt. Mit __TRAIT__ kann der Name des Traits ausgegeben werden. Ein Trait ist wie folgt aufgebaut:

trait fruchtZubereiten {
  function schaelen();
  function schneiden();
}

class Steinfrucht extends Base {
  use fruchtZubereiten;
}

class Beere extends Base {
  use fruchtZubereiten;
}

$aprikose = new Steinfrucht();
$aprikose->schaelen();
$aprikose->schneiden();

$johannisbeere = new Beere();
$johannisbeere->schaelen();

Verschwinden, aber wohl weniger vermisst, werden globale Einstellungen wie der „safe_mode“ oder die „magic_quotes“. Dies sollte für die meisten Anwendungen kein allzu schmerzlicher Verlust sein. In den Changelogs von PHP wird hier richtigerweise darauf verwiesen, dass Anwendungen, die deswegen unter PHP 5.4 nicht mehr lauffähig sind, schon vor dem Hintergrund der Anwendungssicherheit ohnehin eine Überarbeitung benötigen.

Short Syntax für Arrays in PHP 5.4

Viele Entwickler, die in PHP arbeiten, kommen zwangsläufig auch mit JavaScript in Kontakt. PHP hat dieser „Symbiose“ Rechnung getragen und eine JavaScript-ähnliche „short array syntax“ eingeführt. Arrays können nun vereinfacht erstellt werden mit folgender Anweisung:

$a = [1,2,3,4]

oder auch

$b = ['Banane' => 'Gelb', 'Kiwi' => 'Grün']

für mehrdimensionale Arrays.
Bei Methoden bzw. Funktionsaufrufen kann, falls ein Array zurückgegeben wird, direkt auf die Werte in diesem Array zugegriffen werden:

function gibWertInArray(){
  $a = [Eins,Zwei,Drei,Vier];
  return $a;
}
print gibWertInArray()[3]; // Vier

Weiterhin ist es nun immer möglich, die vorherige php.ini-Option „short_open_tag“ zu nutzen, um beispielsweise Variablen innerhalb der HTML-Syntax schnell ausgeben zu können.

Closures unterstützen nun auch $this und Teile einer Klasse können direkt während der Instanzierung aufgerufen werden. Zum Beispiel kann direkt eine Methode wie folgt ausgeführt werden:

(new Frucht)->schaelen();

Zusätzlich wurden die Fehlermeldungen, Warnungen und Hinweise verbessert. So werden ab sofort alle Fehler angezeigt, auch E_STRICT-Meldungen. Das Standard-Charset ist ab 5.4 utf-8 und Zahlen können zusätzlich in der Binärform dargestellt werden:

0b[Binär]

Fortschritt bei Uploads und integrierter Webserver

Besonders erfreut war ich persönlich über die Möglichkeit, den Fortschritt bei Uploads abzubilden. Damit kann zum Beispiel mit Hilfe von Ajax der aktuelle Stand des Uploads in bestimmten Zeitabständen aufgerufen werden, woraus eine bessere Feedback-Option, gerade beim Upload von größeren Daten, ermöglicht wird. Der aktuelle Stand wird dabei in einer superglobalen $_SESSION-Variable gespeichert.

Eine weitere und lang erwartete Möglichkeit ist der direkt in PHP 5.4 verfügbare Webserver, der zu Testzwecken durchaus geeignet ist. Allerdings raten die Entwickler von PHP davon ab, diesen in einer produktiven Umgebung einzusetzen. Zum Starten des Servers auf der Kommandozeile muss man nur in das gewünschte Verzeichnis wechseln. Mit dem Befehl:

php -S localhost:8000

wird der Server lokal auf dem Port 8000 erreichbar sein.
Abschließend will ich noch die Möglichkeit, die Ausführungszeit eines Skriptes in Mikrosekunden angeben lassen zu können, erwähnen.

PHP befindet sich weiterhin auf dem richtigen Weg. Die Sprache wird immer professioneller. Man darf gespannt sein, was den PHP-Entwickler in Zukunft noch erwartet.

(dpe)

Kategorien
Programmierung Sonstige Programmiersprachen

Laravel PHP-Framework: Weg mit dem Spaghetti-Code!

PHP-Frameworks gibt es wie Bäume im Wald und bei dem dichten Laubwerk kann man schnell die Übersicht verlieren. Laravel, das seit April 2011 entwickelt wird, will sein Alleinstellungsmerkmal in sauberem Code und tief integrierter Active-Record-Unterstützung finden.

Kategorien
Webdesign

Rapid Web-Development mit Django, Teil 2

Kommen wir nun also zum zweiten Teil unserer Django-Reihe. Sie erinnern sich. Wir wollen eine Anwendung zur Verwaltung von Ferienimmobilien entwickeln. Im ersten Teil hatten wir uns mit Django-Grundlagen beschäftigt. Heute soll es richtig los gehen. Voraussetzung hierfür ist, dass man ein lauffähiges Debian oder besser Ubuntu, zum Beispiel in einer virtuellen Maschine, aufgesetzt hat und dass man weiß, wie man die Shell bzw. das Terminal in Linux bedient. In der VM soll anschließend Django in seiner eigenen Umgebung laufen und die erste Anwendung starten.

Django

Als erstes Tool installieren wir „virtualenv„. Wie der Name schon verrät, handelt es sich hierbei um eine virtuelle Umgebung (virtual environment). Für unser Projekt wollen wir eine Art „Container“ schaffen, in dem wir Pakete für Python installieren können, ohne in Konflikt mit anderen Python- bzw. Django-Anwendungen zu kommen. Es ist nicht selten, dass man mehrere Django-Anwendungen auf einem Server laufen hat. Eine vielleicht in der Version 1.2, die andere schon in 1.4, welche die aktuelle Version ist. Da Python auf einfachem Wege aber immer nur eine Version eines Moduls oder einer Bibliothek zur Verfügung stellen kann, benötigen wir hier virtualenv.

Installieren und Einrichten einer virtuellen Umgebung für Django

Zum Installieren von „virtualenv“ benötigen wir ein weiteres Paket: „pip„. PIP ist ein Paketverwaltungssystem für Python-Anwendungen. Mit Hilfe von PIP ist möglich, neue Pakete leicht zu installieren, up-to-date zu halten und zu löschen. Dazu braucht man die Shell, auf welcher man folgendes eingibt:

sudo apt-get install python-pip python-dev build-essential
sudo pip install --upgrade pip

Damit sollte PIP nun installiert sein. Um „virtualenv“ zu installieren, verwenden wir folgenden Befehl:

sudo pip install --upgrade virtualenv

Nun stehen bereits PIP und virtualenv zur Verfügung. Der nächste Schritt ist das Einrichten der virtuellen Umgebung. Dazu erstellen wir zuerst eine virtuelle Umgebung und installieren anschließend die nötigen Pakete. Zuerst legen wir einen Ordner an, der alle virtuellen Umgebungen erfasst. Das kann zum Beispiel im Homeordner erfolgen. Anschließend wechseln wir in diesen Ordner und führen folgenden Befehl aus:

virtualenv --distribute fewoverwaltung

Damit haben wir eine virtuelle Umgebung für die Anwendung geschaffen. Der nächste Schritt besteht in der Einrichtung. Hierzu installieren wir Django, nachdem wir in die virtuelle Umgebung gewechselt sind, mit folgenden Befehlen:

source /pfad/zum/verzeichnis/fewoverwaltung/activate

Anschließend kommt noch Yolk hinzu, das einem eine Listenansicht aller installierten Pakete zurückgibt:

pip install yolk

Um die Installation von Django abzuschließen, fehlt natürlich noch Django selbst:

pip install Django

Wenn man mehr als ein paar Pakete installiert, sollte man regelmäßig eine requirements-Datei erstellen, in der alle genutzten Pakete gelistet sind, zur einfachen Wiederverwendung. Das können Sie mit folgenden Befehlen realisieren:

pip freeze > /tmp/requirements.txt

Diese Datei kann man dann z.B. in einem anderen Environment nutzen, um dort alle nötigen Pakete zu installieren:

pip install -r /tmp/requirements.txt

Soviel zur Vorbereitung. Nun steht uns Django in einer virtuellen Umgebung auf einem virtuellen Server zur Verfügung.

Django – das erste Projekt

Um die Entwicklung der Anwendung zu beginnen, wechseln wir zunächst in das richtige virtualenv und legen anschließend ein erstes Django-Projekt an:

django-admin.py startproject fewo

Damit haben wir unter dem Namen fewo unser erstes Django-Projekt angelegt. Im Verzeichnis sollte nun ein Ordner namens fewo existieren. In diesem Ordner befinden sich alle nötigen Dateien für Django. Die Ordnerstruktur wiederum hat sich mit Version 1.4 geändert. Im Hauptordner befindet sich die manage.py-Datei, eine Datei, von der wir noch oft Gebrauch machen werden. Im Unterordner fewo befinden sich die Dateien für die Einstellungen(settings.py), die Datei für den URL-Dispatcher (urls.py) und eine Datei, die hauptsächlich für das Deployment benötigt wird (wsgi.py).

Django Struktur
Django Struktur

Eine Anwendung in Django setzt sich wiederum aus mehreren Apps zusammen, eine weitere App wird auch für dieses Projekt benötigt. Nennen wir sie einfach „buchungen“. Um sie anzulegen, müssen wir uns im Hauptordner befinden und folgende Befehle ausführen:

python manage.py startapp buchungen

Der Befehl legt einen neuen Ordner mit der Bezeichnung buchungen an. In diesem Ordner befinden sich Dateien um die Modelle, Tests und Views anzulegen.

Admin-Interface von Django nutzen

Um das integrierte Admin-Tool von Django zu nutzen, öffnen wir die Datei settings.py und entfernen unter INSTALLED_APPS den Kommentar vor django.contrib.admin. Anschließend müssen in der selben Datei noch die nötigen Daten zur DB-Verbindung eingetragen werden. Der folgende Code führt eine Datenmigration der Admin-Daten zur Datenbank aus und legt einen neuen User an:

python manage.py syncdb

In der Datei urls.py sollten noch bei folgenden Zeilen die Kommentare entfernt werden:

from django.contrib import admin
admin.autodiscover()
url(r'^admin/', include(admin.site.urls)),
Django Admin
Django Admin

Jetzt ist unsere Anwendung bereit für den ersten Start. Das geht dank des integrierten Testservers relativ einfach mit:

python manage.py runserver AKTUELLE_IP:8000

Natürlich sollte AKTUELLE_IP durch die aktuelle IP des Servers ersetzt werden. Nun läuft auf PORT 8000 unseres Servers unsere Anwendung . Über AKTUELLE_IP:8000/admin erreichen wir das Admin-Interface.

Fazit

Ich bin ganz ehrlich und sage, dass das Pensum dieses Beitrags sogar für erfahrene Entwickler durchaus zu viel sein könnte. Und das Einrichten einer virtualenv ist auch nicht Bedingung zum Starten der ersten Anwendung. Ich halte es jedoch für sinnvoll und halte es auch selbst so, gleich von Beginn an sauber und übersichtlich, ohne Weglassungen zu arbeiten. Ich kann aus meiner Erfahrung sagen: Es lohnt sich.

Mittlerweile läuft die erste Anwendung und wir haben Django installiert. Im nächsten Teil legen wir das Model an und ich gehe etwas tiefer auf den URL-Dispatcher, Templates und Co. ein.

Den ersten Teil des Django-Workshops finden Sie hier.

(dpe)

Kategorien
Webdesign

Standortbasierende Dienste mit HTML5-Geolocation und Google Places

Google Places werden die meisten Webentwickler bereits aus SEO-taktischen Gründen kennen. Nicht jedem bewusst sein könnte der Umstand, dass man Google Places zu weit mehr als zur Eintragung seines Unternehmens nutzen kann. Im folgenden kleinen How-To möchte ich zeigen, wie nützlich Google Places in Verbindung mit HTML5-Geolocation ist. Dienste wie Foursquare oder Facebook Places nutzen übrigens einen, unserem Beispiel ähnlichen Ansatz.

Das folgende Szenario wollen wir entwickeln. Unsere Seite soll herausfinden, welche Unternehmen welcher Branchen sich in der Nähe des aktuellen Standorts des Nutzers befinden. Zum Beispiel könnte man alle Bars der Branche Gastronomie anzeigen lassen wollen. Zu diesem Zweck eignet sich die Geolocation-API der HTML5-Spezifikation, die das Auslesen des Standorts des Nutzers zulässt.

Bevor wir tiefer in die Materie einsteigen, sollten Sie sich zunächst einen API-Key von Google besorgen, den sie unter diesem Link unter Verwendung eines Google-Accounts erhalten.

Zu Beginn sollte man versuchen, die aktuellen Standortdaten des Nutzers zu erhalten. Dazu verwendet man das navigator-Objekt, welches verschiedene Informationen über den Nutzer enthält, unter anderem die Positionsdaten. Man erstellt also eine Funktion namens get_location() und ruft darin navigator.geolocation.getCurrentPosition(get_places, errors_action); auf.

function get_location() {
   navigator.geolocation.getCurrentPosition(get_places, catch_errors);
}

In der Funktion getCurrentPosition ist es nötig, mindestens zwei Parameter anzugeben. Diese stehen jeweils für Funktionen, die als Callback für getCurrentPosition dienen. Der erste Parameter wird bei einem erfolgreichen Ermitteln der aktuellen Position aufgerufen, der zweite bei einem entsprechenden Fehler. Da es meiner Ansicht nach eine gute Praxis ist, zuerst mögliche Fehler abzufangen, sollte man dies auch wirklich anfangs tun.

Geolocation Fehler abfangen

Abfangen sollte man dabei primär PERMISSION_DENIED (Nutzer weist Anfrage auf Erlaubnis der Standort-Mitteilung ab), POSITION_UNAVAILABLE (Es konnte aus technischen Gründen kein Standort ermittelt werden) und TIMEOUT (Die Anfrage benötigte zu viel Zeit). In unserem Beispiel geben wir, um das Ganze einfach zu halten, die Fehlermeldung lediglich über ein alert-Fenster aus. Dazu erstellt man eine Funktion mit dem Bezeichner catch_errors():

function catch_errors(error) {
    switch(error.code){
         case error.PERMISSION_DENIED: alert("Der Nutzer moechte keine Daten teilen.");break;
         case error.POSITION_UNAVAILABLE: alert("Die Geodaten sind nicht erreichbar.");break;
         case error.TIMEOUT: alert("Timeout erhalten");break;
         default: alert ("Unbekannter Error");break;
    }
}

Google Places API nutzen

Die eigentliche Logik soll in der Funktion get_places entwickelt werden. Dazu werden die aktuellen Standortdaten aus der Geolocation API verwendet. Folgende Informationen stellt die API zur Verfügung, nachdem der Nutzer dies genehmigt hat:

  • Latitude & Longitude – Geographische Koordinaten
  • Altitude – Höhe des Standortes in Metern
  • Accuracy – Genauigkeit der Koordinaten-Angaben in Metern
  • AltitudeAccuracy – Genauigkeit der Höhenangabe in Metern
  • Heading – Bewegungsrichtung des Nutzers in Grad im Uhrzeigersinn
  • Speed – Geschwindigkeit in m/s

Ziemlich viele Daten, die der Nutzer dem Entwickler offen legt, verlässlich und nützlich sind sie dabei nicht immer. Um auf die Daten Zugriff zu nehmen, erstellt man anfangs wieder einen Funktionsrumpf:

get_places(position){

}

Im Funktionsrumpf befindet sich nun bereits der Parameter position und position enthält die nötigen Informationen. Für die Google Places-API braucht man im Grunde nur Latitude und Longitude, sowie die Genauigkeit. Also erweitern wir unsere Funktion get_places um das Übergeben der Daten an folgende Variablen:

var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var accuracy = position.coords.accuracy;

Als Nächstes muss die Places API-URL vorbereitet werden:

var places_url = "https://maps.googleapis.com/maps/api/place/search/json?location="+ latitude +","+ longitude +"&radius="+ accuracy +"&types=food&sensor=true&key=EuerEigenerKEY";

In die URL sind verschiedene Parameter einzupflegen. Für den Parameter location werden Breiten- und Längengrad, geteilt durch ein Komma angegeben. In Radius muss der Umkreis der Places-Ermittlung angegeben werden. Dieser könnte prinzipiell auch individuell übergeben werden, Google selber empfiehlt aber in der Places-Dokumentation die Verwendung der Genauigkeit der Ortsangabe. Unter Types kann der Typ (also Gastronomie etc.) der zurück gegebenen Informationen eingegrenzt werden. Unter Sensor stellt man mittels true oder false ein, ob die Informationen vom Client manuell oder mittels eines GPS-ähnlichen Moduls angegeben wurden. In den Parameter Key gehört der weiter oben generierte API-Key. Es gibt weitere Parameter, über die die Places Dokumentation Auskunft erteilt.

Das Ganze an Google zu senden, um eine Antwort zu erhalten, ist im Moment wegen fehlender JSONP-Unterstützung nur schwer möglich, Alternativen finden sich hier. Der beste Weg ist die direkte Implementation in die Anwendungslogik, anstatt über JavaScript zu gehen.
Gastronomie in Rostock mit Hilfe von Google Places finden
Gastronomie in Rostock mit Hilfe von Google Places finden

Google Places antwortet in JSON

Die Verwendung von XML ist ebenfalls zulässig. Ich zeige hier am Beispiel die Informationen, die man in JSON zurück erhält.

Zuerst erfolgt die Nennung der Quelle der Angaben. In Deutschland sind das oft die „Gelben Seiten“:

"html_attributions" : [
      "Einträge aus \u003ca href=\"http://www.gelbeseiten.de/\"\u003eGelbeSeiten®Verlagen\u003c/a\u003e"
   ]

Danach bekommt man in results die eigentlichen Ergebnisse:

{
"geometry" : {
"location" : {
"lat" : 54.086360,
"lng" : 12.0959770
}
},
"icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/stadium-71.png",
"id" : "271b187642f633794399fcdac286c2a9b12ab3fc",
"name" : "DKB Arena",
"rating" : 5.0,
"reference" : "CnRoAAAAwWS51nGZjagN0S...",
"types" : [ "stadium", "establishment" ],
"vicinity" : "Kopernikusstraße 17, Rostock"
},

Dabei gibt geometry den exakten Standort des Ergebnisses aus, icon zeigt ein zum Ergebnis passendes Bild, id einen eindeutigen Bezeichner, reference kann für detailliertere Informationen über das Ergebnis genutzt werden, vicinity enthält einen umgebenden bekannten Standort und types die Kategorie des Ergebnisses.

Wie nutze ich Google Places effektiv ?

Sinn ergibt dieser Einsatz von Google Places zum Beispiel, wenn man ein Unternehmen mit mehreren Filialen betreibt und dem Nutzer automatisch alle Filialen und spezielle Angebote in seinem Umkreis anzeigen lassen möchte. Ein anderer Anwendungsfall kann darin bestehen, alle Geschäfte in der Umgebung anzuzeigen, in denen bestimmte Services, etwa alle Coca-Cola Verkaufsstellen, verfügbar sind. Im Endeffekt ist die Geolocation API relativ einfach zu bedienen und kann in Verbindung mit Google Places zu einem durchaus mächtigen und sinnvollen Tool auch für eigene Geschäftsanwendungen sein, egal ob es um Empfehlungen oder logistische Prozesse geht.

(dpe)

Kategorien
Webdesign

Rapid Web-Development mit Django, Teil 1

Frameworks für die Webentwicklung sind zahlreicher als Bäume im Wald. Dabei gibt es große Unterschiede in Qualität und Leistungsumfang. Django, das Framework, um das heute gehen soll, ist vor allem für Entwickler mit engen Zeitplänen gedacht, die sich trotzdem auf die Stabilität und Sicherheit der Anwendungen verlassen müssen, um sich auf die Funktionalität konzentrieren zu können. Da Django ein wirklich großartiges Framework ist, haben wir ihm eine kleine Tutorial-Serie gewidmet, deren ersten Teil Sie in diesem Moment lesen. Heute wollen wir theoretische Grundlagen und das konzeptionelle Hintergrundwissen vermitteln.

Djangos Anfänge

Das Python-Framework Django wurde ursprünglich zur Verwaltung der Nachrichten-Seite Lawrence Journal-World (LJ World) entwickelt und 2005 unter die BSD-Lizenz gestellt. Seitdem hat Django eine stetig gute Entwicklung genommen und ist zu einem professionellen Framework für Webservices verschiedenster Art geworden. Django wird ständig um weitere nützliche und spannende Features erweitert, mittlerweile ist die Version 1.4 aktuell.

Django ist für viele Zwecke einsetzbar

Vor allem eignet sich Django in Szenarien, in denen in großem Umfang mit Datenobjekten gearbeitet wird. Da dies mittlerweile fast überall der Fall ist, bietet es sich an, Django stets mit in den Pool in Frage kommender Frameworks zu nehmen, wenn eine entsprechende Entscheidung zu treffen ist. Schaut man auf die Entwicklungsgeschichte, so fällt auf, dass Django oft von Newsportalen eingesetzt wird. Es darauf zu reduzieren, würde Django aber absolut nicht gerecht, denn mit Hilfe dieses Frameworks ist bei guter Planung eine schnelle und vor allem stabile Entwicklung von Webservices jedweder Art möglich.

Django und seine Vor- und Nachteile

Mittlerweile bieten viele Web-Frameworks (z.B. Symfony) einen Object-Relational-Mapper (ORM) an. Dies bietet dem Entwickler einen erheblichen Komfort und Sicherheit über seine Datenstrukturen. Denn dank des ORM muss nur direkt in Django ein Modell mit den expliziten Angaben über Datentypen und Foreign-Keys entworfen werden. Anschließend erstellt Django automatisch die Datenbank. Dank des ORM kann man nun sehr einfach auf die Daten zugreifen, insbesondere auch auf Daten, die über einen Foreign-Key von einem Objekt auf das andere verbunden sind.

In Django müssen Urls jedoch explizit aktiviert werden. Das hat für manche den Nachteil, dass sie jedes Mal eine Url beschreiben müssen, um einen View aufzurufen. Doch nur so ist auch gewährleistet, dass Funktionalitäten der Anwendung in der eigenen Hand bleiben.

Als Django-Entwickler kann man sich auf die Unterstützung einer überaus kompetenten und großen Community verlassen.

Djangos Vorteile können aber auch schnell zum Nachteil werden. Selbst bei noch so guter Planung kann es im Nachhinein passieren, dass zu einem Modell noch weitere Daten dazu kommen sollen. Das ist bei Django nicht ganz so einfach, denn mit der Migration von Daten gibt es Schwierigkeiten. So erkennt das Framework zwar den neuen Datensatz, erstellt diesen aber nicht in der Datenbank. Hier ist derzeit noch händische Nacharbeit erforderlich, wenn man nicht eines der guten verfügbaren Module für diesen Einsatzzweck verwenden möchte.

Desweiteren wird für viele Umsteiger von PHP das Deployment eventuell noch zu einem Problem. Hier handelt es sich jedoch um eine kleinere Umstiegsschwierigkeit, die mit etwas Übung leicht zu beseitigen ist und die wir in einem der nächsten Teile zudem beschreiben werden.

Django MVT-Entwurfsmuster
Django MVT-Entwurfsmuster

Ein umfangreiches Werkzeug

Django basiert auf einem, dem MVC ähnlichen Entwurfsmuster: MVT – Model-View-Template. Im Modell wird die Datenbankstruktur jeder einzelnen App festgelegt. Jede Anwendung besteht wiederum oft aus mehreren logisch getrennten Apps, die in anderen Projekten wiederverwendet werden können. Im View wird die Logik des Ganzen festgelegt, also Daten vorbereitet zur Ausgabe und im Template wird die spätere Ausgabe festgelegt. Dafür bietet Django eine umfangreiche Template-Sprache, die sich zudem leicht erweitern lässt.

Desweiteren bietet Django in seiner Grundkonfiguration vielfältige Möglichkeiten zur Lokalisierung und zum Caching. Außerdem beherbergt es viele Features, etwa automatisch aus den Modellen generierte Formulare. Wer außerdem die python-dev-tools verwendet, kann über pip, einen Paketmanager für python-libraries, viele Erweiterungen auf seinem System zur Verwendung mit Django einbinden.

Ausblick auf das Beispielprojekt

In den weiteren Teilen der Django-Reihe möchte ich an einem Beispielprojekt praktisch die Vor- und Nachteile aufzeigen, aber vor allem auch, wie schnell und effektiv mit Django eine vollwertige Applikation umgesetzt werden kann.

In der Beispielanwendung wird es um das Verwalten von Ferienimmobilien gehen. Hier stehen Funktionalitäten an wie das Anlegen von Wohneinheiten, Einrichten von Preisen, Verwalten von Kunden und Buchungen bzw. deren Zahlungen, ein Belegungskalender etc. Danach beschäftigen wir uns mit dem Deployment der Anwendung.

Dazu werden wir eine Debian-VM aufsetzen, da ich nicht zu spezifisch für Windows oder Mac OSX werden will und mit Hilfe von VirtualBox und einer Debian-Distribution eine Testumgebung schnell und kostenlos eingerichtet ist. Neben Django werden wir, um das Ganze zu vereinfachen, noch Bootstrap, jQuery und jQuery-UI verwenden.

Nach der Artikel-Reihe sollten Sie die erforderlichen Kenntnisse erworben haben, um sich selbst an die Entwicklung von Webservices mit Django zu wagen. Stay tuned!

(dpe)

Kategorien
Webdesign

Storage.js und jStorage – Inhalte auf Webseiten direkt bearbeiten

Besonders für Internetprojekte, die direkt von Kunden oder technisch eher unerfahrenen Mitarbeitern gepflegt werden, ist es wichtig, eine möglichst einfache Variante zum Editieren des Inhalts bereitzustellen. Das jQuery-Plugin Storage.js bietet diese Möglichkeit mit zusätzlicher HTML5-LocalStorage-Unterstützung. So werden die geänderten Teile direkt auf dem Gerät des Nutzers zwischengespeichert. Anschließend können die Änderungen mit Hilfe von jStorage wieder ausgelesen und in die Website übernommen werden.

Storage.js
Storage.js

Der Begriff WYSIWYG steht mittlerweile bei vielen Webentwicklern auf der Beliebtheitsskala auf einer Ebene mit Frames oder Tabellen-Layouts. Das mag aber vor allem daran liegen, dass sich hinter diesem Begriff oft grausige Editoren verbergen, deren Implementierungen nicht nur mir die Nackenhaare hochstehen lassen. Das Prinzip jedoch ist meiner Ansicht nach durchaus interessant. Warum den ständigen Umweg über den Bearbeiten-Button, über das Formular zum Speichern-Button gehen, wenn das Ganze auch direkt im zu bearbeitenden Inhalt geht?

Storage.js im Einsatz

Dabei lässt man den Nutzern freie Hand über die inhaltliche Gestaltung. Das Markup bleibt unverändert und damit auch sauber. Nur hat sich in der Praxis dabei ein Problem aufgetan: Nutzer editieren einen Teil der Seite, lassen den Rest bei Seite und wollen diese später bearbeiten. Nun kann man für diesen Zweck verschiedene Möglichkeiten wie Zwischenspeichern, Revisionen etc. implementieren. Doch warum nicht dazu eins der tollen neuen HTML5-Features namens localStorage nutzen. LocalStorage ist das Mittel der Wahl, um Teile einer Seite, die der Nutzer verändert, direkt auf dessen Gerät (etwa PC, Smartphone oder Tablet) zwischen zu speichern.

Storage.js nutzt localStorage und das contenteditable-Attribut. Die Implementatio ist einfach. Lediglich jQuery und Storage.js müssen in gewohnter Weise in die Seite eingebunden werden. Anschließend sollte nun das gewünschte Element ausgewählt werden. Dazu verwendet man den jQuery-Selector auf das gewünschte Element und ruft die Funktion storage() auf. Ein Beispiel:

$('#Element').storage({storageKey:'nameOfStorageKey'});

Dabei steht „Element“ erwartungsgemäß für das zu selektierende Element und „nameOfStorageKey“ für den Namen, unter dem der geänderte Text im LocalStorage gespeichert werden soll. Ergebnis ist, dass selbst nach einem Neustart des Browsers der bearbeitete Text zur Verfügung steht und im localStorage gespeichert ist.

Storage.js API-Übersicht
Storage.js API-Übersicht

Daten auslesen und online speichern mit jStorage

Wenn der bearbeitete Text nun dauerhaft in der bearbeiteten Website gespeichert werden soll, müssen die Daten wieder aus dem localStorage gelesen werden. Denn dort sind sie ja nur, wie der Name schon sagt, lokal gespeichert. Ich persönlich verwende dafür gerne jStorage. Das jQuery-Plugin (welches auch als Plugin für Prototype und MooTools zur Verfügung steht) bietet Funktionen, die das Auslesen aus dem localStorage vereinfachen. Nehmen wir also an, wir haben den storageKey „doktorweb“ angegeben. Um den Inhalt einer JS-Variablen zu übergeben brauchen wir nichts weiter zu tun, als folgenden Code zu schreiben:

var editierterText = $.jStorage.get("doktorweb")

So befindet sich der bearbeitete Text in der Variablen. Den Inhalt nachfolgend per AJAX weiter zu verarbeiten, sollte danach kein Problem mehr darstellen.

Sollte die jStorage-Lösung nicht funktionieren, kann einfach folgende Funktion genutzt werden:

var editierterText = localStorage.getItem("doktorweb");

Diese Lösung sollte auf jeden Fall funktionieren, ganz ohne Plugins.

Wir sind übrigens immer auf der Suche nach großartigen jQuery-Plugins. Welche sollten wir unbedingt vorstellen?

(dpe)

Kategorien
Webdesign

Clevere Extension erweitert Chrome-Dev-Tools um Speichermöglichkeit

Für viele Webentwickler sind die Developer-Tools des Google Chrome/Chromium zu einem wichtigen Werkzeug geworden. Nur gibt es bis jetzt noch nicht die Möglichkeit, Änderungen direkt in den veränderten Dateien zu speichern. Für Dateien, die sich auf demselben Gerät befinden wie der Browser, ist dies jetzt dank des russischen Entwicklers Nikita Vasilyev und seiner Anwendung „Chrome Dev Tools Autosave“ möglich. Diese Erweiterung ist für mich mittlerweile geradezu unverzichtbar geworden, weil sie meine Arbeit erheblich erleichtert.

Chrome DevTools autosave

Die Hintergrundfunktionalität der Anwendung basiert auf Node.js und ist, einmal installiert, völlig simpel. Alles was man tun muss, wenn die Anwendung läuft, ist einfach nur im Google Chrome seine CSS- bzw. JavaScript-Dateien zu bearbeiten. Der Server, der im Hintergrund läuft, speichert die veränderten Dateien ab. Das ist vergleichbar mit „CSS-X-Fire“ für den Firefox. Wie man das Ganze auch auf seinen eigenen Geräten installiert, möchte ich im Folgenden anhand meiner OSX-Konfiguration verdeutlichen.

Die Installation: Node.js, npm und Autosave

Zunächst gilt es Node.js zu installieren. Hierzu lädt man entweder die aktuelle Version aus dem git-Repository und installiert Node.js manuell auf seinem Gerät, wobei man nicht vergessen darf, auch den Paketmanager „npm“ zu installieren. Die einfachere und unkompliziertere Variante ist aber, den Installer von der Node.js-Projektseite zu laden. Dieser installiert neben dem Framework auch den nötigen Paketmanager.

Im folgenden Schritt öffnet man zuerst in Chrome „chrome://flags/“ und aktiviert „Experimentelle Erweiterungs-APIs“. Danach muss Chrome neu gestartet werden.

Nachfolgend installiert man die Anwendung Chrome-DevTools-autosave, die nicht über den Chrome Web Store, sondern via Userscripts.ru bezogen werden muss.

Jetzt ist es erforderlich, den Dienst für den Autosave-Server zu installieren. Dazu nutzen wir einfach den „npm“-Paketmanager. In der Shell gibt man dazu folgendes ein:

npm install -g autosave

Falls man einen Fehler erhält, der folgende Zeile ausgibt

It fails with "Error: EACCES, permission denied".

benötigt man Superuser-Rechte, um über den Paketmanager „autosave“ zu installieren. Die Lösung dafür ist folgende Zeile:

sudo npm install -g autosave

Nun sollte die Installation fehlerfrei zu beenden sein. Danach kann der Autosave-Server gestartet werden.

DevTools autosave Server Installation

„Autosave“ verwenden

Um „Autosave“ verwenden zu können, startet man in der Shell den Server einfach mit dem Befehl:

autosave

Die Rückmeldung sollte wie folgt lauten:

DevTools Autosave is running on http://127.0.0.1:9104".

Beenden lässt sich der Dienst mit der Tastenkombination „ctrl+c“. Im Moment werden allerdings nur Files gespeichert, die man über „file://PFAD/ZUR/DATEI.html“ aufruft. Damit zum Beispiel auch Dateien bearbeitet werden können, die über localhost aufgerufen werden, erstellt man eine config-Datei. Der Entwickler selbst schlägt vor diese z.B. routes.js zu nennen und sie mit folgendem Inhalt zu versehen:

exports.routes = [{

from: /^http:\/\/PFAD_AUF_HOST\//,

to: '/PFAD/IM/DATEISYSTEM'

}];

Die Developer-Toolbar

Anschließend wechselt man in der Shell in das entsprechende Verzeichnis der soeben erstellten Datei und und startet die Konfiguration mit:

autosave --config routes.js

Nach einem Neustart des Servers sollte die Weiterleitung funktionieren. Jetzt können Dateien in den Developer-Tools von Chrome bearbeitet werden. Der Server speichert im Hintergrund die Änderungen ab. Schon nach kurzer Zeit wird diese Funktion unerlässlich, wenn man sich einmal daran gewöhnt hat. Und wenn man nicht jede kleine Änderung auch immer gleich speichern will, weil man etwa nur testen will, beendet man einfach den Server-Dienst.

Autosave ist nur eins von vielen innovativen Tools, die ich sehr gerne nutze. Dabei kenne ich natürlich längst nicht alle nützlichen Werkzeuge, die das Web bereit hält. Ich würde mich freuen, von ein paar weiteren Vorschlägen in den Kommentaren zu lesen.

(dpe)

Kategorien
Webdesign

Braucht das Web die HTML5 File-System-API ?

HTML5 wird uns in den kommenden 10 Jahren bis zu seiner offiziellen vollständigen Spezifizierung viele neue Features bringen, auf die Webentwickler gewartet haben. Doch wird man in 10 Jahren auch wirklich noch alle Features brauchen? Ein kleiner Einblick in den Umgang mit Daten als Webentwickler.

Vor nicht allzu langer Zeit gab es noch 56k-Modems. Analog-Fanatiker wünschen sich diese Zeit zurück, wo die Vorfreude auf ein sich ladendes Bild noch regelrecht sekundenlang zelebriert werden konnte. Diese Zeiten sind jedoch, zumindest in Deutschland und hier in weiten Teilen, vorbei. Heute gehen wir mit einer zuverlässigen und ständig verfügbaren Verbindung ins Internet, in Großstädten erreichen wir sogar teilweise 100Mbit. Jegliche Daten aus der „Cloud“ sind für uns somit ständig verfügbar und der Trend geht auch weiter dahin, unsere Daten von einem lokalen Rechner zu trennen und von überall verfügbar zu machen.

Breitbandanschlüsse je 100 Einwohner | Quelle: http://bit.ly/HQJewx
Land 2002 2008 2009 2010
EU 21,7 23,9 25,7
Deutschland 3,2 26,4 29,4 31,3
Dänemark 7,4 37,4 37,2 37,8
Großbritannien 1,6 27,5 28,8 30,6

2022 wird diese Entwicklung noch weiter vorangeschritten sein. Also warum benötigen wir heute und auch in Zukunft die Möglichkeit des Speicherns von Daten auf unseren lokalen Geräten? Es gibt meiner Ansicht nach viele Gründe für eine Möglichkeit, in HTML5 Daten lokal auf dem Client zu speichern.

Webservices in der Zukunft – auch ohne Cloud

Auch in 10 Jahren wird es nach wie vor weiße Flecken auf der Landkarte der zuverlässigen Internetverbindungen geben. Gleichzeitig werden immer mehr Menschen Webservices wie z.B. Google-Docs oder Exchange/Sharepoint nutzen. Natürlich wird es ohne eine Verbindung zu diesen Diensten schwierig sein seine Dateien bzw. Dokumente zu bearbeiten, selbst wenn es – etwa über Manifest-Dateien – möglich wäre. Deshalb ist es wünschenswert, dem User die Möglichkeit und auch die Sicherheit zu geben, seine Dokumente stets betrachten zu können und eine Synchronisation mit Offline-Diensten zu ermöglichen, aber nicht zu erfordern. Das Konzept der Google Chromebooks würde ohne diese Möglichkeit komplett in Frage gestellt.

Aber auch, wenn man kein Chromebook-Nutzer ist, wird man ein Interesse daran haben, sich seine eigene Backup-Möglichkeit zu schaffen. Mittels FS-API (File System API) und einer permanenten Speichervariante können die Daten zum Beispiel automatisch auf dem Client des Nutzers gespeichert werden. Sollte es tatsächlich einmal zu einem Datenverlust kommen, stünde stets noch die korrekte Variante lokal zur Verfügung.

Ein großes Thema kann auch Lastverteilung sein. Jedem ist bewusst, dass die Servertechnologie immer stärker wird, aber genauso wächst auch die Datenlast. So wäre es ein guter Ansatz auf dem eigenen Server nur noch die Dienste anzubieten und die Daten und Dokumente beim Client zu belassen. So sparte man sich einiges an Speicherbelegung. Man hat ja nicht zuletzt an der Einführung der SSDs gesehen, dass bessere und größere Festplatten nicht immer automatisch einen schnellen Preisrutsch mit sich bringen und die Gefahr besteht, dass sich solche Szenarien in ihrem Vorkommen immer mehr häufen.

Datenschutz und Sicherheit für den Nutzer

Außerdem bietet man dem Kunden mit einer lokalen Speichermöglichkeit ein unverzichtbares Gut, nämlich seine eigenen Daten vor fremdem und ungewolltem Zugriff zu schützen. Facebook, Google & Co. geraten immer wieder ins Visier der Datenschützer, da ihnen vorgeworfen wird, vertrauliche Daten ihrer Nutzer für eigene Zwecke zu analysieren. Natürlich besteht diese Möglichkeit auch bei der Verwendung der FS-API, nämlich in dem Moment wo die Services die Daten laden müssen, damit der Nutzer sie bearbeiten kann. Allerdings kann man dem User so die Angst vor einer ständigen Indizierung ersparen.

Browservergleich File System API
Browservergleich File System API

Vielleicht kann oder will auch nicht jeder Nutzer, unter anderem aus Sicherheitsgründen, ständig online und damit verfügbar sein. Es mag sich hier um einen nur geringen Prozentsatz handeln, doch bietet die FS-API eine einfache und standardisierte Möglichkeit, Lösungen für jedes Szenario umzusetzen.

Bisher war es praktisch nicht möglich, direkt verschiedene Dateien oder sogar ganze Ordnerstrukturen auf dem Rechner des Clients zu speichern. Die FS-API ermöglicht aber in einer Art „Sandbox“ genau dies. Innerhalb dieser Sandbox im Dateisystem des Clients können Dateien und Ordner erstellt, geändert und gelöscht werden. Die Speicherung kann temporär, aber auch permanent erfolgen. Das Ganze funktioniert im Moment nur in Google Chrome zu 100%, wird aber sicherlich bald in anderen Browsern verfügbar sein. Die FS-API einzusetzen, mag beim ersten Kontakt etwas schwierig wirken. Dass dem aber auf keinen Fall so ist, erkennt man aber schon nach kurzer Einarbeitungszeit. Einen Einstieg in die Verwendung der File-System-API werden wir in den nächsten Tagen hier im Dr. Web Magazin bieten.

(dpe)