1 / 27

dr inż. Robert Banasiak

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne , 2014, semestr II, dr inż. Robert Banasiak. dr inż. Robert Banasiak.

lauren
Download Presentation

dr inż. Robert Banasiak

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related