Archiv

Posts Tagged ‘Web’

Buch-Rezension zu “HTML5 and CSS3 (2nd edition)”

26. März 2014 2 Kommentare

HTML5 and CSS3HTML5 und CSS3 sind in aller Munde. Wo man auch hin sieht findet man schöne Beispiele die mit den neusten Browser-Versionen wunderbare Möglichkeiten bieten. Was aber macht man wenn die eigenen Seitenbesucher noch mit IE 8 unterwegs sind? Verzichtet man auf diese Möglichkeiten? Oder bastelt man eine Umgehungslösung?

Brian Hogan lieferte mit seinem Buch “HTML5 and CSS3” ein praxisbezogenes Handbuch um auch in solchen Situationen zu bestehen. Er beschreibt leicht verständlich den aktuellen Stand der HTML5 Spezifikation und wie man diesen in die eigene Webseite integriert. Dabei legt er sehr grossen Wert auf die Abwärtskompatibilität und erklärt eingehend wie man mittels Modernizr ein vergleichbares Verhalten auch für ältere Browser anbieten kann.

Seine Beispiele haben mir sehr geholfen um mich ins Thema HTML5 einzuarbeiten. Da diese nur genau das jeweils besprochene Feature behandeln musste ich nicht lange den Code nach den richtigen Anweisungen durchsuchen. Dies ist vor allem beim erweitern der eigenen Webanwendung sehr hilfreich. Da hat man meistens nicht Zeit um zahlreiche Beispiele nochmals nachzuvollziehen nur um die 2-3 Zeilen Code zu finden, die einem noch fehlen. Wer sich selber von den Beispielen überzeugen will findet diese bei PragProg.com.

Wer allerdings noch nie etwas mit HTML gemacht hat wird mit diesem Buch nicht glücklich. Dies ist definitiv kein Einsteigerbuch sondern richtet sich an Leute die über Erfahrung mit HTML 4 verfügen und möglichst auch schon jQuery verwendet haben. Erfüllt man diese Voraussetzungen führt aus meiner Sicht kein Weg an diesem Buch vorbei.

 

Fazit

Weder ist HTML5 nur unnötiger Schnickschnack noch braucht man zwingend den neusten Browser. Mit ein wenig Rücksichtnahme kann man sehr wohl die neuen Möglichkeiten von HTML5 und CSS3 auch für “richtige” Web-Anwendungen nutzen.

Das Buch von Brian Hogan liefert einem die nötigen Grundlagen um ohne grosses googeln loszulegen. Da seine Beispiele sehr praxisrelevant sind eignen sie sich auch gut um den eigenen Code darauf aufzubauen. So kann man schnell erste Ergebnisse erzielen und schrittweise die eigenen Anwendungen Richtung HTML5 weiterentwickeln.

 

Zum Buch

HTML5 and CSS3 (2nd edition)” von Brian P. Hogan, 2013 The Pragmatic Programmers, ISBN 978-1-9377-8559-8, 300 Seiten, Englisch

Schlagworte: , ,

Bootstrap auf Version 3 aktualisieren

11. September 2013 2 Kommentare

So praktisch Bootstrap für optisch ansprechende Webseiten auch ist, so gibt es doch etwas was man bedenken muss: Wie jede andere Abhängigkeit in einem Software-Projekt muss auch Bootstrap aktualisiert werden. Was harmlos tönt kann schnell recht aufwendig werden, vor allem wenn so viel geändert wurde wie beim Wechsel von 2.x auf 3.0.

 

Zahlreiche Veränderungen

Zwischen Version 2 und 3 gab es bei Bootstrap zahlreiche Veränderungen. Unzählige CSS-Klassen wurden umbenannt, JQuery wird nun direkt verwendet und Responsive Webdesign ist ab sofort zwingend. Wenn diese Veränderungen auch allesamt in die richtige Richtung gehen, so bedeutet dies vor allem Arbeit.

Bevor man sich an die Arbeit macht auf Version 3 zu aktualisieren sollte man sich unbedingt den Migrationsleitfaden anschauen. Darin werden alle Klassen aufgeführt die verändert, entfernt oder neu hinzugekommen sind. Da alles was in dieser Liste enthalten ist angepasst werden muss sollte man sich die nötige Zeit nehmen und die Liste in Ruhe durchlesen.

Beim Grid-System gibt es ebenfalls Änderungen. Neu gibt es 4 Grid-Grössen die über die col-XX- Klasse definiert werden. Wenn man vor hat das Grid zu verändern sollte man dies gleich von Anfang an machen. Ansonsten darf man ein zweites Mal die CSS-Klassen umbenennen.

 

Suchen und Ersetzen

Der Wechsel von den alten auf die neuen Klassen lässt sich am einfachsten mittels Suchen und Ersetzen bewerkstelligen. Wer sich an die Standardvorlage gehalten hat dürfte mit dieser Tabelle schon weit kommen:

2.x 3.0
btn-danger btn btn-danger
btn-success btn btn-success
alert alert-error alert alert-danger
row-fluid row
span2 col-md-2
span3 col-md-3
span4 col-md-4

 

Die Vorlage plündern

Wer noch den Internet Explorer 8 unterstützen muss schaut sich am besten gleich das Starter-Template an und kopiert dort die entsprechenden Header-Zeilen heraus:

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>

JQuery und die JavaScript-Teile von Bootstrap können ebenfalls dort entnommen werden und gehören ans Ende der Seite direkt vor den Body-Tag:

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../../assets/js/jquery.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>

 

Wo es komplizierter wird

Die Probleme beginnen meist bei den eigenen Anpassungen. Durch Veränderungen in der Vererbungshierarchie stimmen plötzlich die Abstände zwischen den Rändern nicht mehr ganz genau überein. Bis dies wieder stimmt kann man in den CSS Dateien hin und her experimentieren. Allerdings kann es so vorkommen dass der eine CSS-Fehler den man in der Liste jagt seine Ursprung an einer ganz anderen Stelle hat.

Statt sich diesen Problemen auszusetzen sollte man besser eine Seite wie Bootply.com benutzen. Dort kann man im Browser eine Bootstrap-Vorlage nach seinen Wünschen verändern und sich die Auswirkungen gleich anzeigen lassen.

Bootply

Wenn es dort geht und bei der eigenen Datei nicht liegt es wohl doch eher am eigenen Code und nicht an Bootstrap…

 

Fazit

Ich bin nach wie vor von Bootstrap überzeugt. Man muss sich allerdings bewusst sein das man sich den Zeitgewinn bei der Erstellung der Seite mit einem zusätzlichen Wartungsaufwand erkauft. Dies gilt nicht nur für Bootstrap, sondern für jede Abhängigkeit. Ob sich dieser Zusatzaufwand lohnt muss jeder für sich selber entscheiden.

Schlagworte: ,

AngularJS testen

3. September 2013 1 Kommentar

Auch Anwendungen die auf JavaScript-MVC-Frameworks wie AngularJS aufbauen können mittels TDD entwickelt werden. Wie einfach dies ist hängt davon ab ob das jeweilige Framework dafür ausgelegt ist. Bei AngularJS wurde nicht nur an TDD gedacht sondern es gibt sogar eine (ausführliche) offizielle Dokumentation die zeigt wie man vorgehen soll.

 

Dependency Injection macht’s möglich

AngularJS setzt sehr stark auf Dependency Injection. Wenn alle Abhängigkeiten wie Services, Libraries und sogar der DOM an die eigenen Methoden übergeben wird braucht man selber keine fixen Abhängigkeiten mit new zu erzeugen. Fürs testen genügt es so die Abhängigkeiten zu simulieren ohne das man auf den konkreten Service oder den ganzen DOM angewiesen ist.

Bei AngularJS empfiehlt nicht nur die Dokumentation diese Vorgehensweise, sondern es ist auch der einfachste Weg um mit dem Framework zu arbeiten. Dadurch sind die meisten Anwendungen in einer guten Ausgangsposition um automatisch getestet zu werden.

 

Angular-seed als Startpunkt

Wie in meinem früheren Beitrag gezeigt kann man sehr einfach die passenden Bibliotheken einbinden um die eigene Anwendung mit AngularJS zu ergänzen. Will man AngularJS voll ausnützen gibt es aber eine praktische Abkürzung: angular-seed

Angular-seed ist ein Anwendungsskelett für AngularJS das bereits alles nötige enthält um mit TDD loslegen zu können. So sind neben einer minimalen Projektstruktur sowohl Jasmine wie auch der Testrunner Karma bereits konfiguriert und einsatzbereit. Nach einer Installation von Node.js genügt es das Script scripts\test.bat für die Unit- und script/e2e-test.bat für die Integrationstests zu starten.

 

Szenarien mit Jasmine beschreiben

Jasmin ist ein BDD Framework (Behaviour-driven Development) für JavaScript und lässt einem Szenarien (Testfälle) sehr ähnlich wie RSpec oder MSpec beschreiben. Ein einfacher Test ob die Addition wie erwartet funktioniert kann so beschreiben werden:

'use strict';

describe('jasmine demo', function() {

  describe('calculator', function() {
    it('should return the sum of two values', function() {
      expect(1 + 2).toEqual(3);
    });
  });
});

Die Testdurchführung geschieht entweder im Webbrowser oder alternativ mit den Testrunner Karma. Dieser überwacht die JavaScript-Dateien im Projekt und führt die Tests aus sobald sich etwas ändert. Das Resultat wird einem in der Konsole angezeigt und sieht im Erfolgsfall so aus:

karma_green

Im Fehlerfall (hier mit einem – statt einem +) zeigt einem Karma was nicht stimmt:

karma_red

 

Asynchrone Operationen testen

Das Testen von asynchronen Methoden in Jasmine hat seine eigenen Herausforderungen. Jonathan Paul hat sehr gut beschrieben wo diese liegen und wie man seine Testfälle schreiben muss um die gewünschten Resultate zu erhalten.

Allerdings ist dies recht mühsam diesen Code zu lesen. Die Erweiterung Jasmine.Async von Derick Bailey liefert einem eine kleine Verbesserung. So braucht man nicht immer wieder die gleichen Codeblöcke zu schreiben und kann sich stattdessen auf ein async.beforeEach oder async.it beschränken.

 

End-to-End Tests

Oft möchte man aber wissen ob die ganze Anwendung funktioniert und nicht nur die einzelnen Teile. Dazu sind die ebenfalls mit angular-seed mitgelieferten End-to-End Tests gedacht.

Als Anwendung nutze ich für dieses Beispiel wiederum den JSON-Service aus “Erste Schritte mit AngularJS“. Diese Spezifikation beschreibt was für einen MD5-Hash ich für den Text “Hello” erwarte:

'use strict';

describe('md5 Service', function() {

  beforeEach(function() {
    browser().navigateTo('../../app/md5service.html');
  });


  it('should have a button to click', function() {
    expect(element('button').text()).toEqual('Click');
  });

  it('should ask service for md5-hash of "Hello"', function() {
    input('input').enter("Hello");
    element('button').click();
    expect(element('.result').text())
      .toEqual('8b1a9953c4611296a827abf8c47804d7');
  });
});

Diese Tests lassen sich entweder durch Karma oder direkt über den Webbrowser starten:

angular_end2end_runner

 

Mehr zum Thema

Die hier gezeigten Beispiele vermitteln einen ersten Eindruck der Möglichkeiten. Wer mehr dazu wissen will sollte sich diese Webseiten und Videos anschauen:

 

Fazit

AngularJS wurde so geschrieben das man damit testgetriebene Anwendungen entwickeln kann. Durch Erweiterungen wie angular-seed und Jasmine.Async hat man die nötigen Werkzeuge zur Hand um sehr einfach mit dem Testen beginnen zu können. Alles was es nun noch braucht ist die Bereitschaft dies auch wirklich zu machen. Und das notwendige Training um auch schnell vorwärts zu kommen.

Schlagworte: ,

Bootstrap personalisieren

27. August 2013 Kommentare aus

Mittels Bootstrap bekommt man ohne grossen Aufwand ein in sich stimmiges Design für die eigene Webanwendung. Die notwendigen Schritte dafür habe ich hier schon beschrieben.
Es gibt allerdings ein Problem: Alle Seiten die Bootstrap benutzen sehen am Ende genau gleich aus:

JGraber_bootstrap

Wer lieber etwas Individuelles hat muss aber nicht auf Bootstrap verzichten. Es gibt mittlerweile genügend Erweiterungen und Vorlagen die auf Bootstrap aufsetzen und die nötige Abwechslung bieten.

 

Andere Farben

Wenn einem eine andere Farbmischung genügt ist Bootswatch eine gute Alternative. Die 11 Templates unterscheiden sich nur in der Farbwahl vom originalen Bootstrap. Dadurch muss man einzig die Datei bootstrap.css herunterladen und ins eigene Projektverzeichnis kopieren.

jgraber_bootstrap_color

jgraber_bootstrap_blue

 

Marktplatz für grössere Anpassungen

Soll mehr angepasst werden ist WrapBootstrap eine gute Anlaufstelle. Dieser Marktplatz ermöglicht einem ganze Templates zu kaufen. Neben der angepassten CSS-Datei gibt es hier oft auch gleich noch eine 404-Fehlerseite und zusätzliche Plug-Ins. Die Preise liegen zwischen 4$ und 44$. Dies dürfte für die meisten immer noch günstiger sein als wenn man selber während Stunden versucht eine in sich stimmige Vorlage zu erstellen. Wer sich diesen Aufwand dennoch machen will kann hier seine Templates auch verkaufen.

Den Templates sind keine Grenzen gesetzt wie hier Unify zeigt:
bootstrap_unify

 

Fazit

Mit kleinen Anpassungen und zu einem akzeptablen Preis kann man seine Bootstrap-basierte Anwendung mit wenig Aufwand personalisieren. Obwohl solche Personalisierungsseiten wie Pilze aus dem Boden schiessen sind Bootswatch und WrapBootstrap für mich immer noch die besten.

 

Schlagworte: ,

Erste Schritte mit AngularJS

11. Juli 2013 3 Kommentare

MVC-Frameworks für JavaScript gibt es mittlerweile in Hülle und Fülle. Diese unterscheiden sich nicht nur im Funktionsumfang, sondern auch in der Handhabung und der Dokumentation. Dies macht es nicht gerade einfach ein zum eigenen Projekt passendes Framework auszuwählen.

Da ich nicht der erste bin der vor dieser Entscheidung steht konnte ich glücklicherweise auf die Arbeit von TodoMVC zurückgreifen. Zahlreiche Freiwillige haben sich die Mühe gemacht die immer gleiche Todo-Anwendung in den einzelnen Frameworks zu implementieren. So sind mittlerweile über 50 verschiedene Frameworks vertreten und lassen sich recht einfach vergleichen.

Nachdem ich mehrmals gehört hatte wie toll AngularJS sei und mir auch das Beispiel dazu gefallen hat habe ich mir dieses Framework genauer angeschaut. AngularJS wird seit 2009 von Google entwickelt und bietet neben einer Trennung von DOM und Applikationslogik auch einen sehr einfachen Einstieg.

 

Data Binding inklusive

Das Konzept von Data Binding in Silverlight und WPF hat mir immer schon gefallen. Bei AngualJS ist dies von Grund auf integriert und hilft einem so wie bei den XAML-Varianten mit sehr wenig Code das GUI an die Daten in einem Modell zu binden. Die dazu passende Mini-Anwendung kommt mit 13 Zeilen Code aus:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
  <div ng-app>
    <label>Name:</label>
    <input type="text" ng-model="name">
    <hr>
    <h1>Hello {{name}}!</h1>
  </div>
</body>
</html>

Führt man diesen Code im Webbrowser aus funktioniert das Data Binding wie erwartet:

 

JSON verarbeiten

Will man Daten anzeigen die als JSON formatiert sind ist dies ebenfalls ohne grossen Aufwand möglich – ausser die Daten kommen von einem anderen Server. In dem Fall stösst man schnell auf die Abkürzung CORS (Cross-origin resource sharing) und muss daran denken die Headerzeilen zu modifizieren. Ist dies geschafft muss man nur noch den Endpunkt angeben und die Daten korrekt auslesen.

Zum Testen nutzte ich den Service http://md5.jsontest.com der einen Parameter text ausliest und den dazugehörigen MD5 Wert mit dieser JSON-Antwort zurückliefert:

{
   "md5": "8b1a9953c4611296a827abf8c47804d7",
   "original": "Hello"
}

Um den Service aufzurufen genügt dieser Code:

<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
  <div ng-controller="ServerCtrl">
    <form ng-submit="onSend()">
      <input type="text" ng-model="input"/>
      <button type="submit">Click</button>
    </form>
    <hr>
    MD5 value: <div class="result">{{md5Value}}</div>
  </div>
</body>
<script>
var myApp = angular.module('myApp', []);

// Header modifizieren
myApp.config(['$httpProvider', function($httpProvider) {
  $httpProvider.defaults.useXDomain = true;
  delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

// Service aufrufen
myApp.controller('ServerCtrl', function ServerCtrl($scope, $http){
  $scope.onSend = function() {
  var url = "http://md5.jsontest.com/?text=" + $scope.input
  $http.get(url)
    .then(function(result)
    {
      $scope.md5Value = result.data.md5
    })
  }
});
</script>
</html>

Serviceaufruf mittels AngularJS

Damit all dies funktioniert braucht es die Parameter $scope und $http beim Methodenaufruf. Dies signalisiert AngularJS das hier mittels Dependency Injection die passenden Objekte eingefügt werden sollen. Folgt man der Namenskonvention ist der Code ganz einfach und wie durch Magie werden alle Abhängigkeiten korrekt ersetzt. Aber wehe man vertippt sich…

 

Hilfreiche Ressourcen

Neben der offiziellen Dokumentation gibt es zahlreiche weitere Blogs und Videos die einem beim verstehen dieses Frameworks helfen. Wie immer freue ich mich auch bei diesem Thema um weitere Links zu guten Unterlagen.

K. Scott Allen hat in den letzten Monaten zu fast allen Aspekten von AngularJS ausführlich gebloggt. Neben Themen für Einsteiger hat er dabei auch etliche fortgeschrittener Problemstellungen betrachtet.

Für einen strukturierten Einstieg hat mir die Serie “Show me AngularJS” bei Tekpub sehr gefallen. Rob Conery zeigt einem dabei nicht nur die schönen Seiten von AngularJS sondern auch was alles für Stolperfallen auf einen warten.

Wer nur wenig Zeit hat findet bei Egghead.io derzeit 45 Videos die jeweils nur wenige Minuten lang sind und sich genau einem einzelnen Aspekt widmen. Diese Fokussierung ist besonders hilfreich wenn man die Antwort auf eine spezifische Frage sucht.

Auch an der NDC Oslo gab es zahlreiche Präsentationen rund um AngularJS. Dabei wurde nicht nur gezeigt wie AngularJS funktioniert sondern auch wie es sich im Vergleich mit anderen Frameworks schlägt – und dies im wahrsten Sinne des Wortes:

 

Nächste Schritte

Die ersten Versuche zeigten mir dass ich viele sonst komplexe GUI-Zaubereien mit AngularJS sehr einfach umsetzen kann. Ich habe aber noch zu grosse Lücken im Bereich JavaScript um mit diesem Framework effizient arbeiten zu können. Neben dem vertiefen meiner JavaScript-Kenntnisse will ich überprüfen wie es um die Testbarkeit von AngularJS wirklich steht. Die Ergebnisse werde ich ebenfalls in diesem Blog veröffentlichen.

Schlagworte: ,
Follow

Erhalte jeden neuen Beitrag in deinen Posteingang.

Schließe dich 254 Followern an