Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky. Vyšší odborná škola informačních služeb v Praze. Elena Nilova

Rozměr: px
Začít zobrazení ze stránky:

Download "Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky. Vyšší odborná škola informačních služeb v Praze. Elena Nilova"

Transkript

1 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

2 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

3 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.

4 Obsah 1. Úvod... 6 Teoretická část Význam webových stránek Základní principy tvorby webové prezentace Struktura webové stránky Pravidla a techniky použitelnosti WEB WEB 2.0 s technologického hlediska WEB 2.0 a jeho vzhled SOA Architektura SOA WEB 2.0 a SOA Rešerše dostupných krabicových řešení vhodných pro vytvoření webových aplikací 24 Macromedia Dreamweaver nebo Adobe Dreamweaver KompoZer Microsoft Expression Web Shrnutí 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 Co to je free webhosting? Porovnání výkonu free webhostingu Popis vybraných řešení HTML CSS jquery Praktická část Společnost Gourmetpartners, s.r.o Grafický koncept Tvorba vlastní webové prezentace Vytvoření prázdného webu Vytvoření šablony DWT

5 11.3. Hlavní a ostatní stránky webové prezentaci Závěr Zdroje a literatura Přílohy Příloha č Příloha č Příloha č. 4 CSS layouty Příloha č. 5 Kód jquery - rotátor Příloha č. 6 Kód vkládaní mapy

6 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

7 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

8 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ř.: [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ř.: [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

9 Výhody: Reklama, upoutaní pozornosti na danou firmu. Např.: č. 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

10 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

11 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

12 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

13 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

14 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 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

15 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

16 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

17 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

18 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

19 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

20 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

21 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 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

22 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) 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ž 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

23 Šíř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

24 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

25 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

26 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

27 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

28 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

29 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 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

30 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] [cit ]. Dostupné z WWW: <https://www.endora.cz//> 2 Internet centrum, webhosting zdarma [online] [cit ]. Dostupné z WWW: <http://www.ic.cz/> 3 Webzdarma.cz [online] [cit ]. Dostupné z WWW: <http://www.webzdarma.cz/> 4 Php5 - free webhosting PHP [online] [cit ]. Dostupné z WWW: <http://www.php5.cz/> 30

31 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

32 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 verze verze verze MySQL verze verze verze verze počet BD není omezeno phpmyadmin verze deb5+lenny pl Hodnocení 1. Endora 2. Php5.cz 3. Internet Centrum 4. Webzdfarma.cz Endora* 1 Tabulka 6 - služba na free webhostingu Internet Centrum 2 webzdarma.cz 3 php5.cz 4 není ano ano není Počet *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

33 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 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 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

34 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 která bude umístěna mezi tagy<style> a </style> <style 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

35 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 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

36 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

37 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

38 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

39 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

40 Obrázek 24 - Grafický vzhled webu 40

41 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 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

42 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

43 /*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

44 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 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

45 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

46 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

47 #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

48 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 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

49 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

50 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

51 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

52 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 /> Praha 4<br /></p> </div> <div class="konthraniceright"> <h3> </h3> 52

53 <p> <strong>gsm.:</strong> <br /> <strong>gsm.:</strong> <br /> <strong>fax.:</strong> <br /> <strong> </strong><a href="mailto: </div> <div class="konthraniceleft"> <h3>fakturační údaje:</h3> <p>společnost GOURMET PARTNERS, s.r.o.<br/> IČ: <br /> DIČ: CZ <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

54 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, 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> </label> <input type="text" name=" " 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

55 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

56 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

57 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

58 13. Zdroje a literatura [1] BAUMGARDT, Michael. Webdesign s Adobe Photoshop 7 a GoLive6. Brno : Computer Press, s. ISBN [2] Struktura webových stránek [online] [cit ]. Struktura webových stránek. Dostupné z WWW: <webmount.ru/articles/111/1/>. [3] O'REILLY, Tim. What Is Web O'Reilly Media [online] [cit ]. What Is Web 2.0. Dostupné z WWW: <http://oreilly.com/web2/archive/what-isweb-20.html>. [4] WATT, Stephen. Mashup-приложения - эволюция SOA [online] [cit ]. 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] [cit ]. 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, , last modified on [cit ]. Dostupné z WWW: <http://ru.wikipedia.org/wiki/мэшап_(веб)>. [7] RSS. In Wikipedia : the free encyclopedia [online]. St. Petersburg (Florida) : Wikipedia Foundation,, last modified on [cit ]. Dostupné z WWW: <http://cs.wikipedia.org/wiki/rss> [8] Really Wild Flowers - British wildflower seed, plants, bulbs & orchids for your garden [online] [cit ]. Really Wild Flowers. Dostupné z WWW: <http://www.reallywildflowers.co.uk/>. [9] Allbest.Ru - выбери лучшее! [online] [cit ]. Allbest.ru. Dostupné z WWW: <http://www.allbest.ru/> [10] E-HQ/Е-Штаб [online] [cit ]. E-HQ. Dostupné z WWW: <http://eshtab.livejournal.com/>. [11] Really Wild Flowers - British wildflower seed, plants, bulbs & orchids for your garden [online] [cit ]. Really Wild Flowers. Dostupné z WWW: <http://www.reallywildflowers.co.uk/>. [12] Google Trends: Soa [online] [cit ]. Google Trends. Dostupné z WWW: <http://www.google.com/trends?q=soa> 58

59 [13] PC Week/Russian Edition. Что дает слияние SOA и Web 2.0? [online] [cit ]. 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 [cit ]. Dostupné z WWW: <http://ru.wikipedia.org/wiki/бесплатный_хостинг>. [15] Endora. Podminky-pouziti / podpora / Free webhosting Endora.cz - neomezeně domén [online] [cit ]. Podmínky použití. Dostupné z WWW: <https://www.endora.cz/podpora/podminky-pouziti>. [16] ZRALÝ, Jiří. Vše o hostingu: Dostupnost webhostingu [online] [cit ]. 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] [cit ]. Výsledky z nezávislého měření českých a slovenských hostingů. Dostupné z WWW:< [18] ZONER software, a.s. Macromedia Dreamweaver 8 - pracovní prostředí Interval.cz [online] [cit ]. Interval.cz. Dostupné z WWW: <http://interval.cz/clanky/macromedia-dreamweaver-8-pracovni-prostredi/>. [19] Macromedia Deramweaver 8, popis produktu [online] [cit ]. Macromedia Deramweaver 8. Dostupné z WWW: <http://www.sqpjaryn.com/macromedia/studio8/doc/dreamweaver8w.swf>. [20] Microsoft Download Center [online] [cit ]. Microsoft Download Center. Dostupné z WWW: <http://download.microsoft.com/download/2/0/a/20ac25f2-97e a9dd-3ede223fd817/microsoft_expression_web_cz.pdf> [21] Hledání: Adobe dreamweaver Alza.cz [online] [cit ]. 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] [cit ]. Alza.cz. Dostupné z WWW: <http://www.alza.cz/microsoft-expression-studioweb-pro-4-0-dvd-d htm#popis>. [23] Gourmet Partners [online] [cit ]. Gourmet Partners. Dostupné z WWW: <www.gourmetpartners.cz>. 59

60 [24] KRUG, Steve. Webdesign : Nenuťte uživatele přemýšlet. Brno : Computer Press, s. ISBN [25] What is my screen resolution/display resolution? - Screen resolution statistics [online] [cit ]. SCREEN RESOLUTION STATISTICS. Dostupné z WWW: <http://www.screenresolution.org/>. [26] LEEDS, Chris. Microsoft Expression Web2. Brno : Computer Press, s. ISBN [27] SHEVCHIK, Anton. JQuery для начинающих [online] [cit ]. JQuery. Dostupné z WWW: <http://anton.shevchuk.name/javascript/jquery-forbeginners/>. [28] LINDLEY, Cody. JQuery Kuchařka programátora. Brno : Computer Press, s. ISBN [29] JANOVSKÝ, Dušan. Jak psát web, návod na html stránky [online] [cit ]. Jak psát web. Dostupné z WWW: <http://www.jakpsatweb.cz/css/>. [30] Меню закладка на JQuery Блог Вебмастера [online] [cit ]. W-blog. Dostupné z WWW: <http://dicim.net/?p=1962>. [31] Mash-up [online] [cit ]. Mash-up. Dostupné z WWW: <http://promo.ingate.ru/seo-wikipedia/mash-up/>. [32] Введение в SOA. Часть 1. Проектирование информационных систем [online] [cit ]. SOA. Dostupné z WWW: <http://www.itspecial.ru/theme/vvedenie-v-soa_-_proektirovanie-informacionnyhsistem/10132/default.asp> [33] SOA Сервисно-ориентированная архитектура Epicor [online] [cit ]. 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] [cit ]. 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] [cit ]. 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 [cit ]. Dostupné z WWW: <http://cs.wikipedia.org/wiki/freehosting>. 60

61 [37] Kaskádové styly. In Wikipedia : the free encyclopedia [online]. St. Petersburg (Florida) : Wikipedia Foundation, [cit ]. 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 ]. Dostupné z WWW: <http://ru.wikipedia.org/wiki/jquery> [39] CROFT, Jeff, et al. Mistrovství v CSS. Brno : Computer Press, s. ISBN [40] BUDD, Andy. CSS filtry, hacky a pokročilé postupy. Brno : Zoner Press, s. ISBN [41] SAWYER MCFARLAND, David. CSS The Missing Manual. Moskva : Питер, s. ISBN

62 14. Přílohy Příloha č

63 Příloha č

64 Příloha č

65 Příloha č. 4 CSS layouty 65

Olga Rudikova 2. ročník APIN

Olga Rudikova 2. ročník APIN Olga Rudikova 2. ročník APIN Redakční (publikační) systém neboli CMS - content management system (systém pro správu obsahu) je software zajišťující správu dokumentů, nejčastěji webového obsahu. (webová

Více

HLEDEJCENY.mobi. Obsah. Mobilní verze e-shopu. Důvody instalace

HLEDEJCENY.mobi. Obsah. Mobilní verze e-shopu. Důvody instalace Obsah HLEDEJCENY.mobi Mezi Vodami 1952/9 e-mail: info@hledejceny.cz HLEDEJCENY.mobi... 1 Mobilní verze e-shopu... 1 Důvody instalace... 1 Výhody... 2 Co je k mobilní verzi potřeba... 2 Objednávka služby...

Více

Nástrojová lišta v editačním poli

Nástrojová lišta v editačním poli Nástrojová lišta v editačním poli Název projektu PŘEJÍT NA konkrétní sekci webu ZOBRAZIT zobrazí a) pracovní verzi webu (tj. nepublikovanou) b) publikovanou verzi webu a) Odstranit odstraní zobrazenou

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností úprav. Obtížně se sjednocují změny na různých částech

Více

Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči

Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči Autor: Mgr. Tomáš Javorský Datum vytvoření: 06 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: DUM seznamuje

Více

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, v doslovném překladu "světová rozsáhlá síť neboli celosvětová síť, je označení

Více

Produkční plán. Tvorba internetových stránek

Produkční plán. Tvorba internetových stránek Produkční plán Tvorba internetových stránek Marek Žáček - Zac0057 Systémové inženýrství a informatika Ostrava 2014 Obsah OBSAH 1 ÚVOD 2 NÁZEV WEBU 3 ZÁMĚR A CÍLE 3 CÍLOVÉ PUBLIKUM 3 VZOR NÁVŠTĚVNOSTI 3

Více

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03c 1. Box model v CSS 2. Obtékání blokových (X)HTML elementů 3. Pozicování blokových (X)HTML

Více

Systém JSR představuje kompletní řešení pro webové stránky malého a středního rozsahu.

Systém JSR představuje kompletní řešení pro webové stránky malého a středního rozsahu. Redakční systém JSR Systém pro správu obsahu webových stránek Řešení pro soukromé i firemní webové stránky Systém JSR představuje kompletní řešení pro webové stránky malého a středního rozsahu. Je plně

Více

Přizpůsobení Layoutu aplikace. Základní moduly a funkčnost aplikace

Přizpůsobení Layoutu aplikace. Základní moduly a funkčnost aplikace Přizpůsobení Layoutu aplikace Grafickému návrhu na přání klienta Redesign šablon : barevnost, hlavička, logo, grafické prvky stránky M A C S Základní moduly a funkčnost aplikace Vyhledávání podrobné s

Více

Nahrání webu na internet

Nahrání webu na internet Nahrání webu na internet Meta tagy Podstránky webu máme hotové, ale v jejich hlavičkách nám chybí poslední věc. Až bude web online, všimnou si ho internetové vyhledávače a jeho podstránky si tzv. zaindexují.

Více

HTML Hypertext Markup Language

HTML Hypertext Markup Language HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé

Více

Webová grafika, struktura webu a navigace, použitelnost a přístupnost

Webová grafika, struktura webu a navigace, použitelnost a přístupnost Webová grafika, struktura webu a navigace, použitelnost a přístupnost Martin Kuna martin.kuna@seznam.cz Obsah Webová grafika Rozvržení stránky Typografické zásady Nejčastější chyby Struktura webu a navigace

Více

Systém elektronického rádce v životních situacích portálu www.senorady.cz

Systém elektronického rádce v životních situacích portálu www.senorady.cz Systém elektronického rádce v životních situacích portálu www.senorady.cz Obec Senorady Miroslav Patočka 2006 Obsah: 1. Úvodní informace 1.1 Informace pro uživatele 1.1.1 Přístupnost HTML, PDA, WAP, XML

Více

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU KAPITOLA 3 - ZPRACOVÁNÍ TEXTU KLÍČOVÉ POJMY textové editory formát textu tabulka grafické objekty odrážky a číslování odstavec CÍLE KAPITOLY Pracovat s textovými dokumenty a ukládat je v souborech různého

Více

Webová stránka. Matěj Klenka

Webová stránka. Matěj Klenka Webová stránka Matěj Klenka Osobní webová stránka Toto je dokumentace k mé webové stránce This is a documentation to my web page Já, Matěj Klenka, prohlašuji, že má webová stránka byla vytvořena mnou a

Více

O CSS podrobněji. Box model Document flow Layout

O CSS podrobněji. Box model Document flow Layout O CSS podrobněji Box model Document flow Layout O CSS podrobněji Box model Každý element má: -obsah (content) -spadávku (padding) -rámeček (border) -okraj (margin) O CSS podrobněji http://www.w3.org/tr/css21/box.html

Více

OBJEDNÁVACÍ A INFORMAČNÍ SYSTÉMY

OBJEDNÁVACÍ A INFORMAČNÍ SYSTÉMY OBJEDNÁVACÍ A INFORMAČNÍ SYSTÉMY STAkis-W STAkis-S Již dnes k dispozici všem zákazníkům společnosti Stahlgruber bez výjimky! www.stahlgruber.cz STAkis-W OBJEDNÁVACÍ SYSTÉM BEZ NUTNOSTI INSTALACE Jako výchozí

Více

1. Začínáme s FrontPage 2003 11

1. Začínáme s FrontPage 2003 11 Úvod 9 1. Začínáme s FrontPage 2003 11 Instalace programu 12 Spuštění a ukončení programu 15 Základní ovládání 16 Hledání souborů 30 Najít a nahradit 31 Tisk 32 Schránka sady Office 34 Nápověda 36 Varianty

Více

Přehled základních html tagů

Přehled základních html tagů Přehled základních html tagů h1... hlavní nadpis h2... podnadpisy h3... podnadpisy další úrovně p... odstavec strong... tučné písmo b... tučné písmo em... kurzíva i... kurzíva br... zalomení řádku ol...

Více

ArcGIS Online Subscription

ArcGIS Online Subscription ArcGIS Online Subscription GIS pro organizace ArcGIS Online je GIS v cloudu. Poskytuje služby GIS v prostředí internetu, ať už se jedná o úložné místo, publikaci mapových a geoprocessingových služeb, nebo

Více

MS Word 2007 Šablony programu MS Word

MS Word 2007 Šablony programu MS Word MS Word 2007 Šablony programu MS Word Obsah kapitoly V této kapitole se seznámíme s: Možností využití šablon při vytváření nových dokumentů Vytvářením vlastních šablon Studijní cíle Po absolvování této

Více

(X)HTML, CSS a jquery

(X)HTML, CSS a jquery Prezentační vrstva webové aplikace (X)HTML, CSS a jquery jquery Java Scriptová knihovna Ing. Martin Dostal (X)HTML první stránka Textový soubor s příponou.htm nebo.html: moje

Více

Inovace výuky prostřednictvím šablon pro SŠ

Inovace výuky prostřednictvím šablon pro SŠ Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Stupeň a typ vzdělávání Vzdělávací oblast Vzdělávací obor Tematický okruh Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748

Více

Nové přístupy tvorby web site. Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001

Nové přístupy tvorby web site. Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001 Nové přístupy tvorby web site Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001 Osnova Úvod Web site - jasný cíl Technologie - dynamický web Forma - vyšší interaktivita Obsah - stálá aktualizace

Více

Databázové aplikace pro internetové prostředí. 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku

Databázové aplikace pro internetové prostředí. 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku Databázové aplikace pro internetové prostředí 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku Projekt: Inovace výuky prostřednictvím ICT Registrační číslo: CZ.1.07/1.5.00/34.250

Více

Obsah. Rozdíly mezi systémy Joomla 1.0 a 1.5...15 Systém Joomla coby jednička online komunity...16 Shrnutí...16

Obsah. Rozdíly mezi systémy Joomla 1.0 a 1.5...15 Systém Joomla coby jednička online komunity...16 Shrnutí...16 Obsah Kapitola 1 Seznámení se systémem Joomla!................................. 9 Přehled systémů pro správu obsahu....................................................10 Použití systému pro správu obsahu.....................................................11

Více

Vývoj Internetových Aplikací

Vývoj Internetových Aplikací 2 Vývoj Internetových Aplikací HTML a CSS Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky HTML a CSS - Tvorba webových stránek - Struktura - Obsah - Vzhled - Funkcionalita zdroj: http://www.99points.info

Více

HTML - Úvod. Zpracoval: Petr Lasák

HTML - Úvod. Zpracoval: Petr Lasák HTML - Úvod Zpracoval: Petr Lasák Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají

Více

Návrh stránek 4IZ228 tvorba webových stránek a aplikací

Návrh stránek 4IZ228 tvorba webových stránek a aplikací 4IZ228 tvorba webových stránek a aplikací Jirka Kosek Poslední modifikace: $Date: 2013/12/12 20:40:58 $ Obsah Úvod... 3 Recept na dobré webové stránky... 4 Použitelnost... 5 Jak se pozná použitelný web...

Více

Výukový materiál zpracovaný v rámci projektu

Výukový materiál zpracovaný v rámci projektu Výukový materiál zpracovaný v rámci projektu Registrační číslo projektu: CZ.1.07/1.4.00/21.3712 Škola adresa: Základní škola T. G. Masaryka Ivančice, Na Brněnce 1, okres Brno-venkov, příspěvková organizace

Více

Stránka se dá otevřít dvěma způsoby

Stránka se dá otevřít dvěma způsoby Co je potřeba Mozek, to zaprvé. Budete potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (Poznámkový blok). Potřebujete webový prohlížeč. Hodí se připojení na internet. Kdo nemá

Více

Administrace webu Postup při práci

Administrace webu Postup při práci Administrace webu Postup při práci Obsah Úvod... 2 Hlavní menu... 3 a. Newslettery... 3 b. Administrátoři... 3 c. Editor stránek... 4 d. Kategorie... 4 e. Novinky... 5 f. Produkty... 5 g. Odhlásit se...

Více

Redakční systém Joomla. Prokop Zelený

Redakční systém Joomla. Prokop Zelený Redakční systém Joomla Prokop Zelený 1 Co jsou to red. systémy? Redakční systémy (anglicky Content Management System - CMS) jsou webové aplikace používané pro snadnou správu obsahu stránek. Hlavním cílem

Více

Mgr. Vlastislav Kučera lekce č. 2

Mgr. Vlastislav Kučera lekce č. 2 Mgr. Vlastislav Kučera lekce č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to je to, co se

Více

Individuální projekt z předmětu webových stránek 2012/2013 - Anketa

Individuální projekt z předmětu webových stránek 2012/2013 - Anketa Individuální projekt z předmětu webových stránek 2012/2013 - Anketa Daniel Beznoskov, 2 IT A Skupina 1 Úvod Prohlášení o autorství Prohlašuji, že jsem individuální projekt z předmětu webových stránek na

Více

Mgr. Vlastislav Kučera přednáška č. 2

Mgr. Vlastislav Kučera přednáška č. 2 Mgr. Vlastislav Kučera přednáška č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS

Více

2 PŘÍKLAD IMPORTU ZATÍŽENÍ Z XML

2 PŘÍKLAD IMPORTU ZATÍŽENÍ Z XML ROZHRANÍ ESA XML Ing. Richard Vondráček SCIA CZ, s. r. o., Thákurova 3, 160 00 Praha 6 www.scia.cz 1 OTEVŘENÝ FORMÁT Jednou z mnoha užitečných vlastností programu ESA PT je podpora otevřeného rozhraní

Více

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz Webové stránky 2. Úvod do jazyka HTML Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 11. 9. 2012 Webové Strana: 1/6 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická

Více

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy V čem se píší web. dokumenty HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy HTML HTML (HyperText Markup Language, značkovací jazyk pro hypertext) standart pro vytváření stránek v systému aplikací World

Více

1 Příručka používání Google Apps

1 Příručka používání Google Apps 1 Příručka používání Google Apps Tento manuál vznikl pro účel seznámení se základní funkčností balíku Google Apps a má za úkol Vás seznámit s principy používání jednotlivých služeb (Gmail, Kalendáře, Disk).

Více

Ceník platný od 1.6.2014 Ceny jsou konečné, nejsme plátci DPH. www.pro-web.cz info@pro-web.cz

Ceník platný od 1.6.2014 Ceny jsou konečné, nejsme plátci DPH. www.pro-web.cz info@pro-web.cz Ceník platný od 1.6.2014 Ceny jsou konečné, nejsme plátci DPH. www.pro-web.cz info@pro-web.cz Obsah Strana Ceník CMS 2 Ceník E-SHOP 3 Ceník BAZAR 4 Ceník Webhosting 5 Ceník Služby 5 1 CMS W1000 Základ

Více

Prezentace navrhované struktury internetových stránek

Prezentace navrhované struktury internetových stránek Prezentace navrhované struktury internetových stránek Petr SUNEGA petr.sunega@soc.cas.cz Telefon: 221 183 225 http://seb.soc.cas.cz Oddělení ekonomické sociologie, tým socioekonomie bydlení Cíle prezentace

Více

7. Enterprise Search Pokročilé funkce vyhledávání v rámci firemních datových zdrojů

7. Enterprise Search Pokročilé funkce vyhledávání v rámci firemních datových zdrojů 7. Enterprise Search Pokročilé funkce vyhledávání v rámci firemních datových zdrojů Verze dokumentu: 1.0 Autor: Jan Lávička, Microsoft Časová náročnost: 30 40 minut 1 Cvičení 1: Vyhledávání informací v

Více

Webové šablony pro restaurace

Webové šablony pro restaurace Grafika Webdesign Eshopy Webové šablony pro restaurace Připravili jsme šablonové weby, které je možné aplikovat na většinu restaurací/kaváren a podobných podniků. Oproti univerzálním šablonám pro firemní

Více

Mgr. Vlastislav Kučera přednáška č. 1

Mgr. Vlastislav Kučera přednáška č. 1 Mgr. Vlastislav Kučera přednáška č. 1 jazyk (x)html kaskádové styly Castro, E.: HTML, XHTML a CSS. CPress, 2007 Písek, S.: HTML a XHTML, začínáme programovat. Grada Publishing, 2003 Wempen, F.: HTML a

Více

Nabídka internetového obchodu

Nabídka internetového obchodu Nabídka internetového obchodu Odběratel Dodavatel Martin Daneš Martin Hůlek Tel.: 775 974321 E-mail: hulek.martin@gmail.com 1 Popis Řešení internetového obchodu nabízí beztabulkové řešení layoutu. Budete

Více

Postupy práce se šablonami IS MPP

Postupy práce se šablonami IS MPP Postupy práce se šablonami IS MPP Modul plánování a přezkoumávání, verze 1.20 vypracovala společnost ASD Software, s.r.o. dokument ze dne 27. 3. 2013, verze 1.01 Postupy práce se šablonami IS MPP Modul

Více

24 Uživatelské výběry

24 Uživatelské výběry 24 Uživatelské výběry Uživatelský modul Uživatelské výběry slouží k vytváření, správě a následnému používání tématicky seskupených osob a organizací včetně jejich kontaktních údajů. Modul umožňuje hromadnou

Více

Mgr. Stěpan Stěpanov, 2013

Mgr. Stěpan Stěpanov, 2013 Mgr. Stěpan Stěpanov, 2013 Abstrakt V tomto kurzu se seznámíme se základními pojmy HTML, klíčovými pravidly pro práci se značkami a atributy a strukturou dokumentu. Také se dozvíte, jak a v čem lze vytvářet

Více

PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě

PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě PHP PHP původně znamenalo Personal Home Page a vzniklo v roce 1996, od té doby prošlo velkými změnami a nyní tato zkratka znamená Hypertext Preprocessor. PHP je skriptovací programovací jazyk, určený především

Více

Internetové služby isenzor

Internetové služby isenzor Internetové služby isenzor Aktuální snímek z webové kamery nebo aktuální teplota umístěná na vašich stránkách představují překvapivě účinný a neotřelý způsob, jak na vaše stránky přilákat nové a zejména

Více

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN Škola: Gymnázium, Brno, Slovanské náměstí 7 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN prostřednictvím ICT Číslo projektu: CZ.1.07/1.5.00/34.0940

Více

WORKWATCH ON-LINE EVIDENCE PRÁCE A ZAKÁZEK

WORKWATCH ON-LINE EVIDENCE PRÁCE A ZAKÁZEK WORKWATCH ON-LINE EVIDENCE PRÁCE A ZAKÁZEK Systém WorkWatch je určen pro malé a střední firmy, které se zabývají službami nebo zakázkovou výrobou. Zajistí dokonalý přehled o všech zakázkách a jejich rozpracovanosti.

Více

Vypracoval: Jiří Němeček, produktový manažer KOPOS KOLÍN a.s. Havlíčkova 432 CZ 280 94 Kolín a IV. Konfigurátor KNS

Vypracoval: Jiří Němeček, produktový manažer KOPOS KOLÍN a.s. Havlíčkova 432 CZ 280 94 Kolín a IV. Konfigurátor KNS Konfigurátor KNS Cílem programu je poskytnout zákazníkovi větší komfort při práci s výrobky firmy KOPOS. Program pracuje s výrobky produktového portfolia kabelových nosných systémů. Je velmi intuitivní,

Více

DELTA - STŘEDNÍ ŠKOLA INFORMATIKY A EKONOMIE, s.r.o. Obor informační technologie AJAX ESHOP. Maturitní projekt. Třída:

DELTA - STŘEDNÍ ŠKOLA INFORMATIKY A EKONOMIE, s.r.o. Obor informační technologie AJAX ESHOP. Maturitní projekt. Třída: DELTA - STŘEDNÍ ŠKOLA INFORMATIKY A EKONOMIE, s.r.o. Obor informační technologie AJAX ESHOP Maturitní projekt Vypracoval: Denis Ptáček Třída: 4B Rok: 2014/2015 Obsah 1. Použité nástroje... 3 1.1 NetBeans

Více

Začínáme pracovat s tabulkovým procesorem MS Excel

Začínáme pracovat s tabulkovým procesorem MS Excel Začínáme pracovat s tabulkovým procesorem MS Excel Nejtypičtějším představitelem tabulkových procesorů je MS Excel. Je to pokročilý nástroj pro tvorbu jednoduchých i složitých výpočtů a grafů. Program

Více

METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.

METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI Základní rozložení plochy Výchozím stavem při práci je normální zobrazení. pás karet - základní nabídka příkazů Pořadí jednotlivých snímků Základní plocha

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek HTML Hypertext Markup Language jazyk pro tvorbu webových stránek Rozšíření: JavaScript, CSS Dynamické stránky: PHP, ASP(X), JSP Prohlížeče: IE, Firefox, Opera, Google Chrome mohou

Více

Obsah. 1.1 Práce se záznamy... 3 1.2 Stránka Dnes... 4. 2.1 Kontakt se zákazníkem... 5

Obsah. 1.1 Práce se záznamy... 3 1.2 Stránka Dnes... 4. 2.1 Kontakt se zákazníkem... 5 CRM SYSTÉM KORMORÁN UŽIVATELSKÁ PŘÍRUČKA Obsah 1 Základní práce se systémem 3 1.1 Práce se záznamy................................. 3 1.2 Stránka Dnes.................................... 4 1.3 Kalendář......................................

Více

Prezentace CRMplus. Téma: CRMplus jako nástroj pro kontrolu a vyhodnocení rozpracovanosti dílů na zakázkách

Prezentace CRMplus. Téma: CRMplus jako nástroj pro kontrolu a vyhodnocení rozpracovanosti dílů na zakázkách Prezentace CRMplus Téma: CRMplus jako nástroj pro kontrolu a vyhodnocení rozpracovanosti dílů na zakázkách Obsah prezentace Představení společnosti Technodat Develop, s.r.o. CRMplus základní charakteristika

Více

Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto

Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto Registrační číslo projektu Šablona Autor Název materiálu / Druh CZ.1.07/1.5.00/34.0951 III/2 INOVACE A ZKVALITNĚNÍ VÝUKY PROSTŘEDNICTVÍM ICT

Více

Název: On-line tvorba webu Anotace:

Název: On-line tvorba webu Anotace: Registrační číslo projektu: CZ.1.07/1.4.00/21.3712 Škola adresa: Základní škola T. G. Masaryka Ivančice, Na Brněnce 1, okres Brno-venkov, příspěvková organizace Na Brněnce 1, Ivančice, okres Brno-venkov

Více

Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument František HAVLŮJ e-mail: haf@ujv.cz ÚJV Řež oddělení Reaktorové fyziky a podpory palivového

Více

NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE. Ataxo Czech s.r.o.

NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE. Ataxo Czech s.r.o. NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE Ataxo Czech s.r.o. ÚVOD Internetové stránky vytvořené společností Ataxo v rámci produktu Mini web můžete jednoduše a rychle upravovat prostřednictvím on-line administrace.

Více

PowerPoint 2010. Kurz 1. Inovace a modernizace studijních oborů FSpS (IMPACT) CZ.1.07/2.2.00/28.0221

PowerPoint 2010. Kurz 1. Inovace a modernizace studijních oborů FSpS (IMPACT) CZ.1.07/2.2.00/28.0221 PowerPoint 2010 Kurz 1 Představení Program PowerPoint 2010 je nástroj pro tvorbu prezentací. Tyto prezentace jsou pak určeny především k promítání na plátno pomocí dataprojektoru. Prezentace je formát

Více

Základní pojmy spojené s webovým publikováním ~ malý slovníček pojmů~ C3231 Základy WWW publikování Radka Svobodová, Stanislav Geidl

Základní pojmy spojené s webovým publikováním ~ malý slovníček pojmů~ C3231 Základy WWW publikování Radka Svobodová, Stanislav Geidl Základní pojmy spojené s webovým publikováním ~ malý slovníček pojmů~ C3231 Základy WWW publikování Radka Svobodová, Stanislav Geidl Internet celosvětová síť spojení jednotlivých síťí pomocí uzlů (síť

Více

Nový způsob práce s průběžnou klasifikací lze nastavit pouze tehdy, je-li průběžná klasifikace v evidenčním pololetí a školním roce prázdná.

Nový způsob práce s průběžnou klasifikací lze nastavit pouze tehdy, je-li průběžná klasifikace v evidenčním pololetí a školním roce prázdná. Průběžná klasifikace Nová verze modulu Klasifikace žáků přináší novinky především v práci s průběžnou klasifikací. Pro zadání průběžné klasifikace ve třídě doposud existovaly 3 funkce Průběžná klasifikace,

Více

ZSF web a intranet manuál

ZSF web a intranet manuál ZSF web a intranet manuál Verze pro školení 11.7.2013. Návody - Jak udělat...? WYSIWYG editor TinyMCE Takto vypadá prostředí WYSIWYG editoru TinyMCE Jak formátovat strukturu stránky? Nadpis, podnadpis,

Více

Úvodní příručka. Správa souborů Kliknutím na kartu Soubor můžete otevřít, uložit, vytisknout a spravovat své soubory Wordu.

Úvodní příručka. Správa souborů Kliknutím na kartu Soubor můžete otevřít, uložit, vytisknout a spravovat své soubory Wordu. Úvodní příručka Microsoft Word 2013 vypadá jinak než ve starších verzích, proto jsme vytvořili tuto příručku, která vám pomůže se s ním rychle seznámit. Panel nástrojů Rychlý přístup Příkazy tady umístěné

Více

Práce s administračním systémem internetových stránek Podaných rukou

Práce s administračním systémem internetových stránek Podaných rukou Práce s administračním systémem internetových stránek Podaných rukou 2011 Ing. Jakub Matas Přihlášení a uživatelský účet Přihlášení Přihlášení do aplikace lze dvěma způsoby: 1. Pomocí panelu ve vrchní

Více

TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz

TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz 6.10.2015 aneta.bartuskova@uhk.cz TNPW1 Cvičení 1 Technologie pro tvorbu webu HTML, HTML5 značkovací jazyk struktura, obsah, odkazy - hypertext CSS, CSS3 kaskádové styly vzhled (rozvržení, formátování,

Více

Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto

Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto Registrační číslo projektu Šablona Autor Název materiálu / Druh CZ.1.07/1.5.00/34.0951 III/2 INOVACE A ZKVALITNĚNÍ VÝUKY PROSTŘEDNICTVÍM ICT

Více

Základy WWW publikování

Základy WWW publikování Ing. Igor Kopetschke Oddělení aplikované informatiky Ústav nových technologií a aplikované informatiky Fakulta mechatroniky a mezioborových inženýrských studií Technická univerzita v Liberci Email : igor.kopetschke@tul.cz

Více

13. Vytváření webových stránek

13. Vytváření webových stránek 13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací

Více

3 Formuláře a sestavy Příklad 1 Access 2007

3 Formuláře a sestavy Příklad 1 Access 2007 TÉMA: Vytváření formulářů Správce databáze Naše zahrada předpokládá, že bude s vytvořenou databází pracovat více uživatelů. Je třeba proto navrhnout a vytvořit formuláře pro přístup k datům. Zadání: Otevřete

Více

FFUK Uživatelský manuál pro administraci webu Obsah

FFUK Uživatelský manuál pro administraci webu Obsah FFUK Uživatelský manuál pro administraci webu Obsah FFUK Uživatelský manuál pro administraci webu... 1 1 Úvod... 2 2 Po přihlášení... 2 3 Základní nastavení webu... 2 4 Menu... 2 5 Bloky... 5 6 Správa

Více

1. Úvod do Ajaxu 11. Jak Ajax funguje? 13

1. Úvod do Ajaxu 11. Jak Ajax funguje? 13 Obsah Úvodem 9 1. Úvod do Ajaxu 11 Jak Ajax funguje? 13 Popis 13 Ukázky 13 Jaké jsou možnosti tvorby interaktivních webových aplikací? 15 Co je třeba znát? 16 Jak fungují technologie Ajaxu 16 Jak funguje

Více

22. Tvorba webových stránek

22. Tvorba webových stránek 22. Tvorba webových stránek Webové stránky jsou spolu s elektronickou poštou nejpoužívanější prostředky internetu. Brouzdáme li internetem používáme nějaký prohlížeč. To, co vidíme na obrazovce v prohlížeči

Více

apilot - První kroky Publikační platforma apilot První kroky

apilot - První kroky Publikační platforma apilot První kroky Publikační platforma apilot První kroky Přihlášení https://domena.apilot.cz Po přihlášení Po přihlášení Nástěnka - aktualizace platformy novinky - tipy, triky (nastavení poštovních klientů) - aktivita

Více

9. Software: programové vybavení počítače, aplikace

9. Software: programové vybavení počítače, aplikace 9. Software: programové vybavení počítače, aplikace Software (SW) je programové vybavení počítače, které nám umožňuje faktickou práci na počítači tvorbu dokumentů, tabulek, úpravy obrázků, elektronickou

Více

CZ.1.07/1.5.00/34.0527

CZ.1.07/1.5.00/34.0527 Projekt: Příjemce: Digitální učební materiály ve škole, registrační číslo projektu CZ.1.07/1.5.00/34.0527 Střední zdravotnická škola a Vyšší odborná škola zdravotnická, Husova 3, 371 60 České Budějovice

Více

Vlastnosti dokumentu/stránky

Vlastnosti dokumentu/stránky Vlastnosti dokumentu/stránky Formát stránky papíru pro tisk V záložce Rozložení stránky na pásu karet najdeme vše potřebné pro přípravu dokumentu před tiskem. 1) Záložka Rozložení stránky 2) Změna Orientace

Více

MBI - technologická realizace modelu

MBI - technologická realizace modelu MBI - technologická realizace modelu 22.1.2015 MBI, Management byznys informatiky Snímek 1 Agenda Technická realizace portálu MBI. Cíle a principy technického řešení. 1.Obsah portálu - objekty v hierarchiích,

Více

Webové stránky. 4. Tvorba základní HTML webové stránky. Datum vytvoření: 25. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.

Webové stránky. 4. Tvorba základní HTML webové stránky. Datum vytvoření: 25. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr. Webové stránky 4. Tvorba základní HTML Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 25. 9. 2012 Webové Strana: 1/9 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická

Více

STŘEDNÍ ŠKOLA INFORMAČNÍCH TECHNOLOGIÍ A SOCIÁLNÍ PÉČE

STŘEDNÍ ŠKOLA INFORMAČNÍCH TECHNOLOGIÍ A SOCIÁLNÍ PÉČE STŘEDNÍ ŠKOLA INFORMAČNÍCH TECHNOLOGIÍ A SOCIÁLNÍ PÉČE WEBOWÉ STRÁNKY TŘÍD KAMIL POPELKA ZÁVĚREČNÁ MATURITNÍ PRÁCE BRNO 2011 Prohlášení Prohlašuji, že maturitní práce je mým původním autorským dílem, které

Více

Zdokonalování gramotnosti v oblasti ICT. Kurz MS Excel kurz 6. Inovace a modernizace studijních oborů FSpS (IMPACT) CZ.1.07/2.2.00/28.

Zdokonalování gramotnosti v oblasti ICT. Kurz MS Excel kurz 6. Inovace a modernizace studijních oborů FSpS (IMPACT) CZ.1.07/2.2.00/28. Zdokonalování gramotnosti v oblasti ICT Kurz MS Excel kurz 6 1 Obsah Kontingenční tabulky... 3 Zdroj dat... 3 Příprava dat... 3 Vytvoření kontingenční tabulky... 3 Možnosti v poli Hodnoty... 7 Aktualizace

Více

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument František HAVLŮJ e-mail: haf@ujv.cz ÚJV Řež oddělení Reaktorové fyziky a

Více

EndNote Web. Stručné informace THOMSON SCIENTIFIC

EndNote Web. Stručné informace THOMSON SCIENTIFIC THOMSON SCIENTIFIC EndNote Web Stručné informace Web je webový nástroj navržený tak, aby poskytoval studentům a výzkumníkům pomoc při psaní výzkumných prací. Databáze ISI Web of Knowledge a nástroje EndNote

Více

DoplněkCite While You Write pro aplikaci Microsoft Word

DoplněkCite While You Write pro aplikaci Microsoft Word DoplněkCite While You Write pro aplikaci Microsoft Word Díky doplňku Cite While You Write pro nástroj EndNote Web máte možnost reference a formátované citace či bibliografie při psaní vaší práce v aplikaci

Více

INOVACE PŘEDMĚTŮ ICT. MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika

INOVACE PŘEDMĚTŮ ICT. MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika Vyšší odborná škola ekonomická a zdravotnická a Střední škola, Boskovice INOVACE PŘEDMĚTŮ ICT MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika Zpracoval: Jaroslav Kotlán srpen 2009s Úvod Modul Programování

Více

MANUÁL K PROGRAMU JEDNODUCHÝ SKLAD (VER-1.2)

MANUÁL K PROGRAMU JEDNODUCHÝ SKLAD (VER-1.2) MANUÁL K PROGRAMU JEDNODUCHÝ SKLAD (VER-1.2) Program byl vytvořený za účelem uchovávání artiklů (položek) a jejich cen. Základním cílem bylo vytvořit uživatelsky příjemné prostředí s mnoha funkcemi ve

Více

Popis služby MiniNET.cz. Výhody našeho řešení. Zadávání zakázky a průběh. Balíčky služeb

Popis služby MiniNET.cz. Výhody našeho řešení. Zadávání zakázky a průběh. Balíčky služeb Popis služby MiniNET.cz Služba MiniNET cz zpřístupní velmi efektně a profesionálně všechny důležité informace o Vás a Vaší činnosti v celosvětové síti Internet pomocí vlastní webové prezentace. Jestliže

Více

E-mailové kampaně. 2013 Byznys CRM s.r.o.

E-mailové kampaně. 2013 Byznys CRM s.r.o. E-mailové kampaně 2013 Byznys CRM s.r.o. Zákazník: Dne: 31. 5. 2015 Vytvořil: Pavel Šlesingr Schválil: Petr Hampejs Verze: 5.0 Emailové kampaně v CRM 2011 Strana 2 z 15 Obsah Obsah... 3 1. Popis... 4 1.1.

Více

Uživatelská příručka aplikace. SPRÁVA NEMOVITOSTÍ pro bytová družstva a společenství vlastníků jednotek

Uživatelská příručka aplikace. SPRÁVA NEMOVITOSTÍ pro bytová družstva a společenství vlastníků jednotek Uživatelská příručka aplikace SPRÁVA NEMOVITOSTÍ pro bytová družstva a společenství vlastníků jednotek Příručka pro práci s aplikací Správa nemovitostí pro bytová družstva a společenství vlastníků jednotek

Více

Tvorba webu. Úvod a základní principy. Martin Urza

Tvorba webu. Úvod a základní principy. Martin Urza Tvorba webu Úvod a základní principy Martin Urza World Wide Web (WWW) World Wide Web (doslova celosvětová pavučina ) je označení pro mnoho dokumentů rozmístěných na různých serverech po celém světě. Tyto

Více

M4 PDF rozšíření. Modul pro PrestaShop. http://www.presta-addons.com

M4 PDF rozšíření. Modul pro PrestaShop. http://www.presta-addons.com M4 PDF rozšíření Modul pro PrestaShop http://www.presta-addons.com Obsah Úvod... 2 Vlastnosti... 2 Jak modul funguje... 2 Zdroje dat... 3 Šablony... 4 A. Označení šablon... 4 B. Funkce Smarty... 5 C. Definice

Více