SI26: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
(14 intermediate revisions by the same user not shown)
Line 4: Line 4:


==Declarations==
==Declarations==
[[File:Declarations.png | 600px | thumb | center | A representation of the declarative layer of CSS that mediate our daily interaction with technology]]


Declarations is an ongoing trans-disciplinary artistic research project into the poetic materiality of the CSS web-standard and its echoes on design and artistic practices.
Declarations is an ongoing trans-disciplinary artistic research project into the poetic materiality of the CSS web-standard and its echoes on design and artistic practices.
Line 12: Line 14:


An [https://declarations.style/observatory.html evolving selection of declarations experiment], Doriane will present some of those progressively through the sessions.
An [https://declarations.style/observatory.html evolving selection of declarations experiment], Doriane will present some of those progressively through the sessions.
==Reader==
A selection of references to go further.
{| class="wikitable"
|-
! Author !! Title !! Year
|-
| Nolwenn Maudet || Tactical Design || 2023
|-
| J. R. CARPENTER || [http://luckysoap.com/statements/handmadeweb.html A Handmade Web] || 2015
|-
| Zach Mandeville || [https://coolguy.website/basic-html-competency-is-the-new-punk-folk-explosion/ Basic HTML Competency Is the New Punk Folk Explosion!] || 2016
|-
| Laurel Schwulst || [https://thecreativeindependent.com/essays/laurel-schwulst-my-website-is-a-shifting-house-next-to-a-river-of-knowledge-what-could-yours-be/ My website is a shifting house next to a river of knowledge. What could yours be?] || 2018
|-
| Femke Snelting || [https://constantvzw.org/verlag/spip.php?page=article&id_article=101&mot_filtre=5&id_lang=0# Dividing & Sharing] || 2008
|-
| Frank Chimero || [https://frankchimero.com/blog/2015/the-webs-grain/ The web's grain] || 2015
|-
| Olia Lialina || [http://art.teleportacia.org/observation/vernacular/ A Vernacular Web 1,2,3] || 2005, 207, 2010
|-
| John Allsopp || [https://alistapart.com/article/dao/ A Dao of Web Design] || 2000
|}


==Special issue: <code>display</code> and <code>position</code>==
==Special issue: <code>display</code> and <code>position</code>==


In the context this XPUB special issue, Declarations will focus on something quite specific.
In the context this XPUB special issue, Declarations will focus on something quite specific.
The idea is to take a specific angle on the learning of CSS: to be linguists at the same time than learning the language. The special issue is structured in 3 chapters:
The idea is to take a weird angle on the learning of CSS: to be linguists at the same time than learning the language.  


1. exploring the linguistic aspect of web-languages
The special issue is structured in 3 chapters:
2. investigating & documenting cultural uses of specific CSS properties
 
3. speculation as a tool to think about it differently
# exploring the linguistic aspect of web-languages
# investigating & documenting cultural uses of specific CSS properties
# speculation as a tool to think about it differently


Two CSS property have been choosing in that regard: <code>display</code> and <code>position</code>.
Two CSS property have been choosing in that regard: <code>display</code> and <code>position</code>.
They are interesting because they show how CSS is a language, notably by the use of non-numeric value and keyword with meaning. They also both have been subject to many change in the standard: unfolding a whole cultural history of the web that lies in the words it uses.
They are interesting because they show how CSS is a language, notably by the use of non-numeric value and keyword with meaning. They also both have been subject to many change in the standard: unfolding a whole cultural history of the web that lies in the words it uses.


By reading the standard it appears that this is a rather complex propeties, what does it mean for certain things to be block and other the be inline? what does it mean to be inline-block?
By reading the standard it appears that this is a rather complex properties. For example for display we can ask ourselves:
What does the words block and inline means? how where they chosen? by who?
How are they implemented, what complexities or differences are often unseen in those processes?


===Standard means blurry and frictions===
* What does it mean for certain things to be block and other the be inline? what does it mean to be inline-block?
* How and why where table, flex and grid invented? Do we need more? What are the motivations and by who was it done?
* How are they implemented, what complexities or differences are often unseen in those processes?
* What does the words "block" and "line" means outside of CSS but through design history?


CSS is a standard, meaning its edges are blurry. CSS is a standard maintained by the W3C (the World Wide Web Consortium). At its core, CSS is a set of recommendations, suggesting how things should be interpreted. Coming from dreams of accessibility and openness, it leaves the freedom to each software to follow or deviate from the standard.
The subject of [[SI26: CSS linguistics | becoming CSS linguists]] will be introduced and expended in its dedicated page .
History -- notably the "the browser wars" - showed that there are divergences about which logic should dictate its evolution. Preferences of default styling, properties considered superfluous and thus removed (haikon lee CSS region), or unofficial ones forced in the standard. Knowing whether it makes sense to use a properties has became its own science, culminating in the well-named website Can I use. Technical decisions lead to cultural impact. We can only imagine how the choices of what makes it to the CSS standard could have redefined our attention to various visual elements, its impacts on our lives expanding far outside of the screens space. Therefore it seems fundamental for Declarations to ask what are the power dynamics, as well cultural positioning, at play in the CSS standard? Who are the actors of this political ecosystem and what are their motivations?


One the desire of Declarations is to create a corpus and network of meaningfull CSS artistic practices as a tool to enter in conversation with the standard itself. Through transdisciplinarity, it tries to not only speak from a designer or publisher POV, but look at the work of artists, amateur, people with literary background, cultural studies, poets and hackers. The research wishes to enter in conversation with W3C people, and maybe have a seat at their table, but from a different perspective: one that is not only motivated by the technics of certain properties but also by the meaning of the words.
==Chapt.1 Words are events, they do things, change things (Entering CSS linguistics)==


===Inline-block fable===
[[File:Words.png | 600px | thumb | center | Words are events, they do things, change things. They transform both speaker and hearer; they feed energy back and forth and amplify it. They feed understanding or emotion back and forth and amplify it. — Ursula K. Le Guin, The Wave in the Mind: Talks and Essays on the Writer, the Reader and the Imagination ]]


A little fable that show the linguistic nature of the CSS web-language in a curious way is the one of <code>inline-block</code>.
===Monday 6 January===


It can be easy for an educated web-developer to describe what is <code>display: block;</code>: well, they are big block that take all width, they stack vertically and take only the necessary height they need. Same apply for <code>display: inline;</code>: well, they are lines of text, going from left to right or right to left, and whenever there is no space left to write the next character, it flows to the next line.
morning:
But let's try to explain with the same simple language what is <code>display: inline-block;</code>? Much harder.


However, that doesn't prevent us to use it. In fact, the same educated web-developer might know exactly when and where to use it in order to produce a desired result in terms of design, because they saw it in use by other and learn with instinct and try and error how and when to use it. It is very similar to how we learn to use natural language: we hear people say some words, and at some point we can use them in sentences, but that doesn't mean we can define them as one would do in a dictionnary, or as an ethymologist, or as a linguist. Our instinctive but limited understanding of inline-block highlight to me how CSS is really a language that we "speak" and "learned" by using-making the web.
* A [https://declarations.style/pages/about.html presentation of the declarations research project], with quotes and some illustrations of how the research is looking at declarative web-languages. It is important to read the first and second part (what is CSS, and the research questions).
* We will watch the video essay by Miriam Suzanne [https://www.youtube.com/watch?v=aHUtMbJw8iA&abchannel=MozillaDeveloper Why is CSS so weird] as an starting point to untangle some questions of the research together.


In the special issue we will try to deconstruct this instinct and take the role of linguist. We will ask ourselves: "Wait, what does inline-block actually mean?".
afternoon:  
 
===Prescriptive and descriptive===


"Linguistic prescription is the establishment of rules defining preferred usage of language, including rules of spelling, pronunciation, vocabulary, morphology, syntax, and semantics. Linguistic prescriptivism may aim to establish a standard language, teach what a particular society or sector of a society perceives as a correct or proper form, or advise on effective and stylistically apt communication.  
a first exercice [https://declarations.style/declarative-companion-le75-graphic-design.html Declarative companion], in group, on a pad, using [https://cc.vvvvvvaria.org/wiki/Octomode Octomode].
If usage preferences are conservative, prescription might appear resistant to language change; if radical, it may produce neologisms. Such prescription may be motivated by attempts to improve the consistency of language to make it more "logical"; to improve the rhetorical effectiveness of speakers; to align with the prescriber's aesthetics or personal preference; to impose linguistic purity on a language by removing foreign influences; or to avoid causing offense (i.e. for etiquette or political correctness).


Prescriptive approaches to language are often contrasted with the descriptive approach of academic linguistics, which observes and records how language is actually used (while avoiding passing judgment). The basis of linguistic research is text (corpus) analysis and field study, both of which are descriptive activities. Description may also include researchers' observations of their own language usage. In the Eastern European linguistic tradition, the discipline dealing with standard language cultivation and prescription is known as "language culture" or "speech culture"."
Prompt, part 1: 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:


- Wikipedia, Linguistic prescription
* 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


During the special issue, we will not only learn to make webpage with CSS, but also look at both:
Here some ressources on learning the basics of HTML & CSS


* prescriptive side of CSS: the standard by the W3C, and its evolution
* [https://coolguy.website/web-zine/01/ Web-zine] - Zach Mandeville
* descriptive side of CSS: the cultural use of CSS by amateur & designer over the evolution of the web
* [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://www.youtube.com/watch?v=CkzbI1Tv_rQ&t=701s&ab_channel=LaurelVideo Basics of HTML], [https://www.youtube.com/watch?v=BUZIaTHm_oE&ab_channel=LaurelVideo Basics of CSS] - Laurel Schwultz
* [https://blog.geocities.institute/archives/7163 Learning HTML/CSS in Historical Context] - Olia Lialina


==Reader==
Drawing with CSS


A selection of references to go further.
* [http://art.teleportacia.org/exhibition/stellastar/ Some Universe] - Olia Lialina
 
* [https://pad.profolia.org/false_memories False Memories] - Olia Lialina
{| class="wikitable"
* [https://veryinteractive.net/pages/coding-from-life.html Coding from life ] - Laurel Schwultz
|+ Caption text
* [https://kimasendorf.com/css-compositions/ CSS Compositions] - Kim Asendorf
|-
* [https://declin-sequence.neocities.org/ declin sequence] - Raphael Bastide
! Header text !! Header text !! Header text
* [https://where-fears-hi.de/ where fears hide] - Raphael Bastide
|-
* [https://dinakelberman.com/reflects/ reflects] - Dina kelberman
| Example || Example || Example
* [https://taichi.pink/2019-12-16_wind-poem/ wind poem] - Taichi
|-
* [https://leanderherzog.ch/2017/heizig/ heizig] - leanderherzog
| Example || Example || Example
* [https://tiana.computer/ tiana.computer] - Tiana Dubeck
|-
* [https://refringo.glitch.me/ Refringo]
| Example || Example || Example
* [https://www.miriamsuzanne.com/2020/12/08/css-art/ CSS ART] - Miriam Suzanne
|}
* [https://pattle.github.io/simpsons-in-css/ Simpson in CSS]
 
* [https://chromewebstore.google.com/detail/abstract-browsing/nmkbjeagaobhphiipgigbjhligebkfcg?pli=1 Abstract Browsing] - Rafaël Rozendaal
* Nolwenn Maudet, Tactical Design (link to come, the english translation will be published through the research website https://declarations.style)
* [https://weathergradient.com/ weathergradient] - Jon provencher
* J. R. CARPENTER, A Handmade Web http://luckysoap.com/statements/handmadeweb.html
* [https://www.csszengarden.com/pages/alldesigns/ CSS zen garden]
* Zach Mandeville, Basic HTML Competency ... https://coolguy.website/basic-html-competency-is-the-new-punk-folk-explosion/
* [https://buttons.leegte.org/about.html Buttons, 2023] - Jan Robert Leegte
* Laurel Schwultz, My website ... https://thecreativeindependent.com/essays/laurel-schwulst-my-website-is-a-shifting-house-next-to-a-river-of-knowledge-what-could-yours-be/
* [https://css-paint.constraint.systems/ CSS Paint] - constraint.systems
* Femke Snelting, Dividing & Sharing https://constantvzw.org/verlag/spip.php?page=article&id_article=101&mot_filtre=5&id_lang=0#
* [https://thehtml.review/ the html review]
* Frank CHimero, The web's grain https://frankchimero.com/blog/2015/the-webs-grain/
* [https://loremipsum.ro/fonts/css-font/ loremipsum]
* Olia Lialina, A Vernacular Web 1,2,3 http://art.teleportacia.org/observation/vernacular/
* [http://desandro.github.io/curtis-css-typeface/ Curtis CSS typeface]
* John Allsopp, A Dao of Web Design https://alistapart.com/article/dao/
* [https://declarations.style/live-coding-le-wonder.html Declarations live coding] - Doriane
 
* [https://declarations.style/dismantle-this-template.html Dismantle this template] - Clara Pasteau
==Chapt.1 Words are events, they do things, change things (Entering CSS linguistics)==
* [http://sohyeon.online/window.html The sky through the window] - Sohyeon Lee
 
* [https://tell.declarations.style/skies/ Where is the sky of a website] - Lara Dautun, Camillo Garcia, Sohyeon Lee
===Monday 6 January===
 
morning:
 
* A [https://declarations.style/pages/about.html presentation of the declarations research project], with quotes and some illustrations of how the research is looking at declarative web-languages. It is important to read the first and second part (what is CSS, and the research questions).
* We will watch the video essay by Miriam Suzanne [https://www.youtube.com/watch?v=aHUtMbJw8iA&abchannel=MozillaDeveloper Why is CSS so weird] as an starting point to untangle some questions of the research together.
 
afternoon:  
 
* a first exercice [https://declarations.style/declarative-companion-le75-graphic-design.html Declarative companion], in group, on a pad, using [https://cc.vvvvvvaria.org/wiki/Octomode Octomode].


===Monday 13 January===
===Monday 13 January===
Line 161: Line 181:


===Monday 24 March===
===Monday 24 March===
==Chapt.1 Parallel sessions==
===Tuesday 7 January, with Joseph===
===Tuesday 14 January, with Manetta===
===Wednesday 15 January, Methods with Lídia===
===Tuesday 21 January, with Joseph===
===Wednesday 22 January, Methods with Lídia===
==Chapt.2 Parallel sessions==
===Tuesday 28 January, with Manetta===
===Tuesday 4 February, with Joseph ===
===Wednesday 5 February, Methods with Lídia===
===Tuesday 11 February, with Manetta ===
nb: ''ONLINE OPEN DAY 10-11 (Joseph?), 17-18 (Manetta?)''
===Tuesday 18 February, with Joseph===
===Wednesday 19 February, Methods with Lídia===
==Chapt.3 Parallel session ==
===Tuesday 4 March, with Joseph===
===Wednesday 5 March, Methods with Lídia===
===Tuesday 11 March, with Joseph===
===Tuesday 18 March, with Joseph===
===Wednesday 19 March, Methods with Lídia===
===Tuesday 25 March, with Manetta ===

Revision as of 12:27, 6 January 2025

(testing iframe compatibility with the wiki below)

<iframe src="https://practices.tools" frameborder="0" width="320" height="320" ></iframe>

Declarations

A representation of the declarative layer of CSS that mediate our daily interaction with technology

Declarations is an ongoing trans-disciplinary artistic research project into the poetic materiality of the CSS web-standard and its echoes on design and artistic practices.

A presentation of the declarations research project, with quotes and some illustrations of how the research is looking at declarative web-languages. It is important to read the first and second part (what is CSS, and the research questions).

We will watch the video essay by Miriam Suzanne Why is CSS so weird as an starting point to untangle some questions of the research together.

An evolving selection of declarations experiment, Doriane will present some of those progressively through the sessions.

Reader

A selection of references to go further.

Author Title Year
Nolwenn Maudet Tactical Design 2023
J. R. CARPENTER A Handmade Web 2015
Zach Mandeville Basic HTML Competency Is the New Punk Folk Explosion! 2016
Laurel Schwulst My website is a shifting house next to a river of knowledge. What could yours be? 2018
Femke Snelting Dividing & Sharing 2008
Frank Chimero The web's grain 2015
Olia Lialina A Vernacular Web 1,2,3 2005, 207, 2010
John Allsopp A Dao of Web Design 2000

Special issue: display and position

In the context this XPUB special issue, Declarations will focus on something quite specific. The idea is to take a weird angle on the learning of CSS: to be linguists at the same time than learning the language.

The special issue is structured in 3 chapters:

  1. exploring the linguistic aspect of web-languages
  2. investigating & documenting cultural uses of specific CSS properties
  3. speculation as a tool to think about it differently

Two CSS property have been choosing in that regard: display and position. They are interesting because they show how CSS is a language, notably by the use of non-numeric value and keyword with meaning. They also both have been subject to many change in the standard: unfolding a whole cultural history of the web that lies in the words it uses.

By reading the standard it appears that this is a rather complex properties. For example for display we can ask ourselves:

  • What does it mean for certain things to be block and other the be inline? what does it mean to be inline-block?
  • How and why where table, flex and grid invented? Do we need more? What are the motivations and by who was it done?
  • How are they implemented, what complexities or differences are often unseen in those processes?
  • What does the words "block" and "line" means outside of CSS but through design history?

The subject of becoming CSS linguists will be introduced and expended in its dedicated page .

Chapt.1 Words are events, they do things, change things (Entering CSS linguistics)

Words are events, they do things, change things. They transform both speaker and hearer; they feed energy back and forth and amplify it. They feed understanding or emotion back and forth and amplify it. — Ursula K. Le Guin, The Wave in the Mind: Talks and Essays on the Writer, the Reader and the Imagination

Monday 6 January

morning:

  • A presentation of the declarations research project, with quotes and some illustrations of how the research is looking at declarative web-languages. It is important to read the first and second part (what is CSS, and the research questions).
  • We will watch the video essay by Miriam Suzanne Why is CSS so weird as an starting point to untangle some questions of the research together.

afternoon:

a first exercice Declarative companion, in group, on a pad, using Octomode.

Prompt, part 1: 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

Here some ressources on learning the basics of HTML & CSS

Drawing with CSS

Monday 13 January

todo for Doriane:

  • small page that present display, and position, i will need iframes to start them!
  • space to drop lot of images?

morning:

  • sharing moment about the Declarative companions made last time.
  • presentation of the special issue.
  • meeting: `display` and `position`, the two properties we are going to look at
    • outside of CSS what does those words means to you in graphic design?
    • outside of graphic design what does those words means to you?

afternoon:

  • starting a media collection, to drop images of thing that echoes with the words: display, block, inline, flow, root, outer-inner, position, static, sticky, fixed, absolute, relative, inherit, initial.
  • browsing exercice: go through website we know and try to pick up interesting example of all those uses, through the inspector and screenshoting
  • starting reading the standard page
  • looking at the practice of arpentage (land surveying in EN)

Monday 20 January

todo:

  • to read for that day: Nolwenn maudet - tactical design translation

morning:

  • introduction to browser extension, the tactical interest of browser extension, how do they work concretly

afternoon:

  • **using CSS to reveal CSS, by styling element differently according to which property they are using**. making of the "lens" extension: when extension is activated it reveal in a graphical way the `display` and `position` properties on every website (ex: all element using `display: flex;` have a cyan outline, and we get information when hovering them)

Chapt.2 Every language has a grain (CSS Deep dive in ethymology & cultural usages)

from now on, we'll be dividing in two groups: one group focusing on `display` and `position`. groups will have moment to share back to the rest of the students their research progress.

Monday 27 January

No Class Meeting

Doriane in Berlin for a Declarations workshop

Monday 3 February

Monday 10 February

Monday 17 February

Chapt.3 I live in a different home everyday (Fabulating CSS standard evolution)

Monday 3 March

Monday 10 March

Monday 17 March

Monday 24 March

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