Damit man die Datei auch nicht aus den Augen lässt, liegt sie auf dem Desktop und wird sowohl beim Start von Vista als auch beim Start von Firefox geladen. Bei Windows Vista muss man einfach die Verknüpfung der Datei in den Start-Ordner legen und bei Firefox einfach die Textdatei öffnen und via Extras / Einstellungen / Allgemein als Startseite festlegen.

In diese Textdatei schreibe ich dann sowohl Ideen als auch Notizen, Aufgaben, Termine etc. rein. Und das sowohl berufliche als auch private Sachen. Einem Termin ist es egal ob er privat oder beruflich ist, der kostet deine Zeit und diese kannst du nun mal nur einmal "ausgeben". Auch wenn man den Zahnarzttermin als privat ansieht, der wird den Nachmittag trotzdem für weitere Termine blocken, egal ob die anderen Termine privater oder berufliche Natur sind.

Daher ist es nicht sinnvoll die Termine nach privat oder beruflich in zum Beispiel zwei Dateien zu trennen. Das führt nur dazu das man, recht schnell den Überblick verliert und einen privaten Termin dann legt wo man sich eigentlich mit einem Kunden oder Kollegen treffen wollte.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

So hatte ich schon seit langem die Idee bzw. den Wunsch nach einem Smartphone. Damit könnte man wenigstens kurze E-Mails beantworten, sich Notizen mit Ideen machen oder sogar kleine Blogartikel verfassen, twittern natürlich sowieso

Aber die enorm hohen Kosten hielten mich lange davon ab so eine Anschaffung zu tätigen. Nach einigen Monaten und vielen Testberichten später und dem "sanften" Anschubsen des Mannes, außerdem der nahende Geburtstag fiel die Entscheidung auf das Samsung Galaxy S I9000.

Schneller als erwartet hielt ich das Samsung Galaxy S I9000 in den Händen!

Samsung Galaxy S I9000

Technik

Zunächst mal einige technische Daten:

(Quelle: gekürzter und subjektiver Auszug von der offiziellen Seite)

Maße Gehäuse (H x B x T):122 x 64 x 9,9 mm
Gewicht:119 g

Display
Anzahl der Farben:16 Mio.
Technologie: Super AMOLED-Technologie
Touchscreen: ja
Bildschirmgröße: 10,2 cm (4 Zoll)
Auflösung: 480 x 800 Pixel

Worterkennung: ja, T9
E-Mail-Dienste: ja (POP3, IMAP4, SMTP)
Push-E-Mail-Funktion: ja
Swype®-Funktion: ja

Datenübertragung
Bluetooth® 3.0: ja
WLAN: WLAN 802.11b/g/n
GPRS: ja
HSDPA: ja, bis zu 7,2 MBit/Sek.
HSUPA: ja, bis zu 5,76 MBit / Sek.
UMTS: ja

Musik, Sound & Video
DivX-Unterstützung: ja
Xvid-Player: ja
MP3-Player: ja
Verwaltung lizenzgeschützter Dateien: ja: OMA DRM
Musikwiedergabe im Hintergrund: ja
UKW-Radio: ja, mit RDS-Funktion

Weitere Funktionen
Samsung Apps-Store: ja
TouchWiz 3.0: ja
Multitouch-Zoom: ja
Aldiko eBook: ja
Layar Reality Browser (powered by Tele Atlas): ja
Think Free Mobile for Android™ (Office-Anwendungen): ja
Daily Briefing: ja
MiniDiary: ja
Prozessor: 1 GHz
3D-Spiele: ja
Android™ 2.1 Betriebssystem: ja
Android Market™: ja
Java™-Plattform: ja
Widgets (Online + Offline): ja
Social Networking-Dienste: ja
Instant Messaging-Dienste: ja
Organizer Kalender, Memofunktion, Sprachmemo, Rechner, Alarmfunktion, Wecker, Weltuhr, Timer, Stoppuhr
Anrufermanagement, Interaktives Telefonbuch

Freisprechfunktio: ja
Sprachwahl: ja
Vibrationsalarm: ja
GPS-Funktion: ja
Google Mail™ : ja
Google™ Search: ja
Google Maps Navigation™*: ja
RSS Reader: ja
Speicherkapazität: Interner Speicher 8 GB
microSD™-Steckplatz : ja (bis zu 32 GB)

Integrierte Digitalkamera
Beauty-Modus: ja
Klassik-Modus: ja
Action-Modus: ja
Cartoon-Modus: ja
Auflösung: Digitale Fotos in 5,0-Megapixel-Auflösung (2560 x 1920 Pixel)
Autofokus: ja
Digitalzoom: ja, 4-fach
Smile-Shot-Funktion : ja
weitere Kamerafunktionen: Serienbildaufnahmen, Fotoeffekte, Sucherfunktion des Displays, Panorama-Funktion, Makro-Aufnahmen, Kontrasteinstellung
Videokamera-Funktion: ja, HD-Auflösung (1280 x 720 Pixel)
Zweite Kamera für Videotelefonie: ja
Blink-Shot-Funktion: ja
Coupling-Shot: ja
Gesichtserkennung: ja
Bildstabilisator: ja
Geo-Tagging: ja

Gefühl

Und das emotionale: toll, toll, toll! Es liegt schön in der Hand, der Touchscreen lässt sich wunderbar bedienen. Die Tasten der (bei Bedarf) eingeblendeten Tastatur sind übrigens erstaunlich gut zu treffen. Die Schrifterkennung habe ich noch nicht genügend getestet um mir darüber ein Urteil zu erlauben, sie wirkt aber auch sehr "treffsicher".

Überhaupt ist die Bedienung wunderbar intuitiv, so dass ich wirklich ganz selten ins Handbuch schauen musste, um etwas nachzuschlagen.

Ganz schnell waren dann auch sämtliche Mail-Konten (inkl. GMail natürlich) mit dem Smartphone eingerichtet und die ersten WordPress-Blogs nach der Installation von WordPress aus dem Android Market erreichbar.

Natürlich ist auch der Zugriff auf twitter und facebook gewährleistet. Im Moment teste ich noch die Anwendung Post mobil. Sehr hilfreich für die Arbeit ist auch der Zugriff auf unsere Dropbox (Die hat Perun bei den Webwork-tools vorgestellt.). Noch nicht ausprobiert, aber schon mal installiert ist auch der Kindle von Amazon.

kleine Probleme

Aber einen Haken muss das ganze ja doch haben! Die Synchronisation meiner Kontakte mit dem O2-Communication Center funktioniert nicht bzw. nur fehlerhaft. Die Verbindung steht, die Synchronisation läuft und dann wird abgebrochen mit der Meldung:

Die Anwendung Synchronisieren (Prozess com.smlds) wurde unerwartet angehalten. Versuchen sie es erneut.

Irgendwie habe ich den Verdacht, dass die unsagbare Menge von 70 Kontakten nicht bewältigt wird. Wenn ich die Synchronisation mit nur 4 Kontakten starten läuft sie einwandfrei.

Versuche mit der Anwendung Synthesis SyncML trieben mich in den Wahnsinn: bei der Standardeinstellung (normale Synchronisation) wurden sämtliche Kontakte zwar korrekt auf das Smartphone importiert, gleichzeitig aber bei O2 gelöscht. An dieser Stelle ein Halleluja auf die Erfindung des "Papierkorbs". So waren die Kontakte nicht unwiederbringlich gelöscht, sondern "nur" im Papierkorb gelandet, von wo ich sie wieder herstellen konnte. Mehrere Versuche mit verschiedenen Einstellungen brachten keine besseren Ergebnisse: entweder keine Synchronisation oder Löschung meiner Kontakte, so dass ich die Anwendung schleunigst wieder gelöscht habe.

Und das Prinzip von Funambol habe ich schlichtweg nicht verstanden. Mit meinen O2-Daten kann ich mich auf jeden Fall nicht einloggen, ich muss mich dort wohl registrieren. Irgendwie bin ich da wohl zu d*** für. Überall lese ich, dass das so simpel sein soll, aber ich weiß noch nicht mal wo da oben und unten ist. Ich schiebe das jetzt mal auf meinen chronischen Schlafmangel (siehe erster Absatz) und nehme mir ganz fest vor, das noch einmal im nächsten Lebensjahr auszuprobieren…

Eine Variante, die im Netz oft empfohlen wurde, um seine Kontakte in das Smartphone zu bekommen, war der Weg über einen GMail-Account. Also, die Kontakte als csv-Datei exportieren, dann in einen GMail-Account importieren und diesen dann mit dem Smartphone synchronisieren. Das würde auch wunderbar funktionieren, aber diesen Weg wollte ich bewusst nicht gehen. Der Haken an dieser Methode ist nämlich zum einen, dass ich diese Kontakte dann nicht in die Gruppen "Familie", "Büro" etc. einsortieren kann, sondern sie sie sind dann automatisch in der Gruppe "Google" sind. Der zweite Grund ist, dass diese Google-Kontakte sehr schnell unübersichtlich werden, da bei Google ja wirklich jede E-Mail-Adresse gespeichert wird. Und auf dem Smartphone möchte ich eigentlich nicht alle Adressen haben. Eine Notlösung wäre es da nur extra zu diesem Zweck ein neues GMail-Konto anzulegen. Dort würde man lediglich die Synchronisation der Kontakte mit dem Smartphone machen, aber nicht darüber kommunizieren, so dass keine unerwünschten E-Mail-Adressen im Adressbuch landen. Elegant ist anders

Bitte gebt mir Bescheid bzw. korrigiert mich falls es doch möglich sein sollte Google daran zu hindern ALLE E-Mail-Adressen zu speichern.

Fazit

Ich würde es jederzeit wieder machen

Nein im ernst. Mich hat das Samsung Galaxy S I9000 überzeugt. Und ich bin guter Dinge, dass sich das mit den Kontakten auch noch elegant lösen lässt. Das Beantworten von E-Mails das Arbeiten im Blog oder in Dokumenten (auch Office) klappt schon erstaunlich gut.

Das Täschchen ist übrigens auch schon bestellt!

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

Allerdings wurden viele Webmaster verunsichert, da es an diversen Stellen in der Vergangenheit hieß, dass Analytics gegen Datenschutzbestimmungen verstößt und die Gefahr besteht, dass man bei Einsatz von dieser Software abgemahnt wird. Mir ist zwar kein Fall einer Abmahnung bekannt, aber ein mulmiges Gefühl blieb dennoch: wer möchte schon gerne eine Abmahnung kassieren.

Man man hat allerdings seit einigen Monaten die Möglichkeit, die IP-Adressen der Besucher in verkürzter Form also "anonymisiert" zu übertragen. Damit ist man zumindest nach dem heutigen Stand der Dinge auf der sicheren Seite. So schaut der Code aus:

<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'deine-ID']);
    _gaq.push(['_gat._anonymizeIp']);
    _gaq.push(['_trackPageview']);
    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script>

Mit der Angabe _gaq.push(['_gat._anonymizeIp']); in der vierten Zeile erreicht man, dass die IPs anonymisiert übertragen werden. Weitere Infos und einen ausführlichen Artikel mit weiterführenden Links dazu gibt es auf akademie.de:

IP-Adressen anonymisieren: So setzen Sie Google Analytics rechtssicher ein

Was mich allerdings ein bisschen stutzig macht sind die Angaben von Google selber. In der Analytics-Verwaltung wird gesagt, dass man den Code in den Kopfbereich (direkt vor </head>) und in dem Hilfebereich wird dann empfohlen den Code in den Fußbereich (vor </body>) einzubauen. Was denn jetzt?

Rein aus Performance-Gründen empfiehlt es sich die Scripte im Fußbereich einzubauen, weil Scripte den parallelen Download von Komponenten einer Website so lange aussetzen bis der Script vom Browser heruntergeladen wurde.

Hat jemand praktische Erfahrung mit den neuen Analytics-Code in Header vs. Footer?

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

Allgemeines zu den Bildern

Ein Bild sagt mehr als 1.000 Worte … hört man sehr häufig. Das stimmt wohl. Ein Bild kann nicht nur zusätzliche Informationen liefern sondern einen Artikel erst verständlich machen und Bilder lockern einen Text auf. Daher wäre es blödsinnig, aus Gründen der Performance auf den Einsatz von Bildern und Grafiken zu verzichten … ich gehe bei dieser Aussage davon aus, dass man eine Flatrate und eine ordentliche Verbindung zur Verfügung hat.

Falsche Grafik-Formate

Ganz grob kann man folgendes sagen. Das Format JPG eignet sich für Fotos und Grafiken mit sehr vielen Farben (zum Beispiel sehr feine Verläufe) und/oder für Grafiken mit fotografischen Komponenten. Die Formate GIF und PNG eignen sich für den Rest und wenn Transparenzeffekte benötigt werden. GIF kann auch Animationen darstellen. So weit zu den drei Pixel-Grafik-Formaten, die im Web die weiteste Verbreitung haben

Weiter will ich hier in das Thema nicht einsteigen, weil man damit ganze Artikelserien füllen kann. Mir geht es darum zu zeigen, was passieren kann wenn man die falschen Grafikformate verwendet.

Fotografien

Folgendes Foto in den Maßen 490×327 Pixel habe ich in Photoshop CS2 unter den Qualitäts-Einstellungen Hoch (60%) gespeichert:

Die Dateigröße beträgt 32 KByte. Ohne nennenswerte Verluste in der Qualität könnte man die Dateigröße locker unter 30 KByte drücken. Würde ich das gleiche Bild in GIF abspeichern, dann bekäme ich 105 KByte und bei PNG (8 Bit) noch 91 KByte.

Also ist es hier klar: JPG hat eindeutig die Nase vorn, sowohl in der Qualität als auch in der Dateigröße.

Grafiken mit wenigen Farben und ohne fotografische Elemente

Nehmen wir uns jetzt eine Grafik vor, wo ich einen Teil der Tagwolke aus dem Fußbereich dieser Website abgebildet habe:

Die Ausmaße betragen 490×250 Pixel und die Grafik verursacht bei PNG gerade mal 8,6 KByte. Mit GIF komme ich schon auf 12,1 KByte, bei gleicher Bildqualität und mit JPG erreiche ich schon 23,7 KByte und da auch nur wenn ich die Qualität auf 30% runter drücke, was in einer sehr schlecht Bildqualität (Artefakte) resultiert. Hier das Ergebnis:

Möchte ich diese Artefakte nicht haben, dann muss ich bei derJPG-Qualität mindestens auf 60% gehen und ist das Bild schon fast 50 KByte groß.

Bei Grafiken solcher Art, wie im letzten Beispiel, ist JPG das falsche Format und hier patzen recht viele Webmaster und darunter befinden sich auch einige, die man das Prädikat Anfänger nicht unbedingt andichten würde.

Was wir aber hier auch gemerkt haben, ist die Tatsache das die Wahl von PNG (8 Bit) gegenüber GIF in den allermeisten Fällen, mal von ganz kleinen Grafiken abgesehen, in einer etwa 10-15% kleineren Dateigröße resultiert.

Kleine Bilder: Verkleinern vs. Ausschnitt

Ein häufiger Fall wo viel Optimierungspotential steckt ist folgender. Man schreibt einen Artikel und die Bilder die man einfügen möchte sind zu groß, zum Beispiel 980 Pixel breit. Das passt 1:1 nicht in den Inhaltsbereich. Also muss man die Bilder verkleinern, zumal die Mediathek von WordPress dies beim Einbinden automatisch macht. Aber ist das immer der richtige Weg?

Ich werde hier gleich eine verkleinerte Grafik einbinden, die auf das Original verweist:

Vergleiche die Dateigrößen des Originals und des Vorschaubildes

Das Originalbild hat eine Dateigröße von 13,7 KByte und die Vorschaugrafik obwohl wesentlich kleiner hat eine Dateigröße von 14,45 KByte und ist somit "schwerer" als das Original. Je nach Fall kann das Vorschaubild noch wesentlich "dicker" sein als das Original. Verwende ich dagegen ein Ausschnitt in den gleichen Ausmaßen (490×189 Pixel) dann werde ich mit einer Dateigröße von 6,5 KByte belohnt:

Sicherlich das ganze ist natürlich eine Zeitfrage. Ein automatisch generiertes Vorschaubild spart Zeit und ist komfortabel, aber dennoch sollte man versuchen, zumindest bei umfangreichen und bebilderten Artikeln, die Vorschaubilder nicht durch die Verkleinerung der Originalbilder zu erreichen sondern auf Ausschnitte der relevanten Bereiche zu setzen.

Das hat nicht nur den Vorteil einer geringeren Dateigröße sondern dient auch dem Besucher der Website: auf einem zu Unkenntlichkeit, verkleinerten Vorschaubild ist häufig schwer zu erkennen, worum es im Original geht. Hier sind Ausschnitte des relevanten Bereiches doppelt im Vorteil.

Fazit

Beide oben genannten Aspekte – die Wahl des richtigen Formats und des richtigen Vorschaubildes – zeigen, dass die Optimierung einer Website kein Hexenwerk ist und das auch Webmaster mit vergleichsweise wenigen Kenntnissen viel erreichen können.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

Welche Artikel suchen wir?

Im Grunde genommen suchen wir alle Artikel, die den Lesern von perun.net einen echten Mehrwert bieten. Das müssen nicht zwingend Artikel zum Thema WordPress, (X)HTML oder CSS sein. Das können auch Artikel zum Thema Javascript, PHP, Webserver, "Linux für Webworker", Online-Recht, SEO u. v. m. sein.

Da viele Leser hier haupt- oder nebenberuflich Selbständig sind, sind auch Artikel zu diesen Themen interessant. Auch Rezensionen zu Fachbüchern interessieren viele Leser.

Im Zweifelsfall einfach nachfragen ob dein Artikel passt.

Was bieten wir?

Jeder Autor bekommt unter seinem Artikel eine Autoren-Box, siehe z. B. den Artikel von Peter Kröner zum Thema HTML5, in diese Box kommt auf Wunsch ein Foto, 3-4 Sätze zum Autor und 1-2 Links auf die Projekte an denen der Autor beteiligt ist.

Darüber hinaus kann der Autor einen vollständigen Zählpixel von VG Wort einbinden. Vollständig meint, das hier ein Autoren-Pixel und nicht Verlags-Pixel eingebunden wird und damit der Autor sich die Einnahmen nicht mit uns teilen muss. VG Wort zahlt dann, wenn der Artikel eine bestimmte Summe an Aufrufen erreicht hat bis zu 40 Euro.

Zusätzlich dazu kann der Autor auch den Flattr-Code seines Accounts in diesem Artikel einbinden.

Solltest du eine Buch-Rezension abliefern, dann kannst du innerhalb des Artikels gerne auch z. B. einen Amazon-Partnerlink einbinden. Allerdings solltest du diesen mit einem * markieren und am Ende des Artikels darauf hinweisen.

Was muss ich noch beachten?

Ich behalte mir vor, die eingegangen Artikel auch ohne Angabe von Gründen abzulehnen und das gilt nicht nur für maskierte Pressetexte.

Du kannst von mir aus gerne die Artikel wiederverwerten. Nehmen wir mal an du hast den Artikel bereits in einer Zeitschrift, Magazin o. ä. publiziert. So lange keine vertragliche Bestimmungen dagegen sprechen, dann kannst du ihn gerne hier noch einmal veröffentlichen.

Hast du den Artikel bereits im Web publiziert, dann bitte ich darum den Artikel so zu ändern (so ca. 40-50%) damit es nicht zu Duplicate-Content-Problematik kommt. Wenn du den Artikel hier veröffentlicht hast, dann bitte ich darum dass du nicht den gleichen Artikel anderswo veröffentlichst, sondern das du ein bisschen abwartest und den auch so änderst, damit es auch hier nicht zu der DC-Problematik kommt … wie gesagt, die Leser sollen einen echten Mehrwert haben.

In welchen Formaten kann ich die Texte abliefern?

Word, OpenOffice, Text oder HTML. Das überlasse ich dir. Am liebsten wäre mir das "WordPress-HTML": wie normales HTML, lediglich die Absätze (<p>) und Zeilenumbrüche (<br />) sind nicht notwendig.

Noch Fragen?

Hast du Fragen oder Anregungen. Dann entweder hier kommentieren, E-Mail schicken oder per Twitter (@vlad_perun) kontaktieren.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

Daher dachte ich mir, es könnte nicht schaden wenn ich die großen Performance-Diebe auch hier mal näher vorstelle. Schaue dir mal bitte folgende Abbildung an:

100 KByte ist nicht wirklich viel

Man könnte jetzt sagen: "OK, eine vergleichsweise schlanke Website". Willst du aber genau wissen, welchen Inhalt diese Seite beinhaltet? Dann schaue dir die nächste Abbildung an:

100 KByte für eine handvoll Buttons

Diese Testseite besteht lediglich aus ein paar Buttons: Flattr, Topsy, FeedBurner und Facebook … sonst nichts, ehrlich. Und hier sehe ich ein großes Potential, wenn es darum geht die Performance einer Website zu optimieren.

Klar, am besten wäre es auf all die Buttons zu verzichten, aber das ist ein bisschen unrealistisch, denn an Twitter, Facebook (leider!) & Co. kommt man heute als Webmaster, der die Reichweite seiner Website erhöhen möchte, nicht mehr vorbei.

Daher sollte man sich aber um so mehr überlegen, ob man alle Buttons einbindet, die bei drei nicht auf'm Baum sind oder reichen zum Beispiel Twitter und Google Buzz. Und wenn man die Buttons einbindet, dann sollte man auch schauen ob es nicht effektivere bzw. performantere Alternativen gibt um die Funktionalität der sog. "sozialen Dienste" einzubinden.

So ist zum Beispiel möglich, dass man bei Flattr anstatt einen dynamischen einfach einen statischen Button einbindet. Oder anstatt des Flattr-Plugins kann man auf das Alternativ-Script von Frank Bültge zurückgreifen. Vor einigen Wochen habe ich im Artikel Anzahl der Feed-Leser und Twitter-Folower ausgeben beschrieben wie man die Anzahl der Feed-Leser ausgeben kann, ohne auf den dynamischen Feedbutton von FeedBurner zurückzugreifen, der vergleichsweise viel Performance schluckt.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

Das ist gut, Performance-Optimierung ist nun ein SEO-Faktor und war schon seit eh und jeh ein wichtiger Usability-Faktor: wer wartet schon gerne.

Google Webmaster Tools: Performance einer Website

Doch bevor man jetzt alles optimiert was nicht bei drei auf den Bäumen ist sollte man bedenken, dass dieser SEO-Faktor nur einer von 200 ist und das es so sein wird das die anderen Faktoren, wie z. B. die Relevanz des Inhalts, ein größeres Gewicht haben. Daher braucht man nicht zu hoffen, dass man alleine, weil die Website wie Schmitz' Katze abgeht, in die Top-10 der Suchergebnisse reinkommt.

Aber auch aus Usability-Gründen darf man sich nicht zu Tode optimieren. Ergänzt ein Bild oder Grafik den Text-Inhalt, dann sollte man nicht darauf verzichten. Man kann sich aber überlegen ob man für das Bild das richtige Format gewählt hat und ob man es nicht evtl. noch stärker komprimieren kann.

Beim Fundament beginnen

Schaut man sich so einige der 100.000 Tricks zur Optimierung der Ladegeschwindigkeit von WordPress-Websites, dann bekommt man das Gefühl eine Optimierung besteht lediglich darin eines der tollen Cache-Plugins zu installieren und schon ist alles erledigt.

Aber eine Performance-Optimierung fängt schon bei dem Aufbau des (X)HTML- und CSS-Codes an … so wie allen Websites auch, egal ob statisch oder dynamisch und mal davon unabhängig welches CMS im Hintergrund werkelt. Hier ein kleines Beispiel damit man sieht was ich meine. Zuerst die weniger gute Variante, zuerst das (X)HTML:

<div id="sidebar">
    <div class="klasse1">
        <h3>Überschrift</h3>
    </div>
    <div class="klasse2">
        <ul>
            <li class="klasse2_1">Listenpunkt</li>
        </ul>
    </div>
    <div class="klasse3">
        <p>Text + <span class="klasse4">Hervorhebung</span>.</p>
    </div>
</div>

und das passende CSS dazu:

.klasse1 h3 {...}
.klasse2 ul {...}
.klasse2_1  {...}
.klasse3 p  {...}
.klasse4    {...}

Und hier das bessere Beispiel. Zuerst HTML:

<div id="sidebar">
    <h3>Überschrift</h3>
    <ul>
        <li>Listenpunkt</li>
    </ul>
    <p>Text + <i>Hervorhebung</i>.</p>
</div>

Und dann das CSS:

#sidebar h3 {...}
#sidebar ul {...}
#sidebar li {...}
#sidebar p  {...}
#sidebar i  {...}

In dem man auf unnötige div-Blöcke und unnötige Klassen verzichtet und dann noch dazu die Kurzschreibweise bei CSS (z. B. #000 statt #000000) einsetzt, hat man nicht nur den ersten Schritt bei der Optimierung getan sondern die Dateien auch übersichtlicher und wartbarer gemacht.

Hardcoden vs. Dynamik

Aber auch bei der Erstellung der WordPress-Themes kann man schon von Beginn an optimieren. Setzt man das Theme lediglich bei sich selbst ein – also nicht beim Kunden oder zum freien Download – dann kann man auf einiges in der Dynamik verzichten.

Anstatt <?php bloginfo('stylesheet_url'); ?> einzusetzen kann man den Pfad zu der CSS-Datei auch ausschreiben oder wenn die Website einsprachig ist, dann kann man solche Konstrukte <?php _e("Leave a comment"); ?> auch direkt übersetzen und im Quelltext manuell notieren. Durch solche einfache Maßnahmen spart man sich zusätzliche Anfragen an den Webserver.

Bilder optimieren

Eine weitere grundlegende Optimierung wird häufig vernachlässigt. Zum einen sind die Dateigrößen der Grafiken im Inhalt häufig zu groß und es wird in vielen Fällen das falsche Format gewählt.

Um für den Webeinsatz gut optimierte Grafiken zu bekommen muss man nicht auf Großgewichte wie Photoshop oder GIMP zurückgreifen, auch so einfache Freeware wie IrfanView bietet, erweitert durch Plugins, einen recht ordentlichen Export für Webgrafiken. Und natürlich bieten auch so einfache Tools einen guten Batchmodus, wo man in einem Rutsch mehrere Grafiken optimieren kann. Zum Thema Bilder optimieren schrieb ich auch bereits ein paar Worte: WordPress-Websites beschleunigen 2: Grafiken Optimieren.

Komprimieren und cachen

Wenn man die oberen Schritte beherzigt hat, dann kann man sich imho Gedanken machen wie man die Dateien auf dem Server komprimieren und cachen (zwischenspeichern) kann. Wie ich schon sagte, gibt es alleine für WordPress eine Reihe an Plugins, die Inhalte komprimieren und zwischenspeichern. Aber bevor man sie einsetzt sollte man wissen, dass es mit denen manchmal Probleme geben kann.

Zudem bin ich der Meinung, dass man sich anschauen soll was der Webserver an Maßnahmen zu bieten hat bevor man WordPress-Plugins installiert. Ich bin der Meinung, dass die Mittel die z. B. Apache (oder auch andere Webserver) zur Verfügung stellt doch etwas Leistungsfähiger und Ressourcen-schonender sind, als das was man über den Umweg über PHP (WP-Plugins) erreichen kann. Falls ich hier Blödsinn erzähle, korrigiert mich bitte.

gzip-Kompimierung und besser cachen mit Apache 2

Folgenden Code habe ich schon in diesem Weblog an mehreren Stellen erwähnt. Unter anderem hier: WordPress-Websites beschleunigen 4: ein Zwischenergebnis.

# mod_deflate (gzip) aktivieren
<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

# ExpiresHeader: verhindert bedingte GET-Anfragen
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 35 days"
</IfModule>

Den oberen Code einfach in die .htaccess-Datei eintragen, gilt aber nur für Apache 2.0. Und was macht der Code? Der erste Block komprimiert alle Textdateien (HTML, CSS, Javascript etc.) bei der Übertragung.

Andere Formate würde ich hier nicht einfügen, denn z. B. Bilder sollte man mit einem Grafik-Programm komprimieren. Jede Komprimierung kostet Rechenkraft des Servers und daher sollte man sie nur einsetzen, wenn es auch einen wirklichen Vorteil gibt.

Eine gzip-Komprimierung bei einer Bildergalerie-Website ist daher wenig sinnvoll, die Optimierung der wenigen Textinhalte ist im Ergebnis verschwinden gering wie wenn man die ganzen Grafiken mit einer ordentlichen Bildbearbeitung für Web optimiert.

Der zweite Block erweitert die Caching-Funktion des Browsers in dem zusätzliche Anfragen des Browsers an den Server – "wie lange ist die Grafik in meinem Cache noch gültig?" – verhindert werden. Der zweite Code-Block besagt, dass alle Komponenten der Website im Browsercache noch mind. 35 Tage aktuell sind.

Und weiter?

Die Maßnahmen, die ich beschrieben habe sind nur die Spitze des Eisberges. Aber ich denke, dass sie zu einem ein gutes Fundament darstellen und das im Verhältnis zum Einsatz recht gute Ergebnisse liefern. Reichen diese Maßnahmen nicht, dann kann man so Plugins wie WP Super Cache und /oder CSS-JS-Booster von Christian "Schepp" Schaefer ausprobieren.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

Der Hintergrund ist folgender. Wir haben in unserem WordPress-Workshop zwei Teilnehmer die Mac haben und die üblichen Verdächtigen – PSPad oder Notepad++ – aus der Freeware bzw. OpenSource-Szene gibt es nicht für Mac und ich weiß nicht welche Bordmittel zur Verfügung stehen um die wp-config.php zu bearbeiten und eine leere .htaccess-Datei zu erstellen.

Bitte ich die Mac-Teilnehmer eine leere .htaccess-Datei zu erstellen, dann beinhaltet diese folgenden Inhalt:

{\rtf1\mac\ansicpg10000\cocoartf824\cocoasubrtf480
{\fonttbl}
{\colortbl;\red255\green255\blue255;}
\paperw11904\paperh16838\margl1440\margr1440\vieww12000\viewh11200\viewkind0
} 

Mir scheint es so als ob eine Textverarbeitung dazwischen funkt und die grundlegenden Meta-Infos anlegt. Wie kann man das abstellen?

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

Alles weitere kann man dann mit ihm besprechen.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

WordPress hat keine Relevanz…

Bei O'Reilly und DataBecker hat man direkt und dankend abgelehnt. Beim Galileo-Verlag hatte ich zuerst Erfolg, aber leider wurde das Thema dann doch später abgelehnt. Ich hatte noch ein, zwei weitere Verlage kontaktiert, weiß aber nicht mehr genau welche.

Alle waren der Meinung, dass WordPress kein Buchthema hergibt. Man möge sich aber bitte mal jetzt anschauen, welche Verlage mittlerweile auch WordPress-Bücher * im Angebot haben?

… bhv/mitp war da anderer Meinung

Nach dem ich dann im Sommer 2006 das Manuskript unseres CSS-Buches * abgegeben habe, hatte ich mich wieder an einige Verlage gewendet und bin glücklicherweise beim damaligen bhv-Verlag auf offene Ohren gestoßen.

Zuerst folgte WordPress: Das Einsteigerseminar * und später dann im Schwester-Verlag (mitp) WordPress – Das Praxisbuch *. Mittlerweile sind die beiden Verlage zu einem Verlagverbund vereint.

Damit das ganze jetzt nicht in ala "Opa erzählt vom Krieg" ausartet komme ich zu dem eigentlichen Thema. So bald man sich mit Leuten unterhält und dann irgendwann raus kommt, dass man IT-Fachbücher schreibt kommen die ersten Fragen zu diesem Thema. Das durfte ich auch zuletzt sowohl in meinem formspring.me-Account als auch im Account von Michael Jendryschik feststellen.

Daher dachte ich mir, ich schreibe auch hier ein paar Zeilen dazu.

Wie wird man Autor eines IT-Fachbuchs?

Unterschiedlich. Entweder die Verlage werden auf dich aufmerksam und sprechen dich an. So war das bei meinem CSS-Buch. Oder du sprichst gezielt die Verlage an. Falls du die Verlage ansprichst, dann solltest du dir zumindest ein paar konkrete Gedanken gemacht haben: das Thema eingrenzen, wer ist die Zielgruppe, Umfang des Buches etc. und du solltest auf jeden Fall zumindest ein fertiges und schlüssiges Inhaltsverzeichnis haben.

Womit schreibst du?

Ich schreibe in Word und zwar immer noch mit Word 2002, welches ich mal vor ein paar Jahren für ca. 30 Euro erworben habe. Das Hauptprodukt war eigentlich Works, aber weil Word 2002 dort als Beigabe war habe ich zugegriffen. Ich sehe es einfach nicht ein einen dreistelligen Bereich für eine Textverarbeitung auszugeben.

Word deswegen, weil bis jetzt alle Verlage mit denen ich Kontakt hatte eine Word-Vorlage parat hatten. Einige bieten noch zusätzlich eine OpenOffice-Vorlage oder lassen die Autoren in LaTeX arbeiten oder auf Wunsch auch direkt setzen. Selber setzen hieße sich noch zusätzlich eine extra Software einzuarbeiten, LaTeX kling in meinen Ohren zu versaut und OpenOffice ist bei sehr langen Texten nicht wirklich viel besser als sein Schmuddelbruder Word.

Auch wenn ich beim Schreiben sehr oft über Word geflucht habe so hat er zumindest gegenüber OpenOffice einen Vorteil: die bessere Rechtschreibprüfung. Für Viertel-Legastheniker, wie ich es bin, ein wichtiger Faktor.

Beim nächsten Mal werde ich mal testen in wie fern, die Word-Vorlagen der Verlage mit SoftMaker kompatibel sind, da man von dieser Software nur gutes hört.

Wie lange dauert es bis das Buch dann fertig ist?

Das ist unterschiedlich und hängt logischerweise vom Umfang des Buches ab. Aber drei bis vier Monate muss man mindestens berechnen. Man macht das ja nicht hauptberuflich sondern neben der eigentlichen Arbeit her. Die Spanne bei uns bzw. mir lag bei etwa 2,5 bis 4,5 Monaten pro Buch.

Dann geht das Manuskript an den Verlag. Dort wird es korrigiert, gesetzt und an die Druckerei weitergeleitet. Bis das Buch wirklich im Handel erhältlich ist, dauert es in der Regel mehr als zwei Monate … eher drei Monate.

Was verdient man pro verkauftem Buch?

Leider nicht viel. In der Regel erhalten die Autoren in etwa 8-12 % vom Nettoverkaufspreis. Diese 8-12 % habe ich als Erfahrung bzw. Info von den Verlagen mit denen ich Kontakt hatte und von Kollegen, die für andere Verlage tätig sind.

Der Nettoverkaufspreis liegt bei etwa 50% und das ist das was dem Verlag übrig bleibt. Die andere Hälfte ist Steuer und Händlerrabatte. Hier mal ein kleines Rechenbeispiel.

Sagen wir mal der Autor schreibt ein IT-Fachbuch, welches im Handel 30 Euro kostet und der Verlag gewährt ihm ein Honorar von 10 %. So bekommt der Autor 1,50 Euro pro verkauftem Buch.

Wie hoch ist die Auflage?

Behalten wir die 1,50 Euro aus dem Beispiel im Hinterkopf und wenden wir uns zuerst der Auflage zu. Die Auflage liegt nach meiner Kenntnis in der Regel bei 1.500 bis 2.000 Exemplaren. Nehmen wir mal an, der Verlag glaubt an das Buch (aus dem Rechenbeispiel) und druckt direkt 2.000 Exemplare und nehmen wir mal an es verkaufen sich alle Exemplare ohne das der Verlag z. B. Rezensionsexemplare verschicken muss … was eigentlich nie geschieht.

Bleiben wir mal aber bei 2.000 Stück, mit runden Zahlen lässt sich leichter rechnen. Ok, das Beispiel-Buch verkauft sich sehr gut und alle 2.000 Exemplare sind sagen wir mal innerhalb eines Jahres weg. Eine reife Leistung.

Der Autor bekommt somit 3.000 Euro. Aber die 3.000 Euro gehören einem nicht ganz, weil Mama-Finanzamt auch ihren Teil haben möchte.

Das ist auch der Grund, warum die meisten Autoren dann versuchen über verschiedene Partnerprogramme, wie z. B. Amazon, die Bücher zu verkaufen. Es handelt sich hier also nicht um Gier sondern lediglich um Versuch, das Verhältnis zwischen investierter Zeit und Einnahmen ein bisschen zu verbessern.

Sicherlich, es gibt diverse IT-Fachbücher, die sich wie warme Semmeln verkaufen, zum Beispiel die aus der Bestseller-Liste *. Aber das sind lediglich die Ausnahmen, die die Regel bestätigen und ein sehr gutes Werk, wie z. B. Website Boosting 2.0 schreibt sich mit seinen 800 Seiten auch nicht in vier Monaten.

Was man im Gegensatz zur Belletristik, also z. B. einem Roman, nicht vergessen darf, ist das eine Folgeauflage des IT-Fachbuches mit zusätzlicher Arbeit verbunden ist. Und WordPress siedelt hier ganz oben an der Spitze, eine Folgeauflage heißt hier, zumindest vom Arbeitsumfang her, eigentlich ein neues Buch.

Aber wenn nicht reich, dann zumindest viele neue Kunden?

Sicherlich, der Gedanke ein IT-Fachbuch zu schreiben um neue Kunden zu gewinnen ist nicht verkehrt. Aber das muss man auch ein bisschen relativieren. Die sehr niedrige Auflage von den meisten IT-Fachbüchern habe ich bereits oben angesprochen. Und wer Geld in ein Buch investiert, der tut dies in aller erster Linie um sich fortzubilden und nicht zu schauen ob ich den Fachmann auch engagieren kann.

Klar, natürlich habe ich auch einige Kunden bzw. Aufträge bekommen, weil die Leute meine bzw. unsere WordPress-Bücher gelesen haben und dafür bin ich dankbar. Aber hätte ich die investierte Zeit in Blog-Artikeln investiert, dann bin ich mir sicher, es hätte sich in diesem Bereich mehr getan.

Und das bitte bis jetzt nicht! als Jammerei und Wehklagen missverstehen, ich wollte lediglich die Infos liefern.

Lohnt es sich oder lohnt es sich nicht?

Das hängt davon ab. Wer darauf ist schnell und/oder viel Geld zu verdienen, der sollte versuchen einen Roman zu schreiben oder sich in anderen Feldern umzuschauen.

Auch wer denkt "ich schreibe ein IT-Fachbuch und die Kunden rennen mir die Bude ein" sollte bedenken, dass die Auflagen, mal von seltenen Ausnahmen abgesehen, sehr klein sind und die Leute darauf aus sind, dass Wissen im Buch selber umzusetzen. Wenn man die investierte Zeit berechnet, dann lohnt es sich eher in ein Webprojekt zu investieren, hierbei kann man einfach viel mehr Leute erreichen.

Wer aber Spaß hat zu schreiben und sein Wissen weiter zu geben, der sollte sich daran versuchen. Und als eine Referenz ist ein Fachbuch logischerweise nicht zu verachten.

* = Amazon-Partnerlink

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

© 2002-2009 Max Müller

daher sollte man die ganzen manuell eingetragenen Jahreszahlen aktualisieren oder stattdessen einfach das aktuelle Jahr dynamisch eintragen:

© 2002-<?php echo date('Y'); ?> Max Müller

Erinnert via @smashingmag.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

Folgenden Zusatz schreibt man für Kunden aus der Schweiz:

Der Umsatz ist gem. § 3a Abs. 3 i.V.m. Abs. 4 UStG im Inland nicht steuerbar.

Das heißt, der Rechnungsbetrag für die Schweizer ist aus der Sicht eines deutschen Dienstleisters Brutto wie Netto, da keine Umsatzsteuer erhoben wird.

Folgendes kommt als Zusatz wenn man Rechnungen für französische Kunden schreibt:

Gesamtbetrag
xyz Euro. Umsatzsteuer wird nicht erhoben: nach §13b Abs. 2 UStG geht die Versteuerung auf den Leistungsempfänger (FR …) über.

Im Fall von Frankreich muss der deutsche Dienstleister keine Umsatzsteuer erheben, da die Versteuerung an den französischen Kunden übergeht. Daher ist es notwendig die französische Umsatzsteuer-Identifikationsnummer (FR …) des Kunden zu kennen.

Rechnungen für Kunden aus der USA:

Umsatzsteuer wird gem. § 3a Abs. 3+4 UStG nicht erhoben.

Der Zusatz für die USA ist für unseren laienhaften Verständnis identisch mit dem für die Schweiz (bitte korrigieren, wenn wir falsch liegen), auch hier wird die Umsatzsteuer nicht erhoben. Der Rechnungsbetrag ist Brutto gleich Netto.

Die obigen Informationen habe ich von meinem Steuerberater und die habe ich bisher genutzt und das Finanzamt hatte bis jetzt nichts zu beanstanden.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

[Grafik auf Bitten von VG Wort entfernt.]

In dem Brief war nämlich ein Scheck von der VG Wort in Höhe von 1.401 Euro. Für Leute, die die VG Wort nicht kennen: die VG Wort ist so etwas ähnliches wie die GEMA bei den Musikern. Meine bessere Hälfte bekam übrigens auch einen VG-Wort-Scheck: immerhin 281 Euro.

Bei den 1.400 Euro handelt es sich um Tantiemen für vier Fachbücher und zwei Zeitschriften-Artikel. Also wird man durch die Tantiemen von der VG Wort nicht reich, es handelt sich aber um eine nettes Taschengeld, welches ich natürlich dankend annehme. Der ganze Aufwand lohnt sich nur für Leute, die wirklich viel schreiben.

Bei dieser Ausschüttung handelt es sich um die Hauptausschüttung bei der die Print-Werke bedacht werden. Irgendwann im Oktober wird hoffentlich ein weiterer Scheck eintrudeln in dem unsere Online-Texte bedacht werden. Schauen wir mal.

Jetzt muss ich die VG Wort noch darum bitten, dass man mir auch noch die Umsatzsteuer (aka Mehrwertsteuer) auszahlt, weil ich als Autor USt-pflichtig bin. Des weiteren brauche ich noch eine ordentliche Rechnung, die nach einzelnen Posten aufgeschlüsselt ist und so weit ich informiert bin, wird mich dieser Service 15 Euro kosten.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

Der Direktlink zu der Umfrage

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

Via Sahanya, via akadeMix.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

Mit PixelPerfect gibt es eine weitere interessante Erweiterung für Firebug, die vor allem dann interessant sein sollte wenn pixelgenaues Arbeiten gefragt ist.

PixelPerfect im Einsatz

Die Bedienung der Erweiterung ist recht einfach. Man lädt temporär eine Grafik Hoch bzw. bindet sie in die Erweiterung ein. Dann kann man der Grafik einen Opacity-Wert ("Durchsichtigkeit") vergeben und Sie dann mittels den Zahlenwerten oder durch verschieben mit der Maus über der Website positionieren.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

Ein paar kleine Infos zu den Vorlagen

Bevor ich mit der Anleitung anfange, wollte ich noch ein paar Infos geben. Die Vorlagen kann man sich auf der Website von Microsoft herunterladen (Fünf Webvorlagen; zip, 3,62mb). Das Paket besteht aus fünf dynamischen Webvorlagen (DWT), den gleichen fünf Layouts in statischer Variante und weiteren Informationen zu den Vorlagen (Installation, Hintergrundinfos etc.).

Zwei der Vorlagen stammen komplett aus meiner Hand. Weitere zwei der Vorlagen habe ich in Zusammenarbeit mit Christoph Raffelt und eine Vorlage in Zusammenarbeit mit Christina von Poser entwickelt. Die beiden sind als Grafikdesigner tätig und haben Photshop-Vorlagen bereitgestellt und ich habe dann daraus Templates erstellt.

Daher kann ich sagen, ohne das es groß nach Eigenlob müffelt, dass die Vorlagen schön und gut geworden sind.

Wie erstellt man dynamische Webvorlagen (DWT) für Expression Web 2

Expression Web 2: Code-Ansicht

Nun zu dem eigentlichen Thema des Beitrages. Vorab gibt es eine gute Nachricht, mann muss nicht in Expression Web 2 arbeiten um eine DWT zu erstellen, dies geht mit jedem beliebigen Texteditor.

Aber es tut nicht weh mit Expression Web zu arbeiten, es handelt sich um einen Webeditor in dem man sich schnell zu Recht findet und der die gängigen Funktionen bietet, die so ein Webworker benötigt.

Zuerst die statische Vorlage

Wie ich das auch üblicherweise bei der Erstellung von WordPress-Themes mache, habe ich zuerst ein statisches HTML-Template erstellt und es auf "Herz und Nieren" getestet. Nach dem die einzelne Seite getestet wurde, habe ich die anderen Unterseiten erstellt, mit Blindtext gefüllt etc. … so als ob der Auftrag darin bestünde, statische Vorlagen abzuliefern.

Und wie kommt jetzt die Dynamik rein?

DWT: Ordner und Dateien

Nach dem die statischen Vorlagen komplett waren werden aus denen dynamische Vorlagen gemacht. Zuerst schauen wir uns exemplarisch den Ordner- und Dateien-Aufbau einer fertigen dynamischen Vorlage an.

Standardmäßig liegen die Vorlagen unter dem folgenden Pfad im Programmordner:

Web 2\Templates\1031\WEBS12

Dort erstellen wir einen Ordner dem wir die Endung .tem verpassen. In meinem Fall heißt dieser Ordner farbenfroh1.tem. Dieser Ordner muss auf jeden Fall eine Textdatei beinhalten, die genau so heißt wie der Ordner und eine .inf-Endung besitzt: farbenfroh1.inf. Diese Datei beinhaltet Informationen über das Template: Name, Version, wie die Dateien heißen, wo die liegen und unter welcher Struktur die abgespeichert werden sollen.

Hier der Inhalt der Textdatei:

[info]
_LCID=1031
_version=1.0.0000.0
title=Farbenfroh 1
description=Ein Template für eine private oder Vereins-Website.
preview=farbenfroh1.jpg

Eine Vorlage auswählen

Diese Angaben stellen quasi den Dokumentkopf dar. _LCID=1031 bezieht sich auf den Speicherort bzw. auf den Ordner zwei Ebenen höher, darunter folgt die Versionsangabe gefolgt von dem Titel des Templates, kurzer Erklärung und dem Namen des Vorschaubildchens.

Wenn man dann innerhalb Expression Web, dass Template anwählt (Datei/Neu/Website/Vorlagen), dann sieht man auch schon die oberen Angaben aus der Textdatei (siehe Abbildung). Im unteren Teil des Auswahlfensters kann man den Speicherort des zukünftigen Projektes festlegen.

Doch das ist nicht alles was in der inf-Datei notiert ist. Es folgen Angaben zu den Dateien und wo sie nachher bei dem Webprojekt gespeichert werden. Hier verkürzterweise die Angaben aus der farbenfroh1.inf:

[FileList]
1.jpg=images/1.jpg
1-klein.jpg=images/1-klein.jpg
2.jpg=images/2.jpg
2-klein.jpg=images/2-klein.jpg
kopfbereich.gif=images/kopfbereich.gif
navigation.gif=images/navigation.gif
pfeil.gif=images/pfeil.gif
fotos.html=
geschichten.html=
impressum.html=
informationen.txt=
ueber-mich.html=
print.css=
style.css=
master.dwt=
index.html=

Es ist leider so, dass alle Template-Dateien in den Hauptordner müssen, Dateien in den Unterordnern werden ignoriert. Allerdings kann man nachher für das Webprojekt bestimmen, wo die Datein gespeichert werden: 2.jpg=images/2.jpg. Links vor dem Gleichheitszeichen kommt die Angaben für den "ist-Zustand" und rechts die Angabe zu dem späteren Speicherort. Der Ordner mit dem Namen images ist für die Bilder Pflicht, andere Angaben werden nicht berücksichtigt.

Soll die Datei aus dem Template auch nachher im Webprojekt im Hauptordner bleiben, dann kann man die Angabe nach dem Gleichheitszeichen leer lassen, z. B. index.html=.

Jetzt geht es um die Wurst: master.dwt kommt zum Einsatz

Nun kommen wir zu der zentralen Template-Datei der dynamischen Vorlage: der master.dwt. Im Grunde genommen handelt es sich bei der master.dwt um eine HTML-Datei welche man einfach umbenennt oder in Expression Web (Datei/Neu/Seite/Dynamische Webvorlage) neu erstellt.

Diese Datei beinhaltet den Quelltext bzw. den Inhalt, die jede neue Unterseite bekommt. Wenn man dann an der Masterdatei etwas ändert und die aktualisiert dann werden alle zugeordneten Unterseiten überschrieben.

Bearbeitbare Bereiche

Das heißt, wenn sich an einer bestimmten Stelle etwas von Unterseite zur Unterseite ändern soll, dann muss man diese Stelle besonder kennzeichnen:

<!-- #BeginEditable "doctitle" -->
<title>Ich und meine Geschichten</title>
<!-- #EndEditable -->

Hier wird der Seitentitel innerhalb zwei spezieller HTML-Kommentare verpackt, die Expression-Web signalisieren: "der Inhalt dieses Tags ändert sich von Seite zur Seite, bitte nicht durch den Inhalt der Masterdatei überschreiben". Diese Code bindet man nicht nur in der master.dwt ein, sondern an der entsprechenden Stelle in allen Unterseiten, die dem Template angehören.

Die Auszeichnung der bearbeitbaren Bereiche hat nicht nur den Vorteil, dass der Inhalt durch das Überschreiben der Masterdatei geschützt ist, sondern nur diese Bereiche kann man auf der WYSIWYG-Ebene mit neuem Inhalt füllen. Bereiche außerhalb der DWT-Kommentare sind in WYSIWYG-Modus nicht bearbeitbar.

Achtung: die Kommentare der bearbeitbaren Bereiche benötigen ein komplettes Element nach folgendem Muster:

<!-- #BeginEditable "name" --><tag>...</tag><!-- #EndEditable -->

Konstrukte wie folgender:

<!-- #BeginEditable "name" --><tag attribut="wert"><!-- #EndEditable -->

um z. B. variabel Attribute unterzubringen sind leider nicht möglich. Das ist schade, weil es doch etwas die Möglichkeiten einschränkt um z.B. via CSS aktive Menüpunkte hervorzuheben.

Unterseiten dem DWT zuweisen

Will man dem Template neue Unterseiten zuweisen so kann man auch hier auf zwei Arten vorgehen. Entweder man erstellt eine neue Template-Unterseite im Expression Web (Datei/Neu/Seite/Aus dynamischer Webvorlage erstellen…) oder man öffnet im Texteditor seiner Wahl eine bestehende Unterseite und erweitert sie um folgenden Kommentar (hervorgehoben):

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<!-- #BeginTemplate "master.dwt" -->
...
</body>
<!-- #EndTemplate -->
<html>

Das wär's, es reicht um ein einfaches DWT zu erstellen und weil ein guter Coder mehr sagt als 1.000 Worte würde ich dir empfehlen, einfach die von mir erstellten Vorlagen zu studieren.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

• 07. April 09, München
• 14. April 09, Karlsruhe
• 17. April 09, Hamburg
• 11. Mai 09, Köln
• 12. Mai 09, Berlin
• 20. Mai 09, Frankfurt

Der Eintritt ist frei. Es sind allerdings nur jeweils ca. 100 Teilnehmerplätze pro Veranstaltungsort verfügbar, eine Anmeldung ist daher unbedingt notwendig.

Das Gute an der ganzen Geschichte ist … so rein aus der egozentrischen Perspektive … dass perun.net webwork gmbh einer der Partner ist.

Ich habe das Vergnügen in Auftrag von Microsoft Deutschland mehrere HTML-Vorlagen für Expression Web 2 erstellen bzw. umsetzen zu dürfen, die bestimmte Kriterien erfüllen: keine Layouttabellen, valides Markup, Barrierearm, sauberes CSS etc. Ich werde dann in einer 15-minütige Kurzpräsentation die Vorlagen vorstellen.

Weitere Infos zu der Roadshow gibt es im Weblog von Steffen Ritter.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

Was wird vorausgesetzt? Sehr gute Kenntnisse in Photoshop, Illustrator und InDesign. Zudem wäre es wichtig, dass man aus dem Großraum Köln/Bonn kommt, weil ab und an auch Arbeit vor Ort in Bonn erledigt werden müsste. Wer Erfahrungen in der Corporate-Design-Entwicklung hat, ist besonders willkommen.

Wer sich angesprochen fühlt, der kann sich bei mir melden und ich leite das dann weiter an Christoph. Die Kontaktdaten findest du im Impressum.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen

Dabei habe ich wie die üblichen Verdächtigen (Photocase, aboutpixel.de, sxc.hu, iStockphoto etc.) abgeklappert, welche ich aufgesucht habe als ich das letzte Mal auf der Suche nach freiem Bildern für die freien WordPress-Themes war. Das muss auf jeden Fall vor mehr als drei Jahren gewesen sein.

Nun durfte ich feststellen, dass sich bei einigen Anbietern auch in den AGB so einiges geändert hat. Bei einigen steht explizit dass der Einsatz in den Templates nicht erlaubt sei oder das er einer schriftlichen Erlaubnis des Fotografen benötigt wird – dann kann ich mir aber auch direkt die einzelnen Fotografen-Portfolios anschauen.

Bei anderen wiederum heißt es in den Regeln sinngemäß und frei übersetzt:

• Eine Vervielfältigung des Bildes ist nicht gestattet
• Eine Weitergabe des Bildes ist nicht gestattet
• Eine Erlaubnis-Übertragung ist nicht gestattet
• Das Bild darf nicht als einzelne Datei zum Download angeboten werden

Wenn ich aber ein Template erstelle, ein Bild dort einbinde und das Template zum freien Download anbiete, dann verstoße ich gegen alle vier Regeln. Die Regeln bei den meisten Anbietern sind zwar recht liberal so das man entweder kostenlos oder für geringe Summen recht gute Bilder auch für kommerzielle Produkte einsetzen kann, z. B. für Bücher … aber nicht für Templates, auch für kostenlose nicht. Von kostenpflichtigen Templates will ich hier gar nicht reden.

Lösung gefunden

Nach langer Suche, abklappern vieler Auflistungen von Bilderdiensten, Lesen von kilometerlangen AGB in deutsch und englisch sind meine bessere Hälfte und ich doch noch fündig geworden. Es gibt einen Dienst der Bilder für 1-3$ anbietet, für weitere 10$ erwirbt man eine erweiterte Lizenz, die z. B. auch für Website-Templates gilt.

Auf www.unprofound.com gibt es kostenlose Bilder, die man auch für Templates einsetzen kann, das hat uns der Betreiber zusätzlich in einer E-Mail bestätigt. Gut, der Dienst beherbergt nicht nur Bilder, die es auf ein Hochglanzmagazin schaffen würden, aber einige haben schon eine ordentliche Qualität.

Auf iStockphoto kann man auch eine erweiterte Lizenz erwerben, diese kostet allerdings 125 Credits, was in etwa 130-150 Euro entspricht.

Photocase bietet seit einiger Zeit auch eine Art erweiterte Lizenz an, aber bei meiner neulichen Kurzsuche konnte ich nur wenige Bilder finden, bei denen es möglich war eine erweiterte Lizenz zu erwerben. Ein Bild mit einer erweiterten Lizenz kostet 100 Credits, was einem Wert von 90 Euro entspricht.

Wer weitere Dienste oder auch Fotografen kennt, die Bildmaterial für kostenlose und gegebenenfalls auch für kostenpflichtige Templates anbieten möge einen Kommentar hinterlassen oder mir eine E-Mail schicken. Bitte keine Hinweise zu Diensten die das nicht erlauben, die kenne ich schon alle.

Wir im Web: Twitter – Facebook – XING – WordPress-Buch – Webwork-Tools – Geld 2.0

Blog unterstützen: Flattr – Bee5: Geld sparen oder verdienen