Jain College of BBA, BCA and Commerce

UNIT 3
Interactive Web Development

3.1 STATIC SITE

A static site is the internet default. It will have a specific number of pages with a consistent layout.
When the static site is run on a browser, the content will not be changed by user actions, and the
technologies used for these sites include HTML, CSS and sometimes JavaScript. Static websites are ideal
for small presentation/portfolio sites that only have a handful of pages. Building a static site does not take
much time, effort or money, and new pages can be added by simply copying the HTML code and
modifying it accordingly.

3.2 DYNAMIC SITE

A dynamic site on the other hand is designed with functionality in mind, rather than just for the
purposes of displaying information. When visiting a dynamic page, a user can interact with the content
due to the technologies used to develop the site.

3.3 WHAT IS DYNAMIC WEBSITE DEVELOPMENT?

A dynamic website is designed to serve different content to different users based on a variety of
factors, such as user preferences, selection, and time zone. Needless to say, this can be a very powerful
feature.

3.3.1 Advantages of Dynamic Website

1. Better User Experience: A dynamic website is designed to be very user-friendly, allowing users
to easily make changes to the website depending on their requirements.
2. Easier Maintenance: A content management system that has the database for all elements,
(including the content on the page) is used for dynamic websites. They also use scripting languages
that primarily interact with all the database's information. Uploading content, editing design
elements or backgrounds can all be done with relative ease.
3. Easy Updating: One of the most sought-after benefits of building a dynamic website is that it lets
you update your information/content easily depending upon your requirements.
4. Professional-Looking: Dynamic websites give you an elevated look and seem more professional
than static websites. This is usually because static sites lack quite a few features and elements that
users expect from modern sites.

Prof. Tejashree Patil 1

 Jain College of BBA, BCA and Commerce
5. Futuristic: Dynamic websites empower the user to be more involved & engage with the content
of the site. By offering them an interactive and responsive experience, they elevate them through
personalized browsing.

3.3.2 Disadvantages of Dynamic Websites

1. Speed: As a static HTML page does not require an external resource, it loads much faster every
time than compared with a dynamic page that is generated server-side.
2. Needs to be Changed: One main downside to these sites is that they need to be changed over a
certain period.
3. Can be More Costly: Automation technology that developers require is not always easy to get.
Add to it the developers' budgets, marketing cost, content marketing, etc which are hard to find &
you have the recipe for a high budget.

3.4 WHEN IS A STATIC PAGE BETTER THAN A DYNAMIC PAGE?

There are a few situations in which you would be better off with a static page instead of a dynamic
one. To start, static websites load faster. They do not require an external resource from a database that is
located server-side. However, with the right CMS solution, speed issues are reduced on dynamic sites,
because the pages will be created dynamically, and then they will be converted and uploaded as static
pages.
Static pages also have lower server requirements, since they do not connect to a database and do
not require a server-side script in order to load. This means that a static page can serve more visitors for
the same server load.

3.5 WHAT IS DYNAMIC CONTENT?

Dynamic content refers to website content that changes based on preferences and behavior. When
a user lands on your site, WordPress will make data-driven decisions about what content to show a user.
For example, if you've ever shopped online on Target's website, you've probably noticed the
"Target Circle for You" or "Buy it Again" options. Amazon has a similar recommendation feature based
on past purchases and searches. These are examples of tailored content that makes a user's experience
smoother.
Examples: Youtube, Google, Amazon...etc.,

3.6 PLANNING AND DEVELOPING DYNAMIC WEB CONTENT SITES

Planning and developing dynamic web content sites involves several steps to ensure functionality,
user experience, and scalability. Here's a structured approach to help you:

Prof. Tejashree Patil 2

 Jain College of BBA, BCA and Commerce

3.6.1 Planning Phase

1. Define Goals and Objectives:
• Understand the purpose of the website.
• Identify target audience and their needs.
• Define measurable goals (e.g., increase engagement, drive sales, etc.).
2. Research and Analysis:
• Conduct market research and competitor analysis.
• Identify trends and best practices in web design and development.
• Gather requirements from stakeholders.
3. Create a Site Map:
• Outline the structure of the website.
• Define main sections and subpages.
• Consider user flow and navigation.
4. Wireframing and Prototyping:
• Design rough layouts of key pages (wireframes).
• Create interactive prototypes to visualize user interactions.
• Gather feedback and iterate.

3.6.2 Development Phase

1. Choose the Right Technology Stack:
• Select appropriate languages, frameworks, and tools (e.g., HTML/CSS, JavaScript, PHP,
Python, Ruby on Rails, etc.).
• Consider content management systems (CMS) like WordPress, Drupal, or custom- built
solutions.
2. Backend Development:
• Develop server-side logic to manage data and user requests.
• Implement databases to store dynamic content (e.g., MySQL, MongoDB).
• Build APIs for communication between frontend and backend systems.

3. Frontend Development:
• Create responsive and dynamic user interfaces using HTML, CSS, and JavaScript.
• Implement interactivity using libraries or frameworks like React, Angular, or Vue.js.
• Ensure cross-browser compatibility and accessibility.

Prof. Tejashree Patil 3

 Jain College of BBA, BCA and Commerce
4. Content Management:
• Integrate CMS if required for easy content updates.
• Provide an intuitive admin interface for content creators.
5. Dynamic Content Integration:
• Implement features like user-generated content, personalized recommendations, or real-
time updates.
• Use AJAX or WebSockets for asynchronous data exchange.
6. Testing and Quality Assurance:
• Conduct functional, usability, and performance testing.
• Ensure compatibility with different devices and browsers.
• Fix bugs and optimize performance.
7. Deployment:
• Choose a reliable hosting provider and deploy the website.
• Set up monitoring tools for performance and security.
• Implement backups and disaster recovery plans.

3.6.3 Maintenance and Optimization

1. Regular Updates:
• Keep content fresh and up-to-date.
• Apply security patches and software updates.
• Continuously improve features based on user feedback.
2. Performance Optimization:
• Monitor website performance and identify bottlenecks.
• Optimize code, images, and assets for faster loading times.
• Implement caching mechanisms and content delivery networks (CDNs).
3. SEO and Marketing:
• Optimize content for search engines (SEO).
• Implement analytics to track user behavior and website performance.
• Develop marketir2024/06/14012:29 traffic and engagement.
4. Scaling:
• Monitor traffic patterns and scale infrastructure as needed.
• Optimize database queries and server configurations for scalability.
• Consider cloud-based solutions for flexibility and scalability.

Prof. Tejashree Patil 4

 Jain College of BBA, BCA and Commerce
By following these steps, you can plan and develop dynamic web content sites that meet
your goals and provide a seamless user experience.

3.7 WEBSITE DESIGN USING CSS

Designing a website using CSS (Cascading Style Sheets) involves styling the elements of your
HTML (Hypertext Markup Language) markup to control their appearance, layout, and presentation. Here's
a basic guide to get started:

To design a website using CSS, you can follow these general steps:
1. HTML Structure: First, create the structure of your website using HTML. This includes defining
elements like header, navigation, content sections, footer, etc.
2. CSS Styling: Once the HTML structure is in place, use CSS to style the elements. This involves
setting properties like colors, fonts, sizes, margins, paddings, and positioning.
3. Layout Design: Design the layout of your website using CSS. You can use techniques like flexbox
or CSS grid to arrange elements in a desired layout.
4. Responsive Design: Ensure your website looks good and functions well on various devices and
screen sizes by implementing responsive design techniques. This may involve using media queries
to adjust styles based on screen width.
5. Animations and Effects: Add animations and effects using CSS to enhance user experience and
make your website more engaging.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}

input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}

Prof. Tejashree Patil 5

 Jain College of BBA, BCA and Commerce
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}

button:hover {
opacity: 0.8;
}

.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}

.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}

img.avatar {
width: 40%;
border-radius: 50%;
}

.container {
padding: 16px;
}

span.psw {
float: right;
padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}

Prof. Tejashree Patil 6

 Jain College of BBA, BCA and Commerce
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Login Form</h2>

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

<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>

<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>

<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>

<div class="container" style="background-color:#f1f1f1">

<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>

</body>
</html>

Prof. Tejashree Patil 7

 Jain College of BBA, BCA and Commerce

3.8 CREATING AND MAINTAINING A WIKI SITE

3.8.1 WIKI Site
A wiki site is a type of website that allows users to collaboratively create, edit and manage content
using simplified markup language or rich-text editor.
OR
A wiki is a website or online resource that can be edited by multiple users. Some wikis, such as
Wikipedia are publicly accessible. Others are used by organization to manage information in-house,
enabling teams to easily shar knowledge and work together more effectively.

3.8.2 Types of Wikis

There are two types of wikis-internal and external wikis. Let's see the difference between the two,
as each plays a different role in terms of usability.

(a) Internal wiki

An internal wiki, also called a private wiki, is a closed site for your employees who collaborate in
real-time to maintain and update the company's internal information. The internal wiki allows everyone
to share notes and suggestions and contribute resources, especially for a virtual team. If you're looking for
advanced security to protect your data, you must host the internal wiki on your server. You need an IT
team to monitor regular updates and storage space on the wiki syntax.

Prof. Tejashree Patil 8

 Jain College of BBA, BCA and Commerce

(b) External Wiki

External wikis are also called public wikis accessed by anyone using an internet connection. The
Wikipedia page is the best example of an external wiki that accepts contributions from millions of users
globally to its public pages.
External wikis act as self-service websites to cut down on customer queries and reduce the waiting time
for answering their concerns.
Aspect Internal Wiki External Wiki
Purpose Collaboration within the Public information sharing and
organization engagement
Access Restricted to authorized team Open to anyone interested
members
Content Sensitive data, business documents Product specs, support info, open-
source
Security High, content is kept within the Lower, content accessible to the
team public
Audience Limited to the internal team Broad audience, including the
general public
Growth Adaptability May require transition as team Scales well to engage a larger user
grows base
Decision Factors Need for secure collaboration Desire to share information with
everyone

3.8.3 Benefits to Create a Wiki Page

• To find information and learn something.
• To contribute knowledge and teach something.

3.8.4 Steps to Create a Wiki Site

Creating a wiki site involves several steps, ranging from choosing the right platform to configuring
settings and inviting contributors. Below is a general guide to help you create a wiki site:

Prof. Tejashree Patil 9

 Jain College of BBA, BCA and Commerce

Step1: Type Wikipedia in the Google, click on the link which is highlighted as wikipedia

Step 2: Select the language

Prof. Tejashree Patil 10

 Jain College of BBA, BCA and Commerce

Step 3: Click on create account

Step 4: Fill the details to create an account

Prof. Tejashree Patil 11

 Jain College of BBA, BCA and Commerce

Step 5: Search by the name

Step 6: Click on ask for it to be created

Prof. Tejashree Patil 12

 Jain College of BBA, BCA and Commerce

Step 7: Click on this option here to start a new article

Step 8: After clicking on the next for multiple times you will be able to create a new article.

1. Choose a Wiki Platform:

• Select a Wiki Software: Decide whether to use an existing wiki platform or build a custom
solution. Common wiki software includes MediaWiki, DokuWiki, Confluence, and TikiWiki.
• Consider Hosting Options: Choose between self-hosted solutions (installing the wiki software on
your server) or cloud-hosted platforms (using a hosted service provider).

2. Set Up Your Wiki:

• Install the Wiki Software: If you're using self-hosted software, follow the installation instructions
provided by the wiki platform. For cloud-hosted solutions, sign up for an account and follow the
setup wizard.
• Configure Settings: Customize the wiki's settings, including site name, logo, theme, user
permissions, and access control.

Prof. Tejashree Patil 13

 Jain College of BBA, BCA and Commerce

3. Create Content:
• Create Pages: Start by creating essential pages, such as a homepage, navigation menu, and any
top-level categories or sections.
• Add Content: Populate your wiki with content by creating or importing pages, writing articles,
adding images and embedding multimedia.

4. Customize Appearance:
• Theme and Design: Customize the look and feel of your wiki by selecting a suitable theme or
template. Modify colors, fonts, and layout to match your branding or preferences.
• Custom CSS: For advanced customization, consider adding custom CSS to tailor the appearance
of specific elements or override default styles.

5. Configure Features:
• Navigation: Set up navigation menus, categories, and internal linking to help users navigate the
wiki efficiently.
• Search Functionality: Configure search settings and options to enable users to find relevant
content quickly.
• User Management: Define user roles, permissions, and access levels to control who can view,
edit, or manage content on the wiki.
• Extensions and Plugins: Install and configure extensions or plugins to add additional
functionality, such as discussion forums, file attachments, or analytics tracking.

6. Test and Launch:

• Quality Assurance: Test the wiki site thoroughly to identify and fix any bugs, errors, or usability
issues.
• User Feedback: Gather feedback from potential users or stakeholders and make any necessary
adjustments based on their input.
• Launch: Once you're satisfied with the setup and content, officially launch the wiki site and
announce it to your target audience or community.

Prof. Tejashree Patil 14

 Jain College of BBA, BCA and Commerce
7. Maintain and Improve;
• Regular Updates: Keep the wiki site up to date by adding new content, updating existing pages,
and fixing any issues that arise.
• Community Engagement: Encourage user participation and collaboration by promoting the wiki,
soliciting contributions, and fostering a sense of community ownership.
• Monitor Performance: Track key metrics, such as traffic, engagement, and user feedback, to
assess the wiki's effectiveness and identify areas for improvement.

By following these steps, you can create a wiki site that effectively serves its intended
purpose, whether it's for knowledge sharing, documentation, collaboration, or community building.

3.9 CREATING AND MANAGING A BLOG SITE

3.9.1 Blog Site

A blog site is a type of website where individuals, businesses, or organizations regularly publish
informal, often personal, articles or posts, known as blog posts. These posts are typically displayed in
reverse chronological order, with the most recent post appearing first. Blogging platforms, such as
WordPress, Blogger, or Medium, provide users with tools and templates to easily create, customize, and
manage their blogs.

3.9.2 Blog Sites Serve Various Purposes, Including

1. Personal Expression: Many individuals use blog sites as a platform to express their thoughts,
opinions, experiences, and creative ideas on topics of interest, ranging from hobbies and travel to
politics and personal development.
2. Content Marketing: Businesses often utilize blog sites as part of their content marketing strategy
to attract and engage their target audience, establish thought leadership, drive website traffic, and
generate leads or sales.
3. Information Sharing: Blog sites serve as valuable resources for sharing informative content,
tutorials, guides, reviews, news updates, and industry insights on specific topics or niches.
4. Community Building: Blog sites can foster communities of like-minded individuals who share
common interests, passions, or goals. Readers can interact with authors through comments,
discussions, and social sharing, creating a sense of belonging and engagement.

Prof. Tejashree Patil 15

 Jain College of BBA, BCA and Commerce
5. SEO Benefits: Regularly updating a blog with high-quality, relevant content can improve search
engine visibility and rankings. Blog posts that target specific keywords or address popular topics
can attract organic traffic and enhance website authority.

3.9.3 Steps to Create a Blog Site

Step 1: To access Blogger, you can follow these steps:
Open your web browser. Type "Blogger" into the search bar and press Enter.
Look for the link provided as www.blogger.com in the search results.
Click on the link to visit the Blogger website

Prof. Tejashree Patil 16

 Jain College of BBA, BCA and Commerce
Step 2: Click on create your Blog

Step 3: choose an account and type password. After typing the password click on the

Prof. Tejashree Patil 17

 Jain College of BBA, BCA and Commerce
Step 4: Now, create a new Blog by giving a name example Personal Web Management " and click on the
Next button.

Step 5: Choose a URLor an address for your blog and click on the next button

Prof. Tejashree Patil 18

 Jain College of BBA, BCA and Commerce
Step 6: Confirm your display name for your blog and once again confirm your display name

Step 7: Click on the New Post.

Prof. Tejashree Patil 19

 Jain College of BBA, BCA and Commerce
Step 8: Enter the Title and type the message click on the publish button. From the above following
guidelines you will be able to create a new Blog.

3.10 STEPS TO MANAGE A BLOGSITE

1. Set Goals: Define your blog's purpose and audience.

2. Choose Platform: Select a blogging platform like WordPress or Medium.

3. Design Blog: Customize the layout and appearance.

4. Plan Content: Create a content strategy and schedule.

5. Create Content: Write engaging posts with visuals.

6. Promote: Share on social media and engage with your audience.

7. SEO Optimization: Use keywords and meta tags for better visibility.

8. Monitor Analytics: Track performance with tools like Google Analytics.

9. Maintain: Regularly update content and address technical issues.

10. Stay Informed: Keep up-to-date with industry trends and best practices.

Prof. Tejashree Patil 20