Zlecenie 12176953 - Nowy serwis internetowy wielkopolska.travel Cel projektu...

kturze wskazanej przez zamawiającego nowego serwisu działającego w domenie wielkopolska.travel, będącego oficjalnym serwisem turystycznym dla województwa wielkopolskiego, zapewniającym dostęp do informacji na temat atrakcji turystycznych, szlaków turystycznych, wydarzeń oraz innych obiektów służących turystom. Ponadto celem jest zapewnienie dwuletniego wsparcia technicznego na rzecz zamawiającego.
Elementy realizacji
1.
Rozpoznanie potrzeb klienta
2.
Opracowanie projektu graficznego front endu, zgodnego z wytycznymi zamawiającego przedstawionymi na spotkaniu roboczym, jak również zgodnego z Systemem Identyfikacji Wizualnej zamawiającego i Księgą Znaków marki Wielkopolska. Jako materiały wspomagające proces projektowania zamawiający może przedstawić własne makiety, inne serwisy będące inspiracją lub opis w formie tekstowej.
3.
Przedstawienie zamawiającemu do akceptacji lub modyfikacji (w trzech turach poprawek) co najmniej dwóch, istotnie różniących się projektów / makiet serwisu obejmujących cztery elementy: stronę główną, stronę wpisu, stronę kategorii, stronę z główną mapą.
4.
Wykonanie serwisu w oparciu o wypracowany projekt graficzny.
5.
Konfiguracja back end w oparciu o wskazany przez zamawiającego CMS.
6.
Wypełnienie serwisu treścią w oparciu o przekazane przez zamawiającego materiały (tekst, fotografie, wideo, geolokalizacja POI).
7.
Optymalizacja serwisu pod kątem wydajności / czasu ładowania oraz UX.
8.
Optymalizacja SEO.
9.
Instalacja na wskazanym serwerze.
10.
Wsparcie techniczne przez okres 24 miesięcy od daty podpisania protokołu odbioru, obejmujące: usuwanie błędów, aktualizację CMS, zainstalowanych wtyczek, zgodnej wersji PHP oraz skryptów.
Kluczowe cechy serwisu
1.
Zaprojektowanie serwisu przede wszystkim pod kątem wykorzystania na urządzeniach mobilnych i maksymalna optymalizacja UX dla użytkowników mobilnych. Ponadto przygotowany projekt graficzny powinien być w pełni skalowalny i responsywny, przystosowany do obsługi rozdzielczości do standardu 4K włącznie.
2.
Obsługa pięciu wersji językowych: polski, angielski, niemiecki, czeski, ukraiński (przy założeniu identycznego projektu graficznego oraz zbliżonej struktury menu i zakresu treści). Zamawiający dopuszcza, że w momencie instalacji serwisu na wskazanym serwerze i jego uruchomienia nie wszystkie wersje językowe będą gotowe od strony tłumaczenia, jednak backend serwisu musi być gotowy na ich uruchomienie w późniejszym terminie. Jednocześnie ikonki nieobsługiwanych na dany moment wersji językowych muszą zostać ukryte przed użytkownikiem końcowym.
3.
Dostępność całości serwisu na poziomie AA wg standardów WCAG 2.1., przy czym wszystkie interaktywne elementy związane z tym aspektem (np. przyciski zmiany
kontrastu lub wielkości tekstu) muszą być zintegrowane z projektem strony i stanowić natywny element interfejsu użytkownika.
4.
Podstrona kalendarza wydarzeń, wyświetlająca nadchodzące wydarzenia (wyświetlane jako osobne podstrony), wyposażona w interfejs pozwalający na wyszukiwanie lub filtrowanie po dacie wydarzenia (według miesięcy) i lokalizacji (wraz z możliwością określenia promienia wyszukiwania wokół wskazanej lokalizacji). Domyślny widok podstrony zawierałby wszystkie wydarzenia z bieżącego miesiąca.
5.
Komunikat o wykorzystaniu ciasteczek (cookies) umożliwiający ich akceptację, wybór określonego rodzaju lub całkowite zablokowanie, jak również posiadający odnośnik do Polityki Prywatności. Serwis musi zachować funkcjonalność i dostępność również w przypadku, kiedy użytkownik nie wyrazi zgody na użycie ciasteczek.
6.
Serwis musi wyświetlać się prawidłowo w przeglądarkach: Google Chrome, Opera, Mozilla Firefox, Microsoft Edge, Safari (wszystkie w wersji desktop i mobile) w aktualnej stabilnej wersji na dzień podpisania protokołu zdawczo-odbiorczego.
Wymagane technologie i rozwiązania
1.
Wykorzystanie otwartego, łatwego w obsłudze przez nietechniczny zespół redakcyjny CMS (sugerowany Wordpress) w najnowszej dostępnej wersji stabilnej.
2.
Wszystkie elementy interfejsu panelu administratora / redaktora muszą być dostępne w języku polskim. W uzasadnionych przypadkach (np. brak lokalizowanych wtyczek) możliwe jest odejście od tego wymogu, po wcześniejszym uzgodnieniu z zamawiającym.
3.
Wykorzystanie PHP w najnowszej dostępnej wersji stabilnej, zgodnej z wybranym CMS.
4.
Wykonanie serwisu zgodnie z zasadami HTML 5.0
5.
Oparcie wszystkich elementów mapowych na otwartych danych openstreetmap.org (z wykorzystaniem modułu Leafleat lub podobnych).
6.
Minifikacja skryptów oraz arkuszy stylów.
7.
Wdrożenie i konfiguracja wtyczki LiteSpeed Cache lub równoważnej w celu włączenia buforowania na poziomie serwera oraz konfiguracja Redis Object Cache dla optymalizacji zapytań do bazy danych.
8.
Przekazanie Zamawiającemu źródeł (stylu css, kod javascript, kodu php) również w czytelnej postaci (niezobfuskowanej, niezminifikowanej).
9.
Kompresja obrazów w locie (w czasie uploadu na serwer), niepowodująca jednak zauważalnego spadku jakości obrazów, niezależnie od ich rozmiaru oraz implementacja funkcji lazy loading dla obrazów.
10.
Dwustopniowe logowanie dla administratorów i redaktorów serwisu oraz wykorzystanie reCaptcha przy logowaniu.
11.
Wykorzystanie szyfrowania SSL na wszystkich podstronach, z użyciem bezpłatnego certyfikatu.
12.
Wbudowana ochrona przed atakami brute force, blokująca czasowo dostęp do panelu logowania po pięciu nieudanych próbach logowania.
13.
Integracja z Google Analytics.
14.
Wyszukiwarka dostępna z poziomu każdej podstrony, umożliwiająca przeszukiwanie całości serwisu oraz prezentująca wyniki wyszukiwania w postaci generowanej w locie podstrony. Wyniki wyszukiwania powinny być ograniczone wyłącznie do wybranej przez użytkownika wersji językowej.
15.
Przyciski social mediów zintegrowane z menu głównym i menu stopki strony.
16.
Sugerowane wykorzystanie YoastSEO lub wtyczki o podobnej funkcjonalności.
17.
Zablokowanie XMLRPC.
18.
Zalecany wynik minimum 80 w narzędziu PageSpeed Insights (pagespeed.web.dev), zarówno dla wersji desktop, jak i mobilnej. Zamawiający może odstąpić od tego wymogu, jeśli inne parametry wydajności będą zadowalające.
19.
Strona powinna spełniać następujące wskaźniki wydajności:
a.
Pierwsze wyrenderowanie treści (FCP) w czasie 1,8 sekundy lub krótszym.
b.
Interakcja do kolejnego wyrenderowania (INP) poniżej lub równa 200 milisekund.
c.
Największe wyrenderowanie treści (LCP) w czasie 2,5 sekund lub krótszym.
d.
Wskaźnik Skumulowanego przesunięcia układu (CLS) o wartości 0,1 lub mniej.
20.
Serwis dostępny zarówno pod adresem zawierającym prefix www jak i bez. Należy zwrócić uwagę na adresy z końcówką /index.php, powinien on posiadać przekierowanie na adres bez tej końcówki.
21.
Elementy których użycie jest wykluczone:
a.
Zastosowanie jakichkolwiek rozwiązań nie dających dostępu do kodu Zamawiającemu,
b.
Wykorzystywanie wtyczek do działań możliwych do wykonania przez natywne funkcje Wordpressa,
c.
Wykorzystanie wtyczek, których zastosowanie będzie wymagało od zamawiającego ponoszenia kosztów związanych z abonamentem lub innymi powtarzającymi się opłatami, jak również wykorzystanie wtyczek i innych elementów serwisu, których użyteczność jest ograniczona czasowo,
d.
Zastosowanie jakichkolwiek elementów, których wykorzystanie naruszałoby prawa osób trzecich,
e.
Stosowanie technologii powszechnie uważanych w momencie realizacji zadania za przestarzałe,
f.
Tekst osadzony na sztywno w szablonach (wszelkie treści tekstowe powinny być edytowalne bez ingerencji w kod),
g.
Menu osadzone na sztywno w szablonach (należy zastosować wbudowany system menu wskazanego CMS).
h.
Wykorzystanie w serwisie jakichkolwiek elementów, których użycie powoduje wyświetlanie reklam.
Ogólna charakterystyka kluczowych elementów serwisu
Strona główna
●
Menu główne serwisu zlokalizowane przy górnej krawędzi okna, zaprojektowane w formacie megamenu. Wszystkie elementy menu głównego muszą być możliwe do edycji przez administratora serwisu. Struktura menu została przedstawiona w Załączniku 1.
●
Menu główne zakotwiczone w górnej części okna podczas scroolowania zawartości strony (może być w postaci zminiaturyzowanej).
●
Logotyp wielkopolska.travel w lewym górnym rogu. Element klikalny, który przenosi użytkownika do strony głównej wybranej wersji językowej.
●
Pełnowymiarowy slider, wypełniający całą szerokość okna przeglądarki na którym możliwe jest osadzenie tekstu oraz dodanie klikalnego przycisku lub linku. Slider musi być wykonany z zasadami RWD i dostosowywać się do rozmiaru ekranu urządzenia. Projekt musi przewidywać możliwość wyłączenia slidera na urządzeniach mobilnych.
●
Sekcja Największe atrakcje zawierająca nagłówek oraz kafelki artykułów wybranych manualnie przez administratora do wyświetlania na stronie głównej (z możliwością dowolnej ich zmiany, jak również zmiany kolejności artykułów w dowolnym momencie).
●
Sekcja z interaktywną schematyczną minimapą, gdzie po kliknięciu jednego z zaznaczonych 9 obszarów zmienia się krótki opis obok minimapy oraz zmienia się odnośnik aktywnego przycisku, którego kliknięcie odsyła użytkownika do artykułu opisującego dany podregion Wielkopolski.
●
Sekcja Wielkopolska na weekend zawierająca nagłówek oraz kafelki artykułów z kategorii Wielkopolska na weekend wybranych manualnie przez administratora do wyświetlania na stronie głównej (z możliwością dowolnej ich zmiany, jak również zmiany kolejności artykułów w dowolnym momencie).
●
Sekcja Wielkopolska dla każdego zawierająca nagłówek oraz kafelki wybranych kategorii wpisów (np. Muzea i skanseny, Poznań i okolice, Szlak Piastowski itp.).
●
Sekcja mapy, zawierająca fragment mapy (na wybranym podkładzie mapowym, identycznym z zastosowanym na głównej mapie), tekstowym opisem zachęcającym do przejścia do głównej mapy oraz przyciskiem akcji.
●
Sekcja Doświadczaj i odkrywaj zawierająca nagłówek oraz kafelki wybranych stron (niebędących artykułami z konkretnej kategorii).
Podstrona Mapa
●
Głównym elementem okna jest w pełni interaktywna mapa, wykonana na podkładzie OpenStreetMap lub innym podobnym. W domyślnym widoku po załadowaniu strony obejmująca cały obszar województwa wielkopolskiego.
●
Na mapie w postaci znaczników wyświetlane są wszystkie obiekty, dla których podczas tworzenia wpisu od strony CMS został włączony odpowiedni parametr w ustawienia (np. w postaci czytelnie opisanego pola wyboru pokaż na mapie ) i została określona jego lokalizacja (również na poziomie CMS poprzez podanie współrzędnych X i Y punktu lub poprzez wpisanie adresu lub nazwy obiektu, gdzie współrzędne punktu będą automatycznie przypisywane za pomocą geolokalizacji).
●
Obiekty na mapie zostaną pogrupowane według predefiniowanych kategorii: Szlak Piastowski, Miasta i miasteczka, Muzea, Zamki i pałace, Zabytki techniki, Inne atrakcje, gdzie każda z kategorii posiadałaby indywidualny znacznik.
●
Znaczniki na mapie, przy większym oddaleniu powinny grupować się do zbiorczych znaczników ze wskazaniem liczby obiektów objętych takim znacznikiem.
●
Dodatkowo na mapie zostałyby zaznaczone za pomocą poligonów wszystkie parki krajobrazowe oraz parki narodowe z obszaru woj. wielkopolskiego. Administrator systemu powinien mieć pełną dowolność w kształtowaniu wyglądu tych poligonów również po zakończeniu prac nad serwisem. Może się to odbywać poprzez import plików KML, SHP lub innych formatów na stronie edycji wpisu z poziomu CMS.
●
Podobna funkcjonalność dotyczyłaby obiektów liniowych-szlaków turystycznych, w przypadku których również istniałaby pełna dowolność w dodawaniu nowych lub edycji istniejących obiektów na mapie, realizowana z poziomu CMS.
●
Obiekty dodane jako poligony lub linie nie podlegałyby grupowaniu z obiektami o charakterze punktowym.
●
Wszystkie obiekty zaznaczone na mapie byłyby w pełni interaktywne (klikalne), gdzie kliknięcie obiektu przez użytkownika powoduje rozwinięcie pola tekstowego (dymka) zawierającego nazwę obiektu (pobieraną ze strony wpisu), krótki opis (w pełni edytowalny z poziomu CMS za pomocą pola tekstowego), zdjęcie (główne zdjęcie
danego wpisu) oraz przycisków CTA Zobacz więcej - kliknięcie przycisku odsyłałoby użytkownika do strony danego wpisu oraz Nawiguj, który otworzyłby w nowej zakładce przeglądarki widok wybranego przez Zamawiającego dostarczyciela map, ustawiając dany obiekt jako punkt docelowy. Na urządzeniach mobilnych kliknięcie tego przycisku powinno otworzyć aplikację mapową z wybranym punktem docelowym.
●
Podstrona mapy zawierałaby ponadto interfejs pozwalający wybrać, który kategorie obiektów mają być wyświetlane na mapie (za pomocą checkboxów), jak również zawierać wyszukiwarkę, która pozwalałaby na wyszukiwanie obiektów po słowach kluczowych opisanych za pomocą tagów z poziomu CMS (np. zamek lub Gniezno ). Użycie wyszukiwarki filtrowałoby chmurę punktów na mapie, pozostawiając jedynie te, które są zgodne z wynikami wyszukiwania. Wyszukiwarka powinna pozwalać na wpisanie więcej niż jednego słowa kluczowego. Czyszczenie wyników wyszukiwania za pomocą przycisku obok pola tekstowego wyszukiwarki.
●
Podstrona mapy powinna wspierać geolokalizację użytkownika (pod warunkiem wyrażenia przez niego zgody na to) i udostępniać osobny przycisk centrujący obraz mapy na aktualnej pozycji.
Podstrona Wydarzenia
●
Wydarzenia stanowiłyby specjalną kategorię wpisów w serwisie, również w pełni edytowalną przez nietechniczny zespół redakcyjny z poziomu CMS.
●
Wpis wydarzenia powinien zawierać, poza standardowymi, takie elementy jak: data wydarzenia, godzina rozpoczęcia wydarzenia, miejsce wydarzenia, link do strony organizatora, cena biletów (gdzie pierwsze trzy byłyby obligatoryjne).
●
W domyślnym widoku podstrona wydarzeń zawierałaby wszystkie wydarzenia w kolejności chronologicznej, od najnowszych (łącznie z tymi, które mają przyszłą datę) do najstarszych. Strona zaprojektowana w konwencji endless page design, gdzie wraz z przewijaniem strony kolejne kafelki wydarzeń byłyby zaciągane wedle potrzeb.
●
Interfejs użytkownika pozwalałby na filtrowanie wydarzeń według:
o
Miesiąc (bieżący, przyszły, konkretny)
o
Lokalizacja (wpisywana przez użytkownika)
o
Wydarzenie bezpłatne (tak / nie-checkbox, tożsamy z wpisaniem 0 zł w polu cena biletów, lecz pomijający wpisy z pustym polem)
o
Wyszukiwarka z opcją dowolnego tekstu
●
Kliknięcie kafelka danego wydarzenia przenosiłoby do strony wpisu danego wydarzenia.
●
Kafelki wpisów powinny poza nazwą wydarzenia domyślnie wyświetlać jego datę oraz miejsce.
Podstrona Wielka Pętla Wielkopolski
•
Podstrona poświęcona szlakowi wodnego Wielka Pętla Wielkopolski stanowiłaby, w ogólnym ujęciu, przeniesienie części funkcjonalności samodzielnego serwisu https://wielka-petla.pl/, który jest przewidziany do wygaszenia po oddaniu nowego serwisu wielkopolska.travel.
•
Głównym elementem okna jest w pełni interaktywna mapa, wykonana na podkładzie OpenStreetMap lub innym podobnym. W domyślnym widoku po załadowaniu strony obejmująca cały obszar województwa wielkopolskiego.
•
Treść mapy powinna obejmować:
o
Przebieg szlaku WPW w postaci warstwy liniowej nałożonej na podkład kartograficzny (dane dostarcza zamawiający)
o
POI w postaci warstw punktowych, z indywidualnie zaprojektowanymi ikonami dla każdego typu POI. Katalog typów punktów obejmuje: przystanie i mariny, miejsca do cumowania, śluzy, stacje paliw. Dane o nazwie, opisie, lokalizacji danego punktu należy skopiować ze strony wielka-petla.pl.
o
Interaktywną legendę, pozwalającą na włączanie lub wyłączenie określonych rodzajów POI, jak i na pokazanie wszystkich punktów na mapie.
o
Standardowe kontrolki mapy, obejmujące przybliżenie i oddalanie widoku mapy oraz geolokalizację użytkownika.
o
Pozostałe rodzaje POI (tj.: slipy, miejsca niebezpieczne, warto zobaczyć, wypożyczalnie sprzętu wodnego) obecne na stronie wielka-petla.pl nie muszą być importowane do nowego serwisu, podobnie jak nie jest wymagana implementacja funkcjonalności pozwalającej na sprawdzenie maksymalnego zanurzenia w danym miesiącu roku na danym odcinku szlaku.
o
Znaczniki na mapie, przy większym oddaleniu powinny grupować się do zbiorczych znaczników ze wskazaniem liczby obiektów objętych takim znacznikiem.
o
Wszystkie obiekty zaznaczone na mapie byłyby w pełni interaktywne (klikalne), gdzie kliknięcie obiektu przez użytkownika powoduje rozwinięcie pola tekstowego (dymka) zawierającego nazwę obiektu (pobieraną ze strony wpisu), krótki opis (w pełni edytowalny z poziomu CMS za pomocą pola tekstowego), zdjęcie (główne zdjęcie danego wpisu) oraz przycisków CTA Zobacz więcej - kliknięcie przycisku odsyłałoby użytkownika do strony danego wpisu.
•
Zespół redakcyjny serwisu powinien mieć pełną możliwość edycji punktów POI wyświetlanych na mapie, zarówno dodawania i usuwania punktów, jak również edycji nazwy oraz treści pola tekstowego każdego z istniejących punktów. Edycja odbywałaby się z poziomu CMS i nie wymagałaby żadnej ingerencji w kod strony.
•
Poniżej mapy znajdowałyby się kafelki z odnośnikami do głównych podstron niższego rzędu, na przykład: Mariny i przystanie, Wypożyczalnie kajaków, Śluzy, FAQ i inne. Pod kafelkami zamieszczony zostałby tekstowy opis szlaku wraz z fotografiami.
Pozostałe podstrony serwisu
Szczegółowe zaprojektowanie pozostałych podstron serwisu leżałoby po stronie wykonawcy, po uprzednim przeprowadzeniu z zamawiającym warsztatów / spotkania kreatywnego.