Du 16 au 19 novembre 2020, nous [les élèves de l'ENSAD Nancy + le studio de design Documents et
Vincent Dardel] avons travaillé autour de manières de montrer son travail sur le web via une
plate-forme Discord comme lieu d'échanges.
Sont consignés ici de brèves questions/réponses des
trois groupes, @pdf_interactif,
@cargo_initiation et
@web_sur_mesure.
Se trouvent également consignées les suggestions de logiciels libres et/ou open-source (F/LOSS) souvent gratuits proposés dans le canal @logiciels.
@pdf_interactif
Que doit-on faire comme croquis [pour le PDF interactif, ndla] j'ai peur de ne pas avoir bien saisi ?
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
Quels sont les archétypes de sites internet présentés ?
Voici le détail des archétypes de sites internet décortiqués tout à l'heure.
[](/assets/archetypes.pdf)
La classification vox-atypi
https://fr.wikipedia.org/wiki/Classification_Vox-Atypi
Retrouver une fonte qui nous plaît
https://www.myfonts.com/WhatTheFont/
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
Gestion de l'affichage à l'ouverture via la boîte de dialogue d'export (pleine hauteur, pleine largeur, etc... selon les formats).
Choix de la couverture
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
@cargo_initiation
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.
Exemples de maquettes prêtes à être transmises à un commanditaire : [Maquettes.pdf](/assets/2020-03-13-SCALENE_SITE_V2.pdf)
@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
Voici une facon de faire des blocs textes pour ceux que ca interesse!
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:
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" !
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)
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...
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
Des infos pour ajouter des ombres portées aux images : https://support.cargo.site/Adding-Drop-Shadows-to-Images
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.
https://support.cargo.site/Embedding-Videos
j'ai trouvé ça pour les vidéos
@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)
Hey @cargo_initiation ! N'oubliez pas de changer votre Favicon dans les paramètres de votre Cargo !
@web_sur_mesure
@logiciels