Miasta w Internecie Kraków, sierpień 2018 (wersja 1.1)
Elementy serwisu Serwisy platformy MPI składają się z następujących elementów: 1. Belka narzędziowa serwisu 2. Nagłówek serwisu - znak gra iczny uzupełniony nazwą serwisu 3. Menu górne 4. Wyszukiwarka 5. Baner BIP Kraków 6. Lewa nawigacja może być używana: jako drugi poziom nawigacji dla serwisów o rozbudowanej strukturze, na stronach sekcji zawiera linki nawigacyjne dotyczące danego działu (na stronie głównej serwisu powinna zawierać wybrane linki ze wszystkich sekcji) jako nawigacja podstawowa w serwisie w przypadku prostych stron, w których nie ma konieczności stosowania górnego menu Elementy obowiązkowe nawigacji to Polecamy zawierające 3 linki cross promocyjne związane z tematyką działu/serwisu. 7. Część centralna serwisu miejsce na prezentację treści stron 8. Prawa kolumna zawiera stałe elementy związane z tematem działu/serwisu, jako pierwszy element prawej kolumny obowiązkowo powinien być umieszczony link (baner) do BIP. W przypadku gdy serwis wymaga trzeciego poziomu nawigacji dopuszczalne jest umieszczenie jej w tej kolumnie 9. Ikony serwisów społecznościowych 10. Stopka dolna serwisu UWAGA! Wszystkie serwisy Miejskiej Platformy Internetowej powinny być zbudowane w oparciu o projekt graficzny serwisu Magiczny Kraków. Jakiekolwiek odstępstwa od projektu (wyłączając belkę) powinny być konsultowane z zespołem Platformy.
1 2 3 9 6 25px 20px 60px 20px 50px 60px 7 5 4 8 20px 20px 165px 20px 620px 20px 300px 20px
10 20px 20px 165px 20px 300px 20px 300px 20px 300px 20px
Warianty układu podstawowego Dwukolumnowy Połączona środkowa i prawa kolumna, zalecane jest stosowania tego wariantu w przypadku gdy serwis ma nawigację w lewej kolumnie (ze szczególnym uwzględnieniem formularzy) Dwukolumnowy Połączona lewa i środkowa kolumna, wariant przeznaczony dla serwisów nie wykorzystującej lewej kolumny w nawigacji
Jednokolumnowy Do zastosowania w przypadku konieczności prezentacji treści wymagających dużej ilości miejsca (np. mapy) RWD Serwisy Miejskiej Platformy internetowej powinny być wykonane zgodnie z zasadami Responsive Web Design (RWD) i zapewniać pełen dostęp z różnych urzadzeń. W tym celu zostały zdefiniowane rozdzielczości graniczne dla których powinny być przygotowane układy serwisu. Zasada składania powinny być zachowana dla wszystkich serwisów platformy przy zachowaniu pełnej funkcjonalności.
1200+ Lewe menu rozwinięte Środkowa kolumna umożliwiająca podział dwukolumnowy Prawa kolumna rozwinięta Ikony społecznościowe nie zmieniają pozycji podczas scrollowania 980-1200 Lewe menu zwijane oraz ikony społecznościowe nie zmieniają pozycji podczas scrollowania Środkowa kolumna umożliwiająca podział dwukolumnowy Prawa kolumna rozwinięta 780-600 Lewe menu zwijane oraz ikony społecznościowe nie zmieniają pozycji podczas scrollowania Środkowa kolumna umożliwiająca podział dwukolumnowy Prawa kolumna na dole (poszczególne bloki zwijane)
600- Lewe menu zwijane oraz ikony społecznościowe nie zmieniają pozycji podczas scrollowania Środkowa kolumna jednokolumnowa Prawa kolumna na dole (poszczególne bloki zwijane)
Elementy identyfikacji serwisów miejskich W celu zachowania spójności zarówno pod względem wizualnym jak i nawigacyjnym w serwisach miejskich została wyodrębniona grupa elementów, które powinny być zachowane w niezmienionej formie (możliwe jest dopasowanie kolorystyki do serwisu) Pasek narzędziowy Pasek narzędziowy serwisów jest umieszczona na górze serwisu, znajdują się na nim następujące linki do następujących funkcjonalności (jeżeli serwis którejś z nich nie ma nie pokazuje się link): Linki do formularzy logowania i rejestracji w serwisie (po zalogowaniu w tym miejscu pojawia się nazwa użytkownika z możliwością przejścia do profilu i link wyloguj) Link do wersji mobilnej serwisu Link do mapy serwisu Flagi umożliwiająca przejście do innych wersji językowych seriwisu Przykład paska narzedziowego dla szerokości większej niż 780px Przykład paska narzedziowego dla szerokości niższej niż 780px
Nagłówek graficzny Główny element identyfi kujący serwisy miejskie i składa się z: Logotypu miasta kliknięcie w logotyp z dowolnego serwisu powinno otwierać stronę główną Magiczny Kraków Nazwa serwisu kliknięcie w nazwę powinno prowadzić do strony głównej serwisu Menu górne (zakładki) Nawigacja tego typu powinna być stosowana w przypadku rozbudowanych serwisów, w których istnieje konieczność podziału na sekcje tematyczne. Po wejściu na zakładkę użytkownik otwiera stronę główną działu. Dla rozdzielczości poniżej 780 px menu górne ma formę zwiniętą. Przykład menu dla wersji powyżej 780 px Przykład zwijanego menu dla wersji poniżej 780 px
Wyszukiwarka Element obowiązkowy dla wszystkich serwisów w formie ikonki umieszczonej po prawej stronie paska nawigacyjnego, po kliknięciu w ikonę otwiera się panel z polem wyszukiwarki oraz linkiem do wyszukiwania zaawansowanego. Przykład rozwijania wyszukiwarki Baner BIP Element obowiązkowy dla serwisów posiadających swoje strony w BIP. Dla szerokości serwisu powyżej 780 px w formie banera w prawej nawigacji, poniżej 780 jako link umieszczony w górnej nawigacji. Przykład pełnego baneru BIP przeznaczonego do prawej nawigacji serwisu Przykład umieszczenie linku do BIP w górnej nawigacji dla szerokości poniezej 780 px
Stopka serwisu Elementy stopki serwisu: Logotyp miasta Informacja Miejska Platforma Internetowa Magiczny Kraków Linki do głównych działów serwisu Magiczny Kraków Link do góry^ Linki do działów serwisu Typografia Czcionka obowiązująca w serwisach miejskich jest PT Sans dopuszczalne są następujące rozmiary: PT Sans 20px / interlinia 27 PT Sans 16px / interlinia 24 PT Sans 17px bold / interlinia 25 PT Sans 13px PT Sans 13px bold / interlinia 27 PT Sans 44px bold / interlinia 27 Wprowadzenie do artykułu Treść artykułu Podkład w kolorze linku - tytuł artykułu w skrótach Linki oraz skróty artykułów Tytuły artykułów na listach, nazwy ramek Tytuły artykułów
Kolorystyka W ramach serwisów MPI dopuszczalne jest definiowanie kolorystyki wortali przy zachowaniu następujących zasad: preferowany kolor tekstu to #4b4b4b powinien być zdefiniowany kolor linków i stosowany tylko i wyłącznie dla elementów klikalnych (preferowane odcienie niebieskiego) Dopuszczalne jest użycie kolorów uzupełniających, ale nie powinno być ich więcej niż 2 Przykład prawidłowo wykonanego wariantu kolorystycznego serwisu MPI
Linki Każdy serwis MPI powinien mieć zdefiniowany kolor linku. Dopuszczalne jest stosowanie linków w kolorze tekstu w tym wypadku powinny być one poprzedzone ikoną sugerującą element klikalny. Ikony narzędziowe Ikony przeznaczone dla akcji związanych z artykułem lub serwisem Wysyłanie linka do artykułu znajomemu Drukowanie artykuły Generowanie pliku PDF z artykuły Dodawanie do ulubionych Odsłuch artykułu Przejście do kanału RSS serwisu Ikony społecznościowe
Guziki i stronicowanie W obrębie wszystkich serwisów MPI powinien być zachowany standardowy wygląd wszystkich guzików nawigacyjnych oraz stronnicowania. W obrębie jednego serwisu należy używać jednej wersji kolorystycznej dla wszystkich tego typu elementów. Wielkość powinna umożliwiać obsługę na ekranach dotykowych. W przypadku guzików zawierających nazwę tekstową niezeleżnie od szerokości strony odległość maksymalna od krawędzi tekstu nie powinna przekraczać 30 px. max 30px max 30px
Strony główne Strony główne serwisów/działów zbudowane są w oparciu o układ podstawowy serwisu. W tym przypadku możliwe jest zastosowanie w górnej części kolumny treściowej elementu wizerunkowego do prezentacji najważniejszych informacji w serwisie. Warianty stosowania elementów wizerunkowych Element wizerunkowy umieszczony nad treścią strony skalowany do szerokości 1650 px i uzupełniany kolorami stosowanymi w serwise
Element wizerunkowy umieszczony u góry centralnej i lewej kolumny (połączone) Element wizerunkowy umieszczony u góry centralnej kolumny
Budowa elementu wizerunkowego Linia bazowa A B C 510 px Linia bazowa powinna byc wyrównana do lewej krawędzi serwisu Szerokość maksymalna 1650 px Wysokość maksymalna 550 px Zawartość ( nie szersza niż 510 px ) A - tytuł - element obowiązkowy B- skrót artykułu - element opcjonalny C - stronicowanie - element obowiązkowy w przypaku więdej niż jednego elementu (na ekranie dotykowym powinna być możliwość obsługi za pomocą gestów)
Standardy typowych podstron serwisu Podstrony detal artykułu Ścieżka oraz link Odsłuchaj Treść artykułu w treści może znajdować się zdjęcie lub materiał video Data i autor komunikatu Opcje artykułu wyślij znajomemu, drukuj, pobierz PDF Opcje społecznościowe linki do umieszczenia artykułów w najpopularniejszych systemach społecznościowych Powiązane materiały galerie, artykuły Stronicowanie artykułu
Lista artykułów Skróty (nie więcej niż 10 na stronie) Miniaturka związana z wiadomością (nieobowiązkowe) kliknięcie powoduje przejście na detal artykułu Tytuł wiadomości kliknięcie powoduje przejscie na detal Treść skrótu Stronicowanie listy
Podstrony detal obiektu Ścieżka oraz guzik Odsłuchaj Nazwa obiektu Mapa z oznaczeniem umiejscawiania obiektu i możliwością powiększenia Podstawowe informacje o obiekcie (symbol, dane teleadresowe) Opis obiektu Bloki z linkami do wybranych aktualności, procedur, komunikatów i dokumentów powiązanych z obiektem Nawigacja po treściach powiązanych z obiektem
Galeria Obiekt galeria jest umieszczany wewnątrz artykułu Opcje widoku Lista zdjęć Zdjęcie Autor i opis
Wideo Obiekt wideo jest umieszczany wewnętrz artykułu Opcje widoku Lista zdjęć Zdjęcie Autor i opis
Podstrony detal formularz We wszystkich serwisach miejskich ważne jest zachowanie jednolitego wyglądu formularzy oraz komunikatów błędów. Zalecenia dotyczące projektowania formularzy: pola formularzy powinny być wypełnione jednolitym kolorem (innym niż kolor linku) błąd w formularzy powinien być oznaczony ikoną wszystkie pola obowiązkowe powinny być oznaczone * kolor komunikatu błędu nie powinien być używany do innych elementów strony długie formularze powinny być dzielone na kroki Przykład oznaczenia pola obowiązkowego Przykład komunikatu błędu
Serwisy specjalne W przypadku serwisów powiązanych z platformą, które nie są zbudowane w oparciu o podstawowy układ serwisu (np. serwisy reklamowe lub fragmenty zewnętrznych serwisów) możliwe jest oznaczenie ich za pomocą belki serwisu specjalnego.