Blogger schenken Lesefreude – Buchverlosung zum Welttag des Buches

bloggerschenkenIn dieser Woche bin ich über eine ganz tolle Aktion gestolpert. Bei Christina von Pudelmützes Bücherwelten und Dagmar von GeschichtenAgentin wollen den Welttag des Buches feiern. Das klingt doch zunächst mal toll. Viel schöner ist aber, dass sie uns Blogger dazu auffordern, zu diesem Tag am 23.04.2013 auf dem Bolg ein Buch zu verlosen um das Buch als Medium an sich zu ehren. Insgesamt werden bereits jetzt 461 unterscheidliche Bücher von über 600 Teilnehmern verlost. Da es sich, wie in ihrer Ankündigung beschrieben, ausdrücklich nicht ausschließlich um Bücherblogs handeln muss, werde ich mich gerne daran beteiligen und möchte dazu aufrufen, dass sich noch viele weitere meiner Leser und Blogger einfinden.

Wie ist der Plan?

Am 23.04.2013 veröffentlichen alle teilnehmnden Blogs einen Beitrag zu einem Buch. Hier soll angegeben werden, warum gerade dieses Buch verlost wird und was es so besonders macht. Unter allen Kommentaren soll dann das Buch am 30.04.2013 verlost werden.

Wie könnt ihr dabei sein?

Es ist nichts weiter zu tun, außer dieses einfache Google-Formular auszufüllen und abzuschicken. Der Buchtitel kann auch bis zum 20.04.2013 nachgemeldet werden.

Wo könnt ihr euch informieren?

Für weitere Informationen zu dem Projekt gibt es ein Forum und eine Facebookseite. Außerdem könnt ihr dem Projekt auf Twitter unter @BlogDenWelttag und dem Hashtag #lesefreude folgen.

Was wird es bei mir geben?

Um etwas beim Thema zu bleiben, werde ich das Buch „Social Media für Unternehmer – Wie man Xing, Twitter, YouTube und Co. erfolgreich im Business einsetzt“ von  Claudia Hilker verlosen. Warum und wieso kommt dann in meinem Artikel am 23.04.2013. Ich würde mich freuen, wenn ihr dabei seid.

Bannermanagement mit Macina Banners, TemplaVoilà und TYPO3

Für einen Kunden habe ich vor einiger Zeit die Anforderung erhalten zu prüfen, ob und wie eine möglichst einfache Bannerverwaltung in TYPO3 integriert werden kann. In den einschlägigen Foren habe ich häufig den Hinweis auf die Erweiterung „Macina Banners – Advanced Banner Management“ von Wolfgang Becker erhalten. Die Erweiterung wurd über 5000 Mal heruntergeladen und am 2.1.2013 aktualisiert.
Auf Grund dieser Parameter habe ich es auf einen Versuch ankommen lassen und möchte euch in diesem Tutorial zeigen wie ihr die Bannerverwaltung in TYPO3 implementieren könnt.

Macina Banners als Erweiterung installieren

media_1361715878581.png

Im Erweiterungsmanager des TYPO3-Backends sucht einfach unter „Import Extensions“ nach macina_banners

media_1361715903458.png

Durch einen Klick auf den kleinen Pfeil nach links könnt ihr die Erweiterung nun installieren.

media_1361715928438.png

Abschließend ist nur noch ein Klick auf „Make updates“ notwendig.

Integration des Banners in das HTML-Template

media_1361716406274.png

Nun muss im HTML-Template ein Platz für den Banner geschaffen werden. Ich habe dafür im Header ein Div mit dem Titel „headerbanner“ eingefügt, welches ich gleich mit TemplaVoilà mappen werde.

Mapping in TemplàVoila

media_1361716444329.png

Um die Änderung des HTML-Templates auch an TYPO3 bekannt zu machen, wechselt ihr nun in den TemplaVoilà bereich. Hier hat das System schon erkannt, dass sich das HTML-Template geändert hat. Ihr klickt daher auf „Update mapping“.

Da mit dem Banner ein neues Objekt hinzugefügt wird, müsst ihr die Datenstruktur, bzw das Vorlagenobjekt ändern. Ihr müsst daher den Button „Modify DS/TO“ anwählen.

media_1361716492580.png

Hier gebt ihr dem neuen Templateobjekt einen Namen und klickt „Add“.

media_1361716516882.png

Wichtig ist dür Objekt den Editing Type „TypoScript Object Path“ auszuwählen, da wir dieses Objekt später direkt in TypoScript anwählen wollen. Im Anschluss wieder auf „Add“ klicken.

media_1361716543417.png

Nun könnt ihr den Object Path angeben, mit dem ihr später das Objekt aus dem TypoScript-Template heraus referenzieren wollt. Danach klickt ihr einfach auf „Update“.

Mapping festlegen

media_1361716584688.png

Nach einem Klick auf „Map“ könnt ihr nun die Stelle im HTML-Template auswählen, an der ihr vorhin das Div für den Banner eingesetzt habt. Ich habe anschließend „Exclude Tag“ ausgewählt, damit das Div erhalten blibt und ich den Banner einfach per CSS ansprechen kann.

Datensatz „Banner“ erstellen.

media_1361716999400.png

Im List-Modus habe ich mir einen Ordner für die Banner abgelegt. Wenn ihr mit der rechten Maustaste auf den Ordner klickt und neu auswählt, könnt ihr auf der rechten Seite den Datensatztyp „Banner auswählen.

Banner bearbeiten

media_1361717174382.png

Nun öffnet sich eine Eingabemaske, in der der Banner genauer definiert werden kann. Im Reiter Grundeinstellung ändere ich ausschließlich die Bezeichnung des Banners, um diesen im Anschluss wiederzufinden. als TYP kann auch „HTML “ oder „Flash“ ausgewählt werden. Für diesen Test habe ich aber zwei jpg-Grafiken vorbereitet.

media_1361717220702.png

Im Reiter Bannergrafik kann diese Grafik hochgeladen werden. Der Bildtext gibt später den Linktitle an. Als Link kann die Adresse hinterlegt werden, auf die später verlinkt werden soll.

TIPP:
Wenn ihr den Link vorher mit http://bit.ly erstellt und diesen geänderten Link hier einbaut, hat auch der Kunde die Möglichkeiten, die Aufruf- und Klickstatistiken via bit.ly einzusehen ohne sich ins TYPO3-Backend einloggen zu müssen.

media_1361717248827.png

Im Reiter „Anzeige“ könnt ihr dem Banner eine Kategorie/Positionierung zuweisen. Standardmäßig existieren die angegebenen Objekte. Der Clou ist, dass ihr später in der Zuweisung festlegen könnt, aus welche Kategorie die Banner angezeigt werden. Außerdem lassen sich Seiten festlegen oder aussschließen, auf denen der Banner angezeigt wird.

media_1361717349305.png

Wenn ihr eure Eingaben gespeichert habt, könnt ihr weitere Banner anlegen. Für das Beispiel habe ich zwei einfache FBanner gespeichert.

Banner im TypoScript-Template zuweisen

media_1361717962644.png

Abschließend müsst ihr im Bereich „Template“ Euer TypoScrit-Template anpassen und definieren, dass euer angelegtes TypoScript Objeckt mit dem Macina Banners – Plugin gefüllt wird. Dies erzielt ihr mit folgenden Codezeilen:

lib.headerbanner = plugin.tx_macinabanners_pi1
lib.headerbanner {
placement = top
mode = random
pidList = 1166
}

Unter pidList gebt ihr die ID des Ordners an, in dem die Bannersdatensätze gespeichert werden. Die Id erhaltet ihr, in dem ihr mit der Maus über den Ordner fahrt. Unter Placement habe ich die Kategorie angegeben, unter denen ich die Banner angelegt habe und der random-mode gibt an, dass zufällig ausgewählt wird, welche Banner angezeigt. werden.

Banneransicht Macina Banners

desktopblau.png

Ihr seht, es wird sowohl der blaue,…

desktoprot.png

… als auch der rote Banner angezeigt. Damit hat die Testinstallation geklappt.
Nutzt jemand von euch schon macina_banners und hat gute oder schlechte Erfahrungen gesammelt? Auf mich macht die Erweiterung wirklich einen sehr guten Eindruck, zumal neue und bestehende Banner einfach durch die Redakteure gepflegt werden und den Positionen über die Kategorien zugewiesen werden können.

Mehr Kommentare durch Disqus – Die Kommentarbox in WordPress einbauen

Ein gutes Blog ist nur ein gutes Blog, wenn es die Möglichkeit der Beteiligung ideal ausnutzt. Wie ich diese Möglichkeit in einem Projekt einfach und kostenlos optimiert habe möchte ich in diesem Beitrag erläutern.

Seit einigen Monaten versuche ich mit bolzplatzheld.de ein kleines Social-Media-Projekt zum Thema Fußball Bundesliga aufzuziehen. Konkret veröffentlich regelmäßig unregelmäßig einen Videoblog-Beitrag zu den Geschehnissen der Liga in Verbindung mit den aktuellen Postings der Fans und Spieler auf Facebook, Twitter und Co.

media_1361098634946.png

Zentraler Punkt des Projekts ist, dass ich auf Userkommentare auf Facebook und der Webseite direkt eingehe. Während das auf Facebook auch ganz ordentlich funktioniert, halten sich die User im Blog doch sehr zurück. Ich denke, dass es auch mit dem wenig ansprechenden Aussehen der Kommentarbox in Zusammenhang steht.

media_1361098679020.png

Ich habe mich daher einmal aufgemacht und nach ansprechenden Kommentarboxen Ausschau gehalten um mich etwas inspirieren lassen. Dabei bin ich nach einigen Jahren wieder bei Disqus hängen geblieben. Damals fand ich die Idee des Services schon interessant. Allerdings kam es für mich nicht in Frage, da die Kommentare nicht suchmaschinenfreundlich und barrierefrei eingebunden wurden.

Mit der neusten Version aus dem Jahre 2012 hat sich das eigentlich geändert. Also kurz zusammengefasst:Warum sollte man Disqus auch für sein Webprojekt nutzen?

  • suchmaschinenfreundliche Einbindung
  • Echtzeit Kommentare möglich
  • weitgreifende Social-Media Anbindung. Kommentare können auf STwitter, Facebook und Google+ geteilt werden. Der Login ist ebenfalls über diese Dienste möglich. Außerdem ist auch das Kommentieren ohne Login erlaubt.
  • Einzelne Kommentare können per Voting-Feature „geliked“ oder „disliked“ werden
  • Man kann einen einzelnen Beitrag per E-Mail oder RSS folgen.

Darüber hinaus ist es so, dass jeder Kommentar mit der WordPresskommentarfunktion synchronisiert wird. Alte WordPresskommentare sind somit in Disqus sichtbar (Achtung: Pingpacks werden nicht angeszeigt). Neue Kommentare via Disqus werden als normaler Kommentar in die WordPressdatenbank gespeichert, so dass man den Dienst auch einfach wieder verlassen kann.

Ich möchte daher nun Schritt für Schritt zeigen wie ich bei bolzplatzheld.de die Kommentarbox von Disqus eingefügt habe

Anmeldung und Login bei Disqus

media_1361096931188.png

Nach dem Anmelden auf www.disqus.com könnt ihr durch Klick auf „Get this on your Site“ erstellen.

Seite registrieren

media_1361097000222.png

Im nächsten Fenster müsst Ihr die Adresse und den Titel eurer Seite festlegen.

Service auswählen

media_1361097030448.png

Viele Plattformen werden native angesprochen. So auch WordPress, welches für bolzplatzheld.de verwendet wird. Die Box kann aber mit dem Universal Code in nahezu jede Seite eingebunden werden, für die ihr Kommentare ermöglichen wollt.

Instruktionen für WordPress

media_1361097056231.png

Auf Disqus-Seite ist die Einrichtung also bereits abgeschlossen. Es werden euch die Schritte zum Import innerhalb von WordPress aufgeführt. Ihr müsst euch also nun als Admin in euer WordPress-Backend einloggen.

Plugin installieren

In WordPress wählt ihr also im bereich Plugin „Installieren“ aus. Hier müsst ihr nach dem Plugin „Disqus“ suchen.

Bei mir wurde das „Disqus Comment System“ als erstes Suchergebnis angezeigt. Hier klickt ihr auf „Jetzt installieren“.

Disqus auf WordPress aktivieren

media_1361097681983.png

Nach der hoffentlich erfolgreichen Installation einfach das Plugin aktivieren.

Konfiguration des Plugins

media_1361097708690.png

Durch klick auf den Button „Kommentare“ könnt ihr das Plugin nun konfigurieren.

Eingabe des Users und des Passworts

media_1361097747825.png

In kommenden Fenster müsst ihr euer Passwort und den Disqus-Benutzernamen eintragen und anschließen eure vorher angelegte Seite auswählen.

Konfigurationsmöglichkeiten

media_1361097884897.png

media_1361097908970.png

In der abschließenden Konfigurationsseite könnt ihr u.a. die Sprache auf Deutsch ändern und Gastbeiträge erlauben. Ebenso habe ich aktiviert, dass ich von jedem User zunächst einen Beitrag freigeben muss.

media_1361097950125.png

Unter Social Plattform Integration, könnt ihr den Twitteruser anlegen, der in der Kommentarbox verwendet werden soll. So werden automatisch Antworten als Beiträge an @bolzplatzheld verfasst.

Et voilà: Die neue schicke Kommentarbox

media_1361098168850.png

Ich denke, dass diese Box nun wirklich besser ausschaut und sich durch ihren schlichten Ansatz ideal in die meisten Seiten integrieren lässt. Für mich ist ein großer Nachteil, dass keine Pingbacks angezeigt werden. Ich werde daruaf aber zunächst verzichten und nach einer Lösung suchen. Nachdem ich die Box nun schon seit einiger zeit auf malte-dudd.de einsetze, bin ich gespannt, ob sich die Besucher von bolzplatzheld.de zum Kommentieren anregen lassen.

Kostenlose kurze Imagevideos für die Website + YouTube erstellen

Seit einiger Zeit betreue ich die Deutsche Stiftung Völkerverständigung bei ihren Webauftritten. Für den Internetauftritt schueleraustuasch-messe.de hatte ich vor einigen Jahren ein kleines Video für die Website erstellt, welches aber mittlerweile veraltet ist. Am Wochenende hat die Messe mal wieder hier in Hamburg halt gemacht und ich habe die Gelegenheit genutzt, einige aktuelle Fotos und Videos aufzunehmen.
In diesem kleinen Tutorial möchte ich euch zeigen, wie diese mit dem Webdienst animoto.com zu tollen kleinen Imagevideos für YouTube aufgearbeitet werden. Animoto erstellt Videos bis zu einer Länge von 30 Sekunden und Einbindung des Animoto-Logos zum Schluss sogar kostenlos. Für die Verbreitung eines kleinen Teasers über YouTube halte ich die Länge für viele Anwendungsfälle aber ausreichend. Wenn ihr mehr braucht, findet ihr hier die aktuellen Tarife des Services.
Vorweig muss ich allerdings fairerweise sagen, dass dieser Dienst nur geeignet ist, wenn man nicht jede Sekunde seines Videos selbst bearbeiten und anpassen möchte. Denn dann sollte man mit eigener Schnittsoftware selber Hand anlegen und das Ergebnis wird natürlich individueller. Wer aber schnell ein kleines Video mit seinen Bildern und Videoschnipseln erstellen möchte und zu einem respektablen Ergebnis kommen möchte, sollte weterlesen.

Bei Animoto anmelden

media_1360522272989.png

Videostil wählen

media_1360522644190.png

Nach der Anmeldung könnt ihr aus einigen Videodesigns wählen. Ich hatte zunächst gedacht, dass es nur um die allgemeine Grundstimmung des Videos geht. Die Vorlagen sind aber als komplette Templates zu verstehen, die 1:1 übernommen werden. Einzig die Platzhalter für die Videos und Bilder werden ersetzt.

Den kostenlosen Editor starten

media_1360522692448.png

Dann kommt der nächste Haken: Ich war etwas verwirrt, dass man nun doch das Video kaufen müsse, obwohl es doch im kostenlosen Tarif angezeigt wurde. Den Link zum kostenlosen Video findet ihr unter dem blauen „Purchase-Button“ .

Musik wählen

media_1360524534564.png

Video bearbeiten

media_1360524704589.png

Im Mittelteil des Editors findet ihr zwei Bereiche vor, nachdem ihr über „Add Pics & Videos“ eure Videos hochgeladen habt (1) : Im oberen Teil (2) seht ihr die Videos, die auch wirklich im fertigen Video verwendet werden sollen. Im unteren Teil werden alle Videos angezeigt, die ihr hochgeladen habt und nicht im oberen Teil auftauchen. Achtung: Wenn ihr eine Videosequenz verlängert oder neue Bilder einfügt, werden die letzten Bilder automatisch und ohne Vorwarnung aus dem oberen Bereich entfernt. Sie tauchen dann als erste Bilder im unteren Bereich auf.

Bild bearbeiten

media_1360528656412.png

Wenn ihr auf ein Bild klickt, erhaltet ihr eine Detailansicht. In dieser könnt ihr außerdem eine Beschreibung eingeben, die dann ins Video eingearbeitet wird.

Clip bearbeiten

media_1360528559968.png

Das Fenster zur Clipbearbeitung ist etwas aufwändiger. Nachdem ihr auf das Zahnrad des Clips geklickt habt, erhaltet ihr diese Ansicht. Hier wird zunächst die Länge des Clips bestimmt und welcher Teil des hochgeladenen Videos dafür verwendet wird. Außerdem könnt ihr entscheiden, ob der Ton des Videos abgespielt werden soll.

Vorschau ansehen und Video erstellen

media_1360524861961.png

Nach Klick auf „Preview Video“ könnt ihr euch eine Vorschau des Videos anschauen. So seht ihr schnell, ob ihr das VIdeo nochmal bearbeiten wollt, bevor ihr es endgültig erstellt. Gerade bei den Bildbeschreibungen habe ich einige Zeit herumprobiert.
Wenn ihr zufrieden seid, könnt ihr noch ienen Titel, ein Datum und ein Beschreibungstext eingeben. Das Video wird mit „Skip & produce“ (bzw „Produce“) automatisch erstellt.

Et voilà – euer Video kann schon in eure Website eingebunden werden.

Wie ist eure Meinung zu animoto? Kennt ihr ähnliche Dienste und seid damit zufrieden? Ich bin gespannt auf eure Antworten in den Kommentaren.

Hier ist mein fertiges Video:

Meine Links zum Wochenendeende: TOP3-Facebook/Twitter-Links

Es ist wieder Soontag und ich möchte wieder mit euch in meinen Google Reader schauen. Welche Artikel haben für diesen Blog relevanz und kann ich wirklich empfehlen?

Triple Your Facebook Likes in Two Weeks

Beim Problogger wird in einem anschaulichen Tutorial für Einsteiger aufgezeigt, wie man seine Facebook-Likes erhöhen, sogar verdreifachen. Dabei werden grundsätzliche Dinge, wie Werbung oder die Likebox auf der Website angesprochen. Nichtsdestotrotz finde ich das Tutorial sehr gut gemacht und empfehlenswert.

The Ultimate Complete Final Social Media Sizing Cheat Sheet

sheet

Lunametrics hat in einer Grafik die Maße einer Facebook Page zusammengestellt. Mit dieser Page behaltet ihr immer den Überblick im Design zusammenbasteln eurer Facebook-Page.

Mehr Follower als Bushido, aber keine Relevanz: Die seltsame Geschichte von @jholthaus

Einen lesenswerten Artikel zum Thema Facebook und Relevanz gibt es bei Primus Inter Pares. Viele denken, dass die reine Follower-Zahl schon eine große Aussagekraft besitzt. Warum dies nicht so ist, wird an dem Twitter-Beispiel von @jholthaus verdeutlicht.

3 Tipps zur Website-Navigation, die schnell und einfach umzusetzen sind

In diesem Semester meines Masterstudiums „Medieninformatik“ habe ich dem Modul Informationsarchitekturen beigewohnt, welches sich mit den theoretischen Aspekten dieses Themas beschäftigt hat. Hieraus möchte ich euch meine drei wichtigsten Punkte aus den Grundlagen der Informationsarchitektuer vorstellen, die ich zum Theme Navigation auf der Website mitgenommen habe.

navigation

1. Definiere die Hauptziele deiner Website

Eine Navigation sollte sich den Zielen deiner Website anpassen und sogar unterordnen. Frei nach Jakob Nielsens „Findability Rules“ ist die Auffindbarkeit von Informationen die Grundvorraussetzung für ein erfolgreichen Abschluss einer Besuchertransaktion. Es hilft daher überhaupt nicht, die Navigation einer anderen Website oder eines Designtemplates zu übernehmen. Die Navigation sollte den User unterstützen um das Hauptziel der Website (Kaufabschluss, Abonnieren eines Newsletters, Lesen eines Artikels) zu erreichen.

2. Werde unterschiedlichen Informationsbedürfnissen gerecht

Es gibt unterschiedliche Arten von Informationsbedürfnissen, die sich grob in folgende Arten einteilen lassen:

  • Eine ganz bestimmte Information wird gesucht, z.B. Zugverbindung, Preis für Artikel, bestimmtes Formular
  • Einige Informationen eines Bereichs werden gesucht, z.B. Krimibücher, Ausflugziele in Südfrankreich
  • Alle Informationen zu einem bestimmten Thema werden gesucht, z.B. alle Werder-Mannschaftsaufstellungen seit 1963

Im idealen Fall sollte die Navigation allen Suchtypen gerecht werden. Es ist daher hilfreich, bspw. eine Suchmaschine einzubinden oder die Seite für Google zu optimieren, da viele Besucher nicht mehr klassisch über die Eingabe der Adresse in den Browser auf die Startseite gelangen, sondern durch Google direkt auf einen bestimmten Artikel einsteigen.

3. Prüfe deine Navigationsstruktur regelmäßig

Um seine Navigationsstruktur regelmäig im selbstversuch überprüfen, sollte man beim surfen auf seiner Seite folgende Fragen durch seine Navigation beantworten lassen:

  • Bin ich hier richtig? (Logo, schnelle Erfassung der Inhalte, klare Menüstruktur)
  • Wo bin ich? (Menü zeigt Aufenthaltsort an, Breadcrumbnavigation)
  • Wie komme ich von hier zun den für mich relevanten Inhalten? (Übliche Bezeichnungen von Navigatinonspunkten und Kategorien, Links unterscheiden sich von Text)
  • Gibt es noch etwas Besseres als das, wonach ich gesucht habe? (Anzeige von ähnlichen Inhalten? Empfehlung von allgemeinen Artikeln zum Thema)
  • Wie geht es weiter auf dem Weg zum Ziel der Website? (Gute Platzierung von wichtigen Links zum Erreichen des Ziels, Vermeidung von Sackgassen)