Unter www.analog.de/knowledge-base haben wir eine kleine Datenbank mit Codesnippets angelegt. Der Schwerpunkt liegt dabei auf TypoScript-Snippets. Ergänzt werden diese durch HTML-, Javascript- und CSS-Snippets. Stand 26.1.2012 befinden sich 43 Einträge im System – more to follow.
Wer mittels TemplaVoila eigene Contentelemente erstellt, stößt früher oder später auf folgende Problemstellung:
Es soll verschiedene Varianten eines Flexible Content Elements geben, die sich nur durch Textfarben oder Hintergründe unterscheiden. Der Quellcode der Elemente differiert nur durch verschiedene Klassen des Elternelements (z.B. <div class=”red”> oder <div class=”blue”>). Eine wenig elegante Lösung wäre es nun, für jede dieser Situationen eine eigenes CE zu erstellen, da dies das Backend unnötig aufbläst und zudem mehr Zeit in Anspruch nimmt.
TemplaVoila bietet die Möglichkeit, diese Klassen per Select-Field in der Editieransicht des Contentelements auswählbar zu machen.
Read the rest of this entry »
Wer im TemplaVoila Pagemodul ein Inhaltselement auf mehrere Seiten des Internetauftritts kopieren möchte, kennt das Problem:
Um dies zu verhindern, fügen wir im TS-Field der Rootpage die folgenden Zeilen TypoScript ein:
###TV-Elemente in Zwischenablage behalten### mod.web_txtemplavoilaM1.keepElementsInClipboard = 1 ###Kopierte Elemente nicht verstecken und Titel unveraendert lassen### TCEMAIN.table.tt_content { disablePrependAtCopy = 1 disableHideAtCopy = 1 }
Viel Spaß beim weniger mühsamen Kopieren!
Dieses Tutorial zeigt den grundlegenden Aufbau einer Mobilversion unter Verwendung des Frameworks jQuery Mobile. Es werden Kenntnisse zu HTML und CSS vorausgesetzt. Sämtliche Links zu benötigten Dateien finden Sie am Ende dieser Seite.
Die Anzahl der Mobiltelefone, die Internetseiten anzeigen können, steigt von Tag zu Tag. Grund genug, darüber nachzudenken, eine eigene Mobile Version der eigenen Website anzubieten, denn für Handys und Smartphones gelten ein wenig andere Regeln, als für Desktop-Rechner, so dass die “normale” Version der Seite meist nicht optimal auf Mobiltelefonen funktioniert. Als Beispiele seien die kleinere Auflösung und die geringere Rechengeschwindigkeit von Handys erwähnt. Read the rest of this entry »
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. Read the rest of this entry »
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.
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:
Google 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 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.
Google 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″.
Google 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 Sets
Dieses simple Tool bietet die Möglichkeit, verwandte Schlagwörter für bis zu 5 Begriffe auf einmal zu ermitteln.
Zu Google Sets
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″>
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.
Read the rest of this entry »
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
