dann starten wir mal mit einer kleinen Anleitung zur mobilen Version eurer Seite. Erstmal paar Infos vorweg:
Das Grundprinzip basiert auf zwei verschiedenen Templates. Einmal euer normales Template und einmal das mobile. Die Templateauswahl im Adminmenü könnt ihr nach der Änderung aber nicht mehr nutzen, zumindest nicht bevor ihr nicht ein paar andere Änderungen vornehmt. Vielleicht mag ja jemand noch was an der Anleitung anpassen, damit man das im Adminmenü einstellen kann.
Bitte beachtet bei dem mobilen Template, dass verschiedene Handys auch verschiedene Auflösungen haben. Ich arbeite mit einer Auflösung von 320x480 Pixeln (immer noch die meisten Nutzer), wobei die 480 natürlich nur als Minimum gesetzt sind. Das Design wird dann zentral gesetzt, damit Leute bei größerer Auflösung einen Rand an beiden Seiten haben.
Was brauchen wir?
Zunächst mal zwei Domains. Ob das nun eine Subdomain mobil.eureseite.de oder eine andere ist, spielt erstmal keine Rolle.
Erster Schritt: Legt euch zwei Designs an, die Namen sind nur Beispiele (Design1) (Design2)
Zweiter Schritt:
Öffnet die include/includes/class/design.php
Etwa Zeile 33 - Ersetzt:
$this->design = $this->get_design();
Damit:
$domain_search = $_SERVER["HTTP_HOST"];
if ($domain_search == 'www.eureseite.de') {
$skin_name = 'Design1'; }
elseif ($domain_search == 'eureseite.de') {
$skin_name = 'Design1'; }
elseif ($domain_search == 'mobil.eureseite.de') {
$skin_name = 'Design2'; }
// Domain Abfrage Ende
$this->design = $skin_name;
eureseite und Design natürlich entsprechend anpassen.
Dritter Schritt:
Öffnet die include/includes/class/tpl.php
Etwa Zeile 34 - Ersetzt:
$design = $this->get_design ();
hiermit:
$domain_search = $_SERVER["HTTP_HOST"];
if ($domain_search == 'www.eureseite.de') {
$skin_name = 'Design1'; }
elseif ($domain_search == 'eureseite.de') {
$skin_name = 'Design1'; }
elseif ($domain_search == 'mobil.eureseite.de') {
$skin_name = 'Design2'; }
// Domain Abfrage Ende
$design = $skin_name;
Vom Prinzip her war es das schon. Je nachdem welche Domain jetzt aufgerufen wird, wird das entsprechende Design geladen.
Umleitung bei mobilem Gerät
Ihr könnt in eurer Hauptseite noch eine Abfrage einbauen, ob die Seite mit einem mobilen Endgerät aufgerufen wird und dann umleiten.
Dazu geht folgendermaßen vor:
Erster Schritt:
Öffnet einen Editor und fügt folgendes ein:
function CookieSave(name, value, days)
{
if (typeof days != 'undefined') {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = "; expires=" + date.toGMTString();
} else {
var expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function CookieGet(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') {
c = c.substring(1,c.length);
}
if (c.indexOf(nameEQ) == 0) {
return c.substring(nameEQ.length,c.length);
}
}
return null;
}
function mredirect(){
var mconfirm = confirm('Wollen Sie die mobile Version laden?');
if(mconfirm == true){
window.location.href = "http://mobil.eureseite.de/" ; // Hier die mobile Domain festlegen
}else{
// Setze Cookie um spaetere Dialoge zu vermeiden
CookieSave('hilMobil', '1', '90'); // Hier den Cookie-Namen ändern
}
}
function Client() {
}
Client.prototype.mobileClients = ["240x320","windows phone","blackberry","netfront","nokia","panasonic","portalmmm","sharp","sie-","sonyericsson","symbian","windows ce","benq","mda","mot-","philips","pocket pc","sagem","samsung","sda","sgh-","vodafone","xda","iphone","android"];
Client.prototype.OperaMini = ["midp","opera mini"]
Client.prototype.isMobileClient = function(userAgent)
{
userAgent=userAgent.toLowerCase();
for (var i in this.mobileClients) {
if (userAgent.indexOf(this.mobileClients[i]) != -1) {
return true;
}
}
return false;
}
Client.prototype.isOperaMini = function(userAgent)
{
userAgent=userAgent.toLowerCase();
for (var i in this.OperaMini) {
if (userAgent.indexOf(this.OperaMini[i]) != -1) {
return true;
}
}
return false;
}
if(CookieGet('hilMobil') != 1) { // Hier den Cookie-Namen anpassen
var client = new Client();
if (client.isMobileClient(navigator.userAgent)) {
mredirect();
}
else if(client.isOperaMini(navigator.userAgent)){
document.observe('dom:loaded', mredirect);
}
}
Ihr müsst noch entsprechend euren Domain Namen ändern und könnt den Cookienamen anpassen.
Das ganze speicher ihr als detectmobile.js ab und ladet es auf euren Server in das Verzeichnis: include/includes/js
Zweiter Schritt:
Öffnet eure index.htm von eurem Design1 und fügt in den Headbereich folgendes ein:
<script type="text/javascript" src="http://www.eureseite.de/include/includes/js/detectmobile.js"></script>
Mobile Version
Damit ist die Abfrage auf der Hauptseite eingebaut.
Für euer mobiles Template noch eine Info, damit die Endgeräte auch verstehen dass es sich um eine mobile Website handelt, öffnet bitte die index.htm von eurem Design2 und fügt dort folgendes in den Headbereich ein:
<meta name="viewport" content="width=320, height=480, user-scalable=yes, initial-scale=0.0, maximum-scale=5.0, minimum-scale=1.0" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="width" />
Beim erstellen eines mobilen Template achtet also auf die Breite und denkt daran, daß die User es mit dem Finger bedienen.
TIPP 1:
Um ein Menü auf die mobile Startseite zu bekommen, habe ich eine leere startseite.php erstellt
# Copyright by: Manuel
# Support: www.ilch.de
defined ('main') or die ( 'no direct access' );
$title = $allgAr['title'].' :: Startseite';
$hmenu = 'Startseite';
$design = new design ( $title , $hmenu );
$design->header();
$tpl = new tpl ( 'startseite.htm' );
$tpl->out(0);
$design->footer();
?>
Wenn ihr das habt,dann könnt ihr für eure beiden Designs verschiedene startseite.htm Templates erstellen. Natürlich nicht vergessen im Adminmenü, die startseite.php auch als Startseite einzustellen.
TIPP 2:
Wer ein eigenes Android App haben möchte, der besucht bitte www.appsgeyser.com. Hier könnt ihr euch registrieren und euch mit wenigen Mausklicks und eurer mobilen Domain eine App erstellen und runterladen.
Bitte beachtet aber, das es bei Android ab Version 4 nicht möglich ist über die App einen Bildupload durchzuführen.Mit 2.3 hat es bei mir schon geklappt.
Wer eine eigene Androidapp programmieren möchte, der kann ja mal nach Phonegap und Webview googeln. Ich habs schon probiert, aber man sollte sich wirklich gut mit Java auskennen.
So, dass war es eigentlich von meiner Seite aus.Ich hoffe, ich habe nichts vergessen. Viel Erfolg.
verwendete ilchClan Version: 1.1 P
betroffene Homepage: externer Link
Zitat
