České vysoké učení technické v Praze Fakulta Elektrotechnická
DIPLOMOVÁ PRÁCE Uživatelské rozhraní systému Webgarden
Praha, 2009
Autor: Martin Čelikovský
Prohlášení Prohlašuji, že jsem svou diplomovou práci vypracoval a použil jsem pouze podklady uvedené v přiloženém seznamu.
V Praze dne _______________
___________________ podpis
Abstrakt Tato práce pojednává o návrhu a tvorbě nové verze populárního online publikačního systému Webgarden. Analyzuje ohlasy uživatelů, soustředí se na optimalizaci uživatelského rozhraní a využívá zkušeností autorů získaných z předchozího provozu. Část práce seznamuje s uživatelským rozhraním Webgardenu, část obsahuje popis pokročilých funkcionalit jako je elektronický obchod nebo newsletter. V práci je také zmíněna problematika monetizace a marketingu.
Abstract This thesis aims to design and creating new version of popular online publication service Webgarden. It analyses user feedback and focuses on optimization of user interface and it considers authors experiences to get better result. Part of this thesis introduces user interface of Webgarden service, part includes description of advanced system function such as e-shop and newsletter. The monetization and marketing is also mentioned.
zde vložit zadání
Obsah 1 Úvod........................................................................................................................................1 1.1 Seznámení.......................................................................................................................1 1.2 Historie............................................................................................................................1 1.3 Nedostatky předchozí verze............................................................................................3 1.4 Vyhodnocení....................................................................................................................3 2 Funkcionalita...........................................................................................................................5 2.1 Základní myšlenka a systém............................................................................................5 2.2 Uživatelské prostředí.......................................................................................................5 2.2.1 Nedostatky původního řešení..................................................................................5 2.2.2 Řešení v nové verzi..................................................................................................7 2.3 Správa obsahu..................................................................................................................8 2.3.1 Nedostatky původního řešení..................................................................................8 2.3.2 Řešení v nové verzi..................................................................................................9 2.3.3 Content Bilder........................................................................................................10 2.3.4 Widgety..................................................................................................................11 2.4 Správa oprávnění...........................................................................................................12 2.4.1 Nedostatky původního řešení................................................................................12 2.4.2 Řešení v nové verzi................................................................................................12 2.4.3 Příklad redakce......................................................................................................13 2.5 Ostatní nastavení, statistiky a prémiové účty................................................................15 2.5.1 Nastavení...............................................................................................................15 2.5.2 Statistiky................................................................................................................18 2.5.3 Prémiové účty........................................................................................................19 2.6 Klientská stránka...........................................................................................................19 2.6.1 Nedostatky původního řešení................................................................................19 2.6.2 Řešení v nové verzi................................................................................................20 2.7 Eshopy...........................................................................................................................22 2.7.1 Multimediální popis...............................................................................................22 2.7.2 Možnosti nastavení................................................................................................22 2.7.3 Objednávky............................................................................................................22 2.7.4 Skladová evidence.................................................................................................23 2.8 Newsletter......................................................................................................................23 3 Výstupní kód.........................................................................................................................24 3.1 Struktura........................................................................................................................24 3.1.3 HTML....................................................................................................................24 3.1.4 Struktura vs. SEO..................................................................................................24 3.1.5 Validita...................................................................................................................24 3.2 XSLT šablonování.........................................................................................................25 3.2.1 Systém XSLT a jeho výhody.................................................................................25 3.2.2 Organizace šablon..................................................................................................25 3.3 SEO - optimalizace (nejen) pro vyhledávače................................................................25 3.3.1 SEO versus optimalizace pro uživatele.................................................................25 3.3.2 Použité „techniky“ SEO........................................................................................26 3.3.2.1 „On-page“ techniky.......................................................................................26 3.3.2.2 „Off-page“ faktory.........................................................................................26 3.3.3 Zhodnocení výsledků.............................................................................................27 4 AJAX.....................................................................................................................................28 4.1 Princip a aplikace..........................................................................................................28 4.2 Uživatelské výhody.......................................................................................................28 4.3 Kapacitní výhody..........................................................................................................28
4.4 Podpora vyhledávačů a konflikty..................................................................................29 5 Webdesign.............................................................................................................................30 5.1 Původní verze................................................................................................................30 5.2 Rebranding....................................................................................................................30 5.3 Přístupnost.....................................................................................................................32 5.4 Možnosti šablon pro weby............................................................................................32 6 Lokalizace.............................................................................................................................33 6.1 Systém lokalizací...........................................................................................................33 6.2 Možnosti........................................................................................................................33 7 Hardware a výkon.................................................................................................................34 7.1 Hardwareové vybavení..................................................................................................34 7.1.3 Telehouse a rack.....................................................................................................34 7.1.4 Servery...................................................................................................................34 7.1.4.1 Seznam...........................................................................................................34 7.1.4.2 Organizace.....................................................................................................35 7.2 Škálování systému.........................................................................................................35 7.2.1 Řešení v původní verzí..........................................................................................35 7.2.2 Média.....................................................................................................................35 7.2.3 Databáze................................................................................................................36 7.2.4 Ostatní....................................................................................................................36 7.3 Zálohování.....................................................................................................................36 7.4 Cache.............................................................................................................................36 7.4.1 Srovnání s předchozí verzí....................................................................................36 7.4.2 Systém...................................................................................................................36 7.4.3 Výsledky................................................................................................................37 8 Marketing a propagace..........................................................................................................38 8.1 Monetizace....................................................................................................................38 8.1.1 Vkládaná reklama..................................................................................................38 8.1.2 Prémiové účty........................................................................................................38 8.2 Náklady na provoz.........................................................................................................39 8.3 Propagace systému........................................................................................................39 9 Závěr.....................................................................................................................................40
1 Úvod 1.1 Seznámení Online publikační služba Webgarden (dříve webgarden|zone) je dnes významným hráčem na poli online publikačních generátorů internetových stránek. Je dostupná v pěti jazykových verzích a další průběžně přibývají. Za dobu tříleté existence bylo pomocí Webgarden vygenerováno více než 350 000 webů a do systému se registrovalo 700 000 uživatelů. Webgarden je v současnosti dostupný ve dvou verzích, původní a nové. Systém umožňuje běžným uživatelům internetu bez znalostí souvisejících technologií vytvářet a spravovat internetové stránky. Veškeré činnosti jsou prováděny online skrze internetový prohlížeč na straně serveru. Změny se okamžitě projevují na klientské stránce1.
1.2 Historie S myšlenkou online generátoru internetových stránek jsme s kolegou Kamilem Foltinem přišli v létě roku 2005. Tvorba pilotní verze trvala cca půl roku a 9.ledna 2006 byla otevřena veřejnosti. Jelikož byla naše služba tehdy prakticky jediná svého druhu lokalizovaná v českém jazyce, zaznamenala relativně prudký růst popularity. Záhy jsme začali pracovat na tehdejší „nové verzi“ a po necelém roce, 24.listopadu 2006 byla tato verze uvedena do provozu. Služba se mezitím stala druhou nejnavštěvovanější skupinou webů svého druhu v České republice2. V době historického maxima navštívilo stránky systému Webgarden až 1,5 milionu reálných uživatelů měsíčně. Ačkoliv později zájem o službu jako takovou neklesal a denně bylo založeno přes 500 nových webů, projevila se konkurence v podobě internetových služeb naprosto odlišných, které však ukrajovaly ze vzácného uživatelova času. Typickým příkladem může být sociální síť FaceBook.com nebo video-server YouTube.com. V roce 2008 jsme navíc přikročili k ráznému a rozsahem neobvyklému zásahu proti tzv. Warez3 webům. To vše se projevilo na absolutním poklesu návštěvnosti, nicméně také na zkvalitnění obsahu klientských stránek. Současně jsme v letech 2007 sbírali náměty uživatelů ke zlepšení systému, průběžně jsme je vyhodnocovali a projektovali další (současnou) verzi Webgardenu. V létě 2008 byla nová verze hotova a byla postupně spuštěna na české a několika zahraničních doménách. Nová verze je od předchozí oddělena a během prvních měsíců provozu zaznamenává prudký růst návštěvnosti a především kladné ohlasy. V dubnu 2009 1 Samostatný web, obvykle na doméně 3. řádu; finální produkt systému 2 Data čerpána z auditu netmonitor.cz 3 Weby vytvořené za účelem nelegálního šíření autorsky chráněného obsahu 1
byla navíc do systému přidána funkce internetového obchodu a newsletteru.
Obrázek 1: Titulní stránka z roku 2006
Obrázek 2: Titulní stránka 2007
2
Obrázek 3: Titulní stránka nové verze
1.3 Nedostatky předchozí verze a řešení v nové Předchozí verze měla mnoho nedokonalých řešení a ze zpětného pohledu byla práce v systému zdlouhavá a místy téměř marná. Dokonce nás autory občas překvapovalo, jak si někteří uživatelé s aplikací hrdinně poradili. Ovšem čím více jsme si uvědomovali chyby, tím lépe se nám formovala představa verze nové. Nejcennější byla zpětná vazba od uživatelů, kterou přinášel jednak provoz uživatelské podpory a také webový formulář dostupný v administraci4 stránek. Jenom pomocí tohoto formuláře jsme nasbírali téměř 10 000 záznamů (ovšem pouze část smysluplných). Z nasbíraných dat jsem sestavil tabulku nejčastěji zmíněných přání.
4 webové rozhraní určené k správě a editaci klientských stránek; používané autory klientských stránek 3
Námět
Zastoupení
Vyřešeno v nové verzi
Vyšší limity pro upload a datový 29 prostor
Ano, limity ve verzi zdarma zdvojnásobeny. V placených tarifech zvětšeny několikanásobně.
Urychlit schvalování zobrazení stránek v katalogu
9
Ano, vytvoření automatizovaného katalogu.
Lepší statistiky návštěvnosti
6
Ano, zrychlení a zkvalitnění.
Uzamykání rubrik
6
Ano, komplexní systém práv.
Seznam uživatelů, registrovaných přes stránky
4
Ano.
Více úrovní rubrik
4
Ano, počet úrovní neomezen.
Fulltextové vyhledávání na stránce
4
Ano, vlastním fulltextem i přes Google.com.
Hromadný upload souborů
3
Ano, i pomocí archivů.
Blokování problémových uživatelů
3
Ne.
Lepši editor vzhledu
2
Ne, editor vzhledu zatím není implementován.
Více typů postranních panelů
1
Ano, přidány horní panely.
Vlastní domény druhého řádu
1
Ano.
Rubriky v panelech
1
Ano.
Formuláře k sběru dat
1
Ano.
Další druhy zobrazení galerií
1
Ano, možnost procházet galerie pomocí slideshow.
Hierarchie rubrik v administraci zobrazena pomocí stromu
1
Ano.
Možnost vkládat videa
1
Ano.
Tabulka 1: Vyhodnocení uživatelských námětů
V námětech se dále vyskytuje více než 100 různých nápadů, které byly v nové verzi realizovány. Mnoha žádostem nemohlo být vyhověno z technických, koncepčních nebo finančních důvodu. Z námětů jsme ale pečlivě vybrali ty smysluplné a až na výjimky jsme je úspěšně zrealizovali. Uživatele nejvíce trápily nízké limity hlavně pro datový prostor, který jsme již v základním bezplatném tarifu zdvojnásobili. Další uvolnění limitů je riskantní, jelikož zajišťují prodej placených tarifů. Srovnatelný zájem pak budily dříve nedokonalé uživatelské statistiky, uživatelská práva a katalog stránek Webgardenu. Všechny tři témata jsme důkladně zpracovali.
4
2 Funkcionalita 2.1 Princip Systém Webgarden umožňuje laickým uživatelům internetu jednoduchou a intuitivní tvorbu webových stránek. Na rozdíl od klasických „desktopových“ editorů je provozován online na Internetu na uzavřené serverové farmě. Webgarden je v provozu 24 hodin denně a s určitými limity je bezplatný. Autoři stránek mohou pod své účty registrovat neomezené množství jednotlivých webů a z jediného rozhraní je spravovat. Klientské stránky jsou publikovány okamžitě po provedení změny. Do zdrojového kódu5 není možné přímo zasahovat, jelikož je stránka generována striktně přes administrační rozhraní.
2.2 Uživatelské prostředí 2.2.1 Nedostatky původního řešení Původní verze Webgardenu měla tři hlavní a jedno servisní uživatelské6 rozhraní. ●
Vstupní web Obsahoval uvítací stránku, průvodce registrací nové stránky, katalog klientských stránek, žebříček jejich návštěvnosti, propagační nástěnku7, uživatelskou diskusi a další. Byl dostupný na adrese http://zone.webgarden.cz.
●
Administrace Stěžejní webové rozhraní určené autorům stránek, pomocí kterého editovali obsah a strukturu klientských stránek. K jeho použití byla vyžadována autentifikace pomocí
uživatelského
jména
a
heslo.
Bylo
dostupné
na
adrese
http://admin.webgarden.cz. ●
Klientská stránka Finální produkt - generované stránky. Byly dostupné na doménách třetího řádu.
●
Servisní rozhraní Aplikace, dostupná pouze administrátorům systému, pomocí které možné
5 HTML kód výstupní stránky 6 Rozlišujeme čtenáře, autory a administrátory 7 Autoři mohli na nástěnku vkládat reklamní inzeráty a upoutávky na své stránky 5
spravovat systém globálně. Zkušenosti ukázaly, že provoz klíčových částí systému na doménách třetího řádu (zone.webgarden.cz a admin.webgarden.cz) je pro uživatele velmi matoucí. Vstupní web měl titulní stranu naplněnou zajímavým obsahem, ale nedostatečně informovala o tom nejdůležitějším, totiž o funkci systému. Navíc obsahovala marketingový „trik“: na titulní straně bylo 5 velkých tlačítek pro vytvoření stránek, blogu, galerie, fóra a magazínu. Všechna ovšem vedla na shodného průvodce vytvořením a vytvořená stránka obsahovala funkcionalitu všech variant. I toto řešení jsme později vyhodnotili jako nevhodné, jelikož vzbuzovalo v uživateli rozpaky, kterou variantu si má vybrat. Následující průvodce vytvořením vyžadoval od uživatele obligátní informace (uživatelské jméno, heslo, url vytvářených stránek apod). K registraci nebylo potřeba vyplnit korektní emailovou adresu, což vedlo později k problémům při nutnosti kontaktu autora. Vstupní web také obsahoval přihlašovací formulář, který byl provázaný s privátní zónou vstupního webu a pro obvyklé použití nebyl potřebný. Naopak, přihlašovací formulář na stránce admin.webgarden.cz byl nezbytný k postupu do privátní části administračního rozhraní. Existence dvou přihlašovacích formulářů byla dalším zdrojem zmatků, jelikož autoři stránek se intuitivně přihlašovali již na vstupním webu a byli překvapeni, že nenachází nástroje k správě svých stránek. Samotná administrace stránek byla autory stránek označována za relativně dobrou, nicméně my jako autoři systému jsme si uvědomovali mnoho nedostatků. Jeden ze zásadních byla nedořešená navigace. Velmi často se autor proklikal do nějaké sekce a ztratil povědomí o jejím umístění či vztahu k jednotlivým objektům. Dalším problémem bylo umístění některých ovládacích prvků, které vyžadovalo nadměrné přesuny polohovacího zařízení8 či počty kliknutí. Tyto a další maličkosti jsou velmi znatelné, pokud autor používá systém dlouhodobě. Pro příklad uvedu, že když uživatel navštívil Webgarden, aby mohl na svoji domovskou stránku vložit obrázek ze svého počítače, musel kliknout průměrně 12 krát. Výše uvedená organizace měla navíc nevýhodu, že nepodporovala komunitní funkce9. Vstupní web sice obsahoval nejrůznější výtahy z nového obsahu stránek, katalog a podobně, ale zároveň měl kriticky malou návštěvnost, čímž ztrácely tyto stránky na přitažlivosti.
8 Obvykle myš 9 Funkce, které zajišťují interakci mezi uživateli 6
2.2.2 Řešení v nové verzi ●
Sjednocení V nové verzi byly sjednoceny dvě části - vstupní web a administrace - v jedno jediné
rozhraní
dostupné
na
kořenových
doménách
Webgardenu
(např
http://www.webgarden.com, http://www.webgarden.cz). Novým a nepřihlášeným uživatelům se při vstupu na stránku zobrazí stručné a výtvarně výrazné seznámení s funkcí systému, dominantním tlačítkem pro založení nových stránek a dynamickým sliderem10 s podrobnějším výčtem funkcí. V horní části stránky pak uživatel nalezne přihlašovací okno a záložku Komunita, která vede na stránku s komunitními funkcemi. Přihlašovací okno je tentokrát pro systém jediné, podobně jako tlačítko k založení stránek a tím odpadá mnoho zbytečných uživatelových rozpaků. Po přihlášení se uživatel ocitne uvnitř administrace, avšak hlavní prvky stránky (logo, hlavní záložky, grafická dominanta) zůstávaji na svém místě, aby uživatel pocítil kontinuitu s titulní stranou. ●
Organizace ovládacích prvků, logická i prostorová Navigace přes většinu sekcí je řešena systémem horizontálních záložek11. Toto řešení samo o sobě zajišťuje výrazně snadnější orientaci. Je vhodné držet počet záložek na každé úrovni nízký, aby byla zachována přehlednost. Na první pohled možná zanedbatelná, ale ve skutečnosti efektivní optimalizace je také volba výchozí záložky na každé úrovni. Zde se již často dostaneme do konfliktu s logikou. Pro příklad uvedu druhou úroveň záložek v části editace stránek: Přehled, Obsah, Nastavení atd. Toto pořadí je logické, nicméně naprostá většina autorů stránek okamžitě překlikává na sekci obsah, proto je vhodné, aby výchozí záložka byla právě ta na druhém místě. Když si uvědomíme, že služby administrace využije denně kolem 2500 uživatelů, ušetříme touto optimalizací téměř milion vygenerovaných html stránek ročně. Pro srovnání, v předchozí verzi bylo k vložení obrázku na stránku zapotřebí průměrně 12 kliknutí, v nové verzi je to 8 kliknutí.
10 DHTML prvek, který ve vymezené oblasti stránek postupně rozbrazuje různý obsah 11 Tlačítka, která dělají dojem záložek, jsou vizuálně propojena s aktivní sekcí 7
Obrázek 4: Ukázka organizace záložek
Mé stránky
Přehled Obsah
Obsah Nastavení Zařazení
Vzhled
Výběr vzhledů Editace CSS
Statistiky
Základní Stránky Technické...
Eshop
Objednávky Sklad Nastavení
Newsletter Nastavení
Obecné Uživatelé Přístupová práva Účet Doména Nastavení zobrazení
Komunita
Přehled Katalog Fórum Žebříček
Tabulka 2: Schéma sekcí webgarden.cz
Některé další sekce, které lze označit za vedlejší, jsou umístěny v menu na horním a dolním okraji stránky. Horní menu obsahuje odkaz na nápovědu, helpdesk, 8
osobní zprávy, nastavení uživatelského účtu, odkazy na další jazykové verze, vyhledávací formulář a tlačítko odhlásit. Dolní menu odkazuje na tiskové zprávy a všeobecné obchodní podmínky.
2.3 Správa obsahu 2.3.1 Nedostatky původního řešení V databázovém návrhu původní verze bylo počítáno s několika úrovněmi obsahové hierarchie. Na nejvyšší úrovni figurovaly záznamy website neboli vlastní klientské stránky, na které byly N:1 navázány rubriky category a na ty pak N:M obsahové prvky element, které byly ISA hierarchií 1:1 rošířeny a příslušné podtypy článek, galerie, obrázek, anketa apod. Tento návrh předurčoval, že obsah klientské stránky byl tvořen rubrikami, a rubriky různými druhy elementů. Element měl několik společných a několik druhových atributů. ●
●
Společné ○
Titulek
○
Datum vytvoření
○
Čtenářské hodnocení a další
Druhové ○
Galerie: jednotlivé obrázky a jejich popisky
○
Článek: průvodní obrázek a vlastní text článku
○
Anketa: průvodní obrázek, otázku a možné odpovědi atd.
Toto řešení nebylo dostatečně flexibilní pro tvorbu jednodušších stránek, jelikož vnucovalo uživateli pevnou hierarchickou hloubku obsahu. Vložit velký obrázek na titulní stránku byl paradoxně větší problém než provozovat rozsáhlou galerii obrázků s přidruženou diskusí. Pro vložení textu na stránky bylo tedy potřeba vybrat příslušnou rubriku, do ní vložit element typu článek a pak teprve vyplnit příslušný text. Čtenář pak musel po zobrazení rubriky nejprve kliknout na název článku, aby mu byl zobrazen vlastní obsah. Problémem bylo, pokud chtěl uživatel vložit do stránky více obrázků. Dostupný formulář umožňoval vyplnit naráz pouze 10 cest k souborům a i to bylo velmi zdlouhavé. Velmi nepohodlné bylo také řazení obsahu v rámci sekce klikáním na drobné ikonky šipek. 9
2.3.2 Řešení v nové verzi Nyní jsme databázovou reprezentaci obsahu zobecnili na dvě hlavní úrovně: kontejnery a obsahové prvky. Za kontejner považujeme jakýkoliv uzel ve stromu obsahu, například klientskou stránku, rubriku, panel, článek, zboží eshopu. Tyto kontejnery jsou opět v ISA hierarchii rozšiřovány o potřebné atributy. Toto řešení poskytuje rozsáhlé možnosti při navázání systému uživatelským oprávnění, které je pak jednotné pro jakékoliv úrovně systému a je dále pohodlně rozšiřitelné. Kontejnery jsou organizovány do N:M relací, realizovanou vazební tabulkou. Obsahové prvky jsou elementární částí nesoucí obsahové (multimediální) informace. Základní typy obsahových prvků jsou texty, obrázky, ankety, titulky, videa, odkazy, formátované texty, ze kterých je vhodné sestavovat obsah dokumentů a stránek. Prvky je možné libovolně kombinovat a na rozdíl od původní verze je možné zařadit je do kteréhokoliv kontejneru. Díky tomu mohou autoři vkládat multimediální obsah kamkoliv na domovskou stránku, do sekcí přímo, do článku nebo do postranních panelů12. Teoreticky může být multimediální obsah vložen kamkoli v kontejnerové hierarchii. Obsahové prvky mají navíc velké množství dalších variant, například přihlašovací okno, graf se statistikou návštěvnosti, košík internetového obchodu a mnohé další. Díky tomu autor pohodlně vytvoří jednoduché stránky bez složité hierarchie. Do jediné úrovně rubrik vloží vlastní multimediální obsah. Tímto řešením se mimo jiné dramaticky zlepšila vizuální úroveň klientských stránek.
2.3.3 Content Builder Content Builder je administrátorské označení pro stěžejní nástroj administrace, který sestavuje vlastní multimediální obsah. Skládá se z vkládacího panelu a editačních polí. Vkládací panel sdružuje tlačítka ve třech úrovních, každé tlačítko odpovídá jednomu typu obsahového prvku. Stisknutím tlačítka server vygeneruje příslušná editační pole a vloží je do toku pod vkládací panel. Editační pole jsou pod vkládací panel řazena postupně, jejich pořadí je možné měnit také na internetu zatím vzácnou Drag&Drop13 technologií. Každé editační pole obsahuje relevantní formulářové vstupy a ovládací prvky (smazat, uložit apod.). Pokud kontejner dovoluje uživatelsky definované stránkování, může autor do toku editačních polí vložit speciální pole nová stránka. Systém na vygenerovaném klientském 12 Obdélníkové oblasti na okrajích stránky, při navigaci klientským webem jsou stále viditelné 13 Uchop a táhni - pořadí prvků je měněno uchopením a tažením myší 10
webu v tomto místě tok obsahu přeruší a vloží panel stránkování14. Funkci je vhodné využít například při tvorbě návodů, u kterých chceme stránky vhodně oddělit. Problém s uploadem většího množství obrázku byl vyřešen přidáním volby vložit ze souboru. Tato volba je součástí vkládacího panelu a obsahuje formulář pro upload jednoho nebo více souborů. Systém po příjmu vyhodnocuje druh vložených souborů a nakládá s nimi podle tohoto schématu: ●
Textový soubor .txt Ze souboru je přečten text, v toku obsahových prvků kontejneru je vytvořen jeden nový typu text. Do obsahu prvku je vložen text ze souboru. Text je tedy na klientské stránce přimo čitelný.
●
Rastrový obrázek Pro správně rozpoznaný rastrový obrázek je vytvořen obsahový prvek typu obrázek. Obrázek je ihned viditelný na klientské stránce.
●
Videosoubor Po úspěšném uploadu videa je vytvořen v toku obsahových prvků kontejneru prvek typu video. Uploadovaný videosoubor je v následujících momentech zpracován serverovými filtry a následně vložen na klientskou stránku pomocí speciálního onpage15 přehrávače.
●
Nerozpoznané Nerozpoznané soubory jsou na stránku vloženy v podobě souboru ke stažení. Na stránce jsou čitelné pouze odkazy, vedoucí ke stažení souboru.
●
Archiv .zip Archiv ZIP je na serverové straně rozbalen a jeho obsah je analyzován stejným způsobem jako soubory nezabalené. Z rozpoznaného obsahu jsou vytvořeny příslušné prvky a vloženy do aktuálního kontejneru. Právě díky inteligentnímu zacházení s archivy ZIP je možné například na desktopu
autora stránky zabalit celou skupinu rastrových obrázků a videí z dovolené, uploadovat do systému jednoduše jediný soubor a vytvořit tak multimediální webovou galerii.
14 Odkazy na jednotlivé stránky obsahu 15 Přehrávač je součástí obsahu stránky, nikoliv jako samostatné okno 11
Content Builder je vybaven také navigačním nástrojem Content Tree, který přehledně zobrazuje strukturu sekcí klientské stránky. Nástroj je navržen tak, aby maximálně usnadňoval orientaci v obsahu a práci s ním. Nástroj podporuje technologii Drag&Drop.
2.3.4 Widgety Widgety16 neboli mini-aplikace jsou rozšířené obsahové prvky. Je možné je vkládat mezi základní obsahové prvky do toku obsahu, ale obvykle mají předdefinovanou speciální funkci. Výčet nejčastějších widgetů: ●
Formulář
●
YouTube a Google video
●
RSS čtečka a RSS kanál
●
Kalendář
●
Newsletter
●
Statistiky
●
Nákupní košík
●
Poslední změny a poslední komentáře
●
Přihlašovací okno
●
Vyhledávací okno
2.4 Správa oprávnění 2.4.1 Nedostatky původního řešení Již v původní verzi byly možnosti systému oprávnění relativně rozsáhlé. Nicméně jejich aplikace byla omezena na jedinou úroveň struktury obsahu - na rubriky. Dědičnost pravidel byla vyřešena nedostatečně a celé ovládání nepřehledné. Autoři stránek byli schopni vytvořit redakční tým podporovaný systémem oprávnění, ale velmi omezeně.
2.4.2 Řešení v nové verzi Důležitým předpokladem k inovaci systému práv byla reorganizace struktury obsahu. V databázi nové verze jsou všechny úrovně obsahových kontejnerů (rubrik, webů, panelů, článku atd.) uspořádány do ISA hierarchie. Díky tomu může systém práv přistupovat k obsahu 16 V reálné aplikaci je hranice mezi Widgety a dalšími druhy obsahových prvků z technických důvodů složitější 12
jednotně přes celý systém. Základním stavebním kamenem jsou uživatelské skupiny. Do skupin jsou M:N relací připojeny uživatelské účty. Uživatelské skupiny jsou dále M:N relací navázány na obsahové kontejnery. Každá konkrétní vazba mezi skupinou a kontejnerem má připojeny různé druhy povolovacích a zakazovacích pravidel. Systém podporuje sedm základních pravidel: čtení, editace a mazání pro veřejný a privátní obsah a editace práv. Tento mechanismus dovoluje definovat oprávnění vybranému uživateli vzhledem ke konkrétnímu obsahu. To samotné by ale k plnohodnotné správě stránek zdaleka nestačilo. Obsahové kontejnery jsou v systému uspořádány do orientovaného grafu bez cyklů. Každý kontejner má definovánu vazbu k rodiči a tudíž cestu až ke kořeni. Při vložení nového pravidla pro uživatelskou skupinu a konkrétní obsahový kontejner Webgarden zároveň vytvoří vazbu s totožným pravidlem i všem potomkům tohoto kontejneru. Pokud systém narazí na kontejner, který má již z dřívějška definováno pravidlo pro tuto skupinu, upřednostní povolovací pravidlo. To vyplývá z logiky systému. Pokud je článek vložen do dvou rubrik, kde u jedné je editace uživateli povolena a u druhé zakázána, uživatel se přes první rubriku k editaci může dopracovat. Tímto mechanismem je docílena dědičnost pravidel pro vnořený obsah plně v souladu s potřebami systému. Databáze je optimalizována tak, že kromě standardní vazební tabulky mezi kontejnery existuje ještě druhá tabulka s redundantní informací, která obsahuje ukazatele na všechny potomky všech uzlů a podobně. Díky tomu je možné velmi efektivně nastavovat a získávat oprávnění pro kontejnery. Nový systém práv dovoluje přidat libovolného uživatele do libovolného počtu skupin, těmto skupinám definovat libovolná pravidla pro libovolné množství obsahových kontejnerů a navíc respektuje dědičnost pravidel a jejich priority. Systém jsme navrhovali mnoho měsíců, jelikož vyhovět požadavkům na funkcionalitu při zachování logaritmické složitosti bylo nesmírně složité. Systém práv považujeme za chloubu Webgardenu.
2.4.3 Příklad redakce Jako ukázku možností systému práv použiji internetový magazín. Na titulní stránce Webgardenu byla nejprve založena nová stránka a v ní vytvořeny rubriky pro magazín.
13
Obrázek 5: Snímek vytvořeného magazínu
Poté byly v administraci vytvořeny nové uživatelské skupiny a skupinám přidělena pravidla pro přístup. Skupina
Rubrika
Pravidlo
Redakce Hobby
Magazín > Hobby
Povolit číst veřejný i soukromý obsah a editovat veřejný i soukromý obsah
Redakce Ze světa
Magazín > Ze světa
Povolit číst veřejný i soukromý obsah a editovat veřejný i soukromý obsah
Korektor
Magazín
Povolit číst veřejný i soukromý obsah a editovat soukromý obsah
Šéfredaktor
Magazín
Povolit číst veřejný i soukromý obsah a editovat veřejný i soukromý obsah
Externisté
Magazín > Příspěvky
Povolit číst veřejný i soukromý obsah a editovat soukromý obsah
Registrovaní
Magazín
Povolit číst pouze veřejný obsah
Tabulka 3: Ukázka nastavení pravidel pro redakci
14
Redakce Hobby Redaktoři zařazení do této skupiny mohou editovat veškerý obsah rubriky Hobby. Redakce Ze světa Redaktoři zařazení do této skupiny mohou editovat veškerý obsah rubriky Ze světa. Korektor Korektor má dovoleno editovat obsah
stránek
označený
jako
soukromý. Autor článku jej uloží jako soukromý a korektor jej posléze zkontroluje. Obrázek 6: Snímek seznamu uživatelských skupin
Šéfredaktor Šéfredaktor má dovoleno editovat
veškerý obsah magazínu. Může také vybírat schválené články z rubriky Příspěvky (která je návštěvníkům skryta) a přesouvat je do veřejných rubrik. Má také právo vkládat články jednotlivých tématických rubrik na titulní stranu. Externisté Tato skupina zahrnuje uživatele, kteří mohou vkládat články pouze do skryté rubriky Příspěvky. Registrovaní Tato generická skupina má pro web magazínu upraveno pravidlo, aby přihlášení uživatelé nemohli číst privátní obsah.
15
Obrázek 7: Snímek editace uživatelské skupiny Redakce Hobby
2.5 Ostatní nastavení, statistiky a prémiové účty 2.5.1 Nastavení Autoři stránek mají k dispozici řadu nastavení a doplňkových služeb. Obecné nastavení - pokrývá základní atributy stránky. Název stránky je základní pojmenování klientské stránky. Je použit všude v systému jako text odkazů na web a na webu je vložen v H1 tagu, a je tedy jedním z nejdůležitějších indikátorů obsahu stránky. Záhlaví stránek slouží k rozšíření názvu stránky a je vkládáno do H2 tagu. Jeho délka je obvykle také několikrát delší než název stránky. Zápatí stránek se zobrazuje na každé podstránce. Teoreticky může obsahovat také multimediální obsah. V reálné aplikaci je tato možnost zatím nedostupná. Výchozí jazyk klientské stránky určuje jazykovou lokalizaci předdefinovaných slov vyskytujících se na stránce. Příkladem mohou být popisky v přihlašovacím okně „uživatelské jméno“ a „heslo“ vloženém do klientské stránky. Výchozí jazyk se nemusí shodovat s umístěním domény - na české verzi systému mohou uživatelé tvořit stránky v angličtině apod. Časová zóna může být libovolně změněna pro potřeby stránek. Formát data a času může být autorem stránek upraven podle potřeb stránek. Datum a čas jsou na klientské stránce zobrazeny například u článků nebo v diskuzích. Formát data je obdobná volba. V některých případech je zobrazeno pouze 16
samotné datum. Uživatelé - seznam uživatelů registrovaných přes aktuální klientské stránky. Webgarden používá globální databázi uživatelů platnou pro celou národní verzi systému. Uživatel registrovaný na kterékoliv stránce vytvořené na Webgardenu se stává uživatelem Webgardenu a může svoje uživatelské jméno aplikovat kdekoliv na našich serverech. Existují však situace, kdy je vhodné získat seznam uživatelů, kteří se registrovali přes konkrétní klientské stránky. Například pro potřeby autora takových stránek. Proto u uživatelů evidujeme také konkrétní stránky, přes které do systému vstoupili. Autor stránek má v této části administrace dostupný seznam těchto uživatelů. Přístupová práva - na první stránce zobrazí Webgarden seznam existujících uživatelských skupin. Po vytvoření má klientská stránka přidruženy tři skupiny, z toho dvě generické. Anonymní uživatelé - jsou nahodilí návštěvníci stránek, kteří nejsou přihlášení. Registrovaní uživatelé - jsou přihlášení uživatelé. Mohli být registrováni kdekoliv v systému. Administrátoři - po založení obsahují jediný uživatelský účet a to ten, ze kterého byla stránka vytvořena. Tuto skupinu lze ale kdykoliv rozšířit o dalšího uživatele. Pod seznamem skupin nalezneme tlačítko k přidání nové uživatelské skupiny. Libovolné skupiny lze upravit stiskem odkazu Editovat. V editaci může autor stránek upravit název skupiny a určit, zda se členové skupiny mohou také přihlašovat do administračního rozhraní. Toto nastavení je vhodné povolit například pro redakci magazínu a naopak zakázat čtenářům stránek. Následuje seznam uživatelských jmen ve skupině (u ne-generických skupin). Poslední částí je seznam pravidel skupiny pro práci s obsahem stránky. Každé pravidlo se skládá z výběru obsahového kontejneru a z vlastního pravidla. Aby byl systém práv co nejjednodušší k obsluze uživateli, nejsou pravidla zobrazena tabulkou, ale typickými aplikacemi pravidel: ●
Zakázat přístup úplně
●
Povolit číst pouze veřejný obsah
●
Povolit číst veřejný i soukromý obsah
17
●
Povolit číst veřejný i soukromý obsah a editovat soukromý obsah
●
Povolit číst veřejný i soukromý obsah a editovat veřejný i soukromý obsah
●
Povolit číst veřejný i soukromý obsah a editovat veřejný obsah
●
Povolit úplný přistup Vybrané pravidlo je aplikováno pro aktuální uživatelskou skupinu ve vztahu k
označenému obsahovému kontejneru a jeho následníkům v hierarchii obsahu. Doména - nabídka zahrnuje všechny možnosti práce s adresou stránek. Do základu Webgarden nabízí hostování stránek na doménách třetího řádu sdružených na domény druhého řádu (například webgarden.com, shop1.cz, mypage.cz, iplace.cz a další). Autoři ale mohou své stránky přesunou na vlastní doménu druhého řádu, kterou mohou přes systém dokonce zakoupit. Systém je napojen XML kanálem na robota Subreg.cz partnerské společnosti Gransy s.r.o. Tento robot se stará o
komunikaci s doménovými registry, o
databázi domén a doménových kontaktů a pro správu dynamického DNS serveru. Na naší straně se servery starají o generování rewrite pravidel17 pro webový server Lighttpd, o správné přiřazení domén webům v databázi, o prodlužování jejich registrace a o organizaci plateb. Výhoda nákupu domén skrze Webgarden spočívá především v jednoduchosti. Systém sám ověří, zda je zvolená doména volná k registraci. V případě zájmu uživatel pouze klikne na příslušné tlačítko a systém ho vyzve k platbě. Pokud například uživatel zaplatí platební kartou nebo službou PayPal.com, je transakce realizována během jedné minuty a doména okamžitě registrována. Systém se zároveň postará o nastavení DNS serveru, takže například u .com domén je obvykle možné již za 10 minut novou adresu používat. Nastavení zobrazení - je dodatečné upravení vzhledu stránek. Systém obsahuje několik předdefinovaných pravidel pro zobrazení stránky a tato pravidla je možné povolovat nebo zakazovat. Jedná se zejména o zobrazení různých popisek a nadpisů, které obvykle nejsou pro stránky podstatné a naopak na některých webech mohou být rušivé. Pravidlo je uloženo do databáze a při generování klientské stránky je na jeho základě vytvořen dodatečný kaskádový styl.
2.5.2 Statistiky Webgarden je vybaven aparátem vlastních statistik návštěvnosti všech klientských stránek. Umí podat informace o počtu návštěvníků, zobrazit seznamy odkazujících webů, 17 Pravidla pro přepis url na systémové parametry 18
rozeznat roboty vyhledávačů a například informace o technickém vybavení návštěvníků. Nástroj umí zobrazit data pro libovolný časový interval (dny). Výsledky jsou prezentovány formou grafů (framework FusionChart) nebo tabulek.
Obrázek 8: Statistiky návštěvnosti
Obrázek 9: Statistiky technického vybavení návštěvníků
19
2.5.3 Prémiové účty Po vytvoření mají stránky aktivován tarif Basic, který je možné trvale využívat zdarma. Tarif Basic zahrnuje téměř všechny funkce systému, ale některé limituje. Omezeny jsou obvykle hodnoty, které konzumují prostředky serveru, tedy například datový prostor na serveru, velikost uploadu, počet návštěv bez zobrazení reklamy apod. V nabídce prémiových účtů jsou zařazeny čtyři tarify: SMS, Stříbrný, Zlatý a Platinový. SMS tarif je dostupný zatím pouze v ČR. Je možné jej zakoupit prostřednictvím platební Premuim SMS a jeho platnost je omezena na 30 dní. Ostatní tarify jsou platné vždy 180 dní a jsou dostupné globálně. Platby lze realizovat přes platební bránu PayPal.com (PayPal a platební karty) nebo mezinárodním převodem na účet. Prémiové účty posouvají limity pro celkový datový prostor, pro maximální jednorázový upload na server, pro kvalitu vkládaného videa, množství rozeslaných newletterů a především počty stránek zobrazených bez vložené reklamy.
2.6 Klientská stránka 2.6.1 Nedostatky původního řešení Jelikož generované klientské stránky nesou majoritní část návštěvnosti a představují tedy většinu zátěže na systém, je potřeba jejich finální podobu ukládat do dočasné paměti cacheovat. To má za následek na jedné straně snížení zátěže na servery, na druhé straně ale výrazně komplikuje všechny změny týkající se zobrazování klientské stránky. V původní verzi proto byla postupem času klientská stránka relativně zanedbávána, jak byly do systému implementovány nové funkce. Protože bylo stránky nutné optimalizovat pro všechny používané typy prohlížečů a zároveň bylo nutné poskytnou různorodé vzhledy pro předem neznámý obsah stránek, vzhledové šablony měly řadu vad. Vše bylo navíc komplikováno neustálým vývojem nových a nových verzí prohlížečů, často zpětně nedokonale kompatibilních. V původní verzi byla klientská stránka při prvním zobrazení po vypršení cacheovaného záznamu nebo po libovolné změně mající vliv na zobrazení stránky vygenerována z databáze. Jádro systému získalo z databáze strukturu stránek a vygenerovalo XML dokument, který obsahoval všechna potřebná data. Tento dokument byl podroben XSLT processingu s užitím jednotných XSLT šablon. Výstupem byl již HTML dokument který byl odeslán spolu s kaskádovými styly vzhledové šablony webovému prohlížeči. Výsledek byl 20
zároveň zacacheovén. Při dalším zobrazení stránky byla již prohlížeči poslána stránka z cache. Pokud však stránky navštívil přihlášený uživatel, byla mu stránka vždy znovu generována, protože mohl kvůli nastavení pravidel vidět jiný obsah stránky, než uživatel nepřihlášený. Další problémy přinášela zanedbaná sada formátovacích HTML elementů. Byly umístěny obvykle na jediné úrovni a jejich další vnořování nebylo možné.
2.6.2 Řešení v nové verzi Struktura Vizuální výstup klientské stránky je rozdělen na pět základních bloků - Top, Left, Center, Right, Bottom. Blok Top obsahuje sadu horních panelů, název stránek a podtitulek. Horní panely jsou obdélníkové jednotky s variabilním multimediálním obsahem (jedná se o typ obsahových kontejnerů). Bloky Left a Right obsahují obdobnou sadu postranních panelů, blok Left navíc obsahuje hlavní menu klientských stránek. Horní panely jsou na stránce řazeny horizontálně, levé a pravé vertikálně. Blok Center zobrazuje vždy aktuální (rozkliknutý) obsahový kontejner. Při vstupu na stránky je to obvykle domovská rubrika, při prokliku na článek zas jeho obsah. Blok Bottom pak doplňuje stránku zápatím a dalšími volitelnými prvky. Každý obsahový kontejner může obsahovat jednak další vnořené kontejnery a také přímý obsah - obsahové prvky. Obsahové kontejnery jsou obvykle reprezentovány odkazovou nabídkou, obsahové prvky jsou naopak viditelné v plném rozsahu. Toto řešení umožňuje kamkoliv na stránky vkládat multimediální obsah přímo viditelný nebo pouze formou odkazů.
21
Obrázek 10: Ukázka klientské stránky
Vzhledové šablony Webgarden v současnosti nabízí asi 25 vzhledových šablon. Vzhledy jsou realizovány pouze CSS kódem a všechny tyto kódy se aplikují na univerzální HTML kód. Kompletní změna vzhledu tedy spočívá pouze v změně CSS. Jelikož jsou klientské stránky nové verze bohatší na funkce, jsou i vzhledové šablony úměrně složitější. U vzhledových šablon jsme se snažili dbát na pravidla přístupnosti. O úspěšnosti do jisté míry svědčí i to, že náš systém doporučují aktivisté z řad zrakově postižených.
22
Tabulka 4: Ukázky vzhledových šablon
2.7 Eshopy Internetové obchody jsou dnes běžnou součástí našeho života a jejich popularita neohroženě roste. V minulosti jsme pozorovali, že mnoho autorů stránek různými způsoby nabízí online zboží a služby. Vytvořili jsme tedy sadu funkcí pro podporu eshopů implementovaných do služby Webgarden. Nespornou výhodou je, že uživatelé mohou elektronický obchod plynule spojit s vlastní stránkou a nedochází k obvyklému odskoku z prezentačních stránek na eshop. Zboží eshopu je možné vložit kamkoliv na stránky, a to v malém i velkém množství. Navíc je možné každou položku neomezeně vybavit multimediálním popisem.
2.7.1 Multimediální popis Zboží eshopu je speciální typ obsahového kontejneru. Jelikož k obsahovým kontejnerům je možné připojovat multimediální obsah v podobě obsahových prvků, je tímto způsobem možné doprovodit i produkty eshopu. Webgarden tedy neomezuje doprovodný popis zboží na strohý text a několik obrázků, ale nabízí k jeho prezentaci všechny prvky od videa, diskuse a anket až po RSS čtečku. Autor stránek má navíc možnost volit, které prvky se zobrazí již v náhledu a které až po rozkliknutí zboží.
2.7.2 Možnosti nastavení Obsahový kontejner typu zboží nese také dodatečné informace o dostupnosti, skladové 23
zásobě, ceně, DPH a produktovém kódu. Systém také umožňuje evidovat u zboží více jeho variant. Na klientské stránce - eshopu pak může zákazník při nákupu zvolit variantu. Webgarden umožňuje v nastavení eshopu definovat: ●
fakturační údaje obchodníka
●
akceptovatelné měny (včetně vlastních předpon a přípon, např. $ nebo CZK)
●
úrovně DPH
●
platební metody (systém nabízí automatické napojení na platební bránu PayPal.com)
●
metody doručení
●
úrovně dostupnosti
●
databázi výrobců
2.7.3 Objednávky Pří úspěšné objednávce je vytvořen záznam v tabulce objednávek v administraci a server odešle notifikaci obchodníkovi emailem. Obchodník má v tabulce k dispozici vyhledávání a filtry pro práci s objednavkami. V tabulce je také možnost měnit jednotlivé stavy objednávky: zaplaceno, odesláno, vyskladněno a stav otevřeno/uzavřeno. Dále je zde volba k odeslání faktury a k tisku detailů.
2.7.4 Skladová evidence Abychom zajistili komplexnější službu internetového obchodu, zařadili jsme mezi funkce také skladovou evidenci. Služba umožňuje u každého zboží a jeho jednotlivých variant zadávat počet zásob. Tabulka v administraci umí ve skladu vyhledávat a filtrovat zboží podle skladového počtu.
2.8 Newsletter Pro úspěch systému Webgarden je nejdůležitější úspěch jednotlivých klientských stránek. Uživatelům doporučujeme určité postupy ke zkvalitňování obsahu a k zisku nových návštěvníků. Jedním z nich je využité newsletteru. Newsletter je forma elektronického dopisu, který je rozeslán autorem skupině příjemců a obsahuje obvykle popis aktualit na autorově webu. Uživatel má možnost vytvořit neomezené množství newsletterů (např. Novinky,
24
Pozvánky, VIP atd.). U každého definuje příjemce jako seznam emailových adres a jednotlivá vydání (např. Leden, Březen atd.). Vydání newsletteru je obdobou obsahového kontejneru. Obsah je do něj vkládán také v Content Builderu jako u rubrik nebo článku. Může tedy obsahovat opět celou řadu multimediálních prvku, které jsou později v emailu zobrazeny přímo nebo formou odkazů. Každé vydání má také volbu rozeslat. Po stisku je vydání zařazeno do odesílací fronty a pomocí SMTP serveru postupně odbaveno. V případě, že poštovní klient čtenáře neumí zobrazit HTML dokument, obsahuje odeslaný newsletter také odkaz na webové umístění vydání. Správci poštovních služeb mají různé limity, které když odesílatel překročí, dostane se na list blokovaných zdrojů. Z tohoto důvodu je nutné odesílat newslettery postupně a v budoucnu zajistit u významných provozovatelů výjimky.
25
3 Výstupní kód 3.1 Struktura 3.1.1 Kód stránky Klientské stránky jsou publikovány pod DOCTYPE XHTML 1.0 Strict s kódováním UTF-8. V hlavičce jsou krom obligátních meta tagů také linky na obslužné Javascripty a převzaté frameworky (Lightview pro zobrazení obrázků, Prototype a Scriptaculous nako nadstavba Javascriptu, scripty pro podporu AJAXu, grafů a Flash souborů). Dále obsahuje hlavička odkaz na externí kaskádové styly pomocné, styly vzhledové šablony a styly pro frameworky. Následuje inline zápis kaskádových stylu pro dodatečné nastavení zobrazení klientské stránky. Tělo dokumentu je tvořeno elementy pro funkci AJAXu, nezbytné designové elementy a vlastní obsah. Všechny AJAXové odkazy mají definované metody „onclick“ události. Některé pro vyhledávače nepodstatné části stránky, jako například vložené reklamy a grafy se statistikou, jsou do stránky vkládány již napoprvé dodatečným načtením AJAXem.
3.1.2 Struktura vs. SEO Klientské stránky mají univerzální HTML kód, který lze kombinovat s libovolnou vzhledovou šablonou. Tím jsou relativně omezeny možnosti, jak tento kód strukturovat a vhodné řešení z pohledu organizace na stránce může být nevhodné z hlediska SEO18. Uvedu tento příklad. Klientská stránka obsahuje tři sady postranních panelů (horní, levé a pravé) a středovou obsahovou část, která zobrazuje detail vybrané sekce. Z důvodu univerzálnosti pro vzhledové šablony je nutné HTML dokument sestavit tak, že na prvním místě je obsah horních panelů, následují levé, pravé a nakonec obsah středové části. Z hlediska SEO je však důležitější obsah vždy výše v dokumentu. Postranní panely často obsahují různé doplňkové prvky a především, jejich obsah je na celých stránkách stejný. Naopak detail sekce zpravidla nese podstatné informace a pro SEO je významný. Tento příklad ilustruje neohrabanost dnešního přístupu k SEO: naše řešení je v dané situaci opravdu tím uživatelsky nejlepším a přitom není přátelské k SEO. Věříme ale, že doba krkolomných konstrukcí podbízejících se „Googlu“ brzy skončí.
18 Search Engine Optimization - optimalizace stránek pro vyhledávače 26
3.1.3 Validita HTML kód publikujeme pod Doctype XHTML 1.0 Strict, UTF-8 kódováni. Výstupní kód není v tento moment zcela validní. Mezi známé chyby v HTML kódu patří například absence značek fieldset u formulářů, dočasné vložení block-level elementů dovnitř inline elementů či občasné vynechání alternativního popisku. Tyto vady však postupně odstraňujeme.
3.2 XSLT šablonování 3.2.1 Systém XSLT a jeho výhody XSLT neboli eXtensible Stylesheet Language Transformations je transformační technologie, která převádí zdrojový XML dokument na jiný XML (nebo HTML) dokument. Transformace je realizována v reálném čase pomocí XSLT knihovny pro jazyk PHP na straně serveru. Pro transformaci jsou podstatné XSLT šablony. Celý proces tedy vypadá tak, že klient odešle na server GET požadavek, webový server Lighttpd nejprve vyhodnotí pomocí rewrite pravidel zadanou url a předá PHP procesoru potřebné parametry. PHP inicializuje jádro redakčního systému Webgarden, které na základě parametrů zavolá příslušnou obsluhu databáze. Ze získaných dat pak sestaví XML dokument, který přepošle XSLT procesoru. Ten pomocí šablon sestaví výsledné HTML a odešle jej zpět klientovi.
3.2.2 Organizace šablon Jednotlivé šablony jsou rozděleny do samostatných souborů. Rozdělení rámcově odpovídá systému pohledů (kapitola 4.1). Pohledy jsou sice organizovány do stromu, soubory šablon jsou nicméně uloženy na jedné úrovni. Každá šablona pohledu je rozvětvena na tři části. První část je aplikována v případě, že má být aktuální šablona načtena do stránky dodatečně pomocí AJAXu a obsahuje volání AJAXové funkce. Druhá větev je aplikována v případě, že je daný pohled získán z dočasné paměti a třetí obsahuje vlastní pravidla pro transformaci. Tato větev také obvykle volá šablony vnořených pohledů.
3.3 SEO - optimalizace (nejen) pro vyhledávače 3.3.1 SEO versus optimalizace pro uživatele V kapitole 3.1.4 jsem uvedl příklad toho, kdy pravidla pro SEO zcela neodpovídají potřebám uživatelů. Disciplina SEO staví mimo jiné na vhodném formulování textů na internetové stránce. V angličtině je vše o řád jednodušší, jelikož její gramatika minimalizuje 27
nejrůznější skloňování slov. Napsat tedy na stránky text obsahující klíčová slova v takové formě, v jaké je hledá uživatel, je relativně jednoduché. I zde však narazíme na sporné momenty. Tím může být například použití členu a, an a the. Pro vyhledáváni na Internetu není většinou uvedení členů podstatné, nicméně experimentálně jsme ověřili, že vyhledávače vrací různé výsledky při jejich použití či nepoužití. Z hlediska SEO je ideální uvádět tvary slov a slovních spojení přesně v takové formě, v jaké je uživatelé hledají. A uživatelé hledají většinou bez členů. O řád složitější je pak situace s češtinou. Abychom například uvedli důležitá klíčová slova „vytvořit webové stránky zdarma“ na titulní stránce ve vyhledávaném tvaru, použili jsme je v otázce „Chcete vytvořit webové stránky zdarma?“. Psaní textů na důležité stránky webů není triviální problém a je potřeba mu věnovat dostatek úsilí. Rád bych zde uvedl fakt, že metody hodnocení kvality stránek jsou tajemstvím vyhledávačů a všechny metody SEO tedy vznikají experimentálně.
3.3.2 Použité „techniky“ SEO 3.3.2.1 „On-page“ techniky
Mezi on-page patří ty techniky, které nezasahují do dalších dokumentů. ●
Správné strukturování nadpisů patří mezi důležité optimalizace. Stránka by měla obsahovat jeden hlavní nadpis a další vedlejší nadpisy.
●
Alternativní popisky u obrázků a odkazů
●
Uživatelsky čitelné URL formátujeme například podle tohoto schématu: článek „Výškové budovy v tělovýchově“ v rubrice „Archiv“ ze stránek http://jezek.mypage.cz nalezneme
na
adrese
http://jezek.mypage.cz/menu/archiv/vyskove-budovy-v-
telovychove/. ●
Meta tagy v hlavičce nejsou tím nejdůležitějším, ale jejich vynechání je zbytečnou ztrátou bodů. Největší chybou je meta tagy zahltit tisícem klíčových slov, které navíc se stránkou nesouvisí. To je považováno za černou techniku.
●
Všechny optimalizace je nutné podpořit především kvalitním obsahem s ideálním vyvážením optimalizačních klíčových slov a slov ostatních.
3.3.2.2 „Off-page“ faktor
Off-page faktor spočívá v množství odkazů na stránku v síti Internet. Většina vyhledávačů používá k hodnocení kvality stránek tzv. rank, jehož složkou bývá off-page rank. 28
Off-page rank je obvykle spočten jako součet dílčích ranků. Dílčí rank je na stránku přiveden odkazem z jiné stránky a jeho hodnota může být spočtena jako off-page rank zdrojové stránky dělený počtem odkazů vedoucích ze stránky pryč. Hodnoty jsou jistě přenásobeny dalšími faktory. Všechny klientské stránky obsahují v zápatí odkaz na vstupní stránku služby Webgarden, čímž na ní „přivádějí“ page rank.
3.3.3 Zhodnocení výsledků Dlouhodobě pozorujeme větší či menší úspěchy při optimalizaci služby Webgarden. Na relevantní klíčová slova týkající se naší služby přímo se stránky http://www.webgarden.cz zobrazují až na výjimky mezi prvními výsledky vyhledávání. Co se týká klientských stránek, úspěšnost záleží na pracovitosti autorů, nicméně i zde pozorujeme obvykle výborné výsledky.
29
4 AJAX 4.1 Princip a aplikace AJAX (Asynchronous JavaScript and XML) je obecné označení pro metodu asynchronního přenosu dat mezi webovým serverem a internetovým prohlížečem. Existuje mnoho různých frameworků poskytujících komplexnější či úspornější AJAXové funkce. Webgarden využívá framework Prototype, který poskytuje základní funkce pro asynchronní komunikaci. Systém Webgardenu používá při práci se stránkou tzv. pohledy. Na každý prvek stránky (např. diskusní okno, obrázkovou galerii, anketu apod.) se lze podívat přímo nebo například v rámci nějakého seznamu nebo třeba na webové stránce. Při prvním zobrazení stránky uživatelem vygeneruje systém kompletně celou stránku. Odkazy na stránce mají kromě standardního parametru href definován také parametr onclick. Ten volá javascriptovou AJAXovou funkci pro zobrazení cílového obsahu do vybraného blokového elementu. Po stisku odkazu tedy nedojde ke standardnímu odskoku, nýbrž k vykonání funkce ajaxUpdate(), které jsou předány parametry jednoznačně určující cílový blokový element k zobrazení a relativní URL cílové stránky. Funkce odešle pomocí rozhraní XMLHttpRequest požadavek na server, který z relativní URL rozezná, kterou část stránky má aktualizovat a vygeneruje příslušný úsek HTML kódu, který vrátí zpět. Funkce ajaxUpdate() se obratem postará o to, aby kód vložila do cílového blokového elementu. Tím fakticky docílíme zobrazení nové stránky bez znovunačtení celého dokumentu. Pomocí XMLHttpRequest není možné na server odeslat připojené soubory. Tento problém řeší AJAXové frameworky pomocí skrytého iframe, ve kterém je vygenerována stránka, která se serverem komunikuje standardní cestou a vrácené výsledky jsou pak dynamicky přenášeny do hlavní stránky. Použití AJAXu do jisté míry komplikuje ladění a objevování chyb. Kvůli nekorektnímu chování téměř všech prohlížečů je tento systém náchylný k chybám, které mohou být zaviněny třeba nerozpoznáním kódování při přenosu dat přes iframe a podobně. Při ladění je nutné často použít odposlech TCP komunikace a analyzovat výměnu HTTP paketů.
30
4.2 Uživatelské výhody AJAXové procházení stránek přináší uživateli komfort v podobě jistoty, že když klikne na hlasování v anketě, nezmizí mu zbytek obsahu stránky. Výhodou je také daleko rychlejší načtení změn na stránce.
4.3 Kapacitní výhody Z hlediska kapacit šetří AJAX na dvou frontách. Zaprvé snižuje objem přenesených dat mezi serverem a klientem, protože při procházení stránky jsou zasílány jen ty nejnutnější data. Velká část kódu, obsahující celou hlavičku dokumentu a všechny prvky stránky, které zůstávají mezi kliky stejné, leží mimo updatované blokové elementy. Například při hlasování v anketě nebo odeslání příspěvku v diskuzi je poměr ušetřeného přenosu zcela zásadní. Zadruhé umožňuje serveru generovat pouze nové prvky stránky a tím šetři serverové prostředky.
4.4 Podpora vyhledávačů a konflikty Spolehnout se na procházení webu pouze AJAXem by bylo pro komerční projekt likvidační, jelikož by byl opomenut vyhledávači. Webgarden proto do všech odkazů vkládá i standardní parametr href s cílovou URL. Vyhledávač nespouští metodu onclick ale navštěvuje URL v parametru href. Taková URL opět jednoznačně identifikuje cílovou stránku a Webgarden takovou stránku vygeneruje kompletně celou. Použití AJAXu sebou nese také některé problémy. Při procházení stránky není z bezpečnostních důvodů možné dynamicky měnit text v poli Adresa v internetovém prohlížeči. Návštěvník je kvůli tomu zbaven možnosti jednoduchým způsobem uložit nebo zkopírovat URL aktuálně zobrazené stránky. Nepříjemná je i dysfunkce navigačních tlačítek zpět, dopředu a obnovit. Při procházení stránek totiž z hlediska prohlížeče uživatel setrvává stále na jediné URL. Špatná funkce tlačítek zpět je však dnes díky rozšíření různých Flash prvků a dynamických stránek obvyklá. Na uspokojivějším řešení nadále pracujeme.
31
5 Webdesign 5.1 Původní verze Předchozí titulní stránka prošla již několika změnami. Poslední dva roky měla stránka dělat „živý“ dojem. Proto jsme na stránku umístili různé formy upoutávek na jednotlivé klientské stránky a jejich katalog, zajímavé statistiky a novinky systému. Titulní stránka tedy obsahovala všechno možné, ale neplnila dobře základní funkci - seznámení s funkcí služby a jednoznačné tlačítko k založení stránky. Navíc postupem času svoji „živost“ ztrácela a zastaralé novinky budily pocit zanedbanosti. Při tvorbě původní verze Webgarden jsme plánovali mnoho dalších sesterských projektů, které měly být prezentovány pod značkou Webgarden. Každý z nich měl být symbolizován svým logotypem a typickou barvou. Hlavní služba sítě - publikační systém byla nejprve oranžová, ale do budoucna jsme pro ni počítali s barvou žluto zelenou. Komunitní server Cafe.cz měl být sytě žlutý, poštovní klient mail.webgarden.cz nebesky modrý a služba správy uživatelského účtu tmavě červená. Volba barev respektovala především vzájemnou kompatibilitu barev a také pocitové působení na uživatele. Návštevník komunitního serveru by byl obklopen vřelou sytě-žlutou barvou vybízející k „akci“ a autor stránek publikačního systému by pracoval v uklidňujícím žlutozeleném prostředí. Při kontrole emailové komunikace bychom pocítili známé poštovní modré ladění a při vstupu do správy uživatelského účtu zase intimitu tmavě červené. Šablony vzhledů klientských stránek vznikaly neřízeně a tento fakt se projevil na jejich kvalitě. Trvalo relativně dlouhou dobu, než se nám podařilo vytvářet univerzální a kvalitní vzhledové šablony. Naše uživatelská základna tvořila weby, kterým dominovala přece jen spíše populární témata, která si žádala zcela jinou sadů vzhledů, než například politické glosáře. Těm bylo ale potřeba vyhovět také.
5.2 Rebranding Od koncepce oddělených služeb s vlastními logotypy na vlastních adresách jsme nakonec (a možná prozatím) ustoupili. Usoudili jsme, že pro úspěch služby v dnešní dravé konkurenci je důležité koncentrovat uživatele a proto jsme zvolili následující koncept. Všechny služby Webgardenu jsou vždy dostupné na kořenové adrese národní verze (např. http://www.webgarden.cz/). Horní okraj stránky obsahuje logotyp Webgarden a společné obslužné prvky jako např. přihlašovací okno, systém osobních zpráv nebo vyhledávací vstup. 32
Níže se nachází sada hlavních záložek, které představují hlavní služby Webgardenu. Nejsou však pojmenovány podle plánovaných názvů služeb (Zone, Cafe, Mail, Pass). Takové pojmenování je pro zbrklého uživatele internetu překážkou. Záložky jsou pojmenovány podle své funkce (nyní Mé stránky, Komunita). Každá z hlavních záložek má svoji reprezentační barvu (podle návrhu z předchozí kapitoly) a po výběru záložky se pod ní rozloží další sada záložek vybrané služby, vždy už v příslušné barvě. Titulní strana Webgarden byla podrobena analýze. Sepsali jsme sekvenci vjemů, které by měl nový návštěvník a naopak vracející se uživatel po shlédnutí titulní strany nabýt. Tomu byla podřízena vizuální výraznost jednotlivých prvků. Dominantní na stránce je velké tlačítko k založení stránek a krátký titulek seznamující s funkcí. Následuje tzv. slider, což je dynamický prvek, který zobrazuje na jediné ploše postupně několik různých informačních bloků. Ostatní prvky stránky už jsou odstupňovaně potlačené. Díky měření konverzí reklamních systémů jsem mohl srovnat úspěšnost staré a nové titulní strany z hlediska úspěšného založení stránek. Nová titulní strana přinesla 30% nárůst úspěšnosti založení stránek. Daleko důležitější pro nás bylo procento autorů stránek, kteří po založení vyzkoušeli vložit na web nějaký obsah. Takový pokus je v podstatě rozhodující, pouze v případě úspěchu je šance, že uživatel službu okamžitě neopustí. Procento těchto uživatelů se v nové verzi téměř zdvojnásobilo.
Obrázek 11: Návrhy logotypů jednotlivých služeb z dílny výtvarnice Kateřiny Čelikovské
33
Obrázek 12: Aktuální poboda logotypu. Autor: Kateřina Čelikovská
Obrázek 13: Finální podoba logotypů služeb. Autor: Kateřina Čelikovská
5.3 Přístupnost Pamatuji si jednu tiskovou konferenci, na které byla novinářům předvedena jedna konkurenční služba. Autoři atraktivní formou představili nablýskané uživatelské rozhraní s převratným způsobem editace obsahu. Když došlo na dotazy novinářů, k nemilému překvapení účinkujících se všechny točily kolem přístupnosti. Autoři neměli jinou možnost než přiznat, že systém „asi přístupný není“. Přístupnost stránek hodnotí možnosti zdravotně postižených uživatelů pracovat s nimi. Nejvíce se týká zrakově postižených. Problematika vzdáleně souvisí také s SEO, jelikož stránky optimalizované pro vyhledávače jsou z části aspektů přístupné. Samozřejmostí jsou 34
alternativní popisky u obrázků a vkládaných objektů. Mimo to je důležité dbát na kontrastní zobrazení popředí a pozadí a na možnost uživatelsky definovat velikost použitého písma. Těmito zásadami se při práci řídíme a snažíme se je v rámci možností uspokojit. Při tvorbě systému jsme spolupracovali se zrakově postiženým odborníkem na tuto tématiku.
35
6 Lokalizace 6.1 Systém lokalizací Nová verze Webgarden byla od počátku koncipovaná jako mezinárodní. Systém existuje v několika národních verzích (nyní ČR, USA, Španělsko, Rumunsko a Rakousko) a v několika jazykových lokalizacích (česky, anglicky, německy, španělsky a rumunsky). Národní verze má definovanou výchozí jazykovou lokalizaci, ale vždy jsou dostupné i ostatní jazyky. Každá národní verze má svoji kořenovou doménu (např. http://www.webgarden.ro/) a může mít v nabídce i další vedlejší domény (např. http://www.wgz.ro/). Pro správu jazykových lokalizací jsme vyvinuli vlastní systém, který spočívá v databázi textových klíčů, překladatelského rozhraní a implementaci v XSLT šablonách. Pokud administrátor vkládá do XSLT nový text, vloží jej pouze formou volání PHP funkce functionString() s parametrem unikátního klíče. Název klíče je obvykle složen z názvu aktuální šablony a dalšího identifikátoru. Při prvním zobrazení výstupu této šablony funkce functionString() nenalezne příslušný klíč v databázi a následně vytvoří v tabulce textů nový záznam. Tento klíč je pak označený v překladatelském nástroji jako „nepřeložený“. Po přeložení je záznam v databázi vyplněn a jazyková lokalizace zkompilována. Při dalším zobrazení je již klíč získán z kompilovaného textového výstupu překladače. Překladatelské rozhraní je opět vytvořeno jako webová stránka. Umožňuje vypsat všechny klíče, podmnožinu klíčů nebo konkrétní klíč. U výpisu lze zobrazit libovolné jazyky jako referenční a libovolné jako překládané. Je možné filtrovat podle fáze překladu klíče. Jazykovou verzi je možné nastavit odděleně stránkám i uživatelům. To dovoluje spravovat anglické stránky v českém rozhraní a podobně.
36
7 Hardware a výkon 7.1 Hardwareové vybavení 7.1.1 Telehouse a rack Od roku 2007 využíváme služeb společnosti SuperNetwork s.r.o. k zajištění konektivity a housingu serverů. Pro naše servery máme pronajatý rack v prostorách serverovny společnosti TTC Holding v Malešicích. Serverovna patří k těm nejmodernějším v republice, je vybavena klimatizováním z podlahy, moderním hasicím systémem a zabezpečením, nonstop dohledovým centrem s možností využití KVM konzolí19. Rack je 100cm a obsahuje 32U pozic20.
7.1.2 Servery V současné době je Webgarden provozován na více než deseti serverech. Jména serverů jsme volili podle osobností, které měly na úspěchu systému skromnou, ale nepopiratelnou zásluhu. Pojmenování vyvolává mezi četnými odborníky vyskytujícími se v serverovně pozdvižení.
19 Zařízení umožňující vzdálenou práci se serverem na úrovni klávesnice, monitor 20 U - jednotka užívaná pro vertikální rozměr serverů. 37
Jméno serveru
Funkce
Systém
Lorencz
Frontend pro původní 2x Dual Core AMD verzi (server Lighttpd, Opteron, 4GB ECC úložiště multimédií) RAM, 5x 750GB v RAID 5
Vlastní stavba
Tronicek
DB master pro původní verzi
Vlastní stavba
Bloch
DB slave pro původní Quad Core Intel, 8GB Dell verzi, DB master pro ECC RAM novou verzi
Richta
DB slave pro původní 2x Quad Core Intel, verzi 8GB ECC RAM
Supermicro
Kubr
PHP původní verze
Core 2 Duo, 4GB RAM
Vlastní stavba
Danecek
PHP původní verze
Core 2 Duo, 4GB RAM
Vlastní stavba
Genyk
PHP původní verze
Core 2 Duo, 4GB RAM
Vlastní stavba
Kacer
PHP původní verze
Core 2 Duo, 4GB RAM
Vlastní stavba
Fiser
Server obsluhující dodatečné skripty
Core 2 Duo, 4GB RAM
Fujitsu-Siemens
Backup
Zálohovací stroj původní verze
Core 2 Duo, cca 8TB Vlastní stavba diskové pole
Tvrdik
Frontend a PHP pro novou verzi
Quad Core Inter, 8GB Supermicro ECC RAM
2x Quad Core Intel, 8GB ECC RAM, 4x 750GB v RAID 0
Výrobce
Tabulka 5: Seznam serverů
Databázové servery jsou vždy vybaveny kvalitním SATA řadičem s vyrovnávací pamětí. Všechny servery mají nainstalován operační systém Debian.
7.2 Škálování systému 7.2.1 Řešení v původní verzí Při návrhu první verze systému jsme zdaleka nepočítali s tak masovým využitím. Původně byl celý systém provozován na jediném stroji. Později byla oddělěna databáze, PHP a webový frontend na oddělené servery. Postupem času rostla zátěž databáze, kteou jsme z 38
důvodu jejího rozsahu nebyli schopni přesunou na hotové řešení typu MySQL Cluster. Zvolili jsme tedy náhradní variantu spočívající v řetězovém spojení databázových serverů přes binární log. Bylo nutné ošetřit konzistenci databáze. Efektivita tohoto řešení ale s nárůstem počtu serverů klesá, jelikož šetří pouze čtecí operace. V původní verzi systému nebylo možné škálovat server s multimédii. Nárůst nároků na servery představoval závažný problém.
7.2.2 Média V nové verzi jsme dbali na škálovatelnost systému. Zcela odděleny jsou tzv. médiaservery, sloužící jako datová úložiště pro multimediální soubory. Pro skupinu klientských stránek je definován primární, sekundární a záložní server. Už v momentě uploadu je soubor umístěn rovnou na všechny tři servery. Při čtení souboru vybere systém libovolný ze serverů určených ke čtení. Počet a zatížení jednotlivých serverů je možné v případě nutnosti dále balancovat.
7.2.3 Databáze Nový návrh databáze počítá s možností oddělení některých částí databáze na samostatné servery. Například databáze statistik. Podmínkou návrhu bylo, že systém zůstane nadále kompaktní, bude používat globální uživatelská jména a všechny změny budou okamžitě platné v celém systému. Tato podmínka vylučuje použití některých technik ke snížení náročnosti systému.
39
Obrázek 14: Schéma organizace serverů v předchozí verzi
40
Obrázek 15: Schéma teoretické organizace serverů v nové verzi
7.3 Zálohování V původní verzi nebylo počítáno s tak velkými objemy dat jaké musíme zpracovávat dnes. Pro představu, v současnosti obsahuje Webgarden kolem 2TB dat. Nepříjemným faktem také je, že systém obsahuje obrovské množsví malých souborů a tím je manipulace dále zkomplikována. Vlastní zálohování jsme řešili až v průběhu pořízením zálohovacího serveru. Na tento server je každou noc kopírována rozdílová záloha všech serverů. Toto řešení je však nepraktické a dlouhodobě neudržitelné. V nové verzi je zálohování multimédií řešeno paralelním zápisem dat hned při uploadu na několik serverů. Každý server má navíc pevné disky v RAID 5 umožňujícím ztrátu jednoho disku. Databázové servery je potřeba nadále zálohovat pomocí binárního logu.
41
7.4 Cache Díky použití pohlédů dovoluje nový systém efektivní využití dočasného ukládání vygenerovaného HTML. V původní verzi docházelo k ukládání celé vygenerované stránky. Stačila tedy změna kdekoliv na stránce a došlo k vynucené invalidaci dočasného souboru. V nové verzi pokud vyprší (například z důvodu změny) platnost cache nějakého prvku na stránce, systém invaliduje pouze zasažený pohled a pohledy, do kterých je vnořený. Při zobrazení stránky je sice generována část HTML znovu, nezasažené prvky stránky jsou ale vkládány do HTML již z dočasné paměti. Tento postup je zvlášť efektivní v kombinaci s použitím AJAXu, kdy při mnoha kliknutí dochází pouze k vyhledání příslušného dočasného souboru.
42
8 Marketing a propagace 8.1 Monetizace Když jsme vytvářeli první verzi Webgardenu, bylo naším cílem vytvořit zajímavou službu k naší propagaci. Vše mělo být provozováno zcela zdarma. Později se ukázalo, že provoz Webgardenu se stal jediným objektem našeho úsilí a bylo nutné zajistit projekt po finanční stránce. Původní Webgarden měl vnitřní kreditní systém. Kreditem byli ohodnocováni uživatelé, jejichž stránky přilákaly čtenáře. Kredity bylo zpětně možné směnit za pokročilejší funkce systému. Brzy se ukázalo, že rozdělování kreditů nebylo dobře nastaveno. Mezi uživateli se kredit začal hromadit a ti jej brzy neměli za co „utratit“.
8.1.1 Vkládaná reklama Do klientských stránek provozovaných zdarma vkládá systém po určitém počtu návštěv reklamní prvky v podobě kontextových odkazů. Z počátku se opatření setkalo s nelibostí uživatelů, ale postupně se s ním sžili. Kontextová reklama má tu výhodu, že obsah inzerátu souvisí s obsahem zobrazené stránky. Míra prokliku a efektivita takové reklamy je zpravidla řádově vyšší než u klasické bannerové reklamy. Vkládaná reklama tvoří 95% příjmů systému.
8.1.2 Prémiové účty Prozatím minoritní část příjmů jsou placené prémiové účty a prodej doménových jmen. Byli jsme si vědomi faktu, že pro mnoho uživatelů je nepřijatelné strpět na stránkách vkládanou reklamu. Jiní uživatelé si zase na systém navykli natolik, že se dožadovali nějaké placené rozšířené verze. Proto jsme vytvořili několik úrovní placených prémiových tarifů. Většina tarifů je platná po dobu 180 dní. Tarify zvětšují dostupný datový prostor, zvyšují limit pro jednorázový upload, poskytují kvalitnější komprimaci videa atd. Každý tarif také obsahuje konečný počet volných návštěv. Jedná se o počet návštěv čtenářů stránky, kterým nebude zobrazena reklama. Pokud autor stránky trvá na zobrazování stránky bez reklamy, je tímto způsobem donucen zakoupit odpovídající tarif. Pokud by zakoupil příliš levný, volné návštěvy vyčerpá dříve než za 180 dní a reklama bude opět zapnuta. Pokud by prémiové tarify paušálně vypínaly na stránce reklamu, mohlo by se lehce stát, že nějaká velmi navštěvovaná stránka bude zahlcovat servery Webgardenu bez finančního přínosu. Mezi klientskými stránkami jsme měli některé s 40 000 zobrazeními denně.
43
8.2 Náklady na provoz Mezi majoritní náklady spojené s provozem Webgardenu patří mzdy, propagace, technické zázemí a konektivita. Mezi stálé zaměstnance či externisty patříme my autoři a tvůrci systému, správce serverů, výtvarnice, účetní a právnička. Neustálá produkce nových funkcí, nápadů a tvorba dalších služeb vyžaduje koncepčně pojatou tvorbu grafických prvků. Služba Webgarden poskytuje velmi snadnou možnost zdánlivě anonymní publikace na Internetu a je tedy vhodným nástrojem pachatelů trestné činnosti. Měsíčně řešíme desítky případů týkajících se porušování autorských práv, nelegálního šíření obsahu, pomluv, rasismu apod. Zároveň musíme chránit naše uživatele proti neoprávněným útokům. Z toho důvodu jsme nuceni spolupracovat s právničkou. Nákladnou službou je i samotný serverový housing. Vzhledem k tomu, že používáme více než 10 serverů, je pro nás výhodný pronájem celého serverového racku. V ceně pronájmu je i konektivita v rámci NIX21, naopak zahraniční konektivitu jsme nuceni nakupovat zvlášť. S provozem mezinárodní verze zahraniční traffic roste. Do Internetu jsme připojeni 10Gbps optickou linkou.
8.3 Propagace systému Přestože je Webgarden v ČR velmi populární, investujeme také do jeho propagace. Tu lze rozdělit na placenou PayPerClick (PPC) reklamu v sítích AdWords a Sklik a na rozesílání tiskových zpráv a další PR22 aktivity. Výhody PPC systémů spočívají v perfektně cíleném zásahu. Reklama je zobrazena uživatelům, kteří na internetových vyhledávačích hledají tématicky podobné klíče. Díky tomu je zobrazení reklamy velmi účinné.
21 Neutral Internet eXchange - vzájemné propojení tuzemských poskytovatelů počítačových sítí 22 Public Relations - aktivity spojené s propagaci na veřejnosti 44
9 Závěr Po drtivém úspěchu první verze jsme připravovali verzi novou a systém mezitím dva roky zastarával. Většina uživatelů sice zůstala Webgardenu věrná, ale s jistým zpožděním jsme zaznamenali také jejich odliv. Měřítkem pro úspěch obdobné služby je až sumarizovaná návštěvnost klientských stránek, ale k tomu aby byla velká musí být stránek velké množství a především musí mít kvalitní obsah. To znamená také nepříjemnou setrvačnost projevu změn do výsledků. U jiných služeb vylepšení přímo láká uživatele, kdežto u nás vylepšení lákají autory stránek a teprve při úspěšné tvorbě oni sami hledají čtenáře. Domníváme se, že novou verzí jsme dosáhli téměř ideálního publikačního systému. Zatím nemůže vyhovovat všem. Zbývá mnoho funkcí, které je potřeba doplnit nebo vylepšit. Systém by potřeboval i nějaké alternativní rozhraní, například zjednodušené nebo pro mobilní telefony. Čtenáři stránek mohou být zaskočeni AJAXovým ovládáním a nefungujícími navigačními tlačítky prohlížeče. I tento problém je potřeba nadále řešit. Společnost WEBGARDEN s.r.o., kterou jsme založili jako provozovatele systému, se těší přízni obchodních partnerů v oblasti internetové reklamy. Dlouhodobě spolupracujeme se slovenskou společností eTarget, českou Centrum Holdings s.r.o. a v poslední době také se společností Seznam a.s. V roce 2008 jsme založili s odborníky z oblasti internetu a internetové reklamy mediazastupitelství VISIBILITY s.r.o., které oficiálně zastupuje některé významné internetové projekty. Služba Webgarden je podle oficiálního internetového auditu NetMonitor.cz stále druhou nejnavštěvovanější službou svého druhu v ČR. Uživatelé nadále registrují vice než 500 nových webů denně. Přesto pozorujeme negativní trendy v návštěvnosti. Problém paradoxně nejsou konkurenční služby stejného ražení, ale služby, které odvádí od tvorby a návštěv drobných stránek čtenářovu pozornost. Nejsilnějšími konkurenty jsou proto dnes velmi populární komunitní sítě. Celkem registrovaných webů
407 000
Celkem registrovaných uživatelů
745 900
Denně zobrazeno stránek
vice než 700 000
Reálných uživatelů za měsíc
více než 1 300 000
Tabulka 6: Výsledky
45
46
Zdroje Wikipedia.org; Internetová encyklopedie; http://www.wikipedia.org The World Wide Web Consortium; Dokumentace; http://www.w3.org Archive.org; Internetový archiv; http://archive.org Sjednocená organizace nevidomých a slabozrakých; Internetová prezentace; http://www.sons.cz
Seznam tabulek Tabulka 1: Vyhodnocení uživatelských námětů..........................................................................4 Tabulka 2: Schéma sekcí webgarden.cz......................................................................................8 Tabulka 3: Ukázka nastavení pravidel pro redakci...................................................................14 Tabulka 4: Ukázky vzhledových šablon...................................................................................23 Tabulka 5: Seznam serverů.......................................................................................................37 Tabulka 6: Výsledky.................................................................................................................44
Seznam obrázků Obrázek 1: Titulní stránka z roku 2006.......................................................................................2 Obrázek 2: Titulní stránka 2007..................................................................................................2 Obrázek 3: Titulní stránka nové verze........................................................................................3 Obrázek 4: Ukázka organizace záložek......................................................................................8 Obrázek 5: Snímek vytvořeného magazínu..............................................................................14 Obrázek 6: Snímek seznamu uživatelských skupin..................................................................15 Obrázek 7: Snímek editace uživatelské skupiny Redakce Hobby............................................16 Obrázek 8: Statistiky návštěvnosti............................................................................................19 Obrázek 9: Statistiky technického vybavení návštěvníků.........................................................19 Obrázek 10: Ukázka klientské stránky......................................................................................22 Obrázek 11: Návrhy logotypů jednotlivých služeb z dílny výtvarnice Kateřiny Čelikovské...33 Obrázek 12: Aktuální poboda logotypu. Autor: Kateřina Čelikovská......................................34 Obrázek 13: Schéma organizace serverů v předchozí verzi......................................................39 Obrázek 14: Schéma teoretické organizace serverů v nové verzi.............................................40
Příloha - Grafické návrhy a vizualizace z průběhu tvorby
Obrázek 16: Logo plánovaného komunitního serveru Cafe.cz; Autor: Kateřina Čelikovská
Obrázek 17: Logo plánovaného komunitního serveru Cafe.cz; Autor: Kateřina Čelikovská
Obrázek 18: Jeden z návrhů loga služby Zone; Autor: Kateřina Čelikovská
Obrázek 19: Fiktivní vizualizace sídla společnosti; Autor: Martin Čelikovský
Obrázek 20: Fiktivní vizualizace reklamního neonu Zone; Autor: Martin Čelikovský
Obrázek 21: Nerealizované návrhy titulní strany; Autoři: Martin a Kateřina Čelikovští
Obsah přiloženého cd Na přiloženém cd jsou uloženy: ● ●
zdrojové kódy systému Webgarden soubor admin_usercomment.odt se sebranými uživatelskými náměty
Systém je ve funkční podobě k nalezení na internetové adrese http://www.webgarden.cz v české verzi.
