Figure 1 - uploaded by Fernando Almeida
Content may be subject to copyright.
Source publication
Responsive design allows software developers to build a Web page that can dynamically adapt to the size of the devices. This development philosophy enables the rendering of Web pages in a fast and optimized way, ensuring a good user experience on mobile devices, tablet and desktop. In the scope of this study, we intend to explore the main advantage...
Contexts in source publication
Context 1
... design emerges as a technical solution that mitigates this issue, since a website dynamically adapts to the width of the device in which is being visualized. Subic et al. (2014) state that the content of a website should intelligently re-shaped itself for maximum usability and impact. In this way, the HTML and CSS code of a website is adapted to the resolution of the device without having the need to define different styles. Responsible web design is composed by three technical components (Cazañas & Parra, 2017): (i) fluid grids, (ii) flexible images; and (iii) media queries. Fluid grids are responsible to assign relative units to page elements; flexible images are also sized in relative units; and media queries make possible to switch between different CSS based on the features of the device. An example of a website built using the responsive design is given in Figure 1. Creating responsive design includes: (i) tailoring the page layout to the resolution of the device; (ii) resize the images automatically to they fit on the screen; hide unnecessary elements in smaller devices; (iii) adapt size of buttons and links to touch interfaces where the mouse pointer is replaced by the user's finger; and (iv) use intelligently features in mobile devices, such as geo- localization and changing the orientation of the content ...
Context 2
... grids are responsible to assign relative units to page elements; flexible images are also sized in relative units; and media queries make possible to switch between different CSS based on the features of the device. An example of a website built using the responsive design is given in Figure 1. Creating responsive design includes: (i) tailoring the page layout to the resolution of the device; (ii) resize the images automatically to they fit on the screen; hide unnecessary elements in smaller devices; (iii) adapt size of buttons and links to touch interfaces where the mouse pointer is replaced by the user's finger; and (iv) use intelligently features in mobile devices, such as geo- localization and changing the orientation of the content view. ...
Citations
... B. mögliche Sehschwächen auszugleichen. Zudem wurden die interaktiven Pakete im Sinne des Responsive Designs (Almeida & Monteiro, 2017) ...
Die weiter steigende Anzahl an Lernenden mit gravierenden Leseschwierigkeiten stellt die Grundschulen vor immense Herausforderungen. Um Lehrkräfte in der Grundschule dabei zu unterstützen, eine evidenzbasierte und nachvollziehbare Förderung für alle Schüler:innen bereitzustellen, ist die Nutzung von Daten zur individuellen Entscheidungsplanung in der Förderdiagnostik notwendig. Die digitale Lernplattform Levumi bietet dabei Lehrkräften und Lernenden kompetenzorientierte formative Tests als Open Educational Resources (OER) in unterschiedlichen Lernbereichen an. Das Verbundprojekt DaF-L1 erweitert das Levumi-Angebot um ein computerbasiertes adaptives Lesescreening (LES-IN-CAT) mit darauf abgestimmten Lesefördereinheiten (LesePfad) für die dritte Jahrgangsstufe. Mittels projektbegleitender Expert:inneninterviews (N = 13) wurden anhand zweier Studien zur ökologischen Validität der Gebrauchstauglichkeit von digitalen Diagnoseinstrumenten Ansprüche an ein praxistaugliches digitales Lesescreening mit zugeschnittenen Lesefördereinheiten in inklusiven Settings analysiert. Aufbauend auf diesen Ergebnissen wurde das Lesescreening entwickelt, in einer Studie mit 700 Schüler:innen psychometrisch geprüft und in Simulationsstudien adaptiv transformiert. Die darauf aufbauenden Fördermaterialien wurden mit einer Prä-Post-Follow-Up Studie im Kontrollgruppendesign (N = 123) auf ihre Wirksamkeit geprüft. Abschließend erfolgte die technische Implementation des adaptiven Screenings und der Fördereinheiten als Whole-in-One-Paket in Levumi.
... Apart from that, the research also explores the aesthetic features of responsive web design for the portal. According to [14] responsive design allows software developers to build a Web page that can dynamically adapt to the size of the devices. This development philosophy enables the rendering of Web pages in a fast and optimized way, ensuring a good user experience on mobile devices, tablet and desktop [14]. ...
... According to [14] responsive design allows software developers to build a Web page that can dynamically adapt to the size of the devices. This development philosophy enables the rendering of Web pages in a fast and optimized way, ensuring a good user experience on mobile devices, tablet and desktop [14]. Thus, one of the most popular techniques is the responsive Web design, which is a technique that allows a website to adapt to the device where a page is being accessed (e.g., desktop, laptop, tablet or a smartphone). ...
Alumni means those who have graduated from the university. In order to stay relevant to the university, the university or institution must establish a platform for accessing and retrieving alumni data. The purpose of creating the platform or known as a system is to reduce barriers in terms of data access, especially information regardless of their university, career opportunities and programs developed to strengthen the skills of graduates. This research aims to examine the evolution of the alumni system utilized in higher education institutions. This will incorporate the web development framework that has been employed in the system at one of the private universities in the Klang Valley. This study also examines the system requirements for the alumni of the university. Responsive web has been explored and implemented with aesthetic features, regardless of system requirements. Therefore, the Alumni Portal is developed and is also known as ALUMNIApps. Future studies will utilize dashboard analytics to analyze alumni data, which will be utilized by managers to make significant decisions at the university management level.
... Apart from that, the research also explores the aesthetic features of responsive web design for the portal. According to [14] responsive design allows software developers to build a Web page that can dynamically adapt to the size of the devices. This development philosophy enables the rendering of Web pages in a fast and optimized way, ensuring a good user experience on mobile devices, tablet and desktop [14]. ...
... According to [14] responsive design allows software developers to build a Web page that can dynamically adapt to the size of the devices. This development philosophy enables the rendering of Web pages in a fast and optimized way, ensuring a good user experience on mobile devices, tablet and desktop [14]. Thus, one of the most popular techniques is the responsive Web design, which is a technique that allows a website to adapt to the device where a page is being accessed (e.g., desktop, laptop, tablet or a smartphone). ...
Alumni means those who have graduated from the university. In order to stay relevant to the university, the university or institution must establish a platform for accessing and retrieving alumni data. The purpose of creating the platform or known as a system is to reduce barriers in terms of data access, especially information regardless of their university, career opportunities and programs developed to strengthen the skills of graduates. This research aims to examine the evolution of the alumni system utilized in higher education institutions. This will incorporate the web development framework that has been employed in the system at one of the private universities in the Klang Valley. This study also examines the system requirements for the alumni of the university. Responsive web has been explored and implemented with aesthetic features, regardless of system requirements. Therefore, the Alumni Portal is developed and is also known as ALUMNIApps. Future studies will utilize dashboard analytics to analyze alumni data, which will be utilized by managers to make significant decisions at the university management level.
... The growing population of internet users and the prevalence of mobile devices, such as smartphones and tablets, have generated a necessity to customize the content presented on each device. Responsive design is identified by its ability to dynamically adjust content to fit the screen size, ensuring a favorable viewing experience on any web access device [19]. To achieve maximum usability and impact, a website's content should intelligently re-shaped itself [20]. ...
... На сьогодні Інтернет є важливим інструментом, який охоплює громадянські потреби та надає корисні можливості для бізнесу та державних установ. З моменту його появи відбулася низка значних змін, що обумовлюється переходом від найпростішої парадигми Веб 1.0 (яка характеризується статистичною публікацією контенту, в якій користувачі мають змогу лише споживати контент з відсутністю двостороннього зв'язку між користувачами) до Веб 4.0 та Веб 5.0 (які виникли завдяки технологічному прогресу мобільних пристроїв, Інтернету, речей та спеціальних мереж й характеризуються симбіотичною взаємодією між людьми та машинами) [1]. ...
Modern web content development capabilities are undergoing characteristic changes due to the improvement of web technologies in programming. The origin of web technologies began in the early 80s of the last century when the Hypertext Transfer Protocol (HTTP) and the Hypertext Markup Language (HTML) made a significant contribution to the development of Internet capabilities. The web evolution, characterised by scientific and technological progress in information technology, has opened up new opportunities for the development of web programming, which has led to the emergence of programming languages, frameworks, cascading style sheets, and hypertext markup languages. This research aims to study and analyse the key aspects of web programming and web design with a combination of modern features of the Internet environment. To analyse web design, the article considers the possibilities of using the Bootstrap framework, which combines and contains the HTML5 hypertext markup language, CSS3 cascading style sheets, and the JavaScript programming language. Having analysed two web development technologies—front-end and back-end—we can conclude that the presentation level (front-end development) corresponds to the client side, with which the client can interact and where dynamic elements can be added to an HTML page using JavaScript with the visual definition of a web page using CSS. In the case of back-end development, the application layer corresponds to the server side, with which the client cannot interact, as the shell is hidden. Using the modern capabilities of the programming language, its code, and a set of auxiliary tools in website development, the paper presents a development algorithm where each stage contains separate processes and operations during website development, which makes it impossible for them to exist independently. Thus, tools for designing and laying out websites using modern technologies can greatly simplify the development process, which can create higher-quality web content. Keywords: Web, web environment, web technologies, front-end, framework, Bootstrap, CSS3, HTML5, CCS3, JavaScript.
... Mobile Responsiveness is one of the key components of any shopping platform because it is what allows the platform to adapt to any device used by a customer to access the online shopping platform. Responsiveness is a designing feature in software development that allows software builders to develop software that can change to suit mostly the screen size of the mobile device used to access the said software [30]. The technology behind building a responsive online shopping platform is the ability of such software that was initially developed on either a desktop or laptop or any personal computer to be compactable and function well of any other device [31]. ...
... A web application was designed to enhance the accessibility of cellular communication in the HTTP protocol using user experience [14][15]. The bootstrap CSS library was used to allow a responsive web design so that a full view could be shown on various screen sizes [16]. ...
Smart lighting systems have become increasingly popular in several public sectors because of trends toward urbanization and intelligent technologies. In this study, we designed and implemented a web application platform to explore and monitor data acquired from lighting devices at Thammasat University (Rangsit Campus, Thailand). The platform provides a convenient interface for administrative and operative staff to monitor, control, and collect data from sensors installed on campus in real time for creating geographically specific big data. Platform development focuses on both back- and front-end applications to allow a seamless process for recording and displaying data from interconnected devices. Responsible persons can interact with devices and acquire data effortlessly, minimizing workforce and human error. The collected data were analyzed using an exploratory data analysis process. Missing data behavior caused by system outages was also investigated.
... A frequent topic of consideration was also the development of tools and test frameworks allowing for easier and more accurate profiling of applications as well as identifying areas where improvements could be made to increase the speed of their operation which was analyzed by researchers in articles [10][11][12][13][14][15][16][17]. In the majority of instances, the prepared test environments were characterized by high accuracy of results, compared to other widely used testing software. ...
This article analyzes the performance of three frameworks - React.js, Next.js and Qwik - that offer different methods of rendering application views. The purpose of the study was to show whether the new Qwik framework allows for better application load times compared to the other frameworks. The study was conducted using 3 applications representing the same research content, referring to cases occurring in production environments. In order to assess the performance, the Google Lighthouse tool was used, thanks to which it was proved that it is impossible to unequivocally say that Qwik allows for better optimization of the application compared to other frameworks.
... and b* = 56. 35. The L* result is discarded here, because it is not related to hue. ...
... The Automatic Banana Ripeness Indicator (ABRI, pronounced like "Aubrey") application was developed and designed following the principles of System Development Life Cycle (SDLC) [34] for software development. The application has a responsive design that automatically adjusts for different size screens and viewports [35], and it works on any mobile device running any operating system. The application has two main screens, behind which all the image processing procedures described to this point run. ...
This article develops a colorimetric equation and a colorimetric model to create a smartphone application that identifies the ripening stage of the lady finger banana (LFB) (Musa AA group ‘Kluai Khai’, กล้วยไข่ “gluay kai” in Thai). The mobile application photographs an LFB, automatically analyzes the color of the banana, and tells the user the number of days until the banana ripens and the number of days the banana will remain edible. The application is called the Automatic Banana Ripeness Indicator (ABRI, pronounced like “Aubrey”), and the rapid analysis that it provides is useful to anyone involved in the storage and distribution of bananas. The colorimetric equation interprets the skin color with the CIE L*a*b* color model in conjunction with the Pythagorean theorem. The colorimetric model has three parts. First, COCO-SSD object detection locates and identifies the banana in the image. Second, the Automatic Power-Law Transformation, developed here, adjusts the illumination to a standard derived from the average of a set of laboratory images. After removing the image background and converting the image to L*a*b*, the data are sent to the colorimetric equation to calculate the ripening stage. Results show that ABRI correctly detects a banana with 91.45% accuracy and the Automatic Power-Law Transformation correctly adjusts the image illumination with 95.72% accuracy. The colorimetric equation correctly identifies the ripening stage of all incoming images. ABRI is thus an accurate and robust tool that quickly, conveniently, and reliably provides the user with any LFB’s ripening stage and the remaining days for consumption.
... The built-in XML-HttpRequest "fetch()" function within JavaScript introduced around 2017 allowed the execution of Ajax on webpages to load content onto the screen without refreshing the page. 8 With the explosion of web-enabled devices, Almeida and Monteiro [26] observed that users' web browsers and devices determine how web pages are rendered, this development forced the web application solutions to migrate to responsive web design that can adapt to the users' technology platforms such as user personal preferences, screen resolutions and internet connection speed. Nowadays, web-based application development has undergone a transformation with many cross-platforms, high-performance and open-source framework such as ASP. ...
Generation of quality data to aid planning, assessing the education performance, monitoring programs implementation and learning outcomes are the basic functions of the Education Management Information System (EMIS). This study examines the existing EMIS in the Pacific Island Countries PICs and proffers solution. A SWOT analysis on the selected PICs EMIS through the published technical reports and policy documents from government and donors’ between years 2000 and 2021, revealed that EMIS in PICs have not progressed beyond the stages of collecting demographic data and generating basic indicators. Fiji EMIS which has prospect of leading other PICs EMIS could only generate few indicators manually, and the findings indicate that these indicators are not being considered in decision making. To solve these defects, we proposed data-driven microservices architecture developed with MERN (MongoDB, ExpressJS, ReactJS, and NodeJS) stack on 13 NoSQL collections, tested with pseudonymised data from Fiji Ministry of Education (consisting of 98.6% Learners, 100.2% Schools and 99.5% Teachers in post). Our solution renders dynamic visualized production-ready education data and 28 UNESCO standard indicators to guide decision making and this may serve as a model for PICs EMIS.
