5202

ein Blog über technische Fragen zu Blogger

Blogger: Ein eigenes Template entsteht - Teil 3 - 'hello world'

von

In der IT ist es Tradition, die Einführung in ein Programm mit einer 'hello world' Anweisung zu starten. So etwas bauen wir heute mit dem Basis-Layout.

Wir diskutieren das Problem, das Blogger eigene CSS- und Javascript-Dateien in euer Template lädt. Wenn ihr Blogger nicht als Blog, sondern zum Hosten einer simplen One-Page-Site verwenden wollt, könnt ihr diese Dateien ausschalten.

Dazu erweitern wir das Basis-Layout. Abschließend überprüfen wir die Validität, d.h. die Gültigkeit des erweiterten Basis-Layouts.

Basis-Layout

Zur Demonstration der Syntax in einem Blogger-Blog bauen wir uns aus dem Basis-Layout eine sehr einfache 'hello world' Seite.

Zur Erinnerung: Das ist das Basis-Layout:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>

 <head>
     <title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
  <!-- eigene CSS -->
]]></b:skin>
</head>

<body>
<b:section class='main' id='main'/>
  <!-- eigenes HTML -->
</body>

</html>

Falls ihr das noch nicht getan habt, ladet ihr das Basis-Layout zunächst in einen Test-Blog und zwar unter Dashboard > Vorlage > HTML bearbeiten

Nun geht ihr auf den Blog und schaut euch das Ergebnis an - ihr seht logischerweise nur ein leere Seite.

Entwicklertool

Wir untersuchen nun die 'leere' Seite a bisserl genauer und zwar mit dem in Chrome eingebauten Entwicklertool.

Falls ihr euch noch nie mit dem Entwicklertool beschäftigt habt, würde ich euch empfehlen, die ersten zwei oder drei Lektion dieses Tutorials anzuschauen. Das Tutorial ist zwar auf Englisch, aber didaktisch sehr gut aufgebaut und leicht verständlich.

Um das Entwicklertool zu starten, klickt ihr irgendwo im Blog mit Rechtsklick und wählt dann Element untersuchen. Alternativ startet ihr das Entwicklertool in den Chrome Einstellungen unter Tools > Entwicklertools

Im unteren Drittel des Browsers öffnet sich nun ein Fenster mit verschiedenen Tabs - standardmäßig liegt beim öffnen des Entwicklertools das Fenster auf dem Tab 'Elements'.

Innerhalb dieses Fensters seht ihr nun den DOM des Basis-Layout, d.h. eine hierarchische Darstellung von dem, was der Browser an HTML, CSS und Javascript für diese Seite verarbeitet.

In dieser Darstellung sind nun einige Bereiche eingeklappt - etwa der Kopfbereich. Öffnet den Kopfbereich mit dem kleinen Dreieck links außen und schaut euch den DOM näher an.

widget_css_2_bundle.css

Ihr findet im Kopfbereich nun eine Datei mit der Endung widget_css_2_bundle.css.

Diese Datei ist eine gepackte CSS Datei von Blogger - to make a long story short: Das typische 'look und feel' von Blogger wird darüber erzeugt.

Für ein wirklich eigenständiges Blogdesign müssen wir diese Datei ausschalten. Wir benützen dazu einen kleinen Hack für den <b:skin Tag, der ursprünglich von Volter Quandt stammt.

Dies ist der <b:skin Tag im Basis-Layout:

<b:skin><![CDATA[
  <!-- eigene CSS -->
]]></b:skin>
Wir schreiben den Tag so um:
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
 <b:skin><![CDATA[*/
  <!-- eigene CSS -->
 ]]></b:skin>

Das erweiterte Basis-Layout schaut damit so aus:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>

 <head>
     <title><data:blog.pageTitle/></title>
 &lt;style type=&quot;text/css&quot;&gt;
  &lt;!-- /*
   <b:skin><![CDATA[*/
    <!-- eigene CSS -->
 ]]></b:skin>
 </head>

<body>
<b:section class='main' id='main'/>
  <!-- eigenes HTML -->
</body>

</html>

Ergänzt das Basis-Layout mit den rot markierten Zeilen oder kopiert das erweiterte Basis-Layout ganz in euren Test-Blog.

Schaut euch anschließend im Entwicklertool das Ergebnis an.

Die Datei mit der Endung widget_css_2_bundle.css wurde auskommentiert, d.h. sie liegt nun innerhalb von CSS-Kommentarzeichen /* ...*/ und wird damit vom Browser ignoriert.

widgets.js

Schaut euch nun mit dem Entwicklertool im Body Bereich eures Layouts um. Ihr werdet verschieden Javascript Injektionen finden, d.h. Scripts, die euch Blogger in das Layout einspielt.

Diese Scripte verlangsamen euren Blog - für eine simple Demo-Seite brauchen wir sie darüber hinaus auch nicht.

Ihr könnt die Scripts mit einem Hack von Prayag Verma auskommentieren und zwar indem ihr den schließenden </body> Tag folgendermassen ersetzt:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>

 <head>
     <title><data:blog.pageTitle/></title>
    &lt;style type=&quot;text/css&quot;&gt;
    &lt;!-- /*
    <b:skin><![CDATA[*/
    ]]></b:skin>
 </head>

<body>
<b:section class='main' id='main'/>
<!-- eigenes HTML -->
&lt;!-- </body> --&gt; &lt;/body&gt; 

</html>

Die Scripts liegen nun innerhalb von HTML-Kommentarzeichen <!-- ... --> und werden damit vom Browser ignoriert.

Erweitertes Basis-Layout

Wir besitzen nun ein erweitertes Basis-Layout.

Falls ihr Blogger nicht als Blog, sondern nur zum hosten einer statischen Seite wollt, habt ihr nun alles zusammen, was ihr braucht. Dieses Layout ist völlig 'leer', d.h. es besitzt keine eigene Style-Eigenschaften mehr. Ihr könnt daraus mit Markup, CSS und Javascript eine beliebige Seite aufbauen.

Hello World

Bauen wir nun eine Seite und schauen uns die Syntax am Beispiel von 'hello world' an.

Markup

Das Markup, d.h. eure Inhalte könnt ihr innerhalb des <body> Bereichs beliebig platzieren. Der <b:section> Tag ist in dem Fall Overhead, d.h. er besitzt keine Funktion, außer das er für die Gültigkeit der XML Datei notwendig ist.

Ich schreibe hier 'hello world' innerhalb eines HTML <p> Tags, d.h. einen Seiten Textabsatz [engl.: 'p' für 'paragraph'].

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>

 <head>
     <title><data:blog.pageTitle/></title>
    &lt;style type=&quot;text/css&quot;&gt;
    &lt;!-- /*
    <b:skin><![CDATA[*/
    ]]></b:skin>
 </head>

<body>
<b:section class='main' id='main'/>
<p>hello world</p>
&lt;!-- </body> --&gt; &lt;/body&gt; 

</html>
Style

Während das Markup den Inhalt der Seite beschreibt, wird die konkrete Darstellung (Farben, Layout, Schrifteigenschaften und so weiter) mit CSS gemacht.

Geben wir nun dem <p> Tag a bisserl Style und zwar die Schriftfarbe 'rot'.

Damit CSS in eurer Seite ausgeführt wird, müsst ihr sie im <b:skin> Tag innerhalb des CDATA-Abschnitts schreiben:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>

 <head>
     <title><data:blog.pageTitle/></title>
    &lt;style type=&quot;text/css&quot;&gt;
    &lt;!-- /*
    <b:skin><![CDATA[*/
    p {color: red}
    ]]></b:skin>
 </head>

<body>
<b:section class='main' id='main'/>
<p>hello world</p>
&lt;!-- </body> --&gt; &lt;/body&gt; 

</html>

Veröffentlicht die Datei in eurem Test-Blog und schaut euch das Ergebnis an - zum ersten mal habt ihr Inhalt auf eurem Blog, nämlich ein rotes 'hallo world' :D.

Das ist natürlich noch kein komplexes Template, aber das soll es auch nicht sein, sondern ein erster Schritt.

Validität

Validität bedeutet die Gültigkeit eures Layouts bezogen auf die Regeln der W3C - die W3C definiert die Regeln für XML, CSS ... alles was mit Internet zu tun hat :). Ein valides Layout ist ein Gütesiegel und wird bei professionellen Arbeiten oft im Lastenheft gefordert.

Validität ist meiner Ansicht nach kein Wert an sich. Ihr solltet immer im Auge behalten, was in dem Zusammenhang ein 'Fehler' überhaupt bedeutet.

Blogger wird als professionelle Plattform nach wie vor nicht ernst genommen, weil man angeblich kein valides Layout damit bauen kann.

Dass das nicht stimmt, könnt ihr selber überprüfen: Ladet das 'hello world' Template in euren Test-Blog und gebt dann eure Blog-URL in den W3C Validator ein - wann alles geklappt hat, solltet ihr ein valides Layout haben.

Alle Posts der Reihe

Ausblick

Somit sind wir am Ende des dritten Teils. Mit dem erweiterten Basis-Layout könnten wir nun eine komplexe One-Page-Site schreiben - das wäre dann aber kein Blog, sondern eine 'normale' Website.

Wir wollen aber ein Blog-Layout bauen - wir gehen also diesen Neben-Pfad zunächst nicht weiter.

Für euer Blog-Template braucht ihr bestimmte strukturelle Eigenschaften - wir fangen im nächsten Post an, uns tiefer damit zu beschäftigen. Wir starten mit dem <b:section/> Tag.

Würde mich freuen, wenn ihr wieder dabei seid!