BLOG / Průběh zakázky / Kolik stojí web jako je tento?

Kolik stojí stránky jakou jsou tyto?

Intro

Už od zveřejnění těchto stránek, jsem zaznamenal pozitivní ohlasy a zejména také otázky, kolik jsem za ně dal. Považuji to za hodně intimní otázku, proto se na ní pokusím odpovědět trošku nepřímo, zkusím Vám ukázat, kolik co dá práce. Přesný odhad pak již bude na Vás.


Napsání textů

Ještě předtím, než začne grafička dělat design, musí být napsané texty. Musí být jasné co chci lidem sdělit. Já nejsem zrovna psavý typ, pro mě je to nejtěžší a nejdelší část projektu. Ze začátku jsem neměl vůbec ponětí o tom, co všechno na nich bude. Prostě jsem si sedl a napsal odstavec. V průběhu práce mě napadly další a další témata. Pročetl jsem několik webů konkurence a nechal se inspirovat tím,co oni na stránkách měli. Vzpomněl jsem si na své rozpravy se sestrou a přítelkyní, kdy jsem se s nimi bavil o tom, co mě zrovna trápilo. Každá taková diskuse měla i svůj rezultát, prostě něco co vlastně chci těm klientům sdělit. Mně to zabralo týden. Tohle je ale práce, která je na Vás a se kterou Vám asi nikdo moc nepomůže, krom případu nějakých korektur. Já jsem na korekturu a zejména správný překlad angličtiny využil služeb grafičky Oksany, která je učitelka angličtiny a tedy je to osoba ke korektuře v angličtině ideální.


Základní koncept

Rozhodl jsem se mít na hlavní stránce hodně informací, často je to jen právě první strana, kterou lidé čtou. Nevím proč tomu tak je, ale zdá se, že točení kolečkem myši je nyní více cool, než navigace pomocí odkazů na několikastránkovém webu. Klient se tak doví jaké práce nabízím, v jakých technologiích, jak by měla spolupráce probíhat a něco o mé maličkosti jako osobě. Další stránky budou mnohem jednodušší, pokud možno zoptimalizované na jedno klíčové slovo, respektive, budou mít jen jedno téma. Co mi bylo jasné hned, že to nebude jednostránkový web. Už při prvních úvahách o webu, mi bylo jasné, že bude dost informací, které bych chtěl svým návštěvníkům sdělit.


Design

Nyní byl vhodný čas na na design. Protože jsem se rozhodl mít na první stránce hodně textu, musel jsem také uvažovat nad jeho skrýváním. Je všeobecně známo, že dnešní uživatelé internetu neradi čtou, na druhou stranu, lidé kteří chtějí utratit mnoho peněz za nějakou službu, zcela jistě potřebují pro své rozhodování dostatek informací. Moje nová grafička Ksenia pracovala ne designu první stránky dva týdny. Pokud Vás zajímá proč tak dlouho, tak Ksenia, stejně jako já se nespokojí s prvním nápadem. I já jsem se v průběhu její práce k projektu několikrát vyjádřil. Profesionální design webu není práce na hodinku, je to iterační proces, který chce svůj čas.


Animace

Na každé stránce musí být nějaký pěkný detail, něco zajímavého, co na jiných stránkách nenajdete. Mě Ksenia navrhla takové sluníčko, které se odrazí od země jako balon a zůstane po konci animace přes obrázek muže tak, aby jej částečně zakrývalo. Nevím, zda jsem to uměl popsat, ale nejlépe bude, když se na první stranu podíváte sami.


Javasript

Samotná první stránka zabrala opravdu hodně času. Je na ní několik javascriptových funkcí. Ta první a nejjednodušší je skrývání textu. Uživatel najede nad link myší a pod seznamem linků se objeví text. Já bych ale chtěl, aby ten text se animoval, aby to celé bylo responsivní a aby to fungovalo i na zařízení s touchem (bez myši). Jen toto uskupení zabralo více než den času. Dalśí animace je koule, která se odrazi po narolování nad obrázek a zůstane na obrázku jako slunce. Samotná animace je jednoduchá, je to animovaný GIF. Popravdě jsem se dost pobavil s responsivitou, podle designu se totiž obrázek pod animací se změnou rozlišení mění nerovnoměrně, zatímco ten animovaný gif ano. Obrázek muže je přilepen nalevo, a se zmenšováním rozlišení se jen mírně posouvá a až od určité šířky se začne zmenšovat. Doba realizace byla nakonec 4 dny na design, vybral jsem si z několika návrhů a každý vzal nějaký čas. A tři dny na HTML. Poslední animace je zvláštní slider, kde si vyberete číslo s názvem operace a pod sliderem se k tomu objeví substránka s dalšími informacemi. Původně to mělo fungovat jinak. Vyrobil jsem slider, kde se při rolování kolečkem myši rolují ty čísla s nadpisy z leva do prava. Fungovalo to. Jenže jsem pratickým používáním zjistil, že ta user experience není tak cool, jak jsem si myslel. Proto jsem slider předělal do nynější podoby. Nyní se posouvá slider z leva do prava tažením myší a ta stránka, na které tlačítko myši pustíte se zobrazí. Nakonec jsem investoval do slideru 6 dní práce. Na první stránce byl ještě ajaxový formulář. Moc se mi nelíbilo, že abych měl formulář ajaxový a zároveň byl tak, jak má být ve frameworku nette, byl jsem do projektu nucen přidat i knihovnu JQuery. Bylo to několik hodin hledání, jak se tomu vyhnout, ale nepovedlo se mi to. Nakonec mě formuláře stály 1 den času.


Responsivita

Další stránky již tak složité skutečně nebyly. Stránka Shared Code má podobný formulář a další kus javascriptu, vlastní accordion. Celkem zabrala 2 dny času. Na stránce Ceník je opět ajaxový formulář a je celkem jednuchá, vzala mi 1 den času. Stejně tak jako stráka webassembly. Pak jsou tu superjednoduché technické stránky, které tam prostě být musejí - kontakty a ITAExpress privacy policy, která musí být zveřejněna, kvůli hře na appstore a které je kompletně převzada z předchozího webu. Tyto dvě strany vzaly dohromady asi den času. Poslední stranou, o které budu mluvit v tomto odstavci, je servis webů. Je na ní opět skrývání textu. Tentokrát ale ne při najetí myší nad titulek, ale nad ikonu. To s sebou ovšem na mobilech neslo nepěkný sideefekt. Ty ikony vyplní veškerý prostor na displayi a již není vidět, že se někde změnil text. Proto se pořadí těch textů a ikon mění, tak aby se tomuto zamezilo. Vybraná ikona má pod sebou zelenou záři. Vyladění této strany, tak aby byla dobře funkční na všech zařízeních, nakonec zabralo 5 dní.


Menu

Jsme u poslední grafické práce, kterou je meníčko va javascriptu. Je vlastně jednoduché, ale bylo potřeba ho trochu vyladit co se týče konstant. Řekněme, žo mě to stálo 2 dny času celkem.


Backend

Backend jsem dělal ve frameworku Nette. Tento framwork se mi zdál daleko flexibilnější, než CMS jako wordpress a snadno, jako programátor, v něm udělám změny. Přítupy jiných, laických osob v podstatě nejsou žádoucí. Backend byl celkem triviální. Ke každé straně se musely do souboru nasat metadata jako title, description, jazyk, včetně url stránky v dalším jazyce a položky horního menu. Na těch stránkách probraných výše je to kus ale vlastně jednoduchého textu. Jazyky jsem pojal celkem jednoduše. Každý stránka má svůj jazyk, ve kterém zobrazí třeba menu a url na stejnou stránky v jazyce druhém. Url jsou pro každý jazyk jedinečné není tedy nutné aby měly nějaký prefix jako en/ nebo cs/. Poslední část backendu je ajaxový formulář. Na stránkách jsou nakonec celkem čtyři. S backendem jsem se bavil asi 7 dní.


Překlad

Poslední prací je nastavení odkazů a překlad z angličtiny zpět do češtiny. Ty odkazy dělám až na konec proto, že až po překladu jsou url těch stránek známé a je možné linky vyzkoušet. Ty překlady daly nějaký čas, typicky 2 hodiny/stránka, takže celkem tak 20 hodin.


Závěr

Závěrečný součet je 10 týdnů práce. Kdybych to dělal pro zákazníka, stálo by ho to 400 hodin mého času. Je to moc nebo málo? Co myslíte?

Realizuji Vaše sny

Zdeněk Skulínek