Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Mac-Boilerplate für HTML und CSS: Mit Photon schicke Mac-Apps erstellen

    Mac-Boilerplate für HTML und CSS: Mit Photon schicke Mac-Apps erstellen
Das Mac-Boilerplate Photon. (Grafik: Shutterstock)

HTML, CSS und JavaScript bedienen schon lange nicht mehr nur Webseiten. Schon seit längerer Zeit können Desktop-Apps auf Basis von Web-Technologien erstellt werden. Damit das auch hübsch aussieht, gibt es HTML- und CSS-Boilerplates. Wir schauen uns heute die Mac-Boilerplate Photon an.

Für Smartphone- und Tablet-Applikationen gibt es eine Vielzahl an HTML- und CSS-Boilerplates, die den nativen Look einer App nachempfinden. In vergangenen Artikeln haben wir solche HTML- und CSS-Boilerplates schon vorgestellt. Damit aber auch eine Desktop-Applikation für den Mac ausieht wie eine echte Desktop-Applikation, gibt es eine Mac-Boilerplate namens Photon.

Die Mac-Boilerplate Photon im Einsatz

Eine Demo vom Mac-Boilerplate Photon. (Screenshot: Photon)
Eine Demo vom Mac-Boilerplate Photon. (Screenshot: Photon)

Der Aufbau und der Umgang mit Photon ist simpel. Wir können mit den gelieferten Assets unsere eigene Mac-Applikation visuell erstellen. Dabei kann die Entwicklungsumgebung, wie auch bei einer Webseite üblich, aus Browser und Editor bestehen. Vorzugsweise sollten wir hierbei auf den Chromium oder Google Chrome setzen.

Bevor wir beginnen können, müssen wir natürlich das Photon-Paket herunterladen. Das können wir direkt über das GitHub-Repository oder über die offizielle Photon-Seite tun. Zu empfehlen ist für Einsteiger die Precompiled-Photon-Version. In der erhalten wir nicht nur die benötigten Assets, sondern auch direkt eine vorgefertigte Projektstruktur für unsere App.

Jetzt können wir beginnen, unsere App zu füllen. Über die index.html-Datei können wir die grundsätzliche Struktur bearbeiten und verändern. Da Photon eine fertige CSS-Datei mit vielen Mac-Styles liefert, können wir uns frei bedienen und unsere Elemente mit Klassen und IDs bestücken. Damit wir einen Überblick über die Möglichkeiten der Komponenten erhalten, können wir einen Blick auf die Components-Seite werfen.

Wollen wir beispielsweise einen Mac-typischen Header und Footer setzen, reichen schon folgende Zeilen:

<header class="toolbar toolbar-header">
<h1 class="title">Header</h1>
</header>
<footer class="toolbar toolbar-footer">
<h1 class="title">Footer</h1>
</footer>

Über die Klassen wird der Style aus der mitgelieferten CSS-Datei zugeordnet. Grundsätzlich gibt es im Erstellungsprozess keinen Unterschied zu einer normalen Webseite.

Die Mac-Boilerplate Photon verpacken

Haben wir unser Projekt abgeschlossen und mit unseren Funktionalitäten gefüllt, können wir aus diesem Projekt eine fertige App erstellen. Die einfachste Möglichkeit ist, sie als Web-App auf einem Server bereitzustellen und mit Fluid als Desktop-Anwendung zu benutzen. Natürlich können wir auch das Xcode-Projekt MacGap benutzen, um unsere App in einen nativen Container einzubetten.

Die wohl beste, aber auch anspruchsvollste, Lösung ist sicherlich, Electron von GitHub einzusetzen. Auch der Atom-Editor oder der Slack-Client basieren auf dieser Engine. Mit ihr lassen sich unsere HTML-, CSS- und JavaScript-Dateien in einen Container verpacken, der auf Chromium und Node.js setzt. Damit wird auch ermöglicht, dass Node.js-Module eingebettet werden können und unsere Applikation funktionell auf ein ganz neues Level gehoben werden kann. Der Export einer solchen App kann zugleich für Mac, Windows und Linux erfolgen.

Habt ihr auch schon Desktop-Applikationen mit Web-Technologien entwickelt?

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen