1 / 79

Bezpieczeństwo HTML Multimedia

Technologia informacyjna PWSW. Bezpieczeństwo HTML Multimedia. Wykład 3. Programy usługowe:. edycja tekstu grafika zestawienia danych i obliczenia (np. arkusz kalkulacyjny) bazy danych wspomaganie programowania w językach programowania

clayton-sims
Download Presentation

Bezpieczeństwo HTML Multimedia

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Technologia informacyjna PWSW Bezpieczeństwo HTML Multimedia Wykład 3

  2. Programy usługowe: • edycja tekstu • grafika • zestawienia danych i obliczenia (np. arkusz kalkulacyjny) • bazy danych • wspomaganie programowania w językach programowania • programy obsługi multimediów (tworzenie, edycja, odtwarzanie, kodowanie) • rozrywka

  3. Bezpieczeństwo sieci • oprogramowanie antywirusowe • firewall • szyfrowanie połączeń (transakcje) • autentykacja dostępu • loginy i hasła, • metody biometryczne (odcisk palca, źrenica) • tokeny • hasła jednorazowe

  4. Programy antywirusowe (także antidotum na programy szpiegujące, "konie trojańskie" i in.) • Norton AntiVirus • ESET NOD 32 • AVG • AVAST • Kaspersky AV • BitDefender • i inne

  5. Zapora sieciowa (ang. firewall – ściana ogniowa) • jeden ze sposobów zabezpieczania sieci i systemów przed intruzami • Dedykowany sprzęt komputerowy z oprogramowaniem • Samo oprogramowanie • blokuje niepowołany dostęp do komputera, filtrowanie połączeń wchodzących i wychodzących, odmawianie żądań dostępu uznanych za niebezpieczne. • Bardzo ważną funkcją zapory ogniowej jest monitorowanie ruchu sieciowego

  6. Kryptografia • protokół SSL - HTTPS • szyfrowanie asymetryczne – klucz publiczny i prywatny • certyfikaty • podpis elektroniczny

  7. Wprowadzenie do aplikacjiWWW • Składniki architektury WWW – serwer HTTP – protokół HTTP – klient HTTP (hypertext transfer protocol) – przeglądarka WWW – język HTML

  8. Rys historyczny Projekt Tima Bernersa-Lee dla CERN (1989) • Pierwsza przeglądarka – WorldWideWeb Mosaic • Pierwszy serwer WWW - http

  9. Składniki architektury WWW Klient HTTP (przeglądarka WWW) • Serwer HTTP (serwer WWW) • Protokół HTTP

  10. Interakcja w środowisku WWW

  11. Zadania klienta HTTP (przeglądarka) Inicjowanie połączenia HTTP • Pobieranie interfejsu użytkownika • Prezentacja interfejsu użytkownika • Interakcja z użytkownikiem • Buforowanie odpowiedzi • Kryptografia (szyfrowanie)

  12. Zadania serwera HTTP • Obsługa żądań HTTP • Rejestracja żądań • Uwierzytelnianie i kontrola dostępu • Kryptografia (szyfrowanie) • Wybór wersji językowej wysyłanych plików

  13. Protokół HTTP • Polecenia tekstowe • Transmisja 8-bitowa • Bezstanowy - nie zachowuje żadnych informacji o poprzednich transakcjach z klientem (po zakończeniu transakcji wszystko "przepada"). Bezsesyjny - to znaczy, że nie zostaje nawiązane połączenie, a każdy dokument jest pobierany osobno

  14. Wskaźnik do zasobu w sieci Internet Adresy URL

  15. Dokumenty statyczne i dynamiczne Dokument statyczny - gotowy do pobrania plik w systemie plików serwera HTTP – interpretowany i wyświetlany przez przeglądarkę po stronie klienta • Dokument dynamiczny - dokument generowany na żądanie przez program (w językach PHP, ASP, Java, PERL i inne) po stronie serwera HTTP

  16. Język HTML • Zapis treści i opis układu graficznego dokumentów w pliku tekstowym – nazwa.html lub nazwa.htm • 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: <!-- dowolny komentarz --> 17

  17. PODSTAWOWA STRUKTURA dokumentu HTML <HTML> <HEAD> <TITLE> Tytuł w nagłówku okna </TITLE> </HEAD> <BODY> Tu są elementy pojawiające się na stronie w postaci znaczników </BODY> </HTML> konfiguracja treść strony

  18. Znaczniki (tagi) <TAGatrybuty> zawartość </TAG> STRUKTURA dokumentu HTML <HTML> <HEAD> <TITLE> Tytuł w nagłówku okna </TITLE> </HEAD> <BODY> Tu są elementy pojawiające się na stronie </BODY> </HTML>

  19. Przykładowo: <A href="www.onet.pl"> Onet </A> atrybut znacznik zamykający znacznik otwierający zawartość Zawartością może być inny znacznik

  20. Dokument HTML Plik HTML Pliki załączników (np. grafika) 21 http://wazniak.mimuw.edu.pl

  21. Zagnieżdżanie znaczników <P> Tekst1<B><I>Tekst2 </I> Tekst 3</B></P> Tekst2 Tekst3 Tekst1 <TD><IMGsrc="obraz.jpg" /></TD> obrazek w komórce tabeli np. UWAGA: ciąg spacji HTML traktuje jak jedną – przy konieczności użycia kilku spacji stosuje się twarde spacje &nbsp; text&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text

  22. Znaczniki elementów pustych <ZNACZNIK /> przykładowo: <BR /> wymuszona zmiana wiersza <IMG /> grafika <INPUT /> pole formularza można pisać: <BR> </BR> lub <BR/> lecz zgodnie z XHTML powinno być: <BR /> ze spacją

  23. Wybrane znaczniki … Akapit tekstowy - znacznik <P> - Przykłady: <P align="center"> Tytuł </P> <P align="left"> Tytuł2 </P> wybór kroju, koloru, rozmiaru czcionki przez atrybut style i jego cechy – o tym za chwilę Dawniej określał to znacznik <FONT> ale niezalecany dla nowszych standardów HTML Akapity nagłówkowe określonych gotowych stylów <H1> Nagłówek pierwszy </H1> <H2> Nagłówek drugi </H2> <H3> Nagłówek trzeci </H3> <H4> Nagłówek czwarty</H4> <H5> Nagłówek piąty</H5> <H6> Nagłówek szósty</H6>

  24. Linie poziome znacznik HR pusty – nie ma znacznika zamykającego <HR SIZE="7" WIDTH="400" COLOR="yellow" /> <HR SIZE="8" WIDTH="100" ALIGN=left COLOR="navy" /> te atrybuty SIZE WIDTH COLOR i inne – przestarzałe – obecnie stosuje się makroatrybut STYLE <HR style="height:20px;width:400px;border:1px solid yellow;background-color:yellow" /> whiteaqua silvergrayblue fuchsia lime red teal olive yellow maroon navy

  25. Kolory Oprócz nazw ang. można podawać 3 dwupozycyjne liczby w układzie szesnastkowym (cyfry 0123456789ABCDEF), określające nasycenie składowych RGB (red, green, blue) od 00 (minimum) do FF (maksimum = 25510) np. #17AACF czyli np. #00FF00 to zielony R G B

  26. Styl czcionki <B> tekst </B> pogrubiona <I> tekst </I> kursywa <U> tekst </U> podkreślona Stosuje się tylko lokalnie, np. wewnątrz akapitu dla krótkiego fragmentu tekstu <P>Litwo, <B> Ojczyzno </B> moja</P> tylko jedno słowo pogrubione

  27. Kolor tła strony – jako atrybut znacznika BODY <BODYBGCOLOR="nazwa koloru"> poprawniej: <BODY style="background-color:nazwa koloru"> motywy lub obrazek w tle strony można zdefiniować innymi parametrami stylu dla BODY – o tym za chwilę

  28. Tabele <TABLE BORDER="1"> …. </TABLE> <TR>…</TR> znacznik wiersza <TD>…</TD> znacznik kolumny Przykład: <TABLE BORDER="1"> <TR> <TD> AA </TD> <TD> AB </TD></TR> <TR> <TD> BA </TD> <TD> BB </TD> </TR> <TR> <TD> CA </TD> <TD> CB </TD> </TR> </TABLE>

  29. Lista wypunktowana <UL> <LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </UL> Lista numerowana <OL> <LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </OL>

  30. Przykład • <ol> • <li>Punkt 1.</li> • <li>Punkt 2. • <ul> • <li>Podpunkt 1.</li> • <li>Podpunkt 2.</li> • </ul> • </li> • </ol> • 1. Punkt 1. • 2. Punkt 2. • Podpunkt 1. • Podpunkt 2. efekt

  31. Grafika znacznik IMG <IMGSRC="ścieżka_do_pliku/nazwa_pliku" /> <IMG border="0" src="email_7.gif" width="55" height="45" /> <IMG SRC="OBRAZY/plik.jpg" HEIGHT="80" /> folder podrzędny względem tego, w którym jest plik HTML

  32. Odsyłacze (link – hiperłącze) Odsyłaczem jest konstrukcja, która wskazuje pewien adres (zakładka na tej samej stronie, inna strona, inny adres URL) i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. <A HREF= "adres " > Tekst (lub obrazek), który należy kliknąć </A> Np. <A HREF= " http://www.wp.pl" > Wirtualna Polska </A> <A HREF="http://www.microsoft.com/poland/”> Możesz zaglądnąć pod ten adres </A> <A HREF="./reklama.htm"> <IMG SRC="reklama.jpg" > </A>

  33. Formularze <FORM> <SELECTname="Typy" multiple="multiple"> <OPTION selected="selected">Rock and roll</OPTION> <OPTION>Jazz</OPTION> <OPTION>Blues</OPTION> </SELECT> <INPUTtype="RADIO" name="wybor" value="p" />Podstawowe <INPUTtype="RADIO" name="wybor" value="s" />Średnie <INPUTtype="RADIO" name="wybor" value="w" />Wyższe Wpisz tekst:<INPUTtype="text" name="T1" size="20"/> <INPUTtype="submit" value="OK" name="B1" /> <INPUTtype="reset" value="Reset" name="B2" /> ta sama nazwa cd. …

  34. <INPUT TYPE="CHECKBOX" NAME="ok" VALUE="B" /> OK <TEXTAREA NAME="TEKST" ROWS="5" COLS="20"> MIEJSCE NA WIĘKSZY TEKST </TEXTAREA><BR /> </FORM>

  35. efekt…

  36. Dla obsługi danych wpisanych do formularzy (np. ich wysłanie na serwer w celu zapisu czy też analizy) konieczne jest zastosowanie specjalnych metod

  37. Przykład dokumentu HTML <HTML> <HEAD> <TITLE> Moja strona </TITLE> </HEAD> <BODY bgcolor="gray"> <H1> To jest moja strona </H1> <HR size="2" align=leftcolor="navy" /> <TABLE BORDER="3"> <TR> <TD> AA </TD> <TD> AB </TD></TR> <TR> <TD> BA </TD> <TD> BB </TD> </TR> <TR> <TD> CA </TD> <TD> CB </TD> </TR> </TABLE> <UL> <LI> <A HREF='http://www.onet.pl>Onet</A> <LI> <A HREF='http://www.google.pl>GOOGLE</A> <LI> <A HREF='http://www.interia.pl>Interia</A> </UL> </BODY> </HTML> HEAD tabela BODY lista hiperłączy

  38. CSS – arkusze stylów opiera się na zasadzie określania cech elementy dzięki atrybutowi style <ZNACZNIKstyle="cecha:wartość"> ... Styl może mieć wiele cech, np.: <P style="font-size:20px;color:blue"> ... <TABLE style=" background-color:#ff0000; border:2px solid red;"> ... cechy stylu oddzielamy średnikami Opisy stylów mogą być w osobnym pliku

  39. Przykładowe cechy stylów

  40. Word (zapis w HTML)Microsoft Frontpage (stary) teraz ExpressionMacromediaDreamweaverPajączek inne Narzędzia dla autorów ("webmasterów")

  41. 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 DHTML, XHTML – arkusze stylów, Javascript

  42. Podstawowe składniki architektury WWW to: klient HTTP, serwer HTTP, protokół HTTP • Aplikacje WWW opierają się na automatycznym generowaniu dokumentów, wymagają serwera aplikacji • HTML – język znaczników – dokument HTML = plik HTML + załączniki – narzędzia edycyjne – liczne wady i ograniczenia (stały rozwój) Podsumowanie

  43. INFORMACJA MULTIMEDIALNA rysunek (obraz)  zbiór punktów punkt - pozycja i numer koloru  liczba binarna dźwięk - ton (wysokość) - numer tonu  liczba binarna - wartość (trwanie) - numer  liczba binarna - rytm - numer rytmu  liczba binarna - barwa - numer -  liczba binarna obraz ruchomy (animacja, film, transmisja online)

  44. Grafika komputerowa Wprowadzenie Zastosowania - rysunki - schematy - interfejsy użytkownika - wykresy (biznes, nauka, technika) grafika 2D, 3D - kartografia (mapy) - kreślenie i projektowanie wspomagane komputerowo CAD/CAM - symulacja i animacja (przetwarzanie) - rozpoznawanie obrazów Technika - wektorowa - rastrowapixel (picture element)

  45. Obraz - grafika bmp Cyfrowy zapis obrazu w postaci opisującej każdy piksel, bez żadnych uproszczeń, nazywany zapisem bitmapowym. Jest on najdokładniejszy – brak kompresji! – duże pliki! Pliki tego typu zapisywane są z rozszerzeniem bmp DUŻE PLIKI!!! wiele bajtów!

  46. problem rasteryzacji

  47. Kompresja danych Programowy proces redukcji objętości danych cyfrowych, wykorzystujący naturalną nadmiarowość w zapisie informacji – bazujący na redukcji powtórzeń w ciągu bitów, umożliwia zmniejszenie rozmiaru archiwum. Ważne z powodów: • składowanie (magazynowanie) • przesył

  48. Kompresja: z częściową utratą informacji pierwotnej (kompresja stratna) bez straty informacji źródłowej (kompresja bezstratna) np. w programach archiwizujących.

  49. Standard RGB Dominującym standardem zapisu barw jest RGB. R –red (czerwony) G –green (zielony) B –blue (niebieski). W wyniku mieszania tych barw można uzyskać dowolną inną barwę dostrzeganą przez ludzkie oko. W związku z tym, że dane o barwie każdego piksela składają się z ośmiobitowych informacji o nasyceniu czerwieni, zieleni i barwy niebieskiej, piksele zapisywane są 24 bitami (dla każdej barwy osiem bitów). Istnieje wiele innych standardów cyfrowego tworzenia barw, są to m.in.: CMY, CMYK, LAB, HLS, HSI, HSV, sRGB.

More Related