Aplikační a programové vybavení

1. Aplikační a programové vybavení Internet, WWW, HTML a spol.

2. 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

4. 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

5. 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.

6. Počítačové sítě • Komunikační protokol • Sada pravidel pro komunikaci mezi síťovými uzly • Schéma sítě z pohledu aplikace: klient1 server1 server2 klient2 server3 klient3

7. 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

8. 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

9. 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.

10. 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

12. 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

13. 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.

15. 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.

16. 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

18. 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 jetextový 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)

20. Struktura HTML • Stromová struktura HTML prvků • <h1id='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

21. Struktura HTML • <h1id='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

22. 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.

24. 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>

25. XML • XML (Extensible Markup Language) jeobecný 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

26. 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>

27. HTML × XHTML × XML

28. 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

29. 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

31. (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

32. (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.

33. 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

34. 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ě.

35. 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é.

36. 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

37. 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.

38. 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, …

39. 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.

40. 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

42. 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}

43. 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'

44. 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

45. 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

46. 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>

47. 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 barvymíchají subtraktivně • barva na papíře odráží světlo

48. 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

49. 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)