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

#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

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

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.

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

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

Sommaire

Pages des étudiant.e.s

Sessions

10 février 2023: machines

03 février 2023 : printing

09 décembre 2022 : scrapping

02 décembre 2022: la brique intro

21 octobre 2022: assembler

6 octobre 2022: lecture contrainte; sprint

Énoncés

30 septembre 2022: lecture contrainte

23 septembre 2022: Présentation du cours

Menu de navigation

Outils personnels

Espaces de noms

Variantes

Affichages

Plus

Rechercher

Navigation

Outils

@@ Ligne 12 : / Ligne 12 : @@
 = 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 ===
 D 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
@@ Ligne 52 : / Ligne 65 : @@
 ressources techniques
 https://hackaday.com/
 === 09 décembre 2022 : scrapping ===