Úvod do tvorby webových stránek

1. 2. října 2012 VY_32_INOVACE_160311_UVOD_DO_TVORBY_WEBOVYCH_STRANEK_ZAKLADNI_POJMY_DUM Úvod do tvorby webových stránek

2. Co je to WorldWide Web (WWW)? WorldWide Web (WWW, W3 nebo web) je systém webových serverů, které umožňují přenos a prohlížení hypertextových dokumentů. Hypertextový dokument je nelineární informační zdroj. Obsahuje odkazy na další hypertextové dokumenty.

3. WWW–fakta z historie • Kdy se se objevil? 1989 • Kdo je považován za „otce“? TimBerners-Lee. • Místo narození? CERN (ConseuilEuropeenpour la RechercheNucleaire, nyní EuropeanLaboratoryforParticlePhysics). • K čemu měla služba WWW sloužit? Prostředek komunikace pro výzkumné pracovníky a pracovní týmy z odlehlých pracovišť. Sdílení dokumentů.

4. Příčiny rozšíření WWW • Postoj CERNu k vývoji projektu. CERN zveřejnil zdrojové kódy celého systému. Od počátku byla podporována spolupráce s akademickou a komerční sférou. • Systémové požadavky na provoz služby WWW nebyly velké, poskytovateli obsahu se mohly stát instituce s omezenými prostředky. • V prostředí hypertextu je možné intuitivní ovládání – mohli jej využívat i nezkušení uživatelé. • Používání PC se stává v první polovině devadesátých let masovou záležitostí. • Microsoft začlenil prohlížeč Internet Explorer do operačního systému Windows. Tím pohodlně nabídl uživatelům základní nástroj. • Programové prostředky na tvorbu webu byly jednoduché. • Podstata WWW je nezávislá na použitých operačních systémech. • Informace je možné prezentovat v podobě textu, obrázků, multimédií,… • Mnohem lepší produkt než předešlý informační systém Gopher.

5. Programové prostředky používané pro tvorbu webových stránek Kód, ve kterém je vytvořena webová stránka, provádí tři základní činnosti: • Vytváří vlastní informační obsah stránky. Definuje strukturu dokumentu. • Specifikuje vzhled stránky. • Řídí chování obsahu.

6. Obsah stránky, struktura dokumentu Značkovací jazyky: • Standard GeneralizedMarkupLanguage (SGML) • HyperTextMarkupLanguage (HTML) • ExtensibleMarkupLanguage (XML) • ExtensibleHyperTextMarkupLanguage (XHTML)

7. Definice vzhledu stránky • K definici vzhledu stránky dnes slouží CSS (Cascading Style Sheets). Zápis formátu je nejčastěji umístěn v externím souboru. • Nastavení CSS je stejné pro HTML, XHTML, XML.

8. Definice chování stránky Programování na straně klienta: • JavaScript, • VBScript, • Java • Java aplikace, • Java aplety.

9. Definice chování stránky • Programování na straně serveru: • PHP (PHP Hypertext Preprocesor), • ASP.NET.

10. Fungování WWW Služba WWW funguje na principu klient/server. Klient Webový prohlížeč v PC uživatele. Server Webový server, který je odpovědný za vyřizování požadavků od klientů.

11. Příklady webových serverů

12. Webový prohlížeč Webový prohlížeč (browser) je počítačový program, který slouží k prohlížení informačního obsahu poskytovaného službou WorldWide Webu (WWW). Prohlížeč umožňuje komunikaci s webovým serverem pomocí protokolu http (https). Zpracuje přijatý kód (HTML, XHTML, XML apod.), který podle daných standardů zformátuje a zobrazí webovou stránku.

13. Příklady webových prohlížečů • Windows Internet Explorer, • MozillaFirefox, • Google Chrome, • Mosaic Opera, • Safari.

14. WYSIWYG editory Zobrazují stránku už při psaní tak, jak bude vypadat v prohlížeči a kód se generuje automaticky. Výhodou je jednoduchá obsluha, není nutná znalost jazyka HTML. Problém může být nestandardně vytvořený kód. Příklady: • Microsoft FrontPage, • Dreamweaver, • Adobe GoLive, • NVU, • MS Expression Web.

15. WYSIWYM editory Jejich obsluha není tak jednoduchá jako u předešlé skupiny. Uživatel musí znát jazyk HTML (XHTML), CSS. Editor umožňuje hlavně rychlé zadávání značek, jejich význam ale musí znát autor webové stránky. Výhodou je oddělení obsahu a výsledného formátu dokumentu. Obecně jsou vhodnější pro vytvoření validního kódu webových stránek. Příklady: • Lyx, • WYMeditor, • HomeSite, • Notepad++, • EasyPad, • PsPAD.

16. Protokoly webových služeb • HTTP (Hypertext Transfer Protocol) • HTTPS (http over SSL nebo SecureHTTP)

17. URL (UniversalResourceLocator) URL slouží k jednoznačnému označení zdroje v distribuovaném informačním systému a Internetu (intranetu). URL zahrnuje specifikaci metody přístupu ke zdroji a umístění vlastního zdroje.

18. Příklad URL www stránky. http://www.firma.com/kontakt/email.cz Význam jednotlivých položek: • http: – použitý protokol, • // – kořenový adresář, • www.firma.com – doménové jméno, • .com – vrcholová doména, • /kontakt/email.cz – cesta souboru na serveru. Pokud by se použil nestandardní typ portu, může mít URL následující tvar: http://www.autoprodej.com.cz:82

19. Organizace spojené s vývojem WWW • Web Hypertext Application Technology Working Group (WHATWG) http://www.whatwg.org/ • WorldWide Web Consortium (W3C) http://www.w3.org/ • IETF (Internet EngineeringTaskForce) http://www.ietf.org/

20. WorldWide Web Consortium (W3C) WorldWide Web Consortium (W3C) je mezinárodní konsorcium, jehož členové společně s veřejností vyvíjejí webové standardy pro WorldWide Web. Cílem konsorcia je „Rozvíjet WorldWide Web do jeho plného potenciálu vývojem protokolů a směrnic, které zajistí dlouhodobý růst Webu“. W3C se také zabývá vzděláním a přístupností, vyvíjí software a nabízí otevřenou diskuzi o Webu prostřednictvím fóra. Konsorciu předsedá jeho zakladatel TimBerners-Lee, tvůrce služby Webu a primární autor specifikací URL (UniformResourceLocator), HTTP (HyperText Transfer Protocol) a HTML (HyperTextMarkupLanguage) – základních pilířů Webu.

21. Web Hypertext Application Technology WorkingGroup (WHATWG) Založení WHATWG v roce 2004 bylo odpovědí na pomalý vývoj webových standardů pod vedením W3C. Řada členů WHATWG se však podílí též na standardech od W3C a samotná pracovní skupina se snaží připravit specifikace tak, aby je bylo možné schválit přímo W3C. Organizace využívá přínos konkrétních přispěvatelů, jako jsou Google, MozillaFoundation, Opera Software či Apple Computer.

22. IETF (Internet EngineeringTaskForce) Organizace s rozsáhlým záběrem zájmů. Zabývá se především standardy TCP/IP a soubory internetových protokolů. Jedná se o otevřenou organizaci vydávající standardy, nevyžadující žádné formální členství nebo členské požadavky. Všichni členové, včetně nejvyšších představitelů jsou dobrovolníci a jejich práce je většinou financována jejich zaměstnavateli nebo sponzory. Z hlediska tvorby WWW stránek tato organizace je odpovědná za vývoj protokolu http/https.

23. Úkol č. 1 Budete vytvářet webovou prezentaci pro váš třídní projekt. Víte, že vaši perspektivní uživatelé používají celou řadu prohlížečů různých verzí od různých výrobců. Vaším úkolem je zjistit podporu používaných webových technologií u jednotlivých browserů.

24. Úkol č. 2 Klíčovým programem pro uživatele služby WWW je prohlížeč. Zjistěte, jaké jsou tržní podíly nejrozšířenějších prohlížečů.

25. Své znalosti si zopakujte v zde. • Kvíz

26. Zdroje • WORLD WIDE WEB CONSORTIUM (W3C). WorldWide Web Consortium (W3C) [online]. http://www.w3.org/. 27 March 2012 [cit. 2012-10-02]. Dostupné z: http://www.w3.org • IETF. The Internet EngineeringTaskForce (IETF) [online]. 2012-04-05 [cit. 2012-10-02]. Dostupné z: http://www.ietf.org/ • WHATWG. Web Hypertext Application Technology WorkingGroup [online]. 2012-04-05 [cit. 2012-10-02]. Dostupné z: http://www.whatwg.org/ • LUBBERS, Peter, Brian ALBERS a Frank SALIM. HTML5: Programujeme moderní webové aplikace. Holandská 3, 639 00, Brno: ComputerPress, a.s., 2011. ISBN 978-80-251-3539-6. • GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 a CSS3: Pro webové designery. Nové sady 18, 602 00 Brno: ZonerPress, 2011. ISBN 978-80-7413-166-0. • PHP: Hypertext Preprocessor [online]. 2012-04-15 [cit. 2012-10-02]. Dostupné z: http://www.php.net/ • MICROSOFT. ASP.NET [online]. 2012-04-15 [cit. 2012-10-02]. Dostupné z: http://www.asp.net/