AGENCJA INTERAKTYWNA NETTURBINA.PL Stosunkimiedzynarodowe.pl Case study Aleksander Ślązak 2011-05-04 Opis budowy portalu stosunkimiedzynarodowe.pl. Najważniejsze funkcje.
Cele projektu Całkowita przebudowa portalu o tematyce: Stosunki międzynarodowe. Zmiana layotu strony na nowocześniejszy i zgodny z najnowszymi trendami Wygląd sprawiający wrażenie rozbudowanej strony a jednocześnie prostej w nawigacji. Dodanie interaktywnej mapy państw. Stworzenie bazy uczelni pozwalającej maksymalnie uprościć sposób ich wyszukiwania. Ułatwienie monetyzacji poprzez umieszczenie elastycznych obszarów na reklamy bannerowe. Rysunek 1 Wygląd starej strony przed wprowadzeniem zmian przez Netturbinę Agencja interaktywna Netturbina.pl 2
Agencja interaktywna Netturbina.pl 3
Rysunek 2 Wygląd nowej strony portalu. Wyraźnie podkreślone boksy z odpowiednimi treściami. Zastosowano klikane nagłówki prowadzące wprost do odpowiednich list kategorii Sposób organizacji treści Tagi Jak wiadomo głównym problemem rozbudowanych portali zawierających różnorodną treść jest sposób jej organizacji. Chodzi tu głównie o tak zwane kategorie czy tagi. Najprostszym sposobem jest umieszczanie treści w listach, jeden artykuł pod drugim, gdzie najnowsze artykuły są umieszczane na samej górze strony. Problem pojawia się jeśli chcemy wyszukać artykuły o podobnej tematyce. Możemy wtedy zastosować kategorie. Tu problemem jest każdorazowe wybieranie odpowiedniej, wcześniej przygotowanej kategorii. W naszym systemie użyliśmy tak zwanych tagów. Takie rozwiązanie pozwala na kategoryzowanie treści podczas dodawania poprzez wpisanie odpowiedniego słowa kluczowego. Tagi pojawiają się również pod każdym artykułem pozwalając użytkownikom na przejście do interesującej ich kategorii. Tagi podzielone są na zewnętrzne i wewnętrzne. Tagi zewnętrzne to te, do których linki znajdują się w menu bocznym. Tagi wewnętrzne są nijako pozostawione bez linkowania; są to Tagi o mniejszym znaczeniu i takie, które mogą interesować wąską grupę użytkowników portalu. Takie rozwiązanie pozwoliło znakomicie uprościć budowę elementów nawigacyjnych strony i podniosło zdecydowanie tak zwane user usability. Boksy na stronie głównej Tagi są również wykorzystywane do automatycznej budowy boksów na stronie głównej. Po oznaczeniu artykułu danym Tagiem treść trafia do odpowiedniego boksu. Menu boczne Menu boczne podzielone jest na sekcje, które ułatwiają poszukiwanie odpowiedniej kategorii. Wykorzystano tu tak zwaną liczbę Millera http://pl.wikipedia.org/wiki/liczba_millera Menu boczne znajduje się na większości podstron, co pomaga użytkownikowi w nawigacji i w pozostawaniu w kontakcie ze stroną. Nagłówek strony Nagłówek strony oprócz funkcji nawigacyjnych pełni również funkcję identyfikacji portalu z tematyką stosunków międzynarodowych. Agencja interaktywna Netturbina.pl 4
Rysunek 3 Nagłówek strony Monetyzacja Portal Stosunkimiedzynarodowe.pl planuje uzyskiwać przychody z reklam bannerowych i rozszerzonych wpisów polskich uczelni wyższych, które w swojej ofercie posiadają kierunki związane z tematem portalu. System umożliwia dodanie bannerów w następujących rozmiarach: Banner górny: 990px szerokości, wysokość nie jest niczym ograniczona. Banner boczny: 190px szerokości, wysokość do 600px. Powyższe wartości pozwalają umieścić na stronie banner w dowolnej standardowej wielkości np.: 750x200 czy 160x600. System dodawania bannerów jest na tyle elastyczny, że możemy w jednym polu umieścić kilka bannerów obok siebie. Np. w polu banner górny możemy umieścić bannery 750x200 i 750x100 jeden pod drugim. Jako banner możemy umieścić plik flash.swf zdjęcia typu png,jpg,gif, animowany gif czy nawet sam tekst. Wyjątkowe rozwiązania Mapa świata Ambitnym założeniem właścicieli portalu jest stworzenie artykułów dla każdego kontynentu i kraju świata, jednocześnie pozwalając użytkownikom w łatwy sposób dotrzeć do wybranego kraju. Wychodząc naprzeciw tym oczekiwaniom stworzyliśmy mapkę świata w technologii FLASH. Użytkownik wybierając najpierw kontynent a później klikając w dany kraj, zostaje przeniesiony na listę artykułów wcześniej oznaczonych Tagiem z nazwą kraju. Agencja interaktywna Netturbina.pl 5
Rysunek 4 Interaktywna mapa świata Rysunek 5 Podstrona interaktywnej mapy świata Agencja interaktywna Netturbina.pl 6
Koncepcja zdjęć/obrazów Zaawansowany automatyczny system skalowania zdjęć SmartCrop. Redakcja systemu może dodać do każdego artykułu zdjęcie dowolnej wielkości i formatu. Zdjęcia mogą być bardzo wysokie lub bardzo szerokie. W systemie, zwłaszcza w boksach na stronie głównej, zdjęcia mają ograniczoną wielkość i narzucony stosunek wysokości do szerokości - co pozwala zachować spójność strony i schludny jej wygląd. System SmartCrop pozwala na dopasowanie każdego zdjęcia do wymagań bez interwencji redakcji. Nie potrzeba skalować zdjęć za pomocą dodatkowego programu wszystko dzieje się automatycznie. System SmartCrop samodzielnie kadruje zdjęcia za pomocą zaawansowanych algorytmów wykrywania twarzy i innych obiektów. Dzięki temu dopasowanie rozmiaru zdjęcia dzieje się bez uszczerbku dla informacji niesionej przez nie. Zdjęcia na stronie artykułu są odpowiednio pomniejszone, aby nie zakrywać treści najważniejszej tekstu. Po kliknięciu pomniejszonego zdjęcia uzyskujemy, za pomocą eleganckiego efektu, powiększenie. Sposób wyświetlania jednego zdjęcia/obrazu w kluczowych miejscach serwisu: Rysunek 6 Zdjęcie w widoku boksu na stronie głównej Rysunek 7 Zdjęcie w widoku listy kategorii Agencja interaktywna Netturbina.pl 7
Rysunek 8 Zdjęcie w widoku strony artykułu Rysunek 9 Powiększone zdjęcie w widoku artykułu Agencja interaktywna Netturbina.pl 8
Podstrona portalu: Uczelnie Strona służy do szybkiego odnajdywania uczelni oferujących kierunki studiów zgodne z profilem portalu. Redakcja dodaje podstawowe informacje o uczelni w panelu administracyjnym (nazwa, adres www, adres, telefon, logo, banner reklamowy). Dodatkowo w odpowiednie pola wpisuje adres uczelni co powoduje automatycznie pojawienie się danej uczelni na interaktywnej mapce. Rysunek 10 Strona wyszukiwania uczelni Po przejściu na stronę uczelni użytkownikowi ujawnia się strona zawierająca mapkę uczelni, wyszukiwarkę uczelni i listę wszystkich uczelni. Użytkownik może wybrać uczelnię z mapki, po kliknięciu w marker uzyskuje podstawowe dane teleadresowe. Może powiększyć mapkę na tyle by dokładnie zobaczyć plan okolicy uczelni. Jeśli użytkownik chce uzyskać listę uczelni z danego województwa czy miasta wpisuje je do filtra. Użytkownik ma również możliwość wyszukania uczelni po nazwie (lub tylko części nazwy). Agencja interaktywna Netturbina.pl 9
Wyszukiwarka Strona wyszukiwarki została maksymalnie uproszczona i pozbawiona dodatkowych elementów nawigacyjnych. Pozwala to na uzyskanie przejrzystych wyników i nie rozprasza użytkownika podczas poszukiwań. Rysunek 11 Widok strony wyszukiwarki Agencja interaktywna Netturbina.pl 10
Panel administratora W tak rozbudowanym portalu jakim jest portal stosunkimiedzynarodowe.pl dokonaliśmy maksymalnego uproszczenia panelu administracyjnego. Główne menu nawigacyjne składa się tylko z 6 linków! Strona służąca dodawaniu artykułów jest zbudowana tylko z niezbędnych pół i maksymalnie uproszczona. Dodawanie treści artykułów odbywa się podobnie jak w popularnym edytorze Microsoft Word. Wszystko to sprawia, że obsługa redakcyjna portalu to sama przyjemność a nie udręka jak to bywa w przypadku innych produkcji. Rysunek 12 Panel administracyjny, widok strony dodawania artykułu Netturbina.pl Adres: ul. Mysia 5/7 05-400 Otwock koło Warszawy Dane firmowe: Numer REGON: 012577115 Numer NIP: 5320102087 Osoby do kontaktu: Aleksander Ślązak, tel.: 792 241 339 Michał Sylwestrzuk, tel.: 609 911 686 Agencja interaktywna Netturbina.pl 11