Responsive Mobile Learning (M-Learning) Application Design and Architecture in Fog Computing

International Journal of Modern Education Studies December, 2019 Volume 3, No 2 Pages: 82-94 http://www.ijonmes.net dergipark.gov.tr/ijonmes


INTRODUCTION
Designing for teaching and learning in education has gained popularity in the digital era. For developing responsive mobile learning (m-learning) materials, it is essential to take into consideration that e-learning materials need to be redeveloped for responsive m-learning. Target users and design strategies are important to build for a successful mlearning initiative. Users respond diversely to m-learning because of m-learning nature and the content. As Millennials (people who have grown up in the modern technological era) are in the m-learning environment, m-learning developers need to think these techsavvy learners when developing m-learning. Mobile learning is ubiquitous in a way of consuming content mostly socially in an informal way. This is why the majority of mobile applications are on-demand content and performance support for education (Gaved, & Peasgood, 2017).
In m-learning, most of the courses are run on platforms like Android or iOS. The applications as SMS and WAP are nearly about to be outdated. Few types of research are about cross-platforms namely responsive but are not supportive of mobile learning enough. Thus the development of responsive m-learning has a great significance (Adkins, 2013).
The Internet has affected schools, and digital learning has become an important implementation in school systems. But the use of the Internet of Things (IoT) in education is numerous, and the implications are tremendous. The connection of devices to the Internet is the transformation of many applications to daily life, and education is on the agenda. So, mobile technology and the IoT help teachers to create mobile lesson plans which are accessible from any device in fog computing (Meola, 2016).
The purpose of this study is to offer a responsive mobile learning application design and make it work on different mobile devices in fog computing. Upon completing this purpose the following questions will be answered with this study: • What are the responsive design steps for mobile learning? • How does fog computing effect mobile learning?
• What is the responsive m-learning architecture?
The responsive m-learning design process Responsive design for m-learning courses is suitable for any course in order to access to from any mobile device or browser. Design elements such as text blocks, images, and videos can be displayed without any problem. Responsive design can offer a wide range of benefits for the m-learning course, as follows: • Provides an accessible mobile learning experience • Increased audience reach • Reduces costs • Improves accessibility • Easily maintain.
The classical application design process is linear. When a step ends, the next step begins. The progression of the steps is only in one direction but when problems occur, solutions are not performed gracefully. One of the problems of the classical application design is creating only for the standard desktop browsers. Once the responsive design implemented, the application can be used properly on desktop computers, mobile devices, and tablets (Heppard 2012). The responsive design process is shown in Figure 1.
Figure1. The responsive design process, (Heppard, 2012) Responsive design process with 5 steps: Step1-Plan: Components should be designed for different views and the screen should not be considered as a single page. Pages are designed as a whole of sliders, content, forms, and other components. Frames should represent different screen sizes and must be fluid. A single column can be scaled to two columns from three columns and even to one column for the smallest screens of mobile smartphones.
The user experience must also be modified to interact with the small screens by touching the mouse. Frames should be provided as prototype tools rather than plans, and they should be subjected to some development and testing that are fully functional throughout the screening spectrum. If the design starts before the first test, then unknown development problems may arise. Regardless, the final vision of the project should be maintained, so communication lines between departments should be kept open.
Step2-Design: The design should contain the necessary resources and layouts and components of different sizes to better use project time. Perfect pixel designs must be allowed for responsive Web design. These designs are difficult to run on desktop scanners, but when they are considered flexible in a floving screen, the designs needed can be managed.
By using HTML, it is possible to develop fluid layout in all media. The creation of exceptions for each browser width is very time-consuming but instead focuses on the integrity of the user experience. Experience design is as important as the appearance of the site in all screen sizes.
Step3-Build: Agile and responsive processing should live on a flexible screen in the design process. Components must be planned, prototyped and tested by process developers. The codes need to be optimized to ensure that they are the smallest unit for the components. Components can be tested by simply adding and subtracting them from the original unplanned layouts, which gives them peace of mind. Continuous collaboration among the developer, designer, and strategist will solve the inevitable change problems. With different team members, problems are defined and resolved before in the process.
Step4-Test: In a responsive process, you need to test in multiple browsers and screen size, so any problem can arise early. Problems with mobile media that do not match the frames can be found in a number of different platforms as well as in design. A work project prototype can be ready, which allows users to review earlier and become win-win for all parties.
Step5-Rinse, Lather, Repeat: In the responsive approach, the same amount of progress is achieved and, advantageously, there is live code at every step for the user's presentation. This helps to continue the next stages with the discoveries made in earlier stages and foresees the changes before the deadline (Heppard, 2012).

Responsive design parameters
In order to run applications and content with different platforms across multiple devices, it is required to move from a fixed-size screen to a flexible and scrolling format. It is important to think about each page layout and "visual hooks." Each content page is a blank canvas on which to design learning concepts. So, to increase the visual skills for the new multi-device world, it is imperative to use space, color, images, and other visual elements to tie related stories together. There are some points to do: • At first designing for the minimum device size is important.
• Understand how user feel when the text, images, and interactions showed on a small device. • Be cautious that audio has listened and video is watched on client devices.
• Make a connection with related concepts on different length pages.
• In order to reinforce related concepts use similar images, visual headings, and color. • Make use of follow-up resources.
• In order to convey information focus screen content and provide follow-up checklists, flowcharts, consolidate other media. (Quigley, 2015).
Minimum Device Set: Mobile learning is characterized by using mobile devices which have smaller screens than normal desktop ones. Content is squeezed down for smaller screens without multiple versions of m-learning content. Technically, mobile responsive content will adjust itself how to be displayed depending on the size of the screen. Mlearning content can be delivered on devices and media having different layout features as in Figure 2.  (Musti, Kashyap, 2013) It is important to distinguish between applications designed for the features of a particular mobile device and the contents that will work on various devices. Therefore, it should be avoided to reduce the screen, because the cognitive load on the student is larger. It should be noted that a particular application may require specific design skills. When developing responsive design content, unnecessary content that does not serve the purposes should be removed. E-learning content needs to fit into a variety of screen sizes or scroll through pages when accessing content on a small device (Quigley, 2015).
Online learners do not want to wait for long load times when accessing e-learning content, regardless of the device or scanner they use. Therefore, it is necessary to compress the content of e-learning to reduce loading times and to concentrate on contentbased areas. This means that excessive white space, which does not add any value to elearning, eliminates unnecessary graphics and boundaries (Pappas, 2015).
Layouts: With flexibility, reconfigured, edited, and selected content can be suited for all devices and browsers with different screen sizes and resolutions. Multi-platform layouts must have a simple design and have some boundary values. It provides standard layouts in general: desktop, portrait iPad tablet and smartphones covering the largest, medium and smallest screen sizes. The breakpoints change in the standard layouts dynamically and readjust to fit screen sizes between breakpoints (Varma, 2014) Fonts: In general, the font size of 16 and 18pt is ideal, but the headers should be slightly larger. Large text may not work well for smaller screen sizes even though it is suitable for a large screen. Also, a good contrast between the background and fonts can be adjusted to fit the screen size. The use of a fancy font instead of a vector icon is not good because the fonts are not blurred or brought together on the screen of existing devices. Serif fonts are more difficult to read on digital devices, so sans serif writing is recommended. When using Sans-serif fonts, it is advisable to avoid italics because reading tends to become pixellated. Therefore, it may be better to choose a Web-safe font (Varma, 2014).
Navigation: The navigation should be simple because it is a trap in complex navigation responsive design. Ideally, a particular device should not be focused. Instead, a suitable course flow is required for all devices. In navigation, it is necessary to avoid using clickable images that distribute the page, and it is always necessary to use the text buttons that indicate the right direction to the learner.
Preview: Before uploading the application, you need to make sure of the viewing courses on all platforms. In all aspects of the e-learning course, it is necessary to ensure that the components are well adjusted from the images to the placement of the text on the screen. If nothing appears, you may need to make the necessary adjustments before you go back and preview it again. Previewing the following parameters is important. Application performance on different devices. • Scaling -To resize the structure according to the screen size.
• Cropping -Sometimes, when the images are scaled to a very small size, the details are invisible and their meaning is lost. In these cases, it is an effective alternative to clipping around a focal area that is meant to mean the image. • Combination -Combine both approaches can be combined for dynamic cropping and then scale the images depending on the size of the device. For this purpose, images can be dynamically scaled and clipped using CSS (IITD, 2017).

Fog computing
Fog computing offers network services, storage space, computational services to the cloud servers and the end user devices. Fog computing plays major role in supporting, implementing the Internet of Things (IoT). Fog computing actually minimizes the latency, which enhance the Quality of Service (QoS). The main reason for the raise of fog computing is for the applications which are having the latency issues. When the Internet of Things is implemented billions of devices will be added into the network. The cloud computing will not be able to provide mobility support, location awareness and low latency. Fog computing promises to overcome all the problems mentioned above.
Communication devices have changed the way of communication and mobile phones have begun to extend the mobility. Tablets, smartphones, and netbooks have emerged to use the Internet of Things (IoT). IoT describes objects in the physical world and allows for any connectivity. IoT describes objects, devices, sensors, and items to connect and to be accessed (Pinola,2016). The fog is connected to the Internet of Things (IoT) devices that make up the fog nodes (Azimi et al., 2016). The following technology and market trends are drivers for IoT: • IP-based networking: The Internet provides global connec¬tivity for users and any devices. • Connectivity: Broadband Internet connectivity benefits for users in anywhere globally. • Smaller and faster computing: It results in faster computing and smaller device sizes. • Cloud computing: Cloud services allow for fast and easy access to data and content.
• Data analytics: Analytics enhances services and performance.
• Fog computing: It expands the computing facilities and services to the edge of the network by supporting end users, geographical distribution and mobility. • Bring Your Own Device (BYOD): A policy for employees to use their own personal mobile or other computer-based devices in the workplace to access privileged organization resources (Garba, Armarego, Murray, Kenworthy, 2016).
The Internet of Things, large data streams from their devices, generate large amounts of information that can be processed and used to create useful services for end users. Fog Information architecture recommends that IoT devices first analyze a local point and send it to central servers, unlike the architecture that allows the data to be sent and processed to a cloud server (Ducange et al. 2017). For product and engineering teams designing IoT systems, the core challenge lies in taking IoT use cases and turning them into a connected system -with full integration, the right IoT communication protocols, security, and a userfriendly look and feel. For industrial manufacturing, IoT product design is also known as Industry 4.0 design. There are four universal design principles shaping IoT design today: Interoperability: At the most fundamental level, a connected system requires sensors, machines, equipment, and sites, to communicate and exchange data. Interoperability is the underlying principle throughout all Industry 4.0 design processes.
Information transparency: The rapid growth of connected devices means continuous bridging between the physical and digital worlds. In this context, information transparency means that physical processes should be recorded and stored virtually, creating a Digital Twin.
Technical assistance: A driving benefit of IoT, technical assistance refers to the ability of connected systems to provide and display data that helps people to make better operational decisions and solve issues faster. In addition, IoT-enabled things should assist people in laborious tasks to improve productivity and safety.
Decentralized decisions: The final principle of Industry 4.0 design is for the connected system to go beyond assisting and exchanging data, to be able to make decisions and execute requirements according to its defined logic (Seebo, 2019).
Based on time and location information, the fog architecture completes and interacts with nodes instead of completely replacing the cloud. In fact, the fog compiles cloud computing information, and both share the same resources and most of the same mechanisms. The need to accurately analyze the data to be obtained at the right place, in the network and at the time, has increased with the use of intelligent sensors, devices, and IoT.
The following innovative features are typical features of architectures (Numhauser and Jonathan, 2013).
• The game focuses on a very low and predictable delay for augmented reality that requires video conferencing, fast response and small vibration • The geographic distribution and availability of fog nodes are less distributed than scattered but non-intuitive sensors by central cloud servers • Place and content awareness is useful for applications where information about the place plays an important role • Exploitation of rapid mobility • Use in large-scale distributed control systems • Flow and real-time for continuous monitoring and early prevention • Heterogeneity of the fog • Interoperability between different areas • Processing of data at the place where the data is generated • Low bandwidth workability • Security and privacy (Abdelshkour, 2015).

METHODOLOGICAL APPROACH
In order to conceptualization the fog-based learning structure as the interaction between cloud and fog it is required to communicate through internal Application Interfaces (APIs). The cloud division is responsible for time-based backup and large storage operations, and data mining techniques that require a lot of time (Pecori, 2018). A data storage that is located at the center of the fog computing structure can be accessed by both device layer and fog layer (Cha, 2018). The fog computing structure provides some advantages as follows:  Reduced network load: In the fog computing structure, the amount of data flowing into a network is reduced because computation is conducted at a network edge near IoT devices.
 Mobility support as a default function: The Mobility according to reliability is a fundamental requirement to many IoT applications. The device resources like smart phones and laptops may provide physical or virtual mobility to support a mobile IoT application.
 Context awareness: In the fog computing structure, resources provide context awareness relating to data created by a sensor. The device resources play roles in combining data at a sensor, using position or application context.  No single defective point: As calculation is completed in a distributed way in fog computing, the model does not have a single defective point. Several snapshots of an application can be allocated at a cloud to improve reliability.

Fog Computing-enabled Content-Centric Networks
Fog-enabled mobile network (FMN) and content-centric mobile network (CCMN) can be used for both the service quality and resource utilization of the mobile networks. Content centricity, naming the data and caching popular content at network edges can reduce duplicate content transmission in the mobile network, speed up the incident response and improve the utilization of network resources. It is beneficial to extend the fog computings principles to manage the caching resources (Wang, 2017).
The fog section consists of lightly NoSQL data storages and various internal network operations (local area network or sensors and tools). They can be used to calculate various features to make them useful and to make short-term forecasts to always interface with other users, such as teachers, teachers, and students, through external application interfaces (Pecori, 2018).
External Application Interfaces can operate according to a subscriber/notification paradigm that allows nodes for acting as mediators. This shows that some stakeholders are subscribing to some data streams or estimators and get information when possible with some notifications. On the other hand, the internal Application Interfaces operate according to a push/pull model in which the requests and commands are directed to the cloud when the data streams depend not only on the fog layer but also on the data stream. Moreover, while the internal Application Interfaces guide both control and data information, external stakeholders often carry mainly educational content to offer to stakeholders how to tune their educational activities as shown in Figure 3 (Pecori, 2018). Figure 3. A general overview of the fog-based m-learning structure, (Pecori, 2018) There is a change in presenting online work assignments through student portals where data is stored in the cloud. While implementing common office applications, messaging services, and virtual desktops, schools support web-based services for students and parents, as well as support more specialized training applications. Below are three ways fog information can affect classes (Collier, 2018).
Setting Up Network Traffic: In fog computing, microdata centers provide on-site technology that can be scaled up and down with the requirements of the school. For example, after school, system capacity may have a traffic increase due to students accessing both employees and LMS (Learning Management Systems). During this time, the infrastructure has to be scaled to overcome traffic and the performance does not fall, but everyone has to count down if they exist. These difficulties continue to be higher in academic disciplines, even in higher education (Collier, 2018).
In order to work efficiently, the connection and network communication should be the number one priority. However, these schools can be a challenge for many distributed organizations, especially those spread over various campuses. Delays can be eliminated for a continuous and better user experience by bringing data in place locally. Also, some campuses may not have IT staff. The benefit of the fog computer is that trained IT professionals can perform remote management of tasks. The most important way to do most of these tasks alone is not only because of the cost of going to these sites but also to minimize downtime due to delayed response times due to travel (Collier, 2018).
Improving User Experience: Technology in the classroom has become a new norm because educators are looking for new ways to use computers and online resources in education. Schools with more than one campus are touching the fog computer as a sustainable solution to support educational institutions due to their ease of use and impact on user experience. More specifically, educational institutions work similarly to remote location and branch office organizations with similar IT needs. The fog calculation is a localized calculation that can be deployed quickly and easily, away from the primary data center where performance and reliability are required.
The fog calculation decentralizes the computing resources and brings them closer to the data source. When schools use for calculation, they prioritize the link and network at various campuses to eliminate slow speeds, which significantly increases the experience of students and teachers (Collier, 2018).
Using Digital Tools: Educational institutions provide students with external access to digital libraries and online application portals throughout the day. The fog computer system offers agility to operate efficiently and effectively from the main site and multiple devices. Fog computing technology improves training operations and provides a platform with agility against slowing or stopping them (Collier, 2018).

DISCUSSION
Today it is possible to achieve a high level of teaching and learning by using mobile learning environments, responsive design process, and tools that will make training easier and effective. Mobile courses with responsive design provide opportunities for teachers and students to engage in exciting and innovative learning experiences. The use of responsive m-learning in fog-based computing enables students to engage the courses in both real-time and at asynchronous learning events. Mobile technologies are more widely available at a reasonable cost, and without infrastructure problems using IoT in fog computing environment which performs computing functions on network edges as a front-end distributed computing archetype for education. The huge benefit of m-learning is that tomorrow's students will be digital natives using IoT (Elsaadany and Soliman, 2017). The responsive design process must also take into consideration the constraints involved in all phases of the training design and implementation. It is a fact that there is no one-size-fitsall approach to the design of m-learning, because each course is unique, and each design process requires responsiveness. The architecture that can be used with responsive mlearning with seamless and low latency mobile devices can be fog-based architecture. Fog computing expands the responsive m-learning application facilities and services to the edge of the network users and mobility in fog. Fog-based responsive m-learning architecture can be used by teachers and students via the use of different mobile devices effectively with desired outcomes.

CONCLUSION
In this article, we present the data flow and fog based e-learning framework for learning purposes in the literature. In addition, suggestions were made to demonstrate the applicability and usefulness of the identified architecture. The proposed advantages can be presented as accurate determination of students' performances in real time, places and times of study, development and participation of students. However, the integration of technologies, user acceptability and innovation in the fog computer, the use of sensors, tools and smart objects in general will be maintained without slowing down. In addition, students' grades and performances can be examined, personalization and measurement and analysis can be done. Evaluating response times and data transfer rates in fog computing, the use of social relations between students and their own devices can be made for further researches that strengthens and enriches the architecture offered.