Aktuální kategorie: Webová grafika

V ostatních textech o SVG jsme si osvětlili historické kořeny a princip grafického formátu SVG, ukázali jsme si jeho pozadí, ale neřekli jsme nic o něm samém. Nastal čas splatit dluhy a podívat se do jeho "slovníku". Jelikož je formát Scalable Vector Graphics velmi komplexní, začneme se strukturou dokumentu, abychom měli pevný základ.

Trávíte mnoho hodin nad grafikou webových stránek? Vystavujete svou fotografickou tvorbu na internetu? Ať už posíláte grafický návrh ke schválení nebo provádíte jiné zdánlivě jednoduché operace s obrázky, měli byste počítat s vlivy, které se vyskytují při reprodukování barevnosti. Jak připravit obrazová data ve vhodném formátu? Jak přiřadit ICC profil pro správnou interpretaci dat? Nejen o tom je tento článek...

V tomto článku bych se chtěl vrátit k některým zajímavým námětům, probíraným na konferencích SVG Open, uspořádaných v letech 2002 a 2003: Budoucnost SVG formátu a historická paralela se síťovým protokolem IP - SVG na mobilech - Bude Microsoft podporovat SVG? - Příklady praktického využití - Zobrazení MathML - Generování SVG s použitím XSLT - Microsoft Office Visio 2003 jako editor SVG.

Vector Markup Language (VML) umožňuje vytváření vektorové grafiky. Možná víte, že k prakticky stejnému účelu slouží SVG, v době vzniku VML však jeho standardizace byla v nedohlednu. Microsoft se rozhodl popohnat věci kupředu a tak se stal VML jediným vektorovým formátem s nativní podporou v prohlížeči www stránek.

V tomto článku se podíváme blíže na zoubky některým grafickým programům, schopným generovat SVG data, v pořadí víceméně odpovídajícím jejich schopnostem. Předesílám, že se budu soustředit především na schopnosti programů související s SVG grafikou a s kvalitou exportu. Ostatních vlastností se budu dotýkat pouze okrajově.

V případě grafiky mají vizuální editory velký vliv na produktivitu naší práce, proto bych chtěl - dříve než se ponoříme do technických detailů SVG-XML - čtenářům poskytnout několik tipů pro vytváření grafiky i přesto, že se někdy budeme dotýkat zatím neprobraných záležitostí.

Už v době vývoje normy SVG 1.0 byl Macromedia SWF formát relativně rozšířený a tak pracovní skupina SVG přirozeně vycházela také ze zkušeností vývojářů Flashe - jinými slovy, SVG norma obsahuje všechny kladné vlastnosti Flash technologie. Navíc přidává daleko lepší práci s písmy a dokonalejší provázanost se zbytkem internetu, včetně přirozeného vytváření hyperlinků a skriptovatelnosti.

SVG prošla obvyklým procesem vývoje a schvalování internetových standardů v organizaci W3C, počínaje pracovním návrhem, přes diskuze v pracovní skupině, až po finální normu W3C Recomendation SVG 1.0, vydanou v září 2001. Při návrhu byly využity i zkušenosti získané při používání dvou starších vektorových jazyků (PGML a VML), SVG zdědila to nejlepší z obou.

Rád bych vám nastínil možnosti nejmodernějšího webového standardu pro vektorovou grafiku a ukázal některé jeho stále skryté půvaby. SVG totiž nabízí v podstatě ničím neomezenou grafickou kreativitu, jeho zdrojový kód přitom lze upravovat podobně jako klasické HTML. SVG byl vyvíjen za spolupráce mnoha lidí z praxe, díky čemuž má velmi dobré předpoklady pro jeho praktičnost v reálném nasazení na internetu.

Robert Janák vám v dalším ze svých příspěvků přináší širší přehled o podpoře formátu PNG nejrůznějšími www prohlížeči. V rozsáhlém přehledu uvádí míru podpory ve zpracování informací, jakými jsou gama korekce, alfa průhlednost, prokládání nebo i informace o profilu.

Jaké jsou možnosti formátu PNG? Ačkoli jste ho mnozí testovali, stálo by jistě za to se na něj podívat podrobněji. Tento formát posouvá laťku kvality zobrazení hodně vysoko. Nabízí řadu vylepšení šité na míru typografickému světu. Při podrobnějším studiu formátu pochopíte princip definování barevnosti, použití ICC profilu a gama korekce.

V užším smyslu je typografie je vnímána jako nauka o vzhledu písma a pravidlech sazby. Z širšího pohledu nelze typografii porozumět bez znalosti, jak působí písmo vůči celku, tj. k formátu zobrazovací plochy a ke grafickým prvkům, které jsou do ní umístěny. Asi jako když máte ciferník s odporně deformovanými čísly osazený do jinak krásných hodinek. Dnes si povíme něco o problematice barev u loga.

Za posledních deset let došlo k bouřlivému vývoji v oblasti tvorby webu. Spousta uživatelů se naučila jazyk HTML a kaskádové styly nebo alespoň používat nástroje pro tvorbu dynamických stránek. Možná se ale někteří zapomněli na chvíli zastavit a podívat se na základní použití grafiky na webu.

V první části tohoto článku jsme se naučili něco z teorie barev, a seznámili se s hlavními zásadami, jak barvy na webu používat. Dnes se zaměříme na barvy z pohledu přístupnosti a použitelnosti stránek a vše si budeme demonstrovat na konkrétních příkladech.

Barvy jsou obvykle to první, co návštěvník stránek vnímá a co během několika prvních sekund nejsilněji utváří jeho první dojem. Barvy mají též velký vliv na přístupnost i použitelnost stránek. Jenže na to, aby barvy na stránkách přinesly vám i vašim návštěvníkům víc užitku než škody, je třeba znát zásady jejich správného používání.

Mnoha tvůrcům webových stránek se může hodit takzvaná paleta bezpečných barev. Jedná se o barvy, které by měl bez problémů zobrazit jakýkoli internetový prohlížeč běžící pod libovolným operačním systémem, zobrazující alespoň 256 barev. Paleta bezpečných barev má přitom 216 položek, což je dost pro potřeby většiny designů.

Snad každý tvůrce www stránek umí umístnit obrázky do HTML stránky. Někdy ovšem může nastat nepříjemná situace, že někomu se obrázky bez problému zobrazují a někomu naopak vůbec ne. Někdy se dokonce nezobrazují nikomu. Článek se vám pokusí objasnit, proč tomu je a jak to napravit.

Než se v dalších dílech seriálu začnu podrobněji zabývat postupy, jak ve Photoshopu tvořit zajímavé věci na web, povíme si věc důležitou a často začínajícími webdesignery opomíjenou - jak ukládat obrázky, aby jejich velikost v kilobytech byla co nejmenší.

Pod záštitou W3C se spojili největší počítačoví experti z celéhosvěta a po více jak dvouleté práci nám předkládají technologii 21. století pro tvorbu webové grafiky pod názvem "Scalable Vector Graphics" (SVG). V současné době je vypracován v pořadí již 6 návrh Scalable Vector Graphics, který je určen k veřejnému posouzení.

Již v předchozím článku jsme psali o různých druzích formátů pro obrázky, které můžeme používat na www stránkach. Teď bychom se chtěli ještě jednou zmínit o nejnovějším a také nejvíce opomíjeném formátu nazývaném PNG, které si jistě zaslouží více pozornosti.