Wprowadzenie do Internetu

Download Report

Transcript Wprowadzenie do Internetu 

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
– 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
 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
x
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):

katalog właściciel
d
grupa
inni
rwx
rwx
rwx
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
PuTTY
FTP
Komputer lokalny
Sydney
Komputer przy
którym siedzimy
Gdańsk
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
 specjalne znaczenie:
.html
index.html
Podstawowe znaczniki
 Formatowanie tekstu
–
–
–
–
<B> … </B>
<I> … </I>
<U> … </U>
<STRIKE> … </STRIKE>
pogrubienie
kursywa
podkreślenie
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
<
>
&lt;
&gt;
”
&quot;
&nbsp
 Polskie znaki (ISO 8859-2)
ą 0177
ć 0230
ę 0234
Ą 0161
Ć 0198
Ę 0202
 Znaki specjalne
ł 0179
ń 0241
ó 0243
Ł 0163 ś 0182
Ń 0209 ź 0188
Ó 0211 ż 0191
Ś 0166
Ź 0172
Ż 0175
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
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; fontweight: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ę