Plan wykładu • Wprowadzenie • Działanie strony internetowej – statycznej – dynamicznej • Tworzenie stron internetowych – technologie i narzędzia • Projektowanie witryny – wskazówki • Podsumowanie informatyka + Przykłady witryn.
Download ReportTranscript Plan wykładu • Wprowadzenie • Działanie strony internetowej – statycznej – dynamicznej • Tworzenie stron internetowych – technologie i narzędzia • Projektowanie witryny – wskazówki • Podsumowanie informatyka + Przykłady witryn.
Plan wykładu
• Wprowadzenie
• Działanie strony internetowej
– statycznej
– dynamicznej
• Tworzenie stron internetowych
– technologie i narzędzia
• Projektowanie witryny
– wskazówki
• Podsumowanie
informatyka +
2
Przykłady witryn i serwisów utworzonych przez
uczniów Informatyka+
informatyka +
3
Historia i przyszłość
• 1969 Pierwsza sieć ARPANet (50 lat temu!)
– przeznaczenie militarne
– Paul Baran
• 1971/72 protokół poczty elektronicznej
– Ray Tomlinson
• 1983 Narodziny Internetu protokół TCP/IP
– Vinton Cerf, Robert Kahn
• 1991 Pierwsza strona internetowa
– Tim Berners-Lee
•
•
•
•
1991 Internet w Polsce
2009 Web 2.0
…
201x Web 3.0
informatyka +
4
Plan wykładu
• Wprowadzenie
• Działanie strony internetowej
– statycznej
– dynamicznej
• Tworzenie stron internetowych
– technologie i narzędzia
• Projektowanie witryny
– wskazówki
• Podsumowanie
informatyka +
5
Podstawowe pojęcia 1#3
• Strona internetowa
– wynik interpretacji dokumentu HTML
<HTML>
• <HEAD>
Strona a witryna, serwis, portal
<TITLE> Prosta strona WWW </TITLE>
• </HEAD>
Przeglądarka
<BODY>
– „tłumaczy” kod HTML na postać
<FONT FACE="Arial">
<CENTER>
oglądaną na ekranie
<H1> Informatyka + </H1>
Witajcie na zajęciach Wszechnicy
popołudniowej!
</CENTER>
</BODY>
</HTML>
informatyka +
6
Podstawowe pojęcia 2#3
• Serwer – komputer, na którym znajduje się
opis strony internetowej, wraz z elementami
składowymi (grafika, pliki do pobrania)
informatyka +
7
Podstawowe pojęcia 3#3
• Adres URL – unikatowy adres, pod którym jest dostępna
konkretna strona internetowa
• Struktura adresu URL
http://www.informatykaplus.edu.pl/upload/dokumenty/regulamin.pdf
http://
nazwa_serwera.pl/
katalog/
https://
nazwa protokołu
sieciowego
(sposobu
przesyłania danych
z serwera do
przeglądarki)
plik.html
plik.pdf
nazwa domenowa
serwera, z którego
zostanie pobrany
dokument HTML
(wyświetlony jako
strona)
nazwa folderu
(katalogu) na
serwerze
informatyka +
nazwa pobieranego
pliku (dokumentu
HTML) znajdującego
się w tym folderze
(katalogu)
8
Zasada działania strony internetowej
• Architektura klient – serwer
informatyka +
9
Zasada działania strony dynamicznej
• Opis strony dynamicznej jest tworzony przez serwer w
momencie, kiedy użytkownik zażąda jej wyświetlenia
informatyka +
10
Strony statyczne a strony dynamiczne 1#2
• Strony statyczne
•
– ta sama treść
– wszyscy użytkownicy
widzą to samo
Strony dynamiczne
- treść generowana na
bieżąco
- różni użytkownicy
mogą widzieć inną
treść
- baza danych częstym
uzupełnieniem
informatyka +
11
Strony statyczne a strony dynamiczne 2#2
Wady
Strony
statyczne
Strony
dynamiczne
Zalety
- nie można szybko zmienić
treści
- interakcja z użytkownikiem
bardzo ograniczona
- łatwo je utworzyć
(kod HTML)
- trudniej je utworzyć (języki
skryptowe są trudniejsze do
opanowania niż HTML)
- wymagają bazy danych
na serwerze
- łatwo i szybko można
zmienić treść
- umożliwiają interakcję
z użytkownikiem
informatyka +
12
Tworzenie stron dynamicznych
- języki skryptowe
<HTML>
<HEAD>
<TITLE> Prosta strona WWW </TITLE>
</HEAD>
<BODY>
<H1> Informatyka + </H1>
Witaj na zajęciach Wszechnicy
Popołudniowej w dniu:
<?php
echo date("Y-m-d");
?>
</BODY>
</HTML>
informatyka +
13
Plan wykładu
• Wprowadzenie
• Działanie stron internetowych
– statycznych
– dynamicznych
• Tworzenie stron internetowych
– technologie i narzędzia
• Projektowanie witryny
– wskazówki
• Podsumowanie
informatyka +
14
Od czego zacząć?.. -> HTML
• Kurs HTML w Internecie
– http://www.kurshtml.boo.pl/
• Edytor
– Notepad++
Piotr Kopciał
informatyka
+
15
Następny krok.. -> CSS
Cascading Style Sheets – kaskadowe arkusze stylów
• Przykłady
• Kurs CSS w Internecie
– http://www.kurshtml.boo.pl/css/
Piotr Kopciał
informatyka
+
16
Witryna na skróty – szablony w Internecie
http://www.opendesigns.org/
Piotr Kopciał
informatyka
+
17
PHP & MySQL
• PHP – ang. Hypertext Preprocessor – skryptowy język
programowania po stronie serwera używany do tworzenia
dynamicznych stron internetowych
• MySQL - system relacyjnych baz danych, wspierający działanie
dynamicznych stron internetowych
• Przykład
• Kurs PHP w Internecie
– http://phpkurs.pl/
Piotr Kopciał
informatyka
+
18
ASP.NET & MS SQL Serwer
• ASP.NET – platforma firmy Microsoft, służąca do tworzenia
dynamicznych stron internetowych, aplikacji oraz usług
sieciowych
• Microsoft Visual Web Developer 2008 Express Edition
– http://www.microsoft.com/express/vwd/
• ASP.NET w Internecie
– http://www.asp.net/learn/
Piotr Kopciał
informatyka
+
19
Plan wykładu
• Wprowadzenie
• Działanie strony internetowej
– statycznej
– dynamicznej
• Tworzenie strony internetowej
– Technologie i narzędzia
• Projektowanie witryny
– wskazówki
• Podsumowanie
informatyka +
20
Projektowanie witryny 1#3
„Nie można kopać dołu na fundamenty,
nie mając gotowego projektu domu”
• co chcę umieścić na stronie?
• do kogo strona jest adresowana?
• w jaki sposób chcę zaprezentować siebie
(swoje hobby, firmę) innym?
informatyka +
21
Projektowanie witryny 2#3
• Najczęściej umieszczamy:
– informacje o sobie (hobby) lub swojej firmie
– zdjęcia (prywatne lub oferowanych produktów)
– formularz (komentarze, księga gości)
– grafika (strona atrakcyjna wizualnie)
• Stosujemy obramowanie
informatyka +
22
Projektowanie witryny 3#3
• Plan na papierze:
Piotr Kopciał
informatyka
+
23
Jak ludzie widzą witryny internetowe
• Internauci są
niecierpliwi
– 15 sekund
• Schemat
oglądania
strony
– 1,2,3
informatyka +
24
Nie jesteśmy odbiorcami swojej witryny
Nie projektujemy strony dla siebie - projektujemy
ją dla innych użytkowników, którzy będą naszą
stronę odwiedzać.
•
•
•
•
Nie wszyscy odbiorcy strony są podobni do nas
O swojej witrynie wiemy więcej niż inni
O odbiorcy wiemy mniej, niż nam się wydaje
Najczęściej popełniane błędy:
–
–
–
–
używanie żargonu (słowa niezrozumiałe dla innych)
złe zaplanowanie układu strony
niepogrupowanie informacji na dany temat
elementy rozpraszające (zam. przyciągające) uwagę
informatyka +
25
Elementy stron internetowych
• Tekst
• Obrazy
– grafika
– zdjęcia
• Formularze
• Multimedia
• Elementy dynamiczne
– kalendarz , zegar, horoskop, pogoda …
informatyka +
26
Elementy stron internetowych – tekst
• Duża wartość
informacyjna
• Szybkość
wyświetlania
• Mało
atrakcyjny
informatyka +
27
Elementy stron internetowych
– obrazy (grafika, zdjęcia)
• Przyciąga
uwagę
• Możliwość
powiększania
zdjęć
• Szybkość
wyświetlania
informatyka +
28
Elementy stron internetowych – formularze
• Zbieranie
informacji od
użytkowników
–
–
–
–
rejestracja
ankieta
zamówienia
transakcje
Piotr Kopciał
informatyka
+
29
Elementy stron internetowych
– multimedia (audio, video)
• Najbardziej
atrakcyjne
informatyka +
30
Elementy dynamiczne
•
•
•
•
•
•
•
•
Kalendarz
Zegar
Pogoda
Horoskop
Waluty
Giełda
Położenie
…
informatyka +
31
Kompozycja strony – obramowanie
• Grupowanie
informacji
• Utrzymanie
porządku
• Komponowanie
zawartości
Piotr Kopciał
informatyka
+
32
5 skutecznych sposobów
na odstraszenie użytkowników
Wyłączenie serwera
•
•
strona niedostępna dla użytkowników
Za dużo elementów multimedialnych
•
•
•
spowolnienie wyświetlania strony
rozproszenie uwagi użytkownika
Zmiana rozmieszczenia elementów
•
•
użytkownik się gubi
Niedziałające łącza
•
•
użytkownik się denerwuje
Brak aktualizacji
•
•
brak powodu do ponownych odwiedzin
informatyka +
33
5 sposobów poprawy witryny
Skoncentruj się najpierw na działaniu strony, potem
na wyglądzie
•
•
kompromis pomiędzy wyglądem a szybkością
Myśl o użytkowniku
•
•
wczuj się w jego rolę
Projektuj zgodnie z konwencją
•
•
sprawdzony schemat układu strony
Zwróć uwagę na szczegóły
•
•
błahe, ale kłopotliwe błędy
Testuj
•
•
i poprawiaj według uwag i sugestii użytkowników
informatyka +
34
Plan wykładu
• Wprowadzenie
• Działanie strony internetowej
– statycznej
– dynamicznej
• Tworzenie strony internetowej
– Technologie i narzędzia
• Projektowanie witryny
– wskazówki
• Podsumowanie
informatyka +
35
Nauka projektowania
stron internetowych
• Literatura
– J. Cohen, Serwisy WWW. Projektowanie, tworzenie,
zarządzanie, Wyd. Helion, Gliwice 2004
– J. Price, L. Price, Profesjonalny serwis WWW,
Wyd. Helion, Gliwice 2002
– L. Hobbs, Strony WWW. To proste,
Wyd. RM, Warszawa 2002
• Adres w Internecie
– http://html.projektowanie-stron.edl.pl/
informatyka +
36