Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Plan wykładu Wprowadzenie Działanie strony internetowej – statycznej – dynamicznej Tworzenie stron internetowych – technologie i narzędzia Projektowanie.

Podobne prezentacje


Prezentacja na temat: "Plan wykładu Wprowadzenie Działanie strony internetowej – statycznej – dynamicznej Tworzenie stron internetowych – technologie i narzędzia Projektowanie."— Zapis prezentacji:

1

2 Plan wykładu Wprowadzenie Działanie strony internetowej – statycznej – dynamicznej Tworzenie stron internetowych – technologie i narzędzia Projektowanie witryny – wskazówki Podsumowanie informatyka + 2

3 Przykłady witryn i serwisów utworzonych przez uczniów Informatyka+ informatyka + 3

4 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

5 Plan wykładu Wprowadzenie Działanie strony internetowej – statycznej – dynamicznej Tworzenie stron internetowych – technologie i narzędzia Projektowanie witryny – wskazówki Podsumowanie informatyka + 5

6 Podstawowe pojęcia 1#3 Strona internetowa – wynik interpretacji dokumentu HTML Strona a witryna, serwis, portal Przeglądarka – tłumaczy kod HTML na postać oglądaną na ekranie informatyka + 6 Prosta strona WWW Informatyka + Witajcie na zajęciach Wszechnicy popołudniowej!

7 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

8 Podstawowe pojęcia 3#3 Adres URL – unikatowy adres, pod którym jest dostępna konkretna strona internetowa Struktura adresu URL https:// nazwa_serwera.pl/katalog/ plik.html plik.pdf nazwa protokołu sieciowego (sposobu przesyłania danych z serwera do przeglądarki) 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 + 8

9 Zasada działania strony internetowej informatyka + 9 Architektura klient – serwer

10 Zasada działania strony dynamicznej Opis strony dynamicznej jest tworzony przez serwer w momencie, kiedy użytkownik zażąda jej wyświetlenia informatyka + 10

11 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

12 Strony statyczne a strony dynamiczne 2#2 WadyZalety Strony statyczne - nie można szybko zmienić treści - interakcja z użytkownikiem bardzo ograniczona - łatwo je utworzyć (kod HTML) Strony dynamiczne - 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

13 Tworzenie stron dynamicznych - języki skryptowe Prosta strona WWW Informatyka + Witaj na zajęciach Wszechnicy Popołudniowej w dniu: informatyka + 13

14 Plan wykładu Wprowadzenie Działanie stron internetowych – statycznych – dynamicznych Tworzenie stron internetowych – technologie i narzędzia Projektowanie witryny – wskazówki Podsumowanie informatyka + 14

15 Od czego zacząć?.. -> HTML Piotr Kopciał informatyka + 15 Kurs HTML w Internecie – Edytor – Notepad++

16 Następny krok.. -> CSS Cascading Style Sheets – kaskadowe arkusze stylów Piotr Kopciał informatyka + 16 Przykłady Kurs CSS w Internecie –h–http://www.kurshtml.boo.pl/css/

17 Witryna na skróty – szablony w Internecie Piotr Kopciał informatyka + 17

18 PHP & MySQL Piotr Kopciał informatyka + 18 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 –

19 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 – ASP.NET w Internecie – ASP.NET & MS SQL Serwer Piotr Kopciał informatyka + 19

20 Plan wykładu Wprowadzenie Działanie strony internetowej – statycznej – dynamicznej Tworzenie strony internetowej – Technologie i narzędzia Projektowanie witryny – wskazówki Podsumowanie informatyka + 20

21 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? Projektowanie witryny 1#3 informatyka + 21

22 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 Projektowanie witryny 2#3 informatyka + 22

23 Plan na papierze: Piotr Kopciał Projektowanie witryny 3#3 informatyka + 23

24 Jak ludzie widzą witryny internetowe informatyka + 24 Internauci są niecierpliwi – 15 sekund Schemat oglądania strony – 1,2,3

25 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

26 Elementy stron internetowych Tekst Obrazy – grafika – zdjęcia Formularze Multimedia Elementy dynamiczne – kalendarz, zegar, horoskop, pogoda … informatyka + 26

27 Elementy stron internetowych – tekst informatyka + 27 Duża wartość informacyjna Szybkość wyświetlania Mało atrakcyjny

28 Elementy stron internetowych – obrazy (grafika, zdjęcia) informatyka + 28 Przyciąga uwagę Możliwość powiększania zdjęć Szybkość wyświetlania

29 Elementy stron internetowych – formularze Piotr Kopciał informatyka + 29 Zbieranie informacji od użytkowników – rejestracja – ankieta – zamówienia – transakcje

30 Elementy stron internetowych – multimedia (audio, video) informatyka + 30 Najbardziej atrakcyjne

31 Elementy dynamiczne Kalendarz Zegar Pogoda Horoskop Waluty Giełda Położenie … informatyka + 31

32 Kompozycja strony – obramowanie Piotr Kopciał informatyka + 32 Grupowanie informacji Utrzymanie porządku Komponowanie zawartości

33 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

34 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

35 Plan wykładu Wprowadzenie Działanie strony internetowej – statycznej – dynamicznej Tworzenie strony internetowej – Technologie i narzędzia Projektowanie witryny – wskazówki Podsumowanie informatyka + 35

36 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 – informatyka + 36

37


Pobierz ppt "Plan wykładu Wprowadzenie Działanie strony internetowej – statycznej – dynamicznej Tworzenie stron internetowych – technologie i narzędzia Projektowanie."

Podobne prezentacje


Reklamy Google