1 System webowy do tworzenia kolektywnych prototypów aplikacji sieciowych i mobilnychŁukasz Przywarty

2 Ramowy plan prezentacjiOmówienie tematu. Wymagania projektowe. Słowo na temat prototypowania. Manipulacja grafiką w przeglądarce. Aplikacja – funkcje, budowa. 2/19

3 Omówienie tematu System webowy – aplikacja internetowa.Do tworzenia kolektywnych – możliwość współtworzenia projektów w czasie rzeczywistym. Prototypów aplikacji sieciowych i mobilnych – wyjście: interaktywne makiety (modele) innych systemów (webowych i mobilnych). 3/19

4 Wymagania projektowe Rodzaj aplikacji: internetowa.Cel działania: tworzenie projektu zawierającego minimum 1 makietę systemu webowego lub mobilnego. Możliwości: tworzenie nowego projektu i makiety, umieszczanie na makiecie predefiniowanych elementów systemu (pola tekstowe, obrazy, pola wybory etc.) – ‘drag and drop’, modyfikacja elementów (kolor, kształt, pozycja etc.), 4/19

5 Wymagania projektowe c.d.Możliwości c.d.: definiowanie przejść pomiędzy makietami – interaktywność, śledzenie zmian, komentowanie w czasie rzeczywistym. Opcjonalnie: eksport do PDF, JPG, HTML, wersjonowanie projektów. 5/19

6 Technologia Node.js 0.10.10 - pakiety: express, jade, less, socket.io,Redis , JavaScript – jQuery i inne, HTML5, CSS3. 6/19

7 Prototyp Prototypowanie: Strategia efektywnego radzenia sobie z rzeczami, które są trudne do przewidzenia. Prototyp: często niekompletny, łatwy w modyfikacji, szybko się „starzeje”. 7/19

8 Prototyp c.d. Cele prototypowania:model wyglądu (jak system może wyglądać?), model funkcjonalności (jak system może działać?), model doświadczeń (jakie doświadczenia w użytkowaniu może zapewniać system?). 8/19

9 Prototyp c.d. Mockup - statyczny. Wireframe. - dynamiczny.Prototype. - dokładny. 9/19

10 Manipulacja grafiką: SVGGrafika wektorowa: statyczna, dynamiczna, interaktywna, animowana. Model obiektowy (XML) – elementy, atrybuty, style (podobnie jak w HTML). Elementy graficzne jako części drzewa DOM. Modyfikacja: CSS oraz skrypty. Dostępność. 10/19

11 Manipulacja grafiką: CanvasBitmapa. Oparty o piksele (element w postaci obrazka z graficznym API). Pojedynczy element drzewa DOM – podobnie jak . Modyfikacja: tylko skrypty. Stosowany do: generowania grafiki rastrowej (gry), edycji obrazów etc. 11/19

12 Wydajność SVG i Canvas Różna liczba obiektów 12/19

13 Wydajność SVG i Canvas Różna wielkość powierzchni rysowania: 13/19

14 Funkcje Część default obsługa użytkownika: logowanie, tworzenie nowego konta etc., zarządzanie projektami i makietami: usuwanie, edycja parametrów, tworzenie nowego projektu i makiety w projekcie, zarządzanie użytkownikami w projekcie. 14/19

15 Funkcje c.d. Część edit edycja makiety: rozmiar, nazwa, wyświetlanie siatki, wybór elementów (np. button) z listy i umieszczanie ich na makiecie (drag&drop), modyfikacja parametrów elementu: kolor, rozmiar, kolejność wyświetlania na makiecie, pozycja na makiecie, blokowanie i wyrównywanie elementów – względem siebie oraz siatki, definicja przejść pomiędzy makietami. 15/19

16 Ograniczenia Do korzystania z systemu wymagane połączenie z Internetem. Pewne trudności w instalacji i rozwoju systemu – niszowa technologia. Ograniczone możliwości zmiany wyglądu elementów – elementy predefiniowane. 16/19

17 Perspektywy rozwoju Dodanie nowych funkcjonalności:komentarze użytkowników, dodawanie własnych elementów (symboli) do biblioteki. Rozszerzenie bazy elementów prototypowych Zwiększenie interaktywności – akcje po najechaniu na element, animacje etc. 17/19

18 Bibliografia Cecco R., Supercharged JavaScript Graphics, 2011Dailey D., Building Web Applications with SVG, 2012 Fulton S., HTML5 Canvas, 2011 MacCaw A., JavaScript Web Applications, 2011 18/19

19 System webowy do tworzenia kolektywnych prototypów aplikacji sieciowych i mobilnychŁukasz Przywarty