Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Zastosowania technik multimedialnych i interetowych

Podobne prezentacje


Prezentacja na temat: "Zastosowania technik multimedialnych i interetowych"— Zapis prezentacji:

1 Zastosowania technik multimedialnych i interetowych
sem. zimowy 2008

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

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

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

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

6 URL URL - Uniform Resource Locator
pełny adres usługi, z której chcemy skorzystać składa się z 5 części 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)

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

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

9 Specjalne katalogi w Unixie
. .. / ~ public_html =>

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

11 System uprawnień Linux
Dla każdej klasy definiujemy trzy prawa: r (Read), w (Write), x (eXecute) Jest to widoczne jako litera (jest) lub kreska (brak): 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 katalog :: d r w x - w x r - x czy ma sens aby sobie odbierać prawo zapisu?

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

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

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

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

16 Struktura dokumentu <HTML> <HEAD>
<TITLE> tytuł strony </TITLE> </HEAD> <BODY> Zawartość strony </BODY> </HTML>

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

18 Podstawowe znaczniki Formatowanie tekstu <B> … </B> pogrubienie <I> … </I> kursywa <U> … </U> podkreślenie <STRIKE> … </STRIKE> przekreślenie Nagłówki <H1> … </H1> <H2> … </H2> <H6> … </H6> Znaczniki mogą być zagnieżdżane, ale nie mogą się krzyżować

19 Kolory w HTML Kolory podstawowe Notacja szesnastkowa #RRGGBB #000000
#FFFFFF #999999 #FF0000 #00FF00 #3A21F2

20 Czcionki / atrybuty znaczników
Znacznik FONT <FONT COLOR=‘’xx’’> … </FONT> <FONT SIZE=‘’yy’’> … </FONT> <FONT FACE=‘’zz’’> … </FONT> <FONT COLOR=‘’xx’’ SIZE=‘’yy’’ FACE=‘’zz’’> … </FONT> Atrybut znacznika BODY BGCOLOR=‘’xx’’

21 Atrybuty tekstu Wielkość Akapit Wyrównanie <BIG> … </BIG>
<SMALL> … </SMALL> Akapit <P> … </P> Wyrównanie <CENTER> … </CENTER> <P ALIGN=‘xx’> … </P>

22 Ważne znaczniki Indeksy Listy <SUB> … </SUB>
<SUP> … </SUP> Listy <UL> … </UL> <OL> … </OL> <LI> … </LI>

23 Linki Linki <A HREF=‘’adres’’> tekst </A>
Adres względny / bezwzględny Użycie katalogu bieżącego Sterowanie oknem TARGET=‘’_blank’’ TARGET=‘’nazwa’’

24 Własności dokumentu Atrybuty sekcji HEAD
<META NAME="description" CONTENT="Citrus fruit wholesaler."> <META NAME=„keywords" CONTENT=„słowa, kluczowe"> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso "> <META NAME=‘’language’’ CONTENT=‘’pl’’>

25 Znaki w HTML Specjalne znaki HTML Polskie znaki (ISO 8859-2)
< < ” " > >   Polskie znaki (ISO ) ą Ą ł Ł ś Ś 0166 ć Ć ń Ń ź Ź 0172 ę Ę ó Ó ż Ż 0175 Znaki specjalne

26 HTML - wykorzystanie

27 Linki <A HREF=”adres strony”> tekst </A>
Dodatkowe parametry: TARGET=”blank” ALT=”opis” Odnośnik: <A NAME=”nazwa”></A> <A HREF=”#nazwa”></A>

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

29 Obrazki <IMG SRC=”obrazek” ALT=”opis” > Dodatkowe atrybuty:
WIDTH=”x” HEIGHT=”y” HSPACE=”x” VSPACE=”y” BORDER=”n” ALIGN=”wyrównanie” Left | right Top | middle | bottom | texttop| absbottom

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

31

32

33 Miniatura Miniaturka zdjęcia, która po kliknięciu się powiększa:
<A HREF=”duzy_obrazek.jpg”> <IMG SRC=”maly_obrazek.jpg” BORDER=”0”> </A>

34 Tabele Tabela: <TABLE> … </TABLE>
Wiersz: <TR> … </TR> Komórka: <TD> … </TD> Nagłówek: <TH> … </TH> 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

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

36 Skrypty na stronie Java - applety <APPLET CODE="nazwa.class" width=xx height=yy> <param name=nazwa value=wartość> <param name=nazwa value=wartość> </APPLET> ActiveX - kontorlki <OBJECT ID="nazwa" classid="class-id:99b ce7-11cf-a6c7-00aa00a47002" type="application/x-oleobject" width=xx height=yy> <param name=nazwa value=wartość> <param name=nazwa value=wartość> </OBJECT> JavaScript etc - skrypty <SCRIPT LANGUAGE="JavaScript" > <! // tekst skryptu > </SCRIPT> ", "width": "800" }

37 Style lokalne Style lokalne definiowane są w znaczniku i obejmują jedynie obiekty wewnątrz jednego znacznika - przestają obowiązywać wraz z jego końcem. Przykład : <BODY STYLE="color:red; text-align=justify"> <H1 STYLE="color:green; text-align:center; font-weight:bold"> </BODY>

38 Style wewnętrzne Style wewnętrzne definiowane są w sekcji nagłówka i obowiązują na danej stronie HTML. Przykład: <TITLE> Strona </TITLE> <STYLE> <!-- BODY {color:red; text-align:justify} H1 {color:green; text-align:center; font-weight:bold} H1 EM {color:red; text-align:center; font-weight:bold} H2, H3 {color:blue} --> </STYLE>

39 Style zewnętrzne 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 <STYLE> analogiczne do stylu wewnętrznego. W dokumentach HTML odwołuje się do nich] poprzez umieszczenie w sekcji HEAD znacznika <LINK REL=styleshet TYPE="text/css" HREF=[adres pliku .css] > Zewnętrzne style mogą być modyfikowane przez style wewnętrzne, a te z kolei mogą być modyfikowane przez style lokalne.

40 Wybrane atrybuty czcionka pochyła     font-style:        italic|oblique|normal        normal oznacza brak atrybutu pochyłości czcionka pogrubiona     font-weight:bold        względne pogrubienie: bolder, lighter        realtywne pogrubienie: wielokrotność 100; 400=standardowa; 700=bold        usuwanie:normal 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% wysokość interlinii:    line-height:n wartości względne mogą być również podawane w %

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

42 Zgłaszanie do wyszukiwarek

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

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

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

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

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

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

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

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

51 Szablon strony

52

53

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

55 Wstawienie tabeli Wstawiamy tabelę

56 Połączenie komórek Zaznaczamy komórki do połączenia
Klikamy prawym klawiszem myszki Wybieramy ‘połącz zaznaczone komórki’

57 Wstawiamy nagłówek Wstaw przygotowany wcześniej obrazek korzystając z ikonki ‘obrazek’

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

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

60 Szerokość tabeli 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 Najlepiej ustalić małą, stałą szerokość – ok. 400 pikseli, a potem wymusić zwiększenie szerokości obrazkiem nagłówka

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

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

63 Wstawianie tła Przełączamy się do widoku ‘Źródło’
Znajdujemy właściwą komórkę Wewnątrz odnalezionego znacznika <TD> dodajemy parametr BACKGROUND=”obrazek.jpg”

64 Właściwości tła Tło, inaczej niż obrazki, nie rozciąga tabel
Jeżeli tło jest większe od komórki – wówczas wyświetlany jest tylko fragment Jeżeli tło jest mniejsze od komórki – wówczas tło jest powtarzane w poziomie i pionie Przy powtarzaniu zwykle widać miejsca połączeń obrazków, co nie wygląda zbyt pięknie 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ń Przykładowe obrazki na tła można znaleźć pod adresem

65 Dodanie koloru menu Klikamy na komórce prawym przyciskiem myszki
Wybieramy ‘kolor tła komórki’ Wybieramy kolor

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

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

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

69 Dziękuję


Pobierz ppt "Zastosowania technik multimedialnych i interetowych"

Podobne prezentacje


Reklamy Google