IT8078-Web Design and Management PIT/IV YEAR-IT

UNIT V PROJECT CASE STUDY

Using HTML, CSS, JS or using Opensource CMS like Wordpress, design and develop
a Website having Aesthetics, Advanced and Minimal UI Transitions based on the
project - Host and manage the project live in any public hosting

1. Using HTML, CSS, JS or using Opensource CMS like Wordpress:

Opensource CMS like Wordpress:

• A content management system is software that allows users without programming knowledge
to create, edit, and publish web content, such as text or multimedia elements, collectively via a
graphical user interface.

• Three central application types :

• The common division is

– Between Web Content Management,

– Blog Publishing/News, And

– Social Publishing/Communities.

Web content management:

– With classic web content management, the main emphasis is on creating and managing
online content.

– It’s usually necessary that multiple editors can have access to the backend, which in turn
requires complex sharing methods.

– It’s important that the system provides optimized processing for a website with
multimedia content.

– Other important factors include the management of user rights, full text search
capabilities, an efficient news management system, and the ability to present necessary
content in more than one language.

Blog publishing/news:

– This type of application, as the name suggests, is mainly focused on blogging.

Preparation of content, complex links, and sensible categorization, as well as the ability
to link to social media platforms and other web 2.0 functions, are particularly important.

1
IT8078-Web Design and Management PIT/IV YEAR-IT

– The abilities to interact with the reader and control the timing of publication entries can
also be important features to consider. Quickly and easily creating content is equally, if
not more important – ideally also being able to do so directly onto a mobile device.

Social publishing/communities:

– Developing online communities and making them available to a larger audience requires
a much larger range of functions than by a simple blog.

– This is mostly because online communities target active user groups instead of passive
readers.

– Ideally, content is created not only by the site’s operator, but by the members as well
(user-generated content).

– The basic system of social publishing solutions is usually modular in design and can be
extended by certain web 2.0 functions if necessary.

Proprietary software vs. open source:

– open source

• Numerous content management solutions by major project communities are

available open source.

• These are referred to as open source software. With open source CMS,
the system and the program code are freely accessible, and the source code can,
in principle, be viewed by anyone.

• Users are allowed to make changes, improvements, and extensions, and to

adapt the CMS to individual requirements.

– The opposite of open source software is proprietary software.

• Here, the CMS is developed by a particular company and distributed as a

commercial project.

• The use of proprietary management systems is usually associated with the

acquisition of a paid license. The source code is not available to users.

Market coverage of different content management systems:

CMS Market coverage

WordPress 64,2 %

2
IT8078-Web Design and Management PIT/IV YEAR-IT

Shopify 5,2 %

Joomla! 3,5 %

Squarespace 2,5 %

Drupal 2,4 %

Wix 2,4 %

Bitrix 1,7 %

Blogger 1,6 %

Magento 1,2 %

OpenCart 1,0 %

PrestaShop 0,8 %

TYPO3 0,5 %

Weebly 0,5 %

Adobe Dreamweaver 0,4 %

Bigcommerce 0,4 %

• The open source systems like WordPress, TYPO3, Joomla!, Drupal, Contao, and Neos are
currently the most popular standard solutions for professional website operation.

• Web hosting with a personal consultant

– Fast and scalable, including a free domain for the first year and email address, trust web
hosting from IONOS!

• Domain

• Wildcard SSL

• 24/7 support

3
IT8078-Web Design and Management PIT/IV YEAR-IT

WordPress:

• WordPress is the most-used open source CMS worldwide.

• Originally conceived as a blog system, several extensions are now available for the basic
installation, making it possible to upgrade the software to a fully functional content
management system.

• its low-effort, basic installation, WordPress is good for small and simply structured websites.

• Especially for bloggers, who want to provide their visitors with frequently changing content in
attractive layouts, WordPress is an effective CMS with an intuitive web interface.

• As the complexity of the online project increases, though, the user-friendliness of the software
significantly decreases.

Facts:

– More than 58,000 extensions and a huge range of free design templates

4
IT8078-Web Design and Management PIT/IV YEAR-IT

– “Five-minute installation” via Wizard

– Search engine friendly URLs

– Publishing and management tools for mobile solutions

• System requirements for WordPress 5.6

– Webserver: Every server with PHP and MySQL/MariaDB support (recommended:

Apache or NGINX)

– Middleware: PHP 7.4 or higher

– Database: MySQL 5.6 or higher, MariaDB 10.1 or higher

– Other recommendations: HTTPS support

Pros Cons

Large community CMS functions require additional

extensions

Minimal effort for installation and setup Plugins often have security gaps

Intuitive user interface Limited stability and performance

capability with high traffic

Simple integration of plugins and other More frequent security updates lead to
extensions additional administrative effort

How to Create and Sell Online Courses with WordPress (Step by Step):

• Selling online courses is a popular online business idea that you can start with a very small
investment and no technical knowledge.

• Here are the steps we will cover to help you create an online course with WordPress:

– What do you need to create an online course

– Setting up WordPress

– Install and setup MemberPress (LMS addon for WordPress)

5
IT8078-Web Design and Management PIT/IV YEAR-IT

– Creating your first online course

– Adding sections and lessons to your online course

– Restrict course access to membership plans

– Selling your online course

– Adding links to course sign up and registration page

What Do You Need to Create / Sell an Online Course?

• A course idea where you can help others learn new skills.

• A domain name. This will be your website’s address (Example, wpbeginner.com).

• A WordPress hosting account. This is where your website’s files are stored.

• An eLearning management add-on (also known as LMS plugin) to create and manage courses.

• Your undivided attention for the next 45 minutes.

Step 1. Setting up Your WordPress Website:

– There are two types of WordPress:

– WordPress.com vs WordPress.org.

– We recommend using WordPress.org because it gives you access to all the WordPress
features that you’ll need.

– To start a self-hosted WordPress.org website, you’ll need a domain name ($14.99 /

year), WordPress hosting ($7.99 / month), and SSL certificate to accept online payments
($69.99 / year).

– After purchasing hosting, head over to our guide on how to create a WordPress website
for step by step set up instructions.

– Step 2. Install and Setup MemberPress LMS Plugin

– Now that your WordPress website is ready, the next step is to install and setup a
Learning Management System add-on.

– This will allow you to create your online course and add it to your website.

– First, you need to install and activate the MemberPress plugin.

6
IT8078-Web Design and Management PIT/IV YEAR-IT

– MemberPress is the best LMS plugin for WordPress. It is an all-in-one solution with
complete course management, lesson plans, subscriptions, access control, payment
management, and more.

• Step 3. Creating Your First Course

– The course creation process in MemberPress makes it super easy to create and manage
online courses. It comes with a very easy to use course builder that allows you to create
courses, add sections, edit lessons, and more.

– First, you need to visit MemberPress » Courses page where you’ll see a button to install
and activate the courses addon.

7
IT8078-Web Design and Management PIT/IV YEAR-IT

Step 4. Adding Sections and Lessons to Your Course:

• MemberPress also makes it easy to quickly start adding course contents for each course without
switching to a different page.

8
IT8078-Web Design and Management PIT/IV YEAR-IT

Step 5. Creating Course Membership Subscriptions:

• MemberPress allows you to easily sell online courses with subscription plans. You can create as
many membership plans as you like, and users can select a plan to pay for your online course.

Step 6. Restrict Course Access to Membership Plans:

• The best part about using MemberPress is its powerful access control rules. They allow you to
decide who gets access to your online course.

• Simply, go to MemberPress » Rules page and click on the ‘Add New’ button.

9
IT8078-Web Design and Management PIT/IV YEAR-IT

Step 7. Adding a Link to Course Sign up and Register Page:

– MemberPress makes it easy to easily send users to the page where they can register and
sign up for your course by purchasing a membership plan.

Step 8. Preview & Customize Your Online Course:

– You can simply go to view a course by visiting:

– https://example.com/courses/

– Don’t forget to replace the example.com with your own domain name.

Step 9. Selling Your Online Course with More Powerful Features:

• Both MemberPress and WordPress are super flexible. This allows you to use them with any
other tools to grow your business and reach more users.

Step 10. Promoting Your Online Course:

– The other advantage of WordPress + MemberPress combo is that it also makes it easier
for you to promote your online course and make money online.

10
IT8078-Web Design and Management PIT/IV YEAR-IT

1. Create Landing Pages for Your Online Courses

– However, you may need to quickly create landing pages to describe course details,
showcase instructors, highlight special offers, etc.

– Custom landing pages and sales pages are proven to increase course sales.

2. Learn The SEO Basics:

– Search engines are the #1 traffic source for most websites on the internet. This is why
you’ll need to learn how to make your online course website rank higher in search
engines.

3. Track Marketing Data:

– A lot of beginners develop their marketing strategy based on guesswork. You don’t have
to do that when you can get actual data to make informed decisions.

4. Start Building an Email List:

– you need to start an email newsletter. This way you would be able to collect email
addresses and reach out to those users and bring them back to your website.

– We recommend using Constant Contact or ConvertKit for email marketing.

5. Convert Website Visitors into Subscribers and Customers:

– Most visitors who come to your website will leave without enrolling into your online
course. This is why it’s important to convert those abandoning visitors into subscribers
or paying customers.

– This is called conversion optimization.

URL LINK: https://www.tutorialspoint.com/wordpress/index.htm

11
IT8078-Web Design and Management PIT/IV YEAR-IT

2. DESIGN AND DEVELOP A WEBSITE HAVING AESTHETICS:

• The term aesthetics in the context of this article covers visual, sound and interactive
means of effect.
• They are the components that make websites appeal to the eye. A visually appealing
website is easy to digest, more functional, enjoyable, and inviting, retaining attention in
that critical first 30 seconds where users need to be engaged.
• Aspects of aesthetics include artistic design, font choices, layout, color, image choices,
and construction of text.

• Artistic Design

o Integration of artistic imagery into the background and layout of a website can
significantly contribute to the visual appeal. Simple related shapes or silhouettes
in filler space have an enjoyable effect on the user.

• Font Choices

– Clear text is important for webpage aesthetics. Don’t overcomplicate text with tricky
fonts or effects, and don’t make text look tacky with poor color or sizing.

• Layout

– A good layout is critical to aesthetic design. Users will intuitively tune out of a poor
layout, and bounce rates will increase. When a website is too cluttered or has no
structure, it is not visually appealing.

12
IT8078-Web Design and Management PIT/IV YEAR-IT

– Sidebars are important for additional information, especially if the site is usually
accessed from a PC. Visual layout considerations need to consider both responsive
design and PC use.

A Picture Tells a Story:

– Good pictures are important for aesthetic webpage design, they must be attractive and
portray your aim. We are drawn to effective images, and it makes us want to read the
copy associated.

Color:

– Color use should match your style, and colors must complement each other. The
interplay and readability of colors for text, buttons, and background are important for
visual appeal.

Text Construction:

– The textual construction of your website can contribute to aesthetics through careful
placement of styled text blocks.

13
IT8078-Web Design and Management PIT/IV YEAR-IT

• Navigation
Make it easy for visitors to find what they are looking for. Give them multiple vehicles
for accessing information. Provide a Search function, side navigation categories, footer
navigation text links, top navigation buttons or tabs, whatever will make it utterly seamless for a
user to move around your site, no matter where they start.

• Alignment
Elements of your site should be visually connected and balanced. Stick to a limited
number of page treatments; fewer if your site is small, more for larger sites comprised of
multiple content types.

• Consistency & Continuity

Be consistent throughout your site so that a visitor navigating from page to page will always
know where they are and how to get to the next item of interest. Continuity is one of the single
most important elements in conversion. When a user clicks to navigate to a new page, that page
must match their expectations and deliver a consistent, continuous message.

3. Advanced and Minimal UI Transitions based on the project:

Our Top 9 Animation Libraries List

a. Animate.css

b. Bounce.js

c. AnimeJS

d. GreenSock (GSAP)

e. Magic Animations

f. ZDog

g. CSShake

h. Hover.CSS

i. AniJS

Animate.css is one of the smallest and most easy-to-use CSS animation libraries available.
Applying the Animate library to your project is as simple as linking the CSS and adding the
required CSS classes to your HTML elements. You can also use jQuery to trigger the animations
on a particular event if you prefer.

Bounce.js is a JavaScript animation library that focuses on providing a selection of unique fun,
bouncy, Warner Brothers-esque animations to your website.

14
IT8078-Web Design and Management PIT/IV YEAR-IT

AnimeJS is the newest addition to our list, but has won a great many converts since its creation.
It’s incredibly versatile and powerful and wouldn’t be out of place powering HTML game
animations.

• AnimeJS is described as a “lightweight JavaScript animation library with a

simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and
JavaScript Objects”. Pretty awesome.

GreenSock (or GSAP – GreenSock Animation Platform) is the Swiss army knife of web
animation. For sleek and sophisticated animations that run smoothly, GSAP is ideal. You can
animate anything, from DOM elements to SVGs, and its ecosystem includes some amazing
plugins that let you do all sorts of fun stuff, e.g., morphing SVGs, drawing SVG strokes, scrolling
functionality, scrambling text, and much more.

• Zdog is a JavaScript library for creating 3D designs and animations by David DeSandro. With its
help, you can draw your designs using the <canvas> element or SVGs and bring them to life in
smooth animations with a sleek 3D effect.

• CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking
elements within your web page. As you might expect, there are a number of variations available
for shaking your web components.

• Hover.css is a CSS animation library designed for use with buttons and other UI elements in your
website. It has really nice 2D transitions, along with a host of other well-crafted animations.

4. Host and manage the project live in any public hosting:

• A web host, also called a hosting provider, is a company that provides the
tools you need to accomplish this.
• Most notably, that includes a server. Servers store website files, and
Internet browsers can communicate with them to deliver your site’s pages
to visitors. This is what makes hosting such a key element of setting up a
website – without it, you have no way to make your site public.
• It’s important to note that there are two ways to host a website: (1)
externally/publicly, and (2) locally.
• A locally-hosted website is stored on your own machine, while an
externally-hosted site is stored on a provider’s server.

How to host a website on the web :

1. Determine the best type of hosting for your site
– For WordPress users, there are five main types of hosting to consider:
– Shared

15
IT8078-Web Design and Management PIT/IV YEAR-IT

– Virtual Private Server (VPS)

– Dedicated
– Cloud
Managed WordPress hosting

2. Examine additional features available from various providers

• In addition to hosting your website on one of its servers, many hosting providers – especially
those with managed WordPress plans – offer handy features you may want for your site. Some
common ones include:

– Domain name registration

– Content delivery network (CDN)

– SSL certificates

– Security features such as firewalls or regular scans

– Automated backups

– Externally-hosted staging areas

– Email services

3. Look at different providers’ customer support options

– Customer support is a key element of any hosting service. Your relationship with your
hosting provider will likely be a long-term one, so it’s important that it’s able to provide
any help you may need related to your account, server, or even WordPress itself.

4. Set a hosting budget and find a price that works for you

– Hosting is an ongoing expense. Most providers require you to pay monthly fees,
although some offer annual plans. Either way, it’s important to consider what you’ll be
able to afford on a regular basis.

5. Figure out how you’ll install WordPress on your provider’s server

– Some managed WordPress hosts also offer a one-click installation option that enables
you to quickly install the software on your account. There are even plans that come with
WordPress pre-installed, which is the easiest solution.

How to host your own website locally :

1. Create a site using a local web stack

16
IT8078-Web Design and Management PIT/IV YEAR-IT

• A local web stack, such as XAMPP, is software that provides several components needed for
local development, including a web server. The main benefit of using this method is that it gives
you the most control over your site:

• 2. Sign up for a virtual sandbox environment

– These platforms, including Local by Flywheel, enable you to easily create local
WordPress installations.

– Local by Flywheel is completely free to use. All you have to do is sign up, download the
app, and start creating sites.

17
IT8078-Web Design and Management PIT/IV YEAR-IT

Hosting your website on Github:

• Github is a company that hosts "code repositories", collections of code for projects. Many of the
code repositories are "open source", which means they're publicly available for the whole world
to browse.

• Sign up for a Github account

• Create a Github project for your website

– Once you verify your email address, you'll see the start page. Click "Start a project

• Upload multi-file websites to Github

• Find your project folder and select the files you want to upload.

18