Technologie prezentacji w aplikacjach internetowych dr inż. Marek Wojciechowski Marek.Wojciechowski@cs.put.poznan.pl http://www.cs.put.poznan.pl/mwojciechowski/wsnhid
Plan przedmiotu Podstawowe technologie prezentacji HTML, XHTML, CSS, JavaScript Ajax, bogate aplikacje internetowe (RIA) Ruby On Rails Platforma Microsoft.NET ASP.NET WebForms ASP.NET MVC technologie dostępu do danych Web Services na platformie.net 2
Podstawowe technologie prezentacji po stronie klienta
Język HTML Zapis treści i opis układu graficznego dokumentów Rozkazy formatujące zapisane w postaci znaczników Większość znaczników występuje w parach: znacznik otwierający i znacznik zamykający Znaczniki mogą posiadać atrybuty sterujące Komentarze: "<!--" i "-->" Witamy w <b>poznaniu</b>
Dokument HTML Plik HTML Pliki załączników <h2>sample Page</h2> Shape 1: <img src="circle.jpg"><br> Shape 2: <img src="rect.jpg"><br> plik HTML = + circle.jpg rect.jpg
Struktura pliku HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <HTML> <HEAD> <TITLE> tytuł dokumentu </TITLE> pozostałe metadane </HEAD> <BODY> treść dokumentu </BODY> </HTML>
style logiczne style fizyczne Proste formatowanie znaków <b>tłusty</b> <i>pochylony</i> <tt>maszynowy</tt> <em>wyróżnienie</em> <cite>cytowanie</cite> <code>kod maszynowy</code> <kbd>z klawiatury</kbd> <samp>przykład</samp> <strong>wzmocniony</strong> <var>zmienna</var>
Znaki specjalne < > & ½ Ó
Łączniki hipertekstowe a.html <a name="etykieta">...</a>... <a href="#etykieta">...</a> <a href="b.html">...</a> <a href="http://www.poznan.pl/c.html">...</a> b.html c.html www.poznan.pl
Załączniki graficzne <img src="circle.jpg"> <img src="circle.jpg" alt="kółko"> <img src="circle.jpg" width=50 height=200> <a href="b.html"> <img src="circle.jpg"> </a>
Tabele <table border=3> <tr><th>miasto</th><th>mieszkańcy</th></tr> <tr><td>kraków</td><td>800.000</td></tr> <tr><td>poznań</td><td>500.000</td></tr> <tr><td>warszawa</td><td>1.900.000</td></tr> </table>
Narzędzia dla autorów
HTML: zalety i wady Zalety prostota składni dostępność przeglądarek Wady brak szablonów/wzorców brak separacji formy i treści ubogi graficznie
Extensible HyperText Markup Language (XHTML) HTML sformułowany jako XML Następca HTML 4.01 Łączy siłę HTML 4 z mocą XML łatwość przetwarzania maszynowego zagnieżdżanie MathML, SMIL, SVG XHTML Basic rozszerzalny podzbiór XHTML opracowany dla urządzeń takich jak telefony, PDA Różnice w składni między HTML i XHTML
XHTML - Przykład 1 2 3 4 5 6 <?xml version="1.0" encoding="windows-1250"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"> <head><title>przykład XHTML</title></head> <body> <p> Wybierz kolor: <br/><br/> <select name="kolor"> <option selected="selected">czerwony</option> <option>biały</option><option>zielony</option> </select> </p> </body> </html>
Cascading Style Sheets (CSS) Preferowany mechanizm do definiowania stylu prezentacji dokumentów w Internecie Mechanizm oparty o arkusze stylów w postaci listy reguł Ułatwia spójne formatowanie zbioru dokumentów Umożliwia dokładniejszą kontrolę sposobu wyświetlania elementów niż znaczniki HTML Mimo powszechnego wsparcia, ciągle drobne różnice między przeglądarkami
Dołączanie reguł do dokumentu HTML Reguły stylistyczne w oddzielnym pliku, wskazanym znacznikiem <LINK REL="stylesheet"> Reguły stylistyczne zagnieżdżone w dokumencie za pomocą znacznika <STYLE> w sekcji HEAD Atrybut STYLE elementów w sekcji BODY, np. <P STYLE='{color: blue}'>
HTML + CSS Przykład 1 <HTML> <HEAD> <TITLE>CSS homepage</title> <STYLE type="text/css"> H1 { color: blue } BODY { font-family: "Times"; font-size: 12pt; margin: 3em } </STYLE> </HEAD> <BODY> <H1 style='font-family: "Helvetica"'> Cascading Style Sheets</H1> <H2>Preface</H2> <P> A CSS rule consists of two main parts: selector and declaration. </P> </BODY></HTML>
HTML + CSS Przykład 2 <HTML> <HEAD> <TITLE>CSS homepage</title> <LINK rel="stylesheet" href="styl.css" type="text/css"> </HEAD> <BODY> <H1 style='font-family: "Helvetica"'> Cascading Style Sheets</H1> <H2>Preface</H2> <P> A CSS rule consists of two main parts: selector and declaration. </P> </BODY></HTML> styl.css H1 { color: blue } BODY { font-family: "Times"; font-size: 12pt; margin: 3em }
Format reguł CSS (1/2) Reguła = selektor + deklaracja H1 { color: blue } selektor deklaracja Selektor zawiera: nazwy elementów (np. H1) nazwy klas (np..parzysty) identyfikatory (np. #txt15) łączniki (odstęp, >, +)
Format reguł CSS (2/2) Deklaracja = nazwa właściwości: wartość Grupowanie selektorów Grupowanie deklaracji H1, H2 { color: blue } H1 { color: blue; font-style: italic }
Selektory (1/2) * - każdy element E - każdy element E (np. BODY) E F - każdy element F zagnieżdżony wewnątrz elementu E E > F - każdy element F zagnieżdżony bezpośrednio wewnątrz elementu E E + F - każdy element F, który następuje bezpośrednio za elementem E A:link - każdy link <A>, który nie został jeszcze odwiedzony A:visited - każdy link <A>, który został już odwiedzony
Selektory (2/2) E:active - element E właśnie naciskany myszką E:hover - element E, nad którym właśnie znajduje się wskaźnik myszki E[atr] - elementy E, które posiadają ustawioną (dowolną) wartość atrybutu atr E[atr="val"] - elementy E, które posiadają atrybut atr o wartości val E[atr~="val"] - elementy E, których wartością atrybutu atr jest lista słów, zawierająca val E.val - elementy E, które posiadają atrybut CLASS o wartości val (skrót dla E[class~="val"]) E#val - elementy E, posiadające atrybut ID o wartości val
Właściwości: czcionka, tekst, kolory i tło Właściwości czcionki: font, styl, wariant, grubość, szerokość, rozmiar Właściwości tekstu: wcięcie, wyrównanie, dekoracja, cień, odstępy, transformacja wielkości liter Właściwości koloru i tła: kolor pierwszego planu, kolor tła, obrazek jako tło BODY { font-family: helvetica, sans-serif; text-align: justify; text-decoration: underline; color: blue; background-color: yellow; }
Właściwości: Box model Dotyczy formatowania prostokątów wyznaczonych przez: zawartość margines wewnętrzny obramowanie margines zewnętrzny margines zewnętrzny obramowanie margines wewn. zawartość Formatowanie rozmiaru marginesów, grubości, stylu i koloru obramowania P { padding: 3px; margin: 1em 2em border-style: solid; border-color: blue; border-width: medium; }
Właściwości: pozycjonowanie elementów Trzy schematy pozycjonowania: Normal flow Floats Absolute positioning Algorytm pozycjonowania uwzględnia właściwości: position (static, relative, absolute, fixed) float (left, right, none)
Uwagi o pozycjonowaniu elementów Pozycjonowanie poprzez CSS a nie tabelki i ramki HTML tabelki dla danych tabelarycznych ramki niezalecane, ale zastępujące je mechanizmy CSS słabo wspierane przez przeglądarki
Pozycjonowanie w CSS Przykład <HTML> <HEAD> <TITLE>CSS homepage</title> <LINK rel="stylesheet" href="styl.css" type="text/css"> </HEAD> <BODY> <DIV class='normalny'> Block of text with normal flow. </DIV> <DIV class='absolutny'> Block of text with absolute positioning. </DIV> </BODY></HTML> styl.css DIV { border: solid } DIV.absolutny { position: absolute; top: 50 px; left: 100 px; width: 10 em }
Dziedziczenie reguł Dziedziczenie właściwości z elementów nadrzędnych Dokument HTML <H1>Oto przykład <EM>dziedziczenia</EM></H1> Arkusz stylów H1 { color: blue }
Kaskada Kaskada reguł z trzech źródeł: autor użytkownik Przeglądarka Ważne reguły H1 { color: blue! important} Importowanie reguł @import url("ogolny.css")
Algorytm kaskady Znajdź wszystkie deklaracje odnoszące się do elementu Sortuj wg oznaczenia ważności i pochodzenia deklaracje przeglądarki normalne deklaracje użytkownika normalne deklaracje autora waga ważne deklaracje autora ważne deklaracje użytkownika Sortuj wg specyficzności selektorów reguł Sortuj wg kolejności wystąpienia
Specyficzność reguł Współczynnik specyficzności (ang. specificity) wyznaczany dla selektora reguły uwzględnia: (a) czy do wskazania elementu wykorzystany jest selektor czy atrybut style (b) liczbę identyfikatorów w selektorze (c) liczbę innych atrybutów i pseudo-klas w selektorze (d) liczbę nazw elementów i pseudo-elementów w selektorze Współczynnik ma postać liczby (a)(b)(c)(d) UL OL LI.red {...} /* a=0 b=0 c=1 d=3 -> specificity = 13 */
Formularz HTML Podstawowa metoda interakcji między użytkownikiem i aplikacją internetową Umożliwia wprowadzania danych za pomocą interfejsu użytkownika Przekazuje zakodowane dane do aplikacji
Przykładowy formularz HTML pole tekstowe grupa przycisków radiowych pole z hasłem lista rozwijana pole typu memo pole wyboru przyciski do wysłania i wyczyszczenia formularza
Wysłanie formularza Atrybut action - URI agenta przetwarzającego formularz Atrybut method - metoda wysyłania danych z formularza GET: dane kodowane w adresie URL POST: dane przesyłane w ciele komunikatu
HTML5 Następca HTML 4.01 and XHTML 1.1 Początkowo rozwijany pod auspicjami WHATWG (Web Hypertext Application Technology Working Group) W3C koncentrowało się na rozwoju XHTML Jeden język znaczników, dwie notacje (HTML i XHTML) Kompatybilność wtecz W3C Draft w 2012, W3C Recommendation w 2022 Wiele różnych funkcji, niektóre już wspierane przez przeglądarki!
Nowe cechy HTML5 Kanwa (<canvas>) i API do rysowania 2D Przechowywanie danych po stronie klienta (DOM Storage) Technika drag&drop Przesyłanie danych między dokumentami Obsługa multimediów <audio>, <video> Uproszczony DOCTYPE: <!DOCTYPE html> Więcej semantyki: <article>,<nav>,<footer> <input>: email, date, search, range
JavaScript - wprowadzenie JavaScript to język skryptowy obiektowy interpertowalny przenaszalny darmowy Wykorzystanie JavaScript Rich Internet Applications walidacja danych wprowadzanych do formularzy HTML zapewnianie interakcyjności stron HTML
JavaScript - historia Język wprowadzony w 1995 roku przez Sun Microsystems i Netscape Communications JScript - kompatybilna implementacja Microsoft Standard ECMAScript ECMA-262 Aktualne wersje JavaScript 1.6 (wersja 1.7 jesienią 2007) JScript 5.6 i JScript.NET ECMAScript edition 3
JavaScript - zmienne i stałe Zmienne nie posiadają typu Nazwa zmiennej musi być poprawnym identyfikatorem Zmienne mogą być lokalne lub globalne Typy danych liczby, łańcuchy znaków, wartości logiczne, tablice, obiekty, wartość pusta, wartość niezdefiniowana var nazwisko = "Kowalski"; var _$_dziwna zmienna_99 = 0xabcd; GlobalnaFlaga = true; mojeauto = { marka: 'Fiat', nrrej: 'PO 12345' }; const pi = 3.14; // IE7, IE8 nie wspierają
JavaScript - operatory Operatory arytmetyczne logiczne przypisania porównania bitowe specjalne var a = b + c; var smaczny = swiezy && dojrzaly; var _1procent_wiecej *= 1.01; var czywiekszy = (duzy > maly); var _xor = a ^ b; var max = (a > b)? a : b;
JavaScript - instrukcje Instrukcje warunkowe: if...else, switch iteracyjne: for, do...while, while, break operujące na obiektach: for...in, with komentarze: jednowierszowe //, wielowierszowe /* */ while (a!= b) { if (a > b) { a = a - b; } else { b = b - a; } } // algorym Euklidesa
JavaScript - funkcje Nazwany blok programu może przyjmować parametry może zwracać wartość Funkcje same są obiektami (!) funkcja może być obiektem anonimowym funkcję można przypisać do składowej obiektu funkcję można przekazać jako argument Konstruktor - funkcja specjalna
JavaScript pozostałe elementy języka Obiekty obiektowość bez klas, poprzez prototypowanie głównie korzystanie z predefiniowanych obiektów, a nie tworzenie własnych (Date, String, RegExp, Math,...; Document Object Model) Funkcje nazwane bloki kodu są obiektami można je dodawać do obiektów jako metody Tablice obsługiwane poprzez obiekt Array, indeksowane od 0 Łańcuchy znaków obsługiwane poprzez obiekt String
Osadzanie skryptów JavaScript w dokumentach HTML funkcje wielokrotnego użytku w sekcji <head> dokumentu HTML dołączenie zewnętrznego pliku z kodem JavaScript instrukcje jednorazowe w sekcji <body> dokumentu HTML procedury obsługi zdarzeń wewnątrz właściwych znaczników
DOM - Document Object Model Opis reprezentacji dokumentu HTML lub XML w postaci drzewa elementów Interfejs do manipulowania elementami dokumentu Standard W3C Zdarzenia generowane przez mysz generowane przez klawiaturę związane z ramkami i obiektami związane z formularzami
DOM - hierarchia obiektów przeglądarki
JavaScript - przykład obsługi zdarzenia <html> <head> <script type="text/javascript"> function mouseoverheading() { document.getelementbyid("header").innerhtml = "...i znikam"; } function mouseoutheading() { document.getelementbyid("header").innerhtml = "pojawiam się..."; } </script> </head> <body> <h1 id="header" onmouseover = "mouseoverheading()" onmouseout = "mouseoutheading()" > pojawiam się... </h1> </body> </html>
JavaScript - obiekt window Reprezentuje okno przeglądarki Obiekt tworzony każdorazowo po napotkaniu znaczników <body> lub <frameset> Metody open(), close() alert(), confirm(), prompt() setinterval(), settimeout() print() scrollto(), scrollby(), resizeto(), resizeby() Obiekty document, history, location, navigator, screen
JavaScript - obiekt document Reprezentuje dokument wyświetlony w przeglądarce Zawiera wszystkie elementy składowe dokumentu Umożliwia manipulację cechami elementów wygląd, zachowanie Dostęp do elementów przez formularz: document.dataform.nazwisko przez nazwę: document.getelementbyid("nazwisko") Operacje na dokumencie open(), clear(), write(), close()
JavaScript - obiekty location, history, navigator Obiekt location reprezentuje aktualny adres URL składowe: host, href, pathname, port, protocol, search metody: assign(), reload(), replace() Obiekt history to tablica odwiedzonych adresów URL składowe: length metody: back(), forward(), go() Obiekt navigator reprezentuje klienta HTTP składowe: appname, appversion, platform, cpuclass metody: javaenabled()
JavaScript - wyrażenia regularne Bardzo przydatny mechanizm wyszukiwania i walidacji Predefiniowany obiekt RegExp składowe: ignorecase, input, source metody: exec(), test() metody obiektu String: match(), search(), replace() var email = /\w+@[a-za-z_0-9]+?\.[a-za-z]{2,6}/ var userinput = "Jan.Kowalski@acme.com"; var isemailcorrect = email.test(userinput);
JavaScript - podsumowanie Najczęstsze zastosowania weryfikacja danych w formularzach HTML otwieranie nowych okien nawigacja za pomocą przycisków reakcja na zdarzenia generowane przez użytkownika (mysz, klawiatura) budowa rozwijanych menu
jquery Biblioteka JavaScript Dostępna od 2006 r., otwarta, darmowa Aktualnie najpopularniejsza z dostępnych bibliotek JS Używana przez 38.9% serwisów (statystyki W3Techs z 10.2011) Adopcja i wsparcie ze strony korporacji (m.in. Microsoft) Upraszcza korzystanie z JavaScript ( write less do more ) Nawigacja po drzewie dokumentu Obsługa zdarzeń Animacja Interakcje Ajax
jquery - Przykład Example from <a href="http://jquery.com/">jquery</a> site. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/ jquery.min.js"></script> <script> $(document).ready(function(){ $("a").click(function(event){ alert("the link no longer took you to jquery.com"); event.preventdefault(); }); }); </script>