Definition Material Design

“Material Design synthesizes the classic principles of good design with the innovation and possibility of technology and science”. So wird Material Design von Google definiert. Das Ziel von diesen Empfehlungen ist eine einzigartige User Experience auf den unterschiedlichsten Geräten zu schaffen.

Material Design basiert auf der Studie von realen Gegenständen wie Papier und Tinte. Außerdem bedient es sich an visuellen Hinweisen aus der realen Welt, zB. Lichtsetzung und Schatten. Daneben wird auf Grundelemente des Printdesigns zurückgegriffen: Typografie, Grids, Skalen und Farben. Diese Grundelemente sollen vor allem helfen Hierarchien darzustellen und als visueller Wegweiser dienen. Auch Bewegung gehört zu den Grundprinzipien von Material Design. Alle diese Elemente haben ein gemeinsames Ziel: das Auge des Users leiten und angemessenes Feedback zu geben.

Aber was heißt “material” hier wirklich? Es bedeutet, dass alle Elemente in diesem Design Kontext in einem 3D Raum liegen (x, y und z Achsen). Je nach Position der Elemente auf der Z-Achse ändert sich die Licht- und Schattensetzung.

Layout

So kann man sich dann auch das Layout vorstellen. Es basiert auf der realen Welt. Jedes Layout besteht aus mehreren Blättern Papier. Legt man mehrere Blätter übereinander so bekommt man unterschiedliche Stufen und unterschiedliche Lichtverhältnisse. Legt man zwei Blätter nebeneinander bekommt man eine Naht (leichter grauer Strich).

Farben

In Material Design spielen die Farben eine wichtige Rolle. Grundsätzlich sollten lebendige Farben verwendet werden. Es wird empfohlen eine Hauptfarbe mit Abstufungen auszusuchen und eine passende, auffällige Akzentfarbe dazu. Die Navigation sollte die Hauptfarbe haben, die Statusleiste einen dunkleren Ton der Hauptfarbe. Die Akzentfarbe markiert alle Hauptaktionselmente, wie zB. Slider, wichtige Buttons und den Floating Action Button. Will man mit Graustufen arbeiten, sollte man Alpha Werte von Schwarz benutzen um einheitliche Grautöne zu bekommen.

Typografie

Grundsätzlich wird empfohlen die Standard Schriften von Android zu verwenden: Roboto oder Noto. Roboto ist für alle Sprachen mit lateinischen, griechischen und kyrillische Zeichen gedacht und Noto für alle anderen. In den Guidelines gibt es unterschiedliche Empfehlungen für die beiden Schriften. Generell sind die Schriftgrößen in sp (scalable pixels) angegeben. Dieses Format sollte auch in nativen Apps verwendet werden, damit man über die Einstellungen für die Barrierefreiheit die Schriftgröße nachträglich verändern kann. Die Schriftgröße in Material Design sollte nach der Typografie Skala 12-14-16-30-34 gesetzt werden.

Icons

Das Produkticon (bzw. Appicon) sollte die Idee der Applikation transportieren, einfach zu erfassen sein und eine Licht-und Schattensetzung aus der realen Welt haben. Das Gmail Icon beispielsweise, wurde zuerst aus Papier erstellt um die Licht-und Schattensetzung so realistisch wie möglich zu gestalten, und danach erst digitalisiert.

Die System bzw. UI Icons sollten möglichst geometrisch und konsistent gehalten werden. Die Icons haben standardmäßig eine Größe von 24x24px wobei nur 20px davon “befüllt” sein sollten.

Floating Action Button

Dieses Konzept hat einen eigenen Unterpunkt verdient. Google hat sich überlegt die Haupt Aktionen in einer Applikation auszulagern auf einen “Hauptaktionsbutton”. Dieser Button liegt immer über allen anderen Elementen. Er kann auf einer Naht liegen, zB. zwischen Header und Content oder wie bei den meisten Applikationen rechts unten in der Ecke. Diese Position ist die Beste, weil sie leicht mit dem Daumen erreicht werden kann. Unter dem Floating Action Button dürfen sich nur die wichtigsten Aktionen befinden. Man darf ihn nicht mit einem normalen Menü verwechseln.

Bewegung

Bewegung ist ein Grundpfeiler von Material Design. Mithilfe dieser soll der User geleitet werden und passendes Feedback zu den Aktionen Bekommen. Um alle Bewegungskonzepte zu verstehen, empfiehlt es sich hier die passenden Videos dazu anzusehen. Es wird zwischen 3 Arten unterschieden:

Responsive Interaction
Der User sollte immer ausreichend Feedback bei Interaktion bekommen.

Meaningful Transition
Hierbei handelt sich um ein choreographiertes Motion-Design. Zum Beispiel sollten icht alle Elemente gleichzeitig erscheinen. Die Reihenfolge sollte von der Hierarchie ausgehen.

Delightful Details
Die Kleinigkeiten machen den Unterschied. Zum Beispiel wenn sich das Menü Icon in einen Zurück Pfeil verwandelt.

Fazit

Bisher gibt es noch nicht sehr viele native Android Apps die Material Design wirklich komplett umgesetzt haben. Das Hauptproblem dabei ist der Support zu früheren Android Versionen. Es gibt zwar eine Fallbacklibrary, jedoch ist diese nicht ganz einfach zu implementieren. Dennoch glaube ich, dass in nächster Zeit viele Applikationen auf Material Design umstellen werden. Es ist ein wirklich gut durchdachtes und vor allem sehr schönes Design Konzept. Hat man einmal App mit diesem Konzept designed, möchte man gar nicht mehr damit aufhören

In diesem Sinne: viel Spaß bei einer täglichen Material Design Inspiration auf Materialup.

Quelle: http://www.google.com/design/spec/material-design

The post Das ist Material Design appeared first on Mobile USTP MKL.

Jawbone UP

Das Jawbone UP gibt es zurzeit in zwei Varianten: einmal mit drahtloser Synchronisation (Bluetooth) um 129 € und einmal mit USB Synchronisation um 79 € (über ein mitgeliefertes Kabel). Ich habe mir für das mit Bluetooth Synchronisation entschieden, da es wesentlich komfortabler ist. Der Akku hält bei ständigem Tragen bis zu 7 Tage lang. Zum aufladen muss man einfach die Aufsteckkappe runterziehen und das Armband an den mitgelieferten USB Stecker anschließen.

Tragekomfort

Das Band selbst ist sehr weich, außer unten in der Mitte (dort steckt wohl die Logik). Es lässt sich leicht auseinander biegen und um die Hand geben. Es liegt dann dort angenehm am Handgelenk auf. Besonders während dem Sport ist diese Anpassungsfähigkeit praktisch, da es nicht “herumgeschüttelt” wird. Es ist also sehr angenehm zu tragen. Schwierigkeiten könnte es nur geben bei Leuten mit zu starken oder zu dünnen Armen. Entweder man bekommt es dann nicht um den Arm, es drückt zu stark oder bei zu dünnen Händen könnte es sein das es unangenehm verrutscht.

Optik

Für ein Fitnessarmband ist das Jawbone UP wirklich sehr schön. Die Aufsteckkappen die den Anschluss verstecken sowie der Button sind in mattem Silber gehalten und wirken für ein Fitnessarmband sehr edel. Das Band selbst gibt es in den Farben: Schwarz, Orange, Rot, Korall, Gelb, Grau, Blau und Grün. Ich habe das schwarze Band getestet & ich muss sagen, dass war im Nachhinein betrachtet eine sehr gute Entscheidung. Das schwarze ist unauffällig und schlicht & kann so einfacher den ganzen Tag lang getragen werden.

Funktionsumfang

Das eigentliche Band kann: Schritte (Bewegung) aufzeichnen, Zeit aufzeichnen, Schlaf aufzeichnen, Daten von/an verschiedenen Apps empfangen & senden, sowie vibrieren. Was mit den aufgezeichneten Informationen gemacht werden, entscheiden dann die jeweiligen Apps.

App

Das Jawbone UP hat natürlich eine eigene native App für Android und iOS. Ich habe die App unter Android getestet. Die App ist sehr übersichtlich & man weiß eigentlich sofort wie man das Band verbindet & man los starten kann. Die App zeit hauptsächlich die aufgezeichneten Daten sehr schön an und fügt einige Informationen hinzu.

Zum Beispiel bekommt man neben der Schrittanzahl & der Zeit einer Aktivität auch die verbrannten Kalorien angezeigt. Außerdem wird aus der Schrittzahl die zurückgelegte Strecke berechnet. Man kann sich auch über eine Timeline ansehen wann man wie viele Schritte gemacht hat, um so eventuell einen Trend zu erkennen. Außerdem kann man in der App seine persönliche Ziele eingeben, zB. Ich möchte jeden Tag mindestens 10.000 Schritte zurücklegen & 8 Stunden schlafen (man sollte sich nicht zu kleine Ziele setzten ;)). Auf der Übersicht hat man dann immer schnell im Blick wie viel man jeden Tag geschafft hat und woran man noch arbeiten muss. Man kann beim Band mit einem Knopfdruck von Tag auf Nachtmodus umschalten. Danach werden die nötigen Infos für den Schlaf aufgezeichnet. Man sieht im App zum Beispiel: Anzahl der Stunden an gesundem Schlaf und leichtem Schlaf, Uhrzeit des Einschlafen, Anzahl der Minuten die man aufgewacht ist und wie oft man aufgewacht ist.

Meine absolute Lieblingsfunktion der App in Kombination mit dem Band ist der Smart Alarm. Ich kann also meine Weckzeit eingeben und der Smart Alarm weckt mich bis zu 30 Minuten vor der Zeit, sobald ich mich in einer leichten Schlafphase befinde, damit ich leichter aufstehe. Und ja ich finde das funktioniert wirklich, man fühlt sich viel weniger müde & bereit für einen neuen Tag.

Es gibt noch ein paar kleinere Funktionen in der App, sowie ab und zu Tipps um gesünder zu leben. Hauptsächlich ist die App jedoch zur Aufbereitung der Daten da.

Fitbit

Ich habe das Aktivitäts- und Schlafarmband Flex von Fitbit getestet. Das Armand verfügt über drahtlose Synchronisation (Bluetooth) um 99 Euro. Der Akku hält bei ständigem Tragen 5 Zage lang. Zum Aufladen muss man den Flex Tracker aus dem Armband herausnehmen und in den mitgelieferten Auflade-Stecker geben (mit USB Anschluss). Das ganze ist leider nicht so einfach da man den Tracker jedesmal wieder ein bisschen umständlich in das Armband zurückgeben muss.

Tragekomfort

Die Bänder für das Fitbit gibt es in 2 Größen: klein 140 – 176 mm und groß 161 – 209 mm, beide werden im Packet mitgeliefert. Grundsätzlich kann das Band also jeder tragen egal wie breit oder dünn die Hand ist. Das Band selbst hat zusätzlich noch verschiedenen Verschlusstufen, um das Band optimal an die Hand anzupassen. Klingt prinzipiell gut, jedoch ist der Verschluss einhändig etwas mühsam zu schließen und ganz perfekt liegt es auch nicht an der Hand an.

Optik

Die Bänder gibt es in vielen unterschiedlichen Farben, da das Band ja vom Flextracker unabhängig ist, kann man sich auf Bänder in unterschiedlichen Farben nachkaufen. Das heißt man muss sich nicht für eine Farbe entscheiden. Ich hatte zum Testen mal ein pinkes Band. Ich muss sagen die Farbe schaut zwar schön aus, ist aber für den Alltag eher etwas unpraktisch. Das Band fällt sofort auf, darum habe ich es eher ungern getragen. Beim Sport jedoch ist die Farbe vollkommen egal. Das Band selbst hat auf der Oberseite noch eine LED Anzeige. Bei der mit einem Double-Tap (der leider bei mir sehr schlecht funktioniert hat) der Fortschritt des Tagesziels angezeigt wird.

Funktion

Der Tracker misst mit einem 3-Achsen-MEMS-Beschleunigungsmesser und kann so die verbrannten Kalorien, die zurückgelegte Strecke, die gegangenen Schritte und die Schlafqualität ermitteln. Er hat auch einen Vibrationsmotor eingebaut.

App

Auch für Fitbit gibt es eine Android und eine iOS App und auch hier habe ich die Android App getestet.

Die App visualisiert die selben Informationen wie die Jawbone UP App, jedoch optisch nicht so ansprechend und etwas unübersichtlich. Auch die Weckfunktion gibt es beim Fitbit Flex, jedoch wird man nicht nach dem leichten Schlaf geweckt, sondern einfach nach einer Zeit (durch Vibration des Bandes). Außerdem kann man nur über die App in den Schlafmodus gehen.
  

Ein absoluter Vorteil der Fitbit Flex App ist die Möglichkeit ein Training zu tracken, inklusive GPS. Man kann sich danach die Routen auch am Handy ansehen. Man erspart sich also das Verbinden mit anderen Apps, wie zB mit Runtastic. Jedoch kann man natürlich das GPS nur verwenden wenn man zb. zum Laufen das Smartphone zusätzlich zum Armband mitnimmt, was wieder einen Hauptvorteil des Armbandes minimiert.

Fazit

Beide Fitnessarmbänder sind perfekt wenn man eine genaue Übersicht haben will wie viel man sich bewegt und wo noch Verbesserung Potential besteht. Man kann bei beiden gut erkennen wie viel Kalorien verbraucht wurden. Der Hauptvorteil für mich ist, dass ich zB. Laufen gehen kann ohne mein (mittlerweile großes) Smartphone mitnehmen zu müssen. Nach dem Training kann ich einfach das Bluetooth aktivieren und mein Armband synchronisiert sich automatisch. Theoretisch könnte man bei beiden Bändern ca. 7 Tage detailliertes Datenmaterial aufzeichnen ohne zu synchronisieren.

Prinzipiell kann man beide Bänder mit einer Vielzahl von Partner Apps verbinden wie zB Runkeeper. Man muss aber darauf achten, dass man bei manchen Apps das Smartphone trotzdem immer dabei haben muss.

Mir persönlich hat das Jawbone UP eine Spur besser gefallen. Es war durch den Verschluss einfach viel angenehmer zu tragen & schneller anzulegen. Außerdem hat es mir gefallen, dass ich mit einem Knopfdruck schnell zwischen Tag und Nachtmodus wechseln konnte, dH. ich musste abends nicht mehr mein Smartphone zu mir holen. Auch das Design und die Datenvisualisierungen in der App sind bei Jawbone UP um einiges schöner.

Jedoch gibt es kein wirklich gutes Aktivitätstracking wie beim Fitbit. Außerdem wird es in Kürze Zuwachs geben bei Fitbit, auf der Website werden die neuen Modelle angeteaserd. Es wird eine neue Version des Trackers rauskommen – Fitbit Charge. Zusätzlich kommt noch ein zweites Modell, dass auch die Herzfrequenz aufzeichnen soll – Fitbit Charge HR. Außerdem wird es wohl auch eine Fitness-Watch geben – Fibit Surge. Ich bin gespannt.

Am Ende noch wichtig für die Programmierer: es gibt für Jawbone und für Fitbit eine API mit der man arbeiten kann. Die API’s sammeln alle Daten eines Users über unterschiedliche Geräte (zb Fitbit WLAN Wage, Armband, …) und führen sie zusammen.

Abschließen kann ich nur sagen: ich finde beide Bänder sind ihr Geld wert & ich hoffe die Hersteller gehen sorgsam mit meinen Daten um.

The post Fitibit Flex vs. Jawbone UP: die Datenarmbänder im Test appeared first on Mobile USTP MKL.

Die Probanden bekommen Zugangsdaten und können sich danach in das System einloggen. Danach werden sechs vordefinierte kleine Aufgaben durchgearbeitet. Alle Beobachtungen und Anmerkungen der Testperson werden dabei notiert und danach noch ein paar offene Fragen gestellt.

Warum Usertesting?

Durch diese Tests können wir unsere App laufend optimieren. Außerdem bekommen wir zusätzlich Informationen über das Nutzungsverhalten abhängig von Alter und Beruf. Hier werde ich die bisher wichtigsten Erkenntnisse beschreiben. Die folgenden Screenshots sollen helfen die nachstehenden Punkte besser verstehen zu können.

1) Persönliche Übersicht

2) Projektübersicht ohne Aufgaben

Beschriftung/Wording

Viele Begriffe die in Herculess verwendet wurden, wie beispielsweise “Dashboard” oder “Task” waren den Testpersonen nicht geläufig. Während für uns als Webprofessionals diese Begriffe Gang und Gebe sind, haben die Probanden ihre Bedeutung teilweise nicht verstanden. Deshalb haben wir die Begriffe gegen Deutsche Wörter ausgetauscht: zum Beispiel wurde aus Dashboard Übersicht und aus Task Aufgabe.

Datum

Das Datum für Aufgaben war im Format “20. Mai, 2014” angegeben. Die Tests ergaben, dass Zusätze wie heute, morgen oder gestern hilfreich wären. Außerdem wurden Wochentagsangaben gewünscht, sowie relative Zeitzusätze wie “noch 2 Wochen”.

Layout

Besonders positiv wurde von allen Probanden das “aufgeräumte” Layout erwähnt. Die Tester haben schnell erkannt, dass das Plus rechts oben für das Erstellen von Aufgaben und Projekten vorgesehen ist. Auch wenn zu Beginn keine Aufgabe vorhanden war, haben sie durch den kurzen Beschreibungstext sofort gewusst was zu tun ist.

Icons

Das Thema Icons ist sehr schwierig, besonders wenn man ein Icon nicht nur zur Unterstützung einer Beschriftung in einem Button verwendet, sondern es keine Beschriftung hat. Das Plus für Hinzufügen und der Haken zum Abschließen wurde von allen Probanden verstanden. Probleme gab es aber bei dem bekannten Hamburger Icon für das Menü. Besonders ältere Probanden erkannten das Icon nicht. Im Gegensatz zu den jüngeren Testpersonen, die das Icon dann einfach “ausprobiert” haben, hatten die älteren hier mehr Scheu. Gegen das Hamburger Icon gibt es zurzeit einiges an Kritik in der Online-Community. (Siehe beispielsweise: Before the hamburger button kills you). In der Erstversion werden wir das Hamburger Icon so belassen, wobei wir wahrscheinlich “Menü” dazu schreiben werden, dazu werden wir aber noch ein paar Tests machen. Am Desktop ist das Menü ohnehin immer eingeblendet. Allgemein hatten aber nach dem Test alle Probanden angegeben keine Probleme beim Navigieren durch die App gehabt zu haben.

Gesten

Während wir in einer anderen Studie “Touchgesten in Webbrowsern am Smartphone”, welche diesen Sommer publiziert wird, untersuchen ob User Touchgesten überhaupt verwenden, haben wir während des Herculess-Tests herausgefunden, das kein Proband bisher Swipe-Right für Details oder Swipe-Left zum Aufschieben verwendet hat. Der Indikator für Optionen in der Listenansicht ist aber bei einem Großteil der Nutzer gut angekommen. Diese haben darauf geklickt & somit die Optionen in der Liste eingeblendet, um eine Aufgabe abzuschließen.

Die Liste mit gefundenen Optimierungsmöglichkeiten könnte ich hier noch viel länger fortsetzten, jedoch sind das meist sehr spezifische Dinge. Falls jemand noch mehr darüber wissen möchte oder einfach nur allgemein Fragen zu der App hat, stehen wir jederzeit zur Verfügung.

Fazit

Solche Tests sollten keine einmalige Sache bleiben. Einen kurzen Testleitfaden mit kleinen Aufgaben zu erstellen ist, wenn man seine App kennt, wirklich kein großer Aufwand & diesen Testleitfaden kann man dann, mit kleineren Adaptionen, über eine längeren Zeitraum verwenden. Jeder unserer Tests hat nicht  länger als 10 Minuten gedauert und viele wichtige Erkenntnisse für unser Projekt gebracht. Es ist sehr wichtig, dass man bei solch großen Projekten nicht das Gefühl für die “echten” User verliert, denn im Normalfall ist der Durchschnittsnutzer kein Computerprofi, der den Großteil seiner Zeit online verbringt.

The post Usertesting einer Webapp appeared first on Mobile USTP MKL.

Die Themen der Konferenz waren sehr vielfältig. Das Spektrum reichte von Entwickler-Themen wie Angular JS und weiteren JavaScript Vorträgen über Responsive Web Design und SASS bis hin zu User Interface Design und Daten Visualisierung. Dadurch konnte sich jede/r die interessantesten Themen heraussuchen.

Einer der spannendsten Vorträge war der des Gründers des bekannten Smashing Magazine, Vitaly Friedman (Twitter: @smashingmag), über Responsive Web Design. Der Talk mit dem Titel “Real-Life Responsive Web Design” deckte sehr viele wichtige Aspekte ab, die heutzutage für die Erstellung von flexiblen Web-Projekten wichtig sind.

Auch sehr spannend war der Vortrag von Monica Dinculescu (Twitter: @notwaldorf). Sie arbeitet bei Google an der Entwicklung des eigenen Browsers Chrome und sprach über sechs Tricks, wie Google seine Chrome User glücklich macht. Damit gab sie einen spannenden Einblick hinter die Kulissen der Arbeit von Google.

Die Designer/innen und Entwickler/innen der Masterklasse Mobiles Internet konnten sehr viel aus den verschiedenen Vorträgen mitnehmen und werden auch bei der nächsten Konferenz in Österreich wieder dabei sein.

The post codefront.io appeared first on Mobile USTP MKL.

Wie schon in einigen vorigen Blogbeiträgen berichtet, arbeiten wir an einem Projektmanagementtool names Herculess. Da das Projekt Mobile First konzipiert wurde, aber immer weiter wächst, war von Anfang an klar, dass wir in irgend einer Form einen Styleguide benötigen. Zuerst war der Ansatz da, dass ich händisch von Scratch einen eigenen Styleguide baue. Was aber zu dem Problem führte, dass alle Änderungen, sei es Farben oder UI Elemente immer an zwei Stellen angepasst werden mussten. Also einmal in meinem Styleguide und einmal im wirklichen Development Code. Aus diesem Grund habe ich nach einer einfachen Methode gesucht, die man möglichst in ein aktuelles Projekt integrieren kann.

Dabei bin ich auf KSS (Kyle Style Sheet) gestoßen. KSS ist ein Dokumentations Spezifikation- bzw. ein Styleguide Format. Es gibt verschiedene Implementationen von KSS: Ruby, Phython, Node.js, Java und PHP. Ich habe mich für die PHP Implementierung entschieden, da diese für meine Vorkenntnisse den leichtesten Einstieg bedeutete und wenig Vorbereitungsaufwand mit sich bringt. Ich werde nun in einigen Schritten erklären wie unser Styleguide mit KSS aufgebaut wurde.

Setup

Zuerst muss man sich die Implementation von KSS in der gewünschten Sprache herunterladen (PHP Implementation – Github). Um schnell einen Überblick zu bekommen, wie das ganze funktioniert, kann man sich dann im Ordner Example ansehen, wie das ganze funktioniert. Auch wir haben das ganze auf der Grundlage dieses Examples aufgebaut, denn hier wird gezeigt wie man mit einer Codezeile die Navigationspunkte automatisch mit KSS aus dem Stylesheet generieren lassen kann (includes/menu.inc.php):

foreach ($kss->getTopLevelSections() as $topLevelSection) {
 echo '<li>
 <a href="reference.php?ref='.$topLevelSection->getReference().'" title="'.$topLevelSection->getDescription().'">' .
 $topLevelSection->getTitle() .
 '</a>' .
 '</li>';
 }

Dokumentation in CSS

Der Syntax in CSS ist ziemlich einfach. Man erstellt einfach einen CSS Kommentar und gibt dann folgende Punkte an:

• eine Nummerierung

• eine Beschreibung

• das Markup in HTML

• die verschiedenen Klassen und/oder Pseudoklassen

So würde ein Kommentar für unseren Standardbutton aussehen:

/*
# Form

Styleguide 1
*/

/*
# Standard Button

Your standard form button.

Markup:
<div class="input-wrapper">
 <div class="ico dark-cyan"><span class="icon-done-big l-ico"></span></div>
 <button class="btn $modifierClass">Aufgabe speichern</button>
</div>
:hover - Highlights when hovering.

&nbsp;

*/
.btn {

border:none;
 width: 100%;
 @include box-sizing(border-box);
 padding: 10px 0;
 margin:0;
 display:block;
 background: none;
 background-color: $cyan;
 cursor:pointer;

}

.btn:hover{

 background-color: lighten($cyan, 10%);
}

Wie man in unserer Markup Sektion sieht haben wir für den Button noch andere Klassen verwendet, zum Beispiel für das Icon, welches rechts im Button angezeigt wird (.icon-done-big), die Klassen-Definitionen habe ich hier nicht alle aufgelistet, da sich diese in unterschiedlichen .scss files befinden, da wir das ganze Projekt modular aufgebaut haben. Der Vorteil bei KSS ist, dass egal wo sich die Klassen befinden, diese immer mit in Betracht gezogen werden. Der oben angeführte Code produziert in unserem Styleguide folgendes Ergebnis:

Für den Start beinhalten unser Styleguide die Informationen zu unseren Formelementen, Infomeldungen, Farben, Icon-Font und unseren Standard-Texten. Die Organisation eines Styleguides funktioniert also über die Nummerierung und sollte im Idealfall so aussehen:

1. Form
1.1 Standard-Button
1.2 Delete-Button
1.3 On-Off-Switch
1.4 Standard-Input
2. Messages
2.1 Info-Message
2.2 Error-Message
3. Colors
4. Icon-Font
5. Text
5.1. Heading
5.2. Paragraph
...

Fazit

Der Vorteil von KSS ist offensichtlich. Ändert man irgendetwas in einer CSS-Regel, wird dies automatisch im Styleguide auch geändert. Der ganze Styleguide ist also dynamisch und man muss nichts doppelt schreiben. So bleibt der Guide immer aktuell. Für größere Webprojekte kann ich jedem einen Styleguide empfehlen um den Überblick nicht zu verlieren und anderen Teammitgliedern den Zugang zu CSS-Klassen zu erleichtern. Wie man einen Styleguide aufbaut sollte jeder für sich selbst entscheiden, einen dynamischen Styleguide zu verwenden sollte aber die Grundvoraussetzung sein.

The post Erstellen eines dynamischen Styleguides mit KSS appeared first on Mobile USTP MKL.

Lea Verou hielt eine der beiden Keynote Vorträge mit dem Thema “The Chroma Zone Engineering Color on the Web”. Dabei zeigte sie die unterschiedlichsten Methoden der Farbimplementierung in CSS auf. Neben der Analyse des Farbraumes RGB und der Erweiterung um den Alphakanal RGBA, erklärte sie auch die anderen Möglichkeiten um Farbwerte auszudrücken, wie HSL (Hue, Saturation, Luminance) und HSLA (Hue, Saturation, Luminance, Alpha). Neben zahlreichen nützlichen Javascript und Sass Funktionen zur Berechnung der Farbwerte stelle sie auch die Neuerungen im neuen W3C Color Modul 4 vor. So ist vorgesehen, dass es eine neue Möglichkeit für den Ausdruck der Farbwerte gibt, nämlich HWB, diese Möglichkeit kennt man auch aus Photoshop. Außerdem gibt es erstmalig Variablen direkt im CSS. So gibt es dann die neue Variable currentColor, die verwendet werden kann um die aktuelle Farbe in einer Regel wieder zu verwenden. Außerdem gibt es eine Funktion gray() über die mit der Angabe von Prozenten der Grauton direkt im CSS gesteuert werden kann. Die Neuerungen werden kaum von Browsern unterstützt, jedoch zeigte Lea Fallbacks um die Neuerungen jetzt schon zum implementieren. Alles in allem, war es ein sehr spannender Talk und Lea überzeugte nicht zuletzt mit einer interaktiven Präsentation und einigen Live-Code Beispielen.

Pascal Precht präsentierte in seiner ebenfalls interaktiven Präsentation Dependency Injection und Two-Way Data-Binding mit Angular.js. Darüber hinaus behandelte er das Thema Internationalisierung und Lokalisierung und zeigte, wie man über die Möglichkeiten von Angular hinaus, mit Angular-Translate Texte und Formate einfach asynchron laden und dynamisch anpassen kann.

Mikael Konutgan von All About Apps zeigte in einer Gegenüberstellung von Objective C mit Ruby, die von vielen unerwarteten Gemeinsamkeiten. Er verglich den Syntax der beiden Programmiersprachen und vermittelte den Zuschauern, das es viel mehr Ähnlichkeiten als Unterschiede gibt, vor allem wenn man von “modernen Objective C” ausgeht. Und für alle die den gewöhnungsbedürftigen Block Syntax von Objective C im Kopf behalten, verwies Mikael noch auf die Seite http://fuckingblocksyntax.com/, wo er selbst täglich nachschlägt. Seine Slides mit dem genauen Codevergleich sind unter https://speakerdeck.com/kmikael/objective-c-for-rubyists zu finden.

Steve Scott gab uns in seiner Keynote “Going Native” einen amüsanten Einblick in sämtlich Programmiersprachen, mit denen er selbst in der Vergangenheit gearbeitet hat bzw. heute noch arbeitet. Anhand dieses Streifzuges durch die Zeit zwischen 1987 bis heute zeigte Steve, wie sich die “native” Programmierung von damals, wo Entwickler Code auf Systemeben schrieben, im Vergleich zur Gegenwart, wo großteils Frameworks wie beispielsweise Cocoa Touch für iOS verwendet werden unterscheidet. Auch die Entwicklung von mobilen Webapplikationen setzte Steve in seiner Keynote auf dieselbe Ebene, wie die Entwicklung von “nativen” Apps für Plattformen wie iOS, Android oder Windows. Der Browser bietet in diesem Fall die Plattform und HTML, CSS und Javascript ein Framework zur Entwicklung von Applikationen. Den wesentlichen Vorteil von plattformspezifischen Apps sieht Steve vor allem in der User Experience, die aus seiner Sicht bei crossplatform Apps zu kurz kommt.

The post Das war die Kod.io 2014 in Linz appeared first on Mobile USTP MKL.

Smartphones: Funktionen und Unterschiede

Erstes Smartphone von IBM

Die gesamte digitale Branche ist sehr schnelllebig, besonders gut sieht man das am Beispiel des Smartphones. So wurde das erste Smartphone erst vor ca. 20 Jahren (1992) von IBM entwickelt und eine erste wirklich gut nutzbare Kamera wurde erst vor genau 10 Jahren in unsere heute so gewohnte Handytechnik integriert.

Die damalige Kamera war mit 1 Megapixel herausstechend für diese Zeit und heute gibt es bereits Smartphones die eine bessere Auflösung als so manche Digitalkameras mitbringen (z.B. Nokia Lumia 1020 mit 41 Megapixel). Heute haben unsere Smartphones teilweise schon die Leistung eines normalen Computers und bieten jede Menge an Extras. So gehört es beispielsweise zur Standardausstattung mit einem Smartphone Emails zu versenden, im Internet zu surfen, Spiele zu spielen, Videos zu machen/bearbeiten sowie hochauflösende Bilder zu erstellen. Bei dieser schnellen Veränderung kann man sich vorstellen, dass in diesem Bereich noch lange nicht alles entwickelt wurde.

Nokia Lumia 1020 mit 41 Megapixel Kamera

Preisklassen und Betriebssysteme

Grundsätzlich kann man Smartphones in Ober-, Mittel- und Unterklasse einteilen. Die Oberklasse- Smartphones sind meistens neben besonderer technischer Komponenten am höheren Preis erkennbar. Die Mittelklasse ist etwas preisgünstiger, hat aber meistens auch den benötigten Funktionsumfang. Die Unterklasse Modelle werden meist recht günstig verkauft und haben einige Einschränkungen wie zum Beispiel schlechtere Kameraauflösung. Für den Otto Normalverbraucher ist ein Mittelklasse Smartphone vollkommen ausreichend. Besonders wichtig bei der Anschaffung von Smartphones ist ein dazu passender Tarif, der vor allem die Internetnutzung ausreichend abdeckt, da dies sonst schnell zu einer Kostenfalle werden kann. Hier sind besonders Tarife, die entweder unlimitiert Internet beinhalten oder ab einem gewissen Konsum die Geschwindigkeit des Internets drosseln, zu empfehlen.

Außerdem gibt es unterschiedliche Betriebssysteme: iOS (Apple), Android (Google), Windows Phone, Blackberry.

QR Codes

QR-Code MFG-Blog

Aus dem schwarz-weißen Muster/Wirwarr wird man kaum schlau. Dennoch sieht man diese Codes immer öfter auf Verpackungen und Etiketten. Was genau also sind QR-Codes und wozu können wir sie speziell in der Waldpädagogik verwenden? QR steht für Quick Response (schnelle Antwort) und das ist auch genau das Ziel der Codes – schnell zu Informationen zu kommen. Die QR-Codes wurden entwickelt, um viele Informationen auf kleiner Fläche unterzubringen und sollten auch funktionieren, wenn sie teilweise verschmutzt oder zerstört sind. So kann der QR-Code selbst dann noch gescanned werden, wenn bereits 30% des Codes zerstört wurden.

Die Post zum Beispiel nutzt sie als digitale Briefmarken und die Bahn als digitale Fahrscheine. Auf Werbeplakaten führen sie meistens zu den Webseiten der Anbieter.

Scannen & Erstellen eines QR-Codes

QR Codes lassen sich mit jedem Smartphone und einer kostenlosen App dazu problemlos lesen. Dazu startet man einfach die App. Man klickt auf einen Button „Mit Kamera scannen“ und hält das Handy so über den Code, dass man ihn auf dem Display sieht. Der Code wird danach automatisch von der App erkannt und zeigt die enthaltenen Informationen. Bekannte Scanner sind zum Beispiel Qrafter, Barcode Scanner oder i-nigma.

Der Code besteht aus dem Muster und 3 schwarzen Quadraten an den Ecken. Diese helfen den QR Code immer zu erkennen, auch wenn er von einer anderen Richtung aus gescanned wird. Ein QR Code kann ganz einfach über einige Online-Plattformen selbst erstellt, gedruckt und verwendet werden (z.B. http://goqr.me/). So können solche Codes zum Beispiel mit Informationen befüllt werden, um einen Lehrpfad im Wald zu gestalten. Man kann sich also gewisse Punkte aussuchen, wo ein QR-Code mit den dazu passenden Informationen aufgehängt wird. Jeder, der ein Smartphone besitzt, kann dann ganz einfach an den verschiedenen Stationen die Informationen abrufen.

Augmented Reality für Waldpädagogik

Augmented Reality, auf Deutsch erweiterte Realität, beschreibt die Erweiterung der Realität unterstützt durch Computer. Darunter wird im Allgemeinen verstanden, dass ein reales Bild mit zusätzlichen Informationen wie Texten, Bildern und Videos angereichert wird.

Die Anwendungsmöglichkeiten für AR sind sehr vielfältig. Erfolgreich genutzt wird dieses Konzept beispielsweise für Navigationssysteme in Gebäuden, im Freien oder im Auto. Der Unterhaltungsbereich ist ebenfalls ein Feld in der AR gerne und oft genutzt wird. Doch auch für Waldpädagogik gibts es einige interessante Szenarios.

Ein Blick ins Innere

Mit Augmented Reality ist es möglich Dinge darzustellen, die mit freiem Auge nicht sichtbar sind oder ganz im Verborgenen liegen. Das Bild zeigt dieses Konzept anhand des Menschen. Mit Hilfe eines Smartphones oder Tablets kann das Innere des menschlichen Körpers dargestellt werden. Zusätzlich dazu kann sich der User detaillierte Informationen anzeigen lassen.

In Bezug auf Waldpädagogik wäre es vorstellbar ins Innere eines Baumes zu blicken und Vorgänge wie Nahrungsaufnahme oder Wachstum zu veranschaulichen. Aber auch um Tiere zu zeigen, die im Inneren eines Baumes leben wie Insekten, Nager oder Vögel.

Interpretation der Umgebung

In der Natur kommen viele Tiere und Pflanzen vor. Doch nur Spezialisten oder Hobbyexperten wissen über alle vorkommenden Spezies bescheid. Mit Augmented Reality ist es möglich, die Umgebung zu entdecken. Anwendungsbeispiele sind Fährtenlesen aber auch die Identifikation von Bäumen, Sträuchern, Kräutern oder Pilzen.

Virtuelle Welten

Ein weiteres beliebtes Szenario für Augmented Reality ist das Erscheinen lassen von Objekten, die in der Realität nicht da sind. So kann es beispielsweise möglich sein Hirsche in ihrer natürlichen Umgebung zu beobachten und ihre Verhalten zu studieren. Der User kann hautnah dabei sein, auch wenn er nicht das Glück hat das Tier in Wirklichkeit zu sehen.

– Carina Skladal

Die Waldfibel

Die Waldfibel wurde vom deutschen Bundesministerium für Ernährung und Landwirtschaft umgesetzt.

Die App ist kostenlos für Android und iOS erhältlich sowie als PC Software (aufgrund der großen Nachfrage). Ich habe die App unter Android 4.4 auf meinem Nexus 5 getestet. Die App versucht spielerisch einen Zugang zur Waldthematik zu ermöglichen.

Funktionen

Die Startview der App ist ein Waldpanorama, in dem man sich nach rechts und links bewegen kann. Das Panorama selbst enthält verschiedene Bäume, Tiere und Wegweiser. So kann man interaktiv durch den Wald navigieren.

Wählt man zum Beispiel ein Tier aus, kann man alles über das Tier lesen, sowie die Tierlaute des jeweiligen Tiers anhören.  Die Wegweiser verbergen Hinweise und einige Quizzes. So kann man sein Wissen über gewisse Blätter-und Baumarten überprüfen.

Mein persönliches Highlight ist der Baumhöhenmesser. Man kann ein Foto von einem Baum machen (der Baum muss in seiner vollen Größe ins Kamerafenster passen), danach geht man in normalen Schritten auf den Baum bis zum Stamm. Dabei werden die Schritte von der App mitgezählt und die Höhe berechnet.

Neben der Panoramaansicht kann man sich die Inhalte noch von A-Z ansehen sowie nach Schlagworten von A-Z suchen.

Fazit

Mein persönlicher Eindruck der App war sehr gut! Das App hat ein durchgängiges Design und wirkt sehr “rund”. Besonders viel Spaß hatte ich an der Panoramaansicht, weil ich dort ausprobieren wollte, welche Elemente “interaktiv” sind, um mehr darüber zu erfahren. Besonders der Sound der Tierlaute war in der Detailansicht sehr hilfreich! Wie von Carina Skladal im ersten Absatz beschrieben könnte die App vielleicht noch von mehr Augmented Reality Integration profitieren, indem das Panorama zum Beispiel über eine “wirkliche” Waldansicht gelegt wird.

– Lisa Gringl

Anymals+plants

Anymals+plants gibt es als Android (getestet), iPhone, iPad und Windows Phone App. Sie bietet im Wesentlichen zwei Funktionen: Eine Artenliste und einen Identifikationsmodus. Dabei greift die kostenlose Applikation auf eine sehr große Datenbank von Tieren und Pflanzen zurück.

Was man bei der Benutzung von Anymals bedenken sollte, ist, dass die einzelnen Daten zu verschiedenen Flora- und Faunagruppen erst heruntergeladen werden müssen. Die Daten sind zwar kostenlos (und Deutsch), aber messen je nach Paket mehrere MB. Da Anymals grundsätzlich international ist, gibt es ein sehr praktisches Feature, um nur relevante Daten herunterzuladen: die App kann die eigene GPS-Location ermitteln und anhand der Position bestimmen, welche Arten in der Umgebung vorkommen können. Diese Daten werden dann heruntergeladen.

In der Artenliste ist es möglich, selber Fotos zu einzelnen Arten anzuhängen oder Arten zu markieren. So kann man Sichtungen festhalten. Außerdem kann man direkt auf die Wikipedia-Artikel zu den Arten zugreifen – dafür ist jedoch (im Gegensatz zu den restlichen Features) eine Internet-Verbindung erforderlich.

Das Identifikationstool basiert auf schriftlichen Fragestellungen, teilweise ergänzt durch Bilder. Dabei wählt man zuerst eine Grundkategorie (z.B. “Amphibien und Reptilien”). Danach muss man nach und nach die Fragen beantworten und grenzt so immer weiter ein, welche Art gerade vorliegt. Die Fragen beziehen sich dabei stets auf das Aussehen der Art.

Die Daten der App werden teilweise durch User ergänzt, somit ist die Datenbank sehr groß und weitläufig.

Fazit

Obwohl die App optisch nicht unbedingt beeindruckend aussieht, so hat sie doch einen bemerkenswerten Funktionsumfang. Durch die clevere Nutzung von GPS-Daten und die (weitgehende) Möglichkeit der Offline-Nutzung ist die App für die Nutzung im Wald sehr gut geeignet.

– Francesco Novy

NABU Vogelführer

Obwohl man während der Schulzeit viele Vögel gelernt hat, die in unseren Wäldern heimisch sind, ist dieses Wissen bei vielen Menschen später anderen Dingen gewichen. Der Naturschutzbund Deutschland stellt deshalb einen umfangreichen Vogelführer zur Verfügung.

Funktionen

Mit dem NABU Vogelführer wird einem über alle Smartphoneplattformen hinweg ein durchgängiges Erlebnis geboten. Er ist für Android, iPhone und Windows Phone verfügbar und kann darüber hinaus über eine mobile Webseite aufgerufen werden. Mit dem Vogelführer lassen sich gesehene Vögel anhand verschiedener Merkmale bestimmen und Informationen dazu anzeigen. Neben Schnabel, Füße, Größe und Gefieder kann man auch den Lebensraum, in dem man das gewünschte Tier gesehen hat, angeben. Danach erhält man eine Liste mit allen Vögeln, die diesen Merkmalen entsprechen. Wählt man ein Tier aus, erhält man vielfältige Informationen dazu. In den jeweiligen Apps können Lieblingsvögel zu Favoriten einteilen, um Infos zu diesen immer griffbereit zu haben.

Fazit

Der NABU Vogelführer glänzt durch seine Plattformunabhängigkeit und seinen vielfältigen Infos. Vor allem die Filtermöglichkeiten sind sinnvoll gewählt, denn so können gesehene Vögel leicht wiedererkannt werden. Die jeweiligen Smartphone Apps benötigen zudem keine Internetverbindung und können so auch in Funklöchern zuverlässig verwendet werden. Wünschenswert wäre noch, dass die jeweiligen Vogellaute über das Handy abgespielt werden können.

– Thomas Ederer

iForest

Mit iForest lassen sich einheimische Bäume und Sträucher leicht bestimmen. Durch einfaches Auswählen der diversen Pflanzeneigenschaften wird das Suchergebnis immer weiter eingeschränkt bis nur noch die passende Pflanze übrigbleibt. Dazu erhält der Nutzer dann umfassende Informationen zu den Merkmalen, Standorte und Verbreitung, Geschichte, Heilkunde und vieles mehr.
Die Applikation hat auch eine integrierte Suchfunktion mit Hilfe dessen direkt nach dem Namen der Pflanze gesucht werden kann. Außerdem hat man die Möglichkeit, seine Lieblingsbäume oder -sträucher als Favorit zu speichern, um sie später schneller wieder zu finden.
Des Weiteren hat die App eine Trainingsfunktion, mit der ein Frage-Antwort Quiz gespielt werden kann. Dabei wird immer ein Bild angezeigt und darunter stehen drei Antwortmöglichkeiten zur Bestimmung zur Verfügung.

Test

Beim Testen der Applikation unter Android wurde festgestellt, dass diese sehr rund läuft und Farben sowie Layout ansprechend gestaltet sind. Ein Kritikpunkt ist die etwas zu klein gewählte Schrift bei langen Detailtexten.
Außerdem können die gewählten Filter nicht alle auf einmal wieder gelöscht werden. Um eine neue Pflanze bestimmen zu können, müssen die gesetzten Filter wieder einzeln deaktiviert werden.

Auch der Praxistest hat gezeigt, dass die Pflanzeneigenschaften sehr gut dargestellt und erklärt sind, wodurch eine Bestimmung von Bäumen und Sträucher leicht möglich war. Lediglich der Salbei im Garten wurde von der Applikation nicht gefunden.

Alle nötigen Daten werden bei der App-Installation geliefert, wodurch die Verwendung auch im Wald ohne Internetempfang möglich ist.

Die Applikation ist für Android und iOS verfügbar und kostet rund 13€.

– Michael Kräftner

Käferkunde

Käferkunde

Die App Käferkunde für  das iPhone ermöglicht das Nachschlagen, Bestimmen und Erlernen von unterschiedlichen Käferarten. Zur Zeit umfasst die App rund 150 Käfer. Laut Herausgeber wird die Bibliothek aber stetig erweitert. Außerdem enthält die App einen Lernmodus, in dem die eigenen Kenntnisse über Käfer abgefragt werden. Nebenbei können gefundene Käfer auf einer GPS-Karte eingezeichnet und mit Hilfe von Fotos dokumentiert werden.

Die App hat ein sehr schönes Design und eine durchdachte Bedienung. In der Praxis funktionierte das Käferbestimmen mit Hilfe des Filtern ganz gut. Auch der Lernmodus mit dem Quiz macht Spaß und erweitert das Käferwissen. Mit 7 Euro kostet die App aber schon relativ viel. Immerhin ist die Idee ja nicht ganz neu und ähnliche Anwendungen kosten oft nur die Hälfte. Abheben kann sich die App aber trotzdem durch das herausragende Design und den Lernmodus.

– Christian Gradl

The post Das Smartphone im Einsatz in der Waldpädagogik appeared first on Mobile USTP MKL.