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

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


  • 225 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

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)

    • 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

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

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

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 (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á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á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 (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á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 GoogleMap

      • 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

    • 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

    • 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

    • 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

      • Webaudit -  sledovanie odozvy webstránky u návštevníkov

    Optimalizácia

    Publikovanie

    Aktualizácia


    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

    • 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