Bezpieczeństwo HTML Multimedia

Bezpieczeństwo

HTML

Multimedia

Technologia informacyjna

PWSW

Wykład 3

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

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

(także antidotum na programy szpiegujące, "konie trojańskie" i in.)

Programy antywirusowe

• Norton AntiVirus• ESET NOD 32• AVG• AVAST• Kaspersky AV• BitDefender

i inne

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

Zapora sieciowa (ang. firewall – ściana ogniowa)

Kryptografia

• protokół SSL - HTTPS• szyfrowanie asymetryczne – klucz

publiczny i prywatny• certyfikaty• podpis elektroniczny

Wprowadzenie do aplikacjiWWW

• Składniki architektury WWW– serwer HTTP– protokół HTTP– klient HTTP (hyper text transfer protocol) –

przeglądarka WWW– język HTML

Rys historyczny• Projekt Tima Bernersa-Lee dla

CERN (1989)

• Pierwsza przeglądarka – WorldWideWeb Mosaic

• Pierwszy serwer WWW - http

Składniki architektury WWW

• Klient HTTP (przeglądarka WWW)

• Serwer HTTP (serwer WWW)

• Protokół HTTP

Interakcja w środowisku WWW

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)

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

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

Wskaźnik do zasobu w sieci Internet

Adresy URL

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

17

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:

<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>

PODSTAWOWA STRUKTURA dokumentu HTML

konfiguracja

treśćstrony

Znaczniki (tagi)

<HTML><HEAD><TITLE> Tytuł w nagłówku okna </TITLE></HEAD> <BODY>Tu są elementy pojawiające się na stronie</BODY></HTML>

STRUKTURA dokumentu HTML

<TAG atrybuty> zawartość </TAG>

<A href="www.onet.pl"> Onet </A>

znacznik otwierający

atrybut

zawartość

znacznik zamykający

Przykładowo:

Zawartością może być inny znacznik

21

Dokument HTML• Plik HTML• Pliki załączników (np. grafika)

http://wazniak.mimuw.edu.pl

Zagnieżdżanie znaczników

<P> Tekst1<B><I> Tekst2 </I> Tekst 3</B></P>

Tekst1 Tekst2 Tekst3

<TD><IMG src="obraz.jpg" /></TD>obrazek w komórce tabelinp.

UWAGA: ciąg spacji HTML traktuje jak jedną – przy konieczności użycia kilku spacji stosuje się twarde spacje text text

<ZNACZNIK />

Znaczniki elementów pustych

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ą

Wybrane znaczniki …

Przykłady:<P align="center"> Tytuł </P><P align="left"> Tytuł2 </P>

<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>

Akapit tekstowy - znacznik <P> -

Akapity nagłówkowe określonych gotowych stylów

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

Linie poziome znacznik HRpusty – nie ma znacznika zamykającego

<HR SIZE="7" WIDTH="400" COLOR="yellow" />

<HR SIZE="8" WIDTH="100" ALIGN=left COLOR="navy" />

white aqua silver gray bluefuchsia lime red teal olive yellow maroon 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" />

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.

R G B

czyli np. #00FF00 to zielony

Kolory

#17AACF

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

Kolor tła strony – jako atrybut znacznika BODY

<BODY BGCOLOR="nazwa koloru">

motywy lub obrazek w tle strony można zdefiniować innymi parametrami stylu dla BODY – o tym za chwilę

<BODY style="background-color:nazwa koloru">

poprawniej:

<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>

Tabele

<UL><LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </UL>

Lista wypunktowana

Lista numerowana

<OL><LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </OL>

<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.

Przykład

efekt

Grafikaznacznik IMG

<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

<IMG SRC="ścieżka_do_pliku/nazwa_pliku" />

Odsyłacze (link – hiperłącze)

<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>

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ą.

Formularze<FORM><SELECT name="Typy" multiple="multiple"> <OPTION selected="selected">Rock and roll</OPTION> <OPTION>Jazz</OPTION> <OPTION>Blues</OPTION></SELECT>

<INPUT type="RADIO" name="wybor" value="p" />Podstawowe<INPUT type="RADIO" name="wybor" value="s" />Średnie<INPUT type="RADIO" name="wybor" value="w" />Wyższe

Wpisz tekst:<INPUT type="text" name="T1" size="20"/><INPUT type="submit" value="OK" name="B1" /><INPUT type="reset" value="Reset" name="B2" />

cd. …

ta sama nazwa

<INPUT TYPE="CHECKBOX" NAME="ok" VALUE="B" /> OK

<TEXTAREA NAME="TEKST" ROWS="5" COLS="20"> MIEJSCE NA WIĘKSZY TEKST </TEXTAREA><BR />

</FORM>

efekt…

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

<HTML><HEAD><TITLE> Moja strona </TITLE></HEAD> <BODY bgcolor="gray"><H1> To jest moja strona </H1><HR size="2" align=left color="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>

Przykład dokumentu HTML

tabela

listahiperłączy

BODY

HEAD

CSS – arkusze stylów

Styl może mieć wiele cech, np.:

<ZNACZNIK style="cecha:wartość"> ...

<TABLE style=" background-color:#ff0000; border:2px solid red;"> ...

cechy stylu oddzielamy średnikami

opiera się na zasadzie określania cech elementy dzięki atrybutowi style

<P style="font-size:20px;color:blue"> ...

Opisy stylów mogą być w osobnym pliku

Przykładowe cechy stylów

Styl Opis Przykładowa wartość

background-color kolor tła#ff0000 albo rgb(255,0,0)blue

background-image adres pliku tła graficznego url('rys1.gif ')

border-color kolor obramowania red

border-style styl i wygląd obramowaniadotted dashed solid

border wiele cech obramowania 2px solid yellow

color kolor tekstuyellow #669933

font-family rodzaj oraz rodzina czcionki Arial sans-serif

font-size wielkość czcionki14px2cm

font-style styl czcionki italic

Word (zapis w HTML)Microsoft Frontpage (stary) teraz Expression Macromedia DreamweaverPajączek

inne

Narzędzia dla autorów ("webmasteró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

DHTML, XHTML – arkusze stylów, Javascript

Podstawowe składniki architektury WWW to:klient HTTP,serwer HTTP,protokół HTTP

• Aplikacje WWW opierają się na automatycznymgenerowaniu 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

INFORMACJA MULTIMEDIALNA

rysunek (obraz) zbiór punktówpunkt - 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)

Wprowadzenie

- 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

Grafika komputerowa

Zastosowania

- wektorowa- rastrowa pixel (picture element)

Technika

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!

bmp

Obraz - grafika

problem rasteryzacji

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ł

Kompresja danych

Kompresja:

z częściową utratą informacji pierwotnej (kompresja stratna)

bez straty informacji źródłowej (kompresja bezstratna) np. w programach archiwizujących.

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.

Standard RGB

bitmapowy (rastrowy)wyróżnionym fragmentom obrazu odpowiadają cyfrowe zapisy pikseli (duże rozmiary)

wektorowytworzą go obiekty opisane matematycznie, np. równaniem prostej, łuku czy okręgu (b. małe rozmiary)

Zapis bitmapowy vs wektorowy

Dobry do publikacji zdjęć WWWGłębia barw do 24 bitówMałe rozmiary plików

Bardzo małe rozmiary plikówObsługują wszystkie przeglądarkiPrzezroczystość, animacjeGłębia barw –tylko 8 bitów

Najczęstsze standardy grafiki skompresowanej

.jpg

.gif

.png 24-bitowy format jako alternatywa dla formatu GIF

PDF – jest używany przez program Adobe Acrobat,

PICT - używany przez programy graficzne jako format pośredni do przesyłania plików między aplikacjami, wykazuje szczególną efektywność przy kompresowaniu obrazków zawierających duże obszary jednolitego koloru. Obrazki w skali szarości mogą mieć 2, 4 lub 8 bitów na piksel.

i inne…

INNE STANDARDY PLIKÓW GRAFICZNYCH

DCT (Discrete Cosinus Transformation) algorytm wykorzystujący kodowanie metodą JPEG i MPEG.

Obraz dzielony jest na bloki o wielkości 8x8 pikseli. Każdy blok jest analizowany przez algorytm ze względu na zmianę kolorów. Jeśli początkowy blok składa się z jednobarwnej powierzchni, to można go opisać za pomocą jednej wartości. Jeśli barwa zmienia się tylko trochę w obrębie bloku, potrzeba już więcej wartości w celu opisania tego bloku itd.Ponieważ wiele bloków jednego obrazu cechują jedynie niewielkie zmiany koloru, ilość niezbędnych informacji będzie zredukowana.

Metody kompresji

obraz jest analizowany ze względu na częstość występowania poszczególnych kolorów. Kolor występujący najczęściej otrzymuje najkrótszy kod, drugi otrzymuje drugi najkrótszy itd., dzięki temu zmniejsza się ilość miejsca niezbędnego do zapamiętania.

Kompresja HUFFMANA

Kompresja FRAKTALNAFraktal to twór podobny do samego siebie - po jego

dowolnym powiększeniu otrzymuje się zawsze podobny obraz, np. płatek śniegu.

Ideą fraktalnej kompresji obrazów jest znalezienie w danym obrazie fraktalnego wzorca i wyrażenie go za pomocą formuły matematycznej.

Proces kompresji jest wolniejszy niż kodowanie inną metodą, jednak ze względu na jakość obrazu metoda ta znacznie przewyższa technologię JPEG.

Kompresja fraktalna nadaje się zarówno dla obrazów nieruchomych jak i obrazów ruchomych.

fraktal Mandelbrota

specjalizowane programy służące do tworzenia i edycji map bitowych, nazywanych także grafiką rastrową:Photoshop,CorelDraw Suite,Paint (Windows )

Do obróbki grafiki wektorowej wykorzystuje się m.in: CorelDraw, PageMaker, Adobe Illustrator, Visio.

Edytory graficzne

IrfanView (przeglądarka grafiki i zdjęć)RawShooter Essentials 2006GIMP 2.4.4Photo Pos ProPicassa – darmowyThumbsPlus 7 –komercyjnyCorel PaintShop Pro X2 - komercyjny

Inne programy do obróbki grafiki

Bardziej zaawansowane programy (np. Corel Trace) posiadają funkcję przetwarzania obrazów rastrowych w wektorowe (obiektowe)

Create Adobe PDF Online, PrimoPDF, Qprinter.

PDFCreator – wydruk z aplikacji do formatu PDFkonwertowane dane można zabezpieczać hasłem, szyfrować, kompresować i podpisywać.

OpenOffice ma możliwość bezpośredniego eksportu plików do formatu PDF

Microsoft udostępnia "wtyczkę" do eksportu do tego formatu w najnowszym pakiecie Microsoft Office oraz konwerter –NOVAPDF -do każdej aplikacji generującej dokument pod Windows

Zamiana na format PDF

najstarszy –Ventura Publisher,Corel Ventura,Adobe PageMaker QuarkXpress Scribus (open source)

DTP(ang. Desktop Publishing)

zajmuje się profesjonalnym, kompletnym przygotowaniem materiałów do druku („składem”).

Programy DTP umożliwiają import kilkudziesięciu formatów dokumentów

mp3

Kompresja innych mediów

kompresja dźwięku z wkalkulowaną stratą jakości (m.in. usuwanie b. wysokich i b. niskich częstotliwości, cichych dźwięków)

WMA –Windows Media Audio. Utwór przy kompresji 64 Kb/s zajmuje połowę miejsca w porównaniu z MP3. Porównywalna jakość

inne formaty: AAC, MPC, OCG

Inne formaty stratnej kompresji dźwięków

AVI –Audio Video Interleave, MPEG-4MPEG-1 –przestarzały 352x288MPEG-2 –zmienny strumieńMPEG-4 – kodowanie AVIDivX –komercyjna pochodna MPEG-4

inne SVCD, VCD –oparty na MPEG-1

Podstawowe formaty video

Video - kodeki

DivX XviD

i inne

· obrazów (DNA obrazu)

· stylów pisarskich

Komputer w identyfikacji

• bitmapowa (rastrowa) - np. Paint, Photoshop • wektorowa – np.Corel, narzędzia w pakiecie

Office , Visio i inne

Grafika

Główny podział:

- nowy, otwarcie, zapisz, zapisz jako *.bmp, *.jpg, *.gif. *.png- ustawienia strony, podgląd wydruku, wydruk- schowek

Grafika bitmapowa (np. Paint)

· typowa aplikacja:

- przybornik narzędzi (rysowanie, edycja)- opcje narzędzi- paleta kolorów (główny i tła)

· dostępne:

· makro-obiekty:- typ, rozmiar – tylko w trakcie tworzenia, potem

"widziane" już jako sieć pikseli

raster – element podstawowy to pixel- punkt ekranowy!

- linia pozioma, pionowa lub pod 450

- prostokąt kwadrat- elipsa okrąg

Figury + tekst· kolory - główny i tła:

· szczególne figury (dodany Shift):

· udogodnienia:

- rezygnacja - Esc- wycofanie Edycja Cofnij, Ctrl+Z- powtórzenie Edycja Powtórz, F4

- lewe albo prawe kliknięcie w kolor z palety- weź kolor + kliknięcie we fragment (lewe albo prawe)

· tekst:

- przeźroczysty lub z kolorem tła- czcionka, rozmiar + styl- prosta edycja - w trakcie pisania

Edycja· wycinek – grupa pixeli:

· gumka:

- rozmiar- zwykła - lewy przycisk- kolorowa - prawy przycisk- rysowanie w kolorze tła

- prostokątny, dowolny- przeźroczysty lub z kolorem tła- myszką ciągnięcie- przesuwanie (lub z Ctrl kopiowanie)- zmiana rozmiaru (niezalecana – rośnie rasteryzacja)- usuwanie (Del)- operacje przez schowek

(także do innych aplikacji)- dodatkowo Kopiuj do... Wklej z ... (pliku)

· powiększenia (bez tekstu):

- skokowe lub płynne- siatka (Ctrl+G grid)- możliwa miniaturka

Efekty specjalne

- rozciąganie (skalowanie) bitmapy – uwaga: może zwiększyć rasteryzację

- odwracanie kolorów

Grafika wektorowa- rysunek-schemat składa się z kształtów

(bloczków, obiektów - ang. shape)bloczki (figury dwuwymiarowe)linie - jednowymiarowe- technika ciągnij i upuść (ang. drag & drop)- dostępne wzorniki (zestawienia kształtów- Autokształty), np.:

ogólneorganizacyjnekartograficzneinformatyczneelektronicznebudowlane- okno robocze może mieć roboczą siatkę - ułatwia pozycjonowanie- bloczki i połączenia mogą być sklejane

Dostęp do kształtu w dowolnym momencie!

Każdy obiekt można w dowolnym momencie wskazać narzędziem wskazywania (Pointer tool)

- przemieszczanie - przeciąganie- kopiowanie - zmiana rozmiaru - przeciągnięcie za znaczniki- kąt obrotu- większość może być opisywana tekstem (2x kliknięcie) lub pola tekstowe

· własność kształtu:

- można niekiedy "przyklejać" do bloczków lub innych połączeń- można modyfikować jak bloczki

· połączenia:

· operacje przez schowek

· grupy kształtek:

- zaznaczanie - Shift+kliknięcie- otaczanie

- usuwanie, kopiowanie, przesuwanie, grupowanie (tworzy jeden obiekt z wielu)

Np. galeria Clipart w MS Office tworzona wektorowo – obiekty można rozgrupować

Edycja kształtów

punkt gładki (prowadnice)

WYDZIAŁ

kadra studenci

Nazwiskoi imię

Początek

Operacjepoczątkowe

wszystko?

przetwarzanie

Koniec

nie

tak

Format kształtów

- wzór (linia ciągła, kreskowana, kropkowana…)- grubość- kolor- zaokrąglenie (w figurach)- początek, koniec, rozmiar (w połączeniach)

· linie (także kontur kształtów powierzchniowych) :

- wzór | brak (przeźroczysta)- kolor główny- kolor tła- cień (shadow) - wzór + 2 kolory

· wypełnienie (fill):

- wierzch|spód- wyrównanie grupy (pionowo|poziomo - lewe, prawe, środkowe)- odbicia i obroty

· ułożenia kształtek:

kolejność

zaczep obrotu

Bezpieczeństwo HTML Multimedia

Documents

Transcript of Bezpieczeństwo HTML Multimedia