plan wykładu
DESCRIPTION
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ść. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/1.jpg)
![Page 2: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/2.jpg)
Plan wykładu
• Wprowadzenie• Działanie strony internetowej
– statycznej– dynamicznej
• Tworzenie stron internetowych– technologie i narzędzia
• Projektowanie witryny– wskazówki
• Podsumowanie
informatyka + 2
![Page 3: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/3.jpg)
Przykłady witryn i serwisów utworzonych przez uczniów Informatyka+
informatyka + 3
![Page 4: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/4.jpg)
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 + 4
![Page 5: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/5.jpg)
Plan wykładu
• Wprowadzenie• Działanie strony internetowej
– statycznej– dynamicznej
• Tworzenie stron internetowych– technologie i narzędzia
• Projektowanie witryny– wskazówki
• Podsumowanie
informatyka + 5
![Page 6: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/6.jpg)
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
informatyka + 6
<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>
![Page 7: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/7.jpg)
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
![Page 8: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/8.jpg)
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
http://
https://
nazwa_serwera.pl/ katalog/ plik.html
plik.pdf
nazwa protokołu sieciowego (sposobu przesyłania danych z serwera do przeglądarki)
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 + 8
![Page 9: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/9.jpg)
Zasada działania strony internetowej
informatyka + 9
• Architektura klient – serwer
![Page 10: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/10.jpg)
Zasada działania strony dynamicznej
• Opis strony dynamicznej jest tworzony przez serwer w momencie, kiedy użytkownik zażąda jej wyświetlenia
informatyka + 10
![Page 11: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/11.jpg)
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
![Page 12: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/12.jpg)
Strony statyczne a strony dynamiczne 2#2
Wady Zalety
Strony statyczne
- nie można szybko zmienić treści- interakcja z użytkownikiem bardzo ograniczona
- łatwo je utworzyć (kod HTML)
Strony dynamiczne
- 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 + 12
![Page 13: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/13.jpg)
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
![Page 14: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/14.jpg)
Plan wykładu
• Wprowadzenie• Działanie stron internetowych
– statycznych– dynamicznych
• Tworzenie stron internetowych– technologie i narzędzia
• Projektowanie witryny– wskazówki
• Podsumowanie
informatyka + 14
![Page 15: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/15.jpg)
Od czego zacząć?.. -> HTML
Piotr Kopciałinformatyka + 15
• Kurs HTML w Internecie– http://www.kurshtml.boo.pl/
• Edytor– Notepad++
![Page 16: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/16.jpg)
Następny krok.. -> CSS
Cascading Style Sheets – kaskadowe arkusze stylów
Piotr Kopciałinformatyka + 16
• Przykłady
• Kurs CSS w Internecie– http://www.kurshtml.boo.pl/css/
![Page 17: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/17.jpg)
Witryna na skróty – szablony w Internecie
Piotr Kopciałinformatyka + 17
http://www.opendesigns.org/
![Page 18: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/18.jpg)
PHP & MySQL
Piotr Kopciałinformatyka + 18
• 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/
![Page 19: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/19.jpg)
• 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/
ASP.NET & MS SQL Serwer
Piotr Kopciałinformatyka + 19
![Page 20: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/20.jpg)
Plan wykładu
• Wprowadzenie• Działanie strony internetowej
– statycznej– dynamicznej
• Tworzenie strony internetowej– Technologie i narzędzia
• Projektowanie witryny– wskazówki
• Podsumowanie
informatyka + 20
![Page 21: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/21.jpg)
„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?
Projektowanie witryny 1#3
informatyka + 21
![Page 22: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/22.jpg)
• 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
Projektowanie witryny 2#3
informatyka + 22
![Page 23: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/23.jpg)
• Plan na papierze:
Piotr Kopciał
Projektowanie witryny 3#3
informatyka + 23
![Page 24: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/24.jpg)
Jak ludzie widzą witryny internetowe
informatyka + 24
• Internauci są niecierpliwi– 15 sekund
• Schemat oglądania strony– 1,2,3
![Page 25: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/25.jpg)
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
![Page 26: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/26.jpg)
Elementy stron internetowych
• Tekst• Obrazy
– grafika– zdjęcia
• Formularze• Multimedia• Elementy dynamiczne
– kalendarz , zegar, horoskop, pogoda …
informatyka + 26
![Page 27: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/27.jpg)
Elementy stron internetowych – tekst
informatyka + 27
• Duża wartość informacyjna
• Szybkość wyświetlania
• Mało atrakcyjny
![Page 28: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/28.jpg)
Elementy stron internetowych – obrazy (grafika, zdjęcia)
informatyka + 28
• Przyciąga uwagę
• Możliwość powiększania zdjęć
• Szybkość wyświetlania
![Page 29: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/29.jpg)
Elementy stron internetowych – formularze
Piotr Kopciałinformatyka + 29
• Zbieranie informacji od użytkowników– rejestracja– ankieta– zamówienia– transakcje
![Page 30: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/30.jpg)
Elementy stron internetowych – multimedia (audio, video)
informatyka + 30
• Najbardziej atrakcyjne
![Page 31: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/31.jpg)
Elementy dynamiczne
• Kalendarz• Zegar• Pogoda • Horoskop• Waluty• Giełda• Położenie• …
informatyka + 31
![Page 32: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/32.jpg)
Kompozycja strony – obramowanie
Piotr Kopciałinformatyka + 32
• Grupowanie informacji
• Utrzymanie porządku
• Komponowanie zawartości
![Page 33: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/33.jpg)
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
![Page 34: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/34.jpg)
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
![Page 35: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/35.jpg)
Plan wykładu
• Wprowadzenie• Działanie strony internetowej
– statycznej– dynamicznej
• Tworzenie strony internetowej– Technologie i narzędzia
• Projektowanie witryny– wskazówki
• Podsumowanie
informatyka + 35
![Page 36: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/36.jpg)
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 + 36
![Page 37: Plan wykładu](https://reader033.vdocuments.pub/reader033/viewer/2022042822/5681430c550346895daf5dda/html5/thumbnails/37.jpg)