[TYPO3-german] TYPO3 + mobile Endgeräte

Wed Jul 4 21:56:55 CEST 2012

Hallo Andreas, 

Am 04.07.2012 um 15:58 schrieb Andreas Becker:

> Es scheint in der Tat so zu sein dass man wohl nur ueber das CSS wirklich etwas bewirken koennte. Dazu muessten die Bilder im RTE nicht nur ueber CSS einbindbar sein, sondern auch je nach media querie maximale screensize mit dem entsprechenden Bild beliefert werden.

das Laden von Bildern über CSS hat ein paar fundamentale Nachteile: 

- die Technik ist nicht semantisch, 
- sie ist nicht zugänglich (kein Alt-Tag)
- die Bilder sind nicht mehr über das DOM manipulierbar (keine Slideshows etc.)
- bei jedem geänderten Bild muss dafür gesorgt werden, dass das CSS nicht aus dem Browsercache geladen wird. 
- es funktioniert nicht mit Bildern aus fremden Quellen

Meines Erachtens muss eine praktiable Lösung folgendes berücksichtigen: 
1. die Bilder müssen über den <img>-Tag geladen werden, damit sie semantisch, zugänglich und über das DOM manipulierbar bleiben. 
2. die Lösung muss praktikabel sein, also mit überschaubarem Aufwand implementierbar - Kosten - Nutzen muss stimmen. 
3. sie muss nicht perfekt sein, nur besser als keine Lösung

Dabei muss beachtet werden, dass es nur ein paar Möglichkeiten gibt, die Screengröße beim ersten Aufruf (!)  zu bestimmen: 
- aus dem http-Header über eine gut bestückte serverseitige Device-Datenbank
- über ein JavaScript, welches anschließend den <img>-Tag manipuliert
- über ein JavaScript welches ein Cookie setzt, und zwar vor (!) dem Laden der Bilder durch den HTML-Parser. 
Über Media Queries kann man zwar indirekt die Device-Größe bestimmen, aber ich kenne keine Möglichkeit, diese Info an JavaScript oder eine PHP-Variable weiterzugeben bevor die Bilder geladen werden. 

Da bleiben unter dem Strich nur ein paar Möglichkeiten übrig: 

1. Serverseitige Filter über eine Datenbank mit Hunderten/Tausenden von Devices: 
Sencha.io: http://docs.sencha.io/0.3.3/index.html
WURFL: https://github.com/carsonmcdonald/ServerSideResponsiveImageExample#readme
und andere. 

2. JavaScript-Lösungen, welche den <img>-Tag manipulieren: 
noscript-Tag: zum Beispiel: http://www.monoliitti.com/images/
Cookies, zum Beispiel: http://blog.keithclark.co.uk/responsive-images-using-cookies/
und viele Varianten, zum Beispiel die TYPO3-Extension rtp_imgquery

3. JavaScript-Cookie-Lösungen mit serverseitigem Skript: 
die benötigen ein kleines JavaScript, welches ein Cookie setzt, ausserdem Änderungen in der htaccess-Datei und serverseitige Scripte, welche die Dateien abhängig vom Cookie runterrechnen. 
http://adaptive-images.com/
das könnte man wohl auch mit TYPO3 erreichen, z. B. über einen Hook, der das IMAGE-Objekt entsprechend erweitert. 

Bei den JavaScript-Lösungen in Punkt 2 gibt es immer das Problem einer Race-Condition: kommt das JavaScript zu spät, werden die Bilder zweimal geladen, einmal durch den HTML-Parser und einmal durch das JavaScript. Am Desktop kein Problem, am Smartphone ein Show-Stopper. Bei den Cookie-Lösungen in Punkt 2 gibt es auch eine Race-Condition, aber diese führt nicht zu doppeltem Laden, sondern nur dazu, dass die großen Bilder geladen werden (also so, als hätten wir gar nichts getan). Das kann aber nur beim ersten Aufruf einer Domain passieren, danach ist das Cookie auf jeden Fall gesetzt. Ein akzeptabler Nachteil, denke ich. 

Ausserdem bleibt in Fall 2 und 3 das Problem von deaktiviertem JavaScript. Das halte ich allerdings nicht für problematisch: Es werden auf jeden Fall die Bilder ausgeliefert, die im img-Tag enthalten sind. Das Ergebnis ist also das gleiche, als hätten wir gar nichts gemacht. Das ist für einen worst-case nicht wirklich schlecht. 

Gruß
Peter

> 
> Angenommen, man laedt die Bilder im RTE nicht mehr ueber TYPO3 sondern ueber Flickr. Flickr bietet im Grunde das was man benoetigt.
> 
> Man laedt ein Bild hoch im Original und es werden diverse Thumbnails produziert. 
> 
> Original
> 1024
> 500
> Sind hier bei die fuer den "mobilen" einsatz interessanten groessen.
> 
> Mittels SASS muesste es moeglich sein dass man die Bilder mit einer entsprechenden Variablen - der imagesize fuer die media queries versieht.
> 
> Wird nun ein Bild im RTE oder anderswo in TYPO3 eingefuegt, so zieht es sich dieses Bild entsprechend der media querie die fuer die Jeweilige screensize zustaendig ist als 1024 oder 500 bzw laedt das Bild von TYPO 3 wie sonst auch und reduziert das orginal auf die entsprechende Groesse.
> 
> OK man muesste die Bilder zweimal hochladen, dafuer koennte man es jedoch in TYPO3 zb in DAM bearbeiten und mit Captions etc versehen die dann auch beim Flickr Bild angezeigt werden. Die Kontrolle darueber ob das Flickr Bild mit dem auf TYPO3 uebereinstimmt liegt beim Editor. evtl koennte man ja eine extension erstellen die ein DAM Bild auch automatisch hoch auf flickr laedt (unbegrenzter Speicherplatz und auch quasi als Backup nicht schlecht) zudem wuerde Flickr als CDN fuer bilder die Bilder sicher schneller laden als wie wenn diese ueber TYPO3 direct kaemen. "Make the web faster" Pagespeed etc.
> 
> Wuerde die Flickr URL eines Bildes auch in TYPO3 gespeichert, so koennte man dieses Bild sicher auch dort entsprechend fuer den Content weiter aufarbeiten und mit Tags, Captions etc versehen, bzw dem editor die auswahllassen ob er die Informationen von Flickr oder die in DAM generierten nutzen will.
> 
> Somit haette man im Grunde zugriff auf diverse Image sizes die sich dann innerhalb der Media queries oder auch mit Javascript weiter in der Groesse tunen liesen.
> 
> Schaue ich mir ne Seite auf dem iPad an so sehe ich die meinbild-1024.jpg oder .png
> Drehe ich den Tab in Portrait so wird das Bild via CSS (media querie) angepasst. 
> 
> Sehe ich mir das ganze auf einem smartphone an wird meinbild-500.jpg oder .png geladen und ebenfalls ggf runterscaliert.
> 
> Clicke ich nun auf eines der Bilder so koennte einenAbfrage stattfinden welche Aufloesung ich sehen moechte. 1024 oder Original somit habe ich dann auch die Moeglichkeit ggf ein Bild nachzuladen und dann reinzuzoomen.
> 
> lade ich nun die Seite auf dem Desktop, so wird dasn Bild das in TYPO3 gespeichert wurde geladen und zuvor entsprechend durch TYPO3 bzw graphicsmagic aufbereitet. ZB maximal 1920x1080. 
> 
> Leider bietet der RTE oder auch andere Extensions sowie der fileadmin noch keine Moeglichkeit bilder von Flickr oder auch Picasa oder Cloud Storages einzubinden und zu verwalten.
> 
> Ist das ne idee zu ner Loesung?
> 
> Andi
> 
> 
> 
> 
> Sent from my iPad
> 
> On 4 ก.ค. 2555, at 19:48, conPassione gmbh <info at conpassione.ch> wrote:
> 
>> Hi Ingo
>> 
>> ja, natürlich geht es ziemlich schnell los und auch schon vor dem Laden
>> der Bilder. Aber leider ist es so, dass das alles nur client-seitig
>> passiert. Der Server bekommt davon nichts mit. D.h. wie und wann man
>> auch immer client-seitig reagiert, die Site ist vom Server zu diesem
>> Zeitpunkt immer schon ausgeliefert.
>> 
>> Gruss Renzo
>> -- 
>> _____________________________
>> Renzo Bauen
>> +41 79 330 10 11
>> conPassione gmbh 
>> 
>> 
>> Am Mittwoch, den 04.07.2012, 14:06 +0200 schrieb Ingo: 
>> 
>>> Peter Linzenkirchner schrieb am 02.07.2012 15:51
>>> 
>>> Schöner Thread.
>>> 
>>>> 1. erste Auslieferung: immer die kleinen Bilder und per JavaScript
>>>> ggf. die großen Bilder nachladen
>>> 
>>> Genau, Mobile First.
>>> 
>>> Kommt man per TS an die mediaqueries ran (evtl indirekt über somit
>>> vergebene CSS-Eigenschaften)?
>>> 
>>>> Was bei responsive Images interessiert ist letztlich die Bandbreite,
>>>> nicht die Device-Größe.
>>> 
>>> Eigentlich müßte man die Bandbreite messen, das geht aber vermutlich nur
>>> einigermaßen zuverlässig wenn man viel von ihr verschwendet ;-)
>>> 
>>> Zu "JS startet erst nach Laden der Seite" - geht's nicht normalerweise 
>>> ab DOMReady los, also noch vor/während Bildladens?
>>> 
>>> 
>>> Gruss, Ingo
>>> _______________________________________________
>>> TYPO3-german mailing list
>>> TYPO3-german at lists.typo3.org
>>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
>> _______________________________________________
>> TYPO3-german mailing list
>> TYPO3-german at lists.typo3.org
>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german

--
Xing: http://www.xing.com/profile/Peter_Linzenkirchner
Web: http://www.typo3-lisardo.de
Facebook: http://tinyurl.com/lisardo-multimedia