1 / 54

Aplikační a programové vybavení

Aplikační a programové vybavení. Internet, WWW, HTML a spol. 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ů

sari
Download Presentation

Aplikační a programové vybavení

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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 Kdy a ve které firmě vznikl Ethernet?

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

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

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

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

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

  8. xkcd.com

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

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

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

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

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

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

  15. Struktura HTML • <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/html401/index/elements.html

  16. 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/html401/index/attributes.html

  17. 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 Unicodeznakové sadě &#62; nebo &#x3E; • http://www.w3.org/TR/html401/sgml/entities.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.

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

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

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

  21. HTML × XHTML × XML

  22. HTML × XHTML × XML • HTML • složitá pravidla zpracování • počáteční a koncové značky jsou někdy nepovinné • není definovaná velikost názvů • hodnoty atributů nemusí být vždy v uvozovkách • 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í dokončena): http://www.w3.org/TR/xhtml1/ • pouze sémantické značky • od roku 2007 se vyvíjí XHTML5 (společně s HTML5)

  23. (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ší

  24. XHTML • Je-li XHTML odesílán jako XML (Content-type: application/xhtml+xml), zpracovává se jako XML: • Internet Explorer tento typ obsahu nepodporuje. • V prohlížečích s jádrem Gecko (Mozilla, FF, NN) je načtení stránky pomalejší. • V jiných prohlížečích je většinou rychlejší. • Při syntaktické chybě v XHTML se stránka vůbec nezobrazí. • Pokud je XHTML dokument odesílán jako HTML (Content-type: text/html), pak se zpracuje stejně jako HTML dokument. • V tom případě je nutné dodržet postupy, které umožní správné zobrazení: http://www.w3.org/TR/xhtml1/#guidelines

  25. DTD • DTD je konkrétní definice syntaxe (gramatiky) HTML dokumentu. • syntaktická pravidla • povolené 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 • Frameset– pro speciální dokumenty, které rozdělují okno webového prohlížeče (zrušeno v HTML5)

  26. DTD • Syntaxe odkazu na DTD • odkaz na standardní DTD: • <!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 (a většinou opravdu je) všemi prohlížeči interpretován stejně. • Prohlížeče obvykle zobrazí i dokumenty, které neodpovídají DTD a pokusí se chyby opravit / ignorovat.

  27. DTD – příklady • HTML Strict • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • HTML Transitional • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> • XHTML Strict • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • XHTML Transitional • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  28. Kterou DTD použít? • Pokud má stránka rámce (rozdělené okno), pak je nutné použít Frameset. • U nových projektů by se měla používat verze Strict. • Prakticky není důvod nepoužívat XHTML. • Pokud je XHTML dokument odesílán jako HTML, pak se zpracuje stejně jako HTML dokument. • Snadnější údržba • XHTML dokument zpracovaný jako XML není podporovaný prohlížečem Internet Explorer.

  29. Styly • XHTML 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) • V (X)HTML dokumentu se styl může zapisovat buď do atributu nebo elementu style, nebo se může vládat jako externí odkaz.

  30. Styly a prohlížeče • Podpora IE je mizerná, podpora CSS3 je mizerná • teprve IE8 podporuje CSS2 (z roku 1997) • http://www.w3.org/TR/CSS21/ • http://acid2.acidtests.org/ • http://acid3.acidtests.org/ • Pomocí stylů se mění zobrazení HTML dokumentu. • Styly nahrazují zrušené značky a atributy: • FONT, BASEFONT, BIG, CENTER, S, STRIKE, U, …

  31. 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 absolutní 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.

  32. Literatura • http://www.zvon.org • http://www.w3schools.com • http://www.htmlhelp.com/ • http://www.w3c.org • Základní kroky tvorby WWW stránek: • ujasnit si smysl a obsah • navrhnout strukturu • navrhnout design • napsat HTML • napsat CSS

  33. http://kantorek.webzdarma.cz/

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

  35. 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, … • 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'

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

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

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

  39. Příklad Styl: body {color: grey; background: #eee;} h3 {background: #ccc; color: red;} .modry {color: blue;} #jediny {color: white;} h3.fialovy {color: magenta;} .cerny {color: black} <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>

  40. XHTML – tabulky • Veškerý text tabulky musí být uvnitř příslušných elementů. • text musí být uvnitř <td> (table data) nebo <th>(table head) • každý element <td> nebo <th> musí být uvnitř <tr>(table row) • buňka tabulky může obsahovat další tabulku • buňky tabulky je možno sloučit pomocí atributů colspan a rowspan. • atribut nowrap zabrání zalomení obsahu buňky • Pokud je text mimo značky tabulky, pak se obvykle zobrazí před tabulkou.

  41. Tabulky – příklad table { color: white; background: #666666; } th { background: black; color: white; } .oranz_plny_ramecek { border-collapse: collapse; } .oranz_plny_ramecek td, .oranz_plny_ramecek th { border: 2px solid orange; } <table class='oranz_plny_ramecek'> <tr> <th>záhlaví 1</th> <th>záhlaví 2</th> <th>záhlaví 3</th> <th>záhlaví 4</th> </tr><tr> <td>Buňka 2-1</td> <td>Buňka 2-2</td> <td>Buňka 2-3</td> <td>Buňka 2-4</td> </tr><tr> <td>Buňka 3-1</td> <td colspan='2'>Buňka 3-2 a 3-3</td> <td>Buňka 3-4</td> </tr> </table> Záhlaví bude černé protože th přebíjí nastavení table. Barva písma je v obou případech stejná, a nastavení v th, nemá na nic vliv.

  42. Tabulky – příklad • rámeček okolo buněk: • border='1‘ • zobrazí rámeček okolo buněk • border-collapse: collapse; • udělá z něj 1px linku border • border: 2px solid orange; • udělá z něj červenou čárkovanou linku • rámeček tabulky: • table border='šířka' • border-collapse • collapse • border • solid – plná čára • dashed, doted, …

  43. XHTML – obtékání textu • Vložení obrázku do textu (do řádku) • <p>text<img src='obrazek.gif' alt='zkušební obrázek'>text</p> • Obtečení obrázku • <p>text<img style='float:right' src='obrazek.gif' alt='zkušební obrázek'>text</p> • Neobtečení obrázku • <p>text</p><div style='text-align:right'><img src='obrazek.gif' alt='zkušební obrázek'></div><p>text</p>

  44. Obtékání – příklad • Obtečený obrázek: <p>text text text text text <img src='obrazek.jpg' style='float: right' alt='popis' />text text text text text text</p> • Neobtečený obrázek: <p>text text text text text text text text text text</p><div style='text-align:right'><img src='obrazek.jpg' alt='popis'/></div> <p>text text text text text text text </p> • Stejným způsobem je možné do textu (div) vložit tabulky.

  45. XHTML – seznamy • číslované <ol> (ordered list) • nečíslované <ul> (unordered list) • položky seznamu <li>(list item) • horizontální seznam (menu) .menu_horizontalni li { display: inline; list-style-type: none; } <ul class='menu_horizontalni'> <li>První odrážka</li> <li>Druhá odrážka</li> <li>Třetí odrážka</li> <li>Čtvrtá odrážka</li> </ul>

  46. Seznamy – příklad . menu_horizontalni li {display: inline} .nic {list-style-type: none;} .zvyraznovat li:hover {color: blue; text-decoration: underline;} <ul class='menu_vodorovne nic zvyraznovat'> <li>prvni</li> <li>druhy</li> <li>treti</li> <li>ctvrty</li> <li>paty</li> </ul>

  47. (X)HTML – formuláře • Všechny prvky formuláře musí být uvnitř elementu form. • Formuláře není možné vnořovat. • Prvky formuláře: • input – tlačítko (submit, reset, image, button), editační pole (text), soubor (file), heslo (password), rádio (radio), checkbox (checkbox) skrytý (hidden) • textarea – víceřádková editace • select – výběr jedné nebo více (atribut multiple) položek (option), optgroup – seskupení položek • label – popis prvku, umožňuje snadnější navigaci • fieldset – orámování formuláře, • legend – popis orámování • Více v části webové aplikace

More Related