Joomla! goes iPhone

Rate this item
(9 votes)

iphoneEine Website auf einem mobilen Gerät unterscheidet sich in Aussehen und Bedienung ganz wesentlich von der PC oder Notebook-Version. Entsprechend dem Prinzip "Write Once, Publish Everywhere" möchte jedoch niemand mehrere Kopien einer Seite pflegen. Das wäre für eine Website, die mit Joomla! erstellt wurde, auch ziemlich ineffizient.

Ich möchte hier eine Lösung vorstellen, die aus einem Template für das iPhone und einem Modul besteht, das Joomla!-Beiträge auf dem iPhone anzeigt.

Das Template besteht dabei aus einem iPhone-optimiertem Code mit der iUI-Bibliothek von Joe Hewitt. Mit dieser Bibliothek emuliert die Website eine native iPhone App. Das typische Look and Feel wird dabei durch Javascript und CSS nachgebildet. Wie bei Standard-Apps üblich, können einzelne Seiten von rechts ins Bild fahren, es gibt eine Kopfzeile mit einem Zurückknopf und ein Menü, bei dem über AJAX weitere Menüpunkte nachgeladen werden können.

Ein großer Vorteil ist das Laden von mehreren iPhone-Seiten gleichzeitig, sodaß beim Navigieren keine Wartezeiten auftreten. Dies ist bei dem Betrachten von Websites über EDGE von großer Vorteil. Mit gerade mal 16k ist dieses Template leichtgewichtig und schnell.

Wie wird dieses Template nun benutzt?

Das Template enthält anders als üblich keinen Komponenten-Bereich (jdoc:include type="component") und nur eine einzige Modul-Position (jdoc:include type="modules" name="iphone" style="raw"). Hier kommt das Module mod_iphone_article ins Spiel:

Das Modul nimmt alle Artikel einer Kategorie, baut ein iPhone-Menü und rendert alle Artikel so, dass sie auf dem iPhone gut darstellbar sind. Das Modul muss an der Position iphone veröffentlicht sein.

Nun braucht das iPhone nur noch eine URL. Dazu legt man einen Menüeintrag an und weist ihm irgendeinen Inhalt zu. Dann wählt man unter Erweiterungen | Templates das Template "iPhone One" und weist es dem eben erstelltem Nenüpunkt zu. Diese URL kann nun über das iPhone aufgerufen werden und man erhält ein Menü mit allen Artikeln. Ein kleines Beispiel erhält man über http://www.dinovis.de/index.php/iphone

Diese URL lässt sich nun auf dem Home-Bildschirm des iPhones ablegen (mit eigenem Icon) und genauso benutzen wie ein App!

downloadDas Template und das Module kann man hier herunterladen.

Das Template und das Module befinden sich in einem experimentellen Stadium. Es sind viele Verbesserungen und Erweiterungen denkbar. Ich bin offen und dankbar für alle Anregungen und Meinungen.

Ich wünsche viel Spass beim Experimentieren !

Hier eine Liste der iPhone One Features und hier findet man eine etwas ausführlichere Anleitung.

Last modified on Freitag, den 18. Dezember 2009 um 15:16 Uhr
More in this category: Features »

13 comments

  • Comment Link Alexander Schmidt Dienstag, den 09. März 2010 um 19:37 Uhr posted by Alexander Schmidt

    Leider werden Artikel, die auf 'registriert' stehen, auch mit angezeigt. Ich habe mal die helper.php des Moduls dahingehend umgeschrieben, dass das nicht mehr passiert. Das ganze Modul ist zu finden unter http://urls.edvas.de/g. Vielleicht einfach mal abgleichen.

    Diese E-Mail-Adresse ist gegen Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann.
  • Comment Link Thorsten Dienstag, den 09. März 2010 um 09:07 Uhr posted by Thorsten

    Bekomme es auch nicht hin! Die "Startseiten" (d.h. Übersicht aller Artikel der Kathegorie) erscheint richtig. Der erste Linkt führt dann zum ersten Artikel auf einer neuen Seiten, auf der auch alle anderen Beträge stehen. Alle anderen Menüeinträge in der Übersicht führen ins Leere. Was mache ich falsch? Vielen Dank und viel Grüße Thorsten

    Diese E-Mail-Adresse ist gegen Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann.
  • Comment Link Alexander Schmidt Montag, den 15. Februar 2010 um 15:59 Uhr posted by Alexander Schmidt

    Sehr gute Arbeit. Vielen Dank, Wolfgang. Für das Template und das Modul habe ich mal eine Anleitung geschrieben "Joomla! fit fürs iPhone machen" http://itr.im/104

    Diese E-Mail-Adresse ist gegen Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann.
  • Comment Link chris Samstag, den 16. Januar 2010 um 09:48 Uhr posted by chris

    Die iPhone-Ansicht ist super! Habe noch eine Frage: kann man die einzelnen Beiträge als Sub unter den einzelnen Links anzeigen, d.h. nicht jedesmal als neue Seite? Vielen Dank!

    Diese E-Mail-Adresse ist gegen Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann.
  • Comment Link André Donnerstag, den 07. Januar 2010 um 13:14 Uhr posted by André

    Schöne Idee, Joomla aufs Iphone zu bekommen in einer ordentlichen Form (Rss reader lassen ja zu wünschen über). Was eine Ganz andere Idee wäre, eine Joomla-Komponente, wo man verschiedene Inhalte (Artikel, Forum, User-Login) unter einen Smartphone-günstigen Template) mobil zugänglich machen könnte. Quasi ne abgespeckte Miniversion, die aber voll nutzbar ist.

    Diese E-Mail-Adresse ist gegen Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann.
  • Comment Link wd Freitag, den 18. Dezember 2009 um 15:24 Uhr posted by wd

    Ich denke die Konfiguration ist doch etwas tricky. Deshalb habe ich eine kleine Anleitung geschrieben, die ihr im Menü unter Joomla goes iPhone | Anleitung findet.

    Diese E-Mail-Adresse ist gegen Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann.
  • Comment Link remo Donnerstag, den 17. Dezember 2009 um 16:57 Uhr posted by remo

    Leider kann ich noch keine Beiträge zuordnen... Wenn ich ein Hauptmenü "iphone" mache, welchen Layouttyp muss das haben? Dann erstellte ich einen Bereich iphone_ber und eine kategorie iphone_kat. Danach wies ich die Beiträge dem Bereich iphone_ber/iphone_kat zu, diese werden jedoch nicht angezeigt... was mache ich falsch??

    Diese E-Mail-Adresse ist gegen Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann.
  • Comment Link Roland Donnerstag, den 17. Dezember 2009 um 12:24 Uhr posted by Roland

    Ich habe das gleiche Problem, dass die Beiträge nicht korrekt dargestellt werden. Es erscheint auf einer Seite der gesamte Text der Beiträge und weitere Anzeigen, die in der Vorlage nicht sichtbar sind (ganz unten auf der Seite: Suchlinks etc.) Mein Beispiel ist unter: http://pothos.bplaced.net/index.php?option=com_content&view=article&id=50&Itemid=71 Auch auf dem Iphone sieht es nicht gut aus. Die Anzeige wird nicht korrekt skaliert. Besten Dank für die Hilfe. Roland

    Diese E-Mail-Adresse ist gegen Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann.
  • Comment Link Hannelore Mittwoch, den 16. Dezember 2009 um 23:09 Uhr posted by Hannelore

    Eine tolle Idee! Leider bleibe ich bei der Umsetzung an der einen Stelle stecken. Ich glaube, dass ich alle Anweisungen zur Installation richtig befolgt habe. Ich kann auch verschiedenen Kategorien zuweisen; die Überschriften der Beiträge werden noch korrekt im Menue angezeigt, aber die einzelnen Artikel werden nicht dargestellt? Kann mir jemand helfen? Link zum iphone http://www.mona-barthel.de/joomla/index.php?option=com_content&view=article&id=78&Itemid=100#_home

    Diese E-Mail-Adresse ist gegen Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann.
  • Comment Link wd Montag, den 14. Dezember 2009 um 12:57 Uhr posted by wd

    Hi Guy, in iPhone-Article inside the template-file default.php you will find a div and inside a paragraph. This is the dinovis box. you can change the text, delete the whole div as you like. if you delete the div it would be a great idea to ajust the style of the folowing div-tag. the class iphone-article-content is found in template.css of the iphone-one template. another idea is to develop your own template in simple.php Have fun!

    Diese E-Mail-Adresse ist gegen Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann.
«StartZurück12WeiterEnde»

Add comment


Image Gallery