Blog Technologiczny ATENA » Interfejs http://blog.atena.pl JavaEE, AJAX, xHTML, RIA, JBoss Fri, 20 Jan 2012 11:18:46 +0000 en hourly 1 JavaFX jako GUI do JBoss Seam? Nie ma problemu! http://blog.atena.pl/javafx-jako-gui-do-jboss-seam-nie-ma-problemu http://blog.atena.pl/javafx-jako-gui-do-jboss-seam-nie-ma-problemu#comments Wed, 18 Aug 2010 08:20:33 +0000 Adam Andrzejewski http://blog.atena.pl/?p=996 Jakiś czas temu napisałem artykuł opisujący wstępne założenia JavyFX. Wtedy też obiecałem, że gdy uda mi się uruchomić aplikację FXową na serwerze aplikacyjnym, podzielę się doświadczeniem. Właśnie nadszedł ten czas.

Często można spotkać opinie, że JavaFX nie ma przyszłości, bo nie posiada żadnego wsparcia dla komunikacji z elementami biznesowymi. Kiedyś być może było to prawdą, dziś naprzeciw takim oczekiwaniom wychodzi Flamingo. Jest to framework, który może stać się czymś w rodzaju „kleju” łączącego teoretycznie różne technologie, m.in. JavyFX i Seama.

Aby nie pozostawiać słów bez pokrycia, przygotuję projekt, który zaprezentuje możliwości Flamingo. Pokaże on jak łączyć JavaFX z Seamem. Na koniec wszystko wrzucimy na serwer aplikacji i uruchomimy z poziomu przeglądarki.

Zacznijmy od klasycznego projektu Seama. Wykorzystam tu Eclipse 3.5.2, Seama 2.2, JBossa 5.1 oraz JBoss Tools dla Eclipse, żeby szybko wygenerować działającą aplikację. Jeżeli jeszcze ich nie masz, czas się zaopatrzyć w te niezbędne narzędzia.

W Eclipse wybieramy New – > Other -> Seam -> Seam Web Project

Wypełniamy pola formularza:

  • nazwa projektu: SeamApp
  • Target runtime: JBoss 5.1 Runtime
  • Dynamic Web Module Vesion: 2.5
  • Target Server: JBoss 5.1 Runtime Server
  • Configuration: Dynamic web project with JBoss Seam 2.2.0

Najprawdopodobniej nazwy docelowego runtime’u i serwera będą inne – w zależności od tego co sobie skonfigurujemy. Najważniejsze, by wybrać JBoss 5.1 (Seam 2.2. teoretycznie działa też na wcześniejszych wersjach).

Przez kilka kolejnych ekranów konfiguratora możemy przeskoczyć z domyślnymi ustawieniami. Dotrzemy ostatecznie do ekranu z wyborem bazy danych i sposobu deploymentu aplikacji. Ponieważ przykłady mają być proste, wybieramy pakowanie do war i bazę HSQLową – lub dowolną inną, nie będziemy korzystać tutaj z tego elementu.

Możemy zmienić jeszcze domyślne pakiety, ale nie jest to konieczne.

Wygenerowana aplikacja jest gotowa do użycia i deploymentu – zawiera wszystkie niezbędne elementy do uruchomienia, przykładowe strony oraz klasę Authenticator służącą do autentykacji użytkownika w systemie. Dla pewności możemy uruchomić aplikację by upewnić się, że wszystko poszło ok.

Aby móc podpiąć się do aplikacji za pomocą JavaFX, musimy dodać do niej kilka niezbędnych elementów. Są to biblioteki Flamingo (linki do wszystkich materiałów znajdują się na końcu artykułu):

  • amf-serializer.jar
  • flamingo-service.jar
  • flamingo-services-common.jar
  • hessian.jar
  • scannotation.jar

Umieszczamy je bezpośrednio w katalogu lib aplikacji. W skład Flamingo wchodzi jeszcze parę bibliotek, ale do podstawowego przykładu wystarczą te. Aby móc wywoływać komponenty Seam musimy jeszcze dodać do pliku web.xml wpis definiujący servlet, który będzie odpowiadał za komunikację JavaFX z Seamem

1
2
3
4
5
6
7
8
<servlet>
    <servlet-name>Hessian Remote Servlet</servlet-name>
    <servlet-class>com.exadel.flamingo.service.seam.HessianToSeamServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>Hessian Remote Servlet</servlet-name>
    <url-pattern>/flamingo/hessian/*</url-pattern>
</servlet-mapping>

Teraz już możemy dostać się do dowolnego komponentu Seam w naszej aplikacji za pomocą Flamingo. Przykładowa aplikacja posiada tylko jeden komponent (autentykator), więc wykorzystajmy go, aby nie komplikować całości. Do klasy Authenticator.java dodajmy metodę

1
2
3
public String hello(String name){
        return "Hello " + name +"!";
}

Pozostanie ona naszą metodą, którą będziemy wywoływać z poziomu aplikacji FX-owej.

Czas na stworzenie klienta tej jakże wyrafinowanej metody. ;)

W Eclipse tworzymy nowy projekt, w którym znajdą się zarówno klasy Java jak i JavaFX. Polecam by zainstalować sobie wytczkę  Exadel JavaFX Eclipse plugin. Ułatwia ona nieco tworzenie projektów FX-owych w Eclipse. Do tej części wymagane jest też posiadanie JavaFX 1.3 SDK. Jeżeli jeszcze go nie masz – czas zainstalować.

Wybieramy New -> Other -> JavaFX -> JavaFX Project

Na kolejnych ekranach wizarda wybieramy nazwę projektu (FxClient), wersję SDK JavyFX, oraz JDK do wykorzystania w projekcie. Po „doklikaniu” do końca wizarda zostanie utworzony projekt ze wszystkimi niezbędnymi bibliotekami do pisania uruchamiania aplikacji FXowej.

Aby móc skorzystać z mechanizmów Seamowych, musimy dodać jeszcze trzy biblioteki. Tworzymy katalog lib i wrzucamy do niego:

  • jboss-seam.jar (z instalacji seama)
  • jboss-seam-remoting.jar (jw.)
  • hessian.jar (ta sama wersja co w aplikacji Seamowej)

Teraz musimy dodać interfejs, który będzie bramką do naszej usługi seamowej. W idealnym świecie pewnie byłby on zawarty w dostarczonym z zewnątrz jarze z API, ale upraszczamy wszystko jak możemy.

1
2
3
4
5
package pl.atena.client.seam.api;

public interface HelloWorld {
     public String hello(String name);
}

Potrzebna będzie też fabryka tej usługi, dodajmy więc i ją:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
package pl.atena.client.java;

import java.net.MalformedURLException;

import com.caucho.hessian.client.HessianProxyFactory;

import pl.atena.client.seam.api.HelloWorld;

public class HelloWorldClient {

    public static HelloWorldClient CLIENT;

    private String _url;
    private HelloWorld _service;

    private HelloWorldClient(String url) {
        _url = url;
    }

    public static void setServerUrl(String url) {
        CLIENT = new HelloWorldClient(url);
    }

    private HelloWorld getService() {
        if (_service == null) {
            try {
                HessianProxyFactory factory = new HessianProxyFactory(); //(1)
                _service = (HelloWorld) factory.create(HelloWorld.class, _url); //(2)
            } catch (MalformedURLException ex) {
                System.out.println(ex);
            }
        }
        return _service;
    }

    public String hello(String s) {

        return getService().hello(s);

    }

}

Krótki komentarz do powyższego:

(1)   – Tworzymy nową instancję fabryki połączeń. Komunikacja za pomocą JavaFX i Seam odbywa się po protokole Hessian.

(2)   – Pobieramy instancję usługi HelloWorld na podstawie adresu URL zasobu. Parametr ten ustawimy już bezpośrednio w skrypcie FX i tam opiszę jego wygląd.

Pozostał nam jeszcze skrypt FX który skorzysta z usługi Seamowej. Utwórzmy go zatem:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/*

*MainFrame.fx

*

*Created on sie 12, 2010, 08:09:02 AM

*/
package pl.atena.client.fx;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.TextOrigin;
import javafx.ext.swing.SwingButton;
import javafx.scene.layout.VBox;
import javafx.scene.control.TextBox;

import pl.atena.client.java.HelloWorldClient;

class Hello{ //(1)

    public var name:String;
    public var str:String;    
}

var helloModel = new Hello();

HelloWorldClient.setServerUrl("http://localhost:8080/SeamApp/flamingo/hessian/authenticator"); //(2)

var helloText: TextBox = TextBox {
    text: bind helloModel.name with inverse //(3)
    columns: 7
    selectOnFocus:true
}

var helloLabel = Text{
    y:8
    font: Font { name:"sansserif", size: 12 }
    fill: Color.BLACK
    content: bind "Server says: {helloModel.str}"
    textOrigin: TextOrigin.TOP
}

var helloButton = SwingButton  {
    text:"Say Hello!"
    action: function(){
        helloModel.str = HelloWorldClient.CLIENT.hello(helloModel.name);
    } //(4)
}

Stage { //(5)
    title: "Helloworld Sample"
    width: 200
    height: 150
    scene: Scene {
        content: VBox {
            translateX: 5
            translateY: 5
            spacing: 10
            content: [                
                HBox {
                    content: helloText
                    spacing: 10
                },
                HBox {
                    content: helloButton
                    spacing: 10
                },
                HBox {
                    content: helloLabel
                    spacing: 10
                }
            ]
        }
    }
}

(1)    – Tworzymy miniklasę, w której będziemy trzymać imię do powitania, oraz odpowiedź z komponentu Seam.
(2)    – Ustawiamy adres do komponentu Seam do którego chcemy się odwołać. Generalnie powinien mieć on postać http://adres_serwera/kontekst_aplikacji/flamingo/hessian/nazwa_komponentu_seam, przy czym /flamingo/hessian to ścieżka dla servletu Flamingo którą wpisaliśmy w web.xml aplikacji seamowej.
(3)    – Wiążemy zawartość pola tekstowego z jedną ze zmiennych naszej miniklasy.
(4)    – Podpinamy wywołanie usługi pod kliknięcie na przycisk.
(5)    – Tworzymy scenę, na której umieszczone zostaną nasze elementy graficzne.

W tym momencie (jeżeli mamy uruchomioną aplikację seamową oczywiście) możemy już uruchomić aplikację FXową i sprawdzić czy wszystko się udało.

Jak widać, udało nam się wywołać komponent Seam z aplikacji desktopowej.

Czas podnieść sobie nieco poprzeczkę, i zrobić to samo z aplikacji webowej.

Tu też przydatny jest plugin do eclipse, gdyż może on za nas załatwić mozolną walkę z kompilacją do pliku jar wraz z wymaganymi bibliotekami (javafxpackager z linii poleceń też może to zrobić, ale wówczas trzeba się trochę napisać…).

Aby przygotować plik jar odpowiedni do wykorzystania na serwerze aplikacji wystarczy kliknąć na naszym skrypcie prawym przyciskiem myszy i wybierać Run as -> JavaFX Application (applet)

W folderze dist projektu zostaną utworzone następujące elementy

  • plik jar ze skompilowanym skryptem FX
  • pliki jnlp, umożliwiające uruchamianie aplikacji przez Java Web Start
  • strona html, w treści której umieszczony został aplet ze skryptem FX

Wszystko to przenosimy do katalogu WebContent naszej aplikacji Seamowej, zmieniamy nazwę wygenerowanego przez kompilator pliku html na index.html i robimy redeploy całej aplikacji. Teraz pod domyślnym adresem aplikacji seamowej powinniśmy otrzymać działający skrypt JavyFX

Prawda, że to proste?

Na koniec jeszcze jedna ciekawostka. Jeżeli zmodyfikujemy plik index.html i dodamy do definicji apletu parametr draggable, będziemy mogli dosłownie wyciągnąć aplet na pulpit (trzymając klawisz alt oraz lewy przycisk myszy) i korzystać z niego nawet po zamknięciu przeglądarki.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MainFrame</title>
</head>
<body>
<h1>MainFrame</h1>
<script src="http://dl.javafx.com/1.3/dtfx.js"></script>
<script>
    javafx(
        {
              archive: "MainFrame.jar",
              draggable: true,
              width: 400,
              height: 400,
              code: "pl.atena.client.fx.MainFrame",
              extPackages: "javafx.ext.swing",
              name: "MainFrame"
        }
    );
</script>
</body>
</html>

Podsumowując, Flamingo pozwala nam łatwo zintegrować aplikację FXową z aplikacją Seamową. Dzięki niemu możemy korzystać z komponentów Seama zarówno w aplikacji desktopowej, jak i wykorzystać JavaFX do stworzenia interfejsu użytkownika bezpośrednio w aplikacji seamowej. Aplikację przygotowaną w ten sposób bez problemu można umieścić na serwerze, a także udostępnić wersję desktopową przez jnlp. JavaFX nie zabrania wykorzystania innych elementów na stronie, może współistnieć z innymi elementami i bibliotekami. Czas więc zakasać rękawy i stworzyć prawdziwe RIA.

Zasoby i bibliografia

]]> http://blog.atena.pl/javafx-jako-gui-do-jboss-seam-nie-ma-problemu/feed 0 Wstęp do GWT http://blog.atena.pl/wstep-do-gwt http://blog.atena.pl/wstep-do-gwt#comments Thu, 15 Oct 2009 12:11:38 +0000 Adam Andrzejewski http://blog.atena.pl/?p=493 Google Web Toolkit (GWT) to framework dostarczony przez Google do budowania aplikacji opartych na języku Java z bogatym front-endem AJAXowym. GWT pozwala pisać aplikacje w Javie dostarczając zestaw bibliotek do tworzenia dialogów, przycisków, formularzy itp. Następnie kompiluje je i optymalizuje tworząc JavaScript, który powinien działać prawidłowo na wszystkich najpopularniejszych przeglądarkach. Kompilacja obejmuje statyczne sprawdzanie typów, wyrzucanie niepotrzebnych parametrów z metod, pól z klas, in-linowaniem metod – wszystko by maksymalnie przyśpieszyć działanie.

Instalacja  GWT jest nadzwyczaj prosta. Wystarczy pobrać zzipowaną wersję z http://code.google.com/intl/pl/webtoolkit/download.html i rozpakować w dowolne miejsce. GWT integruje się z eclipse 3.3 i 3.4 poprzez pluginy (instalacja opisana na http://code.google.com/intl/pl/eclipse/docs/download.html).

Po poprawnej instalacji wtyczki na pasku narzędziowym eclipse dostajemy trzy nowe ikony   gtwicons. Pierwsza z nich tworzy nam nowy projekt GWT, druga kompiluje go, trzecia wreszcie służy do deplyowania projektów Google App Engine.

Podczas pierwszego projektu musimy wskazać miejsce, w którym jest rozpakowane GWT. Domyślnie stworzenie nowego projektu generuje przykładową aplikację. Dodatkowo z menu kontekstowego Run As w projekcie możemy wybrać Web Application i automatycznie ona uruchomiona w dostarczonej z biblioteką przeglądarce, w tzw „hosted mode”

runaswebapp

webappbrowser

Główne zalety GWT:

  • edit – refresh – view – używając „hosted browser” do testowania aplikacji, zmiany w kodzie javy nie wymagają dodatkowej kompilacji czy restartu, wystarczy odświeżyć stronę i zmiany będą widoczne;
  • możliwość debugowania aplikacji za pomocą eclipsowego debugera;
  • wsparcie dla JSON, XML,  a także możliwość łatwego wywoływania procedur po stronie serwera (serializowanie i deserializowanie obiektów, zachowanie jak przy RMI);
  • wsparcie dla JavaScript Native Interface przez co możliwe jest samodzielne dodawanie kodu JavaScript do tworzonej aplikacji;
  • wsparcie dla przycisku „wstecz” dla przeglądarek, przez modyfikację historii przeglądanych stron;
  • współpraca z JUnit, JProfiler;
  • praca w 2 trybach – hosted mode (jw z eclipse, po wykonaniu ant hosted, itp bez całkowitej zamiany kodu na javascript) i web mode (zamiana kodu na javascript);
  • pisanie interfejsów użytkownika analogicznie jak w Swing;
  • możliwość rozbudowania o własne moduły lub inne opensourcowe pluginy (np. wspierające drag and drop w aplikacji);
  • szerokie wsparcie dla internacjonalizacji;
  • możliwość własnego ostylowania elementów za pomocą CSS.

GWT posiada kilkanaście gotowych elementów do budowy dynamicznych efektownych interfejsów, np:

  • panele (DecoratorPanel, VerticalPanel, HorizontalPanel, FlowPanel,  AbsolutePanel, DockPanel)
  • widgety (CheckBox, RadioButton, Button, CustomButton, FileUpload, DatePicker, Hyperlink)
  • listy i menu (ListBox, SelectBox, Tree, MenuBar)
  • inputy (TextBox, RichTextArea)
  • okna (DialogBox, DecoratedPopupPanel)
  • tabele (FlexTable, Grid)
  • animacje (Animation)

Możliwości frameworku można obejrzeć na następujących stronach

Dodatkowo istnieje biblioteka GWT-ext która dostarcza zdecydowanie więcej gotowych komponentów. Demo tej biblioteki można zobaczyć na http://www.gwt-ext.com/demo/

GWT docelowo jest zamieniane całkowicie na JavaScript, dlatego choć pisze się go w Javie, są pewne istotne ograniczenia w wykorzystaniu standardowych bibliotek:

  • JavaScript obsługuje tylko 64bitową wersję liczby zmienno przecinkowej, dlatego też wszystkie typy numeryczne, jak byte, short, int, są w trybie web zamieniane na double, a to z kolei pozwala na zwiększenie dozwolonego zakresu liczbowego; typ long jest emulowany na podstawie dwóch 32bitowych intów, co może spowodować spadek wydajności poprzez konieczność emulacji;
  • try, catch, finally działają poprawnie, jednak Throwable.getStackTrace() nie jest dostępne;
  • niektóre wyjątki nie występują w trybie web, np. NullPointerException, StackOverflowException czy OutOfMemoryException;  zamiast nich rzucany jest wyjątek JavaScriptException; takie zachowanie wynika z niemożności zmapowania odpowiedniego wyjątku JavaScriptowego na wyjątek Javy;
  • multithreading – interpretery JavaScript są jednowątkowe, a zatem, choć GWT akceptuje „synchronized” to tak naprawdę nie robi ono nic specjalnego; inne wsparcie wielowątkowości jak wait() notify() nie jest dostępne;
  • wykorzystywanie mechanizmu refleksji – ponieważ GWT nastawione jest na maksymalną optymalizację i szybkość działania dynamiczne ładowanie bibliotek nie jest dostępne; jednocześnie dostępna jest metoda getClass().getName();
  • strictfp nie jest dozwolone w GWT

Oto pakiety które zawierają klasy dostępne w aplikacjach GWT (w niektórych przypadkach tylko niektóre fragmenty pakietu) to

W ramach utrzymania pewnych funkcjonalności GWT udostępnia klasy

  • com.google.gwt.i18n.client.DateTimeFormat: obsługuje część funkcjonalności java.util.DateTimeFormat.
  • com.google.gwt.i18n.client.NumberFormat: obsługuje część funkcjonalności java.util.NumberFormat.
  • com.google.gwt.user.client.rpc.IsSerializable : interfejs spełniający rolę java.io.Serializable wykorzystywana przez GWT do wywoływania zdalnych procedur (RPC)
  • com.google.gwt.user.client.Timer : uproszczona klasa java.util.Timer, (z powodu jednowątkowości)

GWT wydaje się być ciekawą alternatywą dla standardowej budowy interfejsów za pomocą elementów HTMLowych. W wolnych chwilach warto poeksperymentować i zobaczyć, co Google może wnieść do tematu budowania aplikacji internetowych.

Bibliografia:

- http://code.google.com/intl/pl/webtoolkit/

]]> http://blog.atena.pl/wstep-do-gwt/feed 2 Eyetracking – badania użyteczności http://blog.atena.pl/eyetracking-badania-uzytecznosci http://blog.atena.pl/eyetracking-badania-uzytecznosci#comments Fri, 29 May 2009 12:20:22 +0000 Damian Zalesko http://blog.atena.pl/?p=408 Podczas udziału w konferencji InfoShare 2009 w Gdańsku. Miałem możliwość przetestowania eyetrackera. Urządzenie to służy do pomiaru zarówno punktu skupienia jak i ruchu oka. „Eye tracke-ów” używa się w systemach graficznych, psychologii, czytaniu i projektowaniu produktów. Istnieją różne sposoby pomiaru pozycji oka. Najbardziej popularne jest określanie pozycji oka na podstawie obrazu z kamer. Z takim to systemem miałem do czynienia na konferencji. Obraz z kamer poddaje się obróbce cyfrowej i w ten sposób oblicza się pozycję wzroku na danym obiekcie. W testowanym przeze mnie przypadku była to strona Web i grafika z ponętną modelką :) .

Głównym celem eyetrackera jest badanie użyteczności produktu.
Ma kluczowe znacznie w przypadku stron internetowych oraz aplikacji. Bez względu na to czy myślimy o użyteczności jako funkcji komunikacji marketingowej czy procesu interakcji z aplikacją. Użyteczność pozwala w lepszy sposób dotrzeć użytkownikowi do informacji oraz podnieść jego poziom zadowolenia z kontaktu z serwisem.
żródło: http://eyetracking.pl/pl/102/Uzytecznosc

eyetracking_1
Główne korzyści:

  • Łatwiejsze i bardziej intuicyjne korzystanie z aplikacji
  • Oszczędzenie czasu użytkowników
  • Mniejszy wskaźnik ucieczki ze strony
  • Większa skuteczność przekazu marketingowego
  • Lepsza dostępność informacji




źródło: http://www.blackboxglobal.com/usability-methods.html

Aby uzyskać naprawdę wartościowe wyniki badań, konieczne jest ścisłe określenie grupy docelowej oraz zadanie odpowiednich pytań i dobranie do nich adekwatnych metod prezentacji wyników. Tylko umiejętność szczegółowego zidentyfikowania problemu i dobranie odpowiedniego scenariusza badania, prowadzi do rozwiązania problemu. Pamiętajmy też o tym, że zdiagnozowanie problemu to jedynie pół drogi do jego wyeliminowania. Poprawiony element także powinien być poddany badaniom.

Zależnie od potrzeb badania prowadzone są eyetrackerem stacjonarnym lub mobilnym. Wynikiem badania powinien być raport zawierający wnioski, uwagi i zalecenia mające na celu podniesienie wartości użytkowej testowanego elementu. Zależnie od kontekstu badawczego dowiemy się się:

  • Jakie elementy rozpraszały uwagę badanego
  • Jakie których elementów i dlaczego nie mógł on znaleźć
  • Czy przekaz czytelne
  • Czy zachowanie badanego było zgodne z przewidywaniami
  • Czy elementy były w miejscach w których badany sie tego oczekiwał

Obrazowe przedstawienie wyniku badań:

mapy cieplna
Mapa ciepła pokazuje jak długo użytkownik patrzy na różne części strony Web. Miejsca gdzie użytkownik patrzył najdłużej oznaczone są kolorem czerwonym. Żółte i zielone obszary były proporcjonalnie rzadziej obserwowane. Szary obszarto obszar nieodwiedzony przez wzrok użytkownika.

eyetracking_3
źródło: http://stephenslighthouse.sirsi.com

mapy przejść wzroku
Mapa przejścia pokazuje nam jak wędrował wzrok użytkownika i gdzie się zatrzymywał. Miejsca zatrzymania wzroku oznaczone są okręgami. Czym większy jest okrąg tym dłużej czasu spędził tam użytkownik.
eyetracking_2
źródło: http://www.smashingmagazine.com/tag/eye-tracking

Jak widzimy zastosowanie eyetrackera może przynieść wymierne korzyści zarówno w aplikacjach webowych jak i stacjonarnych. Szybsze znalezienie poszukiwanej treści i bardziej ergonomiczne ułożenie klawiszy funkcyjnych w aplikacji pozwala zaoszczędzić cenny czas i obniżyć poziom flustracji użytkowników.

]]> http://blog.atena.pl/eyetracking-badania-uzytecznosci/feed 0 10 powodów dlaczego prototypowanie jest ok http://blog.atena.pl/10-powodow-dlaczego-prototypowanie-jest-ok http://blog.atena.pl/10-powodow-dlaczego-prototypowanie-jest-ok#comments Wed, 29 Apr 2009 20:26:18 +0000 Marcin Śpiewak http://blog.atena.pl/?p=255 Wielu z nas używa prototypów nie zdając sobie z tego sprawy. Prototypy mogą być tworzone na różnym poziomie dokładności. Od prostych szkiców na kartce, po rozbudowane fragmenty aplikacji zasilane z baz danych. Ważne jest dobranie odpowiedniego narzędzia do celów, które chcemy osiągnąć. Poniżej kilka argumentów, które mogą pomóc w odpowiedzi na pytanie czy warto „marnować czas na prototypy”…

  1. Jeden obraz zastępuje tysiąc słów
  2. Można szybciej naszkicować stronę niż ją opisać w Wordzie
  3. Analizy biznesowe nie uwzględniają usability
  4. Prototyp na wysokim poziomie może potwierdzić możliwość wytworzenia aplikacji
  5. Prototyp może służyć jako proof of concept podczas ustalania szczegółów
  6. Prototypy pozwalają na testy z użytkownikami na wczesnym etapie wytwarzania
  7. Tworzenie prototypu wymusza komunikację między projektantami, webmasterami, analitykami i klientem
  8. Prototyp nie powinien obejmować całego serwisu tylko wybrane elementy (jako uzupełnienie/ilustracja analizy)
  9. Klientowi łatwiej zweryfikować i zaakceptować analizy z widokami
  10. Możemy tanio stworzyć kilka alternatywnych rozwiązań

Do prototypowania, zależnie od wymaganego poziomu dokładności, używamy:

  • Kartki papieru i ołówka
  • Axure RP Pro 5
  • Adobe Fireworks
  • Środowiska testowego

Więcej na temat doboru poziomu dokładności: Balancing fidelity in prototyping

]]> http://blog.atena.pl/10-powodow-dlaczego-prototypowanie-jest-ok/feed 0 Nie Każ Mi Myśleć – Lektura obowiązkowa http://blog.atena.pl/nie-kaz-mi-myslec-lektura-obowiazkowa http://blog.atena.pl/nie-kaz-mi-myslec-lektura-obowiazkowa#comments Fri, 10 Apr 2009 07:55:42 +0000 Marcin Śpiewak http://blogtechnologiczny.home.pl/?p=208 don't make me think

„O życiowym podejściu do funkcjonalności stron internetowych” – podtytuł książki mówi sam za siebie. Autor opisuje podstawowe zasady projektowania serwisów WWW. Radzi jak unikać pospolitych błędów. Osobne rozdziały zostały poświęcone architekturze informacji oraz testowaniu użyteczności (usability).

Mimo iż książka ma już kilka lat, to starzeje się z godnością i można ją śmiało polecić wszystkim, którzy zajmują się wytwarzaniem aplikacji webowych.

Do lektury zachęcam zwłaszcza deweloperów, poznanie kilku zasad rządzących interfejsami pozwoli im na wytwarzanie lepszych aplikacji, ułatwi komunikacje z projektantami i webmasterami. Całość ma 200 stron, zatem nie powinna zająć zbyt dużo cennego czasu. Wersja angielska zawiera kolorowe ilustracje, niestety w Polsce została wydana jako czarno-biała.

Steve Krug „Nie Każ Mi Myśleć. O życiowym podejściu do funkcjonalności stron internetowych” Wydanie 2, Helion 2006

]]> http://blog.atena.pl/nie-kaz-mi-myslec-lektura-obowiazkowa/feed 0