Lesemodus in Microsoft Edge unterstützen

Der Lesemodus ist eines der Features die ich persönlich beim Surfen gerne benutze. Die Seite lässt sich auf das wesentliche darstellen und inhaltlich wird man nicht von störenden Elementen abgelenkt. Hier als Beispiel eine Sport Nachricht von msn.de

Normale Ansicht in Edge

normal-view

Lesemodus

reading-view

Lesemodus unterstützen

Wer Webseiten erstellt, bzw. Software schreibt die Webseiten rendert kann den Lesemodus unterstützen. Hierfür hinterlegt man im Markup Metadaten mit verschiedenen Hinweisen die Microsoft Edge interpretiert und entsprechend aufbereitet. Damit lassen sich im Lesemodus folgende Dinge beeinflußen:

  • Titel
  • Autor
  • Datum
  • Herausgeber
  • Artikelbild
  • Bildunterschriften
  • Bilder
  • Der eigentliche Artikel Text
  • Copyright Informationen

Möchte man zum Beispiel den Autor des Aritkel korrekt anzeigen lassen so wird dies anhand eines Klassennamens beim <div> Element angegeben.

<div class=“byline-name“>Hier der Name des Autors</div>

Andere Informationen werden meist über das <meta> Element angegeben, wie zum Beispiel das Copyright.

<meta name=“copyright“ content=“Entsprechenden Copyright Text hier einfügen“>

Eine komplette Anleitung gibt es auf der MSDN zu finden.

Update: Ich hatte den Link vergessen, sorry dafür.

Microsoft Edge Reading View Documentation on MSDN

Kann man den Lesemodus abstellen?

Ich habe viele Anfragen zum Abstellen des Lesemodus bekommen, meist im Irrglauben das der Werbeumsatz durch diesen Modus sinkt. Dem ist nicht so. Der Lesemodus lässt sich erst aktivieren, wenn die Seite fertig geladen ist. Alle Werbeeinblendungen werden angezeigt und müssten dementsprechend auch Monetisiert werden. Natürlich kenne ich nicht im Einzelnen die Details der unterschiedlichen Werbeplattformen so könnte es theoretisch auch erst zum bezahlten View kommen, wenn das Image Element im sichtbaren Bereich ist.

Falls Ihr wirklich Bedarf habt den Lesemodus zu deaktivieren (habe ich schon erwähnt, dass es ein tolles Feature für den Benutzer ist?) dann kann man dies auch auf <meta> Element Ebene bewerkstelligen.

<meta name=“IE_RM_OFF“ content=“true“>

Plug-Ins für WordPress, etc…?

Die meisten Webseiten werden vermutlich mit gängigen Content Management Systemen erstellt und publiziert. Hier hat man in der Regel auch die Möglichkeit Einfluss auf die Rendering Engine zu nehmen, meist in Form eines Plug-Ins. Stand heute habe ich keines für WordPress gefunden (dieser Blog läuft auf WordPress) das den Lesemodus für Microsoft Edge unterstützt, ich denke es ist eine Frage der Zeit bis eines Verfügbar sein wird.

Spieleentwicklung auf der Basta 2015

Am kommenden Mittwoch habe ich eine Night School Session auf der Basta in Mainz. Diese startet um 20.15 Uhr und zu einem Thema das ich eigentlich nur noch nebenher mache: Spieleentwicklung. Anbei der Abstract wie er im Programm zu finden ist

Night School: Du willst es doch auch! Spieleprogrammierung mit HTML5 und JavaScript

Was macht der Entwickler am späten Abend? Richtig, er programmiert Spiele. Wer noch nicht weiß, welches Handwerkswerkzeug dafür geeignet ist, kann sich bei dieser Night School einen Überblick verschaffen. Der Fokus liegt hierbei auf HTML5 und JavaScript. Verschiedene Frameworks werden vorgestellt, Quellen für nützliche Tools und Assets gezeigt und schließlich ein Minispiel programmiert. Am Ende der Night School werden wir das Spiel auf unterschiedliche Plattformen deployen und unseren Spaß an einem kleinen Contest haben. Zu gewinnen wird es auch was geben. Lasst euch überraschen!

Solch einen Abstract schreibt man immer schon eine Weile im Voraus ohne ganz konkret auf die Technik einzugehen. Da ich nun inhaltlich weiter bin kann ich verraten das folgende Technologien und Frameworks in diesem Talk eine Rolle spielen werden:

  • Unity 5
  • Phaser.io
  • Babylon.js

Das Spiel werde ich in Babylon.js schreiben, die Spielidee selber habe ich schon und insofern bin ich gespannt wie es auf der Bühne dann läuft.

Auf jeden Fall würde ich mich freuen den ein oder anderen Teilnehmer zu solch später Abendstunde begrüßen zu dürfen und in der Zeit Spaß zu haben.

Summer oF#

Diesen Sommer möchte ich mich mehr mit F# beschäftigen. Sozusagen ein Summer oFSharp. Seid [Max Malook](https://twitter.com/max_malook) mir die Sprache nach einem Usergroup Meeting in Berlin schmackhaft gemacht hat, habe ich gleich danach ein paar Dinge ausprobiert. Nun nehme ich mir die Zeit und werde mich weiter einarbeiten.

Gute Ressourcen gibt es sehr viele, der beste Einstieg ist [fsharp.org](http://fsharp.org) und dort die Sektion **Learn**. Hier gibt es Artikel, Beiträge, verweise auf weitere Quellen und Videos. Da ich ein sehr visuell lernender Mensch bin und zu faul um zu lesen, schaue ich mir ganz gerne Videos nebenher an.

Für den ersten Einstieg habe ich mir das Video von Mathias Brandewinder ausgesucht, [F# for the C# developer][1]. Es behandelt F# aus der Sicht des C# Entwicklers, speziell mit dem Fokus, wann sollte ich F# einsetzen. Dabei werden Beispiele in C# gezeigt und wie diese in F# realisiert werden. Hierbei wird auf Limitationen in C# eingegangen die mit F# besser zu lösen sind.

Das Video sieht mit fast 2 Stunden sehr lang aus, ist aber eigentlich ganz kurzweilig, zumal noch eine Pause im Video enthalten ist (wurde im Rahmen eines Usergroup Meetings aufgenommen) und die ersten 16 Minuten einfach nur technische Probleme des Präsentierenden beinhalten. Der [Link zum Video][1] startet ab der Minute 16, zuvor wurde nur organisatorisches der Usergroup besprochen.

To be continued…

[1]:https://youtu.be/H0pS5UnVa2E?t=16m3s „F# for the C# developer“

Windows 10 Web Hosted Apps

Seit Windows 8 kann man mit Web Technologien nativ auf die Windows Runtime zugreifen und System-APIs ansprechen. Das ging bisher allerdings nur wenn man die Anwendung lokal paketiert hat. Mit Windows 10 ist eine neue Möglichkeit hinzugekommen: Web Hosted Apps.

Definition Web Hosted App

Was ist eigentlich eine Web Hosted App? Im Prinzip ganz einfach erklärt. Eine native Windows 10 Anwendung deren Inhalt von einem Web Server kommt.

Dieses Szenario erlaubt es eine App im Store zu haben, aber die Aktualisierung auf dem Web Server durchzuführen. Man hat die volle Kontrolle über die Update Zyklen.

Ist das neu?

Die Grundlegende Idee Web Content in einer App anzuzeigen ging bisher auch. Das Web Application Template war ein solcher Ansatz. Doch es gab unter Window 8 bzw. 8.1 zwei Dinge zu beachten.

  1. JavaScript das dynamisch das DOM manipulierte musste Unsafe deklariert werden. Das gestaltete sich schwierig für Bibliotheken die die App einfach eingebunden hat, wie z.B. Angular.js. Hier musste man auf Dinge ausweichen wie z.B. die JavaScript Dynamic Content Shim for Windows Store apps.
  2. Man hatte keine Möglichkeit lokale APIs aufzurufen.

Der Windows 10 Ansatz

Mit Windows 10 öffnen wir die Plattform wieder komplett so das die Entwickler selbst entscheiden können was funktioniert. Und wenn der Entwickler entscheidet, ja, meine App soll den Web Content hosten und diesem vollen Zugriff auf die lokale API gewähren, dann kann er dies tun.

Die Client Seite

Um Web Content in einer App anzeigen zu können müssen zwei Einstellungen getätigt werden. Zuerst muss die App auf den Web Content verweisen. Hierzu ändert man im package.appxmanifest die Startseite. Im folgenden Beispiel

<Application

Id=App

StartPage=http://lockscreenweb.azurewebsites.net/>

 

Damit der Inhalt auch geladen und angezeigt wird muss man noch URI Regeln hinzufügen.

<uap:ApplicationContentUriRules>

<uap:Rule Match=http://lockscreenweb.azurewebsites.net/ Type=include WindowsRuntimeAccess=all/>

</uap:ApplicationContentUriRules>

 

Die Regel sagt aus, alles was von der Domäne http://lockscreenweb.azurewebsites.net kommt wird innerhalb der App angezeigt. Sämtliche links die auf diese Domäne gehen werden auch innerhalb des App Containers geladen. Links die auf eine andere Domäne verweisen werden im Standard-Browser geöffnet. Zudem darf dieser Inhalt auch auf die Windows Runtime zugreifen.

Die Server Seite

Damit man auch die Windows Runtime funktionalität aus der Server gehosteten App nutzen kann muss man abfragen ob man diese zur Verfügung hat.

if (window.Windows) {

 

Ist das wahr so hat man vollen Zugriff auf die Windows Runtime und kann diese nutzen.

Beispiel

Unter http://lockscreenweb.azurewebsites.net habe ich eine Webseite die in einer Windows 10 App gehostet werden kann. Diese Webseite ist in der Lage den LockScreen des Benutzers auf seinem Windows 10 Gerät auszutauschen. Dies funktioniert sobald man diese als Windows 10 Hosted Web App einbindet. Um nachzuvollziehen wie das ganze funktioniert habe ich ein Video aufgenommen das die Schritte zur Hosted Web App zeigen.

Windows 10 Bridge für Web Hosted Apps from Dariusz on Vimeo.

Das package.appxmanifest habe ich zudem als Gist abgelegt è https://gist.github.com/writeline/94d3713c80f922ff0ec3

Das Web Projekt gibt es ebenso auf Github unter http://github.com/writeline/LockScreenWeb

Build 2015 – Rückblick

Letzte Woche durfte ich vor Ort auf der Build sein und verschiedene Eindrücke mitnehmen. Es folgt eine Zusammenstellung meiner persönlichen Highlights. Wobei Highlights einfach nur als Beachtenswert gemeint ist.

Keynotes

Beide Keynotes waren ziemlich anstrengend. Das mag an der Länge der Keynotes gelegen haben, Ich habe das Gefühl gehabt man wollte so viele Inhalte wie möglich in 3 bzw. 2,5 Stunden packen. Mir selbst war es zu viel. Erfrischend fand ich allerdings die Kuhbegattungsstory mit AzureML. Der gute Kollege hatte den Pace rausgenommen und die Story war interessant. Wer die Keynotes noch nicht gesehen hat der kann auf Channel9 beide anschauen. Zur Erleichterung erlaubt der Video Player das Navigieren durch Bookmarks.

Keynote Tag 1

Keynote Tag 2

HoloLens

Ein absolutes Highlight für mich war die HoloLens Academy. Hier durften Teilnehmer mit der HoloLens programmieren und diese Testen. Leider waren die Plätze sehr begrenzt, wer einen Platz ergattern konnte durfte sich wohl über eine absolut fantastische Experience freuen.

Ich hatte das Glück im Vorfeld beim Rehearsal das Trianing mitzumachen. Die Illusion durch die HoloLens ist erstaunlich. Ich hätte nicht mit so einer guten Darstellung gerechnet. Am Ende des letzten Moduls sprengte man ein Loch in den Boden um darunter den virtuellen Raum begutachten zu können. Ich hatte wirklich das Gefühl man könnte reinfallen.

Einige deutsche Teilnehmern haben Erfahrungsberichte gepostet, diese verlinke ich für einen objektiveren Blick.

Magic Moments – Recap of the Holographic Academy (Rene Schulte)

All about HoloLens – Sehen, Staunen, Holograph Apps bauen (Marco Richardson)

Die beste Session der Build 2015

Ein absolutes Highlight war für mich die Session zu Compiling Objective-C. Zumindest die ersten 30 Minuten, danach musste ich leider raus. Was diese Session extrem von den anderen unterscheidet ist die technische Tiefe. Es war faszinierend Jim Radigan zuzuhören wie er über die Code Generierung von C++ Code für die Windows Plattform referierte. Andere Sessions hätten sich hier ruhig eine Scheibe abschneiden können.

Compiling Objective-C Using the Visual Studio 2015 C++ Code Generation that Builds Windows, SQL, .NET and Office

Angular.js Team @Build2015

In der Session zu TypeScript hat Anders Hejlsberg die Angular.js Teammitglieder Bradly Green und Misko Hevery auf die Bühne geholt. Sie stellten kurz vor warum Angular.js auf TypeScript setzt und was die Gründe für das Ersetzen von ATScript waren. Die beiden haben sich zusammen mit Anders noch die Zeit genommen nach der Session im Foyer eine Q&A zu machen und man konnte schnell die Fragen loswerden die einem auf dem Herzen lagen. Eine tolle Sache.

Expo Bereich

Das letzte Highlight für mich war der Expo Bereich. Hier tummeln sich neben Partnern auch Vertreter diverser Microsoft Produktteams. Eine gute Gelegenheit um Fragen zu stellen, Sachverhalte darzustellen und Empfehlungen entgegenzunehmen. Desweiteren gab es noch Hands-on Bereiche. Sogar ein dedizierter Maker Bereich in welchem man ein Fahrzeug bauen und anprogrammieren konnte. Dieses Fahrzeug Kit gab es samt Board auch noch als Give Away für die Teilnehmer der Session Internet of Things.

 

Build 2015 Keynote – Pizza Edition

Am 29.04 startet die Build 2015 und alle warten gespannt auf die Details zu diversen Technologien. Die Build Keynote selbst wird per Live Stream übertragen (https://channel9.msdn.com/Events/Build) und man kann diese natürlich gemütlich von seinem Device anschauen, über Social Media seinen Senf dazu abgeben und ganz alleine vor dem Rechner abhängen.

Doch in der Gemeinschaft vor Ort mit Leuten zusammen einen solchen Event anschauen macht deutlich mehr Spaß. Man kann Ankündigungen gleich Diskutieren, gleichgesinnte Treffen und einfach einen coolen Abend erleben.

Wir veranstalten hierzu in Berlin, Köln und München jeweils einen Event in welchem ihr vor Ort mit uns die Keynote schaut, dabei Pizza mampft und einfach eine gute Zeit habt. Um das organisatorische besser Planen zu können hier die jeweiligen Anmeldelinks:

München im Microsoft Office in Untschleißheim è http://build2015-munich.eventbrite.de

Köln im Microsoft Office è http://build2015-cologne.eventbrite.de

Berlin in der Digital Eatery è http://build2015-berlin.eventbrite.de

Besonders cool finde ich das die .NET Usergroup Karlsruhe spontan einen Viewing Event für 12 Leute zur Verfügung stellt. Wer hier nähere Infos möchte einfach auf den Facebook Eintrag antworten oder Frank direkt kontaktieren.

DotNet User Group Karlsruhe è https://www.facebook.com/dotnetka

TechSummit: Web & Cloud

Am 6.Mai 2015 veranstalten wir unseren TechSummit: Web & Cloud. Besonders freut mich das wir als Sprecher Christian Weyer, Christian Wenz und Daniel Fisher gewinnen konnten.

In den ersten Vorabversionen von Visual Studio 2015 und ASP.NET 5 wurden bereits einige spannende Neuerungen für Webentwickler integriert, die einen guten Ausblick geben, in welche Richtung sich die Microsoft-Webplattform und die dazugehörige Werkzeuge entwickeln werden. Auf dem TechSummit: Web & Cloud geben Ihnen Experten von Microsoft und aus der Community einen kompakten Überblick über diese Neuerungen und gehen außerdem auf Themen wie JavaScript Frameworks, Cloud-Hosting mit Microsoft Azure, Integration von Open Source-Technologien oder Windows Universal Apps für Webentwickler ein. Darüber hinaus werden die Ankündigungen der Fachkonferenz Build, die vom 29. April bis zum 1. Mai in San Francisco stattfindet, ausführlich besprochen.

Der TechSummit: Web & Cloud findet am 6. Mai 2015 in Köln statt, die eintägige Konferenz ist kostenlos. Aufgrund der begrenzten Anzahl von Plätzen wird Interessierten eine frühzeitige Anmeldung empfohlen.

Agenda

   

Track 1 (Main Session)

Track 2 (Breakout Session)

08:30

09:30

Registrierung – Visit the Microsoft TechTruck

09:30

10:00

KEYNOTE

10:00

11:00

Neues von der Build 2015 für Webentwickler
Malte Lantin

11:00

11:30

Break – Visit the Microsoft TechTruck

11:30

12:30

Neues für Webentwickler in VS 2015 und den Web Essentials
Bernd Mayer

Betrieb und Wartung von Webapplikationen

Patric Boscolo

12:30

13:30

ASP.NET 5: Was ist anders, was ist neu?
Christian Wenz

Application Insights
Artur Speth

13:30

14:30

Lunch Break – Visit the Microsoft TechTruck

14:30

15:30

AngularJS & ASP.NET: Cross-Platform Smart Clients im Browser

Christian Weyer

Azure Machine Learning für Webseiten
Olivia Klose

15:30

16:30

Bereitstellung moderner Web- und Mobile-Apps mit den Azure App Services

Holger Sirtl

Docker
Dariusz Parys

16:30

17:00

Break – Visit the Microsoft TechTruck

17:00

18:00

NuGet, Gem, Bower, NPM, Paket, Chocolatey & OneGet – Päckchen hier, Päckchen da

Daniel Fisher

Verdammt, ich wurde gehackt 2015
Bernd Mayer & Patric Boscolo

18:00

18:15

CLOSING NOTE

Im Anschluss

Get Together & Public Viewing des Project Spartan Web Summits im Microsoft TechTruck

 

Hier geht es zur Anmeldung

https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032621684&Culture=de-DE&community=0