Web Development

Wenn du einige Banner nicht sehen kannst, dann deaktiviere bitte deinen Adblocker auf dieser Seite!

HTML5 Banner mit Integrierter
JavaScript Funktionalität

Die ist nur ein Beispiel einer integrierten Funktionalität.
Ich habe den Banner so umgeschrieben, dass der Timer mit einem Klick auf den Banner auf 3 Sekunden gesetzt wird.


Einschränkungen beim Integrieren von Funktionalitäten sind hier nur die Größe des Banners und natürlich der Aufwand.

3D Integration in HTML5 Werbemittel oder direkt auf der Webseite

Über die Three.js-Library habe ich 3D in diesen Banner integriert.
Die Perspektive kann mit der Maus angepasst werden.

Die Assets wurden dabei in Blender erstellt. Ich musste die Texturen baken, da die Three.js Engine keine komplizierten Shader unterstützt.

Der Banner hat ein Initial Weight von 213kb. Dieser kann durch verwenden von PNGs statt dem Integrieren von Schriftarten nochmal um 160kb reduziert werden. Die 3D Objekte und Skripte werden erst geladen, wenn der Cursor über das Werbemittel hovert, also User Initiated. Momentan werden hier 2,9MB nachgeladen. Dies ist allerdings stark abhängig von den verwendeten Texturauflösungungen und der Komplexität der Szene.

App Development

Waagi ist eine hybride Cross-Plattform-App für Android und Web.
Ich habe Sie mit Vue.js inklusive VueX erstellt.
Link zur Web-App:
Waagi

Es handelt sich um einen Gewichts-Tracker. Die Daten werden manuell eingegeben und können über eine Sync-Funktion via Firebase mit dem Back-End abgeglichen werden um so die Cross-Plattform-Funktionalität zu gewährleisten.
Als Basis des Graphen diente Chart.js bzw vue-chart.js.
Ab dem 4. Eintrag habe ich eine Zoom und Slide Funktion in den Graphen integriert, so dass die Anzahl und der Bereich der Daten stufenlos ausgewählt werden kann.
Über node.js und Puppeteer habe ich über den Headless Chrome via WebScraping eine Database für die Nährwerte zusammengetragen.
Zur Portierung auf Android habe ich Capacitor genutzt.

Zur Generierung der ersten User habe ich eine Google Ads Kampagne mit diversen Werbemitteln für einen Monat getestet. Unter anderem habe ich auch HTML5 Werbemittel erstellt, welche neben den YouTube Preroll Ads die beste Performance erbracht haben.

Da ich keinerlei Monetarisierungsfunktionalitäten integriert habe und genug Erkenntnisse aus dem Projekt für mich mitnehmen konnte, habe ich die Marketingmaßnahmen nicht weitergeführt.
REWE Promo VIdeo für App

Animierte dynamische
HTML5 Banner ...

Bitte nutze die Maus um die Größe des Banners zu verändern.
Dieser Banner hat 3 verschiedene Größen, gesteuert über 2 Breakpoints, welche farblich im Feld markiert sind.
Ändert sich die Größe des iFrames auf der eingebetteten Seite, so ändert sich auch die Größe des Banners.
Die Größe des Banners überschreitet dabei keine 300kB. Dies wird erreicht, indem für alle Größen die gleichen Assets zur Animation verwendet wurden.

Die Animationen selbst wurden über Adobe Animate umgesetzt und die verschiedenen Animationen werden per JavaScript entsprechend geladen.

... mit dynamischer
Skalierung

Bitte nutze die Maus um die Größe des Banners zu verändern.
Die verschiedenen Größen sind hierbei frei zu wählen.
Ebenfalls kann auch eine gewisse Skalierung mit einprogrammiert werden.
Achte hierbei auf die dynamische Responsivität zwischen den Breakpoints.

Komplette Responsivität

Bitte nutze die Maus um die Größe des Banners zu verändern.
Ebenso ist eine komplette dynamische Responsivität durch Aufteilung der Animationen in einzelne Embed Elemente möglich.
Hierfür muss darauf geachtet werden, dass der Canvas der einzelnen Animationen transparent ist.

Weiteres Beispiel:
Dynamischer Fireplace

Diese Ad kommt komplett ohne JavaScript aus und bietet maximale Ausreizung der zur Verfügung stehenden Werbefläche.
Die Gesamtgröße des kompletten Banners kann auf ca 500kB Beschränkt werden.
Ebenso möglich wären hier auch einfachere CSS-Animationen.
Bitte nutze die pinken Kästchen um die Größe des Banners an 3 Stellen zu verändern.
Folge diesem Link zur Vorschau einer dynamische Fireplace Ad:

Dynamische Fireplace Ad

Weitere Beiträge auf dem PC

Was darf ich
für dich tun?
Portfolio | Web Development | HTML5 Banner und HTML5 Werbebanner, App Entwicklung & App Development, Lottie Animation | Selbstständiger Freiberufler und Freelancer | Aus Hilden und rund um Düsseldorf, Köln, Langenfeld, Wuppertal, Solingen, Haan und Umgebung | Bundesweit Remote
Kontakt
Michael Weidenfeld
Motion Design
Kontakt
Anderes
USt-ID:
DE324069478
Anderes
Netzwerke & mehr