Kurz pro studenty oboru Informan studia a knihovnictv

Kurz pro studenty oboru Informační studia a knihovnictví 10. Webové technologie Martin Krčál Brno, KISK FF MU, 2. 5. 2012

Náplň hodiny q webové technologie q XML a od něj odvozené formáty q budoucnost webu

Webové technologie

Jazyk HTML q základem tvorby stránek q Hyper. Text Markup Language q odvozen od SGML q rozvržení dokumentu a odkazů q Tim Berners Lee - CERN (1990)

Vývoj HTML q q q 0. 9 - nepodporuje grafický režim (1991) 2. 0 - formuláře a podpora grafiky (1994) 3. 0 - nekoncepční, Netscape (1995) 3. 2 - tabulky, styly, W 3 C (1997) 4. 0 - frames, sémantika, W 3 C (1998) 4. 01 - opravuje chyby, W 3 C (1999)

XHTML q e. Xtensible Hypertext Markup Language q W 3 C (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

Základní rozdíly mezi HTML 4. 01 a XHTML 1. 0 q správné zanoření tagů text text

Základní rozdíly mezi HTML 4. 01 a XHTML 1. 0 q všechny tagy uzavřené text text <a href=“index. php” title=“text”>text

Základní rozdíly mezi HTML 4. 01 a XHTML 1. 0 q hodnoty atributů se píší do uvozovek <a href=“index. php”>odkaz</a> <a href=‘index. php’>odkaz</a> <a href=index. php>odkaz</a>

Základní rozdíly mezi HTML 4. 01 a XHTML 1. 0 q tagy a atributy se píší malým písmenem <A HREF=“index. php”>odkaz</A> <a href=“INDEX. PHP”>odkaz</a> <a href=index. php>odkaz</a>

Základní rozdíly mezi HTML 4. 01 a XHTML 1. 0 q krácení atributů <option disabled></option> <option disabled=“disabled”></option>

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

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 q odkazy v http: //www. w 3. org/TR/html 5 - specifikace v http: //zdrojak. root. cz/serialy/webdesigneruv-pruvodce-po-html 5 agregátor v http: //zdrojak. root. cz/serialy/webdesigneruv-pruvodce-po-html 5 v http: //interval. cz/clanky/seznameni-s-html-5

HTML 5. 0 q video v HTML 5. 0 vs. Flash a Silverlight q podpora prohlížeči q úspěchy na mobilních platformách

Validita zdrojového kódu q specializované nástroje v validator. w 3. org (W 3 C) v rozšíření do prohlížeče (např. HTML Validator, Web Developer Toolbar) v off-line validátory (HTML Tidy)

Web Developer Toolbar

HTML Validator

Kaskádové styly (CSS) q Cascading Style Sheets (W 3 C) - 1997 q formátování (X)HTML q cíl oddělit vzhled dokumentu od jeho struktury a obsahu q aktuální verze CSS 2 q CSS 3 definice sloupců, stínování, oblé rohy, animace, . . . (W 3 Schools, css 3 generator. com)

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 a 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: //skola. citace. com

Java. Script 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ř. Action. Script)

Java. Script 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/Java. Script 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á Java. Script q 3 úrovně (level 1, 2, 3) q základem DHTML

AJAX q Asynchronous Java. Script and XML q mění obsah stránek bez znovunačtení q HTML, Java. Script, XMLHttp. Request 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 q q q fotogalerie, prohlížeč fotografií upoutávka polaroid efekty s obrázky vyhledávání (našeptávač) tag clouds tabulky hlasování

Flash q technologie pro vektorové animace q Adobe Flash CS 5 q Action. Script 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. q ukázka: Zvonilka, Shrek

Programovací jazyky q 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 My. SQL, Oracle, ODBC, Postgre. SQL, …

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, My. SQL, PHP q aktuální verze 5. 4. 1

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, POP 3, … 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

XML

XML q e. Xtensible Markup Language q obecný značkovací jazyk (nemá tagy) q základem pro konkrétní značkovací jazyky (DC, RDF, RSS, Doc. Book, …)

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 Doc. Book - publikační styly q SVG, Jabber, SOAP, Math. ML, nové MS Office

Ukázky XML dokumentu q http: //skola. citace. com/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_gener ator. php

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? Nový článek Zpravodajský server RSS Kanál Agregátor RSS kanálů Osobní RSS čtečka Agregátor RSS kanálů

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 q dnes ztrácí své pozice

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 (i. Dnes) q podobné formáty: v ATOM 1. 0 v CDF (Microsoft, neprosadil se)

Mikroformáty = konkurence XML? ? ? q popis webových stránek q revoluce ve vyhledávání? ? ? q kratší zápis (ukázka) q problém = podpora prohlížečů q Microformats. org

Budoucnost webu

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 internet = nová platforma pro aplikace q nová generace služeb - mluvíme o fenoménu Web 2. 0

Web 2. 0 q přístupy v nové označení webu? ? ? v marketingový trik? ? ? v internetová bublina? ? ?

Web 2. 0 - charakteristika q hodnotu vytváří uživatelé v bohatství je v interakci uživatelů v bez uživatelů nemají služby W 2. 0 smysl q komunikace many-to-many v tvůrce je zároveň konzument v personalizace v wikisystémy