lightweight/karamata
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

initial commit of HTML5 files

Browse source
This commit is contained in:
Dave Lane 2023-07-25 21:54:31 +12:00
parent f56d0df445
commit 952ca111bb
4 changed files with 89 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
README.md
View file

@ -1,3 +1,51 @@
# karamata # Christchurch South Karamata Intermediate School
In Ōtautahi/Christchurch, Aotearoa/New Zealand
This is code accompanying 'digital empowerment' sessions with Christchurch South Karamata Intermediate School in 2023. This is code accompanying 'digital empowerment' sessions with Christchurch South Karamata Intermediate School in 2023.
## Original Concept
My intended purpose of these sessions is to help learners understand that they can actively create their own digital existence, rather than passively accepting the path dictated for them by other parties, as they currently do.
I will lift the curtain allowing learners to glimpse the inner workings of the ‘web’, and show learners how to do it for themselves. I will attempt to convey some of the structural patterns behind the media sources, tools, and services they use every day, as well as the World Wide Web and internet on which it’s built – using capabilities built into the tools they’re already familiar with. I will show how much is discoverable for those who have interest. The aim of this is to empower our tamariki to explore their digital world safely and with confidence.
With their new-found agency, I want them to start to recognise the subtle cages in which they’re put by the platforms they are told or choose to use, the limits of which they might not previously been equipped to discern.
Then, if it looks like there’s interest, I want to give them a taste of the tools they all have at their disposal, that would allow them to invent their own digital artefacts, tools, and even entire platforms (or deploy those created by others) which enable them to explore their own creative inclinations without arbitrarily restrictions or ‘glass ceilings’.
I intend to show them how, without needing to install software, they can start to tell their computer how to do what they want it to do. I’ll do that by getting them to create a file (we might need to use a gratis web-based ‘sandbox’ platform for this due to limitations in what Chromebooks can do) to hold some ‘Javascript’ code. For the record, Javascript is the language most of Google Docs is written in, along with most of the modern web. We’ll have a play with some basics.
From there, I’d like to introduce them to key software concepts, including the triumvirate of
1. Content (HyperText Markup Language aka HTML),
2. Presentation (Cascading Style Sheets aka CSS), and
3. Dynamic nteraction (Javascript aka JS).
There are many directions this could head depending on the pockets of interest. Some might want to undertake a little project. We could explore libraries of simple projects that are already in the digital Commons, which they could replicate and remix. We could look at adapting an interesting initiative called ‘Kitten’ – a simple coding framework - that some might find compelling.
I’d love to get into the idea of ‘semantic markup’ and well-structured documents and other information (which is an area almost no one in education teaches, and, I suspect, few are even aware of it).
## References
### HTML
https://developer.mozilla.org/en-US/docs/Learn/HTML
https://www.w3schools.com/html/default.asp
### CSS
https://developer.mozilla.org/en-US/docs/Learn/CSS
https://www.w3schools.com/css/default.asp
### Javascript
https://developer.mozilla.org/en-US/docs/Learn/JavaScript
https://www.w3schools.com/js/default.asp
## Examples and exercises
https://www.freecodecamp.org/news/html-button-onclick-javascript-click-event-tutorial/
## Contact me
Go to https://davelane.nz/contact

0
css/style.css Normal file
View file

34
index.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Digital Empowerment at Christchurch South Karamata Intermediate School</title>
<meta name="author" content="lightweight">
<meta name="description" content="karamata - This is code accompanying &#39;digital empowerment&#39; sessions with Christchurch South Karamata Intermediate School in 2023.">
<meta name="keywords" content="git,forge,forgejo">
<meta name="referrer" content="no-referrer">
<link rel="stylesheet" href="/css/style.css">
<script src="js/script.js"></script>
</head>
<body>
<h1>Digital Empowerment</h1>
<p>The purpose of these sessions is to show Chch South Karamata learners that they don't
have to be mere riders in their digital journey - they can become drivers.</p>
<p>Find <a href="https://forge.magnificent.nz/lightweight/karamata" title="Clicking this link will take you to a code 'repository' for this project, where you can get *all* the code.">this code</a> on the web!</p>
<div class="app1">
<p class="name">Take charge!</p>
<button onclick="changeColor()">Change to Blue</button>
</div>
<div class="app2">
</div>
<p>Questions? <a href="https://davelane.nz/contact">Get in touch</a> with Dave.</p>
</body>
</html>

5
js/script.js Normal file
View file

@ -0,0 +1,5 @@
const name = document.querySelector(".name");
function changeColor() {
name.style.color = "blue";
}