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 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ľ

Obsah Modul 1 (prezenčne – 8 hodín) Modul 2 (dištančne – 42 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áver záverečná prezentácia projektu Obsah

Modul 1 Terminológia tvorby web stránok Teoretické podklady návrhu web stránky Popis prostredia softvéru na tvorbu web stránok Modul 1 Terminológia Návrh Softvér

Terminológia tvorby web stránok Č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 Návrh Softvér

Terminológia tvorby web stránok Č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 hocico@vlastna-domena.sk Terminológia Návrh Softvér

Terminológia tvorby web stránok Č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. hocico@szm.sk Terminológia Návrh Softvér

Terminológia tvorby web stránok Č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ávrh Softvér

Terminológia tvorby web stránok Č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ávrh Softvér

Terminológia tvorby web stránok Č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ávrh Softvér

Terminológia tvorby web stránok Č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ávrh Softvér

Terminológia tvorby web stránok Č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ávrh Softvér

Terminológia tvorby web stránok Č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ávrh Softvér

Terminológia tvorby web stránok Č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ávrh Softvér

Teoretické podklady návrhu web stránky Ú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. Terminológia Návrh Softvér

Teoretické podklady návrhu web stránky 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ávrh Softvér

Teoretické podklady návrhu web stránky 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ávrh Softvér

Teoretické podklady návrhu web stránky Registrácia domény Zvyčajne v rámci hostingu Pri výbere hostingu dbať na potreby nášho webu Prenos dát a publikovanie Neustála optimalizácia a aktualizácia Dbať na použiteľnosť webu Terminológia Návrh Softvér

Prostredie softvéru na tvorbu web stránok 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 Terminológia Návrh Softvér

Prostredie softvéru na tvorbu web stránok 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ávrh Softvér

Prostredie softvéru na tvorbu web stránok 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ávrh Softvér

Modul 2 Princíp tvorby a úpravy textových častí web stránky Tvorba a úprava tabuliek Grafická úprava stránky (princípy rozloženia textu, obrázkov a tabuliek, formátovanie pozadia stránky) Vytvorenie štruktúry web stránok pomocou odkazov Možnosti využitia animácií, videa a špeciálnych efektov Postup tvorby formulárov Možnosti využitia rámcov Možnosti využitia web stránok vo vyučovacom procese Začlenenie web stránok do informačného portálu školy Modul 2 Úlohy

Princíp tvorby a úpravy textových častí Lekcia 1 Úlohy Vytvoriť základ webu zo šablóny Vytvoriť základné menu Vytvoriť text na úvodnej stránke Úlohy

Tvorba a úprava tabuliek Lekcia 2 Úlohy Vytvoriť stránku s farebne štruktúrovanou tabuľkou rozvrhu hodín. Doplniť do rozvrhu riadok s časovým vymedzením zvonenia. Vytvoriť stránku s tabuľku k aprobačnému predmetu (napr. krížovku) Úlohy

Grafická úprava stránky Lekcia 3 Úlohy Upraviť šablónu podľa vlastných potrieb a vložiť fotografiu do šablóny Vytvoriť stránku Záujmy s využitím vkladania textu do tabuľky Vytvoriť stránku Predmety s popisom jednotlivých predmetov Úlohy

Vytvorenie štruktúry pomocou odkazov Lekcia 4 Úlohy Vytvoriť vnútorné prepojenie medzi stránkou Predmety a jednotlivými predmetmi Vytvoriť odkaz na nejaký súbor, napr. prezentácia, pracovný list, ČTP a pod. 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 Úlohy

Možnosti využitia animácií, videa, efektov Lekcia 5 Úlohy Vytvoriť stránku Fotogaléria a umiestniť tu nejaké fotografie Vytvoriť stránku Kontakt a vložiť aplikáciu Google Map Vytvoriť na niektorej zo stránok vhodnú anketu Úlohy

Postup tvorby formulárov Lekcia 6 Úlohy Doplniť na stránke Krížovka formulár na zaslanie správneho riešenia. Vytvoriť cvičenie na nejaký predmet pomocou formulárov, prípadne vložiť interaktívne cvičenie vytvorené v inom programe Úlohy

Možnosti využitia rámcov Lekcia 7 Úlohy Upraviť rámce na jednotlivých stránkach podľa potreby a charakteru danej stránky Úlohy

Využitie vo vyučovacom procese Lekcia 8 Úlohy Vytvoriť stránku aprobačného predmetu 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 ...) Vytvoriť stručný popis vložených materiálov Úlohy

Začlenenie do informačného portálu školy Lekcia 9 Úlohy Uviesť vo vlastnostiach jednotlivých stránok kľúčové slová Požiadať správcu webu školy (prípadne obce) o prepojenie hypertextovým odkazom na vašu web stránku Úlohy

Modul 3 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 Optimalizácia Publikovanie Aktualizácia

Cieľ a zásady optimalizácie webu 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 Optimalizácia Publikovanie Aktualizácia

Optimalizácia - realizá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 Publikovanie Aktualizácia

Optimalizácia - nedostatky 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 Publikovanie Aktualizácia

Optimalizácia – čierna listina 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 Publikovanie Aktualizácia

Publikovanie web stránok na servery 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 Optimalizácia Publikovanie Aktualizácia

Aktualizácia webovej stránky 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 Optimalizácia Publikovanie Aktualizácia

Záver Spracujte kompletné webové stránky pre seba Obsah Rozsahom (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

Použitá literatúra Printový zdroj Digitálny 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/ Záver