Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

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

Podobné prezentace


Prezentace na téma: "Prezentace na internetu Katedra informačních technologií Provozně ekonomická fakulta Česká zemědělská univerzita v Praze."— 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 protokoluzeljméno portparametr hodnota

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 ◦ 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: 1.Částmi textu 2.Obrázky 3.Čá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 ◦ 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 ◦ text odstavce Nepárové ◦ Zalomení řádku ◦ Speciální ◦ Nedělitelná mezera  ◦ Značka copyright ©  ©

13 Značka, atribut, hodnota atributu ◦ Značka ◦ Atribut ◦ Hodnota atributu

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 1. stránka 2. přednáška Standardy webu 1. stránka 2. přednáška Standardy webu hlavička tělo

16 Vývoj jazyka HTML Původně ◦ 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ů....., 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 HTML 0.9 HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 XHTML 1.0 (Transitional, Strict, Frameset) XHTML 1.1 HTML5 ?

19 Struktura XHTML dokumentu 1 | 2 | 3 | 4 | 5 | Publikování na internetu 6 | 7 | 8 | 9 | 10 | … 11 | 12 | 13 | WWW stránka o publikování na internetu … 14 | 15 |

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 … V dokumentu by měla být značka pouze 1x Nelze kombinovat značky ◦ - ◦ ◦,, ◦ Značka pouze pro zalomení jednoho řádku Značky,,, … pouze pro části textu

21 Přípony souborů HTML ◦.htm ◦.html XHTML ◦.htm ◦.html 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 a Použitím externího stylopisu – externího souboru *.css, na který se stránka odkazuje tagem

26 Syntaxe CSS Vlastnosti Hodnoty vlastností vlastnost1: hodnota; vlastnost2: hodnota; color: red; font-style: italic;

27 Hierarchie formátovaných elementů Strukturovaný dokument Nadpis 1 odstavec Nadpis 2 položka Nadpis 2 odstavec html headbody titlemeta h1pph2ulh2pp 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 document node document-typ node element node element node text node element node element node text node 3. přednáška - DOM 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 Webhosting ◦ 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 ◦ 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

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 uživatel www server žádost žádost odpověd dokumentu v (x)html odpověd dokumentu v (x)html klient (prohlížeč) 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 uživatel www server interpret jazyka php databáze -MySQL -MS SQL Server -PostgreSQL -MS Access -dBase žádost žádost Odpověď (x)html dokument odpověď (x)html dokument SQL data HTML (XHTML).php.phtml.php5 klient (prohlížeč) klient (prohlížeč)

43 HTML editory WYSIWYG ◦ 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 ◦ 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 ◦ „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 ◦ 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 kB50% - 40 kB 75% - 82,5 kB100% kB

52 GIF Bezeztrátová komprimace ◦ 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 ◦ Statické WWW stránky Web 2.0 ◦ 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 ◦ 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

57 Mikrosite Minisite, weblet Speciální malý web ◦ 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 µf 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

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í

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 ◦

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


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

Podobné prezentace


Reklamy Google