Specyfikacja modernizacji interfejsu euro sklep

Euro Sklep Modernizacja interfejsu

Daniel Tomaszewski

1/19/2012

Specyfikacja

Strona 2

Słowem wstępu

Celem projektu jest modernizacja strony internetowej firmy Euro Sklep S.A z siedzibą spółki znajdującej się pod adresem: 43-309 Bielsko-Biała, ul. Bystrzańska 94 a.

Projekt zakłada wdrążenie systemu zarządzania treścią (CMS).

System zarządzania treścią (ang. Content Management System, CMS) jest to aplikacja internetowa lub ich zestaw, pozwalająca na łatwe utworzenie serwisu WWW oraz jego późniejszą aktualizację i rozbudowę przez redakcyjny personel nietechniczny. Kształtowanie treści i sposobu ich prezentacji w serwisie internetowym zarządzanym przez CMS odbywa się za pomocą prostych w obsłudze interfejsów użytkownika, zazwyczaj w postaci stron WWW zawierających rozbudowane formularze i moduły.

Najlepszym i najkorzystniejszym systemem zarządzania treścią jest oprogramowanie TYPO3 który umożliwi modyfikację stron w przyjaznym interfejsie.

Typowe cechy systemy TYPO3:

Cecha Wbud. Rozsz. Uwagi

Edytor tekstu WYSYWIG • Edytor tekstu WYSYWIG z ikonkami podobnymi tych jakie są w Wordzie; wsparcie dla wielu przeglądarek i systemów (Win/IE, Safari, Mozilla Firefox i Opera na wszystkich systemach); opcje edytora są konfigurowalne - przyciski i style kaskadowe CSS mogą być dodawane i usuwane w zależności od grupy do jakiej należy użytkownik lub/i od położenia strony w drzewie witryny.

Intuicyjny interfejs użytkownika

• W panelu administracyjnym strona jest wyświetlana jako drzewo, które odzwierciedla strukturę witryny.

Konfigurowalne poziomy interfejsu użytkownika

• • Panel administracyjny może być przystosowany do umiejętności i zakresu obowiązków użytkownika; Ikony pomocy znajdują się obok większości funkcji.

Historia zmian (Wstecz) • TYPO3 posiada nielimitowaną historię zmian. Można przywrócić zmiany z dowolnego punktu w czasie.

Schowek • Schowek może przechowywać więcej niż jedną stronę lub element treści.

Edytowanie w panelu administracyjnym i bezpośrednio na stronie

• Użytkownik może wybrać czy chce edytować treść w panelu administracyjnym czy bezpośrednio na stronie witryny.

Podgląd treści • Elementy ukryte, wyłączone czasowe mogą być przeglądane online przed publikacją.

Edycja wielu stron jednocześnie

• Edytować można wiele stron jednocześnie wybierając do edycji tylko określone pola - znacznie zwiększa to przejrzystość i szybkość edycji.

System skrótów • Operacje, które są powtarzane wielokrotnie mogą zostać zapisane jako skróty. Skróty mogą być grupowane.

Wewnętrzny system wyszukiwania

• • Edytorzy mogą przeszukiwać drzewo witryny – wynik będzie zawierał wszystkie elementy treści zawierające szukane słowo. Odszukane rekordy mogą być edytowane jednocześnie. Istnieje rozszerzenie, które pozwala na wyszukiwanie i zastępowanie wyrazów.

http://pl.wikipedia.org/wiki/J%C4%99zyk_angielski

http://pl.wikipedia.org/wiki/Aplikacja_internetowa

http://pl.wikipedia.org/wiki/World_Wide_Web

http://pl.wikipedia.org/wiki/Serwis_internetowy

http://pl.wikipedia.org/wiki/Interfejs_u%C5%BCytkownika

Specyfikacja

Strona 3

Cecha Wbud. Rozsz. Uwagi

Prawa użytkownika • Administrator może ustalić jaką treść edytor ma prawo zmieniać, usuwać, dodawać. Dostęp można określać na poziomie poszczególnych stron a także części drzewa witryny. Można ustalać z plików w jakich katalogach użytkownik ma prawo korzystać jak również określić typy i rozmiary plików oraz ścieżki, do których użytkownik ma prawo ładować pliki. Można zmienić wygląd panelu administracyjnego, usunąć przyciski, funkcje i rozszerzenia, których edytor nie potrzebuje lub do których nie powinien mieć dostępu.

Historia logowania • W bazie danych przechowywane są logi udanych i nieudanych prób logowania do systemu.

Logowanie do systemu tylko z określonego IP

•

Logowanie do systemu tylko z określonej domeny

•

Ostrzeżenia email • Ostrzeżenia o udanych i nieudanych próbach logowania mogą być przesyłane do administratora.

Autentykacja • LDAP, Active Directory, Novell e-directory, Oracle, MS-SQL Server, Sybase, MySQL.

Akceptacja treści • • Treść wprowadzona przez edytora będzie musiała zostać zaakceptowana przez recenzenta nim pojawi sie na witrynie.

Ostrzeżenie o jednoczesnym edytowaniu treści

• W systemie, zarówno dla edytorów jak i administratora, dostępna jest informacja, które rekordy są aktualnie edytowane, przez kogo i od jakiego czasu.

Zarządzanie użytkownikami • Administrator może w każdej chwili wyłączyć konto użytkownika i/lub zmienić jego hasło.

Logowanie i treść przez SSL • • Logowanie do panelu administracyjnego oraz wszystkie dane przesyłane przy edycji mogą być kodowane przez SSL.

Logowanie SSL • Kodowanie danych przesyłanych przy edytowaniu strony nie zawsze jest konieczne a powoduje obciążenie systemu, dlatego jest możliwość wymuszenia kodowania SSL dla samego procesu logowania do systemu.

Strony witryny przez SSL • Można wymusić, żeby określone strony witryny były wyświetlane tylko przez SSL.

Historia zmian • TYPO3 posiada nielimitowaną historię zmian. Można cofnąć zmiany do dowolnego momentu.

Dostępność (Accessibility) / WAI

• • W projekcie TYPO3 istnieje specjalny zespół, którego celem jest dbanie o to, żeby TYPO3 i rozszerzenia TYPO3 były dostępne (Accessibility).

Syndykowanie treści przez RSS

•

Importowanie treści przez RSS

•

Strona wynikowa w standardzie UTF-8

•

Specyfikacja

Strona 4

Strona wynikowa jako WML •

Strona wynikowa jako WAP •

Strona wynikowa jako czysty tekst

•

Strona wynikowa przystosowana do wydruku

• •

Strona wynikowa jako PDF •

Strona wynikowa zgodna z XHTML

• • Kod źródłowy HTML może zostać oczyszczony używając wbudowanych narzędzi, rozszerzeń lub programu HTML Tidy.

Strona wynikowa jako XML • • Treść może zostać zapisana w standardzie XML. Często używa się takiego zapisu do witryn opartych na Flash'u.

Własne szablony • Administrator może stworzyć specjalny szablon na szczycie istniejącej witryny i uruchomić inną "wersję" strony równoległą do istniejącej ale inaczej renderowaną. Jest to często wykorzystywane np. do stworzenia wersji stron przystosowanej do wydruku, strony w XML, zapisanej jako PDF lub zwykły tekst.

Skalowanie • Przy użyciu ImageMagick.

Kadrowanie • • Przy użyciu ImageMagick, również połączenie Flash/ImageMagick.

Konwersja typu plików • Przy użyciu ImageMagick.

Rozmieszczenie obrazków względem tekstu

• Użytkownik może wybrać dowolne położenie obrazka względem tekstu (po prawej, po lewej, na środku, tekst opływa obrazek itp).

Wymuszenie rozmiarów i położenia obrazka

• Używając TypoScript można określić domyślne, jak również jedyne możliwe położenia obrazka i jego rozmiary.

Funkcja "Kliknij powiększ" •

Dodawanie podpisów pod obrazkiem, tytułu (title) i napisu alternatywnego (alt)

•

Położenie obrazków względem siebie i tekstu przy pomocy CSS

•

Łączenie obrazów • Przy użyciu ImageMagick.

Własne otoczki obrazków/ramki

•

Dynamiczne dodawanie tekstu do obrazków

• Przy użyciu GDlib.

Specyfikacja

Strona 5

Aktualnie na starej stronie internetowej znajduje się panel zarządzania treścią który uniemożliwia sprawne dodawanie materiałów na stronę, oraz nie ma praktycznie 98% funkcji jakie oferują współczesne CMS’y. Zmiana CMS jest wymagana do pracy w nowoczesnym środowisku programistycznym, jest kluczowym elementem do podstawy funkcjonowania serwisu.

W dalszej części dokumentu dokładnie zostały opisane modernizacje na poszczególnych stronach. Grafika interfejsu użytkownika jest tzw. Prototypem, więc służy tylko do poinformowania który element zostanie zmieniony, dodany, bądź usunięty.

Podgląd panelu administracyjnego:

Specyfikacja

Strona 6

Kosztorys:

Wdrążenie systemu CMS TYPO3 980zł

Uzupełnienie statycznych podstroi. Gratis

Modernizacja strony głównej. Zaprogramowanie slidera multimedialnego, modyfikacja prawego panelu bocznego ; usunięcie miniatury gazetki, wstawienie grafiki.

180zł

Zaprogramowanie strony, oraz podstron sekcji Sklepy. Interaktywna mapa polski z punktami sklepów, wyszukiwanie sklepów, oraz sortowanie.

280zł

Zaprogramowanie interaktywnej gazetki którą będzie można przeglądać tak jak prawdziwą gazetę.

260zł.

Zaprogramowanie sekcji Konkursy. 150zł.

Zastąpienie technologii flash technologią html, optymalizacja strony pod urządzenia mobilne.

120zł.

Całoroczne wsparcie techniczne. W standardzie.

Razem: 1970zł.

Specyfikacja

Strona 7

1. Strona

1.1. Drzewo strony

Strona główna Aktualności Sklepy Znajdź swój sklep Euro sklepy Program lojalnościowy Promocje Kim jesteśmy W drodze do sukcesu Co robimy Jak to robimy Dokąd zmierzamy Galeria Konkursy Aktualne Zakończone Kontakt Dla uczestników sieci Tablica ogłoszeń

Euro Sklep

Strona 8

1.2. Strona główna

Poniżej znajduję się interfejs użytkownika reprezentujący prototyp i szkielet strony.

Strona główna będzie zawierała całkowicie nowy content, który będzie sprawiał, że strona jest przyjazna użytkownikowi. W tej centralnej części znajduje się slider w którym będą wyświetlane aktualne promocje/gazetki/zdjęcia które można przełącząć panelem nawigacyjnym po lewej stronie slidera. Treść slidera będzie przewijała się płynnie i dynamicznie bez przeładowywania strony.

Kluczowym elementem modyfikacji strony jest pozbyciem się przestarzałej technologii flash i zastąpienie jej technologią html5, dzięki czemu strona będzie poprawnie się wyświetlać na urządzeniach mobilnych.

Lewy panel boczny będzie posiadał sub menu pomocnicze, dzięki takiemu posunięciu nawigacja strony będzie bardziej szczegółowa i przejrzysta. Dodatkowe podstrony będą dostępne po najechaniu na daną pozycje która zawiera submenu. Np.: najeżdżając na zakładkę " W drodze do sukcesu" wysunie nam się po prawej stronie dodatkowe submenu zawierające podstony: "Co robimy", "Jak to robimy", "Dokąd zmierzamy".

W prawym panelu zostanie usunięta miniatura gazetki. W pustym miejscu zostanie wstawiony obraz koszyka z środkowej części starej strony.

1.2.1. Interfejs użytkownika

Euro Sklep

Strona 9

Przykład submenu:

1.2.2. Tabela widegtu

Adnotacja Opis

1 Modernizacja prawego panelu. Usunięcie miniatury gazetki. W te same miejsce zostanie przeniesiony obrazek powitalny z środkowego panelu.

2 Menu zaprojektowane od nowa. Przestarzała technologia flash zostaje zastąpiona html5, dzięki czemu urządzenia mobilne poprawnie obsłużą stronę. Menu będzie rozwijalne np.: W drodze do sukcesu => Co robimy | Jak to robimy | Dokąd zmierzamy.

3 W środkowym panelu zawierać się będzie slider który w przyjaznej i przejrzystej formie będzie prezentował aktualne promocje.

4 Element slidera który umożliwi przełączanie promocji.

Euro Sklep

Strona 10

1.3. Aktualności

Strona "Aktualności" zawiera podstrony które wybiera się w lewym panelu nawigacyjnym, więc tym samym strona ta jest zbędna.

Euro Sklep

Strona 11

1.4. Sklepy

Strona "Sklepy" zawiera podstrony które wybiera się w lewym panelu nawigacyjnym, więc tym samym strona ta jest zbędna.

Euro Sklep

Strona 12

1.5. Znajdź swój sklep

W tej sekcji będzie możliwość zlokalizowania eurosklepu, oraz sprawdzenie jakie sklepy zostały ostatnio dodane.



Adnotacja Opis

1 Mapa polski na której naniesione są punkty sklepów. Mapa jest interaktywna, więc będzie możliwość sprecyzowania lokalizacje euro sklepu.

2 W tym miejscu będzie znajdować się ostatnio dodane eurosklepy.

Euro Sklep

Strona 13

1.6. Euro sklepy

Strona "Euro sklepy" zawiera sklepy które będą posortowane.


Euro Sklep

Strona 14

1.7. Program lojalnościowy

Zwykła podstrona zawierająca standardowy content.


Euro Sklep

Strona 15

1.8. Promocje

Strona zawiera interaktywna gazetkę która można przeglądać tak jakby miała się ją przed sobą.



Adnotacja Opis

1 Lewa strona gazetki.

2 Prawa strona gazetki.

Euro Sklep

Strona 16

1.9. Kim jesteśmy

Brak zapotrzebowania na modernizację owej strony.


Euro Sklep

Strona 17

1.10. W drodze do sukcesu

Strona będzie zawierać treść z starej strony.


Euro Sklep

Strona 18

1.11. Co robimy



Euro Sklep

Strona 19

1.12. Jak to robimy



Euro Sklep

Strona 20

1.13. Dokąd zmierzamy



Euro Sklep

Strona 21

1.14. Galeria

Galeria pozostaje bez zmian.


Euro Sklep

Strona 22

1.15. Konkursy

W tej sekcji jest informacja o prowadzonych konkursach.


Euro Sklep

Strona 23

1.16. Aktualne

W dwóch kolumnach zostaną wyświetlane aktualne konkursy, oraz wyniki aktualnych konkursów.


Euro Sklep

Strona 24

1.17. Zakończone

Na tej podstronie będą archiwizowane konkursy.


Euro Sklep

Strona 25

1.18. Kontakt

Strona pozostaje bez zmian.


Euro Sklep

Strona 26

1.19. Dla uczestników sieci



Euro Sklep

Strona 27

1.20. Tablica ogłoszeń



Education

Specyfikacja modernizacji interfejsu euro sklep