Konnas Blogseminar

Blogseminar #9 - Artikel Metadaten und Blogroll

2010-08-11T08:03:00.001+02:00

Im neunten Teil des Blogseminars geht es um Metaangaben zu Artikeln und die Blogroll.

Metadaten
Leider sind die Möglichkeiten bei Blogspot nicht so flexibel wie bei Wordpress. So fehlt bei Blogspot z.B. der Eintrag für den Autor eines Artikels. Es ist bei Blogspot schlicht nicht vorgesehen, dass es mehrere Autoren für ein Blog gibt.
Soweit wie ich es überblicke sind die anderen Metaangaben in allen Blogspot Designs bereits enthalten. Diese kann man auch im HTML Editor für das Design bearbeiten. Allerdings sollte man dort wissen was man tut. Es handelt sich auch nicht um reines HTML, sondern um einen XML Code der durch den Blogspot Server nach HTML übersetzt wird.

Das Datum eines Artikels wird bei Blogspot durch ein Javascript angezeigt. Klingt komisch, ist aber so. Zuerst wird das Datum aus einem "timestamp" erzeugt und dann angezeigt. Der Code um den es geht sieht so aus:

<div class='date'>
    <script type='text/javascript'>
        var timestamp = "<data:post.timestamp/>";
        if (timestamp != '') {
                var timesplit = timestamp.split(",");
                var date_yyyy = timesplit[2];
                var timesplit = timesplit[1].split(" ");
                var date_dd = timesplit[2];
                var date_mmm = timesplit[1];
        }
    </script>
    <span><script type='text/javascript'>document.write(date_dd + '. ' + date_mmm + date_yyyy);</script></span>
</div>

Kategorien und Tags sind bei Blogspot in den sog. Labels vereint. Hier taucht dann auch XML Code auf.

    <div class='postdata'>
        <span class='category'>
            <b:if cond='data:post.labels'>
              <b:loop style='color:red' values='data:post.labels' var='label'>
                <a expr:href='data:label.url' expr:title='"View all posts in " + data:label.name' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
              </b:loop>
            </b:if>
        </span>
    </div>

Beide Codes kann man an der Stelle positionieren, wo man sie anzeigen will. Wie schon erwähnt sollte man wissen was man tut. Die XML Templates der Blogspot Designs sollte man vorher studieren und verstehen.

Blogroll
Blogspot stellt ein sidebar widget für Links zur Verfügung. Um Link Kategorien zu erzeugen, muss man das Widget mehrmals einsetzen und jeweils einen anderen Titel vergeben. Komfortabler geht es leider nicht. Will man die Blogroll auf einer eigenen Seite anzeigen, muss man diese Seite von Hand erstellen und die Links dort von Hand pflegen. Dann hat man allerdings auch die gleichen Gestaltungsmöglichkeiten wie in Konnas Blogroll oder bei meiner Verlinkt Seite.

Das waren die Aufgaben der Folge #9 des Blogseminars. Ich muss gestehen, dass mir diese Folge die meiste Arbeit gemacht hat. Die Möglichkeiten der XML Templates gehen zwar auch recht weit, sind aber m.E. für HTML Anfänger oder Laien schon ziemlich kompliziert. Ich musste mich auch erst da durch ackern, bis ich alle Stellen gefunden hatte. Mein Vorteil dabei war, dass ich schon vorher wusste, wie Blogspot im Prinizp arbeitet.
Schade finde ich, dass Blogspot keine einfacheren Tags für die Metadaten bereitstellt, was durch XML möglich wäre. Dann wäre das alles noch einfacher als bei Wordpress und auch für Laien schnell zu verstehen und durchführbar. Momentan fühlt man sich bei der Templatebearbeitung aber eher so, als würde man auf Glatteis laufen. Man muss sehr aufpassen was man wo ändert und fühlt immer eine latente Unsicherheit bei der Bearbeitung. Deshalb empfehle ich, dass man sich zum Üben ein zweites Blog anlegt, welches man als "Sandkasten" benutzen kann. Ich hoffe, ich konnte manch einem Mut machen, um einfach mal den Sprung ins kalte Wasser zu wagen. Mit den XML Codes kann man viel machen und vielleicht entwirft ja einer der Leser mal ein komplett eigenes Template.

Ich wünsche viel Spaß und Erfolg beim Erforschen der Blogspot Codes.

(ix)

Das Blogseminar geht weiter

2010-04-26T00:58:00.000+02:00

Hurra, hurra,
das Seminar ist wieder da.
Hurra, hurra,
das Seminar ist da.

So oder so ähnlich würde es wohl der kleine Klabautermann beim bayrischen Schreiner singen, wenn er denn ein Blogger wäre.

Konnas Blogseminar ist aus den Semesterferien zurück und startet in die nächste Runde. Natürlich mit einigen Neuerungen. Die Teilnehmerlisten fallen in Zukunft weg, die Zeitangaben zur Abarbeitung der Aufgaben ebenso.
Neu ist auch, dass es nicht unbedingt immer Aufgaben und Bonusaufgaben geben wird.

Die Bonusaufgaben dienten dazu, auch den Bloggern eine zum Thema passende Aufgabe anzubieten, wenn diese aus diversen Gründen nicht oder nur bedingt in der Lage waren, die Hautaufgabe zu erfüllen. Gerade für die Blogs bei Blogspot, war das immmer dann ein guter Ersatz, wenn zur Aufgabe in irgendeiner Weise in den Programmcode des Blogs eingegriffen werden musste.

Auch wenn es die Bonusaufgaben nicht mehr geben wird, werde ich trotzdem versuchen, zu den Seminarteilen bei Bedarf, eine angepasste Aufgabe für Blodspot Blogs anzubieten.

Ich bin gespannt, was Konna sich für die nächsten Teile ausgedacht hat, und was man hier bei Blogspot davon umsetzen kann. Ich freu mich drauf.

(ix)

Sitzung #05

2010-02-21T20:49:00.000+01:00

Im 5. Teil des Seminars geht es um die Sidebar. Man soll sie kritisch betrachten und bei Bedarf ausmisten. Gesche schreibt schon in ihrem Blog, dass das Widget Angebot von Blogger/Blogspot verlockend sei. Sie bringt aber auch zum Ausdruck, dass man nicht alles nehmen muss was möglich ist. So ähnlich sehe ich das auch. Nur weil es ein Video Widget gibt, muss man es nicht einbauen, nur um irgendwelche Videos zu zeigen, aber das Blog ansonsten nicht cineastisch ist.
Hier im Seminar Blog habe ich die Sidebar von Anfang an auf das Wesentliche reduziert. Das Blog dreht sich ausschließlich um das Seminar, also brauche ich auch nur Seminar relevante Widgets in der Sidebar. Die Widget-Überschriften habe ich etwas aufgepeppt, indem ich dafür Grafiken einsetze, die in diesem Fall auch automatisch aus dem Widgettitel erzeugt werden. Überhaupt ist vieles machbar, wenn man bei Blogspot mal ins kalte Wasser springt, und auch ohne viele Kenntnisse an die Quelltexte der Templates rangeht. Übrigens musste man das in den frühen Jahren auch bei Wordpress noch so machen.

Mutig und spannend fand ich deshalb Gesches Experiment, in den HTML Code ihres Templates einzugreifen, um die soziale Vernetzung ihres Blogs und ihrer Artikel zu fördern. Bei ihr findet man jetzt die Social Bookmarks Links unter jedem Artikel.

Phine war zwar nicht ganz so forsch, hat aber ebenso das AddThis Sidebar Widget eingebaut, was den gleichen Sinn erfüllt. Ich finde es super zu sehen, dass viele Blogger durch das Seminar motiviert werden, auch mal tiefer in die technischen Bereiche ihrer Blogs zu blicken. Gerade bei Blogspot ist vieles untransparent und man muss oft den Try&Error Weg gehen. Aber wie heißt es doch so schön im Bloghismus .. "Der Weg ist das Ziel". ;)

Weiter so, alles wird gut.

(ix)

Nebenfragen: Favicon

2010-02-01T23:33:00.001+01:00

In Konnas Blogseminar tauchen in den Diskussionen immer wieder Fragen auf, die nicht unmittelbar mit dem Thema zu tun haben oder vielleicht nur spezielle Situationen betrifft. Ich möchte in dieser Kategorie "Nebenfragen" auf diese Fragen eingehen und versuchen diese ausführlich zu beantworten.

Im ersten Teil stellte Konna den Dienst seitwert.de vor. Dort werden Webseiten aufgrund mehrerer Seitenmerkmale und verschiedener statistischer Daten anderer Dienste bewertet. In eine dieser Bewertungen fließt ein, ob ein sog. favicon vorhanden ist oder nicht.
Ein favicon ist in der Regel eine kleine 16 x 16 Pixel große Grafik, die als Symbol die Seite repräsentiert. Die Grafik wird von Browsern, Bookmarkdiensten, Feedreadern und anderen Softwares als Icon für die zugehörige Webseite genutzt. Typisch ist z.B. die Anzeige neben der Webadresse der Seite im Browser, oder in der Favoriten/Bookmark Liste.
Es gibt zwei verschiedene Möglichkeiten, ein solches Favicon anzeigen zu lassen.

Methode 1 - favicon.ico Datei
Zunächst braucht man natürlich eine Grafik, die man verwenden möchte. Diese sollte 16 x 16 Pixel groß sein. Die Datei muss favicon.ico benannt werden, und auch im .ico Format abgespeichert werden. Wenn du die Datei als .gif, .jpg, .png oder einem anderen Grafikformat hast, musst du die Datei zuerst konvertieren. Bei der Suche nach Programmen mit denen das geht, hilft dir Google weiter.
Diese Datei sollte nun im Hauptverzeichnis der Webseite liegen. Für Unterordner kann man eigene favicon.ico Dateien erstellen.
Das ist die kompatibelste Methode, die von allen Diensten und Softwares die favicons verarbeiten, erkannt und unterstützt wird. Von manchen Diensten, wie4 z.B. seitwert.de, ist es auch die Einzige Methode die unterstützt wird.
So einfach wie die Methode ist, so unflexibel ist sie auch. Die Datei muss immer den Namen favicon.ico haben und im Windows, .ico Format vorliegen. Für unterverzeichnisse müssen diese Verzeichnisse auch tatsächlich existieren, was aber bei einer URL zu einem Blogbeitrag nicht der Fall ist. Es gibt nun mal keine Ordner mit den Datumsangaben oder den Kategoriennamen. Also kann man mit der Methode einer Blogkategorie oder einem bestimmten Monat oder Datum, nicht so einfach ein eigenes favicon erstellen.
In Blogdiensten wie Blogspot, wordpress.com oder, oder, oder, hat man in keinem Fall die Möglichkeit, irgendwelche Dateien gezielt in irgendwelche Ordner zu kopieren.
In diesen Fällen fällt die ursprüngliche Methode mit der favicon.ico Datei also flach.

Methode 2 - HTML <link ... /> Tag
Die zweite Möglichkeit kann man fast immer einsetzen. Sie wird mit einer Zeile HTML Code realisiert.

<link href='http://webpfad.zur/grafik/*dateiname*' rel='icon' type='image/*format*' />

Der obige Code muss im headbereich des Webseitencode stehen. Am besten zweimal! Einmal unmmitelbar nach <head>, und einmal unmittelbar vor </head>.
Das ist wichtig, um möglichst große Browser-Kompatibilität herzustellen. Der IE verwendet grundsätzlich das zuerst im HTML Text genannte favicon. Alle anderen Browser das zuletzt genannte. Bei Blogspot ist es deshalb wichtig dafür zu sorgen, dass das eigene favicon das zuerst und das zuletzt genannte ist. Denn zwischendurch setzt das Blogspot Sytsem auch noch ein favicon, und das wollen wir ja unterdrücken. ;)
Hierzu muss man die Webadresse der Grafik wissen. Also muss man die Grafik irgendwo hochladen. Bei Blogdiensten hat man meistens irgendeine Möglichkeit Bilder zu speichern und darauf zuzugreifen. Oder man bedient sich eines Bildhosters wie http://image.gd o.ä.
Interessant ist bei der Methode, dass Dateiname und Format frei gewählt werden können. Transparente .png oder animierte .gif sind so kein Problem mehr. Allerdings werden diese Formate nicht von allen Browsern gleich unterstützt. Animierte .png kann z.B. ausschließlich der Firefox. Ist klar, denn "Wer hats erfunden?" ;)

Beide Methoden haben ihre Vor- und Nachteile. Mit einem einfachen favicon.ico hat man die Sache schnell erledigt und erreicht maximale Kompatibilität. Leider ist ist die Methode aber unflexibel und nicht für jeden machbar.
Dass HTML Tag kann man in jedem Blogsystem umsetzen, indem man das Template für den HTML head Bereich bearbeitet. Obwohl man Dateinamen und -format frei wählen kann, muss man Einschränkungen und Besonderheiten der verschiedenen Browser berücksichtigen.

(ix)

Sitzung #03 - Kategorien, Tags, Social Networks

2010-01-25T20:41:00.001+01:00

Zuerst möchte ich anmerken, dass ich die Sitzung #02 ausgelassen habe, da die Umsetzung der Aufgaben keine technischen Besonderheiten bei Blogspot verlangen. Einen Artikel über sich selbst oder einen der die Feeds erklärt kann man auch bei Blogspot schreiben. Zudem hat man bei Blogspot sein Profil, in das man alles reinschreiben kann was man mag.

Die Sitzung 03 ist aber wieder eine Herausforderung, der ich mich gerne stelle und die auch ein paar interessante Besonderheiten bei Blogspot aufzeigt. Es geht um die Blogstruktur mit Hilfe von Kategorien und Tags. Die Bonusaufgabe betrifft die soziale Vernetzung.
Blogspot kennt weder Kategorien noch Tags. Es kennt Labels. Labels dienen sowohl als Kategorien als auch als Tags. Es wird zuerst einmal kein Unterschied gemacht.Man kann den Unterschied aber für sich selber machen. Und das genau nach den Kriterien, die Konna im Seminar beschreibt.
Man benutzt kann Labels, die ein Thema beschreiben, als Kategorien nutzen, und Labels die den Beitrag detailierter beschreiben, werden zu Tags.
Blogspot bietet dazu ein geeignetes Sidebar-Widget an. Mit dem Labels Widget kann man die Labels als Kategorien-Liste darstellen oder als Cloud, wie eine Tagcloud. In beiden Fällen kann man auswählen, ob man alle Labels oder nur ausgewählte anzeigen möchte. So bietet es sich an, für die Kategorienliste nur die Labels anzuzeigen, die man als Kategorie definiert hat, und für die Tagcloud alle anderen. Kleiner Wermustropfen ist, dass man die beiden Widgets nach Hinzufügen von neuen Labels neu einstellen muss. Für die Tagcloud bietet es sich deshalb an, einfach alle Labels anzuzeigen, was ja auch nicht das Falscheste ist.

Bei der Bonusaufgabe verhält es sich ähnlich wie bei den Aufgaben der Sitzung #02. Jeder kann ein Text- bzw. HTML-Widget in die Sidebar setzen, in dem er seine Social Links platziert. Man "klaut" sich einfach die notwendigen Icons irgendwo, und verlinkt diese zu seinen Profilen bei Twitter & Co. Hierbei sollte man darauf achten, die Icons selber abzuspeichern und nicht die Orginalquellen für die Bilder zu verwenden. Also zuerst die Icons von woanders herunterladen (rechte Maustaste ;)), und dann in das zum Blog gehörende Picasa Webalbum hochladen. Dort das Bild betrachten und die Adresse der Grafik kopieren (wieder rechte Maustaste). Folgender HTML Code fügt das Bild dann mit Link in die Sidebar ein.
Beispiel für Twitter:

<a href="http://twitter.com/ixiter"><img alt="twitter" src="http://lh5.ggpht.com/_hz4_4oLa8RI/S13vaK1_GxI/AAAAAAAAACc/2j-HMN0QJO0/twitter-icon.png" /></a>

Leider ist der Aufwand für die Social Links sehr hoch und umständlich. Man kann nur hoffen, dass Google/Blogspot das irgendwann einfacher macht. Trotzdem hoffe ich, dem ein oder anderen ein paar Tipps gegeben zu haben, die bisher so nicht bekannt waren oder zu neuen Ideen angeregt haben. Ich freue mich natürlich über Verbesserungen und Vorschläge. Vielleicht kennt ja jemand ein externes Widget für Social Links?

(ix)

Blogseminar: Sitzung 01

2010-01-04T21:11:00.011+01:00

SEO mit HTML Meta Description und Keywords

Im ersten Teil geht es um die Suchmaschinenoptimierung (SEO) des Blogs. Dazu werden zwei HTML Meta Tags verwendet, die eine kurze Beschreibung der Seite und eine Liste von Stichwörtern/Schlüsselwörtern enthalten.
Entgegen Konnas Meinung, dass blogspot diese Tags selbstständig einsetzt, da blogspot schließlich von Google ist, passiert genau das nicht. Blogspotter haben allerdings die Möglichkeit diese Tags selber im HTML Code ihres Seitentemplates einzufügen. Der Weg ist ähnlich wie bei Konnas Anleitung zu Wordpress .

Umsetzung für Blogspot

Logge dich ein und gehe zu Apassen->Layout->HTML bearbeiten
Im Editorfeld suchst du nach <head>
Dahinter fügst du folgende Zeilen ein :
<meta name="description" content="Hier deine Blogbeschreibung" />
<meta name="keywords" content="mehrere, Stichworte, durch, Kommas, getrennt" />
Die roten Textstellen musst du natürlich durch deine Texte ersetzen.

Diese Einstellungen sind global, d.h. sie gelten für das gesamte Blog. Es ist mir leider bisher kein Weg bekannt, diese Tags bei blogspot spezifisch für einzelne Artikel zu setzen.Für Anregungen und Hinweise wäre ich sehr dankbar. Lösungen werde ich hier ergänzen.

(ix)

Konnas Blogseminar (by ixiter)

2010-01-03T14:22:00.006+01:00

Konna führt in seiner Gedankendeponie ein Blogseminar durch, in dem die Teilnehmer lernen wie sie Inhalt, Design und Vernetzung ihres Blogs optimieren können. In technischen Belangen bezieht sich Konna auf Wordpress Blogs. Andere Systeme werden nicht direkt unterstützt. Der Zeitaufwand zum erlernen der anderen Systeme wäre schlicht zu hoch.

Ich werde deshalb hier versuchen, die technischen Bereiche auch für blogspot Blogs umzusetzen und zu erklären.

(ix)