Tipy pro webdesign: tlačítka, ikonky, komprese CSS, desktopová analýza návštěvnosti, SEO aj. - Grafika.cz - vše o počítačové grafice

9. září 2009, 00.00 | Sháníte atraktivní grafická tlačítka a ikonky pro webovou grafiku, zredukovat kaskádové styly, pravidelně monitorovat funkčnost webového serveru, nebo potřebujete z desktopu či notebooku přehledně analyzovat vše, co souvisí s návštěvností a SEO optimalizací webových stránek? Nabízíme vám několik tipů, jak uvedené věci či nástroje získat většinou zcela zdarma.

Webová rozhraní, ikonky, bannery apod.

Šablon pro webové stránky existuje bezpočet stejně jako ikon pro nejrůznější účely. Skromným tipem graficky velmi povedených a vizuálně atraktivních tlačítek v prostředí designu webových aplikací přestavuje sada PSD dokumentů All-in-One Web Elements Design Kit. Jedná se o balík sedmnácti PSD dokumentů s něco přes sto tlačítky, UI rozhraním, posuvnými lištami, grafickou pro plovoucí i statické boxy a dalšími prvky v opravdu podařeném grafickém provedení. Design v sadě All-in-One Web Elements Design Kit možná trochu připomíná tlačítka a boxy z iPhone, jejich barevnost i tvar si však můžete libovolně upravit přímo v PSD dokumentech nabízených k přímému stažení.

Velmi zajímavě řešené šablony webových stránek na bázi sloupců a mřížek pro Fireworks, Illustrator, Photoshop a další grafické či prezentační programy najdete na webu 960 Grid System. Chcete-li ušetřit čas s návrhy palet barev pro webové stránky a různých vzorů pro grafické dokumenty, mrkněte na web COLOURlovers - je to rovněž velmi povedená záležitost.

Druhým tipem je odkaz na zdarma dostupné ikonky pro webové či libovolné aplikace a webové stránky z produkce FAMFAMFAM. Na uvedeném odkazu najdete několik set GIF a PNG ikon nejen pro navigační prvky, RSS zdroje a Twitter, ale především pro prostředí aplikací a také miniaturní vlajky podle standardizovaných ISO 3166-1 alpha-2 kódů. Mnohdy úžasné a netradičně stylizované ikonky, kliparty, fotografie a další grafický materiál nabízí také poměrně známý server devianART, spousta z ikon je však zdarma pouze k soukromým účelům.

Reklamní bannery mohou být užitečné, pokud s nimi však pracujete pouze občas, asi nebudete držet v hlavě všechny rozměry nejpoužívanějších bannerů. Hezky popsané bannery se všemi potřebnými rozměry a velikostmi najdete na českém a anglickém webu web Banner sizes. Ze stejného webu pochází také odkaz na online editor na tvorbu vícestavových navigačních tlačítek 80x15 Brilliant Button Maker.

Tipy pro webdesign - All-in-One Web Elements Design Kit s šablonami grafického rozhraní, tlačítek, navigačních prvků, scrollbarů a jiných UI prvků

Tipy pro webdesign - několik z mnoha set zdarma dostupných ikon z produkce FAMFAMFAM

Tipy pro webdesign - připravené palety barev, různé grafické vzorky a vše další, co nějak souvisí s barvami, najdete na serveru COLOURlovers

Komprese a editace kaskádových stylů, SEO

Webové stránky většího rozsahu obvykle přináší stále větší skupiny kaskádových stylů, jejichž interní syntaxi lze většinou o něco zredukovat. Bezplatná online služba CSS Compressor umí velikost kaskádové stylů šikovně zmenšit předefinováním zápisu/syntaxe CSS stylů s úsporným zápisem například barev, spacingu, značek pro odsazování prvků apod., čímž můžete reálně ušetřit až zhruba třetinu celkové velikosti souborů s kaskádovými styly.

Online CSS editorů existuje celá řada, posloužím alespoň odkazem na textově/vizuální CSSMate, osobně bych však raději doporučil libovolný offline CSS editor. Velmi užitečným webem pro SEO optimalizaci je pak Seo Servis, který funguje bezplatně jako univerzální SEO analyzátor a je hojně využíván právě pro jeho komplexní online přístup z hlediska SEO kontroly a generování výsledných zpráv o stavu SEO pro danou webovou adresu.

Na online kontrolu webových stránek v nejrůznějších verzích webových browserů slouží služba BrowserShots.org, která je sice trochu těžkopádná (služba funguje na bázi screenshotů generovaných virtuálními roboty, které obrázky odešlou k prohlédnutí na server), vizuální výstup vykreslené webové stránky je však na rozdíl od různých "simulátorů" webových prohlížečů reálný a zcela přesný.

Tipy pro webdesign - CSS Compressor zredukuje velikost a interní kód/syntaxi kaskádových stylů

Tipy pro webdesign - BrowserShots poskytuje kontrolu webových stránek formou jejich obrázkových náhledů pro zvolené webové prohlížeče

Tipy pro webdesign - jeden z nejlepších českých serverů kontrolujících SEO optimalizaci webových stránek

Analýza návštěvnosti a jiných statistických údajů

Služba Polaris je v podstatě nezávislá grafická nadstavba pro Google Analytics v podobě Adobe AIR internetové aplikace, kterou můžete provozovat na běžném desktopu či notebooku a která si na rozdíl od pouze online Google Analytics pamatuje stažená data a umí je přehledně vizualizovat.

Polaris funguje ve Windows, Mac OS X i Linuxu a napojuje se na stávající statistiky z Google Analytics a převezme statistické údaje, které souhrnně zobrazí ve svém grafickém rozhraní. Jedná se o bezplatnou službu, která je omezena na jeden uživatelský profil. Pokud chcete sledovat analýzy více web serverů/webových stránek ve více profilech (které plná verze Polaris podporuje), budete muset obětovat 15 USD ročně. V Polaris máte k dispozici celkem osm druhů zpráv v přehledném grafickém provedení a s různými doplňkovými funkcemi.

Tipy pro webdesign - Polaris je Adobe AIR aplikace pro sledování statistik z Google Analytics

Monitoring stavu webového serveru

Pro kontrolu stavu a aktuální funkčnosti webových serverů respektive konkrétních webových adres existuje celá řada nástrojů, jen málo z nich ale funguje tak automatizovaně a k tomu zdarma. Basic State na stejnojmenném serveru je bezplatná online služba, která umí každých 15 minut zkontrolovat funkčnost a stav libovolného web server/webových stránek, a to i více web serverů současně.

V základním stavu služby se nejedná se o žádné profesionální řešení pro firemní sféru, nicméně i jednoduchý monitoring web serveru se může hodit. Basic State umí například ověřit odezvu DNS, dostupnost web serveru na síti a jeho primární funkčnost, mezi další funkce sledování serverů patří případné ověřování platnosti SSL certifikátů a volitelná kontrola stavu platební brány (například na eshopech). Zjištěné problémy jsou okamžitě odeslány na zadanou emailovou adresu či případně i jako SMS.

Tipy pro webdesign - jedna z vizualizačních částí služby Basic State pro kontrolu funkčnosti, odezvy a dalších vlastností webových serverů/webových stránek