1 / 69

Zastosowania technik multimedialnych i interetowych

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.

alexander-roth
Download Presentation

Zastosowania technik multimedialnych i interetowych

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 / 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

  4. 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

  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 • 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)

  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 => http://www.zie.pg.gda.pl/~login

  10. 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

  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 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?

  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. Singapur Komputer przy którym siedzimy PuTTY Gdańsk FTP Sydney Komputery w FTP Komputer zdalny 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ść • <BIG> … </BIG> • <SMALL> … </SMALL> • Akapit • <P> … </P> • Wyrównanie • <CENTER> … </CENTER> • <P ALIGN=‘xx’> … </P>

  22. Ważne znaczniki • Indeksy • <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-8859-2"> • <META NAME=‘’language’’ CONTENT=‘’pl’’>

  25. Znaki w HTML • Specjalne znaki HTML < &lt; ” &quot; > &gt; &nbsp • 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

  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 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: . .. ~

  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 • nieskompresowany • .jpg • stratny • .gif • Max 256 kolorów • Przezroczystość • Ruch • .png

  31. 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>

  32. 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

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

  34. 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>

  35. 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>

  36. 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>

  37. 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.

  38. 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 %

  39. 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)

  40. Zgłaszanie do wyszukiwarek

  41. 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'

  42. 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...)

  43. 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

  44. 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

  45. 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!!!!

  46. 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ć...)

  47. 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.

  48. 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...

More Related