Tworzenie serwisow internetowych.NET

Pełen tekst

(1)

(2) Plan zajęć. 24h 4 dni po 6h. informatyka +. 2.

(3) Plan zajęć – dzień 1 • Wykład "Witryna w Internecie – zasady tworzenia i funkcjonowania„ • Prezentacja przykładowych serwisów WWW • Tworzenie dokumentacji projektu – etap pierwszy: scenariusz informatyka +. 3.

(4) Plan zajęć – dzień 2 • Wykład „Sposób podejścia do dużego projektu” • Omówienie przykładu serwisu interaktywnego: repozytorium materiałów • Tworzenie dokumentacji projektu – etap drugi: założenia i wymagania. • Mój własny serwis WWW - etap I. - treść (język HTML), - wygląd (język CSS), - sposób działania (język PHP). informatyka +. 4.

(5) Plan zajęć – dzień 3 • Mój własny serwis WWW - etap I – ciąg dalszy • Mój własny serwis WWW - etap II. Projektowanie i tworzenie bazy danych • Dostęp do bazy danych z poziomu strony internetowej -współpraca PHP z MySQL informatyka +. 5.

(6) Plan zajęć – dzień 4 • Mój własny serwis WWW - etap III. Testowanie, poprawianie i prezentowanie • Tworzenie dokumentacji projektu - etap trzeci: prezentacja działania, wyniki testów, wnioski. informatyka +. 6.

(7)

(8) Plan wykładu. • • • • •. Wprowadzenie Strona w Internecie Tworzenie strony internetowej Dynamiczna strona internetowa Podsumowanie. informatyka +. 8.

(9) Wprowadzenie • Internet, czyli właściwie co? • Historia i przyszłość • Co można znaleźć w Internecie. informatyka +. 9.

(10) Internet, czyli właściwie co? • Internet – największa sieć komputerowa o ogólnoświatowym zasięgu. • Dostęp dla każdego • Internet a intranet. – zasięg – liczba komputerów. informatyka +. 10.

(11) 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 +. 11.

(12) Co można znaleźć w Internecie • Materiały edukacyjne – platformy edukacyjne – otwarte zasoby edukacyjne – multimedialne encyklopedie. • Wirtualne muzea • Obserwacje życia (inne kultury, zwierzęta) – transmisja na żywo obrazu z kamery. • Elektroniczne biblioteki. informatyka +. 12.

(13) Plan wykładu • • • • •. Wprowadzenie Strona w Internecie Tworzenie strony internetowej Dynamiczna strona internetowa Podsumowanie. informatyka +. 13.

(14) Strona w Internecie • Podstawowe pojęcia – strona internetowa – język HTML – serwer – przeglądarka – adres URL. • Zasada działania strony internetowej informatyka +. 14.

(15) Podstawowe pojęcia 1#5 • Strona internetowa – wynik interpretacji dokumentu napisanego w języku HTML • Strona a witryna – liczba stron (podstron) – elementy dodatkowe (portal). informatyka +. 15.

(16) Podstawowe pojęcia 2#5 • Język HTML – język programowania, który służy do tworzenia opisów stron internetowych – zestaw znaczników. <HTML> <HEAD> <TITLE> Prosta strona WWW </TITLE> </HEAD> <BODY> <FONT FACE="Arial"> <CENTER> <H1> Informatyka + </H1> Witajcie na zajęciach Wszechnicy Popołudniowej! </CENTER> </BODY> </HTML>. informatyka +. 16.

(17) Podstawowe pojęcia 3#5 • Serwer – komputer, na którym znajduje się opis strony internetowej, wraz z elementami składowymi (np. obrazkami). informatyka +. 17.

(18) Podstawowe pojęcia 4#5 • Przeglądarka – program służący do pobierania opisu stron internetowych z serwera i wyświetlania ich na ekranie monitora – „tłumaczy” kod HTML na postać oglądaną na ekranie. informatyka +. 18.

(19) Podstawowe pojęcia 5#5 • Adres URL – adres, pod którym jest dostępna konkretna strona internetowa 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). 19.

(20) Zasada działania strony internetowej. informatyka +. 20.


(22) Tworzenie strony internetowej 1#2 • Dlaczego warto znać się na tworzeniu stron internetowych • Co można umieścić – elementy stron internetowych • Planowanie strony • Nie jesteśmy odbiorcami swojej witryny • Jak ludzie widzą witryny internetowe. informatyka +. 22.

(23) Tworzenie strony internetowej 2#2 • Jak ludzie nawigują po Internecie • 5 skutecznych sposobów na odstraszenie użytkowników • 5 sposobów poprawy witryny • Język HTML – drugie spojrzenie – struktura dokumentu HTML. • Hiperłącza • Narzędzia do tworzenia stron. informatyka +. 23.

(24) Dlaczego warto umieć utworzyć stronę internetową • • • •. Przyjemność Codzienność Oszczędność Frajda. http://www.educationworld.com/a_books/images/first_internet.gif. informatyka +. 24.

(25) Co można umieścić – elementy stron internetowych • Tekst • Obrazy – grafika – zdjęcia. • Formularze • Multimedia • Elementy dynamiczne – kalendarz , zegar, horoskop, pogoda …. informatyka +. 25.

(26) Elementy stron internetowych – tekst • Duża wartość informacyjna • Szybkość wyświetlania • Mało atrakcyjny informatyka +. 26.

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

(28) Elementy stron internetowych – formularze • Zbieranie informacji od użytkowników – rejestracja – ankieta. • Zamówienia • Transakcje internetowe Piotr Kopciał informatyka +. 28.

(29) Elementy stron internetowych – multimedia (audio, video). • Najbardziej atrakcyjne. informatyka +. 29.

(30) Elementy dynamiczne • • • • • • • •. Kalendarz Zegar Pogoda Horoskop Waluty Giełda Położenie …. informatyka +. 30.

(31) Kompozycja strony – obramowanie. • Grupowanie informacji • Utrzymanie porządku • Komponowanie zawartości Piotr Kopciał informatyka +. 31.

(32) Projektowanie witryny 1#3 „Nie można kopać dołu na fundamenty, nie mając gotowego projektu domu” • • • •. co chcę umieścić na stronie? co skłoniło mnie od utworzenia własnej strony? do kogo strona jest adresowana? w jaki sposób chcę zaprezentować siebie (swoje hobby, firmę) innym? informatyka +. 32.

(33) 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 +. 33.

(34) Projektowanie witryny 3#3 • Plan na papierze:. Piotr Kopciał informatyka +. 34.

(35) Nie jesteśmy odbiorcami swojej witryny • Nie wszyscy odbiorcy strony są podobni do nas • O naszej witrynie wiemy więcej niż inni • O odbiorcy wiemy mniej, niż nam się wydaje. http://merlin.pl/Smerf-przy-komputerze-figurka_Schleich,images_big,6,SLH-40249.jpg. informatyka +. 35.

(36) 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ć.. • 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 +. 36.

(37) Jak ludzie widzą witryny internetowe • Internauci są niecierpliwi – 15 sekund. • Schemat oglądania strony – 1,2,3. informatyka +. 37.

(38) Jak ludzie nawigują po Internecie •. •. Różne media – różne sposoby korzystania W Internecie nawigujemy jak w wirtualnej przestrzeni – sygnały nawigacyjne – „gdzie przejść” – kursor - przedłużenie ręki. •. Konwergencja mediów. http://nwn.blogs.com/photos/uncategorized/2007/06/07/avairexp05.jpg. informatyka +. 38.

(39) 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 +. 39.

(40) 5 sposobów poprawy witryny •. Skoncentruj się najpierw na działaniu strony, potem na wyglądzie •. •. Myśl o użytkowniku •. •. sprawdzony schemat układu strony. Zwróć uwagę na szczegóły •. •. wczuj się w jego rolę. Projektuj zgodnie z konwencją •. •. kompromis pomiędzy wyglądem a szybkością. błahe, ale kłopotliwe błędy. Testuj •. i poprawiaj według uwag i sugestii użytkowników. informatyka +. 40.

(41) Język HTML – drugie spojrzenie struktura dokumentu HTML <HTML> <HEAD> <TITLE> Prosta strona WWW </TITLE> </HEAD> <BODY> <FONT FACE="Arial"> <CENTER> <H1> Informatyka + </H1> Witajcie na zajęciach Wszechnicy popołudniowej! </CENTER> </BODY> </HTML>. informatyka +. 41.

(42) Hiperłącza. • Nawigacja pomiędzy stronami • Dwa typy łączy – odsyłacze do innych stron naszej witryny – odsyłacze do innych stron w Internecie. informatyka +. 42.

(43) Hiperłącza – przykład 1#2. <HTML> <HEAD> <TITLE> Prosta strona WWW </TITLE> </HEAD> <BODY> <H1> Informatyka + </H1> Witaj na zajęciach Wszechnicy popołudniowej! Więcej na temat programu Informatyka+ znajdziesz na <a href="http://informatykaplus.edu.pl/"> stronie projektu</a> </BODY> </HTML>. informatyka +. 43.

(44) Hiperłącza – przykład 2#2 <a href="http://informatykaplus.edu.pl/">stronie projektu</a>. Piotr Kopciał informatyka +. 44.

(45) Narzędzia do tworzenia stron • Notatnik Windows. •. Piotr Kopciał informatyka +. Edytor HTML. 45.


(47) Dynamiczna strona internetowa • Zasada działania strony dynamicznej • Strony statyczne a strony dynamiczne • Tworzenie stron dynamicznych - języki skryptowe • Interakcja z użytkownikiem wizytówką nowoczesnych stron internetowych. informatyka +. 47.

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

(49) 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 +. 49.

(50) 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 +. 50.

(51) 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 +. 51.

(52) Interakcja z użytkownikiem wizytówką nowoczesnych stron internetowych 1#2 • Strony interaktywne obsługują sesję użytkownika – sesja to system przechowywania informacji o użytkowniku (np. zawartość koszyka w e-sklepie). • Treść strony może się zmieniać w zależności od: – – – – –. profilu użytkownika wprowadzonych danych przeglądarki czasu, pory dnia położenia geograficznego. informatyka +. 52.

(53) Interakcja z użytkownikiem wizytówką nowoczesnych stron internetowych 2#2 podświetlanie przycisków po najechaniu kursorem myszy zmiana kształtu kursora myszy pojawianie się okien dialogowych mechanizm przeciągnij-i-upuść manipulowanie grafiką (np. przełączanie obrazków) uruchamianie wyskakujących okienek (np. pojawianie się okienka informacyjnego, gdy użytkownik umieści wskaźnik myszy na obrazku) • przesuwanie mapy • zwijanie i rozwijanie menu • • • • • •. informatyka +. 53.

(54) Przykłady serwisów interaktywnych 1#4. • Serwis aukcyjny – – – – –. zróżnicowana oferta tworzenie aukcji interaktywna pomoc system płatności komentarze. Piotr Kopciał informatyka +. 54.

(55) Przykłady serwisów interaktywnych 2#4 • Google Suggest – największa wyszukiwarka na świecie – ponad 8 mld stron – suggest znaczy sugestie – aktualizacja z każdym klawiszem. informatyka +. 55.

(56) Przykłady serwisów interaktywnych 3#4. informatyka +. 56.

(57) Przykłady serwisów interaktywnych 4#4 • Google Maps – połączenie wyszukiwarki z przeglądarką map – przesuwanie – powiększanie bez odrywania wzroku – okna pop-up – trasa – satelita, teren, mapa Piotr Kopciał informatyka +. 57.


(59) 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 +. 59.

(60) Co dalej?. Zajęcia Informatyka+ o podobnej tematyce • Techniki Internetu wykład 2h + warsztat 3h, Wszechnica Poranna. • Wyszukiwanie treści multimedialnych wykład 2h, Wszechnica Popołudniowa. • Praktyka Internetu warsztaty 24h, Wszechnica na Kołach. • Tworzenie serwisów internetowych warsztaty 24h, Kuźnia Talentów. informatyka +. 60.

(61)

(62)