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:

– HTML5 Canvas,

– SVG.

2/16

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/16

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/16

Wymagania projektowe c.d.

• Możliwości c.d.:

– definiowanie przejść pomiędzy makietami –

interaktywność,

– śledzenie zmian, komentowanie w czasie rzeczywistym.

• Opcjonalnie:

– dodawanie własnych elementów (symboli) do biblioteki,

– eksport do PDF, JPG, HTML,

– wersjonowanie projektów. 5/16

Prototyp

• Prototypowanie: Strategia efektywnego radzenia

sobie

z rzeczami, które są trudne do przewidzenia.

• Prototyp:

– często niekompletny,

– łatwy w modyfikacji,

– szybko się „starzeje”. 6/16

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?).

7/16

Prototyp c.d.

• Mockup

- statyczny.

• Wireframe.

- dynamiczny.

• Prototype.

- dokładny.

8/16

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ść.

8/16

Manipulacja grafiką: SVG c.d.

• Przykład: <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<defs>

<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"

/>

<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"

/>

</linearGradient>

</defs>

<ellipse cx="200" cy="70" rx="85" ry="55”

fill="url(#grad1)" />

</svg> 10/16

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/16

Manipulacja grafiką: Canvas c.d.

• Przykład:<canvas id="myCanvas" width="200" height="100”>Rect</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"#ffff00");

grd.addColorStop(1,"#ff0000");

ctx.fillStyle=grd;

ctx.fillRect(0,0,200,100);

</script>

12/16

Wydajność SVG i Canvas

• Różna liczba

obiektów

13/16

Wydajność SVG i Canvas

• Różna wielkość powierzchni rysowania:

14/16

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

15/16

Łukasz Przywarty 171018

System webowy do tworzenia kolektywnych prototypów

aplikacji sieciowych i mobilnych