d12g

Blog von Daniel Grewing

Material Design Lite

17. Juli 2015 Webdesign

Unbenannt-1
In meinem Beitrag 5 Tipps, wie man als Webentwickler gutes Webdesign hinbekommt habe ich u.a. die Guidelines von Google für das Material Design von Android vorgestellt. Eine ausführliche Vorstellung dieser Guideline hat auch das Smashing Magazine veröffentlicht.
Google hat jetzt eine Seite für die Anwendung des Material Designs für Webseiten vorgestellt, Material Design Lite. Dort findet sich ein Set aus Komponenten, Templates und verschiedenen Styles, die man sich herunterladen kann. Mit diesen Werkzeugen ist es relativ leicht, eine Webseite im Stil einer Android Anwendung zu erstellen.
Die Sourcen finden sich auch auf GitHub und stehen unter der Apache2 Lizenz.

Microservices (Teil 2)

17. Mai 2015 Softwareentwicklung

In meinem letzten Beitrag habe ich eine Einführung in den Architekturstil der Microservices gegeben. Am Beispiel der Webanwendung “Zetteln” habe ich gezeigt, wie man eine Webanwendung in verschiedene Komponenten aufteilen kann und welche Vorteile sich dadurch ergeben. In diesem Beitrag möchte ich meine Idee der Kommunikation der Komponenten untereinander anhand von Codebeispielen vorstellen.

Die Anmeldemaske von Zetteln wird mit einer einfachen HTML-Seite umgesetzt.

<form class="form-signin" id= "loginform">
  <h2 class= "form-signin-heading">Anmelden </h2>
  <div class= "alert alert-danger" role ="alert" style=" display: none;" id="alert_login_error" >
    Logindaten nicht korrekt
  </ div>
  <label for= "inputEmail" class ="sr-only"> E-Mail</ label>
  <input type= "email" id ="inputEmail" class= "form-control" placeholder="Email address" required autofocus>
  <label for= "inputPassword" class ="sr-only"> Passwort</label >
  <input type= "password" id ="inputPassword" class= "form-control" placeholder="Password" required>
  <button class= "btn btn-lg btn-primary btn-block" type="button" id="loginsubmit" >Login </button>
</form >

Die Überprüfung der Anmeldedaten wird von einer jQuery-Funktion ausgelöst. Da die jQuery-Funktion einen Ajax-Request auf eine andere Webanwendung durchführt, muss über ein Callback mit JSONP gearbeitet werden, damit keine Cross-Seite Exception von JavaScript ausgelöst wird.

$("#loginsubmit").click( function(){
  $.ajax({
    type: 'GET',
    url: 'http://localhost:8090/login',
    data: "email="+$("#inputEmail" ).val()+"&password=" +$("#inputPassword" ).val(),
    dataType: 'jsonp',
    success: function(responseData, textStatus, jqXHR){
      var uuid = responseData.uuid;
      if (uuid != '' ){
        location.href= "http://localhost:8088/zetteln/index/login?uuid=" +uuid;
      }
      else{
        $( "#alert_login_error").show();
      }
    },
    error: function (responseData, textStatus, errorThrown){
      $( "#alert_login_error").show();
    }
  });
});

Über den Callback wird der Benutzer verifiziert. Die Daten werden von der Spring Boot Komponente überprüft und an den jQuery Aufruf zurückgegeben:

@RestController
@RequestMapping("/login" )
public class LoginController {
  @RequestMapping(method=RequestMethod.GET)
  public @ResponseBody String login(@RequestParam (value="email" ) String email, @RequestParam(value="password" ) String password, @RequestParam(value= "callback") String callback) {
    String returnValue = callback + "(" +checkUser(email, password)+")";
    return returnValue ;
  }

  private String checkUser(String email , String password){
    String uuid = "";
    if (email .equals("daniel.grewing@googlemail.com" ) && password.equals("zetteln" )){
      uuid = "89dda95851504c6eb9ae99b9270e438b" ;
    }
  return "{\"uuid\":\"" +uuid +"\"}" ;
  }
}

In der Methode checkUser erfolgt die eigentliche Abfrage der Benutzerdaten. Sie ist hier nur beispielhaft umgesetzt und würde sonst über eine Datenbankabfrage laufen.

Wenn die Login Komponente die Daten verifiziert hat erfolgt die Weiterleitung zur eigentlichen Zetteln-Anwendung mittels location.href. Die Benutzerdaten können dann nochmal verifiziert werden.

Diese Codebeispiele zeigen die Kommunikation der drei Komponenten meiner kleinen Anwendung in einer Microservice-Architektur nur anssatzweise. Über das Thema Sichheit müsste ich mir nochmal einigen Gedanken machen und diese umsetzen.

Amazing Pattern Library

3. Mai 2015 Allgemein, Webdesign

Für Grafik- oder Webprojekte braucht man öfters mal Muster für Hintergründe. Diese Pattern gibt es im Netz wie Sand am Meer. An vernünftige und zugleich kostenlose zu kommen ist aber gar nicht so einfach. Gute Pattern zeichnen sich vor allem dadurch aus, dass sie als Bilddatei klein sind und zusammengesetzt als Muster großflächig gut wirken.
Vor kurzem bin ich auf das Pattern-Projekt von Tim Holmann und Claudio Guglieri gestossen. Auf ihrer Webseite “The Amazing Pattern Library” pflegen sie eine kleine, aber hochwertige Auswahl von Pattern.

Das Ziel ihres Projekts ist:

THIS ON GOING PROJECT COMPILES PATTERNS SHARED BY
THE MOST TALENTED DESIGNERS OUT THERE FOR YOU
TO USE FREELY IN YOUR DESIGNS.

Ein Blick auf die Webseite lohnt sich. Ich finde die Patternsammlung sehr sehenswert und denke, dass einige der Patterns gut für Webprojekte funktionieren.

5 Tipps, wie man als Webentwickler gutes Webdesign hinbekommt

22. März 2015 Softwareentwicklung

Bei der Entwicklung von Internetseiten kommen zwei unterschiedliche Tätigkeiten zum Einsatz. Auf der einen Seite der kreative, künstlerische Prozess bei der Erstellung des Webdesigns und auf der anderen Seite, die ingenieurmäßige Implementierung der Webseiten.
Für alle, die sich eher auf der technischen Seite wohl fühlen, habe ich einige Tipps zusammengefasst, wie man auch die andere Seite meistern kann.

1. Die Grundlagen verstehen
Das Webdesign ist eine Disziplin aus dem Grafikdesign. Obwohl das Medium Internet bewegte Bilder und unterschiedliche Anzeigegeräte unterstützt, gibt es doch Ähnlichkeiten mit dem Printdesign. Die Grundlagen von Grafik und Gestaltung zu verstehen heißt auch, diese Aspekte beim Webdesign besser beurteilen zu können.

Ein guter Einstieg ist das Handbuch von Markus Wäger. Die Kapitel zu Form, Farbe, Bild, Schrift, Textsatz, Lesetypografie und Gestaltungsraster sind alles Themen, die auch beim Webdesign eine grundlegende Rolle spielen. Wenn man sich mit diesen Themen vertraut gemacht hat, versteht man die Designprinzipien besser, wie sie die Infografik zeigt.

 

 

2. Wie machen es die anderen

Eine umfassende Sammlung von unterschiedlichen Webdesigns aus verschiedenen Bereichen kann man in den Büchern von Patrick McNeil nachschlagen. Seine Bücher kategorisieren Webseiten nach Farben, nach Typen (Business, Blogs, Portfolio usw.) oder nach Stylings (Minimalistisch, „sketchy“ oder „wood“). Die ersten beiden Ausgabe sind von 2008 bzw. 2010 und mittlerweile nicht mehr modern, für die erste Ideenfindung dennoch hilfreich. Mittlerweile gibt es schon die Ausgaben 3 (2013) und 4 (2014).
Möchte man auf den aktuellen Stand der Webdesign Trends bleiben, folgt man Blogs wie web creme oder webdesign inspiration.

3. CSS-Frameworks lernen
Ein weiterer Weg zum guten Webdesign kann auch der Einsatz von CSS-Frameworks wie Bootstrap, Foundation, Pure (oder ein ganz anderes) sein. Bereits mit den Standardtemplates kann man schöne Designs umsetzen.
Setzt man das Framework von Twitter, Bootstrap, ein, kann man auf viele freie Templates auf OpenSource Basis zurückgreifen. Diese kann man nach Belieben seinen eigenen Vorstellungen anpassen. Wenn man sich von der Masse abheben will, sucht man auf den diversen Plattform eine kostenpflichtige Vorlage. Versteht man dann noch die Design-Grundlagen, fällt es leichter aus den vielen Bäumen des Vorlagenwaldes sich die Rosen herauszupicken.

4. Pattern
Als Software Entwickler ist man vertraut mit Entwurfsmuster, z.B. mit den Patterns der Gang of Four. Entwurfsmuster sind Lösungsschablonen für wiederkehrende Probleme. In der Software Entwicklung steht man häufig vor Herausforderungen, über die sich andere bereits Gedanken gemacht haben. Anstatt das Rad neu zu erfinden, schaut man sich an, ob es bereits brauchbare Lösungsansätze gibt. Im Webdesign ist es manchmal ganz ähnlich. Registrierungsformulare gibt es häufiger, ebenso Darstellungen von Benutzerprofilen oder Datentabellen. Die Seiten UI-Patterns und die Design Pattern Libray von Yahoo sammeln Entwurfsmuster für Webdesign. Hilfreich können auch Sammlungen zu UI und UX bei Pinterest sein.

5. Design Guidelines
Google hat mit dem neuen Design für Android 5 eine sehr ausführliche Guideline erstellt. Der Guide beginnt mit einer Einführung in Design Prinzipien und erklärt ausführlich, wie man Fonts, Layouts und weitere Vorgaben umsetzen soll, damit eine Android App so ausschaut, wie Google sich das vorstellt. Die Guideline ist natürlich für die Entwicklung von Android Apps ausgelegt, die Regeln kann man prinzipiell aber auch für Webseiten verwenden. Und in Zeiten von responsive Webdesigns werden native Webseiten den Smartphone Apps immer ähnlicher.
Hilfreich finde ich vor allem die Farbpaletten und die Regeln, wie man sich ein Satz aus Primär- und Sekundärfarben zusammenstellt. Lehrreich ist auch der Vergleich von do und dont’s bei der Gestaltung von Layouts.
Analog hat Microsoft eine Guideline für das Kacheldesign von Windows 8 (früher Metro genannt) und Apple bietet ebenfalls Hilfestellungen für seine App-Entwickler an.

Es gibt verschiedene Wege wie man sich als Webentwickler an das Thema Webdesign wagen kann. Bei all den Ansätzen darf man aber nicht vergessen, dass eine gute Webseite von weiteren Kriterien abhängt. Bei allen kreativen Ausschweifungen darf der Benutzer der Webseite und damit die Benutzerschnittstelle nicht aus den Augen verloren werden. Was hilft ein schickes Design, wenn man den Login-Button nicht findet.