SI26 Declarative companions: Difference between revisions

From XPUB & Lens-Based wiki
(Created page with " == Prompt, part 1: Describe == Describe in English a chosen companion object - an object that accompanies you in your daily life, in your practice, in your social life, that you cherish; or a space; This description must be: * Short, between 8 and 12 simple sentences, using simple words * Formal, describing the formal characteristics of the object (the shapes of its various parts; its uses; its possible movements; its sensitive ergonomics: hardness, texture, smell, w...")
 
No edit summary
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This page develop an exercise started on the first day of the [[SI26 | Declarations special issue]].


== Prompt, part 1: Describe ==
== Prompt, part 1: Describe ==
Line 8: Line 9:
* Sensitive, talks about the personal bond we have with the object
* Sensitive, talks about the personal bond we have with the object


[https://pad.xpub.nl/p/declarative-companions etherpad of our descriptions]


== Prompt, part 2: Draw ==
== Prompt, part 2: Draw ==


Each CSS “sentence” - technically a pair of a '''property''' and a '''value''' inside a '''selector''' - is called a declaration.


''Like the choice of words we decide to use to tell a story, these declarations can speak to our intentions and the narrative we place on the things we make on the web.''
Starting with a description of a companion object written by someone else, draw the object in CSS.
# create an empty HTML document on your computer
# copy paste the description of someone else inside of the <code>body</code>
# you're allow to add as many HTML tag as you want, to break the text into different part, or add element, but the description have to keep the same order
# you have to style the description, using CSS, by using the description itself as design instruction
* we don't guess and illustrate the object, but interpret one by one the descriptive phrases in CSS.
* we play with metaphors and symbols, a single words can lead to a graphical principale, we don't have to translate everything.
* we try not to do a mock-up, but to take it as a writing (CSS) exercise, embracing the declarative approach and to articulate form & content in new ways
here's a list of questions that can help
* which element ends up inside which? (nested structure)
* does movement become scroll, or cursor?
* which part interact, which one are fixed?
* what is soft, what is hard?
* how things flow, like a river, like a grid?
* does touch become click, or cursor?
* does brilliance become color play or animated gradients?
* does warmth become luminosity?
* what is the heaviness of a website?
* what is its speed?
* what is its texture?


== Ressources ==
== Ressources ==
Line 17: Line 46:
Here some ressources on learning the basics of HTML & CSS
Here some ressources on learning the basics of HTML & CSS


* [https://fabulations.declarations.style/cool-css-words.html cool CSS words] - Doriane
* [https://coolguy.website/web-zine/01/ Web-zine] - Zach Mandeville
* [https://coolguy.website/web-zine/01/ Web-zine] - Zach Mandeville
* [https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics HTML basics], [https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics CSS basics] - Mozilla
* [https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics HTML basics], [https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics CSS basics] - Mozilla
Line 22: Line 52:
* [https://blog.geocities.institute/archives/7163 Learning HTML/CSS in Historical Context] - Olia Lialina
* [https://blog.geocities.institute/archives/7163 Learning HTML/CSS in Historical Context] - Olia Lialina


Drawing with CSS
Drawing with CSS, by drawing what i probably mean is an articulation of form and content that can not be untangled easily: where CSS becomes content or HTML becomes forms


* [http://art.teleportacia.org/exhibition/stellastar/ Some Universe] - Olia Lialina
* [http://art.teleportacia.org/exhibition/stellastar/ Some Universe] - Olia Lialina
Line 30: Line 60:
* [https://declin-sequence.neocities.org/ declin sequence] - Raphael Bastide
* [https://declin-sequence.neocities.org/ declin sequence] - Raphael Bastide
* [https://where-fears-hi.de/ where fears hide] - Raphael Bastide
* [https://where-fears-hi.de/ where fears hide] - Raphael Bastide
* [https://raphaelbastide.com/greetings/2024/ 2024], [https://raphaelbastide.com/greetings/2023/ 2023] - Raphael Bastide
* [https://dinakelberman.com/reflects/ reflects] - Dina kelberman
* [https://dinakelberman.com/reflects/ reflects] - Dina kelberman
* [https://taichi.pink/2019-12-16_wind-poem/ wind poem] - Taichi
* [https://taichi.pink/2019-12-16_wind-poem/ wind poem] - Taichi

Latest revision as of 17:45, 7 January 2025

This page develop an exercise started on the first day of the Declarations special issue.

Prompt, part 1: Describe

Describe in English a chosen companion object - an object that accompanies you in your daily life, in your practice, in your social life, that you cherish; or a space; This description must be:

  • Short, between 8 and 12 simple sentences, using simple words
  • Formal, describing the formal characteristics of the object (the shapes of its various parts; its uses; its possible movements; its sensitive ergonomics: hardness, texture, smell, weight, etc.)
  • Sensitive, talks about the personal bond we have with the object

etherpad of our descriptions

Prompt, part 2: Draw

Each CSS “sentence” - technically a pair of a property and a value inside a selector - is called a declaration.

Like the choice of words we decide to use to tell a story, these declarations can speak to our intentions and the narrative we place on the things we make on the web.

Starting with a description of a companion object written by someone else, draw the object in CSS.

  1. create an empty HTML document on your computer
  2. copy paste the description of someone else inside of the body
  3. you're allow to add as many HTML tag as you want, to break the text into different part, or add element, but the description have to keep the same order
  4. you have to style the description, using CSS, by using the description itself as design instruction
  • we don't guess and illustrate the object, but interpret one by one the descriptive phrases in CSS.
  • we play with metaphors and symbols, a single words can lead to a graphical principale, we don't have to translate everything.
  • we try not to do a mock-up, but to take it as a writing (CSS) exercise, embracing the declarative approach and to articulate form & content in new ways

here's a list of questions that can help

  • which element ends up inside which? (nested structure)
  • does movement become scroll, or cursor?
  • which part interact, which one are fixed?
  • what is soft, what is hard?
  • how things flow, like a river, like a grid?
  • does touch become click, or cursor?
  • does brilliance become color play or animated gradients?
  • does warmth become luminosity?
  • what is the heaviness of a website?
  • what is its speed?
  • what is its texture?

Ressources

Here some ressources on learning the basics of HTML & CSS

Drawing with CSS, by drawing what i probably mean is an articulation of form and content that can not be untangled easily: where CSS becomes content or HTML becomes forms

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=SI26_Declarative_companions&oldid=285778"