{} - Contributions de l’utilisateur [fr]

ERG::interactionsphysiques

2016-12-22T10:23:29Z

Latinobandant :

Cours du 27-10-2016

Juliette - Gabriel - Zoé - Léo - Hélène - Margot

Formation de 2 groupes de travail. Expérimentation sur un livre physique.

Le premier groupe s'est occupé de générer un son peu agréable quand on tourne une page. Cela perturbe la lecture à la manière du pop-up. Le deuxième groupe s'est occupé de générer de la lumière par le toucher. 

10/11 : Après quelques séances d'expérimentations techniques de dispositifs Arduino à mettre en place dans un livre, nous avons reprécisé le projet et nos objectifs comme suit :
Nous voulons réaliser une interface analogique, un livre, qui présenterait les caractéristiques d'une navigation web à l'aide de circuits électriques et d'Arduino. L'on pense à, par exemple, les spams et pop-up, le scroll, la multitude des onglets, aux difficultés de connexion...nous devons trouver des systèmes pour les mettre en place dans un livre. Lumières, sons, encre thermique, découpage : nous nous construisons maintenant une palette d'outils techniques.
Au travail :
-Diffusion de son pré enregistré 
-Découpe/ mise en page évocatrice d'onglets web 
-Encre thermique : caractéristiques, coût, mise en place 
-Signal Bluetooth pour lancer l'Arduino 
-... 

Objectif 1 : 
Plusieurs petits livres, qui mettent en lumière un seul dispositif efficace, à réutiliser ensuite. Ces éditions serviront de "témoins" des expérimentations. 
Objectif 2 : 
Le livre-internet en question, qui serait une fenêtre d'une navigation web et qui rassemble les différents dispositifs.
 
 
Léo & Gabriel : récap 
Notre objectif était donc de réaliser un système qui déclencherait du son de façon similaire à une pub web pop up, le genre insupportable. Pour cela, il fallait lire via Arduino un fichier enregistré au préalable. Des recherches nous informent qu'une pièce supplémentaire est nécessaire, une Wave Shield. Après bien des essais, l'on finit par se rendre compte que cette pièce ne fonctionne pas. Nous essayons donc quelque chose de plus simple, un lecteur de carte SD, que nous avons commandé - et qui a mit des semaines à nous parvenir. Finalement, le circuit fonctionne, et du son est diffusé sur le piezo : seulement, ledit piezo rend un son distordu et méconnaissable. Tous les tutoriels parlent en effet de mini hauts-parleurs, nous avions pensé que le piezo fonctionnerait ; c'est d'ailleurs toujours un mystère. 
Parallèlement, nous avons travaillé sur un capacitive sensor, pour déclencher inopinément le circuit, pour rendre le caractère surprise du pop-up. Nous avons effectué un circuit qui donne des signes de réussite, avec comme senseur un bout d'aluminium, mais les résistances à notre disposition sont cruellement insuffisantes.
Nous avons réalisé des dessins qui serviront de contenu au livre, inspirés d'une esthétique du web, et enregistré des pubs nous-même. Nous voulons enfin intégrer le tout dans un livre à reliure française, ce qui nous permettrait d'avoir câbles, senseurs et autres composants dans la doublure intérieure ; et l'Arduino et la breadboard dans un genre de boitier qui servirait de quatrième de couverture.
L'idée serait maintenant de mixer les deux codes et d'avoir un son pré-enregistré qui se déclenche lorsque le lecteur passe sa main au dessus d'un endroit particulier du livre. Pour cela, il nous reste à nous procurer du matériel, un mini ampli et une résistance adéquate, faire les tests et créer l'objet.
22/12 : Le son ne fonctionne pas non plus avec un véritable haut parleur. Peut être est-ce un problème de fichier et de formatage ? En tout cas nos différentes tentatives n'aboutissent pas.
Ci dessous photos des circuits réalisés :
[[Fichier:circuit1.JPG]]
[[Fichier:circuit2.JPG]]

ERG::interactionsphysiques

2016-11-10T09:20:08Z

Latinobandant :

ERG::Code-2016-2

2016-11-10T09:03:10Z

Latinobandant : /* Cours du 10.11.16: Expérimentations 4 */

==Introduction==
Ce cours est destiné aux étudiants de BAC3. Il s'articule, cette année, autour des questions suivantes:
* À la question "est-ce que le code s'apprend seul?", nous allons répondre par la négative, puisque lorsque l'on affirme que le code s'apprend seul, on présuppose que seul, on a accès à des ressources et que si l'on a accès à ces ressources, c'est qu'elles sont mises en commun. Comment, à l'échelle d'un atelier, mettre en place une dynamique de mise en commun des connaissances liées au code?
* Comment et pourquoi s'emparer en tant qu'artiste ou graphiste de langages et systèmes pensés comme "efficaces"?

==Cours==
===[[ERG::150916|Cours du 15.09.16: Introduction]]===
===[[ERG::220916|Cours du 22.09.16: Pistes de travail]]===
===[[ERG::290916|Cours du 29.09.16: Expérimentations 1]]===
===[[ERG::061016|Cours du 06.10.16: Expérimentations 2]]===
===[[ERG::201016|Cours du 20.10.16: Expérimentations 3]]===
===[[ERG::271016|Cours du 27.10.16: Expérimentations 4]]===
===[[ERG::271016|Cours du 10.11.16: Expérimentations 5]]===

ERG::Code-2016-2

2016-11-10T09:02:58Z

Latinobandant :

ERG::codepourcode

2016-09-29T09:29:19Z

Latinobandant : /* L'idée */

== Lecture, écriture, typographie, impression, montrer le code en tant que tel.
Lire le code sans l'exécuter.==

----
C'est peut être pour rendre le code plus universel ?
Pour la programmation il y a une typographie spéciale… je crois que c'est une monospace. Il faut que ce soit assez soft et lisible. Ce n'était pas une règle mais presque.

----
Quelle est la typo la plus confortable pour les yeux ?
Dans les romans quand le corps de texte petit, pour les long texte, on repère souvent des typographies comme Garamond avec ces serifs qui rendent le passage entre les lettres très fluide. Pour le code, ils utilisent pas du tout le même type de typographie, elle est plus agressive. C'est une monospace.

"Je pense à une typo faite exclusivement pour les annuaires téléphoniques, c'est un peu le même délire. Une typographie purement adaptée à la fonction."

Mark Simonson a crée une nouvelle typographie où les caractères se différencient plus, notamment au niveau des zéros, de la lettre O… l'usage et le besoin de lisibilité façonne la forme.

Quelles sont les caractéristiques ?

Des que tu vois cette typo tu sais que c'est du code, et justement si tu l'utilises pour autre chose, il y a un glissement de sens.
Il y a plein de programmeur qui se crée leur propre typographie. Il y a plein de sondages qui questionne qu'elle est votre typographie préférée et c'est souvent la courrier qui revient.

----
http://www.developpez.net/forums/d867834/club-professionnels-informatique/actualites/police-caracteres-preferee-developper/

http://c.developpez.com/actu/57522/Quelle-est-la-meilleure-typo-pour-programmer-Avez-vous-tendance-a-preferer-une-typo-a-une-autre/

http://static.ccm2.net/www.commentcamarche.net/faq/images/3960-rzVcj8bbgkejyl53.png

Il faudrait que le contenu soit hiérarchise, comme si tu lisais ton code comme un roman, le mettre en page. Tu fais une mise en page du code qui simplifie la lecture et le rend plus confortable.

Comment tu imprimes ton code ?
Le fait de l'imprimer ca ne sert plus à rien ? Je trouve ça assez drôle ! Ca devient juste quelque chose de purement informatique. Surtout les codes générés automatiquement. Il y a une perte de sens. Rien que le fait de l'imprimer lui offre un autre statut.

--> Il y a la notion de "révéler le truc", il y a peut être quelque chose à faire au niveau interactif, peut être avec des images lenticulaires.
C'est important d'avoir quelque chose de physique.
Montrer pour le montrer c'est peut être pas intéressant, il faut peut être valoriser quelques chose, pointer une caractéristique.

- Mais il y a tout ce coté pédagogique, de vulgarisation du code.

Ca me fait penser à Jodi, ils ont plein de site internet, dont une qui est plein de wwwww. quand tu regardes leur code source, il y a un dessin qui se forme.
C'est tout de même pour "les initiés"

http://wwwwwwwww.jodi.org/

Il y a l'ASCII art aussi, qui est beaucoup plus illustré
- c'est moins du code pour moi ça, c'est plutôt dessiner avec le langage.

Il y a ce parti prix de "cacher relever", de double actions avec l'image lenticulaire. Il y a aussi la couleur qui peut permettre de cacher et révéler l'écriture, lorsque l'on utilise.

Mais il ne faut pas qu'il soit cacher, il faut qu'il soit au premier plan.

L'oralité du code fait penser à la poésie, on pourrait faire de la poésie du code. Il y a quand même une syntaxe très stricte et c'est déroutant d'imaginer une lecture à voix haute.

Il y tout les trucs de forum aussi… des petits bouts de programme implanté dans la conversation. Il est généralement mis en scène, dans une petite boite, avec une sorte d'alinéa. C'est un peu le seul endroit où les deux langages se côtoient.
Les commentaires dans le code sont un peu l'inverse des forums. Un peu comme des marginaliat.

Il y a la revue back office qui va sortir prochainement qui traite de ces problématiques.

http://www.revue-backoffice.com/fr

On propose une traduction du code au sens mega large ? Que le code côtoie quelques chose d'autre et que cette relation puisse nous proposer une traduction.

Ca pourrait être un poème que l'on traduit en code justement.

Il faudrait que ce soit manipulable, des que c'est mis a l'écran c'est mis à distance. Que ce soit tactile en quelque sorte. IL y a là un lien encore avec l'impression.

La signification des couleurs, les gammes de couleurs et les thème dans les logiciels d'écriture. C'est hyper graphique parfois.

Créer une forme à partir de l'écriture.
Les imbrications

== 29 / 09 - 29 / 09 - 29 / 09 - 29 / 09 - 29 / 09 - 29 / 09 - 29 / 09 - 29 / 09 ==

http://www.ioccc.org/
Faire un programme qui a une forme qui a pour volonté de l'obscurcir, de le rendre moins lisible.

Ben Fry

== L'idée ==

1 - On choisis un morceau de code intéréssant trouvé dans le code source d'un site internet
2 - On le met en page avec du html/css pour qu'il devienne un objet lisible sur un A4
3 - On fait un poster qui regroupe nos 4 extraits pour produire une colléction

rèf:
 http://www.cneai.com/
 http://yantomaszewski.com/fr
http://foxcodex.html.xdomain.jp/
http://www.smallvictori.es/
http://www.nosajthing.com/

ERG::exercicestechniques

2016-09-22T09:50:22Z

Latinobandant :

[[Fichier:Schema (1).jpg]]
https://scratch.mit.edu/
http://www.yourworldoftext.com
https://fr.wikisource.org/wiki/Wikisource:Accueil
http://codepen.io/

- Manu (animation)
Martin évoque scratch pour apprendre à coder, site pour enfants mais intéressants pour apprendre.

- Julie: Javascript ou du PHP, pas d'idées d'exercices particuliers
Faire un petit wiki à plusieurs ou updater le contenu de ce dont
Faire un plan écrit / dessiné pour expliquer comment marche internet, le css et le html.

- Martin: codepen
http://codepen.io/ : pour partager l'écriture.
Exercices d'introduction CSS HTML PROCESSING

- Léo: PHP , processing ==> faire des exercices que ce soit interactifs

- Margot: s'entrainer à publier des sites, à écrire le HTML et le CSS apprendre à utiliser internet

1/ FAIRE SCHÉMA de comment fonctionne un wiki / internet ….
Schémas fait au tableau à la craie, de notre vision d'internet et comment ça marche….
Puis debriefing des schémas et leurs signification

2/ Schéma général sur le fonctionnement d'internet

ERG::exercicestechniques

2016-09-22T09:47:37Z

Latinobandant :

[[Fichier:Schema.jpg]]Références:
https://scratch.mit.edu/
http://www.yourworldoftext.com
https://fr.wikisource.org/wiki/Wikisource:Accueil
http://codepen.io/

- Manu (animation)
Martin évoque scratch pour apprendre à coder, site pour enfants mais intéressants pour apprendre.

- Julie: Javascript ou du PHP, pas d'idées d'exercices particuliers
Faire un petit wiki à plusieurs ou updater le contenu de ce dont
Faire un plan écrit / dessiné pour expliquer comment marche internet, le css et le html.

- Martin: codepen
http://codepen.io/ : pour partager l'écriture.
Exercices d'introduction CSS HTML PROCESSING

- Léo: PHP , processing ==> faire des exercices que ce soit interactifs

- Margot: s'entrainer à publier des sites, à écrire le HTML et le CSS apprendre à utiliser internet

1/ FAIRE SCHÉMA de comment fonctionne un wiki / internet ….
Schémas fait au tableau à la craie, de notre vision d'internet et comment ça marche….
Puis debriefing des schémas et leurs signification

2/ Schéma général sur le fonctionnement d'internet

Fichier:Schema (1).jpg

2016-09-22T09:45:38Z

Latinobandant :

Erg:: Léo

2016-04-12T19:19:28Z

Latinobandant :

{{{ Léo GILLET }}}

@@@@@@@@@@@@@@@@@@@

Création d'une BD numérique aléatoire dont les images sont directement ajoutées par le visiteur

[[Fichier:Numériser 1.jpg]]

@@@@@@@@@@@@@@@@@@@

Erg:: Léo

2016-04-12T19:18:15Z

Latinobandant :

{{{ Léo GILLET }}}

@@@@@@@@@@@@@@@@@@@

Création d'une BD numérique aléatoire dont les images sont directement ajoutées par le visiteur

[[Fichier:Numériser 1.jpg]]

@@@@@@@@@@@@@@@@@@@

Fichier:Numériser 1.jpg

2016-04-12T19:16:07Z

Latinobandant :

Erg:: Léo

2016-03-08T09:48:41Z

Latinobandant : Page créée avec « {{{ Léo GILLET }}} Donc j'ai envie de bosser avec l’image. Une page génératrice d’images, où tout le monde pourrait interagir en rajoutant des images et que cela c... »

{{{ Léo GILLET }}}
Donc j'ai envie de bosser avec l’image. Une page génératrice d’images, où tout le monde pourrait interagir en rajoutant des images et que cela créé une banque de données où celles-ci seraient regroupées par ressemblances (éloignées ou non). Ce serait inspiré de site comme http://ulfablabla.free.fr/ ou encore de page fcbk comme https://www.facebook.com/Angelcore-971801712848820/ . Il y aurait un système de # pour pouvoir catégoriser/relier les images entre elles. ---> système d'arbre, chaîne; Plus une image sera marquée, plus elle représentera une catégorie de début de chaîne (plus grosse). Après mon projet est à approfondir et à préciser techniquement et aussi voir ce que j'ai réellement envie de défendre par l'image.

ERG::Exercice 3

2016-03-08T09:48:00Z

Latinobandant :

<pre>

( (
)\ ) )\ )
(()/( ( ( ( ( ) ) (()/( ( ( ( (
/(_)))( ( )\))( )( ( /( ( /(_)) ))\ ( )\ )\))( (
(_)) (()\ )\ ((_))\(()\ )(_)) )\ ' (_))_ /((_))\((_)((_))\ )\ )
| _ \ ((_) ((_) (()(_)((_)((_)_ _((_)) | \ (_)) ((_)(_) (()(_)_(_/(
| _/| '_|/ _ \/ _` || '_|/ _` || ' \() | |) |/ -_)(_-<| |/ _` || ' \))
|_| |_| \___/\__, ||_| \__,_||_|_|_| |___/ \___|/__/|_|\__, ||_||_|
|___/ |___/

Pour cet exercice, il vous est demandé de designer entièrement un programme.
J'entends par programme un ensemble d'instructions écrites destinées à être exécutées.
L'exécution dans votre cas ne devra pas forcément être réalisée par une machine.

Le programme dont vous allez créer l'architecture devra
correspondre aux critères suivants:

- il doit recevoir une/des information(s) en entrée. Ces informations peuvent
-> provenir de périphériques de captations (micros, capteurs, scanners, clavier, souris, etc.)
-> provenir d'Internet (base de données, site(s) web, flux, etc.)
-> ...
la/les nature(s) de ces informations sont libres, il peut s'agir d'images, de texte, de sons, de coordonnées, etc.

- il doit produire une ou des formes de même nature(s) ou de nature(s) différente(s) des informations entrées. Un son peut produire une image, une image un son, un geste une typographie, un texte un mouvement, etc.
- le périphérique de sortie est libre (écran, ampli, robot, imprimante, corps, main, etc.).
- le langage de programmation est libre (js, python, java, php, c++, pseudo-langage, etc.).

L'exercice est divisé en étapes. Chaque étape fait partie de votre travail et doit être documentée sur le wiki du cours. Les différentes étapes seront ajoutées progressivement à la suite de cet énoncé.

1) Décrire la problématique en français. Que fera votre programme? Comment décrire son objet? Pensez aux mots que vous utilisez, à la structure de votre texte. Cette première description est globale; elle ne doit pas contenir tous les détails de fonctionnement du programme.

</pre>

[[erg::pagelionel | La page de Lionel ]]

[[erg::pagearnaudV | La page de Arnaud ]]

[[erg::pageraphaelle | La page de Raphaëlle ]]

[[erg::page_pierre_barick | La page de pierre barick ]]

[[erg:: Alice | La page d' Alice]]

[[erg:: Clément | La page de Clément]]

[[erg:: Gabriel| La page de Gabriel]]

[[erg:: Jean| La page de Jean]]

[[erg:: Marie| La page de Marie]]

[[erg:: Marie| La page ]]

[[erg:: Léo| La page de Léo ]]

Utilisateur:Latinobandant

2016-03-08T09:42:55Z

Latinobandant : Page blanchie

Utilisateur:Latinobandant

2016-03-08T09:42:06Z

Latinobandant : la page de Léo Gillet

{{{ Léo GILLET }}}

Donc j'ai envie de bosser avec l’image. Une page génératrice d’images, où tout le monde pourrait interagir en rajoutant des images et que cela créé une banque de données où celles-ci seraient regroupées par ressemblances (éloignées ou non). Ce serait inspiré de site comme http://ulfablabla.free.fr/ ou encore de page fcbk comme https://www.facebook.com/Angelcore-971801712848820/ . Il y aurait un système de # pour pouvoir catégoriser/relier les images entre elles. ---> système d'arbre, chaîne; Plus une image sera marquée, plus elle représentera une catégorie de début de chaîne (plus grosse). Après mon projet est à approfondir et à préciser techniquement et aussi voir ce que j'ai réellement envie de défendre par l'image.

Erg::groupe mal

2015-10-20T09:46:39Z

Latinobandant : /* Dauphin */

== Dauphin==

FACEBOOK

par,

'''L'''éo

'''M'''arie

'''G'''abriel

ERG::Exercice 2

2015-10-20T09:44:55Z

Latinobandant :

<pre> .-'''-. .-'''-.
.---. ' _ \ ' _ \
| | / /` '. \ / /` '. \ __ __ ___
| | .-. .-. | \ ' . | \ ' | |/ `.' `.
| | \ \ / /| ' | ' .| .| | ' | '| .-. .-. ' .|
| | __ \ \ / / \ \ / / .' |_ __ .' |_\ \ / / | | | | | | __ .' |_ __
| | .:--.'. \ \ / / `. ` ..' /_ _ .' | .:--.'. _ _ .' |`. ` ..' / | | | | | | .:--.'. .' | .:--.'.
| |/ | \ | \ \ / / '-...-'`| ' / |'--. .-' / | \ | | ' / |'--. .-' '-...-'` | | | | | |/ | \ |'--. .-'/ | \ |
| |`" __ | | \ ` / .' | .' | | | `" __ | | .' | .' | | | | | | | | |`" __ | | | | `" __ | |
| | .'.''| | \ / / | / | | | .'.''| | / | / | | | |__| |__| |__| .'.''| | | | .'.''| |
'---'/ / | |_ / / | `'. | | '.' / / | |_| `'. | | '.' / / | |_ | '.'/ / | |_
\ \._,\ '/|`-' / ' .'| '/ | / \ \._,\ '/' .'| '/ | / \ \._,\ '/ | / \ \._,\ '/
`--' `" '..' `-' `--' `'-' `--' `" `-' `--' `'-' `--' `" `'-' `--' `"

Cet exercice vise à vous faire réaliser une édition de minimum 100 pages, à partir d'un contenu récupéré sur le web. La mise en page se fera exclusivement en html/css/javascript. La récupération de contenu peut se faire via un programme informatique ou non. L'exercice est divisé en plusieurs étapes:

1) formez un groupe de 3 personnes
2) trouvez sur Inernet une source de données que contiendra votre édition.
Exemples: http://www.gutenberg.org/cache/epub/2600/pg2600.txt, https://archive.org/details/labiblefranaise00reusgoog, https://fr.wikipedia.org/wiki/G%C3%A9n%C3%A9alogie_g%C3%A9n%C3%A9rale_des_Cap%C3%A9tiens, https://www.google.be/search?site=&tbm=isch&source=hp&q=cats
3) créez une page sur le wiki en insérant un lien sous cet énoncé. Cette page contiendra le lien vers la source choisie, un descriptif de la méthode que vous utiliserez pour récupérer les données et une note brève décrivant votre démarche de traitement des données.
4) réalisez votre édition. Elle doit être à la fois mise en ligne sur vos espaces ftp respectifs et exportée au format pdf puis imprimée. Les choix de format(s), de technique(s) d'impression, de papier(s) et de reliure(s) sont libres.

L'édition et la version en ligne doivent être rendues pour le cours du 24 novembre.
</pre>

[[erg::groupe truc|la page de groupe truc]]

[[erg::groupe mal|La page du groupe MAL]]

[[erg::groupe mal|La page du groupe Dauphin]]