Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Dr inż. Robert Banasiak 1 Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2013/2014, semestr II, dr inż. Robert Banasiak Projektowanie.

Podobne prezentacje


Prezentacja na temat: "Dr inż. Robert Banasiak 1 Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2013/2014, semestr II, dr inż. Robert Banasiak Projektowanie."— Zapis prezentacji:

1 dr inż. Robert Banasiak 1 Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2013/2014, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW

2 O mnie dr inż. Robert WWW: 2

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

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

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

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

7 Zawartość strony internetowej jest hipertekstem … Co to znaczy ??? Historia, ewolucja i architektura systemu informacyjnego Web 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. 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. 7

8 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. Historia, ewolucja i architektura systemu informacyjnego Web 8

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

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

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

12 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ę. Oprogramowanie narzędziowe do tworzenia stron WWW 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. 12

13 Mała refleksja … 13 Fora dyskusyjne piętnowały niegdyś zaawansowane edytory WYSIWYG lansując pracę w Notatniku ;)

14 Edytory stron WWW można podzielić na dwie podstawowe klasy: edytory pracujące w trybie tekstowym; edytory pracujące w trybie graficznym (WYSIWYG). Oprogramowanie narzędziowe do tworzenia stron WWW 14

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

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

17 14 cech dobrego edytora HTML: 1. Sprawdzanie poprawności pisowni 2. Edycja informacji nagłówkowych 3. Projekty 4. Szablony CSS 5. Biblioteki wstawek 6. Obsługa języków 7. Kolorowanie kodu 8. Wprowadzanie znaków specjalnych 9. Mapowanie odsyłaczy 10. Podgląd dokumentu 11. Kontrola poprawności składniowej 12. Kontrola spójności 13. Weryfikacja odsyłaczy 14. Wysyłanie na serwer FTP Oprogramowanie narzędziowe do tworzenia stron WWW 17

18 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 18

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

20 Adobe Dreamweaver CS4 PL – Okno aplikacji 20

21 Adobe Dreamweaver CS4 PL – tryb kodu HTML 21

22 Adobe Dreamweaver CS4 PL – tryb WYSIWYG 22

23 Adobe Dreamweaver CS4 PL – tryb mieszany 23

24 Adobe Dreamweaver CS4 PL – Pomoc Online 24

25 Adobe Dreamweaver CS4 PL – Pomoc Offline 25

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

27 Adobe Dreamweaver CS4 PL – Menu Plik 27

28 Adobe Dreamweaver CS4 PL – Menu Edycja 28

29 Adobe Dreamweaver CS4 PL – Menu Widok 29

30 Adobe Dreamweaver CS4 PL – Menu Wstaw 30

31 Adobe Dreamweaver CS4 PL – Menu Modyfikuj 31

32 Adobe Dreamweaver CS4 PL – Menu Format 32

33 Adobe Dreamweaver CS4 PL – Menu Polecenia 33

34 Adobe Dreamweaver CS4 PL – Menu Serwis 34

35 Adobe Dreamweaver CS4 PL – Menu Okno 35

36 Adobe Dreamweaver CS4 PL – Menu Pomoc 36

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

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

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 39

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 HTML 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: 1.Cały dokument powinien być objęty parą znaczników ; 2.Między nimi powinna znaleźć się para znaczników, która stanowi ramy dla informacji nagłówkowych; 3.Pozostałe informacje (główna zawartość naszej strony WWW) powinny być objęte znacznikami. Choć często spotyka się w Internecie dokumenty nie zawierające wszystkich poleceń, zdecydowanie należy unikać takiej sytuacji

42 Język HTML – Prolog tytuł strony właściwa treść (ciało) dokumentu tytuł strony właściwa treść (ciało) dokumentu Podstawa badania poprawności składniowej

43 Język HTML – osnowa dokumentu tytuł strony właściwa treść (ciało) dokumentu tytuł strony właściwa treść (ciało) dokumentu 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 tytuł strony właściwa treść (ciało) dokumentu tytuł strony właściwa treść (ciało) dokumentu Znacznik ten jest umieszczany wewnątrz znaczników 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 tytuł strony właściwa treść (ciało) dokumentu tytuł strony właściwa treść (ciało) dokumentu Jest to znacznik umieszczany wewnątrz znaczników, za znacznikami. Zawiera konkretną treść dokumentu.

46 Język HTML – kompletna osnowa dokumentu tytuł strony właściwa treść (ciało) dokumentu tytuł strony właściwa treść (ciało) dokumentu

47 Język HTML – informacje nagłówkowe 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

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ć: 48


Pobierz ppt "Dr inż. Robert Banasiak 1 Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2013/2014, semestr II, dr inż. Robert Banasiak Projektowanie."

Podobne prezentacje


Reklamy Google