návrh a tvorba web stránok
DESCRIPTION
Návrh a tvorba web stránok. Anna Siváková Október 2012. Cieľ. 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 - PowerPoint PPT PresentationTRANSCRIPT
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ľ
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
Č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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
Č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 tvorby web stránok
Terminológia
NávrhSoftvér
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
Č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 tvorby web stránok
Terminológia
NávrhSoftvér
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
Č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 tvorby web stránok
Terminológia
NávrhSoftvér
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
Č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 tvorby web stránok
Terminológia
NávrhSoftvér
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
Č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 tvorby web stránok
Terminológia
NávrhSoftvér
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
Č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 tvorby web stránok
Terminológia
NávrhSoftvér
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
Č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 tvorby web stránok
Terminológia
NávrhSoftvér
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
Č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 tvorby web stránok
Terminológia
NávrhSoftvér
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
Č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 tvorby web stránok
Terminológia
NávrhSoftvér
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
Ú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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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:
Teoretické podklady návrhu web stránky
Terminológia
NávrhSoftvér
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Teoretické podklady návrhu web stránky
Terminológia
NávrhSoftvér
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Teoretické podklady návrhu web stránky
Terminológia
NávrhSoftvér
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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/
Prostredie softvéru na tvorbu web stránok
Terminológia
NávrhSoftvér
Lekcia - 0
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Prostredie softvéru na tvorbu web stránok
Terminológia
NávrhSoftvér
Lekcia - 0
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
OptimalizáciaPublikovanieAktualizácia
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
OptimalizáciaPublikovanieAktualizácia
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
OptimalizáciaPublikovanieAktualizácia
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
OptimalizáciaPublikovanieAktualizácia
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
OptimalizáciaPublikovanieAktualizácia
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
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
Obsah Modul 1 Modul 2 Modul 3 ZáverCieľ
◦ 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