Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

Mozilo Mobile

Begonnen von HPdesigner, 16. Februar 2012, 21:28:00

« vorheriges - nächstes »

HPdesigner

Ich weiß nicht, ob sowas mal angedacht sein wird, aber ich fänds cool, wenns noch so eine Art 2. Frontend gäbe, welches man zB für mobile devices stylen könnte. Müsste ja nur ein neues Template mit eigenem CSS sein, welches aber auf die gleichen Inhalte zugreift.
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

wasp

#1
Interessantes (aber auch komplexes) Thema. Habe neulich mal ein einfaches
Plugin auf Basis "HTTP User Agent" begonnen, welches z.B. iPxd und -phones
"erkennt" und daraufhin ein alternatives Stylesheet verwendet. Klappt.
Aber: Andriod,etc. - Ist ne unendliche Geschichte ... ruht erstmal.

HPdesigner

#2
Könnte man es nicht eleganterweise so lösen, wie es das W3 Consortium auf ihrer Seite gelöst hat, indem einfach die Seitebreite ausgelesen wird und unter einem bestimmten Minimum einfach das Stylesheet gewechselt wird? Aber dann kann man kein alternatives Template bauen, sondern nur das bestehende verändern...
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

wasp

#3
Bestimmt...
Dann mach es - Die Mittel hast Du an der Hand !!! (Demo-Plugin)
( Hat jeder CSS3 etc. ) ???  :)

HPdesigner

#4
Ok, sobald ich Zeit dafür hab, werd ich mich mal ransetzen.
Ist das CSS3?
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

m4ddy

#5
Hi,

ich hab mich vor einiger Zeit schonmal damit beschäftigt und per jscript einfach alternaitve templategrafiken und CSS für die Pfade der templates verwendet.

das iss aber echt ein Haufen Arbeit, je nach template  :?

Aber wie wasp schon geschrieben hat, wäre auch ne sehr elegante aber komplexe Methode das Device schon on Anfang an zu erkennen und das Tempalte entsprechend zu manipulieren.

http://wurfl.sourceforge.net/ wäre da zum Beipsiel eine ganz nette Möglickeit an die unterschiedlichen Gerätedaten zu kommen.

Unter http://www.drweb.de/magazin/webinhalte-fur-smartphones-und-pocket-pcs-aufbereiten/ gibt es einen netten Artikel mit Codebeispielen dazu, zum einlesen.

das Ganze gelich im CMS selbst zu berücksichtigen, fände ich jetzt ein wenig viel Aufwand, dafür dass das vom Webmaster ganz gut selbst bewerkstelligt werden kann.

Ich hoffe das hilft dir weiter.  :)
There are 10 sorts of people. Those who understand binary and those who don\'t.

laborix

#6
Zitat von: "wasp"... ( Hat jeder CSS3 etc. ) ???  :)
Nur mal so als Ergänzung:

W3C |  Media Queries - W3C Candidate Recommendation 27 July 2010
http://www.w3.org/TR/css3-mediaqueries/

Diese Funktion wird zur Zeit von sehr vielen mobilen Geräten unterstützt und bietet eine reine CSS Lösung. Welche mobilen Geräte alle unterstützt werden, keine Ahnung.

HPdesigner

#7
Vielen Dank für eure Vorschläge / Ideen / Anregungen. Angenommen, man möchte wirklich ein 2. Frontend mit eigenem Template und CSS bauen, welches aber auf die gleichen Flatfiles zugreift, wie würde man das am sinnvollsten bzw. effektivsten bewerkstelligen?
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

djr

#8
@HPdesigner: Ich versteh nicht, warum Du immer noch "ein 2. Frontend mit eigenem Template und CSS bauen" willst, wenn es Dir (so der Betreff) um eine "Mobile"-Ansicht geht.

Ich finde den CSS-Ein-/Ansatz am sinnigsten:
Die wichtigsten "Media Queries" funktionieren auf den iP.d- und Android-Geräten und in aktuellen Desktop-Browsern.
Für den Anfang sollte dieser Beitrag aus dem iX reichen. Inspiration findest Du hier.

Tipps zur Vorgehensweise:
  • Auf altbekannte Weise ein "minimum.css" für "handheld" und "all" einbinden.
  • Anschließend via "Media Queries" (unter Nutzung des "only"-Workarounds) die CSS-Befehle für verschiedene Bildschirmgrößen einbinden.
    Die Theorie:
    Alte Browser bekommen zwar dann nur den Minimum-Style, mobile Nutzer müssen dafür aber weniger Daten laden.
    (Um auch alten Browsern MQ "beizubringen" gibt es Javascript-Lösungen)
  • ideale Menü-Platzierung: Ggf. das Menü zweimal einbinden und das, je nach Style, nicht benötigte ausblenden.
  • Bildgrößen beachten

Noch eine (ergänzende) Idee: mit dem i18n-Plugin arbeiten!
Folgendes sollte möglich sein (teilw. ungetestet):
  • Wechsel: Standard- / Mobile-Ansicht
    • angepasste CSS-Dateien laden
    • Texte als gekürzte Version für den "mobile"-Modus  
    • Bilder ja/nein
    • ...
  • ...

 :!: Lass uns von Deinem Ergebnis wissen.

HPdesigner

#9
Naja, 2. Frontend könnte halt über eine eigene URL erreichbar sein (oder kann man das noch anders bewerkstelligen?) und eigenes Template find ich an sich angenehmer, weil dann so Sachen wie "Ggf. das Menü zweimal einbinden und das, je nach Style, nicht benötigte ausblenden" entfallen. Andererseits ist nichtgebrauchte-Elemente-Ausblenden wahrscheinlich weniger aufwendig als 2.-Frontend-erstellen.

Aber vielen Dank für die Links und Tipps. Der CSS-Ansatz lag mir vor allem auch zwecks Aufwandreduzierung nahe.
Wenns ein Ergebnis gibt, werd ichs mal posten.
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

djr

#10
Zitat von: "HPdesigner"2. Frontend könnte halt über eine eigene URL erreichbar sein (oder kann man das noch anders bewerkstelligen?)
Schau mal genau hier (Auswahl der anzuzeigenden Sprache) in die i18n-Doku von azett:
Zitat von: "software.azett.com"Die anzuzeigende Sprache muß als Parameter "i18n" am URL übergeben werden. Beispiele:Die ausgewählte Sprache wird in der Browser-Session gespeichert, ...
Dies kannst Du wie folgt nutzen (ungetestet) :
  • erstelle die Sprachen "mobile" und "de"( = Standard)
  • Leite deine "mobile URL" auf die Adresse mit angehängtem i18n-Parameter "i18n=mobile"
  • innerhalb der template.html mit den i18n-Platzhaltern arbeiten.
    Im Grunde solltest Du dadurch beide Templates in eine template.html schreiben können:
    <!-- template 1 -->
    {i18n|mobile|<!-- das Template 1 -->}
    <!-- template 2 -->
    {i18n|de|<!-- das Template 2 -->}

HPdesigner

#11
Ok das ist echt nice! Vielen Dank für die Tipps! Ich hoffe ich komme bald dazu es umzusetzen. Werd, sobald es etwas Ansehnliches gibt, posten.
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

wasp

#12
"Nachwurf" / P.S. : Da hier ja wieder offenbar wieder mitgemachtund
mitgedacht wird,  :D

hier mal mein Basic-Ansatz/Schema für ein denkbares Plugin (...bereits existent aber...non-alpha ... bereits im produktiven Einsatz!) :
<?php
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad'))
{
  
//header('Location: http://yoursite.com/iphone'); //umleitung... oder
  
echo "Hallo iPod/iPad/iPhone!";
  
//exit();
} else {
echo 
"Kein iPod/iPhone/iPad!";
}
?>


hieraus folgt: Im Template dies als PLUGIN anstelle von der CSS-Sache einsetzen,
detecten ... statt Echo den Wert für die CSS-Zeile returnen - Fertig!

Einschränkungen: -info-
Vorteile : Serverseitige Selektion der CSS-Datei(en)
Nachteile : Selektion/PHP sonst unknown.

;)

P.P.S.: Klar USER AGENT kann Fake sein - Das soll aber hier kein Thema sein ...

HPdesigner

#13
In Kombination mit djr's Lösung könnte man also das device detektieren, auf die mobile URL und von dort auf die Adresse mit angehängtem i18n-Parameter leiten - bzw, kann ja einfach auch direkt weitergeleitet werden, aber so hat man auch parallel dazu eine Mobile URL!

Zitat von: "wasp"Klar USER AGENT kann Fake sein
Gibts denn Alternativen das Device zu detektieren?
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

polhem

#14
Hallo HPdesigner,
hier wird eine kombinierte Lösung aus USER AGENT und Nutzerabfrage vorgeschlagen: http://aktuell.de.selfhtml.org/artikel/css/mobile-endgeraete/. Der Beitrag ist nicht ganz neu, aber vermutlich immer noch verwendbar. Ich habe mir das Thema "mobile HP" auf meine persönliche Todo-Liste geschrieben (in 1-2 Jahren ...)
Wenn es schon eher ein Mozilo-Plugin gäbe, wäre das toll! Auf jeden Fall wäre es schade, wenn verschiedene Leute parallel das Gleiche entwickeln.
polhem