+ All Categories
Home > Documents > Web Design

Web Design

Date post: 15-Jan-2016
Category:
Upload: ash
View: 22 times
Download: 0 times
Share this document with a friend
Description:
Web Design. Informační systémy ve státní správě Ing. Pavel Šimek. Historie Internetu. ARPA - Advanced Research Projects Agency (USA) 1967-1968 – návrh sítě ARPANET 1969 - ARPANET. Historie Internetu II. 1971 – 16 uzlů ARPANETu NCP (Network Control Protocol) - PowerPoint PPT Presentation
45
Web Design Informační systémy ve státní správě Ing. Pavel Šimek
Transcript
Page 1: Web Design

Web Design

Informační systémy ve státní správě

Ing. Pavel Šimek

Page 2: Web Design

Historie Internetu

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

Page 3: Web Design

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

Page 4: Web Design

Historie Internetu III

• 1986 – 1988 z ARPANETu vzniká Internet

• NSF (National Science Foundation) – propojení 5 středisek– NSFNET

• 1990 – odstavení ARPANETu

Page 5: Web Design

Síť CESNET2

Page 6: Web Design

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

Page 7: Web Design

Základní technologie WWW

• URL - Uniform Resource Locators• HTML – HyperText Markup Language

– XHTML – Extensible HyperText Markup Language

• http - HyperText Transfer Protocol

Page 8: Web Design

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)

Page 9: Web Design

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

IRTFIRTF IETFIETF

IESG

vědecko-výzkumnéskupiny

oblast oblast

pracovní skupiny

Page 10: Web Design

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)

Page 11: Web Design

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.

Page 12: Web Design

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

Page 13: Web Design

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ů

Page 14: Web Design

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

Page 15: Web Design

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

Page 16: Web Design

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

Page 17: Web Design

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

Page 18: Web Design

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

Page 19: Web Design

Diakritika v doménových jménech

Page 20: Web Design

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

Page 21: Web Design

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

Page 22: Web Design

Website pyramidaúčel

(ekonomika)

forma(vzhled stránky)

funkce(technologie)

tvůrceOBSAH

uživatel

Page 23: Web Design

Druhy website

složité

jednoduché dokumenty aplikace

Statický

Dynamický

Statický se vstupnímformulářem

Web aplikace

Dynamický přístup k datům

Dotaz

Page 24: Web Design

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

Page 25: Web Design

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

Page 26: Web Design

Lineární struktura

• Základní

• S odskoky

Page 27: Web Design

Mříž

• Duální lineární struktura

Page 28: Web Design

Hierarchický model

• Úzký strom

Page 29: Web Design

Hierarchický model

• Široký strom

Page 30: Web Design

Kombinovaná struktura

Page 31: Web Design

Web struktura

Page 32: Web Design

Web Site struktury

síla stránky

problémy

lineární

mříž

hierarchická

smíšená

web

Page 33: Web Design

Technologie

• 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

Page 34: Web Design

Generování WWW stránky I

uživatel

uživatel

www serverpožadavek

http://www.pef.czu.cz

požadavekhttp://www.pef.czu.cz

www stránkav html (xhtml)

www stránkav html (xhtml)

Page 35: Web Design

Generování WWW stránky II

uživatel

uživatel

www serverpožadavek

požadavek

www stránkav html (xhtml)

www stránkav html (xhtml)

odpověď

poža

davek

cgi program

Page 36: Web Design

Generování WWW stránky III

uživatel

uživatel

www server

interpret jazykaphp

databáze-MySQL-MS SQL Server-PostgreSQL-MS Access-dBase-....

požadavekhttp://www.php.net

požadavekhttp://www.php.net

www stránkav html (xhtml)

(index.php)

www stránkav html (xhtml)

(index.php)

SQL

data

HTML(XHTML)

.php

.phtml

.php3

.php4

Page 37: Web Design

Generování WWW stránky IV princip AJAXu

uživatel

www server

www stránkav html (xhtml)a JavaScript

požadavek

kód JavaScriptu provádíneviditelné volání na server

Server odpovídá zaslánímPožadovaných dat

JavaScript aktualizuje webovouStránku s použitím těchto dat

interpret jazykaphp

databáze-MySQL-MS SQL Server-PostgreSQL-MS Access-dBase-....

SQL

data

HTML(XHTML)

.php

.phtml

.php3

.php4

Page 38: Web Design

(X)HTML Editory

• WYSIWYG– Macromedia Dreamweaver– NVÚ– MS FrontPage– MS Word– ...

• Na úrovni HTML– HomeSite– EasyPad– PSPad– ...

Page 39: Web Design

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

Page 40: Web Design

Dynamická grafika pro WWW

• Animovaný GIF• JavaScript• JAVA applet• FLASH• Formátování dokumentu pomocí CSS

(mouse on)

Page 41: Web Design

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)

Page 42: Web Design

Informace v hypertextové podobě

• 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ářů

Page 43: Web Design

Představa hypertextu

stránka

odkaz

aktivní odkazy mohoubýt reprezentovány:• částmi textu• obrázky• částmi obrázků

Page 44: Web Design

Vývoj WWW

• 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 …..

Page 45: Web Design

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


Recommended