Abstract:

This paper presents a design solution for creating e-learning content developed using multimedia tools and modern web technologies. The chosen case study refers to the set of laboratory work of an academic study subject by applying interactive multimedia content, treatment of animations, complex content formatting and creative graphic design. Thus, page navigation is dynamically performed, regardless of the browser used and the device used (web responsive properties).

The laboratory virtual class of the “Multimedia and Equipment" (subject in the “Information and Computer Systems Engineering” master study program at the Faculty of Electronics, Telecommunications and Information Technology) is carried out in the original Easy-Learning online e-learning system (developed by the research team of the Applied Electronics and Information Engineering Department), each student having the possibility to access the laboratory platforms both at home and in the classroom. The preliminary study involves understanding the laboratory platforms and following the steps described in the practical work deployment section. This action is possible from any workstation equipped with internet connection.

A set of tools for enriching HTML content was used: HTML5, CSS3, FancyBox (tool for displaying dynamic images and HTML content, built using jQuery library), Bootstrap (a comprehensive framework covering linear development in HTML and JavaScript) and Flash to HTML5 online converter for animations.

The practical component covers approaching all laboratory platforms by applying the same template formatting. The IT solution involves the application of knowledge about web programming environments, databases, high-end devices, and graphic web design. The result is addressing these laboratory works using a single template to display the web pages independently on browser used.

To meet the design requirements and to achieve a standard final product, the project is based on PHP, JavaScript, JQuery, HTML5, and CSS3 technologies. To test the functionality of the system, the XAMPP package was installed on the local PC that runs the laboratory set for each laboratory work. XAMPP package is a free software, open source and cross-platform web server, which consists in Apache, MySQL and interpreters for scripts written in PHP and Pearl programming languages, as well as CoffeeCup free HTML editor.

The application is configured to run on mobile and portable devices the same manner of regular desktop web pages, with easy navigation, simple access to menus and fast display of dynamic images. In addition, Flash to HTML5 conversion applications removes a possible incompatibility between Flash files and mobile operating systems (Android, iOS, etc.). In implementing the project, a series of steps over creating a design compatible with most browsers was created. This article explains how the practical application has been carried out, including home page design and content display. The design of menus and (dropdown) sub-menus and Flash to HTML5 file conversion is also discussed.

The original contributions consist in design solutions for the layout of each structure, choice of visual combinations and banners for graphical design, dynamical effects and their actual implementation using the programming languages and IT environments listed above. In addition, the described tools and technologies were included in the source code in order to get creative e-learning multimedia content.

Keywords:

e-learning content, web technologies, multimedia tools, graphic design, virtual class, blended learning, online teaching.