1 / 61

Plan zajęć

Plan zajęć. 24h 4 dni po 6h. 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. Plan zajęć – dzień 2.

aletta
Télécharger la présentation

Plan zajęć

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 +

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

  8. 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 +

  9. Historia i przyszłość • 1969 Pierwsza sieć ARPANet (50 lat temu!) • przeznaczenie militarne • Paul Baran • 1971/72 protokół poczty elektronicznej • Ray Tomlinson • 1983Narodziny 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 +

  10. 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 +

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

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

  13. 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 +

  14. 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> Prostastrona WWW </TITLE> </HEAD> <BODY> <FONT FACE="Arial"> <CENTER> <H1> Informatyka + </H1> Witajcie na zajęciach Wszechnicy Popołudniowej! </CENTER> </BODY> </HTML> informatyka +

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

  16. 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 +

  17. 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 informatyka +

  18. Zasada działania strony internetowej informatyka +

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

  20. 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 +

  21. 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 +

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

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

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

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

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

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

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

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

  30. 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 +

  31. 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 +

  32. Projektowanie witryny 3#3 • Plan na papierze: Piotr Kopciał informatyka +

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

  34. 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 +

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

  36. 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 +

  37. 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 +

  38. 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 +

  39. Język HTML – drugie spojrzeniestruktura dokumentu HTML <HTML> <HEAD> <TITLE> Prostastrona WWW </TITLE> </HEAD> <BODY> <FONT FACE="Arial"> <CENTER> <H1> Informatyka + </H1> Witajcie na zajęciach Wszechnicy popołudniowej! </CENTER> </BODY> </HTML> informatyka +

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

  41. 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 +

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

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

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

  45. 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 +

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

  47. 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 +

  48. Strony statyczne a strony dynamiczne 2#2 informatyka +

More Related