Dokumentacja techniczno-użytkowa Serwis internetowy www.art-dom.cba.pl Projekt i wykonanie Dominika Marzec dominika.marzec@poczta.fm
Spis treści 1. Charakterystyka ogólna... 3 2. Domena i hosting... 3 3. Charakterystyka szaty graficznej... 4 3.1 Strona główna... 4 3.2 Projekt menu... 6 3.3 Przyciski menu głównego... 7 3.4 Podstrona PORTFOLIO... 8 3.5 Podstrona KONTAKT... 9 4. Prawo autorskie oraz licencje... 9 5. Standardy oraz specyfikacja... 10 Projekt graficzny... 10 Zgodność ze standardami... 10 Oprogramowanie związane z dostępnością... 10 2
1. Charakterystyka ogólna Witryna internetowa poświęcona jest aranżacji i wystrojowi wnętrz. Na stronie znajduje się galeria z autorskimi pracami, związanymi z kreatywnym projektowaniem pomieszczeń takich jak: kuchnia, łazienka oraz salon. W czasach, w których większość czasu spędzamy zamknięci w czterech ścianach ogromne znaczenie mają wnętrza. Wystrój pomieszczenia, bez wątpienia wpływa na nasze samopoczucie oraz zapał do pracy. Nowa technologia i możliwości budowlane pomagają zaaranżować ulubioną przestrzeń w taki sposób, w jaki sobie to wymarzyliśmy. Niniejsza strona poświęcona jest właśnie projektowaniu naszej codziennej przestrzeni czyli aranżacji wnętrz. 2. Domena i hosting Pliki witryny hostowane są na koncie WWW utworzonym na serwerze witryny: www.cba.pl. Konto hostingowe jest kontem bezpłatnym. Konto hostingowe powiązane jest z domeną utworzoną na potrzeby witryny Projektu: www.art-dom.cba.pl 3
3. Charakterystyka szaty graficznej 3.1 Strona główna Layout graficzny przygotowano głównie o grafikę zapisaną w formacie jpg. Tło: Kolor: Biały Hex (szesnastkowo) #FFFFFF RGB [0 255] (255, 255, 255) CMYK [0 100%] (0, 0, 0, 0) HSV [, %, %] (0, 0%, 100%) W skład layout u tła weszły pliki w rozdzielczości 72 dpi, o rozszerzeniach jpg oraz png publikowane w elementach blokowych div. Obrazki wykonane za pomocą programu Photoshop. 4
Środek: Rozdzielczość: 72 dpi Szerokość: 900 px Wysokość: 520 px Na stronie głównej znajduje się również zdjęcie, przedstawiające fotografię wnętrza. Wykorzystany obrazek zapisany jest w formacie png. 5
3.2 Projekt menu W projekcie uwzględniono jedno menu (menu główne-lewe) ze względu na założenia projektowe. W projekcie uwzględniono grafiki w formatach jpg oraz png stworzone na potrzeby witryny w programie do grafiki rastrowej Photoshop. Wykorzystana grafika: 6
Obrazki Format: jpg. Rozdzielczość: 72 dpi Szerokość: 260 px Wysokość: 430 px 3.3 Przyciski menu głównego Powyżej przedstawione przyciski menu głównego zostały stworzone na zasadzie pojemników (div) o parametrach: 7
3.4 Podstrona PORTFOLIO Podstrona zawiera galerię autorskich prac dotyczących tematyki projektowania wnętrz. Do stworzenia przewijanej galerii wykorzystano technologię Zoombox, której elementy pobrano ze strony: http://grafikart.github.io/zoombox/. Na witrynie znajdowały się pliki zarówno css, odpowiadające za szatę graficzną oraz Java scripts, związane z funkcjonalnością i użytecznością. 8
3.5 Podstrona KONTAKT W celu ułatwienia kontaktu pomiędzy użytkownikiem strony, a jej autorem na podstronie umieszczono dane kontaktowe jak również formularz. 4. Prawo autorskie oraz licencje Grafika Każdy element graficzny layout-u witryny został wykonany samodzielnie przez Wykonawcę z uwzględnieniem standardów obowiązujących grafikę WWW. Na potrzeby projektu wykorzystano fotografie za darmo dostępne w Internecie, jak również autorskie wizualizacja wykonane w programie 3dmax. 9
5. Standardy oraz specyfikacja Witryna w całości (uwzględniając stronę główną oraz podstrony) wykonana została w zgodzie z założeniami specyfikacji XHTML 1.0 (drugie wydanie specyfikacji) w wersji przejściowej Transitional. Tym samym dokument cechuje poprawność składniowa 1. DTD (definicja typu dokumentu): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Poprawność składniową dokumentu potwierdza pełna walidacja W3C oraz walidacje wtyczkami Mozilla Addons: Total Validator, HTML Validator. Dokument przygotowano z uwzględnieniem optymalizacji kodu pod wyszukiwarki internetowe. Optymalizacja kodu oraz treści stanowi podstawę pozycjonowania, usprawni indeksowanie witryny w wyszukiwarkach, co wpłynie na jej pozycję w wynikach wyszukiwania. Projekt graficzny Układ graficzny tej strony opisany jest przez arkusze stylów kaskadowych (CSS). Grafikę utworzono również w programie Photoshop oraz Gimp. Wizualizacje umieszczone w Galerii zdjęć wykonano za pomocą programu do grafiki 3d-3dmax Studio. Cała zawartość strony jest nadal łatwa do odczytania. Zgodność ze standardami Wszystkie strony spełniają najważniejsze wytyczne W3C Web Content Accessibility Guidelines. Wszystkie strony przechodzą walidację jako XHTML 1.0 Strict Oprogramowanie związane z dostępnością Intellgent Web Reader, bezpłatny program udźwiękawiający strony internetowe. 1 Poprawność składniowa to nowe pojęcie wprowadzone przez [XML]. Zasadniczo oznacza ono, że wszystkie elementy muszą albo mieć znaczniki zamykające, albo być napisane w specjalnej formie oraz, że wszystkie elementy muszą być prawidłowo zagnieżdżone [Polskie tłumaczenie specyfikacji XHTML 1.0 przełożył Michał Górny]. 10
Więcej informacji o tym oprogramowaniu znaleźć można na stronie firmy IVO Software. JAWS, program udźwiękawiający (ang. screen reader) dla Windows. Window-Eyes, program udźwiękawiający dla Windows. Lynx, darmowa przeglądarka tekstowa polecana dla użytkowników niewidomych używających monitorów brajlowskich. Opera, darmowa przeglądarka graficzna posiadająca wiele cech związanych z dostępnością stron, m.in. skalowanie tekstu, style użytkownika, wyłączenie pobierania obrazków ze strony. Program dostępny na: Windows, Macintosha, Linuksa i inne systemy operacyjne. 11