Tworzenie serwisów internetowych
advertisement
Plan zajęć 24h 4 dni po 6h informatyka + 2 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 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 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 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 Plan wykładu • • • • • Wprowadzenie Strona w Internecie Tworzenie strony internetowej Dynamiczna strona internetowa Podsumowanie informatyka + 8 Wprowadzenie • Internet, czyli właściwie co? • Historia i przyszłość • Co można znaleźć w Internecie informatyka + 9 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 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 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 Plan wykładu • • • • • Wprowadzenie Strona w Internecie Tworzenie strony internetowej Dynamiczna strona internetowa Podsumowanie informatyka + 13 Strona w Internecie • Podstawowe pojęcia – strona internetowa – język HTML – serwer – przeglądarka – adres URL • Zasada działania strony internetowej informatyka + 14 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 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 Podstawowe pojęcia 3#5 • Serwer – komputer, na którym znajduje się opis strony internetowej, wraz z elementami składowymi (np. obrazkami) informatyka + 17 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 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 Zasada działania strony internetowej informatyka + 20 Plan wykładu • • • • • Wprowadzenie Strona w Internecie Tworzenie strony internetowej Dynamiczna strona internetowa Podsumowanie informatyka + 21 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 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 Dlaczego warto umieć utworzyć stronę internetową • • • • Przyjemność Codzienność Oszczędność Frajda http://www.educationworld.com/a_books/images/first_internet.gif informatyka + 24 Co można umieścić – elementy stron internetowych • Tekst • Obrazy – grafika – zdjęcia • Formularze • Multimedia • Elementy dynamiczne – kalendarz , zegar, horoskop, pogoda … informatyka + 25 Elementy stron internetowych – tekst • Duża wartość informacyjna • Szybkość wyświetlania • Mało atrakcyjny informatyka + 26 Elementy stron internetowych – obrazy (grafika, zdjęcia) • Przyciąga uwagę • Możliwość powiększania zdjęć • Szybkość wyświetlania informatyka + 27 Elementy stron internetowych – formularze • Zbieranie informacji od użytkowników – rejestracja – ankieta • Zamówienia • Transakcje internetowe Piotr Kopciał informatyka + 28 Elementy stron internetowych – multimedia (audio, video) • Najbardziej atrakcyjne informatyka + 29 Elementy dynamiczne • • • • • • • • Kalendarz Zegar Pogoda Horoskop Waluty Giełda Położenie … informatyka + 30 Kompozycja strony – obramowanie • Grupowanie informacji • Utrzymanie porządku • Komponowanie zawartości Piotr Kopciał informatyka + 31 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 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 Projektowanie witryny 3#3 • Plan na papierze: Piotr Kopciał informatyka + 34 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 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 Jak ludzie widzą witryny internetowe • Internauci są niecierpliwi – 15 sekund • Schemat oglądania strony – 1,2,3 informatyka + 37 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 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 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 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 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 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 Hiperłącza – przykład 2#2 <a href="http://informatykaplus.edu.pl/">stronie projektu</a> Piotr Kopciał informatyka + 44 Narzędzia do tworzenia stron • Notatnik Windows • Piotr Kopciał informatyka + Edytor HTML 45 Plan wykładu • • • • • Wprowadzenie Strona w Internecie Tworzenie strony internetowej Dynamiczna strona internetowa Podsumowanie informatyka + 46 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 Zasada działania strony dynamicznej • Opis strony dynamicznej jest tworzony przez serwer w momencie, kiedy użytkownik zażąda jej wyświetlenia informatyka + 48 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 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 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 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 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 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 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 Przykłady serwisów interaktywnych 3#4 informatyka + 56 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 Plan wykładu • • • • • Wprowadzenie Strona w Internecie Tworzenie strony internetowej Dynamiczna strona internetowa Podsumowanie informatyka + 58 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 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
