Docstoc

Historia_ ewolucja i architektura systemu informacyjnego Web; Oprogramowanie narzędziowe

Document Sample
Historia_ ewolucja i architektura systemu informacyjnego Web; Oprogramowanie narzędziowe Powered By Docstoc
					dr inż. Robert Banasiak




                          1
O mnie …

dr inż. Robert Banasiak
@: rbanasi@kis.p.lodz.pl
WWW: http://rbanasi.kis.p.lodz.pl




                                    2
Plan pracy na zajęciach z Projektowania stron WWW

• Historia, ewolucja i architektura systemu
  informacyjnego Web; Oprogramowanie
  narzędziowe;
• Praca z tekstem i elementy graficzne;
• Kaskadowe arkusze stylów: budowa i modyfikacja;
• Własna kompozycja strony WWW. Budowanie
  makiety strony WWW przy użyciu CSS;
• Budowanie interaktywnych stron WWW: elementy
  nawigacji; obiekty Flash i inne obiekty
  multimedialne;
• Systemy CMS zarządzania treścią stron WWW na
  przykładzie systemu Joomla!
• Pozycjonowanie stron WWW
                                                    3
Literatura


 • Internetowe kursy języka HTML – jest ich mnóstwo!
 http://webmaster.helion.pl/kurshtml/beginner/beginner.htm
 http://szablony.freeware.info.pl/kurs.html
 http://szablony.freeware.info.pl/css.html
 http://www.kurshtml.boo.pl/


 2. Książki (przykładowe) :




                                                             4
Historia, ewolucja i architektura systemu informacyjnego Web


 World Wide Web (ang. ogólnoświatowa pajęczyna) (w
 skrócie określany jako WWW lub Web) – hipertekstowy,
 multimedialny , sieciowy (TCP/IP) system informacyjny
 oparty na publicznie dostępnych, otwartych standardach
 organizacji IETF i W3C.

 World Wide Web (WWW) powstała 21 lat temu w
 laboratoriach w Europejskiego Ośrodka Badań
 Jądrowych CERN (tam gdzie Wielki Zderzacz Hadronów
 J) w Genewie przy silnym współudziale Sir Timothego
 Bernersa-Lee . (http://pl.wikipedia.org/wiki/Tim_Berners-Lee)

                                                                 5
Historia, ewolucja i architektura systemu informacyjnego Web


Zawartość strony internetowej jest hipertekstem …
Co to znaczy ???


   To znaczy, że użytkownik oglądając stronę internetową może
   podążać za hiperłączami, które przenoszą go do innych stron
 internetowych w ramach tego samego serwera WWW lub innych
          serwerów WWW dostępnych w ramach sieci.

      Powstanie World Wide Web porównuje się często do
                      wynalazku druku.



                                                                 6
Historia, ewolucja i architektura systemu informacyjnego Web


• Aby uzyskać dostęp do tak sformułowanej informacji, trzeba
posłużyć się programem komputerowym, który nazywamy
przeglądarką internetową ; Przeglądarka jest wyspecjalizowanym
programem, który interpretuje znaczniki HTML (i inne) i
"przetwarza" je na właściwą postać graficzną.

• Przeglądarka łączy się z serwerem internetowym (WWW) , skąd
pobiera pewien zbiór informacji określany jako strona internetowa;

• Strona internetowa może zostać wyświetlona, przeczytana przez
program czytający, zapisana w lokalnym systemie plików bądź
wydrukowana.


                                                                  7
Historia, ewolucja i architektura systemu informacyjnego Web

Przeglądarka internetowa – program komputerowy, służący do
pobierania i wyświetlania zawartości dokumentów z serwerów
internetowych (WWW), a także odtwarzania plików
multimedialnych (czasem za pomocą różnych dodatkowych
wtyczek).

Serwer internetowy – urządzenie komputerowe podłączone do
sieci Internet (Intranet) realizujące specjalizowane usługi
sieciowe uruchomione na tymże sprzęcie, np. serwery: WWW,
SMTP, DNS, FTP, Routing i wiele innych.

Serwer WWW - program działający na serwerze internetowym,
obsługujący żądania protokołu HTTP . To z serwerem WWW
łączy się przeglądarka internetowa, by załadować wskazaną
przez użytkownika stronę WWW.
                                                               8
Historia, ewolucja i architektura systemu informacyjnego Web

Jak działa system Web ??




    Komputer PC                   Sieć                 Serwer
   z przeglądarką            komputerowa -             WWW
     stron WWW                  Internet

                                                                9
Oprogramowanie narzędziowe do tworzenia stron WWW


   Co jest potrzebne, żeby zbudować stronę WWW ?




       dowolny edytor tekstu + chęci + dobry pomysł   J.




                          J                                10
Oprogramowanie narzędziowe do tworzenia stron WWW

 • Dokument hipertekstowy strony WWW jest plikiem tekstowym, gdzie
 wpisujemy wszystkie polecenia, dotyczące formatowania tekstu, wstawiania
 grafiki, tworzenia tabel i inne.

 • Pisanie strony w zwykłym edytorze tekstu, jest zazwyczaj bardzo uciążliwe.

 • Powstało wiele wyspecjalizowanych edytorów, które ułatwią, przyspieszą i
 uprzyjemnią naszą pracę.



  Niekiedy spotyka się twierdzenie, że używanie edytorów HTML
     nie jest konieczne. Wyspecjalizowany program tego typu
  umożliwia jednak: szybsze wprowadzanie znaczników dzięki
     gotowym szablonom i unikanie błędów wynikających z
               ręcznego wprowadzania znaczników.

                                                                                11
Mała refleksja …


  Fora dyskusyjne piętnują zaawansowane
     edytory WYSIWYG lansując pracę w
                Notatniku ;)




                                          12
Oprogramowanie narzędziowe do tworzenia stron WWW



 Edytory stron WWW można podzielić na dwie
 podstawowe klasy:

 Ø edytory pracujące w trybie tekstowym;

 Ø edytory pracujące w trybie graficznym
 (WYSIWYG ).



                                                    13
Metody tworzenia stron WWW: technika WYSIWYG




  WYSIWYG (ang. What You See Is What You Get
   co znaczy dosłownie: To Co Widzisz Jest Tym
     Co Otrzymasz ) - to akronim stosowany w
      informatyce dla określenia metod, które
  pozwalają uzyskać wynik publikacji identyczny
     lub bardzo zbliżony do obrazu na ekranie.




                                                  14
Metody tworzenia stron WWW: technika WYSIWYG

Programy spełniające założenia WYSIWYG prezentują na monitorze
komputera dane (tekstowe, graficzne) w sposób jak najbardziej zbliżony do
uzyskanego po ich wydrukowaniu lub przeniesieniu do postaci fizycznej, np.
publikacja w Internecie.

Wśród programów WYSIWYG można wyróżnić:
Ø procesory tekstu - służące do pisania i formatowania tekstu;
Ø edytory grafiki - pozwalające tworzyć i przekształcać grafkę wektorową lub
rastrową;
Ø programy inżynierskie CAD;
Ø programy DTP do składu tekstu;

oraz naturalnie….. edytory stron WWW J - służące do tworzenia stron
internetowych w językach HTML i XHTML.




                                                                               15
Oprogramowanie narzędziowe do tworzenia stron WWW

14 cech dobrego edytora HTML:
• Sprawdzanie poprawności pisowni
• Edycja informacji nagłówkowych
• Projekty
• Szablony CSS
• Biblioteki wstawek
• Obsługa języków
• Kolorowanie kodu
• Wprowadzanie znaków specjalnych
• Mapowanie odsyłaczy
• Podgląd dokumentu
• Kontrola poprawności składniowej
• Kontrola spójności
• Weryfikacja odsyłaczy
• Wysyłanie na serwer FTP
                                                    16
Oprogramowanie narzędziowe do tworzenia stron WWW

Wykaz dobrych edytorów stron WWW:

Pajączek NxG (€) (T)
CoreEditor (€) (T)
edHTML (T)
Extra Page (T)
ezHTML (T)
HateML Pro (T)
HomeSite (€) (T)
CoffeeCup HTML Editor (€) (T)
Kicia (WYSIWYG )
Microsoft Frontpage (WYSIWYG ) (€)
Microsoft Office SharePoint Designer (WYSIWYG ) (€)
Adobe Dreamweaver CSx (WYSIWYG) (T) (€)

                                                      17
Adobe Dreamweaver CS4 PL – Dlaczego???



• Jeden z najbardziej znanych i cenionych programów służących
do realizacji projektów związanych z Internetem.

• Bogata paleta narzędzi (profesjonaliści i okazjonalni
użytkownicy)

• Budowanie struktury strony zarówno poprzez pisanie kodu
(X)HTML jaki i JavaScript,

• Klasyczny interfejs WYSIWYG - budowanie poprzez
dodawanie i modyfikację komponentów serwisu oraz
kaskadowych arkuszy styli CSS (ang. Cascading Style Sheets).

                                                                18
 Adobe Dreamweaver CS4 PL - Wprowadzenie




Adobe Dreamweaver CS4 PL
       Na Żywo J


                                           19
Adobe Dreamweaver CS4 PL – Okno aplikacji




                                            20
Adobe Dreamweaver CS4 PL – tryb kodu HTML




                                            21
Adobe Dreamweaver CS4 PL – tryb WYSIWYG




                                          22
Adobe Dreamweaver CS4 PL – tryb mieszany




                                           23
Adobe Dreamweaver CS4 PL – Pomoc Online




                                          24
Adobe Dreamweaver CS4 PL – Pomoc Offline




                                           25
Adobe Dreamweaver CS5 PL – Wersja 30 dniowa!




                                               26
Adobe Dreamweaver CS4 PL – Menu Plik




                                       27
Adobe Dreamweaver CS4 PL – Menu Edycja




                                         28
Adobe Dreamweaver CS4 PL – Menu Widok




                                        29
Adobe Dreamweaver CS4 PL – Menu Wstaw




                                        30
Adobe Dreamweaver CS4 PL – Menu Modyfikuj




                                            31
Adobe Dreamweaver CS4 PL – Menu Format




                                         32
Adobe Dreamweaver CS4 PL – Menu Polecenia




                                            33
Adobe Dreamweaver CS4 PL – Menu Serwis




                                         34
Adobe Dreamweaver CS4 PL – Menu Okno




                                       35
Adobe Dreamweaver CS4 PL – Menu Pomoc




                                        36
Adobe Dreamweaver CS4 PL – Menu Skrótów




                                          37
Język HTML – co to takiego?

 ü HTML (ang. HyperText Markup Language, pol.
 hipertekstowy język znaczników) – dominujący język
 programowania 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 .

 ü W składni języka HTML wykorzystuje się znaczniki
 opatrzone z obu stron nawiasami ostrokątnymi <        >.           38
Język (X)HTML - ewolucja

 ü lipiec, 1993: Hypertext Markup Language, szkic opublikowany
 przez IETF;
 ü listopad, 1995: Standard HTML 3.0 został przedstawiony IETF
 przez Dave'a Raggeta i W3C;
 üstyczeń 1997: HTML 3.2, opublikowany jako rekomendacja W3C;
 ü grudzień 1997: HTML 4.0, opublikowany jako rekomendacja W3C.
 Zaoferowany w trzech typach: Strict, Transitional, Frameset;
 ükwiecień 1998: HTML 4.0 z drobnymi poprawkami został powtórnie
 opublikowany bez zmiany wersji.
 ü grudzień1999: HTML 4.01, opublikowany jako rekomendacja W3C.
 ü maj 2000: HTML ISO/IEC 15445:2000 "ISO HTML", opublikowany
 na bazie HTML 4.01 Strict; Powstanie XHTML 1.0
 ü styczeń 2008: HTML 5, opublikowany przez W3C jako szkic
 ("Working Draft„)
 ü lipiec 2009 : porzucenie prac nad rozwojem XHTML

                                                                   39
Język HTML a język XHTML


 Ø Język HTML od wersji 4.01 nie jest już dalej rozwijany – miał
 zastąpić go XHTML, obecnie w wersji 2.0 -> HTML 5.0 (2011-
 2012);

 Ø Różnice między językami nie są duże, choć ważne;

 Ø Po co więc zatem powstał nowy język XHTML? ….
 HTML został znormalizowany w taki sposób, aby mógł być zgodny
 z językiem XML, który określa zasady tworzenia innych języków
 używanych w elektronicznych publikacjach. Jest też łatwy do
 przetwarzania przez różne translatory XML.




                                                                   40
Język HTML – osnowa dokumentu


Dokument HTML, aby odpowiadał przyjętemu standardowi,
powinien zawierać co najmniej trzy elementy:

•Cały dokument powinien być objęty parą znaczników <html>
</html> ;
•Między nimi powinna znaleźć się para znaczników <head>
</head> , która stanowi ramy dla informacji nagłówkowych;
•Pozostałe informacje (główna zawartość naszej strony WWW)
powinny być objęte znacznikami <body> </body> .

Choć często spotyka się w Internecie dokumenty nie zawierające
wszystkich poleceń, zdecydowanie należy unikać takiej sytuacji
Język HTML – Prolog
                                      Podstawa badania poprawności składniowej
                                      Podstawa badania poprawności składniowej


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
   <head>
    <title>tytuł strony</title>
    <title>tytuł strony</title>
    <meta http-equiv="content-type„content= "text/html;charset=iso-8859-2">
    <meta http-equiv="content-type„content= "text/html;charset=iso-8859-2">
   </head>
   <body>
        właściwa treść (ciało) dokumentu
        właściwa treść (ciało) dokumentu
   </body>
 </html>
Język HTML – osnowa dokumentu



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
   <title>tytuł strony</title>
   <title>tytuł strony</title>   Jest to otwierający i zamykający znacznik
                                 Jest to otwierający i zamykający znacznik
                                 dokumentu, a między nimi jest umieszczana
    <meta http-equiv="content-type„content= "text/html;charset=iso-8859-2">
                                 dokumentu, a między nimi jest umieszczana
    <meta http-equiv="content-type„content= "text/html;charset=iso-8859-2">
                                 cała treść. Znacznik nie jest bezpośrednio
                                 cała treść. Znacznik nie jest bezpośrednio
   </head>                       widoczny w przeglądarce.
                                 widoczny w przeglądarce.
   <body>
        właściwa treść (ciało) dokumentu
        właściwa treść (ciało) dokumentu
   </body>
</html>
Język HTML – osnowa dokumentu



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
                                 Znacznik ten jest umieszczany wewnątrz
                                 Znacznik ten jest umieszczany wewnątrz
   <head>                        znaczników <html> i sam zawiera
                                 znaczników <html> i sam zawiera
   <title>tytuł strony</title>
   <title>tytuł strony</title>   podstawowe informacje o dokumencie,
                                 podstawowe informacje o dokumencie,
                                 w pierwszym rzędzie tytuł strony.
    <meta http-equiv="content-type„content= "text/html;charset=iso-8859-2">
                                 w pierwszym rzędzie tytuł strony.
    <meta http-equiv="content-type„content= "text/html;charset=iso-8859-2">
   </head>                       W ramach tego znacznika jest
                                 W ramach tego znacznika jest
                                 umieszczana tzw. część nagłówkowa.
                                 umieszczana tzw. część nagłówkowa.
   <body>
        właściwa treść (ciało) dokumentu
        właściwa treść (ciało) dokumentu
   </body>
</html>
Język HTML – osnowa dokumentu



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
   <title>tytuł strony</title>
   <title>tytuł strony</title>
                                      Jest "text/html;charset=iso-8859-2">
   <meta http-equiv="content-type„content= to znacznik umieszczany wewnątrz
                                      Jest "text/html;charset=iso-8859-2">
   <meta http-equiv="content-type„content= to znacznik umieszczany wewnątrz
   </head>                         znaczników <html>, za znacznikami
                                   znaczników <html>, za znacznikami
                                   <head>. Zawiera konkretną treść
                                   <head>. Zawiera konkretną treść
   <body>                          dokumentu.
                                   dokumentu.
       właściwa treść (ciało) dokumentu
       właściwa treść (ciało) dokumentu
   </body>
</html>
Język HTML – kompletna osnowa dokumentu



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
   <title>tytuł strony</title>
   <title>tytuł strony</title>
   <meta http-equiv="content-type„content= "text/html;charset=iso-8859-2">
   <meta http-equiv="content-type„content= "text/html;charset=iso-8859-2">
   </head>
   <body>
       właściwa treść (ciało) dokumentu
       właściwa treść (ciało) dokumentu
   </body>
</html>
Język HTML – informacje nagłówkowe <meta…>



ØOpcjonalne polecenia, które bardziej szczegółowo informują o
zawartości dokumentu, np. dla celów katalogowych czy indeksów,
wykorzystywanych przez odpowiednie programy, np. wyszukiwarki
sieciowe;

Ø Używanie ich jest zalecane (podkreślam to pogrubieniem i
czerwonym kolorem!), gdyż zdecydowanie usprawniają
funkcjonowanie witryny w sieci Internet;

Ø strona kodowa, opis strony, wyrazy kluczowe, autor strony, data
utworzenia



                                                                 47
Dokument HTML – standardy kodowania

ü W dokumentach powinniśmy stosować przede wszystkim standard
kodowania polskich liter ISO-8859-2;

ü Drugim wartym rozważenia standardem jest UTF-8 (Unicode),
jednak jest on jeszcze niezbyt często spotykany na polskich stronach;

ü Należy unikać używania innych "polskich" standardów, a szczególnie
Windows-1250, typowego jedynie dla Windows;

ü W tej chwili praktycznie wszystkie systemy operacyjne są
obsługiwane przez przeglądarki potrafiące rozpoznawać deklarację
strony kodowej, umieszczanej w ramach części nagłówkowej strony
(HEAD). Ma ona w tym wypadku następującą postać:

<head>
<head>
          <meta http-equiv="content-type" content="text/html; charset=iso-8859-
          <meta http-equiv="content-type" content="text/html; charset=iso-8859-
2">
2">
</head>
</head>                                                                           48

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:2
posted:10/8/2013
language:Unknown
pages:48