TVORBA WEBOVÝCH STRÁNEK

1. TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_01 Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE

2. 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 • Volba vhodného designu webové stránky • Registrace doménového jména webové stránky • Hostování webových stránek na vzdáleném webovém serveru • FTP – přenos souborů webové stránky na webový server

3. 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 !

4. ZÁKLADNÍ POJMY

5. 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).

6. 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.

7. 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

8. Prohlížeč webových stránek Konqueror

9. 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í !!!

10. Editor webových stránek Program pro tvorbu kódu webové stránky. Existují tři druhy: • 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,

12. Editor webových stránek • 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.

14. Editor webových stránek • WYSIWYG editory„WhatYouSeeIsWhatYouGet“ (č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 !

15. Panel nástrojů

16. 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.

17. 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

18. Užitečný tip: Validní (bezchybný) kód webové stránkydle zvoleného standardu (HTML, XHTML) je dobrou vizitkou profesionála !!!

19. 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ů.

20. Pro vkládání a formátování textového obsahu slouží jednoduchý WYSIWYG editor.

21. 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!

22. Známé redakční systémy (CMS) • JOOMLA!České stránky projektu: www.joomlaportal.czOficiální stránky projektu: www.joomla.org • DRUPALČeské stránky projektu: www.drupal.czOficiální stránky projektu: www.drupal.org • WordPressČeské stránky projektu: www.cwordpress.czOficiální stránky projektu: www.wordpress.org

23. 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.

24. Princip služby webových stránek Klientský webový prohlížeč zašle požadavek o zobrazení stránky. 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. 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. Databázový server tento dotaz zpracuje a výsledek odešle zpět PHP enginu. 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. Webový server pošle výslednou statickou HTML stránku klientskému webovému prohlížeči, který o tuto stránku požádal.

25. 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ů

26. 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

27. 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 pozicovata 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.

28. 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).

29. OBSAH WEBOVÝCH STRÁNEK VÝBĚR A PŘÍPRAVA

30. 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.

31. 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.

32. 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,

33. 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!

34. 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.

35. 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.

36. 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).

37. 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 !!!

38. 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ě.

39. Příprava obsahu webové stránky FOTOGRAFIE, OBRÁZKYBude 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).

40. 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.

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

42. 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 FlashConverter“- 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

43. Free Video To FlashConverter

44. DESIGN WEBOVÝCH STRÁNEK OBECNÁ PRAVIDLA NÁVRHU A TVORBY

45. Ú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.

46. 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.

47. 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): • zadá zakázku profesionálnímu grafikovi, • navrhne a vytvoří si šablonu sám, • využije některé z vytvořených šablon (zdarma, placené).

48. 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 grafikemprojedná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

49. 20 000 Kč 25 000 Kč

50. Užitečný tip: Pro komerčně zaměřené webové stránky se investice do profesionálního designu vyplatí.