Information Technologies for Supporting in Classroom Learning and

e-Learning

Jose Ricardo Queiroz Franco, Mariana Hostalácio Barbosa, Roberta Oliveira Parreiras,

Renata Spyer Las Casas and Augusto Maia Gonçalves

Structural Engineering Department, Univeridade Federal de Minas Gerais,

Av. Antonio Carlos, 662, EE Bloco 1 sala 4204, Belo Horizonte/MG, Brazil

Keywords: Information Technologies, Computer Graphics, e-Learning, Multimedia, Structural Engineering.

Abstract: The paper's main objective is to present a Virtual School (VS), built to provide an infrastructure to develop

new methodologies to assist classroom teaching and distance learning in Engineering. The environment of

the Virtual School encourages exploration of teaching experiments in search of new pedagogical approaches

and methodologies to improve and innovate web-based learning and teaching in the classroom. Based on the

experience of graduate students in Information Technology (IT) resources of computer graphics in its

broadest definition were used, involving CAD technologies for modeling, animation, text, multimedia and

hypertext, photos, pictures and images, which make the visual appeal a powerful tool in improving the

teaching-learning relationship. The exploitation of programming languages for the web to build sites, portals

and web contents has also been accomplished. One of the most important technological aspects of the

Virtual School and of the digital contents is the use of systems management database (DBMS) for the

creation, modification, storage and data management. The use of video and sound technologies,

videoconferencing and collaboration environments and the construction of a Web platform for e-learning

are also part of the goals of this project. Finally, some case studies on web contents based on innovative

technologies is presented for distance learning and to assist in classroom teaching of Structural

Engineering.

1 INTRODUCTION

1.1 Development of a Virtual School

The creation of the infrastructure of the Virtual

School involves knowledge of programming

languages like ASP, ASP.NET, Java, Javascript, C#,

ActionScript and mark-up languages such as HTML.

Technology CAD for geometrical modeling and

animation and graphics programs like Corel Draw,

Photoshop and Flash are also important tools to

improve the visual appeal of graphic design.

Moreover, the management and manipulation of

database skills are essential to the development of

technologies for web courses.

In addition to these skills, each course taught

within the School involves specific knowledge for

each content developed such as: AUTOCAD,

REVIT, Strength of Materials, Steel Structures,

Finite Element Method, among others.

The Virtual School consists basically of an

organized structure in the form of an Internet portal

that provides computational resources for

implementation of multiple activities for teaching

and learning specific contents in engineering. These

activities consist of seminars and online courses,

focused on the areas of Engineering and Computer

Graphics. Such activities are being designed to fully

exploit the resources of the Internet, and especially

those related to the visual appeal of computer

graphics (multimedia, animations, videos, photos

and images, models, etc. ..), with care to prevent the

user is exposed to sensory overload, as

recommended by (Torres and Mazzoni, 2004). As

pointed out in (Integração, 2012), "the goal of a

customized e-Learning is to create a perfect

environment for distance learning through resources

like audio, animation and interactivity. In e-

Learning, a virtual tutor guides the student through

the steps of the course, making sure he interacts with

the several access links on the screen. With each

Ricardo Queiroz Franco J., Hostalácio Barbosa M., Oliveira Parreiras R., Spyer Las Casas R. and Maia Gonçalves A..

Information Technologies for Supporting in Classroom Learning and e-Learning.

DOI: 10.5220/0004354900820088

In Proceedings of the 5th International Conference on Computer Supported Education (CSEDU-2013), pages 82-88

ISBN: 978-989-8565-53-2

 2013 SCITEPRESS (Science and Technology Publications, Lda.)

click, the pedagogical content is presented to the

student allowing a dynamic and enjoyable learning."

Access to the Virtual School-VS (called

NucleoEAD) is done via links from the address

"http://www.cadtec.dees.ufmg.br" of the CADTEC -

Center for Advanced Technology Development and

Teaching of Computer Graphics. The homepage of

the VS is shown in Figure 1.

Figure 1: Virtual School Home Page.

To access some areas of the VS it is necessary to

information and creating login and password. Once

registered, access to various spaces and tools of

interest is granted.

1.1.1 Technological Features of the Virtual

School (VS)

The Virtual School is designed to provide, via the

web, the following features shown on the portal of

the EV, Figure 1:

 Online Registration (enrollment) to

courses;

 Access to Courses Content

 Access to Seminars;

 Discussion forum and news;

 Update of personal information

 Chat Rooms;

 Useful links;

 Help Tool;

 Full control of data through

Database.

Tools to establish and facilitate communication

between students and lecturers in classroom courses

of the Department of Structural Engineering are also

available from the Discussion forum link (grupos de

discussao). These activities are administered by the

lecturer responsible for the discipline. Lecturers and

monitors have some limited administrative

privileges to control the communication activities.

The

Portal of the Virtual School allows students

navigate intuitively by the School in an attempt

to simulate, as best as possible, the functionality of a

conventional school. Thus, students can obtain all

information necessary to participate in the activities

available.

Figure 2 shows the homepage after someone has

accessed the VS. The green band indicates that the

person logged in has administrator privileges to

access the virtual school.

Figure 2: VS Home Page - Administrator Login.

1.2 Technological Basis Applied

(Software, Programming Languages

and Technologies)

One goal of the Virtual School is to explore

technological resources in developing environments

for distance learning, more specifically, to the

development of tools to aid distance learning in

structural engineering via web.

There are many motivations for this

development, among which we can highlight the

advancement of Information and Communication

Technologies (ICTs), the advancement of internet

programming languages (OOP) and the

opportunities that this type of distance learning via

the web offers in the area of engineering, (Neves,

2003).

Software. The main cast of software used are

essential in the application of computer graphics

environments for distance learning, for example:

Microsoft Visio, Dreamweaver, Access, Microsoft

Visual Studio framework, Flash, CorelDraw,

AutoCAD and Revit.

Technologies and Programming Languages. The

UML technology (Unified Modeling Language)

consists of a language for modeling, specification,

documentation, visualization and design of systems,

including object-oriented. The UML was adopted in

1997 by the Object Management Group (OMG) as a

standard language for software modelling, (Guedes,

2010).

The object oriented programming (OOP)

InformationTechnologiesforSupportinginClassroomLearningande-Learning

paradigm has been widely used associated with the

following programming languages for the web: C#,

ASP/ASP.NET, Java/Javascript and ActionScript.

OOP is a paradigm of analysis, design and

programming of software systems based on the

composition and interaction of various software

units called objects.

C# is a simple and complete object-oriented

programming language, which is part of the

framework .NET. The framewok.NET is a runtime

environment and a class library that allows the

abstraction of the operating system and of the

hardware, (MSDN, 2012). The framewok.NET also

encompasses an environment for developing

applications for the web called ASP.NET. The main

features of ASP.NET are: the choice of various

programming languages, allows compilation, and is

a component-based model (web controls, HTML

controls and user controls), which allows complete

separation of code and language HTML, (MSDN,

2012, W3Schools, 2010).

ASP (Active Server Pages) is not a language; it

is a program that runs inside IIS (Internet

Information Service). An ASP file can contain text

and HTML scripting languages (VBScript or

JavaScript); scripts in these files are executed on the

server side (IIS) and return an HTML page to the

browser.

JavaScript is a scripting language (interpreted). It

appears as lines of code in the middle of the HTML

page.

ActionScript is a scripting language used by

Flash. This language uses concepts of object-

oriented programming. You can make your pages

more "intelligent", with additional features such as

displaying the current time, make sure to fill out a

form is correct, and more, (JavaScript Tutorial

Brasil, 2005).

The technology CSS (Cascading Style Sheets)

was applied to define styles for the appearance of

HTML elements.

HTML (Hypertext Markup Language) is a

markup language used to produce static pages for

Web publishing. This language was developed for

the presentation of data in browsers.

1.2.1 Database

The use of management systems Database (DBMS)

for data manipulation of the EV is one of the key

technological approaches in this project.

BD Relational Management Systems (DBMS) to

facilitate change and data storage and ensure greater

security and data integrity and better management

control. A DBMS is composed of a control software

and the database.

The DBMS used to manage the databases of the

Virtual School and Digital Content are the

following:

MSDE 2000 - Microsoft SQL Server 2000 Desktop

Engine is a free version of SQL Server. It is a

relational database server, which can used in smaller

applications

Access - RDBMS from Microsoft, designed for

small and medium applications, multi-user and

multitasking. It is a data file and not a data server.

MySQL - The system is a MySQL relational

database, multi-user and multitasking. It is free

software and "open source", supports different

platforms

2 DEVELOPMENT OF DIGITAL

CONTENTS FOR COURSES

Once logged in you can access all areas of VS,

including the area where the digital content of the

courses are available online. However, to access the

digital content of a course it is required to enroll in

it. To enroll in a course simply click "Enrolment"

(Matriculas) and choose one of the courses shown in

Figure 3.

Figure 3: Access to Course Content.

The four courses have free access. The structure

of the digital content of the courses is basically the

same, nevertheless, the graphical designs of the

portal and of the digital content of each course are

unique, thanks to the creativity of those who

developed them. See an example in Figure 4.

2.1 Typical Course Structure

The structure of all digital contents were designed to

develop standard functional environments to make

navigation easy and intuitive to users. Such a

structure can

be itemized as follows:

CSEDU2013-5thInternationalConferenceonComputerSupportedEducation

Figure 4: Structural analysis of statically determined

structures.

2.1.1 Functional Structure of a Digital

Content of Courses

The digital content for a course is primarily

developed following a standard structure design that

can be summarized in the following items:

• Presentation

• Agenda

• Book online (Digital Content)

• Discussion forum

• Online Chat

• Transfer (Upload / Download)

• Seminars

• News

• FAQ

• Searching

• Help

• Bibliography

• Log out

The functionality of each item will be presented

using as an example the structure of the digital

content from the course Structural analysis of

statically determined structures. In comparison with

the definition in (E-learning, 2011), "E-learning

includes numerous types of media that deliver text,

audio, images, animation, and streaming video, and

includes technology applications and processes such

as audio or video tape, ... and computer-based

learning, ... and web-based learning. E-learning can

occur in or out of the classroom. It can be self-

paced, asynchronous learning or may be instructor-

led, synchronous learning. E-learning is suited to

distance learning and flexible learning, but it can

also be used in conjunction with face-to-face

teaching, in which case the term blended learning is

commonly used.", the description that follows shows

that the digital content of the example suits both

modes of teaching/learning, "asynchronous and

synchronous learning"

Figure 4 shows the entrance portal of the course

designed in a cheerful and creative format of an

amusement park.

The presentation page welcomes the students

and briefly describes the technological resources

available on the course. In addition, the student

receives information about the course objectives, on

teachers and on prerequisites. This page contains

instructions on how to start the activities and

important tips on how to undertake a distance

learning course. The toolbar at the top of pages

remains fixed on every page, allowing easy

navigation through the course content. The link

"Agenda" leads to a page where the instructor sets a

schedule for completion of the course with targets

and timeframes for each activity that the student

must follow during the course. The importance of

meeting this agenda for distance education courses

should be emphasized (Chaves, 1991).

The hyperlink "Apostila" (Book online) allows

access to the index of the digital content of the

course as shown in Figure 5. A legend shows the

technological resources (animation, film, photo,

supplementary texts, and exercises) used to enhance

the teaching-learning through the visual appeal of

computer graphics. This legend also shows icons for

downloads, frequently asked questions (FAQ) and

for printing.

Figure 5: Apostila (Book online) (Hyperlinks to the

Digital Content).

The Digital Content was divided into four (04)

modules:

• Module 1: Basic Concepts

InformationTechnologiesforSupportinginClassroomLearningande-Learning

• Module 2: Introduction to Structural Systems

• Module 3: Calculating Support Reactions

• Module 4: Calculation of Normal and shear forces

and bending moments and their diagrams

At the end of each module, the student undergoes

an evaluation according to some defined criteria.

2.1.2 Module 1: Basic Concepts

The icon "Forcas" (Forces) in Figure 6, from the

Module 1 lectures on force and its components and

resultant force. The theoretical concepts and

definitions are illustrated through animations and

movies as shown in Figure 6. A list of solved

exercises is also available.

To gain access to the next module students must

pass an assessment test. Figure 7 shows question 5

item 3 (Forces) of the assessment test in Module 1.

Figure 6: Forces, components and resultant force.

Figure 7: Module 1 - Item 6 (Balance of Systems of

Forces) - Question 5.

2.1.3 Module 2: Introduction to Structural

Systems

Important concepts about structural systems, support

systems, load types, degrees of freedom, types of

structures, critical forms and types of forces are

introduced in Module 2. Photos, (Figure 8),

illustrating two types of support, a fixed pin support

and a mobile roller support, help the student in

understanding these concepts. Again, in the end the

student has to undergo an evaluation to access the

third module.

Figure 8: Fixed pin support and Mobile roller support.

2.1.4 Module 3: Calculating Support

Reactions

Once approved in the evaluation of Module 2

students gain access to the next module, which

teaches how to calculate support reactions, (Figure

9). Calculation procedure starts with the design of

the Free Body Diagram (FBD), defined by replacing

the supports by their reactions, which become the

unknowns of a problem of equilibrium of force

systems. In the case of statically determined plane

structures simply use the equilibrium equations of

force systems on the plane to determine such

reactions at the supports. Access to module 4 will be

granted only after the student passes the assessment

test on the content of Module 3.

Figure 9: Calculating Support Reactions.

2.1.5 Module 4: Calculating Normal and

Shear Forces and Bending Moments

and Their Diagrams

On the first page of Module 4 fundamental concepts

of internal forces are presented. Then, fundamental

exercises on the calculation of internal forces are

resolved through animated videos. The sign

conventions adopted for the calculation of the

internal forces is described and illustrated by images

and drawings.

CSEDU2013-5thInternationalConferenceonComputerSupportedEducation

Then the concept of balance of nodes and bars is

introduced with the aid of graphic video animations.

Further, a simple way to derive the equations of

internal forces in individual bars is demonstrated

also through video animations.

Internal Forces Diagrams (Normal and Shear

Forces and Bending Moments)

A brief introduction to internal forces diagrams is

made in the introductory page of the issue. On this

page access to a video animation is available

through the legend to Figure 10.

Figure 10: Legend to access video.

The video shows the construction of internal

forces diagrams on a cantilever bar subjected to a

concentrated load and an uniformly distributed load.

The results are shown in Figures 11. The

construction of the diagrams using the visual appeal

of a video enhance learning and allow the student to

rewind the animation in case some concept needs to

be reinforced.

Figures 11: Internal Forces Diagrams.

An important auxiliary tool in tracing the

diagrams of internal forces are the Auxiliary

Differential Equations. These are deducted from the

balance on the free body diagram of an infinitesimal

element of a bar subjected to a generic distributed

load. Differential equations provide various useful

information about the format of diagrams, even

before they are plotted. The derivation of these

equations is presented through animation and the

results are shown in Figure 12.

Figure 12: Auxiliary Differential Equations for Tracing

Internal Forces Diagrams.

In the following pages, examples of the

determination of internal forces diagrams in beams

are presented through video animations. The

diagrams and the solution for a bi-supported beam

subjected to a uniformly distributed load are shown

statically in Figure 13.

Figure 13: Internal Forces Diagrams - Bi-supported beam

subjected to a uniformly distributed load.

InformationTechnologiesforSupportinginClassroomLearningande-Learning

3 CONCLUDING REMARKS

E-Learning has become an essential mode of

education for massive dissemination of knowledge.

The increasing expectations of society for new

methodologies and pedagogical approaches impose

great challenges for e-Learning (Shimizu, 2006).

Therefore, every project in distance education

should be initiated through a careful planning

including maintenance and prediction of continuous

improvement through technological and

methodological projects. The content of a course for

e-Learning should be well prepared, taking care not

to overload the page with text or multimedia

features. This certainly transforms the study into

something enjoyable rather than stressful. Texts,

audios and interactive tools should be balanced, so

that the visual appeal of multimedia serves to

reinforce the learning of concepts, making the

learning environment natural and intuitive, where

the student is challenged to be more active in the

learning process. In this process the student learns

through digital contents available for free on the

web.

The Project of Virtual School presented here

required an intense program for qualification and

training of the team of developers, which was

constituted mostly of graduate and undergraduate

students. The qualification program included

learning programming languages for the web and

practice with modelling in computer graphics.

Furthermore, the digital contents developed within

the project require specific knowledge for each

course. Projects of this type show the importance of

a multidisciplinary team, with professionals in

education, information technology, communication,

arts, and experts in specific content, among others.

Further, analysis and definitions of teaching

methodologies and developing the educational

contents of courses are activities that require

professionals in education.

Two aspects of the Virtual School and of the

courses digital contents developed in this project

must be highlighted. First, the access is free and it is

available anywhere, anytime to anyone seeking for

education and knowledge. Second, the differential of

the proposal is the graphical visual appeal of the

School environment and especially of the digital

contents of the courses.

ACKNOWLEDGEMENTS

We would like to thank the Conselho Nacional de

Desenvolvimento Cientíﬁco e Tecnológico-CNPq

and the Fundação de Amparo à Pesquisa do Estado

de MinasGerais, FAPEMIG, for their support to this

research project.

REFERENCES

Integração - Escola de Negócios, 2012, E-Learning

Customizado,

http://www.integracao.com.br/index.aspx?gclid=CKjC3o

G0gbYCFQo3nAodp0oAPw#!/secao=a_distancia/pagi

na=e-learning_customizado/

MSDN, 2012. The C# Language Specification, available

on line from the Microsoft Developer Network

(MSDN). http://msdn.microsoft.com.pt/pt-br/asp.net/

centrum-asp-net.aspx

E-learning, 2011, http://en.wikipedia.org/wiki/E-learning

Guedes G. T. A., 2010. UML 2 uma abordagem prática,

Novatec Editora Ltda, ISBN 978-7522-149-5

W3Schools, 2010. http://www.w3schools.com/aspnet

JavaScript Tutorial Brasil, 2005 http://www.javascript-

tutorial.com.br/content-cat-1.html

Torres, E. F., Mazzoni, A. A., 2004. Conteúdos Digitais

Multimídia: o foco na usabilidade e acessibilidade. Ci.

Inf., Brasília, v. 33, n. 2, p. 152-160.

Neves C. M. C., 2003. Referenciais de Qualidade para

Cursos a Distância, Brasília.

Chaves, E. C., 1991. Multimídia – conceituação, aplicação

e tecnologia. Campinas: People Computação,.

SHIMIZU, H., 2006. Planeta Digital. Revista VEJA,

Cidade de Publicação, 1978, ano 39, nº 41, p. 106 a

108.

CSEDU2013-5thInternationalConferenceonComputerSupportedEducation