Aplikační a programové vybavení

Internet, WWW, HTML a spol.

Inženýrství

• Hlavní zásady inženýrství• reprodukovatelnost• měřitelnost a parametrizovatelnost• přenositelnost• typizace a standardizace• dokumentace práce• organizace práce

Počítačové sítě

• systémy pro přenos dat mezi počítači• vývoj datových sítí probíhá na několika

úrovních:• fyzická úroveň – hardware pro spojení, kabely• logická úroveň

• organizace sítí a jejich topologie• adresování uzlů• komunikační protokoly

• aplikační úroveň• servery pro služby poskytované uživatelům

Klient – server

• Klient-server je vztah mezi dvěma subjekty. • Server – pasivní (serve = sloužit), dělá pouze to co chce

nějaký klient.• Může se jednat o vztah mezi:

• systémy, aplikacemi• moduly, procesy, vlákny

• příklady: • Webový prohlížeč je klientem webového serveru.• Webový server je klientem databázového serveru.• Vykreslovací jádro prohlížeče je serverem pro UI.• Prohlížeč je klientem operačního systému.

Počítačové sítě

• Komunikační protokol• Sada pravidel pro komunikaci mezi síťovými uzly• Schéma sítě z pohledu aplikace:

klient2

server1

klient3

klient1

server2

server3

Aplikační protokoly• Nejrozšířenější je rodina protokolů TCP/IP• Internet je každá síť, která pro komunikaci využívá

protokoly TCP/IP.• Internet (The Internet) × intranet (internet)

• IP – základní protokol, ostatní protokoly jej využívají (Internet Protocol)

• TCP – protokol pro přenos dat• „spolehlivý protokol“, ověřování a řízení (Transmission

Control Protocol)• UDP – jednoduchý protokol pro přenos dat

• „nespolehlivý protokol“, malá režie (User Datagram Protocol)

• A další protokoly pro jednotlivé síťové služby• Standardy týkající se Internetu se označují RFC

Adresování síťových uzlů• Hardwarová adresa – MAC adresa (48 bitů)

• přiřazena výrobcem každému koncovému zařízení• celosvětově unikátní• MAC (Medium Access Control)• jiná síťová vrstva – v aplikacích se nepoužívá

• Logická adresa – IP adresa (32 bitů)• přiřazována po připojení do sítě (administrátorem nebo

DHCP serverem)• unikátní v rámci sítě• topologie

• Jmenná adresa – doménové jméno• poskytovaná službou DNS (Domain Name System)• pouze pro uživatele – organizace sítě• o překlad na logické adresy se starají DNS servery

Adresování

• Pro spojení a vzájemnou komunikaci dvou aplikací je vždy nutné znát adresy obou koncových zařízení.

• Doménové názvy se musí přeložit na IP adresy, podle aktuální konfigurace sítě.

• Na jednom zařízení může běžet více aplikací (služeb), které je tedy nutné dále rozlišit.

• Aplikace se spojují prostřednictvím socketu.• Socket = IP adresa + síťový port• Port je identifikátor síťové aplikace v rámci počítače –

místo (0-65535) • Pro každé spojení je nutné znát IP adresu a port.

Adresování – URL• V Internetu se používá jednotný formát adresy – URL

(Uniform Resource Locator)• typ://uživatel:heslo@počítač:port/cesta?dotaz• URL je společný formát adres pro všechny služby internetu

• typ – označení služby, protokol• uživatel a heslo – přihlašovací údaje • počítač – doménové jméno počítače (přeloží se na IP

adresu) nebo IP adresa• port – port, na kterém naslouchá aplikace poskytující

požadovanou službu• cesta – cesta k požadovanému souboru • dotaz – parametry předané aplikaci, která poskytuje službu

Síťové služby• Standardní systémy pro poskytování služeb v síti internet.• Každá služba má přiřazený komunikační protokol.• Aplikace má zdrojový port pro odesílání dat a cílový port

(contact port) pro příjem dat.• Čísla cílových portů jsou registrovaná u IANA (Internet

Assigned Numbers Authority).• Zdrojové porty se volí dynamicky.

• Příklad – protokol HTTP využívá port 80:• apache.exe TCP server:80 server:0 LISTENING• opera.exe TCP pc19:4307 server:80 ESTABLISHED• apache.exe TCP server:80 pc19:4307 ESTABLISHED

• http://www.iana.org/assignments/port-numbers

Služba WWW

• WWW (World Wide Web) je systém pro poskytování vzájemně propojených dokumentů.

• Služba poskytuje přístup k dokumentům publikovaným na internetu (webovým stránkám).

• Dokumenty mohou být • statické – soubory umístěné na webovém serveru• dynamické – obsah generovaný aplikací umístěnou na

webovém serveru (nebo v klientském počítači)• Využívá protokol HTTP (Hyper Text Transfer Protocol) pro

přenos dokumentů.• Pro formátování dokumentů je nejčastěji používán jazyk

HTML nebo XHTML.

Protokol HTTP

• Protokol HTTP je bezstavový.• Pro každou HTTP transakci se vytváří nové spojení.• Současně s ukončením spojení zanikají všechny stavové

informace o spojení.• Toto teoreticky znemožňuje například přihlášení k webu a jiné

operace, které vyžadují zapamatování stavu.• Existují však techniky, pomocí kterých je možné simulovat stavový

protokol.

• Protokol HTTP podporuje dynamické formáty.• Klient odešle serveru v HTTP hlavičce seznam

podporovaných formátů.• Server odpoví daty v nejvhodnějším formátu.• Využití: server posílá komprimovaná data jen pokud je

klient umí zpracovávat.

Protokol HTTP

• Pří komunikaci se využívá HTTP transakce:• vytvoření spojení (klient)• odeslání požadavku (klient)• odeslání odpovědi (server)• zrušení spojení (server)

• Požadavek i odpověď obsahují HTTP hlavičky.• Nastavení formátu obsahu (Content-Type)• Nastavení ukládaní do cache paměti (Cache-

Control)• A další: http://www.w3.org/Protocols

HTML• Nejpoužívanější formát dat textových dokumentů

poskytovaných v rámci služby WWW.• HTML (Hyper Text Markup Language) je jazyk pro popis

struktury dokumentu.• Hypertext je textový dokument provázaný odkazy s jinými

dokumenty.• Jazyk HTML je definovaný v jazyce SGML (Standard

Generalized Markup Language) pomocí DTD (Document Type Definition).

• DTD definuje elementy, které mohou být použity, a jejich chování.

• Poslední verze – HTML 4.01 z roku 1999 http://www.w3.org/TR/html401/

• Od roku 2007 se vyvíjí HTML5 (společně s XHTML5)

lede

n 02

dube

n 02

červ

enec

02

říje

n 02

lede

n 03

dube

n 03

červ

enec

03

říje

n 03

lede

n 04

dube

n 04

červ

enec

04

říje

n 04

lede

n 05

dube

n 05

červ

enec

05

říje

n 05

lede

n 06

dube

n 06

červ

enec

06

říje

n 06

lede

n 07

dube

n 07

červ

enec

07

říje

n 07

lede

n 08

dube

n 08

červ

enec

08

říje

n 08

lede

n 09

dube

n 09

červ

enec

09

říje

n 09

lede

n 10

dube

n 10

červ

enec

10

říje

n 10

lede

n 11

dube

n 11

červ

enec

11

říje

n 11

lede

n 12

0

0.1

0.2

0.3

0.4

0.5

0.6

0.7

0.8

0.9

1IE7

IE10

IE5

IE6

IE8

Mozilla

Firefox

Netscape

Chrome

Safari

Opera

IE

IE9

lede

n 02

dube

n 02

červ

enec

02

říje

n 02

lede

n 03

dube

n 03

červ

enec

03

říje

n 03

lede

n 04

dube

n 04

červ

enec

04

říje

n 04

lede

n 05

dube

n 05

červ

enec

05

říje

n 05

lede

n 06

dube

n 06

červ

enec

06

říje

n 06

lede

n 07

dube

n 07

červ

enec

07

říje

n 07

lede

n 08

dube

n 08

červ

enec

08

říje

n 08

lede

n 09

dube

n 09

červ

enec

09

říje

n 09

lede

n 10

dube

n 10

červ

enec

10

říje

n 10

lede

n 11

dube

n 11

červ

enec

11

říje

n 11

lede

n 12

dube

n 12

červ

enec

12

říje

n 12

lede

n 13

dube

n 13

červ

enec

13

0

0.1

0.2

0.3

0.4

0.5

0.6

0.7

0.8

0.9

1IE7

IE10

IE5

IE6

IE8

Mozilla

Firefox

Netscape

Chrome

Safari

Opera

IE

IE9

Struktura HTML

• Stromová struktura HTML prvků• <h1 id='sekce1'>Nadpis 1</h1>• Prvek (element)

• jméno elementu – uzavřené v lomených závorkách (element name) – h1

• počáteční značka (start tag) – <h1>• koncová značka (end tag) – </h1>• tělo (content) – Nadpis 1• http://www.w3.org/TR/html5/index.html

Struktura HTML

• <h1 id='sekce1'>Nadpis 1</h1>• Atribut (attribute) – vlastnosti elementu,

zadávají se v počáteční značce v libovolném pořadí a oddělují se mezerou.• jméno – id• hodnota – sekce1• Každý atribut smí být u elementu uvedený

maximálně jednou.• http://

www.w3.org/TR/html5/index.html#attributes-1

Struktura HTML

• Entity – odkazy na speciální znaky, začínají znakem & (ampersand) a končí znakem ; (středník)• symbolické – jméno znaku &gt; (greater)• číselné – číslo znaku v Unicode znakové sadě &#62; nebo

&#x3E; • http://

www.w3.org/TR/html5/named-character-references.html• Komentáře – část textu, která není interpretována• <!-- komentář nesmí obsahovat dvě pomlčky za

sebou -->• Problematické jsou implementace HTML prohlížečů, které

zobrazují i syntakticky nesprávné HTML.

HTML – příklad<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd"><HTML>

<HEAD><TITLE>Titulek stránky</TITLE>

</HEAD><BODY ID=main>

<P>Ahoj světe!<UL>

<LI class=first><P>1. položka seznamu<LI><P>1. položka seznamu

</UL></BODY>

</HTML>

XML

• XML (Extensible Markup Language) je obecný jazyk pro popis strukturovaných dat.

• Jazyk definovaný v jazyce SGML (obsahuje elementy, atributy, entity)

• Není definován vzhled ani interpretace dat.• Pravidla zápisu:

• povinné záhlaví: <?xml version="1.0"?>• názvy elementů malými písmeny• hodnoty atributů uzavřené v uvozovkách• počáteční i koncová značka je vždy povinná

• je-li prázdná, je možné použít stažený tvar <element />• záleží na velikosti písmen

XML – Příklad<?xml version='1.0' encoding='utf-8' ?><menu-item>

<name>slozka1</name><caption last_modified='1.2.2007'>První složka</caption><description /><subitems>

<menu-item><name>slozka2</name><caption>První podsložka</caption>

</menu-item><menu-item>

<name>slozka3</name><caption>Další podsložka</caption>

</menu-item></subitems>

</menu-item>

HTML × XHTML × XML

HTML × XHTML × XML• HTML4

• kvůli nepovinným prvkům má složitá pravidla zpracování• složitá implementace interpreteru• vizuální i sémantické značky

• XML• rychlejší a efektivnější zpracování než HTML• „Aplikace XML“ je definice interpretace XML dat.

• XHTML – nová aplikace HTML v jazyce XML• používá stejné elementy jako HTML• zjednodušená syntaxe a pravidla zpracování• poslední verze 1.0 z roku 2000 (verze 1.1 ani 2.0 není a nebude dokončena)• pouze sémantické značky

• HTML5• vývoj od roku 2007• řada nových funkcí je již implementována• pouze sémantické značky• syntaxe HTML i XHTML

HTML 5

• je zpětně kompatibilní – lze používat už dnes• formálně není založeno na SGML – výhody

XHTML• zlepšeno zejména:

• vkládání objektů do stránky (video, flash, volná kresba)

• formulářové prvky a rozložené formuláře• odstraněny vizuální značky a atributy – výhradní

použití CSS• nové značky a atributy, rozšiřitelnost

(X)HTML

• elementy• blokové (block-level elements) – P, H1, DIV, …• řádkové (inline elements) - A, IMG, SPAN, …• řádkové elementy mohou být vložené uvnitř řádkových

nebo blokových• blokové mohou být vložené pouze uvnitř blokových

• společné atributy• id, class – využití pro styly nebo skriptování na straně

klienta• style – definice inline stylu prvku • title – popisek, který se zobrazí pod myším kurzorem• a další http://

www.w3.org/TR/html5/elements.html#global-attributes

(X)HTML

• XHTML lze odeslat jako XML (Content-type: application/xhtml+xml):• Internet Explorer tento typ obsahu nepodporuje.• Při syntaktické chybě se stránka vůbec nezobrazí.

• Pokud je XHTML odesílán jako (Content-type: text/html), se zpracuje se jako HTML:• Nutné dodržet postupy pro správné zobrazení:

http://www.w3.org/TR/xhtml1/#guidelines• U HTML 5 je to jedno – HTML a XHTML verze je

jeden standard• je dobré dodržovat jednotnou konvenci souboru.

DTD

• DTD je konkrétní definice syntaxe (gramatiky) HTML dokumentu.• povolené prvky, atributy a jejich hodnoty• definice pravidel zanořování elementů

• Nejpoužívanější (X)HTML DTD:• Strict (výchozí) – povoluje pouze elementy pro

popis struktury, zakazuje elementy pro definici vzhledu

• Transitional – povoluje elementy pro definici vzhledu, zajišťuje kompatibilitu se staršími aplikacemi

DTD

• odkaz na standardní DTD pro HTML 4:• <!DOCTYPE kořenový-element PUBLIC 'soubor'>

• je možné definovat vlastní typy dokumentů:• <!DOCTYPE kořenový-element SYSTEM 'soubor'>

• „Validace“ (validation) – kontrola správnosti dokumentu vzhledem k DTD http://validator.w3.org• „Validní“ dokument je dokument, který neporušuje

pravidla definovaná v DTD.• Validní dokument by měl být všemi prohlížeči

interpretován stejně.

DTD – příklady

• HTML 5• <!DOCTYPE html>

• XHTML Strict• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• Prohlížeče obvykle zobrazí i dokumenty, které neodpovídají DTD a pokusí se chyby opravit / ignorovat.

• Výsledek se může lišit podle prohlížeče – chování není standardizované.

Kterou DTD použít?

• Rámce (rozdělené okno, frameset) jsou zrušeny.

• U nových projektů by se měla používat verze HTML5 nebo HTML4 Strict.

• Prakticky není důvod nepoužívat XHTML.• Jednodušší a přísnější pravidla = jednodušší život a

méně chyb• Pokud je XHTML dokument odesílán jako HTML,

pak se zpracuje stejně jako HTML dokument.• Současně je možné využít XML parser.

• DTD a validita stránek jsou velmi důležité• zejména pro Internet Explorer

Styly

• HTML Strict a HTML 5 nemá vizuální značky, neumožňuje změnit vzhled dokumentu.

• XHTML je jazyk pro popis sémantiky a struktury dokumentu.

• Pro změnu vzhledu dokumentu se používají externí styly definované v jazyce CSS.

• CSS (Cascading Style Sheets) je jazyk pro definici pravidel formátování dokumentu.

• Poslední verze je CSS 2.1 z roku 2007 http://www.w3.org/TR/CSS21/

• CSS3 je ve vývoji, ale řada vlastností je již podporována.

Styly

• IE podporuje CSS2 od verze 8, podpora CSS3 je částečná• http://www.w3.org/TR/CSS/• http://acid3.acidtests.org/• http://css3test.com/• http://tools.css3.info/selectors-test/test.html

• Pomocí stylů se mění zobrazení jednotlivých prvků HTML dokumentu.

• Styly nahrazují zrušené značky a atributy:• FONT, BASEFONT, BIG, CENTER, S, STRIKE, U, …

Styly

• Pomocí stylů je možné nastavit • písmo (řez, velikost, barva, zarovnání)• barvy, pozadí, obrázky na pozadí• rámečky, odsazení, velikosti…

• Při formátování HTML dokumentu je klíčové myslet na rozdíl mezi oknem prohlížeče a papírem.• Je nevhodné používat pevné velikosti a pozice.• Není ideální používat rozměry v pixelech.• Je dobré brát v úvahu, že každý má jinak velké

okno prohlížeče.

Literatura

• www.w3.org/community/webed/wiki/• https://developer.mozilla.org/en-US/docs• http://www.w3schools.com• http://reference.sitepoint.com/css• http://www.w3c.org• Základní kroky tvorby WWW stránek:

• ujasnit si smysl a obsah• navrhnout strukturu stránek• navrhnout rozložení obsahu• napsat HTML a potom CSS

Styly

• Při formátování HTML dokumentu je klíčové myslet na rozdíl mezi oknem prohlížeče a papírem.

• Syntaxe CSS:• selector {vlastnost: hodnota;} • Příklad: body {color: black;}• za složenými závorkami se nepíše ;

• Selektor:• jméno elementu – h1 {color: white}• třída (class) - .table_list {width: 100%} • id - #input_name {width: 40px}

Styly

• Selektor:• li, a – pro elementy <li> a <a>• li a – pro elementy <a> uvnitř <li>• li>a – pro elementy <a> přímo uvnitř <li>• li.menu – elementy <li> třídy 'menu'• .menu – pro elementy třídy 'menu'

• Pseudo-třídy• hover, active, focus, link, visited, nth-child, …• li a:visited – navštívený odkaz uvnitř li• li.menu a#prvni:link – nenavštívený odkaz s id

'prvni' v <li> třídy 'menu'

Vložení stylu do HTML

• Externí soubor(y):• <link rel='stylesheet' type='text/css'

href='soubor.css' />• nejvýhodnější, styl celého webu je na jednom místě• odkaz pomocí selectoru (prvek, class, id)

• Uvnitř stránky:• <style type='text/css'>body {color: green}; …</style>• používá se ke zrychlení načtení stránky

• Inline (uvnitř HTML):• <body style='color: green'>…• nezapisuje se selector• má nejvyšší prioritu

Styly

• Styl se dědí z nadřazeného prvku na podřazený – nejvyšší prvek je <body>.

• Při konfliktu vyhrává to, co je danému prvku nejblíže.

• Další konflikty se řeší podle priority:• inline styl (atribut style)• styl ve stránce (prvek <style>)• externí styl <prvek link>

• id• třída

Příklad<style type="text/css">

body {color: grey; background: #eeeeee;}h3 {background: #cccccc; color: red;}.modry {color: blue;}#jediny {color: white;}h3.fialovy {color: magenta;}.cerny {color: black}

</style><body>

<h3>první</h3><h3 class='modry'>druhý</h3><h3 id='jediny'>třetí</h3><h3 class='fialovy'>čtvrtý</h3><h3 class='fialovy modry'>pátý</h3><h3 class='modry cerny'>šestý</h3>

</body>

CSS – barvy

• na obrazovce se barvy míchají aditivně• nastavení barvy je možné

• názvem – black, white, blue…• složkami – rgb(255, 0, 0)• číslem v 16 soustavě – #FF0000

• složkové zadání udává intenzitu složky• rgb(255, 255, 255) nebo #FFFFFF je tedy bílá• zkrácený zápis #FFF

• na papíře se barvy míchají subtraktivně• barva na papíře odráží světlo

CSS – odsazení

• velikost: • šířka/výška – width/height

• odsazení:• odsazení – margin• rámeček – border• vyplnění – padding

• margin je okolo HTML prvku• padding je uvnitř HTML prvku• border je uvnitř HTML prvku

HTML hlavička

• Prvek head může obsahovat následující prvky:• title – nastavení záhlaví stránky - povinné• meta - nastavení informací o stránce (metadata) –

povinné (např. pro uložení stránky):• <meta http-equiv='content-type'

content='text/html; charset=utf-8' />• style – vložení stylu do stránky• link – definice souvisejících souborů (nejčastěji

používaný je externí styl)• script – vložení skriptu nebo odkazu na skript na

spuštěný na straně klienta (dnes jen Javascript)