N vrh a tvorba web str nok
This presentation is the property of its rightful owner.
Sponsored Links
1 / 40

Návrh a tvorba web stránok PowerPoint PPT Presentation


  • 202 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Návrh a tvorba web stránok

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


N vrh a tvorba web str nok

Návrh a tvorba web stránok

Anna Siváková

Október

2012


N vrh a tvorba web str nok

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

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


Modul 1

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

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 nok1

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 [email protected]

Terminológia

Návrh

Softvér


Terminol gia tvorby web str nok2

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. [email protected]

Terminológia

Návrh

Softvér


Terminol gia tvorby web str nok3

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 nok4

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


Terminol gia tvorby web str nok5

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:

    • HTMLtoto je nadpis

    • CSStento 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 nok6

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 nok7

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 nok8

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


Terminol gia tvorby web str nok9

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

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 nky1

    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 nky2

    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 nky3

    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

    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 nok1

    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 nok2

    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

    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

    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

    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

    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

    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

    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


    Postup tvorby formul rov

    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

    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

    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

    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

    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

    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


    Optimaliz cia realiz 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

    • 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


    Optimaliz cia nedostatky

    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

    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

    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

    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


    Z ver

    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


    Pou it literat ra

    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


  • Login