Prezentace na internetu

Prezentace na téma: "Prezentace na internetu"— Transkript prezentace:

1 Prezentace na internetu
Katedra informačních technologií Provozně ekonomická fakulta Česká zemědělská univerzita v Praze

2 World Wide Web WWW NENÍ INTERNET !!! WWW JE SLUŽBA!
Vychází z architektury klient/server Předpokládá dělbu práce: Server (WWW server) Uchovává jednotlivé WWW stránky, na (explicitní) žádost je poskytuje svým klientům Klient (WWW prohlížeč, browser) „Vyzvedává“ si stránky od serverů, zobrazuje je uživateli, zprostředkovává „brouzdání“

3 World Wide Web Pro korektní fungování WWW musí existovat všeobecně dodržované konvence o: Formátu WWW stránek (dokumentů) Jazyk HTML Způsobu přenesu WWW stránek (dokumentů) Protokol HTTP Způsobu identifikace umístění WWW stránek URL

4 World Wide Web URL – Uniform Resource Locator
Jednotné ukazatele (identifikátory) všech objektů Obecný tvar: „protokol“ : „uzel“ : „jméno“ HTML – HyperText Markup Language XHTML – Extensible HyperText Markup Language Značkovací jazyk HTTP – HyperText Transfer Protocol Bezstavový protokol pro přenos dat v textové formě Komunikace: žádost - odpověď

5 URL Jednotné ukazatele (identifikátory) všech objektů Vyjadřují
Jak se objekt jmenuje Kde je umístěn Jak se s ním má pracovat Obecný tvar „protokol“ : „uzel“ : „jméno“ „Protokol“ definuje, jakým způsobem má být k objektu přistupováno Současně udává jeho typ „Uzel“ je (standardní) symbolické doménové jméno uzlu, na kterém se objekt nachází „Jméno“ je plné jméno objektu včetně přístupové cesty „protoko“ : „uzel“ : „port“ : „jméno“ : „parametry“ Ne vždy musí být prefix (protokol) uváděn

6 Příklady URL protokol uzel jméno port parametr hodnota Název Význam
http Hypertext https ftp ftp://kitlab.pef.czu.cz FTP soubor file file:///C:/Users/simek/Documents/teacher/ict/soubor.html Místní soubor mailto Zaslání u Gopher gopher://gopher.cesnet.cz/11/.gopherinfo/cz-gophers telnet telnet://anezka.vc.cvut.cz Remote login

7 Protokol http Přenáší data v textovém tvaru
Komunikace má charakter "žádost- odpověď" Klient iniciuje navázání spojení Klient pošle svou žádost Server pošle odpověď Žádosti mají formu jednoduchých příkazů Označovaných jako metody Odpovědi mají číselný charakter

8 Metody protokolu http GET POST HEAD PUT, DELETE, LINK, UNLINK
Požadavek klienta na poskytnutí WWW stránky POST Pošle data na server Používá se při práci s formuláři pro zasílání odpovědí, které mají být dále zpracovány, např. CGI skriptem Může se použít i GET HEAD Požadavek na zaslání hlavičky WWW stránky PUT, DELETE, LINK, UNLINK

9 Informace v hypertextové podobě
Jsou členěny na relativně malé jednotky Stránky (pages) V rámci stránky jsou informace uspořádány (víceméně) lineárně Stránky se mohou nacházet na libovolných (různých) místech Plně distribuované Mezi stránkami mohou existovat libovolné vazby Stránky mohou být provázány dle libosti Vazby jsou aktivní odkazy, jejich navolením lze vyvolat přechod na jiné místo Práce s hypertextem je brouzdání (browsing) Postupné procházení stránkami, s přeskoky pomocí odkazů Uživatel (čtenář) si sám volí, jak bude stránkami procházet Podle svých zájmů, potřeb, schopností Přijímá informace v takovém sledu, objemu a rychlosti, jaký mu vyhovuje Hypertextová podoba je „autorským“ dílem Záleží na autorovi jak dobře či špatně (přehledně či nepřehledně) rozdělí původní „lineární“ informace

10 Představa hypertextu Aktivní odkazy mohou být reprezentovány:
Částmi textu Obrázky Částmi obrázků

11 HTML HyperText Markup Language
Značkovací jazyk pro tvoru WWW dokumentů (stránek) Programovací jazyk Skriptovací jazyk Značkovací jazyk Skládá se ze souboru značek

12 Rozdělení značek Strukturální značky Popisné (sémantické) značky
Rozvrhují strukturu dokumentu Popisné (sémantické) značky Popisují „povahu“ obsahu elementu Stylistické značky Určují vzhled elementu při zobrazení Párové Odstavec <p>text odstavce</p> Nepárové Zalomení řádku <br> Speciální Nedělitelná mezera Značka copyright ©

13 Značka, atribut, hodnota atributu
<img src=„logo.gif“ width=„100“ height=„100“> <img src=„logo.gif“ width=„100“ height=„100“> <img src=„logo.gif“ width=„100“ height=„100“>

14 Filosofie jazyka HTML Nedefinuje, jak má text vypadat
O zobrazení textu rozhoduje až klient (WWW prohlížeč)!!! Definuje, čím text je Nadpis Odstavec Položka seznamu …

15 Struktura HTML dokumentu
Hlavička (header) Obsahuje technické informace Titulek Kódování Další metadata Klíčová slova, informace o autorovi, popis, … Vazba na CSS Vazba na skripty Tělo (body) Obsahuje vlastní HTML kód stránky Obsah WWW stránky <html> <head> <title>1. stránka</title> </head> <body> <h1>2. přednáška</h1> <p>Standardy webu</p> </body> </html> hlavička tělo

16 Vývoj jazyka HTML Původně Později Cascading Style Sheets Skripty
Pouze jednoduché prezentační možnosti 6 úrovní nadpisů Tučné písmo Kurzíva … Jednosměrná prezentace Žádná možnost, jak přenést data k serveru Později Větší prezentační možnosti Formátování písma Barvy pozadí Zavedení zpětné vazby Formuláře Cascading Style Sheets Analogie šablon u textových editorů Umožňuje specifikovat vlastnosti objektů samostatně a ty pak aplikovat Skripty Výkonný kód ve zdrojovém tvaru, který je vložen do HTML a interpretován prohlížečem Java Applets Výkonné „program“, nikoli ve zdrojovém tvaru

17 XHTML eXtensible HyperText Markup Language
Nástupce jazyka HTML (HTML + XML) Uzavření všech tagů <p>.....</p>, <img src=“..” /> Tagy a atributy jsou malými písmeny Všechny atributy musejí mít hodnotu Všechny atributy mají hodnoty v uvozovkách Správně vnořené tagy Správný DOCTYPE …

18 Standardní verze jazyka HTML
XHTML 1.0 (Transitional, Strict, Frameset) XHTML 1.1 HTML5 ?

19 Struktura XHTML dokumentu
1 | <?xml version="1.0" encoding="UTF-8"?> 2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " 3 | <html xmlns=" xml:lang="en"> 4 | <head> 5 | <title>Publikování na internetu</title> 6 | <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 7 | <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/> 8 | <meta name="keywords" content=„html, xhtml, css, WWW, hypertext, webhosting" /> 9 | <meta name="description" content=„Přednáška o publikování na internetu" /> 10 | <link rel="stylesheet" type="text/css" href="styl.css" /> … 11 | </head> 12 | <body> 13 | <h1>WWW stránka o publikování na internetu</h1> 14 | </body> 15 | </html>

20 XHTML – správně strukturovaný dokument
Každý text by měl být „něčím“ Odstavec Nadpis Seznam Obsah dokumentu by měl začínat <h1> … </h1> V dokumentu by měla být značka <h1> pouze 1x Nelze kombinovat značky <h1> - <h6> <p> <ul>, <ol>, <li> <table> Značka <br /> pouze pro zalomení jednoho řádku Značky <strong>, <em>, <b>, <i> … pouze pro části textu

21 Přípony souborů HTML .htm .html XHTML XML .xml

22 Doporučená struktura ukládání souborů na HDD
www adresář (složka) images logo.png vlajka_cz.png vlajka_en.png firma.jpg provoz.jpg inc styles.css menu.js index.html nabidka.html o-firme.html kontakt.html

23 CSS Cascading Style Sheets
Kolekce metod pro grafickou úpravu WWW stránek Doplněk k (X)HTML Snadnější a přehlednější formátování Umožňují řídit prezentaci dokumentu, včetně barvy, typu písma, zarovnávání textu i obrázků, .., Analogie šablon u textových editorů Umožňuje specifikovat vlastnosti objektů samostatně (pomocí šablony) a tu pak aplikovat)

24 Nástin možností CSS Nastavení libovolné a přesné velikosti písma, prokládání, kapitálky Vytvoření odsazení prvního řádku odstavce, definování řádkování Zrušení nebo zvětšení prázdného prostoru po odstavci Automatické formátování nadpisů Zvýraznění odkazů po přejetí myší Vytvoření grafických odrážek u seznamů Zneviditelnění, zprůhlednění nebo nezobrazení částí textu Předefinování grafických významů běžných tagů Nastavení pozadí čehokoliv (stránky, tabulky, odstavce) Umístění objektu (např. části textu) kamkoliv do stránky Přidání rolovacích lišt k objektům V kombinaci se skripty lze „rozhýbat“ WWW stránky na straně klienta Vzhled celého webu lze deklarovat jedním souborem

25 Deklarace stylu Přímo v textu zdroje u formátovaného elementu pomocí atributu style Pomocí „stylopisu“ (angl. „stylesheet“) v hlavičce stránky Stylopis je „jakýsi“ seznam stylů Co má být formátováno a jak Do stránky se stylopis píše mezi tagy <style> a </style> Použitím externího stylopisu – externího souboru *.css, na který se stránka odkazuje tagem <link … />

26 Syntaxe CSS Vlastnosti Hodnoty vlastností
vlastnost1: hodnota; vlastnost2: hodnota; color: red; font-style: italic; Podobně, jako HTML se skládá ze značek, CSS se skládají z vlastností a hodnot vlastností. Vlastnosti jsou od sebe odděleny středníkem, hodnoty od vlastností dvojtečkou.

27 Hierarchie formátovaných elementů
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>Strukturovaný dokument</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"> </head> <body> <h1>Nadpis 1</h1> <p>odstavec</p> <h2>Nadpis 2</h2> <ul> <li>položka</li> </ul> </body> </html> html head body title meta meta h1 p p h2 ul h2 p p li li li

28 Příklad použití CSS

29 DOM Interní (uvnitř prohlížeče) hierarchická organizace prvků v dokumentu (IE 5+, Mozilla, Opera 4+) Umožňuje manipulaci prvků v dokumentu pomocí scriptů a listů stylů API (aplication programming interface – aplikační programové rozhraní) Definuje obecný standard pro přístup k platnému (X)HTML nebo správně strukturovanému XML dokumentu Nezávislé na programovacím jazyku

30 Cíle objektového modelu dokumentu
Definovat hierarchickou strukturu pro všechny části webového dokumentu Umožnit modifikaci této struktury (přidání či odebírání) Zajistit monitorování a manipulaci s obsahem stránky Poskytnout informace o tom, jak položky na stránce komunikují s uživatelem a spolu navzájem Standardy DOM se využívají v serverových programech Javy a C++, které analyzují dokumenty XML

31 Hierarchická struktura DOM / I
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>3. přednáška - DOM</title> </head> <body> <h1> Objektový model dokumentu </h1> </body> </html> document node document-typ node <!DOCTYPE> element node <head> <title> <3. přednáška – DOM> text node <body> <h1> <Objektový model dokumentu>

32 Webhosting Pronájem prostoru pro webové stránky na WWW serveru
Pronajimatel serveru = poskytovatel webhostingu Umístění WWW stránek na internet Bez vlastního serveru

33 Webhosting vs. freehosting
Cena: jednotky – tisíce Kč/měsíc Garantovaná dostupnost Technická podpora Pravidelné zálohy Větší prostor Podpora dalších služeb Skriptovací jazyky Databáze ové schránky Freehosting Cena: 0,- Kč/měsíc Negarantovaná dostupnost Žádná technická podpora Menší datový prostor Často nutnost reklamy

34 Serverhosting Pronájem nebo umístění celého serveru
V prostorách poskytovatele S připojením serveru do sítě internet Další související služby Zákazník má k dispozici celý server Nedělí se o server s dalšími zákazníky (webhosting) Serverovna Klimatizovaná technologická místnost nabízející stabilní a bezpečné prostředí pro provoz mnoha serverů Ceny Tisíce – desetitisíce Kč / měsíc

35 Typy hostingu Sdílený webhosting Multihosting
základní typ webhostingu, kde uživatel provozuje jednu doménu 2. řádu Multihosting hosting většího počtu domén Virtuální server - virtualizovaný stroj virtualizovaný stroj, který nabízí velkou konfigurovatelnost a větší výkon poměr výkonu a ceny však není kvůli větší režii tak dobrý, jako u předchozích řešení Managed server poskytovatel pronajme zákazníkovi vlastní server, o který se zároveň i stará jeho technická podpora jedno z finančně nejnáročnějších řešení Dedikovaný server podnájem serveru, který spravuje sám zákazník Serverhousing umístění vlastního stroje do telehousu poskytovatele Home server

36 Typ realizace hostingu
Colocation Cloud Clustered Grid

37 Dostupnost Dostupnost % Server je nedostupný za rok měsíc za týden
90% ("one nine") 36.5 dne 72 hodiny 16.8 hodin 95% 18.25 dne 36 hodin 8.4 hodiny 97% 10.96 dne 21.6 hodin 5.04 hodiny 98% 7.30 dne 14.4 hodiny 3.36 hodin 99% ("two nines") 3.65 dne 7.20 hodiny 1.68 hodin 99.50% 1.83 dne 3.60 hodin 50.4 minuty 99.80% 17.52 hodin 86.23 minuty 20.16 minut 99.9% ("three nines") 8.76 hodin 43.2 minuty 10.1 minuta 99.95% 4.38 hodin 21.56 minut 5.04 minuty 99.99% ("four nines") 52.56 hodin 4.32 minuty 1.01 minuta

38 Domény Pod doménou poskytovatele
Nabízejí poskytovatelé připojení k internetu Většinou zdarma (v rámci ceny připojení) Pod subdoménou na doméně poskytovatele vas-nazev.poskytovatel.cz Na vlastním doménovém jménu

39 Zobrazení WWW stránky www server uživatel klient uživatel klient
žádost www server uživatel odpověd dokumentu v (x)html žádost klient (prohlížeč) uživatel odpověd dokumentu v (x)html klient (prohlížeč)

40 Výchozí soubory Závisí na nastavení WWW serveru index.htm index.html
default.htm default.html …

41 Technologie pro tvorbu WWW stránek
Na straně klienta Statické XHTML CSS Dynamické DHTML (DOM, JavaScript, CSS, …) FLASH … Na straně serveru Technologie pro tvorbu WWW aplikací PHP ASP 3.0, ASP .NET JSP Spustitelné soubory … Databáze MySQL PostgreSQL MS SQL Server Soubory

42 Princip WWW aplikace www server uživatel databáze MySQL MS SQL Server
žádost www server uživatel Odpověď (x)html dokument databáze MySQL MS SQL Server PostgreSQL MS Access dBase .... klient (prohlížeč) žádost .php .phtml .php5 HTML (XHTML) uživatel SQL odpověď (x)html dokument interpret jazyka php klient (prohlížeč) data

43 HTML editory WYSIWYG Na úrovni kódu Macromedia (Adobe) Dreamweaver NVÚ
MS FrontPage … Na úrovni kódu HomeSite BlueFish EasyPad PSPad

44 Statická grafika pro WWW
JPEG, GIF, PNG, CSS Fotografie .jpg, .jpeg Loga, pérovky, jednoduchá grafika .gif, .png Grafické editory Adobe Photoshop Macromedia (Adobe) Fireworks Zoner PhotoStudio GIMP 16,8mil barev 256 barev 256 odstínů šedi

45 Rastrový obrázek Malba Fotografie Jednotlivé obrazové body
Pixely (px) s různou barvou

46 Počet bodů rastrového obrázku
Rastrový obrázek Více bodů Kvalitnější obrázek Náročnější na paměť (RAM, HDD) Méně bodů Horší obrázek Menší nároky na paměť Přiměřeně ??? Rozlišení dpi

47 Rozlišení a DPI Počet obrazových bodů najednotku vzdálenosti DPI
Určuje kvalitu obrázku DPI Dots Per Inch Počet bodů na palec (2,54 cm) Závisí na účelu obrázku -> přiměřené rozlišení

48 Barevná hloubka Počet barev Každý bod obr. Paleta RGB (16,7mil)
„přiměřené“ množství Každý bod obr. Jedna barva zvolené palety Paleta RGB (16,7mil) Paleta 256 barev Černobíla – 256 odstínů šedi

49 Barevné palety

50 JPEG Při nastavení vysoké kvality Vyšší kvalita – větší soubor
Ztrátová komprese pouhým okem nepostřehnutelná Vyšší kvalita – větší soubor Úspora paměťového místa a času Formát .jpeg vnáší do fotografie „šum“ 16,7mil barev

51 JPEG - kvalita 25% - 12,8 kB 50% - 40 kB 75% - 82,5 kB 100% kB

52 GIF Bezeztrátová komprimace 256 barev nebo 256 odstínů šedi
Ztrátová komprese u fotografií výrazně účinnější 256 barev nebo 256 odstínů šedi Vhodný na grafické prvky Tlačítka, linky, rámečky Může mít transparentní barvu

53 Vektorový obrázek Kresba Z jednotlivých geometrických objektů
Obdélník Elipsa Úsečka Křivka Text Výplň Obrys Vektorové objekty Křivky Libovolně měnit velikost Rastr – jedním z použitelných objektů

54 Web 1.0, Web 2.0, Web 3.0 Web 1.0 Web 2.0 Web 3.0 Statické WWW stránky
2004 – současnost Prostor pro sdílení a společnou tvorbu obsahu Web 3.0 Navazuje na Web 2.0 Není shoda na charakteristice

55 Web 2.0 Rysy Použití Uživatel tvoří obsah Otevřená komunita
Sdílení a znovupoužití informací Web jako zdroj obsahující informace i funkcionalitu Propracovaná hyperlinková struktura Lépe organizovaný obsah Použití Wiki Wikipedie Sociální sítě Facebook Twitter … Blogy blog.cz blogger.com Sdílená videa, foto Youtube Flickr

56 Web 3.0 Prvky sémantického webu Mikroformáty Sdílené aplikace
Google Docs Přistup na web pomocí aplikací pro různá zařízení PC, mobilní telefon, PDA Personalizace aplikací Větší interakce na SW úrovni Dotazování v přirozeném jazyce Větší využití videa implikace prvků sémantického webu. mikroformáty (microformats.cz ) - Microdata sdílené aplikace (např. GoogleDocs ) přístup na web skrz aplikace pro různá zařízení (PC, PDA, mobilní telefon...) přizpůsobitelnost a personalizace aplikací větší interakce na softwarové úrovni (kdokoliv by měl být schopen vytvořit program) rozostření hranic profesionál/poloprofesionál/uživatel dotazování v přirozeném jazyce částečná umělá inteligence webu větší využití videa 3D prostředí webových prohlížečů

57 Mikrosite Minisite, weblet Speciální malý web Prostředek marketingu
Doplněk hlavní webové prezentace Prostředek marketingu Zpravidla na vlastí doméně (dom. jménu) Může být od hlavní prezentace oddělena

58 Mikroformát, microformats
Sady malých konvencí, jak popisovat jednu konkrétní informaci Umožňují do webových stránek vkládat strojově čitelné informace „pochopení“ obsahu pro stroje Zápis kontaktů, událostí, produktů, atd. do (X)HTML Pro vyhledávače Snadnější orientace na webu Pro uživatele Lepší práce s obsahem webu Rozšíření WWW prohlížeče Např. Operator pro Mozilla Firefox Pomocí mikroformátů lze např. označit část webu, která se často mění, označit výrobky, zapsat kontaktní údaje v podobě vizitky (hCard je vizitka na webu – strojově stejně dobře čitelná, jako pro člověka vizitka papírová), datumy (kalednář) atd. I kuchařské recepty mají vlastní mikroformát (název, indegrience, atd.). Mikroformát je způsob, jak říci stroji, co určitá informace na webu znamená. Mikroformáty jsou informace o informacích neboli metainformace.

59 Sémantický web Tim Berners-Lee v roce 2001
Rozšíření současného webu Informace strukturovány a uloženy podle standardizovaných pravidel Usnadňuje vyhledávání Usnadňuje zpracování Představuje reprezentaci dat na WWW Ontologie Formalizované reprezentace znalostí Sdílení Znovupoužití Základním krokem k vytvoření sémantického webu je konceptualizace dat dostupných na Internetu, jejíž klíčovým nástrojem jsou ontologie, aneb formalizované reprezentace znalostí určené k jejich sdílení a znovupoužití. Sémantický web je dále založen na standardizovaném popisu webových zdrojů (vše, dosažitelné pomocí WWW, tedy textové dokumenty, obrázky, videosekvence, zvukové soubory apod.). Každý zdroj by byl vybaven stejnými charakteristikami údaji (autor, typ zdroje, klíčová slova atd.), což by umožnilo uživatelům Internetu pracovat se sítí WWW jako s relační databází a dotazovat se na její obsah prostřednictvím jazyků podobných SQL. Důraz by se kladl na vysokou přesnost a relevanci odpovědi na vyhledávací dotaz. (wiki)

60 QR kód (quick response)
Vychází z kódu Data Matrix Rodina čárových kódů Nesou zakódovanou informaci Lze uložit až 4300 znaků Velikost 21x21 bodů 177x177 bodů Nejčastěji Pro uložení int. adresy Pro uložení kont. Údajů Pro uložení textu … QR čtečka v mob. zařízení Velké využití na Seznam.cz Generátor Do QR kódu je možné uložit jakoukoliv textovou informaci. Nejčastěji je používán pro uložení internetové adresy nebo kontaktních údajů. QR kód tak může být do jisté míry vizitkou, nebo třeba doplňkem článku v časopise, kde může nést zakódovanou adresu, na které si lze o tématu přečíst více. QR kódy se tak stávají součástí například filmových plakátů, kde ukrývají odkaz vedoucí na stránky věnované dílu nebo třeba ke stažení multimediálního obsahu s tématem filmu.

61 Princip QR kódů Vyfotografování QR kódu mob. zařízením
Skrz nainstalovanou QR čtečku QR čtečka „rozšifruje“ kód Přeloží jej na požadované informace Text qr vizitka rozsáhlý internetový odkaz Propojení tištěné reklamy s webem Palubní vstupenky Nutriční hodnoty potravin Zakódování profilu na Facebooku

62 RSS Umožňuje uživatelům internetu přihlásit se k odběru novinek
SW pro práci s RSS kanály RSS čtečka Samostatný SW Plug-in v prohlížeči

63 Kvíz

64 PETERKA, Jirí. eArchiv. [online, cit. 2008-10-9]. <http://www
World Wide Web Consorcium. < WEINMANOVÁ, Linda. Velká kniha webdesignu. Brno: Zoner Press, s. ISBN LYNCH, Patrick - HORTON, Sarah. Základní průvodce webdesignem. Brno: Zoner Press, s. ISBN CASTRO, Elizabeth. HTML, XHTML a CSS : Názorný průvodce tvorbou WWW stránek. Praha: Computer Press, s. ISBN Jak psát web <