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

If you have created additional (non official) documentation or tutorials or something like that please post this here
User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

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

Post by kukki » Wed 27. Nov 2013, 09:13

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 ... :arrow:

(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 ! :mrgreen:
- 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
Last edited by kukki on Thu 5. Dec 2013, 10:21, edited 3 times in total.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

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

Post by kukki » Thu 28. Nov 2013, 13:35

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. :mrgreen:
Last edited by kukki on Mon 2. Dec 2013, 08:21, edited 1 time in total.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

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

Post by kukki » Sat 30. Nov 2013, 09:51

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". 8)
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.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

photojo
Posts: 685
Joined: Wed 15. Nov 2006, 20:02
Location: Regensburg, Germany
Contact:

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

Post by photojo » Wed 4. Dec 2013, 16:10

Danke für dein Tutorial.

Was hast du bei "JS Bibliothek" genau eingestellt?

Gruß
Jo

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

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

Post by kukki » Thu 5. Dec 2013, 07:20

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>
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

Old Boy
Posts: 1120
Joined: Fri 23. Nov 2012, 13:52

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

Post by Old Boy » Thu 5. Dec 2013, 09:19

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

Wenn Ja, muss die nicht auch angesprochen werden?

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

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

Post by kukki » Thu 5. Dec 2013, 10:19

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

:idea:
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 ! :mrgreen:
- wähle dann im ADMIN-Bereich diese CSS-Files für Deine mobile Seite aus (keine anderen benutzen!).
Image
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

Old Boy
Posts: 1120
Joined: Fri 23. Nov 2012, 13:52

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

Post by Old Boy » Thu 5. Dec 2013, 13:03

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

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

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

Post by kukki » Thu 5. Dec 2013, 13:10

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
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

Old Boy
Posts: 1120
Joined: Fri 23. Nov 2012, 13:52

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

Post by Old Boy » Thu 5. Dec 2013, 13:17

Ist das wirklich der richtige Link???

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

Old Boy
Posts: 1120
Joined: Fri 23. Nov 2012, 13:52

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

Post by Old Boy » Thu 5. Dec 2013, 13:25

So ein Mist :twisted:

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 !) :idea:

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

Alles paletti, jetzt komm ich weiter, danke :D

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

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

Post by kukki » Thu 5. Dec 2013, 13:32

Es gibt eine erweiterte Suche hier im Forum :idea:
Außerdem muss man in Ruhe auch mal Lesen und nicht nur schnell schnell klick klick. Bekommst Du das hin :?:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

Old Boy
Posts: 1120
Joined: Fri 23. Nov 2012, 13:52

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

Post by Old Boy » Thu 5. Dec 2013, 13:36

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

Ich habe es mir hinter die Ohren geschrieben, Bobo :?

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

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

Post by kukki » Thu 5. Dec 2013, 14:05

Ich hoffe, ich-nein wir - bekommen auch etwas zu sehn?
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

Old Boy
Posts: 1120
Joined: Fri 23. Nov 2012, 13:52

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

Post by Old Boy » Thu 5. Dec 2013, 14:13

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

Post Reply