ERG::Code-2017-2

Introduction

Ce cours est destiné aux étudiants de BAC3. Il ne nécessite aucun prérequis (il n'est pas nécessaire d'avoir suivi le cours en Bac2 pour pouvoir le suivre en Bac3). Il consiste en la mise en place d'un atelier d'expérimentations autour du code informatique. Il s'organise par groupes de recherche, dont les sujets sont définis dès le premier cours par les étudiants. Les étudiants peuvent changer de groupe de recherche (ou rester au sein du même groupe) tous les deux cours. Chaque groupe se doit de documenter le travail effectué. Tous les deux cours, il est demandé à chaque groupe de présenter les réflexions, découvertes et expérimentations réalisées.

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.

Groupes de travail

• son - retranscription graphique
• apprentissage html css
• data et traitement
• traceurs - robots dessinateurs
• hacking d'imprimante
• générateur de formes - système modulaire - combinatoire

Séances

Séance du 28/09/2017

introduction aux langages de programmation

En bref, on fait la liste des langages dont on a entendu parler, on essaie d'en trouver les particularités et on parle de ce qu'ils partagent tous.

HTML 
    manipulable, apprentissage rapide
    pour des pages web
    structurer du contenu d'une page
    balises 
    <article>le contenu de l'article</article>
    langage descriptif
    
CSS
    cascading style sheet
    ce qui détermine l'apect, le style
    langage descriptif
    
JAVASCRIPT
    c'est des maths
          des actions à la suite
          s'il y a une erreur, ça s'arrête
          langage impératif

 -- JQUERY

PHP
    langage côté serveur
    

JAVA
-- PROCESSING

PYTHON
    proche du langage naturel
    récent
    évolue rapidement
    à la fois sur le web et pour applications

C
C++
PASCAL
BASIC
    nécessité de compiler le code


LIVECODE

LANGAGE BINAIRE


    1 0

Si on veut compter jusque 7 en binaire:   
    
    0
    1
    1 0
    1 1
  1 0 0
  1 0 1
  1 1 0
  1 1 1

Si on estime que a = 0 b = 1 c = 2 etc. et que l'on veut dire bonjour en langage binaire:
 
0 0 0 0 1 = b
0 1 1 1 1 = o
0 1 1 1 0 = n
0 1 0 1 0 = j
0 1 1 1 1 = o
1 0 1 0 1 = u
1 0 0 1 0 = r

LANGAGE MACHINE
LANGAGE ASSEMBLEUR
    

POSTSCRIPT
HPGL


OTF
TTF

SVG

Séance du 05/10/2017

Internet c'est quoi?

Internet c'est un réseau
-> une connexion
-> interactions entre différentes machines
-> point d'accès
-> ensemble de données
-> gratuit à l'erg
-> c'est pas gratuit (à l'erg)

Groupes de travail

apprentissage html css et data et traitement

Séance du 12/10/2017

Typographie et css

http://curlybraces.be/erg/2017-2018b3/lionelmaes/20171012typo.zip

Positionnement et css

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

Séance du 26/10/2017

Intro js http://curlybraces.be/erg/2017-2018b3/lionelmaes/20171026demojs.zip

Séance du 16/11/2017

Suite js + Intro jquery http://curlybraces.be/erg/2017-2018b3/lionelmaes/220171116introjquery.zip

Exos Jquery

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