Programowanie w Internecie Paweł Kasprowski pawel@kasprowski.pl
Aplikacja internetowa Definicja: Aplikacja uruchamiana na serwerze WWW komunikująca się z użytkownikiem za pomocą przeglądarki internetowej
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
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)
Plan wykładu Podstawy: HTML, CSS Tworzenie aplikacji: JSP Rozbudowa strony klienta: JavaScript, CSS
Historia WWW 1989 Tim Berners-Lee CERN Wymiana informacji pomiędzy fizykami HTML: HyperText Markup Language HTTP: HyperText Transfer Protocol WWW: World Wide Web
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
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)
Język HTML Tekst + znaczniki (tagi) Tag: owieranie i zamykanie: <tag>...</tag> Tag: atrybuty <tag atrybut1= wartość atrybut2= w2 > Tagi pojedyncze: <br>, ale lepiej <br />
Najprostsza strona HTML <html> <head> <title>tytuł</title> </head> <body> Treść dokumentu </body> </html>
Formatowanie tekstu Adam<br>Ewa Adam <br> Ewa Oba kody dają ten sam rezultat: Adam Ewa
Znacznik <p> Tworzy paragraf tekstu <body> <p>programowanie w Internecie</p> <p> Programowanie w Internecie </p> </body>
Inne użyteczne tagi - style <b> - pogrubienie <i> - pochylenie <hx> - nagłowek <strong>, <em> - style logiczne domyślnie <strong> = <b> <em> = <i>
Listy Lista nienumerowana <ul> <li>html</li> <li>jsp</li> <li>css</li> </ul> Lista numerowana <ol> <li>html</li> <li>jsp</li> <li>css</li> </ol> HTML JSP CSS 1. HTML 2. JSP 3. CSS
Komentarze Tekst przesyłany do przeglądarki ale nie wyświetlany <h1>plan wykładu</h1> <ul> <!- teraz zaczyna się lista -> <li>html</li> <li>jsp</li> <li>css</li> </ul>
Znaki specjalne Znaki <, > czy & muszą być specjalnie oznaczone, aby pojawiły się na stronie Zapis: Użycie znacznika <br> w dokumentach Daje na stronie rezultat: Użycie znacznika <br> w dokumentach
Odnośniki - linki Linki do innych stron <a href= http://www.strona.pl >Zobacz stronę</a> Linki względne <a href= info.html >Zobacz stronę</a> Linki wewnątrzstronicowe <a href= #wstep >Przejdź do wstępu</a> <a name= wstep >Wstęp</a> Linki mailowe <a href= mailto:pawel@kasprowski.pl >Napisz do mnie</a>
Znacznik <img> <img src= obraz.gif /> Formaty GIF, JPG, PNG Atrybuty: height, width, alt
Tabele <table> <tr> <td rowspan= 2 >w1k1</td> <td>w1k2</td> <td>w1k3</td> </tr> <tr> <td colspan= 2 >w2k1-2</td> </tr> </table>
Table - właściwości border, width, height, align, cellpadding, cellspacing, colspan, rowspan, th
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
Definiowanie wyglądu Atrybuty html a <body bgcolor= #ff00de > Atrybut style <body style= background: #ff00de > Można zapisywać style w osobnym pliku CSS cascading style sheet
Kaskada styli <h1>plan wykładu</h1> <ul style="list-style-type: square; color: #009900"> <li>html</li> <li>jsp</li> <li style="list-style-type: disc; color: #ff0000">???</li> <li>egzamin</li> </ul>
Style dla paragrafów <p> To jest pierwszy paragraf tekstu, który zostanie wyświetlony jako czerwony na żółtym tle. </p> <p> To jest drugi paragraf tekstu, który zostanie wyświetlony jako zielony na niebieskim tle. </p>
Style dla paragrafów <p style="color: red; background: yellow"> To jest pierwszy paragraf tekstu, który zostanie wyświetlony jako czerwony na żółtym tle. </p> <p style="color: green; background: blue"> To jest drugi paragraf tekstu, który zostanie wyświetlony jako zielony na niebieskim tle. </p>
Globalne definiowanie styli W nagłówku pliku działa dla każdego tagu <p> w dokumencie <head>... <style> p {color: #008000; background: #ffff00} </style>... </head>
Definiowanie styli globalnych Dla każdego elementu danej klasy <style> p.nagl {color: #008000; background: #ffff00} p.tekst {color: #ff0000; background: #ffffff} </style>... <p class= nagl >Tu jest nagłówek</p> <p class= tekst >Tu jest jakiś zwykły tekst </p>
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
Style dla czcionek Ustawienie czcionek: p { } font-family: Arial ; font-size: 12px; font-style: italic lub: p { } font: 12px Arial italic;
Klasy uniwersalne (generic) Definiowany styl bez przypisywania do konkretnego znacznika <style>.important {color: #ff0000; background: #00ff00} </style>
Znacznik <SPAN> <SPAN> - rodzaj nawiasu, który można wstawić dowolnie w tekście <style>.important {color: #ff0000; background: #00ff00} </style>... <p> Znajomość języka HTML jest <span>bardzo użyteczna</span> nawet dla ludzi, którzy nie mają wykształcenia informatycznego. </p>
Znacznik <SPAN> Po przypisaniu stylu jest on stosowany dla tekstu wewnątrz <style>.important {color: #ff0000; background: #00ff00} </style>... <p> Znajomość języka HTML jest <span class=important>bardzo użyteczna</span> nawet dla ludzi, którzy nie mają Wykształcenia informatycznego. </p>
Pliki CSS Plik CSS zawiera definicje wielu różnych styli dla elementów dokumentu Plik może być używany w wielu dokumentach <head>... <link rel="stylesheet" href="/my_style1.css" type="text/css">... </head>
Dynamiczna generacja stron CGI Common Gateway Interface Wejście: adres, parametry Wyjście: tekst strony html Problem: jak przekazać parametry?
Formularze Możliwość wysyłania danych do serwera Proste pola edycyjne Pola bardziej zaawansowane radio, checkbox, select ACTION gdzie wysłać wprowadzone dane
Tworzenie formularzy Najprostszy formularz: <form action= http://adres.pl/zarejestruj >... Imię: <input type= text name= imie ><br>... <input type= submit value= Wyślij > </form>
Znaczniki <input type= text > <input type= submit > <input type= image > <input type= password > <input type= radio > <input type= checkbox > <input type= file > <input type= hidden >
Radiobutton Wybór jednej z opcji <form> <input type="radio" name="sex" value="m">mężczyzna<br> <input type="radio" name="sex" value="k">kobieta </form>
Checkbox Wybór wielu opcji <form> Lubię:<br> <input type="checkbox" name="banany">banany<br> <input type="checkbox" name="ananasy">ananasy </form>
Właściwości pola INPUT <INPUT TYPE=text password checkbox radio submit reset file hi dden image, NAME= string, VALUE=string, CHECKED, SIZE=n, MAXLENGTH=n, ALIGN=top middle bottom left right >
Pole select Wybór jednej z wielu opcji drop-down <form> <select name="samochody"> <option value="volvo">volvo <option value="saab">saab <option value="fiat">fiat <option value="audi">audi </select> </form>
Pole textarea Edycja większego tekstu <form> <textarea rows="10" cols="40"> Ten tekst można edytować </textarea> </form>
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
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
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
Odczytywanie danych Obiekt request, metoda getparameter( nazwa ) <h1>witaj <%=request.getparameter( imie )%></h1> <p> <% String imie = (String)request.getParameter( imie ); if(imie.equals( Paweł )) out.print( Ja też mam na imię Paweł! ); %> </p>
Możliwości JSP Mieszanie kodu i html a <TABLE BORDER=2> <% for ( int i = 0; i < 10; i++ ) { %> <TR> <TD>Numer</TD> <TD><%= i+1%></td> </TR> <% } %> </TABLE>
Możliwości JSP Mieszanie kodu i html a <TABLE BORDER=2> <% for ( int i = 0; i < 10; i++ ) { %> <TR> <TD>Numer</TD> <TD><%= i+1%></td> </TR> <% } %> </TABLE>
Dziękuję za uwagę! Materiały: http://www.w3schools.com/ http://www.w3.org/ http://www.kasprowski.pl