1 / 37

Plan wykładu

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ść.

Download Presentation

Plan wykładu

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 wykładu • Wprowadzenie • Działanie strony internetowej • statycznej • dynamicznej • Tworzenie stron internetowych • technologie i narzędzia • Projektowanie witryny • wskazówki • Podsumowanie informatyka +

  2. Przykłady witryn i serwisów utworzonych przez uczniów Informatyka+ informatyka +

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

  4. Plan wykładu • Wprowadzenie • Działanie strony internetowej • statycznej • dynamicznej • Tworzenie stron internetowych • technologie i narzędzia • Projektowanie witryny • wskazówki • Podsumowanie informatyka +

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

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

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

  8. Zasada działania strony internetowej • Architektura klient – serwer informatyka +

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

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

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

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

  13. Plan wykładu • Wprowadzenie • Działanie stron internetowych • statycznych • dynamicznych • Tworzenie stron internetowych • technologie i narzędzia • Projektowanie witryny • wskazówki • Podsumowanie informatyka +

  14. Od czego zacząć?.. -> HTML • Kurs HTML w Internecie • http://www.kurshtml.boo.pl/ • Edytor • Notepad++ Piotr Kopciał informatyka +

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

  16. Witryna na skróty – szablony w Internecie http://www.opendesigns.org/ Piotr Kopciał informatyka +

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

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

  19. Plan wykładu • Wprowadzenie • Działanie strony internetowej • statycznej • dynamicznej • Tworzenie strony internetowej • Technologie i narzędzia • Projektowanie witryny • wskazówki • Podsumowanie informatyka +

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

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

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

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

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

  25. Elementy stron internetowych • Tekst • Obrazy • grafika • zdjęcia • Formularze • Multimedia • Elementy dynamiczne • kalendarz , zegar, horoskop, pogoda … informatyka +

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

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

  28. Elementy stron internetowych – formularze • Zbieranie informacji od użytkowników • rejestracja • ankieta • zamówienia • transakcje Piotr Kopciał informatyka +

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

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

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

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

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

  34. Plan wykładu • Wprowadzenie • Działanie strony internetowej • statycznej • dynamicznej • Tworzenie strony internetowej • Technologie i narzędzia • Projektowanie witryny • wskazówki • Podsumowanie informatyka +

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

More Related