4images Forum & Community

4images Modifications / Modifikationen => Mods & Plugins (Requests & Discussions) => Topic started by: Jan-Lukas on December 06, 2011, 04:34:05 PM

Title: Style für Mobiltelefone
Post by: Jan-Lukas on December 06, 2011, 04:34:05 PM
Gibt es schon einen Style das auch für Mobiltelefone geeignet ist  :?:
Title: Re: Style für Mobiltelefone
Post by: zimba on December 07, 2011, 12:20:04 AM
Jab so ein Template hätte ich auch gerne mit einer weiche die erkennt ob jemand mit dem Mobiltelefon kommt und dann das entsprechende Template nutzt.
Wäre der Hammer (:
Title: Re: Style für Mobiltelefone
Post by: mawenzi on December 07, 2011, 06:09:53 PM
zunächst :
... das Standard-Template von 4images ohne "Schnick und Schnack" wird auf Smartphones gut dagestellt ...

daraus lässt sich folgendes entwickeln :
... eine 4images-Parallel-Installation unterhalb der Root der eigentlichen 4images-Galerie installieren ...
... diese Installation auf die DB der eigentlichen Galerie zugreifen lassen ... config.php ... siehe dazu hier im Forum ...
... im ACP der Unterinstallation das Standard-Template wählen und die Allgemeinen-Einstellungen auf Smartphones abstimmen ...
... m.E. sollte man in der Unterinstallation keine zusätzlichen MOD's installieren, um die Galerie schnell zu halten ...
... mit dem Aufruf der index.php in der Unterinstallation wird dann eine sparsamme, flotte Seite für Smartphones mit den Bildern der Haupgalerie angezeigt ...
... nun braucht man am Anfang der header.html der Hauptgalerie nur noch die "Smartphone-Browser-Weiche" einbauen ...
... und dann wird bei Aufruf deiner Seite via Smartphone die "Sparvariante" deiner Galerie angezeigt ...
... für das iPhone habe ich das bereits erfolgreich getestet und dabei die folgende "Smartphone-Browser-Weiche" verwendet ...


<?php
//--- Browserweiche für iPhone-Webseite ---
 if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone'))
    {
    echo '<script type="text/javascript">';
    echo 'window.location.href = "http://www.deine_seite.de/iphone/index.php";';
    echo '</script>';
    }
?>


... mit dieser "iPhone-Browser-Weiche" muss die 4images-Parallel-Installation dann im Ordner /iphone/ der Root liegen ...
... solltest du nun Anpassungen nur für die iPhone-Website vornehmen wollen, so musst du das eben in der Parallel-Installation vornehmen ...
... die Anpassungen können das Template betreffen oder eben auch zusätzliche MOD's umfassen ...
... der 'HTTP_USER_AGENT' der Browser der anderen Smartphone-OS ( Android, ... ) ließe sich dann natürlich noch in das Script integieren ...

das wär's eigentlich ... ;)
Title: Re: Style für Mobiltelefone
Post by: Jan-Lukas on December 07, 2011, 07:41:24 PM
das hört sich gut an, werde ich dann im Urlaub testen.
Also eine zweite Galerie die auf die erste zugreift.
Glaube das mit der IPhone Weiche macht auch Sinn, wird ja wohl meist verbreitet sein.
Hoffe ich kann das mit meinem Nokia dann testen, oder lasse mir ein Iphone schenken, oder am besten ein iPad  :mrgreen:

Danke
Title: Re: Style für Mobiltelefone
Post by: mawenzi on December 07, 2011, 07:59:59 PM
... die Smartphone-Browser-Weiche ließe sich wie folgt erweitern, dein Nokia scheint dann auch dabei zu sein ...


if (strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') ||
         strstr($_SERVER['HTTP_USER_AGENT'], 'Android') ||
         strstr($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') ||
         strstr($_SERVER['HTTP_USER_AGENT'], 'OperaMobi') ||
         strstr($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') ||
         strstr($_SERVER['HTTP_USER_AGENT'], 'IEMobile') ||
         strstr($_SERVER['HTTP_USER_AGENT'], 'Jasmine') ||
         strstr($_SERVER['HTTP_USER_AGENT'], 'Fennec') ||
         strstr($_SERVER['HTTP_USER_AGENT'], 'Blazer') ||
         strstr($_SERVER['HTTP_USER_AGENT'], 'Minimo') ||
         strstr($_SERVER['HTTP_USER_AGENT'], 'MOT-') ||
         strstr($_SERVER['HTTP_USER_AGENT'], 'Nokia') ||
         strstr($_SERVER['HTTP_USER_AGENT'], 'SAMSUNG') ||
         strstr($_SERVER['HTTP_USER_AGENT'], 'Polaris') ||
         strstr($_SERVER['HTTP_USER_AGENT'], 'LG-'))
    {
Title: Re: Style für Mobiltelefone
Post by: Sunny C. on December 07, 2011, 10:54:01 PM
Wer seine mobile Website noch genauer an die mobilen Geräte anpassen möchte und daher mehr Informationen über die jeweiligen Geräte braucht, kann auf WURFL (http://wurfl.sourceforge.net/) zurückgreifen.

Quote
WURFL steht für Wireless Universal Resource FiLe und ist ein Open-Source-Projekt. Bei WURFL handelt es sich um frei verfügbare XML-Datei zum Herunterladen. Diese Datei enthält für über 400 Mobilgeräte Informationen zur Auflösung der Displays sowie zu den unterstützten Bildformaten.

Darüber hinaus lassen sich über die XML-Datei Informationen zum Dateiformat der Klingeltöne bis hin zur Auflösung von Hintergrundbildern für das Display abfragen. Die bereitgestellten Informationen variieren von Modell zu Modell und geben teils eine sehr genaue Funktionsübersicht der Geräte wieder.

Die XML-Datei lässt sich mit einer beliebigen Programmiersprache, beispielsweise mit PHP, auslesen. So lassen sich mobile Websites ganz konkret auf einzelne Geräte abstimmen. Vor allem, wenn man spezielle Dienste wie den Download von Klingeltönen oder Hintergrundbildern anbietet, kann WURFL helfen, dem Besucher der Website direkt das richtige Format anzubieten.

Weitere Info (http://www.drweb.de/magazin/webinhalte-fur-smartphones-und-pocket-pcs-aufbereiten/)
Title: Re: Style für Mobiltelefone
Post by: Hagen-Roderich on December 09, 2011, 09:26:54 PM
Hier noch ein Links dazu:
http://www.golem.de/1106/84592.html -> http://www.springbox.com/mobilizer/
Title: Re: Style für Mobiltelefone
Post by: Rembrandt on December 10, 2011, 07:04:52 AM
Hi!

Einige Fragen wären noch zu klären, welche b.z.w. wie Bilder angezeigt werden sollen.
Ein 800x600px  oder noch größeres Bild kommt glaube ich nicht in Frage, obwohl die Phones das Bild runter rechnen können wäre das zum einen verschenkter Traffic und zum anderen die Ladezeiten zu hoch, also was machen?
Im "data" Ordner neue Ordner anlegen "mobile media" u. "mobile thumbs", und gleich im Voraus wenn ein Bild hochgeladen wird Duplikate dorthin generieren, oder  "on the fly" runter rechnen und anzeigen lassen.
In beiden Fällen würde Traffic eingespart werden, bei der Duplikat Version wäre die Lade Zeit wahrscheinlich am schnellsten, programmier technisch denke ich mal schwerer umzusetzen als "on the fly".

mfg Andi
Title: Re: Style für Mobiltelefone
Post by: Sunny C. on December 10, 2011, 12:13:20 PM
Ich würde prinzipiell on-the-fly sagen.
Denn warum weitere Bilder auf dem Server generieren?
Viele haben auch nur Webspace, wodurch dann auch Speicher flöten geht.
Oder eventuell eine Kombination die hinterher eingestellt werden kann, welche Variante man nutzen möchte.
Title: Re: Style für Mobiltelefone
Post by: Rembrandt on December 10, 2011, 04:06:17 PM
hm.. ein Bild mit 400px seitenlänge hat in bester jpg Qualität rund ~100kb.
Wenn man 1GB opfert kann man 10000 Bilder Generieren.

Ich habe halt nur bedenken wenn jemand etwas größere Bilder am Server hat und der Server hohe Zugriffe hat, das bei dem ständigen "on the fly" die Serverlast ordentlich steigt.

mfg Andi
Title: Re: Style für Mobiltelefone
Post by: Jan-Lukas on December 10, 2011, 04:51:28 PM
400 pix müssten ja auch nicht sein, ich wäre für Duplikate, könnte man nicht beim hoch laden,die Bilder direkt in der 2ten Galerie z.B. mit 200pix erstellen lassen ?
Im Admin einstellbar, welche Größe, einige möchten evtl. doch 400pix haben
Title: Re: Style für Mobiltelefone
Post by: Rembrandt on December 10, 2011, 06:39:30 PM
jetzt habe ich eine liste gefunden, die auflösungen sind höher als ich gedacht habe.  :|
Quelle (http://www.wiescho.de/smartphone-displaauflosungen-im-uberblick/)

Wenn wir noch eine Generation der Smartphones abwarten wird sich die Auflösung relativieren und wir können uns das runter Skalieren ersparen. :)
Title: Re: Style für Mobiltelefone
Post by: Sunny C. on December 11, 2011, 02:03:08 AM
Ich habe halt nur bedenken wenn jemand etwas größere Bilder am Server hat und der Server hohe Zugriffe hat, das bei dem ständigen "on the fly" die Serverlast ordentlich steigt.
Wäre dann die eigene Auswahl ob on-the-fly oder duplikate da nicht die beste Variante? Muss dann jeder für sich entscheiden.

Wenn wir noch eine Generation der Smartphones abwarten wird sich die Auflösung relativieren und wir können uns das runter Skalieren ersparen. :)
Ob die Handys jetzt NOCH größer werden? Wie groß werden dann Tablets und wie groß werden dann normale Rechner bzw. die Bildschirme?
Gut, die Monitore und Fernseher haben eine unbegrenzte Größe, aber ich denke die Handys werden nicht viel mehr größer als das Samsung Galaxy 2. Mir reicht mein iPhone4S und iPad2. Die Größen sind optimal, das Galaxy 2 ist auch schon zu gruß wie ich finde.

Darum geht es ja nicht. Zwei varianten anzubieten wäre da die beste Variante. Oder auch 3 Varianten. Original, Skalierung und Duplikate
Title: Re: Style für Mobiltelefone
Post by: zimba on December 12, 2011, 02:29:11 AM
Hat wer die Zeit das Umzusetzen?
Was würde das kosten?
Mir fehlt leider die Zeit...
Title: Re: Style für Mobiltelefone
Post by: Rembrandt on December 12, 2011, 05:08:58 PM
Hat wer die Zeit das Umzusetzen?
naja ich habe mich mal an die Arbeit gemacht, aber das problem ist die Galerie ansich.
Das heisst die komplette Galerie gehört erst einmal Tabellenlos gemacht, und alle Styles konsequent mittels CSS realisiert.
Erst dann kann man relativ einfach nur mittels CSS eine Mobile Version generieren.
 
Mir fehlt leider die Zeit...
*hust* das höre ich ständig...  :twisted:

mfg Andi
Title: Re: Style für Mobiltelefone
Post by: mawenzi on December 12, 2011, 07:30:05 PM
@ alle Mobile-Style-Interessierten ...

... ich möchte nochmals darauf aufmerksam machen, dass meine oben beschriebene Variante (Parallel-Installation) schnell zu installieren ist ...
... die Browserweiche funktioniert ... mobile_Safari und _mobile_Opera ... konnte ich selber testen ... ( Nokia leider noch nicht ... ) ...
... ich habe für meine Website als "mobile Version" 4images ohne MOD's ( fast ...  :wink: ) und das Standard-Template mit 640px-Breite gewählt ...
... und so wie aus Andis Liste zu sehen ... ist das optimal für das iPhone ... ( man sollte sich immer am Klassenprimus orientieren ...  :wink: ) ...
... ich verwende in meiner mobilen Version die "Medium-Bilder" (im 800px-Format) und scalliere sie nur per Java-Script auf 440px herunter ...
... [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen : http://www.4homepages.de/forum/index.php?topic=15680.0 ...
... mit dem iPhone kann ich so die Bilder zoomen bei bester Qualität und ich brauche die vorh. Bilder auch nicht noch mal als 4.Version abzulegen ...
... mit einem Web-Kit für iPhone-Styles habe ich auch ein Template erstellt, doch ist das 'ne Menge Arbeit und das Ergebnis sieht wie Einheitsbrei aus ...
... also bin ich wieder beim 4images-Standard-Template gelandet ...
... es ist bekannt, dass meine Website überladen ist mit Modifikationen, die ihren Ladetribut fordern ... doch bleibe ich dabei ...  :wink: ...
... den abgespeckten Inhalt, in rasender Geschwindigkeit, halt nur mit Bildern kann man sich dann in der mobilen Version ansehen ...
... hier mal für euch zum Testen am PC die Gegenüberstellung der beiden Versionen der Website ... auf mobilen OS wird natürlich nur die mobile Variante gezeigt ...
... Die originale Index-Seite : hier (http://klick.kl.funpic.de)
... Die mobile Index-Seite : hier (http://klick.kl.funpic.de/iphone/)
... Eine originale Kategorie-Seite : hier (http://klick.kl.funpic.de/categories.php?cat_id=19)
... Die gleiche mobile Kategorie-Seite : hier (http://klick.kl.funpic.de/iphone/categories.php?cat_id=19)
... Eine originale Detail-Seite : hier (http://klick.kl.funpic.de/details.php?image_id=20)
... Die gleiche mobile Detail-Seite : hier (http://klick.kl.funpic.de/iphone/details.php?image_id=20)
... und noch mal als Hinweis ... beide Versionen greifen auf die selbe DB zu und die Installation der mobilen Version ist in meinem vorherigen Beitrag beschrieben ...
Title: Re: Style für Mobiltelefone
Post by: Jan-Lukas on December 12, 2011, 08:02:49 PM
Mir gefällt das so, und wenn ich mein update + Forum beendet habe, werde ich das wohl auch so umsetzen.
wird also im Januar im Urlaub sein
Title: Re: Style für Mobiltelefone
Post by: ucladidas on February 27, 2012, 12:56:25 PM
How do I create a "parallel" installation within my image gallery?  For instance, if my original gallery is:

www.mysite.com/photos

But I want the second installation to be:

www.mysite.com/photos/mobile

I want the 'mobile' site to use the same images and db as the 'photos' site.  How do I do this?

Thanks for any help!
Title: Re: Style für Mobiltelefone
Post by: webpit on June 28, 2012, 05:07:59 AM
Helo there,
I've already tested both main version and mobile version,.. and so far is good.. just follow step by step Mawenzi suggest... excellent job there Mr Mawenzi.. :thumbup:

pls cek my site .. main version at http://galeri.wayang.pitoyo.com .. mobile version http://m.galeri.wayang.pitoyo.com .. I install also auto-switch.. and its good.. :) .. It is in Indonesian but you can still enjoy the image...

Some tips during my experience to do the installation :


hope will help.. :)
Title: Re: Style für Mobiltelefone
Post by: webpit on July 04, 2012, 05:46:03 AM
..one more thing I have to tell is about the viewport meta tag...
During I did some mobile view test, I found there some problem in width visualization in some mobile browser.. then I find a great article about using viewport meta tag which can improve web appearance on mobile device .. pls follow link http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html ..

technically I put some additional viewport meta tag on header.html of the template.. there will be two viewport meta tag to declare,.. one is at the top to define the user mobile device width using <meta name = "viewport" content = "width = device-width"> ... and two after <html> tag you still have to declare viewport meta tag again to force the css width in best look at mobile... usually using width=320 .. not too big not too small..

so, there are no more aesthetic problem between different mobile browser then.. :)
Title: Re: Style für Mobiltelefone
Post by: MrAndrew on April 05, 2013, 02:56:21 PM
Hello! I`ve a question...

if i install a second gallery to the http://www.deine_seite.de/iphone/, how i will show photos from first (http://www.deine_seite.de/data/...)? How to do this?

I can`t understand how to do next:

Quote
parallel 4image installation, it is better really parallel,.. which mean if you install your main in www.mysite.com/4image .. then you do the same install under www.mysite.com/4imagemobile.. site by site.. not under it.. so it is important for the fisrt main installation better not to install under the root site. .. You dont have to copy 'data' folder.. because came from the same db, and you take the data from main folder as you redirect it at constant.php

How to install?
What parameters during install?
What to do next?
Which files replace after?

Thanks!
Title: Re: Style für Mobiltelefone
Post by: Jan-Lukas on September 12, 2013, 12:22:08 AM
Keine Ahnung warum ich das nicht weiter verfolgt habe  :|
OK, habe es jetzt eingebaut, klappt mit der Iphone Weiche auch bestens.
Nur da ich ja nicht alle Bilder in die parallel Seite schieben möchte, bräuchte ich noch eine Idee wie ich die anzeigen lassen kann.
LG Harald
Title: Re: Style für Mobiltelefone
Post by: Jan-Lukas on September 20, 2013, 07:16:16 PM
Sitze hier in Sardinien, und habe vergessen die Weiche wieder auszubauen 😳
Nun sehe ich wenigstens was andere User mit ihrem Handy sehen **nichts*** 😣
Jedenfalls keine Bilder
Lg
Harald