logo

የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 1 of 64
Research and apply emerging web technology trends 1

Web Development and Database Administration

Level V
Based on March, 2022 Version-I

Module Title: Researching and applying emerging web technology

trends
Module Code: EIS WDDBA M01 1224
Nominal Duration: 60 Hours

Prepared by: Ministry of Labor and Skill

September, 2024
Addis Ababa, Ethiopia

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 2 of 64
Research and apply emerging web technology trends 1

Contents

Contents
Acknowledgment .......................................................................................................................................... 4
Acronym ....................................................................................................................................................... 5
Introduction to Module ................................................................................................................................. 6
Unit one: Emerging web technology trends and their uses ..................................................................... 7
1.1. Web Technology Trends and Applications ................................................................................... 8
1.1. Selecting Optimal Web Technologies for Database-Driven Startups ......................................... 12
1.2. Evaluate various web browsers ................................................................................................... 16
1.3. Practical Applications and Emerging Trends .............................................................................. 17
Self-check 1.1 ............................................................................................................................................. 18
Unit Two: New web technology trends in a portfolio ............................................................................ 20
2.1. Implement new web technology trends in a portfolio ................................................................. 21
2.2. Test web applications across different browsers ......................................................................... 31
Self-Check 2.1............................................................................................................................................. 33
Operation sheet 2.1 : Downloading Angular.JS ..................................................................................... 35
Operation sheet 2.2 : Building interactive user interfaces .................................................................... 36
Operation sheet 2.3 : AngularJS Controller Application ...................................................................... 38
Operation sheet 2.4 : Creating Table ...................................................................................................... 41
Operation sheet 2.5 : HTML DOM ......................................................................................................... 45
LAP Test .................................................................................................................................................... 48
Unit Three: New Information Analysis ................................................................................................... 49
3.1. Supervise the collection of system-related data from clients. ..................................................... 50
3.2. Analyze client feedback and determine new system requirements ............................................. 51
3.3. Document findings, highlighting potential problems and solutions. .......................................... 52
Self-Check 3.1............................................................................................................................................. 54
Unit Four: System specifications And Standards .................................................................................. 56
4.1. Review and update system documentation ................................................................................. 57
Approval Name: Signature: Date:
PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 3 of 64
Research and apply emerging web technology trends 1

4.2. Collaborate with clients to validate specifications. ..................................................................... 58

4.3. Obtain final approval and sign-off from stakeholders. ............................................................... 59
Self-Check 4.1............................................................................................................................................. 60
Reference .................................................................................................................................................... 62

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 4 of 64
Research and apply emerging web technology trends 1

Acknowledgment

The Ministry of Labor and Skills (MoLS) would like to express its gratitude and appreciation to
the instructors and experts from regional TVT bureaus, TVT colleges, and industry practitioners
who contributed their expertise and experience in preparing the training module for Research
and Apply emerging web technology trends.

Once again, our heartfelt thanks go out to the entire team for their unwavering commitment in
developing this training module for digital infrastructure services short term training. Your
dedication and expertise have laid the foundation for future vocational education and training
endeavors.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 5 of 64
Research and apply emerging web technology trends 1

Acronym
 DHCP - Dynamic Host Configuration Protocol
 DNS - Domain Name System
 FTP - File Transfer Protocol
 HTTP - Hypertext Transfer Protocol
 IoT - Internet of Things
 IP - Internet Protocol
 LAN - Local Area Network
 MAN - Metropolitan Area Network
 MPLS - Multiprotocol Label Switching
 OHS - Occupational Health and Safety
 PAN - Personal Area Network
 SDI - Software-Defined Infrastructure
 SSL/TLS - Secure Sockets Layer / Transport Layer Security
 TCP/IP - Transmission Control Protocol/Internet Protocol
 UPS - Uninterruptible Power Supply
 VoIP - Voice over Internet Protocol
 VPN - Virtual Private Network
 WAN - Wide Area Network

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 6 of 64
Research and apply emerging web technology trends 1

Introduction to Module
In today's rapidly evolving digital landscape, staying abreast of emerging web technology trends
is essential for developers, businesses, and consumers alike. These trends encompass a wide
range of innovations, from progressive web applications (PWAs) and responsive design
technology. By researching and applying these advancements, organizations can enhance user
experience, improve performance, and streamline processes. As web technologies continue to
transform how we interact with information and services, embracing these trends not only fosters
innovation but also positions entities to remain competitive in an increasingly digital world.
Understanding and leveraging these technologies is critical for maximizing potential and driving
future growth..
This module covers the units:
 Emerging web technology trends and their uses
 New web technology trends in a portfolio
 New information Analysis
 System Specifications and Standards
Learning Objective of the Module
 Identify emerging web technology trends and their uses
 Implement of new web technology trends in a portfolio
 Analyze new information
 Confirm System Specifications and Standards
Module Instruction
For effective use this modules trainees are expected to follow the following module instruction:
1. Read the information written in each unit
2. Accomplish the Self-checks at the end of each unit
3. Perform Operation Sheets which were provided at the end of units
4. Do the “LAP test” giver at the end of each unit and

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 7 of 64
Research and apply emerging web technology trends 1

Unit one: Emerging web technology trends and their uses

This unit is developed to provide you the necessary information regarding the following content
coverage and topics:

 Web Technology Trends and Applications

 Selecting Optimal Web Technologies for Database-Driven Startups
 Browser Compatibility and Performance Optimization

This unit will also assist you to attain the learning outcomes stated in the cover page. Specifically,
upon completion of this learning guide, you will be able to:

 Review new developments in web technologies.

 Identify appropriate technologies for specific needs.
 Evaluate various web browsers

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 8 of 64
Research and apply emerging web technology trends 1

1.1. Web Technology Trends and Applications

The fast-paced nature of technology demands that developers keep up with innovations to remain
relevant. Reviewing new developments involves actively seeking information from reliable
sources and understanding how these trends impact web development practices.

 Key Resources for Staying Updated

One of the most trusted platforms for developers is the Mozilla Developer Network (MDN). It
provides comprehensive guides on the latest web technologies, such as WebRTC (Web Real-
Time Communication) for live video and voice communication. For instance, MDN’s resources
on WebRTC explain how to integrate video calling features into an application, which is
particularly useful for industries like telehealth and e-learning.

The World Wide Web Consortium (W3C) is another vital resource, offering updates on global
web standards. For example, developers can learn about the new Web Accessibility Guidelines
(WCAG), ensuring their websites are accessible to users with disabilities. Keeping track of such
standards is essential for creating inclusive digital experiences.

Community-driven platforms like Stack Overflow and Hacker News offer insights into real-
world challenges and innovative solutions. For instance, a trending discussion on Hacker News
might highlight the growing use of Vite.js, a modern build tool that provides faster development
workflows compared to older tools like Webpack.
 Practical Example

A developer building an online learning platform might discover from MDN that Progressive
Web Applications (PWAs) can offer offline capabilities, enabling students in low-internet areas
to access lessons. Implementing service workers based on MDN guidelines can help create a
seamless user experience.
Approval Name: Signature: Date:
PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 9 of 64
Research and apply emerging web technology trends 1

A. WebAssembly (Wasm)

WebAssembly is a binary instruction format for the web that allows for high-performance
applications.

 Performance Boost: Wasm executes code significantly faster than JavaScript, enabling
near-native performance for web applications. This is particularly beneficial for
demanding applications like games, video editing, and 3D graphics.
 Cross-Platform Compatibility: Wasm is designed to be portable and run efficiently
across different browsers and operating systems.
 Language Interoperability: Wasm can be generated from various programming
languages, such as C, C++, Rust, and Go, expanding the range of tools and technologies
available for web development.

B. WebXR

WebXR is a JavaScript API that provides a unified interface for accessing augmented reality
(AR) and virtual reality (VR) capabilities within web browsers.

 Immersive Experiences: WebXR enables developers to create immersive web

experiences that blend the physical and digital worlds.
 Accessibility: WebXR makes AR and VR more accessible to a wider audience by
leveraging the power of web browsers.
 Innovation: WebXR is driving innovation in areas such as e-commerce, education,
training, and entertainment.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 10 of 64
Research and apply emerging web technology trends 1

C. Serverless Computing

Serverless computing allows developers to build and run applications without managing servers.

 Scalability and Flexibility: Serverless functions automatically scale based on demand,

eliminating the need to provision and manage infrastructure.
 Cost-Effectiveness: Developers only pay for the actual execution time of their code,
making serverless computing a cost-effective solution for many applications.
 Focus on Core Business Logic: By abstracting away infrastructure concerns, serverless
computing allows developers to focus on building and deploying applications more
quickly.

D. Artificial Intelligence (AI) and Machine Learning (ML) on the Web

AI and ML are increasingly integrated into web applications.

 On-Device AI: On-device AI models can perform tasks like image recognition and
natural language processing directly within the browser, improving performance and
privacy.
 AI-Powered Web Search: AI algorithms are enhancing search engines by providing
more relevant and personalized results.
 AI-Driven User Interfaces: AI is powering new types of user interfaces, such as voice
assistants and chatbots, making web interactions more intuitive and natural.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 11 of 64
Research and apply emerging web technology trends 1

E. Progressive Web Apps (PWA) Enhancements

PWAs continue to evolve with new features and capabilities.

 Background Sync: PWAs can now synchronize data in the background, even when the
user is offline.
 Service Worker Improvements: Service workers are becoming more powerful,
enabling developers to create more sophisticated and interactive offline experiences.
 Web App Manifests: The Web App Manifest has been enhanced to provide more
control over how PWAs appear and behave on the home screen.

F. Privacy-Preserving Technologies

Privacy is a growing concern on the web. New technologies are emerging to enhance user
privacy.

 Differential Privacy: Techniques like differential privacy can be used to analyze data
while minimizing the risk of individual privacy breaches.
 Federated Learning: Federated learning allows AI models to be trained on decentralized
data, improving privacy and security.
 Privacy-Preserving Machine Learning: New methods are being developed for training
and deploying machine learning models while preserving user privacy.

These are just a few of the many exciting new developments in web technology. As these
technologies continue to mature, they will undoubtedly shape the future of the web and
transform the way we interact with the digital world.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 12 of 64
Research and apply emerging web technology trends 1

1.1. Selecting Optimal Web Technologies for Database-Driven Startups

Choosing the right technology for a project requires a deep understanding of both the available
tools and the project’s specific requirements. Developers must evaluate frameworks, libraries,
and tools to ensure they align with the intended functionality, scalability, and performance needs.
A. Front-End Technologies
 React: A JavaScript library for building user interfaces. It excels at creating dynamic and
interactive components, making it ideal for complex applications. React's component-based
architecture promotes code reusability and maintainability. Its large community and extensive
ecosystem provide a wealth of resources and libraries.
 Vue.js: A progressive JavaScript framework known for its simplicity and ease of use. Vue.js is
highly adaptable, allowing developers to gradually integrate it into existing projects. It offers a
flexible and intuitive syntax, making it easier to learn and use compared to some other
frameworks.
 Angular: A comprehensive JavaScript framework developed by Google. It provides a robust
structure and a wide range of built-in features, including dependency injection, routing, and
state management. Angular offers strong tooling support and a large community, but it can
have a steeper learning curve than React or Vue.js.
 HTML, CSS, and JavaScript: These are the fundamental building blocks of the web. HTML
provides the structure of web pages, CSS handles the styling and presentation, and JavaScript
adds interactivity and dynamic behavior. A solid understanding of these core technologies is
essential for any web developer.
 UI Libraries: UI libraries provide pre-built components like buttons, forms, and navigation
bars, accelerating development and ensuring a consistent visual style.
 Material UI: Based on Google's Material Design principles, offering a wide range of
customizable components.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 13 of 64
Research and apply emerging web technology trends 1

 Bootstrap: A popular and widely used library with a large community and extensive
documentation.
 Tailwind CSS: A utility-first CSS framework that provides a set of low-level utility classes for
building custom user interfaces.
B. Back-End Technologies
 Node.js with Express.js: Node.js is a JavaScript runtime environment that allows you to run
JavaScript on the server-side. Express.js is a minimalist and flexible web application
framework for Node.js. This combination enables fast and efficient development of web
applications using a single language (JavaScript).
 Python with Django or Flask: Python is a versatile and widely-used programming language.
 Django: A high-level web framework that emphasizes rapid development and follows the
"batteries-included" philosophy, providing many features out-of-the-box.
 Flask: A lightweight and flexible microframework that gives developers more control and
flexibility.
 Ruby on Rails: A popular Ruby-based framework known for its convention-over-
configuration approach, which aims to reduce the number of decisions developers need to
make. Rails emphasize rapid development and follows best practices, making it a productive
choice for many projects.
C. Database Technologies
Relational Databases (SQL):
 PostgreSQL: A powerful open-source relational database known for its advanced features,
strong community support, and robust security.
 MySQL: A widely-used and popular open-source database, known for its ease of use,
performance, and large community.
 SQL Server: A commercial database system from Microsoft, offering robust features, strong
security, and good performance.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 14 of 64
Research and apply emerging web technology trends 1

NoSQL Databases:
 MongoDB: A flexible document-oriented database that stores data in JSON-like documents. It
excels at handling unstructured and semi-structured data, making it suitable for applications
with evolving data models.
 Cassandra: A highly scalable and distributed database designed to handle massive amounts of
data across multiple servers. It is well-suited for applications with high write throughput and
low latency requirements.
 Redis: An in-memory data store that can be used as a cache, message broker, and more. It
provides fast data retrieval and is often used to improve the performance of web applications.
D. Cloud Platforms
 AWS (Amazon Web Services): The most comprehensive cloud platform, offering a wide
range of services, including compute, storage, databases, networking, and more. AWS provides
a pay-as-you-go model and a vast ecosystem of tools and services.
 Azure (Microsoft Azure): A powerful cloud platform with strong integration with Microsoft
technologies. It offers a wide range of services, including virtual machines, databases, and
AI/ML services.
 Google Cloud Platform (GCP): A highly innovative cloud platform with a strong focus on
data analytics, machine learning, and big data. GCP offers a range of cutting-edge technologies
and competitive pricing.
E. Considerations for Selection
 Scalability and Performance: The chosen technologies should be able to handle the
anticipated growth of your application in terms of user traffic, data volume, and processing
demands.
 Team Expertise: Consider the skills and experience of your development team. Choosing
technologies that align with their expertise will accelerate development and reduce the learning
curve.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 15 of 64
Research and apply emerging web technology trends 1

 Community and Support: Look for technologies with active and supportive communities.
This provides valuable resources, such as tutorials, documentation, and forums, which can help
you overcome challenges and find solutions.
 Cost: Evaluate the cost implications of each technology, including licensing fees, cloud
infrastructure costs, and potential development costs.
 Time-to-Market: Select technologies that enable rapid development and deployment to
quickly validate your business idea and get your product to market.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 16 of 64
Research and apply emerging web technology trends 1

1.2. Evaluate various web browsers

Web browsers serve as the gateway for users to interact with web applications. Each browser has
its unique rendering engine, tools, and features, which developers must understand to ensure
compatibility and functionality.

 Browser Features and Use Cases

Google Chrome is a popular choice among developers due to its powerful developer tools. For
instance, Chrome's Lighthouse tool can analyze a website's performance, accessibility, and SEO,
providing actionable insights to improve user experience. A developer working on an online
news site might use Lighthouse to optimize loading speeds and ensure that articles are accessible
to screen readers.

Mozilla Firefox, with its advanced debugging tools and privacy-first approach, is another
valuable option. A developer building a healthcare application can use Firefox to test the site’s
compliance with privacy regulations, such as blocking trackers and ensuring secure
communication.

Safari, commonly used on Apple devices, is indispensable for ensuring compatibility with
macOS and iOS ecosystems. For example, a developer designing a mobile-first application must
test animations and touch gestures on Safari to create a seamless experience for iPhone users.

Cross-Browser TestingEnsuring that a web application works consistently across browsers is a

critical step in the development process. Tools like BrowserStack allow developers to test their
applications on different browsers and devices. For instance, testing a responsive website on
BrowserStack can reveal layout issues on smaller screens or older browser versions. This helps
developers address compatibility problems before deployment.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 17 of 64
Research and apply emerging web technology trends 1

1.3. Practical Applications and Emerging Trends

 Implementing Progressive Web Applications (PWAs)

PWAs combine the best features of web and mobile applications, offering offline functionality,
push notifications, and fast load times. For example, a local news website can use PWAs to
allow users to read articles offline, ensuring uninterrupted access during internet outages.

 Adopting Serverless Architecture

Serverless computing, provided by platforms like AWS Lambda, enables developers to build
scalable applications without managing servers. A start-up launching a ride-hailing app can use
serverless functions to handle payment processing during peak usage, scaling effortlessly to meet
demand without additional infrastructure costs.

 Experimenting with Tailwind CSS

Tailwind CSS, a utility-first CSS framework, simplifies styling by using predefined classes. A
developer can use Tailwind to prototype a landing page with responsive design and test it across
browsers for consistency.

 Integrating AI Features

Artificial intelligence is becoming a standard feature in modern applications. For instance, an

online shopping website might integrate AI-based recommendation engines to suggest products
based on user preferences, increasing customer engagement and sales.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 18 of 64
Research and apply emerging web technology trends 1

Self-check 1.1
I. Read the statement carefully and if the statement is True say TRUE and If the
statement is false say FALSE.
1. WebAssembly (Wasm) allows for high-performance applications by executing code
faster than JavaScript.
2. Progressive Web Applications (PWAs) do not support offline capabilities.
3. WebXR provides a unified interface for accessing augmented reality (AR) and virtual
reality (VR) capabilities within web browsers.
4. Serverless computing requires developers to manage servers and infrastructure.
5. The World Wide Web Consortium (W3C) provides updates on global web standards,
including accessibility guidelines.
II. From the given alternatives choose the best answer for the statement
1. Which of the following is a benefit of using WebAssembly (Wasm)?
A) Slower execution than JavaScript
B) Cross-platform compatibility
C) Limited language interoperability
D) Only runs on specific browsers
2. What technology allows developers to build applications without managing servers?
A) WebRTC
B) Serverless Computing
C) Progressive Web Apps
D) WebAssembly
3. Which of the following frameworks is known for its utility-first approach to CSS?
A) Tailwind CSS
B) Bootstrap
Approval Name: Signature: Date:
PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 19 of 64
Research and apply emerging web technology trends 1

C) React
D) Angular
4. Which organization provides the Web Accessibility Guidelines (WCAG)?
A) World Wide Web Consortium (W3C)
B) Mozilla Developer Network (MDN)
C) Stack Overflow
D) Google
5. What is a key feature of Progressive Web Applications (PWAs)?
A) Requires an internet connection
B) Can synchronize data in the background
C) Does not support push notifications
D) Limited to mobile devices

III. Explain the following

1. Explain how WebAssembly (Wasm) enhances web application performance.

2. Describe the advantages of using Progressive Web Applications (PWAs) for online
learning platforms.
3. What role does the World Wide Web Consortium (W3C) play in web development,
particularly regarding accessibility?
4. Discuss how serverless computing can benefit startups in terms of scalability and cost-
effectiveness.
5. What are the implications of integrating artificial intelligence (AI) and machine learning
(ML) into web applications?

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 20 of 64
Research and apply emerging web technology trends 1

Unit Two: New web technology trends in a portfolio

This unit is developed to provide you the necessary information regarding the following
content coverage and topics:

 Web Development Implementation and Testing

 Browser Compatibility Testing and Debugging

This guide will also assist you to attain the learning outcomes stated in the cover page.
Specifically, upon completion of this learning guide, you will be able to:

 Develop code to apply the chosen web technologies.

 Test web applications across different browsers

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 21 of 64
Research and apply emerging web technology trends 1

2.1. Implement new web technology trends in a portfolio

Staying competitive in web development requires not only knowledge of emerging trends but
also the ability to implement these trends effectively in projects. This involves creating robust,
maintainable code that integrates the latest technologies and testing applications to ensure
compatibility across diverse environments. This section focuses on two critical aspects:
developing code to apply chosen web technologies and testing applications across different
browsers. These steps are integral to building a portfolio that highlights a developer’s technical
proficiency and adaptability.

Developing code to integrate new technologies into web applications is the first step in
implementation. This involves using modern frameworks, libraries, and coding practices to
ensure that applications meet current standards for performance, scalability, and usability.

2.1.1. Writing Efficient and Modern Code

When applying new technologies, developers should leverage tools and frameworks that simplify
development and enhance performance. For instance, a developer integrating Web Components
into a project might use LitElement, a lightweight library for building fast and reusable
components. By defining custom elements and encapsulating styles and functionality, developers
can create modular, maintainable code.

Example:
Suppose a developer wants to build a dynamic weather widget for their portfolio. They can use
OpenWeatherMap’s API to fetch weather data and display it in a responsive card.

 HTML Structure: Defines the layout for the widget.

 CSS: Uses CSS Grid for layout and animations for smooth transitions.

 JavaScript: Fetches data from the API and dynamically updates the DOM.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 22 of 64
Research and apply emerging web technology trends 1

A. Optimizing Code for Performance

Performance optimization is a crucial part of coding. Developers can use tools like Webpack to
bundle JavaScript files and reduce loading times. Additionally, tree-shaking techniques can
eliminate unused code, ensuring that only necessary components are loaded.

Example:

A single-page application built with React can benefit from lazy loading using the React.lazy()
function. This ensures that components are loaded only when required, improving page load
times.

JavaScript, as the language of the web, has evolved significantly since its inception. While
vanilla JavaScript (plain JavaScript without any external libraries or frameworks) is powerful,
building complex and scalable web applications with it alone can be challenging. This is where
JavaScript libraries and frameworks come into play. They provide pre-written code, architectural
patterns, and tools that streamline the development process, improve code organization, and
enhance application performance.

B. JavaScript Libraries and Frameworks

 Libraries: Libraries are collections of pre-written functions and objects that you can use
in your JavaScript code. They offer specific functionalities, like DOM manipulation
(jQuery), date/time manipulation (Moment.js), or data visualization (D3.js). You choose
which parts of the library to use and integrate them into your existing code. Think of
libraries as tools in a toolbox; you pick the tool you need for a specific task.

 Frameworks: Frameworks provide a more comprehensive structure for building web

applications. They dictate the architecture, provide conventions, and often include
features like routing, state management, and templating. You build your application

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 23 of 64
Research and apply emerging web technology trends 1

within the framework, following its rules and conventions. Think of a framework as a
blueprint for a house; you build the house according to the blueprint.

2.1.2. Overview of AngularJS

AngularJS is a powerful, open-source JavaScript framework primarily used for developing

Single Page Applications (SPAs). It enhances HTML with additional attributes, making web
applications more dynamic and responsive to user interactions.

A. Key Features:
 Data Binding: Automatically synchronizes data between the model and the view.
 MVC Architecture: Follows the Model-View-Controller design pattern, promoting
separation of concerns.
 Directives: Custom HTML tags that extend HTML capabilities.
 Dependency Injection: Simplifies the development and testing of applications.
B. Advantages:
 Facilitates the creation of SPA applications in a clean and maintainable manner.
 Enhances user experience with data binding.
 Enables unit testing and code reusability.
C. Disadvantages:
 Security concerns as it is a JavaScript-only framework.
 If JavaScript is disabled, the application becomes non-functional.
AngularJS components, including directives, controllers, filters, and more, providing examples
to aid understanding. It is aimed at software professionals looking to develop web applications
using AngularJS.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 24 of 64
Research and apply emerging web technology trends 1

2.1.3. Environment Setup for AngularJS

This chapter focuses on the necessary steps to set up the AngularJS library for web application
development.
A. Key Steps
 Download AngularJS:
You can obtain AngularJS from the official website. There are two main options:
 View on GitHub: Access the latest scripts.
 Download: Choose between legacy versions (less than 1.2.x) and the
latest version (1.3.x), with options for minimized, uncompressed, or
zipped files.
 CDN Access:
Alternatively, you can use a Content Delivery Network (CDN) to include AngularJS in your
project. This method offloads hosting responsibilities and allows for quicker access if users have
previously downloaded AngularJS from the same CDN.
Example Setup:
To illustrate how to set up AngularJS, here’s a simple HTML example:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-
beta.17/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController">
<h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>
<script>
Approval Name: Signature: Date:
PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 25 of 64
Research and apply emerging web technology trends 1

angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
</body>
</html>
B. Explanation of the Code
 Include AngularJS: The AngularJS script is linked in the <head> section.
 Define the AngularJS App: The ng-app directive initializes the AngularJS application.
 Controller Setup: The ng-controller directive specifies which controller to use for the
view.
 Data Binding: The expression {{helloTo.title}} binds the model data to the HTML.
When this code runs in a browser, AngularJS will Load and initialize the application, Connect
the specified controller to the view and Render the view with data from the model.This setup
serves as a foundation for building AngularJS applications, allowing for dynamic and interactive
web pages.
C. First application
Before creating actual Hello World ! application using AngularJS, let us see the parts of a
AngularJS application. An AngularJS application consists of following three important parts:
 ng-app : This directive defines and links an AngularJS application to HTML.
 ng-model : This directive binds the values of AngularJS application data to HTML input
controls.
 ng-bind : This directive binds the AngularJS Application data to HTML tags.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 26 of 64
Research and apply emerging web technology trends 1

The following reveal how AngularJS integrates with HTML

 The ng-app directive indicates the start of AngularJS application.
 The ng-model directive creates a model variable named name, which can be used with
the HTML page and within the div having ng-app directive.
 The ng-bind then uses the name model to be displayed in the HTML <span> tag
whenever user enters input in the text box.
 Closing </div> tag indicates the end of AngularJS application.
2.1.4. Directives

AngularJS directives are used to extend HTML. They are special attributes starting with ng-
prefix. Let us discuss the following directives:

 ng-app directive

The ng-app directive starts an AngularJS Application. It defines the root element. It
automatically initializes or bootstraps the application when the web page containing AngularJS
Application is loaded. It is also used to load various AngularJS modules in AngularJS
Application. In the following example, we define a default AngularJS application using ng-app
attribute of a <div> element.

<div ng-app="">

...

</div>

 ng-init directive

The ng-init directive initializes an AngularJS Application data. It is used to assign values to the
variables. In the following example, we initialize an array of countries. We use JSON syntax to
define the array of countries.
Approval Name: Signature: Date:
PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 27 of 64
Research and apply emerging web technology trends 1

<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},

{locale:'en-GB',name:'United Kingdom'},

{locale:'en-FR',name:'France'}]">

...

</div>

 ng-model directive

The ng-model directive defines the model/variable to be used in AngularJS Application. In the
following example, we define a model named name.

<div ng-app="">

...

<p>Enter your Name: <input type="text" ng-model="name"></p>

</div>

 ng-repeat directive

ng-repeat directive repeats HTML elements for each item in a collection. In the following
example, we iterate over the array of countries.

<div ng-app="">

...

<p>List of Countries with locale:</p>

<ol>

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 28 of 64
Research and apply emerging web technology trends 1

<li ng-repeat="country in countries">

{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}

</li>

</ol>

</div>

2.1.5. Expression
Expressions are used to bind application data to HTML. Expressions are written inside double
curly braces such as in {{ expression}}. Expressions behave similar to ng- bind directives.
AngularJS expressions are pure JavaScript expressions and output the data where they are used.
 Using Numbers
<p>Expense on Books : {{cost * quantity}} Rs</p>
 Using String
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
 Using Object
<p>Roll No: {{student.rollno}}</p>
 Using Array
<p>Marks(Math): {{marks[3]}}</p>
2.1.6. Controller
AngularJS application mainly relies on controllers to control the flow of data in the application.
A controller is defined using ng-controller directive. A controller is a JavaScript object that
contains attributes/properties, and functions. Each controller accepts $scope as a parameter,
which refers to the application/module that the controller needs to handle.
<div ng-app="" ng-controller="studentController">
...

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 29 of 64
Research and apply emerging web technology trends 1

</div>
Here, we declare a controller named studentController, using ng-controller directive. As a next
step, we define it as follows:
<script>
function studentController($scope) {
$scope.student = { firstName: "Mahesh", lastName: "Parashar", fullName: function() {
var studentObject; studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}
</script>
Now we can use studentController's student property using ng-model or using expressions as
follows:
Enter first name: <input type="text" ng-model="student.firstName"><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
2.1.7. Table
Table data is generally repeatable. The ng-repeat directive can be used to draw table easily. The
following example shows the use of ng-repeat directive to draw a table:
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat="subject in student.subjects">
Approval Name: Signature: Date:
PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 30 of 64
Research and apply emerging web technology trends 1

<td>{{ subject.name }}</td>

<td>{{ subject.marks }}</td>
</tr>
</table>
2.1.8. HTML DOM
The following directives are used to bind application data to attributes of HTML DOM elements:
 ng-disabled Directive
Add ng-disabled attribute to an HTML button and pass it a model. Bind the model to a checkbox
and see the variation.
<input type="checkbox" ng-model="enableDisableButton">Disable Button
<button ng-disabled="enableDisableButton">Click Me!</button>
 ng-show Directive
Add ng-show attribute to an HTML button and pass it a model. Bind the model to a checkbox
and see the variation.
<input type="checkbox" ng-model="showHide1">Show Button
<button ng-show="showHide1">Click Me!</button>
 ng-hide Directive
Add ng-hide attribute to an HTML button and pass it a model. Bind the model to a checkbox and
see the variation.
<input type="checkbox" ng-model="showHide2">Hide Button
<button ng-hide="showHide2">Click Me!</button>
 ng-click Directive
Add ng-click attribute to an HTML button and update a model. Bind the model to HTML and see
the variation.
<p>Total click: {{ clickCounter }}</p></td>
<button ng-click="clickCounter = clickCounter + 1">Click Me!</button>

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 31 of 64
Research and apply emerging web technology trends 1

2.2. Test web applications across different browsers

Testing ensures that web applications function consistently across various browsers and devices.
Each browser has a unique rendering engine, meaning that even minor inconsistencies can lead
to significant usability issues. Testing and debugging across platforms are crucial for delivering a
polished product.

 Cross-Browser Testing

Developers should use tools like BrowserStack, CrossBrowserTesting, or Sauce Labs to test their
applications on multiple browsers and operating systems. For example, a developer who has
integrated CSS Grid for responsive design might find that older versions of Internet Explorer do
not fully support the feature. Using polyfills or fallback layouts ensures compatibility.

 Practical Workflow for Testing:

Identify Target Browsers: Determine which browsers are most relevant for the project. For
example, an e-commerce platform might prioritize Chrome, Safari, and Edge.

Run Automated Tests: Use tools like Selenium or Cypress to automate test cases for consistent
behavior.

Manual Testing: Manually verify features such as animations and forms to ensure that they
render and function as intended.

Example:

A portfolio website featuring a custom image carousel must be tested for smooth transitions and
responsiveness. Using Chrome’s developer tools, the developer identifies that the carousel's CSS
animations lag on certain devices. Adjustments are made by optimizing the animation keyframes
and testing again to confirm improved performance.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 32 of 64
Research and apply emerging web technology trends 1

 Ensuring Mobile Compatibility

With mobile devices accounting for a significant portion of web traffic, developers must ensure
applications are optimized for smaller screens. Responsive testing involves tools like Chrome
DevTools’ Device Mode, which emulates different screen sizes and resolutions.

Example:

A Progressive Web App (PWA) built for offline functionality might include a feature for saving
articles. The developer tests the feature on various devices, ensuring that buttons and text fields
are appropriately sized and touch-friendly.

 Debugging and Accessibility Testing

Debugging tools like Chrome’s Lighthouse not only identify performance issues but also
highlight accessibility problems. For instance, if an application fails to provide adequate contrast
for text, the developer can adjust CSS styles to meet WCAG guidelines.

Example:

During testing, a developer notices that certain elements in dark mode do not comply with
contrast standards. They use Chrome’s accessibility tools to adjust the colors, ensuring that text
remains readable under all conditions.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 33 of 64
Research and apply emerging web technology trends 1

Self-Check 2.1
I. Read the statement carefully and if the statement is True say TRUE and If the
statement is false say FALSE.
1. AngularJS is primarily used for developing multi-page applications.
2. The ng-app directive in AngularJS initializes the AngularJS application.
3. Cross-browser testing ensures that applications work consistently across various
browsers.
4. JavaScript libraries like jQuery dictate the architecture of an application.
5. Lazy loading in React improves page load times by loading components only when
required.
II. From the given alternatives choose the best answer for the statement
1. What does the ng-model directive in AngularJS do?

A) Initializes AngularJS applications

B) Defines and binds application data to HTML input controls (Correct)

C) Manages routing in AngularJS applications

D) Enhances the performance of AngularJS applications

2. Which tool can be used to automate cross-browser testing?

A) AngularJS

B) Selenium (Correct)

C) LitElement

D) WCAG

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 34 of 64
Research and apply emerging web technology trends 1

3. What does tree-shaking in Webpack help with?

A) Creating animations

B) Lazy loading

C) Eliminating unused code (Correct)

D) Improving data binding

4. In AngularJS, the ng-repeat directive is used to:

A) Bind data to HTML input controls

B) Initialize AngularJS applications

C) Repeat HTML elements for each item in a collection (Correct)

D) Optimize application performance

5. Which of the following ensures mobile compatibility in web applications?

A) Using Chrome’s Lighthouse

B) Using Chrome DevTools’ Device Mode (Correct)

C) Implementing WCAG guidelines

D) Adding the ng-hide directive

III. Explain the following

1. Explain how ng-repeat works and provide an example of its use in an AngularJS
application.
2. Describe the role of the ng-controller directive and how it interacts with the $scope
object.
3. Why is cross-browser testing important in web development, and what tools can assist in
this process?

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 35 of 64
Research and apply emerging web technology trends 1

Operation sheet 2.1 : Downloading Angular.JS

Operation Title: Downloading and use Angular

Purpose: To Setting up the foundation for Angular

Steps in doing the task

4. Go to the official AngularJS website: https://angularjs.org/1.
5. Click the "Download" button.
6. A dialog box will appear, offering various options for downloading the library.
7. Choose the desired version (Legacy or Latest) and the file format (minimized,
uncompressed, or zipped).
8. Click the "Download" button to save the files to your computer.
9. Host the downloaded files on your web server.

Quality Criteria: Download and use

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 36 of 64
Research and apply emerging web technology trends 1

Operation sheet 2.2 : Building interactive user interfaces

Operation Title: Using directives for data binding, user input, and dynamic content

Purpose: To Setting up the foundation for Angular

Steps in doing the task

Step 1: Define the HTML Structure

 Create an HTML file named testAngularJS.htm.

 Include the AngularJS library using the following code in the <head> section:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

 Add a <div> element with the ng-app and ng-init directives. The ng-app directive
initializes the AngularJS application. The ng-init directive initializes an array of countries
in JSON format:

<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},

{locale:'en-GB',name:'United Kingdom'},

{locale:'en-FR',name:'France'}]">

</div>

Step 2: Define the Input and Binding

 Inside the <div> with the ng-app directive, add a paragraph element (<p>) asking the user
to enter their name. Include an input field (<input>) with the ng-model directive to bind
the input value to a variable named "name."

<p>Enter your Name: <input type="text" ng-model="name"></p>

 Add another paragraph element (<p>) and use the ng-bind directive to display the value
entered in the input field.

<p>Hello <span ng-bind="name"></span>!</p>

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 37 of 64
Research and apply emerging web technology trends 1

Step 3: Use the ng-repeat Directive

 Add a paragraph element (<p>) to display the text "List of Countries with locale:"

Create an ordered list (<ol>) to display the countries.

 Use the ng-repeat directive within a list item (<li>) to iterate over the countries array.
 Display the country name and locale for each country using curly braces {{ }}.

<p>List of Countries with locale:</p>

<ol>

<li ng-repeat="country in countries">

{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}

</li>

</ol>

Step 4: Run the Example

 Save the testAngularJS.htm file.

 Open the testAngularJS.htm file in a web browser.

Quality Criteria: The output should be look like the following

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 38 of 64
Research and apply emerging web technology trends 1

Operation sheet 2.3 : AngularJS Controller Application

Operation Title: Creating a simple AngularJS application

Purpose: To create a simple AngularJS application

Steps in doing the task

1. Create an HTML File:

 Open your text editor and create a new file named studentApp.html.

2. Add the Basic HTML Structure:

<html>

<head>

<title>AngularJS Controller</title>

</head>

<body>

3. Insert a Heading:

 Add a heading for your application within the <body> tag.

<h2>AngularJS Sample Application</h2>

4. Set Up the AngularJS Application:

 Create a <div> that will hold your AngularJS application. Use the ng-app directive to
initialize the app and ng-controller to define the controller.

<div ng-app="" ng-controller="studentController">

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 39 of 64
Research and apply emerging web technology trends 1

5. Add Input Fields for First and Last Name:

 Include input fields bound to the model using ng-model.

Enter first name: <input type="text" ng-model="student.firstName"><br><br>

Enter last name: <input type="text" ng-model="student.lastName"><br>

6. Show the Full Name:

 Use an AngularJS expression to display the combined full name of the student.

You are entering: {{student.fullName()}}

7. Define the Controller:

 Inside a <script> tag, define the studentController function, which sets up the student
object and the full name function.

<script>

function studentController($scope) {

$scope.student = {

firstName: "Mahesh",

lastName: "Parashar",

fullName: function() {

var studentObject = $scope.student;

return studentObject.firstName + " " + studentObject.lastName;

};

</script>

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 40 of 64
Research and apply emerging web technology trends 1

8. Link to the AngularJS Library:

 Add a script tag to include the AngularJS library from a CDN.

<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

9. Complete the HTML Document:

 Close the <div>, <body>, and <html> tags.

</div>

</body>

</html>

Quality Criteria: The output will look like the following

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 41 of 64
Research and apply emerging web technology trends 1

Operation sheet 2.4 : Creating Table

Operation Title: Creating Table

Purpose: To use the ng-repeat directive to efficiently create tables from data within an
AngularJS application.

Steps in doing the task

Step 1: Define the HTML Structure

 Create an HTML file named testAngularJS.htm.

In the <head> section, include the AngularJS library using the following code:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

Step 2: Add CSS Styling for the Table (Optional)

 Add the following CSS code within <style> tags in the <head> section to style the table.
This code adds borders, padding, and alternating row colors for better readability:

<style>

table, th , td {

border: 1px solid grey;

border-collapse: collapse;

padding: 5px;

table tr:nth-child(odd) {

background-color: #f2f2f2;

table tr:nth-child(even) {

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 42 of 64
Research and apply emerging web technology trends 1

background-color: #ffffff;

</style>

Step 3: Set Up the AngularJS Application and Controller

 Create a <div> element with the ng-app directive to indicate the start of your AngularJS
application.

Use the ng-controller directive to specify the controller (studentController in this case) that will
manage the data for this part of the view.

<div ng-app="" ng-controller="studentController">

</div>

Step 4: Create the Basic Table Structure

 Inside the <div> with ng-app and ng-controller, create a <table> element.

Add a table row <tr> for the header with table header cells <th> for "Name" and "Marks."

<table>

<tr>

<th>Name</th>

<th>Marks</th>

</tr>

</table>

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 43 of 64
Research and apply emerging web technology trends 1

Step 5: Use ng-repeat to Populate Table Rows

 Add another <tr> element within the <table>.

Use the ng-repeat directive to iterate over the student.subjects array within this row. This will
create a new table row for each subject in the array.

Within the table row, add table data cells <td> to display the subject.name and subject.marks
using double curly braces {{ }} for data binding.

<tr ng-repeat="subject in student.subjects">

<td>{{ subject.name }}</td>

<td>{{ subject.marks }}</td>

</tr>

Step 6: Define the Controller

 Create a <script> tag to define the studentController function.

Inside the function, set up the data structure for $scope.student with properties for firstName,
lastName, fees, and subjects. The subjects property is an array of objects, each containing name
and marks properties.

You can also define a function fullName within $scope.student to concatenate the first and last
names.

<script>

function studentController($scope) {

$scope.student = {

firstName: "Mahesh",

lastName: "Parashar",
Approval Name: Signature: Date:
PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 44 of 64
Research and apply emerging web technology trends 1

fees:500,

subjects:[

{name:'Physics',marks:70},

{name:'Chemistry',marks:80},

{name:'Math',marks:65},

{name:'English',marks:75},

{name:'Hindi',marks:67}

],

fullName: function() {

var studentObject;

studentObject = $scope.student;

return studentObject.firstName + " " + studentObject.lastName;

};

</script>

Step 7: Run the Example

 Save the testAngularJS.htm file.

Open the file in a web browser.

Quality Criteria:The output

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 45 of 64
Research and apply emerging web technology trends 1

Operation sheet 2.5 : HTML DOM

Operation Title: Manipulating HTML elements dynamically using AngularJS

Purpose: manipulate HTML elements dynamically using AngularJS directives for disabling,
showing, hiding, and handling click events.

Steps in doing the task

Step 1: Set Up the HTML Structure

 Create an HTML file named testAngularJS.htm.

Include the AngularJS library in the <head> section:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

Step 2: Create the AngularJS Application

 In the <body>, create a <div> element with the ng-app directive to initialize your
AngularJS application.

<div ng-app="">

</div>

Step 3: Implement the ng-disabled Directive

 Inside the <div>, create a table (<table>) to structure the elements.

Add a table row (<tr>) with two table data cells (<td>).

 In the first <td>, create a checkbox (<input type="checkbox">) and use the ng-model
directive to bind it to a variable named enableDisableButton. This checkbox will control
whether a button is disabled or not.
 In the second <td>, add a button (<button>) and use the ng-disabled directive. Set the
value of ng-disabled to the variable enableDisableButton. This means the button will be
disabled when the checkbox is checked, and enabled when the checkbox is unchecked.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 46 of 64
Research and apply emerging web technology trends 1

<tr>

<td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>

<td><button ng-disabled="enableDisableButton">Click Me!</button></td>

</tr>

Step 4: Implement the ng-show and ng-hide Directives

 Add two more table rows (<tr>) to the table, each with two table data cells (<td>).

In the first new row:

First <td>: Create a checkbox and bind it to a variable named showHide1 using ng-model.

Second <td>: Add a button and use the ng-show directive, setting its value to showHide1. This
button will be visible when the checkbox is checked and hidden when unchecked.

In the second new row:

First <td>: Create a checkbox and bind it to a variable named showHide2 using ng-model.

Second <td>: Add a button and use the ng-hide directive, setting its value to showHide2. This
button will be hidden when the checkbox is checked and visible when unchecked.

<tr>

<td><input type="checkbox" ng-model="showHide1">Show Button</td>

<td><button ng-show="showHide1">Click Me!</button></td>

</tr>

<tr>

<td><input type="checkbox" ng-model="showHide2">Hide Button</td>

<td><button ng-hide="showHide2">Click Me!</button></td>

</tr>
Approval Name: Signature: Date:
PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 47 of 64
Research and apply emerging web technology trends 1

Step 5: Implement the ng-click Directive

 Add another table row (<tr>) with two <td> elements.

In the first <td>, add a paragraph (<p>) to display the text "Total click:" followed by an
expression {{ clickCounter }} to show the value of a variable that will keep track of button
clicks. Initialize clickCounter to 0 in the ng-init directive in the main div.

In the second <td>, add a button with the ng-click directive. Set the value of ng-click to
clickCounter = clickCounter + 1. This will increment the value of clickCounter each time the
button is clicked.

<tr>

<td><p>Total click: {{ clickCounter }}</p></td>

<td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button></td>

</tr>

</table>

</div>

Step 6: Run the Example

 Save the testAngularJS.htm file.

 Open the file in a web browser

Quality Criteria: The output will be:

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 48 of 64
Research and apply emerging web technology trends 1

LAP Test
Name: ___________________ Date: ________________

Time started: ______________ Time finished: __________

Instruction:

Create a simple web application that displays student grades in a table format, allowing users to
interact with the table and dynamically modify the display using AngularJS directives.

Task 1: Display Student Data The application will initially load and display a table containing
student names, subjects, and their corresponding grades.

Task 2: Add New Students Users will have the option to add new students to the grade book.

Task 3: Edit Existing Grades Users will be able to edit the grades of existing students.

Task 4: Hide/Show Columns Provide checkboxes to allow users to show or hide specific
columns in the table

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 49 of 64
Research and apply emerging web technology trends 1

Unit Three: New Information Analysis

This unit is developed to provide you the necessary information regarding the following
content coverage and topics:

 Supervise the collection of system-related data from clients.

 Analyze client feedback and determine new system requirements.
 Document findings, highlighting potential problems and solutions.
This guide will also assist you to attain the learning outcomes stated in the cover page.
Specifically, upon completion of this learning guide, you will be able to:

 Supervise the collection of system-related data from clients.

 Analyze client feedback and determine new system requirements.
 Document findings, highlighting potential problems and solutions.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 50 of 64
Research and apply emerging web technology trends 1

3.1. Supervise the collection of system-related data from clients.

The process of analyzing new information is a critical step in web development. It ensures that
applications are built to align with client needs and industry standards. By systematically
gathering data, analyzing client feedback, and documenting findings, developers can create
solutions that address potential problems while meeting the project’s goals. This phase is
essential for identifying gaps, refining requirements, and paving the way for successful project
execution.

Collecting system-related data from clients is the foundation of analyzing new information. This
step involves engaging with stakeholders to understand their expectations, challenges, and goals.
Developers must employ effective communication techniques and tools to gather comprehensive
and accurate data.

 Methods of Data Collection

Interviews and surveys are among the most effective ways to collect information. For example, a
developer working on a new e-commerce platform might interview business owners to
understand their priorities, such as seamless payment gateways, user-friendly interfaces, and
efficient inventory management. Surveys distributed to end-users can provide insights into their
preferences, such as favorite features or pain points in the current platform.

Tools like Google Forms, Typeform, and SurveyMonkey are widely used to streamline the data
collection process. Additionally, direct observation of existing systems in use can reveal areas of
inefficiency or opportunities for enhancement. For instance, observing a client’s current
checkout process might highlight unnecessary steps that lead to cart abandonment.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 51 of 64
Research and apply emerging web technology trends 1

Example:

A web development agency tasked with redesigning a hospital management system conducts
interviews with administrators, nurses, and patients. Administrators emphasize the need for
streamlined reporting tools, while nurses request intuitive patient scheduling interfaces. Patients
express frustration with limited appointment booking options. These insights form the basis for
system improvement.

3.2. Analyze client feedback and determine new system requirements

Once data is collected, the next step is to analyze client feedback and translate it into actionable
system requirements. This involves identifying patterns, prioritizing needs, and distinguishing
between essential features and optional enhancements.

 Analyzing Feedback for Key Insights

Analyzing client feedback requires critical thinking and structured methodologies. For example,
if multiple stakeholders report difficulty navigating an existing system, it indicates the need for a
more intuitive user interface. Developers can use tools like Excel or Tableau to organize
feedback, generate reports, and visualize trends.

 Defining System Requirements

System requirements are derived from client needs and business goals. These requirements can
be categorized into:

Functional Requirements: Features the system must perform, such as processing payments or
generating reports.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 52 of 64
Research and apply emerging web technology trends 1

Non-Functional Requirements: Attributes like system performance, scalability, and security.

For instance, in the hospital management system example, the analysis might reveal that
administrators require automated reporting, nurses need a mobile-friendly interface for
scheduling, and patients want a self-service appointment booking portal. These become
functional requirements, while ensuring fast load times and data encryption address non-
functional needs.

Example:

A developer analyzing feedback from an educational platform finds that users frequently request
personalized learning paths. Based on this, a new requirement is defined to integrate AI-driven
recommendations that suggest courses based on user behavior and goals.

3.3. Document findings, highlighting potential problems and solutions.

Clear documentation is essential to ensure that all stakeholders have a shared understanding of
the project’s direction. This step involves creating a detailed report that summarizes the findings,
highlights potential challenges, and proposes solutions.

 Structure of the Documentation

A well-structured document typically includes:

1. Summary of Findings: A concise overview of key insights from the data collection and
analysis phase.
2. Identified Problems: Specific challenges or pain points highlighted during analysis.
3. Proposed Solutions: Recommendations on how to address each problem, including
technical and operational approaches.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 53 of 64
Research and apply emerging web technology trends 1

 Highlighting Potential Problems

Potential issues might include mismatched expectations, outdated infrastructure, or scalability

concerns. For instance, if a retail client’s current database is unable to handle large volumes of
transactions during peak sales, it poses a scalability problem.

 Proposing Solutions

Solutions must be practical, aligned with the client’s goals, and technologically feasible. In the
example above, the developer might recommend migrating to a cloud-based database solution
like AWS RDS to ensure scalability and reliability during high-traffic periods.

Example:

A document for an online learning platform project might include:

 Findings: Students struggle to find relevant courses due to poor search functionality.
 Problem: The existing system lacks advanced filtering options and tagging mechanisms.
 Solution: Implement an AI-powered search tool with filters for course difficulty,
duration, and topic, ensuring faster and more accurate results.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 54 of 64
Research and apply emerging web technology trends 1

Self-Check 3.1
I. Read the statement carefully and if the statement is True say TRUE and If the
statement is false say FALSE.
1. Analyzing client feedback is the first step in collecting system-related data.
2. Documentation of findings is optional when analyzing client feedback and system
requirements.
3. Direct observation of existing systems can reveal inefficiencies and improvement
opportunities.
4. Functional requirements refer to attributes like system performance and security.
5. Tools like Google Forms and Typeform can streamline the data collection process.
II. From the given alternatives choose the best answer for the statement
1. Which of the following is an example of a functional requirement?

A) System scalability

B) Processing payments

C) Data encryption

D) Fast load times

2. What is the primary goal of collecting system-related data from clients?

A) To analyze competitor systems

B) To understand client expectations, challenges, and goals

C) To determine project budgets

D) To create promotional materials

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 55 of 64
Research and apply emerging web technology trends 1

3. Which tool is commonly used for organizing client feedback and visualizing trends?

A) Google Forms

B) Tableau

C) AWS RDS

D) Selenium

4. What should be included in the "Summary of Findings" section of documentation?

A) Code snippets

B) Key insights from the data collection and analysis phase

C) Detailed error logs

D) User manuals

5. What type of requirement addresses system performance and security?

A) Functional requirements

B) Technical requirements

C) Non-functional requirements

D) Operational requirements

III. Explain the following briefly

1. Explain how interviews and surveys can be used to collect system-related data from
clients and provide an example.
2. Discuss the difference between functional and non-functional requirements, including
examples of each.
3. Describe the importance of analyzing client feedback and how tools like Excel or
Tableau can assist in this process.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 56 of 64
Research and apply emerging web technology trends 1

Unit Four: System specifications And Standards

This unit is developed to provide you the necessary information regarding the following content
coverage and topics:

 Review and update system documentation.

 Collaborate with clients to validate specifications.
 Obtain final approval and sign-off from stakeholders.

This unit will also assist you to attain the learning outcomes stated in the cover page. Specifically,
upon completion of this learning guide, you will be able to:

 Review and update system documentation.

 Collaborate with clients to validate specifications.
 Obtain final approval and sign-off from stakeholders.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 57 of 64
Research and apply emerging web technology trends 1

4.1. Review and update system documentation

The final stage of system planning and development involves ensuring that all specifications are
clearly defined, validated, and approved by stakeholders. This ensures that the project is aligned
with client requirements, avoids misunderstandings, and establishes a solid foundation for
successful implementation. The process includes reviewing and updating system documentation,
collaborating with clients to validate specifications, and obtaining final approval and sign-off
from stakeholders. Each of these steps plays a crucial role in ensuring clarity, alignment, and
accountability.

System documentation serves as the blueprint for the development process and the reference for
future updates or maintenance. Reviewing and updating this documentation ensures that all
requirements, designs, and processes are accurately recorded and reflect the most recent changes.

 Importance of Accurate Documentation

System documentation must capture every aspect of the system’s design, including functional
requirements, data flow diagrams, user interfaces, and technical specifications. Accurate
documentation prevents misinterpretation during development and provides a reliable guide for
developers, testers, and future stakeholders. For instance, a project involving the development of
an e-commerce website would include detailed diagrams of the checkout process, database
schema, and API specifications for payment gateways.

 Updating Documentation

Updates to documentation may arise from client feedback, technological advancements, or

changes in project scope. Tools like Confluence or Notion help maintain centralized, version-
controlled documentation that team members can access and edit collaboratively.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 58 of 64
Research and apply emerging web technology trends 1

Example: In a project to build a patient management system, a requirement to add an AI-

based symptom checker might emerge after initial planning. Updating the documentation
ensures that this new feature is accounted for in system diagrams, user stories, and test
cases.

4.2. Collaborate with clients to validate specifications.

Collaborating with clients is a crucial step to ensure that the documented specifications align
with their vision and objectives. This process involves engaging in discussions, clarifying
ambiguities, and making adjustments based on client feedback.

 Validation through Collaboration

Validation ensures that all requirements are understood and agreed upon by both the
development team and the client. This collaborative approach reduces the risk of rework and
builds trust between parties. Regular meetings, workshops, and live demonstrations help
maintain open communication. For example, using mockups or prototypes built with tools like
Figma or InVision, developers can walk clients through proposed designs and gather feedback.

 Incorporating Client Feedback

Clients often provide valuable insights during validation sessions. A retail business client, for
instance, might suggest adding personalized recommendation features to their online store. The
development team can refine the specifications to include this feature, ensuring the system meets
client expectations.

Example:

In a project to develop a learning management system, clients may request real-time analytics for
student performance. Collaborating with the client helps clarify the types of data to be tracked
(e.g., attendance, quiz scores) and ensures that the reporting dashboard design meets their needs.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 59 of 64
Research and apply emerging web technology trends 1

4.3. Obtain final approval and sign-off from stakeholders.

The sign-off process formalizes the agreement between stakeholders and the development team.
It marks the end of the planning phase and gives the green light for full-scale implementation.

 Steps to Achieve Sign-Off

Presentation of Final Specifications: Developers prepare a comprehensive document or

presentation summarizing all validated requirements, designs, and expected outcomes.

Stakeholder Review: Stakeholders review the presented material to ensure that their
requirements and feedback have been fully addressed.

Approval and Sign-Off: Once satisfied, stakeholders provide formal approval, often in the form
of a signed document or digital acknowledgment.

 Importance of Sign-Off

Sign-off acts as a safeguard against scope creep and misunderstandings. It ensures that any
subsequent changes to the project are treated as new requests requiring separate approval. This
step also establishes accountability, as all parties agree on the defined scope and objectives.

Example:

In the development of a hospital appointment system, obtaining sign-off might involve

presenting a detailed workflow of the appointment booking process, complete with user roles,
notification mechanisms, and data privacy considerations. Stakeholders such as hospital
administrators and IT managers would review the document, provide feedback, and approve it
for implementation.

Confirming system specifications is a vital process that ensures alignment, clarity, and
accountability in web development projects. Reviewing and updating documentation ensures
accuracy and relevance, while client collaboration validates the specifications and fosters mutual
understanding. Finally, obtaining formal approval and sign-off provides a definitive agreement
that guides the project’s execution. By following these steps, developers can minimize risks,
strengthen stakeholder relationships, and set the stage for successful project outcomes.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 60 of 64
Research and apply emerging web technology trends 1

Self-Check 4.1
I. Read the statement carefully and if the statement is True say TRUE and If the
statement is false say FALSE.
1. Accurate system documentation reduces the risk of misinterpretation during
development.
2. Tools like Figma and InVision are commonly used to create prototypes for client
validation.
3. Collaboration with clients during validation sessions is unnecessary if the documentation
is thorough.
4. The sign-off process formalizes the agreement between the development team and
stakeholders.
5. System documentation does not need to include changes made due to technological
advancements.
II. From the given alternatives choose the best answer for the statement
1. What is the primary purpose of system documentation?
A) To store client contracts
B) To serve as a blueprint for development and reference for future updates (Correct)
C) To analyze competitor projects
D) To manage budgets for the project
2. Which of the following tools can be used to maintain centralized, version-controlled
documentation?
A) BrowserStack
B) Confluence (Correct)
C) Selenium
D) Tableau
3. During validation, how can developers engage with clients to gather feedback?
A) By creating mockups or prototypes (Correct)
B) By avoiding communication until the final product
C) By sharing incomplete documents
D) By ignoring client suggestions
4. What does the sign-off process ensure?
A) That the budget is increased
B) That changes after approval require separate agreements (Correct)
C) That the development team can bypass client collaboration
D) That the project scope is expanded

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 61 of 64
Research and apply emerging web technology trends 1

5. In a learning management system project, clients request real-time analytics for student
performance. What is this an example of?
A) Ignoring client requirements
B) Stakeholder review
C) Incorporating client feedback (Correct)
D) Risk mitigation

III. Explain the following briefly

1. Why is reviewing and updating system documentation essential, and what are the key
components it should include?
2. How can collaboration with clients during the validation process prevent
misunderstandings and rework?
3. Provide an example of how client feedback can lead to updated system specifications, and
explain its importance.
4. Explain the steps involved in obtaining final approval and sign-off from stakeholders, and
why this step is critical.

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 62 of 64
Research and apply emerging web technology trends 1

Reference
1. Duckett, J. (2011). HTML and CSS: Design and Build Websites. Wiley.
2. Simpson, K. (2020). You Don’t Know JS Yet: Get Started. O'Reilly Media.
3. Elliott, E. (2014). Programming JavaScript Applications. O'Reilly Media.
4. Flanagan, D. (2020). JavaScript: The Definitive Guide. O'Reilly Media.
5. Marcotte, E. (2011). Responsive Web Design. A Book Apart.
6. Esposito, D. (2016). Modern Web Development: Understanding Domains, Technologies,
and User Experience. Microsoft Press.
7. McLaughlin, B. (2018). Building Progressive Web Apps. O'Reilly Media.
Online References
8. Mozilla Developer Network (MDN). (n.d.). Retrieved from https://developer.mozilla.org
9. World Wide Web Consortium (W3C). (n.d.). Retrieved from https://www.w3.org
10. AngularJS Official Documentation. (n.d.). Retrieved from https://angularjs.org
11. React Official Website. (n.d.). Retrieved from https://reactjs.org
12. Tailwind CSS Official Documentation. (n.d.). Retrieved from https://tailwindcss.com
13. WebAssembly Documentation. (n.d.). Retrieved from https://webassembly.org
14. Google Developers Web Fundamentals. (n.d.). Retrieved from
https://developers.google.com/web
15. Figma Design Tool Documentation. (n.d.). Retrieved from https://www.figma.com
16. Tableau Official Website. (n.d.). Retrieved from https://www.tableau.com
17. BrowserStack Cross-Browser Testing. (n.d.). Retrieved from
https://www.browserstack.com

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 63 of 64
Research and apply emerging web technology trends 1

No Name Qualification Field of Study Oganization/ Institution Mobile number E-mail

(Level)
1 Tewodros Girma MSc Information system Sheno PTC +251 912068479 girmatewodiros @gmail.com

2 Gari Lencha MSc ICT Management Gimbi PTC +251 917819599 Garilencha12@gmail.com
3 Endalew Kassa MSc ICT Management Debremarkos PTC +251 913305454 endalewk54@gmail.com

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE
 logo
የሥራና ክህሎት ሚኒስቴር Document No:

MINISTRY OF LABOR AND SKILLS OF/MoLS/TVT/029

Issue No: Page 64 of 64
Research and apply emerging web technology trends 1

5
6
7
8
9
10

Approval Name: Signature: Date:

PLEASE MAKE SURE THAT THIS IS THE CORRECT ISSUE BEFORE USE