ThemesIPhone

Guite edited this page Nov 12, 2014 · 4 revisions

Das iPhone Theme

Das iPhone-Theme ist ein Spezial-Theme für Zikula, mit dem man iPhone-Benutzern eine angepasste Version der Site anzeigen lassen kann. Diese Version ist im Layout und der Art der Bedienung nativen iPhone-Anwendungen nachempfunden.

Konzept

Die Idee dieses Themes ist, iPhone-Benutzern eine möglichst einfache Bedieneroberfläche für eine Website zu geben. Was bietet sich da mehr an, als die Bedienung des iPhone nachzuahmen - immerhin hat Apple eine Menge Geld in die Erforschung von Usability gesteckt und diese Erfahrungen in die Entwicklung des User-Interfaces des iPhones einfließen lassen. Die Userinterface-Library "iui" versucht mit Mitteln von HTML, CSS und JavaScript in einfachen Websites imitieren.

Weiterhin macht es Sinn, mobilen Benutzern ein schnelles Interface, beschränkt auf die wichtigsten Features der Site zur Verfügung zu stellen: Wer mit einem relativ kleinen, mobilen Gerät unterwegs ist, hat vermutlich keine große Lust auf Interaktivität in Kommentaren, Forum usw.: Er will wissen, was los ist. Und so sieht dann auch das iPhone-Theme für foerdefluesterer.de aus: Top Stories, die vier Rubriken und die Termine von heute. Wer dann noch mehr Informationen haben will, kann auf die normale Website wechseln. Dementsprechend gibt es auf der Startseite des iPhone-Themes nur 7 Links:

  • Top Stories
  • Nachrichten
  • Szene
  • Kultur
  • Sport
  • Termine
  • Normale Ansicht

Das iPhone wird automatisch als Client erkannt und der Benutzer auf das iPhone-Theme weitergeleitet. Er kann dann aber manuell auf die normale Ansicht wechseln.

Anpassung

Da ein solches Theme quasi nur aus Navigation besteht, ist es unmöglich eine "On-Size-Fits-All" Lösung zu entwickeln - Zu verschiedenen sind die Features und die benutzten Module. Deswegen ist ein wenig Handarbeit gefragt. Dem Paket hier liegen Beispiele für Pagesetter (PN-News) und crpCalendar bei.

  • Lade das Archiv herunter
  • Pack es aus
  • Dort hast Du nun ein Verzeichnis "iphone" und ein Plugin mit dem Namen "function.iphone.php" - Das Verzeichnis lädst Du in Dein Themes Verzeichnis und das Plugin in /themes/DEIN-HAUPT-THEME/plugins
  • Dann gehst Du in Deine Theme-Verwaltung und erzeugst die Themeliste neu.
  • In der Theme-Verwaltung muss Du die Konfiguration so umstellen, dass Benutzer Themes einstellen können.
  • Nun musst Du den Aufruf für das iphone-Plugin in Dein Haupttheme einbauen. Das Plugin erkennt das iPhone und leitet den Benutzer dann weiter auf das iPhone-Theme. Dazu musst Du ganz am Anfang Deiner master.htm und/oder home.htm einbauen:
<!--[iphone]-->
  • Jetzt sollte die Weiterleitung funktionieren.
  • Damit die Benutzer aber auch wieder korrekt zurück kommen musst Du in /themes/iphone/plugins/function.iphoneOff.php die Weiterleitung auf newtheme=ff2008 so ändern, dass stattdessen Dein Theme aufgerufen wird - ff2008 ist der Name des Themes beim Fördeflüsterer.

Deine iPhone-Startseite passt Du in der themes/iphone/templates/modules/home.htm an. Dort kannst Du im Prinzip beliebige Listenpunkt mit beliebigen Links zu Seiten Deiner Website einbauen. Nur: Die aufgerufenen Seiten müssen dafür vorbereitet werden:

  • Wie Du an dem Beispiele Pagesetter sehen kannst: Die Listenansichten müssen auch mit diesen einfach ul-Listen aufgebaut werden. Der title der ul wird gleichzeitig als Titel angezeigt.
  • Die Anzeige der Artikel bzw. Termine selbst ist noch einfacher: Einfach in ein div-Tag packen und auch dort wieder den Titel per title Attribut festlegen.

Das lässt sich für alle Module analog umsetzen: Entweder schlichte ul-Listen oder Inhalte im div.

Testen

Wer das jetzt mal testen will, geht in einen T-Punkt und kauft sich ein iPhone mit Vertrag - Am liebsten den, bei dem es das iPhone für einen Euro dazu gibt, und man dann über die monatlischen Grundgebühren in den 24 Monaten Laufzeit ca. 2000 EUR für das Ding ablatzt ;-)

Billiger geht's per "User Agent Switcher". Das ist ein Plugin für den Firefox mit dem man einer Website beliebige Browser vortäuschen kann.

  • Installier das User Agent Switcher Firefox Plugin
  • Füge einen neuen User Agent hinzu (Extras > Browserkennung wechseln > Optionen > Einstellungen > Browserkennungen > Hinzufügen)

Beschreibung: iPhone

User Agent: Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en)

Programmname: AppleWebKit/420+ (KHTML, like Gecko)

Programmversion: Version/3.0

Plattform: Mobile/1A542a Safari/419.3

  • Stell iPhone als Browserkennung ein: (Extras > Browserkennung wechseln > iPhone)
  • Surf auf Deine Seite und freu Dich, dass Du jetzt ein iPhone bist.
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.