Novinky na blog.webprogress.cz

Od skicování k realitě

Thu, 06 Jan 2011 15:50:25 GMT

Nedávno jsem psal článek o rané fázi návrhu webu za pomoci skicování. Dnes bych rád volně navázal praktickou zkušeností na zajímavém projektu dárkového průvodce pro MALL.cz.

Start

Asi nikoho nepřekvapí, že jsme projekt zahájili skicováním. V prvním kole jsme se víceméně seznámili se zadáním projektu, tím, že každý prezentoval svůj návrh (skicu) kolegům. Jednotlivé koncepce jsme měli načrtnuty a slovně okomentovány, což nám pomohlo uspořádat si nejen myšlenky, ale začít se i ladit na stejnou vlnu.
Osobně se domnívám, že cílem prvního kola je skutečnost, že tým pochopí celé zadání do hloubky.

Prototyp

Po dalších dvou kolech skicování jsme měli společnou představu, jak celý projekt chceme realizovat. Výsledná skica je samozřejmě plná bílých míst, nejsou na ní dořešeny detaily, a proto jsme v dalším kroku přistoupili k prototypování.
Nejčastěji používaným postupem je wireframing - prototypování stránek v programech typu AXURE, ten jsme pro vizuální a funkční jednoduchost projektu nezvolili. Místo toho jsme vyrobili papírový prototyp dárkového průvodce.
Nespornou výhodou zvolené metody je krátký čas potřebný na výrobu, nevyžaduje speciální software a jediné co potřebujete je papír, tužka, nůžky a případně lepidlo. Dalším bonusem je snadná prezentace koncepce zákazníkovi a celému týmu, který projekt bude realizovat.

Krásné, ale…

Faktory, jako je doba odezvy, snadnost implementace a další mohou ukázat, že navržená představa nemusí být tak dobrý nápad, jak to vypadá na papírovém prototypu. Tato úzká místa snadno odhalíte HTML prototypem. Nejenom, že jsme pomocí tohoto plně funkčního, graficky minimalistického prototypu komunikovali se zákazníkem, ale přímo na něm probíhalo i uživatelské testování a odhalování případných slepých cest.

Verdikt

Ať se nám to líbí nebo ne, návrh uživatelského rozhraní není jen o tom, co vidíte na obrazovce, ale je to ucelený zážitek, který v sobě kloubí nejen UXD (user experience design), grafiku ale i dobu odezvy na dotazy nebo AJAX aktualizace.
Posuďte sami, jak jsme svěřený úkol postavit dárkového rádce zvládli: http://darky.mall.cz/.

Zajímavá varianta licencování od Microsoftu

Mon, 13 Dec 2010 16:14:05 GMT

Pro většinou českých firem je doposud neznámá varianta nákupu softwaru od společnosti Microsoft formou tzv. SPLA licence.
Než se pustím do rozebírání o co se vlastně jedná, tak jedna citace ze školení u společnosti DAQUAS, která mě zaujala:
„Nejdražší možnost, jak přijít k licenci na software je krabicová varianta“

Mimochodem, společnost DAQUAS mě mile překvapila, protože licencím na produkty společnosti Microsoft rozumí lépe, než samotní pracovníci v českém Microsoftu o čemž se naše společnost bohužel draze přesvědčila v minulosti.

SPLA

SPLA neboli Services Provider License Agreement v dosloveném překladu „licenční dohoda poskytovatele služeb“ může být pro mnohé společnosti ekonomicky efektivní řešení, jak získat legální přístup k poměrně cenově náročným řešením od společnosti Microsoft.
Výhody plynoucí z uzavření SPLA smlouvy:

Malá investice
Přístup k robustním a sofistikovaným řešením
Legální hosting– mnoho společností nabízejících hosting ani netuší, že mají nelegální software
Sezóní nebo dočasné projekty
Nejnovější verze softwaru, ale i downgrade
Testovací provoz zdarma

Malá investice

Zde je srovnání s ostatními licenčními programy velmi zřejmé. Za prvé se licence platí měsíčně a sice až po uplynutí vykazovaného období. A za druhé ceny jsou velmi příjemné.
Konkrétní srovnání:
Windows Web Server – Procesoforvá licence - cca 260 Kč/měsíc
Windows Web Server – Procesoforvá licence - cca 9 tis Kč
V tomto případě se jedná o poměrně levný software, nicméně v případě, že potřebujete např. procesorovou licenci na SQL server, která se pohybuje cenově přes 150tis. je jistě varianta SPLA finančně zajímavá příležitos.

Jak je to s hardwarem?

Software provozovaný pod SPLA licencí lze provozovat na vlastním nebo pronajatém hardwaru od výrobce. Je možné jej provozovat v datacentru u třetích stran.

Forsquare, gowalla

Wed, 08 Dec 2010 13:19:24 GMT

V tomto článku se chci zabývat službami Forsquare a Gowalla, jsou to geolokační služby, které po zaregistrování a přihlášení umožňují sdílet s Vašimi přáteli, místa (restaurace, hospody, zastávky, kina, muzea…) na kterých právě jste anebo co právě kde děláte. Pokud se nějaké místo v aplikaci nevyskytuje, tak je jednoduše vytvoříte. Nemusíte používat pouze “chytré” mobily se systémem: Android, iOS, Symbian, BlackBerry…, ale můžete přistupovat i k webové aplikaci přes počítač nebo notebook. Toto byl jen v rychlosti úvod o těchto službách, pokud chcete vědět více, přečtěte si článek na lupě.

Foursquare

Za každý tzv. checkin (neboli přihlášení na daném místě), dostanete bod, za určitý počet bodů nebo splnění počtu checkinů v čase, místě, atd… dostáváte různé tzv. badge (nebo-li medaile). Ten, kdo je na jednom místě checknut nejvíckrát, tak se stává tzv. mayorem daného místa. Ke každému místu můžete přidávat popisky, komentáře, a sdílet tyto informace se svými přáteli, nejen na samotném Foursquaru, ale I na Twitteru nebo Facebooku.

Gowalla

Funguje na stejném principu jako Foursquare, s tím rozdílem, že zde místo badge sbíráte předměty, které po checkinu na nějakém místě můžete měnit a sbírat, a tímto poskládat celé kolekce předmětů. Mezi další specialitu patří přidávání tzv. trips, neboli výletů, za splnění celého výletu dostanete speciální odznáček. K místu lze navíc nahrávat fotky s komentářem. Ještě je zde jedna specialita, že Gowalla rozpozná na jakém místě a v jaké zemi, jste se checknuli a tím vám přidává odznáčky v podobě vlajek zemí.

Využití těchto služeb v praxi

Většina lidí si položí otázku jak tyto služby využít pro marketingové účely. U nás zatím těžko, protože podle Elišky Hutníkové je počet českých uživatelů k září 2010: 1797. Tím pádem můžete oslovit pouze pár jedinců, kteří o tom ovšem můžou dát vědět na Twitteru a na Facebooku, a tím se číslo uživatelů mnohonásobně zvětší, výborným příkladem je firma Diesel v New Yorku, bez jakéhokoliv předchozího marketingu, nabídla každému uživateli, který se v okruhu 3 bloků checknul, dárek. V průběhu první hodiny nabídku využily 4 uživatelé, kteří dostali trička zdarma. Celkem Diesel zaznamenal 44 checkinů a 17 zmínek na Twitteru, které celkem oslovily 21 tisíc uživatelů. Další příklad využití, ukázala kavárna v Baltimore, která pro mayora (neboli člověka, který se na daném místě checknul nejvíckrát) nabízí kávu bez čekání ve frontě.
Jeden z prvních kdo se snaží používat Foursquare, je mall.cz, který nabídnul 10% slevu na sportovní zboží.
Seznam míst, které nabízí oficiální odměny za checknutí naleznete zda: http://foursquare.com/businesses/
A jak začít a nastartovat tento způsob marketingu? Prvně byste si měli přidat váš podnik jako místo do Foursquare a Gowally, pokud už jsou vytvořeny, tak se musíte nechat ověřit, že jste skutečným vlastníkem daného místa pomocí http://foursquare.com/businesses/ a http://gowalla.com/business. Po schválení, které u Foursquare trvá cca. 3 týdny (u Gowally to bude asi podobné), se stanete vlastníkem místa a dostane možnost dělat akce a sledovat statistiky Vašeho místa. Tento způsob marketingu je u nás zatím v plenkách už jen kvůli počtu uživatelů, ale ve světě si získává více a více nadšených provozovatelů obchodů.

Zdroj: http://blog.h1.cz/foursquare-pro-firmy-prakticky/

Povinné údaje na webu

Mon, 01 Nov 2010 07:27:24 GMT

Budujeme-li komerční web, je třeba na něj umístit údaje obecně doporučené, které vzbudí důvěru našich potenciálních klientů. Naproti tomu je nám ze strany státu přímo nařízeno, který údaj na webu být musí. A tou je jednoznačná identifikace majitele webových stránek. V podstatě se vlastně jedná o takovou „eSPéZetku“ webu.

Dle novely obchodního zákoníku (Zákon číslo 513/1991 Sb.), která platí již více než dva roky, musí podnikatel mít na svých internetových stránkách uvedeny identifikační údaje stejně jako např. na fakturách nebo smlouvách.

Jak však ukazují firemní weby v praxi, valná část, převážně živnostníků o těchto povinnostech asi vůbec nic netuší. Přitom za nekompletní informace na webech hrozí dle zákona číslo 200/1990 Sb., o přestupcích, pokuta až 50 tisíc korun nebo i zákaz činnosti až na 1 rok.

Kdo musí povinné údaje na svém webu zveřejnit?

Odpověď je jednoduchá, každý podnikatel ve smyslu § 2 výše uvedeného zákona, tedy:

osoba zapsaná v obchodním rejstříku
osoba, která podniká na základě živnostenského oprávnění
osoba, která podniká na základě jiného než živnostenského oprávnění podle zvláštních předpisů
osoba, která provozuje zemědělskou výrobu a je zapsána do evidence podle zvláštního předpisu.

Žádných jiných subjektů se tato povinnost netýká.

Jak své údaje nejlépe prezentovat?

Uveďme si nějaké příklady zápisu na webových stránkách:

Fyzická osoba – která je zapsána v živnostenském rejstříku.

Jan Živný
Živnostenská 10
180 00, Praha 18

IČ: 12345678
DIČ: CZ12345678

Fyzická osoba zapsaná v Živnostenském rejstříku od 1. února 2009
Evidenční číslo ŽL: 010101-11111111

Nutno podotknout, že od 1. 8. 2008 se již živnostenský list nevystavuje, ale pouze výpis z živnostenského rejstříku, kde již žádné evidenční číslo ŽL uvedeno není. Proto ho není nutné ani uvádět.

Právnická osoba – firma je zapsaná u rejstříkového soudu v Praze.

XAZ s.r.o.
Podnikatelská 248
180 00, Praha 18

IČ: 12345678
DIČ: CZ12345678

XAZ s.r.o. je zapsaná v OR vedeném MS v Praze, oddíl C, vložka 66551

Dle § 13a Obchodního zákoníku lze uvádět i základní kapitál, ale jen když je zcela splacen, v podstatě tento údaj není povinný, takže kdo nemá vyloženě vnitřní potřebu jej zveřejnit, není nutno se tímto údajem dále zabývat.

Jiná zákonná řešení

Dalším jednodušším řešením se však jeví být pouhý odkaz na stránku s našim výpisem, přímo v obchodním rejstříku.

Často se lze také setkat s oskenovaným papírovým výpisem a jeho zobrazením pod příslušným odkazem a to jak ve formě obrázku nebo souboru pdf.

Kam údaje umístit?

Vzhledem k tomu, že obchodní zákoník přesně neřeší, jakou formou a kde přesně musí být údaje uvedeny, mohou být na webu prakticky kdekoli. Měli by však být snadno k nalezení a to především už důvodu, případné namátkové kontroly ze strany živnostenského úřadu. Zpravidla lze tyto informace vidět v kontaktech nebo v sekci „o společnosti“. Za nejtransparentnější řešení lze považovat jejich umístění do patičky webu.

Pokud má web více jazyků

Jestliže web podnikatele obsahuje rovněž cizojazyčné mutace, i na nich musí být tyto zákonem předepsané identifikační údaje uvedeny a to v příslušném jazyce.
Stejně tak zahraniční firma nebo její pobočka v ČR musí tyto údaje týkající se její činnosti v ČR na webu uvést. Platí pro ně tedy stejná pravidla jako pro tuzemské firmy.

Jak se nezbláznit ze správy stovek webů

Mon, 25 Oct 2010 07:48:10 GMT

Tento článek je věnován lidem, kteří mají na starosti spousty webových prezentací nejen po technické stránce. Mám na mysli nejenom desítky, ale i stovky vytvořených webovek. Naše firma spatřila světlo světa již před mnoha lety a tak je logické, že máme za sebou právě takovou hromadu webů, jak už to v životě chodí, některé byly opravdu povedené a ty druhé méně, ale to v tento moment není nijak důležité.

Ti kdo takové množství webů mají na starosti, moc dobře vědí jak je těžké si vzpomenout, na které prezentaci jsou použity ty či ony funkčnosti a fičury. Zákonitě při implementaci nového webu přichází otázka nahlas vyslovená do prostoru kanceláře: „prosím tě vzpomeneš si na to kde jsme programovali takovouto funkci?“ Bohužel ve většině případů to skončí po pár minutách tvrdého přemýšlení, které je zakončené nesmělým zašeptáním „to kdybych věděl“, po kterém následuje opětovné nasazení sluchátek. Tázajícímu nezbude nic jiného než nechat prohledat všechny zdrojáky našich webů a doufat, že zadal správné klíčové slovo.
Po několika neúspěšných dohledávacích akcích, jsem dali hlavy dohromady a vytvořili dokument, do kterého ukládáme všechny takovéto fičurky nebo jenom odkaz na web a konkrétní „modul“, kde jsme ji řešily, protože proč vymýšlet něco co již někdo z nás vymyslel.

Pro takový dokument jsme zvolili excelovou tabulku, kterou máme přehledně rozdělenou po listech, jaké problematiky se fičura týká.

Po zavedení tohoto seznamu se nám práce dosti ulehčila a už nemusíme pátrat po zdrojových kódech a hledat jehlu v kupce sena, protože tak nám to často připadalo. Místo toho se můžeme věnovat vymýšlením nových fičur, abychom webové prezentace pro naše zákazníky neustále vylepšovali ;)

Barevná škála webu

Wed, 20 Oct 2010 08:21:33 GMT

V tomto článku se chci pokusit nakousnout problematiku Webu vs Barvy v něm obsažené. Rozebereme si barvy podle místa, kde je běžně používáme. Od samého začátku se držíme loga, či celé vizuální identity firmy. Někdy jsme velmi omezeni výběrem barev, jindy zase naprosto volní a můžeme i experimentovat. Čerpat můžeme z různých zdrojů, ne jen z naší hlavy. Dobrými příklady jsou tyto stránky http://kuler.adobe.com/ a http://www.colourlovers.com/. Zde nalezneme nepřeberné množství barevných škál sestavujících se z několika vybraných základních barev. U Colourlovers navíc jsou i různé vzorky i aktuální trendy webových prezentací. Nutno říct, že se nejedná pouze o galerie, ale jsou to i nástroje, které nám umožňují vlastní míchání barev.

Pozadí – ne Vaše, ale Vaší prezentace!

Pozadí je základní stavební kámen toho, jak na Vaše oči bude celá prezentace působit a také podle pozadí uzpůsobujeme viditelnost všech další prvků. Někdo řekne hloupost. Pozadí je to poslední a nejméně důležité co byste měli řešit, ale opak je pravdou. Od samého začátku je nutné mít jasnou představu, jakým spektrálním směrem se vydáme. Začněme tedy od pozadí prezentace, řekněme si, zdali chceme čerstvý, lehký, světlý, nebo tajemný, či luxusní vzhled. Pozadí nemusí být také jednolitá barva nebo přechod, ale také můžeme využít různých opakovatelných vzorků nebo originálních kreseb, fotografií, atp.

Sekce, boxíky, panely

S rostoucím trendem dnešní doby, stálé více přichází vzdušnost prezentací doplněné oživující grafikou. Není vždy nutné oddělovat vše čárami, barvami, přechody, stíny atp., ale někdy stačí pouze jen dát více prostoru. Dřívější hrůzné výstřelky několika vnoření boxu v sobě a blikajícího textu různými barvami jsou už naštěstí pryč. Můžeme volit jemné barvy u větších ploch a naopak u míst, které potřebujeme nejvíce vypíchnout, můžeme využít výraznějších barev. Ale vše chce střídmě, jestliže máme v prezentaci více polí, které chceme vyzdvihnout, ať už se jedná o upozornění na různé akce, nebo super novinky, které konkurence nemá, tak nezačněme vše hned barvit do červena, nebo prezentaci zaplavit všemi barvami. Vybírejme a udělujme priority a posloupnosti.

Menu, hlavní tlačítka, funkční tlačítka

Určitou část času naší prezentace nás provází tlačítka a menu, než se dostaneme k cíli. Proto musí být spolehlivě vytvořeny, aby nás vedly, nemátly nás a byly jednoznačná ať už po najetí myši, nebo jestli jsou zrovna aktivní. Hlavní tlačítka a menu by měli být určitě konzistentní, držet se jednotného stylu prezentace a stejné barevnosti. Ale jinak je tomu u funkčních tlačítek, jako jsou „Zrušení“ atp. I přestože mámě např. celou grafiku v barevné kombinaci červená-černá, nebojme se u informace, že objednávka byla úspěšně dokončena, použít zelenou barvu. Uživatel bude mít hned jasnou představu o tom, že objednávka byla opravdu dokončena a také si ji vizuálně zapamatuje.

Facebook a SEO

Wed, 29 Sep 2010 10:46:10 GMT

Tento článek měl být zaměřen na kreativní Facebook (FB) kampaně, ale při sbírání podkladů jsem narazila na něco, alespoň pro mě, nového a mnohem zajímavějšího – tzv. Facebook SEO. Hnedle jsem se pustila do studia neprobádané látky a zachytila základní stavební kameny FB SEO.

O co se jedná?

Dá se říct, že jde o novou odnož v oblasti SEO. Podstata je samozřejmě stejná jako u tradiční optimalizace webových stránek pro vyhledavače – „vyšperkovat“ firemní FB Stránku nebo Fun stránku tak, aby obstála v konkurenci jak na FB, tak ve vyhledávání Google. Jak funguje vyhledávání Google není žádná novinka. Jak je tomu u FB si můžete načíst, stejně jako já, v této zajímavé studii.

Otázkou zní: Jaká jsou pravidla pro SEO optimalizaci na FB?

Jak se neztratit?

Sesbírala jsem pár základních pravidel, na které byste neměli při vytváření a optimalizaci Firemní FB Stránky zapomenout.

Název stránky a úprava URL

Nejprve staré známé ale důležité pravidlo… Vyberte si správný a výstižný název firemní Stránky a neměňte jej. Jeho změna znamená začít s propagací od nuly a tím pádem přijít o všechny fanoušky. Pokud se jedná o firemní FB stránku, měl by být její název stejný, jako je název vaší společnosti. Zaprvé bude všem jasné, že se jedná právě o vás a ne o nějaký spam, zadruhé Google FB Stránku najde.
Další, všeobecně známé pravidlo je úprava URL Stránky (Nevzhledné a dlouhé URL změňte na lehce zapamatovatelné). Tak můžete učinit ve chvíli, kdy dosáhnete 25 fanoušků, a to pomocí odkazu: facebook.com/username. Pro identifikaci s firmou se opět doporučuje zvolit si URL shodné s názvem společnosti. Nutné je podotknout, že vybrané URL se už nikdy nedá měnit.

Záložka Informace

Není radno podceňovat záložku, která je určená k vyplnění základních údajů. Pro samotný FB i Google je to místo, odkud si bere základní údaje a klíčová slova. Informace jako je např. určení lokality slouží k místnímu vyhledávání, kategorie činnosti nebo produkty – slouží k oborovému a produktovému vyhledávání.
Důležitou položkou v záložce je místo pro propagaci v jiných médiích – uvádějte www, Twitter, YouTube, MySpace, LinkedIn…

Textové pole

Nenápadným a důležitým místem pro klíčová slova je textové pole pod logem. Jedná se o část, ze kterého si vyhledávače berou podstatné informace o dané stránce a proto bychom měli pečlivě zvolit slova a slovní spojení které do textového pole napíšeme. Pozor! Počet slov je omezen na 250.
Super využívá textové pole oficiální FB Stránka funs giganta STARBUCKS.

Vkládejte YouTube videa

Umístněním YouTube videa na zeď si můžete jen přilepšit. Proč?
Jednodušší odpověď je, že videa zvyšují interaktivnost a zábavnost Stránky. Fanoušci je také mohou sdílet a tím šířit mezi své přátele, kteří vašimi fanoušky nejsou. Pokud je video zaujme, může se tak solidně rozrůst funs základna FB Stránky a tím i pyramida pro šíření a podporu brandu.
Při odpovědi složitější je třeba znát souvislosti… Google vlastní YouTube, tudíž jeho vyhledávací algoritmus hodnotí přítomnost videa jak na www stránkách, tak na FB Stránkách velmi pozitivně.

Vkládejte Fotky a obrázky

První věc, na kterou byste neměli v této oblasti zapomenout je opatřit firemní FB Stránku logem. Na jeho kvalitě byste si měli nechat záležet, protože je silným identifikátorem pro všechny.
Obrázky a fotky (měli by mít také vysokou kvalitu) jsou, stejně jako videa, lákadlem a oživením obsahu. Jak zařadit Fotku nebo obrázek do SEO hry? Vždy je opatřete hustým popiskem s potřebnými klíčovými slovy. To samé platí samozřejmě u videí. Nabízí se zde celkem dost velký prostor – využijte ho naplno a účelně! Pro zkvalitnění obsahu, nejen po stránce klíčových slov, se hodí založit Diskusi. Získáte zpětnou vazbu od fanoušků a v neposlední řadě máte jistotu, že se daná slova či slovní spojení budou opakovat.
Dalším pomocným SEO nástrojem je označování věcí a osob na videích a fotografiích.

Klíčová slova a odkazy na Zdi

Příspěvky fanoušků samozřejmě také obsahují potřebná klíčová slova. Ale nezapomeňte obsah zdi aktualizovat pravidelně sami. Má to opět vliv na výsledky vyhledávání.
Jako je tomu u webovek, tak i na FB hrají velkou roli odkazy. Při aktualizaci stavů vkládejte odkazy např. na vaše webovky, blog…
Je dobré si určit hranice a zas to s tím aktualizováním stavů nepřehánět. Pokud FB Stránka slouží např. jako podpora vašeho blogu, dávejte na FB odkazy jen na ty povedenější. Pokud budete fanoušky „spamovat“ odejdou. V lepším případě si zprávy z vaší Stránky skryjí a zruší tak odběr na svou zeď…
Další skupinou odkazů jsou ty, které naopak odkazují na vaši FB Stránku. Jsou to sdílené odkazy na zdech fanoušků, FUN boxy a jiné FB aplikace umístěné na www…

FBML aplikace

Karty FB počet základních FB karty jsou omezeny. Pomocí aplikace FBML můžeme přidávat další karty a plnit je zajímavým obsahem (potřebnými texty, obrázky, aplikacemi…) Vytvoření základních FBML není nijak složité a existuje spousta návodů jak na to. Pro zajímavost můžete mrknout na Coca-Colu.

Závěrem

Myslím, že tohle jsou základní kroky, které by měl každý tvůrce FB Stránek a Skupin znát aby obstál v čím dál silnější konkurenci.
SEO optimalizace přispívá k tomu, že Vás více příznivců najde a stane se fanoušky což znamená rozšíření funs základny, která vám pomůže šířit brand, produkty, služby… dál mezi své kamarády.

Zajímavé odkazy a zdroje:

http://searchengineland.com/10-seo-tips-for-maximizing-facebook-visibility-24477
http://savedelete.com/seo-tips-10-tips-to-search-engine-optimize-your-facebook-fan-page.html
http://www.tyinternety.cz/

Máme už konečně e-shop, aneb jak nic neprodat neboli poslat zákazníka konkurenci

Wed, 15 Sep 2010 15:46:58 GMT

Máme dobrou grafiku, máme nejnovější technologii, máme dobré SEO, máme i dobrý obsah?

Podíváme se na několik neduhů k vidění v Českých e-shopech. Ne, že by v cizině bylo vše v pořádku, ale na zahraničních webech jsem zatím nic nekupoval.

Teprve při intenzivním shánění určitého zboží jsem dospěl k názoru, že mnoho prodejců a potažmo i tvůrců webových stránek si vůbec neláme hlavu nad smyslem a významem textů ve svých e-shopech. Důležité je přece mít e-shop a v něm hodně výrobků a hlavně to SEO.

Způsob dopravy

Například potřebujete koupit rozměrnější výrobek. Vyhledáte si e-shop, který váš vysněný výrobek prodává za nejnižší cenu. V závěru nákupního procesu zjistíte, že dopravce a cena se bude lišit dle hmotnosti výrobku. Jenže hmotnost výrobku není nikde uvedena. Zagooglíte znovu a zjistíte, že ani konkurence a ani výrobce se neobtěžuje tyto údaje zveřejnit. Nebo je snad nezná? Tímto dostanete odpověď proč ani prodejce nemá na svém webu tento údaj, že by ho nevěděl? Jak potom určují přepravce? Takže co nám zbývá? Telefonovat a zjišťovat, až si nakonec spočítáte, že výsledná cena s veškerými poplatky za dopravu včetně těch za telefonování je vyšší, než kdybyste hned navštívili místní kamenný obchod a výrobek si pořídili tam, byť za původně vyšší cenu.

Hlavně že máme e-shop, je to přece moderní, konkurence má, my máme také… ale v tomto případě jsme neprodali, prodala konkurence, která e-shop zatím nemá.

Jiný obdobný případ - rozměry

Při objednávce si zatrhnu osobní odběr, vždyť e-shop má odběrní místo v našem městě a ještě se honosí reklamou typu „na všechny objednávky z e-shopu sleva 10 %“. Vejde se mi výrobek na zadní sedadla osobního auta? – zase zvedám telefon a volám, můj poskytovatel telefonních služeb zaplesá, konto mého účtu už méně. Na webu se rozměr nedozvím… Ochotná paní mi po chvilce sdělí ze svého skladového systému rozměry výrobku. A já jsem „spokojen“, že jsem protelefonoval právě těch 10 % slevy, kterou se e-shop propaguje. Ptám se sám sebe proč? Proč ty rozměry nedají na web, když je mají ve svém skladové programu?

Co z toho vyplývá? Chcete mít funkční e-shop? Potom uvádějte smysluplné údaje, poněvadž jinak nic neprodáte i když nabízíte a inzerujete akční ceny.

Další příklad – s DPH bez DPH

Váš bratr Google vás nasměruje na vámi hledaný výrobek, vidíte před sebou detail produktu, cenu a pod ní se nesměle krčí něco jako tlačítko „vložit do košíku“ stisknete je a pokračujete dále v nákupním procesu, jenže co to? Výsledná cena je vyšší a o celých 20 % a k tomu ještě poplatek za doručení. Aha, ona ta cena v detailu produktu byla bez DPH. Vzpomenete si, že na předchozím webu jste narazili na cenu, která byla právě o těch cca 20 % vyšší, ale přesto nižší než zde, kde tedy nakoupíte?

Stačilo však málo, a u ceny v detailu produktu přímo napsat: „cena bez DPH“. Na co to tajnůstkaření? I když jste měli na první pohled nejnižší cenu, stejně jsem u vás nákup nedokončil.

Kontakty:

Naše firma má širokou prodejní síť kamenných obchodů, neboli odběrní místo či vzorkovnu.
Dobrá, je to nedaleko, zajedu se do prodejny podívat osobně a zboží si osahat a případně hned odvézt, ale co to? Nikde nenajdu otevírací dobu, takže nevím jestli i po 17 hodině má vůbec smysl tam jezdit… zase sahám po telefonu… nebo raději googlím jiného prodejce?

Další častý neduh – obrázky

Ačkoli se to nezdá, obrázek produktu opravdu prodává. Na kolika e-shopech však najdeme na místě obrázku hrdý nápis „obrázek není k dispozici“. Á propos koupili byste své milé k vánocům perlový náhrdelník s tímto zástupným obrázkem? V tomto případě je snad lepší takovéto zboží v e-shopu „vypnout“ než seženeme nebo vyfotografujeme vlastní obrázek - stejně to neprodáme. Výjimku snad lze tolerovat u předmětů všeobecně známých, případně tam, kde obchod navštěvují pouze specialisté, kteří produkt znají a tedy obrázek nepotřebují (kabely, lana, zdravotnické a laboratorní vybavení a podobně). Z tohoto důvodu také některé e-shopy nabízejí 2 způsoby výpisů zboží, tabulkový a obrázkový.

Stejný výsledek ovšem je i tehdy pokud obrázek máme, ale mohl by si, co do rozměru zadat s blechou. V detailu produktu vidíme obrázek našeho objektu zájmu a tak si jej zvětšíme, jenže co se nestane? Zobrazí se nám v novém okně tentýž malý obrázek a nebo v některých případech tentýž zvětšený obrázek řádně „rozpixelovaný“, takže opět nevidíme to co potřebujeme. Specialitou jsou též rozměrové náčrtky s nečitelnými rozměry nebo úplně bez nich, nezbývá než zase volat, kolik že má ta blecha nohou nebo jakou že má tedy šířku, nebo googlit a hledat lepší foto tohoto produktu. Pokud jej objevíme u konkurence, zpravidla tam i koupíme. Proč? Mají kvalitnější obrázky a web je celkově hezčí, zkrátka působí na nás tak nějak důvěryhodněji.

Potřebujete poradit? Napište nám! My vám stejně neodpovíme… :-P

Tak tohle se mi stalo u tří webů z pěti dotazovaných… ani se neobtěžovali odpovědět třeba jen holou větou: „Nemáme čas odpovídat na vaše všetečné dotazy“. Jinde jsem se odpovědi dočkal, ale až po cca 2 dnech. Pozdě, již jsem koupil jinde, kde mi odpověděli ještě týž den. Asi chtěli prodat…

Pokud jednou neodpovíme zákazníkovi byť i na stupidní dotaz, kdy se ptá jestli je zboží v bledě modré, když v e-shopu máme jen tmavě modrý – počítejme že je navždy ztracen! A to nejen on, ale i jeho známí, kterým nás mohl doporučit pokud by se dočkal odpovědi ve smyslu: „Žel v bledě modré se výrobek opravdu nevyrábí.“

Nakonec ona to zas tak stupidní otázka není. Výrobce může tuto barvu na svých stránkách uvádět. Jen vy jako jeden z prodejců od něj nemáte tuto barvu objednanou, skladem nebo naopak výrobce má na svém webu neaktuální fotografii a opravdu už tuto barvu nevyrábí. Proto se zákazník ujišťuje jestli by ji od vás nemohl přece jen koupit, když už si vás vybral podle nejnižší ceny výrobku na webu.

Prodej v e-shopu není jen o dobrém umístění ve vyhledávačích, grafice a nejnižších cenách, ale hlavně v lidské komunikaci ze zákazníkem. Sdělme mu vše to, co ke koupi potřebuje, a když to na webu nemáme, tak mu alespoň odpovězme, pokud se ptá i na nějakou záludnost. Hodně firem to již pochopilo, ale stále ne všichni.

Náš e-shop je ve výstavbě

Ano i na takový web jsem narazil, na stránkách prodávají několik různých druhů zboží, ale v každé sekci mají po 5 produktech nebo dokonce žádnou. Chcete i jinou položku z této série? Zavolejte nám! Náš sortiment je opravdu vyšší, než to co momentálně nabízíme, naši nabídku stále rozšiřujeme. Dobrá, dnes se tedy poohlídnu někde jinde. Opravdu si myslíte, že se ještě někdy vrátím?

Pokud si zavádíte nový e-shop, spusťte ho až bude z většiny plný zboží. Pokud nemáte v nějaké sekci ani jeden produkt, alespoň ji dočasně vypněte. Koupili byste si něco v kamenné samoobsluze, kde by v každém 20 metrovém prázdném regálu měli po 5 kusech pytlíkových polévek a vedle toho fixem napsanou ceduli: „Chcete li i ostatní potraviny, kontaktujte prodavače“?

Doslov

Takto (ne)koncipované katalogy e-shopů mi připomínají běhání po úřadech a sbírání razítek.
Prvně si najdete zboží a pak hledáte všude možně, abyste se o výrobku dozvěděli vše co potřebujete a co by mohlo a mělo být uvedeno přímo v jeho detailu. Co jen úplné údaje. Měli bysme odhadnout na co všechno se může zákazník ptát. Pak máme velkou šanci že nás nebudou zákazníci zbytečně zahrnovat doplňujícími dotazy a dokončí nákup u nás a nikoli u konkurence. Prohlášení, že pak investice do nového e-shopu se nevyplatila, je jednoduché, když prodáváme méně než jsme společně s tvůrcem webu plánovali. Je to opravdu chyba samotného e-shopu, který je ve vyhledávačích na dobrých pozicích nebo někde mezi řádky?

Wireframing - prototypování webu

Sun, 12 Sep 2010 23:47:51 GMT

"Krásná grafika, moc se nám líbí" plesal zákazník, když jsme mu zaslali připravený grafický návrh. "Jenom jsme si s kolegyní říkali, že bude lepší když toto dáme doleva, tamto zleva dolů a ten text o firmě dáme semka."

Grafický návrh jsme vyhodili z okna a mohli začít nanovo. Jediné co z původního návrhu zůstalo byly barvy a logo.

Svého času jsme se trápili jak z toho ven. Jak předejít věčnému předělávání struktury webu až v "hotovém" grafickém návrhu. To nejjednoduší, tužku a papír, jsme tenkrát zaslepeně přeskočili a hledali program, pomocí kterého by nástin funkčnosti a struktury webových stránek dokázal vytvořit i NEgrafik.

Hledání vhodného programu

Začínali jsme u Excelu, který se ale záhy ukázal jako velmi primitivní a neohrabaný.
I další program, který jsme používali byl z dílny MS. Bylo to Visio s knihovnou "wireframe stencil", pomocí kterého jsme vyrobili pěknou řádku prototypů. Visio je však příliš univerzální a trpí nedostatkem potřebných funkcí.
Nakonec jsme narazili na AXURE, které dokonale vyhovovalo a stále vyhovuje našim potřebám. Navíc od začátku tohoto roku je dostupná i verze pro Mac OSX. Jeho síla je v jednostraném zaměření pouze na tvorbu wireframů pro webové stránky.

Ukázky využití AXURE v praxi

www.realspektrum.cz

www.posvitime.cz

Výhody prototypování v AXURE

možnost importu dalších, velmi kvalitních rozšíření - widget libraries
export "díla" do funkčního prototypu webových stránek
export do formátu MS Word nebo PDF včetně kompletní specifikace
možnost uploadu hotového prototypu na web pomocí http://share.axure.com/ (bohužel jsme narazili na problémy s češtinou)
možost uživatelského testování na prototypech již v rané fázi vývoje webu
grafik nemusí přemýšlet nad strukturou webových stránek a má více času na kreativitu
možnost zdokumentování funkčnosti hluboce zanořených stránek webu, pro které již není potřeba dělat grafický návrh

Poměr cena/výkon

I přes poměrně vysokou cenu $589 (11.500,- Kč) je AXURE jedním z nejlepších programů na tvorbu prototypů nejen webových stránek a neměl by chybět nikde, kde to s vývojem webových stránek myslí vážně. AXURE nabízí mnoho zajímavých rozšíření, které zefektivní vaši práci a oslní vás i vaše klienty svým výsledkem. Ale hlavně, výroba prototypu vám v pozdějších fázích projektu ušetří čas i peníze.

Epilog

Existují i jiné způsoby prototypování webových stránek a aplikací. Jeden z nich představil Ryan Singer, Lead UI Designer, 37signals na konferenci WebExpo2010. Můžete se podívat na slidy z jeho kouzelné přednášky.

Správné zadání pro SEO

Mon, 30 Aug 2010 12:38:15 GMT

Na schůzkách s klienty velmi rád cituji mého kolegu, který o optimalizaci pro vyhledávače, takzvané SEO, prohlašuje: „Je to něco na způsob honění se psa za vlastním ocasem“ a o dosažení první pozice ve vyhledávačích na konkrétní nejlépe jednoslovné nebo dvouslovné spojení hovoří jako o „Onanii nad dosaženou pozicí“.
I když druhá citace je již trošku vulgární, pořád smekám nad výstížností obou tvrzení.

Pozor na špatně zvolený cíl

Převážnou chybou vlastníků nebo správců webu je neznalost SEO problematiky a upnutí se ke špatnému cíli.
Podívejme se, jak by mohlo vypadat zadání pro majitele intenetového obchodu:

Chci dosáhnout vyššího obratu a zisku

Naproti tomu špatné zadání je v tomto případě pouhý cíl zvýšení návštěvnosti. Návštěvnost sama o sobě v případě internetového obchodu není všespásná.
Přitom v případě internetového magazínu je návštěvnost velmi důležitá, protože se dá přetavit v obchodní potenciál při prodeji reklamy.
A jaký cíl budou mít stránky společnosti nabízející služby nebo produkty, které nejsou vhodné pro prodej ve standardním e-shopu?
Zvýšení návštěvnosti v tomto případě by neměl být konečný cíl. Stránky těchto firem by měli určitě obsahovat zpětnou vazbu, např. typu: Zaujala vás tato konkrétní služba? Nechte nám kontakt a my se vám ozveme, atp.
Cíl by měl být v tomto případě zvýšení poptávek, dotazů a obecně reakcí. Kde už lze zase tyto reakce přetvořit v obchodní potenciál.
Z výše uvedeného je vidět, že cílem zadání pro SEO nemá být dosažení pozice nebo nějakého počtu návštěvníků, ale dosažení reálného ukazatele, který bude znamenat zisk z prostředků vložených do optimalizace.

Pozor na "SEO mágy"

Bohužel hodně společností živícími se optimalizacemi pro vyhledávače se snaží vytvořit svůj zisk na úkor neznalosti svých klientů.
Tyto společnosti prodávají svým klientům dosažení pozic, případně zvýšení návštěvnosti, které sice mají přínos, ale velmi zanedbatelný oproti tomu, kdyby prostředky investovali se správně definovaným cílem.

Raná fáze návrhu webu – sketchboard

Tue, 24 Aug 2010 14:30:11 GMT

Sketchboatd (skicování) je lo-fi technika, která umožňuje návrhářům webu zkoumat a vyhodnocovat řadu konceptů, utřídit si tok složitých myšlenek a požadavků. Je to výborná metoda používaná k podpoře spolupráce a shromažďování zpětné vazby. Jedná se o jednoduché kresby rukou.
Tuto techniku používáme dříve, než se pustíme do tvorby wireframů (drátěných modelů stránek).

Cíl skicování

Hlavním cílem skicování je zaměření návrháře a jeho pozornosti na celkový koncept řešení. Jednotlivé dílčí detaily projektu jsou záměrně potlačovány.

Výhody

přirozenou formou umožňuje rychlé zaznamenávání vašich myšlenek, rychle načrtnout architekturu webové stránky
předkládání nových řešení a pohledů – díky jednoduchosti změny a interakce můžeme naše řešení neustále obohacovat a rozšiřovat o nové úhly pohledu či o úplně nové návrhy řešení. Čím více nápadů prozkoumáme, tím větší je pravděpodobnost, že navrhneme opravdu přesvědčivé a funkční řešení.
skicování potlačuje zbytečné detaily v rané fázi projektu
obrazové zobrazení myšlenek – předložené skicy spolupracovníkům či klientovi mnohem přesněji zprostředkují vaše myšlenky oproti abstraktnímu slovnímu popisu

Nevýhody

Mnoho návrhářů se domnívá, že naskicování webu je dostačující zadávací dokumentace pro jeho úspěšnou realizaci, bohužel tomu tak není. Výsledek je většinou málo podrobný, je až přiliž povrchní a to díky tomu, že upozaďuje řešení detailů.
Po ukončení této fáze projektu se nám osvědčilo navázat klasickou tvorbou wirefremů v programech typu Axure a zde analýzu dopracovat do finální detailní podoby. Výhodou tohoto postupu je to, že při tvorbě wirefremů nemusíme již řešit koncept stránky či celého projektu, ale můžeme se plně věnovat jednotlivým detailům.

Pomůcky

Osobně nejraději používám čistý papír a tužku. Na internetu je možné najít mnoho různých předtištěných šablon a nástrojů.

Inspirující linky

http://www.behance.net/gallery/Wireframes-Pitch-for-a-municipal-website/218859
http://www.flickr.com/photos/rohdesign/sets/72157614397535202/
http://www.flickr.com/photos/jasonrobb/3751955711/
http://www.flickr.com/photos/47388015@N00/3421585220/
http://www.flickr.com/photos/b0xman/4476173030/
http://www.flickr.com/photos/b0xman/4460401116/
http://www.flickr.com/photos/isaacleon/4539241113/in/datetaken/
http://www.flickr.com/photos/soxiam/3253375395/in/pool-ilovewireframes

Facebook, twitter a youtube využíváme na 110 %

Thu, 05 Aug 2010 11:55:23 GMT

Většina lidí má účet na Facebooku, pomocí kterého komunikuje se svými přáteli, spousta lidí využívá youtube k poslechu muziky a pár z nich zaslechlo něco o Twitteru. V tomto článku nechci popisovat tyto 3 velmi známé služby, nechci povídat o tom, co umí nebo jak se zaregistrovat, ale chci povídat o tom, jak je využívat na 110 %, jaké pro ně existují rozšíření, fičury nebo naopak jak si otestovat zabezpečení.

Facebook

V dnešní době se Facebook skloňuje ve všech pádech, ale hlavně člověk čte o majetkových problémech a vyrovnáních nebo o špatném ba mizerném zabezpečení za které si vlastně může každý uživatel jednotlivě a přesně problémům se zabezpečením bych se chtěl v první řadě věnovat.

Zabezpečení

Vlastní nastavení zabezpečení si každý uživatel může nastavit na této stránce. V úvodní tabulce lze pěkně vidět, s kým a hlavně jaké informace sdílíte. Po kliknutí na „Upravit nastavení“ si můžete všechno přizpůsobit tak, jak uznáte za vhodné a výsledné nastavení si otestovat kliknutím na „Náhled mého profilu“. Dodatečně si můžete ještě vypnout otravné aplikace nebo nastavit blokování pro určité uživatele.

Fejsbůček

Na fejsbůčku naleznete všechny data a informace o českém Facebooku, od počtu uživatelů, až po počet uživatelů v jednotlivých stránkách včetně hezkých grafů, většina dat se hodí spíše jen jako informace k pivu, ale najdete zde i takové, které se budou určitě hodit kdejakému marketérovi zaměřenému na Facebook.

Archivedbook

Chcete vědět, co a kdy jste napsali jako první post na Facebooku, nebo se jen chcete pobavit nad vašimi už minulými posty? Přesně proto je zde Archivedbook, který Vám po spojení s Vašim FB účtem vypíše všechny posty, co jste kdy napsali, za vyzkoušení určitě stojí ;)

A něco navíc…

Ne každý, ale spousta lidí využívá Facebook chat, znáte smajly, které můžete používat? Docela pěkný seznam zde: http://www.midnite.yw.sk/291/facebook-chat-smajliky
Kdo se zabývá vkládáním like tlačítek, fan boxů, atd. do stránek, tak tuto stránku asi zná, ale třeba se bude někomu hodit: http://developers.facebook.com/plugins
Nejen pro mobilní telefony, ale i třeba na pomalém internetu se může hodit tato stránka: http://touch.facebook.com/
Adresář jmen na Facebooku. Popravdě netuším, komu by se mohl tento link hodit, ale člověk nikdy neví: http://www.facebook.com/directory/

Twitter

U nás docela neznámá služby, zato v Americe neskutečně oblíbená a používaná. V jednom článku už jsem se zabýval tím, jak lze jednoduše a efektivně tuto službu využívat s propojením s jinými aplikacemi.

Twitpic

Slouží k jednoduchému uploadu fotografií a vygenerování krátké URL, pro vložení do 140 znaků dlouhého tweetu. Podobných služeb je mnoho, ale tato se mi líbí hlavně tím, že pokud člověk propojí Twitpic se svým Twitter účet, tak se všechny fotky uploadují dohromady a poté se v nich dá jednoduše listovat.

Twitvid

Stejné funkčnost jako Twitpic, ale s tím rozdílem, že se uploaduje video. Nemyslím si, že v dnešní době se vyplatí video uploadovat sem, když mám www.youtube.com, který po kliknutí na tlačítko Twitter pod videem a úspěšném přihlášení dokáže automaticky používat zkracovač www.youtu.be a automaticky vkládá odkaz do Twitter zprávy, ale za zmínku určitě Twitvid stojí.

Twtpoll

Twtpoll slouží k jednoduchému vytvoření anket, pomocí kterých se můžete zeptat svých followerů (a nejen jich) co si myslí, preferují nebo jaký názor mají na danou problematiku. Určitě doporučuji skouknout úvodní video, které Vám ukáže, co všechno služba umí.

Screenr

Našli jste někde na webu chybu a chcete jí někomu rychle ukázat, nebo snadno natočit něco co právě vidíte na stránkách a nestačí Vám fotka? Zkuste screenr, nemá cenu dále tuto službu popisovat, na úvodní stránce je video, zhlédnutí vám nezabere více jak minutu a je na něm pěkně vidět co všechno služba umí a jak se používá.

Friend of Follow

Chcete vědět koho na Twitteru sledujete a on Vás ne? Přesně proto slouží služba Friend or Follow po vyplnění se Vám zobrazí seznam lidí, které máte přidané, ale oni Vás ne.

A něco navíc…

Pro vyhledávání na českém Twitteru se Vám může hodit služba klábosení: http://www.klaboseni.cz
Zobrazení počtu Twittu za minutu v jednotlivých městech: http://www.casa.ucl.ac.uk/tom/
Zobrazení celkového počtu tweetu: http://popacular.com/gigatweet/
Informace o datumu zaregistrování uživatele: http://www.whendidyoujointwitter.com/

Youtube

Na youtube chodí každý ať už na „vlastní pěst“ nebo po kliknutí na odkaz ze stránek. Nechci popisovat práci s Youtube, ale samotné podpůrné novinky nebo věci co youtube pustí, ale ne každému uživateli dá vědět.

Disco

Pokud nevíte co poslouchat nebo prostě hledáte podobného interpreta nebo styl, který posloucháte, popřípadě pokud si rádi skládáte playlisty, tak přesně pro Vás je stránka Music discovery project, kde si pomocí vyhledávání můžete najít spoustu písniček, žánrů nebo autorů o kterých jste nevěděli a které jsou Vašemu stylu nejblíže.

Testtube

Nejnovější implementované věci nebo připravované novinky si můžete otestovat v TestTube, dopředu víte, co Vás čeká za novinku a co nám Youtube připravuje.

Video2mp3

Konvertorů z youtube do mp3 existuje opravdu hodně, ale tento mě nadchnul kvalitou, rychlostí a možností přidáním addonu do FireFoxu nebo Google Chrome, pomocí kterého se mi pod videem zobrazí dvě tlačítka a po kliknutí se mi automaticky začnou převádět do mp3.

A něco navíc…

Youtube přehrávač a Full HD televize, něco co do nedávna bylo nereálné, avšak na adrese: http://www.youtube.com/leanback už běží testovací verze, jak bude přehrávač a výběr dalších videi vypadat
Vyhledávač videa pomocí komentářů: http://www.youtube.com/comment_search
Statistiky na youtube: http://www.google.com/videotargeting/ifa/buildQuery
Had v novém přehrávači, kdo nehrál na stařičké Nokii hada jako by nebyl, proto nám v Youtube zaimplementovali hada, stačí kliknout na video (který má nový přehrávač) a držet šipku doleva, za pár sekund se zobrazí had a pustí se video na pozadí.

Závěrem

Doufám, že pro Vás byly nějaké odkazy užitečné a že se Vám budou hodit. Samozřejmě jsem zde zmínil jen část a to (pro mě) nejzajímavějších co jsem na internetu našel. Proto pokud byste měli nějaký další zajímavý odkaz, nebojte se o něj podělit do komentářů. Díky.

Řá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.