Aplikační a programové vybavení
description
Transcript of Aplikační a programové vybavení
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 > (greater)• číselné – číslo znaku v Unicode znakové sadě > nebo
> • 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)