Skip to main content

Cours 5 : Puissance symbolique en création arstistique & sémiologie

Liste des procédés​

  • Accumulation
  • Analogie / comparaison
  • Changement d’échelle
  • Choc émotionnel
  • Criptage
  • Dé-contextualisation
  • Découpage, segmentation, fracture, deconstruction
  • Defonctionalisation (chaise sur laquelle on ne peut pas s’assoir)
  • Désacralisation
  • Détournement, Réaffectation, changement d’identité
  • Effet de perspective
  • Esthétisation du laid, annihilation du beau
  • Figure de style (Allégorie, Oxymore, Métaphore, Anagramme, Lipogramme)
  • Graphisme
  • Hacking / usurpation
  • Illusion d’optique (ex: Trompe l'oeil, Anamorphose)
  • Immersion
  • Jeux sur le language (?)
  • Ludification
  • Méta-communication (le médium qui parle de lui-mm, s’auto-(re)-définit), méta-création
  • Mise en abyme
  • Recadrage/Cadrage
  • Référence (artistique, litteraire, ...)
  • Reproduction en série, clonage, duplication, remake ...
  • Série non clonée (bescher chateau d’eau)
  • Stochastique (aléatoire)
  • Subversion
  • Théâtralisation
  • Traitement du temps (éphémère. pérenne)

Workshop procédé de création par rapport au travail final (générer 2 idées en 5 min avec 5 phrases max. Puis pitch. Arriver à générer chez l’autre une image indélébile. 30m

Introduction aux CSS​

Les feuilles de style en cascade1, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. 1

Comme l'HTML nous a permis de structurer le texte présent dans votre page, les CSS vont nous permettre de présenter ce contenu tant au niveau de l'esthétique que de son positionnement.

Les CSS attachés à une page ou plusieurs sont généralement appelés: {%em%}«les styles»{%endem%}.

Il y a plusieurs manières de mettre des styles dans un document HTML:

  1. directement introduire le style dans la balise HTML (Feuille de style interne)
  2. une feuille de style dans le body de la page HTML grâce à la balise style (Feuille de style interne)
  3. une feuille de style séparée dans un fichier *.css (Feuille de style externe)

Nous concentrerons sur le troisième procédé car il nous permettra de réutiliser le style sur plusieurs pages et:

  • D’éviter des duplications
  • D’avoir un maintenance plus aisée
  • D’utiliser le même contenu avec différents styles pour différents usages
  • D’avoir des milliers de pages qui ont un aspect similaire.

Lorsqu’un visiteur affiche une page, son navigateur charge les informations de style en même temps que le contenu de la page. Lorsqu’il imprime une page, vous fournissez des informations de style différentes qui rendent la page imprimée facile à lire.

Si vous cherchez un exemple sur Internet de balises HTML, vous en trouverez sûrement certaines qui comportent des éléments de style.

Dans les anciennes versions d’html, vous pouviez faire ceci:

<h1 align="center">How to Carve Wood</h1>

Ce ne sont pas des CSS à proprement parlé mais des attributs de cette balise qui permettent de lui rajouter un certain style. Nous éviterons d’utiliser ce genre d’attributs car ils sont sur la voie de garage et ne permettent pas toute une série de choses listées plus haut.

Que peut-on faire avec du css?​

Css zen garden​

En 2003, se lance CSS Zen Garden, un site de présentation des diverses possibilités CSS (Feuilles de style en cascade) qui s'offrent aux pages web. Les feuilles de styles sont proposées par des designers, puis sont appliquées sur le contenu du site. Ainsi on peut afficher la page d'une centaine de manières différentes. Le contenu de la page HTML reste quant à lui invariant. Le site est disponible dans de nombreuses langues. Lorsqu’il a été lancé en avril 2003, il ne contenait que cinq designs. 2

http://www.csszengarden.com/

D’autres exemples de ce que l’on peut réaliser avec des css:

Comment cibler un élément?​

Nous avons à notre disposition deux attributs HTML qui nous permettent d'identifier une balise (ou plusieures) dans une règle css.

L’attribut Id​

il ne peut-être utilisé qu'une seule fois sur la page.
Comme nous essayons de réutiliser différentes règles CSS sur plusieurs éléments, cet attribut ne nous est donc pas très utile.

L’attribut class​

Nous pouvons via cet attribut associer des règles CSS a une balise en ajoutant le nom de ces règles dans la valeur de l'attribut, séparé par une espace

<p class="super cool nice">Hello</p>

et le css

.super {
}

.cool {
}

.nice {
}

Retenez: les id, c’est une carte d’identité, il n’y a qu’une personne avec la même carte. Les classes «C’est la class!» donc c’est pour le style.

Plus d’info sur les sélecteurs css ici

Anatomie d’une règle css​

Anatomie d’une règle css

Les propiétés​

Voici une liste complètes de toutes les propriétés que vous pouvez utiliser pour modifier l’apparence d’une balise html:

https://tympanus.net/codrops/css_reference/#section_css-property

Les unités des valeurs​

Pour spécifier les unités de CSS vous avez la possibilité entre plusieurs unité de mesure.

UnitéDescription
emRelative par rapport à la taille de police de l’élement courant
remRelative par rapport à la taille de police du document
vwRelative par rapport à la largeur de la fenêtre. 10vh == 10% de la largeur de la fenêtre
vhRelative par rapport à la hauteur de la fenêtre. 10vh == 10% de la hauteur de la fenêtre
%Pourcentage par rapport au conteneur

La cascade et héritage​

Le style final d'un élément peut être spécifié à de nombreux endroits, qui peuvent interagir de manière complexe. C’est ce qui rend CSS puissant, mais peut aussi le rendre déroutant et difficile à débuguer.

Trois sources principales d'information de styles forment une cascade.

Celles-ci sont:

  • Le style par défaut du navigateur pour le langage de balisage
  • Le style spécifié par l'utilisateur lisant le document
  • Le style lié au document par son auteur

Dompter les navigateurs avec Normalize.css​

Chaque navigateur à ses styles par défault et cela peut devenir ambitieu de vouloir combler toutes ces petites diffrences nous-même. C’est pourquoi on préfère généralement remettre tout ces styles au même niveau avant de commencer. Pour cela le standard actuel est d’utiliser: Normalize.css Téléchargez-le et ajouter un lien vers le document dans votre balise head.

<link rel="stylesheet" type="text/css" media="screen" href="normalize.css" />

Inline-block (vs Inline & block)​

Lien inline​

Liens inline-block​

Plus d’exemple ici: https://web.archive.org/web/20211129200515/https://fr.learnlayout.com/inline-block.html

Centrage du contenu (via body padding)​

Utitiliser les classes multiple pour indiquer une variation​

Vous voyez ici que:

  • btn ajoute les styles pour le bouton
  • btn-ib ajoute le style inline-block
  • current change la couleur de fond en rouge
Last updated on by Boris Rorsvort