Suche

[pikar]

Hi @ all,

beschäftige mich grad damit wie ich meine Website auch für Handy und co zugänglich machen kann.

Im Internet gibt es ja Dienste die die vorahnenden Websites super mobil darstellen, Nachteil kostenpflichtig und Werbung...

hat von euch jemand schon so was erstellt oder gemacht? gibt es einen Generator dafür?

Möchte ja bestimmte Modulinhalte wieder ausgeben...

und was muss ich in die Website einbauen damit ich auf den Mobilen Inhalt weiter geleitet werde? also welchen Code der erkennt das es sich um ein mobiles gerät handelt

wer kann mir da weiter helfen bzw. wer hat Erfahrung darin?

[Webfan]

Hallo pikar,
ich verwende das hier:
http://code.google.com/p/php-mobile-detect/wiki/Mobile_Detect
mfg

[pikar]

Hallo,

danke für dein Antwort. soviel ich sehen kann ist das eine Möglichkeit, wie die Website erkennt das es sich um ein Mobiles gerät handelt,


wie aber gestellte ich meine Website um so das mobiler Content angezeigt wird?   Also das die Seiten der Module so ausgegeben werden das sie auf einen mobilen gerät gut angezeigt werden können?

Wie bist du bei dem Code einbau vorgegangen?

[Webfan]

Moin,

wie aber gestellte ich meine Website um so das mobiler Content angezeigt wird?   Also das die Seiten der Module so ausgegeben werden das sie auf einen mobilen gerät gut angezeigt werden können?

Seiten für mobilen Content sollten möglichst "kompakt" daherkommen, PragmaMx bietet diese Option ("alternativer Views") von Haus aus nicht, da mußt Du selber nachrüsten!

Wie bist du bei dem Code einbau vorgegangen?

Es wird normalerweise empfohlen fü mobilen Content und "normalen" Content jeweils unterschiedliche Links anzubieten, so daß der Benutzer zwischen den Ansichten manuell switchen kann.
Mein derzeitiger Ansatz das Script zu verwenden ist also nicht unbedingt der optimalste bzw. empfehlenswert, eher bisher eine "quick and dirty" Lösung:
Ungefähr so in footer.php:

Code Auswählen Erweitern


if( $GLOBALS['isMobileClient']  == TRUE)
{
//echo .... hier kleines Navigationsmenü...
echo '</body>
</html>';
die();
}

Es werden dann also für mobile Endgeräte die Navigationsblöcke usw. ausgeblendet und es wird nur der eigentliche Content der Seite(nmitte) angezeigt. Kannst Du testen unter www.webfan.de


mfg

[pikar]

ok gut, hab ich getestet, ja ist doch ein guter Anfang..

so und wie hast du das hier und wo eingebaut?

http://code.google.com/p/php-mobile-detect/wiki/Mobile_Detect

[pikar]

Ok habs schon hinbekommen,

aber wie lasse ich dann die Schrift ein bisschen größer erscheinen in der Anzeige?

[cihan]

Hallo 
Vor langer Zeit wollte ich auch eine mobile Version haben, nur die vorhandenen und meist kostenpflichtige Dienste wollte ich nicht... Zu meinem Glück fand ich sowas: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ .... habe soweit meine Seite alles angepasst.... Alles hat super funktioniert... Auch das Forum passt sich sehr schön an, musste aber am Forum-Template selber vieles ändern... Ich habe zwei Stufen drin, für kleine und etwas große Handy-Bildschirme... Achja, mir war wichtig, keine zusätzliche Seite zu machen... Den Effekt auf einem kleine Bildschirm (z.B. ein Smartphone) kann man testen, indem man einfach den Browser-Bildschirm am Computer kleiner macht... Das ganze passt sich an die neue Auflösung des Bildschirms. Das ist für mich die beste Lösung... Wahrscheinlich kann man das ganze noch viel besser umsetzen, aber mir hat das erstmal gereicht und jetzt könnte ich mich eh nicht mehr damit beschäftigen.

Viele Grüße

[gerdc]

Hallo @pikar, @webfan, @cihan u. a. Mobile-pMx-Freunde.

Zunächst hat @webfan Recht:
Bei Mobilgeräten, den Content durch unterschiedliche Links anzubieten, ist schon deshalb korrekt, weil die (meisten) Smartphones bzw. Tablets Touchscreens besitzen.
Dann sollten die unterschiedlichen Screengrößen der Mobilgeräte möglichst komplett abgedeckt werden. Und genau diese Forderung bereitete mir ziemliche Kopfzerbrechen, bis ich auf JQuery Mobile in diesem Artikel:
http://staticfloat.com/javascript/mobile-rss-reader-app-mit-jquery-mobile-bauen/">
aufmerksam wurde.
JQuery Mobile http://jquerymobile.com/ geht von einem 100%-Body-Sreen aus, der von allen Mobilgeräten (auch 100%) abgebildet wird.

Wie erhalte ich einen 100% pMx-Content?

1. Die Druckvorschau des pMx-Content ist 100%; also habe ich die print.css von pragmaMx von @media="print" auf @media="screen" gesetzt und auf mobile.css umkopiert.
2. Diese mobile.css ist dann für die Ausgabe auf das Mobil-Gerät (statt der style.css mit der print.css) zuständig.
Und das geht bestens mit $_GET[]:
Suche in der header.php:

Code Auswählen Erweitern

<link rel="stylesheet" href="<?php echo $stylesheet ?>" type="text/css" />
und ersetze diese Zeile durch:

Code Auswählen Erweitern

<?php
/**
 * Meta- u. Linktags fuer jQuery-Mobile(-Android)
 */ 
if (isset($_GET['ma']) && $_GET['ma'] == 'mobile_ausgabe')
{ ?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- meta für jQuery Mobile -->
<link rel="stylesheet" href="<?php echo MX_THEME_DIR . '/style/mobile.css' ?>" type="text/css" />
<?php } else { ?>
<link rel="stylesheet" href="<?php echo $stylesheet ?>" type="text/css" />
<?php }
?>
Bis hierin die theoretischen Grund-Überlegungen.
Und die Praxis:
Zunächst mußte ich mich in jQuery-Mobile einarbeiten (war nicht leicht). Aber (nach vielen negativen Überraschungen) stand am Ende das (für mich zufrieden stellende) Pragma-Mx Modul (1.12.3) 'DeSpAMobile' http://www.warblow.de/DeSpAMobile.html.
Die Frage nach der Größe der Schrift ergibt sich von selbst, denn der Mobil-User stellt die Größe selbst ein.
Mein Modul ist sehr speziell auf das Theme meiner Webseite zugeschnitten und daher kaum für andere Webseiten zu gebrauchen;
das betrifft insbesondere die mobile.css.


Mit freundlichen Grüßen!
gerdc


Edit: Kann mein vorheriger Beitrag Nr.7 bitte mal vom Moderator gelöscht werden. Er wurde versehentlich gesendet.
[edit:TerraProject] Beitrag wurde gelöscht[/edit]

[pikar]

Hi

danke für deinen Beitrag, ist echt gut,

aber wenn ich das in den header einbaue, wie geht es dann weiter?

wie leitet der Browser dann auf eine mobile seite weiter die ich erstellt habe z.b. jqerymobile?

was oder wo für ist dieser Eintrag?

if (isset($_GET['ma']) && $_GET['ma'] == 'mobile_ausgabe')

was muss ich da noch alles für Datei anlegen oder erstellen?  wo leitet diese abfrage hin?

[gerdc]

Hallo @picar,

ok, die vielen Fragen habe ich erwartet.
Doch soviel sei noch gesagt:

Sei
http://www.my_eine_Seite.de/modules.php?name=Content&pid=191
der normale (gewohnte) Ausgabelink, dann wird die Content-Seite sowohl vom Mobile- als auch Computer-Browser wie gewohnt angezeigt.

Durch eine Anhängung von &ma=mobile_ausgabe, also
http://www.my_eine_Seite.de/modules.php?name=Content&pid=191&ma=mobile_ansicht (im php-Script: & statt &)
zeigen dann beide Browser die von der mobile.css geforderte Mobil-Ansicht an.

Doch vorher muss folgendes gemacht werden:
Damit der Browser weiss, was er anzeigen soll (normale- oder Mobile-Ansicht), muss in dem php-Ausgabe-Script des betr. Moduls die Ausgabestelle (suchen!) umprogrammiert werden:

Code Auswählen Erweitern

if (isset($_GET['ma']) && $_GET['ma'] == 'mobile_ausgabe') {
// dummy, die Ausgabe wird über die mobile.css (die die Mobil-Ansicht beinhaltet) geleitet [siehe header-php]
}else{
// Ausgabe über die style.css, also den Original-Ausgabecode belassen
}

oder (ist äquivalent zu oben):

Code Auswählen Erweitern

if (!isset($_GET['ma']) || $_GET['ma'] != 'mobile_ausgabe') {
// Ausgabe über die style.css, also den Original-Ausgabecode belassen
}else{
// dummy, die Ausgabe wird über die mobile.css (die die Mobil-Ansicht beinhaltet) geleitet [siehe header-php]
}

Diese Änderungen (im News- bzw im Content-Modul) habe ich vermieden, indem ich mein Modul 'DeSpAMobile' schrieb.

Und jetzt ein Beispiel mit $_GET[] anschaulich:
1. Klicke auf diesen Link: http://www.warblow.de/modules.php?name=Content&pid=191 ,
2. Füge nach dem Erscheinen der normalen Contenseite oben im Browser &ma=mobile_android an. [das ist meine $_Get[]-Anhängung]
3. Und klicke erneut (diesmal im Browser): Viola: die (unfrisierte) Mobile Seite erscheint.

So, alles Weitere mache bitte selbst, auch wenn du probieren mußt -das ist normal (und legitim)-!

Mit freundlichen Grüßen!

@gerdc

[gerdc]

Hallo,
in Bezugnahme auf meinen Beitrag Nr.7 dieses Threads stelle ich die mobile.css meines Themes im Anhang als Download-Textdatei  (*.css ist explizit nicht vorgesehen) zur Ansicht zur Verfügung.
Aber Achtung:
Diese mobile.css ist nur ein Beispiel, wie ein Content-view von pragma-Mx-Inhalten 100% für jQuery Mobile dargestellt werden kann, denn alles ist abhängig vom jeweiligen Theme (hier: ein Yaml-Theme) und dessen Stylesheets.
Dennoch, die Vorgehensweise ist zu sehen und als css-Beispiel für andere Themes durch entsprechenden Änderungen brauchbar.

ciao
@gerdc