{} - Contributions de l’utilisateur [fr]

Sous-titre - Hugo

2019-05-16T09:43:48Z

HugoD :

Pour compléter mon projet d'édition en typographie, j'avais besoin de récupérer les sous-titres de plusieurs vidéos youtube sous forme de textes, pour les intégrer à mon édition.

Dans mes premières recherches, j'ai d'abord voulu créer un script qui irait chercher pour moi les sous-titres si je lui indiquait le lien de ma vidéo. J'ai très vite atterris sur le site de google où il est expliqué que tout les accès à ses informations sont protégés. Pour le faire, il faut utiliser une API particulière, et faire des demandes d'autorisations.

[[Fichier:Autorisation google.png]]
''https://developers.google.com/youtube/v3/docs/captions/download''
''https://developers.google.com/youtube/registering_an_application''

Vu le peu de vidéos dont il me fallait le sous-titre, j'ai cherché un moyen de les récupérer moi même. J'ai trouvé une astuce sur un forum obscur; sur chrome, quand on lance une vidéo, si on active les sous-titres et qu'on inspect la page, dans l'onglet network on peut accéder aux sous-titre. Ils s'ouvrent dans un nouvel onglet, sous forme d'un fichier XML.

[[Fichier:Youtube timedtext.png]]
[[Fichier:Sous-titre xml.png]]

Sauf que ce XML est très moche, plein de truc chiant pour faire de la mise en page. Grâce a a un peu de javascript, j'ai quand même réussi à le nettoyer, pour en extraire uniquement le texte que je voulais mettre en page. Notamment en utilisant <code>getElementById()</code> pour extraire le texte des balises xml dans lequel il était.

[[Fichier:Javascript cleaner.png]]

J'obtiens ainsi un beau texte que je n'ai plus qu'a copié/coller pour compléter mon édition.

[[Fichier:Texte propre.png]]

Sous-titre - Hugo

2019-05-16T09:40:37Z

HugoD :

Pour compléter mon projet d'édition en typographie, j'avais besoin de récupérer les sous-titre de plusieurs vidéos youtube sous forme de textes, pour les intégrer à mon édition.

Dans mes premières recherches, j'ai d'abord voulu créer un script qui irait chercher pour moi les sous-titres si je lui indiquait le lien de ma vidéo. j'ai vite atterris sur le site de google où il est expliqué que tout les accès a ses informations sont protégés. Pour le faire, il faut utiliser une API particulière, et faire des demandes d'autorisations.

[[Fichier:Autorisation google.png]]
''https://developers.google.com/youtube/v3/docs/captions/download''
''https://developers.google.com/youtube/registering_an_application''

Vu le peu de vidéos dont il me fallait le sous-titre, j'ai cherché un moyen de les récupérer moi même. J'ai trouvé une astuce sur un forum obscur; sur chrome, quand on lance une vidéo, si on active les sous-titres et qu'on inspect la page, dans l'onglet network on peut accéder aux sous-titre. Ils s'ouvrent dans un nouvel onglet, sous forme d'un fichier XML.

[[Fichier:Youtube timedtext.png]]
[[Fichier:Sous-titre xml.png]]

Sauf que ce XML est très moche, plein de truc chiant pour faire de la mise en page. Grâce a a un peu de javascript, j'ai quand même réussi à le nettoyer, pour en extraire uniquement le texte que je voulais mettre en page. Notamment en utilisant <code>getElementById()</code> pour extraire le texte des balises xml dans lequel il était.

[[Fichier:Javascript cleaner.png]]

J'obtiens ainsi un beau texte que je n'ai plus qu'a copié/coller pour le mettre en page

[[Fichier:Texte propre.png]]

Fichier:Texte propre.png

2019-05-16T09:40:20Z

HugoD :

Fichier:Javascript cleaner.png

2019-05-16T09:38:42Z

HugoD :

Sous-titre - Hugo

2019-05-16T09:17:47Z

HugoD : Page créée avec « Pour compléter mon projet d'édition en typographie, j'avais besoin de récupérer les sous-titre de plusieurs vidéos youtube sous forme de textes, pour les intégrer à... »

Fichier:Sous-titre xml.png

2019-05-16T09:15:27Z

HugoD :

Fichier:Youtube timedtext.png

2019-05-16T09:14:29Z

HugoD :

Fichier:Autorisation google.png

2019-05-16T09:12:43Z

HugoD : HugoD a téléversé une nouvelle version de Fichier:Autorisation google.png

Fichier:Autorisation google.png

2019-05-16T09:03:28Z

HugoD :

ERG::Code-2018-2

2019-05-16T08:58:06Z

HugoD : /* Projets */

==Projets==

[[Typoem - Quentin Lamouroux]]

[[La fétichisation de l'Objet - Quentin Lamouroux]]

[[programme - Clara Sambot]]

[[.IMG]]

[[TYPO3000 - Nathan Laurent]]

[[Destroy prog. zoeflts]]

[[Campix_alice]]

[[oram - Simon Bouvier]]

[[p(A)Rojet - Anthony Pauwels]]

[[Trame92 - Hugo Delpluque]]

[[Framing - Jean Cardin]]

[[Máquina do tempo - Sofia Erzini]]

[[test]]

[[Partition Graphique - Jade Rouanet]]

[[Sous-titre - Hugo]]

==Scripts démos==
===Un script php pour analyser un fichier json de conversations Messenger===
<syntaxhighlight lang="php">
function fixBadUnicodeForJson($str) {
$str = preg_replace_callback(
'/\\\\u00([0-9a-f]{2})\\\\u00([0-9a-f]{2})\\\\u00([0-9a-f]{2})\\\\u00([0-9a-f]{2})/',
function($matches) { return chr(hexdec("$1")).chr(hexdec("$2")).chr(hexdec("$3")).chr(hexdec("$4")); },
$str
);
$str = preg_replace_callback(
'/\\\\u00([0-9a-f]{2})\\\\u00([0-9a-f]{2})\\\\u00([0-9a-f]{2})/',
function($matches) { return chr(hexdec("$1")).chr(hexdec("$2")).chr(hexdec("$3")); },
$str
);
$str = preg_replace_callback(
'/\\\\u00([0-9a-f]{2})\\\\u00([0-9a-f]{2})/',
function($matches) { return chr(hexdec("$1")).chr(hexdec("$2")); },
$str
);
$str = preg_replace_callback(
'/\\\\u00([0-9a-f]{2})/',
function($matches) { return chr(hexdec("$1")); },
$str
);
return $str;
}

function textConverter($str){
$str = utf8_decode(fixBadUnicodeForJson($str));
return $str;
}

$data = file_get_contents("tiina.json");
$data_traitee = json_decode($data);
//echo $data_data_traitee;
//print_r($data_traitee);
//echo $data_traitee->participants[0]->name;

echo $data_traitee->messages[5]->content;

foreach($data_traitee->messages as $message){
//echo ''.textConverter($message->content).'';
//echo "$message->content";

$test1 = strpos($message->content, 'non');
$test2 = strpos($message->content, 'pas');

if($test1 != false && $test2 != false){
echo ''.textConverter($message->content).'';
}

}

?>
</syntaxhighlight>

Trame92 - Hugo Delpluque

2018-12-20T10:45:19Z

HugoD :

Une application web dans lequel on peut uploader un fichier pour le tramer.
* Plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Cherchez plusieurs algorithme de trame (Turing, ligne continue type plotter...)

<pre style="white-space:pre">
+-----------------------+
| upload image via php |
+-----------+-----------+
|
+---------v---------+
| afficher l'image |
| sur le navigateur |
+---------+---------+
|
+----------v-----------+
| utiliser canvas pour |
| obtenir des infos |
| sur l'image |
+----------+-----------+
|
+------------v--------------+
| appliquer des algorithmes |
| de trame sur ses infos |
| pour modifier l'image |
+---------------------------+
</pre>

* Des applications pour ça existe déjà. Du coup essayer de coder une application qui trame que en traits continue pour utiliser avec les traceurs/ploteurs serait plus utile.
* Basé sur le même principe: upload d'image en ligne - affichage d'image sur le navigateur - affichage des options et vectorisation depuis le navigateur.

* On trouve facilement et beaucoup d'information sur comment uploader une image sur un serveur depuis un un navigateur. Il est en ligne et fonctionnel: http://curlybraces.be/erg/2018-2019/hugodelpluque/

[[Fichier:Capture_d’écran_1.png]]

* Après des recherches, il me semble que ça sera plus facile de coder la vectorisation sur Processing et ensuite de l'intégrer dans le navigateur
* https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/ explique comment inclure un sketch processing dans une page html
* http://processingjs.org/learning/ processing.js, version plus récente et plus facile d'inclure un sketch processing sur du web

* Impossible de trouver des informations sur "comment coder une vectorisation". Partout je ne trouve que des "utiliser illustrator/inkscape". aucune informations sur comment le faire sois-même.
* Ce qui s'en rapproche le plus est https://processing.org/tutorials/pixels/ qui explique comment "lire" l'image pixel par pixel pour les traduire en formes svg. Le problème est que je me retrouve avec une mosaïque de formes colorées alors que je cherche une vectorisation noir et blanc en ligne (si possible continue).

[[Fichier: Capture_d’écran.png]]

Trame92 - Hugo Delpluque

2018-12-20T09:17:33Z

HugoD :

Une application web dans lequel on peut uploader un fichier pour le tramer.
* Plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Cherchez plusieurs algorithme de trame (Turing, ligne continue type plotter...)

<pre style="white-space:pre">
+-----------------------+
| upload image via php |
+-----------+-----------+
|
+---------v---------+
| afficher l'image |
| sur le navigateur |
+---------+---------+
|
+----------v-----------+
| utiliser canvas pour |
| obtenir des infos |
| sur l'image |
+----------+-----------+
|
+------------v--------------+
| appliquer des algorithmes |
| de trame sur ses infos |
| pour modifier l'image |
+---------------------------+
</pre>

* Des applications pour ça existe déjà. Du coup essayer de coder une application qui trame que en traits continue pour utiliser avec les traceurs/ploteurs serait plus utile.
* Basé sur le même principe: upload d'image en ligne - affichage d'image sur le navigateur - affichage des options et vectorisation depuis le navigateur.

* On trouve facilement et beaucoup d'information sur comment uploader une image sur un serveur depuis un un navigateur. Il est en ligne et fonctionnel: http://curlybraces.be/erg/2018-2019/hugodelpluque/

[[Fichier:Capture_d’écran_1.png]]

* Après des recherches, il me semble que ça sera plus facile de coder la vectorisation sur Processing et ensuite de l'intégrer dans le navigateur
* https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/ explique comment inclure un sketch processing dans une page html

* Impossible de trouver des informations sur "comment coder une vectorisation". Partout je ne trouve que des "utiliser illustrator/inkscape". aucune informations sur comment le faire sois-même.
* Ce qui s'en rapproche le plus est https://processing.org/tutorials/pixels/ qui explique comment "lire" l'image pixel par pixel pour les traduire en formes svg. Le problème est que je me retrouve avec une mosaïque de formes colorées alors que je cherche une vectorisation noir et blanc en ligne (si possible continue).

[[Fichier: Capture_d’écran.png]]

Trame92 - Hugo Delpluque

2018-12-20T09:16:51Z

HugoD :

Une application web dans lequel on peut uploader un fichier pour le tramer.
* Plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Cherchez plusieurs algorithme de trame (Turing, ligne continue type plotter...)

<pre style="white-space:pre">
+-----------------------+
| upload image via php |
+-----------+-----------+
|
+---------v---------+
| afficher l'image |
| sur le navigateur |
+---------+---------+
|
+----------v-----------+
| utiliser canvas pour |
| obtenir des infos |
| sur l'image |
+----------+-----------+
|
+------------v--------------+
| appliquer des algorithmes |
| de trame sur ses infos |
| pour modifier l'image |
+---------------------------+
</pre>

* Des applications pour ça existe déjà. Du coup essayer de coder une application qui trame que en traits continue pour utiliser avec les traceurs/ploteurs serait plus utile.
* Basé sur le même principe: upload d'image en ligne - affichage d'image sur le navigateur - affichage des options et vectorisation depuis le navigateur.

* On trouve facilement et beaucoup d'information sur comment uploader une image sur un serveur depuis un un navigateur:

[[Fichier:Capture_d’écran_1.png]]

* Après des recherches, il me semble que ça sera plus facile de coder la vectorisation sur Processing et ensuite de l'intégrer dans le navigateur
* https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/ explique comment inclure un sketch processing dans une page html

* Impossible de trouver des informations sur "comment coder une vectorisation". Partout je ne trouve que des "utiliser illustrator/inkscape". aucune informations sur comment le faire sois-même.
* Ce qui s'en rapproche le plus est https://processing.org/tutorials/pixels/ qui explique comment "lire" l'image pixel par pixel pour les traduire en formes svg. Le problème est que je me retrouve avec une mosaïque de formes colorées alors que je cherche une vectorisation noir et blanc en ligne (si possible continue).

[[Fichier: Capture_d’écran.png]]

Fichier:Capture d’écran 1.png

2018-12-20T09:16:22Z

HugoD :

Trame92 - Hugo Delpluque

2018-12-20T09:15:49Z

HugoD :

Une application web dans lequel on peut uploader un fichier pour le tramer.
* Plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Cherchez plusieurs algorithme de trame (Turing, ligne continue type plotter...)

<pre style="white-space:pre">
+-----------------------+
| upload image via php |
+-----------+-----------+
|
+---------v---------+
| afficher l'image |
| sur le navigateur |
+---------+---------+
|
+----------v-----------+
| utiliser canvas pour |
| obtenir des infos |
| sur l'image |
+----------+-----------+
|
+------------v--------------+
| appliquer des algorithmes |
| de trame sur ses infos |
| pour modifier l'image |
+---------------------------+
</pre>

* Des applications pour ça existe déjà. Du coup essayer de coder une application qui trame que en traits continue pour utiliser avec les traceurs/ploteurs serait plus utile.
* Basé sur le même principe: upload d'image en ligne - affichage d'image sur le navigateur - affichage des options et vectorisation depuis le navigateur.

* On trouve facilement et beaucoup d'information sur comment uploader une image sur un serveur depuis un un navigateur:

* Après des recherches, il me semble que ça sera plus facile de coder la vectorisation sur Processing et ensuite de l'intégrer dans le navigateur
* https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/ explique comment inclure un sketch processing dans une page html

* Impossible de trouver des informations sur "comment coder une vectorisation". Partout je ne trouve que des "utiliser illustrator/inkscape". aucune informations sur comment le faire sois-même.
* Ce qui s'en rapproche le plus est https://processing.org/tutorials/pixels/ qui explique comment "lire" l'image pixel par pixel pour les traduire en formes svg. Le problème est que je me retrouve avec une mosaïque de formes colorées alors que je cherche une vectorisation noir et blanc en ligne (si possible continue).

[[Fichier: Capture_d’écran.png]]

Trame92 - Hugo Delpluque

2018-12-20T09:13:11Z

HugoD :

Une application web dans lequel on peut uploader un fichier pour le tramer.
* Plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Cherchez plusieurs algorithme de trame (Turing, ligne continue type plotter...)

<pre style="white-space:pre">
+-----------------------+
| upload image via php |
+-----------+-----------+
|
+---------v---------+
| afficher l'image |
| sur le navigateur |
+---------+---------+
|
+----------v-----------+
| utiliser canvas pour |
| obtenir des infos |
| sur l'image |
+----------+-----------+
|
+------------v--------------+
| appliquer des algorithmes |
| de trame sur ses infos |
| pour modifier l'image |
+---------------------------+
</pre>

* Des applications pour ça existe déjà. Du coup essayer de coder une application qui trame que en traits continue pour utiliser avec les traceurs/ploteurs serait plus utile.
* Basé sur le même principe: upload d'image en ligne - affichage d'image sur le navigateur - affichage des options et vectorisation depuis le navigateur.

* Après des recherches, il me semble que ça sera plus facile de coder la vectorisation sur Processing et ensuite de l'intégrer dans le navigateur
* https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/ explique comment inclure un sketch processing dans une page html

* Impossible de trouver des informations sur "comment coder une vectorisation". Partout je ne trouve que des "utiliser illustrator/inkscape". aucune informations sur comment le faire sois-même.
* Ce qui s'en rapproche le plus est https://processing.org/tutorials/pixels/ qui explique comment "lire" l'image pixel par pixel pour les traduire en formes svg. Le problème est que je me retrouve avec une mosaïque de formes colorées alors que je cherche une vectorisation noir et blanc en ligne (si possible continue).

[[Fichier: Capture_d’écran.png]]

Fichier:Capture d’écran.png

2018-12-20T09:12:19Z

HugoD :

Trame92 - Hugo Delpluque

2018-12-20T08:34:16Z

HugoD :

Une application web dans lequel on peut uploader un fichier pour le tramer.
* Plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Cherchez plusieurs algorithme de trame (Turing, ligne continue type plotter...)

<pre style="white-space:pre">
+-----------------------+
| upload image via php |
+-----------+-----------+
|
+---------v---------+
| afficher l'image |
| sur le navigateur |
+---------+---------+
|
+----------v-----------+
| utiliser canvas pour |
| obtenir des infos |
| sur l'image |
+----------+-----------+
|
+------------v--------------+
| appliquer des algorithmes |
| de trame sur ses infos |
| pour modifier l'image |
+---------------------------+
</pre>

* Des applications pour ça existe déjà. Du coup essayer de coder une application qui trame que en traits continue pour utiliser avec les traceurs/ploteurs serait plus utile.
* Basé sur le même principe: upload d'image en ligne - affichage d'image sur le navigateur - affichage des options et vectorisation depuis le navigateur.

* Après des recherches, il me semble que ça sera plus facile de coder la vectorisation sur Processing et ensuite de l'intégrer dans le navigateur
* https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/ explique comment inclure un sketch processing dans une page html

* Impossible de trouver des informations sur "comment coder une vectorisation". Partout je ne trouve que des "utiliser illustrator/inkscape". aucune informations sur comment le faire sois-même.
* Ce qui s'en rapproche le plus est https://processing.org/tutorials/pixels/ qui explique comment "lire" l'image pixel par pixel pour les traduire en formes svg. Le problème est que je me retrouve avec une mosaïque de formes colorées alors que je cherche une vectorisation noir et blanc en ligne (si possible continue). Impasse?

Trame92 - Hugo Delpluque

2018-12-20T08:33:35Z

HugoD :

Une application web dans lequel on peut uploader un fichier pour le tramer.
* Plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Cherchez plusieurs algorithme de trame (Turing, ligne continue type plotter...)

<pre style="white-space:pre">
+-----------------------+
| upload image via php |
+-----------+-----------+
|
+---------v---------+
| afficher l'image |
| sur le navigateur |
+---------+---------+
|
+----------v-----------+
| utiliser canvas pour |
| obtenir des infos |
| sur l'image |
+----------+-----------+
|
+------------v--------------+
| appliquer des algorithmes |
| de trame sur ses infos |
| pour modifier l'image |
+---------------------------+
</pre>

* Des applications pour ça existe déjà. Du coup essayer de coder une application qui trame que en traits continue pour utiliser avec les traceurs/ploteurs serait plus utile.
* Basé sur le même principe: upload d'image en ligne - affichage d'image sur le navigateur - affichage des options et vectorisation depuis le navigateur.

* Après des recherches, il me semble que ça sera plus facile de coder la vectorisation sur Processing et ensuite de l'intégrer dans le navigateur
* https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/ explique comment inclure un sketch processing dans une page html

* Impossible de trouver des informations sur "comment coder une vectorisation". Partout je ne trouve que des "utiliser illustrator/inkscape". aucune informations sur comment le faire sois-même.
* Ce qui s'en rapproche le plus est http://processingjs.org/learning/ qui explique comment "lire" l'image pixel par pixel pour les traduire en formes svg. Le problème est que je me retrouve avec une mosaïque de formes colorées alors que je cherche une vectorisation noir et blanc en ligne (si possible continue). Impasse?

Trame92 - Hugo Delpluque

2018-12-20T08:33:01Z

HugoD :

Une application web dans lequel on peut uploader un fichier pour le tramer.
* Plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Cherchez plusieurs algorithme de trame (Turing, ligne continue type plotter...)

<pre style="white-space:pre">
+-----------------------+
| upload image via php |
+-----------+-----------+
|
+---------v---------+
| afficher l'image |
| sur le navigateur |
+---------+---------+
|
+----------v-----------+
| utiliser canvas pour |
| obtenir des infos |
| sur l'image |
+----------+-----------+
|
+------------v--------------+
| appliquer des algorithmes |
| de trame sur ses infos |
| pour modifier l'image |
+---------------------------+
</pre>

* Des applications pour ça existe déjà. Du coup essayer de coder une application qui trame que en traits continue pour utiliser avec les traceurs/ploteurs serait plus utile.
* Basé sur le même principe: upload d'image en ligne - affichage d'image sur le navigateur - affichage des options et vectorisation depuis le navigateur.

* Après des recherches, il me semble que ça sera plus facile de coder la vectorisation sur Processing et ensuite de l'intégrer dans le navigateur
* https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/ explique comment inclure un sketch processing dans une page html

* Impossible de trouver des informations sur "comment coder une vectorisation". Partout je ne trouve que des "utiliser illustrator/inkscape". aucune informations sur comment le faire sois-même.
* Ce qui s'en rapproche le plus est http://processingjs.org/learning/ qui explique comment "lire" l'image pixel par pixel pour les traduire en formes svg. Le problème est que je me retrouve avec une mosaïque de formes colorées alors que je cherche une vectorisation noir et blanc en ligne (si possible continue). Impasse?

</pre>

Trame92 - Hugo Delpluque

2018-12-19T19:57:46Z

HugoD :

Une application web dans lequel on peut uploader un fichier pour le tramer.
* Plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Cherchez plusieurs algorithme de trame (Turing, ligne continue type plotter...)

<pre style="white-space:pre">
+-----------------------+
| upload image via php |
+-----------+-----------+
|
+---------v---------+
| afficher l'image |
| sur le navigateur |
+---------+---------+
|
+----------v-----------+
| utiliser canvas pour |
| obtenir des infos |
| sur l'image |
+----------+-----------+
|
+------------v--------------+
| appliquer des algorithmes |
| de trame sur ses infos |
| pour modifier l'image |
+---------------------------+

* Des applications pour ça existe déjà. Du coup essayer de coder une application qui trame que en traits continue pour utiliser avec les traceurs/ploteurs serait plus utile.
* Basé sur le même principe: upload d'image en ligne - affichage d'image sur le navigateur - affichage des options et vectorisation depuis le navigateur.

* Après des recherches, il me semble que ça sera plus facile de coder la vectorisation sur Processing et ensuite de l'intégrer dans le navigateur
* https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/ explique comment inclure un sketch processing dans une page html

* Impossible de trouver des informations sur "comment coder une vectorisation". Partout je ne trouve que des "utiliser illustrator/inkscape". aucune informations sur comment le faire sois-même.
* Ce qui s'en rapproche le plus est http://processingjs.org/learning/ qui explique comment "lire" l'image pixel par pixel pour les traduire en formes svg. Le problème est que je me retrouve avec une mosaïque de formes colorées alors que je cherche une vectorisation noir et blanc en ligne (si possible continue). Impasse?

</pre>

Trame92 - Hugo Delpluque

2018-10-11T09:07:28Z

HugoD :

Trame92 - Hugo Delpluque

2018-10-11T09:06:02Z

HugoD :

Une application web dans lequel on peut uploader un fichier (image matricielle, vectorielle, fichier font) pour le tramer.
* Le fichier est d'abord vectorisé.
* Ensuite plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Comment vectoriser une image?
* Comment modifier les caractéristiques de cette image avec affichage en temps réel?
* Comment appliquer la formule de la morphogenèse de Alan Turing a un système de trame?

<pre style="white-space:pre">
+-----------------------+
| upload image via php |
+-----------+-----------+
|
+---------v---------+
| afficher l'image |
| sur le navigateur |
+---------+---------+
|
+----------v-----------+
| utiliser canvas pour |
| obtenir des infos |
| sur l'image |
+----------+-----------+
|
+------------v--------------+
| appliquer des algorithmes |
| de trame sur ses infos |
| pour modifier l'image |
+---------------------------+

</pre>

Trame92 - Hugo Delpluque

2018-10-11T09:03:47Z

HugoD :

Une application web dans lequel on peut uploader un fichier (image matricielle, vectorielle, fichier font) pour le tramer.
* Le fichier est d'abord vectorisé.
* Ensuite plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Comment vectoriser une image?
* Comment modifier les caractéristiques de cette image avec affichage en temps réel?
* Comment appliquer la formule de la morphogenèse de Alan Turing a un système de trame?

<code>
+-----------------------+
| upload image via php |
+-----------+-----------+
|
+---------v---------+
| afficher l'image |
| sur le na^igateur |
+---------+---------+
|
+----------v-----------+
| utiliser canvas pour |
| obtenir des infos |
| sur l'image |
+----------+-----------+
|
+------------v--------------+
| appliquer des algorithmes |
| de trame sur ses infos |
| pour modifier l'image |
+---------------------------+
</code>

Trame92 - Hugo Delpluque

2018-10-11T09:01:47Z

HugoD :

Une application web dans lequel on peut uploader un fichier (image matricielle, vectorielle, fichier font) pour le tramer.
* Le fichier est d'abord vectorisé.
* Ensuite plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Comment vectoriser une image?
* Comment modifier les caractéristiques de cette image avec affichage en temps réel?
* Comment appliquer la formule de la morphogenèse de Alan Turing a un système de trame?

+-----------------------+
| upload image via php |
+-----------+-----------+
|
+---------v---------+
| afficher l'image |
| sur le na^igateur |
+---------+---------+
|
+----------v-----------+
| utiliser canvas pour |
| obtenir des infos |
| sur l'image |
+----------+-----------+
|
+------------v--------------+
| appliquer des algorithmes |
| de trame sur ses infos |
| pour modifier l'image |
+---------------------------+

Trame92 - Hugo Delpluque

2018-10-04T09:23:40Z

HugoD :

Une application web dans lequel on peut uploader un fichier (image matricielle, vectorielle, fichier font) pour le tramer.
* Le fichier est d'abord vectorisé.
* Ensuite plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Comment vectoriser une image?
* Comment modifier les caractéristiques de cette image avec affichage en temps réel?
* Comment appliquer la formule de la morphogenèse de Alan Turing a un système de trame?

+----------------+
| UPLOAD IMAGE |
+----------------+
|
|
+-------v------+
| VECTORISER |
+--------------+
|
|
+---------v---------+
| TRAMAGE |
|reglage de la trame|
+-------------------+
|
|
+-------v-------+
| DOWNLOAD |
|choix du format|
|d'exploration |
+---------------+

Trame92 - Hugo Delpluque

2018-10-04T09:00:45Z

HugoD :

Une application web dans lequel on peut uploader un fichier (image matricielle, vectorielle, fichier font) pour le tramer.
* Le fichier est d'abord vectorisé.
* Ensuite plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Comment vectoriser une image?
* Comment modifier les caractéristiques de cette image avec affichage en temps réel?
* Comment appliquer les motifs de Turing à une trame?

+----------------+
| UPLOAD IMAGE |
+----------------+
|
|
+-------v------+
| VECTORISER |
+--------------+
|
|
+---------v---------+
| TRAMAGE |
|reglage de la trame|
+-------------------+
|
|
+-------v-------+
| DOWNLOAD |
|choix du format|
|d'exploration |
+---------------+

Trame92 - Hugo Delpluque

2018-10-04T08:57:32Z

HugoD :

Une application web dans lequel on peut uploader un fichier (image matricielle, vectorielle, fichier font) pour le tramer.
* Le fichier est d'abord vectorisé.
* Ensuite plusieurs types de trames sont proposées: points, lignes horizontales, carrés, géométrique, organique...
* Puis plusieurs curseurs permettent de régler la trame choisie: orientation, graisse, nombre, nuance (créer un niveau de gris)...
* Une fois les réglages finalisés le fichier peut être exporté (pdf ou svg).

* Comment vectoriser une image?
* Comment modifier les caractéristiques de cette image avec affichage en temps réel?

+----------------+
| UPLOAD IMAGE |
+----------------+
|
|
+-------v------+
| VECTORISER |
+--------------+
|
|
+---------v---------+
| TRAMAGE |
|reglage de la trame|
+-------------------+
|
|
+-------v-------+
| DOWNLOAD |
|choix du format|
|d'exploration |
+---------------+

Trame92 - Hugo Delpluque

2018-10-04T08:31:20Z

HugoD :

Trame92 - Hugo Delpluque

2018-10-04T08:23:47Z

HugoD : Page créée avec « Une application web dans lequel on peut uploader un fichier (image matricielle, vectorielle, fichier font) pour le tramer. * Le fichier est d'abord vectorisé. * Ensuite... »

ERG::Code-2018-2

2018-10-04T08:05:29Z

HugoD :

==Projets==

[[Typoem - Quentin Lamouroux]]

[[programme - Clara Sambot]]

[[.IMG]]

[[TYPO3000 - Nathan Laurent]]

[[Destroy prog. zoeflts]]

[[programme1_alice]]

[[oram - Simon Bouvier]]

[[Projet en cours de reflexion-AnthonyPauwels]]

[[Trame92 - Hugo Delpluque]]

ERG::Code-2017-1

2018-02-26T09:04:14Z

HugoD : /* Groupes de travail */

==Introduction==
Ce cours est destiné aux étudiants de BAC2. Le but est ici de faire un tour d'horizon de pratiques et de possibilités liées à la programmation et plus généralement à l'algorithmique et au numérique.

Nous commencerons cette année par une introduction aux pages web, avec les langages html et css, pour très vite enchaîner sur le javascript et l'écriture de programmes. Nous nous attarderons ensuite sur les bases de données, le stockage d'information, pour terminer par la génération de supports imprimés via les outils orientés web (html, javascript, css).

Quelques points importants:

* La plupart des travaux seront réalisés dans le cadre de l'atelier. La présence au cours est donc nécessaire.
* Le cours se veut à la fois pratique et théorique: les étudiants seront encouragés à se documenter et se positionner par rapport aux questions que posent le code informatique, son écriture et ses applications dans divers domaines.
* La recherche et la documentation font partie du cours. Une attention toute particulière sera apportée au partage d'informations entre nous et vers l'extérieur.

==Séances==
===25/09/2017===
* Brève introduction aux langages de programmation : langage machine, langage assembleur, langage évolué, langages de scripts (langages interprétés), langages compilés, langage de balisage (langage de marquage), langage de requête

<pre>
BINAIRE (langage machine)

0 0
1 1
1 0 2
1 1 3
1 0 0 4
1 0 1 5
1 1 0 6
1 1 1 7
1 0 0 0 8

1 0 0 0 0 0 0 0 128 (1 octet)

ASSEMBLEUR
COBOL
C
C++

JAVA > interpreté
Python > idem

HPGL > pour les traceurs
POSTSCRIPT > pour les imprimantes
BASH > pour le terminal
JQUERY > JAVASCRIPT
PROCESSING > JAVA

HTML > côté client, interprété
CSS > côté client, interprété
JAVASCRIPT > côté client, interprété
PHP > côté serveur, interpreté
SQL > côté serveur, interprété
Ruby on rail > côté serveur, interprété

</pre>

* Mains dans l'html: créer un labyrinthe de pages web

===02/10/2017===
* Introduction à Internet et au web
* Mise en ligne du labyrinthe
* Main dans le css: mise en page d'un contenu existant
http://curlybraces.be/erg/2017-2018/lionelmaes/introcss.zip

===09/10/2017===
* Le positionnement en css : intro
http://curlybraces.be/erg/2017-2018/lionelmaes/20171009positionnement.zip
<pre>
1. réalisez un carré rouge qui prend tout l’écran dans lequel se trouve un carré jaune centré horizontalement et verticalement quelque soit la taille de la fenêtre.👽
2. Réalise un drapeau belge sur toute la page🇧🇪
3. Fais moi un Mario en pixel art (pixel = bloc de 20x20 px)
4. faire un damier de 5 carrés horizontaux et verticaux qui s'adapte à la taille de l'écran
5. créer un motif avec des superpositions de carrés (au moins 5 carrés de couleur différentes avec des positionnements différents).
6.Créez un escalier de 12 rectangles de 100 px par 20 px avec les couleurs de l'arc-en-ciel
7. créer 5 carrés de différentes couleurs qui se superposent avec transparence > opacity:1; opacity:0.5;
8. Réalise une lettre à partir de carrés (avec un positionnement fixe) et une qui s'adapte à la
9. Créer 5 carrés avec 5 bordures de couleurs différentes
10. réaliser un bloc fixe qui change de couleur à un certain niveau de la page par dessus d'autres blocs mobiles
avoir un menu fixe à gauche sur toute la page et faire 4 colonnes de texte qui se placent les une à côté des autres s'il y a de la place, les unes en dessous des autres sinon
12. réaliser un dégradé de blocs
13. réaliser 3 blocs de couleur bleu, les uns à coté des autres, dont celui du milieu est fixé sur la page
</pre>

===16/10/2017===
* Positionnement en css: suite
* Démo js: intro

===23/10/2017===

* Javascript: introduction et exercice d'écriture de scénario avec prompt et alert
http://curlybraces.be/erg/2017-2018b3/lionelmaes/20171023demo_js.zip

===06/11/2017===
* Javascript: récapitulatif
http://curlybraces.be/erg/2017-2018/lionelmaes/20171106rappeljs.zip
* Jquery: introduction
http://curlybraces.be/erg/2017-2018/lionelmaes/20171106introjquery.zip

===13/11/2017===
* Exercices jquery: énoncés
<pre>
1. faire une page avec un carré dans le coin supérieur gauche qui vas dans le coin supérieur droit quand on clic dessus puis en bas a droite puis en bas a gauche puis en haut a gauche puis ainsi de suite...
2. Faire une page avec 3 carrés un à coté des autres avec du texte centré à l'intérieur. Cliquer sur le carré pour faire agrandir le texte
3. Faire une page avec des carres en arc en ciel qui apparait et disparait et changent de taille
4. faire un bloc qui prend tout l'écran, à chaque refresh de la page le bloc doit être d'une nouvelle couleur aléatoire`
5.Faire un carré
6. Construire une page avec un carré dans l'espace. Cliquer sur le carré pour le faire disparaitre puis le faire réapparaitre de façon aléatoire dans la page
8. faire un carré dans l'angle supérieur gauche de la page. Lors du clic, faire répéter le carré horizontalement et de façon continue jusqu'à la fin de cette page.
7. Faire en sorte qu'un bloc se déplace partout ou on clique
9. Créer un gros bloc où quand on clique dessus il rétrécit, encore et encore jusqu'à ce qu'il disparaisse

10.faire deux colonnes de bloc en deux couleurs différentes qui changent de couleur quand on clique dessus

11.faire trois carrés de couleurs differentes superposés, quand on clique dessus le carré disparait pour faire apparaitre celui en dessous
</pre>

===20/11/2017===
* Jquery: dessin
http://curlybraces.be/erg/2017-2018/lionelmaes/20171120dessinjs.zip

===04/12/2017===
* PHP: intro
http://curlybraces.be/erg/2017-2018/lionelmaes/20171204demophp.zip

===11/12/2017===
* PHP bases de données
http://curlybraces.be/erg/2017-2018/lionelmaes/20171211bag.zip

===05/02/2018 : introduction au deuxième quadrimestre===
* Travailler en groupe
**Mise en place d'un agenda de présentation des sujets liés aux travaux
**Chaque groupe crée la page de documentation de son projet sur le wiki
**Avant une présentation d'un groupe, les étudiants qui n'en font pas partie lisent le projet documenté. La présentation est un moment d'échange et de débat
**Les présentations sont transcrites par un(e) secrétaire
**À l'intérieur des groupes, à chaque fois qu'il y a des moments de mise en commun, ils sont également retranscrits par un(e) secrétaire et mis en ligne sur la page correspondante du wiki
https://www.youtube.com/watch?v=4GXCIbStB5c
* Bases de données
** D'où viennent les données? Choisir une ou plusieurs sources parmi la liste suivante:
***Les bibliothèques des membres du groupe
***Un flux twitter d'un politicien au choix
***Les flux facebook des membres du groupe
***Un site de recettes de cuisine
***Les trajets en transports en commun des membres du groupe
***Un forum thématique (au choix) du site Doctissimo
***Les commentaires d'un site d'actualités au choix
***Les discours d'un politicien au choix
***Les pads créés pour le dernier séminaire de l'ERG
***Un ensemble de documents provenant de wikileaks.org
** Quel est l'intérêt de les stocker? Formuler une hypothèse.
** Que garder ou ne pas garder?
** Produire un schéma de structure
***Quelles seront les entités, quelles seront les relations?
** À la fin du cours: présenter le projet via la page wiki du groupe

===12/02/2018 : bases de données: suite===
* Création d'un schéma de base de données
** Répondre aux questions suivantes:
***Quelles sont les entités? Exemples: article, commentaire, utilisateur, livre, etc.
***Quels sont les champs pour chaque entité? Exemples: corps de texte, chapeau, nom, prénom, date, etc.
***Quelles sont les relations entre les entités, via quels champs? Exemple: un article est lié à un auteur via le champ id_auteur
** Produire le schéma soit sur papier, soit via http://asciiflow.com/

* Quel médium pour la base de données? Choisir un ou plusieurs médium parmi la liste suivante:
** Des fiches physiques
** Une structure de dossiers et de fichiers sur ordinateur
** Une base de données type SQL

*Quelle méthode pour insérer du contenu dans la base de données?
** Écrire un scénario de remplissage, que la méthode soit numérique ou non. Écrire ce scénario comme une recette de cuisine ou un programme, en étant le plus précis possible. Exemple: Tous les jours à 15h à partir du 12 février 2018 jusqu'au 25 février 2018, scanner la homepage du site lemonde.fr. Pour chaque lien vers un article d'actualité, suivre le lien, scanner la page désignée par le lien. Pour chaque commentaire publié sur cette page, récupérer la date, le nombre de mots. Insérer une nouvelle entrée dans la table "comments" de la base de données en utilisant ces deux informations.
** Créer un schéma correspondant à ce scénario, soit sur papier, soit via http://asciiflow.com/
** Suivant les besoins du scénario, définir si la méthode est numérique, analogique ou les deux.

* À la fin du cours: présenter le projet via la page wiki du groupe

===19/02/2018 : bases de données: suite===
* MySQL et phpMyAdmin
* Quel médium pour la base de données? Choisir un ou plusieurs médium parmi la liste suivante:
** Des fiches physiques
** Une structure de dossiers et de fichiers sur ordinateur
** Une base de données type SQL

*Quelle méthode pour insérer du contenu dans la base de données?
** Écrire un scénario de remplissage, que la méthode soit numérique ou non. Écrire ce scénario comme une recette de cuisine ou un programme, en étant le plus précis possible. Exemple: Tous les jours à 15h à partir du 12 février 2018 jusqu'au 25 février 2018, scanner la homepage du site lemonde.fr. Pour chaque lien vers un article d'actualité, suivre le lien, scanner la page désignée par le lien. Pour chaque commentaire publié sur cette page, récupérer la date, le nombre de mots. Insérer une nouvelle entrée dans la table "comments" de la base de données en utilisant ces deux informations.
** Créer un schéma correspondant à ce scénario, soit sur papier, soit via http://asciiflow.com/
** Suivant les besoins du scénario, définir si la méthode est numérique, analogique ou les deux.

* Documenter, planifier, démarrer la récolte
* À la fin du cours: présenter le projet via la page wiki du groupe

==Groupes de travail==
*[[ERG::2018-Le Nouveau Détective| Le Nouveau Détective]]
*[[ERG::2018-Façon Secte - Tribal King| Façon Secte - Tribal King]]
*[[ERG::2018-JadeFredMorgane | JadeFredMorgane ]]
*[[ERG::2018-Doctissimo | Doctissimo ]]

==Agenda de présentations==
===19/02/2018===
===26/02/2018===
===05/03/2018===
===12/03/2018===

ERG::Code-2017-1

2018-02-26T09:03:41Z

HugoD : /* Groupes de travail */

==Introduction==
Ce cours est destiné aux étudiants de BAC2. Le but est ici de faire un tour d'horizon de pratiques et de possibilités liées à la programmation et plus généralement à l'algorithmique et au numérique.

Nous commencerons cette année par une introduction aux pages web, avec les langages html et css, pour très vite enchaîner sur le javascript et l'écriture de programmes. Nous nous attarderons ensuite sur les bases de données, le stockage d'information, pour terminer par la génération de supports imprimés via les outils orientés web (html, javascript, css).

Quelques points importants:

* La plupart des travaux seront réalisés dans le cadre de l'atelier. La présence au cours est donc nécessaire.
* Le cours se veut à la fois pratique et théorique: les étudiants seront encouragés à se documenter et se positionner par rapport aux questions que posent le code informatique, son écriture et ses applications dans divers domaines.
* La recherche et la documentation font partie du cours. Une attention toute particulière sera apportée au partage d'informations entre nous et vers l'extérieur.

==Séances==
===25/09/2017===
* Brève introduction aux langages de programmation : langage machine, langage assembleur, langage évolué, langages de scripts (langages interprétés), langages compilés, langage de balisage (langage de marquage), langage de requête

<pre>
BINAIRE (langage machine)

0 0
1 1
1 0 2
1 1 3
1 0 0 4
1 0 1 5
1 1 0 6
1 1 1 7
1 0 0 0 8

1 0 0 0 0 0 0 0 128 (1 octet)

ASSEMBLEUR
COBOL
C
C++

JAVA > interpreté
Python > idem

HPGL > pour les traceurs
POSTSCRIPT > pour les imprimantes
BASH > pour le terminal
JQUERY > JAVASCRIPT
PROCESSING > JAVA

HTML > côté client, interprété
CSS > côté client, interprété
JAVASCRIPT > côté client, interprété
PHP > côté serveur, interpreté
SQL > côté serveur, interprété
Ruby on rail > côté serveur, interprété

</pre>

* Mains dans l'html: créer un labyrinthe de pages web

===02/10/2017===
* Introduction à Internet et au web
* Mise en ligne du labyrinthe
* Main dans le css: mise en page d'un contenu existant
http://curlybraces.be/erg/2017-2018/lionelmaes/introcss.zip

===09/10/2017===
* Le positionnement en css : intro
http://curlybraces.be/erg/2017-2018/lionelmaes/20171009positionnement.zip
<pre>
1. réalisez un carré rouge qui prend tout l’écran dans lequel se trouve un carré jaune centré horizontalement et verticalement quelque soit la taille de la fenêtre.👽
2. Réalise un drapeau belge sur toute la page🇧🇪
3. Fais moi un Mario en pixel art (pixel = bloc de 20x20 px)
4. faire un damier de 5 carrés horizontaux et verticaux qui s'adapte à la taille de l'écran
5. créer un motif avec des superpositions de carrés (au moins 5 carrés de couleur différentes avec des positionnements différents).
6.Créez un escalier de 12 rectangles de 100 px par 20 px avec les couleurs de l'arc-en-ciel
7. créer 5 carrés de différentes couleurs qui se superposent avec transparence > opacity:1; opacity:0.5;
8. Réalise une lettre à partir de carrés (avec un positionnement fixe) et une qui s'adapte à la
9. Créer 5 carrés avec 5 bordures de couleurs différentes
10. réaliser un bloc fixe qui change de couleur à un certain niveau de la page par dessus d'autres blocs mobiles
avoir un menu fixe à gauche sur toute la page et faire 4 colonnes de texte qui se placent les une à côté des autres s'il y a de la place, les unes en dessous des autres sinon
12. réaliser un dégradé de blocs
13. réaliser 3 blocs de couleur bleu, les uns à coté des autres, dont celui du milieu est fixé sur la page
</pre>

===16/10/2017===
* Positionnement en css: suite
* Démo js: intro

===23/10/2017===

* Javascript: introduction et exercice d'écriture de scénario avec prompt et alert
http://curlybraces.be/erg/2017-2018b3/lionelmaes/20171023demo_js.zip

===06/11/2017===
* Javascript: récapitulatif
http://curlybraces.be/erg/2017-2018/lionelmaes/20171106rappeljs.zip
* Jquery: introduction
http://curlybraces.be/erg/2017-2018/lionelmaes/20171106introjquery.zip

===13/11/2017===
* Exercices jquery: énoncés
<pre>
1. faire une page avec un carré dans le coin supérieur gauche qui vas dans le coin supérieur droit quand on clic dessus puis en bas a droite puis en bas a gauche puis en haut a gauche puis ainsi de suite...
2. Faire une page avec 3 carrés un à coté des autres avec du texte centré à l'intérieur. Cliquer sur le carré pour faire agrandir le texte
3. Faire une page avec des carres en arc en ciel qui apparait et disparait et changent de taille
4. faire un bloc qui prend tout l'écran, à chaque refresh de la page le bloc doit être d'une nouvelle couleur aléatoire`
5.Faire un carré
6. Construire une page avec un carré dans l'espace. Cliquer sur le carré pour le faire disparaitre puis le faire réapparaitre de façon aléatoire dans la page
8. faire un carré dans l'angle supérieur gauche de la page. Lors du clic, faire répéter le carré horizontalement et de façon continue jusqu'à la fin de cette page.
7. Faire en sorte qu'un bloc se déplace partout ou on clique
9. Créer un gros bloc où quand on clique dessus il rétrécit, encore et encore jusqu'à ce qu'il disparaisse

10.faire deux colonnes de bloc en deux couleurs différentes qui changent de couleur quand on clique dessus

11.faire trois carrés de couleurs differentes superposés, quand on clique dessus le carré disparait pour faire apparaitre celui en dessous
</pre>

===20/11/2017===
* Jquery: dessin
http://curlybraces.be/erg/2017-2018/lionelmaes/20171120dessinjs.zip

===04/12/2017===
* PHP: intro
http://curlybraces.be/erg/2017-2018/lionelmaes/20171204demophp.zip

===11/12/2017===
* PHP bases de données
http://curlybraces.be/erg/2017-2018/lionelmaes/20171211bag.zip

===05/02/2018 : introduction au deuxième quadrimestre===
* Travailler en groupe
**Mise en place d'un agenda de présentation des sujets liés aux travaux
**Chaque groupe crée la page de documentation de son projet sur le wiki
**Avant une présentation d'un groupe, les étudiants qui n'en font pas partie lisent le projet documenté. La présentation est un moment d'échange et de débat
**Les présentations sont transcrites par un(e) secrétaire
**À l'intérieur des groupes, à chaque fois qu'il y a des moments de mise en commun, ils sont également retranscrits par un(e) secrétaire et mis en ligne sur la page correspondante du wiki
https://www.youtube.com/watch?v=4GXCIbStB5c
* Bases de données
** D'où viennent les données? Choisir une ou plusieurs sources parmi la liste suivante:
***Les bibliothèques des membres du groupe
***Un flux twitter d'un politicien au choix
***Les flux facebook des membres du groupe
***Un site de recettes de cuisine
***Les trajets en transports en commun des membres du groupe
***Un forum thématique (au choix) du site Doctissimo
***Les commentaires d'un site d'actualités au choix
***Les discours d'un politicien au choix
***Les pads créés pour le dernier séminaire de l'ERG
***Un ensemble de documents provenant de wikileaks.org
** Quel est l'intérêt de les stocker? Formuler une hypothèse.
** Que garder ou ne pas garder?
** Produire un schéma de structure
***Quelles seront les entités, quelles seront les relations?
** À la fin du cours: présenter le projet via la page wiki du groupe

===12/02/2018 : bases de données: suite===
* Création d'un schéma de base de données
** Répondre aux questions suivantes:
***Quelles sont les entités? Exemples: article, commentaire, utilisateur, livre, etc.
***Quels sont les champs pour chaque entité? Exemples: corps de texte, chapeau, nom, prénom, date, etc.
***Quelles sont les relations entre les entités, via quels champs? Exemple: un article est lié à un auteur via le champ id_auteur
** Produire le schéma soit sur papier, soit via http://asciiflow.com/

* Quel médium pour la base de données? Choisir un ou plusieurs médium parmi la liste suivante:
** Des fiches physiques
** Une structure de dossiers et de fichiers sur ordinateur
** Une base de données type SQL

*Quelle méthode pour insérer du contenu dans la base de données?
** Écrire un scénario de remplissage, que la méthode soit numérique ou non. Écrire ce scénario comme une recette de cuisine ou un programme, en étant le plus précis possible. Exemple: Tous les jours à 15h à partir du 12 février 2018 jusqu'au 25 février 2018, scanner la homepage du site lemonde.fr. Pour chaque lien vers un article d'actualité, suivre le lien, scanner la page désignée par le lien. Pour chaque commentaire publié sur cette page, récupérer la date, le nombre de mots. Insérer une nouvelle entrée dans la table "comments" de la base de données en utilisant ces deux informations.
** Créer un schéma correspondant à ce scénario, soit sur papier, soit via http://asciiflow.com/
** Suivant les besoins du scénario, définir si la méthode est numérique, analogique ou les deux.

* À la fin du cours: présenter le projet via la page wiki du groupe

===19/02/2018 : bases de données: suite===
* MySQL et phpMyAdmin
* Quel médium pour la base de données? Choisir un ou plusieurs médium parmi la liste suivante:
** Des fiches physiques
** Une structure de dossiers et de fichiers sur ordinateur
** Une base de données type SQL

*Quelle méthode pour insérer du contenu dans la base de données?
** Écrire un scénario de remplissage, que la méthode soit numérique ou non. Écrire ce scénario comme une recette de cuisine ou un programme, en étant le plus précis possible. Exemple: Tous les jours à 15h à partir du 12 février 2018 jusqu'au 25 février 2018, scanner la homepage du site lemonde.fr. Pour chaque lien vers un article d'actualité, suivre le lien, scanner la page désignée par le lien. Pour chaque commentaire publié sur cette page, récupérer la date, le nombre de mots. Insérer une nouvelle entrée dans la table "comments" de la base de données en utilisant ces deux informations.
** Créer un schéma correspondant à ce scénario, soit sur papier, soit via http://asciiflow.com/
** Suivant les besoins du scénario, définir si la méthode est numérique, analogique ou les deux.

* Documenter, planifier, démarrer la récolte
* À la fin du cours: présenter le projet via la page wiki du groupe

==Groupes de travail==
*[[ERG::2018-Le Nouveau Détective| Le Nouveau Détective]]
*[[ERG::2018-Façon Secte - Tribal King]]
*[[ERG::2018-JadeFredMorgane | JadeFredMorgane ]]
*[[ERG::2018-Doctissimo | Doctissimo ]]

==Agenda de présentations==
===19/02/2018===
===26/02/2018===
===05/03/2018===
===12/03/2018===

ERG::2018-AnthonyEloiseHugo

2018-02-26T09:03:05Z

HugoD : HugoD a déplacé la page ERG::2018-AnthonyEloiseHugo vers ERG::2018-Façon Secte - Tribal King

#REDIRECTION [[ERG::2018-Façon Secte - Tribal King]]

ERG::2018-Façon Secte - Tribal King

2018-02-26T09:03:05Z

HugoD : HugoD a déplacé la page ERG::2018-AnthonyEloiseHugo vers ERG::2018-Façon Secte - Tribal King

05/02/2018
Nous avons choisis de prendre le forum psychologie de Doctissimo. Nous allons nous pencher sur la catégorie religion et spiritualité.
Nous essayons de nous intéressés aux sectes et aux paranormal.

12/02/2018
Nous avons décidé de se concentrer sur la partie secte du forum doctissimo, avec une entité "utilisateur" avec des informations sur ke créateur du post, et une entité "secte" avec des informations sur la secte.

[[Fichier:Schema_HugoAnthonyEloise.jpg]]

19/02/2018
Utilisation d'un medium physique: les post-it

Scénario de remplissage
*Pour tout les lundis matin à 9h00 avoir fait 6 post
*Se connecter au compte commun doctissimo
*Se rendre sur la section psychologie, dans la sous-section secte de Doctissimo
*Choisir un post: un post déjà fait doit être ajouté dans les favoris (étoile jaune)
*Après lecture (post et plusieurs commentaires), remplir le post-it "post"
*Créer un nouveau post-it "Secte", ou le compléter si il existe déjà.
*Créer un nouveau post-it "Utilisateur", ou le compléter si il existe déjà.
*Créer un nouveau post-it "Victime"
*Le lundi matin, concertation pour donner les Id aux éléments et créer les post-it faisant les liens:
**Id Post et Id Secte
**Id Secte et Id Victime
**Id Post et Id Victime
**Id Post et Id Utilisateur

ERG::2018-Façon Secte - Tribal King

2018-02-19T09:55:30Z

HugoD :

ERG::2018-Façon Secte - Tribal King

2018-02-19T09:55:12Z

HugoD :

05/02/2018
Nous avons choisis de prendre le forum psychologie de Doctissimo. Nous allons nous pencher sur la catégorie religion et spiritualité.
Nous essayons de nous intéressés aux sectes et aux paranormal.

12/02/2018
Nous avons décidé de se concentrer sur la partie secte du forum doctissimo, avec une entité "utilisateur" avec des informations sur ke créateur du post, et une entité "secte" avec des informations sur la secte.

[[Fichier:chema_HugoAnthonyEloise.jpg]]

19/02/2018
Utilisation d'un medium physique: les post-it

Scénario de remplissage
*Pour tout les lundis matin à 9h00 avoir fait 6 post
*Se connecter au compte commun doctissimo
*Se rendre sur la section psychologie, dans la sous-section secte de Doctissimo
*Choisir un post: un post déjà fait doit être ajouté dans les favoris (étoile jaune)
*Après lecture (post et plusieurs commentaires), remplir le post-it "post"
*Créer un nouveau post-it "Secte", ou le compléter si il existe déjà.
*Créer un nouveau post-it "Utilisateur", ou le compléter si il existe déjà.
*Créer un nouveau post-it "Victime"
*Le lundi matin, concertation pour donner les Id aux éléments et créer les post-it faisant les liens:
**Id Post et Id Secte
**Id Secte et Id Victime
**Id Post et Id Victime
**Id Post et Id Utilisateur

Fichier:Schema HugoAnthonyEloise.jpg

2018-02-19T09:54:36Z

HugoD :

ERG::2018-Façon Secte - Tribal King

2018-02-19T08:24:21Z

HugoD :

05/02/2018
Nous avons choisis de prendre le forum psychologie de Doctissimo. Nous allons nous pencher sur la catégorie religion et spiritualité.
Nous essayons de nous intéressés aux sectes et aux paranormal.

12/02/2018
Nous avons décidé de se concentrer sur la partie secte du forum doctissimo, avec une entité "utilisateur" avec des informations sur ke créateur du post, et une entité "secte" avec des informations sur la secte.

[[Fichier:Capture d’écran 53.png]]

19/02/2018
Utilisation d'un medium physique: les post-it

Scénario de remplissage
*Se rendre sur la section psychologie, dans la sous-section secte de Doctissimo
*Choisir le dernier post publié pas encore enregistré dans la base de donnée
*Après lecture (post et plusieurs commentaires), remplir le post-it "post"
*Créer un nouveau post-it "Secte", ou le compléter si il existe déjà.
*Créer un nouveau post-it "Utilisateur", ou le compléter si il existe déjà.
*Créer un nouveau post-it "Victime"
*Créer les post-it faisant les liens:
**Id Post et Id Secte
**Id Secte et Id Victime
**Id Post et Id Victime
**Id Post et Id Utilisateur

ERG::2018-Façon Secte - Tribal King

2018-02-19T08:21:49Z

HugoD :

05/02/2018
Nous avons choisis de prendre le forum psychologie de Doctissimo. Nous allons nous pencher sur la catégorie religion et spiritualité.
Nous essayons de nous intéressés aux sectes et aux paranormal.

12/02/2018
Nous avons décidé de se concentrer sur la partie secte du forum doctissimo, avec une entité "utilisateur" avec des informations sur ke créateur du post, et une entité "secte" avec des informations sur la secte.

[[Fichier:Capture d’écran 53.png]]

19/02/2018
Utilisation d'un medium physique: les post-it

Scénario de remplissage
*Se rendre sur la section psychologie, dans la sous-section secte de Doctissimo
*Choisir le dernier post publié pas encore enregistré dans la base de donnée
*Après lecture (poste et plusieurs commentaires), remplir le post-it "post"
*Créer un nouveau post-it "Secte", ou le compléter si il existe déjà.
*Créer un nouveau post-it "Utilisateur", ou le compléter si il existe déjà.
*Créer un nouveau post-it "Victime"
*Créer les post-it faisant les liens:
**Id Post et Id Secte
**Id Secte et Id Victime
**Id Poste et Id Victime
**Id Poste et Id Utilisateur

ERG::2018-Façon Secte - Tribal King

2018-02-12T08:58:18Z

HugoD :

Fichier:Capture d’écran 53.png

2018-02-12T08:57:44Z

HugoD : schéma base de donnée secte

schéma base de donnée secte

ERG::2018-Façon Secte - Tribal King

2018-02-12T08:55:12Z

HugoD :

ERG::2018-Façon Secte - Tribal King

2018-02-12T08:50:59Z

HugoD :

ERG::Code-2017-1

2018-02-05T09:11:59Z

HugoD :

==Introduction==
Ce cours est destiné aux étudiants de BAC2. Le but est ici de faire un tour d'horizon de pratiques et de possibilités liées à la programmation et plus généralement à l'algorithmique et au numérique.

Nous commencerons cette année par une introduction aux pages web, avec les langages html et css, pour très vite enchaîner sur le javascript et l'écriture de programmes. Nous nous attarderons ensuite sur les bases de données, le stockage d'information, pour terminer par la génération de supports imprimés via les outils orientés web (html, javascript, css).

Quelques points importants:

* La plupart des travaux seront réalisés dans le cadre de l'atelier. La présence au cours est donc nécessaire.
* Le cours se veut à la fois pratique et théorique: les étudiants seront encouragés à se documenter et se positionner par rapport aux questions que posent le code informatique, son écriture et ses applications dans divers domaines.
* La recherche et la documentation font partie du cours. Une attention toute particulière sera apportée au partage d'informations entre nous et vers l'extérieur.

==Séances==
===25/09/2017===
* Brève introduction aux langages de programmation : langage machine, langage assembleur, langage évolué, langages de scripts (langages interprétés), langages compilés, langage de balisage (langage de marquage), langage de requête

<pre>
BINAIRE (langage machine)

0 0
1 1
1 0 2
1 1 3
1 0 0 4
1 0 1 5
1 1 0 6
1 1 1 7
1 0 0 0 8

1 0 0 0 0 0 0 0 128 (1 octet)

ASSEMBLEUR
COBOL
C
C++

JAVA > interpreté
Python > idem

HPGL > pour les traceurs
POSTSCRIPT > pour les imprimantes
BASH > pour le terminal
JQUERY > JAVASCRIPT
PROCESSING > JAVA

HTML > côté client, interprété
CSS > côté client, interprété
JAVASCRIPT > côté client, interprété
PHP > côté serveur, interpreté
SQL > côté serveur, interprété
Ruby on rail > côté serveur, interprété

</pre>

* Mains dans l'html: créer un labyrinthe de pages web

===02/10/2017===
* Introduction à Internet et au web
* Mise en ligne du labyrinthe
* Main dans le css: mise en page d'un contenu existant
http://curlybraces.be/erg/2017-2018/lionelmaes/introcss.zip

===09/10/2017===
* Le positionnement en css : intro
http://curlybraces.be/erg/2017-2018/lionelmaes/20171009positionnement.zip
<pre>
1. réalisez un carré rouge qui prend tout l’écran dans lequel se trouve un carré jaune centré horizontalement et verticalement quelque soit la taille de la fenêtre.👽
2. Réalise un drapeau belge sur toute la page🇧🇪
3. Fais moi un Mario en pixel art (pixel = bloc de 20x20 px)
4. faire un damier de 5 carrés horizontaux et verticaux qui s'adapte à la taille de l'écran
5. créer un motif avec des superpositions de carrés (au moins 5 carrés de couleur différentes avec des positionnements différents).
6.Créez un escalier de 12 rectangles de 100 px par 20 px avec les couleurs de l'arc-en-ciel
7. créer 5 carrés de différentes couleurs qui se superposent avec transparence > opacity:1; opacity:0.5;
8. Réalise une lettre à partir de carrés (avec un positionnement fixe) et une qui s'adapte à la
9. Créer 5 carrés avec 5 bordures de couleurs différentes
10. réaliser un bloc fixe qui change de couleur à un certain niveau de la page par dessus d'autres blocs mobiles
avoir un menu fixe à gauche sur toute la page et faire 4 colonnes de texte qui se placent les une à côté des autres s'il y a de la place, les unes en dessous des autres sinon
12. réaliser un dégradé de blocs
13. réaliser 3 blocs de couleur bleu, les uns à coté des autres, dont celui du milieu est fixé sur la page
</pre>

===16/10/2017===
* Positionnement en css: suite
* Démo js: intro

===23/10/2017===

* Javascript: introduction et exercice d'écriture de scénario avec prompt et alert
http://curlybraces.be/erg/2017-2018b3/lionelmaes/20171023demo_js.zip

===06/11/2017===
* Javascript: récapitulatif
http://curlybraces.be/erg/2017-2018/lionelmaes/20171106rappeljs.zip
* Jquery: introduction
http://curlybraces.be/erg/2017-2018/lionelmaes/20171106introjquery.zip

===13/11/2017===
* Exercices jquery: énoncés
<pre>
1. faire une page avec un carré dans le coin supérieur gauche qui vas dans le coin supérieur droit quand on clic dessus puis en bas a droite puis en bas a gauche puis en haut a gauche puis ainsi de suite...
2. Faire une page avec 3 carrés un à coté des autres avec du texte centré à l'intérieur. Cliquer sur le carré pour faire agrandir le texte
3. Faire une page avec des carres en arc en ciel qui apparait et disparait et changent de taille
4. faire un bloc qui prend tout l'écran, à chaque refresh de la page le bloc doit être d'une nouvelle couleur aléatoire`
5.Faire un carré
6. Construire une page avec un carré dans l'espace. Cliquer sur le carré pour le faire disparaitre puis le faire réapparaitre de façon aléatoire dans la page
8. faire un carré dans l'angle supérieur gauche de la page. Lors du clic, faire répéter le carré horizontalement et de façon continue jusqu'à la fin de cette page.
7. Faire en sorte qu'un bloc se déplace partout ou on clique
9. Créer un gros bloc où quand on clique dessus il rétrécit, encore et encore jusqu'à ce qu'il disparaisse

10.faire deux colonnes de bloc en deux couleurs différentes qui changent de couleur quand on clique dessus

11.faire trois carrés de couleurs differentes superposés, quand on clique dessus le carré disparait pour faire apparaitre celui en dessous
</pre>

===20/11/2017===
* Jquery: dessin
http://curlybraces.be/erg/2017-2018/lionelmaes/20171120dessinjs.zip

===04/12/2017===
* PHP: intro
http://curlybraces.be/erg/2017-2018/lionelmaes/20171204demophp.zip

===11/12/2017===
* PHP bases de données
http://curlybraces.be/erg/2017-2018/lionelmaes/20171211bag.zip

===05/02/2018 : introduction au deuxième quadrimestre===
* Travailler en groupe
**Mise en place d'un agenda de présentation des sujets liés aux travaux
**Chaque groupe crée la page de documentation de son projet sur le wiki
**Avant une présentation d'un groupe, les étudiants qui n'en font pas partie lisent le projet documenté. La présentation est un moment d'échange et de débat
**Les présentations sont transcrites par un(e) secrétaire
**À l'intérieur des groupes, à chaque fois qu'il y a des moments de mise en commun, ils sont également retranscrits par un(e) secrétaire et mis en ligne sur la page correspondante du wiki
https://www.youtube.com/watch?v=4GXCIbStB5c
* Bases de données
** D'où viennent les données? Choisir une ou plusieurs sources parmi la liste suivante:
***Les bibliothèques des membres du groupe
***Un flux twitter d'un politicien au choix
***Les flux facebook des membres du groupe
***Un site de recettes de cuisine
***Les trajets en transports en commun des membres du groupe
***Un forum thématique (au choix) du site Doctissimo
***Les commentaires d'un site d'actualités au choix
***Les discours d'un politicien au choix
***Les pads créés pour le dernier séminaire de l'ERG
***Un ensemble de documents provenant de wikileaks.org
** Quel est l'intérêt de les stocker? Formuler une hypothèse.
** Que garder ou ne pas garder?
** Produire un schéma de structure
***Si la base de données est relationnelle (type tableur), quelles seront les entités, quelles seront les relations?
***Si la base est navigationnelle (structure de dossiers et de fichiers), quelles règles définiront le chemin?
** À la fin du cours: présenter le projet via la page wiki du groupe

==Groupes de travail==
*[[ERG::2018-mongroupe | Le groupe mongroupe]]
*[[ERG::2018-ClaraJeanMartinSebastien | ClaraJeanMartinSebastien]]
*[[ERG::2018-AnthonyEloiseHugo | AnthonyEloiseHugo]]

==Agenda de présentations==
===19/02/2018===
===26/02/2018===
===05/03/2018===
===12/03/2018===

ERG::Code-2017-1

2018-02-05T09:11:16Z

HugoD :

==Introduction==
Ce cours est destiné aux étudiants de BAC2. Le but est ici de faire un tour d'horizon de pratiques et de possibilités liées à la programmation et plus généralement à l'algorithmique et au numérique.

Nous commencerons cette année par une introduction aux pages web, avec les langages html et css, pour très vite enchaîner sur le javascript et l'écriture de programmes. Nous nous attarderons ensuite sur les bases de données, le stockage d'information, pour terminer par la génération de supports imprimés via les outils orientés web (html, javascript, css).

Quelques points importants:

* La plupart des travaux seront réalisés dans le cadre de l'atelier. La présence au cours est donc nécessaire.
* Le cours se veut à la fois pratique et théorique: les étudiants seront encouragés à se documenter et se positionner par rapport aux questions que posent le code informatique, son écriture et ses applications dans divers domaines.
* La recherche et la documentation font partie du cours. Une attention toute particulière sera apportée au partage d'informations entre nous et vers l'extérieur.

==Séances==
===25/09/2017===
* Brève introduction aux langages de programmation : langage machine, langage assembleur, langage évolué, langages de scripts (langages interprétés), langages compilés, langage de balisage (langage de marquage), langage de requête

<pre>
BINAIRE (langage machine)

0 0
1 1
1 0 2
1 1 3
1 0 0 4
1 0 1 5
1 1 0 6
1 1 1 7
1 0 0 0 8

1 0 0 0 0 0 0 0 128 (1 octet)

ASSEMBLEUR
COBOL
C
C++

JAVA > interpreté
Python > idem

HPGL > pour les traceurs
POSTSCRIPT > pour les imprimantes
BASH > pour le terminal
JQUERY > JAVASCRIPT
PROCESSING > JAVA

HTML > côté client, interprété
CSS > côté client, interprété
JAVASCRIPT > côté client, interprété
PHP > côté serveur, interpreté
SQL > côté serveur, interprété
Ruby on rail > côté serveur, interprété

</pre>

* Mains dans l'html: créer un labyrinthe de pages web

===02/10/2017===
* Introduction à Internet et au web
* Mise en ligne du labyrinthe
* Main dans le css: mise en page d'un contenu existant
http://curlybraces.be/erg/2017-2018/lionelmaes/introcss.zip

===09/10/2017===
* Le positionnement en css : intro
http://curlybraces.be/erg/2017-2018/lionelmaes/20171009positionnement.zip
<pre>
1. réalisez un carré rouge qui prend tout l’écran dans lequel se trouve un carré jaune centré horizontalement et verticalement quelque soit la taille de la fenêtre.👽
2. Réalise un drapeau belge sur toute la page🇧🇪
3. Fais moi un Mario en pixel art (pixel = bloc de 20x20 px)
4. faire un damier de 5 carrés horizontaux et verticaux qui s'adapte à la taille de l'écran
5. créer un motif avec des superpositions de carrés (au moins 5 carrés de couleur différentes avec des positionnements différents).
6.Créez un escalier de 12 rectangles de 100 px par 20 px avec les couleurs de l'arc-en-ciel
7. créer 5 carrés de différentes couleurs qui se superposent avec transparence > opacity:1; opacity:0.5;
8. Réalise une lettre à partir de carrés (avec un positionnement fixe) et une qui s'adapte à la
9. Créer 5 carrés avec 5 bordures de couleurs différentes
10. réaliser un bloc fixe qui change de couleur à un certain niveau de la page par dessus d'autres blocs mobiles
avoir un menu fixe à gauche sur toute la page et faire 4 colonnes de texte qui se placent les une à côté des autres s'il y a de la place, les unes en dessous des autres sinon
12. réaliser un dégradé de blocs
13. réaliser 3 blocs de couleur bleu, les uns à coté des autres, dont celui du milieu est fixé sur la page
</pre>

===16/10/2017===
* Positionnement en css: suite
* Démo js: intro

===23/10/2017===

* Javascript: introduction et exercice d'écriture de scénario avec prompt et alert
http://curlybraces.be/erg/2017-2018b3/lionelmaes/20171023demo_js.zip

===06/11/2017===
* Javascript: récapitulatif
http://curlybraces.be/erg/2017-2018/lionelmaes/20171106rappeljs.zip
* Jquery: introduction
http://curlybraces.be/erg/2017-2018/lionelmaes/20171106introjquery.zip

===13/11/2017===
* Exercices jquery: énoncés
<pre>
1. faire une page avec un carré dans le coin supérieur gauche qui vas dans le coin supérieur droit quand on clic dessus puis en bas a droite puis en bas a gauche puis en haut a gauche puis ainsi de suite...
2. Faire une page avec 3 carrés un à coté des autres avec du texte centré à l'intérieur. Cliquer sur le carré pour faire agrandir le texte
3. Faire une page avec des carres en arc en ciel qui apparait et disparait et changent de taille
4. faire un bloc qui prend tout l'écran, à chaque refresh de la page le bloc doit être d'une nouvelle couleur aléatoire`
5.Faire un carré
6. Construire une page avec un carré dans l'espace. Cliquer sur le carré pour le faire disparaitre puis le faire réapparaitre de façon aléatoire dans la page
8. faire un carré dans l'angle supérieur gauche de la page. Lors du clic, faire répéter le carré horizontalement et de façon continue jusqu'à la fin de cette page.
7. Faire en sorte qu'un bloc se déplace partout ou on clique
9. Créer un gros bloc où quand on clique dessus il rétrécit, encore et encore jusqu'à ce qu'il disparaisse

10.faire deux colonnes de bloc en deux couleurs différentes qui changent de couleur quand on clique dessus

11.faire trois carrés de couleurs differentes superposés, quand on clique dessus le carré disparait pour faire apparaitre celui en dessous
</pre>

===20/11/2017===
* Jquery: dessin
http://curlybraces.be/erg/2017-2018/lionelmaes/20171120dessinjs.zip

===04/12/2017===
* PHP: intro
http://curlybraces.be/erg/2017-2018/lionelmaes/20171204demophp.zip

===11/12/2017===
* PHP bases de données
http://curlybraces.be/erg/2017-2018/lionelmaes/20171211bag.zip

===05/02/2018 : introduction au deuxième quadrimestre===
* Travailler en groupe
**Mise en place d'un agenda de présentation des sujets liés aux travaux
**Chaque groupe crée la page de documentation de son projet sur le wiki
**Avant une présentation d'un groupe, les étudiants qui n'en font pas partie lisent le projet documenté. La présentation est un moment d'échange et de débat
**Les présentations sont transcrites par un(e) secrétaire
**À l'intérieur des groupes, à chaque fois qu'il y a des moments de mise en commun, ils sont également retranscrits par un(e) secrétaire et mis en ligne sur la page correspondante du wiki
https://www.youtube.com/watch?v=4GXCIbStB5c
* Bases de données
** D'où viennent les données? Choisir une ou plusieurs sources parmi la liste suivante:
***Les bibliothèques des membres du groupe
***Un flux twitter d'un politicien au choix
***Les flux facebook des membres du groupe
***Un site de recettes de cuisine
***Les trajets en transports en commun des membres du groupe
***Un forum thématique (au choix) du site Doctissimo
***Les commentaires d'un site d'actualités au choix
***Les discours d'un politicien au choix
***Les pads créés pour le dernier séminaire de l'ERG
***Un ensemble de documents provenant de wikileaks.org
** Quel est l'intérêt de les stocker? Formuler une hypothèse.
** Que garder ou ne pas garder?
** Produire un schéma de structure
***Si la base de données est relationnelle (type tableur), quelles seront les entités, quelles seront les relations?
***Si la base est navigationnelle (structure de dossiers et de fichiers), quelles règles définiront le chemin?
** À la fin du cours: présenter le projet via la page wiki du groupe

==Groupes de travail==
[[ERG::2018-mongroupe | Le groupe mongroupe]]
[[ERG::2018-ClaraJeanMartinSebastien | ClaraJeanMartinSebastien]]
[[ERG::2018-AnthonyEloiseHugo | AnthonyEloiseHugo]]

==Agenda de présentations==
===19/02/2018===
===26/02/2018===
===05/03/2018===
===12/03/2018===