Comeback von Google Glass

Die vor rund zwei Jahren als Produkt für den Verbraucher gescheiterte Datenbrille Google Glass ist jetzt für den Einsatz in Unternehmen angepasst worden. Die Details finden sich in einem Artikel im US-Magazin «Wired».

Google hat mit der neuen Brille die Geschäftskunden ins Visier genommen. Das zeigt auch im Namen Glass Enterprise Edition.

3D im Web

Dank x3dom, einer Entwicklung der Fraunhofer-Gesellschaft ist das Erstellen und Einbetten von 3D Grafiken im Browser ein Kinderspiel. Im HTML-Code werden einfache Befehle für das Erzeugen von 3D Objekten, Texturen etc. eingegeben. Die Spezifikation erlaubt auch das Einbinden von Video- und Audiodateien sowie das Programmieren von Interaktivität.

Der Code für obiges Beispiel ist extrem einfach und verständlich:

Weitere Beispiele

Im Live Beispiel lässt sich der Inhalt mit der Maus drehen:

SI Magazine

Im regelmässig erscheinenden SI Magazine erschien kürzlich ein Artikel von Ines Jansky mit dem Titel «SciencEmotion | Technik für Jugendliche». Darin wird die Frage aufgeworfen, wie es gelingen könnte, Jugendliche im Alter von 12-21 für technische Themen und Berufswege zu begeistern. Das Projekt sciencEmotion der HTW Chur geht, auf Basis von eigenen neuen wissenschaftlichen Untersuchungen, direkt auf Jugendliche zu und bezieht sie in die Lösung ein.

Im Januar wurde im SI Magazine der MMP Studiengang vorgestellt, kurze Zeit später erschien der Artikel «Neue Einsichten in der Ausbildung im Bereich Multimedia».

Grid Layout Bibliothek Masonry

Die Javascript Bibliothek Masonry erlaubt das schnelle Erstellen von grafischen Layouts. Mit von der Bibliothek gegebenen Klassen können sehr schnell unregelmässige Layouts gestaltet werden:

HTML- und CSS-Code sind einfach und verständlich:

Auf der Website von David De Sandro finden sich viele Beispiele mit Code sowie umfangreiche Tutorials.

Spellbook Of Modern Web Development

Das «Spellbook Of Modern Web Development» von Dexter Yang listet mehr als 2000 Links zu Tools, Plug-Ins, Bibliotheken, Büchern, Services etc. auf den Gebieten Frontend und Backend Technologien auf. Eine wahre Fundgrube für Web Designer!

Weitere nützliche Nachschlagewerke

HTW Chur goes AR

Letzte Woche kündigte Apple an der WWDC 2017 Neuigkeiten auf dem Gebiet der Augmented Reality an. In iOS  11 gibt es den ARKit, mit welchem Oberflächen automatisch erkannt, Objekte in Echtzeit hinzugefügt und auf der Oberfläche platziert werden können. Apple sieht die Anwendungsgebiete in interaktivem Gaming, immersiven Shopping-Erlebnissen und Industriedesign. Mit dem ARKit können Augmented-Reality-Apps für iPhones und iPads entwickelt werden.

Apps?

Meiner Meinung nach sind die proprietären Apps ein Relikt der Vergangenheit. Das Netz muss offen bleiben, die verwendeten Technologien dürfen nicht von einer privaten Firma kontrolliert werden. Das gilt auch für AR. Zum Glück gibt es das neue AR.js Framework von Jerome und Alexandra Etienne. Die offene Technologie, welche auf A-Frame und Three.js sowie Web RTC basiert, erlaubt das Erleben von AR im Browser der Desktop Computer und auf Android Geräten (ab iOS 11 auch auf dem iPhone mit Safari Version 11).

AR.js ist extrem einfach in der Programmierung!

Demo

  1. Laden Sie auf dem Desktop mit Firefox oder Chrome (in Zukunft auch mit Safari 11) zuerst den Marker und drucken diesen aus.
  2. Rufen Sie unsere Demo-Seite auf, erlauben Sie dabei den Zugriff auf die Webcam.
  3. Halten Sie den Marker vor die Webcam.

Sie sollten das sich drehende (stark stilisierte) HTW Logo sehen.

Code

Der Code ist sehr einfach, verständlich und offen:

Sie können sich im Browser den Code anschauen und kopieren! Im 5. Semester des HTW Studiengangs Multimedia Production werden wir einige AR-Projekte mit den Studierenden realisieren!

 

 

Erfahrungen mit der Hololens

An den Multimedia Trend Days der Screenpro AG im Juni 2017 bot sich Gelegenheit, die Hololens einem breiteren Publikum zu präsentieren. Interessant waren die Reaktionen in Bezug auf Usability und Einsatzgebiete.

Usability

Für die meisten Besucher war das Navigieren mit der Hololens zu kompliziert. Das Markieren einer Schaltfläche durch Drehen des Kopfes und die gleichzeitige Geste mit der Hand für die Bestätigung des Menüs klappte nur bei wenigen Anwendern. Die Sprachsteuerung konnte wegen des Hintergrundlärms in der Ausstellung nicht eingesetzt werden.

Einige Besucher bemängelten die Schritte für das Verschieben oder Drehen von Objekten als zu kompliziert und für die dreidimensionale Welt nicht geeignet. Für komplexere Anwendungen müssen auf dem Gebiet der Usability neue und innovativere Lösungen gefunden werden!

Einsatzgebiete

Nebst vielen Einsatzgebieten für Architektur (Betrachten von Modellen gemeinsam mit dem Architekten, Visualisierung von Küchen im Rohbau etc.) suchten wir nach weiteren Anwendungen. Ein Besucher schlug zum Beispiel vor, das Fernsehbild mit zusätzlichen Informationen zu versehen (zum Beispiel Einblenden einer anderen Kameraeinstellung beim Sport, Präsentieren von zusätzlichen Bildern während der Tagesschau etc.). Die Möglichkeit eines virtuellen Vorstellungsgesprächs wurde auch andiskutiert. Der Bewerber kann seinen eigenen Raum einrichten und sich dort zusammen mit seinen Berufserfahrungen und Projekten präsentieren.

Workflow

Auf einem Drive Dokument haben wir die ersten wichtigen Ergebnisse in Bezug auf die Technik festgehalten.

Für eine Hololens Anwendung werden die 3D Objekte in einem Werkzeug wie Blender erstellt, für Unity exportiert, dort mit C# Skripten angereichert und via Visual Studio auf die Hololens gespielt.

Barrierefreiheit von Apps testen

Die SBB App ist eine von der Schweizer Bevölkerung meist genutzten Apps. Unter diesen 8’417.7001 Personen befinden sich schätzungsweise 1’586’0002 Menschen – in privaten Haushalten lebend – mit einer körperlichen, kognitiven oder psychischen Einschränkung. Es ist also keine Frage ob die SBB App barrierefrei sein muss.

Nun scheint die wissenschaftliche Forschung zu Usability Heuristiken angehalten zu sein. Seit 2006 wurden keine neue, bedeutungsvolle Heuristiken für interaktive Medien publiziert. In 2007 kam das Smartphone auf dem Markt, wodurch sich die Mensch-Computer Interaktion beträchtlich veränderte. Die Interaktion auf Mobile unterscheidet sich von jener auf Desktop durch zwei wesentliche Facetten: Der kleine Bildschirm und die berührbare Oberfläche (Touchscreen).

Die WCAG (Web Content Accessibility Guidelines) 2.0 Richtlinien für Barrierefreiheit enthalten Kriterien für die Informationsdarstellung, welche genau so gut für mobile Geräten gelten. Das ist schon mal gut. Aber wie prüft man diese Kriterien, ohne gleich einen aufwendigen Test mit realen Nutzern aufzusetzen? Der Accessibility Scanner von Google bietet hier Aushilfe, allerdings nur bei Android-Apps.

Abbildung: Die häufigsten Schwachpunkte, welcher der Accessibility Scanner  in der SBB App identifiziert hat, bezogen sich auf einen zu geringen Kontrast und zu kleine Schaltflächen.

1  Ständige Wohnbevölkerung 2016

2 Menschen mit Behinderungen

SEO Quick Win mit Google PageSpeed Insights

Google Webmasters Tools, seit einiger Zeit Google Suchkonsole genannt,  ist eine riesige Werkzeugkiste für SEO-Profis. Mit schnellen Resultaten muss man nicht rechnen, Suchmaschinenoptimierung ist Knochenarbeit, bei der  Regelmässigkeit und langfristig die Schlüsselwörter sind. Doch ein paar Quick Wins sind durchaus möglich. Eins davon bietet die Funktion PageSpeed Insights. Einfach die URL der Website eintippen, das Tool analysiert gleich für mobile und für Desktop. Gemäss Google gibt es Handlungsbedarf wenn die Score unter 75 liegt. Ob nun drüber oder drunter, es lohnt sich die Empfehlungen von PageSpeed Insights zu befolgen.

Am Schluss  der vielen Ratschläge befindet sich ein Link zu optimierten Bild-, Javascript und CSS-Ressourcen, die als übersichtlich strukturierter Ordner herunterladbar sind. Nun noch die  optimierten Dateien auf der Website deployen, und dieser Quick Win ist in der Tasche.

PageSpeed Insights

CSS Variablen

Der Begriff «Variable» ruft bei vielen Designern und MMP Studierenden ein Stirnrunzeln hervor. Variablen gehören in die Welt der Programmierung und nicht zum Thema Design. Diese Zeiten sind vorbei! Auf Caniuse erkennt man, dass die modernen Browser die CSS Variablen unterstützen. Es ist nicht mehr nötig, dafür LESS oder SASS (resp. SCSS) zu verwenden:

Beispiel zur Illustration

Bei der Gestaltung eines Corporate Designs werden zum Beispiel immer wieder die gleichen Schrift- oder Hintergrundfarben verwendet. Statt mehrfachen Definitionen lassen sich Variablen verwenden. Diese werden in der :root Pseudo-Klasse mit zwei Bindestrichen und einem Namen definiert:

Das Ergebnis im Browser sieht gleich aus wie bei der klassischen Definition:

Weiterführender Link