Sustainable Project-Based Learning Methodology Adaptable to Technological Advances for Web Programming

: The fast pace of development of the Internet and the Coronavirus Disease (COVID-19) pandemic have considerably impacted the educative sector, encouraging the constant transformation of the teaching/learning strategies and more in technological areas as Educational Software Engineering. Web programming, a fundamental topic in Software Engineering and Cloud-based applications, deals with various critical challenges in education, such as learning continuous emerging technological tools, plagiarism detection, generating innovative learning environments, among others. Continual change and even more change with the current digitization becomes a challenge for teachers and students who cannot depend on traditional educational methods. The article presents a sustainable teaching/learning methodology for web programming courses in Engineering Education using project-based learning adaptable to the continuous web technological advances. The methodology has been developed and improved during 9 years, 15 groups, and 3 different universities. Our results demonstrate that the methodology is adaptable with new technologies that might arise; it also presents the advantages of avoiding plagiarism in students and a personalized induction for every speciﬁc student in the learning process.


Introduction
The Internet has revolutionized the way in which information systems are conceived, and the Web has become the framework to publish and consume all types of multimedia contents and resources [1]. The impact of this new digital world has transformed the software industry [2] and also been reflected in educational environments and more now with the tendency of remote activities.
The Web provides a wide range of resources and services, one of them focused on the teaching/learning process, but it also causes several challenges. Educators must design new strategies not just for the classroom but also to cultivate out-of-classroom studying time with meaningful homework. There are some classical examples implemented as classroom activities or projects to show to the students the working of their field. However, there is a problem when these activities become classical: many solutions might be found on the Web. The existence and availability of these public solutions are a real challenge for teachers who want to reuse these specific learning materials, since valuable extra class time devoted to studying activities could end up as a mere copying exercise of someone else's work. Rehashing these activities will leave the teacher with no certainty that the students have learned their subjects. Hence, the current communication technologies bring also new risks and forms of non-ethical behavior that sometimes are not easy to detect [3].
The paper is organized as follows: First, we give a brief summary of the difficulty of teaching/learning programming, the challenges of teaching web programming, and some strategies implemented by other researchers. Then, we explain how we have taught an introductory Web Programming engineering-level course attending the modern requirements and using the PBL approach. Later, we describe the experimental process carried out to improve the methodology. In this section, we explain the process of various years of polishing the methodology, the students and universities involved, and argue in what sense it is adaptive to new technologies. Then, the result of years improving the integrating project is described with a syllabus of web programming and its methodology. Afterward, we exemplify our methodology with our last course (carried out remotely because of the coronavirus pandemic problem) emphasizing the different activities together with the concepts that students are expected to learn to acquire their proficiency. In addition, we discuss the benefits of using this methodology and give our conclusions in the last section.

Difficulties of Teaching/Learning Programming and Challenges of Web Development
Many works have been written about the difficulties of teaching computer related subjects. In particular, this section will discuss some works exposing the difficulty of teaching and learning programming in general. Then, we focus on explaining the challenge of teaching web programming. Lastly, we discuss those works proposing different strategies in teaching web programming and web development.

The Difficulty of Teaching and Learning Programming
Teaching and learning programming is a difficult task that requires a lot of effort, dedication, training, and mathematical knowledge, among other skills. So, why is computer programming so difficult to learn? Bosse et al. [17] consider that programming is a crucial part of software engineers training and trying to identify difficulty patterns related to learning how to program. Piteira and Costa [6] study the difficulties in learning programming using teachers and students' opinions and exam results. They identified that the difficulties arise in a lot of aspects: the contents of the programming topics, limited practical sessions, material presented by teachers, etc.
The complex combination that arises from the described situation is a serious problem that causes lack of motivation and eventually, the abandonment of a course. Figueiredo et al. [10] comment that it is important to act as soon as this discouragement is noticed; the follow-up of each student must be immediate and personalized. They affirm that it is possible to build a profile of each student's competences and skills in introductory programming to record their improvement and encourage growth.
Some authors have focused on proposing new ways of teaching programming skills [7]. Others try to understand how to awaken computational thinking [8,9,11,18,19]. The programming difficulty encompass other paradigms, like Object Oriented Programming [5] and Web Programming, as emphasized in the next subsections.

The Challenge of Teaching Web Programming
Wang and Zahadat [12] conducted a study where they emphasize that the explosive growth of Web 2.0 Technologies present a significant challenge for teachers focused on teaching web development. In other studies, they presented an IT educator's perspective and describe some challenges and problems of teaching Web development. Some of the approaches that they presented are: Web development to user interaction, client-side and server-side Web development, real-world applications, and constructivist teaching methods.
In a very similar sense, Xinogalos and Theodore [14] make an important study about the main challenges a professor can find when teaching web programming. Liu and Phelps [13] present a similar study in terms of challenges and also include important tools that should be used in the teaching process of web programming. They focus on a junior level course, similar to our case, but they are more busy teaching the foundations of web programming and sharing their experiences than the technologies themselves.
All previous authors agree that teaching web programming is a challenging task. Douce [15], for example, carried out a study about understanding the tutor's perspective in the teaching of web technologies, interviewing 12 teachers and agreeing that the issues of programming, solving problem skills, and including several technologies in a course, is a challenging topic not only for students but also for teachers.
Guo and Koufakou [20] summarize the educational problem with respect to the complexity of web involving cloud computing technologies. It involves vast technologies that teachers need to cover such as high-performance computing, distributed systems, networks, databases, security, data analytics, etc. and includes web mobile development in the curriculum [21].
Connolly [22] provides a historic overview of the key knowledge areas potentially needed by full-stack (involving front-end, back-end, and DevOps) from 2008 to 2018. He shows that current full-stack developers need to know recent concepts and technologies such as frameworks in the front-end and back-end; cloud native architectures; web sockets; APIs; reactive programming; parallel coding patterns, etc. However, he comments that one of the key teaching problems in any computing program is that concepts, techniques, and technologies are taught within separated courses (e.g., databases, networks, programming), but in industry, they are parts of larger heterogeneous environments. Students must be competent and be able to put all knowledge together into a single application [23].

Teaching Strategies in Web Programming
Wang and Zahadat [12] have developed a method consisting of four elements: (a) Concentrate on AJAX; (b) Divide the course in two: one focused on the client and one on the server; (c) Assign projects that integrate topics with real world applications; and (d) Use constructive teaching methods. Although what they propose is very interesting and useful, some curricula include a single subject related with web programming. Susmita Kar et al. [24] also have reformed their curricula in a two-semester web course; they consider it to have a huge impact on achieving the minimum required skill in the web development field in the software industry.
Rosenbloom et al. [16] propose a twelve-week course that involves starting with Model View Controller (MVC) frameworks and including web service topics as RESTful but specifically specifies that students should have prior basic knowledge.
Connolly [25] has proposed that dedicating several courses to web content is a good start; another approach consists in integrating web practices throughout the curriculum. Maiorana [26] discusses a case study based on the administration of a logging system, covering the main topics of web programming, databases (transactions, stored procedures), and security aspects. We take into account, partially, the Maiorana methodology to design the basic framework of our practices. However, we do not take into account any security aspects in depth as this is not the focus of the course.
We know that it is not easy for students with little experience in web programming to absorb so much information in a short period of time. However, one of our objectives, in a first course, is teaching the students fundamental concepts of front and back-end web application development through the learning process of putting all knowledge together into a single application using current tools so that in the future when new web technologies appear they can quickly migrate to the new ones.

A Web Programming Engineering-Level Course
Web Programming is a topic with high technological content and maybe one of their main purposes is either for programming jobs or for future courses that require web programming. Next subsections start by explaining the role of the web developer in the industry and what should be the main objective of a first web programming course; then we explain a case about how we have taught it by employing project-based learning.

Fundamentals
Although web programming is, in some cases, only one or two courses within a computer science curricula, the role of the web developer in the industry is itself a professional trade. To build websites and web-based apps, web developers work with Markup languages, high-level programming languages, libraries, frameworks (front-end or back-end), and database. Web developer's jobs may be split depending on whether they are working as a front-end, back-end, or full-stack developer. Full-stack developers specialize in both the front-end and back-end. Jordan Shropshire, et al. [27], give a more complete definition about what is a full-stack developer. Considering the above, understanding front-end and back-end concepts are the backbone part of Web Development.
Web programming and web development are not the same, as mentioned by Connolly [22]; one of the key difficulties while teaching web development is that it has a large amount of potential topics, more than can possibly be covered in a single course. A decade ago learning web programming meant to know HTML, CSS, and a back-end language programming. However, now, web development means to know web programming and also learning frameworks, MVC, AJAX, different protocols like HTTP, TCP, FTP, etc; server configuration, web services (WSDL, REST), security aspects; database access, docker, etc. The reality is that being a web developer requires knowing several courses and one of them is Web Programming.
Wang and Zahadat [12], proposed the division of a web programming curriculum in at least two courses: one focused on the client side and the other one on the server side. We also propose two programming courses, but with the following strategy: the first one covering generalities, concepts, the technologies currently in use, knowing front-end and back-end, and being proficient in web programming. The second one covers specific topics like front-end frameworks to build user interfaces, Model View Controller (MVC) Frameworks, and Web Services. Depending on the curricula, it may require other helper courses like computer security, databases, service oriented architecture, etc.; but it depends on the undergraduate career profile. This advanced course or helper courses will not be the subject of this paper and we will focus on the beginner one.

Project-Based Learning
From a teacher's perspective, it is easy to monitor students' growth by employing continuous evaluation. However, how can we engage students to be interested in increasing their own knowledge and skills? Project-Based Learning (PBL) is a good strategy and more in selected topics of computer science. Fioravanti et al. [28] have reported that applying PBL in Software Engineering topic has led to students being more enthusiastic and positive. In addition, as discussed by García-Peñalvo [29], in the education innovation indicators give PBL as one of the suggested strategies to deal with the new generations.
Sometimes PBL is confused with problem-based learning. The second one sometimes is implemented by teachers in partials or at the end of the semester. The first one is more directed to the application of knowledge, whereas problem-based learning is more directed to the acquisition of knowledge [30]. PBL is more complicated to apply than problembased learning because it might be implemented during a complete course or between different subjects. One of the difficulties lies in how to merge the project with the syllabus of the subject(s).
In subjects with high technological content, developing competences in students is more beneficial when concentrating all knowledge together into a single application [23]. So, we have used PBL in our suggested course.

Remote Desktop Application as an Integrating Project
Ten years ago, a course for developing a web interface project very similar with an existence operating system was proposed [31]. Such a project started not covering a complete course but only including some laboratory practices. Later, it evolved to be an integrating project, which has been applied from the beginning until the end of a course. The integrat-ing project consists on the development of a Remote Desktop Application that emulates a commonly used Operating System where instead of an interface-to-hardware communication as is the case in a normal operating system, the interface has communication and functionality through HTTP based communication.
We have found that the familiarity of the students with the operating systems' design given by everyday use of computers was an advantage, as the students could focus their efforts on the Web Programming concepts and it did not add a layer of cumbersome extra challenges to the task, so the students could focus on learning web development.
An Operating System (OS) is special software that allows a user to take advantage of the hardware of a computer. An OS has two principal purposes [32]: (i) Present an environment where the user can run different programs; and (ii) Control the various hardware parts that form the computer and allow the user programs to run. The two OS purposes are very easy to differentiate and identify as separate entities, i.e., a normal computer user does not need to know the details of how the OS calculator made an arithmetic operation and how the result appears on the screen. Because a student in computer science topics must be familiar with at least one OS, he could intuitively understand how the OS should interact with the user without even knowing how the OS is interacting with the hardware.
Even more, the part of the operating system that interacts with the user has some very convenient elements to make the interaction as frictionless as possible between the operator and the machine. Some examples of these interactive elements include icons, bars, windows, shortcuts, and commands. These elements vary between OS vendors and between different versions of an OS from the same vendor.
Given the clear separation achieved between the front and back-end part, it makes sense to propose a Remote desktop based on an existing OS as an integrating project for the web course. The student with this project will have the freedom to choose the specific look and feel of the interactive elements and simulate different common programs normally available to an OS user, delivering a good number of learning activities that can easily cover the full content of a normal course.
The integrating project has required a student to choose an existing OS in order to replicate it in terms of web design (front-end) and to develop some modules so that a simulation is actually reached in terms of operability and good design. Figure 1 shows a Data Flow Diagram (DFD) about the general final-user perspective of the Remote Desktop based on an existing OS. The dotted rectangle states a general login process, following the idea of Maiorana with respect to the login system [26]. Once a user authenticates, the desktop is shown. Then, an application option can be chosen by the user as many times as he wants, until a shutdown application has been chosen. Although our focus is a Remote Desktop Application, the DFD can illustrate any website system. The teacher participation has consisted in teaching concepts, guiding the students in the process of designing and developing the project.

Experimental Process
Our experimental process is described from three main standpoints: First, the students involved in receiving the teaching and learning strategy of the Remote Desktop as an integrating project described in Section 3.3, from when it has been applied, statistics on the compliance, and some recommendations. Second, statistics about all front and back-end technologies taught from the first course when PBL was applied until the time the paper was written. Finally, statistics about the opinion of the students who have received this teaching/learning strategy.

Experimental Universe and Applied Evidence
Our teaching/learning methodology has been applied for 9 years with 15 different groups and in three different colleges: 5 at Universidad Panamericana (UP); 4 at the Technological Institute of Tuxtla Gutiérrez (ITTG); and 6 at the Polytechnic University of Chiapas (UPCh). See Table 1 for a statistical summary; the approved column signals when the students were able to demonstrate their knowledge and deliver their project, having their evidence accepted. Note that, in recent courses (at the top), the approval percentages (last column "%") were better compared to the last one. Gradual changes were implemented with each iteration of the course; these include adjustments in topics' content due to the emergence of new technologies; differences in the duration of each applied course (see column Grade in Table 1, q quarter or s semester); and student's evidence, for example, columns Initial Test (IT), Middle Test (MT), Final Test (FT), Laboratory Practices (LP), and Integrating Project (IP) denote the activities that students had to deliver in that course. You can see that, in the last 6 courses the methodology has been stabilized, including the last course that was imparted in remote mode due to the COVID-19 pandemic problem. On the other hand, we can observe that groups imparted in UP and ITTG have the best approval index. Although we must clarify that the courses given in these Universities have longer duration than in the UPCh. In addition, in the semester when this course was imparted over ITTG, the students had already a previous database course, whereas the ones from UPCh or UP (particularly DAW6344 and PW1) had not. Another clarification is that over UP, the students did not have any previous basic network training, so the students were a bit hampered when confronted with the client-server model.
Our analysis of the data showed that, in the case of UPCh, it was important to divide the course in two, as suggested by [12,33], and more because the duration course was by quarter. In the case of ITTG that already had two courses focused on the development of web applications, it was recommended to students to conclude their Web Programming course before taking their Advanced Topics in Web Programming Technologies course. In the case of UP, we have suggested including a Network and Database course before the Web one and to split the course in two as was mentioned above.
Making these changes will open the possibility of including in advanced courses another methodologies course. For example, Harriger and Woods [34] proposed a teaching method based on the development of websites for local businesses, together with a webbased software development methodology. Another work that suggests something similar is that of Margaret et al. [35], where the development of a portal web with teams of two or three students is proposed. Table 2 illustrates historical web technologies that worked in each of the 15 groups. In the upper part, you can see the year which each of the groups corresponds to. The table shows the front-end and back-end technologies (first two columns). We can observe several technologies that were previously seen in the courses but not anymore, such as ASP and JSP. In addition, in the table it can be seen that MySQL is the best Database Server technology we have taught, which made us think that we could integrate other object-oriented technology such as MongoDB, which you can see in the last groups.

Technologies and Desktop Operating Systems Worked in All Courses
PHP and JavaScript Server (Node.js) have been the most recent server programming languages we have used in these courses. Note that these languages have not been taught at the same course, since in the back-end part of the project, students were left free to choose the programming language; this has caused some students to select Node.js and .NET. In this sense, we have observed that only 10% of the students prefer to use some technology different from the one proposed in class.
Another analysis is reported in Table 3, which illustrates a relation of all desktop operating systems that worked in each of these groups. The first column of the table shows a category of the different operating systems (based on Windows, Linux, MAC, Mobiles, and others); the second column describes the desktop operating system, in some of them it is defined a specific version; the rest of the columns specify how many students have chosen such an operating system. From the table, we can see that when the group is very large students have repeated the OS and the risk of plagiarism (at least in the front-end topics) is bigger. On the other hand, when groups are smaller the OS chosen are always different; therefore, the risk of plagiarism is lower. It is normal and even desirable for classmates to share and help each other over the course. This is not exclusive to current classmates; this is the case even from past students of the course. It is inevitable that sometimes students will share source code for their solutions. Unlike other areas, at least from our experience observation, to reuse source code is in fact a good engineering practice; it is important that students know how to adapt good code of another solution to their own solution.
The selection process of the desktop operating system has always been free for the students. However, sometimes the students want to choose the same one; the suggestion has always been that they look for another alternative or at least not to repeat the same desktop operating system by 3 students or more.

Students' Statistical Opinion
Aiming to analyze the impact the development of the Remote Desktop Application had created in the students, in 2019 we applied a survey to those who had received a course with this methodology. It does not includes the last course (2020); exact questions and answers can be visualized via: https://git.io/JegmF (accessed on 20 July 2021). Table 4 shows the general aspects of the survey. From the 369 students that had taken the course until 2019, we had a representative sample of them, 68 opinions, which will be analyzed below. (Note that those 20 students of PW20-2020 course were not included in this survey because they will be part of another one, explained later).

Number of questions 10
Open-ended questions 2 Closed-ended questions 8 Students receiving the methodology 379 Students sent the survey 245 Survey sent via email 214 Survey sent by social network 31 Students answering the survey 76 Table 5 illustrates a general opinion of the students with close-ended questions. Questions 1-5 had 3 possible answers: [yes, no, a little]. Question 6 only had two possible answers [yes, no]. Question 1 and 2 were included to reflect on how they felt in the past, Questions 3-5 were raised to reflect on the present considering an event of the past. With Question 6 we wanted to identify the lingering opinion left after their graduation. From the results shown in the table we conclude that although the students felt overwhelmed, they were left with a lot of positive opinions, including: the project was good intellectual challenge, it helps to strengthen their Web knowledge, and that it was a good self-learning strategy. Derived from Question 1, we concluded that we should improve and adjust the workload.   Finally, two open-ended questions: (a) What was your first impression when you found out you were going to develop a Remote Desktop Application as a final project?; and (b) Final comments. With these two questions, we tried to identify some unknown aspects that students could notice. For Question (a) we extracted some keywords, highlighting: Emotion, Challenge, Interesting, Afraid, New knowledge. For Question (b) we found remarkable and positive answers (especially from graduated students) but also some negative answers (especially among still not graduated students). Some suggestions were received like using server-side frameworks, although they also considered that those topics could be overwhelming for an introductory course. Table 6 reports the results obtained with a survey applied with our last course (PW20, Table 1). This last survey is based on those applied in Table 5, omitting the last question because it does not apply; the survey was answered by 18 students. From the results shown in the table we conclude that although the project is already not so overwhelming, it is a variable that must be considered when a course is relatively short. Derived from Question 1, we concluded that effectively, with every new course, we have improved the methodology and adjusted the workload in a good direction. From Questions 2-4, we can conclude that most students think the project was a good intellectual challenge, it helped to strengthen their Web knowledge, and that it was a good self-learning strategy. From Question 5, we have identified that although most students think that the integrating project is a good strategy, a few students do not like the strategy yet.

Result: An Integrating Project Included in a Web Programming Course
The integrating project which we have applied for nine years has been improved course after course. We consider two main results: (a) A syllabus for an Introductory Web Programming course; and (b) A method about how to teach and learn Web Programming by developing a Remote Desktop Application using PBL.

Syllabus: Learning Units and Learning Outcomes
The following syllabus that we propose is based on the following reasons: (a) Studies of teachers' perspectives [15,36]; (b) Modern computer science web curriculum [25,37]; (c) Industry requirements, emphasized in Section 3.1; and (d) Our experience of years of teaching web programming, reported in Section 4. Our restriction is to provide in a single course, web programming topics of front-end and back-end, similar to Dugan [38]. Hence we have conformed the following general units:

1.
Front-end: Design and development of web pages; 2.
Front and back-end interaction. Table 7 abstracts the topics and technologies for each unit. The first unit achieves three learning outcomes: (i) Design of web pages on the client side using HTML5 and CSS3 technologies; (ii) Development of programs involving the use of a programming language on the client side (JavaScript) and access their functionality through HTML5 and CSS3; and (iii) Knowledge of different client frameworks used in the design phase (e.g., Bootstrap, Material design, etc.) and the libraries used in the client programming phase (e.g., jQuery). As mentioned before, to consolidate knowledge and skills in front-end base technology, modern technologies to build user interfaces based on JavaScript, like React and AngularJS, will be left for a second more advanced course. The second unit achieves the following learning outcomes: (i) Description of the historical perspective of the Internet, the family of TCP/IP protocols, and World Wide Web (WWW); (ii) Knowledge of the client/server architecture focusing on the HTTP protocol mechanisms; (iii) Web servers and databases.
Finally, the third unit achieves three learning outcomes: (i) Identification of existing technologies for server-side web programming; (ii) Knowledge of the paradigm of web programming on the server side; (iii) Development of web programs using a serverside language.
We propose teaching one of the active server programming technologies: PHP, ASP.NET, JavaScript server, as shown in Table 7, or any other currently active technology (the selection of the server language programming is transparent to the methodology and the decision is left to the instructor according to their experience). Regardless of the language being used, the web programming paradigm (client and server execution; cookies and database connection; session variables and AJAX) should not vary. With these three units we cover the main topics of an introduction to web programming. To not saturate the students and considering that it is a first course of web programming, we have decided to include additional topics like Model View Controller (MVC) Frameworks in other more advanced courses.

A Method for Teaching and Learning Web Programming Using an Integrating Project
When starting a new course, a teacher, once knowing the syllabus, asks the question about how the course will be evaluated and taught. The next subsections explain, first, the evidence classified by a type of proficiency and then how such evidence must be developed and delivered using PBL.

Proficiency
Programming skills, computer programming requires many cognitive skills. Thinking and problem-solving skills are some of the core skills required by students for learning programming [39]. However, one of the benefits of computer programming is also nourishing the problem-solving skill [40].
Knowledge, within a Competency-Based Assessment, knowledge is defined as a competence that students must acquire during a course. According to the first two levels of Bloom's cognitive domain, knowledge and understanding are basic and very important skills that a student must possess, since the learned concepts serve as a platform to come into new knowledge [41]. Walraven et al. [42] carried out a study about how students acquire knowledge and solve information problems and what kind of criteria they use when evaluating results.They conclude that students spent most of their time searching and scanning and only a small fragment of time processing and organizing information. This compromises their level of knowledge.
To achieve a good balance between theoretical and practical knowledge as grounded above and taking into account our experience of years of teaching web programming (reported in Section 4, in particular, deductions of Table 1) and the students opinion, the activities and projects we propose are classified into two types of competencies: (a) Knowledge (middle and final test), and (b) Skills (PBL and laboratory practices). Table 8 abstracts eight pieces of evidence classified in these competencies. The integrating project: after years of polishing the integrating project explained in Section 3.3, we propose the strategy of guiding the students in developing the Remote Desktop Application following the proposal illustrated in Figure 3. The methodology is divided vertically (time representation) into four blocks: Block 1 involves the initial part of the project with front-end topics such as HTML, CSS, and JavaScript (Unit 1 in Table 7). Block 2 includes Back-End technologies (Unit 2 in Table 7). Block 3 and 4 includes Front and Back-End interactions (Unit 3 in Table 7); these blocks are the final part of the project and can be completed once the back-end technologies have already been taught. Figure 3 also shows, horizontally, the evidence described in Table 8. As can be seen in the red rectangle, the development of the project covers the entire course. It starts by requiring that each student chooses an existing Operating System (Block 1 in Figure 3, as it is also explained in Section 3.3). The choice must be replicated by the student in terms of its front-end design. The main aim, in this stage, for the students is to learn front-end technologies by having a reference in good design (an operating system already consolidated). In general, software design is a complex cognitive process [43]. Reaching a good user interface is also complex and important, because it can facilitate interactions between the user and the application. User experience is quite an intricate field that involves anticipating the user preferences and then creating an interface that understands and fulfills those preferences. The user experience not only focuses on aesthetics but also maximizes responsiveness, efficiency, and accessibility of a website. Considering that designing a good user experience is time consuming, proposing a new appearance and interface is not the objective of this project. Instead, we prefer the students to challenge themselves to reach the design already established. The project demands students to stick as closely as possible to the design of the operating system they have chosen.
Then, client/server concepts are explained to the students and they must configure the different servers their project requires (Block 2 in Figure 3). The final project description starts by proposing which server programming language they prefer to work with (Block 3 in Figure 3). It is important that each student makes an opinionated decision in advance. With this decision, the teacher achieves a double goal, first, to make them see advantages and disadvantages of the different technologies, and second, to minimize the risk of copying between classmates. Laboratory practices: Grade must measure personal skills and growth, so we divided the project into small grading units or laboratory practices and we kept a record of their development status. These practices stack over time and build the foundation of the integrating project. We have broken up all practices into three blocks, in this case, they are also the three learning units of the syllabus: (a) Front-end; (b) Back-end; and (c) Front and back-end interaction. In Figure 3, the laboratory practices (within skills evidence) are made in blocks 1 until 3; these make synergy with almost the whole integrating project. The last block is left without laboratory practice to reduce workload in the students and they can prepare their final delivery (a detailed example of laboratory practices is explained in Section 6.2).
Acquiring Knowledge: one of the instruments used to identify the acquisition knowledge competency is performing a test, which can be theoretical and/or practical. The theoretical tests usually measure the memorization of concepts, but it will not work to assert the acquisition of the skills required to solve pertinent problems. Usually practical tests give evidence about the achievement of some level of expertise. However, practical tests have time constraint problems: some students may be able to finish in the time slot assigned and some may not, but this may measure their agility more than the depth of their skills. Regardless of the type of test applied to the student, they are important as they serve to identify possible weaknesses that the students might still have. After the exam, we can work with them to remove those weaknesses and to know if they have reached their knowledge proficiency.
Hence, (and taking into account the experience portrayed in Table 1) two exams are proposed: midterm and final (Blocks 2 and 4 in Figure 3 respectively). The midterm exam includes concepts about front-end and back-end (internal rectangles with light green and solid green), and teacher must identify those students' weaknesses. The final exam has the objective of demonstrating significant knowledge of front-end, back-end, and understanding on the client/server architecture, HTTP protocol, configuration ports, session variables, cookies, and AJAX (light green, green, and dark green) and also identifying if students demonstrate proficiency in those weaknesses identified in the midterm exam. It can also be noticed in the figure that the exams are outside the scope of the integrating project but integrated into the total evidence. This means the project development supports the enforcement of theoretical and practical knowledge.

Matching the Integrating Project with an Introductory Programming Course
To explain how the syllabus is coupled with the integrating project and give certainty about the starting up of our proposal, we will use our last course, which was 100% remote because of the Coronavirus Disease (COVID-19) pandemic. This course, so-called Introduc-tion to Web Programming, comprises 16 weeks, each week involving three face-to-face hours and three extra-class hours. Table 9 details each piece of evidence (describing laboratory practices) with an estimated time inside and outside the classroom. Table 9. Detail of all pieces of evidence applied in the example course of web programming. The next subsections explain in detail the different parts that compose the integrating project, how it is developed during the course, making synergy with the laboratory practices, and the knowledge tests we have applied.
Designing the Remote Desktop: this stage requires every student to choose existing Operating System like a Linux Distribution or a specific version of Windows, macOS, Android, Windows Phone, iOS, etc. The choice is analyzed in terms of its front-end design. The complete list of activities of this stage, together with the knowledge that the students must acquire or apply, are shown in Table 10. Note that the table shows activities that can be matched one to one with the processes of Figure 1. With the development of the initial project, students will manage to acquire knowledge in a set of front-end technologies, (e.g., HTML, CSS, JavaScript, and derived libraries). Table 10. Laboratory practices for the initial project and learning topics: H = HTML, C = CSS, JS = JavaScript, D&Q = DOM and JQuery.

No.
Practices Back-end, configuring the Server: Even though configuring web working tools for developers using technologies such as LAMP, XAMP, WAMP, and MAMP is relatively easy and also students demonstrate certain satisfaction when using any of these encapsulated technologies [44], installing one of these technologies can be a tedious task with no significant learning. The menial problems that usually arise from the installations can make the student ignore the more important job of learning the server concepts and techniques without the use of tools. These basic concepts include Web Server definitions, Database Management System (DBMS), FTP, etc.; it is an important part of the learning process to focus on much more important aspects such as configuration of ip, port number, session id, maximum amount of file uploads, etc., which are indeed part of the Web Paradigm. For this reason, this part of the project helps the students understand such concepts and provide continuity to the project integration but now scaling to the Remote Desktop.
Back-end implementation, the result of the final project will be a Remote Desktop HTTP-based protocol. Its development starts after the client/server concepts have been explained and students have carried out practices concerning installation of different servers ( Table 9, No. 14). Students may propose which server programming language they prefer to work with. This triggers the students to explore different technologies and also minimizes the risk of copying between classmates. The complete list of activities of this stage, together with the knowledge that the students must acquire or apply, are shown in Table 11.

Training Web Programming Skills by Developing Laboratory Practices
As mentioned in Section 5.2.2, grade must measure gradual personal growth, so we have divided the integrating project into smaller laboratory practices. We consider that the development of these practices conform the success of the project. Note that, before giving the specifications of each laboratory practice, the teacher must explain the topics that encompass them. We have classified the laboratory practices in three learning units (already described in Section 5.1).
Front-end ( Table 9, No. 3-8): are practices focused on supporting the development and design of the project but also on clarifying topics such as HTML, CSS (respectively HTML5 and CSS3), JavaScript, and libraries. Table 10 describes each laboratory practice and the web technologies that the students are expected to learn and exercise:

•
In the laboratory practice 1 the students learn the general structure of an HTML page together with basic tags to format fonts. • In practice 2, through a Login html page design, the students enforce html tags like divs, inputs, forms, links, etc. and start using CSS. • JavaScript concepts are included in practice 3, with a Calculator web page, students consolidate the different ways to include styles, CSS selectors, the use of ids and class; and start programming with JavaScript to do functionality to the web calculator. • In Practice 4, designing a light version of an Editor system, students understand HTML DOM and JavaScript libraries; in this part, more experimented students could explore some front-end frameworks like Bootstrap, JQuery, etc.; data persistence is not requested yet.
Each of these laboratory practices is only an example; teachers following the idea of the laboratory practices could include other, similar ones. In addition, each of the laboratory practices must be connected to the selected operating system's look and feel. Figure 4 illustrates an example of a Windows 95 operating system designed by one of the students. The left part of the figure shows the desktop and the options; the right part of the figure shows the calculator and the login interface.
Back-end (Table 9, No. 9-11 and 13-14): are practices to help the students understand concepts such as web server configuration: IP, setting a port number, session id, maximum amount of file uploads, etc; Database Management System (DBMS), FTP: • The first laboratory practice, Installing a Web Server, consists in delivering a simple practice where students present a simple page executing it in the server side. Depend-ing of the instructor experience, students might work with any particular Web Server technology, giving students freedom to explore different approaches; no matter the choice, it is important to take special care of the main configuration files that will be processed by the server. • The next laboratory practice, client side vs. server side, comprehends which part of the script runs on the server and which part on the client; students must deliver a practice in two different computers: one being the web server and the other one being the client that will connect using a web browser. • The third laboratory practice, DBMS, consists of the students understanding the separation and interaction between the three different entities, the User Interface, the Web Server and the Database Server; it involves knowing the required server programming sentences (instructions) to establish communication between them. CRUD operations in DBMS are left for the next unit. Taking into account that this activity is only 5.5 h long, security aspects are not considered because they are not part of this course but they are considered for more advanced courses. We have identified that some students without a previous background in network topics have some difficulties in understanding the client and server communication paradigm. We recommend this topic to be studied previously. The list of activities of these practices, together with the knowledge that the students must acquire or apply, are shown in Table 12. Client-server interaction ( Table 9, No. [15][16][17][18][19][20]: in this part of the course, the students must have already achieved experience, at least a little, and knowledge about Front and Back End concepts. He/she must be prepared to incorporate a mixture of technologies to close his/her integrating project. At this point, the teacher will choose a server programming language to teach this paradigm. Years ago, we used ASP and JSP; recently we have turned to PHP or JavaScript server with Node.js. We recommend starting with PHP as a more didactic choice, as we have identified that students with no experience in the server-client paradigm get it faster. We have also noticed that the way JavaScript is processing in the server side gets the students confused with the functionality of the client side. Regardless of the choice, we have proposed practices incorporated in this unit. Table 11 abstracts the following: • Cookies and database connection: the practice consists in implementing a simple authentication mechanisms (see Login and Desktop in Table 11) by accessing a database and decide what type of user has been logged (Maiorana, [26], suggests a simple, useful version). In this practice, the students perfect their knowledge of the different instructions that can be programmed over the server side. They also improve their perspective knowledge of the client side (JavaScript) by avoiding data latency doing corresponding validations. It is suggested to apply cookie concepts. • CRUD operations in DBMS: implement the User Manager system of Table 11, where it is possible to add, delete, update, and list user's personal data. • Files and Session variables: it consists in implementing a text editor system (see Editor in Table 11) where each user can create, read, and update his own files. At least, with the following functional attributes: font family, font size, and the following commands: "do" and "undo" options. Files must be stored in the server side. • AJAX: implement the File explorer described on Table 11, where each user can list and delete his own files in real time. It must be possible to open the listed files with the notepad. It must contain a file searcher using asynchronous communication, in other words, while the user types a key its file coincidences should be appearing. Figure 5 illustrates front-end and back-end of various operating systems implemented by students. The left part shows a simple login in ubuntu using the HTTP protocol (see the URL); the right part at the top shows an editor system (notes) under macOS; the right part at the bottom shows a simple file explorer using AJAX in Windows XP. Note that the figure illustrates different user experience design. Each of them represents an individual effort by students. Finally, a reflection obtained from this last class taught remotely is that it helped the students to better understand the client-server concepts. For the laboratory practices, some students had to install the web and database servers on their own computers, and in other cases they did so by installing them on remote computers at the University.

Knowledge Evaluation
There are two exams being applied: midterm (Table 9 No. 12) and final (Table 9 No. 21). The midterm exam is split into two parts: (i) concepts and (ii) small problems. The concepts exam will include general and basic aspects about Front-end. Notice that this exam is not about the perfect memorization of HTML tags, CSS attributes, or JavaScript instructions but more about their general functionality. The second part consists in solving small application problems through the JavaScript language and HTML DOM.
The proposed final exam is also split into the same two parts: (i) concepts and (ii) a small problem. The concepts part has the objective of demonstrating the understanding on the client/server architecture, HTTP protocol, configuration ports, session variables, cookies, and AJAX. The problem part consists in solving a small problem using server communication and programming.
Lastly, the small problem in both exams could be as easy as developing a web page that prints the sum of two numbers or calculating the number of days between two dates. It is important that the student focus on the application of the studied technologies, more than in the difficulty of the problem presented.

Discussion and Conclusions
Web programming is becoming an indispensable requirement in software development, especially for the new generation of entrepreneurs and innovators, who want to have a formation focused on having a full-stack development, more than just using existing platforms. These new students' profiles want to employ themselves with their own ideas instead of just being employees. It is no longer enough to use traditional applications and visit web pages daily; the real challenge in the future is to create more innovative web applications rather than retrying traditional ones.
We believe that our methodology is an innovative teaching strategy for web programming courses. According to [45], an innovative teaching method is any communication method used to serve the purpose of teachers without destroying the objectives of the learning; based on curriculum requirement and students' needs. The described methodology has been continuously adapted and implemented (Table 1) because we have taken into account students' feedback, which has been used to consolidate the activities and general principles of the methodology. Questionnaires given to students have been used to polish the activities, like the ones shown in Tables 5 and 6.
The research questions presented in the Introduction are answered as follows: (a) A web programming engineering-level course has been proposed in Section 5, the proposal includes a teaching/learning methodology based on PBL in order to build a common application to all students such as a Remote Desktop but having a different operating system design for each student (as reported in Table 3) in order to avoid plagiarism as discussed in Section 4.2. (b) Every student can follow his/her own tempo when making their own Remote Desktop project as explained in Section 3.3, going to the depth they consider is required, as long as they complete the required tasks (as exemplified in Sections 6.1 and 6.2). It can be a real challenge to keep up with some details on the interfaces, but those details can be skipped without losing the general thread of the course. This has both the benefits of personalizing the learning process and also making it harder for the students to copy the work of their companions (the risk is lower with smaller groups as illustrated in Table 3). (c) Table 2 shows how despite the years and the different technologies being introduced year after year, the methodology is still in force. Our methodology can be adapted and updated accordingly to the newest web tools that can and will be appearing, without being outdated.
We have also given some suggestions to colleges and teachers. The suggestions were specified to each of the colleges in their curricular plan that have already implemented the methodology. These can be applied to other curricula around the world that are in similar circumstances. Another suggestion consists in that teachers who are looking for a teaching/learning strategy in unique courses involving Web Application Development might use this research. This strategy is appropriate as long as the teacher faces students with previous knowledge of structured and object-oriented programming and, it would be formidable with students with previous knowledge of databases and network communication.