5. Webové technologie
Martin Krčál
Brno, KISK FF MU, 23.3.2016
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
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
q
q
q
q
q
q
q
q
q
https://s-media-cache-ak0.pinimg.com/originals/f4/df/30/f4df3024274771362514154001962ff4.jpg
Zdroj: https://s-media-cache-ak0.pinimg.com/originals/f4/df/30/f4df3024274771362514154001962ff4.jpg
http://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/HTML5_APIs_and_related_technologies_taxono
my_and_status.svg/1133px-HTML5_APIs_and_related_technologies_taxonomy_and_status.svg.png
Zdroj: MAVRODY, Sergey. Sergey's HTML5 & CSS3 Quick Reference. 2nd ed. Belisso Corp., 2012. ISBN
978-0-9833867-2-8
HTML 5.0
qpodpora prohlížeči
qrozšíření na mobilních platformách
q40+ Useful HTML5 Examples and Tutorials
qPodpora v prohlížečích
vhttp://fmbip.com/litmus/
q
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
qverze CSS2 vs CSS3
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://www.martinkrcal.tk/skola
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
jQuery
qjs knihovna
qmalý, ale mocný nástroj
qvyužívá množství webů a scriptů
qanimace
vefekty s obrázky a texty (fading, scrolling, slide text,...)
qhttp://jquery.com/
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 a slideshow
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ázky: #1, #2, #3
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.6.19
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 - ukázka
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
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
Redakční systémy
Redakční systémy
qinstantní web = web z prášku :)
qWYSIWYG editory
qnení třeba znalost HTML, CSS, scriptovacích a programovacích jazyků
qzdarma vs. komerční
q
q
q
http://technolotal.org/wp-content/uploads/2015/12/joomla.jpg
https://s3.amazonaws.com/eb-blog-blog/wp-content/uploads/wordpress-logo.png
http://www.affilbox.cz/wp-content/uploads/2014/11/webnode_logo.jpg
http://www.bluetext.com/wp-content/uploads/2014/07/logo-drupal.jpg
http://f.tqn.com/y/opensource/1/0/g/5/-/-/Plone.jpg
http://m.c.lnkd.licdn.com/mpr/mpr/AAEAAQAAAAAAAALcAAAAJGIwNjk3NDZhLWJlZmUtNGFhNS04ZmRiLWZkMDBiYzIxN
GM3NA.jpg
Další online nástroje
Nejznámější RS
https://f5.com/Portals/1/Users/130/06/133506/Weebly_web.jpg
Jiný CMS
Využívanost RS 2015
Zdroj:W3techs.com
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
Více info: Článek na Radius.com
A na závěr…
061212_the_riaa_called
q
qMartin Krčál
qkrcal@phil.muni.cz
Děkuji za pozornost
OPVK_MU_rgb