Kategorien
Design Design-News Developer-News Programmierung

StickyStack, Colofilter, Heisenberg und mehr: 5 interessante Designhelfer

Bei meinen täglichen Tieftauchgängen im Netz der Netze komme ich naturgemäß an unzählig vielen Korallen, Meeresbewohnern, Schwebepartikeln und was sich sonst noch alles dort tummelt vorbei. Ich dachte mir, es könnte dich interessieren, was schlussendlich in meinem virtuellen Schleppnetz hängen bleibt. Da ich sehr selektiv fische, ist der Beifang gering. Diese Designhelfer sind mir ins Netz gegangen.

StickyStack, Colofilter, Heisenberg und mehr: 5 interessante Designhelfer

Tools für Design und Development: Mehr Spreu als Weizen

Die Spreu vom Weizen zu trennen wird immer schwieriger. Jedenfalls erscheint es mir nach fast zehn Jahren Dr. Web so. Vielleicht werde ich einfach nur alt. Aber ist es nicht auch dein Empfinden, dass es immer mehr Tools und Tühlchen in immer größerer Zahl und in immer kürzerer Frequenz gibt? Den Überblick kann man eventuell gerade noch behalten, aber das Nützliche vom Nutzlosen zu trennen oder wenigstens das Interessante vom Langweiligen fällt zunehmend schwerer.

Die folgenden fünf recht frischen Kontributionen aus dem Meer der Design-und Development-Branche finde ich erwähnenswert:

StickyStack.js: OnePager als Kartenstapel

StickyStack von Mike Zarandona ist ein jQuery-Plugin, mit dessen Hilfe du eine Website wie eine Slideshow wirken lässt. Keine Sorge, ich meine nicht den Powerpoint-Style der Neunziger, sondern viel eher den auch bei Parallax-Websites häufig eingesetzten Effekt, dass der reinschrollende Inhalt den vorherigen überlagert – eben als würde man eine Karte über eine andere schieben. Bei StickyStack.js kommt eine neue Karte immer dann ins Bild, wenn die vorherige den oberen Rand des Viewports erreicht hat. Einfach, aber clever.

StickyStack, Colofilter, Heisenberg und mehr: 5 interessante Designhelfer

Demo | Github

Colofilter.css: Farbenfrohe Fotofilter im Duotone-Look

Lucas Bonomi aus Paris beschert uns ein Stylesheet, mit dem sich krasse Farbfilter auf Fotos legen und dynamisch ändern lassen. Dafür verwendet er CSS Filter und den Mixblendmode, womit Nutzer von Microsoft Browsern, dem Opera Mini und Safari außen vor sind. Ein Polyfill ist in Arbeit, bis dahin sehen diese Besucher halt nur ungefilterte Bilder.

StickyStack, Colofilter, Heisenberg und mehr: 5 interessante Designhelfer

Demo | Github

Heisenberg Ipsum: Blindtexte für Fans von Breaking Bad

Immer noch ist das klassische Lorem Ipsum der meistgenutzte Blindtext im Netz. Langweiliger geht es kaum. Da ist es kein Wunder, dass sich etliche Entwickler Alternativen überlegt haben. Eine dieser Alternativen ist Heisenberg Ipsum, ein Blindtext-Generator für Fans von Breaking Bad. Wähle deinen Lieblingscharakter, mach eine Vorgabe zur Länge des Blindtexts und schon erhälst du eine Textpassage, die sich gewaschen hat.

StickyStack, Colofilter, Heisenberg und mehr: 5 interessante Designhelfer

Heisenberg Ipsum

Feature.js: Schnell und sicher Features erkennen lassen

Feature Detection ist der sicherste Weg, Nutzern nur Funktionalität anzudienen, die sie auch wirklich haben und anderenfalls ein Fallback für nicht unterstützte Features einzusetzen. Feature.js leistet recht zuverlässige Dienste und ist dabei nur 1kb schwer. Entwickler Viljami Salminen aus Menlo Park in Kalifornien bietet mit seinem kleinen JavaScript, welches keine weiteren Abhängigkeiten hat, neben der funktionierenden Lösungen auch eine gute Dokumentation mit etlichen Beispielen. Das ist selten heutzutage…

StickyStack, Colofilter, Heisenberg und mehr: 5 interessante Designhelfer

Demo | Github

Codepad: Da werden Sie geholfen

Codepad ist ein neuer Treffpunkt für Entwickler und Designer. Hier kannst du Codeschnipsel teilen und Kommentare dazu anfordern. Vielleicht ist deine Lösung doch nicht die beste. Andere Teilnehmer helfen dir weiter und du ihnen. Codepad ist Geben und Nehmen. Wie früher, zu den guten alten BBS-Zeiten. Codepad befasst sich mit allen gängigen und weniger gängigen (Hallo ColdFusion) Sprachen.

StickyStack, Colofilter, Heisenberg und mehr: 5 interessante Designhelfer

Codepad.co

Kategorien
Design Editoren HTML/CSS JavaScript & jQuery Programmierung Sonstige Programme Webdesign

Adobe: Flash ist tot, es lebe Animate CC

Ende letzten Jahres wurde angekündigt, dass Anfang 2016 Schluss sein soll mit Adobe Flash. Zumindest der Name sollte aus der ehemals beliebten Anwendung verschwinden, die damit auch ihren Schwerpunkt auf andere, offene und zeitgemäße Formate verschieben soll. Jetzt hat Adobe Ernst gemacht und das Nachfolgeprodukt namens Animate CC an den Start gebracht. Wir haben es uns genauer angeschaut. Um es vorwegzunehmen: Flash ist nicht so richtig tot, es spielt nur keine große Rolle mehr.

Adobe: Flash ist tot, es lebe Animate CC

HTML5 Canvas und WebGL

Wer Flash CC tatsächlich noch installiert hatte, bei dem wird es sich mit einem Update automatisch verabschieden. Denn das alte Flash CC wird durch das neue Animate CC ersetzt. Aber um allzu große Veränderungen muss sich niemand Sorgen machen. Beim Öffnen von Animate CC stellst du schnell fest, dass das Allermeiste doch beim Alten geblieben ist: Die Bühne und Zeitleiste sind ebenso geblieben, wie die restlichen Arbeitsbereiche.

animate-cc_buehne-zeitleiste
Gewohnte Bereiche: Bühne und Zeitleiste

Auch die Dateiendung „.fla“ ist geblieben, um Projekte zu speichern. Die erste große Neuerung entdeckst du, wenn du ein neues Dokument anlegst. Beim Dokumenttyp werden dir noch vor verschiedenen ActionScript- und AIR-Dokumenten die beiden Formate HTML5 Canvas und WebGL vorgeschlagen – beides zeitgemäße Formate, die von allen modernen Browsern unterstützt werden.

animate-cc_neu
HTML5 Canvas und WebGL stehen nun im Mittelpunkt

Hast du dich für eines der Formate entschieden, legst du wie gewohnt los. Das Schöne am neuen Animate CC ist, dass (ehemalige) Flash-Entwickler sich schnell zurechtfinden, da sich ansonsten wenig geändert hat. Du kannst Grafiken und Texte auf der Bühne platzieren, Movieclips und Schaltflächen erstellen, Instanzen anlegen und Animationen auf die Zeitleiste bringen.

Auswahl der richtigen Scriptsprache: ActionScript oder JavaScript

Das Besondere an Flash war immer die eigene Programmiersprache ActionScript, mit der du Animationen steuern und Funktionen ausführen konntest. ActionScript steht dir weiterhin zur Verfügung. Aber mit den neuen Formaten HTML5 Canvas und WebGL ist vor allem JavaScript gefragt. Über das Aktionenfenster kümmerst du dich weiterhin um deine Programmierung – sei es in mit ActionScript oder JavaScript.

animate-cc_aktionen
ActionScript oder JavaScript für HTML5 Canvas und WebGL

Für viele oft genutzte Funktionen stellt dir Animate CC eine ganze Reihe von Codefragmenten zur Verfügung. Diese sind nun gegliedert in ActionScript, HTML5 Canvas und WebGL. Zu den Codefragmenten gehören Aktionen zum Öffnen von Websites, sowie zur Steuerung von Animationen. Du wählst einfach ein Fragment aus, welches in der Zeitleiste oder auf ein Objekt angewendet wird.

Außerdem steht dir für HTML5-Canvas-Projekte das Framework CreateJS zur Verfügung. Hiermit erstellst du komplexe Formen und Animationen direkt per JavaScript.

Veröffentlichen von Animate-Projekten

Wie schon bei Flash muss beim neuen Animate CC dein fertiges Projekt veröffentlicht werden. Hierzu generiert Animate CC ein HTML-Dokument und die dazugehörigen Dateien. Hast du HTML5 Canvas gewählt, wird neben dem HTML-Dokument, welches das Canvas-Element enthält, eine JavaScript-Datei mit der Programmierung erstellt.

Bei WebGL werden mehrere Dateien angelegt. Neben dem HTML-Dokument ist eine WebGL-Bibliothek erforderlich, die durch Animate CC erstellt wird, sowie verschiedene JSON-Objekte und Grafikdateien.

animate-cc_veroeffentlichen
Veröffentlichungseinstellungen für HTML5 Canvas

Wenn du zunächst erst einmal die beiden neuen Formate HTML5 Canvas und WebGL kennen lernen möchtest, findest du einige Vorlagen, die du zum Erstellen neuer Dokumente verwenden kannst.

Animate CC jetzt mit Typekit und Adobe Stock

Zu den weiteren Neuerungen von Animate CC gehört, dass die beiden Adobe-Dienste Typekit und Adobe Stock ein fester Bestandteil von Animate CC geworden sind. Wurden bei Flash Schriften einfach eingebettet, müssen bei den neuen Formaten Webschriften her. Hier bietet es sich natürlich an, dass Adobe seinen eigenen Schriftendienst Typekit integriert.

Zu seiner Nutzung musst du einfach die URL der Website angeben, auf der das Projekt zu finden ist. Animate CC bindet dann automatisch die aus Typekit gewählten Schriften ein. Die Verwendung von Adobe Stock funktioniert ähnlich wie in anderen CC-Anwendungen. Du wählst direkt aus der Anwendung heraus ein Bild aus Adobe Stock und platzierst es in deinem Dokument.

Und Flash gibt es auch noch

Zu guter Letzt sei noch erwähnt, dass du natürlich weiterhin ganz klassisch Flash-Inhalte entwickeln kannst. Auch wenn das Flash-Format keine große Rolle mehr spielt, ist es noch nicht tot. Zumindest im Bereich der Spiele-Entwicklung hat es derzeit noch einen gewissen Stellenwert. So sind ein Großteil der Facebook-Spiele beispielsweise noch mit Flash realisiert.

Aber es ist nur eine Frage der Zeit, bis Flash gänzlich verschwindet. Einen Schritt dorthin ist Adobe mit seinem neuen Animate CC gegangen.

Hast du es dir schon angeschaut? Was hälst du persönlich davon?

(dpe)

Kategorien
Developer-News Programmierung

Universeller Code-Editor: Sublime Text ist zurück

Kannst du dich noch an die Glanzzeiten des universellen Code-Editors Sublime Text erinnern? Vor drei bis vier Jahren galt die Software, die es für Windows, Mac OSX und Ubuntu gibt, als nahezu alternativlos und konnte sich vor Lobpreisungen kaum retten. Dann sank ihr Stern und es wurde ganz ruhig um den einstigen Hoffnungsträger. Jetzt scheint Sublime Text der Phönix sein zu wollen, der aus der Asche steigt. Ich bin gespannt.

Universeller Code-Editor: Sublime Text ist zurück

Sublime Text: Aufstieg und Niedergang

Sublime Text war einmal der Lieblings-Editor des Dr. Web-Teams. Unzählige Texte sind unter Verwendung des universellen Code-Editors entstanden. Peter Müller erklärte an dieser Stelle, wie sich Sublime Text mit Markdown nutzen lässt und befand sogar, dass es sich in dieser Kombination um ein Dreamteam handelte. Auch Entwickler Sven Schannak stellte Sublime Text ein gutes Zeugnis aus.

Bis 2013 schien Sublime Text auf dem aufsteigenden Ast zu sein. Dann kam Sand ins Getriebe, als mit der vollständig neuen Version 3 versucht wurde, neue Wege zu gehen. Die wenigen Neuerungen der Version 3 gegenüber der Version 2 waren vielen Nutzern den doch recht happigen Update-Obolus nicht wert. Zudem stieß die Inkompatibilität zu den Erweiterungen für die Version 2 nur auf ganz wenig Verständnis. Immerhin sind es gerade die Erweiterungen, die die Leistungsfähigkeit und den darauf basierenden Erfolg des Editors geschürt haben.

Und so dümpelte Sublime Text 3 mehr oder weniger unbeachtet vor sich hin, während die Version 2 weiterhin die erfolgreichere Variante blieb. Bis heute kann man die Version 2 downloaden und nutzen. Das letzte Update sah diese Version allerdings am 8. Juli 2013, also vor fast drei Jahren. Sublime Text 3 blieb in der Beta stecken und hat diesen Status bis zum heutigen Tage nicht verlassen. Die Update-Frequenz war enttäuschend. Zuletzt erhielt der Editor am 26. März 2015, mithin vor fast einem Jahr ein Update, das man ehrlicherweise eher als Bugfix bezeichnen muss.

Universeller Code-Editor: Sublime Text ist zurück

Sublime Text: Rückkehr eines Totgeglaubten

Gestern dann machte Sublime-Text-Mastermind Jon Skinner mit einem unscheinbaren Blogeintrag von sich reden, obwohl dieser vordergründig bloß ein weiteres Update des Editors verkündigen sollte. Man könnte also sagen, das sei nichts besonderes. Immerhin gab es diese sporadischen Mikro-Updates immer wieder mal.

Dass dieses Mal alles anders sein könnte, lässt sich jedoch zwei weiteren Informationsschnipseln aus dem genannten Blogeintrag entnehmen. Zum einen begrüßt Skinner darin ein weiteres Team-Mitglied und zum anderen eröffnet er ein neues Forum. Beides spricht nicht für die Fortführung der bisher eher als  lethargisch zu bezeichnenden Innovationsgeschwindigkeit.

Inhaltlich kann das neue Update mit einem deutlich verbesserten Syntax-Highlighting aufwarten. Skinner scheint sich auf die vormaligen Stärken zu besinnen. Hoffen wir gemeinsam, dass es sich nicht bloß um ein Strohfeuer handelt. Ich würde mich freuen, sollte es Sublime Text gelingen, zu alter Stärke zurück zu kehren.

Hier geht es zum Download, der nach wie vor für die Plattformen Windows, Mac OSX und Ubuntu bei identischer Funktionalität geboten ist.

Kategorien
Design Design-News Developer-News HTML/CSS Programmierung

CSS Custom Properties: So nutzt du Variablen in Chrome 49

Chrome unterstützt ab Version 49 CSS Variablen in der Form der CSS Custom Properties. Damit wird ein zentrales Element rationeller Programmierung ohne weitere Zusätze im Browser Wirklichkeit. Der Einsatz ist recht einfach.

CSS Custom Properties: So nutzt du Variablen in Chrome 49

Variablen: zentrales Element strukturierter Programmierung

Variablen sind aus der professionellen Programmierung nicht weg zu denken. Man stelle sich vor, man müsste die Werte, die als Variablen an zentraler Stelle verwaltet werden, tatsächlich an jedem Verwendungsort neu definieren. Selbst mit professionellen Entwicklungswerkzeugen würde das Suchen und Ersetzen im Falle von Änderungsbedarfen reichlich aufwändig werden. Mit CSS war jedoch genau dieses Vorgehen bislang unumgänglich.

Erst mit Chrome 49 unterstützt Googles Browser Variablen in der Form der CSS Custom Properties auch für die Erstellung von Stylesheets. Und das ist erwartungsgemäß sehr praktisch. Man wird sich nicht mehr davon trennen wollen, wenn man sich erstmal dran gewöhnt hat.

CSS Custom Properties: Das (und mehr) kannst du mit CSS Variablen machen

CSS Custom Properties sind praktisch für viele Zwecke. Auf Anhieb verständlich, und deshalb verwende ich das Beispiel hier auch, ist die seitenweite Änderung von Farbwerten. CSS an sich ist ja schon eine Erleichterung in dieser Hinsicht. Wenn ich mich an meine ersten Designs in den Neunzigern zurück erinnere, wird mir jetzt noch flau. Ohne CSS setzte ich Farben an jedem HTML-Element neu. Wenn der Kunde das Farbset änderte, war ich teils tagelang in Aktion, um händisch die ganzen Werte zu suchen, zu finden und zu ersetzen.

Aber auch mit CSS kann eine Änderung komplexerer Farbschemen bei vielen Definitionen schnell unüberschaubar werden. Hier helfen CSS Variablen massiv. Für den visuellen Lesertypen binde ich einfach an dieser Stelle mal das GIF ein, das Google selber im Chromium-Blog zur Ankündigung der neuen Features verwendet hat:

css-custom-properties-3

Ein Beispielcode kann etwa so aussehen:

:root {
  --main-color: #06c;
}

#foo h1 {
  color: var(--main-color);
}

Erfahrene Entwickler erkennen sofort das Prinzip. --main-color ist hier die frei definierte Variable, die Custom Property. Custom Properties beginnen stets mit zwei Bindestrichen.

Neben fixen Werten können auch Berechnungen und Bedingungen als benutzerdefinierte Eigenschaften angelegt werden. So kannst du beispielsweise in responsiven Designs auf Änderungen der Bildschirmauflösung reagieren.

Ich bin begeistert. Chrome 49 hat noch mehr neues zu bieten. Die CSS Variablen sind jedoch klar mein Favorit.

Kategorien
Developer-News JavaScript & jQuery Programmierung

Loud Links: JavaScript bringt deine Website zum Klingen

Das kleine JavaScript Loud Links bringt deine Website zum Klingen, indem es per HTML5-Audioelement Links und andere Elemente entweder bei Klick oder on Hover hörbar macht. Dazu benötigst du lediglich MP3 und OGG. Die Lösung funktioniert in allen gängigen Browsern.

Loud Links: JavaScript bringt deine Website zum Klingen

Sound auf der Website: Geschmackssache

Natürlich, natürlich. Du brauchst es nicht zu sagen. Sound auf der Website ist ja sowas von Neunziger und schon da nervte es. Ich kenne diese Meinung und sie hat ja auch ihre Berechtigung. Dennoch gibt es durchaus ebenso berechtigte Anwendungsfälle für klingende Websites. Hier bei Dr. Web haben wir uns erst kürzlich ganz grundsätzlich mit der Thematik befasst.

Loud Links ist ein kleines JavaScript aus der digitalen Feder des Rotterdamer Designers und UX-Developers Mahdi Al-Farra. Mahdi begeht regelmäßig etwas, das er Weekend Projects nennt, und Loud Links ist einer dieser durchaus interessanten Schnellschüsse, die dabei entstehen.

Loud Links: JavaScript bringt deine Website zum Klingen

Um es gleich vorweg zu sagen, Loud Links will nicht deine UI vertonen, sondern ist lediglich dazu geschaffen worden, Sounds für Interaktionen zu setzen. Genau genommen kann Loud Links nur zwei verschiedene Zustände vertonen. Du kannst Loud Links zwar grundsätzlich jedem Element auf deiner Website zuordnen, klingen werden die so behandelten Elemente aber nur entweder beim Klicken oder on Hover, also beim Darüberfahren mit der Maus.

Loud Links: JavaScript bringt deine Website zum Klingen

Die JavaScript-Bibliothek erstellt für das jeweils ausgezeichnete Element ein HTML5-Audio und verwendet MP3/Ogg-Dateien, um einen entsprechenden Sound abzuspielen. Die Verwendung ist absolut einfach, wenn man über entsprechende Soundschnipsel verfügt. Diese allerdings finden sich in den Weiten des Netzes in rauen Mengen.

Loud Links: So gehts

Um Loud Links zu verwenden legst du im Stammverzeichnis deiner Website einen Ordner an, den du sounds nennst. Innerhalb dieses Ordners erstellst du zwei weitere Ordner namens mp3 und ogg.

Nachdem du das JavaScript auf gewohnte Weise in dein HTML-Dokument integriert hast, zeichnest du diejenigen Links oder andere Elemente, die du vertonen möchtest, entweder mit der Klasse loud-link-hover oder loud-link-click aus. Über das HTML5-Data-Attribut fügst du noch den konkreten Sound hinzu, wobei du dessen Dateierweiterung nicht angibst. Also statt klang.mp3 gibst du lediglich klang ein.

Ich gebe dir zwei Beispiele:

oder

Das war es schon. Von nun an gibt deine Website bei von dir gewählten Interaktionen hörbare Rückmeldungen.

Loud Links steht auf Github zum kostenlosen Download bereit. Leider hat Mahdi bislang keine konkrete Lizenz angegeben, so dass ich nicht mit Sicherheit sagen kann, ob du Loud Links auch kommerziell verwenden darfst. Es würde mich indes überraschen, wenn es tatsächlich nicht so wäre. Sicherheitshalber frag einfach Mahdi im konkreten Fall danach.

Kategorien
JavaScript & jQuery Webdesign

A-Frame macht virtuelle Realitäten lebendig

Virtuelle Realität spielt eine immer größere Rolle im World Wide Web. JavaScript und moderne Browser machen es mittlerweile grundsätzlich möglich, dreidimensionale Welten zu erschaffen, in denen man sich bewegen kann. Mit dem JavaScript-Framework A-Frame baust du dir auf der Grundlage einer eigenen Auszeichnungssprache schnell solche virtuelle Realitäten.

A-Frame macht virtuelle Realitäten lebendig

A-Frame: JavaScript einbinden und erste 3D-Welt bauen

Zunächst einmal musst du die JavaScript-Datei von A-Frame in deinem HTML-Head einbinden. Die komprimierte Datei ist knapp 700 Kilobyte groß und beinhaltet alles, was du benötigst. Andere Bibliotheken, wie beispielsweise jQuery, sind nicht notwendig.

Anschließend beginnst du innerhalb deines HTML-Bodys eine Szenerie zu erschaffen. Da A-Frame seine eigene Auszeichnungssprache – ähnlich wie HTML – mitbringt, ist das Erstellen deiner ersten 3D-Welt spielend einfach. Zunächst einmal zeichnest du eine neue Szenerie mit dem Element „<a-scene>“ aus. Darin platzierst du beliebige 3D-Objekte wie Quader („<a-cube>“), Kugeln („<a-sphere>“) oder Zylinder („<a-cylinder>“).

<a-scene>
  <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube>
  <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
</a-scene>

Im Beispiel werden in einer Szenerie eine Kugel, ein Quader sowie ein Zylinder platziert. Über Attribute definierst du die Größe, Farbe, Position und Drehung des Objektes. Der Wert für „position“ erwartet drei Werte, um ein Objekt auf der X-, Y-, und Z-Achse im Raum platzieren zu können. „rotation“ erwartet ebenfalls drei Werte, welche die Winkel der Drehung auf den drei Achsen definieren.

aframe_beispiel_einfach
Einfaches Beispiel mit Kugel, Quader und Zylinder

Für die Größe eines Objektes stehen dir je nach Typ unterschiedliche Attribute zur Verfügung. Bei „<a-sphere>“ muss lediglich ein Radius („radius“) angegeben werden. „<a-cube>“ erwartet Angaben für die drei Kantenlängen („width“, „height“ und „depth“). Beim Zylinder gibst du einen Radius, sowie eine Höhe an („radius“ und „height“).

VR mit Smartphone, Tablet und Google Cardboard erleben

Damit der Browser die virtuelle Realität auch darstellen kann, setzt A-Frame seine spezielle Auszeichnungssprache per HTML5-Canvas um. Aus dem A-Frame-Quelltext im Beispiel wird also eine Zeichenfläche, in der das Framework mit den JavaScript-Zeichenmethoden die Szenerie ausgibt.

Wie es sich für eine echte virtuelle Welt gehört, ist die Dreidimensionalität von A-Frame nicht statisch, sondern dynamisch. Auf einem Desktop-Rechner kannst du per Maus die Perspektive der Szenerie verändern. Wirklich interessant wird es allerdings, wenn du dir deine Szenerie mit deinem Smartphone oder Tablet anschaust. Denn A-Frame interpretiert die Orientierung deines Mobilgerätes und verändert analog dazu die Perspektive der Szenerie.

aframe_beispiel_vr_cardboard
Darstellung für Google Cardboard auf einem Smartphone

Für echten 3D-Genuss kannst du auch den VR-Modus in Kombination mit Google-Cardboard nutzen. Schaust du dir eine mit A-Frame erstellte Szenerie mit einem Mobilgerät an, wechselt du über ein Icon in Form einer Brille in den VR-Modus. Dann stellt A-Frame die Szenerie auf einem geteilten Display dar. Du siehst links und rechts zweimal dieselbe Szenerie aus leicht unterschiedlichen Blickwinkeln. Setzt du dein Smartphone in Google Cardboard ein, erlebst du eine echte virtuelle Realität.

Auch mit Oculus Rift funktioniert A-Frame. Hierzu müssen derzeit aber noch experimentelle Versionen von Firefox oder Chrome installiert sein, da die derzeitigen Browser die notwendige Unterstützung von WebVR noch nicht mitliefern. In jedem Fall muss dein Browser WebGL unterstützen, um A-Frame darstellen zu können.

Animationen hinzufügen

Per „<a-animation>“ fügst du einem Objekt auf einfache Weise eine Animation hinzu. Dazu wird „<a-animation>“ als Kindelement jenes Objektes ausgezeichnet, welches animiert werden soll.

<a-cube position="-1 0.5 1" rotation="0 0 0" width="1" height="1" depth="4" color="#4CC3D9">
  <a-animation attribute="rotation" to="0 360 0" dur="10000" fill="forwards" repeat="indefinite"></a-animation>
</a-cube>

Im Beispiel dreht sich ein Quader um 360 Grad auf der Y-Achse. Dazu wird per „attribute“ die Art der Animation definiert und per „to“ das Ziel der Animation. „dur“ gibt die Länge an und „fill“ legt fest, was am Ende der Animation geschehen soll. Der Wert „forwards“ sorgt dafür, dass die Animation nicht wieder auf den Anfang zurückgesetzt wird. Per „repeat“ stellst du die Wiederholungen ein.

Eigene Kameras, Licht, Interaktivität und Materialien

A-Frame kann noch sehr viel mehr, als ich hier vorstelle. Auf Wunsch fügst du zum Beispiel auch eine eigene Kamera und eigenes Licht hinzu. Du hast die Möglichkeit, interaktive Elemente zu erstellen und Materialien hinzuzufügen. Leider ist die Dokumentation von A-Frame noch nicht vollständig. Einige der Möglichkeiten finden sich dort noch nicht wieder.

aframe_beispiel_panorama
360-Grad-Panorama als VR

Auch Bilder und Videos kannst du einbinden. So erstellst du beispielsweise ein 360-Grad-Panorama als virtuelle Realität.

Fazit

A-Frame ist ein interessantes Framework für einfache, aber auch durchaus komplere VR-Welten. Die Unterstützung von Mobilgeräten sowie Oculus Rift oder Google Cardboard ermöglicht erlebbare 3D-Szenerien. Dazu ist die Handhabe von A-Frame denkbar einfach. Während du bei anderen 3D-Frameworks per JavaScript programmieren musst, läuft hier alles sehr einfach über eine eigene Auszeichnungssprache.

Außerdem gibt es zahlreiche einfache und komplexe Beispiele, die dir die Möglichkeiten von A-Frame sehr anschaulich darstellen. A-Frame steht unter der bekannten MIT-Lizenz. Eine private sowie kommerzielle Nutzung ist somit möglich.

(dpe)

Kategorien
JavaScript & jQuery Webdesign

fullPage.js: Schnell und einfach „mehrseitige“ One-Pager erstellen

Gerade bei kleinen Webprojekten sind One-Pager sehr beliebt. Anspruchsvoll und großzügig gestaltet, sorgen sie oft für maximale Aufmerksamkeit. Mit dem jQuery-Plugin fullPage.js erstellst du auf einfache Weise „mehrseitige“ One-Pager. Das Plugin sorgt dafür, dass einzelne Bereiche eines HTML-Dokumentes seitenfüllend dargestellt und per Navigation oder auch per Scrolling animiert gewechselt werden.

fullPage.js: Schnell und einfach „mehrseitige“ One-Pager erstellen

Plugin einbinden und Seiten auszeichnen

fullPage.js besteht aus je einer JavaScript- und Stylesheet-Datei, die jeweils zusammen mit jQuery eingebunden werden muss. Für zusätzliche Animationseffekte bei den Übergängen zwischen den Seiten kann optional das Easings-Plugin von jQuery UI integriert werden.

fullpagejs1

Anschließend zeichnest du ein HTML-Dokument mit deinen Seiten aus. Dazu benötigt fullPage.js einen Container mit einer ID – zum Beispiel „fullpage“. Darin definierst du für jede Seite einen Container mit der Klasse „section“. Das Plugin stellt alle Container seitenfüllend untereinander dar. Die erste Seite ist dabei standardmäßig beim Seitenaufruf sichtbar.

<div id="fullpage">
  <div class="section">Seite 1</div>
  <div class="section">Seite 2</div>
  <div class="section">Seite 3</div>
</div>

Anschließend muss per JavaScript das Plugin gestartet und die ID übergeben werden.

$(document).ready(function() {
  $("#fullpage").fullpage();
});

Standardmäßig wird beim Scrollen nach unten die erste Seite über eine einfache Slide-Animation nach oben aus- und die nächste Seite von unten eingeblendet.

Aussehen und Funktionalität steuern

fullpagejs2
Animierter Übergang zur nächsten Seite

Das Plugin stellt eine Vielzahl von Optionen zur Verfügung, mit denen du das Aussehen und die Funktionalität des Plugins anpasst. So hast du die Möglichkeit, Hintergrundfarben der einzelnen Seiten, sowie den Abstand zum Seitenrand über das Plugin anzugeben.

$(document).ready(function() {
  $("#fullpage").fullpage({
    sectionsColor: ["#ccc", "#fff", "#333"],
    paddingTop: "10px",
    paddingBottom: "20px"
  });
});

Mit der Option „sectionsColor“ definierst du über ein Objektliteral die Hintergrundfarbe für alle Abschnitte beziehungsweise Seiten. Mit „paddingTop“ und „paddingBottom“ legst du Abstände oben und unten fest.

Navigation steuern

Willst du eine andere als die erste Seite beim Aufruf der Seite anzeigen lassen, kannst du über die zusätzliche Klasse „active“ einen beliebigen Bereich so auszeichnen. Dieser Bereich wird dann immer dargestellt, wenn du die Seite lädst. Von dort kannst du dann wie gewohnt die anderen Seiten ansteuern.

<div id="fullpage">
  <div class="section">Seite 1</div>
  <div class="section active">Seite 2</div>
  <div class="section">Seite 3</div>
</div>

Außerdem hast du die Möglichkeit, eine Navigation zu erstellen, mit der du jede Seite direkt erreichst. Die Navigation erstellst du manuell innerhalb eines eigenen Containers. Jedem Menüpunkt, der auf einen Bereich verweisen soll, muss das Attribut „data-menuanchor“ mit je einem eindeutigen Wert zugewiesen werden. Der eigentliche Link enthält ebenfalls den Ankernamen als seiteninternen Verweis.

<div id="menu">
  <ul>
  <li data-menuanchor="seite1"><a href="#seite1">Seite 1</a></li>
  </il>
</div>

Innerhalb der Optionen des Plugins vergibst du über den Parameter „anchors“ ebenfalls die Ankerbezeichnungen. Außerdem gibst du über den Parameter „menu“ die ID des Menüs an.

$(document).ready(function() {
  $("#fullpage").fullpage({
    menu: "#menu",
    anchor: ["seite1", "seite2", "seite3"]
  );
});

Anschließend navigierst du nicht nur per Scrolling, sondern ganz bequem auch über eine „normale“ Navigation durch die Seiten. Die animierten Übergänge bleiben natürlich erhalten.

Zusätzliche horizontale Seitenebene hinzufügen

fullpagejs3
Zweite Ebene für zusätzliche Inhalte

Wenn dir die einfache Seitenstruktur nicht ausreicht, kannst du einfach eine zweite Ebene mit Inhalten hinzufügen. Während die erste Ebene vertikal aufgebaut ist, ist die zweite Ebene horizontal angeordnet – als sogenannte Slides. Du scrollst also nach unten, um durch die Seiten erster Ebene zu steuern und nach rechts für die untergliederten Seiten beziehungsweise Slides. Im Quelltext zeichnest du solche zusätzlichen Seiten mit einem eigenen Container und der Klasse „slide“ aus.

<div id="fullpage">
  <div class="section">Seite 1</div>
  <div class="section">
    <div class="slide">Seite 2.1</div>
    <div class="slide">Seite 2.2</div>
  </div>
  <div class="section">Seite 3</div>
</div>

Im Beispiel scrollst du also von Seite 1 nach unten auf Seite 2.1. Hier stellt dir das Plugin Steuerungspfeile zur Verfügung, mit denen du nach rechts auf Seite 2.2 und wieder nach links auf Seite 2.1 wechseln kannst.

Fazit

fullPage.js ist ein sehr einfaches und dennoch eindrucksvolles Tool, um Inhalte eines One-Pagers seitenfüllend darzustellen und strukturieren zu können. Dank der zusätzlichen zweiten Ebene bringst du auch durchaus komplexe Inhalte ansprechend unter. Das Plugin eignet sich somit auch prima, um Präsentationen im Browser halten zu können.

Die Einstellungsmöglichkeiten sind sehr vielfältig. Eine umfangreiche Dokumentation verrät dir sehr anschaulich, was alles möglich ist. Die Animationen basieren zeitgemäß auf CSS3. fullPage.js läuft in allen modernen Browsern und sogar im Internet Explorer ab Version 8. Außerdem ist es auch für Mobilgeräte wie Tablets geeignet.

Das ganze Plugin steht unter der MIT-Lizenz, welche dir vielfältige – auch kommerzielle – Einsätze gestattet. Das Downloadpaket beinhaltet zudem mehrere Beispiele, an denen du dich direkt versuchen kannst.

(dpe)

Kategorien
Apps

Appkind: Mobile Apps im Abo-Modell

Die mobile Internetnutzung verdoppelt sich Jahr für Jahr und so verwundert es kaum, dass die eigene App Wunsch und Ziel vieler Unternehmer ist. Hauptproblem ist dabei nicht einmal der Preis, sondern eher die Verfügbarkeit des passenden Programmierers. Die guten Programmierer sind nämlich alle satt im Geschäft. Appkind möchte beide Probleme lösen und bietet die Produktion einer einzigartigen App bei Bezahlung auf monatlicher Basis an. Wir haben den Service getestet und stellen die Möglichkeiten vor.

Appkind: Mobile Apps im Abo-Modell

Übersicht

Die App wird für IOS und Android umgesetzt, wobei appkind die komplette Gestaltung (auch der Inhalte) vornimmt. Im Detail geht es um das Design des App-Icons, über den Startbildschirm bis hin zu den Inhalten: alles aus einem Guss, passend zum Corporate Design des Unternehmens. Das eigene Logo, sowie die Unternehmensfarben sind dabei die Vorlage.

appkind-teaser

Die App präsentiert dann Inhalte wie etwa Texte, Bilder, Videos, Produkte, Formulare und Karten (auf Google Maps-Basis). Eine Schnellkontaktoption bietet Optionen zum Anrufen, zum Schreiben einer E-Mail, dem Besuch der Website oder Zugang zu den Social Media-Accounts. News können per RSS ausgelesen und mitels Facebook oder Mail vom Unternehmer gesendet werden. Dabei werden App-typische Features, wie etwa die Push-Funktion, unterstützt.

appkind1

Preismodelle

Vor der Gestaltung der eigenen App entscheiden wir uns für ein Preismodell, wobei diese sich nur in wenigen Punkten unterscheiden. Generell enthalten sind Design und Programmierung, die Integration aller Inhalte, die Pushletter-Funktion sowie das Sammeln von Daten und deren Präsentation als Statistiken. Wichtige Designupdates für kommende Smartphones sind ebenso Bestandteil wie eine Chat-Option nebst CRM zum Kontakt mit den Kunden. Ein gutes Angebot, das als Appkind Go beschrieben wird. Diese Basis kostet 29,95 Euro pro Monat, bei 49 Euro einmaliger Einrichtungsgebühr.

Appkind Go+ bietet zusätzlich ein Marketing-Set, das ein Poster sowie 100 Flyer zur Bewerbung der neuen App beinhaltet, sowie eine Kalenderfunktion für Termine. Die monatliche Gebühr erhöht sich dafür auf 59,95 Euro, die einmalige Einrichtung auf 99 Euro.

Die Laufzeit beträgt bei beiden Paketen immer 12 Monate.

Der Start mit Appkind

Nach der Anmeldung (E-Mail und Passwort reichen zunächst) und einer schnellen Mail-Bestätigung führt die Website Schritt für Schritt zum Ziel: die eigene App. Nach Angabe weniger Kundendaten (im Prinzip reicht die Adresse) ist der Button Neue App bestellen aktiv.

Nach dem Registrieren (oder gar der Bestellung) nimmt ein Mitarbeiter des Unternehmens Kontakt auf, um alle weiteren Schritte zu besprechen, Möglichkeiten aufzuzeigen und um ganz persönlich und individuell zu beraten.

Wer mag, geht dann über Jetzt App anlegen weiter. Wir geben die Basisdaten an, wie etwa den Namen der App (2 bis 30 Zeichen), die Bezeichnung unter dem App-Icon (höchstens 11 Zeichen) und eine aussagekräftige Beschreibung zu den gebotenen Inhalten. Sehr schön ist der Fortschrittsbalken der uns anzeigt, wie weit es noch zur eigenen App ist. 25% sind damit schon geschafft!

Jetzt geht es an die Kontaktdaten in der App: mindestens eine muss genannt werden. Ich biete mit Adresse, Telefonnummer, E-Mail sowie einigen Social Media-Seiten (Facebook, Google+ und Twitter) alles an, um den Kontakt zu erleichtern. Es folgen die Newsquellen, wie etwa die Website, eine Facebook-Seite oder per E-Mail. Ist das erledigt, können wir die Menüpunkte auswählen. Ich entscheide mich für die Klassiker Impressum, Kontakt, Über uns und News. Damit sind wir fertig und haben alle nötigen Informationen zum Start eingegeben.

appkind3

Zur Erstellung meiner App werden natürlich einige Dateien und Vorlagen benötigt, die etwa in Form von Logo-Dateien, Texte, Flyer und Fotos hochgeladen werden können. Ich biete da ein Logo in zwei Versionen an, ein Hintergrundbild sowie einen kurzen Text für den Über uns-Bereich. Damit ist meine Arbeit getan. Klar: Nicht immer hat man gleich alle Dateien parat, was aber auch kein Problem darstellt. An dieser Stelle erfolgt eine zweite Kontaktaufnahme eines Appkind-Mitarbeiters, um über das Telefon oder per Mail zur Seite zu stehen.

Jeder Kunde wird also ganz individuell über die Inhalte und Möglichkeiten der eigenen App beraten und das bei jedem wichtigen Schritt zur Erstellung.

Yeah! Deine App ist fertig

Nach nur vier Werktagen erhalte ich eine Freigabevorschau per E-Mail mit einem ersten Eindruck und der Möglichkeit, die App zu beurteilen. Diese wird in einer Smartphone-Simulation im Browser* präsentiert: sozusagen im Live-Betrieb. Natürlich entspricht diese Simulation nicht ganz der App, da einige Funktionen erst auf dem Smartphone funktionieren werden. Trotzdem ist diese Darstellung für eine Beurteilung ideal und absolut ausreichend, von Kleinigkeiten wie dem Abweichen der Schriftgröße oder möglichen Scrollbalken, je nach eingesetztem Browser, abgesehen.

In naher Zukunft soll es aber eine mobile Vorschau geben, welche direkt auf dem Smartphone geöffnet wird, was die Vorschau noch einmal wertiger und dann absolut realistisch macht. (*Unter Chrome, Safari, Firefox und Internet Explorer bekommen wir derzeit etwas zu sehen, so der Anbieter)

appkind4

Statt sofort freizugeben, wähle ich erst einmal den Eintrag Nicht freigeben an und kann nun meine Änderungswünsche auflisten. Oben, links rufe ich das Menü auf, wie zuvor definiert. Zunächst möchte ich da gerne einige Menü-Namen ändern, sowie einen Text bei „Über uns“ noch leicht anpassen. Kleinigkeiten also. Sofort setzt sich das Unternehmen mit mir in Verbindung, erfragt die Änderungswünsche im Detail und zeigt den weiteren Ablauf auf.

Die erste eigene App

Zwei Tage später erhalte ich wieder eine E-Mail mit der Aufforderung, die Änderungen zu begutachten. Ich bin zufrieden und gebe die App frei. Mit der Nachricht „Ihre App wurde erfolgreich freigeben“ ist die Erstellung abgeschlossen und es erfolgt der Upload in die Stores. Dabei ist die Android-App nach nur 2-3 Werktagen verfügbar, die Apple-App dagegen erst nach 7-9 Werktagen, da Apple die Apps von Hand testet.

Unser Fazit

Appkind bietet uns einen recht einfachen Weg hin zur eigenen App, wobei Service hier wirklich großgeschrieben wird. Der Kontakt zum Kunden wird stetig gehalten und Änderungswünsche umgehend umgesetzt. Das hat seinen berechtigten Preis, der aber auch auf die Laufzeit aufgeteilt wird, so dass praktisch jedes Unternehmen unkompliziert und schnell zur eigenen App kommt.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

mo.js: JavaScript-Framework für komplexe Animationen

Dank CSS3 und JavaScript sind die Grundlagen für native und anspruchsvolle Animationen im Browser gesetzt. Doch die CSS-Eigenschaften und JavaScript-Methoden erlauben nur grundsätzliche Bewegungen. Das Framework mo.js hingegen ermöglicht wesentlich komplexere Animationen – vor allem mit Hilfe sehr individueller und einfach zu erstellender Easing-Funktionen.

mo.js: JavaScript-Framework für komplexe Animationen

Schneller Einstieg, aber noch keine Dokumentation

Da mo.js ohne jQuery oder andere Bibliotheken auskommt, muss lediglich die JavaScript-Datei des Frameworks eingebunden werden. Im Download-Paket ist ein Demo-HTML-Dokument vorhanden, indem die JavaScript-Datei sowie ein „<div>“-Element bereits ausgezeichnet sind. Du kannst damit also direkt starten und dich mit den Möglichkeiten von mo.js auseinandersetzen.

Auf der Website gibt es einige Tutorials, die anhand von Code-Beispielen samt Demo erläutern, was mo.js kann und wie man es anwendet. Leider gibt es derzeit nur Tutorials zu den Easing-Möglichkeiten. Von den verschiedenen Modulen und den Tweening-Funktionen sind derzeit noch keine Tutorials vorrätig. Außerdem fehlt noch eine Dokumentation. Doch alleine das individuelle Erstellen komplexer Easing-Funktionen macht mo.js bereits zu einem äußerst interessanten Animationswerkzeug.

mojs_tutorials
Tutorial-Seite

Einfache Syntax für einfache Animationen

Die Verwendung von mo.js ist sehr einfach. Mit „mojs.Tween()“ kannst du eine neue Animation erstellen und einem beliebigen Element zuweisen. Die Anzahl der Wiederholungen und Dauer der Animation werden über Parameter übergeben. Per Event-Handler steuerst du du eigentliche Animation.

new mojs.Tween({
  repeat: 2,
  duration: 3000,
  delay: 1000,
  onUpdate: function (progress) {
    document.getElementsByTagName("div")[0].style.transform = "translateY(" + 200 * progress + "px)";
 }
}).run();

Im Beispiel wird eine Animation mit drei Sekunden Dauer erstellt, die nach einer Sekunde startet und sich zweimal wiederholt. Über „onUpdate()“ rufen wir eine Funktion auf, welche für die eigentliche Animation zuständig ist. Per „progress“ wird der Fortschritt der Animation übergeben. Hierbei handelt es sich um einen Wert, der im Laufe der Animation von 0 zu 1 hochzählt.

Dieser Wert dient im Beispiel dazu, die Animation zu berechnen. Dazu wird „progress“ mit dem Zielwert der Animation – im Beispiel 200 – multipliziert. Das „<div>“-Element bewegt sich also per „translateY()“ auf der Y-Achse um 200 Pixel.

Easing mit Pfaden erstellen

Mit CSS3 sind eine Reihe von Easing-Funktionen für Animationen eingeführt worden. Insgesamt stehen einem nur fünf verschiedene, einfach gehaltene Möglichkeiten zur Verfügung: „linear“, „ease“, „ease-in“, „ease-out“ und „ease-in-out“. Mit „cubic-bezier()“ hast zu zudem noch die Möglichkeit, ein individuelles Easing anhand einer Bézierkurve zu erstellen.

mojs_easing
Pfad als Grundlage fürs Easing

Mit mo.js kannst du jedoch ein komplett individuelles Easing mit beliebig vielen Beschleunigungen und Abbremsungen entwickeln. Diese werden anhand eines Pfades auf der Basis des SVG-Elementes „<path>“ definiert. Du zeicnest also beispielsweise in Illustrator einen Pfad und speicherst ihn im SVG-Format. Die Werte des Pfades, die in der „d“-Eigenschaft ausgezeichnet sind, nutzt du anschließend, um die als Grundlage für dein Easing zu verwenden.

var bouncyEasing = mojs.easing.path("M0,100 C6.50461245,96.8525391 …");

Im Beispiel wird per „mojs.easing.path()“ ein SVG-Pfad als Easing-Pfad übergeben. Diesen übergeben wir dann einer Funktion, die das Easing eines Elementes per CSS-Eigenschaft „transform“ umsetzt.

new mojs.Tween({
  onUpdate: function (progress) {
    var bounceProgress = bouncyEasing(progress);
    document.getElementsByTagName("div")[0].style.transform = "translateY(" + 200 * bounceProgress + "px)";
  }
}).run();

Im Beispiel wird ein „<div>“-Element mit dem individuellen Easing auf der Y-Achse dank „translateY()“ animiert. Statt einer linearen Animation wie im ersten Beispiel kannst du beliebig viele Abbremsungen und Beschleunigungen sowie Federungen einbauen. So lässt sich mit einem entsprechend gezeichneten Pfad also auch die Richtung der Bewegung umkehren. Bei den klassischen CSS3-Easing-Funktionen klappt eine Animation immer nur in eine Richtung.

Im Übrigen kannst du mit mo.js ein Element nicht nur bewegen, sondern auch die Form verändern. Per „scaleX()“ oder „scaleY()“ erreichst du zum Beispiel, dass ein Element seine Größe ändert, während es animiert wird.

Umfangreiche Animationsmöglichkeiten

Einige Beispiele auf der Website von mo.js zeigen, welche umfangreichen Animationsmöglichkeiten mo.js besitzt. Es bleibt zu hoffen, dass die Dokumentation zügig erscheint und weitere Tutorials veröffentlicht werden. Derzeit ist mo.js nur eingeschränkt nutzbar. Wer möchte, kann sich anhand der Beispiele natürlich selbst in das Framework einarbeiten.

mojs_beispiel
Komplexe Animation mit mo.js

Auch wenn derzeit noch nicht alle Funktionen dokumentiert sind, lohnt es sich, mo.js im Auge zu behalten. Das Framework steht unter der liberalen MIT-Lizenz für private und kommerzielle Zwecke zur freien Nutzung bereit.

(dpe)

Kategorien
JavaScript & jQuery Netzkultur und -politik Programmierung

So blockst du AdBlocker mit Adi.JS

Viele Versuche, kostenpflichtige Webangebote zu etablieren, sind in den letzten Jahren gescheitert. Vor allem bei Informationsangeboten wie den großen Nachrichtenportalen, aber auch hier beim vergleichsweise kleinen Dr. Web wird ganz selbstverständlich vorausgesetzt, dass alle diese Informationen kostenlos zu haben sind. Dass solche Angebote dann über Werbung finanziert werden müssen, versteht sich eigentlich von selbst. Dank diversen Adblockern kann sich aber jeder dieser Werbung ganz bequem entledigen. Das hat Folgen nicht nur für Seitenbetreiber, sondern mittlerweile auch für den Seitenbesucher.

So blockst du AdBlocker mit Adi.JS

Der schlechte Ruf der Online-Werbung

Werbung hat sich in den letzten Jahrzehnten einen durchweg schlechten Ruf erarbeitet. In Zeitungen und Magazinen ist sie meist weniger störend. Im Fernsehen und als immer umfangreicher werdende Postwurfsendung wird sie aber meist negativ wahrgenommen. Dass vor allem die Online-Werbung einen besonders schlechten Ruf hat, liegt an ihren Anfängen in den 90er Jahren, die auch das Konzept der Popup-Fenster in Verruf gebracht hat.

Schnell konnten sich Adblocker in ihrer Funktion als Popup-Blocker als Plugin im Browser etablieren.  Für viele war und ist deren Einsatz seither eine Selbstverständlichkeit. Die Beliebtheit der Adblocker hat schließlich dazu geführt, dass Werbeeinnahmen weggebrochen sind und vor allem Betreiber von Nachrichtenseiten reagieren mussten. Schließlich sind laut Angaben der Seitenbetreiber mittlerweile bis zu 25 Prozent aller Besucher mit Adblockern unterwegs sein.

adblock-plus
Weit verbreitet: Adblock Plus

Aufruf gegen Adblocker

So haben namhafte Portale wie Spiegel, Zeit und Süddeutsche im Jahr 2013 dazu aufgerufen, Adblocker zumindest für die genannten Seiten auszuschalten. Der Aufruf, der einige Wochen aufrecht gehalten wurde, schien erfolgreich gewesen zu sein. Laut Angaben der Betreiber sind die Werbeeinnahmen gestiegen.

Die Kampagne gegen die Adblocker stieß allerdings auch auf viel Kritik. Schließlich sei Online-Werbung teils sehr penetrant und zudem ein potenzielles Sicherheitsrisiko. Als Risiko dieser Art wurden komprimittierte Ad-Server sowie der Einsatz von Flash genannt. Flash als Standard für Online-Werbung wurde mittlerweile durch HTML5 abgelöst.

Adblock-Nutzer blockieren

bild-adblocker
Kein(e) Bild für Nutzer von Adblockern

Einen deutlichen Schritt weiter als die Kampagne aus dem Jahr 2013 ist der Springer-Verlag in diesem Jahr mit Bild.de gegangen. Hier werden Nutzer von Adblockern einfach komplett aus dem Angebot gesperrt. Die Website erkennt, wenn du mit einem Adblocker unterwegs bist und gibt einen wenig dezenten Hinweis, dass du deinen Adblocker für die Seite deaktivieren sollst.

Angeblich überlegen auch andere Anbieter wie Spiegel Online, ob sie ähnliche Techniken wie Bild.de einsetzen, um den Einsatz von Adblockern auf der Website verhindern zu können.

Mit Adi.js Adblocker blockieren

Wer selbst eine werbefinanzierte Website betreibt, kann mit dem kleinen Plugin Adi.js seinen eigenen Adblock-Blockierer integrieren. Das auf jQuery basierende Plugin platzierst du einfach zusammen mit der Datei „advertisement.js“ in deinem HTML-Dokument und rufst es auf.

adijs
Hinweis von Adi.js

Sobald ein Adblocker erkannt wird, erscheint ein Fenster, welches darüber informiert, dass ein Adblocker gefunden wurde. Text und Aussehen des Fensters kannst du über verschiedene Optionen individuell einstellen.

Die Datei „advertisment.js“ wird bei eingeschaltetem Adblocker nicht aufgerufen. Du kannst darin also JavaScript platzieren, welches nur dann ausgeführt werden soll, wenn Adblocker nicht aktiviert sind.

Natürlich ist Adi.js kein adäquater Ersatz für die bei Bild.de verwendete Technik. Schließlich setzt Adi.js JavaScript voraus, welches jeder halbwegs kundige Nutzer ausschalten kann.

Der richtige Umgang mit Werbung und Adblockern

Dass die Kampagne von Spiegel, Zeit und Süddeutsche seinerzeit durchaus kritisiert wurde und dass auch der radikale Weg von Bild.de viel Kritik einstecken muss, liegt am nach wie vor schlechten Image, welches Werbung hat. Zwar weiß jeder um die Bedeutung von Werbung für Seitenbetreiber. Aber es ist schon teils verständlich, dass Werbung nach wie vor sehr häufig als sehr penetrant empfunden wird.

Werbung, die sich über Inhalte legt, während man sie liest, ist kein besonders nutzerfreundlicher Weg, eine Nachrichtenseite zu finanzieren. Hier fallen vor allem die Werbevideos aus jüngerer Zeit auf, die sich nach dem Laden einer Seite über das komplette Browserfenster vergrößern und erst wieder verkleinert werden müssen.

Statt auf Radikallösungen zu setzen, sollte hier versucht werden, Werbung so einzusetzen, dass sie zwar auffällt – ohne geht es nicht –, dabei aber den Leser nicht beeinträchtigt.

Der Einsatz von Videos und Animationen ist legitim. Sobald man als Besucher diese Dinge erst wegklicken muss, um auf den Inhalt einer Website zugreifen zu können, wird es schwierig werden, Nutzer davon zu überzeugen, auf Adblocker zu verzichten. Und Mechanismen, die auf Zwang setzen, wie bei Bild.de, sind nie eine gute Lösung.

Der Einsatz von Adi.js sollte daher nur als Hinweis und freundliche Bitte verstanden werden. Das ist ebenso legitim, denn der AdBlocker, einmal eingesetzt, unterscheidet nicht zwischen nervigen, womöglich noch von selbst startenden Videos und dem „normalen“ Banner von Websites wie unserem guten alten Dr. Web. Den Schaden haben dann auch die, die auf derlei nervige Werbeformen verzichten gleichermaßen.

Kategorien
HTML/CSS JavaScript & jQuery

Trüffelschwein: Knwl.JS filtert Daten automatisch

In Texten stecken gern wichtige Informationen wie Zeit- und Ortsangaben, E-Mail-Adressen, Telefonnummern, Links und andere Datenschnipsel. Die JavaScript-Bibliothek Knwl.JS findet solche Informationen automatisch und kann sie aus dem Text filtern und zur weiteren Verarbeitung verfügbar machen. So sind mit etwas Kreativität sehr flexible Lösungen möglich. Dabei ist die Anwendung kein Hexenwerk.

Trüffelschwein: Knwl.JS filtert Daten automatisch

Knwl.JS: Plugins zum Erkennen verschiedener Inhalte

Knwl.js muss zunächst im HTML-Head eingebunden werden. Anschließend lässt sich ein beliebiger Textabschnitt auf bestimmte Inhalte durchsuchen. Dazu wird der Text direkt oder auch als Variable der Methode KnwlInstance.init() zugewiesen. Anschließend muss man sich für ein Plugin entscheiden, welches den Text nach bestimmten inhaltlichen Mustern durchsucht. Eines dieser Plugins ist date, welches nach Datumsangaben sucht.

KnwlInstant.init("Today is December 19th 2015.");
var output = KnwlInstance.get("date");

Im Beispiel wird per KnwlInstance.get() das Plug-in date aufgerufen. Es durchforstet die zuvor übergebene Zeichenkette auf Datumsangaben und gibt alle gefundenen Angaben im JSON-Format zurück.

var output = [
  {
    "year": 2015,
    "month": 8,
    "day": 11,
    "preview": "Today is August 11th 2015.","found": 2
  }
]

Die JSON-Zeichenfolge enthält nun je nach Plugin unterschiedliche Werte. Bei einem Datum wird dieses in Jahr, Monat und Tag aufgeschlüsselt zurückgegeben. Zusätzlich wird bei allen Plugins per preview der Satz übergeben, in dem der jeweilige Wert gefunden wurde. Über found wird dann rückgemeldet, an welcher Stelle im Text (in Wörtern) die entsprechende Angabe gefunden wurde.

knwljs1

Werden mehrere Daten gefunden, gibt Knwl.js diese als einzelne JSON-Objekte wider.

Datums-, Zeit- und Ortsangaben nur in Englisch

Leider erkennt Knwl.js Datums- und Zeitangaben nur dann, wenn sie in englischer Sprache hinterlegt sind. Andere Sprachen werden zumindest derzeit nicht unterstützt. Gleiches gilt für das Plugin place, welches Ländernamen in Texten erkennt.

var output = [
  {
    "place": "Germany",
    "preview": "This is Germany.","found": 2
  }
]

Ähnlich schwierig, wie Datums-, Zeit- und Ortsangaben, sind auch Telefonnummern in anderen Sprachen zu erkennen. Denn auch hierbei wird nur die übliche englische Schreibweise unterstützt.

Links und E-Mail-Adressen in jeder Sprache möglich

Trotz der ausschließlichen Unterstützung der englischen Sprache kann man Kwnl.js durchaus in deutschen Texten verwenden – zumindest dann, wenn man es nutzen möchte, um Links und E-Mail-Adressen herauszulesen.

var output = [
  {
    "link": "http://www.drweb.de/",
    "preview": "Unter http://www.drweb.de/ gibt es täglich Neues.","found": 1
  }
]

Wichtig bei der Erkennung von Links ist, dass bei diesen das jeweilige Protokoll – „http://“, „https://“ oder „ftp://“ – vorangestellt ist. Auch E-Mail-Adressen werden zuverlässig erkannt.

Eigene Plugins entwickeln

Will man das Erkennen deutschsprachiger Zeit- und Ortsangaben unterstützen, muss man selbst Hand anlegen und ein eigenes Plugin für Knwl.js entwickeln. In der Dokumentation der Bibliothek findet man dazu einen eigenen Abschnitt. Jedes Plugin wird in einer eigenen JavaScript-Datei hinterlegt.

Auf diese Weise kann man sich recht einfach eigene Plugins bauen. Natürlich sind nicht nur „Übersetzungen“ ins Deutsche möglich. Man kann auch gänzlich eigene Plugins entwickeln, welche beispielsweise metrische Maße, Währungen oder Farben aus einem Text herausfiltern.

Einige experimentelle Plugins findet man in der Dokumentation zu Knwl.js.

Fazit

Knwl.js bietet vielfältige Möglichkeiten, strukturierte Werte aus Texten herauszufiltern. Aufgrund der Fixierung auf die englische Sprache muss man zwar vieles anpassen, kann aber mit etwas Fantasie auch sehr individuelle Werte herausfinden lassen.

knwljs2
Demo zum Probieren

Neben einer Dokumentation gibt es eine Demo, bei der beliebiger Text eingegeben und per Knwl.js geparst werden kann.

(dpe)

Kategorien
JavaScript & jQuery Programmierung Sonstige Programmiersprachen

ECMAScript 6 besser verstehen: Template Strings

Willkommen zum zweiten Teil unserer Artikelserie zu ECMAScript 6. Eines der Features, das ich am neuen Microsoft Edge, der neuen Browser Rendering Engine von Microsoft, am meisten mag, ist ihre umfangreiche Unterstützung von ECMAScript 6. In dieser Serie stelle ich einige der coolen Dinge vor, die man mit ECMAScript 6 tun kann, vor allem, wenn man große Web-Anwendungen schreibt.

ECMAScript 6 besser verstehen: Template Strings

Im ersten Teil habe ich euch in das Thema Klassen und Vererbung eingeführt. In diesem Artikel konzentriere ich mich auf Template Strings, ausgehend von meinen eigenen Erfahrungen beim Erstellen von Embedded Expressions.

Eine Lösung für das „Line Return“-Problem

Wenn ich an babylon.js arbeite, habe ich mit Code für Shader zu tun. Für ein besseres Verständnis würde ich sagen, man könnte diesen Code am ehesten als einen Haufen Text beschreiben, der wie C aussieht.

Ein Beispiel dafür findet sich hier.

Das Problem bei sehr langen Texten in JavaScript ist der Zeilenwechsel. Wie oft haben wir Dinge wie diese hier geschrieben?

var myTooLongString = "A long time ago, in a galaxy far," +
                      "far away...." +
                      "It is a period of civil war." +
                      "Rebel spaceships, striking" +
                      "from a hidden base, have won" +
                      "their first victory against" + 
                      "the evil Galactic Empire.";

Bei mehr als 200 Zeilen langem Code für Shaders wird das richtig anstrengend.

Glücklicherweise besitzt ECMAScript 6 das neue Template Strings-Feature. Neben anderen schönen Erleichterungen, die dieses Feature bietet, unterstützt ein Template String vor allem direkt mehrzeilige Strings:

var myTooLongString = `A long time ago, in a galaxy far
far away....
It is a period of civil war.
Rebel spaceships, striking
from a hidden base, have won
their first victory against
the evil Galactic Empire`;

Weil innerhalb eines Template String alle Zeichen von Bedeutung sind, kann man keine Leerzeichen an den Anfang der Zeilen einfügen.

Als JavaScript-Entwickler haben wir drei Arten, um Strings zu definieren:

Und was ist daran nun ein Template?

Die Unterstützung mehrzeiligen Codes ist nicht das einzige Feature von Template Strings. So kann man Template Strings auch dafür nutzen, um Platzhalter mit Variablenwerten zu ersetzen, wie ihr es z.B. mit printf in C/C++ oder string.Format in C# sicher schon getan habt:

var items = [];
items.push("banana");
items.push("tomato");
items.push("light saber");

var total = 100.5;

result.innerHTML = `You have ${items.length} item(s) in your basket for a total of $${total}`;

Dieser Code führt zu folgender Ausgabe:

You have 3 item(s) in your basket for a total of $100.5

Ganz praktisch oder?
Hier zur Erinnerung, wie das mit ECMAScript 5 ging:

result.innerHTML = "You have " + items.length + " item(s) in your basket for a total of $" + total;

Mit Tags noch einen Schritt weiter gehen

Im letzten Schritt der Spezifikation von Template Strings geht es darum, vor dem String selbst eine eigene Funktion einzufügen (custom function), um einen Template String mit einem „Tag“ zu erstellen:

var myUselessFunction = function (strings,...values) {
    var output = "";
    for (var index = 0; index < values.length; index++) {
        output += strings[index] + values[index];
    }

    output += strings[index]
    return output;
}

result.innerHTML = myUselessFunction `You have ${items.length} item(s) in your basket for a total of $${total}`;

Die Funktion dient hier dazu, sowohl Zugang zu den konstanten Teilen des Strings als auch zu den Variablen-Werten zu bekommen.
Im vorhergehenden Beispiel sehen Strings und Werte (values) wie folgt aus:

  • strings[0] = “You have “
  • values[0] = 3
  • strings[1] = “items in your basket for a total of $”
  • values[1] = 100.5
  • strings[2] = “”

Wie wir sehen, ist jeder Value[n] umgeben von konstanten Strings (strings[n] und strings[n + 1]).

Das gibt uns Kontrolle darüber, wie der endgültige Output-String aufgebaut ist. Im vorigen Beispiel haben wir nur das grundsätzliche Verhalten von Template Strings reproduziert. Wir können aber auch noch weiter gehen und dem String eine coole Verarbeitung (processing) mitgeben.

Hier zum Beispiel ist ein Stückchen Code, welches Strings blockiert, die versuchen, benutzerdefinierte DOM-Elemente einzuschleusen:

var items = [];
items.push("banana");
items.push("tomato");
items.push("light saber");

var total = "Trying to hijack your site 
"; var myTagFunction = function (strings,...values) { var output = ""; for (var index = 0; index < values.length; index++) { var valueString = values[index].toString(); if (valueString.indexOf("<") !== -1) { // Far more complex tests can be implemented here :) return "String analyzed and refused!"; } output += strings[index] + values[index]; } output += strings[index] return output; } result.innerHTML = myTagFunction `You have ${items.length} item(s) in your basket for a total of $${total}`;

"Getaggte" Template Strings sind für viele Anwendungen geeignet, wie z.B. Sicherheit, Ortsbestimmung, das Erstellen einer eigenen, domain-spezifischen Sprache und mehr.

Raw Strings

Tagging-Funktionen haben eine besondere Option, wenn sie auf konstante Strings zugreifen: Sie nutzen strings.raw um "unescaped" String-Values zu erhalten. Das heißt z.B. im Fall von “\n” wird das nicht als einzelnes Zeichen betrachtet, sondern tatsächlich als zwei Zeichen “\” und “n”.

Hauptziel ist es, uns zu ermöglichen, auf den String zugreifen zu können, so wie er eingegeben wurde:

var myRawFunction = function (strings,...values) {
    var output = "";
    for (var index = 0; index < values.length; index++) {
        output += strings.raw[index] + values[index];
    }

    output += strings.raw[index]

    console.log(strings.length, values.length);
    return output;
}

result.innerHTML = myRawFunction `You have ${items.length} item(s) in your basket\n.For a total of $${total}`;

Dieser Code führt zu folgender Ausgabe:

You have 3 item(s) in your basket\n. For a total of $100.5

Man kann auch eine neue String-Funktion nutzen: String.raw(). Diese bereits eingebaute Funktion führt genau das aus, was unser voriges Beispiel bereits getan hat:

result.innerHTML = String.raw `You have ${items.length} item(s) in your basket\n.For a total of $${total}`;

Fazit

Microsoft Edge und die aktuellen Versionen von Chrome (41+), Opera(28+) and Firefox (35+) unterstützen Template Strings. In welcher Breite ECMAScript 6 allgemein unterstützt wird, kannst du hier nachschlagen. Wer Anwendungen für das moderne Web erstellen will, für den sind Template Strings eine sinnvolle Sache.

Einen vollständigen Überblick zu den neuen Web-Standards und Features, die Microsoft Edge mitbringt – wie z.B. WebAudio – bietet die Liste von http://dev.modern.ie/platform/status.

Mehr Tipps, Tricks und Hilfen rund um JavaScript

Microsoft hält eine ganze Reihe kostenloser Lehrangebote zu zahlreichen Open Source JavaScript-Themen bereit – und seit der Veröffentlichung von Microsoft Edge tun wir in diesem Bereich noch sehr viel mehr. Auch von mir gibt es Tutorials:

Außerdem haben wir da noch die Schulungsreihe unseres Teams:

Praktisch sind zudem die folgenden kostenlosen Tools: Visual Studio Community, Azure Trial und Cross Browser Testing Tools für Mac, Linux oder Windows.

Dieser Artikel ist Teil der Web-Dev Tech-Series von Microsoft. Wir freuen uns Microsoft Edge (früher Project Spartan genannt) und seine neue Rendering Engine mit euch zu teilen. Kostenlose Virtual Machines oder Remote Testings für Mac, iOS, Android oder Windows gibt es hier: @ dev.modern.IE.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

JavaScript: Mit Closure Space private Attribute erstellen

Vor einiger Zeit habe ich einen Angular Cloud Data Connector entwickelt, der es Angular-Entwicklern erlaubt, mithilfe von Webstandards, wie indexierten DB, Cloud-Daten zu nutzen, und zwar konkret Azure Mobile Service. Ich wollte Java-Entwicklern die Möglichkeit geben, private Attribute (private members) in ein Objekt einzubetten. Die Technik, die ich für diesen speziellen Fall benutze, nenne ich “closure space”. In diesem Tutorial zeige ich, wie man das für verschiedene Projekte nutzen kann und inwiefern Performance und Speicher der gängigen Browser davon beeinflusst werden.

Aber bevor wir richtig anfangen, werde ich noch kurz erklären, wozu man private Attribute braucht und auf welche Weise man sie auch “simulieren” kann.

Wozu brauchen wir private Attribute?

Wenn wir ein Objekt mit JavaScript erstellen, können wir Wertattribute (value members) festlegen. Um den Lese-/Schreibzugriff darauf zu steuern, müssen wir Zugriffsberechtigte wie folgt definieren:

var entity = {};

entity._property = "hello world";
Object.defineProperty(entity, "property", {
    get: function () { return this._property; },
    set: function (value) {
        this._property = value;
    },
    enumerable: true,
    configurable: true
});

Auf diese Weise haben wir die volle Kontrolle über den Lese-/Schreibzugriff. Problematisch ist jedoch, dass das _property Attribut noch zugänglich ist und direkt verändert werden kann.

Genau deshalb brauchen wir einen solideren Weg, um private Attribute festzulegen, die nur mithilfe der Funktionen des Objekts zugänglich sind.

Die Nutzung von Closure Space

Die Lösung heißt: Closure Space. Dieser Speicherraum wird vom Browser bereitgestellt, und zwar jedes Mal, wenn eine innere Funktion Zugang zu Variablen aus dem Bereich einer äußeren Funktion besitzt. Das ist manchmal eine ziemlich knifflige Angelegenheit, aber für unsere Zwecke ist die Lösung perfekt.

Um diese Funktion zu nutzen, ändern wir also den vorherigen Code in diesen hier:

var createProperty = function (obj, prop, currentValue) {
    Object.defineProperty(obj, prop, {
        get: function () { return currentValue; },
        set: function (value) {
            currentValue = value;
        },
        enumerable: true,
        configurable: true
    });
}

var entity = {};

var myVar = "hello world";
createProperty(entity, "property", myVar);

In diesem Beispiel hat die Funktion createProperty die Variable currentValue, welche von Get/Set-Funktionen erkannt wird. Diese Variable wird im Closure Space der Get- und Set-Funktionen gespeichert. Ausschließlich diese beiden Funktionen können nun die Variable currentValue sehen und aktualisieren! Mission erfüllt!

Fast zumindest. Der einzige Vorbehalt: Der Quellenwert (myVar) ist nach wie vor zugänglich. Deshalb zeige ich hier eine Version mit noch besserem Schutz:

var createProperty = function (obj, prop) {
    var currentValue = obj[prop];
    Object.defineProperty(obj, prop, {
        get: function () { return currentValue; },
        set: function (value) {
            currentValue = value;
        },
        enumerable: true,
        configurable: true
    });
}

var entity = {
    property: "hello world"
};

createProperty(entity, "property");

Mit dieser Methode wird sogar der Quellenwert unsichtbar. Nun haben wir die Aufgabe aber wirklich erfüllt!

Ein Blick auf die Performance

Jetzt schauen wir mal wie sich das Ganze auf die Performance auswirkt.

Ganz klar, Closure Space oder sogar Eigenschaften sind langsamer und aufwändiger als reine Variablen. Deshalb will ich mich in diesem Artikel auf den Unterschied zwischen dem üblichen Weg und der Closure Space-Technik konzentrieren.

Um nachzuweisen, dass die Nutzung von Closure Space verhältnismäßig effizienter ist als der herkömmliche Weg, habe ich diesen kleinen Benchmark-Code geschrieben:

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title></title>
  </head>
  <style>
  html {
  font-family: "Helvetica Neue", Helvetica;
  }
  </style>
  <body>
  <div id="results">Computing...</div>
  <script>
  var results = document.getElementById("results");
  var sampleSize = 1000000;
  var opCounts = 1000000;
  
 var entities = [];

 setTimeout(function () {
  // Creating entities
  for (var index = 0; index < sampleSize; index++) {
  entities.push({
  property: "hello world (" + index + ")"
  });
  }

 // Random reads
  var start = new Date().getTime();
  for (index = 0; index < opCounts; index++) {
  var position = Math.floor(Math.random() * entities.length);
  var temp = entities[position].property;
  }
  var end = new Date().getTime();

 results.innerHTML = "<strong>Results:</strong><br>Using member access: <strong>" + (end - start) + "</strong> ms";
  }, 0);

 setTimeout(function () {
  // Closure space =======================================
  var createProperty = function (obj, prop, currentValue) {
  Object.defineProperty(obj, prop, {
  get: function () { return currentValue; },
  set: function (value) {
  currentValue = value;
  },
  enumerable: true,
  configurable: true
  });
  }
  // Adding property and using closure space to save private value
  for (var index = 0; index < sampleSize; index++) {
  var entity = entities[index];

 var currentValue = entity.property;
  createProperty(entity, "property", currentValue);
  }

 // Random reads
  var start = new Date().getTime();
  for (index = 0; index < opCounts; index++) {
  var position = Math.floor(Math.random() * entities.length);
  var temp = entities[position].property;
  }
  var end = new Date().getTime();

 results.innerHTML += "<br>Using closure space: <strong>" + (end - start) + "</strong> ms";
  }, 0);

 setTimeout(function () {
  // Using local member =======================================
  // Adding property and using local member to save private value
  for (var index = 0; index < sampleSize; index++) {
  var entity = entities[index];

 entity._property = entity.property;
  Object.defineProperty(entity, "property", {
  get: function () { return this._property; },
  set: function (value) {
  this._property = value;
  },
  enumerable: true,
  configurable: true
  });
  }

 // Random reads
  var start = new Date().getTime();
  for (index = 0; index < opCounts; index++) {
  var position = Math.floor(Math.random() * entities.length);
  var temp = entities[position].property;
  }
  var end = new Date().getTime();

 results.innerHTML += "<br>Using local member: <strong>" + (end - start) + "</strong> ms";
  }, 0);

 </script>
  </body>
  </html>

Ich erstelle eine Million Objekte, jeweils mit einem Eigenschaftsattribut (property member). Dann lasse ich drei Tests laufen:

  • Führe 1 Million Direktzugriffe auf die Eigenschaft aus
  • Führe 1 Million Direktzugriffe auf die “Closure Space” Version aus
  • Führe 1 Million Direktzugriffe auf die reguläre Get/Set Version aus

Hier eine Tabelle und eine Grafik von den Ergebnissen:


Deutlich zu sehen ist, dass die Closure Space-Version in allen Fällen schneller arbeitet als die reguläre Version. Abhängig vom Browser kann die Optimierung sehr eindrucksvoll ausfallen.

Die Performance von Chrome war weniger gut, als ich sie erwartet hatte. Um einen Bug auszuschließen, fragte ich daher bei Google nach, was die Ursache dafür sein könnte. Nebenbei bemerkt: Wer ausprobieren will, wie dieser Test für Microsoft Edge ausgeht – der neue Browser von Microsoft, der in Windows 10 enthalten ist – der kann ihn hier herunterladen.

Wie auch immer, wenn wir genau hinschauen, sehen wir, dass die Nutzung von Closure Space oder sogar einer Eigenschaft zehnmal langsamer funktioniert, als der direkte Zugriff auf ein Attribut. Das nur als Warnung, das Ganze mit Bedacht anzuwenden.

Speicherbedarf

Wir sollten auch prüfen, ob diese Technik nicht zu viel Speicherkapazität bindet. Um also auch dafür einen Benchmark-Test durchzuführen, habe ich diese drei Stückchen Code geschrieben:

Referenz Code

var sampleSize = 1000000;

var entities = [];

// Creating entities
for (var index = 0; index < sampleSize; index++) {
    entities.push({
        property: "hello world (" + index + ")"
    });
}

Der übliche Weg

var sampleSize = 1000000;

var entities = [];

// Adding property and using local member to save private value
for (var index = 0; index < sampleSize; index++) {
    var entity = {};

    entity._property = "hello world (" + index + ")";
    Object.defineProperty(entity, "property", {
        get: function () { return this._property; },
        set: function (value) {
            this._property = value;
        },
        enumerable: true,
        configurable: true
    });

    entities.push(entity);
}

Closure Space-Version

var sampleSize = 1000000;

var entities = [];

var createProperty = function (obj, prop, currentValue) {
    Object.defineProperty(obj, prop, {
        get: function () { return currentValue; },
        set: function (value) {
            currentValue = value;
        },
        enumerable: true,
        configurable: true
    });
}

// Adding property and using closure space to save private value
for (var index = 0; index < sampleSize; index++) {
    var entity = {};

    var currentValue = "hello world (" + index + ")";
    createProperty(entity, "property", currentValue);

    entities.push(entity);

Dann ließ ich alle drei Codes durchlaufen und startete den integrierten Memory Profiler (als Beispiel nutzte ich hier die F12 Tools):

Auf meinem Computer erhielt ich daraufhin folgende Ergebnisse:

Im Vergleich von Closure Space und dem üblichen Weg hatte nur Chrome leicht bessere Werte für die Closure Space-Version. IE11 und Firefox brauchten ein bisschen mehr Speicher, aber generell waren alle Browser relativ vergleichbar. Als User wird man da kaum einen Unterschied bemerken.

Mehr Tipps, Tricks und Hilfen rund um JavaScript

Microsoft hält eine ganze Reihe kostenloser Lehrangebote zu zahlreichen Open Source JavaScript-Themen bereit – und seit der Veröffentlichung von Microsoft Edge tun wir in diesem Bereich noch sehr viel mehr. Auch von mir gibt es Tutorials:

Außerdem haben wir noch die Schulungsreihe unseres Teams:

Praktisch sind zudem die folgenden kostenlosen Tools: Visual Studio Community, Azure Testversion und Cross Browser Testing Tools für Mac, Linux oder Windows.

Fazit

Wie wir gesehen haben, können wir mit Closure Space sehr gut wirklich private Daten erstellen. Das kostet uns ein bisschen Speicherplatz, aber meiner Meinung nach ist das vertretbar (und bringt uns schließlich gleichzeitig eine bessere Performance, als wenn wir den üblichen Weg nutzen würden).

Wer Fragen zu diesem Artikel hat, kann mich gern auf Twitter kontaktieren: @deltakosh

Und wer es gleich selbst versuchen will, kann den gesamten verwendeten Code hier finden. Es gibt außerdem eine gute Kurzeinweisung in die Azure Mobile Services, und zwar hier.

Dieser Artikel ist Teil der Web-Dev Tech-Series von Microsoft. Wir freuen uns Microsoft Edge (früher Project Spartan genannt) und seine neue Rendering Engine mit euch zu teilen. Kostenlose Virtual Machines oder Remote Testings für Mac, iOS, Android oder Windows gibt es hier: @ dev.modern.IE.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

JavaScript: Bessere Auswertung der Performance durch User Marks

Wer an fortgeschrittenem JavaScript-Code arbeitet, wie zum Beispiel einer 3D-Engine, wird sich früher oder später fragen, wie sich dieser Code optimieren lässt und wie viel Zeit man mit bestimmten Abschnitten des Codes verbringen sollte. In diesem Tutorial stelle ich einige Tools vor, die uns sagen, wie gut die Performance unseres Codes tatsächlich ist und wie wir Anwendermarkierungen (User Marks) im Memory Graph am besten nutzen, um die Leistungsfähigkeit des Codes auszuwerten.

JavaScript: Bessere Auswertung der Performance durch User Marks

Sie wollen einen schnellen Überlick zum Thema? Dann gleich mal dieses Video ansehen.

Wer Fragen zu diesem Artikel hat, kann mich gern auf Twitter kontaktieren (@deltakosh)

Profiler gesucht?

Dazu fällt mir gleich der integrierte Profiler ein, der in den Updates zu den Internet Explorer F12 Dev Tools enthalten ist — dessen Weiterentwicklung, die auch für Microsoft Edge verfügbar sind. Aber natürlich sind andere, ähnlich funktionale Tools ebenso geeignet.

Wer das mal mit Android, iOS oder Mac OS ausprobieren will, kann auch remote.IE nutzen, um eine Windows 10 Technical Preview-Instanz in wenigen Minuten zum Laufen zu bringen. Dann einfach den Internet Explorer “e” öffnen (eine temporäre Client Shell mit konfigurierter neuer Rendering Engine von Microsoft Edge), “F12” klicken und daraufhin sollte das Folgende zu sehen sein:

Hierbei ist zu beachten, dass bei den neuen F12 Tools, die Teil des Windows 10 Technical Previews sind, der Profiler im Fenster „UI responsiveness“ zu finden ist:

Schauen wir uns nun andere Optionen an, die uns Erkenntnisse über die Performance unseres Codes vermitteln können.

console.time

Hier muss man einfach nur console.time() und console.timeEnd() vor bzw. nach dem Teil des Codes aufrufen, der getestet werden soll. Als Ergebnis erhält man einen String in der Konsole, der die Zeit zwischen time und timeEnd anzeigt.

Natürlich ist das recht einfach und kann auch leicht emuliert werden, aber mir persönlich gefällt besonders die Unkompliziertheit dieser Funktion.

Und es kommt noch besser: Man kann einen String angeben, um eine Bezeichnung für die Messwerte zu bekommen.

Dies habe ich zum Beispiel für Babylon.js getan:

console.time("Active meshes evaluation");
this._evaluateActiveMeshes();
console.timeEnd("Active meshes evaluation");

Diese Art von Code ist in allen wichtigen Funktionen zu finden und wenn man Performance Logging aktiviert hat, erhält man jede Menge interessanter Informationen:

Hinweis: Das Rendering von Text in die Konsole kann eine Menge CPU-Power beanspruchen.

Da diese Funktion an sich keine Standardfunktion ist, hat mich die Kompatibilität mit unterschiedlichen Browsern umso mehr überzeugt. Sie wird von Chrome, Firefox, IE, Opera und Safari unterstützt.

Performance Object

Wer es gern etwas visueller mag, dem sei performance object empfohlen. Neben anderen interessanten Features, um die Performance einer Webseite zu messen, gibt es die Funktion mark, die eine Anwendermarkierung (user mark) aussendet.

Eine Anwendermarkierung verbindet einen Namen mit einem Zeitwert. Teile des Codes können mit dieser API gemessen werden, um genaue Werte zu erhalten. Es gibt einen tollen Artikel über diese API von Aurelio de Rosa bei SitePoint.

An dieser Stelle hier geht es mir nur darum, diese API zu benutzen, um konkrete Anwendermarkierungen im UI Responsiveness Screen bildlich darzustellen:

Dieses Tool ermöglicht es, eine Session zu erfassen und festzustellen, wie stark dabei die CPU beansprucht wird:

Wir können dann einen konkreten Frame vergrößert darstellen, indem wir den Eintrag “Animation frame callback” auswählen und dort nach einem Rechtsklick “filter to event” wählen.

Der gewählte Frame wird daraufhin gefiltert:

Dank des neuen F12 Tools können wir nun zu den JavaScript Call Stacks wechseln, um mehr Details zu diesem Event zu bekommen:

Es ist an dieser Stelle jedoch etwas schwierig, zu erkennen, wie der Code während des Events tatsächlich umgesetzt wurde.

Hier jedoch helfen uns die User Marks aus der Klemme. Wir können unsere eigenen Marker hinzufügen und sind dann in der Lage einen Frame aufzuteilen. Dort können wir dann analysieren, welches Feature am aufwändigsten ist.

performance.mark("Begin of something…just now!");

Wer ein eigenes Framework erstellt, erhält daduch außerdem die sehr praktische Möglichkeit, den eigenen Code mit Messwerten zu belegen:

performance.mark("Active meshes evaluation-Begin");
this._evaluateActiveMeshes();
performance.mark("Active meshes evaluation-End");
performance.measure("Active meshes evaluation", "Active meshes evaluation-Begin", "Active meshes evaluation-End");

Schauen wir uns doch mal an, was uns das bei babylon.js bringt, hier für die Instanz mit der “V8”-Szene:

Wir können nun babylon.js auffordern, für uns User Marks und Messwerte auszusenden. Dazu benutzen wir den debug layer:

Mithilfe des UI Responsiveness Analyzer erhalten wir diese Ansicht:

Deutlich zu sehen: Die User Marks werden oberhalb des Events angezeigt (die orangefarbenen Dreiecke), ebenso die Bereiche für alle Messungen:

Auf diese Weise lässt sich in diesem Beispiel sehr leicht bestimmen, dass die Abschnitte [Render targets] und [Main render] am aufwändigsten operieren.

Der vollständige Code, den babylon.js nutzt, um den Usern zu ermöglichen, die Performance verschiedener Funktionen zu testen, sieht so aus:

  Tools._StartUserMark = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition || !Tools._performance.mark) {
        return;
    }
    Tools._performance.mark(counterName + "-Begin");
};

Tools._EndUserMark = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition || !Tools._performance.mark) {
        return;
    }
    Tools._performance.mark(counterName + "-End");
    Tools._performance.measure(counterName, counterName + "-Begin", counterName + "-End");
};

Tools._StartPerformanceConsole = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition) {
        return;
    }

    Tools._StartUserMark(counterName, condition);

    if (console.time) {
        console.time(counterName);
    }
};

Tools._EndPerformanceConsole = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition) {
        return;
    }

    Tools._EndUserMark(counterName, condition);

    if (console.time) {
        console.timeEnd(counterName);
    }
};

Dank der F12 Tools und den User Marks erhalten wir also ein sehr nützliches Dashboard, das uns zeigt, wie effizient verschiedene Teile des Codes zusammenarbeiten.

Mehr Tipps, Tricks und Hilfen rund um JavaScript

Microsoft hält eine ganze Reihe kostenloser Lehrangebote zu zahlreichen Open Source JavaScript-Themen bereit – und seit der Veröffentlichung von Microsoft Edge tun wir in diesem Bereich noch sehr viel mehr. Auch von mir gibt es Tutorials:

Außerdem haben wir noch die Schulungsreihe unseres Teams:

Praktisch sind zudem die folgenden kostenlosen Tools: Visual Studio Community, Azure Testversion sowie Cross Browser Testing Tools für Mac, Linux oder Windows.

Dieser Artikel ist Teil der Web-Dev Tech-Series von Microsoft. Wir freuen uns Microsoft Edge (früher Project Spartan genannt) und seine neue Rendering Engine mit euch zu teilen. Kostenlose Virtual Machines oder Remote Testings für Mac, iOS, Android oder Windows gibt es hier: @ dev.modern.IE.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Aus der Praxis: Wir bauen eine Chatroom Web-App mit Node.js (Teil 6)

In dieser Node.js Tutorial-Serie zeigen wir, wie man eine Node.js-getriebene Echtzeit-Chatroom Web App erstellt, die vollständig cloud-fähig ist. Es wird darum gehen, Node.js auf einem Windows-Rechner aufzusetzen, ein Web-Frontend mit Express zu entwickeln, eine Node-Express-App auf Azure zu bringen, Socket.IO zu nutzen, um einen Echtzeit-Layer hinzuzufügen und zu zeigen, wie man das Ganze zum Schluss einsetzt.

Aus der Praxis: Wir bauen eine Chatroom Web-App mit Node.js

Schwierigkeitsstufe: Einsteiger bis mittlere Kenntnisse, vorausgesetzt werden HTML5 und JavaScript

Teil 6 – Das Finale: Debugging Remote-Node-Apps

Herzlich willkommen zum sechsten und gleichzeitig letzten Teil unserer Praxis-Serie zu Node.js: Wir programmieren eine Node.js-getriebene Chatroom Web-App.

In dieser letzten Folge geht es um die finale Bereitstellung des Chatrooms. Ich erkläre euch, wie man dabei ein Remote Debugging durchführt.

In Azure bereitstellen!

Unsere Node.js-getriebene anonyme Chatroom-App läuft. Dann wollen wir sie jetzt mit ein paar Klicks auch in der Cloud bereitstellen. Das funktioniert mit jeder Cloud, die Node.js unterstützt. Ich werde hier Microsoft Azure benutzen, weil ich dort auch eine Node.js Website kostenlos laufen lassen kann.

Einen kostenlosen Testzugang für Microsoft Azure gibt es hier. Dieser ermöglicht, Microsoft Azure einen Monat lang im Wert von €170 zu testen. Auf dem Service, den wir hier nutzen, Azure Websites, kann man damit bis zu zehn Webseiten kostenlos laufen lassen.

1. Sobald das Azure-Konto eingerichtet ist, gehen wir zurück zur IDE. Dort führen wir auf unserem Express-Projekt einen Rechtsklick aus und wählen im Menü dann „Publish„.

Wir bauen eine Chatroom Web-App mit Node.js

2. Das Menü „Publish“ öffnet einen Assistenten mit einigen Optionen. Wir wählen als Ziel Microsoft Azure-Websites.

3. An dieser Stelle erfolgt der Login, und zwar mit dem gleichen Microsoft-Konto wie bei der Azure-Anmeldung.

4. Nun wählen wir „New“ aus, um eine neue Azure-Webseite zu erstellen. Existiert schon eine, könnten wir auch einfach diese im Dropdown-Menü auswählen.

clip_image003

5. Nun füllen wir die Felder im Assistenten aus (siehe unten). Darauf achten, einen unverwechselbaren Namen für die Seite zu wählen und dann „Create“ klicken.

BLOG POST - Part 6 - Screenshot 3

6. Als Nächstes erscheint ein vorausgefüllter Assistent mit einem Button „Publish“, den wir klicken.

clip_image007

Geschafft! Das Projekt ist in der Azure-Cloud veröffentlicht! Aber die Arbeit ist damit noch nicht vollständig erledigt.

WebSockets bei Azure-Websites aktivieren

Um sicherzustellen, dass WebSockets auf unserer Website aktiviert ist, müssen wir ein paar weitere Dinge erledigen. Wer sich das Ganze gern etwas detaillierter ansehen oder die FAQ dazu durchstöbern will, sollte sich diese Seite nicht entgehen lassen.

Als erstes aktivieren wir WebSockets von der Azure-Befehlszeile oder dem Konfigurations-Tab aus:

clip_image008

Dann ändern wir unsere web.config Datei und die folgende Zeile zum system.webServer XML-Element.

<webSocket enabled="false" />

Das klingt erstmal unlogisch, ist aber genau richtig so. Denn dieser Schritt deaktiviert das IIS-WebSockets-Modul, das seine eigene WebSockets-Implementierung enthält und mit Node.js-spezifischen WebSockets Modulen wie Socket.IO kollidiert.

Das Debugging von Remote Node Apps

Node Tools für Visual Studio (NTVS) hat etliche fortgeschrittene Debug-Funktionen dabei, wie zum Beispiel bedingte Programmstopps, “Hit Count“- Programmstopps, Tracepoints und Remote Debugging Support für Windows, Linux und OS X. Mehr dazu gibt es hier.

Mit Remote Node-Instanzen verbinden

NTVS unterstützt Remote Debugging Code, der auf Azure-Websites läuft. Im Gegensatz zu gewöhnlichem Remote Debugging ist hier der Zielrechner nicht direkt über TCP zu erreichen. NTVS besitzt dafür einen WebSocket-Proxy für das Debugging-Protokoll, der das Protokoll via HTTP zeigt.

Wenn man ein Windows-Azure-Projekt aufsetzt, ist der Proxy bereits vollständig konfiguriert in Web.Debug.config. Um ihn auf der Azure-Website zu aktivieren, muss man das Projekt in der Debug-Konfiguration veröffentlichen. Das tun wir mit den nun folgenden Schritten.

1. Rechtsklick auf dem Projekt und Publish auswählen.

clip_image001[1]

2. Links den Tab Settings auswählen und im Dropdown-Menü die Konfiguration “Debug” wählen.

clip_image010

3. Auf Publish klicken.

Wenn unser Projekt ordnungsgemäß bereitgestellt und WebSockets aktiviert wurde, können wir die Website vom Server-Explorer aus einfügen. Wer das Server-Explorer-Fenster noch nicht geöffnet hat, kann das über View > Server Explorer tun. Unter Windows Azure > Web Sites können wir dann unsere Website finden. Dort führen wir dann einen Rechtsklick aus. Wenn die Website läuft und das Projekt mithilfe der Debug-Konfiguration bereitgestellt wurde, sollte im Kontextmenü der Attach Debugger (Node.js)-Befehl sichtbar sein.

clip_image011

Protokolle lesen und streamen

Das Streaming der aktuellen Protokolle ist nicht schwierig. Wir müssen einfach im Server-Explorer auf unsere Webseite rechtsklicken und View Streaming Logs auswählen.

clip_image012

Fazit

Glückwunsch! Wir haben es vollbracht! Der anonyme Echtzeit-Chatroom läuft in der Cloud. In dieser Tutorial-Serie haben wir nicht nur gelernt, wie man Node aufsetzt, ein Web-Frontend mit Express entwickelt und die App in die Cloud bringt, sondern auch wie man socket.io nutzt, um einen Echtzeit-Layer einzufügen. Zu guter Letzt wissen wir nun auch, wie man das Ganze am Ende bereitstellt.

clip_image013

Wer will, kann die einzelnen Teile noch mal auf meinem Blog nachlesen (in englischer Sprache). Hin und wieder stelle ich dort auch Updates zu diesem Tutorial bereit. Wer mehr Neuigkeiten dazu erfahren will, kann mir einfach auf Twitter folgen @ramisayar.

P.S. Ja, auch für noch mehr „Hurra-GIFs“ habe ich einen Link-Tipp.

Alle Teile der Node.js-Serie hier bei Dr. Web

#1: Einführung in Node.js

#2: Express mit Node.js und Azure

#3: Ein Chatroom-Backend mit Node.js, Socket.IO und Mongo aufsetzen

#4: Eine Chatroom-UI mit Bootstrap erstellen

#5: Den Chatroom mit WebSockets verbinden

#6: Das Finale: Debugging Remote-Node-Apps (dieser Beitrag)

Noch mehr Lernmaterial zu Node.js auf Azure

Ausführlichere Lehrinhalte zu Node gibt es in meinem Kurs an der Microsoft Virtual Academy.

Sehr hilfreich sind auch diese Kurzvideos zu ähnlichen Node-Themen:

Dieser Artikel ist Teil der Web-Dev Tech-Series von Microsoft. Wir freuen uns Microsoft Edge (früher Project Spartan genannt) und seine neue Rendering Engine mit euch zu teilen. Kostenlose Virtual Machines oder Remote Testings für Mac, iOS, Android oder Windows gibt es hier: @ dev.modern.IE.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Aus der Praxis: Wir bauen eine Chatroom Web-App mit Node.js (Teil 5)

In dieser Node.js Tutorial-Serie zeigen wir, wie man eine Node.js-getriebene Echtzeit-Chatroom Web App erstellt, die vollständig cloud-fähig ist. Es wird darum gehen, Node.js auf einem Windows-Rechner aufzusetzen, ein Web-Frontend mit Express zu entwickeln, eine Node-Express-App auf Azure zu bringen, Socket.IO zu nutzen, um einen Echtzeit-Layer hinzuzufügen und zu zeigen, wie man das Ganze zum Schluss einsetzt.

Wir bauen eine Chatroom Web-App mit Node.js (Teil 5)

Schwierigkeitsstufe: Einsteiger bis mittlere Kenntnisse, vorausgesetzt werden HTML5 und JavaScript

Teil 5 – Den Chatroom mit WebSockets verbinden

Willkommen zurück zu Teil 5 unserer Praxis-Serie zu Node.js: Wir programmieren eine Node.js-getriebene Chatroom Web-App.

In diesem Teil erkläre ich, wie man den Frontend-Chatroom mit dem Node-Chatroom-Backend verbindet, das wir in Teil 2, Teil 3 und Teil 4 erstellt haben.

Hinzufügen von jQuery, SocketIO und index.js

Bevor wir beginnen, unseren Frontend-JavaScript-Code zu schreiben, sollten wir sicherstellen, dass alle benötigten Dateien und Abhängigkeiten vom Node-Server ausgeliefert werden. Zu Beginn fügen wir jQuery und Socket.IO der Datei layout.jade hinzu, die durch alle anderen jade Dateien unseres Projekts erweitert wird.

WIr ersetzen den Link zu bootstrap.min.js mit einem Link zu allen Dateien, die wir benötigen.

script(type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js')
script(type='text/javascript' src='/js/bootstrap.min.js')
script(type='text/javascript' src='/socket.io/socket.io.js')

Beachte: die erste Zeile verweist auf jQuery, das im Microsoft Ajax Content Delivery Network gehostet wird. Dieses CDN beinhaltet beliebte JavaScript-Bibliotheken von Drittanbietern, wie jQuery. Dadurch kann man diese sehr einfach den eigenen Webanwendungen hinzufügen. Die Performance von Ajax-Anwendungen wird durch die Nutzung eines CDN deutlich verbessert. Die Inhalte eines CDN werden auf weltweit verteilten Servern zwischengespeichert. Das CDN unterstützt SSL (HTTPS) für den Fall, dass man eine Webseite mit der Hilfe von Secure Sockets Layer ausliefern will.

Nun füge ich am Ende eine weitere Zeile hinzu, um einen neuen Block zu erstellen.

block body_end

Dadurch kann jede Jade-Datei, die eine layout.jade Erweiterung hat, auch Script-Tags unmittelbar vor dem Ende des Body-Tags einfügen.

Jetzt nutzen wir unseren neuen Block, um dort einen Link zu unserer index.js-Datei einzufügen, die wir im Ordner public/js erstellen werden (bitte nicht vergessen).

block body_end
  script(type='text/javascript' src='/js/index.js')

Wichtig: Der Block beginnt ohne Einzug, um den Code-Konventionen von Jade zu genügen. Wer jetzt den Node-Server ausführt und zur Hauptseite seines Browsers geht, wird in den F12-Tools entdecken, dass die Dateien korrekt ausgeliefert werden.

Schnelle Anpassungen in app.js

Jetzt würde ich gern paar Dinge in app.js ändern. Als erstes will ich die Reihenfolge der Sortierung umkehren – damit die ältesten Mitteilungen zuerst gesendet werden. Außerdem sollen die neuesten Chat-Nachrichten auf dem gleichen Kanal gesendet werden, auf dem die neuen Nachrichten empfangen werden. Diese Änderungen vollziehe ich in den Zeilen 49 und 50 von app.js. Und so sieht es dann aus:

var stream = collection.find().sort().limit(10).stream();
stream.on('data', function (chat) { socket.emit('chat', chat.content); });

Nicht vergessen: Die Umgebungsvariable CUSTOMCONNSTR_MONGOLAB_URI muss festgelegt werden, bevor die app.js-Datei erneut aufgerufen wird, da ansonsten das Node-Backend abstürzt, weil es keine Verbindung zur MongoDB herstellen kann.

Den Send-Button aktivieren

Nun ist es an der Zeit, den Send-Button zu aktivieren, um mithilfe von WebSockets Nachrichten im Mitteilungsfeld an den Backend-Server des Chat-Channels zu senden.

var socket = io();
$('#send-message-btn').click(function () {
    var msg = $('#message-box').val();
    socket.emit('chat', msg);
    $('#messages').append($('
').text(msg)); $('#message-box').val(''); return false; }); socket.on('chat', function (msg) { $('#messages').append($('

').text(msg)); });

Zeile 1

Wir erstellen ein Socket, indem wir die Funktion io() aufrufen, die sich in der Datei socket.io-client.js befindet.

Zeile 2

Danach sorgen wir dafür, dass durch einen Klick auf den Send-Message-Button eine Funktion ausgeführt wird. Dafür nutzen wir die Funktion $ von jQuery und den Click-Event-Handler.

Zeile 3

Wir erhalten den String-Value des Mitteilungsfensters mithilfe der Funktion $ von jQuery.

Zeile 4

Wir nutzen die emit-Funktion auf der Socket-Variable, die wir in Zeile 1 erstellt haben, um eine Mitteilung an den ‘chat’-Channel zu senden, die den Wert des Mitteilungsfensters enthält.

Zeilen 5-7

Hier fügen wir die Nachricht im Mitteilungsfenster der Div #messages hinzu, damit der User erkennt, dass die Nachricht gesendet wurde. Wir weisen den Wert des Mitteilungsfensters einem leeren String zu, um es wieder frei zu machen.

Zeilen 9-10

Wir wollen die im Chat-Channel erhaltenen Nachrichten anderer User der Div #messages hinzufügen. Das Node-Backend wird die vom Client geschriebene Mitteilung nicht an sich selbst zurücksenden. Aber das geht in Ordnung, weil wir diese schon im Click-Handler eingefügt haben.

Wir bauen eine Chatroom Web-App mit Node.js (Teil 5)

Fazit

Geschafft! Wir haben Backend und Frontend mithilfe von WebSockets verbunden. Wer jetzt noch eine Identifikation oder Avatare für alle User hinzufügen will – kein Problem. Aber auch ohne das ist der Chatroom jetzt einsatzbereit. In der nächsten Folge erkläre ich wie der Chatroom auf Azure angewendet und von Fehlern befreit wird.

Dranbleiben für Teil 6!

Teil 6 — das Finale mit dem Debugging von Remote Node Apps — wird schon bald hier bei Dr. Web veröffentlicht. In englischer Sprache gibt es ihn schon auf meinem Blog.

Wer mehr Neuigkeiten dazu und zu anderen Artikeln erfahren will, kann mir einfach auf Twitter folgen: @ramisayar.

Weitere Teile der Serie bei MSDN (in englischer Sprache)

Part 1 – Introduction to Node.js
Part 2 – Welcome to Express with Node.js and Azure
Part 3 – Building a Backend with Node, Mongo and Socket.IO
Part 4 – Building a Chatroom UI with Bootstrap
Part 5 – Connecting the Chatroom with WebSockets
Part 6 – The Finale and Debugging Remote Node Apps

Noch mehr Lernen über Node auf Azure

Ausführlichere Lehrinhalte zu Node gibt es in meinem Kurs an der Microsoft Virtual Academy.

Sehr hilfreich sind auch diese Kurzvideos zu ähnlichen Node-Themen:

Dieser Artikel ist Teil der Web-Dev Tech-Series von Microsoft. Wir freuen uns Microsoft Edge (früher Project Spartan genannt) und seine neue Rendering Engine mit euch zu teilen. Kostenlose Virtual Machines oder Remote Testings für Mac, iOS, Android oder Windows gibt es hier: @ dev.modern.IE.

(dpe)