[email protected] Programowanie w Internecie
Programowanie w Internecie Paweł Kasprowski
[email protected]
vL06z
[email protected] Programowanie w Internecie
Aplikacja internetowa Definicja: • Aplikacja uruchamiana na serwerze WWW komunikująca się z użytkownikiem za pomocą przeglądarki internetowej
vL06z
[email protected] Programowanie w Internecie
Zalety aplikacji internetowej • brak konieczności instalacji dodatkowego oprogramowania na komputerach klientów a co za tym idzie mniejsze wymagania co do jakości tych komputerów • łatwość aktualizacji aplikacji – w przypadku zmiany wersji nie trzeba aktualizować plików na każdym komputerze a wystarczy aktualizacja na serwerze • potencjalna możliwość zdalnego korzystania z aplikacji vL06z
[email protected] Programowanie w Internecie
Wady aplikacji internetowej • uboższy interfejs użytkownika (nie wszystko da się zrobić w przeglądarce) • większy nakład pracy projektowej, a co za tym idzie nieco większy koszt wykonania • większe obciążenie serwera (kosztem mniejszego obciążenia komputerów użytkowników)
vL06z
[email protected] Programowanie w Internecie
Plan wykładu • Podstawy: HTML, CSS • Tworzenie aplikacji: JSP • Rozbudowa strony klienta: JavaScript, CSS
vL06z
[email protected] Programowanie w Internecie
Historia WWW • • • • •
1989 – Tim Berners-Lee CERN Wymiana informacji pomiędzy fizykami HTML: HyperText Markup Language HTTP: HyperText Transfer Protocol WWW: World Wide Web
vL06z
[email protected] Programowanie w Internecie
Historia WWW - cd • 1993 – Mosaic – pierwsza przeglądarka WWW • 1994 – powstaje W3C World Wide Web Consortium • 1994 – powstaje firma Netscape Communications Corp. • 1995 – pojawia się Microsoft IE
vL06z
[email protected] Programowanie w Internecie
Zasada działania • • • •
Serwer WWW Przeglądarka internetowa Adres internetowy (DNS, IP) Przeglądarka wysyła żądanie do serwera, serwer zwraca stronę – dokument HTML, wraz z dodatkowymi plikami (obrazki, flash’e, aplety) vL06z
[email protected] Programowanie w Internecie
Język HTML • Tekst + znaczniki (tagi) • Tag: owieranie i zamykanie: ... • Tag: atrybuty • Tagi pojedyncze:
, ale lepiej
vL06z
[email protected] Programowanie w Internecie
Najprostsza strona HTML Tytuł Treść dokumentu
vL06z
[email protected] Programowanie w Internecie
Formatowanie tekstu Adam
Ewa
Adam
Ewa
• Oba kody dają ten sam rezultat: Adam Ewa
vL06z
[email protected] Programowanie w Internecie
Znacznik • Tworzy paragraf tekstu Programowanie w Internecie Programowanie w Internecie
vL06z
[email protected] Programowanie w Internecie
Inne użyteczne tagi - style • • • •
- pogrubienie - pochylenie - nagłowek , - style logiczne domyślnie = = vL06z
[email protected] Programowanie w Internecie
Listy • Lista nienumerowana HTML JSP CSS
• HTML • JSP • CSS
• Lista numerowana HTML JSP CSS
1. HTML 2. JSP 3. CSS vL06z
[email protected] Programowanie w Internecie
Komentarze • Tekst przesyłany do przeglądarki ale nie wyświetlany Plan wykładu HTML JSP CSS vL06z
[email protected] Programowanie w Internecie
Znaki specjalne • Znaki czy & muszą być specjalnie oznaczone, aby pojawiły się na stronie • Zapis: Użycie znacznika
w dokumentach
• Daje na stronie rezultat: Użycie znacznika
w dokumentach vL06z
[email protected] Programowanie w Internecie
Odnośniki - linki • Linki do innych stron Zobacz stronę
• Linki względne Zobacz stronę
• Linki wewnątrzstronicowe Przejdź do wstępu Wstęp
• Linki mailowe Napisz do mnie vL06z
[email protected] Programowanie w Internecie
Znacznik • • Formaty GIF, JPG, PNG • Atrybuty: height, width, alt
vL06z
[email protected] Programowanie w Internecie
Tabele w1k1 w1k2 w1k3 w2k1-2
vL06z
[email protected] Programowanie w Internecie
Table - właściwości • border, width, height, align, cellpadding, cellspacing, colspan, rowspan, th
vL06z
[email protected] Programowanie w Internecie
Wygląd strony • Pierwsze specyfikacje HTMLa pozostawiały wygląd strony użytkownikowi a zajmowały się tylko strukturą dokumentu • Producenci przeglądarek wymusili zmiany wprowadzając atrybuty związane z wyglądem
vL06z
[email protected] Programowanie w Internecie
Definiowanie wyglądu • Atrybuty html’a
• Atrybut style
• Można zapisywać style w osobnym pliku CSS – cascading style sheet
vL06z
[email protected] Programowanie w Internecie
Kaskada styli Plan wykładu HTML JSP ??? Egzamin
vL06z
[email protected] Programowanie w Internecie
Style dla paragrafów To jest pierwszy paragraf tekstu, który zostanie wyświetlony jako czerwony na żółtym tle. To jest drugi paragraf tekstu, który zostanie wyświetlony jako zielony na niebieskim tle.
vL06z
[email protected] Programowanie w Internecie
Style dla paragrafów To jest pierwszy paragraf tekstu, który zostanie wyświetlony jako czerwony na żółtym tle. To jest drugi paragraf tekstu, który zostanie wyświetlony jako zielony na niebieskim tle.
vL06z
[email protected] Programowanie w Internecie
Globalne definiowanie styli • W nagłówku pliku – działa dla każdego tagu w dokumencie ... p {color: #008000; background: #ffff00} ...
vL06z
[email protected] Programowanie w Internecie
Definiowanie styli globalnych • Dla każdego elementu danej klasy p.nagl {color: #008000; background: #ffff00} p.tekst {color: #ff0000; background: #ffffff} ... Tu jest nagłówek Tu jest jakiś zwykły tekst
vL06z
[email protected] Programowanie w Internecie
Style dla czcionek • font-family: czcionka, np.: Arial, Verdana, serif, sansserif • font-size: 12pt (1/72 cala), 12px (pixele), 150% (względem aktualnego), larger, smaller • font-styling: bold, italic, normal • text-decoration: underline, overline, none
vL06z
[email protected] Programowanie w Internecie
Style dla czcionek • Ustawienie czcionek: p { font-family: ”Arial”; font-size: 12px; font-style: italic } lub: p { font: 12px Arial italic; }
vL06z
[email protected] Programowanie w Internecie
Klasy uniwersalne (generic) • Definiowany styl bez przypisywania do konkretnego znacznika .important {color: #ff0000; background: #00ff00}
vL06z
[email protected] Programowanie w Internecie
Znacznik • - rodzaj nawiasu, który można wstawić dowolnie w tekście .important {color: #ff0000; background: #00ff00} ... Znajomość języka HTML jest bardzo użyteczna nawet dla ludzi, którzy nie mają wykształcenia informatycznego.
vL06z
[email protected] Programowanie w Internecie
Znacznik • Po przypisaniu stylu – jest on stosowany dla tekstu wewnątrz .important {color: #ff0000; background: #00ff00} ... Znajomość języka HTML jest bardzo użyteczna nawet dla ludzi, którzy nie mają Wykształcenia informatycznego.
vL06z
[email protected] Programowanie w Internecie
Pliki CSS • Plik CSS zawiera definicje wielu różnych styli dla elementów dokumentu • Plik może być używany w wielu dokumentach ... ... vL06z
[email protected] Programowanie w Internecie
Dynamiczna generacja stron • • • •
CGI – Common Gateway Interface Wejście: adres, parametry Wyjście: tekst strony html Problem: jak przekazać parametry?
vL06z
[email protected] Programowanie w Internecie
Formularze • Możliwość wysyłania danych do serwera • Proste pola edycyjne • Pola bardziej zaawansowane – radio, checkbox, select • ACTION – gdzie wysłać wprowadzone dane
vL06z
[email protected] Programowanie w Internecie
Tworzenie formularzy • Najprostszy formularz: ... Imię:
...
vL06z
[email protected] Programowanie w Internecie
Znaczniki vL06z
[email protected] Programowanie w Internecie
Radiobutton • Wybór jednej z opcji Mężczyzna
Kobieta
vL06z
[email protected] Programowanie w Internecie
Checkbox • Wybór wielu opcji Lubię:
Banany
Ananasy
vL06z
[email protected] Programowanie w Internecie
Właściwości pola INPUT
vL06z
[email protected] Programowanie w Internecie
Pole select • Wybór jednej z wielu opcji drop-down Volvo Saab Fiat Audi
vL06z
[email protected] Programowanie w Internecie
Pole textarea • Edycja większego tekstu Ten tekst można edytować
vL06z
[email protected] Programowanie w Internecie
Metody wysyłania danych • Metoda GET Odpowiednik: http://xyz.pl/start?imie=Adam&nazwisko=Kowalski • Metoda POST Parametry wewnątrz wysyłanego pakietu – brak ograniczeń na wielkość parametrów
vL06z
[email protected] Programowanie w Internecie
Aplikacja CGI • Konieczność generacji całej strony • Program drukujący tekst na standardowym wyjściu • Niewygodne (zwłaszcza, gdy elementy dynamiczne zajmują niewielką część strony) • Wygodniej stworzyć stronę HTML i tylko wstawić elementy generowane dynamicznie
vL06z
[email protected] Programowanie w Internecie
Dynamiczne wstawki do tekstu html Trzy najważniejsze rozwiązania: • PHP – najpopularniejsze, własny język oparty początkowo na języku Perl • ASP – propozycja Microsoft, wstawki w VisualBasic’u • JSP – wstawki w języku Java
vL06z
[email protected] Programowanie w Internecie
Odczytywanie danych • Obiekt request, metoda getParameter(„nazwa”) Witaj
vL06z
[email protected] Programowanie w Internecie
Możliwości JSP • Mieszanie kodu i html’a Numer vL06z
[email protected] Programowanie w Internecie
Możliwości JSP • Mieszanie kodu i html’a Numer vL06z
[email protected] Programowanie w Internecie
Dziękuję za uwagę! Materiały: http://www.w3schools.com/ http://www.w3.org/ http://www.kasprowski.pl vL06z
