Dokumentacja techniczno-użytkowa Serwis internetowy

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "Dokumentacja techniczno-użytkowa Serwis internetowy www.art-dom.cba.pl"

Stefan Sobolewski
9 lat temu
Przeglądów:

1 Dokumentacja techniczno-użytkowa Serwis internetowy Projekt i wykonanie Dominika Marzec dominika.marzec@poczta.fm

2 Spis treści 1. Charakterystyka ogólna Domena i hosting Charakterystyka szaty graficznej Strona główna Projekt menu Przyciski menu głównego Podstrona PORTFOLIO Podstrona KONTAKT Prawo autorskie oraz licencje Standardy oraz specyfikacja Projekt graficzny Zgodność ze standardami Oprogramowanie związane z dostępnością

4 Podstrona PORTFOLIO... 8 3.5 Podstrona KONTAKT... 9 4. Prawo autorskie oraz licencje... 9 5.

3 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: Konto hostingowe jest kontem bezpłatnym. Konto hostingowe powiązane jest z domeną utworzoną na potrzeby witryny Projektu: 3

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.

4 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

Tło: Kolor: Biały Hex (szesnastkowo) #FFFFFF RGB [0 255] (255, 255, 255) CMYK [0 100%] (0, 0, 0, 0) HSV [,

5 Ś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

6 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

W projekcie uwzględniono grafiki w formatach jpg oraz png

7 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

8 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: 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

Do stworzenia przewijanej galerii wykorzystano technologię Zoombox, której elementy pobrano ze

9 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

Prawo autorskie oraz licencje Grafika Każdy element graficzny layout-u witryny został wykonany samodzielnie przez

10 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" " <html xmlns=" 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

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.

11 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

Lynx, darmowa przeglądarka tekstowa polecana dla użytkowników niewidomych używających monitorów brajlowskich.

Podobne dokumenty

E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści

E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, 2014 Spis treści Przewodnik po podręczniku 8 Wstęp 10 1. Hipertekstowe języki znaczników 1.1. Elementy i znaczniki