Favicon ikonku stránky, tedy obrázek o velikosti 16×16px, který se
zobrazuje v adresním řádku prohlížeče, na jednotlivých listech
prohlížeče či u stránky přidané v oblíbených položkách, snad
netřeba představovat. V tomto článku se nebudu zabývat kreativní
stránkou tvorby ikony (inspiraci můžete načerpat třeba na Smashing
Magazine), ale spíše technickou stránkou věci (hlavně ikony
s průhledností).
Jak ikony nedělat
V úvodu uvedu postupy tvorby ikon, se kterými jsem se setkal na internetu
a o kterých si myslím, že jsou špatné či nepoužitelné, samozřejmě
s udáním důvodu.
PNG, GIF, BMP + přepis přípony na ICO
Tento způsob spočívá ve vytvoření ikonky ve formátu PNG, GIF nebo BMP
a prostém přepsání názvu přípony na ICO.
Proč je to špatně: Na první pohled tento způsob vypadá
funkčně. Funguje bezvadně ve Firefoxu, Opeře a Chrome. Ve verzi s PNG je
plně využito kvalit tohoto formátu, zejména průhlednost přes alfa kanál,
takže okraje kruhu jsou bez nepřesností. Kamenem úrazu této metody je
nefunkčnost ve všech verzích Internet Exploreru (včetně nejnovější verze
8). Skutečný formát ICO nabízí stejně možností jako PNG, takže není
nutné používat tyto přepisovací náhražky, které navíc nefunguji
v IE.
V Opeře v pořádku, v IE8 nikoliv
PNG, GIF, BMP + uvedení odkazu a typu v hlavičce
Při tomto způsobu použijeme originální soubory BMP, GIF nebo PNG a
v hlavičce HTML stránky přidáme odkaz na tuto ikonu jedním
z následujících kódů:
<link rel="icon" href="/favicon.bmp" type="image/bmp" />
<link rel="icon" href="/favicon.gif" type="image/gif" />
<link rel="icon" href="/favicon.png" type="image/png" />
Proč je to špatně: Stejně jako v předchozím
případě je tato metoda funkční ve Firefoxu, Opeře i Chrome, ale nefunguje
v žádném Internet Exploreru.
Jaký je tedy správný způsob?
Průhledná vs. neprůhledná
Při vytváření ikonky ve skutečném ICO formátu uvedu 2 možnosti.
Jedna se dá použít pouze pro ikonky bez průhlednosti a druhá se dá
použít pro verzi bez i s průhledností.
Průhledná vs. neprůhledná v různých prohlížečích
Png2ico converter
Pomocí tohoto konvertoru můžete jednoduše zkonvertovat PNG soubor
s vaší ikonkou do formátu ICO. Program sice nepodporuje průhlednost, ale
zase umí v případě potřeby do jednoho souboru uložit i ikonku ve
velikosti 32×32px. Program je ke stažení zdarma na těchto stránkách.
Použití programu je velmi jednoduché. V libovolném grafickém editoru si
připravíte svou ikonku ve velikosti 16×16px (případně i 32×32px) a
jedním z následujících příkazů v příkazové řádce provedete
konverzi:
png2ico.exe favicon.ico ico16x16.png ico32x32.png
png2ico.exe favicon.ico ico16x16.png
IcoFX editor
Druhou možností je využít freeware editor IcoFX. Jedná se o vynikající program, který
podporuje tvorbu ikon v 32 bitové barevné hloubce s podporou průhledností
přes alfa kanál (takže vaše průhledné ikonky nebudou mít nevzhledně zvýrazněné zakulacené
hrany). Nechybí možnost do jednoho souboru vložit více variant ikon. Ikony
můžete nakreslit buď přímo v editoru, nebo v libovolném jiném programu
a do IcoFX naimportovat například PNG.
16px vs. 32px
Klasická favicona má mít rozměr 16×16px. Nicméně do jednoho souboru se
dá uložit i více ikon, což podporují oba výše uvedené programy.
A k čemu že to je dobré? Často se mimo klasický rozměr přidává
ještě velikost 32×32px, který je využit, když například v Internet
Exploreru uložíme odkaz na stránku na plochu. Toto použití je celkem
diskutabilní, nemám informace o tom, jak moc se to využívá, takže
přidání tohoto rozměru je čistě na vás.
Odkaz na web na ploše
Závěr
Snad vám tento článek něco dal. Samozřejmě existuje spousta dalších
způsobů. Například různé online generátory, u kterých mám ale špatné
zkušenosti právě s průhledností. Mnou používané metody mám
vyzkoušené a zatím jsem nenarazil na žádný problém.
1. 3. 2009 v 16.38 
Webdesign 
5 komentářů
Opět jsem na Internetu sesbíral spoustu materiálů z oblasti webdesignu,
a proto vám je přináším v tomto článku. Jedná se již o druhý díl,
zde si můžete prohlédnout první
díl.
Ikonky
Jako první začnu ikonkami. Narazil jsem na spoustu zajímavých ikon na
stránkách webdesgnéra Marka Jamese. Mezi nejpodařenější patří sada Silk icon s více než
700 ikonami ve formátu PNG a velikosti 16×16px. Tyto ikony se hodí spíše
do GUI různých programů, ale své uplatnění určitě naleznou i na poli
webdesignu (některé z ikon jsem použil např. ve své bakalářské
práci).
Silk icon
Další set od stejného autora s názvem Flags icon nabízí soubor
247 vlajek států ve velikosti 16×11px. Ikonky jsou přehledně pojmenovány
podle ISO kódů daných zemí. O kvalitě těchto ikon svědčí i to, že
jsou často k vidění na různých (i renomovaných) webech. Zrovna si ale
nemůžu vybavit, kde jsem je naposled viděl…
Další zdroj se týká RSS ikon. Na webu Feed Icons naleznete „oficiální“ RSS
ikonu v mnoha formátech i velikostech. Z tohoto webu je například ikonka
vpravo nahoře na tomto blogu.
Poslední zdroj týkající se ikonek není přímo hotová sada, nýbrž
tutoriál. Na serveru Grafika.cz naleznete Photoshop tutoriál Tvorba ikonky
programu Parallels od Václava Krejčího, který mimo jiné napsal knihu
Adobe Photoshop: design grafiky GUI. Ale zpět k tutoriálu, který je opravdu
kvalitně napsaný, doporučuji přečíst i jeho další tutoriály.
Grafika
Na webu Urban Dirty naleznete spoustu
„dirty“ textur, které by mohly najít využití na některých
specifických projektech.
Státní vlajky ve velkém rozlišení
Když jsem se v předchozím textu zmiňoval o ikonkách vlajek států,
tak teď trochu navážu. Narazil jsem na zajímavý projekt Státní vlajky, kde jsou k dispozici
státní vlajky ve velkém rozlišení.
Písma
Fontů bude tentokrát méně. Za zmínku určitě stojí projekt České fonty, kde je výběr těch
nejlepších fontů, které obsahují české znaky. Další zajímavé fonty se
dají najít také na webu Fawnt, nyní
však již bez češtiny.
Užitečné nástroje
Velmi užitečný nástroj se skrývá pod názvem Browsershots. Zde stačí vyplnit adresu
internetové stránky, vybrat požadované prohlížeče a aplikace vám
zobrazí screenshoty zadaných stránek ve vybraných prohlížečích. Těch je
na výběr opravdu velké množství ze všech hlavních platforem. Doplňkově
se dá nastavit také testování v určitém rozlišení, povolit či zakázat
Javascript, Flash nebo Javu. Výsledné screenshoty lze procházet buď podle
jednotlivých prohlížečů, nebo si můžete stáhnout všechny obrázky
v jednom zipu.
Ukázka aplikace Browsershots
Rychlost vygenerování závisí na vytížení strojů. Některé
prohlížeče jsou hotové rychle, jiné zase mohou trvat třeba půl hodiny.
Služba je zadarmo, je však možnost si koupit placený účet, který má
výhodu v tom, že vaše požadavky budou vyřízeny přednostně.
20. 7. 2008 v 22.47 Webdesign 3 komentářů
Poprvé od založení tohoto blogu měním jeho design. Původní se mi již
moc nelíbil. Byl celkem úzký a také hodně tmavý. Nový je celkově
světlejší, také větší do šířky. Změna proběhla také u písma, už
nepoužívám bezpatkové. Jako hlavní font jsem zvolil elegantnější
patkové písmo.
Původní a nový design tohoto blogu
Aktualizace 18.7.
Trochu jsem ještě vylepšil hlavičku, sjednotil barvy odkazů a provedl
několik dalších drobných změn.
16. 7. 2008 v 22.59 Webdesign 2 komentářů
O víkendu jsem nasadil novou verzi oficiálního Polda webu. Původní verze byla
stará již nějaké 3 až 4 roky, což je v IT světě strašně dlouhá
doba a web působil už na první pohled zastarale. Navíc by se brzy
v souvislosti s Poldou mohlo něco dít, což byla další motivace ke
zlepšení webu.
Nový design je oproti tomu předchozímu barevnější a také je širší.
Původní web byl laděn do šedé barvy, což se k Poldovi moc nehodilo.
V novém webu je použito modro-hnědé barevné schéma, jednotlivé kategorie
v menu jsou doplněny intuitivními piktogramy a také bylo celkově
zvětšeno písmo.
Web byl také zvětšen na šířku, původní verze byla široká cca 650px,
což už je na dnešní LCD či monitory malá hodnota. Pro novou verzi byla
zvolena šířka 960px, která nabízí více
místa, ale stále bere ohled na uživatele s 15'' monitory s rozlišením
1024×768.
Co se týká funkčnosti stránky, tak zůstalo vše při starém, jen bylo
implementováno nové vyhledávání, které je nyní zajišťováno službou Google Custom Search Engine.
Na následujících dvou screenshotech si můžete prohlédnout původní a
novou verzi webu:
Původní design
Nový design
12. 5. 2008 v 16.07 Webdesign Jeden komentář
Většina studentů obvykle nemá dostatek peněz k tomu, aby si mohli
pořídit plné verze programů, z nichž některé stojí i desítky tisíc
korun. To samozřejmě vede k tomu, že studenti raději sáhnou po pirátské
verzi z internetu. Softwarové firmy si však naštěstí začínají
uvědomovat, že pokud nabídnou své produkty pro studenty za výhodnější
ceny, tak na tom určitě vydělají více, než když je prodávají za plnou
cenu a studenti si je raději stáhnou z internetu. V tomto postu zkusím
vypsat několik produktů, které se dají získat v rámci studentské licence
za výhodnější cenu.
Produkty Microsoft
Microsoft nabízí v rámci svého
programu Microsoft Select doživotní licence pro 19 produktů.
Produkty si mohou pořídit všichni žáci, studenti a zaměstnanci všech
akreditovaných škol v České republice (základní, střední i vysoké).
Ceny jsou velmi výhodné a oproti běžným licencím jsou levnější o 85%.
Microsoft Office Enterprise 2007 nakoupíte například za 3214 Kč, což je
určitě výhodnější než cca 20 000 Kč za normální licenci. Většina
programů je dostupná v libovolné jazykové verzi, k dispozici jsou produkty
Office, Windows upgrade, encyklopedie Encarta atd… Více informací
o produktech a také odkazy na obchody, kde můžete nakoupit, naleznete na stránkách
Microsoftu. Zde naleznete informace
o licenci. Produkty zakoupené přes Microsoft Select program samozřejmě
nelze využívat ke komerčním účelům a také k nim není poskytována
telefonická podpora.
Pokud chcete i telefonickou podporu, tak můžete využít aktuální zimní
nabídky Microsoftu, kdy za cca 1400 Kč nabízí balík Microsoft
Office 2007 pro studenty a domácnosti, který můžete nainstalovat až na
3 počítače v domácnosti a obsahuje aplikace Word, Excel, OneNote a
PowerPoint.
Na některých vysokých školách máte také možnost pořídit vývojové
nástroje, operační systémy a další produkty Microsoftu v rámci programu
MSDN
AA.
Produkty Adobe
Od listopadu lze na českém trhu sehnat studentské
licence produktů Adobe, které jsou také za velmi výhodné ceny. Například
balík Creative Suite 3 Web Premium, který obsahuje aplikace Adobe
Dreamweaver CS3, Adobe Flash CS3 Professional, Adobe Photoshop CS3 Extended,
Adobe Illustrator CS3, Adobe Fireworks CS3, Adobe Acrobat 8 Professional, Adobe
Contribute CS3 můžete pořídit za 2400 Kč.
Produkty mohou zakoupit studenti minimálně dvouletého studia na střední či
vysoké škole a opět nelze používat ke komerčním účelům. Podrobnosti
naleznete například na stránkách www.adobeprostudenty.cz. Programy
jsou plně funkční verze a bez časového omezení.
Produkty Autodesk
Autodesk nabízí některý svůj software zdarma ke stažení, popřípadě
můžete objednat instalační média a zaplatíte pouze za dopravu. V nabídce
mají Autodesk Inventor Professional 2008, Autodesk Alias Studio, Revit
Architecture 2008, Revit Structure 2008, Autodesk VIZ 2008, AutoCAD Civil 3D
2008 a AutoCAD Map 3D 2008.
Ostatní produkty Autodesku musíte zakoupit v rámci studentské licence
například u společnosti Xanadu. Studentské licence
Autodesku však nemají neomezenou platnost, jsou typicky na 2 roky. 3ds max
2008 nakoupíte za cca 3000 Kč.
Produkty Eset
Společnost Eset dlouhou dobu nenabízela studentské
licence svého antivirového řešení NOD32. Od letošního podzimu však mají
všichni studenti po předložení ISIC karty nárok na 50% slevu na produkty
ESET NOD32 Antivirus a ESET Smart Security na 1 PC na 1 rok. Podrobnosti
o akci naleznete na stránkách Esetu.
Produkty Corel
Corel má ve své nabídce pro studenty program CorelDRAW Graphics Suite X3,
který ve studentské licenci koupíte za 2400 Kč.
Opět jako u jiných studentských verzí nelze použít pro
komerční účely.
To by bylo asi vše. Samozřejmě existuje více studentských verzí
různých programů, v tomto přehledu jsem vypsal pouze ty, které mi přijdou
zajímavé.
8. 12. 2007 v 12.57 PC, Webdesign, Škola Žádný komentář
