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

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

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

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

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

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

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

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

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

Manipulacja grafiką: SVG Grafika 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

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

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

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

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

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

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

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

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

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