Website-Weiterleitung für mobile Geräte

Wer über responsives Design hinausgeht und für mobile Geräte (vor allem Smartphones mit kleinem Display) automatisiert ein separates mobiles Layout der Website ausliefern möchte, benötigt eine entsprechende Weiterleitung (z.B. zu m.domain.com).
In TYPO3 ist das mit Typoscript und etwas PHP relativ schnell erledigt.
Zunächst packen wir in das Root-Template eine Funktion zur Abfrage nach dem Endgerät:

# Weiterleitung zur mobilen Website
[userFunc = user_isMobile]
  page.config.additionalHeaders = Location: http://m.domain.com/
[end]

Gibt die Funktion user_isMobile true zurück, wird hier ein Meta-Tag in den Header mit der Weiterleitung zur mobilen Website geschrieben. Die PHP-Funktion user_isMobile sieht wie folgt aus und kann z.B. in die localconf.php eingefügt werden:

function user_isMobile() {
  return t3lib_div::_GET('forceMobile') ||
    preg_match('/(iPhone|iPod|iPad|IEMobile|Android|Blackberry|Palm|
                  NetFront|Windows CE|MIDP|UP\.Browser|Symbian)/',
               $_SERVER['HTTP_USER_AGENT']);
}

Der Parameter forceMobile kann für Testzwecke der Weiterleitung genutzt werden
(z.B. so: www.domain.com/?forceMobile=1). So weit so gut.

Zum guten Ton gehört allerdings auch ein Link von der mobilen Website auf die normale Website. Knackpunkt: unsere Weiterleitung! Damit wir nicht wieder umgeleitet werden, bedarf es eines URL-Parameters, der die normale Webansicht erzwingt. Nehmen wir im Beispiel den Parameter web:

# Weiterleitung aufheben
[globalVar = GP:web > 0]
  page.config.additionalHeaders >
  config.linkVars = web
[end]

Im Root Template wird hier geprüft, ob der GET-Parameter web vorhanden ist, wenn ja löschen wir die vorherige Weiterleitung und hängen den Parameter web an allen Links wiederum an. Das ist wichtig, um beim nächsten Klick nicht doch weitergeleitet zu werden. Der Link von der mobilen Website zur normalen Website müsste demnach so lauten: www.domain.com/?web=1  Das war es auch schon :-)
Vielen Dank an Patrick Lobacher für den tollen Artikel.

WeBuilder – Editor für HTML, CSS, PHP und JavaScript

WeBuilder - Build 2014
WeBuilder 2014

Code-Editoren gibt es viele. Auch viele kostenfreie. Allerdings bin ich bei keinem so richtig zufrieden gewesen. Immer fehlte ein bestimmtes Feature. Mit WeBuilder habe ich seit geraumer Zeit eine Entwicklungsumgebung gefunden, die kaum Wünsche offen lässt. Neben Pflichtfunktionen für HTML, CSS, JavaScript und PHP wie Syntax-Highlighting, Codevervollständigung, Validierung und Debugging bringt WeBuilder auch umfangreiches Projektmanagement inkl. MySQL- und (S)FTP-Anbindung (+SVN +git) mit. Weiterhin auch Codeverwaltung (Bibliotheken), rekursives suchen & ersetzen (Refactoring) und volle Unicodeunterstützung. Die eingebundenen Onlinereferenzen zu den Programmiersprachen runden die Sache gut ab.

jQuery Plugin – Stapel

jQuery Stapel in Action
jQuery Stapel

Jetzt gibt es ein neues Plugin für Onlinegalerien bzw. Portfolio-Darstellungen: jQuery Stapel

Das Modul gruppiert Thumbnails zu einem Stapel übereinander, die bei Klick wieder nebeneinander als Gatter ausgebreitet werden. Das Stapel-Modul ist flexibel in der Anordnung, passt sich auch der Fensterbreite an (responsive layout).

Als Technik unter der Haube werden CSS-Transforms und Transitions verwendet. Für ältere Browser die das nicht unterstützen wird einfach jQuery Animate verwendet :-)

Uns so wirds verwendet: Eine Liste mit der Klasse tp-grid

<ul id="tp-grid" class="tp-grid">
<li data-pile="Group 1">
<a href="#">
<span class="tp-info">
<span>Some title</span>
</span>
<img src="images/1.jpg" />
</a>
</li>
<li data-pile="Group 2">
  ...
</li>
<li data-pile="Group 1,Group 2">
  ....
</li>
</ul>

Der jQuery-Aufruf erfolgt durch:

$( '#tp-grid' ).stapel();