Potrzebne programy

Ćwiczenie 0_3_0_1

1. Otwórz systemowy Notatnik.
2. Nie wpisuj żadnego tekstu.
3. Wybierz Plik - Zapisz jako.
4. W polu Nazwa pliku: wpisz dokument_html.html.
5. Z listy Zapisz jako typ: wybierz Wszystkie pliki.
6. Z listy Kodowanie: wybierz UTF-8.
7. Zapisz plik na Pulpicie i zamknij.
8. Spójrz na Pulpit i znajdź zapisany przed chwilą plik. Zwróć uwagę, że ma on ikonkę domyślnej przeglądarki.
9. Kliknij podwójnie ikonkę - otworzy się przeglądarka.
10. Usuń plik.

Jednak nie polecałbym Notatnika. Edytor pracujący w trybie tekstowym (pracujemy bezpośrednio na kodzie) w układzie "de lux" powinien posiadać następujące funkcje:

• domykanie znaczników,
• kolorowanie składni,
• przesuwanie bloków tekstu,
• kodowanie,
• kodowanie polskich znaków z standardzie ISO i UTF,
• automatycznie generowanie fragmentów kodu,
• sprawdzanie poprawności kodu.

Na rynku znajduje się wiele edytorów spełniających te wymagania. Osobiście proponuję darmowy Notepad++, który spełnia niemal wszystkie opisane wymagania (poza punktami 1 i 6). Tym narzędziem, będziemy się posługować w dalszym toku nauki. Od razu podam kilka ważnych wskazówek do pracy z tym programem.

Jak przesunąć blok? Najpierw trzeba go odpowiednio zaznaczyć - musimy zaznaczyć całe wiersze. Klawiszem Home ustawiamy się na początku pierwszego wiersza bloku który chcemy przesunąć. Zwróć uwagę, że kursor tekstowy może nie znaleźć się od razu na początku wiersza, wtedy Home trzeba zastosować ponownie. Następnie wciskamy lewy Shift i trzymając go wciśniętym, zaznaczamy potrzebne wiersze za pomocą klawisza kursorowego (strzałka w dół). Tak zaznaczony blok możemy przesunąć w prawo za pomocą Tab, natomiast w lewo za pomocą Shift+Tab.

Będąc przy temacie edytorów , należy wspomnieć o graficznych etytorach html. Te narzędzia nie wymagają znajmości kodu html i powinny spełniać standard WYSIWYG (What You See Is What You Get - to co widzisz, jest tym co otrzymasz). Użytkownik może np. przeciągać i upuszczać myszką elementy strony. Pracujemy podobnie jak np. w edytorze tekstu MS Word. (nawiasem mówiąc ten edytor umożliwia eksport do formatu html). Mówiąc w skrócie w przypadku tych edytorów jest tak, że my się "bawimy układając puzzle", natomiast program automatycznie generuje kod html którego nie musimy nawet oglądać - chociaż najczęściej możemy go również "ręcznie" edytować. To jest to! Nie muszę się uczyć html, a i tak zrobię stronę! Po co mi więc ten cały html? Nie będę chodził pieszo, jak mam samochód. Pomalutku, każdy medal ma dwie strony. Tą drugą stroną jest jakość kodu generowanego automatycznie. Jak nie wierzysz, to np. zapisz dokument MS Woda Zapisz jako - Inne formaty - Strona sieci Web a następnie zajrzyj do automatycznie wygenerowanego kodu. I co? Raczej z tym, to nic się już nie da zrobić. No właśnie - automaty generują kod mało czytelny, który nie nadaje się praktycznie do oprogramowania. Nie znaczy to oczywiście, że ich istnienie nie ma sensu. Dzisiaj, każdy (no, może prawie każdy) chciałby mieć swoją stronę WWW, a nie każdy musi się uczyć kodu HTML. Uczeń technikum informatycznego musi i ten fakt definitywnie roztrzyga ewentualne dylematy.

Ćwiczenie 0_3_0_2

1. Otwórz Notepad++.
2. Jeżeli masz wersję anglojęzyczną wybierz Ustawienia - Preferencje - Ogólne - Język - Polski.
3. Zapoznaj się z programem.
4. Wybierz format kodowania bieżącego pliku Format - Koduj w UTF-8 (bez BOM).
5. Wybierz domyślny format kodowania nowego dokumentuUstawienia - Preferencje - Nowy dokument - Kodowanie - UTF-8 (bez BOM).
6. Ustaw czcionkę na Courier New rozmiar 11 w Ustawienia - Konfigurator stylów - Dostępne style: Default, Język: Global Styles, Nazwa stylu: Global override, Nazwa czcionki: Courier New, Wielkość: 11
7. Nie zmieniaj innych parametrów programu
8. Ustaw wielkość przesuwania bloków tekstu Ustawienia - Preferencje - Tan Settings - Tab Setting: Defaultm Tab size: 2.
9. Przećwicz przesuwanie za pomocą klawiatury bloków tekstu w lewo i w prawo.

Pzeglądarka stron WWW

Wspominałem już o tym, że strona, którą stworzymy powinna być obowiązkowo przetestowana przynajmniej w kilku wiodących przeglądarkach. Pozostaje pytanie - które przeglądarki są wiodące? Poleciłbym w kolejności:

1. Mozilla Firefox - to aktualnie najpopularniejsza przeglądarka internetowa w Polsce. Rozwijana od 2002 roku miała na celu zmianę sytuacji, która wtedy panowała na zmonopolizowanym rynku przeglądarek. Przeglądarka oparta została o silnik Gecko, który niemal w pełni obsługuje najnowsze rekomendacje W3C, również te dopiero opracowywane związane z HTML5 oraz CSS3. Na uwagę zasługuje również walidator Firefoxa
2. Google Chrome - jest przeglądarką stworzoną przez inżynierów firmy Google. Chrome charakteryzuje oszczędność miejsca, jaką zajmuje interfejs przeglądarki oraz szybkość działania programu. Google projektując Chrome położył szczególny nacisk na jej lekkość, przekładającą się na niskie wykorzystanie zasobów systemowych. Google Chrome został oparty o popularny silnik WebKit, który wykorzystywany jest również m.in. w przeglądarce Apple Safari.
3. Opera - również jedna z najpopularniejszych na świecie przeglądarek zawierająca również wbudowanego klienta pocztowego (niestety w najnowszych wersjach tego nie ma)
4. Internet Explorer jest dołączany do systemów Windows i nie ma niestety najlepszej opinii, jakoś zawsze miała problem z nadążeniem ze wsparciem dla dynamicznie rozwijającego się HTML oraz CSS

Aktualny stan obsługi HTML5 i CSS3 przez przeglądarki możesz sprawdzić tutaj.

Zajęcia praktyczne będziemy realizować przy pomocy Firefoxa oraz Google Chrome. Od razu umówmy się, że jeżeli w jednej z tych przegladarek coś "nie działa", to sprawdzamy to w drugiej przeglądarce.

Program do obróbki i tworzenia grafiki

Propuję GIMP, który jest darmowym narzędziem do obróbki grafiki rastrowej. Ten program jest typowym przykładem na to, że darmowe nie znaczy automatycznie kiepskie. W tym przypadku jest dokładnie odwrotnie. GIMP jest popularnym narzędziem przetwarzania zdjęć umieszczanych w Internecie. Można przy jego użyciu tworzyć grafikę i logo, zmieniać rozmiary i wycinać fragmenty zdjęć, dokonywać różnych operacji na kolorach, łączyć obrazy stosując warstwy, oraz dokonywać konwersji różnych formatów plików graficznych. GIMP obsługuje między innymi formaty jpg i png, można nim tworzyć animowane gify.
W niniejszym opracowaniu nie ma nauki posługiwania się tym programem.

Programy do obróbki audio i video

Od razu zaznaczam, że W niniejszym opracowaniu, nie będę uczył pracy z tymi programami, będziemy jednak korzystali z plików stworzonych przy ich zastosowaniu.
W zakresie audio proponuję Audacity, który jest darmowym, łatwym w użyciu programem do nagrywania i edycji dźwięku dla systemów Windows, Mac OS X, GNU/Linux i innych. Możesz używać Audacity m.in. do:

• nagrywania audio,
• konwersji kaset i nagrań do postaci cyfrowej lub na płyty CD,
• edycji plików w formatach Ogg Vorbis, MP3 i WAV,
• wycinania,kopiowania,sklejania i mieszania ze sobą dźwięków,
• zmiany prędkości lub wysokości dźwięku nagrania.

Program otwiera pliki WAV, AIFF, AU, MIDI, MP3 i OGG, zapisuje zbiory WAV, MP3 i OGG. Posiada rozbudowane menu efektów – dostępny jest między innymi kompresor, echo, podbicie basów, equalizer, filtry, odszumiacz, wyciszanie i inne. W programie można także znaleźć oprócz efektów generator tonu, którym można całkowicie zmienić melodię, wstawiając szum, ciszę czy różne rodzaje tonów.

W zakresie video proponuję Avidemux. Narzędzie to wspiera pliki AVI, MPEG, MP4 i ASF, często będąc wykorzystywane do konwertowania filmów do formatów zgodnych z większością stacjonarnych odtwarzaczy DVD. Ponadto oferuje ono całkiem sporą liczbę funkcji i efektów, która dodatkowo może zostać rozszerzona o zewnętrzne komponenty. Z pomocą Avidemux poza samym konwertowaniem możemy również m.in. wykonywać proste operacje na klatkach (wklejanie, wycinanie, zamienianie) oraz nakładać na nie filtry. Wśród tych ostatnich znalazły się pozycje pozwalające na przycinanie obrazu, zmianę jego rozdzielczości, obrót o zadany kąt, nakładanie napisów, wyostrzanie obrazu i wiele, wiele więcej. Jedną z ciekawych opcji jest wbudowany kalkulator, dzięki któremu możemy ustalić jakie parametry należy zadeklarować, aby plik po konwersji zmieścił się na płytę CD, DVD itp. Z kolei użytkowników poddającym obróbce znaczne ilości plików ucieszy fakt, iż Avidemux posiada mechanizm projektów i obsługuje skrypty, które pozwalają taki proces zautomatyzować. Avidemux pomimo olbrzymich możliwości posiada bardzo przyjazny i prosty w obsłudze interfejs, który nie powinien przysporzyć problemów nawet początkującym użytkownikom.

Praca domowa

1. Ściągnij i zainstaluj w swoim komputerze Notepad++.
2. Powtórz ćwiczenie 0_3_0_2 wykonane podczas zajęć.
3. Zapoznaj się dokładnie z programem.