Arts numériques

"%20location", jodi, 1995

Stéphane Noel — 2010-08-30T17:38:30Z

%location est donc, côté public, une page noire au caractères verts clignotants. Côté code, on y découvre le plan de la deuxième et troisième bombes atomiques, celles qui sont tombées sur Hiroshima et Nagasaki, et une illustration de la fission nucléaire.

Lorsque Joan Heemskerk et Dirk Paesmans abordent le net art au milieu des années 90, ils ont un background de photographe et de vidéaste. Personne n'a d'ailleurs de background en web : le medium "net" existe depuis quelques années et son accès au privé est très récent. Se gardant bien d'une approche technicienne du html, ils apprendront chaque fois ce qu'il faut pour bricoler des projets d'une esthétique minimaliste, brutale, faite de couleurs primaires, de gifs animés criards et de times new roman. Alors que le web cherche son ergonomie, le duo s'intéresse à l'esthétique de l'erreur, du mauvais affichage, qu'en tant qu'internaute des débuts du net ils rencontrent sans cesse et que le reste du monde combat : les webmestres, les pourvoyeur d'accès, tous vantent le web comme le media fiable et omniscient du 21eme siècle.

Les Jodi, et avec eux les net artistes (Lialina, Shulgin, Cosik,...), s'intéressent à l'interface cassée, ses codes esthétiques, la manière dont elle affecte l'internaute. Olia Lialina, pionnière russe, commence à cette époque une collection de bannières animées sur le thème du "site en travaux". Dans le fond, les promesses de partage son bel et bien respectées : les net artistes des années 90' sont les archivistes et moines copistes du "bad coding", "bad drawing", "bad taste" de l'époque, que le web 2.0 a jeté aux oubliettes.

C'est que le web est un médium pauvre et tout le milieu de l'art des années 90' crie sa laideur. Les écrans sont petits, les résolutions minables, les couleurs limitées. Or, une des vieilles règles de la modernité est que lorsque tout le monde est d'accord pour dire que quelque chose est laid, alors c'est qu'il s'y passe quelque chose d'intéressant. En cela, les Jodi sont proche de Dada, de Fluxus, des artistes pop dans leur utilisation du matériau le plus disponible de leur temps, de Duchamp et ses ready-made, objets choisis parce que personne ne leur accorde de crédit esthétique.

%20location fait partie d'une série de travaux liés à l'ascii art. Basiquement, l'ascii art consiste à dessiner avec des signes (lettres, chiffres, numéros et autre glyphes disponibles sur un clavier). La pratique n'est pas nouvelle, il existait à la grande époque de la machine à écrire un "typewriter art" (ou "keyboard art"). Mais cette pratique a été relancée par le web car les images sont peu disponibles et les vitesses de connexion trop lentes.

Joan Heemskerk et Dirk Paesmans vont collecter un grand nombre de ces dessins et les placer directement dans le code de pages web. Le html possède en effet deux faces : le "code source" qui le contenu reçu par le navigateur, et la "page", qui est le résultat de l'analyse de ce code.
La quasi-totalité des langages de programmation rendent quasi-impossible - et illégal - la lecture de leur code source, mais pas le web : le code source d'une page web est visible pour le visiteur sur simple clic.

Le code source et la page n'ont pas le même comportement visuel : couleurs, typographies, retours à la ligne suivent des règles différentes : d'une part des éléments décrits pour une machine, de l'autre une interface pour l'utilisateur. Les Jodi brise le lien logique en donnant des images à lire comme code source, ce qui fait apparaitre au lecteur un ensemble de signes incompréhensibles. Le dessin devient donc un secret caché dans le code, que seuls quelques curieux peuvent découvrir.

%20location est donc, côté public, une page noire au caractères verts clignotants. Côté code, on y découvre le plan de la deuxième et troisième bombes atomiques, celles qui sont tombées sur Hiroshima et Nagasaki, et une illustration de la fission nucléaire.

Le travail du duo Jodi explore de manière générale les failles techniques spécifiques aux outils numériques usuels. CD-Rom, operatings systems, interfaces webs... Ils nous apprennent que les erreurs, les malfonctionnements, sont souvent ce qu'il y a de plus spécifique aux objets techniques, ce qui au fond fait leur identité, leur histoire. Que ce soit les erreurs du moteur 3D du jeu "Max Payne" ou les gadgets embarqués dans Mac os X, leurs expérimentations s'attachent à des logiciels précis, dont ils ne deviennent pas les spécialistes mais les utilisateurs les plus malicieux. Leurs oeuvres sont donc difficilement archivables : les versions de logiciels se succèdent, corrigeant des bugs, en créant de nouveaux. "%location" est une des rares pièces encore consultables "en conditions réelles", même si son code est considéré comme obsolète par les navigateurs contemporains.

Lire aussi mon article sur le blog codedrops "Jodi : contre l'interface".

Ecrire des graffittis avec jquery, php et mysql

Stéphane Noel — 2008-12-08T23:27:33Z

Un exemple simple et complet : intervenir sur une page en cliquant dessus, sauvegarder le rÃ©sultat dans une base de donnÃ©e pour pouvoir les afficher au rechargement de la page.

Ce code est perfectible : on peut imaginer pouvoir demander une image au lieu d'Ã©crire du texte, de fabriquer une texte en image avec gd2, de choisir une couleur, de naviguer dans la profondeur des messages, de recharger rÃ©guliÃ¨rement la page en ajax pour en faire un espÃ¨ce de chat...

1) La page d'initialisation de la base de donnÃ©e

On externalise cette part du code pour la rÃ©employer 2 fois.

2) La page elle-mÃªme

Contient les fonctions qui crÃ©e le formulaire et fait la requÃªte ajax, plus le listage des messages dÃ©jÃ Ã©crit au chargement.

    Add your comment on the metawall      ".stripslashes($row['contenu'])."

\n"; } } ?>

3) La page qui entre les message dans la db

Cette page est appellÃ©e par jquery. Ce code de dÃ©mo n'est pas dÃ©gradable. Son activation par cliquer-pointer est trop appuyÃ© sur le javascript pour l'Ãªtre...

4) Les styles css

Dans le fichier style.css, quelques lignes.

body { font-family:arial, sans-serif; font-size:11px; } .clicform { background-color:#fff; border:1px solid #ccc; } .clicform textarea{ heigth:4em; } .contenu { position:absolute; } .clicform textarea, .contenu { font-size:21px; font-weight:bold; color: #666; width:200px; } .validbutton { font-size:12px; }

Ajouter Ã ceci Ã©videmment la librairie http://jquery.com...

Un navigateur automatique avec opendir et jquery

Stéphane Noel — 2008-11-26T00:11:35Z

Une application simple, melant php et jquery, permettant avec un seul fichier de naviguer dans les pages html d'un dossier. Ce script fabrique un menu dÃ©roulant comprenant toutes les pages html trouvÃ©es dans le dossier oÃ¹ il est dÃ©posÃ© avec php, et permet d'afficher le contenu de ces pages sans rechargement grÃ¢ce Ã jquery.
Ce code a Ã©tÃ© produit pour un besoin personnel, il n'est pas dÃ©gradable.

Voici le code php/html/javascript complet. Pour le faire fonctionner, il faut placer le fichier de la librairie jquery avec comme nom "jquery.js" dans un dossier "includes". Ceci pour clairement sÃ©parer dans le dossier les pages html des autres Ã©lÃ©ments. Le script php ne sÃ©lection que les pages html, mais tout de mÃªme, c'est plus propre.

Le dossier zippÃ© reprend tout Ã§a.





Presentation technique et technologie - StÃ©phane NoÃ«l






\n"; foreach ($files as $file) { $title = Title($file); // on liste un lien par option en filtrant le nom a afficher echo "\n"; } echo "\n"; // Function to get a human readable title from the filename function Title($filename) { $title = substr($filename, 0, strlen($filename) - 5); $title = str_replace('-', ' ', $title); $title = str_replace('_', ' ', $title); $title = ucwords($title); return $title; }
?> PrÃ©cÃ©dent - Suivant

Principales balises en html

Stéphane Noel — 2008-08-17T21:46:43Z

Il existe beaucoup de balises html, mais on peut faire ici la liste courte des principales balises employÃ©es.

Une liste complÃ¨te des balises sur le site "le site du zero".

En-tÃªte de la page

meta : balise permettant de dÃ©clarer au navigateur et aux moteurs de recherche des informations importantes : langue, mots-clÃ©s, description, auteur, charset (codage du texte).

script : permet de placer du code (javascript souvent) directement ou dans un fichier attachÃ©.

link : permet de lier des pages externes : feuilles de style css ou fichiers backend.

style : permet de dÃ©clarer des comportements css directement dans le head.

Corps de la page, Ã©lÃ©ments de type bloc

h1, h2,... h6 : permettent de dÃ©clarer des titres, 6 niveaux disponibles.

p permet de crÃ©er un paragraphe.

ul et li permettent de structurer des listes d'Ã©lÃ©ment, typiquement la navigation par exemple. Se code comme ceci :

 un element
 un autre

ul signifie "unsorted list", liste non-ordonnÃ©e. Il existe le couple ol-li pour les listes ordonnÃ©es (avec des chiffre gÃ©nÃ©rÃ©s automatiquements, ou des lettres). Mais aussi le trio dl-dd-dt. SÃ©mantiquement, c'est une dÃ©finition list, une liste de termes et de leur dÃ©finition. On code comme Ã§a :

 Un terme
 La dÃ©finition de ce terme
 Un deuxiÃ¨me terme
 La dÃ©finition de ce deuxiÃ¨me terme

div est un element de type bloc sans valeur sÃ©mantique. Il signifie seulement "division". Il est beaucoup utilisÃ©, notamment pour structurer les grandes sections de la page (tete de page, navigation, corps et footer).

table permet de structurer un tableau. Trop utilisÃ© au bon vieux temps du html 4, il est pourtant parfait pour dÃ©crire de l'info en ligne et colonne. Une table est un objet complexe, avec des entÃªte, des lignes et des colonnes. Voici un exemple de structure simple :

    Un element et un autre  
  Un element et un autre

Voir ici un article plus complet sur le site du zero.

: un retour chariot.

HTML5 et de nouveaux tags de type "bloc"

La norme HTML5 a introduit un certain nombre de nouvelles balises, qui correspondent Ã des usages rÃ©currents dans la construction de page web. Ces tags permettent d'Ã©viter l'emploi du tag "div" qui n'a aucune valeur sÃ©mantique.
section permet de rassembler des Ã©lÃ©ments connectÃ©s Ã mÃªme contenu. Par exemple une galerie d'image avec son titre, descriptif et une sÃ©rie d'image ou un ensemble d'articles dans un blog.

article est vouÃ© Ã rassembler un ensemble d'informations reliÃ©es par un contenu thÃ©matique commun : par exemple un titre, sous-titre, nom d'auteur, texte et piÃ¨ces jointes.

header est destinÃ© Ã contenir un entÃªte soit de toute une page web, soit d'une sous-partie. Un tag "article" peut possÃ©der par exemple son tag "header".

footer est destinÃ© Ã recevoir l'information de base de page, mais comme header il peut s'agir du bas d'un contenu comme un article.

em : sÃ©mantiquement une emphase. Met en italique une portion de texte dans un texte normal et en normal dans un texte en italique. Remplace la balise dÃ©prÃ©ciÃ©e.

strong : met en gras une portion de texte. Remplace la balise dÃ©prÃ©ciÃ©e.

span : Ã©quivalent de div car sÃ©mantiquement neutre.

Le html

Stéphane Noel — 2008-08-17T19:22:18Z

Le html est un langage de description (et pas un langage de programmation), ce qui signifie qu'il dÃ©crit un contenu Ã un logiciel (le navigateur) chargÃ© de l'afficher.

Html, un format brut

Une page web un simple fichier texte, proche du format .txt pour le texte. Contrairement Ã d'autres fichiers comme le format .doc ou le format .rtf, qui sont d'autres formats de texte plus complexe, il y a trÃ¨s peu d'informations d'en-tÃªte ou de formatage invisibles Ã l'utilisateur. A part quelques informations sur l'encodage, la date de crÃ©ation par exemple, tout le reste sera affichÃ© si on ouvre le fichier avec un simple Ã©diteur. Contrairement Ã d'autres format comme le .pdf de Adobe, il ne contient que des donnÃ©es de type "texte", et ne contient pas d'images matricielles ou de polices de caractÃ¨re.
Enfin, le html est une norme ouverte, ce qui signifie que la crÃ©ation d'un fichier html ne demande pas un logiciel payant ou un accord de licence.

Le html est sÃ©mantique

Le html est un langage de description. Il entoure un contenu textuel et des liens vers des images ou d'autres pages, qu'il dÃ©crit sÃ©mantiquement.

La sÃ©mantique est une branche de la linguistique qui Ã©tudie les signifiÃ©s, ce dont on parle, ce que l'on veut Ã©noncer. (Wikipedia)

En tant qu'humains, nous identifions la plupart du temps le sens d'un texte : face Ã une affiche, nous identifions qu'il s'agit d'une publicitÃ© et pas d'un mode d'emploi. Nous identifions qu'il s'agit d'une piÃ¨ce de thÃ©Ã¢tre, ensuite nous pouvons identifier le titre d'un spectacle, ses acteurs, le lieu de sa prÃ©sentation, le prix d'entrÃ©e, etc. Les navigateurs web ne peuvent faire ce travail : il lisent les textes comme un ensemble continu de caractÃ¨res. Pour pouvoir traiter et afficher les documents, les scientifiques qui ont travaillÃ© Ã son dÃ©veloppement ont inventÃ© le principe de balisage. Par exemple, ce texte :

Comprendre le balisage Aidez votre navigateur en associant des balises Ã votre texte brut.

Est une succession de lettres que nous pouvons identifier mais qu'un navigateur ne peux pas hiÃ©rarchiser.
Le code html dÃ©crit pour les machines la hiÃ©rarchie du texte, et accompagne sa signification.

Comprendre le balisage Aidez votre navigateur en associant des balises Ã votre texte brut.

En plaÃ§ant le texte entre une balise ouvrante
et une balise fermante
on signifie pour le logiciel -navigateur, lecteur braille, analyseur de texte- que le rÃ´le de cette portion de texte est d'Ãªtre le titre principal du document. de la mÃªme maniÃ¨re, p entoure un paragraphe, c'est Ã dire une portion cohÃ©rence de texte. Ce balisage permet un meilleur traitement automatique par les machine (un lecteur sonore fera une courte pause dans la lecture entre deux paragraphe, par exemple, ou le navigateur crÃ©era une sÃ©paration visuelle ).

Ce balisage a donc aussi un but visuel : il permet au navigateur de l'afficher automatiquement de maniÃ¨re appropriÃ©e. Ceci Ã©tait particuliÃ¨rement important aux dÃ©but du web : les pages Ã©taient Ã©crites par des scientifiques pour des scientifiques, et peu d'entre eux avaient envie de travailler le look des pages, mais ils Ã©taient intÃ©ressÃ© Ã pourvoir y structurer l'information pour une comprÃ©hension optimale de leurs textes par d'autres scientifiques.

La base est celle-ci :

contenu visible de la page

On a ici la structure minimale : le fichier commence par dire "ici commence du html" et se termine par "ici s'arrÃªte le html". On fabrique une balise juste en enserrant un mot entre "<" et ">". En html, le mot doit figurer dans la syntaxe html. "head", par exemple, signifie que l'on va dÃ©crire se qui se trouve dans l'entÃªte de la page, qui est une partie cachÃ©e au visiteur mais qui contiendra des informations utiles pour le navigateur. "body", quant Ã lui, contiendra ce qui va Ãªtre affichÃ© au visiteur, ici un simple texte.

Certaines balises, cependant, sont uniques : ou par exemple, ne sont pas codÃ©es en deux Ã©lÃ©ments mais s'ouvrent et se ferment tout de suite, comme le montre le "/>" qui les ferme.

Tout ce qui s'ouvre se ferme

Les balises s'ouvrent puis se ferment, il est important de ne pas l'oublier sans quoi vous risquez d'avoir des comportement bizarre : en cas d'erreur, le navigateur va tenter de corriger, et chaque navigateur Ã son idÃ©e de comment corriger.
Il ne faut pas, bien sÃ »r, oublier de fermer une balise, comme ceci :

mon titre voici une paragraphe
et un intertitre
puis un second paragraphe

Le plus souvent, le navigateur va comprendre qu'il s'agit d'une erreur de code et la corriger. Mais comme chaque navigateur a sa propre interprÃ©tation des erreurs, cela donnera un rÃ©sultat diffÃ©rent Ã chaque fois.

Il faut aussi veiller Ã fermer les balises dans le bon ordre. Pas comme Ã§a :

mon titre mon paragraphe

mais comme ceci :

mon titre mon paragraphe

Pour aller un peu plus loin, nous allons crÃ©er d'autre balises dans ce fichier html basique :

Titre en haut de la page ceci est un titre Ceci est un paragraphe

Ce code plus complet comporte des balises dans des balises. Dans une page complÃ¨te, on peut avoir beaucoup de niveaux d'imbrication de code. La page est alors comme un arbre, comportant des Ã©lÃ©ments se subdivisant en parties plus petites de nombreuses fois.

On parle aussi d'une structure avec parents et enfants, et mÃªme des ancÃªtres.

Commenter son code

A ce stade, on peut introduire une balise un peu spÃ©ciale : la balise de commentaire.

Titre en haut de la page ceci est un titre Ceci est un paragraphe

Cette balise est ignorÃ©e par le navigateur lors de l'affichage, on peut donc y mettre ce qu'on veut gÃ©nÃ©ralement des informations que l'on s'adresse Ã soi-mÃªme dans le futur, lorsqu'on aura oubliÃ© l'une ou l'autre subtilitÃ© de la construction de page. Commentez votre code, c'est un conseil... Les Ã©diteurs de code donnent une couleur spÃ©cifique pour les commentaires, ce qui permet de les reconnaitre rapidement Ã la lecture du code.

ElÃ©ments "blocs" et "en ligne"

Il faut maintenant introduire une distinction entre les deux grands types d'Ã©lÃ©ments d'une page web : les Ã©lÃ©ments en ligne et les Ã©lÃ©ments de type bloc. Tous les tags contenus dans le body appartiennent Ã un de ces deux groupes. Ils seront particuliÃ¨rement importants au moment d'aborder l'habillage css.

Les caractÃ©ristiques des Ã©lÃ©ments de type block

Commence toujours sur une nouvelle ligne.
– Les attributs height, line-height, top et bottom, margins peuvent Ãªtre modifiÃ©s
– La largeur est par dÃ©faut fixÃ©e Ã 100% de leur Ã©lÃ©ment conteneur, si une autre largeur nâ€™est pas spÃ©cifiÃ©e.

Les caractÃ©ristiques des Ã©lÃ©ments Inline

Commence sur la mÃªme ligne que lâ€™Ã©lÃ©ment prÃ©cÃ©dent.
– Height, line-height, top et bottom, margins ne pourront Ãªtre changÃ©es
– La longueur est dÃ©terminÃ©e par le contenu et ne peut Ãªtre modifiÃ©e.
– l'Ã©lÃ©ment remplit la largeur de gauche Ã droite (en langue europÃ©enne) jusqu'Ã rencontrer la largeur maximale de son parent, ensuite va Ã la ligne.

Type "block" Type "inline"

Exemples de tag h1, ul, li, p, div, header, footer, article, section a, img, em, b, strong, em, i, input

Largeur 100% de son parent DÃ©pendante de sa largeur.

Empilement Se positionne sous l'Ã©lÃ©ment prÃ©cÃ©dent Se positionne Ã cÃ´tÃ© des Ã©lÃ©ments inline prÃ©cÃ©dents, dans le sens de lecture, comme un caractÃ¨re dans un texte.

Positionnement Peut Ãªtre positionnÃ© Ne peut pas Ãªtre positionnÃ©

Modifications Margin et padding peuvent Ãªtre modifiÃ©s.
Largeur et hauteur peuvent Ãªtre modifiÃ©s Seul le padding peut Ãªtre modifiÃ©, pas le margin ni la largeur et hauteur

Hierarchie des Ã©lÃ©ments inline et bloc

Il est important de retenir que
– on peut imbriquer des Ã©lÃ©ments de type bloc dans des Ã©lÃ©ments de type bloc.

titre mon paragraphe

Attention cependant, la balise p (paragraphe) supporte mal de recevoir d'autres balises bloc. Elle est destinÃ©e Ã recevoir du texte (et des balises inline comme a, em et strong) et pas des div. Cela produit parfois des erreurs d'affichages.

– on Ã©vite de mettre des balises de type "bloc" dans des balises de type "inline".
par exemple :

Clic

Ce code Ã©tait interdit en html 4 et Xhtml, mais est de nouveau autorisÃ© en Html5. En effet, Html5 autorise explicitement l'utilisation indiffÃ©rente de balise inline et bloc dans la structuration d'une page.
Il est cependant gÃ©nÃ©ralement recommandÃ© d'utiliser les balises de type "bloc" pour les Ã©lÃ©ments importants du site et des balise inline pour l'intÃ©rieur des textes, qui est leur destinationn d'origine.

Flat earth : communication entre internet, processing et arduino

Stéphane Noel — 2008-05-28T17:11:51Z

Mon projet lors du workshop "Hybrid scrapyard" mettait en jeu la connection entre un formulaire sur le web et le micro-contrÃ´leur arduino, Ã travers un script de processing, qui ne servait qu'Ã passer l'info. Trois portions de code donc, prÃ©sentÃ©es de maniÃ¨re brute ici.

1. La page web

Cette page prÃ©sente un formulaire et en rÃ©colte aprÃ¨s postage l'information pour la traiter. Le script php Ã©crit ensuite l'information dans un simple fichier texte. Il rÃ©colte aussi l'image d'une webcam mais ceci a Ã©tÃ© abandonnÃ© lors de la prÃ©sentation.
Le fichier html nÃ©cessite la librairie jquery, et le fichier a Ã©crire "donnees.txt", ainsi qu'une css qui habille le tout.

Move the world Petite terre carrÃ©e lecture du fichier ". $requete . "impossible "; } else { $recup=""; while (!feof($fichier)) { $buffer = fgets($fichier, 4096); $recup .=$buffer; } fclose ($fichier); } // recuperer le compteur $lignes=split("/n",$recup); $compteur=intval($lignes[0]); $compteur++; echo "compteur ".$compteur.""; $lehtml=$compteur." \n".$move; if(!$fichier = fopen($chemin_fichier, "w+")) { echo "lecture du fichier ". $requete . "impossible "; } else { fputs($fichier, $lehtml); fclose ($fichier); echo "Ainsi Soit-il. "; } } ?> Je veux...

La page est ici et active.

2. Le code processing

Le code processing lit le fichier "donnees.txt" et en lit la premiÃ¨re ligne. C'est un compteur. Si le chiffre a changÃ©, il prend le caractÃ¨re Ã©crit en deuxiÃ¨me ligne et l'envoie au micro-contrÃ´leur par le port sÃ©rie. Ici, le Xbee fait la connection.

/* charge le fichier du web donne l'info Ã arduino par le port sÃ©rie */ import processing.serial.*; int compteurprecedent=0; int value=0; Serial port; // Create object from Serial class char actuel; void setup() { size(600, 140); PFont fontA = loadFont("TradeGothic-BoldCondTwenty-32.vlw"); textFont(fontA, 32); smooth(); background(30); println(Serial.list()); frameRate(10); // Open the port that the board is connected to and use the same speed (9600 bps) port = new Serial(this, Serial.list()[0], 9600); } void draw() { fill(255); text("Just reading a file on the web", 10, 40); text("and pass the information to arduino", 10, 100); String lines[] = loadStrings("http://www.workplace.lescorsaires.be/active_world/donnees.txt"); int compteuractuel=int(trim(lines[0])); // envoyer, un caractÃ¨re par ligne dans le fichier texte pompÃ©... if(compteurprecedent !=compteuractuel){ println("compteur : " + compteuractuel); for(int li=1; li 0) { int inByte = port.read(); println("reÃ§u " + char(inByte)); } } void keyPressed() { if(key == 'z' && value==0) { value = 1; port.write(90); } else { value = 0; } }
3. Le code embarquÃ© sur Arduino

Le code dÃ©marre de maniÃ¨re autonome et prÃ©voit des Ã©vÃ©nements dans le futur en fonction de paramÃ¨tres : temps avant l'Ã©vÃ©nement, durÃ©e de l'Ã©vÃ©nement, a quel contact envoyer le signal. Il Ã©coute ensuite le port sÃ©rie pour y recevoir les informations envoyÃ©e par processing.

// Flat earth par S. Noel // definit les prochains evenements int next[] = { 10,20,30,40,50 }; int average[] = { 420,340,320,200,180 }; int action[] = { 0,0,0,0,0 }; // move : 7 shake : 12, war : 11, fete : 6, campfire : 7, autre : 10 int sortie[] = { 12,7,11,9,6 }; int delai= 500; int nbeve = 5; void setup() { // dans le setup Serial.begin(9600); // declare toutes les sorties for(int u=0; u 0){ action[u]--; // active l'action digitalWrite(sortie[u], HIGH); } else { digitalWrite(sortie[u], LOW); } } if (Serial.available() > 0) { char valeur = Serial.read(); switch(valeur) { case 'a': // feu de camp, - deville, + de shake, + de war next[3]=1; // feu de camp average[4]=average[4]+20; // moins de fetes average[0]=average[0]-20; // plus de shake average[2]=average[2]-20; // plus de war break; case 'b': // concert -ville : ville, - de feu de camp, - de war, + de shake next[4]=1; // feu de camp average[3]=average[3]+20; // moins de fetes average[0]=average[0]-20; // plus de shake average[2]=average[2]+20; // moins de war break; case 'c': // guerre next[2]=1; // guerre average[3]=average[3]+20; // moins de ville average[4]=average[4]-20; // plus de campfire average[0]=average[0]-20; // plus de shake break; case 'd': // tremblement : - de ville + campfire - shake, +guerre next[0]=1; // tremblement average[3]=average[3]+20; // moins de ville average[4]=average[4]-20; // plus de campfire average[0]=average[0]+20; // moins de shake average[2]=average[2]-20; // plus de guerre break; case 'e': // moins de delay delai=delai-30; // tremblement if(delai < 100) { delai=100; } average[1]=average[1]-20; // plus de move break; case 'f': // augmente le delay delai=delai+30; // tremblement average[1]=average[1]+20; // moins de move break; case 'Z': // teste tout Serial.print(valeur); for(int u=0; u
Le programme est basÃ© sur 5 relais, donc 5 pÃ©riphÃ©riques que l'on active ou dÃ©sactive. Dans mon cas, 2 moteurs et 3 ensembles de diodes et lampes alimentÃ©s en 3 et 6 volts. Le code n'est pas des plus propres, mais il a Ã©tÃ© produit intÃ©gralement pendant la durÃ©e du workshop.
Elements inline et block Stéphane Noel — 2007-11-26T08:45:09Z Tous les Ã©lÃ©ments prÃ©sents dans le body, d'une page ont un comportement "en ligne" ou "bloc". Cette diffÃ©rence est dÃ©terminante dans l'Ã©criture de votre code : les Ã©lÃ©ments inline et bloc n'ont pas le mÃªme comportement visuel. Petit rappel. Vous trouverez ici une page de test (rÃ©alisÃ©e avec jQuery et interface) qui permet de dÃ©terminer les deux types de comportement pour les principaux Ã©lÃ©ments. Les caractÃ©ristiques des Ã©lÃ©ments de type block Commence toujours sur une nouvelle ligne ( voila pourquoi parfois vous nâ€™arrivez pas Ã placer un bloc a droite dâ€™un autre bloc ;) – Les attributs height, line-height, margin, padding peuvent Ãªtre modifiÃ©s – La largeur est par dÃ©faut fixÃ©e Ã 100% de leur Ã©lÃ©ment conteneur, si une autre largeur nâ€™est pas spÃ©cifiÃ©e. On peut forcer la taille des Ã©lÃ©ments de type bloc, en pixel, en pourcentage, en em, en points. Leur taille totale est l'addtion de du padding, du border, du margin et la largeur (width). Principaux Ã©lÃ©ments de type block : balise multi-usage. Cette balise est souvent utilisÃ©e pour positionner un contenu dans la page. ... : encadre un titre ou un sous-titre. : paragraphe. , , : listes (non ordonnÃ©e, ordonnÃ©e ou avec dÃ©finition). , , : Ã©lÃ©ment de liste, dÃ©finition, et titre de dÃ©finition. : tableau. : paragraphe indentÃ© (dÃ©calÃ© Ã droite) normalement utilisÃ© pour prÃ©senter une citation. : bloc de code prÃ©formatÃ©. : formulaire de saisie. Les caractÃ©ristiques des Ã©lÃ©ments Inline Un Ã©lÃ©ment inline se comporte comme des caractÃ¨res dans une phrase : il continue sur la mÃªme ligne que lâ€™Ã©lÃ©ment prÃ©cÃ©dent sauf si celui-ci est un Ã©lÃ©ment de type bloc, Ã©videmment. – height, line-height, marges top et bottom ne pourront Ãªtre changÃ©es – La hauteur est dÃ©terminÃ©e par le contenu de l'Ã©lÃ©ment et ne peut Ãªtre modifiÃ©e. Liste des principaux Ã©lÃ©ments inline : balise multi-usage, trÃ©s pratique pour appliquer un style CSS Ã une portion de texte, par exemple. : ancre, permet de crÃ©er un lien sortant ou permet de spÃ©cifier un point prÃ©cis de la page vers lequel on veut diriger un lien. : utilisÃ© pour marquer l'importance particuliÃ¨re d'une portion de texte. Tous les navigateurs actuels afficheront cette portion en gras. NOTE : l'ancienne balise (bold) Ã©tait obsolÃ¨te en xhtml mais peut de nouveau Ãªtre utilisÃ©e en html5. : utilisÃ© pour accentuer l'importance d'une portion de texte (de faÃ§on moins forte que ). Tous les navigateurs actuels afficheront cette portion en italique. NOTE : l'ancienne balise (italic) Ã©tait obsolÃ¨te en xhtml mais peut Ãªtre utilisÃ©e de nouveau en HTML5. : image, permet de placer une image au milieu du flux de texte. : saut de ligne. VoilÃ un cas tout Ã fait particulier d'Ã©lÃ©ment en-ligne, qui provoque un saut de ligne. MalgrÃ© cette particularitÃ©, n'est dÃ©finitivement pas un bloc et doit Ãªtre classÃ© comme Ã©lÃ©ment en-ligne. : champs de saisie dans un formulaire, tel que ou <abbr> : signale une abbrÃ©viation (placez votre curseur dessus pour voir le fonctionnement). Note : Internet Explorer ne gÃ¨re pas cette balise dans ses versions antÃ©rieures Ã la version 7. Changer un Ã©lÃ©ment inline en bloc avec CSS Il est possible de changer le type d'un Ã©lÃ©ment avec une dÃ©claration CSS. a { display:block; height:200px; width:200px; } Ici, les liens sont transformÃ©s en Ã©lÃ©ments de type bloc grÃ¢ce Ã la dÃ©claration css "display:block". On utilise ce type de dÃ©claration pour pouvoir bÃ©nÃ©ficier des avantages de types de bloc : par exemple, pour pouvoir fixer la taille des Ã©lÃ©ments ou pour pouvoir les positionner. L'inverse est possible avec la dÃ©claration "display:inline". li { display:inline; } Préparation au cours : logiciels et documentation Stéphane Noel — 2007-10-17T08:29:14Z Dans le cours Arts numérique 1, on code à la main. Si on travaille avec une structure Xhtml respectueuse des normes, c'est aussi rapide qu'avec un éditeur Wysiwyg comme Dreamweaver. Navigateur web C'est l'évidence, mais un navigateur web n'est pas l'autre. Mac et pc sont fournis avec un navigateur (Explorer et Safari) mais le navigateur Firefox est un bon complément : tester d'autres navigateurs est important, mais de plus Firefox est open source, et permet l'adjonction de plugin très intéressants. Les indispensables au cours sont présentés ci-après. >> Télécharger Firefox Dummy lipsum Remplir un article, un champ avec du faux texte, est un besoin courant et ce plugin fait ça, rien de plus, rien de moins. >> Le télécharger ici Editeur de code Un éditeur de code est un outil simple, permettant de créer et de modifier des fichiers en html, php, javascript, c++, etc. Il est un outil de base de tout développeur. L'éditeur de code comporte des outils comme : – La coloration syntaxique. Les types de code sont reconnus dans la page, et coloré. C'est une aide intuitive à la lecture du code, et permet de reconnaitre certaines erreurs de syntaxe. – Le moteur rechercher/remplacer, qui permet de remplacer du code dans plusieurs documents, parfois faire des rechercher dans des dossiers de document, et d'uitliser les "expressions régulières", c'est à dire des structures précises de code plutôt des chaînes précises de code. – La numérotation des lignes – Des aides au codage, dont les templates html-Xhtml – Des outils de conversion, en entités html notamment. Brackets est un logiciel développé en open source. Pour Mac, PC et Linux. Télécharger ici PsPad est un éditeur de code pour PC. Gratuit. Très complet et puissant. Parfois un peu trop riche, mais il couvre un nombre impressionnant de langages. >> Télécharger ici Notepad++ est un autre éditeur simple pour PC, lui aussi complet et puissant. >> Télécharger ici Pour une liste plus exhaustive d'éditeurs de code, mac, pc, linux, voyez ici Client FTP Derrière ce mot un peu technique, un outil simple qui permet de transférer des fichiers depuis votre ordinateur vers un serveur distant. Incontournable donc pour pouvoir mettre sur le web vos fichiers html, php, gros documents. FileZilla est un client FTP pour Mac, PC et Linux, gratuit, open source et maintenu par une grosse communauté de dévelopeur. >> Le télécharger ici Cyberduck est un client FTP pour mac, gratuit et open source. >> Télécharger ici Extra : Pense-bÃªte html-css-javascript Stéphane Noel — 2007-09-21T20:31:17Z Les codes quâ€™on oublie toujours en tant que jeune codeur. Code pour inclure une css distante, gÃ©nÃ©ralement placÃ© dans le head de la page Code pour inclure des css directement dans la page Charger un fichier javascript externe InsÃ©rer du code javascript directement dans la page Code de base d'une page xhtml transitionnelle

	Type "block"	Type "inline"
Exemples de tag	h1, ul, li, p, div, header, footer, article, section	a, img, em, b, strong, em, i, input
Largeur	100% de son parent	DÃ©pendante de sa largeur.
Empilement	Se positionne sous l'Ã©lÃ©ment prÃ©cÃ©dent	Se positionne Ã cÃ´tÃ© des Ã©lÃ©ments inline prÃ©cÃ©dents, dans le sens de lecture, comme un caractÃ¨re dans un texte.
Positionnement	Peut Ãªtre positionnÃ©	Ne peut pas Ãªtre positionnÃ©
Modifications	Margin et padding peuvent Ãªtre modifiÃ©s. Largeur et hauteur peuvent Ãªtre modifiÃ©s	Seul le padding peut Ãªtre modifiÃ©, pas le margin ni la largeur et hauteur

Arts numériques

"%20location", jodi, 1995

Ecrire des graffittis avec jquery, php et mysql

1) La page d'initialisation de la base de donnÃ©e

2) La page elle-mÃªme

3) La page qui entre les message dans la db

4) Les styles css

Un navigateur automatique avec opendir et jquery

Principales balises en html

En-tÃªte de la page

Corps de la page, Ã©lÃ©ments de type bloc

HTML5 et de nouveaux tags de type "bloc"

Corps de la page, Ã©lÃ©ments de type "inline"

Le html

Html, un format brut

Le html est sÃ©mantique

Comprendre le balisage

et une balise fermante

Tout ce qui s'ouvre se ferme

mon titre voici une paragraphe

et un intertitre puis un second paragraphe

mon titre mon paragraphe

mon titre

ceci est un titre

Commenter son code

ceci est un titre

ElÃ©ments "blocs" et "en ligne"

Les caractÃ©ristiques des Ã©lÃ©ments de type block

Les caractÃ©ristiques des Ã©lÃ©ments Inline

Hierarchie des Ã©lÃ©ments inline et bloc

titre

Clic

Flat earth : communication entre internet, processing et arduino

1. La page web

Petite terre carrÃ©e

Je veux...

2. Le code processing

3. Le code embarquÃ© sur Arduino

Elements inline et block

Les caractÃ©ristiques des Ã©lÃ©ments de type block

...

: encadre un titre ou un sous-titre.

Les caractÃ©ristiques des Ã©lÃ©ments Inline

Changer un Ã©lÃ©ment inline en bloc avec CSS

Préparation au cours : logiciels et documentation

Navigateur web

Editeur de code

Client FTP

Extra : Pense-bÃªte html-css-javascript

Code pour inclure une css distante, gÃ©nÃ©ralement placÃ© dans le head de la page

Code pour inclure des css directement dans la page

Charger un fichier javascript externe

InsÃ©rer du code javascript directement dans la page

Code de base d'une page xhtml transitionnelle

mon titre
voici une paragraphe

`et un intertitre`
`puis un second paragraphe`

mon titre
mon paragraphe