Metodika tvorby webových aplikací

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

Download "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="http://www.. > 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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> 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-"http://www.w3.org/1999/xhtml"> 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-"http://www.w3.org/1999/xhtml"> <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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xlmns-"http://www.w3.org/1999/xhtml"> <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

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

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

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

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

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

Š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

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

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

WR Reality. Web Revolution. Uživatelský manuál administračního rozhraní

WR Reality. Web Revolution. Uživatelský manuál administračního rozhraní WR Reality Web Revolution Uživatelský manuál administračního rozhraní Web Revolution s. r. o. 2010 WR Reality Administrace uživatelský manuál Praktický průvodce administrací webové aplikace WR Reality

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

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

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

Internet 2 css, skriptování, dynamické prvky

Internet 2 css, skriptování, dynamické prvky Internet 2 css, skriptování, dynamické prvky Martin Hejtmánek hejtmmar@fjfi.cvut.cz http://kmlinux.fjfi.cvut.cz/ hejtmmar Počítačový kurs Univerzity třetího věku na FJFI ČVUT Znalci 26. března 2009 Dnešní

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

Obsah. Stručná historie World Wide Webu 7

Obsah. Stručná historie World Wide Webu 7 KAPITOLA I Web bez tajemství 1 Kde se vzal web a jeho stránky 2 Kouzlo jménem HTML 3 Jak stránky připravovat 5 Webová grafika 6 Web aktivní a interaktivní 6 Na straně serveru 6 Jak studovat tuto knihu

Více

Název: Design webu Anotace:

Název: Design 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

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

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování Tvorba WWW stránek přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování HTML/XHTML kaskádové styly PHP spolupráce PHP s databázemi Technologie

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

Tvorba fotogalerie v HTML str.1

Tvorba fotogalerie v HTML str.1 Tvorba fotogalerie v HTML str.1 obr. A obr. B 1) Spustíme PsPad, vytvoříme nový dokument a otevře se nám okno nový soubor, kde si můžeme zvolit jaký chceme typ. My označíme HTML a potvrdíme. 2) Pro správné

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

VÝVOJ INTERNETOVÝCH APLIKACÍ - VIA

VÝVOJ INTERNETOVÝCH APLIKACÍ - VIA Metodický list č. 1 Způsob zakončení : Úvod Technologie webových aplikací Protokol HTTP Po zvládnutí tématického celku bude student mít základní přehled o problematice programování internetových (webových)

Více

Kartografická webová aplikace. Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar Čerba Západočeská univerzita

Kartografická webová aplikace. Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar Čerba Západočeská univerzita Kartografická webová aplikace Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar Čerba Západočeská univerzita Datum vzniku dokumentu: 3. 11. 2011 Datum poslední aktualizace: 10. 12. 2011 Cíl

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

Jazyk XSL XPath XPath XML. Jazyk XSL - rychlá transformace dokumentů. PhDr. Milan Novák, Ph.D. KIN PF JU České Budějovice. 9.

Jazyk XSL XPath XPath XML. Jazyk XSL - rychlá transformace dokumentů. PhDr. Milan Novák, Ph.D. KIN PF JU České Budějovice. 9. Jazyk XSL - rychlá transformace dokumentů 9. prosince 2010 Osnova 1 Jazyk XSL Úvod Princip zpracování pomocí stylů Formátování dokumentu pomocí XSL FO Osnova 1 Jazyk XSL Úvod Princip zpracování pomocí

Více

IVT. Prezentace pravidla a postupy. 8. ročník

IVT. Prezentace pravidla a postupy. 8. ročník IVT Prezentace pravidla a postupy 8. ročník listopad, prosinec 2013 Autor: Mgr. Dana Kaprálová Zpracováno v rámci projektu Krok za krokem na ZŠ Želatovská ve 21. století registrační číslo projektu: CZ.1.07/1.4.00/21.3443

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

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

IE1 jazyk HTML a kaskádové styly

IE1 jazyk HTML a kaskádové styly IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.

Více

Základy HTML. Autor: Palito

Základy HTML. Autor: Palito Základy HTML Autor: Palito Zobrazení zdrojového kódu Zobrazení zdrojového kódu Každá stránka je na disku nebo na serveru uložena ve formě zdrojového kódu. Ten kód je psaný v jazyce HTML. Když si chcete

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

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

Strategie ochrany před negativními dopady povodní a erozními jevy přírodě blízkými opatřeními v České republice

Strategie ochrany před negativními dopady povodní a erozními jevy přírodě blízkými opatřeními v České republice Strategie ochrany před negativními dopady povodní a erozními jevy přírodě blízkými opatřeními v České republice Návod k prezentačnímu mapovému portálu Obsah: 1. Úvod... 3 2. Obecná část mapového portálu...

Více

================================================================================ =====

================================================================================ ===== Název: VY_32_INOVACE_PG4101 Základní struktura HTML stránky Datum vytvoření: 01 / 2012 Anotace: DUM seznamuje se základní strukturou a členěním HTML stránky, s jednotlivými složkami - HTML, CSS, externí

Více

TAOX Konfigurátor potisku seznam funkcí

TAOX Konfigurátor potisku seznam funkcí TAOX Konfigurátor potisku seznam funkcí Úvod Celý systém se dělí na několik částí. A to jak z pohledu uživatele (zákazníka), tak z pohledu administrátora. Konfigurátor aplikace na tvorbu potisku (dělí

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

IE1 jazyk HTML a kaskádové styly

IE1 jazyk HTML a kaskádové styly IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.

Více

Obsah. O autorech 9 Earle Castledine 9 Myles Eftos 9 Max Wheeler 9 Odborný korektor 10. Předmluva 11 Komu je kniha určena 12 Co se v knize dočtete 12

Obsah. O autorech 9 Earle Castledine 9 Myles Eftos 9 Max Wheeler 9 Odborný korektor 10. Předmluva 11 Komu je kniha určena 12 Co se v knize dočtete 12 O autorech 9 Earle Castledine 9 Myles Eftos 9 Max Wheeler 9 Odborný korektor 10 Předmluva 11 Komu je kniha určena 12 Co se v knize dočtete 12 Poděkování 15 Earle Castledine 15 Myles Eftos 15 Max Wheeler

Více

Úvod do CSS. Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm. Modernizace výuky s využitím ICT, CZ.1.07/1.5.00/34.

Úvod do CSS. Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm. Modernizace výuky s využitím ICT, CZ.1.07/1.5.00/34. Úvod do CSS Tematický okruh (ŠVP) CSS1 Vysvětlení úlohy CSS při programování www stránek Úvod do CSS VY_32_INOVACE_01_02_01 Vytvořeno září 2012 Materiál slouží k podpoře výuky programování webových aplikací

Více

1 Strukturované programování

1 Strukturované programování Projekt OP VK Inovace studijních oborů zajišťovaných katedrami PřF UHK Registrační číslo: CZ.1.07/2.2.00/28.0118 1 Cíl Seznámení s principy strukturovaného programování, s blokovou strukturou programů,

Více

Microsoft Office Word 2003

Microsoft Office Word 2003 Microsoft Office Word 2003 č. 6 název anotace očekávaný výstup druh učebního materiálu druh interaktivity Microsoft Office Word 2003 - Cesta k základním úpravám Prezentace je zaměřena na úpravy textu v

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

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu PŘÍRUČKA Správa obsahu webové prezentace Formátování textu Verze: 6.2 Datum: 4.12.2009 Autor: Ing. Michal Šídlo, michal.sidlo@netgenium.com Společnost: NetGenium s.r.o., www.netgenium.com Obsah 1. Základní

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

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

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

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

Přístupnost webů knihoven příklady dobré a špatné praxe. Radek PAVLÍČEK, TyfloCentrum Brno, o. p. s., projekt Blind Friendly Web

Přístupnost webů knihoven příklady dobré a špatné praxe. Radek PAVLÍČEK, TyfloCentrum Brno, o. p. s., projekt Blind Friendly Web Přístupnost webů knihoven příklady dobré a špatné praxe Radek PAVLÍČEK, TyfloCentrum Brno, o. p. s., projekt Blind Friendly Web Máte rádi CAPTCHA? Líbila by se vám takto prezentovaná stránka vaší knihovny?

Více

ŠKODA Portal Platform

ŠKODA Portal Platform ŠKODA Portal Platform Struktura LESS stylů Jan Obrátil Účel dokumentu Účelem tohoto dokumentu je vysvětlit strukturu stylů v Portálové Platformě tak, aby bylo možné je správně použít a rozšířit je pro

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

Webová aplikace Znalostní testy online UŽIVATELSKÁ PŘÍRUČKA

Webová aplikace Znalostní testy online UŽIVATELSKÁ PŘÍRUČKA Webová aplikace Znalostní testy online UŽIVATELSKÁ PŘÍRUČKA 2005 Lukáš Trombik OBSAH ÚVOD... 1 SPUŠTĚNÍ... 1 POPIS OVLÁDÁNÍ INFORMAČNÍHO SYSTÉMU... 1 POPIS KLIENTSKÉ ČÁSTI... 1 POPIS ADMINISTRÁTORSKÉ ČÁSTI...

Více

Webové stránky. 6. Grafické formáty pro web. Datum vytvoření: 11. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz

Webové stránky. 6. Grafické formáty pro web. Datum vytvoření: 11. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz Webové stránky 6. Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 11. 10. 2012 Webové Strana: 1/6 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická oblast Název DUM

Více

Úvod do MS Access. Modelování v řízení. Ing. Petr Kalčev

Úvod do MS Access. Modelování v řízení. Ing. Petr Kalčev Úvod do MS Access Modelování v řízení Ing. Petr Kalčev Postup při tvorbě aplikace Vytvoření tabulek Vytvoření relací Vytvoření dotazů Vytvoření formulářů Vytvoření sestav Tabulky Slouží k definování polí,

Více

Obsah. Úvodem 9 Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10

Obsah. Úvodem 9 Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10 Obsah Úvodem 9 Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10 KAPITOLA 1 Co budeme potřebovat 11 Co knihovna jquery nabízí 11 Editor zdrojového kódu 12 Webový server 12 Software pro ladění

Více

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

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci Název modulu: Označení: C7 Stručná charakteristika modulu Modul vznikl za účelem úvodního seznámení zájemců o problematiku tvorby moderních webových stránek podle standardů W3C. Zahrnuje základní nezbytné

Více

Aplikace pro srovna ní cen povinne ho ruc ení

Aplikace pro srovna ní cen povinne ho ruc ení Aplikace pro srovna ní cen povinne ho ruc ení Ukázkový přiklad mikroaplikace systému Formcrates 2010 Naucrates s.r.o. Veškerá práva vyhrazena. Vyskočilova 741/3, 140 00 Praha 4 Czech Republic tel.: +420

Více

Kapitola 1 První kroky v tvorbě miniaplikací 11

Kapitola 1 První kroky v tvorbě miniaplikací 11 Obsah Úvodem 9 Komu je kniha určena 9 Kapitola 1 První kroky v tvorbě miniaplikací 11 Co je to Postranní panel systému Windows a jak funguje 12 Co je potřeba vědět před programováním miniaplikací 16 Vaše

Více

DOKUMENTACE REDAKČNÍHO SYSTÉMU PINYA

DOKUMENTACE REDAKČNÍHO SYSTÉMU PINYA DOKUMENTACE REDAKČNÍHO SYSTÉMU PINYA Obsah Obsah... 4 Pinya CMS... 5 Přihlášení do systému... 6 Položky v menu administrace... 7 Uživatelé... 8 Správa uživatelů... 8 Nový uživatel... 9 Role... 10 Vytvoření

Více

ANOTACE vytvořených/inovovaných materiálů

ANOTACE vytvořených/inovovaných materiálů ANOTACE vytvořených/inovovaných materiálů Číslo projektu Číslo a název šablony klíčové aktivity Tematická oblast Formát Druh učebního materiálu Druh interaktivity CZ.1.07/1.5.00/34.0722 III/2 Inovace a

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

1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)

1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008) 1. Struktura stránky, zásady při psaní kódu, MVC pattern Web pro kodéry (Petr Kosnar, ČVUT, Obsah } Terminologie } Prezentace x Obsah } Struktura kódu } Sémantika kódu } Struktura stránky } Šablony } Template

Více

Textové editory. Ing. Luděk Richter

Textové editory. Ing. Luděk Richter Textové editory Ing. Luděk Richter Střední škola, Havířov-Šumbark, Sýkorova 1/613, příspěvková organizace Tento výukový materiál byl zpracován v rámci akce EU peníze středním školám - OP VK 1.5. Výuková

Více

Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. PORTÁL KUDY KAM. Manuál pro administrátory. Verze 1.

Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. PORTÁL KUDY KAM. Manuál pro administrátory. Verze 1. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. PORTÁL KUDY KAM Manuál pro administrátory Verze 1.0 2012 AutoCont CZ a.s. Veškerá práva vyhrazena. Tento

Více

Kaskádové styly základy grafiky

Kaskádové styly základy grafiky 1 Kaskádové styly základy grafiky Vymezení pojmů Historie Základy stylů 2 Co je to CSS? Vznik CSS a je možné zařadit přibližně do roku 1997. Pojem CSS by se dal shrnout definicí :"souhrn pravidel a metod

Více

Přehledy pro Tabulky Hlavním smyslem této nové agendy je jednoduché řazení, filtrování a seskupování dle libovolných sloupců.

Přehledy pro Tabulky Hlavním smyslem této nové agendy je jednoduché řazení, filtrování a seskupování dle libovolných sloupců. Přehledy pro Tabulky V programu CONTACT Professional 5 naleznete u firem, osob a obchodních případů záložku Tabulka. Tuto záložku lze rozmnožit, přejmenovat a sloupce je možné definovat dle vlastních požadavků

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

Pokročilé techniky tvorby sestav v Caché. ZENové Reporty

Pokročilé techniky tvorby sestav v Caché. ZENové Reporty Pokročilé techniky tvorby sestav v Caché ZENové Reporty Úvodem Jednoduché sestavy Pokročilé sestavy Ladění Historie ZEN reporty sdílejí podobný princip definování obsahu jako ZENové stránky Byly uvedeny

Více

CSS. SEO Search Engine Optimization (optimalizace pro vyhledávače)

CSS. SEO Search Engine Optimization (optimalizace pro vyhledávače) CSS SEO Search Engine Optimization (optimalizace pro vyhledávače) Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Marek Čechák. Financováno z ESF a státního rozpočtu ČR. Název školy

Více

Multimediální prezentace MS PowerPoint I

Multimediální prezentace MS PowerPoint I Multimediální prezentace MS PowerPoint I Informatika Multimediální prezentace zažívají v poslední době obrovský rozmach. Jsou používány například k reklamním účelům, k předvedení výrobků či služeb. Velmi

Více

Základy XML struktura dokumentu (včetně testových otázek)

Základy XML struktura dokumentu (včetně testových otázek) Základy XML struktura dokumentu (včetně testových otázek) Otakar Čerba Oddělení geomatiky Katedra matematiky Fakulta aplikovaných věd Západočeská univerzita v Plzni Přednáška z předmětu Počítačová kartografie

Více

Navigace na webových stránkách

Navigace na webových stránkách Navigace na webových stránkách Tato kapitola navazuje na kapitoly o přístupnosti, použitelnosti a optimalizaci webových stránek a podrobněji popisuje tvorbu informační architektury webových stránek, zejména

Více

Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675

Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Tvorba WWW stránek Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Zdroje KRUG: Web design - nenuťte uživatele přemýšlet.. Computer Press, 2003. PROKOP M.: CSS

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

Google Apps. weby 1. verze 2012

Google Apps. weby 1. verze 2012 Google Apps weby verze 0 Obsah Obsah... Úvod... Zahájení práce... Nastavení webu... Úprava stránky... Popis prostředí... Rozložení stránky... Nadpis stránky... Úprava textu... Vložení odkazu... 8 Vložení

Více

TECHNOLOGIE ELASTICKÉ KONFORMNÍ TRANSFORMACE RASTROVÝCH OBRAZŮ

TECHNOLOGIE ELASTICKÉ KONFORMNÍ TRANSFORMACE RASTROVÝCH OBRAZŮ TECHNOLOGIE ELASTICKÉ KONFORMNÍ TRANSFORMACE RASTROVÝCH OBRAZŮ ÚVOD Technologie elastické konformní transformace rastrových obrazů je realizována v rámci webové aplikace NKT. Tato webová aplikace provádí

Více

SRSW4IT Inventarizační SW. Prezentace aplikace. Vedoucí DP: ing. Lukáš Macura Autor: Bc. Petr Mrůzek

SRSW4IT Inventarizační SW. Prezentace aplikace. Vedoucí DP: ing. Lukáš Macura Autor: Bc. Petr Mrůzek Prezentace aplikace Vedoucí DP: ing. Lukáš Macura Autor: Bc. Petr Mrůzek Osnova Úvod Programovací jazyk - PHP Etapy vývoje Funkce aplikace Co SW umí Na čem se pracuje Vize do budoucna Úvod Úvod Inspirováno

Více

Webové stránky. 1. Publikování na internetu. Datum vytvoření: 4. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz

Webové stránky. 1. Publikování na internetu. Datum vytvoření: 4. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz Webové stránky 1. Publikování na internetu Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 4. 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

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

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

Internet - základní pojmy

Internet - základní pojmy Název školy: Střední odborná škola stavební Karlovy Vary Sabinovo náměstí 16, 360 09 Karlovy Vary Autor: Ing. Hana Šmídová Název materiálu: VY_32_INOVACE_07_INTERNET_P2 Číslo projektu: CZ 1.07/1.5.00/34.1077

Více

KAPITOLA 2 - ZÁKLADNÍ POJMY INFORMAČNÍCH A KOMUNIKAČNÍCH TECHNOLOGIÍ

KAPITOLA 2 - ZÁKLADNÍ POJMY INFORMAČNÍCH A KOMUNIKAČNÍCH TECHNOLOGIÍ KAPITOLA 2 - ZÁKLADNÍ POJMY INFORMAČNÍCH A KOMUNIKAČNÍCH TECHNOLOGIÍ KLÍČOVÉ POJMY Internet World Wide Web FTP, fulltext e-mail, IP adresa webový prohlížeč a vyhledávač CÍLE KAPITOLY Pochopit, co je Internet

Více

VÝUKOVÝ MATERIÁL. Bratislavská 2166, 407 47 Varnsdorf, IČO: 18383874 www.vosassvdf.cz, tel. +420412372632 Číslo projektu

VÝUKOVÝ MATERIÁL. Bratislavská 2166, 407 47 Varnsdorf, IČO: 18383874 www.vosassvdf.cz, tel. +420412372632 Číslo projektu VÝUKOVÝ MATERIÁL Identifikační údaje školy Vyšší odborná škola a Střední škola, Varnsdorf, příspěvková organizace Bratislavská 2166, 407 47 Varnsdorf, IČO: 18383874 www.vosassvdf.cz, tel. +420412372632

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

www.zlinskedumy.cz Pracovní list VY_32_INOVACE_33_20 Databáze Databáze Databáze Projekt II. Ing. Petr Vilímek

www.zlinskedumy.cz Pracovní list VY_32_INOVACE_33_20 Databáze Databáze Databáze Projekt II. Ing. Petr Vilímek VY_32_INOVACE_33_20 Pracovní list Škola Název projektu, reg. č. Vzdělávací oblast Vzdělávací obor Tematický okruh Téma Tematická oblast Název Autor Vytvořeno, pro obor, roč. Anotace Přínos/cílové kompetence

Více

Uživatelský manuál. Aplikace GraphViewer. Vytvořil: Viktor Dlouhý

Uživatelský manuál. Aplikace GraphViewer. Vytvořil: Viktor Dlouhý Uživatelský manuál Aplikace GraphViewer Vytvořil: Viktor Dlouhý Obsah 1. Obecně... 3 2. Co aplikace umí... 3 3. Struktura aplikace... 4 4. Mobilní verze aplikace... 5 5. Vytvoření projektu... 6 6. Části

Více

PALSTAT s.r.o. systémy řízení jakosti PALSTAT CAQ verze. 3.00.01.09 Kontakty 08/2010. 1 Obsah

PALSTAT s.r.o. systémy řízení jakosti PALSTAT CAQ verze. 3.00.01.09 Kontakty 08/2010. 1 Obsah 1 Obsah 1 Obsah... 1 2 Úvod a spouštění SW Palstat CAQ... 2 2.1.1 Návaznost na další SW moduly Palstat CAQ... 2 2.2 Přihlášení do programu... 2 2.2.1 Stanovení přístupu a práv uživatele... 2 2.2.2 Spuštění

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

Microsoft Office Word 2003

Microsoft Office Word 2003 Microsoft Office Word 2003 Školení učitelů na základní škole Meteorologická Maturitní projekt SSPŠ 2013/2013 Vojtěch Dušek 4.B 1 Obsah 1 Obsah... 2 2 Seznam obrázků... 3 3 Základy programu PowerPoint...

Více

Elektronické publikování - prezentace. 23. dubna 2009 VŠB - TUO. Beamer - grafické zpracování prezentace. Rostislav Šuta, sut017.

Elektronické publikování - prezentace. 23. dubna 2009 VŠB - TUO. Beamer - grafické zpracování prezentace. Rostislav Šuta, sut017. Beamer - Elektronické publikování - VŠB - TUO 23. dubna 2009 Obsah 1 2 3 4 5 6 Obsah 1 2 3 4 5 6 schémata barvy písma změna fontu vnitřní schémata vnější schémata Obsah Prezentace bez navigace e stromovou

Více

Tiskové sestavy. Zdroj záznamu pro tiskovou sestavu. Průvodce sestavou. Použití databází

Tiskové sestavy. Zdroj záznamu pro tiskovou sestavu. Průvodce sestavou. Použití databází Tiskové sestavy Tiskové sestavy se v aplikaci Access používají na finální tisk informací z databáze. Tisknout se dají všechny objekty, které jsme si vytvořili, ale tiskové sestavy slouží k tisku záznamů

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

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

PROFI TDi s.r.o. 696 37, Želetice 40 www.profi-tdi.cz info@profi-tdi.cz. Návod k používání systému OTDI.CZ

PROFI TDi s.r.o. 696 37, Želetice 40 www.profi-tdi.cz info@profi-tdi.cz. Návod k používání systému OTDI.CZ Návod k používání systému OTDI.CZ Vážený kliente. Děkujeme za projevený zájem o náš on-line systém evidence kontrol, určený speciálně pro účely dozorů staveb. Systém OTDI.CZ nabízí svým uživatelům zejména:

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

Web. Získání informace z internetu Grafické zobrazení dat a jejich struktura Rozšíření funkcí pomocí serveru Rozšíření funkcí pomocí prohlížeče

Web. Získání informace z internetu Grafické zobrazení dat a jejich struktura Rozšíření funkcí pomocí serveru Rozšíření funkcí pomocí prohlížeče Web Získání informace z internetu Grafické zobrazení dat a jejich struktura Rozšíření funkcí pomocí serveru Rozšíření funkcí pomocí prohlížeče Technologické trendy v AV tvorbě, Web 2 DNS Domain Name Systém

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