Wykład 2 Windows WWW - HTML Grafika

1. Technologie informacyjne ZIiP zaoczne sem. 1 Wykład 2WindowsWWW - HTMLGrafika

2. Dyskowy system plików organizacja logiczna informacji

3. Prosta struktura systemu plików Pamięci zewnętrzne oznacza się literamiz dwukropkiem G: optyczne Flash "pendrive" DVD określenie pliku nazwa pamięci : nazwa pliku np.: A: list_1.txt C: turbo.exe niedogodność - pojemne dyski i duża liczba plików - nazwy nie mogą się powtarzać Stąd wynika konieczność systematyzacji (KATALOGI/FOLDERY)

4. Plik (ang. file) - zbiór informacji o spójnym logicznie znaczeniu - o nazwie (identyfikatorze) nadawanej przez użytkownika lista płac - zestaw nazwisk + kwot pismo, list program komputerowy rysunek Nazwa pliku nazwa właściwa [.rozszerzenie] zawartość pliku typ (sposób zapisu informacji) litery, cyfry, _, inne Fizycznie ciąg bajtów w pamięci zewnętrznej (HD, CD, DVD, flash)

5. Np.: list_1.txt list_2.docx lta_plac.98 lta_10_98.plc read.me lta_stud_1KDR.xlsx Standardowe rozszerzenia: sys - systemowe com, exe, bat, dll - programy docx- Word txt - ASCII bmp, jpg, png- rysunek pas - j. Pascal xlsx- arkusz Excel

6. Przykład: 1 znak tekstu 1B 1 wiersz tekstu 60B 1 strona A4 tekstu 25*60 = 1500B = 1,5KB 10 stron 15KB 1 plik CD-ROM 700MB 5 000 książek ( 50 000 plików) dysk 400GB 3 000 000 książek ( 300 000 plików) Hierarchiczna (katalogowa, drzewiasta) struktura systemu plików • Katalog (folder) • grupa plików • nazwana - jak plik (zwyczajowo bez rozszerzenia) • o organizacji hierarchicznej (podkatalogi)

7. Zalety - różne nazwy tylko w jednym katalogu - wielu użytkowników - własne podkatalogi - w danym momencie operujemy w zakresie jednego katalogu Określenie położenia pliku - pełna nazwa C:\LISTY\BRAT\b1_98.doc dysk + ścieżka dojścia + nazwa pliku

8. Struktura oprogramowania (software) użytkowe (własne) opracowywane samodzielnie na indywidualne zamówienia systemowe niezbędne podstawowe wyposażenie komputera usługowe typowego przetwarzania dostępne w handlu Oprogramowanie systemowe: program wprowadzający (ang. bootstrap) - w pamięci EPROM • system operacyjny - zarządzanie zasobami komputera: • - gospodarowanie czasem pracy komputera • zarządzanie pamięcią operacyjną • obsługa systemu plików w pamięciach zewnętrznych • dialog z użytkownikiem • współpraca z innymi komputerami

9. Systemy operacyjne • DOS - środowisko tekstowe, • Windows 3.x (3.1, 3.11 for WORKGROUPS)- nakładka, system graficzny, 16-bitowy • Windows 95, 98 2000, XP, VISTA, Windows 7- 32-bitowy lub 64-bitowy, graficzny odmiany – Solaris, XWindows, MACWindows • UNIX - znakowy, do zastosowań profesjonalnych wiele dystrybucji (UBUNTU, RedHat, Debian i in.) • NOVELL Netware - system sieciowy

10. Programy usługowe • edycja tekstu • grafika • wspomaganie inżynierskie (projektowanie, zestawienia typu arkusz kalkulacyjny, programy obliczeniowe) • komunikacja sieciowa • zarządzanie bazami danych • środowiska programowania w różnych językach – dla twórców oprogramowania • programy obsługi multimediów (tworzenie, edycja, odtwarzanie, kodowanie) • rozrywka

11. Niezawodność sprzętowa UPS- y (Uninterruptible Power Supply) – zasilanie awaryjne Macierze RAID (Redundant Arrays of Inexpensive Disks) – podwójny zapis Backup – kopie zapasowe Klastry (cluster) - grupa komputerów połączona prywatną siecią

12. Serwer • Komputer lub zestaw sieciowo współpracujących komputerów (np. klastry) z zainstalowanym odpowiednim oprogramowaniem umożliwiającym współdzielenie swoich zasobów: • mocy obliczeniowej, • zasobów dyskowych • urządzeń peryferyjnych • łączności cyfrowej Wymagane bezawaryjne działanie > 5 lat

13. Typy serwerów • aplikacji (komputery z oprogramowaniem wspomagającym statutową działalność firmy), • bazodanowe (komputery obsługujące bazy danych wykorzystywane w firmie), • WWW, • systemu archiwizacji i backup’u, • systemów komunikacyjnych (sprzęt, w postaci specjalizowanych komputerów ze stosownym oprogramowaniem służący do niezawodnej i bezpiecznej cyfrowej komunikacji w ramach firmy/korporacji i z komputerami/systemami zewnętrznymi).

14. Oprogramowanie systemowe • System operacyjny • BIOS –Basic InstructionsOperating System • Zespół współpracujących programów zapewniających: • –przyjazną współpracę z komputerem (łatwe korzystanie z jego potencjału), • –optymalne wykorzystanie możliwości sprzętu, • –wielozadaniowość i wielodostępność. • interfejs graficzny – GUI (ang. GraphicalUserInterface) • Najpowszechniejszy: Windows i jego nowa edycja: Windows 7 (Windows 8)

15. Systemy operacyjne Windows 95/98, 2000, XP, VISTA, Windows 7, Windows 8 Windows NT 4.0 Windows Server 2003 Java_VM Linux – UNIX (Red Hat, Fedora, Debian i inne MacOS NetWare (Novell) OS/2 QNX Solaris

16. Strony WWW (World Wide Web) Mosaic – pierwsza przeglądarka 1993 Internet Explorer Opera Firefox(Mozilla) Safari Chrome(Google)

17. HTML HTML (ang. HyperText Markup Language, pol. hipertekstowy język znaczników) – język wykorzystywany do tworzenia stron internetowych HTML – kod źródłowy języka, można bezpośrednio pisać korzystając z edytora tekstu nieformatowanego (ASCII) np. Notatnik – zapis w pliku z rozszerzeniem htm lub html • HTML • zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce internetowej, • osadzanie ciągów instrukcji języków skryptowych, wpływających na zachowanie przeglądarek lub innych parserów HTML.

18. Dynamiczny HTML lub DHTML (ang. Dynamic HyperText Markup Language, dynamiczny hipertekstowy język znaczników) • techniki służące do dynamicznej zmiany treści, wyglądu, zachowania dokumentu HTML • umożliwiających interakcję strony www z użytkownikiem i stosowanie efektów wizualnych

19. Znaczniki (tagi) – postać ogólna <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> konfiguracja treść strony

20. Przykład <A href="http://www.onet.pl"> Onet </A> nazwa atrybutu wartość atrybutu znacznik zamykający znacznik otwierający zawartość

21. Znaczniki podstawowe (jest ich ok. 80) • Strukturalne • H1 – nagłówek • P – akapit • DIV, SPAN - grupujące • Prezentacyjne • B – pogrubienie • I – italic • Hiperłącza (kotwice) • A

22. Zagnieżdżanie znaczników <P> Tekst1<B><I> Tekst2 </I> Tekst 3</B></P> Tekst3 Tekst2 Tekst1 <TD><IMGsrc="obraz.jpg"></TD> obrazek w komórce tabeli

23. Znaczniki elementów pustych <TAG /> 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ą

24. Wybrane znaczniki … Akapit tekstowy - znacznik <P> - Przykłady: <P> Tytuł </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

25. Linie poziome znacznik HR <HR />

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>

27. Kolor tła strony – jako atrybut znacznika BODY <BODY style="background-color:nazwa koloru"> whiteaqua silvergrayblue fuchsia lime red teal olive yellow maroon navy inne kolory oraz np. motywy lub obrazek w tle strony można zdefiniować parametrem stylu dla BODY

28. Kolory Oprócz nazw angielskich - właściwości odpowiedniej cechy stylu dla znaczników można podawać 3 liczby w układzie szesnastkowym, określające nasycenie składowych RGB (red, green, blue) np. #17AACF R G B czyli np. <P style="background-color:#00FF00">A</P> efekt: AA

29. Tabele <TABLE BORDER="1"> </TABLE> <TR></TR> znacznik wiersza <TD></TD> znacznik kolumny Przykład: <TABLE style="border:1px solid red"> <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>

30. Lista wypunktowana <UL> <LI> tekst punktu pierwszego <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>

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

32. Grafika znacznik IMG <IMG SRC="ścieżka\plik_graficzny" /> <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

33. 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/”> Microsoft </A> <A HREF="./reklama.htm"> <IMG SRC="reklama.jpg" > </A>

34. Przykład skryptu HTML <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></FONT> </BODY> </HTML> tabela BODY lista hiperłączy

35. CSS – arkusze stylów <TABLE style=" background-color:#ff0000; "> ... Styl może mieć wiele cech, np..: <TABLE style=" background-color:#ff0000; border:2px solid red;"> ... cechy oddzielamy średnikami

36. Przykładowe cechy stylów

38. IT – (Information technology) w firmie Systemy wspomagające • obieg dokumentów w firmie, • bazy i hurtownie danych, • CRM - relacje z klientem • MRP - planowanie zasobów przedsiębiorstwa • ERP – zarządzanie pracownikami • statystyki kontaktów, • i inne.

39. Programy biurowe • Pakiet Office – firma Microsoft. • Zawiera on cztery podstawowe aplikacje: • –Microsoft Word (edytor tekstu), • –Microsoft Excel (arkusz kalkulacyjny), • –Microsoft PowerPoint (tworzenie i wyświetlanie prezentacji multimedialnej), • –Microsoft Access (tworzenie i zarządzanie bazami danych)

40. Dane – sztuczne lub naturalne sygnały, które mogą mieć znaczenie. Sztuczne – mikrofon, komputer, głośnik itp. Naturalne: obraz, dźwięk odbierane bezpośrednio przez zmysły. Informacja – dane, które mając znaczenie, są odbierane w celu ich wykorzystania. Problemy z zapisem i przetworzeniem – nadmiar np. fotografie z satelitów

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

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

43. problem rasteryzacji

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

45. Kompresja • zmniejszenie rozmiaru informacji w celu: • łatwiejszej transmisji • składowania - archiwizacji • Kompresja: • bezstratna – nie ma utraty jakości – wykorzystuje się tzw. redundancję – powtarzające się bloki informacji • stratna – utrata jakości – mniej szczegółów w obrazie, obcięte nieistotne dźwięki (MP3) itp.

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

47. Zapis bitmapowy vs wektorowy 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 (mniejsze rozmiary plików)

48. STANDARDY PLIKÓW GRAFICZNYCH JPEG(Joint PhotographicExpert Group) - umożliwia stratną jak i bezstratną kompresję danych, popularny w sieci. BMP– niekopresowany, bitmapa, duże pliki PDF – jest używany przez program AdobeAcrobat,

49. Edytory graficzne specjalizowane programy służące do tworzenia i edycji map bitowych, nazywanych także grafiką rastrową: Photoshop, CorelDraw Suite, Corel PhotoPaint Do obróbki grafiki wektorowej wykorzystuje się m.in: CorelDraw, PageMaker, Adobe Illustrator, Visio.

50. Inne programy do obróbki grafiki IrfanView (przeglądarka grafiki i zdjęć) RawShooter Essentials 2006 GIMP 2.4.4 Photo Pos Pro Picasa 2.7 –darmowy ThumbsPlus 7 –komercyjny Corel PaintShop Pro X2 - komercyjny Bardziej zaawansowane programy (np. Corel Trace) posiadają funkcję przetwarzania obrazów rastrowych w wektorowe (obiektowe)