Uncategorized (5)
HTML5 Video
<p>Ich versuche hier eine kleine Anleitung zu geben, wie das Modul und das Template zu benutzen sind. Voraussetzung ist: das Modul und das Template wurden ohne Fehlermeldung installiert.</p>
<img src="/images/stories/iphone/mod_params.png" alt="iphone" style="float:right; margin-left:20px;"/>
<h3>Der Content</h3>
<p>Fangen wir mit Content an. Es sollen mehrere Artikel auf dem iPhone veröffentlicht werden. Dazu brauche ich in Joomla erstmal einen Bereich. In diesem kann ich dann eine Kategorie anlegen und nun kann ich mehrere Artikel schreiben, die ich dieser Kategorie zuordne. So das wars mit der Vorbereitung. Und damit man erstmal einen Eindruck bekommt, wie es dann auf dem iPhone aussieht, legt man am besten mal Testartikel in einer Testkategorie an. Einfache Artikel ohne Bild und Schnickschnack. </p>
<h3>Das Modul</h3>
<p>Nun gehts mit dem Modul weiter: Im Modul wähle ich nun diese Artikel aus. Die Anzahl sollte erstmal auf 8 stehen (diese Funktion ist noch nicht ganz fertig). Ganz wichtig ist es das Modul an der Position <b>iphone</b> zu veröffentlichen! (Falls man diese Position nicht auswählen kann, einfach reinschreiben!) Eine besondere Menüzuweisung ist nicht nötig. Und natürlich drauf achten, dass das Modul auch aktiviert ist !</p>
<img src="/images/stories/iphone/mod_details.png" alt="iphone" style="float:right; margin-left:20px;"/>
<h3>Der Menüeintrag</h3>
<p>Als nächstes kommt der Menüeintrag dran. Wir brauchen einen neuen Menüpunkt, damit wir eine URL für das iphone haben. Der Eintrag in meinem Beispiel lautet: <i>iphone</i> im Menü oben und damit erhalte ich die URL <i>http://www.dinovis.de/index.php/iphone</i>. Als Menü-Typ kann man auch <i>irgendeinen</i> Typ wählen. Ich hab in meinem Falle einen Beitrag ausgewählt, aber das ist unerheblich, da man diesen ja (nach dem nächsten Schritt) durch das Template überhaupt nicht mehr zu Gesicht bekommt. </p>
<h3>Das Template</h3>
<p>Als letzter Schritt muss man nun das Template dem eben erstellten Menüpunkt zuweisen. Das macht man in der Templateverwaltung: Bearbeiten Sie das iPhone-One Template und weisen Sie es ihrem neuen Menüpunkt zu. Danach sollte beim Klick auf den Menüpunkt nicht mehr ihr Standardtemplate erscheinen, sondern die iPhone Ansicht mit dem Menü der Artikel.</p>
<img src="/images/stories/iphone/template_params.png" alt="iphone" style="float:right; margin-left:20px;"/>
<p>Das Template und das Modul können <a href="/index.php/download">hier heruntergeladen</a> werden. Außerdem eine Liste der <a href="/index.php/joomla-goes-iphone/features">iPhone One Features</a>.
<h3>Template iPhone One</h3>
<img src="/images/stories/iphone/mod_iphone_article.png" alt="iphone" style="float:right; margin-left:20px;"/><p>Das Template hat folgende Features:</p>
<ul>
<li>Enthält die <a href="http://code.google.com/p/iui/">iUI-Bibliothek</a> in der Version 0.31</li>
<li>Speichert Icon für die WebApp auf dem Homescreen</li>
<li>Startup Screen für die Anwendung</li>
<li>liefert das Framework um WebApps das Look&Feel einer iPhone Anwendung zu geben.</li>
</ul>
<h3>Module mod_iphone_article</h3>
<p>Das Modul Article hat folgende Features:</p>
<ul>
<li>Stellt die Artikel einer Kategorie dar, dabei ist die Anzahl der Artikel ist einstellbar</li>
<li>Je Artikel wird eine Seite generiert</li>
<li>Es wird eine Auswahlliste der Artikel angezeigt</li>
<li>Es sind verschiedene Seitenlayouts auswählbar</li>
<li>Gibt es mehr Artikel als in der Auswahlliste dargestellt, so können diese dynamisch nachgeladen werden (optional) - noch in der Entwicklung - </li>
<li>integriertes Suchen Formular - noch in der Entwicklung - </li>
<li>Weiterlesen und verlinkte Titel - noch in der Entwicklung - </li>
<li>Darstellung des Menüs mit "alternate row colors"</li>
</ul>
<p>Das Template hat die Modulposition <b>iphone</b>. Dort muss das Module mod_iphone_article veröffentlicht werde.</p>
<p>Das Template und das Modul können <a href="/index.php/download">hier heruntergeladen</a> werden und hier findet man eine etwas <a href="http://www.dinovis.de/index.php/joomla-goes-iphone/anleitung">ausführlichere Anleitung</a>.</p>
Eine 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?</p><p>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 <b>iphone</b> 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 <a href="http://www.dinovis.de/index.php/iphone">http://www.dinovis.de/index.php/iphone</a></p><p>Diese URL lässt sich nun auf dem Home-Bildschirm des iPhones ablegen (mit eigenem Icon) und genauso benutzen wie ein App!</p>
<p><a href="http://dinovis.de/index.php/download"><img src="/images/stories/download.png" alt="download" style="float:left; margin-right:20px;"/></a>Das Template und das Module kann man hier <a href="/index.php/download">herunterladen</a>.</p>
<p>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.</p><p>Ich wünsche viel Spass beim Experimentieren !
Hier eine Liste der <a href="/index.php/joomla-goes-iphone/features">iPhone One Features</a> und hier findet man eine etwas <a href="http://www.dinovis.de/index.php/joomla-goes-iphone/anleitung">ausführlichere Anleitung</a>.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.