B2-B3 2022-2023 : Différence entre versions

De Design numérique
Aller à : navigation, rechercher
m (→‎Pages des étudiant.e.s)
 
(15 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 12 : Ligne 12 :
  
 
= Sessions =
 
= Sessions =
 +
=== 10 février 2023: machines ===
 +
 +
https://www.isoplotec.co.jp/HPGL/
 +
 +
http://sites.music.columbia.edu/cmc/chiplotle/
 +
 +
http://nerdcreationlab.com/
 +
 +
https://github.com/NicholasCLewis/InkShield
 +
 +
=== 03 février 2023 : printing ===
 +
3D printed Paper folding machine
 +
 +
https://www.youtube.com/watch?v=Hg4_dVEAZho + https://en.wikipedia.org/wiki/Folding_machine
 +
 +
https://hackaday.com/2014/10/09/paper-plane-folding-machine-gun-is-a-mechanical-marvel/
 +
 +
https://www.youtube.com/watch?v=MSdb_Rpv5p0
 +
 +
https://www.youtube.com/watch?v=fMXhzvMz_-o
 +
 +
senseless drawing bot #2
 +
https://vimeo.com/58191583?embedded=true&source=video_title&owner=172868
 +
 +
giant wall painting robot
 +
https://www.youtube.com/watch?v=osUTMnDFV30
 +
 +
field printer
 +
https://www.youtube.com/watch?v=-qiap7KThW8&ab_channel=DustyRobotics
 +
 +
imprimante de poche
 +
https://www.youtube.com/watch?v=xg37WkxgvEc&ab_channel=Geekazine
 +
 +
julien maire digit
 +
https://www.youtube.com/watch?v=lrbGyNfu-R0
 +
 +
hektor
 +
https://vimeo.com/15820929?embedded=true&source=video_title&owner=4960212
 +
 +
color conversion web2print
 +
https://gitlab.com/lionelmaes/pdfutils/-/tree/master/color-conversion
 +
 +
nickel o matic 2009
 +
https://www.youtube.com/watch?v=2F_ifyc5cVc&t=94s
 +
 +
inkshield (nicolas c lewis)
 +
https://www.youtube.com/watch?v=dzTCDMRv8bY
 +
 +
portable printer
 +
https://www.youtube.com/watch?v=Va3A7QcBlLE
 +
 +
ressources techniques
 +
https://hackaday.com/
 +
 +
=== 09 décembre 2022 : scrapping ===
 +
 +
<syntaxhighlight lang="python">
 +
#un programme générique de scrapping http
 +
 +
#la librairie qui permet de se connecter au site
 +
import mechanize
 +
#la librairie qui permet d'analyser la structure html
 +
import lxml.html
 +
#la librairie qui permet de sélectionner une info dans la structure html
 +
import cssselect
 +
 +
import ssl
 +
 +
def getHtmlElements(url, selecteurCss):
 +
    #1. télécharger la source html de la page url
 +
    browser = mechanize.Browser()
 +
    browser.addheaders = [('User-agent', 'Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008071615 Fedora/3.0.1-1.fc9 Firefox/3.0.1')]
 +
    browser.set_handle_robots(False)
 +
 +
    #problème https
 +
    browser.set_ca_data(context=ssl._create_unverified_context(cert_reqs=ssl.CERT_NONE))
 +
 +
    data = browser.open(url, timeout=10)
 +
 +
    '''with open("output.txt", 'w') as f:
 +
        f.write(str(data.read()))'''
 +
 +
   
 +
    #2. analyser la source et la transformer en structure html navigable
 +
    source = data.read()
 +
 +
    html = lxml.html.fromstring(source)
 +
 +
 +
    #3. viser l'information qui nous intéresse
 +
 +
    #convertir mon sélecteur css en objet cssselect
 +
    selecteurs = cssselect.parse(selecteurCss)
 +
        #0
 +
    #[objet cssselect]
 +
 +
    selecteur = selecteurs[0]
 +
 +
    chemin_xpath = cssselect.HTMLTranslator().selector_to_xpath(selecteur)
 +
 +
    resultats = html.xpath(chemin_xpath)
 +
 +
    return resultats
 +
    #print(resultats)
 +
 +
 +
 +
elements = getHtmlElements("https://en.wikipedia.org/wiki/Spaghetti", 'p')
 +
 +
 +
for element in elements:
 +
    print(element.text_content())
 +
 +
 +
</syntaxhighlight>
 +
 +
=== 02 décembre 2022: la brique intro ===
 +
 +
<syntaxhighlight lang="python">
 +
#la librairie qui permet de se connecter au site
 +
import mechanize
 +
#la librairie qui permet d'analyser la structure html
 +
import lxml.html
 +
#la librairie qui permet de sélectionner une info dans la structure html
 +
import cssselect
 +
 +
import ssl
 +
 +
#import urllib.parse
 +
 +
 +
#https://en.wikipedia.org/wiki/Peter_Jackson
 +
 +
#1. télécharger la page html
 +
browser = mechanize.Browser()
 +
browser.addheaders = [('User-agent', 'Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008071615 Fedora/3.0.1-1.fc9 Firefox/3.0.1')]
 +
 +
browser.set_handle_robots(False)
 +
 +
browser.set_ca_data(context=ssl._create_unverified_context(cert_reqs=ssl.CERT_NONE))
 +
 +
data = browser.open("https://en.wikipedia.org/wiki/Peter_Jackson", timeout = 10)
 +
 +
source = data.read()
 +
 +
html = lxml.html.fromstring(source)
 +
 +
#print(source)
 +
 +
 +
#sélecteur css h2
 +
 +
selecteurs = cssselect.parse("h2, h3")
 +
 +
for selecteur in selecteurs:
 +
    #selecteur = selecteurs[0]
 +
 +
    chemin_xpath = cssselect.HTMLTranslator().selector_to_xpath(selecteur)
 +
 +
    resultats = html.xpath(chemin_xpath)
 +
 +
    for resultat in resultats:
 +
        print(resultat.text_content())
 +
        print("ok")
 +
   
 +
 +
</syntaxhighlight>
 +
 +
=== 21 octobre 2022: assembler ===
 +
Repartir du texte choisi (ou en choisir un autre) et concevoir un scénario de navigation utilisant plusieurs des expérimentations réalisées jusqu'ici; la lecture du texte se fait à travers l'expérience de navigation.
 +
  
 
=== 6 octobre 2022: lecture contrainte; sprint ===
 
=== 6 octobre 2022: lecture contrainte; sprint ===
Ligne 17 : Ligne 188 :
 
* Méthode : écriture des énoncés (exemple: les mots du texte ne s'affichent qu'à proximité de la souris), décomposition du problème en petites parties à résoudre, résolution de chaque partie et assemblage.
 
* Méthode : écriture des énoncés (exemple: les mots du texte ne s'affichent qu'à proximité de la souris), décomposition du problème en petites parties à résoudre, résolution de chaque partie et assemblage.
 
* Projet parallèle: enquête sur un dispositif numérique contraignant.
 
* Projet parallèle: enquête sur un dispositif numérique contraignant.
 +
 +
==== Énoncés ====
 +
* les mots du texte ne s'affichent qu'à proximité de la souris
 +
* faire appararaitre une fenetre modale après une période d'inactivité
 +
* le contenu devient lisible uniquement lorsque la fenêtre est à une certaine taille
 +
* utiliser checkbox ou button pour faire apparaitre ou disparaitre
 +
* cliquer sur une ligne du texte pour qu'elle s'affiche
 +
* images apparaissent et cachent le texte au passage de la souris
 +
* Le texte est lisible uniquement lors d'une certaine plage horraire
 +
* Le texte est caché, il faut deviner la lettre suivante pour l'afficher
 +
* Au passage de la souris le texte devient codé (les lettres changent) => https://pual.cool/
 +
* Le texte s'insole quand il est exposé dans la fenêtre
 +
* pour lire la suite du texte il faut réaliser des input (combinaisons de touches) spécifique
 +
* le texte est caché dans le code source
 +
 +
Résolution du premier énoncé:
 +
 +
index.html
 +
<syntaxhighlight lang="html5">
 +
<!DOCTYPE html>
 +
<html>
 +
    <head>
 +
        <meta charset="utf-8">
 +
        <title>Énoncé 01</title>
 +
        <link rel="stylesheet" href="style.css">
 +
        <script src="script.js" defer></script>
 +
    </head>
 +
    <body>
 +
        <dialog>
 +
            <h1>COUCOU</h1>
 +
            <form method="dialog">
 +
                <button>OK</button>
 +
            </form>
 +
        </dialog>
 +
 +
        <article>
 +
            <p>Let me start by saying that beautiful websites come in all sizes and page weights. I love big websites packed with images. I love high-resolution video. I love sprawling Javascript experiments or well-designed web apps.</p>
 +
 +
            <p>This talk isn't about any of those. It's about mostly-text sites that, for unfathomable reasons, are growing bigger with every passing year.</p>
 +
 +
            <p>While I'll be using examples to keep the talk from getting too abstract, I’m not here to shame anyone, except some companies (Medium) that should know better and are intentionally breaking the web. </p>
 +
        </article>
 +
       
 +
    </body>
 +
</html>
 +
</syntaxhighlight>
 +
 +
style.css
 +
<syntaxhighlight lang="css">
 +
html, body{
 +
    width:100%;
 +
    height:100%;
 +
}
 +
 +
dialog{
 +
    width:80vw;
 +
    height:80vh;
 +
}
 +
dialog::backdrop{
 +
    background:rgba(255, 0, 0, 0.25);
 +
}
 +
 +
 +
</syntaxhighlight>
 +
 +
script.js
 +
<syntaxhighlight lang="js">
 +
//faire appararaitre une fenetre modale après une période d'inactivité
 +
//fenêtre modale = rectangle qu'il faut fermer et qui réapparait toutes les x secondes
 +
 +
//intervale de temps, x secondes
 +
//-> faire apparaitre la fenêtre modale
 +
 +
//lorsque l'utilisateur clique sur la fenêtre, elle se ferme -> ok
 +
 +
function showModal(){
 +
   
 +
    dialog.showModal();
 +
 +
}
 +
function launchTimer(){
 +
    setTimeout(showModal, 3000);
 +
}
 +
 +
 +
const dialog = document.querySelector('dialog');
 +
 +
dialog.addEventListener('close', launchTimer);
 +
 +
launchTimer();
 +
 +
//setInterval(showModal, 3000);
 +
 +
 +
</syntaxhighlight>
  
 
=== 30 septembre 2022: lecture contrainte ===
 
=== 30 septembre 2022: lecture contrainte ===

Version actuelle datée du 24 octobre 2024 à 13:08

Pages des étudiant.e.s

Clément

Mathias

Tom

Martin

Camille B

Sessions

10 février 2023: machines

https://www.isoplotec.co.jp/HPGL/

http://sites.music.columbia.edu/cmc/chiplotle/

http://nerdcreationlab.com/

https://github.com/NicholasCLewis/InkShield

03 février 2023 : printing

3D printed Paper folding machine

https://www.youtube.com/watch?v=Hg4_dVEAZho + https://en.wikipedia.org/wiki/Folding_machine

https://hackaday.com/2014/10/09/paper-plane-folding-machine-gun-is-a-mechanical-marvel/

https://www.youtube.com/watch?v=MSdb_Rpv5p0

https://www.youtube.com/watch?v=fMXhzvMz_-o

senseless drawing bot #2 https://vimeo.com/58191583?embedded=true&source=video_title&owner=172868

giant wall painting robot https://www.youtube.com/watch?v=osUTMnDFV30

field printer https://www.youtube.com/watch?v=-qiap7KThW8&ab_channel=DustyRobotics

imprimante de poche https://www.youtube.com/watch?v=xg37WkxgvEc&ab_channel=Geekazine

julien maire digit https://www.youtube.com/watch?v=lrbGyNfu-R0

hektor https://vimeo.com/15820929?embedded=true&source=video_title&owner=4960212

color conversion web2print https://gitlab.com/lionelmaes/pdfutils/-/tree/master/color-conversion

nickel o matic 2009 https://www.youtube.com/watch?v=2F_ifyc5cVc&t=94s

inkshield (nicolas c lewis) https://www.youtube.com/watch?v=dzTCDMRv8bY

portable printer https://www.youtube.com/watch?v=Va3A7QcBlLE

ressources techniques https://hackaday.com/

09 décembre 2022 : scrapping

#un programme générique de scrapping http

#la librairie qui permet de se connecter au site
import mechanize
#la librairie qui permet d'analyser la structure html
import lxml.html
#la librairie qui permet de sélectionner une info dans la structure html
import cssselect

import ssl

def getHtmlElements(url, selecteurCss):
    #1. télécharger la source html de la page url
    browser = mechanize.Browser()
    browser.addheaders = [('User-agent', 'Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008071615 Fedora/3.0.1-1.fc9 Firefox/3.0.1')]
    browser.set_handle_robots(False)

    #problème https
    browser.set_ca_data(context=ssl._create_unverified_context(cert_reqs=ssl.CERT_NONE))

    data = browser.open(url, timeout=10)

    '''with open("output.txt", 'w') as f:
        f.write(str(data.read()))'''

    
    #2. analyser la source et la transformer en structure html navigable
    source = data.read()

    html = lxml.html.fromstring(source)


    #3. viser l'information qui nous intéresse

    #convertir mon sélecteur css en objet cssselect
    selecteurs = cssselect.parse(selecteurCss)
        #0
    #[objet cssselect]

    selecteur = selecteurs[0]

    chemin_xpath = cssselect.HTMLTranslator().selector_to_xpath(selecteur)

    resultats = html.xpath(chemin_xpath)

    return resultats
    #print(resultats)



elements = getHtmlElements("https://en.wikipedia.org/wiki/Spaghetti", 'p') 


for element in elements:
    print(element.text_content())

02 décembre 2022: la brique intro

#la librairie qui permet de se connecter au site
import mechanize
#la librairie qui permet d'analyser la structure html
import lxml.html
#la librairie qui permet de sélectionner une info dans la structure html
import cssselect

import ssl

#import urllib.parse


#https://en.wikipedia.org/wiki/Peter_Jackson

#1. télécharger la page html
browser = mechanize.Browser()
browser.addheaders = [('User-agent', 'Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008071615 Fedora/3.0.1-1.fc9 Firefox/3.0.1')]

browser.set_handle_robots(False)

browser.set_ca_data(context=ssl._create_unverified_context(cert_reqs=ssl.CERT_NONE))

data = browser.open("https://en.wikipedia.org/wiki/Peter_Jackson", timeout = 10)

source = data.read()

html = lxml.html.fromstring(source)

#print(source)


#sélecteur css h2

selecteurs = cssselect.parse("h2, h3")

for selecteur in selecteurs:
    #selecteur = selecteurs[0]

    chemin_xpath = cssselect.HTMLTranslator().selector_to_xpath(selecteur)

    resultats = html.xpath(chemin_xpath)

    for resultat in resultats:
        print(resultat.text_content())
        print("ok")

21 octobre 2022: assembler

Repartir du texte choisi (ou en choisir un autre) et concevoir un scénario de navigation utilisant plusieurs des expérimentations réalisées jusqu'ici; la lecture du texte se fait à travers l'expérience de navigation.


6 octobre 2022: lecture contrainte; sprint

  • L'objectif est de réaliser en atelier le plus d'expériences possibles, de les mettre en ligne et de les éprouver.
  • Méthode : écriture des énoncés (exemple: les mots du texte ne s'affichent qu'à proximité de la souris), décomposition du problème en petites parties à résoudre, résolution de chaque partie et assemblage.
  • Projet parallèle: enquête sur un dispositif numérique contraignant.

Énoncés

  • les mots du texte ne s'affichent qu'à proximité de la souris
  • faire appararaitre une fenetre modale après une période d'inactivité
  • le contenu devient lisible uniquement lorsque la fenêtre est à une certaine taille
  • utiliser checkbox ou button pour faire apparaitre ou disparaitre
  • cliquer sur une ligne du texte pour qu'elle s'affiche
  • images apparaissent et cachent le texte au passage de la souris
  • Le texte est lisible uniquement lors d'une certaine plage horraire
  • Le texte est caché, il faut deviner la lettre suivante pour l'afficher
  • Au passage de la souris le texte devient codé (les lettres changent) => https://pual.cool/
  • Le texte s'insole quand il est exposé dans la fenêtre
  • pour lire la suite du texte il faut réaliser des input (combinaisons de touches) spécifique
  • le texte est caché dans le code source

Résolution du premier énoncé:

index.html 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Énoncé 01</title>
        <link rel="stylesheet" href="style.css">
        <script src="script.js" defer></script>
    </head>
    <body>
        <dialog>
            <h1>COUCOU</h1>
            <form method="dialog">
                <button>OK</button>
            </form>
        </dialog>

        <article>
            <p>Let me start by saying that beautiful websites come in all sizes and page weights. I love big websites packed with images. I love high-resolution video. I love sprawling Javascript experiments or well-designed web apps.</p>

            <p>This talk isn't about any of those. It's about mostly-text sites that, for unfathomable reasons, are growing bigger with every passing year.</p>

            <p>While I'll be using examples to keep the talk from getting too abstract, I’m not here to shame anyone, except some companies (Medium) that should know better and are intentionally breaking the web. </p>
        </article>
        
    </body>
</html>

style.css 

html, body{
    width:100%;
    height:100%;
}

dialog{
    width:80vw;
    height:80vh;
}
dialog::backdrop{
    background:rgba(255, 0, 0, 0.25);
}

script.js 

//faire appararaitre une fenetre modale après une période d'inactivité
//fenêtre modale = rectangle qu'il faut fermer et qui réapparait toutes les x secondes

//intervale de temps, x secondes
//-> faire apparaitre la fenêtre modale

//lorsque l'utilisateur clique sur la fenêtre, elle se ferme -> ok

function showModal(){
    
    dialog.showModal();

}
function launchTimer(){
    setTimeout(showModal, 3000);
}


const dialog = document.querySelector('dialog');

dialog.addEventListener('close', launchTimer);

launchTimer();

//setInterval(showModal, 3000);

30 septembre 2022: lecture contrainte

23 septembre 2022: Présentation du cours

  • Le design numérique à l'ERG, contexte d'existence de l'orientation
  • Ce qui nous occupe : pratiques du design, usages, systèmes, protocoles, interfaces, outils, ...
  • Structure du cours : trois projets, place de la documentation, outils de publication.
  • Le web et ses technologies au centre du cours en B2-B3.
  • La place que l'on donne à la technique et à son apprentissage. Discussion collective.
  • Présentation du premier projet : empêcher, contraindre, designer.
Récupérée de « https://designnumerique.be/w/index.php?title=B2-B3_2022-2023&oldid=4737 »