tvorba webovÝch strÁnek

Výukový modul TWS_01 Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE

TVORBA WEBOVÝCH STRÁNEKTVORBA WEBOVÝCH STRÁNEK

Osnova výukového modulu TWS_01Osnova výukového modulu TWS_01

1. Úvod, motivace

2. Základní pojmy a doporučení

3. Princip služby webových stránek

4. Pravidla výběru a přípravy obsahu webových stránek

5. Volba vhodného designu webové stránky

6. Registrace doménového jména webové stránky

7. Hostování webových stránek na vzdáleném webovém serveru

8. FTP – přenos souborů webové stránky na webový server

Pro koho jsou vhodné webové stránky?Pro koho jsou vhodné webové stránky?

Webové neboli internetové stránky = PREZENTACE

soukromých osob,

firem, společností, institucí,

výrobků, služeb včetně objednání zákazníkem,

informací všeho druhu,

zábavy.

Tvorba webových stránek profesionálem

= vysoké náklady pro Vás !

ZÁKLADNÍ POJMY

Webová stránkaWebová stránka

Textový dokument (soubor), jehož výsledný formátovaný obsah

lze zobrazit pomocí prohlížeče webových stránek.

Skládá se z textu a speciálních značek (tagů) jazyka HTML.

HTML (resp. XHTML) značky slouží k:

- tvorbě struktury a designu (tzv. layoutu) webové stránky,

- tvorbě odkazů (obrázky, jiné webové stránky, atd.),

- tvorbě odstavců, bloků, tabulek, formulářů, seznamů, atd.

Veškerý obsah (text, obrázky, formuláře, atd.) lze formátovat

a pozicovat pomocí tzv. kaskádových stylů (CSS).

Obsah a vzhled webu lze měnit na základě uživatelského vstupu

nebo události pomocí skriptovacích jazyků (např. PHP).

Webová stránkaWebová stránka

Statická webová stránka

Obsahuje pouze značky jazyka (X)HTML a kaskádové styly.

Soubor webové stránky neobsahuje příkazy a funkce některého

ze skriptovacích jazyků.

Uživatel nemá možnost měnit obsah nebo vzhled obsahu webu.

Dynamická webová stránka

Obsahuje navíc skripty (příkazy, funkce) skriptovacího jazyka:

např. PHP, ASP, Javascript, atd.

Prováděním příkazů a funkcí se modifikuje obsah webu,

popřípadě je vyvolána nějaká akce.

Prohlížeč webových stránekProhlížeč webových stránek

Program, který slouží ke správnému zobrazení obsahu webové

stránky (webového dokumentu).

Podle HTML značek a použitých kaskádových stylů umí správně

pozicovat, naformátovat a případně načíst obsah webu.

Obsahem webové stránky se rozumí především:

- nadpisy, text, seznamy

- rastrové obrázky (formáty JPG, PNG, GIF)

- video

- zvuk

- formuláře

- tabulky

Prohlížeč webových stránekProhlížeč webových stránek

Konqueror

Užitečný tip:Užitečný tip:

Vytvářené webové stránky je vhodné testovat

ve všech významných prohlížečích webových

stránek včetně rozdílných verzí !!!

Editor webových stránekEditor webových stránek

Program pro tvorbu kódu webové stránky. Existují tři druhy:

1.Editory neformátovaného textu

- nutno znát HTML značky a kaskádové styly (CSS),

- vše píše programátor,

- HTML, CSS, text a skripty nejsou nijak barevně odlišeny,

- nevhodné pro začátečníky,

- např. „Poznámkový blok“ ve Windows,


2. Editory HTML kódu

- nutno znát HTML značky a kaskádové styly (CSS),

- editor napomáhá (dokončuje) psaní HTML značek a CSS,

- vkládání HTML prvků pomocí klávesových zkratek,

- nabízí množství užitečných nástrojů,

- HTML, CSS, text a skripty jsou barevně odlišeny (přehlednost),

- editor kontroluje syntaxi (správnost zápisu) kódu včetně skriptů,

- např. PSPad, Notepad++, HomeSite, 1st Page, atd.


3. WYSIWYG editory

„What You See Is What You Get“ (česky: „Co vidíš, to dostaneš“)

- není nutné znát HTML/CSS, práce na úrovni výsledného dokumentu,

- objekty a prvky webu se přímo vkládají na pracovní plochu,

- editor vytváří výsledný HTML/CSS kód (většinou neefektivně)

- v kódu se většinou nachází nevalidní HTML elementy,

- editor většinou umožňuje úpravu výsledného HTML kódu,

- např. Dreamweaver, FrontPage a také Microsoft Word !

Panel nástrojů

Validátor zdrojového kódu stránkyValidátor zdrojového kódu stránky Programový nástroj umožňující kontrolovat správnost

(bezchybnost) zápisu zdrojového kódu webového dokumentu

podle zvoleného standardu (HTML, XHTML, CSS).

http://validator.w3.org

Neobsahuje-li stránka žádnou chybu, validátor potvrdí

bezchybnost dokumentu a nabídne ikonku, kterou lze

umístit na své stránky jako důkaz jejich validity (bezchybnosti).

Obsahuje-li stránka chyby, validátor vypíše seznam chybných

řádků, včetně popisu chyby.

Význam validace webových stránekVýznam validace webových stránek

funkčnost webu na různých zařízeních (PC, PDA, komunikátor),

korektní zobrazení v prohlížeči dodržujícího webový standard,

dobrá pozice webu ve vyhledávačích webových stránek,

snadnější úprava kódu, přehledný kód,

rychlejší načítání webové stránky,

obsah webu přístupný tělesně (zrakově) postiženým lidem.

Více informací získáte na stránkách www.pristupnost.cz


Validní (bezchybný) kód webové stránky

dle zvoleného standardu (HTML, XHTML)

je dobrou vizitkou profesionála !!!

Redakční systém (CMS)Redakční systém (CMS)

CMS = Content Management System

Internetová aplikace, která umožňuje snadnou tvorbu a správu

webové prezentace téměř bez znalosti jazyků pro konstrukci

webových stránek (HTML, XHTML, CSS, Javascript, PHP, atd.).

Pro kompletní správu stačí pouze internetový prohlížeč.

Obsahuje přehledné administrační rozhraní pro správu formy a

obsahu webu (nejčastěji jednoduchý WYSIWYG editor).

Obsahuje moduly (doplňky) např. diskuzní fóra, fotogalerie,

hlasování, statistiky přístupu, atd. Další doplňky lze doinstalovat.

Nabízí řízení přístupu k dokumentům včetně správy uživatelů.

Pro vkládání a formátování textového obsahu

slouží jednoduchý WYSIWYG editor.

Redakční systém (CMS)Redakční systém (CMS)

Výhody redakčních systémů

stačí základní znalost webových technologií (HTML, CSS, PHP),

urychluje práci při tvorbě a správě webové prezentace,

přehledné prostředí rozhraní CMS (připomíná textový editor),

výsledný kód je validní, přístupný pro vyhledávače i uživatele,

nabízená řešení CMS jsou „open source“ a zdarma.

Nevýhody redakčních systémů

Časově náročnější instalace a konfigurace,

nutný výběr vhodného webhostingu, ne všude funguje!

Známé redakční systémy (CMS)Známé redakční systémy (CMS)

JOOMLA!

České stránky projektu: www.joomlaportal.cz

Oficiální stránky projektu: www.joomla.org

DRUPAL

České stránky projektu: www.drupal.cz

Oficiální stránky projektu: www.drupal.org

WordPress

České stránky projektu: www.cwordpress.cz

Oficiální stránky projektu: www.wordpress.org

Princip služby webových stránekPrincip služby webových stránek

KLIENT – počítač uživatele s prohlížečem webových stránek.

WEBOVÝ SERVER – úložiště souborů webové stránky, je zde také

nainstalován databázový systém a PHP engine.

Princip služby webových stránekPrincip služby webových stránek1. Klientský webový prohlížeč zašle požadavek o zobrazení stránky.

2. Webový server načte požadovaný soubor (nejčastěji „index“). Zjistí,

zda obsahuje PHP skripty (podle přípony souboru). Pokud ne, pak

přímo odešle tuto stránku zpět klientovi, pokud ano, předá tento kód

ke zpracování PHP enginu.

3. PHP engine začne vykonávat skript. Pokud skript obsahuje

požadavek na provedení dotazu do databáze (SQL dotaz), pošle dál

tento požadavek na databázový server.

4. Databázový server tento dotaz zpracuje a výsledek odešle zpět PHP

enginu.

5. PHP engine zpracuje data z databáze, naformátuje potřebné výstupy

do (X)HTML, výsledek odešle webovému serveru a ukončí

vykonávání skriptu.

6. Webový server pošle výslednou statickou HTML stránku klientskému

webovému prohlížeči, který o tuto stránku požádal.

Forma a obsah webové stránkyForma a obsah webové stránky

Webové stránky se skládají z formy a obsahu.

Příklad knižní formy a obsahu:

OBSAH

text, obrázky

FORMA

grafické provedení

úprava a vzhled obrázků

typ a úprava písma

rozmístění textu, obrázků

Obsah webové stránkyObsah webové stránky

Veškeré informace předávané uživateli (návštěvníkovi) webu:

texty (nadpisy, články, hesla, popisky)

obrázky (fotografie, ikony, kliparty, schémata)

animace (animovaný GIF, flash animace, videa)

zvuky (zvuk na pozadí, mluvené slovo, zvuk součástí videa)

tabulky, formuláře

Forma webové stránkyForma webové stránky

Grafické provedení webové stránky (vzhled, design).

Pomocí značkovacího jazyka (HTML, XHTML) a aplikace

kaskádových stylů (CSS) na tyto značky, lze pozicovat

a formátovat (upravovat) vzhled obsahu webové stránky.

Pomocí skriptovacího jazyka (PHP, Javascript, ASP, apod.) lze

vytvořit dynamické webové stránky, které mění svůj vzhled nebo

obsah v závislosti na vstupu uživatele nebo nějaké události.

Forma musí zaujmout - umět „prodat“ obsah, umožnit snadnou

orientaci a navigaci uživateli, usnadnit práci s obsahem.


Při tvorbě webových stránek je důležité

věnovat stejnou pozornost výběru obsahu

i návrhu formy (design, navigace, skripty).

OBSAH WEBOVÝCH STRÁNEK

VÝBĚR A PŘÍPRAVA

Výběr obsahu webové stránkyVýběr obsahu webové stránky

Obsah webových stránek bude záležet především na:

typu webových stránek

např. e-shop, prezentační web, zpravodajský web, e-learning,

osobní web, atd.

cíli (účelu) webových stránek

např. prodej, poskytování informací, prezentace fotografií,

vyhledávání, získávání údajů o návštěvnících, hry, atd.

cílové skupině, na kterou je zaměřen

např. mládež, senioři, zákazníci, odborná veřejnost, studenti,

zaměstnanci, atd.

Obecná pravidla výběru obsahuObecná pravidla výběru obsahu

TEXTOVÝ OBSAH

kratší forma textu, vyvarovat se dlouhým, souvislým blokům,

výstižný text jasně a srozumitelně popisující účel webové stránky,

vyvarovat se prezentace citlivých osobních údajů ve veřejně

přístupné části webu (rodná čísla, kontaktní údaje, náboženské

vyznání, sexuální orientace, apod.),

použít výstižný název stránky, nadpisy, textové odkazy.


OBRAZOVÝ OBSAH (obrázky, fotografie, animace, videa)

obrazový a textový obsah se vzájemně doplňují,

rozměry (šířka x výška) zvolit úměrně sdělované informaci,

používat co nejméně automaticky přehrávaných flash a GIF

animací a videí (rušivý element pro návštěvníky),

obrazový obsah vytvořený jinou osobou (skupinou osob) může

podléhat autorským právům,

fotografie nebo videa, na kterých jsou zachyceny jiné osoby, lze

prezentovat pouze s písemným souhlasem těchto osob,


OBRAZOVÝ OBSAH (obrázky, fotografie, animace, videa)

videa a fotografie se sexuální tématikou, násilím, apod. nesmí být

přístupná nezletilým osobám,

videa a fotografie podněcující k trestnému činu, hanobící osobu,

rasu či národ, propagující zakázaná hnutí, zobrazující násilí či

sexuální kontakt s nezletilou osobou nesmí být prezentována!


ZVUKOVÝ OBSAH

pokud možno, nepoužívat hudbu automaticky přehrávanou na

pozadí stránky, výjimku mohou tvořit webové stránky hudebních

skupin, či podobně zaměřené stránky,

zvukový obsah umístěný na webové stránce může podléhat

autorským právům.

Příprava obsahu webové stránkyPříprava obsahu webové stránky

TEXTOVÝ OBSAH

Sepsat si základní text v textovém editoru.

Správně strukturovat textový obsah:

- nadpisy, podnadpisy (výstižné, krátké, „úderné“),

- odstavce krátkého textu (maximálně 50 až 70 slov),

- zvýrazněná „klíčová“ slova,

- odkazy,

- číslované a nečíslované seznamy,

- tabulkové informace,

- citace.


TEXTOVÝ OBSAH

Klíčová slova či bloky textu zvýraznit pomocí:

- tučného písma,

- kurzívy,

- obarvení písma či pozadí textu,

- hypertextovým odkazem,

- zvětšením velikosti písma (v odstavci se používá výjimečně),

Vyvarovat se použití:

- podtržení textu (evokuje hypertextový odkaz),

- pohyblivý text (rušivý element).


Zvýrazněná slova (resp. části textu) mohou

přitáhnout pozornost čtenáře,

nic se však nemá přehánět !!!


TEXTOVÝ OBSAH

uvážit doplnění bloků textu obrazovým obsahem,

hlavní sdělení (obecně důležité informace) vždy uvádět na začátku

stránky,

dodržovat typografická pravidla psaní textu,

vyvarovat se gramatickým chybám,

pokud je to možné, nepoužívat slova potenciálně neznámá

vybrané cílové skupině.


FOTOGRAFIE, OBRÁZKY

Bude podrobněji probráno v modulu TWS_02:

upravit rozměry a velikost souboru fotografie a obrázku

(ořez, převzorkování). Čím menší je velikost souboru, tím rychleji se

obsah načte z webového serveru.

U fotografií vytvořit náhled (tzv. „thumbnail“) a plnou velikost

fotografie. Náhledy fotografií zobrazovat po načtení stránky, plnou

velikost po kliknutí na náhled (rychlé načítání stránky).


FOTOGRAFIE, OBRÁZKY

Fotografie a obrázky opatřit alternativním textem (popiskem), který

je nezbytný především:

- při nenačtení obrazového obsahu (především odkazů),

- pro čtečky nevidomých návštěvníků stránek.

Nefunkční obrázková navigační lišta !!!


VIDEO, ANIMACE

Video přehrávané na webové stránce převést do formátu FLASH.

Doporučení: použít program „Free Video to Flash Converter“

- program je zdarma ke stažení pro nekomerční použití,

- vytvoří flashové video, opatří přehrávačem, vytvoří HTML kód,

- zdrojem je jakýkoliv známý formát videa (mpg, avi, mov),

- program je v anglickém jazyce.

- Web programu: http://www.dvdvideosoft.com

Free Video To Flash Converter

DESIGN WEBOVÝCH STRÁNEK

OBECNÁ PRAVIDLA NÁVRHU A TVORBY

Úloha designu webových stránekÚloha designu webových stránek

Design (vzhled) webových stránek „prodává“ prezentovaný obsah.

Nepřebírá úlohu obsahu, je jeho doplňkem. Hlavní úkoly designu:

vyjadřuje účel a poslání webových stránek,

logicky člení informace (obsah), snaží se jej návštěvníkovi podávat

v atraktivní a přehledné formě,

usnadňuje orientaci a pohyb návštěvníka na webu,

podbarvuje návštěvníkův podvědomý názor na web, zvyšuje jeho

důvěru k obsahu webu,

činí web zapamatovatelným oproti konkurenci.

Možnosti návrhu a tvorby webdesignuMožnosti návrhu a tvorby webdesignu

Navržení vlastního přitažlivého designu webových stránek není

jednoduché a vyžaduje především:

nápaditost a grafické nadání,

velmi dobrou znalost webových technologií XHTML/CSS,

vlastnictví a zvládnutí některého z grafických programů, např.

Adobe Photoshop, Fireworks, GIMP, apod.

zkušenosti, dostatek času a trpělivost.


Webová šablona (Web Template)

Jedná se o již hotový grafický vzhled stránek bez konkrétního

textového a grafického obsahu.

Tvůrce webových stránek má několik možností návrhu a tvorby

webové šablony (Web Template):

1. zadá zakázku profesionálnímu grafikovi,

2. navrhne a vytvoří si šablonu sám,

3. využije některé z vytvořených šablon (zdarma, placené).


1. Profesionální grafik (grafické studio)

Poměrně drahé řešení vhodné spíše pro komerční weby!

Výběr grafika, grafického studia

dbát na reference, nejlépe volit dle doporučení známých, kteří již

měli nějakou zkušenost

Schůzka s grafikem

projednání podrobností zakázky, cenová nabídka, návrh smlouvy o

dílo, časový plán realizace zakázky

Zpřístupnění webové prezentace na neveřejném místě, doladění

finálních detailů, předání finálního produktu + platba

20 000 Kč

25 000 Kč


Pro komerčně zaměřené webové stránky se

investice do profesionálního designu vyplatí.


2. Návrh a tvorba vlastní šablony

Rozepsat si webovou prezentaci na jednotlivé části + popis,

Navrhnout logickou navigaci (provázanost jednotlivých částí):

- dbát na jednoduchou, intuitivní navigaci pro návštěvníky,

- provázat veškeré části webu, včetně zpětné navigace,

- vhodně volit kombinaci textových a obrázkových odkazů,

Nakreslit si tzv. „drátěný model“ webu (angl. Wireframe), který

definuje rozmístění a funkci jednotlivých prvků webu.

Ručně kreslený model webové stránky

Použití grafických programů



OBECNÁ PRAVIDLA ROZVRŽENÍ PRVKŮ NA STRÁNCE

−Logo viditelně a dominantně umístěné v levém horním rohu stránky.

−Navigační menu se nachází v levé části stránky horizontálně pod logem

nebo vertikálně po levé straně.

−Vyhledávání bývá většinou v horní pravé části stránky.

−Textové odkazy jsou podtržené a barevně odlišené od textu.

−Označení aktuální stránky v navigaci, na které se návštěvník nachází.

−Reklamní bannery, loga partnerů, aktuality, atd. v pravém sloupci.

−Informace o tvůrci/majiteli webu, počítadlo, kontakty v zápatí stránky.


Nenuťte návštěvníka přemýšlet !!!

Nabídněte zaběhnuté standardy rozvržení

prvků na webu pro snadnou orientaci.



Vytvoření celého grafického designu (měřítko 1:1), popřípadě

jednotlivých grafických prvků v příslušném grafickém programu:

- dodržovat standardy rozvržení jednotlivých prvků,

- vhodně volit barvy s ohledem na čitelnost a příjemný vzhled

(barevné podání se liší na různých zobrazovacích zařízeních),

- volit jednodušší design, pokud možno bez rušivých prvků,

- hotovou šablonu vyplnit zkušebním textem (www.lipsum.cz)


OPISUJTE OD DRUHÝCH :-)

Při návrhu webdesignu se inspirujte na jiných

stránkách, vytvořených zkušenějšími grafiky.



Rozřezání designu na jednotlivé grafické prvky, především:

- logo,

- obrázek v záhlaví,

- vzorek na pozadí,

- těla sloupců,

- grafické nadpisy,

- tlačítka navigace.

Použití jazyka XHTML a CSS pro vytvoření šablony webové

stránky (formátování a rozmístění grafických a textových prvků).


3. Použití již vytvořené šablony

Doporučené řešení všem, kteří nemají grafické nadání, neovládají vhodný

grafický program (především Fireworks, Photoshop, GIMP) a nemají

dostatečné znalosti XHTML a CSS.

Stažení dostupné šablony (zdarma, placené), např.:

www.sablony.org www.oswd.org www.4templates.com

Rozbalení z archívu (zip, rar) do příslušné složky.

Možnost úpravy webové šablony (nepovinné):

- celkového vzhledu, grafických prvků, stylových (CSS) předpisů.

DOMÉNA, WEBHOSTING

PREZENTACE WEBOVÝCH STRÁNEK

Prezentace webových stránekPrezentace webových stránek

Chceme-li veřejně prezentovat webové stránky na internetu,

potřebujeme doménu a webhosting.

DOMÉNA

Unikátní adresa (URL), identifikující počítač (resp. server) v síti

Internet, na kterém jsou umístěny webové stránky.

(např. www.seznam.cz, chmiel.chytry.cz, atd.).

WEBHOSTING

Služba, pronájem (vytvoření) diskového prostoru pro provoz

webových stránek + další služby (mail, FTP, skriptovací jazyky,

databáze, statistiky, záloha dat, technická podpora, apod.).

Doména webové stránkyDoména webové stránky

Úrovně (řády) domén

Adresu stránky tvoří několik úrovní domény oddělených tečkami:

http://3_úroveň.2_úroveň.1_úroveň

http://chmiel.chytry.cz http://www.seznam.cz

3. úroveň

2. úroveň

1. úroveň

2. úroveň

1. úroveň


http://www.seznam.cz http://chmiel.chytry.cz

1. Úroveň (řád)

Přípona na konci doménového jména (TLD: Top Level Domain)

a.Národní doména (např. cz, sk, pl, de, ru, eu), patřící určitému státu.

Provozovatel registru doménových jmen cz je CZ.NIC (www.nic.cz)

b.Generická doména (např. com, gov, org), nepatří žádnému státu,

vyjadřuje většinou význam domény, např.:

com – komerční gov – vládní org – obecně organizace

Doménu 1. úrovně si nelze jako soukromá osoba přímo registrovat!


http://www.seznam.cz http://www.moje-firma.cz

http://chmiel.chytry.cz http://boucpe.wz.cz

2. Úroveň (řád)

Lze přímo registrovat doménu 2. úrovně, reprezentující název webu.

Roční poplatek závisí na zvolené doméně 1. úrovně, např. za národní

doménu cz se pohybuje v rozmezí 200 až 300 Kč.

V názvu jsou povoleny písmena bez diakritiky, čísla a pomlčky.

Doména musí být volná a unikátní v rámci celé sítě Internet (lze ověřit).

Na freehosting serverech (např. webzdarma.cz) nelze zdarma získat.


http://chmiel.chytry.cz http://sekce.firma.cz

3. Úroveň (řád)

Jedná se o tzv. subdoménu, kterou lze zřídit k existující doméně 2. řádu.

Je možné ji zřídit zcela zdarma, popřípadě za mírný poplatek.

Vlastníme-li doménu 2. řádu (např. firma.cz), lze si většinou vytvářet

subdomény např.: vyzkum.firma.cz vyroba.firma.cz obchod.firma.cz

Existuje několik společností vlastnících doménu 2. řádu, např.:

webzdarma.cz, ic.cz, apod., které nabízejí webhosting a registraci

subdomény zcela zdarma (tzv. freehosting, freewebhosting).


Registrace domény 2. řádu

Provádí tzv. registrátor domény. Registraci domény může zajistit

společnost, která zároveň poskytuje služby webhostingu (doporučeno!).

(např. hukot.cz, banan.cz, pipni.cz, active24.cz, apod.).

Certifikované registrátory cz domén lze nalézt na www.nic.cz.

Ověřit, zda je doména (např. firma.cz) volná. Lze ověřit na www.nic.cz

nebo přímo na stránkách společnosti poskytující webhostingové služby.

Jméno domény by mělo výstižně a jednoduše vyjadřovat prezentovaný

obsah na webových stránkách, musí být zapamatovatelné !



Registrovat jméno pod vhodnou doménou 1. řádu (cz, com, eu, apod.).

Částka se platí na 1 rok, poté je potřeba platnost domény prodloužit.

Platba se provádí:

- buď přímo registrátorovi domény,

- nebo společnosti poskytující hostingové služby.

Pokud je doména obsazená,

lze kontaktovat majitele a domluvit

se na odkoupení, popřípadě registrovat

pod jinou doménou 1. řádu.



Koupit doménu a webhosting u jedné společnosti je výhodné a snadné!

Snadná registrace a finální platba jedné společnosti.

Doména může být levnější (webhostingová společnost nakupuje tisíce

domén – slevy u registrátora).

Nákup přímo u registrátora je složitější.

Vlastnictví domény lze ověřit v registru domén:

pro cz domény na www.nic.cz/whois


Registrace domény 3. řádu (pro webhosting zdarma)

Provádí se přímo na stránkách společnosti hostující stránky,

(např. webzdarma.cz, ic.cz, apod.).

Zvolit si jméno subdomény (doména 3. řádu) + výběr domény 2. řádu,

Registrace domény 3. řádu je triviální a zcela zdarma.

Nevhodné pro firemní stránky (doména může působit nedůvěryhodně).

Webhostingové služby bývají omezené

webové stránky jsou doplněny reklamou, občasné výpadky, špatná

komunikace s provozovatelem domény 2. řádu.

doména 2. řádu

doména 3. řádu

Hosting webových stránekHosting webových stránek

Jedná se o umístění webových stránek na server společně s dalšími

službami (především email, FTP, statistiky, PHP, databáze, apod.) a

jejich přístupnost v rámci celosvětové sítě internet (popřípadě vnitřní

firemní sítě intranet).

Typické možnosti hostování webových stránek

1. Vlastní webový server (počítač) připojený k internetu.

2. Placený webhosting na cizím webovém serveru.

3. Freehosting (webhosting zdarma) na cizím webovém serveru.


1. Vlastní webový server (počítač) připojený k internetu

Výhody

Vlastní webový server s vlastní (přizpůsobenou) konfigurací.

Nevýhody

Vysoké pořizovací a provozní náklady:

- vysoká pořizovací cena serveru + upgrade a opravy,

- nutné rychlé a spolehlivé připojení k Internetu,

- vysoké náklady za odběr elektrické energie (provoz 24 hodin).

Složitá konfigurace, provoz, aktualizace, zálohování, zabezpečení.

Složitější registrace a nastavení vlastní domény 2. řádu.


2. Placený webhosting na cizím serveru

Výhody

O výkonný webový server se starají profesionálové zajišťující:

- nepřetržitý spolehlivý provoz serveru + odstranění poruch,

- zálohování a zabezpečení dat, technickou podporu zákazníkům.

Snadnou registraci domény 2. řádu + možné slevy.

Služby spojené s hostingem (email + antispam + antivir, FTP server,

statistiky, použití skriptovacích jazyků + databáze, atd.).

Nevýhody

Roční poplatek za pronájem diskového prostoru + další služby.


Výběr webhostingové společnosti

Orientovat se podle nabídky, referencí a nakonec podle ceny

- vybírat pouze zaběhnuté, známé společnosti !!!

- výhodné jsou společnosti nabízející webhosting s možností

registrace domény 2. řádu (snadné, jedna platba, možná sleva)

www.hukot.cz www.pipni.cz www.active24.cz www.pes.cz

www.banan.cz www.cesky-hosting.cz

Každá společnost poskytuje několik nabídek, které se liší

parametry a cenou. Vždy objednávejte to, co Vám nyní vyhovuje a je

nutné (s menší rezervou) pro chod webových stránek.


Výběr konkrétního webhostingu

Základní parametry webhostingu:

- velikost diskového prostoru (MB, GB),

- podpora skriptů (PHP, ASP) a databáze (typ, velikost prostoru),

- emailové schránky (počet adres, antispamový filtr, antivir),

- možnost registrace domény 2. řádu,

- tvorba subdomény (např. obchod.firma.cz, vyroba.firma.cz, atd.)

- limit pro přenos dat za měsíc (traffic) – nejlépe neomezeně,

- podpora redakčních systémů,

- technická podpora zákazníkovi (druh komunikace, 24h / 7dní),

- cena za měsíc (vč. DPH).


Výpočet ročních nákladů za provoz webových stránek

Příklad:

Registrace domény:

moje-firma.cz

Webhostingová společnost:

www.hukot.cz

285 Kč / rok


Výpočet ročních nákladů za provoz webových stránek

NÁKLADY = 12 * CENA HOSTINGU + POPLATEK ZA DOMÉNU

Druhý a každý další rok provozu webových stránek:

12 * 79 Kč + 285 Kč = 1233 Kč

První rok provozu webových stránek:

12 * 79 Kč + 0 Kč = 948 Kč

(platí pro webhosting z našeho příkladu, nemusí být pravidlem !!!)


3. Webhosting ZDARMA (freehosting) na cizím serveru

Výhody

Nulové náklady za provoz webových stránek a registraci domény.

Snadné pořízení domény a webhostingu.

V současnosti většinou možnost použití skriptů PHP a databáze.

Nevýhody

Malý diskový prostor, automatická reklama na webu.

Výpadky konektivity, problematická technická podpora.

Nevhodné pro firemní stránky a e-shopy (nedůvěryhodné) a

pro redakční systémy (striktní nastavení některých parametrů).

Přenos stránek na webový serverPřenos stránek na webový server

Pro přenos souborů, které tvoří webové stránky na vzdálený

webový server, se převážně používá protokol FTP (File Transfer

Protocol).

Na webovém serveru je nainstalována aplikace FTP server.

Na straně klienta (správce, tvůrce stránek) je nainstalována

aplikace FTP klient.

FTP server řídí přístup klientů k příslušné složce na webovém

serveru. Dle práv uživatele povoluje / zakazuje některé operace

(čtení, zápis, výmaz, přejmenování souborů a podsložek v této

složce, atd.). Klient využívá k autorizaci a správě FTP klienta.

FTP klientiFTP klienti

FTP klient je integrován v operačním systému (např. Windows):

- spustit příkazový řádek, příkaz cmd, v DOS okně příkaz ftp,

- nutné znát příkazy pro spojení a přenos souborů protokolu FTP.

FTP klient jako samostatná aplikace, např.:

- Total commander (shareware),

- FileZilla (freeware) – velmi kvalitní FTP klient zdarma !

- FTP commander (shareware).

FTP klient jako součást editoru webových stránek, např.:

- Pspad,

- Adobe (dříve Macromedia) Dreamweaver.

FTP klientiFTP klienti

Parametry pro spojení s FTP serverem

Přihlašovací údaje k FTP serveru jsou doručeny na email, který byl

zadán při objednávce webhostingových služeb.

Jedná se především o tyto údaje:

- Hostitel, neboli adresa vzdáleného FTP serveru (vaše doména),

- Přihlašovací jméno (login),

- Heslo (password).

Aplikace FileZilla

Konec modulu TWS_01

Děkuji Vám za pozornost.

tvorba webovÝch strÁnek

Documents