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

De Design numérique
Aller à : navigation, rechercher
(Pages des étudiant.e.s)
(Sessions)
(21 révisions intermédiaires par 5 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
 
= Pages des étudiant.e.s =
 
= Pages des étudiant.e.s =
[[Ma page]]
 
  
 
[[Clément]]
 
[[Clément]]
 +
 +
[[Mathias]]
 +
 +
[[Utilisateur:Tom|Tom]]
 +
 +
[[Utilisateur:Martlem|Martin]]
 +
 +
[[Camille B]]
  
 
= Sessions =
 
= Sessions =
 +
 +
=== 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 ===
 +
* 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
 +
<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 ===
 +
 +
* Lecture à plusieurs sur la page http://work.designnumerique.be/2022-2023/01-contraindre/martin/001/
 +
* Discussion collective sur l'article lu + effet de l'interface sur la lecture
  
 
=== 23 septembre 2022: Présentation du cours ===
 
=== 23 septembre 2022: Présentation du cours ===

Version du 9 décembre 2022 à 10:16

Pages des étudiant.e.s

Clément

Mathias

Tom

Martin

Camille B

Sessions

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.