TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_01 Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova 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 1
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 2
Webová 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á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. 3
Prohlíž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ánek Konqueror 4
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á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, 5
Editor 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. 6
Editor 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! 7
Panel nástrojů Validá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. 8
Vý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: Validní (bezchybný) kód webové stránky dle zvoleného standardu (HTML, XHTML) je dobrou vizitkou profesionála!!! 9
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. 10
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) 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 11
Princip 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ánek 1. 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. 12
Forma 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á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 13
Forma 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: 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). 14
OBSAH WEBOVÝCH STRÁNEK VÝBĚR A PŘÍPRAVA Vý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. 15
Obecná 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 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, 16
Obecná 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 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. 17
Pří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á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). 18
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á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ě. 19
Pří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á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. 20
Nefunkční obrázková navigační lišta!!! Pří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 21
Free Video To Flash Converter DESIGN WEBOVÝCH STRÁNEK OBECNÁ PRAVIDLA NÁVRHU A TVORBY 22
Ú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 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. 23
Mož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 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 24
20 000 Kč 25 000 Kč Užitečný tip: Pro komerčně zaměřené webové stránky se investice do profesionálního designu vyplatí. 25
Mož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 26
Ručně kreslený model webové stránky Ručně kreslený model webové stránky 27
Použití grafických programů Použití grafických programů 28
Mož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: Nenuťte návštěvníka přemýšlet!!! Nabídněte zaběhnuté standardy rozvržení prvků na webu pro snadnou orientaci. 29
Mož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) 30
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 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ů). 31
Mož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 32
Prezentace 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á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ň 33
Doména webové stránky 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://chmiel.chytry.cz Doména webové stránky 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://www.seznam.cz http://chmiel.chytry.cz http://www.moje-firma.cz http://boucpe.wz.cz 34
Doména webové stránky 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). http://chmiel.chytry.cz http://sekce.firma.cz Domé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é! 35
Domé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á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 36
Domé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 3. řádu doména 2. řádu 37
Hosting 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á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. 38
Hosting 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á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. 39
Hosting 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á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 40
Hosting 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 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!!!) Druhý a každý další rok provozu webových stránek: 12 * 79 Kč + 285 Kč = 1233 Kč Hosting 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ů). 41
Př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 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. 42
FTP 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 43
Aplikace FileZilla Aplikace FileZilla 44
Aplikace FileZilla Konec modulu TWS_01 Děkuji Vám za pozornost. 45