• HTML5 Boilerplate

    H5BP & Bootstrap

    Web-Engineering, um was geht es genau? Wie ist die Organisation? Was erwartet uns am ersten Tag?

    Weiterlesen »

  • Responsive Design

    Responsive Design

    Hierbei handelt es sich um Web-Auftritte, die sich den Gegebenheiten, also dem Anzeigegerät und dessen Bildschirmgröße, anpassen ...

    Weiterlesen »

  • REST

    RESTful Webservices

    REST ist ein Architekturstil, der sich alle Standards des World Wide Web zunutze macht.

    Weiterlesen »

  • CAP Theroem

    NoSQL - Apache CouchDB

    CAP-Theorem, Vergleich von RDBMS und NoSQL-Datenbanken und der Einstieg bzw. Einsatz von CouchDB

    Weiterlesen »

  • Web Performance

    Web-Performance

    Am letzten Tage dieser Woche ging es um „Web Performance“ - vorwiegend die Ladezeit einer Website.

    Weiterlesen »

  • hacking lab

    Photo by: incredibleguy

    Hacking-Lab

    Thema „Hacking“ und "Web-Security": Großer Titel, der wie zu erwarten einiges abverlangte.

    Weiterlesen »

  • jenkins ci server

    Continuous Delivery

    Continuous delivery (CD) bezeichnet eine Sammlung von Techniken, Prozessen und Werkzeugen…

    Weiterlesen »

  • sencha touch

    Sencha Touch (ST)

    Einstieg in Sencha Touch 2: Einem Framework, das zur Entwicklung von mobilen Web-Apps geeignet ist.

    Weiterlesen »

  • arsnova

    ARSnova ST1 nach ST2

    Am neunten und vorletzten Tag der Blockveranstaltung „Web-Engineering“ ging es um die Migration der ARSnova-Anwendung von Sencha Touch Version 1.x auf 2.1.1

    Weiterlesen »

  • native packaging

    Native Packaging

    Sencha Touch HTML5 Apps als native App anbieten

    Weiterlesen »

H5BP & Bootstrap

Web-Engineering, um was geht es genau? Wie ist die Organisation? Was erwartet uns am ersten Tag?

Fragen, die zu Beginn der Veranstaltungen wie folgt geklärt wurden:
Die Veranstaltung findet täglich in 4 Blöcken statt:

  1. Inverted Classroom - die Stundenten tauschen sich gegenseitig ihre Erfahrungen des vergangenen Tages aus, berichten über Problem und Lösungen
  2. Die klassische Variante - der Dozent erzählt, die Studierenden hören überwiegend zu
  3. Das im zweiten Block erfahrene Wissen findet hier praktische Anwendung und wird mit Hilfe von Tutoren umgesetzt
  4. Der letzte Block dient zur weiteren Ausarbeitung des Tagesthemas und vorbereitung auf den nächsten Tag bzw das neue Thema. Dieses Mal jedoch zuhause, die Tutoren stehen über das Forum zur Verfügung.

Danach ging es um das geplante Tagesthema HTML, JavaScript und CSS revisited: "HTML5 Boilerplate Web Development".
Boilerplate ist eine Sammlung oder besser ausgedrückt das Grundgerüst für ein schnelles und sauberes Web-Development. Arbeiten, die ein Frontend-Entwickler bei jedem Start eines neuen Projekts durchführen muss, werden hier übernommen und zur Verfügung gestellt.

Eine Alternative zu Boilerplate stellt das Bootstrap Template von Twitter dar. Es bietet jedoch mehr Funktionalität und stellt bereits die Grundfunktionalitäten wie Responsive Webdesign zur Verfügung.

Leseauftrag: Was ist Responsive Webdesign... kurze Erläuterung, um was geht es? Website ist falsch --> wörtliche übersetzung "Netzort" --> nicht so richtig cool

Responsive Design

Einleitung

Am heutigen, zweiten Tag der Veranstaltung stand das Thema „Responsive Webdesign“ im Mittelpunkt. Dabei handelt es sich um Web-Auftritte, die sich den Gegebenheiten, also dem Anzeigegerät und dessen Bildschirmgröße, anpassen können. Ich habe im Rahmen der Veranstaltung zwar nur die Leseprobe von Christop Zillgens Buch „Responsive Webdesign“ gelesen, kann jedoch allein hierdurch den Lesetipp meines Professors Prof. Dr. Klaus Quibeldey-Cirkel weitergeben. Kernfragen in der Leseprobe sind:

Das alles klingt nach einem enormen Aufwand. Eine Website auf allen Endgeräten gut aussehen zu lassen und die User Experience (UX) so hoch wie möglich halten? Wie soll das geleistet werden?

Frameworks zur Umsetzung

Am ersten Tag dieser Veranstaltung haben wir bereits zwei Frameworks kennengelernt, die dem Frontend-Developer extrem unter die Arme greifen und lästige, immer wiederkehrende Aufgaben größtenteils abnehmen. Zum einen sind dies:

Das von Twitter entwickelte Boostrap ist etwas mächtiger als die Herdplatte und soll aus diesem für den Verlauf dieser Veranstaltung verwendet werden. Es gibt jedoch noch zwei Alternativen

MBP ist eine für ausschließlich mobile Endgeräte konzipierte Herdplatte. YAML, nein hier handelt es sich nicht um die Auszeichnungssprache „Yet another Markup Language“, wie vielleicht einige von euch vermuten. YAML ist in diesem Kontext ein CSS Framework und bedeutet „Yet another Multicolumn Layout“.

Vorgehensweise

All diese Frameworks bieten einen echt tollen Umfang an UI-Elementen, sodass man schnell in eine enthusiastische Phase verfallen und sämtliche Flächen zupflastern kann. Hierbei hilft jedoch ein einfaches Modell zur Vorgehensweise, an dem man sich entlanghangeln kann.

Das wichtigste bei einem Web-Auftritt ist was? Richtig, der Inhalt/die Message/der Content. Als Website-Betreiber hat man maximal 6-8 Sekunden, um einen Besucher auf seiner Seite zu halten und ihm die gewünschten Informationen zu liefern. Wichtig ist dabei auch die Eigenschaft, wie im Web inhalte aufgenommen werden. Lesen wird fast gänzlich durch Scannen ersetzt. Wird bei diesem Überfliegen nicht die gewünschte Information in dem genannten Zeitraum gefunden, verlässt der Besucher die Seite und sieht sich weitere Ergebnisse bei Google an. Deshalb lautet die Kernfrage: „Um was geht es hier überhaupt? Ist das sofort ersichtlich?“

Nun beginnt man und entwickelt seine Website vorerst für den mobilen Markt. Dabei soll herausgefunden werden, welche Inhalte auf einem Phablet angezeigt werden sollen.

Erst danach beginnt die Entwicklung für größer Auflösungen, dem „Responsive Design“. Die hier gestellte Frage ist: „Welche Inhalte bekommt der Besucher zusätzlich zu den „mobilen“ Inhalten angezeigt, wenn dieser mit einem Desktop-Pc vorbeikommt?“

Zusammengefasst bedeutet dies:

  1. Content First
  2. Mobile Second
  3. Responsive Design

Tagesaufgabe

Die heutige Aufgabe besteht natürlich darin, den Web-Auftritt des ersten Tages „reaktionsfähig“ zu machen. Wie bereits angesprochen soll dies mit dem Framework Bootstrap von Twitter realisiert werden.

Zweitens ist das Kontaktformular in HTML5 umzusetzen. Hierbei geht es nicht um ein Formular, das man inder Realität einsetzen würde sondern vielmehr darum einen Showcase auszusetzen, was mit HTML5 möglich ist. Dabei soll vorallem auch auf Validierungsmöglichkeiten eingegangen werden.

Desweiteren stehen Videotrainings zu den Themen „URI“ und „HTTP“ zur Verfügung, die auf den morgigen Tag vorbereiten sollen. Dann steht ein für mich persönlich sehr spannendes Thema auf dem Tagesplan: RESTful Websevices :)

Probleme

Größere Probleme gab es am heutigen Tag mit der Umsetzung des responsive designs nicht, allerdings stehen noch einige Designänderungen an, die ich gerne noch umsetzen würde. Beispiel Sub-Navbar die mitscrollt und am oberen rand hängen bleibt.

Weiterführende Quellen

RESTful Webservices

Inverted Classroom

Bei der heutigen Analyse der Responsive Designs stellte sich heraus, dass doch einige Kleinigkeiten bei der Erstellung zu beachten sind. Vorallem bei dem Vorhaben nach dem Content direkt die mobile Ansicht in den Vordergrund zu stellen. Wir erinnern uns an folgende Vorgehensweise, die gestern vorgestellt wurde:

  1. Content
  2. Mobile
  3. Responsive

Hierfür eignet sich hervorragend das Mobile Boilerplate (MBP). Dieses bringt im Gegensatz zu Bootstrap, das vorrangig für diesen Kurs Verwendung findet, bereits einige Meta-Tags und Link-Tags zur Auszeichnung von sogenannten Splashscreens und Homescreen Icons (Apple) bzw. Tile-Icons (Kacheln von WindowsPhone) mit. Außerdem im Paket sind mit dem Boilerplate Stern-Icon versehene Icons für zurvor genannte Screens.

					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
							
					
					
					
					
					
					
					
					
					
					
					
				

Einstieg in REST

Der zweite Block beinhaltete den Einstieg in das Tagesthema „RESTful Webservices“. REST ist ein Architekturstil und macht sich alle Standards des World Wide Web zunutze. Um Dinge im Web zu finden, kommen URIs zum Einsatz. Ein RESTful Webservices setzt mindestens die 4 wichtigsten HTTP-Verben um:

Diese lassen sich ideal auf die CRUD-Methoden (read, create, update und delete) abbilden.

SOAP (Simple Object Access Protocol), ein Konkurrenz-Protokoll das auch weit bereitet ist, nutzt lediglich ein einziges Verb nämlich POST. Dieses ist allerdings nicht idemptotent und bedeutet, dass es bei mehrmaligem Ausführen unter Umständen große Seiteneffekte mit sich ziehen kann. Desweiteren gibt es bei SOAP nur einen einzigen Endpunkt. Zu diesem wird, wie bereits angesprochen, mittels POST eine Anfrage gesendet, die in einer besonderen SOAP-XML-Hülle gebettet ist.

						
							
							2012-01-01
							
						
				

SOAP kann zwar auch über andere Protokolle übertragen werden, eine häufig anzutref­ fende Methode ist jedoch SOAP über HTTP, da ein Weg gefunden werden musste, die Fi­rewalls zu umgehen. Der Standardport 80 des HTTP­Protokolls ist in kaum einem Fall gesperrt. Dabei wird die SOAP­-Hülle nochmals in eine HTTP-­Hülle verpackt und dann ver­sandt. POST ist auch hier die einzige HTTP-­Methode, die zum Einsatz kommt. Alle ande­ren sind nicht definiert.

ARSnova REST-API

Auch das Projekt ARSnova setzt REST als Programmierschnittstelle ein. Welche Ressourcen über welche URIs erreichbar sind und mit welchen Verben zugegriffen werden darf, kann im WIKI nachgelesen werden.

NoSQL - Apache CouchDB

Am vierten Tag ging es um NoSQL-Datenbanken, beziehungsweise um einen Vertreter dieser Art von Datenbanken - CouchDB von Apache.

Die zu entwickelnde CouchApp ist hier zu finden: CouchDB AusgabenApp

CAP-Theorem

Bevor ich jedoch näher auf CouchDB eingehe, möchte ich einen kleinen Exkurs in verteilte Systeme machen und herausarbeiten, wo die Unterschiede zu relationalen Datenbanken liegen. Hierzu bediene ich mich einem Theorem, das erstmals im Jahre 2000 von Dr. Eric Brewer vorgestellt wurde, dem CAP oder auch Brewer-Theorem. Es besagt, dass in verteilten Systemen maximal zwei der drei Eigenschaf­ten

erfüllt sein können. Sie stehen demnach in einem Spannungsverhältnis.

CAP-Theorem

Hierzu folgende Beispiele:

Relationale Datenbanken

Relationale DBMS halten ihre Daten in Tabellen, die einem festen Schema unterliegen. Dieses Schema versucht in den meisten Fällen einen Zustand aus dem realen Leben abzu­bilden. Es definiert die Spalten der Tabellen und die darin möglichen Datentypen, wes­halb im Voraus geklärt werden muss, welche Art von Daten gespeichert werden sollen.Eine Möglichkeit, um dieses Schema zu modellieren und zu entwerfen, ist das Entity­-Re­lationship­-Model.

Der Datenzugriff wird per SQL realisiert ­ eine Abfragesprache, die der relationalen Alge­bra unterliegt. Mit ihr lassen sich einfache aber auch sehr komplexe Abfragen modellie­ren, die unter anderem Tabellen verknüpfen und Rechenoperationen durchführen kön­nen.

Relationale Datenbanksysteme besitzen eine sehr hohe Datenintegrität, die beispielsweise bei Transaktionen durch das ACID-­Prinzip (atomacity, consistency, isolation and durabi­lity) gesichert wird. Es beschreibt, dass eine Transaktion immer atomar sein muss – also entweder vollständig ausgeführt wird oder überhaupt nicht. Außerdem muss die Konsis­tenz, das heißt die Korrektheit der Daten, gewährleistet sein. Die Isolation beschreibt, dass eine Transaktion völlig losgelöst von anderen Bearbeitungen, die auf der Datenbank ge­schehen, ablaufen muss. Zu guter Letzt muss eine Dauerhaftigkeit gegeben sein, die ge­währleistet, dass die Daten auch wirklich beständig sind. Dieser Anspruch bedeutet wie­derum, dass das System sehr viele Prüfungen bei der Arbeit mit den eigentlichen Daten vornehmen muss. Welche Eigenschaften genau unterstützt werden, hängt vom jeweiligen verwendeten Treiber ab und kann im Handbuch nachgelesen werden.

Ein hohes Maß an Datenkonsistenz und guter Erreichbarkeit bedeutet im Gegenzug nach Brewer, dass die Replikation, also die Verteilung des Systems auf mehrere physische Ma­schinen, schwierig ist. Schwierig bedeutet hier nicht unmöglich, jedoch ist der Auf­wand um ein Vielfaches höher als bei anderen Systemen. Leichter ist hier das vertikale Skalieren, bei dem für den einzigen Knoten mehr Rechenleistung oder Speicher zur Ver­fügung gestellt wird. Aus den beschriebenen Eigenschaften folgt, dass Relationale Datenbanksysteme nach Bre­wer zu den CA­-Systemen (consistensy und availibility) gehören

NoSQL Datenbanken

NoSQL Datenbanken im Allgemeinen sind hinsichtlich ihres Datenmodells sehr flexibel, da dieses keinem festen Schema unterliegt. Das fehlende Schema erlaubt es nicht nur, dass normalerweise gegebene Attribute in einem anderen Objekt fehlen, sondern auch das Auftreten komplett neuer Eigenschaften.

Die Wertetypen der Attribute sind durch das fehlende Schema ebenfalls nicht festgelegt. Die bei einer relationalen Datenbank typische Überprüfung des Typs entfällt demnach ebenfalls, was der Flexibilität zugute kommt und eine agile Programmierung ermöglicht. Des Weiteren werden die Daten in sogenannten Schlüssel­Wert­Paaren gespeichert, ana­log eines assoziativen Arrays und der Datenzugriff wird hier statt durch SQL mit Hilfe von Datenbank eigenen APIs realisiert.

Die Philosophie dieser Datenbanken verfolgt zwei weitere Eigenschaften: Zum einen eine hervorragende horizontale Skalierbarkeit. Das bedeutet, dass die Daten auf mehreren Sys­temen gleichzeitig gelagert und die Last somit auf diese verteilt wird.

Statt wie bei der vertikalen Skalierbarkeit die Ressourcen eines einzigen Systems (CPU, RAM und Speicherkapazität) zu erhöhen, wird bei diesem Verfahren die Anzahl der Sys­teme/der Knoten erhöht und diese so verbunden, als wären sie eine Einheit. Horizontale Skalierbarkeit bedeutet bei Brewer die Toleranz gegenüber der Partitionierung im Netz­werk. Zum anderen sollen NoSQL-Datenbanken stets erreichbar sein und besonders schnell antworten. Nach dem CAP­-Theorem muss zwangsläufig die Konsistenz der Daten unter den zuvor genannten Eigenschaften leiden, was sie zu einem AP­-System macht. Das zugrunde liegende Prinzip ist hier nicht ACID sondern BASE (Basically Available, Soft state, Eventually consistent) und beschreibt die zuvor genannten Eigenschaften.

Apache CouchDB

Wie bereits angesprochen ist CouchDB ein Vertreter der NoSQL-Datenbanken - allerdings ein besonderer.

Eine Besonderheit ist, dass CouchDB die Daten nicht nur verwalten sondern auch mittels Design-Dokumente (spezielle Art von CouchDB Dokumente) in sogenannten CouchApps darstellen kann. Das bedeutet folgenes:

  1. Sowohl die Daten liegen in der DB als auch die Anwendung läuft auf der Datenbank.
  2. Damit fällt eine sonst nötige Ebene (z.B. Apache Webserver oder Apache Tomcat Application-Server) weg.

Design-Dokumente, da besondere CouchDB-Dokumente, sind ebenfalls JSON-Objekte. Möchte man diese händisch schreiben, so kann dies je nach Anwendungsfall sehr komplex werden, wie dem folgenden Beispiel entnommen werden kann:

					{
					   "_id": "_design/ausgabenapp",
					   "_rev": "5-a43df9f251748998cf7476d97201baa1",
					   "vendor": {
						   "couchapp": {
							   "metadata": {
								   "name": "couchapp",
								   "fetch_uri": "git://github.com/couchapp/couchapp.git",
								   "description": "official couchapp vendor"
							   }
						   }
					   },
					   "language": "javascript",
					   "views": {
						   "ausgaben": {
							   "map": "function(doc) {  \n  if (doc.type && doc.type == \"ausgabe\" && doc.betrag && doc.grund && doc.datum) {  \n    emit([doc.betrag, doc.waehrung, doc.datum], doc.grund);  \n  }  \n}"
						   },
						   "recent-items": {
							   "map": "function(doc) {\n  if (doc.created_at) {\n      var p = doc.profile || {};\n      emit(doc.created_at, {\n          message:doc.message,\n          gravatar_url : p.gravatar_url,\n          nickname : p.nickname,\n          name : doc.name\n      });\n  }\n};"
						   }
					   },
					   "lists": {
					   },
					   "updates": {
					   },
					   "README": "## Generated CouchApp\n\nThis is meant to be an example CouchApp and to ship with most of the CouchApp goodies.\n\nClone with git:\n\n    git clone git://github.com/couchapp/example.git\n    cd example\n\nInstall with \n    \n    couchapp push . http://localhost:5984/example\n\nor (if you have security turned on)\n\n    couchapp push . http://adminname:adminpass@localhost:5984/example\n  \nYou can also create this app by running\n\n    couchapp generate example && cd example\n    couchapp push . http://localhost:5984/example\n\nDeprecated: *couchapp generate proto && cd proto*\n\n\n## Todo\n\n* factor CouchApp Commonjs to jquery.couch.require.js\n* use $.couch.app in app.js\n\n## License\n\nApache 2.0",
					   "shows": {
					   },
					   "couchapp": {
						   "manifest": [
							   "language",
							   "vendor/",
							   "vendor/couchapp/",
							   "vendor/couchapp/metadata.json",
							   "views/",
							   "views/recent-items/",
							   "views/recent-items/map.js",
							   "views/ausgaben/",
							   "views/ausgaben/map.js",
							   "lists/",
							   "README.md",
							   "shows/",
							   "couchapp.json",
							   "updates/"
						   ],
						   "signatures": {
							   "vendor/couchapp/jquery.couchProfile.js": "448acd8b2187d25a3fe2e10c6019f5ce",
							   "index.html": "20e5929c04ac1d1b97ed2ab6e90c9b3a",
							   "vendor/couchapp/md5.js": "765de38d07dbee73ee1859037cdb79f7",
							   "script/bootstrap.min.js": "81784f7d44983786354097d7bd6c1b0f",
							   "script/app.js": "49b8595c2821f8ce154d883863fd8e86",
							   "vendor/couchapp/jquery.mustache.js": "0bfbc929b6d5500aacfa860c783550d8",
							   "script/jquery-1.9.1.min.js": "397754ba49e9e0cf4e7c190da78dda05",
							   "style/bootstrap.css": "c1f15191a3f351de9bf9220dc4ae683f",
							   "vendor/couchapp/jquery.couchLogin.js": "2523482008955747ddba7a20fed98b54",
							   "script/modernizr-2.6.2-respond-1.1.0.min.js": "70d492eca4141bdd1452977dd893dd63",
							   "vendor/couchapp/jquery.couch.app.js": "d395b6e8c9781a78230050b90dd87936",
							   "script/bootstrap.js": "7acf0236bff24070666d3a86ee580e69",
							   "vendor/couchapp/jquery.couchForm.js": "7add5db2e78544a4eac7e8d2251de651",
							   "style/main.css": "d780afc640cf65c33db3f319db7b0f07",
							   "vendor/couchapp/jquery.couch.app.util.js": "9fc84685dfa7b35237239916ae406583"
						   },
						   "name": "Basic CouchApp",
						   "objects": {
						   },
						   "description": "CouchApp with changes feed and form support."
					   },
					   "validate_doc_update": "function(newDoc, oldDoc, userCtx) {   if (newDoc.author) {     if(newDoc.author != userCtx.name) {       throw({\"forbidden\": \"You may only update documents with author \" +         userCtx.name});     }   } }",
					   "_attachments": {
						   "index.html": {
							   "content_type": "text/html",
							   "revpos": 4,
							   "length": 5070,
							   "stub": true
						   },
						   "vendor/couchapp/md5.js": {
							   "content_type": "application/javascript",
							   "revpos": 1,
							   "length": 8656,
							   "stub": true
						   },
						   "style/main.css": {
							   "content_type": "text/css",
							   "revpos": 1,
							   "length": 321,
							   "stub": true
						   },
						   "script/app.js": {
							   "content_type": "application/javascript",
							   "revpos": 1,
							   "length": 2273,
							   "stub": true
						   },
						   "vendor/couchapp/jquery.mustache.js": {
							   "content_type": "application/javascript",
							   "revpos": 1,
							   "length": 9466,
							   "stub": true
						   },
						   "vendor/couchapp/jquery.couchProfile.js": {
							   "content_type": "application/javascript",
							   "revpos": 1,
							   "length": 3743,
							   "stub": true
						   },
						   "style/bootstrap.css": {
							   "content_type": "text/css",
							   "revpos": 1,
							   "length": 127247,
							   "stub": true
						   },
						   "vendor/couchapp/jquery.couchLogin.js": {
							   "content_type": "application/javascript",
							   "revpos": 1,
							   "length": 3829,
							   "stub": true
						   },
						   "script/modernizr-2.6.2-respond-1.1.0.min.js": {
							   "content_type": "application/javascript",
							   "revpos": 1,
							   "length": 19484,
							   "stub": true
						   },
						   "vendor/couchapp/jquery.couch.app.js": {
							   "content_type": "application/javascript",
							   "revpos": 1,
							   "length": 7258,
							   "stub": true
						   },
						   "script/bootstrap.js": {
							   "content_type": "application/javascript",
							   "revpos": 1,
							   "length": 61508,
							   "stub": true
						   },
						   "vendor/couchapp/jquery.couchForm.js": {
							   "content_type": "application/javascript",
							   "revpos": 1,
							   "length": 1261,
							   "stub": true
						   },
						   "script/bootstrap.min.js": {
							   "content_type": "application/javascript",
							   "revpos": 1,
							   "length": 28418,
							   "stub": true
						   },
						   "vendor/couchapp/jquery.couch.app.util.js": {
							   "content_type": "application/javascript",
							   "revpos": 1,
							   "length": 3051,
							   "stub": true
						   },
						   "script/jquery-1.9.1.min.js": {
							   "content_type": "application/javascript",
							   "revpos": 1,
							   "length": 92629,
							   "stub": true
						   }
					   }
					}
				

Ein Tool, das dem Entwickler bei der Erstellung solcher Design-Dokumente sehr gut hilft, ist das Kommandozeilenwerkzeug CouchApp.

Eigene CouchApp

Eine im Rahmen dieser Veranstaltung entstandenen CouchApp "Ausgaben", die dabei helfen soll die täglichen Ausgaben im Blick zu behalten, ist hier zu finden: CouchDB AusgabenApp

Web-Performance

Am letzten Tage dieser Woche ging es um „Web Performance“ - vorwiegend die Ladezeit einer Website. Diese spielt gerade im Zeitalter von mobilen Endgeräten mit einer sehr schmalbandigen Anbindung an das Internet eine wichtige Rolle. Zwar ist LTE (Long Term Evolution) bei den Mobilfunkanbietern in aller Munde, kann jedoch noch eine Weile auf sich warten lassen und ist meines Wissen nach (bis dato) auch noch nicht 100%ig als Standard fertiggestellt. Aus diesem Grund ist es umso wichtiger seinen Webauftritt zu optimieren und den Benutzer eine hervorragende UX zu bieten.

Werkzeuge dafür sind beispielsweise:

Tagesaufgabe

Die Tagesaufgabe bestand darin, die Webseiten der Fachschaften IEM und MND auf Web-Performance mit Hilfe eines der oben angesprochenen Tools zu analysieren. Die folgenden Ergebnisse zeigen, dass an beiden Webseiten noch einiges zu gedreht werden könnte, um die Geschwindigkeit (damit verbunden die UX) zu verbessern!

Analyse IEM (PageSpeed Insights)

Overall Speed

Score of 31 (out of 100)

High Priority Problems

  1. Bilder in CSS-Sprites kombinieren:

    Statt vieler kleiner Bilder wie Icons sollte man diese in einer großen Grafik kombinieren und mittels CSS jeweils nur den sichtbaren bereich der Grafik ändern. Somit wird einmal eine „große“ oder größere Grafik übertragen; nur wenige parallele Downloads können nach der HTTP-Spezifikation satttfinden.

    CSS-Befehle: background-image und background-position

  2. Browser-Caching nutzen:

    25 statische Ressourcen haben haben weder das Attribut Expires noch Cache-Control max-age im HTTP Header angegeben. Somit werden die Daten immer wieder angefordert. Außerdem sollte ein Last modified oder ETag für alle cachbare Resourcen vergeben werden, damit klar wird, ob es sich lohnt eine Resource zu übertragen oder ob der Client ohnehin schon die neuste Version besitzt.

Low Priority Problems

  1. Bilder optimieren

    „Durch die Optimierung der folgenden Bilder könnten Sie ihre Größe um 8,9 KiB verringern (Reduzierung um 61%).“

    8 Resourcen können optimiert werden. Tools hierfür sind zb SmushIt.com oder PunyPNG.com

  2. CSS reduzieren

    CSS wie es von Menschen geschrieben wird ist für eine Maschine schwer bzw. langsam zu parsen. Zeilenumbrüche bzw unnötiger Whitespace verlangsamen die Verarbeitung erhebtlich. Abhilfe schaffen sogenannte "Minifyer" wie YUI Compressor oder jsmin.

Analyse MNI (PageSpeed Insights)

Overall Speed

Score of 78 (out of 100)

High Priority Problems

  1. Browser-Caching nutzen:

    43 statische Resourcen haben haben weder Expires noch Cache-Control max-age im HTTP Header angegeben. Somit werden die Daten immer wieder angefordert. Außerdem sollte ein „Last modified“ oder „ETag“ für alle cachbare Resourcen vergeben werden, damit klar wird, ob es sich lohnt eine Resource zu übertragen oder ob der Client ohnehin schon die neuste Version besitzt.

  2. JavaScript später parsen:

    JavaScript sollte erst dann geparst werden müssen, wenn der Code genötigt wird. Aktuell werden ca. 1,2 MiB beim laden der Seite geparst, wodurch die Darstellung der Website erheblich verzögert wird. Gerade mobile Webbrowser können JavaScript nicht so schnell parsen wie man dies von Desktop-Browsern gewohnt ist. Das < script async>-Tag beispielsweise verhindert, dass das Parsen des eigentlichen Seiteninhalts durch das parsen von JS geblockt wird.

    „In our own tests conducted in early 2011, we found that on modern mobile devices, each additional kilobyte of JavaScript adds about 1ms of parse time to the overall page load time. So 100kB of JavaScript included in the initial page load would add 100ms of load time for your users. Because JavaScript must be parsed on every visit to a page, this added load time will be part of every page load, whether loaded from the network, via the browser cache, or in HTML5 offline mode.“ From Google Developers

Medium Priority

  1. Bilder optimieren

    "Durch die Optimierung der folgenden Bilder könnten Sie ihre Größe um 53,7 KiB verringern (Reduzierung um 56%)."

    17 Grafiken können optimiert werden. Tools hierfür sind zb SmushIt.com oder PunyPNG.com.

Low Priority

  1. Kleine CSS-Schnipsel inline einfügen

    Kleine CSS-Anweisungen sollten im HTML-Heaser platziert werden.

  2. Skalierte Grafiken bereitstellen

    Man sollte skalierte Grafiken als Resouce zur Verfügung stellen statt sie im HTML oder CSS anzupassen. Extremes Beispiel ist die Verwendung von Thumbnails.

    Die Größe der folgenden Bilder wird in HTML oder CSS angepasst. Durch die Bereitstellung skalierter Bilder könnten 15,8 KiB eingespart werden (Reduzierung um 45%). From Google Developers

    7 Grafiken sind davon betroffen.

  3. Komprimierung aktivieren

    Ressoucen im Sinne der Content Negotiation auch als gzip bereitstellen. Gzip oder auch „GNU zip“ ist eine freie Alternative zu zip und eigenet sich zur verlustfreien Kompression.

    Die Komprimierung der folgenden Ressourcen mit gzip könnte ihre Übertragungsgröße um 12,5 KiB verringern (Reduzierung um 59 %). Durch die Komprimierung von https://statistics.mni.thm.de/piwik.js könnten Sie 12,5 KiB einsparen (Reduzierung um 59 %).
  4. Kleine JavaScript-Schnipsel inline

    Selbes Prinzip wie bei CSS-inline

  5. @import in CSS vermeiden

    Das Importieren von exterenen Stylesheets in externen Stylesheets verzögert das Laden der Seite. Sehr lange Befehlsfolge die erst abgearbeitet werden muss, bevor die Seite weiter geladen werden kann.
    Betrifft: https://www.mni.thm.de/media/system/css/system.css

  6. JS reduzieren

    avaScript wie es von Menschen geschrieben wird ist für eine Maschine schwer bzw langsam zu parsen. Zeilenumbrüche bzw. unnötiger Whitespace verlangsamen das Parsen erhebtlich. Abhilfe schaffen sogenannte "Minifyer" wie YUI Compressor oder jsmin.

  7. CSS reduzieren

    siehe Punkt 7 JS reduzieren

  8. HTML reduzieren

    Mehr Informationen

  9. Header des Typs Vary: Accept-Encoding angeben

    Mehr Informationen zum Vary: Accept-Encoding

WebSockets

WebSockets ist eine Technologie, die es erlaubt eine bidirektionale voll-duplex Verbindung zwischen Client und Server aufzubauden. Dies erlaubt ohne Polling Daten zwischen Client und Server auszutauschen. Lediglich wenn einer der beiden die WebSockets-Technolgie nicht beherrscht, kann beispielsweise auf ein AJAX Long Polling ausgewichen werden.

Eine weitere Aufgabe an diesem Tag bestand darin die Statistik der ARSnova-Anwendung mittels SocketIO in den eigenen Blog zu integrieren.
Hier geht es zum Ergebnis

Hacking-Lab

Heute drehte sich alles ums Thema „Hacking“ und "Web-Security". Großer Titel, der wie zu erwarten einiges abverlangte. Wir erhielten Zugriff auf die von der Compass Security AG zur Verfügung gestellten „wargames“, die die Top Ten Angriffsszenarien im Web (zusammengestellt von der OWASP) thematisieren:

  1. Injection
  2. Cross-Site Scripting (XSS)
  3. Broken Authentication and Session Management
  4. Insecure Direct Object References
  5. Cross-Site Request Forgery (CSRF)
  6. Security Misconfiguration
  7. Insecure Cryptographic Storage
  8. Failure to Restrict URL Access
  9. Insufficient Transport Layer Protection
  10. Unvalidated Redirects and Forwards

Die komplette Schulung wurde über eine Xubuntu-Live-CD abgewickelt, die speziell für die Arbeit mit dem Hacking-Lab zusammengestellt wurde. Sie beinhaltet unter anderem bereits einen vorkonfigurierten VPN-Client, um die Verbindung in die Schweiz herzustellen, zwei verschiedene Firefox-Instanzen, um auch alleine die Challenges durchführen zu können, bei denen man einen Angreifer und ein User benötigt und einige hilfreiche einige Netzwerkdiagnosetools wie Wireshark.

Continuous Delivery (CD)

Continuous delivery (CD) bezeichnet eine Sammlung von Techniken, Prozessen und Werkzeugen in der Agilen Softwareentwicklung um den Software Lieferungsprozess zu verbessern. Techniken wie Testautomatisierung, Kontinuierliche Integration (Continuous Integration) und Kontinuierliche Installation erlauben die Entwicklung qualitativ hochwertiger Software, die durch automatisierte Release Erstellung automatisiert auf Entwicklungs-, Test-, Integrations- und Produktivumgebung eingespielt werden kann. Die Automatisierung des Test- und Lieferprozesses ermöglicht es schnell, zuverlässig und wiederholbar zu liefern und Erweiterungen, Fehlerbehebungen mit minimalem Risiko und ohne großem manuellen Aufwand in die Produktivumgebung oder zum Kunden auszurollen. Quelle Wikipedia (DE)

Source Code Management

Ein wichtiger Bestandteil der kontinuierlichen Integration ist das Source Code Management (SCM). Hiermit sind sogenannte Repositories gemeint, in denen der Code verwaltet werden kann. Beispiele sind:

Regeln

Regeln beim Umgang mit SCM-Systemen:

Tests

Wie in dem obigen Zitat von Wikipedia beschrieben, beinhaltet CD auch das Testen der Software. Hierzu gehören einmal Unit-Test, die sich auf die Klassen im Code beziehen, außerdem User Acceptance Tests (UAT). Diese werden normalerweise vom Menschen durchgeführt, würden so aber sehr schnell sehr teuer. Aus diesem Grund bedient man sich an dieser Stelle besonderen Programmen. Diesen muss man einmal "alles vorklicken" und im späteren Test übernimmt das dann ein Skript. Eine Beispiel für eine solche Testumgebung, die unter der Apache 2.0 Lizenz zur Verfügung gestellt wird ist Selenium. Lasttest können mit Hilfe von Apache JMeter durchgeführt werden.

Build-Server

Ein webbasiertes Systeme, das die Komponenten Tests, Codeverwaltung, Build-Tools usw. verwalten und dem Projekteleiter mitteilen kann:
"Wo stehen wir mit unserem Projekt"
ist der Build-Server Jenkins.

Wartbarkeit

Eine Metrik zur Beurteilung, wie gut Code zu warten ist, ist C.R.A.P - Change Risk Anti-Patterns. Die Analogie zum englischen Wort "crap", das zu deutsch (vulgär) "scheiße" im Sinne von "sehr schlechter Qualität" heißt, ist hier wohl kein Zufall ;)
CRAP wurde für einige Sprachen Implementiert; so zb für Java unter dem Projektnamen Crap4j zu finden.

Eine weitere Metrik zur Messung von Komplexität ist die McCabe-Metrik.

ARSnova

Um später am Projekt ARSnova weiterentwickeln zu können, brauchten wir eine lokale und läuffähige Kopie auf unserem Rechner. Hierzu schauten wir uns zunächste die Codeverwaltung. Der komplette Code von ARSnova wird auf dem SCM-System der THM zur Verfügung gestellt. Installiert ist hier außerdem Gitorious, das eine OpenSource-Variante des bekannten GitHub darstellt → "The Git hosting software that you can install yourself".

Nachdem wir uns auch noch den Jenkins von ARSnova angesehen haben konnte die Installation der benötigten Komponenten auf unseren Rechnern losgehen.

Installation der Komponenten

Folgende Komponenten wurde installiert:

Danach waren wir für die kommenden Tage gerüstet. ;)

Sencha Touch (ST)

Heute stand der Einstieg in Sencha Touch 2, einem Framework zur Entwicklung von mobilen Web-Apps, an. Das Getting Started ermittelt auf solide Art und Weise den Einstieg:

  1. Download des SDKs und Sencha Cmd, das die Konsole um einige spezielle Sencha Befehler erweitert. Beispiel: sencha generate app appName appVerzeichnis
  2. Installation der Standardapp auf dem Web-Server
  3. Rleativ genaue Beschreibung des Codes (Klassenstruktur und Interaktion zwischen Controller und View)
  4. Schreiben einer eigenen Beispiel-App

Das Sencha Touch Inventar ist dabei sehr mächtig. Formularfelder müssen nicht per Hand geschrieben werden, sondern lassen sich sich einfach durch xtype-Objekte benutzern. Möchte ich beispielsweise ein Formularfeld für Email-Adressen haben erreicht man die s über den xtype emailfield. Dieses veranlasst auch die richtige Tastatur bei mobilen Endgeräten einzublenden, wenn der Fokus darauf liegt.

Nach dem Erstellen der Beispiel-App ging es darum, die bereits bestehenden Blogeinträge in einer CouchDB zur Verfügung zu stellen und über deren REST-Schnittestelle auszulesen. Hierbei erwies sich die Same-Origin-Policy ein weiteres Mal als Hürde. Eine Abhilfe schaffte jedoch ein dreizeiliges PHP-Skript, das ich im ST-Projekt platzierte:

					header("content-type: application/json"); 
					$response = file_get_contents('http://www.thomas-breitbach.de:5984/blog_tb/_design/posts/_view/allPosts'); 
					echo $response;
				

Dieses holt per HTTP-GET die Blogposts, die von der View allPosts bereitgestellt werden. Da PHP-Skript und Datenbank beide von thomas-breitbach.de kommen klappte der Zugriff dieses Mal auch ohne, dass Chrome mit dem Zusatz –-disable-web-security gestartet wurde. Das Skript musste nun in der Sencha Touch View Blog als Quell-URI der Liste platziert werden, die in der Blog-View gezeigt wird:

					{ 
						xtype: 'list', 
						itemTpl: '{key}', 
						title: 'Recent Posts', 
									 
						store: { 
							autoLoad: true, 
							fields:['key','value'], 
											 
							proxy: { 
								type: 'rest', 
								url: 'http://thomas-breitbach.de/we/MyApp/getPosts.php', 
												 
								reader: { 
									type: 'json', 
									rootProperty: 'rows' 
								} 
							} 
						} 
					}
				

Als letzten Schritt wurde die App nun noch als Showcase in einer neuen Site über ein i-Frame eingebunden, das wiederum in einem < div > platziert wurde, das als Hintergrund ein Handy hat. Damit hat es den Anschein, als laufe die App in diesem Handy.

Wer sich für den Source-Code interessiert, kann ihn gerne herunterladen!

Des Weiteren steht die App als native Android-App zur Verfügung

Weitere Schritte waren die Einarbeitung in die Migration von ST 1.x auf ST 2.x, die morgen beginnen soll.

ARSnova ST1 nach ST2

Wie gestern bereits erwähnt, ging es heute am neunten und vorletzten Tag der Blockveranstaltung „Web-Engineering“ um die Migration der ARSnova-Anwendung von Sencha Touch Version 1.x auf 2.1.1. Seit v.2 hat sich in dem Frameworks einiges geändert. Für die Migration muss vorallem die Klassenstruktur angepasst werden:

					Geo.views.BillSummary = Ext.extend(Ext.Panel, {
						…
					}				

wir in der neuen Version eine Klasse folgendermaßen definiert

					Ext.define('Geo.view.BillSummary', {
						extend: 'Ext.Panel',
						…
					}				
				

aber auch die Konfiguration wird nun in einem extra für diese Fall vorgsehenen Attribut config vom typ Oject angelegt

					config: {
							scroll: 'vertical',
							html: 'Loading...',
							styleHtmlContent: true
					}				
				

Diese Änderungen sind recht gut auf der oben verlinkten Seite beschrieben. Zusätzlich hilfreich war das von ST angebotene sencha-touch-all-compat.js Skript, das einem in der Console des Browsers anzeigt, welche Methoden deprecated sind und für die neue Version angepasst werden müssen. Vermisst habe ich hier allerdings die genau Abgabe, wo die veralteten Methoden im Code zum eingesetzt werden (Datei und Zeilenangabe).

Was wir leider in keiner Dokumentation gefunden haben, war eine Alternative zur Methode

					Ext. Dispatch({
						controller: 'controllerName',
						method: '',
						mode: [von uns übergebene Werte]
					})				
				

Zwar existiert seit Version 2

					dispatch(action, [addToHistory
				

allerdings können dieser Methode keine weiteren Attribute übergebne werden. Das Acion-Object wird lediglich dazu benutzt, eine bestimmte Methode in einem bestimmten Controller aufzurufen. Bei der gerufenen Methode kommen jedoch keine Parameter an, sodass wir nicht abfragen konnten, welcher Button geklickt wurde.

Hierbei half eine bei Stackoverflow gefundene Alternative:

					{YourAppName}.app.getController('your controller name').(params);
				

Native Packaging

Sencha Touch bietet ein Tool für die Kommandozeile, das es erlaubt die mit Sencha Touch entwickelte HTML5 WebApp in eine native App zu verpacken.

Folgendes Video zeigt das Vorgehen, wie eine HTML5 App in eine native Anwendung verpackt werden kann.

Sencha Touch 2: Native Packaging Demo from Sencha on Vimeo.

Vorteile

Nachteile

Download

Die in dieser Veranstaltung entstandene Beispiel-App gepackt als Android-App kann hier heruntergeladen werden: HTML5-App im Android-Mantel

Über mich

Hallo, meine Name ist Thomas Breitbach und ich studiere den Masterstudiengang Medieninformatik an der Technischen Hochschule Mittelhessen.

Auf diesem Blog stelle ich Ihnen live meine Erfahrungen und Eindrücke zur Verfügung, die ich Rahmen der 10-tägigen Blockveranstaltung "Web-Engineering" mitnehmen konnte. Jeden Tag präsentiere ich in einem neuen Post, welches Thema an diesem Tag behandelt, welche Probleme entstanden und welche Lösungen für diese Probleme gefunden wurden.

Viele Spaß beim Lesen!

HTML5 Kontakt-Form

check(this)
Name:
Vorname:
PLZ:
E-Mail:
E-Mail (Wdh.):
Telefon:
Website (URL):
Zahl 1:
Zahl 2:
Summe: 0
Anzahl (1-5):
Datum:
Datum+Zeit:
Kalenderwoche:
Farbe:
Range:
Suche:
Datenliste:
Nachricht:
Keygen:

Progress:

Impressum

Angaben gemäß § 5 TMG:

Thomas Breitbach
Am Rebenhang 39
65391 Lorch

Kontakt:

E-Mail: Thomas Breitbach

 

Quelle: Erstellt mit dem Impressum-Generator der Kanzlei Siebert

Haftungsausschluss:

Haftung für Inhalte

Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.

Haftung für Links

Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.

Urheberrecht

Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.

Datenschutz

Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben.

Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.

Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.

 

Quellenangaben: eRecht24 Disclaimer