Tutorial: Framework jQuery Mobile – Aufbau einer Mobile Version Ihres Internetauftritts

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. Weiterlesen

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″>

CSS-Hintergrundbild per TypoScript ändern bzw. in den Seiteneigenschaften hinterlegen

Ich habe auf der Webseite von Sebastian Fischer folgendes TypoScript gefunden :

Es ist eigentlich ganz einfach und ich kann mir gut vorstellen, dass es einige Anwendungen dazu gibt.
Dieses TypoScript bindet einen Headerpart ein, der das Hintergrundbild eines DivContainers (hier mit der id #topimage) definiert. Es läd dieses Hintergrundbild aus dem Resourcenfeld der Seiteneigenschaften. Ist kein Bild hinterlegt, “slided” dieses TS solange im Seitenstammbaum nach “oben” bis es auf eine Seite mit angegebenen Bild trifft und bindet dann dieses ein. Somit muss man nicht auf jeder Seite ein Bild angeben, sondern ein Bild vererbt sich so lange, bis es auf ein neues trifft. :)
Ich habe dieses TS zwar nicht getestet, aber es sieht gut aus…