Web Design

1. Web Design Informační systémy ve státní správě Ing. Pavel Šimek

2. Historie Internetu • ARPA - Advanced Research Projects Agency (USA) • 1967-1968 – návrh sítě ARPANET • 1969 - ARPANET

3. Historie Internetu II • 1971 – 16 uzlů ARPANETu • NCP (Network Control Protocol) • 1971 – INWG - InterNetworking Working Group • vybudování nových protokolů • TCP/IP • 1977 – vznik TCP/IP • 1980 – TCP/IP zaváděno do praxe • 1983 – celý ARPANET na TCP/IP

4. Historie Internetu III • 1986 – 1988 z ARPANETu vzniká Internet • NSF (National Science Foundation) • propojení 5 středisek • NSFNET • 1990 – odstavení ARPANETu

5. Síť CESNET2

6. WWW • 1989 - Tim Berners-Lee (CERN) - návrh hypertextového systému • 1994 - WWW sdružení (World Wide Web Consorcium - W3C) • vlastnosti • hypertext • nezávislost na OS • klient (browser), server (www server) • http, url

7. Základní technologie WWW • URL - Uniform Resource Locators • HTML – HyperText Markup Language • XHTML – Extensible HyperText Markup Language • http - HyperText Transfer Protocol

8. Internetové organizace • ISOC (Internet Society) • IAB (Internet Architecture Board) • IETF (Internet Engineering Task Force) • IESG (Internet Engineering Steering Group) • IRTF (Internet Research Task Force) • IRSG (Internet Research Steering Group) • IANA (Internet Assigned Numbers Authority)

9. Standardizační orgány pod ISOC • ISOC: (http://www.isoc.org) • zastřešuje, reprezentuje vůči jiným organizacím a orgánům • IAB: (http://www.iab.org) • řídí standardizační práci, přijímá strategická rozhodnutí, formálně vydává dokumenty RFC • IESG,IRSG: • "Steering Groups", řídí práci IETF a IRTF, které mají velmi "volnou organizaci" • "vnáší řád do chaosu" (kompenzují to, že samotné IETF a IRTF nemají žádné řádné formální členství ….) IAB IRSG IESG IRTF IETF oblast oblast vědecko-výzkumné skupiny pracovní skupiny

10. Standardizační instituce • ITU (International Telecommunications Union, mezinárodní telekomunikační unie) • ISO (International Organization for Standardization) • IEEE (Institute of Electrical and Electronics Engineering) • W3C (World Wide Web Consorcium) • ANSI (American National Standards Institute) • EIA (Electronic Industries Association) • VESA (Video Electronics Standards Association) • IEC (International Electrotechnical Commision) • NIST (National Institute for Standards and Technology) • ČSNI (Český normalizační institut)

11. W3C (World Wide Web Consorcium) konsorcium, vzniklé v roce 1994 v důsledku neobyčejného rozvoje služby World Wide Web a potřeby její standardizace. Konsorcium W3C nevděčí za svůj vznik středisku CERN, odkud pochází samotná služba WWW – jako první „hostitelská organizace“ se konsorcia ujala prestižní univerzita MIT (Massachussets Institute of Technology, druhou se pak stala francouzská INRIA, a třetí japonská univerzita KEITO). Konsorcium W3C se zabývá celým širokým spektrem otázek kolem populárního WEBu: počínaje jazykem HTML a protokolem HTTP, přes problematiku práce s grafikou, lokalizace a internacionalizace Webu, možnosti zpřístupnění WEBu tělesně postiženým, až například po otázky duševního vlastnictví či digitální podpisy. Působnost konsorcia W3C na poli vydávání standardů pro Internet sice koliduje s působností standardizačních orgánů jako IETF (viz minule), ale vzhledem k existujícímu personálnímu propojení a blízké mentalitě obou orgánů zde nevznikají větší problémy – podle gentlemanské dohody IETF přenechává oblast WWW právě konsorciu W3C. To vydává své standardy ve formě vlastních dokumentů (formálně doporučení), ale obvykle jsou tyto dokumenty publikovány i jako standardy RFC. Domovská stránka konsorcia W3C se nachází na adrese http://www.w3c.org.

12. Domény • Domény 1. řádu (TLD) • generické (nadnárodní) domény • .com, .org, .net, .info .... • národní domény • .uk, .cz, .pl, .sk, .hr, .at, .de, .it .... • Domény 2. řádu (doménová jména) • seznam.cz, centrum.cz, hotmail.com • Domény 3. řádu • zpravy.idnes.cz, slovniky.centrum.cz

13. Registrace doménových jmen v ccTLD .cz • Do roku 2003 pouze monopolní registrátor CZ.NIC • 2002, schválení projektu „Decentralizovaná správa domén .cz“ • Srpen 2003, dokument o decentralizované správě domén • Říjen 2003, vstup nových registrátorů

14. Registrace doménového jména • prostřednictvím některého z registrátorů • souhlas každého žadatele s aktuální verzí Pravidel registrace • prohlášení osoby, že je oprávněna jednat jménem Žadatele • sdružení CZ.NIC registruje Doménová jména podle pořadí, ve kterém byly doručeny jednotlivé žádosti o registraci • registruje se vždy na celé násobky roku počínaje Dnem registrace Doménového jména, nejvýše však na 10 let • registrací Doménového jména je dané Doménové jméno na stanovenou dobu vyhrazeno Držiteli

15. Registrace je provedena, pokud • žádost o registraci neobsahuje nedostatky zabraňující dalšímu zpracování • byl k Doménovému jménu přiřazen existující Kontakt v roli Držitele • byly řádně vyplněny požadované údaje • Žadatel vyslovil souhlas s aktuálním zněním Pravidel registrace • požadované Doménové jméno není v době podání žádosti registrováno • požadované Doménové jméno odpovídá pravidlům tvorby Doménových jmen • současně s registrací dojde k zúčtování odpovídajících úhrad příslušných cen

16. Prodloužení registrace doménového jména • prostřednictvím Určeného Registrátora • vždy na celé násobky roku, nejvýše však na 10 let • pokyn k prodloužení registrace obdrží sdružení CZ.NIC nejpozději v den, ve kterém dojde k uplynutí doby, na kterou bylo Doménové jméno registrováno • držitele vyslovil souhlas s aktuální verzí Pravidel registrace • současně dojde k zúčtování odpovídajících úhrad příslušných cen

17. Zánik registrace doménového jména • na pokyn podaný prostřednictvím Určeného Registrátora • v případě, že registrace Doménového jména nebude přede Dnem expirace prodloužena, vstupuje Doménové jméno v Den expirace na dobu 45 dnů do tzv. ochranné lhůty • V průběhu ochranné lhůty nelze provádět žádné změny týkající se Doménového jména s výjimkou prodloužení jeho registrace • Jestliže v průběhu prvních 30 dnů trvání ochranné lhůty nedojde k prodloužení registrace Doménového jména, je sdružení CZ.NIC oprávněno zrušit Delegaci Doménového jména • registrace Doménového jména zaniká uplynutím ochranné lhůty

18. Pravidla pro tvorbu doménového jména • Doménová jména musí vyhovovat normám RFC 1034, 1035, 1122, 1123 a jakýmkoliv je nahrazujícím nebo doplňujícím normám. • Doménové jméno může obsahovat pouze znaky [a-z,0-9,-] • délka Doménového jména je nejvýše 63 znaků • Doménové jméno nesmí začínat, ani končit znakem „-“ • Doménové jméno nesmí obsahovat dva znaky „-“ za sebou

19. Diakritika v doménových jménech

20. Webhosting, serverhosting • Webhosting • Prostor na serveru, který je trvale připojen k síti internet • Několik stovek, tisíc firem • Velká odlišnost služeb a cen (0,- Kč – několik tisíc Kč/měsíc) • Serverhosting, Serverhousing • Připojení celého serveru do sítě internet • Pronájem serveru vs. vlastní server • Ceny: řádově v tisících Kč/měsíc

21. Website • Web Site – logický celek WWW stránek • Hlavní výhody • prezentace dostupná kdekoliv a kdykoliv • přímá zpětná vazba • možnost interaktivity • Cíle Web Site • informovat • získat kontakt na zákazníka • udržet kontakt se zákazníkem • prodávat

22. Website pyramida účel (ekonomika) OBSAH uživatel tvůrce forma (vzhled stránky) funkce (technologie)

23. složité Web aplikace Dynamický Dotaz Statický se vstupnímformulářem Dynamický přístup k datům Statický jednoduché dokumenty aplikace Druhy website

24. Web Site • vizuální přístup • „brochureware“ - „introware“ • technologický přístup • nejdříve technologické novinky • využívání zásad z projektování IS • model „vodopád“ • fontánový typ • „přírůstkový“ vývojový cyklus • …

25. Organizace Web Site (logické struktury) • lineární • lineární s alternativami • lineární s volbou • lineární s odskoky • mříž • hierarchická • úzké stromy • široké stromy • smíšená - web stromy • web style

26. Lineární struktura • Základní • S odskoky

27. Mříž • Duální lineární struktura

28. Hierarchický model • Úzký strom

29. Hierarchický model • Široký strom

30. Kombinovaná struktura

31. Web struktura

32. Web Site struktury síla stránky web smíšená mříž hierarchická lineární problémy

33. Na straně klienta statika html, xhtml css Dynamika DHTML (DOM, JavaScript, CSS, ...) Flash VRML Kombinace AJAX Na streně serveru skriptovací jazyk PHP ASP 3.0, ASP.NET JSP programovací jazyk Delphi databáze MySQL PostgreSQL MS SQL Server Soubory Technologie

34. Generování WWW stránky I požadavek http://www.pef.czu.cz www server uživatel www stránka v html (xhtml) požadavek http://www.pef.czu.cz uživatel www stránka v html (xhtml)

35. Generování WWW stránky II www server požadavek uživatel www stránka v html (xhtml) požadavek požadavek odpověď uživatel cgi program www stránka v html (xhtml)

36. Generování WWW stránky III požadavek http://www.php.net www server uživatel www stránka v html (xhtml) (index.php) • databáze • MySQL • MS SQL Server • PostgreSQL • MS Access • dBase • .... požadavek http://www.php.net .php .phtml .php3 .php4 HTML (XHTML) uživatel SQL www stránka v html (xhtml) (index.php) data interpret jazyka php

37. Generování WWW stránky IV princip AJAXu www server požadavek uživatel www stránka v html (xhtml) a JavaScript • databáze • MySQL • MS SQL Server • PostgreSQL • MS Access • dBase • .... kód JavaScriptu provádí neviditelné volání na server .php .phtml .php3 .php4 HTML (XHTML) Server odpovídá zasláním Požadovaných dat SQL JavaScript aktualizuje webovou Stránku s použitím těchto dat data interpret jazyka php

38. (X)HTML Editory • WYSIWYG • Macromedia Dreamweaver • NVÚ • MS FrontPage • MS Word • ... • Na úrovni HTML • HomeSite • EasyPad • PSPad • ...

39. Statická grafika pro WWW • JPEG, GIF, PNG, CSS • Fotografie • .jpg, jpeg • Loga, menu, jednoduchá grafika • .gif, .png • Editory • Adobe Fireworks • Paint Shop Pro • Adobe PhotoShop • Zoner PhotoStudio • Zoner Calypso • GIMP

40. Dynamická grafika pro WWW • Animovaný GIF • JavaScript • JAVA applet • FLASH • Formátování dokumentu pomocí CSS (mouse on)

41. Co je to hypertext • Pozorování lidského myšlení • Hypertext je (původně lineární) text, uzpůsobenýpro přeskakování „z myšlenky na myšlenku“ • přeskakování v hypertextu je označováno jako brouzdání (browsing, to browse)

42. Jsou členěny na relativně malé jednotky, zvané stránky(pages) v rámci stránek jsou informace uspořádány (víceméně) lineárně stránky se mohou nalézat na různých (libovolných) místech je to plně distribuované mezi stránkami mohou existovat libovolné vazby stránky mohou být vzájemně 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 do jednotlivých stránek a jak je mezi sebou prováže jak dokáže anticipovat potřeby čtenářů Informace v hypertextové podobě

43. Představa hypertextu stránka • aktivní odkazy mohou • být reprezentovány: • částmi textu • obrázky • částmi obrázků odkaz

44. původně: služba jen pro zpřístupnění textů nepodporovala grafiku autoři měli strach ze zneužití, že lidé naskenují tištěné texty a udělají z nich obrázek podpora grafiky se objevila až u NCSA Mosaic dnes: podpora celé řady formátů multimediálních původně řešeno pomocí externích aplikací či doplňků helperů, plug-inů později podpora zabudována přímo do browseru jako integrální součást původně: skromné prezentační schopnosti dnes: velmi dobré prezentační schopnosti schopnost podat informace v "atraktivním obalu" původně: WWW byl službou dnes: je současně i platformou pro poskytování dalších služeb vyhledávání, adresáře, aplikace ….. Vývoj WWW

45. Proč WWW tak uspěl? • protože jeho základní princip (hypertext) dobře odpovídá způsobu lidského myšlení • protože vychází vstříc lidské slabosti pro „hezký obal“ • protože je neskromný • vyžaduje větší přenosové kapacity, výkonnější počítače, ... • protože dokázal „zlidštit“ Internet a práci v něm, učinit ji mnohem jednodušší a intuitivnější • z Internetu „jen pro odborníky“ udělal Internet „pro každého“ • protože dokázal nabídnout atraktivní funkce i komerční sféře • stal se předmětem podnikání, místem podnikání, prostředkem podpory podnikání, marketingovým nástrojem • protože přišel ve správný okamžik