5202

ein Blog über technische Fragen zu Blogger

Blogger: Ein eigenes Template entsteht - Teil 1 - Einleitung

von

Heute am Ostersonntag startet wie angekündigt meine längere Post-Reihe, in der es darum gehen wird, ein eigenes Template in Blogger Blogs zu bauen.

Die Reihe wird vom Blog Widget bis zum fertigen responsive Layout alles umfassen, was zu einem eigenem Layout gehört. Responsive ist ein neues Buzz-Word und meint, dass sich euer Layout über alle mögliche Gerätegrößen hinweg an unterschiedliche Bildschirmgrößen anpassen wird.

Ich weiß, dass das ein sehr ambitioniertes Vorhaben ist. Mir geht dieses Projekt schon eine ganze Weile durch den Kopf - zum Start ein paar allgemeine Gedanken dazu:

Sanfte Hügel

Zuerst einmal freut es mich, dass ihr bis zu diesem Absatz überhaupt weiter gelesen habt :) - zeigt es doch, dass Interesse an einem eigenen Blogger-Layout vorhanden ist. Ihr bringt Engagement, Ehrgeiz und Freude mit, euch mit Beschreibungssprachen wie HTML & CSS auseinander zu setzen.

Ich verspreche euch, dass meine Reihe mit dem, was üblicherweise an Blogger-Layout-Tutorials angeboten wird, nicht viel zu tun hat. Alle Tutorials, die ich kenne, beschränken sich mehr oder weniger auf den Umbau von bestehenden Blogger-Layouts wie 'Simple Weiß' oder die alten Designs von 2006.

Wir dagegen versuchen etwas völlig Neues - wir starten mit den 'Knochen', also dem Grundgerüst und den minimalsten Vorraussetzungen für eine gültige Blogger xhtml Datei. Ich vergleich das mal mit einem Berg, auf dem ihr zuerst über eine paar sanfte Hügel spazieren dürft.

Die erste Steilwand

Yeah ... und dann steht ihr unvermittelt vor der ersten Steilwand, nämlich der Struktur und Logik der Blogger Widgets im Allgemeinen und des größten, wichtigsten und komplexesten Widgets im Besondern, nämlich des Blog Widgets Blog1.

Wir werden uns im Verlauf dieses Kurses ein eigenes Blog1 Widget von Grund auf selber bauen - dazu müssen wir einen tiefen Blick in die Geheimnisse der Blogger Layout-Data-Tags, Schleifen und konditionalen Bedingungen werfen.

Ich denke, das Meiste davon dürfte dem Großteil von euch unbekannt sein und mit jedem Schritt wird das Niveau zunächst steiler werden.

Hinfallen - Aufstehen

Ich will ehrlich sein - ihr werdet nach kürzester Zeit vermutlich an einen Punkt kommen, der euch frustrieren und niederschmetternd wird, weil etwas nicht klappt wie ihr es euch vorstellt, egal was ihr probiert. Ich weiß das, weil ich selber teilweise schon Tage über solchen Problemen gesessen habe und nicht weiter kam.

Was macht ihr in einer solchen Situation?

Gebt nicht gleich bei der ersten Schwierigkeit auf!

Das ist mein wichtigster Rat an euch - lernt, indem ihr Hürden überwindet. Wenn was nicht klappt, schaut euren Code zuerst noch einmal nach Fehlern durch. Fangt mit einem einfachen Beispiel neu an ... schlaft drüber ... macht was anderes und kommt später noch mal auf das Problem zurück.

Wenn das alles nicht hilft und ihr nicht mehr weiter wisst, dann macht euch die Mühe und beschreibt euer Problem ausführlich. Allein schon eine richtige Frage zu formulieren, kann manchmal die Hälfte des Problems lösen.

Fragen stellen

Stellt eure Fragen am besten nach einem W-Schema: Was wollt ihr erreichen, wie habt ihr das Problem bis jetzt zu lösen versucht, an welcher Stelle kommt ihr nicht weiter? Außerdem ist es sehr hilfreich, ein kurzes CodeBeispiel und einen Link auf einen Test Blog zu geben, wo das Problem auftritt.

Eine Bitte:

Postet immer den Link zu eurem Test-Blog ... auch wenn ihr das letzt Woche schon mal getan habt. Es ist unglaublich zeitaufwendig, alte Kommentare, Mails oder Foren durchzuschauen, wo eventuell der Link zu einem Test Blog stehen könnte.

Falls ihr euren Test-Blog auf ‚privat‘ gestellt habt, dann ändert bitte die Berechtigung auf ‚alle‘. Ladet mich nicht als Leser oder Autor ein ... ich habe mehr als 40 eigene Test-Blogs in meinem Dashboard und wenn ich jetzt noch anfange, andere Blogs dort hinein zu nehmen, verliere ich den Überblick.

Falls ihr zu den Helden gehört, die auch auf Test-Blogs Rechtsklick-Sperren betreiben, dann kann ich euch leider nicht helfen :(. Diese sind so was von nervig, dass ich mir das nicht mehr antue – sorry Leute.

Prinzipien

Ich möchte jetzt die Schwierigkeiten aber auch nicht überbetonen - ich habe mir natürlich Gedanken darüber gemacht, wie ich so einen Kurs gestalten kann, dass er für euch hilfreich ist. Für mich gibt es drei wichtige Punkte:

Kurze Iteration
Einen kurzen Code Block zu erklären ist besser als ein riesiger Post, der alle erschlägt.
Verstehen
Jeder einzelne Schritt soll nachvollziehbar sein.
Kommunikation
Wenn es Fragen gibt, dann stellt sie und ich oder jemand anderes werden versuchen diese zu beantworten.

Das klingt zunächst einmal selbstverständlich, ist es aber nach Durchsicht diverser Texte [auch meiner eigenen sic!] nicht. Ich bin kein Anhänger vom „sich-sklavisch-an-seine-Prinzipien-halten“, aber ich werde versuchen, das Projekt mit einer gewissen Disziplin anzugehen.

Tools

Ich setze bei euch einfach mal ein minimales Wissen in HTML und CSS voraus - ansonsten braucht ihr einen Browser, einen Blogger Account und einen Editor.

Bei dem Browser werden wir ab einem bestimmten Punkt das Entwicklertool und die Konsole vom Chrome Browser verwenden. Falls ihr eine unüberwindliche Abneigung gegenüber Chrome habt, könnt ihr natürlich auch jeden anderen Browser benutzen, aber damit möglicherweise nicht alles machen - euer Problem :D.

Falls ihr euch noch nie mit dem Entwicklertool von Chrome beschäftigt habt, würde ich euch dieses wunderbare Tutorial auf codeschool empfehlen. Die ersten drei Lektionen zeigen euch alles, was ihr für meine Reihe braucht.

Weiterhin benötigt ihr Test-Blogs in einem Blogger Account - ich empfehle euch, nicht nur einen Test-Blog anzulegen, sondern gleich mehrere.

Beim Blog Design ist es wichtig, auch mal Nebenpfade auszuprobieren und das mit dem Hauptweg zu vergleichen - und das geht nur, wenn ihr entsprechende Testumgebungen zur Verfügung habt. Vierzig Test-Blogs halte ich zum Beispiel nicht für übertrieben.

Viele Leute benennen ihre Test-Blogs gerne mit 'Mein kleines Test Blögchen' o.ä. und dagegen ist selbstverständlich nichts zu sagen, außer dass bei dreißig oder vierzig Blogs irgendwann einmal die Übersicht verloren geht ... auf welchem Blog habe ich eigentlich was ausprobiert?

Aus dem Grund glaube ich das es nützlich ist, eine bestimmte Systematik in seine Test Umgebungen zu bringen - das ihr auch noch nach zwei Wochen Pause wieder zurecht findet.

Außerdem braucht ihr einen Editor. Windows-Benutzer würde ich den kostenlosen Editor Notepad++ an's Herz legen. Falls ihr OSX Fan seid, schaut es schwieriger aus :( - was wirklich vergleichbares zu Notepad++ gibt es meiner Ansicht nach auf dem Mac nicht.

Ihr könnt euch Sublime Text 2 anschauen, Textwrangler oder den kostenpflichtigen Smultron - kostet so was um €4.99. Jeder Editor hat seinen Vor- und Nachteil. Schaut mal, ob ihr mit einem davon zurecht kommt.

Copyright

Wie immer stehen alle Rechte an dieser Arbeit unter der DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE - ihr könnt damit alles und zu jedem Zweck machen, der euch richtig erscheint.

Wenn jemand einen Weg findet, damit die fette Kohle zu verdienen, ermutige ich ihn ausdrücklich dazu. Kleinere Kurse als das was ich hier plane, laufen ja gerade in der Bloggospähre als kommerzielle Ebooks um - es dürfte also durchaus einen Markt für so was geben.

Alle Posts der Reihe

Danke!

An dieser Stelle möchte ich mich besonders bei meinem Beta-Leser Paul Menz bedanken. Durch sein Korrekturen, Feedback und Ideen wird die Serie ganz sicher zu etwas besserem, als ich es alleine hinbringen würde. Danke für die viele Arbeit!

Start

Soweit meine Einleitung zu dem Projekt - mit dem nächsten Post geht es dann richtig los und zwar mit den 'bones' der Blogger xml Datei - stay tuned!

Ich wünsche jedem, der sich von hier aus auf dem Weg macht, sich a bisserl tiefer mit dem Blogger Layout auseinanderzusetzen, viel Spaß und vor allem viel Erfolg!

P.S.: Frohe Ostern!