Aktuální kategorie: Webová grafika

Na vzhledu stránky hodně záleží. Nejde jen o estetický zážitek - dobře udělaný design je užitečný i prakticky a může stránky hodně zpřehlednit.

Ben Gremillion vám poradí, jak pro váš web vytvořit takové zápatí, za které se nebudete muset stydět a které vaši návštěvníci ocení.

Když si konečně uvědomíte krutou pravdu, že vaše stránky potřebují redesign, jak byste měli postupovat? S odpovědí pomůže článek od Ley Alcantary.

V tomto článku se podíváme podrobněji mimo jiné na OmniGraffle - profesionálně pracující nástroj pro tvorbu diagramů, schémat a tabulek. Zajímavý je i WebEngine, který animuje SVG pomocí JavaScriptu. Výsledek proto bude pohyblivý i ve Firefoxu, který v současném stádiu vývoje bohužel ještě neumí interpretovat SMIL prvky.

V tomto článku si představíme dvě novinky pro tvorbu SVG obsahu. Především SVGDeveloper s jeho animačními schopnostmi byste si rozhodně neměli nechat ujít. Pozornost si zaslouží i editor XFY umožňující vizuální tvorbu kombinovaných XML dokumentů XHTML+SVG.

Když jsem začal promýšlet, co vše zahrnout do tohoto článku zabývajícího se novinkami na SVG scéně, Inkscape jsem původně chtěl vynechat. Ale velmi brzy mi došlo, že se o tomto vektorovém editoru prostě nemohu nezmínit poněkud podrobněji, stejně jako o javovském programu Sketsa.

Většina z vás již pravděpodobně zaregistrovala, že implementace standardu SVG-XML pro vektorovou grafiku na webu i na mobilech učinila významné kroky kupředu. Technický pokrok ztělesňují prohlížeče Opera 9, Mozilla Firefox 1.5 a Camino 1 (Mac OS). Opera 9 dokonce velmi příjemně překvapila podporou kompletního standardu SVG Full! Nejen díky tomu se stala v souboji o technicky nejpokročilejší prohlížeč více než vážným soupeřem Firefoxu, pokud jej snad již nepředčila. V implementaci SVG dotahuje též dvojka Konqueror a Safari na Linuxu i Macu.

Vzhled textu je stálý problém webdesignu. Existuje jen několik fontů, které jsou univerzálně dostupné, a je téměř nemožné vytvořit složitější grafické efekty, pokud používáte jen standardní CSS a HTML. Je vhodné používat tyto tradiční fonty pro texty, ale co se týče nadpisů - krátkých, pozornost přitahujících bloků textu - bylo by hezké mít větší výběr. Na tento problém jsme si zvykli a řešíme jej buď tak, že vyzískáme co nejvíc z toho mála fontů, co máme, nebo zcela nahrazujeme texty nadpisů obrázky.

V předchozích článcích jsme se věnovali obecné teorii bitmapových efektů v SVG a rozebrali jsme si některá primitiva základních bitmapových efektů. V tomto článku budeme pokračovat podrobným popisem dalších grafických filtrů.

V následujícím textu se společně podíváme na základní stavební jednotky bitmapových efektů (filter primitives) podle SVG specifikace. Postupně probereme ty nejzajímavější a nejčastěji používaná primitiva.

Máte-li již základní představu o tom, co jsou a co mohou SVG filtry, je na čase, abyste se blíže seznámili s jejich specifikací a zápisem do SVG kódu. Kromě obecného mechanismu definice a následné aplikace filtru si ukážeme také specifické filtry pro nastavení osvětlení objektů v SVG.

Ačkoli má vektorová grafika spoustu nesporných předností, určité grafické efekty se pomocí vektorů dosahují jen obtížně. Nejtypičtějším a široce používaným zástupcem tohoto druhu nám může být rozostření, které se mnohonásobně snadněji počítá v matici rastrové grafiky. Proto norma SVG zavádí rovněž bitmapové efekty (filter effects), které přicházejí ke slovu tam, kde není použití vektorů výhodné.

Dobře známým problémem webu je dostupnost, či spíše nedostupnost konkrétního písma na konkrétním klientském zařízení. Obzvláště u stránek s důrazem na prezentační stránku je potřeba mít k dispozici písma použitá v původním grafickému návrhu, aniž by bylo nutné převádět velké množství textu na obrysové křivky. Proto mezi pokročilé prvky formátu SVG patří i možnost definice vlastního písma.

Mezi opravdové grafické lahůdky patří i pokročilé typografické schopnosti formátu SVG. Velmi zběžně už jsme na Intervalu probrali základní textové prvky. Tentokrát se podíváme na takové speciality, jako je například umístění textu podél obecné křivky...