Projektowanie i ocena SI 1
Wprowadzenie do tworzenia stron,
podstawy języka (X)HTML
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
Plan zajęć

Literatura i serwisy dotyczące tworzenia stron,

Przegląd technologii projektowych,

Przegląd metod tworzenie stron WWW,

Przeglądarki internetowe.
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
Literatura dotycząca tworzenia stron WWW
'
Freeman Eric, Freeman Elizabeth, Head First HTML with
CSS & XHTML. Edycja polska (Rusz głową!), Rajca Piotr
(tł.), Gliwice, Helion, 2007, 684 s., ISBN 978-83-246-0427-2.
W. MAT. i INF. - Zb. I. INFORMATYKI 17351
'
Niederst Robbins, Jennifer, Projektowanie stron
internetowych. Przewodnik dla początkujących
webmasterów po (X)HTML, CSS i grafice, Trojan Anna
(tł.), Gliwice, Helion, 2008, 488 s., ISBN 978-83-246-1375-5.
'
Lis Marcin, Tworzenie stron WWW. Praktyczny kurs,
Gliwice, Helion, 2010, 384 s., ISBN 978-83-246-2487-4.
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
Serwisy dotycząca tworzenia stron WWW
'
Serwis algorytmy.pl
http://algorytmy.pl/
'
Kurs HTML
http://www.kurshtml.boo.pl/
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
Technologie projektowe
'
Wygląd projektowanej strony zależy w dużej mierze od użytej
technologii.
'
W projektach internetowych wykorzystywane są m.in. takie
technologie jak:

HTML i XHTML,

Arkusze styków (CSS),

Rozszerzenia przeglądarki,

Skrypty działające po stronie klienta - JavaScript,

Skrypty działające po stronie serwera - PHP.
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
HTML
'
HTML (Hypertext Markup Language)

język znaczników hipertekstowych (język opisu strony),

jest językiem służącym do tworzenia stron WWW,

składa się on ze znaczników nadającym znaczenie
elementom tekstowym co pozwala np. sformatować akapit,
zmienić krój lub wielość fontu, wstawić odesłanie do innej
strony itp.

początki języka HTML - lata dziewięćdziesiąte; pierwsza
standaryzacja (HTML 2.0 w 1995 r.); najnowsza oficjalna
wersja to HTML 4.01 z 1999 r.; w styczniu 2008 r.
opublikowano roboczą wersję HTML 5.0 (nadal w trakcie
uzgodnień),

spowolnienie rozwoju języka HTML (koniec lat 90-tych)
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
nastąpiło na skutek wprowadzenia nowego języka XML.
XML, XHTML
'
XML (ang. Extensible Markup Language)

rozszerzalny język znaczników,

powstał z myślą o rozwijaniu Internetu w kierunku
standaryzacji i zgodności z innymi systemami (wyświetlanie tej
samej treści w inny sposób np. syntezatory mowy, telefony
komórkowe itp.).
'
XHTML (ang. Extensible Hypertext Markup Language)

rozszerzalny język znaczników hipertekstowych,

powstał na początku 2000 r. (XHTML 1.0), obecnie wersja 1.1,

stanowił adaptację HTML 4.01 do standardu XML.
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
HTML i XHTML
'
Wszystkie podstawowe struktury strony WWW można tak
zapisać, aby były zgodne zarówno z językiem HTML, jak i
XHTML.
'
Język HTML5 będzie w całości zgodny z XHTML.
'
Zarówno HTML, jak i XHTML:

umożliwiają utworzenie stron internetowych - każda strona
WWW używa języka HTML (lub XHTML) aby poinformować
przeglądarkę internetową co zawiera i jak zawartość
powinna zostać wyświetlona,

definiują strukturę strony WWW.
'
Na pierwszy rzut oka oba języki nie różnią się od siebie
(XHTML jest bardziej drobiazgowy i stosuje nieco inne
deklaracje).
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
Kaskadowe arkusze styków (CSS)
'
Czym są?

działają równolegle do języka HTML i XHTML,

służą do definiowania wyglądu strony (HTML i XHTML
definiują jej strukturę).
'
Do czego służą?

do określania wyglądu strony,

do definiowania układu strony.
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
Kaskadowe arkusze styków (CSS)
'
Dlaczego są popularne?

stosując arkusze stylów można tworzyć strony zgodne ze
standardami internetowymi,

oddzielają treść od formy  pozwalają tworzyć strony solidne
pod względem struktury i jednocześnie atrakcyjne wizualnie,

strony stworzone przy użyciu arkuszy stylów pobierane są
szybciej niż strony wykorzystujące formatowanie w HTML,

strony wykonane przy użyciu CSS są bardziej dostępne dla
osób niewidomych,

powodują, że dużo szybciej dokonuje się zmian wyglądu
wybranych elementów strony.
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
Kaskadowe arkusze styków (CSS)
'
Dlaczego nie są lubiane?

nie są obsługiwane przez starsze przeglądarki,

są odmiennie interpretowane przez rożne przeglądarki
(poprawne działanie może być pracochłonne),

wymaga odejścia od silnie zakorzenionych przyzwyczajeń
np. formatowania strony za pomocą tabel.
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
Metody tworzenie stron WWW
'
Strony internetowe mogą być tworzone za pomocą:

edytorów tekstowych,

edytorów HTML,

gotowych szablonów stron.
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
Wykorzystanie edytora tekstowego
'
Zasada działania

Posługując się zwykłam edytorem tekstowym (np. windowsowy
Notatnik, Notepad++) można utworzyć stronę internetową złożoną
z własnoręcznie wprowadzonych znaczników (X)HTML.
'
Zalety

Wpływ na wygląd  możliwość precyzyjnego definiowania
każdego elementu,

Możliwość nauki  pozwala dokładnie poznać zasadę działania
serwisów WWW,

Koszt  brak konieczności kupowania, a nawet instalowania
dodatkowego oprogramowania,
'
Wady

Konieczność poświęcenia dużej ilości czasu,
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin

Większe prawdopodobieństwo popełnienia błędu.
Notepad++
'
Stanowi doskonały zamiennik
dla Notatnika. Oferuje on m.in.
kolorowanie składni (X)HTML
(oraz innych języków)
zwiększając czytelność kodu,
numerowanie wierszy oraz
zapis danych w standardzie
UTF-8.
'
Umożliwia konwertowanie stron
zapisanych w Notatniku
(standard Windows-1250) na
standard UTF-8  menu
Format, Konwertuj na format
UTF-8 bez BOM.
'
Notepad++ 5.9.3 PL można
bezpłatnie pobrać w serwisie
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
www.dobreprogramy.pl
Wykorzystanie edytora HTML
'
Zasada działania

Edytor HTML jest specjalną aplikacją wspomagającą proces
tworzenia strony np. przez automatyczne wstawianie
znaczników, autouzupełnianie kodu, weryfikację
poprawności strony,

Część z tych programów (np. Macromedia Dreamweaver,
Microsoft FrontPage, NVU) umożliwia tworzenie stron w
trybie graficznym. W tych programach wygląd strony
definiowany jest przez odpowiednie rozmieszczenie tekstu i
grafiki, a program samodzielnie generuje odpowiedni dla
danego projektu kod HTML, który dalej można edytować.
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
Wykorzystanie edytora HTML
'
Zalety

Wpływ na wygląd  twórca strony ma pełny wpływ na wygląd
serwisu,

Wydajność  możliwość tworzeni szablonów, które mogą
być wielokrotnie wykorzystywane. Eliminacja konieczności
żmudnego wprowadzania danych,

Poprawność kodu  pozwala uniknąć błędów oraz pomaga
przy wyszukiwaniu pomyłek.
'
Wady

Konieczność poświęcenia czasu na poznanie szczegółów
budowy serwisów internetowych.
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
NVU
'
Stanowi bezpłatną alternatywę
dla Microsoft FrontPage i Adobe
Dreamweaver. Może pracować
w graficznym trybie WYSIWYG
(To Co Widzisz Jest Tym Co
Otrzymasz),
'
Umożliwia generowanie
wysokiej jakości kodu HTML,
obsługę XHTML, wbudowany
edytor CSS, posiada
menedżera witryn (z
wbudowanym klientem FTP),
'
NVU 1.0 PL można bezpłatnie
pobrać w serwisie
www.dobreprogramy.pl
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
Wykorzystanie szablonów
'
Zasada działania
'

Szybkość  najszybszy sposób na utworzenie strony.
Niektóre rozwiązania łączą w sobie możliwość
utworzenia serwisu i umieszczenia go na serwerze,

Koszt  brak konieczności kupowania dodatkowego
oprogramowania oraz konieczności nauki HTML,

A
atwość użycia  najprostszy sposób tworzenia stron
internetowych
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin
Wykorzystanie szablonów
'
Wady

Brak wpływu na sposób prezentacji i działania.

Zazwyczaj są płatne (opłaty miesięczne za utrzymanie
serwisu).
Konspekt z laboratorium przedmiotu  Projektowanie i ocena SI IINiB UJ 2011/2012 - autor: Tomasz Rusin