Research and Apply Emerging Web Technology Trends

This comprehensive guide delves into the dynamic world of web technology trends, exploring their impact on modern web development. From the fundamentals of client-server architecture and web programming concepts to the intricacies of emerging technologies like Reactjs, Internet of Things (IoT), and Artificial Intelligence (AI), this resource provides a thorough understanding of the evolving landscape. Learn about user-centered design principles, the benefits of jQuery, and the importance of testing web applications across various browsers. Practical examples and code snippets illustrate key concepts, enabling you to apply these trends in your own web development projects. This guide is an essential resource for aspiring and experienced web developers seeking to stay ahead of the curve and leverage the latest advancements in web technology.

Research and apply emerging web technology
trends

Table of Contents
Assessment Task 1 – Formative...................................................................................................................2
Short Answer Questions..........................................................................................................................2
Multiple Choice Questions.......................................................................................................................6
Assessment Task 2 - Summative..................................................................................................................7
Activity 1: Objective: By completing this activity, you will have the competency to achieve the
knowledge to understand web technology and its core concepts...........................................................7
Activity 2: Objective: By completing this activity, you will have the competency to achieve the
knowledge to understand emerging web technology trends and their uses...........................................9
Activity 3: Objective: By completing this activity, you will have the competency to achieve the skills to
test web applications in a variety of browsers, and rectify any problems that arise.............................11
Activity 4: Objective: By completing this activity, you will have the competency to achieve the skills to
create code to apply web technology....................................................................................................15
References.................................................................................................................................................17
1

Assessment Task 1 – Formative
Short Answer Questions
1. What is web technology?
Web Technology is a means of communication system established among computers connected
in a network using markup languages. It provides an interface between clients and server. Web
sites are created using multimedia packages and programming languages like HTML and CSS (Li,
2004).
2. What is a trend? More importantly, what is a web technology trend?
Web technology is constantly changing and expands over time at a high rate, making it
unstable. Hence, there are always some applications that are trending in the field of web
development. The trends of web development in 2018 include: Progressive Web Apps, Single
Page websites, Motion User Interface, and Improved Online Support (Ercan, 2010).
3. What is the difference between web technology and a web application?
Web technology refers to communication among computers and a website can be created by
bare knowledge of HTML and CSS, but a web application is more complicated and needs to
access data using database and hence in addition to HTML, a web application will need the
knowledge of languages such as Javascript, PHP, AJAX, etc. (Mika, 2005)
4. How would you ensure you use the right web technology to deliver an appropriate web
application to a client?
The web technology chosen to develop a web application should be based on some criteria
such as:
 Size and complexity of a website.
 Time to Market or duration of web application development.
 Cost, Security, and Scalability (Auer, 2007).
5. What are the main types of web programming control structures?
The main types of control structures are:
 Sequential – This is the basic mode of flow when a statement is executed after
completion of its previous statement in a sequence.
2

 Selection – When a condition is applied to choose from two options, a decision is
made from 2 different paths.
 Iteration – This is used when a piece of code needs to be repeated multiple times at
a given point (Florescu, 2003).
Figure 1 Control Structures
6. What is a web browser? Compare the functionalities of Google Chrome, Internet Explorer
and Mozilla.
The web browser is an application that is used to display web applications by acquiring
information from World Wide Web and then displaying it on user’s screen. A distinct URL is sent
to the server by browsers to search for the required.
The different browsers can be compared on the basis of their functionalities like performance,
ease of use, and security. Chrome and Firefox load websites quickly with better performance
while Explorer shows notification for slow performance. Firefox doesn’t include pinned tabs to
common websites. Chrome provides the functionality to reopen tabs that didn’t shut down
well. IE gives visual search options while searching. Chrome is not good against phishing attacks
(Ratanaworabhan, 2010).
7. What is the TCP/IP OSI reference model? Briefly, explain the four (4) layers.
The TCP/IP reference model has been used to share resources over a network. It has a simple
and versatile architecture. It is used to connect one computer to another in a robust network.
The four layers of the model are:
 Host-to-network layer: It is bottommost layer that is used to connect a host to the
network.
3

 Internet layer: This layer controls the delivering of IP packets in the network using IP
protocol. It is used to avoid congestion and responsible for independent traversing of
packages.
 Transport layer: This layer breaks packets into smaller pieces for efficient transmission
by adding header data and transmitting it in sequence.
 Application layer: It is the topmost layer of the model that contains various
applications such as TELNET, FTP, SMTP for peer to peer conversation (Melnik, 2000).
Figure 2 TCP/IP Reference Model
8. Why is it important to keep up to date with web technology?
Web technology is constantly evolving and it is important to keep up with the trends because it
provides a platform for effective service. If we don’t keep track of latest trends then there’s a
huge possibility of falling behind in the market leading to missed opportunities for work. It will
also lead to irrelevant work and disorganization. Resistance to new technologies will lead to the
downfall of a company (Conole, 2008).
9. What is Object Oriented (OO) programming?
Object oriented programming is based on the concept of treating real-world entities as objects
where the main focus is on the data around which the problem revolves. OO programming
consists of data as attributes and methods that are being applied to the data to manipulate
them (Larman, 2012).
10. How could OO programming be a benefit to a web application?
OO programming proves to be of great importance to a web application as:
 It includes inheritance that allows creating a subclass from main class with same
attributes.
4

 It provides data security and prevention from unauthorized access by encapsulating
data by hiding the important data and showing only basic data to the users.
 It also allows creating a new user-defined data type in a function.
 It reduces the cost, time, and line of codes in a program.
11. Why do you think it is important to follow web technology trends?
It is important to follow trends in web technology as it gives a chance to enhance a website by
using new technologies. It can help in accessing the data more wisely and add more complex
and necessary features and functionalities to the website (Fogg, 2012).
12. How would you explain web technology trends to a client?
Web Technology trends can be explained to the clients by a means of proper communication.
Not being from a technical background, it will be difficult for a client to understand different
trends and they will want to stick to the common technologies but one can show them the use
of trends practically and settle at a win-win situation for both parties.
13. You have just created a web application for Google maps. How would you explain the
google map application and technology to a client?
To make a client understand the application and technology, a review should be given to him
about how it actually works. The technology behind google maps is telconator, it simply
performs all the functions of routing paths to calculating distance on google maps at high
speeds (Lazar, 2004).
14. What is the most common use of a database server?
The data server is used in back-end system to access the data on a website and use methods for
data analysis, manipulation, and storage. It provides most of the functionality to a website and
responsible for data organization. It is responsible for any changes in data on a webpage.
15. How does Laravel compare to MySQL? Why might a developer choose one (1) over the
other?
Laravel Eloquent provides simple working of the database with less code but in Mysql, custom
codes can be written to perform an action. A developer chooses Laravel server when a single
entity needs to be processed and CRUD operations are performed while when large records
have to be read then Mysql is a better approach than Laravel database server (Despa, 2014).
5

Multiple Choice Questions
1. What layers are present in the TCP/IP OSI reference model?
a. Application
b. Transport
c. Internet
d. Host to network
e. All the above
The correct answer is (e).
2. There four (4) main concepts in Object Oriented programming they are:
a. Inheritance
b. Inclusion
c. Encapsulation
d. Envisioning
e. Polymorphism
f. Abstraction
g. Subtraction
The correct answer is (a), (b), (e), and (f).
3. In JavaScript, there are two (2) basic types of control structures, they are:
a. Loops
b. Conditionals
c. If Statements
d. For Statements
The correct answer is (a) and (b).
4. Web Technology could include the following:
a. Refers to the means by which computers communicate with each other
b. Uses multiple technologies to provide different methods of communication
c. Refers to Hypertext markup language only
d. Refers to the means by which mobile devices display contents
The correct answer is (a).
6

Assessment Task 2 - Summative
Activity 1: Objective: By completing this activity, you will have the competency
to achieve the knowledge to understand web technology and its core concepts
1. If web technology is about the means by which computers communicate to each other,
explain the terms of client-server architecture.
Client/server architecture used in networking is defined as the connection to computers where
one computer acts as a server and all other computers are clients. Servers are dedicated to
deliver and manage resources, network traffic, and provide information. Clients are the
machines that rely on information passed by the server to perform further operations. HTTP
protocol has been used to establish a connection between client and server and sharing of
information is done by sending a request in form of XML and JSON and receiving responses
from servers (Li, 2004).
2. Briefly explain web programming concepts.
Web programming concepts include:
• Hypertext transfer protocol (HTTP)- HTTP protocol is used to establish a
communication between client and server in client/server architecture. It is the
basis of data transfer in World Wide Web.
• Stateless programming- Stateless programming means that no record of previous
interaction with the server is stored and hence the new interaction will purely
depend on the information sent by it only. Stateless means that no state will be
preserved by the system.
• Session management- Session management is the storage of information for a
particular user. After login, he will be registered with the server and his
information will be used on all pages until he logs out.
• Authentication and web security- Security is a credential part of web application.
Authentication makes sure who are allowed to see what and web security
prevents unauthorized users to withdraw from further web pages.
• Client-side programming- Client-side programming is concerned with UI of the
webpage and it deals with the design and features of a website. It includes
themes, basic functionalities, and responsiveness of a website. It deals with the
front-end programming of the webpage using languages like HTML, CSS, and
Javascript (Cooper, 2000).
7

3. In terms of analysis and design, what does the term “user-centered design” (UCD) mean?
If you were to build a web application, why would you use jQuery than JavaScript? What
are the benefits of using jQuery, if any? Would you still need to know JavaScript to
develop a jQuery web application, explain?
The user-centered design approach is based on involving users in each step of website
designing. It aims at making website design that suits a user and focuses on their needs. UCD
approach involves interactive and generative methods and tools for designing. The four basic
phase of UCD is: Understanding the actual context for which a website is being developed,
listing user requirements, preparing design solutions as per user needs, and then evaluating
those solutions to check if they match up to user requirements and performance level.
While developing a website, jQuery is used over JavaScript as most of JS functionalities can be
performed in jQuery with fewer lines of codes. JQuery has predefined functions that can be
directly used. It provides browser compatibility and faster and easier to use. It can be used to
handle AJAX operations and has been fully tested and verified. Still, we need to know JavaScript
to implement jQuery as JavaScript is the language used in jQuery. To implement out-of-box
things in jQuery, we’ll need to know JavaScript to perform greater functionalities (Jokela, 2003).
8

Activity 2: Objective: By completing this activity, you will have the competency
to achieve the knowledge to understand emerging web technology trends and
their uses.
1. What is Reactjs? Briefly describe the history of Reactjs and why Reactjs exists.
Reactjs is a JavaScript library used to create user interfaces for web pages, especially for
a single page website. It can be combined with other libraries in MVC architecture to
create a website, where it controls view level. It came into existence in 2011, inspired by
XHP, a simple framework for PHP. It came into existence when first applied to Facebook
feed as it is efficient in updating data with HTML documents and hence been widely
used on Facebook and Instagram as these sites are most data-driven (Ciliberti, 2017).
2. Why would a developer use Reactjs?
Reactjs is one of the most successful JavaScript libraries in today’s scenarios. It is used in
the market for its simplicity to change data without reloading page and its native
approach. Reactjs is famous for its code reusability feature that provides us with an
android, iOS and web application all at the same time. It is easy to learn and implement
in a program. React has one point control system for data binding and it provides an
easy testing environment as we can change a variable and see the output of any
triggering action there (Ciliberti, 2017).
3. What emerging web technologies will there be in 2020?
Emerging web technologies by 2020 include:
 Internet of Things- The emerging internet advances connection between devices,
business, and technology. By the end of 2020, it is expected that companies will
focus on developing websites that concentrate on controlling household devices
remotely by communicating data. IoT will provide a platform to engage with real-
world using the technology. Wearable IoT devices have been a greater
investment and will yield a greater output.
 Artificial Intelligence- Building a website using artificial intelligence will be a next
big thing in the world. AI has seen great enhancements in recent pasts where
virtual robots are used to perform certain useful tasks. AI will improve the
designing skills and paths for website development by replacing the designing
structure with the algorithmic design.
 Static Site Generators- Static site generators will be a good option for bloggers.
Static sites will only use files to store data instead of a database. Hence its
loading time will be reduced as compared to a dynamic site. Its use will be
9

flexible and can be achieved with the use of plug-ins. Apart from bloggers, static
site generators will e a great option for start-ups too as it will be easy to create
with low setup cost and better performance with faster speed.
 Motion UI- Motion UI will be developer’s first choice while developing a website
as it will provide a great combination of animations on the website and motion
in native sites. It will give a life to a website by taking it to next step from 2D
websites. This will be achieved by a bundled package of CSS patterns and many
JavaScript libraries.
 Flat/One Page Design- This will be useful in case of providing all information at a
single place. Users won’t have to traverse from one page to another to get
information but all the information will be provided to the user on a single page.
 ChatBots- There are many communication sites nowadays but chatbots will
provide an interactive UI with a messaging facility that will be a catch by 2020.
Chatbots will boost online sales as it will be easy to carry intellectual commands
to order online. Conversational commerce will be preferred in the market by
both businessmen and consumers. Customer service care, solving customer
problems and connecting with customers will drastically change after the
enhancement of chatbots (Antezana, 2009).
10

Activity 3: Objective: By completing this activity, you will have the competency
to achieve the skills to test web applications in a variety of browsers, and
rectify any problems that arise.
1. Using the file “validateme.html”, validate the file using the W3C Validator
(https://validator.w3.org/) and fix the issues that arise.
Figure 3 Before Validation - Error Check
11

Figure 4 Errors to be Corrected
Error 1: Doctype declaration added
Error 2: Character data is entered inside head tag without any subtag.
Error 3: Title tag is missing inside the head tag, hence it is not closed in order.
Figure 5 After Validation Correction
2. Using the file “fixmyjs.html”, validate the JavaScript within the file using JS Hint
(http://jshint.com/) and fix any issues that arise.
Figure 6 Before Correction
12

Figure 7 Validation Result
Figure 8 After Correction- Enter input
13

Figure 9 After Correction- Result
14

Activity 4: Objective: By completing this activity, you will have the competency
to achieve the skills to create code to apply web technology.
1. Using the file “changes.html”, convert the JavaScript to jQuery.
JQuery is Javascript only but there are slight changes in its syntax. For example, JS’s
document.getElementByID is represented as $ in jQuery.
Figure 10 After converting Javascript into jQuery
2. You are to convert the file “HelloWorld.html” into its Reactjs equivalent.
Hello, World program created using Reactjs.
Figure 11 Reactjs Code
15

Figure 12 Hello World Output
16

References
 Antezana, E., Kuiper, M. and Mironov, V., 2009. Biological knowledge management: the
emerging role of the Semantic Web technologies. Briefings in bioinformatics, 10(4),
pp.392-407.
 Auer, S., Bizer, C., Kobilarov, G., Lehmann, J., Cyganiak, R. and Ives, Z., 2007. Dbpedia: A
nucleus for a web of open data. In The semantic web (pp. 722-735). Springer, Berlin,
Heidelberg.
 Ciliberti, J., 2017. Creating Modern User Experiences Using React. js and ASP. NET Core.
In ASP. NET Core Recipes (pp. 361-409). Apress, Berkeley, CA.
 Conole, G., De Laat, M., Dillon, T. and Darby, J., 2008. ‘Disruptive
technologies’,‘pedagogical innovation’: What’s new? Findings from an in-depth study of
students’ use and perception of technology. Computers & Education, 50(2), pp.511-524.
 Despa, M.L., 2014. Comparative study on software development
methodologies. Database Systems Journal, 5(3), pp.37-56.
 Ercan, T., 2010. Effective use of cloud computing in educational institutions. Procedia-
Social and Behavioral Scienc
 Florescu, D., Grünhagen, A. and Kossmann, D., 2003. XL: An XML programming language
for Web service specification and composition. Computer Networks, 42(5), pp.641-660.
 Fogg, B.J., 2002. Persuasive technology: using computers to change what we think and
do. Ubiquity, 2002(December), p.5.
 Jokela, T., Iivari, N., Matero, J. and Karukka, M., 2003, August. The standard of user-
centered design and the standard definition of usability: analyzing ISO 13407 against ISO
9241-11. In Proceedings of the Latin American conference on Human-computer
interaction (pp. 53-60). ACM.
 Larman, C., 2012. Applying UML and Patterns: An Introduction to Object Oriented
Analysis and Design and Interative Development. Pearson Education India.
 Lazar, J., Dudley-Sponaugle, A. and Greenidge, K.D., 2004. Improving web accessibility: a
study of webmaster perceptions. Computers in human behavior, 20(2), pp.269-288.
 Li, L. and Horrocks, I., 2004. A software framework for matchmaking based on semantic
web technology. International Journal of Electronic Commerce, 8(4), pp.39-60.
 Melnik, S. and Decker, S., 2000. A layered approach to information modeling and
interoperability on the web. In Proc. of the ECDL'00 Workshop on the Semantic Web.
 Mika, P., 2005. Flink: Semantic web technology for the extraction and analysis of social
networks. Web Semantics: Science, Services and Agents on the World Wide Web, 3(2-3),
pp.211-223.
17

 Ratanaworabhan, P., Livshits, B. and Zorn, B.G., 2010. JSMeter: Comparing the Behavior
of JavaScript Benchmarks with Real Web Applications. WebApps, 10, pp.3-3.
18