Specyfikacja modernizacji interfejsu euro sklep
Transcript of 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.
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.
1.5.1. Interfejs użytkownika
1.5.2. Tabela widegtu
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.
1.6.1. Interfejs użytkownika
Euro Sklep
Strona 14
1.7. Program lojalnościowy
Zwykła podstrona zawierająca standardowy content.
1.7.1. Interfejs użytkownika
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ą.
1.8.1. Interfejs użytkownika
1.8.2. Tabela widegtu
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.
1.9.1. Interfejs użytkownika
Euro Sklep
Strona 17
1.10. W drodze do sukcesu
Strona będzie zawierać treść z starej strony.
1.10.1. Interfejs użytkownika
Euro Sklep
Strona 18
1.11. Co robimy
Strona będzie zawierać treść z starej strony.
1.11.1. Interfejs użytkownika
Euro Sklep
Strona 19
1.12. Jak to robimy
Strona będzie zawierać treść z starej strony.
1.12.1. Interfejs użytkownika
Euro Sklep
Strona 20
1.13. Dokąd zmierzamy
Strona będzie zawierać treść z starej strony.
1.13.1. Interfejs użytkownika
Euro Sklep
Strona 21
1.14. Galeria
Galeria pozostaje bez zmian.
1.14.1. Interfejs użytkownika
Euro Sklep
Strona 22
1.15. Konkursy
W tej sekcji jest informacja o prowadzonych konkursach.
1.15.1. Interfejs użytkownika
Euro Sklep
Strona 23
1.16. Aktualne
W dwóch kolumnach zostaną wyświetlane aktualne konkursy, oraz wyniki aktualnych konkursów.
1.16.1. Interfejs użytkownika
Euro Sklep
Strona 24
1.17. Zakończone
Na tej podstronie będą archiwizowane konkursy.
1.17.1. Interfejs użytkownika
Euro Sklep
Strona 25
1.18. Kontakt
Strona pozostaje bez zmian.
1.18.1. Interfejs użytkownika
Euro Sklep
Strona 26
1.19. Dla uczestników sieci
Strona pozostaje bez zmian.
1.19.1. Interfejs użytkownika
Euro Sklep
Strona 27
1.20. Tablica ogłoszeń
Strona pozostaje bez zmian.
1.20.1. Interfejs użytkownika