Zastosowania technik multimedialnych i interetowych sem. zimowy 2008
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
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
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
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
URL URL - Uniform Resource Locator pełny adres usługi, z której chcemy skorzystać składa się z 5 części http://www.zie.pg.gda.pl:80/md/internet/index.php 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)
Windows vs. Linux Małe vs. wielkie litery \ vs. / ilość katalogów głównych pliki wykonywalne Pliki ukryte spacja jako separator - zamiast niej ‘_’
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
Specjalne katalogi w Unixie . .. / ~ public_html => http://www.zie.pg.gda.pl/~login
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
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 4 2 1 4 2 1 4 2 1 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?
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ę
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
Komputery w FTP Komputer zdalny Singapur Komputer przy którym siedzimy Gdańsk Sydney Singapur Komputer przy którym siedzimy PuTTY FTP Komputer lokalny
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
Struktura dokumentu <HTML> <HEAD> <TITLE> tytuł strony </TITLE> </HEAD> <BODY> Zawartość strony </BODY> </HTML>
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
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ć
Kolory w HTML Kolory podstawowe Notacja szesnastkowa #RRGGBB #000000 #FFFFFF #999999 #FF0000 #00FF00 #3A21F2
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’’
Atrybuty tekstu Wielkość Akapit Wyrównanie <BIG> … </BIG> <SMALL> … </SMALL> Akapit <P> … </P> Wyrównanie <CENTER> … </CENTER> <P ALIGN=‘xx’> … </P>
Ważne znaczniki Indeksy Listy <SUB> … </SUB> <SUP> … </SUP> Listy <UL> … </UL> <OL> … </OL> <LI> … </LI>
Linki Linki <A HREF=‘’adres’’> tekst </A> Adres względny / bezwzględny Użycie katalogu bieżącego Sterowanie oknem TARGET=‘’_blank’’ TARGET=‘’nazwa’’
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-8859-2"> <META NAME=‘’language’’ CONTENT=‘’pl’’>
Znaki w HTML Specjalne znaki HTML Polskie znaki (ISO 8859-2) < < ” " > >   Polskie znaki (ISO 8859-2) ą 0177 Ą 0161 ł 0179 Ł 0163 ś 0182 Ś 0166 ć 0230 Ć 0198 ń 0241 Ń 0209 ź 0188 Ź 0172 ę 0234 Ę 0202 ó 0243 Ó 0211 ż 0191 Ż 0175 Znaki specjalne
HTML - wykorzystanie
Linki <A HREF=”adres strony”> tekst </A> Dodatkowe parametry: TARGET=”blank” ALT=”opis” Odnośnik: <A NAME=”nazwa”></A> <A HREF=”#nazwa”></A>
Adresy Adres bezwzględny Adres względny pok. 716, gm. B ul. G. Narutowicza 11/12 80-952 Gdańsk Adres względny Wyjdź z budynku Przejdź przez ulicę Wejdź do gmachu B Pojedź na 7. piętro Wejdź do pokoju 716 http://www.zie.pg.gda.pl/~jwach/jacek.wachowicz.php ./../ulica/siodme_pietro/laboratorium.html Specjalne katalogi: . .. ~
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
Obrazki Formaty: .bmp .jpg .gif .png nieskompresowany stratny Max 256 kolorów Przezroczystość Ruch .png
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>
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
Rozplanowanie strony Do rozplanowania strony można wykorzystać: Tabele (znacznik TABLE) Ramki (znacznik FRAMESET) Style (znacznik DIV)
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:99b42120-6ce7-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>
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>
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>
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.
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 %
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) 0..255 rgb(%r, %g, %b)
Zgłaszanie do wyszukiwarek
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 8859-2 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'
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...)
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
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
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!!!!
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ć...)
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.
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...
Szablon strony
Szablon strony - początek Tworzymy projekt Zapisujemy na dysku Dodajemy pusty wiersz
Wstawienie tabeli Wstawiamy tabelę
Połączenie komórek Zaznaczamy komórki do połączenia Klikamy prawym klawiszem myszki Wybieramy ‘połącz zaznaczone komórki’
Wstawiamy nagłówek Wstaw przygotowany wcześniej obrazek korzystając z ikonki ‘obrazek’
Dostosowujemy wielkości komórek Można wykorzystać ikonki na listwach (patrz rys) Rozmiary wymuszają też rysunki umieszczone jako IMG
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
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 700-800 pikseli Najlepiej ustalić małą, stałą szerokość – ok. 400 pikseli, a potem wymusić zwiększenie szerokości obrazkiem nagłówka
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)
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)
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”
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 http://www.allfreebackgrounds.com/background_select.html
Dodanie koloru menu Klikamy na komórce prawym przyciskiem myszki Wybieramy ‘kolor tła komórki’ Wybieramy kolor
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
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ść
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. 16.00-17.00 (max) Sala 716 gmach B Pomoc będzie bardzo mile widziana
Dziękuję