View
35
Download
1
Category
Preview:
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 Presentation
Citation preview
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
• 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
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
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>
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
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
Zasada działania strony internetowej
informatyka + 9
• Architektura klient – serwer
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
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
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
Piotr Kopciałinformatyka + 15
• Kurs HTML w Internecie– http://www.kurshtml.boo.pl/
• Edytor– Notepad++
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/
Witryna na skróty – szablony w Internecie
Piotr Kopciałinformatyka + 17
http://www.opendesigns.org/
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/
• 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
Plan wykładu
• Wprowadzenie• Działanie strony internetowej
– statycznej– dynamicznej
• Tworzenie strony internetowej– Technologie i narzędzia
• Projektowanie witryny– wskazówki
• Podsumowanie
informatyka + 20
„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
• 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
• Plan na papierze:
Piotr Kopciał
Projektowanie witryny 3#3
informatyka + 23
Jak ludzie widzą witryny internetowe
informatyka + 24
• Internauci są niecierpliwi– 15 sekund
• Schemat oglądania strony– 1,2,3
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
informatyka + 27
• Duża wartość informacyjna
• Szybkość wyświetlania
• Mało atrakcyjny
Elementy stron internetowych – obrazy (grafika, zdjęcia)
informatyka + 28
• Przyciąga uwagę
• Możliwość powiększania zdjęć
• Szybkość wyświetlania
Elementy stron internetowych – formularze
Piotr Kopciałinformatyka + 29
• Zbieranie informacji od użytkowników– rejestracja– ankieta– zamówienia– transakcje
Elementy stron internetowych – multimedia (audio, video)
informatyka + 30
• Najbardziej atrakcyjne
Elementy dynamiczne
• Kalendarz• Zegar• Pogoda • Horoskop• Waluty• Giełda• Położenie• …
informatyka + 31
Kompozycja strony – obramowanie
Piotr Kopciałinformatyka + 32
• Grupowanie informacji
• Utrzymanie porządku
• Komponowanie zawartości
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 + 36
Recommended