Hervorgehobener Beitrag

Internet of Things Use Cases

Das Internet der Dinge (Internet of Things oder IoT) ist ein Hype. In Gartner’s 2015 Hype Cycle for Emerging Technologies steht die Technologie zu oberst auf der Aktualitäts-Kurve. Während des WEF 2016 wurde die Aussage gemacht, «the Fourth Industrial Revolution, which includes developments in previously disjointed fields such as artificial intelligence and machine-learning, robotics, nanotechnology, 3-D printing, and genetics and biotechnology, will cause widespread disruption not only to business models but also to labour markets over the next five years, with enormous change predicted in the skill sets needed to thrive in the new landscape.». Die vierte Industrielle Revolution ist eine Folge der IoT Technologien und ist ohne diese völlig undenkbar.

Es gibt schon verschiedene IoT Anwendungen für Enduser und KMUs. In diesem Blog möchte ich in lockerer Folge einige davon vorstellen. Wir müssen sicherstellen, dass wir gemäss der Aussage von Klaus Schwab «in Zukunft werden wir sicher mit weniger Menschen auskommen. Menschen, die heute im Dienstleistungssektor und im Büro arbeiten, müssen sich deshalb auf die Berufe und Fähigkeiten von morgen vorbereiten» die jungen Studierenden auf diese Herausforderung optimal vorbereiten gemäss dem Motto der HTW Chur «unsere Innovation — wir gestalten mit Leidenschaft die Zukunft»

IoT Use Case #14: Intelligentes Schaufenster

Beschreibung

Eine Londoner Digitalagentur hat ein Schaufenster entwickelt, das in Form eines Displays speziell an den Nutzer angepasste Inhalte zeigt, mit denen er interagieren kann. Dafür fügen Einzelhändler den von dere Agentur entwickelten Code in ihre Smartphone-Anwendungen ein. Die Schaufenster erkennen daraufhin mit Hilfe eines Bluetooth-Signals jene Passanten, die die App installiert haben. So bezieht das Schaufenster Informationen zu den Präferenzen und dem Kaufverhalten des Passanten, um auf der Basis dieser Informationen sowie auf Grundlage der Tageszeit oder Wettersituation passende Produkte anzuzeigen und zum Verkauf anzubieten. Quelle      Link

schaufenster

IoT Use Case #13: Intelligenter Kleiderschrank

Beschreibung

In einem Projekt der Birmingham City University ist ein mit dem Internet verbundener Kleiderschrank entstanden, der an das Tragen ungenutzter Kleidungsstücke erinnert und diese ansonsten nach einem gewissen Zeitraum spendet. Jedes Stück wird dabei mit einem waschbaren RFID-Tag ausgestattet, das den Nutzern abhängig von den aktuellen Wetterbedingungen einen Tweet oder eine Nachricht schickt, um an das Kleidungsstück zu erinnern. Werden diese Erinnerungen ignoriert, kontaktiert die Kleidung eine teilnehmende Spendenorganisation. Diese wiederum schickt dem Nutzer daraufhin einen Umschlag, in dem er die Kleidung an die Organisation senden kann.  Quelle     Link

kleiderschrank

VR für das Web

«Virtual Reality» für das Web steckt im Moment noch in den Kinderschuhen, der Blog gibt einen kurzen Stand der Dinge.

vr_webVR bietet neuartige Möglichkeiten, Inhalte darzustellen. Viele Fragen in Bezug auf Usability und User Experience müssen noch erforscht werden.

In einem Artikel in der NZZ über AR/VR wird hingewiesen, Intel nenne die Kombination von Augmented und Virtual Reality neu Merged Reality.

Wie kann man VR für das Web erstellen?

Es gibt einige Möglichkeiten, um VR für das Web zu produzieren, die zwei wichtigsten Technologien sind:

  • Mit Hilfe der Javascript Bibliothek three.js
  • Mit Hilfe der experimentellen Javascript API WebVR, resp. Mozilla VR (MozVR)

Three.js

Die Javascript Bibliothek erlaubt, 3D-Welten und Animationen für den Browser zu erstellen. Three basiert im Hintergrund auf WebGL (Web Graphics Library), welches 3D-Grafiken hardwarebeschleunigt im Browser darstellen kann (Beispiel einer interaktiven Animation mit Three). Die Zusatzbibliothek StereoEffect.js erlaubt, einen stereoskopischen Effekt zu erzeugen. Die Ausgabe kann zum Beispiel auf einem Google Cardboard mit handelsüblichen Browsern erfolgen .

Beispiel

  • Das einfache Beispiel (nach Möglichkeit mit dem Google Cardboard anschauen). Das Beispiel basiert auf der Seite Chrome Experiments

Literatur

WebVR, resp. MozVR

WebVR erlaubt, in «nightly Versionen» von Firefox  (Windows, Mac, Linux, Android, Firefox OS) und Chrom (Windows, Android)  VR Inhalte mit Oculus Rift, Google Cardboard (mit Hilfe von WebVR Polyfill) oder Samsung Internet for Gear VR im Browser anzuschauen.

Das Erstellen von Oculus Rift Lösungen funktioniert nur Windows; Browserlösungen für Android und iOS können mit allen Plattformen erstellt werden. Mozilla stellt für das einfachere Programmieren das Open-Source Framework A-Frame zur Verfügung.

Hinweise

Schlussfolgerungen

Im Moment ist wahrscheinlich die Verwendung von Three die im Moment effizienteste Lösung. Es ist aber anzunehmen, dass WebVR rasant weiter entwickelt wird.

 

 

 

 

Layouten im Web

Das Gestalten anspruchsvoller Web-Layouts für Magazine, Zeitschriften, Webseiten etc. mit Hilfe der Cascading Style Sheets (CSS) ist herausfordernd und dauernden technologischen Änderungen unterworfen. Bei Web-Designern gilt das Umsetzen eines Layouts mit mehreren, gleich hohen Spalten als «Holy Grail». HolyGrail.svg

Ein wichtiger Punkt des «Holy Grail» Layouts ist, dass sich bei einer Vergrösserung der mittleren Inhalts-Spalte sowohl die linke als auch die rechte Spalte automatisch in der Höhe anpasst (Bild Quelle: Wikipedia).

Nebst dem Erstellen von gleich hohen Spalten ist das Platzieren von Inhalts-Elementen nebeneinander eine weitere Herausforderung. Standardmässig werden die HTML Block-Elemente (vergleichbar mit Absatzstilen in der Textverarbeitung) untereinander platziert. <div>, <h1> bis <h6>, <p>, <form> etc. sind typische Block-Elemente.

Im Laufe der Zeit entwickelten sich verschiedene Techniken, das Ziel mit Hilfe von HTML und CSS zu erreichen.

Frames

In den Urzeiten des Webs wurden Seiten mit Frames aufgebaut. Das Browserfenster bestand aus mehreren Teilbereichen, in welche unabhängige HTML-Seiten geladen wurden. Obwohl völlig veraltet, gibt es immer noch etliche Websites, welche mit Frames aufgebaut sind (exemplarisches Beispiel). Der Artikel «HTML Frames» erklärt den Aufbau. Das aktuelle HTML unterstützt die Frames (zum Glück) nicht mehr.

framesDer Aufbau von Websites mit Frames war kompliziert, die Bedienung benutzerunfreundlich und ungeeignet für die Suchmaschinen-Optimierung.

Tabellen

Für eine weitere, auch völlig veraltete Methode zum Aufbau eines Layouts wurden Tabellen verwendet. Tabellen machen Sinn, wenn Inhalte verglichen werden. Für Layouts sind sie wegen ihres komplizierten und unflexiblen Aufbaus ungeeignet (exemplarisches Beispiel).

tablesTabellen sind in der heutigen Zeit ungeeignet, um professionelle Layouts aufzubauen.

CSS Float

Der nächste Entwicklungsschritt war der Aufbau mit dem CSS Befehl Float. Zwei HTML Block-Elemente können mit Hilfe dieses Befehls nebeneinandergestellt werden. Der Befehl wird sehr häufig für das Layouten verwendet, allerdings ist es schwierig, gleich hohe Spalten zu erstellen (exemplarisches Beispiel)

floating-elemente-image-02

Der Float-Befehl erlaubt, zwei oder mehrere Elemente nebeneinander zu stellen (Quelle).

floafEs ist möglich, eine saubere HTML-Struktur mit Float zu visualisieren. Der Befehl ist allerdings recht eingeschränkt, die Reihenfolge der Inhalte kann nicht gross manipuliert werden und erlaubt keine anspruchsvollen Layouts.

CSS Flexboxes

Die Formatierung mit den Flexboxes wird von allen modernen Browser unterstützt und vereinfacht das Layouten deutlich.

flexbox_support

CSS Flexboxes werden zunehmend für die Gestaltung komplexerer Layouts verwendet (Quelle)

flexbox_intro

Flexboxes erlauben, die Inhalte entweder zeilen- oder spaltenweise darzustellen, in normaler oder umgekehrter Reihenfolge (Quelle).

flexbox-order

Es gibt auch die Möglichkeit, die Reihenfolge des Inhaltsflusses selber festzulegen (Quelle), was individuelles Layouten unabhängig der Reihenfolge in der HTML-Datei erlaubt.

Verschiedene Online-Tools ermöglichen, den Code der Flexboxes interaktiv zu erzeugen (Beispiel). Praktisch alle Forderungen von «Holy Grail» werden mit Hilfe der Flexboxes erfüllt (exemplarisches Beispiel).

Im exemplarischen Beispiel ist das HTML-Layout gleich aufgebaut wie beim Float-Befehl.

flexbox-css

Simples CSS für die Erstellung rudimentärer Flexboxes

CSS Grid Layout

Weit entfernt von einer sauberen Browser-Unterstützung ist das CSS Grid Layout, Chrom und Firefox unterstützen es nur durch das Setzen von Flags im Browser.

grid_support

Die breite Unterstützung von CSS Grid Layout ist noch nicht vorhanden (Stand August 2016, Quelle)

drawing-orderEin Vorteil des Grid Layouts ist, dass sich Objekte überlappen können (Quelle)

 

CSS Regions

Der Vorteil der CSS Regions ist, dass es einen Textfluss durch mehrere Container erlaubt, ganz analog zum Vorgehen in Layout-Programmen. Die Browser-Unterstützung ist mangelhaft (Stand August 2016), es ist unsicher, ob die Unterstützung im Chrom Browser jemals kommt.

css_regions_header

Mit CSS Regions kann der Textfluss durch verschiedene Rahmen gesteuert werden. Die fehlende Browser-Unterstützung erlaubt aber noch nicht, die Technologie zu verwenden (Quelle).

 

CSS Shapes

Chrome und Safari (nicht aber Edge und Firefox) unterstützen den Konturensatz um ein unregelmässiges Bild. Die Spezifikation ist seit März 2014 eine «Candidate Recommendation». Im Netz finden sich viele Tutorials, wie sich die unregelmässigen Formen umfliessen lassen (Beispiel), es sind zum Beispiel Kreise, Ellipsen oder Polygone unterstützt.

konturensatzChrom und Safari unterstützen den Konturensatz (exemplarisches Beispiel).

Ausblick

Dank den Flexboxes sind heute schon anspruchsvolle Layouts realisierbar, in naher Zukunft wird hoffentlich das Grid Layout auch von allen Browsern unterstützt. Dann lassen sich mit CSS auch komplexe und mit Hilfe der CSS Regions magazinähnliche Layouts erstellen.