1. Educational Graphical and Tangible
Programming Platform using Rich Client
Platform development
Sancho Oliveira Pedro M. Dias
sancho.oliveira@iscte.pt petermdias@gmail.com

2. Summary
 Motivation
 What it is?
 Strategy
 Visual Language
 Tangible interface
 Field tests
 Published work
 Questions

3. Motivation
 Traditionally programming is learned/taught with industrial tools.
 Borland C++
 Visual Studio
 Eclipse
 Others…
 Textual representation is a problem for beginners
 Removing the language complexity from the learning process.
○ If, se, si, wenn, если, ?
○ Eyes don’t have language.
 Understanding the results – Tangible interface
 Student needs to know how to read the results in order to grade them.
 Botbeans shows the results.
○ Robot interacting with the real world.
 Starting point to object-oriented languages
 Basic control structures.

4. What it is?
 Environment to teach and learn computer
programming.
 Graphical representations for basic control
structures.
 Graphical display of memory.
 Hybrid display for logic representation.
 Tangible interface
 Collaboration catalyzer
 Motivation

5. Strategy
1. Complexity
 Solution:
○ Visual language
 Better understanding of the algorithm.
1. Lack of motivation
 Solution:
○ Tangible interface
 Keep the student emerged and motivated.
 Seed collaboration between students.
2. Initial fear
 Solution:
○ Rich Client Platform
 IDE without any interface cluttering.
 Avoid information overload.

7. Diagrammatic/node based
 Positive
 Obvious logic flow
 Function
representation
 Negative
 Textual data-types
 Textual logic and
mathematical
expressions

8. Block based
 Positive
 Data types validation
 Block enclosing
 Negative
 Logic flow not so
obvious
 Complexity grows
quickly with the
problem.

9. Hybrid solution
 Block-based
 "In graphical block programming, users
manipulate and connect puzzle-piece objects to
build their programs.“
 "allowing only complementary blocks to connect
prevents users from making syntax errors“
○ R.V. Roque, “OpenBlocks : an extendable
framework for graphical block programming
systems.”
 Node-based
 "learning a programming language is easier if
people who are visual learners by nature began
by learning a data flow programming language“
 "The concepts of CGs are easily matched to
those found in textual programming languages“
○ B. Smith, “Conceptual graphs as a visual
programming language for teaching
programming,” Visual Languages and Human-
Centric Computing, 2009. VL/HCC 2009. IEEE
Symposium on, 2009, pp. 258-259.

10. Graphical Interface

11. Expression builder
 On top off MIT
OpenBlocks
 Heavy
customized.
○ Dynamic Blocks
language
definition.
○ Off-screen
rendering.
 Used in Scratch
and Google App
Inventor

14. Tangible interface
 How to output in Botbeans?
 Robot’s actions
○ Robot movement.
○ Robot small display.
○ Robot speaker.
 Input?
 Sensors connected to robot.
 Understanding the results
 Did the robot crash?
 Did it turned left instead of right?
 …
 Multiple points of interaction with the learning tool
 Screen for visual programming
 Robot for input, output and debug.

15. Tangible interface
 "the use of the tangible interface results in a more child-
focused activity. In other words, children seem to be more
actively involved and self-motivated“
 "tangible interface is more inviting and provides better
support for active collaboration“
 "if for no other reason than the tangible interface consists
of multiple input devices that can be manipulated
independently, while the graphical condition consists of
only a single input device."
 M.S. Horn, E.T. Solovey, R.J. Crouser, e R.J.K. Jacob, “Comparing
the use of tangible and graphical programming languages for
informal science education,” Proceedings of the 27th international
conference on Human factors in computing systems, New York, NY,
USA: ACM, 2009, pp. 975–984.

16. Tangible Interface
FCCT 2011 at IPT.pt

17. Field tests
FCCT 2011 at IPT.pt

18. Field tests
Do you think this experience has the potential to
motivate / cativate students?
14
15
10
5
0 1
0
Low Average High
Characterize your students participation in the
experience
10 8
5
5
1 1
0
Insuficient Suficient Good Very Good
FCCT 2011 at IPT.pt

19. Published work
 Related work
 A. Manso, C. Marques, P. Dias - Portugol IDE v3.x- A new environment to teach
and learn computer programming – Published in IEEE Engineering Education
2010, Madrid, Spain , 14-16 April 2010.
 A. Manso, P. Dias, C. Marques, Ensino e aprendizagem de algoritmia com a
ferramenta Portugol IDE - Published in XI International Conference on Engineering
and Technology Education - Ilhéus bahia, Brazil, 7-10 March 2010.
 Technical article
 Simplified IDEs for Teaching Programming on the NetBeans Platform -
http://netbeans.dzone.com/nb-simplified-ide-for-learning-to-program
 Presentations
 Botbeans - OSDOC 2010 - http://www.slideshare.net/pedromadias/botbeans-
osdoc2010
 Portugol - Educon 2010 - http://www.slideshare.net/pedromadias/portugol-
educon2010
 http://www.dei.estt.ipt.pt/portugol/
 http://www.botbeans.com (coming soon)