Différences entre les versions de « ERG::Code-2021-2022 »

De {}
Aller à la navigation Aller à la recherche
 
(3 versions intermédiaires par le même utilisateur non affichées)
Ligne 32 : Ligne 32 :
  
 
==Notes de cours==
 
==Notes de cours==
 +
 +
===Cours du 21 mars 2022===
 +
<syntaxhighlight lang="python">
 +
 +
#https://flightaware.com/live/flight/MAY3324
 +
 +
 +
#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 random
 +
 +
import ssl
 +
import re
 +
import json
 +
 +
 +
def getFlightInfo(url):
 +
    #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()))'''
 +
 +
 +
    source = data.read()
 +
    #print(source)
 +
 +
    #var trackpollGlobals = {"TOKEN":"dd1320656957446ea9d77d153f63d7889ef5acae193ea54b--88705893eaf718583cac519a84f07a8af9b45856","INTERVAL":30,"SINGLE_FLIGHT":true,"USERTOKEN":"393850601"};
 +
    result = re.findall('trackpollGlobals = \{.*\}', source.decode('utf-8'))
 +
    infos = json.loads(result[0].replace('trackpollGlobals = ', ''))
 +
    print(infos['TOKEN'])
 +
 +
    #https://flightaware.com/ajax/trackpoll.rvt?token=dd1320656957446e0089b244b5ed625df1a0606139b66cd6--a5ca479889e79f6bb930f2a801ce30fbe27584bb&locale=en_US&summary=1
 +
   
 +
    urlTrackPoll = 'https://flightaware.com/ajax/trackpoll.rvt?token='+infos['TOKEN']+'&locale=en_US&summary=1'
 +
    print(urlTrackPoll)
 +
    data = browser.open(urlTrackPoll, timeout=10)
 +
    source = json.loads(data.read().decode('utf-8'))
 +
    flights = source['flights']
 +
    detail = list(flights.values())[0]
 +
   
 +
    print(detail)
 +
 +
 +
 +
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.decode('utf-8'))
 +
 +
 +
    #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)
 +
 +
getFlightInfo('https://flightaware.com/live/flight/random')
 +
</syntaxhighlight>
 +
 +
 +
<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 random
 +
 +
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.decode('utf-8'))
 +
 +
 +
    #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)
 +
 +
 +
#1. aller chercher les derniers liens vers les articles
 +
links = getHtmlElements('https://www.lefigaro.fr/elections/presidentielles', '.fig-main-col article > a')
 +
 +
goodLinks = []
 +
 +
for link in links:
 +
    goodLinks.append(link.get('href'))
 +
 +
#2. prendre un lien au hasard
 +
link = random.choice(goodLinks)
 +
 +
#3. aller chercher les commentaires de l'article
 +
comments = getHtmlElements(link, '.fig-comment__text')
 +
 +
message = link
 +
 +
 +
#for comment in comments:
 +
#    print(str(comment.text_content()))
 +
comment = random.choice(comments)
 +
message = message + str(comment.text_content())
 +
print(message)
 +
 +
 +
 +
</syntaxhighlight>
 +
 +
===Cours du 7 mars 2022===
 +
<syntaxhighlight lang="python">
 +
#la librairie qui permet de se connecter au site
 +
import mechanize
 +
import json
 +
 +
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)
 +
 +
data = browser.open('http://worldshap.in/support/getData.php?c=BE', timeout=10)
 +
 +
 +
source = data.read()
 +
 +
jsonObject = json.loads(source.decode("utf-8"))
 +
 +
 +
#print(jsonObject)
 +
print(jsonObject["co2"]["v"]["2011"])
 +
 +
</syntaxhighlight>
  
 
===Cours du 21 février 2022===
 
===Cours du 21 février 2022===

Version actuelle datée du 21 mars 2022 à 11:17

Introduction

Ce cours est destiné aux étudiant.e.s de BAC2. Cette année, nous nous concentrons sur le rapport du numérique au texte et du texte au numérique. Le code générateur de poésie, le code en tant que poésie, le code secret, le code caché. Nous serons amenés à créer des poésies algorithmiques, des générateurs de textes, des machines à plagier, des bots twitter. À travers différentes expérimentations menées en atelier, nous aborderons plusieurs langages de programmation, concepts informatiques et exemples dans les champs de l'art, du design, de l'histoire de l'informatique.

Pages des étudiant.e.s

Manon Blanc

Anna Pastor

Baptiste Guyon

Clairebravo

Heloise G

Huggzar

Eloïse Spencer

Mathus

Nathan Scapin

Ruben

Selim

Ârose

Zachary

Notes de cours

Cours du 21 mars 2022

#https://flightaware.com/live/flight/MAY3324


#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 random
 
import ssl
import re
import json


def getFlightInfo(url):
    #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()))'''
 

    source = data.read()
    #print(source)

    #var trackpollGlobals = {"TOKEN":"dd1320656957446ea9d77d153f63d7889ef5acae193ea54b--88705893eaf718583cac519a84f07a8af9b45856","INTERVAL":30,"SINGLE_FLIGHT":true,"USERTOKEN":"393850601"};
    result = re.findall('trackpollGlobals = \{.*\}', source.decode('utf-8'))
    infos = json.loads(result[0].replace('trackpollGlobals = ', ''))
    print(infos['TOKEN'])

    #https://flightaware.com/ajax/trackpoll.rvt?token=dd1320656957446e0089b244b5ed625df1a0606139b66cd6--a5ca479889e79f6bb930f2a801ce30fbe27584bb&locale=en_US&summary=1
    
    urlTrackPoll = 'https://flightaware.com/ajax/trackpoll.rvt?token='+infos['TOKEN']+'&locale=en_US&summary=1'
    print(urlTrackPoll)
    data = browser.open(urlTrackPoll, timeout=10)
    source = json.loads(data.read().decode('utf-8'))
    flights = source['flights']
    detail = list(flights.values())[0]
    
    print(detail)


 
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.decode('utf-8'))
 
 
    #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)
 
getFlightInfo('https://flightaware.com/live/flight/random')



#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 random

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.decode('utf-8'))


    #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)


#1. aller chercher les derniers liens vers les articles
links = getHtmlElements('https://www.lefigaro.fr/elections/presidentielles', '.fig-main-col article > a')

goodLinks = []

for link in links:
    goodLinks.append(link.get('href'))

#2. prendre un lien au hasard
link = random.choice(goodLinks)

#3. aller chercher les commentaires de l'article
comments = getHtmlElements(link, '.fig-comment__text')

message = link


#for comment in comments:
#    print(str(comment.text_content()))
comment = random.choice(comments)
message = message + str(comment.text_content())
print(message)

Cours du 7 mars 2022

 #la librairie qui permet de se connecter au site
import mechanize
import json

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)
 
data = browser.open('http://worldshap.in/support/getData.php?c=BE', timeout=10)
 
 
source = data.read()

jsonObject = json.loads(source.decode("utf-8"))


#print(jsonObject)
print(jsonObject["co2"]["v"]["2011"])

Cours du 21 février 2022

#un programme qui récupère la latitude et la longitude d'un aéroport donné: version 2 avec fonction "outil" qui permet de récupérer n'importe quelles données à partir d'une url et d'un sélecteur css
#sur flightaware.com

#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 urllib.parse

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)


def getLatLong(urlAirport):
    resultats = getHtmlElements(urlAirport, '.medium-2 img') 

    for element in resultats:
        print(element.get('src'))
        url = element.get('src')
        #https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=50.901389,4.484444&zoom=13&size=450x400&key=AIzaSyBdItRJvlt-lcTGm7xXDqLvbx3PUfNMN1s

        result = urllib.parse.parse_qs(url)

        latlong = result['center'][0].split(',')

        return latlong



latlong = getLatLong('https://flightaware.com/resources/airport/LFBO/map')



print(f'latitude: {latlong[0]}, longitude: {latlong[1]}')



#un programme qui récupère la latitude et la longitude d'un aéroport donné
#sur flightaware.com

#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 urllib.parse

import ssl

def getLatLong(urlAirport):
    #1. télécharger la source html de la page https://flightaware.com/resources/airport/EBBR/map
    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(urlAirport, timeout=10)

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


    #sélecteur css pour viser l'image de la carte: .medium-2 img



    #print(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('.medium-2 img')
        #0
    #[objet cssselect]

    selecteur = selecteurs[0]

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

    resultats = html.xpath(chemin_xpath)

    #print(resultats)

    for element in resultats:
        print(element.get('src'))
        url = element.get('src')
        #https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=50.901389,4.484444&zoom=13&size=450x400&key=AIzaSyBdItRJvlt-lcTGm7xXDqLvbx3PUfNMN1s

        result = urllib.parse.parse_qs(url)

        latlong = result['center'][0].split(',')

        return latlong



latlong = getLatLong('https://flightaware.com/resources/airport/LFBO/map')



print(f'latitude: {latlong[0]}, longitude: {latlong[1]}')

Cours du 7 février 2022

Un code qui poste sur un compte twitter 

import tweepy
 
#remplacer par api key et api secret key
auth = tweepy.OAuthHandler('apikey', 'apisecret')
 
auth.set_access_token('accesstoken', 'accesstokensecret')
api = tweepy.API(auth)
 
 
api.update_status(status='tu veux un cantal?')

Cours du 31 janvier 2022

À propos de robots qui génèrent du texte.

Imaginer un robot qui intervient en postant du texte sur un ou plusieurs réseaux sociaux; mastodon, youtube, instagram, facebook, twitter, etc. Écrire une description de ce robot et la poster sur le wiki. La description doit répondre aux questions suivantes: - quelle(s) source(s) pour le texte - quels types de traitements sont utilisés pour générer le texte (penser aux traitements développés pendant le premier quadri) - qu'est-ce qui déclenche le post? - quel canal est utilisé pour le post?

@everyword, Allison Parrish: https://twitter.com/everyword

@nicetipsbot, Thricedotted: https://twitter.com/nice_tips_bot

@tinycarebot, Jonny Sun: https://twitter.com/tinycarebot

@infinite_scream, Nora Reed: https://twitter.com/infinite_scream

Darius Kazemi: http://tinysubversions.com/projects/

@predartbot, Maria Roszkowska et Nicolas Maigret: http://artbot.space/

Des bots qui n'écrivent pas mais qui agissent sur le web

https://wwwwwwwwwwwwwwwwwwwwww.bitnik.org/r/


Choisir une instance mastodon

https://instances.social/

Cours du 6 décembre 2021

Grille typo en css

@font-face {
    font-family: dindong;
    src: url('DINdongv3.ttf');

}

*{
    box-sizing:border-box;
}

html, body{
   font-family:dindong; 
   font-size:10pt;
}

section.page{
  width:150mm;
  height: 200mm;
  border:1px solid black;
  margin:10px;
  padding:5mm;

}

article{
    width:100%;
    display:flex;

}
div{
   width:50%;
   padding:3mm; 
}
p{
    margin:1rem 0 0 0;
    line-height:1rem;
    font-size:0.9rem;

}
p.highlight{
    font-size:1.9rem;
    line-height:2rem;
}
h2{
    font-weight:normal;

    margin:0 0 1rem 0;
    /*margin-bottom:2rem;*/

    line-height:2rem;
    font-size:1.8rem;
    text-align:center;
    

}

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <section class="page">
            <article>
                <div>
                    <h2>Le poème</h2>
                    <p>une pie blanche dans le ciel</p>
                    <p>J'ai des cheveux </p>
                    <p>    A'Z\x177W[{;;S/\x17{W\x17S;\x1bW[K;S~</p>
                    <p>    Wesh la zone</p>
                    <p>    Ou est la mer, vive le vent</p>
                   
                </div>
                <div>
                    <p>    Chemin prevu Sillon trace</p>
                    <p>    J'espere ce qui m'est interdit</p>
                    <p>    O \x15age</p>
                    <p>    O Desespoir</p>
                    <p>    O Vieillesse ennemie</p>
                    <p>    a;rS\x17CK\x17'KS;</p>
                    <p>    [CKg\x1bS[C\x17K;</p>
                    <p>    Je suis telle une rose... Delicate et qui embaume...</p>
                    <p class="highlight">    As'tu vu mon nez Tout elumine</p>
                </div>
            </article>
        </section>
        <section class="page">
           
        </section>
        <section class="page">
            
        </section>
        <section class="page">
            
        </section>
        <section class="page">
            
        </section>
        <section class="page">
            
        </section>
        <section class="page">
            
        </section>
        <section class="page">
            
        </section>
    </body>
</html>

Cours du 29 novembre 2021

Spécificités CSS

/*

15
en binaire: 1 1 1 1
en hexadécimal: F

16
en binaire: 1 0 0 0 0
en hexadécimal: 1 0

255
en binaire: 1 1 1 1 1 1 1 1
en hexadécimal: FF
  
*/

body{
    /* couleurs en css
    
    /*  ici on règle la couleur en teinte (hue, h), saturation (s), luminosité (l)
    /* la teinte va de 0 à 360 (cercle chromatique), la saturation et la luminosité de 0 à 100
    background:hsl(0, 100%, 50%);
    /* ici c'est pareil avec une valeur de transparence, alpha (a) en +
    /* l'alpha va de 0 à 1
    background:hsla(0, 100%, 50%, 0.5);

    /* ici on règle la couleur en trois canaux; rouge (red, r), vert (green, g), bleu (blue, b)
    /* chaque canal a 256 valeurs possibles: de 0 à 255
    background:rgb(255, 255, 0);
    /* ici c'est pareil avec une valeur de transparence, alpha (a) en +
    /* l'alpha va de 0 à 1
    background:rgb(255, 255, 0, 0.5);

    /* ici on règle la couleur en rgb, comme ci-dessus, mais on utilise
    /* la notation hexadécimale (FF pour 255, 00 pour 0).
    background:#FFFF00;
    /* l'alpha va ici de 0 à 255 comme le reste des canaux
    background:#FFFF00A5;
    */

    width:100%;
    height:100%;


}

section.page{
    width:200mm;
    height:300mm;
    border:2px solid black;
    /* chaque page a une marge externe de 5mm */
    margin:10px;
    /* chaque page a une marge interne de 5mm */
    padding:5mm;
    /*
    display:inline-block;
    */
}

section.page.first{
    background:#0000FF;

    /* positions css
    position:static; position par défaut (one ne le spécifie que pour revenir au comportement par défaut)
    position:relative; l'élément se "fixe" dans le flux. On peut par la suite le déplacer en utilisant "top, left, bottom ou right" par rapport à sa position initiale dans le flux. Un élément en position:relative peut être un parent d'éléments qui se positionnent en absolute;
    position:absolute; l'élément se place exactement à l'endroit précisé par top, left, bottom, right, par rapport à son parent le plus proche positionné.
    position:fixed; l'élément se place exactement à l'endroit précisé par top, left, bottom, right par rapport à la fenêtre
    */

    position:relative;
}
.second{
    background:#FF0000AA;
   /* position:absolute;
    bottom:20px;
    right:20px;
    */
    position:relative;
    /*left:-60px;*/

}
.third{
    background:#00FF00;
    position:relative;
}

body{
    /* propriété display
    /* display:block; force l'affichage de l'élément comme un bloc
    /* un block se met par défaut en dessous de l'élément qui le précède et au dessus de l'élément qui le suit
    /* display:inline; force l'affichage de l'élément comme "dans la ligne"
    /* un élément inline se met à droite de l'élément qui le précède et à gauche de l'élément qui le suit
    /* display:flex; les éléments contenus dans un élément flex se mettent par défaut les uns à côté des autres et s'adaptent en largeur aux dimensions de leur parent
    */

    display:flex;
    /*flex-direction: row-reverse;*/



    position:relative;
}

section.page div{
    color:white;
    font-size:48px;
}

/* les règles contenues dans @media print ne s'appliqueront qu'à l'export pdf
*/
@media print{
    /* taille de la page */
    @page{
        size:200mm 300mm;
    }
   
    body{
        display:block;
        margin:0;

    }
    section.page{
        margin:0;
        border:0;
    }
}

<!doctype html>
<html>
    <head>
        <title>positions css</title>
        <link rel="stylesheet" href="styles.css" type="text/css">
        <meta charset="utf-8">
    </head>
    <body>
        <section class="page first">
            <div>
                le contenu de la première page
            </div>
        </section>
        <section class="page second">
            coucou
        </section>
        <section class="page third">
            coucou

        </section>
        
    </body>
</html>


Cours du 22 novembre 2021

Intro html2print

<!DOCTYPE html>
<html>
    <head>
        <title>Intro html</title>
        <!-- 
            on spécifie l'encodage des caractères (utf-8)
        -->
        <link href="styles.css" rel="stylesheet" type="text/css">
        <!--script src="raphael.js"></script-->

        <meta charset="utf-8">
    </head>
    <body>
       <!--header>
           <p>Voici des articles</p>
       </header-->
       <section> <h1>Titre principal de l'édition</h1></section>
       <section>
           
          
            <article class="headline short">
                <author>Associated Press</author>
                <h1 id="first-title" class="article-title">Thousands protest in Belgium against COVID-19</h1>
                <p>Ten of thousands of people marched through central Brussels on Sunday to protest against reinforced COVID-19 measures that the government has imposed to counter the latest spike in coronavirus cases.</p>
               
                <caption>Protesters demonstrate against the government's efforts to counter the latest spike of the coronavirus in Brussels, Belgium, on Sunday, Nov. 21, 2021.  (AP Photo/Olivier Matthys)</caption>




            </article>
        </section>
        <section>

            <article>
                <author>Associated Press</author>
                <h1 class="article-title">Thousands protest in Belgium against COVID-19</h1>
                <p>Ten of thousands of people marched through central Brussels on Sunday to protest against reinforced COVID-19 measures that the government has imposed to counter the latest spike in coronavirus cases.</p>
               
                <caption>Protesters demonstrate against the government's efforts to counter the latest spike of the coronavirus in Brussels, Belgium, on Sunday, Nov. 21, 2021.  (AP Photo/Olivier Matthys)</caption>




            </article>

        </section>
        <!--footer>C'était des articles</footer-->
       <script src="script.js"></script>
    </body>
</html>

@font-face {
    font-family: dindong;
    src: url('DINdongv3.ttf');
}
html, body{
    margin:0;
    padding:0;
}
body{
    /*background:red;*/
    font-family:dindong;
}
article{
    font-size:12px;
    line-height:16px;
    box-sizing:border-box;
    width:100%;
    /*width:500px;*/
    /*height:200p*/
    /*margin:10px;*/
    padding:5px;
    border: 2px solid black;
}
img{
    width:100%;
}
h1{
    font-size:128px;
}
.article-title{
    font-size:36px;
}

.headline caption{
    color:red;
}

/*
section{
    display:flex;
    flex-wrap: wrap;
}*/

section{
    width:100mm;
    height:100mm;
    border:1px solid red;
}

@media print{
    @page{
        size:100mm 100mm;
    }
    section{
        border:none;
    }
}

Cours du 15 novembre 2021

un script qui remplace les mots de trois lettres par '???'

import re

#un script qui remplace les mots de trois lettres par '???'

with open('poeme.txt','r') as fichier:
    data = fichier.read()
#print(data)
#remplace

data = re.sub(r'(^|[\n \'])[^ ]{3}([ \n.;,?!])', r'\1???\2', data)
data = re.sub(r'(\?\?\? )[^ ]{3}([ \n.;,?!])', r'\1???\2', data)

#data = re.sub(r'(\b)[^ ]{3}(\b)', r'\1???\2', data)
print(data)

Programme qui réécrit les mots à l'envers lettre par lettre

#Programme qui réécrit les mots à l'envers lettre par lettre.

'''
print(mot)
#afficher les 2 premières lettres du mot
print("2 premières lettres: " + mot[0:2])
#afficher les 4 premières lettres dans le sens inverse
print("4 lettres inversées: " + mot[3::-1])

#afficher une lettre sur deux des 4 premières lettres dans le sens inverse
print("4 lettres inversées 1 lettre sur deux: " + mot[3::-2])

#print("le mot inversé " + mot[len(mot)::-1])

print("le mot inversé " + mot[::-1])
#print(mot[2:0:-1])
'''
     
        
        

with open('poeme.txt','r') as fichier:
    data = fichier.read()

poeme = ''

#1/ faire une liste des lignes du poème
lines = data.splitlines()
#2/ pour chaque ligne faire une liste des mots
for indice in range(0, len(lines)):
    line = lines[indice]
    mots = line.split(' ')
    #3/ pour chaque mot de la liste de mots, inverser les caractères
    for indiceMot in range(0, len(mots)):
        mot = mots[indiceMot]

        poeme = poeme + mot[::-1] + ' '
    
    poeme = poeme+'\n'




print(poeme)


Cours du 8 novembre 2021

introduire des "NARCISSE" après chaque vers qui commencent par des "Je" ou des "J'"

#introduire des "NARCISSE" après chaque vers qui commencent par des "Je" ou des "J'" 

with open('poeme.txt','r') as fichier:
    data = fichier.read()
 

#print(data)
lines = data.splitlines()

#print(lines)

#[premiere phrase, 2eme phrase]

#print(lines[1])

for indice in range(0, len(lines)):
    vers = lines[indice] 

    #print(vers[0:2])

    #if lines[indice][0:2]
    if vers[0:2].lower() == "je" or vers[0:2].lower() == "j'":
       print(vers + ' NARCISSE')
    else:
        print(vers)

remplacer les mots qui suivent les 'le' par 'raton-laveur' et ceux qui suivent les 'la' par 'mare aux canards

with open('poeme.txt','r') as fichier:
    data = fichier.read()


lines = data.splitlines()

for indice in range(0, len(lines)):
    vers = lines[indice]
    mots = vers.split(' ')
    #print(mots)
    for indiceMot in range(0, len(mots)):
        #print(mots[indiceMot])
        if mots[indiceMot].lower() == "le":
            mots[indiceMot + 1] = "raton-laveur"
        elif mots[indiceMot].lower() == "la":
            mots[indiceMot + 1] = "mare aux canards"

    """
    vers = ' '.join(mots)
    print(vers)
    """
    lines[indice] = ' '.join(mots)


data = '\n'.join(lines)
print(data)

remplacer les mots qui suivent les 'le' par 'raton-laveur' et ceux qui suivent les 'la' par 'mare aux canards version 2

#un script qui remplace les mots qui suivent les 'le' par 'raton-laveur' et ceux qui suivent les 'la' par 'mare aux canards
import re

with open('poeme.txt','r') as fichier:
    data = fichier.read()

data = re.sub(r'( l| ?L)e [^ \n]+', r'\1e raton-laveur', data)
data = re.sub(r'( l| ?L)a [^ \n]+', r'\1a mare aux canards', data)

print(data)


Énoncés

  • trier les vers pour qu'ils riment
  • introduire des "NARCISSE" après chaque vers qui commencent par des "Je" ou des "J'"
  • remplacer toutes les voyelles par une autre aléatoire
  • inverser l'ordre de toutes les lettres
  • traduire le poème en une autre langue
  • remplacer les a par des o
  • mettre tout en majuscule
  • noms communs se remplacent par des noms de gens connus
  • remplacer les points par des points d'exclamation
  • faire des supers longs sauts de ligne à chaque retour à la ligne
  • remplacer les points par des smileys
  • afficher une image ascii en fonction d'un nom ("renard" = image de renard /// "rose" = image de rose etc.)
  • faire apparaître plein de points d'exclamation quand il n'y en a qu'un
  • Un script qui remplace les chiffres par des lettres
  • Un script qui remplace les consonnes par les voyelles
  • Un script qui réécris le poème en utilisant le début d'une ligne et le mélange avec la fin d'une autre
  • Un cadavre exquis (l'utilisateur choisis le lieu la date et les personnages, ainsi se créez une histoire)
  • Une boule magique 8 (réponds aux questions)
  • Pierre, feuille, ciseau (l'utilisateur choisis l'un des trois, l'ordinateur aussi (random))
  • Générateur d'œuvres qui n'existe pas
  • un script qui inverse l'ordre des vers
  • un script qui met des mots en majuscules et des points d'exclamations au hasard
  • un script qui multiplie certaines lettres ex : au lieu d'ecrire ou il ecrit ouuuuuuuuuuuuuuu
  • Programme qui réécrit les mots à l'envers lettre par lettre.
  • Programme qui passe en "Caplock" : les minuscules deviennent majuscules / les maj deviennent min / les & deviennent 1 / les é deviennent 2 / les " deviennent 3, ect.
  • Programme qui recompose des poèmes en inversant des lignes.
  • Programme qui rajoute des "kof kooff" de toux entre les mots.
  • Programme qui rajoute "va bien" après le premier son "ju", puis "vamine" après le deuxième son "ju".
  • Programme qui pousse le mot "bouchon" avec de nombreux Tabs, et qui signe "Maurice" en fin de texte.
  • Programme qui transforme les mots en faux latin en rajoutant des "-us" en fin de mot.
  • programme qui trouve un mot qui rimes avec un mot donné
  • un script qui remplace les 'o' par des 'ooooH'
  • un script qui remplace un mot sur trois par 'miaou'
  • un script qui ajoute 'lalala' à la fin des lignes dans lesquelles il y a un 'la'
  • un script qui remplace les lignes qui commence par 'J' par la la phrase "J'ai menti"
  • un script qui remplace les espaces par des '-hhh-'
  • un script qui mélange les lignes
  • un script qui remplace les mots qui suivent les 'le' par 'raton-laveur' et ceux qui suivent les 'la' par 'mare aux canards
  • un script qui remplace les 'x' par 'XXX'
  • un script qui remplace les mots de trois lettres par '???'
  • un script qui supprime les derniers mots de chaque ligne et qui invite à les compléter de façon créative (avec des input())

Cours du 25 octobre 2021

Boucle qui attend une information

print("donne-moi un chiffre")

chiffre = input()

while chiffre != 5:
    print("essaye encore")
    chiffre = input()

print("on a trouvé")

Un script qui importe le texte du poeme

with open('poeme.txt','r') as f_open:
    data = f_open.read()

print(data)

Le poeme en texte brut

une pie blanche dans le ciel
J'ai des cheveux 
A'Z\x177W[{;;S/\x17{W\x17S;\x1bW[K;S~
Wesh la zone
Ou est la mer, vive le vent
a;rS\x17CK\x17'KS;
[CKg\x1bS[C\x17K;
Je suis telle une rose... Delicate et qui embaume...
As'tu vu mon nez Tout elumine
Chemin prevu Sillon trace
J'espere ce qui m'est interdit
O \x15age
O Desespoir
O Vieillesse ennemie

Cours du 18 octobre 2021

Loop 4

import random

animaux = ["lapin", "chat", "chien", "serpent"]

#memoire = ["0-1", "2-3"]
memoire = []

'''
for i in range(0, 10):
    indice1 = random.randint(0, 3)
    indice2 = random.randint(0, 3)

    if indice1 != indice2:
        print(f"le {animaux[indice1]} mange le {animaux[indice2]}")

'''

i = 0
while i < 10:
    indice1 = random.randint(0, 3)
    indice2 = random.randint(0, 3)

    if indice1 != indice2:
        
        '''inmemoire = 0

        for j in range(0, len(memoire)):
            if f"{indice1}-{indice2}" == memoire[j]:
                inmemoire = 1
         if inmemoire == 0:
        '''
        '''
        j = 0

        while j < len(memoire) and f"{indice1}-{indice2}" != memoire[j]:
           
            j = j+1
        
        if j == len(memoire):
        '''

        #si indice1-indice2 n'est pas dans la mémoire:
        if f"{indice1}-{indice2}" not in memoire:
            memoire.append(f"{indice1}-{indice2}")
            print(f"le {animaux[indice1]} mange le {animaux[indice2]}")
            i = i + 1

print(memoire)

Loop 3

import random

animaux = ["lapin", "chat", "chien", "serpent"]

#memoire = ["0-1", "2-3"]
memoire = []

'''
for i in range(0, 10):
    indice1 = random.randint(0, 3)
    indice2 = random.randint(0, 3)

    if indice1 != indice2:
        print(f"le {animaux[indice1]} mange le {animaux[indice2]}")

'''

i = 0
while i < 10:
    indice1 = random.randint(0, 3)
    indice2 = random.randint(0, 3)

    if indice1 != indice2:
        memoire.append(f"{indice1}-{indice2}")
        print(f"le {animaux[indice1]} mange le {animaux[indice2]}")
        i = i + 1

print(memoire)

Loop 2

import time


i = 0
lapins = 2

while i < 10:

    print(f"{lapins} petits lapins")
    # * / - + 
    lapins = lapins * lapins
    i = i + 1

'''
for i in range(0, 1000):
    print("Un petit lapin")
    time.sleep(0.5)
'''


Loop 1

import time
#print("Qui est-ce?", end="")
print("Qui est-ce?")
name = input()

print(f"Bonjour {name}")

#name
#  0    1    2    3    4    5
#['L', 'i', 'o', 'n', 'e', 'l']


#pour un indice qui va de 0 à 5 afficher la case correspondante 
for indice in range(0, len(name)):
    print(f"Donnez-moi un {name[indice]}")
    time.sleep(0.5)

print(f"{name}!")

Cours du 11 octobre 2021

Exercice: premier dialogue

#ceci est un commentaire
print("quel âge as-tu?")

age = input("j'ai ")

print(f"ah tu as {age} ans!")

age = int(age)

#< > <= >= == !=  
if age == 10:
    print("Oh ben t'es tout petit")
elif age < 20:
    print("oh ben t'es tout jeune")
elif age < 30:
    print("oh ben t'es presque tout vieux")
else:
    print("oh ben t'es tout vieux")

Intro langages de programmation

Langages de structuration de données
HTML
<p>Un texte</p>

XML
<article>L'article</article>
<date>2021.10.11</date>


CSS
Langage de déclaration de mise en forme
p{
   font-family:DinDong; 
}

'Langages algorithmiques'

Javascript
AJAX
var hello = "coucou";
alert(hello);



PHP
côté serveur - intermédiaire entre le web et les pages html
$hello = "coucou";
echo $hello;

ASP
PHP développé par Microsoft
%hello = "coucou";


C#
Orienté web, utilisé dans les applications mobiles


Python
def hello():
    print("coucou")


Java
Sun microsystem
Implémente la notion d'orienté objet
String hello = "coucou";
println(hello);


Processing
Pas vraiment un langage mais plus une librairie
line(10, 10, 400, 400);

GO
Google

C
int nombre = 4;

C++
Implémente la notion d'orienté objet

BASH
Bourne Again Shell
Lignes de commande Mac OS ou Linux


COBOL
vieux langage des années 70 - 

ASSEMBLEUR
langage des drivers



BINAIRE

Cours du 4 octobre 2021

Exercice : poésie binaire

Chaque étudiant.e écrit sur un pad commun au moins deux vers de 4 pieds en binaire en utilisant le tableau de conversion ASCII suivant: USASCII_code_chart.png 

1101100 1100001 0100000 1110100 1100101 1110010 1110010 1100101 0100000 1100101 1110011 1110100 0100000 1100010 1101100 1100101 1110101 1100101 0100000 1100011 1101111 1101101 1101101 1100101 0100000 1110101 1101110 1100101 0100000 01101111 1110010 1100001 1101110 1100111 1100101 


1110101 1101110 1100101 0100000 1110000 1101001 1100101 0100000 1100010 1101100 1100001 1101110 1100011 1101000 1100101 0100000 1100100 1100001 1101110 1110011 0100000 1101100 1100101 0100000 1100011 1101001 1100101 1101100

1001010 0100111 1100001 1101001 0100000 1100100 1100101 1110011 0100000 1100011 1101000 1100101 1110110 1100101 1110101 1111000 0100000
1100101 1101110 1110100 1110010 1100101 0100000 1101100 1100101 1110011 0100000 1100100 1100101 11011100 1110010 1110011

1000001 0100111 1011010 0010111 0000010 0110111 1010111 1011011 1111011 0111011 0000010 0111011 1010011 0101111 0000010 0010111 1111011 1010111 0010111 0000010 1010011 0111011 0011011 1010111 1011011 1001011 0111011 1010011 1111110

1010111 1100101 1110011 1101000 0100000 1101100 1100001 0100000 1111010 1101111 1101110 1100101
 0100000 1110100 1110010 1100001 1101110 1110001 1110101 1101010 1101100 0100000 1100101 1101111 0100000 1110001 1110101 110111 1101001 0111010 0101001

1001111 1110101 0100000 1100101 1110011 1110100 0100000 1101100 1100001 0100000 1101101 1100101 1110010 0101100 01000001110110 1101001 1110110 1100101 0100000 1101100 1100101 0100000 1110110 1100101 1101110 1110100

1100001 0111011 1110010 1010011 0010111 1000011 1001011 0010111 0100111 1001011 1010011 0111011
1011011 1000011 1001011 1100111 0011011 1010011 1011011 1000011 0010111 1001011 0111011

1001010 1100101 0100000 1110011 1110101 1101001 1110011 0100000 1110100 1100101 1101100 1101100 1100101 0100000 1110101 1101110 1100101 0100000 1110010 1101111 1110011 1100101 0101110 0101110 0101110 0100000 1000100 1100101 1101100 1101001 1100011 1100001 1110100 1100101 0100000 1100101 1110100 0100000 1110001 1110101 1101001 0100000 1100101 1101101 1100010 1100001 1110101 1101101 1100101 0101110 0101110 0101110


1000001 1110011 0100111 1110100 1110101 0100000 1110110 1110101 0100000 1101101 1101111 1101110 0100000 1101110 1100101 1111010 0100000 1010100 1101111 1110101 1110100 0100000 1100101 1101100 1110101 1101101 1101001 1101110 1100101

1000011 1101000 1100101 1101101 1101001 1101110 0100000 1110000 1110010 1100101 1110110 1110101 0100000 1010011 1101001 1101100 1101100 1101111 1101110 0100000 1110100 1110010 1100001 1100011 1100101

1001010 0100111 1100101 1110011 1110000 1100101 1110010 1100101 0100000 1100011 1100101 0100000 1110001 1110101 1101001 0100000 1101101 0100111 1100101 1110011 1110100 0100000 1101001 1101110 1110100 1100101 1110010 1100100 1101001 1110100


100111101000000010101110000111001111100101 
10011110100000100010011001011110011110010111100111110000110111111010011110010
10011110100000101011011010011100101110100111011001101100110010111100111110011110010101000001100101110111011011101100101110110111010011100101


Du code Morse à l'ASCII

Voir: slides 01: texte et code

1. INTERNATIONAL MORSE CODE, HAND SENDING - https://archive.org/details/gov.archives.arc.36813 Department of Defense. Department of the Army. Office of the Chief Signal Officer. (09/18/1947 - 02/28/1964)

  • Le code morse, inventé par Samuel F. B. Morse en 1832.
  • Directions pour tracer les lettres
  • Les confusions possibles si l'opérateur fait une erreur de rythme

2. TM 11-459 International Morse Code (Instruction) - 1959 - https://archive.org/details/Tm11-4591957/page/n3

  • Le télégraphe "a contribué plutôt à lier inextricablement la technologie et la place de l'humain" (K. Hayles - Lire et penser en milieux numériques p. 223)

3. Direct service guide for telegraphic cipher - 1939 - https://archive.org/details/directservicegui00sldu/page/20

  • Premier objectif: la compression (pour des raisons économiques)
  • 2e objectif: la discrétion
  • 3e objectif: le controle des erreurs

4. Bentley's second phrase code - 1929 - https://archive.org/details/bentleyssecondph00bent/page/778

  • Les codes ne sont plus liés au langage naturel

5. Idem

  • Ici, un "tableau de mutilation" qui permet de corriger un code mal transmis (qui contient une erreur d'une lettre)

6. Teleprinter n°7 - Creed & Company - 1930

  • Frederick G. Creed, inventeur du téléscripteur (vers 1910), ancien télégraphiste, canadien

7. Un exemple de téléscripteur - 1932, Londres

8. Code baudot - 1888

  • Un encodage des caractères sur 5 chiffres, 5 bits
  • Utilisé (dans des versions ultérieures) sur les premiers téléscripteurs
  • Nécessité de définir une vitesse de modulation, "baudrate" en anglais, qui définit le nombre de symboles envoyés en 1 seconde -> la question du début et de la fin!
  • Donald Murray adapte le code baudot en 1902 et attribue aux lettres les plus utilisées de l'alphabet les positions impliquant le moins de trous
  • En 1924, adaptation du code baudot-Murray par l'organisme International Telegraph Union en International Telegraph Alphabet No. 2 (ITA2)

9. ASCII - American Standard Code for Information Interchange - 1963 - pré 1971

  • sur 7 bits
Récupérée de « https://curlybraces.be/wiki/index.php?title=ERG::Code-2021-2022&oldid=5319 »