Plan zaj 24 h 4 dni po 6
- Slides: 61
Plan zajęć 24 h 4 dni po 6 h 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 My. SQL 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 … 201 x 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> <H 1> Informatyka + </H 1> 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 informatyka + Piotr Kopciał 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 informatyka + Piotr Kopciał 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: informatyka + Piotr Kopciał 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/avairexp 05. 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> <H 1> Informatyka + </H 1> 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> <H 1> Informatyka + </H 1> 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> informatyka + Piotr Kopciał 44
Narzędzia do tworzenia stron • Notatnik Windows • informatyka + Piotr Kopciał 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> <H 1> Informatyka + </H 1> 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 informatyka + Piotr Kopciał 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 informatyka + Piotr Kopciał 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 2 h + warsztat 3 h, Wszechnica Poranna • Wyszukiwanie treści multimedialnych wykład 2 h, Wszechnica Popołudniowa • Praktyka Internetu warsztaty 24 h, Wszechnica na Kołach • Tworzenie serwisów internetowych warsztaty 24 h, Kuźnia Talentów informatyka + 60
- Rodzice roberta mają na działce truskawki
- Dlaczego wielki post trwa 40 dni
- Závod a je schopen splnit zakázku za 12 dní
- Dni se krátily
- Dni których nie znamy podkład
- Ludova a pololudova piesen
- Bajka o maszynie cyfrowej co ze smokiem walczyła
- Dan dni dbn
- Obiad niedziela wielkanocna
- Z jakich konkurencji składa się dziesięciobój
- Ján smrek cválajúce dni rozbor
- Mormonstvo
- 1000 pierwszych dni
- Dni sielawy chrzypsko
- Ja som s vami po všetky dni
- "pierwszych dni" "szkole"
- 5.dni primarnej pediatrie
- Michel thomas metoda
- Problem solving plan plan b flowchart
- Academic field trip plan a plan b
- Long term plan and short term plan
- Problem solving plan (plan b flowchart)
- Duration of micro lesson plan
- Problem solving plan (plan b flowchart)
- New jersey plan vs virginia plan
- Cargo stowage plan adalah
- Penentuan lokasi dan tata letak (layout)
- God's plan versus man's plan
- Virginia plan and new jersey plan venn diagram
- Constitutional convention compromise
- People don t plan to fail they fail to plan
- Business overview template
- Biznis plan za kozmeticki salon
- Study plan sample
- Social media strategy executive summary
- Planlama türleri
- Schlieffen plan ww1
- Business plans derby
- Backward mapping template
- Behavior plan examples
- Wrap crisis plan examples
- Plan prezentacji multimedialnej
- Gender action plan world bank
- Gender action plan world bank
- Nhgri strategic plan
- Hit plan
- Wbs for planning a trip
- Planning strategies
- Compensation plan doterra
- Ia diploma resp
- What was the goal of stalins 5 year plan
- Wellness recovery action plan examples
- Plan prodaje primer
- What is the purpose of business plan?
- Pretest: developing an academic and career plan
- Three feet plan
- Counselling action plan
- Career plan presentation example
- Bizplanbuilder
- 7elife ka plan
- Qualified producer herbalife
- House breakout plan