ilch Forum » Allgemein » HTML, PHP, SQL,... » [Tutorial] Mobile Version eurer Seite

Geschlossen
  1. #1
    User Pic
    lenzen24 Mitglied
    Registriert seit
    26.08.2006
    Beiträge
    17
    Beitragswertungen
    1 Beitragspunkte
    Hallo,
    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: www.ilch.de
    Was nicht passt wird passend gemacht
    1 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Rock@wulf Entwickler
    Registriert seit
    03.06.2004
    Beiträge
    3.277
    Beitragswertungen
    237 Beitragspunkte
    Sorry wenn ich jetzt meckere aber:

    function get_design () {
        $domain_search = $_SERVER["HTTP_HOST"];
        if ($domain_search == 'www.eureseite.de' OR $domain_search == 'eureseite.de') {
            if ( file_exists('include/designs/'.$_SESSION['authgfx'].'/index.htm')) {
                return ( $_SESSION['authgfx'] );
            } elseif ( file_exists('include/designs/ilchClan/index.htm')) {
                return ( 'ilchClan' );
            } else {
                $od = opendir('include/designs');
                while ( $f = readdir($od) ) {
                    if ( file_exists('include/designs/'.$f.'/index.htm')) {
                        return ( $f );
                        break;
                    }
                }
                closedir($od);
            }
        } elseif ($domain_search == 'mobil.eureseite.de') {
               return ('Design2');
        }
    }


    Wenn man schon im Zetralen Funktionsaufruf rumbastelt, warum dann nicht richtig?

    Damit sollte die Design auswahl funktionieren und mobil auch.

    Gruß
    Meine Postings repräsentieren meine Meinung wenn nicht anders gekennzeichnet.
    MFG Rock@wulf
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    lenzen24 Mitglied
    Registriert seit
    26.08.2006
    Beiträge
    17
    Beitragswertungen
    1 Beitragspunkte
    Verstehe gerade nicht worauf du hinaus willst
    Was nicht passt wird passend gemacht
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Rock@wulf Entwickler
    Registriert seit
    03.06.2004
    Beiträge
    3.277
    Beitragswertungen
    237 Beitragspunkte
    Das ersetzt schritt zwei und drei als auch
    ZitatZitat
    Die Templateauswahl im Adminmenü könnt ihr nach der Änderung aber nicht mehr nutzen, zumindest nicht bevor ihr nicht ein paar andere Änderungen vornehmt.


    das danach erledigt ist
    Meine Postings repräsentieren meine Meinung wenn nicht anders gekennzeichnet.
    MFG Rock@wulf
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Ahrtas Hall Of Fame
    Registriert seit
    17.12.2007
    Beiträge
    2.303
    Beitragswertungen
    202 Beitragspunkte
    Wieso nicht ein Design dynamisch machen?

    1 Design und für jedes Endgerät 1 css datei... dann braucht man keine zwei designs oder sonstigen Quelltext vom CMS ändern.

    Stichwort: Responsive Design zwinker
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beiträge
    258
    Beitragswertungen
    33 Beitragspunkte
    ZitatZitat geschrieben von Ahrtas

    Stichwort: Responsive Design zwinker


    Bei dem Stichwort solltest aber auf Media Queries verweisen und nicht auf 10 css Dateien zwinker

    Aber im Großen ganzen schon richtig, der Trend geht ganz klar richtung Responsive und verschiedenen Viewports.

    Es sei den man möchte die guten alten wap seiten noch unterstützen, dann ist das obere eine Lösung
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Ahrtas Hall Of Fame
    Registriert seit
    17.12.2007
    Beiträge
    2.303
    Beitragswertungen
    202 Beitragspunkte
    nein ich meinte ja eine css datei wo über die media queries die jeweiligen sheets für die verwendete auflösung angesprochen werden.. selbstverständlich, kommt aber jeder selbst drauf der sich erst mal mit den Grundlagen beschäftigt - sollte zumindest..
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    lenzen24 Mitglied
    Registriert seit
    26.08.2006
    Beiträge
    17
    Beitragswertungen
    1 Beitragspunkte
    @rock@wulf
    so richtig verstehe ich immer noch nicht worauf du hinaus willst. ganze texte wären hier sinnvoller, aber ich nehme an du meinst, dass man änderungen an der tpl.php nicht benötigt um zwei verschiedene designs zu laden. das ist grundsätzlich richtig, aber wenn man die tpl.php nicht ändert, dann werden die templates des designs nicht geladen, sondern nur die standardtemplates.

    @wizzard+ahrtas
    eure vorschläge sind richtig, kann man auch machen, aber dann kann man die einzelnen templates nicht wirklich anpassen, was mir persönlich wichtig ist,da
    es meiner meinung nach auch sachen gibt, die man im mobilen bereich definitiv weglassen kann. deshalb erstelle ich lieber zwei designs mit zwei verschiedenen templateversionen
    Was nicht passt wird passend gemacht
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    Rock@wulf Entwickler
    Registriert seit
    03.06.2004
    Beiträge
    3.277
    Beitragswertungen
    237 Beitragspunkte
    Ok, ich hab halt nur begrenzt Zeit.

    Du ersetzt in Schritt zwei und drei in der tpl.php und desing.php jeweils

    $design = $this->get_design ();


    Besser ist es in der tpl.php einmalif die funktion get_design() anpasst.

    function get_design () {
        $domain_search = $_SERVER["HTTP_HOST"];
        if ($domain_search == 'www.eureseite.de' OR $domain_search == 'eureseite.de') {
            if ( file_exists('include/designs/'.$_SESSION['authgfx'].'/index.htm')) {
                return ( $_SESSION['authgfx'] );
            } elseif ( file_exists('include/designs/ilchClan/index.htm')) {
                return ( 'ilchClan' );
            } else {
                $od = opendir('include/designs');
                while ( $f = readdir($od) ) {
                    if ( file_exists('include/designs/'.$f.'/index.htm')) {
                        return ( $f );
                        break;
                    }
                }
                closedir($od);
            }
        } elseif ($domain_search == 'mobil.eureseite.de') {
               return ('Design2');
        }
    }


    Damit spart man sich das doppelte ändern und hat die Funktion das design über den Adminbereich auswählen zu können immer noch.

    Ich hoffe es ist jetzt verständlich.
    Meine Postings repräsentieren meine Meinung wenn nicht anders gekennzeichnet.
    MFG Rock@wulf
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beiträge
    258
    Beitragswertungen
    33 Beitragspunkte
    @Lenzen

    Da muß ich dir leider wiedersprechen, Responsive kann man sehr wohl anpassen. Hier ist wiederum nur die herangehensweise entscheidend.

    Der Hauptbestandteil der CSS sind erstmal nur sogenannte Grundformatierungen, die eigentlich auf jedem Endgerät gleich bleiben.

    Dann gehts weiter mit der Struktur, hier sind die Pro´s noch gespaltener Meinung, Mobile > Desktop oder Desktop > Mobile. Ich Persönlich denke das die Mobile first die bessere Variante ist, da man sich da auf das wesentliche beschränkt.
    Dann noch Module über Viewports laden und schon hast du ein vll aufwendiges Desktop Theme und ein schlankes Mobile Design.

    Aber wie vorher schon gesagt, für wap fahige geräte wo man eh noch über eine mobile.subdomain arbeitet ist das ne schöne lösung. Gibt ja schließlich immer noch den ein oder anderen Smartphone gegner zwinker
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    [Smoky] Mitglied
    Registriert seit
    07.04.2010
    Beiträge
    72
    Beitragswertungen
    2 Beitragspunkte
    ZitatZitat geschrieben von Wizzard26

    @Lenzen

    Da muß ich dir leider wiedersprechen, Responsive kann man sehr wohl anpassen. Hier ist wiederum nur die herangehensweise entscheidend.

    Der Hauptbestandteil der CSS sind erstmal nur sogenannte Grundformatierungen, die eigentlich auf jedem Endgerät gleich bleiben.

    Dann gehts weiter mit der Struktur, hier sind die Pro´s noch gespaltener Meinung, Mobile > Desktop oder Desktop > Mobile. Ich Persönlich denke das die Mobile first die bessere Variante ist, da man sich da auf das wesentliche beschränkt.
    Dann noch Module über Viewports laden und schon hast du ein vll aufwendiges Desktop Theme und ein schlankes Mobile Design.

    Aber wie vorher schon gesagt, für wap fahige geräte wo man eh noch über eine mobile.subdomain arbeitet ist das ne schöne lösung. Gibt ja schließlich immer noch den ein oder anderen Smartphone gegner zwinker


    wizz da muß ich dir wiedersprechen viewports sind nicht die beste lösung zwar die schnellste aber nicht die beste

    ich würde eher so arbeiten
    <link rel="stylesheet" type="text/css" href="include/designs/bla/style.css" media="only screen and (min-width: 480px) and (max-width: 767px)">

    @media only screen and (min-width: 480px) and (max-width: 767px) {inhalt}
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    tildertwe Mitglied
    Registriert seit
    27.10.2013
    Beiträge
    1
    Beitragswertungen
    1 Beitragspunkte
    Meine Meinung ist, das man überhaupt keine Mobile Version der Webseite braucht, weil schon viele Handy eine normale Webseite anzeigen können, z.B. Iphone. Auch apple.de oder apple.com hat keine Mobile Version der Webseite...
    1 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    Revolution Hall Of Fame
    Registriert seit
    14.08.2006
    Beiträge
    1.688
    Beitragswertungen
    108 Beitragspunkte
    Wenn man bereits beim Designen dran denkt heißt das Zauberwort eh Responsive Webdesign

    Wie bereits mehrfach hier beschreiben, sonst ist ein Mobile Theme nur eine Notlösung


    Zuletzt modifiziert von Revolution am 27.10.2013 - 20:20:42
    Kreativ, modern, Conversion und Usability optimiert
    individuelles Webdesign für ein optimales Erscheinungsbild
    404studios
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    CeeJay Hall Of Fame
    Registriert seit
    23.03.2007
    Beiträge
    2.419
    Beitragswertungen
    18 Beitragspunkte
    ZitatZitat geschrieben von Revolution
    Wenn man bereits beim Designen dran denkt heißt das Zauberwort eh Responsive Webdesign

    Wie bereits mehrfach hier beschreiben, sonst ist ein Mobile Theme nur eine Notlösung


    Zuletzt modifiziert von Revolution am 27.10.2013 - 20:20:42


    Ganz genau! Mittlerweile gibt es auch sehr gute Tutorials zum responsiven Webdesign lächeln

    Das hier hat mir z.B. gut geholfen:

    www.webmasterpro.de/coding/article/css-responsive-webdesign-media-queries-fuer-iphone-ipad-und-smartphones.html
    Suche neuen Clan, um mich als Programmierer, Forum-Moderator und ähnliche Aufgaben zu engagieren. Langjährige Erfahrung mit Clans vorhanden. Bei Interesse per PN anschreiben (bitte keine Clans unter 3
    0 Mitglieder finden den Beitrag gut.
  15. #15
    User Pic
    mabu78 Mitglied
    Registriert seit
    19.07.2013
    Beiträge
    38
    Beitragswertungen
    4 Beitragspunkte
    Ich kann jedem der ernsthaft und rentabel arbeiten möchte, dieses Buch empfehlen.
    www.amazon.de/Mobile-Usability-iPhone-Android-Business/dp/3826695038/ref=sr_1_2

    Welches zeigt, dass "Responsive Webdesign" nicht wirklich DER Trend ist, und es auch nie sein wird!
    selten diese Leere!
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten