Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

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

Podobne prezentacje


Prezentacja na temat: "Bezpieczeństwo HTML Multimedia Technologia informacyjna PWSW Wykład 3."— Zapis prezentacji:

1

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

3

4 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

5 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

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

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

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

9 Wprowadzenie do aplikacji WWW Składniki architektury WWW – serwer HTTP – protokół HTTP – klient HTTP (hyper text transfer protocol) – przeglądarka WWW – język HTML

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

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

12 Interakcja w środowisku WWW

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

14 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

15 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

16 Wskaźnik do zasobu w sieci Internet Adresy URL

17 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

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

19 Tytuł w nagłówku okna Tu są elementy pojawiające się na stronie w postaci znaczników PODSTAWOWA STRUKTURA dokumentu HTML konfiguracja treść strony

20 Znaczniki (tagi) Tytuł w nagłówku okna Tu są elementy pojawiające się na stronie STRUKTURA dokumentu HTML zawartość

21 Onet znacznik otwierający atrybut zawartość znacznik zamykający Przykładowo: Zawartością może być inny znacznik

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

23 Zagnieżdżanie znaczników Tekst1 Tekst2 Tekst 3 Tekst1 Tekst2Tekst3 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

24 Znaczniki elementów pustych przykładowo: wymuszona zmiana wiersza grafika pole formularza można pisać: lub lecz zgodnie z XHTML powinno być: ze spacją

25 Wybrane znaczniki … Przykłady: Tytuł Tytuł2 Nagłówek pierwszy Nagłówek drugi Nagłówek trzeci Nagłówek czwarty Nagłówek piąty Nagłówek szósty Akapit tekstowy - znacznik - 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 ale niezalecany dla nowszych standardów HTML

26 Linie poziome znacznik HR pusty – nie ma znacznika zamykającego white aqua silver gray blue fuchsia lime red teal olive yellow maroon navy te atrybuty SIZE WIDTH COLOR i inne – przestarzałe – obecnie stosuje się makroatrybut STYLE

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

28 Styl czcionki tekst pogrubiona tekst kursywa tekst podkreślona Stosuje się tylko lokalnie, np. wewnątrz akapitu dla krótkiego fragmentu tekstu Litwo, Ojczyzno moja tylko jedno słowo pogrubione

29 Kolor tła strony – jako atrybut znacznika BODY motywy lub obrazek w tle strony można zdefiniować innymi parametrami stylu dla BODY – o tym za chwilę poprawniej:

30 …. … znacznik wiersza … znacznik kolumny Przykład: AA AB BA BB CA CB Tabele

31 tekst punktu pierwszego tekst punktu drugiego tekst punktu trzeciego Lista wypunktowana Lista numerowana tekst punktu pierwszego tekst punktu drugiego tekst punktu trzeciego

32 Punkt 1. Punkt 2. Podpunkt 1. Podpunkt Punkt Punkt 2. Podpunkt 1. Podpunkt 2. Przykład efekt

33 Grafika znacznik IMG folder podrzędny względem tego, w którym jest plik HTML

34 Odsyłacze (link – hiperłącze) Tekst (lub obrazek), który należy kliknąć Np. Wirtualna Polska Możesz zaglądnąć pod ten adres 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ą.

35 Formularze Rock and roll Jazz Blues Podstawowe Średnie Wyższe Wpisz tekst: cd. … ta sama nazwa

36 OK MIEJSCE NA WIĘKSZY TEKST

37 efekt…

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

39 Moja strona To jest moja strona AA AB BA BB CA CB Onet GOOGLE Interia Przykład dokumentu HTML tabela lista hiperłączy BODY HEAD

40 CSS – arkusze stylów Styl może mieć wiele cech, np.:... cechy stylu oddzielamy średnikami opiera się na zasadzie określania cech elementy dzięki atrybutowi style... Opisy stylów mogą być w osobnym pliku

41 Przykładowe cechy stylów Styl OpisPrzykładowa wartość background-color kolor tła #ff0000 albo rgb(255,0,0) blue background-image adres pliku tła graficznegourl('rys1.gif ') border-color kolor obramowaniared border-style styl i wygląd obramowania dotted dashed solid border wiele cech obramowania2px solid yellow color kolor tekstu yellow # font-family rodzaj oraz rodzina czcionkiArial sans-serif font-size wielkość czcionki 14px 2cm font-style styl czcionkiitalic

42 Word (zapis w HTML) Microsoft Frontpage (stary) teraz Expression Macromedia Dreamweaver Pajączek inne Narzędzia dla autorów ("webmasterów")

43 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

44 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

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

46 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 - rastrowapixel (picture element) Technika

47 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

48 problem rasteryzacji

49 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

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

51 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

52 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) Zapis bitmapowy vs wektorowy

53 Dobry do publikacji zdjęć WWW Głębia barw do 24 bitów Małe rozmiary plików Bardzo małe rozmiary plików Obsługują wszystkie przeglądarki Przezroczystość, animacje Głębia barw –tylko 8 bitów Najczęstsze standardy grafiki skompresowanej.jpg.gif.png 24-bitowy format jako alternatywa dla formatu GIF

54 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

55 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

56 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

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

58 fraktal Mandelbrota

59 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

60 IrfanView (przeglądarka grafiki i zdjęć) RawShooter Essentials 2006 GIMP Photo Pos Pro Picassa – darmowy ThumbsPlus 7 –komercyjny Corel 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)

61 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 Zamiana na format PDF

62 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

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

64 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

65 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 Podstawowe formaty video

66 Video - kodeki DivX XviD i inne

67  obrazów (DNA obrazu)  stylów pisarskich Komputer w identyfikacji

68 bitmapowa (rastrowa) - np. Paint, Photoshop wektorowa – np.Corel, narzędzia w pakiecie Office, Visio i inne Grafika Główny podział:

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

70 - linia pozioma, pionowa lub pod 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

71 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

72 Efekty specjalne - rozciąganie (skalowanie) bitmapy – uwaga: może zwiększyć rasteryzację - odwracanie kolorów

73 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ó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)

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

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

76

77 Edycja kształtów punkt gładki (prowadnice)

78

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

80 kolejność zaczep obrotu


Pobierz ppt "Bezpieczeństwo HTML Multimedia Technologia informacyjna PWSW Wykład 3."

Podobne prezentacje


Reklamy Google