Ich gehe mal vom zweiten Fall aus, einer bereits fertig funktionierenden Website. Voraussetzung ist ein levelbasierter Aufbau der aktuellen Website in folgender Form:
HOME----------(0)
---WEB1-----------(1)
****Bereich1----------(2)
****bereich2----------(2)
****bereich3----------(2)
---Web2 -[start-mobil.html]- ID:20 -(1) Ziel der Subdomain "mobile.website.de"
****Bereich4----------(2)
****bereich5----------(2)
****bereich6----------(2) u.s.w.
Nehmen wir an, Web2 soll der neue mobile Bereich werden. Dann sind folgende Arbeitsschritte vorzunehmen:
(1.) Festlegen eines Seitenlayouts für mobile Website [ADMIN] mit der Version HEADER/CONTENT/FOOTER und Seitenaufbau: (X) Eigener ( aus Vorlage Haupt-Block )
Erstellen einer Struktur für mobile Seite und Zuordnen des mobilen Layouttemplates zur dieser Struktur (wichtig, nicht vergessen!!)
(2.) Erstellen eines Layouttemplates [Admin] mit folgendem allgemeinen Gerüst im CONTENT-Bereich:
(Achtung, in meiner Version 1.7. wird nach der schließenden "}" ein Leerzeichen erwartet
)
Code: Select all
<div data-role="page">
<div data-role="header">
<div><a href="start-mobil.html"><img width="90%" border="0" src="picture/Banner.png" /></a></div>
<div data-role="navbar"> {NAV_LIST_UL:F,20,1,,active} </div>
</div>
<div data-role="content">{CONTENT}
<div data-role="footer"> <a href="tel:+49 1234567890" data-role="button" data-icon="phone" data-iconpos="notext"></a> ** {DATE_MEDIUM} **</div>
</div>
</div>Code: Select all
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>Theoretisch funktioniert die ganze Sache schon, aber das Weblayout sieht noch 0815 aus, die eigens gewählte Subdomain wie "mobile.webseite.de" soll ja auch noch angesprochen werden und die gesamten Änderungen sollen eigentlich "synchron laufen" mit denen im mobilen Bereich.
Weiter gehts ...
(4.) Besuche die Seite http://jquerymobile.com/themeroller/
- klicke im linken Menü oben auf [C] und dann "delete" , solange bis nur noch [A] vorhanden ist, dann gehe auf global u. A und stelle Deine Themensettings ein. Einfach mit rumspielen, ist fast selbst erklärend. Da ich nur ein durchgehendes Layout brauche, wurden alle anderen B + C entfernt.
- Downloade dieses CSS-File mit Deinem Namen und speichere die dann entpackten Files incl. des Ordners "images" in /template/inc_css (images enthält die Basic-Icons! für das Buttonlayout!)
- speichere auch gleichzeitig noch ein erst einmal leeres File, wie mobil.korr.css in inc_css! Dieses wird später zur Anpassung einiger Kleinigkeiten gebraucht,
ohne gehts kaum !
- wähle dann im ADMIN-Bereich diese CSS-Files für Deine mobile Seite aus (keine anderen benutzen!).
(5.) Trage alle Informationen so weit wie möglich aus dem Bereich Web1 mittels SHOW_CONTENT für die mobile Seite zusammen. Damit wird die Arbeit an der Seite sich hauptsächlich auf den Desktopbereich beschränken.
Teste Deine Seite in einigen Emulatoren wie:
http://www.mobilephoneemulator.com/ oder halt andere.
ABER
Teste diese unbedingt auf mobilen Geräten selber, siehe das Problem Formular
Die Navigation habe ich mit dem RT "NAV_LIST_UL" erstellt, da man damit die levelbasierten Menüpunkte "ul/li" für jQuerymobil erzeugen und direkt ansprechen kann.
(
Danke an OG/ flip-flop )
Der Rest ist Fleißarbeit (mobil.korr.css) mit Firebug etc. und ein wenig rumspielen mit css-Notationen, Nachlesen und probieren.NAV_LIST_UL:F,20,1,,active
Untern Strich stell sich raus, dass die Erstellung mittels phpWCMS einfach sein kann.
Bleibt nur noch die Lösung der Subdomain, die man an dieser Stelle nachlesen kann - Website in einer Website ist das Thema
