-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
294 lines (255 loc) · 16.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="turn.min.js"></script>
<style type="text/css">
body {
background: #ccc;
margin: 0;
}
#magazine {
position: absolute;
top: 70px;
width: 100vw;
height: calc(100vh - 70px);
}
#magazine .turn-page {
background-color: #ccc;
background: white;
background-size: 100% 100%;
}
#top {
width: 100vw;
height: 70px;
position: absolute;
z-index: 100000000000;
background-repeat: no-repeat;
background-color: black;
}
#back {
background-image: url(pages/back.png);
height: 80px;
width: 80px;
position: absolute;
z-index: 100000000000;
background-repeat: no-repeat;
top: calc(50vh - 40px);
left: 0px;
background-size: contain;
cursor: pointer;
}
#back:hover {
opacity: 0.5;
}
#next:hover {
opacity: 0.5;
}
#next {
background-image: url(pages/next.png);
height: 80px;
width: 80px;
position: absolute;
z-index: 100000000000;
background-repeat: no-repeat;
top: calc(50vh - 40px);
background-size: contain;
cursor: pointer;
right: 0;
display: none;
}
#wrapper {
height: calc(100vh - 70px);
background-color: white;
overflow: auto;
position: absolute;
width: 100vw;
}
#text {
padding: 20px 80px;
text-align: justify;
font-size: 2rem;
}
.page {
background-color: #ccc;
}
.firstPage {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.firstPage>img {
margin-top: 100px;
}
#wrapper:before {
bottom: 0;
content: "";
width: 100vw;
height: 80px;
position: fixed;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
</style>
</head>
<body>
<div id="top">
</div>
<div id="back">
</div>
<div id="next">
</div>
<div id="magazine">
<div class="page">
<div id="wrapper">
<div id="text" class="firstPage">
<div style="text-align: center;">LE DESIGN</div>
<img src="img.jpg">
</div>
</div>
</div>
<div class="page">
<div id="wrapper">
<div id="text">
<p>Le design ou stylisme est une activité de création souvent à vocation industrielle ou commerciale, pouvant s’orienter vers les milieux sociaux, politiques, scientifiques et environnementaux. Le but premier du design est d’inventer,
d’améliorer ou de faciliter l’usage ou le processus d’un élément ayant à interagir avec un produit ou un service matériel ou virtuel. Un des rôles du design est de répondre à des besoins, de résoudre des problèmes, de proposer
des solutions nouvelles ou d’explorer des possibilités pour améliorer la qualité de vie des êtres humains, que ce soit dans les sociétés industrielles occidentales (où le design est né) ou dans les pays en voie de développement
(design humanitaire). </p>
<p>La pluridisciplinarité est au cœur du travail du designeur, dont la culture se nourrit aussi bien des arts, des techniques, des sciences humaines ou des sciences de la nature.Le design est à distinguer des arts décoratifs, expression
apparue dans les années 1870 comme pendant aux beaux-arts dans la création d'objets d'art. Le design est lié à l'innovation technique, à la production en série, et à l'esthétique contemporaine, tandis que les arts décoratifs relèvent
de l'artisanat d'art, c'est-à-dire de techniques traditionnelles, à l'esthétique souvent ornementale et figurative et d'une production à l'unité ou en petite série.
</p>
<p>
Cependant, les frontières ne sont pas étanches : un réverbère parisien en fonte du XIXe siècle relève du même processus que le design car même s'il présente des ornements, il est issu d'une technique innovante pour l'époque et il est produit en nombre
; de même, certains designeurs signent des pièces en petite série, pour le marché de l'art notamment, surtout depuis les années 1970. Sollicité par le marketing depuis les années 2000, le design est peu à peu devenu un argument
publicitaire. « Design » est devenu, à tort, un adjectif qualifiant un style aux formes simples et d'une apparence épurée. Il succède ainsi à l'aspect traditionnel des modèles de style.
</p>
<p>
Étant un mot de la langue anglaise, bien qu'étant d'origine franco-latine, le mot design ne se prononce pas comme il s'écrit mais à la manière anglaise (« disaïne »). Longtemps considéré comme un anglicisme, il ne s'est imposé que tardivement dans la
langue française. Un équivalent français peut, si le contexte le permet, être trouvé dans le mot « concevoir ». À la Renaissance, le disegno italien est l'un des concepts majeurs de la théorie de l'art. Il signifie à la fois dessin
et projet. Au XVIIe siècle en France, les théoriciens de l'art le traduisent par dessein et conservent le double sens (l'idée et sa représentation). Tout comme en anglais et en italien, il trouve son origine dans le latin designare,
qui a permis également de former en français le verbe « desseigner », d'où sont issus les verbes « désigner » et « dessiner ». Néanmoins, ce double sens de dessein va se disjoindre rapidement pour suivre les théories de l'art dominantes
de l'époque. Car c'est en 1750 en France que la distinction apparaît pour donner deux champs sémantiques distincts, celui du dessin (la pratique) et du dessein (l'idée) marquant une rupture fondamentale qui n'est pas sans rappeler
la dualité matière/esprit de Descartes. À l'Académie royale de peinture et de sculpture, on enseigne désormais les arts du dessin et non plus du dessein.
</p>
<div style="text-align: center;">P1</div>
</br>
</br>
</br>
</div>
</div>
</div>
<div class="page">
<div id="wrapper">
<div id="text">
<p>
L'étymologie du mot provient de l'anglais « design », que l'on emploie depuis la période classique. Il vient de l'ancien français « designer », lui-même dérivé latin designare, « marquer d’un signe, dessiner, indiquer », formé à partir de la préposition
de et du nom signum, « marque, signe, empreinte »4. En anglais, to design signifie donc à la fois dessiner et concevoir en fonction d’un plan, d’une intention, d’un dessein.
</p>
<p> Plus généralement, le mot « design » implique intention, un projet, un plan ; en deuxième lieu à une transmission d'une information technique par le dessin ; et finalement à la réalisation d'un produit artisanal ou industriel. La langue
anglaise emprunte le premier sens au terme français de « dessein ». Au XVIe siècle, le terme moyen français desseign a pour sens l’intention ou le projet. Concevoir sera donc en même temps avoir l’intention de faire quelque chose.
Le dictionnaire anglais Robert Cawdrey’s Alphabetic Table of Hard Words (1604) décline même un nouveau terme à partir de desseign qui est deseignment, « thing shall be done » (la chose doit se faire, s’accomplir).
</p>
<p>À partir du XVIIe siècle, le mot français s’installe bien dans toutes les définitions du terme anglais de « design ». Dorénavant, design sera l’équivalent de plan, de représentations ou d’une esquisse, d’une tâche à accomplir5. En
1712, Shaftesbury introduit dans la théorie anglaise de l'art6 le concept de design fidèle au sens de disegno. Ainsi, nous avons drawing pour le dessin en tant que tracé et design signifiant l'idée et sa représentation, le projet
et son graphisme. Le sens du mot « design » tel qu'on le connaît aujourd'hui en français (un projet dessiné) a été popularisé par Henry Cole en 1849 dans le premier numéro du Journal of Design and Manufactures.
</p>
</br>
<div style="text-align: center;">P2</div>
</div>
</div>
</div>
<div>
<div id="wrapper">
<div id="text">
<p>
Le design entretient parfois des relations conflictuelles avec le marketing. On peut lier cela à une perception négative et caricaturale du marketing dans la culture globale ainsi qu'à des conflits d'intérêts au sein de l'entreprise. Le design et le marketing
vont tous deux travailler sur les besoins client suivant des approches différentes. Bien que le design et le marketing puissent être considérés comme des approches très complémentaires, les uns peuvent avoir l'impression que les
autres empiètent sur leurs plates-bandes. Il faut ajouter à cela que Philip Kotler, théoricien du marketing, prit l'initiative de classer le design comme un outil du marketing. Bien que Philip Kotler fut revenu sur ses propos par
la suite (correspondance avec Brigitte Borja de Mozota, chercheur en design management) et ait corrigé cela, cette vision subsiste dans de nombreux manuels de marketing et attise les conflits et les incompréhensions en entreprise.
</p>
<p>
Le design se distingue du marketing par une approche avant tout empathique du consommateur, préférant par exemple le terme utilisateur. Les designeurs appuient beaucoup sur le fait que le design considère avant tout le bien-être de l'utilisateur. Cela
n'empêche pas qu'il existe des techniques de manipulation s'exprimant par le design, par exemple dans la conception des espaces vente. Suivant généralement des approches empathiques, le design est une source de retour sur investissement
et un levier économique de premier ordre et bien perçu, par sa proximité avec l'utilisateur.
</p>
<div style="text-align: center;">P3</div>
</div>
</div>
</div>
<div class="page">
<div id="wrapper">
<div id="text">
<p>
Intrinsèquement le design est lié à l'architecture en raison de son importance dans le mobilier, qui est un équipement du bâtiment. L'élaboration d'un projet en design suit un processus proche de l'architecture en raison de la forte implication de la
fonction et de la technique dans le processus de création. En outre, la représentation est similaire puisque l'un et l'autre utilisent plans et perspectives. Ces similitudes expliquent que la frontière peut paraître floue entre
design et architecture, si bien que nombre d'architectes se sont livrés à la création de meubles, voire d'équipement domestiques comme les appareils d'éclairage. À la Renaissance, Jacques Androuet du Cerceau a livré des modèles
de tables tandis qu'Eugène Viollet-le-Duc s'ingéniait au XIXe siècle à reconstituer des meubles médiévaux dans un esprit d'art total. C'est en effet le souci de complémentarité entre le tout et le détail, celui d'unité de style
ou esthétique, qui poussent nombre d'architectes à dessiner des objets pour les intérieurs. La période la plus prolifique à cet égard est sans doute le début du XXe siècle Ainsi l'Art nouveau avec Hector Guimard, Antoni Gaudí,
Frank Lloyd Wright ou Henry Van de Velde, puis le modernisme avec Le Corbusier, Alvar Aalto, Marcel Breuer, Mies van der Rohe ou Eero Saarinen ont livré nombre d'ensembles et de modèles, parfois spécialement élaborés pour un bâtiment
précis comme le fauteuil Barcelona de Mies van der Rohe ou bien le mobilier en bois lamellé-collé pour le sanatorium de Paimio par Aalto. Certains designeurs ont dessiné des meubles en association avec des architectes comme Philippe
Starck. En raison de la complexification des techniques et de la spécialisation des compétences, rares sont aujourd'hui les architectes soucieux de transposer leurs recherches dans le mobilier comme Zaha Hadid. Une entreprise de
meubles comme Knoll s'est illustrée dans l'édition de meubles d'architectes. En outre, une des composantes du design, à savoir le design d'intérieur, se définit comme une activité créative s'exerçant au sein d'un projet d'architecture
ou d'un ensemble existant pour concevoir l'aménagement de l'espace domestique.
</p>
<div style="text-align: center;">P4</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(window).ready(function() {
$('#magazine').turn({
display: 'single',
acceleration: true,
gradients: !$.isTouch,
elevation: 50,
when: {
turned: function(e, page) {
(function($) {
$.fn.hasScrollBar = function() {
return this.get(0).scrollHeight > this.height();
}
})(jQuery);
jQuery(function($) {
$('.p' + page + ' > #wrapper').on('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight && page != "5") {
$('#next').show();
$(this).turn('peel', 'tr', true);
}
})
});
if ($('.p' + page + ' > #wrapper').hasScrollBar() || page == "5") {
$('#next').hide();
} else {
$('#next').show();
}
if (page != 5) {
$('#back').show();
}
if (page == 1) {
$('#back').hide();
$(this).turn('peel', 'tr', true);
} else {
$('#back').show();
}
}
}
});
$("#next").click(function() {
$('#magazine').turn('next');
});
$("#back").click(function() {
$('#magazine').turn('previous');
});
});
$(window).bind('keydown', function(e) {
if (e.keyCode == 37)
$('#magazine').turn('previous');
else if (e.keyCode == 39)
$('#magazine').turn('next');
});
</script>
</body>
</html>