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ů
Π<p><strong>text</strong></p>
� <p><strong>text</p></strong>

Základní rozdíly mezi HTML 4.01
a XHTML 1.0
qvšechny tagy uzavřené
Πtext<br />
� <p>text</p>
Ž <a href=“index.php” title=“text”>text<br>

Základní rozdíly mezi HTML 4.01
a XHTML 1.0
qhodnoty 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
qtagy 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
qkrácení atributů
Π<option disabled></option>
� <option disabled=“disabled”></option>

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