TWORZENIE STRON WWW

Podstrona ta nie jest tematycznie związana z pozostałą częścią serwisu. Jednak z myślą o osobach, które - podobnie jak autor strony - chciałyby tworzyć własne witryny internetowe programując ich zawartość i wygląd, a nie tylko stosując uproszczone rozwiązania z edytorów graficznych, przedstawiam krótką notatkę z historii moich zmagań ;) oraz spis przydatnej literatury i adresów na które warto wejść. Jest to moja pierwsza witryna internetowa i mam nadzieję, że została rozwiązana w miarę poprawnie. Poniższą spowiedź zamieszczam z myślą o osobach, które obawiają się bliżej zapoznać z tematem wykonywania stron www - nie jest to takie straszne.

ZASTOSOWANE NARZĘDZIA kliknij, aby (roz)winąć nagłówek

Niniejsza witryna wykonana została w edytorze HateML Pro 1.10. Jest to jeden z programów zaproponowanych na stronie kursu html. Nie jest może najnowszy, ale przypadł mi do gustu. Zrezygnowałem z programu Front Page po zapoznaniu się z opiniami o możliwych kłopotach z odtworzeniem stron pod inną przeglądarką niż Explorer. Bardzo przydatnym narzędziem pomocnym nie tylko przy wykonywaniu stron, ale również przy ich przeglądaniu, sprawdzaniu kodu, analizie działania skryptów itd. itp. jest nakładka (rozszerzenie) do przeglądarki Firefox o nazwie Web Developer (zawiera walidatory tzn. 'sprawdzacze poprawności' kodu). Namawiam wszystkich do kontrolowania poprawności kodu stron. Funkcja ta jest dostępna dla plików (x)html lokalnych (jeszcze nie opublikowanych w sieci), plików (x)html online, a także plików arkuszy stylów. Fakt, że strona wygląda zgodnie z oczekiwaniami autora nie świadczy jeszcze o tym, że jej kod jest poprawny. Pierwsza wersja mojej witryny, mimo korzystania z szablonu, zawierała całą masę błędów, a przy tym zewnętrznie wydawało się, że wszystko jest w porządku. Inne stosowane przeze mnie dodatki do Firefox-a to FireBug (zaawansowana analiza poprawności kodu), Window Resizer (łatwa i szybka zmiana rozdzielczości na poziomie przeglądarki - przydatne jeżeli chcemy sprawdzić jak strona będzie wyglądać w innych rozdzielczościach) oraz narzędzie wspomagające wykonywanie i obróbkę zrzutów ekranu - FireShot. Pozostaje mieć nadzieję, że moje umiejętności odpowiedniego wykorzystania tych pomocy będą rosły.
Oprócz tych programów używałem kilku najpopularniejszych do obróbki plików graficznych (przygotowanie plików .jpg i .gif oraz prezentacji) i tekstowych (przeglądarka plików .pdf) oraz programu Camtasia Studio do wykonania prezentacji wideo.

WYGLĄD STRONY kliknij, aby (roz)winąć nagłówek

Sam wygląd strony oparty jest na szablonie Azulmedia. Z wielu oglądanych rozwiązań szablon ten wydał mi się najbardziej odpowiedni biorąc pod uwagę raczej mało rozrywkową tematykę strony. Szablony o większej skali barw byłyby nieodpowiednie dla prezentacji zagadnień związanych zarówno z moją pracą zawodową, programowaniem, jak i zwiększeniem 'mocy przerobowych' MS Excel. Z kilku bardzo ciekawych szablonów zrezygnowałem ze względu na dość zdecydowane i ostre barwy mogące być męczące przy dłuższym czytaniu tekstów zawartych na stronie, które nie są przecież tylko krótkimi notkami informacyjnymi.
W pierwotnym szablonie wprowadziłem pewne modyfikacje:
- niewielka zmiana kolorystyki (pierwotna oparta na barwach ciemnoniebieskich i czarnych przy dużej ilości tekstu tworzyła dość przygnębiające i zniechęcające wrażenie. Wprowadziłem zielony kolor, który mam nadzieję stronę nieco urozmaica, nie zmniejszając jej funkcjonalności),
- wprowadzenie tabel (pierwotny szablon ich nie zawiera) dla uporządkowania zestawień np. plików. Na tabelach oparte są również galerie formularzy zastosowanych w programach. Tabele zostały sformatowane podobnie jak spisy,
- wprowadzenie dodatkowej klasy dla odnośników obrazkowych pierwotnie wszystkie odnośniki miały zdefiniowaną ramkę. Dla kilku (pliki .gif z płytami płyt CD) zależało mi na wrażeniu pełnej przezroczystości tła - bez ramki,
- zwiększenie czcionki konieczność tej zmiany pojawiła się przy dłuższej pracy nad stroną. Dla dłuższych tekstów zastosowana pierwotnie wielkość jest męcząca,
- zmiana szerokości strony zmiana stanowi kompromis wygody odbioru tekstu dla rozdzielczości 1024x768 oraz 1280x800. Szerokość wyjściowa szablonu 84% była odpowiednia dla większej rozdzielczości, ale traciła wygląd (zwłaszcza tabele) w niższej rozdzielczości. Szerokość 96% wyglądała najlepiej dla szerokości 1024, ale przy 1280 strona stawała się rozwlekła. Obecna szerokość to 92%,
- poprawki dla menu strony ze względu na wygodę nawigacji pojawiła się konieczność wyróżnienia w menu aktualnie wyświetlanej podstrony. Wprowadziłem osobne klasy dla fragmentów menu. Nie jest to metoda najwygodniejsza, ale koniecznie chciałem uniknąć menu rozwijanego z wykorzystaniem Java Script,
- dodatkowe klasy rozszerzone pliku css wprowadziłem kilka dodatkowych klas dla niektórych elementów. Z części po sprawdzeniu efektów zrezygnowałem, część została wprowadzona.
Cały plik css programu został przeze mnie przepisany na nowo z własnymi komentarzami, częściowo wprowadzeniem własnego nazewnictwa itp. Było to spowodowane nie tylko chęcią zmian, ale również lepszego zrozumienia poznawanych zagadnień. Wszystkim zainteresowanym pisaniem stron polecam tę formę nauki. Czytając dostępne materiały wszystko może wydawać się zrozumiałe, ale dopiero własnoręczne pisanie pomaga wyłapać fragmenty wiadomości, które umknęły uwadze.

Zgodnie z zaleceniami kursu html wygląd strony sprawdzałem w przeglądarkach:
- Internet Explorer (wersja 6),
- Opera (wersja 9.64),
- Mozilla Firefox (wersja 3.0.8)
oraz w rozdzielczościach ekranu: 1024x768 oraz 1280x1024.
Wygląd różni się nieco, ale są to różnice do zaakceptowania. Serwis składa się z dwudziestu czterech podstron. Zakładka Programy od kuchni jest najdłuższa - liczy ponad 4000 wierszy i dlatego - z myślą o łatwiejszej nawigacji - wydzieliłem z niej stronę dotyczącą tutoriali.

(NIE)ZASTOSOWANE SKRYPTY JAVA SCRIPT kliknij, aby (roz)winąć nagłówek

Dla ożywienia strony postanowiłem zastosować kilka skryptów. Wybór jest na tyle obszerny, że należy uważać, żeby nie przedobrzyć. Bardzo często wtyczki, ciekawe pod względem rozwiązań algorytmu, są uciążliwością dla osób odwiedzających witrynę. Różne wodotryski funkcji użytkowej nie pełnią żadnej, a tylko irytują jak nachalna reklama lub budzą uśmiechy jak kolejny efekt deszczu czy śniegu na witrynie ;) Taki efekt na stronie omawiającej możliwości programu bardzo użytkowego oraz moją własną pracę byłby zupełną porażką.

PRZEGLĄDANIE PLIKÓW GRAFICZNYCH - chyba najczęściej spotykane wzbogacanie możliwości strony.
Ciekawe rozwiązania dają miedzy innymi:
- Lightbox2 - bardzo rozbudowany skrypt za pomocą, którego można zrealizować zarówno efektowne przeglądanie pojedynczych zdjęć, jak i stworzenie całej galerii,
- Highslide - nieco bardziej dyskretny, ale jeszcze bardziej rozbudowany skrypt za pomocą, którego można zrealizować nie tylko przeglądanie pojedynczych zdjęć, stworzenie całej galerii, ale również wyświetlanie dodatkowych informacji np. rozwijanych,
Obydwa powyższe rozwiązania wprowadziłem na swoją stronę, a po kilku dniach prób w większości usunąłem. Nadal uważam, że obydwa rozszerzenia są ciekawe i warte zastosowania, ale niekoniecznie na stronie tak użytkowej jak moja obecna. Inna sprawa, gdy ekran na chwilę przygasa by po rozwinięciu jasnego tła ukazać zaintrygowanemu obserwatorowi piękne zdjęcie przyrody, a inna gdy w ten sposób pokazywany jest bardzo funkcjonalny formularz do wykonania faktury miesięcznej konserwatorów. To po prostu stylistycznie nie pasuje. Stąd szukałem dalej czegoś bardziej odpowiedniego i przede wszystkim funkcjonalnego. Takim skryptem okazał się program:
- Pop-up - pomijając śmieszną nazwę skrypt po drobnych modyfikacjach spełnił moje oczekiwania. Otwiera on miniaturkę obrazka w oknie o zdefiniowanej wielkości. Do otwieranego okna wprowadziłem zastosowany na stronie arkusz stylów, co pozwoliło osiągnąć spójny z resztą witryny efekt. Zmieniłem również miejsce otwierania obrazka oraz modyfikując wartości 'title' i 'alt' odnośnika uzyskałem dwukolorowy napis w otwieranych oknach, nawiązujący do nagłówków pozostałych stron serwisu. Wrzucenie obrazków do tabeli z wartością 'border' = 0 zakończyło ten etap prac. Powstała galeria jest, moim zdaniem, bardzo szybka, funkcjonalna i estetyczna (choć na pewno mniej efektowna niż w/w przeglądarki), a przez to całkowicie odpowiadająca wymaganiom określonym przez tematykę strony.
- UWAGA zestawienie ciekawych linków do stworzenia galerii można znaleźć tutaj

WYŚWIETLANIE WIADOMOŚCI TEKSTOWYCH - Ze skryptu Highslide zaczerpnąłem jednak wyświetlanie informacji tekstowych - w ten sposób realizowana jest informacja o nowościach na stronie tytułowej. Pierwotny skrypt nieco zmodyfikowałem jeżeli chodzi o rozwiązania barw, wprowadzając zieleń dla nawiązania do reszty strony, a w napisach podnosząc kontrast - poprzednie były bardziej popielate, a przez to mniej czytelne. W ostatniej chwili skrypt wciągnąłem również na stronę 'o mnie'. Sądzę, że bez przyciemnianego tła wygląda nieco 'lżej' niż Lightbox ;)

DYMKI I PRZEWIJANIE STRON - skrypty niewidoczne na pierwszy rzut oka, ale po chwili korzystania dające ciekawy efekt nie obniżający walorów użytkowych strony:
- Smooth scroll - urozmaicenie przewijania stron. Ze względu na fakt, że zastosowałem sporą ilość kotwic w tekście jest to bardzo przydatny element. Należy jednak dokładnie sprawdzić jego działanie, ponieważ z niejasnych przyczyn niektóre kotwice przestają działać lub przewijanie jest niedokładne - można przesunąć kotwicę (nieco sztucznie, ale skutecznie) omijając tę usterkę. Przykład: zastosowano osiem kotwic, z których jedna (siódma) nie działa,
- Overlib - bardzo obszerna o dużych możliwościach modyfikacja dymków do odnośników. Na swojej stronie zastosowałem dymki bez napisów, ale z tłem graficznym w postaci obrazka. W ten sposób oznaczyłem wszystkie linki do stron serwisów zewnętrznych, mając nadzieję na kolejne nie nachalne urozmaicenie, nie pogarszające funkcjonalnosci strony.
- Menu rozwijane/wysuwane - Bardzo popularny skrypt. Na inne rozwiązania tego tematu, oparte na elementach graficznych można często natrafić w sieci. Początkowo skrypt wprowadziłem, ale później z niego zrezygnowałem. Przy zakresie objętościowym strony oraz przyjętej tematyce menu rozwijane zmniejsza chyba przejrzystość witryny. Obecnie wybranie pozycji z menu bocznego odsyła użytkownika do podstrony, gdzie znajduje się parę zdań wstępu i zestawienie linków do pozostałych podstron danego zakresu tematycznego. Takie rozwiązanie wydaje mi się bardziej użyteczne.

BIBLIOTEKA JAVA SCRIPT MOOTOOLS - z wielu bardzo ciekawych efektów, które oferuje, na mojej stronie wykorzystałem:
- fx.slide.js - rozwijane nagłówki zastosowane na tej i innych podstronach o dużej ilości tekstu. Przy długich tekstach, w których da się wyróżnić rozdziały bardzo szybko możemy zwiększyć funkcjonalność strony. Efekt nie jest jednak zgodny z przedstawianym wyżej skryptem Smooth scroll (przynajmniej u mnie), dlatego na tej podstronie zastosowałem analogiczny efekt z mootoolsa,

Do strony głównej

POMOCE DLA BARDZO POCZĄTKUJĄCYCH

• A. Tomaszewska-Adamarek Tworzenie www. Przewodnik
• Bartosz Danowski ABC tworzenia stron www
• Sławomir Kokłowski Kurs HTML
• Forum internetowe o tworzeniu stron www ForumWEB

I NIECO BARDZIEJ POSZUKUJĄCYCH

• Strona poświęcona projektowaniu CSS
• Praktyczne wprowadzenie do Java Script
• Biblioteki JavaScript Mootools
• Blog tematyczny p. Piotra Petrusa
• Witryna pomocy/kursu Algorytm - abonament
• literatura dotycząca PHP i MySQL

Do strony głównej

Tworzenie stron www ilustrowany przewodnik

Wydawnictwo Helion Warszawa 2007.
Bardziej broszurka niż książka, ale jeżeli ktoś chce w krótkim czasie zapoznać się z tematyką i ocenić czy chce się nią zajmować czy po prostu stworzy własną stronę lub bloga korzystając z gotowych generatorów, może być przydatna. Przyjęta konwencja książeczki nie pozwala jednak oczekiwać od niej nic wiecej ponad króciutkie zasygnalizowanie zagadnień: na niecałych 180 stronach formatu A-5 autorka omawia: "tworzenie własnego blogu, edytory kodu i narzędzia wizualne, przetwarzanie grafiki, elementy tekstowe, tworzenie formularzy, formatowanie stron za pomocą arkuszy stylów, tworzenie elementów dynamicznych w JavaScript, przygotowanie animacji w programie Macromedia Flash oraz rejestrację witryny w wyszukiwarkach" uff...

Do początku strony Do strony głównej

ABC tworzenia stron www

Wydawnictwo Helion Warszawa 2006.
Tytuł dokładnie odzwierciedla zawartość. Omawiane podstawy HTML i CSS, razem z podstawami obróbki grafiki na potrzeby stron internetowych. Bardzo dobra pozycja na dobry początek. Wiele tematów pominięto, ale wynika to z przyjętej objętości i konwencji serii 'abc ...' Przy czym w odróżnieniu od wyżej wymienionej pozycji autor skupia się na tworzeniu witryn statycznych oraz omawia narzędzia do obróbki grafiki pod kątem stron internetowych - między innymi przygotowanie mapy odsyłaczy na przykładzie zdjecia.

Do początku strony Do strony głównej

Kurs HTML

Autorski kurs podstaw HTML i CSS pana Sławomira Kokłowskiego. Bardzo dobra rzecz. Klarowny uporządkowany wykład z mnóstwem przykładów. Jest naprawdę dla każdego początkującego. Ze względu na założenia serwisu nie omawia on np. pisania skryptów Javy - oferuje jedynie gotowe wzory, ale kilka rozwiązań np. generator kolorów czy tabele znaków będą przydatne dla każdego - również tych bardziej zaawansowanych kursantów. Całą witrynę można ściągnąć i wygodnie czytać offline. Z czystym sumieniem polecam. Jeśli masz ochotę zapoznać się z tym serwisem kliknij tutaj.

Do początku strony Do strony głównej

Forum WWW

Forum internetowe dotyczące różnych aspektów budowania stron www, będące w zasadzie uzupełnieniem pozycji podanej wyżej. Klarowny podział tematyczny, bardzo bogaty spis zagadnień. Warto, by każdy zainteresowany tworzeniem stron www poświęcił nieco czasu na poczytanie o problemach innych i sposobach ich rozwiązywania. W moim odczuciu walory użytkowe witryny obniżają użytkownicy ;) - bardzo dokuczliwe jest czytanie zapytań od osób, którym nie chciało się poczytać kursu z pozycji powyżej (zadają pytania będące niemal dosłownym zacytowaniem np. tytułu rozdziału kursu) lub ściągnęli skrypt i mają problem 'jak wciągnąć skrypt X na stronę Y' mimo że bardzo dokładnie zostało to opisane na stronie źródłowej z której korzystali. Jeśli masz ochotę zapoznać się z tym serwisem (i nie zadawać rozbrajających pytań ;) kliknij tutaj.

Do początku strony Do strony głównej

Strona dot. CSS

Strona w języku angielskim dotycząca praktycznych rozwiązań w oparciu o kaskadowe arkusze stylów CSS. Jej zaletą jest w moim odczuciu ilustrowanie każdego zagadnienia/przykładu kodem HTML i CSS. Nie zastąpi kursu, skierowana jest do osób, które trochę już wiedzą i po prostu szukają przykładów, ale jest łatwa w nawigacji. Mimo, że nie zastąpi literatury czy kursu opisanego wyżej, to może być ich ciekawym uzupełnieniem. Sądzę, że analizowanie przykładów jest dobrą i skuteczną formą nauki. Osoby zainteresowane tą stroną zapraszam do klikania tutaj.

Do początku strony Do strony głównej

Praktyczne wprowadzenie do JavaScript

Blog tematyczny pana Damiana Wielgosika (ps. ferrante). Najlepsze jakie udało mi się znaleźć wprowadzenie do języka Java Script. Ferrante bardzo przystępnie omawia, na przykładzie, pisanie, krótkich algorytmów w tym języku. Dla osób, które już wcześniej cokolwiek programowały niektóre tłumaczenia są aż za proste (zmienna w programowaniu, funkcja if itp.), ale przy talencie dydaktycznym autora żaden czytelnik nie ma prawa czuć się zakłopotany. Najpierw następuje 'opis zjawiska' (cały czas na przykładzie), dopiero później wprowadzane są pojęcia techniczne, które często wrzucane na początku onieśmielają (na zasadzie 'nawet nie rozumiem co do mnie mówią, więc chyba się nie nauczę'). Blog zawiera jeszcze wiele innych interesujących tematów (na 'rozkładzie jazdy' mam wprowadzenie do JQuery). Jak dla mnie ferrante może kandydować do tytułu 'Dydaktyk Roku' i 'Orderu Uśmiechu' jednocześnie ;) Osoby zainteresowane tym blogiem zapraszam do klikania tutaj..

Do początku strony Do strony głównej

Biblioteki JavaScript Mootools

Kolejny oparty na koncepcji bloga tematycznego kurs/omówienie tym razem biblioteki do Java Script - frameworka o nazwie 'Mootools' (konkurencyjnego do wspomnianego wyżej JQuery). Autor omawia bardzo ciekawe dodatki dające większe możliwości niż sam JavaScript i robi to w sposób bardzo przystępny. Najpierw zapraszam do wybranych przykładów zastosowania Mootools - tutaj, a później osoby zainteresowane tym blogiem zapraszam do klikania tutaj. Biblioteka Mootools opisana na tym blogu została przeze mnie wykorzystana między innymi do uzyskania efektu rozwijanych nagłówków na tej podstronie.

Do początku strony Do strony głównej

Blog tematyczny p. Piotra Pietrusa

Kolejny blog tematyczny tym razem wszystkiego po trochu o projektowaniu stron. Blog nie jest już prowadzony, ale warto skorzystać z obszernego i bardzo ciekawego archiwum. Bardzo przyjemnie czyta się poszczególne opisy - osoby zainteresowane tym blogiem zapraszam do klikania tutaj..

Do początku strony Do strony głównej

Witryna pomocy/kursu Algorytm - abonament

Ogromny wybór tematów i system pomocy. Nie pamiętam, by użytkowników online było mniej niż 200 (za każdym razem gdy wchodzę na tę stronę - nawet o bardzo niechrześcijańskich porach w stylu 'czwarta nad ranem'). Bardzo przystępne tłumaczenia. Nawet jeżeli nie wykupisz abonamentu to warto skorzystać z zakładki 'Kurs XHTML/CSS' wraz z wyszukiwaniem haseł - dla początkujących (i chyba nie tylko) bardzo przydatne. Jedyna wada witryny to ograniczenie dostępu, ale biorąc pod uwagę kwotę abonamentu rocznego - to niewielka wada. Osoby zainteresowane witryną zapraszam do klikania tutaj..

Do początku strony Do strony głównej

Literatura dot. PHP i MySQL

Zakup tej literatury wiąże się z moją chęcią zdobycia wiedzy potrzebnej do tworzenia stron internetowych o profilu bardzo użytkowym - chciałbym napisać stronę, na której odwiedzający będzie mógł sprawdzić np. dostępność towaru na magazynie fikcyjnego sklepu, czy warsztatu, zalogować się i oddać np. odczyty wody (w przypadku strony zarządcy nieruchomości) itp. Z tego co wstępnie rozpoznałem temat, aby osiągnąć cel jakim jest budowa dynamicznych stron internetowych, muszę opanować język PHP i budowę baz danych opartych o MySQL.
Zakupiłem trzy książki:

• E. Quigley, M. Gargenta PHP i MySQL - księga przykładów
• M. Davis, J. Phillips PHP i MySQL - wprowadzenie
• A. Szeląg PHP, Microsoft IIS, SQL Server - Projektowanie i programowanie baz danych.

Jak na razie wrażenia z ich pobieżnego przejrzenia są jak najbardziej pozytywne - temat wydaje się do opanowania - najwyższy czas na schody ;)
Jak już zrobię postępy to napiszę coś więcej o książkach. Sam temat jest na pewno fascynujący ;)

Do początku strony Do strony głównej