Metodika tvorby webových aplikací

Transkript

1 BANKOVNÍ INSTITUT VYSOKÁ ŠKOLA Metodika tvorby webových aplikací Bakalářská páce Stanislav Němec březen/2009

2 BANKOVNÍ INSTITUT VYSOKÁ ŠKOLA Katedra informačních technologií Metodika tvorby webových aplikací Bakalářská práce Autor: Stanislav Němec Informační technologie, Správce informačních systémů Vedoucí práce: Ing. Stanislav Horný Praha březen

3 Prohlášení: Prohlašuji, že jsem bakalářskou práci zpracoval samostatně a s použitím uvedené literatury. podpis autora V Praze, Stanislav Němec 2

4 Anotace Tato práce se zaměřuje na oblast tvorby webových aplikací, její charakteristiky a specifika, se zaměřením na popis nejčastěji používaných či nejvýznačnějších vývojových nástrojů a prostředků pro tvorbu webových aplikací. Dále shrnuje i nejnovější trendy v oblasti vývoje webových aplikací a závěrem se seznámíme i s podrobným postupem, jak vytvořit jednoduchou webovou prezentaci. Annotation This work focuses on the creation of web applications, its characteristics and specificities, with a focus on description of the most frequently used and most development tools and resources for creating web applications. In addition, summarizes the latest trends in the development of web applications and concludes with a detailed procedure is learn how to create a simple website. 3

5 OBSAH Úvod a cíl 1. Základní pojmy 2. Nástroje a jazyky pro vývoj 2.1 Značky 2.2 Kaskádové styly 2.3 Skripty 2.4 Applety Grafika a animace 2.5 Dynamické generování stránek 3. Obecné zásady 3.1 Hierarchie 3.2 Zbytečná slova 3.3. Orientace na stránkách 3.4. Důležitost navigace Prvky navigace Optimálně navržené stránky 3.5. Grafika a design Barvy Text Obrázky 3.6 Administrace Prostředek pro komunikaci 3.7 Další důležité náležitosti stránek 3.8. Viditelnost ve vyhledávačích 3.9 Reklama 4. Analýza stávajících webových aplikací 4

6 5. Příklady řešení 5.1 Návrh struktury webu a navigace 5.2 Návrh funkčních prvků 5.3 Volba technického řešení 5.4 Samotný vývoj Závěr 5

7 Úvod a cíl V dnešní době již málokdo podceňuje význam internetu jako média s celosvětovou působností. Informace zde zveřejňované mají celou řadu výhod oproti tištěným médiím, rozhlasu a televizi. Na rozdíl od knihy nebo novin mohou www stránky 1 obsahovat ještě další mediální prvky, jakými mohou být zvukové sekvence, nebo krátké animace. Hlavním rozdílem mezi klasickou stranou A4 a webovou stránkou je, že stránky na Internetu mohou být takřka nekonečné. 2 Vezmeme-li v úvahu internet, tak informace na něm zveřejněné tam budou dnes, stejně tak za měsíc či za rok. Může si je prohlédnout kdokoliv na této planetě právě připojený k této celosvětové síti. Mnoho firem již dnes pochopilo, že mít své www stránky se stává nezbytností při snaze dosáhnout úspěchu, proto většina malých i středních podniků, stejně jako celá řada soukromých osob má své vlastní webové prezentace. Webové prezentace však nemusí sloužit pouze pro podnikatelské účely. Kdekdo si vytváří webové stránky rodinného typu, případně mají nějaké odborné vědomosti o které se chtějí podělit s ostatními. Vzhledem k tomu, že se v profesním životě v oblasti internetových a multimediálních aplikací nějaký čas pohybuji, pokusím se stručně a přehledně popsat, jakým způsobem by taková správná internetová prezentace měla vypadat. V této práci se budu věnovat webovým stránkám, které by měly sloužit soukromníkům, právnickým osobám případně ostatním společnostem a institucím jako nástroj reklamy, prostor pro oslovení uživatelů, případně jako prostředek pro zlepšení image firmy. Popíši základní náležitosti webového serveru, strukturu a design. Dále jakým způsobem se postarat o to, aby se o našem webu dozvědělo co nejvíce uživatelů, něco o optimalizaci stránek pro vyhledávače, propagaci a celou řadu dalších věcí souvisejících s tvorbou internetových stránek. 1 WWW = zkratka World Wide Web (celosvětová pavučina) síť propojená Internetem 2 Reklama na Internetu, Petr Stuchlík, Martin Dvořáček, Grada Publishing -2002, str.42 6

8 Cíl Cílem mé práce je seznámit a osvětlit čtenáře s problematikou tvorby internetových aplikací jako jsou firemní webové prezentace, elektronické obchody, webové informační systémy nebo internetové vyhledávače. Snažím se také seznámit se základními nástroji a jazyky pro tvorbu takových aplikací. 1. Základní pojmy Při vytváření webových stránek by měl autor dbát především na umístění důležitých informací, které může potencionální zákazník na našich stránkách hledat. Neměly by být dále, než na dvě klepnutí myší. Pokud se uživatel PC podívá na naši webovou stránku, měla by být intuitivní, pochopitelná a samo vysvětlující. Zpočátku by mělo být jasné o čem stránky jsou a jak je používat (tzn. pokud se někdo na naše stránky dostane přes určitý odkaz, mělo by být hned z domovské stránky 3 patrné, čím se naše firma zabývá). Při bližším prozkoumání by měl být uživatel 3 Domovská stránka (homepage) první stránka, která se objeví při zadání požadované internetové adresy 7

9 zorientován natolik, aby mu bylo jasné, kde a na jaký odkaz klepnout při hledání konkrétní informace. Pokud se dostaneme na stránky, které nás nutí dlouze přemýšlet nad jejich použitelností, je mnohem pravděpodobnější, že vyhledáme konkurenční stránku s jasnou a přehlednou strukturou. Na Internetu je konkurence vzdálena jen jedno klepnutí, tím pádem pokud uživatele hned na začátku znechutíme, nic mu nebrání v tom, aby zamířil jinam. Další otazníky vyvolávají v hlavách uživatelů odkazy, u nichž není patrné, zda je možné na ně klepnout. Člověk sice může jednotlivé odkazy vyzkoušet, ale tím opět zbytečně zatěžujeme uživatele. Jak již bylo výše popsáno, mělo by být pro uživatele při procházení našich internetových stránek vše automatické, proto uvedu ještě pár skutečností, o kterých by uživatelé při návštěvě našich stránek vůbec neměli přemýšlet: Kde to jsem? Kde mám začít? Kde je to a kde ono? Co to je? Stránky by měly fungovat jako dobré osvětlení v kamenném obchodě, kde je vše přehledné, upravené a uspořádané. Při samotném zpracování webových stránek je důležitá schopnost vcítit se do uvažování potencionálního uživatele. Ne každý člověk uvažuje stejným způsobem, proto je dobré, pokud je vytvořena alespoň základní struktura stránek, nechat ji prohlédnout třetím nezávislým osobám a následně s nimi probrat, jak na ně stránky působí. Použitelnost je samozřejmě důležitá i pokud tvoříme stránky nekomerční. V takovém případě asi nebudete chtít investovat do drahých analýz, takže nezbývá, než použitelnost otestovat svépomocí. Nejlepším řešením je pozvat někoho ze svých známých nebo rodinných příslušníků k počítači a sledovat, jak s vašimi stránkami pracuje. Je zajímavé u nich pozorovat, pod jakým odkazem se snaží dané informace hledat. Možná budeme překvapeni, že budou klepat zcela na jiné odkazy, než bychom předpokládali. Tento test použitelnosti by měl být minimálním základem úspěchu každého webu a v mé praxi se vždy osvědčil. 8

10 2. Nástroje a jazyky pro vývoj Pro vývoj se používá několik druhů programovacích a značkovacích jazyků dělících se do skupin podle druhu stránek, které se dělí na: statické - jsou kompletně uloženy na serveru v podobě, jak se zobrazují dynamické - obsahují skripty, které mohou na klientovi měnit podobu stránek, opatřují stránky aktivitou, aj. dynamicky generované - stránka je vytvořena na serveru dynamicky před odesláním klientovi 2.1 Značky Základ stránky tvoří standard HTML, což je v podstatě obyčejný textový soubor, kde je text doplněn o formátovací značky tagy TAG - určuje význam textu, kterým je uvozen; - zpravidla určuje i způsob zobrazení v prohlížeči; - uzavřen mezi znaky < a >, např. <center></center>, nezáleží na velikosti písmen;- tagy jsou nepárové (<br/>) a párové <>, </> - má otevírací a uzavírající část (ohraničují blok textu) < center >, </ center > - uzavírající část je někdy nepovinná např. <p> už nemusí mít </p> platí však pro obecné HTML, v XTML již musí být každý párový tag uzavřen a psán s malými písmeny, další <p></p>=další odstavec; součástí tagu může být i hodnota doplňkového parametru př. barva, zarovnání atd. <div align= left bgcolor= blue ></div> Základní struktura HTML dokumentu <html> <head> Začátek hlavičky dokumentu <title> Titulek, který se objeví v titulku okna klienta </title></head> Konec hlavičky dokumentu <body> Začátek vlastního těla dokumentu... vlastní obsah stránky... </body> Konec těla dokumentu </html> 9

11 <body bgcolor= #FFFFFF text=barva> - změna barvy v dokumentu; <font color= barva size=1-7> </font>změna barvy a velikosti části textu; Bez povinnosti ukončení - <p> odstavec; <br/> nový řádek; nedělitelná mezera; <hr></hr> čára; Ukončení - <h1-6> nadpis</h1-6>;<blockquote> text od ostatního textu oddělen mezerou a odsazen; </blockquote> <div> odstavec </div>; Odkazy - <a href=" > Text, který se zobrazí nebo odkaz na obrázek </a>; Odkazy na místo v dokumentu <a href="#jmeno"> Text odkazu </a> <a name="jmeno"> </A>; Obrázky - <img src= obr.jpg alt= Popisek obrázku /> Obrázek jako odkaz - <a href= obrazek.htm > <img src= obr.jpg alt= Popis obrázku > </a> Seznamy - <ul> ohraničení nečíslovaného seznamu</ul>; <ol> ohraničení číslovaného seznamu</ol>;<li> položka čísl./nečísl. Seznamu</li>; <dl> ohraničení definičního seznamu</dl>; <dt> definovaný termín</dt>; <dd> definice</dd>; Tabulky - <table></table>; <tr> řádek</tr>; <td> buňky</td>; <th> záhlaví; </th> Rámce - <frameset cols nebo rows> rozdělení obrazovky</framrset>; <frame src= uvod.htm name= ramec1 > rámy</frame> 2.2 Kaskádové styly - definují vlastnosti zobrazení celého dokumentu nebo jeho částí (barva, písmo, mezery, ) - důvod vzniku oddělit vlastní strukturu dokumentu od definice způsobu zobrazení - nastavované vlastnosti vzhled písma, barva a pozadí, zarovnání a formátování textu, formátování stránky, - pomocí <style></style> do hlavičky dokumentu; připojením externího dokumentu pomocí <style> nebo <link>; definice pro konkrétní element v těle dokumentu - h1 {color:blue; text-align:center} - selektor pomocí třídy - p.big {color:blue;font-size:larger} <p class= big > Text odstavce</p>; pokud neuvedu p v definici p.velky, nevztahuje se definice k odstavci 10

12 - selektor pomocí identifikátoru - #ID01 {letter-spacing:1pt} <p id= ID01 > Text odstavce</p> 2.3 Skripty - Vkládání skriptů skript je vložený kód do stránky, který vykonává prohlížeč; skriptovací jazyky JavaScript, VBS; HTMP 4.0 umožňuje obecné vložení skriptů bez ohledu na jazyk - Druhy skriptů skripty,které jsou vykonávány při nahrání stránky do prohlížeče (vkládání pomocí <script>), - skripty vázané na určitou událost (při stisku tlačítka, spojují se s určitým elementem) - Důvody používání skriptů - zvýšení uživatelského komfortu stránek: - modifikování dokumentu v průběhu jeho nahrávání; - zajištění kontroly vstupních dat v políčkách; - inteligentní chování formulářů; -zobrazení lišt nabídek, interaktivní uživatelské rozhraní (změna barev po přejetí myši atd.); - nějaký dialog s uživatelem - Vložení skriptu do stránky - párová značka <script></script>; - důležitý atribut language - definuje použitý skriptovací jazyk; - skript může být zapsán přímo mezi párové značky nebo určen odkaz na soubor se skriptem (např..js) pomocí url; - skript může být umístěn kdekoliv (v záhlaví i v těle) - v záhlaví by měly být definice funkcí - Základní vlastnosti JavaScriptu - skriptovací jazyk (interpretovaný), jehož syntaxe je podobná jazyku Java (a tudíž C); - rozlišuje malá a velká písmena; - příkaz ukončen středníkem; - neumí přistupovat k souborům ani jiným systémovým prostředkům (jen aktuální datum a čas); - hodí se pro jednoduché aplikace 2.4 Applety - aplikace napsaná v jazyce JAVA; - applet = malá aplikace; - vkládá se pomocí značky <applet>; atributy: CODE - odkaz na kód; - width,height - šířka a výška okna app.; - name jméno app.; - značka <papram> umožňuje předat appletu parametry; atributy : name jméno parametru, -value hodnota parametru; Př: <applet code= "kresleni.class"> <param name="object" value= "1">Zde se měl spustit applet </applet> 11

13 JAVA - objektově orientovaný programovací jazyk, syntaxe odvozena od C++, - plnohodnotný programovací jazyk; - objektové rysy dědičnost ; - mnoho knihoven; - automatická správa dynamické paměti; - podpora multiprocessingu vlákna (třídy Thread, ThreadGroup); - synchronizace procesů; - strukturované ošetření chyb; - zabezpečení Grafické prvky a animace Adobe (Macromedia) Flash Flash je grafický vektorový program, momentálně ve vlastnictví společnosti Adobe (dříve Macromedia). Používá se především pro tvorbu (převážně internetových) interaktivních animací, prezentací a her. Rozšíření Flashe na internetu pomohla malá velikost výsledných souborů, protože se uchovávají ve vektorovém formátu, a proto ve většině případů vytlačily flashové bannery ty klasické, dříve používané ve formátu GIF. Flash má také vlastní implementovaný programovací jazyk ActionScript, který slouží k rozvinutí všech možností interaktivní animace a vývoji robustních aplikací, v aktuálních verzích je ActionScript poměrně vyspělý objektově orientovaný programovací jazyk. Adobe Flash Professional CS3 disponuje novou verzí programovacího jazyka ActionScript 3. Výhodou verze CS3 (léto 2008) je výborná integraci s dalšími produkty Adobe CS3. Flash exportuje soubory do dvou základních formátů:.swf v tomto formátu má soubor malou velikost, může být přehrávaný ve webovém prohlížeči, ale k jeho běhu je nutný přehrávač Adobe Flash Player, který je volně ke stažení na stránkách společnosti Adobe.exe formát určený pro spouštění ve Windows (není nutný další přehrávač), soubor má větší velikost. Říká se mu také projektor, jelikož k má tento soubor v sobě implementovaný FlashPlayer. Vedle flashových banerů je největší použití flashe u her a u animací. Flash hry a animace jsou velmi populární mezi návštěvníky internetu. Výhodou takových her je malá velikost souboru a možnost hraní přímo v okně prohlížeče, bez nutnosti stahování. Existuje velké množství her a jejich variant. V mnoha případech jsou flashové hry používány jako forma reklamy výrobku, firmy nebo například filmu. 12

14 Aktuální verzí je Adobe Flash Profesional CS4 GIF GIF (Graphics Interchange Format) je grafický formát určený pro rastrovou grafiku. GIF používá bezeztrátovou kompresi LZW84, na rozdíl například od formátu JPEG, který používá ztrátovou kompresi. GIF je tedy vhodný pro uložení tzv. pérovek (nápisy, plánky, loga). GIF umožňuje také jednoduché animace. GIF má jedno velké omezení maximální počet současně použitých barev barevné palety je 256 (8 bitů), v případě animace pak umožňuje využít odlišné palety 256 barev pro každý snímek. Toto omezení nemá formát PNG, který se hodí ke stejným účelům jako GIF a nabízí pro většinu obrazů výrazně lepší kompresi. Formát PNG však neumožňuje animace (ty umožňuje až APNG a MNG). Formát GIF se stejně jako formáty PNG a JPEG používá pro WWW grafiku na Internetu. 2.5 Dynamické generování stránek SSI - do HTML se vkládají příkazy jako poznámka, které www server provede:<!--#příkaz parametr="hodnota"--> Př. <body>. <!--#include virtual="/include/podpis.htm"--> </body>; #include - načtení externího souboru; 13

15 CGI skripty - Common GateWay Interface; - popis rozhraní, jak program komunikuje s www serverem; - definuje předání parametrů skriptu a převzetí výstupu; - je program, který používá rozhraní CGI; - lze je psát v téměř libovolném jazyce, stačí dodržet konvence rozhraní CGI; shell, Perl, C/C++, Pascal, Python; FastCGI - vylepšená varianta rozhraní CGI, snižuje zátěž serveru; - každý skript se do paměti načítá jen jednou, pak postupně obsluhuje další požadavky; skript je v paměti vykonáván opakovaně, musíme dávat velký pozor na přetečení paměti apod.; - aplikace musí používat speciální knihovnu, která implementuje rozhraní FastCGI ASP - do HTML textu jsou vloženy příkazy nějakého skriptovacího jazyka, které server vykoná před odesláním stránky, např.: JScript, VBScript; - příkazy se vkládají pomocí <%, %>; - jazyk skriptů se určuje pomocí <% language=jazyk %> PHP - skriptovací jazyk na straně serveru založený syntakticky na jazycích C, Java, Perl; - je volně dostupný a nezávislý na platformě; - má rozsáhlou knihovnu funkcí; - práce s řetězci, umí přistupovat k databázím pomocí SQL; - podporuje rozhraní API pro přístup k velkému počtu databází pomocí SQL. Zápis PHP skriptů - skripty se zapisují do HTML stránky mezi značky <??> Př: <? if (date("a")=="am") { echo "Dobré ráno!"; } else { echo "Dobré odpoledne!"; }?> 3. Obecné zásady Každý subjekt, který uvažuje o tvorbě svých internetových stránek by si měl v první fázi uvědomit, co od tohoto kroku očekává. Po provedení podrobné analýzy by měl tato očekávání promítnout do vlastní webové prezentace. Tento úkol pak přenechat odborníkům (různým reklamním agenturám, týmům webových designérů apod.), kterým je důležité naše přání a požadavky vysvětlit a dále s nimi spolupracovat při tvorbě stránek. I když mnoho lidí nemá s vytvářením internetových stránek žádné zkušenosti, vyžaduje jejich realizace pouze používat zdravý selský rozum. Důležité je, aby stránky byly použitelné, tzn. aby i osoba s průměrnými či podprůměrnými schopnostmi a zkušenostmi byla schopna používat stránky k účelu, ke kterému byly vytvořeny, aniž by museli nad jejich funkčností dlouho přemýšlet. Faktem je, že značná část provozovatelů internetových stránek si vůbec neuvědomuje, jak velkou daň platí ročně za špatnou použitelnost svých stránek. 14

16 3.1 Hierarchie Má-li být stránka snadno a rychle pochopitelná, je důležitý její vzhled, aby všechny vizuální podněty jasně a přesně vypovídaly o vztahu mezi objekty na stránce: co spolu souvisí a co je součástí něčeho jiného. Každá stránka by měla mít jasnou vizuální hierarchii a splňovat tyto základní parametry a vlastnosti. Čím je informace důležitější, tím by měla být nápadnější. Nejdůležitější nápisy jsou buď větší, tučnější, mají jinou barvu, případně kombinace těchto parametrů. Objekty, které spolu logicky souvisí jsou propojeny také vizuálně. Objekty by měly být vizuálně zanořeny, aby bylo zřejmé, co je částí čeho. Dobře zvládnutá vizuální hierarchie nám ušetří práci tím, že nám obsah stránky předzpracuje, zorganizuje a určí priority (není problém ji pochopit). Pokud ji však stránka nemá, vše vypadá stejně důležitě a jsme nuceni k mnohem pomalejšímu pročítání. Rozdělení stránky na jasně definované oblasti je důležité, protože se uživatelé mohou rychle rozhodnout, na které oblasti se zaměřit a které ignorovat. 3.2 Zbytečná slova Obecné pravidlo zní: Ve stručnosti je síla. Věta by neměla obsahovat zbytečná slova, odstavce a nadbytečné věty stejného významu, stejně tak kresba by neměla obsahovat zbytečné linky a stroj nadbytečné součástky. Pokud si dáme tu práci a předem připravený text maximálně a efektivně zestručníme, bude to mít několik blahodárných účinků. Tím může být například snížení hladiny šumu na stránkách (nepodstatné věci zmizí), užitečný obsah bude nápadnější a uživatele předem neodradíme od zdlouhavého pročítání textu. Toto pravidlo je míněno především pro specifický text, jako je přátelský uvítací monolog nebo návod k obsluze (není třeba, pokud jsou stránky přehledné). Řada webů tento úvodní text obsahuje (i když od tohoto neformálního monologů řada jejich tvůrců upouští). Ten nám většinou oznamuje, jak jsou stránky či firma dokonalá, nebo co najdeme v té které sekci. Řada těchto neformálních předmluv, většinou sebechvalných 15

17 propagačních textů působí na mnoho lidí kontraproduktivně, nepřináší žádné užitečné informace, proto bych o nich zcela upustil. 3.3 Orientace na stránkách Uživatelé našich stránek nebudou používat web, pokud se v něm nezorientují. Účelem virtuálního obchodu je prodat zboží, účelem firemní prezentace je zprostředkovat návštěvníkům co nejrychlejší přístup k podstatným informacím o firmě. Účelem zpravodajského serveru je nabídnout rychlý a snadný přístup k článkům, které návštěvníka zajímají. Při hledání nějakého konkrétního výrobku, článku, sekce apod. na cizích stránkách většinou vycházíme z obdobné zkušenosti z kamenného obchodu. Při hledání požadovaného výrobku v podstatě využíváme navigační systém obchodu (ukazatele a organizační hierarchii, kterou ukazatele ztělesňují). Navigace na webu prochází do jisté míry obdobným procesem. Zpravidla se snažíme něco najít. Rozhodujeme se, zda máme začít hledat, nebo se nejprve zeptat. Proto bych doporučil umístit na webovou stránku vyhledávací pole. Zde je možné zapsat vyhledávané slovo nebo sekci. Je to šikovná pomůcka především pro lidi, kteří nejsou moc zvyklí prohledávat jednotlivé odkazy a i v reálném životě se na hledanou věc raději zeptají. Tyto vyhledávací pole bych umístil především na obsáhlejších stránkách, kde je široká struktura a hluboká hierarchie. Potom bude na každém uživateli, zda začne s prohlížením, nebo vyhledáváním, ale nepochybně značnou úlohu zde bude sehrávat přehlednost stránek. Pokud se uživatel rozhodne pro procházení, bude postupovat prostřednictvím ukazatelů, které ho povedou. Nejčastěji budou na hlavní stránce hledat seznam hlavních sekcí a klepat na odkazy, které jim budou připadat nejpříhodnější. 3.4 Důležitost navigace Jedním z klíčových faktorů ovlivňující úspěch či neúspěch webových stránek je jednoduchost, přehlednost a účelnost navigace. Proto vytváření navigačního systému by měla být věnována odpovídající pozornost. Její účely jsou poměrně zřejmé. Má nám pomoci najít to, co hledáme a říci, kde jsme. Dobrá navigace zajišťuje půdu pod nohama (i když jenom virtuální) a poskytuje opěrný bod, kterého se můžeme držet. Pokud rozumíme navigaci a pochopíme hierarchii, odkryje se nám 16

18 obsah webu. Pokud navigace splňuje svůj úkol, pak implicitně říká, kde máme začít a jaké máme možnosti. Správně navržená navigace by v sobě měla obsahovat všechny instrukce, které potřebujeme. Zvyklosti v reálném životě, které se vyvíjely po několik generací dnes už vnímáme intuitivně a nepřemýšlíme o nich. Navigační zvyklosti pro web se vyvinuly rychle a většinou byly převzaty z tištěných médií. Webový návrháři používají termín perzistentní navigace, jímž popisují řadu navigačních prvků, které se objevují na každé stránce serveru. Přítomnost navigace na stejném místě na každé stránce a její konzistentní vzhled nám dává neustále jistotu, že jsme na stejném serveru. Perzistentní navigace na každé stránce by měla obsahovat prvky, které potřebujeme mít po ruce (logo serveru, odkaz na domovskou stránku, vyhledávání, pomůcky, sekce apod.) Prvky navigace 1) Sekce je to primární navigace a jsou to odkazy na základní sekce serveru. Měla by obsahovat i místo na sekundární navigaci, tj. seznam podsekcí v aktuální sekci. 2) Pomůcky odkazy na důležité prvky serveru, které jsou přímou součástí hierarchie. Měly by být vyvedeny méně výrazným písmem než sekce. Pomůcky budou různé pro různé druhy serverů. 3) Domovská stránka respektive tlačítko nebo odkaz, který nás na tuto stránku přenese. Je to určitá jistota, že pokud se kdykoliv ztratíme nebo z nějakého jiného důvodu se potřebujeme dostat na výchozí stránku, toto tlačítko nám poslouží - může například suplovat logo serveru (na první stránce, kterou návštěvník vidí, by měly být všechny nejnovější a nejdůležitější informace, vše ostatní by mělo být z této strany snadno dostupné). 4 4) Vyhledávání značná část uživatelů dává přednost vyhledávání před brouzdáním, proto by mělo být na každé obsáhlejší stránce vyhledávací pole, případně odkaz na vyhledávací stránku. 4 Vstupní neboli domovská stránka by neměla obsahovat pouze logo či jiný obrázek větších rozměrů s nápisem vstupte 17

19 5) Zde se nacházíte navigace může utlumit pocit ztracenosti v prostoru stejným způsobem, jako značka zde se nacházíte na mapě náměstí či v informačním středisku. Na webu toho dosáhneme tím, že zvýrazníme aktuální pozici v navigačních panelech, seznamech nebo nabídkách, které se na stránce objevují. Aktuální pozici můžeme vyzdvihnout mnoha způsoby a umístit před ní ukazatel, změnit barvu textu, použít tučný text, inverzní tlačítko, změnit barvu tlačítka atd. Já osobně bych citlivě zkombinoval několik způsobů najednou. 6) Cesta šikovnou pomůckou v rámci stránek je cesta znázorňující směr od domovské stránky do aktuálního místa. Doporučoval bych ji umístit na začátek stránky nad všemi ostatními položkami. Nejvhodnějším oddělovačem jednotlivých úrovní je znak větší než > (vizuálně naznačuje pohyb směrem do nižších úrovní). Díky ní mohou uživatelé získat jasnou představu, kde se právě nachází, nezávisle se vracet do vyšších úrovní 5 a to i bez kompletní znalosti celé hierarchie serveru. Tuto navigaci bych spíše volil v případě, kdy není jedinou navigací. Měla by být vyvedena menším písmem, aby bylo jasné, že se jedná pouze o doplněk. 7) Záložky - v případě, že bych navrhoval nějaký větší server, volil bych tento velice dobrý navigační nástroj. Webový designéři stále usilují o to, aby byly stránky vizuálně zajímavé, aniž by to prodlužovalo jejich načítání. Záložky mohou stránky vylepšit a zároveň posloužit dobré věci bez nutnosti zvětšení fyzické velikosti stránky. Ouška vytváří iluzi, že se aktivní stránka přesunuje dopředu. Je to sice laciný trik, nicméně efektní a hlavně efektivní. Výsledek budí silnější dojem, že je server rozdělen na více sekcí a že jsme právě v jedné z nich. Aby záložka fungovala k plné spokojenosti, musí jejich grafická podoba vytvářet dojem, že aktivní záložka je před ostatními. Abychom dosáhli tohoto dojmu, musí být aktivní záložka vyvedena v jiné barvě nebo kontrastním odstínu a musí být fyzicky propojena s listem pod sebou. 5 Za běžných okolností je možné využít tlačítko zpět v Exploreru, ale to neplatí v případě, pokud se na stránku dostaneme přes nějaký odkaz 18

20 3.4.2 Optimálně navržené stránky Pokud jsou stránky optimálně navrženy, jsme schopni (pokud se dostaneme náhodně na stránku v útrobách nějakého webového serveru) bez váhání odpovědět na následující otázky: O jaký server se jedná a na jaké jsme stránce. Jaké jsou hlavní sekce tohoto serveru. Kde se nacházíme v hierarchii serveru a jakým způsobem můžeme vyhledávat. 3.5 Grafika a design To, co každého uživatele na našich webových stránkách většinou upoutá je grafika a design stránek. Prvořadý cíl navigace je funkčnost (ne až tak styl provedení), naopak design může kladně působit na čtenáře a může zvýšit jeho důvěru k danému webu. V žádném případě nedoporučuji rozptylovat návštěvníka zbytečnou grafikou, zvláště animovanou, to pouze odpoutává jeho pozornost od toho, kvůli čemu na naše stránky přišel. Řada autorů v euforii nad možnostmi, které publikování na Internetu poskytuje, své stránky zahlcují barvami, hýbajícími se obrázky a efekty všeho druhu. Obsahová stránka potom může za grafikou pěkně pokulhávat. Nepoužíval bych obrázky na pozadí, blikající či poskakující a jezdící texty a žádné hudební a zvukové efekty, které zbytečně zvyšují kapacitu stránek. Pokud stojíme o to, aby nás opakovaně navštěvovali i lidé s pomalejším připojením, neměla by velikost žádné z našich stránek překročit cca 100 kb. Nejrychleji se vždy načte holý text, základ stránky. Čím více obrázků a grafiky, tím je stahování pomalejší. Je důležité zvolit optimum, aby byly stránky zajímavé a zároveň rychlost načítání uspokojivá. Internetové průzkumy ukazují, že pokud uživatel neobdrží do 2 vteřin od požadavku text stránky, který by mohl číst, tak prudce roste efekt, kdy z této stránky odejde dřív, než se stihne načíst. Ušetřit na velikosti můžete jak redukcí grafiky tak například počtem reklamních ploch. 19

21 3.5.1 Barvy Barvy do značné míry určují první dojem, celkové vyznění stránek a jsou mocným nástrojem webového designu, ale jejich úloha není jen estetická. Vhodná volba barev totiž přímo ovlivňuje i použitelnost stránek. Já osobně zastávám názor, že s čím menším počtem barev se vystačí, tím lépe. Barvami bych zdůraznil strukturu stránek.. Pokud bude na naší stránce použito mnoho barev, obtížně se bude hledat to podstatné a může to mít rušivý vliv. Barevně bych především upozornil na důležité informace. Text v jasné barvě dobře kontrastující s pozadím si každý přečte jako první. Nesmí se však tímto prostředkem plýtvat, nebo ztratí na účinnosti Text Hlavním předpokladem je, aby text na stránce byl snadno čitelný. Nejlepší barevná kombinace je černé písmo na bílém pozadí. Pokud chceme být trochu výstřední (což u solidních firem nedoporučuji), můžeme použít místo bílého pozadí např. světle modré, případně zvolit inverzní kombinaci - bílé písmo na černém nebo velmi tmavém pozadí (tato kombinace však už může být při dlouhodobějším sledování nepříjemná pro oči). Jakékoliv jiné kombinace, zejména ty s malým kontrastem jsou nevhodné. Co se týče písma, navrhoval bych nemíchat na jedné stránce příliš mnoho druhů písem (fontů) Obrázky Na webu dnes prakticky není možné najít stránky, které by neobsahovaly alespoň jeden obrázek, ať už ve formě loga stránek, tlačítek či ikonek spřátelených serverů. Obrázky webové stránky velmi oživují a zpestřují. Důležité je, aby velikost obrázku, tam kde je to možné, byla co nejmenší. Nepoužíval bych pro stránky příliš velké obrázky, které by se čtenářům dlouze načítaly. Pokud to bude možné, zvolil bych na stránky malý náhledový obrázek, který po kliknutí myší otevře obrázek do 6 Jedinými fonty, které by se bez problémů měly zobrazit ve všech prohlížečích a operačních systémech, jsou Times New Roman CE, Arial CE a Courier. 20

22 nového okna v plné velikosti. Takové typické použití je u fotografií a ilustračních obrázků, které je potřeba publikovat na webu ve vysoké kvalitě. Jak jsem již uvedl, ne každý uživatel se připojuje přes kvalitní pevné připojení, proto je potřeba vyjít vstříc i těmto uživatelům. Každý větší obrázek bych rozřezal na jednotlivé části a ty pak opětovně složit v HTML tabulce. Takovéto obrázky se načítají mnohem dříve (čtenář má aspoň ten dojem). Jednotlivé části obrázku se načítají nezávisle na sobě a to je lepší než kdyby uživatel čekal nějakou dobu a pak se mu náhle zobrazil celý obrázek. Na stránky můžeme umístit i různé interaktivní prvky. Ty se snaží svým pohybem (či případnou reakcí na chování uživatele) zaujmout čtenáře webu. Možné je vytvořit i různé animované obrázky, kdy jeden soubor obsahuje několik obrázků, které se v zadaných intervalech střídavě zobrazují. Výsledný efekt pak budí dojem animace. Stránky mohou pak vypadat působivě a vždy je zajímavě oživí. Já osobně bych však tyto animace moc nedoporučoval. Lidé jsou dnes již přesyceni reklamou a vším, co ji jen zdánlivě připomíná. Na komerčně pojatých stránkách by neměly být všelijaké zbytečné animace a efekty sršící pohybem a barvami, to na serióznosti firmy moc nepřidá. 3.6 Administrace Pokud bychom vytvářely stránky, které je potřeba často a pravidelně aktualizovat (jako např. stránky týkající se nabídky realit), je důležité, aby dobře fungoval administrační systém. 7 Ten umožní jednoduše a pohodlně měnit obsah našich stránek, přidávat fotografie a udržet tak aktuálnost. To je důležité především proto, aby se lidé vraceli na náš web a nacházeli informace, které hledají. Pro naše pohodlí je dobré, abychom údaje, u kterých se předpokládá častá úprava, umístily na našich stránkách na takové místo, kde postačí pouze blok starých informací nahradit blokem novým (vložit nový text zabere pouze pár vteřin). Pokud bychom měli střípky variabilních částí ve složitě formátovaných tabulkách či rámech, zbytečně bychom si přidělávali práci složitou administrací. 7 Administrace - program/webové rozhraní/ určené k přidávání položek, mazání starých, změnám vlastností atd. Toto rozhraní je určeno majiteli/administrátorovi serveru 21

23 3.5.1 Prostředek pro komunikaci Co by na kvalitních stránkách nemělo chybět je prostředek pro komunikaci, prostřednictvím kterého s námi zákazník, dodavatel, obchodní partner a kdokoliv jiný může komunikovat 8. Umístil bych na stránky i případný formulář pro vyplnění dotazů a připomínek adresovaný přímo na odpovědného člověka. 3.7 Další důležité náležitosti stránek Další důležité náležitosti, které je potřeba dodržovat při tvorbě internetových stránek: Kompatibilnost webu s naprostou většinou prohlížečů Velikost stránky na šířku monitoru Korektně stanovené kódování češtiny webu 3.8. Viditelnost ve vyhledávačích Z prestižních, obchodních nebo jiných důvodů potřebujeme, aby se náš web umístil mezi prvními nalezenými odkazy ve vyhledávačích. Proto neméně důležitou věcí při umístění našich stránek na Internet je optimalizace webových stránek pro vyhledávače. Je to v podstatě soubor faktorů ovlivňujících, jak dobře se zvolená internetová stránka umisťuje ve výsledcích vyhledávání. Optimalizace stránek pro vyhledávače je nejefektivnější a nejlevnější způsob propagace naší webové stránky. Tato optimalizace nám pomůže v tom, že se naše stránka bude na vhodně vybraná klíčová slova či fráze umísťovat na předních pozicích výsledků vyhledávačů. Tím s velkou pravděpodobností zajistíme větší návštěvnost a získáme více uživatelů, kteří hledají to, co by na našich stránkách (vzhledem ke klíčovým slovům) měli najít. Tyto metody, předpisy a doporučení se odborně nazývají SEO / Search Engine Optimization /, optimalizace pro internetové vyhledávače. 8 Tím není myšlen odkaz na webmastera, který se bohužel na mnoha stránkách vyskytuje jako jediný komunikační prostředek 22

24 3.9 Reklama Neméně důležitou záležitostí po vytvoření internetové prezentace je snaha informovat širokou veřejnost o existenci webu. Aby si někdo naše zboží či službu koupil a uživatelé začali naše stránky navštěvovat pravidelně. U webu platí některá pravidla stejně jako u obchodu kamenného. Ke splnění těchto cílů je nutná propagace. Možností propagace našeho webu je celá řada a snažit se popsat všechny postupy by byla práce pro další assignment. Ve stručnosti se ty nejdůležitější pokusím nastínit. Prvním z nich je zavedení do internetových vyhledávacích služeb, jak již bylo popsáno v předchozí kapitole. Dalším a zřejmě nejznámějším a nejviditelnějším způsobem propagace webu je bannerová reklama. Laicky řečeno je tato proužková reklama pro web tím, čím jsou stránky reklamy pro časopis, reklamní šoty v televizi či billboardy pro reklamní tabule. Neméně účinnou reklamou je etablování v internetových médiích, pokud publikují v oboru, ve kterém působíme (aby o nás psali a udávali odkazy na náš web). V neposlední řadě je to výměnná reklama na spřízněných webech, na stránkách obchodních partnerů apod. Zaměstnancům firmy bych doporučil, aby uváděli adresu webu jejich zaměstnavatele v podpisu ových zpráv. Samozřejmě existuje celá řada dalších možností propagace mimo Internet, jako jsou vizitky, propagační materiály, drobné dárky apod., kde je důležité uvádět naši webovou adresu. Naopak na svých stránkách se reklamě (výměnné nebo v lepším případě placené) pravděpodobně nevyhneme. Je nutné pamatovat na to, že reklama je pro návštěvníka jen přítěž, která se ho navíc snaží přinutit k odchodu z našeho webu. Měli bychom ji proto používat opravdu střídmě. 23

25 4. Analýza stávajících webových aplikací Standardem pro vývoj webový aplikací je konsorcium W3C. Ten je tím bezesporu i hlavním hybatelem vývoje standardů pro web. Z jeho dílny vzešly fundamentální základy webu jako (X)HTML nebo kaskádové styly. W3C samozřejmě nevytváří jenom tyto dvě specifikace, ale celou řadu dalších. XHTML Jazyk XHTML je bezesporu nejznámější a nejrozšířenější aplikací XML. Jeho poslední verzí je zatím doporučení XHTML 1.1, kterému se celkem podařilo zbavit většiny neduhů po svých předchůdcích. Přesto W3C nehodlá přešlapovat na místě a připravuje novou verzi XHTML 2.0. XHTML 2.0 první veřejný návrh, tato verze nebude zpětně kompatibilní. Toto rozhodnutí rozbouřilo diskuze na mnoha fórech a není se čemu divit. XHTML je nejdůležitějším jazykem celého webu a jakákoliv jeho změna s sebou vždy přinesla bouřlivé reakce. Doporučení pro XHTML 2.0 je zatím stále ve stádiu pátého pracovního návrhu (5th Working Draft) a zbývá ještě vyřešit spoustu problémů. Norma působí spíše rozporuplně. Na jednu stranu je snaha W3C vytvořit skutečně silný jazyk pro psaní stránek, zohledňující všechny aspekty webdesignu, ale zároveň některé kroky působí až příliš dogmaticky. Například úplné vypuštění elementu img ve prospěch obecného object není příliš šťastné. Obrázky jsou natolik specifickou součástí webu, že by si rozhodně zasloužily ponechat vlastní element. Dalším krokem, kterým si nejsem zcela jist, je vypuštění formulářů z XHTML doporučení a jejich nahrazení vlastním jazykem XForms. Stávající formuláře jsou podle mě jednoduchým a přitom silným nástrojem, jak získávat data od uživatelů. Nevím, jestli jejich nahrazení novou složitou XML aplikací je zrovna nejvhodnější. Naopak Inline Text Module, ve kterém je soustředěna většina značek pro sémantické značkování textu, zůstává pro mě zcela nepochopitelně téměř beze změn. Uvažuje se pouze o vypuštění elementu strong, k čemuž nevidím žádný rozumný důvod. Mám pocit, že právě na značky pro sémantické členění textu by měl být kladen hlavní důraz. 24

26 V každém případě asi uběhne ještě hodně času, než finální doporučení XHTML 2.0 spatří světlo světa. Uvidíme, k jakým změnám za tu dobu ještě dojde. Kaskádové styly Stejně jako u XHTML, již delší dobu se chystá novinka i ve světě kaskádových stylů, v podobě CSS3. Už předchozí doporučení bylo poměrně komplexním dokumentem, jehož všechny možnosti zatím neimplementoval ani jeden z prohlížečů (i když Mozilla i Opera jej zvládají na velmi slušné úrovni). A CSS3 hodlá jít ještě dále. Modularizace Největším rozdílem oproti CSS2 je rozdělení celého CSS3 do několika nezávislých modulů, které jsou schvalovány samostatně, jde tedy o samostatná doporučení. W3C si od tohoto kroku slibuje zpřehlednění celého doporučení, včetně možnosti odkazovat zvlášť na jednotlivé moduly místo na jeden obrovský dokument. A také prohlížeče si mohou vybrat, které moduly budou podporovat. Nové selektory Co se týče novinek ve třetí verzi kaskádových stylů, především na nás opět čeká další dávka selektorů. Zlepšena bude práce s hodnotami atributů. Nově budeme moci využívat i negaci selektorů pomocí pseudo-třídy :not(), například selektor :not([href]) vybere všechny elementy, které nejsou zároveň odkazem. Velký posun dopředu je patrný i v oblasti pseudo-tříd a pseudo-elementů. Půjde vybírat například elementy na základě toho, zdali obsahují určitý text, nebo v závislosti na pořadí ve svém rodičovském elementu. Takto bychom měli být schopni velmi jednoduše zařídit, aby se liché řádky tabulky vykreslovaly jinou barvou než sudé a aby první a poslední řádky byly zvýrazněny. Přibude také nová várka pseudo-tříd pro práci s prvky formulářů. Nově mohou být v selektorech brány v potaz i jmenné prostory (namespaces), z čehož lze vidět snahu přiblížit CSS více obecnému XML než jeho konkrétní aplikaci, XHTML. Popis chování elementu Jedna z podstatných novinek se skrývá v modulu BECSS, neboli Behavioral CSS. Jde o metodu, pomocí níž lze přiřazovat elementům pomocí klasických selektorů nikoliv pouze 25

27 vzhled, ale i chování, vyjádřené prostřednictvím klientského skriptu. Pokud BECSS nalezne podporu v prohlížečích, půjde o velmi užitečnou technologii. Samozřejmě ne všechny úlohy lze řešit pomocí klientského skriptování, ale například takové často používané grafické efekty jakým je třeba rollover si o takovou technologii přímo říkají. Vícesloupcové rozvržení V CSS3 se také poprvé setkáme s vícesloupcovým rozvržením. Odstavcům budeme moci nastavit, aby jejich obsah byl vykreslen do více sloupců namísto nynějšího jednolitého boxu. Samozřejmě půjde ovlivnit počet sloupců, mezera mezi nimi a přibudou i další vlastnosti. Uvidíme, jestli nám tato novinka také pomůže s CSS layoutem stránek, který se dnes řeší především pomocí pozicování. Podpora stránkových médií Nejnovějším přírůstkem do rodiny specifikací CSS3 modulů je další pracovní verze modulu Paged media, zabývajícího se podporou pro stránková média, tedy především pro tisk. Oproti CSS2 mají webdesigneři mnohem více možností, jak ovlivnit výslednou prezentaci dokumentu. Nově půjde definovat například záhlaví a zápatí, číslování stránek nebo odkazování na danou stránku pomocí jejího čísla. Další novinky Novinek je pochopitelně mnohem více, obvykle jde o vylepšení nebo upřesnění již stávajících vlastností. Několika zajímavých změn se dočkáme třeba v modulu Borders, který se celý točí okolo okrajů elementů. Nově budeme moci nastavit stín pod okrajem nebo zakulatit rohy. Větší podpory se dočkají i dvě známé XML aplikace, MathML a hlavně SVG. Mimo již existujících vlastností se objeví i některé nové určené přímo pro práci s těmito jazyky. Ačkoliv se předpokládalo, že v CSS3 budou poprvé standardizovány filtry (statické grafické efekty), zdá se, že tomu tak nakonec nebude. Aniž bych zde chtěl polemizovat nad jejich užitečností, domnívám se, že rozhodně nejde o zásadní ztrátu. Podobně jako na XHTML 2.0 si ještě nějakou dobu počkáme i na CSS3. Jednotlivé moduly jsou v různých stádiích rozpracovanosti, od prvních návrhů až po finálních doporučení. 26

28 XML Specifikace XML 1.0 se ukázala být skutečně odolným dokumentem. Od svého vydání v roce 1998 se dočkala pouze upřesňující druhé edice (XML 1.0 Second Edition), publikované v roce Ve stavu kandidáta na doporučení (Candidate Recommendation) se nachází revize XML s pořadovým číslem 1.1. A opět se ukazuje, nakolik trvanlivým a kvalitně připraveným dokumentem původní XML bylo. Změn je opravdu minimum a týkají se především podpory Unicode 3. Zatímco se samotným XML se toho příliš neděje, situace je mnohem zajímavější u doporučení, které rozšiřují samotné XML nebo definují jazyky pro práci s ním. Transformace Rodina jazyků XSL (XSLT, XPath a XSL-FO) slouží k definování transformace jednoho XML dokumentu do libovolného jiného a často se používají pro převádění XML do XHTML. Jazyk XPath se používá k identifikaci jednotlivých částí XML dokumentů, které se označují pojmem uzly. Mimo transformací jej používá také například jazyk XPointer. Hlavním transformačním jazykem je XSLT. Je to aplikace XML, definující šablony, popisující samotnou transformaci XML dokumentů. Obě dvě specifikace se nyní nacházejí ve verzi 1.0, ale připravují se jejich dvojkové verze. Oba jazyky by měly vyjít současně tak, aby se mohly co nejlépe doplňovat. XQuery Zajímavou technologií jsou tzv. nativní XML databáze. Jde ve zkratce o úložiště XML dokumentů. Ovšem databáze nikdy nebude úplná bez svého dotazovacího jazyka. Zatímco ve světě klasických relačních databází vládne jazyk SQL, XML zatím nic podobného nemá. Zatím se dotazovací jazyk nad XML realizoval pomocí XSL transformací (tedy transformací vstupního XML dokumentu do výstupního dokumentu obsahujícího podmnožinu informací ze vstupu), W3C ale vytváří vlastní dotazovací jazyk XQuery. Momentálně je ve stádiu pracovního návrhu. Jazyky pro odkazy Jazyk XLink předkládá obecnou syntaxi založenou na XML pro vytváření odkazů mezi dokumenty, tedy zobecnění atributu href jazyka XHTML. Zatímco v XHTML můžeme takto definovat pouze jednosměrný odkaz, XLink nám nabízí mnohem více možností a především 27

29 je použitelný v libovolném XML dokumentu. Verze XLink 1.0 je ve stádiu finálního doporučení a další se nepřipravuje. S podporou prohlížečů to ale není zrovna nejlepší, pouze Mozilla dokáže zpracovat alespoň základní typy XLink odkazů. XPointer je samostatným rozšířením XML. Představuje syntaxi určenou pro odkazování na určitá místa v XML dokumentu v rámci URL adresy. V XHTML jsme zvyklí na odkazy URL končící znakem # a řetězcem, které odkazují na element s id='řetězec'. XPointer toho opět nabízí daleko více, například odkazování na určité elementy v XML dokumentech, ke kterým nemáme přístup a nemůžeme ovlivnit jejich ID, nebo odkazování na určité rozsahy elementů. K lokalizaci potřebných elementů používá XPointer výrazy jazyka XPath. Doporučení zatím není kompletní, jeho tři části XPointer Framework, XPointer element() scheme a XPointer xmlns() scheme jsou už finálními doporučeními, ale nejdůležitější čtvrtá část XPointer xpointer() scheme používající k lokalizaci právě jazyk XPath je stále ve stádiu pracovního návrhu. DOM DOM, neboli Document Object Model, je specifikací zásadního významu. Jde o programovací rozhraní nezávislé na použitém jazyce, postavené na principech objektově orientovaného programování pro dynamický přístup k elementům XML dokumentu. Své hlavní uplatnění zatím našlo především v dynamických klientských skriptech používaných v XHTML, kde alespoň trochu pomohlo pročistit džungli, která má kořeny už ve válce prohlížečů Internet Explorer a Netscape Navigator o dominaci na webu. Poslední specifikací je DOM 2, nyní se ale připravuje třetí verze skládající se z pěti dokumentů, jejichž stav se pohybuje od pracovních návrhů až po kandidátské doporučení. Odkazy na jednotlivé dokumenty všech specifikací naleznete na stránce Document Object Model (DOM) Technical Reports. SVG SVG je velmi ambiciózní aplikace XML určená pro popis dvourozměrné vektorové grafiky. Její nejnovější doporučení je verze SVG 1.1. Připravuje se další verze normy SVG 1.2, která bude hlavně rozšířena o větší podporu tekoucího textu. Dokument je nyní ve stádiu třetího pracovního návrhu. 28

30 AJAX AJAX (Asynchronous JavaScript and XML) je poměrně nová technologie. AJAX je obecné označení pro technologie vývoje interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich znovunačítání. Na rozdíl od klasických webových aplikací poskytují uživatelsky příjemnější prostředí, ale vyžadují použití moderních webových prohlížečů. Tyto aplikace jsou vyvíjeny s využitím technologií: HTML (nebo XHTML) a CSS pro prezentaci informací; DOM a JavaScript pro zobrazování a dynamické změny prezentovaných informací; XMLHttpRequest pro asynchronní výměnu dat s webovým serverem (typicky je užíván formát XML, ale je možné použít libovolný jiný formát včetně HTML, prostého textu, JSON či EBML). Podobně jako DHTML, LAMP nebo SPA, Ajax ve skutečnosti není konkrétní jednotlivá technologie, ale pojem označující použití několika technologií dohromady s určitým cílem. Problémem AJAXových aplikací může být síťová latence: potřeba komunikace přes Internet má negativní dopady na rychlost odezvy a interaktivitu uživatelského rozhraní. Pokud uživateli není jasně signalizováno, že aplikace zpracovává jeho požadavek (a na pozadí komunikuje se serverem), jediné, co zaregistruje, je zpožděná reakce (mezitím se dokonce může snažit operaci spustit znovu, neboť se domnívá, že systém jeho příkaz ignoroval). Další nevýhodou AJAXu je nutnost používat moderní grafické prohlížeče, které podporují potřebné technologie. (Všechny dnešní běžné prohlížeče však tyto technologie alespoň v základu podporují.) JSON Další vcelku mladou technologií je JavaScript Object Notation (JavaScriptový objektový zápis, JSON) což je způsob zápisu dat (datový formát) nezávislý na počítačové platformě, určený pro přenos dat, která mohou být organizována v polích nebo agregována objektech. Složitost takovéto hierarchie je přitom teoreticky neomezená. 29

31 JSON umí pojmout pole (hodnot), objekty (coby pole dvojic název:hodnota) a jednotlivé hodnoty, kterými mohou být řetězce, čísla (celá i s plovoucí desetinnou tečkou) a speciální hodnoty true, false a null. Názvy polí v objektu mají notaci shodnou s řetězci; řetězce jsou uváděny v uvozovkách a escapovány pomocí zpětného lomítka. Navzdory názvu, JSON je zcela obecný a může sloužit pro přenos dat (navíc, čitelný pro člověka) v libovolném programovacím nebo skriptovacím jazyku. Data, zapsaná metodou JSON, mohou být samozřejmě uložena a přenášena v souborech; častěji ale přenos probíhá v prostředí intra- nebo internetu (např. s použitím technologie AJAX). Mezi nedostatky JSON patří to, že neumožňuje definovat znakovou sadu přenášeného obsahu, chybí též definice znaku/znaků konce řádků, nedefinování pravidel pro přenos binární data (tedy např. znaky s ASCII kódy ) a nemožnost přenášet indexovaná pole/hashe. 5. Přílady řešení Samotnému vývoji určité webové aplikace předchází etapa analýzy požadavků, návrhu a validace řešení. Před samotným zahájením prací vedoucí projektu efektivně komunikují s odpovědnými pracovníky zákazníka. Výsledkem této otevřené komunikace je písemné stanovení: Specifikace požadavků klienta Přesná definice cíle projektu Přesná definice rozsahu projektu Definice pravidel komunikace Upřesnění výše rozpočtu a jeho čerpání Závazným dokumentem pro obě smluvní strany je zadání specifikace projektu, které obsahuje: Cíle projektu Rozsah projektu 30

32 Očekávání klienta Funkční specifikace projektu Technická specifikace řešení projektu Požadavky na obsah projektu Zajištění zdrojů obsahu Požadavky na marketing Požadavky na grafické zpracování Požadavky na uživatelské rozhraní Požadavky na bezpečnost Požadavky na procesní návaznost Požadavky na systémovou integraci Rizika řešení a návrh na jejich minimalizace Časový harmonogram projektu včetně podrobného popisu jednotlivých fází Výstupní dokumenty Rozepisovat jednotlivé body výše uvedených procesů zde nebudu, v této práci jde hlavně o webové aplikace jako takové, procesy vývoji předcházející by už mohly tématicky naplnit obsah samostatného zadání jiné práce. 5.1 Návrh struktury webu a navigace Obsah a struktura S výjimkou některých aplikačních webů by měly být všechny weby uspořádány do pyramidové struktury. Úkolem je tedy uspořádat návrh svého webu do základní struktury. Zcela na vrcholu pyramidy si představme titulní stránku. Pod ní poskládáme první úroveň podstránek, které většinou reprezentují základní rubriky/sekce webu a jsou většinou velmi prioritní. V této fázi zatím zapomeneme na navigační mechanismy webu, na ně přijde čas později. Pod první úroveň pak poskládáme další úrovně a propojíme je vazbami. Vznikne tak přehledný strom, který reprezentuje základní informační architekturu webu, ze které bude pro každou stránku patrné, do které větve patří, co je její nadřazenou stránkou (tzv. rodič) a co jsou naopak podřízené stránky (tzv. potomci). 31

33 Obsahové prvky a funkcionalita Jakmile jsem poskládali stránky do struktury, přišel čas na bližší popis jednotlivých obsahových součástí a funcionalit. Je třeba být skutečně důkladný a popisný. Představme si, že někdo jiný bude náš popis číst a bude to programovat. Měl by jednoznačně vědět, co si pod daným obsahovým prkvem představujeme a jakým způsobem chceme mít provedené jednotlivé funkcionality. Vezmeme-li tuto fázi budování firemního webu vážně a definici obsahu, funkčnosti a struktury nepodceníme, ušetříme si spoustu těžkostí ve fázi samotné výroby. Vyhneme se celé řadě komunikačním šumů, které bývají časté právě v situaci, kdy se projektová příprava pojme spíše vágně. Struktura webu, navigace, menu Tyto 3 pojmy spolu souvisí, a proto se často zaměňují. Zde je jejich krátké představení: Struktura pokud možno logicky uspořádává a rozděluje jednotlivé informace na stránky podle různých souvislostí. Pod pojmem navigace se ukrývají konkrétní ovládací prvky (odkazy, tlačítka, formuláře apod.), které uživateli umožňují pohyb mezi stránkami, uspořádanými ve struktuře. Menu je jen jedním z navigačních prvků. Většinou je řešené jako skupina setříděných odkazů. Struktura webu Kvalitní struktura webu napomáhá tomu, aby se uživatel lépe orientoval v informacích, které mu stránky nabízí. Na její význam se často zapomíná. Struktura většiny webů by měla být stromová. Pro potřeby firemních webů a e-shopů si s touto strukturou vystačíme. 32

34 Vytvářejte stromovou (pyramidovou) strukturu Stromová struktura je jednoduchý model, ve kterém mají informace jediné místo, jsou seřazené do kategorií a jsou mezi sebou nadřízené a podřízené. Pokud je to potřeba můžete vytvořit pro jeden web více struktur. Jedna z nich bude hlavní a ostatní doplňkové. Nejpohodlnější a nejrychlejší způsob, jak vytvořit strukturu stránek je jednoduše okopírovat produktový katalog, nebo organizační strukturu firmy či instituce. Tento způsob je velmi konfortní a vskutku je to také jedna z nejhorších variant. Bohužel je také velmi často využívaná. Podle toho také vypadá velké množství e-shopů, či stránky různých institucí. Detaily a rozcestníky Je třeba určit, které stránky budou představovat nějaký detail a které budou pouze rozcestníky (kategorie, sekce, rubriky apod.). Detail je obvykle taková stránka, kterou uživatel hledá. V e- shopu jsou typickým detailem jednotlivé stránky zboží, ale také stránky kontakt, obchodní podmínky apod. I detail může mít podstránku např. upřesnění informací, informace pro odborníky apod. Typickými rozcestníky jsou kategorie zboží v e-shopu, služeb nebo titulní stránka. Uživateli by měl rozcestník dát na výběr a pomoci mu najít detail, který hledá. I na stránce, která je spíše rozcestníkem, musí být nějaký obsah. Při návrhu struktury tedy zvažujte, jestli vytvořená kategorie bude pro uživatele přínosná a dostatečně návodná, aby se zde dokázal uživatel rozhodnout, kudy a kam dál. Volba vhodného kritéria Při návrhu struktury musí být vždy jasné, podle jakých kritérií budeme strukturu tvořit. Struktura e-commerce webu nejčastěji odráží strukturu nabízených produktů nebo služeb. Např.: hlavní část struktury webu autobazaru může vzniknout podle značek vozů, typu jejich karoserie, stáří, nebo mnoha jiných parametrů. Ne každá firma ale může vybírat z tolika kritérií. 33

35 Hlavní struktura bude uživatelům nejvíce na očích, a tak by měla být co nejsrozumitelnější a nejnázornější. Podle hlavní struktury se většinou vytváří i hlavní navigace. Je třeba zvážit, jaké cilové skupině bude struktura sloužit a s jakým cílem na náš web budou lidé přicházet. Např.: Stránky úřadu určené pro úředníky by měly mít jinou strukturu než stránky stejného subjektu určené pro firmy a občany. Více cílových skupin je někdy možné obsloužit pomocí vedlejší struktury. Vedlejší struktura ale nemusí být stoprocentní řešení a nejspíš bude potřeba vytvořit obsah pro nově vzniklé kategorie. Různé cílové skupiny se liší nejen v požadavcích, ale také v chápání problematiky a používané terminologie. Strukturu tedy musíme přizpůsobit hlavně potřebám lidí, kterým bude sloužit. Navigace Pro návrh ideální navigace neexistuje žádný recept. Vždy je nutné uvažovat v zájmu uživatele a z pohledu toho, co může web nabídnout. Základní navigace Základní navigace většinou odpovídá základní struktuře webu a často je zobrazena jako kombinace hlavního a lokálního menu. Hlavní navigace Snad každý vícestránkový web obsahuje hlavní navigaci. Obvykle se jí říká menu. Vyskytuje se na každé stránce a obvykle obsahuje odkazy na hlavní sekce webu, nebo na podsekce. Hlavní menu bývá realizováno jako horní vodorovná navigace, nebo postranní menu (svislá navigace) častěji se objevuje na levé straně, ale zejména u obsahových stránek a blogů je stále častěji můžeme najít v pravém sloupci. 34

36 Lokální (místní) navigace Na podstránkách webu se často objevuje tzv. lokální navigace, která obsahuje odkazy na vnitřní stránky sekce či podsekce, ve které se uživatel právě nachází. Lokální navigace se nejčastěji vyskytuje na levé nebo pravé straně jako součást svislého hlavního menu (rozbalená část menu), nebo doplněk horního menu. Méně často se vyskytuje ve vodorovné podobě pod horním menu. Rozbalovací menu Čím dál méně populární je dynamicky rozbalovací menu, která se rozbaluje při najetí myši na položky. Nejčastěji se objevuje ve vodorovné formě, která je obvyklá i v počítačových programech. Méně často je k vidění ve svislé podobě. Rozbalovací menu často obsahuje celou základní strukturu. Z pohledu tvůrce webu je nutné říci, že k zajištění funkčnosti rozbalovacího menu se používají technologie, které v některých prohlížečích nefungují (kapesní počítače, čtečky handicapovaných občanů, textové prohlížeče), proto je nutné k dynamické navigaci vytvořit alternativu, která umožní používání webu i těmto uživatelům. Drobečková navigace (breadcrumb) Obvykle se vyskytuje nad hlavním nadpisem stránky. Má za úkol vyznačovat polohu aktuální stránky v hlavní navigační struktuře a zároveň umožnit rychlý přesun na stránky umístěné výše ve struktuře. Navigační stránky (rozcestníky) O rozcestnících už byla řeč v souvislosti se strukturou. Jedná se o stránky, které samy nemají žádný vlastní obsah a představují tedy pouze cestu k detailu (obsahu na stránkách). Typickou navigační stránkou je úvodní stránka zpravodajského serveru, úvodní stránky jeho rubrik či přehled článků podle autorů. Navigačními stránkami jsou i výpisy zboží v elektronických 35

37 obchodech či výsledky vyhledávání vyhledavače. V povídání o struktuře byly nazvány jako rozcestníky. Kontextová navigace Pouze se základní navigací si vystačíme pouze u malých webů a i tam bude uživateli mnohdy chybět nějaký ten kontextový odkaz odkaz, který v souvislosti s obsahem konkrétní stránky odkazuje na jiné místo na stránkách (či na jiný web). Kontextová navigace tedy spojuje související stránky, které nemusí být ve struktuře vedle sebe a pomáhá uživateli najít detailnější nebo příbuzné informace, o kterých se píše jinde na webu. Kontextová navigace se tedy vyskytuje jako odkazy přímo v textu obsahu, nebo jako samostatný blok odkazů na související stránky. Kontextová navigace je velmi vítaná a velmi pomáhá nejen uživateli v orientaci na webu, ale je prospěšná při optimalizaci pro vyhledávače a často se za tímto účelem používá cíleně. Alternativní a fasetová navigace Je-li obsah webu velmi rozsáhlý a jde-li na něj pohlížet z různých úhlů, nemusí jedna základní struktura k jeho přehlednému uspořádání stačit. V takovém případě může být vytvořeno více tzv. klasifikačních schémat, které obsah utřiďují podle různých kritérií. Zmiňovaný autobazar může tedy třídit auta podle značek (základní struktura), ale také podle alternativních struktur: pobočky, na kterých se auta nacházejí, podle roku výroby a mnoha dalších kritérií. Každé z nich může být pro uživatele přínosné. Podle méně důležitých kritérií lze vyhledávat nebo třídit v seznamech, ta důležitější kritéria mají své vlastní ovládací prvky. Nástroje Zajímavé služby, které lze uplatnit téměř na celém webu, nespadají do klasických prvků navigace, ale je dobré na ně odkazovat. Obvykle jsou to např. tisk stránky, doporučení známému, přidání do oblíbených položek, odeslání dotazu k produktu. 36

38 Mezi nástroje se ale také dá zařadit fulltextové vyhledávání umístěné na každé stránce, nebo různé parametrické vyhledávání typické pro cestovní agentury, elektronické obchody, autobazary apod. U uživatelů jsou tyto prvky oblíbené, ale musí být opravdu dobře zpracované, aby z nich lidé měli odpovídající zážitek. Pozornost by se měla věnovat nejen samotnému vyhledávacímu formuláři, ale ještě více stránce, která zobrazuje samotné výsledky. Pomocná navigace Velmi často se na webech vyskytují důležité odkazy v zápatí stránky kontakty, právní doložka, mapa stránek apod. Mapa webu Již zmíněná mapa stránek je poměrně často používaným navigačním prvkem. Je to jedna či více stránek, které přehledně shrnují obsah celého webu s odkazy na všechny jeho stránky či alespoň sekce. 5.2 Návrh funkčních prvků Při praktickém návrhu firemního webu si zpravidla nevystačíme jen s popisem grafiky stránek, obsahu webu a jeho struktury. reklama V drtivé většině případů budeme muset definovat také alespoň základní funkční prvky, jejich vzhled a zejména chování. Které funkční prvky použít Nejsložitější je v tomto ohledu samozřejmě návrh ucelených webových aplikací, například internetového obchodu. Pokud se ale budeme držet v intencích běžného firemního webu, setkáme se většinou jen s několika obvyklými funkčními prvky, typicky s vyhledáváním, kontaktním formulářem nebo registrací do newsletteru. Při vymýšlení, které funkční prvky na svých stránkách použijeme, je třeba vycházet z charakteru webu a skutečných potřeb našich návštěvníků. Zároveň musíme respektovat i 37

39 technické možností či rozpočtová omezení. Je tedy například zbytečné nabízet formulář pro registraci a přihlašování uživatelů jenom proto, abychom ho na stránkách měli, když vlastně nemáme registrovaným uživatelům co nabídnout. Stejně tak nemůžeme zobrazovat formulář pro vlastní fulltextové vyhledávání, pokud nemáme k dispozici žádnou technologii, která by zajistila vracení kvalitních a relevantních výsledků hledání. Způsoby návrhu Vývojáři našeho webu musíme předat popis jednotlivých funkčních prvků. Požadované chování se dá zachytit pomocí některého z následujících prostředků či jejich kombinace: Popis funkcí prostý textový popis chování funkce, vstupů a výstupů za různých okolností. Use case diagramy diagramy zobrazující interakci mezi uživatelem a funkcí. Textové use case diagramy fungují stejně jako klasické use case diagramy, pouze se nevyjadřují graficky. Jedná se o zápis interakce v podobné posloupnosti jako interview (dotaz uživatele, odpověď systému, dotaz uživatele, odpověď systému...). Procesní diagramy Při sepisování specifikace bychom měli být důslední a požadované chování popsat do posledního detailu. Předejdeme tak častým nedorozuměním, obtížným dodatečným opravám a změnám. Obecné vlastnosti formulářů Většina funkčních interakcí s uživatelem se na webu děje pomocí formulářů. Pro ty platí obecně několik zásad, kterých bychom se měli držet. Účel formuláře by měl být uživatelům zcela jasný. Neměli by být na pochybách, k čemu slouží, proč a jak ho mají vyplňovat a co se stane, až jej odešlou. Obvykle jej stačí doprovodit výstižným titulkem či krátkým a popisným textem. Je sem také dobré zakomponovat nějakou výzvu, která povzbudí uživatele k použití formuláře. Každý formulář by měl být co nejkratší a požadovat jen nejnutnější informace. 38

40 Dlouhý formulář je vhodné rozdělit do více postupných kroků v podobě průvodce. V opačném případě může jeho rozsáhlost odradit uživatele od vyplnění. Například u kontaktního formuláře si vystačíme zpravidla se třemi vstupními poli pro jméno, kontakt a samotnou zprávu. Jakékoliv další položky (jako je předmět zprávy, firma, funkce nebo pět dalších kontaktů) jsou obvykle zbytečné. Stejně tak pro vyhledávání stačí na běžných stránkách nabízet pouze jedno vstupní pole pro hledanou frázi a odesílací tlačítko, všechny další volby či rozšířené vyhledávání je dobré nechat až na speciální stránku. K objednání newsletteru zase stačí vyplnit a je zbytečná jakákoliv registrace s uživatelským jménem a heslem. U jednotlivých prvků formuláře se musíme rozhodnout, zda je jejich vyplnění povinné či volitelné. Povinná pole musíme vždy zřetelně odlišit, obvykle se k tomu používá hvězdička. Mají-li být údaje do pole zadávány v nějakém speciálním formátu nebo mohou-li být uživatelé na pochybách, v jakém formátu mají údaj uvést (typicky například datum), měli bychom jim to jednoznačně sdělit a nejlépe doprovodit i příkladem. Na druhou stranu by měly být formuláře schopny zpracovat a pochopit všechny obvyklé formáty (rodné číslo s lomítkem i bez lomítka, PSČ s mezerou i bez apod.). Po odeslání formuláře probíhá kontrola správnosti vstupních údajů, jejich formátu, vyplnění všech povinných položek apod. Při návrhu musíme specifikovat chování webu při všech případných chybách. Chybová hláška by měla být vypsána jasně a zřetelně, aby si jí uživatel okamžitě všiml. Nejlépe je výrazně označit inkriminované formulářové pole a chybovou hlášku vypsat přímo k němu. Po úspěšném odeslání formuláře je třeba určit, co se má stát se zadanými daty. V případě kontaktního formuláře si tedy budeme chtít nechat zprávu poslat na , u newsletteru přidat zadanou adresu do databáze odběratelů. Složitější to bude u vyhledávání. Tam musíme popsat přesný způsob, podle kterého se má vyhledávat, ve kterých oblastech webu hledat, zda používat rozšiřování dotazů o různé tvary slov a synonyma, jak následně výsledky vypisovat, podle čeho je řadit, zda a jak je seskupovat apod. Zvláštní specifikaci si pak vyžádá rozšířené hledání. Po bezchybném odeslání formuláře nesmí zůstat uživatel na pochybách, zda vše proběhlo v pořádku. U vyhledávání se tedy uživateli zobrazí výsledky hledání, u dalších formulářů je 39

41 ideální speciální potvrzovací či děkovací stránka, kde uživateli navíc nabídneme i možné odkazy, kam může na našem webu pokračovat dále. 5.3 Volba technického řešení Při výběru vhodného technického řešení se budeme rozhodovat na několika různých úrovních: Hardware Pro běžné informační firemní weby většinou postačí klasický sdílený webhosting. Pro náročnější aplikace je nutné se poohlédnout po vlastním dedikovaném serveru. V takovém případě pak přicházejí na řadu úvahy o jeho konfiguraci. Některé aplikace jsou výpočetně náročné a vyžadují zejména dostatečně rychlé procesory či velkou operační paměť, jiné naopak potřebují velký diskový prostor apod. Velmi náročné webové aplikace je pak nutné rozdělit na více serverů. Pokud může k takové situaci potenciálně dojít, je třeba s ní počítat již od samého počátku návrhu webu. Operační systém V dnešní době se budete s největší pravděpodobností rozhodovat mezi platformami Windows a Unix/Linux. Každá z nich přináší své výhody i nevýhody. Zpravidla je tato volba ovlivněna či přímo předem určena dalšími body. Jednotlivé operační systémy se liší svými vlastnostmi, možnostmi a způsobem konfigurace, náročností správy, cenou za pořízení atd. Vývojová platforma, programovací jazyk, databáze Tyto parametry se týkají tvůrce/programátora webu. Můžeme mít opodstatněné důvody požadovat nějakou konkrétní platformu či databázi, například kvůli propojení nového webu se stávajícími systémy apod. 40

42 Prezentační vrstva V neposlední řadě budeme muset určit aspekty samotného webu jako takového, tedy formát zobrazovaných informací a další použité technologie. V případě webu by měly být veškeré informace poskytovány prostřednictvím (X)HTML s důsledně oddělenou grafikou do CSS stylů. Jakékoliv jiné formáty či technologie (PDF, XML, Flash, JavaScript apod.) by měly být nabízeny jen alternativně. Faktory ovlivňující volbu technického řešení Nároky vašeho nového webu na software i hardware ovlivní zejména následující požadavky na jeho vlastnosti: Očekávaná funkcionalita webu Zde uvažujeme v rozmezí od jednoduchých statických informačních stránek, které se jednorázově vytvoří a umístí na některý sdílený webhosting, až po komplexní webové aplikace, využívající databáze a další technologie a běžící na jednom či více samostatných dedikovaných serverech. Flexibilita, rozšiřitelnost Ačkoliv se může zdát, že dnes spoustu funkcí vůbec nepotřebujeme, za půl roku může být vše jinak. Do jednoduchých stránek budeme chtít přidávat komunitní prvky, syndikovaný obsah apod. Zvolené řešení by mělo být flexibilní a mít možnost přidávat další vlastnosti, aniž by bylo potřeba předělávat celý systém od začátku. Škálovatelnost Stejně tak by jsme měli počítat s možným růstem náročnosti aplikace a potřebou zvyšovat výkonnost systému, posilovat a rozšiřovat současný hardware apod. 41

43 Snadná změna obsahu U jednoduchých statických stránek je obsah umístěn přímo v jednotlivých souborech. Pokud si ale budeme chtít sami průběžně měnit obsah svého webu, je nutné použít některý CMS nebo si vyvinout vlastní redakční systém. To má dopad na vyšší nároky na použitou platformu, potřebu nějaké databáze apod. Snadné zásahy do vzhledu Případné změny vzhledu webu by měly být snadné a nesmí znamenat nutnost přeprogramovat vše od základů. Web by měl být založený na šablonách, grafiku by měl mít důsledně oddělenou od (X)HTML obsahu do externích CSS souborů apod. Bezpečnost Logickým, často však ne zcela samozřejmým požadavkem je odolnost aplikace proti různým útokům a hackům. Nejde však jen o zlomyslné útoky hackerů na stabilitu systému či uchovávané informace, ale i o ochranu před komentářovým spamem a dalšími roboty apod. Měřitelnost, indexovatelnost Velká část dnešních existujících systémů má chyby, které ztěžují či přímo znemožňují měřitelnost, analýzu návštěvnosti, indexovatelnost ve fulltextových vyhledávačích. Jedná se například o duplicitní obsah na různých URL, závislost na klientských akcích (JavaScript, Flash) apod. Provázání s dalšími systémy Svůj web můžete chtít provázat s různými dalšími systémy, například interním skladovým hospodářstvím, fakturacemi či účetnictvím apod. Přes web můžete také nabízet zákaznický servis, call centrum, helpdesk. To vše ovlivní jak výběr konkrétní aplikace, tak i celé platformy či dokonce dodavatele. Jsou tu však i další faktory, které nesouvisí přímo s požadovanými vlastnostmi nového webu: 42

44 Očekávaný výkon a zátěž S ohledem na předpokládanou návštěvnost, zátěž serveru a traffic je nutné plánovat zcela vše, od volby hardware a operačního systému až po výběr konkrétního CMS, důraz na důsledné cachování apod. U potenciálně náročných či navštěvovaných aplikací je pak opět důležitá škálovatelnost systému. Stávající situace Často nestavíte systém na zelené louce a musíte přihlédnout k výchozí situaci. Můžete mít například již pořízený vlastní server s nějakou již používanou platformou nebo již existující aplikace či databáze, se kterými budeme chtít nový web propojit. 5.4 Samotný vývoj Teď tedy k samotnému vývoji. Popíšeme si pro názornost jak vytvořit jednoduchou statickou stránku. Doctype Pomocí doctype řekneme, v jakém "jazyce" je kód napsaný, aby ho mohl správně přeložit. Měli bychom se pak také tohoto držet kód stránky napsat skutečně tak, jak jsme v doctype deklarovali. Doctype pro stránku, napsanou v XHTML 1.0 Strict, může být <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Hlavička a tělo stránky Následuje ta část dokumentu, která je psána v HTML, čili hlavička a tělo. Ty budou společně uzavřeny do párového tagu <html></html>. Bavíme se o XHTML 1.0, takže podle specifikace by měl tento tag obsahovat takzvanou deklaraci xlmns: <html xlmns-" Tag pro hlavičku je <head></head>, pro tělo potom <body></body>. Celý kód stránky má tedy mít následující strukturu: <!DOCTYPE > <html xlmns-" <head> obsah hlavičky 43

45 </head> <body> obsah stránky </body> </html> Do hlavičky patří tagy <meta>, titulek stránky v tagu <title></title>, skripty, styly a podobně. Jinými slovy - bude v ní spousta užitečných informací, ale ne přímo obsah stránky. Titulek stránky Titulkem stránky nemyslím nadpis přímo ve stránce, ale titulek, který uvidíte v horní liště prohlížeče, také třeba v názvu panelu prohlížeče a rovněž na spodní liště (ve Windows). Je vhodné titulek používat, mimo jiné proto, že návštěvník stránky má usnadněnou orientaci při přepínání mezi otevřenými okny, protože vidí, které okno prohlížeče (nebo panel) obsahuje jakou stránku. Neméně důležitý je fakt, že vyhledávače, jako je například Google, dávají textu uvedenému v titulku stránky velký význam. Titulek stránky napíšeme do hlavičky do tagu <title></title>: <title>titulek stránky</title> Tagy <meta> Tag <meta /> je nepárový a nemůže se objevit jinde, než právě v hlavičce dokumentu. Jeho pomocí se nastavují různé systémové vlastnosti dokumentu; v začátcích byste neměli zapomenout na jeden, a to je tag pro kódování dokumentu. Tady může být zakopaný pes, když se vám na stránce nezobrazuje správně diakritika (písmena s čárkami a háčky). Je potřeba vědět, v jakém kódování je soubor uložen, a stejné kódování pak deklarovat tímto tagem. Budete-li používat například PSPad, máte možnost si kódování souboru zvolit (menu Formát). Poznámkový blok ve Windows automaticky ukládá text v kódování CP1250 (Windows 1250). Metatag pro toto kódování je: <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> Metatag pro kódování ISO je: <meta http-equiv="content-type" content="text/html; charset=iso " /> K dispozici jsou pochopitelně i další formáty pro případná jiná kódování; budete-li je potřebovat, jistě jejich vzory najdete. Předpis pro styl (vzhled) stránky Na tomto místě sluší říct, že do hlavičky patří buď odkaz na styl dokumentu, který je uložený v samostatném odděleném souboru, nebo přímo tento styl. Níže je ukázka odkazu na soubor se stylem: <link rel="stylesheet" href="styly.css" type="text/css" /> 44

46 Tělo stránky Mezi tagy <body><body> pak bude celý obsah stránky, to znamená to, co má na stránce skutečně být vidět, a to v (X)HTML; bude to tedy text rozlišený pomocí tagů na jednotlivé významové části, dále vložené obrázky či jiné objekty a odkazy. Této části se budeme věnovat dále. V hlavičce různých stránek toho můžete najít ještě víc, například připojené nebo přímo vložené skripty a spoustu dalších metatagů. Vlastní obsah stránky Máme tedy připravený základ a čeká nás do něj vložit obsah, který uvidí uživatel ve svém prohlížeči. Logo,header Jedna z prvních věcí na stránce, kterou uživatel uvidí, repektive by měl vidět je logo a název firmy. Logo umisťujeme z pravidla do pravého Horního rohu, na pravo může následovat celý název společnosti a na pozadí případně s nějakým grafickým motivem týkajícího se oboru. Této části stránky se také říká header. Celou stránku budou formovat styly, celý blok si tedy uzavřeme do takzvaného boxu nazvaným header tvořeného tagy <div class= header ></div>, který bude obsahovat zmiňované prvky. Navigace, menu Menu se s pravidla umisťuje buď v pravé části stránky nebo v části horní. Budeme vycházet z toho, že celkový vzhled a rozmístění jednotlivých prvků budou mít na starosti styly CSS a vytvoříme tedy menu, kterému pozici upřesníme právě jimi. V Navigaci na obecné prezentaci najdeme většinou položky jako: Úvod O nás Fotogalerie Kontakty Home Každá položka bude zároveň odkazem na danou sekci odkaz se zapisuje obecně <a href= neco.html >odkaz</a> 45

47 Naše menu budou opět formovat styly, vytvoříme si tedy box pro menu s názvem stylu menu, kvůli následnému umístění pomocí CSS a uzavřeme do tagů <div class= navi ></div> Výsledný kód bude vypadat takto: <div class= navi > <a href= uvod.html >Úvod</a> <a href= onas.html >O nás</a> <a href= fotogalerie.html >Fotogalerie</a> <a href= kontakty.html >Kontakty</a> <a href= index.html >Home</a> </div> Textový obsah Následují textové informace dané sekce webu. Opět použijeme tagy <div></div> se stylem pro obsah se stejným názvem, tedy <div class= obsah >nějaký text</div> v textu by neměl chybět název stránky na které se nacházíme, přidáme tedy taky <h2>nadpis</h2>. Výsledek bude vypadat takto: <div class= obsah > <h2>nadpis</h2>. nějaký text </div> Konec stránky Obsahově je třeba stránku také uzavřít. Této části se říká také footer. Vytvoříme si tedy opět box se stylem <div class= footer > nějaký text </div> do kterého se mohou umisťovat copyrighty, textové odkazy apod. Kompletní obsah uzavřeme do boxu <div class= web ></div>. Důvod si vysvětlíme později. 46

48 Celý kód pak pro stránku uvod.html vypadá takto: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xlmns-" <head> <title>úvod</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" href="styly.css" type="text/css" /> </head> <body> <div class= web > <div class= header ></div> <div class= navi > <a href= uvod.html >Úvod</a> <a href= onas.html >O nás</a> <a href= fotogalerie.html >Fotogalerie</a> <a href= kontakty.html >Kontakty</a> <a href= index.html >Home</a> </div> <div class= obsah > <h2> Úvod </h2> Metodika tvorby webových aplikací Bakalářská práce </div> <div class= footer > Copyright Stanislav Němec 2009</div> </div> </body> </html> Styly Teď je třeba dát celé stránce formu a jak jsme si řekli výše o toto se postarají kaskádové styly. 47

49 Vytvoříme si tedy soubor styly.css, na který ve stránce odkazujeme v něm definujeme použité názvy pro formátování vzhledu. Pro příklad pro hlavičku, jsme si vybrali název header zápis bude vypadat takto:.header { width: 770px; height: 20px; background-color:#cdcdcd; padding:10px; font-size:24px; } Položkami height a width udáváme výšku a šířku boxu. Dále je třeba definovat vzhled celé stránky jako takové (základní font, barva fontu a podkladu stránky, zarovnání stránky apod.), tedy to co se nachází mezi tagy <body></body>. Zápis bude vypadat takto: body { font-family:arial; font-size:10px; color:black; background-color:white; } - zvolený font - velikost fontu v pixelech - barva fontu - barva podkladu Dále definujeme položky menu:.navi { float:left width: 127px; height: 500px; } - zarovnání vlevo.navi a,.navi a:link,.navi a:visited,.navi a:active { color: white; text-decoration:none; - nepodtržený odkaz background-color:black; width: 113px; height: 25px; padding:5px; - odsazení od okrajů border:1px solid black; - okraj položky font-size:16px; font-weight:bold; - silnější font display:block; - zarovnání do bloku }.navi a:hover { color: black; text-decoration:none; 48

50 background-color:white; } Obsahová část.obsah { width:560px; height:460px; min-height:460px; float:left; border-bottom:2px solid #cdcdcd; - barva okraje boxu border-right:2px solid #cdcdcd; border-left:2px solid #cdcdcd; padding:20px; background-color:#fff; } Konec stránky footer.footer { width:790px; height:20px; clear:both; - defaultní nastavení zarovnání boxu font-size:8px; text-align:center; - zarovnání textu na střed } Zarovnávaní stránky Teď se vrátíme ke zmiňovanému uzavření obsahu. Celou stránku můžeme zarovnat, na střed, napravo či nalevo. V našem případě budeme stránku zarovnávat na střed:.web { width: 790px; margin: 0 auto 0 auto; padding: 30px 0 0 0px; margin: px 30px; border:1px solid #cdcdcd; background-color:#cd0000; } Celý CSS soubor pak vypadá takto: body { font-family:arial; font-size:10px; color:black; - centrování na střed pomocí atributu auto - odsazení od vrcholu 49

51 background-color:white; }.web { width: 790px; margin: 0 auto 0 auto; padding: 30px 0 0 0px; margin: px 30px; border:1px solid #cdcdcd; background-color:#cd0000; }.header { width: 770px; height: 20px; background-color:#cdcdcd; padding:10px; font-size:24px; }.navi { float:left; width:127px; height:500px; }.navi a,.navi a:link,.navi a:visited,.navi a:active { color: white; text-decoration:none; background-color:black; width:113px; height:25px; padding:5px; margin:1px; border:1px solid black; font-size:16px; font-weight:bold; display:block; }.navi a:hover { color: black; text-decoration:none; background-color:white; }.obsah { width:560px; height:460px; 50

52 min-height:460px; float:left; border-bottom:2px solid #cdcdcd; border-right:2px solid #cdcdcd; border-left:2px solid #cdcdcd; padding:20px; background-color:#fff; }.footer { width:790px; height:20px; clear:both; font-size:8px; text-align:center; } Výsledkem pak dostanete takovouto jednoduchou stránku: Obrázek 1. Náhled funkčního modelu najdete na přiloženém CD 51