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](!img/ctwebdev.jpg)
c't <webdev>
seit Mai 2018
Umsetzung und Mitgestaltung der Website für die Konferenz c't <webdev> (Frontend und Backend).
![Initiative Schau hin](!img/ish.jpg)
Schau hin!
September – Dezember 2018
Umfangreicher Relaunch der Website der Initiative Schau hin! Was Dein Kind mit Medien macht
.
Agentur: We Do
![WebAssembly](!img/webassembly.jpg)
WebAssembly
September 2018
WebAssembly-Projekt zur Berechnung von Fibonacci-Zahlen in C++. Artikel: Veröffentlichung in der c't vermutlich im Januar
![Berlin Urban Tech](!img/berlin-urban-tech.jpg)
Berlin Urban Tech
Juli – Dezember 2018
Frontend-Umsetzung der Website für die Konferenz Berlin Urban Tech Summit
.
Agentur: We Do
![retro-web-app](!img/retro-web-app.jpg)
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
![Deges-Karte A26](!img/a26.jpg)
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](!img/starkimpark.jpg)
Stark im Park
April – Juli 2018
Umsetzung der Website Stark im Park
, ein Berliner Förderprogramm für Freizeitsport im Freien.
Agentur: We Do
![Browserspiel mit Vue.js](!img/htmlgame-vue.jpg)
Browserspiel mit Vue.js
Mai – Juni 2018
Vue.js-Implementierung eines HTML-Quizzes. Artikel: c't 19/18
![PWA: Add to Homescreen](!img/add-to-homescreen.jpg)
![Push-Benachrichtigungen](!img/push-benachrichtigung.jpg)
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)
![dena-Leuchtturmprojekte](!img/dena-leuchttuerme.jpg)
Interaktive Karte: dena-Leuchtturmprojekte
Januar – März 2018
Interaktive Karte mit Filterung und Möglichkeit zur Konfiguration und Einbettung im IFrame. Agentur: We Do
![HIS Online](!img/his.jpg)
HIS Online
Januar – Februar 2018
Webauftritt des Hamburger Institutes für Sozialforschung. Agentur: Familie Redlich
![Browser-Erweiterung deeptransLate](!img/browser-extension.jpg)
![Maschinenlernen im Browser](!img/deeplearn.jpg)
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
![We Do](!img/we-do.jpg)
![App mit React Native](!img/react-native.jpg)
![Azure Cognitive Services](!img/azure-cognitive.jpg)
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
![Sourcemap-Konvertierer](!img/sourcemap-converter.jpg)
Sourcemap-Konvertierer
Juni 2017
Liest Sourcemap-Daten mit Base64-VLQ-Kodierung aus. Artikel: c't 17/17
![ServiceWorker für Offline-Surfen](!img/serviceworker-offline.jpg)
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
![Initiative Energieeffizienz: Netzwerkkarte](!img/dena-netzwerke.jpg)
![Initiative Energieeffizienz: Netzwerkkarte, Detailansicht](!img/dena-netzwerke-detail.jpg)
Initiative Energieeffizienz: Netzwerkkarte
Oktober 2016
Komplexe JavaScript-App auf Grundlage von Google Maps API; Filterfunktionen, Listendarstellung mit Templates; Stylesheets. Agentur: We Do
![Angular-2-Demo](!img/angular2.jpg)
![Schule gegen sexuelle Gewalt](!img/ubskm-sgsg.jpg)
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
![Start Tourism Up!](!img/start-tourism-up.jpg)
Start Tourism Up!
August 2016
Stylesheets für den One-Pager einer Kampagne der Stadt Berlin, Parallax-Effekte. Agentur: We Do
![Facebook-Chatbot](!img/chatbot.jpg)
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](!img/ubskm.jpg)
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
![2-Faktor-Authentifizierung](!img/2-factor.jpg)
![Deutsche Energie-Agentur Bayern: Pilotprojekt Demand Side Management](!img/dena-kostenrechner.jpg)
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
![DIN](!img/din.jpg)
DIN
ab Anfang 2016
Mitwirkung an der Neugestaltung eines komplexen Webauftritts; Stylesheets und JavaScript. Agentur: Init AG
![Unabhängiger Beauftragter für Fragen des sexuellen Kindesmissbrauchs: Kein Raum für Missbrauch](!img/ubskm-kein-raum.jpg)
![BibTeX-Bookmarklet](!img/bibtex-bookmarklet.jpg)
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
![Browser-Spiel mit ReactJS](!img/htmlgame.jpg)
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
![Beuth Verlag](!img/beuth.jpg)
Beuth Verlag
ab September 2015
Mitwirkung am Relaunch eines komplexen Webauftritts; zahlreiche Stylesheets- und JavaScript-Reparaturen. Agentur: Init AG
![Eigener YouTube-Player](!img/youtube-player.jpg)
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
![Webdesign mit Layout-Constraints CCSS](!img/ccss.jpg)
![Unabhängiger Beauftragter für Fragen des sexuellen Kindesmissbrauchs: Dokumentationsraster für Anrufe beim Hilfetelefon](!img/ubskm-dokuraster.jpg)
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
![CSS-Praxis](!img/css-practice.jpg)
![Exportinitiative Energie des BMWi](!img/bmwi-energieexport.jpg)
Exportinitiative Energie des BMWi
März 2015
Stylesheets für eine Landing-Page. Agentur: We Do
![Elterntest der Initiative 'Schau hin!'](!img/schau-hin.jpg)
Initiative "Schau hin!": Elterntest
Dezember 2014
JavaScript-Umsetzung einer mehrseitigen Quiz-ähnlichen Anwendung; Stylesheets. Agentur: We Do
![Watch Your Web](!img/watch-your-web.jpg)
![PhantomJS und CasperJS](!img/phantom.jpg)
![Textatisch](!img/textatisch.jpg)
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.
![CSS3-Variablen](!img/css-variablen.jpg)
Canvas-Fingerprint
September 2014
Ein denkbar einfaches Skript für Browser-Tracking ohne Cookies mit Canvas-Fingerprinting. Artikel: c't 18/14
![Twitbot](!img/twitbot.jpg)
Twitbot
Juni 2014
Arduino-Roboter, der empfangene Tweets in Morsesignale umsetzt und mit JavaScript über CylonJS programmiert wurde. Artikel: Page 11.2014
![Grafiken](!img/cc-bilder.jpg)
![Freihandzeichnungen](!img/cc-freihand.jpg)
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](!img/bildergalerie.jpg)
CoffeeScript-Bildergalerie
Februar 2014
Bildergalerie, die mit CoffeeScript (LitCoffee) umgesetzt wurde. Artikel: c't 8/14
![Node.js-Editor](!img/noditor.jpg)
![Parallax Scrolling](!img/parallax.jpg)
Parallax Scrolling
Oktober 2013
Einfachstmögliche Implementierung von Parallax-Scrolling-Effekten. Artikel: c't 26/13
![Textverzeichnis](!img/backbone.jpg)
![CommentCaVa](!img/commentcava.jpg)
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
![3D-Viewer](!img/collada-viewer.jpg)
![Antikrastinator](./!img/antikrast.jpg)
Antikrastinator
Mai 2013
Eine Chrome-Erweiterung, die vom ziellosen Herumsurfen auf Facebook und Co. abhält. Artikel: c't 12/13
![Canvas-Spiel](./!img/canvas-spiel.jpg)
![CRM Ficofix](./!img/ficofix.jpg)
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