9. Webové technologie Martin Krčál Brno, KISK FF MU, 23.4.2014 OPVK_MU_rgb Kurz pro studenty oboru Informační studia a knihovnictví 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 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 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://www.html5.cz/ - agregátor vhttp://zdrojak.root.cz/serialy/webdesigneruv-pruvodce-po-html5 vhttp://interval.cz/clanky/seznameni-s-html-5 v HTML 5.0 qpodpora prohlížeči qúspěchy na mobilních platformách q40+ Useful HTML5 Examples and Tutorials 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ů, stínování, oblé rohy, animace,... (W3Schools, css3generator.com) 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ů qnejednotná 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 ve starších verzích IE vnapř. IE a max-width, min-width vdříve rů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 qupoutávka qefekty s obrázky qvyhledávání (našeptávač) qtag clouds qtabulky qhlasování Flash qtechnologie pro vektorové animace qAdobe Flash CS6 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čů, mobily 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.4.14, 5.5 Beta3 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 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 qdnes ztrácí své pozice 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) Mikroformáty = konkurence XML??? qpopis webových stránek qrevoluce ve vyhledávání??? qkratší zápis (ukázka) qproblém = podpora prohlížečů qMicroformats.org q 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 qinternet = nová platforma pro aplikace qnová generace služeb - mluvíme o fenoménu Web 2.0 Web 2.0 qpřístupy vnové označení webu??? vmarketingový trik??? vinternetová bublina??? q q Web 2.0 - charakteristika qhodnotu vytváří uživatelé vbohatství je v interakci uživatelů vbez uživatelů nemají služby W2.0 smysl qkomunikace many-to-many vtvůrce je zároveň konzument vpersonalizace vwikisystémy Web 2.0 - charakteristika qlong tail qreputační systémy vjak dnes nakupujete??? qcloud – webtop aplikace vodklon od desktopů qbeta forever Web 2.0 - charakteristika qmashups vpropojování dat (obohacený obsah katalogů, Google Maps,...), API vnové využití dat v jiné aplikaci 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 q qMartin Krčál qkrcal@phil.muni.cz Děkuji za pozornost OPVK_MU_rgb