Kurz pro studenty oboru Informační studia a knihovnictví 3. Webové technologie Martin Krčál Brno, FF MU, 10.3.2011 Náplň hodiny qwebové technologie qXML a od něj odvozené formáty qbudoucnost webu Webové technologie Jazyk HTML qzákladem tvorby stránek qHyperText Markup Language qodvozen od SGML qrozvržení dokumentu a odkazů qTim Berners Lee - CERN (1990) Vývoj HTML q0.9 - nepodporuje grafický režim (1991) q2.0 - formuláře a podpora grafiky (1994) q3.0 - nekoncepční, Netscape (1995) q3.2 - tabulky, styly, W3C (1997) q4.0 - frames, sémantika, W3C (1998) q4.01 - opravuje chyby, W3C (1999) XHTML qeXtensible Hypertext Markup Language qW3C (od 2000) qpůvodně nástupce HTML 4.01 qzaloženo na XML Verze XHTML q1.0 (2000, revize 2003) - tři varianty: vStrict - struktury, obsahu, grafika vTransitional - přechodná varianta, umožňuje používání překonaných tagů vFrameset - jako Trans + podpora rámců q1.1 - nejpřísnější XHTML q2.0 - návrh specifikace HTML 5.0 - nová budoucnost? q7.3.2007 - vytvořena pracovní skupina HTML qzaloženo na Web Applications 1.0 a Web Forms 2.0 z iniciativy WHATWG qodkazy vhttp://www.w3.org/TR/html5 - specifikace vhttp://zdrojak.root.cz/serialy/webdesigneruv-pruvodce-po-html5 vhttp://interval.cz/clanky/seznameni-s-html-5 v Základní rozdíly mezi HTML 4.01 a XHTML 1.0 qsprávné zanoření tagů Œ

text

�

text

Základní rozdíly mezi HTML 4.01 a XHTML 1.0 qvšechny tagy uzavřené Œ text
�

text

Ž text
Základní rozdíly mezi HTML 4.01 a XHTML 1.0 qhodnoty atributů se píší do uvozovek Œ odkaz � odkaz Ž odkaz Základní rozdíly mezi HTML 4.01 a XHTML 1.0 qtagy a atributy se píší malým písmenem Œ odkaz � odkaz Ž odkaz Základní rozdíly mezi HTML 4.01 a XHTML 1.0 qkrácení atributů Œ � Základní rozdíly mezi XHTML 1.0 Strict a XHTML 1.1 qnový atribut id nahradil původní name qu všech tagů odstraněn tag lang a nahrazen xml:lang qpřidána kolekce ruby vdefinice zkratek vdefinice výslovnosti Validita zdrojového kódu qspecializované nástroje vvalidator.w3.org (W3C) vrozšíření do prohlížeče (např. HTML Validator, Web Developer Toolbar) voff-line validátory (HTML Tidy) Web Developer Toolbar HTML Validator Kaskádové styly (CSS) qCascading Style Sheets (W3C) - 1997 qformátování (X)HTML qcíl ð oddělit vzhled dokumentu od jeho struktury a obsahu qaktuální verze CSS2 qCSS3 ð definice sloupců Proč používat CSS qširší možnosti formátování textu qjednoduché přestylování qkonzistentní styl qrychlejší načítání stránky qrůzné styly pro různá výstupní zařízení vtiskový styl, PDA, mobil, internetový prohlížeč Nevýhody stylů qšpatná podpora v prohlížečích vstejný kód se může načíst v různých prohlížečích různě vproblémy zejména IE vnapř. IE ignoruje max-width, min-width vrůzně počítaná šířka elementů v IE a FF při použití paddingu v Ukázka fungování CSS qhttp://skola.citace.com JavaScript qvytvořil Brendan Eich (Netscape) - 1995 qobjektově orientovaný skriptovací jazyk qprovádí se na straně klienta qod roku 1997 standardizován (ECMA a ISO) ð ECMAScript (od něj odvozen např. ActionScript) q JavaScript qvyužití javascriptu: vovládání interaktivních prvků (ověřování formulářů, dynamické menu) vefekty (přechody stránek) vanimace (létající šipky, padající sníh) qnevýhoda - možnost vypnutí podpory JS v prohlížeči q JS - zajímavé odkazy qhttp://javascript.internet.com qhttp://www.scripts.com/java-scripts/ qhttp://www.javascript.com qhttp://www.hotscripts.com/JavaScript qhttp://java.tatousek.cz DOM qDocument Object Model qrozhraní pro přístup k jednotlivým částem nebo prvkům (X)HTML qvyužívá JavaScript q3 úrovně (level 1,2,3) qzákladem DHTML AJAX qAsynchronous JavaScript and XML qmění obsah stránek bez znovunačtení qHTML, JavaScript, XML, XMLHttpRequest qcíl ð uživatelský komfort qvyžadují použití moderních prohlížečů AJAX qvýhody vodstranění nutnosti načtení stránek při každé operaci (server posílá pouze tu část stránky, která se změnila) vsnižování zátěže webových serverů a sítí qnevýhody vvazba na moderní prohlížeče vpři nevhodném užití snižují použitelnost Využití AJAXu v praxi qslužby Googlu vGoogle Maps vGmail qMicrosoft vOutlook Web Access qjiné vnašeptávače, ankety, formuláře apod. Praktické ukázky Ajaxu qfotogalerie, prohlížeč fotografií qupoutávka qpolaroid qpopisky fotografií, efekty s obrázky qvyhledávání (našeptávač) qtag clouds qtabulky qhlasování Flash qtechnologie pro vektorové animace qAdobe Flash CS5 qActionScript 3.0 qinteraktivní animace, prezentace, hry qsložité animace, ale malé soubory ð ideální pro web??? Proč se Flashi vyhnout qšpatná indexace vyhledávači qnevhodné pro handicapované qšpatná podpora starších prohlížečů qobtížnější aktualizace vnevhodné pro rozsáhlejší a často aktualizované texty, RS apod. qukázka: Zvonilka, Shrek Programovací jazyky qpro programování dynamických stránek vwebové aplikace a online služby qběží na straně serveru qnejpoužívanější PHP a ASP qpropojení na databázové systémy vMySQL, Oracle, ODBC, PostgreSQL,… q PHP qprogramování dynamických stránek qnezávislé na platformě qvychází z Perlu, C, Javy a Pascalu qpoměrně jednoduché na pochopení qLAMP = Linux, Apache, MySQL, PHP qaktuální verze 5.3.0 (2009) PHP qrozsáhlé knihovny a moduly qspolupráce s většinou databází qpodpora většiny internetových protokolů vHTTP, SMTP, FTP, IMAP, POP3,… qobjektové programování (od verze 5) q PHP scripty qhttp://www.php.net qhttp://www.hotscripts.com/PHP/index.html qhttp://www.phpbuilder.com qhttp://www.scriptsbank.com qhttp://www.builder.cz qhttp://interval.cz/vyvoj-aplikaci/php q ASP qActive Server Pages qvyvíjí Microsoft qběží na serverech s OS Windows qaktuální verze ASP.NET 2.0 XML XML qeXtensible Markup Language qobecný značkovací jazyk (nemá tagy) qzákladem pro konkrétní značkovací jazyky (DC, RDF, RSS, DocBook,…) XML a vzhled dokumentu qdefinuje pouze strukturu dokumentu z hlediska věcného obsahu qnezabývá se vzhledem qvzhled se definuje připojeným stylem vCSS, XSL (XSLT) q q XML qdefinuje vazby mezi prvky qprvky nejsou pevně dané qcharakter: (ne)opakovatelné qDTD - definice použitých prvků qXML parser - program pro kontrolu XML qkódování - primárně v UTF-8 Využití XML qprezentace informací qukládání informací qvýměna informací qpopis informací (metadata) qzískávání informací Využití XML v praxi qXHTML qDC, RDF, SMIL - metadata dokumentu qRSS - novinky na webu qDocBook - publikační styly qSVG, Jabber, SOAP, MathML, nové MS Office Ukázky XML dokumentu qhttp://skola.citace.com/eknihy.xml qXML výstup při hledání v SRU q Dublin Core qsoubor metadatových prvků qpro popis digitálních objektů (i HTML) qusnadňuje vyhledávání e-zdrojů qzaložen na XML qnázev odvozen od města Dublin (USA) Prvky DC q16 základních prvků vTitle, Creator, Subject, Description, Publisher, Contributor, Date, Type, Format, Identifier, Source, Language, Relation, Coverage, Rights, Audience qGenerátor metadat qsprávce v ČR - KIC ICS FI MU Výhody DC qjednoduchost qsémantická interoperabilita qmezinárodní podpora qrozšiřitelnost qmodifikovatelnost q Více info o DC qhttp://www.dublincore.org qhttp://www.ics.muni.cz/dublin_core qhttp://www.ukoln.ac.uk/cgi-bin/dcdot.pl qhttp://www.webarchiv.cz/generator/dc_generator.php RSS qslouží ke sdílení obsahu qstandardizovaný formát (XML) qpro weby s častou aktualizací qnejčastější uplatnění: vzpravodajské servery, blogy qnejpoužívanější verze RSS 0.91 a 2.0 Jak RSS funguje? Zpravodajský server Nový článek RSS Kanál Osobní RSS čtečka Agregátor RSS kanálů Agregátor RSS kanálů clanek RSS a návštěvnost qobava webmasterů z úbytku návštěvníků stránek qnepotvrdila se, spíše opak qvětší povědomí s tím, co je na webu nového Možnosti využití dat z RSS kanálů qosobní RSS čtečky qagregátory RSS kanálů (mixování informací) RSS v praxi qukázka RSS kanálu (iDnes) qpodobné formáty: vATOM 1.0 vCDF (Microsoft, neprosadil se) Budoucnost webu Web 2.0 qDefinice??? Přechod na Web 2.0 qv začátcích internetu zejména statické stránky ð prezentace informací qdnes přechod na online služby = služby dostupné přes internet qnová generace služeb - mluvíme o fenoménu Web 2.0 Web 2.0 qZnáte nějaké služby??? q Web 2.0 – nejznámější služby [USEMAP] [USEMAP] [USEMAP] [USEMAP] [USEMAP] [USEMAP] [USEMAP] [USEMAP] [USEMAP] [USEMAP] q worldofweb20 http://www.go2web20.net Web 3.0 a 4.0 qWeb 3.0 vsémantický web vstrojově čitelný web (databáze) qWeb 4.0 vWebOS vumělá inteligence v v q A na závěr… 061212_the_riaa_called Závěr qMartin Krčál qkrcal@fss.muni.cz q Děkuji za pozornost