WCMS KFGSC
UNIT-3
INTRACTIVE WEB DEVELPOMENT
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.
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.
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.
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, making it possible to execute site-wide changes without
needing to do changes one by one. Uploading content, editing design elements
or backgrounds can all be done with relative case.
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. You don't need a lot of complicated technical knowledge for
making changes to the site.
SAHI Page1
WCMS KFGSC
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.
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.
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.
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 ofa 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.
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
recommendation feature based on past purchases and searches. These are
examples of tailored content that makes a user's experience smoother. a similar
SAHI Page2
WCMS KFGSC
Examples: Youtube, Google, Amazon...etc.,
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:
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.
Development Phase
1. Choose the Right Technology Stack:
SAHI Page3
WCMS KFGSC
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.
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,
on 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.
Maintenance and Optimization
1. Regular Updates:
Keep content fresh and up-to-date.
SAHI Page4
WCMS KFGSC
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).
Develop marketing strategies to drive traffic and engagement.
Implement analytics to track user behavior and website performance.
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.
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 lang="en">
<head>
<meta charset= cup T -8">
SAHI Page5
WCMS KFGSC
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel ="stylesheet"href="styles.css^ prime prime >
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#” >Home</a></ li >
<li ><a href="#” >About</a></li >
<li><a href="#">Services</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Welcome to My Website</ h 2 >
<p>This is the main content of the website.</p>
</section>
</main>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
CREATING AND MAINTAINING A WIKI SITE
WIKI Site
A wiki site is a type of website that allows users to collaboratively create, edit, and
manage content using a simplified markup language or a 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 organizations to manage
SAHI Page6
WCMS KFGSC
information in-house, enabling teams to easily share knowledge and work together
more effectively.
Types of Wikis
(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.
(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.
Benefits to Create a Wiki Page
To find information and learn Something
To contribute knowlwdge and teach something
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.
Steps 1:Type Wikipedia in the google,click on the link which is highlighted as
Wikipedia
Steps 2: Select the language
Steps 3:Click on create account
Steps 4:fill the details to create an account
Steps 5:Search by the name
Steps 6:Click on ask for it to be created
SAHI Page7
WCMS KFGSC
Steps7:Click on this option here to start a new article
Steps 8: After clicking on the next for multiple times you will be able to create a new
article
1. Choose a Wiki Platform:
1. 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.
2. 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:
1. 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.
2. Configure Settings: Customize the wiki's settings, including site name, logo, theme,
user permissions, and access control.
3. Create Content:
1. Create Pages: Start by creating essential pages, such as a homepage, navigation menu,
and any top-level categories or sections.
2. Add Content: Populate your wiki with content by creating or importing pages,writing
articles, adding images, and embedding multimedia.
4.Customize Appearance:
1. 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.
2. Custom CSS: For advanced customization, consider adding custom CSS to tailor the
appearance of specific elements or override default styles.
5. Configure Features:
1. Navigation: Set up navigation menus, categories, and internal linking to he users
navigate the wiki efficiently.
SAHI Page8
WCMS KFGSC
2. Search Functionality: Configure search settings and options to enable users find
relevant content quickly.
3. User Management: Define user roles, permissions, and access levels to cont who can
view, edit, or manage content on the wiki.
4. Extensions and Plugins: Install and configure extensions or plugins to additional
functionality, such as discussion forums, file attachments, or analy tracking.
6. Test and Launch:
1. Quality Assurance: Test the wiki site thoroughly to identify and fix any be errors, or
usability issues.
2. Search Functionality: Gather feedback from potential users or stakeholders and m
any necessary adjustments based on their input.
3. Launch: Once you're satisfied with the setup and content, officially launch wiki site
and announce it to your target audience or community.
7. Maintain and Improve:
1. Regular Updates: Keep the wiki site up to date by adding new content, upd existing
pages, and fixing any issues that arise.
2. Community Engagement: Encourage user participation and collaboration by
promoting the wiki, soliciting contributions, and fostering a sense of community
ownership.
3. Monitor Performance: Track key metrics, such as traffic, engagement, anc feedback,
to assess the wiki's effectiveness and identify areas for improvements.
3.9 CREATING AND MANAGING A BLOG SITE
Blog Site
A blog site is a type of website where individuals, businesses, or organizations reg
publish informal, often personal, articles or posts, known as blog posts. These pos
typically displayed in reverse chronological order, with the most recent post appearing
Blogging platforms, such as WordPress, Blogger, or Medium, provide users with too
templates to easily create, customize, and manage their blogs.
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.
SAHI Page9
WCMS KFGSC
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.
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.
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
Step 2:Click on create your Blog
Step 3: choose an account and type password, after typing the password click on the next
button
Step 4:Now,create a new Blog by giving a name DIVIJ”ThePower” and click on next
button
Step 5:Choose a URL or an address for your blog and click on the next button
Step 6:Choose your display name for your blog and once again cofirm your display
name
Step 7:Click on the New Post.
Step 8:Enter the Title and type the message click on the publish button
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.
SAHI Page10
WCMS KFGSC
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.
SAHI Page11
