Gallery
Share
Explore

s24 June 3 Web Programming Class Plan Outline


Lesson plan that integrates aesthetics into ethics, art, and architecture into a Web Site Design.
By telling an interesting and engaging story with Digital Story tell methodologies, we will
We will weave these concepts into the context of a web page HTML design class, centered around the theme "The Western Aesthetic: An Evaluation of How Visual Arts Promoted the Evolution of Western European Science and Rational Materialistic Philosophy."
We will explore 12 pivotal epochs of European history, each marked by a significant artistic work that reflects and informs the philosophical and scientific developments of its time.
Let's begin:

Lesson Plan Overview

Objective: Students will create a series of web pages, each dedicated to one of the 12 epochs of European history, analyzing how a selected work of art or architecture reflects the philosophical and scientific advancements of its time.

Epochs and Corresponding Artworks

Stone Age: The Birth of Artistic Expression
Artwork: Lascaux Cave Paintings
Lesson Focus: The emergence of symbolic thinking and its role in the development of early human societies.
HTML Elements: Basic HTML structure, image embedding.
Ancient Greece: The Foundation of Western Philosophy
Artwork: The Parthenon
Lesson Focus: Classical architecture and its reflection of Greek philosophical ideals of harmony, proportion, and rationality.
HTML Elements: Div elements, CSS basics for layout.
Roman Empire: Engineering and Empire
Artwork: The Pantheon
Lesson Focus: The intersection of engineering prowess and religious dedication, reflecting Roman values.
HTML Elements: Semantic HTML, introduction to forms.
Medieval Period: The Gothic Cathedral
Artwork: Notre-Dame de Paris
Lesson Focus: The Gothic style as an expression of medieval spirituality and scholasticism.
HTML Elements: Tables, advanced CSS for complex layouts.
Renaissance: Humanism and Perspective
Artwork: The School of Athens by Raphael
Lesson Focus: The revival of classical ideals and the development of linear perspective, reflecting humanist philosophy.
HTML Elements: Multimedia embedding, responsive design principles.
Baroque Period: Dramatic Expression and Absolutism
Artwork: The Ecstasy of Saint Teresa by Bernini
Lesson Focus: The Baroque style's emotional intensity and its reflection of the Counter-Reformation.
HTML Elements: CSS animations, advanced positioning.
Enlightenment: Reason and Revolution
Artwork: The Death of Socrates by Jacques-Louis David
Lesson Focus: Enlightenment ideals of reason, individualism, and social contract theory.
HTML Elements: JavaScript basics, interactive elements.
Romanticism: Emotion and Nature
Artwork: The Wanderer above the Sea of Fog by Caspar David Friedrich
Lesson Focus: The Romantic emphasis on emotion, nature, and individual experience.
HTML Elements: Parallax scrolling, advanced CSS effects.
Industrial Revolution: Progress and Pessimism
Artwork: The Hay Wain by John Constable
Lesson Focus: The tension between pastoral ideals and industrial progress.
HTML Elements: SVG graphics, data visualization techniques.
Modernism: Innovation and Fragmentation
Artwork: Les Demoiselles d'Avignon by Pablo Picasso
Lesson Focus: The break from tradition and exploration of new artistic forms reflecting modernist thought.
HTML Elements: HTML5 new elements, media queries.
Postmodernism: Plurality and Parody
Artwork: The AT&T Building by Philip Johnson
Lesson Focus: Postmodern architecture's eclecticism and questioning of grand narratives.
HTML Elements: CSS Grid, advanced layout techniques.
Contemporary Period: Digital and Global Art
Artwork: The Weather Project by Olafur Eliasson
Lesson Focus: The interplay between technology, environment, and globalism in contemporary art.
HTML Elements: Web APIs, integrating third-party services.

Detailed Lesson Structure for Each Epoch

Introduction (10 minutes)
Brief historical context of the epoch.
Overview of the selected artwork and artist/architect.
Art and Philosophy Discussion (20 minutes)
In-depth analysis of how the artwork reflects the philosophical and scientific developments of its time.
Interactive discussion on the ethical implications and societal impact.
Technical HTML/CSS/JavaScript Lesson (30 minutes)
Hands-on coding session focusing on specific HTML/CSS/JavaScript elements relevant to the epoch.
Building a web page section that showcases the artwork and integrates historical and philosophical analysis.
Project Work (30 minutes)
Students work on their web pages, applying the day's lessons.
Instructor provides individual support and feedback.
Presentation and Discussion (20 minutes)
Students present their web pages to the class.
Group discussion and critique, focusing on both the technical and conceptual aspects of the work.

Assessment

Web Page Projects: Graded on both technical proficiency and depth of analysis.
Class Participation: Assessed through contributions to discussions and presentations.
Final Presentation: Students present their complete website, encompassing all 12 epochs.
Final presentation of your Website will be on GIT PAGES.

Resources

Primary Sources: Historical texts, philosophical writings.
Art References: High-quality images of the selected artworks, architectural plans.
Technical Guides: HTML, CSS, and JavaScript tutorials and references.
This structure will guide your students through an exploration of the interplay between aesthetics, ethics, and historical development, all while honing their web design skills.
Let us embark on this journey through the annals of European history, where art and philosophy converge to shape the modern world.
megaphone

Lesson Plan: Building an HTML Website with CSS and JavaScript DOM Manipulation


Course Title: MO1003 Introduction to Web Programming ​Lesson Title: The Western Aesthetic: Evolution of Visual Arts in Western European History

Lesson Objectives:

Understand the role of visual arts in the evolution of Western European science and philosophy.
Learn HTML, CSS, and JavaScript DOM manipulation to create a multi-page website.
Analyze and interpret the impact of specific artworks on European historical development.
Apply web programming skills to develop and style web pages showcasing historical epochs.

Materials Needed:

Visual Studio Code
Internet Access
GitHub account for hosting the website
Artworks from selected historical periods
Course textbooks: "HTML5 Pocket Reference" by Jennifer Niederst Robbins and "Murach’s HTML5 and CSS3" by Anne Boehm & Zak Ruvalcaba

Learning Points:

Introduction to the Lesson Plan and Objectives:
Overview of the 12 pivotal epochs in European history.
Explanation of how each epoch will be represented by an artwork.
Outline of the website project and final deliverables.
Epoch 1: Stone Age (Prehistoric Art):
Artwork: Chauvet Cave Paintings
Web Development Focus: Introduction to HTML structure.
Activities: Create an HTML page with headings, paragraphs, and images.
Epoch 2: Classical Antiquity (Greek and Roman Art):
Artwork: Parthenon Sculptures
Web Development Focus: Styling with CSS.
Activities: Apply CSS styles to the HTML page created in Epoch 1.
Epoch 3: Early Middle Ages (Byzantine Art):
Artwork: Hagia Sophia Mosaics
Web Development Focus: CSS Grid and Flexbox.
Activities: Create a layout for displaying artwork information using CSS Grid and Flexbox.
Epoch 4: High Middle Ages (Gothic Art):
Artwork: Chartres Cathedral Stained Glass
Web Development Focus: Advanced CSS techniques.
Activities: Implement CSS transitions and animations to highlight art features.
Epoch 5: Renaissance (Italian Renaissance):
Artwork: Leonardo da Vinci's The Last Supper
Web Development Focus: Introduction to JavaScript.
Activities: Add JavaScript to enhance user interaction on the Renaissance page.
Epoch 6: Baroque (Baroque Art):
Artwork: Caravaggio's The Calling of St Matthew
Web Development Focus: DOM Manipulation.
Activities: Use JavaScript to manipulate DOM elements and create interactive features.
Epoch 7: Neoclassicism (Neoclassical Art):
Artwork: Jacques-Louis David's The Death of Socrates
Web Development Focus: Event Handling in JavaScript.
Activities: Implement event listeners to create interactive elements on the Neoclassical page.
Epoch 8: Romanticism (Romantic Art):
Artwork: Caspar David Friedrich's Wanderer above the Sea of Fog
Web Development Focus: Form Handling.
Activities: Create a form for user input and process the data using JavaScript.
Epoch 9: Realism (Realist Art):
Artwork: Gustave Courbet's The Stone Breakers
Web Development Focus: APIs and AJAX.
Activities: Fetch data from an API and display it dynamically on the webpage.
Epoch 10: Modernism (Modern Art):
Artwork: Pablo Picasso's Les Demoiselles d'Avignon
Web Development Focus: Responsive Design.
Activities: Ensure the website is fully responsive across different devices.
Epoch 11: Postmodernism (Postmodern Art):
Artwork: Andy Warhol's Campbell's Soup Cans
Web Development Focus: Web Accessibility.
Activities: Implement accessibility features to make the website usable for all users.
Epoch 12: Space Age (Contemporary Art):
Artwork: Yayoi Kusama's Infinity Mirrored Room
Web Development Focus: Hosting on GitHub Pages.
Activities: Finalize the website and deploy it on GitHub Pages.
By following this lesson plan, you will help students gain a deep understanding of web programming while exploring the fascinating interplay between art, history, and philosophy in Western European culture.

megaphone

Part One: ### Getting Started Instructions for Visual Studio Code


**Objective:**
Set up the development environment, create the directory structure for the project, and develop the initial HTML and CSS for the home landing page.
#### 1. Setting Up Visual Studio Code
**Step-by-Step Instructions:**
1. **Install Visual Studio Code:** - Go to the [Visual Studio Code website](https://code.visualstudio.com/). - Download the installer for your operating system (Windows, macOS, or Linux). - Run the installer and follow the on-screen instructions to complete the installation.
2. **Install Recommended Extensions:** - Open Visual Studio Code. - Click on the Extensions icon in the Activity Bar on the side of the window. - Search for and install the following extensions: - **HTML Snippets** - **CSS Peek** - **JavaScript (ES6) code snippets** - **Live Server** - **Prettier - Code Formatter**

2. Creating the Directory Structure

**Step-by-Step Instructions:**
1. **Create a New Project Directory:** - Open Visual Studio Code. - Click on `File > Open Folder...`. - Navigate to the location where you want to create your project and click on `New Folder`. - Name the folder `WesternAestheticProject` and click `Select Folder`.
2. **Create Subdirectories and Files:** - Inside the `WesternAestheticProject` directory, create the following subdirectories and files: ``` WesternAestheticProject/ ├── css/ │ └── styles.css ├── js/ │ └── scripts.js ├── images/ ├── index.html ```

3. Creating the Initial Home Landing Page

**Step-by-Step Instructions:**
1. **Open `index.html` File:** - In Visual Studio Code, click on the `index.html` file to open it in the editor.
2. **Write the Initial HTML Structure:** - Copy and paste the following HTML code into the `index.html` file: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Western Aesthetic Project</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <h1>Welcome to the Western Aesthetic Project</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">Epochs</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <section id="introduction"> <h2>Introduction</h2> <p>This website explores the pivotal epochs in European history through the lens of visual arts. Each epoch is represented by an iconic artwork, demonstrating the evolution of Western European science and philosophy.</p> </section> <section id="epochs-overview"> <h2>Epochs Overview</h2> <p>Discover the key periods in Western European history and their significant contributions to art and philosophy.</p> <ul> <li>Stone Age (Prehistoric Art)</li> <li>Classical Antiquity (Greek and Roman Art)</li> <li>Early Middle Ages (Byzantine Art)</li> <li>High Middle Ages (Gothic Art)</li> <li>Renaissance (Italian Renaissance)</li> <li>Baroque (Baroque Art)</li> <li>Neoclassicism (Neoclassical Art)</li> <li>Romanticism (Romantic Art)</li> <li>Realism (Realist Art)</li> <li>Modernism (Modern Art)</li> <li>Postmodernism (Postmodern Art)</li> <li>Space Age (Contemporary Art)</li> </ul> </section> </main> <footer> <p>&copy; 2024 Western Aesthetic Project. All rights reserved.</p> </footer> <script src="js/scripts.js"></script> </body> </html> ```
3. **Open `css/styles.css` File:** - Click on the `styles.css` file inside the `css` directory to open it in the editor.
4. **Write the Initial CSS Styles:** - Copy and paste the following CSS code into the `styles.css` file: ```css body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; }
header { background: #333; color: #fff; padding: 1rem 0; text-align: center; }
nav ul { list-style: none; padding: 0; }
nav ul li { display: inline; margin: 0 10px; }
nav ul li a { color: #fff; text-decoration: none; }
main { padding: 20px; }
h1, h2 { color: #333; }
footer { background: #333; color: #fff; text-align: center; padding: 10px 0; position: fixed; width: 100%; bottom: 0; } ```
5. Live Preview with Live Server: - In Visual Studio Code, right-click on the `index.html` file and select `Open with Live Server`. - This will open a new browser tab with a live preview of your HTML file. Any changes made to the HTML or CSS files will be automatically updated in the browser.
Summary By following these instructions, you will have set up Visual Studio Code, created the necessary directory structure for your project, and developed the initial HTML and CSS for the home landing page of the Western Aesthetic Project.
This foundation will allow you to continue building out the project by adding more content and functionality as the course progresses.

info

Part 2

Develop the first set of pages for the Stone Age epoch, including HTML and CSS, and introduce basic JavaScript DOM manipulation.

Objective: 2. Epoch 1: Stone Age (Prehistoric Art)
**Step-by-Step Instructions:**
1. **Create Stone Age Directory and Files:** - Inside the `WesternAestheticProject` directory, create a new directory named
- Create an HTML file named `stone-age.html` inside the `stone-age` directory.
Create a CSS file named `stone-age.css` inside the `css` directory.
`body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
h1, h2 {
color: #333;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}`.
- Create a JavaScript file named `stone-age.js` inside the `js` directory.
The updated directory structure should look like this: WesternAestheticProject/ ├── css/ │ ├── styles.css │ └── stone-age.css ├── js/ │ ├── scripts.js │ └── stone-age.js ├── images/ ├── stone-age/ │ └── stone-age.html ├── index.html
2. Update <main landing page>`index.html` to Link to Stone Age Page: - Modify the navigation menu in `index.html` to include a link to the Stone Age page: ```html <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="stone-age/stone-age.html">Stone Age</a></li> <li><a href="#">Epochs</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> ```

3. Create `stone-age.html` File:

- Open the `stone-age.html` file and add the following HTML code: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Stone Age - Western Aesthetic Project</title> <link rel="stylesheet" href="../css/styles.css"> <link rel="stylesheet" href="../css/stone-age.css"> </head> <body> <header> <h1>Stone Age Art</h1> <nav> <ul> <li><a href="../index.html">Home</a></li> <li><a href="stone-age.html">Stone Age</a></li> <li><a href="#">Epochs</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <section id="artwork"> <h2>Chauvet Cave Paintings</h2> <img src="../images/chauvet-cave-paintings.jpg" alt="Chauvet Cave Paintings"> <p>The Chauvet Cave Paintings are among the oldest known prehistoric art, dating back to around 30,000 BCE. These paintings are located in the Chauvet Cave in France and depict various animals, human handprints, and abstract patterns.</p> </section> </main> <footer> <p>&copy; 2024 Western Aesthetic Project. All rights reserved.</p> </footer> <script src="../js/stone-age.js"></script> </body> </html> ```

4. **Add CSS for Stone Age Page in `stone-age.css`:**

- Open the `stone-age.css` file and add the following CSS code: ```css body { background-color: #e0e0e0; }
#artwork { text-align: center; margin: 20px; }
#artwork img { max-width: 100%; height: auto; border: 1px solid #ccc; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); }
#artwork p { margin: 10px auto; max-width: 800px; font-size: 1.2em; } ```

5. Add Basic JavaScript DOM Manipulation in `stone-age.js`:


- Open the `stone-age.js` file and add the following JavaScript code: ```javascript document.addEventListener('DOMContentLoaded', function() { const artworkSection = document.getElementById('artwork'); const artworkInfo = document.createElement('p'); artworkInfo.textContent = 'These paintings are significant because they provide insight into the early human cognitive development and their interaction with the environment.'; artworkSection.appendChild(artworkInfo); });
6. Download an Image for the Stone Age Page: - Find an image of the Chauvet Cave Paintings online. - Save the image in the `images` directory and name it `chauvet-cave-paintings.jpg`.
7. **Live Preview with Live Server:** - In Visual Studio Code, right-click on the `stone-age.html` file inside the `stone-age` directory and select `Open with Live Server`. - This will open a new browser tab with a live preview of your HTML file. Any changes made to the HTML, CSS, or JavaScript files will be automatically updated in the browser.
#### Summary By following these instructions, you will have created the initial page for the Stone Age epoch, including HTML, CSS, and JavaScript DOM manipulation.
This page will serve as a template for creating additional epoch pages, each with its unique content and styling.
This approach ensures that students gain practical experience in building and styling web pages, as well as in using JavaScript to enhance interactivity.


megaphone

### Detailed Instructions for Part 3: Classical Antiquity (Greek and Roman Art)


Objective:** Develop the page for the Classical Antiquity epoch, including HTML, CSS, and JavaScript DOM manipulation.
1. Creating Classical Antiquity Directory and Files
Step-by-Step Instructions:**
1. **Create Classical Antiquity Directory and Files:** - Inside the `WesternAestheticProject` directory, create a new directory named `classical-antiquity`.
- Create an HTML file named `classical-antiquity.html` inside the `classical-antiquity` directory.
- Create a CSS file named `classical-antiquity.css` inside the `css` directory.
- Create a JavaScript file named `classical-antiquity.js` inside the `js` directory.
- The updated directory structure should look like this: ``` WesternAestheticProject/ ├── css/ │ ├── styles.css │ ├── stone-age.css │ └── classical-antiquity.css ├── js/ │ ├── scripts.js │ ├── stone-age.js │ └── classical-antiquity.js ├── images/ ├── stone-age/ │ └── stone-age.html ├── classical-antiquity/ │ └── classical-antiquity.html ├── index.html ```
2. Update `index.html` to Link to Classical Antiquity Page: - Modify the navigation menu in `index.html` to include a link to the Classical Antiquity page: ```html <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="stone-age/stone-age.html">Stone Age</a></li> <li><a href="classical-antiquity/classical-antiquity.html">Classical Antiquity</a></li> <li><a href="#">Epochs</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> ```
3. **Create `classical-antiquity.html` File:** - Open the `classical-antiquity.html` file and add the following HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Classical Antiquity - Western Aesthetic Project</title> <link rel="stylesheet" href="../css/styles.css"> <link rel="stylesheet" href="../css/classical-antiquity.css"> </head> <body> <header> <h1>Classical Antiquity Art</h1> <nav> <ul> <li><a href="../index.html">Home</a></li> <li><a href="../stone-age/stone-age.html">Stone Age</a></li> <li><a href="classical-antiquity.html">Classical Antiquity</a></li> <li><a href="#">Epochs</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <section id="artwork"> <h2>Parthenon Sculptures</h2> <img src="../images/parthenon-sculptures.jpg" alt="Parthenon Sculptures"> <p>The Parthenon Sculptures, also known as the Elgin Marbles, are a collection of classical Greek marble sculptures that were part of the Parthenon temple in Athens. These sculptures date back to the 5th century BCE and depict various mythological and historical scenes.</p> </section> </main> <footer> <p>&copy; 2024 Western Aesthetic Project. All rights reserved.</p> </footer> <script src="../js/classical-antiquity.js"></script> </body> </html>

4. **Add CSS for Classical Antiquity Page in `classical-antiquity.css`:**

- Open the `classical-antiquity.css` file and add the following CSS code: body { background-color: #f0f0f0; }
#artwork { text-align: center; margin: 20px; }
#artwork img { max-width: 100%; height: auto; border: 1px solid #ccc; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); }
#artwork p { margin: 10px auto; max-width: 800px; font-size: 1.2em; }

megaphone

Here's how you can modify the CSS to use Flexbox for rendering three images and three segments of text in a nicely flowing layout.

Updated stone-age.html

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stone Age - Western Aesthetic Project</title>
<link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../css/stone-age.css">
</head>
<body>
<header>
<h1>Stone Age Art</h1>
<nav>
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="stone-age.html">Stone Age</a></li>
<li><a href="#">Epochs</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="artwork">
<div class="artwork-item">
<img src="../images/chauvet-cave-paintings.jpg" alt="Chauvet Cave Paintings">
<p>The Chauvet Cave Paintings are among the oldest known prehistoric art, dating back to around 30,000 BCE. These paintings are located in the Chauvet Cave in France and depict various animals, human handprints, and abstract patterns.</p>
</div>
<div class="artwork-item">
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.