GROUP ONE; SCO 403 LESSON 5
GROUP MEMBER REGISTRATION NUMBER
BRIAN KASINA J17/0973/2022
KINYUA KIAMA J17/0974/2022
ALLAN KEBASO J17/0994/2022
NUNGARI LOISE J17/6871/2022
1.1 Definition
A static website is a collection of pre-built files (HTML, CSS, and optional JavaScript) that are
stored on a web server and delivered to the visitor's browser exactly as they are stored, without
any server-side processing or database queries (MDN Web Docs; Wikipedia – "Static web
page"). Every visitor sees the same content unless a developer manually edits the source files.
A useful analogy: a static website is like a printed brochure — once printed, the content is fixed
until you reprint it (Strapi; OVHcloud).
1.2 Key Characteristics & Features
● Fixed/pre-rendered content — every user sees the same page ([Link]; Contentful).
● No server-side scripting — only client-side languages (HTML, CSS, JavaScript)
(Kinsta).
● No database — content lives directly in HTML files.
● Fast loading — files are served as-is, often cached on a Content Delivery Network
(CDN) (Strapi; Commercengine).
● High security — no database or backend means very few attack surfaces (no SQL
injection risk) (Contentful; Contentstack).
● Low hosting cost — can be hosted on free or very cheap services (GitHub Pages, Netlify,
Cloudflare Pages, Amazon S3) (Hygraph).
1.3 How It Works (Architecture / Underlying Mechanism)
1. The user types a URL or clicks a link in their browser.
2. The browser sends an HTTP GET request to the web server (or to a CDN edge node).
3. The server locates the matching HTML file and sends it back unchanged along with any
linked CSS, JavaScript, and image files.
4. The browser renders the page.
There is no application server, no database query, and no template rendering at request time
1.4 Advantages and Disadvantages
Advantages
● Lightning-fast page loads (no server processing).
● Strong security (no DB, no server-side code → fewer vulnerabilities).
● Cheap to host and easy to deploy.
● High reliability/uptime, especially when served via a CDN (Wikipedia – Static web
page).
● Excellent for SEO because of fast load times.
Disadvantages
● Same content for every visitor — no personalization (Mailchimp).
● Difficult to scale: every new page must be created/edited manually.
● No real-time interactivity (e.g., no logins, no shopping carts, no comments) without
third-party services.
● Tedious updates — a site-wide change (e.g., updating a footer) may mean editing every
file unless a Static Site Generator is used ([Link]).
1.5 Real-World Examples & Use Cases
● Personal portfolios (e.g., Tom Preston-Werner's Jekyll site)
● Resumés / CV websites
● Brochure / small business websites (digital business cards)
● Landing pages for marketing campaigns
● Documentation sites (e.g., React docs, Stripe docs, [Link] docs are all statically
generated for performance — Commercengine)
● Event pages, photography galleries, and academic profile pages
1.6 Technologies, Languages & Tools
● Core languages: HTML, CSS, JavaScript (Figma; Kinsta).
● Static Site Generators (SSGs): Jekyll (Ruby), Hugo (Go), Gatsby & [Link]
(React/JavaScript), Astro, Eleventy, Publii.
● Hosting: GitHub Pages, Netlify, Vercel, Cloudflare Pages, Amazon S3, Kinsta Static Site
Hosting.
● Headless CMS pairing (modern Jamstack): Contentful, Strapi, Sanity, Contentstack.
1.7 Comparison With Related Concepts
Aspect Static Website Dynamic Website
Server processing None Server-side scripts run on each request
Database No Yes
Personalization No Yes
Build/deploy Upload files; done Requires app server + DB setup
Cost Low Higher
Best for Brochures, portfolios, docs E-commerce, social media, dashboards
Dynamic Websites
Transition from Static to Dynamic websites
The Rise of Scripting and Web 2.0
The evolution began with the introduction of Common Gateway Interface (CGI) and server-side
languages like Perl and PHP, allowing servers to generate HTML on-the-fly. This birthed Web
2.0, a term coined to describe the shift from "read-only" to "read-write" web. This era prioritized
user-generated content, usability, and interoperability. Central to this was the Content
Management System (CMS)—software such as WordPress or Drupal—which decoupled content
from design, enabling non-technical users to manage databases via a graphical interface.
The Mobile and App Era
In the modern era, the distinction between "web pages" and "applications" has blurred. With the
advent of the iPhone and subsequent smartphone proliferation, web design shifted toward
responsiveness. Technologies like AJAX (Asynchronous JavaScript and XML) allowed websites
to update parts of a page without a full reload, leading to the rise of Single Page Applications
(SPAs). Today, the web is dominated by API-first architectures and "Headless" systems where
the frontend and backend are entirely decoupled.
Core Technologies and Tiered Architecture
A dynamic website operates through a multi-layered infrastructure. Unlike static sites
(Client-Server), dynamic sites utilize a Three-Tier Architecture:
● Presentation Tier (Frontend): The user interface. It handles user interaction and displays data.
● Logic Tier (Backend/Application Server): The "brain" that processes requests, enforces
business rules, and communicates with the data tier.
● Data Tier (Database): Persistent storage where user accounts, content, and logs reside.
The Hotel Analogy for Web Architecture
● The Guest (Client/Frontend): Initiates a request (orders food).
● The Waiter (API): The messenger takes the request to the kitchen and brings the result back.
● The Chef (Backend/Server): Follows a recipe (logic) to prepare the meal.
● The Pantry (Database): Where ingredients (raw data) are stored for the Chef to use.
The Technology Stack Breakdown
● Frontend: Relies on HTML, CSS, and JavaScript. Modern frameworks like React or Blazor
manipulate the DOM (Document Object Model)—a programming interface for web
documents that represents the page as a tree of objects.
● Backend: Popular environments include [Link] (JavaScript), Django (Python), and
[Link] Core (C#). These handle security, authentication, and data processing.
● Database: Systems like PostgreSQL (Relational) or MongoDB (NoSQL) store structured
data.
● APIs (Application Programming Interfaces): Specifically REST or GraphQL, act as the
standardized communication protocol between the frontend and backend.
Scripting: Client-Side vs. Server-Side
The dynamism of a website is powered by two distinct but collaborative forms of scripting.
Server-Side Scripting
Code is executed on the web server before the page is sent to the browser. When a user requests a
profile page, the server-side script (e.g., Python or C#) fetches the user's specific data from the
database, populates an HTML template, and sends the completed page to the client. This is
essential for security, as the source code and database credentials remain hidden on the server.
Client-Side Scripting
Code is executed directly in the user's browser (the client). JavaScript is the primary language
here. It allows for immediate interaction, such as form validation, animations, or updating the
DOM dynamically. SPAs use client-side routing to swap content without refreshing the browser
tab, providing a fluid, "app-like" experience.
Integration through AJAX
AJAX bridges these two worlds. It allows client-side scripts to send background requests to
server-side scripts. For example, when you "Like" a post, AJAX sends that data to the server
(Server-Side) to update the database, while the UI (Client-Side) immediately changes the icon
color without a page reload.
Distinction, Pros, and Cons
Dynamic websites offer high personalization and scalability but come with increased complexity.
Static sites are faster to load and more secure (no database to hack), but Dynamic sites are
necessary for any platform requiring user logins, e-commerce, or real-time data.
Difference between a Website and a Webpage
The basic building block of the World Wide Web is the web page, and it is important to
understand the architecture of the modern internet to understand this. Web page is a digital
document located on a web server that can be accessed by a web browser and may include text,
graphics, sounds, videos, and hyperlinks. A site, therefore, is nothing more than a series of these
interconnected web pages, each with its own Uniform Resource Locator (URL). A website is a
container, so it can easily contain both static and dynamic web pages. It is important to
understand the differences between these two types of pages in order to understand how the web
has developed from a reading medium to a software platform.
Static vs. Dynamic Web Pages
The key difference in web architecture is the processing and rendering of the data to the end-user.
1. Static Web Pages:
Static web pages are commonly known as "flat" or "stationary" pages because they are sent to
the client's browser as they are stored on the web server. They are static, that is, the user reads the
data, but never interacts with it or modifies it. Static pages are created with basic web languages
like HTML and CSS. They are very fast to load and are inherently secure, as they don't need to
be interpreted on the server or require a database query before they're displayed. But they don't
work well in today's custom web context.
2. Dynamic Web Pages:
A dynamic web page can show different content at different times, respond to user input, user
profiles or updates to real-time data. Dynamic pages are not stored as HTML pages, but are
created dynamically. The underlying data should be requested, interpreted and compiled at the
server level before being displayed by a browser. This process introduces structural complexity
and relative load times, but is essential for creating a personalised user experience and complex
data rendering.
The function of Web Scripting.
Scripting is the mechanism that connects static documents and dynamic interfaces. Scripting
Languages are languages that enable the writing of instructions as scripts. Scripting languages
are usually interpreted and executed line by line, as opposed to compiled languages (such as
C++). When talking about web development, the dynamism of a page is accomplished by a
combination of server-side and client-side scripts.
Server-Side Scripting (Backend Preparation)
Server-side scripting is the safe way for the client to communicate with the resources on the web
server. It runs on the server prior to sending any data over the network to the user's browser. This
type of scripting is used to restrict direct user access to sensitive resources on the server, to query
databases, and to gather user characteristics to tailor the HTTP response. If a request is made,
then the server parameters determine how the new web page is built. This backend assembly is
powered by a number of technologies:
● ASP and [Link]: Active Server Pages are dynamic Web pages that run scripts on the
server and are based on the Component Object Model (COM) that enables access to
extended libraries.
● Java: Calls Java Server Pages (JSP) which are compiled into bytecode and run on the
Java Virtual Machine (JVM).
● Python: A versatile language that can be used in dynamic data processing, supporting
multiple programming paradigms such as object-oriented and functional.
● Specialized Environments: Technologies such as WebDNA (which has an embedded
database system) and ActiveVFP extend the capabilities of the back-end processing.
Client-Side Scripting (Frontend Execution)
Client-side scripting controls the way the data is used once it gets to the user, while server-side
scripting prepares the data. Client-side scripts run completely on the client's Web browser. These
scripts include instructions for the browser to perform certain actions when the user takes a
specific action (like clicking, scrolling, or filling out a form), without asking for a new page from
the server. These programs can be included in the HTML files or linked as external files. The
heart of the technology that makes it [Link] centre of the technology that makes it
interactive. The real interactivity of a dynamic web page depends on a certain sequence of client
side technologies that are all working together.
● JavaScript: JavaScript is the language of the Web's client-side scripts. It's a
prototype-based scripting language that follows the naming conventions used in Java (but
they're implemented differently). JavaScript is a language that is stored in a .js file that is
used for the logical execution of interactivity on the frontend. Other languages that are in
this space are Dart (an open-source language created by Google) and ActionScript (which
is used traditionally in Adobe Flash).
● Document Object Model (DOM): DOM is a programming interface for web documents.
It is a tree of objects that describes the structure of a web page. If client-side scripting is
used, it is added to the DOM, so that the developer can dynamically change the structure,
style and content of the page in real time, depending on user interaction.
● AJAX (Asynchronous JavaScript and XML): AJAX is certainly one of the most
important technologies for modern dynamism. It enables the exchange of data in an
asynchronous manner, that is, a part of a web page can be updated without loading the
whole page. This is what enables live feeds, real-time shopping carts, and other real-time
updates.
● Templating Engines: Templating Engines work behind the scenes to join raw data
retrieved from the database to structural HTML templates to create the dynamic page's
layout before it is accessed by the user.
DYNAMIC APPLICATIONS (WEB APPLICATIONS)
4.1 Definition and Core Concept
● Task-Oriented Software: A dynamic application, or "web app," is software that runs in a
browser, allowing users to perform complex tasks and manipulate data in real time.
● The Fundamental Shift: While dynamic websites focus on delivering content to be read,
web applications focus on enabling user actions -creating, editing, and managing data with
personalized experiences.
● Network Dependence: These are networked applications—software that relies on network
communication to exchange data and provide services.
4.2 Technical Characteristics
● Application Layer Logic: Web apps operate at Layer 7 (Application Layer) of the OSI
model, providing the direct interface between the user and the network.
● High Interactivity: Users are active participants who input data that is processed by
business logic and stored in a database.
● Network-Awareness: Some of these applications are "network-aware," meaning they
implement application layer protocols directly to communicate with the lower layers of the
protocol stack.
● User Authentication: Almost all web apps require secure logins to maintain "user state"
and persistent sessions across the network.
4.3 Underlying Mechanism and Architecture
● Multi-Tier Architecture: Web apps typically follow a Three-Tier Architecture:
○ Presentation Tier (Frontend): The UI rendered in the browser using HTML, CSS,
and JavaScript.
○ Application Tier (Backend): The logic running on an application server ([Link],
Python, etc.) that processes requests.
○ Data Tier: The database (SQL or NoSQL) that stores the persistent data.
● Concurrency and Processes: Each executing program loaded on a device is a process.
Servers must handle multiple client requests simultaneously and separately for the
application to succeed.
● API Integration: Modern web apps are often API-driven, using web services (REST or
SOAP) to facilitate communication between different systems.
4.4 Real-World Examples
● Productivity & Collaboration: Google Docs and Figma allow real-time data manipulation
and collaborative editing.
● Communication & Messaging: Gmail and Facebook integrate functionality from OSI
Layers 5, 6, and 7 to manage user sessions and data presentation.
● Financial Services: Online banking portals require high security and transaction integrity
managed at the application level.
4.5Web Page vs. Application
Aspect Dynamic Web Page Dynamic Application
Primary Purpose Display content to be read Perform tasks and "do" work
User Role Passive consumer Active participant/creator
Interactivity Limited (forms, comments) Extensive (CRUD operations)
Persistence Mostly stateless per request Maintains user state/accounts
4.6 Conclusion.
● The Evolution: We have traced the web from Static Websites (digital brochures) to
Dynamic Websites (content engines), and through Dynamic Web Pages to full Dynamic
Applications.
● The Common Thread: The database is the foundation of this entire spectrum. It allows the
web to transform from a simple publishing platform into a global software platform.
● Closing: "As networked-application developers, our goal is to choose the right point on
this spectrum to balance performance, cost, and user experience.".
References
Berners-Lee, T., Fielding, R., & Masinter, L. (2005). Uniform Resource Identifier (URI):
Generic Syntax. Internet Engineering Task Force (IETF).
[Link]
Duckett, J. (2014). JavaScript and JQuery: Interactive Front-End Web Development. Wiley.
Fielding, R. T. (2000). Architectural Styles and the Design of Network-based Software
Architectures (Doctoral dissertation). University of California, Irvine.
Flanagan, D. (2020). JavaScript: The Definitive Guide (7th ed.). O'Reilly Media.
Mozilla Developer Network (MDN). (2023). Introduction to the DOM.
[Link]
n
W3C. (2023). Web Architecture and Technologies. World Wide Web Consortium.
[Link]
Deitel, H., Deitel, P., & Associates. (2011). Internet and World Wide Web - How to Program (5th
ed.). Pearson Education.
Godbole, A. S., & Kahate, A. (2012). Web Technologies (2nd ed.). Tata McGraw Hill.
International Organization for Standardization (ISO). (1947). OSI Model Reference Framework
(Layer 7).