CVI ČENIA Z APLIKOVANEJ INFORMATIKYCoca Cola Example of ordered lists: I. Coffee II. Tea III. Coca Cola a. Coffee b. Tea c. Coca Cola Výsledok, ktorý sa zobrazí po vytvorení html

OA Rožňava – moderná škola ITMS kód Projektu 26110130729

Moderné vzdelávanie pre vedomostnú spolo čnos ť Projekt je spolufinancovaný zo zdrojov EÚ

CVIČENIA Z APLIKOVANEJ INFORMATIKY

Pracovné listy Ing. Anita Sáreníková

Obchodná akadémia, Akademika Hronca 8,

Rožňava

Moderné vzdelávanie pre vedomostnú spoločnosť Projekt je spolufinancovaný zo zdrojov EÚ

Strana 1 z 12

Webová prezentácia (web) Všeobecné zásady dostupnosti a použite ľnosti webu

Pri dodržaní nasledujúcich zásad, bude vytvorený web prístupný nielen pre všetkých užívateľov, ale aj pre roboty vyhľadávačov ako Google.com či Zoznam.sk.

1. Správny (validný) kód HTML kód stránok by mal zodpovedať platnej špecifikácii (verzii) jazyka HTML podľa noriem World Wide Web Consortia (W3C). Bežné prehliadače (Internet Explorer, Firefox a ďalšie) sú k chybám v HTML kóde tolerantné, iné programy, cez ktoré používatelia internetu prechádzajú, sa tak chovať nemusia. Aby sa web zobrazoval všade správne, nemal by obsahovať chyby v kóde. Či je váš kód správny HTML, zistíte na oficiálnej stránke W3C validátora http://validator.w3.org/.

2. Sémantika HTML je značkovací jazyk a každému prvku na stránke je nutné priradiť HTML značku zodpovedajúcu jeho významu.

• nadpisy značíme <h1> (hlavný nadpis) až <h6>, • odsekom patrí značka <p>, • zoznamy zapisujeme ako <li>, • dôležité slová zvýrazňujeme značkou <strong>, • tabuľkové údaje vložíme do tabuľky <table>, • pre skratky slúži <acronym> a <abbr>, • ukážky kódu značíme ako <code>, • citáciu zapisujeme ako <q>.

3. Štruktúra kódu

Štruktúra kódu by sa mala riadiť významom jednotlivých častí. Čo je dôležité, by malo byť na začiatku , menej dôležité veci na konci. Každá stránka by tak mala začínať hlavným textovým obsahom a až potom by mali nasledovať doplňujúce informácie – postranné stĺpce, päta, atd. Pomocou kaskádových štýlov je možné kód naformátovať tak, aby vizuálna podoba zodpovedala požiadavkám autora – napríklad umiestniť menu pred hlavný text alebo ako stĺpec doprava či doľava.

4. Dostupnos ť informácii v textovej podobe Všetky informácie na webe by mali byť dostupné v textovej podobe. Informácie prezentované v grafickej podobe musia mať vždy alternatívny text, ktorý vystihuje a informuje užívateľa, ktorý grafiku nevníma.

• Obrázky musia mať alternatívny text v atribúte <alt>. • Animácie a videá musia mať i textovú alternatívu, ktorá popisuje ich obsah.

5. Titulok stránky

Každá stránka musí mať jednoznačný, výstižný a unikátny názov (titulok) – napísaný HTML značkou <title>. Titulok stránky je prvá vec, ktorú alternatívne zariadenia používateľovi sprostredkujú. Musí byť preto v titulku jasne napísané, čo je obsahom


Strana 2 z 12

danej stránky a tým ju odlíšiť od ostatných stránok. Vyhľadávače uprednostňujú stránky, ktoré obsahujú hľadanú frázu v title.

Vyhľadávače zobrazujú iba prvých 60 - 70 znakov. Slová na začiatku majú najväčšiu váhu, preto konštrukcia by mala byť takáto: Unikátny titulok stránky – Podkategória – Hlavná kategória – Názov webu

6. Odkazy Odkazy sú hlavný prostriedok pre pohyb používateľov na webe. Ak používatelia majú problém ich nájsť či porozumieť ich textu, potom asi nenájdu, čo hľadajú a web tak nemôže plniť svoj účel. Odkazy musia byť jasne rozpoznate ľné od ostatných prvkov . Zhrnutie: Kritériá použite ľnosti webovej stránky:

� Naučiteľnosť (learnability) � Výkonnosť (efficiency) � Zapamätateľnosť (memorability) � Odolnosť voči chybám (errors) � Spokojnosť (satisfaction)

Úloha č.1 Nájdite pravidlá prístupnosti webu na internete (napr. podľa WAI) a vypracujte referát vo Worde resp. informácie publikujte (webnode, estranky, a pod.). Nástroje pre tvorbu webu

� Exporty z kancelárskeho balíka (Word, Excel, PowerPoint) � WYSIWYG editory

o Lokálne aplikácie (Front Page) o Webové rozhranie, CMS

� Kódovanie (v zmysle písania kódu) webových stránok o Statické webové prezentácie

• HTML, XHTML • CSS

o Dynamické webové prezentácie • Jazyky na strane klienta (JavaScript, VBScript) • Jazyky na strane servera (PHP, ASP, Python)

• Komunikácia s databázovým serverom

Farby v HTML http://deja-vix.sk/htmlhelp/farby.htm


Strana 3 z 12

Práca v PSPad editore Všetci, čo sa chcú webové programovanie naučiť, si musia prejs ť cez HTML a CSS! Predpokladajme, že poznáte kostru web stránky a základné tagy jazyka HTML. PSPad editor je voľne šíriteľný univerzálny editor. Je vhodný pre tých, ktorí:

• pracujú v operačnom systému Microsoft Windows, • pracujú s obyčajným textom — vďaka širokým možnostiam formátovania textu, • tvoria webové stránky — obsahuje množstvo unikátnych, čas šetriacich funkcií • programujú a potrebujú IDE pre svoj kompilátor

Zadanie: Nainštalujte si program doma na svoj počítač. Zistite aká je najnovšia verzia programu. Podeľte sa spolužiakmi so skúsenosťami s inštaláciou.

Strana 4 z 12 Moderné vzdelávanie pre vedomostnú spoločnosť Projekt je spolufinancovaný zo zdrojov EÚ

Menu programu PSPad pozostáva: Súbor, Projekt, Úpravy, H ľadať, Zobrazi ť, Formát, Nástroje, Skripty, HTML, Nastavenie, Okno, Pomocník. Ako za čneme pracova ť v PSPad editore? z hlavného menu Súbor vyberieme Nový. Z ponuky nových súborov vyberieme typ súboru HTML. Otvorí sa so základnou kostrou jazyka HTML [obrázok 1]. Do časti <body> budeme vkladať (napíšeme) príkazy (tagy). Prácu si uľahčíme tak, že budeme tagy vkladať z ponukového menu príkazov, ktoré vyvoláme stlačením klávesovej skratky Ctrl + Space.

Obrázok 1


Úloha č.2 Vytvorte v časti <body> tabuľku.

<table border> <tr><th>Rok</th><th>Výnosy</th><th>Zisk</th></tr> <tr><td>2010</td><td>124 000 €</td><td>25 000 €</td></tr> <tr><td>2011</td><td>136 000 €</td><td>28 500 €</td></tr> <tr><td>2012</td><td>118 000 €</td><td>23 800 €</td></tr>

</table>

Porozmýšľajte, ako by ste zapísali príkazy pre tabuľku, ktorá by mala zlúčené bunky. Odrážky a číslovanie

� <ul> </ul> - odrážky

� <ol> </ol> - číslovanie

<li> - položka v zozname

Ak sa nezadá type je odrážka disk. Ak chceme nejakú inú je potrebné zadať k príkazu <li> parameter type=“..........“

Úloha č. 3 Napíšte do časti <body> text s odrážkami alebo s číslovaním.

<li type=“sguare“>jar</li> <li type=“sguare“>leto</li> <li type=“sguare“>jeseň</li> <li type=“sguare“>zima</li>

Premeňte odrážky na číslovanie. Porozmýšľajte o viacúrovňovom zozname.

Úloha č. 4 Vložte do súboru hypertextový odkaz.

Príkaz (tag), ktorý sa na to používa, je <a> </a>. Môže mať parametre podľa obrázka [obrázok 2].

Parameter TARGET môže mať niektorú zo štyroch hodnôt, ktorá špecifikuje, kde sa má nová stránka otvoriť.

Obrázok 2

Typ odrážky (Type) � square ■ � disk ● � circle ○


Úloha č. 5 v PSPad editore napíšte text do tela stránky (súboru html) podľa predlohy.

SOCIÁLNA KLÍMA ŠKOLY

Školskú klímu tvorí klíma triedy a klíma na vyučovaní.

Klíma triedy je sociálnopsychologická premenná, ktorá predstavuje dlhodobejšie

sociálno-emocionálne naladenie, zovšeobecnené postoje a vzťahy, emocionálne

reakcie žiakov v danej triede na udalosti v triede, vrátane pedagogického

pôsobenia.

Klíma na vyučovaní je ovplyvnená faktormi ako je celkové prostredie školy, jej

architektúra, typ školy a jej filozofia, organizačným a administratívnym chodom

školy, osobnosťou učiteľa (vek, pohlavie, postoje) a charakteristikami žiakov. Vyznačte pomocou tagov:

� Nadpisy <H1> </H1>, <H2> </H2> � Odseky <p> </p> � Oddeľujúce vodorovné čiary medzi odsekmi <hr> (tento tag nie je párový). � Uložte celý súbor pod názvom skuska.html

Tento nástroj na panely nástrojov ukáže vzhľad v internom prehliadači – F10

CSS - Cascading Style Sheets – kaskádové štýly

• CSS je deklaratívny jazyk

• Má jednoduchý a čitateľný syntax.

• CSS súboru hovoríme šablóna alebo štýl.

• Šablóna pozostáva z pravidiel (selektor, deklarácia, vlastnosť, hodnota) Úloha č. 6 Vytvorte v editore PSPad css súbor, ktorého obsahom bude jediný príkaz pre formátovanie odseku. Uložte ho pod názvom style.css.

p {color:red; font-size:34px; font-family: Arial}

Aby ste videli, ako ovplyvňuje css súbor predtým vytvorený súbor skuska.html, zapíšte do hlavičky súboru tento riadok (pod riadky meta... ).

<link rel="stylesheet" href="style.css" type="text/css">


Úloha č. 7 Do nového súboru fotogaleria.html vkladajte príkazy podľa obrázku. Výsledok je nasledovný: Fotografie vyberte z vášho disku.


Úloha č. 8 Opravte stránku tak, aby fotky v prvom riadku boli v strede buniek tabuľky. Fotka v druhom riadku nech má výšku ako fotky v prvom riadku a doplňte do prázdnej bunky fotku podľa predchádzajúcich požiadaviek.

Zobrazenie kódu v PSPad Vyskúšajte nástroje v menu HTML. Ako napr. Tagy veľkými písmenami a malými písmenami, Preformátovať HTML kód, Kompresia HTML kódu, Náhľad HTML stránky. Nachádza sa tu aj nástroj Kontrola HTML, ktorý skontroluje správnosť tagov a k nim nastavených vlastností.

Úloha č. 9 Skontrolujte správnosť HTML kódu. Chyby opravte. Obrázok 1- kontrola ukazuje takéto chyby. Opravte ich.

Poz. Ak Váš editor nezobrazuje riadky, zobrazte ich nasledovne:

a) Kliknúť do menu Zobrazi ť b) Vybrať z kontextového menu Čísla riadkov

Medzi nástrojmi v PSPad editore sa nachádza aj prepočet číselných sústav - desiatková na šestnástkovú a pod. (dokonca na rímske číslice).


Strana 9 z 23

Úloha č. 10 Nasledovné príkazy napíšte do nového súboru html. V niektorých riadkoch je chyba. Nájdite ju a vyznačte v pracovnom liste.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>

<style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style></head>

</body></html> </span> <body> <p>Example of unordered lists:</p> <ul class=a>

<li>Coffee</li> <li>Tea</li> <li>Coca Cola</li>

</ul> <ul class=b> </li> </ul>

<li>Coffee </li> <li>Tea</li> <li>Coca Cola

<p>Example of ordered lists: </p> <ol class=c> <li>Coffee </li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class=d> <li>Coffee </li> <li>Tea</li> <li>Coca Cola</li> </ol>

Example of unordered lists:

o Coffee o Tea o Coca Cola

� Coffee � Tea � Coca Cola

Example of ordered lists:

I. Coffee II. Tea

III. Coca Cola a. Coffee b. Tea c. Coca Cola

Výsledok, ktorý sa zobrazí po vytvorení html dokumentu


Strana 10 z 23

Rámy (frames)

• FRAMESET - v tejto značke sa definuje koľko bude rámcov (stĺpce-COLS, riadky-ROWS) a aké budú veľké (150 pixelov, 20% z celkovej šírky hlavného okna, * to čo zostane)

• FRAME - popis jednotlivých rámcov • NAME - meno rámca (využíva sa napr. v značke A) • SRC - stránka, ktorá sa má do rámca nahrať • NOFRAMES - v tejto časti sa definuje to, čo uvidíte v prehliadači, ktorý

nepodporuje rámce

Úloha č. 11 Vytvorte nový dokument html, v ktorom si precvičíte rámy. Uložte ho ako frames.html.

<FRAMESET COLS= "150,*,20%" >

<FRAME NAME= "vlavo" SRC= "cerveny.html" >

<FRAME NAME= "vstrede" SRC= "zeleny.html" >

<FRAME NAME= "vpravo" SRC= "modry.html" >

<NOFRAMES>

<P> Váš prehliadač nepodporuje rámce </P>

</NOFRAMES>

</FRAMESET> Úloha č. 12 Zo stránky http://tvorbawebu.php5.sk/html-kody/odkazy-v-html vložte do súboru frames.html hodiny (podľa vlastného výberu).

Ďalšie nástroje v programe PSPad Pomocou PSPad editora môžeme stránku aj publikovať - FTP nástroj.

Hľadať a nahradiť text Skryté znaky (enter a pod.)

Zapne alebo vypne zvýrazňovanie syntaxu


Strana 11 z 23

Zhrnutie! PSPad editor umožňuje vytvárať HTML, CSS a PHP súbory.

PHP + HTML + CSS sú najpoužívanejšie technológie internetu (rok 2014).

PHP PHP skript je vlastne obyčajná WWW stránka doplnená o špeciálne príkazy. Aby server vedel, že nebude mať do činenia len s obyčajnou WWW stránkou, používajú sa odlišné prípony. Klasická WWW stránka má príponu .html alebo .htm, stránka v jazyku PHP by mala mať príponu .php, alebo .phtml. Skript v PHP je v podstate textový súbor. Tento súbor obsahuje mix kódu HTML a PHP. Pretože býva uložený v HTML dokumente, treba WWW serveru jasne vymedziť, odkiaľ ide o skript PHP a kde náš skript končí. Na to slúžia znaky ‘ <? ?>’ resp. ‘ <?php’ a ‘?>’.

Zadanie: Nájdite v zadanom súbore časť PHP. Viac o PHP na internete.

<!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Priklad PHP</title> <meta content="text/html; charset=windows-1250" http-equiv="Content-Type"> </head> <body> <? ?> </body> </html>


Strana 12 z 23

WEB a webové technológie Rodina webových technológií sa stále rozrastá a mení, vývoj napreduje,

prichádzajú nové technológie. Navyše, web je značne heterogénne prostredie, a žiadnu z webových technológií nemožno považovať za univerzálny liek. Podstata kvalitných webových aplikácií (stránok) často tkvie práve v správnej kombinácií rôznych webových technológií. Web sa za relatívne krátku dobu veľmi zmenil. Predchádzajúce statické stránky nabrali dynamiku a premenili sa na interaktívne aplikácie. Webové technológie 2014:

HTML5 sa stáva štandardom v prehliadačoch a prináša tak nové netušené možnosti. Spolu s ním sa neustále implementujú i novinky z CSS3, rozvíjajú sa webové fonty, JavaScript získava na popularite so svojou knižnicou jQuery, imple-mentujú sa Google Maps API, Open Graph API a vytvárajú sa kdejaké iné API (viď ilustračný obrázok).

1. HTML5 (Pre vývojárov webu bude život s HTML5 j ednoduchší.) Niektoré zmeny:

1. Nová sémantika (tagy header, footer, nav, articl e, section, aside, time, …). Vďaka nim bude kód prehľadnejší a Google robot dokáže lepšie určiť, čo sa kde na webe nachádza.

2. Nový tag canvas. Pomocou Javascriptu môžeme kresliť grafické útvary priamo do webovej stránky, spôsobom, akým sa to robí v mnohých programovacím jazykoch.

3. Tagy video a audio. Tieto tagy umožnia ľahšie pracovať s multimediálnym obsahom.

A ďalšie vylepšenia. Ľahšie sa bude pracovať s formulármi, pretože pribudli rôzne typy <input>.

http://www.w3schools.com/html/html5_intro.asp a http://www.html5rocks.com/en/

Štruktúra (základná kostra) HTML5 (dokumentu) by mala vyzerať nasledovne: <!DOCTYPE html> <html lang="sk" dir="ltr"> <head> <meta charset="UTF-8"> <title >Titulok stránky</title > </head> <body > Telo stránky </body > </html >


Strana 13 z 23

Úloha č.13 Vytvorte jednoduchú stránku v html 5 (napr. v PSPad editore), ktorá bude predstavovať fotogalériu. Fotogaléria nech obsahuje minimálne 9 fotografií (napr. zo stránky školy).

1. Fotografie nájdite a uložte do jedného priečinka na disk počítača a vytvorte ku každej aj malú verziu v niektorom grafickom editore.

2. Využite na usporiadanie fotografii v súbore html tabuľku. 3. Do buniek tabuľky pod fotografie napíšte popis (čo sa na nej nachádza). 4. Kliknutím na malú verziu fotografie v tabuľke nech sa zobrazí veľká verzia

v novom okne prehliadača. 5. Pre lepšie usporiadanie html dokumentu využite nové tagy HTML5. Napríklad

tagy pre definovanie hlavičky, päty (tu môžete napísať údaje o autorovi dokumentu, dátume vytvorenia, a pod.).

Novinky v CSS3 Za najväčší pokrok v CSS môžeme považovať všetky vymoženosti, ktoré sa týkajú grafických prvkov. Najdôležitejšie sú tieto:

1. border-radius: zaoblenie rohov objektov (použitie na tagoch div, img, …)

2. box-shadow: vytvorí tieň prvkov (napr. div, img, …)

3. text-shadow: vytvorí tieň textu

4. RGBA: klasický model zápisu farby v RGB, ale pridané a určuje priehľadnosť (možno použiť na čokoľvek, čomu sa nastavuje farba – pozadie, ohraničenie, text, …)

5. transitions: animované zmeny (umiestnenie kurzora myši na prvok) alebo iná zmena napr. zmena veľkosti alebo polohy, …

6. transform: transformácia objektov – otočení ikonky o 90°, prehnutie do priestoru apod.

7. selectors: väčšia možnosť výberu elementov (napr. element, ktorého hodnota atribútu končí/obsahuje/začína na „val“ a pod.)

8. @font-face: vkladanie mnohých fontov

Viac o CSS3: http://www.w3schools.com/css3/ , http://css3generator.com/

Responzívny webdesign

Responzívny web je taký web, ktorý sa správne zobrazí na zariadeniach každej veľkosti (PC, tablet, smartphone). Vždy si automaticky upraví rozmery a usporiadanie prvkov podľa rozlíšenia zariadenia, cez ktoré na neho pristupujeme. Základy responzívneho webu sa objavili už v tej dobe, keď sa začala šírka v CSS zadávať v percentách (width: 100%). Táto úprava však už dnes väčšinou nestačí.

Responzívny webdesign: http://blog.teamtreehouse.com/beginners-guide-to-responsive- web-design


Strana 14 z 23

Font icons

Pekné ikonky v minimalistickom štýle. Nepoužívajte rastrové ikonky ale vektorové. Chovajú sa ako font (teda text). Funguje to ako pri bežnom texte – stačí len zmeniť CSS štýl a všetko prebehne bez straty kvality. Ako sa takéto ikonky do web stránky integrujú? Je to podobne jednoduché ako pri @font-face.

Najznámejším ikonovým fontom je Font Awesome , ale Google je plný fontov ikoniek pre weby, takže stačí trochu hľadať a môžete si vybrať, ktorý sa vám bude páčiť.

Poznámka: Tvorba webových stránok nie je len otázkou programátorských síl, ale aj grafických kúziel. Na tvorbe jednej webovej stránky sa podieľajú „dvaja ľudia“ a to grafik a programátor. Grafické práce sú neoceniteľné a vyžadujú aj prirodzený talent.

Úloha č. 14 Hľadajte na internete fonty ikoniek a použite z niektorého aspoň štyri ikonky vo svojom webe.

Vráťme sa ešte k HTML5.

<!DOCTYPE...>

Tento riadok určuje použitú verziu HTML resp. špecifikácia dokumentu a v HTML5 je aj tu zmena. Zápis sa oproti predchádzajúcim verziám skrátil. Nie je potrebné udávať dlhé zápisy o verzii a DTD špecifikácii dokumentu.

Toto je nový zápis......................<!DOCTYPE html>

Výhodou je, že všetky dnešné prehliadače novému zápisu rozumejú a stránky zobrazia v štandardnom zobrazovacom režime.


Strana 15 z 23

Jazyk dokumentu a kódovanie

Určenie jazyka dokumentu, ktoré sa zadávalo v značke metadát content-language sa teraz zadáva len veľmi jednoducho pri tagu <html>.

Údaje o kódovaní dokumentu sa zapisujú oproti skoršiemu dlhšiemu zápisu <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> v HTML5 pomocou jednoduchého riadka <meta charset="UTF-8"> Kódování samozřejmě může být i jiné. v uvedeném příkladu jsou také údaje o směru psaní textu podle jazyka. Ltr znamená zleva doprava (left to right), zprava doleva je to pak rtl(right to left).

jQuery je rýchla a presná JavaScript knižnica, ktorá zjednodušuje v HTML dokumente udalosti, manipuláciu, animáciu a Ajax pre rýchly vývoj webovych aplikácií. jQuery je určený pre zmenu spôsobu, akým píšete JavaScript. http://jquery.shaddow.sk/dokumentacia

Úloha č. 15 Opíšte v PSPad tieto príkazy a zoznámte sa s nimi. Sú to príkazy pre vytváranie formulárov

<form action="" method="post">

<input type="datetime" name="" value="">

<input type="date" name="" value="">

<input type="month" name="" value="">

<input type="week" name="" value="">

<input type="time" name="" value="">

<input type="number" name="" value="">

<input type="range" name="" value="">

<input type="email" name="" value="">

<input type="url" name="" value="">

<input type="search" name="" value="">

<input type="color" name="" value="">

</form>

Úloha č. 16 Preložte výukové videá zo stránky www.littlewebhut.com (najprv do textového súboru, potom aj ako titulky.)

http://www.youtube.com/watch?v=YcApt9RgiT0&src_vid=9gTw2EDkaDQ&feature=iv&annotation_id=annotation_3864684493


Strana 16 z 23

Aké nástroje (editory, buildery) použi ť na tvorbu webu? Na strane 2 sú uvedené základné nástroje na tvorbu webu. Teraz sa zameriame na editory HTML5. Na internete nachádzame Open sourse Raptor editor . Tento editor patrí do skupiny wysiwyg editorov. WISIWYG je akronym anglickej vety "What you see is what you get", po slovensky "čo vidíš, to dostaneš".

Ďalší editor, ktorý je ovládaním podobný na programy Office od Microsoftu je WYSIWYG Web Builder 9 . www.wysiwygwebbuilder.sk Je vizuálny webový editor pre vytváranie webových stránok. Súčasťou programu je aj FTP klient prostredníctvom ktorého hotové stránky rovno publikujete na web.


Strana 17 z 23

Úloha č. 17 Vypracujte referát o najlepších web editoroch ponúkaných v súčasnosti. Referát vytvorte v textovom editore. Strany očíslujte.

www.wix.com

http://www.coffeecup.com


Strana 18 z 23

Browsery – Prehliada če

Čo je to prehliada č? Prehliadač slúži na vyhľadávanie a preskúmavanie stránok na internete (je to podobné, ako keď si prehliadate knihy v knižnici). Prehliadač je typ softvéru v počítači a slúži na prístup k internetu. Funguje v podstate ako okno, v ktorom sa zobrazujú rôzne webové stránky s informáciami. Stačí, aby ste do prehliadača zadali webovú adresu, a dané webové stránky sa vám ihneď zobrazia. Typy prehliadačov:

• Firefox Mozilla 27.0 - Program plne podporuje HTML5, CSS3, WebGL, Audio API, plnú podporu HD videa (videá s vysokým rozlíšením ) a multitouch ovládanie. Program taktiež podporuje anonymné surfovanie.

• Google Chrome 35 - vysoký výkon pri spracovaní Java Script obrázkov a prvkov HTML5.

• Opera 19 - Okrem toho že je rýchly, disponuje aj veľkým množstvom funkcií ( RSS čítačka, poštový klient, blokovanie POP-UP... )

• Safari 5.1.7 od Aplle • Internet Explorer 11 - podpora tagov HTML5, CSS3 atď. • Comodo Dragon 16.2.1 • SRWare Iron 5.0 • Amaya 11.3.1 – od W3C • KidZui 5 – pre deti od 3 do

12 rokov • Wyzo 3.6.4 – so zameraním na

rýchle sťahovanie

Viac informácií nájdete na: http://downloads.zoznam.sk http://sk.wingwit.com/Siete/other-computernetworking/77506.html#.U7qGqLEjmZQ

Ovládanie prehliada ča Firefox Mozilla klávesovými skratkami


Strana 19 z 23

Po kliknutí na webovú konzolu sa spustí okno konzoly, kde je možné sledovať chyby, upozornenia a záznamy k zobrazenej stránke. Chyby je možné sledovať v týchto segmentoch. Ďalej je možnosť zobraziť a editovať css štýly (čiže súbory css, ktoré sú k danej stránke priradené). Ku konzole sa dostaneme aj cez kontextové menu – Preskúmať prvok - po kliknutí pravým tlačidlom myši na stránku


Strana 20 z 23

Úloha č. 18 Wodprocessing - Hromadná korešpondencia Wordprocessing je tiež jednou zo súťažných disciplín spracovania informácii na počítači. Pripravte menovky pre súťažiacich na Celoslovenskom kolo SIP, ktoré sa uskutoční na našej škole v Rožňave. Menovky budú široké 9,5 cm a vysoké 5 cm. v hornej časti v strede bude napísané Celoslovenské kolo SIP písmom Calibri, veľkosť 12 b. tmavomodrá farba. Pod týmto textom bude Rožňava 2015 tak isto ako predchádzajúci riadok. Na pravej strane zvislo v strede bude logo našej školy široké 2 cm a pomer jeho strán bude zachovaný. v ľavo cca. vo vzdialenosti jedného tabulátora od okraja menovky bude meno a priezvisko súťažiaceho. Pod ním škola, na ktorej študuje a pod ňou mesto. Meno, priezvisko a škola bude napísaná písmom Calibri, veľkosť 16 bodov, tučné, tmavomodrá farba (tmavšia 25%). Škola bude napísaná písmom Calibri, veľkosť 13 bodov, farba tmavomodrá (svetlejšia 40%), tučné. Menovky orámujte zaobleným obdĺžnikom veľkosti 9 x 4,5 cm. Typ čiary obdĺžnika dvojitá, hrúbky 4 b., farba tmavomodrá viď [obrázok 3]. Menovku vylepšite trojuholníkom podľa predlohy. Vytvorte súbor sutaziaci.xlsx, do ktorého uložíte údaje podľa [obrázka 4] (aspoň 16 súťažiacich, môžete zapísať aj iné mená a iné školy). Zlúčený dokument uložte pod názvom menovky_SIP.docx i nezlúčený dokument pod názvom pracovny-menovky.docx. Celoslovenské kolo SIP Rožňava 2015

Juraj Benko Obchodná akadémia

Rožňava

Obrázok 3

Obrázok 4


Strana 21 z 23

Úloha č. 19 Úprava už upraveného textu 1. Otvorte súbor nucem.docx a uložte pod menom.upraveny_nucem.docx

2. Do poľa Autor vo vlastnostiach dokumentu vložte adresu www.nucem.sk

3. Nadpisy prvej úrovne nech nezačínajú na novej strane, ale nech majú medzeru pred odsekom veľkosti 30 bodov.

4. Nadpisy prvých dvoch úrovní naformátujte písmom Arial Black v dvoch rôznych odtieňoch zelenej farby. Orámujte čiarou príslušnej farby nadpisu, hrúbka čiary 1b.

5. Zmeňte font základného textu na Arial, veľkosť 11 bodov.

6. Na všetky strany okrem prvej vložte obrázok do pozadia tak, aby bol široký 10 cm a pomer strán bol zachovaný. Nájdete ho na strane 2 toho istého dokumentu.

7. Do päty vložte obdĺžnik veľkosti 16 cm x 1,5 cm (naležato), prechod farieb zo svelooranžovej do tmavšej (podľa farby použitej v dokumente).

8. Do hlavičky vložte text z prvého riadku zo strany 3.

9. Všetky výskyty slova „Komentár“ so znakom pera na začiatku zvýraznite tučným písmom.

10. Dokument nesmie obsahovať prázdnu stranu. Uložte ho.

Ak potrebujeme vložiť do dokumentu autora:

1 2

3


Strana 22 z 23

Kontingen čné tabu ľky v Exceli Kliknite na kartu Vložiť a tu sa nachádza ako

prvá možnosť Kontingenčná tabuľka, ktorá po kliknutí na rozbaľovacie menu dovoľuje vytvoriť kontingenčnú tabuľku alebo kontingenčný graf (graf sa vytvorí zároveň s tabuľkou). Vedľa tlačidla Kontingenčná tabuľka sa nachádza tlačidlo Tabuľka, ktoré v podstate nastaví pôvodnú tabuľku tak, akoby

sme klikli na kartu Údaje a nastavili by sme filter. Treba si uvedomiť, že kontingenčnú tabuľku robíme vtedy, ak už máme zozbierané údaje a uložené napr. v excelovskej tabuľke (napr. veľký rozsah údajov) a potrebujeme z nej niečo rýchlo zosumarizovať podľa nejakého kritéria napr. tržby za predajcov, náklady za obdobia a pod. Postup:

1. Máme údaje. Klikneme Vložiť – Kontingenčná tabuľka.

2. Ukáže sa nám okno podľa obrázka 5, v ktorom potvrdíme z akých údajov budeme vytvárať kontingenčnú tabuľku (najlepšie je nechať všetky údaje). Ešte vyberáme miesto, kde chceme tabuľku vytvoriť – nový hárok alebo konkrétny existujúci.

3. Po odkliknutí OK sa ukáže obrázok 6, v ktorom je napísané čo máme robiť a ktorý zmizne, len čo to urobíme. T. z. zaklikneme, ktoré polia vyberáme a chceme mať zosumarizované [obrázok 7].

4. Zakliknutím napr. na polia: Rozsah zákazky, Dátum zahájenia, Rozpočet aktu-alizovaný budeme mať kontingenčnú tabuľku viď obrázok 8, v ktorej sú spočítané aktualizované rozpočty podľa kategórii zákaziek (malá, stredná, veľká). Táto tabuľka predstavuje výslednú kontingenčnú tabuľku.

Obrázok 5


Strana 23 z 23

Úloha č.20 Z programu OMEGA vyexportujte údaje došlých faktúr resp. export knihy záväzkov do programu Excel. z týchto údajov vytvorte kontingenčnú tabuľku. v tabuľke zobrazte fakturované sumy spolu za jednotlivých dodávateľov. Výsledok je zobrazený tu:

Obrázok 8

Obrázok 6

Obrázok 7

Documents

CVI ČENIA Z APLIKOVANEJ INFORMATIKYCoca Cola Example of ordered lists: I. Coffee II. Tea III. Coca Cola a. Coffee b. Tea c. Coca Cola Výsledok, ktorý sa zobrazí po vytvorení html