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();

TYPO3 Neos (aka 5.0 / Phönix) ist da!

TYPO3 Neos Login ScreenTYPO3 Neos, seit 2006 unter dem Namen TYPO3 Phoenix in der Entwick­lung, basiert auf dem Framework TYPO3 Flow (ehemals FLOW3) und wird zukünftig parallel zum TYPO3 CMS entwickelt. Durch seine moderne Basis stellt TYPO3 Neos innovative Funktionen für Entwickler, Designer und Redakteure bereit.

Die bereits von TYPO3 bekannten Möglichkeit, das Content Management System durch Plugins zu erweitern, erfolgt bei NEOS zukünftig durch Packages, welche in TYPO3 Flow verwaltet werden. Und auch die TYPO3-Entwicklern bekannte Scriptsprache Typoscript wird es bei NEOS weiterhin geben.
Die Vorstellung des neuen Content Management Systems TYPO3 Neos erfolgte durch den Teamleiter Robert Lemke im Rahmen der T3CON in Stuttgart am 05.10.2012.

Neu hingegen ist die „In-Page Editing“-Funktion, welche nach erfolgreichem Login das direkte Bearbeiten von Texten im Frontend der Seite ermöglicht. Anstatt des bislang bekannten HTMLarea-RTEs kommt bei NEOS der moderne und schlanke Aloha-Editor zum Einsatz. Durch seine kontextsensitive Bedienoberfläche bietet er zahlreiche Bearbeitungsfunktionen, lässt sich aber auch ohne Erfahrungen intuitiv bedienen.

Ebenfalls neu in NEOS ist das Content Repository. Mit Hilfe einer einfachen Baumansicht lassen sich zum Beispiel neue Seiten oder Content Elemente anlegen, bearbeiten oder löschen.

Die Vorstellung des neuen Content Management Systems TYPO3 Neos erfolgte durch den Teamleiter Robert Lemke im Rahmen der T3CON in Stuttgart am 05.10.2012.

Download TYPO3 Neos.

Quelle: mittwald.de

jQuery Plugin – Accordion

jQuery Accordion Demo jQuery hat sich zum heimlichen JavaScript-Framwork No.1 gemausert, vor allem weil es unzählige Plugins gibt. Hier sollen in loser Folge einige nützliche jQuery-Plugins vorgestellt werden.

jQuery Accordion
Das Accordion Plugin, welches auf dem jQuery UI Paket basiert, verwandelt mehrere Textblöcke in ein Akkordeon, das per Klick die einzelnen Blöcke aufklappt und den aktiven schließt. Einfach praktisch um Textwüsten aufzuräumen und die Zwischenüberschriften als Menü fungieren zu lassen.

Live im Einsatz: Leonhardt Group
Plugin-Site: docs.jquery.com/UI/API/1.8/Accordion

Farbverläufe mit CSS3 Gradient

colorzilla.com Bisher war man gewohnt Hintergrund-Verläufe als Grafik zu stellen. Mit CSS3 hat das endlich (in den meisten Fällen) ein Ende! Mit dem Zauberwort -linear-gradient kann man verschiedenste Verläufe kreieren: horizontal, vertikal, diagonal mit verschiedenen Abstufungen.

Allerdings ist die Browserunterstützung bei älteren Internet Explorer-Versionen nicht gegebe. Um auf Nummer sicher zu gehen, schreibt mit die Anweisung mehrfach mit entsprechenden Browser-Präfix nieder. Hier ein Beispiel für einen vertikalen Verlauf von #1e5799 nach #7db9e8

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Und damit das nicht in Arbeit ausartet, gibt es ein praktisches Onlinetool zum Erstellen des CSS-Codes: Ultimate CSS Gradient Generator

TYPO3 6.0 – Back to the Future

Allgemeines

Das Team möchte ausgehend von der “Vergangenheit” (TYPO3 4.x) ein Stück Richtung Zukunft (TYPO3 Phoenix) gehen; daher auch die Anspielung auf den Film “Back to the future” (dt: “Zurück in die Zukunft”). Mit der Version 6.0 soll der komplette Code der alten Versionen bereinigt werden. Die Module werden auf Extbase und Fluid umgestellt.

Es soll einen Austausch des Entwicklerteams mit dem Phoenix-Team geben, damit neue Features und APIs gleich oder ähnlich sind. Mit anderen Worten: Die TYPO3-Version 6.0 soll zeitgemäß aber trotzdem äußerst stabil daher kommen.

Das  Introduction Package soll komplett überarbeitet werden und eine “Responsive” Frontend-Ausgabe erhalten.

Backend

Die Benutzeroberfläche des Backend soll grundlegend überarbeitet werden, da gerade Redakteure häufig Problem mit der Benutzung haben. Dabei soll das Backend komplett auf jQuery umgestellt werden.  Außerdem wird das Backend auf die Ausgabe von mobilen Endgeräten optimiert. Viele Backend-Module sollen auf Basis von Extbase und Fluid umprogrammiert werden.

Extensionmanager

Da der Extensionmanager häufig in der Kritik steht, gerade in Hinblick auf die Schnelligkeit und die Benutzerfreundlichkeit, hat das Team sich dazu entschieden diesen  komplett neu zu gestalten. Dabei soll von Anfang an darauf geachtet werden, welche Funktionen überhaupt gebraucht werden und welche überflüssig sind. Zuerst soll das komplette Konzept für die benutzerfreundliche Oberflächen erstellt werden und erst danach wird das Ganze dann umgesetzt.

Updates

In Zukunft soll es einfacher möglich sein ein Update auf eine neue Minor Versionen (Bugfix- oder Sicherheitsupdate) von TYPO3 per SSH zu machen. Dabei wird großer Wert auf die einfache Handhabung  gelegt.

File Abstration Layer

Mit der 6er-Version soll nun, nach mehrmaligem Verschieben, der File Abstraction Layer ins System integriert werden.  Das FAL wird außerdem noch ausgebaut, damit es auch problemlos an Cloud Speicher angebunden werden kann.

Quelle: blog.mittwald.de

Welcher TYPO3-Hoster?

Es gibt unzählige Webhoster am deutschen Markt die TYPO3-Unterstützung anbieten.
Dabei ist nicht nur auf mod_rewrite und ImageMagick zu achten, sondern auch auf genügend Arbeitsspeicher (RAM).
Für kleine Projekte zum Beispiel kann auch der günstige Anbieter goneo aussreichen.
Auch gut sind 1und1, All-Inkl., DomainFactory oder Strato die zur Zeit ihre Server performanter gestalten.
Aber am besten finde ich immer wieder Mittwald, die mit Ihren Top-Support und z.B. automatischen Updates für TYPO3 keine Wünsche übrig lassen. Was will man mehr? :-)

Website von Bad Schlema holt 1.Platz

Die Gemeinde Bad Schlema ist am Donnerstagabend während der Mitgliederversammlung des Tourismusverbands Erzgebirge in Bermsgrün für ihre Internetseite ausgezeichnet worden. Der Verband hatte die Auftritte von 30 Orten analysiert. Entscheidend war eine gäste- und qualitätsorientierte Gestaltung. Die Bewertung erfolgte nach 174 Punkten und 85 Qualitätskriterien. Bad Schlema erreichte 169 Zähler und siegte vor Altenberg sowie vor Oberwiesenthal, Marienberg und Freiberg, die sich als Trio Platz 3 teilen.

Quelle: FreiePresse.de

Projektseite auf der Website.