E-Visitenkarte

Elektronische Visitenkarte in HTML und CSS Code als Web-App | E-Book

Traditionell vs. Elektronisch

Visitenkarten sind traditionell gesehen rechteckige Karten mit wenigen Informationen aufgedruckt. Entfernt man das Papier als Trägermaterial, bleiben nur die reinen Informationen übrig. In diesem Beispiel verwenden wir ein anderes Trägermaterial, wir Benutzen die Programmiersprache HTML + CSS als Trägermaterial sozusagen.

Nur wenige Bytes

Nahezu verblüffend schaut es aus, wenn man die grösse des Web- Apps ansieht. Die eigentliche E-Visitenkarte ist ca. 1 kB gross, das ist heutzutage ein Witz. Der Code ist zugleich öffentlich und transparent. Ausserdem funktioniert der Code auf allen Web-Browsern, da es sich um eine HTML Datei handelt. Ideal auch für Business-Menschen, die Ihre Visitenkarten z.B. bei der Email ohne Probleme als Anhang versenden können.

Multimedial

Dies ist nur ein kleines Beispiel, aber technologisch gesehen hat die elektronische Visitenkarte als Web-App ein enormes Potential. Multimediale Inhalte sind kein Problem, z.B. Animationen, Videos oder Sounds usw. Denn der moderne Web- Browser versteht auch Multimediale Formate. Auch kompakte Mini-Rechner wie z.B. Raspberry Pi können davon profitieren, denn Web-Apps verwenden keine zusätzliche Systemressourcen als die des Web-Browsers. Eine Software Installation ist auch nicht notwendig, einfach auf die HTML Datei klicken und der Inhalt öffnet sich auf dem Web-Browser. Ein Geheimtipp: Raspberry Pi mit Mini-Display benutzen und Web-Browser auf Vollbildschirm umschalten. Schon hat man eine echte elektronische mobile Visitenkarte!

Programmierung

Die Programmierung einer E-Visitenkarte ist als Web-App kinderleicht. Einfache HTML, CSS und Javascript Grundkenntnisse sind allerdings notwendig.

Die Textblöcke bestehen aus h1, h3 und p Elementen, dessen Inhalte man selber beliebig ändern kann. Die Anordnung bzw. Zentrierung der Textblöcke geschieht durch ein CSS-Trick: Der Body-Bereich wird mit der Anweisung "display: table" in ein Tabellenformat umgewandelt. Die Inhalte im ".zentral"-Bereich werden mit der Anweisung "display: table-cell" in Tabellen-Zellen umgewandelt. Dadurch werden alle Elemente in der Tabellen-Zelle automatisch zentriert, auch wenn man die Fenstergrösse ändert, passt sich die Zentrierung dynamisch an. Natürlich kann man zusätzlich Textfarbe, Hintergrundfarbe, Typographie usw. nach Lust und Laune ändern.




Spende

Markllet ist ein DIY-Erfinder Blog und entwickelt digitale Inhalte bzw. technische Projekte zum Selbermachen. Falls Ihnen dieses Projekt gefallen hat, wäre Markllet für eine kleine Bitcoinspende sehr dankbar. Dadurch können weitere Projekte entwickelt und kostenlos zum Download angeboten werden.

Vielen Dank!
Markllet

Bitcoin: 1ABB6C9wUS4XGkgvr9o5GdxMFXYAHGdCdu
Markllet.de | info(at)markllet(dot)de

Der Umwelt zuliebe: Dies ist eine Web-App und arbeitet nahezu auf allen bekannten Web-Browsern, falls keine speziellen Schnittstellen (APIs) erforderlich sind. In allen modernen Betriebs- bzw. Hardwaresystemen sind Web-Browser implementiert. Bitte nutzen Sie diese Möglichkeit aus und vermeiden Sie das Drucken auf Papier. Dadurch können wir unsere Umweltressourcen schonen.