10 Mrz 11 Icon Teil 2: ICO-Datei erstellen und einbinden

{lang: 'de'}

Das Icon im Firefox-Browser

Sobald Sie Icon-Graphiken in den Größen 16, 32, 48 und 128 px haben, können Sie daraus eine Icondatei erstellen. Je nach Erfordernis erscheint das jeweilige Icon in der richtigen Größe. So z.B. auf dem Desktop als Verknüpfungssymbol oder im Internetbrowser an diversen Stellen wie z.B. der URL-Adresszeile. Das Open-Souce-Programm Icon Sushi hilft bei der ICO-Dateierstellung.

Klicken Sie in Icon Sushi auf die Symbolschaltfläche Öffnen, und laden Sie sämtliche Icon-Graphiken ins Programm. Sie können mehrere markieren und im Block ins Programm laden. Das Icon der Größe 256 px kann nicht ins Programm importiert werden.
Dateien sämtlicher Größen laden
Markieren Sie sämtliche Bilddateien und klicken Sie auf die Symbolschaltfläche Save as Multiple Icon.
Mehrfach-Icon erstellen
Wählen Sie im Fenster Save as Multiple Icon einen Speicher-Ordner und einen Namen für die ICO-Datei. Klicken Sie abschließend auf Speichern.
Kopieren Sie die ICO-Datei in das Hauptverzeichnis Ihrer Online-Hilfe. Bei einer WordPress-Installation kopieren Sie die Icondatei in das Hauptverzeichnis bzw. in das Hauptverzeichnis Ihres Templates.
Bei WordPress: binden Sie die Icondatei (dateiname.ico) in die header.php innerhalb des head-Tags ein. Haben Sie keine WP-Installation, tragen Sie die URL ohne php-Tags ein.
```
<link rel="shortcut icon" href="<?php bloginfo('url'); ?>/dateiname.ico"
type="image/x-icon" />
```

Links zum Thema

Download Icon Sushi von pcmasters.de

Dieser Artikel ist im kostenlosen eBook Ditalog als EPUB und PDF-Datei verfügbar.

Tags: Webdesign, Wordpress

Filed in Ideen für die Dokumentation with 0 Comments

01 Mrz 11 Icon Teil 1: Grundform des Icons in Inkscape erstellen

{lang: 'de'}

Wenn man nicht gerade Webseiten und Online-Hilfen am Fließband erstellt, kommt man als Technischer Redakteur nicht so oft in die Verlegenheit, ein Favicon erstellen zu müssen. Als ich zum zweiten Mal vor der Aufgabe stand, hatte ich alles bisherige zur Iconerstellung vergessen. Für mich und für manch weiteren Redakteur nun die Anleitung fixiert.

Erstellen Sie im Open Source Graphikprogramm Inkscape eine Grundform Ihres Icons. Bestimmt hilft Ihnen wie mir ein Graphiker weiter.
Es gilt, Icons für die Größen 16, 32, 48 und 128 px zu erstellen. Erstellen Sie ein Quadrat mit 32px Breite und Höhe.
Breite und Höhe des Quadrats einstellen
Bestimmen Sie Farbe der Füllung und der Kontur des Quadrats. Soll das Icon transparent sein, wählen Sie links die Kreuzfarbfläche für “keine Farbe”.
Soll das Icon und somit diese Hintergrundquadrat abgerundetet Ecken haben, markieren Sie das Rechteckt. Anschließend klicken Sie auf das Rechteck-/Quadrat-Tool in der Werkzeugleiste und ziehen den Anfasser in Kreisform in der rechten oberen Ecke in die diagonale, linke untere Ecke.
Mit Rechtecktool die Ecken abrunden
Falls Ihnen das Icon nicht plastisch genug erscheint, fügen Sie der Icon-Grundform einen Farbverlauf hinzu.
Mit dem Farbverlauf-Tool arbeiten
Positionieren Sie das Objekt der Grundform in die Mitte des Quadrats.
Markieren Sie beide Objekte und klicken Sie auf Objekte > Gruppieren.
Klicken Sie auf Datei > Bitmap exportieren.
Bitmap exportieren aus Inkscape
Klicken Sie im Fenster Bitmap exportieren auf Auswahl.
Optional: Hinterlegen Sie im Feld Dateiname einen Dateipfad.
Klicken Sie auf Exportieren. Es wird im ausgewählten Pfad eine PNG-Datei erzeugt.
Wiederholen Sie die Schritte für die Größen 16, 48, 128 und 256 px.

Dieser Artikel ist im kostenlosen eBook Ditalog als EPUB und PDF-Datei verfügbar.

Links zum Thema

Download Inkscape von heise.de

Tags: Adobe AIR, Inkscape, Webdesign, Wordpress, XHTML

Filed in Ausgabeformat HTML, Ideen für die Dokumentation, Wordpress with 0 Comments

28 Jun 10 How do you design for function?

{lang: 'de'}

Wer als Technischer Redakteur noch nichts mit Twitter anfangen kann, sollte wenigstens die Suche von Twitter nutzen. Sie verät, was gerade aktuell ist oder wieder aufgewärmt wird bzw. gar “gehypt” wird.

http://search.twitter.com besuchen und den Hashtag #techcomm eingeben.

So stieß ich auf einen Artikel vom Januar 2009: Building a 21st century user interface von Brett D. McLoughlin.

So einfach wie es klingt, Entwickler und Webdesigner sollen sich auf die Kernfunktion ihres Programms bzw. Website besinnen. Und am besten ist es, wenn man sich diese Kernfunktion an den Bildschirm klebt. Was immer Sie nun machen, dieser Klebezettel steht über allem, was Sie in Zukunft für Aufgaben anstehen.

Beispielhaft wird Amazon erwähnt. Auf der Website sind die wenigen wirklich wichtigen Schaltfläche orange, im Gegensatz zum blauen Gesamterscheinungsbild der Seite. Die Feuerprobe ist ein “Fuzzy Test” bzw. Milchglas-Test.

Alles wichtige ist noch auszumachen: das Produktvorschaubild und sämtliche Verkaufsabschluß-Schaltflächen.

Was ist das Wesentliche vom Ditalog? Die Tutorials ergeben erst wirklich einen Sinn, wenn man sie in Ruhe schwarz auf weiß lesen und begreifen kann. Also wurde die Farbe der Downloadbox für den PDF-Datei-Download von grau in gelb geändert. Ja, und die Sexy-Bookmarks waren einfach zu sexy – sie lenkten vom Download ab. Hier ein Screenshot vom WordPress Plugin Directory:

Tags: Techcomm, Technische Dokumentation, Twitter, Webdesign, Wordpress

Filed in Ideen für die Dokumentation, Wordpress with 0 Comments

03 Jun 10 Mein Theme-Schock

{lang: 'de'}

Excelentes Theme Excelence

Schock ist etwas übertrieben. Aber man muss ihn erlebt haben, um zu wissen, dass es ihn gibt. Mit anderen Worten, hier kommt eine Anleitung, wie man “den Unterschied zwischen Theorie und Praxis erfahren” kann.

Man möchte ein Websitenprojekt mit WordPress realisieren und sucht jetzt nach dem schönsten und kostenlosesten Theme, dass es gibt.
Man findet ein exzelentes Theme und findet es einzigartig. Man glaubt, die Einzigartigkeit wird nur von einem selbst erkannt und überliest geflissentlich die Anzeige This post was viewed 52,897 times
Man passt über mehrere Tage das Theme für seine Bedürfnisse an.
Man surft fleißig – und dann kommt der Schock: eine vertraute Website springt einem ins Auge und es ist nicht die eigene!

Was will uns das sagen? Dass das 2 sehr gute Websites sind:

Theme Excelence von Blogohblog.com
Anne Gentle, Technische Redakteurin und ihr Blog Just Write Click

Tags: Wordpress

Filed in Wordpress with 0 Comments

12 Mai 10 dita2wordpress – Import Tool installieren und anwenden

{lang: 'de'}

Anleitung: So installlieren Sie das Importtool in Ihrer WordPress-Installation.

Downloaden Sie die Datei dita-help-importer.zip unter http://zed1.com/journalized/wordpress-plugins/dita-to-wordpress-import-tool/.
Editieren Sie die entpackte Datei ditahelp.php in einem Texteditor in Zeile 493:
$img-> setAttribute(‘src’, ‘/’.$src);
In der Originalversion fehlt ein Slash zur korrekten Angabe des Bildpfades:
$img-> setAttribute(‘src’, $src)
Laden Sie die entpackte Datei ditahelp.php per FTP in den WordPress-Ordner \wp-admin\import hoch.
Laden Sie Ihren DITA-XHTML-Output per FTP in den WordPress-Ordner hoch. Bspw. nach \wp-conten\dita-html-output.
Melden Sie sich im WordPress-Dashboard an und aktivieren Sie das Seiten-Widget, so dass statische Seiten angezeigt werden können.
Klicken Sie im Dashboard auf Werkzeuge > Daten importen > DITA Help.
Tragen Sie im Feld DITA Help Directory den genauen Pfad zum Verzeichnis des DITA-XHTML-Outputs ein und klicken Sie auf Import Files.

Abbildung 1. XHTML-Verzeichnis festlegen
Klicken Sie auf Stage 2.
Klicken Sie auf Stage 3.
Klicken Sie auf Next 75.

Abbildung 2. Dateiimport
Klicken Sie auf Stage 4.
Klicken Sie auf Stage 5.
Das wars. Ein Klick auf Viel Spass führt Sie zum gefüllten Blog.

Abbildung 3. Import beendet