Technologie internetowe Serwis WWW język HTML

Transkrypt

1 Technologie internetowe Serwis WWW język HTML

2 INTERNET kilka dat Rok sieć ARPANET (Advanced Research Project Network), Uniwersytet Kalifornijski w Los Angeles, Instytut Badawczy Stanforda, filia Uniwersytetu Kalifornijskiego w Santa Barbara, Uniwersytet Stanu Utah - protokół sterowania siecią NCP (Network Control Protocol) - zdalne logowanie, drukowanie i przesyłanie plików Rok protokół sterowania transmisją TCP (Transmision Control Protocol) Narodowa Fundacja Nauki NFS (National Science Foundaction) - powstanie sieci NFSnet łączącej ośrodki uniwersyteckie i rządowe - początkowo prędkość transmisji 56 kb/s, następnie łącza T-1 (1,544 Mb/s) aż po łącza T- 3 (43 Mb/s) Początek lat 80-tych - protokół TCP/IP Rok zmiana nazwy sieci ARPANET na Internet Rok rozwiązanie NFS-net, pierwsi dostawcy usług internetowych ISP (Internet Service Provider)

3 Narodziny serwisu WWW 1991 Tim Berners-Lee (CERN) nowy protokół internetowy, HTTP (Hypertext Transfer Protocol), określający dialog serwer-klient na temat dostępności określonego zasobu. nowy sposób identyfikowania zasobów, czyli URL (Universal Resource Locator), łączący identyfikację serwera, sposobu dostępu do zasobu w ramach serwera oraz protokół internetowy, za pomocą którego zasób jest osiągalny. nowy typ dokumentów (język HTML) dostępnych przez HTTP i wykorzystujących URL do realizacji hipertekstu - systemu odsyłaczy między takimi dokumentami. Tim Berners-Lee dyrektor Konsorcjum World Wide Web

4 Protokół HTTP Serwer WWW test.html 2 Plik: test.html Protokół używany do przesyłania danych pomiędzy klientem a serwerem w sieci WWW Oparty na protokole TCP, używa standardowo portu 80 Wersja 1.0 zdefiniowana w dokumencie RFC 1945 a wersja 1.1 w dokumencie RFC 2616 Protokół transportowy TCP Klient inicjuje połączenie TCP do serwera, port 80 Serwer akceptuje połączenie z klientem Następuje wymiana informacji HTTP pomiędzy klientem a serwerem Serwer zamyka połączenie TCP Protokół HTTP jest bezstanowy Serwer nie posiada informacji o kliencie po zamknięciu połączenia TCP

5 Wzrost liczby serwerów w sieci Internet

6 Konsorcjum W3C Rok powstania Założyciel - Tim Berners-Lee Lokalizacja - MIT Zakres działalności: standaryzacja rozwiązań wspierających organizację dostępu do zasobów Internetu. Zrzesza około 450 organizacji. Finansowane głównie przez członków, w mniejszej części ze środków publicznych. Specyfikacje W3C noszą nazwę rekomendacji (recommendations) i są publicznie dostępne. Główne zasady projektowe dla technologii Web'u: współdziałanie (interoperatibility); zapewnienie możliwości ewolucji: modularność, prostota, rozszerzalność; decentralizacja.

7 Konsorcjum W3C Working Draft: Praca w toku; publikację WD zatwierdza kierownictwo konsorcjum, ale zawartość może być dopiero podstawą dla dalszych dyskusji, tj. fakt opublikowania nie oznacza pełnej zgody co do treści ani stabilności rozwiązania. Last Call Working Draft: Specyfikacja spełnia wszystkie sformułowane wymogi, albo ewentualnie dokumentuje niezrealizowane zagadnienia. Formalnie odnosi się do wszystkich zgłoszonych wcześniej uwag i problemów. Stanowi publiczny raport techniczny, mogący być podstawą dalszych konsultacji. Candidate Recommendation: Ustalone współzależności z innymi specyfikacjami. Oczekiwanie na doświadczenia implementacyjne spoza grupy roboczej. Proposed Recommendation: Istnieją doświadczenia z implementacją specyfikacji. Jest przedmiotem przeglądu przez komitet doradczy. W3C Recommendation: Postać finalna. Raport techniczny spełniający wymagania, będący wynikiem uzgodnień. Uznany za nadający się do szerokiego zastosowania i realizujący misję W3C.

8 Przykłady specyfikacji W3C HTML 4.01 Specification status Rekomendacji 24 grudzień XHTML Module-based XHTML status Rekomendacji 31 maj Standard CSS Level 2 - status Rekomendacji w maju Standard CSS Level 1 status Rekomendacji w

9 Kilka dat związanych z rozwojem języka HTML 1991 idea stworzenia języka HTML 1994 powstanie konsorcjum W3C 1995 HTML 2.0 i CSS 1.0 (pierwsze standardy) 1998 język XML 1999 HTML 4.1 zamknięcie prac nad rozwojem języka HTML 2001 XHTML 1.1, projekt nowego języka hipertekstowego XHTML powstanie grupy: Web Hypertext Application Technology Working Group 2007 W3C otwiera projekt HTML 5.0 (XHTML 5.0) 2009 XHTML zarzucenie prac nad standardem 2010 HTML 5 - Working Draft 18 February 2010 (zakończenie prac koniec 2022) 2014 W3C Recommendation 28 October 2014

10 Standardy języka HTML wersje Język umożliwiający tworzenie stron internetowych. Pozwala opisać strukturę informacji zawartej w dokumencie nadając znaczenie poszczególnym fragmentom tekstu (formułuje linki, nagłówki, listy, itd.) Początkowy brak dokumentów standaryzujących język doprowadził do rozbieżności pomiędzy zestawami elementów dostarczanymi przez różnych dostawców przeglądarek, w szczególności umożliwiło pojawienie się elementów opisujących oprócz struktury dokumentu również jego końcową formę graficzną. Dokumenty HTML nie są walidowane przez przeglądarki co skutkuje różną interpretacją dokumentów w momencie pojawienia się w nich błędów, brak jest standardów opisujących reakcje przeglądarek na pojawiające się błędy. Wersja HTML 4.0 jest pierwszym międzynarodowym standardem zarekomendowanym przez organizację W3C w roku 2000, rok później pojawiła się wersja Specyfikacja 4.01 definiuje następujące deklaracje dokumentów HTML: strict.dtd, loose.dtd, frameset.dtd.

11 Arkusze styli CSS CSS (Cascading Style Sheets) język opisu formy prezentacji opracowany w roku 1996, w roku 1998 opracowano wersję CSS 2. Obecnie trwają prace nad wersją 3. CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Separacja ta zwiększa zakres dostępności witryny, zmniejsza zawiłość dokumentu, ułatwia wprowadzanie zmian w strukturze dokumentu. CSS umożliwia renderowaniu strony WWW w zależności od obsługiwanego medium - ekran, palmtop, dokument w druku czy czytnik ekranowy. Początkowe problemy z implementacyjną styli w przeglądarkach spowodowały znaczne opóźnienie powszechnego przyjęcia tego standardu jako opisu formy graficznej dokumentów WWW. Różna interpretacja arkuszy CSS przez przeglądarki powoduje konieczność tworzenia przez programistów często kilku wersji dla jednego dokumentu HTML. CSS oparty jest o reguły według których tworzona jest forma prezentacyjna dokumentu. Reguły CSS można dostarczyć w arkuszu zewnętrznym, wewnętrznym lub na poziomie elementów HTML. Priorytet stylów ustalany jest hierarchicznie. Pierwszeństwo mają reguły zdefiniowane bliżej formatowanego elementu.

12 Język XML Technologia XML (1998) - przemyślana adaptacja języka SGML dla potrzeb uniwersalnego opisu danych (także WWW): XML będzie wspierać różne aplikacje, XML będzie kompatybilny z SGML, pisanie programów do przetwarzania dokumentów XML będzie proste, liczba cech opcjonalnych będzie zredukowana do minimum. Dokument XML Parser Program przetwarzający dokument XML Dokument poprawny składniowo Dalsze przetwarzanie Dokument niepoprawny składniowo 1. Dokument XML musi być poprawny składniowo (ang. well-formed). 2. Dokument XML może być poprawny strukturalnie (ang. valid XML Schema ). 3. Treść dokumentu XML jest oddzielona od jego sposobu prezentacji (XSLT).

13 Nowy standard język HTML 5.0 Dlaczego nie XHTML? Wolny rozwój HTML (XHTML 1.0 i HTML 4.01 to ten sam język) Niekompatybilność XHTML 2.0 Brak standardu na teraz XHTML się nie przyjął Ewolucja, a nie rewolucja Co znajdziemy w HTML 5? Ustandaryzowana obsługa błędów w kodzie Modyfikacje w celu ułatwienia pisania Nowe znaczniki i atrybuty Usunięcie niektórych elementów Przywrócenie niektórych atrybutów Zgodność w tył

14 Serwis WWW Serwis WWW od strony informatycznej zbiór informacji udostępniony poprzez sieć Internet informacja przygotowana w dokumentach statycznych HTML aplikacje uruchomiane po stronie klienta JavaScript czy Flash aplikacje uruchamiane przy pomocy technologii RIA Co oczekujemy od dzisiejszych serwisów WWW? udostępniania dokumentów tekstowych prezentacji grafiki rastrowej czy wektorowej, animacji dostarczania treści multimedialnej możliwości uruchamiania aplikacji WWW JavaScript Flash RIA AJAX HTML 5

15 Rozwój serwisu WWW Czas Strony statyczne Strony dynamiczne Strukturalne serwisy WWW Serwisy czasu rzeczywistego

16 Rodzaje dokumentów publikowanych w serwisie WWW Dokumenty statyczne - zawartość dokumentu określona jest w momencie tworzenia przez autora. Dokumenty dynamiczne - brak predefiniowanej statycznej postaci, dokument jest generowany na nowo w odpowiedzi na każde wezwanie. Dokumenty aktywne - dokumenty zawierają w sobie kopię programu uruchamialnego lokalnie w środowisku przeglądarki.

17 Statyczne dokumenty WWW Zalety (+) i wady (-): + prostota, łatwość implementacji; słaba elastyczność. Wyświetlany dokument jest napisany w HTML, XHTML lub XML.

18 Dynamiczne dokumenty WWW Zalety (+) i wady (-): + możliwość prezentowania aktualizowanej często informacji; + zapewnienie interakcyjności bez dodatkowych wymogów dla oprogramowania przeglądarki (z punktu widzenia jej mechanizmów strony statyczne nieodróżnialne od dynamicznych); po pobraniu takiej strony ulec ona może dezaktualizacji; większe wymagania dla wydajności łącza i serwera; większy narzut czasowy (konieczne generowanie strony); wyższe koszty opracowania i przetestowania. Wyświetlany dokument tworzony jest w PHP, JSP lub ASP.

19 Aktywne dokumenty WWW Zalety (+) i wady (-): + może sięgać do źródeł na serwerach celem bieżącego aktualizowania informacji; potencjalne luki w bezpieczeństwie; dodatkowe koszty tworzenia i działania; wymaga bardziej zaawansowanego, zgodnego oprogramowania przeglądarki i odpowiednich zasobów po stronie klienta. Wyświetlany dokument wykorzystuje elementy języka JavaScript.

20 Interaktywność w serwisie WWW strony aktywne Interaktywność uruchamiana jest po stronie przeglądarki. JavaScript - jest językiem interpretowanym. Oznacza to, że przeglądarka każdorazowo pobiera i wykonuje polecenia napisane w tym języku wraz z kodami HTML strony. JavaScript umożliwia wykonanie pewnej instrukcji w odpowiedzi na określoną reakcję użytkownika. Aplety Javy - krótkie programy napisane w języku Java. Aplety Java znajdują się w dokumentach HTML i są w stosownym momencie uruchamiane w oknie przeglądarki internetowej. Jednak, aby mogły właściwie funkcjonować, przeglądarka musi włączoną obsługę wirtualnej maszyny Javy (JVM Java Virtual Machine).

21 Interaktywność w serwisie WWW strony dynamiczne Interaktywność uruchamiana jest po stronie serwera. Protokół CGI (Common Gateway Interface) - definiuje standard komunikacji między serwerem WWW a zewnętrznymi programami. Programy napisane w dowolnym języku (np. C) wykorzystujące protokół CGI nazywamy programami CGI, natomiast w języku interpretowanym (np. Perl, Visual Basic) - skryptami CGI. ASP (Active Serwer Pages) - technologia opracowana przez firmę Microsoft. PHP (Personal Home Page) - nowoczesny skryptowy język programowania, wykonywany po stronie serwera umożliwiający tworzenie dynamicznym witryn WWW.

22 Struktura dokumentu HTML <!doctype html > Typ dokumentu <html> <head> Nagłówek dokumentu (tu zawartość nagłówka HTML) </head> <body> Zawartość dokumentu (tu zawartość dokumentu właściwego) </body> </html>

23 Kontrola poprawności dokumentu HTML

24 Wymagane elementy w dokumencie HTML <!DOCTYPE HTML > <html> <head> <title>przykład dokumentu HTML</title> </head> <body> <p>pierwszy paragraf</p> </body> </html>

25 Budowa elementu w dokumencie HTML Element Znacznik otwierający Znacznik zamykający <h1 align= left > Przykład </h1> Nazwa elementu Atrybut: nazwa i wartość Tekst wyświetlany

26 Element w dokumencie HTML Każdy element powinien zawierać znacznik otwierający i zamykający Element pusty ( nie zawierający tekstu wewnętrznego ) zamykamy wewnątrz lub dodajemy element zamykający <br> - nowa linia <br /> lub <br></br> Elementy nie mogą się krzyżować zagnieżdżenie elementów Element otwarty wewnątrz innego elementu należy najpierw zamknąć a dopiero później zamykamy element nadrzędny. Poprawnie <a> <b> </b> </a> Niepoprawnie <a> <b> </a> </b>

27 Znaki specjalne w dokumentach WWW Predefiniowane encje ogólne < zastępuje znak < > zastępuje znak > & zastępuje znak & &apos; zastępuje znak apostrofu ' " zastepuje znak cudzysłowu "

28 Encje i referencje do znaków Wstawianie niestandardowych znaków: Używamy & do rozpoczęcia opisu znaku a kończymy znakiem ;. Pomiędzy znakami umieszczamy nazwę znaku lub jego kod. Przykłady : ( ) daje symbol ( ) daje pusty znak XHTML Character References

29 Język HTML 5.0 <!DOCTYPE html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <!-- HTML 5 --> " <html> <head> <title>przykładowy dokument</title> </head> <body> <h1>prosta strona</h1> <p>to jest <a href="demo.html">demo</a> przykład.</p> </body> </html> <?xml version="1.0" encoding="utf-8"?> <html xmlns=" <!-- XHTML 5 --> <head> <?xml version="1.0" encoding="iso "?> <title>przykładowy dokument</title> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" </head> <body> " <p>przykładowy paragraf</p> <html xmlns=" xml:lang="pl" > </body> </html>

30 Znaczniki semantyczne w HTML 5 HEADER ARTICLE SECTION NAV ASIDE <header /> <nav /> <article /> <section /> <aside /> <footer /> FOOTER

31 Grafika w dokumencie HTML 5 Element <canvas> jest nowym elementem języka HTML, który może być zastosowany do rysowania grafiki przy użyciu skryptów (zazwyczaj JavaScript). Przykładem zastosowania elementu <canvas> może być jego użycie do rysowania wykresów, tworzenia kompozycji fotografii lub do tworzenia animacji. WebGL eksperymentalne API udostępniające interfejs grafiki 3D. Bazuje na OpenGL ES 2.0. Korzysta z elementu <canvas>. <html> <head> <script type="application/x-javascript"> function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); } </script> </head> <body onload="draw();"> <div><canvas id="canvas" width="150" height="150"></canvas></div> </body> </html>

32 Video w dokumencie HTML 5 Wiele formatów Łączenie z innymi elementami Akceleracja sprzętowa (dekodowanie GPU) H.264 TAK NIE TAK NIE TAK VP8 (WebM) TAK TAK TAK TAK NIE

33 Audio w dokumencie HTML 5 Wsparcie standardów rynkowych MP3 ACC Atrybuty ( src, autoplay, controls, preload ) MP3 TAK NIE TAK NIE NIE ACC TAK NIE TAK NIE NIE WAV NIE TAK TAK TAK TAK

34 HTML 5 geolocation if (navigator.geolocation) { navigator.geolocation.getcurrentposition(function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; map.setcenter(new GLatLng(lat, lng), 13); map.addoverlay(new GMarker(new GLatLng(lat, lng))); }); } GPS Geolocation Google, Gears API, Geolocation API. W3C, Geolocation API Specification, Editor's Draft 10 February Mozilla, Using geolocation. Mozilla, Monitoring WiFi access points.

35 Kaskadowe arkusze styli CSS Interpretacja wizualna dokumentów HTML opiera się na osobnym zestawie danych, zwanych arkuszem stylów, które przypisują elementom strukturalnym cechy typograficzne. Specyfikacja HTML określa tylko ogólny sens typograficzny elementów (np. tabela, wyliczenie, tytuł), natomiast każda przeglądarka ma "wbudowany" arkusz stylów precyzujący wartości typograficzne elementów: położenie, marginesy, odstępy, kolory, ramki, podkreślenia itd. stosownie do znaczenia danego elementu i jego atrybutów. Jest on wbudowany w tym sensie, że zwykle nie jest dostępny w formie dokumentu z definicjami.

36 Kaskadowe arkusze styli w nagłówku <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Przyklad 1</TITLE> <STYLE type="text/css"> BODY { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; } </STYLE> </HEAD> <BODY> <H1>Przyklad 1</H1> <P>To jest tekst na naszej stronie.</p> </BODY> </HTML>

37 Kaskadowe arkusze styli w pliku <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>Strona testowa</title> <LINK rel="stylesheet" href="test.css" type="text/css" media=screen> </HEAD> <BODY> <H1>Przyklad 1</H1> <P>To jest tekst na naszej stronie.</p> </BODY> </HTML>

38 Kaskadowe arkusze styli przy elemencie formatowanym <!DOCTYPE HTML > <HTML> <HEAD> <TITLE>Strona testowa</title> <link rel="stylesheet" href="test.css" type="text/css" media="screen" > </HEAD> <BODY> <H1>Przyklad 1</H1> <P style="color:red; font-size:16px;" > To jest tekst na naszej stronie. </P> </BODY> </HTML>

39 Kontrola poprawności kaskadowych arkuszy styli CSS

40 Składnia reguły CSS selektor { właściwość1 : wartość1 ; } właściwość2 : wartość2 ;

41 Zbiór zasad styli CSS Zbiór reguł składa się z: selektora wszystko do wystąpienia nawiasu { h1, h2 { color: blue } jeśli jest błąd w selektorze, reszta jest ignorowana bloku deklaracji {... } który zawiera listę zero lub więcej deklaracji po średnikach h1, h2 { color: blue; font-style: 12pt }

42 Selektory - elementy * dopasowuje każdy element bez wyjątku E dopasowuje element E h1 { font-family: sans-serif } lista E, F, G dopasowuje każdy element z listy h1, h2, div { display-type: block; font-family: sans-serif }

43 Selektory - atrybuty E[foo] dopasowuje element E który posiada atrybut foo, bez względu na jego wartość planeta[title] { color: blue; } <planeta title="ziemia"> E[foo="war"] wybiera element E który posiada atrybut foo o wartości war planeta[title="ziemia"]{color:blue;} <planeta title="ziemia">

44 Selektory wybór kontekstowy E > F wybiera F który jest dzieckiem E body > p { line-height: 1.3 } ksiazka > tytul { font-size: 24 pt; } rozdzial > tytul { font-size: 20 pt; } tytul { font-size: 18 pt; } E F wybiera element F który jest potomkiem E h1 em { color: blue }

45 Selektory pozycja E + F wybiera element F który występuje od razu po danym ( elementy siostrzane ) div + p { text-indent: 0 } Pseudoelementy E:first-child wybiera element E który jest pierwszym dzieckiem swojego rodzica div > p:first-child { text-indent: 0 } Inne elementy selektorów pseudoelementy :first-line, :first-letter, :before, :after

46 Składowe wartości Każda własność oddzielnie opisuje składnię wartości. Typowe składowe wartości: liczby całkowite i rzeczywiste (własności zazwyczaj ograniczają dozwolony zakres liczb). h1 { margin: 0.5em } p { font-size: 12px } procenty, zawsze odnoszą się do innej wartości p { font-size: 10pt } p { line-height: 120% } /* 120% 'font-size' */

47 Składowe wartości Wielkości względne: em rozmiar bieżącego fontu ex wysokość litery x bieżącego fontu px punkty, dla urządzenia wyświetlającego Wielkości bezwzględne: in (cale), cm (centymetry), mm (milimetry), pt (punkty, 1/72in), pc (pice, 12pt) h1 { margin: 0.5em } /* em */ h1 { margin: 1ex } /* ex */ p { font-size: 12px } /* px */ h3 { word-spacing: 4mm } /* milimeters */ h4 { font-size: 12pt } /* points */

48 Składowe wartości kolory: słowo kluczowe albo numeryczna specyfikacja RGB (#FF = 100% = 255) body {color: black; background: white } em { color: #ff0000 } em { color: rgb(255,0,0) } em { color: rgb(100%, 0%, 0%) } ciągi znaków: "oto ciąg". Zmiana linii to \A.

49 Elementy blokowe i liniowe Trzy rodzaje elementów: blokowy - zaczynający nowy akapit liniowy - włączany do bieżącego wiersza niewidoczny - element nie jest wyświetlany nazwa {display: block} obrazek {display: inline} plik {display: none} W XML domyślnie elementy wyświetla się liniowo.

50 Margines lewy Margines prawy Model ramkowe CSS Ramka ograniczająca Obramowanie Margines górny Tu jest tekst Wypełnienie Margines dolny

51 Umiejscowienie względne Zmiana pozycji elementu względem jego naturalnego położenia, nie względem innych elementów. opis { } display: block; position: relative; left: 10px; right: 20px; bottom: 15px; top: 25px Wartości miary opisują przesunięcie elementu względem jego położenia domyślnego.

52 Umiejscowienie bezwzględne Dokładne określenie położenia elementu względem elementu rodzica. opis { } display: block; position: absolute; left: 10px; right: 20px; bottom: 15px; top: 25px Porządek naturalny - wyznaczony przez dokument XML - zostaje zmieniony. Elementy mogą zachodzić na siebie.

53 Szerokość i wysokość elementu Określanie szerokości i wysokości elementu, jako wartość bezwzględna, lub procent wielkości rodzica. opis { } display: block; position: relative; width: 200%; height: 250px; left: 10px; right: 20px Procenty odwołują się do rozmiarów rodzica, nie oryginalnych rozmiarów elementu.

54 Porządek kaskadowy Waga Znajdź wszystkie reguły które stosują się do danego elementu i własności - wybierz regułę według wagi. Pochodzenie W przeciwnym razie według pochodzenia - reguły autora - reguły użytkownika - domyślne reguły procesora CSS. Szczegółowość W przeciwnym razie wybierz regułę o większej mierze szczegółowości. Kolejność W przeciwnym razie, wybierz tą regułę która występuje w dokumencie CSS później. Uznaje się że reguły w arkuszach importowanych znajdują się przed regułami w arkuszu bieżącym.

55 Własności dziedziczone przez elementy artykuł sekcja par display-type: block; font-family: sens-serif; font-size: 14 pt; background-image: stripes.jpg; color: blue; display-type: block; margin-top: 5mm; margin-bottom: 5mm; font-size: 12pt; display-type: block; margin-top: 2mm; margin-bottom: 2mm; DZIEDZICZONE DZIEDZICZONE

56 Dziękuję za uwagę. Dziękuję za uwagę.