Design numérique - Contributions [fr]

Utilisateur:Celia

2022-02-04T14:30:10Z

Celia : /* BASES DE DONNEES */

== LE MONDE ==
'''Mon monde''' <br/>
''La cité des suicides :'' <br/>
- Sous le bois de Vincennes, à l’est de Paris. L’existence de cette ville cachée a été révélée lors de la construction de la ligne de métro Bastille et Vincennes. L’inspecteur de police Sauvage la découvrit alors qu’il recherchait un certain nombre d’ouvriers qui avaient disparu au cours des travaux de fondation. <br/>
- Chanson de la ville au silence absolu <br/>
- L’air se trouve e effet filtré, laissant entrer de grandes quantités d’ozone et bloquant la route aux microbes. En dépit des délices évidents qu’offre la ville, les visiteurs l’ont décrite comme lugubre et mélancolique.

'''Les personnages ='''<br/>

''L’Anglais :'' <br/>
- Las de la vie par ennui <br/>
- Word of the day : Morose <br/>
- Tout me lasse ; je remorque avec peine mon ennui avec mes jours, et je vais partout bâillant ma vie.

''Le Français :'' <br/>
- Fatigué de la débauche <br/>
- Et ta débauche ne leurre qu'un instant ton désespoir caché. <br/>
- J'ai trente ans et je n'ai encore rien pu réaliser de ce que je souhaitais. Toujours embauché, débauché, et chaque mois, je vieillis d'une année. Je n'ai rien vu du monde, rien obtenu de la vie si ce n'est cet espoir : cela viendra, c'est le commencement.

''Le Médecin :'' <br/>
- L’alimentation se limite à l’absorption de minuscules pilules qui activent le cerveau. <br/>
- Chaque habitant doit observer la règle du silence absolu, sauf lorsqu’il est interrogé par son médecin. <br/>
- Cette sorte de praticiens appartient en fait à la police, car la communauté n’a pas de problèmes de santé : grâce aux murs protecteurs, datant des temps préhistoriques, qui entourent la ville, l’atmosphère est pure à cent pour cent. L’air se trouve en effet filtré, laissant entrer de grandes quantités d’ozone et bloquant la route aux microbes.

''L’Espagnol :''<br/>
- Les Espagnols, qui ont tenté de se supprimer par désespoir d’amour.

== LA CARTOGRAPHIE (Dataviz) ==

'''Ambiance galaxy / représenter le monde vu de l'univers'''

[https://images.prismic.io/meltwater/5456e736-ea88-4f21-82bf-5132326cbd99_eng-0303-BONUS+Data+Visualization+Designed+for+PR+and+Comms+Professionals.png?auto=compress,format&rect=0,20,596,397&w=1920&h=1280 image inspi 1]

'''A travers des sortes de Milkyway'''

[https://www.anychart.com/blog/wp-content/uploads/2018/10/1_apPw4SgBlFa377FFSek7SQ.png image inspi 2]

'''Couleurs vives sur fond noir'''

[https://roadtovrlive-5ea0.kxcdn.com/wp-content/uploads/2016/11/yeast-graph-680x318.jpg image inspi 3]

''' Quelques essais de planètes/ Milkyway '''

[[Fichier:Essai1.png|200px|gauche]]
[[Fichier:Essai2.png|200px]]
[[Fichier:Essai3.png|200px]]
[[Fichier:Premier rendu .png|200px]]

== LA PAGE HTML VIVANTE ==

Inspiration : <br/>

Je souhaite faire une page Html qui représente une carte à gratter qui donne, soit bonne fortune, soit une prédiction astrologique. Je souhaite aligner si c'est possible trois cartes. <br/>

Comme les cartes gagnantes que l'on trouve dans les bureaux de tabac, mais cette fois-ci sans histoire d'argent.

Sources : <br/>

[https://lh3.googleusercontent.com/proxy/WyyXjYSAjKzmj0_LKz32F0qg8BFfmVJL9oah5PhOXtGxXzdaABh7_-rgChd2oFNsXxDlp_uQi9Hvbb4lZ73Kz3AQXmy4V6JvfTIcPsDMrobxHMQgs-O2AYGpvIxTXYm36YP4kxEV19CdBZq5S6k3 Carte 1]

[https://lesbonuscasino.com/wp-content/uploads/2016/04/astro-fdj.jpg Carte 2]

[https://blog.partiprof.fr/wp-content/uploads/2013/12/%C3%A9l%C3%A9ment-chimiqe-jeu-%C3%A0-gratter.jpg Carte 3]

file:///C:/Users/HP/Desktop/carto/gratte.html

== INTERACTION AVEC UNE INTERFACE ==

''' Première idée '''

- Des capteurs positionnés sur le corps qui permettrait d'interagir avec une interface telle que paint 3D. Ainsi, de faire de formes grâce à une chorégraphie. L'interaction avec ce logiciel se transformerait en performance. Chaque mouvement serait associé à une action qui aurait été faite avec le clavier ou la souris, en temps normal.

<br>
[[Fichier:Note1.jpeg|200px|sans_cadre|gauche]]
[[Fichier:Note2.jpeg|200px|sans_cadre]]
[[Fichier:Note3.jpg|200px|sans_cadre]]

''' Deuxième idée '''

''Plus axé "web dev" / sous forme d'extension Chrome <br>''

''Quelques idées de modifications d'interfaces en fonction de ce que je souhaiterais apprendre à coder :''

- Inverser la logique de l'interface afin d'avoir une nouvelle approche. Par exemple: mettre les éléments du haut, en bas ou ceux de
gauche, à droite. <br>
- Suprimer les images, laisser que le texte ou l'inverse. <br>
- Reprendre l'idée de la carte à gratter, mais cette fois-ci, sur des interfaces déjà existante pour choisir nous même, les images que
l'on souhaite voir en fonction de leur titre. <br>
- Traitement d'images: comment l'agrandir, autre que zoom avec deux doigts ou le double clic. Peut-être voir comment transformer la forme de l'image, par les angles ou complètement la modifier, l'effacer, en mettre une autre etc. <br>
- Laisser que les mots clefs pour faciliter la lecture d'une page avec beaucoup d'informations. <br>

[[Fichier:Note4.jpg|200px|sans_cadre]] <br>

<br>

== INTERACTION AVEC LE CLAVIER ==

'''Suites de lettres qui émettent une action :'''

* ''azertyuiop'' = Agrandir les images (Action cumulable)
* ''qsdfghjklm'' = Agrandir la typo (Action cumulable)
* ''wxcvbn,;:!'' = Aller à la page suivante (Action cumulable)
* ''poiuytreza'' = Rétrécir les images (Action cumulable)
* ''mlkjhgfdsq'' = Rétrécir la typo (Action cumulable)
* ''!:;,nbvcxw'' = Revenir en arrière (Action cumulable)
* ''aqw'' = Aller en bas de la page
* ''zsx'' = Scroller vers le bas
* ''edc'' = Aller à la barre de recherche
* ''rfv'' = Afficher que les img ou jpg
* ''tgb'' = Afficher que le texte
* ''yhn'' = Inverser le sens d'affichage
* ''uj,'' = Afficher seulement les mots clefs sans les images
* ''ik;'' = Afficher le titre des images sans les images mais avec le texte
* ''ol:'' = Activer le clavier normal (Action cumulable on/off)
* ''pm!'' = Ouvrir un onglet au hasard dans un nouvel onglet
* ''wqa'' = Aller en haut de la page
* ''xsz'' = Scroller vers le haut
* ''cde'' = Aller à l'accueil
* ''vfr'' = Revenir à la normal (Valable pour chaque modification émise)
* ''bgt'' = Sélectionner un élément (puis se balader avec les flèches)
* ''nhy'' = Cliquer sur l'élément sélectionner
* '',ju'' = Désactiver l'outil sélection
* '';ki'' =
* '':lo'' = Rouvrir le dernier onglet fermé
* ''!mp'' = Fermer le dernier onglet ouvert

== CODE JAVASCRIPT ==
Z = Scroller vers le bas
X = Scroller vers le haut
A = Aller en bas de la page
W = Aller en haut de la page

<syntaxhighlight lang="js">
document.addEventListener('keydown', (e) => {
if(e.key == 'z')
document.documentElement.scrollTop += 50;

});

document.addEventListener('keydown', (e) => {
if(e.key == 'x')
document.documentElement.scrollTop -= 50;

});

document.addEventListener('keydown', (e) => {
if(e.key == 'a')
document.documentElement.scrollTop = 100000000000000;

});

document.addEventListener('keydown', (e) => {
if(e.key == 'w')
document.documentElement.scrollTop -= 100000000000000;

});

</syntaxhighlight>

== MODIFICATION D'UNE PAGE HTML AVEC DES ELEMENTS GRAPHIQUES ==
Code JS

<syntaxhighlight lang="js">
console.log('yoplaboum');
document.addEventListener('keydown', (e) => {
if(e.key == 'a')
getRandomImageUrl('soft1');
else if(e.key == 'b')
addBorders('bordure1');
else if(e.key == 'c')
replaceTypo('typo1');
else if(e.key == 'd')
glitters('glitters1');
else if(e.key == 'e')
replaceImages('runbitch');
});

function getRandomImageUrl(mode){
if(mode == 'soft1'){
var urls = ['http://data.pixiz.com/output/user/frame/preview/api/big/0/3/7/2/1722730_8f936.jpg'];
}
var imageUrl = urls[Math.floor(Math.random() * urls.length)];
return imageUrl;

}
function addBorders(mode){
if(mode == 'bordure1'){
var divElements = document.querySelectorAll('div');
}
for (var i = 0; i < divElements.length; i++){
var divElement = divElements[i];
divElement.classList.add('bordure1');
}
}
function replaceTypo(mode){
if (mode == 'typo1'){
document.body.addclass('typo1')
}
}
function glitters(mode){
if (mode == 'glitters1'){
document.body.innerHTML = document.body.innerHTML + <div class='glitters1'></div>;
}
}
function replaceImages(mode){
if(mode == 'runbitch'){
var imageElements = document.querySelectorAll('img');
['runbitch.jpg']}
for(var i = 0; i < imageElements.length; i++){
var imageElement = imageElements[i];
var modified = '<div class="bg" style="background-size:cover!important;background-image:url('+getRandomImageUrl(mode)+')!important;">' + imageElement.outerHTML + '</div>';
imageElement.outerHTML = modified;
}
}
</syntaxhighlight>

== WEB 2 PRINT ==

'''Les conseils du homard''' <br>

''Code Js'' <br>
<syntaxhighlight lang="js">
var conseils = [
"Conseil N°1: N'essaie pas de changer pour plaire aux autres",
"Conseil N°2: Aie plus confiance en toi",
"Conseil N°3: Les erreurs que tu vas faire t'aideront à devenir une meilleure personne",
"Conseil N°4: N'écoute pas ceux qui essaieront de te décourager",
"Conseil N°5: Tu ne seras pas forever alone avec 101 chats plus tard",
"Conseil N°6: Sortir de ta zone de confort ne te tuera pas",
"Conseil N°7: Trouve le courage de dire ce que tu penses vraiment à ceux que tu aimes",
"Conseil N°8: Abuse moins des mauvaises mais bonnes choses",
"Conseil N°9: N'abandonne jamais ton passe-temps favori",
"Conseil N°10: Tu dois échouer plusieurs fois avant de pouvoir enfin réussir",
"Conseil N°11: Iel ne te méritait pas, de toute façon",
"Conseil N°12: Ose dire non plus souvent",
"Conseil N°13: Tu es responsable de ton propre bonheur",
"Conseil N°14: Écoute plus souvent les conseils de tes aînés",
"Conseil N°15: Profite encore plus de ta jeunesse",
"Conseil N°16: Ne dépense pas ton argent dans des objets inutiles",
"Conseil N°17: Prends des cours de cuisine/danse/chant/langues",
"Conseil N°18: Vis dans le présent et non dans le passé",
"Conseil N°19: Sors moins et lis plus de livres",
"Conseil N°20: Tu vas finir par t'en sortir",
];

var conseil = conseils[Math.floor(Math.random() * conseils.length)];

console.log(conseil);

document.getElementById('conseil').innerHTML = conseil;

document.addEventListener('click',peche);
function peche (){
window.print()
}
</syntaxhighlight>

''Code Html''
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
</style>
<link rel="stylesheet" href="styles.css">
<title>Les conseils du homard</title>
</head>

<body>
<section>
<header><h1><span>Les conseils du homard</span></h1>
<h3><span>Choisis ton homard et pêche-le ! </span></h3></header>

<div><img id="homard"src="homard.png" alt="homard"></div>
<div id="conseil"> </div>
</section>
<script src="content.js"></script>

</body>

</html></syntaxhighlight>
''Code Css''

<syntaxhighlight lang="css">@font-face {
font-family: 'lack';
src: url('lack-line-regular-webfont.woff2') format('woff2'),
url('lack-line-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

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

body{
background-image: url('gifff.png');
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
font-family: 'Raleway';
font-size: 30px;
margin: -5% 0% 0% 0.5%;
padding-right: 0%;

}

h1{
font-family: 'lack';
color: white;
font-size: 60px;
padding-top: 3%;
margin-bottom: 2%;
padding-bottom: 0%;
font-weight: lighter;
}

h3{
font-family: 'Raleway', white;
color: white;
font-weight: 600;
font-style: italic;
font-weight: lighter;
margin-top: -2%;
padding-right: 1%;
}

@media print{
@page{
size:297mm 420mm;
background-color: black;
}

section{
border:0;
width:297mm;
height:420mm;
background-color: black;
}
h1{
display: none;

}

#homard{
margin-top:10%;
width: 80%;
height: auto;
margin-left: 10%;
margin-top: 5%;
}
h3{
opacity: 0%;
}
#conseil{
margin-top: 5%;
font-family: 'lack';
font-size: 70px;
text-align: center;
margin-bottom: 0%;
}
}
@media screen{
#homard{
display: none;
}
#conseil{
display: none;
}
header{

margin:-10% 0% 3% 3%;
display: inline-block;
padding-top: 3%;
margin-top: -3%;
border-radius: 10px;
}
}</syntaxhighlight>

'''Recueil de poèmes érotique'''

''Code Html''

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ether2html</title>





<link href="https://pads.erg.be/p/stylescss/export/txt" rel="stylesheet" text="text/css">



<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
<script type="text/javascript" charset="utf-8">

let $padContent;
function insertData(data) {

let converter = new showdown.Converter();
let html = converter.makeHtml(data);
$padContent.innerHTML = html;
}

function insertPagedJS(){
let $script = document.createElement('script');
// PLEASE NOTE THAT YOU CAN ALSO DOWNLOAD THE LIBRARIES FOR QUICKER OFFLINE USAGE
// $script.setAttribute('src', 'js/paged.polyfill.js');
$script.setAttribute('src', 'https://unpkg.com/pagedjs/dist/paged.polyfill.js');
document.querySelector('head').appendChild($script);
}

window.addEventListener('DOMContentLoaded', function(){
$padContent = document.getElementById('pad-content');
let request = new URL($padContent.getAttribute('data-md'));
fetch(request, {mode: 'cors'}).then(response => response.text()).then(data => {
insertData(data);
insertPagedJS();
});
});

</script>


<style type="text/css" media="screen">:root{--color-background:whitesmoke;--color-pageBox:#666;--color-paper:white;--color-marginBox:transparent}@media screen{body{background-color:var(--color-background)}.pagedjs_pages{display:flex;width:calc(var(--pagedjs-width) * 2);flex:0;flex-wrap:wrap;margin:0 auto}.pagedjs_page{background-color:var(--color-paper);box-shadow:0 0 0 1px var(--color-pageBox);margin:0;flex-shrink:0;flex-grow:0;margin-top:10mm}.pagedjs_first_page{margin-left:var(--pagedjs-width)}.pagedjs_page:last-of-type{margin-bottom:10mm}.pagedjs_margin-bottom,.pagedjs_margin-bottom-center,.pagedjs_margin-bottom-left,.pagedjs_margin-bottom-left-corner-holder,.pagedjs_margin-bottom-right,.pagedjs_margin-bottom-right-corner-holder,.pagedjs_margin-left,.pagedjs_margin-left-bottom,.pagedjs_margin-left-middle,.pagedjs_margin-left-top,.pagedjs_margin-right,.pagedjs_margin-right-bottom,.pagedjs_margin-right-middle,.pagedjs_margin-right-top,.pagedjs_margin-top,.pagedjs_margin-top-center,.pagedjs_margin-top-left,.pagedjs_margin-top-left-corner-holder,.pagedjs_margin-top-right,.pagedjs_margin-top-right-corner-holder{box-shadow:0 0 0 1px inset var(--color-marginBox)}}</style>
<style type="text/css">
@font-face {
font-family: "fesse";
src: url(Typefesse_Pleine.woff) format("woff");
src: url(Typefesse_Pleine.woff2) format("woff2");
}
@font-face {
font-family: "compagnon1";
src: url(Compagnon-Roman.woff) format("woff");
src: url(Compagnon-Roman.woff2) format("woff2");
}

</style>
<style>

@media print {
div.pagedjs_page{
background-image: url("https://i.ibb.co/c6d7zm7/page.jpg");
background-size: cover;

}
div.pagedjs_first_page{
background-image: url("https://i.ibb.co/BsZ14Ps/cov.jpg");

background-size: cover;

}

}
</style>
</head>
<body>


<div data-md="https://pads.erg.be/p/meremichel/export/txt" id="pad-content"></div>

</body>
</html>
</html></syntaxhighlight>

<br> Link texte : https://pads.erg.be/p/meremichel
<br> Link style : https://pads.erg.be/p/stylescss

== DESIGN NUMERIQUE 21/22 ==

'''La balade des homard'''

<br> Essai d'animation en JavaScript <br>

''Code Html''
<syntaxhighlight lang="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>scroll</title>
<link rel="stylesheet" href="styles.css">

</head>
<body>
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >
<img class="myImg" src="gifff.png" >

<script src="script.js"></script></body>
</html>
</syntaxhighlight>

''Code Js''
<syntaxhighlight lang="js">function bouge(){
for(var compteur = 0; compteur < homards.length; compteur++){
var homard = homards[compteur];
vitesseX = parseFloat(homard.getAttribute('vitesseX'));
vitesseY = parseFloat(homard.getAttribute('vitesseY'));

posX = parseFloat(homard.style.left);
posY = parseFloat(homard.style.top);

if(posX > window.innerWidth - 212){
vitesseX = - vitesseX;
homard.setAttribute('vitesseX', vitesseX);
}
if(posX < 0 ){
vitesseX = - vitesseX;
homard.setAttribute('vitesseX', vitesseX);
}
if(posY > window.innerHeight - 300){
vitesseY = - vitesseY;
homard.setAttribute('vitesseY', vitesseY);
}
if(posY < 0 ){
vitesseY = - vitesseY;
homard.setAttribute('vitesseY', vitesseY);
}
//calculer l'angle de rotation en fonction de la x et y trigonométrie rotation en fonction en fonction de vitesse x et y
// pour avoir les homard qui bougent

console.log(vitesseX);
homard.style.left = (posX + vitesseX) + 'px';
homard.style.top = (posY + vitesseY) + 'px';
}
}

function init(){
for(var compteur = 0; compteur < homards.length; compteur++){
var homard = homards[compteur];

homard.setAttribute('vitesseX', -1 + Math.random() * 2);
homard.setAttribute('vitesseY', -1 + Math.random() * 2);
homard.style.left = Math.random() * (window.innerWidth - 212) + 'px';
homard.style.top = Math.random() * (window.innerHeight - 300) + 'px';
homard.style.transformOrigin = Math.random() * 100 + '%';
}
}

var homards = document.querySelectorAll('.myImg');

init();

window.setInterval(bouge, 10);</syntaxhighlight>

''Code Css''
<syntaxhighlight lang="css">body{
width: 90%;
height: 90%;
/* overflow: hidden; */
}

body::-webkit-scrollbar {
display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

.myImg {
position:absolute;

transition: margin-left 3s, margin-top 3s;
/*animation-name: rotate;
animation-duration: 80s;
animation-iteration-count: infinite;*/
height:300px;
width:auto;

}
@keyframes rotate{
from{ transform: rotate(-360deg); }
to{ transform: rotate(360deg); }
} </syntaxhighlight>

'''Texte Nft''' <br>
<p>Notion de certificat/ Calcules / imagé par le texte qui se complexifie et qui résulte à une transaction en cryptomonnaie / pluie de coins.</p>
<br> Essai d'animation seulement en Css/Html

''Code Html''

<syntaxhighlight lang="html"><!doctype html>
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<title>NF - WHAT THE - T</title>

<body>

<div class="sticky" id="fixe"><h1>Les NFT révolutionnent-ils le monde de l'art ?</h1></div>
<div class="sticky">Le marché des NFT ("non fungible tokens") s’envole ces derniers mois, notamment dans le milieu de l’art. Les sceptiques affirmaient que les NFT n’étaient qu’une bulle spéculative au bord de l’implosion. La dernière édition du rapport annuel Hiscox Online Art Trade suggère le contraire. Les ventes de NFT associé à une œuvre d’art ont généré près de 3,5 milliards de dollars (environ 3 milliards d’euros) durant les trois premiers trimestres de cette année. Elles se sont particulièrement accélérées en août, atteignant la somme inédite de 1,7 million de dollars (1,5 million d’euros).</div>
<div class="sticky">Problème : le marché de ces objets numériques à la propriété certifiée est extrêmement volatil et s’est effondré de 69% en septembre. Mais pas de quoi inquiéter les plus optimistes. Les transactions de NFT avaient déjà connu un premier ralentissement en avril après qu’un collage de Beeple ait été adjugé 69,3 millions de dollars (58,1 millions d’euros) chez Christie’s. Un montant qui l’a propulsé au troisième rang des artistes vivants les plus chers, après Jeff Koons et David</div>
<div class="sticky">La nouvelle technologique préférée des maisons d’enchères</div>
<div class="sticky">Bien que le marché des NFT connaît quelques variations, il ne cesse de prendre de l’ampleur et vient bousculer un monde de l’art souvent frileux vis-à-vis des avancées technologiques. Les jetons non fongibles en ont fait les frais en 2018, trois ans avant qu’ils ne deviennent un acronyme connu de tous les professionnels du milieu. À l’époque, l’artiste et chercheur en intelligence artificielle, Robbie Barrat, collabore avec Christie’s pour offrir 300 cartes cadeaux aux participants du sommet "Art + Tech" de la maison d’enchères. Elles leur permettent de récupérer un NFT exclusif de l’artiste… ce que ne font que quelques personnes présentes. </div>
<div class="sticky">La popularité des NFT a depuis décollé, et les principales maisons d’enchères proposent toutes ces objets numériques. Sotheby’s a ainsi annoncé la création d’un espace digital réservé aux collectionneurs d’art digital, et une vente bi-annuelle dédiée exclusivement aux NFT. Un choix judicieux étant donné que ces jetons non-fongibles battent des records dans les salles d’enchères. </div>
<div class="sticky">Une nouvelle façon de collectionner l’art</div>
<div class="sticky">Si certains exemplaires se distinguent par leur rareté, tous permettent aux collectionneurs de revendiquer leur appartenance à une communauté. Ce sentiment d’appartenance vaut son pesant d’or : un lot de 101 dessins numériques issus du Bored Apes Yacht Club s’est arraché à 24,4 millions de dollars (environ 20,3 millions d’euros) en septembre chez Sotheby’s. Dans le même registre, neuf CryptoPunks ont été vendus en mai pour 16,9 millions de dollars (14,6 millions d’euros) chez Christie’s. </div>
<div class="sticky">"Les collectionneurs d’art ne se contentent pas d’acheter des objets, ils achètent ce qui se cachent derrière. L’une des leçons à tirer du boom des objets cryptographiques est l’importance de la narration pour créer une grande communauté", peut-on lire dans le rapport. Bored Apes Yacht Club joue particulièrement sur cet aspect en proposant aux détenteurs de ses avatars de participer à des soirées exclusives. </div>
<div class="sticky">Qu’ils confèrent un sentiment d’appartenance ou non, les NFT se sont imposés dans le monde de l’art. Les optimistes y voient un moyen de redonner le pouvoir aux artistes, tandis que les autres s’interrogent sur leur impact écologique ou le manque de réglementation spécifique autour de cette nouvelle technologie. </div>
<div class="sticky">Les auteurs du rapport Hiscox Online Art Trade sont, eux, optimistes. </div>
<div class="sticky">"Les NFT comblent une lacune qui existe depuis longtemps dans le monde de l’art : une nouvelle façon de collectionner l’art. Les NFT répondent au même besoin des collectionneurs de posséder quelque chose de recherché, mais cette fois sous une forme numérique plutôt que physique. Ce marché connaîtra des hauts et des bas, mais le monde de l’art devrait y prêter attention s’il veut rester pertinent à l’avenir".</div>
<div class="sticky"><img id=coco src="1456113_72b94.gif" width= "100%" height="100%"></div>

</body>
</html>

</html>
</syntaxhighlight>

''Code Css''

<syntaxhighlight lang="css">

html{
width: 100%;
height: auto;
}
#fixe{
color: black;
text-shadow: white 1px 0 5px;
z-index: 2;
}

div.sticky {

position: -webkit-sticky;
position: sticky;
top: 0;
margin: 0%;
padding: 0%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font: bold black;
font-size: 40px;
;
}

#coco{
opacity: 0;
}
#coco:hover{
opacity: 100%;
transition: 2s ease-in;

}</syntaxhighlight>

== BASES DE DONNEES ==

''''' Idées '''''

Quelles couleurs servent a quel site dans les sites les plus visité , le bleu = reseaux sociaux, infos ;
le jaune, cinema etc.
puis voir la signification des couleurs, est ce que ça corespond ? voir le but, aligné les ref couleurs

Index des couleurs pour la communication ou quelque chose de bien plus precis
Tous les sites où ca parle "d'espace vital" quelles couleurs sont repertoriées ?
Le but est que ça rende une image graphique may be ? Genre des degradées de couleurs ou des fresques
que j'insère dans des illustration that would communicate smthg, un mot ou une sensation.

Utilisateur:Celia

2022-02-04T14:28:40Z

Celia : /* DESIGN NUMERIQUE 21/22 */

Celia Sallet

2021-12-17T13:46:57Z

Celia : Page créée avec « '''Les conseils du homard''' <br> ''Code Js'' <br> <syntaxhighlight lang="js"> var conseils = [ "Conseil N°1: N'essaie pas de changer pour plaire aux autres", "Conse... »

'''Les conseils du homard''' <br>

''Code Js'' <br>
<syntaxhighlight lang="js">
var conseils = [
"Conseil N°1: N'essaie pas de changer pour plaire aux autres",
"Conseil N°2: Aie plus confiance en toi",
"Conseil N°3: Les erreurs que tu vas faire t'aideront à devenir une meilleure personne",
"Conseil N°4: N'écoute pas ceux qui essaieront de te décourager",
"Conseil N°5: Tu ne seras pas forever alone avec 101 chats plus tard",
"Conseil N°6: Sortir de ta zone de confort ne te tuera pas",
"Conseil N°7: Trouve le courage de dire ce que tu penses vraiment à ceux que tu aimes",
"Conseil N°8: Abuse moins des mauvaises mais bonnes choses",
"Conseil N°9: N'abandonne jamais ton passe-temps favori",
"Conseil N°10: Tu dois échouer plusieurs fois avant de pouvoir enfin réussir",
"Conseil N°11: Iel ne te méritait pas, de toute façon",
"Conseil N°12: Ose dire non plus souvent",
"Conseil N°13: Tu es responsable de ton propre bonheur",
"Conseil N°14: Écoute plus souvent les conseils de tes aînés",
"Conseil N°15: Profite encore plus de ta jeunesse",
"Conseil N°16: Ne dépense pas ton argent dans des objets inutiles",
"Conseil N°17: Prends des cours de cuisine/danse/chant/langues",
"Conseil N°18: Vis dans le présent et non dans le passé",
"Conseil N°19: Sors moins et lis plus de livres",
"Conseil N°20: Tu vas finir par t'en sortir",
];

var conseil = conseils[Math.floor(Math.random() * conseils.length)];

console.log(conseil);

document.getElementById('conseil').innerHTML = conseil;

document.addEventListener('click',peche);
function peche (){
window.print()
}
</syntaxhighlight>

''Code Html''
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
</style>
<link rel="stylesheet" href="styles.css">
<title>Les conseils du homard</title>
</head>

<body>
<section>
<header><h1><span>Les conseils du homard</span></h1>
<h3><span>Choisis ton homard et pêche-le ! </span></h3></header>

<div><img id="homard"src="homard.png" alt="homard"></div>
<div id="conseil"> </div>
</section>
<script src="content.js"></script>

</body>

</html></syntaxhighlight>
''Code Css''

<syntaxhighlight lang="css">@font-face {
font-family: 'lack';
src: url('lack-line-regular-webfont.woff2') format('woff2'),
url('lack-line-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

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

body{
background-image: url('gifff.png');
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
font-family: 'Raleway';
font-size: 30px;
margin: -5% 0% 0% 0.5%;
padding-right: 0%;

}

h1{
font-family: 'lack';
color: white;
font-size: 60px;
padding-top: 3%;
margin-bottom: 2%;
padding-bottom: 0%;
font-weight: lighter;
}

h3{
font-family: 'Raleway', white;
color: white;
font-weight: 600;
font-style: italic;
font-weight: lighter;
margin-top: -2%;
padding-right: 1%;
}

@media print{
@page{
size:297mm 420mm;
background-color: black;
}

section{
border:0;
width:297mm;
height:420mm;
background-color: black;
}
h1{
display: none;

}

#homard{
margin-top:10%;
width: 80%;
height: auto;
margin-left: 10%;
margin-top: 5%;
}
h3{
opacity: 0%;
}
#conseil{
margin-top: 5%;
font-family: 'lack';
font-size: 70px;
text-align: center;
margin-bottom: 0%;
}
}
@media screen{
#homard{
display: none;
}
#conseil{
display: none;
}
header{

margin:-10% 0% 3% 3%;
display: inline-block;
padding-top: 3%;
margin-top: -3%;
border-radius: 10px;
}
}</syntaxhighlight>

'''Recueil de poèmes érotique'''

''Code Html''

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ether2html</title>





<link href="https://pads.erg.be/p/stylescss/export/txt" rel="stylesheet" text="text/css">



<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
<script type="text/javascript" charset="utf-8">

let $padContent;
function insertData(data) {

let converter = new showdown.Converter();
let html = converter.makeHtml(data);
$padContent.innerHTML = html;
}

function insertPagedJS(){
let $script = document.createElement('script');
// PLEASE NOTE THAT YOU CAN ALSO DOWNLOAD THE LIBRARIES FOR QUICKER OFFLINE USAGE
// $script.setAttribute('src', 'js/paged.polyfill.js');
$script.setAttribute('src', 'https://unpkg.com/pagedjs/dist/paged.polyfill.js');
document.querySelector('head').appendChild($script);
}

window.addEventListener('DOMContentLoaded', function(){
$padContent = document.getElementById('pad-content');
let request = new URL($padContent.getAttribute('data-md'));
fetch(request, {mode: 'cors'}).then(response => response.text()).then(data => {
insertData(data);
insertPagedJS();
});
});

</script>


<style type="text/css" media="screen">:root{--color-background:whitesmoke;--color-pageBox:#666;--color-paper:white;--color-marginBox:transparent}@media screen{body{background-color:var(--color-background)}.pagedjs_pages{display:flex;width:calc(var(--pagedjs-width) * 2);flex:0;flex-wrap:wrap;margin:0 auto}.pagedjs_page{background-color:var(--color-paper);box-shadow:0 0 0 1px var(--color-pageBox);margin:0;flex-shrink:0;flex-grow:0;margin-top:10mm}.pagedjs_first_page{margin-left:var(--pagedjs-width)}.pagedjs_page:last-of-type{margin-bottom:10mm}.pagedjs_margin-bottom,.pagedjs_margin-bottom-center,.pagedjs_margin-bottom-left,.pagedjs_margin-bottom-left-corner-holder,.pagedjs_margin-bottom-right,.pagedjs_margin-bottom-right-corner-holder,.pagedjs_margin-left,.pagedjs_margin-left-bottom,.pagedjs_margin-left-middle,.pagedjs_margin-left-top,.pagedjs_margin-right,.pagedjs_margin-right-bottom,.pagedjs_margin-right-middle,.pagedjs_margin-right-top,.pagedjs_margin-top,.pagedjs_margin-top-center,.pagedjs_margin-top-left,.pagedjs_margin-top-left-corner-holder,.pagedjs_margin-top-right,.pagedjs_margin-top-right-corner-holder{box-shadow:0 0 0 1px inset var(--color-marginBox)}}</style>
<style type="text/css">
@font-face {
font-family: "fesse";
src: url(Typefesse_Pleine.woff) format("woff");
src: url(Typefesse_Pleine.woff2) format("woff2");
}
@font-face {
font-family: "compagnon1";
src: url(Compagnon-Roman.woff) format("woff");
src: url(Compagnon-Roman.woff2) format("woff2");
}

</style>
<style>

@media print {
div.pagedjs_page{
background-image: url("https://i.ibb.co/c6d7zm7/page.jpg");
background-size: cover;

}
div.pagedjs_first_page{
background-image: url("https://i.ibb.co/BsZ14Ps/cov.jpg");

background-size: cover;

}

}
</style>
</head>
<body>


<div data-md="https://pads.erg.be/p/meremichel/export/txt" id="pad-content"></div>

</body>
</html>
</html></syntaxhighlight>

<br> Link texte : https://pads.erg.be/p/meremichel
<br> Link style : https://pads.erg.be/p/stylescss

Web2print 2021-2022

2021-12-17T13:45:52Z

Celia : /* Archives */

= Archives =

[[Ma nouvelle page]]

[[Amandine Alonso]]

[[Théophile Gervreau-Mercier]]

[[Elodie Goldberg Jacquemain]]

[[Audrey-2021-2022]]

[[Olivia Marly]]

[[Celia Sallet]]

= Sessions =

PAD du cours: https://pads.erg.be/p/dnum-web2print

==10 décembre==
Vous pouvez utilisez le serveur etherpad ici: https://pad.lvh2.com pour éviter les problèmes de requêtes.

===Version avec imposition===

Télécharger le fichier "imposition.js" ici: https://gitlab.pagedmedia.org/julientaq/hackathon-mars-2021/-/raw/master/imposition_quentin_juhel/js/imposition.js
Placer le fichier dans le même répertoire que le fichier ether2html.html

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ether2html</title>





<link href="https://pad.lvh2.com/p/ether2html_css/export/txt" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>

<script type="text/javascript" charset="utf-8">

let $padContent;
function insertData(data) {
console.log(data);
let converter = new showdown.Converter();
let html = converter.makeHtml(data);
$padContent.innerHTML = html;
}

function insertPagedJS(){
let $script = document.createElement('script');

$script.setAttribute('src', 'paged.polyfill.js');
$script.setAttribute('src', 'https://unpkg.com/pagedjs/dist/paged.polyfill.js');
window.PagedConfig = {auto: false};

$script.onload = (e) => {
let $impoScript = document.createElement('script');
$impoScript.setAttribute('src', 'imposition.js');
//ACTIVER LA LIGNE SUIVANTE POUR LANCER L'IMPOSITION
document.querySelector('head').appendChild($impoScript);
setTimeout(() => {
window.PagedPolyfill.preview();
}, 1000);

};

document.querySelector('head').appendChild($script);

}

window.addEventListener('DOMContentLoaded', function(){
$padContent = document.getElementById('pad-content');
let request = new URL($padContent.getAttribute('data-md'));
fetch(request).then(response => response.text()).then(data => {
console.log(data);
insertData(data);
insertPagedJS();
});
});

</script>


<style type="text/css" media="screen">:root{--color-background:whitesmoke;--color-pageBox:#666;--color-paper:white;--color-marginBox:transparent}@media screen{body{background-color:var(--color-background)}.pagedjs_pages{display:flex;width:calc(var(--pagedjs-width) * 2);flex:0;flex-wrap:wrap;margin:0 auto}.pagedjs_page{background-color:var(--color-paper);box-shadow:0 0 0 1px var(--color-pageBox);margin:0;flex-shrink:0;flex-grow:0;margin-top:10mm}.pagedjs_first_page{margin-left:var(--pagedjs-width)}.pagedjs_page:last-of-type{margin-bottom:10mm}.pagedjs_margin-bottom,.pagedjs_margin-bottom-center,.pagedjs_margin-bottom-left,.pagedjs_margin-bottom-left-corner-holder,.pagedjs_margin-bottom-right,.pagedjs_margin-bottom-right-corner-holder,.pagedjs_margin-left,.pagedjs_margin-left-bottom,.pagedjs_margin-left-middle,.pagedjs_margin-left-top,.pagedjs_margin-right,.pagedjs_margin-right-bottom,.pagedjs_margin-right-middle,.pagedjs_margin-right-top,.pagedjs_margin-top,.pagedjs_margin-top-center,.pagedjs_margin-top-left,.pagedjs_margin-top-left-corner-holder,.pagedjs_margin-top-right,.pagedjs_margin-top-right-corner-holder{box-shadow:0 0 0 1px inset var(--color-marginBox)}}</style>

</head>
<body>


<div data-md="https://pad.lvh2.com/p/ether2html_content/export/txt" id="pad-content"></div>

</body>
</html>
</syntaxhighlight>

==19 novembre==

Voici <strong>la nouvelle version</strong> purger de jquery d'<strong>ether2html</strong>, reconverti en Vanilla du coup.

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ether2html</title>





<link href="https://pads.erg.be/p/MAPK_css/export/txt" rel="stylesheet" text="text/css">



<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
<script type="text/javascript" charset="utf-8">

let $padContent;
function insertData(data) {

let converter = new showdown.Converter();
let html = converter.makeHtml(data);
$padContent.innerHTML = html;
}

function insertPagedJS(){
let $script = document.createElement('script');
// PLEASE NOTE THAT YOU CAN ALSO DOWNLOAD THE LIBRARIES FOR QUICKER OFFLINE USAGE
// $script.setAttribute('src', 'js/paged.polyfill.js');
$script.setAttribute('src', 'https://unpkg.com/pagedjs/dist/paged.polyfill.js');
document.querySelector('head').appendChild($script);
}

window.addEventListener('DOMContentLoaded', function(){
$padContent = document.getElementById('pad-content');
let request = new URL($padContent.getAttribute('data-md'));
fetch(request, {mode: 'cors'}).then(response => response.text()).then(data => {
insertData(data);
insertPagedJS();
});
});

</script>


<style type="text/css" media="screen">:root{--color-background:whitesmoke;--color-pageBox:#666;--color-paper:white;--color-marginBox:transparent}@media screen{body{background-color:var(--color-background)}.pagedjs_pages{display:flex;width:calc(var(--pagedjs-width) * 2);flex:0;flex-wrap:wrap;margin:0 auto}.pagedjs_page{background-color:var(--color-paper);box-shadow:0 0 0 1px var(--color-pageBox);margin:0;flex-shrink:0;flex-grow:0;margin-top:10mm}.pagedjs_first_page{margin-left:var(--pagedjs-width)}.pagedjs_page:last-of-type{margin-bottom:10mm}.pagedjs_margin-bottom,.pagedjs_margin-bottom-center,.pagedjs_margin-bottom-left,.pagedjs_margin-bottom-left-corner-holder,.pagedjs_margin-bottom-right,.pagedjs_margin-bottom-right-corner-holder,.pagedjs_margin-left,.pagedjs_margin-left-bottom,.pagedjs_margin-left-middle,.pagedjs_margin-left-top,.pagedjs_margin-right,.pagedjs_margin-right-bottom,.pagedjs_margin-right-middle,.pagedjs_margin-right-top,.pagedjs_margin-top,.pagedjs_margin-top-center,.pagedjs_margin-top-left,.pagedjs_margin-top-left-corner-holder,.pagedjs_margin-top-right,.pagedjs_margin-top-right-corner-holder{box-shadow:0 0 0 1px inset var(--color-marginBox)}}</style>

</head>
<body>


<div data-md="https://pads.erg.be/p/MAPK_markdown/export/txt" id="pad-content"></div>

</body>
</html>
</syntaxhighlight>

===> Aussi, il semble belle et bien que le <code>page-break-after</code> marche, du moins sur la première page:

dans le pad texte, après l'élement titre:
<syntaxhighlight lang="html">
<div class="pagebreak"></div>
</syntaxhighlight>

Et dans le Css:
<syntaxhighlight lang="css">
.pagebreak {
break-before: left;
}
</syntaxhighlight>

Il me semble qu'il faille crée quatre type de div qui font certain <code>page-break</code> et les utiliser en fonction des besoins.

==12 novembre==
'''ATTENTION! Nouvelle version du ether2html!!!'''
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ether2html</title>





<link href="https://pads.erg.be/p/manifesto.css/export/txt" rel="stylesheet" text="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf-8">
function run() {
let $padContent = document.getElementById('pad-content');
let converter = new showdown.Converter();
let html = converter.makeHtml($padContent.innerHTML);
$padContent.innerHTML = html;

}
$(document).ready(function(){
$("#pad-content").load($("#pad-content").attr("data-md"), function(){
run();
window.setTimeout(function(){
$.getScript("https://unpkg.com/pagedjs/dist/paged.polyfill.js", function(data, textStatus, jqxhr) {})
}, 2000);
});
});
</script>


<style type="text/css" media="screen">:root{--color-background:whitesmoke;--color-pageBox:#666;--color-paper:white;--color-marginBox:transparent}@media screen{body{background-color:var(--color-background)}.pagedjs_pages{display:flex;width:calc(var(--pagedjs-width) * 2);flex:0;flex-wrap:wrap;margin:0 auto}.pagedjs_page{background-color:var(--color-paper);box-shadow:0 0 0 1px var(--color-pageBox);margin:0;flex-shrink:0;flex-grow:0;margin-top:10mm}.pagedjs_first_page{margin-left:var(--pagedjs-width)}.pagedjs_page:last-of-type{margin-bottom:10mm}.pagedjs_margin-bottom,.pagedjs_margin-bottom-center,.pagedjs_margin-bottom-left,.pagedjs_margin-bottom-left-corner-holder,.pagedjs_margin-bottom-right,.pagedjs_margin-bottom-right-corner-holder,.pagedjs_margin-left,.pagedjs_margin-left-bottom,.pagedjs_margin-left-middle,.pagedjs_margin-left-top,.pagedjs_margin-right,.pagedjs_margin-right-bottom,.pagedjs_margin-right-middle,.pagedjs_margin-right-top,.pagedjs_margin-top,.pagedjs_margin-top-center,.pagedjs_margin-top-left,.pagedjs_margin-top-left-corner-holder,.pagedjs_margin-top-right,.pagedjs_margin-top-right-corner-holder{box-shadow:0 0 0 1px inset var(--color-marginBox)}}</style>




</head>
<body>


<div data-md="https://pads.erg.be/p/manifesto/export/txt" id="pad-content"></div>



</body>
</html>

</syntaxhighlight>

== 29 octobre ==
pdftohtml
Linux et windows
Mac: via Brew

Visual studio code: préférences - extentions - installer: encode decode
ctrl alt C: ouvre les commandes > Encode/decode convert

site expressions régulières : https://regex101.com/

Reset CSS

<syntaxhighlight lang="css">
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}</syntaxhighlight>

== Recette pour parser du html avec PHP ==
<syntaxhighlight lang="php">
<?php
$url = 'https://lyber.dansnoshistoires.org/spip.php?article29';

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$data = curl_exec($ch);
curl_close($ch);
//print_r($data);

$dom = new DomDocument();
$dom->loadHTML($data);

$contenu = $dom->getElementById('contenu');

print_r($contenu->C14N());

?>
</syntaxhighlight>
== 15 octobre ==
===Gutenberg to HTML===

* Télécharger l'outil [http://osp.kitchen/tools/ether2html/ ether2html] conçu par Open source publishing.
* Décompressez le dossier et déposez-le dossier à un endroit adéquat de votre ordinateur.
* Connectez vous à la bibliothèque libre de droit [https://www.gutenberg.org/ Gutenberg.org] et choisissez par groupe de 2 ou 3 un texte qui vous plait. Vu que les auteurs sont décédés depuis minimum 70 ans pour que leur œuvre entre dans le domaine public, il y a beaucoup de textes classiques, il y a des auteurs français même si la majorité sont en anglais. (voir [https://www.gutenberg.org/ebooks/bookshelf/313 ici la littérature française])
* Exemple: https://www.gutenberg.org/ebooks/26812
* Télécharger le code source html du texte que vous avez choisi.
* Ouvrez un pad quelque part pour le contenu (ex:https://pads.erg.be/) et copier/coller le contenu html de l'œuvre que vous avez choisie.
* Ouvrez un autre pad pour les CSS
* Editez le fichier ether2html.html en remplaçant l'URL sous le commentaire  par l'URL d'exportation du pad CSS que vous avez créé à l'étape 1, (c'est à dire l'url + export/txt à la fin) ou bien copiez l'emplacement du lien de l'exportation en texte brut du pad via le menu d'exportation.
* Modifiez le fichier ether2html.html en remplaçant l'URL sous le commentaire  par l'URL d'exportation du pad pour le contenu que vous avez créé à l'étape 2, (c'est à dire l'url + export/txt à la fin) ou bien copiez l'emplacement du lien de l'exportation en texte brut du pad via le menu d'exportation.

== 24 septembre ==

Recette pad to print:
<pre>
- 1 etherpad par groupe pour coder HTML + CSS : <https://pads.erg.be/p/html2print>
- ouvrir un terminal et lancer la commande:
while 1; do sleep 1; curl https://pads.erg.be/p/html2print/export/txt > index.html ; done
- Ouvrir Firefox
- Installer le plugin Auto reload: <https://addons.mozilla.org/fr/firefox/addon/auto-reload/>
- Ouvrir la page index.html créée dans votre "maison"
- Inspecteur web
</pre>

Quelques recettes Css:

- Clippy: http://bennettfeely.com/clippy/

- Filtres CSS: https://www.cssfiltergenerator.com/

- Générateur de css : https://cssgenerator.org/

[http://pratiquesnumeriques.be/web2print/first-demo.zip first demo]

==Références==

Présentation des outils web to print (Luus): [http://www.luuse.io/fig-ref/ Pourquoi utiliser des outils Web pour faire du print ?]

WCC: [https://www.w3.org/TR/css-page-3/ CSS print]

PAGED.JS [https://www.pagedjs.org/documentation/05-designing-for-print/ Documentation paged.js]

A propos des notes: [https://www.pagedjs.org/posts/2020-05-13-notes-about-notes/ Notes About Notes]

Utilisateur:Celia

2021-12-14T10:56:50Z

Celia : /* DESIGN NUMERIQUE 21/22 */

Utilisateur:Celia

Utilisateur:Celia

2021-03-12T13:53:04Z

Celia : /* INTERACTION AVEC UNE INTERFACE */

Utilisateur:Celia

2021-03-05T15:00:00Z

Celia : /* INTERACTION AVEC UNE INTERFACE */

Fichier:Note4.jpg

2021-03-05T14:59:18Z

Celia :