-
Notifications
You must be signed in to change notification settings - Fork 0
/
archive.html
237 lines (212 loc) · 11.6 KB
/
archive.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>ENSAD Nancy Portfolios en ligne</title>
</head>
<body>
<header>
<a class="header-link" href="/"><h1>ENSAD Nancy <em>Portfolios en ligne</em></h1></a>
<a class="header-link header-link-archive" href="/archive.html"><div>Archive</div></a>
</header>
<main class="page-archive">
<div class="archive-intro">
<p>Du 16 au 19 novembre 2020, nous [les élèves de l'ENSAD Nancy + le studio de design <a href="https://documents.design">Documents</a> et
<a href="https://abstock.org/">Vincent Dardel</a>] avons travaillé autour de manières de montrer son travail sur le web via une
plate-forme Discord comme lieu d'échanges.<br>Sont consignés ici de brèves questions/réponses des
trois groupes, <span class="tag-name pdf_interactif">@pdf_interactif</span>,
<span class="tag-name cargo_initiation">@cargo_initiation</span> et
<span class="tag-name web_sur_mesure">@web_sur_mesure</span>.<br>
Se trouvent également consignées les suggestions de logiciels libres et/ou open-source <a href="https://fr.wikipedia.org/wiki/Free/Libre_Open_Source_Software">(F/LOSS)</a> souvent gratuits proposés dans le canal <span class="tag-name logiciels">@logiciels</span>.</p>
</div>
<div class="columns">
<div class="column">
<div class="tag-name pdf_interactif">@pdf_interactif</div>
<div class="q-a">
<div class="q">
Que doit-on faire comme croquis [pour le PDF interactif, ndla] j'ai peur de ne pas avoir bien saisi ?</div>
<div class="a">
Nous avons présenté rapidement ce matin le processus de conception d'un support éditorial (analogie entre édition papier et numérique) et rudiments d'utilisation de Indesign :
- Définition d'un format
- Modes de consultation (mobile / ordi)
- Empagement et marges
- Structure de la page (grille de document)
- Utilisation des gabarits
L'objectif est d'esquisser une structure de page et la répartition des contenus type d'un portfolio (titre courant, pagination, texte courant, images de projets, onglets de navigation, etc.) sur les deux formats de consultation suivant :
- format mobile (petit format vertical)
- écran (grand format horizontal)
Voici un croquis TGV d'une esquisse papier de la répartition de contenus sur les deux supports :
- menu, onglets de navigation
- images
- texte
- titres
</div>
</div>
<div class="q-a">
<div class="q">
Quels sont les archétypes de sites internet présentés ?
</div>
<div class="a">
Voici le détail des archétypes de sites internet décortiqués tout à l'heure.
[](/assets/archetypes.pdf)
</div>
</div>
<div class="q-a">
<div class="r">
La classification vox-atypi
https://fr.wikipedia.org/wiki/Classification_Vox-Atypi
</div>
</div>
<div class="q-a">
<div class="r">
Retrouver une fonte qui nous plaît
https://www.myfonts.com/WhatTheFont/
</div>
</div>
<div class="q-a">
<div class="r">
Documentation complète des interactivités possibles dans inDesign
https://helpx.adobe.com/fr/indesign/user-guide.html/fr/indesign/using/dynamic-pdf-documents.ug.html
Gestion des hyperliens (renvois sommaire)
https://helpx.adobe.com/fr/indesign/user-guide.html/fr/indesign/using/hyperlinks.ug.html#hyperlinks
Gestion des vidéos via InDesign
Instructions pour éviter tout problème d'affichage:
- 01. Choisir une image de "couverture" via la fenêtre "Multimédia", menu déroulant "Affiche> sélectionner une image"
- 02. Doubler d'un lien externe vers la vidéo (plateforme viméo de préférence, youtube n'est pas pris en charge)
https://helpx.adobe.com/fr/indesign/user-guide.html/fr/indesign/using/movies-sounds.ug.html#change_movie_settings
Création de "zones sensibles" et de boutons avec effets (non évoqué ce matin — je donne la documentation pour ceux qui souhaiteraient s'y plonger — à voir à l'export si ça tient dans les différents lecteurs...)
https://helpx.adobe.com/fr/indesign/user-guide.html/fr/indesign/using/interactivity-5.ug.html#create_button_hot_spots
</div>
</div>
<div class="q-a">
<div class="r">
Gestion de l'affichage à l'ouverture via la boîte de dialogue d'export (pleine hauteur, pleine largeur, etc... selon les formats).
</div>
</div>
<div class="q-a">
<div class="r">
Choix de la couverture
</div>
</div>
<div class="q-a">
<div class="r">Mini-site pour le groupe PDF
Télécharger le zip ici : [/assets/mini_site.zip](/assets/mini_site.zip)
Des commentaires supplémentaires dans les styles ont été ajoutés.
En cas de doute sur un élément HTML ou une règle CSS : chercher "nom de la fonction MDN" sur Google pour tomber sur le super site de Mozilla au sujet des langages web !
Comment éditer le mini-site pour mettre une vidéo en fond ?
Tutoriel vidéo ici https://drive.google.com/file/d/1lhz-J9nFKwxntKxlSkLcLhH2dwB6c_F6/view?usp=sharing
</div>
</div>
</div>
<div class="column" style="margin-top: 8em;">
<div class="tag-name cargo_initiation">@cargo_initiation</div>
<div class="q-a">
<div class="r">
Si vous ajoutez des éléments interactifs via HTML comme un overlay d'accueil qui s'affiche puis s'en va, et que vous sauvegardez la page, Cargo va l'enregistrer dans son état final, donc invisible.
Nous avons contrecarré ce comportement avec @RaniaEsstafa avec un exemple visible dans ce Codepen :
https://codepen.io/documents/pen/wvWZQKj?editors=1000
A l'affichage de la page, si cargo a sauvegardé l'écran de transition dans son état fermé, on désactive ses animations de fondu, on l'affiche, puis on réactive ses animations de fondu.
</div>
</div>
<div class="q-a">
<div class="r">
Exemples de maquettes prêtes à être transmises à un commanditaire : [Maquettes.pdf](/assets/2020-03-13-SCALENE_SITE_V2.pdf)
</div>
</div>
<div class="q-a">
<div class="r">
@pour-tous-les-adeptes-des-menus-déroulant-vus-entre-hier-et-aujourd'hui, voici l'encyclopédie de la W3school qui explique comment programmer une "barre de navigation en CSS". Tout en bas de la page se trouve la Dropdown Navbar qui vous intéresse.
https://www.w3schools.com/css/css_navbar_horizontal.asp
</div>
</div>
<div class="q-a">
<div class="r">
Voici une facon de faire des blocs textes pour ceux que ca interesse!
</div>
</div>
<div class="q-a">
<div class="q">
C'est tout con mais... comment changer l'ordre de passage d'un carrousel d'images sur Cargo ? J'ai beau les déposer / glisser dans l'ordre ça couille à la fin... :tired_face:
</div>
<div class="a">
C'est l'ordre d'apparition sur la page qui indique l'ordre d'affichage dans le carrousel. En annulant l'option carrousel (petite croix en haut), vous pouvez modifier l'enchainement des images individuellement puis reconstituer un nouveau carrousel avec le bouton "image gallery" !
</div>
</div>
<div class="q-a">
<div class="q">
est-ce que quelqu'un sait comment ajouter un tableau sur cargo ? j'avais trouvé un code mais impossible de rentre la largeur des cases automatique (alors que ce serait bien qu'il s'adapte tjrs au max à l'écran)
</div>
<div class="a">
</div>
</div>
<div class="q-a">
<div class="q">
Vous savez comment on avait accès au scroll ? Mes pages restent fixes et je ne peux pas les faire défiler de bas en haut. Quand je fais dépasser mon image de la page pour avoir le scroll automatique, l'image se coupe et l'écran reste toujours fixe...
</div>
<div class="a">
</div>
</div>
<div class="q-a">
<div class="r">
Bonjour. Pour celui qui veut créer un “draggable element” dans son site, il y a un petit tuto sur le site Cargo Support : https://support.cargo.site/Make-a-Draggable-Element
</div>
</div>
<div class="q-a">
<div class="r">
Des infos pour ajouter des ombres portées aux images : https://support.cargo.site/Adding-Drop-Shadows-to-Images</div>
</div>
<div class="q-a">
<div class="q">
Bonjour, quelqu'un pourrait m'expliquer comment insérer une vidéo dans une page blanche ou un même des ''backdrops'' je ne sais pas comment ça s'appelle.
</div>
<div class="a">
https://support.cargo.site/Embedding-Videos
j'ai trouvé ça pour les vidéos
</div>
</div>
<div class="q-a">
<div class="r">
@cargo_initiation @web_sur_mesure Voici un tuto en images pour lier son nom de domaine Gandi à son site Cargo !
[tutorial-cargo-gandi.pdf](/assets/tutorial-cargo-gandi.pdf)
</div>
</div>
<div class="q-a">
<div class="r">
Hey @cargo_initiation ! N'oubliez pas de changer votre Favicon dans les paramètres de votre Cargo !
</div>
</div>
</div>
<div class="column" style="margin-top: 8em;">
<div class="tag-name web_sur_mesure">@web_sur_mesure</div>
</div>
<div class="column" style="margin-top: 8em;">
<div class="tag-name logiciels">@logiciels</div>
</div>
</div>
</main>
<script src="js/marked.js"></script>
<script src="js/lazyload.js"></script>
<script>
(function(){
var ll_instance = new LazyLoad();
Array.from(document.querySelectorAll('.a, .r')).forEach(function(i) {
var tx = i.innerHTML;
var nh = marked(tx);
i.innerHTML = nh;
});
})();
</script>
</body>
</html>