Specyfikacja Specyfikacja strony szkurlat.pl realizowanej przez Visualteam dla... Spis treści 1 Informacje ogólne...1 1.1 Obsługiwane przeglądarki...1 1.2 Technologia wykonania...1 1.3 Wersje językowe...2 1.4 Dodatkowe elementy...2 2 Struktura strony...2 2.1 Schemat struktury strony...2 3 Opis stron...3 3.1 Szablon ogólny podstron elementy stałe...3 3.2 Szablon Strona główna...4 3.3 Szablon Lista podkategorii...5 3.4 Szablon Lista produktów...6 3.5 Szablon Produkt...8 3.6 Szablon Artykuł...10 3.7 Szablon Lista Aktualności...11 3.8 Szablon pełna aktualność...12 3.9 Szablon Lista filmów...13 3.10 Szablon Film...14 3.11 Szablon Serwis...15 3.12 Szablon Zamówienie...16 3.13 Szablon Kontakt...18 3.14 Szablon wersja obcojęzyczna...19 3.15 Szablon Wyniki wyszukiwania...20 4 Funkcjonalność panelu administracyjnego Vtpanel...21 4.1 Informacje podstawowe...21 1 Informacje ogólne 1.1 Obsługiwane przeglądarki Strona będzie zoptymalizowana do oglądania na systemach operacyjnych Windows w przeglądarkach: Internet Explorer 9.0 Firefox 19 Chrome 24 Strona zoptymalizowana do przeglądania w rozdzielczości 1280px; 1.2 Technologia wykonania Strona zostanie wykonana przy użyciu technologii: HTML PHP 5.3 MySQL 5 1
1.3 Wersje językowe Strona zostanie wykonana w 2 wersjach językowych (PL i EN). Wersja angielskojęzyczna będzie powtórzeniem strony polskiej. Plus po 1 artykule w języku niemieckim i rosyjskim. 1.4 Dodatkowe elementy Strona posiada przyjazne linki Strona będzie podpięta do statystyk Google Analitics. Visualteam nie wstawia treści, tytułów, nazw, obrazków na stronę oprócz mapki Google, stałych elementów graficznych i kategorii na głównej stronie. 2 Struktura strony Szablony - Mają za zadanie zobrazować wygląd podstron zawartych w tym projekcie. Są one jedynie poglądowym przedstawieniem treści, które znajdą się na stronach, tzn. że wielkości poszczególnych elementów mogą ulec zmianie, a zwłaszcza ich wzajemne proporcje, natomiast ich umiejscowienie na stronie nie ulega zmianie. Dwie strony oparte na tym samym szablonie nie mogą się różnić co do układu i zawartych elementów. Różnić się będą jedynie treścią. 2.1 Schemat struktury strony Strona główna (Oferta) Szablon Oferta Aktualności Sz. Lista aktualności Oferta Sz. Oferta Podkategoria? Konkretna aktualność Szablon Aktualność Konkretna aktualność Szablon Aktualność Lista produktów Sz. Lista produktów Produkt Sz. Produkt Serwis SZ. Serwis Podkategoria? Lista produktów Sz. Lista produktów Produkt Sz. Produkt Artykuł dynamiczny SZ. Artykuł O nas Artykuł dynamiczny SZ. Artykuł Zamówienie SZ. Zamówienie Artykuł dynamiczny SZ. Artykuł Kontakt Sz. Kontakt Wersja językowa Sz. Wersja jęz. Wyniki wyszukiwania sz. Wyniki 2
3 Opis stron 3.1 Szablon ogólny podstron elementy stałe Elementy indywidualne Elementy stałe, powtarzające się na każdej podstronie - pola zakreskowane: Logo - Logo firmy (dostarcza je Klient) może jakiś element z góry nachodzący. Szybki kontakt numer telefonu i aktywny e-mail. Edytrowalne zawiera linki do stron w następującej kolejności: Strona główna, O nas, Aktualności, Oferta, Serwis, Zamówienie, Kontakt. edytowalny tytuł podstrony (Kategorii w której sie znajdujemy lub konkretnej strony, jeśli nie leży ona w kategorii) wyszukiwarka po frazie. Link do szablonu Wyniki wyszukiwania linki do podstron językowych (flagi) zawiera informacje o prawach firmy Klienta do strony, dane firmy, oraz podpis firmy Visualteam podlinkowany do strony visualteam.pl. 3
3.2 Szablon Strona główna GRUNTY Główna kategoria SPRZĘT DO WIERCEŃ (+nazwa >) (+ zdjęcie) GRUNTY SPRZĘT TERENOWY (+ zdjęcie) GRUNTY i KRUSZYWA SPRZĘT LABORATORY (+ zdjęcie) Slider Główna WODA kategoria (+nazwa (+ ) >) ASFALT i MASY BITUMICZNE (+ ) BETON i CEMENT (+ ) (+opis np. na jakimś półprzezroczystym tle) - link Nasi partnerzy: Logo Nazwa Logo Nazwa Filmy (plus jakaś grafika np. klisza) Elementy stałe (stopka): takie jak w schemacie ogólnym stron. Kategoria pole kategorii głównej produktów, zawierające nazwę i zdjęcie (przysłane przez Klienta). Nasi partnerzy: - po prawej 2 loga wskazane przez Klienta z nazwami firm. - linki do stron www tych firm. Funkcjonalności Vtpanelu: dodawanie, usuwanie, edycja elementów. Kategoria: Nazwa kategorii pole tekstowe wstawianie obrazka 4
3.3 Szablon Lista podkategorii Główna Podkategoria (+nazwa >) Podkategoria (+nazwa >) Podkategoria (+nazwa >) Menu boczne Główna Podkategoria (+nazwa >) Podkategoria (+nazwa >) Podkategoria (+nazwa >) Elementy stałe: takie jak w schemacie ogólnym stron. Podkategoria pole podkategorii produktów, zawierające nazwę i zdjęcie (wstawiane przez Klienta). Menu boczne z rozwiniętą kategorią w której się znajdujemy. Funkcjonalności Vtpanelu: dodawanie, usuwanie, edycja elementów. Podkategoria: Nazwa podkategorii pole tekstowe, wstawianie obrazka 5
3.4 Szablon Lista produktów Nazwa Nazwa Krótki opis Krótki opis więcej więcej Nazwa Nazwa Menu boczne Krótki opis Krótki opis N więcej więcej Elementy stałe: takie jak w schemacie ogólnym stron. Nazwa : nazwa danego Krótki opis: opis tego wstawiony przez Klienta. : pierwsze zdjęcie, automatycznie pomniejszone. Więcej link do konkretnego. N oznaczenie nowości Funkcjonalność vtpanelu: 6
dodawanie, usuwanie i edycja elementów Nazwa: sposób wstawiania: pole tekstowe Krótki opis: wstawianie i edycja tekstu przy użyciu CKEdytora. : sposób wstawiania: wstawianie zdjęcia N przy każdym produkcie można zaznaczyć, czy jest on nowością, czy nie. 7
3.5 Szablon Produkt Nazwa Pełny opis Menu boczne Karta urządzenia Pobierz powrót Zapytaj o urządzenie Elementy stałe: takie jak w schemacie ogólnym stron. Nazwa : nazwa danego Opis: opis tego wstawiony przez Klienta. : 4 zdjęcia, automatycznie pomniejszone. Po kliknięciu w małe zdjęcie wymienia się ono z większym. Po kliknięciu w duże wyświetla się ono w naturalnym rozmiarze, jest możliwość przejścia strzałką do następnego zdjęcia. Karta urządzenia plik PDF do pobrania Zapytaj o produkt link do kontaktu, w temacie formularza wpisuje automatycznie nazwę. 8
Funkcjonalność vtpanelu: Nazwa : pole tekstowe Opis: wstawianie i edycja tekstu przy użyciu CKEdytora. : wstawianie obrazka Karta - wstawianie pliku 9
3.6 Szablon Artykuł Treść Menu boczne Elementy stałe : takie jak w schemacie ogólnym stron. Treść treść wstawiana przez Klienta Menu boczne linki do podstron z kategorii O nas; Na wejściu pojawia się pierwszy artykuł z góry Funkcjonalności vtpanelu: Treść edycja w CKEdytorze 10
3.7 Szablon Lista Aktualności Tytuł aktualności data aktualności Krótka treść aktualności więcej Tytuł aktualności data aktualności Krótka treść aktualności więcej po 6ściu numerki Elementy stałe: takie jak w schemacie ogólnym stron. Tytuł tytuł aktualności Krótka Treść: treść aktualności wstawiana przez Klienta. : zdjęcie aktualności w wielkości zaplanowanej w projekcie graficznym, automatycznie pomniejszone. Więcej link do pełnej aktualności Wyświetla się 6 najnowszych aktualności, później pojawiaja się numerki 1,2,3... - klikalne, zeby zobzczyć wcześniejsze aktualności Funkcjonalność vtpanelu: Data - wybór z kalendarzyka Tytuł : pole tekstowe Treść: wstawianie i edycja tekstu przy użyciu CKEdytora. : wstawianie obrazka 11
3.8 Szablon pełna aktualność Tytuł aktualności data Pełna treść aktualności powrót Elementy stałe: takie jak w schemacie ogólnym stron. Data : data Tytuł tytuł aktualności Pełna Treść: treść aktualności wstawiana przez Klienta. : Klient ma możliwość dołączenia do każdej aktualności 4 zdjeć, są one automatycznie pomniejszone, po kliknięciu otwierają się w oknie Lightbox.. Funkcjonalność vtpanelu: Treść: wstawianie i edycja tekstu przy użyciu CKEdytora. : wstawianie obrazka 12
3.9 Szablon Lista filmów Tytuł filmu Tytuł filmu Tytuł filmu Tytuł filmu Tytuł filmu Tytuł filmu Tytuł filmu Tytuł filmu Elementy stałe: takie jak w schemacie ogólnym stron. Tytuł tytuł filmu : zdjęcie filmu wstawione przez Klienta Funkcjonalność vtpanelu: Tytuł : pole tekstowe : wstawianie obrazka 13
3.10 Szablon Film Player YouTube Powrót Elementy stałe: takie jak w schemacie ogólnym stron. Player YouTube okno playera YouTube Funkcjonalność vtpanelu: Player klient wstawia link do filmy w odpowiednim miejscu. 14
3.11 Szablon Serwis Treść Zapytaj o serwis Elementy stałe : takie jak w schemacie ogólnym stron. Treść treść wstawiana przez Klienta Zapytaj o serwis link do podstrony Kontakt Funkcjonalności vtpanelu: Treść edycja w CKEdytorze 15
3.12 Szablon Zamówienie Formularz (część pól wysokich (W) i część niskich (N)). - opis w treści. Wyślij zamówienie Elementy stałe : takie jak w schemacie ogólnym stron. Formularz: Pola formularza (* - wymagane, W Wysokie jak text area, N niskie (jak pole tekstowe)) Od góry: 1. Imię i nazwisko N,*; 2. Firma N,*; 3. Dane adresowe W,*; 4. NIP N,*; 5. telefon N,*; 6. adres e-mail N,*; 7. Miejsce dostawy N; 8. Sposób dostawy: (radiobutton) odbiór osobisty/wysyłka; 16
9. Szczegóły zamówienia: N,*; 10 rzędów: pola: Nazwa artykułu, Ilość, Cena jednostkowa; 10. Forma płatnosci (radiobutton) N,* gotówka, przelew, pobranie 11. Uwagi do zamówienia W,*; Wyślij zamówienie wysyła zamówienie na wpisany adres e-mail plus na adres Klienta który składa zamówienie. (ten sam mail). Po wysłaniu pojawia się komunikat Dziękujemy za złożenia zamówienia. 17
3.13 Szablon Kontakt Dane kontaktowe Mapka Google Formularz kontaktowy Elementy stałe: takie jak w schemacie ogólnym stron. Dane kontaktowe tekst wstawiany przez Klienta Mapa Google mapa wstawiona przez VT, z lokalizacja Klienta zaznaczoną na niej. Formularz kontaktowy: Pola formularza (* - wymagane) Temat*, Adres e-mail*, Imię i nazwisko*, Treść*. Funkcjonalność vtpanelu: Treść: wstawianie i edycja tekstu przy użyciu CKEdytora. 18
3.14 Szablon wersja obcojęzyczna Treść Elementy stałe: takie jak w schemacie ogólnym stron. Treść tekst wstawiany przez Klienta Funkcjonalność vtpanelu: Treść: wstawianie i edycja tekstu przy użyciu CKEdytora. Treść i inne elementy w języku niem/ros. 19
3.15 Szablon Wyniki wyszukiwania Wyniki wyszukiwania p[o frazie:... Nazwa Nazwa Krótki opis Krótki opis więcej więcej Nazwa Nazwa Menu boczne Krótki opis Krótki opis N więcej więcej Szablon taki jak lista produktów, tylko produkty tylko te, które pasują do frazy. 20
4 Funkcjonalność panelu administracyjnego Vtpanel 4.1 Informacje podstawowe Za pomocą VTpanelu można edytować, usuwać i dodawać wybrane treści na stronie. Dostęp Do panelu administracyjnego (VTpanel) można się dostać po wpisaniu osobnego adresu w przeglądarce internetowej. Najczęściej jest to adres strony z końcówką /vtpanel/ Na stronie startowej VTpanelu należy wpisać login i hasło przekazane przez firmę Visualteam. Sposoby wstawiania i edycji elementów: CK Edytor jest to edytor typu WYSIWYG (What You See Is What You Get). To oprogramowanie nie stworzone przez firmę Visualteam. W panelu używamy go na licencji Gnu Public License. Edytor opiera się na rozwiązaniach własnych przeglądarek Internet Explorer i Firefox. Oznacza to że sposób jego działania jest przez te przeglądarki determinowany. Firma Visualteam, nie ma wpływu na ograniczenia większej części elementów edytora. Wynikają one właśnie z ograniczeń samych przeglądarek internetowych. Edytor pozwala na: wstawianie linków w tekście, pogrubianie i pochylanie czcionki, tworzenie wypunktowanych list, wstawianie obrazków, oraz używanie stylów CSS (dostępnych jest kilka wybranych stylów, zgodnych ze stylami konkretnej strony WWW). Wklejanie do CKedytora tekstów sformatowanych w zewnętrznych edytorach (takich jak Microsoft Word, czy OpenOffice Writer) często prowadzi do utraty formatowania, lub do błędnego formatowania. Aczkolwiek w ograniczonym zakresie jest możliwe. Wstawianie obrazka (przez CKEdytor) - poprzez przeglądarkę plików w vtpanelu, z okna własnego systemu operacyjnego (okno takie jest determinowane ustawieniami komputera i systemu operacyjnego z którego przeglądamy panel administracyjny i przez to niezależne od VTpanelu) użytkownika panelu wybieramy plik lokalny, do przesłania do serwera na którym leży strona. Pliki takie ze względu na ograniczenia serwera nie mogą być większe niż 2MB. Pliki wyświetlane są na stronie w swojej wielkości rzeczywistej (nie są skalowane). Wstawianie obrazka użytkownik przez wyszukiwarkę plików vtpanel wstawia plik obrazka, a program automatycznie skaluje zdjęcie do rozmiarów zaplanowanych na stronie (do maksymalnej szerokości) ale jeśli zdjęcie jest mniejsze, to pozostawia go w źródłowej wielkości. Przy funkcji Lightbox obrazki sa automatycznie zmniejszane. Pole tekstowe zwykłe pole formularza, bez możliwości pogrubiania, pochylenia, listowania, linkowania etc. czyli bez formatowania. Tekst wpisany w takie pole na stronie wyświetla się tak jak zostało to z góry ustalone w projekcie graficznym, tzn według wcześniej ustalonego stylu. 21