14 Web-Application for Engineering Graphics – An Example of a Distance Learning Tool

The new global communication systems and their integration in all media communication, together with their potential interactivity, are changing our culture and are introducing new questions and challenges in the educative system. The teaching practices are strongly impacted by the development of the new technologies, not only because they influence the professional skills of the teachers, but also because of the roll they have assumed in the global university context.


Introduction
The new global communication systems and their integration in all media communication, together with their potential interactivity, are changing our culture and are introducing new questions and challenges in the educative system.The teaching practices are strongly impacted by the development of the new technologies, not only because they influence the professional skills of the teachers, but also because of the roll they have assumed in the global university context.
Although these new techniques are arising in the last years in the university education, the teaching-learning processes are based mostly on that of the 15th century.There is still a dominance of printed over the audiovisual and computer media in the transmission of knowledge.
The idea is then, how to incorporate, in a pedagogical way, these new technologies as useful tools for the presence and distance learning.The possibilities that the virtual environments offer, as potential spaces of collaboration for the learning processes and also for the professional training, are only an example of the great opportunities of these new technologies in the university education.
The use of computer systems for the development of teaching activities is quite recent, but the evolution of their use is very fast.In fact, in a short period of time (few years) the computers have changed their use from being the helping tool of the teachers in the classrooms to being the main character in the distance learning process through the wide world web, in what is called the e-learning.
The distance learning or the e-learning is a new way of education developed thanks to the new information technologies and internet.It is based on the easy distribution of educational materials and communication tools to create a learning frame.There are plenty of definitions for distance learning, but all of them are based in the same idea: it can be thought of as education or training delivered to individuals who are geographically dispersed or separated by physical distance from the instructor using computer and telecommunication facilities (Bélanger & Jordan, 2000) or as other authors describe, it is a process to create and provide access to learning when the source of information and the learners are separated by time and distance, or both (Honeyman & Miller, 1993).It also can refer to a type of education where students work on their own at home or at the office and communicate with faculty and other students via e-mail, electronic forums, videoconferencing, chat rooms, bulletin boards, instant messaging and other forms of computer-based communication as the United States Distance Learning Association says (USDLA, 2011).
This technology allows the student to access to interactive and multimedia web courses supported on communication media and allows the on-line collaboration and change of the studied materials.At the same time, it guaranties the tuition education by an expertise that follows the progress of the students, providing orientation and motivation and solving doubts among others.Through internet, the learning process is a just-in-time learning where and when the student needs it.This is one of the main advantages of Internet: the users can get abilities and knowledge regardless of timetables and schedules and with no need of displacements from the office or from home.So the advantages of the e-learning can be summarized in three: time flexibility, cost efficiency for students, and a great number of users at the same time.

Distance learning of engineering graphics
When teaching basic subjects of undergraduate engineering courses, such as Descriptive Geometry and Technical Drawing, it is necessary to introduce new technologies that help the students learning.Learning can be achieved using the traditional face to face way or by the most recent remote way by means of what is called e-learning or distance learning.
One of the first things an undergraduate in engineering has to study, as part of the core matters of knowledge, is Technical Drawing or Engineering Graphics as the threedimensional (3D) perception of the students in those technical programs is based on Descriptive Geometry.Descriptive Geometry involves the study of different representation systems and more specifically the Orthographic Projection.The orthographic projection, derived from the Gaspard Monge Descriptive Geometry, gives the foundations of the Engineering Drawing and is usually included in most first years of engineering studies.The main disadvantage of the representation systems is that they are based on the work with the projections of the objects and not with the 3D objects directly.Therefore, the students have to develop, if they do not have, the ability to think spatially and operate in the plane in pencil and paper.
The traditional core technical subjects, as Technical Drawing, can be helped to be taught and, what is more important, to be understood by the students by the new technologies and by the new design tools.Any activity in this sense is not enough to help the students to acquire the skills to see and work in 3D.As any other undergraduate courses, Engineering Graphics has to adapt, as well, to the new procedures of distance learning.Many researchers and teachers are involved in this new trend but not many references have been found by the authors (Toledo & Rojas, 2001;Rubio et al., 2007;Morales et al., 2009;Rubio et al., 2010) in which the distance learning is applied to the aforementioned technical field.It is therefore very important to develop tools or/and web applications that allow the introduction of this kind of subjects to the distance learning through the Internet.
The main goal of distance learning in Engineering Graphics or Descriptive Geometry is to search for alternative methods to improve the education-learning process of multiple projection systems focused on high school or undergraduate university programs.Two aspects have to be taken into account:


From the student point of view: as mentioned before, the students have to cope with two realities, the objects and their projections.It is a pedagogical target to decrease the conceptual distance between them, as part of the Descriptive Geometry learning process.The student has to became the observer of the object positioning himself at different points of view and has to be able to establish the connection between the Orthographic Projection and the object and backwards, being able to see the reversibility of the process.At the end, the student has to develop the ability to communicate with a nonverbal language as it is the Technical Drawing.


From the teacher point of view: although Descriptive Geometry is based on clear conventions, which should create a very easy learning environment, difficulties arise due to the lack of 3D perception of the students.The animated presentations and drawings should be a perfect complement for the teaching activity as they allow short explanations with a very little amount of contents lost.

The methodology
To cover the aforementioned main aspects, a computer-aided tool that allows learning the foundations of Orthographic Projection (Monge Projection) has been developed.In a first stage the tool was thought to be used as a support in the classrooms for undergraduates in Engineering Bachelor Programs.In a second stage, due to the requirements of the students, the tool changed its target and was focused to the use on-line, taking advantage of the open access to the Internet with no special software requirements.

The web site
When designing and building a web site it is crucial to do a very good planning which includes establishing the aim and the scope very precisely, considering the potential audience, taking into account the available resources, and preparing a good navigation schedule inside the site (Marques, 2011;Pardo, 2011).
As everybody knows, the web navigation structure can be defined as the way the pages of the site are placed with respect to their links.The ability to capture audience in a web site depends on the design of the site itself.The best the design, the greater the audience.Any site design is based on pages as in a book, although the design of both structures is very different.In a book, the pages are chained and the procedure to find the information is to look for it in the index or through the lecture.In the web site, there are links between the pages so that the way to find the information is to jump from one page to another using those links.Therefore, the navigation system should be very clear in order to prevent the user to get lost and to facilitate the knowledge of where he or she is at any moment in order to come back to the initial position.The links between pages allow the classification of the navigation system in linear, hierarchical or complete (Fig. 1).The navigation system chosen for the created web site is the hierarchical one, which shape is like a branched tree.This type of navigation system is that recommended for sites with different but not many matters.Each branch of the tree is dedicated to a single part of information of the site.Generally, when a user gets to one of the head pages there are several links to the other pages and reversely, the navigation system usually has links to the head pages.

The software packages
Two different software packages have been used in order to develop this new web-site application for teaching Descriptive Geometry: Flash® and Dreamweaver®.A very short explanation on their use is done in the following sections.

Flash
The software Flash® (Reinhardt, 2004) is a commercial application whose main objective is to generate animations for the web using vectors.The properties of the software fit very well with the development of the project.On the one hand vector graphics are used and secondly, there is a direct interaction of the user with the animations.Flash ® works creating vector illustrations, that is, mathematical representations of straight lines, curve lines, colours and positions.One advantage of the vector illustrations is that the quality of the illustration does not depend on the resolution.Another advantage is that they have the ability to be downloaded very fast as their weight is really small compared with other illustrations with equivalent map of bits.Every example developed for the web application does not weight more than 80 Kb which is very interesting for the students because they can open them in an easy way, even with narrow band Internet.
There is still another advantage for the students and it is that the licence is needed for the creation of the files, or the exercises in our case, but not for the visualization of the files.Flash compiles the executable file .exeor the file .swfthat can be executed from the most known web navigators with just an open plugin available for most of them.The estimations are that 80 % of the computers can visualize Flash applications so that every documentation developed using Flash can be easily used by any student any where.

Dreamweaver
The software Dreamweaver® (Lowery, 2001) is also a commercial application that provides the user with many tools that help very much in the activity of the design and the creation of web sites.With this kind of software the user is able to create very complex web sites, with thousands of pages, animations and sounds with very little knowledge on programming.In the development of this web site, the authors have used the Cascade Style Sheets (CSS) as they improve the web documents design and presentation.In general, the Style Sheet is a set of instructions that indicates how the pages should appear or how the contents should be shown within them.Any change in the style sheet will produce an immediate change in the appearance of the pages no need to do it in each one.In this way, contents and appearance are completely separated, which helps very much the design work.

Objectives
The main objective of the web site is the on-line publication of tutorials for the Descriptive Geometry study.The potential users of the web site are undergraduate students of engineering and students of Descriptive Geometry in general (Rodriguez de Abajo, 2007; Rubio & Muñoz-Abella, 2011).
The tutorials are divided into theoretical resumes of the fundamentals of Orthographic Projection (Monge Projection) and a collection of exercises with animated step by step solutions, that helps the students to understand de course.The application presented here gives support to the master classes as intended, and also allows the utilization in the elearning process, or the distance learning, by those students who are far away from the teaching places.
As mentioned before, the application merges the use of two commercial software packages which allows first, the preparation of the animations of the exercises in light and easy-to-use files, and secondly, the organization of the contents in a very friendly web site.
Together with the animated 2D solutions of the exercises, the application shows the 3D animated solutions, that constitutes an original contribution to the web applications on the field of Descriptive Geometry teaching.

Structure
The web site is divided into three parts: main page, theoretical concepts and solved exercises (Fig. 2).
The main page is the home of the web site and can be considered as the main entrance to the web application.In Fig. 3 a) and b) both versions in Spanish and in English are shown.In this first page, as can be seen, the objectives of the application are given.This page is intended also to give the instructions for the use of the application in a very short and easyto-understand manner.In the top and in the left side of the main page a set of buttons allows the navigation to the different pages and places of the site.Those at the top are the links to the theoretical resumes and those at the left side guide the users to the animated step by step solutions of the exercises.
The second part of the web site is devoted to the theoretical resumes of the Orthographic Projection.The resumes are organized in pages by sections with the fundamentals of the subject.So, there is a section or a page for the fundamentals related with the point, there is another one for the straight line, for the plane and so on.As mentioned before, the way to move from one section to another is making use of the buttons at the top of the page.An example of this theoretical part is shown in Fig. 4.  The explained application can be used by any student providing he knows the link and, as it was said before, the application is used by our students as a distance tool for their personal work, especially enhanced within the European Higher Education Area (EHEA) and the reforms of the Bologna Process introduced recently in most of the European Universities.
For the distance learning usage, the application is included on a platform in which the contact with students is done permanently through e-mail and electronic forums supervised by professors.

Example exercise
The most interesting part of the web site is the analysis of the step by step animated solutions of the selected exercises, fifteen in total.Each exercise is explained along the animation in each step.In order to explain how the application is organized, different snapshots of the solutions of one exercise, taken as an example, are going to be shown.
The step by step solution for the aforementioned exercise is shown in Figures 5 to 12.Each figure is a single image of the sequence of the animated solution that the student can follow, and as can be seen, contains some simple messages that help to understand the examples and the theory involved.In all these snapshots, the original colours of the application have been changed for the sake of clarity of the figures.
For example Fig. 5 is the first image of the exercise and contains the statement of a problem corresponding to the section of "plane figures" or "2D shapes".From Fig. 6 to Fig. 12 different snapshots of the animated solutions are presented.In each one, the part of the drawing corresponding to the current step is coloured in light colours (originally in orange in the application) while the previously drawn lines are represented in black.When a step has finished, a little arrow in the right bottom corner of the screen is illuminated in green, which indicates that the new step can start.In this way, the students can think or imagine, before starting the new animation sequence, how the solution will continue.The end of the proposed 2D exercise solution is shown in Fig. 12.In this snapshot, every line represented during the previous step in now drawn in black.
Once the problems have been solved in the 2D option, all the exercises proposed in the web site are solved, for a better understanding and following the same steps which guided the 2D solution, but in a 3D animation.The example of the 3D animation of the same exercise is shown in the snapshots from Fig. 13 to 19.The 3D animated solution is a particularly interesting characteristic of the application because it helps the students to connect the 2D solutions of the problems, which are those they have to draw in pencil and paper, with the real 3D problem.
In Fig. 13 the transformation of the 2D statement to the 3D one is shown.

Analysis of the academic results
The web application has been used successfully during the two last years with undergraduate students of engineering programs within the Bologna Process in a number greater than 300 students per year.In fact, even though the application was thought, at first, as a tool to help the teachers in the master classes, the very good reception given by the students forced us to transform it into a web application which is the form it has at the moment.
The on-line tool has been of special interest to those students with no previous training in technical drawing.The application gives them the possibility of preparing the subject on their own rhythm, stopping whenever and wherever they need to focus on the different sections of the course.
A measure of the application success could just be the students request to create the web site, but a more accurate measure should be done.The academic results before and after the use of the application has been considered to evaluate the goodness of the application.The percentage of students that passes the subject every year can be a good indicator of the influence of the application.Obviously, the students of different years are not the same, and for that reason the academic results could not be really comparable; and on the other hand the application should not be the only influence factor in the academic results.Apart from the academic results and the requirement of the students to create the application, and also their oral feedback, no other indicator has been considered to analyze the goodness of the application.As an example, between 2004 and 2008 the percentage of students that passed the subject was between 35% and 40%.Since the year in which we started to use the tool (2009), there has been an increase in the results reaching values of 70%.But this is not the only good result, in these last years, the marks of the students that have passed the exams are higher than they used to be in the past.This can be considered also an indicator of the goodness of the tool.

Conclusion
The teaching of core subjects in undergraduate engineering programs has change in the last years due to the use of the new techniques and technologies.This is the case of Orthographic Projection, Technical Drawing, or Engineering Graphics in general.Here we have presented a Web application (http://turan.uc3m.es/uc3m/dpto/IN/dpin11/fabdis/index_000.htm)for teaching/studying Orthographic Projection that has been developed firstly as a tool to enrich the master classes, and after, as required by the students, as an online application focused on the personal work they have to carry out in the framework of Bologna Process.
Two softwares have been used in the development of the tool: Flash® to prepare the animated solutions of the proposed exercises, and Dreamweaver® to design and create the web site.
The site is organized in two main parts, apart from the home page: the theoretical tutorials of the main concepts, and the animated proposed exercises that include in every one not only the 2D step by step animation but also the 3D animation.These 3D animations constitute a very interesting contribution to this kind of applications because they help the students to develop the ability of connecting the 2D pencil-and-paper problems with the 3D real problems.
It has been proved by the authors that the use of the application in class and on-line by the students themselves, has produced better academic results.The web application is still alive and different sections should be implemented in the future: an interactive exercise solution part and also an evaluation part.That will definitely improve the quality and the scope of the tool for the distance learning purposes.

Fig. 2 .
Fig. 2. Scheme of organization of the web site

Fig. 3b .
Fig. 3b.Main page of the application (English version)

Fig. 5 .
Fig. 5.The exercise statement Fig. 6.Explanation of the exercise statement

Fig. 7 .
Fig. 7. First snapshot of the animated solution

Fig. 9 .
Fig. 9. Third snapshot with the explanation of the maximum slope line of a plane

Fig. 11 .
Fig. 11.Fifth snapshot for the determination of the real size of the path

Fig. 17 .
Fig. 17.Third intermediate snapshot where the msl is drawn in the space

Fig. 19 .
Fig. 19.Last snapshot giving the true size of the path followed by the drop