Laura Conant : /* 2EME SEMESTRE */

Utilisateur:Laura Conant

2020-05-01T12:40:31Z

Laura Conant : /* Vendredi 1er Mai */

=Scan to OCR=
==Comment une machine peut-elle reconnaître du texte==
==Traitement d'un PDF avec Tesseract==
===''Scans et sortie du texte''===
<br>
[[Fichier:Tesseract2.png|sans_cadre|500px|centré]]
<br>
[[Fichier:Tesseract.png|sans_cadre|500px|centré]]
<br>
[[Fichier:Senslecture.png|sans_cadre|500px|centré]]<br>
<br>
→ Sens de lecture opéré par Tesseract sur le document pdf.

<pre>
Hackers

ducers

as

Pro

Artists and hackers both represent contemporary
types of unconventional authorship. In their own
respective ways, they both appear as autonomous
producers and not as contractors. Their autonomy
is based on an aspiration towards individual freedom,
but they each justify this in completely different ways.
In an emphatic sense, freedom is the foundation of
an artist’s work. This freedom legitimates or even
demands a demiurgic act of positioning from which
the work then unfolds — and it justifies the close
relationship between “author” and “work”. In contrast,
a hacker begins by experiencing an absolute dearth
of freedom. His work unfolds while dealing with an

Felix Stalder

183
</pre>
<br>
<pre>
Texte entier tout pdf combinés :
omnipotent system! in which all options for action
are predetermined. The hacker’s goal is to seize hold
of moments of freedom anyway.

“Artists” and “hackers” are ideal types here,
conceptual abstractions. They were formed to make
certain contexts more tangible. In the following, the
focus will be directed towards the relationship be-
tween respective notions of freedom and social mecha-
nisms functioning within regimes of order.

The assumption that artists begin from a posi-
tion of complete freedom is a historical development
as a part of liberal concepts of freedom: Every man is
born in liberty, which is finally expressed by the stew-
ardship rights he has for his own body.’ This freedom
legitimates private property, understood as the fruits
of the labor performed by one’s own body. This con-
cept is directed against old forms of serfdom, bonded
labor and arbitrary disenfranchisement or taxation.
It re-oriented society away from the distribution of
goods based on privilege bestowed by a sovereign and
towards the production of goods by entrepreneurs;
their objectives were thus moved to the center of
society’s agenda. This concept of freedom as the point
of foundation for social interaction was essential for
the liberal understanding of the interrelated catego-
ries “individual” and “private property”.

1 Systems are integrated contexts of function. What functioning is
can be determined technically, culturally or institutionally.

2 John Locke’s (1632-1704) formulation of individual freedom as
determined by the stewardship over one’s own body is conceived of
from a clearly male perspective. Self-determination of a female body
is still, even in liberal societies, a question of debate.

184

In this cosmos, the artist represents the most radically
expressed form of an individual’s civil liberty. This
entity is then doubly privileged by the legal order:
on the one hand, by the legal establishment of the
freedom of art, which guarantees the artist’s freedom
to work;? on the other hand, by copyright law. This
allows him to enforce the claim of understanding his
work to be the product of his labor alone, and there-
fore his exclusive property. Historically, this allowed
the artist to exit from a dependency on commission-
ing entities and to engage an audience from an equal
position. It was an emancipatory act, no doubt. So

_ far, so good.

The clarity of these findings, as the political
scientist Christian Schmidt notes, “is disturbed by
the regime of property’s propensity to expand its area
of applicability”.* The property concept’s prerequi-
sites become problematic to the degree that forms of
ideas and free will become subject to capitalist pro-
duction, such as when youth culture is transformed
into products. The consequences of this expansion
are that “the clear separation between people and
property, or put differently, people’s autonomy is
questioned”.°

If a person constitutes himself or herself as the
sole active author, then others are forced into the role
of being a passive audience. As long as this is only done

3 Art. 21 of the Federal Constitution of the Swiss Confederation
determines: “The freedom of art is guaranteed.”

4 Schmidt, Christian: Individualitat und Eigentum. Zur Rekonstruktion
zweier Grundbegriffe der Moderne. Frankfurt am Main 2006, p. 13.

5 Ibid., p. 107.

185
�Media Hack
Lock Picking

Cb. ----— — 5

Hacker brechen Systeme auf und andern Regeln.

niert auch Kiinstlerinnen und Kiinstler, wie
Arbeiten von etoy, UBERMORGEN und der IMediengruppe
Bitnik zeigen. Texte von Raffael Dérig, Hannes Gassert,
Verena Kuni, Claus Pias und Felix Stalder.

Das faszi

stems and change rules. Artists are
as the work ofetoy, UBERMORGEN
tnik shows. Contributions by
ert, Verena Kuni, Claus Pias

Hackers break into sy
also fascinated by this,
and the !Mediengruppe Bi
Raffael Dérig, Hannes Gass
and Felix Stalder.

www.edition- digitalculture.ch

eww Ee LEIS

Script Kiddie
etc.

www.edition-digitalculture.ch | l | | il
</pre>

===''Poster 1''===
<br>
[[Fichier:Postergg-1.png|sans-cadre|centre|500px|]]
→ Mise en évidence du sens de lecture de Tesseract

[[Fichier:POSTER-1.jpg|sans-cadre|centre|500px|]]

[[Fichier:POSTER3-1.jpg|sans-cadre|centre|500px|]]

===''Poster 2''===

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<section data-type="page">
<section id="line">
<svg height="210" width="500">
<line x1="" y1="0" x2="240" y2="0" style="stroke:rgb(255, 0, 0);stroke-width:8" />
</svg>
</section>
<section id="line">
<svg height="210" width="500">
<line x1="150" y1="120" x2="240" y2="0" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line">
<svg height="210" width="500">
<line x1="150" y1="120" x2="149" y2="195" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line">
<svg height="210" width="500">
<line x1="150" y1="195" x2="-30000" y2="200" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line">
<svg height="210" width="500">
<line x1="243" y1="120" x2="240" y2="188" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line3">
<svg height="500" width="700">
<line x1="60" y1="230" x2="370" y2="373" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line2">
<svg height="300" width="600">
<line x1="1" y1="13" x2="241" y2="6" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line3">
<svg height="500" width="700">
<line x1="60" y1="230" x2="30" y2="483" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>

<section id="line4">
<svg height="500" width="700">
<line x1="4" y1="8" x2="1" y2="105" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line5">
<svg height="500" width="700">
<line x1="27" y1="8" x2="1" y2="65" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line5">
<svg height="500" width="700">
<line x1="280" y1="220" x2="1" y2="65" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line5">
<svg height="500" width="700">
<line x1="280" y1="220" x2="1" y2="238" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line5">
<svg height="600" width="700">
<line x1="1" y1="550" x2="1" y2="238" style="stroke:rgb(255,0,0);stroke-width:6" />
</svg>
</section>
<section id="line5">
<svg height="700" width="700">
<line x1="1" y1="550" x2="248" y2="660" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line5">
<svg height="700" width="700">
<line x1="1" y1="670" x2="248" y2="660" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line5">
<svg height="800" width="700">
<line x1="1" y1="670" x2="1" y2="700" style="stroke:rgb(255,0,0);stroke-width:6" />
</svg>
</section>
<section id="line6">
<svg height="700" width="700">
<line x1="1" y1="280" x2="1" y2="150" style="stroke:rgb(255,0,0);stroke-width:6" />
</svg>
</section>
<section id="line6">
<svg height="700" width="700">
<line x1="10" y1="290" x2="1" y2="280" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line6">
<svg height="700" width="700">
<line x1="10" y1="290" x2="280" y2="295" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line6">
<svg height="700" width="700">
<line x1="1" y1="340" x2="280" y2="295" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>
<section id="line6">
<svg height="700" width="700">
<line x1="1" y1="340" x2="255" y2="385" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</section>

<h1 class="h1" id="Media">
Media Hack<br>
Cb. ----— — 5<br>
Lock Picking
</h1>

<p class="p" id="order1">
Hacker brechen Systeme auf und andern Regeln.<br>
niert auch Kiinstlerinnen und Kiinstler, wie<br>
Arbeiten von etoy, UBERMORGEN und der IMediengruppe<br>
Bitnik zeigen. Texte von Raffael Dérig, Hannes Gassert,<br>
Verena Kuni, Claus Pias und Felix Stalder.<br>
</p>

<p class="p" id="order2">
Das faszi
</p>

<p class="p" id="order3">
stems and change rules. Artists are<br>
as the work ofetoy, UBERMORGEN<br>
tnik shows. Contributions by<br>
ert, Verena Kuni, Claus Pias<br>
</p>

<p class="p" id="order4">
Hackers break into sy<br>
also fascinated by this,<br>
and the !Mediengruppe Bi<br>
Raffael Dérig, Hannes Gass<br>
and Felix Stalder.<br>
</p>

<p class="p" id="order5">
www.edition- digitalculture.ch<br>

eww Ee LEIS<br>

Script Kiddie<br>
etc.<br>

www.edition-digitalculture.ch | l | | il<br>
</p>

<h1 class="h1"id="hackers">
Hackers
</h1>

<h1 class="h1" id="ducers">
ducers
</h1>

<h1 class="h1" id="as">

as
</h1>
<h1 class="h1" id="pro">
Pro
</h1>
<p class="p" id="order6">
Artists and hackers both represent contemporary
types of unconventional authorship. In their own
respective ways, they both appear as autonomous
producers and not as contractors. Their autonomy
is based on an aspiration towards individual freedom,
but they each justify this in completely different ways.
In an emphatic sense, freedom is the foundation of
an artist’s work. This freedom legitimates or even
demands a demiurgic act of positioning from which
the work then unfolds — and it justifies the close
relationship between “author” and “work”. In contrast,
a hacker begins by experiencing an absolute dearth
of freedom. His work unfolds while dealing with an
</p>

<h3 class="h3" id="felix">
Felix Stalder
</h3>

<p class="p" id="order7">
omnipotent system<span data-ref="1">!</span> in which all options for action
are predetermined. The hacker’s goal is to seize hold
of moments of freedom anyway.
</p>

<p class="p" id="order8">
“Artists” and “hackers” are ideal types here,
conceptual abstractions. They were formed to make
certain contexts more tangible. In the following, the
focus will be directed towards the relationship be-
tween respective notions of freedom and social mecha-
nisms functioning within regimes of order.
</p>

<p class="p" id="order9">
The assumption that artists begin from a posi-
tion of complete freedom is a historical development
as a part of liberal concepts of freedom: Every man is
born in liberty, which is finally expressed by the stew-
ardship rights he has for his own body.<span data-ref="2">’</span> This freedom
legitimates private property, understood as the fruits
of the labor performed by one’s own body. This con-
cept is directed against old forms of serfdom, bonded
labor and arbitrary disenfranchisement or taxation.
It re-oriented society away from the distribution of
goods based on privilege bestowed by a sovereign and
towards the production of goods by entrepreneurs;
their objectives were thus moved to the center of
society’s agenda. This concept of freedom as the point
of foundation for social interaction was essential for
the liberal understanding of the interrelated catego-
ries “individual” and “private property”.
</p>

<footer class="footer" id="footer1">
1 Systems are integrated contexts of function. What functioning is
can be determined technically, culturally or institutionally.
</footer>

<footer class="footer" id="footer2">
<span data-ref="2">2</span> John Locke’s (1632-1704) formulation of individual freedom as
determined by the stewardship over one’s own body is conceived of
from a clearly male perspective. Self-determination of a female body
is still, even in liberal societies, a question of debate.
</footer>

<p class="p" id="order10">
184
</p>

<p class="p" id="order11">
In this cosmos, the artist represents the most radically
expressed form of an individual’s civil liberty. This
entity is then doubly privileged by the legal order:
on the one hand, by the legal establishment of the
freedom of art, which guarantees the artist’s freedom
to work;<span data-ref="3">?</span> on the other hand, by copyright law. This
allows him to enforce the claim of understanding his
work to be the product of his labor alone, and there-
fore his exclusive property. Historically, this allowed
the artist to exit from a dependency on commission-
ing entities and to engage an audience from an equal
position. It was an emancipatory act, no doubt. So
</p>

<p class="p" id="order12">
_ far, so good.
</p>

<p class="p" id="order13">
The clarity of these findings, as the political
scientist Christian Schmidt notes, “is disturbed by
the regime of property’s propensity to expand its area
of applicability”.<span data-ref="4">*</span> The property concept’s prerequi-
sites become problematic to the degree that forms of
ideas and free will become subject to capitalist pro-
duction, such as when youth culture is transformed
into products. The consequences of this expansion
are that “the clear separation between people and
property, or put differently, people’s autonomy is
questioned”.<span data-ref="5">°</span>
</p>

<p class="p" id="order14">
If a person constitutes himself or herself as the
sole active author, then others are forced into the role
of being a passive audience. As long as this is only done
</p>

<p class="p" id="order15">
185
</p>

</section>

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

<syntaxhighlight lang="css">
@font-face{
font-family: 'Fakt';
src: url('fonts/FaktPro-Normal.otf');
font-weight: normal;
font-style: normal;
}

@font-face{
font-family: 'Fakt';
src: url('fonts/FaktPro-Bold.otf');
font-weight: bold;
font-style: normal;
}

html, body{
margin:0;
padding:0;
}

h1{
font-family: 'Fakt';
font-size: 50pt;
color:black;
margin:0;
line-height: 50pt;
}

h2{
font-family: 'Fakt';
color:black;
font-size:50pt;
margin:0;
}

h3{
font-family: 'Fakt';
color:black;
font-size:20pt;
margin:0;
}

footer{
font-family: 'Fakt';
font-size: 8pt;
color:black;
margin:0;
width: 70mm;

}

p{
position:relative;
font-size:10pt;
}

section[data-type="page"]{
width:297mm;
height:500mm;
position: relative;
padding:10mm;
box-sizing: border-box;
}

#Media{
position:absolute;
top:1mm;
font-size:70pt;
line-height: 20mm;

}

#felix{
position:absolute;
top:160mm;

}

#order1 {
position:absolute;
top:131mm;
font-family: 'Fakt';
line-height: normal;
color:black;
width: 14cm;
}

#order2 {
position:absolute;
top:60mm;
font-family: 'Fakt';
color:black;
width: 14mm;
}

#order3 {
font-family: 'Fakt';
color:black;
width: 66mm;
position: absolute;
top:66mm;
left:110mm;
}

#order4 {
position:absolute;
top:66mm;
font-family: 'Fakt';
color:black;
width: 65mm;
}

#order5 {
font-family: 'Fakt';
color:black;
width:74mm;
position: absolute;
top:388mm;
}

#order6 {
position: absolute;
top:170mm;
font-family: 'Fakt';
color:black;
text-align:justify;
width: 15cm;
}

#order7 {
position: absolute;
top:215mm;
font-family: 'Fakt';
color:black;
text-align:justify;
width: 15cm;
}

#order8 {
position: absolute;
top: 228mm;
font-family: 'Fakt';
color:black;
text-align:justify;
width: 15cm;
}

#order9 {
position: absolute;
top:248mm;
font-family: 'Fakt';
color:black;
text-align:justify;
width: 15cm;
}

#order10 {
font-family: 'Fakt';
color:black;
width:8mm;
position:absolute;
top:208mm;
left:29%;
}

#order11 {
position: absolute;
top:295mm;
font-family: 'Fakt';
color:black;
text-align:justify;
width: 15cm;
}

#order12 {
position: absolute;
font-family: 'Fakt';
color:black;
left:75mm;
top:325mm;
position:absolute;
width: 15cm;
}

#order13 {
position: absolute;
top:330mm;
font-family: 'Fakt';
color:black;
text-align:justify;
width: 15cm;
}

#order14 {
position: absolute;
top:360mm;
font-family: 'Fakt';
color:black;
text-align:justify;
width: 15cm;
}

#order15 {
font-family: 'Fakt';
color:black;
width:8mm;
width: 15cm;
position: absolute;
top:397mm;
left: 27%;
}

#footer1{
font-family: 'Fakt';
position:absolute;
top:377mm;
color:black;
}

#footer2{
font-family: 'Fakt';
color:black;
position:absolute;
left:87mm;
top:377mm;
}

#footer3{
font-family: 'Fakt';
color:black;
position:absolute;
left:10mm;
bottom:41mm;
}

#footer4{
font-family: 'Fakt';
color:black;
position:absolute;
left:87mm;
bottom:41mm;
}

#footer5{
font-family: 'Fakt';
color:black;
position:absolute;
left:95mm;
bottom:35mm;
}
#ducers{
position: absolute;
margin-left: 10cm;
top:95mm;
}

#pro{
position: absolute;
margin-left: 10cm;
top:115mm;
}

#hackers{
position: absolute;
top:95mm;
}

#as{
position: absolute;
top:115mm;
left:2cm;
}

#line{
position: absolute;
top:10mm;
left:10mm;
}
</syntaxhighlight>

===''Lecture par la machine''===

[[Fichier:Lecture3.gif|sans-cadre|centre|550px|]]

=2EME SEMESTRE=
==Interfaces privées et publiques (collaboratives?)==
Pour mon projet, cela m'intéresserait de travailler sur le développement d'une interface.<br>

Le contenu de ma bibliothèque est le même que le contenu de mon projet d'édition de typographie.<br>
Tout les textes et images parlent de notre représentations dans l'espace numérique.

===''IDENTITÉS VIRTUELLES, Les profils utilisateur du web 2.0''===
Mon texte principal est ''IDENTITÉS VIRTUELLES, Les profils utilisateur du web 2.0'' de
Fanny Georges

Dans ce texte, la question de l'interface est surtout abordé dans le chapitre 5, ''La métaphore du chez-soi''<br>
Voici quelques extraits qui m'inspire pour la conception de l'interface :
<pre>
Afin de simplifier la lisibilité des pages du profil, tout en confortant une impression de maîtrise des données personnelles, les interfaces de communication regroupent les informations par catégories et proposent différents onglets de consultation comme autant de parois, réfléchissantes ou transparentes.

La structuration de l’interface agence ainsi la circulation du regard. Transparence et opacité définissent l’économie de cette circulation.

Tour à tour consulter son propre profil public comme s’il était un visiteur, ou adopter une posture de construction de soi en consultant son profil depuis l’interface de gestion.

La structuration de l’interface entre espace personnel et espace partagé dessine les contours d’une intériorité et d’une extériorité, une maison dont les identifiants sont les clés.

Enfin, on remarque que les ouvertures peuvent porter sur des voisins ou des objets, qui apparaissent réduits ou fragmentés depuis l’intérieur de la maison. Il faut donc porter son attention sur la gradation de la visibilité, qui organise un espace privé et un espace partagé et sur la manifestation des autres.

Les informations, rendues visibles ou cachées aux regards, participent de la composition de cet espace en surface et profondeur.

La métaphore du chez-soi repose en partie sur la terminologie de la homepage.
</pre>

===Projet===

Une édition est un médium "figé", fini.<br>
La bibliothèque pirate permet de jouer avec une interface accessible par les autres (public) mais elle inclut aussi une interface privée (info accessible que par moi même, ou cachée ?).

Permettre collaboration sur la bibliothèque<br>
=> un livre qui sera par la suite réimprimée en plusieurs versions revus avec du nouveau contenu, ou alors une collection de revues sur les représentation numériques où chaque numéro qui sort = avec les nouveaux textes mis en ligne.
Tout les contenus sont cependant visibles sur le site ?<br>
Ou certains jour ou à chaque rafraîchissement de la page que quelques textes accessibles sur le site ? (de manière aléatoire?)<br>

=> réfléchir au design de l'interface en rapport avec interface publique/privée quand quelqu'un navigue sur le site de la bibliothèque, les informations que l'on veut montrer ou pas, est ce qu'une partie de l'interface est modifiable par son visiteur ?

=> question de la navigation dans l'interface ?

===Références de sites===
→ https://www.digitalcanon.nl/#list, http://yhsong.com/detail.html#Digital_Canon<br>
→ https://vimeo.com/381661479<br>
→ https://digi.gal/?fbclid=IwAR0NwqNYEmJ8YmMXyc-nRfwu8jDSnyGGh-YpPch1tyvv7VOvRIgq78-8tzI <br>
→ https://zisisphisix-blog.tumblr.com/?fbclid=IwAR0vP1UlAq1NJOUDwFi9jdPKOzQKWvgOiwYm4umFJkWWzzBxOi2pHqLs7Z8<br>
→ https://xpub.nl/#0/-140/45<br>
→ http://www.maximebouton.fr/dossiers/2019-2015_plenty_of_room/<br>
→ http://www.eidos.digital/?fbclid=IwAR3a1naLvoAYK21EFWbI8EjQEVz6GlCWMTp11505Y8fOqW-FiU18HwbnshA<br>
→ http://clusterduck.space/?fbclid=IwAR2xvrCMns6vbd4HhalOwY-X7Quhy7FPTPAp2K_lHLngaH2N1cXhtYR9LVo<br>
→ http://www.dictionaryofonlinebehavior.com/?fbclid=IwAR36VbqvsMvUpzzWgxYi9-a1wCP4sGiJ_LBvCjAeQ5tD14DiNxR52YcClIE<br>
→ http://www.differentrecordings.com/?fbclid=IwAR08EWf63dBwDoG9FdKsa-7PMakYIoW4W7iel5OZWzBmrpGlUmJIFovwnUo<br>
→ https://www.dropbox.com/s/j9e2za8ascvu5qc/bad-bonn_0.mp4?dl=0&fbclid=IwAR3H3D2cGyk3BN-3V9g_mCtm4_zuB9bRU4eUB-ROdFWrQc-8qs-I7HgFKf4<br>
→ http://www.florisschrama.nl/studio/ <br>
→ https://molonglo.com/tallbuildings/ <br>
→ http://yhsong.com/isia_wt_summerschool_archive/?fbclid=IwAR2CthKWK3PLOtm7r3TF4bolAWt2UYpFaBssgy5xgkVoz92mYk1xZ2epZ0Y <br>

Dématérialiser un livre :<br>
→ http://boook.land/?fbclid=IwAR10KWFp1mZW4Ek4asRtJwfEURCQ5-xKXfHlcxvpa9VBOw9I-dKoIu57y1U<br>
→ https://louisedrulhe.fr/internet-atlas/?fbclid=IwAR0PwNESg3YXp9UtXUl7q2ipabCPLiu4vWh5s84P13fp_yZ3uLSKuq-fxrg<br>
→ https://alexandrecadain.com/projects/we-humans<br>
→ https://thelabb.net<br>

===Essai html/css/javascript===
Essais de principes sur la transparences/apparition/disparition
====1====

<syntaxhighlight lang="html">
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bend</title>
<link rel="stylesheet" href="style.css" media="screen">
</head>
<body>
<div id="card">
<div class="front"></div>
<div class="back"></div>
</div>
<div id="card2">
<div class="front2"></div>
<div class="back2"></div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="css">
body{
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
perspective: 800px;
background: linear-gradient(rgb(150, 150, 150), 10%, g rgb(201, 201, 201))
}

#card{
position: absolute;
width: 600px;
height: 400px;
transform-style: preserve-3d;
transform: perspective(500px);
}

#card .front,
#card .back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

#card .front{
background: url(Capture\ d’écran\ 2020-03-24\ à\ 17.52.09.png);
background-size: cover;
}

#card .back{
background: url(Capture\ d’écran\ 2020-03-24\ à\ 17.52.30.png);
background-size: cover;
transform: rotateY(180deg);
transform: rotateX(180deg);
transform: rotateZ(180deg);
}

#card2{
position: absolute;
width: 600px;
height: 400px;
transform-style: preserve-3d;
transform: perspective(500px);
top: 200px;
}

#card2 .front2,
#card2 .back2{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

#card2 .front2{
background: url(Capture\ d’écran\ 2020-03-24\ à\ 17.52.30.png);
background-size: cover;
}

#card2 .back2{
background: url(Capture\ d’écran\ 2020-03-24\ à\ 17.52.09.png);
background-size: cover;
transform: rotateY(180deg);
transform: rotateX(180deg);
transform: rotateZ(180deg);
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
window.onload = function() {

document.onmousemove =function(e){
document.getElementById("card").style.transform = "rotateY(" + e.clientX + "1deg) rotateX(" + e.clientY + "1deg)";
document.getElementById("card2").style.transform = "rotateY(" + e.clientY + "1deg) rotateX(" + e.clientX + "1deg)";
}
}
</syntaxhighlight>

====2====

Simulation du code :
https://codepen.io/lauraconant/pen/XWbomGd

<syntaxhighlight lang="html">
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Superposition</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" media="screen">
<script type="text/javascript" src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="container" id="B">
<p>B B</p>
</div>

<div class="container" id="K">
<p>J J</p>
</div>
<div id="rotate">
<h3>Rotate</h3>
</div>
<div id="rotateback">
<h3>Rotate Back</h3>
</div>

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

<syntaxhighlight lang="css">
html, body{
margin: 0;
padding: 0;
height: 100%;
}

.container{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transition: 2s;
}

#R{
background-color: white;
transform: rotateY(0deg);
}
#B{

transform: rotateY(180deg);
}
#J{
background-color: blueviolet;
transform: rotateY(90deg);
}
#K{
/*background-color: olivedrab;*/
transform: rotateY(270deg);
}

#rotate{
position: fixed;
top: 0;
}

#rotateback{
position: fixed;
top: 0;
left: 1350px;
}

p{
padding: 0;
margin: 0;
padding-top: 160px;
font-family: sans-serif;
font-size: 300px;
}

h3{
position: absolute;
padding: 10px;
margin: 0;
font-family: sans-serif;
}

h3:hover{
color: orangered;
}
</syntaxhighlight>

<syntaxhighlight lang="javascript>
window.onload = function() {

document.getElementById("rotate").addEventListener("click", onclick);
document.getElementById("rotateback").addEventListener("click", onclick2);

function onclick(){
/*document.getElementById("R").style.transform = 'rotateY(180deg)';*/
document.getElementById("B").style.transform = 'rotateY(0deg)';
/*document.getElementById("J").style.transform = 'rotateY(270deg)';*/
document.getElementById("K").style.transform = 'rotateY(90deg)';
}

function onclick2(){
/*document.getElementById("R").style.transform = 'rotateY(0deg)';*/
document.getElementById("B").style.transform = 'rotateY(90deg)';
/*document.getElementById("J").style.transform = 'rotateY(90deg)';*/
document.getElementById("K").style.transform = 'rotateY(0deg)';
}

}
</syntaxhighlight>

====3====
<syntaxhighlight lang="html">
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>3D CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" media="screen">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<div class="container" id="R">
<p>R Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
<p>Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
<p>Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
<p>Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
</div>
<div class="container" id="B">
<p>B lamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
<p>Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
<p>Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
<p>Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
</div>
<div class="container" id="J">
<p>J Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
<p>Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
<p>Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
<p>Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
</div>
<div class="container" id="K">
<p>K Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
<p>Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
<p>Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
<p>Alamannorum tepore septies petit quorum caeli excursibus Constantius arma egressus moturus perferret arma fratres Caesaris Gallorum ter Gundomadum confines et septies Gundomadum suo reges limitibus oriens et petit et diu suo caeli et confines confines Valentiam moturus perferret ter terrae crebris Vadomarium moturus in reserato excursibus reges vastabantur moturus diu Valentiam Gallorum Constantius crebris oriens oriens in limitibus Arelate excursibus suo in suo quorum tepore oriens perferret fratres Valentiam dum petit diu arma Gallorum excursibus ter Valentiam confines limitibus diu caeli caeli egressus Valentiam confines Arelate caeli et consulatu crebris septies terrae egressus et egressus excursibus Gallorum suo moturus Vadomarium.</p>
</div>
</div>
<div id="rotateall">
<div id="rotate">
<h3>Rotate 1</h3>
</div>
<div id="rotate1">
<h3>Rotate 2</h3>
</div>
<div id="rotate2">
<h3>Rotate 3</h3>
</div>
<div id="rotate3">
<h3>Rotate 4</h3>
</div>
</div>

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

<syntaxhighlight lang="css">
html, body{
margin: 0;
padding: 0;
border: 0;
height: 100%;
}

.container{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transition: 2s;
top: 0px;

}

#R{
background-color: white;

transform: rotateY(0deg);
}
#R p{
color: blue;
}
#B{
background-color: white;

transform: rotateY(180deg);
}
#B p{
color: crimson;
}
#J{
background-color: white;

transform: rotateY(90deg);
}
#J p{
color: fuchsia;
}
#K{
background-color: white;

transform: rotateY(270deg);
}

#rotateall{
position: fixed;
}

#rotate{
position: fixed;
top: 0;
white-space: nowrap;
}

#rotate1{
position: fixed;
top: 0;
left: 1325px;
white-space: nowrap;
}

#rotate2{
position: fixed;
top: 700px;
white-space: nowrap;
}

#rotate3{
position: fixed;
top: 700px;
left: 1325px;
white-space: nowrap;
}

p{
padding-left: 50px;
padding-right: 50px;
margin-top: 200px;
font-family: sans-serif;
font-size: 20px;
}

h3{
position: absolute;
padding: 10px;
margin: 0;
font-family: sans-serif;
}

h3:hover{
color: orangered;
}
</syntaxhighlight>

<syntaxhighlight lang="javascript>
window.onload = function() {

document.getElementById("rotate").addEventListener("click", onclick);
document.getElementById("rotate1").addEventListener("click", onclick2);
document.getElementById("rotate2").addEventListener("click", onclick3);
document.getElementById("rotate3").addEventListener("click", onclick4);

function onclick(){
document.getElementById("R").style.transform = 'rotateY(90deg)';
document.getElementById("R").style.display = 'block';
document.getElementById("B").style.transform = 'rotateY(90deg)';
document.getElementById("B").style.display = 'block';
document.getElementById("J").style.transform = 'rotateY(180deg)';
document.getElementById("J").style.display = 'none';
document.getElementById("K").style.transform = 'rotateY(0deg)';
document.getElementById("K").style.display = 'block';
}

function onclick2(){
document.getElementById("R").style.transform = 'rotateY(180deg)';
/*document.getElementById("R").style.display = 'none';*/
document.getElementById("B").style.transform = 'rotateY(0deg)';
document.getElementById("B").style.display = 'block';
document.getElementById("J").style.transform = 'rotateY(90deg)';
document.getElementById("J").style.display = 'block';
document.getElementById("K").style.transform = 'rotateY(90deg)';
document.getElementById("K").style.display = 'block';
}

function onclick3(){
document.getElementById("R").style.transform = 'rotateY(270deg)';
document.getElementById("R").style.display = 'block';
document.getElementById("B").style.transform = 'rotateY(270deg)';
document.getElementById("B").style.display = 'block';
document.getElementById("J").style.transform = 'rotateY(0deg)';
document.getElementById("J").style.display = 'block';
document.getElementById("K").style.transform = 'rotateY(180deg)'
/*document.getElementById("K").style.display = 'none';*/
}

function onclick4(){
document.getElementById("R").style.transform = 'rotateY(0deg)';
document.getElementById("R").style.display = 'block';
document.getElementById("B").style.transform = 'rotateY(180deg)';
/*document.getElementById("B").style.display = 'none';*/
document.getElementById("J").style.transform = 'rotateY(270deg)';
document.getElementById("J").style.display = 'block';
document.getElementById("K").style.transform = 'rotateY(270deg)';
document.getElementById("K").style.display = 'block';
}
}
</syntaxhighlight>

====4====
<syntaxhighlight lang="hmtl">
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>1er essai</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" media="screen">
<script type="text/javascript" src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="container">
<p id="click">TRIGGER</p>
<img id="image" src="Capture d’écran 2020-01-14 à 15.24.47.png">
<img id="image2" src="Capture d’écran 2020-02-01 à 17.21.27.png">
<img id="image3" src="Capture d’écran 2020-02-04 à 10.52.38.png">
</div>
</body>
</html>
</syntaxhighlight>

<syntaxhighlight lang="css">
#container{
width: 100%;
height: 100%;
}

#image{
position: absolute;
width: 200px;
left: 640px;
top: 200px;
transition: 20s;
}
#image2{
position: absolute;
width: 200px;
left: 550px;
top: 170px;
transition: 20s;
}
#image3{
position: absolute;
width: 200px;
left: 700px;
top: 250px;
transition: 20s;
}

p{
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 12px;
margin-left: 50%;
margin-top: 10px;
}

#click:hover{
cursor: pointer;
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
window.onload = function() {

document.getElementById("click").addEventListener("click", onclick);

function onclick(){
document.getElementById("image").style.width = '700px';
document.getElementById("image").style.opacity = '0';
document.getElementById("image").style.left = '400px';
document.getElementById("image").style.top = '500px';

setTimeout(function image2(){
document.getElementById("image2").style.width = '700px';
document.getElementById("image2").style.left = '-100px';
document.getElementById("image2").style.opacity = '0';
}, 4000);

setTimeout(function image3(){
document.getElementById("image3").style.width = '700px';
document.getElementById("image3").style.opacity = '0';
document.getElementById("image3").style.left = '1000px';
document.getElementById("image3").style.top = '0px';
}, 8000);
}

}
</syntaxhighlight>

====5====
Essayer de travailler avec https://leafletjs.com pour essayer de reproduire l'effet de ce site : https://xpub.nl/#0/-128/128

====Vendredi 1er Mai====
=====Calculer le temps de lecture d'un texte=====
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css" media="screen">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="remaining-reading-time"></div>
<div id="container">
<p class="parent">
Les figures de l’imaginaire de l’existence informatisée, tel le cyborg1, ont été rejointes, avec les premiers réseaux, par les identités virtuelles. Produit du besoin, simplement humain, de s’identifier mutuellement, et de son équivalent technique, identifier les utilisateurs, naît la figure de l’avatar : double de l’écran, alter ego numérique, soi virtuel, projection numérique de l’identité personnelle. « Descente du ciel » (avatara en sanskrit), cette représentation de l’utilisateur a pour cause l’incompatibilité entre le Réseau et la matière du corps. Le dieu Vishnu s’incarne en ses avatars pour descendre sur terre et défendre les lois sacrées du Dharma ; de même, ce dispositif technique permet à l’utilisateur de s’incarner en un ailleurs, un second lieu de sociabilité. On pourrait penser que l’avatar est né d’un manque de communication en face à face. Mais la possibilité de se téléporter effacerait-elle le plaisir de chatter et de partager ses humeurs et ses photographies via Picasa ou Facebook ?
Les formes de communication en ligne qui ont émergé depuis quelques dizaines d’années ont reconfiguré le lien social et donné naissance à de nouvelles façons de penser. Internet et les Technologies de l’information et de la communication (TIC) produisent une socialisation mixte où la communication en face à face et la communication informatisée se complètent et s’hybrident progressivement.
La culture de l’identité en ligne a changé depuis les premières communautés virtuelles, passant du paradigme utopique du « village planétaire » à des positions plus pragmatiques, des stratégies de compromis entre la crainte du traçage par le « système » et le désir de manifester son existence.
L’âge contemporain de la soft(-ware) idéologie2 débute en France dans les années 80 : l’arrivée conjointe du Minitel, de l’ordinateur personnel, des radios libres et des télévisions commerciales s’inscrit dans un hymne général à la communication, et produit un discours médiatique sur l’informatique comme technologie sociale. « L’utopie de la communication » célèbre le lien, l’ouverture et la circulation, la transparence, la convivialité et le ludisme3. Patrice Flichy, dans L’Imaginaire d’Internet, montre comment le Réseau est devenu, au milieu des années 90, un thème omniprésent dans les médias, la politique, l’édition et la société. Les gouvernements, les sociétés commerciales et industrielles pensent de nouvelles formes d’organisation inspirées des systèmes informatiques4.
</p>
<p class="parent" id="text2">
La nouvelle Représentation de soi, composée d’un pseudonyme, d’une image et des interventions écrites dans le canal de chat des premières communautés ircéennes (c’est-à-dire utilisant l’IRC, Inter net relay chat)5, est devenue aujourd’hui un vaste système informationnel composé de multiples applications : compte e-mail, compte Facebook, compte de messagerie instantanée. Si les premières représentations de l’utilisateur du Minitel ou de l’IRC sont plutôt rudimentaires, elles amorcent un processus d’augmentation de l’identité par la technique.
À mesure que les usages des TIC s’installent dans la vie quotidienne, le phénomène de la numérisation des identités des utilisateurs présente de nouveaux enjeux économiques pour les entreprises. Internet devient le lieu d’observation personnelles font l’objet de modèles de rentabilité. Les informations personnelles délivrées par les utilisateurs lors de l’inscription à un compte sont autant les pratiques de consommation qui intéressent les entreprises. Les promesses séduisantes de rencontres virtuelles, de retrouvailles avec les amis d’enfance, de réseautage, en un mot d’augmentation de la communication humaine, se fondent sur la rentabilité des traces laissées par les visiteurs. Les utilisateurs souhaitant valoriser leur site personnel s’engagent dans des stratégies d’« incitation au clic ».
</p>
<p class="parent" id="text2">
La nouvelle Représentation de soi, composée d’un pseudonyme, d’une image et des interventions écrites dans le canal de chat des premières communautés ircéennes (c’est-à-dire utilisant l’IRC, Inter net relay chat)5, est devenue aujourd’hui un vaste système informationnel composé de multiples applications : compte e-mail, compte Facebook, compte de messagerie instantanée. Si les premières représentations de l’utilisateur du Minitel ou de l’IRC sont plutôt rudimentaires, elles amorcent un processus d’augmentation de l’identité par la technique.
À mesure que les usages des TIC s’installent dans la vie quotidienne, le phénomène de la numérisation des identités des utilisateurs présente de nouveaux enjeux économiques pour les entreprises. Internet devient le lieu d’observation personnelles font l’objet de modèles de rentabilité. Les informations personnelles délivrées par les utilisateurs lors de l’inscription à un compte sont autant les pratiques de consommation qui intéressent les entreprises. Les promesses séduisantes de rencontres virtuelles, de retrouvailles avec les amis d’enfance, de réseautage, en un mot d’augmentation de la communication humaine, se fondent sur la rentabilité des traces laissées par les visiteurs. Les utilisateurs souhaitant valoriser leur site personnel s’engagent dans des stratégies d’« incitation au clic ».

</p>
</div>

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

<syntaxhighlight lang="css">
html, body{
margin: 0;
padding: 0;
height: 100%;
background-color: rgb(235, 235, 235);
}

p{
padding: 0;
margin: 0;
}

#demo{
padding: 30px;
padding-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}

.parent{
font-size: 42px;
padding: 30px;
padding-bottom: 0;
padding-right: 150px;
line-height: 50px;
font-family: Arial, Helvetica, sans-serif;
}

#text2{
padding-top: 0;
}

span:hover {
cursor: pointer;
color: orangered;
}

.dont-say-me-you-never-saw-this-one-dude {
color:orangered;
}

#remaining-reading-time {
position: fixed;
top: 0;
right: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 42px;
padding: 20px;
}
</syntaxhighlight>

<syntaxhighlight lang="javascript>
window.onload = function () {

const reading_speed = 200; // words per minutes

const elements = document.getElementsByClassName('parent');

for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = elements[i].innerText.replace(/([^\s]+)/g, '<span>$1</span>');
}

const spans = document.getElementsByTagName('span');

let remaining_words = spans.length;
let remaining_reading_time_in_seconds = (remaining_words / reading_speed) * 60;
let humanReadableTime = getHumanReadableTime(remaining_reading_time_in_seconds);
document.getElementById('remaining-reading-time').innerText = humanReadableTime;

document.addEventListener('scroll', function (event) {
console.log('Tu me scrolles ici :', event.target);
remaining_words = spans.length;
for (var i = 0; i < spans.length; i++) {
if (spans[i].getBoundingClientRect().top < -42) {
spans[i].classList.add('dont-say-me-you-never-saw-this-one-dude');
remaining_words--;
}
}
remaining_reading_time_in_seconds = (remaining_words / reading_speed) * 60;
let humanReadableTime = getHumanReadableTime(remaining_reading_time_in_seconds);
document.getElementById('remaining-reading-time').innerText = humanReadableTime;
}, true);

}

function getHumanReadableTime(total_seconds) {

total_seconds = Math.trunc(total_seconds);

let total_days = Math.trunc(total_seconds / (3600 * 24));
let total_hours = Math.trunc(total_seconds / 3600);
let total_minutes = Math.trunc(total_seconds / 60);

let seconds = total_seconds - (total_minutes * 60);
let minutes = total_minutes - (total_hours * 60);
let hours = total_hours - (total_days * 24);

humanReadableTime = '';
if (total_days > 0) {
humanReadableTime += total_days + ':'
}
if (total_hours > 0) {
humanReadableTime += hours + ':'
}
if (total_minutes > 0) {
humanReadableTime += minutes + ':'
}
if (total_seconds > 0) {
humanReadableTime += seconds
}

return humanReadableTime;
}
</syntaxhighlight>

=====Récupérer la vitesse de scroll=====

<syntaxhighlight lang=html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style2.css" media="screen">
<script type="text/javascript" src="scrollspeed.js"></script>
</head>
<body>
<div id="scrolling"></div>
<p class="parent">
Les figures de l’imaginaire de l’existence informatisée, tel le cyborg1, ont été rejointes, avec les premiers réseaux, par les identités virtuelles. Produit du besoin, simplement humain, de s’identifier mutuellement, et de son équivalent technique, identifier les utilisateurs, naît la figure de l’avatar : double de l’écran, alter ego numérique, soi virtuel, projection numérique de l’identité personnelle. « Descente du ciel » (avatara en sanskrit), cette représentation de l’utilisateur a pour cause l’incompatibilité entre le Réseau et la matière du corps. Le dieu Vishnu s’incarne en ses avatars pour descendre sur terre et défendre les lois sacrées du Dharma ; de même, ce dispositif technique permet à l’utilisateur de s’incarner en un ailleurs, un second lieu de sociabilité. On pourrait penser que l’avatar est né d’un manque de communication en face à face. Mais la possibilité de se téléporter effacerait-elle le plaisir de chatter et de partager ses humeurs et ses photographies via Picasa ou Facebook ?
Les formes de communication en ligne qui ont émergé depuis quelques dizaines d’années ont reconfiguré le lien social et donné naissance à de nouvelles façons de penser. Internet et les Technologies de l’information et de la communication (TIC) produisent une socialisation mixte où la communication en face à face et la communication informatisée se complètent et s’hybrident progressivement.
La culture de l’identité en ligne a changé depuis les premières communautés virtuelles, passant du paradigme utopique du « village planétaire » à des positions plus pragmatiques, des stratégies de compromis entre la crainte du traçage par le « système » et le désir de manifester son existence.
L’âge contemporain de la soft(-ware) idéologie2 débute en France dans les années 80 : l’arrivée conjointe du Minitel, de l’ordinateur personnel, des radios libres et des télévisions commerciales s’inscrit dans un hymne général à la communication, et produit un discours médiatique sur l’informatique comme technologie sociale. « L’utopie de la communication » célèbre le lien, l’ouverture et la circulation, la transparence, la convivialité et le ludisme3. Patrice Flichy, dans L’Imaginaire d’Internet, montre comment le Réseau est devenu, au milieu des années 90, un thème omniprésent dans les médias, la politique, l’édition et la société. Les gouvernements, les sociétés commerciales et industrielles pensent de nouvelles formes d’organisation inspirées des systèmes informatiques4.
</p>
<p class="parent" id="text2">
La nouvelle Représentation de soi, composée d’un pseudonyme, d’une image et des interventions écrites dans le canal de chat des premières communautés ircéennes (c’est-à-dire utilisant l’IRC, Inter net relay chat)5, est devenue aujourd’hui un vaste système informationnel composé de multiples applications : compte e-mail, compte Facebook, compte de messagerie instantanée. Si les premières représentations de l’utilisateur du Minitel ou de l’IRC sont plutôt rudimentaires, elles amorcent un processus d’augmentation de l’identité par la technique.
À mesure que les usages des TIC s’installent dans la vie quotidienne, le phénomène de la numérisation des identités des utilisateurs présente de nouveaux enjeux économiques pour les entreprises. Internet devient le lieu d’observation personnelles font l’objet de modèles de rentabilité. Les informations personnelles délivrées par les utilisateurs lors de l’inscription à un compte sont autant les pratiques de consommation qui intéressent les entreprises. Les promesses séduisantes de rencontres virtuelles, de retrouvailles avec les amis d’enfance, de réseautage, en un mot d’augmentation de la communication humaine, se fondent sur la rentabilité des traces laissées par les visiteurs. Les utilisateurs souhaitant valoriser leur site personnel s’engagent dans des stratégies d’« incitation au clic ».
</p>
<p class="parent" id="text2">
La nouvelle Représentation de soi, composée d’un pseudonyme, d’une image et des interventions écrites dans le canal de chat des premières communautés ircéennes (c’est-à-dire utilisant l’IRC, Inter net relay chat)5, est devenue aujourd’hui un vaste système informationnel composé de multiples applications : compte e-mail, compte Facebook, compte de messagerie instantanée. Si les premières représentations de l’utilisateur du Minitel ou de l’IRC sont plutôt rudimentaires, elles amorcent un processus d’augmentation de l’identité par la technique.
À mesure que les usages des TIC s’installent dans la vie quotidienne, le phénomène de la numérisation des identités des utilisateurs présente de nouveaux enjeux économiques pour les entreprises. Internet devient le lieu d’observation personnelles font l’objet de modèles de rentabilité. Les informations personnelles délivrées par les utilisateurs lors de l’inscription à un compte sont autant les pratiques de consommation qui intéressent les entreprises. Les promesses séduisantes de rencontres virtuelles, de retrouvailles avec les amis d’enfance, de réseautage, en un mot d’augmentation de la communication humaine, se fondent sur la rentabilité des traces laissées par les visiteurs. Les utilisateurs souhaitant valoriser leur site personnel s’engagent dans des stratégies d’« incitation au clic ».

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

<syntaxhighlight lang="css">
body{ height:10000px; }

#scrolling {
position: fixed;
top: 0;
right: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 42px;
padding: 20px;
}

.parent{
font-size: 42px;
padding: 30px;
padding-bottom: 0;
padding-right: 150px;
line-height: 50px;
font-family: Arial, Helvetica, sans-serif;
}
</syntaxhighlight>

<syntaxhighlight lang="javascript>
var checkScrollSpeed = (function(settings) {
settings = settings || {};

var lastPos, newPos, timer, delta,
delay = settings.delay || 50; // in "ms" (higher means lower fidelity )

function clear() {
lastPos = null;
delta = 0;
}

clear();

return function(){
newPos = window.scrollY;
if ( lastPos != null ){ // && newPos < maxScroll
delta = newPos - lastPos;
}
lastPos = newPos;
clearTimeout(timer);
timer = setTimeout(clear, delay);
return delta;
};
})();

// listen to "scroll" event
window.onscroll = function(){
document.getElementById('scrolling').innerText = checkScrollSpeed();
};

window.onload = function() {
document.getElementById('scrolling').innerText = checkScrollSpeed();
}

</syntaxhighlight>

Le but est de recalculer le temps de lecture d'un texte en fonction de la vitesse de scroll de la personne.<br>
Il s'agit donc d'établir quand est ce que la personne est entrain de lire, ou juste de scroller vite en bas ou en haut de la page.<br>
Après avoir tester de faire lire le texte à plusieurs personnes, la vitesse de lecture se situe entre 1 et 7 selon le script.<br>

Utilisateur:Laura Conant

2020-05-01T12:38:31Z

Laura Conant : /* Vendredi 1er Mai */

Utilisateur:Laura Conant

2020-05-01T12:35:57Z

Laura Conant : /* Essai html/css/javascript */

Utilisateur:Laura Conant

2020-03-13T13:17:37Z

Laura Conant : /* Interfaces privées et publiques (collaboratives?) */