Redesign webové stránky

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

Download "Redesign webové stránky www.jinov.cz"

Transkript

1 Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Vyšší odborná škola informačních sluţeb v Praze Martin Voldřich Redesign webové stránky Bakalářská práce

2 Prohlášení Prohlašuji, ţe jsem bakalářskou práci na téma Redesign webové stránky zpracoval samostatně a pouţil pouze zdrojů, které cituji a uvádím v seznamu pouţité literatury. V Praze dne Martin Voldřich 2

3 Poděkování Rád bych poděkoval Ing. Radimu Čermákovi za ochotu, trpělivost a věcné připomínky, kterými mi výrazně pomohl při vypracování této bakalářské práce. Dále bych chtěl poděkovat firmě Jinova s.r.o., potaţmo jejím zaměstnancům za poskytnutí webové stránky pro realizaci redesignu. Osobní poděkování patří mé rodině a všem přátelům, kteří mě po celou dobu studia plně podporovali. 3

4 Abstrakt Cílem mojí práce je na základě teoretických poznatků navrhnout a realizovat redesign internetové stránky firmy Jinova s.r.o. Stránka bude ve výsledku obsahovat moderní design, nové funkcionální prvky, kvalitní informační design, jednoduchý redakční systém a v neposlední řadě moderní SEO optimalizaci. Nejprve bude nutné analyzovat současnou webovou stránku a určit její silné a slabé stránky. Na základě výsledků analýzy vznikne nový vzhled, nová funkcionalita, nově strukturovaný obsah a nově také základní SEO prvky. V praktické části bude problematika řešena pomocí návrhu a na kódování originálního webdesignu a za pomoci jazyků HTML, PHP, SQL s vyuţitím kaskádových stylů CSS. Jak současná, tak mnou vytvořená verze webové stránky se bude krátký čas analyzovat. Výstupem této analýzy by mělo být posouzení délky pobytu návštěvníků mezi původní a mnou vytvořenou webovou stránkou. 4

5 Abstract Primary goal of this work, based on my theoretical knowledge, is to redesign and implement Jinova Ltd. websites. At first it will be necessary to analyze current website condition and determine its strengths and weaknesses. As a result, these pages will contain new functional elements, high-quality information design, simple editorial management and finally modern SEO optimalization. This issue will be solved in the practical part by reforming the original webdesign using HTML, PHP, SQL languages and Cascading Style Sheets (CSS). Both the original site and the new one, created by me, will go through a short-term analysis. The outcome of this analysis will be an assessment of both versions in aspect of visitors' length of stay on these websites. 5

6 Obsah POUŽITÉ ZKRATKY ÚVOD TEORETICKÁ ČÁST - VYMEZENÍ POJMŮ ZÁKLADNÍ GRAFICKÉ POJMY Pixel Typy vykreslovacích stylů Bitmapová grafika Vektorová grafika Barevné modely RGB CMYK Formáty obrázků JPG PNG Fonty písma Software Grafický software Software pro editaci kódu ZÁKLADNÍ POJMY FUNKCIONÁLNÍ ČÁSTI HTML Základní HTML Tagy Základní příkazy PHP Základní PHP skripty MYSQL Základní MYSQL příkazy jquery Kaskádové styly CSS ÚVOD DO SOUČASNOSTI

7 3.1 PRVNÍ NÁVŠTĚVA HLEDÁNÍ OBSAHU ROZDÍL PRVNÍ A OPAKOVANÉ NÁVŠTĚVY ORIENTACE NA WEBOVÉ STRÁNCE ČTENÍ NEBO PROHLÍŢENÍ OBSAHU WEBOVÉ STRÁNKY? REDESIGN ÚČEL GRAFICKÉ ČÁSTI WEBOVÉ STRÁNKY SÉMANTIKA INFORMAČNÍ DESIGN DŮLEŢITÉ PRVKY STRÁNKY Kompozice Optický střed KOMPOZICE TEXTU Zápatí a záhlaví Zápatí Záhlaví Navigace Kontrast BARVA A JEJÍ VLASTNOSTI Tón barev Světlost barvy Sytost barev Barevné odstíny Rozdělení barev Zlepšení přehlednosti ANALÝZA A SPECIFIKACE POŽADAVKŮ ANALÝZA SOUČASNÉHO STAVU POŢADOVANÁ FUNKCIONALITA Diagramy PRAKTICKÁ ČÁST Úvod Návrh

8 5.2 SAMOTNÁ TVORBA Volba barvy Optický střed Záhlaví Zápatí Některé další grafické prvky Logo Ostatní grafické prvky Navigace SÉMANTIKA FUNKCIONALITA Banner MYSQL Zakládání tabulek Zobrazení dat Vkládání Mazání záznamů POPIS PHP APLIKACÍ Aplikace pro přidávání referencí Zobrazení referencí Přidání referencí, strojů a technologií Zobrazení referencí, strojů a technologií Systém pro načtení a následnou interpretaci dokumentů Aplikace pro zaloţení galerií ZÁVĚREČNÁ ANALÝZA ZÁVĚR SEZNAM LITERATURY A POUŽITÝCH ZDROJŮ SEZNAM PŘÍLOH

9 Použité zkratky CMYK - Cyan, Magenta, Yellow, Black model CS5 - Creative Suite 5 CSS - Kaskádové styly GIF - Graphics Interchange Format HTML - HyperText Markup Language ISO - International Organization for Standardization JPG - Joint Photographic Experts Group JQuery - JavaScript framework M+R - Sestavné větrací a vytápěcí jednotky MTP - Kompaktní ohřívače vzduchu MYSQL - My Structured Query Language PHP - Hypertext Preprocessor PNG - Portable Network Graphics. RGB - Red Green Blue model SEO - Search Engine Optimization SQL - Structured Query Language SŘBD - Systém řízení báze dat UML - Unified Modeling Language URL - Unique Resource Locator 9

10 10

11 1 Úvod Téma redesign jsem si vybral za účelem spojení znalostí získaných při studiu a znalostí získaných mimo školní výuku. Během studia jsem se naučil vytvářet statické a dynamické webové aplikace. Mimo školu se jiţ několik let zajímám o tvorbu webové grafiky, kterou bych chtěl implementovat do internetové stránky. Celá práce by měla dokázat odpovědět na otázku: Proč je stejně důleţitý vzhled stránky jako její obsahová a funkční část. Teoretická část bude obsahovat některá obecná ustanovení, která nám řeknou, jak vytvořit působivý design a přesto neporušovat pravidla, při tvorbě moderní webové aplikace. V praktické části bude předělána stránka tak, aby vyhovovala současným trendům a funkcím. Hlavními prvky výsledné webové stránky budou: grafický návrh, informační design a nová funkcionalita vytvořená v kódu HTML, s prvky Java skriptů, PHP kódu s vyuţitím databázového jazyka MYSQL a kaskádových stylů CSS. Vzhled nové stránky bude tvořen kombinací estetické grafiky, lépe strukturovaného obsahu a moderní funkčnosti. Praktickou část rozdělím na několik kapitol, které vyuţiji při tvorbě webové stránky. Kapitoly se postupně zabývají aplikací teoreticky získaných zkušeností do praxe. V bakalářské práci jsem se zaměřil na pro mě tři nejdůleţitější prvky: Tvorbu vizuálního vzhledu, funkcionalitou celé aplikace a v neposlední řadě sémantiku. Všechny grafické i funkcionální prvky budou obsaţeny v datové příloze bakalářské práce. 11

12 2 Teoretická část - Vymezení pojmů V této části bych se chtěl věnovat vysvětlením některých důleţitým pojmům z oboru vývoje webových aplikací a grafiky. 2.1 Základní grafické pojmy Pixel Nejmenší jednotka digitální grafiky. Reprezentuje jeden barevný bod tištěného dokumentu nebo jeden svítící bod na obrazovce Typy vykreslovacích stylů Počítač zpracovává obrázkové informace dvěma základními způsoby. První technologie se nazývá bitmapová a druhá vektorová Bitmapová grafika Bitmapová grafika je tvořená malými čtverečky, kterým se říká pixely. Kombinace většího počtu těchto uspořádaných barevných čtverečků vytváří smysluplný obraz. Kaţdý čtvereček má určitou číselnou hodnotu, která určuje barvu. Optimální příklad bitmapového obrazu je fotka. V některých zdrojích se bitmapové grafice říká rastrová Vektorová grafika Obraz ve vektorové grafice je definován vektorem. Tedy počátečním bodem, směrem a délkou cesty křivky. Tvar křivky je určen body, které jsou umístěny podél cesty. Data o umístění a délce křivky jsou reprezentovány číselnými hodnotami. Dále se k těmto hodnotám přidávají hodnoty definující barvy a tloušťky čar. Vektorové obrázky obsahují pouze popis hodnot jednotlivých bodů, proto je hlavní výhoda libovolné zmenšování či zvětšování bez ztráty kvality. Spojením několika křivek dosáhneme vytvoření smysluplného obrázku. Srovnání vektorové i bitmapové grafiky jsem znázornil na obr č

13 Obr č. 1. Rozdíl vektorové a bitmapové grafiky Barevné modely Barevný model slouţí k popisu základních nebo respektive míchaných barev. Skládá se vţdy ze čtyř částí. První část tvoří dopadající světlo a další tři části pak dané barvy RGB Barevný model RGB (Red, Green, Blue červená, zelená, modrá; viz obr. č. 2) je zaloţen na třech základních barvách, jejichţ skládáním můţeme získat všechny ostatní barvy. Barevný model RGB odpovídá barevným receptorům lidského oka. Model RGB je ideální pro zobrazení barev na obrazovce nebo monitoru. V barevném modelu RGB se na rozdíl od modelu CMYK barvy přidávají k černé. Základní barvy schématu svítí na černé stínítko a tím zobrazují danou barvu. Čím se přidá větší počet barev, tím se výsledek víc blíţí k bílé. Obr č. 2. RGB model. 13

14 CMYK Barevný model CMYK (Cyan, Magenta, Yellow, Black azurová, purpurová, ţlutá černá; viz obr. č. 3) je zaloţený na vyuţití čtyř tiskových barev. V barevném modelu CMYK se pro zobrazení barev vyuţívá opačný postup, respektive barvy se přidávají k bílé. Vyuţití barev závisí na předpokladu bílého pozadí. Pozadí odráţí všechny barvy na něj dopadající. Čím větší je nanesená vrstva barev, tím se dostáváme blíţe k černé. V praxi se CMYK vyuţívá pro téměř veškeré tiskové stroje. Obr č. 3. CMYK model Formáty obrázků Formát je způsob organizace dat uloţených ve formě souboru. Soubory digitálních obrázků lze ukládat hned několika formáty např.: JPG, PNG, BPM a mnoho dalších. Zaměřím se však jen na formáty, které jsem vyuţil při tvorbě praktické části JPG Nejrozšířenější formát pro vizuální reprezentaci bitmapových obrázků. Jedná se o ztrátový formát, kde výsledná kvalita obrázku závisí na míře komprese. Ztrátová komprese můţe být pouţita záměrně, ale častěji se jedná o neţádoucí vlastnost. Barevná hloubka formátu JPG je 16.7 milionu barev, proto se stala ideální pro reprezentaci fotek. Formát JPG neumoţnuje průhlednost ani polo průhlednost obrázků. 14

15 PNG Formát PNG vyuţívá vylepšený bezztrátový systém komprese. Barevná hloubka je aţ 48bitů, jenţ odpovídá počtu barev. Přesto se PNG nejčastěji vyuţívá s hloubkou 24b, coţ odpovídá 16.7 milionu barev. Hlavní výhodou oproti formátu JPG je, ţe PNG disponuje osmibitovou průhledností. Objekt se tak můţe stát polo nebo zcela průhledným. Vlastnosti PNG formátu umoţní zapisovat obrázky s dokonalou přesností a průhledností. Přesto je na některých velkých barevných plochách vhodnější vyuţit formát JPG, zejména kvůli datové velikosti Fonty písma Písmo se pouţívá na vizuální zápis jazyka se symboly[1]. Písma se rozdělují do dvou základních skupin. První skupina se nazývá patková a druhá bezpatková. V současné době existuje nespočet druhů písmen. Pro webové účely se pouţívají zásadně písma, která podporuje nejrozšířenější operační systém windows. Jsou to písma typu: ARIAL, Verdana, Tahoma, Times new roman, Georgia, Courier, Comic sans MS Software Grafický software Adobe Fireworks CS5 Aplikace Adobe Fireworks je víceúčelový nástroj pro vytváření, úpravy a optimalizaci webové grafiky. S jeho pomocí lze vytvářet a upravovat jak vektorové, tak bitmapové obrazy, navrhovat webové efekty (efekty přechodu a rozbalovací nabídky), ořezávat a optimalizovat grafiky, popřípadě zmenšit velikost cílového souboru. Čas je ušetřen automatizací opakujících se úkolů. Dokument lze exportovat nebo vložit jako soubor JPEG, GIF, nebo v jiných formátech. Tyto soubory lze uložit společně se soubory HTML obsahujícími tabulky HTML a kód JavaScript tak, aby je bylo možné používat na webu [2]. 15

16 Software pro editaci kódu Adobe Dreamweaver CS5 Adobe Dreamweaver nabízí podporu nejnovějších standardů, kombinací nástrojů a funkcí. Dále návrh webových stránek, vývoj dynamických aplikací či přímou práci s kódem. Umožňuje vytvářet weby, které vyhovují současným standardům. Navrhovat webové stránky lze vizuálně, nebo přímo psaním kódu. Vyvíjet jdou stránky se systémy pro správu obsahu a díky integraci se službou Adobe BrowserLab, která je součástí online služby Adobe CS Live, lze testovat kompatibilitu s prohlížeči. Pomocí funkce Live View můžeme vidět prováděné změny v HTML či CSS v reálném čase. V nabídce je split režim, kde jsou k dispozici dvě okna. Jedno obsahuje grafiku, druhé zdrojový kód stránky. Nebo také efektivní našeptávač, usnadňující psaní kódu [3.] 2.2 Základní pojmy funkcionální části HTML HTML (HyperText Markup Language) je značkovací jazyk pro tvorbu webových stránek. Jako kaţdý jiný jazyk, tak i HTML jazyk obsahuje tagy neboli značky. Spojením HTML tagů s obsahovou sloţkou dostává stránka význam. V současnosti byla uvedena do provozu revoluční verze HTML Základní HTML Tagy HTML tagy neboli znaky se zapisují do hranatých závorek a vkládají se před a případně za obsahovou část. U některých syntaxí se vyuţívají atributy neboli vlastnosti zapsaného tagu. Tagy se dále rozdělují na párové a nepárové. Párová značka Tag <div> značí začátek. Taga </div> určuje konec. Mezi začátek a konec tagu se vkládá obsahová část. Nepárová značka Značka <br /> obsahuje začátek i konec tagu. 16

17 Základní příkazy Znakových tagů v HTML jazyce existuje celá řada. V bakalářské práci se zaměřím pouze na ty základní, případně na ty, které jsem vyuţil v praktické části. Znak <html></html> určuje začátek a potaţmo konec stránky. Tagy <head></head> slouţí k oddělení hlavičky webové stránky. Tag <body></body> slouţí k oddělení těla webové stránky. <h1></h1> Nadpisy se zapisují tagy h1, h2, h3, h4, h5 a h6. h1 je nadpis první úrovně zatímco H6 je nadpis nejniţší úroveň. Nadpisy dále přestavují nejvýznamnější komunikační faktor s vyhledávači. Nadpisy úrovně <h> musí odpovídat obsahu webové stránky a tím jí zajistit kvalitní za indexování. Tag <p></p> slouţí k oddělení samotného odstavce. Značka <br /> zajištuje zalomení textu. Tagy <b></b> označují tučné písmo (Bold) <div> Div je úsek stránky, kde se můţou nacházet texty, formuláře, obrázky atd. Tento tag se nejčastěji vyuţívá s kombinací kaskádových stylů. Tag <a> znázorňující odkaz, ke kterému neodmyslitelně patří atribut href. Značka <img> pouţíváme pro vkládání obrázků. <ul> <li> </li> </ul> Tag <li> označuje jednotlivé poloţky v seznamu. Tag <ul> se vyuţívá pro vytvoření seznamu poloţek. 17

18 <table> <tr></tr> <td></td> <th></th> </table> Tag <table> vytváří tabulku. Tagy <tr> <th> tvoří elementy záhlaví a zápatí tabulky. Tag <td> se pouţívá u tabulek k vytváření jednotlivých buněk. Zmíněné syntaxe v praxi vlastní hned několik atributů PHP PHP (Hypertext Preprocessor) je skriptovací jazyk, který je určen pro tvorbu dynamických internetových stránek. Veškeré procesy PHP kódu jsou prováděny na straně serveru a uţivateli poskytnou aţ výsledek činnosti, coţ deklaruje bezpečnost naší aplikace. PHP je technologie, která je volně šiřitelná a je nezávislá na technologické platformě. PHP se často kombinuje s ostatními kódy jako například HTML, MYSQL atd Základní PHP skripty Stejně jako v HTML existuje celá řada skriptů v PHP. V bakalářské práci se zaměřím pouze na ty základní, případně na ty, které jsem vyuţil v praktické části. <?php?> Tag určující část, kam se vkládá php syntaxe. ECHO text ; Nejčastěji pouţívaných příkaz, který má za úkol vytisknutí jednoho či více řetězců. Require (umístění); Příkaz slouţící k načtení skriptu z jednoho souboru do jiného. Uţívá se hlavně, pokud se vyuţívá stejná funkce ve více skriptech. Změna provedená v requirovaném souboru, se projeví ve všech souborech, kde je vloţený daný příkaz require(). Vyskytuje se hlavně u opakovaných příkazů jako například: menu, připojení k databázi, atd. 18

19 If, else (podmínka) Příkaz if, else je jeden z nejčastěji vyuţívaných příkazů v jazyce PHP. Příkaz zjišťuje, zda je daná podmínka pravdivá. Pokud ano spustí proces 1, ve všech ostatních případech spustí proces 2. V některých případech se cyklu přidává příkaz elseif. Příkaz elseif umoţňuje odpovídat na několik podmínek. if { spustí se proces 1} else { spustí se proces 2 } $proměná Proměnná nebo také proměnlivá hodnota slouţí k uchování řetězců či hodnot. V Php jazyce proměnná funguje podobně jako paměť. Databáze Databáze je strukturovaný soubor dat. S pojmem databáze je úzce spjat pojem SŘBD (systém řízení báze dat). SŘBD je nástroj, kterým můţeme data v databázi ukládat, mazat nebo měnit MYSQL MYSQL je nejpouţívanější relační SŘBD pro internetové aplikace. Komunikace bází probíhá pomocí jazyka SQL. Hlavní výhoda MYSQL je moţnost přímé komunikace s jazykem PHP Základní MYSQL příkazy Následně bych chtěl shrnout jen několik základních příkazů nebo pojmů, které jsem vyuţil v praktické části bakalářské práce. CREATE table produkty; Při pouţití příkazu zaloţíme tabulku s názvem produkty. Drop table produkty; Tento příkaz smaţe tabulku produkty. 19

20 Select * from produkty; Tento příkaz vybere všechny data z tabulky produkty. insert into produkty (nazev) values ("tiskárna"); Tento příkaz přidává do poloţky název tabulky produkty záznam tiskárna Limit 0, 4 Funkce vypíše pouze určitý počet záznamů. První hodnota značí, na jakém místě čítání začne. Druhá hodnota značí počet záznamů. Auto_increment Výraz, který při kaţdém vloţení zvýší hodnota o jednu hodnotu. Integer Datový typ označující celé číslo. Varchar(hodnota) Datový typ označující textový řetězec s velikostí zadané hodnoty. primary key Primární mezení umoţňující jednoznačně identifikovat záznam v tabulce. Omezení Primary key musí být v tabulce alespoň jednou stanoveno. IS NOT NULL Operátor nenulové hodnoty. IS NULL Operátor nulové hodnoty jquery JQuery je poměrně nová technologie, která usnadňuje psaní aplikací v javascriptech. Veškeré procesy se provádí na straně uţivatele. Výhodou je kombinace funkčnosti HTML a jquery nezávisle na sobě. To umoţní vytvářet dynamické funkce bez opakovaného načtení webové stránky. 20

21 2.2.5 Kaskádové styly CSS. CSS - (Cascading Style Sheets) je výčet metod pro grafickou úpravu webové stránky. V současnosti se kaskádové styly stále častěji pouţívají jako dynamické prvky (viz. dynamické kaskádové styly). 21

22 3 Úvod do současnosti V současnosti většina velkých i malých firem vyuţívá pro prezentaci svých výrobků a sluţeb webové stránky. Bohuţel konkurence je v dnešní době značně vysoká, ať uţ se jedná o jakékoli produkty. Jiţ nezáleţí pouze na tvrdě pracujících zaměstnancích, popřípadě na dobrém jméně firmy, ale také na prezentaci firmy jako takové. Důvodů, proč by měla firma vlastnit webovou prezentaci, je hned několik. Jeden z nejzávaţnějších argumentů je stále zvyšující se počet uţivatelů internetu. Návštěvník webových stránek můţe být budoucím zákazníkem nebo dokonce obchodním partnerem. Internet se stal ideálním prostorem, kde lze prezentovat nejlepší a nejucelenější informace o firmě svým zákazníkům. Důleţité je však také zváţit otázku konkurence na webovém prostoru. Abychom dokázali s konkurencí drţet krok, musíme se neustále vyvíjet. Na internetu je konkurence víc neţ kdy předtím a do budoucna se zdá, ţe situace nebude jiná. Jak píše Steve Krug ve své knize: Na internetu je konkurence vzdálená jen jedno kliknutí, takže pokud uživatele znechutíte, zamíří jinam. [4] O internetové stránce si návštěvník dokáţe vytvořit podvědomý názor za několik desetin vteřiny. Jiţ za tak krátkou dobu si podvědomě přenese hodnocení na stupeň důvěry a ta rozhodne, jestli bude pokračovat v návštěvě našeho webu nebo jednoduše překlikne na konkurenci. Negativům předejdeme vytvořením moderního, přehledného a originálního vzhledu, díky kterému se lépe dostane do podvědomí návštěvníka. Pokud ke kvalitnímu vzhledu webové stránky přidáme stejně kvalitní obsah, pak se návštěvník začne na náš web opakovaně vracet. To však stále závisí na prvním, potaţmo celkovém dojmu, který na uţivateli zanecháme. 3.1 První návštěva Hledání obsahu Zatímco v předchozí části se spíše jednalo o celkový dojem z webových stránek. Nyní musíme návštěvníkovu pozornost upoutat především správným rozmístěním, barevností a grafickými prvky, kde hrají velkou roli i ty nejmenší detaily. Když se uživatel pohybuje v neznámém prostředí, je zásadní, aby mu grafika pomohla k dobré orientaci [5]. 22

23 3.2 Rozdíl první a opakované návštěvy Při opakované návštěvě ztrácí pro uţivatele originální design svoji úlohu, přesto je vizuální stránka stále důleţitá. Vzhled musí následně slouţit pro návštěvníka jako neomylné vodítko, kde se vlastně nachází. Grafické prvky nesmějí odpoutávat návštěvníkovu pozornost od obsahu. Dále by uţivatel neměl být rušen zvuky nebo donekonečna opakujícími se animacemi. Pro stálé návštěvníky se v konečném důsledku můţe stát nadbytek grafických elementů spíše na obtíţ. Na obrázcích č. 4 a č. 5 se snaţím demonstrovat rozdíl prvního a opakovaného vstupu na webovou stránku pomocí diagramů. Obr č. 4. První návštěva uživatele. Obr č. 5. Opakovaná návštěva uživatele. 3.3 Orientace na webové stránce Dobrá orientace je základem úspěšné webové stránky. Dosáhneme ji dodrţením správného oddělení některých hlavních elementů: navigace, obsahu od pozadí, obrázků, atd. Vţdy je dobré mít na paměti, ţe i přes vkládání více nesourodých textů na jednu stránku musíme zachovat správné rozvrstvení obsahů a přehledných nadpisů. Vhodné je rozvrhnout obsah po celé ploše webové stránky a tím předejít výskytu prázdných míst. Důleţité je hlavní prvky umístit tak, aby je návštěvník našel co nejrychleji a nejjednodušeji. V neposlední řadě nesmíme zapomenout na efektivní zvýraznění ostatních elementů, jako jsou podnadpisy a odkazy. 23

24 Na obrázku č. 6 demonstruji cílené hledání obsahu. Uţivatel prochází jednotlivé podsekce ve snaze najít cílený obsah. Při neúspěšném pokusu se návštěvník se vrací o úroveň výš, případně stránku opouští. Tomuto chceme vţdy předejít. Obr č. 6. Orientace návštěvníka na webové stránce, který hledá obsah. 3.4 Čtení nebo prohlížení obsahu webové stránky? Jedna z nejlépe dokumentovaných pravd o používání webu říká, že lidé stráví jen velmi krátkou dobu čtením webových stránek.[6] Realita je taková, ţe uţivatel si stránku prohlíţí a pátrá po slovech, které upoutají jejich pozornost. (viz. Obr. č. 7) 24

25 Obr č. 7. Čtení webových stránek počet přečtených slov podle Jakoba Nielsona. 3.5 Redesign Redesign je proces, jehoţ výsledkem je přeměna některých nebo všech fází předcházejícího stavu. Webovým redesignem obvykle vytvoříme nový vzhled, přijatelnější informační obsah a případně novou funkčnost. Redesign se provádí zpravidla po několika letech. Několik základních důvodů proč se aplikuje redesign se pokusím shrnout v následujících bodech. - Vzhled nevyhovuje současným trendům. - Změna firemní identity. - Stránka nedosahuje vytyčených obchodních cílů. - Špatně strukturované informace, nebo informace které se nedají najít. - Nízká návštěvnost webu. - Přidání funkcí nebo obsahu a aplikace do současného designu není moţná. 3.6 Účel grafické části webové stránky Grafický vzhled je jednou ze tří nejdůleţitějších sloţek úspěšného webu, proto jej musíme kvalitně a originálně zpracovat. Jak jsem se zmínil v úvodu, návštěvník se nejprve rozhoduje podvědomě a toho se musí vyuţít. Design se musí stát snadno 25

26 zapamatovatelným a tím donutit uţivatele, aby se vraceli. Hlavním účelem grafického vzhledu je usnadnit orientaci uţivatele webové stránky. Není dobré, kdyţ grafické elementy znepříjemňují návštěvu uţivatele. Vzhled musí na první pohled vyjádřit, o jakou stránku se jedná a co je jejím účelem. Je vhodné členit informace do několika obsahových částí, aby se vzhled stal pro uţivatele více přehledným. V neposlední řadě musí design prezentovat vizuální identitu firmy a tím pomáhat k propagaci i na webu. 3.7 Sémantika Sémantika by se dala charakterizovat jako, strukturovaní informací a uloţení textu podle standardizovaných pravidel. Téma sémantiky je spojeno zejména s informacemi, které mají předem definovaný význam a tím pomáhají při zpětném vyhledávání. Pro správnou sémantiku musíme vyuţívat několik následných pravidel: - nadpisy označovat značkami <h1> až <h6>, nikoliv pouhým vizuálním formátováním - odstavce se vytvářejí značkou <p>, nikoliv pomocí <div>, ani odřádkováním <br /> - pro zdůraznění textu slouží tagy <strong> nebo <em>, nikoliv hrátky s kaskádami - někdy se hodí značky pro logické formátování jako např. <address> nebo <cite> - navigace se definuje pomocí seznamu <ul>, případně speciální značkou <menu> - tabulky slouží tabulkovým datům, nikoliv pro vizuální formátování - formuláře mají svůj řád a příslušné značky <fieldset>, <legend>, <label>[7] Výsledná kvalitní webová stránka musí být spojením poutavého vzhledu, kvalitního obsahu a bezchybné funkcionality spojené v jeden celek. Při tvorbě webového designu nesmíme zapomenout na základní elementy, jako jsou: grafické vyjádření identity firmy, dodrţení přehlednosti a hlavně zajištění stoprocentní funkčnosti. 26

27 3.8 Informační design Hlavním úkolem informačního designu je poskytnout informace tak, aby je dokázal návštěvník najít, potaţmo rychle a kvalitně vstřebat. Slovy Dirka Knemeera: Pamatuj, že informace mají hodnotu jen tehdy, jsou-li úspěšně sděleny. Nelze-li se k nim dostat, nebo jim porozumět, hodnotu nemají. [8] Obsah musí vţdy projít několika procesy, jako jsou třídění, uspořádaní a vhodné pojmenování, aby se stal kvalitním. S informačním designem se setkáme nejen na internetových stránkách, ale také u knih, časopisů nebo novin. Při aplikaci správného informačního designu se musí nejprve rozdělit obsah do několika hlavních sekcí, případně podsekcí. Struktura stránky se musí logicky rozčlenit do několika částí. Kaţdá část musí být jednoznačně nadepsaná. Dále je důleţité, aby kaţdý odstavec pojednával o jednom tématu. Kaţdá podsekce musí nadřazenou sekci zkonkrétňovat nebo zobecňovat. U Jednotlivých stránek nesmí chybět jasně definovaný název a hlavní nadpis. Stejně jako v sémantice je vhodné dodrţovat určitou hierarchickou strukturu nadpisů. Následné odráţky demonstrují hlavní výhody informačního designu: - Návštěvníci se snadno zorientují a rychle naleznou hledanou informaci. - S dobrou informační strukturou se lépe pracuje. - Dobře provedený informační design umoţňuje lepší pozici ve vyhledávačích. 3.9 Důležité prvky stránky Kompozice Kompozice, nebo takzvaná vizuální logika, je jeden ze základních předpokladů dobrého vzhledu u webdesignu, ale i v mnoha jiných grafických i negrafických oborech. Webový designer musí znát alespoň základní kompoziční pravidla, aby dokázal správně rozmístit grafické prvky tak, aby upoutaly nebo nasměrovaly návštěvníkovu pozornost. Správná hierarchie prvků i obsahu je také důležitá, neboť je určitá neviditelná ruka, která vede oči návštěvníka stránkou. Kvalitní kompozice prvků tedy dokáže určit prioritu informací a rozlišit jednotlivé prvky stránek. [9]. Dodrţením těchto kompozičních pravidel dosáhneme zvýšení struktury přehlednosti. 27

28 3.9.2 Optický střed Optický střed je místo, kam nejprve pohlédne oko pozorovatele. Místo optického středu se jednoduše zjistí podle takzvaného optického řezu. Optickým řezem se myslí imaginární linka v první a druhé třetině výšky strany. Optický střed je nejvhodnější místo pro umístění nadpisů, krátkého textu o několika řádkách, či obrazového prvku, který má výrazně poutat pozornost.[10] Optický střed se často zaměňuje za střed geometrický, coţ je však nesprávně. Sazba postavená na geometrický střed stránky vyvolává dojem padání sazby. Rozdíl mezi optickým a geometrickým středem jsem naznačil na obr č. 8. Obr č. 8. Rozdíl optického a geometrické středu Kompozice textu Nejjednodušším nástrojem pro dosaţení přehlednosti je kompozice textu. Obecně platí základní stručné pravidlo, jimž dosáhneme příjemného vizuálního účinku: Vzdálenost textu od okrajů rámečku, barevných ploch aj by měla být vždy větší než mezera mezi slovy či řádky (řádkový proklad).[11] Pro lepší vzhled nadpisů a podnadpisů se v některých případech vyuţívají 28

29 vyrovnání mezipísmenných mezer. Jde o vyrovnávací sazbu mezi dvojicí znaků písmen, které se říká Kerning. Cílem vyrovnávání je zlepšení optického dojmu z textu. Dalším nástrojem pro zdokonalení kompozici textu je prázdné místo neboli White-space. Prázdné místo se řadí mezi grafické elementy a pouţívá se zejména pro zpřehledňování webové stránky bílou plochou Zápatí a záhlaví Zápatí Zápatí neboli patička je ukončovací prvek webové stránky. Jedná se o prostor pod obsahovou částí webové stránky. Zpravidla se do zápatí umisťuje: mapa webu, kontaktní informace, copyright, stáří, vlastník nebo krátké shrnutí obsahu. Patička má kromě ukončovacího prvku také za úkol přesměrovat uţivatele na jinou obsahovou stránku Záhlaví Záhlaví se pouţívá jako prostor nad obsahovou sloţkou internetové stránky. Do webové hlavičky se vkládá navigace, loga, nadpisy, ale hlavně informace o tom kde se návštěvník nachází. Hlavička by měla dále slouţit jako vstupní prvek pozornosti návštěvníka Navigace Navigace je kombinací grafického a funkčního prvku, který zpřístupňuje ostatní sekce webové stránky. Ostatních sekce zpřístupňují jiný obsah neţli stránka první, proto je moţnost odkazování důleţitá. Další důleţitou vlastností navigace je poskytování informace, kde se návštěvník webové stránky nachází. Navigace musí pro správnou funkci splňovat několik zásad, které cituji z příručky praktický webdesign. a) Navigace musí vypadat jako navigace ráda se ukazuje, je velmi dobře rozeznatelná na první pohled a nikdy se neschová. b) 29

30 c) Navigace se nikdy nesmí hnout z místa, kde se návštěvníkovi poprvé zjevila musí být vždy stejná a na stejném místě. d) Navigace je exhibicionista ráda se ukazuje, je velmi dobře rozeznatelná na první pohled a nikdy se neschová. e) Navigace se nachází v horní části stránky měla by být vidět bez rolování, nejlépe tedy umístěna horizontálně pod záhlavím či vertikálně po levé straně. f) Navigace vždy obsahuje odkaz na první stránku, aby návštěvník, který ve svém vyhledávání neuspěje, mohl začít znova. g) Navigace používá zavedené či zjednodušené termíny, na které jsou uživatelé zvyklí, vyhýbáme se tedy odborným výrazům a nezvyklým slovním spojením. h) Navigace logicky řadí své položky položky navigace by měly být řazeny dle určitého systému a logiky, kterou poté nejširší skupinu uživatelů bez problému intuitivně pochopí.[12] Kontrast Kontrast je vzájemné postavení dvou nebo více dostatečně rozdílných částí téže kvality.[13]. Webová stránka vyuţívá kontrast při rozdělení grafických elementů do většího počtu celků. Odděluje tedy hlavní prvky od ostatních a celkově vizuálně organizuje obsah webové stránky. Nejběţněji je kontrast pomocí barev, přesto se lze setkat i s kontrastem jasu Barva a její vlastnosti Barva je vjem, který je vytvářen viditelným světlem dopadajícím na sítnici lidského oka. [14]. Barvy umoţnují dokonale obohatit celkový vzhled webové stránky. Barvy dokáţí ovlivnit spoustu faktorů jako například: pocity, atmosféru, náladu atd. Volba barevného setu je moţná mnoha způsoby. Barvy se však často vybírají zejména podle instinktu či typu webové stránky. Přesto mnoho webdesignerů vybírá barvu převáţně podle psychologie barev. Barva má hned několik úkolů. První úloha je barevné odlišení naší stránky od konkurence. Dále by barvy měli jednoznačně oddělit elementy pozadí od obsahu, nadpisu či odkazů. Na webových stránkách by se měl objevit barevný set zaloţený na 30

31 maximálně 4 barvách. Dobře zvolené barvy výrazně pozdvihnout kvalitu a originalitu webového designu. Pokud však zvolíme nevkusnou kombinaci barev, sníţíme vizuální kvalitu webové stránky. V příloze přikládám výčet některých základních barev obohaceny o psychologický účinek Tón barev Ton barvy je vlastnost, která určuje vlnová délka světla. Jednoduše by se dalo říct, ţe tón barvy nám určuje, název barvy. Přesto je vlastnost spojená s funkcí zrakových receptorů a vlnovou délkou světla Světlost barvy Světlost barvy nám znázorňuje odraz světla od dané barvy do sítnice oka. Světlost barvy se určuje intenzitou barevného vjemu. [15] Sytost barev Barevná sytost se určuje šířkou barevného tonu, který se odráţí do receptoru lidského oka. Sytost barev se dá jednoduše měnit pomocí přidání bílé sloţky. Čím větší hodnota bílé barvy se přidá do barevného spektra, tím se barva stává bledší Barevné odstíny Barevný odstín se vytvoří pomocí míchání dvou nebo více barevných sloţek. Výsledným barevným kombinacím se v některých případech nazývá lomená barva. Míchání barev pomocí bílé barvy dosáhneme zpravidla světlejšího tónu. Naopak míchání pomocí černé barvy tmavého odstínu Rozdělení barev Barvy nemají pouze své fyzikální vlastnosti, ale některé vlastnosti byly barvám přiřazeny podle tzv. ţivotních zkušeností. Podle vlastností přiřazených lidmi rozdělujeme barvy na teplé, studené, neutrální, aktivní, pasivní, zimní, letní, jarní podzimní, atd. 31

32 Zlepšení přehlednosti Některé důleţité grafické elementy jako například menu, logo, odkazy, atd. by se měli na webové stránce opakovat. Dosáhneme tím lepší vizuální přehlednosti, která pomůţe orientaci uţivatele na webové stránce. 32

33 4 Analýza a specifikace požadavků 4.1 Analýza současného stavu Obr č. 9. Současný stav webové stránky Jinov.cz Firma Jinova s.r.o. vlastní v současné době jednoduché webové stránky. Stránky jsou kódované v jazyce HTML za pomocí kaskádových stylů CSS. Na první pohled je zřejmé, ţe webová stránka má několik let zastaralý vzhled viz obr. č. 9. Stránka obsahuje fotografie svých produktů a technologií, které nejsou příliš kvalitně zpracované. Poukázal bych na velké nedostatky, kterými jsou například nevýrazné logo, nic neříkající banner, viditelně nepřesné spojení tabulek hlavičky a těla, matoucí spodní 33

34 kontaktová lišta a hlavně špatné kompoziční pravidlo. Jednou z dalších nedokonalostí jsou nevýrazné a v některých případech dokonce špatně pojmenované sekce webové navigace. Informace, které by se mohl návštěvník dozvědět, jsou velice nepřehledně rozmístěné. Obsahová část webové stránky je v některých kapitolách nedostačující. Dále postrádám prokříţení hlavních odkazů, jeţ zhoršuje pozici při fultextovém vyhledávání. Velkým nedostatkem bych hodnotil zjevné rozdělení grafických prvků do tabulkového layoutu, který znehodnocuje veškerou doposud vytvořenou sémantiku. Webová stránka obsahuje tři jazykové mutace, které jsou vyhovující současné funkčnosti, fotografie svých produktů a technologií, a několik souborových příruček pro návštěvníky ke staţení. Chtěl bych poukázat na absenci redakčního systému, který by velice usnadnil přidávání nových informací, produktů nebo kontaktů. Po podrobnějším přezkoumání je zřejmé, ţe web neobsahuje ţádnou sémantickou navigaci a zároveň chybí část, která komunikuje s vyhledávači. Dá se jednoduše zjistit, ţe webová stránka není optimalizovaná krom Mozila Firefox, na ţádné jiné webové prohlíţeče. I přes řadu nedokonalosti je systém plně funkční. Vzhledem k tomu, ţe tvorba stávajících webových stránek byla realizována před několika lety, nebude moţné vyuţít ţádné části současného kódu. 4.2 Požadovaná funkcionalita Prvořadým cílem bylo splnit poţadavky zadavatele, tedy firmy Jinova s.r.o. Zadavatel si přál vytvořit webovou stránku s plnou funkčností, přehledností a v neposlední řadě s moderním vzhledem. Detailnějším poţadavkem bylo vytvoření redakčního systému s moţností budoucí editace. Od začátku jsem zadavateli avizoval, jaké technologie vyuţiji pro tvorbu webové stránky, abych předešel nesrovnalostem s vnitrofiremní úpravou. Při tvorbě grafické části se tvůrce obvykle setkává s mnoha nařízeními, které demonstrují firemní identitu. V mém případě jsem měl pouze povinnost dodrţet barevnou identitu firmy. Proto jsem pro vytvoření vzhledu vyuţil plně své dosavadní zkušenosti. Poţadavky na vytvoření interního redakčního systému byly následující: - Systém měl obsahovat tři jazykové mutace pro vkládání dokumentů, referencí, strojů, technologií a samostatně vytvářející galerie. Kaţdý ze zmíněných systémů by měl být něčím specifický. - Vkládání souborů mělo mít funkci detekce typu vloţených souborů. 34

35 miniatury. - Systémy pro vkládání obrázků musely dokázat měnit velikosti a tím vytvářet - Systém pro tvorbu galerií nesměl postrádat funkci zvětšení. V některých případech bylo zřejmé, ţe aplikace bude vyuţívat většího mnoţství dat a obrázků, proto bylo nutností vytvořit stránkování obsahu. Pro lepší pochopení redakčního systému a potaţmo celé webové stránky jsem si vytvořil několik jednoduchých diagramů. Z diagramů je evidentní, kolik bude stránka obsahovat sekcí pro vlastní funkčnost Diagramy V této kapitole znázorním některé diagramy, které jsem vyuţil při tvorbě webové stránky K tvorbě UML diagramů jsem vyuţil program PowerDesigner Obr č. 10. Diagram - Menu administrátor. Obr č. 11. Diagram - Menu uţivatel. Diagramy na obrázku č. 10 a obrázku č. 11 znázorňují moţnosti jednotlivých tlačítek navigací. Na obrázku č. 10 je znázorněno tlačítko administrátora. Na obrázku č. 12 je reprezentován výčet uţivatelských tlačítek. 35

36 Obr č. 12. Diagram - Menu administrátor. Obr č. 13. Diagram use case aplikací pro vkládání technologií, strojů a referencí produktu M+R, MTP. 36

37 Diagram na obr. č. 13 znázorňuje interakci mezi návštěvníkem a administrátorem na jedné webové stránce. Administrátor má moţnosti přidávání upravování nebo mazání obsahu. Návštěvník do obsahu nemůţe zasáhnout proto je jen v roli pozorovatele. 37

38 38

39 5 Praktická část Úvod V teoretické části jsem shrnul několik důleţitých pravidel a pojmů pro tvorbu webové aplikace. V praktické části bych se chtěl zaměřit převáţně na prvky, které byly v současném stavu nekvalitně zpracovány a tím docílit funkci redesignu. Podle mého názoru je nejslabší sloţkou vzhled, proto designu věnuji zvýšenou pozornost. Dále se pokusím zaměřit na pasáţe, které osobně povaţuji za důleţité nebo do jisté míry přínosné. V praktické části budu prezentovat vţdy jen zlomky tvorby, ať uţ kódu nebo kreslených prvků. Nyní se přesunu rovnou k nejdůleţitější části a to k tvorbě Návrh Před samotnou tvorbou webové stránky je dobré si nejprve vytvořil jednoduchý náčrt rozmístění všech prvků a webových součástí. Návrh má za úkol najít nejvhodnější a nejlogičtější rozmístění jednotlivých elementů webové stránky. Slouţí také hned v několika budoucích fázích tvorby jako například: tvorba vzhledu, kompozice textu, umístění grafických elementů, atd. Náčrt webové stránky jsem vytvořil na obr č14. V návrhu jsem rozmístil a zvýraznil některé grafické prvky a předběţně jsem stanovil barvy. Existují i některé další moţnosti, jak vytvořit elegantní vzhled. Jedna z moţností je vyuţití detailní fotografie nebo případně přímé tvorby bez návrhu, a to rozmístěním v grafickém editoru. Při rozmístění webové stránky jsem vyuţil několik grafických prvků, které jsem popsal v teoretické části (viz. kapitoly aţ 3.9.2): - Logo jsem vyhodnotil jako nadřazený prvek, a tím pádem bude aplikováno nejvýše ze všech grafických prvků. - V pravé části figurují tlačítka jazykových mutací, které musejí mít nadřazený charakter odkazu. - Navigaci jsem zvolil horizontálního tvaru, převáţně kvůli typu webové stránky. - Banner bude fungovat jako klasický odkaz na stránku s produkty. Banner dále bude fungovat jako ukončovací bod horní části stránky. - Obsah těla zahrnuje několik oddílů textu s kombinací obrázků. 39

40 - Uprostřed těla webové stránky jsem navrhl grafický rozcestník odkazovací na několik jiných stránek. Odkazuje na hlavnější poloţky jako např. reference, produkty a dokumenty ke staţení. V návrhu jsem předpokládal, ţe umístím mapu odkazů, miniaturu mapy a krátkou prezentací firmy, do zápatí stránky, která bude slouţit k lepší SEO optimalizaci. Pro budoucí tvorbu, návrh jistě prozatím postačí. Obr č. 14. Skica návrhu webové stránky. 5.2 Samotná tvorba Vzhled celé webové stránky jsem vytvořil v grafickém softwaru Adobe Fireworks. Jako adekvátní náhrada grafického softwaru je např. Adobe Photoshop nebo Corel Draw. O programu Adobe Fireworks jsem se zmínil v teoretické části, proto se tomuto programu nechci nadále věnovat Volba barvy Nyní nadešel čas, kdy musím zvoliv barevnou kombinaci pozadí, grafických elementů, obsahu, atd. Zadavatel poţadoval udrţení určitého barevného rozsahu, přesto kombinaci nechal na mém úsudku. Firemní identita firmy Jinova s.r.o. tvoří ţlutou barvu odstínu #F7C315 a modrou barvu v odstínu #222F63. K dobarvení grafických elementů jsem vyuţil bílou barvu s kombinací odstínu šedi. Na pozadí se zpravidla vyuţívají světlejší barvy, proto jsem ţlutou barvu pouţil jako pozadí celého webu. Pro 40

41 zvýraznění výrobního oboru firmy, jsem vloţil do pozadí vektorový obrázek strojírenského návrhu vřetena. Pro Grafické prvky neobsahující obsahovou část, jsem vyuţil barvy tmavšího odstínu a to zejména zmíněné modré případně odstíny šedé. Jak jsem se zmínil v teoretické části, s počtem barev na webové stránce se to nesmí přehánět, proto v návrhu vyuţiji pouze barvy a jejich odstíny. Barevná kombinace je demonstrována na obrázku č. 15. Obr č. 15. Barevná kombinace žluté (#F7C315) a modré (#222F63) Optický střed Horní části webové stránky jsem přizpůsobil tak, aby první pohled návštěvníka na webové stránce spočinul na banneru(viz bod č. 1. Obr č. 16.). V mém případě má banner za úkol shrnout podstatu produktu a následně na daný produkt návštěvníka přesměrovat. Samozřejmostí pro dobře zpracovaný banner je kvalitní fotka a moţnost přelistování obsahu banneru. Na obrázku č. 16. je znázorněna aplikace optického středu na webové stránce. Obr č. 16. Aplikace optického středu. 41

42 Záhlaví S pojmem záhlaví se v současnosti u webdesignu setkáme jen zřídka. Přesto jsem jako pomyslné hlavičky vloţil Logo, navigaci a odkazy na jazykové mutace viz obr. č. 17. Obr č. 17. Záhlaví webové stránky. 1 znázorňuje Logo firmy Jinova s.r.o. Logo funguje jako odkaz, přesměrující návštěvníka na úvodní stránku dané jazykové lokace. 2 skrývá horizontální navigace. O navigaci jsem pojednával v teoretické části bakalářské práce. 3 poukazuje na ikony odkazující na jednotlivé jazykové mutace. Při přesměrování se změní jazyk celé stránky včetně obsahu navigace i patičky Zápatí Zápatí webové stránky by mělo obsahovat náleţitosti, které jsem uvedl v teoretické části. Na obrázku č. 18 vysvětlím funkce jednotlivých prvků obsaţených v patičce webové stránky. Obr č. 18. Zápatí webové stránky. 1 skrývá text, který krátce vystihuje čím, se stránka zabývá a co na ní uživatel najde. Přínos tohoto krátkého textu je zejména sémantického charakteru. Z vlastní zkušenosti mohu říct, že webový vyhledávač bude lépe komunikovat s krátkým výstižným textem, který se nachází v patičce než s textovým obsahem. Druhou výhodou je odkaz pře směrující návštěvníka na první stranu. 42

43 2 slouží jako informativní prvek pro návštěvníka. Návštěvník vidí, kolik webová stránka obsahuje podstránek. Zároveň se může návštěvník rychle přesměrovat na jiný obsah. Mapa odkazů také zpřehledňuje design. 3 jsem využil jako odkaz pro rychle přesměrování do kontaktů webové stránky. V kontaktech lze najít i větší verzi dynamické mapy. 4 obsahuje rychlý kontakt na firmu Jinov s.r.o. Rychlý kontakt usnadňuje návštěvníkovi případnou komunikaci s firmou. Hlavním úkolem je však stejně jak v bodě č. 1 hlavně sémantika webu Některé další grafické prvky Logo Jinova s.r.o. nevlastnila vektorovou podobu loga. Proto jsem logo do vektorů detailně překreslil ze současného webu. Jak uţ jsem v bakalářské práci psal, vektory neztrácí kvalitu a tím si značně ulehčím manipulaci. Výsledek překreslení je moţno vidět na obrázku č. 19. Obr č. 19. Evoluce grafického prvku - Logo Ostatní grafické prvky Na následujících obrázcích demonstruji evoluci důleţitých grafických prvků vyuţitých na webové stránce. Prvky byly vykresleny pomocí vektorových křivek. V mém případě jde o tlačítka (obr. č. 20), vlajky (obr. č. 21) a ohraničení fotek (obr. č. 22). Přidělaná čísla popisují stav vývoje. Obr č. 20. Evoluce grafického prvku - tlačítko. 43

44 Obr č. 21. Evoluce grafického prvku - vlajka. Obr č. 22. Evoluce grafického prvku - ohraničení fotek Navigace Při tvorbě navigace jsem zvaţoval několik moţných variant. V počátku jsem zvaţoval implementaci navigace rolovací, ale zejména kvůli malému počtu podsekcí a velké podobnosti produktů jsem vytvořil menu klasické bez moţnosti rolování podsekcí. Odkazy jsem poskládal podle důleţitosti jednotlivých stránek. Pro pojmenování kategorií jsem vyuţil běţně pouţívané výrazy, abych nepodpořil dezorientaci návštěvníka. Jednotlivé poloţky jsem nepřeplňoval texty a vyuţíval jsem krátké jasně definující pojmy. Vytvořil jsem téţ grafické podoby přechodu poloţky, aby bylo zjevné, kam se uţivatel přesměruje případně, kde se nachází. Některé poloţky jako např. reference firem a reference strojů jsem spojil do jednoho odkazu, pro lepší orientaci návštěvníka. Vzhled navigace jsem demonstroval na obrázku č. 23. Obr č. 23. Navigace webové stránky obrázek je pouze ilustrativní, navigace obsahuje. více položek. 1 informuje uživatele, na jaké položce se nachází. 2 znázorňuje, kam jednotlivá položka přesměruje návštěvníka 3 poukazuje na jednoduchost názvu zvolených pro navigaci 4 odkazuje na přesměrování do administrátorské sekce 44

45 5.3 Sémantika Sémantiku jsem popsal jiţ v teoretické části, proto bych se v současné chvíli chtěl věnovat praktickému vyuţití. Základním pravidlem pro vytvoření správné sémantiky je vyuţití HTML značek výhradně pro definici nadpisů, textů, odkazů odráţek, atd. Pro definici vzhledu se pouţívají naopak výhradně značky kaskádových stylů. Pro správnou sémantiku je také podstatné aby při formátování neobsahovala stránka párové značky <table> nebo je vyuţívala jen ve výjimečných případech. Avšak pro reprezentaci tabulkových dat stránka zmíněnou značku obsahovat musí. Na následujících obrázcích vysvětlím některé značky, které správná sémantika vyţaduje. Obr č. 24. Sémantika webové stránky horní část. Aplikací sémantických pravidel jsem začal hned na začátku webové stránky, jak je moţno vidět na obrázku č. 24. Párovou značkou <a> jsem znázornil odkazy. Značka odkazu přilákává zejména roboty jednotlivých vyhledávačů. Robot pouţívá odkazy stejně jako návštěvník, jen s výjimkou sběru data z obsahu. Po sběru se obsah zpracuje. Takovému procesu se říká indexování. Značku <a> jsem vyuţil pro odkazování na stránky, které jsem uznal za důleţité. Tím jsem stránkám jako O nás, Produkty přidal určitou prioritu. Párová značka <ul> obecně sloţí jako seznam. V sémantice se pouţívá na rozlišení odkazů navigace a obyčejných odkazů. Párová značka <h1> slouţí jako hlavní nadpis a tím má pro roboty i pro fulltextové vyhledávání prioritní postavení. 45

46 Obr č. 25. Sémantika webové stránky Tělo webové stránky Na obrázku č. 25. je znázorněno několik párových značek <p>. Značky zarovnávají text do odstavce. Hlavní výhoda spočívá v dobré komunikaci Fulltextových vyhledávačů s obsahem. O párové značce <h> jsem se zmínil v minulém odstavci. V následujícím případě se však jedná o párovou značku <h2>. Značka <h2> na rozdíl od značky <h1> má prioritu druhého řádu. Párový znak <ul> a značky <ul> jsem, uvedl v kapitole Jen dodám, ţe seznamové značky mají v sémantice nadřazenou prioritu oproti odstavcovým značkám <p>. Obr č. 26. Sémantika webové stránky Spodek a záhlaví webové stránky. 46

47 Na obrázku č. 26. jsem demonstroval správné vyuţití sémantiky v patičce webové stránky. Oproti horní, potaţmo prostřední části jsem vyuţil jen několik značek, které jsem prozatím nevysvětlil. Jsou to zejména nadpisy niţší hierarchických úrovní <h4> a <h5>. Na sémanticky správné webové stránce se nesmějí opakovat nadpisy stejné úrovně. Roboti samy nedokáţí určit prioritu jednotlivých nadpisů a tím můţeme získat status nedůvěryhodného webu při indexování. Pro status sémanticky správně vytvořeného webu musíme do hlavičky vloţit informace o stránce, které se nazývají HTML metadata. Metadata obsahují informace o autorovi, popisek stránky, ale hlavně informace pro roboty. Na obrázku č. 27. Jsou znázorněny správně vyplněna metadata. Obr č. 27. Sémantika webové stránky META data v hlavičce webové stránky. 7. řádek na obr. č. 27. znázorňuje název stránky. 8. Řádek reprezentuje jazykovou sadu. 9. Řádek zajišťuje vypnutí neestetického tlačítek starých internetových prohlíţečů. 10. řádek neukládat do hodnoty do vyrovnávací paměti počítače. Řádky č. 11. a 12. Reprezentují klíčová, které je vhodné mít správně vyplněné jako například: vyţívat maximálně 6 slov, správně definované výrazy atd. 13. řádek znázorňuje bliţší popis webové stránky. Řádek č. 14. reprezentuje informace o tom, zda a jakým způsobem mají roboti indexovat. 15. Řádek slouţí k nastavení, jak často chceme aby, náš web navštěvovali roboti vyhledávačů. 16. Řádek přidává miniaturu k URL adrese. 5.4 Funkcionalita Banner Banner byl vytvářen v kódu Jquery. Hlavní funkcí banneru je informování, listování a odkazování. Listování v banneru se provádí na straně uţivatele, proto nemá 47

48 ţádné negativní vlastnosti na vytíţenost systému. Hlavní vlastnosti jazyku Jquery jsem jiţ uvedl v teoretické části, proto se zaměřím na vysvětlení některých značek a funkcí. Pro tvorbu banneru jsem našel a vyuţil podrobný návod, který je moţný najít na adrese Přesto, ţe jsem banner vytvářel podle návodu, povedla se mi vytvořit rozdílná funkce přechodu. Autor návodu listoval s celým obsahem nevyjímaje pozadí. Já jsem pomocí několika změn, převáţně v kódu HTML dosáhl listování pouze obsahem bez pozadí. Tím jsem dosáhl výrazně lepšího vzhledu funkčnosti webové banneru. Funkčnost banneru je zajištěna pomocí tří souborů. První sloţka je Jquery knihovna, která lze stáhnout na adrese Druhá je kombinací HTML a Javascritpu a třetí samotné Jquery. Obr č. 28. Jquery kód banneru. Na obrázku č. 28 je znázorněná třetí, funkční část banneru. Funkci následujícího kódu nechci rozebírat do detailů převáţně proto, ţe jsem na jeho zhotovení vyuţil návod. Přesto se pokusím některé celky více přiblíţit. V bodě 1. jsem zadal proměnlivé hodnoty banneru. Druhý bod zajištuje výčet obrazových přechodů včetně obsahu, odkazů a obrázků. Třetí bod nám stanovuje funkčnost přechodu, která je spojená zejména s přesouváním objektů. Čtvrtá část definuje tlačítka přechodů. 48

49 Pátá určuje rychlost a velikost přechodu. Dále se pokusím vysvětlit druhou část banneru a to kombinaci HTML s prvky Javaskriptů. Obr č. 29. Javaskript banner. První řádek obrázku č. 29 odkazuje na Jquery knihovnu (viz. první sloţka banneru). Druhý řádek odkazuje na funkční část banneru viz předcházejí popis. Řádek zajištuje základní funkci spojenou s velikostí banneru. Obr č. 30. Javaskript banneru. a fotek.) Na obrázku č. 30 a řádku Slouţí k přidávání textů, odkazů, popisků Obr č. 31. Obr č. Javaskript banner. 49

50 Na obrázku č. 31. Řádek č zajišťuje funkčnost tlačítek pro rolování obsahu banneru MYSQL Některé základní příkazy jsem vysvětlil v kapitole Zaměřím se tedy na konkrétní situace, kde jsem vyuţil jazyk MYSQL. Z důvodu podobnosti MYSQL příkazů vyuţiji pro názorný příklad pouze jeden příklad od zakládání, zobrazení upravování a mazání. Ostatní příkazy budou obsaţeny v elektronické příloze ve sloţce MYSQL Zakládání tabulek Nejprve jsem zaloţil tabulky pro vkládání dat. Pomocí tabulky mtp se na stránce reference _MTP.php bude zobrazovat popis dle jazykové mutace a odkazovací cestu k obrázku dané reference. Obr č. 32. Obr č. MYSQL zakládání tabulek. První aţ šestý řádek obrázku č. 32 znázorňuje základní příkaz pro zaloţení tabulky mtp. Tabulka mtp bude obsahovat následující záznamy: id, cesta, popis_cz, popis_en, popis_de. Na šestém řádku bylo nastaveno povinné primární omezení pro atribut id. Při naplnění tabulky daty budou záznamy obsahovat: id - id slouţí jako jednoznačný identifikátor celého řádku. Atribut cesta bude obsahovat pomyslný odkaz k předem uloţenému obrázku. Atribut popis bude obsahovat popis produktu v českém jazyce. Atribut popis_en bude obsahovat popis produktu v anglickém jazyce. Atribut popis_de bude obsahovat popis produktu v německém jazyce. 50

51 Zobrazení dat Zobrazení databázových záznamů je nejčastější databázový proces. V MYSQL se příkaz select vyuţívá pro výběr dat, která následně chceme zobrazit. Následující příkaz zobrazí data umístěná v tabulce stroje. Obr č. 33. Obr č. MYSQL zobrazení záznamů. Příkazem select zvolím záznamy, které zobrazím ve výsledném výčtu (viz. obr č. 33). V mém případě jde o záznamy cesta a popis_cz. Limit je příkaz pro omezující operand, který začne zobrazovat od 0-tého, aţ po 4 prvek Vkládání Obr č. 34. Obr č. MYSQL vkládání záznamů. Na obrázku č. 34, je zobrazen příkaz pro vkládání jednotlivých záznamů. Příkaz vloţí do tabulky záznam s hodnotami: default, popis, popis_en, popis_de, datum. Hodnota default přidělí atributu jedinečnou číselnou hodnotu Mazání záznamů Při odstranění některých záznamu vyuţijeme příkaz delete. Obr č. 35. Obr č. MYSQL mazání záznamu. Na obrázku č. 35 je zobrazen příkaz, který odstraní záznam z tabulky reference_firmy, který je roven jednoznačnému identifikačnímu číslu 4. 51

52 5.5 Popis PHP aplikací V praktické části bakalářské práce jsem zhotovil několik aplikací, které jsem spojil v jeden ucelený redakční systém. Funkce jednotlivých aplikací se v některých případech opakuje, proto je bezpředmětné popisovat všechny aplikace. Některé aplikace jsou velice rozsáhlé, proto popíši jen některé důleţité části. Veškeré PHP příkazy všech aplikací budou obsaţeny v elektronické příloze Aplikace pro přidávání referencí Aplikace pro přidání reference se skládá ze dvou částí. Jedna část je vytvořená jen pro administrátora. Druhá část je určena pro návštěvníky webové stránky. Administrátor můţe pomocí redakčního systému vkládat názvy firem, s kterými firma Jinov s.r.o. spolupracuje. Návštěvníkovi se zobrazí výčet firemních názvů. Obr č. 36. Obr č. PHP přidání názvu reference. Na obrázku č. 36 je zobrazen kód vkládající název reference do databáze. Na řádku Je znázorněná hlavička PHP dokumentu. Hlavička obsahuje připojení k databázi, nastavení jazykového kódování, odkaz na kaskádové styly a v neposlední řadě proměnou, která získává hodnotu POST s formuláře. Mezi 9. a 21. Řádkem je samotný kód, který přidává záznam do databáze. Pro eliminaci prázdných záznamů jsem vytvořil jednoduchou If >0. 52

53 Zobrazení referencí Na obrázku č. 37 je zobrazen náhled reference firem, které si můţe návštěvník prohlíţet. Data jsou obsaţena v databázi, odkud se pomocí PHP kódu zobrazují. Na obrázku č. 38 je zobrazen samotný kód. Obr č. 37. Obr č. Zobrazení názvu reference. Obr č. 38. Obr č. Zobrazení názvu reference PHP kód. Na obrázku č. 38 bych chtěl upozornit na č. 11. Řádek, kde jsem si vytvořil podmínku řádkování záznamů. Výsledek podmínka lze vidět na předešlém obrázku č. 37. Je evidentní, ţe výsledek se řádkuje do čtyř sloupců a tím dojde k ušetření místa (viz kapitola ) Přidání referencí, strojů a technologií Aplikace jsem pouţil pro přidávání seznamu strojů, pracovišť a referencí strojů. Reference strojů se dále rozlišuje na stroje MTP a M+R. Aplikaci funguje následně: Administrátor přidá náleţité popisy s obrázkem do aplikace. Aplikace obrázek přetypuje na JPG formát a upraví velikost na předem nastavitelné rozměry. Aplikace 53

54 také současně vytvoří miniaturu velkého obrázku. Miniatura se vyuţije jako náhled v administrátorské sekci. Oběma obrázků aplikace změní název, aby nedocházelo k duplicitě. Následně aplikace obrázky uloţí do rozdílných sloţek. Veškerá data, která administrátor zadá do popisů a informace o názvu a cestě se odešlou do databáze. Obrázek se vyuţije při zpětném zobrazení návštěvníka daného stroje nebo reference. Obr č. 39. Obr č. Diagram aktivit aplikací pro vkládání technologií, strojů a referencí produktu M+R, MTP. Na obrázku č. 39. jsem znázornil diagram aktivit samotné aplikace. Celou aplikaci jsem vytvořil pomocí spojení několika skriptů z knihy 1001 tipů a triků pro PHP od Jakuba Vrány. Skripty jsou v některých částech hodně sloţité. Přesto jsem skripty poupravil tak, aby vyhovovali mému uţití. V knize je většina skriptů dokonale popsána proto si myslím, ţe je zbytečné abych parafrázoval autora. Přesto poukáţu na základní prvky zmíněné aplikace. 54

55 Obr č. 40. Obr č. Zobrazení aplikace přidávání seznamů. Na obrázku č. 40 dob č. 1 znázorňuje proměnné poloţky. Bod č. 2 poukazuje na MYSQL dotaz, za pomocí kterého přidává aplikace data do databáze. Obr č. 41. Obr č. Zobrazení změny formátu a velikosti. 55

56 Na obrázku č. 41 je znázorněna část kde se obrázek mění velikost. Dále se v této části mění typ formátu obrázku. Obr č. 42. Obr č. Nastavení umístění a velikosti miniatury. Na obrázku č. 42 se pod bodem č. 1 skrývá nastavení rozměrů miniatury. V bodě č. 2 je moţno nastavit typy souborů, které se vkládají do aplikace. Bod č. 3 pouze vypisuje texty při porušení přiřazených podmínek. V bodě č. 4 se nastavuje umístění, kam se uloţí miniatura obrázku. Obr č. 43. Obr č. Nastavení umístění a velikosti obrázku. Na obrázku č. 43 bod č. 1 znázorňuje nastavení velikosti obrázku. Bod č. 2 znázorňuje umístění obrázku. 56

57 Obr č. 44. Obr č. Formuláře aplikace. Na obrázku č. 44. znázorňuji kód, který obsahuje všechny potřebné formuláře pro funkci webové aplikace Zobrazení referencí, strojů a technologií Při reprezentaci popisů a obrázků jsem vytvořil malou aplikaci, která funguje jako takzvané stránkování. Stránkování se obyčejně pouţívá k prezentaci neurčitého počtu záznamů, kde jsou stanoveny pevné rozměry stránky. Hlavní výhodu toho stránková shledávám, ţe velká část procesů se provádí v databázích. Na obrázcích č. 45 a č. 46 bych chtěl vysvětlit základní funkčnost aplikace řádkování. Obr č. 45. Obr č. Aplikace pro stránkování. 57

58 Na obr. č. 45 bod č. 1 znázorňuje SQL skript pro zjištění počtu celkových záznamů. Bod č. 2 poukazuje na proměnné hodnoty. Bod č. 3 vypisuje počet záznamů z databáze. V tomto případě jde o 4 hodnoty. Bod č. 4 znázorňuje podobný sql dotaz s výjimkou proměnlivé hodnoty. Pomocí dotazu, který je pod bodem č. 1 můţeme jednoduše regulovat, jaká část záznamu se nám bude zobrazovat. Bod č. 5 reprezentuje počátek cyklu. Obr č. 46. Obr č. Aplikace pro stránkování druhá část. Na obr č. 46 dob č. 1 znázorňuje, odkud se fotky načítají do konečného výčtu. Bod č. 2 poukazuje na podmínku, která zabraňuje, aby se na výčtu stránek objevila 0. Bod č. 3 znázorňuje levé tlačítko přechodu mezi stránkami. Bod č. 4 vytváří tlačítka počtu stránek podle celkového počtu záznamů. Bod č. 5 znázorňuje tlačítko posunu vpřed Systém pro načtení a následnou interpretaci dokumentů Mnou tvořený redakční systém obsahuje také aplikaci na ukládání potaţmo stahování dokumentů z webového prostoru. Aplikace funguje následovně: Administrátor vloţí, do formuláře typu file soubor. Následně administrátor zadá tříjazyčné popisky, které se odešlou pomocí příkazu do databáze. Soubor se přejmenuje 58

59 a uloţí do předem stanovené sloţky. Administrátor můţe obdobným způsobem soubory mazat. Pro lepší návštěvníkovu orientaci jsem vytvořil řetězec, který detekuje koncovky vkládaných souborů. Jednotlivé koncovky (například: pdf, jpg, doc, atd.) vlastní rozdílnou ikonu při zobrazení. Obr č. 47. Obr č. Aplikace pro vkládání souborů Na obr. č. 47 znázorňuje bod č. 1 je proměnné hodnoty. Bod č. 2 pokazuje na název a cestu, kam se soubor uloţí. Na obr. č3 je moţno vidět příkazy vkládající data do databáze. Na obr. č 48 je reprezentováno rozdílné zobrazení ikonek. Obr č. 48. Obr č. Aplikace pro vkládání souborů rozdílné ikony souborů Aplikace pro založení galerií. Aplikace má za úkol vytvořit pomocí několik obrázků, vloţených do sloţky ucelenou obrázkovou galerii. Funkce funguje následně: Administrátor nakopíruje obrázky na webový prostor. Aplikace vytvoří zmenšeniny obrázků, ke kterým připojí odkazy pro zvětšení do plné velikosti. Návštěvník, následně můţe obrázky otevírat a zavírat jako v běţně obrázkové galerii. 59

60 Obr č. 49. Obr č. Aplikace pro zobrazení obrázků Kód. Na obrázku č. 49 pod bodem č. 1 se skrývá konfigurace sloţky, odkad se budou obrázky načítat. Bod č. 2 znázorňuje zobrazovací cyklus. Bod č. 3 reprezentuje příkaz, který zajištuje zobrazení pouze 4. miniatur v horizontálním řádku. Na obrázku č. 50 je moţné vidět výslednou aplikaci v provozu. Obr č. 50. Obr č. Aplikace pro zobrazení obrázků zobrazení Pro kompletní funkci redakčního systému se vyuţívá větší počet typově podobných aplikací. Z důvodů obsáhlosti všech aplikací, jsem naznačil pouze některé typy, které se následně typově opakují. Veškeré aplikace budou obsaţeny v datové příloze, která bude přiloţena k bakalářské práci. 60

61 6 Závěrečná analýza Před samotnou implementací nové mnou tvořené verze webové stránky jsem aplikoval na několik týdnů některé statistické moduly. Po implementaci mnou tvořené verze jsem samozřejmě aplikoval statistický modul. Pro statistický modul jsem vyuţíval sluţby produktu google analytics. Bohuţel výsledky analýzy nebudou do plné míry vypovídající, převáţně kvůli krátkému času analyzování nového stavu. Přesto je u některých přehledových segmentů zřejmý rozdíl. Na obrázku č. 51 obrázku demonstruji rozdíl v návštěvnosti před a po redesignu od 25. listopadu do 17. Prosince Obr č. 51. Obr č. Vyuţití redesignu před a po implementaci Počet návštěv. Zvýšení návštěvnosti není úplně dramatické, pokud však vezmeme na vědomí, ţe měření se zatím vyuţilo, jen v krátkém horizontu, povaţoval bych to za úspěch. Hlavní podíl na zvýšení návštěvnosti webové stránky bych přisuzoval kvalitně zpracované sémantice. Následný modul, který jsem sledoval před a po redesignu byla průměrná doba strávená na webu. Výsledný graf modulu, který měří průměrnou bodu strávenou na webu, jsem rozdělil na dvě části. Na první části grafu (viz. obr. č. 52) je znázorněna měřená hodnota v období před redesignem. Na druhém grafu (viz. obr. č. 52) je znázorněné období po aplikaci redesignu. Bohuţel měření průběţné strávené doby se nedá kvůli krátkému časovému horizontu povaţovat za úplně legitimní. Průměrná doba strávená na webové stránce se blíţila k 10 minutám. Myslím si, ţe určitý faktor v tomto měření měl fakt, ţe jsem web nějakou chvíli sám testoval. Přesto je z grafového modulu znatelné celkové zvýšení časových hodnot mezi prvním a posledním bodem, které uţivatel na webové stránce stráví. 61

62 Obr č. 48. Obr č. Využití redesignu před implementaci - průměrná doba návštěvy. Obr č. 49. Obr č. Využití redesignu po implementaci - průměrná doba návštěvy. Délka průměrné návštěvy před redesignem byla činila 2 minuty a 37 sekund. Průměrná délka uţivatele po redesignu byla stanovena (po odečtení nejvyšších a nejniţších hodnot, které byli zachyceny při testování webové stránky) na 3 minuty 48 sekund. Redesign zvýšil průměrnou návštěvu o 1 minutu a 11 sekund. 62

63 7 Závěr Cílem bakalářské práce bylo vytvoření redesignu na konkrétní praktickou situaci současné webové stránky firmy Jinov.s.r.o. S vyuţitím všeho svého dosavadního vzdělání, jak na Vysoké škole ekonomické potaţmo na Vyšší odborné škole informačních sluţeb v Praze, tak všech svých dosavadních zkušeností, jsem novou a plně funkční stránku vytvořil. Současné webové stránky firmy Jinov s.r.o. byly v jiţ mnoha ohledech zastaralé, jak ze strany nekvalitních obrazových materiálů, tak ze strany kódování neodpovídalo moderním trendům. V teoretické části bakalářské práce jsem naznačil obecné postupy pro tvorbu redesignu a některé základní pojmy se kterými jsem pracoval. Druhá část je zaměřena především na analýzu současného stavu systémů V praktické části jsem zuţitkoval některé teoretické znalosti k vytvoření nové a v mnoha ohledech lepší webové stránky. Jelikoţ hlavními nedostatky bylo zastaralá forma kódu a vcelku neucelený design, bylo nutné se na tyto dva hlavní nedostatky zaměřit. S pouţitím jazyka HTML s prvky Java skriptů, PHP kódu s vyuţitím databázového jazyka MYSQL a kaskádovými styly CSS jsem vytvořil velice přehledný a sémanticky kompatibilní web. Zjištěné výsledky naznačují zvýšení návštěvnosti a prodlouţení průměrného času návštěv ve statistických modulech produktu google analytics, ale zároveň musíme brát na vědomí fakt, ţe se měření provádělo v krátkém časovém horizontu. Zároveň jsem webovou aplikaci firmy Jinova s.r.o. obohatil o malý redakční systém, který je v současné době škrtů a sniţování nákladů výhodnou variantou. Redakční systém je v moderních trendech pro aktualizaci webové stránky nepostradatelný. Redakční systém obsahuje např.: aplikace pro přidávání referencí, přidávání referencí pro produkty M+R, přidávání referencí pro produkty MTP, přidávání seznamu strojů, přidávání seznamu technologií, přidávání souborů s detekcí koncovek, která zajištuje změnu náhledových ikon a mnoho dalších drobných vylepšení. 63

64 Velice důleţitá byla reakce od zadavatele, tedy zaměstnanců firmy Jinov s.r.o. Zpětná vazba byla velice pozitivní a mou práci si vychvalovali. Vedení společnosti mou práci také schválilo, a tudíţ si nové stránky ponechali. Výsledek redesignu je moţno vidět v několika podobách. V tištění příloze bakalářské práce jsem přidal několik stránek znázorňující vzhled stránky před a po redesignu. V datové příloze bakalářské práce je vloţena mnou tvořená aplikace připravená pro implementaci jako hotový produkt. V neposlední řadě je moţné si webovou stránku prohlédnou přímo na stránce tedy stránce zadavatele kam byla implementována. 64

65 8 Seznam literatury a použitých zdrojů Tištěné publikace: [4, s. 14] KRUG, Steve. Web desgin : Nenuťte uţivatele přemýšlet Brno : Computer press, s. ISBN [10, s. 82 ] HORNÝ, Stanislav. Počítačová grafika Praha : Nakladatelství VŠE, s. ISBN [15, s. 160 ] HORNÝ, Stanislav. Počítačová grafika Praha : Nakladatelství VŠE, s. ISBN [16, s. 160] HORNÝ, Stanislav. Počítačová grafika Praha : Nakladatelství VŠE, s. ISBN HORNÝ, Stanislav. Počítačová grafika Praha : Nakladatelství VŠE, s. ISBN KRUG, Steve. Web desgin : Nenuťte uţivatele přemýšlet Brno : Computer press, s. ISBN VRÁNA, Jakub. PHP : 1001 tipů a triků. Brno : Computer press, s. ISBN Web design : průvodce od Jakoba Nielsena. Praha : SoftPress, s. ISBN STANÍČEK, Petr. CSS Kaskádové styly : Kompletní průvodce. 2. vyd. Brno :Computer Press, s. ISBN COHENOVÁ, June. Neobyčejně užitečná : kniha o webu Praha : SoftPress, s. ISBN Elektronické zdroje: [1] Písmo. In Wikipedia : the free encyclopedia [online]. St. Petersburg (Florida) : Wikipedia Foundation, , last modified on [cit ]. Dostupné z WWW: <http://cs.wikipedia.org/wiki/p%c3%adsmo>. [2] Adobe Fireworks CS5 [online].[adobe], 2011 [cit ]. O práci ve Fireworks. Dostupné z WWW: <http://help.adobe.com/cs_cz/fireworks/cs/using/ws4c25cfbb1410b0021e63e3d1152b 00cace-7ffd.html>. [3] Popis produktu Dreamweavwer CS4 [online].digital Media, 2011 [cit ]. Software, sluţby a řešení pro digitální svět. Dostupné z WWW: <http://www.digitalmedia.cz/produkty/adobe/dreamweaver/popis.aspx>. 65

66 [5] Studio 20 [online] , 2010 [cit ]. Dostupné z WWW: <http://www.studio20.cz/vzhled-webovych-stranek/>. [6] NEILSON, Jackob. Useit [online] [cit ]. Alertbox. Dostupné z WWW: <http://www.useit.com/alertbox/percent-text-read.html>. [7] Sonix design [online] Havlíčkův Brod : 2003, 2011 [cit ]. Dostupné z WWW: <http://www.sonixdesign.net/webdesign/>. [8] BENEŠ, Jan. Emocio [online] [cit ]. Informační design. Dostupné z WWW: <http://www.emocio.cz/prectete-si/clanek/informacni-design/>. [9] BRÁZDILOVÁ, Michaela. Fidjo [online] [cit ]. Vzhled a kompozice stránky. Dostupné z WWW: <http://www.fidjo.cz/vzhled-kompozice-webstranky.html>. [11] Design [online]. Praha : Computer press, 2009 [cit ]. Praktický webdesign, s.. Dostupné z WWW: <Chip.cz>. [12] Design [online]. Praha : Computer press, 2009 [cit ]. Praktický webdesign, s.. Dostupné z WWW: <Chip.cz>. [13] Design [online]. Praha : Computer press, 2009 [cit ]. Praktický webdesign, s. Dostupné z WWW: <Chip.cz>. [14] Barva. In Wikipedia : the free encyclopedia [online]. St. Petersburg (Florida) : Wikipedia Foundation, 2000, last modified on [cit ]. Dostupné z WWW: <http://cs.wikipedia.org/wiki/barva>. Studio 20 [online] , 2010 [cit ]. Dostupné z WWW: <http://www.studio20.cz/vzhled-webovych-stranek/>. Old gjk [online] [cit ]. Letem světem HTML. Dostupné z WWW: <http://old.gjk.cz/~xsvot02/>. Použitelnost barev [online] [cit ]. Tutoriarts. Dostupné z WWW: <http://www.tutoriarts.cz/pouzitelnost-v-praxi-6-jak-ucinne-vyuzivat-barvy- 1195>. DOBIÁŠ, Richard. Tajemství copywritingu, reklamy a úspěšného psaní nejen pro web [online] [cit ]. O psaní. Dostupné z WWW: <http://www.o-psani.cz/2011/01/jak-na-prioritu-informaci-v-textu-aneb.html>. DOBIÁŠ, Richard. Informační architektura [online] [cit ]. Weto. Dostupné z WWW: <http://www.weto.cz/clanky-o-www/informacni-architektura>. ZAJÍC, Petr. Linuxsoft.cz [online]. Praha : Správce Pavel Kysilka, :00 [cit ]. PHP (6) - Typy proměnných. Dostupné z WWW: <http://www.linuxsoft.cz >. 66

67 JANOVSKÝ, Dušan. CSS kaskádové styly [online] [cit ]. Jak psát web. Dostupné z WWW: <http://www.jakpsatweb.cz/css/>. JFlow Slider Auto Slider with Pause Functionality [online] [cit ]. Dlocc. Dostupné z WWW: <http://www.dlocc.com/articles/jflow-slider-auto-sliderwith-pause-functionality/>. 67

68 9 Seznam Příloh Příloha č. 1. Příloha č. 2. Příloha č. 3. Příloha č. 4. Příloha č. 5. Příloha č. 6. Příloha č. 7. Příloha č. 8. Příloha č. 9. Seznam obrázků. Psychologie barev. Vzhled stránky před redesignem. Vzhled stránky po redesignu. Znázornění mapy před a po redesignem. Znázornění před a po redesignu - prvky. Znázornění před a po redesignu - reference. Znázornění před redesignem produkty. Znázornění po redesignem produkty. 68

69 Příloha č. 1. Seznam obrázků: Obr č. 1. Rozdíl vektorové a bitmapové grafiky. Obr č. 2. RGB model. Obr č. 3. CMYK model. Obr č. 4. První návštěva uživatele. Obr č. 5. Opakovaná návštěva uživatele. Obr č. 6. Orientace návštěvníka na webové stránce, který hledá obsah. Obr č. 7. Čtení webových stránek počet přečtených slov podle 8. Str. 8. Str. 9. Str. 18. Str. 18. Str. 19. Str. 20. Str. Jakoba Nielsona. Obr č. 8. Rozdíl optického a geometrické středu. Obr č. 9. Současný stav webové stránky Jinov.cz. Obr č. 10. Diagram - Menu administrátor. Obr č. 11. Diagram - Menu uţivate.l Obr č. 12. Diagram - Menu administrátor. Obr č. 13. Diagram use case aplikací pro vkládání technologií, 23. Str. 28. Str. 30. Str. 30. Str. 31. Str. 31. Str. strojů a referencí produktu M+R, MTP. Obr č. 14. Skica návrhu webové stránky. Obr č. 15. Barevná kombinace žluté (#F7C315) a modré (#222F63). Obr č. 16. Aplikace optického středu. Obr č. 17. Záhlaví webové stránky. Obr č. 18. Zápatí webové stránky. Obr č. 19. Zápatí webové stránky. Obr č. 20. Evoluce grafického prvku - tlačítko. Obr č. 21. Evoluce grafického prvku - vlajka. Obr č. 22. Evoluce grafického prvku - ohraničení fotek. 35. Str. 36. Str. 36. Str. 37. Str. 37. Str. 38. Str. 38. Str. 39. Str. 39. Str. 69

70 Obr č. 23. Navigace webové stránky obrázek je pouze ilustrativní 39. Str. navigace obsahuje. Obr č. 24. Sémantika webové stránky horní část. Obr č. 25. Sémantika webové stránky Tělo webové stránky Obr č. 26. Sémantika webové stránky Spodek a záhlaví webové stránky. 40. Str. 41. str. 41. Str. Obr č. 27. Sémantika webové stránky META data v hlavičce webové stránky. 42. Str. Obr č. 28. Jquery kód banneru. Obr č. 29. Javaskript banner. Obr č. 30. Javaskript banneru. Obr č. 31. Obr č. Javaskript banner. Obr č. 32. Obr č. MYSQL zakládání tabulek. Obr č. 33. Obr č. MYSQL zobrazení záznamů. Obr č. 34. Obr č. MYSQL vkládání záznamů. Obr č. 35. Obr č. MYSQL mazání záznamu. Obr č. 36. Obr č. PHP přidání názvu reference. Obr č. 37. Obr č. Zobrazení názvu reference. Obr č. 38. Obr č. Zobrazení názvu reference PHP kód. Obr č. 39. Obr č. Diagram aktivit aplikací pro vkládání technologií, 43. Str. 44. Str. 44. Str 44. Str. 45. Str. 46. Str. 46. Str. 46. Str 47. Str. 48. Str 48. Str. 49. Str. strojů a referencí produktu M+R, MTP. Obr č. 40. Obr č. Zobrazení aplikace přidávání seznamů. Obr č. 41. Obr č. Zobrazení změny formátu a velikosti. Obr č. 42. Obr č. Nastavení umístění a velikosti miniatury. Obr č. 43. Obr č. Nastavení umístění a velikosti obrázku. Obr č. 44. Obr č. Formuláře aplikace. Obr č. 45. Obr č. Aplikace pro stránkování. Obr č. 46. Obr č. Aplikace pro stránkování druhá část. 50. Str. 50. Str. 51. Str 51. Str. 52. Str. 52. Str. 53. Str. 70

71 Obr č. 47. Obr č. Aplikace pro vkládání souborů Obr č. 48. Obr č. Aplikace pro vkládání souborů rozdílné ikony souborů. Obr č. 49. Obr č. Aplikace pro zobrazení obrázků Kód. Obr č. 50. Obr č. Aplikace pro zobrazení obrázků zobrazení Obr č. 51. Obr č. Vyuţití redesignu před a po implementaci Počet návštěv. Obr č. 48. Obr č. Využití redesignu před implementaci - průměrná doba 54. Str. 54. Str. 55. Str. 55. Str. 56. Str. 57. Str. návštěvy. Obr č. 49. Obr č. Využití redesignu po implementaci - průměrná doba 57. Str. návštěvy. 71

72 Příloha č. 2. Psychologie barev 72

73 Příloha č. 3. Webová stránka firmy s.r.o. před redesignem o Nás 73

74 Příloha č. 4. Webová stránka firmy Jinova s.r.o. po redesingu o Nás 74

75 Příloha č. 5. Část webové stránky firmy Jinova s.r.o. po redesingu Znázornění mapy. Obr. č. 1. Před redesignem Obr. č. 2. Po redesignu 75

76 Příloha č. 6. Část webové stránky firmy s.r.o. záhlaví a zápatí Obr. č. 1. Záhlaví po redesignu Obr. č. 2. Záhlaví před redesignem Obr. č. 3. Zápatí po redesignu 76

77 Obr. č. 4. Zápatí před redesignem Příloha č. 7. Část webové stránky firmy s.r.o. reference Obr. č. 1. reference po redesignu Obr. č. 2. reference před redesignem 77

78 Příloha č. 8. Část webové stránky firmy S.r.o. po redesignem produkty 78

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

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

Více

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

VYUŽITÍ POČÍTAČOVÉ GRAFIKY

VYUŽITÍ POČÍTAČOVÉ GRAFIKY POČÍTAČOVÁ GRAFIKA VYUŽITÍ POČÍTAČOVÉ GRAFIKY ÚPRAVA FOTOGRAFIÍ NAFOCENÉ FOTOGRAFIE Z DIGITÁLNÍHO FOTOAPARÁTU MŮŽEME NEJEN PROHLÍŽET, ALE TAKÉ UPRAVOVAT JAS KONTRAST BAREVNOST OŘÍZNUTÍ ODSTRANĚNÍ ČERVENÝCH

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

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

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

Mgr. Stěpan Stěpanov, 2013

Mgr. Stěpan Stěpanov, 2013 Mgr. Stěpan Stěpanov, 2013 Abstrakt V tomto kurzu se seznámíme se základními pojmy HTML, klíčovými pravidly pro práci se značkami a atributy a strukturou dokumentu. Také se dozvíte, jak a v čem lze vytvářet

Více

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

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

Více

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

POČÍTAČOVÁ GRAFIKA. Počítačová grafika 1

POČÍTAČOVÁ GRAFIKA. Počítačová grafika 1 Počítačová grafika 1 POČÍTAČOVÁ GRAFIKA Gymnázium Jiřího Wolkera v Prostějově Výukové materiály z matematiky pro nižší gymnázia Autoři projektu Student na prahu 21. století - využití ICT ve vyučování matematiky

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

Úvod do počítačové grafiky

Úvod do počítačové grafiky Úvod do počítačové grafiky elmag. záření s určitou vlnovou délkou dopadající na sítnici našeho oka vnímáme jako barvu v rámci viditelné části spektra je člověk schopen rozlišit přibližně 10 milionů barev

Více

VY_32_INOVACE_INF4_12. Počítačová grafika. Úvod

VY_32_INOVACE_INF4_12. Počítačová grafika. Úvod VY_32_INOVACE_INF4_12 Počítačová grafika Úvod Základní rozdělení grafických formátů Rastrová grafika (bitmapová) Vektorová grafika Základním prvkem je bod (pixel). Vhodná pro zpracování digitální fotografie.

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

PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě

PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě PHP PHP původně znamenalo Personal Home Page a vzniklo v roce 1996, od té doby prošlo velkými změnami a nyní tato zkratka znamená Hypertext Preprocessor. PHP je skriptovací programovací jazyk, určený především

Více

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

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

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

Více

Počítačová grafika. OBSAH Grafické formy: Vektorová grafika Bitmapová (rastrová grafika) Barevné modely

Počítačová grafika. OBSAH Grafické formy: Vektorová grafika Bitmapová (rastrová grafika) Barevné modely Počítačová grafika OBSAH Grafické formy: Vektorová grafika Bitmapová (rastrová grafika) Barevné modely Vektorová grafika Vektorová grafika Příklad vektorové grafiky Zpět na Obsah Vektorová grafika Vektorový

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

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

Barvy a barevné modely. Počítačová grafika

Barvy a barevné modely. Počítačová grafika Barvy a barevné modely Počítačová grafika Barvy Barva základní atribut pro definici obrazu u každého bodu, křivky či výplně se definuje barva v rastrové i vektorové grafice všechny barvy, se kterými počítač

Více

Digitální učební materiály ve škole, registrační číslo projektu CZ.1.07/1.5.00/34.0527

Digitální učební materiály ve škole, registrační číslo projektu 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. 1.1 Práce se záznamy... 3 1.2 Stránka Dnes... 4. 2.1 Kontakt se zákazníkem... 5

Obsah. 1.1 Práce se záznamy... 3 1.2 Stránka Dnes... 4. 2.1 Kontakt se zákazníkem... 5 CRM SYSTÉM KORMORÁN UŽIVATELSKÁ PŘÍRUČKA Obsah 1 Základní práce se systémem 3 1.1 Práce se záznamy................................. 3 1.2 Stránka Dnes.................................... 4 1.3 Kalendář......................................

Více

Počítačové formy projekce jsou: promítání snímků na obrazovce počítače, promítání snímků z počítače na plátno,

Počítačové formy projekce jsou: promítání snímků na obrazovce počítače, promítání snímků z počítače na plátno, Prezentace Počítačové formy projekce jsou: promítání snímků na obrazovce počítače, promítání snímků z počítače na plátno, využití interaktivní tabule. Postup při tvorbě prezentace I 1. Stanovení cílů.

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

Barvy a barevné systémy Formáty obrázků pro WWW

Barvy a barevné systémy Formáty obrázků pro WWW Barvy a barevné systémy Formáty obrázků pro WWW Viditelné světlo. Elektromagnetické záření o vlnové délce 390 760 nanometrů. Jsou-li v konkrétním světle zastoupeny složky všech vlnových délek, vnímáme

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

Název: Design webu Anotace:

Název: Design webu Anotace: Registrační číslo projektu: CZ.1.07/1.4.00/21.3712 Škola adresa: Základní škola T. G. Masaryka Ivančice, Na Brněnce 1, okres Brno-venkov, příspěvková organizace Na Brněnce 1, Ivančice, okres Brno-venkov

Více

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

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

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

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

Více

III/ 2 Inovace a zkvalitnění výuky prostřednictvím ICT

III/ 2 Inovace a zkvalitnění výuky prostřednictvím ICT Metodický list k didaktickému materiálu Číslo a název šablony Číslo didaktického materiálu Druh didaktického materiálu Autor Téma sady didaktických materiálů Téma didaktického materiálu Vyučovací předmět

Více

Tvorba posterů v PowerPointu a InDesignu

Tvorba posterů v PowerPointu a InDesignu Tvorba posterů v PowerPointu a InDesignu Ivo Šnábl Web studio Institut biostatistiky a analýz MU snabl@iba.muni.cz Operační program Vzdělávání pro konkurenceschopnost Projekt Zvyšování IT gramotnosti zaměstnanců

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

ZSF web a intranet manuál

ZSF web a intranet manuál ZSF web a intranet manuál Verze pro školení 11.7.2013. Návody - Jak udělat...? WYSIWYG editor TinyMCE Takto vypadá prostředí WYSIWYG editoru TinyMCE Jak formátovat strukturu stránky? Nadpis, podnadpis,

Více

Grafika a grafický design. Internetové publikování

Grafika a grafický design. Internetové publikování Grafika a grafický design Internetové publikování Design stránky Grafický design první dojem, rychlost stahování Struktura stránek navigace, rozvržení plochy Volba informací okruh čtenářů Syntaktická správnost,

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

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

Bitmapová grafika: Vrstvy - interakce (režimy prolnutí)

Bitmapová grafika: Vrstvy - interakce (režimy prolnutí) VY_32_INOVACE_PG3108 ; Mgr. Pavel Hauer ; 5/2012; 1.ročník; bitmapová grafika, Počítačová grafika; názorná pomůcka pro výuku, opakování, doplnění látky Bitmapová grafika: Vrstvy - interakce (režimy prolnutí)

Více

DELTA - STŘEDNÍ ŠKOLA INFORMATIKY A EKONOMIE, s.r.o. Obor informační technologie AJAX ESHOP. Maturitní projekt. Třída:

DELTA - STŘEDNÍ ŠKOLA INFORMATIKY A EKONOMIE, s.r.o. Obor informační technologie AJAX ESHOP. Maturitní projekt. Třída: DELTA - STŘEDNÍ ŠKOLA INFORMATIKY A EKONOMIE, s.r.o. Obor informační technologie AJAX ESHOP Maturitní projekt Vypracoval: Denis Ptáček Třída: 4B Rok: 2014/2015 Obsah 1. Použité nástroje... 3 1.1 NetBeans

Více

Navigace na webových stránkách

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

Více

Jak využít kancelářské aplikace ve výuce MS Office 2007. Gymnázium a SOŠ Orlová 14. 11. 2007 Ing. Marta Slawinská

Jak využít kancelářské aplikace ve výuce MS Office 2007. Gymnázium a SOŠ Orlová 14. 11. 2007 Ing. Marta Slawinská Jak využít kancelářské aplikace ve výuce MS Office 2007 Gymnázium a SOŠ Orlová 14. 11. 2007 Ing. Marta Slawinská Cíle školení Seznámit se s novým uživatelským rozhraním MS Office 2007 a jeho specifikacemi

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

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

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

Tvorba kurzu v LMS Moodle

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

Více

PHP framework Nette. Kapitola 1. 1.1 Úvod. 1.2 Architektura Nette

PHP framework Nette. Kapitola 1. 1.1 Úvod. 1.2 Architektura Nette Kapitola 1 PHP framework Nette 1.1 Úvod Zkratka PHP (z anglického PHP: Hypertext Preprocessor) označuje populární skriptovací jazyk primárně navržený pro vývoj webových aplikací. Jeho oblíbenost vyplývá

Více

INOVACE PŘEDMĚTŮ ICT. MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika

INOVACE PŘEDMĚTŮ ICT. MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika Vyšší odborná škola ekonomická a zdravotnická a Střední škola, Boskovice INOVACE PŘEDMĚTŮ ICT MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika Zpracoval: Jaroslav Kotlán srpen 2009s Úvod Modul Programování

Více

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

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

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

Více

Úvod do počítačové grafiky

Úvod do počítačové grafiky Úvod do počítačové grafiky Zpracoval: ing. Jaroslav Chlubný Počítačová grafika Počítačová grafika a digitální fotografie zaujímá v současnosti stále významnější místo v našem životě. Uveďme si jen několik

Více

Webové stránky. 13. Obrázky na webových stránkách, modul Uložit pro web a zařízení. Datum vytvoření: 04. 11. 2012. str ánk y. Vytvořil: Petr Lerch

Webové stránky. 13. Obrázky na webových stránkách, modul Uložit pro web a zařízení. Datum vytvoření: 04. 11. 2012. str ánk y. Vytvořil: Petr Lerch Webové stránky 13. Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 04. 11. 2012 Webové Strana: 1/6 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická oblast Název DUM

Více

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

TAOX Konfigurátor potisku seznam funkcí

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

Více

Š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

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

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

Více

TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz

TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz 6.10.2015 aneta.bartuskova@uhk.cz TNPW1 Cvičení 1 Technologie pro tvorbu webu HTML, HTML5 značkovací jazyk struktura, obsah, odkazy - hypertext CSS, CSS3 kaskádové styly vzhled (rozvržení, formátování,

Více

Zásady a doporučení pro tvorbu prezentací SZŠ A VOŠ MERHAUTOVA 15, BRNO

Zásady a doporučení pro tvorbu prezentací SZŠ A VOŠ MERHAUTOVA 15, BRNO Zásady a doporučení pro tvorbu prezentací SZŠ A VOŠ MERHAUTOVA 15, BRNO Struktura prezentace Titulní snímek název prezentované práce, jméno autora, jméno vedoucího práce Úvodní snímek zadání projektu,

Více

Tato podagenda obsahuje hlavní pracovní prostředí pro editaci artiklů, sledování vývoje cen nebo pohybu artiklů.

Tato podagenda obsahuje hlavní pracovní prostředí pro editaci artiklů, sledování vývoje cen nebo pohybu artiklů. 3.1.1 SPRÁVA ZBOŢÍ Tato podagenda obsahuje hlavní pracovní prostředí pro editaci artiklů, sledování vývoje cen nebo pohybu artiklů. Zobrazení Správy zboţí bez výběru artiklu Tato ikona odkazuje na agendu

Více

Maturitní projekt do IVT Pavel Doleček

Maturitní projekt do IVT Pavel Doleček Maturitní projekt do IVT Pavel Doleček CO FILMBOOK JE Filmbook je uzavřená webová aplikace pro celkovou správu informací a dat souvisejících se sledováním filmů. Primárně je zaměřen na uchovávání a spravování

Více

OBSAH. Kontrola aktualizací... 18

OBSAH. Kontrola aktualizací... 18 2013 Albatros Media a. s. Toto CD je součástí knihy Adobe InDesign CS6, Oficiální výukový kurz a je samostatně neprodejné. Všechna práva vyhrazena. Nelegální kopie tohoto disku jsou zakázány. K2059_potisk.indd

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

Jak namalovat obraz v programu Malování

Jak namalovat obraz v programu Malování Jak namalovat obraz v programu Malování Metodický text doplněný praktickou ukázkou zpracovanou pro moţnost promítnutí v prezentačním programu MS PowerPoint PaedDr. Hana Horská 20. 7. 2006, aktualizováno

Více

Uživatelská příručka

Uživatelská příručka Tel.: 558 646 913 Fax: 558 6626 500 Webové stránky města Kolín Uživatelská příručka Vypracovala Kateřina Klichová 28. 4. 2011 Obsah 1 Přílohy... 1 1.1 Vložení přílohy... 1 1.2 Smazání přílohy... 2 1.3

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

Počítačová prezentace. Základní pojmy. MS PowerPoint

Počítačová prezentace. Základní pojmy. MS PowerPoint Počítačová prezentace Základní pojmy Počítačová prezentace využití elektronického systému pro předávání informací jednoduché zpracování textu, grafiky, zvuku a animací vysoká účinnost prezentace - přehledná

Více

Co je to DTP. Albrechtova střední škola, Český Těšín, p.o. Označení materiálu (přílohy):

Co je to DTP. Albrechtova střední škola, Český Těšín, p.o. Označení materiálu (přílohy): Číslo projektu: Název projektu: Subjekt: Označení materiálu (přílohy): CZ.1.07/1.1.24/02.0118 Polygrafie v praxi Albrechtova střední škola, Český Těšín, p.o. Prezentace Co je to Autor: Mgr. MgA. Michal

Více

zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o.

zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o. zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o. 1 Obsah 1. Přihlášení 2. Výpis sekcí 3. Vytvoření nové sekce 4. Editace sekce 4.1. Výběr sekce k editaci 5. Editace hlavičky

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

Návrh a tvorba WWW stránek 1/14. PHP a databáze

Návrh a tvorba WWW stránek 1/14. PHP a databáze Návrh a tvorba WWW stránek 1/14 PHP a databáze nejčastěji MySQL součástí balíčků PHP navíc podporuje standard ODBC PHP nemá žádné šablony pro práci s databází princip práce s databází je stále stejný opakované

Více

Využití ICT techniky především v uměleckém vzdělávání. Akademie - VOŠ, Gymn. a SOŠUP Světlá nad Sázavou

Využití ICT techniky především v uměleckém vzdělávání. Akademie - VOŠ, Gymn. a SOŠUP Světlá nad Sázavou Datum: 1. 12. 2013 Projekt: Registrační číslo: Číslo DUM: Škola: Jméno autora: Název sady: Název práce: Předmět: Ročník: Obor: Časová dotace: Vzdělávací cíl: Pomůcky: Využití ICT techniky především v uměleckém

Více

Internetový přístup do databáze FADN CZ - uživatelská příručka Modul FADN BASIC

Internetový přístup do databáze FADN CZ - uživatelská příručka Modul FADN BASIC Internetový přístup do databáze FADN CZ - uživatelská příručka Modul FADN BASIC Modul FADN BASIC je určen pro odbornou zemědělskou veřejnost bez větších zkušeností s internetovými aplikacemi a bez hlubších

Více

WORKWATCH ON-LINE EVIDENCE PRÁCE A ZAKÁZEK

WORKWATCH ON-LINE EVIDENCE PRÁCE A ZAKÁZEK WORKWATCH ON-LINE EVIDENCE PRÁCE A ZAKÁZEK Systém WorkWatch je určen pro malé a střední firmy, které se zabývají službami nebo zakázkovou výrobou. Zajistí dokonalý přehled o všech zakázkách a jejich rozpracovanosti.

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

Wichterlovo gymnázium, Ostrava-Poruba, příspěvková organizace. Maturitní otázky z předmětu INFORMATIKA A VÝPOČETNÍ TECHNIKA

Wichterlovo gymnázium, Ostrava-Poruba, příspěvková organizace. Maturitní otázky z předmětu INFORMATIKA A VÝPOČETNÍ TECHNIKA Wichterlovo gymnázium, Ostrava-Poruba, příspěvková organizace Maturitní otázky z předmětu INFORMATIKA A VÝPOČETNÍ TECHNIKA 1. Algoritmus a jeho vlastnosti algoritmus a jeho vlastnosti, formy zápisu algoritmu

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

Produkční plán. Tvorba internetových stránek

Produkční plán. Tvorba internetových stránek Produkční plán Tvorba internetových stránek Marek Žáček - Zac0057 Systémové inženýrství a informatika Ostrava 2014 Obsah OBSAH 1 ÚVOD 2 NÁZEV WEBU 3 ZÁMĚR A CÍLE 3 CÍLOVÉ PUBLIKUM 3 VZOR NÁVŠTĚVNOSTI 3

Více

STŘEDNÍ ŠKOLA INFORMAČNÍCH TECHNOLOGIÍ A SOCIÁLNÍ PÉČE

STŘEDNÍ ŠKOLA INFORMAČNÍCH TECHNOLOGIÍ A SOCIÁLNÍ PÉČE STŘEDNÍ ŠKOLA INFORMAČNÍCH TECHNOLOGIÍ A SOCIÁLNÍ PÉČE WEBOWÉ STRÁNKY TŘÍD KAMIL POPELKA ZÁVĚREČNÁ MATURITNÍ PRÁCE BRNO 2011 Prohlášení Prohlašuji, že maturitní práce je mým původním autorským dílem, které

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

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

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

Více

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

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

Více

Kde se používá počítačová grafika

Kde se používá počítačová grafika POČÍTAČOVÁ GRAFIKA Kde se používá počítačová grafika Tiskoviny Reklama Média, televize, film Multimédia Internetové stránky 3D grafika Virtuální realita CAD / CAM projektování Hry Základní pojmy Rastrová

Více

Obsah. Úvod... 9. Barevná kompozice... 16 Světlo... 18 Chromatická teplota světla... 19 Vyvážení bílé barvy... 20

Obsah. Úvod... 9. Barevná kompozice... 16 Světlo... 18 Chromatická teplota světla... 19 Vyvážení bílé barvy... 20 Obsah Úvod.............................................................................................. 9 Historie grafického designu a tisku..................................... 10 Od zadání k návrhu..............................................................

Více

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu POUŽITÝ OPERAČNÍ SYSTÉM POUŽITÝ SOFTWARE PRO WORD PROCESSING SOUTĚŽNÍ ID A 1 Instrukce pro účastníky Otevřete dokument TRANSPORT.DOC, ihned uložte jako TRANSPORTXXX.DOCneboDOCX,kde XXX je Vašesoutěžní

Více

1 Administrace systému 3. 1.3 Moduly... 3 1.4 Skupiny atributů... 4 1.5 Atributy... 4 1.6 Hodnoty atributů... 4

1 Administrace systému 3. 1.3 Moduly... 3 1.4 Skupiny atributů... 4 1.5 Atributy... 4 1.6 Hodnoty atributů... 4 CRM SYSTÉM KORMORÁN PŘÍRUČKA ADMINISTRÁTORA Obsah 1 Administrace systému 3 1.1 Uživatelské účty.................................. 3 1.2 Přístupová práva................................. 3 1.3 Moduly.......................................

Více

Podrobný návod pro administraci zákaznických účtů na portálu Czechiatour.eu

Podrobný návod pro administraci zákaznických účtů na portálu Czechiatour.eu 2013 Podrobný návod pro administraci zákaznických účtů na portálu Czechiatour.eu Czechiatour.eu 1.2.2013 Vážení zákazníci portálu Czechiatour.eu. Abychom Vám co nejvíce usnadnili orientaci v administraci

Více

MODULÁRNÍ REDAKČNÍ SYSTÉM (CMS), SE ZAMĚŘENÍM PRO FIREMNÍ

MODULÁRNÍ REDAKČNÍ SYSTÉM (CMS), SE ZAMĚŘENÍM PRO FIREMNÍ MODULÁRNÍ REDAKČNÍ SYSTÉM (CMS), SE ZAMĚŘENÍM PRO FIREMNÍ PREZENTACI Petr Minařík 2.2.2010 ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE ZADÁNÍ PRÁCE Seznámení se s současnými redakčními systémy vyuţívanými pro

Více

Barvy na počítači a grafické formáty

Barvy na počítači a grafické formáty Barvy na počítači a grafické formáty Hlavním atributem, který se používá při práci s obrazem či s grafickými formáty, je barva. Při práci s barvami je důležité určit základní množinu barev, se kterou budeme

Více

MBI - technologická realizace modelu

MBI - technologická realizace modelu MBI - technologická realizace modelu 22.1.2015 MBI, Management byznys informatiky Snímek 1 Agenda Technická realizace portálu MBI. Cíle a principy technického řešení. 1.Obsah portálu - objekty v hierarchiích,

Více

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

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

1. Nastavení dokumentu

1. Nastavení dokumentu Obsah as a asta 2. Okno / více dokumentů otevírání, zavírání, vytváření nového, přepínání, ukládání 3. Barevný režim dokumentu 4. Zobrazení, vlastní pohledy 5. Objekty vkládání 1. Nastavení dokumentu Uprostřed

Více

PowerPoint 2010. Kurz 1. Inovace a modernizace studijních oborů FSpS (IMPACT) CZ.1.07/2.2.00/28.0221

PowerPoint 2010. Kurz 1. Inovace a modernizace studijních oborů FSpS (IMPACT) CZ.1.07/2.2.00/28.0221 PowerPoint 2010 Kurz 1 Představení Program PowerPoint 2010 je nástroj pro tvorbu prezentací. Tyto prezentace jsou pak určeny především k promítání na plátno pomocí dataprojektoru. Prezentace je formát

Více

Stránka se dá otevřít dvěma způsoby

Stránka se dá otevřít dvěma způsoby Co je potřeba Mozek, to zaprvé. Budete potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (Poznámkový blok). Potřebujete webový prohlížeč. Hodí se připojení na internet. Kdo nemá

Více

Základy práce v programovém balíku Corel

Základy práce v programovém balíku Corel Základy práce v programovém balíku Corel Mgr. Tomáš Pešina Výukový text vytvořený v rámci projektu DOPLNIT První jazyková základní škola v Praze 4, Horáčkova 1100, 140 00 Praha 4 - Krč Základy počítačové

Více

Access. Tabulky. Vytvoření tabulky

Access. Tabulky. Vytvoření tabulky Access správa databáze (tabulky, relace, omezující podmínky, data...) uživatelské prostředí pro práci s databází (formuláře, sestavy, datové stránky, makra...) ukázková aplikace Northwind hlavní okno databáze

Více

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.

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

Více

Textové editory. Ing. Luděk Richter

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

Více

Internetový přístup do databáze FADN CZ - uživatelská příručka Modul FADN RESEARCH / DATA

Internetový přístup do databáze FADN CZ - uživatelská příručka Modul FADN RESEARCH / DATA Internetový přístup do databáze FADN CZ - uživatelská příručka Modul FADN RESEARCH / DATA Modul FADN RESEARCH je určen pro odborníky z oblasti zemědělské ekonomiky. Modul neomezuje uživatele pouze na předpřipravené

Více