Projektowanie Stron WWW

Prezentacja na temat: "Projektowanie Stron WWW"— Zapis prezentacji:

1 Projektowanie Stron WWW
Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2013/2014, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW dr inż. Robert Banasiak Projektowanie stron WWW 1. Historia, ewolucja i architektura systemu informacyjnego Web.; 2. Oprogramowanie narzędziowe; 3. ADOBE DREAMWEAVER CS4 PL; 4. WPROWADZENIE DO językA HTML. Czas prezentacji: minut

2 O mnie dr inż. Robert Banasiak @: WWW:

3 Narzędzia + materiały do zajęć Instrukcja papierowa czy elektroniczna?
Organizacja zajęć 7 ćwiczeń – 7 wykładów Narzędzia + materiały do zajęć Instrukcja papierowa czy elektroniczna? Projekt końcowy Praca dyplomowa (2 osoby)

4 Plan pracy na zajęciach z Projektowania stron WWW
Historia, ewolucja i architektura systemu informacyjnego Web; Oprogramowanie narzędziowe; Wprowadzenie do języka HTML; Praca z tekstem i elementy graficzne; Kaskadowe arkusze stylów CSS: budowa i modyfikacja; Własna kompozycja strony WWW. Budowanie makiety strony WWW przy użyciu CSS; Budowanie interaktywnych stron WWW: wprowadzenie do HTML5, elementy nawigacji; obiekty Flash i inne obiekty multimedialne; Systemy CMS zarządzania treścią stron WWW na przykładzie systemu Joomla! Pozycjonowanie stron WWW – wstęp teoretyczny

5 Internetowe kursy języka HTML – jest ich mnóstwo!
Literatura Internetowe kursy języka HTML – jest ich mnóstwo! Książki (przykładowe) :

6 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 ) w Genewie przy silnym współudziale Sir Timothego Bernersa-Lee. (

7 Zawartość strony internetowej jest hipertekstem … Co to znaczy ???
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 odkrycia techniki druku przez Gutenberga.

8 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 specjalne znaczniki opisujące stronę WWW 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.

9 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, 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 specjalnego protokołu sieciowego HTTP. To z serwerem WWW łączy się przeglądarka internetowa, by załadować wskazaną przez użytkownika stronę WWW.

10 Sieć komputerowa - Internet z przeglądarką stron WWW
Historia, ewolucja i architektura systemu informacyjnego Web Jak działa system Web ?? Sieć komputerowa - Internet Komputer PC z przeglądarką stron WWW Serwer WWW

11  Co jest potrzebne, żeby zbudować stronę WWW ?
Oprogramowanie narzędziowe do tworzenia stron WWW Co jest potrzebne, żeby zbudować stronę WWW ? dowolny edytor tekstu + chęci + dobry pomysł . 

12 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.

13 Mała refleksja … Fora dyskusyjne piętnowały niegdyś zaawansowane edytory WYSIWYG lansując pracę w Notatniku ;) Ale… prawdziwy Webmaster to Ten, kto tworzy poprawny kod, a nie Ten, kto używa najprostszych narzędzi.

14 Edytory stron WWW można podzielić na dwie podstawowe klasy:
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).

15 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 elektronicznej bądź papierowej identyczny lub bardzo zbliżony do obrazu na ekranie.

16 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  - służące do tworzenia stron internetowych w językach HTML4/5 i XHTML.

17 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 Od dobrego edytora HTML należy oczekiwać takich cech, jak: Sprawdzanie poprawności pisowni Edycja informacji nagłówkowych. Edytor HTML powinien wspomagać tworzenie informacji nagłówkowych (META), istotnych dla poprawnego funkcjonowania witryny w Internecie, jak tytuł, opis, słowa kluczowe i szereg innych informacji o pomniejszym znaczeniu; szczególnie przydatne są do tego celu kreatory META. Projekty. Zaawansowany edytor HTML powinien mieć narzędzie do organizowania zespołu stron tworzących wspólnie witrynę internetową w tzw. projekty, które ułatwiają zarządzanie, np. wprowadzanie wspólnych opisów, kontrola spójności, weryfikacja odsyłaczy czy wysyłanie na serwer FTP. Szablony. Edytor powinien dysponować narzędziem do tworzenia szablonów stron, które przyspieszają pisanie stron i ujednolicają wygląd dokumentów. Biblioteki wstawek. Użytkownik niejednokrotnie posługuje się powtarzającymi się zestawami kodów - możliwość tworzenia bibliotek takich zestawów pozwoli wprowadzać je do dokumentów, bez konieczności każdorazowego wpisywania kodu. Obsługa języków. W nowoczesnym edytorze HTML pożądana jest nie tylko obsługa samego języka HTML, ale i przynajmniej elementarna obsługa innych popularnych języków, jak JavaScript i PHP, a przede wszystkim CSS, czyli współdziałających z kodem HTML kaskadowych arkuszy stylów. Kolorowanie kodu. Aby móc łatwo odróżniać znaczniki od treści dokumentu, konieczne jest kolorowanie znaczników danego języka. Wprowadzanie znaków specjalnych. Konieczność wprowadzania znaków spoza alfabetu łacińskiego (np. znaki matematyczne, znaki innych alfabetów) wymaga od edytora udostępnienia ich listy. Mapowanie odsyłaczy. Używana na stronach internetowych grafika jest często wykorzystywana jako zbiór odsyłaczy. Umieszczenie odsyłaczy internetowych w wyznaczonych miejscach grafiki wymaga stosowania specjalnej mapy odsyłaczy, której skomplikowana konstrukcja jest kłopotliwa do wprowadzenia, jeśli nie korzystamy z wizualnego wspomagania zapewnionego przez edytor. Podgląd dokumentu. Kontrolę rzeczywistego wyglądu strony zapewnia podgląd dokumentu w specjalnym oknie, obsługiwanym przez kontrolki Internet Explorera lub Mozilli. Jeśli edytor nie dysponują taką funkcją, konieczne jest wczytanie redagowanej strony do przeglądarki internetowej. Kontrola poprawności składniowej. Zdarzające się niekiedy błędy składniowe, wkradające się szczególnie przy ręcznych poprawkach, mogą poważnie zaburzać wyświetlanie stron - wbudowane narzędzia do kontroli poprawności składniowej umożliwiają wychwycenie usterek. Kontrola spójności. Błędy konstrukcyjne mogą także dotyczyć powiązań między dokumentami witryny - kontrola spójności powiązań jest jednym z kluczowych zadań zaawansowanego edytora HTML. Weryfikacja odsyłaczy. Zamieszczone w dokumencie odsyłacze do innych miejsc w Internecie mogą się stopniowo dezaktualizować - specjalne narzędzia edytora pozwalają automatycznie sprawdzić poprawność odsyłaczy i wskazują te, które są nieaktualne. Wysyłanie na serwer FTP. Chociaż witrynę można wysłać na serwer za pomocą zwykłego programu FTP, wbudowane narzędzia FTP pozwalają wysłać na serwer cały projekt lub pojedyncze strony, a niekiedy także są w stanie śledzić, które strony zostały zaktualizowane w trakcie edycji i wymagają wysłania.

18 Bogata paleta narzędzi (profesjonaliści i okazjonalni użytkownicy);
Adobe Dreamweaver CSx.x PL – Dlaczego??? Bogata paleta narzędzi (profesjonaliści i okazjonalni użytkownicy); Budowanie struktury strony zarówno poprzez klikanie myszą jak i pisanie kodu; Klasyczny interfejs WYSIWYG - budowanie poprzez dodawanie i modyfikację komponentów serwisu oraz kaskadowych arkuszy styli CSS (ang. Cascading Style Sheets); łatwy do opanowania dla „nieinformatyków” 

19 Adobe Dreamweaver CS4 PL Na Żywo 
Adobe Dreamweaver CS4 PL - Wprowadzenie Adobe Dreamweaver CS4 PL Na Żywo 

20 Adobe Dreamweaver CS4 PL – Okno aplikacji

21 Adobe Dreamweaver CS4 PL – tryb kodu HTML

22 Adobe Dreamweaver CS4 PL – tryb WYSIWYG

23 Adobe Dreamweaver CS4 PL – tryb mieszany

24 Adobe Dreamweaver CS4 PL – Pomoc Online

25 Adobe Dreamweaver CS4 PL – Pomoc Offline

26 Adobe Dreamweaver CC – Wersja próbna!
Wymagany identyfikator Adobe ID

27 Adobe Dreamweaver CS4 PL – Menu Plik

28 Adobe Dreamweaver CS4 PL – Menu Edycja

29 Adobe Dreamweaver CS4 PL – Menu Widok

30 Adobe Dreamweaver CS4 PL – Menu Wstaw

31 Adobe Dreamweaver CS4 PL – Menu Modyfikuj

32 Adobe Dreamweaver CS4 PL – Menu Format

33 Adobe Dreamweaver CS4 PL – Menu Polecenia

34 Adobe Dreamweaver CS4 PL – Menu Serwis

35 Adobe Dreamweaver CS4 PL – Menu Okno

36 Adobe Dreamweaver CS4 PL – Menu Pomoc

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

38 Język (X)HTML – co to takiego?
(X)HTML(4/5) (ang. HyperText Markup Language, pol. hipertekstowy język znaczników) – podstawowy 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 < >.

39 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ń : HTML 5, opublikowany przez W3C jako szkic ("Working Draft„) lipiec 2009: porzucenie prac nad rozwojem XHTML

40 Teraźniejszość Język HTML od wersji 4.01 nie jest już dalej rozwijany – miał zastąpić go w 2000 r. XHTML, obecnie w wersji 2.0 Dziś: HTML 5 ( , najnowszy: Candidate Recommendation, 6 Sierpnia 2013); Zgodnie z ostatnimi zapowiedziami prace nad specyfikacją zostaną ukończone w 2014 roku - wtedy też nowy standard zostanie oficjalnie ogłoszony i zacznie obowiązywać. Dwa lata później - w 2016 roku - ma być gotowy HTML5.1; wówczas ma być także zaprezentowany szkic standardu HTML5.2 Raport "Popularność HTML5 wśród firm Fortune 500" opublikowany w sierpniu 2013 roku wskazuje, że 153 koncerny z listy Fortune 500 stosują na swoich stronach HTML5

41 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

42 Język HTML – Prolog Podstawa badania poprawności składniowej <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>tytuł strony</title> <meta http-equiv="content-type„content= "text/html;charset=iso "> </head> <body> właściwa treść (ciało) dokumentu </body> </html>

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

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

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

46 Język HTML – kompletna osnowa dokumentu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>tytuł strony</title> <meta http-equiv="content-type„content= "text/html;charset=iso "> </head> <body> właściwa treść (ciało) dokumentu </body> </html>

47 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

48 Dokument HTML – standardy kodowania
W dokumentach powinniśmy stosować przede wszystkim standard kodowania polskich liter ISO ; 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> <meta http-equiv="content-type" content="text/html; charset=iso "> </head>