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 (52 lata 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 2011 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
Adres IP Adres IP numer komputera, unikatowy w skali całej sieci Struktura adresu IP Adres statyczny Adres dynamiczny informatyka + 8
Domena Domena nazwa komputera, powiązana z jego adresem IP DNS (ang. Domain Name System) system nazw domen Charakter działalności com, gov, edu, mil, org Kraj pl, de, uk, us informatyka + 9
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:// https:// nazwa protokołu sieciowego (sposobu przesyłania danych z serwera do przeglądarki) nazwa_serwera.pl/ katalog/ plik.html plik.pdf nazwa domenowa serwera, z którego zostanie pobrany dokument HTML (wyświetlony jako strona) nazwa folderu (katalogu) na serwerze nazwa pobieranego pliku (dokumentu HTML) znajdującego się w tym folderze (katalogu) informatyka + 10
Zasada działania strony internetowej Architektura klient serwer informatyka + 11
Zasada działania strony dynamicznej Opis strony dynamicznej jest tworzony przez serwer w momencie, kiedy użytkownik zażąda jej wyświetlenia informatyka + 12
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 + 13
Strony statyczne a strony dynamiczne 2#2 Wady Zalety Strony statyczne Strony dynamiczne - nie można szybko zmienić treści - interakcja z użytkownikiem bardzo ograniczona - trudniej je utworzyć (języki skryptowe są trudniejsze do opanowania niż HTML) - wymagają bazy danych na serwerze - łatwo je utworzyć (kod HTML) - łatwo i szybko można zmienić treść - umożliwiają interakcję z użytkownikiem informatyka + 14
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 + 15
Plan wykładu Wprowadzenie Działanie stron internetowych statycznych dynamicznych Tworzenie stron internetowych technologie i narzędzia Projektowanie witryny wskazówki Podsumowanie informatyka + 16
Od czego zacząć?.. -> HTML Kurs HTML w Internecie http://www.kurshtml.boo.pl/ Edytor Notepad++ Piotr Kopciał informatyka + 17
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 + 18
Witryna na skróty szablony w Internecie http://www.opendesigns.org/ Piotr Kopciał informatyka + 19
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 + 20
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 + 21
Plan wykładu Wprowadzenie Działanie strony internetowej statycznej dynamicznej Tworzenie strony internetowej Technologie i narzędzia Projektowanie witryny wskazówki Podsumowanie informatyka + 22
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 + 23
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 + 24
Plan na papierze: Projektowanie witryny 3#3 Piotr Kopciał informatyka + 25
Jak ludzie widzą witryny internetowe Internauci są niecierpliwi 15 sekund Schemat oglądania strony 1,2,3 informatyka + 26
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 + 27
Elementy stron internetowych Tekst Obrazy grafika zdjęcia Formularze Multimedia Elementy dynamiczne kalendarz, zegar, horoskop, pogoda informatyka + 28
Elementy stron internetowych tekst Duża wartość informacyjna Szybkość wyświetlania Mało atrakcyjny informatyka + 29
Elementy stron internetowych obrazy (grafika, zdjęcia) Przyciąga uwagę Możliwość powiększania zdjęć Szybkość wyświetlania informatyka + 30
Elementy stron internetowych formularze Zbieranie informacji od użytkowników rejestracja ankieta zamówienia transakcje Piotr Kopciał informatyka + 31
Elementy stron internetowych multimedia (audio, video) Najbardziej atrakcyjne informatyka + 32
Elementy dynamiczne Kalendarz Zegar Pogoda Horoskop Waluty Giełda Położenie informatyka + 33
Kompozycja strony obramowanie Grupowanie informacji Utrzymanie porządku Komponowanie zawartości Piotr Kopciał informatyka + 34
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 + 35
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 + 36
Plan wykładu Wprowadzenie Działanie strony internetowej statycznej dynamicznej Tworzenie strony internetowej Technologie i narzędzia Projektowanie witryny wskazówki Podsumowanie informatyka + 37
Literatura Nauka projektowania stron internetowych 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 + 38