dr inż. Robert Banasiak

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

2. O mnie dr inż. Robert Banasiak @: robert.banasiak@p.lodz.pl WWW: http://rbanasi.kis.p.lodz.pl

3. Organizacja zajęć • 7 - ćwiczeń – 7 wykładów • Narzędzia + materiały do zajęć • Instrukcja papierowa + elektroniczna • Projekt końcowy – prosty serwis WWW • Praca dyplomowa (~4 osoby/grupę  ) • Temat NIE MUSI BYĆ ZWIĄZANY Z PROJEKTOWANIEM STRON WWW

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 (canvas, multimedia, svg, inne), elementy nawigacji; obiekty Flash i inne obiekty multimedialne; Systemy CMS zarządzania treścią stron WWW na przykładzie systemu Joomla 3.2! Szablon dla Joomla! 3.2 Pozycjonowanie stron WWW – wstęp teoretyczny + rady praktyczne

5. Literatura Internetowe kursy języka HTML – jest ich mnóstwo! http://www.kurshtml.edu.pl/ http://www.poradnik-webmastera.com/kursy/html/ http://channel9.msdn.com/Series/Darmowy-kurs-HTML5 http://www.youtube.com/watch?v=GjLA95vRmI4 i wiele innych …. Książki (przykładowe) :

6. Historia, ewolucja i architektura systemu informacyjnego Web WorldWide 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 TimothegoBernersa-Lee. (http://pl.wikipedia.org/wiki/Tim_Berners-Lee)

7. 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 Jak działa system Web ?? Sieć komputerowa - Internet Komputer PC z przeglądarką stron WWW Serwer WWW

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

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

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

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

14. Metody tworzenia stron WWW: technika WYSIWYG WYSIWYG (ang. WhatYouSeeIsWhatYou 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.

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

16. 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” 

17. Adobe Dreamweaver CS4 PL - Wprowadzenie Adobe Dreamweaver CS4 PLNa Żywo 

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

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

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

21. Język HTML – osnowa dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> (HTML5 -> <!DOCTYPE html>)<html><head><title>tytuł strony</title> <meta http-equiv="content-type„content= "text/html;charset=iso-8859-2"></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.

22. Język HTML – osnowa dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> (HTML5 -> <!DOCTYPE html>)<html><head><title>tytuł strony</title> <meta http-equiv="content-type„content= "text/html;charset=iso-8859-2"></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.

23. Język HTML – osnowa dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> (HTML5 -> <!DOCTYPE html>)<html><head><title>tytuł strony</title> <meta http-equiv="content-type„content= "text/html;charset=iso-8859-2"></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.

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

25. Język (X)HTML – co to takiego? • (X)HTML(4/5) (ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) – podstawowy i nadal obowiązują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 < >.

26. Język (X)HTML - ewolucja • lipiec, 1993:HypertextMarkupLanguage, szkic opublikowany przez IETF; • listopad, 1995: Standard HTML 3.0 został przedstawiony IETF przez Dave'aRaggeta 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-2014:HTML 5, opublikowany przez W3C jako szkic ("Working Draft„)

27. 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 – wciąż obowiązujący standard. • Przyszłość/teraźniejszość: HTML 5 (2011-2014, najnowszy: Candidate Recommendation, 6 Sierpnia 2013); http://www.w3.org/TR/html5/ • 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