phpwcms Support Forum

Voraussetzung könnte sowohl eine Neuinstallierung bzw. eine bereits installierte Desktopwebsite sein.
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>

(3.) Festlegen der HTML-Kopf Informationen:

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>

Damit steht erst einmal das Grundgerüst. Ich habe wegen der Reihenfolge der JS/CSS Bibliotheken diese Form gewählt und den Haken NICHT bei "immer laden" gesetzt und den Haken bei "Google Ajax Lib benutzen" gesetzt. --> Speichern

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

)

NAV_LIST_UL:F,20,1,,active

Der Rest ist Fleißarbeit (mobil.korr.css) mit Firebug etc. und ein wenig rumspielen mit css-Notationen, Nachlesen und probieren.

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

Eine kleine Ergänzung

nimmt man aus dem Template für CP "Text mit Bild" die von OG eingeschleussten CSS-Anweisungen raus und steckt diese in die name.frontend.css, fließt kein Text mehr um die Bilder. Für die mobile Version wird ja eine andere CSS geladen, so dass dann diese CSS-Anweisungen nicht mehr stören und nicht korrigiert werden müssen.

Gestern Abend habe ich diese Seite so eingerichtet, dass eine Browserweiche zuerst ihren Dienst aufnimmt.Dieses Script habe ich in /content/pages als TLDtest.php abgelegt und im Backend im Strukturpunkt HOME per CP ext.Content aufgerufen. Damit wirkt dieses Script wie eine "index.html".

Hintergrund ist, dass einige User nicht die mobile Domain der Website kennen. Also wird in meinem Domaintest ein php-Script - zusätzlich eine Browserweiche aktiviert, die zuvor abprüft, welcher Browser von mobilen Geräten aktiv ist oder nicht und dem entsprechend auf die Domain/ Subdomain weiterleitet.

Code: Select all

<?php
// ----------------------------TLDtest und Browsertest ------------------------------------------------------

// obligate check for phpwcms constants
if (!defined('PHPWCMS_ROOT')) { die("You Cannot Access This Script Directly, Have a Nice Day."); }
// -----------------------------------------------------------------------------------
 $DomainName = strtolower($_SERVER['HTTP_HOST']);
 $useragent = $_SERVER['HTTP_USER_AGENT'];
if 
(preg_match("/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|docomo|elaine
|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mmp|mobi|motorola|nec-|nokia|palm|
panasonic|philips|phone|playbook|sagem|sharp|sie-|silk|smartphone|sony|symbian|t-mobile|telus
|up\.browser|up\.link|vodafone|wap|webos|wireless|xda|xoom|zte)/i",$useragent))

{
$DomainName = 'mobile.webseite.de';
}

switch($DomainName)
{
case 'www.normaleSeite.de':
case 'normaleSeite.de':
header( "HTTP/1.1 301 Moved Permanently" );
headerRedirect('start-de.html');
break;

case 'www.normaleSeite.eu':
case 'www.normaleSeite.com':
case 'normaleSeite.eu':
case 'normaleSeite.com':
header( "HTTP/1.1 301 Moved Permanently" );
headerRedirect('start-eu.html');
break;
.....

case 'www.mobile.Webseite.de':
case 'mobil.Webseite.de':
header( "HTTP/1.1 301 Moved Permanently" );
headerRedirect('startmobil.html');
break;

default:
header( "HTTP/1.1 301 Moved Permanently" );
headerRedirect('start-de.html');
}
?>

Wenn man die mobile URL per PC und per mobilem Gerät aufruft, werden jeweils verschiedene Websites im Browser des Gerätes angezeigt.
Viel Spaß beim Verfeinern dieses Scriptes, bin auf hilfreiche Vorschläge gespannt.

Danke für dein Tutorial.

Was hast du bei "JS Bibliothek" genau eingestellt?

Gruß
Jo

Siehe bei (3.)

Code: Select all

<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>

Benötigst du für die Navigation keine eigene CSS-Datei?

Wenn Ja, muss die nicht auch angesprochen werden?

Klar doch, eine "Navigation-CSS" benutze ich, siehe (2.) Erstellen eines Layouttemplates:

Code: Select all

<div data-role="navbar"> {NAV_LIST_UL:F,20,1,,active} </div>

Das RT liefert vor allem für meine Lösung eine levelbasierte Liste für die Navigation und das ganze funktioniert bereits mit dem Standard code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css Aber das Standardtheme "A" sieht nicht sooo besonders aus ergo:

Meine Empfehlung ist aber (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!).

Ich habe das auch so gemacht... nur bekomme ich keine Navigation angezeigt, obwohl Kategorien angelegt und aktiv sind ???

Oder liegt es daran, dass ich nur auf dem localhost "experimentiere"?

zu dieser Navigation gehört ein RT, das Script dazu muss dann in /template/inc_script/frontend_render gespeichert sein.

NAV_LIST_UL basics: http://www.phpwcms-howto.de/wiki/doku.p ... av_list_ul

Ist das wirklich der richtige Link???

Mhhh, es bleibt für mich - wie immer - sehr geheimnisvoll

So ein Mist

Wie blöd kann man denn nur sein?
Natürlich muss die passende Start-ID in das RT für die Navigation eingetragen sein (nix 20 !)

So geht's, wenn man nicht nachdenkt, vor dem Kopieren

Alles paletti, jetzt komm ich weiter, danke

Es gibt eine erweiterte Suche hier im Forum

Außerdem muss man in Ruhe auch mal Lesen und nicht nur schnell schnell klick klick. Bekommst Du das hin

Du hast ja recht, es ist nicht falsch, sich möglichst nach seinen eigenen Tipps zu richten...

Ich habe es mir hinter die Ohren geschrieben, Bobo

Ich hoffe, ich-nein wir - bekommen auch etwas zu sehn?

Ich bin ja heute morgen erst ernsthaft angefangen... dein Tut war die entscheidende Initialzündung dazu, mal mit der Problematik von Templates für "mobile devices" zu experimentieren.

Selber habe ich so einen "modernen" Kram nicht, was die Sache umso komplizierter macht, was das Testen angeht!

Momentan macht mir die Navigation noch einige Sorgen, mal sehen, was ich da so hin bekomme... oder auch nicht

phpwcms Support Forum

Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Re: Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Re: Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Re: Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Re: Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Re: Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Re: Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Re: Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Re: Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Re: Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Re: Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Re: Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Re: Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Re: Tutorial: eine mobile Website (phpWCMS V1.7x ff)

Re: Tutorial: eine mobile Website (phpWCMS V1.7x ff)