Normalize.css geht hier einen leicht abgewandelten Weg. Zwar werden ebenfalls diverse Eigenschaften genormt, allerdings werden auch die typischen Bugs verschiedener Browser behoben und so eine sehr geeignete Grundvoraussetzung für die CSS-Datei geschaffen.
kulturbanause.de

Eigentlich der sauberere Ansatz: Normalerweise wird ja erst alles zurückgesetzt und dann kommt der eigentliche Stylesheet. Mit normalize.css spart man, je nach Projekt, sicher einige Zeilen Code.

Zur Feier des Tages eine meiner etwas neueren Perlen aus dem Internet: Seit einigen Monaten sammle ich interessante Artikel und Ideen rund um das Thema Webentwicklung und bin dabei auch über ein Tutorial zu Turbine gestossen. An diesem wirklich interessanten Werkzeug arbeitet übrigens auch Peter Kröner, den ich ja hier schonmal erwähnt habe.

Das, wirklich lesenswerte, Tutorial von Christian Schaefer (@derSchepp) beschreibt die Arbeit mit Turbine anhand einiger einfachen Beispiele und weckt das Interesse an diesem Werkzeug. Ich werde es bald auch mal hier im Blog produktiv einsetzen und testen. Ich verspreche mir davon nicht nur wesentlich weniger (Schreib-)Arbeit sondern durch die Plugins auch weniger Ärger mit unliebsamen Browsern.

Meine Stammgäste kennen meinen Hang, neue Themes für mein Blog zu erstellen. Alle paar Tage / Wochen / Monate packt es mich: Ich öffne Photoshop, bastel ein Layout und dann pack ich das ganze online. Meistens entwickle ich auch direkt an der laufenden Version meiner Seite und bin dann nach ein paar Stunden (diesmal waren es 4) fast fertig.

Die fehlenden Elemente, Darstellungsfehler in vielen Browsern und so weiter interessieren mich gerade nicht sonderlich und ich verspreche mal besser nicht, dass ich jetzt aktiver bloggen werden.

Ich hoffe Euch gefällt die momentane Version des Blogs. Bitte habt Rücksicht bei Darstellungsfehlern.

In Cheat Sheets oder “Spickzettel” werden die wichtigsten Informationen zu einem bestimmten Thema zusammengefasst. Besonders nützlich und zeitsparend sind sie für Webworker. So hat man z.B. einen schnellen Überblick über wichtige Funktionen oder über alle möglichen Shortcuts eines Programms, um effizienter arbeiten zu können.
web-tuts.de

Foto von Tom Bunny

Besonders gut gefällt mir bei Chrome der Ansatz, den die Entwickler bei den Erweiterungen gehen: Mozillas Firefox zeigte hier ja schon vor einigen Jahren, wie interessant Erweiterungen für Nutzer sein können. Angefangen bei Werbeblockern, E-Mail Benachrichtungen bis zu vollwertigen Twitter-Clients findet man allerlei nützliches (aber auch überflüssiges) um den eigenen Browser zu verbessern.

Googles Chrome geht hier einen interessanten Weg denn im Prinzip basieren die Extensions erstmal auf HTML, CSS und JavaScript und nutzen die Möglichkeiten, die diese Sprachen liefern (u.a. auch client-side data storage in HTML5), vollständig. Es lässt sich also, mit Kenntnissen in diesen drei Sprachen schon eine eigene Erweiterung programmieren, was ich Euch an einem einfachen beispiel demonstrieren möchte.

Vorbereitungen

1. Lade Dir Chrome oder Chromium (wenn Du ein wenig Googlest ersparst Du Dir ggf. den Browser selber compilieren zu müssen) auf Deinen Rechner: (Windows/Linux / Mac)
2. Erstelle einen Ordner "HelloWorld" auf Deinem Rechner der den Code beinhalten wird.
3. Erstelle eine Datei manifest.json, die einige Informationen zu Deiner Erweiterung beinhalten wird.

manifest.json

1. {
2. "name": "Hallo Welt",
3. "version": "1.0",
4. "description": "Meine erste Erweiterung.",
5. "browser_action": {
6. "default_icon": "icon.png"
7. }
8. }

Die Bezeichnungen in der JSON-Datei sollten selbsterklärend sein. Die einzigen Punkte hier sind "browser_action" und "default_icon" welche wir brauchen, damit unsere Erweiterung auch ein Icon neben der Adressleiste in Chrome bekommt.

icon.png

Natürlich brauchen wir auch ein passendes Icon für unsere Anwendung. Ich greife hier auf ein Iconset von Manuela Hoffmann zurück, welches ihr unter www.pixelgraphix.de findet. Das Icon Eurer Wahl wandelt Ihr dann noch schnell in png um und nennt es icon.png. Sowohl manifest.json als auch icon.png kommen in den Ordner HelloWorld.

Erster Test

Und schon können wir die Erweiterung testen:

1. Öffne Chrome und dort die Seite mit den Erweiterungen. (Unter Linux findet man diese, wenn man auf das Icon mit dem Schraubenschlüssel klickt. Am Mac unter dem Menüpunkt "Fenster.")
2. Klicke auf "Entwicklermodus"
3. Importiere den Ordner HelloWorld indem Du auf "Entpackte Erweiterung laden…" klickst

Du solltest jetzt, wenn Du alles richtig gemacht hast, das Icon oben neben der Adressleiste sehen. Du kannst zwar schon auf das Icon klicken aber noch bringt Dich das nicht weiter.

Etwas anzeigen

Interessanter wird es jetzt, wenn wir die Erweiterung ein wenig ausbauen. Es geht uns jetzt erstmal nur um ein kleines Fenster in dem, wie der Name des Tutorials schon vermuten lässt, "Hallo Welt" steht.

Damit unsere Erweiterung auch weiß, welche HTML-Datei sie anzeigen soll, ergänzen wir die manifest.json nun um eine neue Zeile:

1. ...
2. "browser_action": {
3. "default_icon": "icon.png",
4. "popup": "popup.html"
5. },
6. ...

popup.html

Bei der Datei popup.html, die wir ebenfalls in unserem Ordner HelloWorld speichern, handelt es sich um eine simple HTML5-Datei:

1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>Hallo Welt</title>
6. </head>
7. <body>
8. <p>
9. Hallo Welt.
10. </p>
11. </body>
12. </html>

Wenn Du diese Erweiterung jetzt installierst (deinstallier die allte Version besser vorher – habe ich schon erwähnt, wie toll es ist nicht bei jeder Änderung an Erweiterungen den Browser neu starten zu müssen?) solltest Du bei einem klick auf Dein Icon den Text "Hallo Welt" lesen können.

Optimierungen

Damit unsere Ausgabe nun etwas schöner ist formatieren wir sie jetzt noch mit etwas CSS. Auf die Möglichkeiten die JavaScript uns noch bietet gehe ich vielleicht später mal ein.

HTML

1. <head>
2. ...
3. <link rel="stylesheet" href="style.css" type="text/css" />
4. </head>

CSS

1. body {
2. font-size: 150%;
3. font-family: Helvetica,Arial,Verdana,sans-serif;
4. color: #fff;
5. text-shadow: 0px 2px 3px #555;
6. font-weight: bold;
7. background: #cdd9e6;
8. width: 350px;
9. height: 75px;
10. }