“Hallo Welt”: Eine einfache Browser-Erweiterung

Mit einer Browser-Erweiterung lassen sich neue Funktionen zu einem Browser hinzufügen. In diesem Tutorial geht es darum, eine sehr einfache Browser-Erweiterung zu basteln, welche ein Popup mit der Botschaft “Hallo Welt” anzeigen kann. Natürlich handelt es sich um keine sehr nützliche Erweiterung. Sie dient aber hervorragend zur Verdeutlichung der Grundstrukturen und erleichtert die ersten Schritte auf dem Wege zum Chrome-Erweiterungen-Profi. Ich, als völliger Neuling mit den richtigen Voraussetzungen ausgestattet, bin alle Schritte, am Ende sogar erfolgreich, durchgegangen.  Jetzt kann ich mit gutem Gewissen und aus eigener Erfahrung darüber berichten.

Schritt 1: Eine Manifestdatei erstellen

Als Erstes lege ich einen separaten Ordner an, in dem sich später alle Dateien, die für die zukünftige Chrome-Erweiterung benötigt werden, befinden sollen. Danach öffne ich “Notepad” (man kann natürlich auch einen anderen Texteditor verwenden), kopiere den aus Bild 1 ersichtlichen Code hinein und speichere die Datei unter dem Namen “manifest.json” im Ordner ab. Die Manifestdatei enthält alle Informationen über die Funktionsweise der Erweiterung. Nun kann man die Informationen der Beispieldatei anpassen. Was da genau gemacht wird, beschreibe ich in den weiteren Schritten.

Bild 1: Anlegen der Manifestdatei

Schritt 2:  Anlegen der Datei popup.html

Unsere Erweiterung soll beim Klicken auf das Erweiterungsicon ein Fenster mit dem Text “Hallo Welt” aufmachen. Dafür öffnet man eine neue Editordatei und kopiert den entsprechenden Code (Bild 2) hin. Die Datei wird unter dem Namen “popup.html” abgespeichert. Das Popup zeigt diese HTML-Datei in einem separaten Fenster an.

Bild 2: Erstellung des Popup

Schritt 3: Weitere Dateien gemäß Manifest-Datei

Da in der Manifestdatei weitere Dateien deklariert wurden, müssen diese ebenfalls angelegt werden. Jetzt erstelle ich noch zwei neue leere Dateien im Editor auf und nenne sie background.html und inject.js. Ich verwende das vorgefertigte Icon von Jef. Natürlich kann man ein beliebiges, anderes Icon nehmen, beispielsweise aus einem Freebie.

Los geht’s!

Meine Chrome-Erweiterung ist nun fertig. Um sie zu aktivieren, öffne ich den Chrome Browser und klicke auf das Schraubenschlüssel-Symbol. Im Menü wähle ich “Tools”, dann “Erweiterungen”, setze  ein Häkchen bei “Entwicklermodus” und klicke auf “entpackte Erweiterung laden”. Dann öffne ich den Ordner mit den zuvor erstellten Dateien, womit diese nun geladen werden. Oben rechts erscheint das ausgewählte Icon. Ich klicke darauf und erblicke mit grosser Freude das Popup mit den Worten “Hallo Welt”.

Bild 3: Es funktioniert tatsächlich!

Background.html und inject.js

Die Erweiterung kann weiter aufgebohrt werden. Im Weiteren habe ich erfahren, welchen Sinn die Dateien “background.html” und “inject.js” haben. Background-Pages (Hintergrundseiten) sind in HTML5-Code eingebettete JavaScripte, die für den Nutzer nicht sichtbar sind. Sie werden aber ständig im Hintergrund ausgeführt (daher auch der Name) und fungieren als Vermittler zwischen allen Erweiterungen, sowie allen aktuell geöffneten Tabs. Um meine Hintergrundseite auszubauen, habe ich in meine background.html folgenden Code eingefügt:

Bild 4: Ausbauen einer Hintergrundseite

Um die eigenen Hintergrundseiten zu debuggen, sollte man die eigens zu diesem Zweck verfügbare Debugging-Konsole aktivieren. Zu diesem Zweck gehe ich gemäß Jefs Anleitung auf die Erweiterungsseite, um dort die “background.html” zu wählen. Nun wird die Debugging-Konsole aktiviert und folgendes Fenster geöffnet:

Bild 5: Aktivieren der Debugging-Konsole

Content-Scripts und Message-Passing

Weiter geht es um JavaScripte, welche mit Hilfe der Verwendung von DOM Inhalte einer Webseite lesen können. Damit zwischen dem sogenannten Content-Script ein Datenaustausch mit der Hintergrundseite erfolgen kann, muss das sogenannte Message-Passing, also ein Informationsaustausch, erfolgen. Dies ist erforderlich, weil die Content-Scripte zusammenhängend mit verschiedenen Webseiten laufen und nicht mit Hintergrundseiten. Also müsste ich die background.html-Datei nochmal verändern. Nun sieht meine background.html folgendermaßen aus:

Bild 6: Kommunikation zwischen der Hintergrundseite und dem Content-Script mittels Message-Passing

Durch das strikte Befolgen sämtlicher Anleitungsschritte habe ich meine erste Erweiterung in Chrome gebaut und zusätzlich einiges an Hintergrundwissen gewonnen. Wenn man keine tiefen Kenntnisse in HTML5, CSS3 und JavaScript hat, aber dennoch eine Erweiterung selber basteln möchte, ist dieses Tutorial für den Einstieg sehr hilfreich.

Weitere Quellen zur Entwicklung eigener Erweiterungen in Chrome

Folgend habe ich noch ein paar Links zu weiteren Tutorials hinzugefügt, welche sich ebenfalls mit Erweiterungen für Chrome beschäftigen:

• Chrome Extensions: Hello World – ugotit.de
• Making your first Google Chrome extension – TutorialZine.com

(dpe)

Das folgende Szenario wollen wir entwickeln. Unsere Seite soll herausfinden, welche Unternehmen welcher Branchen sich in der Nähe des aktuellen Standorts des Nutzers befinden. Zum Beispiel könnte man alle Bars der Branche Gastronomie anzeigen lassen wollen. Zu diesem Zweck eignet sich die Geolocation-API der HTML5-Spezifikation, die das Auslesen des Standorts des Nutzers zulässt.

Bevor wir tiefer in die Materie einsteigen, sollten Sie sich zunächst einen API-Key von Google besorgen, den sie unter diesem Link unter Verwendung eines Google-Accounts erhalten.

Zu Beginn sollte man versuchen, die aktuellen Standortdaten des Nutzers zu erhalten. Dazu verwendet man das navigator-Objekt, welches verschiedene Informationen über den Nutzer enthält, unter anderem die Positionsdaten. Man erstellt also eine Funktion namens get_location() und ruft darin navigator.geolocation.getCurrentPosition(get_places, errors_action); auf.

function get_location() {
   navigator.geolocation.getCurrentPosition(get_places, catch_errors);
}

In der Funktion getCurrentPosition ist es nötig, mindestens zwei Parameter anzugeben. Diese stehen jeweils für Funktionen, die als Callback für getCurrentPosition dienen. Der erste Parameter wird bei einem erfolgreichen Ermitteln der aktuellen Position aufgerufen, der zweite bei einem entsprechenden Fehler. Da es meiner Ansicht nach eine gute Praxis ist, zuerst mögliche Fehler abzufangen, sollte man dies auch wirklich anfangs tun.

Geolocation Fehler abfangen

Abfangen sollte man dabei primär PERMISSION_DENIED (Nutzer weist Anfrage auf Erlaubnis der Standort-Mitteilung ab), POSITION_UNAVAILABLE (Es konnte aus technischen Gründen kein Standort ermittelt werden) und TIMEOUT (Die Anfrage benötigte zu viel Zeit). In unserem Beispiel geben wir, um das Ganze einfach zu halten, die Fehlermeldung lediglich über ein alert-Fenster aus. Dazu erstellt man eine Funktion mit dem Bezeichner catch_errors():

function catch_errors(error) {
    switch(error.code){
         case error.PERMISSION_DENIED: alert("Der Nutzer moechte keine Daten teilen.");break;
         case error.POSITION_UNAVAILABLE: alert("Die Geodaten sind nicht erreichbar.");break;
         case error.TIMEOUT: alert("Timeout erhalten");break;
         default: alert ("Unbekannter Error");break;
    }
}

Google Places API nutzen

Die eigentliche Logik soll in der Funktion get_places entwickelt werden. Dazu werden die aktuellen Standortdaten aus der Geolocation API verwendet. Folgende Informationen stellt die API zur Verfügung, nachdem der Nutzer dies genehmigt hat:

• Latitude & Longitude – Geographische Koordinaten
• Altitude – Höhe des Standortes in Metern
• Accuracy – Genauigkeit der Koordinaten-Angaben in Metern
• AltitudeAccuracy – Genauigkeit der Höhenangabe in Metern
• Heading – Bewegungsrichtung des Nutzers in Grad im Uhrzeigersinn
• Speed – Geschwindigkeit in m/s

Ziemlich viele Daten, die der Nutzer dem Entwickler offen legt, verlässlich und nützlich sind sie dabei nicht immer. Um auf die Daten Zugriff zu nehmen, erstellt man anfangs wieder einen Funktionsrumpf:

get_places(position){
 
}

Im Funktionsrumpf befindet sich nun bereits der Parameter position und position enthält die nötigen Informationen. Für die Google Places-API braucht man im Grunde nur Latitude und Longitude, sowie die Genauigkeit. Also erweitern wir unsere Funktion get_places um das Übergeben der Daten an folgende Variablen:

var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var accuracy = position.coords.accuracy;

Als Nächstes muss die Places API-URL vorbereitet werden:

var places_url = "https://maps.googleapis.com/maps/api/place/search/json?location="+ latitude +","+ longitude +"&radius="+ accuracy +"&types=food&sensor=true&key=EuerEigenerKEY";

In die URL sind verschiedene Parameter einzupflegen. Für den Parameter location werden Breiten- und Längengrad, geteilt durch ein Komma angegeben. In Radius muss der Umkreis der Places-Ermittlung angegeben werden. Dieser könnte prinzipiell auch individuell übergeben werden, Google selber empfiehlt aber in der Places-Dokumentation die Verwendung der Genauigkeit der Ortsangabe. Unter Types kann der Typ (also Gastronomie etc.) der zurück gegebenen Informationen eingegrenzt werden. Unter Sensor stellt man mittels true oder false ein, ob die Informationen vom Client manuell oder mittels eines GPS-ähnlichen Moduls angegeben wurden. In den Parameter Key gehört der weiter oben generierte API-Key. Es gibt weitere Parameter, über die die Places Dokumentation Auskunft erteilt.

Das Ganze an Google zu senden, um eine Antwort zu erhalten, ist im Moment wegen fehlender JSONP-Unterstützung nur schwer möglich, Alternativen finden sich hier. Der beste Weg ist die direkte Implementation in die Anwendungslogik, anstatt über JavaScript zu gehen.

Gastronomie in Rostock mit Hilfe von Google Places finden

Google Places antwortet in JSON

Die Verwendung von XML ist ebenfalls zulässig. Ich zeige hier am Beispiel die Informationen, die man in JSON zurück erhält.

Zuerst erfolgt die Nennung der Quelle der Angaben. In Deutschland sind das oft die “Gelben Seiten”:

"html_attributions" : [
      "Einträge aus \u003ca href=\"http://www.gelbeseiten.de/\"\u003eGelbeSeiten®Verlagen\u003c/a\u003e"
   ]

Danach bekommt man in results die eigentlichen Ergebnisse:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
"geometry" : {
"location" : {
"lat" : 54.086360,
"lng" : 12.0959770
}
},
"icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/stadium-71.png",
"id" : "271b187642f633794399fcdac286c2a9b12ab3fc",
"name" : "DKB Arena",
"rating" : 5.0,
"reference" : "CnRoAAAAwWS51nGZjagN0S...",
"types" : [ "stadium", "establishment" ],
"vicinity" : "Kopernikusstraße 17, Rostock"
},

Dabei gibt geometry den exakten Standort des Ergebnisses aus, icon zeigt ein zum Ergebnis passendes Bild, id einen eindeutigen Bezeichner, reference kann für detailliertere Informationen über das Ergebnis genutzt werden, vicinity enthält einen umgebenden bekannten Standort und types die Kategorie des Ergebnisses.

Wie nutze ich Google Places effektiv ?

Sinn ergibt dieser Einsatz von Google Places zum Beispiel, wenn man ein Unternehmen mit mehreren Filialen betreibt und dem Nutzer automatisch alle Filialen und spezielle Angebote in seinem Umkreis anzeigen lassen möchte. Ein anderer Anwendungsfall kann darin bestehen, alle Geschäfte in der Umgebung anzuzeigen, in denen bestimmte Services, etwa alle Coca-Cola Verkaufsstellen, verfügbar sind. Im Endeffekt ist die Geolocation API relativ einfach zu bedienen und kann in Verbindung mit Google Places zu einem durchaus mächtigen und sinnvollen Tool auch für eigene Geschäftsanwendungen sein, egal ob es um Empfehlungen oder logistische Prozesse geht.

(dpe)

So sieht sich der Mozilla Marketplace perspektivisch

Mozilla WebRT und Native Install: Chrome lässt grüßen

Um Wortschöpfungen ist man im Web seit jeher nicht verlegen. Mozilla spricht gern von der Web Run-Time oder WebRT, meint damit aber im Grunde HTML5 als Sammelbegriff für den Dreiklang aus HTML, CSS und JavaScript. Auf dieser WebRT setzt das Projekt Open Web Apps auf, an dem Mozilla seit geraumer Zeit arbeitet. Open Web Apps beinhaltet das Konzept eines eigenen, von Mozilla betriebenen Marketplace. Nach allem, was bisher besichtigt werden kann, baut Mozilla hier die Funktionalität und Funktionsweise des Chrome Webstore weitgehend nach. Desweiteren gehört zum Projekt Open Web Apps eine extensive Dokumentation, die im Detail erläutert, worauf Developer achten müssen, wenn sie ihre Web-App zu einer installierbaren Anwendung im Rahmen der Apps Native Install machen wollen. Nicht zuletzt stellt man eine JavaScript API, sowie Zugang zu Geräte-APIs mobiler Clients bereit.

Jetzt steht der zum Konzept gehörende Marketplace kurz vor dem öffentlichen Start. Zumindest US-amerikanische Developer sind bereits jetzt aufgefordert, ihre Apps einzureichen. Die flinke Entwicklerschmiede Evernote gehört auch hier wieder zu den Pionieren und hat ihre Web-App bereits untergebracht. Derzeit können jedoch nur an der Betaphase beteiligte Account-Inhaber auf den Marketplace zugreifen. Aussagen zur Funktionalität der Evernote-Umsetzung für den Firefox sind mir daher noch nicht möglich.

Mozillas Native Apps Install Experience: Nicht viel mehr als ein Launcher

Jede Web-App, die die Mozilla WebRT nebst Marketplace nutzen will, muss – wie in Chrome Webstore oder Play Store für Android – mit einer Manifest-Datei ausgestattet sein. Anders als unter Googles Ägide ist es beim Mozilla Marketplace vorgesehen, die Installation auch über Dritt-Websites, etwa die eigene Webpräsenz ermöglichen zu können. So sieht eine einfache Manifest-Datei aus. Unter installs_allowed_from können Sie sehen, welche Websites der Entwickler als Quasi-Repository autorisiert hat:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    {  
      "version": "1.0",  
      "name": "KO Round Timer",  
      "description": "A Workout Timer for Fighting Athletes!",  
      "icons": {   
        "128": "/images/icon-128.png"  
      },    
      "developer": {  
        "name": "Joe Stagner",  
        "url": "http://koscience.com"  
      },  
      "installs_allowed_from": [  
        "http://timer.koscience.com", 
	"https://marketplace.mozilla.org"   
      ],    
      "default_locale": "en"  
    }

Zu beachten ist allerdings, dass man seinen Web-Apps eine eigene Installationslogik beibringen muss, wenn man sie außerhalb des Marketplace installierbar machen will. Die Distribution über den Marketplace erfordert diesen zusätzlichen Aufwand nicht. In diesem Blogpost erklärt Mozillas Joe Stagner ausführlich und anhand von Beispielen, wie man die eigene Installationslogik relativ einfach implementieren kann.

Derzeit unterstützen nur die Nightlies für Windows und Mac das Native Install. Versionen für Linux und Android sollen bald folgen. Unter Windows sorgt der Installationsprozess dafür, dass die Web-App einen Desktop-Shortcut, sowie einen Eintrag ins Startmenü erhält, so dass der Eindruck einer lokal installierten App möglichst originalgetreu nachgebildet wird. Weitergehende Funktionalitäten bedient das Native Install jedoch nicht. So erhält man mit der Installation zwar einen lokalen Launcher, der auch eine passende UI um die App legt, jedoch keine weiteren Offline-Fähigkeiten. Will man seiner App die Möglichkleit zur lokalen Speicherung angedeihen lassen, so erfordert das den eigenhändigen Einsatz anderer Technologien, etwa localStorage, über das Kollege Sven Schannak hier im Dr. Web Magazin vor kurzem schrieb.

Meine Meinung: Ich sehe durchaus ein Potenzial in Mozillas Konzept, allerdings nicht unter klassischen Desktop-Betriebssystemen. Schon den Chrome Webstore nutze ich allenfalls als bunte Bookmarksammlung. Von einem Chromebook, das mit überaus mäßigem Erfolg vor sich hindümpelt, aus betrachtet, sieht die Sache natürlich ganz anders aus. Mozilla zielt mit dem Native Install unter anderem auf die Android-Plattform. Hier könnte sich das Konzept zum Erfolg entwickeln, aber eben nur hier. Oder bin ich zu pessimistisch und übersehe das Killerargument?

Dieser Dynamo erlaubt berechtigte Zweifel an seiner Dynamik (Bildquelle: Hans Snoek – www.hs-buch.de / pixelio.de)

dynamo.js: Dynamische Textschnipsel

dynamo.js ist ein simples JavaScript des Developers Jordan Scales. Er schuf es, um Textinhalte mit Animationen dergestalt auszustatten, dass Textteile ausgewechselt werden. Das ist auf den ersten Blick eine reichlich unnötige Angelegenheit, entwickelt aber auf den zweiten, kreativen Blick durchaus interessante Möglichkeiten.

dynamo.js arbeitet mit dem Data-Attribut und einer CSS-Klasse namens dynamo, auf die dann die Funktion .dynamo() losgelassen wird. Um beispielsweise den folgenden Satz

<p>Ich wünschte, ich hätte Flügel</p>

mit völlig neuen Bedeutungen zu versehen, könnte man dynamo.js wie folgt verwenden:

<p>Ich wünschte, ich hätte <span class="dynamo" data-lines="zehn&nbsp;Millionen&nbsp;Euro,immer&nbsp;Recht,Urlaub">Flügel</span></p>

Nun würde dynamo.js die innerhalb des Data-Atributs data-lines stehenden Ausdrücke alle drei Sekunden durchwechseln. Man erhielte:

Ich wünschte, ich hätte Flügel

Ich wünschte, ich hätte zehn Millionen Euro

Ich wünschte, ich hätte immer Recht

Ich wünschte, ich hätte Urlaub

Der Effekt lässt sich auf der Website zu dynamo betrachten. Umlaute, Leer- und sonstige Sonderzeichen sollte man sicherheitshalber in ihren jeweiligen Entitäten schreiben. Das JavaScript ist da wohl nicht sehr tolerant.

Zusätzlich zur Angabe der rotierenden Inhalte kann über die Attribute data-speed und data-delay die Geschwindigkeit der Rotation gesteuert werden. Die Nutzung des Attributs data-center zentriert die Textinhalte innerhalb des Span. Grundsätzlich lässt sich .dynamo() auf jedes Element anwenden. Durch eine wilde Kombination innerhalb ein und desselben Textes kann es zu geradezu chaotischen inhaltlichen Verfremdungen eingesetzt werden.

Das Script steht auf GitHub zur kostenlosen Nutzung unter MIT-Lizenz bereit. Es setzt jQuery voraus.

skrollr steuert Animationen über Data-Attribute

skrollr erlaubt die Animation jedweder CSS-Eigenschaft eines beliebigen Elements in Abhängigkeit zur Position des horizontalen Scrollbalkens. Dabei wird die Animation über Data-Attribute gesteuert. Der folgende (vergleichsweise extrem einfache) Codeschnipsel etwa führt zu einer Änderung der Hintergrundfarbe der Website während des Scrollvorganges.

<body data-0="background:hsl(0, 50%, 70%);" data-end="background:hsl(360, 50%, 70%);">

data-0 bezeichnet dabei den Ausgangszustand und data-end den Endzustand. skrollr berechnet die Zwischenzustände automatisch.

Die Steuerung erfolgt über Keyframes aus dem DOM und kann daher sehr fein werden. So lassen sich äußerst komplexe Animationen erdenken, wie etwa die Beispielwebsite erkennen lässt. Kenntnisse in JavaScript sind für die Verwendung der skrollr-Funktionalität nicht erforderlich, in CSS sollte man indes möglichst firm sein.

Da innerhalb der Data-Attribute mit CSS gearbeitet wird, sind den Möglichkeiten kaum Grenzen gesetzt. Das viel diskutierte Vendor-Prefixing erledigt skrollr automatisch, da ein manuelles Prefixing innerhalb der skrollr-Syntax gar nicht möglich wäre.

skrollr benötigt keine sonstige Unterstützung in Form von etwa jQuery oder anderen Bibliotheken und bringt schlanke 2k auf die Waage. Die kleine Animations-Bibliothek wird maßgeblich von Alexander Prinzhorn entwickelt und steht auf GitHub unter MIT-Lizenz zur kostenlosen Nutzung bereit.

Wie funktioniert Catapulty?

Catapulty ist ein Dienst, der URLs speichert und für alle auf dem Testsystem installierten Browser verfügbar macht. Dabei ist Catapulty allerdings keine Browser-Erweiterung, sondern besteht lediglich aus zwei Bookmarks, die in allen Browsern, in denen man den Dienst nutzen möchte, abgelegt werden müssen.

Catapulty im Chrome

Bei den Bookmarks handelt es sich um sogenannte Bookmarklets. Es wird also keine URL in dem Lesezeichen gespeichert, sondern ein kleines JavaScript-Makro. Mit dem Bookmarklet „Throw“ sendet man die URL des aktuellen Tabs an Catapulty und macht sie so für andere installierte Browser verfügbar. Über das Bookmarklet „Hit“ lässt sich diese URL dann in einem anderen Browser bequem per Mausklick aufrufen.

Wo werden die URLs gespeichert?

Die beiden Bookmarklets bestehen nur aus jeweils einer kurzen JavaScript-Funktion, bei der mit „location.href“ eine URL aufgerufen wird, an die per JavaScript der aktuelle Zeitstempel sowie eine Zufallszahl angehängt werden. Bei dem „Throw“-Bookmarklet wird zudem noch die zu übertragende URL angegeben:

http://catapulty.com/throw/nocache/1337060464175-512556?thrown=http%3A%2F%2Fwww.drweb.de%2Fmagazin%2F

Über das „Hit“-Bookmarklet wird eine ähnliche URL erzeugt, die an die zuvor per „Throw“ übertragene URL weiterleitet:

http://catapulty.com/hit/nocache/1337060678277-240941

Da alle gängigen Browser Bookmarklets ausführen, lässt sich Catapulty zum Testen von Websites auf Firefox, Chrome, Safari und Internet Explorer einsetzen. Das monotone Copy & Paste hat hier ein Ende.

(dpe)

Businesskarten

Unser erstes Beispiel zeigt Visitenkarten von Jessica Hische. Sie kreierte diese Karten für ihr Projekt Daily Drop Cap. Die Businesskarten beeindrucken durch ihre Einfachheit, verbunden mit dem guten Stil und natürlich durch das schöne Buchdruckdesign.

Businesskarten von Jessica Hische

Die folgende besondere Visitenkarte wurde von der und für die Design-und Druckfirma Publicide entworfen. Die Idee, auf die Karte die Funktionsgrafik einer Buchdruckmaschine aufzubringen, ist originell und beschreibt das Tätigkeitsumfeld der Firma hervorragend.

Businesskarte von Publicide

Die folgende Businesskarte wurde von Ron Roark, Graphikdesigner bei Sony Musik Entertainment, kreiert. Dasselbe Logo verwendet er auf seiner Webseite.

Businesskarte von Ron Roark

Postkarten und Grusskarten

Enormous Champion entwarf und druckte folgendes schöne Stück für Musikliebhaber älteren Semesters.

Voll retro, aber die Tonbandkassette macht sich auf der Grusskarte gut.

Eine schöne Postkarte zur Bekanntgabe der Geburt neuen Lebens hat erneut  Jessica Hische, Designerin und Graphikerin aus San Francisco, vorgelegt.

Geburtsanzeige: Postkarte von Jessica Hische

Hochzeitseinladungen

Hier sind ein paar Beispiele für Hochzeitseinladungen, welche nach den Vorstellungen des jeweiligen Kunden erstellt wurden und bei den Gästen sicherlich gut angekommen sind.

Daniel und Jessicas Einladungen wurden von Alexandra Daley entworfen und gedruckt. Die Einladungskarte besteht aus vielen kleinen Details, welche zusammen ein sehr harmonisches Bild in einer Herzform ergeben.

Einladung zur Hochzeit von Daniel und Jessica

Diese Hochzeitseinladungen, entworfen von Sheraton Green (CSA Design), sind ziemlich bunt und etwas ungewöhnlicher als die vorher gezeigten. Das Bild des Pfau stammt aus der CSA Image Collection.

Einladung zur Hochzeit im “Pfau-Style”

Weitere Quellen zum Thema Buchdruckdesign

• Typography Deconstructed - Poster im Buchdruckdesign
• JessicaHische.com - Inspirationen und Produkte von Jessica Hische
• For Print Only - Ein Blog für Buchdruckdesign
• PaperCrave.com - Eine Inspirationsquelle von Kristen Magee

(dpe)

Zwar lassen sich Dialogboxen auch ohne Bootbox.js erstellen, aber mit Boobox.js ist dies mit deutlich geringerem Aufwand verbunden. Wenige Zeilen JavaScript reichen aus.

Boots are made for walking… (Bildquelle: CFalk / pixelio.de)

Dialogboxen schnell gemacht

Will man eine Dialogbox nur mit Bootstrap realisieren, muss zunächst per HTML die Box inklusive Text und Button ausgezeichnet werden. Anschließend sind einige Zeilen JavaScript notwendig, um den HTML-Elementen die entsprechenden Funktionen zuweisen zu können. Mit Bootbox.js reicht eine einzige Zeile JavaScript aus, um eine fertige Dialogbox zu erhalten:

1
2
3

<script type="text/javascript>
  bootbox.alert("Dies ist eine einfache Dialogbox mit OK-Button.");
</script>

Einfacher Alert-Dialog

Damit Bootbox.js funktioniert, müssen einige JavaScript-Dateien im Header eingebunden werden. Neben der Bootbox.js müssen jQuery sowie das Modal-Plugin von Bootstrap eingebunden werden. Außerdem ist für das Aussehen der Boxen die Bootstrap-Stylesheet-Datei erforderlich:

1
2
3
4
5

<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
 
<script type="text/javascript" src="bootbox.js"></script>

Anschließend können Dialogboxen im Body des Dokumentes aufgerufen werden. Der einfache Alert-Dialog lässt sich auch mit einem individuell beschrifteten Button versehen:

1
2
3

<script type="text/javascript>
  bootbox.alert("Dies ist eine einfache Dialogbox mit individuellem Button.", "Bestätigen");
</script>

Verschiedene Dialogboxen möglich

Neben einfachen Alert-Dialogen können auch Boxen mit Confirm-Dialog erstellt werden, die zum Bestätigen oder Abbrechen einer Aktion auffordern. Für beide Buttons lassen sich Funktionen übergeben, die eine entsprechende Aktion ausführen:

1
2
3
4
5
6
7

<script type="text/javascript>
bootbox.confirm("Seitentitel ändern?", function(result) {
  if (result) {
    document.title = "Neuer Seitentitel";
  }
});
</script>

Auch hierbei kann die Beschriftung der beiden Buttons angepasst werden:

1
2
3
4
5
6
7

<script type="text/javascript>
bootbox.confirm("Seitentitel ändern?", "Nein", "Ja", function(result) {
  if (result) {
    document.title = "Neuer Seitentitel";
  }
});
</script>

Jenseits der Standardmöglichkeiten sind ganz individuelle Boxen mit beliebig vielen Buttons und Aktionen denkbar. Insgesamt gibt es vier unterschiedliche Klassen von Button: „primary“ für einfache Bestätigungsbuttons (standardmäßig blau), „success“ für positive bestätigende Aktionen (grün), „danger“ für ablehnende Aktionen (rot) sowie ein einfacher Button ohne besondere Hervorhebung.

Jedem Button lässt sich eine Klasse, eine Beschriftung sowie eine Funktion zuweisen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script>
bootbox.dialog("Ich möchte …", [
  {
    "label" : "Dr. Web besuchen",
    "class" : "btn-success",
    "callback": function() {
      location.href = "http://www.drweb.de/";
    }
  }, {
    "label" : "Google besuchen",
    "class" : "btn-danger",
    "callback": function() {
      location.href = "http://www.google.de/";
    }
  }, {
    "label" : "Abbrechen"
  }
]);
</script>

Individuelle Dialogbox

Wer das Layout der Dialogboxen anpassen möchte, sollte sich mit der „bootstrap.css“ auseinandersetzen. Dort ist das Layout für alle per Bootstrap erzeugten Interface-Elemente, inklusive der mit Bootbox.js erstellten Dialogboxen enthalten.

(dpe)

CSS3 Toolkit erlaubt komplexe Styles per komfortabler UI

Das CSS3 Toolkit von Moople ist nicht neu. Das letzte Update stammt immerhin aus Dezember 2011. Neu ist lediglich der Preis. Kostete die App bislang bis zu 10 Euro, gibt Moople zum Launch seiner Browserapp Aptus, quasi zur Feier des Tages, einen aus. Derzeit kann die CSS3 Toolkit also kostenlos über den Appstore bezogen werden.

Die App erlaubt das Zusammenklicken komplexer CSS3-Styles mittels einer mac-typisch simplen grafischen Oberfläche. Dabei ist die Vorgehensweise nebst Bedienung sehr einfach und stellt selbst unbedarfte Anwender nicht vor Rätsel. Zunächst gilt es grundlegende Einstellungen vorzunehmen. Welche Höhe und Breite in Pixeln, sowie welche Farben soll das zu generierende Element nebst Canvas haben?

Danach stellt man den Border-Radius ein, der für jede Ecke unterschiedlich konfiguriert werden kann. Im nächsten Schritt erstellt man einen Farbverlauf, bei dem allerdings lediglich der Winkel im Verlauf zwischen zwei Farbwerten zusätzlich einstellbar ist. Eine genauere Steuerung des Gradienten ist mit dem CSS3 Toolkit nicht vorgesehen.

Bei Bedarf fügt man seinem Element nun noch einen inneren und/oder äußeren Schatteneffekt hinzu und bestückt es mit einem Text. Als Schriftart ist dabei jede auf dem System installierte Schrift wählbar, eine Anbindung an Fontlibraries, etwa Googles Webfonts, ist nicht gegeben. Hier ist also Vorsicht geboten, respektive Grundlagenwissen über Webtypografie erforderlich.

Ein neben der GUI schwebendes, halbtransparentes Fenster protokolliert während der Arbeit den entstehenden CSS-Code mit, kann aber auch abgeschaltet werden. Das CSS übernimmt man per Copy & Paste.

Die App setzt das aktuellste OS voraus und verweigert unter Snow Leopard schon die Installation. Wer also nicht Lion, sowie einen 64-bit Prozessor sein eigen nennen kann, dem bleibt die App verwehrt.

Fazit: Das CSS3 Toolkit von Moople hätte für 10 Euro keine Kaufempfehlung von mir erhalten, da es vergleichbare Dienste als Webapp gibt. Als kostenlose Promo-Maßnahme stellt das Toolkit eine Alternative zu den genannten Onlinediensten dar und kann insbesondere nützlich sein, wenn man sich an Orten ohne Onlinezugang aufhält. Mac-Fans werden es schon wegen des App-Designs mögen…

Links zum Beitrag:

• Das CSS3 Toolkit zum Download – Mac Appstore
• Produktseite von Moople Apps – CSS3Toolkit.com
• CSS3: Verläufe so einfach wie in Photoshop mit ColorZilla – Dr. Web Magazin

Old School Iconset von Pawel Kadysz

Der polnische Webdesigner Pawel Kadysz bietet mit dem Old School Iconset eine kleine Sammlung nicht mehr im Gebrauch befindlicher, ehemaliger Alltagsgegenstände als PNG-Icons in unterschiedlichen Größen an. Alle Bildchen liegen in den Auflösungen 16, 32, 64, 128 und 256 Pixel vor. Die Symbole sind auf eine Ebene reduziert, können dementsprechend nicht mit Fireworks in ihre Einzelteile zerlegt werden. Das Set ist sowohl für private, wie auch kommerzielle Zwecke kostenlos verwendbar und steht im Freebies Booth zum Download bereit.

Hand Drawn Web Icons von Pawel Kadysz

Dieses große Set handgezeichneter web-bezogener Icons stammt ebenfalls aus der Feder des polnischen Designers Pawel Kadysz. Über 200 Icons legt er mit diesem Set vor. Das obige Bild zeigt nur einen ganz kleinen Ausschnitt. Im Downloadpaket enthalten ist eine Photoshop-Datei, die jedes Icon auf einer eigenen Ebene führt, so dass optimale Bearbeitungsmöglichkeiten gegeben sind. Zusätzlich zur PSD enthält der Download alle Icons in einzelnen PNG-Dateien, einmal in 32 und einmal in 128 Pixeln. Kadysz macht keine Einschränkungen hinsichtlich der Verwendung. Das rund 6 MB schwere Paket kann ebenfalls im Freebies Booth heruntergeladen werden.

Washing Machine Icons von Jan Losert

Diese elf Icons, die Jan Losert zur kostenlosen Verwendung als Photoshop-Datei anbietet, beschäftigen sich mit dem Thema Wäsche, konkret mit dem Thema Waschmaschinen. Ich finde das Design durchaus sehr gelungen, obschon mir spontan nicht einfällt, wozu ich die Bildchen gebrauchen können sollte. Aber, das ist ja das Schöne am Wochenend-Surfgang, ich muss es ja nicht…

Das über Dribbble kostenlos verfügbare Paket mit den Waschmaschinen-Icons bringt knappe 6MB gepackt auf die Waage. Die PSD bläst sich nach dem Entpacken auf über 12 MB auf. Das liegt daran, dass Losert wirklich die volle Bearbeitbarkeit aller Einzelelemente gewährleistet. So kann man das Set, wenn man es schon inhaltlich nicht wirklich benötigt, dennoch zum Lernen von Photoshop-Techniken gut gebrauchen.

Wood Pattern von Nick Slater

Wer hat nicht schon einmal händeringend nach einem in Illustrator erstellten Holzmuster gesucht und war zu faul, die paar Kringel selbst zu ziehen? Jeder, natürlich. Für all diese, also für alle, stellt Nick Slater via Dribbble sein eigenes Holzmuster zur Verfügung. Die 1,4 MB schwere EPS-Datei gibt es in zwei Varianten, einmal kleiner CS4 und einmal CS4 und größer.

Cuticons von Patrik Larsson

Dieses kleine Set von lediglich zehn Icons besticht durch zweierlei. Zum einen bringt es ein für ein Iconset recht ungewöhnliches Design mit, zum anderen liegt es als voll bearbeitbare PSD-Datei vor, so dass der Erweiterung des Set unter Verwendung der gleichen Designtechnik nichts im Wege steht. Der rund 5 MB große Download steht über die Website Shiny Pixels bereit. Entpackt bringen die Cuticons knappe 8 MB auf die Waage. Das Downloadpaket enthält eine Lizenzdatei, wonach die Icons privat und kommerziell genutzt werden dürfen.

Crafty Crazicons von Vaibhav Bhat

Das Set Crafty Crazicons bringt 100 minimalistische Symbole aus den unterschiedlichsten Bereichen auf den Developer-Desktop. Bhat liefert eine sehr gut organisierte, voll bearbeitbare PSD-Datei ohne jegliche Einschränkung mit. Das Set darf privat und kommerziell genutzt, lediglich nicht zum Download angeboten oder verkauft werden. Da Bhat alle Symbole als Vektorgrafik angelegt hat, können diese beliebig skaliert werden. Crafty Crazicons schult darüber hinaus die eigenen Fertigkeiten im Icondesign.

Das Set steht als rund 5 MB schwerer Download über die Webste Purty Pixels bereit.

Sport Ball Icons von Ioan Decean aka Nelutu

Baseball, Basketball, Bowling, Fußball, Golf, Billard, Tennis und Volleyball. Dieses Portfolio an Ballspielen deckt das entsprechende Iconset des Grafikdesigners Ioan Decean, Partner der kleinen Designschmiede PixTea, ab. Alle Ballsymbole sind detailreich gezeichnet und liegen in der Auflösung 64 x 64 Pixel vor. Fünf Varianten jedes Balles liefert Decean mit. Da gibt es Symbole ohne Schatten, dann solche mit zwei verschiedenen Schattenwürfen, eine Variante mit Hintergrund und eine mit einem zusätzlichen Pfeilsymbol. Insbesondere die Version mit dem zum jeweiligen Ballsport passenden Hintergrund finde ich persönlich äußerst gelungen.

Das Set kann auf der Website PixTea als rund 800 kb großes Paket heruntergeladen werden. Hinsichtlich der Verwendung werden keine Einschränkungen gemacht.

Real-Life-Platzhalterkonzept: Für´s Web bedingt geeignet… (Bildquelle: Annamartha / pixelio.de)

Placehold.it erzeugt abstrakte Platzhalter, um nicht zu polarisieren

Placehold.it, realisiert von Brent Spore und Russell Heimlich, erzeugt Bildplatzhalter. Im Standard sind das hellgraue Quader definierbarer Größe. Die Platzhalter werden via URL-Parameter generiert. So erzeugt der folgende Aufruf

http://placehold.it/640×150

das folgende Bild:

Die simpelste Form des Aufrufs führt also zu einem hellgrauen Rechteck, dessen Pixelmaße als Text in das Bild geschrieben werden. Der Platzhalter kann nun heruntergeladen und manuell in das Layout eingebunden werden. Alternativ ruft man die URL innerhalb des Image-Tags mit

<img src="http://placehold.it/640x150">

auf und erspart sich so Down- und Upload. Das ist schon ziemlich gut, aber zeigt noch nicht alle Möglichkeiten des Dienstes. Übrigens: Wer einen quadratischen Platzhalter erzeugen will, lässt einfach den zweiten Pixelwert weg. Das sähe so aus:

http://placehold.it/640

Will man seine Platzhalter nicht im Standardformat GIF, sondern etwa als JPG oder PNG erhalten, gibt man das einfach als URL-Parameter an:

http://placehold.it/640×150.png

Placehold.it bietet mehr Parameter als reine Pixelwerte

Im nächsten Schritt könnte man eventuell einen Text im Bild haben wollen, der nicht die Pixelmaße repräsentiert. Hierzu würde beispielsweise folgender Aufruf führen:

http://placehold.it/640×150.png&text=dr.+web+testet+placehold.it

Folgender Platzhalter entstünde dadurch:

Und die letzte Möglichkeit, den Platzhalter anzupassen, bezieht sich auf die Farbgebung. Ebenfalls per URL-Parameter lässt sich die Hintergrundfarbe des Rechtecks, wie auch die Textfarbe definieren. Folgender Aufruf

http://placehold.it/640×300/0000FF/ffffff&text=dr.+web+testet+placehold.it

führt zu folgendem Bild:

Fazit: Placehold.it verzichtet bewusst auf echte Inhalte, um das Layout abstrakt zu halten. Genau deshalb verwende ich den Dienst so gerne. Die URL-Parameter lassen keine benötigte Funktion vermissen. Dazu ist der Dienst kostenlos. Was könnte man mehr wollen?