Tutorial: Erstellen einer Mobile Version für Ihre Website mit TYPO3 & TemplaVoila

Dieses Tutorial wurde von TYPO3-Coreteam-Member Dmitry Dulepov auf dessen Blog in englischer Sprache veröffentlicht. Wir danken dem Autor für die freundliche Erlaubnis zur Übersetzung und Veröffentlichung unter typo3-book.com.

Moderne Mobiltelefone und Smartphones sind in der Lage, Internetseiten immer besser darzustellen. In den Zugriffsstatistiken tauchen diese Geräte mit vermehrter Häufigkeit auf, so dass eine für mobile Endgeräte optimierte Seite ein wichtiger Geschäftsfaktor werden kann. In diesem Beitrag erkläre ich, wie man eine für Mobile Agents optimierte Version der eigenen Website auf Basis von TYPO3 und TemplaVoila erstellt. Weiterlesen

Projekt live schalten: Andere BaseURL für im TYPO3-Backend angemeldete User

Die Entwicklung neigt sich dem Ende, jetzt müssen nur noch die DNS-Einträge der Domain auf das neue Web zeigen und die BaseURL entsprechend angepasst werden. Durch letzteres wird jedoch ein weiteres Arbeiten am Web – und sei es nur auf Content-Ebene – deutlich erschwert bis unmöglich, da sich das Front-End nicht mehr fehlfrei aufrufen lässt (falsche Pfade zu CSS und JS etc.). Dann hilft nur noch warten, bis die Live-URL auf das neue Web zeigt, was im Einzelfall bis zu 24h dauern kann.

Vor der Umstellung der A-Records ist es daher hilfreich, wenn man zwei verschiedene BaseURLs für normale Besucher und im Backend angemeldete Benutzer konfiguriert.

Dies lässt sich mit folgendem TS realisieren:


####general baseURL####
config.baseURL = http://www.xyz.de/

####baseURL for BE-Users####
[globalVar = TSFE : beUserLogin > 0]
config.baseURL = http://entwicklung.server.de/
[global]

Nun bekommen die Backend-User die URL des Entwicklungsservers und die regulären Besucher die Live-URL – es kann problemlos weiter am CMS gearbeitet werden. Sind die DNS-Änderungen abgeschlossen, können die letzten 4 Zeilen einfach gelöscht oder auskommentiert werden.

Nützliche Tools zur Ermittlung geeigneter Keywords

Eine wichtige Teildisziplin der Suchmaschinenoptimierung ist die Ermittlung relevanter Keywords für die eigene Webpräsenz. Welche Tools der Marktführer Google bietet, erfahren Sie in diesem Beitrag.

Die Ermittlung passender Keywords für den eigenen Internetauftritt ist bekanntermaßen eine knifflige Angelegenheit. Branchenprimus Google bietet hilfreiche Werkzeuge, die Ihnen dabei helfen können, geeignete Schlagwörter für Ihre Homepage zu finden. Die Tools von Google zu nutzen hat den Vorteil, dass die Daten direkt vom wichtigsten Suchdienst selbst stammen.

Einige dieser Tools möchten wir ohne Anspruch auf Vollständigkeit kurz vorstellen:

Keyword-Tool Google AdsenseGoogle Keyword Tool

Ein hervorragendes Werkzeug zur Ermittlung verwandter Keywords ist das in Google Adwords integrierte Google Keyword Tool. Gibt man ein Schlagwort ein, erhält man eine Liste von Vorschlägen für weitere Begriffe im thematischen Kontext. Interessant sind die Angaben über das Suchvolumen und Mitbewerberdichte für die jeweiligen Keywords, die man weniger als exakte Werte, denn als Entscheidungshilfe ansehen sollte.

Sie finden das Tool in Google Adwords unter “Werbechancen -> Keyword-Tool”.

Google InsightsGoogle Insights

Google Insights bietet die Möglichkeit, saisonale Schwankungen und Trends zum Suchvolumen für mehrere Keywords abzufragen. In der Beispielgrafik steht der blaue Graph für das Schlagwort “WM 2010″, die rote Kurve für “EM 2008″ und der gelbe Verlauf für das Keyword “Urlaub”. Interessant auch die Aufschlüsselung nach Bundesland, die Aufschluss darüber gibt, aus welcher Region die meisten Suchanfragen für einen Begriff stammen.

Zu Google Insights

Google TrendsGoogle Trends

Ähnlich wie Insights stellt auch Google Trends die Suchvolumina auf einer Zeitachse grafisch dar, zeigt zusätzlich noch das Aufkommen von Nachrichten zum Thema und verlinkt sogar einzelne Neuigkeiten, die großen Einfluß auf das Suchaufkommen für das jeweilige Schlagwort hatten. Somit kann man die Auswirkungen verschiedener Ereignisse auf das Suchvolumen ablesen. In unserem Beispiel sehen Sie die Daten für “Playstation 3″.

Zu Google Trends

Google SK ToolGoogle SK Tool

Das Google SK Tool ermittelt, welche Keywords auf einem Internetauftritt verwendet werden und ordnet diese nach Suchvolumen. So kann man auf einfache Weise eine kleine Konkurrenzanalyse durchführen. Im Beispiel sehen Sie die Analyse der Internetseiten von Philips.

Zum Google SK Tool

Google SetsGoogle Sets

Dieses simple Tool bietet die Möglichkeit, verwandte Schlagwörter für bis zu 5 Begriffe auf einmal zu ermitteln.

Zu Google Sets

tt_news Kategorien mit seperater CSS Class versehen

Um z.b. die tt_news Kategorien in verschiedenen Farben zu zeigen, oder jeder Kategorie ein eigenes background-image zu geben, muss man diese erstmal mit einer eigenen CSS Klassen versehen.

Dies geht seit tt_news 3.0 mit den genericmarkers

Hier ein Beispiel wie man dies umsetzen kann:

im TypoScript Setup Feld des Templates:

plugin.tt_news.genericmarkers {
data = uid, image, bodytext
catid = TEXT
catid {
value = cat-
wrap = |{register:newsCategoryUid}
insertData = 1
}
}

Nun kann man im tt_news template den Marker ###GENERIC_CATID### verwenden.

Dies würde dann z.b. so Aussehen:

<div class=”###GENERIC_CATID###”>

Die Ausgabe im HTML ist dann diese:

<div class=”cat-15″>

Workshop TemplaVoilà – Teil 2: Eigene Content-Elemente erstellen

Nachdem der Workshop in T3NNr. 13 gezeigt hat, wie Seiten-Templates erstellt und gemappt werden, geht es diesmal darum, eigene Content-Elemente zu konzipieren. Mit Hilfe von TemplaVoilà ist es sehr einfach, diese zu erstellen und dem Redakteur zur Verfügung zu stellen.
Weiterlesen

Maximale Bildgröße für FCE in TemplaVoila

In vielen meiner Webs benutze ich TemplaVoila – hier setze ich FCE zum unterteilen der Seiten ein z.B. 50%-50%. Jedoch hatte ich immer das Problem das man beim einpflegen von Bildern  darauf achten muss wie breit die Spalten sind. Benutze man zu große Bilder wurde dadurch der <div> Container aufgeschoben und zerstörte die Darstellung. Die in den Konstanten angegebene “Max Image Width” [styles.content.imgtext.maxW] galt ja nur für den gesamten Content Bereich.

Um im TemplaVoila eine “Max Image Width” zu vergeben muss man lediglich wenige Zeilen Code unter “Data processing” im Feld TypoScript Code einfügen (5.maxImageWidth = 370 nach bedarf anpassen) :

5 = LOAD_REGISTER
5.maxImageWidth = 370
10= RECORDS
10.source.current=1
10.tables = tt_content
15 = RESTORE_REGISTER

RealURL legt keine Konfigurationsdatei (realurl_autoconf.php) an

RealURL ist eine feine Sache, wenn es darum geht den Verweisen in TYPO3 das Sprechen beizubringen. In letzter Zeit hatte ich oftmals das Problem, dass die automatische Konfiguration versagte. Genauer: Die Datei realurl_autoconf.php wurde nicht angelegt. Schuld an der Misere war die parallel installierte Extension Powermail, die verhindert, dass RealURL die Konfigurationsdatei schreiben kann.

Abhilfe bringt das zeitweilige Deinstallieren von Powermail. Wenn man nun RealURL neu installiert, wird die Datei realurl_autoconf.php angelegt. Jetzt kann auch Powermail wieder installiert werden und alles ist fein.

Alternativ findet sich unter http://forge.typo3.org/issues/show/1441 ein Patch für Powermail

Firefox 3.5, TYPO3 4.3 und Templavoila 1.4.1: Leere Seite beim Anlegen eines neuen Contentelements

Wer mit dem Firefox 3.5 ein neues Inhaltselement im TYPO3-Backend anlegen möchte, bekommt in schöner Regelmäßigkeit eine triste graue Seite statt des Wizards zu sehen. Betrachtet man den Quelltext des beinhaltenden Frames, so fällt auf, dass dieser komplett und oberflächlich betrachtet korrekt ist. Ein Reload des Frames bringt schließlich das gewünschte Ergebnis: Man erhält die Liste der zur Verfügung stehenden Content-Elemente und kann wie gewohnt weiterarbeiten. Ein Klick mit der rechten Maustaste auf das Plus-Symbol und das Öffnen in einem neuen Tab funktioniert ebenso. Leider stellen beide Varianten keine befriedigenden Alternativen dar.

Das Thema wird bereits im TYPO3-Bugtracker behandelt – leider brachten beide angebotenen Patches keine zuverlässige Lösung.

Was bei mir funktioniert, ist die Vorgehensweise aus der Fehlerbeschreibung selbst:

Die Zeile 283 in der Templavoila-Datei mod1/db_new_content_el.php mit folgendem Inhalt:

$this->content= $this->doc->insertStylesAndJS($this->content);

wird durch diese Version ersetzt:

$this->content.= $this->doc->insertStylesAndJS($this->content);

Seither erscheint der Wizard wieder ordnungsgemäß. Da ich keine Tabs zur Gruppierung der Contentelemente im Wizard nutze, kann ich keinen “broken output” (im Bugtracker beschrieben) feststellen. Alles fein soweit.

Ebenfalls Erfahrung mit diesem leidigen Thema gemacht und evtl. sogar eine elegantere Lösung parat? Dann bitte einen Kommentar hinterlassen. Vielen Dank!