# Web Choreographies Workshop
_by Joana Chicau
@ Feminist Coding Practices, MA Internet Equalities and @BA UXD at University of Arts of London 2021-22
@ School of Cultural Technology, Xi'an Jiaotong-Liverpool University 2022
@ Data and Digital Culture 2021 - Arhuus University;
> pre-workshop reading: [Choreographic Objects by William Forsythe](https://www.williamforsythe.com/essay.html)
## ::: Part 01 ::: Intro Lecture ::: :performing_arts: :desktop_computer:
:hourglass_flowing_sand: 45 min
Joana Chicau is a graphic designer, coder, researcher — with a background in dance. She researches the intersection of the body with the constructed, designed, programmed environment, aiming at widening the ways in which digital sciences is presented and made accessible to the public. The latter has been informing a practice and exploration of various forms and formats — interweaving web programming with choreography — from the making of online platforms to performances or workshops. In parallel Chicau has been actively participating and organizing events involving multi-location collaborative coding, algorithmic improvisation, open discussions on digital equity and activism.
* [website;](https://joanachicau.com/)
* [list of live coding projects;](https://jobcb.github.io/)
* [article <body> Building: the code performance of Joana Chicau](https://esoteric.codes/blog/body-building-the-code-performance-of-joana-chicau)
* [screenshots archive;](https://www.are.na/joana-chicau/web-choreographies-other-stories)
* [staging errors videos list;](https://www.youtube.com/playlist?list=PLkRYCVc1KXTU1S47T_0GlUpKtz3MQkthA)
---
## ::: Part 02 ::: Javascript meets the DOM ::: :bow_and_arrow: :black_heart:
### Web Console Quick Tour
:hourglass_flowing_sand: 15 min
<small>__important:__ the changes made in the webpage through the webconsole won't be saved; if you refresh the page they will be lost. To keep any of the code written in class remember to copy it into an editor of your choice;</small>
1. Warm-up exercise 01:
1.1. browse a website you visit daily and open the web console
<small> — if in Firefox: on the top menu of the browser select "Tools" > "Web Developer" > "Web Console";</small>
<small> — if in Chrome: on the top menu of the browser select "View" > "Developer" > "Developer Tools"; </small>
1.2. choose two textual elements and/ or one image to manipulate in some way you would like, for eg.: change the colour, size,...
<small> — you can also right click an HTML element and select 'inspect'</small>
And take a screenshot!
### Web Console as a Real-Time Writing Tool
:hourglass_flowing_sand: 30 min
2. Warm-up exercise 02:
2.1. write one function or line of code to change an element in the page;
```javascript=101
// the Document Object Model (DOM) is a programming interface for web documents.
// it represents the page so that programs can change the document structure, style, and content.
// a web page is a document that can be either displayed in the browser window or as the HTML source.
// In both cases, it is the same document but the Document Object Model (DOM)
// representation allows it to be modified with a scripting language such as JavaScript.
//
// lets get started! we will be typing in the Web Console of your browser;
//
// this lines of code are selecting elements and re—styling them
// you can also select elements by "#id" or "".classes" names;
document.querySelector("body").style.fontSize = "100px";
document.querySelector("body").style.background="linear-gradient(70deg, Aquamarine, MistyRose, Blue, Plum, LightYellow)"
document.querySelector("body").style.background= "url(https://upload.wikimedia.org/wikipedia/commons/6/6b/Internet-Sign.jpg)";
// setting a variable
var skin = document.querySelector("body")
// adding your prefered colour as a parameter
function changeColor(newColor) {
skin.style.backgroundColor = newColor;
}
changeColor("blue")
// creating a loop for changing text in all headings
var elements = document.getElementsByTagName("h3")
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "(｡･･｡) ٩( ∩_∩ )۶ ヽ(´∇`)ﾉ ＼ (^_^ ) ノ";
}
```
And take a screenshot!
---
## ::: Part 03 ::: Making of Web Choreographies :::
:hourglass_flowing_sand: 60 min
3. In groups choose one existing online website to be your 'stage';
3.1. take 5-10 min write down a summary of how the website is structured - what is it underlying choreography?
3.2. now let's __re—choreograph!__
You can start by thinking of a concept you would like to explore, for eg. moving, re-moving, growing, stretching, accumulating, juxtaposing, layering, sequencing, scaling..
3.3 write a piece of code with a series of actions and style manipulations that convey your concept (merge different approaches from the group);
* Schema from [12 choreographic principles — Wayne Mcgregor](https://waynemcgregor.com/learning/resources/)
* [Accumulation — Trisha Brown](https://www.youtube.com/watch?v=86I6icDKH3M&list=PLkRYCVc1KXTXUQ01d45TrHs8R5WfEdC-_&index=7&t=156s)
* [Repetition — Anne Teresa de Keersmaeker](https://www.youtube.com/watch?v=i36Qhn7NhoA&list=PLkRYCVc1KXTXUQ01d45TrHs8R5WfEdC-_&index=4)
* [Different Scales — William Forsythe](https://www.youtube.com/watch?v=9-32m8LE5Xg&list=PLkRYCVc1KXTXUQ01d45TrHs8R5WfEdC-_&index=10)
---
## ::: Part 04 ::: Its Show Time! ::: :dizzy:
:hourglass_flowing_sand: 30 min
Round of presentations and documentation; be ready to screenshare and perform your choreographic codes!
:hourglass_flowing_sand: 30 min
Feedback, Reflections and Future References;
---
## ::: Reference Material :::
### more code snippets
```javascript=101
// * * * WARM-UP — EXPLORATIONS IN THE DOM * * * //
// where are we? type in the web console the commands:
navigator.userAgent
window.innerWidth
window.innerHeight
// console.log() is a function in JavaScript that writes
// a message to in the web console usually for debugging;
console.log(hello);
// this command outputs the properties of the console object
console.log(console);
console.clear();
console.log('%cHELL0!', 'color: blue; font-size: 100px;');
// JS FUNCTIONS
// defining variable x
// if you type console.log(x); prints "hello"
// if you type console.log(x, y); prints "hello 🌍"
x = "hello";
y = "🌍";
function greetings() {
console.log(x);
}
greetings()
// changing the background
document.body.style.background = "url()";
```
```javascript=101
// INTRO CHOREO-GRAPHIC CODE
function Breathing() {
var zooming = document.querySelector("body");
currentScale = 1;
currenttime = setInterval(function() {
zooming.style.transform="scale(" + currentScale + ")";
currentScale = Math.random() * 5
}, 800);
}
Breathing()
function No_Breathing() {
clearInterval(currenttime);
}
No_Breathing()
var delay="10"; // in seconds
var count='0';
var Texts=new Array();
Texts[0]="choreographies suspend certainty,";
Texts[1]="choreographies model uncertain outcomes,";
Texts[2]="choreographies may also refuse to act,";
Texts[3]="choreographies valorize failure,";
Texts[4]="choreographies traject ideas into the action of perception"
// quotes by William Forsythe;
function New_Sequence_or_Phrasing() {
document.querySelector('h1').innerHTML=Texts[count];
count++;
if(count==Texts.length){count='0';}
setTimeout("New_Sequence_or_Phrasing()",delay*100);
}
New_Sequence_or_Phrasing()
function Off_Stage () {
document.body.innerHTML = '';
document.head.innerHTML = '';
}
Off_Stage ()
```
* [file with all code snippets available in this link](https://github.com/JoBCB/Web-Development-Studio-2020/blob/main/LiveWebConsole.js)
### Web Coding Resources List
* * [Brief intro to HTML + CSS + JS](https://www.internetingishard.com/html-and-css/introduction/ "html-and-css intro")
* * [HTML + CSS + JS Cheat Sheets](https://html-css-js.com/html/)
* * [Guide to Web Console Commands](https://css-tricks.com/a-guide-to-console-commands/)
* * [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)
* * [DOM Model](https://en.wikipedia.org/wiki/Document_Object_Model#/media/File:DOM-model.svg)
* [& more references here!](https://github.com/JoBCB/Web-Development-Studio-2020/wiki/Programming-Resources)
### Artistic Practices in the Web
* * [Flee Immediately Online Mag](http://www.fleeimmediately.com "Fleeimmediately")
* * [Net Art Anthology Rhizome](https://anthology.rhizome.org/)
* * [Net Art Latino Database](http://meiac.es/latino/index.html)
* * [Safebook — Ben Grosser](https://bengrosser.com/projects/safebook/ "bengrosser")
* * [Demetricator — Ben Grosser](https://bengrosser.com/projects/twitter-demetricator/)
* * [WallStreetJournal — Olia Lialina](http://art.teleportacia.org/exhibition/online_newspapers/WallStreetJournal/ "Olia")
* * [James Bridle](http://jamesbridle.com/works/do-it)
* * [Text Free Browsing Chrome extension — Rafaël Rozendaal & Jonas Lund.](https://jonaslund.com/works/text-free-browsing/)
* * [New World — Jan R. Leegte](http://newworld.leegte.org/)
* * [JODI](https://404.jodi.org/)
* * [Mouchette](http://www.mouchette.org/index.html)
* * [Rafaël Rozendaal](https://www.newrafael.com/websites/)
* [& more references here!](https://github.com/JoBCB/Web-Development-Studio-2020/wiki/Artistic-Practices-in-the-Web)
### References on Choreographic Coding
* [& reading list, references and resources here!](https://github.com/JoBCB/Rehearsal_Series/wiki/References-on-Choreographic-Coding)
Sign in with Wallet
Connect another wallet