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 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
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
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
Kryptografia protokół SSL - HTTPS szyfrowanie asymetryczne – klucz publiczny i prywatny certyfikaty podpis elektroniczny
Wprowadzenie do aplikacji WWW • 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 Wskaźnik do zasobu w sieci Internet
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
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
PODSTAWOWA STRUKTURA dokumentu 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
<TAG atrybuty> zawartość </TAG> Znaczniki (tagi) <TAG atrybuty> 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>
<A href="www.onet.pl"> Onet </A> Przykładowo: <A href="www.onet.pl"> Onet </A> atrybut znacznik zamykający znacznik otwierający zawartość Zawartością może być inny znacznik
Dokument HTML Plik HTML Pliki załączników (np. grafika) 21 http://wazniak.mimuw.edu.pl
Tekst1 Tekst2 Tekst3 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 tabeli np. UWAGA: ciąg spacji HTML traktuje jak jedną – przy konieczności użycia kilku spacji stosuje się twarde spacje text text
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ą
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>
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" /> white aqua silver gray blue fuchsia lime red teal olive yellow maroon navy
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
<P>Litwo, <B> Ojczyzno </B> moja</P> 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"> 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ę
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>
Lista wypunktowana Lista numerowana <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>
<li>Punkt 1.</li> <li>Punkt 2. <ul> 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
Grafika znacznik IMG <IMG SRC="ś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
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>
Formularze <FORM> ta sama nazwa cd. … <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" /> ta sama nazwa cd. …
</FORM> <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 Dla obsługi danych wpisanych do formularzy (np. ich wysłanie na serwer w celu zapisu czy też analizy) konieczne jest zastosowanie specjalnych metod
Przykład dokumentu 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> HEAD tabela BODY lista hiperłączy
CSS – arkusze stylów <ZNACZNIK style="cecha:wartość"> ... opiera się na zasadzie określania cech elementy dzięki atrybutowi style <ZNACZNIK style="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
Przykładowe cechy stylów 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 obramowania dotted dashed solid border wiele cech obramowania 2px solid yellow color kolor tekstu yellow #669933 font-family rodzaj oraz rodzina czcionki Arial sans-serif font-size wielkość czcionki 14px 2cm font-style styl czcionki italic
Narzędzia dla autorów ("webmasterów") Word (zapis w HTML) Microsoft Frontpage (stary) teraz Expression Macromedia Dreamweaver Pajączek inne
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
Podsumowanie 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)
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)
Grafika komputerowa Wprowadzenie - wektorowa 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 - rastrowa pixel (picture element)
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!
problem rasteryzacji
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ł
Kompresja: z częściową utratą informacji pierwotnej (kompresja stratna) bez straty informacji źródłowej (kompresja bezstratna) np. w programach archiwizujących.
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.
Zapis bitmapowy vs wektorowy bitmapowy (rastrowy) wyróżnionym fragmentom obrazu odpowiadają cyfrowe zapisy pikseli (duże rozmiary) wektorowy tworzą go obiekty opisane matematycznie, np. równaniem prostej, łuku czy okręgu (b. małe rozmiary)
.jpg .gif Najczęstsze standardy grafiki skompresowanej .png Dobry do publikacji zdjęć WWW Głębia barw do 24 bitów Małe rozmiary plików .jpg Bardzo małe rozmiary plików Obsługują wszystkie przeglądarki Przezroczystość, animacje Głębia barw –tylko 8 bitów .gif 24-bitowy format jako alternatywa dla formatu GIF .png
INNE STANDARDY PLIKÓW GRAFICZNYCH 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…
Metody kompresji 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.
Kompresja HUFFMANA 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 FRAKTALNA Fraktal 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
Edytory graficzne 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.
Inne programy do obróbki grafiki IrfanView (przeglądarka grafiki i zdjęć) RawShooter Essentials 2006 GIMP 2.4.4 Photo Pos Pro Picassa – darmowy ThumbsPlus 7 –komercyjny Corel PaintShop Pro X2 - komercyjny Bardziej zaawansowane programy (np. Corel Trace) posiadają funkcję przetwarzania obrazów rastrowych w wektorowe (obiektowe)
PDFCreator – wydruk z aplikacji do formatu PDF Zamiana na format PDF Create Adobe PDF Online, PrimoPDF, Qprinter. PDFCreator – wydruk z aplikacji do formatu PDF konwertowane 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
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 najstarszy –Ventura Publisher, Corel Ventura, Adobe PageMaker QuarkXpress Scribus (open source)
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)
inne formaty: AAC, MPC, OCG Inne formaty stratnej kompresji 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
AVI –Audio Video Interleave, MPEG-4 MPEG-1 –przestarzały 352x288 Podstawowe formaty video AVI –Audio Video Interleave, MPEG-4 MPEG-1 –przestarzały 352x288 MPEG-2 –zmienny strumień MPEG-4 – kodowanie AVI DivX –komercyjna pochodna MPEG-4 inne SVCD, VCD –oparty na MPEG-1
Video - kodeki DivX XviD i inne
Komputer w identyfikacji obrazów (DNA obrazu) stylów pisarskich
Grafika Główny podział: bitmapowa (rastrowa) - np. Paint, Photoshop wektorowa – np.Corel, narzędzia w pakiecie Office , Visio i inne
Grafika bitmapowa (np. Paint) raster – element podstawowy to pixel- punkt ekranowy! typowa aplikacja: - nowy, otwarcie, zapisz, zapisz jako *.bmp, *.jpg, *.gif. *.png - ustawienia strony, podgląd wydruku, wydruk - schowek dostępne: - przybornik narzędzi (rysowanie, edycja) - opcje narzędzi - paleta kolorów (główny i tła) makro-obiekty: typ, rozmiar – tylko w trakcie tworzenia, potem "widziane" już jako sieć pikseli S. Wolek Wst. do Inf.
Figury + tekst kolory - główny i tła: - lewe albo prawe kliknięcie w kolor z palety - weź kolor + kliknięcie we fragment (lewe albo prawe) szczególne figury (dodany Shift): - linia pozioma, pionowa lub pod 450 - prostokąt kwadrat - elipsa okrąg udogodnienia: - rezygnacja - Esc - wycofanie Edycja Cofnij, Ctrl+Z - powtórzenie Edycja Powtórz, F4 S. Wolek Wst. do Inf. tekst: - przeźroczysty lub z kolorem tła - czcionka, rozmiar + styl - prosta edycja - w trakcie pisania
Edycja wycinek – grupa pixeli: - 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) gumka: - rozmiar - zwykła - lewy przycisk - kolorowa - prawy przycisk - rysowanie w kolorze tła powiększenia (bez tekstu): S. Wolek Wst. do Inf. - 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 Dostęp do kształtu w dowolnym momencie! - 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ólne organizacyjne kartograficzne informatyczne elektroniczne budowlane - 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)
własność kształtu: - 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 połączenia: - można niekiedy "przyklejać" do bloczków lub innych połączeń - można modyfikować jak bloczki 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)
Format kształtów linie (także kontur kształtów powierzchniowych) : - wzór (linia ciągła, kreskowana, kropkowana…) - grubość - kolor - zaokrąglenie (w figurach) - początek, koniec, rozmiar (w połączeniach) wypełnienie (fill): - wzór | brak (przeźroczysta) - kolor główny - kolor tła - cień (shadow) - wzór + 2 kolory ułożenia kształtek: - wierzch|spód - wyrównanie grupy (pionowo|poziomo - lewe, prawe, środkowe) - odbicia i obroty
kolejność zaczep obrotu