www.cz-milka.

net

INTERNETOVÉ TECHNOLOGIE – CLIENT SIDE P1

2008-09-30
Cíl předmětu:

Rozvinout znalosti studentů o nových technologiích, které se používají při p i tvorbě www aplikací na straně
klienta – DHTML, FLash apod.

Dle pokynů na cvičení studenti řeší ko íklad, ve kterém využívají zásy z řízení velkého
komplexní praktický příklad,
projektu IS a dodržují corporate design.

Podpora výuky a literatura:

Moodle.czu.cz

Kit.pef.czu.cz – pro projekty

http://en.wikipedia.org/wiki/HTML
wiki/HTML

www.w3.org

Skripta Internetové technologie

Zeldman, J.: Tvorba webů podle standard
standardů XHTML, CSS, DOM a dalších, Computer Press 2004.

Web technologie:

Na straně klienta:
• DHTML (DOM, CSS, JavaScript)
• Java applety
• Flash and Shockwawe
• SMIL (Synchronised Multiedia Integration Language)

Na straně serveru:
• CGI skripty
• SSJS – Server Side JavaScript
• Atd.

MANAŽERSKÝ POHLED NA ICT:

Definice informace:

Data -> informace -> znalosti

Information is stimuli that has meaning ini some context for its receiver.

Information is made into data,, put into the computer where it is stored and processed as data, and then put out
as data in some form that can be perceived as information.

Knowledge is information that is readily accessible
accessible to its user (for example, either in one's brain or in a nearby
dictionary).

Data/Information:

„Data” refers to raw data, which is unprocessed, and „information“ refers to processed data

Data consists of the raw facts and figures that are processed into
int information

Information is summarised data or otherwise manipulated data

Actually, in ordinary usage, the words data and information are often use synonymously

What data is:

-1-
 www.cz-milka.net

Information:

In information processing, knowledge concerning such things as facts, concepts, objects, events, ideas, and
process, that within a certain context has a particular meaning

Informace je zpráva o tom, že nastal určitý
ur jev z množiny možných jevů a tím se u nás (u ppříjemce) snižuje
(nebo zcela odstraňuje)
uje) neznalost o tomto jevu [Toman]

Manažer potřebuje informace pro:

Rozhodování – plnění úkolů

Tvorbu vlastních znalostí (dovedností)
ostí)

Zajištění vlastní konkurenční
ní výhody

Information/Decision making:

Structured information is detailed, current, concerned with past events; events; records a narrow range of facts; and
covers an organization's internal activities

Unstructured information is summarised, less current, concerned with future events; records a broad range of
facts; and covers activities outside as well as inside an organisation

Semi-structured information includes some structured information and some unstructured information

Lidé získávají informace:

Formálně, např.. dokumenty, tabulky

Neformálně, různá setkání – videoconferencing,
videoconferencing internet?

Problémy:

Data < > informace < > znalosti

Zpracování informací

Vhodnost (pertinence) informace

Čas

Forma reprezentace

Přístup k informacím

Řešení:

„Kdo má kvalitníí informace, je lepší“

Kdybych měll informace, tak bych...

Osvojit si nové metody a přístupy
ístupy při
př zpracování informací

Pochopit vývoj ICT

Zajistit spolupráci lidí

Systémové a efektivní postupy

Informační technologie (IT):

Technické a programové prostředky
ředky ppro „práci“ s daty (informacemi)

IS = lidé + IT + data

Představují:
• Technické
echnické a programové prostředky
• Telekomunikační sítě

Umožňují:
• Přijímat
• Zpracovávat a ukládat
• Přenášet

Data – informace

IT may be viewed as a computer-based
based system that has the ability to:
t
• Accept
• Store and retrieve
• Process
• Output/transmit

-2-
 www.cz-milka.net

IT (information technology) is a term that encompasses all forms of technology used to create, store,
exchange, and use information in its various forms (business data, voice conversations, still images,
images motion
pictures, multimedia presentations, and other forms, including those not yet conceived)

ICT (information and communications technology – or technologies) is an umbrella term that includes any
communication device or application, encompassing: radio, television, cellular phones, computer and network
hardware and software, satellite systems and so on, as well as the various services and applications associated with
them, such as videoconferencing and distance learning.

Možnosti získání SW:

Nákup – typový

Nákup – možnost přizpůsobení

Pronájem – služba SaaS

Licence placená či neplacená:
• Open Source
• Freeware

Vývoj ICT:

1946 ENIAC
1876 telephone

1964 IBM 360
1900 radio

1970 microprocessor
1940 TV

1981 IBM PC
1968 video

1989 www
1982 CD

1993 MM PC, browser
1985 cellular phone

2000 information society
1990 HDTV

2006 web 2.0
2000 digital age

Informační technologie:

Dávkové zpracování:
• Centrální počítač zpracovává úlohy
• Dávka úloh = „BATCH“
• Vstup – děrný štítek
• Výstup – sestava (tab. papír)
• Programovací jazyk COBOL

Interaktivní zpracování:
• Centrální počítač zpracovává několik
ně úloh „současně“
• Terminály – vzdálená pracoviště
• Výměna na informace mezi uživatelem a počítačem
po
• Transakce – určitá
itá úloha V/V, která se spouští na dálku a vykonává se jako celek
• Práce v reálném čase

Distribuované zpracování:
• Zpracování, které je zajišťováno
ováno dvěma
dv či více spojenými systémy
• Nová decentralizovaná architektura
o Výkonné mikropočítače
o Síťové zpracování
• Mainframe
• PC & LAN
• Architektura C/S
• Internet

Architektura C/S:

Počítače dle funkcí:
• Klient (dává požadavek)
• Server (vykonává požadavek)

Distribuce úkolů:
-3-
 www.cz-milka.net

• Prezentace
• Zpracování (logiky)
• Dat (uložení dat)

Existují různá technická řešení:
• Midleware

IT a podpora řízení:

-4-
 www.cz-milka.net

Dialog:

Interakce mezi uživatelem a počítač
čítačem

< 1980 pouze I/O

1981 pouze text (menu - list of user options)

1990 GUI - Windows

1998 Windows + browsers

2000 “Web lifestyle”

User friendly dialog:

WYSIWYG

Point-and-click
click access to databases

Standard tools
• Windows
• Forms
• Push buttons...

MM applications

Event-driven environment

Business on the Net Today:

“Hello, I’m on line, too”

Structured web site

Trying E-commerce

Doing E-business

Pervasive E-Business

One World - One Computer

Třívrstvá C/S architektura:

Statický a dynamický web:

-5-
 www.cz-milka.net

Technologie CS a SS:

Web technologie:

Na straně klienta:
• DHTML (DOM, CSS, JavaScript)
• Java applety
• Flash and Shockwawe
• SMIL (Synchronised Multimedia Integration Language)

Na straně serveru:
• CGI scripty
• SSJS – Server Side JavaScript
• ASP – Active Server Pages
• PHP – hypertextový preprocesor
• Java – beans, portlets…

Typy web site:

-6-
 www.cz-milka.net

Dnešní ICT:

Závěr:

HTML:

Jazyk HTML:

HTML je zjednodušenou verzí jazyka SGML (Standard Generalized Markup Language)

HTML je zaměřen především
edevším na definování zpzpůsobu rozvržení dat na www stránce

Současným standardem je verze HTML 4.0,
4.0, která byla definována konsorciem W3C v roce 1997

XHTML představuje
edstavuje následný krok za verzí HTML 4.01, ppřevádí HTML na XML aplikaci

Princip webu:

Dokumenty založené na jazyku HTML se propojují hyperlinky (vlastně
(vlastn adresy URL) a odesílají se protokolem
ňuje zobrazení požadované stránky.
HTTP. Prohlížeč (browser) umožňuje

Adresa – univerzální adresa zdroje (URL – uniform resource locator) má tvar: služba://adresa
• Web site (úvodní stránka): http://server/index.html
• Konkrétní stránka site: http://server/cesta
-7-
 www.cz-milka.net

• Osobní stránka uživatele: http://server/~jméno

• Soubor
oubor na pracovní stanici (v lokálním režimu):
režimu) file://cesta

Vytváření www stránek:

Jee závislé na tom, co chceme vytvořit
vytvoř

Vytvořit jednoduchou stránku lze za několik
n kolik minut, a to bez zvláštních znalostí jazyka HTML. Ale vytvo vytvořit
určitý
itý logický systém stránek (web site) vyžaduje jak znalosti o dané problema
problematice,
tice, tak určitou
ur znalost základů
jazyka HTML.

Stránky lze vytvářet pomocí různých
zných nástrojů:
• Editory jednoduchého textu – jde o primitivní editory, které umožňují ují psát pouze text – patří se m např.
editor Windows Notepad – poznámkový blok
• Konvertory – programy, ramy, které konvertují různé
r formáty do HTML, např. v textovém editoru Word lze
soubor (dokument) uložit ve formátu HTML
• Editory specializované na jazyk HTML, HTML bez nebo s možností náhledu na vytvářenou vytvá stránku, např.
PSPad, HomeSite, aj.

Mnoho www stránek je generováno pomocí www aplikací. Příkladem může že být formulář
formulá na přihlašování na
zkoušku nebo rezervace letenky.

Syntaxe jazyka HTML:

Příkazy jsou vlastně vložený (přidaný)
řidaný)
idaný) další text do dokumentu. Je to návod, jak prohlížeč
prohlíže má zobrazit přijatá
data (text) na obrazovce.

Zdrojový text HTML se skládá z příkazů,
př které se zapisují ve formátu značek
ek (angl. Tag). Při zápisu značek se
doporučují malá písmena.

Párové značky:
itou ččást dokumentu. Zapisují se:
Párové značky mají vliv na určitou
<značka> </značka>

Nepárové značky:
Nepárová značka definuje v HTML nějaký n prvek, například
íklad obrázek, nebo vyjadřuje
vyjadř určitou jednorázovou
změnu (např. zalomení řádku
ádku <br />).

Komentáře (poznámky). Začínají ínají znaky “<!--“
“<! a končí znaky “-->”

Syntaxe značky:

Každá značka se skládá ze jména značky,zna ky, za nímž následuje nepovinný seznam atributů
atribut dané značky. Jméno
značky
ky i její atributy se zapisují mezi úhlové závorky <>.

Atributy značky ky (pokud jsou pro zna čky a odd
značku definovány) se zapisují za jméno značky oddělují se jedním nebo
více znaky tabulátoru, mezery nebo nového řádku. Pořadí atributů u značky ky nemá zvláštní význam.

Hodnota atributu značky ky (pokud je definována) se zapisuje za jméno atributu, od nněhož se odděluje
znaménkem = (příklad width=56).

Tvoří-li hodnotu atributu více íce než jediné slovo nebo číslo musí se zapisovat mezi apostrofy nebo uvozovky
(příklad src="images/panorama.jpg")
src="images/panorama.jpg"

Ve jménech atributů jazyka HTML se velikost písmen nerozlišuje, ale ve většině tšině hodnot atributů je naopak
velikost písmen významná. Koncové značky zn nemají žádné atributy.

Ve verzi HTML 4.0 bylo nadefinováno celkem 16 základních atributů,, které se dají aplikovat téměř tém na
všechny nejčastěji ji používané značky.
znač Jsou to: class, dir, id, lang, onclick, ondblclick, onkeydown,
onkeypress, onkeyup,onmousedown, down, onmousemove, onmouseout, onmouseover, onmouseup,style, title

-8-
 www.cz-milka.net

Struktura stránky www:

Příklad:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
//W3C//DTD HTML 4.0 Deklarace typu dokumentu (DTD
Transitional//EN">
<html> Počátek textu stránky

<head> Počátek hlavičky

<title> CULS Rose Garden </title> Titulek, který se objevil nahoře

naho obrazovky v okně
prohlížeče

</head> Konec hlavičky

<body> Začátek těla stránky

<h1 align="center"> Začátek
átek nadpisu (heading1) zarovnávání ke středu
st
<img src="images/rose_QE.jpg“ g“ alt=“Rose“ width="60" ůže QE
Vložení obrázku – růže
height="40“ />
Welcome to the CULS Rose Garden Vlastní text záhlaví
<a href="czechversion.html"> Odkaz na českou
eskou verzi (stránku),
(s kterou získáme,
<img src="images/czech.gif" alt="vlajka cz" když poklepeme na obrázek české vlajky
WIDTH="56" HEIGHT="40"> (czech.gif)
</a>
</h1> Ukončení značkyky pro nadpis
<p align="left"> The CULS Rose Garden is set up in the Odstavec, který je zarovnán zleva. Obsahuje text,
style of natural rose park and serves mainly for který je uveden vlevo vedle obrázku
practical education of students of all study disciplines of the
Czech University of
Life Sciences in Prague. In the course of time the Rose
Garden has become not only important
didactic object but also well-known
known place for university
visitors and for rose friends.
-9-
 www.cz-milka.net

Actually more then 30 different

nt cultivars are placed. Total
number of plants is more then 2000.</p>
</p>
<img src="images/bird_view.jpg" alt="Bird's-eye
alt="Bird's view" Vložení obrázku „bird_view
bird_view.jpg“ = pohled
align="right" width=700" height="400"> z rektorátu na rozarium.
rozarium Obrázek je zarovnán
<ul> doprava.
Menu vytvořené
ené pomocí neuspřádaného
neusp seznamu
<li ><img src="images/rosa43a.gif" > Položky seznamu:
<a href="history.html">History</a> of the Rose Garden obrázek rosa43a.gif
</li> Odkaz na soubor histoty.html

</ul>
</body>
</html>

Moduly a značky HTML:

Structure – html, head, body

Metadata – meta, title

Block structural – div, p

Block phrasal – h1-h6, pre

Inline structural – br, span

Inline phrasal – em, strong

Linking – a, link

Images – img

Lists – dir, dl, dt, dd, ol, ul, li

Tables – table, td, th, tr,caption

Scripts – script

Styles – style

Forms – form, input, select, option, textarea

- 10 -