Webentwickler-Projekte von Herbert Braun

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

c't webdev

c't <webdev>

seit Mai 2018

Umsetzung und Mitgestaltung der Website für die Konferenz c't <webdev> (Frontend und Backend).

Projektseite

Initiative Schau hin

Schau hin!

September – Dezember 2018

Umfangreicher Relaunch der Website der Initiative Schau hin! Was Dein Kind mit Medien macht. Agentur: We Do

Projektseite

WebAssembly

WebAssembly

September 2018

WebAssembly-Projekt zur Berechnung von Fibonacci-Zahlen in C++. Artikel: Veröffentlichung in der c't vermutlich im Januar

Projektseite · GitHub

Berlin Urban Tech

Berlin Urban Tech

Juli – Dezember 2018

Frontend-Umsetzung der Website für die Konferenz Berlin Urban Tech Summit. Agentur: We Do

Projektseite

retro-web-app

Retro-Web mit Polymer

September 2018

Zombie-HTML: Mit dem Polymer-Framework lassen sich Elemente neu beleben, die seit den 90er-Jahren keiner vermisst hat. Artikel: c't 27/18

Projektseite · GitHub: Elemente · GitHub: App

Deges-Karte A26

Interaktive Karte A26

April 2017, Juni – Oktober 2018

Informations-Website der DEGES über den geplanten Neubau der A26 in Hamburg-Süd. Agentur: We Do

Stark im Park

Stark im Park

April – Juli 2018

Umsetzung der Website Stark im Park, ein Berliner Förderprogramm für Freizeitsport im Freien. Agentur: We Do

Projektseite

Browserspiel mit Vue.js

Browserspiel mit Vue.js

Mai – Juni 2018

Vue.js-Implementierung eines HTML-Quizzes. Artikel: c't 19/18

Projektseite · GitHub

PWA: Add to Homescreen

PWA: Add to Homescreen

Mai 2018

Progressive Web App, die sich als WebAPK ähnlich wie eine native Android-App installieren lässt. Artikel: c't 15/18

GitHub

Push-Benachrichtigungen

Push-Benachrichtigungen

März 2018

Progressive Web App, mit der sich Push-Benachrichtigungen im Browser abonnieren und empfangen lassen. Artikel: c't 9/18 (Frontend), c't 14/18 (Backend)

GitHub

dena-Leuchtturmprojekte

Interaktive Karte: dena-Leuchtturmprojekte

Januar – März 2018

Interaktive Karte mit Filterung und Möglichkeit zur Konfiguration und Einbettung im IFrame. Agentur: We Do

Projektseite

HIS Online

HIS Online

Januar – Februar 2018

Webauftritt des Hamburger Institutes für Sozialforschung. Agentur: Familie Redlich

Projektseite

Browser-Erweiterung deeptransLate

Browser-Erweiterung deeptransLate

November 2017

Beispielhafte Umsetzung einer Browser-Erweiterung am Beispiel des Übersetzungsdienstes DeepL. Artikel: c't

GitHub

Maschinenlernen im Browser

Maschinenlernen im Browser

Oktober 2017

Mittels der JavaScript-Bibliothek Deeplearn.js lässt sich Maschinenlernen im Browser umsetzen. Die Beispielanwendung trainiert mit einer Datenbank verschiedener Iris-Arten und ordnet dann Kenngrößen zu. Artikel: c't 25/17

Projektseite · GitHub

We Do

We Do

August – November 2017

Relaunch der Website der Agentur. Agentur: We Do

Projektseite

App mit React Native

App mit React Native

August 2017

Mit dem Framework React Native wird eine native App umgesetzt: ein Atom/RSS-Feedreader mit Filterfunktion. Artikel: c't 21/17

GitHub

Azure Cognitive Services

Azure Cognitive Services

Juli 2017

Zwei Demo-Projekte loten die Fähigkeiten von Azures Cognitive Services aus: die Diktier-App Dictator und das Acting Game, bei dem der Nutzer ein Gefühl darstellen muss, das die Azure-Dienste zu erkennen versuchen. Artikel: c't 17/17

GitHub: Acting Game · GitHub: Dictator

Sourcemap-Konvertierer

Sourcemap-Konvertierer

Juni 2017

Liest Sourcemap-Daten mit Base64-VLQ-Kodierung aus. Artikel: c't 17/17

Projektseite · GitHub

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: c't 2/17

Projektseite · 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 über 600 Feldern, die aus- oder eingeblendet werden. Teile des Frontend-Codes gingen in die JavaScript-Bibliothek Heidi ein. Frontend und Backend (PHP, SQL-Datenbank mit mehr als 100 Tabellen). 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

CSS3-Variablen

CSS3-Variablen

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:

  • Integration von bis zu 40 Produktansichten in OpenCart
  • frei wählbare Hintergrundfarbe, auch in mehreren Ansichten gleichzeitig
  • Einbau vorgegebener Grafiken
  • Einbau selbst hochgeladener Bilder
  • Freihandzeichnungen, geometrische Formen und Texte
  • automatische Zwischenspeicherung bei Ansichtwechsel
  • hochauflösende Speicherung der PNG-Grafiken für Ausdrucke (doppelt so groß wie die Design-Ansicht)
  • Mosaik-Ansicht der gestalteten Grafiken in einer Box

Unveröffentlicht (Projekt wurde eingestellt).

Bildergalerie

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

CommentCaVa

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

3D-Viewer

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