Sprachausgabe im Web mit der Web Speech API
Wenn du wie ich begeisterter Entwickler bist und gerne neue Web-Technologien ausprobierst, dann ist die Web Speech API eine jener Schnittstellen, die auf den ersten Blick einfach wirken, aber eine beeindruckende Tiefe bieten. Als ich das erste Mal die speechSynthesis-API in meinem Browser ausprobierte, war ich fasziniert, wie einfach es ist, einen Text mit der […]
Was ist eigentlich Two-Way Data Binding und wie kann ich es einfach umsetzen?
Stell dir vor, du hast eine Webseite mit ein paar Eingabefeldern – sagen wir, eines für den Namen und eines für das Alter. Wenn der Benutzer dort etwas eingibt, wäre es doch genial, wenn die Änderungen direkt in deinem Datenmodell gespeichert werden und umgekehrt! Willkommen in der Welt des Two-Way Data Bindings. Doch bevor wir […]
Facetrap.net
Ich möchte kurz mein neues Side-Projekt vorstellen: Mit www.facetrap.net kann man sein Smartphone (oder anderes Gerät) mit Chrome und einer Webcam als einfache Photofalle aufstellen, die Gesichter erkennt. So öffnet man die Seite (oder installiert die Web-App), stellt sein Handy irgendwo hin und wenn sich Personen nähern werden Beweisphotos geschossen. Wenn man dann wieder zum […]
Untertitel für Videos in sozialen Netzwerken erstellen
In der Welt der digitalen Medien spielen Untertitel eine entscheidende Rolle für die Barrierefreiheit. Sie ermöglichen es Menschen mit Hörbehinderungen, Videos und Multimedia-Inhalte zu konsumieren und unterstützen zudem das Verständnis in lauten Umgebungen oder bei Sprachbarrieren – oder wenn man einfach nicht dauernd den Ton anschalten will. Hier kommen die § Zeichen Das ist nicht […]
Bookmarklets auf mobilen Browsern
Was ist ein Bookmarklet?Ein Bookmarklet ist ein kleines JavaScript-Programm, das im Browser als Lesezeichen gespeichert wird. Ein Klick darauf führt eine bestimmte Aktion auf der aktuellen Webseite aus. Zum Beispiel hat Hacker News ein Bookmarklet um die aktive Seite einfach zu übermitteln. Auf einem Desktop-Browser funktioniert die Installation und das Verwenden sehr einfach, doch wie […]
OpenLayers vs Leaflet vs ArcGIS API for JavaScript: Bounding Box erstellen
Folgende Aufgabe wollte ich letztens lösen: Auf einer Karte soll ein Benutzer eine Boundig-Box aufziehen können. Also ein Rechteck um einen Bereich abzugrenzen. Die geographischen Koordinaten (Länge, Breite) der Boundig-Box sollen auf der Seite in einer bestimmten Formatierung ausgegeben werden. Die Benutzung soll auf Smartphones mit Gesten ebenso wie auf einem Desktop-PC möglich sein. Ich […]
Kartendienst auf eigener Webseite mit ArcGIS API for JavaScript
TL;DR: Demo einer Kartenanwendung mit esri Wenn man eine eigene Karte auf der Webseite darstellen will, nutzt man meistens Google Maps. Auf dem Gebiet der Geodatenanwendungen ist allerdings Google eher ein Newbee. Der alte Platzhirsch heißt esri. Im Bereich der webbasierten Karten wie Google Maps hatte esri etwas geschlafen. Aber in den letzten Jahren gibt […]
Event Handler für noch nicht existierende Elemente in JQuery
s kommt manchmal vor, dass man ein Element mit Jquery einfügt und einen Eventhandler dafür registrieren will. Ab JQuery 1.7+ geht das mit der on() Methode. Für Elemente die noch nicht existieren muss man den Event-Delegation Ansatz der Methode on() nutzen. Der normale direkte Aufruf sieht wie folgt aus (und funktioniert nicht für Elemente, die […]
Mit Google VR-View 360-Grad-Fotos in eigene Webseite einbinden
Google Cardboard ist eine günstige Möglichkeit um aus einem Smartphone und einem Pappkasten mit Linsen eine Virtual-Reality Brille zu erstellen. Wer will kann sich die Brille sogar mit folgender Anleitung selbst bauen.Allerdings muss man die Displaygröße des Geräts beachten. Mein Galaxy Note 3 ist z.B. zu groß. Auch die Linsen selbst sind nicht allzu leicht […]
Hat ein mobiles Gerät ein Gyroskop oder Beschleunigungssensor?
Im letzten Beitrag habe ich einen Weg gezeigt, mit dem man ermitteln kann, ob ein Gerät wirklich mobil ist. Der DeviceMotionEvent gab hierüber Auskunft. Will man wissen, ob ein Gerät über ein Gyroskop verfügt, kann man wie folgt vorgehen: See the Pen Accelerometer or Gyroscope by uli schaeffler (@ulrischa) on CodePen. Erklärung Ich dachte bis […]