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
<
>
<
>
”
"
 
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ę