1 / 16

System webowy do tworzenia kolektywnych prototypów aplikacji sieciowych i mobilnych

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.

jackson-pearson
Download Presentation

System webowy do tworzenia kolektywnych prototypów aplikacji sieciowych i mobilnych

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Ramowy plan prezentacji • Omówienie tematu. • Wymagania projektowe. • Słowo na temat prototypowania. • Manipulacja grafiką w przeglądarce: • HTML5 Canvas, • SVG. 2/16

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

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

  5. 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

  6. Prototyp • Prototypowanie: Strategia efektywnego radzenia sobiez rzeczami, które są trudne do przewidzenia. • Prototyp: • często niekompletny, • łatwy w modyfikacji, • szybko się „starzeje”. 6/16

  7. 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świadczeniaw użytkowaniu może zapewniać system?). 7/16

  8. Prototyp c.d. • Mockup- statyczny. • Wireframe.- dynamiczny. • Prototype.- dokładny. 8/16

  9. 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

  10. Manipulacja grafiką: SVG c.d. • Przykład: <svgxmlns="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

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

  12. Manipulacja grafiką: Canvas c.d. • Przykład: <canvasid="myCanvas" width="200" height="100”>Rect</canvas> <script> varc=document.getElementById("myCanvas"); varctx=c.getContext("2d"); vargrd=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

  13. Wydajność SVG i Canvas • Różna liczba obiektów 13/16

  14. Wydajność SVG i Canvas • Różna wielkość powierzchni rysowania: 14/16

  15. Bibliografia • Cecco R., SuperchargedJavaScriptGraphics, 2011 • Dailey D., Building Web Applicationswith SVG, 2012 • Fulton S., HTML5 Canvas, 2011 • MacCaw A., JavaScript Web Applications, 2011 15/16

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

More Related