Web Design

 Zachęcamy do zapoznania się z poniższą prezentacją w celu utrwalenia naszych zajęć:

Pliki do pobrania:

Kurs HTM 

Notepad++

Gimp
 

XAMPP

Instrukcja instalacji środowiska XAMPP dla grup Webdesign

 

Menu w CSS - ciekawe rozwiązania

 





Pliki robocze z ćwiczeń:
 

- plik hello.html - gr. WD4 - 06.02.2013
- plik szkielet.html - gr. WD4 - 06.02.2013
- plik 2-akapity.html - gr. WD4 - 06.02.2013
- plik 3-listy.html - gr. WD4 - 13.02.2013
- plik 4-tlo.html - gr. WD4 - 13.02.2013
- plik 5-tabele.html - gr. WD4 - 20.02.2013
- plik 6-linki.html - gr. WD4 - 20.02.2013 
- plik wd4.zip - gr. WD4 (plik skompresowany) - 10.04.2013
- plik wd4a_php.zip - gr. WD4 (plik skompresowany) - 29.05.2013

- plik wd4_php.zip - gr. WD4 (plik skompresowany) - 05.06.2013

- plik wd4_php.zip - gr. WD4 (plik skompresowany) - 19.06.2013

- plik hello_akapity.html
- plik hello_tabele.html 
- plik linki.html
- plik index.html (menu)
- plik grafika.html
 
- plik divy.html
- plik divy_cw.html
- plik divy_cw1.html
- plik divy_cw2.html

- plik style.html
- plik style_arkusze.html
- plik style.css
- plik strona-tlo-style.html
- plik strona-tlo-style-arkusz.html

- plik style_menu.html

- plik style_menu1.css
- plik style_menu2.css
- plik style_menu3.css
- plik style_menu4.css
- plik style_menu5.css
- plik style_menu6.css

PHP:
- php.zip (pliki skompresowane) - aktualizacja 14 grudzień
- php1.zip (pliki skompresowane) - aktualizacja 3 styczeń 
- php2.zip (pliki skompresowane) - aktualizacja 18 styczeń
- php3.zip (pliki skompresowane) - aktualizacja 29 styczeń
- php4.zip (pliki skompresowane) - aktualizacja 5 luty
- php5.zip (pliki baza.php oraz dane_os.php) - aktualizacja 8 luty


URL (ang. Uniform Resource Locator) – oznacza ujednolicony format adresowania zasobów (informacji, danych, usług) stosowany w Internecie i w sieciach lokalnych.
URL najczęściej kojarzony jest z adresami stron WWW, ale ten format adresowania służy do identyfikowania wszelkich zasobów dostępnych w Internecie.
Standard URL opisany jest w dokumencie RFC 1738.

Elementy adresu i przykład

URL składa się z części określającej rodzaj zasobu/usługi (ang. scheme), dwukropka i części zależnej od rodzaju zasobu (ang. scheme-specific part). Pełniejszy opis formatu URL można znaleźć w dokumencie RFC 1738.

• Przykład prostego adresu URL:

http://www.wikipedia.com/wiki/URL
|      |                 | 
|      |                 ścieżka dostępu 
|      |                 do zasobu     
|      host (adres serwera)
protokół

• Przykład rozbudowanego adresu URL:

http://hans:geheim@www.example.org:80/demo/example.cgi?land=de&stadt=aa
|      |    |      |               | |                 |
|      |    |      host (adres     | ścieżka dostępu   ścieżka wyszukiwania
|      |    |      serwera)        | do zasobu
|      |    hasło                  port
|      login
protokół

Multimedia na stronach WWW

Obrazy (zdjęcia):

• gif (paleta 8 bitów, 256 kolorów, paleta kolorów zawarta w pliku, proste rysunki, zwłaszcza z regularnymi jednokolorowo wypełnionymi figurami geometrycznymi)
• jpg (paleta 24 bitowa; 16,7 mln. kolorów; kompresja stratna; fotografie, skany, malarstwo)
• png (paleta do 32 bitów; 16,7 mln. kolorów; kompresja stratna albo bezstratna, nie objęty ograniczeniami licencyjnymi; teroretycznie do wszystkiego; nie obsługiwany przez starsze wersje przeglądarek)
• animowany gif (wiele obrazków tworzących animację w jednym pliku gif)

Kompresja:

• stratna (po dekompresji nie można odzyskać w pełni danych oryginalnych), stosowana do mulitmediów (obrazy, filmy, dźwięki, tv); JPG, MPEG
• bezstratna (po dekompresji odzyskujemy pełne dane oryginalne), stosowana do plików, programów, archiwizacji danych; ZIP, RAR, ARJ, LHA

Grafika komputerowa:

• rastrowa (bitmapowa, pikselowa);
• wektorowa (krzywe, krzywe Bezier'a).

Cechy grafiki rastrowej:

• ograniczona, skończona ilość punktów (pikseli) — ograniczona możliwość odwzorowania rzeczywistości;
• każdy piksel obrazu ma jeden kolor (barwę) z palety mozliwych;
• nadaję się do rysunków, malarstwa, fotografii;
• określenie jakości obrazu.

Jakość obrazu rastrowego:

• rozdzielczość (iloczyn ilości punktów w poziomie razy ilość punktów w pione np. 1024 x 768);
• paleta barw (maksymalna ilość barw z jakiej możemy wybierać kolor pikseli)
• efekty związane z przetwarzaniem obrazu przed jego wyświetleniem (np. rozmycie pikseli)

Rozdzielczość wydruku:

dpi (ang. dots per inch, punktów na cal)

ppi (ang. pixels per inch, pikseli na cal)

1" (cal) = 2,54 cm

Jakość wydruku:

72 dpi –  ekranowa (ekran monitora)

100 dpi – faks („słaby”, zwykły)

200 dpi – faks („dobry”)

300 dpi – zwykły wydruk (minimum)

600 dpi – dobry wydruk

1200 dpi – bardzo dobry wydruk

Jaką minimalną rozdzielczość w pikselach powinien posiadać obraz, który po wydruku na drukarce z rodzielczością 300 dpi będzie miał rozmiar 10 cm x 15 cm?

1181 x 1771 px

300 dpi = 300 punktów / 2,54 cm = 118,11 puktu/cm

Ilość punktów w poziomie = 118,11 [puktów/cm] x 10 [cm] = 1181 punktów

Ilość punktów w poziomie = 118,11 [puktów/cm] x 15 [cm] = 1771 punktów

1181 x 1771 px =  2091551 px = 2000 kpx (kilopikseli) = 2 Mpx (megapikseli) optycznie

Głębia barw = ilość bitów jaka koduje kolor jednego piksela obrazu

ilość kolorów = 2^{ilość bitów}

W praktyce ilość bitów/piksel = 1, 4, 8, 16, 24, 32

Ile bajtów ma obraz (bitmapa) o rozmiarach 1280 x 1024 px i głębia kolorów 24 bity?

1280 x 1024 x 24 / 8 = 3932160 B = 3,9 MB

24 MB

Robiąc zdjęcia przeznaczone do wydruku w drukarni zawsze zostawiamy nadmiar do obcięcia („spad”)

Narzędzie do kalkulacji rozmiaru obrazów:

Print Size Calculator

Grafika komputerowa, podsumowanie: