Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Pokročilé responzivní obrázky 
You are challenged by prof. @robinpokorny
Breakthrough Internet Device
http://httparchive.org/interesting.php?a=All&l=Nov%201%202014
http://usecases.responsiveimages.org/ 
(zdroje následujících obrázků)
http://usecases.responsiveimages.org/ 
(zdroje následujících obrázků)
Resolution-based selection
Viewport-based selection
Device-pixel-ratio-based selection
Art direction
Design breakpoints
Matching media features and media types
Relative units 
Image formats 
User control over sources
Obraz je jakékoli konečné grafické 
vyjádření ve dvou rozměrech.
Zdroj, také fyzický obrázek, je 
libovolný prvek prostoru 2<ω 
(konečné posloupnosti nul a jedniček), 
který má přiřazen r...
Vektor stavu popisuje všechny 
vlastnosti zobrazovacího zařízení 
včetně prostředí. 
Display, okno, prohlížeč, síť…
Autorská představa o vyobrazení 
obrazu je funkce, která je pro daný 
zdroj obrazu a za daného stavu buď 
uspokojena (1) n...
Úloha responzivních obrázků: 
Buď i obraz a s vektor stavu. 
Nechť Zi je množina zdrojů 
reprezentujích i, dále nechť αi j...
fi: (s, Zi, αi) ↦ zεZi 
že αi(z, s) = 1 
, 
Úloha responzivních obrázků:
Vektor stavu 
Zdroje a jejich rozměry 
Autorská představa
http://www.zdrojak.cz/clanky/adaptivni-obrazky-vyresena-otazka-s-novym-otaznikem/
https://html.spec.whatwg.org/multipage/embedded-content.html
<img src=“foto-320.jpg" />
<img src=“foto-320.jpg” 
srcset=“foto-1920.jpg 1920w, 
foto-1024.jpg 1024w, 
foto-640.jpg 640w, 
foto-320.jpg 320w” 
sizes...
ericportis.com
srcset=“( [url] [integer]w, )+" 
fyzická šířka v pixelech
srcset=“( [url] [float]x, )+" 
pixel density (0.25x, 0.5x, 1x, 2x, 4x) 
Pozor! Odlišný význam od starší specifikace.
sizes=“( [media query] [length], )* [length]" 
první vyhovující, nebo
sizes=“( [media query] [length], )* [length]" 
px 
em 
vw 
rem 
in 
calc(50vw - 2em)
<img src=“foto-320.jpg” 
srcset=“foto-1920.jpg 1920w, 
foto-1024.jpg 1024w, 
foto-640.jpg 640w, 
foto-320.jpg 320w” 
sizes...
Art direction
<img class=“on-hd” 
srcset=“charizard-hd.jpg 1920w, …”> 
<img class=“on-lg” 
srcset=“charmeleon-hd.jpg 1680w, …”> 
<img cl...
<picture> 
<source media="(min-width: 1200px)" 
srcset=“charizard-hd.jpg 1920w, …”> 
<source media="(min-width: 40em)" 
sr...
<picture> 
<source media="(min-width: 1200px)" 
musí být poslední 
srcset=“charizard-hd.jpg 1920w, …”> 
<source media="(mi...
Výňatek z algoritmu “select an image source” 
In a user agent-specific manner, choose 
one image source from source set.
fi: (s, Zi, αi) ↦ zεZi 
že αi(z, s) = 1 
, 
Úloha responzivních obrázků:
fi, : (s, Zi, αi) ↦ zεZi 
že αi(z, s) = 1 
, 
Úloha responzivních obrázků:
<img srcset=“foto-3000.jpg 3000w, 
foto-1000.jpg 1000w” 
sizes=“1100px”/>
1000 
1100 
3000 
foto-1000.jpg 
foto-3000.jpg
1000 
1100 
3000 
foto-900.jpg 
foto-3000.jpg 
1732 
√(1000 * 3000) 
2000 
1000 + 3000 
2
"You must really like your <picture> 
and always keep it by your side!" 
@robinpokorny
Pokročilé responzivní obrázky
Pokročilé responzivní obrázky
Pokročilé responzivní obrázky
Pokročilé responzivní obrázky
Pokročilé responzivní obrázky
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Vanda Cabanová - Nauč svoju holku programovať
Next
Upcoming SlideShare
Vanda Cabanová - Nauč svoju holku programovať
Next
Download to read offline and view in fullscreen.

Share

Pokročilé responzivní obrázky

Download to read offline

Motivace, definice, zadání a řešení úlohy responzivních obrázků pomocí <picture> elementu (především) c Google Chrome. Přednáška na pražském DevFest 2014 (http://devfest.cz/).

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Pokročilé responzivní obrázky

  1. 1. Pokročilé responzivní obrázky You are challenged by prof. @robinpokorny
  2. 2. Breakthrough Internet Device
  3. 3. http://httparchive.org/interesting.php?a=All&l=Nov%201%202014
  4. 4. http://usecases.responsiveimages.org/ (zdroje následujících obrázků)
  5. 5. http://usecases.responsiveimages.org/ (zdroje následujících obrázků)
  6. 6. Resolution-based selection
  7. 7. Viewport-based selection
  8. 8. Device-pixel-ratio-based selection
  9. 9. Art direction
  10. 10. Design breakpoints
  11. 11. Matching media features and media types
  12. 12. Relative units Image formats User control over sources
  13. 13. Obraz je jakékoli konečné grafické vyjádření ve dvou rozměrech.
  14. 14. Zdroj, také fyzický obrázek, je libovolný prvek prostoru 2<ω (konečné posloupnosti nul a jedniček), který má přiřazen rozměr. Zdroj reprezentuje obraz.
  15. 15. Vektor stavu popisuje všechny vlastnosti zobrazovacího zařízení včetně prostředí. Display, okno, prohlížeč, síť…
  16. 16. Autorská představa o vyobrazení obrazu je funkce, která je pro daný zdroj obrazu a za daného stavu buď uspokojena (1) nebo neuspokojena (0).
  17. 17. Úloha responzivních obrázků: Buď i obraz a s vektor stavu. Nechť Zi je množina zdrojů reprezentujích i, dále nechť αi je autorská představa o vyobrazení i. Najděte zεZi, aby byla uspokojena αi pro z a s.
  18. 18. fi: (s, Zi, αi) ↦ zεZi že αi(z, s) = 1 , Úloha responzivních obrázků:
  19. 19. Vektor stavu Zdroje a jejich rozměry Autorská představa
  20. 20. http://www.zdrojak.cz/clanky/adaptivni-obrazky-vyresena-otazka-s-novym-otaznikem/
  21. 21. https://html.spec.whatwg.org/multipage/embedded-content.html
  22. 22. <img src=“foto-320.jpg" />
  23. 23. <img src=“foto-320.jpg” srcset=“foto-1920.jpg 1920w, foto-1024.jpg 1024w, foto-640.jpg 640w, foto-320.jpg 320w” sizes=“(min-width: 800px) 25vw, 100vw” />
  24. 24. ericportis.com
  25. 25. srcset=“( [url] [integer]w, )+" fyzická šířka v pixelech
  26. 26. srcset=“( [url] [float]x, )+" pixel density (0.25x, 0.5x, 1x, 2x, 4x) Pozor! Odlišný význam od starší specifikace.
  27. 27. sizes=“( [media query] [length], )* [length]" první vyhovující, nebo
  28. 28. sizes=“( [media query] [length], )* [length]" px em vw rem in calc(50vw - 2em)
  29. 29. <img src=“foto-320.jpg” srcset=“foto-1920.jpg 1920w, foto-1024.jpg 1024w, foto-640.jpg 640w, foto-320.jpg 320w” sizes=“(min-width: 800px) 25vw, 100vw” />
  30. 30. Art direction
  31. 31. <img class=“on-hd” srcset=“charizard-hd.jpg 1920w, …”> <img class=“on-lg” srcset=“charmeleon-hd.jpg 1680w, …”> <img class=“on-sm” srcset=“charmander-hd.jpg 800w, …”>
  32. 32. <picture> <source media="(min-width: 1200px)" srcset=“charizard-hd.jpg 1920w, …”> <source media="(min-width: 40em)" srcset=“charmeleon-hd.jpg 1680w, …”> <img src=“charmander.jpg" srcset=“charmander-hd.jpg 800w, …”> </picture>
  33. 33. <picture> <source media="(min-width: 1200px)" musí být poslední srcset=“charizard-hd.jpg 1920w, …”> <source media="(min-width: 40em)" a jiné srcset=“charmeleon-hd.jpg 1680w, …”> <img src=“charmander.jpg" srcset=“charmander-hd.jpg 800w, …”> </picture> epický fallback může mít sizes (i v source) class zde
  34. 34. Výňatek z algoritmu “select an image source” In a user agent-specific manner, choose one image source from source set.
  35. 35. fi: (s, Zi, αi) ↦ zεZi že αi(z, s) = 1 , Úloha responzivních obrázků:
  36. 36. fi, : (s, Zi, αi) ↦ zεZi že αi(z, s) = 1 , Úloha responzivních obrázků:
  37. 37. <img srcset=“foto-3000.jpg 3000w, foto-1000.jpg 1000w” sizes=“1100px”/>
  38. 38. 1000 1100 3000 foto-1000.jpg foto-3000.jpg
  39. 39. 1000 1100 3000 foto-900.jpg foto-3000.jpg 1732 √(1000 * 3000) 2000 1000 + 3000 2
  40. 40. "You must really like your <picture> and always keep it by your side!" @robinpokorny
  • LiborKramoli

    Dec. 24, 2014
  • PeterMarkuka

    Nov. 24, 2014
  • wojtha

    Nov. 23, 2014

Motivace, definice, zadání a řešení úlohy responzivních obrázků pomocí &lt;picture> elementu (především) c Google Chrome. Přednáška na pražském DevFest 2014 (http://devfest.cz/).

Views

Total views

4,304

On Slideshare

0

From embeds

0

Number of embeds

2,961

Actions

Downloads

8

Shares

0

Comments

0

Likes

3

×