Webdesign, Tutorials und mehr - Webmasterpro.de

Mac OS X Dashboard Widgets

Einleitung

Anhand Webstandards wie HTML, JS und CSS kann man kleine Programme – so genannte Widgets – kreieren, die sich im Dashboard befinden, eine über dem System schwebende aufrufbare Ebene. Ein Widget ist im Grunde eine HTML-Seite, die mit CSS formatiert ist und duch JS interaktiv wird.

Dies hört sich einfach an, da jeder der Webseiten erstellen kann, solche Widgets machen kann. Doch für ein gutes und erfolgreiches Widget sind einige Wichtige Punkte zu beachten.

Dashboard mit Widgets

Apple bietet auf ihrer Entwickler-Webseite viele nützliche und gut beschriebe Dokumentationen. Die Dokumentationen sind alle auf Englisch und sehr theoriebezogen. Dennoch sollte man vor dem Entwickeln eines Widgets einen Blick auf diese werfen, vor allem auf die Design Guidelines.

• Dashboard Programming Topics
• Dashboard Reference
• Dashboard Tutorial
• Dashcode User Guide

Aufbau und Funktionsweise eines Widgets

Ein Widget ist im Grunde ein Ordner indem alle Bestandteile wie HTML-, CSS-, JS und Bilddateien vorhanden sind. Der Ordner hat einen Namen im Format MeinWidget.wdgt. Durch die Endung wdgt erkennt das System, das es sich bei diesem Ordner um ein Widget handelt. Daher verhält sich dieser Ordner nicht mehr wie ein Ordner, d.h. wenn man es im Finder anwählt, wird der Inhalt nicht angezeigt. Um den Inhalt zu sehen müssen Sie auf das Widget rechts-klicken bzw. control-klicken und dann den Punkt “Paketinhalt anzeigen” auswählen.

In diesem Ordner müssen die folgenden Dateien vorhanden sein, da diese fundamental für ein Widget sind:

• MeinWidget.wdgt
  • Info.plist
    Beinhaltet Informationen über das Widget.
  • MeinWidget.html
    Eine Webseite, die als Benutzeroberfläche dient.
  • Icon.png
    Ein Icon des Widgets für die Darstellung in der Widgetliste in Dashboard.
  • Default.png
    Ein Screenshot des Widgets, welches während dem Laden des Widgets anstatt der HTML-Datei angezeigt wird.

Näheres zu diesen Dateien finden Sie im Abschnitt Erstellen der Bestandteile.

Es ist naheliegend, dass man für das CSS auch eine Datei erstellt sowie mehrere Dateien für das JS. Daher hat ein Widget im Normalfall viel mehr Dateien als die obligatorischen vier. Man kann alle Dateien ausser den obligatorischen beliebig in Ordner gliedern, z.B. je ein Ordner für Bilder, JS-Dateien und CSS-Dateien.

Widget planen und designen

Die Planung ist ein wichtiger Bestandteil bei der Erstellung des Widgets. Dieser Punkt sollte nicht zu kurz kommen, da ansonsten im fertigen Produkt schwerwiegende Usability-Probleme auftauchen können.

Planung

Ein Widget ist ein kleines, auf eine Aufgabe spezialisiertes Programm. Das heisst, anstatt ein Widget zu erstellen, das drei Aufgaben in einem vereint, sollte man drei Widgets erstellen, die je auf eine Aufgabe ausgerichtet sind. Überlegen Sie sich gut, was die Aufgabe Ihres Widget ist. Durchdenken Sie auch, auf welche Weise der Benutzer mit dem Widget interagieren wird. Machen Sie sich skizzen. Es ist nicht einfach auf engem Raum komplexe Aufgaben zu lösen.

Einige weitere Punkte, die man beachten sollte, sind:

• Ein Widget sollte nicht viel Platz einnehmen. Präsentieren Sie Informationen auf kompakte Art z.B. durch ein Bild (wie beim Wetter Widget) oder durch einen kurzen Text. Sie haben immer noch die Möglichkeit durch Tooltips dem Benutzer etwas genauer erklären. Unwichtige Informationen gehören auf die Rückseite. Werbung ist ein absolutes Tabu.
• Ein Widget sollte selbsterklärend sein. Planen Sie es so, dass es einfach zu verstehen ist.
• Dashboard wird vom Benutzer aufgerufen, da dieser Informationen von beispielsweise Ihrem Widget entnehmen will. Daher sollte die Information sofort sichtbar sein. Der Benutzer will nicht warten bis diese berechnet ist.

Designen

Ein Widget muss auf engem Raum dem Benutzer Informationen bieten. Dabei darf der visuelle Aspekt nicht in den Hintergrund geraten. Der Benutzer wird es ständig sehen. Verwenden Sie für das Auge angenehme Farben. Ecken sollten vermieden werden, runde Ecken passen besser in das Dashboard Umfeld. Normale Aqua Elemente wie Auswahllisten sollten nicht verwendet werden, da es sich bei Dashboard klar um ein anderes Design handelt. Auf der Rückseite jedoch sollten diese verwendet werden, da man dort Einstellungen vornimmt und diese in gewohntem Aqua dem Benutzer bekannter sind.

Wahl des Editors

Dashcode beim Bearbeiten eines Widgets

Zunächst sollte man sich entscheiden, welchen Editor man für die Erstellung des Widgets verwenden will. Entweder verwendet man Dashcode, ein Editor von Apple speziell für die Entwicklung von Widgets, oder den Editor Ihrer Wahl. Für Anfänger ist Dashcode vorzuziehen, da es Ihnen viel Arbeit übernimmt, aber für fine-tuning eines Widgets eher mühsam ist, da es viel eigenen Code erstellt, der für fortgeschrittene Programmierer eher störend als hilfreich ist. Hier die Vor- und Nachteile von Dashcode:

Vorteile von Dashcode

• Gut für Anfänger, da ein WYSIWYG-Editor mit vorgebauten Elementen wie Slider oder Scrollboxen beim Erstellen der Benutzeroberfläche hilft.
• Übernimmt einige Aufgaben wie das Erstellen des Icons.
• Macht die Lokalisierung (Übersetzung in andere Sprachen) des Widgets kinderleicht.
• Mit dem integriertem Debugger kann man das Widget jederzeit testen und anhand Breakpoints Fehler schnell finden.

Nachteile von Dashcode

• Da es sich um einen WYSIWYG-Editor handelt, ist der entstehende Code aufgebläht. Dabei sollte das Widget so leicht wie möglich sein, da es ständig offen ist, wobei dieser Punkt vor allem beim JS zu beachten ist.
• Eigener CSS-Code wird oft überschrieben.
• Umstellung auf Dashcode, d.h. andere Farben und das Nichtvorhanden von Funktionen, die man aus dem bevorzugten Editor kennt.

Auch wenn man Dashcode nicht verwendet, kann man sein Widget in Dashcode öffnen und dessen hervorragenden Debug-Modus verwenden.

Bestandteile erstellen

Info.plist

Die Datei Info.plist beinhaltet Informationen über das Widget, die von Dashboard und dem System gelesen werden. Es handelt sich um eine Property List-Datei im XML-Format. Man sollte diese Datei mit dem Property List Editor bearbeiten bzw. erzeugen. Sie besteht aus Paaren von Schlüsseln und Werten. Vier Schlüssel sind obligatorisch:

Es gibt viele weitere Schlüssel, die z.B. festlegen, ob das Widget Zugang zum Internet braucht oder die Breite des Widgets. Eine Liste aller Schlüssel finden Sie in der Dokumentation.

Eine Info.plist könnte in beispielsweise wie folgt aussehen:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleDisplayName</key>
    <string>MeinWidget</string>
    <key>CFBundleIdentifier</key>
    <string>com.meineseite.MeinWidget</string>
    <key>CFBundleName</key>
    <string>MeinWidget</string>
    <key>CFBundleVersion</key>
    <string>1.0</string>
    <key>CloseBoxInsetX</key>
    <integer>8</integer>
    <key>CloseBoxInsetY</key>
    <integer>15</integer>
    <key>Height</key>
    <integer>200</integer>
    <key>MainHTML</key>
    <string>MeinWidget.html</string>
    <key>Width</key>
    <integer>240</integer>
</dict>
</plist>

HTML-Datei

Die HTML-Datei kann beliebig benannt werden, ist jedoch meistens nach dem Widget benannt. Achten Sie darauf, dass der Pfad zu dieser Datei unter dem Schlüssel MainHTML in der Info.plist stimmt.

Diese Datei ist die Benutzeroberfläche des Widgets. Ein Widget hat im Normalfall eine vordere Seite, auf der sich die eigentliche Funktion des Widgets befindet, und eine hintere Seite, auf der sich die Einstellungen oder weniger wichtige Informationen befinden. Beide Elemente müssen in dieser Datei vorhanden sein. Daher ist es naheliegend, dass man im <body> zwei <div>-Elemente hat, eines für vorne und eines für hinten.

Um auf die hintere Seite zu gelangen, brauchen wir ein i-Knopf, welcher Standard ist. Jeder Dashboard Benutzer weiss, dass durch einen Klick auf das i das Widget gedreht wird. Damit alle Widgets dies auf diese Weise implementieren, hat Apple diese i-Buttons in jedem System mitgeliefert und dazu eine JS-Klasse um Ihnen die Arbeit zu erleichtern.

Über den Autor: Philipe Fatio

hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten

Kommentare: Mac OS X Dashboard Widgets