# Workshop semaine inaugurale: codes graphiques et informatiques détournés
du 16 au 25 septembre 2020

## Objectifs
Ce workshop permet aux étudiant-e-s d’acquérir une connaissance élémentaire des technologies de publication en utilisant l’interface de programmation WebExtensions qui permet de manipuler la structure et le comportement d’une page web (HTML, js, css). Au moyen de ces technologies, les étudiant-e-s s’approprient et détournent les codes graphiques d’un site, d’une page web, d’un média en ligne de leur choix. Ils/elles créent ainsi une ou plusieurs extensions qui sont ensuite publiées dans une galerie sur le web accompagnées d’une documentation visuelle.

## Déroulement
La première semaine (du mercredi 16 au vendredi 18 septembre) les étudiant-e-s suivent une introduction au code créatif et aux technologies web (html, javascript, DOM) et font des exercices en p5js puis avec WebExtension. L’après-midi du 18.9 est consacré à la recherche d’idées et la sélection du contenu. Du lundi 21 au mercredi 23 les étudiant-e-s produisent leurs extensions. Le jeudi 24 et le vendredi 25 (matin) sont réservés pour la documentation et la publication en ligne.

## Calendrier

#### ME 16.9

09h30 (plénière Teams):
· accueil, présentations
10h15
· intro code créatif
· intro thématique

13h00 (plénière Teams) :
· intro techique
· exercices p5js
· techno web (html, javascript, DOM)

#### JE 17.9

09h00–15h00
· exercices p5js
· présentations individuelles des exercices

15h00–17h00
· techno web (html, javascript, DOM)

#### VE 18.9

09h00 :
· point sur les objectifs de la journée

09h30–12h00 :
· techno web (html, javascript, DOM)
· exercice de manipulation de contenu

13h00–16h00 :
· formez des groupes de travail, 2-3 personnes, en prenant soin d’équilibrer les niveaux de compétence en programmation web au sein de chaque groupe
· cherchez pourquoi et comment détourner les codes graphiques et informatiques de tout ou partie d’un site ou d’une page web
· sélectionnez tout ou partie d’un site ou d’une page web dont vous détournerez la forme et/ou le contenu au moyen d’une extension web
· trouvez dans le domaine de l’art et du design des sources d’inspiration pour votre projet
· établissez et présentez un premier scénario en vue la production

16h15:
· restitution des premières idées (ca. 10 min. / groupe)

#### LU 21.9

09h00–16h00 :
· recherche et expérimentation à partir du site ou de la page web de référence: quels codes détourner ? et comment les détourner ?
· veille partagée: sur le pad, chaque groupe partage ses références: graphiques, informatiques, artistiques, techniques etc.

Tutorat par groupes (Teams):
10h30 – Lison Maÿlis Beatrice
11h30 – Chloé, Leyla, Tiki
13h15 – Manon Thibaud Alejandra
13h45 – Simone Alexandre
14h15 – Paul, Maxime

16h15 : compte rendu de la journée

#### MA 22.9

09h00–16h00 :
· recherche et expérimentation

16h15 :
· présentation intermédiaire des projets (tour de table)
· sélection définitive du contenu et du média

#### ME 23.9
09h00–16h00 :
· développement/production
16h15 : compte-rendu

#### JE 24.9
09h00–16h00 :
· développement/production
· page web de présentation (sous glitch):
- nom/titre de l’extension
– court texte de présentation (max. 600 signes)
- références
- lien pour téléchargement
- images, copies d’écran, gif avant/après

16h15 :
· compte-rendu de la journée

#### VE 25.9
09h00–12h00 :
· production (extension + mini site)
· préparation de la présentation

**15h00 : Présentation (en ligne)**
**Chaque groupe présente son projet (5-7 min.)**
**· le concept, le développement**
**· le résultat (mini-site, extension à télécharger)**
**Questions et feedback (5-7 min.)**

**15h00 Manon, Thibaud, Alejandra
15h15 Simone, Alexandre
15h30 Lison, Maÿlis, Beatrice
15h45 Chloé, Leyla, Tiki
16h00 Paul, Maxime
**

**16h15–17h00 :**
**· documentation: 3 captures d’écran, capture vidéo (10 sec.), une adresse url**

## Veille partagée
https://hackmd.io/5HunU3eqSHaIKguJ8KDyug

## Outils
https://glitch.com

## Ressources
**Thématique:**
https://drive.switch.ch/index.php/s/t5GIecM64zONthT

**Bibliographie:**
https://drive.switch.ch/index.php/s/fDNNv5hgIEjiIwv

**Technique:**
Tutoriels vidéos:
* [p5js by Dan Shiffman](https://www.youtube.com/watch?v=8j0UDiN7my4)
* [html/dom with p5js by Dan Shiffman](https://www.youtube.com/watch?v=URSH0QpxKo8&list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX)

### Groupes
- Groupe 1 : Beatrice, Lison, Maÿlis
- Groupe 2 : Chloé, Tiki, Leyla
- Groupe 3 : Thibaud, Alejandra, Manon
- Groupe 4 : Maxime et Paul
- Groupe 5 : Simone, Alexandre

## Documentation
https://drive.switch.ch/index.php/s/veDDWpgJEKIyt7U

## Exercices

### Vera Molnar Rectangles
- laurent : https://glitch.com/~vera-rectangles
- paul : https://glitch.com/edit/#!/join/33b69900-71b5-4487-9993-9a00ef682203
- tibo : https://possible-sugary-toucan.glitch.me
- Lison: https://quiver-catnip-grey.glitch.me
- Tiki:https://glitch.com/~encorerectangle
- Maÿlis : https://glitch.com/edit/#!/a-soapy-entrance?path=script.js%3A47%3A15
- Manon : https://glitch.com/~accurate-juniper-satin
- Chloé : https://glitch.com/~generative-mandala
- Alexandre: https://glitch.com/edit/#!/join/8d2b6395-ff46-4b31-a883-c7c2df3150b3
- Alejandra: https://glitch.com/~square-miown
- Beatrice (with the help of Tibo) https://glitch.com/~rough-voltaic-quill
- Maxime: https://glitch.com/~animated-towering-snowplow
- Leyla: https://glitch.com/~simplistic-stump-yarn

### DOM manipulation
- Paul : https://glitch.com/edit/#!/join/b2ac228a-5e77-4f52-80e3-40f68276e70a
- Beatrice:
https://grey-glimmer-dumpling.glitch.me/
- Leyla:
https://glitch.com/~deluxe-closed-sprite
- Simone:
https://glitch.com/~thirday--md
- Alexandre:
https://glitch.com/edit/#!/join/8bd7bb99-ef4e-4f4f-9d0f-fe2b0a00e2ad
- Alejandra:
https://glitch.com/~head-aleo

### Work in Progress

#### Chloé, Leyla, Tiki :
*21.9*
https://glitch.com/~facebook-social-distancing
*22.9*
[The Rona is everywhere ! - extension](https://drive.switch.ch/index.php/s/veDDWpgJEKIyt7U?path=%2F2.work%20in%20progress%2FEtape%202.%20Production%2FTiki%20Leyla%20Chlo%C3%A9)
*25.9*
[Présentation Glitch finale](https://covoid-19.glitch.me/)

#### Manon, Alejandra, Thibaud :

[Presentation](https://drive.switch.ch/index.php/apps/onlyoffice/s/veDDWpgJEKIyt7U?fileId=2691073361)

*21.9 , 22.9* Building blocks
[Making the web lose its visual codification](https://glitch.com/~glossy-humorous-ghoul)
[Synesthesia: Hearing and seeing Words](https://glitch.com/~experiment-ale)
[Face detection and masking (Local)](https://drive.switch.ch/index.php/apps/files_sharing/ajax/publicpreview.php?file=%2F2.work%20in%20progress%2FEtape%202.%20Production%2FManon%2C%20Thibaud%2C%20Alejandra%2Fexplorations%2FCapture%20d%E2%80%99%C3%A9cran%20du%202020-09-22%2010-01-48.png&c=281de3454ae06c84da40997c20e96e8d&x=1920&y=1920&a=1&t=veDDWpgJEKIyt7U)
[Image distortion](https://just-roomy-radio.glitch.me)
[Face dilution (Experimentation)](https://drive.switch.ch/index.php/s/veDDWpgJEKIyt7U?path=%2F2.work%20in%20progress%2FEtape%202.%20Production%2FManon%2C%20Thibaud%2C%20Alejandra%2Fexplorations#/)
[Leaves over images](https://mammoth-ringed-bridge.glitch.me/)

*23* Building the Extension, working with the narration, and making a model of the presentation site:

https://drive.switch.ch/index.php/s/veDDWpgJEKIyt7U?path=%2F2.work%20in%20progress%2FEtape%202.%20Production%2FManon%2C%20Thibaud%2C%20Alejandra#pdfviewer

*24* Building the presentation site in glitch:

https://presentation-page-privatia.glitch.me/

*25* Preparing the presentation and final details of the extension:
https://drive.switch.ch/index.php/s/veDDWpgJEKIyt7U?path=%2F2.work%20in%20progress%2FEtape%202.%20Production%2FManon%2C%20Thibaud%2C%20Alejandra#pdfviewer

https://drive.switch.ch/index.php/s/veDDWpgJEKIyt7U?path=%2F4.Nicolas%20documentation%2Fprivatia%20-%20Thibaud%20Alejandra%20Manon%2Fextension

https://presentation-page-privatia.glitch.me/
#### Beatrice, Lison, Maÿlis
*21.9*
https://glitch.com/edit/#!/nyt1?path=script.js%3A17%3A3
*22.9*
version 1:
https://glitch.com/edit/#!/nyt-pile?path=style.css%3A1%3A0
verion 2:
https://glitch.com/edit/#!/nyt-pile3?path=script.js%3A36%3A35
version 3:
https://glitch.com/edit/#!/nyt-pile4?path=script.js%3A34%3A44
version 4:
https://nyt-pile5.glitch.me/
https://glitch.com/edit/#!/nyt-pile5?path=script.js%3A22%3A28

#### Maxime et Paul
*21.9* [presentation](https://drive.switch.ch/index.php/s/veDDWpgJEKIyt7U?path=%2F2.work%20in%20progress%2FEtape%202.%20Production%2FMaxime%20et%20Paul#pdfviewer)

Proposer une extension qui permet de limiter la consommation de données, en épurant l'interface web. Retirer les images, les scripts JS en bloquant les requêtes URL et en arriver à une interface purement textuelle.
Nous essayons de travailler à partir du site d'une galerie d'art et d'ainsi proposer une nouvelle lecture du contenu artistique sur le web.
Hypothétiquement, nous aimerions développer une extension qui s'étendrait à tous les sites.

*22.9*
https://glitch.com/~laurence-galerie (notre version)
http://www.galerielaurencebernard.ch/ (original)

*23.9*

https://glitch.com/~laurence-galeriev2 (version2)

Nous avons amélioré le script pour qu'il mette le titre alternatif ("alt") des images au centre du cadre et uniformisé encore un peu plus le style de notre script.

*24.9* **Présentation 2.0 (version finale) :**

Request.png est une extension web qui efface les éléments d'une page web en fonction du nombre de requêtes que cette dernière envoie à l'utilisateur.
L'extension comptabilise le nombre de requêtes et retire au fur et à mesure, les images, la couleur et la typographie du site. Ceci à pour conséquence la déconstruction progressive des pages énergivores. Si le site envoie trop de requêtes, il est dénudé jusqu'à son squelette, donnant ainsi l'impression qu'il est en veille ou en économie d'énergie.
L'objectif n'est pas tant de rendre une navigation minimaliste et lisible mais plutôt de proposer une critique quand à la consommation énergitique liée aux flux de données sur le web.

Cette dimension écologique du web nous a été en grande partie inspirée par le magazine LOW-TECH qui possède un site internet hébergé sur serveur alimenté à l'énergie solaire. L'apparence de ce dernier a donc dû s'adapter à l'énergie limitée qui lui était offerte.
L'art ASCII et des pionniers de l'art numérique comme Ken Knowlton nous ont également inspirés pour le traitement graphique mis en place dans l'extension.

SITE WEB : https://glitch.com/edit/#!/join/d7fb2a2b-a8dc-4419-ba59-5417fbb4e2e0

#### Simone, Alexandre
*22.9*

https://glitch.com/edit/#!/def-bio-suisse?path=script.js%3A90%3A1

https://glitch.com/edit/#!/join/6a017c15-8055-45eb-9ac4-c01179700f05

https://glitch.com/edit/#!/join/b1e2da75-906a-47f7-bb25-2374aa2bef45 (Site Web)

GOALS: Critique extention about the importance of colors in a product service website, in our case a biological company. What happens if we mess up their color scheme? Will the function remain the same? How much the colors tells about the company, and in this case, the product they are selling?

TECHNICAL ISSUES: trying to make an interactive "onclick" color changes // make it functional for the javascript language