Začínáme s vývojem her a DOM
|
|
|
- Miroslav Macháček
- před 8 lety
- Počet zobrazení:
Transkript
1 KAPITOLA 2 Začínáme s vývojem her a DOM V předchozí kapitole jsme získali představu o tom, co nás v této knize čeká a co se dozvíme. Počínaje touto kapitolou zahájíme naše seznamování s problematikou na praktických příkladech. Ještě než se dostaneme k pokročilým tématům, jako jsou animace CSS3 nebo plátno HTML5, podíváme se na vývoj tradičních her využívajících DOM. Kapitolu zahájíme krátkým seznámením s nezbytnými základy. V této kapitole: Připravíme si nástroje potřebné pro vývoj her. Vytvoříme první hru Ping Pong. Seznámíme se se základy pozicování pomocí knihovny jquery. Dozvíme se, jak načítat vstup z klávesnice. Vytvoříme hru Ping Pong, včetně zobrazení skóre hráčů. Na následujícím obrázku můžete vidět hru, kterou v této kapitole vytvoříme. Jedná se o hru Ping Pong pro dva hráče, ovládanou oběma hráči prostřednictvím jedné klávesnice. Pojďme si tedy zahrát Ping Pong.
2 Kapitola 2 Začínáme s vývojem her a DOM Příprava vývojového prostředí Prostředí, které je zapotřebí pro vývoj her v HTML5, se příliš neliší od toho, které je třeba pro vývoj webových stránek. Budeme potřebovat moderní webový prohlížeč a dobrý textový editor. O tom, který textový editor je nejlepší, se již od nepaměti vedou vášnivé debaty. Každý textový editor má své silné stránky, a proto si vyberte ten, který vám vyhovuje nejlépe. Co se prohlížeče týká, budeme potřebovat prohlížeč podporující nejnovější specifikaci HTML5 a CSS3 a nabízející nástroje pro ladění kódu. Na Internetu najdete hned několik vyhovujících moderních webových prohlížečů. Jedná se o prohlížeče Apple Safari ( Google Chrome ( Mozilla Firefox ( a Opera ( opera.com). Uvedené prohlížeče podporují většinu funkcí, o kterých bude v průběhu této knihy řeč. K prezentaci většiny příkladů v této knize poslouží prohlížeč Google Chrome, protože je velmi rychlý při práci s přechody CSS3 a plátnem HTML5. Příprava dokumentů HTML pro hru Každý web, webová stránka a hra v HTML5 začíná u výchozího dokumentu HTML. Tento dokument obsahuje základní kód HTML. Vývoj naší první hry v HTML5 začneme právě u takového dokumentu, s názvem index.html. Jak na to instalace knihovny jquery Hru Ping Pong vytvoříme zcela od základů. To však neznamená, že bychom museli vše programovat sami. Pomůže nám knihovna v JavaScriptu s názvem jquery, se kterou se budeme setkávat napříč celou touto knihou. Díky ní se značně zjednoduší náš kód v JavaScriptu: 1. Vytvořte novou složku s názvem pingpong. 2. Vytvořte ve složce pingpong novou podsložku s názvem js. 3. Nyní si stáhneme knihovnu jquery. Zamiřte na adresu 4. Zatrhněte pole Production a klepněte na tlačítko Download jquery. 5. Uložte soubor (aktuálně jquery-1.6.min.js) do složky js vytvořené v kroku Vytvořte nový dokument HTML s názvem index.html a uložte ho do adresáře pingpong. 7. Otevřete soubor index.html v textovém editoru a vložte do něj základní kostru dokumentu HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> 38
3 Příprava dokumentů HTML pro hru <title>ping Pong</title> </head> <body> <header> <h1>ping Pong</h1> </header> <footer> Příklad ukazující vytvoření hry Ping Pong. </footer> </body> </html> 8. Připojte k dokumentu knihovnu jquery přidáním následujícího řádku kódu na konec elementu body: <script src="js/jquery-1.6.min.js"></script> 9. Zbývá ověřit úspěšné načtení knihovny jquery. Za tímto účelem vložte následující kód na konec elementu body, za kód načítající knihovnu jquery: <script> $(function(){ alert("vítejte ve hře Ping Pong."); ); </script> 10. Uložte soubor index.html a otevřete jej ve webovém prohlížeči. Vysvětlení Právě jsme vytvořili jednoduchý dokument HTML5, připojili k němu knihovnu jquery a ověřili, že se korektně načetla. Doctype pro HTML5 Elementy DOCTYPE a meta se v HTML5 dočkaly zjednodušení. Takto vypadá deklarace DOCTYPE v HTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 39
4 Kapitola 2 Začínáme s vývojem her a DOM Poměrně složité, co říkáte? Naproti tomu deklarace DOCTYPE v HTML5 nemůže být jednodušší: <!DOCTYPE html> Deklarace dokonce neuvádí ani verzi HTML. To znamená, že HTML5 podporuje všechny předchozí verze jazyka HTML a budoucí verze jazyka HTML budou zase podporovat obsah v jazyce HTML5. Zjednodušení se týká také elementu meta. Deklarace znakové sady dokumentu HTML je nyní snazší: <meta charset=utf-8> Záhlaví a zápatí Jazyk HTML5 přichází s řadou nových funkcí a vylepšení. Jedním z nich jsou i změny v oblasti sémantiky. HTML5 zavádí nové elementy, které sémantiku posilují. Dva z nich jsme už použili header a footer. Element header uvozuje sekci nebo celou stránku. Z toho důvodu jsme vložili element h1 právě sem. Element footer, jak už jeho název napovídá, obsahuje zápatí sekce, resp. celé stránky. UPOZORNĚNÍ Sémantikou HTML se rozumí, že kód samotný poskytuje srozumitelné informace o obsahu namísto toho, aby jen definoval jeho vzhled. Kam umístit kód v JavaScriptu Kód v JavaScriptu jsme umístili těsně před koncovou značku elementu body, za veškerý obsah stránky. Umístění sem namísto do elementu head má svůj důvod. Za normálních okolností webové prohlížeče načítají a vykreslují obsah stránky ve směru shora dolů. Pokud se v elementu head dokumentu nachází nějaký kód v JavaScriptu, načte se obsah dokumentu až po provedení tohoto kódu. Vykreslování a načítání se pozastaví, narazí-li prohlížeč na kód v JavaScriptu uprostřed stránky. To je důvod, proč vkládat kód v JavaScriptu až na konec stránky, pokud to situace dovoluje. Stránka tak uživatelům nabídne rychlejší odezvu. V době vzniku této knihy byla aktuální verze jquery Proto se předchozí ukázka kódu odkazuje na soubor jquery-1.6.min.js. V době, kdy tyto řádky budete číst, bude pravděpodobně aktuální jiná verze s odlišným označením, její použití by však mělo byt totožné, leda by došlo k nějaké zásadní změně v jquery, která by nebyla zpětně kompatibilní. 40
5 Vytvoření elementů pro hru Ping Pong Provedení kódu po načtení stránky Potřebujeme nějak zajistit, aby se náš kód v JavaScriptu provedl až poté, co bude stránka načtená. V opačném případě by se mohly vyskytnout chyby při pokusu o přístup k elementům stránky, které ještě nejsou načtené. Knihovna jquery na to pamatuje a umožňuje zadat kód tak, aby se provedl až v okamžiku, kdy je stránka připravená. Jak na to ukazuje následující kód: jquery(document).ready(function(){ // sem patří kód v JavaScriptu ); V ukázce jsme použili trochu odlišný kód: $(function(){ // sem patří kód v JavaScriptu ); Znak $ je zkratkou za jquery. Volání $(něco) lze tedy chápat stejně jako volání jquery(něco). $(obsluha události) je další zkratkou, konkrétně pro událost ready, a odpovídá následujícímu kódu: $(document).ready(obsluha události); který je identický s tímto: jquery(document).ready(obsluha události); Kvíz 1. Na jaké místo je nejlepší vložit kód v JavaScriptu? a. Před úvodní značku elementu head. b. Do elementu head. c. Ihned za úvodní značku elementu body. d. Těsně před koncovou značku elementu body. Vytvoření elementů pro hru Ping Pong Vše je připraveno a nic nám již nebrání pustit se do vývoje hry Ping Pong. Jak na to přidání základních elementů hry 1. Navážeme na náš předchozí příklad instalace jquery. Otevřete soubor index. html v textovém editoru. 41
6 Kapitola 2 Začínáme s vývojem her a DOM Následně do elementu body vložte elementy div pro hru a hrací pole. V elementu reprezentujícím hrací pole se budou nacházet dva elementy pro pálky hráčů a jeden pro míček. Celý element hracího pole pak bude součástí elementu pro hru: <div id="game"> <div id="playground"> <div id="paddlea" class="paddle"></div> <div id="paddleb" class="paddle"></div> <div id="ball"></div> </div> </div> 3. Základní struktura elementů hry je na svém místě, zbývá pro vytvořené elementy připravit styly. Následující kód vložte do elementu head: <style> #playground{ background: #e0ffe0; width: 400px; height: 200px; position: relative; overflow: hidden; #ball { background: #fbb; position: absolute; width: 20px; height: 20px; left: 150px; top: 100px; border-radius: 10px;.paddle { background: #bbf; left: 50px; top: 70px; position: absolute; width: 30px; height: 70px; #paddleb { left: 320px; </style>
7 Vytvoření elementů pro hru Ping Pong 4. Stejně jako v předešlém případě umístíme náš kód v JavaScriptu za kód zajišťující připojení knihovny jquery. Kód vložíme do samostatného souboru, protože se postupně rozroste. Vytvořte proto ve složce js soubor html5games.pingpong.js. 5. Soubor pro kód v JavaScriptu jsme připravili, zbývá ho připojit k dokumentu HTML. Následující kód vložte do souboru index.html, těsně před koncovou značku elementu body: <script src="js/jquery-1.6.min.js"></script> <script src="js/html5games.pingpong.js"></script> 6. Logika hry se bude nacházet v souboru html5games.pingpong.js. Prozatím se zde bude nacházet pouze následující kód zajišťující nastavení počátečních pozic pálek hráčů: // kód nacházející se uvnitř $(function(){ se spustí poté, co // se dokončí načítání dokumentu a bude připravený DOM $(function(){ $("#paddleb").css("top", "20px"); $("#paddlea").css("top", "60px"); ); 7. Ověříme stávající konfiguraci ve webovém prohlížeči. Otevřete v něm soubor index.html, měl by se vám naskytnout podobný pohled jako na následujícím obrázku: Vysvětlení Naši hru jsme obohatili o dvě pálky a míček a s použitím knihovny jquery jsme nastavili počáteční pozice obou pálek. Seznámení s jquery jquery je knihovna JavaScriptu navržená pro jednoduchou navigaci v elementech stránky, manipulaci s nimi, obsluhu událostí a provádění vzdálených asynchronních volání. 43
8 Kapitola 2 Začínáme s vývojem her a DOM Knihovna umožňuje provádět dvě primární akce selekci a modifikaci. Selekcí se rozumí výběr všech elementů webové stránky, které odpovídají zadanému selektoru (známému z kaskádových stylů). Modifikace, jako je přidání elementu, odstranění potomků nebo nastavení stylu, probíhá nad vybranými elementy. Používání jquery často obnáší spojení selekce a modifikace dohromady v jednu akci. Například následující kód vybere všechny elementy, které patří do třídy box, a nastaví u uvedených vlastností nové hodnoty: $(".box").css({"top":"100px","left":"200px"); Seznámení se selektory jquery Smyslem knihovny jquery je usnadnit výběr elementů a provádění akcí s nimi. Potřebujeme nějak vybrat všechny potřebné elementy v rámci celého dokumentu. Aby mohla knihovna jquery tuto úlohu splnit, vypůjčuje si selektory z kaskádových stylů. Selektor reprezentuje určitý vzor, kterému musí vybíraný element odpovídat. Následující tabulka uvádí nejběžnější a nejužitečnější selektory, které v průběhu této knihy využijeme: Zápis selektoru Význam Příklad použití $("element") Vybere všechny elementy se zadaným názvem. $("p") vybere všechny elementy p. $("body") vybere element body. $("#identifikátor") $(".třída") $(".selektor1, selektor2, selektorn") Vybere element se zadaným identifikátorem (hodnotou atributu id). Vybere všechny elementy se zadanou třídou (hodnotou atributu class). Vybere všechny elementy odpovídající některému ze zadaných selektorů. Předpokládejme, že pracujeme s následujícím kódem: <div id="box1"></div> <div id="box2"></div> $("#box1") vybere vyznačený element. Předpokládejme, že pracujeme s následujícím kódem: <div class="apple"></div> <div class="apple"></div> <div class="orange"></div> <div class="banana"></div> $(".apple") vybere vyznačené elementy, které patří do třídy apple. Předpokládejme, že pracujeme s následujícím kódem: <div class="apple"></div> <div class="apple"></div> <div class="orange"></div> <div class="banana"></div> $(".apple,.orange") vybere vyznačené elementy, které patří buďto do třídy apple, anebo do třídy orange. 44
9 Vytvoření elementů pro hru Ping Pong Seznámení s metodou css knihovny jquery Metoda css knihovny jquery umožňuje získání i nastavení hodnot vlastností kaskádových stylů elementu. Takto vypadá obecná deklarace metody css, popisující možnosti jejího použití:.css(názevvlastnosti).css(názevvlastnosti, hodnota).css(polevlastností) Metoda css akceptuje několik typů parametrů, které uvádí následující tabulka: Volání metody Popis parametrů Příklad použití.css(název Vlastnosti).css(název Vlastnosti, hodnota).css(pole Vlastností) názevvlastnosti je vlastnost, jejíž hodnota se má získat. názevvlastnosti je vlastnost, hodnota je hodnota, na kterou se má vlastnost nastavit polevlastností je množina párů vlastnost/ /hodnota, které se mají aktualizovat. Metoda vrací hodnotu zadané vlastnosti vybraného elementu. Následující kód vrací hodnotu vlastnosti background-color elementu body: $("body").css("background-color") Dojde pouze k získání hodnoty, ne k její změně. Metoda nastaví hodnotu dané vlastnosti vybraného elementu či elementů na zadanou hodnotu. Následující kód nastaví hodnotu vlastnosti background-color na červenou barvu, u všech elementů, které patří do třídy box: $(".box").css("background-color", "#ff0000") Metoda nastaví hodnotu hned několika zadaných vlastností u vybraného elementu či elementů. Následující kód nastaví hodnoty vlastností left a top elementu s identifikátorem box1: $("#box1").css({ "left" : "40px", "top" : "100px" ) Výhody jquery Knihovna jquery nabízí v porovnání s klasickým JavaScriptem několik výhod: Kód využívající knihovnu jquery pro výběr elementů stránky a jejich modifikaci je výrazně kratší. Kratší kód se lépe čte, což je při vývoji her, které zpravidla obsahují mnoho kódu, velmi důležité. Psaní kratších kódů zrychluje vývoj. 45
10 Kapitola 2 Začínáme s vývojem her a DOM S použitím knihovny jquery je možné vytvářet kód kompatibilní se všemi hlavními prohlížeči, bez nutnosti dodatečných úprav. Knihovna jquery, jakožto nadstavba nad JavaScriptem, se sama postará o zajištění kompatibility napříč prohlížeči. Práce s elementy hry pomocí jquery S použitím knihovny jquery jsme v naší hře úspěšně nastavili počáteční polohu pálek hráčů. Nyní uděláme malý experiment týkající se dalšího umístění elementů hry. Jak na to změna polohy elementů pomocí jquery V prvé řadě přidáme do naší hry mřížkové pozadí pro lepší orientaci: 1. Navážeme na předchozí ukázku kódu hry Ping Pong. 2. Připravili jsme pro vás obrázek (pixel_grid.jpg) s mřížkou, který si můžete stáhnout na následující adrese: 3. Vytvořte v hlavní složce hry novou podsložku s názvem images. 4. Uložte obrázek pixel_grid.jpg do složky images. Tento obrázek nám pomůže při dalším pozicování elementů. 5. Otevřete soubor index.html v textovém editoru. 6. Upravte hodnotu vlastnosti background elementu div s identifikátorem play ground tak, aby se na jeho pozadí zobrazoval obrázek mřížky, jak ukazuje následující kód: #playground{ background: #e0ffe0 url(images/pixel_grid.jpg); width: 400px; height: 200px; position: relative; overflow: hidden; 7. Pokud jste postupovali správně, uvidíte po otevření souboru index.html ve webovém prohlížeči něco podobného, jako na následujícím obrázku. Elementy hry se nacházejí nad mřížkou usnadňující určování jejich polohy. 46
11 Vytvoření elementů pro hru Ping Pong Vysvětlení Praktickou ukázku jsme zahájili vložením obrázku pixel_grid.jpg na pozadí elementu hracího pole. Jedná se o obrázek vytvořený k tomu, aby usnadnil polohování elementů hry. Obrázek tvoří mřížka polí o velikosti pixelů, formujících větší bloky o velikosti pixelů. Použijeme-li tento obrázek jako pozadí elementu div hracího pole, získáme tak v podstatě pravítko, podle kterého můžeme měřit pozice dceřiných elementů hracího pole. Absolutní pozicování a jeho specifika Má-li element absolutní pozici (vlastnost position má hodnotu absolute), hodnoty jeho vlastností left a top lze chápat jako souřadnice X, resp. Y levého horního rohu elementu. Tuto skutečnost ilustruje následující obrázek, který v levé části prezentuje skutečné vlastnosti elementu a v pravé pak souřadnicový systém, jejž budeme intuitivně používat při programování hry. Ve výchozím stavu jsou hodnoty vlastností left a top vztaženy k levému hornímu rohu webové stránky. Tento referenční bod se mění v okamžiku, kdy rodičovský element explicitně nastaví hodnotu své vlastnosti position. Pro potomky tohoto rodiče se v takovém případě stává referenčním bodem pro hodnoty vlastností left a top levý horní roh rodiče. 47
12 Kapitola 2 Začínáme s vývojem her a DOM Z toho důvodu nastavíme pozici hracího pole na relativní a pozici všech elementů hry v něm na absolutní. Následující kód ukazuje použité nastavení: #playground{ position: relative; #ball { position: absolute;.paddle { position: absolute; Kvíz 1. Který selektor jquery použijete, pokud chcete vybrat všechny elementy header? a. $("#header") b. $(".header") c. $("header") d. $(header) Načtení vstupu z klávesnice 48 Tato kniha se zaměřuje na vývoj her. Na běh hry je možné nahlížet jako na následující cyklus: 1. Vizualizuje se aktuální stav hry. 2. Hráči zadají své vstupní příkazy. 3. Logika hry vyhodnotí vstup uživatelů a do hry ho adekvátně promítne. 4. Zpět na krok č. 1. V předchozích částech kapitoly jsme se dozvěděli, jak s použitím jquery a kaskádových stylů zobrazovat objekty hry. Dalším krokem v pořadí je tedy načtení uživatelského vstupu. V této kapitole se zaměříme na vstup z klávesnice. Jak na to pohybování s elementy na základě vstupu z klávesnice Vytváříme klasickou hru Ping Pong. Hru tvoří dvě pálky, jedna vlevo, druhá vpravo a míček mezi nimi, uprostřed hracího pole. Jeden hráč ovládá pálku na levé straně a může s ní pohybovat nahoru a dolů pomocí kláves W a S, druhý hráč má pod kontrolou pálku na opačné straně a pro její ovládání používá klávesy šipek nahoru a dolů.
13 Načtení vstupu z klávesnice Prozatím pomineme problematiku pohybu míčku a zaměříme se na vstup z klávesnice a jeho zpracování. 1. Vraťte se do složky pingpong. 2. Otevřete v textovém editoru soubor html5games.pingpong.js, který bude obsahovat logiku hry. Prozatím se zde bude nacházet kód obsluhující událost stisknutí klávesy klávesnice, který zajistí adekvátní posun pálky hráče nahoru či dolů. Nahraďte obsah souboru následujícím kódem: var KEY = { UP: 38, DOWN: 40, W: 87, S: 83 $(function(){ // naslouchání události stisknutí klávesy klávesnice $(document).keydown(function(e){ switch(e.which){ case KEY.UP: // šipka nahoru // určení aktuální hodnoty vlastnosti top pálky B a převedení // hodnoty na celé číslo var top = parseint($("#paddleb").css("top")); // posunutí pálky B o 5 pixelů nahoru $("#paddleb").css("top",top-5); break; case KEY.DOWN: // šipka dolů var top = parseint($("#paddleb").css("top")); // posunutí pálky B o 5 pixelů dolů $("#paddleb").css("top",top+5); break; case KEY.W: // W var top = parseint($("#paddlea").css("top")); // posunutí pálky A o 5 pixelů nahoru $("#paddlea").css("top",top-5); break; case KEY.S: // S var top = parseint($("#paddlea").css("top")); // posunutí pálky A o 5 pixelů dolů $("#paddlea").css("top",top+5); break; 49
14 Kapitola 2 Začínáme s vývojem her a DOM ); ); 3. Pojďme vyzkoušet ovládání pálek. Otevřete soubor index.html v prohlížeči Google Chrome. Zkuste stisknout klávesy W, S, šipku nahoru a dolů. Pálky by se měly v souladu se vstupem pohybovat nahoru a dolů, v tuto chvíli však ještě ne obě současně. Vysvětlení Podívejme se znovu na právě použitý kód. Dokument HTML obsahuje záhlaví, zápatí a element div s identifikátorem game. Element game obsahuje element s identifikátorem playground. Tento element reprezentující hrací pole má tři potomky, tedy dvě pálky a míček. Vývoj hry v HTML5 často začíná přípravou správně strukturovaného dokumentu HTML. Hierarchie HTML pomáhá seskupovat podobné elementy hry (v našem případě několik elementů div) dohromady. Je to něco jako spojování jednotlivých položek do výsledné animace v Adobe Flash. Na finální hierarchii lze nahlížet jako na systém vrstev objektů hry, které je možné snadno vybírat a měnit jejich styl. Klávesnice a kódy kláves Každé klávese klávesnice přísluší určitý číselný kód. Na základě tohoto čísla je možné určit, jakou klávesu uživatel stiskl. Náš kód v JavaScriptu naslouchá události keydown. Objekt event, který se při výskytu této události předává její obsluze, obsahuje mimo jiné také kód stisknuté klávesy. Kód klávesy udává vlastnost which objektu event. 50
15 Načtení vstupu z klávesnice Do obsluhy události keydown je možné přidat volání metody log objektu console a následně v konzole pozorovat kódy reprezentující jednotlivé stisknuté klávesy. $(document).keydown(function(e){ console.log(e.which); ); Lépe čitelné konstanty Předchozí ukázka kódu názorně demonstrovala, jak lze s použitím kódů kláves vyhodnotit, jestli uživatel právě nestiskl některou z pro nás důležitých kláves. Například šipka nahoru má kód 38. Stačí tedy jednoduše porovnat kód právě stisknuté klávesy s tímto číslem, jak ukazuje následující kód: $(document).keydown(function(e){ switch(e.which){ case 38: // zpracování stisku šipky nahoru Takový postup se však rozhodně nedá doporučit. Jeho důsledkem je velmi špatně čitelný kód. Představte si, že někdy později budete chtít změnit logiku programu a namísto šipky nahoru použít jinou klávesu. V danou chvíli už si nemusíme pamatovat, že kód 38 přísluší právě šipce nahoru. Z toho důvodu se používají konstanty se smysluplnými názvy: var KEY = { UP: 38, DOWN: 40, W: 87, S: 83 // naslouchání události stisknutí klávesy klávesnice $(document).keydown(function(e){ switch(e.which){ case KEY.UP: // zpracování stisku šipky nahoru Díky přiřazení hodnoty 38 do konstanty s názvem KEY.UP je ihned patrné, že daný blok kódu slouží ke zpracování stisku šipky nahoru a bez jakýchkoliv pochyb můžeme danou konstantu nastavit na novou hodnotu. 51
16 Kapitola 2 Začínáme s vývojem her a DOM Převod řetězců na čísla pomocí funkce parseint Ve většině případů budeme při nastavování hodnot vlastností left a top používat hodnoty, jako je např. 100px. Společně s číselnou hodnotou uvedeme i jednotku, kterou je v tomto případě pixel. Ve stejném formátu pak budeme hodnoty uvedených vlastností také načítat. Volání metody $("#paddlea").css("top") tedy nevrátí hodnotu 100, nýbrž 100px. Vzniká tak drobný problém, pokud se s touto hodnotou mají provádět nějaké aritmetické operace. V tomto příkladu je naším cílem posunutí pálky hráče směrem vzhůru, nastavením hodnoty vlastnosti top na její aktuální hodnotu zmenšenou o pět. Předpokládejme, že je aktuální hodnota vlastnosti top pálky A rovna 100px. Pokud bychom použili následující příkaz ve snaze navýšit hodnotu o pět pixelů, nebyla by výsledkem očekávaná číselná hodnota, ale hodnota 100px5. $("#paddlea").css("top") + 5 JavaScript v tomto případě provede metodu css, která vrátí hodnotu 100px. Následně k řetězci 100px připojí řetězec 5. Potřebujeme nějakým způsobem převést řetězec 100px na číslo, se kterým lze provádět matematické operace. Právě k tomu slouží funkce parseint JavaScriptu. Deklarace funkce vypadá následovně: parseint(řetězec, číselnásoustava) Funkce parseint má jeden povinný a jeden volitelný parametr. Parametr Popis Příklad použití řetězec číselná Soustava Řetězec, který se má zpracovat. Volitelný parametr. Číslo reprezentující číselnou soustavu, která se má použít. Funkce zpracuje v pořadí první číslo, které se v řetězci nachází. Pokud zadaný řetězec není možné převést na číslo, vrací funkce hodnotu NaN (Not a Number). Ve výchozím nastavení zpracuje funkce řetězce uvozené prefixem 0x jako čísla v šestnáctkové soustavě. Několik příkladů použití: parseint("100px") vrací 100 parseint("5cm") vrací 5 parseint("0xf") vrací 15 Druhý parametr vynucuje zpracování řetězce v konkrétní číselné soustavě. Například: parseint("0x10") vrací 16 parseint("0x10",10) vrací 0 parseint("ff",16) vrací
Obsah. SEZNÁMENÍ S HRAMI V HTML5...19 Nové funkce HTML5... 20. Nové funkce CSS3... 23
ÚVOD.................................................13 Co v této knize najdete................................... 13 Co budete v této knize potřebovat.......................... 14 Pro koho je tato kniha
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í
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é
MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress
MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress www.webdevel.cz Webdevel s.r.o. IČ 285 97 192 DIČ CZ28597192 W www.webdevel.cz E info@webdevel.cz Ostrava Obránců míru 863/7 703 00 Ostrava Vítkovice M 603
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í
Dokument a jeho části oddíly, záhlaví, zápatí
Dokument a jeho části oddíly, záhlaví, zápatí Nejčastějším úkolem bývá ukončení stránky a pokračování textu na další stránce nebo vložení stránky před napsaný text. Podobným úkolem je jiné svislé zarovnání
(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
25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY
25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25.1 Přidání nového tlačítka do menu Abychom mohli zpřístupnit nový pevný tvar do systému, je třeba přidat nové tlačítko do Menu. V našem případě se jedná o příčné
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
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
Formátování pomocí stylů
Styly a šablony Styly, šablony a témata Formátování dokumentu pomocí standardních nástrojů (přímé formátování) (Podokno úloh Zobrazit formátování): textu jsou přiřazeny parametry (font, velikost, barva,
METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI Základní rozložení plochy Výchozím stavem při práci je normální zobrazení. pás karet - základní nabídka příkazů Pořadí jednotlivých snímků Základní plocha
Word Lekce III. a IV.
Word 2007 Lekce III. a IV. Záložní kopie Povolení a nastavení automatického obnovení a automatického uložení může být žádoucí ve chvíli, kdy aplikace Word nahlásí neočekávanou chybu, kolizi aplikace a
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
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
Google Apps. weby 1. verze 2012
Google Apps weby verze 0 Obsah Obsah... Úvod... Zahájení práce... Nastavení webu... Úprava stránky... Popis prostředí... Rozložení stránky... Nadpis stránky... Úprava textu... Vložení odkazu... 8 Vložení
Printris. Hra Printris je psána pomocí příkazů Javascriptu a standardních příkazů HTML.
Printris Hra Printris je psána pomocí příkazů Javascriptu a standardních příkazů HTML. Hra je založena ne principu Tetrisu. Úkolem hráče je umístit tři stejné tiskárny vodorovně nebo svisle do jedné řady.
Soubory s reklamami musí mít stejný název jako ta výše uvedené. Stávající soubory reklam budou přepsány.
Příloha 5 Výroba a zadávání reklamních obrázků Program umožňuje zobrazovat až 10 reklamních obrázků na monitorech. Obrázky musí splňovat následující parametry: velikost 640 x 480 pixelů formát BMP s 16
Vkládání prvků do dokumentu MS Word
Vkládání prvků do dokumentu MS Word 1. Vkládání Do dokumentu můžeme vložit celou řadu prvků, počínaje čísly stránek a obrázky konče. 1.1. Konec stránky Pokud chceme, aby odstavec byl vždy posledním na
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
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í
Formuláře. Téma 3.2. Řešený příklad č Zadání: V databázi formulare_a_sestavy.accdb vytvořte formulář pro tabulku student.
Téma 3.2 Formuláře Formuláře usnadňují zadávání, zobrazování, upravování nebo odstraňování dat z tabulky nebo z výsledku dotazu. Do formuláře lze vybrat jen určitá pole z tabulky, která obsahuje mnoho
Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových stránek Vlastnosti CSS pro pozicování Ing.
Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1 Šablona: Název: Téma: Autor: Číslo: Anotace: Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových
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
1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce.
2. lekce Čtení dokumentů 1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce. 3. Přecházení mezi stránkami v dokumentu:
Vytvoření tiskové sestavy kalibrace
Tento návod popisuje jak v prostředí WinQbase vytvoříme novou tiskovou sestavu, kterou bude možno použít pro tisk kalibračních protokolů. 1. Vytvoření nového typu sestavy. V prvním kroku vytvoříme nový
Průvodce aplikací GTS Webový portál pro správce
Průvodce aplikací GTS Webový portál pro správce www.centrex.gts.cz Strana 1 z 14 Obsah 1 Přihlášení do portálu Centrex... 3 2 Hlavní stránka aplikace základní popis... 3 3 Použití interaktivní nápovědy...
Google Apps. kalendář 2. verze 2012
Google Apps kalendář verze 0 Obsah Obsah... Úvod... Vytvoření události... Vytvoření události v daném čase... Vytvoření celodenní události... 6 Vytvoření opakované události... 6 Vytvoření vícedenní události...
CSS Stylování stránek. Zpracoval: Petr Lasák
CSS Stylování stránek Zpracoval: Petr Lasák Cascade Style Sheets Sada stylů každý element má styl svého zobrazení Říká, jak má být element zobrazen, ne co v něm je Do verze HTML 4.0 byl vzhled měněn pouze
Tvorba kurzu v LMS Moodle
Tvorba kurzu v LMS Moodle Před počátkem práce na tvorbě základního kurzu znovu připomínám, že pro vytvoření kurzu musí být profil uživatele nastaven administrátorem systému minimálně na hodnotu tvůrce
Ovládání Open Office.org Calc Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako.
Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako. Otevře se tabulka, v které si najdete místo adresář, pomocí malé šedočerné šipky (jako na obrázku), do kterého
Mgr. Stěpan Stěpanov, 2013
Mgr. Stěpan Stěpanov, 2013 Abstrakt V tomto kurzu se seznámíme se základními pojmy HTML, klíčovými pravidly pro práci se značkami a atributy a strukturou dokumentu. Také se dozvíte, jak a v čem lze vytvářet
VYHLEDÁVACÍ BANNER PRO WEBOVÉ STRÁNKY
VYHLEDÁVACÍ BANNER PRO WEBOVÉ STRÁNKY DOKUMENTACE Datum: 16.12. 2013 Zpracováno pro: Ředitelství silnic a dálnic ČR Na Pankráci 546/56 145 05 Praha 4 Zpracoval: VARS BRNO a.s. Kroftova 3167/80c, 616 00
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.
Přepínání zobrazení Použijte zobrazení kalendáře, které nejlépe vyhovuje vašemu pracovnímu postupu. Přepínejte tak často, jak chcete.
Kalendář Úvodní příručka Naplánování schůzky v Lyncu Setkejte se tváří v tvář a ušetřete si cestu díky online schůzce v Lyncu 2013. Přepínání zobrazení Použijte zobrazení kalendáře, které nejlépe vyhovuje
MODERNÍ WEB SNADNO A RYCHLE
SNADNO A RYCHLE Marek Lučný Pavoučí síť přes celý svět Co prohlížeče (ne)skrývají Tajemný kód HTML Všechno má svůj styl Interaktivní je IN Na obrazovce i na mobilu Začni podle šablony Informace jsou základ
Robot BBC Micro:bit kódovaní v PXT Editoru
Robot BBC Micro:bit kódovaní v PXT Editoru Ze softwarového hlediska je robot dálkově ovládaný. Skládá se z kódu běžícího na BBC mikro:bit a aplikace nazvané micro:bit blue. Běží na Androidech, smartphonech
Strategie ochrany před negativními dopady povodní a erozními jevy přírodě blízkými opatřeními v České republice
Strategie ochrany před negativními dopady povodní a erozními jevy přírodě blízkými opatřeními v České republice Návod k prezentačnímu mapovému portálu Obsah: 1. Úvod... 3 2. Obecná část mapového portálu...
Programování v jazyce JavaScript
Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Operátory a příkazy BI-JSC Evropský sociální fond
Programování v jazyce JavaScript
Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Události (events) BI-JSC Evropský sociální fond
DUM č. 9 v sadě. 30. Inf-6 Imagine Logo a animace pro nižší gymnázium
projekt GML Brno Docens DUM č. 9 v sadě 30. Inf-6 Imagine Logo a animace pro nižší gymnázium Autor: Hana Křetínská Datum: 25.06.2014 Ročník: 1AV, 2AV Anotace DUMu: Imagine Logo je vývojové prostředí s
Návod na používání webmailu
Návod na používání webmailu Každý student a zaměstnanec UTB má svoji vlastní školní e-mailovou schránku. K té se lze připojit buď pomocí webového klienta http://webmail.utb.cz, nebo libovolného e-mailového
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...
Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela
Základy informatiky HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra HTML
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto
Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto Registrační číslo projektu Šablona Autor Název materiálu / Druh CZ.1.07/1.5.00/34.0951 III/2 INOVACE A ZKVALITNĚNÍ VÝUKY PROSTŘEDNICTVÍM ICT
PDF Split and Merge. Průvodce programem pro práci s PDF
PDF Split and Merge Průvodce programem pro práci s PDF Obsah Instalace a nastavení programu... 1 Sloučení více PDF do jednoho souboru... 1 Rozdělení PDF... 2 Vizuální reorganizátor... 3 Vizuální průvodce
dokumentu, respektive oddílu (více o oddílech v další kapitole). Nemůžeme
Microsoft Office IV Sloupce Chtěli bychom psát školní noviny a máme pocit, že jsou málo profesionální. Chtěli bychom využít možnost psaní v několika sloupcích. Nastavíme si na stránce místo jednoho sloupce
Fiktivní firma. Žáci získají základní informace o přípravě a tvorbě webových stránek. Na konci prezentace je úkol, se kterým žáci samostatně pracují.
Název a registrační číslo projektu: CZ.1.07/1.5.00/34.0498 Číslo a název oblasti podpory: 1.5 Zlepšení podmínek pro vzdělávání na středních školách Realizace projektu: 02. 07. 2012 01. 07. 2014 Autor:
Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border
Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border Prvky rozdělující obsah article, aside, nav, section Header Footer Boxy Vlastnosti width height padding border
Nápověda pro ovládání automaticky čtené učebnice
Speciální vzdělávací pomůcky k podpoře výuky slabozrakých žáků Nápověda pro ovládání automaticky čtené učebnice Požadavky na počítač Pro používání čtených pomůcek Vám postačí běžný osobní počítač, reproduktory
Microsoft. Word. Hromadná korespondence. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie
Microsoft Word Hromadná korespondence Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie Hromadná korespondence Funkce hromadná korespondence umožňuje vytvoření malé databáze (tabulky)
Manuál k programu KaraokeEditor
Manuál k programu KaraokeEditor Co je KaraokeEditor? Program slouží pro editaci tagů v hudebních souborech formátu mp3. Tagy jsou doprovodné informace o písni, uložené přímo v mp3. Aplikace umí pracovat
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
Vytváříme prezentaci její strukturu a celkový vzhled
Vytváříme prezentaci její strukturu a celkový vzhled Práce se snímky Máme tedy spuštěný PowerPoint, otevřeli jsme nový soubor, máme patrně před sebou i první prázdný snímek, ale samozřejmě to je jen začátek.
Vývoj Internetových Aplikací
4 Vývoj Internetových Aplikací HTML5 Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky Co je HTML5? - HTML5 je směr, kam se ubírá web budoucnost webových aplikací a vývoje - HTML5 je multiplatformní - HTML5
ZÁKLADY POŘIZOVÁNÍ TEXTU
Úvod do problematiky ZÁKLADY POŘIZOVÁNÍ TEXTU Na začátku psaní je vhodné nastavit vzhled stránky. Důležitá je především orientace stránky. Můžeme si vybrat mezi uspořádáním textu na výšku stránky (většinou
Docházkový systém modul E-PORTÁL
Docházkový systém modul E-PORTÁL E-PORTÁL slouží k prohlížení docházky pomocí internetového prohlížeče, na základě přiřazených práv jednotlivým zaměstnancům (uživatelům). V E-PORTÁLu lze také plánovat
[BAL-MLP] Multiplayer
![[BAL-MLP] Multiplayer](/thumbs/24/4317286.jpg "[BAL-MLP] Multiplayer")
České vysoké učení technické v Praze Fakulta elektrotechnická Semestrální práce D2 předmětu A7B39PDA [BAL-MLP] Multiplayer Tomáš Kozák (další členové týmu: Tomáš Bruštík, Jaroslav Havelík) LS 2012/2013
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í
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...
Příručka Vzdělávacího střediska Konero ke kurzu Milan Myšák
MS PowerPoint (verze 2010) Příručka Vzdělávacího střediska Konero ke kurzu Milan Myšák e-mail: milan.mysak@konero.cz Obsah 1. Seznámení s prezentacemi 2. Zobrazení prezentace 3. Nastavení programu a prezentace
3D EDITOR. Základy práce s programem. Verze 1.0.0
3D EDITOR Základy práce s programem Verze 1.0.0 OBSAH 1. Přehled verzí aplikace... 3 2. Spuštění aplikace... 4 3. Princip jednoho souboru... 4 4. Práce ve více oknech... 4 5. Rozložení okna s úlohou...
ÚVOD 3 SEZNÁMENÍ SE SYSTÉMEM 4
ÚVOD 3 SEZNÁMENÍ SE SYSTÉMEM 4 JEDNODUCHÉ PŘIHLÁŠENÍ 4 ADMINISTRAČNÍ PROSTŘEDÍ 5 PŘEPÍNÁNÍ JAZYKOVÉ VERZE 5 POLOŽKY HORNÍHO MENU 5 DOPLŇKOVÉ POLOŽKY MENU: 6 STROM SE STRÁNKAMI, RUBRIKAMI A ČLÁNKY 7 TITULNÍ
Manuál k ovládání aplikace INFOwin.
Manuál k ovládání aplikace INFOwin. Základní práce s formuláři je ve všech modulech totožná. Vybereme tedy například formulář Pokladní kniha korunová na kterém si funkce ukážeme. Po zápisech se lze pohybovat
Manuál pro obsluhu Webových stránek
ResMaster Systems s.r.o. Truhlářská 1119/20, 110 00 Praha 1 Manuál pro obsluhu Webových stránek (Prosinec 2018) Jana Vítová, +420 225 388 130 2018 Obsah Úvod Webové stránky... 3 Slovník pojmů... 3 URL
Styly písma - vytvoření vlastního stylu, zápatí a záhlaví stránek
VY_32_INOVACE_In 6.,7.08 Styly písma - vytvoření vlastního stylu, zápatí a záhlaví stránek Anotace: Žák se seznamuje vytvářením vlastního stylu písma a jeho výhodami. Vkládá a mění zápatí a záhlaví stránek
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
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,
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...
Uživatelský manuál Radekce-Online.cz
Uživatelský manuál Radekce-Online.cz (revize 06/2011) V prvním kroku třeba vstoupit do administrace na adrese www.redakce-online.cz kterou naleznete na záložce Administrace / Vstup do Administrace, pro
Převod na nový školní rok
Převod na nový školní rok Funkce pro převod na nový školní je součástí systému SAS od jeho počátku. Umožňuje převést třídy a žáky ze školního roku, který končí, do dalšího školního roku. Před tím, než
Zdokonalování gramotnosti v oblasti ICT. Kurz MS Excel kurz 6. Inovace a modernizace studijních oborů FSpS (IMPACT) CZ.1.07/2.2.00/28.
Zdokonalování gramotnosti v oblasti ICT Kurz MS Excel kurz 6 1 Obsah Kontingenční tabulky... 3 Zdroj dat... 3 Příprava dat... 3 Vytvoření kontingenční tabulky... 3 Možnosti v poli Hodnoty... 7 Aktualizace
Hromadná korespondence
Hromadná korespondence Hromadnou korespondenci lze použít k vytvoření sady dokumentů, které jsou v zásadě stejné, každý dokument ovšem obsahuje jedinečné prvky. Například u dopisu oznamujícího nový produkt
GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek
GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek Projekt Využití ICT ve výuce na gymnáziích, registrační číslo projektu CZ.1.07/1.1.07/02.0030 MS Word Metodický materiál pro základní
Úvodem Seznámení s HTML Rozhraní Canvas... 47
Stručný obsah Úvodem... 17 1. Seznámení s HTML5... 21 2. Rozhraní Canvas... 47 3. Práce s audiem a videem v HTML5... 85 4. Geolokační rozhraní... 109 5. Komunikační rozhraní... 137 6. Rozhraní WebSocket...
Nápověda k systému CCS Carnet Mini. Manuál k aplikaci pro evidenci knihy jízd
Nápověda k systému CCS Carnet Mini Manuál k aplikaci pro evidenci knihy jízd Vážený zákazníku, vítejte v našem nejnovějším systému pro evidenci knihy jízd - CCS Carnet Mini. V následujících kapitolách
MS OFFICE POWER POINT 2010
MS OFFICE POWER POINT 2010 Program Power Point patří do rodiny programů Microsoft Office a slouží ke tvorbě prezentací. Prezentace je tvořena snímky, které jsou postupně zobrazovány a to buď po nějaké
Připojení ke vzdálené aplikaci Target 2100
Připojení ke vzdálené aplikaci Target 2100 Pro úspěšné připojení ke vzdálené aplikaci Target 2100 je nutné připojovat se ze stanice s Windows XP SP3, Windows Vista SP1 nebo Windows 7. Žádná VPN není potřeba,
Nápověda k systému CCS Carnet Mini
Nápověda k systému CCS Carnet Mini Manuál k aplikaci pro evidenci knihy jízd Vážený zákazníku, vítejte v našem nejnovějším systému pro evidenci knihy jízd - CCS Carnet Mini. V následujících kapitolách
Název Live prez Sear enta Maps
Vladimír Jarotek Název Live Search prezentace Maps Nadpis Obsah 1. Co je to Live Search Maps 2. API 3. Závěr 4. Literatura Nadpis 1 Co je to a co nabízí Live Search Maps Jedná se o projekt (službu) prohledávání
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í
Formát stránky, písma, odstavce Word 2007 egon. Formát stránky a písma, okraje, odstavce, oddíly
Formát stránky, písma, odstavce Word 2007 egon Formát stránky a písma, okraje, odstavce, oddíly Jan Málek 11.6.2010 Formát stránky Před psaním textu bychom se měli rozmyslet, na jaký formát papíru případně
Jak vytvořit nebo předělat vlastní motiv pro SunLight CMS
Jak vytvořit nebo předělat vlastní motiv pro SunLight CMS V tomto tutoriálu se podíváme na to, jak si při troše šikovnosti udělat nebo předělat vybraný motiv pro redakční systém SunLight CMS. Jako příklad
Co se jinam nevešlo. a co se nám v přehledu témat modralo...
Co se jinam nevešlo a co se nám v přehledu témat modralo... Validita, XHTML/HTML Dokument by měl začínat definicí typu, aby bylo jasno, co v něm je. - zavedeno od verze HTML5 Předtím...
OFF - LINE. PRO ZAČÁTEČNÍKY Zdroje textů a obrázků
TVORBA WEBOVÉ STRÁNKY OFF - LINE 10 BODŮ VYTVOŘ SI WEB PRO ZAČÁTEČNÍKY Zdroje textů a obrázků 1.Vytvořte si na disku novou složku například C:/DT2_WEB nebo C:/POKUS a přejděte do ní. Dvojklikem na ikoně
1. Základní pojmy, používané v tomto manuálu. 2. Stránky
Redakční systém manuál 1. Základní pojmy, používané v tomto manuálu Hlavní menu Menu v horní světlemodré liště obsahující 7 základních položek: Publikovat, Správa, Vzhled, Komentáře, Nastavení, Pluginy,
Manuál k tvorbě absolventské práce
Manuál k tvorbě absolventské práce VLOŽENÍ ČÍSLA STRÁNKY... 2 OBRÁZKOVÝ NÁVOD PRO VKLÁDÁNÍ ČÍSEL STRÁNEK... 2 ŘÁDKOVÁNÍ 1,5... 3 OBRÁZKOVÝ NÁVOD PRO ŘÁDKOVÁNÍ... 3 ZAROVNÁNÍ TEXTU DO BLOKU... 4 OBRÁZKOVÝ
Uživatelská příručka 6.A6. (obr.1.)
Uživatelská příručka 6.A6 Na stránky se dostanete zadáním URL adresy: http://sestasest.tym.cz do vašeho prohlížeče. Teď jste se dostali na úvodní stránku, na které vidíte fotku, přivítání, odkaz na Uživatelskou
Gabriela Janská. Středočeský vzdělávací institut akademie J. A. Komenského www.sviajak.cz
PŘÍRUČKA KE KURZU: ZÁKLADY PRÁCE NA PC MS WORD 2003 Gabriela Janská Středočeský vzdělávací institut akademie J. A. Komenského www.sviajak.cz Obsah: 1. Písmo, velikost písma, tučně, kurzíva, podtrhnout
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...
Soubor index.html se nachází na stejné úrovni jako adresář obrazky. Měla bych použít relativní adresu, že? Hmm.
KAPITOLA 2 Úskalí jazyka HTML Soubor index.html se nachází na stejné úrovni jako adresář obrazky. Měla bych použít relativní adresu, že? Hmm. Počkat každou změnu adresáře doprovázel znak /. portfolio/obrazky
Vývoj Internetových Aplikací
4 Vývoj Internetových Aplikací HTML5 Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky Co je HTML5? - HTML5 je směr, kam se ubírá web budoucnost webových aplikací a vývoje - HTML5 je multiplatformní - HTML5
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é
PREZENTACE 1.7.3 ÚPRAVA POZADÍ SNÍMKU
1.7.3 ÚPRAVA POZADÍ SNÍMKU Standardní pozadí snímků má bílou barvu. S pozadím snímků si můžete trochu pohrát. Pozadí může být jednobarevné, přechodové, vzorované, na pozadí může být umístěn libovolný obrázek
Obsah, oddíly, záhlaví a zápatí, číslování stránek Word egon. Obsah dokumentu, oddíly, záhlaví a zápatí, číslování
Obsah, oddíly, záhlaví a zápatí, číslování stránek Word 2007 - egon Obsah dokumentu, oddíly, záhlaví a zápatí, číslování stránek Jan Málek 26.7.2010 Obsah S nepřímým formátováním, tedy Styly souvisí i
Zá kládní nástávení prostr edí operáč ní ho syste mu Windows 7 á vybrány čh áplikáčí
Zá kládní nástávení prostr edí operáč ní ho syste mu Windows 7 á vybrány čh áplikáčí Doporučené změny z výchozího nastavení pro pohodln ější práci s odečítači a digitálními lupami (kombinováno s informacemi
Programování v jazyce JavaScript
Programování v jazyce JavaScript Katedra softwarového inženýrství Fakulta informačních technologií České vysoké učení technické v Praze Pavel Štěpán, 2011 Syntaxe 1. část BI-JSC Evropský sociální fond
Uživatelská příručka systému pro administrátory obcí a manuál pro správce portálu
Softwarová podpora tvorby rozvojových dokumentů obcí Uživatelská příručka systému pro administrátory obcí a manuál pro správce portálu Verze 1.3 Zpracováno v rámci projektu CZ.1.04/4.1.00/62.00008 ELEKTRONICKÁ
Internetový prohlížeč-vyhledávání a ukládání dat z internetu do počítače
VY_32_INOVACE_In 6.,7.11 Internetový prohlížeč-vyhledávání a ukládání dat z internetu do počítače Anotace: V prezentaci se žák seznámí se základními typy prohlížečů. Zaměříme se na prohlížeč Internet Explorer.