SlideShare a Scribd company logo
1 of 27
Download to read offline
Euro Sklep
Modernizacja interfejsu
      Daniel Tomaszewski
          1/19/2012
Specyfikacja


                                                       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        •                  W panelu administracyjnym strona jest wyświetlana jako drzewo, które odzwierciedla
użytkownika                                    strukturę witryny.

Konfigurowalne poziomy      •         •        Panel administracyjny może być przystosowany do umiejętności i zakresu
interfejsu użytkownika                         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         •                  Użytkownik może wybrać czy chce edytować treść w panelu administracyjnym czy
administracyjnym i                             bezpośrednio na stronie witryny.
bezpośrednio na stronie

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

Edycja wielu stron          •                  Edytować można wiele stron jednocześnie wybierając do edycji tylko określone pola -
jednocześnie                                   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           •         •        Edytorzy mogą przeszukiwać drzewo witryny – wynik będzie zawierał wszystkie
wyszukiwania                                   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.




                                                             Strona 2
Specyfikacja



           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     •                        W systemie, zarówno dla edytorów jak i administratora, dostępna jest
edytowaniu treści                                       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) /   •           •            W projekcie TYPO3 istnieje specjalny zespół, którego celem jest dbanie o
WAI                                                     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


                                                               Strona 3
Specyfikacja

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        •   •   Kod źródłowy HTML może zostać oczyszczony używając wbudowanych
XHTML                                   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         •       Użytkownik może wybrać dowolne położenie obrazka względem tekstu (po
względem tekstu                         prawej, po lewej, na środku, tekst opływa obrazek itp).

Wymuszenie rozmiarów i          •       Używając TypoScript można określić domyślne, jak również jedyne możliwe
położenia obrazka                       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            •       Przy użyciu GDlib.
tekstu do obrazków




                                               Strona 4
Specyfikacja


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:




                                                             Strona 5
Specyfikacja

                                                       Kosztorys:


Wdrążenie systemu CMS TYPO3                                     980zł
Uzupełnienie statycznych podstroi.                              Gratis
Modernizacja strony głównej. Zaprogramowanie slidera            180zł
multimedialnego, modyfikacja prawego panelu bocznego ;
usunięcie miniatury gazetki, wstawienie grafiki.

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

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

Zaprogramowanie sekcji Konkursy.                                150zł.
Zastąpienie technologii flash technologią html, optymalizacja   120zł.
strony pod urządzenia mobilne.

Całoroczne wsparcie techniczne.                                 W standardzie.

                                                                                 Razem: 1970zł.




                                                          Strona 6
Specyfikacja


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ń




                                              Strona 7
Euro Sklep

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




                                                                Strona 8
Euro Sklep


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.




                                                                  Strona 9
Euro Sklep

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.




                                                           Strona 10
Euro Sklep

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




                                                           Strona 11
Euro Sklep

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.




                                                                 Strona 12
Euro Sklep

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

1.6.1. Interfejs użytkownika




                                                              Strona 13
Euro Sklep

1.7. Program lojalnościowy
Zwykła podstrona zawierająca standardowy content.

1.7.1. Interfejs użytkownika




                                                    Strona 14
Euro Sklep

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.




                                                            Strona 15
Euro Sklep

1.9. Kim jesteśmy
Brak zapotrzebowania na modernizację owej strony.

1.9.1. Interfejs użytkownika




                                                    Strona 16
Euro Sklep

1.10. W drodze do sukcesu
Strona będzie zawierać treść z starej strony.

1.10.1. Interfejs użytkownika




                                                Strona 17
Euro Sklep

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

1.11.1. Interfejs użytkownika




                                                Strona 18
Euro Sklep

1.12. Jak to robimy
Strona będzie zawierać treść z starej strony.

1.12.1. Interfejs użytkownika




                                                Strona 19
Euro Sklep

1.13. Dokąd zmierzamy
Strona będzie zawierać treść z starej strony.

1.13.1. Interfejs użytkownika




                                                Strona 20
Euro Sklep

1.14. Galeria
Galeria pozostaje bez zmian.

1.14.1. Interfejs użytkownika




                                Strona 21
Euro Sklep

1.15. Konkursy
W tej sekcji jest informacja o prowadzonych konkursach.

1.15.1. Interfejs użytkownika




                                                          Strona 22
Euro Sklep

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

1.16.1. Interfejs użytkownika




                                                         Strona 23
Euro Sklep

1.17. Zakończone
Na tej podstronie będą archiwizowane konkursy.

1.17.1. Interfejs użytkownika




                                                 Strona 24
Euro Sklep

1.18. Kontakt
Strona pozostaje bez zmian.

1.18.1. Interfejs użytkownika




                                Strona 25
Euro Sklep

1.19. Dla uczestników sieci
Strona pozostaje bez zmian.

1.19.1. Interfejs użytkownika




                                Strona 26
Euro Sklep

1.20. Tablica ogłoszeń
Strona pozostaje bez zmian.

1.20.1. Interfejs użytkownika




                                Strona 27

More Related Content

Similar to Specyfikacja modernizacji interfejsu euro sklep

Gavern Framework - Joomla! Day Poland 2013
Gavern Framework - Joomla! Day Poland 2013Gavern Framework - Joomla! Day Poland 2013
Gavern Framework - Joomla! Day Poland 2013Bartłomiej Krztuk
 
Mambo. Tworzenie, edycja i zarządzanie stroną. Niebieski podręcznik
Mambo. Tworzenie, edycja i zarządzanie stroną. Niebieski podręcznikMambo. Tworzenie, edycja i zarządzanie stroną. Niebieski podręcznik
Mambo. Tworzenie, edycja i zarządzanie stroną. Niebieski podręcznikWydawnictwo Helion
 
Maintenance_Plans_Zupełnie_Znienacka
Maintenance_Plans_Zupełnie_ZnienackaMaintenance_Plans_Zupełnie_Znienacka
Maintenance_Plans_Zupełnie_ZnienackaTobias Koprowski
 
Joomla! System zarządzania treścią
Joomla! System zarządzania treściąJoomla! System zarządzania treścią
Joomla! System zarządzania treściąWydawnictwo Helion
 
Dlaczego Drupal CMS? - www.siplex.pl
Dlaczego Drupal CMS? - www.siplex.plDlaczego Drupal CMS? - www.siplex.pl
Dlaczego Drupal CMS? - www.siplex.plKamil Niewczas
 
[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016
[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016
[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016Marcin Zajkowski
 
Wersjonowanie kodu. Dobre praktyki na przykładzie przejścia z CVS na GITa
Wersjonowanie kodu. Dobre praktyki na przykładzie przejścia z CVS na GITaWersjonowanie kodu. Dobre praktyki na przykładzie przejścia z CVS na GITa
Wersjonowanie kodu. Dobre praktyki na przykładzie przejścia z CVS na GITamarekmisztal
 
CMS- content management systems
CMS- content management systemsCMS- content management systems
CMS- content management systemsMaciej Dmowski
 
Framework GavernWP - WordCamp Gdańsk 2012
Framework GavernWP - WordCamp Gdańsk 2012Framework GavernWP - WordCamp Gdańsk 2012
Framework GavernWP - WordCamp Gdańsk 2012Tomasz Dziuda
 
WordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistom
WordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistomWordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistom
WordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistomTomasz Dziuda
 
Błędy userów, niedoróbki koderów
Błędy userów, niedoróbki koderówBłędy userów, niedoróbki koderów
Błędy userów, niedoróbki koderówArkadiusz Stęplowski
 
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WP
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WPWordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WP
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WPMariusz Szatkowski
 
CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie II
CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie IICSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie II
CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie IIWydawnictwo Helion
 
SQL Server 2008 Tips & tricks administracji
SQL Server 2008 Tips & tricks administracjiSQL Server 2008 Tips & tricks administracji
SQL Server 2008 Tips & tricks administracjiSQLExpert.pl
 

Similar to Specyfikacja modernizacji interfejsu euro sklep (20)

Wordpress dla każdego
Wordpress dla każdegoWordpress dla każdego
Wordpress dla każdego
 
M4j1
M4j1M4j1
M4j1
 
M4j1
M4j1M4j1
M4j1
 
Gavern Framework - Joomla! Day Poland 2013
Gavern Framework - Joomla! Day Poland 2013Gavern Framework - Joomla! Day Poland 2013
Gavern Framework - Joomla! Day Poland 2013
 
Mambo. Tworzenie, edycja i zarządzanie stroną. Niebieski podręcznik
Mambo. Tworzenie, edycja i zarządzanie stroną. Niebieski podręcznikMambo. Tworzenie, edycja i zarządzanie stroną. Niebieski podręcznik
Mambo. Tworzenie, edycja i zarządzanie stroną. Niebieski podręcznik
 
Maintenance_Plans_Zupełnie_Znienacka
Maintenance_Plans_Zupełnie_ZnienackaMaintenance_Plans_Zupełnie_Znienacka
Maintenance_Plans_Zupełnie_Znienacka
 
Joomla! System zarządzania treścią
Joomla! System zarządzania treściąJoomla! System zarządzania treścią
Joomla! System zarządzania treścią
 
Dlaczego Drupal CMS? - www.siplex.pl
Dlaczego Drupal CMS? - www.siplex.plDlaczego Drupal CMS? - www.siplex.pl
Dlaczego Drupal CMS? - www.siplex.pl
 
[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016
[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016
[PL] Umbraco - „scyzoryk” w rękach .net developera @ WG.NET, Warszawa 2016
 
Wersjonowanie kodu. Dobre praktyki na przykładzie przejścia z CVS na GITa
Wersjonowanie kodu. Dobre praktyki na przykładzie przejścia z CVS na GITaWersjonowanie kodu. Dobre praktyki na przykładzie przejścia z CVS na GITa
Wersjonowanie kodu. Dobre praktyki na przykładzie przejścia z CVS na GITa
 
CMS- content management systems
CMS- content management systemsCMS- content management systems
CMS- content management systems
 
Framework GavernWP - WordCamp Gdańsk 2012
Framework GavernWP - WordCamp Gdańsk 2012Framework GavernWP - WordCamp Gdańsk 2012
Framework GavernWP - WordCamp Gdańsk 2012
 
Feo w-joomla
Feo w-joomlaFeo w-joomla
Feo w-joomla
 
Edytory tekstu online
Edytory tekstu onlineEdytory tekstu online
Edytory tekstu online
 
WordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistom
WordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistomWordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistom
WordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistom
 
Błędy userów, niedoróbki koderów
Błędy userów, niedoróbki koderówBłędy userów, niedoróbki koderów
Błędy userów, niedoróbki koderów
 
Dreamweaver MX 2004
Dreamweaver MX 2004Dreamweaver MX 2004
Dreamweaver MX 2004
 
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WP
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WPWordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WP
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WP
 
CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie II
CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie IICSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie II
CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie II
 
SQL Server 2008 Tips & tricks administracji
SQL Server 2008 Tips & tricks administracjiSQL Server 2008 Tips & tricks administracji
SQL Server 2008 Tips & tricks administracji
 

Specyfikacja modernizacji interfejsu euro sklep

  • 1. Euro Sklep Modernizacja interfejsu Daniel Tomaszewski 1/19/2012
  • 2. Specyfikacja 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 • W panelu administracyjnym strona jest wyświetlana jako drzewo, które odzwierciedla użytkownika strukturę witryny. Konfigurowalne poziomy • • Panel administracyjny może być przystosowany do umiejętności i zakresu interfejsu użytkownika 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 • Użytkownik może wybrać czy chce edytować treść w panelu administracyjnym czy administracyjnym i bezpośrednio na stronie witryny. bezpośrednio na stronie Podgląd treści • Elementy ukryte, wyłączone czasowe mogą być przeglądane online przed publikacją. Edycja wielu stron • Edytować można wiele stron jednocześnie wybierając do edycji tylko określone pola - jednocześnie 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 • • Edytorzy mogą przeszukiwać drzewo witryny – wynik będzie zawierał wszystkie wyszukiwania 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. Strona 2
  • 3. Specyfikacja 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 • W systemie, zarówno dla edytorów jak i administratora, dostępna jest edytowaniu treści 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) / • • W projekcie TYPO3 istnieje specjalny zespół, którego celem jest dbanie o WAI 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 Strona 3
  • 4. Specyfikacja 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 • • Kod źródłowy HTML może zostać oczyszczony używając wbudowanych XHTML 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 • Użytkownik może wybrać dowolne położenie obrazka względem tekstu (po względem tekstu prawej, po lewej, na środku, tekst opływa obrazek itp). Wymuszenie rozmiarów i • Używając TypoScript można określić domyślne, jak również jedyne możliwe położenia obrazka 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 • Przy użyciu GDlib. tekstu do obrazków Strona 4
  • 5. Specyfikacja 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: Strona 5
  • 6. Specyfikacja Kosztorys: Wdrążenie systemu CMS TYPO3 980zł Uzupełnienie statycznych podstroi. Gratis Modernizacja strony głównej. Zaprogramowanie slidera 180zł multimedialnego, modyfikacja prawego panelu bocznego ; usunięcie miniatury gazetki, wstawienie grafiki. Zaprogramowanie strony, oraz podstron sekcji Sklepy. 280zł Interaktywna mapa polski z punktami sklepów, wyszukiwanie sklepów, oraz sortowanie. Zaprogramowanie interaktywnej gazetki którą będzie można 260zł. przeglądać tak jak prawdziwą gazetę. Zaprogramowanie sekcji Konkursy. 150zł. Zastąpienie technologii flash technologią html, optymalizacja 120zł. strony pod urządzenia mobilne. Całoroczne wsparcie techniczne. W standardzie. Razem: 1970zł. Strona 6
  • 7. Specyfikacja 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ń Strona 7
  • 8. Euro Sklep 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 Strona 8
  • 9. Euro Sklep 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. Strona 9
  • 10. Euro Sklep 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. Strona 10
  • 11. Euro Sklep 1.4. Sklepy Strona "Sklepy" zawiera podstrony które wybiera się w lewym panelu nawigacyjnym, więc tym samym strona ta jest zbędna. Strona 11
  • 12. Euro Sklep 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. Strona 12
  • 13. Euro Sklep 1.6. Euro sklepy Strona "Euro sklepy" zawiera sklepy które będą posortowane. 1.6.1. Interfejs użytkownika Strona 13
  • 14. Euro Sklep 1.7. Program lojalnościowy Zwykła podstrona zawierająca standardowy content. 1.7.1. Interfejs użytkownika Strona 14
  • 15. Euro Sklep 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. Strona 15
  • 16. Euro Sklep 1.9. Kim jesteśmy Brak zapotrzebowania na modernizację owej strony. 1.9.1. Interfejs użytkownika Strona 16
  • 17. Euro Sklep 1.10. W drodze do sukcesu Strona będzie zawierać treść z starej strony. 1.10.1. Interfejs użytkownika Strona 17
  • 18. Euro Sklep 1.11. Co robimy Strona będzie zawierać treść z starej strony. 1.11.1. Interfejs użytkownika Strona 18
  • 19. Euro Sklep 1.12. Jak to robimy Strona będzie zawierać treść z starej strony. 1.12.1. Interfejs użytkownika Strona 19
  • 20. Euro Sklep 1.13. Dokąd zmierzamy Strona będzie zawierać treść z starej strony. 1.13.1. Interfejs użytkownika Strona 20
  • 21. Euro Sklep 1.14. Galeria Galeria pozostaje bez zmian. 1.14.1. Interfejs użytkownika Strona 21
  • 22. Euro Sklep 1.15. Konkursy W tej sekcji jest informacja o prowadzonych konkursach. 1.15.1. Interfejs użytkownika Strona 22
  • 23. Euro Sklep 1.16. Aktualne W dwóch kolumnach zostaną wyświetlane aktualne konkursy, oraz wyniki aktualnych konkursów. 1.16.1. Interfejs użytkownika Strona 23
  • 24. Euro Sklep 1.17. Zakończone Na tej podstronie będą archiwizowane konkursy. 1.17.1. Interfejs użytkownika Strona 24
  • 25. Euro Sklep 1.18. Kontakt Strona pozostaje bez zmian. 1.18.1. Interfejs użytkownika Strona 25
  • 26. Euro Sklep 1.19. Dla uczestników sieci Strona pozostaje bez zmian. 1.19.1. Interfejs użytkownika Strona 26
  • 27. Euro Sklep 1.20. Tablica ogłoszeń Strona pozostaje bez zmian. 1.20.1. Interfejs użytkownika Strona 27