Design numérique - Contributions [fr]

Imposition 2-up

2022-12-20T22:08:24Z

Svilayphiou :

À utiliser dans une mise en page type paged.js.
Attention, pour octomode, prendre l'URL de l'iframe où se trouve réellement les pages!
Copier/coller le tout dans la Console de l'Inspecteur d'élément.

<syntaxhighlight lang="javascript">
// on met le div pagedjs_page en "display:flex" pour pouvoir changer l'ordre des pages
container = document.getElementsByClassName("pagedjs_pages")[0];
container.style.display = "flex";

// on enlève la marge de gauche de la première page
firstpage = document.getElementsByClassName("pagedjs_first_page")[0];
firstpage.style.marginLeft = 0;

// on récupère les pages du document dans un Array
pages = [].slice.call(document.getElementsByClassName("pagedjs_page"));
// on enregiste le nombre de pages total dans une variable
nb_pages = pages.length;

// on crée un Array vide qui accueillera les pages dans le nouvel ordre d'imposition
new_pages = []

// on enregistre dans un nouvel Array à chaque fois la dernière et première page, puis la première et dernière page, et on les enlève de la liste initiale de pages.
for(p = 0; p < nb_pages; p++){
if(p%2) {
new_pages.push(pages[0]);
pages.shift();
new_pages.push(pages[pages.length - 1]);
pages.pop();
} else {
new_pages.push(pages[pages.length - 1]);
pages.pop();
new_pages.push(pages[0]);
pages.shift();
}

}

// On applique en CSS l'ordre des pages de la nouvelle liste de pages
for (p=0; p < new_pages.length; p++) {
new_pages[p].style.order = p;
}

</syntaxhighlight>

mode Bonus où on peut choisir le nombre de pages par cahier au début du script:

<syntaxhighlight lang="javascript">

nb_pages_cahier = 16

// on met le div pagedjs_page en "display:flex" pour pouvoir changer l'ordre des pages
container = document.getElementsByClassName("pagedjs_pages")[0];
container.style.display = "flex";

// on enlève la marge de gauche de la première page
firstpage = document.getElementsByClassName("pagedjs_first_page")[0];
firstpage.style.marginLeft = 0;

// on récupère les pages du document dans un Array
pages = [].slice.call(document.getElementsByClassName("pagedjs_page"));
console.log(pages);
// on enregiste le nombre de pages total dans une variable
nb_pages = pages.length;

// on crée un Array vide qui accueillera les pages dans le nouvel ordre d'imposition
new_pages = []

// on enregistre dans un nouvel Array à chaque fois la dernière et première page, puis la première et dernière page, et on les enlève de la liste initiale de pages.
nb_cahiers = Math.ceil(nb_pages / nb_pages_cahier);
for(c = 1; c <= nb_cahiers; c++){
cahier = pages.splice(0, nb_pages_cahier);

for(p = 0; p < nb_pages_cahier/2; p++){

if(p%2) {
new_pages.push(cahier[0]);
cahier.shift();

new_pages.push(cahier[cahier.length - 1]);
cahier.pop();

} else {
new_pages.push(cahier[cahier.length - 1]);
cahier.pop();
new_pages.push(cahier[0]);
cahier.shift();

}
}
}
// On applique en CSS l'ordre des pages de la nouvelle liste de pages
for (p=0; p < new_pages.length; p++) {
new_pages[p].style.order = p;
}
</syntaxhighlight>

Imposition 2-up

2022-12-20T20:55:20Z

Svilayphiou :

Imposition 2-up

2022-12-20T20:51:54Z

Svilayphiou :

À utiliser dans une mise en page type paged.js.
Attention, pour octomode, prendre l'URL de l'iframe où se trouve réellement les pages!
Copier/coller le tout dans la Console de l'Inspecteur d'élément.

<syntaxhighlight lang="javascript">
container = document.getElementsByClassName("pagedjs_pages")[0];
container.style.display = "flex";

// on enlève la marge de gauche de la première page
firstpage = document.getElementsByClassName("pagedjs_first_page")[0];
firstpage.style.marginLeft = 0;

// on met le div pagedjs_page en "display:flex" pour pouvoir changer l'ordre des pages
pages = [].slice.call(document.getElementsByClassName("pagedjs_page"));
nb_pages = pages.length;

new_pages = []

// on enregistre dans un nouvel Array à chaque fois la première page, la dernière page, et on les enlève de la première liste de pages.
for(p = 0; p < nb_pages; p++){
if(p%2) {
new_pages.push(pages[0]);
pages.shift();
new_pages.push(pages[pages.length - 1]);
pages.pop();
} else {
new_pages.push(pages[pages.length - 1]);
pages.pop();
new_pages.push(pages[0]);
pages.shift();
}

}

// On applique en CSS l'ordre des pages de la nouvelle liste de pages
for (p=0; p < new_pages.length; p++) {
new_pages[p].style.order = p;
}

</syntaxhighlight>

Imposition 2-up

2022-12-16T14:40:47Z

Svilayphiou :

<syntaxhighlight lang="javascript">
container = document.getElementsByClassName("pagedjs_pages")[0];
container.style.display = "flex";

// on enlève la marge de gauche de la première page
firstpage = document.getElementsByClassName("pagedjs_first_page")[0];
firstpage.style.marginLeft = 0;

// on met le div pagedjs_page en "display:flex" pour pouvoir changer l'ordre des pages
pages = [].slice.call(document.getElementsByClassName("pagedjs_page"));
nb_pages = pages.length;

new_pages = []

// on enregistre dans un nouvel Array à chaque fois la première page, la dernière page, et on les enlève de la première liste de pages.
for(p = 0; p < nb_pages; p++){
new_pages.push(pages[0]);
pages.shift();
new_pages.push(pages[pages.length - 1]);
pages.pop();

}

// On applique en CSS l'ordre des pages de la nouvelle liste de pages
for (p=0; p < new_pages.length; p++) {
new_pages[p].style.order = p;
}
</syntaxhighlight>

Imposition 2-up

2022-12-16T14:40:12Z

Svilayphiou : Page créée avec « container = document.getElementsByClassName("pagedjs_pages")[0]; container.style.display = "flex"; <syntaxhighlight lang="javascript"> // on enlève la marge de gauche d... »

container = document.getElementsByClassName("pagedjs_pages")[0];
container.style.display = "flex";

<syntaxhighlight lang="javascript">
// on enlève la marge de gauche de la première page
firstpage = document.getElementsByClassName("pagedjs_first_page")[0];
firstpage.style.marginLeft = 0;

// on met le div pagedjs_page en "display:flex" pour pouvoir changer l'ordre des pages
pages = [].slice.call(document.getElementsByClassName("pagedjs_page"));
nb_pages = pages.length;

new_pages = []

// on enregistre dans un nouvel Array à chaque fois la première page, la dernière page, et on les enlève de la première liste de pages.
for(p = 0; p < nb_pages; p++){
new_pages.push(pages[0]);
pages.shift();
new_pages.push(pages[pages.length - 1]);
pages.pop();

}

// On applique en CSS l'ordre des pages de la nouvelle liste de pages
for (p=0; p < new_pages.length; p++) {
new_pages[p].style.order = p;
}
</syntaxhighlight>

DESIGN NUMERIQUE

2022-12-16T14:37:36Z

Svilayphiou : /* Cours commun B2->M2: */

= Description générale du cours =

L’orientation « Design numérique » propose d’explorer
les modes de création graphiques et de diffusion en milieux numériques en apprivoisant les
outils de production digitaux en « les pratiquant » ou autrement dit en « faisant avec ». Il vise
à mettre l’accent sur les formes éditoriales (au sens large) qui se frottent aux outils
numériques et aux media, ces formes de publications pouvant avoir plusieurs statuts, non
seulement celui de flux digitaux, de formes stables imprimées ou d’hybrides, elles peuvent
s’inscrire dans un espace virtuel, ou dans des espaces physiques.
Pour ce faire, le cours propose entre autres de développer des pratiques favorisant le
détournement, le hacking et la poésie, la magie et les recettes, et parfois la lenteur et la
maladresse. Enfin, il propose d'analyser dans les entrailles des objets et système digitaux leur
enjeux politiques, économiques, anthropologiques et historiques — autrement dit, des enjeux
de design.

= L'orientation =

== [[B1 2022-2023|B1]] ==

== [[B2-B3 2022-2023|B2-B3]] ==

== [[M1-M2 2022-2023|M1-M2]] ==

== Cours commun B2->M2: ==
* [[Serveur de publications]]
* [[The Brain aka serveur linux]]
* [[Reverse tunneling pour The Brain]]
* [[Imposition 2-up]]: imposer un document paged js pour imprimer un livret A5 sur du A4

== Horaires Q1 ==
* '''B1''': cours module avec Stéphanie Villayphiou le '''jeudi de 14 à 17h'''
* '''B2-B3''': cours avec Lionel Maes le '''vendredi de 10h à 13h'''
* '''M1-M2''':cours avec Alexia de Visscher le '''jeudi de 13h à 16h'''
* '''B2-B3/M1-M2''': cours avec L. Maes, S. Villayphiou et A. de Visscher le '''vendredi de 14h à 17h'''

== les pads 22-23 ==
* [https://pads.erg.be/p/DN-master-22-23 Masters]

* [https://pads.erg.be/p/DN-vendredi-22-23 B2-M2] (cours du vendredi après-midi)

== Documentation ==
* [[Cheatsheet MediaWiki]]
* [[Cheatsheet Git]]
* [[Mise en place terminal, git, homebrew sur MACOS]]
* [[The Brain aka serveur linux|Terminal et SHELL]]