Návrh a tvorba web stránok

1. Návrh a tvorba web stránok Anna Siváková Október 2012

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

3. Obsah • 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

4. 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

5. 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

6. 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

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

8. 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

9. Terminológia tvorby web stránok • Čo je to HTML • Hypertextový značkový jazyk (HyperTextMarkupLanguage) 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

10. 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

11. 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

12. 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

13. Terminológia tvorby web stránok • Čo je to SQL (StructuredQueryLanguage) • 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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

25. 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

26. 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

27. 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 GoogleMap • Vytvoriť na niektorej zo stránok vhodnú anketu Úlohy

28. 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

29. 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

30. 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

31. 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

32. 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

33. Cieľ a zásady optimalizácie webu • Dať o sebe vedieť na internete • SearchEngineOptimization(... 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

34. 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 • OffPage 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

35. 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

36. 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

37. 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

38. 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 • Webaudit -  sledovanie odozvy webstránky u návštevníkov Optimalizácia Publikovanie Aktualizácia

39. Záver • 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

40. Použitá literatúra • 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/ Záver