Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Zastosowania technik multimedialnych i interetowych sem. zimowy 2008.

Podobne prezentacje


Prezentacja na temat: "Zastosowania technik multimedialnych i interetowych sem. zimowy 2008."— Zapis prezentacji:

1

2 Zastosowania technik multimedialnych i interetowych sem. zimowy 2008

3 Co to jest Internet? 4 Internet to: –sieć komputerowa –ogólnoświatowa –ogólnodostępna –oparta na otwartych standardach –oparta na modelu klient/serwer –bez centralnego sterowania

4 Podstawowe pojęcia 4 WWW / Internet World Wide Web –ogół stron dostępnych w Internecie 4 strony te są oparte o HTML - HyperText Markup Language –HTML powstał w 1981 roku w CERN –prosty, odwzorowujący formatowanie tekstu 4 został wygenerowany w SGML Structuralized Markup Language 4 następcą jest XML eXtended Markup Language

5 Podstawowe pojęcia 4 Hipertekst –idea z przełomu XIX i XX w. –oznacza łączenie informacji –przykład: przypisy –przykład: linki 4 WWW –zbiór wszystkich stron połączonych linkami 4 Multimedia –wiele - mediów –łączenie tekstu, obrazu, dźwięku, filmu

6 Usługi 4 W Interniecie wszystkie usługi są dostępne w modelu klient/serwer 4 Dostępne usługi: http pop3 ftp imap telnet SSH https i wiele innych 4 Komunikację zapewnia protokół TCP/IP

7 URL 4 URL - Uniform Resource Locator –pełny adres usługi, z której chcemy skorzystać –składa się z 5 części 4 –nazwa usługi (http://) –nazwa serwera (www.zie.pg.gda.pl) nazwa domenowa - składniki TLD - Top Level Domain adres IP DNS - Domain Name Server –port (:80) –ścieżka dostępu do zasobu (/md/internet/) –nazwa zasobu (index.php)

8 Windows vs. Linux 4 Małe vs. wielkie litery 4 \ vs. / 4 ilość katalogów głównych 4 pliki wykonywalne 4 Pliki ukryte 4 spacja jako separator - zamiast niej _

9 Nazwy plików i katalogów dla Internetu 4 Bez spacji - zamiast spacji używamy podkreślenia ( _ ) 4 Bez polskich liter - zamiast polskich liter używamy odpowiedników łacińskich 4 Tylko małe litery

10 Specjalne katalogi w Unixie / 4 ~ 4 public_html =>

11 System uprawnień Linux 4 Wszyscy użytkownicy są podzieleni na rozłączne grupy x 4 Każdy obiekt ma swojego właściciela - który go utworzył 4 Właściciel ustala dla wszystkich prawa dostępu do obiektu 4 Robi to w trzech klasach: –dla siebie –dla członków swojej grupy –dla wszystkich pozostałych 4 Prawa dostępu można zobaczyć wydając polecenie ls -l

12 System uprawnień Linux 4 Dla każdej klasy definiujemy trzy prawa: r (Read), w (Write), x (eXecute) 4 Jest to widoczne jako litera (jest) lub kreska (brak): 4 d r w x r w x r w x katalog właściciel grupa inni Jeśli prawo jest przyznane - w danej grupie liczby dodajemy, jeśli nie - pomijamy i umieszczamy jako pierwszy parametr polecenia chmod, np.. –chmod 735 katalog :: d r w x - w x r - x –czy ma sens aby sobie odbierać prawo zapisu?

13 Linux 4 Okno terminala wywoływane przez PuTTY 4 połączenie SSH do boss.zie.pg.gda.pl 4 logowanie do konta - login / hasło 4 Podstawowe polecenia: –ls [-[l][a]] wyświetl zawartość –mkdir utwórz katalog –rmdir usuń katalog –cp kopiuj pliki –rm usuń pliki –passwd zmień hasło –logout wyloguj się

14 FTP 4 File Transfer Protocol - służy do przesyłania plików 4 Zawsze pracuje się na dwóch komputerach: –serwerze (komputerze zdalnym) i –kliencie (komputerze lokalnym) 4 Komputer lokalny to ten, na którym uruchomiono program klienta FTP 4 Komputer zdalny to ten, na którym pracuje serwer FTP

15 Komputery w FTP Komputer zdalny Komputer lokalny Komputer przy którym siedzimy PuTTY FTP Gdańsk Sydney Singapur

16 HTML - znaczniki 4 Komendy języka HTML 4 Zawsze pomiędzy 4 w HTML opisują sposób formatowania 4 większość jest domykana - pełni to funkcję nawiasu i oznaczane jest ukośnikiem, np. 4 niektóre nie są domykane, np. Elegancko pisać wielkimi literami

17 Struktura dokumentu tytuł strony Zawartość strony

18 HTML - zasady 4 Każdy tekst na stronie HTML nie będący znacznikiem będzie wypisany 4 Wszystkie białe znaki (spacje, znaki enter i tabulacji) będą zastąpione pojedynczą spacją 4 Przejście do nowej linii – znaczniki:, … 4 strony umieszczamy w plikach.html 4 specjalne znaczenie: index.html

19 Podstawowe znaczniki 4 Formatowanie tekstu – … pogrubienie – … kursywa – … podkreślenie – … przekreślenie 4 Nagłówki – … 4 Znaczniki mogą być zagnieżdżane, ale nie mogą się krzyżować

20 Kolory w HTML 4 Kolory podstawowe 4 Notacja szesnastkowa –#RRGGBB # #FFFFFF # #FF0000 #00FF00 #3A21F2

21 Czcionki / atrybuty znaczników 4 Znacznik FONT – … 4 Atrybut znacznika BODY –BGCOLOR=xx

22 Atrybuty tekstu 4 Wielkość – … 4 Akapit – … 4 Wyrównanie – …

23 Ważne znaczniki 4 Indeksy – … 4 Listy – …

24 Linki 4 Linki – tekst -Adres względny / bezwzględny -Użycie katalogu bieżącego –Sterowanie oknem TARGET=_blank TARGET=nazwa

25 Własności dokumentu 4 Atrybuty sekcji HEAD –

26 Znaki w HTML 4 Specjalne znaki HTML < < " > >   4 Polskie znaki (ISO ) ą 0177 Ą 0161 ł 0179 Ł 0163 ś 0182 Ś 0166 ć 0230 Ć 0198 ń 0241 Ń 0209 ź 0188 Ź 0172 ę 0234 Ę 0202 ó 0243 Ó 0211 ż 0191 Ż Znaki specjalne

27 HTML - wykorzystanie

28 Linki 4 tekst 4 Dodatkowe parametry: –TARGET=blank –ALT=opis 4 Odnośnik: –

29 Adresy 4 Adres bezwzględny pok. 716, gm. B ul. G. Narutowicza 11/ Gdańsk 4 Adres względny Wyjdź z budynku Przejdź przez ulicę Wejdź do gmachu B Pojedź na 7. piętro Wejdź do pokoju Adres bezwzględny 4 Adres względny./../ulica/siodme_pietro/laboratorium.html Specjalne katalogi:... ~

30 Obrazki 4 4 Dodatkowe atrybuty: –WIDTH=x HEIGHT=y –HSPACE=x VSPACE=y –BORDER=n –ALIGN=wyrównanie Left | right Top | middle | bottom | texttop| absbottom

31 Obrazki 4 Formaty: –.bmp nieskompresowany –.jpg stratny –.gif Max 256 kolorów Przezroczystość Ruch –.png

32

33

34 Miniatura 4 Miniaturka zdjęcia, która po kliknięciu się powiększa: –

35 Tabele 4 Tabela: … 4 Wiersz: … 4 Komórka: … 4 Nagłówek: … 4 Dodatkowe parametry: –COLSPAN=x - Połączenie komórek w wierszu –ROWSPAN=y - Połączenie komórek w wierszu –ALIGN=sposób - wyrównanie (left | right | center) –VALIGN=sposób - wyrównanie w pionie (top | middle | bottom) –BGCOLOR=kolor - kolor tła –BACKGROUND=obrazek - obrazek tła

36 Rozplanowanie strony 4 Do rozplanowania strony można wykorzystać: –Tabele (znacznik TABLE) –Ramki (znacznik FRAMESET) –Style (znacznik DIV)

37 Skrypty na stronie 4 Java - applety 4 ActiveX - kontorlki 4 JavaScript etc - skrypty

38 Style lokalne 4 Style lokalne definiowane są w znaczniku i obejmują jedynie obiekty wewnątrz jednego znacznika - przestają obowiązywać wraz z jego końcem. Przykład :...

39 Style wewnętrzne 4 Style wewnętrzne definiowane są w sekcji nagłówka i obowiązują na danej stronie HTML. Przykład: Strona

40 Style zewnętrzne 4 Zewnętrzne arkusze stylów pozwalają na jednoczesne definiowanie stylów w wielu dokumentach. Mają postać osobnych plików zapisywanych z rozszerzeniem.css i zawierających wnętrze znacznika analogiczne do stylu wewnętrznego. 4 W dokumentach HTML odwołuje się do nich] poprzez umieszczenie w sekcji HEAD znacznika 4 Zewnętrzne style mogą być modyfikowane przez style wewnętrzne, a te z kolei mogą być modyfikowane przez style lokalne.

41 Wybrane atrybuty 4 czcionka pochyła font-style: italic|oblique|normal normal oznacza brak atrybutu pochyłości 4 czcionka pogrubiona font-weight:bold względne pogrubienie: bolder, lighter realtywne pogrubienie: wielokrotność 100; 400=standardowa; 700=bold usuwanie:normal 4 rozmiar czcionki: font-size: wartości standardowe: xx-small, x-small, small, medium, large, x-large, xx-large wartości względne: larger, smaller wartości względne określane w procentach względem aktualnej definicji, np. 150% 4 wysokość interlinii: line-height:n wartości względne mogą być również podawane w %

42 Wybrane atrybuty 4 wyrównanie tekstu text-align: left right center justify 4 podkreślanie tekstu: text-decoration: underline overline none 4 kolor tekstu: color: nazwa koloru #rrggbb rgb(r,g,b) rgb(%r, %g, %b)

43 Zgłaszanie do wyszukiwarek

44 Zawsze 4 Pisz do rzeczy - ludzie szukają treści 4 Używaj raczej krótkich zdań i stron 4 Używaj znacznika TITLE, DESCRIPTION, KEYWORDS 4 Używaj strony ISO Wyróżniaj linki 4 Opsiuj linki (do czego prowadzą) 4 Trzymaj przy życiu stronę (ludzie szukają nowości) 4 Warto podawać datę modyfikacji... 4 świetną rzeczą jest strona 'co nowego'

45 Zawsze 4 Zrób link do strony startowej 4 Zrób spis treści (lub mapę serwisu) 4 Zrób przyjazny schemat nawigacji 4 Trzymaj strony w jednym wystroju, z jednolitą nawigacją 4 Każda strona powinna być nie głębiej niż na 4-5 poziomie 4 Zarejestruj stronę 4 Pisząc po angielsku wykorzystuj daty w formacie słownym (2002/07/01 może oznaczać 1st of July albo January, 7th...)

46 Zawsze 4 Rezerwuj miejsce dla obrazków (WIDTH HEIGHT) 4 Korzystaj z obrazków wielokrotnie, jeśli tylko możesz - warto! 4 Staraj się korzystać z bezpiecznej palety 256 kolorów 4 Wykorzystuj transparentność rysunków 4 Wykorzystuj przeplot 4 Koniecznie trzeba wykorzystywać atrybut ALT

47 Zawsze 4 Sprawdzaj jak wyświetla się Twoja strona na róznych przeglądarkach (IE, Mozilla, Netscape, Opera) 4 Sprawdzaj jak wyświetla się Twoja strona w oknach o różnej wielkości 4 Sprawdzaj jak się drukuje Twoja strona 4 Przeglądaj statystyki, jesli tylko masz do nich dostęp 4 Bardzo uważnie zaprojektuj wygląd strony - tak by był łatwy do czytania i nawigacji

48 Nigdy 4 Nie popełniaj błędów 4 Nie używaj żargonu 4 Nie używaj ekranu powitalnego (po co?) 4 Nie pokazuj stron 'under construction' 4 Nie zostawiaj wiszących linków ('błąd 404') 4 Nie zmieniaj adresu swoich stron!!!!

49 Nigdy 4 Nie wprowadzaj w błąd wyszukiwarek ani ludzi 4 Nie zaśmiecaj stron 4 Nie używaj migających elementów - one rozpraszają (zwłaszcza w nadmiarze) 4 Nie projektuj strony dla jednej przeglądarki lub rozdzielczości (stronę najlepiej oglądać...)

50 Nigdy 4 Nie wstawiaj na podstawowe strony obrazków większych niż ok. 30kB - jeśli chcesz, zrób do nich link (np. z miniaturką) 4 Nie rozbudowuj nadmiernie stron - znowu ok. 30kB... 4 Nie wykorzystuj obrazków z obcych stron - one mogą 'uciec'! Skopiuj je, o ile masz do tego prawo.

51 Nigdy 4 Nie używaj zbyt małych liter - ludzie nie chcą czytać przez lupę 4 Nie używaj zbyt wielkich liter 4 NIE UŻYWAJ KAPITALIKÓW - Źle się je czyta, a poza tym oznaczają krzyk... 4 Nie używaj więcej niż 2 fontów - tak mówią typografowie... 4 Raczej nie używaj bez dogłębnej wiedzy nazw fontów - one są bardzo różne na różnych komputerach...

52 Szablon strony

53

54

55 Szablon strony - początek 4 Tworzymy projekt 4 Zapisujemy na dysku 4 Dodajemy pusty wiersz

56 Wstawienie tabeli 4 Wstawiamy tabelę

57 Połączenie komórek 4 Zaznaczamy komórki do połączenia 4 Klikamy prawym klawiszem myszki 4 Wybieramy połącz zaznaczone komórki

58 Wstawiamy nagłówek 4 Wstaw przygotowany wcześniej obrazek korzystając z ikonki obrazek

59 Dostosowujemy wielkości komórek 4 Można wykorzystać ikonki na listwach (patrz rys) 4 Rozmiary wymuszają też rysunki umieszczone jako IMG

60 Właściwości tabeli 4 Wybieramy z menu właściwości tabeli –Szerokość obramowania: 0 –Odstęp: 0 –Marginesy: 0 –Wyrównanie: wyśrodkuj

61 Szerokość tabeli 4 Szerokość tabeli można –Zostawić pustą Dostosuje się automatycznie do elementów –Wpisać jako procent szerokości okna Nie więcej jak 70-80% –Wpisać jako piksele Nie więcej jak pikseli 4 Najlepiej ustalić małą, stałą szerokość – ok. 400 pikseli, a potem wymusić zwiększenie szerokości obrazkiem nagłówka

62 Tło komórki 4 Aby obrazek był tłem należy go przygotować 4 Ustawić pożądaną wielkość (np. za pomocą Irfan View: Image / Resize) 4 Bardzo zmniejszyć kontrast (np. za pomocą Irfan View: Image / Color corrections) 4 Rozjaśnić obrazek (np. za pomocą Irfan View: Image / Color corrections)

63 Organizacja tabel 4 Tabele są wewnątrz znacznika TABLE 4 Zapisywane są wierszami, od góry do dołu, wewnątrz znacznika TR (Table Row) 4 Każdy wiersz zapisywany jest komórkami, od lewej strony do prawej, wewnątrz znacznika TD (Table Data)

64 Wstawianie tła 4 Przełączamy się do widoku Źródło 4 Znajdujemy właściwą komórkę 4 Wewnątrz odnalezionego znacznika dodajemy parametr BACKGROUND=obrazek.jpg

65 Właściwości tła 4 Tło, inaczej niż obrazki, nie rozciąga tabel 4 Jeżeli tło jest większe od komórki – wówczas wyświetlany jest tylko fragment 4 Jeżeli tło jest mniejsze od komórki – wówczas tło jest powtarzane w poziomie i pionie 4 Przy powtarzaniu zwykle widać miejsca połączeń obrazków, co nie wygląda zbyt pięknie 4 Istnieją obrazki specjalnie projektowane jako tła – mają górną krawędź taką jak dolna oraz prawą taką jak lewa – dzięki czemu nie widać miejsc połączeń 4 Przykładowe obrazki na tła można znaleźć pod adresem

66 Dodanie koloru menu 4 Klikamy na komórce prawym przyciskiem myszki 4 Wybieramy kolor tła komórki 4 Wybieramy kolor

67 Dodanie pozycji menu 4 Dodajemy pozycje menu jako tekst 4 Za pomocą ikonki odnośnik zamieniamy je na linki do przyszłych stron 4 Przed linkami warto dodać kilka spacji by nie dotykały krawędzi

68 Ostatnia kosmetyka 4 Zmieniamy wyrównanie w komórkach na do góry (prawy przycisk myszy – właściwości komórki) 4 Zapisujemy przez zapisz jako strony pod nazwami poszczególnych stron, takimi jak zdefiniowane w menu – tyle razy ile potrzebujemy 4 Na każdej ze stron dodajemy treść

69 Badanie on-line 4 Zapraszam na badanie czynników wpływających na postrzeganie usług on-line 4 w niedzielę po ostatnich zajęciach 4 Niedziela godz (max) 4 Sala 716 gmach B 4 Pomoc będzie bardzo mile widziana

70 Dziękuję


Pobierz ppt "Zastosowania technik multimedialnych i interetowych sem. zimowy 2008."

Podobne prezentacje


Reklamy Google