Strony www

Adobe Fireworks CS4

Jest to program przeznaczony dla webmasterów oraz grafików. Jego zadaniem jest tworzenie oraz edycja grafiki wykorzystywanej na potrzeby stron WWW. Większość webmasterów używa do tworzenia stron WWW programu Photoshop. A może warto spróbować czegoś równie dobrego a może lawet lepszego? Program ten jest bardzo dobry do tworzenia szablonów stron i projektów. Jeśli chodzi o funkcjonalność i dostępność narzędzi to przewyższa on Photoshopa.  Jeśli natomiast zajmujemy się tylko grafikom komputerową to Fireworks nie będzie dla nas zbyt atrakcyjny.  Największym plusem tego programu jest możliwość stworzenia interaktywnego pliku PDF który będzie projektem strony WWW.  Format ten nie jest zbyt popularny jeśi chodzi o projekty stron WWW, jednak w innych dziedzinach zyskał on ogromne uznanie. Największym plusem jest to że projekt ten zachowa oryginalny wygląd oraz będzie interaktywny dzięki czemu w prosty sposób przełączymy się między podstronami. Używanie programu Adobe Fireworks nie jest trudne a osoby znające Photoshopa od razu zorientują się o co chodzi. Do dyspozycji mamy narzędzia wektorowe oraz bitmapowe. Mamy tez możliwość importowania gotowych grafik. Program ten umożliwia także otwieranie dokumentów które były przygotowane w Photoshop i zapisane zostały w formacie PSD. Fireworks umożliwia tworzenie interaktywnych dokumentów. Dzięki temu w rezultacie otrzymujemy jakby prototyp gotowej strony. Możemy skopiować zrobioną warstwę która jest stroną i wyłączyć warstwy z tekstem. Następnie dodajemy inne teksty dzięki czemu tworzymy kolejną podstroję z nową zawartością. Oczywiście możńa też zrobić kolejną podstroję całkowicie od nowa.  Jak już utworzymy odpowiednią ilość podstroi trzeba dodać interaktywny element o nazwie Hot Spot. Dzięki niemu zaznaczymy odpowiedni obszar który będzie linkiem do kolejnej podstrony.  Program umożliwa nam proste dodawanie nowych obszarów tego typu.  W najnowszej wersji tego projektu jest możliwość zapisu dokumentów składających się z wielu stron. Dzięki temu możliwe jest zachowanie wszystkich elementów interaktywnych. Projekt w PDF zachowuje swój oryginalny wygląd szczególnie jeśli chodzi o czcionki i grafikę. Dzięki takiemu rozwiązaniu i zapisaniu prototypu strony  w PDF możemy go wysłać użytkownikowi który pracuje na dowolnym systemie operacyjnym a on bez problemu go odczyta.

Grafika na stronach WWW

Pamiętajmy by prezentowane zdjęcia na naszej stronie były w rozmiarze 1:1, unikajmy skalowania obrazków. Program w których budujemy stronę internetową takie jak Dreamweaver czy Flash mają problemy z poprawnym skalowaniem, podobnie zresztą jak przeglądarki internetowe. Bardzo często dochodzi do ingerencji w jakość naszego pliku. Dlatego warto umieszczać grafikę w rzeczywistej wielkości która będzie najlepszym odwzorowaniem. Problem pojawia się podczas tworzenia galerii wtedy jesteśmy zmuszeni tworzyć miniaturki.  Każdą grafikę należy tworzyć w rozdzielczości 72ppi. Pozwala na to na najbardziej efektywne wyświetlanie plików graficznych an monitorze komputera. Zwiększenie rozdzielczości nie jest wskazane ze względu an rozmiar pliku który będzie większy przez co zajmie więcej miejsca na serwerze oraz będzie się dłużej wczytywał.  Przy pracy z grafiką musimy się starać unikać palety CMYK,  pamiętajmy że pracujemy nad wyświetlaniem na monitorze a nie nad drukiem a właśnie do tego służy CMYK. Dlatego my pracujemy w palecie RGB lub palecie indeks walnych kolorów.  Coraz częściej strony WWW nie tylko zawierają grafikę ale same są projektem graficznym który zostaje przekształcony w stronę WWW. Najlepszym według Mie programem do tworzenia projektów stron WWW jest Adobe Photoshop. Ważnym aspektem jest odpowiednia optymalizacja grafiki pod kątem Internetu. Musimy na tym etapie dobrać odpowiednio stopień kompresji i odpowiedni format graficzny. Dla zdjęć nadal najlepszym rozwiązaniem jest format JPG, jeśli mamy fotki z małą ilością kolorów to możemy użyć GIF. Dla uzyskania większej jakości oraz przejrzystości możemy zapisać pliki w formacie PNG. Wielu webmasterów używa PNG a właściwie jednej z jego właściwości – przeźroczystości. Dzięki temu jest możliwa łatwa zmiana kolorystyki strony.  Parametry optymalizacji dla WWW wybieram podczas zapisu plików dla strony WWW – zapisz dla Weba… Jest to bardzo wygodne narzędzie mamy do dyspozycji 4 opcje. Możemy w locie porównać jakość obrazu optymizowanego z jakością oryginalną. Po prawej stronie okna mamy zestaw narzędzi w którym wybieramy odpowiedni format i jego jakość. Pamiętajmy by zwrócić uwagę na wymiar zdjęcia by dobrze pasowało ono nam do całej strony WWW., jeśli będzie za mała to nc się nie stanie, najwyżej będzie mało atrakcyjna, ale za duża może popsuć nam cały układ strony i spowodować ze będzie ona niewłaściwie wyświetlana w przeglądarce.

kolory na stronie

Według encyklopedii kolory to promieniowanie elektromagnetyczne o odpowiedniej długości i mieszczące się w przedziale od 350 do 700 nm. Promieniowanie to po dotarciu do oka jest zamieniane na impulsy mózgowe. Każdy kolor ma inną falę, te które mają poniżej 350nm są nazywane falami ultrafioletowymi (UV). Natomiast te które są wyższe od 700nm nazywamy podczerwonymi. Mówiąc o kolorach nie sposób nie wspomnieć o kole barw, jest to w pewnym sensie umowne pojecie, w kole czerwień i fiolet stykają się ze sobą. Teorię koła kolorów stosuje się w momencie tworzenia nowych kolorów oraz przy określaniu powiązań między kolorami. Na co dzień stosowane SA dwa systemy kolorów. Dla urządzeń takich jak telewizory, LCD, monitory stosujemy system RGB. Nazwa ta powstała z połączenia pierwszych liter nazw kolorów czyli Red, Green, Blue. Jeśli mówimy natomiast o kolorach na papierze, czyli np. czasopisma to obowiązuje tam system CMYK. On tak jak i jego poprzednik został utworzony z pierwszych liter kolorów: cyjan, Magenta, yellow, Black. System ten nadaje się lepiej do przedstawiania barw na dokumentach drukowanych.  Podsumowując ze względu na sposób wyświetlania tryb RGB stosujemy do tworzenia obrazów w urządzeniach elektronicznych a system CMYK wtedy gdy drukujemy. Sprawdzamy jak monitor komputerowy wyświetla kolory. Jeśli obejrzymy któreś z tych urządzeń za pomocą szkła powiększającego to zobaczymy że ekran składa się z punktów, można je podzielić na zielone, czerwone i niebieskie. Rozłożenie tych punktów w całości tworzy obraz który oglądany z pewnej odległości. Wtedy nie widać punktów a jednolitą całość. W ten sposób, wykorzystując niedokładność oka ludzkiego tworzony jest kolorowy obraz który składa się tylko z trzech kolorów.  Punkty te jednak mogą świecić z różną częstotliwością, a jest ich 256. Gdy na rynku królował Windows 3.11 i monitory wyświetlały tylko 256 kolorów to określono bezpieczne kolory przeglądarki. Aby zapisywać kolory na stronach WWW stosuje się nazwy kolorów zapisywane w systemie szesnastkowym.  Używamy go zarówno w dokumentach html jak i w arkuszach stylu CSS.  Trend kolorów które były wyświetlane na stronach WWW nadała kilka lat temu przeglądarka Netscape, jako lider rynku w tamtych latach. Wtedy to zdefiniowano 140 nazw kolorów zaczerpniętych z języka angielskiego.  Możemy je stosować Zamienie z tymi zapisanymi w systemie szesnastkowym.  Większość przeglądarek potrafi odczytać kolory zapisane w ten sposób.  Najnowsze standardy jednak zalecają stosowanie notacji szesnastkowej. Wielu webmasterów zadaje sobie pytanie ilu kolorów należy użyć na stronie WWW. Jeśli zastosujemy za dużo kolorów to strona będzie wyglądała mało profesjonalnie a dla oczu będzie męcząca.

TYPO3

Jest to obok Drupala i Joomli jeden z najpopularniejszych i najpotężniejszych systemów CMS. Oprogramowanie to jest dostępne na podstawie licencji GNU GPL. Posiada on obsługę wielu języków w tym polskiego. Ciekawym rozwiązanie które posiada ten CMS jest możliwość stworzenia kilku witryn za pomocą jednego instalatora. Posiada on spore możliwości które możemy wykorzystać podczas budowy strony WWW. Jeśli do modyfikacji naszej strony mają dostęp osoby trzecie możemy im dać odpowiednie prawa. Umożliwi to wbudowany system zarządzania grupami użytkowników. Istnieje kilka tysięcy rozszerzeń dla TYPO3. Większość systemów CMS podobnie zresztą jak omawiany posiada stronę administracyjną i stronę frontową widoczną w przeglądarce po wpisaniu adresu strony. Po stronie administracji zarządzamy całą treścią strony i wszystkimi ustawieniami. Jak już wcześniej wspomniałem CMS ten jest zorientowany na strony co oznacza iż pojedynczą strona jest podstawą całej witryny. Jest to odmienność w stosunku do wielu innych rozwiązań tego typu. Po nadaniu redaktorowi odpowiednich praw może on za pomocą edytora dodawać treść w odpowiednim miejscu witryny. Każda nowo utworzona strona jest z automatu dodawana do menu. Jeśli chodzi o szablony to istnieją dwie główne metody wykorzystywania szablonów. Dla nich właśnie przeznaczony jest specjalny typ zawartości o nazwie Template. Operujemy w nim specjalnym językiem o nazwie TypoScript. W tym CMS-się istnieją też inne silniki szablonów np. Modern template Building. Za jego pomocą możemy poznać dokładnie opisywany typoScript. Do naszej witryny możemy bez problemu dodać system newsów który musimy najpierw zainstalować korzystając z odpowiednich repozytoriów. Instalację przeprowadzamy za pomocą: Ext Managera w sekcji Tools. Warto zapozanć się z rtym CMS-em, najpierw zbudujmy małą witrynę a później sprawdźmy bardziej zaawansowane zastosowania.

Szablon WordPress

W WordPress szablony oparte są o style CSS. Każdy szablon wgrywamy do odrębnego katalogu w wp-content/thems. W tym miejscu znajdują się wszystkie pliki szablonów. Podczas wejścia oglądającego na stronę www system pobiera odpowiedni szablon i wyświetla w nim treści.  Podobnie z obrazkami i innymi stylami, one także powinny się znajdować w tym katalogu. Pliki z których zbudowany jest szablon dla WordPress to zwykłe pliki PHP. System ten umożliwia nam w prosty sposób publikowanie treści i określonych elementów na stronie. Najprostsza skórka musi posiadać dwa pliki pierwszy z nich o nazwie index.php a drugi style.css. Pierwszy z nich spełnia funkcję domyślnego szablonu dla wszystkich podstron, natomiast w pliku stylów definiujemy wygład naszej strony. Aby informacje o skórce wyświetliły się w panelu administracyjnym należy w pliku stylów zapisać meta dane o szablonie czyli jego skrócony opis, info o autorze i jego nazwę. Dane te umieszczamy jako komentarz. Zerknijmy do skórki default by zobaczyć jakie dokładnie musimy określić identyfikatory. W WordPress wyświetlamy różne dane: stronę, post, kategorię itp. Dla każdej z tych grup możemy określić odrębny szablon. Przed przystąpieniem do tworzenia nowego szablonu warto przemyśleć jego strukturę. Najprostsza to nagłówek, treść i stopka. Za wyświetlenie odpowiedniego nagłówka odpowiada funkcja get_header. Mamy do dyspozycji więcej funkcji a są to:

Name, description, url,  atom_url itd. Jeśłi system nie znajdzie odpowiedniego szablonu to zawsze wyświetli treść za pomocą index.php. Ale najpierw przeszuka zasoby i sprawdzi np. czy dla strony głównej istnieje plik home.php a dla postu post.php. Każdy blog posiada funkcję komentarzy. Dzięki niej odwiedzający mogą skomentować nasze wpisy. Za obsługę komentarzy odpowiada funkcja comments_temoplate. Warto też wspomnieć że przed wczytaniem szablonu system analizuje plik functions.php. Możemy w nim zdefiniować własne funkcje które wykorzystamy na stronie. Jeśli nie dajemy sobie rady z tworzeniem szablonu to w sieci znajdziemy mnóstwo gotowych.