publikuj:

wydrukuj

8 skomentuj »

TAGI: joomla , kurs , cms , webdesign

2008-12-03 08:40 | Stefan Wajda

Kurs systemu zarządzania treścią Joomla!. Część czwarta: projektujemy witrynę i konfigurujemy stronę startową

W poprzednich odcinkach kursu Joomli! zapoznaliśmy się z podstawowymi zagadnieniami dotyczącymi konfiguracji i zarządzania systemem. Przyszedł więc czas, by od teorii przejść do praktyki i zacząć wypełniać naszą witrynę treścią. Najpoważniejszym wyzwaniem, które w tym momencie stanie przed nami, będzie odpowiednie zaprojektowanie struktury informacji oraz takie przygotowanie strony startowej, by pozwalała ona naszym przyszłym użytkownikom szybko i łatwo odnaleźć wszystkie poszukiwane dane. A zatęm do dzieła!

Spis treści
Projektowanie witryny Podstawowe założenia Użytkownik w centrum projektu Scenariusze działań Precyzowanie celów Zakres treści i szkic spisu Mapa witryny Strona startowa Konfiguracja strony startowej Parametry ogólne Rozmieszczenie materiałów Kolejność artykułów Pozostałe parametry interfejsu Podsumowanie

Spis treści

Projektowanie witryny

Strona startowa
Konfiguracja strony startowej

Podsumowanie

Projektowanie witryny

Podstawowe założenia

Zanim zaczniemy umieszczać teksty na stronach naszego serwisu, powinniśmy dokładnie przemyśleć cel jego funkcjonowania. Od tego będzie przede wszystkim zależały zakres przedstawianych informacji oraz ich struktura. Sporządźmy więc projekt treści, który pomoże nam odpowiedzieć na trzy kluczowe pytania:

co i po co będzie publikowane?
skąd brać materiały i jak je uporządkować?
w jaki sposób udostępniać informacje?

Rozważmy dokładnie wszystkie te kwestie, by później nie tracić niepotrzebnie sił na usuwanie błędów. Tworzenie witryny z wykorzystaniem Joomli! uwalnia nas od konieczności programowania w HTML-u, PHP czy ASP, dlatego możemy poświęcić więcej czasu na dopracowanie treści, wyglądu, użyteczności i dostępności naszego serwisu.

W procesie tworzenia strony WWW, tak zresztą jak w wypadku każdego zadania wymagającego dużego wysiłku i zaangażowania, warto postępować wedle wcześniej określonego planu. Poniższa tabela prezentuje siedem etapów procesu projektowania, których zrealizowanie pozwoli nam stworzyć efektywną witrynę internetową:

Siedem etapów tworzenia witryny
Ustalenie wymagań stawianych witrynie Na początku warto dokładnie zdefiniować własne oczekiwania oraz potrzeby, które zaspokajać będą użytkownicy korzystający z naszego serwisu. Na tej podstawie ustalimy zestaw konkretnych wymagań, w tym kilka (nie więcej niż pięć) głównych celów, które ma spełniać witryna. Opracowanie scenariuszy postępowania użytkowników Następnie powinniśmy określić adresatów witryny. Podzielmy ich na kilka grup i dla każdej z nich stwórzmy profil przykładowego reprezentanta. Uwzględnijmy w nim oczekiwania oraz czynności, które odbiorca będzie musiał wykonać, aby w naszej witrynie znaleźć interesujące go informacje. Zaprojektowanie zawartości serwisu i jej struktury Rozważmy, w oparciu o dane uzyskane na poprzednim etapie projektowania, jak powinna wyglądać struktura treści serwisu, by zapewnić intuicyjność jego obsługi. Wszystkie planowane treści pogrupujmy w kategorie i połączmy je wspólnym projektem spisu zawartości. Opracowanie mapy serwisu i schematów stron Na podstawie sporządzonego spisu treści opracujmy projekt rozmieszczenia zawartości w serwisie – najkrótsze drogi, którymi użytkownicy dotrą ze strony powitalnej do interesujących ich informacji. Ustalmy także, które strony na mapie będą zbudowane według dostępnych szablonów, a które będą bardziej „nietypowe” – na przykład wzbogacone o dodatkowe moduły. Stworzenie schematu nawigacji i menu witryny Rozpatrzmy każdy, zaprojektowany w poprzednim etapie, schemat strony. Uwzględnijmy w nim elementy nawigacji: globalnej, lokalnej, administracyjnej oraz tytuł strony, wyszukiwarkę, logo i stopkę. Testowanie prototypu Wprowadźmy do przygotowanego modelu witryny typowe elementy zawartości. Następnie opracujmy odpowiednie scenariusze testów i (zależnie od wielkości naszego budżetu) sprawdźmy razem z testerami użyteczność projektu. Zlecając im wykonanie określonych zadań, prześledźmy, na jakie problemy w nawigacji napotykają. Postarajmy się ustalić, czy testujący trafnie potrafią przewidzieć, co się stanie, gdy klikną określone elementy, czy jasne i zrozumiałe są dla nich etykiety w menu, odnośniki itd. Wprowadzenie poprawek. Realizacja projektu Po przeanalizowaniu wyników testów ustalmy listę koniecznych zmian i wprowadźmy je do schematów układu informacji i stron. Ostatnim krokiem będzie oczywiście realizacja całego projektu.

Siedem etapów tworzenia witryny

Ustalenie wymagań stawianych witrynie

Na początku warto dokładnie zdefiniować własne oczekiwania oraz potrzeby, które zaspokajać będą użytkownicy korzystający z naszego serwisu. Na tej podstawie ustalimy zestaw konkretnych wymagań, w tym kilka (nie więcej niż pięć) głównych celów, które ma spełniać witryna.

Opracowanie scenariuszy postępowania użytkowników

Następnie powinniśmy określić adresatów witryny. Podzielmy ich na kilka grup i dla każdej z nich stwórzmy profil przykładowego reprezentanta. Uwzględnijmy w nim oczekiwania oraz czynności, które odbiorca będzie musiał wykonać, aby w naszej witrynie znaleźć interesujące go informacje.

Zaprojektowanie zawartości serwisu i jej struktury

Rozważmy, w oparciu o dane uzyskane na poprzednim etapie projektowania, jak powinna wyglądać struktura treści serwisu, by zapewnić intuicyjność jego obsługi. Wszystkie planowane treści pogrupujmy w kategorie i połączmy je wspólnym projektem spisu zawartości.

Opracowanie mapy serwisu i schematów stron

Na podstawie sporządzonego spisu treści opracujmy projekt rozmieszczenia zawartości w serwisie – najkrótsze drogi, którymi użytkownicy dotrą ze strony powitalnej do interesujących ich informacji. Ustalmy także, które strony na mapie będą zbudowane według dostępnych szablonów, a które będą bardziej „nietypowe” – na przykład wzbogacone o dodatkowe moduły.

Stworzenie schematu nawigacji i menu witryny

Rozpatrzmy każdy, zaprojektowany w poprzednim etapie, schemat strony. Uwzględnijmy w nim elementy nawigacji: globalnej, lokalnej, administracyjnej oraz tytuł strony, wyszukiwarkę, logo i stopkę.

Testowanie prototypu

Wprowadźmy do przygotowanego modelu witryny typowe elementy zawartości. Następnie opracujmy odpowiednie scenariusze testów i (zależnie od wielkości naszego budżetu) sprawdźmy razem z testerami użyteczność projektu. Zlecając im wykonanie określonych zadań, prześledźmy, na jakie problemy w nawigacji napotykają. Postarajmy się ustalić, czy testujący trafnie potrafią przewidzieć, co się stanie, gdy klikną określone elementy, czy jasne i zrozumiałe są dla nich etykiety w menu, odnośniki itd.

Wprowadzenie poprawek. Realizacja projektu

Po przeanalizowaniu wyników testów ustalmy listę koniecznych zmian i wprowadźmy je do schematów układu informacji i stron. Ostatnim krokiem będzie oczywiście realizacja całego projektu.

Użytkownik w centrum projektu

Pamiętajmy, że tworzymy witrynę nie dla siebie lub naszego zleceniodawcy, ale przede wszystkim dla jej odbiorców. Naszym finalnym klientem jest właśnie użytkownik. Od pierwszego momentu projektujmy więc zgodnie z zasadą wyrażoną angielskim określeniem User Center Design – użytkownik w centrum projektu. To pierwszy, drugi, trzeci… – w gruncie rzeczy jedyny warunek sukcesu.

Witrynę skupioną na użytkowniku cechują trzy właściwości: zgodność ze standardami projektowania dla WWW, użyteczność (ang. usability, webusability) i dostępność (ang. accessibility). O realizację tych zasad od strony technicznej zadbali już projektanci systemu Joomla!. My musimy dołożyć wszelkich starań, by ich praca nie poszła na marne.

Pamiętajmy o tym, że serwis może służyć wielu różnym użytkownikom. Wśród potencjalnych odwiedzających warto wyróżnić grupy związane z poszczególnymi celami biznesowymi witryny oraz podstawowe i poboczne kategorie odbiorców. Rozpocznijmy jednak od stworzenia listy oczekiwań wobec serwisu. Dokonajmy ich analizy, pamiętając, że wielofunkcyjność nie zawsze jest największą zaletą witryny. Rozważmy więc, które z oczekiwań nasza strona może spełnić oraz które spośród nich powinna ona spełniać najlepiej. Następnie na tej podstawie zdefiniujmy grupy użytkowników – adresatów witryny oraz czynności, które będą oni wykonywali podczas wizyty.

Scenariusze działań

Profesjonalni projektanci stron internetowych zalecają, by w trakcie tworzenia założeń serwisu wyobrazić sobie konkretnego użytkownika z każdej z grup docelowych, nadać mu imię i napisać jego własną historię. Takie opowiadanie będzie właśnie scenariuszem działań – kolejnych kroków, które wykonywać będą użytkownicy, poczynając od wpisania w Pasku adresu przeglądarki adresu naszej witryny. Poniżej zaprezentowano taki przykładowy scenariusz:

Scenariusz dla modelu odbiorcy
Opis: Jacek jest absolwentem historii, młodym nauczycielem. Jeszcze w szkole dowiedział się, co to jest HTML, stworzył prostą stronę WWW, ale nie interesuje go programowanie. Chciałby natomiast poprowadzić stronę o powstaniach śląskich. Dowiedział się, że za pomocą Joomli! można prowadzić serwis bez zgłębiania tajników HTML-a czy CSS. Motywacja: Jacek przechodzi staż nauczycielski i zaplanował, że przygotuje i będzie prowadził dla uczniów swojej szkoły stronę WWW poświęconą historii. Na początku byłaby ona ograniczona tematycznie, z czasem jednak mogłaby się rozwinąć w bardziej rozbudowany projekt. Potrzeby: Modelowy użytkownik chce się dowiedzieć, jak założyć własny serwis, jak umieszczać artykuły, jak je ilustrować, skąd czerpać informacje o frekwencji odwiedzających oraz jak przeprowadzać dla uczniów konkursy. Postępowanie: Jacek wpisuje w przeglądarce adres stworzstronewjoomla.com. Przygląda się menu i dostrzega pozycję Poradniki. Klika…

Scenariusz dla modelu odbiorcy

Opis: Jacek jest absolwentem historii, młodym nauczycielem. Jeszcze w szkole dowiedział się, co to jest HTML, stworzył prostą stronę WWW, ale nie interesuje go programowanie. Chciałby natomiast poprowadzić stronę o powstaniach śląskich. Dowiedział się, że za pomocą Joomli! można prowadzić serwis bez zgłębiania tajników HTML-a czy CSS.
Motywacja: Jacek przechodzi staż nauczycielski i zaplanował, że przygotuje i będzie prowadził dla uczniów swojej szkoły stronę WWW poświęconą historii. Na początku byłaby ona ograniczona tematycznie, z czasem jednak mogłaby się rozwinąć w bardziej rozbudowany projekt.
Potrzeby: Modelowy użytkownik chce się dowiedzieć, jak założyć własny serwis, jak umieszczać artykuły, jak je ilustrować, skąd czerpać informacje o frekwencji odwiedzających oraz jak przeprowadzać dla uczniów konkursy.
Postępowanie:
Jacek wpisuje w przeglądarce adres stworzstronewjoomla.com. Przygląda się menu i dostrzega pozycję Poradniki. Klika…

Pamiętajmy, że im dokładniej przemyślimy modele użytkowników, a zwłaszcza ich scenariusze zachowań, tym mniej czasu spędzimy nad każdym z kolejnych etapów projektowania struktury serwisu.

Precyzowanie celów

Opracowanie scenariuszy działań użytkowników to doskonały sposób na weryfikację celów serwisu, ich uściślenie i wybór tych, które odbiorcy rzeczywiście będą mogli zrealizować. Kryterium oceny jest proste: użytkownik osiągnie takie cele, do których doprowadzą go konkretne czynności, zakończone zaspokojeniem potrzeby. Jeśli nie będziemy mogli stworzyć podobnej procedury, to znaczy, że nie da się osiągnąć planowanego wstępnie celu, a więc oczekiwanie trzeba będzie zmodyfikować albo zupełnie odrzucić.

Dopiero na tej podstawie możliwe będzie precyzyjne określenie, jakie potrzeby internautów powinna zaspokajać witryna, jakim celom biznesowym może służyć i w efekcie – jaka powinna być jej treść. Pamiętajmy, by podstawowe cele zdefiniować w kilku – najwyżej pięciu – punktach. W tym wypadku „więcej” nie znaczy wcale „lepiej”.

Zakres treści i szkic spisu

Korzystając ze sformułowanych przed chwilą celów, określimy, jakie mają być treści witryny. Spójrzmy na tę kwestię tak jak sprzedawca, który wystawia swój towar na sprzedaż: „chcesz tego – proszę bardzo”, „szukasz tego – jest tutaj”, „to ci jest potrzebne – pobierz stąd”. Jest zupełnie jasne, że nie będziemy oferowali treści, których użytkownicy nie chcą i których nie będą szukali w naszym serwisie.

Najlepiej, aby wstępny projekt witryny przybrał postać szkicu spisu treści – jeszcze nie spisu, ale właśnie szkicu. Uwzględnijmy w nim wszystkie elementy zawartości, które uznamy za ważne i potrzebne.

Mapa witryny

W projektowaniu stron internetowych bardzo użytecznym narzędziem jest mapa witryny, występująca także w większości profesjonalnych serwisów internetowych. Dlaczego użytkownik sięga po mapę witryny? Dlatego, że nie może w „normalny” sposób znaleźć tego, czego szuka. Mapa witryny jest właśnie ostateczną instancją dla zdezorientowanego odbiorcy. Powinniśmy więc zadbać o to, by jak najrzadziej musiał on z niej korzystać. Jednak – paradoksalnie – z tych samych powodów sporządzenie mapy witryny będzie również niezbędnym krokiem w procesie projektowania. Jest to bowiem najprostsza droga do zaprojektowania systemu nawigacji przyjaznego użytkownikowi – takiego, który doprowadzi błyskawicznie do każdego miejsca w serwisie.

Mapa geograficzna wskazuje miejsca i drogi, którymi do tych miejsc można dotrzeć. Mamy tam też orientacyjne punkty terenowe, które ułatwiają określenie lokalizacji. Podobnie skonstruowana jest mapa witryny. Nie pokazuje ona struktury serwisu, ale raczej ścieżki, którymi mogą podążać użytkownicy. Ilustruje organizację poszczególnych stron i informuje o nazwach głównych elementów – punktów orientacyjnych.

Przyjrzyjmy się temu zagadnieniu na konkretnym przykładzie. Oto, jak mogłaby wyglądać mapa witryny firmy zajmującej się sprzedażą kapeluszy:

Przykładowa mapa witryny.

Gdy internauta trafi na taką stronę, zobaczy pięć pozycji menu. W zależności od interesujących go treści może kliknąć jedną z nich. Jeśli wybierze pozycję O firmie, trafi na stronę z artykułem, z którego dowie się, że przedsiębiorstwo ma pięćdziesięcioletnią tradycję i ugruntowaną pozycję na światowym rynku. Kapelusze zamawiali i zamawiają tam między innymi królowa angielska i prezydent USA. Oczywiście w tak podanej informacji powinno się dostarczać dane wiarygodne, które można gdzieś sprawdzić.

Gdy nasz odbiorca kliknie pozycję Produkty, zostanie przeniesiony na stronę przejściową, na której znajdą się odnośniki do kilku kategorii kapeluszy, na przykład Kapelusze dla pań, Kapelusze dla panów i Kapelusze dla milusińskich. Następnie będzie mógł przejść do interesującej go kategorii kapeluszy.

Wybór pozycji Usługi spowoduje wyświetlenie w przeglądarce odbiorcy strony z artykułem prezentującym możliwości wykonywania kapeluszy na zlecenie, na różne okazje, a także na przykład informacji o odnawianiu starych kapeluszy.

Jeśli klient będzie już zdecydowany, na pewno wybierze opcję Kontakt, dzięki której będzie mógł złożyć zamówienie na formularzu przesyłanym do działu obsługi klientów przedsiębiorstwa.

Ostatnia pozycja menu – Nowości – przeniesie użytkownika na stronę, na której znajdzie on szereg krótkich informacji o nowych seriach kapeluszy, o sukcesach firmy w światowych konkursach kapeluszników, o trendach w kapeluszowej modzie i tym podobnych. Jeśli jakaś wiadomość okaże się dla odbiorcy interesująca, kliknie odnośnik Czytaj całość.

«poprzednia 1 2 3 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

8 skomentuj »

Komentarze

#1 Rivanel 2009-03-05 14:30:24 0
Witam, szukam modułu (Joomla 1.5.9) albo innego sposobu, zeby móc na głównej stronie wyświetlić najnowsze wiadomości według 3 działów

np

---------------------------------------

TYTUŁ DZIAŁU (grafika bądź tekst)

---------------------------------------

art1

art2

---------------------------------------

TYTUŁ DZIAŁU 2 (grafika bądź tekst)

---------------------------------------

inny art1

inny art2

---------------------------------------

TYTUŁ DZIAŁU 3 (grafika bądź tekst)

---------------------------------------

etc..

generalnie da się pokazać treść w podobny sposób przy podziale jednokolumnowym ustawiając kolejność wiadomości względem kategorii, ale jak oddzielić je grafikami?

ewentualnie może to być np w 3 boksach każdy innaczej zatytułowany

wszelkie pomysły i podpowiedzi będą cenne i z góry dziękuję

rivanelgazeta.pl
IP: 89.77.81.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6
#2 tomakoz^® 2009-03-05 20:52:12 0
nie będąc adminem tego serwisu powiem, że troche źle wybrałeś miejsce na zadanie tego pytania bo jak dla mnie pytanie powinieneś najpierw zadać na stronie forum.joomla.pl albo na OpenSource CMS czyli stronach scisle powiazanych z tematyką bo po pierwsze miałbyś bardzo niewielki czas reakcji (prawdopodobnie), a po drógie jeśli odpowiedź nie była by szybka to są tam większe szanse, że ktoś odpisze bo zna się na temacie gdyż tam napewno przesiadują ludzie, którzy działają w oparciu o joomle bądź są w jakiś sposób z nią powiązani.

PS.

taki wpis ja bym bardziej (jak by była możliwość) przeniósł do jakiegoś forum, albo czegoś takiego

Pozdrawiam
IP: 83.11.149.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.0.6) Gecko/2009020409 Iceweasel/3.0.6 (Debian-3.0.6-1) FirePHP/0.2.4
#3 rivanel 2009-03-16 14:01:07 0
Witaj,

zacząłem od pytania na forum joomla, niestety nie doczekałem się żadnej odpowiedzi...
IP: 89.77.81.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7 (.NET CLR 3.5.30729)
#4 simon_r 2009-04-22 09:46:44 0
Przyjrzyj sie modułom wytworzonym przez GavickPro.. są tam darmowe bardzo efektowne moduliki do graficznego prezentowania newsów.. znajdziesz to tu -> http://www.gavick.com

pozdrawiam

Simon

-----------

http://www.simons.pl
IP: 213.158.197.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8 (.NET CLR 3.5.30729)
#5 Anulek2 2009-11-11 22:11:23 0
Samo stworzenie strony głównej nie wystarcza, trzeba zrobić zawsze unikalny szablon, dodać moduły wzbogacające funkcjonalnośći, więcej tu:

http://infoprodukty.pl/kurs_joomla/
IP: 85.222.88.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 GTB5
#6 GilesOFELIA28 2011-09-16 12:17:04 0
Don't you understand that it is correct time to receive the loans, which can realize your dreams.
IP: 91.212.226.[...] Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C)
#7 REILLYJosefina33 2011-09-16 12:18:42 0
I had a dream to start my own business, but I didn't have enough amount of cash to do that. Thank heaven my close colleague told to take the mortgage loans. Thus I took the short term loan and made real my desire.
IP: 91.212.226.[...] Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C)
#8 Angela27Snider 2011-09-16 12:19:54 0
If you want to buy a house, you would have to receive the loans. Moreover, my father commonly utilizes a consolidation loan, which supposes to be the most rapid.
IP: 91.212.226.[...] Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C)

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.