Adaptive Images - Monster on Rails Jan. 2012

924 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
924
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Adaptive Images - Monster on Rails Jan. 2012

  1. 1. Adaptive ImagesMonster on Rails Jan. 2012MobileChristian Peters
  2. 2. Zweitag // Gründungsstory 02.11.2011 Fluid Images Der naive Ansatz In dem bekannten Buch „Responsive Web Design“ werden Fluid Images inkl. IE Hacks angepriesen. ❖ max-width: 100% img, ❖ Browser-Verhalten: embed, object, ❖ Bild wird ggf. auf Größe seines video { Containers runterskaliert max-width: 100%; } ❖ Kein Hochskalieren ❖ Krisselig in IE7 ❖ Marcottes Gegenmittel: http://alistapart.com/ ❖ 60 Zeilen JavaScript articles/fluid-images/ ❖ proprietärer Filter progid:DXImageTransform. Microsoft.AlphaImageLoaderMonster on Rails // Adaptive Images 2 11.01.2012
  3. 3. Zweitag // Gründungsstory 02.11.2011 „CSS Media Query for Mobile is Fool‘s Gold“ Optimierung für kleinere Bildschirme, schwachere CPUs und schlechtes Netz kann nicht mehr Code sein. http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/Monster on Rails // Adaptive Images 3 11.01.2012
  4. 4. Zweitag // Gründungsstory 02.11.2011 „Fluid Images for Mobile is Fool‘s Gold“ Optimierung für kleinere Bildschirme, schwachere CPUs und schlechtes Netz kann nicht Skalierung großer Bilder sein. http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/Monster on Rails // Adaptive Images 4 11.01.2012
  5. 5. Zweitag // Gründungsstory 02.11.2011 CSS Media Query for Mobile is Fool‘s Gold You cannot hide! Bilder einfach per display: none zu verstecken bedeutet nicht, dass sie nicht geladen werden. ❖ Hiding Images ❖ Either for replacing by smaller ones or hiding them completely @media screen and (max-width: 480px) { img { display: none; } }Monster on Rails // Adaptive Images 5 11.01.2012
  6. 6. Zweitag // Gründungsstory 02.11.2011 CSS Media Query for Mobile is Fool‘s Gold You cannot hide! Bilder einfach per display: none zu verstecken bedeutet nicht, dass sie nicht geladen werden. ❖ Hiding Images ❖ Either for replacing by smaller ones or hiding them completely @media screen and (max-width: 480px) { img { display: none; } } ❖ iPhone still downloads them ❖ Same for CSS background-imagesMonster on Rails // Adaptive Images 5 11.01.2012
  7. 7. Zweitag // Gründungsstory 02.11.2011 CSS Media Query for Mobile is Fool‘s Gold You cannot hide! Bilder einfach per display: none zu verstecken bedeutet nicht, dass sie nicht geladen werden. ❖ Hiding Images ❖ Either for replacing by smaller ones or hiding them completely @media screen and (max-width: 480px) { img { display: none; } } ❖ iPhone still downloads them ❖ Same for CSS background-images ❖ Some hacks currently work on iPhone ❖ e.g. hide parent of element with CSS bg-imageMonster on Rails // Adaptive Images 5 11.01.2012
  8. 8. Zweitag // Gründungsstory 02.11.2011 Let the Games begin! ❖ Client-seitig ❖ Dynamic Base Tag ❖ Image src per JavaScript setzen ❖ Client-seitig + Server-seitig ❖ JavaScript + Cookies + .htaccess Rewrite Rules ❖ Server-seitig ❖ Device DetectionMonster on Rails // Adaptive Images 6 11.01.2012
  9. 9. Zweitag // Gründungsstory 02.11.2011 Client-seitige Erkennung Dynamic Base Tag Das dynamische Setzen es <base> Tags verhindert nicht das Laden von falschen Bildern. ❖ HTML Element ❖ Teil des <head> ❖ Legt Basis-URL von relativen URLs im Dokument fest ❖ Nutzung für Adaptive Images: ❖ Bilder in gewünschten Größen in versch. Ordnern vorhalten ❖ nach JS Größenerkennung Base-Pfad entsprechend setzen ❖ Nachteil ➡ Race ConditionsMonster on Rails // Adaptive Images 7 11.01.2012
  10. 10. Zweitag // Gründungsstory 02.11.2011 Client-seitige Erkennung Image src per JavaScript setzen Platzhalter funktionieren nicht ohne JavaScript und Bildsubstitution führt zu Race Conditions. ❖ Platzhalter ❖ 1x1px - Bild nach JS-Erkennung durch echtes Bild ersetzen ➡ keine Bilder ohne JS ➡ schlechte Wartbarkeit (alle Bilder nur in JS) ❖ Kleine Bilder ggf. durch große Ersetzen ❖ Im Zweifel wird zumindest ein kleines Bild angezeigt ❖ Angabe der großen Bild-URL in data-large ❖ Oder durch Namenskonvention ➡ Race ConditionsMonster on Rails // Adaptive Images 8 11.01.2012
  11. 11. Zweitag // Gründungsstory 02.11.2011 Client-seitige Erkennung Wie Race Conditions vermeiden? Dies ist die Tagline, die die Kernaussage der Folie in einem Satz auf den Punkt bringt. ❖ Noscript Tag <noscript data-large=Koala.jpg data-small=Koala-small.jpg data-alt=Koala> <img src=Koala.jpg alt=Koala /> </noscript> $(noscript[data-large][data-small]).each(function(){     var src = screen.width >= 500 ? $(this).data(large) : $(this).data(small);     $(<img src=" + src + " alt=" + $(this).data(alt) + " />).insertAfter($(this)); }); ❖ Nicht Teil des DOM-Baums, wenn JS an → keine Race Conditions ❖ Standardbild als Fallback wenn JS aus ➡ Unsemantisch ➡ Auswirkung auf Suchmaschinen unklar ➡ Beschränkte JS-Engines unterstützen keine DOM-InsertsMonster on Rails // Adaptive Images 9 11.01.2012
  12. 12. Zweitag // Gründungsstory 02.11.2011 Client-seitige + Server-seitige Erkennung JavaScript + Cookies + .htaccess Rewrite Rules Cookies & URL-Rewrite-Regeln sind eine gute Methode, helfen jedoch nicht beim 1. Request ❖ 1. Request ❖ Auflösung per Javascript erkennen ❖ Auflösung in Cookie schreiben ❖ Bei Folge-Requests ❖ Cookie auslesen & .htaccess Rewrites auf Bild-URL anwenden RewriteEngine On RewriteCond %{HTTP_COOKIE} rwd-device=desktop RewriteCond %{QUERY_STRING} desktop=([^&]+) RewriteRule .* %1 [L] ➡ Race Condition im 1. Request ➡ Client muss Cookies akzeptierenMonster on Rails // Adaptive Images 10 11.01.2012
  13. 13. Zweitag // Gründungsstory 02.11.2011 Server-seitige Erkennung Device Detection Über User-Agent-Strings können Geräte erkannt und Eigenschaften abgeleitet werden. ❖ Server-seitig keine Introspektion ❖ Jedoch: User-Agent String ❖ Beispiele: ❖ "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/ 535.7 (KHTML, like Gecko) Chrome/16.0.912.63 Safari/535.7" ❖ Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A538a Safari/419.3 ❖ Ansätze: Image Resizing Service (per HTTP) OpenSource „Datenbank“ (XML-Datei)Monster on Rails // Adaptive Images 11 11.01.2012
  14. 14. Zweitag // Gründungsstory 02.11.2011 Server-seitige Erkennung Sencha.io Src Sencha.io Src ist ein Image-Resizing-Service, der auf Server-seitige Device-Erkennung setzt. ❖ Image Resizing Service ❖ Features ❖ Skalieren auf Device-Auflösung ❖ Skalieren auf Fenster-Größe ❖ via JS + Cookie (Race Conditions) http://www.sencha.com/learn/ ❖ Orientation Detection how-to-use-src-sencha-io/ ❖ via JS + Cookie (Race Conditions) ❖ Skalieren relativ zur Device-Auflösung / Fenstergröße ❖ px reduzieren, px addieren, prozentual ❖ Untersch. Maximalgrößen für Desktop & Mobile ❖ Dateiformat, Kompression, Inline Images, Caching, ShardingMonster on Rails // Adaptive Images 12 11.01.2012
  15. 15. Zweitag // Gründungsstory 02.11.2011 Server-seitige Erkennung WURFL WURFL ist eine Open Source XML-Datei, in der Device-Eigenschaften gesammelt werden. ❖ Wireless Universal Resouce FiLe ❖ Sammelt Eigenschaften zu http://wurfl.sourceforge.net/ User-Agent Strings ❖ Hierarchische Abbildung von Geräten & Browsern ❖ Unterversionen / Folgeversionen ❖ Fallback-Mechanismus für unbekannte Geräte ❖ APIs für Java, .NET & PHPMonster on Rails // Adaptive Images 13 11.01.2012
  16. 16. Zweitag // Gründungsstory 02.11.2011 Server-seitige Erkennung Device Detection nutzen & erweitern Aufbau und Nutzung von „Device Knowledge“ ist Voraussetzung für gutes Responsive Design. ❖ Musterbeispiel: Yiibu ❖ Projekt von Mobile-Experten für browser.nokia.com ❖ 1. Request: ❖ Starten mit Basisprofil ❖ 3rd Party Device Detection Datenbank (WURFL, DeviceAtlas) ❖ Anreichern um eigenes Wissen („Tacit Knowledge“) ❖ Schreiben in Cookie („Profil“) ❖ Weitere Requests: http://www.slideshare.net/yiibu/ adaptation-why-responsive-design- ❖ Mitlieferung des Profils actually-begins-on-the-server ❖ Alle Anpassungen geschehen Server-seitigMonster on Rails // Adaptive Images 14 11.01.2012

×