Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Vyšší odborná škola informačních služeb v Praze Elena Nilova Tvorba webové prezentace vhodné pro malou firmu. Bakalářská práce 2011
Prohlášení Prohlašuji, že jsem bakalářskou práci na téma Tvorba webové prezentace vhodné pro malou firmu zpracovala samostatně a použila pouze zdrojů, které cituji a uvádím v seznamu použité literatury. V Praze dne Elena Nilova
Abstrakt Ve své bakalářské práci se zabývám tvorbou webové prezentace vhodné pro malou firmu. Ke zpracování bakalářské práce jsem používala odbornou literaturu a internetové zdroje. Tato práce se skládá ze dvou částí teoretické a praktické. V teoretické časti porovnávám volně přístupné webhostingové služby (free) a softwary ( krabicová řešení ), které jsou vhodné pro tvorbu webových aplikaci. V praktické části vytvářím vlastní webovou prezentaci pro malou gastronomickou firmu Gourmet Partners, s.r.o.
Obsah 1. Úvod... 6 Teoretická část... 7 2. Význam webových stránek... 7 3. Základní principy tvorby webové prezentace... 9 3.1. Struktura webové stránky... 9 3.2. Pravidla a techniky použitelnosti...11 4. WEB 2.0... 12 4.1. WEB 2.0 s technologického hlediska... 15 4.2. WEB 2.0 a jeho vzhled... 17 5. SOA... 21 5.1. Architektura SOA... 21 5.2. WEB 2.0 a SOA... 22 6. Rešerše dostupných krabicových řešení vhodných pro vytvoření webových aplikací 24 Macromedia Dreamweaver nebo Adobe Dreamweaver... 24 KompoZer... 26 Microsoft Expression Web... 27 Shrnutí... 27 7. Rešerše dostupných webhostingových služeb zdarma vhodných pro vytvoření webových aplikací... 28 Na trhu je velké množství webhostingových služeb zdarma, ale jak vybrat ten správný? Na co se máme dat pozor při jeho výběru? Na tyhle otázky se pokusím odpovědět.... 28 7.1. Co to je free webhosting?... 28 7.2. Porovnání výkonu free webhostingu... 29 8. Popis vybraných řešení... 33 8.1. HTML... 33 8.2. CSS... 34 8.3. jquery... 35 Praktická část... 36 9. Společnost Gourmetpartners, s.r.o... 36 10. Grafický koncept... 38 11. Tvorba vlastní webové prezentace... 41 11.1. Vytvoření prázdného webu... 41 11.2. Vytvoření šablony DWT... 44 4
11.3. Hlavní a ostatní stránky webové prezentaci... 48 12. Závěr... 57 13. Zdroje a literatura... 58 14. Přílohy... 62 Příloha č. 1 - www.nissan.cz... 62 Příloha č. 3 www.refreshyourclub.cz... 64 Příloha č. 4 CSS layouty... 65 Příloha č. 5 Kód jquery - rotátor... 66 Příloha č. 6 Kód vkládaní mapy... 67 5
1. Úvod Od doby, kdy se objevily webové technologie, začíná počítače využívat stále více lidi. Stále se zvyšující počet lidí vyhledává informace na internetu, aniž by někam chodili, protože na jednom místě je shromážděno velké množství informací. Na internetu snadno nalezneme skoro vše, co potřebujeme, vyhledávání je snadné, rychlé a pohodlné. Poslední dobou roste tendence nákupu zboží přes internet, tím šetříme čas a peníze. Webová prezentace je v tomto prostředí vlastně marketingovým nástrojem. Ten se v dnešní době používá pro prezentaci firem na trhu a také k vyhlášení výběrových řízení. Cílem mé bakalářské práce je navrhnout a vytvořit webovou prezentaci pro společnost Gourmet Partners, s.r.o. Tato bakalářská práce se bude skládat ze dvou částí teoretické a praktické. V teoretické části bude popsán význam webové prezentace a základní principy tvorby webové prezentace, zmíním se o web2.0 a krabicových řešeních, podíváme se na volně přístupné webhostingové služby a jejich možnosti, které jsou k dispozici vývojářům. Budou popsány vybrané technologie, které budou dále použity pro tvorbu webové prezentace. V praktické části popíšu samotnou společnost Gourmet Partners, s.r.o., její požadavky na novou webovou prezentaci. Provedu analýzu staré webové stránky a vytvořím novou webovou prezentaci pomoci technologie HTML a CSS. Tato webová prezentace bude mít komerční charakter a to znamená, že informace, která se bude nacházet na těchto stránkách, musí byt snadno vyhledavatelná a snadno dostupná všem zájemcům. 6
Teoretická část 2. Význam webových stránek V dnešní době je webová prezentace populárním způsobem, jak informovat o firmě. Webová prezentace je marketingový nástroj, který láká návštěvníky. Pomocí webové prezentace představujeme firmu na trhu a v případech různých výběrových řízení. Je to vlastně vizitka představená interaktivní webovou stránkou, kde lze najit veškerou informaci, kterou firma chce sdělit návštěvníkům svých webových stránek. Webová stránka je jako nemovitost, rozdíl je jen v tom, že nemovitost lze koupit ihned a pronajmout, na webové stránce ale musíme nějakou dobu pracovat, aby začala vydělávat peníze. Komerční webové stránky lze rozdělit na informativní stránky, seznam zboží nebo služeb, e-shop, na promo-site. 1. Informativní stránky Stránky, které obsahují údaje o firmě, jsou nejvíce požadovány návštěvníky, čili potenciálními zákazníky. Tyto stránky z pravidla obsahují informace o firmě, ceník a kontaktní údaje. Výhodou takové stránky je: Šetření peněz na reklamu; Veškeré informace zákazník čili návštěvník najde na webové stránce; Pracovníci méně telefonují a odpovídají na otázky typu: kde se nacházíme, jak se k nám dostanete, jaké máme ceny atd.; Naši potenciální zákaznici mohou lehce najít veškeré potřebné informace o firmě, i když nevědí přesný název firmy, ale jenom druh zboží a adresu (okres); Informace je snadno obnovitelná a muže byt časem i doplněna. 7
2. Seznam zboží nebo služeb Tento způsob prezentace používá hodně firem, které mají vlastní webové stránky. Z pravidla katalog obsahuje podrobně popsané služby a druhy zboží, certifikáty a reference. Dost často je na těchto stránkách historie společnosti a její vize. Výhody: Nepotřebujeme tisknout katalog produktu na papír. Zde šetříme peníze na tisku a na šíření; Nejsme nijak omezení množstvím prezentovaných informací na stránce. Pro každý druh zboží lze přidat potřebnou informaci, kterou máme. Většinou to má význam pro vysoce technologické zboží, které vyžaduje doplňující údaje. Např.: http://www.nissan.cz/ [Příloha č. 1] 3. E-shop Velmi perspektivní a nejvíce používaná metoda vydělávání peněz na Internetu. Princip v podstatě spočívá v následujícím: vy objevíte na síti webovou stránku, na které je publikován katalog výrobků, pomocí něhož může zákazník objednat potřebné zboží. Existují virtuální elektronické obchody, ve kterých můžeme uplatnit i kreditní karty. Jsou virtuální obchody, v nichž platba vybraného produktu je prováděna přes bankovní účet nebo přes zadání údajů z platební karty. Výhody: Nemusíte vůbec otevírat kamenný obchod. V tomto případě funkci klasického kamenného obchodu plní webová stránka (e-shop). Náklady na výrobu a vytvoření obchodu jsou malé, zvláště oproti klasickému obchodu někde v centru města. Logicky vzato, můžete prodávat zboží po celém světě. Rozumí se tím organizace virtuálního obchodu úkol to není jednoduchý a vyžaduje profesionální přístup. Např.: www.czc.cz [Příloha č. 2] 4. Promo site Webová stránka na reklamní kampaň. Firma provádí reklamní akce, které jsou zveřejněny na internetu. 8
Výhody: Reklama, upoutaní pozornosti na danou firmu. Např.: http://www.refreshyourclub.cz/[příloha č. 3] 3. Základní principy tvorby webové prezentace Každá kniha či časopis jsou strukturované, mají svoji informační strukturu obsah. Umíme je použit při vyhledávaní. Podobný obsah by měla samozřejmě mít i webová prezentace. Jenom místo obsahu používáme navigační lištu. Dobře navržená informační architektura přináší: Snadnou orientací na webu. Snadné vyhledávaní informací. Snadnou údržbu. 3.1.Struktura webové stránky Jako jeden z uživatelů webu můžu konstatovat, že většina webových stránek, které navštěvuji při hledání zboží anebo jen ze zvědavosti, trpí špatnou strukturou navigace. To muže být nesystematické rozložení stránek nebo informace je nepřesná, nemá strukturu a někdy je obsah nepravdivý. Vzhledem k tomu, že už teď začínám pracovat na tvorbě webové stránky, předpokládám, že je správné uposlechnout rady zkušenějších kolegů z tohoto oboru, při tvorbě stránky je třeba nahlížet na všechno nejen jako tvůrce nebo jako programátor, nýbrž i jako budoucí uživatel, návštěvník, klient. Například, Motorola připravila strukturu svého prvního webu s ohledem na interní dělení společnosti na divize. Crumpacker usoudil, že je to srozumitelné jen pro pracovnice této společnosti, ale ne pro návštěvníky stránek. [1] Jak víme, webové stránky jsou tvořeny z jednotlivých částí, které pak chápeme jako jeden celek. Architektura stránek může mít různé modely, které představují různé cesty po stránkách. Dále představím jednotlivé možnosti. 9
Architektura webové stránky vše v jednom Obrázek 1 - Architektura webové stránky [2] Toto je nejjednodušší model webové stránky, který má jenom jednu stránku. Architektura webové stránky (lineární) Obrázek 2 - architektura webové stránky [2] Lineární model ukazuje architekturu, kde jsou všechny stránky chápany jako vrstevníci. Tento model se používá, když se webová stránka skládá z typických součástí, například: Home/O společnosti/ Služby/ Ceny/ Kontakty. Architektura webové stránky- index Obrázek 3 - Architektura webové stránky [2] Indexový model se v architektuře webu používá jako prototyp běžného adresáře, kde ukazatelem je abeceda. Ukazatel může obsahovat hodně položek. Zde je lepší využití vyhledávání, které porovná podobné stránky Přísná hierarchie Obrázek 4 - Architektura webové stránky [2] 10
Přísná hierarchie má jasný tok hlavních sekcí a podsekce. Například, sekce "Knihy", stejně jako sekce "Cinema", mohou mít seznam podsekcí v podobě seznamu žánrů. 3.2.Pravidla a techniky použitelnosti Navigace Navigace na všech stránkách by měla být stejná Na stránkách by mělo být logo a název V záhlaví a zápatí by měl být uveden kontakt Na každé stránce mělo by být menu první úrovně (nejlépe druhé) Stránka by měla mít název sekce Na každé stránce by mělo být napsáno, kde se nacházíme (vyznačení dané sekce v menu) Na stránce by, mělo být jasně vidět co je odkaz a co není Hlavní stránka Hlavní stránka musí vysvětlovat, co je to za web a proč byl vytvořen, většinou se používá motto Na této stránce by se měl nacházet obsah webu, například: výhodné nabídky, akce, poslední články, přehled služeb (autorizace, předplatné na rozesílání novinek). Aktualizace Text a jeho úprava Při psáni textu pro webovou stránku musíme používat dvě základní pravidla: Text musí být krátký Text musíme psát podle pravidla pyramidy, kde začínáme základní tezí a dále uvádíme fakta a pak to probíráme podrobněji. 11
4. WEB 2.0 O WEB2.0 mluví všichni a všude. Dneska na internetu jsou nabídky tvorba webových stránek ve stylu WEB 2.0. Ale co to přesně znamená? To ví málokdo. Za rok a půl se termín WEB 2.0 uchytil ve více než 9,5 miliónech odkazech na Google, ale doposud nebyla stanovena přesná definice tohoto pojmu. Dřivé termín WEB 2.0 byl vysvětlen na konkrétních příkladech. Tabulka 1 WEB1.0 a WEB2.0 [3] WEB 1.0 WEB 2.0 Ofoto Flickr Akamai BitTorrent Britannica Online Wikipedia Osobní stránky Blog Evite upcoming.org a EVDB Získání dat z HTML Web-servis CMS Wiki Tento seznam pořád narůstal. Ale proč je to takto rozděleno, proč je na jedné stráně uváděno WEB 1.0 a na druhé je WEB 2.0? WEB 2.0 nemá přesně stanovené hranice. Je to spíš souhrn pravidel, principů. Tabulka 2 Zásady WEB2.0 [4] WEB 2.0 Služby Jednoduchost Společenství Služby Web-komunity jsou základem pro novou fázi užívaní Webu a vývoje aplikací, proto je nutné vytvořit jednotný přístup k dané aplikaci. To znamená, že aplikace musejí přejit na model serveru, kde jeden sever bude obsluhovat všechny uživatele. Model společně užívaných serverů představuje jedinou platformu, která je zapotřebí pro efektivnost mechanizmu komunity. 12
Jednoduchost Můžeme si všimnout, že moderní webové aplikace nabízejí uživateli hodně informací a příjemnou práci s aplikacemi. S příchodem AJAXu hranice mezi tradičním klientem a web-aplikacemi mizí. Moderní webové aplikace umožňují plně funkční interaktivní práci s uživateli. Díky feed technologii se uživatelé mohou přihlašovat na syndikovaný obsah, který nabízí potřebnou, konkrétní informaci přes standardní technologii a protokoly. Feed předává informaci ve speciálním formátu, tím poskytuje pohodlí jejího využití a mixáže. Mechanizmy komunit V současné době máme k dispozici velké množství informací, které můžeme používat a upravovat. Například, Wikipedie dává všem zájemcům možnost pracovat na informacích. Má to své výhody a nevýhody. Například, Wikipedie umožňuje doplňovat informaci, ale na oplatku se zvětšuje objem dat. To znamená, že se setkáme s problémem ve vyhledávání informací. Tento problém se dodatečné řeší mechanizmem filtrace dané informace, který dává možnost uživateli označovat informace smysluplnými metadaty pro vyhledávání. Jako jeden z příkladů lze uvést stránku del.icio.us, která nabízí uživateli možnost ukládat a označovat tagy své záložky (bookmark) v interaktivním režimu. To znamená, že jiní uživatelé můžou vyhledávat v seznamu záložek podle tagu. Spolehlivost dat komunity Jako další problém je třeba uvést nutnost kontroly spolehlivosti dat poskytovaných komunitami. Komunita muže sama oceňovat informaci. Uživatelé mají možnost přidávat a editovat komentáře, které lze sloučit pro vytváření jednoho kolektivního pohledu na daný zdroj. Jako výsledek je Web, který umožní uživateli číst a zapisovat, čili editovat obsah. Stejný model se používá pro vytváření zpětné vazby mezi výrobcem a spotřebitelem. Například, systém oceňovaní zákazníků a prodavačů na ebay. Stejnou zpětnou vazbu lze použit i pro tvorbu softwaru. 13
Nyní se software může vytvářet ve spolupráci se skupinou uživatelů, což má za následek pravidelně aktualizovanou službu, která se bude neustálé zlepšovat. Vytvářeni komunit Sociální sítě se používají pro vyhledávání a kontrolování. Sociální sítě jsou efektivním prostředkem pro vyhledávání osob, které například mají stejné záliby. Tyto sítě dávají možnost lidem, kteří spolu studovali, nebo studují, pracovali nebo pracují využívat zdroje internetu, komunikovat a spolupracovat na svém webovém prostoru. Uživatelé mohou přidávat a zvát jiné uživatele a tím zvyšovat hodnotu sociální sítě. Zde je dost velký rozdíl od koncepce WEB 1.0, které byly zaměřeny na sloučení počítačů a ne lidí. Licence WEB 1.0 se zaměřuje na aplikace, které jsou nainstalovány na počítač. Platí zde princip licence All rights reserved. U WEB2.0 je vítána integrace s jinými technologiemi, obsahem a aplikacemi, princip Some rights reserved. Tyto aspekty jsou použity na takových stránkách jako Digg, YouTube, Facebook, Vkontakte. Digg mechanizmy komunity jsou použity pro přidání, třídění a komentovaní informaci. YouTube dává nám možnost označovat tagy media souborů tak, aby se je dalo snadno vyhledat. Facebook a Vkontakte dává možnost vytvářet sociální síť a spolupracovat. O Reilly definoval WEB 2.0 jako WEB 2.0 čím více lidi využívá tento systém, a spolupracuje s ním, tím lepší je tento systém. Zvláštností WEB 2.0 je princip získání uživatelů k naplnění a adjustaci obsahu. [5] Takže můžeme říct, že WEB 2.0 používá síť jako platformu. Ale lepší bude říct: WEB 2.0 - internet-služby, které jsou postaveny na principu kolektivizace, sledování informačního toku, otevřenosti, existenci plnohodnotných uživatelských rozhraní. Každý může na webových stránkách novou informací editovat to je WEB 2.0. Pokud všechny tyto prameny informací muže sloučit do jediného pramenu opět to je WEB 2.0. Pokud webová stránka dovoluje nám nejen zadávat dotazy a čekat na odpověď, ale i 14
spolupracovat s ní, jako s obyčejným programem je to WEB 2.0. Příklady takových služeb jsou Google, Gmail. Pokud pro třídění a uspořádání informaci na stránkách se používá nejenom zastaralá struktura vnořených složek, ale i tagy klíčová slova je to WEB 2.0. Možnost používat internet jako počítač (pracovat s dokumenty, aniž bychom měli na to nějaký SW, uchovávat data na virtuálním disku atd.) je to WEB 2.0. Kvůli všem těmto předpokladům, vypadá WEB 2.0 srozumitelně a sympaticky. 4.1.WEB 2.0 s technologického hlediska AJAX cesta k vybudování interaktivních uživatelských rozhrání webové aplikace. Při používaní AJAX se webová stránka neobnovuje celá při každém kliknutí uživatele. Tohle nám umožňuje vytvořit přátelštější rozhraní. Volně přístupné veřejnosti webové služby API (Application Programming Interface) sada nástrojů funkcí, které programátor může použit pro funkčnost jiných programů, modulu, knihoven. Otevřenost API dovoluje vytvářet smíšené (mash-up) hybridní služby, které dávají uživatelům dodatečné možnosti. RSS současná publikace stejného materiálu na různých webových stránkách. Používají se webové kanály, které se jmenují RSS kanály, obsahující záhlaví materiálů (zprávy) a odkazy na ni. Technologie AJAX AJAX (AsynchronousJavaScript And XML) není technologie, je to pojem, který zahrnuje několik technologií dohromady: XML, JavaScript, HTML and CSS a JOSON 1. JavaScript pomocí něho probíhá asynchronní zasílání dat. Nesmíme zapomenout, že se pro spojení se serverem používá speciální komponenta, každý prohlížeč může mít svoji vlastní, ale tato spolupráce je možná i bez speciální komponenty. 2. XML data ze serveru jdou v tomto formátu, přeměňují se a vizualizují se pomoci Document Object Model (DOM). 3. HTML and CSS vztah mezi HTML, CSS a AJAXEM je nepřímý. HTML slouží pro tvorbu logické struktury webové stránky a CSS určuje styl této stránky. 15
4. JSON (JavaScript Object Notation) textový formát pro výměnu dat, který je založen na JavaScript, používá se s JS. Klasický model web-aplikace Uživatel přijde na stránku a klikne na nějaký element. Prohlížeč odesílá dotaz na server Jako odpověď je vygenerována nová stránka, která je odeslána zpět uživateli. Obrázek 5 - klasický model webové aplikace Model AJAX Uživatel přijde na stránku a klikne na nějaký element. Prohlížeč odesílá dotaz na server Server zpracuje jenom potřebnou část a odešle ji zpět 16
Obrázek 6 - model AJAX Technologie Mash-up Mash-up nebo mixáž je nástroj, který spojuje několik zdrojů dat do jednoho. Obsah mash-up může být získán přes API, veřejné rozhrání, přes různé protokoly. Architektura mash-up se skládá ze tří částí. Poskytovatel obsahu to je zdroj dat. Data jsou přístupná přes API, RSS, REST a web-servery. Mash- up stránky jsou to webové aplikace, které nabízejí nové služby a používají přitom data, která jim nepatří. Prohlížeč uživatele uživatelské rozhraní mash-up. [6] RSS RSS je rodina XML formátů určených pro čtení novinek na webových stránkách a obecněji syndikaci obsahu. [7] RSS (Really Simple Syndication) velmi jednoduchý způsob jak získávat informace. 4.2.WEB 2.0 a jeho vzhled Vzhled WEB 2.0 Kulaté rohy, gradient barvy, dobře čitelné fonty, tlačítka, u obrázků efekt zrcadla, rozvržení stránky na 1-2 sloupce všechno to spadá pod standarty WEB 2.0. 17
WEB 2.0 je pohodlný pro uživatele, což znamená, že stránka WEB 2.0 musí být příjemná pro uživatele, její obsah musí být užitečný. Jednoduchost je nejlepší WEB 2.0 jednoduchý design. Ale jednoduchý vzhled WEB 2.0 neznamená, že tam budou chybět nějaké elementy. Jednoduchost zde má jiný význam, jednoduchost znamená minimum použitých prostředků pro dosažení cíle. Proč jednoduchost? Pozornost návštěvníka má své hranice, lidské oko není schopno všimnout si úplně všeho, co se na stránce nachází. Každá stránka musí mít konkrétní cíl, kterého si musí návštěvník ihned všimnout. Zde jsem uvedla dva příklady pro porovnání. Obrázek 7 - design web2.0 [8] 18
Obrázek 8 design web1.0 webová stránka s referáty[9] Návštěvník nerad čte informaci, kterou nepotřebuje. Na stránkách by neměly být elementy, které odvádějí pozornost návštěvníka od hlavních informací. Hodně není vždy dobře. Dvousloupcové a jednosloupcové stránky Do WEB2.0 byly populární stránky se třemi sloupci. Na těchto stránkách levý sloupec obsahoval navigaci, centrální sloupec měl obsah a pravý sloupec reklamu a nějakou doplňující informaci. WEB 2.0 je to styl, kde mizí všechny zbytečné věci. Obrázek 9 - Jednosloupcová stránka [10] 19
Dobře čitelné fonty Díky textu můžeme komunikovat s uživateli, na kvalitě textu bude záležet efektivnost komunikace. Ještě pořád se dá na internetu najít webové stránky, kde přečíst odstavec je dost obtížné. Obrázek 10 - špatný font, barva pozadí Texty musejí být čitelné, pokud chceme něco zdůraznit, tak to zdůrazníme o něco větším písmem. Tím pádem je to pak snadno čitelné a pohodlné pro naše oči. Nemusíme se u toho pak namáhat. Obrázek 11 - ukazuje zvýraznění písmem [11] V dnešní době hodně webových stránek má design ve stylu WEB 2.0 a postupně mizí webové stránky se vzhledem WEB 1.0. 20
5. SOA SOA (Service Oriented Architecture). Tato technologie patří mezí perspektivní a nejvíce efektivní způsoby jak budovat informační systémy. SOA budí pozornost vývojářů po celém světě, vyplývá to z údajů od Google Trends. Obrázek 12 - Google Trends - dynamika dotazu SOA [12] Velké IT společnosti dávají peníze na výzkumy v této oblasti a na zavádění SOA do technologických a podnikových procesů. Aby tato technologie byla efektivní v užívání servisně orientované architektuře, je zapotřebí vědět jak funguje tento systém. 5.1. Architektura SOA Architektura SOA přistup k vývoji aplikace pro řízení podniku, který předpokládá rozdělení procesů programu na jednotlivé služby, které jsou dále zpracovávány do sítě, která zajišťuje jejích vyhledávání a poskytování. Každá z těchto služeb/modulů má svojí funkci, tyto funkce pak mohou být přizpůsobeny podle potřeb podniku. Tím pádem SOA pomáhá odstranit takový problém při vývoji aplikace pro podnikové účely, jako nedostatek flexibility a slabá místa. Architektura SOA může usnadnit integraci různých softwarových prostředků, se kterými se pořád setkáváme v podnicích. Tato architektura usnadňuje spolupráci a užíváni informací uvnitř podniku či s partnery a tím zvyšuje úroveň spolupráce. Zároveň zvyšuje efektivitu podniku. 21
Díky SOA nastavuje společnost své procesy, aniž by musela zasahovat do zdrojových kódů programu. Tím snižuje náročnost ladění procesů. Až bude probíhat další obnovování softwaru, bude tento proces lehčí, než v případě integrace programu za účelem nastavení. Další výhodou architektury SOA je optimalizace procesů, což zvyšuje flexibilitu řízení podniku. Tato architektura zvyšuje úroveň vizualizace procesů, což umožňuje provádět ladění a optimalizaci v souladu s rostoucími potřebami zákazníků (snižuje se doba čekání, kvalita a spolehlivost přitom zůstávají na stejné úrovni). 5.2. WEB 2.0 a SOA V současné době roste tendence propojení WEB 2.0 a SOA pro realizaci různých úkolů, procesů, které jsou spravovány obyčejnými programy. Řešení spojit SOA a WEB 2.0 je levnější, rychlejší a flexibilní. Jako příklad může sloužit řešení od Dana Cahoon. Dan Cahoon je vývojář softwarové architektury. Měl za úkol vyřešit problém externích zaměstnanců ve správcovské firmě H & R Block. Nechtěl použít tradiční aplikace, a proto dodal do více než 12000 místních poboček podniku Ajax portlety, které jsou propojeny se SOA. [35] V současné době je hodně webových aplikací, které jsou napsány v AJAXu, což zvětšuje jejich popularitu a popularitu RIA (Rich Interface Application), mash-up, RSS, REST (Representational State Transfer) a jiných segmentů ve WEB 2.0.Technologie WEB 2.0 pomáhají vytvářet vícefunkční (rich) uživatelská rozhraní pro servery SOAsystémů. Ronald Schmelzer analytik ze společnosti ZapThink říká: Mash-up doplňuje SOA. V současné době tato technologie (mash up) hrají hlavní roli při tvorbě architektury SOA. [13] Podle Dana Cahoona se WEB 2.0 používá ve více směrech, ale většinou převážně ve dvou směrech sociálním a technickém. Z toho lze odvodit, proč vlastně musíme sloučit WEB 2.0 a SOA. Hlavní důvody proč sloučit WEB 2.0 a SOA Sociální 22
Šíření WEB 2.0 pro domácnosti Síťové hry Komunikace a spolupráce Sociální sítě Technologické REST AJAX Dynamické jazyky RSS Blogy Wiki Web servisy Byznys zvyšuje se otevřenost síťových kanálu popularita SW jako servisu architektura SOA Technické komercializace koncepce WEB 2.0 příjmy z reklamy marketing pomocí sociálních sítí inovace vysoká cena moderních IT trendů Jako příklad využití WEB 2.0 a SOA muže být společnost Inkriti, která předělávala stránky Bostonského sportovního klubu. Sportovní klub chtěl vylepšit spolupráci s 30 tis. 23
zákazníky a fanoušky. Nyní tento klub LA vyměňuje data s CRM systémem za pomocí WEB serverů. [35] 6. Rešerše dostupných krabicových řešení vhodných pro vytvoření webových aplikací V současné době je trh nasycen takovými editory jako WYSIWG, což znamená What You See Is What You Get neboli Co vidíš, to dostaneš. Chtěla bych tuto kategorie editoru, rozdělit na dvě skupiny: 1. Editory, které nám ulehčí práci s tvorbou HTML a CSS (jedna se jen o webové prezentace) 2. Editory, které nám ulehčí práci nejenom s tvorbou HTML a CSS, ale i s PHP, ASP, ASP.NET. V této kapitole se zabývám druhou skupinou těchto editoru. Vybrala jsem tři softwary: Macromedia/Adobe Dreamweaver 8, KompoZer, Microsoft Expression Web. Macromedia Dreamweaver nebo Adobe Dreamweaver Dreamweaver editor pro tvorbu webových stránek, je vhodný jak pro vývojáře, tak pro začátečníky. Pomocí něj lze navrhovat nebo upravovat webové stránky čili aplikace. K dispozici je velké množství nástrojů, které usnadňují práci se zdrojovým kódem, tento program plně podporuje a usnadňují práci s CSS, XML a XSLT. Dreamweaver usnadňuje tvorbu webových aplikace, jsou podporovány takové technologie, jako PHP, ASP, ASP.NET, Cold Fusion, JSP. Dreamweaver se díky tomu zbavil nálepky WYSIWYG editoru pro uživatele, kteří hledají nástroj, v němž bude tvorba stránky podobná psaní dokumentu ve Wordu. [18] K dispozici je taky velké množství šablon layoutu. Vizuálně následující obrázek: 24
Obrázek 13 - šablony v Macromedia Dreamweaver Tento SW nabízí příjemné vizuální prostředí pro tvorbu webových stránek. Lze zobrazit webovou stránku na bázi CSS a zároveň ji upravovat. I přesto, že pracujeme s vizuálním prostředím, lze se snadno přepnout na zdrojový kód a nadále pracovat s ním. Obrázek 14 - přepínaní na zdrojový kód z vizuálního prostředí v Dreamweaver Nebo pracovat jak v kódu, tak ve vizuálním prostředí zároveň, pomocí funkce SPLIT. Ve vizuálním prostředí jsou horizontální a vertikální vodítka, což umožňuje snadno umísťovat obrázky, tabulky a jiné prvky na stránce. V tomto programu je práce se zdrojovým kódem mnohem snadnější. Už není třeba psát cely kód ručně, stačí jenom naznačit, co chceme napsat, a tento šikovný program nabídne možnosti, ze kterých si můžeme vybrat. Vizuálně následující obrázek: 25
Obrázek 15 - automatické doplňovaní kódu Dreamweaver disponuje integrovanou sadou grafických nástrojů, takže základní úpravy grafiky lze udělat ihned a bez nutnosti specializovaného grafického programu. [19] KompoZer Tento program patři ke kategorie open-source. Je zcela zdarma, a protože je zdarma, bude mít i své nedostatky oproti placeným verzím. Práce s tímto editorem je sice snadná, lze pracovat jak se zdrojovým kódem, tak ve vizuálním prostředí, chybí zde ale funkce pro doplňování jednotlivých tagů, která je u placených verzi. KompoZer je kompatibilní se všemi platformy. Jsou verze pro Linux, Microsoft Windows, Mac. V porovnání s uvedenými zde programy pracuje tento editor jenom s PHP. Vizuálně následující obrázek. Obrázek 16 - vkládání PHP kódu, KompoZer 26
KompoZer je vhodný pro tvorbu malých projektů pro uživatele, které mají základní znalosti HTML, ale je to velmi slabý program pro profesionální vývojáře. Microsoft Expression Web Je to skvělý editor pro tvorbu webových stránek, spolu se SuperPreview nabízí tento program skvělé možnosti. Pomocí SuperPreview se lze podívat, jak námi vytvořena stránka bude vypadat v různých prohlížečích. Vizuálně obrázek číslo 17. Obrázek 17 - SuperPreview Microsoft Expression Web podporuje PHP, JavaScript, ASP.NET, ASP.NET AJAX, Silverlight, je také integrován s Microsoft Visual Studio. Tento program může soupeřit s Adobe Dreamweaver. Podporuje stejné rozhraní jako dříve zmíněny program od společnosti Adobe, tvorbu webových stránek ve vizuálním rozhraní a také práci s kódem. Pokud se stránka vytváří ve vizuálním rozhraní, tak nemusíme mít strach, že tento kód nebude validní. Stránky vytvořené v tomto programu plně dodržují moderní standardy W3C, jako jsou XHTML, CSS,XML a XSLT. [20] Expression Web nabízí široký výběr šablon layoutu. Stejně jako Adobe Dreamweaver, má tento program funkci automatického doplňovaní jednotlivých tagů. Shrnutí 1. Macromedia/Adobe Dreamweaver Profesionální editor, který je vhodný pro začátečníky i profesionální vývojáře. Podporuje PHP, ASP, ASP.NET, Cold Fusion, JSP. 27
Cena: 8449 Kč,- [21] Platformy: MAC, Windows [21] 2. KompoZer Volně šiřitelný program, požaduje základní znalosti HTML. Podporuje pouze PHP. Cena: zdarma Platformy: Linux, MAC, Windows 3. Microsoft Expression Web Profesionální editor, který je vhodný pro začátečníky i profesionální vývojáře. Podporuje JavaScript, ASP.NET, ASP.NET AJAX, Silverlight. Cena: 4224 Kč,- [22], prodává se pouze jako krabicové řešení Microsoft Expression Studio Platformy: Windows 7. Rešerše dostupných webhostingových služeb zdarma vhodných pro vytvoření webových aplikací Na trhu je velké množství webhostingových služeb zdarma, ale jak vybrat ten správný? Na co se máme dat pozor při jeho výběru? Na tyhle otázky se pokusím odpovědět. 7.1.Co to je free webhosting? Free webhosting je to služba, která umožní uživateli umísťovat webové stránky nebo jinou informací (texty, video, obrázky) na serveru. [14] Tato definice zni skvělé a lákavě, ale free webhosting má svá omezení, protože za vše, co používáme, musíme platit. Otázkou jenom je, jak budeme platit za služby free webhostingu? Omezení Možnosti free webhostingu jsou omezeny oproti normální placené verze hostingu, proto se tento způsob nejvíce hodí pro domácí a nekomerční využití. 28
Omezená kapacita disku Omezený objem souborů Omezení na informace, které chceme zveřejnit. Informace, která bude zveřejněna, musí být v souladu se zákonem Doména 3. řádu Na webových stránkách, které jsou umístěny na free webhostingu bude reklama, které je platbou za užívání této služby. Tato reklama muže být jako banner nebo lišta, které budou umístěny na webové stránce. 7.2.Porovnání výkonu free webhostingu Pro porovnání jsem vybrala následující hostingy: Endora.cz Internet Centrum Webzdarma.cz Php5.cz ASP2.cz Všechny hostingy byly vybraný na základě průzkumu stránek http://www.hostingy.cz/hosting-zdarma.html Doména Domény třetího řádu nejsou přitažlivý, jeden z důvodu je ten, že za ni neplatíme. Například foxylenan.php5.cz, foxylenan je doménou třetího řádu, která patří do domény druhého řádu php5, která patří do domény prvního řádu cz. 29
Tabulka 3 - přehled domén free webhostingů 3. řády endora.cz 1 Internet Centrum 2 webzdarma.cz 3 php5.cz 4 g6.cz okamzite.eu borec.cz hys.cz e-blog.cz czechian.net tode.cz tym.cz czweb.cz 4fan.cz ic.cz chytrak.cz cekuj.net chytry.cz kvalitne.cz comehere.cz clanhost.cz mysteria.cz mzf.cz howto.cz nazory.cz bluefile.cz phorum.cz prodejce.cz jecool.net ezin.cz unas.cz funsite.cz tym.sk vyrobce.cz 6f.sk byl.cz webz.cz webpark.cz webzdarma.cz yc.cz web2001.cz own.cz wz.cz hu.cz xf.cz over.cz euweb.cz hustej.net zaridi.to kx.cz vyjimecny.cz yw.sk wu.cz clanweb.cz webovka.eu Největší výběr domén nám nabízí Internet Centrum. Nabízený webový prostor php5.cz Na obyčejnou webovou prezentaci bude stačit i 50 MB. Pokud webová stránka bude obsahovat programy, které jsou ke stažení, tak samozřejmě 50 MB bude nedostačující kapacitou. Na druhou stranu větší kapacita prostoru neznamená jenom velký prostor pro webovou prezentaci či aplikace, ale souvisí s tím také traffic. Je dost typické, že free webhosting má omezený maximální povolený přenos dat za určité období. V případě, že tato hodnota bude překročená, bude účtován poplatek za překročení 1 Free webhosting Endora [online]. 2011 [cit. 2011-05-22]. Dostupné z WWW: <https://www.endora.cz//> 2 Internet centrum, webhosting zdarma [online]. 2011 [cit. 2011-05-22]. Dostupné z WWW: <http://www.ic.cz/> 3 Webzdarma.cz [online]. 2011 [cit. 2011-05-22]. Dostupné z WWW: <http://www.webzdarma.cz/> 4 Php5 - free webhosting PHP [online]. 2011 [cit. 2011-05-22]. Dostupné z WWW: <http://www.php5.cz/> 30
tohoto limitu. Řešení, která jsem vybrala, mají traffic bez limitu, až na free webhosting Endora, vizuálně následující tabulka. Reklama Tabulka 4 - přehled nabízeného prostoru u free webhostingu Endora 1 Internet Centrum 2 webzdarma.cz 3 php5.cz 4 Dostupná kapacita 2 GB 250 MB 200 MB 20 MB Traffic 5 GB bez limitu bez limitu bez limitu Jak již bylo řečeno free webhosting není zadarmo. Reklama je platbou za poskytnuté služby. Ve smluvních podmínkách je uvedeno, jak má vypadat reklama, zda bude ve formě lišty nebo banneru, zda bude vložena automaticky nebo musíme ji vložit ručně. Endora Vyžaduje reklamní patu, která má být umístěna na všech stránkách. Pata musí být na první pohled čitelná a dostatečně kontrastní. Musí navazovat na obsah. [15] webzdarma.cz Zde si můžeme vybrat mezi bannerem a lištou. V případě, že vložíme banner nahoru, musí být jenom na hlavní stránce, v ostatních případech dolů a na každou stránku. Reklamní lišta se vkládá nahoru na všechny stránky. Internet Centrum Reklamní lištu musíme vložit na každou stránku, tato lišta se vkládá automatické u horního okraje prohlížeče. Php5.cz Nemusíme dávat na stránky ani reklamní lištu, ani banner. Tento free webhosting byl založen pro podporu programátorů a ne za účelem vydělat. Zde jednoznačně vyhrává php5.cz. 31
MySQL a PHP Mnou vybrané free web hostingy nabízejí následující verze PHP, MySQL a phpmyadmin. Endora 1 Tabulka 5 - porovnání PHP a MySQL verze internet centrum 2 webzdarma.cz 3 php5.cz 4 PHP verze 5.3.6 verze 5.2.6 verze 4.3.4 verze 5.3.3 MySQL verze 5.1.56 verze 5.0.92 verze 5.0.67 verze 5.1.53 počet BD není omezeno 1 1 1 phpmyadmin verze3.3.7 2.11.8.1deb5+lenny8 2.6.0-pl3 3.3.2 Hodnocení E-mail 1. Endora 2. Php5.cz 3. Internet Centrum 4. Webzdfarma.cz Endora* 1 Tabulka 6 - služba e-mail na free webhostingu Internet Centrum 2 webzdarma.cz 3 php5.cz 4 E-mail není ano ano není Počet - 1 1 - *Endora nabízí možnost přeposílaní pošty, která přijde na doménu. Dostupnost Dostupnost znamená, kolik času bude váš web online čili dostupný.[16] Endora - 99,880%[16] Internet Centrum - 99,502%[16] Webzdarma.cz - 99,268%[16] Php5.cz - 99,974%[16] 32
Podle mého názoru je jednoznačným vítězem Endora, má nejnovější technologie, není omezen počet databází, skvělá dostupnost, velká kapacita disku. Free webhostingy jsou většinou využívaný pro vyzkoušení a tvorbu webových prezentací a webových aplikací. Firma, která uvažuje o webové stránce, si musí pořídit doménu druhého řádu, aby vypadala reprezentativně na trhu. 8. Popis vybraných řešení V této kapitole jsem popsala mnou vybrané technologie, které budu používat ve své praktické části. Vybrané technologie jsem poznala z odborné literatury a odborných internetových článků. Všechny tyto technologie jsem se zájmem prostudovala a chtěla bych se podělit o své znalosti v této bakalářské práce. 8.1.HTML Hyper Text Markup Language neboli HTML značkovací jazyk. Většina webových stránek jsou napsány pomocí HTML. Tento skriptovací jazyk byl vyvinut britským vědcem Timem Berners-Lee v roce 1990. HTML je vyvinut z univerzálního značkovacího jazyku SGML. V současné době se používá verze 4.01, ale také se už můžeme setkat s verzí HTML 5.0. Webová prezentace, která byla vytvořena pro společnost Gourmet Partners, s.r.o. je napsána v HTML 4.01. Tato verze je podporována všemi prohlížeči. HTML dokument má přesně definovanou strukturu. <!DOCTIPE je direktivou, která definuje dokument. Značky <html> a</html> představují kořenový element, bez kterého se nelze obejít. Pak následuje hlavička, která se nachází ve značkách <head></head>. Tato hlavička má uvnitř důležité informace (název stránky, v ní můžou být definovány styly, klíčová slova atd.). Obsah stránky se zapisuje do elementu <body>, tento element je povinný. Kód HTML stránky vypadá následně: <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metacontent="text/html; charset=utf-8"http-equiv="content-type" /> <title>untitled 1</title> </head><body></body></html> 33
8.2.CSS Cascading Style Sheets neboli kaskádové styly. Je to jazyk, pomocí kterého můžeme měnit vzhled dokumentu napsaného pomocí značkovacího jazyka. Tento jazyk používají vývojáři webových stránek. Pomocí něj můžeme měnit barvy, fonty, pozice tabulek, obrázku atd. Hlavním cílem CSS je rozdělit logickou strukturu stránky od návrhu vzhledu CSS (stylu). Toto rozdělení pomáhá zvětšit přístupnost tohoto dokumentu, nabízí větší flexibilitu a možnost kontroly vzhledu webových stránek. CSS styly lze připojit několika způsoby. Mohou byt umístěny do samostatného souboru, nebo mohou byt připojeny ke hlavičce HTML stránky. Způsob první: CSS styly jsou v samostatném souboru, mohou byt připojeny pomoci tagu <link>, tento tag se nachází v dokumentu HTML mezi tagy<head> a </head> <link rel="stylesheet"type="text/css"href="style.css"> Způsob druhy: CSS styly jsou v samostatném souboru, lze je připojit k web dokumentu pomoci direktivy @import, která bude umístěna mezi tagy<style> a </style> <style type="text/css"media="all"> @import url(style.css);</style> Třetí způsob: CSS připojený ke hlavičce HTML souboru, může se nacházet mezi tagy <style> a</style> uvnitř tagu<head>a</head> <styletype="text/css"> body { color: red; </style> Čtvrtý způsob: CSS se může nacházet uvnitř tagu v těle tohoto HTML dokumentu. <p style="font-size: 18px; color: green;">text</p> Kaskádové styly nám dávají rozšířené možnosti formátovaní. S nimi jsme schopni měnit vzhled stránky tak, jak budeme chtít. V CSS můžeme předem definovat, jak se bude zobrazovat stránka na určitém zařízení, například na PDA, počítači, mobilním telefonu atd. Nyní nám prohlížeči (podporující uživatelské styly) dávají možnost nastavovat vzhled stránky podle vlastní představy, například můžeme změnit barvu navštívených odkazů. 34
Mezi tolika výhodami lze najit i nevýhody CSS. Občas není vůbec jednoduché napsat kód tak, aby se ve všech prohlížečích webová stránka zobrazovala stejně. CSS nemají dostatečnou podporu u některých prohlížečů. I přes všechny své nevýhody, CSS byl, je a bude populární mezi programátory, protože tento nástroj umožňuje snadnou práci se styly webových stránek. 8.3.jQuery jquery je knihovnou JavaScript, tato knihovna klade důraz na interakci mezi HTML a JavaScript. Hlavním problémem JavaScriptje to, že kód, který je napsán v tomto jazyce v různých prohlížečích, je zpracován jinak, než by měl. Tenhle problém jquery vyřešil, tato knihovna nabízí sadu funkcí, které jsou funkční ve všech prohlížečích. Tato knihovna vznikla v lednu v roce 2006. jquery má dobře zpracovanou dokumentací, hodně příkladů a plug-iny. Pomocí této knihovny máme snadný přístup k jakémukoliv elementu DOM. Díky své intuitivní syntaxi, která je podobná syntaxi CSS1 a CSS2, je práce s jquery snadná. Obrázek 18 - základy jquery 35
Praktická část 9. Společnost Gourmetpartners, s.r.o Společnost Gourmet partners, s.r.o je malá společnost se sídlem v Praze, která se zabývá dovozem potravin z Francie, Itálie, Španělska a Ruska. Společnost vznikla jako firma nabízející exkluzivní potraviny velkoobchodním odběratelům (restaurace, obchody, vinárny). Zaměřuje se na potraviny bez koncentrátu a emulgátorů. Jako první vznikla společnost Avangor s.r.o. s brandem La Chinata ze Španělska, který se prodával a prodává pod značkou OLIVES v ČR. Pak společnost Vertus s.r.o. s brandem Tzar Caviar z Ruska a brandem Chatka. Všechny tyto společnosti se spojily a vytvořili jednu novou společnost GOURMET PARTNERS, s.r.o. Společnost Gourmet partners, s.r.o. spadá do kategorie menších společnosti. Společnost má 3 zaměstnance, kteří jsou zároveň jednateli. Tato firma je typickým rodinným podnikem. Před rokem byla vytvořena webová prezentace, která ze začátku splňovala požadavky společnosti. Tehdy požadovali, aby na webové stránce byly uvedeny základní údaje: čím se tato firma zabývá, kontaktní údaje (telefony a adresa), prodejny, novinky a brandy (produkty). Taky byly vybrány barvy, ve kterých tato stránka byla vytvořena (černá, žlutá, oranžová, bílá). 36
Obrázek 19 - původní stránky společnosti Gourmet Partners, s.r.o. [23] Od té doby, co byla vytvořena tato webová prezentaci, uběhlo hodně času. Během roku společnost Gourmet Partners, s.r.o. zvýšila počet nabízených brandů. Tato webová prezentace přestala plnit svojí základní funkci: seznamovat návštěvníky s širokou nabídkou brandů. Ale tohle nebyl jediný důvod, proč se rozhodli provést reengineering webové prezentace. Dalším důvodem bylo to, že tato webová stránka nebyla zcela funkční. 1. Špatně navržené menu Obrázek 20 - menu původní webové prezentaci společnosti Gourmet Partners, s.r.o. Problém: z menu produkty bylo praktické nemožné vybrat nějaký brand. Vypadávající lišta mizela, nebylo možné navést myš na submenu. 2. Prázdné a zbytečné odkazy. Stránky: Prodejny, Registrace, Kalendář byly zbytečné, nebyly naplněny žádným obsahem. Odkazy, které byly na produktech, vedly úplně na jiné stránky bez možnosti návratu zpět na hlavní stránku. 37
Požadavky na novou webovou prezentaci Na jednání se zástupci společnosti Gourmet Partners, s.r.o. jsme diskutovali o struktuře webových stránek a o tom, co tyto stránky mají umět. Dohodli jsme se, že webová prezentace bude mít následující strukturu: Hlavní stránka O nás Kontakty Olives Svět paštik Chatka Tzar Kaviar Káva Jean Brunet Avon & Ragibert CHATKA RU CHATKA EU Obrázek 21 - struktura webové prezentaci V současné době požadují webovou prezentaci, která bude seznamovat návštěvníky se zbožím, bude mít spíše reklamní charakter. Musí být zachovaný firemní barvy. Jedním z dalších požadavku je, že webová prezentace musí být dostupná, snadno vyhledávatelná. 10. Grafický koncept Grafický koncept vycházel ze stávajících webových stránek. U nové webové prezentace jsou zachovány barvy (černá, bílá, žlutá), navíc byla přidána šedá. Všechny stránky jsou podobné z grafického hlediska. Každá stránka obsahuje: Logo + slogan Pouze na hlavní stránce bude Banner Navigace hlavní a navigace horní Tato webová prezentace je jednosloupcová Patička 38
Obrázek 22 - Rozvržení jednotlivých části stránky V okamžiku, kdy uživatel vstoupí na webovou stránku, musí vědět, kde se nachází, na které webové stránce a k čemu slouží. Tohle nám napovídá logo a slogan. Z hlavní stránky by mělo být zřejmé, co na této stránce můžeme najít a co můžeme dělat.[24] K tomu slouží navigace. Pro tuto webovou stránku byla vytvořena navigace s rozbalovací nabídkou (pop-up). Její výhodou je, že do ní můžeme doplňovat další položky, aniž bychom museli měnit design. [1] upravovat. Obrázek 23 - rozbalovací menu (POP-UP) Všechny styly webové stránky byly vytvořeny pomocí CSS a proto je lze snadno 39
Obrázek 24 - Grafický vzhled webu 40
11. Tvorba vlastní webové prezentace Pro tvorbu webové prezentace, jsem si vybrala program od společnosti Microsoft, Microsoft Expression Web 4. Lze stáhnout trial verzi tohoto programu na dobu 60 dní. Pro tento program jsem se rozhodla z několika důvodů: 1. Hlavním důvodem je to, že tento program obsahuje modul SuperPreview. To znamená, že nemusím stahovat nějaké přenosné verze prohlížečů. Pomocí Super Preview se můžu podívat na vytvořené webové stránky v prohlížeči IE6 a vyšším, a taky je porovnávat. 2. Podle mého názoru má tento program příjemnější rozhrání a snadno se s ním pracuje. 11.1. Vytvoření prázdného webu Ze začátku vytvořím kontejner, který bude obsahovat metadata, pomůže sledovat, které stránky obsahuje a jejich propojeni Obrázek 25 - vytvořeni prázdného webu 41
Pro tvorbu prázdného webu jsem vybrala základní CSS Layout [příloha č. 4], který odpovídá navržené webové prezentaci. V mém případě je to layout, který obsahuje: záhlaví, navigaci, patičku a tělo. Kód HTML obsahuje: masthead záhlaví, navigaci, page_content tělo a footer. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <htmldir="ltr"xmlns="http://www.w3.org/1999/xhtml"> <head> <title>rozvrzeni_webu</title> <metacontent="text/html; charset=utf-8"http-equiv="content-type"/> <linkhref="layout.css"rel="stylesheet"type="text/css"/> </head> <body> <divid="masthead"> záhlaví </div> <divid="top_nav"> navigace </div> <divid="page_content"> tělo <divid="footer"> patička </div> </div> </body> </html> CSS má následující kód: /* CSS layout */ #masthead { #top_nav { #page_content { #footer { Se společností Gourmet Partners, s.r.o. jsme se dohodli na šířce contentu, což je 984px. Najít optimální šířku webové stánky je nemožné, vždy se najde někdo, komu se tato šířka nebude líbit. Ve své bakalářské práci jsem vycházela ze statistik, a šířka 984px je orientovaná na většinu uživatelů. Uživatelů, kteří vlastní monitor s rozlišením 800x600 je 2,86% [25]. Více než 15% monitorů má rozlišení 1024x768 a více.[25]. Nejlepší šířka pro webové stránky 960px až 1000px. Webová stránka se šířkou 960px až 1000px bude dobře vypadat na monitorech 1024x768, ale i na větších monitorech. Stránka se nachází uprostřed monitoru, a odstupy nevypadají dost široké. Před tím, než začnu psát celkový kód CSS, zapíšu úplně na začátek kaskádové tabulky následující řádky: 42
/*vynulujeme odstupy mezi elementy a prohlížeči*/ *{ padding:0; margin:0; Nastavím hodnoty na body: písmo, pozadí, které pak zdědí všechny stránky této webové prezentace. body{ text-align: justify; background-image: url('images/pozadi.gif'); background-repeat:repeat; Teď se podíváme na jednotlivé tagy podrobněji. Do mastheadu (hlavička neboli header) zadáme šířku 100%, výšku 120px a určíme barvu pozadí a budeme ji opakovat podle osy x. #masthead { width:100%; height:120px; background-color:black; background-repeat:repeat-x; Tag page_content určuje obsah webu, všechno, co budu chtít uvést na webové stránce, bude zapsáno do tohoto tagu, šířka tohoto tagu bude 984px a určíme barvu pozadí. #page_content { width:984px; background-color:#ffffff; background-repeat:repeat; Před tím, než přejdu ke tvorbě šablony DWT, určím, jak budou vypadat odkazy na webové stránce. V CSS nadefinuji barvu písma a dekoraci textu. Potřebuji, aby v této webové prezentaci byly všechny odkazy nepodtržené. A to udělám pomocí vlastnosti CSS text-decoration, kde nastavím hodnotu none žádná dekorace textu. a{ color: #FFFFFF; text-decoration:none; Zde nadefinují také patičku. Určím její šířku, barvu pozadí, výšku, barvu písma. #footer { width:100%; clear:both; bottom: 0; height:auto; background-color:#000000; #footer img{ margin-left:190px; 43
padding-top:8px; padding-bottom:2px; #footer p{ margin-left:370px; color:white; Teď už mám celé rozvržení stránky hotové a mužů přistoupit k tvorbě šablony. 11.2. Vytvoření šablony DWT DWT (Dynamic Web Tample) usnadní cestu ke tvorbě webové prezentaci. CSS styly vytvořené pomocí této šablony, budou snadno použitelné pro všechny stránky. Tvorba DWT šablony je velice snadná. V nabídce File výběru položku Page a pak stačí vybrat položku Dynamic Web Template, a šablona je na světě. Svoji šablonu jsem pojmenovala jako hlavni.dwt. Existuje několik důvodů, proč používat šablonu DWT: Možnost vytvářet nové stránky na základě stejné šablony, jakou používají ostatní stránky webu. [26] Umožňuje koncovým uživatelům zadávat a měnit obsah stránek bez poškození šablony. [26] Po vytvoření šablony přistoupím k vyplňování metainformací. Metainformace nejsou povinné, ale z důvodu, že stránky budou zařazený do internetových vyhledavačů, vyplním následující údaje: popis stránky (description: Webové stránky společnosti Gourmetpartners, s.r.o.) a klíčová slova (keywords: olivy, paštiky, caviar, chatka, káva). Tyto hodnoty zadám do vytvořené šablony DWT, do vlastností stránky (šablony), později všechny vlastnosti a veškerý obsah bude aplikován na ostatní stránky webové prezentace a tím ušetřím čas. 44
Obrázek 26 - Zadávání metainformací Nyní element head má následující metainformace: <head> <metacontent="text/html; charset=utf-8"http-equiv="content-type"/> <metacontent="olivy, paštiky, caviar,káva, chatka." name="keywords"/> <metacontent="webové stránky společnstigourmetpartners, s.r.o."name="description"/> </head> Nyní v šabloně DWT vytvořím hlavní menu. V něm budou odkazy na následující stránky: Olives, Svět Paštik, Tzar Caviar, Káva, Chatka, O nás a Kontakt. V tagu top_nav vytvoříme nečíslovaný seznam, který bude ve dvojici značek <ul></ul>. UL unordered list =neseřazený seznam, a v <li></li>. LI list item=položka seznamu. Menu bude obsahovat vypadávající složku u Světa paštik. Kód bude vypadat následně: <ulid="mainnav"> <li><ahref="index.html"><b>home</b></a></li> <li><ahref="olives.html">olives</a></li> <li><ahref="jeanbrunet.html">svět paštik</a> <ul> <li><ahref="jeanbrunet.html">jean Brunet</a></li> <li><ahref="avonragobert.html">avon &Ragobert</a></li></ul> </li> <li><ahref="tzar_caviar.html">tzar Caviar</a></li> <li><ahref="chatka.html">chatka</a></li> <li><ahref="kava.html">káva</a></li> </ul> 45
linku: Vytvořím nový styl pro menu, pojmenuji ho menu.css a spojím s HTML pomocí <link href="layout.css" rel="stylesheet" type="text/css" /> Do nově vytvořeného CSS zadám odstup, šířku, výšku a barvu pozadí. #top_nav{ padding:0; margin:0; width:100%; height:35px; background: url('images/black_0.gif'); background-repeat:repeat-x; Přeměníme seznam položek v plovoucí prvky. Přidáme tagu <li> vlastnost float, prvek bude přisunut k levému okraji. Nadefinuji vlastnosti odrážek, pomoci list-style, určím písmo a převedu malé písmo na velké pomocí text-transform. #top_navli{ float: left; list-style: none; font: bold 0.7em "Lucida Grande",Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; text-transform:uppercase; Určím způsob zobrazení odkazů pomoci vlastnosti display. Zadám vlastnost block, každý z odkazů bude zobrazen jako blok. Nastavím vzdálenost mezi odkazem textem a hranicí pozadí. Použiju padding top a padding right, které zapíšu jako padding: hodnota1 hodnota2. Muže se stát, že menu, které bude mít dvě slova (v mém případě: Svět paštik, Jean Brunet a TzarCaviar), bude automaticky zalamované, abych se tomu vyhnula, dopíšu white-space: nowrap. Kde white space určí způsob práce s řádkovými zlomy a vlastnost nowrap ponechá odkaz na jednom řádku. #top_navlia{ display: block; padding: 1em 3em; white-space: nowrap; Hlavní menu se nyní zobrazuje v jednom řádku. Zbývá dodělat vypadávající složku menu u Světa paštik. Než se pustím do psaní kódu, musím mít přesnou představu, jak podmenu bude vypadat. Když vstoupím na jakoukoliv stránku tohoto webu, podmenu nesmí být vidět, musí být schováno. K tomu použiju display s hodnotou none. Nastavím polohu (position) prvku na absolute, protože tento prvek musí být zobrazen povrch ostatních elementu, určím vzdálenost od menu pomoci vlastnosti top. 46
#top_navulliul { display: none; position:absolute; top:155px; Teď je podmenu schováno. Aby toto menu bylo funkční (objevovalo se při navádění myši), napíšu k tomu skript na jquery a CSS (jinak existuje ještě jedna cesta: a to napsat skript v JavaScript). Použiju jquery protože je přátelštější než JavaScript, pomocí něj se vyhnu chybám v zobrazování v prohlížečích IE6 a IE7 a jednodušší, pomůže vytvořit animace menu slidedown, která bude funkční ve všech prohlížečích. Tak se vyhnu zbytečným kódům. Nejdříve napíšu kód pro zpracování děje hover pro element li. $('.top_navulli').hover( function() {, function() { ); [27] A teď kód pro zobrazování podmenu: // najde element ul a vyvolá animace slidedown $(this).find('ul').slidedown(); // mění pozadí vybraného elementu, přidá do klasu active $(this).addclass("active"); [27] Konečný kód bude vypadat následně: $(document).ready(function(){ $('.topmenuulli').hover( function() { $(this).addclass("active"); $(this).find('ul').stop(true, true); // zachová animace $(this).find('ul').slidedown();, function() { $(this).removeclass("active"); $(this).find('ul').slideup('fast'); ); ); [27] Hlavní menu je hotové, ale ještě potřebují vytvořit horní menu, které bude obsahovat položky o nás a kontakt. Do HTML kódu (šablona DWT), do tagu masthead vepíšu následující kód: <divid="horni_menu"> <ahref="registrace.html">registrace</a> <ahref="o_nas">o nás</a> <ahref="kontakt">kontakt</a> </div> 47
HTML kód je hotový a můžu se pustit do psaní CSS. Nejdříve všechno zarovnám po pravé straně, natavím velikost písma a odstupy pomocí paddingu. #horni_menu{ float:right; font-size:.8em; padding:10px 25px 0 0; Teď se pustím do samotných odkazů, nastavím vzdálenost mezi nimi. #horni_menua{ padding:5px; Navigace je hotová. Abych měla kompletně hotový header, přidám k tomu ještě logo. V HTML kód (šablona DWT) do masthead vložím logo, toto logo bude vloženo jako obrázek vizuálně následujícím kódem: <img src="images/logo.gif"alt="logo"/>. Logo se zobrazí na levé straně i bez CSS, jelikož je obrázek vytvořen na míru, nemusíme nijak upravovat jeho velikost. Šablona DWT je kompletní, můžu ji uložit a aplikovat na jiné stránky. 11.3. Hlavní a ostatní stránky webové prezentaci Hlavní stránka Na hlavní stránce page_content bude rotace obrázků, novinky a aktuality. Rotace obrázků bude vytvořena pomocí jquery. Do page_content napíšu následující kód: <divid="page_content"> <!-- #BeginEditable "Obsah" --> <divid="rotator_content"> <ulid="rotator"> <liid="photo_1"> <imgsrc="images/banner_jean_excellence.jpg" alt="banner" /> </li> <liid="photo_2"> <imgsrc="images/banner_tzar_caviar.jpg" alt="banner" /> </li> <liid="photo_3"> <imgsrc="images/banner_web.jpg" alt="banner" />0 </li> </ul> </div> <!-- #EndEditable --> </div> 48
Nyní tyto obrázky jsou umístěny vedle sebe po ose y. Tyto obrázky nejdříve musím schovat, aby byl vidět jenom jeden obrázek. Do CSS kódu přidáme: #rotator_content { overflow: hidden; position: relative; width: 984px; height:379px; [28] Overflow určuje, jak se bude zacházet s obsahem [29], v mém případě s obrázky, a přidám jim hodnotu Hidden. Doplním kód následujícími řádky: #rotator_contentli { list-style: none; #rotator, #rotatorli, #rotatorimg { width:984px; height:379px; #rotatorli { position: absolute; [28] Obrázky už jsou schovány a pustím se do psaní jquery kódu, pomocí kterého napíšu rotaci. K tomu požiju metody fadeout() a fadein(). [příloha č. 5] Za rotátorem přidám tři sloupce, každý s těchto sloupců bude mít svůj účel. Tyto sloupce, lze vytvořit pomocí tabulek a také pomocí CSS. Dále popíšu způsob pomocí CSS. Nejdříve přidám kód do HTML. <divclass="col"> </div> <divid="ohraniceni1"> <h2>novinky</h2> <p>quisque vel loremeu libero laoreetfacilisis. Aeneanplacerat, ligula quisplaceratiaculis, mi magna luctusnibh, adipiscingpretiumeratneque vitae augue.</p> </div> Tento kód se bude opakovat třikrát. Až na tag se selektorem ID <div id="ohraniceni1"></div>, se bude zde měnit název z ohraniceni1 na ohraniceni2,3. Kód CSS:.col{ float:left; width:328px; margin-bottom:10px; #ohraniceni1{ 49
margin:20px 8px 0 0; border: 1px solid #000; #ohraniceni2{ margin-top:20px; border: 1px solid #000; #ohraniceni3{ margin:20px 0 0 8px; border: 1px solid #000; h2{ margin:0; text-align:center; background:url("images/black_2.gif") repeat-x; color:#fff; height:30px; p{ background-color:#ffffff; font-family:"times New Roman", Times, serif; font-size:1.2em; text-align:justify; padding:10px; Ostatní stránky Stránky Olives, Svět Paštik, Chatka budou vypadat stejně, budou se lišit jenom textem a obrázky. Tento kód je trochu podobný tomu na hlavní stránce. Jedná stránka, může obsahovat velké množství dat, které nelze rozdělit, ale musejí být nějak zorganizovány na jedné stránce. Sem by se hodilo řešení záložek, jako například ve Wordu. Obrázek 27 - Záložky v MS Office Každá záložka má svůj obsah, ale ve stejném okně. Aktivní složka ukazuje jenom tu informaci, kterou obsahuje například záložka Domů má styly písma a ostatní záložky jsou neaktivní čili schované. Na stejném principu by měly fungovat i záložky ve webové 50
prezentaci. Existuje dva způsoby, jak ji lze vytvořit. Jeden způsob použit jenom CSS styl, a druhý CSS + jquery. Rozhodla jsem se, že tento problém vyřeším pomocí CSS a jquery. Nejdříve vytvořím kód HTML a pak kód CSS pro záložky. Kód HTML <ulclass="zalozka"> <li><ahref="#teriny1">francouzské teriny 180g</a></li> <li><ahref="#teriny2">francouzské teriny 90g</a></li> <li><ahref="#teriny3">francouzské teriny 125g</a></li> <li><ahref="#teriny4">francouzské teriny 320g</a></li> </ul> <divclass="zalozky"> <divid="teriny1"class="tab"> <p>oblast obsahu1</p> </div> <divid="teriny2"class="tab"> <p>oblast obsahu2</p> </div> <divid="teriny3"class="tab"> <p>oblast obsahu3</p> </div> <divid="teriny4"class="tab"> <p>oblast obsahu4</p> </div> </div> Kód CSS bude podobný kódu hlavního menu:.zalozka{ margin-top:20px; margin-bottom:5px;.zalozkali{ display:inline; padding:5px; background-color:black; border:1px solid #C0C0C0; border-bottom:none; white-space:nowrap;.zalozkalia{ text-transform:uppercase; color:#fed550;.zalozkalia:active{ background-color:aqua;.zalozkalia:hover{ color:gray; 51
Obrázek 28 - Záložky vytvořeny v CSS A použiju následující jquery skript ke zpracování záložek: $(document).ready(function() { //Настройки по умолчанию $(".tab").hide(); //schovatkontent $("ul.zalozkali:first").addclass("active").show(); //Aktivovat první záložku $(".tab:first").show(); //Ukázat obsah první záložky //Dej po kliknuti myši $("ul.zalozkali").click(function() { $("ul.zalozkali").removeclass("active"); $(this).addclass("active"); //přidat třídu active k vybrané záložce $(".tab").hide(); //Schovat záložku a její obsah var activetab = $(this).find("a").attr("href"); //Найти значение атрибута для выявления активной вкладки с содержанием $(activetab).fadein(); // return false; ); ); [30] Mám zpracované všechny stránky Home, Olives, Svět paštik, Tzar Caviar a Chatka. Zbývá vytvořit stránky Kontakt, O nás. Stránka O nás je velice jednoduchá, obsahuje pouze text, proto rovnou začnu stránkou Kontakt. Tato stránka bude mít dva sloupce, v prvním sloupci budou kontaktní a fakturační údaje a ve druhém bude zadávací formulář a mapa. Přejmenuju stránku kontakt.html na kontakt.php, tato stránka bude obsahovat jednoduchý kód PHP. Nejdříve napíšu kód pro levý sloupec: <div id="win"> <div id="kontadr"> <h2>kontakt</h2> <div class="konthraniceleft"> <h3>naše adresa:</h3> <p>gourmet PARTNERS, s.r.o.<br/> Ohradní 1421<br /> 140 00 Praha 4<br /></p> </div> <div class="konthraniceright"> <h3> </h3> 52
<p> <strong>gsm.:</strong> 775 570 229<br /> <strong>gsm.:</strong> 776 728 139<br /> <strong>fax.:</strong> 257 217 927<br /> <strong>e-mail:</strong><a href="mailto: info@gourmetpartners.cz">info@gourmetpartners.cz</a></p><br/> </div> <div class="konthraniceleft"> <h3>fakturační údaje:</h3> <p>společnost GOURMET PARTNERS, s.r.o.<br/> IČ: 24664642<br /> DIČ: CZ24664642<br /></p> </div> </div> </div> KontAdr určuje šířku levého sloupce. Kontaktní údaje budou ve dvou sloupcích: první sloupec konthraniceleft a druhý konthraniceright, pak následují Fakturační údaje. K tomu napišeme nasledující CSS: #kontadr{ float:left; width:520px; background-color:#ebe8d9; margin: 30px 5px 20px 30px; padding: 20px; border-radius: 15px;Zde jsme použili CSS3, vytvořili jsme zaoblený rohy -moz-border-radius: 15px; -webkit-border-radius: 15px; #kontadr h2{ background-image:url('images/black_2.gif'); background-repeat:repeat-x; font:20px/30px Colaborate-RegularRegular, "Trebuchet MS", Arial, Helvetica, sans-serif; color:#ffffff; text-align:center; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; #kontadr h3 { padding:8px 20px 8px 20px;.kontHraniceleft{ float:left; margin:0 0 20px 20px;.kontHraniceright{ float:right; margin:0 20px 20px 0;.kontHranicerightstrong{/*kontakt tel*/ float:left; 53
width:3.3em;.konthraniceright a{ color:blue; Náš levý sloupec vypadá následně: Obrázek 29 - Levá část stránky Teď se pustím do zavedení mapy na webovou stránku. Bude to probíhat ve třech krocích. 1. krok: otevřeme stránku maps.google.com a zadáme adresu Ohradní 1421, 140 00 Praha Praha 4, Česká republika 2. krok: otevřeme odkaz, který najdeme v pravém uhlu a pak zmačkneme Přizpůsobit vloženou mapu a zobrazit náhled 3. krok: V nově otevřeném okně vyberu velikost mapy, v mém případě velikost bude 280x250 která se bude zobrazovat na webové stránce a zkopíruju vygenerovaný kód. [příloha č. 6] Teď vytvořím kontaktní formulář: <div id="form"> <formaction="" method="post"> <label>jméno:</label> <input name="name" type="text" size="25"/> <label>príjmení:</label> <input name="name1" type="text" size="25"/> <label>e-mail:</label> <input type="text" name="email" size="25"/> <label>text zprávy:</label> <textareaname="mess" cols="21" rows="3"></textarea> <input name="submit" type="submit" class="button" value="odeslat" /> </form> 54
Obrázek 30 - stránka kontakt Webová prezentace je hotová a připravena k použití. Vytvořená webová prezentaci nyní odpovídá všem požadavkům společnosti Gourmet Partners, s.r.o. Snažila jsem se ji vytvořit tak, aby odpovídala standardům WEB2.0, cílem stránky je seznamovat návštěvníky s nabídkou potravin a to ten web splňuje. Do stránek je vložen kód Google Analytics, které pomáhá sledovat návštěvnost stránek. Od té doby co byl tento web zprovozněn, trafik návštěvnosti neustále roste, toto znázorňuje následující obrázek: Obrázek 31 - Statistika návštěvnosti. Google Analytics 55
Tato statistika návštěvnosti dává možnost sledovat, které stránky tohoto webu jsou populární, kde se zdržují déle, což pak dává možnost upravovat neboli úplně předělat stránky, které mají nejnižší návštěvnost. Tato webová stránka je navržena tak, že se ji dá snadno upravit pro elektronický obchod, který se v budoucnu předpokládá. Tato webová prezentaci byla testována v různých prohlížečích pomocí modulu SuperPreview od společnosti Microsoft a je zcela kompatibilní [příloha č. 8] Webová prezentace byla testována na validnost kódu, ten test prošel úspěšně. Tento web byl testován pomocí nástroje WDG HTML Validator (testuje celý web jedním kliknutím) a taky pomocí nástroje W3 Validator. 56
12. Závěr Cílem této bakalářské práce je teoretický popis webové stránky a popis moderních technologii, které jsou aktuální na trhu a jsou použitelné pro tvorbu webových stránek. Dále pak praktická část, kde je popis samotné tvorby webové stránky pro gastronomickou firmu. V praktické časti je podrobně popsán krok za krokem průběh tvorby webové prezentaci a její implementaci. Moderní doba vyžaduje od člověka skoro každodenní aktualizaci nejen jeho vybavení počítačů, ale i aktualizaci jeho znalostí, poznání nových směrů a praktické využití pro dosažení lepších výsledků a překonání konkurence. Webové stránky, které jsou vytvářeny teď, jsou mnohem složitější a náročnější, než to bylo před lety. Tehdy se ještě nevědělo, do které marketingové strategie firmy mají zařadit web, nyní je tomu úplně jinak. Dnes webová stránka prezentuje firmu na trhu. Počet uživatelů, pro které informace z webu je prvotní, stoupa s každým rokem, což znamená, že o novém zboží, službách se hodně lidi dozví v první řadě prostřednictvím internetu. Dobře vytvořené a navržené webové stránky přinášejí jejich vlastníkům jenom zisk. 57
13. Zdroje a literatura [1] BAUMGARDT, Michael. Webdesign s Adobe Photoshop 7 a GoLive6. Brno : Computer Press, 2003. 311 s. ISBN 80-7226-797-3. [2] Struktura webových stránek [online]. 2009 [cit. 2011-05-22]. Struktura webových stránek. Dostupné z WWW: <webmount.ru/articles/111/1/>. [3] O'REILLY, Tim. What Is Web 2.0 - O'Reilly Media [online]. 30.09.2005 [cit. 2011-05-22]. What Is Web 2.0. Dostupné z WWW: <http://oreilly.com/web2/archive/what-isweb-20.html>. [4] WATT, Stephen. Mashup-приложения - эволюция SOA [online]. 16.02.2009 [cit. 2011-05-22]. IBM Developer Works. Dostupné z WWW: <http://www.ibm.com/developerworks/ru/library/ws-soa-mashups/>. [5] WebStudio2U. Основные принципы Web 2.0 дизайна при создании сайтов : Что такое WEB 2.0? [online]. 2009 [cit. 2011-05-17]. Zásady designu WEB2.0. Dostupné z WWW: <http://webstudio2u.net/ru/webdesign/215-web20.html>. [6] Мэшап (веб). In Wikipedia : the free encyclopedia [online]. St. Petersburg (Florida) : Wikipedia Foundation, 7.06.2009, last modified on 20.02.2011 [cit. 2011-05-17]. Dostupné z WWW: <http://ru.wikipedia.org/wiki/мэшап_(веб)>. [7] RSS. In Wikipedia : the free encyclopedia [online]. St. Petersburg (Florida) : Wikipedia Foundation,, last modified on 1. 1. 2011 [cit. 2011-05-17]. Dostupné z WWW: <http://cs.wikipedia.org/wiki/rss> [8] Really Wild Flowers - British wildflower seed, plants, bulbs & orchids for your garden [online]. 2009 [cit. 2011-05-22]. Really Wild Flowers. Dostupné z WWW: <http://www.reallywildflowers.co.uk/>. [9] Allbest.Ru - выбери лучшее! [online]. 2011 [cit. 2011-05-22]. Allbest.ru. Dostupné z WWW: <http://www.allbest.ru/> [10] E-HQ/Е-Штаб [online]. 2009 [cit. 2011-05-22]. E-HQ. Dostupné z WWW: <http://eshtab.livejournal.com/>. [11] Really Wild Flowers - British wildflower seed, plants, bulbs & orchids for your garden [online]. 2009 [cit. 2011-05-22]. Really Wild Flowers. Dostupné z WWW: <http://www.reallywildflowers.co.uk/>. [12] Google Trends: Soa [online]. 2011 [cit. 2011-05-22]. Google Trends. Dostupné z WWW: <http://www.google.com/trends?q=soa> 58
[13] PC Week/Russian Edition. Что дает слияние SOA и Web 2.0? [online]. 2010 [cit. 2011-05-17]. SOA a WEB2.0. Dostupné z WWW: <http://www.pcweek.ru/internet/article/detail.php?id=102552> [14] Бесплатный хостинг. In Wikipedia : the free encyclopedia [online]. St. Petersburg (Florida) : Wikipedia Foundation,, last modified on 10.04.2011 [cit. 2011-05-17]. Dostupné z WWW: <http://ru.wikipedia.org/wiki/бесплатный_хостинг>. [15] Endora. Podminky-pouziti / podpora / Free webhosting Endora.cz - neomezeně domén [online]. 2009 [cit. 2011-05-17]. Podmínky použití. Dostupné z WWW: <https://www.endora.cz/podpora/podminky-pouziti>. [16] ZRALÝ, Jiří. Vše o hostingu: Dostupnost webhostingu [online]. 2011 [cit. 2011-05- 17]. Vše o hostingu Webhosting srozumitelně. Dostupné z WWW: <http://vseohostingu.cz/webhosting-dostupnost>. [17] KÝBLSoft. Dostupnost českých a slovenských hostingů: nezávislé měření [online]. 17.5.2011 [cit. 2011-05-17]. Výsledky z nezávislého měření českých a slovenských hostingů. Dostupné z WWW:< http://mereni.kyblsoft.cz/freehostingy/ceske> [18] ZONER software, a.s. Macromedia Dreamweaver 8 - pracovní prostředí Interval.cz [online]. 30. 06. 2006 [cit. 2011-05-19]. Interval.cz. Dostupné z WWW: <http://interval.cz/clanky/macromedia-dreamweaver-8-pracovni-prostredi/>. [19] Macromedia Deramweaver 8, popis produktu [online]. 2005 [cit. 2011-05-22]. Macromedia Deramweaver 8. Dostupné z WWW: <http://www.sqpjaryn.com/macromedia/studio8/doc/dreamweaver8w.swf>. [20] Microsoft Download Center [online]. 2011 [cit. 2011-05-22]. Microsoft Download Center. Dostupné z WWW: <http://download.microsoft.com/download/2/0/a/20ac25f2-97e6-4930-a9dd-3ede223fd817/microsoft_expression_web_cz.pdf> [21] Hledání: Adobe dreamweaver Alza.cz [online]. 2011 [cit. 2011-05-22]. Alza.cz. Dostupné z WWW: <http://www.alza.cz/searchadvanced.asp?exps=adobe+dreamweaver#catid=0&exps =Adobe dreamweaver&limit=&prod=&pn=priceup&pg=0>. [22] Microsoft Expression Studio Web Pro 4.0, DVD Alza.cz [online]. 2011 [cit. 2011-05-22]. Alza.cz. Dostupné z WWW: <http://www.alza.cz/microsoft-expression-studioweb-pro-4-0-dvd-d231936.htm#popis>. [23] Gourmet Partners [online]. 2010 [cit. 2011-05-22]. Gourmet Partners. Dostupné z WWW: <www.gourmetpartners.cz>. 59
[24] KRUG, Steve. Webdesign : Nenuťte uživatele přemýšlet. Brno : Computer Press, 2006. 167 s. ISBN 80-251-1291-8 [25] What is my screen resolution/display resolution? - Screen resolution statistics [online]. 2011 [cit. 2011-05-22]. SCREEN RESOLUTION STATISTICS. Dostupné z WWW: <http://www.screenresolution.org/>. [26] LEEDS, Chris. Microsoft Expression Web2. Brno : Computer Press, 2009. 333 s. ISBN 978-80-251-2634-9 [27] SHEVCHIK, Anton. JQuery для начинающих [online]. 2011 [cit. 2011-05-22]. JQuery. Dostupné z WWW: <http://anton.shevchuk.name/javascript/jquery-forbeginners/>. [28] LINDLEY, Cody. JQuery Kuchařka programátora. Brno : Computer Press, 2010. 436 s. ISBN 978-80-251-3152-7. [29] JANOVSKÝ, Dušan. Jak psát web, návod na html stránky [online]. 2011 [cit. 2011-05-22]. Jak psát web. Dostupné z WWW: <http://www.jakpsatweb.cz/css/>. [30] Меню закладка на JQuery Блог Вебмастера [online]. 2011 [cit. 2011-05-22]. W-blog. Dostupné z WWW: <http://dicim.net/?p=1962>. [31] Mash-up [online]. 2011 [cit. 2011-05-22]. Mash-up. Dostupné z WWW: <http://promo.ingate.ru/seo-wikipedia/mash-up/>. [32] Введение в SOA. Часть 1. Проектирование информационных систем [online]. 2009 [cit. 2011-05-22]. SOA. Dostupné z WWW: <http://www.itspecial.ru/theme/vvedenie-v-soa_-_proektirovanie-informacionnyhsistem/10132/default.asp> [33] SOA Сервисно-ориентированная архитектура Epicor [online]. 2010 [cit. 2011-05-22]. Epicor. Dostupné z WWW: <http://www.epicor.com/russia/solutions/pages/serviceoriented.aspx> [34] IT & Network Infrastructure News The Merging of SOA and Web 2.0 [online]. 15.7.2007 [cit. 2011-05-22]. IT & Network Infrastructure News. Dostupné z WWW: <http://www.eweek.com/c/a/it-infrastructure/the-merging-of-soa-and-web-20/1/> [35] When the worlds of SOA and Web 2.0 collide ZDNet [online]. 2006 [cit. 2011-05- 22]. ZDNet. Dostupné z WWW: <http://www.zdnet.com/blog/hinchcliffe/when-theworlds-of-soa-and-web-20-collide/35> [36] Freehosting. In Wikipedia : the free encyclopedia [online]. St. Petersburg (Florida) : Wikipedia Foundation,, last modified on 26.6.2010 [cit. 2011-05-22]. Dostupné z WWW: <http://cs.wikipedia.org/wiki/freehosting>. 60
[37] Kaskádové styly. In Wikipedia : the free encyclopedia [online]. St. Petersburg (Florida) : Wikipedia Foundation, [cit. 2011-05-22]. Dostupné z WWW:<http://cs.wikipedia.org/wiki/Kaskádove_styly>. [38] JQuery. In Wikipedia : the free encyclopedia [online]. St. Petersburg (Florida) : Wikipedia Foundation, [cit. 2011-05-22]. Dostupné z WWW: <http://ru.wikipedia.org/wiki/jquery> [39] CROFT, Jeff, et al. Mistrovství v CSS. Brno : Computer Press, 2007. 409 s. ISBN 978-80-251-1705-7. [40] BUDD, Andy. CSS filtry, hacky a pokročilé postupy. Brno : Zoner Press, 2007. 270 s. ISBN 978-80-86815-54-1 [41] SAWYER MCFARLAND, David. CSS The Missing Manual. Moskva : Питер, 2010. 512 s. ISBN 978-5-91180-871-6. 61
14. Přílohy Příloha č. 1 - www.nissan.cz 62
Příloha č. 2 - www.czc.cz 63
Příloha č. 3 www.refreshyourclub.cz 64
Příloha č. 4 CSS layouty 65