4. lekce: Obrázky, video, audio
Středa, Září 24th. 2008 | 4. Lekce - Obrázky
Pro vložení obrázku do stránky slouží nepárový element img. Povinnými atributy jsou src, jehož hodnotou je název obrázku, případně i s cestou a alt obsahující alternativní text, který se zobrazí, pokud je obrázek prohlížeči nedostupný, buď proto, že se na zadané adrese nenachází, nebo proto, že prohlížeč obrázky nezobrazuje. Alternativní text by měl tedy nějakým způsobem příblížit, co je na obrázku těm, kteří jej nevidí. Nepovinným atributem je title, jehož hodnota se zobrazí jako bublinová nápověda. Pokud není uveden, v bublinové nápovědě se zobrazí hodnota atributu alt.
Obrázky je potřeba používat na webu opatrně. Kromě výběru vhodných obrázků je třeba dbát na jejich datovou velikost, zdaleka ne každý si může dovolit prohlížet stránky, zejména při mobilním připojení. Obrázky, které mají význam pouze pro design stránky, by měly být vkládány pouze pomocí CSS stylu, a to jako obrázek na pozadí.
Velikost obrázku
Velikost obrázku není nutné zadávat. Pokud velikost obrázku není zadána, prohlížeč zobrazí obrázek v plné velikosti. Na stránku je vhodné vkládat obrázky ve své skutečné velikosti, nezmenšovat ani nezvětšovat je pomocí prohlížeče, ale pomocí grafického editoru. Pokud totiž obrázek o velikosti např. 100×100 pixelů zmenšíme v prohlížeči na 50×50, docílíme tak sice požadované velikosti, ale uživatel bude zbytečně stahovat více dat, protože bude stahovat obrázek v původní velikosti.
Obrázková mapa
Obrázkové mapy využijeme například pro různé navigační lišty. Obecně se jedná o obrázek, jehož jednotlivé části mají sloužit jako odkazy na různá místa. Mapa se vytváří pomocí elementu map. Jeho povinným atributem je id, což je atribut sloužící jako identifikátor této mapy. Jeho hodnotou je tedy nějaký textový řetězec, na který se později bude obrázek této mapy odvolávat.
Element map obsahuje libovolný počet (nejméně jeden) elementů area, které vymezují prostor z obrázku, který bude odkazem a určují, kam bude odkazovat. Tvar hranice aktivní oblasti (tj. místo, na které budeme moci kliknout a odkázat se na daný dokument) určuje atribut shape. Jeho hodnotou je buď rect (obdélník), poly (mnohoúhelník) nebo circle (kruh).
Konkrétní vymezení oblasti je dáno atributem coords. Jeho hodnotou jsou čísla oddělená čárkou, která definují vrcholy n-úhelníku. V případě obdélníku je to v pořadí: souřadnice x,y levého horního rohu, souřadnice x,y pravého dolního rohu. Obdobně po sobě budou následovat všechny vrcholy mnohoúhelníku. V případě kružnice jsou zadávána čísla v pořadí: souřadnice x,y středu, poloměr kružnice.
Pozn.: Počátek soustavy souřadnic je v levém horním rohu obrázku.
Povinným atributem elementu area je alt a neméně důležitým href, který určuje cíl odkazu. Takto můžeme rozdělit obrázek na několik aktivních oblastí. Mapa je již vytvořena, stačí jen říct obrázku, aby ji použil. Toho docílíme pomoci atributu usemap (atribut tagu img). Jeho hodnotou bude tentýž řetězec, jaký jsme použili v elementu map u atributu id.
<area shape =”rect” coords =”0,0,82,126″ href =”slunce.htm” target=”_blank” alt=”O Slunci” />
<area shape =”circle” coords =”90,58,3″ href =”merkur.htm” target =”_blank” alt=”O Merkuru” />
<area shape =”circle” coords =”124,58,8″ href =”venuse.htm” target =”_blank” alt=”O Venuši” />
</map>
<img src =”planety.gif” alt=”Planety” usemap =”#mapa” />
Video
HTML5 zavádí nový element <video> , který umož?uje (teoreticky) jednoduše vložit video do stránky. K dispozici jsou následující atributy:
- „src“ – cesta k videu, které má být přehráno
- „width“ a „height“ – stejně jako u obrázků lze nastavit rozměry videa. Pokud nenastavíte, prohlížeč použije to, co se mu zdá pro video vhodné. Stačí nastavit jen jeden rozměr, druhý si prohlížeč dopočítá.
- „controls“ – prohlížeč zobrazí své defaultní prvky pro ovládání videa (přehraj, zastav atd).
- „poster“ – url obrázku, který se zobrazí v době, kdy se video načítá.
- „autoplay“ – video se spustí ihned po načtení.
- „autobuffer“ – pokud jste si jisti, že uživatel si bude chtít video pustit, můžete ho začít automaticky načítat, jinak se začne načítat až ve chvíli, kdy ho uživatel aktivuje.
- „loop“ – video se bude přehrávat ve smyčce
Pro pokrytí co nejširšího pole prohlížeču je vhodné mít video ve více podporovaných formátech, např. MP4 a OGG.
<video width=”320″ height=”240″ controls>
<source src=”mojevideo.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″?>
<source src=”mojevideo.ogv” type=’video/ogg; codecs=”theora, vorbis”?>
<source src=”mojevideo.webm” type=’video/webm; codecs=”vp8, vorbis”?>
</video>
Následně prohlížeč postupuje shora dolů a vybere ten formát videa který zná.
AUDIO
Pro přehrávání audia se používají 3 formáty, a to mp3, wav a ogg vorbis. Každý prohlížeč podporuje to, co mu připadá lepší.
Implementace je podobná jako u videa.
TVORBA WEBOVÝCH STRÁNEK
ODKAZY
- CSS generátor písem
- CSS Pie – podpora CSS3 v IE
- CSS reset
- CSS3 generátor kódu
- Emulace starších verzí IE
- generátor barevných schémat
- generátor CSS spritů
- generátor CSS tlačítek
- generátor šablon 1
- generátor šablon 2
- generátor šablon 3
- generátor pozadí
- komprimace CSS souborů
- konsorcium W3C
- Lazy loading
- lorem ipsum generator
- obtékání komplikovaných objektů
- optimalizace CSS
- Podpora CSS3 a HTML5
- Podpora CSS3 v prohlížečích
- regulární výrazy
- Simulace pomalého připojení
- tabulky s kulatými rohy
- test barev z hlediska přístupnosti
- Testování webu na mobilních zařízeních
- W3C validátor XHTML
- w3schools – vše o tvorbě webu
- www.tvorba-webu.cz
- XHTML –> HTML 5
- získání palety barev
- změna barev v CSS souboru