Commit af865ff2 authored by Étienne Oz's avatar Étienne Oz 🖖

NOUVELLES VERSION

parent e1d4a8a8
......@@ -67,8 +67,8 @@ detournement dans le Web
## Texte
Workshop by Étienne Ozeray & Romain Marula
DEViation is an Print tool in the web navigator proposed for prepostprint.
Use-it pads and give an preview in real time of a double page. Doesn't work only Chrome or Chromium.
DEViation is an Print tool in the web navigator proposed for prepostprint.
Use-it pads and give an preview in real time of a double page. Doesn't work only Chrome or Chromium.
DEViation est un outil de mise en page de documents imprimés collaboratif dans le navigateur web. Il utilise des pads sur lesquels il est possible d'éditer le css à partir http://prepostprint.org/deviation et permet une prévisualisation en temps réel de la double-page. Chaque participant est invité à modifier, s'approprier la mise en page existante.
......
@media print {
@page {
size: A4 !important;
}
@page :left {
margin: 0 !important;
padding: 0 !important;
}
@page :right {
margin: 0 !important;
padding: 0 !important;
}
body{
outline: none;
}
*{
page-break-after: avoid;
}
}
body{
position: absolute;
width: 21cm;
height: 29.7cm;
background: white;
margin: 0;
padding: 0;
overflow: hidden;
}
<style media="screen, print">
body{
margin: 0;
padding: 0;
}
@page{
size: A4 !important;
margin: 0;
padding: 0;
}
iframe{
width: 20.95cm;
height: 29.7cm;
margin-top: 1.1cm;
border: 1px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.pages{
margin: 1cm;
}
.pages:nth-of-type(even) iframe{
/*margin-right: 1.5cm;*/
}
.pages:nth-of-type(odd) iframe{
/*margin-left: 1.5cm;*/
}
.pageG,
.pageD{
-webkit-page-break-after: always;
page-break-after: always;
width: 21cm;
height: 29.7cm;
}
.pageG:nth-of-type(1){
/*display: none;*/
}
.cropTop,
.cropBottom{
display: none;
position: absolute;
width: 19.5cm;
height: 0.3cm;
margin-right: 1.5cm;
border-left: 0.05cm solid black;
border-right: 0.05cm solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.cropLeft,
.cropRight{
display: none;
position: absolute;
width: 0.3cm;
height: 27.5cm;
margin-top: 1.1cm;
border-top: 0.05cm solid black;
border-bottom: 0.05cm solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.cropTop{
margin-top: 0.5cm;
}
.cropBottom{
margin-top: 0.3cm;
}
.pages:nth-of-type(odd) .cropBottom,
.pages:nth-of-type(odd) .cropTop{
left: 1.5cm;
}
.cropLeft{
margin-left: 0.8cm;
}
.cropRight{
margin-left: 19.8cm;
}
</style>
<style media="print">
iframe{
border: none;
}
.pageG,
.pageD,
iframe{
margin: 0cm;
padding: 0cm;
}
</style>
<div class="pageG pages">
<div class="cropTop"></div>
<div class="cropLeft"></div>
<iframe class="page gauche" src="pages.php%3Fslug=1_couv&amp;reload=off&amp;page=gauche&amp;rand=159.html"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageD pages">
<div class="cropTop"></div>
<div class="cropRight"></div>
<iframe class="page droite" src="pages.php%3Fslug=1_couv&amp;reload=off&amp;page=droite&amp;rand=159.html"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageG pages">
<div class="cropTop"></div>
<div class="cropLeft"></div>
<iframe class="page gauche" src="pages.php%3Fslug=content1&amp;reload=off&amp;page=gauche&amp;rand=1767.html"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageD pages">
<div class="cropTop"></div>
<div class="cropRight"></div>
<iframe class="page droite" src="pages.php%3Fslug=content1&amp;reload=off&amp;page=droite&amp;rand=1767.html"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageG pages">
<div class="cropTop"></div>
<div class="cropLeft"></div>
<iframe class="page gauche" src="pages.php%3Fslug=content2&amp;reload=off&amp;page=gauche&amp;rand=9311.html"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageD pages">
<div class="cropTop"></div>
<div class="cropRight"></div>
<iframe class="page droite" src="pages.php%3Fslug=content2&amp;reload=off&amp;page=droite&amp;rand=9311.html"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageG pages">
<div class="cropTop"></div>
<div class="cropLeft"></div>
<iframe class="page gauche" src="pages.php%3Fslug=content3&amp;reload=off&amp;page=gauche&amp;rand=220.html"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageD pages">
<div class="cropTop"></div>
<div class="cropRight"></div>
<iframe class="page droite" src="pages.php%3Fslug=content3&amp;reload=off&amp;page=droite&amp;rand=220.html"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageG pages">
<div class="cropTop"></div>
<div class="cropLeft"></div>
<iframe class="page gauche" src="pages.php%3Fslug=&amp;reload=off&amp;page=gauche&amp;rand=6744.html"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageD pages">
<div class="cropTop"></div>
<div class="cropRight"></div>
<iframe class="page droite" src="pages.php%3Fslug=&amp;reload=off&amp;page=droite&amp;rand=6744.html"></iframe>
<div class="cropBottom"></div>
</div>
<style media="screen, print">
body{
margin: 0;
padding: 0;
}
@page{
size: A4 !important;
margin: 0;
padding: 0;
}
iframe{
width: 20.95cm;
height: 29.7cm;
margin-top: 1.1cm;
border: 1px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.pages{
margin: 1cm;
}
.pages:nth-of-type(even) iframe{
/*margin-right: 1.5cm;*/
}
.pages:nth-of-type(odd) iframe{
/*margin-left: 1.5cm;*/
}
.pageG,
.pageD{
-webkit-page-break-after: always;
page-break-after: always;
width: 21cm;
height: 29.7cm;
}
.pageG:nth-of-type(1){
/*display: none;*/
}
.cropTop,
.cropBottom{
display: none;
position: absolute;
width: 19.5cm;
height: 0.3cm;
margin-right: 1.5cm;
border-left: 0.05cm solid black;
border-right: 0.05cm solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.cropLeft,
.cropRight{
display: none;
position: absolute;
width: 0.3cm;
height: 27.5cm;
margin-top: 1.1cm;
border-top: 0.05cm solid black;
border-bottom: 0.05cm solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.cropTop{
margin-top: 0.5cm;
}
.cropBottom{
margin-top: 0.3cm;
}
.pages:nth-of-type(odd) .cropBottom,
.pages:nth-of-type(odd) .cropTop{
left: 1.5cm;
}
.cropLeft{
margin-left: 0.8cm;
}
.cropRight{
margin-left: 19.8cm;
}
</style>
<style media="print">
iframe{
border: none;
}
.pageG,
.pageD,
iframe{
margin: 0cm;
padding: 0cm;
}
</style>
<div class="pageG pages">
<div class="cropTop"></div>
<div class="cropLeft"></div>
<iframe class="page gauche" src="pages.php?slug=1_couv&amp;reload=off&amp;page=gauche&amp;rand=159"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageD pages">
<div class="cropTop"></div>
<div class="cropRight"></div>
<iframe class="page droite" src="pages.php?slug=1_couv&amp;reload=off&amp;page=droite&amp;rand=159"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageG pages">
<div class="cropTop"></div>
<div class="cropLeft"></div>
<iframe class="page gauche" src="pages.php?slug=content1&amp;reload=off&amp;page=gauche&amp;rand=1767"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageD pages">
<div class="cropTop"></div>
<div class="cropRight"></div>
<iframe class="page droite" src="pages.php?slug=content1&amp;reload=off&amp;page=droite&amp;rand=1767"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageG pages">
<div class="cropTop"></div>
<div class="cropLeft"></div>
<iframe class="page gauche" src="pages.php?slug=content2&amp;reload=off&amp;page=gauche&amp;rand=9311"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageD pages">
<div class="cropTop"></div>
<div class="cropRight"></div>
<iframe class="page droite" src="pages.php?slug=content2&amp;reload=off&amp;page=droite&amp;rand=9311"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageG pages">
<div class="cropTop"></div>
<div class="cropLeft"></div>
<iframe class="page gauche" src="pages.php?slug=content3&amp;reload=off&amp;page=gauche&amp;rand=220"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageD pages">
<div class="cropTop"></div>
<div class="cropRight"></div>
<iframe class="page droite" src="pages.php?slug=content3&amp;reload=off&amp;page=droite&amp;rand=220"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageG pages">
<div class="cropTop"></div>
<div class="cropLeft"></div>
<iframe class="page gauche" src="pages.php?slug=&amp;reload=off&amp;page=gauche&amp;rand=6744"></iframe>
<div class="cropBottom"></div>
</div>
<div class="pageD pages">
<div class="cropTop"></div>
<div class="cropRight"></div>
<iframe class="page droite" src="pages.php?slug=&amp;reload=off&amp;page=droite&amp;rand=6744"></iframe>
<div class="cropBottom"></div>
</div>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
prepostprint </title>
<link rel="stylesheet" type="text/css" media="screen" href="http://prepostprint.org/css/page.css"><link rel="stylesheet" type="text/css" media="screen, print" href="css/page.css"> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<style>
@media print, screen {
}
</style>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
prepostprint </title>
<link rel="stylesheet" type="text/css" media="screen" href="../css/page.css"><link rel="stylesheet" type="text/css" media="screen, print" href="css/page.css"> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<style>
@media print, screen {
}
</style>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
prepostprint - 1_couv </title>
<link rel="stylesheet" type="text/css" media="screen" href="http://prepostprint.org/css/page.css"><link rel="stylesheet" type="text/css" media="screen, print" href="css/page.css"> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<style>
@media print, screen {
@font-face {
font-family:"manifont";
src: url("fontes/ManifontGroteskBook.ttf");
font-weight: normal;
font-style: normal;
}
h1{
font-size: 70pt;
font-family: "manifont", monospace;
word-wrap: break-word;
width: 50%;
position: absolute;
top: 1cm;
right: 1cm;
margin: 0;
color: #ff921a;
z-index: 99;
}
img{
width: 100%;
}
.thumb{
width: 20cm;
margin-left: 0.5cm;
filter: blur(5px);
filter: hue-rotate(180deg);
}
p{
padding: 0 1cm;
}
.thumbcaption{
padding: 0.2cm;
}
a{
color: orange;
text-decoration: none;
border: 1px solid orange;
padding: 0cm 0.1cm;
}
}
</style>
<h1 class="firstHeading" id="firstHeading" lang="en"><em>Mona Lisa</em> replicas and reinterpretations</h1>
<div class="mw-body-content" id="bodyContent">
<div id="siteSub">
From Wikipedia, the free encyclopedia
</div>
<div class="mw-content-ltr" dir="ltr" id="mw-content-text" lang="en">
<div class="thumb tright">
<div class="thumbinner">
<a class="image" href="http://prepostprint.org/wiki/File:Sapeck-La_Joconde_fumant_la_pipe.jpg"><img alt="" class="thumbimage" data-file-height="1280" data-file-width="853" height="300" src="../../upload.wikimedia.org/wikipedia/commons/thumb/1/16/Sapeck-La_Joconde_fumant_la_pipe.jpg/200px-Sapeck-La_Joconde_fumant_la_pipe.jpg" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/1/16/Sapeck-La_Joconde_fumant_la_pipe.jpg/300px-Sapeck-La_Joconde_fumant_la_pipe.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/1/16/Sapeck-La_Joconde_fumant_la_pipe.jpg/400px-Sapeck-La_Joconde_fumant_la_pipe.jpg 2x" width="200"></a>
<div class="thumbcaption">
<em>Le rire</em> (The Laugh) by Sapeck (Eug&egrave;ne Bataille), 1883
</div>
</div>
</div>
<div class="thumb tmulti tright">
<div class="thumbinner">
<div class="tsingle">
<div class="thumbimage">
<a class="image" href="http://prepostprint.org/wiki/File:Louis_Beroud_-_Mona_Lisa_au_Louvre_1911.jpg"><img alt="" data-file-height="636" data-file-width="800" height="207" src="../../upload.wikimedia.org/wikipedia/commons/thumb/1/19/Louis_Beroud_-_Mona_Lisa_au_Louvre_1911.jpg/260px-Louis_Beroud_-_Mona_Lisa_au_Louvre_1911.jpg" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/1/19/Louis_Beroud_-_Mona_Lisa_au_Louvre_1911.jpg/390px-Louis_Beroud_-_Mona_Lisa_au_Louvre_1911.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/1/19/Louis_Beroud_-_Mona_Lisa_au_Louvre_1911.jpg/520px-Louis_Beroud_-_Mona_Lisa_au_Louvre_1911.jpg 2x" width="260"></a>
</div>
</div>
<div class="tsingle">
<div class="thumbimage">
<a class="image" href="http://prepostprint.org/wiki/File:Mona_Lisa_stolen-1911.jpg"><img alt="" data-file-height="287" data-file-width="308" height="207" src="../../upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Mona_Lisa_stolen-1911.jpg/222px-Mona_Lisa_stolen-1911.jpg" srcset="//upload.wikimedia.org/wikipedia/commons/f/f8/Mona_Lisa_stolen-1911.jpg 1.5x" width="222"></a>
</div>
</div>
<div class="thumbcaption">
A <em>painting-of-the-painting</em> (left) depicting <em><a href="http://prepostprint.org/wiki/Mona_Lisa" title="Mona Lisa">Mona Lisa</a></em> as displayed in <a class="mw-redirect" href="http://prepostprint.org/wiki/The_Louvre" title="The Louvre">the Louvre</a> (<a href="http://prepostprint.org/wiki/Louis_B%C3%A9roud" title="Louis B&eacute;roud">Louis B&eacute;roud</a>, 1911). At right, the same wall shown in a photograph taken after the painting's theft, also 1911.
</div>
</div>
</div>
<p><a href="http://prepostprint.org/wiki/Leonardo_da_Vinci" title="Leonardo da Vinci">Leonardo da Vinci</a>'s <em><a href="http://prepostprint.org/wiki/Mona_Lisa" title="Mona Lisa">Mona Lisa</a></em> is one of the most recognizable and famous works of art in the world, and also one of the most replicated and reinterpreted. <strong><em>Mona Lisa</em> replicas</strong> were already being painted during Leonardo's lifetime by his own students and contemporaries. Some are claimed to be the work of Leonardo himself, and remain disputed by scholars. Prominent 20th-century artists such as <a href="http://prepostprint.org/wiki/Marcel_Duchamp" title="Marcel Duchamp">Marcel Duchamp</a> and <a href="http://prepostprint.org/wiki/Salvador_Dal%C3%AD" title="Salvador Dal&iacute;">Salvador Dal&iacute;</a> have also produced derivative works, manipulating <em>Mona Lisa'</em>s image to suit their own aesthetic. Replicating <a href="http://prepostprint.org/wiki/Renaissance" title="Renaissance">Renaissance</a> masterpieces continues to be a way for aspiring artists to perfect their painting techniques and prove their skills.<sup class="reference" id="cite_ref-Cottage_Industry_1-0"><a href="pages.php%3Fslug=1_couv&amp;reload=off&amp;page=droite&amp;rand=159.html#cite_note-Cottage_Industry-1">[1]</a></sup></p>
<p>Contemporary <em>Mona Lisa</em> replicas are often created in conjunction with events or exhibitions related to Leonardo da Vinci, for publicity. When scientists did a scan on each layer of paint they found that Mona Lisa included many people all completely different before Mona Lisa was finished. Also, archeologists found a skull they believe belongs to Mona Lisa. Her <a href="http://prepostprint.org/wiki/Portrait" title="Portrait">portrait</a>, considered <a href="http://prepostprint.org/wiki/Public_domain" title="Public domain">public domain</a> and therefore outside of <a href="http://prepostprint.org/wiki/Copyright" title="Copyright">copyright</a> protection, has also been exploited to make <a href="http://prepostprint.org/wiki/Political_statement" title="Political statement">political statements</a>. Known even to people with no art background, the mere use of <em>Mona Lisa'</em>s name&nbsp;&ndash; immortalized in </p>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
prepostprint - 1_couv </title>
<link rel="stylesheet" type="text/css" media="screen" href="../css/page.css"><link rel="stylesheet" type="text/css" media="screen, print" href="css/page.css"> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<style>
@media print, screen {
@font-face {
font-family:"manifont";
src: url("fontes/ManifontGroteskBook.ttf");
font-weight: normal;
font-style: normal;
}
h1{
font-size: 70pt;
font-family: "manifont", monospace;
word-wrap: break-word;
width: 50%;
position: absolute;