Introduction

Module 1. Understanding Website Goals and

Security
Welcome to the first week of our exploration into website architecture with a module
dedicated to Strategy and Requirements. As the bedrock of effective digital
solutions, understanding strategic intent and the business requirements specific to
your audience is crucial. This week, we will look into the needs that shape online
platforms, and learn how to secure a website’s foundation both conceptually and
technically.

Topics:

● Strategic Intent and Business Requirements: This segment covers the

critical process of aligning website objectives with business goals,
ensuring your digital strategy supports the wider corporate vision.
● Audience and Content Requirements: Learn to identify and analyse
your target audience, align content with user expectations, and tailor the
user experience to meet their needs.
● Security Access Needs: A look into the security considerations that must
be addressed from the outset, protecting user data and ensuring trust in
your website.

Learning Activities:

● Stakeholder Intent Harvesting Workshop: Engage with stakeholders to

extract and prioritise business objectives, setting the scene for a website
that truly represents the business ethos.
● Persona Development & Content Alignment Task: Craft detailed
website user personas and map content requirements to these profiles,
ensuring that your site’s content resonates with its intended users.
● Web Security Blueprint Assignment: Outline a robust security
framework for your website, understanding the key requirements for
safeguarding user interactions and data from the very beginning.

Subject Learning Outcomes

The material in this module relates to the following subject learning outcomes:

​ SLO 1: Analyse business goals to strategise and secure web development

initiatives.
Student Expectations
During this module, you are expected to spend time working through the prescribed
material prior to attending class. This will enable a more valuable discussion to take
place in online tutorials or conferences, where you will be able to discuss concepts,
present ideas and explore information collaboratively in greater depth.

Accordingly, it is suggested that you allow:

4 hours for facilitated study. This includes guided facilitated study, watching or
attending course lectures (live or pre-recorded), responding to facilitator feedback.

8 hours for personal study. This includes reading through course material,
undertaking learning activities and exploring additional related resources.

Next Steps

Each module is comprised of three topics. After reviewing the Learner Guide for
each topic, use the tabbed navigation above to access the Learning Activity and
further resources for the topic or click Next button at the bottom of the page.
Alternatively, if you'd like to navigate to another module, use the links below.

Topic 1. Strategic Intent and Business Requirements

Key takeaways from this topic...

1. Aligning the website's architecture with strategic business objectives is crucial

to fulfill the site's purpose.
2. Business goals can be effectively transformed into functional requirements,
guiding the design and development process.
3. Business requirements significantly influence both the user experience and
the technical feasibility of the website.

Learner Guide
The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

1- Identifying Strategic Intent

What Is Strategic Intent?

Strategic intent is the aspirational plans, overall purpose of an organisation or a

business. It encapsulates the goals of the business or organisation. It guides a
business’s long-term strategy and defines the company’s objectives. It determines
where an organisation should focus its efforts and strategies it should pursue.

The delivering approach is enabled via the usage of initiatives, programs and
portfolios. Portfolios shape investments in step with strategic targets while balancing,
aligning, and scrutinising capability and sources. Programs integrate
enterprise-as-common with initiatives and consistent nation hobby dictated with the
aid of using strategic priorities. Projects are temporary endeavours that result in
alternate and reap deliberate targets. Together, they integrate to supply the useful
alternative required to put into effect, permit, and fulfil the organisation's strategic
purpose.

Strategic intent drives establishments to preserve aggressive benefits or seek a

brand new one (i.e. alternate). The strategic purpose ends in the improvement of
particular alternate tasks inside a portfolio shape. Specific tasks aligned to the
strategic purpose are decided on the premise of the skills and sources that may be
deployed.

Who Uses Strategic Intent

Nearly any top-level manager can use strategic purposes for their business
enterprise and personnel. The concept is growing a number of ways your
organisation will reap its specific aim. Since this creates a priority for accomplishing
a strategic aim of the organisation, it's given full control over all aspects of the
running of the business.

Managers in corporations can use the strategic purpose method to gain in some of
the methods.

● First, it enables outdoor containers. It is not unusual for corporations to

devise keeping with their present-day stage of sources and cognisance of
what they accept as true with what they can reap. Strategic purpose
enables managers to suppose past those constraints and enables larger
matters to be finished.
● Second, it enables personnel. Having a clean, concise declaration enables
the whole agency to embody the general aim of the business enterprise. It
offers everybody a feeling of cause and might virtually assist special
departments.
Ways in Which Strategic Intent Can Help Your Business

Strategic purpose can assist your enterprise in three predominant methods.

● First, it enables to shift of the focal point of the agency—many managers

these days cognisance of general revenue. If you had invited a CEO to
provide the maximum fee to an agency, he might say that he enables
boom income for shareholders. While this is crucial, it's far more difficult
for decreased stage personnel to suppose in those phrases. By
transferring your cognisance totally from general income to general
marketplace proportion, it's going to alternate the way you set dreams and
compete. It also enables managers to forestall focus and make plans with
these days' problems in mind; however, it permits managers to keep their
eyes open for destiny possibilities.
● Also, it enables the agency to grow the extent of creativity and innovation
of most personnel. Strategic purpose forces groups to be
destiny-orientated and plan for matters that don't align with their
present-day sources and skills. This reasons the personnel to provide you
with greater innovative methods of using present-day sources to create
extra aggressive advantages.
● Finally, strategic purpose enables and enhances worker morale.
Employees will want to be greater progressive and innovative than earlier.
Therefore, it's going to provide them with greater difficult initiatives and
boost their information. Strategic purpose makes the paintings for
personnel greater significant and cultivates surroundings in which
teamwork isn't always vital and frequent.

Deciding Strategic Strategy And Purpose For Your Website

At fulfilment, it'll be perfect for taking a step returned and examining the larger
photograph of ways your internet site will give you the rest of your belief, and as a
such. It isn't always perfect for chasing a generation that doesn't wrap across the
enterprise. At the quiet of the day, you could locate that the value of putting in your
internet site is greater of a fee instead of funding. Only whilst you recognise your
internet site approach, will you then understand the way of the proper internet
designers and make your quiet site an asset.

2 - Five ways to use strategic intent with results

1. Create or Redefine Your Company's Vision Statement
If you propose to put into effect the strategic purpose method in your enterprise in a
few manners, you need to begin with the aid of searching at your imaginative and
prescient declaration. Think huge! Exceptional groups around the globe have a few
outrageous imaginative and prescient statements. Unfortunately, many managers
will restrict themselves right here and attempt to be practical. If your imaginative and
prescient declaration no longer scares you, it isn't sufficient.

2. Continuously Reevaluate and Ask What You Must Do Differently

Many managers suppose too narrowly while forecasting and making destiny plans.
They will ask, what is going to the subsequent year appear like? In place of what
ought, we do differently?
The distinction in cognisance of the second query forces managers to evaluate their
agency internally. Then, they may see what they can do higher and what regions
they need to enhance to tuberculate forward.

3. Don't Limit Your Competitive Analysis with the aid of Using Your
Competitor's Resources
One purpose many groups lose marketplace proportion is that they did now no
longer nicely perceive their competitor's advantages. Managers regularly use
strategies and mapping methods that fall quickly given that they handiest examine
competition' present-day sources and no longer their resourcefulness.

Be positive to suppose outdoor the container in phrases of:

● How a competitor may alternate;

● Acquire new aggressive advantages.

4. Have an Open Mind in Regard to Mature Products and Markets

Yamaha is an excellent instance of a business enterprise that uses strategic
purpose. They try this with the aid of getting into what many might name mature
markets. Just because a product's income has turned out to be stagnant does no
longer suggest that new and higher markets to do now no longer exist.

5. Invest in Your Employees or Yourself

If you're a supervisor, spend money on your personnel. Give them possibilities to
enhance or upload to their talent set. This will assist your business enterprise
exponentially in the end and might cause a few excellent thoughts. If you aren't a
supervisor, spend money on yourself. Read books, take online courses, and train
yourself. It is vital to yourself to dance and search for possibilities as their purpose
isn't always a technique. It is an ongoing system that calls for difficult paintings.
However, if you are inclined to adopt this tactic, it will remodel your entry in the end.

3- Developing an effective webiste strategy

Before you start creating or redeveloping a website, it's vital to establish the purpose
behind it. This helps you focus your resources (time and money) on specific aspects.
Avoid the common misconception of "Everyone has a website, so I need one too."
Every website should have a clear strategic goal, even if it's simple. Organisations
must have clear and explicit goals that are specific, realistic, and measurable about
what they want to achieve with their website.
The main strategic goal behind an organisational website may vary, depending on
the nature of the organisation (the type of organisation) and its operations.

● Inform and Educate

These websites focus on providing valuable and informative content to
their audience. Whether it's news articles, educational resources, or
in-depth blog posts, the goal is to share knowledge and insights on
specific topics.
● Sell Products or Services
E-commerce websites aim to facilitate online transactions, making it easy
for visitors to browse products or services, add items to a shopping cart,
and complete a purchase. The goal is to convert website visitors into
customers.
● Generate Leads
Websites aiming to generate leads often include forms or landing pages
where visitors can provide their contact information. This information is
valuable for businesses to follow up with potential customers, nurture
leads, and convert them into clients.
● Build Brand Awareness
Brand-focused websites aim to create a strong online presence,
reinforcing brand values, showcasing products or services, and
establishing a recognizable identity. The goal is to increase brand visibility
and recognition among the target audience.
● Promote Events
Event websites provide information about upcoming events, conferences,
or gatherings. The goal is to attract attendees, provide event details, and
facilitate registration or ticket purchases.
● Provide Customer Support
Websites with customer support features aim to assist users with
product-related questions, technical issues, or other inquiries. The goal is
to enhance customer satisfaction and loyalty.
● Collect Feedback
Feedback-oriented websites use surveys, forms, or feedback mechanisms
to gather opinions from users. The goal is to collect valuable insights for
improving products, services, or user experience.

When deciding the strategy and purpose behind a website, it's essential to consider
how it aligns with your overall business goals or strategy. Understanding strategy or
goal(s) of the website will guide you throughout the planning phase.

Topic 2. Audience and Content Requirements

Key takeaways from this topic...

 1. Identifying target audience segments is key to customising website content
effectively.
2. A well-planned content strategy addresses the needs and preferences of
different user groups.
3. The quality and relevance of content are directly linked to user engagement
levels on the website.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Identifying client needs and expectations

Users judge an oven's performance based on how well it meets their expectations.
What a person desires often drives them more than what they need. This becomes
clearer when you listen to the individual and ask them to explain why they desire
what they do. Usually, they have a strong desire to fulfil their wants and are looking
for guidance on how to achieve it.

Desires, needs, and expectations are the key motivations that influence individuals.

Understanding Customer Insights

Listen, inquire, and discern. The primary step in understanding individual motivations
is to pay attention to what they express. It all boils down to self-reflection and asking
the appropriate questions. This is crucial as many customers may not articulate their
needs clearly. Moreover, someone might say, "I need a new laptop," while another
might say, "I want an updated laptop." This could imply that different approaches are
necessary for each, or it could simply be a matter of phrasing. Asking the right
questions will aid in understanding their perspective. Many individuals might have a
good idea of what they want or need but struggle to express it. This could be due to
a lack of communication skills or misunderstanding the terminology related to your
products or services. Overcoming language barriers is crucial in the latter scenario.
Not all customers are explicit about their desires or needs, either to themselves or to
company representatives.

These questions can be helpful:

"What do you wish the product to accomplish for you?"

This approach focuses on the actual benefit sought by the individual, narrowing
down product options based on features that offer this benefit. If someone desires a
product but does not necessarily need it (a distinction to consider), the product's
benefit becomes more precise and non-essential, such as its novelty, design, or
trendiness.

"What problem are you trying to solve?"

A similar query but aimed at understanding the individual's issue with an indirect
approach. This is especially effective when customers have a vague idea of what
they want but are aware of what is lacking. The product's benefit lies in its ability to
resolve what the customer is seeking.

Organising Feedback

Gathering input from your entire customer base is a logical approach. It helps identify
patterns and allows informed predictions about their future actions or interactions
with your business. Consider this as a step before direct interaction with individual
customers, even though it's an ongoing process. It provides a starting point when
engaging with your typical customer. Methods for collecting customer feedback
include:

● Emails and customer contact forms

● Surveys for customer feedback
● Detailed customer interviews (which also align with direct customer
interaction)
● Social media polls and monitoring
● Comments sections: Customers are more inclined to provide feedback in
their preferred language. However, analysing such input might introduce
biases that need to be addressed to derive meaningful insights.

Gaining Insight

While customer metrics are valuable, sustaining ongoing engagement and repeated
interactions indicates success. Metrics reflecting retention and loyalty help assess
whether you've met your customer's needs. Collecting this data is more
straightforward than qualitative input, allowing you to track trends and improve
relationships with your users. User-like, for instance, is a free tool enabling
engagement with customers through your website, Facebook Messenger, and
Telegram.

Gaining Insights from the Community

One of the great factors of social media is the freedom it gives human beings to
specify themselves. They can also beautify and glorify single encounters with a
business enterprise in a great manner to obtain a larger goal marketplace or truly
because of the reality they may be excited about. It is their initiative to speak what
motivates them—that way, inside the qualitative far essential to them and you.

Defining Information and Content Requirements

Definition of Information

Information refers to a collection of facts related to various aspects of human

experience. It encompasses scientific, journalistic, economic, educational, and other
types of data. It's important to note that the existence of information doesn't imply
action; it includes accurate relationships among comprehensible facts, enabling a
coherent interpretation of reality objectively. Nowadays, access to and processing of
information has reached an unprecedented level compared to the past. The Internet
serves as a vast, continuously evolving database, democratising access to
information. Never before has such a vast amount of information been produced,
stored, processed, and displayed in human history. With this surge of information,
search engines have evolved to access data more easily. The internet has been one
of the most significant revolutions in the world of information, as what's produced and
processed in a single day now can match what used to take years.

Content Requirements Based on Website Goals and Target Audiences

Content is crucial! Visitors come to your website seeking something specific, and
your main goal should be to help them find it. Apart from ensuring that your content
is useful, engaging, and well-written, it must also be well-organized. Visitors should
easily find what they're seeking upon visiting your website. However, this is not a
simple task, as numerous individuals visit your site, each with different expectations.
Here are nine tips to optimise your content organisation for all your visitors.
1. Define a Clear Information Structure
The most logical starting point is to define clear information for your content. Yet,
regardless of your experience, the final structure isn't something you should decide
on your own. Ultimately, it's the end-users who must determine which content is
relevant. To understand how people will use your site, there's nothing more logical
than asking them. Begin by defining your target audience. Then, invite potential
users to focus groups to discuss their thoughts and understand their goals clearly.
Surveys, interviews, and card-sorting exercises can also help in discovering the
content structure that makes sense to them.

2. Start with Essential Content

After establishing a clear structure, delve deeper to determine the essential content
for your site. Start by answering the most critical questions visitors have when they
land on your website. Then, consider less crucial content placement or how to
feature it on your site. Visitors typically start at the top of the page, so ensure to
leverage this space by showcasing pertinent content or guiding them further into the
site with a click or scroll.

3 . Group Related Content

Understand what visitors believe belongs together. Their perception of related
content might differ from yours based on their objectives. While you aim for logical
and objective organisation, users tend to be more subjective and goal-oriented.
Organising relevant content in a logical yet practical manner makes navigation more
intuitive for users.

4. Show Only Relevant Content

Display content that's pertinent to a specific page of your website. Understand the
path visitors take to reach their goals and be aware of the various stages they might
be in during their journey. Show content relevant to these different stages,
considering their needs at each point.

5. Show All Relevant Content

While focusing on relevance is essential, it's equally crucial to include all relevant
information. This depends on understanding the type of content visitors are
interested in at different stages of their visit to your website.

6. Consider Different Audiences

Your website visitors are likely to be diverse in their knowledge levels, prior
knowledge, and goals. When structuring your content, identify these different types
of users visiting your site. Prioritise content based on their needs but ensure your
content organisation caters to all users.

7. Offer Different Access Points

Create distinct entry points for different user groups if needed. For example,
separate entry points for business and individual users, first-time and returning
users, or experts and beginners in your field.
8. Offer Customisation
Consider a less rigid and more flexible content structure that allows users to
determine what's essential for themselves. Especially for services or websites with
personal or everyday use, involving users in content customisation can enhance
their experience.

9. Test Before Implementation

Finally, the most critical aspect of content organisation is user feedback. Before
finalising your content structure, conduct tests with potential users. Remote tests or
moderated user sessions can help gather feedback. Addressing any confusion,
frustration, or lack of information identified in these tests before implementation can
save time and resources.

Dealing with client interactions

1. The Passive-Aggressive

This is the consumer who's very passive whilst you ask for preliminary entry;
however, whilst you put up the completed product, they aggressively assault it,
annoying plenty of certain modifications, each most important and minor. They had a
concept of what they desired all alongside however stored it broadly speaking to
themselves. Even eleven though they confirmed appreciation of positive thoughts
and factors at some point of the improvement system, do no longer assume the
passive-competitive consumer to maintain any of them as they ship revisions your
manner.

Identifying Characteristics:

● Communication is broadly speaking one-sided and unhelpful throughout

task improvement.
● Makes statements such as:
○ "I'm now no longer virtually positive about what we're searching
out."
○ "Just do something that could be an attraction to us usually."
○ "You neglected the factor of what we desired."

How to deal with this type of client:

Patience is essential. Expecting last-minute modification requests may also help to
soften the shock of the consumer's competitive behaviour. Keep your original layered
layout intact so you can easily tweak and alternate it later (which you won't be able to
do currently). It does, however, happen). Also, make sure your agreement stipulates
a limited number of modifications.
2. The Family Friend

This is the consumer whom you've regarded for years both via private or own circle
of relatives interplay, and this connection has landed you the task. The courting may
be examined and possibly marred all the time with the aid of using what should
thoroughly be a nightmare of a task. This own circle of relatives, pal believes he
merits a "unique" rate and unbridled get admission to your paintings. They will now
and again unwittingly belittle your paintings or now no longer take them critically due
to their private connection to you.

Identifying Characteristics:

● These clients are simple to spot because... well, you already know who
they are.
● Makes remarks such as:
○ "Could you just put something together for me?"
○ "I don't want you to think that just because I understand you; I
want you to cut me a deal."
○ "What are you going to charge me?! We, on the other hand,
repay the favour!"

How to deal with this type of client:

How to cope with this consumer relies upon how nicely you realise them and the fee
you're courting with them. But don't forget that everyone who might benefit from the
sort of courting isn't always really a pal, so reply accordingly. A sincere technique
should emerge as saving the courting. But start with an expert, now no longer
private, tone, and they will observe your lead. Of path, if you fee the courting, you
could need to skip the task altogether.

3. The Under-Valuer

Like the circle of relatives defined above, this consumer will devalue your innovative
contributions. But there may be some action: you no longer understand that. There
isn't any cause for their behaviour. They sense they need to get a "pal's" pricing fee
now no longer due to the fact they need to be pals with you; however, due to the fact,
they no longer see your paintings as being well worth that an awful lot… although
they couldn't do it themselves. Not coming from an innovative history or maybe
having had publicity to the humanities can mar a person's appreciation of the
paintings you do. After years in our area, we make it appear clean, and that's what
the below valuer sees.

Identifying Characteristics:

● Does no longer reply to questions in a well-timed fashion.

● Makes statements such as:
 ○ "It's now no longer love it takes an awful lot of attempt to your
component."
○ "Couldn't you simply throw something collectively for me?"
○ "How difficult can this really be?"

How to deal with this type of client:

Here, self-assurance reigns supreme. You are aware of what your painting requires
and how well you do your duties. This self-belief will be understood by the
undervalued. While discussing your stance within the project, don't back down or
surrender a point to the customer. Standing business will provide you with the
professional and courteous tone that you deserve. Reduce your losses by declining
their assignment if the customer no longer responds in kind.

4. The Nit-Picker

This consumer is by no means pleased with the paintings you do and could
continuously select minor info right here and there that they dislike and need to be
modified. Do now no longer be amazed if they ask you to alternate those identical
info time and again advert nausea. It isn't always a signal of disrespect (as it's far
with the alternative customers); however, truly the individual's character. They may
also be burned in a few different tasks and, at the moment, are unhappy with a
whole lot of their route, consisting of your paintings.

Identifying Characteristics:

● Complains nearly continually approximately unrelated matters.

● Personal outlook comes with an acidic bite.
● Makes statements such as:
○ "How difficult is it to [fill in the blank with any rant]?"
○ "I'm no longer positive approximately this detail right here. It
simply doesn't pop!" ·
○ "I don't suppose you're getting it."

How to deal with this type of client:

Once more, endurance is crucial (particularly when you have a few sadistic purposes
for taking over nit-selecting customers). Try to detach yourself from the task as an
awful lot as feasible so that the steady nit-pickery no longer affects you personally. It
is straightforward to sense harm or get protection whilst your paintings are again and
again questioned, and you could start to doubt your talent. But recognise that this
isn't always approximately you or your skills; it's truly a character trait of the
individual you're managing. And as soon as something, defend yourself inside the
settlement.
5. The Scornful Saver

This customer is similar to the nitpicker and undervaluer but is inspired by your
artwork and skill set. They criticise you for sabotaging your self-confidence and
attempt to reduce your price cost. Unlike a few other consumer types, the
contemptuous saver is familiar with creative people and their techniques. They may,
however, be fairly priced and deceptive, and their scheme may have pondered their
decision a few times in the afterlife. As a result, they continue to covertly mistreat
people for the sake of conserving every last dime.

Identifying Characteristics:

● A less-than-flattering qualification frequently accompanies compliments. It

takes slow to respond to queries, which causes you to ask more than
once.
● Makes remarks such as:
○ "I'm a big fan of what you've done in the past. However, I'm
unsure about one or both of the issues."
○ "You might not be exactly what we're looking for, but you're
getting close."

How to deal with this type of client:

It's all about self-assurance once more. This consumer's manipulation will be
maintained throughout the exam if you understand your field thoroughly and are
confident in your knowledge and talents. Standing your ground or even calling the
customer on a few of their methods should help you gain strength and steadiness. If
the disrespect and manipulation persist, make plans to walk away from work. There
might be a variety of programmes and clients.

6. The "I-Could-Do-This-Myself"-Er

Where to start… When this consumer farms a task out to you, they clean up that
they understand a way to do what they're hiring you to do; however, they simply don't
have the time to do it. They can be running at a company or an entrepreneur; in both
manners, you're there to select up their slack. If they're at a company, you may be in
for an exciting situation; they had been probably employed for their unique fashion
and proposals, and now you'll please units of human beings: the person who
employed you and the individuals who employed him.

Identifying Characteristics:

● Will usually be (or appearance) aggravating and rushed.

● Communication from them regularly takes the shape of quick bursts of
statistics.
 ● Makes statements such as:
○ "I should without difficulty deal with this if my agenda weren't so
complete." ·
○ "Really? Not positive that's the course I might've long passed in,
however, something." ·
○ "Remember, you're filling my shoes, and they're quite huge."

How to deal with this type of client:

The "I-Could-Do-This-Myself" -er will probably have diagnosed your skills and talent
proper away; that is why they employed you. They need you to understand that this
task (and accordingly you) isn't always above their capacity. And even though those
reminders will grate on you periodically, they may permit you to run together along
with your thoughts, possibly presenting guidelines or remarks at the very last layout.

7. The Control Freak

This consumer desperately desires to micro-control each little element of the task,
irrespective of their qualifications. No selection can be made without their specific
entry and approval. This tiresome consumer forces himself into your workflow,
heedless of both invitation or protest and could call for getting admission to you at a
whim. The ideas of barriers and strict painting methods are misplaced by the
manipulate freak, who continuously disrupts the float. They may additionally accept
as true that you lack determination or preparedness, similarly reinforcing their want
to interfere.

Identifying Characteristics:

● Initial touch is lengthy, certain and one-sided, with little enter sought from
you. ·
● Your entry stays unsought because the task pushes forward.
● Makes statements such as:

○ "In this manner, we can stay in touch 24⁄7 if you have any
questions, or I do."
○ "I virtually understand exceptional what's proper for the task and
what isn't always."
○ "What do you suggest I'm distracting you? I am the handiest
issue preserving this task on target!"

How to deal with this type of client:

If you, without a doubt, ought to take in this consumer, for something purpose,
surrender yourself to the reality that you'll now no longer be steerage at any factor.
You will detach yourself from the paintings because you wo haven't any manipulation
in any respect. You will simply be constructing, now no longer designing, so allow
pass and allow it to happen. You may also need to exclude this task from your
portfolio.

8. The Dream Client

This consumer, extensively brushed off as a myth, does in reality exist and knows
the whole scope and artistry of your paintings. The fee your position and innovative
contributions need you inside the driver's seat as quickly because the task is
underway. They are well-timed with responses and bills that they now no longer
"negotiate" but as a substitute for what they may be. They replicate your guidelines
and believe in your skills.

Identifying Characteristics:

● Is obsessed with the task and your involvement in it.

● Communication suggests recognition of and admiration of your position.
● Makes statements such as:

○ "Here's the short we organised. The relaxation is quite an awful

lot as much as you."
○ "We like what we've visible and agree that you'll do exquisite
matters for us."

How to deal with this type of client:

Don't exaggerate! Simply live the moment and relay it to them for as long as you
possibly can! Recognising the type of customer, you'll be dealing with helps prepare
you for the work ahead of time. It can even help you decide whether or not you
should take the assignment in the first place. Your settlement will reflect the task's
strong dynamics; thus, the more you know about the customer, the better your
position to control the settlement.

Enhance consumer interaction and Defining goals

1. Engage with the Client
Interacting with the client involves being personable. It doesn't mean attending their
personal events, but rather displaying genuine interest in what they have to say.
Actively listen to the client and engage in casual conversation beyond work-related
topics. Your goal at this stage is to become the client's go-to freelancer. You aim to
make the client feel cared for, showing genuine concern for their needs.

2. Empathise With the Client

Put yourself in your client's shoes to better understand their concerns and
communicate more effectively. Start seeing them as individuals, not just as someone
fulfilling your tasks. When clients perceive that you genuinely care about their needs,
they become more open, making it easier for them to offer suggestions rather than
overlooking them.

3. Be an Effective Problem Solver

Clients approach us with issues that need resolution, such as requiring a website,
search engine optimisation, or branding. It's our responsibility to address and solve
their problems efficiently. Being inherently creative, we excel at problem-solving.
Strive for the most efficient solutions, as these lead to the highest client satisfaction.
As long as the issue is resolved with the client's well-being in mind, it's considered
effectively handled.

4. Educate the Client

Does the client need to understand the intricacies of coding or web design
principles? Maybe not, but they should know what they're investing in. Educate the
client on design aesthetics, explain basic user psychology principles, or differentiate
between various content management systems. Educating the client mentally
involves them in the project, reducing objections during revisions. Avoid
overwhelming them with technical jargon; simplify explanations for easier
understanding.

5. Million Dollar Treatment

Whether the client is excellent or average, avoid letting them turn into a "difficult
client." Show acknowledgment of their existence. Provide a customised touch, like a
personalised social media background related to their recent design, an early
payment discount, or other small gestures during the project. These gestures might
hold no significant intrinsic value but are appreciated by clients. Additionally,
acknowledging them publicly or sending a thank-you note post-project fosters a
long-term relationship.

6. Have a Good Contract

Believe it or not, having a clear, easily understandable work agreement benefits both
you and the client. Contracts offer the buyer a sense of security while maintaining
professionalism. They minimise the guesswork, ensuring the client understands their
responsibilities and what the designer commits to. Coupled with a well-written
proposal, it leaves little room for uncertainty, providing a clear path in case of
unforeseen circumstances.

7. Don't Be Afraid to State Your Opinion

Knowing when to express your opinion is crucial. If the client is mistaken, honesty is
key. Be ready to justify your viewpoint and offer alternative solutions. There's no
point in admitting a mistake without a viable plan to rectify it. Be open to accepting
fault if the client points out errors.

8. Be Yourself
Inject your personality into interactions and projects with clients. Being genuine
matters; clients can sense if you're not authentic. Your tone reflects your demeanour
accurately. Demonstrating enthusiasm for your work and craft is infectious and often
reciprocated by clients.

9. Communicate
Effective communication is crucial for client interaction. Following the
aforementioned tips will guide you in maintaining professionalism. Honesty in your
communication, attention to detail, and delivering on promises add value to your
work and the project's success.

Defining Your Goals

Breaking goals down into short-term and long-term categories is essential. Common
goals for website owners include improving search visibility, driving conversions,
enhancing brand perception, increasing website traffic, encouraging engagement,
and achieving higher rankings. Avoid fixating on one specific goal; a combination of
short and long-term goals creates a diverse and dynamic campaign, enabling
effective progress measurement for your business.

Difference Between Short and Long-Term Goals

Short-term goals yield immediate gains, achievable within days or weeks. In
contrast, long-term goals take months or years to accomplish. Short-term goals often
support and contribute to long-term objectives. For instance, quick wins can assist in
reaching larger strategic goals over time.

Short Term Goals

These goals generate immediate benefits that align with broader strategies:

● Traffic: Quality content and effective promotion drive website traffic, aiding
both short and long-term objectives.
● Conversions: Engaging website content can prompt visitors to take
action, be it making a purchase or subscribing, contributing to
conversions.
● Engagement: Active social media sharing can elevate engagement
levels, fostering interactions, albeit requiring time to build a substantial
following.

Long Term Goals

These goals take longer to achieve but contribute significantly to sustained success:
 ● Community Building: Building a loyal customer base requires consistent
effort and nurturing relationships through meaningful engagement.
● Link Acquisition: Earning backlinks is a long-term goal supported by
various strategies, contributing to enhanced online authority.
● Exposure: Gaining visibility in targeted and established avenues is a
lengthy process but offers considerable benefits in terms of traffic, PR,
conversions, and link acquisition.

Before initiating campaigns, define clear content goals that align with both short and
long-term strategies. A balanced approach ensures real value from your online
marketing endeavours. Remember, achieving long-term goals takes time;
incorporate these aspirations into your strategy while maintaining a realistic
perspective on progress measurement.

Topic 3. Organise Content & Identifying Security

Needs

Key takeaways from this topic...

1. Integrating security considerations from the start of the information

architecture process is essential.
2. Structuring content and navigation to accommodate various user access
levels securely is a critical aspect.
3. Secure design plays a vital role in protecting sensitive information and
maintaining user trust.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.
Organise Essential Content for Business Structure and
Processes

Collating the Specified Information

To gather and use vast amounts of data effectively, you need technology systems
that streamline collation, storage, and reporting, converting information into action
plans. This approach allows you to:

● Take charge of your abilities

● Understand successful leadership and managerial profiles
● Develop skills tailored to your needs
● Evaluate skills against essential criteria
● Categorise skills into tiers, such as potential successors, high-potentials,
and general development tracks
● Cultivate skills within each tier
● Store data online and provide reporting access to company leaders and
HR management

Fundamental data is necessary and should be grouped into business schemes

aligned with the business structure. Here are practical steps:

1. Create Effective Marketing Tools: Develop a comprehensive image with

profound ideas, even if it means collaborating with designers or art students
for cost-effective solutions.
2. Project Professionalism: Use a professional voicemail system to make a
good impression on potential clients.
3. Focus Your Efforts: Target a specific and qualified audience, rather than
attempting to reach everyone, to save time and resources.
4. Offer Assistance: Support others and align yourself with nonprofit
organisations to build goodwill and business relationships.
5. Provide Samples of your Work: Offer potential clients a glimpse of your
expertise by providing tips or free samples that showcase your skills.
6. Network Effectively: Join local chambers of commerce or business
organisations to establish valuable connections and gather potential leads.
7. Collaborate with Other Businesses: Partner with complementary
businesses to cross-sell services and benefit each other.
8. Start an E-newsletter: Position yourself as an expert and build relationships
by providing valuable content and gathering potential customer email
addresses.
9. Be Proactive in Reaching Out: Rather than waiting for clients to find you,
personalise emails to potential business partners to initiate relationships.
 10. Establish Expertise: Write articles or participate in forums to demonstrate
your skills and expertise in your field.
11. Consider Media Exposure: Utilise cable access shows to showcase your
expertise and attract potential customers.
12. Show Appreciation: Acknowledge top revenue-generating clients with
personalised thank-you gestures or gifts to strengthen relationships.
13. Offer a Guarantee: Implement a satisfaction guarantee to encourage more
people to try your services and increase recommendations.

Website Security
What is Website Security?
Website protection is the measures taken to stabilise an internet site from cyber
attacks. In this feel, internet site protection is an ongoing system and a vital part of
dealing with an internet site.

Why is Website Security Important?

Website protection is crucial due to the fact no one desires to have a hacked internet
site. Having a stable internet site is as essential to hosting an internet site as
essential to a person's online presence. For instance, if an internet site is hacked
and blocklisted, it loses as much as 98% of its visitors. Not having a stable internet
site may be as awful as now no longer having an internet site in any respect or
worse. For instance, consumer facts breaches can bring about lawsuits, heavy fines,
and ruined reputations.

Defence in Depth Strategy

A comprehensive protection approach for internet site protection depends on the
intensity of the protection and on the breadth of the assault floor to investigate the
equipment used throughout the stack. This technique gives a greater correct
photograph of these days' internet site protection chance landscape.

How to Secure & Protect Your Website

Website protection may be a complicated (or maybe puzzling) subject matter in an
ever-evolving landscape. This manual should offer a clean framework for internet
site proprietors looking to mitigate hazards and observe protection concepts in their
internet homes. Before we begin, it's crucial to keep in mind that protection is by no
means a fixed-it-and-forge-it answer. Instead, we inspire you to consider it a
non-stop system that calls for ongoing evaluation to lessen the general hazard. By
using a scientific technique for internet site protection, we can consider it an onion,
with many layers of protection coming collectively to shape one piece. We want to
view internet site protection holistically and technique it with a
protection-comprehensive approach.

Identifying Threats and Self-Defense Online

With more human beings storing private statistics on their computers, it has by no
means been greater crucial to defend yourself from net predators trying to get
admission to your files. One of the various methods they can do is with the aid of
attacking your PC or seeking to collect your statistics from an inflamed or malicious
internet site you could go to, although handy, as soon as possible. The special issue
you may do is to keep away from malicious websites altogether.

● Never click on a hyperlink embedded in an electronic mail. Even if

despatched by a person you agree with, continually kind the hyperlink into
your browser
● Use your not-unusual place feel. Does an internet site appearance
unusual to you? Is it inquiring about touchy private statistics? If it seems
unsafe, don't take the hazard.
● Look for symptoms and symptoms of legitimacy. Does the internet site list
touch statistics or a few symptoms and symptoms of an actual global
presence? If doubtful, touch them with the aid of using electronic mail to
set up their legitimacy.
● Read the URL cautiously. If that is an internet site you common, is the
URL spelled efficiently? Often instances, phishers will install websites
nearly the same as the spelling of the web website you are attempting to
go to. An unintended mistype may also lead you to a fraudulent model of
the web website online.
● If it seems too top to be real, it possibly is. Is the internet site presenting
your services or products at an unprecedented rate? Or perhaps they may
be promising you a massive go-back on funding? If the provider seems too
top to be real, agree with your instincts. Do a few studies to locate
opinions or warnings from different customers.
● Check the homes of any hyperlinks. Right-clicking a link and choosing
"Properties" will screen the real vacation spot of the hyperlink. Does its
appearance special from what it claimed to steer you to? It would help if
you searched for the clues and telltale guidelines on a malicious internet
site. After all, it's far with the aid of intelligent human beings noticing
something incorrectly and reporting it that the above equipment can do
their task.

Things to Search for in a Stable Internet Site

When travelling to an internet site that asks for touchy statistics and credit score card
numbers or your social protection wide variety, step one you may take to secure your
privateness is growing a sturdy password. Equally crucial is verifying that any
statistics you input in this web website online is transmitted and saved nicely. Once
your statistics are entered online, it's far transmitted as simple textual content for
everyone to intercept. To keep away from this, ensure that the internet site is
encrypted over a stable connection.
1. HTTPS
One such indication to look for is contained inside the website's URL. Instead of
"HTTP," a reliable website's URL should begin with "HTTPS." The "s" at the end of
"HTTP" stands for "stable" and indicates that the connection is SSL (Secure Sockets
Layer). Before being sent to a server, your information may be encrypted.

2. THE LOCK ICON

The "Lock" symbol is another indication to look for. This is seen anywhere within
your internet browser's window. Various browsers may also play a part in the unique
lock-in sites. However, you can see some samples of what it may look like right here:
To ensure that a website is trustworthy, be sure to click on the "lock" emblem. Do not
simply look for the symbol and assume that the website is stable! If you click on the
symbol, your internet browser may have specific statistics about the website's
legitimacy, so check carefully before entering any of your statistics on the website
online.

Protecting Yourself

Utilise your net browser's protection equipment. Be positive to put in the maximum
present-day model of your internet browser. Most browsers have state-of-the-art
filters that may perceive and provide you with a warning of capacity protection
threats.

Make sure that the right online safety equipment is enabled for your Anti-Virus
Software.

Make the most of your search engine's security features. Google's search engine
has a reliable model. When conducting a Google search, go to https://google.com.
Activate the "continually utilise HTTPS" functionality in your Google settings by
following the instructions below:

To disable or re-permit this option in Gmail:

1. Open Gmail and log in.

2. Click the gear icon in the upper-right corner and select Mail settings.
3. Change the 'Browser Connection' setting in the General tab to 'Always use
HTTPS' or 'Don't always use HTTPS.' No radio buttons will appear if you've
never changed the setting before, even though the default is 'Always use
HTTPS.'
4. Click the Save Changes button.
5. Manually change the URL to http://mail.google.com to start using HTTP to
access Gmail.
Further Resources
The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

The page on "What is strategic intent?" from APM describes it as an organisation's

aspirational plans and overall purpose, aimed at achieving its vision. It involves using
projects, programs, and portfolios to structure investments and resources in line with
strategic goals, thereby facilitating beneficial organisational change and maintaining
or seeking competitive advantage

Click to Access Resource

Links to an external site.

Reference: APM (2019). What is strategic intent? | APM. [online] www.apm.org.uk.

Available at:
https://www.apm.org.uk/resources/what-is-project-management/what-is-strategic-inte
nt/.

Strategic intent serves as the guiding philosophy for an organisation's strategic

management, encompassing its vision, mission, business definition, model, goals,
and objectives. This framework outlines an organization's future aspirations, defining
its long-term market position and strategies for achieving specific outcomes.

Click to Access Resources

Links to an external site.

Links to an external site.

Reference: "Understanding Strategic Intent" [Online video]. (2023). YouTube.

Available at: https://www.youtube.com/watch?v=bieuz0KbyXY [Accessed 6 Dec
2023].
This article outlines key security aspects in Web services development, emphasising
authentication, authorisation, data protection, and nonrepudiation. It discusses the
varying security needs for enterprise application integration (EAI) and
business-to-business integration (B2Bi) and highlights the importance of
understanding the service's purpose, subscribers, and usage environment.

Click to Access Resources

Links to an external site.

Reference: Samtani, G. (n.d.). Top 10 Web service security requirements. [online]

ZDNet. Available at:
https://www.zdnet.com/article/top-10-web-service-security-requirements/.

Web application security solutions protect websites and online services against a
host of threats. Today, countless vendors depend on them to keep their business up
and running, including those that create database admin tools, SaaS application
developers, and more. In light of this, we’ve compiled a list of the top 10 best web
application security solutions available right now.

Click to Access Resource

Reference: www.youtube.com. (n.d.). Top 10 Web Application Security Solutions.

[online] Available at: https://www.youtube.com/watch?v=thLsfAGj_GY [Accessed 6
Dec. 2023].

The TechTarget article "What is Information?" defines information as stimuli that hold
meaning in a specific context for its receiver. When this information is entered and
stored in a computer, it is usually termed data. This data, when processed, becomes
perceivable as information again. The processing might include actions like
formatting and printing. Furthermore, when information is compiled or utilised to
understand something better or to take an action, it transforms into knowledge​

Links to an external site.

​.

Click to Access Resources

Links to an external site.

Reference: Samtani, G. (n.d.). Top 10 Web service security requirements. [online]

ZDNet. Available at:
https://www.zdnet.com/article/top-10-web-service-security-requirements/.
How do you define information, and how does that definition overlap or differ with
how others might define it? In this video, you will look at some definitions Inside (and
outside) of Information Science to see if we can develop a nice, one-size-fits-all
definition for everyone.

Click to Access Resource

Reference: www.youtube.com. (n.d.). What is Information? [online] Available at:

https://www.youtube.com/watch?v=B2rHe8zZypY.
2. Content Structuring

Module 2. Content Structuring

Step into Week 2 where we immerse ourselves in the art of Content Structuring. This
module is the cornerstone of information architecture, focusing on organising,
structuring, and labelling content effectively. We move beyond basic planning to the
essential tasks of collating information and developing intuitive sitemaps that cater to
the end user's journey.

Topics:

● Information Collation and Grouping: Discover the methodologies

behind gathering content and learn the principles of categorising this
information logically and efficiently.
● Topic Clustering: Grasp the nuances of content theming and the creation
of topic clusters that enhance the findability and relevance of information
on your website.
● Sitemap Development: This topic introduces the process of transforming
your content clusters into a coherent sitemap, a blueprint that defines the
website's structure.

Learning Activities:

● Content Categorisation Framework Exercise: You will construct a

framework to categorise content, gaining insights into the user-centric
approach to information structuring.
● Card Sorting for Content Coherence Challenge: A hands-on task
where you will engage in card sorting, a technique to aid in understanding
user expectations and content relationships.
● Sitemap Engineering Project: Put theory into practice by crafting a
detailed sitemap that reflects both the strategic intent of the business and
the needs of the audience.

Subject Learning Outcomes

The material in this module relates to the following subject learning outcomes:
 ​ SLO 2: Construct and manage website information architecture for optimal
content organisation.

Student Expectations

During this module, you are expected to spend time working through the prescribed
material prior to attending class. This will enable a more valuable discussion to take
place in online tutorials or conferences, where you will be able to discuss concepts,
present ideas and explore information collaboratively in greater depth.

Accordingly, it is suggested that you allow:

4 hours for facilitated study. This includes guided facilitated study, watching or
attending course lectures (live or pre-recorded), responding to facilitator feedback.

8 hours for personal study. This includes reading through course material,
undertaking learning activities and exploring additional related resources.

Creating Structured
Documents using HTML
Structured documents on a web page are created using HTML. HTML stands for
Hypertext Markup Language. It is the language the web uses to define the structure
and content of web page. The presentation and appearance of the content will be
controlled by styling rules written in CSS, which stands for Cascading Style Sheets.

A document that has been marked up using HTML, when opened using a web
browser, will be rendered in a certain way according to the tags that are in the HTML
document. The structure of the HTML and the rules in the CSS will be read by the
browser and will be rendered inside the browser window as what we see as a web
page.

History

HTML was first publicly available on the internet in 1991, which contained 18 basic
tags. The design of HTML was influenced by another markup system called SGML
(Standard Generalized Markup Language). HTML 2.0 standard was formally
completed in 1995 which introduced new features, including forms, file upload,
tables, image maps and internationalisation (support for languages other than
English).

Since 1996, the development of the HTML specifications has been maintained by an
organisation called the World Wide Web Consortium (W3C). In 2004, the
development of HTML 5 specifications began under an organisation known as Web
Hypertext Application Technology Working Group (WHATWG). It was ratified as a
standard on 28 October 2014.

Usage

HTML was initially used to markup documents in a research environment to a

knowledge base similar to modern day WikiPedia, where linking of resources from
one document to another was used to be able to quickly navigate between web
pages. The proliferation and effectiveness of HTML means that is used across a
huge range of devices (mobiles, smart TV's, ...) and applications. Many mobile
phone applications today are powered by HTML. The applications, that use HTML
based interfaces, are often referred to as hybrid applications. They combine the
functionalities of native applications (built with the device's programming interfaces)
and web applications.

Many desktop applications are now being replaced by web applications that can
perform the same tasks. Examples include:

● Word processing applications like Microsoft Word being replaced by online

tools such as Google Docs or Microsoft Office 365.
● Finance applications such as MYOB and Quickbooks are now being
replaced with applications such as Xero and others.
● Operating systems such as Windows being replaced by HTML based
interfaces in Chromebook.
● Music playing applications such as iTunes and Windows Media Player
being replaced by web-based streaming applications such as Spotify and
YouTube.
The Future

Today, HTML is used in many interfaces all around us. Web applications, along with
the development of cloud computing, will mean that more and more data will be
stored in the cloud, which, in turn, will mean more interfaces will need to be
developed to be able to visualise and consume this data. This hints at a future where
HTML usage will increase, not decrease.

To continue, select the Next button below.

HTML Tags
HTML consists of tags. Tags are used to markup a document to create objects such
as paragraphs, images, video, and others. In the early years, it was a convention to
write HTML tags using uppercase letters, such as <BODY>. Nowadays, HTML tags
are generally written in all lowercase, such as <body>. Examples of commonly used
HTML tags:

Tag Name Function

To create headings. The H1 is the largest of the

<h1> Heading
headings

<h2> Heading To create headings

<h3> Heading To create headings

<h4> Heading To create headings

<h5> Heading To create headings

<h6> Heading To create headings

<p> Paragraph To create paragraphs

<strong> Strong To create bold text

<em> Emphasis To create italic text

Unordered To create a list where the order of items is not

<ul>
List significant (Bullet points)
 To create a list where the order has a
<ol> Ordered List
significance (numbered list)

<li> List Item To create a list item

<br> Line Break To break text to the next line

There are a lot of other HTML tags available. Some HTML tags have only relatively
recently been made part of the HTML 5 standard. Some examples of the newer tags
are below.

Tag Name Function

<video> Heading To insert a video clip in a document

<audio> Heading To insert an audio clip in a document

<section> Heading To mark a section in a page

<article> Heading To mark an article in a page

To mark the header of a page or section of a

<header> Heading
page

<main> Heading To mark the main content of a page

To mark the footer of a page or the footer of a

<footer> Paragraph
section of a page

Tag Structure
HTML tags can be grouped according to several general categories. Some tags are
used in pairs and others are used unpaired. Some tags are used for basic formatting,
while others are used for creating a page structure.

Paired Tags

In HTML tags have a specific structure. A paired tag consists of an opening and
closing tag. The closing tag has a forward slash before the tag name.

<h1> Tag Content </h1>

 Opening Tag Content Closing Tag

Unpaired Tags

In HTML there are also tags that have no closing tags. For example, line break, is
written as <br>, without any closing tags.

<br>

The line break tags does not have any closing tag or content.

Examples of unpaired tags.

Tag Name Function

<meta> Meta To specify metadata for the page

<link> Link To link to an external resource

To insert an image to be displayed in the

<img> Image
document

Horizontal
<hr> To create a horizontal line
Rule

Document
<doctype> To specify version of HTML used by a page
Type

Tags by Function
HTML tags can also be grouped according to their function.

Formatting Tags

Tags in this group are used to format elements and have default styles associated
with them (they have built-in styles).

Tag Name Function

 <strong> Strong To create bold text

<em> Emphasis To create italic text

<blockquote> Blockquote To quote from another source

<pre> Preformatted To define preformatted text

Page Structure Tags

Tag Name Function

To define the head of the document, containing

information about the document (this section is
<head> Head
not visible) and is different from the <header>
element

To define the body of the document (the visible

<body> Body
portion)

To define a page header, which is the top part of

<header> Header
a page (not the same as the <head> element)

To define a page footer, which is the bottom part

<footer> Footer
of a page

<section> Section To define a section of a document

Aside is to define content that is not the main

content of a page. For example, it might be used
<aside> Aside
enclose information that is related to the main
content, or related links.

Control Tags

Tags in this group are used to add controls to a page.

Tag Name Function

To define scripts that will be run within the page.

<script> Script
Most often used to define Javascript code.
 To define a collection of input elements that can
<form> Form
be submitted at once

<input> Input To receive input from the user

<option> Option To define options within a <select> dropdown list

<select> Select To create a dropdown list

HTML Attributes
HTML Attributes are used to specify attributes of a tag. Attributes are properties of a
tag. Many tags share the same attributes, while some tags have specific attributes,
which have to be declared.

An example of a tag with attribute.

HTML attributes are written using an attribute="value" format. The value of the
attribute is surrounded by double quotes. A tag can have multiple attributes,
separated by a space in between each pair of attribute and value.

HTML Tags with Mandatory Attributes

Some HTML tags have to be accompanied by at least one attribute. These tags will
not function without the attributes, because the attributes define the way the tags are
used. Although the following examples are not exhaustive, they represent some of
the most commonly used tags with their attributes. The left column shows the tag,
the next column shows the attribute or attributes that have to accompany the tag, the
right column shows the way the tag is used with the attribute in code:

Tag Attribute(s) Usage

 <img> src <img src="image.jpg">

href <link href="style.css"

<link>
rel="stylesheet">
rel

name <meta name="keywords"

<meta>
content="books,literature">
content

<script> src <script src="myjavascript.js">

method <form action="form_handler.php"

<form>
method="post">...</form>
action

Other Attributes

Most other HTML tags have attributes which can be optional. Some attributes are
more important than others, some more commonly used than others.

Class Attribute

The class attribute can be used on any HTML tag. It is usually used for the purposes
of applying style or styles to an element. The purpose of the class attribute is to allow
for elements to be classified together into a group. This is often done to apply styles.
This attribute is also used to apply shared styles across different elements. For
example, a page might contain multiple paragraphs of text. To make the style more
consistent, the same set of style rules may be applied to all paragraph text using a
class.

Class Name

Each class is distinguished from each other using a name. The name of a class must
begin with an underscore (_), a hyphen (-), or a letter (a–z), followed by any number
of hyphens, underscores, letters, or numbers. Class names, cannot have a number
as its first character.

When multiple words are used in a class name, such as "red-text" in the image
above, it is a convention to use a hyphen (-) to separate multiple words. This is often
referred to as kebab case.

An HTML element can have multiple values in its class attribute separated by space.
The styles of both classes will be applied to the same element, where there is an
overlap, eg two classes specifying the same property of an element, then the second
class will have priority.

The style specified in the class red-text will be combined with the style in large-text. If
there is a conflict, the second style will be applied. Note the use of the kebab case in
red-text and large-text.

id Attribute

The id attribute is used to assign an id that is unique to an element within a page.

This means that no other element within the same document or page can have the
same id. This attribute can be used to apply styles or to easily identify the element
within a script running on the page. Each HTML element can only have a single id
name that must be unique within the page.
id Name

The rule for the naming of id, follows the same rule as in class attribute above. The
name of an id must begin with an underscore (_), a hyphen (-), or a letter(a–z),
followed by any number of hyphens, underscores, letters, or numbers. Id names,
cannot have a number as its first character.

Alt Attribute

The alt attribute is an attribute used on images, to describe the content of an image.
If it is taking a long time for an image to load, or an image fails to load due to it being
moved, it is a good idea to include some text to describe what the image depicts.
Therefore, it is a good idea to use the alt attribute inside an image tag to describe
what the image contains.

This attribute also aids in the accessibility of a web page, such as when a
sight-impaired user accesses the page using a screen reader software. Screen
reader software relies on text content within a web page to be able to guide
sight-impaired users in using the page.

To continue, select the Next button below.

Further Resources
 The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Reading: What is enterprise architecture? A framework for transformation

Click to Access Resource

Links to an external site.

Reference: White, S.K. (2018). What is enterprise architecture? A framework for

transformation. [online] CIO. Available at:
https://www.cio.com/article/3313657/what-is-enterprise-architecture-a-framework-for-t
ransformation.html.

Video: What is Enterprise Architecture (EA) and why is it important?

Click to Access Resources

Links to an external site.

Links to an external site.

Reference: Raj Ramesh (2019). What is Enterprise Architecture (EA) and why is it
important? EA concepts explained in a simple way. YouTube. Available at:
https://www.youtube.com/watch?v=9TVc32M_gIY.

Reading: Clustering Technique in Data Mining for Text Documents

Click to Access Resources

Links to an external site.

Reference: J.Sathya Priya et al, / (IJCSIT) International Journal of Computer Science
and Information Technologies, Vol. 3 (1) , 2012, 2943-2947

Video: 4 Basic Types of Cluster Analysis used in Data Analytics

Click to Access Resource

Reference: www.youtube.com. (n.d.). 4 Basic Types of Cluster Analysis used in Data

Analytics. [online] Available at: https://www.youtube.com/watch?v=Se28XHI2_xE
[Accessed 27 Oct. 2021].

Reading: What is Hierarchy?

Click to Access Resource

Links to an external site.

Reference: What is hierarchy? - Definition from WhatIs.com (2012). What is

hierarchy? - Definition from WhatIs.com. [online] WhatIs.com. Available at:
https://whatis.techtarget.com/definition/hierarchy.

Video: What Is a Hierarchy?

Click to Access Resource

Reference: www.youtube.com. (n.d.). What Is A Hierarchy? [online] Available at:

https://www.youtube.com/watch?v=Ld2hDX28Lpk [Accessed 6 Dec. 2023].

Topic 1. Information Collation and Grouping

Key takeaways from this topic...

1. Document clustering groups text based on similarity, aiding tasks like file
grouping, feedback analysis, and theme detection. Algorithms vary in
efficiency and methods used for effective clustering.
 2. Clustering assists search engines by categorising search results and
simplifying user browsing and information retrieval.
3. Report clustering involves tokenisation, stemming/lemmatisation, stop word
removal, frequency computation, clustering, evaluation, and visualisation for
insights.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Topic Clustering and Documentation

Cluster Document

Document clustering includes descriptors and descriptor extraction. Descriptors are

units of phrases that describe the contents in the cluster. Document clustering is
usually taken into consideration to be a centralised system. Examples of report
clustering encompass internet report clustering for seeking customers.

The utility of report clustering may be labelled into two types, online and offline.
Online packages are generally limited with the aid of using performance troubles in
comparison to offline packages. Text clustering can be used for special
responsibilities, comparable grouping files (Information, tweets, etc.), and evaluating
client/worker remarks, coming across important implicit topics throughout all files.

In general, there are no unique place algorithms. The first is the hierarchical, primarily
based set of rules, incorporating available hyperlinks, whole linkage, institution
common, and Ward's technique. By aggregating or dividing, files may be clustered
into a hierarchical shape that is appropriate for surfing. However, such a set of rules
generally suffers from performance troubles. The different set of rules is advanced in
the usage of the K-way set of rules and its editions. Generally, hierarchical algorithms
produce greater in-intensity statistics for certain analyses, whilst algorithms primarily
based on round editions of the K-way set of rules are greater green and offer enough
statistics for maximum purposes.
These methods can also be divided into two types: tough and smooth clustering
algorithms. A tough project is computed using hard clustering, in which each report
belongs to just one cluster. Smooth clustering methods have a smooth project - the
project of a report is a distribution across all clusters. A report in a smooth project has
a fractional club in many clusters. Dimensionality reduction methods for files include
latent semantic indexing (truncated singular fee decomposition on period histograms)
and subject matter fashions, both subtypes of soft clustering. Graphs based mainly
on clustering, ontology-supported clustering, and touchy order clustering are among
the other methods.

It can be beneficial to provide human-readable labels for clusters based on clustering.

There are a variety of approaches to this problem.

Clustering in engines like Google

An internet seeks engine regularly returns lots of pages in reaction to a vast query,
making it challenging for customers to browse or perceive useful statistics. Clustering
strategies may be used to mechanically institution the retrieved files right into a listing
of significant classes.

Steps in Regular Report Clustering

In practice, report clustering regularly takes the subsequent steps:

1. Tokenisation
Tokenisation is the process of breaking down textual information into smaller pieces
(tokens), phrases, and words. The Bag-of-words version and the N-gram version are
two popular tokenisation techniques.

2. Stemming and lemmatisation

Comparable statistics may be performed by different tokens (e.g. tokenisation and
tokenising). We may also avoid collecting similar statistics again and over by
reducing all tokens to their base form using various stemming and lemmatisation
dictionaries.

3. Removing forestall phrases and punctuation

Some tokens are much less crucial than others. For example, not unusual place
phrases and "the" may not be handy for revealing the vital traits of textual content. So
generally, it is a superb concept to get rid of forestall phrases and punctuation marks
earlier than doing a similar evaluation.
4. Computing period frequencies
We can proceed to generate capabilities after pre-processing the textual content
information. Calculating the period frequencies of all its tokens is one of the most
used report clusterings to produce capabilities for a report. Although no longer ideal,
such frequencies can nevertheless provide some insight into the report's topic. It's
also useful to weigh the period frequencies with the help of the inverse report
frequencies now and then. Look for specific discussions.

5. Clustering
We can then cluster special files primarily based totally on the capabilities we've
generated. See the set of rules segment in cluster evaluation for unusual varieties of
clustering strategies.

6. Evaluation and visualisation

Finally, the clustering patterns may be evaluated using a variety of measures. It's also
beneficial to see the results by plotting the clusters into low-dimensional regions now
and then. Multidimensional scaling is a viable option.

Topic 2. Hierarchy and Site Map Development

Key takeaways from this topic...

1. System hierarchies offer deep insights into a business's workings, revealing

inefficiencies and improvements that can boost productivity and financial
gains.
2. Begin by adapting existing frameworks and involving senior management in
simple workshops to focus on essential processes, initiating hierarchy
creation without overwhelming complexity.
3. Visual, HTML, and XML sitemaps serve various purposes, aiding navigation,
user experience, and search engine indexing, with XML sitemaps being vital
for search engines like Google.

Learner Guide
 The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Guide to Growing a System Hierarchy

Most human beings suppose, "Why need to I care approximately a Process

Hierarchy?" – a simple sufficient query. We understand this manual may sound like a
quick manner to place yourself to sleep; however, the unexpected reality
approximately the Process Hierarchy is that it can be an illuminating and worthwhile
enterprise task. It's a primary step in shining a mild on the way you operate, in which
waste is occurring, in which fats may be reduced, and the way you may enhance.
This provides as much as bucks and cents, a subject all of us find exciting.

Whether you're new to system hierarchies or want a refresher, this manual will assist
you in research:

What is a System Hierarchy?

A system hierarchy visually demonstrates all the ongoing responsibilities inside your
enterprise. Think of one as being a bit like an architectural blueprint for a house.
Except instead of beams and rafters, a system hierarchy suggests the methods that
maintain your enterprise upright. They also are visible as a complement to your
organisational chart. The organisational chart suggests how departments and roles
are associated, whilst the system hierarchy suggests how sports are associated and
how they supply the consequences to obtain your organisation's dreams. They map
the small stuff, like how a receptionist needs to take a name or a way to ship a past
due fee word, to the huge and crucial stuff along with hiring a brand new head of a
branch.

What's In It For Our Enterprise?

There's a tough, difficult-to-affect someone in each bunch, so we'll provide you with
one easy purpose: Information is higher than ignorance. Process hierarchy is a set of
Information and knowledge. It guarantees you're no longer working in the dark.
Familiarity, to tweak an antique saying, breeds ignorance. We may suppose we
understand how our enterprise works, however will we virtually? A system hierarchy
will display us. It will screen what recurrent responsibilities we're doing nicely, what
can be higher, what our blind spots are (the matters we're no longer seeing),
locations we should enhance Client enjoy, in which to get rid of waste, or even in
which economic, marketplace and reputational hazard should lie. You provide your
personnel with a not-unusual place language and a clear knowledge of their
responsibilities by recording your methods. They additionally can help you constantly
degree and incrementally enhance the methods occurring throughout your enterprise,
lowering waste and growing effectiveness. Having one virtually is a no-brainer.

A system hierarchy will assist you in solving a few key questions. A nicely made
system hierarchy will display to you the way habitual responsibilities float to your
business enterprise. They assist in deciding which people get to take part wherein
selection-making methods. They offer the muse to your widespread working tactics
and workouts.

A System Hierarchy lets you Optimise your Enterprise by Defining:

● Which methods are number one and which might be supporting.

● What are their meant consequences or outputs?
● Who they may be finished with the aid of using.
● How they may be associated with every different.

A clear knowledge of how your personnel are doing their responsibilities gives
insights to enhance. It additionally suggests whether or not you're aligned with an
appropriate procedure. For instance, the EU has an upcoming regulation on privacy
facts and safety. With a system hierarchy, you may quickly dig down and verify
whether or not your business enterprise complies with such new legislation. And in
case you must make modifications, it's an awful lot less difficult to pivot and tweak
matters if you have methods already in the area.

Can we Construct a System Hierarchy with the Aid of Using Ourselves?

System hierarchies may be relatively complicated and time-consuming. However,
everyone can recognise the fundamentals. With a piece of making plans and
assistance from courses like this, you'll be nice to your manner to growing an expert
widespread system hierarchy.

System Hierarchy Development Initial Steps

Now you realise the fundamentals of system hierarchies and what to encompass.
Here are a few hints on the way to take the primary steps:
Step 1: Start with the Requirements and Structures you have already got
If you have already got a running great control device, then, as a beginner, truly
switch the desk of contents to the system hierarchy layout. There's no factor in
reinventing the wheel. So make lifestyles less difficult as an awful lot as feasible, and
version your system hierarchy on requirements and frameworks you have already
got. Talk for your IT guys – they could have performed something just like put
together to implement a structure.

Step 2: Workshop Essential Methods with Senior Control

Before you make any dedication to constructing a system hierarchy, getting control's
purchase-in is without a doubt vital. Ideally, this attempt is pushed with the aid of
using control or a person close. This is exceptionally kicked off with a workshop that
specialises how your methods connect to your approach. Call your exceptional
facilitator and collectively get your pinnacle control group to map the excessive-stage
quit-to-quit flows for an offsite workshop. This is a dialogue approximately your
enterprise version and fee circulate and who's typically chargeable for what. It is
probably to get very energetic and engaging.

Step 3: Focus on Essential Methods Initially

Start with the aid of locating the ten to 30 methods that you virtually remember.
They're those who maintain the business enterprise humming. Suppose your
imagination and prescience are too vast too quickly, and you attempt to nail down
each available enterprise system. In that case, you'll get slowed down within the info
and lose sight of the essentials.

Step 4: Assign Duty for Every System

Assign duty for every one of the essential methods to particular group contributors.
Some of those human beings may be apparent, like branch heads in a huge business
enterprise, however in a few instances, they won't be, and also, you'll want to
research who's who.

Step 5: Decide on your Layout and Equipment

Next, you're going to want a manner to map your methods visually. The key for
fulfilment right here is that something device you operate ought to be shareable and
clean to collaborate enterprise-wide. If it remains in a single room, it's going to end up
lifeless and forgotten. This is in which online structures, along with Gluu's, come in.

Step 6: Assign a Task Supervisor

When it's time to take the task out to the complete business enterprise, you'll want a
task supervisor to steer the manner. Choose a person with a vast knowledge of the
enterprise and who can communicate with human beings within the boardroom and
on the store floor.

Step 7: Manage your System Hierarchy Centrally

We're interested in decentralisation and related to everybody. However, regarding
your system hierarchy (and your roles for that, remember), they agree on the few
administrator positions that are allowed to alternate matters. It would help if you had
everybody participating; yes, however, hold manipulate centrally.

● Process names and final results descriptions continue to be regular.

It may be puzzling if one system is "Onboard new client" and another is
"Customer control". Stick to 1 semantic fashion (we advise using a lively
shape and "Manage methods". Yes, you need to have a system for dealing
with methods.
● Processes don't overlap (too, an awful lot).
Each system needs to have a completely clean call and final results. This
unit the scope and guarantees which you minimise overlap whilst different
human beings begin mapping them. If this preliminary map of methods isn't
clean, you probably peer confusion whilst others begin mapping.
● Processes turn out to be less difficult to hyperlink with every
different.
Getting the preliminary review and knowledge of quit-to-quit flows makes it
less difficult to hyperlink methods and display associated ones. This offers
knowledge and insights into the system mapping physical activities that
come later.

Sitemap Essentials: Types and Functions

What is a Sitemap?

A sitemap is a visual representation of the content on your website. This was

designed to aid each individual and search engines such as Google, Bing, Yahoo,
and others. In principle, though, it's the equivalent of a website definition, and it's
generated through a slew of paperwork and complexity. The way that online mapping
is used on a website might differ substantially. Some aren't even meant to be read
with the naked eye; instead, they're designed to make search engine bots move
slowly.

A sitemap is a diagram of the internet website's structure. Before a single line of code
is created, it might frequently highlight a person's enjoyment issues and simplify
content material introduction.
Types of Sitemaps

In general, web website online mapping allows us to recognise what's on a website

without having to go through the entire page. There are three basic types of
sitemaps, each with its own set of benefits and degree of difficulty. Here's a quick
rundown of everything you'll find in this book.

1. Visual Sitemap
Visual sitemaps are often flat, 2D drawings or renderings that depict the structure of a
domain. They usually start with the homepage and show how different pages link to
one another, providing a visual map of all the figure-toddler relationships inside a
domain. This type of Sitemap also indicates mobility by displaying how customers
may browse across a site. This gives designers the ability to plan for usability. For
example, a visible sitemap will show how the 'approximately web page' relates to the
'offerings web page' or point out that the 'offerings web page' is linked to the 'roughly
web page'. It has three toddler pages detailing the one's offerings. You can research
loads approximately the shape of a domain from a visible sitemap, making them
relatively beneficial whilst making plans for an internet site. Sitemaps assist with
internet site making plans, enhance the person's enjoyment, and are an effective
search engine optimisation device.

2. HTML Sitemap
Sitemaps are no longer required to be displayed, although drawings and renderings
are often valuable. technology connectivity implications website online mapping may
provide many of the same advantages as visible website online mapping, but with a
lot less effort. Instead of creating a graphic, HTML website online mapping generates
a structured list that you may study; however, it may not if the list is long enough.
Although it doesn't do a great job of illustrating how pages are connected, this
simple-to-create definition is nonetheless useful. It lists the figure pages and utilises
sub-bullets below them to expose the kid pages to show the links between them. If
the online website is large, this may quickly become an extremely extensive list.

If this looks as if a simplistic technique, it's far. In the early days of the net, HTML
sitemaps had been greater, not unusual places. Nowadays, you may locate them
related within the footer of a few websites – handy, however, now no longer virtually
noticeable. If customers control to locate the hyperlink to an HTML sitemap, they can
scroll through it, fast surfing the web website's format. In these days' global of
seeking, HTML sitemaps nevertheless function for a few customers' internet site desk
contents.
3. XML Sitemap
While a visible sitemap may help designers prepare for a website, and an HTML
sitemap allows users to examine the structure of a website, the XML layout of your
Sitemap requires special attention. The XML web website online mapping produces a
domain definition and displays the relationships between pages.

Bots, specifically search engine bots, use XML web website online mapping.
As a result, XML sitemaps need a certain structure to perform their purpose. Because
XML internet site sitemaps are used by search engine crawlers, such as Google bots,
you may utilise Google Search Console to check if your website has an XML sitemap
and submit your Sitemap using Webmaster tools.

Topic 3. Strategic Website Mapping Essentials

Key takeaways from this topic...

1. Visual sitemaps, like an architect's plan, ensure smooth website creation,

address design issues, and align with user needs for successful sites.
2. Visual sitemaps benefit stakeholders, users, and development teams by
simplifying communication, enhancing navigation, and fostering collaboration.
3. Double-checking data entry, using verification tools, and proactive measures
are crucial to maintain accurate data and prevent errors during collection and
entry.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

The Importance of Website Mapping

Before growing a sitemap, it regularly gives you a few concepts of why you're doing
so within the first area. There are many blessings to growing a sitemap, and that
organisational equipment may be used for a whole lot of scenarios. Creating a
concise sitemap is a key part of growing any internet layout task's certain short
timeline. Whether you're growing a brand new internet site or remodelling a current
web website online, find out about how you may use web website online mapping to
make your internet layout task pass smoothly.

1. New Websites
If you're building a new website, there's a good chance you'll start with a few different
sorts of Sitemaps. If you haven't already, you may want to. Even if it's only a crude
caricature of the sites you've chosen, it's still a sitemap.

Site mapping a website is similar to an architect drafting floor plans for a house - it
provides a framework for everyone involved in the project to follow and ensures you
don't run into any design problems. While it is still possible to build a website without
first creating a sitemap, it is no longer a good idea. Site mapping may significantly
improve a person's enjoyment. If creating the best possible experience for someone
is one of your goals, starting with a visually-based Sitemap is a great way to get
started.

Planning for a person's happiness necessitates a calculated effort. You need to know
how many pages you have, what kind of content you're utilising, how they're
connected, and any other features your consumers could encounter. You'll need to be
able to plan the journey you expect consumers to take, as well as anticipate various
capacity routes. You want to make it simple for them to find the data they require. A
visible sitemap is an outstanding way to ensure that statistics are available.

2. Site Mapping Enables Cognisance of an Internet Site

A well-prepared sitemap is a blueprint for a successful website, but only if it starts
with a strong information architecture (IA).

To write evaluations that help shape your person's goals, you must first grasp their
goals.
This is made possible by the IA. It can monitor the topics, types of Information, and
even interactive elements that your consumers may utilise. The data structure you
comprehend will be reflected in your Sitemap. The statistics structure can no longer
be built on a corporate basis without the Sitemap. Designers may also overlook the
reason for their work. As the creative notion takes control, the individual's wants may
be separated. Before you know it, you've created a collection of beautiful pages that
are disorganised, unappealing to the target market, and difficult to convert.

3. Redesigns
If you weren't previously planning to use a visible-based Sitemap, redesigns are an
excellent higher-level reason to do so. Redesigns, like a fresh new website, need
planning, maybe even more so because they may be re-makes of an original layout
no longer serving its purpose. Redesigns frequently contain a healthy dose of
statistical structure to fix anything that went wrong. That research is rewarded with a
well-thought-out, easily accessible Sitemap. Site mapping is ideal for redesigns since
it may fix issues that may be occurring in the background. Were site visitors
abandoning their intended pages regularly? Is it true that excessive statistics killed
SERPs? Do your website's online analytics suggest that you need a search bar?
Instead, you'd use a more direct approach to communicate with your customers.

Site mapping, whether it's a visible sitemap, an HTML sitemap, or an XML sitemap,
may assist in resolving such issues serving as the foundation for a better-prepared,
more navigable website online.

4. Site Mapping Makes it Easy to Enhance

Even if there isn't anything wrong with your internet website, creating a sitemap of
any type might be a fantastic idea. Assume it's been a few years since your last
renovations. In such a scenario, your website's keywords, target market wants, inner
dreams or key overall performance indicators (KPIs) may have altered as well,
pushing you to do so. You'll want to establish fresh navigation for your consumers at
this point, and the easiest way to do so is via a visible sitemap. Customers may be
able to browse through the website with ease; nevertheless, the bigger issue is that
they are unable to discover you in their search. In that state of affairs, cleaning the
internet site in a few manners and filing an up-to-date XML sitemap (or one in any
respect in case you haven't already) is regularly sufficient to seek visitors.

Now is the time to test your web website's online pace and ensure all pages are
responsive on each cellular and computing device, as this can have a huge effect on
a person's enjoyment. Your new web website online's search engine optimisation.

When you make changes to search engines like Google and Bing, you increase your
chances of new pages or an updated website online form being discovered quickly.

5. Site Mapping Redesigns

Site mapping is no longer difficult; however, doing one for a remodel is regularly more
difficult than a logo-new web website online. Part of the purpose is that you already
have already got present content material, and a maximum of the time you're
predicted to apply as an awful lot of it as feasible. Therefore, step one in remodelling
is usually a content material stock. Unfortunately, that system can take plenty of time,
making redesigns as worried or maybe greater worried than new web websites. Once
you know what content you have, you can properly plan for what content you'll need
and utilise that knowledge to develop a well-organised visible sitemap.

Creating a new sitemap without first expanding the stock of your existing content
material isn't usually the most environmentally friendly option. It might not be up to
the duty of ensuring that the correct individual enjoys it. So, before you start putting a
visual diagram together for your website renovation, we recommend starting with the
website you already have. It's as if you start at the bottom and work your way up
(alternatively of truly beginning from scratch). Slickplan's visible sitemap generator is
a wonderful example of this in action - simply input the genuine web domain online,
and it will map it for you. You may then upload, reorganise, and remove your files as
needed.

Who Benefits from Site Mapping?

It may take one individual to prepare a sitemap. However, more than one human
being can gain from one. Because web website online mapping enables simplify the
internet site making plans system, almost everybody worried with the advent of an
internet site will recognise having one. This consists of stakeholders and customers,
the quit person, and of the path, others at the internet improvement group.

1. Stakeholders and Clients

Stakeholders have an important role in the planning system, even though they will no
longer be actively involved in the website's construction. Stakeholders are people
who are interested in your project, and they are likely those interested in building
websites.

● Target audiences,
● C-suite executives,
● Project managers,
● Sponsors

Each of these individuals may have a vested interest in the success of your website.
Their role might be internal – aiding in the development of the website online or
recognising organisational goals – or external – passing over clicks and converting
leads. Regardless of their specific role in the website project, it may be vital to
preserve open verbal exchange with them at some point in the internet site-making
plans system. Having everybody understand what goes on is a full-size thing in an
internet site's typical fulfilment.

Visual web website online mapping can simplify the system of verbal exchange
among the internet site improvement group and task stakeholders. These human
beings regularly have special dreams and techniques of internet site improvement
from certain factors of view. Whereas the internet developer may also have masses
of statistics on the target market's desires, key stakeholders can be highly versed in
the agency's desires. This graphical web website online mapping device gives a
concrete plan for how each desire may be addressed.

Because stakeholders regularly need to understand what goes on with the task (and
now no longer always the info), it's crucial to apply a non-technical layout. It's also a
fantastic idea to build sitemaps that can be easily opened and don't rely on software
applications that those important decision-makers no longer utilise. Slickplan's
online-based, fully accessible sitemaps enable each level of design for the
development team as well as simple sharing, collaboration, and viewing options for
non-technical stakeholders.

2. The End-User
Who are you building for? Everyone who interacts with your completed website is the
last person, and they, like your clients and stakeholders, appreciate the usage of a
sitemap. Customers will have an easier time finding your website online if you use
site mapping.

● Make it easier for clients to find content for your website on the internet.
● Improve the website's online navigation.
● Ensure that the outstanding individual has a good time.

An HTML sitemap, as previously said, is a table of contents for your website. It

informs clients about what to expect in terms of content and capabilities. Customers,
on the other hand, may not always find the most useful type of Sitemap. Visual
sitemaps are especially useful because they help ensure that improvement groups
are person-targeted (rather than agency-targeted). XML web website online mapping
allows capacity consumers to locate the web website online via search. Site mapping
is possibly maximum useful whilst used throughout the internet site-making plans
phase. When mixed with a nicely strategised statistics structure, it can make certain
improvement groups live on target and preserve a focal point on usability. Focusing
on usability blessings the quit person, as it ends in a hit virtual, enjoy. If you're no
longer growing an effective go-to to your customers, you would possibly as nicely get
out of the sport.

Site mapping is a crucial stage in ensuring that completed work is usable. Your
Sitemap is a schematic — a foundation or blueprint – for the rest of your internet
domain. The IA advises that it must recreate the original goal of the web website's
overall navigation. Learn more about how IA, navigation, and sitemaps are defined
and how they work together.

3. Web Development Terms

How nicely do you figure in groups? Those who favour creating by myself can be
amazed to research that websites are regularly constructed with the aid of using
groups, and now and again, now no longer everybody is mechanically at the identical
web page. Site mapping could make running in internet improvement groups less
difficult as it enables:

● Set the navigation priority,

● define the preferred content material to enjoy,
● make sure the designs are in line with the statistics structure.

While website online mapping is heavily reliant on statistics structure, it isn't only
about statistics structure. Your Sitemap, in particular, not only explains how
navigation will work or which content material will go where, but it also plans for the
layout elements of the website online. Designers and builders may have a more
challenging time organising their thoughts and creating a coherent, user-friendly
website online if they don't have a sitemap.

Site mapping is a component of a larger content strategy that includes determining

content priority, identifying required pages and templates, and developing a content
version (if relevant). Designers frequently use this method, emphasising the most
full-size areas of the website and focusing on the accessibility requirements of the
final user. Collaboration is streamlined with a sitemap since designers have a clear
guidebook to refer to.

When it comes to website online mapping, both the designer's and the developer's
desires must be considered. Designers frequently have specific objectives and
accessibility requirements (such as easy-to-read navigation labels or the ability to
browse across a domain), and these provide unique problems. At the same time,
their views and thoughts should help form the web website's business goals. This
approach is smoothed out by site mapping, making it easier for designers and
builders to produce higher-quality web pages all around.

Validate Hierarchy Sequence

Always test your facts after computer entry.

When it involves getting into facts at the PC, don't forget everybody makes
typographical mistakes. This occurs in particular whilst human beings are tired,
bored, distracted, or in a hurry.

You need to consider whether or not to test your facts as soon as it's been entered.
The handiest query is how exceptional to test it. We strongly advise double facts
access. The facts access operators need to input the facts separately, preferably in
special orders. Suppose finances no longer stretch to using facts. In that case,
access operators, a much less 'excessive-tech (and much less green) technique is
for one individual to examine the facts from a printout, at the same time as some
other individual tests it towards the authentic facts sheets.

Many facts control programs now encompass fact verification workouts that test for
'out of variety' values. For instance, the handiest frame temperatures among ninety
and one hundred and five ranges can be frequent, or the bundle may also place up a
blunder message in case you input a letter whilst more than a few are predicted. If
you're using the sort of facts verification program, do look at how it works. Try
consisting of a few random 'stupid' values, and don't forget that this system will
discover mistakes that you might have sooner or later noticed anyway. Such
workouts honestly no longer dispense with the want for fact-checking using one of the
strategies cited above.

However cautiously you make sure that what's to your facts sheets have long passed
directly to the PC, you'll nevertheless have a few mistakes that originate from whilst
the points had been recorded. Inspecting authentic 'difficult' facts series statistics is a
slighting manner of resolving a few anomalies. Field notes are a critical resource for
monitoring those down. Conversely, now no longer expect all uncommon
observations to be mistakes - all facts incorporate a few unique words.

Institute Facts Test Anywhere Feasible

● Errors are an awful lot more handled through a lively preventative habit
than a passive healing one. Do now no longer put off facts verification to
the evaluation/ebook level.
● Ensure you're acquainted with the whole system of facts series. This
makes it an awful lot less difficult to calm down reasserts of mistakes and
to stop troubles.
● Wherever feasible, institute a chain of tests at numerous ranges of facts
series system. If area assistants are collecting facts, be part of them inside
the area at common periods and check out facts cautiously as it's far
recorded.
● Avoid 'recoding' and transcribing facts. These are not unusual places
supply of mistakes and an invitation to hide errors.
● Always offer a mechanism to use to report troubles and comments that the
ones collecting your facts - and ensure it's far used! Such notes now no
longer handiest assist you in perceiving doubtful observations; they will
permit you to save them - indeed, whilst correcting facts, some scribbled
notes in a margin may be well worth their weight in gold.
● Watch out for the 'Friday afternoon, Monday morning impact', whilst human
beings might not be running to their complete capability. Identify personnel
with continually top or terrible overall performance and deal with them
accordingly. Never tolerate facts fabrication.
3. Hierarchy and Labelling

Module 3. Hierarchy and Labelling

Welcome to Module 3, where we delve into the critical aspects of hierarchy and
labelling in information architecture. This module is designed to refine your
understanding of how to structure content hierarchically and the importance of
labelling to ensure content is accessible and easy to navigate for all users.

Topics:

● Hierarchy Validation: Learn how to assess and validate the hierarchy of

your content, ensuring that it aligns with user expectations and business
goals.
● Accessibility and Labelling: Understand the best practices for creating
labels that are not only clear and descriptive but also accessible to all
users, including those with disabilities.
● Advanced Sitemap Refinement: Take a deeper dive into the nuances of
sitemap development, focusing on optimising the structure for both user
experience and business objectives.

Learning Activities:

● Sitemap Peer Review and Hierarchy Validation: Engage in a

collaborative review of sitemaps, providing and receiving feedback to
refine the content hierarchy.
● Accessibility Audit for Content Labelling: Conduct an audit to ensure
your content labelling is compliant with accessibility standards, making
your site usable for everyone.
● Advanced Sitemap Architecting Session: Challenge yourself in a more
sophisticated sitemap construction exercise, where complex sites require
intricate architecture planning.

Subject Learning Outcomes

The material in this module relates to the following subject learning outcomes:
 ​ SLO 2: Construct and manage website information architecture for optimal
content organisation.

Student Expectations

During this module, you are expected to spend time working through the prescribed
material prior to attending class. This will enable a more valuable discussion to take
place in online tutorials or conferences, where you will be able to discuss concepts,
present ideas and explore information collaboratively in greater depth.

Accordingly, it is suggested that you allow:

4 hours for facilitated study. This includes guided facilitated study, watching or
attending course lectures (live or pre-recorded), responding to facilitator feedback.

8 hours for personal study. This includes reading through course material,
undertaking learning activities and exploring additional related resources.

Overview
An HTML document needs to be constructed in a very specific way. It needs to have
the structure defined according to the current standards. In this section, you will learn
how to create a very basic HTML document according to the specifications of the
HTML 5 standard (currently the latest), which was ratified and published by the Word
Wide Web Consortium (W3C) in October 2014.

The following sections will take you through the various parts of a standard
document and explain their functions in the document.
Doctype

Doctype is used to inform the browser viewing the document, which standard the
document adheres to. In our case, we are using the HTML 5 standard, so our
doctype will look like the following
<!doctype html>

This is always the first line of a HTML file.

HTML Tag

The tag <html> is used to markup the beginning and the end of the html document.
The html tag opens on the line after <!doctype> tag and closes at the very last line of
the document.
<!doctype>
<html>
....all other html tags
</html>

Head

The head tag follows the opening of the html tag. The head section of an html
document contains information about the document, including title, metadata, style
and scripts used in the document. Tags that usually reside in the head section of an
html document are:

Tag Name Description

<title> TITLE This is used by the browser to display the title of

the document. In modern tabbed browsers, this
is often the title of the tab.
 <link> LINK This is used to link to an external resource, such
as a stylesheet and icons. A link is usually used
with two attributes, href and rel. Example:
<link href="icon.png" rel="icon">

The above code, defines the file "icon.png" as

the icon to be used for the page. The icon is
usually displayed next to the page title in the
browser tab, as illustrated below, where the
Google logo is the icon.

<script> SCRIPT This is used to load an external script into the

document, usually a javascript file. It is always
written with an src attribute. Example:
<script
src="myjavascript.js"></script>

<meta> META This is used to define metadata for the page,

usually used for keywords and for:
● mobile devices with touchscreens
● the size of the viewport
● initial zoom level
● whether the content of the page can
be zoomed (pinch to zoom gesture).
<meta> tags usually have two attributes, name
and content, where a name is referred to as the
key and content is the value. Example:
<meta name="author" content="jane
smith">

An example of a head section including all of the above tags:

<head>
 <title>My first HTML document</title>
<meta name="keywords" content="html,learning,test">
<meta name="description" content="my first html document">
<meta name="author" content="jane smith">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<link rel="icon" href="icon.png">
<link rel="stylesheet" href="style.css">
</head>

Important

All the tags in the <head> section of a HTML document are not visible in the
document. The head section is used for metadata and other functions that are not
visible in the browser. Make sure you do not place any element that is meant to be
visible inside the <head> section (between <head> and </head> ).

Some browsers may render visible elements placed inside the <head> section, but
according to the html standard, it is structurally inaccurate. Ensuring your HTML
code is standards compliant should be a priority to ensure that your pages will be
able to be rendered accurately by all browsers.

Body

The <body> section of the HTML document is the part that is rendered by the
browser. All elements that can be seen in a web page, need to be placed within the
<body> tag (between <body> and </body> ). In this section, tags that control the
structure of an HTML document, its content and styles are placed to create the
appearance of the page.

Putting it all Together

Here, we will be putting all those elements together to create a basic HTML page
structure. The page structure is created using all the above tags, such as
<!doctype>, <html>, <head> and <body>.
<!doctype html>
<html>
<head>
<title>My first HTML document</title>
 </head>
<body>
</body>
</html>

Getting Started
So far, you have learned about HTML and some of its elements. Let us put this
knowledge into practice, by creating a simple HTML document, containing some
basic HTML elements, while learning some more. To complete this section, you will
need to use a code editor. You can choose any code editor, however, make sure you
look at the Tools for this course section for recommendations.

Using your code editor you will need to create a new file, which you should save as
index.html. In this file, we need to create the basic structure of an HTML document
that defines a standard web page.
<!doctype html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<!-- Let the fun begin -->
</body>
</html>

In the code above, we have the basic ingredients of a correctly formatted HTML
document. The spacing of the code from the left (using the Tab key) is done to make
the code easier to read. The spaces have no effect on the way the browser will
render the page.

HTML Comments
Between the body tags there is an element that is greyed out, with text Let the fun
begin. This text is called a comment. The beginning of a comment, starts with <!--
symbols, to indicate that it is the beginning of a comment and the comment ends
with -->. A comment can contain multiple lines of text. It is not rendered by the
browser and is only meant for humans reading the code.
Using comments, you can write yourself little (or big) notes about what the different
parts of your code is doing. It is a good idea to use comments to make your code
more understandable for yourself and other people who may have to read your code
in the future.

Example of a comment:
<!-- This is a comment in an HTML document -->
<!-- A comment can span multiple
lines as long as it is opened and closed with the correct
symbols -->

Headings
Headings are used to title sections of your document. Much like a book, a document
can have multiple sections and subsections. Using headings you can structure your
document to indicate the main heading, subheadings and other subsections under
each subheading.

There are six different headings in HTML, starting with the <h1> tag, as the main
heading, to the <h6> tag, which is a heading level six. Let us put this into code
<!doctype html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<!-- Let the fun begin -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

Add these heading tags to your html document and then save the file. Open the file
in your browser and you should see that <h1> is the largest of the headings and
<h6> is the smallest, as shown in the image below:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5

Heading 6

Paragraphs
Go back to your code editor and edit the code by adding the elements shown in
below:
<!doctype html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<!-- Let the fun begin -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
Paragraphs are used to define a paragraph of text. Usually, long pieces of text, such
as an article, are organised into paragraphs with space in between. It helps improve
readability and makes it easier for the reader to visually scan the page for particular
words or sentences. Without paragraphs, long pieces of text can appear as a wall of
text which makes it harder to read.
After adding the paragraphs, don't forget to check open your HTML page using a
browser, to see how your paragraphs are rendered. With the headings we added
previously, it should look like the image below:

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5

Heading 6

This is a paragraph

This is another paragraph

Note how the two paragraphs are on separate lines of text with some spacing in
between the two lines. The spacing is caused by the default (built-in) space above
and below each paragraph, called margin.

Lists
In a document, often elements need to be grouped together to represent a collection.
Lists are used to represent a collection of things. There are several list types in
HTML, the most commonly used are ordered and unordered list.

Unordered List

Unordered list is a collection where the order of the elements is not important. An
unordered list places a bullet (a dot) in front of each list item. A good example of an
unordered list is a collection of links in a navigation system. The order of the items is
not important and the user could choose any of the navigation items to navigate to,
without following a particular order.

An unordered list is created using the <ul> tag. Each list item, is enclosed in a pair of
<li> tags. So a list of fruits will look like the following:
<ul>
 <li>Apples</li>
<li>Oranges</li>
<li>Pineapples</li>
</ul>

Add an unordered list to your document code so it looks like the example below.
<html>
<head>
<title>My first web page</title>
</head>
<body>
<!-- Let the fun begin -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Pineapples</li>
</ul>
</body>
</html>

After you have added the code for the unordered list, open your file with the browser
and it should look like the image below

Ordered List

An ordered list implies that there is a significance in the order of the items in the list.
Usually, the ordered list places a number (1,2,3,4 and so forth) or a letter in front
each list item (a, b, c, d and so forth). A good example of an ordered list, is an
itinerary, where the order of the destinations is important.

In code, the ordered list uses the <ol> tag. So an ordered list might look like the code
below.
<ol>
<li>Sydney</li>
<li>Singapore</li>
<li>Frankfurt</li>
</ol>

Add an ordered list to your code so it looks like the example below. The new code is
shown in green.
<html>
<head>
<title>My first web page</title>
</head>
<body>
<!-- Let the fun begin --> <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Pineapples</li>
</ul>
<ol>
<li>Sydney</li>
<li>Singapore</li>
<li>Frankfurt</li>
</ol>
</body>
</html>
Tables
Tables are used to present tabular data in an HTML document. Even though it was
previously often used as a layout device for web pages in the late 1990s and early
2000s, there are much better ways to create layout nowadays, especially with the
increasing use of small screens, like smartphones and tablets, which require a more
flexible layout, known as responsive design.

The problem with tables and small screens is that a table layout cannot change or
respond to the change in screen size. Therefore, content of the tables such as text
and images could become constricted by the resizing of the cells and end up being
unreadable or unusable, or if the widths are fixed, it could result in the user having to
scroll both horizontally and vertically to read your content (this is considered bad for
usability). It is best to avoid using tables to create page layouts.

Where you do need to use tables is when the content is actually a representation of
a tabular data, such as a spreadsheet or something similar. A table is created using
a <table> tag, a <tr> tag to create rows, <td> tag to create cells or columns, a <th>
tag to create heading columns and <thead> and <tbody> tags to separate the table
headers from the content.

Tag Code Tag Name Function

<table> table To markup the beginning and the end of the table
<thead> table heading To markup the table header
<tbody> table body To markup the content section of the table
<tr> table row To markup the table rows
<td> table data To markup the table cells
<th> column heading To markup the cells which are at the top of each
column
So to put them all together, let's look at a simple table of employees and their
locations
<table>
<thead>
<tr>
<th>Id</th>
</th>Name</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>James Smith</td>
<td>Sydney</td>
</tr>
<tr>
<td>2</td>
<td>Nerrida Jones</td>
<td>Melbourne</td>
</tr>
<tr>
<td>3</td>
<td>Andrea Gomez</td>
<td>Brisbane</td>
</tr>
</tbody>
</table>

Below is a preview of the code above.

Merging Cells

A table can also have merged cells. To merge cells, a column or a cell, needs to
have an attribute colspan, with the value being the number of the table columns that
are being merged. For example, with the same code above, if we were to add an
extra row in the table header to give the table a title "Employees", we could add it
with an extra row with a column in it that spans 3 columns:
<table>
<thead>
<!--this row only contains one column-->
<tr>
 <!--This column spans 3 columns in the table-->
<th colspan="3">Employees</th>
</tr>
<tr>
<th>Id</th>
</th>Name</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>James Smith</td>
<td>Sydney</td>
</tr>
<tr>
<td>2</td>
<td>Nerrida Jones</td>
<td>Melbourne</td>
</tr>
<tr>
<td>3</td>
<td>Andrea Gomez</td>
<td>Brisbane</td>
</tr>
</tbody>
</table>

Preview of the code above.

Hyperlinks
Links are used to create hyperlinks to another page or another section of the same
page. It is written using the <a> tag and has an attribute href. In code, it looks like
this:
<a href="http://google.com.au">Link to Google</a>
<a href="contact.html">Contact Us</a>

In the example above, hyperlinks are created using the <a> tag with the href attribute
containing the destination or the resource that the hyperlink points to. The first
example has an absolute url as the value and the second one has a relative url as
the value.
Absolute URL
Absolute URLs contains the complete URL of a resource, including domain name or
ip address. An absolute URL contains the absolute path to the resource and can be
used anywhere with the same result.

Example

● http://mywebsite.com/images/fish.jpg
● Links to an external site.
●
● http://anotherwebsite.com/fish.jpg
● Links to an external site.
●
● http://82.11.12.13/images/fish.jpg
● Links to an external site.
●

Relative URL
A relative URL is the URL of a resource in relation to another resource within the
same domain. For example, if a website has a domain example.com, and the
website address is http://www.example.com, the pages of the website can link to
each other using a relative url.

In the example below, the index.html page and the about.html page are part of the
same website (our example.com domain). In absolute url, the pages will have an
address http://www.example.com/index.html and
http://www.example.com/about.html. The image (fish.jpg) will have the address
http://www.example.com/images/fish.jpg (fish.jpg file is inside images folder).

Since all the files belong to the same domain (example.com) files can be linked to
other resources on the same domain using relative URLs.

For example, in the home page (index.html) page, a link can be created to the about
page (about.html) using:
<a href="about.html"> about page </a>

instead of:
<a href="http://www.example.com/about.html"> about page </a>

It is common for a website to use relative links to all its own resources, such as other
pages in the website and images, to ensure that when the website domain is
changed, for example from http://www.example.com

Links to an external site.

to http://www.anotherexample.com

Links to an external site.

, the links to the website's resources will remain intact.

Using the example above, the relative link from the home page (index.html) to the
about page (about.html) will remain intact and valid, as the browser will automatically
convert the hyperlink to the about page:
<a href="about.html"> about page </a>

to:
<a href="http://www.anotherexample.com"> about page </a>

Relative URL is the most convenient way to keep a website's link to its own
resources (within the same domain) intact, regardless of the domain of the website.
Otherwise when the domain changes, all links within the website need to be
modified.

Images
 Image elements are loaded using the <img> tag, accompanied by an src attribute,
which has as its value the path to the image file. Unlike other tags, <img> tags do not
need to be closed, as they are called self-closing tags.

Local Images

Local images are usually loaded using relative URL. For example:
<img src="images/fish.jpg">

Remote Images

Remote images are images that are hosted elsewhere on the internet. Usually, it's
loaded using an absolute URL. For example:
<img
src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Gullf
iskur.jpg">

Sometimes loading remote images on your web page can be considered copyright
infringement. Make sure to check if files are protected by copyright before using
them on your own web pages.

Further Resources
The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Reading: What is Hierarchy?

Click to Access Resource

Links to an external site.

Reference: What is hierarchy? - Definition from WhatIs.com (2012). What is

hierarchy? - Definition from WhatIs.com. [online] WhatIs.com. Available at:
https://whatis.techtarget.com/definition/hierarchy.

Video: What is a Hierarchy?

Click to Access Resource

Reference: www.youtube.com. (n.d.). What Is A Hierarchy? [online] Available at:
https://www.youtube.com/watch?v=Ld2hDX28Lpk [Accessed 6 Dec. 2023].

Reading: What is hierarchical sequence?

Click to Access Resources

Links to an external site.

Reference: Toppr Ask. (n.d.). Which one of the following is the hierarchical sequence
? [online] Available at:
https://www.toppr.com/ask/question/which-one-of-the-following-is-the-hierarchical-se
quence/.

Video: What is hierarchical sequence?

Click to Access Resource

Reference: https://www.youtube.com/watch?v=XkYN34z84UQ

Reading: The Four Principles of Accessibility

Click to Access Resource

Links to an external site.

Reference: www.willowtreeapps.com. (n.d.). The Four Principles of Accessibility.

[online] Available at:
https://www.willowtreeapps.com/craft/the-four-principles-of-accessibility.

Video: The 4 principles of accessibility

Click to Access Resource

Reference: Government Digital Service (2017). POUR: The 4 principles of

accessibility. YouTube. Available at: https://www.youtube.com/watch?v=hs8sykCaf3E
[Accessed 25 Feb. 2021].

Topic 1. Validate Hierarchy Sequence

 Key takeaways from this topic...

1. Employ double-entry methods or verification tools to catch and rectify

mistakes made during data entry, ensuring accuracy and minimising errors.
2. Establish checks at various data collection stages, avoid recoding/transcribing
data, and encourage reporting mechanisms to swiftly identify and rectify
issues.
3. Include descriptive accessibility labels guiding respondents through the
question, aiding screen readers for the visually impaired, and ensuring
inclusive interaction.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Verify Entered Data

When it involves getting into facts at the PC, don't forget everybody makes
typographical mistakes. This occurs in particular whilst human beings are tired,
bored, distracted, or in a hurry.

You need to consider whether or not to test your facts as soon as it's been entered.
The handiest query is how exceptional to test it. We strongly advise double facts
access. The facts access operators need to input the facts separately, preferably in
special orders. Suppose finances no longer stretch to using facts. In that case,
access operators, a much less 'excessive-tech (and much less green) technique is
for one individual to examine the facts from a printout, at the same time as some
other individual tests it towards the authentic facts sheets.

Many facts control programs now encompass fact verification workouts that test for
'out of variety' values. For instance, the handiest frame temperatures among ninety
and one hundred and five ranges can be frequent, or the bundle may also place up a
blunder message in case you input a letter whilst more than a few are predicted. If
you're using the sort of facts verification programme, do look at how it works. Try
consisting of a few random 'stupid' values, and don't forget that this system will
discover mistakes that you might have sooner or later noticed anyway. Such
workouts honestly no longer dispense with the want for fact-checking using one of the
strategies cited above.

However cautiously you make sure that what's to your facts sheets have long passed
directly to the PC, you'll nevertheless have a few mistakes that originate from whilst
the points had been recorded. Inspecting authentic 'difficult' facts series statistics is a
slighting manner of resolving a few anomalies. Field notes are a critical resource for
monitoring those down. Conversely, now no longer expect all uncommon
observations to be mistakes - all facts incorporate a few unique words.

Implement Data Testing Everywhere Possible

● Errors are an awful lot more handled through a lively preventative habit
than a passive healing one. Do now no longer put off facts verification to
the evaluation/ebook level.
● Ensure you're acquainted with the whole system of facts series. This
makes it an awful lot less difficult to calm down reasserts of mistakes and
to stop troubles.
● Wherever feasible, institute a chain of tests at numerous ranges of facts
series system. If area assistants are collecting facts, be part of them inside
the area at common periods and check out facts cautiously as it's far
recorded.
● Avoid 'recoding' and transcribing facts. These are not unusual places
supply of mistakes and an invitation to hide errors.
● Always offer a mechanism to use to report troubles and comments that the
ones collecting your facts - and ensure it's far used! Such notes now no
longer handiest assist you in perceiving doubtful observations; they will
permit you to save them - indeed, whilst correcting facts, some scribbled
notes in a margin may be well worth their weight in gold.
● Watch out for the 'Friday afternoon, Monday morning impact', whilst human
beings might not be running to their complete capability. Identify personnel
with continually top or terrible overall performance and deal with them
accordingly. Never tolerate facts fabrication.

Ensure Client Accessibility of Labels

What is an Accessibility Label?

An accessibility label is a textual content you want to go into for positive solution
additives. The cause of the label is to be instructive and make it clear what the
respondent desires to do to reply to the query.
In Citizen Space, the solution additives that require you to fill in an accessibility label
are:

● text box (single and multi-line)

● electronic mail address
● postcode
● number
● date
● dropdown listing
● single checkbox
● File upload answer component (notice: this aspect is disabled on a few
websites at the request of the organisation)

To Disguise or to no Longer to Cover

A label enables everybody higher recognise its cause. In a few instances, the cause
can be clean enough from the context visually — if the delivered label practise isn't
always vital in imparting statistics similarly, it can be hidden.

Why do I Want to Feature Labels?

Screen readers utilised by human beings with visibility troubles will select the
statistics blanketed inside an accessibility label area whether or not it's far hidden or
no longer. Hence, the quit-person knows what statistics they may imagine to be
included in a solution aspect.

How do I Upload Accessibility Labels?

1. Create a query write its textual content and click on Save Changes:
2. Select your solution aspect from the dropdown:
3. Enter your label textual content. This is the informative textual content that
offers the respondent steering on the way to a solution to the query.
You may also pick out to tick the "Hide this label" choice in case you do not
need your label to be revealed to the general public. It will nevertheless be
examined the aid of using accessible studying gadgets.
Click Add Component.
4. Previewing your query and revising the textual content is vital.

What are Examples of Beneficial Labels I Can Upload?

Examples of beneficial labels will depend upon the context of the questions being
requested. Here are a few examples:
 ● 'Please offer comments' similarly
● 'Please provide us your views'
● 'Please choose your solution from the dropdown listing'

If you're responding on behalf of an organisation, please imply which one.'

NB: In the case of a document add solution aspect, your label needs to say, 'Here
you're capable of adding a document to help your reaction'.

Your Organisation May Additionally Want to Specify the Sort of Document You
Assume.
Please notice that the textual content you input within the 'label' area may also be
mechanically copied via the 'record area heading'. This minimises the wide variety of
fields on the web page an administrator needs to fill in. If required, the 'record area
heading' can of path be edited.

Provide textual content labels for all interactive factors are required to have
descriptive textual content labels, consisting of any hyperlinks or shape controls.
Visually, customers need to be capable of perceiving labels that describe the feature
of every shape manipulated. The assistive generation desires a good way to
announce the features of every shape manipulated nicely and efficiently. Hence, all
textual content labels need to be programmatically related to the shape manipulation
usage of the usual programming. Links need to continually have hyperlink textual
content that absolutely and in particular describes its vacation spot or feature.

Benefits
These measures permit customers of assistive generation to fast and without
difficulty perceive the feature of every interactive detail.

Topic 2. Accessibility and Labelling

Key takeaways from this topic...

1. Clear and accessible labelling enhances user experience, including for those
with disabilities.
2. Web accessibility involves legal and ethical considerations.
3. Assistive technologies rely on proper labelling for effective web navigation.
 Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Understanding Accessibility and Labelling in Web Design

Accessibility in Web Design:

Accessibility in web design is about creating websites that can be used by all people,
regardless of their abilities or disabilities. This concept is crucial because it ensures
inclusivity and equal access to information and functionality. Accessibility involves
designing web content that can be navigated and understood by people with diverse
ranges of hearing, movement, sight, and cognitive ability.

Why Effective Labelling Matters:

Effective labelling on a website is a key component of accessibility. Labels provide

context and clarity for all users, particularly for those using assistive technologies like
screen readers. Well-labelled elements (like buttons, links, and form fields) enable
users to navigate a site, understand its content, and interact with it effectively.

Incorporating Accessible Labels:

Incorporating accessible labels involves using clear, descriptive language that makes
sense when read out of context. For instance, a screen reader user might navigate
directly to form fields on a page, so each field must be labelled in a way that makes
its purpose clear without needing additional visual cues.

Best Practices for Creating Accessible and Effective Labels

Using ARIA (Accessible Rich Internet Applications) Labels:

ARIA labels and roles can be used to enhance the accessibility of web content,
particularly for dynamic content and advanced user interface controls developed with
Ajax, HTML, JavaScript, and related technologies. They provide a way to make web
content and web applications more accessible to people with disabilities.

Designing for Screen Readers:

When designing for screen readers, it's essential to ensure that labels are
programmatically associated with their corresponding form controls. This association
allows screen readers to convey the purpose of each element to the user. Techniques
include using the ‘label’ tag in HTML and ensuring that the ‘for’ attribute in the label
tag matches the ‘id’ attribute of the input field.

Testing for Accessibility:

Regular testing is crucial to maintain the accessibility of a website. This can be done
through automated tools that flag accessibility issues and manual testing, including
using the site with a screen reader or navigating using keyboard-only controls. Real
user testing, especially involving people with disabilities, provides invaluable insights.

Overcoming Challenges in Accessibility and Labelling

Addressing Common Accessibility Errors:

Common accessibility errors include missing alt text for images, insufficient colour
contrast, lack of keyboard navigation, and missing form input labels. Addressing
these issues typically involves straightforward modifications in the code and a better
understanding of the needs of users with disabilities.

Keeping Up with Accessibility Standards:

Web accessibility standards, such as the Web Content Accessibility Guidelines

(WCAG), are constantly evolving. Staying informed about these changes is crucial for
web designers and developers. Regular training and staying connected with
accessibility-focused communities can help in keeping up with best practices.

Implementing Inclusive Design Principles:

Inclusive design goes beyond technical accessibility to ensure that a website's

content and functionality are usable and meaningful to all users. It involves
considering the full range of human diversity and creating experiences that cater to
different abilities, languages, cultures, and other forms of human difference.

Topic 3. Advanced Sitemap Refinement

Key takeaways from this topic...

 1. Advanced sitemap optimisation techniques benefit both users and search
engines.
2. Sitemap development is an iterative process that evolves with content
changes.
3. Sitemap adjustments should be evaluated for their impact on user behavior
and site metrics.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Utilising Process Maps for Strategic Analysis

The Strategic Value of Process Maps:

Process maps are not merely operational tools; they are strategic assets that provide
a visual narrative of how a company delivers value. They allow leaders to identify
bottlenecks, redundancies, and opportunities for innovation. In strategic analysis,
process maps act as blueprints that highlight how various elements of the
organisation work together, revealing the alignment—or misalignment—between
operations and strategic objectives.

Complexity and Interconnectivity in Process Maps:

Advanced process mapping deals with the complexity and interconnectivity inherent
in modern business processes. It takes into account not just the sequential steps in a
process but also the dependencies, decision points, and parallel activities that define
the real-world flow of work. By understanding these dynamics, organisations can
better forecast the impact of strategic decisions on operations and customer
experience.

Analysing Process Efficiency and Effectiveness:

Efficiency and effectiveness are the dual pillars of process performance. A
comprehensive process map can be analysed to ensure that processes are not only
done quickly but are also achieving the desired outcomes. This involves reviewing
each step for value addition, compliance with quality standards, and contribution to
the end goal. Techniques such as Six Sigma and Lean management principles are
often employed to optimize processes for maximum strategic benefit.

Developing Process Improvement Strategies

Identifying Improvement Opportunities:

The granular visibility provided by process maps enables businesses to pinpoint

exact areas for improvement. Identifying these opportunities often requires
cross-functional collaboration, where insights from various departments are
integrated to understand the full picture. The process map then serves as a common
language, allowing diverse teams to contribute to the continuous improvement
culture.

Incorporating Technology in Process Enhancement:

Modern process enhancement is inextricably linked with technology. Process maps

should therefore be evaluated with an eye for digital transformation opportunities.
Automation tools, AI, and data analytics can be incorporated into the process to
improve speed, reduce errors, and enhance scalability. By layering technology onto a
process map, businesses can visualise the future state of digitised operations.

Strategies for Stakeholder Engagement and Buy-in:

Securing stakeholder engagement and buy-in is critical for any process improvement
initiative. This involves not just presenting the improved process map but also
articulating the rationale behind changes, the expected benefits, and the metrics for
success. Workshops, presentations, and pilot projects can be useful strategies to
demonstrate the potential impact and address any concerns proactively.

Process Map Integration and Optimisation

Integrating Process Maps into Organisational Systems:

Process maps reach their full potential when fully integrated into the organisation's
systems and culture. This means embedding the processes into training programs,
performance metrics, and decision-making frameworks. It's about moving from
process maps as static documents to living systems that actively guide operations.
Optimising Process Maps for Continuous Improvement:

Optimisation is not a one-time effort but a continuous cycle of review and refinement.
Process maps should be regularly updated to reflect changes in the business
environment, technology, and consumer demand. This requires establishing protocols
for routine assessments and updates, ensuring that the process maps evolve in
lockstep with the business.

Measuring Success and Adjusting Accordingly:

The true test of a process map's value is in the measurable outcomes it helps
achieve. Key performance indicators (KPIs) should be established to track the
efficiency, effectiveness, and adaptability of processes. When metrics indicate a
divergence from expected results, the process maps should be re-examined and
adjusted as necessary to ensure they remain tools for strategic success.
Module 4. Navigation and Prototyping
In Week 4, we progress to the creation and refinement of navigational strategies with
a focus on Navigation and Prototyping. Here, you will apply your knowledge from the
initial modules to develop intuitive navigation systems that facilitate seamless user
journeys within digital platforms.

Topics:

● Navigation System Development: Discover the principles behind

creating coherent and user-friendly navigation systems that are the
backbone of any effective website.
● Navigation Accessibility and Search Options: Explore the critical
elements that make navigation accessible to all users, including those with
disabilities, and learn how search can be integrated effectively.
● Prototyping Information Architecture: Begin the process of bringing
your site maps and navigation plans to life through interactive prototypes
that test your architectural decisions.

Learning Activities:

● Navigation System Prototyping Lab: Get hands-on experience by

constructing a prototype of your navigation system, allowing you to test
and iterate on your designs.
● Navigational Inclusivity and Efficiency Assessment: Evaluate your
navigation systems for inclusivity and efficiency, ensuring they meet a wide
array of user needs.
● Interactive IA Prototyping Drill: Challenge your understanding of
information architecture in an interactive session that simulates real-world
prototyping and problem-solving scenarios.

Subject Learning Outcomes

The material in this module relates to the following subject learning outcomes:

​ SLO 3: Prototype navigational solutions focusing on user experience and

accessibility.

Student Expectations
During this module, you are expected to spend time working through the prescribed
material prior to attending class. This will enable a more valuable discussion to take
place in online tutorials or conferences, where you will be able to discuss concepts,
present ideas and explore information collaboratively in greater depth.

Accordingly, it is suggested that you allow:

4 hours for facilitated study. This includes guided facilitated study, watching or
attending course lectures (live or pre-recorded), responding to facilitator feedback.

8 hours for personal study. This includes reading through course material,
undertaking learning activities and exploring additional related resources.

In CSS, selectors are used to apply a style to a particular element or a group of

elements. Selectors are a way to connect styles with HTML elements.
p { background-color: red; }

In the example above, the p selector is called a tag selector. The style of the p
selector will apply to all HTML elements created with a <p> tag.

Types of Selectors
The following are some common types of selectors.

Type or Tag Selectors

Tag selectors are written with the name of the tag, without the angle brackets. The
tag selector will apply to all elements constructed using the tag. In the example
below, all tables contained in the page will have darkblue background colour and
white text.
table {
background-color: darkblue;
color: white;
}

Class Selectors

Class selectors will apply styles to all elements that have the same class name as
the style. Class selectors are written preceded by a full stop ( . ), followed by the
name of the class. In the example below, a class is being applied to two elements
with a class attribute and the same class name. The result will be that both elements
will have a gray colour in their text content.
.light-text {
color: gray;
}
<h1 class="light-text">Heading</h1>
<p class="light-text">Paragraph</p>

id Selectors

Id selectors are used to select an element with the same id name. It is written using
the id name preceded by a hash ( # ) symbol.
#main-heading{
text-decoration: underline;
}
<h1 id="main-heading">Title of the page</h1>

The result will be the element having an underline.

See the live code below.

Click the HTML tab for the HTML code, the CSS tab for the style code and then
check the final outcome by clicking the Result tab.

Other Selectors

Descendant Selectors
Descendant selectors are written using a selector followed by a sub selector or sub
selectors, each separated by space. The selector will select an element, then select
all instances of the sub selector inside the element.

Look at the following code to see how descendant selectors work.

HTML
<div class="box">
<h2>Article Title</h2>
<p>This is article text</p>
<div class="highlight">
<p>text with highlight<p/>
</div>
</div>

CSS
.box p{
color: red;
}

Example code for descendant selectors:

Click the HTML tab for the HTML code, the CSS tab for the style code and then
check the final outcome by clicking the Result tab.

A selector .box p will start by finding the element with the class box, then will use the
p sub-selector to find all instances of the p sub-selector. This also includes the p
element inside the highlight class. The p element inside the class box is called the
child of the box class. The p element inside the highlight class is a grandchild of the
box class. Both p elements are descendants of the box class.

Child Selectors

Child selectors are used for selecting the children of the element. It starts with a
DOM element such as the box class. It will then use the sub-selector to find an
immediate child of the box class. Let us reuse the example code from above.

HTML
<div class="box">
<h2>Article Title</h2>
<p>This is article text</p>
<div class="highlight">
<p>text with highlight<p/>
<div/>
</div>

CSS
.box > p{
color: red;
}

Example code https://codepen.io/johannesmu/pen/zdrWwr

Links to an external site.

The selector used in the CSS will only apply the style to the p element in the class
box, but not the p element inside the highlight class.

Attribute Selectors

Attribute selectors are used to select elements that have particular attributes and/or
values.

HTML
<label for="fullname">Full Name </label>
<input type="text" id="fullname">
<label for="email">Email<label>
<input type="email" id="emailaddress">

CSS
input[type="text"] {
background-color: lightyellow;
}
input[type="email"] {
background-color: lightblue;
}

Example code https://codepen.io/johannesmu/pen/JyGLWb

Links to an external site.

Pseudo Class Selector

Pseudo-classes represent a state of an element in the DOM. For example, it could

be a link that is being hovered over by a mouse or another element that is being
clicked. Pseudo-element selector is written using a colon (:) after the element
selector.
elector:pseudo-class {
property:value;
}

Below are several different pseudo-classes that are commonly used. For a
comprehensive list, you can visit the Mozilla Developer Network
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Links to an external site.

Pseudo
Usage
Class

This pseudo-class exists when the user places the mouse over the
:hover element. This pseudo-class does not exist on touchscreen devices,
such as smartphones or touchscreen computers.

This pseudo-class exists when the user clicks on an element (when

:active the mouse is down) or when an element is tapped (on touchscreen
devices).

:visited This exists when a link has been clicked by the user (link visited).

This exists when an element is in focus. This is commonly used with

:focus
form elements that are currently being interacted with by the user.

:first-c
When an element is the first child of its parent.
hild

:last-ch
When an element is the last child of its parent.
ild

Example code:
<div class="box1">Hover your mouse</div>
<div class="box2">
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Last</p>
</div>
.box1{
height:30px;
background-color:red;
color:white;
}
.box1:hover{
background-color:green;
}
p:first-child{
color:blue;
}
p:last-child{
color:hotpink;
}

There are several ways to apply CSS rules in an HTML

document. In the following sections, you will learn how CSS
and HTML are connected.

Inline CSS
CSS rules are said to be inline when the rules are directly applied inside an HTML
tag as an attribute. This way of applying CSS gives the rules the highest priority over
the other methods. However, to edit or update styles, one has to update it on every
single tag. For example:
<p style="color:red;">This text is red</p>
<p style="color:green;">This text is green</p>

If the styles were to change for example, red text is changed to orange and green
text is changed to blue, one has to edit both tags to reflect the changes. This could
make editing an HTML page more erroneous.

Advantages

● Styles applied this way, have the highest priority over the other methods.

Disadvantages

● Changing styles requires the editing of every single HTML tag that has a
style.
● Styles are not cached by the browser.
● Makes the overall size of the document larger.
Internal or Local Style
Internal styles are applied on a per page basis. Each page has a <style> tag in the
<head> section of the document, containing style rules for the page. Using internal
styles could make it a little less complicated to edit styles, since the styles (CSS
rules) are separated from the HTML structure in the body.

In code it might look something like the following:

<!doctype html>
<html>

<head>
<title>My web page</title>
<style>
p {
color: red;
}

#main-heading{
text-decoration: underline;
}
</style>
</head>
<body>

<h1 class="main-heading">I am the main heading</h1>

<p>Hi I am a paragraph</p>

</body>
</html>

Advantages

● Separation of style (presentation) and structure (HTML)

Disadvantages

● When there are a lot of pages in a website, when styles need to be

changed, each page will have to be edited individually.
External Style
External CSS is when the styles are stored in a separate file. The style can be
loaded in an HTML page by using the <link> tag.

The <link> tag needs to have a couple of attributes, namely the rel (short for
relationship) and the href attribute (short for hyperlink reference). In the case of the
stylesheet, the rel attribute needs to have the value "stylesheet" and the href
attribute needs the path to the stylesheet (relative to the HTML document).

If the HTML file and the stylesheet file (called style.css) are in the same directory, the
code would be written:
<link rel="stylesheet" href="style.css">

Two types of example code can be seen below:

index.html
<!doctype html>
<html>
<head>
<title>Using External Style</title>
<!--here is where you add the link to the external style.css
file-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello I am a heading</h1>
</body>
</html>

style.css
body{
font-family:arial,helvetica,sans-serif;
}
h1{
color:green;
}

Advantages

● With an external stylesheet, it is possible to store the style for many pages
in the one place, which makes maintenance of the website easier. It is
 possible to update the style for many pages at once by editing a single
stylesheet file.

Disadvantages

● The styles in an external stylesheet could be overridden by styles written

as inline or local styles.

Order of Priority
In the browser, there is a certain order of priority given to styles applied to HTML
elements, in the case of there being a conflict. The order, from the highest to the
lowest are as follows:

Style Priority
Comment Manageability
Declaration Level

Style applied on each html

Inline Style 1 (high) element, eg via style Low
attribute

Style applied on an html

Local Style 2 (mid) document via the <style> Low
tag

Style applied via a <link>

External tag with the href attribute
3 (low) High
Style containing the URL of an
external file.

Recommendation

It is generally recommended to use a single external stylesheet across the multiple

HTML pages of a website to keep styles manageable (ie. all styles are in a single file
which can be easily edited). This is also a good practice to follow as it makes it
easier to apply consistent style across the entire website.

Applying styles via local or inline methods are generally only used either in a single
page website or an email newsletter.
 Further Resources
The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Reading: The Essential Guide to Website Navigation

Click to Access Resource

Links to an external site.

Reference: Fitzgerald, A. (2020). The Top-to-Bottom Guide to Website Navigation.

[online] HubSpot. Available at:
https://blog.hubspot.com/website/main-website-navigation-ht.

Video: 10 Best Practices for Website Navigation

Click to Access Resource

Reference: GoDaddy (2021). 10 Best Practices for Website Navigation | The

Journey. YouTube. Available at: https://www.youtube.com/watch?v=y3eFY-DNbH4
[Accessed 30 Sep. 2022].

Reading: 10 Best Web Search Tricks Everyone Should Know

Click to Access Resources

Links to an external site.

Reference: Facebook, Twitter and LinkedIn (n.d.). Top 10 Tips and Tricks for Better
Web Searches. [online] Lifewire. Available at:
https://www.lifewire.com/web-search-tricks-to-know-4046148.

Video: 20 Useful Websites Everyone Should Know

Click to Access Resource

Reference: www.youtube.com. (n.d.). 20 Useful Websites Everyone Should Know!
[online] Available at: https://www.youtube.com/watch?v=WJVMpvtt9Hk [Accessed 6
Dec. 2023].

Reading: Prototyping Model in Software Engineering.

Click to Access Resource

Links to an external site.

Reference: Martin, M. (2019). Prototyping Model in Software Engineering:

Methodology, Process, Approach. [online] Guru99.com. Available at:
https://www.guru99.com/software-engineering-prototyping-model.html.

Video: Prototyping Model in Software Engineering

Click to Access Resource

Reference: Government Digital Service (2017). POUR: The 4 principles of

accessibility. YouTube. Available at: https://www.youtube.com/watch?v=hs8sykCaf3E
[Accessed 25 Feb. 2021].

Topic 1. Navigation System Development

Key takeaways from this topic...

1. Involve clients and your team to arrange the website in a way that serves
users best. Techniques like card sorting help create a layout focused on users'
needs rather than just the company's structure.
2. Make good use of the footer as an additional way for users to navigate your
website. Ensure it complements the main navigation by keeping similar
categories and essential links.
3. Simplify and optimise navigation for mobile users. Make sure links are easy to
tap, considering the different needs and habits of those browsing on mobile
devices.
 Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Introduction to Website Navigation

Whether you're promoting software programs or sausages, your internet site desires
a manner for site visitors to navigate. Every internet site obtainable has a few shapes
of navigation. In particular, there are regularly plenty of questions on how to
technique this essential issue of advertising web website online layout for SaaS
corporations.

We'll check a few key instructions found out from designing internet site navigation

1. Define Your Statistics Structure

It's clean to leap into chucking hyperlinks in a line on the pinnacle of your pages
earlier than you've taken into consideration the shape of your internet site. Starting at
an excessive stage and considering the general statistics structure of your internet
site is crucial to offer your navigation a hierarchy and make sure you don't neglect
essential hyperlinks that can be overlooked.
In large groups, it's clear to leap to the belief that the internet site needs to observe
how the business enterprise is structured. However, that is a dangerously
non-client-centric technique to statistics structure. Instead, attempt a method known
as "Card sorting" with as many stakeholders as you may – together with your group,
your pals, your circle of relatives, and maximum importantly, your clients.

Key Varieties of Card Sorting:

● open card sorting is whilst contributors are given playing cards containing
the content material they want to organise and are requested to classify
them independently. Participants aren't given any statistics beforehand,
and they may be chargeable for naming the companies. This is the most
suitable approach if you're drawing close to a brand new internet site
without a present shape in the area.
● closed card sorting is much like open card sorting; besides, contributors
are given the types to place playing cards and the content material to sort.
Participants aren't chargeable for naming the playing cards, so this
 approach is reachable when you have a present internet site with mounted
classes and centre ideas.

2. Don't Reinvent the Wheel

There are many nicely trodden paths for internet site navigation. Knowing whilst to
interrupt the guidelines is crucial, however, for the maximum component, it makes
feel to paste to the fundamentals and keep away from rethinking the guidelines to be
special.

It now and again may be tempting for layout navigation to be noticed, and be featured
for an elaborate internet layout award, however greater regularly than now no longer
the exceptional internet site navigation works – it doesn't shout for interest or have
brilliant loopy animations.

3. Keep Navigation on the Pinnacle

You can manifestly area your navigation anywhere – pinnacle, bottom, left, or proper
on the web page. Almost every time, it makes feel to maintain your navigation on the
pinnacle of your pages. The pinnacle of pages is the primary issue your site visitors
see, it's in which their cursor is already located if they've been getting into an internet
cope with or seek period with their browser, and as with many hints in this article, it's
additionally with the aid of using some distance the maximum, not unusual place and
nicely-understood area for navigation to be located.

4. Put Your Brand Within the Pinnacle Left

In the same vein as setting your navigation on the pinnacle of pages to your web
website online, it's not an unusual place to place your brand within the pinnacle left of
your web website online. Not the handiest need to your brand take site visitors
returned to the homepage (greater on that during a moment). However, the pinnacle
left is generally the primary part of the web page a traveller will see first. Over
centuries of studying written phrases, we've continually been educated to examine
left to proper and pinnacle to bottom, so it makes feel for the brand to be the primary
issue you notice on each web page of an internet site.

5. Make Your Brand Clickable

Placing your homepage hyperlink within the pinnacle left is logical due to the fact
computing device browsers area their returned button simply above this vicinity, so
assuming your site visitors are already used to hitting their returned button (we will
guess they may be), then setting your homepage hyperlink within the pinnacle left is
a no brainer. Aside from the returned button, Mac customers may also be used to
hitting the "Close window" button within the pinnacle left, so there's a herbal feel of
"to get out of what I'm doing, I circulate my cursor to the pinnacle left of the display
screen".

6. Order Navigation Objects are Primarily Based on Significance

This may sound apparent. However, it's regularly overlooked – make sure you
prioritise your maximum crucial and useful pages as excessively as feasible for your
navigation. Defining your "maximum crucial" pages is continually a challenge.
However, a great area to begin is to examine the maximum famous pages already on
your web website and recognise the motives why human beings are going to these.

7. Carefully Pick Out Whilst Applying Dropdown Menus

Drop-down (or popover) menus are a great manner to permit site visitors to find a
massive wide variety of pages in a small quantity area.

Dropdown menus help condense several links under one main heading, accessible
by hovering or clicking on that heading.

Dropdown menus are increasingly prevalent on websites due to their simplicity in

implementation using basic HTML and CSS. Modern browsers support dropdown
menus without the need for older technologies like Flash or extensive JavaScript.

A Few Matters to Observe With Dropdown Menus:

● It's regularly difficult to peer whether or not site visitors want to click on or
hover to convey up a menu. Our recommendation right here might be to
reveal the menu on hover and permit the traveller to click on it without
taking them to some other web page.
● Dropdown menus can turn out to be a bit unpredictable on contact
gadgets, in particular gadgets with small screens.
● Use dropdown menus sparingly and with clean, unambiguous headings on
the computing device to keep away from reproducing the not-unusual
place problems of burger menus – greater on that subsequent.

8. Don't Disguise in the Back of a Burger Menu

The burger menu is an attempted and examined approach to condense navigation
into simply one small, clean-to-area detail.

Burger menus are suitable for plenty of websites to condense a massive navigation
device on cellular gadgets. However, it isn't easy to recognise the justification for
using such a method on computing device websites.
The disadvantage of the usage of burger menus is that they disguise all of the
hyperlinks in the back as simply one icon. They fail to offer the traveller a touch or
knowledge of the worldwide shape of the web website online till the button is clicked.
On a computing device, you've got all of the areas you want to, as a minimum,
display a handful of hyperlinks without having to cover all of the litter away.

9. Pick a Number One Worldwide Call-to-Action Button

Most SaaS websites have a number one Call-to-Action – regularly, it's to begin a trial
or e-ebook a demo with the income group. Ensuring this CTA is continual within a
similar role on all pages of the internet site, with the identical reproduction and the
identical look will surely make sure site visitors understand in which to head if or once
they determine the product is proper for them to need to make their first dedication.
The Internet site navigation is manifestly no longer the handiest area for a
Call-to-Action. However, the navigation can act as a reliable, regular area to head
anywhere you're at the internet site. A famous area for the CTA is the pinnacle proper
– you notice this on many SaaS websites, but additionally on famous e-commerce
websites. Everyone is aware that you hit the blue "purchase now" button on the
pinnacle proper of a web page on Apple.com to trade your difficult-earned bucks for a
brand-new brilliant piece of aluminium and glass.

10. Integrate Seek Into Your Internet Site Navigation

The search may be an exceptional characteristic for internet site site visitors.
However, it can also be a supply of knowledge for you as an internet site proprietor.
Visitors can continually head to a seek engine like Google or Bing to locate
something, however now and again, they're already to your web website online and
attempting to find a selected product or web page like a help doc. Use web website
online to assist your site visitors in assisting themselves; however, make sure it's
clean to get admission to and to be had continually at some point of your web
website online to keep away from confusion. Tracing fundamental metrics to your
web website online also can provide you with a ton of statistics approximately a way
to enhance your very own navigation and naming conventions.

Ways to Improve Your Website Navigation

Here are a few ways an online seek will let you enhance your internet site navigation:

● Find pinnacle seek phrases that site visitors are trying, however, that
haven't any pages or merchandise – those are probably exquisite
merchandise to stock or pages to create.
 ● Find the terms site visitors are typing to present content material – are they
special terminology? Perhaps you may rename your present pages or
merchandise?
● Are site visitors looking in place of the usage of your navigation? This can
be because seeking is quicker for them, or the navigation is puzzling or
damaged.

Consider your internet site footer together with your pinnacle stage navigation.
You don't want to area each hyperlink to each web page to your internet site to your
navigation bar on the pinnacle of the web page. In reality, if you attempt to link each
available hyperlink to your internet site navigation, you'll possibly emerge as chaos.

Instead, consider how you may use your footer and navigation together with every
different to permit site visitors to get to where they want while not having to return to a
Google seek.

A few reachable hints:

● Try to maintain excessive stage classes or regions of the web website

online regularly among your pinnacle navigation and the footer anywhere
feasible.
● Some websites use their worldwide footer as a type of sitemap. Don't
chuck all of your hyperlinks into the footer without categorisation and
hierarchy.
● For web websites with massive pages, attempt customising your footer for
every centre segment of your web website online whilst preserving
worldwide navigation.
● Use a breadcrumb path to your footer to assist site visitors in recognising
which they may be within the hierarchy of your web website online. ·

It by no means hurts to copy your number one CTA to your footer.

Two-tier Internet Site Navigation

Sites with massive numbers of pages will regularly undertake a secondary navigation
bar to provide a chain of hyperlinks to different pages at the web website online.

For instance, this is a superb tactic for differentiating content material-associated

hyperlinks from different product and business enterprise-associated hyperlinks. The
disadvantage of this technique is it can be overwhelming and doesn't translate to
cellular nicely.
Visually differentiating those degrees of navigation is crucial, so make sure you as a
minimum use special sun sunglasses and font sizes to emphasise the number one
and secondary navigation.

Responsive Navigation Design: Mobile & Desktop

Designing internet site navigation is simply 1/2 of the story – considering how site
visitors navigate your web website online on cellular is greater crucial than ever.
While a few websites pick out to direct site visitors to download and set up a local app
in place of the usage of their internet site, there's continually going to be a full-size
wide variety of individuals who will pick out to view your web website online on their
cellular browser.

Here are some hints for making sure your navigation works nicely on cellular:

● Ensure your "faucet targets" (the quantity of area for a hyperlink) are
massive sufficient that a person with huge thumbs can without difficulty hit
every hyperlink to your navigation. Don't make it too fiddly!
● Think approximately what cellular customers can be searching out –
they're now no longer always the identical necessities as computing device
customers.
● The interest span of cellular customers, and the context with which they're
the usage of your internet site, can be very special to that of a computing
device person – make sure your navigation is as easy as feasible (however
now no longer simpler!), and speedy to apply.
● You don't always want to reveal all of the hyperlinks you display on a
computing device on cellular – be selected primarily based totally on the
desires of your cellular customers.
● Burger menus are loads greater applicable on cellular than on computing
devices, however, greater factors visit websites that control to keep away
from them.

Topic 2. Navigation Accessibility and Search

Options

Key takeaways from this topic...

 1. Accessible navigation is vital to accommodate a diverse range of users.
2. Effective search functionality is key to enhancing overall navigation and user
experience.
3. Navigation tools like breadcrumbs and menus must meet accessibility
standards to be effective for all users.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Essential Web Search Tricks

See How Clean it is to Look at the Internet Correctly

Ever been annoyed with your Internet seek outcomes? We've all been there!
Fortunately, there are numerous hints you may use to look higher and get greater
functional outcomes.

Searching the Internet correctly does not virtually take an awful lot of attempts. There
are mild modifications you may make for your searches to explain to the seek engine
what it's far you are searching out. Plus, a maximum of them have superior
alternatives you may use to make a good higher ultra-centred seek.

Here are some effective Internet search strategies that work across all search
engines, along with essential skills for a successful search on the Internet. You can
utilise a mobile search engine to browse the Internet from your smartphone or tablet,
and some of these tips also work effectively with them.

1. Be Specific
The greater applicable phrases you operate to your seek, the greater a hit your
outcomes may be. For instance, getting into espresso whilst attempting to find
espresso stores in Michigan might offer some distance to too many useless
outcomes. Typing a chat whilst you're in want of a drawing of a black cat is simply
unhelpful. However, enhancing it barely to encompass the sort of espresso or cat you
need and the particular vicinity or colour you are searching out is generally sufficient
to offer the outcomes you are after. It's quality to apply herbal language to your
Internet seek such as you see in this screenshot. An amazing seek engine will filter
the "not unusual place" phrases that are not vital and select crucial phrases like
places and different defining phrases.

2. Use Quotes to Search for a Phrase

Another crucial tip for purchasing higher outcomes is to use citation marks to
institution phrases collectively. When you try this, you tell the hunt engine that the
whole lot within the rates needs to be grouped much like the outcomes. When you
seek the Internet with rates, you appreciably reduce the wide variety of outcomes that
the hunt engine suggests to you, creating a hyper-targeted set of outcomes.

3. Use an Appropriate Search Engine

Not all engines like Google are created similarly. Many special sorts serve a
completely particular cause, so if an "everyday" one like Google, Bing, or Yahoo, isn't
sufficient to locate what you are searching out, don't forget an exceptional technique.
The audio seeks engine is one instance in which the internet site or app is
constructed for locating audio files, whether or not they be sound clips, songs,
effects, etc. A seek engine that makes a speciality of handiest movies or snapshots,
for instance, is unhelpful in case you're searching out song files. People engines like
Google are to be had, too, in addition to photograph engines like Google, invisible
internet engines like Google, task engines like Google, torrent engines like Google,
and others. Niche engines like Google are probably helpful, too.

4. Use Google to Search Within a Specific Site

If you have ever attempted using an internet site's integrated seek device. However,
you have not been a hit; you are not by yourself. One manner to get higher outcomes
whilst looking for any unique web website online is to apply Google. The identical
approach works for proscribing the outcomes to a unique pinnacle-stage domain:

5. Basic Math Will Narrow Down Your Search Results

Another internet seeks deceptively easy trick is using addition and subtraction to
make you seek outcomes greater applicably. This is known as Boolean seek and is
one of the guiding concepts in the back of the manner top engines like Google body
seek outcomes. Say you are looking for Tom Ford. However, you get plenty of
outcomes for Ford Motors.

6. Access Web Pages That Are Offline

A website that is going down or an online web page that was taken offline completely
is not always inaccessible. Sometimes, you may get admission to a cached model of
the web page or browse for an archived reproduction of it. Not all internet pages are
cached. However, Google gives an easy manner to test. You can try this if the web
website online might not open for any purpose, like if it turned into taken down or it
might not load efficiently because of visitors overload. However, the caching choice
on Google does not make paintings for virtually antique internet pages. The
opportunity manner of looking via a domain. This is not staying at the net is located
on the Way back Machine.

7. Use the Search Engine's Advanced Tools

Most engines like Google have superior alternatives you may appoint to get higher
outcomes. We've long passed over some of the above. However, it is crucial to
understand that there are generally some distances greater than can be had. An
easy instance may be visible with Yahoo Search. When you look for snapshots on
that web website online, you may select a selected colour, length, and sort of
photographs to search for. A video seek is comparable however helps you to select a
duration and determination to search for.

8. Run a Wildcard Search

Most engines like Google permit you to use a wildcard individual to throw a broader
seek net. Doing this allows you to speak to the hunt engine to update the wildcard
individual with something it desires.
A wildcard is probably the asterisk (*), hashtag (#), or query mark (?), however, the
asterisk is the maximum not unusual place.

9. Search a Web Page for a Specific Word

Effective online searches are more than just how-to guides for utilising a search
engine. Even if you get to a website via an internet search, you could end up finding
something that isn't what you're looking for. Fortunately, every online browser allows
you to perform a keyword search on that page. This is similar to the website online
search you saw before; instead of merely locating pages that include your keywords,
this technique shows you exactly where the keyword occurs on the page. To test this,
press Ctrl+F (Windows) or Command+F (Mac) on your keyboard to launch a window
that asks you what you're looking for. Most mobile browsers also have a find option,
which is usually tucked away in the menu. For example, if you're on a web page
about someone you're studying and you need to check if the page contains anything
about the year 2005 quickly, you may use the shortcut to jump into 2005. This will
highlight each example on the page and allow you to jump to each line quickly.

Designing Search Functionality

The Role of Search in User Navigation:

For many users, search functionality is the go-to method for navigation. It allows
users to bypass traditional navigation paths and directly find the content they are
seeking. A well-designed search system can significantly enhance the usability of a
website, particularly for complex sites with a vast amount of content.

Optimising Search for Efficiency and Relevance:

Effective search systems should deliver results quickly and accurately. This requires
careful tuning of the search algorithm, prioritising relevance, and employing intelligent
search features like auto-complete, error tolerance, and filters to refine results.

Testing and Refining Search Capabilities:

Search functionality should be regularly tested and refined based on user feedback
and search analytics. Understanding common search queries and patterns can
provide insights into user needs and highlight potential areas for improving content
discoverability.

Integrating Navigation and Search Options

Balancing Traditional Navigation with Search:

A seamless user experience often involves a balance between traditional navigation

elements and search functionality. Users should be able to navigate through menus
and links, or quickly find specific content using the search feature, depending on their
preference.

Customising Search Experiences:

Search experiences can be customised to align with user behaviour and the specific
content of a site. This might involve personalising search results based on user
history, location, or other relevant factors.

Accessibility Considerations for Search:

Search interfaces must be accessible, with features like keyboard navigation and
screen reader support. Additionally, search results should be presented in a clear and
orderly manner, with options for users to navigate through results without relying
solely on visual cues.
By mastering navigation accessibility and search options, you will be equipped to
design digital environments that are inclusive and efficient, ensuring that all users can
find the information they need without barriers.

Topic 3. Prototyping Information Architecture

Key takeaways from this topic...

1. Prototyping means creating visual models like wireframes to show how

information is arranged and how users move around. These models help see
content relationships and user paths.
2. Different prototypes serve specific needs. Horizontal ones communicate
broadly, while vertical ones go deeper into specific features, affecting how
much information is shared.
3. Information architecture aims to organise content well, using methods to guide
users to needed content easily and reduce effort in navigating.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Understanding Information Architecture Prototyping

Prototyping information architecture (IA) is a process where the planned structure of

information on a website or application is modelled, often in a visual format, before
full-scale development. It's a way to test and refine the organisation of content and
the navigation system within a controlled environment. This stage is critical for
identifying usability issues and ensuring the logical flow of information.

Key Aspects of IA Prototyping:

IA prototyping involves creating wireframes, flowcharts, and interactive models that
represent the structure and navigation of the site. These prototypes are used to
visualise the hierarchy of information, the relationships between different pieces of
content, and the pathways users will take to access information.

Prototyping Tools and Techniques:

There is a range of tools available for IA prototyping, from simple sketching to

sophisticated software like Axure, Sketch, or Balsamiq. The choice of tool often
depends on the complexity of the site and the level of detail required in the prototype.

Validating and Testing Information Architecture Prototypes

Conducting Usability Testing on Prototypes:

Usability testing of IA prototypes is crucial for gathering actionable insights into how
real users interact with the structure. This can be done through user testing sessions
where participants are asked to complete tasks based on the prototype, while their
interactions and feedback are monitored.

Iterative Design Based on User Feedback:

The prototyping phase is inherently iterative. Feedback from usability testing should
be used to refine the prototype, addressing any issues that users encounter. This
iterative process continues until the architecture is both intuitive and efficient from the
user's perspective.

Accessibility Considerations in Prototyping:

Accessibility should be integrated into the IA from the prototyping stage. Ensuring
that the architecture is navigable and understandable for users with disabilities is not
only a legal requirement but also a moral imperative. This includes considering
screen reader compatibility, keyboard navigation, and alternative text for images.

The Purpose and Process of Prototyping Information Architecture

The suitable sort of Prototype ends in a green layout system. So, it's crucial to pick
out the proper kind for every situation.
The Breadth and Intensity

● Horizontal Prototype: is no longer too deep for every feature; however,

cowl. Good for excessive stage verbal exchange
● Vertical Prototype: pass deep in the element of a feature. Good for
speaking in small scope and assessment

Fidelity

1. Low-constancy:

● abstract stage, approximately idea however now no longer in particular info

● should use in group or use with clear explanations
● good for the start of the layout system

2. Medium-constancy:

● between low constancy and excessive-constancy

● popular

3. High-constancy:

● includes info on seems, feels, and behaviour

● good for the very last level of the layout system
● good whilst want an assessment or verbal exchange of look of the layout

Architecture Information Design

Information structure is how the clothier organises the content material to assist
customers in performing their dreams. There are a few exciting ideas for a statistics
agency.

● Leading customers to the favoured statistics with statistics scent

● Minimising a person's attempt
● Good to navigate person the usage of an intellectual map
● Consider value tradeoff among scanning value for picks of hyperlinks and
web page traversal time

For a person-focused layout, it's crucial to recognise the person of the product. How
do they conceptually institution statistics collectively? The clothier can determine the
usage of strategies like card sorting. After the clothier analyses and company
statistics into classes and hierarchy, it's also crucial to check the structure with the
customers. There are some topologies that the clothier can observe in the product.
Each of them has its very own one-of-a-kind factor.

● Hierarchy: Easy to recognise and make bigger

● Linear: Good for methods; however, may be time-consuming
● Matrix: Good for a few particular sorts of statistics, 2D facts; however,
there may be additionally an offer to give different methods to get
admission to the statistics concurrently
● Full mesh: Good handiest for a small number of objects
● Arbitrary community: Suitable for the handiest particular shape of
statistics, and it's far called for different methods to assist in statistics
having access to
● Hybrid: Commonly implemented as it integrates sturdy factors of
typologies; however it desires specification of the factor of modified
typology

Some navigation topologies are higher than others in a few particular situations. The
study article "The folksonomy tag cloud: whilst is it beneficial?" delivered the gain of
the tag cloud. This typology supplied a set of tags to emphasise frequency with a
certain font length and font-weight. The studies advised that if a person had no
particular scope of statistics, tag cloud turned into virtually beneficial. That turned out
because the tag cloud displayed the institution of associated keywords to understand
instead of recall.

Similarly, the study article "An empirical observation of Internet website online
navigation structures' influences on Internet site usability" confirmed a distinction
between a person's overall performance whilst the usage of special navigation
structures.

The Studies Cited Three Structures:

● Problem-Orientated Hierarchy: set up content material like the desk of

content material, relying on shape
● Utilisation-Orientated Hierarchy: set up content material with the aid of
using how they are used within the domain
● Mixed Hierarchy: the aggregate among problem-orientated and
utilisation-orientated hierarchies. A person can use both hierarchies at a
time.

The studies defined that the utilisation-orientated and mixed hierarchy had been
higher than the problem-orientated hierarchy. That turned into due to the fact they
corresponded to a person's intellectual version.
Module 5. Testing and Client Approval
Welcome to Module 5, where the focus will be on Testing and Client Approval. This
module will see you synthesising your design and prototyping efforts into a cohesive
structure ready for rigorous testing and final client assessments. You'll be evaluating
the usability and impact of your information architecture, ensuring it aligns with client
expectations and user requirements.

Topics:

● Usability Testing Coordination: Delve into the methodologies of

coordinating usability tests to gather vital feedback on the website’s
information architecture.
● Content Formatting Across Environments: Understand how to ensure
that content is formatted effectively across different platforms and devices
for a consistent user experience.
● Architecture Adjustment and Prototype Sign-off: Learn how to refine
and adjust your website’s architecture based on testing feedback and
prepare for the final sign-off.

Learning Activities:

● Usability Testing Managerial Exercise: Take charge of a usability testing

session, from planning to execution, to understand the managerial aspects
of user testing.
● Cross-Platform Content Presentation Task: Experiment with different
content formats to achieve an optimal cross-platform presence.
● IA Refinement and Approval Pitch: Present your refined information
architecture to stakeholders, simulating the process of obtaining final
approval.

Assessment notes

Assessment 1 is due at the end of this module.

Subject Learning Outcomes

The material in this module relates to the following subject learning outcomes:

​ SLO 4: Perform usability tests and integrate client feedback for web
design approval.
Student Expectations

During this module, you are expected to spend time working through the prescribed
material prior to attending class. This will enable a more valuable discussion to take
place in online tutorials or conferences, where you will be able to discuss concepts,
present ideas and explore information collaboratively in greater depth.

Accordingly, it is suggested that you allow:

4 hours for facilitated study. This includes guided facilitated study, watching or
attending course lectures (live or pre-recorded), responding to facilitator feedback.

8 hours for personal study. This includes reading through course material,
undertaking learning activities and exploring additional related resources.

Planning
Prior to starting a website, it is a good idea to be clear about certain aspects of the
project. Building a website is akin to building a house. When building a house, it
usually starts with a plan for the whole structure, so that each part of the house can
be built to work with the other parts and that the house will function as a single
building, instead of just rooms that have been connected to one another. It is almost
unheard of that a house will be built one room after another, it is almost always built
according to a master plan.

In the planning stages for a website, we need to create the master plan for our
website. We need to know how many pages the website will have, what each page
will contain and how information will be organised throughout the website to make it
easily accessible.
Mission or Purpose

When building a website it is a very basic requirement that you know what the
purpose of the website is. Each website has a very particular purpose, which may
include:

● Publication of general information, for example, government websites

● A collection of information about a product or a group of products, for
example, a website about a game console or a movie
● A campaign around an issue, for example, a website about road safety
● A retail operation, for example, online shops
● Sharing of user generated content, for example, social media websites.

Before you start on your website project, you should decide what the topic of your
website is and how the website will function in relation to that topic. For example, if
you decide to build a website about an upcoming film, you will need to determine
how the website will function in relation to that film.

● Will the website be a general information website about the topic?

● Will the website allow fans of the film to post?
● Will there be a video of the trailer of the film shown on the website?
● Will there be information about actors of the movie?
● Will there be a mailing list that fans can sign up to?

All of these pieces of information will inform the design and structure of the resulting
website.

Information Architecture

After the topic and purpose of the website has been outlined, as a website is almost
always about information, it is a good idea to start from the information side of things.
Once the topic has been determined, you should start to outline the pieces of
information relevant to the topic, that will be published through the website.

For example, if the website were for a movie, let us imagine that the following
information will be published through the website:

● Dates the movie will be screened

● Locations where the movie will be shown
● Information about the movie storyline and the characters in the movie
● Actors who play the various characters in the movie
● Contact information so potential viewers can get more information about
the movie
● Trailer and various screenshots from scenes in the movie
These pieces of information need to be organised into sections in the website, so
that pages can be built and laid out to make the information accessible in a logical
fashion and also attractive to viewers. So for our website, we could have a structure
as follows:

● Dates and Locations section will be a listing of all dates and locations the
movie will be screened.
● Story section will list the characters in the movie and actors who play
them.
● Contact section will contain a form, through which people could request
more information
● Trailers and Gallery section will contain the movie trailer and screenshots
from the various scenes.
● Finally, the Home page will contain snippets of information from other
pages (except the contact section).

The Homepage in a website, is a special page. As it is the first page that is loaded in
a website, it is often called the index or default page. This page should act as a
"gateway" to the other pages of a website. While it could contain information that
may be of primary importance, it should also help visitors discover other sections of
the website (as well as the navigation system).

Site Structure

Every website should have a structure, which outlines how different pages connect
to one another. A structure of the website mentioned above can be illustrated in the
following diagram.

The home page is called the first level, top level or primary page, while the other
pages are often referred to as second level or secondary. If the secondary pages
lead to other pages (sub pages), then those pages are referred to as tertiary.

Page Layout
Wireframes

Before beginning to code each page, it is also a good idea to have the elements of
the page and where they are laid out on the page in a diagram. This type of diagram
is often called a wireframe, which is often done in lines, without colours. A wireframe
can be drawn by hand on paper or can be drawn using a software such as Adobe
Illustrator or any other software capable of drawing lines.

An example of a wireframe can be seen below.

Wireframes are mainly used to determine the layout of a page, it is about where
different pieces of information will be located on the page. It is generally devoid of
colours, because at this early stage, colours usually have not been finalised or
determined. Another reason not to use colours is to focus the attention of everyone
involved in the project on the layout, not the colour of page elements.

Mockups
After the wireframes have been approved and details finalised, the next stage is to
create a mockup of the pages of the website. Mockups are full colour renderings of
the pages of a website. It contains images that will be used for the pages, the logo
and the colours.

Mockups can be created using an image editor such as Adobe Photoshop or similar,
or a page layout software such as Adobe InDesign or similar. See the example
below:
Overview
The navigation component is a particularly important part of a website. It is the
primary way for the users reach the different sections of the website. A navigation
component should have the following characteristics:

● Consistent
● Accessible
● Indicative
● Structured

Let us explore these various important characteristics of a navigation component.

Consistent

It is very important for a navigation component to be very consistent. Across the

pages of a website, a navigation component should be consistent in:

● Appearance: The component should appear the same throughout the

website. Changing the appearance of the navigation component can
create confusion for the users.
● Location: The location of the navigation component should be the same
throughout the pages of a website. This will ensure that users will already
know where to find the main navigation once they have navigated away
from the home page.
● Functionality: Ensure that the navigation functions in the same way
throughout the website. Changing functionality means that the user will
have to relearn the new functionalities as they are navigating the website,
which will create confusion and possibly frustration.
● Order: The order of the navigation items should always be the same
throughout the website. When order changes, it could cause the user to
navigate to a section they were not intending to.

Accessible

A navigation component needs to be marked up in an accessible way, so it is not

overly reliant on javascript or other components. It also needs to be able to function
when the user is visually-impaired so that they use a screen reader software.

Indicative
A navigation component needs to indicate to the user where they are in the structure
of the entire website. This indicator needs to be obvious so that a user can visually
scan a navigation component and understand instantly which section they are
currently in.

Structured

A navigation component has to be properly structured so that it can be recognised as

a navigation component even without styling. One way to achieve this is to use the
<nav> tag to enclose the navigation list.

Creating Structure
A navigation component, basically consists of a list of links. The list of links in a
navigation component, generally, is informed by the Information Architecture (IA) of
the website. To determine the information architecture of a website, usually a test is
performed using several techniques, such as card-sorting to determine how
information should be grouped.

However, for smaller websites, information could typically be grouped into four or five
groups. For a restaurant, for example, the information might be grouped into pages
like the following:

1. Homepage: Contains a welcome message, images, as well as a little snippet

from each of the other pages
2. About page: Contains a little bit of information about the history of the
restaurant and a little about the owners and staff
3. Menu page: Contains information about the restaurant's menu
4. Contact page: Contains a contact form, opening hours, address and phone
number
5. News page: Contains the latest news about the restaurant, announcements
etc.

Once the information structure is established, now it is time to create the navigation
structure. Since the home page is the main page of the website (often called the
landing page), then it should always be placed either at the top in a vertical
navigation component or at the left in a horizontal navigation page. Other pages
should be placed after the home page in their order of importance.

The main principle to follow is that the navigation items most often needed by the
users of the website should be the easiest to access. This may depend on the
orientation of the navigation component (either horizontal or vertical) and also where
it is located on the page.

Designing Navigation

Horizontal Navigation

When navigation is placed on the top of the page, it is usually in a horizontal

orientation. This orientation of navigation makes it easily accessible, however, there
is a limit on the number of items that can be displayed at once. This limit is
determined by the available horizontal space across the web page and the width of
the user's screen. On desktop or laptop computers with landscape screens, this
configuration is optimal, as there is more horizontal space. On mobile devices,
however, where the screen is normally portrait-oriented, this configuration is less
than optimal.

Vertical Navigation
When the navigation component is vertically oriented, it is usually located on one
side of the page or sometimes the top part of the page on screens with portrait
orientation, such as phone screens. In this configuration, the navigation can
accommodate items along the height of the screen. The limit of this configuration is
the height of the screen. If the there are more items than the height of the screen
allows, often the navigation is allowed to overflow and the overflowed items can be
accessed via scrolling. However, it creates a less optimal solution where items that
overflow the height of the screen may not be as often discovered by the user.
Footer Navigation
Sometimes additional navigation is placed in the footer (bottom part) of the webpage.
This can be done with either a horizontal configuration or vertical, depending on the
number of items that need to be included. Footer navigation is often used to add
items that are seldom used, but need to be available.

Styling Navigation

When styling a navigation component, it is important to keep the contrast high

between the links and the background colour, to keep the links readable with a high
contrast. A lack of contrast in navigation can risk making the component less
accessible.

The navigation component should also have a feature where the current page the
user is on is indicated.

In Code

Let us look at a basic navigation component in code.

<nav role="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

It is important to have the "role" attribute in your HTML for navigation, as this will
indicate to the browser and screen reader software used by the visually impaired that
the nav element encloses a navigation component. The above HTML code can be
styled as either a horizontal or vertical navigation component.
Style for a horizontal navigation
nav ul{
margin: 0;
padding: 0;
list-style:none;
}
nav li{
display:inline-block;
}
nav a{
display: inline-block;
padding:10px;
}
Style for a vertical navigation
nav ul{
margin: 0;
padding: 0;
list-style:none;
}
nav a{
display:block;
padding:10px;
}

Key Header Elements

In a web page, the header is the top part of the page that contains information about
the page and its contents. Some of the information often included as part of the
header:

● Brand identity or logo

● Main site navigation
● Social media links
● Search form
● Other important information.
A page header for a website generally stays the same for the entire website. This is
done for certain reasons, such as:

● Consistency in look and feel. It is important to maintain a consistent look

and feel throughout the entire website, as this will ensure continuity for the
user. Inconsistencies in the appearance of a website's pages could create
confusion for the user.
● Consistent branding. Consistent branding across a website's header could
maintain the identity of the website throughout all its pages. Due to the
fluid nature of linking between resources on the web, often the user relies
on the page header to inform them whether they are still looking at pages
from the same website.
● Maintaining state. In a website that maintains a session, e.g. where there
are features such as logging in or shopping cart, the page header should
inform the user of the state of their interaction with the website, such as
whether they are still logged in or how many items they might have in their
shopping cart.

There is no hard and fast rule about what to put in the page header of a website. The
information may vary from website to website and between different aims of the
website. However, generally it is a good idea to ask a few questions such as the
following:

● Is access to this information from all pages of the website important?

● Does this piece of information contribute to one of the primary reasons the
user came to the website? For example, if the website is for a physical
store, such information might be the location of the store, its opening
hours and possibly a contact number.
● Can this information be included in the footer (the bottom part of a page)?
● Could this information be a part of a page?

Brand Identity or Logo

A page header for a website is often where the logo is displayed. The logo is often
displayed on the top left of the page, as the top left of a page is considered the
primary starting point for the eyes of a user as they are scanning the content of a
page. According to studies and research, a user scans a web page using the F
pattern. As the shape suggests, F pattern means that typically a user will read the
content starting from the top left to the top right, then the eye movement to the right
side of the page gets shorter as they travel down the page.

Even though it is standard to place the logo of a website on the top right, it is not the
case that the logo has to be displayed there. Sometimes the logo is displayed at the
top centre of the page, sometimes on the top right.
Regardless, it is important to visually establish the brand behind the website quickly
and proportionately.

Main Navigation

The main navigation of the website is often a part of the page header and it is
important that the main navigation can be accessed from all pages of a website. Due
to search engines or links from another source, sometimes the user "lands" on the
website on a page other than the homepage. Therefore, it is crucial that a facility is
available to the user to visit other pages in the website, no matter which page they
"land" on.

It is also a standard navigation pattern that clicking on the website logo will take the
user back to the homepage. So it is also important to include this pattern when
designing a page header.

Social Media Links

Often a page header includes links to social media pages belonging to the brand.
These links are often represented by icons representing the different social media
networks. Depending on the website, often social media pages are considered
secondary to the website. Many organisations run their social media pages as
feeders to lead people to the pages of their website or blog. In this case, the social
media links or icons should not be more prominent than the other contents of the
page header, such as the brand identity and the main navigation

Search Form

For websites that have a lot of content, often search is the primary way a user
discovers or finds content. This often means that a search bar or form is included
within the page header to facilitate discovery of the website's other content.

Organising Pages
The content of a page should be organised for easy reading and/or scanning. This
means that information needs to be organised in a way that increases the ability of
the user to scan and discover content. Several things should be considered:

● Visual hierarchy
● Content positioning
Visual Hierarchy

In a page design, visual hierarchy should be followed. What is visual hierarchy? It is

a way to present content according to importance. In a simplistic way, it could mean
that important pieces of information are presented with a higher contrast and larger
size compared to the less important pieces of information.

Sometimes colour is used to create a visual hierarchy with the more important
information having a more dominant saturated colours compared to the less
important information. In short, visual hierarchy is about presenting information using
visual devices such as colour, contrast, scale and other visual design elements.

Content Positioning

The positioning of content can also influence how people read it. In a web page,
usually content that is closer to the top of the page gets read first compared to the
content at the bottom of the page. This means that important information in any
given page should be positioned near the top.

The way we read from left to right also influences how content is read. Content on
the left side of a web page will be more visually significant compared to content on
the right-hand side.

Content Display

The Content Grid

It is vital to organize content in a way that is easy to read and understand. The
concept of a grid-based layout is not new, it has been in use in graphic design since
the earlier part of the 20th Century.

In web pages, it has been traditionally quite difficult to use a grid layout due to the
limitation of HTML. With the development of the stylesheet and in the latest version
of the standard known as CSS3, the grid has become the standard way to create
layouts in web pages.

In a grid layout, the page is divided into intersecting vertical and horizontal lines.
Content blocks are placed at the intersections of the lines to create "blocks" of
content that are aligned vertically and horizontally.
In a web page layout, this often translates to rows of content, containing one or more
columns that are also aligned vertically.

Often, and especially, between columns of text, there is white space. This space is
often referred to as the "gutter".

Centre Column Layout

With web pages, content is constrained in the centre of the page and there seems to
be a lot of space "wasted" on the left and right side of the centre column. This is
often done for a few reasons:

● To accommodate smaller screens

● To make the text more readable.

Often the content of a page is limited in width (not utilising the full width of the page)
to accommodate screens that are small in size. The advantage of this approach is
that provided the centre column is smaller than the screen, the user will never have
to scroll horizontally to consume the content. The disadvantage is that the width has
to be set smaller than the smallest screen, which can create very large empty space
on either side of the centre column on large screens.

Readability

While it seems logical to let text flow across the entire width of a screen, reading long
lines of text is hard work. Limiting the width of text containers can increase
readability.

Key Footer Elements

The footer of a web page, like in other documents, is the area at the bottom of the
page.

The position of the footer at the end of a page makes it ideal for some of the
following content:

● Site Navigation
● Secondary Navigation
● Metadata
● Social Media
● Contact Information
Site Navigation

Placing a navigation component in the footer could help the user navigate to other
sections of the website.

Secondary Navigation

A secondary navigation could help the user reach sections of the website that are
not part of the main site navigation. Some sections that could be a part of a
secondary navigation could include:

● Legal disclaimers
● Terms and conditions
● Copyright notices
● Sitemap
● Contact us
● Other information that is important to have on the website, but is not a part
of the main navigation

Metadata

Metadata could be:

● A link to another website, eg the website of the company that developed

the website
● A link to the admin interface of the website
● When the website was last updated

Social Media

It is common to place links to social media pages of the company or organisation in

the footer. While social media is important, sometimes they are secondary to the
website itself.

Contact Information

Since it is likely the last section of the page to be viewed by the user, sometimes it is
an ideal place to include contact information or a contact form.

Further Resources
 The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Reading: Usability Testing With Prototypes

Click to Access Resource

Links to an external site.

Reference: Naji, C. (2016). Usability Testing With Prototypes - Usability Geek. [online]
Usability Geek. Available at: https://usabilitygeek.com/usability-testing-prototypes/.

Video: Usability Testing w. 5 Users: Design Process

Click to Access Resource

Reference: Usability Testing w. 5 Users: Design Process (video 1 of 3). (2018).

YouTube. Available at: https://www.youtube.com/watch?v=RhgUirqki50.

Reading: How To Find Your Target Audience And Create The Best Content That Connects

Click to Access Resource

Links to an external site.

Reference: CoSchedule (2016). How To Find Your Target Audience & Create
Content That Connects. [online] CoSchedule Blog. Available at:
https://coschedule.com/blog/how-to-find-your-target-audience.

Video: How To Find Your Target Audience in 6 Questions

Click to Access Resource

Reference: www.youtube.com. (n.d.). 6 Questions To Ask To Find Your Target

Audience. [online] Available at: https://www.youtube.com/watch?v=t0meZUDSJv4.

Reading: How Does Architecture Impact Society?

Click to Access Resource

Links to an external site.

Reference: Vangelatos, G. (2019). How Does Architecture Impact Society? A

High-Level Look | Thought Leadership. [online] HMC Architects. Available at:
https://hmcarchitects.com/news/how-does-architecture-impact-society-a-high-level-lo
ok-2019-10-18/.

Video: How Does Architecture Affect Society

Click to Access Resource

Reference: inspirationTuts CAD (2021). How Does Architecture Affect Society.

YouTube. Available at: https://www.youtube.com/watch?v=L8cobrWTAms [Accessed
11 Dec. 2021].

Reading: The Ultimate Guide to Project Sign Off Sheets

Click to Access Resource

Reference: Benz, M. (2019). The Ultimate Guide to Project Sign Off Sheets (incl. 7
Templates) | The Project Success Blog. [online] The Project Success Blog. Available
at: https://filestage.io/blog/sign-off-sheet/.

Topic 1. Usability Testing Coordination

Key takeaways from this topic...

1. Planning, varied methods (moderated, unmoderated), and meticulous

observation drive design improvements.
2. Commencing usability tests early in the design process unveils critical issues,
enabling progressive refinements and significantly improving the user
experience.
 3. Continuously improving the design and considering user needs even after
launching, like always checking and asking users for feedback, helps the
product stay useful for a long time.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Principles of Usability Testing

Usability testing is a non-negotiable stage in the design process, providing critical

insights into user interactions with a website or application. This empirical user
research method gauges how well users can navigate and perform tasks within the
system, offering direct feedback on the functionality and intuitiveness of the design.

Planning and Preparing for Usability Tests:

Effective usability testing requires meticulous planning. Defining objectives, selecting

the right user group, crafting task scenarios, and choosing the appropriate testing
method are foundational steps. Preparation also involves setting up the testing
environment to ensure it closely resembles the context in which the product will be
used.

Moderated vs. Unmoderated Testing:

Usability testing can be moderated, with a researcher guiding the test and interacting
with participants, or unmoderated, allowing users to complete tasks independently.
Each has its merits and can yield different types of data, from in-depth insights to
broad usability trends.

Conducting Usability Testing

Recruiting Participants:
Participant recruitment is a critical phase where users who represent the target
audience are selected. The recruitment process must be unbiased and aimed at
gathering a diverse group of users to ensure the test results are representative and
actionable.

Facilitating Usability Testing Sessions:

A facilitator plays a vital role in moderated sessions, setting the tone for the test,
explaining tasks, and ensuring participants feel comfortable. They must remain
neutral, avoiding leading questions or actions that could influence the user’s natural
interaction with the system.

Observing and Documenting User Behaviour:

During usability tests, careful observation and documentation are key. Note-taking,
audio and video recordings, and tracking user movements can all provide valuable
data. It's essential to document not just what users do, but also their verbalised
thoughts and emotional responses.

Analysing and Applying Usability Test Results

Interpreting Usability Data:

Post-testing analysis involves sifting through data to identify patterns, common

issues, and areas for improvement. This can be done through affinity diagramming,
where observations are grouped into categories, and through severity ratings, which
prioritise issues based on their impact on the user experience.

Communicating Findings and Recommendations:

The results of usability tests should be communicated clearly and effectively to

stakeholders. Reports often include an executive summary, detailed findings, video
highlights, and actionable recommendations. The goal is to provide a compelling
narrative that drives home the necessity of changes and improvements.

Iterative Design and Refinement:

Usability testing is an iterative process. Findings should feed back into the design
cycle, prompting refinements and leading to subsequent rounds of testing. This
cyclical process continues until the usability goals are met, ensuring the final product
offers an optimal user experience.

Maintaining a User-Centric Approach Post-Launch:

Usability testing shouldn't end at launch. Continuous monitoring, A/B testing, and
user feedback channels keep the product aligned with user needs and expectations,
ensuring long-term success and user satisfaction.

By coordinating comprehensive usability tests, you gain invaluable insights that

shape the user experience, leading to a product that is not only functional but also a
joy to use.

Test Prototype Usability: Client and Staff Feedback

It's no mystery that one of the exceptional methods to assess how an internet site's
layout aligns with a person's enjoyment is to create a purposeful prototype. And those
days, equipment like Invasion offered an excellent manner to get static designs right
into a greater realistic and interactive medium, in which customers could start to
engage with the task because it involves lifestyles.

However, launching an internet site that can provide an exceptional person enjoy
calls for a dedication to Usability checking out from the get-pass. Ideas turn out to be
sketches. Sketches turn out to be wireframes. Wireframes turn out to be
complete-blown web page UI. At every one of those ranges, an alternate will become
exponentially greater difficult, and as a result, it's useful to begin those usability
assessments as early as feasible.

Specifically, early Usability checking outlets in you too:

● Discover foundational personal problems

● Collect a person's remarks within the shape of a story, or "personal story"
that may assist in evolving the
● Prototype via the following ranges of layout
● Break UI iterations into smaller portions as an instantaneous result of
personal remarks

The Answer: construct and take a look at prototypes early.

Frequent prototype testing provides chances to assess design, functionality, and user
experience before the project advances to development. It helps minimise
requirement uncertainties and gathers design feedback from users at an early stage.
Prototypes Need to Be Painfully Easy: the cause is to check an idea.

Developing numerous low-constancy (or excessive-constancy) prototypes will permit

your group to check theories and thoughts concerning the format and shape of the
internet site.

Topic 2. Content Formatting Across Environments

Key takeaways from this topic...

1. Adapting content to various devices is essential to ensure its functionality and

appeal across different platforms like desktops, mobiles, and tablets.
2. Testing prototypes with users before building them and planning specific tasks
help gather crucial insights, ensuring the final product is both user-friendly and
designed effectively.
3. Using different usability testing services provides valuable feedback and
insights from user interactions, aiding in creating more user-centric and
functional designs or products.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Fundamentals of Cross-Environment Content Formatting

Understanding Multi-Environment Content Presentation:

In the digital age, content must be versatile enough to provide a seamless experience
across various environments – from desktops to mobile devices to tablets.
Cross-environment content formatting is about ensuring that the content adapts and
remains functional and visually appealing across different platforms, screen sizes,
and orientations.

Challenges in Responsive Design:

Responsive design requires a deep understanding of flexible grid systems, fluid

images, and media queries. The challenge lies in creating a design that not only
resizes but also restructures content meaningfully across devices, ensuring
readability and usability without compromising on aesthetics or function.

Accessibility in Multiple Environments:

Accessibility standards must be upheld in every environment to ensure that all users,
regardless of the device or assistive technologies they use, can access content
effectively. This involves adhering to the Web Content Accessibility Guidelines
(WCAG) and considering factors like touch targets, colour contrast, and navigation
consistency.

Strategies for Effective Content Formatting

Developing a Content Strategy for Diverse Platforms:

Crafting content that is both responsive and relevant across different platforms begins
with a solid content strategy. This strategy should account for the strengths and
limitations of each platform, tailoring content accordingly while maintaining a
consistent brand voice and message.

Utilising CSS and HTML5 for Flexibility:

Modern CSS and HTML5 offer powerful tools for creating responsive content.
Flexible boxes (flexbox), CSS grid layouts, and vector graphics (SVG) are among the
technologies that enable content to adapt to various screen sizes while preserving
clarity and interactivity.

Testing Across Devices and Browsers:

Rigorous testing across a range of devices and browsers is crucial to ensure that
content formats correctly in all expected environments. Tools like BrowserStack can
simulate a variety of browsers and devices, while real device testing helps to
understand actual user experiences.
Continuous Monitoring and Optimisation:

The work doesn't stop after the initial deployment. Continuous monitoring using
analytics tools can identify how content performs across environments, revealing
areas for optimisation. Engagement metrics, bounce rates, and user feedback
provide insights into how content is consumed and where improvements can be
made.

Implementing Dynamic Serving and Adaptive Content:

Dynamic serving and adaptive content technologies can detect user context and
serve the most appropriate version of content for their device and environment. This
approach ensures that users receive an optimized experience tailored to their current
context.

Lifecycle Management in Multi-Platform Contexts:

Content lifecycle management becomes more complex in a multi-platform context.

Regular reviews and updates are necessary to ensure that content remains relevant,
accessible, and engaging across all environments. This includes revising content to
take advantage of new device capabilities and retiring content that no longer meets
user needs or business objectives.

By mastering content formatting across environments, you ensure that your digital
presence is robust, consistent, and dynamic, meeting users wherever they are with
an experience that is always on point.

How to Check the Usability of Prototypes

How regularly do you look at Usability within the early ranges of layout? If you're like
maximum designers now, no longer very regularly. Usability is refined at some point
in the layout system, and there are particular blessings to taking an iterative
technique for your Usability checking out. The greater your cognisance on collecting
usability facts and personal remarks on the prototyping level, the less difficult it'll be
to transport in the direction of a quit product that's each clean to apply and designed
to spec. After some iterations of Usability checking out your Prototype, you'll have an
examined and confirmed Prototype to transport directly to greater
excessive-constancy layout responsibilities.

Step 1: Test earlier than you create the prototype.

If you've got the sources and a pattern target market to take the assessments, you
need to attempt to run a few usability assessments earlier than constructing a
prototype. Usually, those pre-prototype assessments are conceptual and designed
with the cause of collecting facts to lay out and shape your Prototype's statistics
structure in the only manner feasible.

At this level, you need to have a clear concept of who your goal customers are and a
way to phase them primarily based totally on personal behaviour, talent set, stage of
enjoyment, and whether or not or now no longer they've previous information
approximately the enterprise. It's an amazing concept to have some special
segments to get the maximum fee from your usability assessments.

Setting up a low-constancy, paper-primarily based Prototype is reasonably easy, and

you may run diverse varieties of assessments on the usage of this approach. For
example, use card sorting to discover how customers decide upon your internet site's
statistics structure or navigation factors to be structured.

Another paper prototype takes a look at includes growing a paper mockup and asking
customers to choose the menu object they'd click on first to finish an undertaking.
And in case you'd want to take matters a piece. Similarly, you may install a whole tree
and look at that video display unit whether or not customers have been capable of
determining an appropriate path to finish the assigned undertaking (e.g., your
predominant fulfilment state of affairs). Suppose you're thinking about what number
of customers you want. In that case, you need to recruit a minimum of 15 customers
in step with personal institution to check out the Usability of low-constancy
prototypes, in keeping with an observation carried out with the aid of using the
Nielsen Norman Group. Since you aim to check the Usability of a purposeful internet
site, you must inform your take a look at-takers to assume the special virtual
interactions they might enjoy if it had been the last product. For instance, if your
mockups aren't interactive, make sure to set the level with a clean narrative and train
your topics to navigate and take a look at them correctly. The key gain of going for
walks is those pre-prototype assessments in which you'll have a stable, conceptual
basis for constructing a purposeful (and usable) prototype.

Step 2: Find good human beings for the assessments

Once you've designed and constructed a purposeful prototype (using the facts you
collected from the pre-prototype checking out level or arising with one primarily based
totally on collaborative group efforts), it's time to recruit customers to check out the
Usability of the Prototype.
There are many methods you may recruit customers to check out the Usability of
your prototypes:
 ● Hallway Testing: This is in which you recruit customers who are probably
strange with the task you're running directly to find out the greater apparent
troubles together with your Prototype. ·
● Existing Users: If this isn't the consumer's first task, then there's a risk
they have already got a tremendous person base that would already be
acquainted with the enterprise.
● Website Testing Service: For greater managed assessments, you may
use an internet site checking out the carrier to recruit customers primarily
based totally on demographics, enjoyment and enterprise information.

Step 3: Plan and create responsibilities.

To behaviour usability assessments that provide you with significant statistics
approximately how customers engage with the Prototype and what troubles they face
alongside the manner, you'll want to write down responsibilities primarily based totally
on the usability elements you want to examine.

Here are a number of the special varieties of usability assessments you may write:

● Direct Task vs. Scenario Task

A direct undertaking offers clean practice for what the person desires to do.
In contrast, a state of affairs undertaking lays out a selected use case state
of affairs without imparting any clean course on how to finish it. For
example, if you had been running on a flight reserving internet site:

○ Direct Task: Book a spherical experience from New York to

Miami for two adults and one toddler.
○ Scenario Task: You're making plans for a holiday to Miami with
your circle of relatives and also want to ee-ebook the flight.
● Closed Task vs. Open Task
A closed undertaking is written to check out a selected capability and has
one clean fulfilment standard. In contrast, an open undertaking is designed
to peer how customers engage together along with your Prototype. Closed
responsibilities are quantitative, while open responsibilities are qualitative.
In the case of a closed undertaking, if the person can whole the
undertaking and meet the fulfilment standards, you understand that the
Prototype works. If they aren't, you'll have statistics approximately in which
they were given stuck. Within the case of open responsibilities, you'll be
capable of revealing how a person interacts with your Prototype, which is
particularly beneficial for responsibilities you may go whole in more than
one method. For example, if you had been running on a web page builder
internet utility:
 ○ Closed Task: Create a blue button for the usage of the web page
builder and set its dimensions to 100px with the aid of using
50px.
○ Open Task: Recreate the given touchdown web page with the
usage of the web page builder.

Current Usability Testing Services

1. Userlytics: Userlytics lets you perform unmoderated, far-flung internet site

usability and prototype usability assessments. You start designing your person,
checking out a script, and choosing the asset you need to check. For every take a
look at, you'll acquire movies of contributors taking a look at which you may
annotate, download, or proportion. The carrier additionally helps you to examine
many Usability checking out metrics.

2. TryMyUI: TryMyUI is an internet device that lets Usability look at your internet site,
cellular internet site, wireframes, and prototypes. To begin, you need to install your
take a look at with the aid of writing a listing of responsibilities that you need the
customers to carry out. (Optionally, you may create a custom questionnaire that
you'd like the person to fill out.) Next, you may select your goal customers from
TryMyUI's database of testers or use your very own testers. You'll acquire a display
screen recording of the person's display screen and written responses for your
questionnaire.

3. Userbrain: Userbrain helps Usability take a look at something you may hyperlink
to whether or not it's an internet site (a competitor's internet site) or a prototype. You
can use their predefined responsibilities or write your very own. Once you look at it
whole, you'll acquire a quick video of the testers' session. Userbrain keeps a
far-flung group of testers who will take your usability assessments on their very own
gadgets — desktops, tablets, and smartphones.

4. UserTesting: UserTesting is an excessive-quit internet site checking out the

carrier that's aimed toward enterprises. The business enterprise lets you recruit your
target market from their panel or with the aid of connecting your very own customers
with their platform. Next, you choose the sort of Usability observation you'd want to
behave — self-guided (unmoderated) or stay verbal exchange (moderated). At the
quiet of every observation, you'll be capable of viewing customers' responses,
utilisation reporting, transcripts, and insights from the software program's Video
Insights Suite.

5. UsersThink: UsersThink is a low-value internet site checking out an answer that

you may use to check the Usability of a selected web page to your internet site. You
 select the web page you'd like to check, choose the number of customers you'd want
to take a look at and pick out questions from a predefined listing. The carrier will then
ship your web page to check takers throughout the United States. Within 24 hours,
you'll acquire written solutions to the questions you chose through electronic mail.
So, what is the number of human beings needed to recruit for Usability take a look
at? According to the identical Usability observation cited above, "Testing with five
human beings helps you to locate nearly as many usability troubles as you'd locate
the usage of much greater take a look at contributors." That is going for qualitative
assessments (with open responsibilities — we'll get to this in a minute) aimed toward
amassing insights. However, if you're considering amassing records via quantitative
assessments (with closed responsibilities), the observer recommends going with a
minimum of 20 customers.

Prototype Usability Testing Best Practices

There are a few unusual place errors designers and usefulness testers make whilst
checking out the Usability of prototypes. Prototypes — whether or not they're
low-constancy, excessive-constancy, or someplace in among — are nevertheless
prototypes, which have limitations with the aid of using the definition.

Here are some exceptional practices to get the maximum out of checking out your
prototypes:

1. Conduct moderated assessments

Since prototypes aren't exclusive merchandise (in that they both lack purposeful
width or purposeful intensity), professionals usually advise that a person moderates
the usability assessments. This indicates that a human is a gift whilst different people
look to reply to any questions they will have.

Quick Tip: Capture and add arising questions to a shared database for collective
consultation. As with most activities, experience enhances performance. Refer back
to previous questions and areas of confusion before commencing a new examination.
Adapt your new test accordingly. Moderated assessments provide an opportunity to
note user queries about the Prototype. Is the microcopy ambiguous? Can a multi-step
process be simplified? Should a single step be divided into multiple steps?

2. Don't adjust the responsibilities

When customers cannot finish given responsibilities or enjoy finishing them, usability
testers are regularly willing to make adjustments to the responsibilities to simplify
them. This defeats the cause of accomplishing Usability; take a look at the within the
first area. Instead of enhancing you take a look at, putting together a listing of
questions that will help you recognise why it turned tough for the person to finish the
undertaking.

For instance, if the person finally ends up at a web page that hasn't but been
advanced (or wasn't supposed to be part of the take a look at), you may ask them
why they notion they need to take that route or what they had been hoping to locate
there. This offers you the possibility of collecting treasured remarks at once from the
person in place of indulging in unfounded speculation.

3. Use actual content material

Prototypes are constructed within the early ranges of the task lifecycle, generally
earlier than the reproduction is finalised. A not unusual place mistake with designing
usability prototypes is to apply general textual content and stupid names for
placeholders. The hassle with that is that Lord Skunky, Master of Odors, is quite
distracting and might even bias your take a look at outcomes. The identical is going
for general, lorem ipsum textual content — it doesn't speak any context. You need to
continually lay with actual content material anywhere feasible.

A prototype provides an excellent opportunity to evaluate your messaging and tone of

voice. Frequently, your content aims to guide users in specific directions. Use this
chance to observe user reactions as they read aloud. Did your humour resonate or
cause distraction? Does your language align with your audience, or are you falling
victim to the "curse of knowledge"?

Testing the Usability of prototypes offers you a treasured perception of how you may
refine your task's layout early on.

The key to Usability checking out prototypes is to make it an iterative system. Create
a prototype, take a look at it, acquire remarks, replace your Prototype primarily based
totally at the entrance, and run it via some other spherical of Usability checking out.
At every iteration, your internet site becomes less difficult to apply. Also, you'll
correctly be minimising the probability of getting to head returned and making full-size
modifications post-improvement.

Finalising and Signing Off on the Prototype

Criteria for Prototype Sign-off:

Before a prototype can be signed off and moved into production, it must meet
predetermined criteria. These criteria typically encompass design accuracy,
functionality, usability, accessibility, and alignment with project goals and user
requirements.

Documenting Adjustments and Rationale:

Every adjustment made to the IA and prototype should be thoroughly documented,

including the rationale behind each decision. This documentation provides a clear
audit trail, aids in project continuity, and serves as a reference for future projects.

Formalising the Sign-off Process:

The sign-off process is a formal acknowledgment that the prototype has met all
requirements and is ready for development. It typically involves a final review meeting
with key stakeholders, during which the prototype is presented, feedback is
addressed, and approval is granted.

Maintaining Flexibility Post-Sign-off:

Even after the prototype is signed off, a degree of flexibility must be maintained. As
the product moves into development and eventually release, continuous user
feedback and performance data may necessitate further tweaks and refinements,
ensuring the product remains responsive to user needs and market changes.

By carefully managing the architecture adjustment process and obtaining a formal

sign-off on prototypes, you ensure that the project moves forward with a robust and
validated foundation, setting the stage for successful development and deployment.

Topic 3. Prototype Refinement Strategies and

Validation

Key takeaways from this topic...

1. Adapting architecture based on user feedback and iterative design ensures a

user-friendly and adaptable structure that aligns with evolving needs.
 2. Effective usability testing with prototypes involves moderated testing, avoiding
task modifications, and incorporating real content to refine the design and
understand user challenges.
3. Before final approval, ensure prototypes meet predefined criteria, document
all adjustments, and maintain flexibility for post-sign-off refinements based on
ongoing user feedback and data.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Strategies for Architecture Adjustment

Importance of Agile Architecture:

In the rapidly evolving digital landscape, the flexibility to adapt and refine information
architecture (IA) is critical. Architecture adjustment refers to the iterative process of
modifying the IA based on user feedback, testing outcomes, and evolving business
needs to ensure the structure remains user-centric and goal-oriented.

Incorporating User Feedback into IA:

User feedback is an invaluable asset in the IA refinement process. It provides direct

insights into how real users interact with the architecture, which elements enhance
their experience, and which create friction. By systematically integrating this
feedback, the IA can be aligned more closely with user needs and preferences.

Iterative Design and Prototyping:

Adopting an iterative design approach allows for the continuous evolution of the IA.
Prototyping, in this context, serves as a means to visualise and test each iteration,
enabling teams to explore alternative solutions quickly and cost-effectively before
finalising the architecture.

Effective Prototype Development & Review

Developing Iterative Prototypes:

Prototyping is a hands-on approach to IA development, allowing designers to build

and test the navigational and structural elements of a digital product. Prototypes
range from low-fidelity sketches to high-fidelity, interactive simulations that closely
mimic the final product.

Engaging Stakeholders in Prototype Reviews:

Stakeholder engagement during prototype reviews is essential for ensuring the IA

aligns with both user needs and business objectives. This collaborative review
process should gather input from all invested parties, including design teams, product
managers, developers, and end-users.

Utilising Prototypes for User Testing:

User testing with prototypes should simulate real-world usage as closely as possible
to gather authentic user reactions and feedback. This testing can validate
assumptions, reveal unforeseen issues, and uncover opportunities to enhance
usability and functionality.

Validate Prototype for Business Requirements

Obtaining a signal-off prototype from required employees Getting a prototype made

for your product is vital for layout and manufacturing. Before you begin manufacturing
and persuade human beings to shop for your product, you'll want to refine your layout
and gift a running version. Basic prototypes may be made with family substances.
However, there are also masses of device stores, 3-D printing firms, and different
locations that may construct a prototype in a quick quantity of time. To get your
Prototype made, gift a notion-out layout and disco a business enterprise that's proper
for you.

1. Designing Your Product

Take aside competing for merchandise. Unless you've provided yourself with
something authentic, your product goes to have competition within the marketplace.
Get the ones merchandise and disassemble them. If you're constructing a jetpack,
unscrew a competing jetpack. Look at the substances used and how you may keep
time and enhance your layout.

● Similarly, for digital merchandise along with websites or packages, dig into
the coding. Find out the methods you may enhance the product to make
yours greater a hit.
 ● Don't reproduce a person else's layout; in any other case, you'll get sued.
Incorporate what you discover in ways to refine your very own layout.

2. Make a Caricature of Your Product

Write or kind out your product's thoughts on a bit of paper. Draw what your product
will appear like, if you may. This will provide you with a difficult concept of ways the
primary Prototype will appear and permit you to capture flaws and methods to
enhance the layout earlier than you spend money on constructing a prototype.

Use the caricature to determine what capabilities are vital for your layout. Choose the
few capabilities that permit your layout to feature and restrict the quantity of
highly-priced extras, along with portraying and including voice instructions for your
robotic vacuum layout.

3. Obtain a PC-aided Layout (CAD) of your Prototype

CAD calls for specialised training so that an expert will let you with this. The PC
layout is an awful lot greater certain than your preliminary caricature. This is the
layout you'll provide to the prototype maker to get the maximum clean and certain
concept of your product. If your product isn't something you'll be capable of making
domestic to your very own, you'll want this.

Be positive to test the credentials of your clothier in addition to their value in step with
hour. Ask for examples in their paintings and, in all likelihood, credentials from an
authorised CAD college software.

4. Create a Homemade Model of Your Layout

The first instance of your Prototype can be made domestically and may be made in
miniature to keep the cash. Physical merchandise may be made with something
you've got lying around your house, along with making your leather-based purse
layout out of a few nylon apparel you're no longer the usage of. Having a pattern
layout of your product makes it less difficult to explain to prototype designers and
buyers. It could provide you with some other risks to refine your layout.

● At this factor, the layout doesn't want to be the best. This hand-crafted
layout desires to be presentable, displaying that your concept is feasible.
● Using change fabric out of your authentic layout forces you to check your
concept and don't forget why you made it the manner you did. You may
also even locate that nylon works higher than leather-based purses.
● For bodily merchandise, pick out a reasonably-priced modelling product
along with Shapelock, which, whilst dealt with warmness, may be moulded
like clay.
 ● For digital merchandise, look for third-party birthday celebration
programming libraries to keep time on coding and photograph layout. Fill in
those elements later.

5. Use Modelling Software

While creating a physical layout with the aid of using hand is a choice, way to
generation, you may use pc software program to make a virtual prototype. Various
software programs take your concept, both drawn out on paper or within the software
program itself and flip it right into a 3-D, interactive layout at much less time and
value than making it yourself or hiring assistance.

● Programs and Prototyping on Paper and InVision permit you to add

designs and make interactive fashions to imitate how clients deal with your
product.
● Try applications along with Dribbble and Freebiesbug to shop for personal
interfaces for cellular packages to keep time or cash spent on a clothier.
● Use software along with Skala Preview to reveal modifications you are
making for your layout as you figure.

Confirm Business Requirement

Business necessities define the purpose in the back of a task and what targets of the
acting agency may be fulfilled using the mission of the task. There is a purpose in the
back of each task, and the task ought to satisfy those desires to be described as a
hit.

What are they?

A project can be started to improve an existing gadget, meet a new market need,
improve a product, or change an agency's structure and rules. The motivation for this
initiative is part of the company's requirements. A task is most likely a minor
enhancement or the development of a brand-new product. The enterprise necessities
can range from a simple description of business desires to a relatively complex set of
business goals spanning multiple domain names and verticals, depending on the size
of the product. In any event, for the work to be completed, the enterprise
requirements must be identified, understood, and stated. No one wants to be a part
of a nearly completed project only to learn that the business needs were not properly
identified.

Using an example, you may learn about business requirements. Let's assume Rob is
the owner of RobRolls, a basketball manufacturing company. Rob now wants to
expand his product line by adding baseballs and footballs to the mix. This
necessitates tighter management at his manufacturing facility using an 'Inventory
control gadget.'

Let's word a few matters right here, this Business requirement with the aid of using
Scott:

1. Defines the agency's high-level goals and does not delve into the details. In a
nutshell, it's solutions 'What' the agency wants?
2. It lays forth the advantages of achieving the goal while carrying out the
requirement. It answers the question, "Why does the agency want it?"
3. It is written from the perspective of the agency, not from the perspective of any
stakeholder.

What exactly do they entail? Let's look at what business needs are and what they
include now that we know what they are. In most cases, business requirements
include:

● Whether or if the project is the consequence of a shift in government policy

or is driven via the use of converting generation or the marketplace
● The reason for the start of the Business requirements Business goals and
objectives The context of the requirements, their description (including both
functional and non-functional requirements) and, if available, the inclusion
of any relevant historical statistics/facts The effect of the requirements and
affected parties
● List of all major stakeholders' visions and capabilities for the enterprise
solution
Factors/signs to consider while defining the success of business objectives
● Any limits or limitations (e.g., agenda, scope, or budget) imposed via the
use of the business environment or gadget
● Any assumptions that need to be considered in terms of business
requirements.
● Terminologies and related rationalisation of the enterprise language, as
well as any risks identified in the implementation of the suggested
requirements
● To illustrate an 'as-is' or 'to-be gadget, use process flows, fashions, and
flowcharts.

Where are they documented?

The BRD is the report where all of the statistics mentioned above are totally and
precisely reported (Business Requirements Document). The main goal of a BRD is to
write out what the response is expected to provide without considering how it should
be implemented.
Once a BRD is created, it will serve as the foundation for the task's entire life cycle,
and all requirements must be addressed in this report. Any task requirement that
does not correspond to the enterprise goal listed in the BRD report should be deleted
or re-evaluated for task viability.

Benefits:
Well laid out and correctly described, enterprise necessities have multi-fold blessings.
They assist in peering how the enterprise necessities will contribute to the agency's
boom and lessen the probability of task failures because of ill-described necessities.
Additionally, specific elicitation of enterprise necessities improves the enterprise case,
task imaginative and prescient report, task charter, elaboration of task scope and task
control plan.

Adjust Architecture According to Client Feedback

Architects must continue to improve to maintain their professionalism. It blesses the

houses they build and transforms the economics and lifestyles of the communities
they serve. It contributes to and expands the frame of expert knowledge, boosting
architects' appeal among their colleagues. It gives a message of worldwide expertise
and consensus.

Perhaps more importantly for character architects, it encourages individual ambitions

to strive for greatness. 'It's almost critical that you're still pleased with your building
10 years later when you return for it,' says the architect. On the other hand,
disruptive technology is posing a danger to the last bastions of specialist knowledge.
As a result, in a competitive market for architectural services, architects must
demonstrate how their knowledge benefits clients.

'Architects' unrestricted questioning and problem-solving talents are valuable and

successful, but putting them into something you pay for may be difficult at times,'
says one expert. Clients are increasingly demanding proof of skill and design
effectiveness. They want confidence that the architect's work will help them achieve
their goals and isn't always useless.

'We have no idea how little we can build excellent for unless we cut waste out of the
system,' says Paul Morrell, the former Governor's chief manufacturing advisor. We
want to find out what works and then replicate it.'

Reassurance usually contains four deeply interrelated great measures:

● Cverall financial success - will the consumer's money be properly spent?

● Technical overall performance – will the structure fulfil the needs of the
customer?
 ● Overall performance of the process - will the paintings be completed
appropriately and correctly?

End-User Satisfaction — How Well the Building's Occupants Feel About It?
'We need a great loop like you have in the automotive industry.' According to Geoff
Haslam, director of Local Agenda, "They sometimes pull vehicles aside to peek in
and see where they went wrong." 'Architects need to be seeking and concentrating
on remarks,' says James Pellatt, head of initiatives at Great Portland Estates. You
have constant development in this way.' Market barriers to doing so persist, owing to
architects' belief that it is possible. However, the round table panellists, notably those
from the workplace, colleges, and retrofit industries, believe that the benefits
currently exceed the costs.

Gregor Mitchell says, "If you can demonstrate that as an architect you've significantly
increased profitability by decreasing expenses, increasing income, or squeezing
more space out of a building, you can almost define your own charge." In addition to
better outcomes on specific projects, honest overall performance review builds
relationships, improves reputations, and may be intelligently digested to improve an
architect's overall performance on all criteria. More significantly, it may demonstrate
the carrier's unique ability and efficacy to current customers and future consumers.
This provides them with a tremendous advantage.

Roundtable panellists frequently express a desire to gain information or be reminded

of the cost of what architects perform. The language with which to communicate is
worth the effort. Shared among peers should highlight the value of the profession's
specific contribution to the built environment, beautify data, and market the position
of architects and the profession. 'The company doesn't recognise the value of its
product,' Paul Morrell argues. 'We want to fix the fact that there isn't a remarks way.'
'You wouldn't take a medication if it hadn't been studied,' Alexi Marmot, head of Alexi
Marmot Associates, says absolutely. We'd want to spend more money on more
information.'

Continual development is a hot topic in all industries. Colleges, workplaces, retrofits,

and healthcare stand out among the options for architects to demonstrate their
efficacy. The innovative college's design was dubbed "worst value for money" during
the Building Schools for the Future initiative. Little proof led to the finding of higher
benefits to educational outcomes. In these times of austerity, the focus has moved to
defining the layout dividend. For architects, this necessitates long-term participation
and continuous learning. 'Architects want to know which pieces make a difference in
terms of academic outcomes. 'Inspiring places create a distinction; little details
around a door body don't,' says Lyndsay Smith, Morgan Sindall's schooling director
and nationwide frameworks.

'I don't think an architect can work effectively until they see their work completed,'
says Andrew Barraclough, Wates' institution design director. Otherwise, how can one
learn from his or her mistakes?'
Module 6. Preparation and Planning
In Week 6, we will navigate the Preparation and Planning phase, an essential step
towards transforming your information architecture into a functioning website. This
module is designed to align the project's technical elements with your strategic
vision, ensuring that the forthcoming development phase proceeds without a hitch.

Topics:

● Technical Requirements Review: Engage in a comprehensive analysis

of the technical specifications your project must meet.
● Standards and Procedures Compliance: Learn the importance of
adhering to industry standards and internal procedures for a smooth
project lifecycle.
● Client-Side Dynamics: Explore the various client-side dynamics that
affect how users will interact with your site.

Learning Activities:

● Technical Assessment Workshop: A practical workshop aimed at

reviewing and assessing the technical requirements for your project.
● Compliance Review Task: An exercise in evaluating the compliance of
your project with set standards and procedures.
● Client-Side Scripting Challenge: Put your knowledge to the test by
tackling client-side scripting scenarios that affect user interaction.

Subject Learning Outcomes

The material in this module relates to the following subject learning outcomes:

​ SLO 5: Evaluate technical requirements and apply compliant client-side

scripting.

Student Expectations

During this module, you are expected to spend time working through the prescribed
material prior to attending class. This will enable a more valuable discussion to take
place in online tutorials or conferences, where you will be able to discuss concepts,
present ideas and explore information collaboratively in greater depth.

Accordingly, it is suggested that you allow:

4 hours for facilitated study. This includes guided facilitated study, watching or
attending course lectures (live or pre-recorded), responding to facilitator feedback.

8 hours for personal study. This includes reading through course material,
undertaking learning activities and exploring additional related resources.

What is a CSS Box?

In CSS, the programmers use the term 'box model' when talking about how a page is
designed and laid out. The CSS box model is basically a 'box' that wraps around all
the other HTML elements. It is made up of elements that include the margins,
borders, padding, and page content.

The image here illustrates what this looks like.

Light blue = margin
Dark blue = border
Yellow = padding
Green = content

In light of this image, there are a couple of things to understand with relation to the
elements included.

● Margin: The space outside of the element’s edges (outside the box of the
element)
● Border: The edge of the element’s boundaries (on the edge of the box of
the element)
● Padding: The space between the element’s border and the actual content
or element (on the inside of the box of the element)

Also, the actual size of the element is the green area + the yellow + the blue area, ie
content size+padding+border. And, changing the padding or border of an element
will affect the amount of space an element will occupy within a layout, as it will
change the overall size of the element.

CSS Properties
The properties of a CSS box are listed below.

Margins

The margins to consider are:

● Margin
● Margin-top
● Margin-right
● Margin-bottom
● Margin-left

When the margin is declared with a single value, such as this:

margin:10px;

Then the margin is applied to all four sides of the element's box.

When the margin is declared with two values (separated by space), such as this:
margin:10px 40px;

The first value is applied to the vertical margin (ie top and bottom) and the second
value is applied to the horizontal margin (ie left and right).

When the margin is declared with four values (separated by space), such as:
margin:10px 20px 30px 40px;

Then the margin is applied clockwise from the top of the element:

● First value is top (10px)

● Second value is right (20px)
● Third value is bottom (30px)
● Fourth value is left (40px)

This is effectively the same as applying:

margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;

Padding

The padding to consider is:

● Padding
● Padding-top
● Padding-right
● Padding-bottom
● Padding-left

When padding is declared with a single value, such as:

padding:10px;

The padding is applied to all four sides of the element's box.

When padding is declared with two values (separated by space), such as:
padding:10px 40px;

The first value is applied to the vertical padding (ie top and bottom) and the second
value is applied to the horizontal padding (ie left and right).
When padding is declared with four values (separated by space), such as:
padding:10px 20px 30px 40px;

The padding is applied clockwise from the top of the element:

● First value is top (10px)

● Second value is right (20px)
● Third value is bottom (30px)
● Fourth value is left (40px)

It is effectively the same as applying:

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

Borders

Since the border is a visible property of an element, it needs to have a couple of

extra properties declared, such as border-width, border-style and border-colour.
border
border-style
border-width
border-color

The border of an element can be defined with the following:

border-width:5px;
border-style:solid;
border-color:blue;

These same properties can be written in shorthand (separated by spaces) like the
following:
border:5px solid blue;

The property of border, assigned three values separated by space, which are:
border-width
border-style
border-color

The order in which they are declared does not matter, so it will have the same effect
whether they are declared:
border:solid 5px blue;

or
border:blue 5px solid;

Border Properties

Property Border Style

border-s
solid or dotted or dashed or double or inset, etc
tyle

border-
a value in pixels such as 10px or other units such as em
width

a CSS colour name, such as red or blue, or a colour code in

border-c
hexadecimal such as #FF33CC, or an RGB value such as
olour
rgb(128,96,45)

Like padding and margin, it is also possible to define the border for one or more
sides of an element, using the names of the sides of the element, such as:
border-left:5px solid black;

This will apply a solid black border of 5 pixels width to the left side of the content box.

Pseudo Class Overview

A CSS pseudo-class is a keyword added to selectors that specifies a special state of
the element to be selected. For example :hover will apply a style when the user
hovers over the element specified by the selector. Pseudo-classes can be applied to
a tag, class or an id in an HTML document. It is preceded by a colon (:) symbol. For
example:
a:hover
a:visited
div:hover
.external-link:hover
#one:hover

Pseudo-classes are used to indicate to the user the state of the various HTML
elements in a document. Some examples of CSS Pseudo Classes are:
:hover
:active
:link
:visited
:focus

LVHA order

In CSS the order in which the above pseudo-classes are declared should follow the
LVHA order, which is; link, visited, hover then active.

For n extensive list of Pseudo Classes, see you can visit these two sites:

Mozilla Developer Network

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Links to an external site.

W3Schools

http://www.w3schools.com/css/css_pseudo_classes.asp

Links to an external site.

Let's have a look at the following code.

<div>
<a href="#one">Link 1</a>
<a href="#two">Link 2</a>
<a href="#three">Link 3</a>
<a href="#four">Link 4</a>
</div>

It is a group of four links, each with a different link. To illustrate the points, each link
is a word preceded by a "#" symbol, which normally is combined with the following
CSS code.
a{
display:inline-block;
}
a:link{
background-color:#333;
color:#fff;
padding:10px;
}
a:visited{
color:green;
}
a:hover{
background-color:#ccc;
color:black;
}
a:active{
background-color:yellow;
color:black;
}
● a:link will turn any link that has not been clicked into white text with a dark
grey background
● a:visited will turn any link that has been clicked into green text
● a:hover will turn any link under the mouse into black text with light grey
background
● a:active will turn any link currently interacted with (such as when clicked)
to a yellow background colour

For some code examples, take a look at the following sites.

This code in Codepen http://codepen.io/johannesm/pen/ONZrMW

Links to an external site.

Or, for :focus pseudo-element, take a look at the following code, where it is applied
to a form input. http://codepen.io/johannesm/pen/dMewqX

Links to an external site.

CSS Pseudo Elements

Pseudo class can be applied to a tag, class or an id in an HTML document. It is
preceded by a double colon (::) symbol.
p::before
.main-heading::before
#footer::first-line
 Just like pseudo-classes, pseudo-elements are added to selectors but instead of
describing a special state, they allow you to style certain parts of a document. For
example, the ::first-line pseudo-element targets only the first line of an element
specified by the selector.

Some examples are here.

::after
::before
::first-letter
::first-line

Also, you can visit this site for more detail. http://codepen.io/johannesm/pen/EKLGqj

Links to an external site.

Further Resources
The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Reading: Technical Requirements for Custom Web Site Development

Click to Access Resource

Links to an external site.

Reference: www.dev4masses.com. (n.d.). Technical requirements for custom web

site development. Development for the Masses. [online] Available at:
https://www.dev4masses.com/a_custom_web_development/.

Reading: What is Intellectual Property?

Click to Access Resource

Reference: WIPO (2016). What is Intellectual Property? [online] Wipo.int. Available

at: https://www.wipo.int/about-ip/en/.
 Reading: Client-Side vs Server-Side Scripting

Click to Access Resources

Links to an external site.

Reference: Thoms, N. (2017). Client-side vs server-side scripting. [online] Fasthosts

Blog. Available at:
https://www.fasthosts.co.uk/blog/websites/client-side-vs-server-side-scripting.

Topic 1. Technical Requirements Review

Key takeaways from this topic...

1. Understanding technical requirements is crucial for ensuring backend support

for front-end features.
2. Aligning website technicalities with web standards is vital for robustness and
future scalability.
3. Technical decisions profoundly impact future maintenance and updates of the
website.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Technical Requirements for Dynamic Web Pages

1: Understanding Technical Requirements in Projects

Defining Technical Requirements:
Technical requirements are the cornerstone of any project that involves technological
components. They outline the specifications, capabilities, and criteria that must be
met for the system or product to function effectively. These requirements provide the
technical framework that guides the development process, ensuring that the end
product aligns with user needs and business goals.

The Role of Technical Requirements in Project Success:

Technical requirements are essential for project planning, resource allocation, risk
management, and quality assurance. They help in identifying potential technical
constraints and ensure that all project stakeholders have a clear understanding of the
system's functional and non-functional expectations.

Developing a Comprehensive Technical Requirements Document:

Creating a detailed Technical Requirements Document (TRD) is a critical step in
capturing all necessary technical specifications. This document should be thorough,
clear, and structured to facilitate understanding and compliance from all project team
members.

2: Strategies for Technical Requirements Analysis

Conducting a Thorough Review of Technical Requirements:

Reviewing technical requirements involves a systematic analysis to ensure they are
complete, feasible, and verifiable. This review process may include evaluating
existing system capabilities, market standards, legal and compliance factors, and
user expectations.

Engaging with Cross-Functional Teams:

A multi-disciplinary approach, involving cross-functional teams, is key to a robust
technical review. Input from software developers, quality assurance engineers,
security experts, and end-users is crucial in identifying any gaps or conflicts in the
requirements.

Utilising Tools and Frameworks for Requirements Analysis:

There are several tools and frameworks available that aid in requirements analysis,
such as Requirements Management software, which can help in tracking, visualising,
and validating technical requirements.
3: From Review to Implementation

Prioritising Requirements Based on Impact and Feasibility:

Once reviewed, technical requirements must be prioritised based on their impact on
the system's functionality and feasibility within the project's constraints. This
prioritisation helps in managing the development focus and resource allocation.

Translating Requirements into Development Tasks:

The translation of technical requirements into actionable development tasks is a
collaborative effort. It involves breaking down each requirement into smaller,
manageable tasks and assigning them to the appropriate team members.

Ensuring Continuous Alignment with Technical Requirements:

As the project progresses, maintaining alignment with the initial technical
requirements is vital. Regular check-ins and updates ensure that the development
remains on track, and any deviations are identified and addressed promptly.

Monitoring and Adjusting Requirements Post-Implementation:

After implementation, it's essential to monitor the system's performance against the
technical requirements. This post-implementation review may lead to adjustments as
the system is refined based on real-world usage and feedback.

By adhering to a structured process for technical requirements review, you lay a solid
foundation for project development, ensuring that the final product is built to
specification, meets quality standards, and satisfies stakeholder expectations.

Technical Requirements for Dynamic Web Pages

1: Understanding Technical Requirements in Projects

Defining Technical Requirements:

Technical requirements are the cornerstone of any project that involves technological
components. They outline the specifications, capabilities, and criteria that must be
met for the system or product to function effectively. These requirements provide the
technical framework that guides the development process, ensuring that the end
product aligns with user needs and business goals.

The Role of Technical Requirements in Project Success:

Technical requirements are essential for project planning, resource allocation, risk
management, and quality assurance. They help in identifying potential technical
constraints and ensure that all project stakeholders have a clear understanding of the
system's functional and non-functional expectations.

Developing a Comprehensive Technical Requirements Document:

Creating a detailed Technical Requirements Document (TRD) is a critical step in
capturing all necessary technical specifications. This document should be thorough,
clear, and structured to facilitate understanding and compliance from all project team
members.

2: Strategies for Technical Requirements Analysis

Conducting a Thorough Review of Technical Requirements:

Reviewing technical requirements involves a systematic analysis to ensure they are
complete, feasible, and verifiable. This review process may include evaluating
existing system capabilities, market standards, legal and compliance factors, and
user expectations.

Engaging with Cross-Functional Teams:

A multi-disciplinary approach, involving cross-functional teams, is key to a robust
technical review. Input from software developers, quality assurance engineers,
security experts, and end-users is crucial in identifying any gaps or conflicts in the
requirements.

Utilising Tools and Frameworks for Requirements Analysis:

There are several tools and frameworks available that aid in requirements analysis,
such as Requirements Management software, which can help in tracking, visualising,
and validating technical requirements.

3: From Review to Implementation

Prioritising Requirements Based on Impact and Feasibility:

Once reviewed, technical requirements must be prioritised based on their impact on
the system's functionality and feasibility within the project's constraints. This
prioritisation helps in managing the development focus and resource allocation.

Translating Requirements into Development Tasks:

The translation of technical requirements into actionable development tasks is a
collaborative effort. It involves breaking down each requirement into smaller,
manageable tasks and assigning them to the appropriate team members.

Ensuring Continuous Alignment with Technical Requirements:

As the project progresses, maintaining alignment with the initial technical
requirements is vital. Regular check-ins and updates ensure that the development
remains on track, and any deviations are identified and addressed promptly.

Monitoring and Adjusting Requirements Post-Implementation:

After implementation, it's essential to monitor the system's performance against the
technical requirements. This post-implementation review may lead to adjustments as
the system is refined based on real-world usage and feedback.

By adhering to a structured process for technical requirements review, you lay a solid
foundation for project development, ensuring that the final product is built to
specification, meets quality standards, and satisfies stakeholder expectations.

Strategies for Technical Requirements Analysis

To build your interactive web pages, you must review the technical specifications.

It depends on what website you plan on creating, whether it is static HTML or CSS. If
you're building a dynamic website, you will usually need a database; you're expected
to learn a server-side scripting language and JavaScript for the client in the long term.
Dynamic Web design is an approach that proposes design and creation based on
on-screen dimension, device type and orientation that should respond to the user's
actions and the environment.

Clients now typically need a mobile website version. Some have unique business
specifications or standards for hardware or software. All these criteria should be
considered in advance before working on the concept of website design and
development.

For the following main areas, you should at least have professional criteria reviewed:

● Building the design (brand, marketing equipment, stationary, design audits)

● Ask your customer to share with you all their marketing content. This
allows you to understand how they interact with their audience and plan to
communicate with potential clients.
● Request offline magazines, brochures, newsletters, annual reports,
posters, DVDs, books etc. There is a lot of information in each of these
 sources to help you better understand your customer and his / her
business.
● If available, ask for brand guidance. If already defined brand rules restrict
your potential work, you must find out. Ask about corporate colours,
preference designs, symbols, and brand messages. Brand consistency is
crucial, and potential areas in which previous designs have not achieved
this consistency need to be established.

Website development (CMS, Native App, Mobile Support)

Ask how they want the material to be managed. We don't mean just their choice of
CMS, but how a CMS blends into their workflow. Who is in charge of adding and
maintaining website content? Is there one more administrator that needs to
synchronise their work and the website updates? You may want to question how
technologically competent is the person responsible for the updates (which can be
hard to quantify).

Do you need files and data to be imported/exported in specific formats? Do you need
third-party apps or CRM integration? Do you need various platforms and devices to
sync data? Do you plan to create native apps somewhere? These are all critical
questions that broaden the reach of your project and job.

Hosting, domain, traffic (Technical requirements)

Ask your customer if the hosting and the domain name are ready. If you are not a
sysadmin (which you are mainly not), they say that they control the hosting and the
domain names. You can help if you are not sure which host to use. I assume that you
should prevent any potential liability for server downtimes or any other problems.
Customers can call you to verify what happened in the event of a server problem, but
if it is a server or domain problem, you may forward them to your hosting company,
and they will take care of it.

Ask your customers whether they are already using Google Analytics, Mint, or some
other analytics. If you don't, make sure you help them set up analytics. It will give
them useful insights into site results, page views, content discovery, priorities and,
above all, analytics to show how well the design and site optimisation choices are
made and where changes are required.

It is relatively simple to perform research; the challenge is not easy to understand and
adapt the research for your project.

Requirements Chart
1. Define the technical ● Identify business requirements,
environment and requirements hardware and software requirements
● Determine software and hardware types
to make sure that website is designed
to meet business requirements
● Recognise appropriate standards,
software and hardware required to
develop the website

2. Define the human-computer ● Conduct user analysis to identify and

interface determine a user profile and user needs
● Determine user content and
requirements
● Determine appropriate design principles
for the site
● Identify the appropriate operating
system

3. Determine site hierarchy ● Identify the hierarchy of pages

and structure ● Make sure content is logical and
accessible to the user
● Make sure that navigation between
pages is consistent and clear

4. Design dynamic web pages ● Apply appropriate information hierarchy

to site design
● Make sure design principles are
appropriate to business and user
● Make sure process flow is developed in
a logical and simple manner
● Test site search engine, site map,
frequently asked questions and news
sections against user needs
● Complete and document the design

Topic 2. Standards and Procedures Compliance

Key takeaways from this topic...

 1. Appreciate the significance of protecting creative works through patents,
copyrights, trademarks, trade secrets, and advertising rights to maintain
innovation and competitiveness.
2. Upholding honesty, integrity, fairness, respect, and accountability forms the
core of ethical organisational conduct, fostering a culture of trust and
responsibility.
3. Implement formal structures like codes of ethics, policies, compliance
measures, and incentives to ensure ethical practices, transparency, and
adherence to legal standards within an organisation.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Validate Relevant Standards for Technical Requirements

Establishing organisational requirements to comply with intellectual property, ethics

and privacy policy procedures

It is critical to establish organisational requirements to comply with intellectual

property, ethics and privacy policy procedures. The organisations are required to
identify the current legislation and standards and adhere to the currency good
practices in the industry.

Considering the universality and hierarchy of the Constitution, the concepts of

Intellectual Property Rights (IPR) can be classified into the following two categories.

One of those fundamental principles is what, why and how a legal structure or
process should be developed, such as the principles of sovereignty, autonomy
values, equality and shared benefits, common prosperity, and international
cooperation and growth that can also be articulated as sovereignty principles,
international coordination and collaboration, fairness and justice.

The other category includes those that are in place in the legal system and can be
specifically applied, such as the principle of national handling, the minimum norm, the
principle of freedom (for industrial property law), the principle of independent
protection and exclusive rights (for copyright), the principle of mandatory patent
enforcement (for patent law and patent law) and so on.

Intellectual property (IP)

Intellectual property (IP) relates to creations of the mind, including inventions,

literature and creative expressions, such as designs, prototypes, symbols, names
and images. It focuses on who is the rightful and legally valid owner of literary and
artistic work. Intellectual property is therefore related to something that someone
creates. The work is then protected by a patent, a copyright or a trademark. Trade
secrets are also included in the term Intellectual property (IP) in several countries.

Note: R sign refers to the “registered trademark.”

Intellectual property is not just copyright, patent rights and trademarks. Commercial
secrets and advertising rights are also covered. Trade and commercial secrets are
usually regulated by the state and protect any invention, formula, process or
collection of knowledge that may benefit a corporation over its competitors. The right
to advertise is essentially a person's right to regulate the commercial use of the
entity's name, voice, or likeness. For example, you probably had to sign a release
that would authorise the business to use your face whenever you have ever been
photographed or filmed for a commercial project, such as an advertisement or film.

Intellectual property is not just copyright, patent rights and trademarks. Commercial
secrets and advertising rights are also covered. Trade and commercial secrets are
usually regulated by the state and protect any invention, formula, process or
collection of knowledge that may benefit a corporation over its competitors. The right
to advertise is essentially a person's right to regulate the commercial use of the
entity's name, voice, or likeness. For example, you probably had to sign a release
that would authorise the business to use your face whenever you have ever been
photographed or filmed for a commercial project, such as an advertisement or film.

Copyright

Copyright is a blanket term covering various exclusive rights given to the author of
original work, e.g. writing, illustration, painting, photographing, software or audio
recording. One significant point to consider is that copyright does not protect ideas –
only their concrete expression. Therefore, if you have an idea for a novel or computer
program and believe someone has "stolen" it, copyright won't help you much!
However, if you wrote the novel or software and found someone else has taken an
exact (or nearly accurate) copy and used or released it, you are entitled to invoke the
copyright law against it. (It is another matter if you can enforce it.)

Most countries have signed the Berne Convention, which automatically grants
copyright once a work has been created. Even when we write these words, we are
the copyright owner who owns them. The same goes for all the 'literary or creative
works' you make – so you don't need to register your copyright. Originally, the
copyright was limited only to books but has now been expanded to include a wide
variety of works, including maps, charts, prints, music, theatre, photos, paintings,
sketches and sculptures, videos, computer programs, choreography, audio and
architectural works.

Although copyright is automatically granted, it is a good practice when you publish a

copyright notice (e.g., 'IBN Copyright 2020'). It signals that your work is safeguarded.
The naive will then be less likely to copy it out of ignorance, and the evil will think
twice before they use the copyrighted material. (Unfortunately, that is not always the
case.) While this is not a statutory necessity, you will see that we have given a
copyright notice if you look at the beginning of this learner guide.

Exceptions to copyright restrictions, especially fair use or equal use (in many
commonwealth countries), permit the replication of part (or sometimes the whole) of
the work for such purposes as critique, analysis and satire. Bear in mind that this is
historically a grey area - many cases are based on whether a specific use of a job is
fair use or a breach. The Copyright Authority and Agency offer advice on this matter,
which will indicate how likely your proposed use of Australian copyright law will be
deemed fair.

Patent

A patent is a document that provides sole rights to an invention. A patent, therefore,

grants a right or privilege to the rightful owners of an invention. The patents are
issued and managed by government bodies. The Constitution makes sure that only
the rightful owner should create, produce, use or sell the patented content or
materials.

● The patent legislation offers a broad overview of the subject matter to be

patented and provides relevant information.
 ● The invention must be a novelty. In other words, it has to be very distinct
from other inventions that have already obtained a patent or are already
pending their patent application.
● The invention must be useful and valuable. It should have a useful purpose
to serve.
● The invention must be non-obvious, which means that the invention is not
apparent to those with ordinary professional skills relevant to the invention.

Trademark

You can recognise a unique product or service with distinctive characteristics or

attributes by formally registering the symbol. Therefore, the trademark is in the
process of formally registering the symbol to identify the manufacturer or distributor of
a product.

It is a form of brand protection that differentiates between your products and services
and your competitors.
A brand is not just a logo. It may be attributed to letters, numbers, words, phrases,
sounds, smells, forms, logos, images, movements, packaging aspects, or
combinations.

Rightful owners have exclusive rights to use, license and sell their mark as a
registered trademark. It is also an important marketing and advertising tool as with
the company’s success, the value of the brand also increases.

Your brand, often referred to as a brand, is your identity. This is how you show your
clients who you are.

This could be your company logo, a jingle you use in an advertisement, your
company name painted on the side of your company vehicle or your billboards or
packaging.
Trademarks can also be a:

● Word
● Phrase
● Letter
● Numbers
● Logo
● Photo
● Packaging component
● Or the above mix ...
 Organisational Ethics

The ethics of an organisation are the principles of how an organisation conducts its
business in an honest, fair, respectable, transparent, and appropriate manner.
Organisational ethics are interdependent with organisational culture. The ethical
atmosphere is critical because it can enhance employee beliefs, promote
organisational involvement and participation and retain the workforce.

Examples of Organisational Ethics

Standardised care for all workers

The standardised care of all workers is an example of organisational ethics. All
workers should be treated with equal respect by business owners irrespective of
race, ethnicity, culture or lifestyle. All should have fair opportunities for promotions as
well. One way of encouraging standardised care is by sensitivity training in
organisations.

Several organisations conduct one-day seminars on different topics of discrimination.

They invite external experts to discuss these subjects. Likewise, small business
administrators must also prevent one employee from exploiting others. Such
procedures can also contribute to lawsuits by dissatisfied workers. It's detrimental,
too.

The social responsibilities of the organisation

Small organisations do have a responsibility to protect their workplace environment.
For example, when accidents or other disasters occur, a small chemical business
owner must disclose these risks to the community. The owner must also follow other
health requirements to protect the residents from leakage affecting water or air
quality.

State and federal regulations protect citizens from unethical activities in the
workplace. Business owners who breach these laws could face serious penalties.
They can be shut down, too.

Organisational ethics related to financial and business aspects

Business owners must perform clean financial operations, spend and grow their
businesses ethically and transparently. For example, organisations should not bribe
tax credits or special benefits to state legislators. Trading insiders are also forbidden.
Insider trading happens when the Securities and Exchange Commission reports that
managers or executives secretly notify investors or third parties of confidential
information concerning publicly traded securities.

Many investors get higher returns on their investments at the expense of others.
Managers in small businesses must work to support all shareholders to make better
returns on their capital. Companies should also prevent collusion with other firms to
intentionally hurt other competitors.

Taking care of the employees

The organisational ethics and standards of a small company should also require
treating workers with mental disorders or issues with substance addiction, such as
opioid and alcohol dependency. Ethical businesses help their workers to solve these
problems whenever possible. We also use workplace therapy services to get the care
we need.

Employees can also have issues that contribute to these issues. They also deserve
an opportunity to clarify their circumstances and get the support they need.

The Principles of Ethics

● Honesty: The organisational executives should be honest and truthful in

their dealings, and they should not mislead or deceive others deliberately
by misrepresentation, overstatements, partial truths, selective omissions or
any other means.
● Integrity: The organisational executives should have moral soundness.
They should know the difference between right and wrong. They should
fight for their beliefs.
● Promise-keeping and trustworthiness: The organisational executives
should be trustworthy, candid and forthcoming in providing relevant
information and correcting misappropriation of fact. They ensure they make
every reasonable effort to fulfil the letter and spirit of their promises and
commitments.
● Loyalty: The organisational executives should be worthy of trust and
confidence. They should be loyal to organisational stakeholders at all
times.
● Fairness: The organisational executives should be fair and just in all their
dealings.
Concern for others: The organisational executives should be concerned for
the health and well-being of all stakeholders, not only for themselves.
● Respectful: The organisational executives should be respectful to all
stakeholders at all times.
 ● Law-abiding: The organisational executives should obey all regulations,
legislative instruments and organisational standards and procedures at all
times.
● Committed: The organisational executives should be committed to
excellence in performing their job role and responsibilities, well-informed
and prepared and constantly endeavour to increase their proficiency in all
areas of responsibility.
● Leadership: The organisational executives should be conscious of the
responsibilities and opportunities available to the organisation and how
best to utilise the available resources.
● Reputation and morale: The organisational executives should maintain a
good private and public image. They must not engage in any inappropriate
or unethical behaviour or conduct.
● Accountability: The organisational executives should be accountable for
all their actions, decisions and omissions.

Ethical Culture

The term ethical culture refers to an organisation's workplace culture that is formed
and operates fairly, ethically, and transparently. The organisation uses several written
and formal structures to comply with ethical, cultural requirements:

● Code of ethics
● Organisational policies and procedures
● Client charter
● Organisational rules
● Compliance and regulatory requirements
● Reward and incentive programs

Legal and ethical considerations

Legal and ethical considerations are called actions, procedures and strategies to
ensure conformity with legal requirements within an organisation. All standards and
specifications must be followed to comply with all statutory directives, laws, corporate
policies, and procedures. Let us look at some of the main legal and ethical principles.

Privacy, Confidentiality and Disclosure

Usually, these terms are interchangeably used. Both definitions are closely related,
but they are not the same.
Privacy requires the right to shield information from certain parties' presence or
views. It ensures that they do not provide or release any private or confidential
information to any third party or unauthorised recipient. Privacy may also be
correlated with an individual's details and information. Privacy laws and regulations
regulate privacy. Standards of enforceable privacy control the handling and use of
personal data.

The right to keep information privately and safely refers to confidentiality—the ethical
and legal requirements related to the security of the information. For example, the
legal duty to maintain confidentiality enables Information Communications and
Technology (ICT) officers to not release confidential information to third parties.

The Privacy Act contains 13 Australian Privacy Principles that govern minimum
privacy standards for handling and managing personal information, including:

● the need to gain consent for the collection of information

● what to tell individuals when information is collected
● what to consider before passing any information to others
● the details that should be included in an organisation’s Privacy Policy
● securing and storing information
● providing individuals with the right to access their records.

Disclosure refers to the disclosing or sharing of private information previously kept

confidential. This requirement applies to all ICT workers.

Identifying intellectual property

Identifying intellectual property refers to:

● Recognise all potential sources of your IP (brands, products and services).

● Segment and categorise all elements related to IP.
● Protect your IP.
● Recognise steps to take with IP that are not your own.

Establishing compliance with the requirements

The organisation should have a policy manual developed to comply with legislative
and regulatory requirements and guidelines. The policy document must also
determine the integrity, confidentiality, security and availability of information the
organisation needs to establish compliance with the requirements.

Topic 3. Client-Side Dynamics

Key takeaways from this topic...

 1. Understanding HTML, CSS, and JavaScript's role is crucial for creating
interactive web experiences without page reloads, and enhancing user
engagement.
2. JavaScript boosts web app speed and lessens server load, distinguishing it
from traditional software.
3. JavaScript allows instant user responses, reducing server load, and following
the client-server model for reliable internet access.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Fundamentals of Client-Side Dynamics

Understanding Client-Side Technologies:

Client-side dynamics refer to the functions and features executed by the web browser
on the user's device, using languages such as HTML, CSS, and JavaScript. These
technologies are responsible for the interactivity and real-time responsiveness of a
website or application without the need to reload a page from the server.

The Role of Client-Side Scripting in User Experience:

Scripting on the client side plays a pivotal role in creating an engaging and interactive
user experience. It enables functionalities like form validation, content updates,
animations, and handling user events, thereby enhancing the usability and aesthetic
appeal of digital platforms.

Best Practices in Client-Side Development:

Adhering to best practices in client-side development is essential to ensure that

applications are fast, responsive, and accessible. This includes optimising code,
ensuring cross-browser compatibility, and following accessibility guidelines to create
inclusive and user-friendly interfaces.
Developing Client-Side Dynamics

Leveraging JavaScript and Frameworks:

JavaScript is the backbone of client-side scripting, often supplemented with

frameworks and libraries like React, Angular, or Vue.js to streamline development
and enhance functionality. These tools provide a structured approach to building
dynamic user interfaces and handling complex client-side logic.

Implementing Responsive Design:

Responsive design principles ensure that client-side features work seamlessly across
different devices and screen sizes. This involves using fluid grids, flexible images,
and media queries to create adaptable layouts that respond to various display
environments.

Ensuring Performance and Security:

While client-side scripts can enrich user interaction, they must also be optimised for
performance to minimise load times and ensure smooth operation. Security is
another critical concern, with practices like input validation and content security
policies safeguarding against client-side vulnerabilities.

Testing and Optimisation of Client-Side Elements

Testing Client-Side Interactions:

Thorough testing of client-side interactions is crucial to identify and rectify any

usability issues or bugs. This can involve unit tests for individual components,
integration tests for combined elements, and user acceptance testing to validate the
overall experience.

Utilising Developer Tools and Testing Suites:

Modern browsers come equipped with developer tools that facilitate testing and
debugging of client-side scripts. Additionally, testing suites like Jest or Mocha can
automate the testing process, ensuring that all dynamic elements perform as
intended.

Analysing Performance Metrics:

Tools like Google Lighthouse or PageSpeed Insights provide performance metrics
that can guide optimisation efforts. By analysing these metrics, developers can make
informed decisions on how to refine client-side code to improve loading times and
interactivity.

Iterative Improvement and User Feedback:

The development of client-side dynamics is an iterative process, where user

feedback plays a crucial role in driving improvements. Collecting and incorporating
user insights help refine the dynamic elements to better meet user needs and
enhance the overall experience.

By focusing on the principles of client-side dynamics, developers can build interactive

and engaging web applications that cater to the modern user's expectations of a fast,
responsive, and seamless online experience.

Client-Side Dynamic Content Identification

A dynamic website only dynamically generates some of the response content if

needed. HTML pages are usually generated on a dynamic website by inserting data
from a database into HTML template holders (this is much easier for storing large
quantities of content than using static websites).

You should have the skills and knowledge in the following to develop a website.

1. Javascript
2. CSS
3. SQL
4. Framework such as springs or struts
5. Many payment integration APIs such as PayPal
6. MVC design pattern
7. XML (basic knowledge only)
8. Java and other programming languages (basic knowledge only)

A dynamic site may return various URL data based on user data or stored
preferences and may carry out other operations as a result of the return of a reply
(e.g. sending notifications).

Many complex website support code has to run on the server. Creating this code is
called "server-side programming" (or "back-end scripting" sometimes).
The diagram below shows a basic website architecture. As in the previous graph,
browsers send HTTP requests to the server, process the requests and return the
corresponding HTTP answers.

The Client-side Scripting Requirements

As web apps become more strong and sophisticated, they are supposed to operate
and function much like a window app. The basic design of a mobile app is that most
of the source code and assemblies are placed on a web server and processed. A
web server only has the task of accepting incoming HTTP requests and returning the
requested resource in an HTTP response. No continuous live communication exists
between the browser of the client and the web server. Online pages are always in
HTML form.

PostBack is the name given to the ASP.NET processing page to the server.
Whenever a PostBack occurs, the HTML page is submitted to the web server. The
server loads the page, handles events and returns the new HTML. The whole HTML
is refreshed on a PostBack.

This can be very time-consuming for large and complex web applications which store
a large number of views. This would be a big problem for a web server with limited
memory and bandwidth resources.

Online applications are typically inserted into the HTML page view state. Quoting
Microsoft, the Microsoft ® ASP.NET view status is a technique that is used in a
nutshell by a web page of ASP.NET to persist in altering the state of a web type
through post-backs. The viewing state is transferred to and from the client to the
server and is not stored either on the server or any other external source. View status
is used to maintain the status of server-side objects between backdoors and is very
wide for large applications and sites.
Client-side scripting (embedded scripts) is a code contained on the HTML page of the
client. This code is processed on the client computer, and the HTML page will NOT
return to the web server. Client-side scripting is traditionally used for web surfing,
data validation and formatting. JavaScript is the language used in this script.
JavaScript is compatible and can be executed on any web browser.

The two key advantages of customer scripting are:

● The actions of the user would lead to an immediate response because they
don't need a trip to the server.
● On the web server, fewer resources are used and required.

What is the model client-server?

Most of the Internet is centred on the client-server model. In this model, user devices
communicate with central servers through a network to access the information they
need instead of communicating among themselves. End-user devices such as
tablets, smartphones and desktop computers are known as 'clients' of the servers as
if they were customers who offer company services. Client devices send web pages
or program requests to servers, and servers send replies.

The client-server model is used because, generally, the servers are stronger and
more reliable than the user devices. They are often continuously maintained and
maintained in regulated environments to ensure that they are still available; while
individual servers can go down, other servers normally support them. Meanwhile,
users can turn on and off their devices, lose or fall off their devices, and Internet
Access for other users should not be affected.

Servers can serve several customer devices simultaneously, and every customer
device sends requests to several servers during internet access and browsing.

Static resource requests are treated the same way as static sites (static resources
are any unchanging file — usually CSS, JavaScript, images, previously generated
PDF files, etc.).

The importance of client-side scripting language

Like JavaScript, the client-side scripting can be inserted in the client's browser
window. This script should allow the client's browser to reduce some of the burdens
of running a web application on your web server. Client-side scripting is source code
that runs on a client's browser rather than on a web server and makes it possible to
build web applications that are significantly faster and adaptive.

How does a web application vary from a conventional window application? A good
example of a Windows program, Microsoft Office, is installed on a client's
workstation, and all source code and assemblies are run locally except when calls to
a database server to save and retrieve data. Indeed, a Windows program must be
mounted on the workstation of the customer. On the other side, web apps do not
have to be mounted on a single workstation. You need an internet connection and a
browser such as Internet Explorer, Firefox or Google Chrome. However, much of the
processing is not done in the client's browser but in some other location on a web
server.
Module 7. Server-Side and Technology Selection
As we enter Module 7, the focus shifts to the backbone of web development:
Server-Side and Technology Selection. This pivotal module imparts the skills and
knowledge necessary for identifying the appropriate server-side technologies and
programming languages that will power your web project from behind the scenes.

Topics:

● Server-Side Content Identification: Learn to define and categorise the

content that will require server-side processing.
● Languages and Technology Selection: Delve into the decision-making
process for selecting the most suitable programming languages and
technologies for your project’s needs.
● Review of Selected Technologies: Conduct a thorough review to ensure
the chosen technologies align with your project goals.

Learning Activities:

● Server-Side Scripting Exercise: Develop your coding skills with

hands-on server-side scripting, creating dynamic and responsive web
pages.
● Programming Language Selection Activity: Engage in a critical
evaluation exercise to determine the best programming language for your
specific server-side requirements.
● Technology Assessment Task: Analyse and assess the potential
technologies, ensuring they meet the project's performance and scalability
requirements.

Subject Learning Outcomes

The material in this module relates to the following subject learning outcomes:

​ SLO 5: Evaluate technical requirements and apply compliant client-side

scripting.

Student Expectations
 During this module, you are expected to spend time working through the prescribed
material prior to attending class. This will enable a more valuable discussion to take
place in online tutorials or conferences, where you will be able to discuss concepts,
present ideas and explore information collaboratively in greater depth.

Accordingly, it is suggested that you allow:

4 hours for facilitated study. This includes guided facilitated study, watching or
attending course lectures (live or pre-recorded), responding to facilitator feedback.

8 hours for personal study. This includes reading through course material,
undertaking learning activities and exploring additional related resources.

Further Resources
The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Reading: Client-Side vs Server-Side Scripting

Click to Access Resource

Links to an external site.

Reference: Thoms, N. (2017). Client-side vs server-side scripting. [online] Fasthosts

Blog. Available at:
https://www.fasthosts.co.uk/blog/websites/client-side-vs-server-side-scripting.

Reading: Web Development 101: Top Web Development Languages to Learn in 2018

Click to Access Resource

 Reference: Yoshitaka Shiotsu (2017). Web Development 101: Top Web
Development Languages to Learn in 2018. [online] Upwork Blog. Available at:
https://www.upwork.com/blog/2017/11/top-web-development-languages-2018/.

Topic 1. Server-Side Content Identification

Key takeaways from this topic...

1. Identifying elements best handled by server-side scripting is key to optimising

website performance and security.
2. Server-side scripting is crucial for dynamic data handling and effective user
session management.
3. Protecting server-side content from security vulnerabilities is an essential
aspect of web development.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Understanding Server-Side Content

The Role of Server-Side Technologies:

Server-side content generation is the backbone of dynamic web page creation, where
web servers process user requests and generate custom responses. Technologies
such as PHP, Node.js, ASP.NET, and Java are commonly used to create content that
is dynamic and interactive.
Differentiating Between Client-Side and Server-Side Processing:

It's crucial to understand the distinction between client-side and server-side

processing. While the client side is responsible for what users see and interact with
directly in their browsers, the server-side deals with behind-the-scenes logic,
database interactions, and application security.

Identifying Server-Side Content Needs:

Identifying which parts of a web page require server-side generation involves

analysing user interaction patterns, data processing needs, and security
considerations. Server-side scripting is essential for tasks that need real-time access
to databases, file systems, or other server resources.

Strategies for Server-Side Content Development

Choosing the Right Server-Side Language:

The choice of server-side language can impact the functionality, speed, and
scalability of web applications. Considerations should include community support,
library availability, and compatibility with existing systems and databases.

Developing Secure and Efficient Server-Side Scripts:

Security and efficiency are paramount in server-side scripting. Best practices include
validating user input, preventing SQL injection, and optimising database queries to
avoid unnecessary server load and potential bottlenecks.

Integrating Server-Side Content with Client-Side Elements:

A seamless integration between server-side content and client-side elements is key

to a cohesive user experience. This includes using AJAX for asynchronous data
fetching, APIs for data interchange, and templating engines for rendering dynamic
content.

Server-Side Dynamic Content Identification

Scripting on the server builds websites, so that process and user requests are
performed on the originating server. Server scripts have a user interface, restrict
access to proprietary data, and help manage the script's source code.
Examples of server-side scripting
To build these scripts, several languages can be used. They may include, but are not
limited to, the following types of examples:

● Action VFP
● ASP
● C
● DC
● Java
● JavaScript (using SSJS (Server-side JavaScript ) for example, node.js)
● Perl
● PHP
● Python
● R
● Ruby

Pros of using server-side scripting

Will access files from a massive archive, ensuring that a large number of data can be
stored on web pages.
The source code is never disclosed to the user, ensuring that information on the web
is much more secure.
Browser plugins and scripting technologies like JavaScript are required for client-side
scripting. This can make the user experience bad because of slow load, but some
browsers don't support JavaScript.
Certain languages can be programmed to run CMS applications like WordPress so
that related novices can build and upload content without the need for coding.

Considerations and cons of using server-side scripting

As information is collected on the server, more demands are put on a website's
server than client-side scripting. If you use server-side scripting, you may need to
consider better networking options such as dedicated hosting.

The complex data must be stored on a database, and it requires frequent backup
and good security behaviour. This can be more time-consuming and expensive than
client-side scripting, but not necessarily a problem.

Requires pages to be modified to view dynamic content. Still, a new method called
Ajax has permitted developers to update pages without reloading all the site's
content.

Testing and Deploying Server-Side Content

Testing for Functionality and Performance:

Functional testing ensures that server-side scripts meet the specified requirements
and perform the intended operations. Performance testing, including load and stress
testing, evaluates how the server-side components handle different levels of
demand.

Server-Side Deployment Considerations:

When deploying server-side content, considerations include server configuration,

resource allocation, and scaling strategies to handle user traffic effectively. The
deployment process should also consider version control and rollback capabilities for
maintaining system stability.

Monitoring and Updating Server-Side Scripts:

Post-deployment, it's essential to monitor server-side scripts to ensure they continue

to operate as expected. Regular updates and patches are necessary to address new
security vulnerabilities and to incorporate enhancements.

By understanding and effectively developing server-side content, you can ensure

that web applications are robust, secure, and capable of delivering a dynamic,
data-driven user experience.

Topic 2. Languages and Technology Selection

Key takeaways from this topic...

1. Selecting the right programming languages and technology stacks is critical

and should be based on project-specific requirements.
2. Different server-side technologies offer various trade-offs in terms of
scalability, maintainability, and developer familiarity.
3. Considering the longevity and community support of technologies is crucial for
future-proofing the website.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.
Choosing the Right Programming Languages\

Essentials of Programming Language Selection:

The choice of a programming language is a foundational decision in web

development, influencing everything from functionality and performance to future
maintenance and scalability. Factors such as project requirements, developer
expertise, and community support play a significant role in this selection process.

Comparing Server-Side Languages:

Different server-side languages offer various features and benefits. For instance,
PHP is widely used for its simplicity and large community, whereas Python is
renowned for its readability and efficiency. Node.js offers event-driven, non-blocking
I/O for high scalability, and Ruby on Rails stands out for rapid development with its
convention over configuration philosophy.

Assessing Language Performance and Compatibility:

Performance benchmarks and compatibility with existing systems are crucial

considerations. Some languages may excel in data processing speed but fall short in
handling large volumes of concurrent connections, while others might integrate more
seamlessly with certain database technologies or third-party services.

Selecting Supporting Technologies and Frameworks

Role of Frameworks in Web Development:

Frameworks provide a structured way to build applications, offering predefined

functions and templates that can speed up development and enforce best practices.
When selecting a framework, consider its performance, ease of use, flexibility, and
how well it aligns with the project's goals.

Integrating Frontend and Backend Technologies:

A cohesive web development approach requires a harmonious integration between

frontend and backend technologies. JavaScript, with its numerous frameworks like
React, Angular, and Vue.js, has become a popular choice for both sides of
development, enabling a more unified coding experience.

Considering Emerging Technologies:

Emerging technologies such as Progressive Web Apps (PWA), serverless

architecture, and containerisation with tools like Docker are redefining web
development paradigms. Staying informed about these trends is crucial for making
forward-looking technology choices that can provide competitive advantages.
Choosing Tech Based on Requirements

Dynamic websites are known because HTML web pages are dynamically designed
using server language scripts such as PHP, Java, Dotnet, ASP, etc., to pull data from
the database and filesystem. A static website is a pre-written javascript without a
database link; adjustments can only be made by editing the HTML.

We can't necessarily say which approach would be ideal for a given project—the
benefits and drawbacks of both static and dynamic web design.

When should static web design be chosen?

Static websites are gradually declining because a simple shift in texts requires web
designers or developers. For a single-page website or websites that concentrate
primarily on design rather than features and SEO, you may pick it.

When should dynamic web design be chosen?

In dynamic web design, anything is feasible and achievable by static methods, plus
you get a huge chance of creating web systems that can alter as you need. A few
days of different diverse web-building platforms offer a strong foundation and roads
for growth if you are planning something other than basic good-looking websites,
such as publishing your content or making changes to existing content in a complex
Web without technical expertise.

Basics of Dynamic Websites

● Online server-Get it from the web hosting companies

● Database-In addition to the hosting package
● CMS like WordPress, Drupal, Joomla and more.

Basics of dynamic websites

A web server is a computer device designed to share server browsers or other HTTP
clients (the simple network protocol used to spread information on the World Wide
Web). The Web server consists of a physical computer, an operating system and
separate network request supporting software. Most usually, Apache is used as a
Linux or Windows server operating system server application system.

Database
The database is a dynamic website house of knowledge used to store data in
various tables and dynamically extract the data on demand. The database is
designed to hold all relevant information and website material in various tables. It
can read, insert or edit data very quickly and effectively with a database query
language. Most commonly, MySql is used as a free and widely tested and accepted
database framework. Even your favourite Facebook social network uses MySql for
data storage and viewing across the globe.

Method of CMS Content Management

CMS Content Management System is a server-side language package of tools such
as PHP, dot net, ASP, java etc. The primary task is to connect the web server,
database and client browser and, on the specific request, to render dynamic HTML
pages using database and file system data.

You can create your amazing interactive website with any regular hosting package.

Implementing and Evolving Technology Choices

Implementation Strategies for Selected Technologies:

Implementing new technologies requires a strategic approach, often involving a

phased rollout, comprehensive testing, and team training. This ensures that the
integration of new languages and frameworks into existing systems is smooth and
that the development team can fully leverage their capabilities.

Adapting to Technological Changes:

The tech landscape is in constant flux, with new languages, frameworks, and tools
continually emerging. Adopting an agile mindset that embraces change, encourages
experimentation, and supports continuous learning is vital for staying current and
effective in web development.

Benchmarking and Iterative Improvement:

Post-implementation, it's essential to benchmark the performance and user

satisfaction of the chosen technologies. Collecting metrics on load times, error rates,
and user engagement can inform iterative improvements, ensuring that the
technology stack remains robust and responsive to user needs.

Continuous Evaluation and Skills Development:

As projects evolve, so too must the technologies that underpin them. Regular
evaluations against industry standards and project objectives can help determine
when a technology shift is necessary. Additionally, ongoing skills development
ensures that the development team can effectively utilize new languages and
frameworks as they are adopted.
 By carefully selecting the appropriate languages and technologies for web
development projects, teams can create dynamic, efficient, and future-ready
applications that meet the evolving needs of users and businesses alike.

Topic 3. Review of Selected Technologies

Key takeaways from this topic...

1. Regular reviews of chosen technologies ensure they continue to meet project

requirements and industry standards.
2. Community support and comprehensive documentation are vital factors in
technology selection.
3. Technology reviews should be a part of ongoing lifecycle management to
adapt to new trends and changes.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Critical Review of Technology Selections

The Importance of Reviewing Technology Choices:

Regularly reviewing selected technologies ensures they continue to meet the

project's evolving needs and remain aligned with the latest industry standards. This
review is an integral part of the technology lifecycle management, which
encompasses assessing functionality, performance, and cost-effectiveness.

Criteria for Technology Review:

Technology reviews are governed by a set of criteria that may include the initial
selection rationale, current and projected performance data, user feedback, and
alignment with business goals. The review process should also consider the
scalability, security, and maintainability of the technologies in use.

Feedback Loops and Stakeholder Involvement:

Constructive feedback from all stakeholders, including developers, end-users, and

business owners, is vital during technology reviews. Stakeholder involvement
ensures that the review process considers diverse perspectives, leading to more
informed decisions.

Methods for Conducting Technology Reviews

Benchmarking Against Industry Standards:

One method for reviewing technology is benchmarking against current industry

standards and best practices. This involves comparing the selected technologies with
competitors and industry leaders to gauge where they stand in terms of innovation,
efficiency, and performance.

User Testing and Experience Analysis:

Another method is conducting user testing sessions to analyse how the technology
performs in real-world scenarios. User experience analysis provides insights into how
the technology affects the usability and overall satisfaction with the product.

Analysing Support and Development Ecosystem:

The review should also analyse the support and development ecosystem of the
selected technologies, including the availability of resources, community support, and
the frequency and quality of updates and patches.

Strategies for Updating and Optimizing Technologies

Implementing Changes Based on Review Outcomes:

Based on the review findings, necessary changes should be planned and

implemented. This may involve upgrading to newer versions, switching to alternative
technologies, or enhancing the current setup to optimise performance.

Managing the Transition Process:

When changes to the technology stack are required, managing the transition process
is critical to minimise disruptions. This includes phased rollouts, backward
compatibility checks, and ensuring that documentation and team training are updated
accordingly.

Continuous Monitoring and Future Reviews:

Following the implementation of changes, continuous monitoring is essential to

ensure the technologies perform as expected. Establishing a schedule for future
reviews will help maintain the relevance and effectiveness of the technology choices
over time.

Building a Roadmap for Technological Growth:

Finally, reviews should contribute to a roadmap for technological growth, charting out
the evolution of the technology stack in line with strategic business objectives. This
roadmap should be flexible enough to adapt to new trends and innovations in the
technology landscape.

Regular and thorough reviews of selected technologies are crucial in maintaining an

effective, secure, and innovative web presence. They enable organisations to stay
competitive, address emerging challenges, and capitalise on new opportunities for
growth and improvement.
Module 8. Templates and Database
As you embark on Module 8, you will be diving into the essential elements of
Templates and Database design. This module is designed to solidify your
understanding of the structural foundations of web development, focusing on the
creation of reusable templates and the thoughtful design of databases that support
dynamic content management.

Topics:

● Boilerplate Template Creation: Gain insights into the design of base

templates that ensure consistency and efficiency in web development.
● Database Design: Examine the principles of database architecture,
necessary for storing, retrieving, and managing data effectively.
● Data Organisation: Discover methodologies for structuring data in ways
that promote usability and performance.

Learning Activities:

● Template Development Workshop: Apply your knowledge by crafting

templates that can be used as a starting point for various web projects.
● Database Structure Task: Construct a well-organised database, learning
to implement structures that facilitate quick and reliable access to data.
● Information Architecture Activity: Integrate your templates and
databases within the broader scope of information architecture for
seamless web experiences.
Assessment notes
Assessment 2 is due at the end of this module.

Subject Learning Outcomes

The material in this module relates to the following subject learning outcomes:

​ SLO 6: Develop functional web templates and manage underlying

database structures.

Student Expectations
 During this module, you are expected to spend time working through the prescribed
material prior to attending class. This will enable a more valuable discussion to take
place in online tutorials or conferences, where you will be able to discuss concepts,
present ideas and explore information collaboratively in greater depth.

Accordingly, it is suggested that you allow:

4 hours for facilitated study. This includes guided facilitated study, watching or
attending course lectures (live or pre-recorded), responding to facilitator feedback.

8 hours for personal study. This includes reading through course material,
undertaking learning activities and exploring additional related resources.

odule 8. Templates and Database

Further Resources

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Reading: What is the HTML Boilerplate?

Click to Access Resource

Links to an external site.

Reference: www.youtube.com. (n.d.). What is the HTML Boilerplate? [online]
Available at: https://www.youtube.com/watch?v=1cpdzG2WU0Q [Accessed 6 Dec.
2023].

Reading: How to Create Your First Database

Click to Access Resource

Reference: CBT Nuggets (2019). How to Create Your First Database. YouTube.
Available at: https://www.youtube.com/watch?v=QY4bVNL_yrI.

Topic 1. Boilerplate Template Creation

Key takeaways from this topic...

1. Boilerplate templates streamline the development process and ensure

consistency across projects.
2. Customising templates to fit the project's unique needs is a key skill in web
development.
3. Responsive template design is essential for ensuring usability across various
devices and screen sizes.

Learner Guide
The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Introduction to Boilerplate Templates

Defining Boilerplate Templates:

Boilerplate templates are pre-made blocks of code that serve as a starting point for
web development projects. They provide a standardised set of HTML, CSS, and
JavaScript structures that ensure consistency, follow best practices, and can
dramatically speed up the development process.

Benefits of Using Boilerplate Templates:

Using boilerplate templates can streamline the setup of new web projects by
providing a tried-and-tested foundation. This approach reduces repetitive coding
tasks, minimises the risk of errors, and ensures that the project adheres to web
standards from the outset.

Customisation and Scalability:

While boilerplate templates offer a generic framework, they are designed to be

customisable. Developers can build upon this base to scale the project up, tailor the
user experience to specific requirements, and incorporate unique branding elements.

Creating and Managing Boilerplate Templates

Designing a Custom Boilerplate Template:

The creation of a custom boilerplate template begins with understanding the

common features and functionalities required across projects. This might include a
responsive layout, SEO-friendly markup, and a set of pre-defined scripts for common
tasks.

Incorporating Industry Best Practices:

Boilerplate templates should be infused with industry best practices such as

mobile-first design principles, accessibility standards, and cross-browser
compatibility. Including these elements ensures that the template will serve as a
reliable foundation for various types of web projects.
Version Control and Documentation:

Effective management of boilerplate templates requires robust version control and

thorough documentation. This ensures that any updates to the templates can be
tracked over time, and developers can easily understand and implement the
templates in their projects.

Implementation and Usage of Boilerplate Templates

Streamlining Workflow with Boilerplate Templates:

Integrating boilerplate templates into the development workflow can significantly

enhance efficiency. Teams can quickly kick-start new projects, safe in the knowledge
that the core structure of their web applications is pre-configured to meet essential
criteria.

Customisation for Specific Project Needs:

While boilerplate templates provide a general framework, customisation is key to

adapting the template to the specific needs of a project. Developers should be adept
at modifying and extending the base template to fit the unique requirements and
features of each new web application.

Ongoing Maintenance and Updates:

As web standards and technologies evolve, boilerplate templates must be

maintained and updated to remain current. This may involve integrating new
features, updating libraries, and refining code to reflect the latest development
paradigms.

Leveraging Community Knowledge and Feedback:

Participation in the developer community can be beneficial for those who create and
use boilerplate templates. Community feedback can inform improvements to the
templates, and sharing knowledge can help in discovering new techniques and
solutions for common development challenges.

By carefully crafting and employing boilerplate templates, web development teams

can achieve greater consistency, efficiency, and quality in their projects, laying the
groundwork for robust and scalable web applications.

Topic 2. Database Design

Key takeaways from this topic...

1. Efficient database design is crucial for effective data storage and retrieval in
dynamic web applications.
2. Database normalisation improves data integrity and reduces redundancy.
3. Database design should support the scalability and security needs of the
application.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Fundamentals of Database Design

Database design is the process of structuring data in a database in a way that

represents the information accurately and ensures its easy access, management,
and update. It is a critical phase in the development of any system that requires
persistent data storage.

Understanding Data Modelling:

Data modelling is a method used to define and analyse data requirements needed to
support business processes within the scope of corresponding information systems
in organisations. Effective data modelling creates a structured diagram that details
the database system's entities, the attributes of those entities, and the relationships
between them.

Normalisation and Its Importance:

Normalisation is a systematic approach of decomposing tables to eliminate data

redundancy and undesirable characteristics like Insertion, Update, and Deletion
Anomalies. It is a multi-step process that puts data into tabular form by removing
duplicate data from the relational tables.
Designing a Relational Database

Choosing the Right Database System:

Selecting the appropriate database system—relational (SQL) or non-relational

(NoSQL)—depends on the nature of the data and the application requirements.
Factors such as the complexity of data, scalability, speed, and integrity of the data
play a significant role in this decision.

Entity-Relationship Modelling:

Entity-relationship (ER) Modelling is a crucial tool used in conceptualising database

schemas. An ER diagram provides a visual representation of the data, simplifying
the complex relationships between data entities.

Defining Schemas and Relationships:

A schema is an outline of a database's logical configuration, which includes tables,

views, and relationships. Careful definition and implementation of schemas and
relationships ensure data consistency and integrity across the database system.

Implementing and Maintaining the Database Design

Implementation of the Database Design:

The implementation phase involves translating the conceptual design into a living
database. This process includes creating tables, defining primary and foreign keys,
setting up constraints, and indexing to optimise query performance.

Database Security Considerations:

Security is paramount in database design. Measures such as encryption, access

controls, and audit logging are crucial for protecting sensitive data and ensuring
compliance with data protection regulations.

Performance Optimisation and Scaling:

Database performance optimisation involves fine-tuning various elements such as

queries, storage, and indexing. Additionally, the design must allow for scaling—either
vertical or horizontal—to accommodate growth.

Ongoing Database Maintenance:

Regular maintenance tasks such as backups, health checks, and updates are vital
for the longevity and reliability of the database. This proactive approach helps in
identifying and rectifying issues before they escalate into more serious problems.

By mastering the principles of database design, developers can ensure the creation
of efficient, scalable, and secure databases that form the backbone of any
data-driven application, contributing to the overall robustness and reliability of the
technological solutions they support.

Developing Database Websites

For much of its content, a database website or a database drive uses a database. In
other words, the material is not currently in a file on the server. Instead, it is
contained within the database in tables and columns.
There are two major website types: static and dynamic. A database website is a
dynamic site, while if the website is generated with and page in a file, it is called a
static Website on the server.

Using a website content management system

Most complex websites or databases have a content management system ( CMS).
WordPress is the most common CMS alternative and utilises the power of MySQL
databases.
The CMS allows the addition, subtraction and control of website material by the
Webmaster. The webmaster uses an administrative area or a Dashboard to add
pages, add posts, modify content, or remove content. You can upload photos, PDF
files and other documents via the admin area.

All material will be saved in a database, and other site-related files can be stored in a
file system. For example, in the archive, images and records can be saved, while
templates and plugins are saved in the file system.

What are the advantages of a website powered by a database?

● Database sites offer a range of advantages, including database website

dynamics
● Free move from hosting account to hosting account
● May add a shopping cart
● Attach a blog or forum quickly
● Build multiple user profiles with varying levels of access
● Ability to provide advanced visitor search functions
● Adjust the look and feature with plugins or extensions easily
● Can be combined with apps
 ● And a lot more!

Many webmasters choose to build a website because it removes the need to learn
how a website should write code. Novice users can only install a CMS, such as
WordPress, and customise the website look and features via the dashboard. This
simplifies the development of a professional website much more quickly.

How to Create a Database Site

The fastest way to build a database website is with a CMS. For example, if you open
a Web Design hosting account, you will have access to various great resources, like
WordPress. To create a database-based website, all you need to do is follow these
basic steps:

● Visit your Cpanel

● Find the relevant icon
● Click on this logo
● Choose from the side menu WordPress or any other CMS
● Follow the basic CMS setup instructions

1. Important role Of PHP And MySQL

You create your website with HTML, CSS and Java on static websites that require
you to upload your created website files to another venue. If your company is a
hosting web service, an ISP, or a web server, this changes when using PHP. PHP is
a server-side scripting language to allow PHP scripts to be run as a plugin for your
web server. You need to download and install PHP so that this feature can be
performed.

2. Downloading PHP On your Own Web Server

If you use Linux, Mac OS or Windows, you will need your website's PHP and MySQL
database. If you're fortunate, your web host has PHP and MySQL installed, so you
won't have to install them.

3. Installing PHP And MySQL Together On Windows

One way to approach this double-sided method is to do so in the following way. You
have to:

● A one-in-all installer, Windows, Apache, MySQL, and PHP (WampServer),

is designed to make your work easier. This programme includes the new
software versions.
● Follow the simple installation procedure when you have it by defining the
location, mostly the default installation directory on your computer.
 ● Pick your default browser and only choose an executable file where your
browser is located if you don't use Firefox.
● APACHE HTTP, a popular PHP development web server, will pop up, and
Windows will be alerted to the installation of WampServer.
● Type the SMTP server address of your ISP and your email when asked.
● When the installation is complete, fire up WampServer and test it on the
top of your localhost menu item.

If you are a business owner with inadequate IT skills, it could be a daunting process,
and you can call on RemoteDBA.com web development experts to help you through
this process. Or register and create a website for people without web design or
coding skills using Easy Site Builder. Even your grandmother could make a website
so simple with Easysite.com. If you want to dirty your hands, you can choose the
longer installation per package listed below.

4. Individual One-package Installation

This method can take time, but it is the way to learn how PHP and MySQL work.
MySQL database installation doesn't matter because you are free to do so online
from the free MySQL Community Server.

The ties to Windows will be followed depending on whether you are using 64-bit or
32-bit.

Go through the installation process and configure the MySQL server to start the
configuration wizard.

For this detail, the installation wizard will request that you complete it as indicated;

● Type of server: machine creator.

● Database: Non-transactional only database.
● Connection limit: Decision Support (DSS) /OLAP.
● Options for networking: Allow strict mode choice.
● Default character set: Multilingualism best service.
● Windows option: Allow MySQL and make it easier to run. Windows
option
● MySQL's command prompt admin resources provide Bin Directory in
Windows Assistant.
● Security features: Change security features and learn these settings with
the wizard's aid before you learn the ropes.

You can verify if the wizard works by opening the Task Manager to see if the
software works.

5. Installing PHP Individually

Start by selecting the latest version of PHP and pick either the faster installer version
or a manually installed zipped package. You need to build your web server to create
a website powered by a database for certain Windows versions, like XP and Vista,
because they don't have Internet Information Services (IIS).

This is a bit complicated since hosting websites developed with PHP on IIS isn't
popular. Linux OS is more common to host PHP pages. Still, then again, if you are
operating in an environment where the organisation has invested in asp.net
technology, it is easier to use the website's IIS infrastructure.

The best way is to only go to install.txt and have a simple PHP installation process
that guarantees a working website.

It takes less than five minutes to set up a WordPress or other CMS database-driven
website. You will log in to your administrative area or dashboard and adapt your new
website once you have completed the above steps.

Of course, you can build a database-driven website without the help of a CMS if you
have the right technological skills. You must know how to:

● Build a static HTML, JavaScript and CSS website.

● Write code in a language on the server-side, such as ColdFusion and PHP
● Writing in SQL language programming
● Design / Construction of a database

If you have these credentials or can learn them, you can essentially build a database
website from scratch.

Topic 3. Data Organisation

Key takeaways from this topic...

1. Proper data organisation is key for quick access and manipulation within
dynamic web pages.
2. Structured data organisation enhances functionalities like search features and
content personalisation.
3. Documenting data schemas is important for ongoing development and
maintenance.
Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Principles of Data Organisation

Understanding the Significance of Data Organisation:

Data organisation is a systematic approach to structuring and arranging data within a

database or information system. This fundamental process influences the efficiency
with which data can be stored, retrieved, and managed, impacting the performance
and scalability of applications that rely on the data.

Categorisation and Structuring of Data:

Effective data organisation begins with categorisation, where data is classified into
logical groups that reflect the nature of the information and its use within the system.
Structuring involves defining how this categorised data is related and how it will be
stored, whether in tables, documents, or other storage formats.

The Role of Metadata:

Metadata, or data about data, plays a pivotal role in data organisation. It provides
context and aids in the discovery of data by detailing the data's purpose, format, and
interrelationships. Well-defined metadata is essential for accurate data retrieval and
management.

Strategies for Effective Data Organisation

Designing Schemas for Data Management:

A data schema outlines the organisation of data in a relational database and serves
as a blueprint for how the data is divided into tables, how it is linked, and the rules
governing these relationships. Careful schema design is crucial for ensuring data
integrity and optimising performance.

Data Normalisation Techniques:

Data normalisation is a technique used to minimise redundancy and dependency by

organising fields and table relationships. It involves creating tables and establishing
relationships according to rules designed to safeguard the data and make the
database more flexible by eliminating redundancy and inconsistent dependency.

Leveraging Data Indexing for Performance:

Indexing is a data organisation technique used to speed up the retrieval of records.

By creating indexes on tables based on retrieval needs, databases can perform
search queries much faster, thus enhancing the user experience.

Organising Data for Storage: Database Design

What are database websites, and how are they developed?

For much of its content, a database website or a database drive uses a database. In
other words, the material is not currently in a file on the server. Instead, it is
contained within the database in tables and columns.
There are two major website types: static and dynamic. A database website is a
dynamic site, while if the website is generated with and page in a file, it is called a
static Website on the server.

Using a website content management system

Most complex websites or databases have a content management system ( CMS).
WordPress is the most common CMS alternative and utilises the power of MySQL
databases.

The CMS allows the addition, subtraction and control of website material by the
Webmaster. The webmaster uses an administrative area or a Dashboard to add
pages, add posts, modify content, or remove content. You can upload photos, PDF
files and other documents via the admin area.

All material will be saved in a database, and other site-related files can be stored in a
file system. For example, in the archive, images and records can be saved, while
templates and plugins are saved in the file system.

What are the advantages of a website powered by a database?

● Database sites offer a range of advantages, including database website

dynamics
● Free move from hosting account to hosting account
● May add a shopping cart
● Attach a blog or forum quickly
● Build multiple user profiles with varying levels of access
● Ability to provide advanced visitor search functions
● Adjust the look and feature with plugins or extensions easily
 ● Can be combined with apps
● And a lot more!

Many webmasters choose to build a website because it removes the need to learn
how a website should write code. Novice users can only install a CMS, such as
WordPress, and customise the website look and features via the dashboard. This
simplifies the development of a professional website much more quickly.

Maintaining and Adjusting Data Structures

Maintaining Data Integrity Over Time:

As systems evolve and additional data requirements emerge, maintaining the

integrity of the organised data is critical. This may involve data migration, updating
schemas, and re-indexing to ensure the organisation remains optimal.

Adjusting Data Organisation to Meet New Needs:

Data organisation is not a static process; it requires flexibility to adjust as new

business needs or technologies emerge. Regular reviews of the data organisation
strategy can help to identify areas for adjustment or improvement.

Best Practices for Data Organisation:

Adhering to best practices in data organisation ensures that data remains accurate,
accessible, and secure. This includes consistent naming conventions, regular data
audits, and following data governance policies that dictate how data should be
handled.

By prioritising effective data organisation, businesses can ensure that their data
assets remain a robust foundation for their operations, supporting data-driven
decision-making, and facilitating efficient and scalable applications.
Module 9. Dynamic Content Creation
Module 9 introduces you to the dynamic world of Dynamic Content Creation. In this
module, you'll delve into the techniques and skills required to craft interactive web
pages that respond to user actions and change content on the fly, a staple of
modern, engaging websites.

Topics:

● Dynamic Page Development: Learn how to create web pages that can
display different content based on user interaction or other dynamic data
sources.
● Security Protocols Implementation: Study the critical security measures
that must be incorporated into dynamic content to safeguard user data and
interactions.
● Code Debugging: Develop the ability to identify and resolve issues in
your code to ensure smooth and error-free user experiences.

Learning Activities:

● Dynamic Web Page Workshop: Engage in hands-on exercises that will

teach you how to build dynamic web pages from the ground up.
● Security Implementation Review: Assess and improve the security
implementations in your dynamic content to meet industry standards.
● Debugging Sprint Challenge: Put your debugging skills to the test with a
series of challenges designed to simulate real-world programming
problems.

Subject Learning Outcomes

The material in this module relates to the following subject learning outcomes:

​ SLO 7: Generate and maintain dynamic web content, ensuring

cross-browser compatibility and security.

Student Expectations
During this module, you are expected to spend time working through the prescribed
material prior to attending class. This will enable a more valuable discussion to take
place in online tutorials or conferences, where you will be able to discuss concepts,
present ideas and explore information collaboratively in greater depth.

Accordingly, it is suggested that you allow:

4 hours for facilitated study. This includes guided facilitated study, watching or
attending course lectures (live or pre-recorded), responding to facilitator feedback.

8 hours for personal study. This includes reading through course material,
undertaking learning activities and exploring additional related resources.

Further Resources
The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Reading: PHP Multi Language Website Tutorial

Click to Access Resource

Links to an external site.

Reference: www.youtube.com. (n.d.). PHP Multi Language Website Tutorial: Create

Dynamic Website In 20 Minutes. [online] Available at:
https://www.youtube.com/watch?v=cgvDMUrQ3vA [Accessed 6 Dec. 2023].
Video: Debugging a Web application with VSCode

Click to Access Resource

Reference: www.youtube.com. (n.d.). Debugging a Web application with VSCode.

[online] Available at: https://www.youtube.com/watch?v=15GySiVfMB8 [Accessed 6
Dec. 2023].

Topic 1. Dynamic Page Development

Key takeaways from this topic...

1. Creating dynamic web pages involves techniques that allow content to

change in response to user actions and data updates.
2. Balancing static and dynamic content is crucial for optimal performance and
user engagement.
3. Server-side scripting is used to facilitate real-time content changes and
enhance user experience.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Introduction to Dynamic Web Pages

Defining Dynamic Web Pages

Dynamic content is defined as any digital or other online content that changes over
time based on data types. It can shift due to user activity or preference. Text, audio
and video formats are dynamic content examples.

Dynamic Content and Material, What Is It?

We, therefore, know that dynamic content is content that, over time, changes and
adapts. Let's dig a little deeper, though. This content adapts automatically to a
variety of pre-defined conditions, such as a user signal.

The material on the website will be adapted "dynamically" or in real-time, depending

on the way it is inserted and the CMS. In certain instances, different users can see
different content.
Dynamic content makes it possible for websites to respond differently to various
visitors to the website. The website uses numerous ways to detect user specifics and
functionality. These data are taken and matched appropriately with the relevant
material.

An online shop is a clear example of this. If you are a regular user or shopper for a
particular internet store, your website experience may be much different from that of
a first-time user.

The conversion processes depend on who is visiting. Newcomers will experience

something; experienced website users will experience something else.

It should be remembered that dynamic homepage content or any other dynamic

content with a static HTML website is nearly impossible to present. In PHP or
something else, an online shop or other dynamic content website structure typically
exists.

This material or content can be shown in various ways. The way it is normally viewed
depends on the type of website. But good examples of this material/content include
photographs, texts, videos, newsletters and other web content types.

Building Dynamic Web Pages

Integrating Front-End and Back-End Development:

Creating dynamic web pages involves a seamless integration of front-end and

back-end development. The front end uses HTML, CSS, and JavaScript to define the
structure and look of the web page, while the back end ensures the logic and
database interaction needed for the dynamic content.

Developing Responsive User Interfaces:

 User interfaces on dynamic web pages must be responsive and able to adapt to
different devices and screen sizes. This is achieved through responsive design
techniques, ensuring a consistent and accessible user experience.

Creating and Managing Content Dynamically:

Content Management Systems (CMS) like WordPress or Drupal can be used to

manage dynamic content. These systems provide a user-friendly interface for
non-technical users to create and update content without direct coding.

Testing and Optimising Dynamic Pages

Ensuring Cross-Browser and Device Compatibility:

Testing dynamic pages across various browsers and devices is crucial to ensure they
perform consistently. This involves identifying and fixing compatibility issues that
could affect how the page is rendered or functions in different environments.

Performance Optimisation:

The performance of dynamic web pages can be optimised by minimising server

response times, optimising database queries, and using techniques like lazy loading
for media assets. Tools like Google PageSpeed Insights can help identify
performance bottlenecks.

Security Considerations:
Dynamic pages often interact with user data and databases, making security a top
priority. Implementing measures such as input validation, output encoding, and using
prepared statements in database queries can protect against common vulnerabilities
like SQL injection and cross-site scripting (XSS).

Maintaining Dynamic Web Pages:

Maintaining dynamic web pages involves regular updates to the codebase, content,
and security patches. Keeping up with the latest development trends and security
threats is essential for the long-term health and success of dynamic web pages.

By mastering dynamic page development, web developers can create interactive,

engaging, and personalised experiences for users, fostering engagement and
delivering content that meets the dynamic needs of modern web browsing.

Topic 2. Security Protocols Implementation

Key takeaways from this topic...

1. Implementing robust security protocols is vital to protect dynamic web pages

from various cyber threats.
2. Secure coding practices are essential in the development of dynamic content.
3. Staying updated with web security measures is critical to safeguarding
dynamic content.

Learner Guide
The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Section 1: Understanding Web Security Protocols

The Necessity of Web Security:

Implementing security protocols is essential in protecting web applications from a

multitude of threats, including data breaches, unauthorised access, and various
forms of cyberattacks. These measures are not only crucial for safeguarding
sensitive information but also for maintaining user trust and ensuring compliance
with data protection laws.

Overview of Common Security Protocols:

Web security protocols encompass a range of measures, from Secure Socket Layer
(SSL)/Transport Layer Security (TLS) encryption for data in transit to Cross-Origin
Resource Sharing (CORS) policies for secure interaction between different domains.
Other protocols include Hypertext Transfer Protocol Secure (HTTPS) for secure
communication over a computer network and security headers like Content Security
Policy (CSP) to prevent cross-site scripting (XSS) and data injection attacks.

Identifying Appropriate Security Protocols:

The selection of appropriate security protocols depends on the specific needs and
vulnerabilities of the web application. Factors to consider include the type of data
handled, regulatory requirements, and the application's architecture.

Section 2: Implementing Security Protocols in Web Development

Incorporating SSL/TLS for Data Encryption:

Implementing SSL/TLS encryption ensures that data transferred between the web
server and client is encrypted, making it difficult for attackers to intercept or tamper
with the information. This is typically done by obtaining and installing an SSL
certificate from a trusted certificate authority (CA).
Setting Up HTTPS for Secure Communication:

Upgrading a website from HTTP to HTTPS involves not only installing an SSL
certificate but also configuring the web server to handle requests over the secure
protocol and redirecting all HTTP traffic to HTTPS to ensure all communications are
encrypted.

Implementing Security Headers and CSP:

Security headers are critical in protecting against common vulnerabilities. For

example, implementing a CSP can restrict resources the browser is allowed to load,
mitigating the risk of XSS attacks.

Section 3: Best Practices and Maintenance of Security Protocols

Regular Review and Updating of Security Certificates:

SSL certificates have an expiration date, and part of maintaining web security is
ensuring that these certificates are renewed and updated regularly. This prevents
security warnings that can erode user trust and potential exposure to
man-in-the-middle (MitM) attacks.

Ongoing Monitoring and Security Audits:

Web applications should be subjected to regular security audits and monitoring.

This includes using automated tools to scan for vulnerabilities, conducting
penetration tests to assess the strength of security protocols, and monitoring
network traffic for unusual patterns that could indicate a breach.

Training and Awareness for Developers:

Developers should be well-versed in the latest security threats and best practices.
Regular training sessions, workshops, and staying updated with security bulletins
can help maintain a high level of security awareness within the development team.
Adapting to Emerging Security Threats:

As new threats emerge, security protocols must evolve. This can involve
implementing additional layers of security, updating existing protocols, and staying
agile to integrate new security measures as needed.

By implementing and maintaining robust security protocols, web developers can

create a secure environment for users to interact with web applications, fostering a
safe online experience and safeguarding sensitive data against unauthorised
access and cyber threats.

Topic 3. Code Debugging

Key takeaways from this topic...

1. Systematic approaches to debugging ensure efficient identification and

resolution of issues in dynamic web pages.
2. Developer tools and debugging software streamline the troubleshooting
process.
3. Code reviews and pair programming are effective practices for minimising
bugs in dynamic content.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.
Section 1: The Essentials of Code Debugging

Debugging is a crucial part of the development process, involving identifying,

isolating, and fixing bugs or errors in the code. It is an investigative activity that not
only fixes immediate problems but also uncovers underlying issues that could lead to
future errors.

Understanding the Debugging Process:

The debugging process typically starts with replicating the issue, understanding its
nature through careful analysis, and then applying a logical method to pinpoint the
source of the error. This might involve stepping through the code, examining variable
states, and checking for logical errors or incorrect assumptions.

Common Tools and Techniques for Debugging:

Developers have a range of tools at their disposal for debugging, including integrated
development environment (IDE) debuggers, browser developer tools for web
development, and logging utilities. Techniques such as print statement debugging,
breakpoints, and unit tests are also commonly used to facilitate the process.

Section 2: Strategies for Effective Debugging

Adopting a Systematic Approach to Debugging:

Effective debugging requires a systematic approach to avoid random and potentially

time-consuming trial and error. This approach is methodical, involving creating
hypotheses about the source of the error and testing these hypotheses in a
controlled manner.

Implementing Defensive Programming Practices:

Defensive programming is a proactive measure that can make debugging easier. By

anticipating possible errors or misuses of the code and including checks and
balances, developers can ensure that the code behaves reliably under a variety of
unexpected conditions.
Collaborative Debugging and Peer Reviews:

Collaboration can be a powerful tool in debugging. Peer reviews and pair

programming sessions allow multiple sets of eyes to examine the code, bringing
different perspectives and experiences to the problem-solving process.

Section 3: Mastering Debugging and Quality Assurance

Refining Debugging Skills Over Time:

As with any skill, mastery in debugging comes with time and experience. Keeping
abreast of best practices, learning from past debugging experiences, and staying
familiar with the latest tools can enhance a developer's ability to efficiently resolve
issues.

Quality Assurance and Testing Integration:

Quality assurance (QA) and testing go hand in hand with debugging. Automated
tests, continuous integration, and deployment (CI/CD) pipelines, and test-driven
development (TDD) are practices that help catch bugs early in the development
cycle, reducing the need for intensive debugging later.

Creating a Bug-Free Development Environment:

While a completely bug-free environment is an ideal, striving for this goal can
significantly reduce the frequency and severity of bugs. This involves writing clear,
maintainable code, adhering to coding standards, and leveraging code analysis tools
to detect potential issues proactively.

Ongoing Learning and Knowledge Sharing:

Debugging is a learning process, and sharing knowledge within the developer

community is beneficial. Documenting bugs and their solutions, writing about
debugging experiences, and participating in developer forums can contribute to
collective knowledge and help improve debugging practices across the industry.
By honing debugging skills and integrating them within the broader context of quality
assurance and testing, developers can significantly enhance the reliability and
performance of the web applications they create, leading to better user experiences
and more robust digital products.
Module 10. Functionality Testing and Feedback
Welcome to Module 10, where we venture into the critical phase of Functionality
Testing and Feedback. This module is designed to hone your skills in evaluating and
refining web functionalities to ensure a seamless and efficient user experience. You
will learn the importance of rigorous testing methods and the art of incorporating
feedback to enhance web performance across different browsers and devices.

Topics:

● Cross-Browser Testing: Understand the nuances of ensuring your

website functions correctly across various web browsers.
● Functionality Evaluation and Amendments: Learn to critically evaluate
web functionalities and make necessary amendments to optimise
performance.
● Dynamic Content Verification: Ensure that your dynamic content
behaves as expected and delivers the intended experience to users.

Learning Activities:

● Compatibility Testing Exercise: Conduct thorough tests to assess the

compatibility of web functionalities across different browsers.
● Feature Review and Revision Task: Review current features for their
effectiveness and apply revisions to improve their performance.
● Content Verification Workshop: Participate in workshops focused on
verifying that the dynamic content on your web pages operates flawlessly.

Subject Learning Outcomes

The material in this module relates to the following subject learning outcomes:

​ SLO 7: Generate and maintain dynamic web content, ensuring

cross-browser compatibility and security.

Student Expectations
During this module, you are expected to spend time working through the prescribed
material prior to attending class. This will enable a more valuable discussion to take
place in online tutorials or conferences, where you will be able to discuss concepts,
present ideas and explore information collaboratively in greater depth.

Accordingly, it is suggested that you allow:

4 hours for facilitated study. This includes guided facilitated study, watching or
attending course lectures (live or pre-recorded), responding to facilitator feedback.

8 hours for personal study. This includes reading through course material,
undertaking learning activities and exploring additional related resources.

Further Resources
The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Reading: Make Every Web Experience Perfect, On Any Browser or Mobile Device

Click to Access Resource

Reference: smartbear.com. (n.d.). Browser & Mobile Testing for Apps | BitBar from
SmartBear. [online] Available at: https://crossbrowsertesting.com [Accessed 6 Dec.
2023].

Video: Web pages, Websites, and Web Applications

Click to Access Resource

Reference: www.youtube.com. (n.d.). Web pages, Websites, and Web Applications.
[online] Available at: https://www.youtube.com/watch?v=ylbQrYhfa18 [Accessed 3
Nov. 2022].

Topic 1. Cross-Browser Testing

Key takeaways from this topic...

1. Cross-browser testing ensures dynamic web pages function consistently

across different browsers and devices.
2. Utilising automated tools and platforms simplifies the process of
cross-browser testing.
3. Documenting browser-specific issues and resolutions is an invaluable
resource for development teams.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Introduction to Cross-Browser Testing

Importance of Cross-Browser Testing:

Cross-browser testing is essential to ensure that web applications provide a

consistent experience across different browsers and devices. Given the variety of
browser engines, versions, and configurations users may have, cross-browser
testing helps verify that your web application works correctly and looks as intended
on all platforms.

Understanding Browser Compatibility:

Browser compatibility issues can arise due to differences in how browsers render
HTML, CSS, and JavaScript. These discrepancies can affect the layout, functionality,
and performance of web applications. Understanding these variations is crucial for
developers to ensure their web applications can reach the widest possible audience
without degradation in quality.

Tools and Strategies for Cross-Browser Testing:

There are several tools and strategies available for cross-browser testing, from
manual testing on different devices to automated testing tools and services like
BrowserStack or Sauce Labs that simulate a wide range of browser environments.

Multi-platform Web Functionality Testing

Cross-browser testing ensures that the websites and mobile apps you create operate
on an appropriate number of web browsers. As a web designer/developer, you are
responsible for ensuring that your projects not only run but that they function for any
user, regardless of the browser, computer or other support tools they use. You must
think about:

● Different web browsers other than the one or two that you regularly use on
your computers, including some slightly older browsers that some people
still use that do not support the new, most shiny CSS and JavaScript
capabilities.
● Different devices with specifications, from the newest tablets and
smartphones to smart TVs, from inexpensive tablets to even older
handsets that can run browsers with minimal capabilities.
Disabled people use the Web through help technologies such as screen
readers or not using a mouse (some people use a keyboard only).

Note, because your website works on your MacBook Pro or high-end Galaxy Nexus
that doesn't mean it will work for all your users; there's a lot of testing ahead!

Here are a few pieces of vocabulary to clarify. To start with, we always mean that
when we speak about sites "working cross browsers," they should have an
appropriate user experience across various browsers. It might be OK for a site not to
have the same experience on all browsers as long as the core features are in some
way available. You may get something animated, 3D, and shiny on modern
browsers; you may get a flat graphic reflecting the same details on older browsers.
As long as the owner of the website is satisfied, you have done your job.
On the other hand, it is not right for a platform to function well for visually disabled
users or visually impaired users to be entirely inaccessible because the screen
reader program can not read any of the information contained within.

Second, when we say, "Through an appropriate number of web browsers," we don't

mean 100% of the world's browsers; that is practically impossible. You should make
some educated decisions about the browsers and devices your customers are using.
(See Gotta test 'em all,' but you can't guarantee it all in the second article in the
series. As a web developer, you need to compromise on several browsers and
devices that the code undoubtedly requires to work for the site owner. In addition,
you need to defensively code to give other browsers the best chance of utilising your
content. This is one of the great web development challenges.

Optimising and Maintaining Cross-Browser Compatibility

Addressing Cross-Browser Issues:

When issues are identified during cross-browser testing, they should be prioritised
based on their impact on the user experience. Fixes may involve CSS tweaks,
JavaScript polyfills, or alternative approaches to layout and functionality that are
more widely supported across browsers.

Continuous Integration and Deployment (CI/CD) Pipelines:

Incorporating cross-browser tests into CI/CD pipelines ensures that compatibility is

verified automatically with every code change. This practice helps catch issues early
and reduces the likelihood of cross-browser issues making it to production.

Monitoring and Updating Browser Support:

Browsers are continuously updated, and new versions are released regularly.
Keeping track of these changes and updating support for the latest versions is
essential for maintaining cross-browser compatibility.

Learning from Analytics and User Feedback:

Web analytics and user feedback can provide insights into the most popular
browsers and devices used by your audience. This data can help prioritise testing
efforts and allocate resources more effectively. Regularly reviewing analytics ensures
that your testing strategy remains aligned with actual user behaviour.

Documenting Cross-Browser Compatibility Issues:

Maintaining documentation of known cross-browser compatibility issues, along with
their resolutions, can be an invaluable resource for development teams. This
repository of knowledge aids in quicker identification and resolution of similar issues
in the future.

Best Practices for Future Development:

Adopting best practices such as progressive enhancement, where basic content and
functionality are provided for all browsers while advanced functionality is available for
more capable browsers, can significantly ease cross-browser compatibility
challenges. Additionally, adhering to web standards and using feature detection
rather than browser detection can lead to more robust and maintainable code.

By implementing a comprehensive cross-browser testing strategy and continuously

adapting to the evolving browser landscape, developers can ensure their web
applications deliver a consistent and high-quality experience to all users, regardless
of their choice of browser or device.

Topic 2. Functionality Evaluation and Amendments

Key takeaways from this topic...

1. Regular evaluation of web page functionality against user expectations and

project objectives is crucial for quality assurance.
2. Feedback loops are essential for prioritising and implementing amendments
to web page functionalities.
3. A/B testing is a useful tool for assessing the effectiveness of different dynamic
features and making informed adjustments.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.
Principles of Functionality Evaluation

Understanding the Importance of Functionality Evaluation: Functionality

evaluation is a critical phase in web development where the features and functions of
a web application are tested against defined requirements and user expectations.
This process ensures that the application performs as intended and meets the needs
of its users.

Key Aspects of Functionality Testing: Functionality testing involves assessing

each feature of the application for correctness, completeness, and usability. This
includes testing for correct implementation, interaction with other features, and
adherence to business logic and user scenarios.

Incorporating User Feedback: User feedback is invaluable in functionality

evaluation. It provides real-world insights into how the application is used and
perceived, highlighting areas for improvement from the user's perspective.

Strategies for Effective Functionality Assessment

Designing Test Cases and Scenarios: Effective functionality assessment requires

well-designed test cases and scenarios that cover all aspects of the application's
features. These should include typical user paths, edge cases, and error-handling
scenarios.

Automated Testing and Continuous Integration: Automated testing tools and

continuous integration (CI) processes can greatly enhance the efficiency and
coverage of functionality evaluation. They enable rapid testing of application features
after each code update, ensuring immediate feedback on the impact of changes.

Manual Testing for Nuanced Evaluation: While automated tests are efficient for
checking specific functionalities, manual testing is essential for a more nuanced
evaluation, especially for user interface and user experience aspects. It allows
testers to simulate real user behaviour and identify issues that automated tests might
miss.

Xxx

Determine the scope of ICT web page functionality testing status evaluation and
performance indicators
You must understand your role and responsibilities to carry out the ICT web page
functionality testing evaluation. The ICT web page functionality testing status scope
should also be properly defined with evaluation and performance indicators. The
evaluation process must be discussed with the client, and only upon their approval,
the ICT web page functionality testing evaluation process should be commenced.

The objective of any ICT web page functionality testing evaluation and assessment
must be agreed upon between the involved parties and stakeholders. This
agreement between the involved parties and associated stakeholders will assist you
in determining the scope of your ICT web page functionality testing evaluation and
performance indicators.

The evaluation may serve several purposes, some of which may overlap. Evaluation,
for example, can be used to:

● Direct ongoing quality enhancement and modification decisions

● Find emerging needs, and gaps and set up the priorities
● Guide decisions on whether to proceed, make required changes or close a
project
● Enhance accountability and transparency in the reporting or
documentation process
● Inform strategy and practise from those outside the company by adding to
the wider basis of evidence about what works.

What does ICT web page functionality testing evaluation look for?

● Confirming the ICT web page functionality testing is effective

● Work according to set standards and guidelines
● All operations run smoothly and effortlessly
● The use of the ICT web page functionality testing benefits the organisation
in terms of saving time and resources

The system works according to the user's needs and requirements

Confirming the ICT web page functionality testing is easy-to-use

● Does the system have a user-friendly interface?

● Can employees use the ICT web page functionality testing easily and
effortlessly?
● Can the system be used with minimum training?
● Can the system be used with minimum supervision?
● Can the employees easily understand how to use the system?

Confirming the ICT web page functionality testing is appropriate

● Does the system effectively and efficiently work to produce desired

results?
 ● Are the clients happy and satisfied with the ICT web page functionality
testing?
● What are the gaps when using the ICT web page functionality testing, and
how to fill any gaps identified or fix the errors encountered?

Client needs and requirements

The clients’ needs and requirements should be taken into account when assessing
and evaluating the ICT web page functionality testing. The needs and requirements
analysis should include all the discussed and agreed-upon factors and parameters.

The client's needs and requirements may include but are not limited to the following:

● The website system is functioning properly with minimum errors

● The website system is doing what it is supposed to do
● The website system performance is assessed and evaluated according to
the set standards and requirements
● The employees of the organisation can use the ICT web page functionality
testing without any hassles or troubles

Amending Functionality Post-Evaluation

Prioritising Issues for Amendments: After functionality evaluation, issues should

be prioritised based on their impact on the overall user experience and business
objectives. Critical bugs that affect functionality or cause data loss should be
addressed immediately, while minor usability issues can be scheduled for later
updates.

Implementing and Testing Amendments: Amendments to functionality should be

implemented in a controlled manner, with changes thoroughly tested before
deployment. This includes re-running automated tests and conducting regression
testing to ensure that the amendments have not adversely affected other parts of the
application.

Feedback Loops and Iterative Improvement: Functionality evaluation and

amendment is an iterative process. Establishing feedback loops where developers,
testers, and end-users can continuously provide input ensures that the application
evolves in line with user needs and technological advancements.

Documenting Changes and Learnings: Documenting the changes made and the
learnings from each evaluation cycle is crucial for future reference and continuous
improvement. It helps in maintaining a history of decisions and rationales that can
inform future development cycles.
By systematically evaluating and amending the functionality of web applications,
developers ensure that their products not only meet the initial requirements but also
adapt and improve over time, enhancing user satisfaction and application value.

Topic 3. Dynamic Content Verification

Key takeaways from this topic...

1. Verification processes are necessary to ensure dynamic content is correctly

displayed and interacts as intended with user inputs.
2. Testing the responsiveness of dynamic content is critical to maintaining a
seamless user experience.
3. End-to-end testing simulates real-world usage scenarios, providing a
comprehensive assessment of dynamic content's functionality.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Understanding Dynamic Content Verification

The Importance of Verifying Dynamic Content: Dynamic content verification is a

crucial aspect of web development, ensuring that content that changes in response
to user interactions or data updates displays correctly and functions as intended.
This process is vital for maintaining the integrity and reliability of web applications.

Characteristics of Dynamic Content: Dynamic content can range from

user-specific information displayed after login to real-time data feeds, interactive
forms, and personalized user interfaces. The dynamic nature of this content means it
can change frequently and must be rigorously tested to ensure accuracy and
functionality.
Tools and Techniques for Dynamic Content Testing: Various tools and
methodologies are used for dynamic content verification, including automated testing
frameworks, browser developer tools, and manual testing procedures. These tools
help simulate user interactions and monitor the application's response.

Effective Strategies for Testing Dynamic Content

Automated Testing of Dynamic Elements: Automated testing tools like Selenium

or Puppeteer can simulate user interactions with dynamic content, verifying that it
behaves as expected across different scenarios. Automated tests are essential for
efficiently handling the vast number of potential interactions with dynamic elements.

Manual Testing for User Experience Evaluation: Manual testing allows

developers and QA professionals to experience the application from the user's
perspective, providing insights into usability and design effectiveness that automated
tests may not capture.

Incorporating User Feedback in Testing: Gathering and incorporating user

feedback is crucial for dynamic content verification. Users can provide valuable
insights into how content is experienced in real-world scenarios, highlighting issues
that developers might not have anticipated.

Validate Dynamic Content Functions

Each time you visit a dynamic web page, you will notice a change in its content and
layout; this is why they are called dynamic pages. These pages offer a more
functional UI without reloading the page. Dynamic web pages form the basis of web
applications because of this feature. DHTML (Dynamic HyperText Markup
Language) and Ajax (Asynchronous JavaScript and XML) are the most common
technologies for building dynamic web pages.

Since the content of dynamic web pages is constantly modified, the page's content
can alter the hierarchy of objects and properties between tests and even during a
single test run. This can cause errors when your tests are executed.

Approaches to finding objects on dynamic pages

On dynamic web pages, objects are possible to build, alter, and delete. The object
hierarchy is updated as a result of user behaviour (for example, opening the pop-up
form for editing data, grouping a grid by a certain column, etc.). Because the web
pages' object hierarchy dynamically shifts, you have to make sure the objects you
want exist. You do this in one way or another:

● Waiting for an Object

Typically, when checking web pages, you check that a page is completely
loaded to ensure all objects are visible. TestComplete offers a range of
methods that allow you to wait before you load a Web page like ToUrl,
Wait and WaitPage. When you load pages in a Web browser while logging
a test, TestComplete automatically records the Wait operations and can
add the necessary Wait operations to the tests you created manually.

The above methods wait until the original HTML code of the page is loaded from the
server to the client before the next operation is carried out. However, scripts in
dynamic web pages may either load additional content or alter the existing content
after the page has been loaded. If you don't have the requisite web page object yet,
your test will fail.

You must verify that the desired web objects exist before any operations are carried
out to solve the problem. You can change your experiments to wait for the desired
items to be accessible before working with them.

● Use Name Mapping for Object Recognition

Name Mapping is the most effective way to solve the problem by naming
dynamic objects. When you add an object to the Name Mapping registry,
you define requirements used in the application to uniquely identify the
object. If TestComplete detects a custom name during test playback, it
calls the NameMapping engine to check the object tree, and when this
object is identified, it is returned to the test engine.
● Searching for an Object
Another way to treat dynamic objects is to scan for objects internally using
certain parameters. TestComplete offers a collection of search methods to
locate the desired object on a web page. For instance, you can search for
a connection through its text, find a specific type of input field, etc.

You may define the scope and depth of the search by Test Full search methods. You
may increase the search depth to search the entire web page or restrict the search
depth in a container object that contains the desired web object. One object or all
objects that fulfil the defined requirements may also be found.

Dynamic and Static Testing and Monitoring Processes

Not executed under Static Testing Code. Instead, the code, requirement documents
and design documents are checked manually for errors. The word "static," therefore.

The primary aim of this test is to increase software quality by detecting errors at the
early stages of the development cycle. This evaluation is often referred to as
non-execution or checking.
Static checking requires manual or automated document tests. This analysis takes
place early in the STLC during the initial testing process. It reviews job documents
and offers feedback on analysis

The following job document may be:

● Requirements required
● Design document
● Code/ Source
● Test plans
● Test cases
● Test scripts
● User Documents or help files
● Content of the web page

The code is executed under Dynamic Testing. It governs the software system's
functionality, the use of memory / CPU, and overall system performance. That is why
the word "Dynamic."
The main aim of this test is to ensure that the software product complies with
business requirements. This test is often referred to as execution or validation
testing.

Dynamic tests perform the program and verify the output with the predicted
performance. Dynamic testing is carried out at all test stages and can be black or
white.

Maintaining the Quality of Dynamic Content

Regular Updates and Regression Testing: As web applications evolve, dynamic

content must be regularly updated and tested to ensure continued functionality and
relevance. Regression testing ensures that new updates do not break existing
dynamic content.

Performance Considerations for Dynamic Content: Dynamic content can impact

the performance of a web application. Load testing and performance monitoring are
important to ensure that dynamic elements do not adversely affect the application's
speed and responsiveness.

Security Aspects of Dynamic Content: Dynamic content often involves server-side

processing and database interactions, making security a major consideration.
Ensuring that content is securely generated and displayed, protecting against
vulnerabilities like SQL injection and cross-site scripting, is crucial.
Documentation and Best Practices: Maintaining comprehensive documentation of
dynamic content, including its sources, dependencies, and testing protocols, aids in
its management. Adhering to best practices in coding and testing dynamic content
ensures its long-term effectiveness and integrity.

By rigorously verifying dynamic content, developers can ensure that their web
applications remain functional, user-friendly, and secure, providing a seamless and
engaging experience for all users.

Static Testing Vs Dynamic Testing

Static Testing Techniques

● Informal Reviews: This is one of the sorts of reviews in which there is no

formal process followed to identify problems in the document. Under this
strategy, you simply go over the document and make a few informal
remarks about writing it.
● Technical Evaluations: A team of your peers will analyse the technical
specification of the software product and determine whether or not it is
appropriate for the project's needs. They are looking for any anomalies
between the specifications and standards that have been followed. This
assessment focuses mostly on the technical documents associated with
the product, such as the Test Strategy, Test Plan, and requirement
definition documentation.
● Walkthrough: The author of the work product walks his team through the
process of creating the product. If there are any questions, participants
can ask them. The author is in charge of the meeting. The scribe makes a
note of the comments from the review.
● Inspection: This meeting is primarily to identify problems, and a certified
moderator moderates them. This review is a formal sort of review in which
the problems are discovered using a precise process. Reviewers are
provided with a checklist to use in evaluating the work products. They
make a note of the problem and inform the participants that they must
correct their mistakes.
● Static Code Review: This is a systematic review of software source code
without actually running the code. It examines the syntax of the code,
coding standards, code optimisation, and other factors. White box testing
is another title for this type of testing. This evaluation can be carried out at
any stage during the development process, including after completion.
Dynamic Testing Techniques

● Unit Testing: The developers test individual units or modules as part of

the Unit Testing process. It entails developers putting their code through its
paces.
● Integration Testing: The developers gather and check individual modules
as part of the integration testing process. Once the modules have been
integrated, the goal is to determine whether or not they are performing as
planned.
● System Testing: System Testing is performed on the entire system by
determining whether or not the system or application fits the requirements
specified in the requirement specification document.
Also included in dynamic testing are non-functional tests such as
performance and security tests, amongst others.

Static Testing Dynamic Testing

Testing that is carried performed without Testing is carried performed by executing the
executing the application. application.

This testing is done as part of the verification This testing is done as part of the validation
procedure. procedure.

The goal of Static testing is to prevent faults from It is the goal of dynamic testing to identify and
occurring. Static testing allows for the evaluation correct flaws.
of code and documentation.

Static testing allows for the evaluation of code Bugs and bottlenecks in the software system are
and documentation. discovered through dynamic testing.

Static testing consists of a checklist and a Dynamic testing entails creating test cases that
procedure that must be followed. are then executed.
This testing can be done before the compilation After the compilation process, dynamic testing is
process. carried out.
Static testing includes structural and statement Dynamic testing is performed on the code's
coverage testing, as well as other tests. executable file (also known as the executable
file of the code).
The cost of identifying and correcting faults is The cost of identifying and correcting faults is
lower. higher.
Because this process starts as the project is in its Because this process takes place after the
infancy, the return on investment will be development phase, the return on investment
substantial. will be low.
More customer evaluations and comments are More flaws are generally encouraged for
strongly suggested for high-quality products. high-quality production.
It is necessary to participate and attend Meetings are required less frequently in
numerous meetings. comparison.
Module 11. Presentation and Finalisation
Welcome to the final stretch – Module 11's Presentation and Finalisation module,
where the culmination of your hard work is showcased and refined for delivery. This
concluding module is pivotal, as it focuses on presenting your dynamic content
creation and integrating vital feedback to polish and finalise your project.

Topics:

● Dynamic Page Presentation: Learn the strategies for effectively

presenting your dynamic pages to stakeholders and clients, ensuring
clarity and impact.
● Feedback Integration: Master the process of integrating constructive
feedback into your project, which is essential for the finalisation process.
● Finalisation and Sign-off: Understand the protocols and best practices
for project sign-off, ensuring all elements meet the established
requirements and quality standards.

Learning Activities:

● Presentation and Feedback Session: Engage in sessions where you will

present your work and gather feedback for refinement.
● Integration Feedback Workshop: Participate in workshops designed to
skillfully integrate feedback into your project, enhancing its final form.
● Project Closure and Approval Meeting: Learn to navigate the final
project closure and approval meetings, solidifying a successful end to the
development cycle.

Subject Learning Outcomes

The material in this module relates to the following subject learning outcomes:

​ SLO 7: Generate and maintain dynamic web content, ensuring

cross-browser compatibility and security.

Student Expectations

During this module, you are expected to spend time working through the prescribed
material prior to attending class. This will enable a more valuable discussion to take
place in online tutorials or conferences, where you will be able to discuss concepts,
present ideas and explore information collaboratively in greater depth.

Accordingly, it is suggested that you allow:

4 hours for facilitated study. This includes guided facilitated study, watching or
attending course lectures (live or pre-recorded), responding to facilitator feedback.

8 hours for personal study. This includes reading through course material,
undertaking learning activities and exploring additional related resources.

Module 11. Presentation and Finalisation

Further Resources

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Video: Dynamic web pages without Javascript

Click to Access Resource

Links to an external site.

Minimise Video
Reference: www.youtube.com. (n.d.). Dynamic web pages without Javascript.
[online] Available at: https://www.youtube.com/watch?v=eEVRapHQFKI [Accessed 6
Dec. 2023].

Video: What happens when you load a Webpage?

Click to Access Resource

Reference: www.youtube.com. (n.d.). What happens when you load a webpage?

[online] Available at: https://www.youtube.com/watch?v=OE8EvaOPkZ4 [Accessed 6
Dec. 2023].

Topic 1. Dynamic Page Presentation

Key takeaways from this topic...

1. Presenting dynamic pages effectively to stakeholders highlights the

interactivity and user experience enhancements.
2. Tailoring presentations to demonstrate how dynamic elements meet business
objectives and cater to user needs is essential.
3. Preparing for stakeholder feedback involves setting clear expectations about
dynamic elements' functionality.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.
Essentials of Dynamic Page Presentation

Understanding Dynamic Page Presentation: Dynamic page presentation refers to

the way web pages dynamically display content and interact with users based on
various factors like user input, data changes, or interactions. It's a key aspect of
creating responsive, interactive, and engaging web applications.

Importance of User-Centric Design: The design of dynamic pages should focus on

user experience, ensuring that content is presented in a clear, accessible, and
engaging manner. This involves considering aspects like layout, navigation, loading
times, and interactive elements.

Technologies Enabling Dynamic Presentation: Technologies such as HTML5,

CSS3, JavaScript, and various frameworks and libraries (React, Angular, Vue.js) are
commonly used to create dynamic and responsive web pages. These technologies
provide the tools to effectively manage and present content that changes in
real-time.

Developing Dynamic Web Pages

Implementing Responsive Web Design: Responsive web design ensures that web
pages render well on a variety of devices and window or screen sizes. This is
achieved using flexible grids and layouts, images, and CSS media queries.

Enhancing Interactivity and Engagement: Dynamic pages can be made more

interactive and engaging through the use of animations, transitions, and interactive
elements like forms and sliders. JavaScript and libraries like jQuery are often used to
enhance these aspects.

Optimising for Performance: Dynamic pages can be resource-intensive, so

optimisation is crucial. Techniques like lazy loading, image optimisation, and
minimising the use of blocking JavaScript can improve loading times and overall
performance.

Testing and Refining Dynamic Page Presentation

Cross-Browser and Device Testing: It's important to test dynamic pages across
different browsers and devices to ensure consistent performance and presentation.
This involves checking for layout issues, functionality, and performance across
various platforms.

User Testing and Feedback Incorporation: Conducting user testing sessions and
gathering user feedback are essential in refining the presentation of dynamic pages.
This helps in understanding how real users interact with the page and what
improvements can be made.

Accessibility Compliance: Ensuring that dynamic pages are accessible to all

users, including those with disabilities, is crucial. This includes following Web
Content Accessibility Guidelines (WCAG) and ensuring that interactive elements are
accessible via keyboard and screen readers.

Continuous Improvement and Updating: Dynamic page presentation should be

continuously monitored and updated in response to user feedback, technological
advances, and evolving design trends. This ongoing process ensures that the web
application remains relevant, engaging, and user-friendly.

By mastering dynamic page presentation, web developers and designers can create
web pages that not only function efficiently but also provide a rich and enjoyable user
experience, catering to the diverse needs and expectations of modern web users.

Topic 2. Feedback Integration

Key takeaways from this topic...

1. Collecting and integrating stakeholder feedback is vital for the iterative

development of dynamic web pages.
2. Prioritising feedback based on its impact on user experience and technical
feasibility ensures effective improvements.
3. Using feedback as a driving force for continuous development enhances the
quality and relevance of dynamic content.

Learner Guide
The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Understanding the Role of Feedback in Web Development

Importance of Integrating User Feedback: Feedback integration is a critical aspect

of web development, providing insights directly from the users which can significantly
enhance the functionality, usability, and overall user experience of web applications.
It involves gathering, analysing, and applying feedback to drive improvements.

Types of Feedback in Web Development: Feedback can come in various forms,

including user testing comments, customer support tickets, social media interactions,
and usage data analytics. Each type offers unique insights into different aspects of
the web application.

Setting Up Effective Feedback Channels: Establishing effective channels for

collecting feedback, such as surveys, feedback forms, social media platforms, and
direct user interviews, is crucial for ensuring a steady stream of valuable insights.

Strategies for Effective Feedback Integration

Analysing and Prioritising Feedback: Once collected, feedback must be carefully

analysed to identify common themes, potential improvements, and urgent issues.
Prioritising feedback based on factors like impact, feasibility, and alignment with
business goals is crucial for effective integration.

Incorporating Feedback into the Development Cycle: Feedback should be

integrated into the development cycle as part of an iterative process. This includes
planning for changes, implementing them in the development pipeline, and then
testing and deploying updates.

Balancing User Feedback with Project Goals: While user feedback is invaluable,
it’s essential to balance it with the overall goals and vision of the project. Not all
feedback will be applicable or beneficial in the long term, and it's important to discern
which suggestions align best with the project's objectives.

Maintaining a User-Focused Approach Through Feedback

Continuous Improvement Through Ongoing Feedback: Feedback integration is
not a one-time activity but a continuous process. Regularly seeking and integrating
feedback ensures that the web application evolves in line with user needs and
expectations.

Measuring the Impact of Feedback-Driven Changes: After implementing changes

based on feedback, it’s important to measure their impact. This can be done through
follow-up user testing, monitoring usage metrics, and soliciting direct user opinions.

Creating a Culture of Openness and Responsiveness: Developing a culture that

values user feedback and is responsive to user needs is key. Encouraging team
members to actively seek out and consider feedback can lead to more innovative
solutions and a more user-centric product.

Documenting Feedback and Changes: Maintaining documentation of feedback

received and the changes made in response helps track the evolution of the
application and provides valuable insights for future development decisions.

By effectively integrating user feedback into the web development process,

developers and designers can create applications that not only meet but exceed user
expectations, fostering enhanced engagement, satisfaction, and loyalty.

Seeking Feedback on Dynamic Web Page Presentation

Feedback allows you to understand yourself, your products and your services in a
better manner. It allows you to see the world from a different perspective, usually
from the user's viewpoint, to correct the deviation and learn better and understand
more. Furthermore, feedback makes the web application excellent and your job
easier. Whether or not you adopt specific agile development practices, early and
regular feedback is one of the main factors that make you more effective.

As with traditional web apps, user input can be received in two main ways: direct and
indirect input. Direct feedback is collected by enabling users to explicitly state their
thoughts on the app through questionnaires or pop-up boxes. Indirect reviews focus
on user behaviour analysis, such as how they navigate the user interface, how much
time they spend on a website, their click frequency, user retention and active times,
etc. Feedback from customers will help you understand the features to add, the
features to get rid of and where your growth efforts are focused. It's a brainer to add
to the marketing strategy.

Request Ratings and Reviews

The best way to receive feedback is to ask for feedback on the app. On iOS and
Android, developers can schedule a user application for an assessment and leave
comments as a summary.
The main thing is to find the right moment to inquire. Many web applications
automatically request ratings and feedback, but it may upset consumers, as they are
not yet familiar enough with the app to make a case. Web app reviews are valuable
to potential users and impact how the app is quickly found in the App Store or the
Google Play Store.

Using In-App Net Promoter Score Surveys (NPS)

Net Promoter Score (NPS) is a way to assess the aggregate feelings of consumers
and enables customers to provide individualised feedback. By calculating how many
people will recommend your product, you will learn the overall feeling of your
customer.

Savvy Support Communities

You concentrate on the web, but you shouldn't do anything in your app. One good
way to gather customer input is to build off-the-counter forums where users can
share their thoughts, ask for assistance and contact the team members and others.

Using the Beta Test Approach

Web app developers use beta testing to learn how consumers feel about their apps,
especially before full versions are released.

"Beta testing needs to be not large-scale or too complicated to be useful," writes

Mike Fine, Center Code Director, a beta test manager, on Quora. "A web developer
can test his users successfully as long as a strict beta process is practised and best
practises are applied."

You will gather potential trial users using a web form to request their email addresses
on your website. Then, while exploring your app, you will have a good way to contact
these people.

Acting on the Feedback Received

You must act upon it once you have input from your web users. If not, the consumers
will feel like their opinions don't matter and want to create a better experience.

Following and Tracking the Right Metrics

The web takes over the world, and you need to track the right metrics to succeed.
You need to track:
The number of products and services sold through the web application

● The number of visits

● Web time-on-site vs. your site
● Number of regular installations and sources
● Measure the performance of marketing campaigns.
Topic 3. Finalisation and Sign-off

Key takeaways from this topic...

1. A structured sign-off process confirms that all stakeholders agree with the
final version of the dynamic web pages.
2. Clear documentation and a final checklist are essential for a thorough review
before launching dynamic web pages.
3. The sign-off process should include a comprehensive review of performance
metrics and security features to ensure readiness for launch.

Learner Guide

The resources in this section are for further exploration. They are not required for
assessment, but provide additional information, which you may find interesting,
insightful or helpful.

Preparing for Project Finalisation

Understanding the Finalisation Process: Finalisation in web development is the

process of completing all development tasks, making final adjustments based on
feedback, and preparing the project for launch or delivery. This phase is crucial for
ensuring that the web application meets all requirements and is ready for
deployment.

Ensuring Completion of All Development Tasks: Before the finalisation phase, it's
essential to ensure that all development tasks have been completed. This includes
finishing all coding, integrating all features, and resolving any outstanding bugs or
issues.

Conducting a Final Review: A comprehensive final review of the project should be

conducted to confirm that all objectives have been met. This review covers
everything from functionality and performance to design and user experience.
Effective Strategies for Project Sign-Off

Setting Criteria for Sign-off: Clear criteria should be established for the project
sign-off. These criteria often include successful completion of all development tasks,
passing of all tests, approval of final designs, and satisfaction of all project
requirements.

Involving Stakeholders in the Sign-off Process: Engaging key stakeholders in the

finalisation and sign-off process is critical. This may involve presentations,
demonstrations, or review sessions with clients, management, and team members to
gain final approval.

Documenting the Project for Sign-off: Comprehensive documentation of the

project is essential for the sign-off. This documentation should include a summary of
the work completed, test results, user feedback integration, and any other relevant
information that supports the readiness of the project.

Obtain Sign-Off for Finalised Web Pages

Documentation

Documentation is a vital aspect of all deployment procedures and obtaining sign-off

from the required personnel. All application developers who have taken part know
how to document their work.

Reliable documentation is often a must for an application developer. The presence of

documentation helps to monitor all facets of an application and increases application
development quality. Its emphasis is on developing, retaining and passing
information to other developers, users and management. Good documentation
makes data readily accessible, offers a limited range of user input points, allows new
users to learn fast, simplifies the product and helps to reduce support costs. The key
components of the documentation are server environments, business rules,
information related to files and databases, troubleshooting, application installation
and code deployment.

Documentation should contain:

● Improvements to the application

● Improvements in hardware
● Results of the test conducted
● Overview of device-related information
 ● Things to note, improve, recommendations and suggestions

Post-Sign-Off Considerations and Maintenance

Planning for Deployment: Once the project is signed off, plans for deployment
should be finalised. This includes setting a launch date, preparing deployment
procedures, and ensuring that all necessary resources are in place.

Preparing for Post-Launch Support: Preparing for post-launch support is critical.

This may involve setting up a support team, establishing maintenance plans, and
creating a system for handling user feedback and bug reports.

Conducting a Project Retrospective: After project completion, conducting a

retrospective analysis is beneficial. This involves reviewing what went well, what
could be improved, and lessons learned throughout the project. The insights gained
can inform future projects and contribute to continuous improvement.

Celebrating Success and Team Acknowledgement: Finally, acknowledging the

hard work of the team and celebrating the project's success can be very motivating.
Recognition of team effort and achievements contributes to a positive work
environment and sets a positive precedent for future projects.

By thoroughly preparing for finalisation and ensuring a comprehensive sign-off

process, web development teams can confidently launch or deliver high-quality web
applications that meet all project goals and user expectations.
Module 12. Revision
Congratulations on reaching the final module. Throughout this journey, you've
explored diverse topics ranging from strategic planning and content structuring to
hierarchy development, navigation, and prototyping. This module is your opportunity
to solidify and integrate this extensive knowledge.

In this concluding module, your focus will be on:

Comprehensive Review: Delve into a thorough recap of all key concepts,

strategies, and methodologies encountered in the course. This is an essential step to
reinforce your learning and ensure a robust understanding of each element of web
architecture.

Final Assessment Preparation: You'll receive detailed guidelines and best

practices for preparing for the final assessment. This assessment is not just a test of
your knowledge but a showcase of the skills and insights you've acquired. It's your
chance to demonstrate how these concepts can be practically and effectively applied
in real-world scenarios.

Assessment notes

Assessment 3 is due at the end of this Module.

Subject Learning Outcomes

The material in this module relates to the following subject learning outcomes:

​ SLO 1: Analyse business goals to strategise and secure web development

initiatives.
​ SLO 2: Construct and manage website information architecture for optimal
content organisation.
​ SLO 3: Prototype navigational solutions focusing on user experience and
accessibility.
​ SLO 4: Perform usability tests and integrate client feedback for web
design approval
​ SLO 5: Evaluate technical requirements and apply compliant client-side
scripting.
​ SLO 6: Develop functional web templates and manage underlying
database structures.
 ​ SLO 7: Generate and maintain dynamic web content, ensuring
cross-browser compatibility and security.

Student Expectations

During this module, you are expected to spend time working through the prescribed
material prior to attending class. This will enable a more valuable discussion to take
place in online tutorials or conferences, where you will be able to discuss concepts,
present ideas and explore information collaboratively in greater depth.

Accordingly, it is suggested that you allow:

4 hours for facilitated study. This includes guided facilitated study, watching or
attending course lectures (live or pre-recorded), responding to facilitator feedback.

8 hours for personal study. This includes reading through course material,
undertaking learning activities and exploring additional related resources.