Využití jazyka CSS3 při redesignu rezervačního systému bakalářských prací

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

Download "Využití jazyka CSS3 při redesignu rezervačního systému bakalářských prací"

Transkript

1 Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Vyšší odborná škola informačních služeb v Praze Tomáš Koudelka Využití jazyka CSS3 při redesignu rezervačního systému bakalářských prací Bakalářská práce 2012

2 Prohlášení Prohlašuji, že jsem bakalářskou práci na téma Využití jazyka CSS3 při redesignu rezervačního systému bakalářských prací vypracoval samostatně a použil pouze zdrojů, které cituji a uvádím v seznamu použité literatury. V Praze dne 14. května Podpis autora

3 Poděkování Děkuji Ing. Kateřině Jeníčkové za ochotné vedení mé bakalářské práce a poskytnutí svého cenného času. Dále děkuji Ing. Davidu Klimánkovi Ph.D. za to, že celý rezervační systém naprogramoval a dal mi tak možnost si toto zajímavé a mně blízké téma vybrat. Děkuji také všem, kdo mě při psaní práce podporovali.

4 Abstrakt Práce se zabývá počítačovým programovacím jazykem CSS3 (Cascading Style Sheets, česky kaskádové styly), který slouží pro definování vzhledu webových stránek. Shrnuje novinky a výhody, které CSS3 přináší oproti minulé verzi (CSS 2.1), zabývá se jednotlivými funkcemi, jejich syntaxí a aktuální podporou v internetových prohlížečích. Věnuje se také možnostem emulace některých funkcí ve starších prohlížečích, které CSS3 nepodporují. V druhé části práce je využití CSS3 prakticky demonstrováno, a to v rámci popisu postupu při redesignu rezervačního systému bakalářských a absolventských prací na Vyšší odborné škole informačních služeb v Praze. Klíčová slova CSS3, kaskádové styly, redesign, webdesign Abstract This thesis deals with computer programming language CSS3 (Cascading Style Sheets) that is used to define the appearance of web pages. It summarizes the news and the benefits of the CSS3 compared to the previous version (CSS 2.1), describing various functions, their syntax and support in current web browsers. In addition, it shows possibilities of emulation in older browsers that do not have support for CSS3. In the second part of the thesis the use of CSS3 is practically demonstrated by description of redesign the reservation system of bachelor and graduate thesis at Vyšší odborná škola informačních služeb in Prague.

5 Obsah Obsah... 5 Úvod Teoretická část Základní informace o CSS Podpora v prohlížečích Možnosti emulace Klíčové moduly a vlastnosti CSS Selektory Barvy Obrázková pozadí Barevné přechody Rámečky a stíny Animace a přechody Další moduly Praktická část Cíl praktické části Popis výchozího stavu systému Popis postupu redesignu Použité technologie a kompatibilita Celkový layout Základní společné prvky Hlavička stránek Úvodní stránka Tabulkové výpisy témat a konzultací Ostatní podstránky Patička stránek Shrnutí Vlastní přínos práce Závěr Seznam použité literatury Seznam obrázků Seznam grafů Seznam příloh Přílohy

6 Úvod Internet v dnešní době neustálé získává na důležitosti, informací na této celosvětové síti stále přibývá a jeho uživatelé u něho tráví více a více času. Jsou také čím dál náročnější, a ať se nám to líbí nebo ne, kladou kromě obsahu stále větší důraz na formu a vzhled webových stránek. Webů je takové množství, že zaujmout návštěvníka je mnohem náročnější než dříve. Je k tomu třeba nových technologií, které by přinesly nové možnosti. Byl to právě jazyk CSS (kaskádové styly), který internet před lety polidštil, zkrášlil ho, dal mu podobu a design. Nyní přichází nová verze tohoto jazyka označována jako CSS3. To, co se dříve dělalo složitými postupy při grafickém návrhu a kódovaní stránek, by díky ní mělo jít zapsat jednou definicí, jedním řádkem kódu. Rozšíření a vývoj CSS3 jsou však postupné a šířka problematiky, kterou se zabývá, je obrovská. Chtěl bych v této práci dokázat, že přestože zdaleka ne každý internetový prohlížeč tuto novou verzi kaskádových stylů podporuje, má pro návrháře webů smysl je již v dnešní době začít používat. I prohlížeče se totiž vyvíjejí rychleji než dřív, jejich aktualizacím je přikládán větší význam - ať už kvůli zabezpečení, či rychlejšímu surfování (aby uživatelé ušetřili čas). Několik stěžejních oblastí, ve kterých CSS3 přináší novinky, je popsáno v této práci. Jednotlivé kapitoly obsahují výčet vlastností (funkcí), jejich popis a případně ukázku. Je zde také popsána kompatibilita v nejpoužívanějších prohlížečích a alternativy, kterými lze funkce CSS3 emulovat. Maximum z těchto teoreticky popsaných možností CSS3 jsem se pokusil demonstrovat v praktické části práce, kde je rozebrán postup redesignu rezervačního systému bakalářských a absolventských prací na VOŠIS. Výsledná redesignovaná verze systému je dostupná online z a to ve dvou barevných provedeních - v zelené, která je laděna k webovým stránkám školy, a v modré. 6

7 1 Teoretická část 1.1 Základní informace o CSS3 CSS (Cascading Style Sheets, česky kaskádové styly) je jazyk pro definování vzhledu webových stránek. Umožňuje nastavovat uspořádání webu, velikosti objektů, barvy, fonty a mnoho dalšího. Odděluje vzhledové definice od samotného obsahu webu (HTML) a dovoluje tak například použít jednotný styl pro více stránek, čímž také zpřehledňuje zdrojový kód dokumentů 1. Jazyk CSS byl vytvořen na půdě konsorcia W3 (W3C) a tato instituce se také dále stará o jeho vývoj. Verze CSS3 je momentálně vyvíjena v několika směrech, tzv. modulech. Každému modulu (pozadí, layout, formátování textu apod.) se věnuje zvláštní pracovní skupina, která jej postupně standardizuje a aktualizuje jeho specifikaci až do finální podoby. Tyto jednotlivé moduly jsou ve značně rozdílném stádiu vývoje (W3C je označuje jako Working Draft (WD), Candidate Recommendation (CR), Proposed Recommendation (PR) a finální W3C Recommendation (REC)) 2, a proto se liší i jejich podpora v prohlížečích. Pod pojmem CSS3, se má většinou na mysli několik základních modulů, které jednotlivě popíši dále Podpora v prohlížečích Základní otázkou při použití CSS3 vlastností je vždy jejich podpora v prohlížečích. V jednotlivých prohlížečích byla zavedena alespoň minimální podpora CSS3 v těchto verzích: Firefox 3.6, Opera 9.5, Internet Explorer 9 a Safari Prohlížeč Google Chrome podporuje základní CSS3 od samotného počátku, jelikož jeho první verze vznikla teprve v roce Naopak stále poměrně hojně používané starší verze Internet Exploreru (7 a 8) CSS3 vůbec nepodporují. Způsoby, jakými v nich lze jeho efekty do určité míry emulovat jsou popsány v další kapitole. 1 W3C. HTML & CSS - W3C: What is CSS?. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: 2 W3C. 7 W3C Technical Report Development Process: Maturity Levels. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: /tr#maturity-levels 3 When can I use...: Support tables for HTML5, CSS3, etc [online] [cit ]. Dostupné z: 7

8 Níže je uveden graf podílu prohlížečů na českém internetu v březnu roku 2012: 31,71% Podíl prohlížečů (vykreslovacích jáder) v ČR 29,41% 15,42% 10,78% 6,46% 4,23% Graf 1 - podíl prohlížečů na českém internetu za březen roku Zdroj: autor, data: Pro upřesnění je třeba uvést, že vykreslovací jádro WebKit používají především prohlížeče Google Chrome, Safari a Maxthon 3 a jádro Gecko používá Firefox. Podpora CSS3 v novějších verzích jednotlivých prohlížečích se vyvíjí silně různorodě a její popis by vydal na samostatnou práci. Proto je podpora vlastností zmíněných v této práci uvedena vždy na konci dané kapitoly. Obecně však platí, že při implementaci nových CSS3 funkcí výrobci prohlížečů používají tzv. vendor prefixy. To znamená, že například vývojáři Firefoxu si přejmenují vlastnost boxshadow na moz-box-shadow a prohlížeč pak ve stylopisu čte tuto vlastnost s daným prefixem (předponou) moz-. Tato technika se používá proto, že vývojáři prohlížečů často implementují vlastnosti, které se ještě ve specifikacích W3C mohou měnit. Z tohoto důvodu má každý výrobce prohlížečů svůj prefix 4 : -webkit- (či apple- nebo khtml-) (Chrome, Safari) -moz- (Mozilla Firefox) -ms- (Internet Explorer) -o- (Opera) 4 BEVERLOO, Peter. Vendor-prefixed CSS Property Overview. Peter Beverloo [online] [cit ]. Dostupné z: 8

9 V praxi je tedy často nutné použít pro zapsání jedné vlastnosti několik definic, aby byla zajištěna kompatibilita v maximálním množství prohlížečů: background:-webkit-gradient(linear, left top, left bottom, from(#598299), to(#264f66)); /* Saf4+, Chrome */ background:-webkit-linear-gradient(top, #598299, #264F66); /*Chrome 10+, Saf5.1+ */ background:-moz-linear-gradient(top, #598299, #264F66); /* FF3.6 */ background:-ms-linear-gradient(top, #598299, #264F66); /* IE10 */ background:-o-linear-gradient(top, #598299, #264F66); /* Opera */ background: linear-gradient(top, #598299, #264F66); (W3C Spec) Pro zjednodušení tyto přídavné části kódu v práci většinou dále neuvádím, ačkoli při samotném redesignu systému (praktické části práce) byly použity. Výčet všech vendor prefixů je možné nalézt v příloze Možnosti emulace Jak už jsem zmínil, podpora CSS3 v Internet Exploreru 7 a 8 je nulová, což je dáno stářím obou prohlížečů. Existují však určité techniky a nástroje, které dovedou některé efekty CSS3 přenést i do těchto prohlížečů. Asi nejjednodušší je použití filtrů. Jedná se o speciální funkce Internet Exploreru, které Microsoft implementoval, přestože se nikdy nestaly součástí žádné CSS specifikace, dá se tedy říct, že se jedná o jakési rozšíření CSS ze strany Microsoftu. Pomocí filtrů lze do určité míry simulovat poloprůhlednost, barevné přechody, stíny a rotaci objektů. Druhou možností je využít různé skripty v jazyce JavaScript. Existuje například plugin pro javascriptovou knihovnu jquery, který dokáže v IE simulovat stín u textu 5 nebo Selectivizr, který v IE verze 6 až 8 implementuje CSS3 selektory 6. Třetím typem simulace jsou skripty, které využívají zvláštní CSS vlastnost behavior. Jedná se například o CSS3Pie, který do IE implementuje poměrně široké množství novinek z CSS3 7, nebo Curved-corner, který se specializuje na zaoblené rohy 8. Všechny tyto 5 CSS3 Solutions for Internet Explorer. LAZARIS, Louis. Smashing Magazine [online] [cit ]. Dostupné z: 6 Selectivizr: CSS3 pseudo-class and attribute selectors for IE 6-8 [online] [cit ]. Dostupné z: 7 CSS3 PIE: CSS3 decorations for IE [online] [cit ]. Dostupné z: 8 CSS3 Solutions for Internet Explorer. LAZARIS, Louis. Smashing Magazine [online] [cit ]. Dostupné z: 9

10 techniky mají však své nevýhody. Použití některých je blíže popsáno v praktické části práce. Na závěr kapitoly ještě zajímavá myšlenka: Měly by weby opravdu vypadat shodně ve všech prohlížečích a systémech? Po léta je právě toto snahou snad všech webdesignérů a web kodérů. V poslední době se však stále častěji vyskytuje otázka proč vlastně? Klíčové moduly a vlastnosti CSS Selektory Celý jazyk CSS je založen na přiřazování vlastností objektům zapsaným v HTML, tedy tagům. Aby toto přiřazování bylo možné, je nutné nějakým způsobem určit, která CSS vlastnost se přiřadí kterému HTML tagu (objektu na stránce). Toto určení cílového prvku, na který styl aplikujeme, se provádí pomocí tzv. selektorů. Selektory jsou základem CSS, umožňují efektivně vybrat objekt, s jehož vzhledem chceme pracovat. Přestože samy o sobě nijak neovlivňují vzhled stránky, CSS by bez nich prakticky nemohlo existovat, jelikož by nebyl způsob, jak propojit zápis stylu s HTML kódem. V současném CSS existuje čtyřicet dva selektorů 10, zmíním zde tedy ty základní, a dále ty, které nově přináší CSS3. Základní selektory Základním a nejjednodušším selektorem je výběr dle názvu elementu (tagu). Mějme následující HTML kód: A CSS zápis: <div> <p>text v prvním odstavci</p> <img src="img/image.png" alt="alternativní popis" /> </div> <p>text ve druhém odstavci</p> p {color: #fff} 9 Websites Shouldn't Look The Same Across Different Browsers Here Is Why. Noupe: The Curious Side of Smashing Magazine [online] [cit ]. Dostupné z: 10 Selectors Level 3. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: 10

11 Selekor p vybere všechny (oba) výskyty odstavců v HTML kódu a nastaví jim bílou barvu písma. Jeho použití se hodí pouze při globálních úpravách, protože ovlivní všechny tagy daného druhu 11. O něco specifičtější je výběr pomocí potomka. Zápis div p {color: #fff} vybere pouze ty odstavce, které mají mezi rodiči element div, tedy pouze první odstavec v příkladu 12. Zcela jinými selektory už jsou výběry podle třídy a identifikátoru. Třída je vlastně libovolné klíčové slovo, kterým pojmenujeme určitou sadu pravidel, která budou aplikována na libovolný prvek. Jedná se o velmi častý selektor, v CSS je uvozen tečkou a do HTML se pak zapíše pomocí atributu class 13. Příklad: HTML <p class= warning >Vyskytla se chyba</p>... <p>vaše odpověď je <span class= warning >chybná</span></p> CSS.warning {color: #ff0000; font-weight: bold; text-transform: uppercase} Styl třídy warning se v tomto případě projeví jak na prvním odstavci, tak na slově chybná v druhém odstavci. Použití identifikátoru je obdobné, s tím rozdílem, že v CSS je označen znakem # a párování s HTML probíhá díky atributu id. Z tohoto důvodu se element s daným identifikátorem může na každé stránce vyskytovat pouze jednou 14 a jeho použití je tedy typické ve dvou případech. Tím prvním je označení základních prvků stránky hlavičky, obsahu, menu, patičky: HTML <div id= header >...</div> <div id= menu >...</div> <div id= content >...</div> <div id= footer >...</div> 11 SIKOS, Leslie F. Web Standards Mastering Html5, Css3, and Xml. Apress, 2011, s ISBN GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s ISBN SIKOS, Leslie F. Web Standards Mastering Html5, Css3, and Xml. Apress, 2011, s ISBN SIKOS, Leslie F. Web Standards Mastering Html5, Css3, and Xml. Apress, 2011, s ISBN

12 CSS #header {width: 100%; height: 180px} #menu {width: 200px; float: left} #content {width: 800px; margin-left: 220px} #footer {width: 100%; height: 50px} Druhým častým použitím je případ, kdy je prvek nějakým způsobem napojen na JavaScript. Ten totiž k elementům přistupuje nejčastěji právě pomocí atributu id a jeho hodnotu se tedy rovnou vyplatí použít i jako selektor pro definování vzhledu. Novinky v CSS3 Patrně největším přínosem CSS3 v oblasti selektorů jsou ty, které umožňují cílit na prvek pomocí pořadí jeho výskytu na stránce. Výrazně tak rozšiřují tento druh selektorů, jelikož v CSS2 se nacházel prakticky pouze :first-child, který vybere prvního potomka daného elementu 15. Tedy například li:first-child pouze první položku v následujícím seznamu: <ul> <li>první položka</li> <li>druhá položka</li> <ul> CSS3 tyto možnosti výrazně rozšiřuje, zavádí totiž celou sadu podobných selektorů. V první řadě jsou to další čtyři, které pracují s potomkem elementu. :last-child, :nth-child(n), :nth-last-child(n), :only-child Selektor :last-child slouží k výběru posledního potomka, v předchozím příkladě tedy druhé položky seznamu. Je-li třeba vybrat prvek či prvky mezi prvním a posledním potomkem, je ideálním řešením :nth-child(n). Za n lze totiž dosadit výraz, který určí, na které prvky, jež jsou potomky, se styl aplikuje. Například tr:nth-child(2n) reprezentuje každý sudý řádek tabulky, naopak tr:nthchild(2n+1) každý lichý řádek. Lze samozřejmě použít i opačné znaménko, například li:nth-child(10n-1) vybere devátou, devatenáctou, dvacátou devátou atd. položku seznamu, li:nth-child(-n+5) naopak pouze prvních pět. Kromě výrazů lze použít také dvě klíčová slova even (sudý) a odd (lichý), která mají stejný efekt jako první dva uvedené matematické výrazy. Opakem je selektor :nth-last- 15 Selectors Level 3. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: 12

13 child(n), který funguje obdobně, ovšem dokument prochází od konce. tr:nthlast-child(-n+2) se tedy aplikuje na poslední dva řádky tabulky. Speciálním případem z této skupiny je selektor :only-child, který se používá pro výběr elementu, který je jediným potomkem rodiče 16. :first-of-type, :last-of-type, :nth-of-type(n), :nth-last-oftype(n), :only-of-type Tyto selektory fungují na stejném principu jako sada předcházejících, s jediným rozdílem. Berou v úvahu pouze elementy stejného typu, nikoli jakékoli potomky. Tedy zatímco p:nth-child(2) říká vyber druhého potomka rodičovského elementu, pokud je to odstavec, p:nth-of-type(2) se dá popsat jako vyber druhý odstavec rodičovského elementu 17. :not(s) Jedná se o selektor, pomocí kterého můžeme vybrat prvky, jež nevyhovují jinému selektoru dosazenému za s. Tedy například z HTML kódu <table> <tr><td></td></tr> <tr><td></td></tr>... <tr><td></td></tr> </table> můžeme CSS zápisem tr:not(:first-child) vybrat všechny řádky tabulky, kromě prvního. CSS3 dále rozšiřuje takzvané atributové selektory, jejichž podstatou je výběr elementu podle jeho HTML atributů. Základní selektor ve tvaru např. input[type= password ] (vybere všechny tagy input s atributem password, tedy formulářová pole pro hesla) se objevil v CSS2 18, stejně jako několik dalších. CSS3 přidává následující dva: [att$="value"] a [att*="value"]. Jejich použití je jednoduché. První z nich vybere prvky, jejichž hodnota atributu att končí řetězcem value. Druhý 16 GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, s ISBN COYIER, Chris. The Difference Between :nth-child and :nth-of-type. CSS-Tricks [online] [cit ]. Dostupné z: 18 Selectors Level 3. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: 13

14 pak prvky s atributem att, v jejichž hodnotě se vyskytuje řetězec value. Příkladem použití může být stylování odkazů podle stránek, na které vedou: HTML CSS <a href= >článek na IHNED.cz</a> <a href= >článek na IDNES.cz</a> a[href*= ihned ] {color: #0000ff; font-family: ihnedfont } a[href*= idnes ] {color: #ff0000; font-family: idnesfont } Zvláštní kategorií CSS3 selektorů jsou ty, které umožňují vybrat prvek podle určitého stavu, ve kterém se aktuálně nachází. Jedná se o jakési rozšíření starších selektorů z oblasti odkazů (:hover, :active, :focus apod). :enabled, :disabled, :checked a ::selection Tyto selektory umožňují specifický výběr formulářových prvků. :enabled vybere formulářové prvky, do kterých je možné zapisovat. Naopak :disabled zacílí na ty, do kterých je zápis zakázán, tedy jsou neaktivní. Selektor :checked dovoluje pracovat s objektem, který je zaškrtnut (jedná se tedy o dva formulářové prvky - radio přepínač a zaškrtávací pole). Typicky by tedy zápis vypadal takto: input:checked {}. Ve starších specifikacích CSS selektorů se objevoval také selektor ::selection, pomocí kterého bylo možné ovlivňovat vzhled vybraného textu (ve Windows typicky modré podbarvení myší či klávesnicí označeného objektu). Přesto, že se v aktuální specifikaci nenachází 19, jeho podpora v prohlížečích je poměrně dobrá 20. :target Velmi zajímavý selektor, pomocí kterého je možné ovlivnit vzhled cíle odkazu ve stránce. Ukázka kódu řekne více: HTML <p>více se dozvíte <a href= #nadpis3 >níže</a></p> Selectors Level 3. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: 20 CSS Selectors and Pseudo Selectors and browser support. Kimblim.dk: the big blog of nothingness [online] [cit ]. Dostupné z: 14

15 <h2 id= nadpis3 >Výhody CSS3</h2> CSS #nadpis3:target {background-color: #ff0000} Po přechodu na nadpis Výhody CSS3 (kliknutím na odkaz níže ) se tento podbarví červeně (tedy ve chvíli, kdy na něj bude zacíleno). Tento selektor lze tedy dobře využít k tomu, aby se uživatel při přesunu ve stránce odkazem neztratil. :empty Styl cílený pomocí tohoto selektoru se aplikuje na prázdné elementy. To jsou takové, které nemají žádné potomky ani textový obsah, tedy například prázdný odstavec: <p></p>. Podpora v prohlížečích Podpora CSS3 selektorů v prohlížečích je obdobná jako u jiných CSS3 prvků. Prohlížeče s jádrem WebKit (Chrome, Safari) s nimi nemají téměř žádný problém, stejně tak prohlížeče Firefox a Opera. Horší je situace u Internet Exploreru, který jejich plnou podporu nabízí až od verze Podrobná tabulka podpory je v příloze této práce Barvy Již specifikace CSS1 přinesla tři základní způsoby, jak vyjádřit barvu prvku různými zápisy. Jednalo se o jména šestnácti základních barev (blue, black, white apod.), hexadecimální zápis (#00f či #0000ff) a RGB zápis (rgb(0,0,255) či rgb(0%, 0%, 100%)) 22. CSS3 přichází se dvěma zásadními novinkami. Tou první je rozšíření RGB zápisu o míru průhlednosti na tzv. RGBA. Druhou inovací je zcela nový způsob zápisu pomocí modelu HSL a k němu opět varianta s průhledností HSLA 23. RGBA Způsob zápisu je obdobný jako u RGB (zůstávají tedy dvě možnosti zápisu hodnot celým číslem v rozsahu 0 až 255, nebo procenty), jediným rozdílem je 21 GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, s. 24. ISBN Cascading Style Sheets, level 1. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: 23 CSS Color Module Level 3. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: 15

16 přidání čtvrté hodnoty, která reprezentuje průhlednost (alfa kanál). Ta je zapsána jako desetinné číslo v rozsahu 0.0 (zcela průhledná barva) až 1.0 (zcela neprůhledná barva) 24. Následující čtyři CSS zápisy jsou tedy shodné, jelikož plně zelené barvě je nastavena plná neprůhlednost : p {color: rgb(0, 255, 0)} p {color: rgba(0, 255, 0, 1)} p {color: rgb(0%, 100%, 0%)} p {color: rgba(0%, 100%, 0%, 1)} Použití průhlednosti je však typické spíše pro barevné pozadí prvku. To umožňuje částečnou viditelnost prvku pod ním: HTML CSS <div> <!-- oddíl, typicky větší, než odstavec níže -->... <p>odstavec s poloprůhledným modro-červeným pozadím</p>... </div> div {background-image: url( image.png )} p {background-color: rgba(50,0,100,0.5)} HSL a HSLA Barevný model HSL nepracuje se složkami základních barev jako RGB model, nýbrž s odstínem (hue), sytostí (saturation) a jasem či světlostí (lightness). Pokud jde o teorii, nejedná se o žádnou novinku, modely byly vyvinuty v sedmdesátých letech minulého století a běžně se používají nejen v grafických programech 25. Konsorcium W3C se rozhodlo pro implementaci této možnosti zápisu proto, že je údajně intuitivnější a pro člověka příjemnější než RGB zápis 26. Způsob zápisu hodnot je shodný s RGB zápisem, ovšem rozsah hodnot se liší. Odstín je totiž definován jako úhel na barevném kruhu, kde červená barva=0 =360 a ostatní barvy jsou rovnoměrně rozmístěny (zelená=120, modrá 240 ). Sytost a světlost jsou pak 24 GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s ISBN HSL and HSV. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, [cit ]. Dostupné z: 26 CSS Color Module Level 3. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: 16

17 míry vyjádřené procenty 27. (Následující příklad je převzat přímo ze specifikace W3C 28 ): * { color: hsl(0, 100%, 50%) } /* red */ * { color: hsl(120, 100%, 50%) } /* lime */ * { color: hsl(120, 100%, 25%) } /* dark green */ * { color: hsl(120, 100%, 75%) } /* light green */ * { color: hsl(120, 75%, 75%) } /* pastel green, and so on */ Zápis ve variantě HSLA je shodný, pouze přidává míru průhlednosti, obdobně jako RGBA: p {background-color: hsla(0, 100%, 50, 0.5)} Hodnoty transparent a currentcolor Kromě výše zmíněných existují ještě dva zvláštní zápisy barev v CSS. První z nich je pomocí klíčového slova transparent. Udává, že prvek bude mít zcela průhledné (tedy v podstatě žádné) pozadí. CSS3 specifikace uvádí, že hodnota je vypočtena jako průhledná černá, tedy jako by bylo zapsáno rgba(0,0,0,0). Hodnota currentcolor byla zavedena z důvodu chybějícího klíčového slova pro počáteční hodnoty vlastností definujících barvy. Výchozí barvou je totiž barva nastavená vlastností color (přebírají ji) 29. Zápis p {color: #f00; box-shadow: 1px 1px 3px currentcolor} tedy určí, že stín odstavce převezme barvu od jeho písma (červenou). Vlastnost opacity Speciální vlastností, která s barvami souvisí, je opacity. Nabývá opět hodnot 0.0 až 1.0 a určuje míru průhlednosti celého prvku, tedy včetně jeho obsahu, nikoli pouze jeho barvy pozadí. Pokud tedy uvnitř prvku bude například obrázek, aplikuje se tato míra průhlednosti i na něj 30. Přestože vlastnost opacity existuje již delší dobu, oficiálně je zahrnuta právě až v CSS3. 27 GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, s ISBN CSS Color Module Level 3. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: 29 CSS Color Module Level 3. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: 30 GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s ISBN

18 Podpora v prohlížečích Všechny uvedené vlastnosti jsou podporovány v prohlížečích Chrome a Safari, ve Firefoxu od verze 3, Opery od verze 10 a Internet Exploreru od verze Obrázková pozadí Práce s pozadím prvků patřila vždy k základním funkcím kaskádových stylů. CSS3 modul background nyní přichází s několika novými vlastnostmi, díky kterým bude možné zjednodušit dosud používané techniky, především pokud jde o tzv. více násobná pozadí. Vlastnost background-image totiž nově podle specifikace CSS3 umožňuje definovat více obrázkových pozadí elementu 32. Zápis je jednoduchý: background-image: url(img1.png), url(img2.png), url(img3.png). Přičemž platí, že první obrázek bude vykreslen nejblíže k uživateli (jako by měl nejvyšší z-index), poslední nejdále. S každým obrázkem lze pak obdobným zápisem pracovat ve všech dalších vlastnostech pozadí, kromě background-color, tam zůstává zápis stejný, jako v CSS2, tedy např. background-color: #fff. Takto definovaná barva pozadí bude vždy vykreslena pod případnými obrázky určenými v background-image. CSS3 dále rozšiřuje hodnoty vlastnosti background-repeat o round a space 33. Vztaženo na předcházející příklad s background-image, zápis background-repeat: repeat, round, space by za podmínky, že velikost elementu bude větší než velikost obrázků na pozadí, znamenal následující: obrázek img1.png bude jednoduše opakován v horizontálním i vertikálním směru, dokud nevyplní celý prostor elementu (repeat). Obrázek img2.png bude také opakován, ovšem pokud šířka a výška elementu není dělitelná šířkou a výškou obrázku (tzn. obrázek se do elementu nevejde přesně x krát), pak dojde k jeho zdeformování, aby se tak stalo (round). Podobné je to u obrázku img3.png, ale místo zdeformování se mezi jednotlivými výskyty obrázků udělají mezery 34. Následující obrázek ukazuje interpretaci těchto hodnot v Internet Exploreru 9: 31 GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, s ISBN CEDERHOLM, Dan. CSS3 for web designers: a project-based guide to the latest in CSS. New York: A book apart, c2010, s Book apart, no. 2. ISBN GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, s ISBN CSS 3: Jak na stylování pozadí elementů?. In: Interval.cz [online] [cit ]. Dostupné z: 18

19 Obrázek 1 - srovnání hodnot repeat, round a space vlastnosti background-repeat. Zdroj: autor Zcela novou vlastností v modulu CSS3 Backgrounds je background-size. Jak je patrné již z názvu, umožňuje nastavit velikost obrázku na pozadí. K určení rozměrů lze použít pixely nebo procenta, zápis background-size: 100px 100px říká, že obrázek na pozadí bude mít šířku i výšku 100 pixelů, ať už je jeho skutečný rozměr a poměr stran jakýkoli. Kromě přesných rozměrů lze užít také dvě klíčová slova contain a cover. První z nich nastaví obrázku maximální možnou velikost (při zachování poměru stran) tak, aby se celý vešel do pozadí elementu. Hodnota cover nastaví nejmenší možnou velikost (při zachování poměru stran), při které obrázek pokryje celé pozadí elementu 35. Dobře je to patrné z obrázku: Obrázek 2 - srovnání hodnot auto, contain a cover vlastnosti background-size. Zdroj: autor Novinkami v CSS3 jsou i vlastnosti background-clip a background-origin, které mohou obě nabývat shodných hodnot border-box, padding-box a content-box. Background-clip určuje, pod kterými části elementu se pozadí zobrazí. Výchozí hodnotou je border-box, tedy že pozadí se bude vykreslovat pod celým elementem. Při hodnotách padding-box a content-box dojde k oříznutí obrázku tak, aby se zobrazoval jen na odpovídající části elementu. Background-origin dovoluje nastavit pomyslný počátek souřadnic, od něhož se bude počítat hodnota background-position, tedy zda to bude od kraje rámečku (border-box), paddingu (vnitřního okraje - padding-box), nebo samotného obsahu elementu (contentbox) 36. Posledním rozšířením, které v oblasti pozadí z CSS3 zmíním je obohacení vlastnosti background-position o dvě hodnoty. Nově je tedy možné rozšířit zápis background-position: center bottom například na background-position: 35 GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s ISBN CSS3: background-origin and background-clip. CSS3. Info: All you ever needed to know about CSS3 [online] [cit ]. Dostupné z: 19

20 center 20px bottom 30px, který zajistí, že obrázek na pozadí se vykreslí 30 pixelů od dolního okraje elementu a 20 pixelů od jeho horizontálního středu 37. Podpora v prohlížečích Podpora v prohlížečích se liší vlastnost od vlastnosti. Více obrázků na pozadí podporují Chrome a Safari, Firefox od verze 3.6, Opera od verze 10.5 a Internet Exploreru od verze Vlastnosti background-clip origin a -size jsou plně podporovány až ve Firefoxu 4, v Opeře od verze 10.5, v IE od verze Podpora dalších vlastností je uvedena v příloze Barevné přechody Barevné přechody (anglicky gradients) patří k těm novinkám CSS3, které by měly ušetřit webdesignérům nejvíce práce. Dříve bylo nutné jakýkoli barevný přechod ve stránce - typicky pozadí nějakého prvku či třeba celé stránky - řešit vyrobením obrázku v nějakém grafickém editoru. CSS3 přichází s mnohem rychlejším a flexibilnějším řešením. Zavádí několik funkcí, které definují barevné přechody jako obrázky a lze je tedy použít všude tam, kde je možné použít obrázek (typicky vlastnost background, ale třeba také list-style-image) 40. Je třeba poznamenat, že dokument, který gradienty specifikuje, je označen jako Working Draft a může se tedy ještě značně měnit. Základním typem přechodu je lineargradient, který umožňuje přechod jedním libovolným směrem i přes více barev. Směr je možno zadat klíčovými slovy left, right, top a bottom, nebo úhlem ve stupních (zkratka deg). Výchozím směrem je top, což odpovídá 270deg či -90deg, kdy je směr přechodu shora dolů 41. Barvy se pak dají zapsat klasickými CSS3 37 CSS 3: Jak na stylování pozadí elementů?. In: Interval.cz [online] [cit ]. Dostupné z: 38 CSS3 Multiple backgrounds. When can I use...: Support tables for HTML5, CSS3, etc [online] [cit ]. Dostupné z: 39 Comparison of layout engines (Cascading Style Sheets). In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, [cit ]. Dostupné z: 40 CSS Image Values and Replaced Content Module Level 3. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: / 41 GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s ISBN

21 způsoby a je u nich navíc možno určit, do jaké části přechodu budou zasahovat. Konkrétní barevný přechod pak může vypadat třeba takto: background: linear-gradient(left, #f00 0%, #0f0 50%, #00f 100%); Obrázek 3 - ukázka tříbarevného přechodu pomocí linear-gradient. Zdroj: autor Jde o přechod zleva doprava, který začíná červenou barvou. Na 50% šířky je dosaženo zelené barvy, která dále přechází do modré. Funkcí, která tento obyčejný gradient rozšiřuje je repeating-lineargradient. Jak název napovídá, dovoluje tato funkce daný přechod opakovat na pozadí prvku, čehož je možné využít, pokud je k určení barevných hranic (tzv. colorstops 42 ) použita absolutní jednotka pixely. background: repeating-linear-gradient(left, #f00 0px, #0f0 100px, #00f 200px, #f00 300px); V tomto případě jde přechod od červené přes zelenou a modrou zpět k červené a při dvojnásobné šířce objektu (600 px) vypadá výsledek takto: Obrázek 4 - ukázka tříbarevného přechodu pomocí repeating-linear-gradient. Zdroj: autor Okrajově zmíním ještě přechody radiální (kruhové či elipsové). U nich je syntaxe o něco složitější, kromě barev je totiž možné specifikovat jejich polohu středu a velikost (tvar). Jelikož na podrobnější rozbor zde není prostor, ukážu alespoň několik možností použití na příkladech. background: radial-gradient(left top, red,green,blue); background: radial-gradient(center center, circle, red,green,blue); background: radial-gradient(center, 60px 100px, red,green,blue); background: radial-gradient(50px 80px, 20px 20px, red,green,blue); 42 GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, s ISBN

22 Obrázek 5 - ukázka tříbarevného přechodu pomocí radial-gradient. Zdroj: autor V zápisu je nejprve určeno místo, kde bude střed přechodu, dále velikost přechodu a jeho barvy. K určení velikosti a tvaru je možno využít několik - v CSS3 jinde nepoužitých - klíčových slov, ovšem jak poznamenává Working Draft, tato se mohou změnit 43. Obdobně jako repeating-linear-gradient existuje také repeatingradial-gradient. Jeho použití je ilustrováno na následující ukázce, která kombinuje přecházející dva příklady. background: repeating-radial-gradient(left top, red, green, blue, red); background: repeating-radial-gradient(center center, circle, red, green, blue, red); background: repeating-radial-gradient(center, 60px 100px, red, green, blue, red); background: repeating-radial-gradient(50px 80px, 20px 20px, red, green, blue, red); Obrázek 6 - ukázka tříbarevného přechodu pomocí repeating-radial-gradient. Zdroj: autor Podpora v prohlížečích Všechny prohlížeče zatím podporují přechody pouze při zápisu se svým vendor prefixem. Firefox od verze 3.6, Internet Explorer od verze 10, Google Chrome od verze 10 (do té doby podporoval jiný, velmi nestandardní zápis). Opera umí lineární přechody od verze 11.1, radiální až od CSS Image Values and Replaced Content Module Level 3. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: / 44 When can I use...: Support tables for HTML5, CSS3, etc [online] [cit ]. Dostupné z: 22

23 1.2.5 Rámečky a stíny Mezi nejpoužívanější CSS3 vlastnosti patří patrně následující tři: borderradius, box-shadow a text-shadow. První z nich umožňuje vykreslit u objektu zaoblené rohy. Základní zápis je opravdu snadný, border-radius: 20px zakulatí všechny rohy objektu v poloměru 20 pixelů. Různý poloměr zaoblení lze nastavit buď samostatnými hodnotami border-top-left-radius, border-top-rightradius, border-bottom-right-radius a border-bottom-left-radius, anebo zkráceným zápisem, např. border-radius: 40px 30px 20px 10px. Použití lomítka (border-radius: 20px/40px) dovoluje nastavit různý poloměr horizontálního a vertikálního zaoblení 45. Všechny tři varianty jsou zobrazeny v následující ukázce: Obrázek 7 - použití vlastnosti border-radius v různých variantách. Zdroj: autor Vlastnost box-shadow slouží k vykreslení stínu u objektu. Její hodnotou může být jeden či více stínů, jejichž definici uvedu na příkladě box-shadow: 3px 8px 0px 2px #000. První hodnota je posun doprava (+) či doleva (-), druhá dolů (+) či nahoru (-). Třetí hodnota určuje poloměr rozostření a čtvrtá rozptyl (vzdálenost, do níž je stín vržen). V zápisu by mohlo být použito ještě klíčové slovo inset, které by indikovalo, že stín je vržen směrem do objektu a nikoli od něj 46. Možnosti stínů jsou krátce shrnuty na následujících příkladech, posledních z nich ukazuje aplikaci i více stínů najednou. box-shadow: 3px 8px 0px 2px #000; box-shadow: 0px 0px 15px #000; box-shadow: 5px -5px 15px #002E58; box-shadow: inset 5px -5px 15px #002E58; box-shadow: -5px 5px 15px #002E58, inset 5px -5px 15px #002E58; 45 CSS Backgrounds and Borders Module Level 3. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: / 46 GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s ISBN

24 Obrázek 8 - příklady použití vlastnosti box-shadow. Zdroj: autor. Téměř stejné určení stínů používá i vlastnost text-shadow, pomocí níž je možné vykreslit stín u textu. Jediným rozdílem je nemožnost použití čtvrté hodnoty (rozptylu) a klíčového slova inset. Jinak i zde platí možnost aplikace více stínů, nevrchněji pak bude ten, jenž je zapsaný jako první 47. text-shadow: 1px 1px 2px #333; text-shadow: 0 0 4px red; text-shadow: 0 0 4px green, 0 0 6px blue; text-shadow: -10px 0px 3px yellow, 10px 0px 3px green, 0px -10px 3px blue, 0px 10px 3px red; Obrázek 9 - ukázka použití text-shadow. Zdroj: autor Okrajově zmíním ještě vlastnosti, pomocí nichž lze nechat vykreslit rámeček (border) z obrázku. Jedná se o sadu několika vlastností. Border-image-source určuje klasickým způsobem cestu ke zdrojovému obrázku. Ten je pomocí borderimage-slice naporcován na části (hodnotou vlastnosti jsou vzdálenosti přímek od krajů obrázku, které jej rozdělují). Border-image-width nastavuje tloušťku rámečku a border-image-outset umožňuje jeho rozšíření mimo prvek. Způsob zobrazení obrázku lze ještě ovlivnit pomocí border-image-repeat (hodnoty stretch, repeat, round či space) 48. Všechny tyto vlastnosti se dají zapsat zkráceně jako border-image v pořadí, v jakém jsou zde představeny. Příklad použití: border-image-source: url(border.png); border-image-slice: ; border-image-width: 13px; 47 CSS Text Level 3. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: 48 GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, s ISBN

25 border-image-repeat: repeat; /* shodné s border-image: url(border.png) 20 / 13px repeat; */ border-image: url(border.png) 20 / 5px repeat; border-image: url(border.png) 20 / 10px / 15px stretch; /* za druhým lomítkem je použito border-image-outset*/ border-image: url(border.png) 20 / 9px 10px repeat stretch; Obrázek 10 - zdrojový obrázek (border.png) s průhledným pozadím. Zdroj: autor Obrázek 11 - ukázky použití vlastností border-image. Zdroj: autor Podpora v prohlížečích Vlastnost box-shadow podporuje Google Chrome od verze 10 (předtím s prefixem), Firefox 4+ (3.5 a 3.6 s prefixem), Opera od verze 10.5 a IE až od verze Stín u textu je podporován bez prefixu ve všech prohlížečích z poslední doby, výjimkou je IE, kde funguje až od verze U obrázkových rámečků je podpora horší. Bez prefixu a plně je podporuje jen Google Chrome od verze 16 (ovšem dle mých zkušeností s určitými bugy - neumí například round a space). Internet Explorer je nepodporuje vůbec, Firefox od verze 3.5 a Opera od 10.5, ovšem oba pouze ve zkráceném zápisu border-image a s prefixem Animace a přechody Tyto moduly přinášejí do CSS3 možnosti animace a mají potenciál nahradit dosud používanou technologii Flash, ačkoli jsou oba teprve ve fázi Working Draft 52. Přechody (transitions) umožňují plynulou změnu stavu objektu, respektive změnu jeho vlastností. Zápis může vypadat následovně: a{color: black; text-shadow: 0 0 3px rgba(100,100,100,0.4); transition-delay: 0s; 49 When can I use...: Support tables for HTML5, CSS3, etc [online] [cit ]. Dostupné z: 50 When can I use...: Support tables for HTML5, CSS3, etc [online] [cit ]. Dostupné z: 51 When can I use...: Support tables for HTML5, CSS3, etc [online] [cit ]. Dostupné z: 52 CSS3 Module Status. CSS3. Info: All you ever needed to know about CSS3 [online] [cit ]. Dostupné z: 25

26 transition-duration: 1s; transition-property: all; transition-timing-function: ease; /* shodné jako transition: all 1s ease 0s; */ } a:hover {font-size: 25px; color: white; background: black; text-shadow: 0 0 1px rgba(255,255,255,0.7);} Výsledkem je, že při najetí myší na odkaz se všechny jeho měněné vlastnosti (barva textu a pozadí, stín, velikost) překreslují plynule po dobu jedné vteřiny, jak ilustruje následující obrázek: Obrázek 12 - nástin animace pomoci CSS3 transitions. Zdroj: autor Pomocí vlastnosti transition-delay lze nastavit prodlevu mezi akcí, která animaci spouští, a animací samotnou. Transition-duration určuje délku animace, transition-timing-function umožňuje definovat, jaký bude její průběh (lineární, s rychlejším začátkem apod.), a to buď klíčovými slovy, nebo vzorcem. Transition-property dovoluje nastavit, na které vlastnosti se bude animace vztahovat, je možné tedy animovat třeba změnu velikosti 53. Všechny tyto vlastnosti lze zapsat zkráceně do transition, jak je také uvedeno v příkladu. Animace jsou o něco silnějším nástrojem, jelikož umožňují přímo pohyb objektů a především jednoduché definování vlastního procesu animace. Tím pádem je zápis o něco mojeanim { 25% {height: 150px} 50% {opacity:0.5; width: 300px; margin-left: 100px} 75% {height: 50px} } #animovat:hover { animation-name: mojeanim; animation-delay: 0s; animation-direction: normal; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function:ease; 53 CEDERHOLM, Dan. CSS3 for web designers: a project-based guide to the latest in CSS. New York: A book apart, c2010, s Book apart, no. 2. ISBN

27 /* shodné s animation: mojeanim 3s ease 0s infinite normal; */ } Při najetí na objekt s id animovat se spustí animace s názvem mojeanim, která je definována klíčovými snímky je tedy zapsán průběh animace, kterou je možno rozdělit na libovolné množství částí a v nich určit jednotlivé změny vlastností 54. U výše uvedeného příkladu tedy dojde v první čtvrtině animace ke změně výšky objektu na 150 pixelů, v polovině animace k 50% zprůhlednění, změně šířky na 300 pixelů a posunutí objektu o 100 pixelů doprava (zvětšením levého okraje). Nakonec ve třetí čtvrtině animace bude výška přenastavena na 50 pixelů. Ostatní nastavení animace je dáno vlastnostmi přímo svázanými s objektem. Tři z nich jsou obdobné jako u přechodů - animation-delay, animation-duration a animation-timing-function. Další vlastnost, animation-name, pochopitelně určuje, jaká animace se má spouštět (může jich existovat více). Pomocí animation-iteration-count je možné nastavit počet opakování animace (zde je nastaveno nekonečno). Hodnota vlastnosti animationdirection udává směr animace (kromě obráceného reverse lze použít také alternate či alternate-reverse pro střídání směrů při opakování animace) 55. Všechny tyto vlastnosti se dají zapsat do jedné s názvem animation, jak je naznačeno na konci příkladu. Podpora v prohlížečích Všechny prohlížeče podporují oba moduly pouze s vendor prefixy. Google Chrome umí přechody i animace od počátku, naopak Internet Explorer až od verze 10. Firefox vykresluje přechody od verze 4, animace od verze 5. Opera podporuje přechody od verze 10.5, podpora animací přijde pravděpodobně až s verzí GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s ISBN GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, 2011, s ISBN When can I use...: Support tables for HTML5, CSS3, etc [online] [cit ]. Dostupné z: 57 When can I use...: Support tables for HTML5, CSS3, etc [online] [cit ]. Dostupné z: 27

28 1.2.7 Další moduly CSS3 dále rozpracovává a specifikuje mnoho dalších oblastí, kterým se věnují jednotlivé moduly. Z těch nejdůležitějších jsou to například specifikace layoutu (fáze Candidate Recommendation), fontů (Working Draft) či jmenných prostorů (Recommendation). Zajímavostí může být modul týkajících se běžících textů, které se hojně vyskytovaly v začátcích HTML. Ten je ve stádiu Candidate Recommendation CSS3 Module Status. CSS3. Info: All you ever needed to know about CSS3 [online] [cit ]. Dostupné z: 28

29 2 Praktická část 2.1 Cíl praktické části Cílem praktické části práce jsou dva hlavní body, které spolu úzce souvisí. Zatímco první z nich je vidět na první pohled, ten druhý nikoli, avšak bez něho nelze prvního docílit. Jedná se zaprvé o přepracování vzhledu uživatelského rozhraní: Cílem je především použitelnost a intuitivní ovládání. Velký důraz je kladen na optimalizaci pro různé typy a verze prohlížečů. Díky CSS3 je dále možné dodat webu moderní a svěží vzhled, což ocení především mladší uživatelé, tedy studenti. Vzhled systému by měl být relativně jednoduchý, ne však strohý. Mělo by z něho být patrné, že se jedná o originální aplikaci, která vznikla přímo na VOŠIS a do jisté míry ji i reprezentuje. Druhým bodem jsou potřebné úpravy HTML kódů. Aby bylo možné v CSS3 vytvořit vzhled, který by splňoval podmínky výše, je jednoznačnou podmínkou mít moderní, čistý a správně strukturovaný HTML kód. Jak vyplývá už z názvu, kaskádové styly jsou založeny právě na dobře logicky strukturovaném HTML kódu stránky, díky kterému lze jednotlivé prvky pohodlně stylovat. Styly lze sice aplikovat i na zastaralé stránky, avšak s mnohem menší efektivitou, a proto je prvotním cílem přepracovat hlavní části zdrojového HTML kódu stránek a na něj pak aplikovat vzhled pomocí CSS Popis výchozího stavu systému Zdrojový kód systému v původní podobě je značně nekonzistentní a nepřehledný, jeho strukturovanost je špatná. Používá již velmi zastaralý, tzv. tabulkový layout, při kterém je celá stránka definována jako tabulka a jednotlivé prvky (hlavička, menu, obsah ) jsou zasazeny v jejich buňkách. Tento způsob tvorby webu má mnohé nevýhody 59 a je dnes již překonaný. Na zdrojovém HTML kódu je patrné, že není ručně psaný, tedy že je generovaný tzv. WYSIWYG editorem (WYSIWYG je v angličtině zkratkou slov What You See Is What You Get, tedy 59 STANÍČEK, Petr. CSS versus tabulkový layout. In: Pixylophone [online] [cit ]. Dostupné z: 29

30 volně přeloženo Co vidíte, to dostanete. Jedná se o schopnost DTP programů a textových procesorů pracovat v interaktivním režimu, při kterém se dokument zobrazuje na obrazovce v podobě, jakou bude mít při tisku, a veškeré zásahy v upravovaném dokumentu se ihned promítají do jeho zobrazení. 60 ). Autor tedy nemusí psát přímo zdrojový kód webových stránek, ale jednotlivé prvky je možno přímo umisťovat na stránku bez znalosti programovacích jazyků. Výsledný kód je tudíž generován programem a zpravidla nelze docílit jeho úplné čistoty a validity, nemluvě o přehlednosti. Dalším důvodem horší přehlednosti HTML kódu je už sama podstata stránek jedná se totiž o webovou aplikaci v PHP, kde je nemalá část obsahu generována právě tímto programovacím jazykem. To opět snižuje přehlednost výsledného kódu. Jednotlivé podstránky systému jsou si dost podobné, obsahují prakticky totožnou hlavičku (záhlaví, tedy logo a ovládací prvky) a patičku (zápatí se stručnými informacemi). Právě hlavička je z pohledu vzhledu a zdrojového kódu patrně nejslabší částí aplikace. Obsahuje obrovské množství přebytečného HTML kódu, jehož přítomnost a interpretace nemá žádný smysl. Aplikace je tvořena celkem 347 soubory, ne všechny jsou však ve skutečnosti nutné k jejímu provozu, neboť je stále vyvíjena a některé tak slouží jen k testování, případně se jedná o starší verze. Celková velikost všech těchto souborů činí 3,1MB. Celkově je na systému znát, že při jeho tvorbě byla na prvním místě funkčnost, které bylo třeba dosáhnout v krátkém čase a na vzhled nebyl kladen tak velký důraz. Obrázek 13 - náhled původní domovské stránky rezervačního systému. Zdroj: autor 60 BALVÍNOVÁ, Alena. WYSIWYG. In: KTD: Česká terminologická databáze knihovnictví a informační vědy (TDKIV) [online]. Praha: Národní knihovna ČR, [cit ]. Dostupné z: 30

31 2.3 Popis postupu redesignu V této kapitole jsou rozebrány jednotlivé fáze a části změn, které jsem v systému provedl. Je zde popsán jejich význam a přínos oproti původnímu stavu aplikace Použité technologie a kompatibilita Při návrhu vzhledu webové stránky je vždy důležité mít na paměti otázku kompatibility napříč prohlížeči. Tento problém se většinou týká starších prohlížečů, v kontextu CSS3 jde především o Internet Explorer verze 7 a 8. Jejich podpora CSS3 je prakticky nulová a obsahují chyby i v podpoře některých starších vlastností CSS. V teoretické části jsem okrajově zmínil nástroje, pomocí kterých lze podporu určitých funkcí doplnit a zde uvedu jejich konkrétní použití při redesignu systému. Prvním z takových nástrojů je skript Selectivizr. Jedná se o plugin, který ve spolupráci s javascriptovou knihovnou (např. jquery) dovede do Internet Exploreru 6 až 8 implementovat funkce CSS3 selektorů. Ačkoli právě jquery je již na webu použita pro zajištění správné funkčnosti menu, nelze ji v tomto případě použít pro spolupráci se Selectivizrem. Jak totiž uvádí tabulka podpory, ve spojení s jquery nefungují selektory založené na pořadí prvků, které jsem při redesignu ve značné míře použil. Z tohoto důvodu jsem se rozhodl pro knihovnu NWMatcher, která je podporována plně 61. Samotné použití skriptu je velmi snadné, stačí vložit jeho inicializaci do hlavičky stránky. Konkrétně tedy vypadá kód takto: <!--[if (gte IE 6)&(lte IE 8)]> <script src="soubory/styl/js/nwmatcher js" ></script> <script src="soubory/styl/js/selectivizr.js" ></script> <![endif]--> První a poslední řádek jsou takzvané podmíněné komentáře v IE, pomocí kterých je možné určit, že na kód mezi nimi bude brát zřetel pouze Internet Explorer od verze 6 do verze 8 včetně, ostatní prohlížeče jej budou ignorovat jako komentář. Díky tomu budou skript načítat pouze ty prohlížeče, kterým je určen. Druhý řádek načítá javascriptovou knihovnu, která zajišťuje chod pluginu, a třetí samotný plugin. Ten pak v CSS souboru vyhledá definice, u kterých je použit CSS3 selektor a vybere daný prvek na stránce náhradním způsobem - pomocí javascriptu. 61 Selectivizr: CSS3 pseudo-class and attribute selectors for IE 6-8 [online] [cit ]. Dostupné z: 31

32 Druhým externím skriptem použitým při redesignu pro zajištění podpory ve starších IE je CSS3Pie. Ten dokáže v IE simulovat několik CSS3 vlastností, především grafických efektů. Podstatou se tedy liší od Selectivizru, který zajišťuje, aby se na starší IE dané vlastnosti vůbec aplikovali. CSS3Pie dané vlastnosti (efekty) přímo vykresluje pomocí externího.htc souboru, který rozšiřuje CSS soubor přes vlastnost behavior 62. Mezi simulované vlastnosti, použité při redesignu patří následující: border-radius, box-shadow a linear-gradient. Ukázka kódu vypadá takto:.topnav ul li ul {... border-radius:5px; box-shadow: 0px 0px 3px #000; behavior: url(soubory/styl/pie/pie.php); } Jsou zde klasické definice dvou CSS3 vlastností a na posledním řádku následuje zavolání skriptu. Ten detekuje, zda jsou v definici nějaké CSS3 vlastnosti a následně je vykreslí. CSS3Pie používá ještě vlastní speciální vlastnost pie-background, do které je možné vložit hodnotu linear-gradient: input[type="submit"] {... background: linear-gradient(top, #598299, #264F66); -pie-background: linear-gradient(top, #598299, #264F66); behavior: url(soubory/styl/pie/pie.php); } V tomto případě se tedy postará o vykreslení hodnoty druhé vlastnosti. Třetí použitou technikou jsou filtry, konkrétně filtr barevného přechodu a průhlednosti. Opět platí, že se jedná o nástroj dostupný pouze v IE, což je v dané situaci ideální. Nastavení filtrů se zapisuje přímo do CSS souboru, jejich syntaxe je však značně odlišné od běžného CSS. Příkladem budiž následující ukázka: #content h2 {... background: #598299; background: -webkit-gradient(linear, left top, left bottom, from(#598299), to(#264f66)); /* Saf4+, Chrome */ background: -webkit-linear-gradient(top, #598299, #264F66); /* Chrome 10+, Saf5.1+, ios 5+ */ background: -moz-linear-gradient(top, #598299, #264F66); /* FF3.6 */ 62 CSS3 PIE: CSS3 decorations for IE [online] [cit ]. Dostupné z: 32

33 background: -ms-linear-gradient(top, #598299, #264F66); /* IE10 */ background: -o-linear-gradient(top, #598299, #264F66); /* Opera */ background: linear-gradient(top, #598299, #264F66); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#598299', EndColorStr='#264F66'); /* IE6,IE7 */ -ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#598299', EndColorStr='#264F66')"; /* IE8 */ } Prohlížeče, které podporují linear-gradient, vykreslí barevný přechod v pozadí elementu dle hodnot uvedených v daném background, zatímco v IE 6-9 se aplikuje filtr. Výsledek je téměř totožný. Obecně platí, že při snaze o maximální podobnost webu ve starších IE a moderních prohlížečích je nutné být opatrný. Filtry často nadměrně zatěžují prohlížeč, externí nástroje zase nemusí být vždy stoprocentně kompatibilní (např. CSS3Pie má mnoho omezení 63 ). Je tedy na místě zamyslet se, zda je ona funkčnost či efekt ve starém IE opravdu potřeba. A pokud ano, pak ji pečlivě vyzkoušet Celkový layout Před samotným začátkem redesignu bylo třeba položit si otázku, jak má vlastně web celkově vypadat, jaké má být rozložení jednotlivých objektů. Tradiční layout stránky tvoří hlavička, navigační prvky, obsah a patička. Samotné uspořádání samozřejmě závisí na typu stránky a množství obsahu. Některé jednoúčelové (například reklamní) weby se snaží o maximální originalitu a překvapení uživatele, a tak tuto zaběhnutou tradici boří, celkově ale platí, že tohoto klasického rozdělení se drží drtivá většina webových stránek. Hlavním důvodem je pravděpodobně to, že uživatelé jsou na to takto zvyklí již od dob používání rámců (zastaralá technika pro definování layoutu stránky pomocí tagů frame). Z výše uvedených základních částí webu je patrně nejvariabilnější menu (či obecně navigační prvky). Jeho umístění, velikost a styl se odvíjí především od množství položek, které obsahuje, potažmo tedy od velikosti webu. Vzhledem k tomu, že předmětem redesignu je webová aplikace používaná určitou skupinou lidí a není tudíž primárním účelem zaujmout návštěvníka a 63 Known Issues. CSS3 PIE: CSS3 decorations for IE [online] [cit ]. Dostupné z: 33

34 originálním vzhledem ho přimět k další návštěvě, rozhodl jsem se pro zachování klasického rozložení. Důležité je totiž především přehlednost systému a rychlá orientace v něm. Hlavní otázkou bylo tedy umístění menu. Rozhodl jsem se ho zachovat jako horizontální lištu, jako tomu bylo v původním vzhledu systému, ovšem mým záměrem bylo udělat z něj spíše součást hlavičky. Umístění menu do hlavičky považuji v tomto konkrétním případě za vhodné ze dvou hlavních důvodů. Prvním je fakt, že základ menu tvoří poměrně málo položek (jejich počet se mění podle role přihlášeného uživatele), které obsahují podpoložky. Situování takto větveného menu do strany by výrazně zmenšovalo prostor pro obsah webu a vzhledem k tomu, že ten je z drtivé většiny tvořen širokými tabulkami, by bylo takové umístění velmi nepraktické. Volba horizontálního menu v původním vzhledu mi tedy připadá logická a vhodná. Je však třeba mít na paměti fakt, že velké množství uživatelů používá v dnešní době zařízení se širokoúhlou obrazovkou. Konkrétně tzv. netbooky (především první modely) disponují rozlišením pouhých 1024x600 pixelů, přitom jsou u studentů poměrně oblíbené. Je tedy třeba maximálně omezit i výšku obsahově méně podstatných částí webu, jako je hlavička. Proto jsem se rozhodl do ní přímo vložit zmíněné horizontální menu a celkovou výšku hlavičky s menu snížit z původních 204 pixelů na 150 pixelů, jak ukazuje následující obrázek: Obrázek 14 - porovnání výšky hlaviček před a po redesignu. Zdroj: autor Pro podobnou minimalizaci jsem se rozhodl i u patičky, jelikož obsahuje naprosté minimum obsahu (prakticky jen jméno školy): Došlo u ní ke zmenšení ze 106 pixelů na 48 pixelů výšky. Co se týče celkové šířky layoutu, přihlédl jsem opět k stále ne bezvýznamnému množství uživatelů s šířkou rozlišení 1024 pixelů (podle statistik 34

35 největšího českého serveru měřícího statistiky návštěvnosti je to kolem 15% 64 ) a nastavil proto její minimální hodnotu na 1000 pixelů. Protože však systém obsahuje velké množství tabulkových výpisů, které jsou na šířku náročné, je při vyšším rozlišení šířka celého webu počítána relativně, konkrétně jako 80 % z šíře okna prohlížeče. V souvislosti s tímto rozměrovým rozvržením webu je klíčový fakt, že dosavadní HTML tabulkový layout, zmíněný v popisu výchozího stavu systému, bude předělán na HTML layout složený z několika málo tagů div, jejichž struktura vypadá následovně: <div id= page > <div id= header ><!-- hlavička --></div> <div id= content ><!-- hlavní obsah --></div> <div id= footer ><!-- patička --></div> </div> Základem je oddíl pojmenovaný page, kterým je obalen celý web. To umožňuje nastavit některé globální vlastnosti, které jsou podrobněji popsány dále v kapitole Základní společné prvky. Obsahem oddílu jsou tři základní části webu ( header, content a footer, menu je součástí headeru, tedy hlavičky), které jednoduše následují pod sebou Základní společné prvky V této kapitole postupně popíši prvky, které jsou společné pro jednotlivé podstránky systému. Tím základním je celkové pozadí stránky. Jedná se o fotografii školy, upravenou tak, aby nepůsobila rušivě a přitom vzhled webu oživovala. Symbolizuje fakt, že se jedná o rezervační systém, který vznikl přímo na této škole a měl by vzhledu dodávat originalitu a osobitost. Fotografie má velikost 80 Kb - je optimalizována tak, aby nebyla náročná na datové přenosy. Pomocí CSS zápisu body {background: url('bg.jpg') center top no-repeat fixed;} je umístěna na horizontální střed obrazovky, díky čemuž se volně přizpůsobuje rozlišení (čím vyšší rozlišení, tím větší část z ní je vidět). Definice fixed určuje, že se při posunu posuvníkem nehýbe společně se stránkou, ale zůstává na jednom místě. 64 Globální statistika. TOPlist [online] [cit ]. Dostupné z: 35

36 Jak už jsem zmínil výše, layout je postaven na hlavním oddíle, který obsahuje jednotlivé části stránky. Díky této technice lze jednoduše nastavit šířku webu a jeho zarovnání na střed prohlížeče. Tyto věci samozřejmě zajistí CSS, konkrétně tento zápis: #page {width: 80%; min-width: 1000px margin: 0px auto; position: relative; box-shadow: 0px 0px 5px #000;}. Ten definuje šířku 80 % šíře okna prohlížeče (minimálně však 1000 pixelů), automatické vypočítaní levého a pravého okraje (v praxi ono vystředění) a dále nastavuje pomyslný počátek souřadnic, vzhledem ke kterému bude počítáno případně absolutní pozicování. CSS3 vlastnost box-shadow ještě určí, že kolem celého těla stránky bude vykreslen stín, pokud prohlížeč tuto možnost podporuje. Protože efekty stínů jsou jednou z nejpříjemnějších novinek CSS3, rozhodl jsem se je použít ve větší míře. V designu je využita například technika přidávání efektu (v tomto případě stínu) pomocí CSS selektoru :before 65. Jedná se o následující kus kódu: body:before {content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; z-index: 100; box-shadow: 0px 0px 10px rgba(0,0,0,.8); } Selektory :before a :after byly uvedeny již v CSS2 a jedná se o způsob, jak pomocí CSS přidávat na stránku obsah (vlastnost content) před či za určitý prvek. Dají se však dobře použít i pro přidávání efektů, jako jsou právě stíny. Ani v tomto konkrétním případě nepřidáváme obsah žádný (uvozovky jsou prázdné), pouze určíme, že prvek bude mít šířku přes celou stránku, výšku 10 pixelů, nebude posunován společně se stránkou a to hlavní že bude vrhat stín. To celé se děje na úplném začátku stránky, ještě před tagem body. Vzniká efekt, při kterém je stránka jakoby zapuštěna pod úrovní ovládacích prvků prohlížeče, jak dokládá následující obrázek: Obrázek 15 - ukázka stínu vloženého pomocí body:before. Zdroj: autor Jedním z nejvýraznějších prvků webu je nadpis aktuální stránky. Tvoří předěl mezi hlavičkou a obsahem jednotlivých podstránek. Nese důležitou informaci o tom, kde se uživatel právě nachází, a proto by pod graficky nápadnou hlavičkou neměl 65 How to create slick effects with CSS3 box-shadow. RedTeamDesign [online] [cit ]. Dostupné z: 36

37 zapadnout. Z těchto důvodů je na něj aplikováno hned několik CSS3 prvků, které jsou vidět v následujícím kódu: #content h2 { background: #598299; background: linear-gradient(top, #598299, #264F66); box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 10px 20px rgba(255,255,255,0.25), inset 0-15px 30px rgba(0,0,0,0.3); text-shadow: 0px 1px 1px #739CB2;... } První CSS3 vlastností, která je na nadpis aplikována, je barevný přechod (anglicky gradient, výraz se někdy používá i v češtině) v jeho pozadí. Uvedená hodnota vlastnosti určuje, že se jedná o lineární přechod shora dolů za použití dvou barev - počáteční a koncové (CSS3 specifikace umožňuje použití i více barev 66 ). Pro případ, že by prohlížeč barevný přechod nepodporoval, je zde ještě definice background: #598299, která zajišťuje alespoň jednolitou barvu pozadí. Dále jsou zde na pozadí nadpisu použity tři stíny. První je obyčejný černý poloprůhledný, vržený směrem dolů. Druhý a třetí obsahují klíčové slovo inset, které indikuje, že se jedná o vnitřní stín, tedy směrem dovnitř prvku. Zatímco druhý je bílý, ze tři čtvrtin průhledný, třetí je černý s podobnou průhledností. Kombinace těchto stínů způsobuje plastický efekt, při kterém celý působí vypoukle a nápadněji. Poslední CSS3 vlastností, která je zde použita je text-shadow, která zajišťuje stín samotného textu. Nastavením jeho barvy na světlejší odstín než má samotné písmo a pozadí je dosaženo také zajímavého efektu, při kterém je text jakoby vytlačen do hloubky. Celý nadpis pak vypadá například takto: Obrázek 16 - nadpis s použitím efektů CSS3. Zdroj: autor 66 CSS Image Values and Replaced Content Module Level 3. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: / 37

38 Mezi společné prvky patři bezesporu i pozadí obsahu podstránek, tedy oddílu content. Je zvoleno tak, aby pod ním lehce prosvítala fotografie na úplném pozadí stránky, ale přitom byla zachována maximální přehlednost. Toho je docíleno nastavením barevného přechodu z téměř neprůhledné modré do téměř úplně průhledné modro-šedé (v druhé variantě jde o zelené odstíny). #content {... background: linear-gradient(top, rgba(145, 187, 208,0.9), rgba(38, 79, 102,0.1)); } Výsledek vypadá v kombinaci s nadpisem takto: Obrázek 17 - náhled pozadí hlavní části podstránky. Zdroj: autor Dalším prvkem, který se v systému poměrně často vyskytuje, jsou formulářová pole. I k jejich stylování je výrazně využito CSS3. Definici jejich vzhledu lze rozdělit do dvou částí. První z nich je aplikována na všechna textová pole, zaškrtávací políčka i odesílací tlačítka (tagy input a textarea) a nastavuje jim nejprve jednopixelový vystouplý rámeček a třípixelový vnitřní okraj a dále CSS3 vlastnosti. Těmi jsou zaoblené rohy, stín pod polem a přechod z bílé do světle šedé (pokud toto prohlížeč nepodporuje, zůstane u načtení obrázku bg-form.png, který tento přechod simuluje). Po najetí myší, či zaměření prvku klávesou TAB (:focus) se pozadí změní na bílou a rámeček promáčkne. input, textarea {border: 1px outset #aaa; padding: 3px; 38

39 border-radius:5px; box-shadow: 0px 0px 3px #000; background: #fff url('bg-form.png') repeat-x center bottom; background: linear-gradient(top, #ffffff, #dddddd); } input:hover, input:focus, textarea:hover, textarea:focus { background: #fff; border-style: inset; } Toto nastavení je částečně přepsáno následujícím kódem, který se však aplikuje pouze na odesílací tlačítka (tedy tagy input, jež mají v atributu hodnotu submit). input[type="submit"] {color: #0D364C; text-shadow: 0px 1px 1px #739CB2; font-weight: bold; position:relative; padding: 5px 15px; border: none; background: #598299; background: linear-gradient(top, #598299, #264F66); -pie-background: linear-gradient(top, #598299, #264F66); behavior: url(soubory/styl/pie/pie.php); } input[type="submit"]:hover, input[type="submit"]:focus {-piebackground: #638CA3; background: #638CA3; border: none;} Zajišťuje přebarvení na modrý (ve druhé variantě zelený) přechod, a to i ve starších IE pomocí CSS3Pie. Mění také barvu textu tlačítek a přidává stejný stín textu, jaký je použit u nadpisů úrovně h2. Při aktivování je pozadí tlačítka změněno na světle modrou barvu. Obrázek 18 - ukázka formulářových prvků nastylovaných s využitím CSS3. V prvním řádku výchozí zobrazení, ve druhém při aktivaci myší (:hover). Zdroj: autor Posledním společným prvkem, který zde zmíním, jsou běžné odkazy. I na ně jsou použity CSS3 efekty, konkrétně nenápadný stín (jednopixelový) a vlastnost transition, která zajistí plynulý dvouvteřinový přechod stavu při najetí na odkaz myší (tedy postupné rozsvícení z tmavě modré barvy do bílé). Zdrojový kód je následující: a {color: #002940; text-shadow: 0 0 1px rgba(100,100,100,0.4); transition: all 0.2s ease-in-out; } 39

40 a:hover {color:#fff;text-shadow:0 0 1px rgba(100,100,100,0.7); } větším částem. Z popisu obecných prvků designu je to vše a dále se věnuji jednotlivým Hlavička stránek Jak už jsem naznačil v popisu výchozího stavu systému, hlavička každé stránky je obsažena přímo v daném souboru přesto, že je prakticky všude stejná. V moderních PHP aplikacích bývá zvykem v takovém případě využít možnosti tzv. includování (vkládání jednoho souboru do druhého). To umožňuje mít na serveru jeden soubor, ve kterém je uložena hlavička webu, který se vkládá do všech podstrání. Hlavní výhodou je nejen úspora místa (hlavička je na serveru pouze jednou), ale především snadná editace potřebnou změnu stačí udělat na jednom místě a projeví se všude. Tato metoda includování stejných či podobných částí stránek zde není použita, v rámci změn zdrojového kódu ji budu implementovat. Na samotném kódu hlavičky je nejvíce znát použití zmiňovaného WYSIWYG editoru. Tato jednoduchá část stránky, která obsahuje prakticky jen pozadí, logo, přihlašovací formulář a menu je totiž kódována jako tabulka s několika desítkami buněk. Přitom použití tabulky není nutné a už vůbec ne vhodné. Vykreslení takové tabulky trvá prohlížeči o mnoho déle než vykreslení tzv. DIV layoutu 67, který je i mnohem úspornější na zápis zdrojového kódu. Původní kód hlavičky měl zhruba 170 řádků, velikost 9kB a jeho část vypadala například takto: Obrázek 19 - původní zdrojový kód hlavičky část. Zdroj: autor 67 STANÍČEK, Petr. CSS versus tabulkový layout. In: Pixylophone [online] [cit ]. Dostupné z: 40

41 Je zde vidět množství prázdných buněk (tag <td>), které obsahují pouze obrázek (<img>). Ten je však průhledný, prázdný a nemá na vzhled stránky žádný vliv. Všechny tyto prvky však musí prohlížeč zpracovat a vykreslit, což prodlužuje dobu načítání stránky. Z těchto důvodů jsem HTML kód celé hlavičky přepsal do následující (značně jednodušší) podoby: Obrázek 20 - nový zdrojový kód hlavičky. Zdroj: autor Včetně skrytého PHP kódu má hlavička necelých 40 řádků a velikost 1,3kB. Místo tabulky je definován oddíl header, který obsahuje logo (id logo), odkazy na externí zdroje (sks.cz a klimanek.sks.cz) a generátor nových hesel (id extlink-box). Dále je pomocí PHP kódu vkládán buď přihlašovací formulář, nebo nick přihlášeného uživatele (id login-box), a nakonec menu dle oprávnění role uživatele (class topnav). Kromě zmíněných úprav HTML je nutné provést ještě některé související funkční úpravy PHP kódu. Soubory aplikace se nacházejí v různých podadresářích (například /student či /ucitel). Aby bylo možné vkládat do každého ze souborů stále stejný soubor s hlavičkou, je nutné v ní zadat adresy v takovém tvaru, aby byly funkční pro různé úrovně adresářů. V původní verzi aplikace je toto zanedbáno, a proto při prohlížení souboru v podadresáři student (např. seb.sks.cz/student/ucet.php) a kliku na logo dojde k nenalezení hlavní stránky index.php. Systém se ji totiž pokouší najít v podadresáři student, místo v kořenovém adresáři. Tento problém lze odstranit absolutní adresací (tedy zapsaní odkazu s celou doménou), což však není vhodné z důvodu možné změny doménového jména. Lepším řešením je použití PHP 41

42 proměnné $_SERVER[ HTTP_HOST ], která název aktuální domény obsahuje. Takto pozměněný kód hlavičky jsem vložil do souboru header.php a uložil jej do podadresáře soubory. Vložení do každé stránky pak zajistí následující PHP kód, který je třeba zapsat do všech souborů, kde se má hlavička objevit: <?php include "soubory/header.php";?>. Nyní je s upraveným kódem hlavičky možno naplno využít sílu CSS. Vzhled celého oddílu s hlavičkou je definován takto: #header {position: relative; background: url('bg-header.jpg') no-repeat; width: 100%; margin: 0px auto; height: 150px;} Vlastnost position: relative umožňuje následné absolutní napozicování prvků v hlavičce (odkazy, přihlašovací formulář, menu) relativně k její pozici a rozměrům. Dále je nastaven obrázek na pozadí, jehož tématiku (otevřená kniha) jsem zvolil tak, aby symbolizovala praktický účel systému. Následuje definice šířky, výšky a vystředění. Důležitým prvkem v hlavičce je logo: #logo {display: inline-block; background: url('logo.png') norepeat 20px 0px; width: 432px; padding: 0px 20px 10px; height: 86px;} #logo:hover {animation: houp 3s 1;} Jak je vidět z HTML kódu o něco výše, ve skutečnosti se jedná o odkaz, proto je nutné jej nejdříve přepnout na poloblokový element (display: inline-block), aby bylo možné mu dále nastavit pozadí (to je samotné logo obrázek ve formátu PNG s průhledným pozadím) a rozměry. Pomocí selektoru :hover (událost najetí myší) pak na logo aplikujeme CSS3 animaci s názvem houp a určujeme, že bude trvat 3 vteřiny a bude vykonána jednou. Její definice je zapsána na jiném místě CSS souboru houp { 0% {transform: rotate(0deg); opacity:1;} 20% {transform: rotate(-6deg);} 40% {transform: rotate(6deg);} 60% {transform: rotate(-3deg); opacity:0.3;} 80% {transform: rotate(3deg);} 100% {transform: rotate(0deg); opacity:1;} } Tímto je popsán průběh jednoho cyklu animace. Dochází k postupné rotaci prvku pomocí vlastnosti transform a změně průhlednosti prvku vlastností opacity: od najetí myší na prvek do 1/5 doby animace (tři vteřiny) bude prvek pootočen o šest 42

43 stupňů proti směru hodinových ručiček, druhou pětinu naopak o šest stupňů po směru hodin (oproti původní poloze). Ve třech pětinách animace se objekt opět pootočí na druhou stranu (o tři stupně). Zároveň do této doby animace došlo k postupnému snížení neprůhlednosti (opacity) ze 100 % na 30 %. Od toho okamžiku je neprůhlednost opět zvyšována až na 100 %. Celkově postupné snižování míry rotace a střídání stran způsobuje efekt pomyslného houpání. Je třeba poznamenat, že se jedná o demonstraci možností CSS3 animací, samotná vhodnost animace loga je samozřejmě subjektivní záležitost. Obrázek 21 - ukázka náklonu a poloprůhlodnosti loga v průběhu animace. Zdroj: autor. následovně: Dalším prvkem hlavičky jsou tři odkazy v její horní části. Jejich vzhled je dán #extlink-box {position: absolute; right: 210px; top: 5px;} #extlink-box a {color: #000; display:inline-block; margin: 0px 3px; text-shadow: none;} #extlink-box a:nth-of-type(3) {margin-left: 50px} Box s odkazy je absolutně napozicován k pravému hornímu okraji hlavičky, barva odkazů je nastavena na černou a odkazy jsou přepnuty na poloblokové zobrazování, aby bylo možné jim nastavit 3pixelový okraj z levé i pravé strany. Na posledním řádku kódu je použit CSS3 selektor. Pomocí něho je vybrán třetí odkaz, kterému je nastaven větší levý okraj (jedná se o odkaz na stránku generující nové heslo a jeho odsunutí od odkazů na externí zdroje). Absolutní pozicování je využito i u přihlašovacího formuláře: #login-box {color: #000; position: absolute; right: 20px; top: 5px; text-align: right; animation: fadein 3s;} #login-box input {width: 100px; margin: 2px 0px} #login-box p {font-weight: bold; margin:0; padding: 0} Div je opět umístěn do pravého horního okraje, jeho obsah je zarovnán k pravé straně a barva písma nastavena na černou. Dále je nastavena šířka formulářových polí, okraje mezi nimi a tučnost písma jejich popisků. Na celý box je opět aplikována třívteřinová animace, tentokrát jednodušší: 43

44 @keyframes fadein { 0% {opacity:0;} 100% {opacity:1;} } Pravidlo keyframes s názvem fadein zde určuje prosté zvýšení hodnoty vlastnosti opacity z 0 % na 100 %. Výsledkem je efekt postupného objevení se prvku. Poslední, avšak stěžejní součástí hlavičky je menu. Jeho CSS kód by se dal rozdělit na funkční a vzhledovou část. Funkční zde nebudu rozebírat, jelikož se jedná o převzatý plugin Superfish, který funguje ve spolupráci s javascriptovou knihovnou jquery, a který se nacházel již v původním systému. Navíc i samotná vzhledová část je poměrně rozsáhlá. Následující kód určuje pouze vzhled oddílu, ve kterém je menu obsaženo:.topnav { width:100%; font: normal 19px georgia,verdana; padding: 0; margin:0; position: absolute; z-index: 3; bottom: 0px; left: 0px; box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px 20px rgba(255,255,255,0.25), inset 0-5px 30px rgba(0,0,0,0.3); animation: fadein 1s; background: url('bg-transpb85.png') repeat; background: rgba(20, 20, 20, 0.5); /*...definice pro jednotlivé prohlížeče... */ background: linear-gradient(top, rgba(20,20,20,0.2), rgba(20,20,20,0.9)); } Menu je opět absolutně napozicováno, a to k dolnímu okraji hlavičky. Zabírá její celou šířku, výška je počítána automaticky dle jeho obsahu. Text (včetně odkazů) má velikost 19 pixelů a je použit font Georgia. Následuje několik CSS3 prvků. Tím prvním je poměrně složitý stín, složený ze čtyř složek, z nichž tři jsou vnitřní (klíčové slovo inset), a jeden vnější. Jejich vykreslením je docíleno lehce plastického (vypouklého) efektu, stejně jako u nadpisu popsaného v předcházející kapitole. Dále je zde aplikována již zmíněná animace fadein, ovšem pouze o délce jedné vteřiny, aby nebránila použití důležitých ovládacích prvků. V praxi je tento efekt málo postřehnutelný, jelikož současné prohlížeče ještě nejsou pro CSS3 animace plně optimalizovány. Vlastnosti background nastavují vzhled pozadí, a to s maximálním ohledem na kompatibilitu: První definice nabízí prohlížečům obrázek PNG s poloprůhledným pozadím, ten je funkční téměř ve všech současných 44

45 prohlížečích. Pokud prohlížeč umí barevný model RGBA, pak její hodnotou přepíše zmíněný obrázek. Třetí variantou, která funguje ve všech moderních prohlížečích, je linear-gradient přechod z více průhledné šedé do méně průhledné. Následující zápis formátuje vzhled obsahu výše popsaného oddílu, který menu drží..topnav li {float:left; padding:0 10px; list-style-type:none;}.topnav li a {color:#fff; display:block; float:left; padding:14px 25px; text-decoration:none; text-shadow: 0 0 1px rgba(20,20,20,0.7), 0 0 3px rgba(20,20,20,0.7), 0 0 4px rgba(20,20,20,0.7), 0 0 5px rgba(20,20,20,0.7), 0 0 6px rgba(20,20,20,0.7); transition: all 0.3s ease-in-out; behavior: url('soubory/styl/pie/pie.php'); } První řádek pracuje s jednotlivými položkami menu (v HTML <li>): určuje, že každá z nich bude obtékána (ve výsledku tedy budou v jednom řádku), bude mít vnitřní levý a pravý okraj 10 pixelů a nebude před nimi zobrazována žádná odrážka (symbol, kterým je jinak uvozena každá položka seznamu, typicky kolečko). Hodnoty v definici.topnav li a pak určují konkrétní vzhled textu odkazů. Je jim nastavena bílá barva a vnitřní okraj, zrušeno podtržení a přiřazen poměrně složitý stín. Skládáním jeho složek je dosaženo efektu postupného slábnutí stínu, což je dobře vidět zvláště při najetí myší na odkaz. Z CSS3 je zde dále použita vlastnost transition, tedy přechod. Hodnota all 0.3s ease-in-out určuje, že všechny změny vlastností objektu (například při najetí myší) budou po dobu tří desetin vteřiny plynule měněny. Výsledkem je tedy jednoduchá animace přechodu od jednoho stavu (vzhledu) k druhému. Poslední řádek kódu aktivuje skript CSS3Pie, získá však význam až při stylování jednotlivých odkazů se selektorem :hover (najetí myší), které je popsáno o něco dále. Protože při přihlášení uživatele v roli vedení je menu značně obsáhlejší, je třeba ještě ošetřit velikost položek tak, aby se do menu vešly. O to se postará následující CSS kód, který zmenšuje písmo odkazů a jejich vnitřní okraj: následovně:.topnav.vedeni {font-size: 16px; }.topnav.vedeni li a {padding: 14px 10px} Celkový pohled nepřihlášeného uživatele na hlavičku systému pak vypadá 45

46 Obrázek 22 - náhled hlavičky v základním stavu. Zdroj: autor Na samotné menu se však větší část CSS3 vylepšení aplikuje až při najetí myší na odkaz:.topnav ul li a:hover { background: #598299; text-decoration:none; border-radius:5px; box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px 20px rgba(255,255,255,0.25), inset 0-5px 30px rgba(0,0,0,0.3); background-image: linear-gradient(top, #598299, #264F66); -pie-background: linear-gradient(top, #598299, #264F66); } Tento kód zajistí, že odkaz se podbarví barevným přechodem, který je ještě překryt obdobným stínem jako celé menu, a jeho rohy budou zaobleny v poloměru 5 pixelů. Poslední řádek kódu zajišťuje barevný přechod i v Internet Exploreru, prostřednictvím CSS3Pie. Prvních pět položek menu první úrovně (většina uživatelů jich ani více k dispozici nemá) je navíc podbarveno různou barvou, aby byly demonstrovány možnosti selektoru :nth-of-type(n). Pomocí toho je totiž vybrán n-tý prvek a u něj jsou přenastaveny barvy pozadí, určené výše v.topnav ul li a:hover:.topnav ul li:nth-of-type(2) a:hover {background: #829959; background-image: linear-gradient(p, #829959, #4F6626); -pie-background: linear-gradient(top, #829959, #4F6626); }.topnav ul li:nth-of-type(3) a:hover {background: #EB7829; background-image: linear-gradient(p, #EB7829, #C35001); -pie-background: linear-gradient(top, #EB7829, #C35001); }.topnav ul li:nth-of-type(4) a:hover {background: #C03B39; background-image: linear-gradient(top, #C03B39, #8C0805); -pie-background: linear-gradient(top, #C03B39, #8C0805); }.topnav ul li:nth-of-type(5) a:hover {background: #995982; background-image: linear-gradient(top, #995982, #66264F); -pie-background: linear-gradient(top, #995982, #66264F); } 46

47 Dohromady s podbarvením všech jednotlivých podmenu stylem.topnav ul li:nth-of-type(2) ul {background: #829959;}.topnav ul li:nth-of-type(3) ul {background: #EB7829;}.topnav ul li:nth-of-type(4) ul {background: #C03B39;}.topnav ul li:nth-of-type(5) ul {background: #995982;} pak celá hlavička s aktivním menu vypadá například takto: Obrázek 23 - náhled hlavičky s vysunutou položkou menu č. 3. Zdroj: autor Obrázek 24 - náhled hlavičky s vysunutou položkou menu č. 4. Zdroj: autor Úvodní stránka Na úvodní stránce je zobrazena hláška o pilotním režimu systému, případně novinky od učitelů, pokud nějaké jsou. Vzhled obou informací určuje především třída.content, která je použita v hlavní části všech podstránek. Tvoří podklad pod jakýmkoli textem či jiným obsahem, aby zlepšila jeho čitelnost na poloprůhledném pozadí..content {margin: 35px auto 50px; width:600px; padding: 10px; border-radius:5px; box-shadow: 1px 1px 3px #555, 0px 0px 2px #333 inset; background: linear-gradient(-45deg, rgba(175, 204, 186, 0.6), rgba(224, 236, 230,0.2)); } Z CSS3 je zde použit border-radius, který zakulacuje všechny čtyři rohy v poloměru 5 pixelů, a dále dvojnásobný stín, jehož první složka vrhá lehký stín doprava dolů a druhá jemně zvýrazňuje jeho okraje. Jako pozadí je použit lineární 47

48 přechod zleva doprava v modrých (případně zelených) barvách s různou mírou průhlednosti. Typicky box (v HTML zapsán jako div) s obsahem pak vypadá takto: Obrázek 25 - ukázka boxu.content s obsahem. Zdroj: autor Novinky jsou v HTML řešeny tabulkou, kde jedna novinka zabere tři řádky (jméno učitele, datum, text). Tyto řádky se pod sebou opakují, pokud je aktualit více. Z toho důvodu jsem zde využil CSS3 selektorů, které vybírají vždy n-tý řádek tabulky (třídy.novinky). První a každý třetí je naformátován s přechodem v pozadí a stínem u textu, aby působily jako hlavička každé novinky. Druhé řádky trojic obsahují datum, které je uvedeno menším písmem. Ve třetích řádcích je text zarovnán do bloku a má větší řádkování. Na celou tabulku je aplikována také třída.content (pomocí HTML zápisu <table class= content novinky >), která jí dodává pozadí a další CSS3 efekty popsané výše. table.novinky {margin: 40px auto 40px; width:700px;} table.novinky tr:nth-of-type(3n+1) {font: bold 16px 'trebuchet ms', tahoma; color:#fff; text-decoration:none; width: 690px; text-shadow: 0 0 1px rgba(20,20,20,0.7), 0 0 3px rgba(20,20,20,0.7), 0 0 4px rgba(20,20,20,0.7), 0 0 5px rgba(20,20,20,0.7), 0 0 6px rgba(20,20,20,0.7); background: #03392D; background: linear-gradient(to bottom, #2B6155, #03392D); } table.novinky tr:nth-of-type(3n+2) {color:#3c6a1b; fontsize:11px;} table.novinky tr:nth-of-type(3n+3) {font-size:12px; textalign: justify; line-height: 130%;} Obrázek 26 - screenshot nastylovaných aktualit. Zdroj: autor 48

49 Celá úvodní stránka s hlavičkou vypadá následovně: Obrázek 27 - náhled úvodní strany rezervačního systému. Zdroj: autor Tabulkové výpisy témat a konzultací Nejvýraznější rys celého rezervačního systému je častý výskyt tabulkových výpisů s poměrně vysokým počtem sloupců. Nejčastěji se pochopitelně jedná o přehled témat či konzultací. Ačkoli se tabulkám snaží webdesignéři již delší dobu vyhýbat, zde je jejich použití nezbytné, účelné a zcela logické, jelikož je třeba organizovat velké množství dat. Všechny tyto podstránky jsou si výrazně podobné, přitom se ale liší například šířkou sloupců či jinými detaily. V této kapitole se jim budu věnovat dohromady a popíši jejich společné prvky. Obrázek 28 - příklad tabulkového výpisu témat v rezervačním systému. Zdroj: autor 49

50 Základ vzhledu těchto tabulek tvoří opět třída.content, která je rozšířená třídou.temata, jež zajišťuje roztažení obsahu přes celou šířku webu. Nejnápadnějším prvkem v tabulkách jsou jejich záhlaví (v HTML značka <th>). table.content th {color:#fff; text-shadow: 1px -1px 1px #000; text-align:center; text-transform: uppercase; background: #8FCE43; background: linear-gradient(to bottom, #2B6155, #03392D); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#2b6155', EndColorStr='#03392D'); /* IE */ }.temata th a {color: #FF6600; font-size: 9px}.temata th a:hover {color: #fff; } Jak je vidět, jsou nastylovány s modrým (či zeleným) přechodem, pro starší prohlížeče bez podpory této funkce je zde ještě předtím definována jednolitá barva. V IE je kompatibilita zajištěna použitím vlastnosti filter. Veškerý text je převeden na velká písmena a vykreslen bílou barvou s černým stínem doprostřed buněk. Na posledních dvou řádcích je ošetřena barva odkazů - aby byly výrazně odlišitelné, jsou oranžové a po najetí myší bílé. Celkově je vzhled záhlaví zaměřen na jeho zvýraznění, aby byl obsah tabulek maximálně přehledný. Obrázek 29 - ukázka záhlaví tabulkových výpisů v rezervačním systému. Zdroj: autor Přehlednost výrazně zvyšuje i další použitá technika střídání barevných odstínů jednotlivých řádků. V původní verzi systému se o rozlišení sudých a lichých řádků staralo PHP a vypisovalo CSS třídu buď pro lichý, či sudý řádek: <?php... if($i%2==0){echo ("<tr class='sudy'>");} else {echo ("<tr class='lichy'>");}...?>. Díky použití CSS3 je možné jednak úplně vynechat toto PHP rozhodování a navíc zkrátit i výsledný HTML kód, neboť místo přiřazení třídy se dá použít selektor :nth-of-type. Může se to zdát jako malá úspora, avšak je třeba si uvědomit, že při větším množství řádků v jedné tabulce (např. osmdesát) je to úspora již více než tisíc znaků (40*12+40*13) a osmdesát PHP rozhodování. HTML tedy zůstane maximálně čisté - pouze <tr> - a o střídavé obarvení pozadí se postará pouze CSS3:.temata tr:nth-child(2n+1) { background:#99cfc3; 50

51 background: rgba(153,207,195,0.6); }.temata tr:nth-child(2n) { background:#ade3d7; background: rgba(173,227,215,0.6); } Nejprve je definován lichý řádek (:nth-child(2n+1), šlo by použít také klíčové slovo odd), a poté sudý (:nth-child(2n) či even). V obou je obsažena kromě poloprůhledné barvy ve formátu RGBa ještě barva obyčejná pro starší prohlížeče. Obrázek 30 - podbarvení sudých a lichých řádků: Chrome (RGBa) vs. IE7 (RGB). Zdroj: autor Pro zlepšení orientace v tabulkovém výpisu se řádek, na kterém je právě kurzor myši, obarví na tmavší odstín. To by mělo zamezit situacím, kdy se uživatel při pohybu myší v rozsáhle tabulce ztratí a v praxi si pak například omylem zaškrtne jiné téma, než měl v úmyslu. I v tomto případě je použit CSS3 selektor, konkrétně :not. Pomocí něho je možné aplikovat pravidlo na všechny řádky tabulky, kromě prvního, v tom se totiž nachází záhlaví, u kterého by bylo obarvení při najetí myší nežádoucí. Současně s pozadím je třeba změnit ještě barvu písma na bílou, aby bylo na tmavším odstínu dobře čitelné, stejně tak u odkazů. Při změně těchto vlastností je použit CSS3 přechod (transition), který přebarvení dodává slábnoucí efekt..temata tr:not(first-of-type):hover{ background:#03392d; color: #fff;}.temata tr:not(first-of-type):hover td a {color: #ddd;}.temata tr:not(first-of-type){ transition: all 0.2s ease-in-out;} Obrázek 31 - náhled aktuálně myší označeného řádku. Zdroj: autor Jak už jsem nastínil, CSS3 selektory mají v tabulkách velké využití, a to nejen při stylování řádků, ale i sloupců. V původním systému bylo nastavení šířky řešeno 51

52 většinou přímo v HTML (<td width= 30% >), což je ale zastaralý způsob, který by měl z HTML vymizet 68. Jedná se totiž o určování vzhledu, který je doménou CSS. Před příchodem CSS3 by se tak dala použít třída či id (což je nepraktické, možných šířek buněk může být hodně a každá by musela mít svou definici) nebo zápis stylu přímo do HTML - <td style= width:30% >, ale to zase významně zvyšuje množství HTML kódu, stejně jako výše popsané rozlišování sudých a lichých řádků. Řešení přináší CSS3 a selektor :nth-of-type, kterým lze jednoduše vybrat n-tý sloupce, a tomu pohodlně nastavit šířku. V praxi tedy stačí přidat konkrétní třídu každé tabulce, kde je třeba šířku sloupců nastavit, a nikoli každému sloupci: <table class= content temata schvalovani >... </table> Tabulce je tedy nastavena třetí třída.schvalovani (jde o výpis témat ke schválení vedením) a v ní obsažené buňky záhlaví (tím pádem celé sloupce, z principu tabulky) jsou následně nastylovány v CSS:.schvalovani th:nth-of-type(1){width:15%}.schvalovani th:nth-of-type(2){width:17%}.schvalovani th:nth-of-type(3){width:30%}.schvalovani th:nth-of-type(4){width:5%} První sloupec má šířku 15 % z celkové šířky tabulky, druhý 17 % a tak dále. Poslední sloupec zde zaujme zbylé místo. Hodnoty jsou v relativních jednotkách, aby se vždy přizpůsobily šíři celého webu. Obrázek 32 - náhled sloupců stylovaných selektorem :nth-of-type. Zdroj: autor Dalším společným prvkem tabulkových výpisů je řazení dat. Jako ovládací prvek tohoto řazení byl v původním systému zvolen obrázek ve tvaru šipky. Při redesignu jsem se rozhodl použít místo obrázku techniku Creating triangles out of borders 69. Jedná se v podstatě o způsob, jak pomocí CSS generovat trojúhelníky. 68 COYIER, Chris. List of Deprecated Attributes Still in Widespread Use. CSS-Tricks [online] [cit ]. Dostupné z: 69 GILLENWATER, Zoe Mickley. Stunning CSS3: a project-based guide to the latest in CSS. Berkeley, CA: New Riders, c2011, s Voices that matter. ISBN

53 Právě ty se dají dobře použít místo šipek a takové řešení má několik výhod. Tou první je snížení objemu přenášených dat klient nemusí ze serveru stahovat nic kromě HTML dokumentu a CSS souboru (které by musel stáhnout v každém případě). K úspoře dojde i v samotném HTML kódu, místo delšího tagu s obrázkem postačí tag <span> s nastavením třídy. Důležitý je také fakt, že takovou šipku bude možné mnohem snadněji editovat, například jí v CSS souboru nastavit jinou barvu či velikost, nejsou nutné úpravy žádného obrázku. Samotný princip vytvoření trojúhelníku jako šipky využívá způsobu skládání různobarevných rámečků. Jak je vidět z prvního obrázku níže, pokud je objektu v CSS nastaven rámeček s různými barvami, je jejich rozhraní vykresleno pod úhlem 45. Jestliže je šířka a výška objektu nulová, pak je vykreslen jen rámeček, který se vlastně skládá pouze z rohů - jejich strany se navzájem přímo dotýkají. To ukazuje druhý obrázek níže. Jeho stylopis by vypadal následovně:.triangles {width:0;height:0;border-style:solid;border-width: 20px; border-color: red green blue orange;} Obrázek 33 - ukázka použití rámečku jako šipky. Zdroj: [STUNNING CSS] Nyní už k získání šipky stačí pouze skrýt tři zbývající strany rámečku. Toho je možné docílit nastavením jejich barvy na hodnotu transparent. V rezervačním systému je pak použit následující zápis:.arrowup {display: inline-block; width: 0; height: 0; borderwidth: 0px 5px 10px 5px; border-style: solid; border-color: transparent transparent #FF6600 transparent;}.arrowdown {display: inline-block; width: 0; height: 0; border-width: 10px 5px 0px 5px; border-style: solid; border-color: #FF6600 transparent transparent transparent;}.arrowup:hover {border-color: transparent transparent #fff transparent;}.arrowdown:hover {border-color: #fff transparent transparent transparent;} 53

54 Jedná se o definice dvojice šipek (nahoru a dolu) a dále jejich obarvení na bílo při najetí myši. Oproti původnímu kódu přibyla ještě vlastnost display: inline-block, která elementu dovoluje nastavovat blokové vlastnosti, aniž by za ním byl zalomen řádek, a pozměněny byly šířky rámečků, aby trojúhelník působil více jako šipka. Srovnání HTML kódů a vzhledu před úpravou a po ní vypadá takto: <a href='...'><img src='soubory/img/sipka_nahoru.gif' width='13' height='12' border='0'></a> <a href='...'><span class='arrowup'></span></a> Obrázek 34 - srovnání vzhledu řadicích šipek: obrázek vs. CSS technika. Zdroj: autor V tabulkových výpisech je dále častým jevem zarovnávání obsahu buňky na střed. V původním stavu systému tomu tak bylo nejčastěji pomocí HTML atributu align= center. Tento atribut by však již neměl být používán 70, od řízení vzhledu webu je zde CSS. Proto bylo snahou zaměnit tento zápis za class= center a této třídě pak jednoduše v CSS souboru přiřadit požadovanou vlastnost:.center {textalign:center}. Efekt je stejný a výsledkem je modernější HTML kód, ve kterém vzhled zajišťuje CSS. Poslední výraznější úprava ve stránkách s tabulkovými výpisy se týká rozbalování podrobností u témat prací. V původní verzi systému bylo toto řešeno trochu nelogicky. Jednak se podrobnosti zobrazovaly v dalším sloupci, který zabral v tabulce mnoho místa, a za druhé byl odkaz pro rozbalení podrobností umístěn v každém řádku. To bylo zbytečné, jelikož kliknutí na něj stejně rozbalilo podrobnosti u všech témat najednou, nikoli u toho jednoho konkrétního. Při redesignu jsem tedy odkaz pro zobrazení podrobností (<a href='#' class='show_hide'>zobrazit/skrýt podrobnosti u témat prací</a>) umístil pouze nad celou tabulku témat. Výsledkem je tak opět úspora kódu, jelikož tento jeho úsek se již neopakuje na každém řádku tabulky. Samotný prostor pro text 70 COYIER, Chris. List of Deprecated Attributes Still in Widespread Use. CSS-Tricks [online] [cit ]. Dostupné z: 54

55 podrobného popisu byl přesunut do buňky s názvem tématu, konkrétně pod něj, díky čemuž je celá tabulka přehlednější. Obrázek 35 - zobrazení podrobností u témat prací v původním vzhledu systému. Zdroj: autor Obrázek 36 - zobrazení podrobností u témat prací v novém vzhledu systému. Zdroj: autor Ostatní podstránky Stránky systému, které neobsahují tabulkové výpisy, k sobě svým vzhledem mají také blízko. Prakticky vždy se jedná o boxy, ve kterých je buď nějaký text, seznam položek, či formulář. Příkladem může být formulář k registraci uživatelů nebo stránka s dokumenty ke stažení. Zde je většinou použita pouze již zmíněná třída.content, která obsah zvýrazňuje. 55

56 Obrázek 37 - příklad stránky bez tabulkového výpisu, s oddílem.content. Zdroj: autor Uvnitř tohoto oddílu.content je často použit styl formulářových polí, který jsem již popsal v úvodu praktické části. Patrně jediným efektem, kterému jsem se ještě nevěnoval, je animace seznamu položek, například na stránce Ke stažení. Jedná se vlastně o CSS3 přechod (vlastnost transition) v kombinaci s vlastností transform. Ta umožňuje 2D transformaci objektů. Její hodnotou může být jedna nebo více transformačních funkcí (např. rotace, posun, zvětšení či zmenšení a další). Zápis transform: translatex(15px); tedy způsobí posunutí prvku o patnáct pixelů po vodorovné ose (doprava). Ve vývoji je momentálně CSS3 specifikace také pro 3D transformace 71, které by měly přinést mnoho nových možností. Jejich podpora v prohlížečích je však zatím výrazně slabší než u jiných CSS3 modulů 72. Alternativně by v tomto konkrétním případě bylo možné použít také zvýšení levého okraje (a tím odsunutí prvku), CSS3 vlastnost transform zde byla zvolena z demonstračních důvodů. 71 CSS 3D Transforms Module Level 3. W3C. World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: 72 When can I use...: Support tables for HTML5, CSS3, etc [online] [cit ]. Dostupné z: 56

57 #content ul li {transition: transform 0.2s ease-in-out;} #content ul li:hover {transform: translatex(15px);} Výše uvedený kód aplikuje efekt plynulého posunu při najetí myší na všechny položky seznamů v hlavní obsahové části (#content). Vždy je však třeba mít na paměti zachování úplné použitelnosti webu a ovladatelnosti jeho prvků, odkazů především. V tomto případě je tedy třeba vnímat tento efekt pouze jako ukázku možností CSS3. Obrázek 38 - použití vlastnosti transform na položku seznamu vpravo po najetí myší. Zdroj: autor Patička stránek Jak už jsem zmínil v úvodu praktické části, vývoj webdesignu ukázal, že tabulky se pro layout webu nehodí. To platí i pro patičku, která byla v původní verzi systému řešena jako tabulka o jednom řádku a jedné buňce: <table width="100%" height="120" class="spodek"> <tr> <td class="u">vyšší odborná škola informačních služeb 2011</td> </tr> </table> Použití tabulky je zde naprosto zbytečné, místo ní postačí následující jednoduchý oddíl, který je následně nastylován pomocí CSS. HTML: <div id="footer">vyšší odborná škola informačních služeb </div> CSS: #footer {padding: 0px; background: url('bg-footer.png') repeat-x; width: 100%; margin: 0px auto; height: 48px; text-align:center; line-height: 48px; font-size: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px 20px rgba(255,255,255,0.25), inset 0-5px 30px rgba(0,0,0,0.3), 0px -15px 20px -8px rgba(0,0,0,0.3); } 57

58 Nejdelší částí kódu je složený stín, který je na celém webu použit již několikrát a dodává patičce plastický efekt. Dále CSS zajišťuje to, co bylo původně zapsáno přímo v HTML šířku, výšku a vystředění, a to i horizontální, pomocí techniky line-height (nastavení výšky řádku a výšky prvku na stejnou hodnotu způsobí zarovnání textu na horizontální střed prvku). Obrázek 39 - náhled patičky redesignovaného systému. Zdroj: autor 58

59 2.4 Shrnutí V praktické části práce je popsán uskutečněný redesign rezervačního systému bakalářských a absolventských prací s využitím jazyka CSS3. Jednotlivé prvky vzhledu jsou detailně rozebrány a doplněny ukázkami kódů a výslednými screenshoty. Redesignem došlo nejen ke změně vzhledu systému, ale i k úsporám v jeho zdrojových kódech, a tudíž i datových přenosech. Nejvíce patrné je to na příkladu hlavičky, která byla několikanásobně zmenšena zjednodušením jejího zdrojového kódu. Tím došlo k úspoře prakticky ve všech jednotlivých souborech systému, jelikož hlavička byla a je jejich součástí. Následující grafy porovnávají původní verzi s verzí po redesignu. Obě byly nainstalovány na stejném serveru a připojeny ke stejné databázi. Testována byla úvodní uvítací stránka systému (index.php), na níž byly zobrazeny dvě krátké aktuality. Jako prohlížeč byl použit Maxthon 3 (jádro WebKit) a vestavěné Vývojářské nástroje. Jak je vidět níže, výrazně kleslo množství požadavků na server (tzv. requests). Jedná se vlastně o počet souborů, které jsou třeba k zobrazení stránky v tomto případě konkrétně o jeden HTML soubor a dále kaskádové styly, skripty a obrázky. Snížení bylo dosaženo především odstraněním nepotřebných obrázkových souborů z hlavičky. V důsledku toho klesl i celkový objem přenesených dat při jednom načtení stránky. Počet požadavků na server 25 (Requests) Objem přenesených dat v Kb 286,13 263,29 10 Původně Po redesignu Původně Po redesignu Graf 2 - počet požadavků na server. Zdroj: autor Graf 3 - objem přenesených dat v Kb. Zdroj: autor Další dva grafy ukazují částečně rozklad celkového objemu přenesených dat. Dokazují, že klesla jak velikost samotného HTML souboru, tak i obrázků (pozadí 59

60 stránky, hlavičky, patičky apod.). Naopak k poměrně výraznému zvětšení došlo u souboru s kaskádovými styly. Velikost výsledného HTML v Kb 9,74 Velikost grafických prvků v Kb 210,73 174,89 4,08 Původně Po redesignu Původně Po redesignu Graf 4 - velikost výsledného HTML v kb.zdroj: autor Graf 5 - velikost načítaných grafických prvků v Kb. Zdroj: autor Poslední graf srovnává doby načítání stránek. Doba načtení DOM je čas, za který je načten tzv. Document Object Model (DOM), zjednodušeně řečeno se jedná o HTML a skripty. Doba načtení celkem obsahuje navíc ještě grafické soubory. Poznámka: tento druh měření může být vždy ovlivněn vnějšími faktory, jako jsou běžná a momentální rychlost a vytíženost internetového připojení, práce ostatních programů apod. Doba načtení stránky v sekundách 2,68 1,53 1,44 Původně 0,6 Po redesignu Doba načtení DOM Doba načtení celkem Graf 6 - doba načtení úvodní stránky v sekundách. Zdroj: autor Veškerá práce probíhala na kopii rezervačního systému nainstalované na linuxovém serveru u firmy Hosting zdarma s.r.o. Zde jsem se bohužel setkal se závažnými technickými problémy, jelikož původní verze systému patrně běžela pod Windows. 60

61 Zatímco databáze MySQL běžící pod Windows nerozlišuje velká a malá písmena v názvech tabulek (je case-insensitive), je-li nainstalována pod Linuxem, tak je rozlišuje (case-sensitive). V souborech systému byly tak často použity SQL dotazy, které původně pod Windows fungovaly, v nové instalaci pod Linuxem však nikoli. Tento problém se sice dá ošetřit v nastavení MySQL (pomocí nastavení lower_case_table_names=0 v souboru my.ini), to však většina webhostingů neumožňuje. Za možné řešení tohoto problému jsem považoval použití lokální instalace PHP a MySQL ve Windows, konkrétně programu XAMPP. Ani v něm se mi však nepodařilo systém bezchybně zprovoznit. Z těchto důvodů jsem byl nucen přistoupit k postupnému hledání rozdílů ve velikosti písmen v SQL dotazech a v databázových tabulkách. Hromadné nahrazení v souborech nepřipadalo v úvahu, jelikož názvy některých tabulek (například Student či Konzultace) jsou obecné a běžně se vyskytují nejen v SQL dotazech, ale i v textu. Jelikož systém obsahuje velké množství souborů (přes 120), nebylo v mých silách je projít a upravit všechny. Proto jsem se zaměřil na ty, které hrají roli ve vzhledu systému. Výsledkem je fakt, že redesignovaná verze dostupná online z není zcela funkční a může vykazovat chyby způsobené špatnou komunikací mezi PHP a MySQL. Na zmíněné adrese je však k dispozici její kopie v komprimovaném archivu, která by po instalaci na server s Windows měla fungovat stejně, jako původní verze systému. V souvislosti s tím bych rád zdůraznil, že předmětem práce nebyly žádné funkční (programové) úpravy systému. Ty, ke kterým došlo, byly nevyhnutelné a nutné k tomu, abych mohl samotný redesign s užitím CSS3 vůbec provést a následně jej popsat v praktické části práce. 61

62 2.5 Vlastní přínos práce Specifikace jazyka CSS3 je rozdělena do několika modulů, z nichž se každý zabývá jiným tématem. Tyto moduly se navíc nacházejí v různém stadiu vývoje. Z těchto důvodů může situace kolem CSS3 působit poněkud nepřehledně. Cílem této práce je přinést informace především o takových funkcích, které se již nyní dají využít v praxi. V teoretické části je představena syntaxe stěžejních vlastností a hodnot jazyka CSS3, jeho obecné možnosti použití a v neposlední řadě aktuální podpora v internetových prohlížečích. Nastíněny jsou také základní způsoby simulace efektů CSS3 v prohlížečích, které tento jazyk nepodporují (se zaměřením především na starší verze Internet Exploreru). V rámci popisu postupu redesignu rezervačního systému je v praktické části popsáno co největší množství příkladů reálného použití představených funkcí. Uvedeny jsou konkrétní úseky zdrojových kódů, které funkčnost zajišťují, a také screenshoty, jež ji ilustrují. Druhá část práce je tedy zpracována demonstrační formou blízkou například případové studii. Jednotlivé kroky redesignu jsou většinou odůvodňovány, aby byl patrný jejich praktický význam. Výjimkou jsou některé grafické efekty, které by v systému patrně nemusely být a jsou přítomny pouze jako ukázka možností teoreticky popsaných v první části práce (například CSS3 animace). Samotná nová podoba systému může být v případě zájmu ze strany školy využita a může nahradit stávající vzhled rezervačního webu. I proto byl kladen velký důraz na zpětnou kompatibilitu ve starších prohlížečích, k jejímuž zajištění byly využity techniky a nástroje popsané v úvodu práce. 62

63 Závěr V teoretické části práce jsem představil některé zásadní novinky, které přináší nová verze jazyka pro návrh vzhledu webových stránek CSS3. Věnoval jsem se jejich funkčnosti, syntaxi, krátkým ukázkám a také podpoře v prohlížečích. Tu jsem popsal nejprve obecně a poté i konkrétně u jednotlivých modulů a vlastností. K tomuto rozboru jsem přidal kapitolu, která se zabývá možnostmi emulace CSS3 ve starších prohlížečích. Přiložil jsem také graf četnosti používání jednotlivých druhů prohlížečů a jejich verzí. Díky tomu jsem dokázal, že u mnoha CSS3 vlastností existuje již v aktuálně používaných prohlížečích velmi dobrá podpora, a je proto možné, je bez problémů využívat. V praktické části práce jsem na redesignu rezervačního systému bakalářských a absolventských prací demonstroval použití popsaných CSS3 vlastností. Zároveň jsem však kladl maximální důraz na kompatibilitu ve starších prohlížečích a tím potvrdil, že CSS3 má již dnes praktické využití. Efekty, které bylo dříve nutné složitě připravovat již v grafických návrzích a následně je do webů vkládat pomocí obrázků (například stíny či zaoblené rohy), je dnes možné řešit mnohem rychleji a flexibilněji v CSS3. Prohlížeče, které tyto novinky nepodporují, je jednoduše ignorují a použijí starší řešení. Právě tento typ technik jsem při redesignu použil v co největší míře, abych ukázal reálné možnosti, které CSS3 přináší. Je však třeba zdůraznit, že se jedná o demonstraci, tudíž nelze tvrdit, že všechny zde předvedené prvky se hodí pro každé použití. Samotná aplikace různých grafických efektů a jejich množství je vždy otázkou subjektivního vjemu a vkusu. Jakýkoli web by totiž měl v první řadě splňovat funkční požadavky. Příkladem může být Google, který od svého založení vypadá téměř totožně jednoduše, až stroze. Přesto je nejpopulárnější stránkou na světě - je totiž funkční. Moderní design by měl zaujmout, neměl by však zastínit obsah či smysl celé stránky. Na úplný závěr je třeba zmínit, že CSS3 se věnuje mnoha dalším oblastem, které v této práci nejsou popsány. Jednou z nejrozsáhlejších je CSS3 layout. Jedná se o širokou sadu vlastností, jejichž posláním je nahradit léta používané HTML konstrukce pro rozvržení webových stránek. V praxi ještě sice nemají své využití, to se však zcela jistě brzy změní s rozmachem HTML 5. Ostatně, ačkoli se CSS3 zatím ve větší míře nepoužívá, mluví se již o CSS4. Vývoj v oblasti webových technologií je stejně rychlý jako v jiných oborech informatiky. 63

64 Seznam použité literatury CEDERHOLM, Dan. CSS3 for web designers: a project-based guide to the latest in CSS. New York: A book apart, c2010, 125 s. Book apart, no. 2. ISBN GASSTON, Peter. The book of CSS3: a developer's guide to the future of web design. 1st ed. San Francisco: No Starch Press, c2011, 278 s. ISBN GILLENWATER, Zoe Mickley. Stunning CSS3: a project-based guide to the latest in CSS. Berkeley, CA: New Riders, c2011, 301 s. Voices that matter. ISBN GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 & CSS3 For The Real World. Collingwood, Australia: SitePoint, ISBN SIKOS, Leslie F. Web Standards Mastering Html5, Css3, and Xml. Apress, ISBN Comparison of layout engines (Cascading Style Sheets). In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, [cit ]. Dostupné z: CSS 3: Jak na stylování pozadí elementů?. In: Interval.cz [online] [cit ]. Dostupné z: CSS Selectors and Pseudo Selectors and browser support. Kimblim.dk: the big blog of nothingness [online] [cit ]. Dostupné z: STANÍČEK, Petr. CSS versus tabulkový layout. In: Pixylophone [online] [cit ]. Dostupné z: CSS3 Module Status. CSS3. Info: All you ever needed to know about CSS3 [online] [cit ]. Dostupné z: CSS3 PIE: CSS3 decorations for IE [online] [cit ]. Dostupné z: 64

65 CSS3 Solutions for Internet Explorer. LAZARIS, Louis. Smashing Magazine [online] [cit ]. Dostupné z: CSS3: background-origin and background-clip. CSS3. Info: All you ever needed to know about CSS3 [online] [cit ]. Dostupné z: Globální statistika. TOPlist [online] [cit ]. Dostupné z: How to create slick effects with CSS3 box-shadow. RedTeamDesign [online] [cit ]. Dostupné z: HSL and HSV. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, [cit ]. Dostupné z: Selectivizr: CSS3 pseudo-class and attribute selectors for IE 6-8 [online] [cit ]. Dostupné z: COYIER, Chris. The Difference Between :nth-child and :nth-of-type. CSS-Tricks [online] [cit ]. Dostupné z: BEVERLOO, Peter. Vendor-prefixed CSS Property Overview. Peter Beverloo [online] [cit ]. Dostupné z: Websites Shouldn't Look The Same Across Different Browsers Here Is Why. Noupe: The Curious Side of Smashing Magazine [online] [cit ]. Dostupné z: When can I use...: Support tables for HTML5, CSS3, etc [online] [cit ]. Dostupné z: World Wide Web Consortium (W3C) [online] [cit ]. Dostupné z: BALVÍNOVÁ, Alena. WYSIWYG. In: KTD: Česká terminologická databáze knihovnictví a informační vědy (TDKIV) [online]. Praha: Národní knihovna ČR, [cit ]. Dostupné z: 65

66 Seznam obrázků Obrázek 1 - srovnání hodnot repeat, round a space vlastnosti background-repeat. Zdroj: autor...19 Obrázek 2 - srovnání hodnot auto, contain a cover vlastnosti background-size. Zdroj: autor...19 Obrázek 3 - ukázka tříbarevného přechodu pomocí linear-gradient. Zdroj: autor...21 Obrázek 4 - ukázka tříbarevného přechodu pomocí repeating-linear-gradient. Zdroj: autor...21 Obrázek 5 - ukázka tříbarevného přechodu pomocí radial-gradient. Zdroj: autor...22 Obrázek 6 - ukázka tříbarevného přechodu pomocí repeating-radial-gradient. Zdroj: autor...22 Obrázek 7 - použití vlastnosti border-radius v různých variantách. Zdroj: autor...23 Obrázek 8 - příklady použití vlastnosti box-shadow. Zdroj: autor...24 Obrázek 9 - ukázka použití text-shadow. Zdroj: autor...24 Obrázek 10 - zdrojový obrázek (border.png) s průhledným pozadím. Zdroj: autor...25 Obrázek 11 - ukázky použití vlastností border-image. Zdroj: autor...25 Obrázek 12 - nástin animace pomoci CSS3 transitions. Zdroj: autor...26 Obrázek 13 - náhled původní domovské stránky rezervačního systému. Zdroj: autor...30 Obrázek 14 - porovnání výšky hlaviček před a po redesignu. Zdroj: autor...34 Obrázek 15 - ukázka stínu vloženého pomocí body:before. Zdroj: autor...36 Obrázek 16 - nadpis s použitím efektů CSS3. Zdroj: autor...37 Obrázek 17 - náhled pozadí hlavní části podstránky. Zdroj: autor...38 Obrázek 18 - ukázka formulářových prvků nastylovaných s využitím CSS3. V prvním řádku výchozí zobrazení, ve druhém při aktivaci myší (:hover). Zdroj: autor...39 Obrázek 19 - původní zdrojový kód hlavičky část. Zdroj: autor...40 Obrázek 20 - nový zdrojový kód hlavičky. Zdroj: autor...41 Obrázek 21 - ukázka náklonu a poloprůhlodnosti loga v průběhu animace. Zdroj: autor Obrázek 22 - náhled hlavičky v základním stavu. Zdroj: autor...46 Obrázek 23 - náhled hlavičky s vysunutou položkou menu č. 3. Zdroj: autor...47 Obrázek 24 - náhled hlavičky s vysunutou položkou menu č. 4. Zdroj: autor...47 Obrázek 25 - ukázka boxu.content s obsahem. Zdroj: autor...48 Obrázek 26 - screenshot nastylovaných aktualit. Zdroj: autor...48 Obrázek 27 - náhled úvodní strany rezervačního systému. Zdroj: autor...49 Obrázek 28 - příklad tabulkového výpisu témat v rezervačním systému. Zdroj: autor...49 Obrázek 29 - ukázka záhlaví tabulkových výpisů v rezervačním systému. Zdroj: autor...50 Obrázek 30 - podbarvení sudých a lichých řádků: Chrome (RGBa) vs. IE7 (RGB). Zdroj: autor...51 Obrázek 31 - náhled aktuálně myší označeného řádku. Zdroj: autor...51 Obrázek 32 - náhled sloupců stylovaných selektorem :nth-of-type. Zdroj: autor...52 Obrázek 33 - ukázka použití rámečku jako šipky. Zdroj: [STUNNING CSS]...53 Obrázek 34 - srovnání vzhledu řadicích šipek: obrázek vs. CSS technika. Zdroj: autor...54 Obrázek 35 - zobrazení podrobností u témat prací v původním vzhledu systému. Zdroj: autor...55 Obrázek 36 - zobrazení podrobností u témat prací v novém vzhledu systému. Zdroj: autor...55 Obrázek 37 - příklad stránky bez tabulkového výpisu, s oddílem.content. Zdroj: autor...56 Obrázek 38 - použití vlastnosti transform na položku seznamu vpravo po najetí myší. Zdroj: autor 57 Obrázek 39 - náhled patičky redesignovaného systému. Zdroj: autor

67 Seznam grafů Graf 1 - podíl prohlížečů na českém internetu za březen roku Zdroj: autor, data: Graf 2 - počet požadavků na server. Zdroj: autor...59 Graf 3 - objem přenesených dat v Kb. Zdroj: autor...59 Graf 4 - velikost výsledného HTML v kb.zdroj: autor...60 Graf 5 - velikost načítaných grafických prvků v Kb. Zdroj: autor...60 Graf 6 - doba načtení úvodní stránky v sekundách. Zdroj: autor

68 Seznam příloh I. Podpora CSS selektorů v prohlížečích II. Podpora CSS background vlastností v prohlížečích III. Přehled CSS vendor prefixů

69 Přílohy I. Podpora CSS selektorů v prohlížečích. CSS Selectors and Pseudo Selectors and browser support. Kimblim.dk: the big blog of nothingness [online] [cit ]. Dostupné z: 69

70 70

71 II. Podpora CSS background vlastností v prohlížečích. CSS Background Properties: possible values, default values, browser support and DOM. WEYL, Estelle. Standardista [online]. [cit ]. Dostupné z: 71

72 72

Přehled základních html tagů

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

Více

O CSS podrobněji. Box model Document flow Layout

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

Více

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

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

Více

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD CSS 1 Výhody: Udřování prezentace oddělené od dokumentu znamená, že můžete nastavit styly dokumentu pro různá média; Oddělení dokumentu od jeho prezentace znamená menší dokument, což dále znamená, že se

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

(X)HTML, CSS a jquery

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

Více

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

Š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

TVORBA WEBOVÝCH STRÁNEK

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

Více

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

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

Š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

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

12. Základy HTML a formuláře v HTML

12. Základy HTML a formuláře v HTML 12. Základy HTML a formuláře v HTML 1) Co je to HTML a historie HTML 2) Termíny v HTML a. tag b. značka c. element d. atribut e. entita 3) specifikace a. html, xhtmll b. rozdíly xhtml a html 4) struktura

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

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht. Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 4. Formátovací model, pozicování

Více

HTML Hypertext Markup Language

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

Více

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

Zobrazování bannerů podporují pouze nově vytvořené šablony motivů vzhledu.

Zobrazování bannerů podporují pouze nově vytvořené šablony motivů vzhledu. Bannerový systém ProEshop od verze 1.13 umožňuje zobrazování bannerů na popředí e-shopu. Bannerový systém je přístupný v administraci e-shopu v nabídce Vzhled, texty Bannerový systém v případě, že aktivní

Více

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

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

Více

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

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

Více

Tvorba internetových aplikací s využitím framework jquery

Tvorba internetových aplikací s využitím framework jquery Tvorba internetových aplikací s využitím framework jquery Autor Michal Oktábec Vedoucí práce PaedDr. Petr Pexa Školní rok: 2009-10 Abstrakt Tato práce se zabývá využití frameworku jquery pro vytváření

Více

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu

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ředmluva 17 Úvod 19 Co najdete v této knize Kapitola za kapitolou Přílohy a další zdroje Úvod do druhého vydání Zpětná vazba od čtenářů

Předmluva 17 Úvod 19 Co najdete v této knize Kapitola za kapitolou Přílohy a další zdroje Úvod do druhého vydání Zpětná vazba od čtenářů Předmluva 17 Úvod 19 Co najdete v této knize 19 Kapitola za kapitolou 20 Přílohy a další zdroje 21 Úvod do druhého vydání 21 Zpětná vazba od čtenářů 22 Zdrojové kódy ke knize 22 Errata 22 KAPITOLA 1 Úvod

Více

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

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

Více

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

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

Více

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

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

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek 1 HTML Hyper Text Markup Language = hypertextový značkovací jazyk Slouží pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy HTML soubor je obyčejný text obalený

Více

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne Obrázky Tag Význam Párový Výskyt img obrázek ne img video ne map klikací mapa ano area oblast v klikací mapě ne Img Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného

Více

Tvorba webových stránek

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

Více

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 HTML5 CSS3 HTML5 a CSS3: CASTRO, E. HTML5 a CSS3. Computer press, 2012 GOLDSTEIN, A., LAZARIS, L. a WEYL, E. HTML5 a CSS3 pro webové designéry. Brno: Zoner Press,

Více

Výukový materiál KA č.4 Spolupráce se ZŠ

Výukový materiál KA č.4 Spolupráce se ZŠ Výukový materiál KA č.4 Spolupráce se ZŠ Modul: Téma workshopu: Výpočetní technika Co je to internet? Jak si udělat vlastní www stránku? Vypracovala: Ing. Lenka Hellová Termín workshopu: 30. říjen 2012

Více

Rozšíření bakalářské práce

Rozšíření bakalářské práce Rozšíření bakalářské práce Vojtěch Vlkovský 2011 1 Obsah Seznam obrázků... 3 1 Barevné modely... 4 1.1 RGB barevný model... 4 1.2 Barevný model CMY(K)... 4 1.3 Další barevné modely... 4 1.3.1 Model CIE

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

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

Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití

Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Seznámení

Více

SEO OPTIMALIZACE PRO VYHLEDÁVAČE JEDNODUŠE

SEO OPTIMALIZACE PRO VYHLEDÁVAČE JEDNODUŠE Středoškolská technika 2011 Setkání a prezentace prací středoškolských studentů na ČVUT SEO OPTIMALIZACE PRO VYHLEDÁVAČE JEDNODUŠE Adama Kořenek Úvod Střední průmyslová škola elektrotechnická V Úžlabině

Více

TNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz

TNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz 6 24.3.2015 aneta.bartuskova@uhk.cz Layout 24.3.2015 aneta.bartuskova@uhk.cz Layout stránky = strukturní i vizuální rozvržení webové stránky Stránka je chápána jako skupina oblastí, každá oblast má svůj

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

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

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

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

HTML. ICT_01., 02. konzultace; 2. ročník 1/6 ICT_01., 02. konzultace; 2. ročník 1/6 HTML Vystavení vlastních dat na Internetu Každý uživatel Internetu, který chce svoje webové stránky publikovat na Internetu potřebuje: - místo na webovém serveru,

Více

Ukázka knihy z internetového knihkupectví www.kosmas.cz

Ukázka knihy z internetového knihkupectví www.kosmas.cz Ukázka knihy z internetového knihkupectví www.kosmas.cz U k á z k a k n i h y z i n t e r n e t o v é h o k n i h k u p e c t v í w w w. k o s m a s. c z, U I D : K O S 1 8 0 6 5 9 U k á z k a k n i h

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

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

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

Více

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

APLIKACE XML PRO INTERNET

APLIKACE XML PRO INTERNET APLIKACE XML PRO INTERNET Jaroslav Ráček Fakulta Informatiky, Masarykova Universita Brno Abstrakt Text je věnován možnostem využití XML technologie pro prezentaci dokumentů pomocí Internetu. V úvodu je

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

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

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

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

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

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

Více

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

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

Více

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

Minebot manuál (v 1.2)

Minebot manuál (v 1.2) Minebot manuál (v 1.2) Pro Váš rychlý start s nástrojem Minebot jsme připravili tohoto stručného průvodce, který by Vám měl být pomocníkem při spuštění a používání služby. Tento stručný průvodce by vám

Více

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1. Bloky Tu se popisuji blokové tagy, což jsou všechny, za kterými se zalamuje řádka. Jde o různé oddíly textu a odstavce. Opakem blokových tagů jsou řádkové (in-line) tagy na značkování textu. Tag Význam

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

Střední průmyslová škola Ostrov. Tvorba webových stránek. Petr Pistulka I2 2012-2013 CC - BY NC SA3.0. Klínovecká 1197 363 01 Ostrov

Střední průmyslová škola Ostrov. Tvorba webových stránek. Petr Pistulka I2 2012-2013 CC - BY NC SA3.0. Klínovecká 1197 363 01 Ostrov Střední průmyslová škola Ostrov Klínovecká 1197 363 01 Ostrov Tvorba webových stránek Petr Pistulka I2 2012-2013 CC - BY NC SA3.0 Prohlášení Prohlašuji, že jsem svou práci vypracoval samostatně, použil

Více

Rozměry, okraje a rámečky

Rozměry, okraje a rámečky Rozměry, okraje a rámečky 185 Jaké jednotky délky lze v CSS použít Jednotky délky slouží k zapisování vzdálenosti a definují se jimi jak rozměry elementů, tak rozměry okrajů či rámečků. Zapisují se hned

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

KIV/PIA 2012 Ing. Jan Tichava

KIV/PIA 2012 Ing. Jan Tichava KIV/PIA 2012 Ing. Jan Tichava Opera Mini Zobrazených stránek za měsíc 90 G 80 G 70 G 60 G 50 G 40 G 30 G 20 G 10 G 0 G January 2011 May 2011 September 2011 January 2012 May 2012 September 2012 State of

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

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

CZ.1.07/1.5.00/34.0527

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

Více

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

Tabulkový procesor. Orientace textu. O úroveň níž O úroveň výš

Tabulkový procesor. Orientace textu. O úroveň níž O úroveň výš Formátování Formátováním rozumíme změnu vlastností daného objektu, dle našich představ a možností programu MS Excel. Formátovat můžeme texty v buňkách, můžeme formátovat buňky, listy i celý sešit a měnit

Více

Dokumentace k projektu

Dokumentace k projektu Mendelova univerzita v Brně Provozně ekonomická fakulta Dokumentace k projektu Kvetoucí kaktusy Chalupová Lenka LS 2012 Webový Design Obsah 1. Úvod a cíl práce... 3 2. Informační architektura... 3 2.1.

Více

Struktura seminární práce

Struktura seminární práce Struktura seminární práce Úvodní strana Velikost písma zde užíváte podle vlastního uvážení. Důležité je, aby největší byl nadpis pro práci, druhý největší byl název školy a menší písmo je dobré použít

Více

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

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

Více

Zdroj: http://www.root.cz/clanky/pravda-a-myty-o-gifu/

Zdroj: http://www.root.cz/clanky/pravda-a-myty-o-gifu/ Zdroj: http://www.root.cz/clanky/pravda-a-myty-o-gifu/ Bitmapový formát (rastrový obrázek) Většina z používaných grafických formátů (JPEG, PNG, TGA, BMP) obsahuje popis rastrového obrázku jako celku ukládají

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

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

Počítačová grafika SZŠ A VOŠZ MERHAUTOVA 15, BRNO

Počítačová grafika SZŠ A VOŠZ MERHAUTOVA 15, BRNO Počítačová grafika SZŠ A VOŠZ MERHAUTOVA 15, BRNO 1 Základní dělení 3D grafika 2D grafika vektorová rastrová grafika 2/29 Vektorová grafika Jednotlivé objekty jsou tvořeny křivkami Využití: tvorba diagramů,

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

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

Zá klady HTML. Tag HTML Párová značka, který definuje webovou stránku. Obsah stránky končí značkou

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou Zá klady HTML Jazyk HTML (Hypertext Markup Language) - jedná se o souhrn pravidel pro formatování textu, obrázků atd. pro použítí na webových stránekách. Webovou stránku tvoří prvky, které jsou definovány

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

Název: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy

Název: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy Název: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Uvádí

Více

19.5.2010 16:16. Datum: 14.5.2010 Zpracoval: Ing. Richard Ruibar

19.5.2010 16:16. Datum: 14.5.2010 Zpracoval: Ing. Richard Ruibar Datum: 14.5.2010 Zpracoval: Ing. Richard Ruibar Kvalita Vzhled v různých prohlížečích Podrobná kontrola vzhledu a funkčnosti v prohlížečích s podílem nad 1% Podrobná kontrola vzhledu a funkčnosti ve vybraných

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

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

Práce na počítači. Bc. Veronika Tomsová

Práce na počítači. Bc. Veronika Tomsová Práce na počítači Bc. Veronika Tomsová Barvy Barvy v počítačové grafice I. nejčastější reprezentace barev: 1-bitová informace rozlišující černou a bílou barvu 0... bílá, 1... černá 8-bitové číslo určující

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

Richtext editory. Filip Dvořák

Richtext editory. Filip Dvořák Richtext editory Filip Dvořák Průběh referátu Popis problému Přehled přístupů k řešení Od jednoduššího ke složitějšímu Zajímavé implementace FCKEditor Výhody, integrace, aktualizace, bezpečnost Zdroje

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

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

Další nutný soubor je laydiv.js, ve kterém jsou uloženy funkce pro zobrazování virů na ploše a funkce pro odkaz na Teachers Guide.

Další nutný soubor je laydiv.js, ve kterém jsou uloženy funkce pro zobrazování virů na ploše a funkce pro odkaz na Teachers Guide. ESCAPE OF VIRUSES Hra Escape of viruses je psána pomocí příkazů Javascriptu a standardních příkazů HTML. Hra se spouští tlačítkem Start game. Úkolem hráče je eliminovat viry na hrací ploše kliknutím kurzoru

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

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

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

Více

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s

Více

OBECNÉ POKYNY. Nedodržováním těchto pravidel je porušována integrita značky a všechny tyto věci mají negativní vliv na firemní image.

OBECNÉ POKYNY. Nedodržováním těchto pravidel je porušována integrita značky a všechny tyto věci mají negativní vliv na firemní image. STYLE GUIDE OBECNÉ POKYNY STYLE GUIDE přesně definuje závazné normy pro všechny druhy a formy vizuální komunikace společnosti a je důležitou součástí publikace NAVITEL BRAND BOOK (hlavní publikace jednotného

Více

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

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

Více

Nová struktura souborů a složek

Nová struktura souborů a složek Tvorba podstránek Vytvoření podstránek Asi si kladete otázku, jakým způsobem docílíme toho, aby se všechny podstránky na našem webu zobrazovaly v námi vytvořeném layoutu. Máme 4 možnosti jak vytvářet podstránky

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

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

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

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

45 Plánovací kalendář

45 Plánovací kalendář 45 Plánovací kalendář Modul Správa majetku slouží ke tvorbě obecných ročních plánů činností organizace. V rámci plánu je třeba definovat oblasti činností, tj. oblasti, ve kterých je možné plánovat. Každá

Více