Netzkescher

15.10.2009

Der Netzkescher twittert

Ich habe einen Twitter-Account für den Netzkescher angelegt. Da ich bisher so gut wie keine Erfahrungen mit Twitter gesammelt habe, den Dienst aber gern ausprobieren wollte, mach ich es mal auf diese Weise. Den Link zum Folgen findet ihr oben rechts auf dieser Seite.

Was landet bei Twitter?

Vor allem die Fundstücke, die zwar im Kescher landen, aber nicht gewürdigt werden. (Meist, weil die Zeit fehlt.)

14.10.2009

Bildbearbeitung für lau

Auch als Freizeit-Webdesigner benötigt man ja ab und zu ein Programm zur Bildbearbeitung. Das wird auch deutlich, wenn man diesen Blog ein wenig verfolgt. Dann weiß man, dass ich gern mal Hinweise auf Tutorials gebe, die sich mit dem Erstellen von Weblayouts befassen. Der in den Tutorials beschriebene Weg besteht häufig aus zwei Hauptschritten:

1. Entwickeln des Layouts mit Hilfe von Photoshop
2. Umsetzen der Photoshop-Vorlage mit CSS und HTML

Nun hat nicht jeder Photoshop auf seinem Rechner und man kauft es ja auch nicht gerade im Vorbeigehen. Eine Alternative muss her. Häufig wird Gimp empfohlen, weil es sehr leistungsfähig ist. Aber wer Gimp schon mal getestet hat weiß, dass das Programm irgendwie anders ist. Das Übertragen eines für Photoshop verfassten Tutorials fällt schwer.

Ich habe kürzlich ein Programm (wieder)entdeckt, mit dem das Übertragen möglicherweise leichter fällt. Es handelt sich um PhotoPlusSE von FreeSerifSoftware. SerifSoftware hat verschiedene Programme aus den Bereichen Grafik und DTP im Angebot. Das freundliche ist, dass sie ältere Versionen als Freeware unter dem Namen FreeSerifSoftware unter das Volk bringen. Und diese älteren Versionen sind durchaus leistungsfähig. Der Vorteil von z.B. PhotoPlusSE ist, dass es den üblichen Windows-Konventionen folgt und daher für Nichtfachleute mit weniger Einarbeitungszeit verbunden ist, als etwa Gimp.

Ein weiterer Punkt, der für PhotoPlusSE spricht ist, dass sich seine Bedienung sehr an Photoshop orientiert. Das ist zumindest mein Eindruck nach einigem Probieren. Natürlich hat es nicht den Funktionsumfang von Photoshop. Aber für die oben genannten Tutorials wird es wohl reichen, schätze ich. Ein wenig Flexibilität ist selbstverständlich erforderlich, denn eine 1:1 Umsetzung der Tutorials ist logischerweise nicht drin.

Meine Empfehlung: Ruhig mal testen. Falls ihr das tun solltet, würde ich mich freuen, wenn ihr eure Meinung hier als Kommentar hinterlasst.

FreeSerifSoftware bietet nicht nur PhotoPlusSE, sondern noch weitere Programme als kostenlose Software an. Auch auf die lohnt ein Blick. Folgende Einschränkungen müssen allerdings bei allen Programmen hingenommen werden:

• die Programmoberfläche ist englischsprachig
• die Installation setzt eine Registrierung voraus (die mir aber harmlos erscheint)

Hinweis
Wer noch ein paar Funktionen extra haben will, kann auch £9.99 bezahlen und erhält statt der SE Version die volle Version 9 des Programms. Da muss man gucken, ob man’s braucht.

12.10.2009

Uups…

… so viele Besucher habe ich doch sonst nur über den ganzen Monat verteilt …

Ich wusste natürlich, dass Falk Hedemann meinen kleinen Blog auserwählt hatte, als “Blog der Woche” auf t3n vorgestellt zu werden; schließlich habe ich den Fragebogen ausgefüllt. Aber dass das dann plötzlich so schnell geht …

Ich freu mich jedenfalls und bedanke mich sehr für eure Aufmerksamkeit.

—-
Foto: TakenByTina

Tutorial-Tipp: Ein CSS-Layout ganz neu erstellen

Heute gibt es mal wieder einen Tutorial-Tipp für Menschen, die sich erst ein ganz klein wenig mit css auskennen.

Steve Dennis beschreibt Schritt für Schritt, wie eine einfache Webseite mit Hilfe von HTML und CSS aufgebaut werden kann. Das Ergebnis sieht so aus:

Die Webseite kommt also mit wenigen Grafiken aus, was der Zielgruppe sicherlich entgegenkommt. Die Beschreibung ist ausführlich und gut bebildert und deshalb leicht verständlich.

Interessanterweise wird in dem Tutorial für die Navigation das sog, “image rollover” eingesetzt, auch bekannt unter der Bezeichnung “CSS Sprites”. Dabei wird der Hover-Effekt, also das Ändern des Aussehens von Links beim Überfahren mit der Maus, nicht durch den Austausch von Hintergundbildern realisiert, sondern durch das unterschiedliche Positionieren einer einzigen Grafik. Diese Technik ist mittlerweile weit verbreitet und es lohnt sich auf jeden Fall, sie kennen zu lernen.

Links

Weitere Infos zu image rollover/CSS Sprites
guerillagirl.de
webkrauts.de

11.10.2009

CSS-Dateien systematisch coden

Wenn man eine CSS-Datei von Grund auf neu erstellen muss, macht es Sinn, dabei systematisch vorzugehen, um eine vernüftige Struktur aufzubauen. Antonio Lupetti beschreibt auf woorkup.com eine Methode, die er “Four Bubbles Model” nennt. Er verknüpft damit die Hoffnung, dass so entstandener Code besser zu verwalten ist, die Anzahl von Klassen verringert und überflüssige Deklarationen vermieden werden können. Mehr Übersichtlichkeit ist somit das Ziel.

Das Modell ist einfach aufgebaut und bietet daher einen leicht nachvollziehbaren Ansatz für das Coden. Es besteht aus folgenden vier Phasen:

1. Einfaches Reset und Neudefinition von Standard-HTML-Elementen (z.B. body, h1, h2, h3, p, ul, li, form, input).
2. Definition der Hauptelemente, die die Seite strukturieren (z.B. #wrapper, #header, #nav, #main, #sidebar, #footer). Für jedes Hauptelement werden anschließend die eingebetteten Elemente definiert (z.B. #nav ul, #footer ul).
3. Definieren von wiederverwendbaren Klassen (z.B. .right{float:right;}).
4. Code-Optimierung

Es macht sicher Sinn, sich über diese oder andere Formen des strukturierten Aufbaus einer CSS-Datei Gedanken zu machen. Wenn es euch interessiert, seht euch die Originalquelle an. Dort ist das Modell auch grafisch umgesetzt.