3. Webové technologie Martin Krčál Náplň hodiny q webové technologie q XML a od něj odvozené formáty q budoucnost webu Jazyk HTML q základem tvorby stránek q HyperText Markup Language q odvozen od SGML q rozvržení dokumentu a odkazů q Tim Berners Lee - CERN (1990) Vývoj HTML q 0.9 - nepodporuje grafický režim (1991) q 2.0 - formuláře a podpora grafiky (1994) q 3.0 - nekoncepční, Netscape (1995) q 3.2 - tabulky, styly, W3C (1997) q 4.0 - frames, sémantika, W3C (1998) q 4.01 - opravuje chyby, W3C (1999) XHTML q eXtensible Hypertext Markup Language q W3C (od 2000) q původně nástupce HTML 4.01 q založeno na XML Verze XHTML q 1.0 (2000, revize 2003) - tři varianty: v Strict - struktury, obsahu, grafika v Transitional - přechodná varianta, umožňuje používání překonaných tagů v Frameset - jako Trans + podpora rámců q 1.1 - nejpřísnější XHTML q 2.0 - návrh specifikace HTML 5.0 - nová budoucnost? q 7.3.2007 - vytvořena pracovní skupina HTML q založeno na Web Applications 1.0 a Web Forms 2.0 z iniciativy WHATWG Základní rozdíly mezi HTML 4.01 a XHTML 1.0 q správné zanoření tagů Základní rozdíly mezi HTML 4.01 a XHTML 1.0 q všechny tagy uzavřené Základní rozdíly mezi HTML 4.01 a XHTML 1.0 q hodnoty atributů se píší do uvozovek Základní rozdíly mezi HTML 4.01 a XHTML 1.0 q tagy a atributy se píší malým písmenem Základní rozdíly mezi HTML 4.01 a XHTML 1.0 q krácení atributů Základní rozdíly mezi XHTML 1.0 Strict a XHTML 1.1 q nový atribut id nahradil původní name q u všech tagů odstraněn tag lang a nahrazen xml:lang q přidána kolekce ruby v definice zkratek v definice výslovnosti Validita zdrojového kódu q specializované nástroje v validator.w3.org (W3C) v rozšíření do prohlížeče (např. HTML Validator, Web Developer Toolbar) v off-line validátory (Offline HTML Validator v 2.0) Web Developer Toolbar HTML Validator Kaskádové styly (CSS) q Cascading Style Sheets (W3C) - 1997 q formátování (X)HTML q cíl ð oddělit vzhled dokumentu od jeho struktury a obsahu q aktuální verze CSS2 q CSS3 ð definice sloupců Proč používat CSS q širší možnosti formátování textu q jednoduché přestylování q konzistentní styl q rychlejší načítání stránky q různé styly pro různá výstupní zařízení v tiskový styl, PDA, mobil, internetový prohlížeč Nevýhody stylů q špatná podpora v prohlížečích v stejný kód se může načíst v různých prohlížečích různě v problémy zejména IE v např. IE ignoruje max-width, min-width v různě počítaná šířka elementů v IE a FF při použití paddingu Ukázka fungování CSS q http://citace.com/Skola JavaScript q vytvořil Brendan Eich (Netscape) - 1995 q objektově orientovaný skriptovací jazyk q provádí se na straně klienta q od roku 1997 standardizován (ECMA a ISO) ð ECMAScript (od něj odvozen např. ActionScript) JavaScript q využití javascriptu: v ovládání interaktivních prvků (ověřování formulářů, dynamické menu) v efekty (přechody stránek) v animace (létající šipky, padající sníh) q nevýhoda - možnost vypnutí podpory JS v prohlížeči JS - zajímavé odkazy q http://javascript.internet.com q http://www.scripts.com/java-scripts/ q http://www.javascript.com q http://www.hotscripts.com/JavaScript q http://java.tatousek.cz DOM q Document Object Model q rozhraní pro přístup k jednotlivým částem nebo prvkům (X)HTML q využívá JavaScript q 3 úrovně (level 1,2,3) q základem DHTML AJAX q Asynchronous JavaScript and XML q mění obsah stránek bez znovunačtení q HTML, JavaScript, XML, XMLHttpRequest q cíl ð uživatelský komfort q vyžadují použití moderních prohlížečů AJAX q výhody v odstranění nutnosti načtení stránek při každé operaci (server posílá pouze tu část stránky, která se změnila) v snižování zátěže webových serverů a sítí q nevýhody v vazba na moderní prohlížeče v při nevhodném užití snižují použitelnost Využití AJAXu v praxi q služby Googlu v Google Maps v Gmail q Microsoft v Outlook Web Access q jiné v našeptávače, ankety, formuláře apod. Praktické ukázky Ajaxu q fotogalerie, prohlížeč fotografií q upoutávka na pořady q polaroid q popisky fotografií q vyhledávání (našeptávač) q tag clouds q tabulky q hlasování Flash q technologie pro vektorové animace q Adobe Flash CS3 q ActionScript 3.0 q interaktivní animace, prezentace, hry q složité animace, ale malé soubory ð ideální pro web??? Proč se Flashi vyhnout q špatná indexace vyhledávači q nevhodné pro handicapované q špatná podpora starších prohlížečů q obtížnější aktualizace v nevhodné pro rozsáhlejší a často aktualizované texty, RS apod. Programovací jazyky q pro programování dynamických stránek v webové aplikace a online služby q běží na straně serveru q nejpoužívanější PHP a ASP q propojení na databázové systémy v MySQL, Oracle, ODBC, PostgreSQL,… PHP q programování dynamických stránek q nezávislé na platformě q vychází z Perlu, C, Javy a Pascalu q poměrně jednoduché na pochopení q LAMP = Linux, Apache, MySQL, PHP q aktuální verze 5.3.0 (2009) PHP q rozsáhlé knihovny a moduly q spolupráce s většinou databází q podpora většiny internetových protokolů v HTTP, SMTP, FTP, IMAP, POP3,… q objektové programování (od verze 5) PHP scripty q http://www.php.net q http://www.hotscripts.com/PHP/index.html q http://www.phpbuilder.com q http://www.scriptsbank.com q http://www.builder.cz q http://interval.cz/vyvoj-aplikaci/php ASP q Active Server Pages q vyvíjí Microsoft q běží na serverech s OS Windows q aktuální verze ASP.NET 2.0 XML q eXtensible Markup Language q obecný značkovací jazyk (nemá tagy) q základem pro konkrétní značkovací jazyky (DC, RDF, RSS, DocBook,…) XML a vzhled dokumentu q definuje pouze strukturu dokumentu z hlediska věcného obsahu q nezabývá se vzhledem q vzhled se definuje připojeným stylem v CSS, XSL (XSLT) XML q definuje vazby mezi prvky q prvky nejsou pevně dané q charakter: (ne)opakovatelné q DTD - definice použitých prvků q XML parser - program pro kontrolu XML q kódování - primárně v UTF-8 Využití XML q prezentace informací q ukládání informací q výměna informací q popis informací (metadata) q získávání informací Využití XML v praxi q XHTML q DC, RDF, SMIL - metadata dokumentu q RSS - novinky na webu q DocBook - publikační styly q SVG, Jabber, SOAP, MathML, nové MS Office Ukázky XML dokumentu q http://www.citace.com/Skola/eknihy.xml q XML výstup při hledání v SRU Dublin Core q soubor metadatových prvků q pro popis digitálních objektů (i HTML) q usnadňuje vyhledávání e-zdrojů q založen na XML q název odvozen od města Dublin (USA) Prvky DC q 16 základních prvků v Title, Creator, Subject, Description, Publisher, Contributor, Date, Type, Format, Identifier, Source, Language, Relation, Coverage, Rights, Audience q Generátor metadat q správce v ČR - KIC ICS FI MU Výhody DC q jednoduchost q sémantická interoperabilita q mezinárodní podpora q rozšiřitelnost q modifikovatelnost Více info o DC q http://www.dublincore.org q http://www.ics.muni.cz/dublin_core q http://www.ukoln.ac.uk/cgi-bin/dcdot.pl q http://www.webarchiv.cz/generator/dc/dc.cgi RSS q slouží ke sdílení obsahu q standardizovaný formát (XML) q pro weby s častou aktualizací q nejčastější uplatnění: v zpravodajské servery, blogy q nejpoužívanější verze RSS 0.91 a 2.0 Jak RSS funguje? RSS a návštěvnost q obava webmasterů z úbytku návštěvníků stránek q nepotvrdila se, spíše opak q větší povědomí s tím, co je na webu nového Možnosti využití dat z RSS kanálů q osobní RSS čtečky q agregátory RSS kanálů (mixování informací) RSS v praxi q ukázka RSS kanálu (iDnes) q podobné formáty: v ATOM 1.0 v CDF (Microsoft, neprosadil se) Web 2.0 q Definice??? Přechod na Web 2.0 q v začátcích internetu zejména statické stránky ð prezentace informací q dnes přechod na online služby = služby dostupné přes internet q nová generace služeb - mluvíme o fenoménu Web 2.0 Web 2.0 q Znáte nějaké služby??? Web 2.0 – nejznámější služby q Wikipedia q YouTube q Flickr q del.icio.us q CiteULike q … Web 3.0 a 4.0 q Web 3.0 v sémantický web v strojově čitelný web (databáze) q Web 4.0 v WebOS v umělá inteligence A na závěr… Závěr Martin Krčál krcal@fss.muni.cz