tytuł prezentacji

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