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 Úvod ............................................................................................................................ 6
1.
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
Rešerše dostupných krabicových řešení vhodných pro vytvoření webových aplikací 24
6.
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
Popis vybraných řešení .............................................................................................. 33
8.
8.1.
HTML................................................................................................................. 33
8.2.
CSS ..................................................................................................................... 34
8.3.
jQuery ................................................................................................................. 35
Praktická část .................................................................................................................... 36 Společnost Gourmetpartners, s.r.o ............................................................................. 36
9. 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.cz1 Internet Centrum2 webZdarma.cz3 php5.cz4 g6.cz hys.cz tode.cz 4fan.cz cekuj.net comehere.cz mzf.cz bluefile.cz jecool.net funsite.cz 6f.sk
okamzite.eu e-blog.cz tym.cz ic.cz chytry.cz clanhost.cz howto.cz phorum.cz ezin.cz tym.sk byl.cz webpark.cz yc.cz own.cz hu.cz over.cz hustej.net kx.cz vyjimecny.cz yw.sk wu.cz clanweb.cz webovka.eu
borec.cz czechian.net czweb.cz chytrak.cz kvalitne.cz mysteria.cz nazory.cz prodejce.cz unas.cz vyrobce.cz webz.cz webzdarma.cz web2001.cz wz.cz xf.cz euweb.cz zaridi.to
php5.cz
Největší výběr domén nám nabízí Internet Centrum. Nabízený webový prostor 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:
2
Internet centrum, webhosting zdarma [online]. 2011 [cit. 2011-05-22]. Dostupné z WWW:
3
Webzdarma.cz [online]. 2011 [cit. 2011-05-22]. Dostupné z WWW:
4
Php5 - free webhosting PHP [online]. 2011 [cit. 2011-05-22]. Dostupné z WWW:
30
tohoto limitu. Řešení, která jsem vybrala, mají traffic bez limitu, až na free webhosting Endora, vizuálně následující tabulka. Tabulka 4 - přehled nabízeného prostoru u free webhostingu
Dostupná kapacita Traffic
Endora1
Internet Centrum2
2 GB 5 GB
250 MB bez limitu
webzdarma.cz3 php5.cz4 200 MB bez limitu
20 MB bez limitu
Reklama 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. Tabulka 5 - porovnání PHP a MySQL verze
PHP MySQL počet BD phpMyAdmin
Endora1
internet centrum2
webzdarma.cz3
php5.cz4
verze 5.3.6 verze 5.1.56 není omezeno verze3.3.7
verze 5.2.6 verze 5.0.92 1 2.11.8.1deb5+lenny8
verze 4.3.4 verze 5.0.67 1 2.6.0-pl3
verze 5.3.3 verze 5.1.53 1 3.3.2
Hodnocení 1. Endora 2. Php5.cz 3. Internet Centrum 4. Webzdfarma.cz E-mail Tabulka 6 - služba e-mail na free webhostingu
Endora*
Internet Centrum2
není -
ano 1
1
E-mail Počet
webzdarma.cz3 php5.cz4 ano 1
není -
*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. a
