Przewodnik projektowania

Podobne dokumenty
Miasta w Internecie. Kraków, sierpień 2018 (wersja 1.1)

OPIS FORM REKLAMOWYCH

CMS - INFORMACJE. *** Mirosław Kuduk E mail: tel. kom DODATKOWE FUNKCJE - PANEL ADMINISTRATORA

Stosunkimiedzynarodowe.pl

Strukturę naszego Biuletynu tworzą następujące elementy:

Reklama na portalu Świata Przemysłu Farmaceutycznego specyfikacja techniczna

PRZEWODNIK PO ETRADER PEKAO ROZDZIAŁ XVIII. ANALIZY I KOMENTARZE SPIS TREŚCI

REKLAMA INTERNETOWA WYMAGANIA TECHNICZNE

INSTRUKCJA REJESTRACJI

Poradnik korzystania z Bazy konkurencyjności dla niezalogowanego użytkownika systemu

E-geoportal Podręcznik użytkownika.

Pomoc. BIP strona portalu

ospodarka.pl Poradnik Internetu dla Twojej Firmy

INSTRUKCJA UŻYTKOWNIKA SYSTEMU BIP

OFERTA MARKETINGOWA Jasło

Instrukcja Wykonawcy - Moduł Aukcji/Licytacji (bez podpisu elektronicznego)

Lokalny portal informacyjny. U nas zobaczysz więcej

INSTRUKCJA ZARZĄDZANIA

Specyfikacja dla strony internetowej Fundacji Śląskie Hospicjum dla Dzieci

Reklama w portalu MaratonyPolskie.PL. formy, cennik, warunki emisji

WORDPRESS INSTRUKCJA OBSŁUGI

Smacznego.rzeszow.pl. Instrukcja obsługi

Warunki techniczne prezentacji reklam

Federacji Inicjatyw Oświatowych

Opracowanie charakteru treści wyświetlanej na stronie głównej

Cennik reklam w Raciborskim Portalu Internetowym raciborz.com.pl

kontakt Bannery internetowe Najedź i kliknij na poniższą strzałkę żeby powrócić do wizualizacji dostępnych modułów internetowych.

DODAWANIE ARTYKUŁÓW DO STRONY INTERNETOWEJ

Specyfikacja techniczna do wybranych form reklamowych

netster instrukcja obsługi

HaloBialystok.pl BANERY. 1) Double Billboard 750x200 wykonanie baneru gratis. 300zł (netto) za miesiąc. 2) Billboard 750x100 wykonanie baneru gratis

Oferta reklamowa portalu

Oferta reklamy. na portalu Laboratoria.net

Specyfikacja techniczna produktów reklamowych portali Grupy Cogito Sp. z o.o.

ADMINISTRACJA STRONĄ EMPIRE MUSIC

PODSTAWOWE FORMY REKLAMOWE

INSTRUKCJA ZARZĄDZANIA

- jedyną w Polsce internetową Bazę Obiektów Wspinaczkowych (

Specyfikacja techniczna do wybranych form reklamowych

Z Małej Szkoły w Wielki Świat

Cennik oraz specyfikacja techniczna form reklamowych

Twój serwis szkoleń.

Instrukcja obsługi. Panel Klienta na stronie

Oferta dla organizatorów imprez

Nazwa firmy lub projektu: 1. Grafika

Strona główna góra. Profesjonalny sklep internetowy

SYSTEM ZARZĄDZANIA TREŚCIĄ (CMS) STRONY INTERNETOWEJ SZKOŁY PRZEWODNIK

Darmowy Portal Ogłoszeniowy w UK i Polsce

Instrukcja do platformy internetowej Art-Aktywator. Instrukcja do platformy internetowej Art-Aktywator

Podręcznik użytkownika

Twój serwis szkoleń.

Dostępne nośniki reklamowe

oferta reklamowa P T C

Instrukcja obsługi systemu zarządzania treścią w MDK

Przewodnik... Tworzenie Landing Page

Warszawa, 27 lipca 2012 r. ZAPYTANIE OFERTOWE

ospodarka.pl Poradnik Internetu dla Twojej Firmy

INSTRUKCJA OBSŁUGI Proces rejestracji i logowania

Formy reklamowe. Specyfikacja techniczna

Jak publikować na MiMamo.pl

Miejsca oraz możliwości promocyjne w obszarze Motointegratora

Strona główna x100 px. 265x190 px. Mozaika. Mozaika Billboard. Mozaika Box. Kliknij i przejdź do strony

PROMOCJA FIRM I LABORATORIÓW W PORTALU INTERNETOWYM

INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ

mysupport Instrukcja obsługi dla użytkowników

Link tekstowy. Najpopularniejszy format używany w naszej sieci, często wzbogacony o przycisk call-to-action.

Instrukcja przygotowania materiałów do migracji storn nadleśnictw i zakładów

Baza wiedzy instrukcja

Instrukcja użytkownika BIP

Podręcznik Sprzedającego. Portal aukcyjny

Strona główna- góra. Profesjonalny sklep internetowy

Instrukcja stosowania platformy internetowej Szkoła praktycznej ekonomii młodzieżowe miniprzedsiębiorstwo - zakładki ogólnodostępne

Oferta reklamowa. Portal drogowy - Cztery wymiary informacji Oferta ważna od

e-wsparcie Barbara Muszko Aktualizacja Twojej witryny internetowej tak prosta, jak obsługa Worda

Instrukcja obsługi Kreatora Stron Internetowych dla Glazurników i Termoizolerów

Instrukcja korzystania z portali WindNet i WindNet2

Oferta reklamowa. Zimowa wyprawa na Nanga Parbat - obóz 2

Oferta reklamowa portalu Uroda.com. Cennik reklam

Produkty reklamowe. Statystyki serwisu:

Specyfikacja techniczna form reklamy oferowanych przez serwis e-sieci.pl

Oferta reklamowa Portal drogowy -

Instrukcja obsługi systemu MEDIABIN Grudzień 2012

Jak się promujemy? Jak się zareklamować? Oferujemy Klientom 2 Pakiety Reklamowe: PAKIET WIZERUNKOWY

Statystyki odwiedzin: Statystyki odwiedzin za okres od 1 lipca 2013 do 30 września Unikalni użytkownicy 42,941 Unikalni użytkownicy 110,952

Archiwum Prac Dyplomowych

Reklama w portalu MaratonyPolskie.PL. formy, cennik, warunki emisji

Instrukcja 3wcms najważniejsze funkcje

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

Instrukcja użytkownika

REKLAMY BANEROWE BANERY WYŚWIETLANE W DZIAŁACH:

PRACA Z SZABLONAMI. Artykuł Komunikaty Wydarzenie Reportaż foto Baner Boksy Zobacz również...

Opis serwisu IT-PODBESKIDZIE Wersja 1.0

Reklama w portalu Zacznij Biegać formy, cennik, warunki emisji

Usługa bezpłatna! Usługa Symbol Opis Specyfikacja Cena (netto) Wizytówka WZ Wizytówka zwykła.

1 S t r o n a 1. Siedziba: Laboratoria.net, Czerwone Maki 55/25, Kraków; tel.:

Układ podstawowych powierzchni reklamowych w serwisie miastowroclaw.pl. Cennik produktów reklamowych serwisu internetowego.

Zgłoś projekt do Budżetu Obywatelskiego online!

Twój serwis szkoleń.

Personalizowanie wirtualnych pokojów

Platforma e-learningowa

Transkrypt:

Projekt Miejskiej Platformy Internetowej Magiczny Kraków Przewodnik projektowania Opracowany w ramach umowy nr W/I/3462/KP/80/2009 z dnia 22 lipca 2009r. przez Konsorcjum w składzie: Akademickie Centrum Komputerowe Akademii Górniczo-Hutniczej w Krakowie im. Stanisława Staszica (ACK Cyfronet AGH) - Lider Konsorcjum Instytut Chemii Bioorganicznej PAN, Poznańskie Centrum Superkomputerowo-Sieciowe (PCSS) - Członek Konsorcjum Kraków Listopad 2009

Układ serwisu Układ podstawowy A. Belka narzędziowa serwisu B. Nagłówek graficzny C. Menu górne (zakładki) D. Pasek wyszukiwania i baner BIP Kraków E. 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 Zobacz także zawierające 3 linki cross promocyjne związane z tematyką działu/serwisu. Tagi zawierające listę słów kluczowych związanych z działem/serwisem oraz linki do katalogu serwisów miejskich. F. Część centralna serwisu miejsce na prezentację treści strony G. Prawa kolumna zawiera stałe elementy związane z tematem działu/serwisu, w dolnej części serwisu powinien znajdować się slot na banery autopromocyjne wspólny dla wszystkich serwisów platformy. W przypadku gdy serwis wymaga trzeciego poziomu nawigacji dopuszczalne jest umieszczenie jej w tej kolumnie H. Stopka dolna serwisu UWAGA! Wszystkie serwisy Miejskiej Platformy Internetowej powinny być zbudowane w oparciu o projekt grafi czny serwisu Magiczny Kraków. Jakiekolwiek odstępstwa od projektu (wyłączając belkę) powinny być konsultowane z zespołem Platformy. 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) Strony główne Strony główne serwisów/działów zbudowane są w oparciu, układ podstawowy serwisu. W ich przypadku możliwe jest zastosowanie w górnej części kolumny treściowej możliwe jest zastosowanie elementu wizerunkowego do prezentacji najważniejszych informacji w serwisie (nie więcej niż 5).

Rodzaje elementów wizerunkowych Ilustracja na górze Ilustracja z lewej strony Ilustracja 100% UWAGA! Na potrzeby konkretnych serwisów mogą być przygotowywane inne rodzaje elementów wizerunkowych.

Warianty stosowanie elementów wizerunkowych Element wizerunkowy umieszczony w na górze centralnej kolumny Element wizerunkowy umieszczony na górze centralnej i prawej kolumny (połączone)

Elementy identyfi kacji 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): Link do wyboru wersji dla niepełnosprawnych Linki do formularzy logowania i rejestracji w serwisie (po zalogowaniu w tym miejscu pojawia się nazwa użytkownika z możliwością przejści a do profi lu i link wyloguj) Ikona MOBI prowadząca do mobilnej wersji serwisu Ikona RSS prowadząca do kanały RSS serwisu Flagi umożliwiająca przejście do innych wersji językowych seriwisu Przykład paska narzędziowego w wersji zalogowanej i niezalogowanej Nagłówek graficzny Główny element identyfikują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 Belka grafi czna dopasowana do tematyki serwisu. - Grafi ka belki powinna być zgodna z identyfi kacją miasta Schemat budowy nagłówka grafi cznego

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. Pasek wyszukiwania i baner BIP Element obowiązkowy dla wszystkich serwisów, baner BIP tylko dla serwisów posiadających swoje strony w Biuletynie Przykład prawidłowo wykonanych i połączonych wszystkich elementów nagłówka strony Stopka serwisu Elementy stopki serwisu: 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 Arial dopuszczalne są następujące rozmiary: Arial 12px Treść artykułów i opisów zdjęć Arial 11 px Arial 14px bold Arial 24px regular Skróty wiadomości, linki Tytuły artykułów na listach, nazwy ramek Tytuły artykułów

Linki Linki w serwisie powinny mieć kolor niebieski oraz podkreślenie opcjonalnie możliwe jest również użycie koloru tekstu oraz podkreślenia. W przypadku klikanych tytułów oraz linków dodatkowo podkreślonych grafi cznie np. znakiem lub ikoną dopuszczalne jest użycie podkreślenia dopiero po najechaniu myszką. Oznaczenia typu materiału Ikony przeznaczone są do użycia na listach artykułów oraz stronach głównych i oznaczają typ materiału jaki znajduję się w danym artykule W artykule znajduje się materiał video W artykule znajduje się galeria Artykuł znajduje się w serwisie BIP 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 Powiększanie zdjęcia/materiału video Przejście do kanału RSS serwisu Wersja mobilna serwisu Wersja dla niepełnosprawnych Dodanie do ulubionych Zmiana elementu wizerunkowego na stronie głównej

Guziki i stronnicowanie 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. Przykład prawidłowego zestau guzików na potrzeby pojedynczego serwisu Sonda

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 Słowa kluczowe Data i autor komunikatu Opcje artykułu wyślij znajomemu, drukuj, pobierz PDF oraz dodaj do ulubionych (dodanie do globalnego schowka dla wszystkich serwisów platformy) Opcje społecznościowe ocena, informacje o komentarzach (klikniecie powinno pozwalać przejrzeć komentarze), linki do umieszczenia artykułów w najpopularniejszych systemach społecznościowych Powiązane materiały galerie, artykuły Komentarze Stronnicowanie artykułu

Podstrony detal galerii Ścieżka oraz link Odsłuchaj Galeria zdjęć Słowa kluczowe Data i autor komunikatu Opcje artykułu wyślij znajomemu, drukuj, pobierz PDF oraz dodaj do ulubionych (dodanie do globalnego schowka dla wszystkich serwisów platformy) Opcje społecznościowe ocena, informacje o komentarzach (klikniecie powinno pozwalać przejrzeć komentarze), linki do umieszczenia artykułów w najpopularniejszych systemach społecznościowych Powiązane materiały galerie, artykuły Komentarze

Podstrony detal materiał video Ścieżka oraz link Odsłuchaj Player video Słowa kluczowe Data i autor komunikatu Opcje artykułu wyślij znajomemu, drukuj, pobierz PDF oraz dodaj do ulubionych (dodanie do globalnego schowka dla wszystkich serwisów platformy) Opcje społecznościowe ocena, informacje o komentarzach (klikniecie powinno pozwalac przejrzeć komentarze), linki do umieszczenia artykułów w najpopularniejszych systemach społecznościowych

Podstrony lista Ścieżka oraz link Odsłuchaj Skróty (nie więcej niż 10 na stronie) o Miniaturka związana z wiadomością (nieobowiązkowe) kliknięcie powoduje przejście n a detal o Tytuł wiadomości kliknięcie powoduje przejscie na detal o Treść skrótu zakończone linkiem więcej (kliknięcie powoduje przejscie na detal) o Stronnicowanie listy Podstrony detal formularz We wszystkich serwisach miejskich ważen jest zachowanie jednolitego wyglądu formularzy oraz komunikatów błędów. Zalecenia dotyczące projektowania formularzy: wszystkie pola obowiązkowe powinny być oznaczone * w kolorze komunikatu błędu

kolor komunikatu błędu nie powinien być używany do innych elementów strony długie formularze powinny być dzielone na kroki

Podstrony detal obiektu Ścieżka oraz guzik Odsłuchaj Nazwa obiektu 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

Podstrony detal wydarzenia Ścieżka oraz guzik Odsłuchaj Nazwa obiektu (symbol, dane teleadresowe) Podstawowe informacje o obiekcie 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

Wersje mobilne serwisów W przypadku serwisów przeznaczonych na urządzenia mobilne np. telefony komórkowe, powinna zostać przygotowana uproszczona wersja stron. Belki serwisów W przypadku serwisów mobilnych stosuje się uproszczoną belkę. Powinna ona zawierać następujące elementy umieszczone na jednolitym tle nawiązującym do kolorystyki serwisu w wersji na komputery PC: Logo miasta Nazwa serwisu (czcionka Humanist 777) Budowa serwisów Ze względu na uproszczoną budowę serwisów należy zachować jednolity sposób używania tekstów oraz linków. Tekst Tekst Normalny tekst dla treści artykułów Nagłówki - Linia oddziela nagłówek od treści Link Standardowe linki w treści Link Link do artykułu lub kategorii» Link Link z menu strony Link» Link do rozwinięcia np. listy

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. UWAGA! Wersje kolorystyczne belki specjalnej inne niż podstawowe musza być konsultowane z zespołem Miejskiej Platformy Internetowej

Promocja on-line Formy reklamowe na serwisach MPI W serwisach Miejskiej Platformy Internetowej zostały przewidziane miejsca na reklamę autopromocyjna zarządzaną centralnie dla wszystkich serwisów za pomocą ad serwera. Standardowe wymiary reklam w serwisach MPI: box 250x50 px, format GIF, JPG lub SWF, wielkość pliku nie powinna przekraczać 20 kb box podwójny 250x100, format GIF, JPG lub SWF, wielkość pliku nie powinna przekraczać 40 kb