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

Podobne dokumenty
Plan wykładu. Wprowadzenie Działanie strony internetowej. Tworzenie stron internetowych. Projektowanie witryny

Plan prezentacji. Wprowadzenie Przesyłanie Informacji w Internecie Funkcjonowanie stron internetowych Działanie narzędzi internetowych.

Wszechnica Popołudniowa: Multimedia, grafika i technologie internetowe Witryna w Internecie zasady tworzenia i funkcjonowania.

Plan wykładu. Wprowadzenie Multimedia Wyszukiwanie informacji Internecie Wyszukiwanie multimediów Internecie Podsumowanie.

Tematyka i rozwiązania metodyczne kolejnych zajęć lekcyjnych wraz z ćwiczeniami.

HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

World Wide Web? rkijanka

SIECI KOMPUTEROWE. Podstawowe wiadomości

Tworzenie stron WWW PROGRAM AUTORSKI. Spis treści ZAJĘCIA POZALEKCYJNE KÓŁKO INFORMATYCZNE

Strona wizytówka od 400 zł

Tomasz Grześ. Systemy zarządzania treścią, cz. II

Kuźnia Talentów Informatycznych: Multimedia, grafika i technologie internetowe Tworzenie serwisów internetowych. Piotr Kopciał

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Aplikacje internetowe - opis przedmiotu

Informatyka kl. 1. Semestr I

Pokaz slajdów na stronie internetowej

Tworzenie aplikacji Web Alicja Zwiewka. Page 1

Wstęp 5 Rozdział 1. Przeglądarki 7

KARTA PRZEDMIOTU. Programowanie aplikacji internetowych

E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści

E-commerce. Genialnie proste tworzenie serwisów w PHP i MySQL.

3.1. Na dobry początek

MAMP: Można to pobrać i zainstalować z XAMPP: Można go pobrać i zainstalować z

Liczba kont w systemie Bezpłatna przestrzeń dyskowa 1 GB 1 GB 1 GB

Programowanie dla początkujących w 24 godziny / Greg Perry, Dean Miller. Gliwice, cop Spis treści

Pierwsza strona internetowa

PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH. KL IV TI 6 godziny tygodniowo (6x15 tygodni =90 godzin ),

Wymagania edukacyjne z informatyki dla cyklu dwugodzinnego 1h tygodniowo w pierwszym roku nauczania


Witryny i aplikacje internetowe - rozkład godzin dla technikum informatycznego

Funkcje aplikacji. strona 1

Wprowadzenie do programowania www

Logowanie do aplikacji TETA Web. Instrukcja Użytkownika

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr )

OGŁOSZENIE O ZAMÓWIENIU O WARTOŚCI PONIŻEJ EURO. Zn. spr. ZG /2014

PRZEWODNIK PO PRZEDMIOCIE

Sprawozdanie Sieci komputerowe i bazy danych Laboratorium nr 4

Proporcje podziału godzin na poszczególne bloki. Tematyka lekcji. Rok I. Liczba godzin. Blok

Przewodnik... Tworzenie Landing Page

PROGRAM NAUCZANIA DLA I I II KLASY GIMNAZJUM

Plan nauczania informatyki Opracował: mgr Daniel Starego

Imię, nazwisko i tytuł/stopień KOORDYNATORA (-ÓW) kursu/przedmiotu zatwierdzającego protokoły w systemie USOS Dr Adam Naumowicz

SZCZEGÓŁOWY PROGRAM SZKOLENIA WARSZAWA,

Wymagania edukacyjne z informatyki w klasie IIIa gimnazjum

Aplikacja (oprogramowanie) będzie umożliwiać przygotowanie, przeprowadzenie badania oraz analizę wyników według określonej metody.

Pełna specyfikacja usługi Kreator WWW

Baza wiedzy instrukcja

KONFIGURACJA PRZEGLĄDAREK. Poniższa konfiguracja dedykowana jest dla Bankowości Internetowej SGB

INFORMATYKA MÓJ SPOSÓB NA POZNANIE I OPISANIE ŚWIATA PROGRAM NAUCZANIA INFORMATYKI Z ELEMENTAMI PRZEDMIOTÓW MATEMATYCZNO-PRZYRODNICZYCH

Pakiety podstawowe. Cena: 8750 zł netto

Przygotowanie do nowoczesnego programowania po stronie przeglądarki. (HTML5, CSS3, JS, wzorce, architektura, narzędzia)

KATEGORIA OBSZAR WIEDZY

Sieci Komputerowe i Bazy Danych

INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ

VectraPortal. VectraPortal. wersja Instrukcja użytkownika Podstawowa funkcjonalność serwisu. [czerwiec 2016]

Hot Potatoes. Zdania z lukami Przyporządkowanie. Tworzy spis wszystkich zadań. Krzyżówki

Edycja strony: W edycję danej strony wchodzimy poprzez naciśnięcie opcji

Program szkolnego koła informatycznego

katalog Usługi internetowe SERWERY WIRTUALNE

Publikacja zdjęć w sieci wykorzystanie Picasa Web Albums

WYMAGANIA NA POSZCZEGÓLNE OCENY Z ZAJĘĆ INFORMATYCZNYCH DLA UCZNIÓW KL. IV. DOSTOSOWANE DO PROGRAMU NAUCZANIA INFORMATYKA EUROPEJCZYKA

Wymagania dla cyklu dwugodzinnego w ujęciu tabelarycznym. Gimnazjum nr 1 w Miechowie

Aplikacje Internetowe

PROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, O STRUKTURZE PRZEDMIOTOWEJ

Tworzenie prezentacji multimedialnej Microsoft PowerPoint

RFP. Wymagania dla projektu. sklepu internetowego B2C dla firmy Oplot

STRONY INTERNETOWE mgr inż. Adrian Zapała

FORMULARZ WWW. Nazwa firmy.. / tel.:... Profil działalności:

Opis techniczny i schemat funkcjonalności aplikacji na info-kioski TRAKT KRÓLEWSKI W GNIEŹNIE

1 IMAP czy POP3? 2 Instalacja programu Mozilla Thunderbird

WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I

Cechy systemu X Window: otwartość niezależność od producentów i od sprzętu, dostępny kod źródłowy; architektura klient-serwer;

Nowoczesne projektowanie aplikacji intrnetowych - opis przedmiotu

Kryteria ocen zajęcia komputerowe klasa 4

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Pełna specyfikacja usługi Kreator WWW

Rozkład materiału nauczania z przedmiotu INFORMATYKA. dla gimnazjum

Tomasz Greszata - Koszalin

DZIENNIK ZAJĘĆ POZALEKCYJNYCH

SPIS TREŚCI. Sposób pierwszy... 3 Sposób drugi Ikony banków Ikony dostawców Strona1

Spis treści. Od autorów / 9

Projektowanie Skinów w programie Taboret2

Pytanie: Odpowiedź: Pytanie: Odpowiedź: . Pytanie: Odpowiedź: Pytanie: element multimedialny lub interaktywny Odpowiedź: Pytanie:

Tematy lekcji zajęć komputerowych klasa 5b grupa 1 i grupa 2

Informatyka Studia II stopnia

NAZWA PRZEDMIOTU/MODUŁU KSZTAŁCENIA: Projektowanie serwisów internetowych

PLAN WYNIKOWY Z INFORMATYKI DLA KLASY VI

Od autorki Regulamin szkolnej pracowni komputerowej Oznaczenia ROZDZIAŁ 1. Zastosowanie komputera w życiu codziennym

Sposoby wyszukiwania multimedialnych zasobów w Internecie

Ja i moje zainteresowania tworzenie własnej strony internetowej

Technologie Internetowe Raport z wykonanego projektu Temat: Internetowy sklep elektroniczny

Rozkład materiału realizacji informatyki w szkole podstawowej w wymiarze 2 godzin w cyklu trzyletnim

Internet. Æwiczenia praktyczne. Wydanie II

Opis przedmiotu zamówienia strona internetowa

Szczegółowy wywiad potrzebny do opracowania wyceny strony internetowej

I. Informacje ogólne. Jednym z takich systemów jest Mambo.

Transkrypt:

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:// https:// nazwa protokołu sieciowego (sposobu przesyłania danych z serwera do przeglądarki) nazwa_serwera.pl/ katalog/ plik.html plik.pdf nazwa domenowa serwera, z którego zostanie pobrany dokument HTML (wyświetlony jako strona) nazwa folderu (katalogu) na serwerze nazwa pobieranego pliku (dokumentu HTML) znajdującego się w tym folderze (katalogu) informatyka + 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

Tekst Obrazy grafika zdjęcia Formularze Multimedia Co można umieścić elementy stron internetowych 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

Plan na papierze: Projektowanie witryny 3#3 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 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 + 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 Edytor HTML Piotr Kopciał informatyka + 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 Zalety Strony statyczne Strony dynamiczne - nie można szybko zmienić treści - interakcja z użytkownikiem bardzo ograniczona - trudniej je utworzyć (języki skryptowe są trudniejsze do opanowania niż HTML) - wymagają bazy danych na serwerze - łatwo je utworzyć (kod HTML) - ł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

Literatura Nauka projektowania stron internetowych 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