Download
1 / 37
370 likes | 517 Views
Plan wykładu. Wprowadzenie Działanie strony internetowej statycznej dynamicznej Tworzenie stron internetowych technologie i narzędzia Projektowanie witryny wskazówki Podsumowanie. Przykłady witryn i serwisów utworzonych przez uczniów Informatyka+. Historia i przyszłość.
E N D
Plan wykładu • Wprowadzenie • Działanie strony internetowej • statycznej • dynamicznej • Tworzenie stron internetowych • technologie i narzędzia • Projektowanie witryny • wskazówki • Podsumowanie informatyka +
Przykłady witryn i serwisów utworzonych przez uczniów Informatyka+ 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 +
Plan wykładu • Wprowadzenie • Działanie strony internetowej • statycznej • dynamicznej • Tworzenie stron internetowych • technologie i narzędzia • Projektowanie witryny • wskazówki • Podsumowanie informatyka +
Podstawowe pojęcia 1#3 • Strona internetowa – wynik interpretacji dokumentu HTML • Strona a witryna, serwis, portal • Przeglądarka – „tłumaczy” kod HTML na postać oglądaną na ekranie <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 2#3 • Serwer – komputer, na którym znajduje się opis strony internetowej, wraz z elementami składowymi (grafika, pliki do pobrania) informatyka +
Podstawowe pojęcia 3#3 • Adres URL – unikatowy adres, pod którym jest dostępna konkretna strona internetowa • Struktura adresu URL http://www.informatykaplus.edu.pl/upload/dokumenty/regulamin.pdf informatyka +
Zasada działania strony internetowej • Architektura klient – serwer 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 +
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 +
Plan wykładu • Wprowadzenie • Działanie stron internetowych • statycznych • dynamicznych • Tworzenie stron internetowych • technologie i narzędzia • Projektowanie witryny • wskazówki • Podsumowanie informatyka +
Od czego zacząć?.. -> HTML • Kurs HTML w Internecie • http://www.kurshtml.boo.pl/ • Edytor • Notepad++ Piotr Kopciał informatyka +
Następny krok.. -> CSSCascading Style Sheets – kaskadowe arkusze stylów • Przykłady • Kurs CSS w Internecie • http://www.kurshtml.boo.pl/css/ Piotr Kopciał informatyka +
Witryna na skróty – szablony w Internecie http://www.opendesigns.org/ Piotr Kopciał informatyka +
PHP & MySQL • PHP – ang. Hypertext Preprocessor – skryptowy język programowania po stronie serwera używany do tworzenia dynamicznych stron internetowych • MySQL - system relacyjnych baz danych, wspierający działanie dynamicznych stron internetowych • Przykład • Kurs PHP w Internecie • http://phpkurs.pl/ Piotr Kopciał informatyka +
ASP.NET & MS SQL Serwer • ASP.NET – platforma firmy Microsoft, służąca do tworzenia dynamicznych stron internetowych, aplikacji oraz usług sieciowych • Microsoft Visual Web Developer 2008 Express Edition • http://www.microsoft.com/express/vwd/ • ASP.NET w Internecie • http://www.asp.net/learn/ Piotr Kopciał informatyka +
Plan wykładu • Wprowadzenie • Działanie strony internetowej • statycznej • dynamicznej • Tworzenie strony internetowej • Technologie i narzędzia • Projektowanie witryny • wskazówki • Podsumowanie 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? • 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 +
Jak ludzie widzą witryny internetowe • Internauci są niecierpliwi • 15 sekund • Schemat oglądania strony • 1,2,3 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ć. • Nie wszyscy odbiorcy strony są podobni do nas • O swojej witrynie wiemy więcej niż inni • O odbiorcy wiemy mniej, niż nam się wydaje • 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 +
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 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 +
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 +
Plan wykładu • Wprowadzenie • Działanie strony internetowej • statycznej • dynamicznej • Tworzenie strony internetowej • Technologie i narzędzia • Projektowanie witryny • wskazówki • Podsumowanie informatyka +
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 +
