700 likes | 848 Vues
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.
E N D
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 / InternetWorld 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 SGMLStructuralized Markup Language • następcą jest XMLeXtended Markup Language
Podstawowe pojęcia • Hipertekst • 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
Każdy obiekt ma swojego właściciela - który go utworzył • Właściciel ustala dla wszystkich prawa dostępu do obiektu x • 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 • Wszyscy użytkownicy są podzieleni na rozłączne grupy
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
Singapur Komputer przy którym siedzimy PuTTY Gdańsk FTP Sydney Komputery w FTP Komputer zdalny 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ść • <BIG> … </BIG> • <SMALL> … </SMALL> • Akapit • <P> … </P> • Wyrównanie • <CENTER> … </CENTER> • <P ALIGN=‘xx’> … </P>
Ważne znaczniki • Indeksy • <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) ą 0177 Ą 0161 ł 0179 Ł 0163 ś 0182 Ś 0166 ć 0230 Ć 0198 ń 0241 Ń 0209 ź 0188 Ź 0172 ę 0234 Ę 0202 ó 0243 Ó 0211 ż 0191 Ż 0175 • Znaki specjalne
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 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 • Adres bezwzględny http://www.zie.pg.gda.pl/~jwach/jacek.wachowicz.php • Adres względny • ./../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 • nieskompresowany • .jpg • stratny • .gif • 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)
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...