Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 30 Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie Teamsketch (20)

Weitere von Educational Technology (20)

Anzeige

Aktuellste (20)

Teamsketch

  1. 1. Institute of Information Systems and Computer Media (IICM) 1 Michael Spitzer Graz, 2015/01/22 Teamsketch Teamsketch Master’s Thesis Presentation Michael Spitzer
  2. 2. Institute of Information Systems and Computer Media (IICM) 2 Michael Spitzer Graz, 2015/01/22 Teamsketch Overview •  Introduction •  Motivation •  Research goal •  Project environment •  iPad App •  Web Service •  Web Interface for students and teachers •  Field study at a primary school •  Conclusion
  3. 3. Institute of Information Systems and Computer Media (IICM) 3 Michael Spitzer Graz, 2015/01/22 Teamsketch Introduction Teamsketch •  Sketch app for iPad •  2-4 drawers •  One sketch together simultaneously
  4. 4. Institute of Information Systems and Computer Media (IICM) 4 Michael Spitzer Graz, 2015/01/22 Teamsketch Motivation •  Train collaboration •  Develop and improve team skills Collaboration: “A group of people tries to learn something together” [Dillenbourg, 1999] Teamwork
  5. 5. Institute of Information Systems and Computer Media (IICM) 5 Michael Spitzer Graz, 2015/01/22 Teamsketch Research goal •  Prototype drawing app for iPad •  One real-time sketch, 2-4 drawers simultaneously •  Observation of collaborative learning capabilities •  Field test at a primary school
  6. 6. Institute of Information Systems and Computer Media (IICM) 6 Michael Spitzer Graz, 2015/01/22 Teamsketch Project environment User management SOAP Teamsketch SOAP
  7. 7. Institute of Information Systems and Computer Media (IICM) 7 Michael Spitzer Graz, 2015/01/22 Teamsketch iPad app Requirements: •  No WiFi infrastructure necessary •  No server - multi peer infrastructure •  Bluetooth support •  Real-time sketch update •  Line smoothing, curve fitting algorithms •  2-4 drawers simultaneously •  User management (optional) •  Sketch up- and download (optional)
  8. 8. Institute of Information Systems and Computer Media (IICM) 8 Michael Spitzer Graz, 2015/01/22 Teamsketch Frameworks Environment: xCode 6 / Swift Frameworks: •  Foundation Framework (HTTP connections, XML parser, …) •  Multipeer Connectivity Framework (Network communication) •  UIKit / Core Graphics (Graphic related APIs)
  9. 9. Institute of Information Systems and Computer Media (IICM) 9 Michael Spitzer Graz, 2015/01/22 Teamsketch Architecture Main screen Login Join sketch New sketch Browser Drawing Store sketchAbort sketch
  10. 10. Institute of Information Systems and Computer Media (IICM) 10 Michael Spitzer Graz, 2015/01/22 Teamsketch Architecture – user management Main screen Login Join sketch New sketch Browser Drawing Store sketchAbort sketch
  11. 11. Institute of Information Systems and Computer Media (IICM) 11 Michael Spitzer Graz, 2015/01/22 Teamsketch Architecture – multi peer connection Main screen Login Join sketch New sketch Browser Drawing Store sketchAbort sketch
  12. 12. Institute of Information Systems and Computer Media (IICM) 12 Michael Spitzer Graz, 2015/01/22 Teamsketch Multi peer connection Advertiser •  Wants to join a session •  Accepts/declines invitations Browser •  Browses all nearby advertising devices •  Invites to session
  13. 13. Institute of Information Systems and Computer Media (IICM) 13 Michael Spitzer Graz, 2015/01/22 Teamsketch Architecture – sketch screen Main screen Login Join sketch New sketch Browser Drawing Store sketchAbort sketch
  14. 14. Institute of Information Systems and Computer Media (IICM) 14 Michael Spitzer Graz, 2015/01/22 Teamsketch Sketch screen •  12 colors •  2 stroke widths •  Zoom (2x) •  Line guides
  15. 15. Institute of Information Systems and Computer Media (IICM) 15 Michael Spitzer Graz, 2015/01/22 Teamsketch Drawing Algorithms Shown on the blackboard Shapes: •  One touch circle (touchesBegan – touchesEnded) •  Stroke (touchesBegan – touchesMoved – touchesEnded) •  Bezier Segment – cubic Bezier curve
  16. 16. Institute of Information Systems and Computer Media (IICM) 16 Michael Spitzer Graz, 2015/01/22 Teamsketch Video demonstration
  17. 17. Institute of Information Systems and Computer Media (IICM) 17 Michael Spitzer Graz, 2015/01/22 Teamsketch Web service Requirements: •  Authentication against already existent user management •  Students - Sketch up- and download •  1 profile picture (2 resolutions) •  3 sketches (2 resolutions) •  Teacher – Sketch access (students in class)
  18. 18. Institute of Information Systems and Computer Media (IICM) 18 Michael Spitzer Graz, 2015/01/22 Teamsketch Frameworks / architecture •  LAMP •  PHP with SOAP extension •  WSDL
  19. 19. Institute of Information Systems and Computer Media (IICM) 19 Michael Spitzer Graz, 2015/01/22 Teamsketch Web interface •  PHP •  SOAP client with WSDL •  HTML •  Smarty template engine (PHP) •  presentation layer •  Compiled (cache) •  Open source
  20. 20. Institute of Information Systems and Computer Media (IICM) 20 Michael Spitzer Graz, 2015/01/22 Teamsketch Web interface •  Profile picture (thumbnail) •  Sketches •  Thumbnail •  High resolution download
  21. 21. Institute of Information Systems and Computer Media (IICM) 21 Michael Spitzer Graz, 2015/01/22 Teamsketch Field test Primary school – 3rd grade Test setting: •  Teams with 2,3 or 4, members selected by the teacher •  All team members at one big desk (face-to-face communication) •  Heterogenic device network (iPad 2,3,4 and iPad Air)
  22. 22. Institute of Information Systems and Computer Media (IICM) 22 Michael Spitzer Graz, 2015/01/22 Teamsketch Test setting x x
  23. 23. Institute of Information Systems and Computer Media (IICM) 23 Michael Spitzer Graz, 2015/01/22 Teamsketch Test procedure •  Short introduction •  Group of four è two groups of two •  Sketch topic •  Drawing •  Groups of two merged to group of four •  Sketch topic •  Drawing •  Reflection
  24. 24. Institute of Information Systems and Computer Media (IICM) 24 Michael Spitzer Graz, 2015/01/22 Teamsketch Field test evaluation Video: Sketch video (groups of 2,3) Macbook joined active session è video recording Images: Screenshots of the finished sketches Audio: Transcription of children’s discussions while drawing Children’s and teacher’s feedback: Questionnaire
  25. 25. Institute of Information Systems and Computer Media (IICM) 25 Michael Spitzer Graz, 2015/01/22 Teamsketch Sketch examples
  26. 26. Institute of Information Systems and Computer Media (IICM) 26 Michael Spitzer Graz, 2015/01/22 Teamsketch Field test - lessons learned •  Collaboration •  Some children did not like drawing together •  Felt pen switching process was not intuitive •  Felt pen color change too sensitive •  White felt pen VS rubber •  Zoom function was not used •  Clear sketch issue
  27. 27. Institute of Information Systems and Computer Media (IICM) 27 Michael Spitzer Graz, 2015/01/22 Teamsketch Conclusion - challenges •  App programming with new language (beta) •  Literature •  Experience •  Performance •  Time critical multi-threading programming with heterogenic device support (iPad 3) •  Programming for outdated infrastructures •  Interface app çè web service •  User interface for children
  28. 28. Institute of Information Systems and Computer Media (IICM) 28 Michael Spitzer Graz, 2015/01/22 Teamsketch Conclusion – Summary þ Collaborative iPad sketch app for 2-4 players with real-time screen updates þ No network infrastructure needed þ Collaborative learning, team work capabilities confirmed during field test
  29. 29. Institute of Information Systems and Computer Media (IICM) 29 Michael Spitzer Graz, 2015/01/22 Teamsketch Conclusion - what’s next ? •  Improvement of the app (feedback from field test) •  Presentation at the EdMedia 2015 - World Conference on Educational Media and Technology in Montréal, Québec, Canada (June 2015) •  Development of a commercial collaborative sketch application aimed at designers.
  30. 30. Institute of Information Systems and Computer Media (IICM) 30 Michael Spitzer Graz, 2015/01/22 Teamsketch End Thank you! References Dillenbourg, Pierre (1999). Collaborative learning: cognitive and computational approaches. 2nd Revised Edition. Emerald Group Publishing Limited.

×