Internet, WWW, HTML a spol.. Hlavní zásady inženýrství reprodukovatelnost měřitelnost a parametrizovatelnost přenositelnost typizace a standardizace dokumentace.

Prezentace na téma: "Internet, WWW, HTML a spol.. Hlavní zásady inženýrství reprodukovatelnost měřitelnost a parametrizovatelnost přenositelnost typizace a standardizace dokumentace."— Transkript prezentace:

1 Internet, WWW, HTML a spol.

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

3

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

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

11

12 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 http://www.iana.org/assignments/port- numbers

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

14

15 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 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/Protocolshttp://www.w3.org/Protocols

17

18 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/ http://www.w3.org/TR/html401/ Od roku 2007 se vyvíjí HTML5 (společně s XHTML5)

19

20 Stromová struktura HTML prvků Nadpis 1 Prvek (element) jméno elementu – uzavřené v lomených závorkách (element name) – h1 počáteční značka (start tag) – koncová značka (end tag) – tělo (content) – Nadpis 1 http://www.w3.org/TR/html5/index.html

21 Nadpis 1 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#attribut es-1 http://www.w3.org/TR/html5/index.html#attribut es-1

22 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 http://www.w3.org/TR/html5/named-character- references.html Komentáře – část textu, která není interpretována Problematické jsou implementace HTML prohlížečů, které zobrazují i syntakticky nesprávné HTML.

23

24 Titulek stránky Ahoj světe! 1. položka seznamu

25 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í: 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 záleží na velikosti písmen

26 slozka1 První složka slozka2 První podsložka slozka3 Další podsložka

27

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

30

31 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 http://www.w3.org/TR/html5/elements.html#global- attributes

32 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 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 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 odkaz na standardní DTD pro HTML 4: je možné definovat vlastní typy dokumentů: „Validace“ (validation) – kontrola správnosti dokumentu vzhledem k DTD http://validator.w3.org 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 HTML 5 XHTML Strict 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 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 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/ http://www.w3.org/TR/CSS21/ CSS3 je ve vývoji, ale řada vlastností je již podporována.

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

41

42 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 Selektor: li, a – pro elementy a li a – pro elementy uvnitř li>a – pro elementy přímo uvnitř li.menu – elementy 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 třídy 'menu'

44 Externí soubor(y): nejvýhodnější, styl celého webu je na jednom místě odkaz pomocí selectoru (prvek, class, id) Uvnitř stránky: body {color: green}; … používá se ke zrychlení načtení stránky Inline (uvnitř HTML): … nezapisuje se selector má nejvyšší prioritu

45 Styl se dědí z nadřazeného prvku na podřazený – nejvyšší prvek je. 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 ) externí styl id třída

46 body {color: grey; background: #eeeeee;} h3 {background: #cccccc; color: red;}.modry {color: blue;} #jediny {color: white;} h3.fialovy {color: magenta;}.cerny {color: black} první druhý třetí čtvrtý pátý šestý

47 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

48 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 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): 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)

50