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.

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

 

Interessantes Story Telling Tool

StoryMap ist ein Open Source Tool, mit welchem Orte mit einer Reihe von Ereignissen verknüpft werden können:

Auf der Beispielseite ist eine unkonventionelle Anwendung zu sehen. Die Details eines Gemäldes von Hieronymus Bosch werden mit Detailbeschreibungen hinterlegt, eine clevere Idee! Die Kunst ist, solche Werkzeuge zielgerichtet einzusetzen.

«AR, VR und MR ante portas»

Der Spruch «Hannibal ante portas» geht auf den römischen Politiker und Schriftstellers Cicero zurück. Es ging um die Angst, dass der karthagische Feldherr Hannibal im 2. Punischen Krieg (218-201 v. Chr.) Rom erobern würde.

Heute stehen Augmented , Virtual und Mixed Reality vor der Tür und beschäftigen viele Entwickler (Unterschiede der Technologien). Seit einigen Wochen funktioniert auch WebAR viel einfacher. Ohne Plug-Ins lassen sich via WebCam oder Smartphone zusätzliche Inhalte auf Markern darstellen.

Alexandra Etienne zeigt in einem Blogeintrag, wie mit Hilfe von A-Frame, AR.js und Three mit 10 (zehn) Zeilen HTML- und Javascript-Code eine einfache AR-Lösung gebaut wird!

Web Developer Roadmap

Für das Web schiessen fast täglich neue Frameworks und Bibliotheken wie Pilze aus dem Boden. Es wird immer schwieriger die Übersicht zu behalten oder gar die verschiedenen Werkzeuge im Detail zu kennen.

Kamran Ahmed veröffentlichte kürzlich eine grafische Roadmap für Back- und Frontend-Technologien. Es wäre ein spannendes Projekt für den HTW Studiengang Multimedia Production daraus eine interaktive Lösung mit weiteren Hintergrundinformationen zu entwickeln.

In Metaphern und Bildern unterrichten

Was ist eine API? Was bedeutet Sandboxing? Immer wieder hören wir diese Fragen von den Studierenden. Oft ist es sinnvoller, die Begriffe in Metaphern oder Bildern als technisch zu erklären. Genau hier setzt die von der Washington Post und Jigsaw ins Leben gerufene Site Sideways Dictionary ein. Die Begriffe werden mit Methapern erklärt, man kann auch eigene da zufügen!

Die Antwort auf die Frage: Was ist eine API?

VR entwickelt sich weiter

Bis jetzt galt die Definition, dass bei Virtual Reality (VR) in einer geschlossenen Brille ausschliesslich virtueller Inhalt in Form von 360°-Videos oder rein digitalem Inhalt präsentiert wird.

Die Disney Labs haben jetzt eine Möglichkeit gefunden, mit echten Objekten zu interagieren (im Beispiel mit einem Ball). VR, AR und MR wachsen immer näher zusammen. Die Details über das Projekt «Catching a Real Ball in Virtual Reality» finden sich auf der Website von Disney Research.

 

Resonate Belgrad 2017

Letzte Woche fand in Belgrad die Resonate 2017 statt. In zwei parallelen Tracks stellen verschiedene Künstler ihre digitalen Arbeiten vor.  Einige Präsentationen waren sehr strukturiert und gut aufgebaut (zum Beispiel diejenige von Jon Thomson and Alison Craighead oder von Matthew Plummer Fernandez), andere eher chaotisch.

Eine Entdeckung war das Interactive Architecture Lab («We are interested in the Behaviour and Interaction of Things, Environments and their Inhabitants. The Interactive Architecture Lab at UCL is engaged in a range of academic research activities and industry collaborations»).

Resonate 2017 in Belgrad: design meets technology (sometimes in a chaotic way)

CSS Grid Layout

In einem Blogeintrag vom August 2017 stellten wir das CSS Grid Layout vor mit der Bemerkung «weit entfernt von einer sauberen Browser-Unterstützung ist das CSS Grid Layout». Seit März hat sich das geändert wie in Caniuse zu sehen ist: Die modernen Browser unterstützen die CSS-Grids.

Das Tool Griddy erlaubt, CSS Grid Layouts via Menü zu erstellen – ganz ohne Codierung!

Griddy unterstützt das Spalten- und Zeilenlayout sowie die neue Einheit fr.

Augmented Reality

Das Institut Multimedia Production (IMP) der HTW Chur gehört zum Departement Angewandte Zukunftstechnologien. Einer der technischen Forschungsschwerpunkte des Departements ist Augmented Reality. In den nächsten Wochen werden wir das Thema auf Mediapp vertiefen.