tvorba webovÝch strÁnek
DESCRIPTION
TVORBA WEBOVÝCH STRÁNEK. Výukový modul TWS_01Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE. Osnova výukového modulu TWS_01. Úvod, motivace Základní pojmy a doporučení Princip služby webových stránek Pravidla výběru a přípravy obsahu webových stránek - PowerPoint PPT PresentationTRANSCRIPT
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,
Editor webových stránekEditor webových stránek
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.
Editor webových stránekEditor webových stránek
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
Užitečný tip:Užitečný tip:
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.
Užitečný tip:Užitečný tip:
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.
Obecná pravidla výběru obsahuObecná pravidla výběru obsahu
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,
Obecná pravidla výběru obsahuObecná pravidla výběru obsahu
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!
Obecná pravidla výběru obsahuObecná pravidla výběru obsahu
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.
Příprava obsahu webové stránkyPříprava obsahu webové stránky
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).
Užitečný tip:Užitečný tip:
Zvýrazněná slova (resp. části textu) mohou
přitáhnout pozornost čtenáře,
nic se však nemá přehánět !!!
Příprava obsahu webové stránkyPříprava obsahu webové stránky
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ě.
Příprava obsahu webové stránkyPříprava obsahu webové stránky
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).
Příprava obsahu webové stránkyPříprava obsahu webové 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 !!!
Příprava obsahu webové stránkyPříprava obsahu webové stránky
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.
Možnosti návrhu a tvorby webdesignuMožnosti návrhu a tvorby webdesignu
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é).
Možnosti návrhu a tvorby webdesignuMožnosti návrhu a tvorby webdesignu
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č
Užitečný tip:Užitečný tip:
Pro komerčně zaměřené webové stránky se
investice do profesionálního designu vyplatí.
Možnosti návrhu a tvorby webdesignuMožnosti návrhu a tvorby webdesignu
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
Ručně kreslený model webové stránky
Ručně kreslený model webové stránky
Použití grafických programů
Použití grafických programů
Možnosti návrhu a tvorby webdesignuMožnosti návrhu a tvorby webdesignu
2. Návrh a tvorba vlastní šablony
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.
Užitečný tip:Užitečný tip:
Nenuťte návštěvníka přemýšlet !!!
Nabídněte zaběhnuté standardy rozvržení
prvků na webu pro snadnou orientaci.
Možnosti návrhu a tvorby webdesignuMožnosti návrhu a tvorby webdesignu
2. Návrh a tvorba vlastní šablony
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)
Užitečný tip:Užitečný tip:
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.
Možnosti návrhu a tvorby webdesignuMožnosti návrhu a tvorby webdesignu
2. Návrh a tvorba vlastní šablony
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ů).
Možnosti návrhu a tvorby webdesignuMožnosti návrhu a tvorby webdesignu
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ň
Doména webové stránkyDoména webové stránky
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!
Doména webové stránkyDoména webové stránky
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.
Doména webové stránkyDoména webové stránky
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).
Doména webové stránkyDoména webové stránky
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é !
Doména webové stránkyDoména webové stránky
Registrace domény 2. řádu
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.
Doména webové stránkyDoména webové stránky
Registrace domény 2. řá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
Doména webové stránkyDoména webové stránky
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.
Hosting webových stránekHosting webových stránek
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.
Hosting webových stránekHosting webových stránek
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.
Hosting webových stránekHosting webových stránek
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.
Hosting webových stránekHosting 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).
Hosting webových stránekHosting webových stránek
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
Hosting webových stránekHosting webových stránek
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 !!!)
Hosting webových stránekHosting webových stránek
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
Aplikace FileZilla
Aplikace FileZilla
Aplikace FileZilla
Konec modulu TWS_01
Děkuji Vám za pozornost.