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

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

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

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

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

Příklady URL protokol uzel jméno port parametr hodnota Název Význam http http://kit.pef.czu.cz/knihovna/login/login.php Hypertext https https://ict-dotaznik.agris.cz:444/www/sign/in?_fid=49zo ftp ftp://kitlab.pef.czu.cz FTP soubor file file:///C:/Users/simek/Documents/teacher/ict/soubor.html Místní soubor mailto mailto:simek@pef.czu.cz Zaslání e-mailu Gopher gopher://gopher.cesnet.cz/11/.gopherinfo/cz-gophers telnet telnet://anezka.vc.cvut.cz Remote login

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

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

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

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

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

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

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

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 …

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

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

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 …

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

Struktura XHTML dokumentu 1 | <?xml version="1.0" encoding="UTF-8"?> 2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 3 | <html xmlns="http://www.w3.org/1999/xhtml" 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>

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

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

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

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)

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

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

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.

Hierarchie formátovaných elementů <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <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

Příklad použití CSS

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

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

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>

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

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 E-mailové schránky Freehosting Cena: 0,- Kč/měsíc Negarantovaná dostupnost Žádná technická podpora Menší datový prostor Často nutnost reklamy

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

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

Typ realizace hostingu Colocation Cloud Clustered Grid

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

Domény Pod doménou poskytovatele www.volny.cz/vas-nazev 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 www.vas-nazev.cz

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

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

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

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

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

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

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

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

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í

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

Barevné palety

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

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

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

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ů

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

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

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

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

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.

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)

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 http://www.qrstuff.com/ 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.

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

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

Kvíz

PETERKA, Jirí. eArchiv. [online, cit. 2008-10-9]. <http://www World Wide Web Consorcium. <www.w3.org>. WEINMANOVÁ, Linda. Velká kniha webdesignu. Brno: Zoner Press, 2004. 528 s. ISBN 8086815102. LYNCH, Patrick - HORTON, Sarah. Základní průvodce webdesignem. Brno: Zoner Press, 2004. 240 s. ISBN 8086815056. CASTRO, Elizabeth. HTML, XHTML a CSS : Názorný průvodce tvorbou WWW stránek. Praha: Computer Press, 2007. 440 s. ISBN 80-251-1531-2. Jak psát web <http://www.jakpsatweb.cz>.