Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
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 ( nazwa serwera ( 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
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>
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
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ę
Podobne prezentacje
