Webentwickler-Projekte von Herbert Braun

Bitte beachten Sie auch mein Textverzeichnis mit Links auf zahlreiche Demo-Projekte und Tutorials. Viele meiner Projekte sind außerdem auf GitHub veröffentlicht.

ServiceWorker für Offline-Surfen

ServiceWorker für Offline-Surfen

November 2016

Grundstock für eine Progressive Web App, die sich mit Hilfe eines ServiceWorkers selbst cachet und auch offline funktioniert. Artikel: Veröffentlichung in der c't vermutlich im Dezember

GitHub

Initiative Energieeffizienz: Netzwerkkarte
Initiative Energieeffizienz: Netzwerkkarte, Detailansicht

Initiative Energieeffizienz: Netzwerkkarte

Oktober 2016

Komplexe JavaScript-App auf Grundlage von Google Maps API; Filterfunktionen, Listendarstellung mit Templates; Stylesheets.
Agentur: We Do

Projektseite

Angular-2-Demo

Angular-2-Demo

September 2016

Einkaufslisten-Anwendung mit Angular 2. Artikel: c't 22/16

Projektseite ·: GitHub

Schule gegen sexuelle Gewalt

Schule gegen sexuelle Gewalt

Juni – September 2016

Stylesheets und JavaScript für ein komplexes Layout mit mehreren verschachtelten Ebenen und Mikro-Animationen, zugänglich durch Sprungmarken.
Agentur: We Do

Projektseite

Start Tourism Up!

Start Tourism Up!

August 2016

Stylesheets für den One-Pager einer Kampagne der Stadt Berlin, Parallax-Effekte.
Agentur: We Do

Projektseite

Facebook-Chatbot

Facebook-Chatbot

Mai 2016

Chatbot für den Facebook-Messenger, der Benutzereingaben auswertet und mit grafischen Inhalten sowie interaktiven Buttons antworten kann.
Artikel: c't 12/16

Unabhängiger Beauftragter für Fragen des sexuellen Kindesmissbrauchs

Unabhängiger Beauftragter für Fragen des sexuellen Kindesmissbrauchs

April/Mai 2016

Barrierefreiheit (Sprungmarken, visuelle Hervorhebung), Twitter-Widget, Bildergalerie, Slider-Galerie; Mitarbeit an den Stylesheets.
Agentur: We Do

Projektseite

2-Faktor-Authentifizierung

2-Faktor-Authentifizierung

April 2016

PHP-Implementierung des TOTP-Standards mit QR-Code zur Anmeldung und SQL-Backend.
Artikel: c't 11/16

GitHub

Deutsche Energie-Agentur Bayern: Pilotprojekt Demand Side Management

Deutsche Energie-Agentur Bayern: Demand Side Management

Februar – April 2016

JavaScript-Umsetzung einer mehrseitigen Kostenrechner-Anwendung, die aufgrund von Formulareingaben einen Voranschlag ermittelt; Stylesheets.
Agentur: We Do

Projektseite

DIN

DIN

ab Anfang 2016

Mitwirkung an der Neugestaltung eines komplexen Webauftritts; Stylesheets und JavaScript.
Agentur: Init AG

Projektseite

Unabhängiger Beauftragter für Fragen des sexuellen Kindesmissbrauchs: Kein Raum für Missbrauch

Kein Raum für Missbrauch

Januar 2016

Mitarbeit an den Stylesheets.
Agentur: We Do

Projektseite

BibTeX-Bookmarklet

BibTeX-Bookmarklet

November 2015

Komplexes Bookmarklet, das BibTeX-Code auf den Seiten von shop.heise.de erkennt und lokal im Browser verwaltet (speichern, taggen, exportieren). Als Build-Werkzeuge kamen Node.js und Grunt zum Einsatz.
Artikel: c't 1/16

GitHub · Installation

Browser-Spiel mit ReactJS

Browser-Spiel mit ReactJS

Oktober 2015

ReactJS-Tutorial und zugleich ein Browser-Spiel, bei dem es darum geht, alle HTML5-Elemente einzutippen.
Artikel: c't 2/16

Projektseite · GitHub

Beuth Verlag

Beuth Verlag

ab September 2015

Mitwirkung am Relaunch eines komplexen Webauftritts; zahlreiche Stylesheets- und JavaScript-Reparaturen.
Agentur: Init AG

Projektseite

Eigener YouTube-Player

Eigener YouTube-Player

Juni 2015

Zeigt Informationen zu den Videos einer Playlist an und spielt diese einzeln oder als Liste ab.
Artikel: c't 18/15

Projektseite ·: GitHub

Webdesign mit Layout-Constraints CCSS

CCSS-Demo

Mai 2015

Webdesign mit Layout-Constraints CCSS/GSS.
Artikel: c't 14/15

Projektseite ·: GitHub

Unabhängiger Beauftragter für Fragen des sexuellen Kindesmissbrauchs: Dokumentationsraster für Anrufe beim Hilfetelefon

Dokumentationsraster für Anrufe beim Hilfetelefon sexueller Kindesmissbrauch

ab April 2015

Komplexes Formular mit fast 500 Feldern, die aus- oder eingeblendet werden. Teile des Codes gingen in die JavaScript-Bibliothek Heidi ein. JavaScript-Umsetzung; Stylesheets; Übergabe an PHP/MySQL.
Agentur: We Do

Interne Anwendung, nicht öffentlich verfügbar

Flexbox-Live-Demo

Flexbox-Demo

April 2015

Erste Schritte mit Flexboxen und Grid-Layout.
Artikel: c't 11/15

Projektseite ·: GitHub

CSS-Praxis

CSS-Praxis

April 2015

Exemplarische Lösungen für einige gängige CSS-Probleme.
Artikel: c't Web 2015

GitHub

Exportinitiative Energie des BMWi

Exportinitiative Energie des BMWi

März 2015

Stylesheets für eine Landing-Page.
Agentur: We Do

Projektseite

Elterntest der Initiative 'Schau hin!'

Initiative "Schau hin!": Elterntest

Dezember 2014

JavaScript-Umsetzung einer mehrseitigen Quiz-ähnlichen Anwendung; Stylesheets.
Agentur: We Do

Projektseite

Watch Your Web

Watch Your Web

Dezember 2014

YouTube-Player mit TV-Optik.
Agentur: We Do

Projektseite

PhantomJS und CasperJS

PhantomJS und CasperJS

November 2014

Automatisierte Seitenabrufe, Screenshots und Content-Scraping mit PhantomJS und CasperJS.
Artikel: c't 26/14

GitHub

Textatisch

Textatisch

Oktober 2014 – Sommer 2015

Projekt für einen Webdienst, der Texte auf stilistische Probleme untersucht und Verbesserungsvorschläge anbietet. Finalist beim Wettbewerb Gründer-Garage 2014.

Textatisch-Projektseite

Live-Demo (setzt Firefox voraus)

CSS3-Variablen (Demo)

September 2014

Variablen, Filter und Berechnungen in CSS3.
Artikel: c't 24/14

Projektseite

Live-Demo

Canvas-Fingerprint

September 2014

Ein denkbar einfaches Skript für Browser-Tracking ohne Cookies mit Canvas-Fingerprinting.
Artikel: c't 18/14

GitHub · Projektseite

Twitbot

Twitbot

Juni 2014

Arduino-Roboter, der empfangene Tweets in Morsesignale umsetzt und mit JavaScript über CylonJS programmiert wurde.
Artikel: Page 11.2014

GitHub

Grafiken
Freihandzeichnungen

Bildbearbeitung im Browser

Frühjahr 2014

Komplexes Bildbearbeitungssystem für ein Projekt, bei dem in einem OpenCart-Shop einzelne Produktansichten vom Nutzer individuell gestaltet werden sollten, auf Grundlage von Fabric.js und Fancy Product Designer:

Unveröffentlicht (aus Gründen, die nicht technischer Natur sind).

Live-Demo

CoffeeScript-Bildergalerie

Februar 2014

Bildergalerie, die mit CoffeeScript (LitCoffee) umgesetzt wurde.
Artikel: c't 8/14

GitHub · Projektseite

Node.js-Editor

Node.js-Editor

Januar 2014

Node.js-Webanwendung, die Inhalte eines Verzeichnisses auflistet und die Bearbeitung von Textdateien ermöglicht.
Artikel: c't 4/14

GitHub

Parallax Scrolling

Parallax Scrolling

Oktober 2013

Einfachstmögliche Implementierung von Parallax-Scrolling-Effekten.
Artikel: c't 26/13

GitHub · Projektseite

Textverzeichnis

Client-seitiges MVC mit Backbone

Herbst 2013

Das auf dieser Website verwendete filterbare Verzeichnis meiner journalistischen Arbeiten ist mit Backbone und Marionette umgesetzt. Die Tag-Cloud wird live aus der JSON-Datenbank generiert.

GitHub · Projekt

Live-Demo

CommentCaVa

Juli 2013

Erst lesen, dann kommentieren: Ein Skript, das die Kommentarfunktion zeitverzögert freischaltet. Auch als WordPress-Plugin erhältlich.
Artikel: c't 17/13

GitHub · WordPress-Plugin · Projektseite

Live-Demo

3D-Viewer

Mai 2013

Ein WebGL-Viewer für Collada-Dateien auf Basis von Three.js.
Artikel: c't 13/13

GitHub · Projektseite

Antikrastinator

Antikrastinator

Mai 2013

Eine Chrome-Erweiterung, die vom ziellosen Herumsurfen auf Facebook und Co. abhält.
Artikel: c't 12/13

GitHub · Chrome Web Store

Canvas-Spiel

Canvas-Spiel

Sommer 2010

Ein simples Browser-Spiel auf Grundlage von Canvas.

GitHub · Projektseite

CRM Ficofix

CRM Ficofix

2006 – 2016

Vollständig selbst entwickeltes Kundenverwaltungssystem für die Verwaltung von Zeitschriftenbestellungen und -abonnements auf Grundlage von PHP und MySQL. Mit Schnittstelle zum Shop-System wpShopGermany und zum Bezahldienst Micropayment, der Erstellung von Rechnungen im OpenOffice-Format sowie zahlreichen weiteren Features.

Interne Anwendung, nicht öffentlich verfügbar