WELCOME TO RICHFIELD

HYBRID LEARNING

MODULE: WEB TECH 511

TOPIC 1: WEBSITES

| 1
WHAT IS A WEBSITE?

| 2
WHAT IS A WEBSITE?

• A website is a collection of several webpages linked together using hyperlinks. All the
webpages are linked under a single domain to uniquely identify the website. Websites are
the main source of connecting hyperlinks to different sections, and these sections may
further include other relevant webpages.

• Like a webpage, people can easily navigate any website using a web browser and entering
the domain address. Websites also follow the same programming languages for the
development, which are required for webpage development. However, website
development is complex and takes more time.

| 3
Website Types and Uses

• Government website – Provides different types of information and services and saves a
great deal of time. Example: www.USA.gov, www.australia.gov.au, etc.
• Education website – Websites of schools, universities, or independent academic
organizations that offer online courses and various learning materials. Example:
www.harvard.edu, www.coursera.org, etc.
• News portal – Makes readers updated with the latest news on the world scenario.
Example: www.CNN.com, www.nytimes.com, etc.

| 4
CONT…

• Blog website – Provide information on various topics. Example: www.sitesaga.com (our

website is a technology blog about building websites).
• Entertainment website – Allows watching movies, videos, listening to songs, playing
games, and so on. Example: www.rollingstone.com , www.netflix.com , etc.
• Social media site – Let users engage and interact with other users. Example:
www.facebook.com , www.twitter.com , etc.
• Search engine site – Help users search for things and get useful results. Example:
www.google.com , www.bing.com , etc.

| 5
Web Page

A web page is a hypertext document provided by a website and displayed to a user in a web
browser. A website typically consists of many web pages linked together in a coherent
fashion. The name "web page" is a metaphor of paper pages bound together into a

| 6
Characteristics

‒ The website is a cluster of different webpages and can include text, media, and other
content.
‒ The website is presented by a unique domain address.
‒ The website takes more time to develop than a webpage.
‒ The website is comparatively complex to develop.

| 7
Web Developer Skills

‒ HTML
‒ CSS
‒ Github
‒ NodeJs
‒ Mongo DB
‒ JavaScript
‒ React
‒ Bash
‒ PHP
‒ Express.js

| 8
Tools of the Trade

‒ Computer
‒ Google
‒ Text Editor
‒ Command Line Interface (CLI)
‒ Stack Overflow
‒ Git
‒ GitHub

| 9
Web Hosting Companies in South Africa

• https://www.domains.co.za
• https://www.registerdomain.co.za
• https://vehost.co.za
• https://www.inslyhost.co.za
• https://www.mashjoyhosting.com/

| 10
Characteristics of a User-Friendly Website

| 11
Well Designed and Functional

• Your site reflects your company, your products, your services and ultimately your brand. So
it’s important to be visually appealing, polished and professional. Allow white
space, uncluttered layouts with quality photographs and graphics look and let your
message shine through.

| 12
Easy to Use
• Site visitors are always in a hurry. Don’t make them work for information. User Experience
(UX) plays a key role in helping visitors use, understand and stay on your website. Create
obvious, logical navigation with clear hierarchy. Use consistent layouts and visual cues for
functionality across the site.

• Your site should satisfy both ‘searchers’—coming for something specific, and ‘browsers’—
just looking. Help users accomplish their tasks quickly with onsite search, and keep them
engaged by suggesting related content and minimizing dead ends.

| 13
Optimized for Mobile
• Today there are no excuses, your site must look great and work well on any platform. The
growth of mobile and tablet devices is not slowing down and you just don’t know what your
next visitor will be using. Optimizing for mobile will improve both the experience of your
visitors and your SEO Rankings.

| 14
Readily accessible contact and location
Your audience won’t chase you down. Make it easy to engage, offer multiple points of
contact: phone, email, social media and maybe an easy-to-use contact form. A Google map is
a bonus. Above all, ensure that this information is readily available on an easy-to-find contact
page—if not every page of your site.

| 15
Clear calls to action
If your site asks nothing of visitors, they will surely do nothing. What is the purpose of your
site? Is that purpose clear to visitors? Even informational sites want visitors to read and share
articles, follow the company on social media, download toolkits, join mailing lists or learn
more about the organization. Include an ask on each page.

| 16
Optimized for Search and the Social Web

It’s not enough to build a nice looking website that’s easy to use. It needs to earn traffic.
Otherwise, all that effort in design, UX and content development will be for naught. There are
hundreds of rules and guidelines for effective search engine optimization, so here are a few
to start with:

‒ Use page titles and meta tags on every page and alt tags on every image.
‒ Optimize content on your site to align with words real people search for.
‒ Use keywords appropriately in content and links.
‒ Use Cascading Style Sheets for layout and keep your HTML code clutter-free.

Make it as easy as possible for visitors to share your content. Social can drive large volumes
of traffic and positively impact your search ranking. Don’t forget obvious sharing links (even if
they are rarely used in actuality).

| 17
Web Development Team

| 18
Project manager

Every team needs a leader who will assume responsibility for making the most important
decisions and will pave the way to the team’s goal. In a web development team, the position
is known as a project manager, who’s in control of all the processes throughout the entire
project. Their work tasks include:

‒ Communication with a customer.

‒ Scheduling the project and providing time estimates.
‒ Planning out the necessary human resource efforts and task allocation.
‒ Coordination of joint work of other team members.

| 19
Project architect

A project architect can engage in the discussion with a customer. Based on the information
they receive, they can decide on the architecture most suitable for the customer’s business
needs. After approving the architecture, the architect can be employed part-time but remains
in charge of everything regarding frontend-backend-database data exchange and later – web
app integration.

| 20
UI/UX designers

Before web app design is implemented in code by front-end developers, it is manifested in

layouts and wireframes. And even before that, a thorough user experience research is
conveyed in order to understand the expectations of the future web app’s target audience.
Without this input, a web app can fail to address the needs of its users.

When looking for people who would fit this job, focus on analytical and psychological skills (=
ability to understand their users’ mindset), open-mindedness (= readiness to consider the
input from the outside), and, naturally, graphic design skills. Do not expect good UI/UX
designers to also be front-end developers. Although interconnected, UI/UX design and its
implementation are completely different tasks that require different skills.

| 21
Web developers

Since a web app always has at least two components – a back end and a front end – there
should be at least one developer responsible for each of the two. As we’ve already
mentioned in the previous section, front-end developers work with the layouts provided to
them by UI designers and transform static interface images into a fully functional web app
client-side. Their skills include programming in HTML5, CSS, JavaScript and work with front-
end libraries and frameworks (Bootstrap, Foundation, Semantic UI, Angular, React JS, etc.).

| 22
Back-end developers

Back-end developers are responsible for creating the server side of a web app and are
proficient in either PHP, Python, Java, .NET, or Ruby on Rails, as well as in the tools and web
app frameworks based on them. In any web development team, the main task of these
developers is to ensure that the back end handles the data it receives and sends back to the
front end in a correct, secure, and stable way.

| 23
Cont…

The duties of database developers in web app development are usually performed by back-
end developers, too, since a database is a part of the server-side. However, just as they
prefer to work with the tools in one specific programming language, back-end developers are
usually well-versed in one specific database. So, if you already have a database for the future
web app to be integrated with, make sure the back-end developers in your web development
team know how to work with it.

| 24
QA and testing specialists

Since the responsibility of a web quality assurance specialist is to ensure systematic

approach to QA on all development stages, it’s important to launch QA processes at the very
beginning of the project. Testing, however, is more closely tied to the product, so it makes
sense to have it started after the very first versions of the front end are available.

As testing specialists make sure the web app is fully functional on most of the popular
browsers and their different versions, many of the issues they stumble upon will be connected
with user experience and can potentially throw the project back. This possibility should be
taken into account during the initial scheduling by the project manager.

| 25
Challenge

1. What is the difference between webpage and website

2. Chose any webhosting company for the website project you have at hand and justify why you have
chosen to go with that web hosting company

| 26
Contact details

E-mail [email protected]

| 27
| 28
THANK
YOU

| 29