Návrh a tvorba web stránok

Návrh a tvorba web stránok

Anna Siváková

Október 2012

Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ

poznať základné pojmy a princípy tvorby, úpravy a publikácie webových stránok

poznať princíp práce so softvérom na tvorbu web stránok prakticky zvládnuť vytvorenie, úpravu a optimalizáciu

webových stránok vedieť začleniť tvorbu web stránok do vyučovacieho

procesu prezentovať vytvorenú web stránku, zhodnotiť jej

motivačnú a aktivizujúcu úlohu vo vyučovaní

Cieľ

Cieľ


Modul 1 (prezenčne – 8 hodín)◦ terminológia tvorby web stránok◦ teoretické podklady návrhu web stránky◦ popis prostredia softvéru na tvorbu web stránok

Modul 2 (dištančne – 42 hodín)◦ dištančné úlohy, tvorba web stránok

Modul 3 (prezenčne – 10 hodín)◦ cieľ a hlavné zásady optimalizácie webu◦ možnosti a postup pri publikovaní web stránok na servery◦ aktualizácia webovej stránky

Záverzáverečná prezentácia projektu

Obsah

Obsah


Terminológia tvorby web stránok Teoretické podklady návrhu web stránky Popis prostredia softvéru na tvorbu web stránok

Modul 1

Modul 1Terminológia

NávrhSoftvér


Čo je to doména◦ Názov s koncovkou .sk, .cz, .com a pod. napr.

hocico.sk, ktorý si predplatíte a stáva sa vašim vlastníctvom, alebo ju predplatí registrátor vo váš prospech – zväčša na rok.

◦ Doménu (pokiaľ za ňu pravidelne platíte) vám štandardne nemôže nikto zobrať, alebo používať.

Čo je to subdoména◦ Názov v rámci už existujúcej domény napr.

hocico.szm.sk – to hocico je subdoména.

Terminológia tvorby web stránok

Terminológia

NávrhSoftvér


Čo je to webhosting◦ Poskytnutie priestoru pre vašu www stránku, priestoru

pre maily a ďalšie služby súvisiace s prevádzkou www stránky, alebo mailov – vlastna-domena.sk (príp. .com a pod)

◦ Tento priestor je poskytnutý tak, že sa viaže na príslušnú doménu.

◦ Pre www stránky získate priestor, reprezentovaný adresou hocico.vlastna-domena.sk

◦ Zároveň maily [email protected]


Terminológia

NávrhSoftvér


Čo je to freehosting◦ .poskytnutie priestoru zadarmo pre vašu www stránku,

priestoru pre maily a ďalšie služby súvisiace s prevádzkou www stránky, alebo mailov.

◦ Tento priestor je poskytnutý tak, že sa viže na príslušnú subdoménu

◦ Pre www stránky získate web priestor, reprezentovaný adresou hocico.szm.sk a pod, zároveň získate mail na danej doméne poskytujúcej priestor, napr. [email protected]


Terminológia

NávrhSoftvér


Čo je to webhostingový program◦ Určuje koľko priestoru, koľko mailov a aké služby – ako

napr. PHP, SQL, Cron vám budú v súvislosti s vašou doménou poskytované.

Čo je to freewebhostingový program◦ Určuje koľko priestoru na web prezentáciu a koľko priestoru

na mail a aké ďalšie služby budú v súvislosti s vašou registráciou poskytované.

◦ Špeciálnym freehostingovým programom je program FREE, kde sa za služby neplatí.

◦ Ďalšie programy sú akousi nadstavbou.


Terminológia

NávrhSoftvér


Čo je to HTML◦ Hypertextový značkový jazyk (HyperTextMarkup

Language) určený na vytváranie webových stránok a iných informácií zobraziteľných vo webovom prehliadači.

◦ Pomocou HTML povieme, že časť textu bude nadpis, iná odstavec alebo tabulka.

◦ WordPad, NotePad, psPad, ... ◦ Nástroje, ktoré interpretujú našu prácu v HTML jazyku

Word, Publisher, Wysiwyg, NVU, Macromedia Dreamweaver FrontPage, Web Expression


Terminológia

NávrhSoftvér


Čo je to CSS Formátovací jazyk – to znamená, že určuje, ako bude,

ktorá časť stránky vyzerať. Pomocou CSS stylu môžeme určiť vzhľad stránky:

◦ HTML toto je nadpis◦ CSS tento nadpis je modrý

CSS určuje vzhľad stránky – farba, písmo, veľkosť prvkov a podobne

CSS styly k tvorbe stránok potrebujeme, i keď nie úplne nevyhnutne – dá sa to aj bez nich


Terminológia

NávrhSoftvér


Čo je to PHP Skriptovací jazyk na strane servera – umožňuje tvorbu

dynamických stránok, ktorých obsah sa na základe rôznych vstupov, či udalostí mení, t.j. stránky nie sú statické.

Používa sa zvyčajne spísaný priamo do HTML kódu stánky. Pre aplikácie ako kniha hostí, počítadlo návštev, anketa,

diskusné fórum alebo chat. PHP je podporované a aktivované na strane web serveru,

preto jeho funkčnosť je závislá od toho aký hosting program máme


Terminológia

NávrhSoftvér


Čo je to JavaScript Je skriptovací jazyk na strane klienta – teda neodosiela

žiadne dáta na server Rôzne efekty ako preklikávanie v menu, otváranie okien s

nejakým nastavením a podobne. Možnosť spraviť stránky dynamickejšie, lepšie spracovávať

dáta (formuláre), alebo spraviť stránky viac prispôsobené špecifickému prostrediu užívateľa.

Javascript je podporovaný prehliadačom, preto nezávisle od toho aký hosting program máme objednaný Javascript funguje podľa toho aký používame webový prehliadač.


Terminológia

NávrhSoftvér


Čo je to SQL (Structured Query Language) Je jazyk na manipuláciu s databázami - výber dát,

vkladanie, úprava a mazanie a pod.. SQL chápeme ako pripravenú databázu, do ktorej

môže užívateľ vstupovať a využívať jej obsah v súvislosti s prevádzkovanou web aplikáciou.

MySQL a PostgreSQL. SQL je podporované a aktivované na strane web

serveru, preto jej funkčnosť je závislá od toho aký hosting program máme.


Terminológia

NávrhSoftvér


Čo je to Redakčný systém špecifický program, ktorý sa nainštaluje do vášho web

priestoru a umožňuje vytvárať a spravovať vašu www stránku bez znalosti programovacích jazykov, v ktorých sa štandardne www stránky vytvárajú.

Redakčný systém poskytuje určitú mieru komfortu, avšak netreba zabúdať na to, že je to software, ktorého presnú funkčnosť a kvalitu zabezpečenia nepoznáte.

Pre funkčnosť redakčného systému je často potrebné vybrať si taký webhostingový program, ktorý obsahuje službu PHP a SQL.


Terminológia

NávrhSoftvér


Úspešnosť web stránky sa nemeria jej krásou, ale schopnosťou dosahovať stanovené ciele.

Obchodná prezentácia má predávať, informačná informovať a zábavná zabávať.

Tvorbu webu vždy podriaďujeme splneniu cieľov.

Teoretické podklady návrhu web stránky

Terminológia

NávrhSoftvér


Postup od prvého kroku - od uvedomenia si, že potrebujete webku - po posledný krok, že budete mať webstránku na webe.

V základe rozdeľujeme tento postup na tri časti:


Terminológia

NávrhSoftvér

http://www.orflex.sk/2008/tipy/postup-pri-tvorbe-webstranky.html

http://www.orflex.sk/2008/tipy/postup-pri-tvorbe-webstranky.html


Návrh a programovanie webu◦ Stanovenie cieľov – pre koho je web určený a načo◦ Sumarizacia materiálov, textov◦ Návrh samotného webu – rozloženie štruktúra◦ Úprava grafiky◦ Výhody redakčného systému

jednoducho pridávať, meniť alebo mazať podstránky jednoducho upravovať položky v menu obsahuje elegantný editor obsahu, ktorý je podobný Wordu – bez

akýchkoľvek technických znalostí môžete ľahko meniť obsah svojich stránok umožňuje ľahko pridávať fotografie editor dovoľuje formátovať text, vkladať tabuľky, odrážky a zoznamy


Terminológia

NávrhSoftvér


Registrácia doményo Zvyčajne v rámci hostinguo Pri výbere hostingu dbať na potreby nášho webu

Prenos dát a publikovanie o Neustála optimalizácia a aktualizáciao Dbať na použiteľnosť webu


Terminológia

NávrhSoftvér


Nástroje, ktoré umožňujú prepis v jazyku HTML – „vidím čo robím“◦ Nástroje balíku MS Office◦ FrontPage, Expression Web 4◦ Free – NVU, Wysiwyg, Dreamweaver

Free redakčné systémy◦ Joomla, Wordpress, phpRS, Drupal, Terirs

Webhosting s redakčným systémom◦ www.webnode.sk

Prostredie softvéru na tvorbu web stránok

Terminológia

NávrhSoftvér

http://www.webnode.sk/


jednoduchý nástroj na tvorbu webu umožňuje tvoriť web bez akýchkoľvek

technických znalostí prostredie je veľmi intuitívne a jednoduché,

umožňuje editáciu rýchlu a jednoduchú editáciu stránok

http://www.webnode.sk/vyhody-systemu-webnode/


Terminológia

NávrhSoftvér

Lekcia - 0




nástroj na vytváranie klasických html stránok

vytváranie dynamických častí webu možnosť využiť a upravovať pripravené šablóny možnosť kombinovať dynamické šablóny s PHP podpora CSS vstavaný validátor ... www.microsoft.com/expression/try-it/Default.aspx


Terminológia

NávrhSoftvér

Lekcia - 0

http://www.microsoft.com/expression/try-it/Default.aspx








1. Princíp tvorby a úpravy textových častí web stránky2. Tvorba a úprava tabuliek3. Grafická úprava stránky (princípy rozloženia textu,

obrázkov a tabuliek, formátovanie pozadia stránky)4. Vytvorenie štruktúry web stránok pomocou odkazov5. Možnosti využitia animácií, videa a špeciálnych efektov 6. Postup tvorby formulárov7. Možnosti využitia rámcov8. Možnosti využitia web stránok vo vyučovacom procese9. Začlenenie web stránok do informačného portálu školy

Modul 2

Modul 2Úlohy


Lekcia 1

Úlohy1. Vytvoriť základ webu zo šablóny2. Vytvoriť základné menu3. Vytvoriť text na úvodnej stránke

Princíp tvorby a úpravy textových častí

Úlohy


Lekcia 2

Úlohy1. Vytvoriť stránku s farebne štruktúrovanou tabuľkou

rozvrhu hodín.2. Doplniť do rozvrhu riadok s časovým vymedzením

zvonenia.3. Vytvoriť stránku s tabuľku k aprobačnému predmetu

(napr. krížovku)

Tvorba a úprava tabuliek

Úlohy


Lekcia 3

Úlohy1. Upraviť šablónu podľa vlastných potrieb a vložiť

fotografiu do šablóny2. Vytvoriť stránku Záujmy s využitím vkladania textu do

tabuľky3. Vytvoriť stránku Predmety s popisom jednotlivých

predmetov

Grafická úprava stránky

Úlohy


Lekcia 4

Úlohy1. Vytvoriť vnútorné prepojenie medzi stránkou Predmety

a jednotlivými predmetmi2. Vytvoriť odkaz na nejaký súbor, napr. prezentácia,

pracovný list, ČTP a pod.3. Vytvoriť stránku s odkazmi na zaujímavé stránky,

otvorenie odkazu nastaviť ako novú stránku a ku každému odkazu urobiť stručný popis

Vytvorenie štruktúry pomocou odkazov

Úlohy


Lekcia 5

Úlohy1. Vytvoriť stránku Fotogaléria a umiestniť tu nejaké

fotografie2. Vytvoriť stránku Kontakt a vložiť aplikáciu Google Map3. Vytvoriť na niektorej zo stránok vhodnú anketu

Možnosti využitia animácií, videa, efektov

Úlohy


Lekcia 6

Úlohy1. Doplniť na stránke Krížovka formulár na zaslanie

správneho riešenia.2. Vytvoriť cvičenie na nejaký predmet pomocou

formulárov, prípadne vložiť interaktívne cvičenie vytvorené v inom programe

Postup tvorby formulárov

Úlohy


Lekcia 7

Úlohy1. Upraviť rámce na jednotlivých stránkach podľa potreby

a charakteru danej stránky

Možnosti využitia rámcov

Úlohy


Lekcia 8

Úlohy1. Vytvoriť stránku aprobačného predmetu2. Vložiť na stránku aprobačného predmetu hypertextový

odkaz na edukačný materiál pre žiakov, prípadne učiteľov (napr. časovo-tematický plán, pojmové mapy, prezentácie, pracovné listy ...)

3. Vytvoriť stručný popis vložených materiálov

Využitie vo vyučovacom procese

Úlohy


Lekcia 9

Úlohy1. Uviesť vo vlastnostiach jednotlivých stránok kľúčové

slová2. Požiadať správcu webu školy (prípadne obce)

o prepojenie hypertextovým odkazom na vašu web stránku

Začlenenie do informačného portálu školy

Úlohy


cieľ a hlavné zásady optimalizácie webu možnosti a postup pri publikovaní web stránok

na servery aktualizácia webovej stránky

Modul 3

Modul 3OptimalizáciaPublikovanieAktualizácia


Dať o sebe vedieť na internete

Search Engine Optimization (... a ľudia Vás nájdu všade)◦ Dosiahnutie čo najvyšších pozícií vo výsledkoch vyhľadávania

na Google, Yahoo, Zoznam ...◦ Zvyšovanie návštevnosti z prirodzeného vyhľadávania

analýza kľúčových slov úprava on-page faktorov a textov vytvára nie spätných odkazov čisté kódovanie webových stránok dodržiavanie štandardov W3C

Cieľ a zásady optimalizácie webu

OptimalizáciaPublikovanieAktualizácia


On Page optimalizácia – úpravy v zdrojovom kóde a textového obsahu web stránky (copywriting, kľúčové slová, štruktúra webu)◦ Určenie a vytriedenie kľúčových slov, na ktoré sa bude v ďalšom postupe

stránka optimalizovať (keywords)◦ Dokonalé sprístupnenie stránky pre všetky vyhľadávače◦ Vytvorenie textov, ktoré budú tvoriť plnohodnotný obsah ako pre

vyhľadávače, tak aj pre návštevníkov webu (copywriting)◦ Vytvorenie dokonalej a prehľadnej navigácie na stránkach a v odkazoch

Off Page optimalizácia – mimo web stránky – kvalitné spätné odkazy na stránky a tzv. Linkbuilding, aby sa o stránkach na internete vedelo – registrácia do web katalógov, výmena spätných odkazov medzi tematicky príbuznými stránkami◦ Vybudovanie spätných odkazov a registrácia do katalógov◦ Analýza optimalizovaného webu a sledovanie konkurencie

Optimalizácia - realizácia



Webová stránka bez titulku Málo textu na webovej stránke Text, ktorý vôbec nesúvisí s obsahom alebo bol

skopírovaný z inej už existujúcej stránky Žiadne odkazujúce linky Príliš veľa zvýrazneného textu

◦ Zvýrazneným textom ukazujete vyhľadávaču čo je dôležité, ale ak zvýrazníte všetky texty alebo veľkú časť textu, Vaša web stránka stráca na dôveryhodnosti v očiach vyhľadávača

Veľa nadpisov (H1, H2 ...)

Optimalizácia - nedostatky



Duplikované weby (Tie isté texty na viacerých doménach WWW) Nezmyselné texty, ktoré nesúvisia s obsahom stránky Príliš mnoho opakujúcich sa slov na stránkach

(hlavne kľúčových) Predstieranie iného obsahu vyhľadávaču

a iného návštevníkovi (cloaking) Linkové farmy a Doorway Kopírovanie cudzích webov a obsahu v nich (mirror) Podvodné odkazy Klamlivé presmerovanie

Optimalizácia – čierna listina



Webhosting ◦ priestor na serveri

Upload cez WWW ◦ priamo na webovej stránke◦ po prihlásení sa

Upload cez FTP◦ protokol určený

na prenos súborov◦ FTP spojenie◦ FTP klient

Publikovanie web stránok na servery



Web update

Najdôležitejšie kroky aktualizácie webstránky◦ Nové texty, materiály ...◦ Rozširovanie štruktúry webstránky (nové položky do menu)◦ Redesign - výmena grafického prostredia podľa aktuálnej akcie◦ SEO - optimalizácia pre vyhľadávače◦ Web audit - sledovanie odozvy webstránky u návštevníkov

Aktualizácia webovej stránky



Spracujte kompletné webové stránky pre seba ◦ (pre pedagogického zamestnanca školy - učiteľa, majstra odbornej výchovy,

vychovávateľa...) tak, aby neskôr mohli byť súčasťou školskej stránky Obsah

◦ zamerajte svoje stránky na svoju aprobáciu, resp. na inú pedagogickú činnosť Rozsahom

◦ minimálne 5 stránok ◦ každá z týchto stránok by sa mala týkať samostatného predmetu alebo inej

pedagogickej činnosti Publikovanie

◦ Stránky umiestnite na voľne dostupný server, tak aby boli v čase prezentácie reálne funkčné.

Záver

Záver


◦ Printový zdroj Weinmanová L.: Veľká kniha webdesignu, Zoner Press Brno, 2004 Neumajer O.: Budujeme školní web, CP Books Brno, 2005 Infovek, študijný materiál kurzu: Tvorba web stránok v prostredí Microsoft

FrontPage 2000

◦ Digitálny zdroj http://suloweb.html.sk/tvorba-webu/ http://www.optimalizaciaseo.sk/

Použitá literatúra

Záver

http://www.optimalizaciaseo.sk/

http://www.optimalizaciaseo.sk/

Documents

Návrh a tvorba web stránok