Information sheet UC:- Website Technical Requirement Modeling 2024

Harambee University

TVET CURRICULUM
WEB DEVELOPMENT AND DATABASE
ADMINISTRATION
LEVEL – III
Occupational Standard (OS)
Unit of Competence: Website Technical Requirement Modeling
Module Title: Website Technical Requirement Modeling
Learning outcomes:
LO#1 Define Technical Environment
LO#2 Define Human Computer Interface
LO#3 Determine Site Hierarchy
LO#4 Gather Data through Formal and Informal Processes

Complied By Ayele T Page

Information sheet UC:- Website Technical Requirement Modeling 2024

LO#1 Define Technical Environment

Introduction to Website Technical Requirement Modeling
A requirement modeling is a process of documenting, analyzing, and managing Requirements.
Requirements change throughout the project, so it is important to have a way to track them and Make sure
everyone understands them.

The technique of modeling requirements and solutions as they change through collaborative work and
cooperation is known as Requirements Modeling. You may ensure that your team satisfies the
stakeholders’ exact requirements by employing this approach of cross-functional, self-organizing teams.

Requirements can be anything that a customer or user wants from a software system. They can include
functional requirements (what the system should do), non-functional requirements (such as
performance, security, etc.), as well as constraints (things that might limit what the system can do).

1. Define Technical Environment

Introduction to technical environment
Technical Environment means the operating systems and third party software which match the versions
that Word Press has certified for compatibility with Word Press Software.

 Refers to the servers, operating systems, database management systems (DBMS) and network
Software required operating the Software.
 Technical requirements analysis begins with the business requirements documents created during
the business analysis phase. Using the business requirements as a basis, you perform the following
steps:
 Perform a usage analysis to aid in determining expected load on the deployment
 Create a set of use cases that model typical user interaction with the deployment
 Create a set of system requirements that are derived from the business requirements, use cases,
and usage analysis.

The use cases are also the basis for designing the logical architecture in the design phase.
The logical architecture and the system requirements together form the deployment scenario, which later is
an input to the deployment design phase.

The following figure shows the technical requirements phase in relation to the business analysis, logical
design, and deployment design phases.

Complied By Ayele T Page

Information sheet UC:- Website Technical Requirement Modeling 2024

Figure 1-1 Technical Requirements Phase and Other Deployment Planning Phases

1.1. Identifying Business Requirements, Hardware and Software.

 Hardware Requirements
“Web development” can encompass several different disciplines, including programming, Web design,
and even network security, the minimum system requirements for Web development can largely
depend on the type of work that you intend to do on your machine.

Screen Size and Resolution

Generally, you’ll want to purchase as big of a screen as is reasonable; you may even want to set up two
or more monitors at your workstation. A resolution of 1920 x 1080 or higher is important, as it will offer
you clear and crisp visuals of what you’re creating.

Minimum System Requirements for Web Development

Although most Web development tasks can be completed with 8 GB of RAM, generally, more is better:

Try to aim for having at least 16 GB of RAM in your system. A zippy processor might make rendering
easier and more convenient, so opting for the latest generation of the i5 or i7 processor might serve you
well. For the best performance, choose a quad-core processor with a speed of at least 3GHz.

If you’re doing graphic design work, consider the type of file output that you’ll be working with before
deciding on a machine. Graphic designers should look into obtaining a dedicated graphics processing
unit (GPU). Similarly, they should invest in a dedicated graphics card with a generous amount of video
RAM (VRAM).

Complied By Ayele T Page

Information sheet UC:- Website Technical Requirement Modeling 2024

Advanced Computer Specs for Web Development

It is important to know that desktop computers are more powerful and more responsive than laptops.

If you intend to work with hefty videos, think about investing in a desktop with RAID (redundant array of
independent disks) capability.

If you find that you’re working in a discipline that requires you to pull up large files quickly, consider
obtaining a solid state drive (SSD).

Typically, you will want a hard drive that is as large and as fast as possible. Look for one that boasts
7200 RPM.

 Software Requirements
 Operation System
When deciding on computer specs for Web development, you’ll have to consider what type of operating
system that you will want to use for work.

While a handful of different operating systems exist, many, like Chrome OS and Linux, have limitations
or complexities that could complicate your training.

The ubiquity and flexibility of Windows will allow you more options when configuring a system, while
Mac operating systems offer their own set of benefits, such as virtualization software and Git tools.

1.2. Defining software and hardware types to meet business requirement

 Defining software types to meet business requirement
When defining business requirements for a software development project, it’s important to clearly
describe the problem or opportunity that the software will address and the specific business goals that
the software must meet. Here are some tips for clearly defining business requirements:

Identify the problem or opportunity: Clearly and concisely describe the problem or opportunity that
the software will address. Be specific about the business goals that the software must achieve.

Gather input from stakeholders: Identify the key stakeholders who will be impacted by the software
and gather their input to ensure that the software meets their needs.

Define success metrics: Clearly define the success metrics that the software must meet in order to
achieve the business goals. These may include metrics such as increased efficiency, cost savings, or
increased revenue.

Describe the desired outcome: Describe the desired outcome of the software in terms of how it will
improve the business. This will help to ensure that the software development company fully
understands the business requirements and can deliver software that meets your needs.

Prioritize the requirement: Prioritize the requirement in terms of their importance and urgency. This
will help to ensure that the software development company focuses on the most critical requirements
first and that the software meets the most important business needs.

Complied By Ayele T Page

Information sheet UC:- Website Technical Requirement Modeling 2024
Be detailed: Be as detailed as possible when describing the business requirements.

This will help to ensure that the software development company fully understands your requirements
and can deliver software that meets your needs.

Business Requirement
Problem: The sales team is currently using a manual process to track customer orders, which is
Time-consuming and error-prone.

Opportunity: Implementing a new software system to automate the order tracking process will
increase efficiency and accuracy, resulting in increased sales and customer satisfaction.
Specific Business Goals:
 Reduce the time spent on order tracking by 50%
 Increase accuracy of order tracking by 90%
 Increase sales by 20%

Stakeholders:
 Sales team
 Customer service team
 Management
Success Metrics:
 Number of orders processed per hour
 Number of errors in order tracking
 Sales revenue
Desired Outcome:
The new software system will automate the order tracking process, allowing the sales team to spend
more time on selling and less time on administrative tasks. This will result in increased efficiency,
accuracy, and sales.

Prioritizing Requirements:
Automating the order tracking process is the most critical requirement, as it is the foundation of the project.
Implementing a user-friendly interface for the sales team to enter and track orders is the second-most
critical requirement, as it will be used by the sales team on a daily basis.

Implementing a reporting feature for management is the third-most critical requirement, as it will provide
visibility into the performance of the sales team.

As you can see, this example clearly defines the business requirement by describing the problem,
opportunity and specific business goals, identifying the stakeholders, defining success metrics, describing
the desired outcome, and prioritizing the requirements.

This will help the software development company understand the business requirement and develop
software that meets the specific needs of the business.

Complied By Ayele T Page

Information sheet UC:- Website Technical Requirement Modeling 2024
Checkout our complete comprehensive guide to get complete knowhow as to how to document your
business requirement for Development Company.

 Defining hardware types to meet business requirement

Information system is made up of five components: hardware, software, data, people, and process.
The physical parts of computing devices those that you can actually touch are referred to as hardware.

As stated above, computer hardware encompasses digital devices that you can physically touch.
This includes devices such as the following:
 Desktop computers
 Laptop computers
 Mobile phones
 Tablet computers
 e-readers
Storage devices, such as flash drives input devices, such as keyboards, mice, and scanners output
devices such as printers and speakers. Besides these more traditional computer hardware devices, many
items that were once not considered digital devices are now becoming computerized themselves.

Digital technologies are being integrated into many everyday objects so the days of a device being labeled
categorically as computer hardware may be ending.

1.3. Identifying appropriate standards, software and hardware required to

develop the site
 Identifying appropriate standards software required to develop the site
Requirement documents play a pivotal role in organizations desiring to develop successful software.
It assists your business in understanding the software completely. Why is it developed in the first place,
and how will it help achieve the desired goal.

These documents are the foundation on which a team operates for development. It guides in perceiving,
strategizing, budgeting, and executing a project.

We have crafted these seven software requirements tips that can help you document practical software
requirements file for a successful development phase.

1. Well-Defined and Understandable

For seamless software development, the requirements must provide paramount clarity.
Make sure the software requirements are well written in plain easy to comprehend language.

It must be free from jargon and strenuous terminologies.

Remember, concise statements are better to Understand and alleviate the developmental phase.

Complied By Ayele T Page

Information sheet UC:- Website Technical Requirement Modeling 2024
2. Genuine and Comprehensive
The software requirements document must accurately provide all the details. If it is a BRD, then all the
details must clarify the business objective. In the case of SRS, it must explain the features and functionality
with precision. The format must be easy to understand and comprehensive.

Avoid ambiguous statements and unclear information. Don’t forget to keep in the loop all the necessary
personnel. Such as business leaders, developmental staff, project managers, customers, etc.

3. Throughout Consistent
The majority of the times, software requirement documents are long and lengthy.
They are divided into many parts, with their specific details. To avoid confusion, opt for consistent
requirements only.

Make sure you have no duplicated requirements as it, later on, turns into fluff. Unnecessary requirements
lead to errors that waste the time and cause hindrance to the process.

4. Clear from Uncertainty

There is no room for interpretation! Never give ambiguous requirements that leave the development team
confused. They can’t interpret themselves and extract the meaning behind the requirements.

Sometimes, a single misinterpreted statement can lead to disastrous outcomes. Make sure to phrase each
statement with clarity and with one probable interpretation. Collaborate and conduct reviews to ensure
unambiguous documents.

5. Skeptical Design Requirements

A good software requirements document must exemplify the result. It is like a perfect architectural design.
The document should have requirements in detail that narrates what the developmental team must build.

It empowers the team to be creative and come up with designs that are as per your expectations.
Don’t provide specific implementation details unless necessary. It can limit creativity and developmental
procedure.

6. Quantifiable and Testable

The sole aim of the software requirements document is to provide a roadmap for the overall execution.
Therefore, the needs and requirements for software development must be measurable and easy to test.
For instance, a requirement “must open fast” is neither quantifiable nor testable.
7. Easily Traceable
It isn’t easy to know when the developers have finished the software project.
There has to be a direct connection between the requirements document and the final finished code.
The project manager checks the work from requirements to designing to coding and then testing.

Complied By Ayele T Page

Information sheet UC:- Website Technical Requirement Modeling 2024

 Identifying appropriate standards hardware required to develop the site

Hardware compatibility standards are guidelines that ensure different devices and components can work
together smoothly and reliably. They are essential for the development and innovation of computer
hardware, as well as for the user experience and satisfaction.
The advantages of software standards are:
 Improved Data Sharing
 Simplified Budgeting and Purchasing
 Improved Support
 Improved Training
 Smoother Software Installation and Upgrades
1.4. Identifying website architecture principles.
The eight principles of information architecture were proposed by information architect, UX designer,
consultant and speaker Dan Brown.

These principles are a great starting point for creating or assessing the structure of your own site and it is
worthwhile quickly going through them and defining what they mean.

Eight principles to help designers make the right decisions when creating their build strategies.

1. The principle of objects

This principle means viewing content as a living thing, with its own lifecycle and featuring behaviors and
attributes. The architect needs to define and understand the nature of these when embarking on a
structure.
2. The principle of choices
Create pages that offer meaningful choices to users, keeping the range of choices available focused on a
particular task and, therefore, relevant to the user. Too many options can be worse than too few as users
can become bogged down, and even paralyzed with indecision is overloaded with choice.

3. The principle of disclosure

Only show users what they need to decide if they want to delve further. Once they appreciate the nature of
the option they can pursue it or not as desired.

4. The principle of exemplars

If some of the category options are not self-explanatory use some exemplars of the content to show users
what they will be accessing. Images can be especially useful and expressive in this context.

5. The principle of front doors

Not all users will enter your site at the home page so don’t construct your site for just those that do.

Give people who arrive at other pages the chance to view useful information and navigation aids from
wherever they come on board and try to make your site accessible from wherever they land.

Complied By Ayele T Page

Information sheet UC:- Website Technical Requirement Modeling 2024

6. The principle of multiple classification

Provide different ways for users to search the content on your site. Using search and top-level menus are
two ways of doing this, but some users might wish to browse or move through the hierarchy so make sure
your information architecture meets their need.

7. The principle of focused navigation

Keep your navigation aids consistent. Make sure your menus relate to the same areas and don’t mix
subjects and confuse the user. If you are producing a menu of product types don’t drop other services into
it or if the menu is for navigational purposes don’t include functional or marketing items.

8. The principle of growth

The content you start off with will only be a small fraction of the content you will acquire so your site needs
to be scalable. Give it room to grow and develop organically and by addition.
The following systems will define your information architecture:
 Organization
 Navigation
 Labeling
 Search
To get the best from each, you need to make a plan that delivers your business and users’ needs in
simple, clear steps.

1.5. Identifying website development tools, equipment and standards.

As a web developer, you’re responsible for creating reliable web applications. This involves not only coding
but also complex and time-consuming tasks such as debugging errors and managing servers.

What to Look for When Choosing a Web Development Tool?

Using web development tools is crucial when working as a web developer, as they help you create, edit,
maintain, and troubleshoot applications.

To list the best tools for web development, we considered the following aspects:
Complexity: - Before investing in a web development tool, ensure it meets your actual needs and
capabilities.
Security: - A good web development tool should provide web application security solutions like cross-site
scripting (XSS) management, Web Application Firewalls (WAF), and security audits to protect your app
from cyber-attacks.
Scalability: - The tool should work with small and large projects.
Cost: - Consider its pricing system, as some web developer tools are free, while others have a monthly or
yearly subscription system.
Programming languages: - Pick web development tools that are compatible with the programming
language you use.
Platform support: - Check if the web development tool will provide adequate assistance and support in
case of software issues.

Complied By Ayele T Page

Information sheet UC:- Website Technical Requirement Modeling 2024
Code editors: - They come with built-in features that make writing and editing code easier, such as syntax
highlighting, code auto-completion, and a debugger.
Browser developer tools: - They allow developers to preview HTML and CSS changes as well as write
and debug JavaScript code directly on a browser.
Web prototype software: - The web development tool should include everything you need to create
interactive prototypes, wireframes, and UX/UI design projects.
Package managers: - They make it easy to download and install framework and library dependencies.
Version control systems (VCS):- They help manage and track code changes, improving communication
in collaborative projects.
Web application frameworks: - Frameworks provide a pre-made codebase and guidelines to make web
development easier.
Task runners: - Automate repetitive tasks, so you don’t have to micromanage each one.
API testing tools: - They facilitate early testing of an app’s core functionality before its launch.
JavaScript libraries: - A collection of pre-written code snippets for carrying out common JavaScript tasks.
Container management software: - The application’s source code is bundled together with its libraries
and dependencies. As a result, it can run quickly and reliably on any platform.
CSS preprocessors: - They automate repetitive tasks, such as reducing code errors, producing reusable
code snippets, and maintaining code compatibility.

What is Web Development?

Web development stands for building, designing, and managing websites and web apps for the internet.
It needs different programming languages, frameworks like Jest, Cypress, Puppeteer, etc. and tools like
React Native, Jenkins, Circle CI, etc., which aids in making responsive, visually appealing, and user-
friendly websites.

Web development typically encompasses three main components:

A. Front-end Development
B. Back-end Development
C. Database Management
Who are Web Developers?
Web developers are responsible for designing, creating, and testing the performance of the websites with
their coding knowledge. So, to become a web developer, it’s essential to know some popular front-end and
back-end web programming languages like HTML, CSS, JS, and more.

Since web application development is a dynamic field that evolves continuously, a web developer’s role is
a highly demanding job throughout the world. The current web development trend includes technologies
like – IOT, voice search, machine learning, cyber-security, artificial intelligence, cloud technology, and
more.
Types of Web Development Tools
Web development tools help developers build, test, deploy, and user-friendly websites. There are different
types of tools you can choose in this regard. They often include frameworks and libraries that provide a
foundation for building web applications.

Complied By Ayele T Page

Information sheet UC:- Website Technical Requirement Modeling 2024
 Front-end tools: You should use these tools for front-end like client-side webs. That means the
user interface.
 Back-end tools: You can use these tools for the back-end portion with server-side logic – DBs,
APIs, etc.
 IDEs: They come with features for the source code and text editing. Also, it provides different plug-
ins and tools.
 Project management/collaborative tools: They work as a version control system for your project.

Front-End and Back-End Web Development Tools

 Front-end development tools focus on the user interface. They build the interaction between UI
elements that the users can see. These tools ensure the responsiveness of the website/app, which
means irrespective of the device and screen size the page experience remains the same.

 Whereas, the back-end tools contribute to the unseen portion of a website/app. That means the
users can’t see this part of the application. So, these tools aid in creating servers, databases, APIs,
algorithms, and more to support the front-end part.

Top Web Development Tools

Here are some of the best web development tools that you can consider
Front-end web Development Tools
1. React: - is an open-source, UI development framework based on the JavaScript library.
It’s popular as a fast-speed front-end development tool. One of its top features is it provides virtual DOM
instead of real DOM. Thus it becomes a great tool for web and mobile app development.
You can reuse the components when using React. Thus it saves your time from re-writing the codes.

2. Vue.js:- is another JS library that focuses on the view layer of your web. It’s small in size and
easily integrates with other projects.
Also, it summed up with the Angular, and React features, easily. Again, it supports cross-platform
applications, unit testing, routing, etc. The two-way binding feature gives you real-time data tracking and
component updates. The fastest speed of Vue.js offers refined user experience on web browsing.

3. Angular JS: - This is another popular JS framework created by Google. It provides the solution
for both development and testing.
One of its attractive features is supporting client-side MVC (Model-View-controller) and MVVM (Model-
View-View-Model) architecture. Also, it provides UI with HTM, two-way data binding, dependency injection,
and more. You can create a single-page-application and get Google community support for regular
updates.

4. Bootstrap: - Bootstrap is one of the powerful front-end mobile app and web development tools.
It’s an open-source responsive CSS framework. It maintains an easy responsive, mobile-first web
development approach to design UI-level components like forms, buttons, headers, footers, navigation
menus and bars, etc. This framework also provides cross-browser compatibility.

Complied By Ayele T Page

Information sheet UC:- Website Technical Requirement Modeling 2024
5. Tailwind CSS: - It’s a CSS framework that helps to design custom UI components without writing
CSS codes. Instead, it helps you to use Utility classes of HTML. As a result, you don’t need to worry
about the breakages due to CSS code changes. Also, it allows using the classes from a predefined
design system. This CSS framework supports exclusive customization for front-end development.
You will get 500+ components to design your UI from here.

Back-end Web Development tools

1. PHP: - PHP is a popular back-end web development tool and language.
You can use it with CMS (Content Management System) software including Word Press, Jumla, etc. as
well. It helps you to enlarge your web by implementing your plug-ins.

You can embed it easily with HTML, CSS, and other front-end tools. PHP is highly scalable and free to
use. Also, it integrates with several popular DBs – MySQL, Oracle, MS SQL Server, etc.

2. Python: - It’s an easy back-end programming language with simple syntaxes. That’s why it
grabs a large share of the web development industry. It’s a cross-platform language that
supports different languages like C, Java, etc.
Also, it helps in data visualization, and analytics, as well.
The Selenium Python combination creates great test scripts for automation, cross-browser, and parallel
testing. It’s free and open-source. You can try new types of apps with this. Thus it increases productivity.

3. JavaScript: - JS is a popular web development language. Every front-end developer must

know this language along with HTML and CSS. Not in development, but it also supports unit
testing.
You can use different JS testing frameworks like unit.js, Mocha, Jest, etc. for this purpose. It increases the
speed of code execution and reduces the server load as it’s a client-side script itself.

4. Node.js:- It is an open-source, cross-platform runtime environment for JS. The developers use
it for server-side web application development.
Node.js easily builds real-time and data-intensive webs. A Node.js developer gives you fast prototype
delivery, on-time releases and real-time apps. Thus it saves extra time, money, and resources.

5. Django: - It’s a well-known back-end web development framework. Specifically, you can use it
for Python programming. It includes features like scalability, flexibility, extensibility, and more.
You can write and run unit tests with Django’s test execution framework.

6. Ruby on Rails: It’s a powerful full-stack framework that comes with distinct features like-an
active record for connecting apps’ databases, modifying SQL queries, and more. A rails app has
three environments – development, testing, and production. Rails create a test directory for the
QAs.
RoR is totally free of cost and provides free plug-ins. You can easily modify codes and add new features
through this framework. You can easily remove bugs when you test your codes through this framework.

Complied By Ayele T Page

Information sheet UC:- Website Technical Requirement Modeling 2024

7. Laravel: - Laravel is a framework for web development using PHP. It supports data
migrations, routing, validation, views, Blade templates, and more.
It supports unit testing through phpunit.xml files and provides a configuration environment for your tests.
The Laravel package comes with pre-built user authentication and authorization, cross-site screening,
simplified email integrations, message systems, and more. Also, it gives high performance under heavy
traffic loads.

8. Express.js:- It’s a web development platform with Node.js. You can create single-page, multi-
page, and hybrid web apps with this framework.
It provides faster I/O, handles asynchronous, single treads, and manages servers, routes, and more.
It supports unit, integration, and end-to-end testing. You can scale your application quickly and use JS for
both front-end, back-end developments with this framework. It gets support from Google v8 engine, which
increases its performance.

Integrated Development Environments (IDEs)

1. MS Visual Studio Code: - It’s a free, open-source, cross-platform, and language-supporting code
editor. It helps you to run and debug codes with intelligence, built-in Git commands, deploy with MS
Azure, etc. Also, it provides professional test subscriptions with test case management, continuous
testing, delivery, records, etc.

2. Sublime Text: - It’s a pure text editor that comes with a Python interface. It supports Markup and
other programming languages. It provides customization with JSON configuration files. Another
important thing is – it supports split editing (dividing the webpage into different sections).

3. Atom: - The Git Hub community built this open-source, free, desktop app. Generally, it edits text
and source codes. It’s a cross-platform editor and provides built-in Git control and multi-cursor plug-
ins. It’s written in JS, HTML, less, etc.

4. WebStorm: - It handles complex server-side and client-side Node.js development. Also, provides
coding support for different JS frameworks, and built-in tools for debugging, and testing the Node.js
apps. Again, it supports features like – smart code insights, Spy.js built- in tools, auto-completion,
etc.

5. Eclipse: - It’s a free, open-source IDE for Java developers. Also, it supports JUnit tests and Maven
projects. It provides different tools and frameworks related to non-software development. Some of
them are – web tools, data tools, test and performance tools, etc.
Project Management/Collaborative tools
1. GitHub: - It’s a popular version control, project management, and collaboration tool for developers.
You can use the GitHub repository to commit (save) your source code files.
You can use BrowserStack-GitHub integration for automation testing and track the changes of your codes
throughout different versions of GitHub.

Complied By Ayele T Page

Information sheet UC:- Website Technical Requirement Modeling 2024
2. GitLab: - These project management tools provide agile methodologies, CI/CD, report views,
analytics, etc. BrowserStack offers the GitLab CI/CD for continuous integration.
This helps you to enable the integration for locally hosted websites. The main benefit is – team mates can
contribute in every phase of a project. Also, it allows you to track your project’s progress at every stage.

3. Bitbucket: - It’s a code hosting and collaboration tool that provides solutions for CI/CD, automation,
cloud, server, data center, etc. BrowserStack integrates the Bitbucket pipeline for running your
automation tests.
It provides unlimited repositories including Git to manage your source codes, access control, and workflow
control. You can manage large file systems from Git.

4. Trello: - This project management tool handles project plans, workflows, visual progress,
collaboration, and more.
It’s a simple, flexible tool that also tracks your project boards, and lists to find the people involved in every
task. It has the strongest notification system for project management. Also, you don’t need to write any
notes when using it.

5. Slack: - It’s a collaborative app to handle your automation workflows. It provides integrations with
different services- Google Drive, Office 365, etc. Also, it has other features like – channels, canvas,
messaging, accessibility, security, etc. It supports integrations with CRM tools and automates your
important tasks.

Which platform is best for web development?

First of all, you should choose the platform as per your requirements. It depends on your project’s
deadline, size, complexity, budget, etc. But you should choose the best web development tools depending
on these criteria. Also, you must be aware of the features, pros, and cons of your target tools.

Choosing the Best One (from each category)

 You can choose React for front-end development.
 PHP for back-end development.
 Choose VS code as IDE. It also provides a solution for DevOps.
 GitHub is the best project management tool

Complied By Ayele T Page