Documentation!

Tento text slouží jako dokumentace webové galerie, která se nachází na http://www.redreaper.eu a vztahuje se k verzi 0.3.4.

Klepnutím na About můžete zkontrolovat aktuální verzi galerie. Pokud se verze galerie neshoduje s verzí dokumentace, informace o posledních uskutečněných změnách naleznete v Historii.

Nástin problému a jeho analýza

Snahou bude vytvořit webovou stránku včetně galerie, která umožní prohlížení fotografií. Galerie by měla navíc obsahovat funkci pro zobrazení fotky ve stupních šedi a funkci pro zobrazení informace EXIF. Obě funkce by měly být uzamknutelné, neboli fungovat jako preset. To znamená, že pokud bude například funkce pro převedení do stupňů šedi uzamčena, budou se všechny fotky v galerii zobrazovat ve stupních šedi. Další schopností stránek bude možnost změny celkového vzhledu galerie.

Realizace stránek

Původní návrh galerie vznikl na papíře, kde stránky byly rozvrženy do třech základních částí. V levé části byly obrázky sloužící jako odkazy k jednotlivým kolekcím, v hlavní časti, v pořadí od shora, se nacházelo logo, horizontální menu a dále prostor pro fotografii, případně pro text. Pod hlavní částí se nacházela spodní část a sloužila k zobrazení jednotlivých miniatur. Tuto část zakončoval panel obsahující copyright.

Po vytvoření návrhu na papír následovala otázka realizace kódu stránek a s ní přišly i určité kompromisy, ale zároveň i vylepšení. Například bylo umožněno skrývání jednotlivých částí a byl přidán panel s tlačítky pro posun miniatur.

Snahou bylo zajistit, aby stránka přes svoji zdánlivou náročnost, byla co nejjednodušší a nejrychlejší. Proto všechny obrázky, pomocí nichž je galerie naskinována, jsou optimalizovány tak, aby jejich velikost byla co nejmenší. Převážně byl použit formát PNG se selektivní až 256-barevnou paletou. Pro jednotlivé miniatury v galerii byl použit formát JPEG s kvalitou nastavenou tak, aby ztrátová komprese tohoto formátu byla v poměru 1:1 téměř neznatelná. Průměrně jedna miniatura, 200x132px takto vychází na 12Kb. Ve většině případů tak vychází o něco menší než případný 256-barevný formát PNG v této velikosti. Naopak pro naskinování galerie by komprese JPEG nebyla vhodná. Miniatury jsou standardně načítány 4.

Původní fotografie byly opatřeny rámečkem a upraveny v programu Adobe Photoshop. Dále byly hromadně zmenšeny na šířku 800px se zachovaným poměrem stran pomocí dávkové konverze v programu IrfanView. Výsledné rozlišení tak vychází na 800x532px.

Změna vzhledu stránek je nastavitelná v menu "Options" a je prakticky okamžitá, protže se načítají minimálně velké textury. Je rovněž možné vybrat i logo z několika připravených návrhů.

Kontinuálně s řešením velikostí a úpravou fotek probíhala fáze seznámení se s prostředky, kterými lze webovou galerii napsat. Galerie zpočátku byla psána v jazyce HTML 4.01 Transitional, ale postupem času kód prošel úpravami a přes HTML 4.01 Strict! jsme se dostali k současné normě XHTML 1.1. Postupný vývoj galerie je zachycen v sekci History.

Jako stěžejní pro vzhled celých stránek se ukázal formátovací jazyk CSS (Cascading Style Sheets). Trochu problematická je pouze nedostatečná podpora CSS v prohlížeči Internet Explorer 6.0 a ne zcela stejná interpretace tohoto jazyka snad ve všech prohlíéžečích.

Popis implementace

Vygenerované XHTML této galerie je dostupné prakticky komukoliv, kdo má přístup k internetu. Zobrazení tohoto kódu závisí na prohlížeči, který používáte. Například v prohlížeči Opera funguje klávesová zkratka CTRL+F3 (od verze 9.5 CTRL+U), v prohlížeči Mozilla Firefox je to CTRL+U a v Internet Explorer jej zobrazíte klepnutím na "Zdrojový kód" v menu "Zobrazit". Tím získáte zdrojový XHTML kód a to i včetně případných komentářů. XHTML je generováno pomocí kódu PHP a ten tímto způsobem přístupný není.

Závěr práce

Vyvoj stánek není u konce a tak se galerie v budoucnu dočká ještě dalších vylepšení. Přes velké množství času, které již spotřebovala, považuji tvorbu jejího kódu za minimum vzhledem k práci na jejím hlavním obsahu, čili fotografiích. Časem se chystám umožnit registraci uživatelů a doplnění dalších uzamknutelných funkcí, či filtrů. Kromě převedení na stupně šedi chystám ještě funkci pro sépiový odstín. Dále chystám možnost získat fotky v jejich originální velikosti a také plnou podporu českého a anglického jazyka.