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