Novinky na blog.webprogress.cz

Řád poctivého grafika

Mon, 07 Jun 2010 07:53:59 GMT

Každý webový grafik po celou svoji existenci se neustále vzdělává a získává také určitý skill ne jen ve své kreativitě a šikovnosti, ale také v tom, jak připravit zdrojová data pro kodéry, aby jim usnadnili co nejvíce práci při řezání grafiky. Podíváme se na ty nejzákladnější pravidla, který by měl každý dobrý grafik znát a řídit se jimi.

Vrstva 1, 2, 3… 27… 363

Zlatá funkce, která nás už doprovází mnoho let, jsou vrstvy, bez kterých by to nešlo a díky bohu za ně. Ale lámat ruce těm, kdo dokáže vyplodit grafiku, kde je již zmíněných 363 vrstev, ale žádná z nich nemá jméno. Ano, ono to i přes to jde, ale to by se člověk mohl uklikat. Proto každou vrstvu pojmenovávejte názvem, který jí patří.

Vrstvy nejen do složek ale i obarvit!

Stejně jako vrstvy, utvářejme také složky, kde můžeme shromažďovat vrstvy, které vytvářejí nějaký celek. Např. vytvořme složku „Hledej“ kde nalezneme jak grafiku inputového pole, tak tlačítko pro vyhledání, popřípadě další grafiku která je součástí vyhledávání. Takto oddělujeme jednotlivé seskupení vrstev a dále je dobré tyto složky zařadit do složek, které utvářejí základní díly grafiky. Těmito základními díly je Hlavička, Záhlaví (jestliže nezabírá tak významného místa v grafice, může být i součástí Hlavičky), Obsah a Pata. Tyto základní 4 díly grafiky je dobré mít odděleny i barevně. Tím se pak obarví i zbylé složky a vrstvy obsažené v nich. Oddělíme tak přehledně grafiku na jednotlivé sekce, v kterých se lépe orientujeme.

Není pixel jako půl pixel…

Tento neduh Photoshopu bývá občas oříškem nejednoho grafika. Photoshop totiž, na rozdíl od Illustratoru nebo fireworksu nepracuje jen s celými pixely, ale i tzv. „Půlpixely“ u vektorových objektů či shape objektů. U jednotlivých objektů se to projeví neostrostí hran, u okrajů objektu se objeví téměř neviditelné čáry, které však mohou být matoucí a můžou být považovány jako záměr, než za chybu. Vyvarovat se tomuto můžeme pomocí mřížky, kdy jednotlivé objekty, přichytáváme k mřížce o celých pixelech. Já však doporučuju všechny objekty kontrolovat, aby lícovali přesně tak, jak chceme.

Vodítka, které nás vedou, ne hltí procesor.

Používat vodítka je určitě potřeba, zaručují nám přesnost zarovnání jednotlivých objektů, ale měli bychom je používat střídmě. Ve velkém množství nám při vypínání/zapínání vodítek protahuje čas jejich překreslování. Důležité je vyznačit kraje dokumentu a jednotlivé sekce. Vyznačovat vodítky kraje každého tlačítka není moc efektivní.

Zlatý hřeb – Poznámky

Jestliže máme v grafice prvky, které nejsou součástí PSD souboru, jako fotografie z fotobank, vzorky pozadí, písma atd., dejme o nich vědět, kde je ostatní najdou. Jednoduchý nástroj na poznámku usnadní dodatečné odpovědi na tyto otázky.

Zobrazení FB aplikací na svých stránkách

Tue, 01 Jun 2010 12:17:14 GMT

Teď když máte vytvořenou firemní stránku na Facebooku (FB) je třeba o tom dát vědět i na svém webu. Je spousta možností jak na svých stránkách upozornit na firemní profil na FB, může to být pouhé „Líbí se mi“ či FAN box, ve kterém můžete zobrazovat nejen vámi zvolený počet fanoušků, ale i nejnovější příspěvky. Jako bonus můžete FAN box zastylovat do barev vašeho webu.
Další z možností je využití FB komentářů přímo pod článkem na vlastní webové prezentaci.

Nejprve si ukažme klasický FAN box, který už má dneska na svých stránkách leckdo, tímžto pádem to vezmu velice zlehka.

Do stránky vložte tento kód:

 <fb:fan width="240" css="/styles/facebook.css" height="200" connections="12" stream="0" profile_id="131747207560"></fb:fan>

profile_id – ID vašeho firemního profilu na FB
stream – zobrazení nejnovějších příspěvků
connections – počet zobrazených fanoušků
css – link na CSS styly

vše o FAN boxu je podrobně popsáno na stránkách pro developery na FB

FAN box je jednoduchá záležitost, kde si vložíte jenom kousek kódu na své stránky a vše funguje jak po másle. Zde na blogu jej můžete vidět již několik týdnů a zmínil jsem ho pouze pro úplnost.

Pro zprovoznění např. komentářů musíte odvést o pár kroků více, abyste dosáhli vytouženého cíle. Nebojte se není to nic složitého, jak to většinou bývá, jde jenom o pár „prkotin“ na které si člověk někdy přijde sám a nebo je dostane naservírované na podnose :) ale dost řečí, pojďme na to – na FB si vytvořete aplikaci.

Důležité je určit správnou URL adresu webu, na kterém komentáře poběží. Nemusíte mít strach pokud vyvíjíte web na jiné doméně než ve skutečnosti poběží, protože tuto informaci můžete kdykoliv změnit v nastavení aplikace.

na následující stránce vidíte vygenerovaný App ID, které budete potřebovat pro inicializaci.

a teď už máte vyhráno a stačí pouze nakonec stránky vložit kód pro inicializaci

<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({appId: 'App ID', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.type = 'text/javascript'; e.src = document.location.protocol + '//connect.facebook.net/cs_CZ/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); </script>

A pod článek samotný kód pro komentáře

<fb:comments numposts="10" width="650" xid="URL adresa článku" simple="1"> <fb:title>Komentáře</fb:title> </fb:comments>

numposts – počet komentářů na stránce
xid – jedinečná URL adresa na vašem webu pro určení k čemu komentář patří
simple – =“1“ -> box s komentáři nemá zaoblené rohy

opět všechny atributy pro komentáře na developers.facebook.com

Pro všechny ty, kterým toto nestačí a chtějí zkoušet další aplikace je určen web http://developers.facebook.com/, kde najdete veškerou podporu pro aplikace tkz. API
Nezbývá než popřát „good luck“ při objevování neustále se rozrůstajících funkčností, které nabízí fenomén dnešní doby FACEBOOK. Jak někdo moudrý pravil: „Není čas ztrácet čas“, proto se dejte do práce a poskytněte uživatelům veškerý komfort.

P.S. pro nefiremní webíky: jen blázen by nechtěl na svém webu diskuzi zdarma, která váš článek může světelnou rychlostí rozšířit po TOM internetu :)

Začínáme s propagací na Facebooku

Fri, 28 May 2010 13:41:25 GMT

Víme všichni, že sociální sítě a zejména pak Facebook jsou stále horkým tématem. Dokazuje to fakt, že svůj profil má založeno téměř 3 miliony českých uživatelů. Potenciálu Facebooku se snaží využít firmy k propagaci značky, výrobků i služeb.

Pokud patříte mezi ty, které vstup a propagace na sociální síti Facebook teprve čeká, bude vám můj článek malou nápovědou jak udělat první kroky.

Stránka nebo Skupina?

K propagaci nabízí Facebook dva hlavní nástroje kterými jsou založení Skupiny nebo Stránky.

Je důležité se rozhodnout jaký nástroj si vyberete, protože není možné měnit Skupinu na Stránku a opačně. Stránka nabízí více možností a indexuje se ve vyhledávačích, což znamená, že je dohledatelná například pomocí Google. Velký rozdíl mezi Skupinou a Stránkou je také v tom, že Skupina nenabízí možnost stát se fanouškem, je ale vhodnější například pro organizaci různých akcí nebo šíření virálu. Pokud chcete založit klasický firemní Facebook, musíte vždy použít Stránku, protože Facebook ve svých pravidlech použití stanoví, že Skupinu pro tyto účely použít nelze.

Kde založit?

Založení Stránky nabízí Facebook odkazem na své titulní stránce. Přímá adresa pro založení
Stránky je http://www.facebook.com/pages/create.php a pro Skupinu http://www.facebook.com/groups/create.php. V případě založení Stránky si můžete zvolit zda chcete založit Oficiální nebo Komunitní stránku.

Při vyplňování potřebných údajů je třeba dbát na zařazení do správné kategorie podnikání. Důležité je také promyslet pod jakým názvem se budete prezentovat, protože jeho změna znamená začít od začátku a tím pádem přijít o všechny nasbírané fanoušky.

Jak nasbírat fanoušky?

Máte založenou firemní Stránku, vyplněné informace a vložené logo. Nyní přichází čas abyste o sobě dali vědět a získali pevnou základnu fanoušků. Jak na to? V první řadě oslovte všechny přátele a známé, které máte na soukromém profilu. Zapomenout byste neměli ani na své zaměstnance, určitě se rádi připojí a doporučí stránku dalším svým kamarádům pomocí jednoduché funkce Navrhnout přátelům. Další z možností jak se přátelé přátel dozví o existenci vaší Stránky je to, že se jim v Hlavních příspěvcích zobrazí informace o tom, že Kája Novák se stal fanouškem Hořických trubiček. To je může nalákat k tomu, aby se také stali fanoušky.

Běžnou propagací vaší Stránky je umístění ikony Facebook nebo tzv. fan boxu na webových stránkách, blogu nebo třeba newsletteru. O existenci profilu se můžete zmínit v e-mailovém podpisu na tiskovinách…

Další možností jak získat příznivce je využití PPC reklamy v pravé části Facebooku. Jedná se však o placenou službu.

A co dál?

Firemní Facebook máte, fanoušky také a nyní přichází čas začít s profilem pracovat. Je důležité si stanovit jakých cílů má propagace touto cestou dosáhnout a jak chcete na své příznivce působit. Obecně se dá doporučit zveřejňování takových informací, které přitahují pozornost a zákazníci se je nikde jinde nedozví. K tomu nabízí Facebook řadu nástrojů. Mezi základní patří:

Zeď – místo pro hlavní komunikaci: zajímavosti, pikantnosti, co se děje v „zákulisí“ slevy, akce, novinky nejen s firmy ale např. info o nových produktech…
Fotogalerie - fotky z kanceláře, provozovny, firemního večírku, výrobků, sponzorských akcí…
Videa - video manuály, instruktážní videa, upoutávky na pořádané akce…
Diskuse a ankety na různá témata – nové produkty, služby…
Události – zajímavé akce kterých se účastní vaše firma. Veletrhy, výstavy, pořádaná školení, soutěže…
Odkazy
Aplikace – ty si můžete nechat vytvořit speciálně na míru a nebo využit ty, které sociální síť nabízí. Zajímavé technické tipy a návody jak pracovat s Facebookem můžete najít na stránkách Facebook Developers.

Optimálně byste měli fanoušky zásobovat informacemi pravidelně, ale v rozumné míře. Doporučení zní minimálně 1x za měsíc a maximálně 1x za týden. Při nepřiměřeném zahlcování příznivců informacemi se vám lehce může stát, že si zprávy z vaší firemní Stránky jednoduše vypnou.

Závěr

Dejte svým příznivcům na Facebooku něco navíc! To, že jsou vašimi fanoušky by jim mělo přinášet nějaké výhody. Například slevy, poukázky, předběžné informace o chystaných akcích, soutěže a spoustu jiných.

Jak může firemní profil vypadat a co všechno lze fanouškům nabídnout se můžete inspirovat například u Stránky Red Bullu nebo Harley-Davidson Motor Company, které patří mezi deset nejlepších.

Návrh webu - hlavní zásady

Thu, 06 May 2010 12:06:03 GMT

Nenuťme uživatele přemýšlet, je heslo, se kterým se každý z nás již nejednou setkal. Úplně vidím sebe i většinu z vás, jak při tomto výroku svorně pokyvuje hlavou na znamení souhlasu, ale ruku na srdce, kdo pro jeho naplnění udělal více, než jen přitakal? Lehce se souhlasí, hůře se naplňuje.
Když nemáme uživatele nutit přemýšlet, kdo tedy má přemýšlet?

Proveďte uživatele vašim webem

V počátku masového využívání internetu, sahajícího do poloviny devadesátých let minulého století, si většina uživatelů brouzdání „řádně užívala“. Neexistovali fulltextové vyhledavače a k informacím jsme se většinou nedostali jinak, než klikáním. Internet přímo nutil klikat zleva doprava, a pokud jsme chtěli něco relevantního najít, vláčel nás po stránkách celé hodiny, nutil nás skákat z jednoho odkazu na druhý, ze stránky na stránku. Nutno podotknout, že to bylo nové a zábavné, dá se říct, že tenkrát byl internet pro mnohé uživatele cílem.
Dnes je trend zcela opačný. Uživatel očekává, že ho naším webem provedeme, připravíme pro něho jasnou, rychlou a srozumitelnou cestu k potřebným informacím či k dokončení objednávky.

Jak na to

Navrhujme strukturu webu a webové rozhraní, které bude intuitivní, snadno použitelné. Takové rozhraní, ve kterém vše jednoduše nalezneme, případně se ho snadno a intuitivně naučíme ovládat.
Mechanismus ovládání a jednotlivé funkce musí být předvídatelné. V opačném případě dochází na straně uživatele webu k frustraci.

Konzistence znamená stabilitu

Dávejme uživateli informaci o tom, kde se právě nachází, ať se jedná o strukturu webu či jednotlivé kroky v nákupním procesu. Není nic horšího, než se na webu ztratit. Snažme se uživatele zasadit do kontextu celého webu.

Logické objekty

Uspořádejme informace na stránce do souvislostí a snažme se tvořit vizuální hierarchii, která odpovídá potřebám uživatele, vždyť rozložení stránky je klíčovým bodem úspěchu a to ať se jedná o eshop či informační web.
Sestavujme jednotlivé funkce (např. výběr velikosti, barvy, tlačítko koupit) do logických celků a nenuťme uživatele přeskakovat z různých částí stránky s cílem provést konkrétní úkol.
Nejdůležitější informace a funkce na stránce zvýrazněte graficky – barvou, velikostí či tvarem.

Maximální počet funkcí a fičur

Odstraňme z webu všechny funkce a fičury, co tam nepatří a nemají na něm své opodstatnění. „Má to každý eshop“ není argument pro dobré fungování nově vznikajícího díla.
Má význam řadit výrobky v kategorii dle názvu, ceny, výrobce…, když kategorie obsahuje 10 položek? Nemá. To, že tyto funkce nabízejí ostatní eshopy, neznamená, že to funguje, nebo že je funkce využívána. Našim cílem není přeci ukázat, kolik jsme schopni vymyslet a naprogramovat funkcí.

Závěr

Věřím, že se mi podařilo u vás vyvolat otázky nad malými, „nepostradatelnými“ funkcemi vašich webů či eshopů. Není nutné dělat věci složitější, než ve skutečnosti jsou.
Podařenou ukázkou může být jednoduchý a přehledný web, který jsme nedávno spustili pro službu MediaPost, či netradičně pojatý eshop s nafukovacími čluny GUMOTEX.

Validace

Wed, 14 Apr 2010 08:22:08 GMT

Jednou z důležitých podmínek pro úspěšný provoz internetových stránek je jejich tzv. „validita“. Zjednodušeně se dá napsat, že se jedná o dodržení standardů napsaného programového kódu stránek tak, aby tento zápis odpovídal předpisům mezinárodního konsorcia firem W3C, tj. konsorcia významých softwarových a hardwarových firem, mezi které patří také výrobci internetových prohlížečů. Pro laiky tuto větu zjednoduším: Validace je kontrola programového kódu stránek podle předepsané normy.

Programový kód stránek se např. v Internet Exploreru zobrazí po stisku pravého tlačítka myši na stránce a vybrání volby „Zobrazit zdrojový kód“

Kontrolu validity může provádět i laik a to díky tzv. validátorům. Validátor je dostupný na internetu a jednoduše do něj zadáte internetovou adresu kontrolované stránky. Následně validátor zobrazí výsledek, který obsahuje buď sdělení, že je stránka validní, a nebo seznam připomínek a chyb, které je potřeba opravit.

ukázka validní stránky z validátoru: http://validator.w3.org/

Aby to nebylo tak jednoduché, tak každá stránka může být psaná v různé verzi HTML a k tomu ještě dle různého předpisu tzv. DTD (Document Type Definition), který prohlížeči říká, jaký programový kód může očekávat. Nejnovější používaná verze HTML je XHTML 1.0 s typy DTD (Strict, Transational a Frameset). Laik může verzi HTML ve kterém jsou stránky psány zjistit ze zdrojového kódu stránek. Bývá uveden na prvních řádcích.

Ukázka definice typu HTML stránky

Popis verzí HTML jsem se snažil co nejvíce zjednodušit, takže pokud vás zajímají podrobnější a přesnější informace, můžete se podívat na wikipedii (HTML, XHTML).

Obecně se dá říci, že pokud je stránka napsaná validně dle posledních standardů, měla by se správně zobrazit ve většině známých internetových prohlížečích (Internet Explorer, Mozilla, Opera, Safari)

A co si ještě odnést?

Validita je podmínka nutná, nikoliv dostačující
Při stavbě kvalitních internetových stránek je potřeba se také zaměřit na správnou volbu struktury stránek, na správné rozmístění prvků na titulní stránce a podstránkách, na přehledném grafickém ztvárnění stránky, vhodné volbě ergonomie ovládání stránek a v neposlední v řadě se zaměřit na kvalitní a nejlépe jedinečný obsah.
Pokud stránka validní není, tak lze očekávat:
- Chybné zobrazení v různých prohlížečích
- Špatnou indexaci ve vyhledávačích
- Pomalé zobrazování stránek
- Chybné zobrazení v budoucích verzích prohlížečů
- Pomalou údržbu pro programátora stránek
Validátor
- Validátor HTML
- Vylidátor stylu CSS

Supermarket vs. Eshop

Fri, 09 Apr 2010 12:02:55 GMT

Brouzdám si s nákupním košíkem mezi regály. Tady máme ovoce a zeleninku - šup s ní do košíku, který v zápětí strhávám doprava mezi regály s makrelami a sardinkami. Další zatáčka je stoosmdesátka levotočivá, beru jeden olej, jeden ocet a šup pravotočivá, těsně míjím ostrůvkové regály se zbožím v akci… Už doma si píšu seznam tak, abych měl jednotlivé položky rozepsané podle toho, jak budu míjet regály v obchodě. Šetří mi to čas i nervy. Pokud ale nejde o plný žaludek, nýbrž třeba o elektroniku, nejezdím ji nakupovat do supermarketu, kupuji ji na internetu. Člověk rád ušetří čas, a když nakoupí u důvěryhodného internetového obchodníka, tak si stále častěji ušetří i nervy (při koupi i v případě pozdějších reklamací).

Posledně jsem přes internet kupoval fotoaparát. Věděl jsem zhruba i značku, kterou jsem chtěl. Do vyhledavače jsem zadal "fotoaparát Nikon" a proklikával se výsledky.

Eshop nemá "hlavní vchod"

První, velmi podstatný, rozdíl mezi supermarketem (kamenným obchodem) a eshopem tkví v tom, že kamenné obchody mají pouze jeden vchod, zatímco eshop má přesně tolik vchodů, kolik má zaindexovaných stránek ve vyhledavači. Mnoho lidí zde asi překvapí, že na okřídlené "Vítejte v našem super eshopu" většina zákazníků nenarazí.

Faktem je, že většina klientů stráví 80 % času připomínkováním a úpravami úvodní stránky eshopu a ostatním stránkám už tolik pozornosti nevěnují. A to i přesto, že pro uživatele elektronického obchodu je velmi důležitá právě ta stránka, na kterou jej vyhledavač přenese (tzv. landing page) což je u eshopu velmi často seznam produktů nebo přímo stránka s konkrétním produktem.

Důležitá je dobrá navigace mezi skutečnými i virtuálními regály

Když se dostanu do neznámého supermarketu a mám koupit konkrétní věc, stoupnu si do uličky a hledám pomocí cedulek ten "správný regál", když to nezabere, ptám se prodavače (pokud tam nějakého najdu), protože mi nic jiného nezbývá. Neodcházím, další kamenný obchod je totiž většinou v nedohlednu.

Na internetu je tomu jinak. Vyhledavač ve výsledcích vyhledávání ukáže hned několik obchodů a po kliknutí na kterýkoliv z výsledků nás (většinou) zavede k požadovanému "regálu" nebo přímo na konkrétní produkt. Takže pokud se jako zákazník v eshopu „ztratím“ nebo nemůžu něco najít, nezavolám si prodavače, aby mi poradil, ale prostě jen zavřu okno prohlížeče a jdu ke konkurenci.

V každém eshopu je důležité, aby zákazník věděl:
1. kde se v eshopu právě nachází (drobečková navigace, menu)
2. jak se dostane k jinému regálu (například k další značce) nebo k pokladně
3. kde je nákupní košík a jak vyřídí svůj nákup

Děkuji, zaplatím

Jsem v supermarketu a stojím ve frontě u pokladny. Čím delší fronta a čím víc dětí, tím víc peněz mě nákup stojí. Ilustruji to na následujícím rozhovoru s dcerami:
"Tatí, můžu si koupit tady to lízátko? Prosím, prosím."
"Ne!"
... 2 minuty v podobném duchu…
"Tatí, tak aspoň tady ty žvýkačky…“
"Ach jo, no co s tebou…“
"No tak já chci taky ty žvýkačky tatí, když může Bára."

Takhle pěkně to funguje v kamenných obchodech, ale ne na internetu.
Pokud se před posledním krokem a kliknutím na "Potvrdit objednávku" (třeba s tím Fotoaparátem Nikon) z pravé reklamní lišty dozvím, že eshop nabízí velmi výhodně Fotoaparát Olympus, který je o 3000,- Kč levnější a velmi podobný tomu co mám zrovna v košíku, prostě nákupní proces přeruším a kliknu na tento produkt. Je to škoda, protože nákup už mezitím mohl být dokončen.

Když zákazník klikne na tlačítko "Do košíku" nebo "K pokladně" není vhodné jej rozptylovat zbytečnými informacemi, které s procesem „dokončení objednávky“ nesouvisí! Můžeme ho totiž lehce ztratit.

Pod čarou

Zásadní rozdíl mezi stylem nakupování žen a mužů tkví v tom, že většina mužů ví, proč do kamenného obchodu míří, co tam chce koupit a přemýšlí, jak na to, aby co nejrychleji vypadl. Zatímco ženy rády prochází obchody a přestože chtějí koupit konkrétní věc, jsou schopny strávit v obchodě několikrát více času prohlížením dalšího zboží.

Největším objevem pro mě bylo, když jsem zjistil, že (některé?) ženy takto nakupují i na internetu… :)

404 Not Found – skrytý ukazatel kvality webu

Fri, 02 Apr 2010 14:35:57 GMT

Připomeňme si ve stručnosti k čemu tato stránka slouží:

Kdy se má chybová stránka zobrazit?

již neplatný odkaz v rámci vlastního webu nebo i jiného webu
zastaralý nebo nepřesměrovaný odkaz ve vyhledávači nebo zastaralý odkaz v bookmarku uživatele
chybně zapsaná nebo úmyslně modifikovaná URL

Zobrazení stránky můžeme ještě též dělit na tzv. soft 404 a hard 404 – o co se jedná? V podstatě zjednodušeně řečeno pod soft 404 si můžeme představit jako přesměrování na úvodní stránku. Pokud tedy příchozí se odkazuje na neexistující stránku je v rámci webu přesměrován na úvodní stránku – takže vlastně ani nezná příčinu proč se tak stalo – z tohoto důvodu není dobré tento soft 404 aplikovat.

V případě hard 404 již je nám serverem předsunuta chybová stránka, tedy uživatel bezpečně ví, že je něco špatně a co, to by se měl dozvědět právě z této stránky.

Co by měla dobrá chybová stránka obsahovat?

Omluvu

Představme si že uživatel si uloží stránku do svého bookmarku, a my se rozhodneme, že článek jednoduše přemístíme někam jinam na webu resp. mu změníme url nebo jej zrušíme. Je to jeho chyba nebo naše? I kdyby byla jeho, například se přepsal v url nebo ji úmyslně modifikoval, je na místě se velkoryse omluvit.

Popis hezky a česky toho co se vlastně stalo

Tedy ne Error 404, not found. Uvědomme si, že po uživateli nemůžeme chtít, aby si zjistil, co to znamená, napišme mu, že stránka se na serveru nenachází a z jakých možných příčit tomu tak je. Samozřejmě pro již znalé můžeme někde nenápadně v rohu či vtipně do grafiky zobrazit kód 404 aby těm bylo na první pohled jasné co se stalo a mohl intuitivně pokračovat dále. Mám takovou zkušenost že kód 404 je již natolik zažitý, že jen když někde uvidíme toto seskupení čísel hned nám to evokuje tuto chybu a to i v případě pokud jej uvidíme někde na ulici, je to v podstatě taková dopravní značka „slepá ulice“ musíme couvnout a k cíli pokud ještě cíl existuje se vydat jinou cestou.

Nabídka toho co dál udělat

Každému kdo se ocitne před slepou ulicí, ukažme, kudy vede objížďka a například mu nabídněme vyhledávání, nebo alespoň mapu webu či tlačítko na úvodní stránku.

Ideální se mi jeví za toto nedopatření uživatele nějak odměnit. Proto je dobré ošetřit tuto chybu nejen pomocí vlastní chybové stránky, která ladí s designem webu, ale navíc vtipnou formou upozornit a zároveň pobavit uživatele.

Zde je několik webů které v této problematice mají ještě co dohánět

A tady několik vzorových ukázek jak to má vypadat

Jako nejzdařilejší co jsem zatím viděl bych vyzdvihl linku 404 podzemní dráhy jako z matrixu vystřižené, to je zkrátka radost dostat se tomto webu na tuto stránku… :)

Errorům zdar!

Twitter, videa, fotky, blogy a ti ostatní

Tue, 16 Mar 2010 12:18:29 GMT

Nevím kolik lidí napadne, při přečtení titulku, že se v tomto článku budu zabývat, sdílením obsahu napříč internetem. V dnešní době Facebooku, kde Vás přátelé zaplavují obrovským množstvím dat, si musí člověk vybrat, zda od daného přítele chce obsah „konzumovat“ v ruku v ruce s tím, zda se chce vzdát přátelství i když je jeho počínání otravné!
Proto jsem se snažil hledat jinou službu, která by mi pro sdílení obsahu více „sedla“ a zde přichází na řadu Twitter.

Twitter Vs. Facebook

Obrovská výhoda v Twitteru, je ta, že se přátelství nemusí tzv. oplácet, neboli pokud si mě někdo přidá mezi přátele (zde mezi Following), tak já toto přátelství nemusím, ale můžu oplatit, neboli přidám si ho také do Following. V tomto vidím opravdu obrovskou výhodu, více o začátcích s Twitterem si můžete najít na googlu, tímto se zde zabývat nechci.

Odkazy, obrázky, videa…

Přece jen omezení twitteru v podobě 140 znaků na zprávu, sebou nese určitě problémy, které ovšem jdou obejít, pomocí různých služeb.
Zkracovače odkazů, slouží ke zkrácení jakéhokoliv odkazu, např. bit.ly, jdem.cz, 4sq.com…
Upload obrázku s vygenerováním krátké URL, např. twio.cz, img.ly, twitpic.com…

Posterous, víc než jen blog

Ukázka funkčnosti jde vidět na mém testovavím posterous blogu. Zřízení a hlavně sdílení obsahu je otázkou pár minut, pokud chcete sdílet fotky uložené na svém počítačí, tak nejlepší služba, se kterou posterous můžete propojit je post.ly, napíšete zprávu jako na twitteru, vyberete fotky, video, hudbu nebo třeba text k nahrání a dáte Post, služba soubory nahraje a i s textem hodí na Váš posterous a pokud si nastavíte autopost, tak tento příspěvek může automaticky vložit na twitter, facebook, a mnoho dalších služeb ;)

Posterous toho ovšem nabízí mnohem více, od možnosti fungování blogu na samostatné doméně, přes změnu vzhledu až po sdílení např. videa z youtube pomocí jednoho tlačítka, pokud nehledáte blog v pravém slova smyslu a spíše chcete sdílet obsah, tak Posterous a Twitter je pro Vás to pravé.

Závěrem

Snad jsem vám tedy v rychlosti ukázal, jak můžete Twitter využívat a používat ke sdílení. Pokud s Twitterem nemáte žádné zkušenosti, tak zkuste pohledat na odkazu viz. víše. Můžete si mě pak dokonce přidat @r4ms3scz :)

Ajax a tlačítka zpět vpřed prohlížeče

Mon, 15 Mar 2010 16:44:14 GMT

Když do své webové stránky začnete zakomponovávat AJAXové prvky, určitě se setkáte s problematikou nefunkčního tlačítka zpět. Stránka nemění svou adresu a tedy se nemění navigace tlačítky zpět a vpřed.

Jako většina problémů i tento má své řešení. Skrývá se v části adresy za mřížkou, kterou budu nazývat „hash“. V původním významu je tato část využívána k identifikaci „kotvy“ ve stránce. Prohlížeč se snaží namířit kurzor na na objekt se stejným názvem, jako má kotva. Pokud taková kotva ve stránce nexistuje, prohlížeč nědělá nic a my této situace využijeme pro modifikaci adresy.

Při klikání uživatele na odkazy mu měníme obsah stránky pomocí javascriptu, případně můžeme duplňující data stahovat ze serveru pomocí AJAXu. Při každé změně upravíme hash část adresy a díky tomu jsme schopni se vracet pomocí tlačítka zpět a vpřed.

Jako příklad uvednu stránku s kontakty. Na hlavní stránce jsou uvedeny hlavní informace, informace o pobočkách jsou rozděleny na vlastní stránky (stránky jsou téměř identické, mění se pouze malá část). Taková stránka je ideální na využítí AJAXového přepínání obsahu.

Multi-flash fotografie

Mon, 22 Feb 2010 16:54:57 GMT

Jste-li vlastníkem fotoaparátu a externího blesku, který lze dálkově odpalovat, můžete si vyzkoušet tento jednoduchý efekt. Takže, co pro dnešek budeme potřebovat? Jak již bylo řečeno, fotoaparát, externí blesk, který můžeme dálkově odpálit a nesmíme zapomenout také na stativ. Osobně jsem použil nikon D90 + blesk Metz-58 AF v commander módu. Jako model nám posloužilo Petrovo nové MG :).

Co znamená Multi-flash fotografie?

Na internetu, v knížkách a u fotografů můžeme tento název v různých obměnách. Tento článek je založený na principu fotoaparátu pevně přichycenému na stativu a jednoho externího blesku, pomocí kterého nasvítíme vícekrát scénu z různých úhlů a výsledné fotografie pak spojíme a doladíme pomocí Photoshopu.

Plným plynem za focením

Postup byl jednoduchý. S Petrem jsme vybrali zajímavé místo, nasměrovali auto správným směrem a mohli se pustit do focení. U tohoto focení je nutností, aby fotoaparát byl stále ve stejné pozici pro danou sérii fotografií. Ale co si budeme povídat, i nemalé odchylky dnes ve Photoshopu není problém doladit, ale tuto práci si v dnešním článku odpustíme a fotoaparát necháme stát pevně na svých nohou. S odpalováním blesků je jen na vás a možností vaší značky. U Nikonu a podporovaných blesků lze nastavit tzv. commander mód, který umožňuje pomocí interního blesku zrcadlovek Nikon odpalovat některé dostupné externí blesky na trhu. Tato metoda má své pro a proti. Například kdybychom odpalovali běžným odpalovačem blesků, odpadají nám problémy typických situací "blesky na sebe nevidí" atp. Petr se ochotně chopil blesku a směroval ho z různých úhlů na auto. Na pomoc si vezmeme fotografii, viz níže pro lepší představu. Jestliže nemáte jasnou představu o tom, z jakých míst blesk odpalovat, nafoťte toho více a doma v klidu a v teple si pak vyberte, co použijete.

Finální část

Vracíme se řádně vymrzlí domů a sedáme k PC, kde s trochou precizností pospojujeme nafocené snímky. Už při focení je důležité si představit, jak to budeme dávat do kupy. Je dobré si nafotit jednu fotku úplně bez blesku, která nám pomůže ve výsledku vyretušovat všechny místa, kterých se chceme zbavit. Otevřeme si vybrané snímky v Photoshopu a dáme si je na vrstvy tak, jak budeme jednotlivé části přidávat a ubírat. Na každou vrstvu aplikujeme masku a jednoduše štětcem přidáváme (bílá barva štětce) nebo ubíráme (černá barva štětce). Až dosáhneme efektu, s kterým budeme spokojeni, sloučíme všechny vrstvy a doladíme drobnosti, barvy, kontrast, jas atd.

A výsledek můžeme porovnat zde bez blesku a s bleskama. Proč si trochu nepohrát a dosáhnout zajímavého efektu? Posuďte sami ;)

RSS v Ajaxu

Fri, 12 Feb 2010 07:29:33 GMT

V tomto článku bych vám rád ukázal jak jednoduše vložit RSSko na stránky pomocí AJAXu.
Proč zrovna pomocí AJAXu?
Už se vám někdy stalo, že se vám vaše stránky dlouho načítají nebo v horším případě vůbec nenačetly kvůli „závislosti“ na jiném webu, který má zrovna výpadek? Tak právě proto AJAX.
Osobně jsem AJAXu odolával dlouhou dobu, než jsem poznal, že se není čeho bát a dá se využít na spoustu věcí, které jsme předtím museli složitě obcházet, abychom docílili kýženého výsledku. Jenom pamatujte na starou známou pravdu „nic se nemá přehánět“, jinak „zdrojáky“ přerostou přes hlavu ;) Řečí a pouček bylo dost, proto se pustíme do práce. Jak víte AJAX je …

Jedním z mnoha webů, kde jsme pro zobrazení RSSka použili tuto „technologii“ je www.tvorime.cz (pravý sloupec zprávy z twitter.com)

jak jste se mohli dočíst na wikipedii jde o javascript a v naší firmě pro jeho používání „vládne“ jQuery, se kterým se práce v tomto skriptovacím jazyce stala zábavou.

Abychom mohli využívat jQuery, musíme si stáhnout výše zmíněnou javascriptovou knihovnu jQuery a přidat ji do stránek.

O stažení a zpracování samotného RSSka se zde zmiňovat nebudu, protože o tom bylo naspáno spousta článku třeba tento na intervalu já zde jenom ukážu samotné „umístění“ vytvořeného HTML bloku.

Do stránek vložte javascriptovou funkci

 <script>Twitter()</script>
<div id="twitter"> </div>

samotná funkce vypadá takto

function Twitter() {
 $.get(
  "/twitter", //skript či URL na které najdeme HTML blok s aktuálním RSSkem
  function(data){
    /*
   podmínka pro zajištění jestli vygenerovaná data obsahuje určitou část řetezce,    která nám zajistí správnost dat
   */
   if (data.indexOf('a href="http://www.twitter.com/MartinVlk"') > 0) {
    // vložení HTML do divu s id „twitter“
    $("#twitter").append(data);
    // zaktivnění divu s id „twitter“
    $("#twitter").show();
   }
  }
 );
}

Vánoční bowlování

Mon, 21 Dec 2009 12:31:11 GMT

Letošní Vánoční večírek se nesl v koulovacím duchu. Ježíšek nám nadělil Wiičko. Díky Ježíšku!

Fotogalerie z vánoční akcičky

PF 2010 - sestav si svůj Betlém

Mon, 21 Dec 2009 09:02:08 GMT

http://pf2010.webprogress.cz/

Silverlight 3

Mon, 16 Nov 2009 00:00:00 GMT

Silverlight, pro ty kteří o něm neslyšeli, je technologie Microsoftu umožnující vývoj aplikací na internetu. V prvních verzích byl Silverlight srovnáván, v té době s již běžně používaným, Flashem. Ve spoustě článků stále najdete věty jako "To co umí Silverlight umí Flash taky a ještě lépe". S odstupem času, a při vydání již třetí verze, můžeme tyto srovnání brát jako zcela lichá. Tam kde vyniká Flash (oživení statických HTML stránek) není žádná tendece prosazovat Silverlight. Ten se zaměřil na tvorbu celé aplikace a HTML stránka přezvala roli pouhého parkoviště.

Novinky ve 3. verzi

Silverlight 3 v sobě integruje hadwarovou akceleraci grafický operací a přehrávání videa. V kombinaci s IIS Media Service poskytuje efenktivní možností streamování videa přes HTTP (demo). Jednou z nejlepších indicíí, kam se snaží Microsoft technologii posunout je podpora běhu mimo prohlížeč (Out of Browser Support). Aplikace lze tak provozovat v offline módu, provádět změny a po připojení do online módu synchronizaci dat zpět na server. Dále zvyšuje kompatibilitu běhu v prohližeči pomocí tzn. deep-linking. To umožňuje proklikávání aplikací pomocí tlačítek zpět/vpřed prohlížeče. Tato technika je přejata z Ajax aplikací, jako je například Facebook. Mezi dalšími vlastnostmi je lepší podpora práce s fonty a vyreslování textových informací.

Příklady aplikací

Použití prvku DeepZoomImage pro zobrazování obrázků zůzné kvality. Používané například pro fotogalerie nebo mapové aplikace. Pro tvorbu galerie je možné použít program Deep Zoom Componser, který je zdarma ke stažení na stránkách Microsoftu. Umožňuje jednoduše uspořádat fotografie a exportovat je ve formátu zpracovatelném komponentou DeepZoomImage. Pokud Vás zaujala možnost vystavovat 5MB obrázky, určitě se podívejte na tento příklad (včetně videa). Alternativou k Silverlightu může být projekt Seadragon, který využívá pouze javascriptu.

Dalším příkladem je demo informačního systému společnosti. Uživatelé zvyklí na tlustého klienta si přijdou na své. Aplikace je k nerozeznání od klasických aplikací instalovaných na PC. Silverlight již v sobě obsahuje většinu prvků uživateského rozhraní, které jsou pro tvorbu aplikace nutné. Vyzkoušejte si online demo aplikace. Jen připomenu, že Silverlight má podporu pro většinu platforem, a takovou aplikaci je možné provozovat na Windows, Mac OS X či Linuxu.

Demo aplikaci vytvočil Brad Abrams na konferenci Mix09. Doporučuji si projít podrobnosti o tvorbě aplikace, či záznam z konference.

Slovo závěrem

Silverlight je mocná technologie poskytujicí velmi široké spektrum možností tvorby aplikací. Získáváte možnost vytvoření profesionální aplikace kompletně založené na techlonogii klient-server v prostředí internetu či intranetu. Velkou výhodou jsou minimální softwarové nároky na klientské straně s maximálním využitím hardwarových prostředků. Nevýhodou je neustálé rozvíjení této technologie. V této oblasti se angažuje hodně open source projektů, což má neblahý dopad na API. Spousta příkladů na internetu není spustitelná, protože došlo k přejmenování tříd nebo metod.

Jednoduché nastavení pro urychlení práce ve Windows Vista

Thu, 05 Nov 2009 17:21:05 GMT

Při ukládání příloh mailů, ukládání office dokumentů a úkládání obecně, se zobrazí standardní dialog, který má na pravé straně sloupeček s oblíbenými položkami. Při domácím využití je nastavení oblíbených položek dostačující, tak jak jsou od výrobce. Ale při práci v kanceláři, kde řada dat je uložena na síťových discích je tato nabídka nedostačující a vždy bylo nutné se složitě proklikávat na správné uložiště. Snažil jsem se najít nějaké nastavení k těmto položkám, až jsem v nápovědě k systému přišel na to, že to je naprosto triviální

Položku stačí prostě jednoduše přetáhnout a můžete si je tak nejen seřadit, ale také zařadit nové odkazy.

Dušičkové skopičiny

Mon, 02 Nov 2009 15:06:19 GMT

V anglicky mluvících zemích se 31.října slaví Halloween. U nás v Česku to rozšířené není. Uznáváme spíše Dušičky. Ať už tak či tak, pojďme se podívat, jak bychom si mohli jeden z podzimních dnů zpříjemnit nějakou skopičinkou.

Pro fandy sociálních sítí

Znáte Virtuální nebe? Jedná se o komunitní projekt - sociální síť mrtvých. Ti „žijí“ díky našim vzpomínkám. Vytvoříte zde profil (památník) zesnulého, můžete k němu nahrávat fotky, videa, písničky a vytvářet jiné fičurky, které ocení vaši přátelé a rodina, se kterými můžete památník sdílet.
Když přijdete na web, můžete si zkusit vyhledat nějakého zesnulého, jestli náhodou nemá založený památník a zapálit mu u něj svíčku nebo poslat vzkaz.
Co se mi na projektu líbí nejvíce je fakt, že tvůrci této morbidity posílají (alespoň to tvrdí) část peněz z projektu na charitu opuštěných dětí.
Jestli se vám Virtuální nebe zdálo jako slabý odvar, mám tu něco mrazivějšího, kvíz Kdy zemřete! Nevýhoda je, že za jeho výsledek si musíte zaplatit.

Pro kutily

Jste manuálně zruční a rádi si vyrábíte různé ozdoby do bytu? Pak se nechte inspirovat instruktážním videem jak si vydlabat vlastní strašidelnou dýni. A pro vás, kteří vládnete raději myší a bojíte se, že byste si s ostrým nožem ublížili, tu mám typ na výrobu dýně virtuální.
Spousty typů na výrobu dekorací, pozvánek, blahopřání a mnoho dalších drobností můžete najít na stránkách Office Online.

Pro hravé

Pokud ujíždíte na mini hrách, můžete se pobavit u infantilních hororových her. Tvořiví ocení omalovánky, které si můžete i vytisknout. Mně se nejvíce líbilo dýňové tetris.

Pro mobilní a PC nadšence

Odvažte se a vyzdobte i svůj počítač a mobil!
Pro počítač můžete nalézt například strašidelné tapety, spořiče, nebo oživení korespondence v podobě obrázků z Office galerie.
Na mobil si můžete stáhnout jako nové vyzvánění roztodivné zvuky.

Obsadíme sociální sítě

Mon, 26 Oct 2009 12:16:46 GMT

Sociální sítě jsou v poslední době na internetu jistě jedno z nejvíce diskutovaných témat. O tom, že velikost této problematiky je exponovaná svědčí i fakt, že články a komentáře opustili internet a věnují se jim i offline média. Být součástí alespoň jedné sociální sítě je přeci tolik trendy a cool. Život či podnikání bez vaší přítomnosti na zmiňovaných sociálních sítí je zcela a zaručeně nemožný.

Když už se vydáme dobýt sociální sítě, tak si většinou bereme za cíl kvantitu na úkor kvality. Vidíme před sebou jedinou možnost – obsadit vše

Pro pořádek zmíním nejčastěji skloňované cíle: facebook, twitter, youtube, flickr a blog (poslední jmenovaný sice nesplňuje parametry sociální sítě, ale dovolím si ho zařadit ke zmíněným trendy cílům v obsazení internetu).

Výborně, přehled máme, konejme!

Snažíme se googlit, číst diskuze, řádně se seznamujeme s jednotlivými sítěmi a jejich možnostmi. Zakládáme a nastavujeme účty, vybíráme vhodné nástroje, pak vybíráme ještě vhodnější nástroje a někdy dokonce kupujeme i dokonalejší mobilní přístroje a to vše s dobrým úmyslem obsadit co možná nejvíce sociálních sítí. Z vlastní zkušenosti vím, že nám bohužel leckdy stačí celé hodiny a dny hledat nástroje. Ano i cesta může být cíl.

Dáváme první příspěvky, netrpělivě očekáváme první reakce, fanoušky. Každá odezva z venku se slaví, za každého nově získaného fanouška si s kolegy poklepáváme po ramenou. Vše jde dobře, rychle a hlavně s nadšením.

Přichází realita

Myslím, že všichni moc dobře známe výše popsané stavy. Mnozí také víme, jaký přijde konec. S časem naše nadšení a odhodlání slábne. O co méně přispíváme, o to jsou naše příspěvky povrchnější a méně zajímavé. Reakce z venku se přibližují k nule.

Čeho se vyvarovat

Bude závěr tohoto příspěvku skeptický? Vůbec ne. Mé doporučení a nadšení pro sociální sítě nebude jen tak vřelé.

Doporučuji zvolit si jeden komunikační kanál, tím právě pro mě sociální sítě jsou, takový, kde se pohybuje největší vaše cílová skupina a tomu se věnujte. Snažte se zde být maximálně autentičtí, tím můžete jen a jen získat.

Po perfektním zvládnutí prvního komunikačního kanálu se vrhněte na další.

Tímto bych vás rád pozval k tomu, abyste se stali našimi fanoušky na Facebooku a sledovali webProgress.cz i na této síti :).

Denní kodérův chleba

Thu, 22 Oct 2009 15:53:10 GMT

Tak jako pro prodavačku v obchodě je důležitá pokladna, pro dlaždiče sprostá slova a pro supermana jeho oblek, tak pro kodéra jsou to různé nástroje a www stránky, které mu pomáhají v jeho práci. Navíc musí stále hledat nové informace, díky kterým se vzdělává, aby si mohl říct, že web který napsal před měsícem, by napsal jinak, protože narazil na fičuru, díky které se web posune o obrovský kus před konkurenci. Ale to už je kodérův úděl.

Dobrý software na tvoření webu – půlka úspěchu

Tak jako většina kodérů, tak i já jsem začínal na obyčejném Poznámkovém bloku, poté jsem přešel na 1st Page 2000, ve kterém jsem pracoval hodně dlouho (hlavně kvůli obrovské databázi Javascriptových udělátek), poté jsem si zvolil PSPad, který se mi zdál super a už jsem si říkal, že jsem našel ten pravý program. To by se mi ale do cesty nesměl dostat Notepad 2, který mě uchvátil natolik, že ho používám jak doma, tak i v práci a jsem s ním maximálně spokojen.

Nevím co to je, ale vím kde to hledat

Každý nemůže znát všechno... Je spousta CSS atributů, které nepoužívám denně, a proto je dobré znát stránky, na kterých si zjistím, jak se ten či ten atribut píše a jaké má vlastnosti. Proto pokud si v něčem nejsem jistý, tak vím, že to najdu na www.jakpsatweb.cz. Když už ne v obyčejných návodech tak po hledání v diskuzi na něco určitě narazím.

Framework sem, framework tam

Mluví se o nich, píše se o nich, diskutuje se o nich, ale co to vůbec je ten Framework, na pomoc si stačí vzít wikipedii, a hned víme k čemu nám takový framework může pomoct.
Z pohledu kodéra máme možnost vsadit na dva druhy Framewroků:

CSS Framework – www.blueprintcss.org, www.960.gs, atd.,
Javascript Framework – www.jquery.com, www.mootools.net, script.aculo.us, atd.

CSS Frameworky
Popravdě jsem pro ně zatím nenalezl využití, na každý web si nedávám čistý CSS styl, ale používám „jádro“, ve kterém mám základní struktůru nadefinovanou a kterou se řídím, díky ní se v CSS šabloně okamžitě orientuji. Pro ukázku přikládám odkaz na jeden můj nadavno napsaný CSS styl.

Javascript Frameworky
Na rozdíl od CSS, jsem Javascriptovým Frameworkům podlehnul, a nedokážu si bez nich už web představit. S nástupem LightBoxu, který se začal masově používat a běží na script.aculo.us frameworku, jsem se o ně začal trochu více zajímat. Cca před rokem jsem si vybral jQuery. Vám, co děláte v Javascriptu ho musím doporučit, jelikož je to silný nástroj, který zjednoduší práci a Javascript vás začne bavit.

Testování webu

Po sepsání webu, bychom měli web zkontrolovat ve všech prohlížečích: Firefox, Opera, Chrome, Safari, … Většina těchto prohlížečů se verze od verze liší, ale ne tak podstatně jako Internet Explorer 6, 7 a 8. Jelikož nemůžeme mít nainstalovány všechny tyto tři prohlížeče současně na jednom PC (bez nutnosti používat Virtuální PC), výborně nám poslouží IE Tester, ve kterém si zkontrolujeme web v Exploreru od verze 5.5 až po 8.

Co říct závěrem

Nevěděl jsem čím přispět do mlýna na náš firemní blog a psát o nějakém jQuery pluginu, který jsem si stáhnul, doladil a pustil do světa, mi nepřišlo jako ta nejlepší možnost. Raději jsem Vám v krátkosti popsal, co vlastně skoro denně používám a navštěvuji.

PPC kampaně, to musíme mít!

Mon, 12 Oct 2009 09:55:46 GMT

Dávno jsou pryč doby, kdy možnosti reklamy na českém internetu byly omezené pouze na bannerové kampaně a nákup klíčových slov u českých tehdy ještě "vyhledavačů" (záměrně v uvozovkách :o) a kdy veškeré investice do těchto reklam byly sázkou do loterie. Naproti tomu dnes můžeme mít své reklamní kampaně na internetu plně pod kontrolou hlavně díky PPC systémům. První PPC systém, který českým zákazníkům nabídl reklamní textové inzeráty přehledně, vedle výsledků přirozeného vyhledávání byl PPC systém AdWords (viz obrázek č. 1) od Google. Google zanedlouho následoval Seznam.cz, který přišel s PPC systémem Sklik (viz obrázek č. 2). Z dalších systémů jmenujme třeba adFOX, který nám nabízí například portály Centrum a Atlas.

Obrázek č. 1: umístění reklamních inzerátů Google AdWords

Adwords od Google nebo Sklik od Seznamu? Který PPC systém vlastně použít?

Čím více reklamních systémů použijeme, tím více potenciálních zákazníků oslovíme. Pokud se omezíme na Českou republiku, pak nám s největší pravděpodobností nejvíce návštěv přivedou právě AdWords a Sklik. Oba systémy financujeme na bázi kreditu (tj. než je spustíme, musíme do nich poslat peníze), ze kterého se nám po kliknutí na námi vytvořený reklamní odkaz, který zákazníka převede na naši stránku, strhne příslušná částka. Tuto částku (tzv. CPC - cena za proklik z anglického cost per click), kterou za proklik na naše stránky zaplatíme, je možno ovlivnit nastavením mnoha parametrů.

Proč zrovna PPC kampaně?

Pro mnoho typů webových stránek dnes nenajdeme efektivnější způsob reklamy, než právě PPC. Na záda mu sice dýchá reklama na sociálních sítích, jakou je například Facebook, který ale i přes poměrně velký počet uživatelů zatím nemůže nabídnout to co vyhledávače. Kromě ohromného počtu potenciálních zákazníků, které nám vyhledavače nabízí, můžeme pomocí PPC systémů velmi jednoduše kontrolovat naše náklady. Ve spojení se statistikami (Google analytics), které jsou k dispozici zdarma, je potom možné porovnávat efektivitu jednotlivých inzerátů a zvolených klíčových slov.

Obrázek č. 2 umístění reklamních inzerátů Sklik na Seznam.cz.

Návštěvnost a její limitující faktory

Množství návštěvníků našeho webu (například právě spuštěného eshopu) u PPC kampaní neurčuje pouze počet možných klíčových slov * jejich potenciální vyhledávanost, ale i pořadí inzerátů a jejich obsah (aby to bylo ještě složitější, tak například pořadí inzerátů u Google Adwords neurčuje pouze výše nastavené ceny za proklik, ale také kvalita inzerátu). Množství klíčových slov je ovlivněno rozsahem (velikostí) webu respektive eshopu. Je těžké očekávat, že eshop prodejce omezeného sortimentu produktů, které jsou úzce zaměřeny na malou skupinu potenciálních zájemců, bude mít velkou návštěvnost. Ta také není až tak důležitá, důležité je, kolik se z těch mála návštěvníků stane zákazníků. I to nám napoví, zda jsme reklamní kampaň vytvořili správně.

Na návštěvnost mají dále vliv sezónní výkyvy. Musím se přiznat, že nás moc nepřekvapilo, že návštěvnost (nejen) z PPC systémů www.nafukovacilode.cz klesla v průběhu září o polovinu, zatímco ostatní weby doznaly po prázdninách podstatného zvýšení návštěvnosti.

Důležitá zpětná vazba

Abychom nevyhazovali peníze oknem, je důležité kontrolovat nejen investice do reklamních systémů, ale především jejich návratnost (v našem eshopu například ve formě objednávek, obratu respektive zisku). To nám umožní již dříve zmiňované statistky Google Analytics. Pomocí statistik potom můžeme sledovat návratnost našich investic (ROI) a ladit a zvyšovat poměr mezi ziskem a velikostí našich investic do PPC systémů.

Závěrem

Při své praxi se často setkáváme s tím, že si klient chce vytvořit a udržovat PPC kampaně sám. Jenže PPC kampaně jsou "závod". A stejně jako bychom se s našimi řidičskými zkušenostmi a zánovní Octavií nepostavili na startovní čáru s formulemi, tak nemůžeme počítat s tím, že budeme svými PPC kampaněmi konkurovat ostatním jenom tím, že jsme je zvládli pomocí návodu založit a vložit do nich inzeráty.

Je lepší vsadit na profesionály a to nejlépe na ty, kteří reklamním systémům rozumí. To je totiž v konečném důsledku nejrychlejší a nejjednodušší cesta jak začít na internetu efektivně podnikat.

Facebook - strmý vzlet pokračuje

Mon, 12 Oct 2009 07:44:24 GMT

Když jsem se začal věnovat nástupu fenoménu Facebooku v české kotlině, tak jsem opravdu nečekal, že růst bude tak rychlý. V příspěvku Facebook a reklama, který jsem napsal na začátku března letošního roku, bylo čechů 290tis. a nárůst za poslední měsíc byl kolem 90tis. Pustil jsem tyto čísla načas z hlavy, ale to co jsem dohledal dnes na Živě.cz, mě vyrazilo opravdu dech.

Čechů je na Facebooku 1 mil. 400tis., resp. dnes už jistě mnohem, mnohem více.

A podle dalších informací z „Živě“ to vypadá, že Facebook jen tak neskončí. Podle finančních zpráv to vypadá, že prodejní reklamní model, který zvolili, se ukázal jako životaschopný a oproti publikovaným zprávám, se týmu Facebooku podařilo přeskočit do černých čísel již nyní a nikoliv až v roce 2010.

Musím říct, že mě tyto zprávy potěšili, protože když jsou finance v plusu, tak by konečně mohlo dojít ke zlepšení ergonomie Facebooku jako takového.

Nárůst Facebooku jsem mohl pěkně sledovat i u svých kamarádů. Když jsem si zakládal účet před třemi roky, tak jsem v podstatě jen chtěl vyzkoušet „fičuru“ na začínajícím poli sociálních sítí. A musím říct, že jelikož jsem nadšenec do novinek obecně, tak jsem byl z FB hodně nadšený. Dokonce jsem založil účet i mé mámě, vytvořil skupinu pro naši rodinu a snažil se je přesvědčit, že je to fakt výborná aplikace. Bezúspěšně… Chce to totiž větší skupinu lidí, kteří budou aktivní a občas o sobě něco napíší a ti kolem mě prostě nebyli. Tak i mě postupně přestalo bavit tam občas něco dávat a v podstatě jsem to zabalil. Nicméně začátkem roku jel kamarád do „Áčka“, jak říkají profíci a jelikož psaní mailů bylo o ničem, občas jsme mu s kamarády z kola vystavili na Facebooku nějakou fotku a on k ní něco napsal a jelikož mu jiná komunikace nezbývala, tak se postupně vytvořil okruh přátel, co jsme FB využívali docela často. Přesto bylo v mém okolí dost „trucounů“, kteří přece nepodlehnou jen tak davovému šílenství a hrdě si budou razit svoji vlastní cestu, kterou si kdysi zvolili. A právě na „trucounech“ je nádherně vidět neuvěřitelná síla Facebooku, protože v podstatě jejich okolí, je společensky donutilo dát Facebooku šanci

A jsem tomu opravdu rád a dovolím si prohlásit: „Nebude to dlouho trvat a na facebooku bude většina čechů„

1. ročník webKartCupu

Tue, 06 Oct 2009 14:51:50 GMT

Sportu zdar, a tomu motoristickému především! Je to za námi, v pátek 2. 10. 2009 se uskutečnil 1. ročník webKartCupu naší firmy.

Již od pátečního rána mezi námi panovala bojovná nálada a prohlížení kartingových videí, jen navozovalo tu správnou závodní atmosféru, pracovní plnění jsme ukončili již ve 13 hodin a automobily se přemístili na místo činu, a to na místní modřický motokárový okruh MARANELLO, kde jsme zaměnili naše myši a klávesnice za volanty motokár. Na uvítanou nás u vstupu místo famfár přivítaly místní kozy svým mekotem.

Závod se sestával ze sedmi jízd po devíti kolech a jedné rozjezdovky – není divu, většina z nás si potřebovala motokáru osahat neboť se s tímto druhem stroje setkala poprvé v životě. Navíc bylo třeba zahřát pneumatiky, abychom docílily odpovídající přilnavosti k povrchu dráhy.

Celkové pořadí:
1. Martin
2. Rossi
3. Jindra
4. Petr
5. Vlasta
6. Michal
7. Richard
8. Tonda
9. Ondra

Nejlepší čas kola zajel Rossi 00:50,401.

Jezdci podle stylu jízdy by se dali rozdělit do několika kategorií:

Schumacher, Zbrkloň, Crasher, a Výletník alias Ego Riser. Každý jistě ví kam se zařadit.

Po skončení závodu někteří z nás usednuvší za volanty svých automobilů ani nezjistili, že se již nepohybují na závodní dráze a přesunutí do vzdálené hospůdky i ve frekventovaném pátečním provozu, trvalo nezvykle krátkou dobu.

Odměnou každému jezdci za účast v závodě byl nejeden půllitr dobrého dalešického piva v místním pohostinství. Následná mohutná debata o nabytých zkušenostech a dojmech trvala do pozdních nočních hodin, kdy se všichni postupně vytratili do svých příbytků, aby v pondělí mohli předvést svou plejádu modráků a otlačenin. Všichni jsme se náramně pobavili.

Těšme se na následující ročník!

Fotogalerie z okruhu

Hoegaarden party

Wed, 16 Sep 2009 15:56:49 GMT

Proběhla další firemní akce, tentokrát příznačně nazvaná Hoegaarden párty. Pivo se pilo a pro některé byla značka Hoegaarden netradičním "večerním nápojem". I jeden pocestný se u nás zastavil na ochutnání. Tradiční grilovaní nechybělo a v mezičase jsme procvičovali naši paměť u her, které pro nás připravila Petra a že jsme se u nich dobře bavili ;-) ..

Fotogalerie z party

Příprava podkladů k plnění webu

Wed, 02 Sep 2009 16:42:51 GMT

Článek je určen především zákazníkům, kteří mají dodat podklady k naplnění webu obsahem.

Co znamená význam slova plnění?

Plníme pětiletý plán, plníme míč vzduchem nebo papriky na nedělní oběd. Plnění webu chápejme jako slangový výraz pro sazbu textů, ale i vkládání obrázků, videí, souborů ke stažení do webu a jeho formátování a případnou stylistickou úpravu pomocí redakčního systému (CMS), ale i v některých případech přímo do zdrojového kódu či databáze a nebo samotnými uživateli pomocí formulářů např. v diskusních skupinách.

Avšak plnění není jen pouhé ctrl+c a ctrl+v jak můžeme na některých webech vidět, nýbrž zahrnuje poměrně nový pojem webová typografie což je, neprávem, opomíjené a obsáhlé téma zabývající se sémantickým strukturováním textů a dalších pravidel pro sazbu, podobně jako je tomu u tiskovin.

Výraz plnění webu vznikl patrně tím, že i ve tvorbě moderního dynamického webu došlo k oddělení technologie od obsahu, podobně jako je tomu u desktopových aplikací. Takto nenaplněné stránky obsahují pouze funkční část včetně grafiky bez jakéhokoli textu nebo obrázku (mimo texty obsažené v grafice nebo flashových animacích, které tvoří layout webu).

Plnění však nezahrnuje copywriting, jež je v tomto případě zvláštní kapitolou kterou vytváří specialista atraktivní texty s ohledem na marketing a SEO jimiž je následně web naplněn.

Příprava podkladů

Příprava podkladů, by měla začít již po návrhu struktury webu, kde by se mělo promyslet, jak budou podklady strukturovány a následné předávány zhotoviteli, aby se v nich vyznal, jaký bude jejich zdroj, zda texty bude psát již výše zmíněný copywrigter nebo současný marketingový pracovník nebo se budou podklady tzv. přeplňovat ze starého webu nebo tištěného katalogu a v jakém rozsahu.

Jaký formát podkladů?

Jako nejlepší podklady se jeví katalogové listy ve formátu pdf, které obsahují jak potřebné texty, tak obrázky a tabulky. Tyto pdf dokumenty však musí být uloženy ve vrstvách, kde je oddělen text a obrázky a to v dostatečně velkém rozlišení, aby bylo možno vytáhnout obrázky v odpovídající kvalitě, pokud budou zvětšovací. Tedy žádný sken stránky do pdf jak jsme mnohdy svědky. Dále je třeba dbát na dodání hesel, pokud jsou pdf zaheslovány.

Druhou variantou je dodání podkladů v otevřeném rtf nebo doc formátu pro MS Word, a to nejlépe jen textů a tabulek. Jelikož MS Word nepodporuje export vložených obrázků, je vhodnější je dodat zvlášť a v textu Wordu vyznačit název obrázku, kam má být umístěn.

Další možnost je MS Excel, který je především vhodný pro plnění cizích jazykových verzí, kdy jednotlivé překlady umístíme do zvláštního listu, kde každý řádek odpovídá českému originálu.

Co se obecně překladů týká, je nutno neopomenout přeložit i chybová hlášení při vyplňování formulářů a alternativní popisky obrázků, popisky obrázků ve fotogaleriích a další popisky, které nejsou zahrnuty přímo v obsahu webové stránky, ale jsou obsaženy ve skriptech, které text zobrazí jen za určitých podmínek. Z tohoto důvodu by výtah textů pro překlad měl zajistit webmaster zhotovitele stránek, aby nedošlo k opomenutí přeložení těchto skrytých textů.

Jako nevhodný podklad se jeví leták či katalog v papírové podobě, který se skenováním a ručním přepisem, případně i OCR převede do podoby elektronické. I tento způsob lze v krajním případě použít, na druhé straně je ale i pro zákazníka spíše nevýhodný jednak kvůli nižší kvalitě vstupních dokumentů, ale i větší časové náročnosti pro jejich zpracování na web což se odráží v ceně projektu.

Jaký formát pro obrázky?

Platí obecné pravidlo čím větší kvalita tím lépe, obrázek lze pak jakkoli zmenšit, oříznout či jinak upravit. Pro fotky je nelepší formát jpg (v maximální kvalitě) případně bitmapa buď v bmp nebo tiff. formátu. Pro loga jsou lepší křivky, a to v postscript formátu eps případně ve formátu Adobe Ilustrátoru, které otevře i Adobe Photoshop.

Co se týká produktových fotografií, je nejideálnější jejich profesionální nafocení přímo DTP nebo foto studiem, které fotografie připraví do vhodné formy pro další zpracování jak na web, tak i pro tisk letáků či katalogu.

Plnění produktů v e-shopech

Další metodou plnění zejména zboží v internetových obchodech jsou specifické případy převodu potřebných dat z databází vnitrofiremních ekonomických či skladových systémů, zde pojem webové typografie spíš zůstavá stranou, poněvadž dynamicky vypisujeme jen určitá potřebná data k danému produktu. Tvar výpisu je pak určen kaskádovým stylem.

Závěrem

Přípravě podkladů je třeba věnovat náležitou pozornost, a to jak přípravě textů, tak i obrázků. Velmi často se stává, že takto podceněná příprava má za následek nejen prodlevy v dokončení projektu, ale i nevalný celkový dojem, u jinak kvalitně technologicky i graficky zpracovaného webu, který degradují právě nevhodné a nekvalitní, např. skenované či amatérsky zhotovené fotografie.

DefaultButton ASP.NET vs. Internet Browsers

Fri, 14 Aug 2009 08:06:40 GMT

Ve většině webových aplikací, ve kterých uživatel vyplňuje formuláře a posléze ho odesílá na server, kde jsou data dále zpracována, je pro odeslání použit standardní ovládací prvek Button.

Je dobrým zvykem, aby po ukončení editace položky nebo zasílání příspěvků do diskuze bylo výchozí akcí po stisku klávesy ENTER provedení uložení/odeslání.

V ASP.NET od verze 2.0 je možné pro tyto účely využít vlastnosti DefaultButton, kterou je možné vybrat, který ovládací prvek dědící ze společného rozhraní IButtonControl má být tím výchozím po získaní focusu na daném formuláři.

Nejjednodušším způsobem jak nastavit výchozí tlačítko je v tagu <form> vyplnit vlastnost deffaultbutton.

<form id="fImplantationList" runat="server" defaultbutton="btSave"></form>

Bohužel to v řadě případů nebude možné, protože drtivá většina aplikací používá koncept MasterPage, ve kterém není vlastnost deffaultbutton dostupná přímo z .aspx stránky a výše uvedený způsob tak není možné použít. Na stejný problém bychom narazili i v případě použití UserControlů, tedy samostatných komponent, které zapouzdřují určitou kombinaci ovládacích prvků včetně logiky.

UserControl lze použít na libovolném místě v aplikaci. /pozn.: je dobré si uvědomit, že samotná MasterPage není nice jiného než trochu upravený UserControl :-)/

Existuje však cesta, kterou je možné výchozí tlačítko nastavit, ačkoliv není tak přímá a dobře vypadající. Vzhledem k tomu, že UserControl, respektive MasterPage je při svém použití úzce svázán na .aspx stranku je možné se na tuto stránku odkázat a pak už jsme jen krůček od nastavení našeho vytouženého výchozího tlačítka.

Magický řádek kódu, kterým zajistíme požadovanou funkčnost je uveden níže.

this.Page.Form.DefaultButton = this.btSave.UniqueID;

Po zpřístupnění formuláře stránky a jeho vlastnosti DefaultButton nastavím požadovaný ovládací prvek přičemž je použita vlastnosti UniqueID, která přestavuje unikátní identifikátor pro daný ovládací prvek. Tuto vlastnost je vhodné nastavit v obsluze události Page_Load.

Rád bych upozornil na několik zákeřností internetových prohlížečů, které při nejlepší vůli nemusí vaše snahu o jejich zkrocení akceptovat. Výše uvedený postup bude fungovat v IE 6,7,8 a Opeře.

Zřejmě největší problém s výchozími tlačítky se váže na stále více populární prohlížeč Mozzilla FireFox, který výše uvedený postup s radostí ignoruje a za všech okolní bude spouštět akci, která se váže na první tlačítko, které se ve formuláři vyskytuje.

Abychom zabránili tomuto ne vždy žádoucímu chování, existuje na ovládacím prvku asp:Button vlastnost UseSubmitBehaviour, kterou je možné toto chování potlačit. Řešením je tedy nastavit tuto vlastnost u všech ovládacích prvků, u kterých nechceme, aby je bylo možné spustit přes stisk klávesy ENTER, v podstatě „přeskočíme“ až k tomu „našemu“.

<asp:Button ID="btBack" runat="server" Text="Save" UseSubmitBehavior="false"/> <asp:Button ID="btList" runat="server" Text="List UseSubmitBehavior="false"/> <asp:Button ID="btSave" runat="server" Text="Save" />

Naneštěstí ne všechny ovládací prvky tuto vlastnost mají, zářným příkladem je asp:ImageButton, který představuje kočkopsa a je vhodnější se mu úplně vyhnout, ale pokud není zbytí..

Mně se osvědčil tzv. work-around se skrytým tlačítkem, které je umístěno do formuláře a supluje úlohu prvního tlačítka na formuláři, které zajistí, že skutečně dojde k jeho spuštění pokud uživatel používá FireFox a snaží se odeslat data na server.

Výsledný kód by mohl vypadat následujícím způsobem. Všimněte si především skutečnosti, že na obě tlačítka je zavěšeno stejné obsloužení události OnClick a doplnění stylu, kterým je tlačítko schováno.
Pokud se ptáte, proč jsem nepoužil vlastnosti Visible, odpověď je jednoduchá, po nastavení vlastnosti Visible=”false” by se tlačítko vůbec nevyrenderovalo do stránky a první tlačítko na formuláři by bylo opět btBack.

<asp:Button ID="btSaveHidden" runat="server" Text="Save" OnClick="btSave_Click" style="visibility:hidden;display:none" /> <asp:ImageButton ID="btBack" runat="server" Text="Back" /> <asp:ImageButton ID="btSave" runat="server" Text="Save" OnClick="btSave_Click" />

Ukázali jsme si různé přístupy v problematice nastavení výchozího tlačítka, ačkoliv se může zdát, že se jedná o velmi jednoduchou věc existuje několik úskalí, při kterých se vyplatí být obezřetný.
Pokud vás během článku napadlo, že je jednodušší tlačítka prohodit, rád bych vás upozornil, že ne vždy je to možné především z ohledu na grafický design aplikace a požadavků zákazníka.

Jak na průhledné png v IE6

Thu, 06 Aug 2009 13:45:36 GMT

Určitě každý z nás již řešil situaci, kdy použil průhledné png na svých webových stránkách a následně se zděšením zjistil, že se to v prohlížeči IE6 nezobrazuje až tak podle jeho představ, resp. vůbec. Následně zvedl své oči k internetu a hledal… Řešení se nabízí několik (css, js) a však žádná nebyla 100%. Až do doby, než se objevila knihovna DD_belatedPNG.
Přidání odkazu do hlavičky webu
Externí soubor budeme načítat pouze má-li uživatel prohlížeč IE6.

<!--[if IE 6]> 
<script src="/cesta/k/souboru/DD_belatedPNG.js"></script> 
<![endif]-->

Použití pluginu
Následně do hlavičky vložíme ještě tento kód. Jsou zde dvě možnosti použití.

DD_belatedPNG.fix('.hlavniDiv, .vnitrniDiv, , img'); 
DD_belatedPNG.fixPNG('.hlavniDiv, .vnitrniDiv, img');

Zprůhledněny budou jen ty elementy, které mají přiřazenou třídu „hlavniDiv“ a podtřídu „vnitrniDiv“. Pravidla jsou identická s CSS.

Celý příklad

<!--[if IE 6]>
<script src="/cesta/k/souboru/DD_belatedPNG.js"></script> 
<script type="text/javascript"> 
DD_belatedPNG.fix('. hlavniDiv, . vnitrniDiv, .jinyDiv, img'); 
DD_belatedPNG.fixPNG('.hlavniDiv, .vnitrniDiv, img'); 
</script> 
<![endif]-->

Tímto elegantním způsobem rychle docílíme vyřešení našeho problému

Očima implementátora: dříve než web pustíme do světa

Thu, 06 Aug 2009 13:18:51 GMT

Každý nový web je pro nás výzva…

Začneme-li ale úplně od začátku, vše stojí a padá s obchodníky, kteří musí zakázku nejprve přinést. Potom se celý tým - obchodníci, kreativci (grafici) a i my obyčejní stylaři (honosněji implementátoři), sejde a začne sršit nápady co pro takový web bude nejlepší a vystrčí jej na výsluní českého internetu. Pěkný článek o přípravě na takovou slezinu napsal Martin ve článku „Příprava na brainstorming“, doporučuji si jej osvěžit, budete pak více v obraze.

Poté co je koncepce webu dána a všichni, samozřejmě včetně zákazníka :), vědí, jakým směrem se vydáme, vtiskne grafik na základě vytvořených drátových modelů webu jeho „tvář“.

Po schválení grafiky je „míč“ u nás stylařů, abychom se s kreativní hlavičkou grafika poprali a navíc přidali naše programátorské nápady tzv. fičury, kterými stránky obohatíme. Povězme si nyní o cestě, kterou musí web urazit, než je předán zákazníkovi a vypuštěn do světa.

První bod obsahuje odladění správnosti zápisu HTML kódu stránek nejen pro vyhledávače ale i hendikepované uživatele. Touto kontrolou primárně sledujeme správnost pořadí prvků na stránce tzv. sémantiku kódu, tzn., nadpis nejvýše v kódu musí být <H1>, samotný textový obsah následovaný odrážkovým seznamem struktury webu a až potom někde dole samotné grafické prvky tvořící grafiku webu.

Obrázek 1.: Stránka, jak ji klasicky vidíte v prohlížeči.

Obrázek 2.: Vypnutí CSS stylů

Obrázek 3.: Stránka po vypnutí CSS stylů (jak ji vidí roboti vyhledavačů)

Druhý bod zahrnuje otestování, nejen funkčnosti, ale i vzhledu, ve všech „živých“ verzích prohlížečů jako je Internet Explorer (IE) 6, IE 7, IE 8, Mozilla Firefox (FF) 2,
FF 3, nyní nově i FF 3.5, Opera, Mozilla, Safari a dalších méně známých webových prohlížečů. Pro doposud užívané IE používáme IETester. Starší verze jiných prohlížečů máme nainstalované na VirtualPC.
Třetím bodem v pořadí je test všech kombinací stránek XHTML a CSS validátorem. Samozřejmostí je odladění všech chyb, ale také se snažíme odladit všechny možné varování, které validátor „vyplivne“.

Obrázek 4.: Výsledek otestování HTML validátorem

Závěrečný krok zahrnuje test funkčnosti pro uživatele, kteří nemají v lásce Javascript. Pro těchto pár „nadšenců“ musíme zajistit správnost fungování stránek.

Obrázek 5.: Formulář pro doporučení stránky při zapnutém Javascriptu

Obrázek 6.: Vypnutí JavaScriptu v internetovém prohlížeči Firefox

Obrázek 7.: Formulář pro doporučení stránky při vypnutém Javascriptu

K převážné většině testování používáme aplikaci Web Developer Toolbar v prohlížeči Mozilla Firefox.

Jakmile proběhnou všechny testy a celý implementační tým včetně zadavatele je spokojený, můžeme web pustit do světa a po probdělých, bezesných nocích konečně usnout spánkem spravedlivých :)

JIC Football OpenCup ‘09

Fri, 31 Jul 2009 09:29:39 GMT

Tak jsme se zúčastnili fotbalového turnaje… :)

Obavy z toho, že šampionát začíná ve 13 hodin, zrovna když celou ČR zasáhla tropická vedra, vystřídala obava z nedostatku tekutin. Ale vše bylo připraveno na jedničku. Sudy piva, s naraženou pípou, postávaly v chládku a voda pro hráče byla rozdávána krásnými hosteskami. Organizátoři neponechali nic náhodě a tak utkání začala v duchu blahobytu a pocitu hojnosti.

První, zahajovací, zápas webProgress čekaně vyhrál. Zpocení, udýchaný, ale stále plni sil, jsme se přesunuli do stínu tribuny a čekali na další utkání, které také vyšlo v nás prospěch.

Třetí setkání se soupeřem bylo pro náš team kritické. Naše mužstvo podlehlo, čímž jsme si zavřeli dveře do vysněného finále. Po zpětné analýze jsme došli k závěru, že za prohrou stojí zlatavý mok. Stačil jeden půllitr na člověka, aby se nám snížil odhad vzdálenosti, rychlost, hbitost a všechno ostatní, na co si jen můžete vzpomenout. Ani nový dres našeho brankáře Richarda nepomohl, a to jsme právě v něj vkládali naší největší naději, koneckonců posuďte sami.

V boji o třetí a čtvrté místo jsme ale neponechali nic náhodě. První polovina zápasu proběhla vyrovnaně, bez branek na obou stranách, hrálo se opatrně. Ale v druhém poločase to přišlo: „Martin se uvolňuje, přihrává Jindrovi, Jindra běží, klička, nápřah, střílí a je to góóól! 1:0 dámy a pánové!“. Všichni jsme radostí zajásali s vědomím, že vítězství je nadosah. Studená sprcha, ale přišla v zápětí, kdy se, z nepochopitelných důvodů, útočník dostal přes naši neprostupnou obranu a skóroval.

Do konce zápasu se už nic významného nestalo, když pominu pády, srážky, vstupy Martina na hřiště a razení rozhodčímu, že ten faul byl 100% na přímý volný kop. Po standardním hracím čase tedy přišly na řadu penalty, ve kterých jsme jednoznačně dominovali (ještě že soupeř jednou minul branku) a tak skončili na krásném třetím místě.

Po turnaji následovalo vyhlašování výsledků, společné focení a poté odebrání k pivu, jídlu a zábavě.
Za zmínku určitě stojí druhý den v práci, kdy jsme si vykládali zážitky z chůze do práce, co nás všechno bolí a proklínání dalších případných utkání, na které se ale již teď samozřejmě moc těšíme.

Fotogalerie z fotbalu

Dvoje narozeniny a bowling

Wed, 08 Jul 2009 11:50:35 GMT

Ten den se odehrálo hned několik premiér. Dva od nás měli poprvé 22 a 33 let. Gratulace Petře a Vlasto. A někteří byli poprvé v životě na bowlingu. Gratulace Martine. Co víc dodat?

V mírném opojení jsme se hromadně vrhli do házení koulí. Po první hře někteří z nás zjistili, že daleko větší adrenalin a zábava je hrát na rychlost vrhnuté koule, než na počet sražených kuželek. Nejvyšší dosažená rychlost byla 37,5 km/h. Gratulace. V kontrastu s touto rychlostí je potom rychlost koulí našeho vítěze v celkovém bodování (588 bodů na 4 hry), která dosahovala bídných 17 km/h. Gratulace.

Nikomu z přítomných se nechtělo z našlápnuté oslavy domů.

Ale museli jsme.

Zavírali.

Fologalerie z bownlingu

Pár novinek, které nás čekají v C# 4.0

Mon, 22 Jun 2009 08:00:49 GMT

Pojmenované a volitelné parametry

Jednou z jednodušších ale zajímavých novinek, které nás čekají v C# 4.0, jsou pojmenované a volitelné parametry. Tyto věci spolu poměrně úzce souvisí, jak si dále ukážeme.

Volitelné parametry

Definice volitelných parametrů je velice jednoduchá. Jediné, co je třeba udělat, je připsat k parametru jeho výchozí hodnotu:

public void MyFunction(int param1, int param2 = 4, int param3 = 5);

Funkci MyFunction můžeme dále volat takto:

MyFunction(0,1,2);
MyFunction(0,1); // obdobné jako MyFunction(0,1,5);
MyFunction(0);// obdobné jako MyFunction(0,4,5);

Jak už vás patrně napadlo, problém nastává, když například chci zadat param3 a param2 nechat ve výchozím stavu. Vzhledem k tomu, že C# nepřipouští vynechání typu MyFunction(0, , 8), které by navíc programu na přehlednosti příliš nepřidalo, musíme se poohlédnout po řešení jinde. Možností jsou právě pojmenované (Named) parametry. V takovém případě tedy píšeme:

MyFunction(1, param3 : 8); MyFunction(param1 : 1, param3 : 8);

V takovémto případě pochopitelně pořadí zápisu parametrů nehraje roli, proto je volání výše ekvivalentní tomuto:

MyFunction(param3 : 8, param1 : 1);

Přetěžování

Jediným dalším problémem, který zatím nebyl zmíněn je, jak se C# rozhoduje v případě, že přetěžuji funkce s volitelnými parametry. Nejdříve jsou vybrány všechny varianty, které mají buď všechny parametry volitelné, nebo se jeden z jejích parametrů shoduje s typem parametru ať už názvem nebo pozicí ve volání.

Vynechané volitelné parametry se do rozhodování neprojevují. Pro názornost si definujme několik přetížení metody MyFunction:

MyFunction(string str; int num = 5); // varianta 1
MyFunction(int a; int b = 1); // varianta 2
MyFunction(int a); // varianta 3
MyFunction(string s); // varianta 4
// a ted nejake ukazkove volani
MyFunction(0);

Funkce, které se pozicí shodují s typem, jsou dvě a to varianta 2 a varianta 3. Vzhledem k tomu, že přednost mají ty, které nemají vynechané parametry, bude použita varianta 3.

Dynamic

Další novinkou, kterou přínáší C# 4.0 je klíčové slovo dynamic. Jeho funkci se pokusím ukázat na příkladu.

string str = „bye“; Console.WriteLine(str.Length);

Podobně by se choval kód:

dynamic str = „bye“; Console.WriteLine(str.Length);

Ale také:

var str = „bye“; Console.WriteLine(str.Length);

Jaký je tedy rozdíl mezi var a dynamic? První, kterého si při psaní kódu lze povšimnou je, že při použití dynamic nebude fungovat intelisense. Důvodem je, že výše napsaný kód za použití var je zcela identický s kódem, ve kterém byl typ jasně definován. Naproti tomu dynamic není vyhodnocen při kompilaci, ale až při samotném spuštění programu. Proto následující kód bude zkompilován bez chyby:

dynamic str = „bye“; Console.WriteLine(str.ILoveCSharp);

Základní otázkou ale pochopitelně je, k čemu je to dobré. Jednou z možností, která mě dnes napadla, je, když potřebuji udělat „generickou“ funkci, ale není zde žádné rozhraní, které bych mohl použít. Mohu proto udělat toto:

void DoSomeDynamicWork(dynamic obj) { obj.DoSomeStuff(); }

Kód neskončí chybou kompilace, a pokud jako parametr pošlu správné objekty, které implementují metodu DoSomeStuff(), nenastane žádný problém ani za chodu. Na druhou stranu se jedná jistě o velice lehkovážné užívání tohoto nástroje.

Praktičtější ukázkou může být třeba ta v tomto článku, a dále například zde. Pro mnoho dalších informací doporučuji také tento blog.

Fotografie - BackStage a Postprodukce

Tue, 16 Jun 2009 16:59:20 GMT

Dnes se s vámi chci podělit o své zkušenosti s fotografováním, které né vždy vznikají improvizací a jejichž proces není výsledkem jednoho “cvaknutí” vašeho fotoaparátu. Nejlepší je rovnou ukázat příklad - projekt, ke kterému se mně po roce opět podařilo dostat. Jedná se o projekt známé značky Wella, která každý rok vyhlašuje soutěž Trend Vision. Názorně vám ukážu, jak vše probíhá, jaký tento styl focení má spád a co vše je potřebné k dosažení výsledku.

Nejprve si vysvětleme, co to vůbec pojmy jako backstage a postprodukce znamenají. Význam slova backstage je vyplívající přímo z jeho názvu. Jedná se o vše, co probíhá za scénou a co není na výsledné fotografii vidět. Od příprav foceného objektu, přes veškeré rekvizice, až po samotnou scénu, kde se fotografuje. U postprodukce je tomu stejně. Nyní se však jedná o to, co následuje po nafocení. Veškeré úpravy, které proběhnou předtím, než se fotografie dostane k tisku.

Nyní ještě něco málo k Trend Vision 2009. Tato soutěž je pořádána “především” pro kadeřníky z ČR. Každý rok značka Wella představí několik nových trendů současné módy. Zaměřuje se na detaily účesů, které jsou klíčové i pro soutěžící. Ten si vybere jeden trend, podle kterého si obstará vhodnou modelku a dle pravidel a kritérií pro daný styl účes vytvoří, vybere vhodné ošacení a líčení. Soutěž se rozděluje na několik úseků. První se odehrává právě v ČR, kde bude vybráno deset nejlepších a z nich pak jeden, který tento rok pojede reprezentovat Českou republiku do Německa. Ptáte se, proč slovo “především”, na začátku tohoto odstavce, je v uvozovkách? Nevím kolik je na tom pravdy, ale samotná fotografie tvoří 80 % na celkovém pohledu poroty, která vybírá oněch 10 nejlepších. Proto je potřeba celé fotografování mít promyšlené od začátku do konce.

16. květen, zvoní telefon…

V rozespalém sobotním ránu přijímám hovor a na druhé straně zazní “bereme Utopiu”. Tyto dvě slova spustí záplavu otázek a rychlého probuzení. Máme představu? Máme modelku? Máme vymyšlený účes? Máme místo pro focení? Po odeznění prvních emocí se začne plánovat. Jen pro vysvětlení, Utopia je jeden z trendů pro rok 2009. Styl máme tedy vybrán a celý proces začíná dostávat spád. Určitě v první chvíli je potřeba projít důležité informace a držet se kritérií a ne zběsile zmatkovat s blížícím se termínem focení. V prvé řadě je potřeba se seznámit s trendem na podobné úrovní jako kadeřník. Na stránkách Welly je možné shlédnout krátké video a několik základním návodů, tipů co daný styl obsahuje a co ho tvoří. Na obrázcích níže si můžete udělat názor samy. Čisté blond odstíny s nádechem budoucnosti a trochou technokratismu, tvoří základní kámen pro vytvoření scény pro fotografování.

První schůzka - poznávání nových tváří

Ale to není vše. Dále je potřeba se seznámit s vybranou modelkou, účesem, se kterým se bude prezentovat a oblečením, které je její nemalou součástí. Změna byla nejen ve vizážistce, ale především v modelce. Pohled na modelku mě nenechával klidným. Kadeřnice si vybrala velmi mladou dívku, která svým věkem a svou drobností může vyvolávat spousty otázek. Nesouvisí to vůbec s její krásou, nýbrž s tím jaký může vzniknout výsledek. Bude například působit ve výsledku dostatečně profesionálně? Nuže posuďte samy, ale věřte, že výsledek vás vyvede z omylu.

Na první schůzce nám kadeřnice názorně ukazovala, jak bude stříhat, jaké odstíny barev použije a jaké šaty modelku budou zdobit. Čas se nám krátí, proto odcházím z kadeřnictví do terénu hledat vhodné místo, které je potřeba dostatečně zvážit. V místním okolí mě bylo dáno několik tipů, ovšem moderních a technokratických míst v Brně je jen velmi málo. Scéna musí vypadat dostatečně nadčasově, s jasně danými liniemi, které neupozadí fotografovanou modelku, ale musí s ní být v určité souvislosti. Když je to správné místo nalezeno, je třeba vyčkat na ten správný čas pro focení. Musí být vhodné podmínky, světlo, prostě vše. Nutná je potřeba sledovat určité hodiny, jestli je slunce ve správné poloze a jaké nám přináší světlo a stíny. Vše musí hrát podle našich představ a není moc možností jak odpískat focení na další den. Času do uzávěrky je málo a příprava účesu modelky včetně vizáže zabere půli dne.

Den “D”

Nastal ten den, kdy se všichni modlíme, aby vše šlo podle našich představ. Od rána postupně dostávám info o průběhu z kadeřnictví. Zatím vše šlape jako má a je dostatek času do 17.00 na poslední úpravy a detaily. Modelka je připravená. S několika minutovým zpožděním přijíždím do kadeřnictví, kde panuje mírná únava a netrpělivost. Postupně se všichni nasáčkujeme do auta a zároveň budíme první pozornost veřejnosti. Rychle odjíždíme na vybrané místo, kde se v tuto dobu pohybuje poměrně hodně lidí, ale naštěstí jsou všichni vstřícní a dostatečně nás obcházejí. Připravujeme scénu, dolaďuje se účes po jízdě autem a jde se na to.

Focená scéna byla přesně podle představ. Slunce už bylo níže k obzoru, přesto bylo stále denní světlo. Sluneční paprsky perfektně nasvítily budovy na pozadí. Světelnou scénu jsme doplnili dvěma blesky a odraznou deskou. Rozmístění bylo jasné. Jeden blesk zepředu, mírně z levého boku přes deštník pro dostatečné rozptýlení světla, druhý blesk ze zadu, ze země pro dokreslení odlesků na šatech a vypíchnutí modelky od pozadí. Odrazná deska zprava, pro umírnění ostrých stínů od blesků, které vedou vůči sobě v rovině. Protože se jednalo o nízkorozpočtové focení, musel každý přiložit ruku k dílu. Kadeřnice tedy držela blesk a deštník a vizážistka se postarala o odraznou desku. K samotnému focení bylo všechno připraveno. Bylo potřeba nafotit dvě fotografie, a to celé postavy a do půlky těla modelky. Hlavním prvkem se zde stal sloup, kterého ještě využijeme u postprodukce. Fotografii celé postavy jsem fotil zespodu a využil jsem širokoúhlého objektivu, pro dosažení dramatičnosti a vtažení diváka do děje. U této fotografie půjde o celkový vizuál, ne jen o účes, ale především o studii oblečení. Druhá fotografie byla focena z přímého pohledu zboku, kde můžeme rozpoznat detaily a preciznost líčení a stříhání. Fotografie se v pozadí postupně stupňuje do středního levého rohu. Budovy jsou hezky nasvíceny slunečními paprsky a celkově fotografie tvoří celistvý dojem. Fotografie máme tedy nafoceny a tím první část práce končí. Všichni se po náročném dni vracíme domů. I já doma relaxuji, fotografie jen předběžně shlédnu a nechám si je uležet přes noc v hlavě.

Správně vyspaná postprodukce

Přesně tak. Na postprodukci je pro mě nutné si nechat všechno uležet v hlavě. Plány, které byli před a během focení mírně nabírají jiný směr a člověk si uvědomí, že některé postupy a efekty bude lepší řešit jinak. Postprodukcí vás proberu pouze u prvního snímku, kde jsou jednotlivé kroky zajímavější. U druhé fotografie, poloviny těla, jsem jen udělal kosmetické úpravy a výměnu nebe. U první fotografie si tedy úpravy rozdělíme na jednotlivé kroky a ve výsledku si srovnáme originály s výstupní fotografií.

V prvním kroku uděláme základní úpravy. Fotografie jako taková, skrývá v sobě hodně neduhů. Například kousek odrazné desky v pravém horním rohu, ve střední části nalevo nepatrný kousek deštníku, blesk na zemi. Někdy je totiž na scéně velmi málo místa a jsme tam doslova namačkaní se všema těma „krámama”. Tím se ale člověk nemusí vůbec stresovat. Ve photoshopu je tato retuš otázkou několika kliků.

V druhém kroku dodáme na dramatičnosti a plastice mraků. Na prvním snímku jsem scénu celkově hodně ztmavili, zvlášť okraje fotografie, které vás více nutí dívat se do středu fotografie. Na dalším snímku bylo potřeba vytáhnout jas na určitých místech jako je budova, postava modelky a zábradlí. Tím dosáhneme větších kontrastů mezi pozadím a modelkou.

V následujícím kroku dojde na sloup. Cílem akce ho bude zúžit a postupně protáhnout do špičky. Šlo o to, udělat efekt obřího sloupu, který mizí v nedohlednu. K těmto úpravám je šikovný nástroj “warp - pokřivení”, který nám na výběru objektu vytvoří mřížku, která lze snadno deformovat. Následně bylo potřeba odretušovat zbylou část sloupu. V tomto kroku jsme také upravili barvu a světlost nebe do modrých tónů a odstranili zbylé rušící objekty jako kameru na hraně budovy a přečnívající strom na pravé straně.

S dalším krokem jdeme už do finálních úprav. Sloup více spojíme s pozadím a vytvoříme kolem něj základní zář. Na další fotografii dodáme paprsky a jemně ztmavíme kraje nebe, aby paprsky vynikly. A máme výsledek.

Na dalších fotografiích můžete po najetí myší nad fotografii srovnat rozdíly, mezi základní vyfocenou fotografií a finální fotografií po postprocesu. Závěrem chci jen říct, že práce, která nestojí jen na mě, ale je výsledkem týmu, mě naplňuje. A vždy je hodně zážitků a zábavy na každém takovém focení. Teď už jen držet pěsti aby opět jako minulý rok jsme se dostali mezi desítku vybraných.

Využití internetu ve veřejné správě

Wed, 10 Jun 2009 07:57:40 GMT

Fronta, otravní lidé kolem, protivná paní za přepážkou, stohy papírů, které se vám ani po úspěšném absolvování základní školy nepodaří rozluštit, natož bez chyby vyplnit.
Už víte kde jsme? Ano, na úřadě…
Představte si situaci: Sedíte si v pohodlí svého domova, máte zapnutý notebook, popíjíte oblíbený nápoj a chystáte si objednat výpis z katastru nemovitostí… Vyplníte elektronickou objednávku a pak už jen čekáte, až vám dojde ověřený výpis domů nebo si jej necháte zaslat na nejbližší kontaktní místo Czech Pointu a bez čekání a obíhání si jej vyzvednete… Pohádka? Ne, nyní už realita! A to vše díky projektu e-Government.

O využití internetu jako nástroje pro reklamu, získání zákazníků, nakupování a zábavy bylo napsáno již mnoho. Jak lze ale internet využít v běžné komunikaci s úřady a jaké záslužné projekty, usnadňující nám život pod záštitou české vlády z peněz daňových poplatníků, vznikají, je pro mnohé z nás zatím velká neznámá.

Začněme tedy od začátku: Co je to ten e-Government?

Zjednodušeně se dá říct, že je to elektronizace výkonu veřejné správy s využitím moderních informačních a komunikačních technologií.
Nutno podotknout, že myšlenka není ryze česká. Vznikla ve Velké Británii, kde je také e-Government nejpropracovanější a občany nejvyužívanější.
Češi ale nechtějí stát stranou. Vznikla Rada vlády pro informační společnost, stanovily se jasné plány a předsevzetí. Jeden z nich je, že český e-Government se zařadí do roku 2013 mezi pět nejlepších v EU. Že to rada myslí skutečně vážně, potvrdil a hlavně zdůraznil Ivan Langer ve svém letošním projevu na konferenci Internet ve státní správě a samosprávě 2009.

Jaké hlavní služby e-Government poskytuje?

Czech Pointy

Na těchto místech můžeme získat výpisy z katastru nemovitostí, rejstříku trestů nebo obchodního rejstříku. Můžeme je nalézt na obecních a městských úřadech, pobočkách České pošty či Hospodářské komory. Dříve musel např. žadatel o výpis z rejstříku trestů čekat i několik týdnů než mu po vyřízení přišel domů do schránky. A to nemluvě o tom, že v menších městech nebylo kde si výpis objednat. Klient musel vážit cestu do většího města v okolí.
http://www.czechpoint.cz/web/

Datové schránky

Jsou uložištěm pro doručování a provádění úkonů vůči orgánům veřejné moci. Provoz schránek bude oficiálně zahájen 1. 7. 2009. Ze zákona budou přiděleny právnickým osobám, podnikatelům a všem úřadům. Fyzická osoba si o schránku může taky požádat, provoz i zřízení jsou bezplatné.
Jak budou datové schránky vypadat, a jak se s nimi pracuje můžete zkusit prostřednictvím dema.
http://www.datoveschranky.info/

Portál veřejné správy

Hlavním úkolem portálu je ulehčit občanům kontakt s úřady ČR, zpřístupňovat jim bezplatně potřebné informace různého typu a v neposlední řadě zapojit co nejvíce orgánů VS a jejich agend do elektronického podání (např. zasílání Evidenčních listů důchodového pojištění).
http://portal.gov.cz/wps/portal/_s.155/6966/place

Co říci závěrem?

Krom hlavních projektů, které jsem zmínila nabízí český e-Government mnohem více. Jeho myšlenka a předsevzetí vlády jsou bezpochyby chvályhodné. Dokonce se téměř všechny části dokončují včas. Sem tam se sice vyskytne nějaká ta porodní bolístka, ale vše jde podle plánu. Jediné, co bych zatím považovala za velké mínus je propagace. Krom pár letáčků a spotu na datové schránky před televizními novinami jsem žádnou osvětu ze strany ministerstva bohužel nezaznamenala.

JSON, Native JSON & Json.NET

Tue, 09 Jun 2009 08:04:42 GMT

Na začátek trochu teorie. JSON (JavaScript Object Notition) je podmnožinou literálových výrazů JavaScriptu. A protože je podmnožinou JavaScriptu může v něm být použit jen tak beze všeho. JSON je formát pro výměnu dat (data exchange format) typicky mezi servervou aplikací a javascriptovou aplikací (tj. webovou stránkou).

JSON nebo XML

Oba formáty reprezentují objekty, uložené v paměti, v textové pro člověka čitelné formě a jsou vůči sobě isomorfní (tj. ekvivalentní texty lze mezi sebou převádět). Liší se především vhodností použití. XML je značkovací jazyk a kažký, kdo někdy dělal s webem přijde na nějaké použití XML (např. XHTML). Naproti tomu JSON má kořeny v datových typech a strukturách programovacích jazyků a tak poskytuje přirozenější a lépe použitelné mapování na strukturovaná data.

JSON a literály JavaScriptu

Jak už je napsáno výše JSON je podmnožinou literálových výrazů JavaScriptu, ale zatímco pravidla pro syntax literálů v JavaScriptu jsou volná a téměř cokoliv jimi lze vyjádřit, JSON je mnohem přísnější a jednoduší. Zpráva odpovídající JSON standardu se musí skládat z jediného objektu nebo pole na nejvyšší úrovni. Prvky pole nebo hodnoty objektu mohou být pole, objekty, řetězce, čísla, pravdivostní hodnoty nebo null. Jméno člena objektu musí být validní JSON řetězec a všechny řetězce musí být uzavřené do uvozovek (ne apostrofy). To je ve zkatce JSON standard (podrobněji www.json.org nebo RFC 4627). Naopak v JavaScriptu je prvkem pole/hodnotou objektu jakýkoli validní výraz včetně deklarací nebo volání funkcí. Více informací o literálových výrazech JavaScriptu naleznete snadno na webu.

var invalidJSON1 = {
    key : "retezcova hodnota"
};

var invalidJSON2 = {
    'key' : function() { return "value" }
};

var validJSON = { "bindings": [
        {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
        {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
        {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
    ]
};

Výrazy invalidJSON1/2 nejsou validní JSON, ale jsou validní z pohledu JavaScriptu.

De/serializace JSON objektů a řetězců

Pro převod textu v JSON formátu na objekt lze použít běžnou javascriptovou funkci eval(). Text musí být obalen závorkami pro vyhnutí se dvojznčnosti v JavaScript syntaxi.

var myObject = eval('(' + myJSONtext + ')');

Takovéto použití skýtá bezpečností riziko, protože eval() spustí scripty, které se mohou v myJSONtext potenciálně skrývat. Mnohem bezpečnější je použít JSON parser. Ten rozpozná JSON text a odmítne vše, co neodpovídá standardu. Navíc je v případě nativního JSONu mnohem rychlejší (k tomu později).

var myObject = JSON.parse(myJSONtext);

Opačným směrem pracuje JSON stringifier, který převadí datové struktury na JSON text. Podobně jako XMLSerializer v .NET Frameworku nezvládá cyklické reference (jinými slovy poradí si pouze s acyklickými objektovými grafy).

var myJSONText = JSON.stringify(myObject);

Native JSON

Nativní JSON je jednou z nových vlastností prohlížečů IE8 a Firefox 3.5 a měl by se stát součástí příští specifkace ECMAScriptu. V podstatě jde o zabudovanou de/serializaci JSON přímo v prohlížeči bez použítí JavaScriptu. Použití nativního JSON se nijak neliší od JSON parseru a strigifieru výše.

var jsonText = '{"name":"Me","address":"My House"}';
var myInfo = JSON.parse(jsonText); 

alert(myInfo.name); // Me

var jsonText = JSON.stringify(person);
// {"name":"Me","address":"My House"}

Native JSON je postaven na json2.js scriptu a jeho zahrnutí zajistí podporu starších prohlížečů, zatímco ty s podporou Native JSON použijí svou interní implementaci.

Json.NET

Zatím jsme se zabývaly klientem, teď se podíváme na stranu serveru. Json.NET je open source framework pro práci s JSONem v prostředí .NET Framework. Domovské stránky projektu na Codeplexu a blogu JNK. Json.NET poskytuje třídy pro de/serializaci objektů do/z JSON řetězců.

Příklad z domovské stránky:

Product product = new Product();
product.Name = "Apple";
product.Expiry = new DateTime(2008, 12, 28);
product.Price = 3.99M;
product.Sizes = new string[] { "Small", "Medium", "Large" }; 

string json = JsonConvert.SerializeObject(product);
//{
//  "Name": "Apple",
//  "Expiry": new Date(1230422400000),
//  "Price": 3.99,
//  "Sizes": [
//    "Small",
//    "Medium",
//    "Large"
//  ]
//}

Product deserializedProduct = JsonConvert.DeserializeObject Product(json);

Navíc k přímé konverzi existují i další třídy, např. JsonReader a JsonWriter, a podpora LINQ to JSON.

string json = @"{
  ""Name"": ""Apple"",
  ""Expiry"": new Date(1230422400000),
  ""Price"": 3.99,
  ""Sizes"": [
    ""Small"",
    ""Medium"",
    ""Large""
  ]
}";

JObject o = JObject.Parse(json);
string name = (string)o["Name"];
// Apple

JArray sizes = (JArray)o["Sizes"];
string smallest = (string)sizes[0];
// Small

Už z těch několika málo příkladů je vidět pěkná synergie mezi Native JSON a Json.NET a jejich vhodné a efektivní použití v AJAX aplikacích.

ASP.NET generická komponenta Repeater

Fri, 29 May 2009 16:47:24 GMT

Hlavní myšlenkou komponenty Repeater je plná kontrola nad výstupním HTML kódem. Komponenta je určena pro zobrazování seznamů, galerií, obecně všude tam, kde je potřeba zobrazit opakující se množství dat. Oproti komponentě GridView nabízí mnohem lepší kontrolu nad výstupním HTML kódem. V níže uvedené ukázce se zaměřuji na použití zanořeného Repeateru, který je vhodný pro zobrazení vazeb typu 1-n. Komponenta se skládá z několika sekcí jejich obsah stručně vysvětlím.

<HeaderTemplate> - hlavička, specifikace záhlaví, v případě seznamu je možné záhlaví použít k řazení položek
<ItemTemplate> - nejdůležitější sekce, zobrazení dat, provázání na obsah datového zdroje
<FooterTemplate> - patička, ukončení komponenty

Následuje ukázka databindingu repeateru. Uvažujme jednoduchou databázi, ve které vystupují dvě tabulky

Prvním krokem je specifikace položek ItemTemplate v Repeateru, názvy v sekci Eval se musí shodovat s názvy vlasností objektu.

<ItemTemplate>

   <tr class="blue">

   <td><%# DataBinder.Eval(Container.DataItem, "Title", "{0}")%></td> 

   <td><%# DataBinder.Eval(Container.DataItem, "Name", "{0}") %></td>

   <td><%# DataBinder.Eval(Container.DataItem, "SureName", "{0}")%></td> 

   </tr>

   </ItemTemplate>

Druhým krokem je načtení dat a jejich přiřazení Repeateru.

List<Subject> subjects = new List<Subject>();

   Subject java = new Subject(1, 1, "Jazyk Java", "Zimní","platforma NetBeans");

   subjects.Add(java); 

   

   //prirazeni datoveho zdroje

   subject.DataSource = subjects;

   subject.DataBind();

Po spuštění vidíme seznam

Zanořený Repeater se od původní verze liší navázáním datového zdroje. V další části předvedu jak zobrazit předměty, které učitel vyučuje v kompaktní tabulce s lehkým okořeněním pomocí javascriptu pro zobrazení/schování předmětů.
Bindování dat je trochu složitější, protože v okamžiku, kdy je komponeneta zanořena, není možné na ni přistoupit přímo. Pro tyto účely je vhodné použít metodu FindControl(), která zanořený Repeater zpřístupní.

//načtení zanořeného repeateru

   Repeater rpSubjects = e.Item.FindControl("rpSubjects") as Repeater;

Pro přiřazení předmětů danému učiteli, využijeme události repeateru ItemDataBound, ve ktéré nejdříve zjistíme, pro kterého učitele budeme načítat předměty, poté provedeme vyhledání příslušného Repeateru, načtemě do něj data a výsledek

Ukázali jsme si jak lze použít komponentu Repeater a její zanořenou variantu pro ty, kteří by rádi prohloubili své znalosti, zkuste doplnit do zdrojového kódu možnost řazení nad seznamem podle položky záhlaví, na kterou uživatel klikne.

Celou ukázku je možné stáhnout zde.

Tak je nás o jednoho méně, aby nás bylo o jednoho více.

Mon, 25 May 2009 17:12:19 GMT

Nahlédněte do atmosféry rozlučkového večírku s Evou, která se v nadcházejících dnech, měsících, letech, bude věnovat krásné mateřské povinnosti.

Samozřejmě jak se na večírcích patří, nebyly opomenuty nápoje různého druhu, grilování, a jelikož sídlíme u vodárny i ta Petrova měla své místo v koutku na terase, dále fiktivní soutěž v pojídání feferonek v počtu jednoho skutečného soutěžícího Michala, který se stal samozřejmě vítězem. K tomu všemu jsme nasbírali i pěknou zásobu 2GB autentických fotografií, z nichž se můžete pokochat výběrem několika nejzajímavějších.

Fologalerie z loučení

Lehký úvod do paměťového a výkonnostního profilování .NET aplikací

Fri, 15 May 2009 10:45:27 GMT

Stejně jako v přirozených jazycích lze i při programování vyjádřit a popsat určitou věc mnoha způsoby. A tak jako v reálném světe může být takový popis více či méně šťastný. Zatímco v běžném životě pár nevhodně zvolených slov může vyústit v tichou domácnost, špatně zvolená "konstrukce" ve zdrojovém kódu může způsobit kupříkladu posunutí algoritmu do jiné (vyšší) třídy složitosti. Takový algoritmus se pak může stát úzkým hrdlem aplikace. A právě o nalezení tohoto typu problémů bude toto populárně naučné ublognutí.

Co to je profilování?

Cílem profilování je získat informace o chování programu, zejména o tom, jak dlouho která část programu trvá a jaké vyžaduje prostředky. Díky tomu je možné se zaměřit na zmíněná úzká hrdla programu a daná místa optimalizovat. Nástroj, který nám pomůže tyto informace získat, se nepříliš překvapivě nazývá profiler.

Obvyklým výstupem výkonnostního profileru bývá zejména:

Call graph, reprezentující vztahy mezi funkcemi v programu a počty volání funkcí
nebo
Flat profile, zobrazující jak dlouho strávil program ve které funkci

Paměťový profiler obvykle zobrazuje, resp. je schopen odhalit:

Množství alokovaného prostoru
Detekované memory leaky
Nevhodně velké alokace paměti
Životnost objektů

Dostupné nástroje

Pro platformu .NET je k dispozici mnoho velmi dobrých a velmi drahých nástrojů. Za zmínku stojí populární dotTrace od autorů IntelliJ Idea, YourKit Profiler nebo ANTS Profiler. Nástroj pro analýzu aplikací přidává do Visual Studia i samotný Microsoft, žel bohu jen do verze TeamSuite. Protože článek představuje pouze velmi lehký úvod do problému, budu se držet při zemi a pro demonstraci možností použiju jednoduchý a zdarma dostupný CLR Profiler od Microsoftu. Narozdíl od profileru dostupného ve Visual Studiu jde o samostatnou aplikaci bez integrace do IDE.

Ukázka

Použití profileru budu demonstrovat na jednoduché konzolové aplikaci pro vytvoření náhodného textového řetězce. V aplikaci se nachází tato ošklivá konstrukce:

const char a = 'a';
   Random rand = new Random();
   string result = null;
   for (int i = 0; i < 50000; i++)
   {
   result += (char)(a + rand.Next(26));
   }

Nyní vytvoříme profil aplikace (File -> Profile application) a podíváme se na některé naměřené hodnoty:

První obrázek zobrazuje část call graphu. Kód ve funkci main má na svědomí 600 000 volání různých funkcí.

Další zajímavou informací je allocation graph, zobrazující množství obsazené paměti způsobené voláním kódu v konkrétní funkci. Program si za dobu svého běhu alokoval 2,3GB paměti, z toho 99,98% připadá funkci pro sloučení řetězců. Zde je vidět, že je asi něco špatně :).

Předchozí graf doplním zobrazením práce garbage collectoru, v CLR profileru pod názvem time line. Osa x je čas, osa y obsazená paměť. Vidíme neúprosný boj mezi mizerným kódem hltajícím další a další paměť a zmíněným garbage collectorem, který se snaží uklízet řetězce, na které již v programu nejsou reference.

Prozření

Aplikaci jsme pozměnili tak, aby používala StringBuilder namísto skládání řetězců:

StringBuilder result = new StringBuilder();
   const char a = 'a';
   Random rand = new Random();
   for (int i = 0; i < 50000; i++)
   {
   result.Append((char)(a + rand.Next(26)));
   }

Po vytvoření nového profilu aplikace dostaneme následující allocation graph:

Celková alokovaná paměť je v případě použití StringBuilderu asi 270kB, a to už je jiné kafe!

Opět pro doplnění time line, kde vidíme, jak si StringBuilder postupně zvětšuje buffer pro ukládání řetězce.
Povšimněte si rovněž dramatického rozdílu v celkovém času běhu aplikace - zatímco v prvním případě aplikace běžela téměř 5 vteřin (graf končí na 3. vteřině, protože je zobrazen pouze malý výřez), v tomto případě už se do výřezu "vejde" celý průběh v čase končící přibližně na 0,4 vteřiny.

Tyto výsledky nás přesvědčily, že už je vše v pořádku a další zkoumání již není třeba.

Závěr

Cílem článku bylo ukázat, že profilovací nástroje mohou velmi rychle a jednoduše poskytnout velké množství užitečných informací o programu a jsou tedy užitečným doplňkem při vývoji aplikací.

CLR profiler je možné stáhnout zde

Myšlenkové mapy

Sun, 10 May 2009 20:10:09 GMT

Myšlenkové mapy ("Mind maps") jsou v podstatě graficky zachycená strukturovaná data, jedná se o systém tvorby poznámek.

Velkým propagátorem myšlenkových map je Tony Buzan, světově uznávaná autorita na poli výzkumu mozku a učení. Wikipedie jde trochu dále a mluví o použití podobného schématu již ve starém Řecku.

K čemu se myšlenková mapa hodí

Nejčastěji se o myšlenkových mapách mluví v souvislosti s rozvojem kreativity, jako o nástroji vhodném při hledání řešení každodenních problémů, ke stanovení cílů, k sebemotivaci a k motivaci druhých a k tréninku a zlepšení paměti.

V našem oboru je tato metoda vhodná například k uživatelské analýze požadavků. Jednoduchým způsobem dává věci do souvislostí, odhaluje skrytá zákoutí projektů a dává možnost nahlédnout uceleným způsobem na celou problematiku.

Myšlenkových map také bohatě využíváme při návrhu a tvorbě struktury webových projektů.

Jak myšlenkovou mapu vytvořit

Základní fakta pro tvorbu myšlenkové mapy:

začněte uprostřed papíru ústřední představou vyjádřenou obrázkem
využívejte hodně obrázky, symboly, piktogramy
využívejte rozličné barvy
využívejte KAPITÁLKY pro zvýraznění
každé myšlence věnujte vlastní větev

Na internetu jsem našel výborně zpracovanou myšlenkovou mapu, která shrnuje základní pravidla tvoření map spolu se stručným návodem, jak tyto mapy tvořit.

Autorem tohoto zpracování je vynikající bloger, který má svůj inspirující a do hloubky jdoucí blog (nejen o myšlenkových mapých) na adrese: http://workaholic.bloguje.cz/.

Pár zajimavých odkazů s ukázkami myšlenkových map:
http://www.mindmaps.moonfruit.com/
http://www.mappio.com/
http://www.flickr.com/photos/tags/mindmap/interesting/
http://blog.iqmatrix.com/mind-map-image-gallery
http://www.flickr.com/photos/7232141@N07/

Kolik řečí znáš, tolik má tvůj web jazykových mutací

Sun, 26 Apr 2009 22:55:59 GMT

Cílem podnikání je získat co nejvíc spokojených a platících (nebo platících a až potom spokojených?) zákazníků a vydělat nějakou tu korunu. Oslovme tedy zákazníky tou "nejlevnější" variantou - internetovou prezentací našich výrobků. Vše funguje jak má, zákazníci se jen hrnou a najednou zjistíme, že česká kotlina je nám malá. Internetovou prezentaci už máme, stačí ji tedy přeložit do dalších jazyků a hurá za hranice.

Vzájemné odkazovaní jazykových verzí

Vzájemné propojení jazykových verzí (mutací) stránek se dnes většinou odvíjí v pravém horním rohu webu. Ti rozumnější jej přesunuli do pravého spodního rohu svých stránek, protože kromě toho, že je to internetový standard, který vyhledavačům pomáha spojit si jednotlivé verze k sobě, jsem dodnes nenašel žádný další praktický přínos pro uživatele. Už se vám někdy stalo, že jste si přepnuli jazykovou verzi webové prezentace firmy?

Vlaječky ano či ne?

Když už jazykové mutace na webu zobrazujeme, mohlo by se zdát, že je dobré, když zákazník může reagovat na obrázky a najde si "tu svoji" vlaječku (obrázek 1). Na druhou stranu, proč by zrovna občan Rakouska měl klikat nebo mít zobrazenou německou vlaječku, nebo občan USA na vlaječku Velké Británie? Pro tyto případy je lepší zobrazovat odkazy na jazykové mutace pomocí názvů jazyků nebo jazykových zkratek (obrázek 2). Samostatnou kapitolou pro tyto případy je Google (obrázek 3). V rámci testování jsem se pomocí "Nastavení" přepnul do arabské verze. Krom rozsypaného čaje bylo vše navíc zrcadlově obrácené a i s poměrně dobrou znalostí prostředí jsem z arabštiny neměl šanci zvolit češtinu, protože "Česky" je napsáno arabsky. Pro tento případ by určitě vlaječky byly tou správnou cestou. K označení jazykových verzí vlaječkou nebo názvem jazyka je tedy nutno přistupovat individuálně.

obrázek 1: výběr jazykové mutace pomocí vlaječek

obrázek 2: výběr jazykové mutace pomocí názvu jazyků

obrázek 3: výběr jazykové verze v Google

Jak je to s doménami?

Každá jazyková mutace by měla běžet na své doméně a s koncovkou na které je daný jazyk očekáván.

Například:

www.neco.cz (česká verze)
www.neco.de (německá verze)
www.neco.com (anglická verze)

Uživatelé zvyklí využívat vyhledavače potom naleznou stránku na jim známé doméně a webová stránka tak působí důvěryhodně. Nevýhodou některých zahraničních domén je, že v případě registrace musíte být občanem dané země, nebo vaše společnost musí v dané zemi podnikat a mít přiděleno IČ. S pomocí některých českých registrátorů lze ale vyřešit i tento problém.

Jsou mé domény volné?

Zjistit informace o doménách je dnes poměrně jednoduché pomocí registrátorů. Například registrátor ZONER software, a.s. (www.regzone.cz) nabízí možnost registrace až 60 světových domén. Chcete si registrovat kubánskou doménu (neco.cu)? Připravte si 29.990,- Kč bez DPH (35 688 Kč s DPH) a je vaše :)

Jazykové mutace jako věrné kopie českého obsahu?

Vždy záleží na velikosti a obsahu stránek. Pokud má naše česká mutace 5 stránek můžeme je přeložit všechny. Pokud jsou ale stránky rozsáhlé, je dobré je sledovat pomocí statistik a málo navštěvované stránky nepřekládat, ušetříme tak čas i peníze. Je samozřejmě nutné brát v potaz zvyklosti země, pro kterou danou jazykovou mutaci webu chystáme.

SEO - linkbuilding, sRank, PageRank

Mon, 06 Apr 2009 17:11:58 GMT

V předchozím článku o SEO jsem shrnul tvorbu internetových stránek z pohledu člověka, který o SEO něco ví a už od návrhu, přes nakódování až po výslednou optimalizaci počítá se všemi problémy, které ho mohou potkat. Proto se v tomto článku budu zabývat Linkbuildingem, PageRankem, sRankem a nakonec ukážu další tři nástroje pro optimalizaci a vyhodnocení kódu a klíčových slov.

Seznamácký sRank

Seznam má svého Seznam BOTa, který pro každou stránku vyhodnocuje sRank, ten může mít hodnoty od 0 do 100. Čím větší číslo tím větší má Váš web „cenu“ mezi ostatními výsledky, ve vyhledávání. Algoritmus sRanku je popsán v Nápovědě, a z toho vyplývá, že seznamu stačí pro docílení velkého sRanku mnoho odkazů s podobnou tématikou na Váš web, ale samozřejmě i Vy musíte někam odkazovat (netuším jak u Seznamu, ale Google vyhodnocuje „neodkazování“, jako tzv. rank sink, což znamená černá díra pro Page Rank, a může ho penalizovat). Většina webů v závislosti na této praktice používá tzv. SEO Lišty, Link Farmy, Odkazy v patičce, atd. Více o tomto problému níže. sRank se aktualizuje průběžně každý týden, dva týdny, ale není ani výjimka, že se změní 3x do týdne.

Googlovský PageRank

Google pro vyhodnocení používá svého Google BOTa, který rozdává Google PageRank od hodnot 0 do 10. Algoritmus výpočtu Google Page Ranku najdete na Jakpsatweb.cz nebo na Wikipedii, a z toho vyplývá, že i Google dává stránkám PageRank nejen podle toho kolik webů na ní odkazuje, ale i podle zaměření odkazované stránky. I pro Google se používají různé SEO Lišty, Link Farmy, Odkazy v patičce, atd., ale zde je jedno velké ALE, narozdíl od seznamu, kde pomocí pár odkazů můžete získat opravdu vysoký sRank během pár měsíců u Googlu tohle neplatí, nejen, že přepočet je cca každé 3 měsíce, ale i to, že si Google hlídá počet odkazů z Vašeho webu, tzn. pokud budete mít např. PageRank 3 (tak dejme tomu, že máte u Googlu 1 000 bodů, za předpokladu, že PageRank 1 má 10 bodů, PageRank 2 má 100 bodů, PageRank 3 má 1 000 bodů, atd., nikdo přesné číslo neví, ale pro naše vysvětlení to bude stačit), tak máte 1 000 bodů, které budete dělit mezi ostatní weby, takže pokud máte na stránce 10 odkazů, tak každému v ideálním případě předáte 100 bodů, ale ideály neexistují, a proto do těchto bodů začne Google míchat své čísla, např. Keyword stránek, obsahovost stránky, ale tak např. zda-li vaše weby jsou si tematicky podobné, nebo zda nemáte odkaz na porno / warez stránky, toto všechno se promítne do výsledného počtu bodů a dle toho nám nakonec Google přiřadí daný počet bodů, proto se u Google již zmíněných praktik SEO Lišty, Link Farmy a podobně musíme vyhnout.

Ukázka:

Např. tento web, i kdyby měl PageRank 10 by nám nepředal skoro žádné body, a proto je pro nás bezcenný, a je lepší se takovýmto webům vyhnout.

Stojí za to katalogy?

Většina pochybných katalogů určitě ne, ale některé se určitě hodí a jejich seznam včetně hodnocení najdete na adrese http://seznamkatalogu.cz/, jak moc velký užitek má registrace a jak moc se nám to promítne do výsledných ranků a pozic ve vyhledávání je těžké posoudit, ale za zkoušku nic nedáte, a zkusit si to může opravdu každý, jen buďte opatrní na jednu věc, jsou katalogy, které po úspěšné přidání do katalogu chtějí buď peníze a nebo odkaz na Vašem webu, těmto bych se určitě vyhnul protože tam už něco ztratit můžete ;)

Důvěřuj, ale prověřuj

Toto heslo nás provází už od útlého věku, a ani při vyměňování odkazů by se na něj nemělo zapomínat. Praxe je jednoduchá, vyměníte odkazy za týden po přidání si ho zkontrolujete, ale pak už na to buď nemáte čas nebo se Vám prostě nechce, proto vzniknul program, který dokáže kontrolovat Váš odkaz na ostatních webech, a tím odhalit podvodníka, který si takto zvyšuje PageRank, software najdete na adrese http://linksmanager.cz, je v češtině a určitě stojí minimálně za vyzkoušení , je to dobrý pomocník, který dokáže odhalit i „vyčůránky“, kteří přidávají k odkazu parametr rel=“nofollow“ čímž o daném webu tvrdí Google BOTovi (Seznam BOT toto neumí, nebo alespoň neuměl, nejsem si tím jist), že je to nezaručený odkaz, který pak nebere jako relevantní odkaz.

Další dva nástroje na analýzu stránek

V posledním článku o SEO jsem zmínil dva nástroje, které pomáhají při optimalizaci, ale do vydání článku, už uběhnul nějaký čas a mezitím jsem našel další dva http://www.nastroje-seo.eu/ a http://www.serp.cz/.

Doufám, že Vám článek pomohl pochopit ranky i jejich vyhodnocování a počítání. Většina argumentů a ukázek je postavena na dlouhodobém testování na našich stránkách a sdílení informací s ostatními uživateli, popřípadě školeními.

Narozeniny webProgressu

Mon, 23 Mar 2009 12:15:35 GMT

Rok se s rokem sešel a naše firma oslavila tento měsíc další narozeniny – sedmé. Oslava začala v poklidném duchu, nějaké to slovo úvodem, přípitek s přáním hodně štěstí do dalších roků a lehké shrnutí let předchozích.

V dalších hodinách se popíjelo, jedlo a hlavně debatovalo. U té diskuse bych se chtěl pozastavit. Probírala se témata od historek a zážitků z mládí, pracovních témat a samozřejmě, jak již klasicky, se skončilo u politiky, která se zvrtla na 3hodinovou přednášku stále o tom samém… A není divu, že mnohé z další diskuse úplně odradila.

Jelikož se blížil první jarní den a s ním ruku v ruce i Velikonoce, měli jsme připravenou menší soutěž v podobě vyfukování vajíček. Kdo vyhrál, si již nevzpomínám, ale úkol zvládli všichni. I když se pak muselo vytírat.

Oslavu jsme bez úhony přežili a mě nezbývá nic jiného, než webProgressu popřát ještě mnoho dalších let v působení.

narozeninové fotky

Stránka: jak jsem se vygenerovala?

Mon, 16 Mar 2009 18:09:11 GMT

V příspěvku najdete popis jakým Vám byla aktuální stránka zobrazena. Příklad, na kterém budu demostronovat, je minulý příspěvek od Vlastika Facebook a reklama

Zadání adresy

Nejprvě jste zadali adresu do prohlížeče nebo jste klikli na odkaz na úvodní stránce.

Tím jste požádali server o stránku http://blog.webprogress.cz/facebook-a-reklama.art. Všechny moderní CMS systémy generují stránky dynamicky. Proto na serveru nenajdete žádný adresář ani soubor s takovým názvem.

Překlad adresy

První krok, který je na serveru proveden se nazývá přepis adres. Cílem přepisu je nahradit cestu na skutečný soubor na serveru, který zajistí zpracování. Vlastní přespis v drtivé většině zajišťují regulární výrazy.

Po první kroku je tedy stav následující: http://blog.webprogress.cz/article/detail.wp?article=facebook-a-reklama
Cíl byl splněn, krásnout url adresu jsme nahradili něčím, co dokáže server zpracovat.

Zpracování serverem

Druhý krok je zpracování na serveru. V případě skriptovacích jazyků (jako je například ASP,) by šlo o konkrétní soubor detail.asp v adresáři article. Tento blog ale běží na platformě ASP.NET, která umožňuje zpracování i bez existujících skriptů. Ať už tak, nebo jinak, vždy se dostaneme do části zpracování :

Výsledkem tohoto kroku je načtení textů z databaáze, které budou zobrazeny. Nezapomeňte, že jste požadovali stránku „facebook-a-reklama“, a tedy server připravil texty pro článek s názvem facebook-a-reklama

Šablonový systém

Posledním krokem na serveru je sestavení stránky z načtených textů. Můžete se to představit jako například tetris. Někdo Vám posílá krychličky (data) a vy je musíte správně umístit na stránku. Podle toho, jak je umístíte, výsledná stránka vypadá.

Výsledkem po tomto kroku je vygenerovaná stránka, kterou server pošle zpět. Pak už je jen na přihlížeči, aby Vám ji zobrazil.

Po velmi odlehčeném popisu pár zkušeností s používáním.

UrlRewriter – z technického pohledu je to naprostá zbytečnost. Hlavním důvodem využívání je SEO, které se v dnešní době bez této techniny neobejde. Z praktického hlediska je pro mě hlavní výhodou možnost výměny celého systému bez nutnosti změny adress. Nádherným příkladem, kde podle mě chybí přepis adres, jsou stránky MSDN. S každou aktualizací se setkávám s hláškou „stránka již není platná, budete přesměrováni na její novou podobu“. V případě používání přepisu adres není nutné takto strácet platnost stránek, prostě jen přepíšete pravidla (A ve druhém kroku (viz výše) bude zpracovávat stránky někdo jiný (nová verze))
Zpracování stránek – v našem případě využíváme frameworku Monorail z projektu Castle. Tento framework používáme již více než rok a zatím s pouze kladným hodnocením.
Šablonový systém – musím přiznat, že volba šablonového systému byla formou minimálního zla. Za ideální šablonový systém považuji XSL. Je velmi rychlé a má implemetaci snad pro každou platformu. Hlavní příčinou vyřazení tohoto systému byla nutnost práce se statickými daty ve formě XML. Musel být tedy zvolen systém s podporou objektového programování, aby nedocházelo ke ztrátě dynamických vazeb, jako tomu je v případě XSL. První volba padla na NVelocity. Tento systém je velmi oblíbený, ale osobně nemůžu najít žádný důvod proč :-). Klasický systém ASP.NET stránek jsem vyřadil z důvodu oddělení kódu šablon a kódu naporadí – preferujeme skriptovací jazyky a jim podovné. Nakonec zůstal systém Brail. Z mého výkladu se Vám může zdát, že jsem se spokojil s tím co zbylo. Můžu ale za sebe říci, že je to z výše zmíněných opravdu nejlepší varianta. Zatím jsem našel pouze jeden systém, který pokládám za lepší, ale to se sem nehodí, je totiž pro Javu :-). Pokud by to ale opravdu někoho zajímalo, tak je to JSTL. Zápis je dobře čitelný (odvozeno z klasického XSL) ale pracuje nad objekty a ne statickým XML.

Facebook a reklama

Mon, 02 Mar 2009 08:15:31 GMT

Již delší dobu přemýšlím, jak využívat reklamní možnosti rozvíjejícího se fenoménu Facebook. Díky počeštěné verzi si začíná získávat stále větší oblibu i u českých internetistů.
Podle statistik http://www.allfacebook.com/facebook-demographic-statistics/ počet čechů na Facebooku roste velmi rychle. Vždyť jen za poslední měsíc si získal Facebook nárůst o pěkných skoro 90tis. nových českých uživatelů. A to je jich tam teprve 290tis., to je pořádně exponenciální nárůst.
Typů reklamních sdělení na Facebooku je několik málo, ale dle mého názoru nejúčinnější je jistě přímé doporučení od přítele, jak jsou označováni všichni, kteří můžou nahlížet do Facebookářova publikovaného soukromí. Sdělení pak může vypadat takto: „váš přítel Franta Pepik se stal fandou Hostince u Bláhovky“.

Takto lze budovat fankluby různých značek a zvyšovat tak jejich známost. Ale to jsme jen na začátku!
Zkuste si představit sdělení typu: „Franta Pepik si koupil squashovou raketu FTG“. A následující den Franta Pepík na své Facebook zdi(tak je nazýváno něco jako nástěnka) okomentuje tuto zaznamenanou koupi, že se mu s raketou výborně hraje a že za těch 1400Kč je to určitě nejlepší poměr cena/výkon. A to by bylo, aby se toto sdělení nedostalo ke squashovým fandům, do jejichž skupiny je zařazen jeho Facebook profil. A jelikož Facebook podporuje vytváření vlastních aplikací, myslím že nebude dlouho trvat a Facebook si ukousne řádný díl z marketingových rozpočtů firem. Jaké vás napadají další typy využití reklamího potenciálu Facebooku? Podělte se o ně v diskusi níže.

Skype již o něco hodnější

Tue, 24 Feb 2009 07:42:02 GMT

Jistě si pamatujete, co prováděl Skype verze 3.5 s webovými stránkami po nainstalování doplňku pro Internet Explorer a Mozilla Firefox. Tím že doplněk integrovaný do prohlížeče modifikoval zdrojový kód načtených webových stránek a zvýraznil a zaktivnil telefonní číslo v některých případech způsoboval rozbití layoutu.

Tato funkce byla a vlastně stále je pro uživatele velice příjemná, na druhé straně potrápila nejednoho webdesignera, když jej zákazník upozorňoval na to, že jeho stránky jsou rozhozeny.

Kuriózní situace vznikala, když zákazník – nic netušící uživatel si v dobré víře nainstaloval Skype a netušil, že rozhození layoutu webu si způsobil vlastně sám tímto komunikačním programem. Na druhé straně webdesigner nepoužívající Skype zas netušil, co tento program může způsobit, a jaký má zákazník problém, protože web se jemu zobrazuje v pořádku, ale hnán zákazníkem k zodpovědnosti byl nucen tuto situaci řešit.

Po zaslání „screenu“ zákazníkovy obrazovky, pak již bylo patrno, co se vlastně stalo. Přišlo na řadu řešení. Upravit číslo na web stránce tak, aby Skype nedokázal toto číslo identifikovat a zvýraznit je. Tímto jsme sice připravili uživatele v rámci našeho takto upraveného webu o možnost přímo volit číslo ve Skype, ale na druhou stranu podle pravidla oko za oko zub za zub – (ty nám rozbíjíš web tak my ti to zatrhnem) jsme zabránily rozsypání našeho layoutu webu, k němuž se Skype zrovna ohleduplně nechoval.

A co je nejdůležitější zákazník byl spokojen.

Mimochodem tímto jsme si navíc pomohli od narušení estetičnosti designu zvýrazněnými čísly a tedy zásahu do grafiky. Omluvou pro Skype snad jen zůstává fakt, že tuto funkci nemusel uživatel instalovat i když byla implicitně zatržena a pokud se již stalo je v prohlížeči vypínatelná, jenže málokterý „běžný uživatel“ o této možnosti ví, jelikož manuály jak známo nikdo nečte.

S novou verzi 4.0 je to již poněkud jinak. Vývojáři Skype v tomto případě neusnuli na vavřínech a v současnosti Skype respektuje nastavení parametrů webu v kaskádových stylech. Jak se to projevuje? Jednoduše, pokud je prvek, v němž je identifikované telefonní číslo užší než zvýrazněné číslo vyžaduje – zvýraznění se zkrátí:

Jak prosté a jednoduché, ale proč to nešlo hned páni z vývoje že? :)

Poněkud horší je to s obejitím této funkce, Skype již nelze jednoduše oblbnout např. obalením mezery mezi číslem značkou span:

tel.: 123<span> </span>456 789

Jediné jednoduché obejití na úrovni HTML je nepoužívat u čísel mezinárodní prefix např. +420. Toto předčíslí, ale hlavně + nebo 00 jsou pro Skype rozhodující znaky pro rozpoznání zda na webu číslo je telefonní. Zvýraznění pomocí znaků + nebo 00 se projeví pouze u platných registrovaných čísel pro mezinárodní předvolbu. Pokud si pro předvolbu vymyslíte libovolné číslo, které není platné, Skype samozřejmě číslo ignoruje, což je samozřejmě správně.

Hned mě napadá používat Skype jako zběžnou kontrolu správnosti zápisu telefonních čísel na web stránce.:)

Jelikož, hledání způsobu jak Skype jednoduše nově obelstít (myšleno bez použití javascriptu) je mimo rozsah tohoto článku. Pokud nějakou jednoduchou fičuru objevíte, budu rád, když ji napíšete do příspěvku pod článkem.

Za podnět k napsání tohoto článku děkuji Vráně :)

SEO jde na dračku

Mon, 23 Feb 2009 08:33:03 GMT

O víkendu jsem nezapomněl rekapitulovat a mimo jiné jsem se mrknul na www.weblogy.cz. Pěkná úrodička :), hned dva pěkné články o SEO. A protože SEO řešíme každý den, jsem za takovéto články rád. Určitě stojí za přečtení.

Jak dlouho vydrží vaše SEO? a Prodavači hadího SEOleje

S prvním článekm nezbývá než souhlasit. I my se držíme se hesla: "Co bude jasné a přehledné pro zákazníka, to docení i vyhledávač."

Druhý článek poukazuje na špatný náhled některých, dle mého názoru většiny :o), lidí, kteří v SEO vidí "magii" a hledání slabin vyhledávačů. Tudy ale cesta holt nevede...

Richard - Martin - Trautenberk - Krakonoš – na konferenci Efektivní web 2009 v Brně

Fri, 20 Feb 2009 09:42:34 GMT

Že se naše firma bude účastnit konference Efektivni web (www.efektivni-web.cz) jsme všichni věděli již delší dobu, nicméně ten hlavní nápor pro naše řečníky byl den před konferencí, kdy pilovali a trénovali, jak nejlépe informace předat posluchačům, tak aby je neunudili. Byla to docela psina, když se z odpočinkového rohu místnosti ozývaly různé vtípky.

Jako první nastoupila Irena Wintrová z firmy Mediaresearch a prezentovala zajímavá trendová data českého internetu, nejen z pohledu klasické návštěvnosti, ale také se zaměřením na sociodemografické informace. (Musím říci, že když jsem se díval na jejich stránky, tak jsem si znovu musel pustit, jejich báječné PFko (http://vimeo.com/2532387?pg=embed&sec=2532387).

Jako další nastoupili „bratři v triku“, jak se sami prezentovali naši kolegové z branže, vedení panem Poskerem. Snažili se předat zajímavé postřehy, které získali při práci se svými klienty a co se jim dařilo a nedařilo.

Velmi zajímavá byla prezentace Petra Kořínka o měření návštěvnosti pomocí Google Analytics, která mohla být pro řadu účastníků velmi podnětná.

A pak to přišlo… Doba před obědem, kafe efekt již pominul a sál se pomalu odebíral ke spánku…

„To nemůže vyjít, lidi neudrží pozornost. Proč kluci vystupují v tak blbou dobu!“ říkal jsem si.

Ale omyl, Martinův hlas byl dobře slyšitelný a na otázku do pléna, jaký že to běží zrovna večerníček, to řadu posluchačů rozehřálo… No to je přece jasné – Trautenberk! Další rozehřívání sálu pokračovalo a Richardovi i Martinovi se podařilo vykřesat v sále život a rozproudit krev v žilách posluchačů, předat jim zajímavé postřehy, jak vlastně má vznikat web, a na jaká úskalí můžeme narazit a jak se jim vyhnout ve čtyřech základních pravidlech.

Z přednášky si posluchači odnesli internetovou adresu http://www.webprotrautenberka.cz/, kde měli hledat pokračování příběhu. A již teď ze statistik víme, že opravdu hledali. Propojení offline konference a on-line sdělení se podařilo!

Přednášku si můžete stáhnout na webu: http://www.webprotrautenberka.cz/, škoda jen, že budete ochuzeni o velmi zábavné podání ;-).

Znáte to, taková normální porada. Kafíčko, dva cukříčky, mlíčko. Šéf všechny chválí ...

Po obědě jsme si vyslechli dvě velmi pěkné přednášky o PPC kampaních z úst Radka Sakáče a ze Seznamu.cz přednášejícího Roberta Štípka, který musel obratně odpovídat i na ožehavé otázky týkající se přirozeného vyhledávání. Ukázal pár zajímavých trendově rostoucích křivek. Sice bez konkrétních hodnot, ale chápeme, holt obchodní tajemství je opravdu tajemství. Ale rostou!

Následovalo vystoupení Vjačeslava Fedorenka, který všechny překvapil svou bravurní češtinou, přízvuk se nezapře. Závěrem už jen stručně: AdFox a prezentace pana Hájka z Microsoftu.

Z konference jsme si odnesli řadu podnětů, a moc se těšíme na další, kde naši skvělí šoumeni uchopí nudné téma netradičním a zábavným způsobem.

Jak na IFRAME aneb přestáváme se bát STRICTu

Fri, 13 Feb 2009 15:52:58 GMT

Rád bych se podělil o umístění prvku IFRAME, který XHTML Strict nedovoluje používat. Tento prvek používáme běžně pro odeslání jednoduchých formulářů bez refreshe stránky jako je např. doporučit web.

Doporučení stránky probíhá pomocí javascriptem zobrazeného formuláře. Jak jsem již uvedl IFRAME není povolený, proto jsme sáhli, jak to nejlépe říci, k „obejití“ normy.
Na konec zdrojového kódu vložíme DIV pro následné použití v JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>

   <title>použití IFRAME v XHTML Strict</title>
   <meta http-equiv="Content-Language" content="cs" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <meta http-equiv="Reply-to" content="info@webProgress.cz" /> 
   <meta name="author" content="webProgress.cz; e-mail: info@webProgress.cz" />
   <meta name="resource-type" content="document" /> 
   <meta name="robots" content="all" />
   <meta name="Description" content="" />
   <meta name="Keywords" content="" />
   <link rel="stylesheet" href="index.css" type="text/css" media="screen" />
   <script type="text/javascript" src="index.js"></script>
   </head>
   <body>
   <script type="text/javascript">
   HrefRecommendWrite()
   </script>
   <noscript>
   <p><a href="http://www.hotel-prestige.cz/doporucit/.sendmail" title="Doporučit stránku">Doporučit stránku</a></p>
   </noscript>

   <div id="disabled"></div>
   <div id="form"></div>
   <script type="text/javascript">
   document.getElementById('recommend').style.display='block';
   </script>
   </body>
   </html>

IFRAME do stránky vložíme do DIVu pomocí innerHTML. Toto se děje při zavolaní JS funkce, která nám samotný formulář zobrazuje

function HrefRecommendWrite() {

   document.write('<p><a href="javascript:void(0)" onclick="ShowForm()" title="Doporučit stránku">Doporučit stránku</a></p>')
   }
   function winW() {
   /* NN4 a kompatibilní prohlížeče */
   if (window.innerWidth) return window.innerWidth;
   /* MSIE6 v std. režimu - Opera a Mozilla již uspěly s window.innerWidth */
   else if (document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth;
   /* starší MSIE + MSIE6 v quirk režimu */
   else if (document.body && document.body.clientWidth) return document.body.clientWidth;
   else return null;
   }
   function winH() {
   /* NN4 a kompatibilní prohlížeče */
   if (window.innerHeight) return window.innerHeight;
   /* MSIE6 v std. režimu - Opera a Mozilla již uspěly s window.innerWidth */
   else if (document.documentElement && document.documentElement.clientHeight) return document.documentElement.clientHeight;
   /* starší MSIE + MSIE6 v quirk režimu */
   else if (document.body && document.body.clientHeight) return document.body.clientHeight;
   else return null;
   }
   function ShowForm() {
   formObject = document.getElementById('form');
   disabledObject = document.getElementById('disabled');
   disabledObject.style.height = winW() + 'px';
   disabledObject.style.height = winH() + 'px';
   disabledObject.style.display='block';
   
   formObject.innerHTML += '<a href="javascript:void(0)" onclick="HideForm()" title="Zavřít okno" class="right">Zavřít okno</a>'
   formObject.innerHTML += '<h2>Doporučit stránku</h2>'
   formObject.innerHTML += '<iframe srolling="no" id="iframe" frameborder="0" src="form.html"></iframe>'
   formObject.innerHTML += '<button onclick="alert(\'Odešli doporučení\')" title="Odeslat doporučení" class="right">Odeslat formulář</button>'
   //pro IE 6 a nižší probehně refresh iframe
   if (navigator.appName == "Microsoft Internet Explorer") {
   document.getElementById('iframe').src = document.getElementById('iframe').src;
   }
   formObject.style.display = 'block';
   formObject.style.left = (winW()/2)-252 + 'px';
   window.scrollTo(0, 0);
   }
   function HideForm() {
   formObject = document.getElementById('form');
   disabledObject = document.getElementById('disabled');
   parent.formObject.style.display='none';
   parent.disabledObject.style.display='none';
   parent.formObject.innerHTML = '';
   }

Jak jednoduché, ale účinné. Při validaci v kódu žádný IFRAME není a i po zavolání jej pro sichr ze stránky smažem.

Je samozřejmostí, že při vypnutém JS jste přesměrováni na samostatnou stránku.

Tento „problém“ jsme řešili na nových stránkách Hotelu Prestige**** ve Znojmě (http://www.hotel-prestige.cz)

Stáhni si ukázkový kód.

Nejkrásnější české knihy roku 2007

Mon, 26 Jan 2009 09:34:14 GMT

Do soutěže Nejkrásnější české knihy roku 2007 přihlašují knihy sami nakladatelé. Letos se soutěže zúčastnilo celkem 109 vydavatelů s 217 knihami, z toho bylo 23 studentských prací.

Výtvarná porota soutěže hodnotila celkem 214 knih a z nich vybrala do užšího výběru 45 publikací, které představují vrchol české knižní tvorby. Nakladatelé dávají přednost jak zavedeným knižním tvůrcům, tak i začínajícím autorům, jejichž úroveň byla v tomto ročníku nadprůměrná a po zásluze oceněná.

Toto je krátký výtah k úvodnímu slovu k výstavě Nejkrásnější české knihy roku 2007. Pravdou ovšem zůstává, že i samotná výstava byl jen zlomek výtahu z přihlášených děl.
Oceněné knihy jsou umístěny za vitrínami a návštěvník je tedy ochuzen o požitek z knihy jejím prolistováním si a ohmataním a tedy přichází o blízký kontakt s vystavovaným dílem, na který si mohl přivyknout během brněnského bienále, kde si ke knihám či časopisům návštěvník mohl sednout a v klidu se ponořit do prohlížení vystavené publikace, časopisu nebo katalogu.
Něco málo z oceněných knih bylo vystaveno na prodejním pultu na informacích, kde si tyto knihy návštěvník mohl zakoupit a i prohlédnout.

Kategorie soutěže byly následující:

KNIHY O VÝTVARNÉM UMĚNÍ A OBRAZOVÉ PUBLIKACE

1. ocenění - Emil Filla (vybral a uspořádal Tomáš Winter, grafická úprava Jiří Mědílek)

KATALOGY VÝTVARNÉ, FIREMNÍ A DALŠÍ
1. ocenění - Wenceslaus Hollar 1607-1677 and Europe between Life and Desolation (grafická úprava Bárta & Bárta)

KRÁSNÁ LITERATURA
1. ocenění – Režná bába (sebral Miloš Doležal, grafická úprava, ilustrace a sazba Luboš Drtina)

S Lubošem Drtinou, který je asistentem v ateliéru Tvorba písma na VŠUP, je i rozhovor ve Fontu č. 101. V rozhovoru popisuje školní dění a práci s nakladatelstvími. Dále vypráví o svých knihách a výstavách a knize Režná bába a také se pozastavuje nad blízkou budoucností.

UČEBNICE PRO ŠKOLY A OSTATNÍ DIDAKTICKÉ POMŮCKY V TIŠTĚNÉ PODOBĚ
1. ocenění – Adamův deník (autorka knihy Blanka Neoralová, grafická úprava Sylvie Klempererová, ilustrace Lukáš Urbánek )

Rozhovor s autorkou knihy Blankou Neoralovou, která se rozpovídala o problematice dětského diabetu, a se sourozeneckou dvojicí, která tuto knihu graficky upravila a ilustrovala, si můžete přečíst ve FONTU č. 102.

LITERATURA PRO DĚTI A MLÁDEŽ
1. ocenění Záhádky (grafická úprava Robert V. Novák a Petr Nikl, ilustrace Petr Nikl)

VĚDECKÁ A ODBORNÁ LITERATURA
1. ocenění Ulice na konci světa (grafická úprava Mirko Baum)

STUDIJNÍ PRÁCE POSLUCHAČŮ VÝTVARNÝCH A POLYGRAFICKÝCH ŠKOL
1. ocenění Sedm receptů Kateřiny Šachové (VŠUP v Praze)

Rozhovor Jany Petrželové s Kateřinou Šachovou najdete ve FONTU č.100. Zde si můžete přečíst o Kateřininých stážích, škole a její práci na knize SEDM RECEPTŮ KATEŘINY ŠACHOVÉ a jejím vztahu k vaření.

Mezi nejzajímavější knihy, které byly vystaveny můžu jistě jmenovat knihu o Lásce a sexu , o které již byla zmínka ve FONTU a která je jistě velmi poučnou knihou pro dospívající teenagery, kteří si tak mohou udělat jasno co se týče choulostivých otázek.

Mezi další zajímavosti výstavy bych určitě zařadila Zuzanu Lednickou ze studia Najbrt, která si odnesla dvě „stříbrné medaile“ a to konkrétně za knihu Život Štěstí Překvapení (Kategorie výtvarné, firemní a další) a za Český czech design 01, které publikovalo již výše zmíněné studio Najbrt.

Táhne!

Wed, 14 Jan 2009 10:30:32 GMT

Venku mrzne, sněží, mrzne, mrzne. Obraz posledních dnů je stejný. Mráz. Vše by bylo ok, kdybychom se dovolenkovali na horách jako Richard, ale… Sedíme v moderní administrativní budově. Je pěkná. Není bez chyb. Táhne! Okna netěsní, je to na rukavice. Táhne!
Nezoufáme, nemáme hlavy přec jen na čepice. Byť táhne. Ohříváme vzduch.
Tutoriál v obrazech:

Jak psát správě nejen i web

Mon, 05 Jan 2009 08:04:55 GMT

Dlouho jsem přemýšlel jaké téma si mám zvolit, ve firmě jsem krátkou dobu a v ničem až tak zatím nevyčnívám, abych o tom mohl psát článek. Stále jsem jen tak přemýšlel, ale bezúspěšně. Až do té doby, než jsem si právě pročítal tento blog:) Spatřil jsem, někde více, někde méně, chyb v typografii. Hned jsem si povyskočil a nápad byl na světě. Pokusím se Vám tedy pootevřít ty nejzákladnější stylistické zákoutí.

Tři, čtyři, pětitečky ...

S tímto „problémem“ se setkávám v poslední době čím dál tím víc, jak na diskusních fórech, e-mailech, tak i přímo na webu. Tak že jak to tedy s tím doopravdy je?

Tři tečky nahrazují nevyslovené myšlenky, nedokončené věty apod. Píšou se vždy bez mezery hned za posledním slovem věty. (Příklad: Co budu dneska dělat? Nevím...)
V případě, že píšeme nějaký neúplný výčet (seznam), píšeme s mezerou. Opět použijeme jen tři. „Poslední“ tečku, vykřičník nebo otazník na konci věty vkládáme přímo do nich, tak že jsme stále na třech znaméncích. (Příklad: Na Silvestru se neobejdeme: bez vína, piva, chlebíčků, …)
Více teček můžeme ale také použít, a to v případě, že jimi nahrazujeme neúplné slovo, např. v hádankách: Král věnuje princeznu a půl k.........

Dvě tečky na konci věty

Jak tedy správě napsat tečku na konci věty, která končí závorkou a jejímž posledním prvkem je zkratka ukončená tečkou? Příklad: V obchodě koupíme spoustu užitečných věcí (koště, mýdlo, šampón, atd.).
Důvod je takový, že tečka v závorce neuzavírá větu, ale je součástí zkratky.

Obecně o tečkách a čárkách

Tečky a čárky, stejně jako vykřičníky, otazníky, dvojtečky nebo středníky pište rovnou za slova, bez mezer. Za ně však již mezera patří.

Procentní, procento a stupně

Často velmi chybový případ například v progressbarech, preloaderech apod.
60 % znamená „šedesát procent“
60% tedy znamená „šedesáti procentní“

Stupeň (°) lze psát kombinací kláves ALT+0176 nebo přímo vložením symbolu. Používá se při:

Označování teploty (6 °, -25 °C). Píšou se s mezerou k číslu a bez mezery ke značce „C“ nebo „F“. Pozor, při použití v přídavných jménech píšeme bez mezery. Stejně jako procenta (12° pivo).
Při označení úhlu (Σ = 45 °) nebo souřadnic (17°01′10″).

Seznamy, výčty, rejstříky ...

Vždy je třeba dodržovat vztah mezi velkým (malým) písmenem a interpunkčním znaménkem. Pokud začneme výčet malým písmenem, měli bychom jednotlivé body seznamu končit čárkou, pokud velkým písmenem, pak tečkou. První způsob je obvyklý u výčtů, jejichž jednotlivé body tvoří nevětné celky, druhý u výčtů, jejichž jednotlivé body obsahují více větných celků.

„Pořádně to zvýrazni, ať je to vidět!“

V rámci samotného textu používejte ke zvýraznění tučnou sazbu, případně kurzívou. Snažte se vyvarovat různých kombinací, např. tučně a: kurzívou, podtržené, … Jednak to nevypadá vůbec nejlépe, ale je i v rozporu s normou. Navíc si lidé budou podtržené texty plést s odkazy.
Jestli tedy potřebujete již zvýrazněnou věc ještě více zvýraznit, raději přeformulujte celou větu, neboť čtenář se bude v různých druzích odlišení ztrácet.
Dále se určitě vyhněte různým paletám barev ve Vašem textu, značně to znepříjemňuje čtenářův pocit. Je doporučeno používat na webu maximálně tři druhy barevných odstínu, včetně hlavního textu, a to tak, že je jedna barva pro nadpisy, text a odkazy. To platí i u stylu písma. Jistě by Váš výtvor neměl obsahovat rozmanitou směs fontů. V tomto případě jsou doporučeny dva druhy.
Uvádí se také, že pro uživatele je o hodně příjemnější bezpatkový font (Arial, Verdana, Tahoma, …) oproti patkovým (Times, Courier, …). Za sebe můžu říct, že s tím na 100 % souhlasím.

Umíme používat synonyma...

Věc, která mi přímo bije do očí, a těžko se s ní smiřuji. Jedná se o časté, nadměrné používání stejných slov v textu. Přitom je tak „lehké“ vymyslet nějaký jiný ekvivalent nebo větu zformulovat jinak, bez jeho opětovného použití. Pepa (kolega z firmy), když jsme o tomto tématu bavili, namítal, že např. v odborném textu je to povolené, ano, ale jsme snad Češi… Vůbec není pěkné, když musí čtenář „louskat“ text, kde na každém řádku je stejné slovo, byť třeba v jiném pádě. Většinou tento nešvar při psaní ani nevnímáme, a proto je dobré si výsledný text dobře pročíst než ho zveřejníme.

Vy, Vám, Ty, Tobě

Podle Pravidel českého pravopisu píšeme tvary těchto zájmen s velkým počátečním písmenem v dopisech k vyjádření úcty, a to ať už se obracíme na jednu osobu, ať jí tykáme či vykáme, nebo i na více osob (tj. v jednotném i množném čísle). Malým písmenem se v dopisech naznačuje soukromý, důvěrný charakter dopisu. Posílám Vám pozdrav je základní, zdvořilý způsob, použitelný i pro osobu (osoby), se kterou (kterými) se blíže neznáme, vhodný i pro úřední korespondenci.
Nicméně si musíme dát i pozor na přílišnou zdvořilost až „vlezlost“ a to zejména pokud oslovujeme neznámou skupinu lidí. Příklad: „Milí neznámí, dovolujeme si Vás pozvat do naší restaurace na polední menu. Věříme, že Vám jistě zachutná.“

Uvozovky

České uvozovky se píší bez mezer rovnou k příslušnému textu, nebo výrazu. Velká nápověda je představit si místo nich číslice (dvě malé devítky dole „99“ a na konci dvě malé šestky „66“). Pokud potřebujeme použít další uvozovky v již uvozené větě, využijeme doplňkové , ‘. Posledním akceptovatelným typem uvozovek v českém jazyce je méně častý tvar » «, používaný především v knižní sazbě.
Nejrozšířenější chybou v souvislosti s uvozovkami je použití toho typu uvození – "slovo"–, protože toto znamená míru v palcích nebo časového údaje. Z vlastní zkušenosti si ale myslím, že za tuto chybu většinou ani nemůžeme, protože např. náš textový editor, redakční systém nebo e-mailový klient nemá české jazykové prostředí jako výchozí nastavení.

Časové údaje

Při psaní časového údaje oddělujte hodiny a minuty tečkou, nikoliv oblíbenou dvojtečkou. Ta se používá jen k oddělení sekund od minut, desetiny sekund se od celých sekund oddělují čárkou. V datu pište za číslice vždy tečku s mezerou (správně tedy 18. 12. 2008, chybně 18.12.2008).

Jak jsme točili PF 2009

Fri, 19 Dec 2008 07:59:56 GMT

Reportáž o natáčení PF 2009.

Video k prohlédnutí na youtube.com.
Video ke stažení ve formátu wmv.
Výsledek naší práce: PF 2009.

Fotogalerie z natáčení

Vánoce

Sun, 14 Dec 2008 14:08:23 GMT

Pátek 12.12., 18:00 - Pohádková restaurace, rozkaz zněl jasně: Musíte dojít! O co se vlastně jde?
Už delší dobu nám všemožné indície napovídají, že se blíží čas vánoc a konec roku a to znamená i vánoční večírek!
To je přesně ta chvíle posedět si s kolegy v příjemné hospůdce nad kupou jídla a vyčkávat, zda jsme byli i letos hodní. Ukázalo se že ano.

Předkrm v podobě sýrů, slaniny, klobásek, kuřecích nugetek není ničím výjmečný.
To pravé lákadlo večera byl samozřejmě hlavní chod dle vlastní chuti. Mezi favority se zapsaly ryby a steaky. Většina tímto skončila a věnovala se klábosení a popíjení. Jen Petr se rozhodl překonat staré tradice a vyzval, jedlíka let minulých, Rosiho k boji o letošní titul, takže po výborném 300 g steaku na víně u nich následoval obrovský vanilkovo-čokoládový pohár, který zajedli kuřecími smaženými křídly. Vítěz ficiálně vyhlášen nebyl, ale každý kdo tam byl ví své:)
Letošní ročník vánočního veselení se zkrátka vydařil.

Vánoční fotogalerie