Technologie
Informacyjne

Monika Pernach
Katedra Informatyki Stosowanej i Modelowania
Konsultacje: środa, godz. 10:00-11.30, pok.715

TEMATYKA

HTML, XTML, XML, CSS, JavaScript, DHTML, Ajax

WYMAGANIA

Zaliczenie projektu
Obecność na ćwiczeniach, wykładach

LITERATURA

Wykaz publikacji po każdym wykładzie

Technologie
Informacyjne

Technologia informacyjna - całokształt zagadnień i działań związanych z
przetwarzaniem, przechowywaniem i prezentowaniem danych przy zastosowaniu
technologii komunikacyjnej, oprogramowania i sprzętu komputerowego.

Piotr Adamczewski: "Słownik informatyczny„ Wyd. HELION,

2005

3

Technologie
Informacyjne

Internet

1957 - Stany Zjednoczone, w odpowiedzi na wystrzelenie sputnika przez Związek
Radziecki, powołują agencję ARPA, która później walnie przyczynia się do powstania
Internetu i jego początkowego rozwoju.

1969 - Powstaje ARPAnet, sieć czterech komputerów stworzona przez
amerykańską agencję rządową ARPA, która zostaje wykorzystywana do komunikacji
między naukowcami, przesyłania listów elektronicznych i wspólnej pracy nad
projektami.

1970 - Uruchomiona została pierwsza wersja FTP, File Transfer Protocol, dzieki
któremu powstaną w Internecie biblioteki programów, a także sterowników do
sprzętu, dokumentacji.
1974 - Po raz pierwszy pojawia się słowo Internet, w opracowaniu badawczym
dotyczącym protokołu TCP, napisanym przez Vintona Cerfa. W uznaniu za tą i inne
zasługi Vinton Cerf jest znany jako "ojciec Internetu".

1990 - Tim Berners-Lee tworzy World Wide Web, system pozwalający autorom na
połączenie słów, zdjęć i dźwięku, początkowo pomyślany dla wsparcia naukowców
zajmujących się fizyką w CERN. Projekt World Wide Web powstaje na komputerze
NeXT, w pierwszej odsłonie umożliwia jednocześnie przeglądanie i edycję
hipertekstowych dokumentów. W rok później zostaje zainstalowany na serwerach
CERN, a z nich rozpowszechnia się na cały świat.

5

Internet na
świecie

Technologie
Informacyjne

30% - ilość internautów na świecie

– wg

http://www.internetworldstats.com

(marzec,

2011)

6

Internet na
świecie

Technologie
Informacyjne

17 sierpnia 1991 r. Rafał Pietrak, fizyk z Uniwersytetu Warszawskiego, nawiązuje
łączność w oparciu o protokół TCP/IP z Janem Sorensenem z Uniwersytetu w
Kopenhadze.

20 grudnia 1991 przyłączenie Polski do EARN (European and Academic Research
Network) - europejskiego odgałęzienia sieci BITNET (Because It's Time Net).
Internet w Polsce obejmował wówczas sieci lokalne na Wydziale Fizyki UW (ok. 40
komputerów), w Obserwatorium Astronomicznym UW (ok. 10 komputerów), w
Centrum Astronomicznym PAN (ok. 20 komputerów), w krakowskim Instytucie Fizyki
Jądrowej (ok. 10 komputerów) i pojedyncze komputery w Uniwersytecie
Jagiellońskim, w „Cyfronecie”, w Toruniu, w Katowicach.

Pierwszym operatorem Internetu w Polsce była instytucja o nazwie NASK (Naukowa
i Akademicka Sieć Komputerowa), działająca początkowo w ramach Uniwersytetu
Warszawskiego.

Polska Strona Domowa (National Home Page of Poland) – pierwsza polska strona
internetowa

7

Internet w
Polsce

Technologie
Informacyjne

58% - ilość internautów w Polsce

8

Internet w
Polsce

Technologie
Informacyjne

World Wide Web -

projektowanie

www - historia

Sir

Timothy

Berners-Lee

(ur.

8.06.1955, Londyn) – twórca i
jeden z pionierów usługi WWW.
http://info.cern.ch/ - pierwsza na
świecie strona internetowa

1
0

Technologie
Informacyjne

WWW (World Wide Web) – hipertekstowy, multimedialny, sieciowy, interakcyjny
system informacyjny oparty na publicznie dostępnych, otwartych standardach IETF
i W3C. Pierwotnym i w chwili obecnej nadal podstawowym zadaniem WWW jest
publikowanie informacji.

URL (Uniform Resource Locator) - ujednolicony format adresowania zasobów
(informacji, danych, usług), stosowany w Internecie i w sieciach lokalnych.

Przykładowy URL:
http://www.agh.edu.pl/pl/studenci/organizacje-studenckie.html

http – protokół dostępu do zasobu
www.agh.edu.pl – adres serwera
studenci/organizacje-studenckie.html – ścieżka dostępu do zasobu

HTTP (Hypertext Transfer Protocol) – protokół przesyłania dokumentów
hipertekstowych.

FTP (File Transfer Protocol) - protokół typu klient-serwer, który umożliwia
przesyłanie plików z i na serwer poprzez sieć TCP/IP.

1
1

www - pojęcia

Technologie
Informacyjne

12

PROCES PROJEKTOWY (wg J.J.Garretta)

1. Wymagania użytkowników

zbadanie i zdefiniowanie potrzeb użytkowników strony

2. Strategia strony

zdefiniowanie oczekiwań klienta (zarobek, wizerunek?)

3. Strategia technologii

określenie, która z dostępnych technologii przyniesie najwięcej korzyści

4. Strategia treści

co powinno znaleźć się na stronie, żeby była atrakcyjna

5. Projekt architektury informacji

jak pokazać informacje, żeby można je było łatwo znaleźć

6. Opracowanie technologii

pisanie kodu

7. Opracowywanie treści

8. Konkretny wygląd

grafika, layout, rozplanowanie GUI

9. Kierownictwo projektu

dotrzymanie harmonogramu prac, nieprzekroczenie budżetu

Technologie
Informacyjne

13

Technologie Informacyjne

PROTOTYPOWANIE

(koncepcja i wizualizacja)

ZALETY:

- oszczędność czasu i pieniędzy

- jasność celów

- sposób na wykrycie błędów

RODZAJE:

- makiety/mockups (szkice stron i interfejsów, Microsoft Visio, Axure)

- prototypy funkcjonalne (prototypowanie za pomocą kodowania)

- diagramy przepływu (ścieżki przejść, ilustracja przepływu informacji)

14

Technologie Informacyjne

UKŁAD STRONY

- pionowy (treść umieszczona w dół przeglądarki, np. artykuły)

- poziomy (np. galeria obrazów, zdjęć)

- centralny (nie wymaga odwoływania się do żadnego z pasków narzędzi, strony
firmowe)

Menu

Treść

Baner

Treść

Menu

Baner

Treść

Menu

Menu

Treść

Treść

Menu

Treść

Menu

Menu

30%

15

Technologie Informacyjne

MENU GŁÓWNE

-zakładki (liczba kategorii nie przekracza 10) – 43%

- menu kaskadowe (kłopoty z obsługą)

16

Technologie Informacyjne

MENU GŁÓWNE

- chmura tagów (słowa kluczowe, słowa najczęściej wyszukiwane)

- breadcrumbs/okruszki chleba (str. gł./strona sekcji/strona podsekcji – poziomy pasek
„ścieżka”) - 45%

17

Technologie Informacyjne

LOGO

- linkowanie logo ze stroną główną

- najczęściej górna, lewa strona

18

Technologie Informacyjne

KOSZYK

- w systemie e-commerce

19

Technologie Informacyjne

LOGOWANIE

- system rejestracji
- odzyskiwanie i zapamiętywanie
hasła

- boks
- link w prawym górnym rogu

74%

20

Technologie Informacyjne

ELEMENTY GUI

(graficzny interfejs użytkownika)

Button

Hiperłącze (popularne: nieb., czerw., czarny, szary,
podkreśl.)

Text field, text area (linia edycji, pole edycji)

Droplist (drop-down, list box, spin box)

21

Technologie Informacyjne

ELEMENTY GUI

Check box (pole wyboru,
możliwość wybrania kilku opcji)

Radio button (przełącznik, wybór
jednej z wielu opcji)

22

Technologie Informacyjne

ELEMENTY GUI

Scroll bar (pasek przewijania)

Progress indicator (wskaźnik postępu, progress bar, asynchronous progress
indicator)

Kursory

Ikony i metafory (domek, koperty, koła ratunkowego, koszyka)

http://www.webhelp.pl/narzedzia/scrollbar.php

2
3

www - projekt

Struktura hierarchiczna

Struktura liniowa Struktura

liniowa z alternatywą

Struktura liniowo-hierarchiczna

Struktura pajęczyny

• jaka treść?

• jaki cel?

• główne tematy

• plan strony

• sposób
wykonania

Technologie
Informacyjne

HTML

Technologie Informacyjne
Information Technology

html

2
5

HTML (HyperText Markup Language - hipertekstowy) –wykorzystywany do
tworzenia stron internetowych. Pozwala opisać strukturę informacji zawartych
w dokumencie nadając znaczenie poszczególnym fragmentom tekstu (formując
linki, nagłówki, akapity, listy, itp.) oraz osadzić w tekście dodatkowe obiekty
np. statyczne grafiki, interaktywne formularze, dynamiczne animacje.

XHTML (Extensible HyperText Markup Language - rozszerzalny hipertekstowy
język znaczników) – język służący do tworzenia stron WWW ogólnego
przeznaczenia. W odróżnieniu od HTML-a (który jest aplikacją SGML),
dokumenty pisane w XHTML są zgodne z oficjalną specyfikacją XML.

Technologie Informacyjne
Information Technology

html

2
6

<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>dzień hutnika</title>
<meta name="author" content="monika pernach">
<meta name="description" content="dzień˝ hutnika">
<meta name="keywords" content="dzień hutnika, metalurgia, sesja naukowa">
<meta name="copyright" content="monika pernach">
<meta name="language" content="pl">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
............ treść strony
</body>
</html>

<!doctype"> definiuje typ dokumentu, informuje przeglądarkę, z którą wersją
języka html ma ona do czynienia

.

<!doctype>

Technologie Informacyjne
Information Technology

znaczniki

2
7

<html> informuje, że zawartość odczytywanego pliku to kod, napisany w html‑u
<head> wyznacza nagłówek strony
<body> zawiera treść strony

<head>

<title> definiuje tytuł dokumentu, który będzie wyświetlany na pasku

tytułu

przeglądarki.

<meta> w elemencie meta umieszczane są opisy i słowa kluczowe

wykorzystywane przez wyszukiwarki.

<meta

name=”author|description|keywords|generator|revised|inny”

content=„tekst”>

<meta http-equiv=”content-type|expires|refresh|set-cookie”

content=„akcja”>

<link> określa relację pomiędzy dwoma dokumentami.

<script> umożliwia umieszczenie w dokumencie skryptu

<style> definiuje styl w dokumencie.

<style type=”text/css|text/javascript”

</head>

<head>

Technologie Informacyjne
Information Technology

formatowanie

tekstu

2
8

<h1> tekst </h1> - nagłówek
<p> tekst </p> - akapit

nagłówki i akapity

<p>Chuck

Norris

potrafi

obliczyć prędkość danego
pojazdu znając tylko jego
kolor.</p>
<p>Chuck

Norris

potrafi

nacisnąć Ctrl-Alt-Del jednym
palcem.</p>

<h1>Wsiada informatyk do
taksówki. Taksiarz pyta:</h1>
<h2>Dokąd jedziemy?</h2>
<h3>149.156.112.100</h3>

Technologie Informacyjne
Information Technology

formatowanie

tekstu

2
9

style fizyczne

<b>

pogrubienie

<i>

kursywa

<u>

podkreślenie

<s>

przekreślenie

<sub>

indeks dolny

<sup>

indeks górny

<big>

czcionka większa od pozostałych

<small> czcionka mniejsza od pozostałych
<pre>

tekst preformatowany - każda spacja, znajdująca się pomiędzy znacznikami <pre> i

</pre>, zostanie wyświetlona. standardowo dodatkowe znaki spacji, tabulacji, nowej linii są
ignorowane.
<hr>

linia pozioma

atrybuty:

size

grubość linii w pikselach

width

długość linii w pikselach

color

kolor wypełnienia linii

align

położenie linii w poziomie

noshade

brak cienia

<br>

łamanie linii

<hr size="2”>
<hr width=”10%”

>

Technologie Informacyjne
Information Technology

formatowanie

tekstu

3
0

położenie tekstu

align

atrybut definiuje wyrównanie względem innych elementów

wartości:

right

do prawej strony

left

do lewej strony, wartość domyślna

center

wyśrodkowanie

justify

do prawej i do lewej strony

<center> wyśrodkowanie tekstu

Szerokość optymalna kolumny zbitego tekstu to 8 –10 cm, tekst do lewej lepiej,
tak jak piszemy, justowanie nie dla wąskich kolumn)

<h1 align=center>agh</h1>
<p align=right>kolejny wykład</p>

Technologie Informacyjne
Information Technology

formatowanie

tekstu

3
1

czcionki

<font> element definiuje właściwości czcionki

.

atrybuty:

size

wielkość

color

kolor

face

rodzaj

<font size=”5” color=”#d9d9d9” face=”Arial”>Zawsze Coca-Cola</font>

CZCIONKI SZERYFOWE, BEZSZERYFOWE

CZCIONKI SZERYFOWE (szybciej czytamy! Jeśli czytamy), BEZSZERYFOWE, MONOSPACED -
stała szerokość znaków, CURSIVE jak pismo odręczne, FANTASY – ozdobne, ograniczyć
różnorodność czcionek na stronie, pangramy – zdania zawierające wszystkie litery alfabetu,
nie wszystkie fonty mogą być zainstalowane – tel.komórkowe, deklaracja font family w css
dla różnych przeglądarek, popularność: arial, verdana, helvetica, times, wielkość czcionki – 8
do 10 punktów – różnie dla różnych czcionek, kolor biała na czarnym (odwrotnie obniżenie
czytelności 10-40%, jeszcze gorzej przy szeryfach), color contrast analyser – testowanie
kolorystyki strony, kursywa źle (męcząca), bold – super, podkreślenie - żle)

Technologie Informacyjne
Information Technology

listy

3
2

<li> definiuje pozycje listy
<ol> lista numerowana, oznaczana kolejnymi liczbami
<ul> lista wypunktowana, oznaczona kropkami lub innymi symbolami
<dl> lista definicji

<ol> - lista numerowana

atrybut type, który umożliwia wybór jednego z pięciu możliwych schematów numerowania:
"1" standardowa numeracja za pomocą liczebników arabskich
"a" numeracja za pomocą kolejnych, małych liter alfabetu
„A„ numeracja za pomocą kolejnych, wielkich liter alfabetu
"i„ numeracja za pomocą kolejnych liczb alfabetu rzymskiego, zapisanych małymi literami
„I„ numeracja za pomocą kolejnych liczb alfabetu rzymskiego, zapisanych wielkimi literami
atrybut start, pozwala na określenie, od jakiej liczby lub litery należy rozpocząć numerację.

<ol>

<ol>
<li>AGH
<li>UJ
<li>PK
</ol>

<ol type="I"
start="6">
<li>Czerwiec</li>
<li>Lipiec</li>
</ol>

Technologie Informacyjne
Information Technology

listy

3
3

<ul> - lista wypunktowana

atrybut type, który umożliwia wybór jednego z trzech możliwych schematów punktowania:
"disc„ kółko lub kropka
"square„ kwadrat
"circle„ większość przeglądarek wyświetla ”disc” jako wypełnione kółko

<ul>

<ul
type=„square">
<li>poniedziałek</li
>
<li>wtorek</li>
<li>środa</li>
</ul>

<ul>
<li>wiosna</li>
<li>lato</li>
</ul>

Technologie Informacyjne
Information Technology

listy

3
4

<dl> - lista definicji

Każda część elementu listy definicji posiada swój znacznik: <DT> oznacza pojęcie (definition
term), a <DD> definicję

<dl>

<dl>
<dt>freeware</dt>
<dd>licencja oprogramowania umożliwiająca darmowe rozprowadzanie aplikacji bez
ujawnienia kodu źródłowego. </dd>
<dt>shareware</dt>
<dd>rodzaj licencji programu komputerowego, który jest rozpowszechniany bez opłat, ale z
pewnymi ograniczeniami</dd>
</dl>

Technologie Informacyjne
Information Technology

listy

3
5

Sposób na odzwierciedlenie struktur hierarchicznych, np. spisu treści. Wystarczy wstawić całą
listę jako element innej. Lista zagnieżdżona jest wyświetlana z odpowiednim wcięciem.

listy zagnieżdżone

<ul>
<li>styczeń</li>
<li>luty</li>
<ul>

<li>poniedziałek</li>
<li>wtorek</li>
<li>środa</li>
</ul>
<li>marzec</li>
</ul>

Technologie Informacyjne
Information Technology

komentarz

3
6

<!-- dowolna treść-- > - komentarz

Tekst zawarty w komentarzach nie pojawia się na ekranie, ponieważ jest ignorowany przez
przeglądarkę

<!-- -->

Technologie Informacyjne
Information Technology

tworzenie

hiperpołączeń

3
7

<a> - odsyłacz, służy do tworzenia połączeń. Przykładowy atrybut:
href – definiuje adres strony lub miejsca, do których następuje odwołanie (Hypertext
REFerence)

ścieżka względna - określa położenie pliku z punktu widzenia bieżącej pozycji w drzewie
katalogów.

ścieżka bezwzględna - tworzona jest w oparciu o bezwzględną pozycję pliku
w drzewie katalogów.
<a href="../../u1/lemay/file.html”> - ścieżka bezwzględna, (..) zawsze wskazują na katalog
znajdujący się

bezpośrednio powyżej bieżącego.

<a href="/u1/lemay/file.html”> - ścieżka względna

<a>

Technologie Informacyjne
Information Technology

tworzenie

hiperpołączeń

3
8

kolory linków można zmieniać lokalnie (css), lub globalnie za pomocą atrybutów znacznika
<body>
link

kolor linka

vlink

kolor linka, który zostały już przynajmniej raz wybrany

alink

kolor linka, na których został naciśnięty, ale jeszcze nie zwolniony przycisk myszy

<body bgcolor="#d9d9d9" link="#ffffff">

kolory linków

Technologie Informacyjne
Information Technology

tabele

3
9

<table> definicja tabeli
<tr>

wiersz tabeli

<td>

komórka tabeli

<th>

komórka nagłówkowa

atrybuty:

colspan

definiuje ilość połączonych kolumn

rowspan

definiuje ilość połączonych wierszy

width

szerokość

height

wysokość

border

obramowanie

cellpadding

odległość pomiędzy obramowaniem i zawartością

cellspacing

odległość pomiędzy komórkami

bgcolor

kolor tła

align

położenie zawartości w poziomie

valign

położenie zawartości w pionie

<table> i inne

Technologie Informacyjne
Information Technology

tabele

4
0

<table border="1" bgcolor="#d9d9d9"
height="30%"
cellpadding="4" cellspacing="5">
<tr>
<td>Poniedziałek</td>
<td>Matematyka</td>
<td>8:30</td>
<td>kolokwium</td>
</tr>
<tr>
<td valign="top">Wtorek</td>
<td>fizyka</td>
<td>9:30</td>
<td>test</td>
</tr>
<tr>
<td align="right">Środa</td>
<td>plastyka</td>
<td bgcolor="red">10:00</td>
<td>wystawa</td>
</tr>
</table>

<table> i inne

Technologie Informacyjne
Information Technology

tabele

4
1

<table> i inne

<table border="1">
<tr>
<th
colspan="2">&nbsp;</th>
<th>Canon</th>
</tr>
<tr align="center">
<th
rowspan="2">Aparat</th>
<th>Cyfrówka</th>
<td>Nowy</td>
</tr>
<tr align="center">
<th>Lustrzanka</th>
<td>Używany</td>
</tr>
</table>

Technologie Informacyjne
Information Technology

grafika

4
2

<img> - znacznik służy do wyświetlania obrazów

atrybuty:

src

adres obrazka

alt

tekst alternatywny; pojawia się, jeśli obrazek nie mógł być wyświetlony

width

szerokość

height

wysokość

align

położenie obrazu względem tekstu (top, bottom, middle, left, right)

<img src=”../obrazek.jpg" alt="obrazek" width=”100%” height=”50%” align=”top”>

background - atrybut znacznika <body> definiuje adres graficznego tła strony.
bgproperties=”fixed” – efekt nieruchomego tła (przesuwać się będzie tylko tekst)

<body background=”/obrazek.jpg" bgproperties=”fixed”>

bgcolor - zmiana koloru tła, atrybut znacznika <body>

<body bgcolor=”#934ce8”>

- kolor podany w postaci szesnastkowej

<body bgcolor=”white”>

- kolor podany w postaci predefiniowanej nazwy

obraz i tło

Technologie Informacyjne
Information Technology

grafika

4
3

Schematy kolorów harmonijnych:
- monochromatyczne

- pastelowe

- kontrastowe
Do tworzenia zestawów harmonijnych wykorzystuje się m.in. zasady:

- komplementarności – weź dowolne dwa kolory leżące naprzeciwko siebie w kole barw

- triady – weź dowolne trzy kolory leżące na kole barw w jednakowych odległościach od siebie

- weź cztery kolory leżące na kole barw w jednakowych odległościach od siebie

obraz i tło

Technologie Informacyjne
Information Technology

poprawność kodu

4
4

testowanie strony

1. head
2. odnośniki
3. grafika
4. zgodność z przeglądarkami
5. rozdzielczość i kolory
6. czas ładowania
7. walidacja strony

* poprawny kod zwiększa prawdopodobieństwo, że strona będzie się dobrze

wyświetlać pod większością przeglądarek.

* strona nie zawierająca błędów ładuje się znacznie szybciej
* aktualizacja poprawnego kodu jest łatwiejsza
* zdobywamy dodatkową wiedzę o języku HTML

Programy do walidacji i nie tylko:
http://www.netmechanic.com/maintain.htm
http://watson.addy.com/

Technologie Informacyjne
Information Technology

pozycjonowanie strony

4
5

Pozycjonowanie strony – działanie zmierzające do wypromowania danego
serwisu internetowego na jak najwyższe pozycje w wynikach wyszukiwania
wyszukiwarek internetowych dla wybranych wyrażeń kluczowych.

Ocena strony:

• popularność strony

• link popularity

• budowa i zawartość strony

• darmowe i płatne serwery

• rejestracja domeny

publikowanie strony

Prototypowanie

Technologie Informacyjne

SORTOWANIE KART

Sortowanie kart to technika badawcza pozwalająca opisać, w jaki sposób

użytkownicy kategoryzują informacje pokazywane na stronie internetowej lub w
aplikacji. Badanym osobom przedstawia się różne informacje - na przykład elementy
nawigacji, tytuły podstron, tematy, produkty, opisy itp. -, a następnie prosi się je o
pogrupowanie tych danych w struktury. Zadaniem badaczy jest w tych strukturach
doszukać się pewnych schematów, powtarzających się wzorów. Co to daje? Wiedza
uzyskana w ten sposób pozwala na dostosowanie układu podstron i etykiet menu do
oczekiwania grupy docelowej.

- najlepiej pracować z ok.15 osób, przygotować ok.. 50 kart, im więcej tym trudniej przeanalizować dane
- można przeprowadzać zdalne badania card sorting przy pomocy programów z usługą online typu: OtimalSort, xSort

- 7±2 – pojemność pamięci krótkoterminowej, dlatego należy grupować przedstawiane elementy

PAPIEROWE PROTOTYPY

Prototyp powinien zawierać następujące elementy:

• architektura informacji - rozmieszczenie elementów
• lista funkcjonalności – opcje i możliwości serwisu
• opisy zasad funkcjonowania – np. sposób pobierania i wyświetlania

informacji na stronie

• wstępnie zdefiniowana terminologia – co i jak się będzie nazywało
• zawartość serwisu
• cel – na podstawie prototypu powinniśmy wiedzieć do czego serwis służy

- stosujemy kiedy mamy mało czasu, niski budżet, wyłączą prąd
- Denim – program pozwala na połączenie papierowego prototypowania i elektronicznie

powstających mockupów

PROTOTYPOWANIE KOMPUTEROWE

• PowerPoint
• Ms Visio
• Axure

PERSONY

Każda strona powinna mieć okręśloną grupę docelową użytkowników i pod ich kątem powinna być
optymalizowana. Persona jest archetypem użytkownika strony i tworzy się ją na początku procesu
projektowego. Najlepiej stworzyć kilka person, pamiętając o tym by nie kierować się własnymi
odczuciami, lecz przyjmując punkt widzenia persony i jej oczami oceniać projekt.

Źródła informacji o użytkownikach:

• pogłębione wywiady indywidualne
• wywiady fokusowe
• systemy zbierania statystyk odwiedzin strony www

Charakterystyka persony:

• zdjęcie (by nie myśleć o personach jak o sztucznych tworach)
• imię i nazwisko
• dane demograficzne
• cechy charakteru
• sytuacja życiowa i status materialny
• opis środowiska
• motywacja do korzystania ze strony
• cele, które persona chce osiągnąć
• wzorce zachowań związane ze stroną

Badania

Technologie Informacyjne

BADANIA JAKOŚCIOWE

Fokusowe wywiady grupowe oraz pogłębione wywiady indywidualne służą do odczytania
opinii, sądów, motywów zachowań i emocji przyszłych użytkowników witryny. Badania te
ułatwiają generowanie idei związanych z rozwojem witryny, pozwalają poznać konkurencję,
oraz dają możliwość wstępnej oceny projektu i zdiagnozowania potencjalnych problemów.

Badania jakościowe warto przeprowadzić, gdy:

- wprowadzony jest nowy rodzaj strony (dostosowanie do oczekiwań)

- wprowadzana jest strona, której podobne wersje już funkcjonują (ocena konkurencji)
- redesign (poznanie opinii i odczuć wobec zmian)
- chcemy poznać opinie docelowych użytkowników na temat wyglądu i słownictwa strony

(miejsce przeprowadzania wywiadu, rola moderatora, analiza danych, wywiady indywidualne,
badania jakościowe online)

Technologie Informacyjne

TESTY FUNKCJONALNOŚCI

Testy te pozwalają zidentyfikować obszary strony, w których użytkownicy mają trudności.
Zjawiska wykazywane w czasie testowania prototypu strony z dużym prawdopodobieństwem
wystąpiłyby podczas rzeczywistego funkcjonowania strony. Testy mogą być przeprowadzane
we wstępnej fazie projektu, jak i za każdym razem, gry wprowadzone zostaną zmiany.

(rola moderatora, uczestnicy (5 uczestników, 85% informacji), środowisko, sprzęt do testów,
nagrywanie testów, plan badania, rozmowa potestowa, raport z badania (wyniki, wskazówki),
dyskusja wyników)

TESTY FUNKCJONALNOŚCI ONLINE

Morae oprogramowanie firmy TechSmith umożliwia: nagrywanie sesji z drugą osobą
pracującą na zdalnym komputerze, podgląd na żywo co wykonuje osoba testująca, zebranie
dokumentacji)

Technologie Informacyjne

CLICKTRACKING

Metoda pozwalająca na śledzenie aktywności użytkowników na stronach www. Clicktracking
wykorzystuje system wizualizacji aktywności na danej stronie internetowej, by śledzić
kliknięcia użytkowników co do piksela.

(Generalnie narzędzia do clicktrackingu wykorzystują informacje na temat:
- rozdzielczość, dla której dana strona została przygotowana,
- wielkość okna przeglądarki internetowej osoby odwiedzającej stronę,
- punkt na ekranie, w którym nastąpiło kliknięcie myszy)

Heat map – mapa najbardziej gorących miejsc na stronie.

Technologie Informacyjne

Testy A/B

Testy A/B opierają się na możliwości sprawdzenia dwu lub więcej różnych wersji tego samego
produktu. Za ich pomocą można przetestować:
- banery reklamowe
- elementy graficzne
- układ strony
- rozmieszczenie elementów kluczowych

Badania z analizą statystyk

System operacyjny, przeglądarki, rozdzielczość, głębia kolorów, flash, kim są i czego szukają?

Windows XP IE , Firefox

1024x768

32 bity

1.6%

Technologie Informacyjne

Eyetracking

Wnioski z badania użyteczności:

 Użytkownicy witryn internetowych bardzo szybko przeglądali strony internetowe
 Użytkownicy witryn internetowych badali strony internetowe zgodnie z kształtem litery F (najwięcej
informacji jest przyswajanych z pierwszych linijek -począwszy od lewej krawędzi ekranu)
 Badani byli niezwykle skuteczni w selektywnym wybieraniu informacji (jak wynika z oględzin ich
gałek ocznych ich wzrok skupiał się tylko na najistotniejszych elementach)
 Obrazki umieszczane w środku tekstu były często traktowane jako przeszkody i omijane
 Grafiki rozmyte, niewielkie, nieczytelne były automatycznie pomijane.
 Dużo większą uwagę badanych zwracały obrazki zawierające jakieś informacje, niż te, które miały
jedynie walory estetyczne.
 Badani często patrzyli na fotografie, na których fotografowany patrzył prostu w obiektyw
 Animacje przyciągały uwagę tylko w sytuacjach, kiedy były nieskomplikowane oraz miały związek z
tekstem.
 Witryny zaprojektowane w prosty sposób, zawierające mało elementów powodują, że użytkownik
bardziej skupia się na treści przekazu.
 Reklamy banerowe były omijane wzrokiem przez przytłaczającą większość użytkowników.
 Grupą która nie była “ślepa” na banery (banner blindness) były dzieci do siódmego roku życia, które
klikają na elementy wyróżniające się ilością kolorów i animacjami

Badania te zwane również okulografią, polegają na śledzeniu ruchu gałek ocznych
użytkownika.

Przydatne programy i linki

KOLORY

Fujitsu Color Doctor, Accessibility Color Wheel, Visual Impairment Simulator – pozwalają na badania
strony po względem dostępności dla osób z wadami wzroku

• protanopia – nierozpoznawanie barwy czerwonej, lub mylenie jej z barwą zieloną
• deuteranopia (daltonizm) – nierozpoznawanie barwy zielonej, lub mylenie jej z barwą czerwoną
• tritanopia – nierozpoznawanie barwy żółtej i niebieskiej

Adobe Kuler, Color Palette Generator, Color Fields Color Pickr

Istnieje kilka podstawowych zasad tworzenia zestawów kolorystycznych. W wyniku ich zastosowania

otrzymujemy tzw. schematy kolorów harmonijnych:
- monochromatyczne, pastelowe, kontrastowe

Do tworzenia zestawów harmonijnych wykorzystuje się zasady:
- komplementarności (dwa kolory leżące naprzeciw siebie w kole barw)
- triady (trzy kolory leżące na kole barw tworząc trójkąt)
- cztery dowolne kolory tworzące czworokąt na kole barw

CSS

CSS

CSS - kaskadowe arkusze stylów (Cascading Style Sheets) - język dający
możliwość

zarządzania sposobem formatowania (wyglądem) www.

Najważniejszym powodem wprowadzenia stylów było rozdzielenie struktury i
prezentacji dokumentów. Wszystkie polecenia dotyczące formatowania można
umieścić w jednym miejscu (tzw. arkuszu) i powiązać je z konkretnymi elementami,
wstawionymi za pomocą (X)HTML.

Sposoby definiowania CSS:

• styl wpisany,

• osadzony arkusz stylu,

• zewnętrzny arkusz stylu.

5
9

Technologie Informacyjne
Information Technology

CSS – podstawy

Selektor + deklaracja. Selektor to nazwa znacznika HTML. Deklaracja
zawiera dwie części: właściwość (lub atrybut) i wartość.

np.

H2 { color:blue; font-size:11pt; }

6
0

Technologie Informacyjne

CSS

Postać kaskadowego arkusza

stylów

Styl wpisany jest wprowadzony wewnątrz dokumentu HTML w wybranym
znaczniku i parametryzuje zmiany tylko w nim. Takie ustawienia stają się
dominujące nad stylem osadzonym i zewnętrznym.

np.

</head>
<body>
<p style="color: blue; background-color: yellow;">

Niebieski tekst na

żółtym tle

Niebieski tekst na żółtym tle</p>
</body>
</html>

6
1

Technologie Informacyjne

Styl wpisany

CSS

Osadzony arkusz stylu definiuje atrybuty dla całego dokumentu.
Ustawienia tak wprowadzone stają się dominujące tylko nad stylem
zewnętrznym. Osadzony arkusz stylu jest umieszczony wewnątrz
dokumentu HTML, ale najczęściej wprowadza się go w nagłówku (w sekcji
HEAD). Definicje stylów znajdują się między znacznikami <STYLE>
</STYLE>.

np.

<HTML>
<HEAD>
<STYLE>
<!--
H2 {font-size: 12pt; color:red; text-align:center;}
P {font-size: 10pt; color:#123456; text-align:right;}
TD {border-color: blue; border-style:dotted;}
-->
</STYLE>
</HEAD>
<BODY>
<H2>

6
2

Technologie Informacyjne

Osadzony arkusz stylu

CSS

Zewnętrzny arkusz stylu umożliwia scentralizowanie definicji stylu i
uniknięcie konieczności wprowadzania poprawek w wielu plikach przy
zmianie projektu Wszystkie definicje stylu są zamieszczone w pliku
zewnętrznym, z którym strona www jest połączona hiperłączem. Plik ten
może mieć dowolną nazwę, ale musi mieć rozszerzenie nazwy .css, np.
styl.css.

np.

<STYLE type="text/css">
<!--
H2 {font-size: 12pt; color:red; text-align:center;}
P {font-size: 10pt; color:#123456; text-align:right;}
TD {border-color: blue; padding:5; border-style:dotted; border-width:2}
-->
</STYLE>

6
3

Technologie Informacyjne

Zewnętrzny arkusz

stylu

CSS

• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

6
4

Technologie Informacyjne

Kolory i tła

CSS

h1 {
color: #ff0000;
}

body {

background-color: #FFCC66;

}
h1 {

color: #990000;
background-color: #FC9804;

}

• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

6
5

Technologie Informacyjne

Kolory i tła

CSS

body {

background-color: #FFCC66;

background-image: url("butterfly.gif");
}
h1
{ color: #990000; background-color: #FC9804;
}

• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

6
6

Technologie Informacyjne

Kolory i tła

CSS

body {

background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;

}
h1 {

color: #990000;
background-color: #FC9804;

}

• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

6
7

Technologie Informacyjne

Kolory i tła

CSS

body {

background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;

}
h1 {

color: #990000;
background-color: #FC9804;

}

• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

6
8

Technologie Informacyjne

Kolory i tła

CSS

body { background-color: #FFCC66;

background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom; }

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

6
9

Technologie Informacyjne

Kolory i tła

CSS

Właściwość font-family jest używana do ustawiania listy priorytetowej czcionek które ma wykorzystywać
dany element lub cała strona. Jeżeli pierwsza czcionka na liście nie jest zainstalowana na komputerze na
którym otwierana jest strona, przeglądarka poszuka kolejnej czcionki na liście dopóki nie znajdzie
odpowiedniej.

h1 { font-family: arial, verdana, sans-serif;}
h2 { font-family: "Times New Roman", serif;}

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

7
0

Technologie Informacyjne

Kolory i tła

CSS

Właściwość font-style definiuje styl użytej czcionki. Możliwe wartości to: normal, italic lub oblique.

h1 { font-family: arial, verdana, sans-serif;}
h2 { font-family: "Times New Roman", serif; font-style: italic;}

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

7
1

Technologie Informacyjne

Kolory i tła

CSS

Właściwości font-variant używamy gdy chcemy wybrać powiędzy czcionką normalną (wartość normal) lub
kapitalikami (wartość small-caps). Czcionka small-caps oznacza że będą wykorzystywane mniejszych
rozmiarów duże litery zamiast małych liter.

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

7
2

Technologie Informacyjne

Kolory i tła

CSS

Właściwość font-weight opisuje jak gruba lub "ciężka" ma być czcionka. Czcionka może być normalna
(wartość normal) lub pogrubiona (wartość bold).

p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

7
3

Technologie Informacyjne

Kolory i tła

CSS

Jednostka 'px' oraz 'pt' czynią wielkość czcionki absolutną, podczas gdy '%' oraz 'em' pozwalają
użytkownikowi określić wielkość czcionki.

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

p { font: italic bold 30px arial, sans-serif; }

font-style | font-variant | font-weight | font-size | font-family

7
4

Technologie Informacyjne

Odnośniki i pseudoklasy

CSS

a:link {

color: blue;
text-decoration:none;

}

a:visited {

color: purple;
text-decoration:none;

}

a:active {

background-color: yellow;
text-decoration:none;

}

a:hover {

text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;

}

7
5

Technologie Informacyjne

Identyfikacja i grupowanie elementów

(class i id)

CSS

<p>Grona białego wina:</p>

<ul>

<li><a href="ri.htm">Riesling</a></li>

<li><a href="ch.htm">Chardonnay</a></li>

<li><a href="pb.htm">Pinot Blanc</a></li>

</ul>

<p>Grona czerwonego wina:</p>

<ul>

<li><a href="cs.htm">Cabernet
Sauvignon</a></li>

<li><a href="me.htm">Merlot</a></li>

<li><a href="pn.htm">Pinot Noir</a></li>

</ul>

<p>Grona białego wina:</p>

<ul>

<li><a href="ri.htm"
class="whitewine">Riesling</a></li>

<li><a href="ch.htm"
class="whitewine">Chardonnay</a></li>

<li><a href="pb.htm" class="whitewine">Pinot
Blanc</a></li>

</ul>

<p>Grona czerwonego wina:</p>

<ul>

<li><a href="cs.htm" class="redwine">Cabernet
Sauvignon</a></li>

<li><a href="me.htm" class="redwine">Merlot</a></li>

<li><a href="pn.htm" class="redwine">Pinot
Noir</a></li>

</ul>

a { color: blue;}

a.whitewine { color: #FFBB00;}

a.redwine { color: #800000;}

class - określanie stylu dla pewnego elementu lub grupy elementów

7
6

Technologie Informacyjne

Identyfikacja i grupowanie elementów

(class i id)

CSS

<h1>Sekcja 1</h1>

...

<h2>Sekcja 1.1</h2>

...

<h2>Sekcja 1.2</h2>

...

<h1>Sekcja 2</h1>

...

<h2>Sekcja 2.1</h2>

...

<h3>Sekcja 2.1.2</h3>

...

<h1 id="c1">Sekcja 1</h1>

...

<h2 id="c1-1">Sekcja 1.1</h2>

...

<h2 id="c1-2">Sekcja 1.2</h2>

...

<h1 id="c2">Sekcja 2</h1>

...

<h2 id="c2-1">Sekcja 2.1</h2>

...

<h3 id="c2-1-2">Sekcja 2.1.2</h3>

...

#c1-2 {

color: red;

}

id - identyfikowanie jednego unikalnego elementu (każde id musi być unikalne)

7
7

Technologie Informacyjne

Grupowanie elementów (span i div)

CSS

<p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>

span.benefit { color:red; }

<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
</ul>
</div>

<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
</ul>
</div>

#democrats { background:blue; }
#republicans { background:red; }

np.

H1,H2 {font-family: verdana, helvetica; color: #112233}
H1
H2 {font-size: 20pt}

P. {font-size: 12pt; color: #778899}
P.mala {font-size: 6pt}
P.duza {font-size: 20pt}

<P class="mala">

klasa "mala"

<P class="duza">

klasa "duza"

7
8

Technologie Informacyjne

Grupowanie definicji stylów

CSS

Tworzenie klas

Dziedziczenie - przejęcie jakiegoś atrybutu od swojego nadrzędnego
znacznika.
Schemat dziedziczenia jest następujący:

- znacznikiem nadrzędnym jest HTML, któremu podlegają znaczniki HEAD
i

BODY

- znacznikowi HEAD podlega: TITLE

- znacznikowi BODY podlegają: H1, H2, H3, H4, H5, H6, P, A, UL -
podlegają LI, TABLE -
podlegają TR i TD.

np.

BODY {margin-top:0.5cm; margin-left:4cm; margin-right:2cm}
H2 {margin-left:5cm}
<BODY>
<H1>

Nagłówek H1 nie został wcześniej określony, więc dziedziczy marginesy od

znacznika

BODY.

<H2>

Nagłówek H2 również dziedziczy marginesy od swojego znacznika BODY,

ale

deklaracja w H2: margin-left:5cm anuluje margines lewy

znacznika

BODY,

pozostałe marginesy pozostają nie

zmienione.

7
9

Technologie Informacyjne

Dziedziczenie

CSS

• Piksel [px] - używana do określenia rozmiaru elementów graficznych

• Punkt [pt] - używana do określania rozmiaru czcionki i innych wartości

związanych
z długością; jest to jednostka bezwzględna, która nie jest skalowalna
względem
środowiska.

• Centymetr [cm] - używana do określania wartości związanych z

długością

• Cal [in] - podobnie jak centymetr

• Procent [%] - jednostka względna - uzależniona od rozdzielczości

• [em] - jednostka względna - zależna od rozmiaru elementu

sąsiadującego.

8
0

Technologie Informacyjne

CSS

Jednostki stosowane w

atrybutach

PHP

PHP

PHP (Hypertext Preprocessor)

- obiektowy, skryptowy język

programowania

zaprojektowany do generowania dynamicznych stron internetowych.

Rozszerzenie pliku:

.php
.php3
.php4
.phtml

8
2

Technologie Informacyjne

PHP

$imie="Mateusz";
$liczba_1=20;
$liczba_2=30.3;

Nazwa zmiennej:

Każdą zmienną w PHP zapisuje się, poprzedzając jej nazwę znakiem dolara "$". Wielkość liter w
nazwie zmiennej jest rozróżniana. Nazwy zmiennych mogą się składać z liter, cyfr i znaków
podkreślenia. Nie mogą jednak rozpoczynać się od cyfry.
np.
$imie;
$Imie;
$imie2;
$moje_imie;

Typy zmiennych:

Zmienne w PHP dzielą się na typy, np.: łańcuchy znakowe (string), liczby całkowite (integer),
liczby zmiennoprzecinkowe (double).
np.
$imie="Mateusz" - zmienna typu string
$liczba1=20 - zmienna typu integer
$liczba2=30.3 -zmienna typu double

8
3

Technologie Informacyjne

Zmienne

PHP

Przykładowy skrypt:

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" Content="tekst/html"; charset=iso-8859-2">

<TITLE>Nazywam się...</TITLE>

</HEAD>

<BODY>

$imie="Jan";

$nazwisko="Nowak";

print("Nazywam się ".$imię." ".$nazwisko);

?>

</BODY>

</HTML>

8
4

Technologie Informacyjne

Zmienne

PHP

(Po wykonaniu skryptu)

Nazywam się Jan Nowak

Przypisywanie wartości do zmiennych

np.

$imie="Mateusz";

$zmienna="To jest zmienna typu string";

$imie="Jan";

$nazwisko="Nowak";

$tekst="Nazywam się $imie $nazwisko";

$zmienna='To jest zmienna typu string';

$tekst='Nazywam się $imie $nazwisko';

$liczba=5;
$inna_liczba=26.06;

8
5

Technologie Informacyjne

Zmienne

PHP

Operatory matematyczne

+

dodawanie $a=$b+3;

-

odejmowanie $a=$b-3;

*

mnożenie $a=$b*3;

/

dzielenie $a=$b/3;

%

dzielenie modulo (zwraca liczbę całkowitą stanowiącą resztę z dzielenia)

++

inkrementacja $a++ (dodaje do zmiennej wartość 1)

--

dekrementacja $a- (odejmuje od zmiennej wartość 1)

Operatory logiczne oraz operatory porównania

<

mniejsze $a<$b

>

większe $a>$b

<=

mniejsze lub równe $a<=$b

>=

większe lub równe $a<=$b

==

równe $a==$b

!=

różne $a!=$b

&& (AND) koniunkcja (logiczne i) $a==1 && $b==2
|| (OR)

alternatywa (logiczne lub) $a==2 || $b==1

! (NOT)

negacja !$a==1 (negacja powoduje zmianę prawda na fałsz)

8
6

Technologie Informacyjne

Operatory

PHP

Operatory przypisania

=

przypisuje zmiennej zapisanej z lewej strony operatora wartość wyrażenia

umieszczonego z jego

prawej strony

+=

dodaje wartość podaną z prawej strony operatora do wartości zmiennej zapisanej z

jego lewej

strony i zapisuje ją w tej zmiennej.

-=

odejmuje wartość podaną z prawej strony operatora od wartości zmiennej zapisanej z

jego lewej

strony i zapisuje ją w tej zmiennej.

*=

mnoży wartość podaną z prawej strony operatora przez wartość zmiennej zapisanej z

jego lewej

strony i zapisuje ją w tej zmiennej.

/=

dzieli wartość podaną z prawej strony operatora przez wartość zmiennej zapisanej z

jego lewej

strony i zapisuje ją w tej zmiennej.

%=

przypisuje zmiennej zapisanej z lewej strony operatora jej wartość podzieloną modulo

przez

wartość podaną z prawej strony operatora.

.=

przypisuje zmiennej zapisanej z lewej strony operatora łańcuch znaków będący

połączeniem

łańcucha zapisanego w zmiennej z łańcuchem podanym z prawej strony

operatora.

8
7

Technologie Informacyjne

Operatory

PHP

Inne operatory

.

konkatenacja (łączenie łańcuchów znaków)

$

odwołanie do zmiennej

&

odwołanie do pamięci zajmowanej przez zmienną

->

odwołanie do metody lub właściwości klasy

=>

określa domyślną wartość argumentu lub indeks tablicy

@

powstrzymuje wyświetlanie błędów funkcji

?

trójargumentowy operator warunkowy

8
8

Technologie Informacyjne

Operatory

PHP

np.

define ("PEWNA_STAŁA", 50.6)
define ("PEWNA_STAŁA", "PHP jest OK.!")

8
9

Technologie Informacyjne

Stałe

PHP

Zmienne środowiskowe są tworzone podczas uruchamiania nowego procesora poleceń systemu
operacyjnego. Zmienne te zawierają specjalne informacje dotyczące konfiguracji serwera WWW
czy konfiguracji PHP.
np.

$SERVER_SOFTWARE - zawiera nazwę i wersję serwera WWW.
$SERVER_NAME - zawiera nazwę serwera.
$SERVER_PROTOCOL - zawiera nazwę protokołu serwera http
$SERVER_PORT - zawiera numer portu serwera.
$PATH_INFO - zawiera ścieżkę oraz nazwę uruchomionego skryptu.
$PATH_TRANSLATED - zawiera bezwzględną ścieżkę do uruchomionego skryptu.
$SCRIPT_NAME - zawiera nazwę skryptu.
$REMOTE_ADDR - zawiera IP osoby odwiedzającej stronę.
$REMOTE_HOST - zawiera nazwę hosta osoby odwiedzającej stronę.
$HTTP_REFERER - zawiera URL poprzedniej odwiedzonej strony.
$HTTP_USER_AGENT - zawiera nazwę przeglądarki oraz systemu operacyjnego, z którego
korzysta osoba oglądająca stronę. Mozilla/4.0
$HTTP_HOST - zawiera nazwę serwera.
$REQUEST_URI - zawiera nazwe skryptu.
$SERVER_ADMIN - zawiera adres e-mail administratora serwera.

9
0

Technologie Informacyjne

Zmienne środowiskowe

PHP

np. skrypt wyświetlający nazwę przeglądarki, systemu operacyjnego oraz adresu IP osoby
odwiedzającej nasza stronę:

<?
//wykorzystujemy zmienne środowiskowe $HTTP_USER_AGENT w celu uzyskania nazwy
przeglądarki oraz systemu. Za pomocą zmiennej $REMOTE_ADDR uzyskujemy adres IP, zaś
zmiennej $HTTP_REFERER adres poprzednio odwiedzonej strony.
print("Używasz przeglądarki: ". $HTTP_USER_AGENT. "<BR>");
print("Twój adres IP to: ".$REMOTE_ADDR."<BR>");
print("Przybyłeś ze strony: ".$HTTP_REFERER);
?>

9
1

Technologie Informacyjne

Zmienne środowiskowe

PHP

Instrukcja jest wykonywana jeśli warunek jest spełniony.

if (warunek) {
instrukcja
}

if (warunek_1) {
blok instrukcji 1
} elseif (warunek_2) {
blok instrukcji 2
} elseif (warunek_3) {
blok instrukcji 3
........
} else {
blok instrukcji n
}

9
2

Technologie Informacyjne

Instrukcja warunkowa if

PHP

else, elseif

np.

if ($i>0) {
print (" $i jest większa od 0");
}
elseif ($i<0) {
print ("$i jest większa od 0");
}
else {
print ("$i jest równe 0");
}

9
3

Technologie Informacyjne

Instrukcja warunkowa if

PHP

Instrukcja switch zwana jest także instrukcją wyboru. Pozwala uzależnić wykonywany kod
od wartości wyrażenia. Jeżeli żadna wartość całkowita nie będzie odpowiadać wartości
wyrażenia, zostanie wykonana instrukcja znajdująca się po słowie kluczowym default.
Użycie break jest opcjonalne, jeśli nie występuje program przechodzi do instrukcji po
następnym case.

switch (wyrazenie) {
case wartosc1:
dzialanie1;
break;
case wartosc2:
dzialanie2;
break;
….
default: dzialanie;
}

9
4

Technologie Informacyjne

Instrukcja switch

PHP

np.

<?
$dzien=date("l");

switch ($dzien) {
case "Monday":
print ("Dzisiaj jest poniedziałek");
break;
case "Tuesday" :
print ("Dzisiaj jest wtorek");
break;
case "Wednesday" :
print ("Dzisiaj jest środa");
break;
case "Thursday" :
print ("Dzisiaj jest czwartek");
break;
case "Friday" :
print ("Dzisiaj jest piątek");
break;
case "Saturday" :
print ("Dzisiaj jest sobota");
break;
default: print ("Dzisiaj jest
niedziela");
}
?>

9
5

Technologie Informacyjne

Instrukcja switch

PHP

Pętla polega na wielokrotnym wykonywaniu bloku instrukcji.

for (inicjalizacja; warunek_pętli; zwiększanie_licznika) {
blok instrukcji
}

Np.

<?
for($i=1; $i<=50; $i++) {
print("$i ");
}
?>

9
6

Technologie Informacyjne

Pętla for

PHP

Instrukcja while jest wykonywana tak długo jak długo spełniony jest
warunek.
Warunek jest sprawdzany po raz pierwszy przed wejściem do pętli i
jeśli nie jest spełniony, pętla w ogóle nie jest wykonywana.

while (warunek) {
blok instrukcji
}

Np.
<?
$i=1;
while ($i<=50) {
print("$i ");
$i++;
}
?>

9
7

Technologie Informacyjne

Instrukcja while

PHP

Najpierw wykonywana jest instrukcja, a dopiero potem sprawdzany jest
warunek. Pętla jest wykonywana przynajmniej raz.

do{
blok instrukcji
}
while (warunek)

9
8

Technologie Informacyjne

Instrukcja do... while

PHP

- tablice indeksowane liczbowo
- tablice indeksowane asocjacyjnie (łańcuchami)

$tab[0] = 5;
$tab = array(3,51,54,654);

$tab['indeks słowny'] = 3;

Funkcje używane przy programowaniu na tablicach liczbowych.
list() - do zapisu w zmiennych zapisanych po przecinku poszczególnych elementów tablicy.

list($el1,$el2) = $tab;

count() - zwraca ilość elementów tablicy. Należy jednak zauważyć, że ostatni element
tablicy będzie miał indeks count($tablica)-1, a nie count($tablica), ponieważ tablicę w PHP
zaczynają się od 0.
$tab[0] = "element 1";
$tab[1] = "element 2";
$tab[2] = "element 3";
echo count($tab);

explode() - do dzielenia łańcucha na tablicę według określonych znaków (np. spacji).

Pierwszym argumentem funkcji jest separator, który oddziela poszczególne elementy

tablicy, a drugim sam łańcuch.

$lan = "To#jest#tekst#który#zostanie#podzielony#według#separatorów";

$tab = explode("#",$lan);

echo $tab[0]." ".$tab[4]." ".$tab[7];

implode() - funkcją odwrotną do powyższej, tj. zamieniającej tablicę na łańcuch

oddzielając poszczególne elementy separatorami jest

9
9

Technologie Informacyjne

Zmienne tablicowe

PHP

JavaScript

JavaScript (JS) – obiektowy skryptowy język programowania, wspomagający tworzenie
stron www. Skrypty służą przede wszystkim do zapewnienia interaktywności poprzez
reagowanie na zdarzenia, sprawdzania poprawności formularzy lub budowania elementów
nawigacyjnych. W języku JavaScript można także pisać pełnoprawne aplikacje.

Program napisany w języku skryptowym nie musi być poddany procesowi kompilacji. Wykonywaniem
poleceń zajmuje się program zawierający interpreter komend. Dla JS jest nim przeglądarka internetowa.

1
0
1

Technologie Informacyjne

JS

Kod JavaScript musi być umieszczony pomiędzy znacznikami HTML <SCRIPT>
i </SCRIPT>. Znaczniki te można umieszczać w dowolnym miejscu dokumentu, jednak
przyjmuje się, że jeżeli jest to tylko możliwe, należy umieścić je na początku pliku HTML
przed znacznikiem <BODY>.
Znacznik ten powinien zawierać parametr LANGUAGE z wartością JavaScript.

Np.

<HTML>
<HEAD>
</HEAD>
<SCRIPT language = "JavaScript">
</SCRIPT>
<BODY>
</BODY>
</HTML>

1
0
2

Technologie Informacyjne

<SCRIPT>

JS

Instrukcja document.write() pozwala na wyprowadzenie tekstu na ekran przeglądarki.

Np.

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</HEAD>
<SCRIPT language = "JavaScript">
document.write ("znowu wykład")
</SCRIPT>
<BODY>
</BODY>
</HTML>

1
0
3

Technologie Informacyjne

document.write()

JS

document to obiekt, który reprezentuje aktualną stronę
write to tzw. metoda, czyli pewna funkcja działająca na obiekcie

Np.

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</HEAD>
<SCRIPT LANGUAGE = "JavaScript">
<!-- Ukrycie przed przeglądarkami nieobsługującymi JavaScriptu
alert("To jest okno dialogowe");
// Koniec kodu JavaScript -->
</SCRIPT>
<BODY>
</BODY>
</HTML>

1
0
4

Technologie Informacyjne

Okno dialogowe

JS

var nazwa_zmiennej

np.

var imie="Janek" // zmienna typu string
var wiek=20 // zmienna typu integer
document.write("Nasz gość ma na imie "+imie+".")
document.write(imie+" ma "+wiek+" lat")

10
5

Technologie Informacyjne

Zmienne

JS

JavaScript posiada cztery typy danych: liczby, łańcuchy tekstowe, wartości logiczne oraz specjalny typ null.

• Liczby oznaczają wszystkie liczby zmiennoprzecinkowe i całkowite. Nie ma podziału na rzeczywiste,
integer, itd..

• Każdy tekst można nazwać łańcuchem. Odróżnienie tekstu od liczby jest związane z zastosowaniem
znaku ””.

• NaN (Not a Number) wartość, która może wskazywać, że dana zmienna nie jest liczbą. Metodą na
określenie, czy zmienna jest liczbą, jest funkcja logiczna isNan(zmienna)

• Typ null reprezentuje wartość pustą (nie mylić z 0 ani łańcuchem pustym ””. Jest wykorzystywany lub
zwracany przez funkcję najczęściej w przypadku nie znalezienia jakiegoś elementu.

• nazwy zmiennych powinny zaczynać się od litery lub znaku_. Wielkość liter ma znaczenie.

W przeciwieństwie do większości języków programowania, nie musimy wprowadzać deklaracji na początku
programu. Definiowanie zmiennych może odbywać się bezpośrednio przed jej użyciem w programie.

var tablica = new Array ();

np.

var tablica = new Array (); - definicja obiektu
tablica[0]=„Rok”; - zapisywanie danych

10
6

Technologie Informacyjne

Tablice

JS

Tablice są zbiorem zmiennych połączonych wspólną nazwą. Odróżnianie poszczególnych elementów tablicy
odbywa się za pomocą indeksu. Tablicę można tworzyć przy pomocy konstruktora new oraz metody Array().
W ten sposób powstaje schemat tablicy o niezdefiniowanej długości. Ponieważ tablica jest obiektem można
ominąć new, ale zaleca się jego stosowanie.
Numerowanie elementów zaczyna się od 0.

Operatory arytmetyczne

107

Technologie Informacyjne

Operatory

JS

Ostatnie dwa operatory są obustronne. Jeżeli zapiszemy je po lewej stronie zmiennej – zmienna zostanie
powiększona lub zmniejszona przed wykonaniem instrukcji przypisania, jeśli z prawej – po wykonaniu się
instrukcji.
s=5;

s=6

s=5;

s=6

t=++s;

t=6

t=s++;

t=5

Operatorem jest znak lub sekwencja znaków zmieniająca wartość zmiennej.

Operatory przypisania

1
0
8

Technologie Informacyjne

Operatory

JS

Operatory porównania

1
0
9

Technologie Informacyjne

Operatory

JS

Operatory logiczne

1
1
0

Technologie Informacyjne

Operatory

JS

1
1
1

Technologie Informacyjne

Instrukcja warunkowa if

JS

Instrukcja jest wykonywana jeśli warunek jest spełniony.

if (warunek) {
instrukcja
}

if (warunek_1) {
blok instrukcji 1
}
else {
blok instrukcji n
}

Instrukcja warunkowa if…else

1
1
2

Technologie Informacyjne

Instrukcja warunkowa if

JS

np.

wiek=prompt("W jakim jestes wieku?")
if (wiek>18) {
document.write("Jestes pelnoletni, więc możesz wejsc dalej.")
document.write("<br><a href=\"adult.html\">Wejście dla dorosłych</a>")
}

wiek=prompt("W jakim jestes wieku")
if (wiek>18) {
document.write("Jestes pelnoletni")
}
else {
alert("Źle!!!")
document.write("Nie mozesz tu wejsc")
}

Instrukcja warunkowa if…else

Instrukcja switch zwana jest także instrukcją wyboru. Pozwala uzależnić wykonywany kod
od wartości wyrażenia. Jeżeli żadna wartość całkowita nie będzie odpowiadać wartości
wyrażenia, zostanie wykonana instrukcja znajdująca się po słowie kluczowym default.
Użycie break jest opcjonalne, jeśli nie występuje program przechodzi do instrukcji po
następnym case.

switch (wyrazenie) {
case wartosc1:
dzialanie1;
break;
case wartosc2:
dzialanie2;
break;
….
default: dzialanie;
}

1
1
3

Technologie Informacyjne

Instrukcja switch

JS

np.

var dzis=new Date() // tworzony jest obiekt z datą

dzien=dzis.getDay() // wiemy jaki jest dzien na podstawie
daty

switch (dzien)

{

case 5:

document.write("wreszcie piątek");

break;

case 0:

document.write("śpiąca niedziela");

break;

default:

document.write("kiedy wreszcie będzie weekend?!");

}

Instrukcja w pętli while jest wykonywana przez cały czas, gdy warunek jest spełniony

while (warunek) {
instrukcja
}

1
1
4

Technologie Informacyjne

Pętla while

JS

np.

litera="a"

while(litera!="z") {

document.write(litera)

kodLitery=litera.charCodeAt() // pobierany jest kod ASCII
litery

kodLitery++ // zwiększamy kod o 1

litera=String.fromCharCode(kodLitery) // tworzymy litere z
kodu ASCII

}

Pętla musi być wykonana co najmniej 1 raz: nawet, gdy warunek nie będzie spełniony. Jest
to związane z tym, że warunek jest sprawdzany na końcu:

do {
instrukcja
} while (warunek)

Pętla for może być wykorzystana do wykonania pewnych instrukcji określoną ilość razy.

for(inicjalizacja_zmiennej; warunek; zmiana_zmiennej) {
instrukcje
}

1
1
5

Technologie Informacyjne

Pętla do while

JS

Pętla for

onMouseOver

Zdarzenie jest wywoływane jednorazowo, gdy najedziemy na obiekt posiadający obsługę
tego zdarzenia. Zdarzenie jest aktywne do momentu opuszczenia obszaru.

np.
<a href=„http://www.onet.pl/” onMouseOver=„window.status=‘to jest onet’; return true”>
onet</a>

onMouseOut

Zdarzenie jest wywoływane jednorazowo, gdy opuszczamy kursorem obiekt posiadający
obsługę tego zdarzenia. Zdarzenie jest aktywne do momentu umieszczenia kursora na
jakimś obszarze.

np.
<a href=”http://www.onet.pl/” onMouseOver=”window.status=‘to jest onet’; return true;”
onMouseOut= =”window.status=‘ ’; return true”

> onet</a>

1
1
6

Technologie Informacyjne

Zdarzenia

JS

1
1
7

Technologie Informacyjne

Zdarzenia

JavaScript – część II

Procedury onLoad onUnload zostają wykonane odpowiednio, po załadowaniu strony do
przeglądarki i po opuszczeniu strony. Możemy je zastosować np. do powitania, lub
pożegnania użytkownika.

np.

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</HEAD>
<BODY onUnload = "alert ('Odwiedz mnie jeszcze kiedys!')">
</BODY>
</HTML>

1
1
9

Technologie Informacyjne

Zdarzenia onLoad i onUnload

JS

np.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<SCRIPT LANGUAGE = JavaScript>
function powitanie (imie){
alert ("Czesc! Witamy na naszej stronie " + ((imie=="brak")?"":imie) + "!");
}
function podaj_imie (){
imie = prompt ("Podaj nam swoje imię", "");
if (imie == null || imie == ""){
imie = "brak";
document.write ("Miło, że jestes z nami!<BR>");
}
else{
document.write ("Miło, że jestes z nami " + imie + "!<BR>");
}
return imie;
}
</SCRIPT>
</HEAD>
<BODY onLoad = "powitanie(imie)">
<SCRIPT LANGUAGE = JavaScript>
var imie = podaj_imie();
</SCRIPT>
<BODY>
</HTML>

1
2
0

Technologie Informacyjne

Zdarzenia onLoad i onUnload

JS

np.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<H2><CENTER>
<P onMouseOver = "alert('Najechałes mysza na tekst
Hellllloooooooooo!')">Hellllloooooooooo!</P>
</H2></CENTER>
</BODY>
</HTML>

np.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</HEAD>
<BODY>
<A HREF="#"
onClick="window.close()";>
Zamknij okno</A>
</BODY>
</HTML>

1
2
1

Technologie Informacyjne

Zdarzenia onMouseOver i onClick

JS

nazwa

- nazwa formularza

TARGET

- podaje nazwę okna, w którym ma się pojawić odpowiedź.

ACTION

- podaje lokalizację serwera, do którego mają zostać wysłane dane zebrane z

formularza.

METHOD

- podaje sposób wysłania informacji do serwera,

ENCTYPE

- podaje sposób kodowania MIME.

MIME, czyli Multipurpose Internet Mail Extension - Wielozadaniowe rozszerzenie poczty w

Internecie, jest

standardem pozwalającym przesyłać w sieci Internet wszelkie dane (teksty,

grafikę, zdjęcia, dźwięki,

muzykę, programy) za pomocą standardowych narzędzi, takich jak

poczta, newsy czy WWW.

1
2
2

Technologie Informacyjne

Formularze

JS

<FORM NAME = ”nazwa” TARGET = ”okno” ACTION = ”url” METHOD = ”metoda” ENCTYPE = ”typ kodowania”>
</FORM>

np.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<SCRIPT LANGUAGE = "JavaScript">
function przetwarzaj_dane (formularz){
if (formularz.imie.value == "")
alert ("Może jednak podasz swoje imię?");
else
alert ("Czesc " + formularz.imie.value + "! Co slychac?");
}
</SCRIPT>
</HEAD>
<BODY>
<H2>
<FORM NAME = "formularz1">
Tu wpisz swoje imię:
<BR>
<INPUT TYPE = "text" NAME = "imie" >
<BR><BR>
<INPUT TYPE = "button" VALUE = "Kliknij tutaj" onClick = "przetwarzaj_dane(this.form)">
</H2>
</BODY>
</HTML>

1
2
3

Technologie Informacyjne

Formularze

JS

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<SCRIPT LANGUAGE = JavaScript>
function przetwarzaj_dane (){
var brakuje_danych = false;
var formularz = document.forms[0];
var napis = "";
if (formularz.imie.value == ""){
napis += "imie\n"
brakuje_danych = true;
}
if (formularz.nazwisko.value == ""){
napis += "nazwisko\n"
brakuje_danych = true;
}
if (formularz.tel.value == ""){
napis += "telefon\n"
brakuje_danych = true;
}
if (!brakuje_danych)
formularz.submit();
else
alert ("Nie wypełniłes następujacych pól:\n" + napis);
}
</SCRIPT>
</HEAD>

1
2
4

Technologie Informacyjne

Formularze

JS

<BODY>
<H2>
<FORM NAME = "formularz1">
Proszę podać swoje dane:
<FONT SIZE = "-1"><I><BR>
(Pola oznaczone * musza zostać wypełnione)
</FONT></I><BR><BR>
<TABLE>
<TR><TD><B>
Dane personalne:</B>
</TD><TD></TD></TR>
<TR><TD>
imię:</TD><TD>
<input type = "text" name = "imie">*</TD></TR>
<TR><TD>
nazwisko:</TD><TD>
<input type = "text" name = "nazwisko">*</TD></TR>
<TR><TD><B>
Adres:</B></TD><TD>
</TD>
<TR><TD>
ulica:</TD><TD>
<input type = "text" name = "ulica"></TD></TR>
<TR><TD>
nr domu:</TD><TD>
<input type = "text" name = "nrdomu"></TD></TR>

1
2
5

Technologie Informacyjne

Formularze

JS

<TR><TD>
miasto:</TD><TD>
<input type = "text" name = "miasto"></TD></TR>
<TR><TD>
tel.:</TD><TD>
<input type = "text" name = "tel">*</TD></TR>
<TR><TD>
</TD><TD ALIGN = "right">
</H2>
<input type = "button" name = "wyslij" value = " Wyslij! " onClick = "przetwarzaj_dane()">
</TD></TR>
</TABLE>
</BODY>
</HTML>

1
2
6

Technologie Informacyjne

Formularze

JS

Elementami formularza mogą być następujące obiekty:

button

- przycisk

checkbox

- pole wyboru

hidden

- element ukryty

password

- pole do wpisywania haseł

radio

- pole wyboru

reset

- przycisk reset

select

- lista wyboru

submit

- przycisk submit

text

- pole tekstowe

textarea

- rozszerzone pole tekstowe

127

Technologie Informacyjne

Elementy formularzy

JS

<INPUT TYPE = ”button” NAME = ”nazwa przycisku” VALUE = ”wartość na przycisku” [onClick = ”obsługa
zdarzenia”]>

np.

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<SCRIPT LANGUAGE = "JavaScript">
function przetwarzaj_dane (){
alert ("Dzięki, bardzo to lubię! :)");
}
</SCRIPT>
</HEAD>
<BODY>
<BR><BR>
<FORM NAME = "formularz1">
<INPUT TYPE = "button"
NAME = "przycisk1"
VALUE = " Kliknij mnie "
onClick = "przetwarzaj_dane()">
</FORM>
</BODY>
</HTML>

12
8

Technologie Informacyjne

JS

Elementy button

<INPUT TYPE = ”checkbox” NAME = ”nazwa pola” VALUE = ”wartość” [CHECKED] [onClick = ”obsługa
zdarzenia]>

np.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<SCRIPT LANGUAGE = "JavaScript">
function imie_przetwarzaj_duze (formularz1){
if (formularz1.imie_duze.checked){
formularz1.imie.value = formularz1.imie.value.toUpperCase();
if (formularz1.imie_male.checked){
formularz1.imie_male.click();
}
}
}
function imie_przetwarzaj_male (formularz1){
if (formularz1.imie_male.checked){
formularz1.imie.value = formularz1.imie.value.toLowerCase();
if (formularz1.imie_duze.checked){
formularz1.imie_duze.click();
}
}
}
</SCRIPT>
</HEAD>

1
2
9

Technologie Informacyjne

JS

Element checkbox

cd.

<BODY>
<BR>
<BR>
<FORM NAME = "formularz1">
<B> imię: </B>
<INPUT TYPE = "text"
NAME = "imie"
SIZE = "15">
<INPUT TYPE = "checkbox"
NAME = "imie_duze"
onClick = "imie_przetwarzaj_duze(formularz1)"> duże litery
<INPUT TYPE = "checkbox"
NAME = "imie_male"
onClick = "imie_przetwarzaj_male(formularz1)"> małe litery
</FORM>
</BODY>
</HTML>

1
3
0

Technologie Informacyjne

JS

Element checkbox

Jest to obiekt niewidoczny w dokumencie HTML. Stosowany do przechowywania wprowadzonych
przez użytkownika wartości.

<INPUT TYPE="hidden” NAME="nazwa obiektu” [VALUE="wartość"]>

Wyzerowanie formularza - przypisanie wszystkim polom ich wartości domyślnych.

<INPUT TYPE = "reset” NAME = "nazwa” VALUE = "tekst” [onClick = "obsługa zdarzenia"]>

1
3
1

Technologie Informacyjne

JS

Element hidden

Element reset

Element select tworzy listę wyboru w formularzu.

<SELECT NAME = "nazwa” [SIZE = "wielkość"] [MULTIPLE] [onBlur = "procedura obsługi"]
[onChange = "procedura obsługi "] [onFocus = " procedura obsługi "]>
<OPTION VALUE = "wartość" [SELECTED]> tekst [ ... <OPTION> tekst]
</SELECT>

wielkość

- liczba pozycji na liście, które mają być wyświetlane.

SIZE

= „wielkość” - liczbę widocznych elementów listy.

OnBlur, onChange i onFocus

- procedury obsługi zdarzeń odpowiednio, gdy obiekt traci focus, gdy

zostanie wybrana nowa pozycja z listy oraz gdy obiekt otrzymuje focus.

<OPTION>

- wartości na liście wyboru.

Parametr

VALUE

znacznika

OPTION

podaje wartość, jaka zostanie zwrócona do serwera po

wybraniu danej opcji i wysłaniu formularza.

SELECTED

- dana pozycja na liście opcji ma być domyślnie zaznaczona.

MULTIPLE

- przewijana lista wielokrotnego wyboru.

1
3
2

Technologie Informacyjne

JS

Element select

Element select tworzy listę wyboru w formularzu.

<SELECT NAME = "nazwa” [SIZE = "wielkość"] [MULTIPLE] [onBlur = "procedura obsługi"]
[onChange = "procedura obsługi "] [onFocus = " procedura obsługi "]>
<OPTION VALUE = "wartość" [SELECTED]> tekst [ ... <OPTION> tekst]
</SELECT>

wielkość

- liczba pozycji na liście, które mają być wyświetlane.

SIZE

= „wielkość” - liczbę widocznych elementów listy.

OnBlur, onChange i onFocus

- procedury obsługi zdarzeń odpowiednio, gdy obiekt traci focus, gdy

zostanie wybrana nowa pozycja z listy oraz gdy obiekt otrzymuje focus.

<OPTION>

- wartości na liście wyboru.

Parametr

VALUE

znacznika

OPTION

podaje wartość, jaka zostanie zwrócona do serwera po

wybraniu danej opcji i wysłaniu formularza.

SELECTED

- dana pozycja na liście opcji ma być domyślnie zaznaczona.

MULTIPLE

- przewijana lista wielokrotnego wyboru.

1
3
3

Technologie Informacyjne

JS

Element select

np.

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

<SCRIPT LANGUAGE = JavaScript>

function obsluga_zdarzenia (obj){

alert ("wybrales opcje numer " + (obj.selectedIndex + 1));

}

</SCRIPT>

</HEAD>

<BODY>

<BR>

<FORM NAME = "lista">

<SELECT NAME = "songs"

SIZE = "5"

MULTIPLE

onChange = "obsluga_zdarzenia(this)">

<option> We are the champions

<option> Show must go on

<option> Barcelona

<option> One year of love

<option> Innuendo

</select>

</FORM>

</BODY>

</HTML>

1
3
4

Technologie Informacyjne

JS

Element select

Element ten służy do wprowadzania przez użytkownika krótkiego ciągu znaków.

<INPUT TYPE = ”tekst” NAME = ”nazwa obiektu” VALUE = ”tekst” SIZE = liczba
[onBlur = ”procedura obsługi”]
[onChange = ”procedura obsługi”]
[onFocus = ”procedura obsługi”]
[onSelect = ”procedura obsługi”]
>

VALUE - wartość początkowa, czyli tekst, który ukaże się domyślnie w oknie tekstowym.
SIZE - wielkość okna tekstowego.
OnSelect - procedura obsługi zdarzenia polegającego na zaznaczeniu fragmentu tekstu.

1
3
5

Technologie Informacyjne

JS

Element text

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

<SCRIPT LANGUAGE = JavaScript>

function obsluga_zdarzenia (obj){

if (isNaN (obj.value)){

alert ("To nie jest liczba");

obj.focus();

obj.select();

}

}

</SCRIPT>

</HEAD>

<BODY>

<BR>

<BR>

<H2>

Podaj liczbę w pierwszym oknie:

<FORM NAME = "przyklad 69a">

<INPUT TYPE = "text"

NAME = "okno_tekstowe"

VALUE = ""

onChange = "obsluga_zdarzenia(this)"

>

<INPUT TYPE = "text">

</FORM>

</H2>

</BODY>

</HTML>

1
3
6

Technologie Informacyjne

JS

Element text

Element ten służy do wprowadzania przez użytkownika dłuższego tekstu.

<TEXTAREA
NAME = ”nazwa obiektu”
ROWS = ”liczba rzędów”
COLS = ”liczba kolumn”
[onBlur = ”obsługa zdarzenia”]
[onChange = ”obsługa zdarzenia”]
[onFocus = ”obsługa zdarzenia”]
[onSelect = ”obsługa zdarzenia”]>
tekst
</TEXTAREA>

1
3
7

Technologie Informacyjne

JS

Element textarea

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso-8859-2">
<script type="text/javascript" language="JavaScript">

function changeBgColor (color, id) {

document.bgColor = color;
makeSelectProperties (id);
return 0;

}
function makeSelect (id) {

values = new Array ("#FF0000", "#FFFF00", "#008000", "#000000", "#FFFFFF");
texts = new Array ("Czerwony", "Żółty", "Zielony", "Czarny", "Biały");

output = "<select id='" + id + "' style='background-color:

#f0f0f0;' onChange='changeBgColor

(this.options[this.selectedIndex].value, this.id);'>";

for (i = 0; texts[i]; i++)

output += "<option value='" + values[i] + "' style='color: " + values[i] +

";'>" + texts[i] + "</option>";

output += "</select>";
write (output);
makeSelectProperties (id);
return 0;

}

13
8

Technologie Informacyjne

JS

Zmiana koloru tła strony przez

użytkownika

function makeSelectProperties (id) {

x = document.getElementById (id);
for (i = 0; x.options[i]; i++)

if (x.options[i].value == document.bgColor) {

x.selectedIndex = i;
break;

}

x.style.color = x.options[x.selectedIndex].value;
return 0;

}
function write (text) {

if(document.getElementById)

document.getElementById("place").innerHTML= text;

else if(document.all)

document.all.place.innerHTML=text;

else if(document.layers) {

document.layers.place.document.open();

document.layers.place.document.write(text);

document.layers.place.document.close();

}

}

</script>
</head>
<body bgcolor="#000000" onLoad="makeSelect ('colorSelect');">
<div id="place"></div>
</body>
</html>

139

Technologie Informacyjne

JS

Zmiana koloru tła strony przez

użytkownika

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
div.menu
{
position: absolute;
height: auto;
width: 100px;
background-color: Teal;
padding: 10px 10px 10px 10px;
}
div.submenu
{
position: absolute;
width: 100px;
left: 90px;
visibility:hidden;
background-color:Teal;
padding: 10px 10px 10px 10px;
}
</style>

14
0

Technologie Informacyjne

JS

Menu

<script type="text/javascript">
<!--
function Pokaz(nazwa)
{
document.getElementById(nazwa).style.visibility = 'visible';
}
function Ukryj(nazwa)
{
document.getElementById(nazwa).style.visibility = 'hidden';
}
//-->
</script>

</head>
<body>
<div id="menu" class="menu">
<hr />
<div onmouseover="Pokaz('SubMenu1')" onmouseout="Ukryj('SubMenu1')">
<div id="SubMenu1" class="submenu">
<hr />
<a href="http://www.onet.pl">Onet</a>
<hr />
<a href="http://republika.onet.pl">Republika</a>
<hr />
</div>

14
1

Technologie Informacyjne

JS

Menu

<p>
Strony</p>
</div>
<div onmouseover="Pokaz('SubMenu2')" onmouseout="Ukryj('SubMenu2')">
<div id="SubMenu2" class="submenu">
<hr />
<a href="http://poczta.onet.pl">Poczta</a>
<hr />
<a href="http://czat.onet.pl">Czat</a>
<hr />
</div>
<p>
Serwisy</p>
</div>
<hr />
</div>
<br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

14
2

Technologie Informacyjne

JS

Menu

XML

XML

(Extensible

Markup

Language)

-

język

przeznaczony

do

reprezentowania różnych danych w ustrukturalizowany sposób.
XML pozwala tworzyć własne znaczniki tworząc nowe języki. Dzięki temu XML
jest nadzbiorem innych języków znacznikowych, takich jak HTML.

14
4

Technologie Informacyjne

XML

index.xml

<?xml version="1.0" encoding="iso-8859-2"?
>

<?xml-stylesheet type="text/css"
href="arkusz.css"?>

<agh>
<wykladowcy>Jan Kowalski</wykladowcy>
<studenci>Maciej Nowak</studenci>
</agh>

arkusz.css

agh {

font-family: Verdana, Arial
}

wykladowcy {

display: block;
font-size: 16pt;
font-weight: bold;
padding: 10px;
background-color:

#FFCC00;

}

studenci {

display: block;
font-size: 14pt;
font-weight: normal;
padding: 10px;
background-color:

#D9D9D9;

}

14
5

Technologie Informacyjne

XML

Elementy

index.xml

<?xml version="1.0" encoding="iso-8859-2"?>

<?xml-stylesheet type="text/css"
href="arkusz1.css"?>

<przyklad typ="niezwykle oryginalny"> Witaj
swiecie! </przyklad>

arkusz.css

przyklad {

display: block;
font-size: 16pt;
font-weight: bold;
padding: 10px;
background-color:

#FFCC00;

}

14
6

Technologie Informacyjne

XML

Atrybu
ty

14
7

Technologie Informacyjne

XML

SGML

(Standard Generalized Markup Language)

(standardowy ogólniony język oznaczeń) XML

(Extensible Markup Language)

(Rozszerzony język znaczników)

HTML

(HyperText Markup Language)

(Hipertekstowy język

znaczników)

Języki XML

MathML

(Mathematical Markup

Language)

(matematyczny język

znaczników)

XTML

(Extensible HyperText Markup
Language)

Języki znaczników

• Każdy dokument XML składa się z dwóch części: definicji DTD (Document Type Defintion)

oraz

schematów, z których tworzone są jego elementy i atrybuty, jak również sam dokument

• Dokument XML składa się z modułów zwanych encjami. Encje są identyfikowane poprzez

swoje nazwy

i w swojej deklaracji mogą zawierać dane albo odwołanie do tych danych poprzez adres

URL.

• XML rozróżnia wielkość liter, wszystkie elementy i atrybuty pisane są małymi literami

• Wartości atrybutów zapisuje się w cudzysłowie

• Wymagana jest obecność znaczników początku i końca

• Każdy element musi być całkowicie zamknięty w elementach nadrzędnych względem niego.

• Aplikacje XML można pisać w zwykłym notatniku

• XML Spy (

www.xmlspy.com

) – interfejs użytkownika ułatwiający rozbudowę jeżyków i

dokumentów XML

14
8

Technologie Informacyjne

XML

Ogólne
zasady

Dodatkowe
informacje

np.

• MathML (Mathematical Markup Language) – matematyczny język znaczników służący

do opisywania wzorów i symboli matematycznych. MathML jest na coraz szerszą skalę

wykorzystywany do prezentacji wzorów w Internecie na stronach WWW. Znaczniki

MathML można umieścić zarówno w osobnym dokumencie (z rozszerzeniem .mml), jak i

włączyć do dokumentu XML.

• NewsML – język znaczników wiadomości

• CML – chemiczny język znaczników

• XAML – język znaczników do upoważnień transakcji

14
9

Technologie Informacyjne

XML

Aplikacje
XML

Prolog (opcjonalny) znajduje się na samym początku dokumentu XML. Rekomendacja W3C
zaleca włączenie przynajmniej deklaracji XML, w której podana jest stosowana wersja XML.
Prolog zawiera deklarację XML, komentarze, instrukcje przetwarzania, białe znaki i deklarację
typu dokumentu.

15
0

Technologie Informacyjne

XML

Prolog

<?xml version="1.0" encoding="iso-8859-2" standalone="yes"?>

<?xml-stylesheet type="text.css" href="greeting.css"?>

<!DOCTYPE DOKUMENT [

<!ELEMENT DOKUMENT (KLIENT)*>

<!ELEMENT KLIENT (IMIĘNAZWISKO,DATA,ZAMÓWIENIA)>

<!ELEMENT IMIĘNAZWISKO (NAZWISKO,IMIĘ)>

<!ELEMENT NAZWISKO (#PCDATA)>

<!ELEMENT IMIĘ (#PCDATA)>

<!ELEMENT DATA (#PCDATA)>

<!ELEMENT ZAMÓWIENIA (POZYCJA)*>

<!ELEMENT POZYCJA (PRODUKT,ILOŚĆ,CENA)>

<!ELEMENT PRODUKT (#PCDATA)>

<!ELEMENT ILOŚĆ (#PCDATA)>

<!ELEMENT CENA (#PCDATA)>

]>

<DOKUMENT>

<KLIENT>

<IMIĘNAZWISKO>

<NAZWISKO>Smith</NAZWISKO>

<IMIĘ>Sam</IMIĘ>

</IMIĘNAZWISKO>

.

• version - używana wersja XML.
Jeśli podaje się deklarację XML,
atrybut ten jest obowiązkowy.

• encoding - sposób kodowania
znaków w dokumencie. Można
użyć np. Unicode, UCS 2 lub UCS
4 oraz wielu innych zestawów
znaków,

przede

wszystkim

zestawów ISO. Atrybut ten jest
opcjonalny.

• standalone - jeśli ma wartość
yes, dokument nie odwołuje się
do

encji

zewnętrznych,

w

przeciwnym wypadku ma wartość
no. Jest to atrybut opcjonalny.

Komentarze mogą pojawiać się w dowolnym miejscu dokumentu, byle na zewnątrz wszystkich
znaczników.
Komentarze nie mogą pojawić się przed deklaracją XML. W komentarzach nie można używać
zestawu znaków -- .

15
1

Technologie Informacyjne

XML

Komentarz

<?xml version="1.0" encoding="iso-8859-2"?>

<DOKUMENT>

<POZDROWIENIA>

Witaj w XML

</POZDROWIENIA>

<!--

<KOMUNIKAT>

Witaj w pokręconym świecie XML.

</KOMUNIKAT>

-->

</DOKUMENT>

.

Instrukcje dla procesora XML zaczynają się od <? i kończą ?>. Nie wolno stosować
zarezerwowanych nazw instrukcji <?xml?> ani ich kombinacji w postaci dużych liter.

15
2

Technologie Informacyjne

XML

Instrukcje
przetwarzania

<?xml version="1.0" encoding="iso-8859-2"?>

<?xml-stylesheet type="text/css" href="greeting.css"?>

<DOKUMENT>

<POZDROWIENIA>

Witaj w XML

</POZDROWIENIA>

<KOMUNIKAT>

Witaj w pokręconym świecie XML.

</KOMUNIKAT>

</DOKUMENT>

.

Instrukcją przetwarzania jest np. <?xml-
stylesheet?> łącząca dokument XML z arkuszem
stylów

Nazwy elementów

muszą zaczynać się od litery, podkreślenia lub dwukropka. Dalej mogą się

znajdować litery, cyfry, podkreślenia, kreski (myślniki), kropki i średniki, nie mogą natomiast pojawić
się żadne białe znaki.

Elementy puste

takie jak np.<IMG>, <LI>, <HR> i <BR>, mają jeden tylko znacznik, nie mają

zwykłych znaczników początkowego i końcowego. Znacznik takiego elementu można od razu
zakończyć nie >, lecz />.

Poprawnie sformułowany dokument XML musi zawierać jeden element, który będzie zawierał
wszystkie inne elementy – jest to

element główny

.

np.
<?xml version="1.0" encoding="iso-8859-2" standalone="yes"?>
<DOKUMENT>
<KLIENT>
<IMIĘNAZWISKO>
<NAZWISKO>Nowak</NAZWISKO>
<IMIĘ>Jan</IMIĘ>
</IMIĘNAZWISKO>
</KLIENT>
</DOKUMENT>

15
3

Technologie Informacyjne

XML

Znaczniki i elementy

Atrybuty - są to podobnie jak w HTML, pary nazw i wartości umożliwiające wstawianie dodatkowych
informacji w znacznikach początkowym i elementu pustego. Aby przypisać atrybutowi wartość,
używa się znaku równości.

15
4

Technologie Informacyjne

XML

Atrybut
y

np.

<?xml version="1.0" encoding="iso-8859-2" standalone="yes"?>

<DOKUMENT>

<KLIENT STATUS=„Kredytobiorca">

<IMIĘNAZWISKO>

<NAZWISKO>Smith</NAZWISKO>

<IMIĘ>Sam</IMIĘ>

</IMIĘNAZWISKO>

</KLIENT>

</DOKUMENT>

<KLIENT>

<IMIĘNAZWISKO>

<NAZWISKO>Nowak</NAZWISKO>

<IMIĘ>Jan</IMIĘ>

</IMIĘNAZWISKO>

<ZAMÓWIENIA>

<POZYCJA>

<PRODUKT>Pomidory</PRODUKT>

<ILOŚĆ>8</ILOŚĆ>

</POZYCJA>

</ZAMÓWIENIA>

</KLIENT>

Każdemu elementowi KLIENT dodajemy atrybut
STATUS, w którym opisujemy klienta jako
kredytobiorcę

<KLIENT NAZWISKO=„Nowak" IMIĘ=„Jan"

ZAKUP="Pomidory„ ILOŚĆ="8"/>

Elementy

czy

atrybuty?

Nazwy atrybutów

muszą zaczynać się od litery, podkreślenia lub dwukropka. Dalej mogą się

znajdować litery, cyfry, podkreślenia, kreski (myślniki), kropki i średniki, nie mogą natomiast pojawić
się żadne białe znaki.

Wartości atrybutów

Znaczniki zawsze są tekstem, więc i wartości atrybutów są tekstem. Nawet

jeśli atrybutowi przypiszesz liczbę, liczba ta będzie traktowana jako napis, który należy podawać w
cudzysłowie.

np.
<koło środek_x="10.0" środek_y="20.0" promień="10.0"/>

np.
<cytat tekst='"Hello"-powiedział'/>

15
5

Technologie Informacyjne

XML

Atrybut
y

Sekcje

CDATA

zawierają znaki, które mają nie być przetwarzane przez procesor XML. Jest to

wygodna metoda wstawiania do XML danych, w których jest dużo znaków takich, jak < (początek
znacznika) i & (początek encji). Użycie takiej sekcji informuje procesor, że zawarty w niej tekst ma
bez zmian przekazać aplikacji, dla której dane XML są przeznaczone.
Sekcję CDATA zaczyna się pisząc

<![CDATA

natomiast kończy

]]>

. W treści takiej sekcji nie mogą

pojawić się znaki ]]>, zatem nie można też sekcji CDATA zagnieżdżać w sobie nawzajem.

np.
<?xml version="1.0" encoding="iso-8859-2" standalone="yes"?>
<DOKUMENT>
<ZNACZNIKI>
<![CDATA
<KLIENT>
<IMIĘNAZWISKO>
<NAZWISKO>Smith</NAZWISKO>
<IMIĘ>Sam</IMIĘ>
</IMIĘNAZWISKO>
</KLIENT>
]]>
</ZNACZNIKI>
</DOKUMENT>

15
6

Technologie Informacyjne

XML

Sekcje
CDATA