Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Michal Sonnek. Obchodní akademie a Střední odborná škola logistická, Opava, příspěvková organizace. Vzdělávací materiál byl vytvořen v rámci OP VK 1.5 – EU peníze středním školám, registrační číslo CZ.1.07/1.5.00/ Úvod do tvorby webových stránek 1 2. října 2012VY_32_INOVACE_160311_UVOD_DO_TVORBY_WEBOVYCH_STRANEK_ZAKLADNI_POJMY_DUM

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Co je to World Wide Web (WWW)? World Wide 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. 2

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás WWW–fakta z historie Kdy se se objevil? 1989 Kdo je považován za „otce“? Tim Berners-Lee. Místo narození? CERN (Conseuil Europeen pour la Recherche Nucleaire, nyní European Laboratory for Particle Physics). 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ů. 3

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás 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. 4

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás 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. 5

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Obsah stránky, struktura dokumentu Značkovací jazyky: Standard Generalized Markup Language (SGML) HyperText Markup Language (HTML) Extensible Markup Language (XML) Extensible HyperText Markup Language (XHTML) 6

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás 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. 7

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Definice chování stránky Programování na straně klienta: JavaScript, VBScript, Java – Java aplikace, – Java aplety. 8

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Definice chování stránky Programování na straně serveru: – PHP (PHP Hypertext Preprocesor), – ASP.NET. 9

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás 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ů. 10

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Příklady webových serverů ProgramOperační systémVýrobce ApacheApache FoundationLinux Internet Information Server MicrosoftWindows 2003/2008 NginxIgor Sysoevmultiplatformní GWSGoogleUnix, Linux LighttpdlighttpdUnix, Linux, Windows SunOneSun MicrosystemSolaris 11

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás 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 World Wide 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. 12

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Příklady webových prohlížečů Windows Internet Explorer, Mozilla Firefox, Google Chrome, Mosaic Opera, Safari. 13

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás 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. 14

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás 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. 15

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Protokoly webových služeb HTTP (Hypertext Transfer Protocol) HTTPS (http over SSL nebo SecureHTTP) 16

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás URL (Universal Resource Locator) 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. 17

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Příklad URL www stránky. Význam jednotlivých položek: http: – použitý protokol, // – kořenový adresář, – doménové jméno,.com – vrcholová doména, /kontakt/ .cz – cesta souboru na serveru. Pokud by se použil nestandardní typ portu, může mít URL následující tvar: 18

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Organizace spojené s vývojem WWW Web Hypertext Application Technology Working Group (WHATWG) World Wide Web Consortium (W3C) IETF (Internet EngineeringTaskForce) 19

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás World Wide Web Consortium (W3C) World Wide Web Consortium (W3C) je mezinárodní konsorcium, jehož členové společně s veřejností vyvíjejí webové standardy pro World Wide Web. Cílem konsorcia je „Rozvíjet World Wide 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 Tim Berners-Lee, tvůrce služby Webu a primární autor specifikací URL (Uniform Resource Locator), HTTP (HyperText Transfer Protocol) a HTML (HyperText Markup Language) – základních pilířů Webu. 20

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Web Hypertext Application Technology Working Group (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, Mozilla Foundation, Opera Software či Apple Computer. 21

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás 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. 22

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Ú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ů. 23

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Ú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čů. 24

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Své znalosti si zopakujte v zde. Kvíz 25

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Zdroje WORLD WIDE WEB CONSORTIUM (W3C). World Wide Web Consortium (W3C) [online] March 2012 [cit ]. Dostupné z: IETF. The Internet Engineering Task Force (IETF) [online] [cit ]. Dostupné z: WHATWG. Web Hypertext Application Technology Working Group [online] [cit ]. Dostupné z: LUBBERS, Peter, Brian ALBERS a Frank SALIM. HTML5: Programujeme moderní webové aplikace. Holandská 3, , Brno: Computer Press, a.s., ISBN GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 a CSS3: Pro webové designery. Nové sady 18, Brno: Zoner Press, ISBN PHP: Hypertext Preprocessor [online] [cit ]. Dostupné z: MICROSOFT. ASP.NET [online] [cit ]. Dostupné z: 26