Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Adaptive Images - Monster on Rails Jan. 2012

1.167 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×