Tool #1: CSS Specificity Graph Generator

http://jonassebastianohlsson.com/specificity-graph/

Mit dem Specificity Graph Generator können Specificity Probleme eines Stylesheets visualisiert werden.

Specificity ist eine der mühseligsten Features von CSS, das besonders dann lästig wird, wenn Web-Projekte eine gewisse Größe erreichen. Die beste Lösung um Specificity zu umgehen ist das Vermeiden von IDs für CSS und das Verschachteln von Selektoren. Ganz vermeiden lässt sich das natürlich nicht. Und hier kann der Specificity Graph Generator helfen. Er gibt Auskunft über die Gesundheit des Codes bezogen auf die Specificity und zeigt potentielle Verbesserungsmöglichkeiten.

Die x-Achse des Graphen zeigt, an welcher Stelle in der Datei sich der Selektor befindet (Zeile 10, Zeile 30, …), während die y-Achse die Specificity (ID, Klasse, …) angibt.

Die meisten Web-Projekte werden einen ähnliches Bild bekommen wie unten zu sehen ist. Diese Höhen und Tiefen sind immer ein schlechtes Zeichen. Die Höhen repräsentieren einen Selektor mit einer hohen Specificity, gefolgt von einem Tal mit geringer Specificity. Genau hier ist das Problem. Um den nächsten Berg zu erklimmen müsste man noch höher gehen als der letzte Berg hoch war.

Doch wie sollte das Diagramm im Idealfall aussehen? Da die vielen Höhen und Tiefen ein schlechtes Zeichen sind, ergibt sich daraus, dass es besser ist, wenn der Graf eher flach ist. Das Ziel ist es aber nicht eine komplett flache Linie zu bekommen, denn es wird immer Selektoren mit höherer Specificity geben. Der Schlüssel liegt darin Specificity nicht zu eliminieren sondern sie geschickt zu managen.

Ein aufwärts gehender Graf zeigt, dass das CSS in richtiger Reihenfolge geschrieben wurde. Es beginnt mit Selectoren von niedriger Specificity beispielsweise dem *-Selector für globale Einstellungen, gefolgt von Typ-Selektoren (ul {}), gefolgt von Klassen-Selektoren (.site-nav{}). Den Schluss bilden überschreibende Hilfs-Klassen (.clearfix{} oder .hidden{}).

Detaillierte Tips für Specificity können in diesem Artikel nachgelesen werden: http://cssguidelin.es/#specificity

Tool #2: CSS Stats

http://cssstats.com/

CSS Stats analysiert sehr detailliert das Stylesheet eines Projekts. Nach Angabe einer URL oder kopieren von CSS Anweisungen liefert CSS Stats genaue Daten über die Anzahl von Anweisungen, Farben, Schriftgrößen, Schriftfarben. Darin enthalten ist auch der oben beschriebene Specificity Graph Generator.

CSS Stats kann helfen das CSS einer Website aus mehreren Perspektiven zu verbessern. Der wichtigste Punkt ist aber Ballast loszuwerden. Mit Ballast werden nicht benutzte, redundante oder nicht notwendige CSS Deklarationen verstanden. Findet man beispielsweise abnorm viele Selektoren, Schriftgrößen oder lädt 20 Fonts sind das genau die Dingen, an denen man Optimierungen vornehmen kann.

Tool #3: Parker

https://github.com/katiefenn/parker

Parker ist ebenfalls ein Analyse-Tool für CSS ähnlich wie CSS Stats. Da dies aber kein Online-Tool ist sondern lokal auf einem Rechner läuft habe ich es mir nicht näher angesehen, will es der Vollständigkeit halber in diesem Artikel dennoch erwähnen.

Tool #4: CSS Dig

http://cssdig.com/

CSS Dig ist eine Chrome Extention, die das CSS einer Website analysiert.

CSS Dig listet alle CSS Eigenschaften auf, die in dem Web-Projekt verwendet werden und zeigt auch deren Häufigkeit. Jeder Selektor kann ausgeklappt werden sodass sichtbar wird, welche verschiedenen Werte verwendet werden. So sieht man beispielsweise auch hier alle Farben, die gesetzt werden sowie Schriftgrößen, etc.

Quellen:

• http://csswizardry.com/2014/10/the-specificity-graph/
• http://jonassebastianohlsson.com/specificity-graph/
• http://cssguidelin.es/#specificity
• https://github.com/katiefenn/parker
• http://webdesign.tutsplus.com/tutorials/understanding-css-stats-how-to-make-the-most-of-the-numbers–cms-22756
• http://cssstats.com/

The post CSS analysieren appeared first on Mobile USTP MKL.

Bei zoomsquare arbeiten wir gerade an einer neuen Version unserer Immobilien-Suchmaschine für Desktop-User. Nachdem wir im Sommer unsere erste App für iOS und Android starten konnten wollen wir nun auch den Desktop Usern ein starkes Tool zur Wohnungssuche in die Hand geben.

Die Desktop Version basiert auf meteor, einer Open Source Plattform für Web Applikationen in JavaScript. Das Interface selbst basiert auf einem eigenen Framework, das mit SASS beschrieben wird. So weit zu den Basistechnologien. Das SASS Framework besteht aus grundlegenden Styles für Typografie, Images, Forms, enthält Module wie ein Flyout Menü, Modale, Tabs und viele mehr. Was auch im Framework definiert wird ist das Grid, das zur Ausrichtung von Element verwendet wird. Hier habe ich mich vor ein paar Monaten für das Grid System von Harry Roberts, csswizardry-grids, entschieden.

csswizardry-grids

Auf github kann man nachlesen wie genau das Grid-System arbeitet. Prinzipiell besteht es aus einem einzigen SASS File. Am Anfang der Datei, können einige Variablen gesetzt werden, um das Grid an die eigenen Bedürfnisse anzupassen. Eine dieser Variablen betrifft das „silent-classes“-Feature.

Grundsätzlich weist man einem Element mittels Klassen zu wie es sich verhalten soll.

<div class="element grid__item lap--one-half desk--two-thirds">
 ...
</div></pre>
<pre>

grid__item = sei ein Item in einem Grid
lap—one-half = nimm im Breakpoint „lap“ die Hälfte der Breite ein
desk—two-thirds = nimm im Breakpoint „desk“ zwei Drittel der Breite ein

Wer es vermeiden möchte zu viele Klassen im HTML zu haben kann auf das „silent-classes“-Feature umstellen. Damit werden die Grid-Anweisungen auf das CSS ausgelagert.

.element
 {
      @extend %grid__item;
      @extend %lap—one-half;
      @extend %desk—two-thirds;
 }

SASS Features

So weit so gut. Das bringt uns zu den zwei Features, die jetzt ernsthafte Performance Probleme ausgelöst hat.

Nesting
SASS erlaubt es Selektoren zu verschachteln. Hier ein Beispiel:

.ul
 {
      margin: 0;
      padding: 0;
 
      .li
      {
           display: inline-block;
      }
 }

Extend/Inheritance

Ein weiteres tolles Features von Sass ist @extend, mit dem es möglich ist einen bereits geschriebenen Selektor in einem anderen zu verwenden. Hier ein Beispiel:

.box
 {
      margin: 12px;
      padding: 10px;
 }
 
 .box—success
 {
      @extend .box;
      background-color: red;
 }

Das Problem

Nach ein paar Wochen Entwicklungszeit war Chrome und vor allem die Entwicklertools völlig überfordert mit der Web-App. Hat man ein Element untersucht hat es 2-3 Sekunden gedauert, bis die Styles sichtbar waren. Resizen des Fensters dauerte wieder 5-8 Sekunden, bis die Seite neu gerendert war. Christoph äußerste dann den Verdacht, dass es an dem Grid System liegt, weil die Selektoren so merkwürdig lang waren. Das wollte ich zunächst nicht glauben, hab dann aber doch recherchiert. Und er hatte recht.

Folgender SASS Code sieht auf den ersten Blick völlig in Ordnung aus:

.container
 {
          .l-box
          {
             @extend %grid;
             @extend %grid--full;
 
             .box
             {
                @extend %grid__item;
                @extend %one-whole;
                @extend %huge--one-half;
             }
          }
 }

Sieht man sich allerdings das kompilierte CSS an, sollte man schon stutzig werden.

.container .l-box {
     list-style: none;
     margin: 0;
     padding: 0;
     margin-left: -24px;
     letter-spacing: -0.25em;
 }
 
 .container .l-box .box {
     display: inline-block;
     vertical-align: top;
     width: 100%;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     letter-spacing: normal;
     word-spacing: normal;
 }
 
 .container .l-box {
     margin-left: 0;
 }
 
 .container .l-box > .container .l-box .box, .container .l-box .container .l-box > .box {
     padding-left: 0;
 }
 
 
 .container .l-box .box {
     width: 100%;
 }
 
 @media only screen and (min-width: 1060px) {
     .container .l-box .box {
         width: 50%;
     }
 }

Die Menge an Selektoren wird natürlich dann noch mehr, je mehr Elemente am Grid ausgerichtet werden und je tiefer diese Selektoren genestet sind.

Baut man das SASS jetzt unverschachtelt auf erreicht man folgendes Ergebnis:

.l-box {
     list-style: none;
     margin: 0;
     padding: 0;
     margin-left: -24px;
     letter-spacing: -0.25em;
 }
 
 .box {
     display: inline-block;
     padding-left: 24px;
     vertical-align: top;
     width: 100%;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     letter-spacing: normal;
     word-spacing: normal;
 }
 
 .l-box {
     margin-left: 0;
 }
 
 .l-box > .box {
     padding-left: 0;
 }
 
 .box {
     width: 100%;
 }
 
 @media only screen and (min-width: 1060px) {
     .box {
         width: 50%;
     }
 }

Der Unterschied beim Drittletzten Selektor, der padding-left auf 0 setzt ist sehr deutlich. Von 10 Ebenen wurde jetzt auf 2 reduziert. Als ich die ganzen Projektfiles auf solche Fälle durchsucht und alle Verschachtelungen entfernt hab war die Web-App auf ein Mal wieder Blitzschnell und Chrome konnte wieder aufatmen.

Sowohl nesting als auch extend machen Sinn und sind sehr hilfreich. Mein Tipp ist allerdings sie nicht willkürlich zu verwenden, sondern nur dann, wenn es auch wirklich sinnvoll ist. Denn oft gibt es auch andere Lösungen.

The post SASS Performance appeared first on Mobile USTP MKL.

Dank dem Österreichischen Wirtschaftsservice aws hatte der Großteil des Teams von zoomsquare die Möglichkeit das Festival zu besuchen.

The Venue
Die Hofburg ist ein großartiger Austragungsort. Sie liegt mitten in der Stadt, in einer der schönsten Gegenden Wiens und ist von innen noch viel pompöser als von außen. Man fühlt richtig die Geschichte der vergangenen Jahrhunderte in denen Könige und Kaiser dort gelebt haben. Um Essen oder Getränke brauchte man sich gar keine Sorgen machen. Es gab den ganzen Tag vom Frühstück über Mittagessen bis hin zu abendlichen Snacks Catering von feinkoch das keine Wünsche offen lies.

Promotion, Networking & Funding
Zwei Tage lang haben Startups aus ganz Europa die Möglichkeit auf ihren Ständen ihre Produkte und Lösungen zu präsentieren. Aber nicht nur Startups waren vertreten sondern auch bereits etablierte Unternehmen wie RedBull, Microsoft oder IKEA oder auch wichtige Vertreter der Wirtschaft wie die Österreichische Forschungsfördergesellschaft, der Österreichische Wirtschaftsservice, die Wirtschaftsagentur Wien und viele andere. Ebenso vertreten sind natürlich auch Investoren, die auf der Suche nach interessanten Investitionsmöglichkeiten sind. Und unter all den etwa 3.500 Teilnehmen waren auch einige Journalisten.

Das Pioneers ist der perfekte Ort um Leute aus der Branche kennen zu lernen. Vor allem Investoren warten nur darauf, dass ein Pioneer vorbei kommt und seine Businessidee pitched. Hierfür konnte man bereits im Vorfeld Termine mit anderen Teilnehmer machen und Slots in dafür vorgesehenen ruhigeren Räumen buchen.

Um sein eigenes Startup bekannter zu machen bietet das Festivals die Pioneers Challenge, den Pioneers Showroom und den Pioneers 90“ Pitch. Für diese Aktionen konnte man sich Monate zuvor anmelden. Unter allen Startups wurden bei der Pioneers Challenge zunächst die Top 100 und danach die Top 50 gewählt. Die besten haben dann die Möglichkeit 90“ das Publikum von ihrer Idee zu überzeugen. Die Besucher können via App Fragen an das Startup stellen, die auf der Bühne erscheinen. Der Gewinner, Oradian, erhält 50.000 US Doller Seed Investment vom Speedinfest.

Tech
Beim Pioneers Festival geht es natürlich nicht nur Geld. Sondern auch um die Technik. Als am 29. Oktober die Weltpremiere des ersten fliegenden Autos statt fand war die Halle berstend voll. Mit Spannung verfolgt das Publikum die Präsentation und können es kaum erwarten das Gefährt in Aktion zu sehen. Durch die Hofburg geflogen ist das Auto natürlich nicht. Aber es wurde (von mehreren Securitys bewacht) ausgestellt und demonstriert, wie sich die Flügel öffnen und schließen.

Doch auch kleinere Produkte waren mindestens genau so aufregend. Beim Ausprobieren einer Oculus-Brille beschreibt mir mein Kollege Stephan: „Es ist wie in der Matrix“!. Durch die Brille war es möglich in einem virtuellen Raum nach Dingen zu greifen und sie hin und her zu bewegen.

Foto von Timea Turdean – timeaturdean.com

Die Vielfalt war einfach überwältigend. Gezeigt wurden Touch Tables, die mit dem Smartphone verbunden werden konnten, 3D Drucker, Wearbales, Kinect Lösungen, Rollstühle, die sich durch leichte Bewegungen des Kopfes steuern lassen, Drohnen uvm. Neben den ganzen Hardware-Produkten gab es natürlich auch viele Software-Lösungen.

Abseits der Stände in den verschiedenen Räumen gab es auch zwei große Vortragssäle in denen den ganzen Tag über unterschiedlichste Vorträge gehalten wurden. Hier reichten die Themen von Technik, über Unternehmensgründung bis hin zu Marketing. Für jeden war etwas dabei.

Ich kann jedem empfehlen im Mai 2015 auf das nächste Pioneers Festival zu gehen. Selbst wenn man kein eigenes Startup gründen möchte kann man viel lernen. Vielleicht ist ja auch der nächste Arbeitgeber dabei

Links:
pioneers.io
zoomsquare.com

The post Mit zoomsquare am Pioneers Festival 2014 appeared first on Mobile USTP MKL.

Am 8. Oktober 2014 haben wir daher mit acht Studienkollegen einen kurzen Usability-Test durchgeführt, um unseren iOS Prototyp zu testen. Dieser umfasste zu diesem Zeitpunkt neun Screens, die einen Event-Erstellungsprozess abbilden.

Der Test hat viele Erkenntnisse zu Tage gebracht. Einerseits wurden einige Bugs gefunden. Beispielsweise ist die App an manchen Stellen abgestürzt. Das was uns aber besonders wichtig war, waren Usability-, UX- oder Verständnis-Probleme.

Probleme

Desiree Zottl Problem
Nach dem Login, kamen die User auf den Start-Screen, welcher zu diesem Zeitpunkt nicht sehr viel zeigt, bis auf eine Box mit dem User-Profil und einem Button. Vier von acht Probanden, haben sich hier sehr gewundert, dass sie Desiree Zottl sind.

Start-Screen leitet auf keine Aktion hin
Auf dem Start-Screen waren viele User ein wenig verloren. Ohne den Hinweis, dass sie bitte jetzt ein neues Event anlegen sollen, hätte kaum jemand den grünen Button gefunden.

Durch Tastatur wichtige Funktion abgeschnitten
Beim Lösen mancher Aufgaben hatten die Probanden Probleme wichtige Funktionen zu erwischen, da sie durch die Tastatur oder Suchergebnisse abgeschnitten oder nicht erreichbar waren.

Switch unklar
Beim Hinzufügen eines Termins zu einem Event kann mit einem Switch zwischen ganztägigen und zeitabhängigen Terminen gewechselt werden. Hier war für einige Probanden unklar, ob der Switch gerade aktiv ist oder nicht.

Buttons teilweise zu klein
Einige der Buttons sind zu klein und mussten von den Testperson oft mehrmals gedrückt werden, bevor die Funktion ausgeführt wurde. Dies hat natürlich Verwirrung gestiftet, weil die Testpersonen den Eindruck hatten, dass etwas nicht funktioniert hat.

Pflichtfelder hervorheben
In einigen Fällen war es für die Probanden unklar, welche Felder ausgefüllt werden müssen und welche nicht. Es ist auch nicht eindeutig, ab wann ein Event ausreichend ausgefüllt ist, um es speichern zu können.

Viele Schritte
Einige Probanden haben angemerkt, dass es eventuell mühsam ist so viele Schritten durchlaufen zu müssen, wenn man die App oft nützt.

Zum Ausfüllen Extra-Klick notwendig
Bei den meisten Screens muss zuerst ein Plus-Button gedrückt werden, bevor die Felder ausgefüllt werden können. Ein Proband hat angemerkt, dass das eigentlich nicht notwendig ist und Zeit verbraucht.

Verwirrende Navigation bei Zusammenfassung
Tippt man von der Zusammenfassung auf einen der Bereiche, springt man quasi wieder zurück und muss dann alle folgenden Schritte erneut durchlaufen. Das hat bei einigen Probanden für Verwirrung gesorgt.

Lösungen

Start-Screen
Da der Start-Screen beim ersten Aufruf sehr leer ist soll er in Zukunft von Anfang an mehr dazu einladen neue Events anzulegen. Auch wollen wir eventuell auf das Anlagen eines Profils für Gatherer verzichten.

Wo zu Was
Um die Anzahl der Schritte bis zum Beenden des Erstellungsprozesses zu reduzieren und Events zu vereinfachen wird der “Wo”-Screen wegfallen und als einfaches Textfeld in den “Was”-Screen wandern.

Unklarheiten aufräumen
Einige Dinge, waren nicht zu 100% klar bei den Usern, die wollen wir in nächster Zeit versuchen auszuräumen.

The post Gatherer: der erst Test 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.

Die Web-Applikation Mobile-O-Poly wurde bereits 2013 im Rahmen des Bachelorstudiums entwickelt. Damals konnte man das Ganze aber nur als Prototyp bezeichnen. Das Ziel war es, das Spiel im Master soweit auszubauen, dass die App wirklich spielfähig ist.

So kam es dazu, dass wir uns im Februar warm anzogen, um einen ersten Testlauf zu starten. Nach der langen Entwicklungszeit war das für uns ein spannender Moment.

Um besser testen zu können, haben wir zunächst eine spezielle Karte angelegt, die 5-6 Punkte enthielt, die um die FH St. Pölten lagen. Dadurch mussten wir selbst nicht so weit laufen und konnten noch miteinander kommunizieren, falls es zu irgendwelchen Problemen kam.

Getestet wurde auf drei verschiedenen Geräten:

• iPhone 4S (iOS)
• Samsung Galaxy S4 (Android)
• Nokia Lumia 620 (WindowsPhone)

Kurz und knapp die aufgetretenen Probleme:

• GPS Genauigkeit
• Akku
• Absturz des Browsers

Der Testlauf dauerte leider nicht allzu lange, denn die Genauigkeit des GPS war bei zwei von drei Smartphones so schlecht, sodass die Spieler gar nicht auf der Karte sichtbar waren. Lief man zu einem bestimmten Punkt auf der Karte, musste man oft einzige Zeit hin und her laufen, bis die Aktion ausgelöst wurde.

Beim iPhone war nach wenigen Minuten der Akku aus. Dies hing sicher einerseits von der Kälte ab unter Umständen auch am Spiel.

Stürzt währenddessen der Browser ab oder wird er geschlossen war es oft der Fall, dass die Daten nicht gespeichert wurden.

Änderungen für die nächste Version

Probleme mit dem GPS wird es immer geben. Doch wir werden unseren Usern in Zukunft anzeigen wie gut ihre Verbindung ist.
Auch an den anderen Problemen wollen wir in diesem Semester weiter arbeiten. Außerdem soll das Spiel noch um ein paar Funktionen erweitert werden.

The post Mobile-O-Poly Testlauf 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.