All on this website (c) by Leszek Bielecki

Data powstania strony 5 III 2006r.

Data ostatniej modyfikacji 11 III 2006r.

Budowa strony www - Takie tam "dobre rady"...

 

Pewnie nie będzie tu wielkich mądrości, ale kilka wg mnie pomocnych (i prostych) rad dotyczących tematu "jakich błędów nie robić" przy tworzeniu stron www.

 

1. Nazywanie plików

System Windows pozwala używać nazw ze spacjami np.
zdjęcie kotka nr 1.jpg
strona kotka.html
wydatki 02 2006 Xls

Jest to może wygodne dla początkujących użytkowników systemu, ale powoduje, że początkujący twórcy stron www również stosują takie "dziurawe" nazewnictwo w swoich projektach. Tak naprawdę stosowanie spacji w nazwie jest dla systemów informatycznych niezrozumiałe i dlatego próbują one "naprawiać" to dziwaczne udogodnienie systemu Windows - po prostu zamieniają te spacje na jakieś inne znaki. Np. edytory kodu html'a zamieniają spacje w nazwie na taki kod:
%20
I jest to robione całkowicie automatycznie, jakby
poza wiedzą twórcy strony www. A jeśli początkujący twórca używa do swojej pracy edytorów czysto graficznych typu WYSIWYG to już zupełna porażka - bo te wszystkie przemiany spacji na kod
%20 zachodzą naprawdę poza jego wiedzą.

No i potem przeglądając Google np. na hasło "edytory html" widzi się takie "kwiatki", na (przecież!!!) w pełni profesjonalnej stronie!

www Idg.pl/ftp/kategoria/pc_14/projektowanie%20stron%20WWW/
edytory%20HTML.html

* * *

Dlatego moja pierwsza rada dotyczy nazewnictwa:
Jeżeli plik będzie zastosowany do tworzenia strony www, to nie stosować "dziurawych" nazw plików. Zamiast spacji używać znak podkreślenia: _
I nie używać polskich liter w nazwach plików!!!
Czyli pliki z w/w przykładu powinne nazywać się:
zdjecie_kotka_nr_1.jpg
strona_kotka.html

Wklejając adres strony www (często jest to adres konkretnego pliku *.html) w mail wysyłany np. Outlookiem zachodzi to samo zjawisko uzupełniania "dziur" w nazwie pliku *.html przy pomocy kodu %20
np.

http://www.jakasstrona.com.pl/kzw%20sty%202006.html

A taki plik powinien mieć nazwę
kzw_sty_2006.html
i nie było by żadnych problemów.

I jeszcze drobna uwaga - nie używajmy w nazwach dużych liter (albo róbmy to świadomie i oszczędnie) - dla systemu Windows duża litera i mała znaczy to samo - ale dla innych systemów (Linux, Unix - na nich
chodzą serwery www) to są zupełnie różne znaki - z tego powodu też bywają problemy "że coś nie działa".

 

 

2. Nazywanie plików - cd

Często strony www pokazują zmiany jakiegoś obiektu w czasie lub wydarzenie odbywające się w czasie - trwa budowa domu, rośnie dziecko, rośnie pies albo kot, maluje się obraz, przebiega remont łazienki, powstaje ogród, trwa wycieczka do Grecji, trwa wesele, odbywa się zjazd absolwentów szkoły....

Wszystkie te zmiany/wydarzenia są uwieczniane na zdjęciach, potem umieszczane są one w jakimś tematycznym katalogu i często się okazuje, że zdjęcia wykonane w ciągu wielu lat są całkowicie wymieszane, że w ogóle się nie można w tym połapać.
Jak ma sobie poradzić z tym autor, gdy zaczyna się przymierzać do stworzenia z nich strony www???

Bardzo wygodnie jest każde wybrane do pokazania zdjęcie przygotować wg takiej zasady:

(oczywiście najpierw zdjęcie trzeba skopiować do jakiegoś katalogu roboczego - nigdy nie pracujemy na oryginalnych, archiwalnych plikach - możemy je bezpowrotnie zniszczyć przez przypadek!!!!)

1.zawsze podać w nazwie zdjęcia rok, miesiąc, dzień jego wykonania
2.podać temat - jednym słowem: np. 'dom', tytuł obrazu, imię psa
3.pozostawić oryginalny numer zdjęcia (lub jego istotny fragment) nadany przez aparat.

Ad.1 - używać postaci rrrr-mm-dd - zapewni to łatwe sortowanie zdjęć i ich automatyczne układanie przez system wg daty ich wykonania.

Ad.2 - w przypadku jakiejś "katastrofy" gdyby się coś wymieszało, np. jakieś pomyłkowe kopiowanie do niewłaściwego katalogu dość łatwo jest odróżnić zdjęcia "właściwe" od "niewłaściwych".

Ad.3 - pozostawienie oryginalnej nazwy będzie pomocne przy odszukiwaniu oryginału zdjęcia w katalogach archiwalnych lub w kopiach bezpieczeństwa trzymanych na płytach CD lub DVD.

Mały przykład:
Zdjęcia robione przez aparat Canon A40 mają nazwę:
118-1810_IMG.JPG , 213-1360_IMG.JPG - czy coś z tego wynika ????
Tak nazywa zdjęcia Minolta A2 i Minolta 5D:
PICT0376.JPG , PICT1871.JPG.

To jest zupełny chaos!!!

Ale te same zdjęcia nazwane przez autora :
2003-03-05_ogrod_118-1810.jpg
2004-05-17_ogrod_213-1360.jpg
oraz
2005-07-22_ogrod_pict0376.jpg
2006-02-01_ogrod_pict1871.jpg

pokazują kiedy były zrobione zdjęcia, co na nich jest i z jakiego aparatu pochodzą i jakie są nazwy oryginałów zdjęć. Nawet w przypadku omyłkowego skasowania zdjęcia przygotowanego do prezentacji na stronie www można je łatwo odszukać w archiwach.

(oczywiście zdjęcie jeśli zostanie skasowane to już "go nie ma", ale przecież jego nazwa jest wstawiona w treść strony www i stamtąd właśnie wyciągniemy jego nazwę i dojdziemy wg niej do nazwy oryginału zdjęcia)

No i tak nazwane zdjęcia po prostu świetnie się układają w katalogu - właśnie tak jak powinny - chronologicznie!!!


Oczywiście wszystkie zdjęcia NIE powinne być w jednym katalogu!!!

Należy je przygotować w odpowiednich katalogach dla danego obiektu - przecież często nawet prosty serwis www pokazuje wiele tematów - np. mój kotek, mój piesek, moje rybki. I wszystkie te zdjęcia powinne być umieszczone w przygotowanych w tym celu katalogach:
kotek, piesek, rybki.

Tak jest wg mnie znacznie wygodniej - posiadanie jednego katalogu, w którym będzie tysiąc zdjęć nie jest wygodne!!!

 

 

3. Wstawianie zdjęć

Definicje. Przygotowanie zdjęcia

Najgorszym błędem prawie uniemożliwiającym oglądanie strony www jest błąd polegający na tym, że autor takiego serwisu wykorzystuje zdolność przeglądarki internetowej do zmiany wymiaru zdjęcia.

Otóż przeglądarka potrafi wyświetlić zdjęcie w dowolnie zadanym rozmiarze - powiększonym, pomniejszonym, dowolnie zdeformowanym.





Początkujący autor jest bardzo zadowolony umieszczając na swojej stronie miniaturki zdjęć, wykorzystując tę cechę przeglądarki, nie zdając sobie zupełnie sprawy, że robi rzecz właściwie uniemożliwiającą ściągnięcie tej strony z sieci i jej przeglądanie.

On po prostu nie wie, bo nikt mu tego jasno i wyraźnie nie powiedział, że tak nie wolno robić!!!!

No to teraz mówię: Tak nie wolno robić!!!!!

No to teraz kilka słów definicji aby było wiadomo o czym dokładnie piszę.

W naszym języku istnieje takie wygodne słowo: wielkość
Bez żadnych definicji każdy, kto weźmie do ręki papierowe zdjęcie od razu określi jego wielkość - zrobi to intuicyjnie, bez zastanowienia. I jeśli powie komuś, że zdjęcie, które trzyma w ręku jest "małe" - to ta osoba nie widząc tego zdjęcia łatwo sobie wyobrazi jego wielkość i powie, że chodzi zapewne o zdjęcie "do dowodu albo do paszportu". Tak samo będzie, gdy ktoś opisze wielkość zdjęcia jako "normalne" - pewnie z 90% ludzi odpowie, że chodziło o zdjęcie "pocztówkowe".

W przypadku zdjęć cyfrowych słowo 'wielkość' nic nie znaczy. A wręcz przeciwnie - wprowadza w błąd. Bo może określać wymiary zdjęcia podawane w pikselach, ale również ilość bajtów (kilobajtów, megabajtów) z jakich się składa plik komputerowy zawierający w sobie zdjęcie.

Dlatego ja nie będę w dalszej części tego opracowania używał słowa 'wielkość'.

Zastąpię je słowami 'wymiar' i 'ciężar'.

Wymiar jest parą dwóch liczb określającą szerokość i wysokość zdjęcia podawaną w pikselach.

Ciężar jest to liczba oznaczająca ilość bajtów, z jakich się składa plik komputerowy zawierający w sobie zdjęcie.

Ciężar pliku jest podawany najczęściej w kilobajtach (KB). Proszę zwrócić uwagę, że ciężar worka ziemniaków podaje się np. 50 kg (małe 'k' oznaczające 1000 - w tym przypadku gramów), a ciężar pliku jako np. 50 KB (duże 'K' oznaczający '1000 informatyczny' równy 1024 - w tym przypadku bajtów)

W systemie Windows ciężar pliku określany jest słowem 'rozmiar' - co w przypadku gdy mówimy o zdjęciach jest również mylące i niejednoznaczne - 'ciężar zdjęcia' wydaje mi się określeniem bardzo czytelnym i jasnym.

Jest to tym bardziej wygodne określenie gdyż i ciężki worek jest trudno przetransportować, i tak samo ciężkie zdjęcie jest trudno przemieścić przez łącza internetowe.

I ciężki worek sprawia kłopot i ciężkie zdjęcie sprawia kłopot :)))


Aparat cyfrowy robi zdjęcia najczęściej o bardzo dużych wymiarach i bardzo dużym ciężarze. Dlatego zdjęcie, które autor chce pokazać na stronie MUSI być przygotowane do tego celu specjalnie.

Po pierwsze:
Musi mieć zmieniony wymiar tak by nadawało się do obejrzenia w całości na ekranie komputera - niezbyt doświadczony autor oglądając inne strony w internecie, które mu się podobają, powinien ocenić jaki wymiar zdjęcia powinien u siebie umieścić. Zdjęcie trzeba więc pomniejszyć do odpowiednich wymiarów, a czasami wyciąć z oryginalnego zdjęcia tylko wybrany, ciekawy fragment.

Po drugie:
Tak przygotowane zdjęcie musi zapisać w formacie 'jpg' z odpowiednią kompresją, by zdjęcie miało mały ciężar, przy zachowaniu jeszcze dobrej jakości. Bo im większa kompresja, tym zdjęcie jest
lżejsze, ale niestety kosztem jakości.

Do tych prac potrzebny jest jakiś prosty program do obróbki grafiki. I trzeba te ustawienia kompresji samemu przećwiczyć na używanym przez siebie programie i wybrać takie wartości kompresji by zdjęcie było lekkie, a jakość prawie taka jak oryginału.

Najgorsze co można zrobić, to umieścić na stronie www tzw "zrzut z karty pamięci" - surowe, w ogóle nie obrobione pliki ściągnięte prosto z aparatu.

Bo o ile sprawa przygotowania wymiaru i ciężaru zdjęcia jest sprawą czysto techniczną, to pozostaje otwarty temat przygotowania zdjęcia w sferze artystycznej. Jego rozjaśnienie, jego wyostrzenie, wycięcie wybranego fragmentu. Sklejenie dwóch fragmentów na jednej planszy by pokazać różnice lub podobieństwo... To są szalenie ważne sprawy, ale wykraczają poza zakres tego skromnego opracowania.

 

i dopiero teraz będzie najważniejsze...

 

4. Wstawianie zdjęć

Jak to zrobić...

No to skoro już mamy zdefiniowane pojęcie wymiar zdjęcia i jego ciężar czas na wyjaśnienie o co w tym wszystkim chodzi gdy napisałem:

Tak nie wolno robić!!!!!

A no chodzi o to, że nie można wstawiać na stronie www jako miniaturek zdjęć w wymiarze oryginalnym - tzn w takim, w jakim chcemy je pokazać jako zdjęcia powiększone. Bo cóż z tego, że możemy je na stronie www sztucznie pokazać jako miniaturki - ale ich ciężar i tak będzie bardzo duży - pomimo tego, że przeglądarka wyświetli je jako miniaturki to ich ciężar się nie zmienia!!!

Podam przykład - jeżeli na stronie www będzie umieszczone 10 zdjęć - każde o ciężarze 100 KB to osoba przeglądająca tę stronę przez internet będzie musiała ściągnąć do siebie przez swoje łącze 10 x 100 KB = 1000 KB czyli 1 MB - to jest BARDZO DUŻO - i tylko po to, by być może stwierdzić, że ta strona (i zdjęcia) go nie interesuje.

I nawet, jak ktoś dysponuje bardzo dobrym łączem i ściąga 1 MB z internetu bardzo szybko to i tak nie będzie zadowolony z oglądania tej strony - bo oglądając ją i przesuwając ją suwakiem góra-dół będzie widział, że strona nie przesuwa się płynnie - będzie widział i czuł, że ona "skacze" po ekranie, że nie słucha myszki. A tak będzie dlatego, że przeglądarka musi mieć czas by zdjęcia o dużym wymiarze w jakiś sposób przygotować do wyświetlenia ich jako miniaturki - pamiętajmy o tym, że w komputerze nic nie dzieje się "samo", przecież on to wszystko musi wyliczyć, wykonać miliardy obliczeń, przecież ścieśniając zdjęcie do malutkich wymiarów on wykonuje gigantyczne obliczenia!!!

Dlatego postępuje się inaczej!!!

Tworząc stronę www przygotowuje się zdjęcia o dużych wymiarach i ich miniaturki jako osobne pliki. Te miniaturki powinne mieć takie wymiary jakie stosował autor strony, gdy podawał wymiary do jakich mają być ściśnięte duże zdjęcia. Więc jeżeli na stronie podawany był wymiar miniaturki np 300 x 200 pikseli to o takich wymiarach należy przygotować pliki zdjęć-miniaturek. Okaże się nagle, że plik oryginalny mający ciężar 80-100 KB jako miniaturka ma ciężar 7 - 10 KB. I szybkość ściągania takiej miniaturki będzie około 10 razy szybsza niż dużego zdjęcia.

Więc strona zbudowana z 10 zdjęć zamiast ściągać się np. 120 sekund ściągnie się w ciągu 12 sekund - to naprawdę jest duża różnica.

Pliki miniaturek należy nazywać tak samo jak zdjęcia duże, dodając jakiś dodatkowy znak dla wyróżnienia - ja w moich stronach dodaję zawsze z przodu nazwy literkę 's' od angielskiego wyrazu small - mały. Więc przykładowe przygotowane zdjęcia do pokazania ich na stronie www miały by nazwy:

2003-03-05_ogrod_118-1810.jpg
2004-05-17_ogrod_213-1360.jpg
2005-07-22_ogrod_pict0376.jpg
2006-02-01_ogrod_pict1871.jpg
s2003-03-05_ogrod_118-1810.jpg
s2004-05-17_ogrod_213-1360.jpg
s2005-07-22_ogrod_pict0376.jpg
s2006-02-01_ogrod_pict1871.jpg

i w takiej kolejności by były widoczne w katalogu. Jest to również bardzo wygodne.

W poniższym przykładzie zdjęcie są umieszczone w podkatalogu 'ogrod', a cała strona (bardzo prosta strona) będzie wyglądała np. tak:

<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-2">
<title>Zdjęcia z ogrodu</title>
</head>

<body bgcolor="#D9D655">

<p><a href="ogrod/2003-03-05_ogrod_118-1810.jpg"><img
src="ogrod/s2003-03-05_ogrod_118-1810.jpg" border="0" width="300"
height="200"></a></p>

<p>&nbsp;</p>

<p><a href="ogrod/2004-05-17_ogrod_213-1360.jpg"><img
src="ogrod/s2004-05-17_ogrod_213-1360.jpg" border="0" width="300"
height="200"></a></p>

<p>&nbsp;</p>

<p><a href="ogrod/2005-07-22_ogrod_pict0376.jpg"><img
src="ogrod/s2005-07-22_ogrod_pict0376.jpg" border="0" width="300"
height="200"></a></p>

<p>&nbsp;</p>

<p><a href="ogrod/2006-02-01_ogrod_pict1871.jpg"><img
src="ogrod/s2006-02-01_ogrod_pict1871.jpg" border="0" width="300"
height="200"></a></p>
</body>
</html>


Ważna uwaga techniczna - przygotowując zdjęcie do strony należy OD RAZU przygotowywać miniaturki, bez wychodzenia z programu edytora graficznego, bez powtórnego zaczytywania pliku z dysku. Po prostu każde kolejne dodatkowe zmiany i zapis na dysk, i powtórny odczyt z dysku, zmiana i zapis na dysk i tak np. 20 razy powodują już wyraźne straty w jakości zdjęcia - należy wszystkie operacje na zdjęciu wykonać po prostu jako jeden ciąg pracy ze zdjęciem - aż do stworzenie ostatecznego zdjęcia nadającego się do pokazania i jego miniaturki.

Jeżeli zachodzi konieczność przerwy w obróbce i wyłączenia komputera, zdjęcie należy zapisać na dysku jako plik roboczy typu tiff albo bmp - to są formaty gdzie nie zachodzą straty w jakości zdjęcia.

 

Oczywiście, że to opracowanie jest bardzo prościutkie. Ale widzę, że nawet całkiem nieźle zaawansowani autorzy stron popełniają właśnie takie błędy skutecznie odstraszając swoich gości.

     

     





Valid HTML 4.01 Transitional
Ta strona spełnia standardy kodu HTML 4.01 Transitional