OBJET INTERRACTIF WEB
Gu1ll4um3
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
Pitet Messages postés 2845 Statut Membre -
Pitet Messages postés 2845 Statut Membre -
Bonjour,
J'espère que vous allez bien.
Aujourd'hui petit post pour tenter de comprendre, et d'apprendre si possible, quel effet, bout de code, langage etc a été utilisé pour créer cet objet interactif : https://www.ecb.europa.eu/euro/banknotes/denominations/html/index.fr.html#es2-200
Je suis étudiant en master design graphique, j'ai conçu des billets de banques pour un projet fictif et j'aimerai sur mon site avoir la même interactivité, animation. Pouvez vous m’aiguiller sur le code, les tutos à suivre pour réaliser ce style de objet. (J'ai des notions en CSS/HTML même pas du tout javascript)
Merci à vous l'équipe,
Bonne journée
J'espère que vous allez bien.
Aujourd'hui petit post pour tenter de comprendre, et d'apprendre si possible, quel effet, bout de code, langage etc a été utilisé pour créer cet objet interactif : https://www.ecb.europa.eu/euro/banknotes/denominations/html/index.fr.html#es2-200
Je suis étudiant en master design graphique, j'ai conçu des billets de banques pour un projet fictif et j'aimerai sur mon site avoir la même interactivité, animation. Pouvez vous m’aiguiller sur le code, les tutos à suivre pour réaliser ce style de objet. (J'ai des notions en CSS/HTML même pas du tout javascript)
Merci à vous l'équipe,
Bonne journée
A voir également:
- OBJET INTERRACTIF WEB
- Web office - Guide
- Navigateur web - Guide
- Création site web - Guide
- K9 web protection - Télécharger - Contrôle parental
- Adresse web exemple - Guide
2 réponses
Salut,
la question est un peu générale.
Les publications sur le web ont plusieurs façons et techniques d'approcher le graphisme et les images, l'informatique plus globalement par rapport aux médias print.
conception graphique assistée par ordinateur:
C'est par exemple les images vectorielles qui permettent d'utiliser la liste des points et tracés d'une image de façon scalaire et permettent des fichiers légers et potentiellement de déplacer ces points(animation).
C'est aussi la venue d'autre outil/possibilités qui ont remplacé flash et permettent en combinant des technologies(par exemple HTML+CSS) pour des résultats graphiques élaborées(animations, design et images enrichies en possibilités et personnalisation dans la page....fonctionnalités associés au graphisme).
Ainsi l'élément Canvas permet dans une page d'afficher/créer des images en 2d ou en 3d.
La programmation permet d'ajouter une boucle d'animation ainsi que de l'interactivité: gérer des informations en fonction d'un contexte. exemple: la flèche est inclinée de tel angle donc le programme va répercuter cela sur ce qu'il y a à afficher pour montrer l'image correspondante.
Tout comme le cinéma est une suite de photos donnant l'illusion l'interactivité est enrichir un programme ou service(ici le site Internet) en donnant des possibilités.
Il existe des scripts à intégrer(tout dépends de la façon dont est fait votre site) et un script c'est un fichier de programme qui permet entre autre d'indiquer les événements possible et effectuer son résultat. Par exemple JavaScript permet de modifier, ajouter, écrire et réécrire le HTML et ses contenus. La page comme elle s'affiche.
Pour commencer si vous voulez faire ça vous-même en écrivant vos pages à la main il faut être au point sur HTML et CSS.
CSS permet d'ailleurs pas mal de possibilités d'affichage et peut animer toutes les propriétés.
Utiliser du JavaScript s’avère utile pour de l'interaction et des possibilités plus élaborées, la programmation permettant une gestion autrement des données et contenus qui peuvent être utilisés pour le fonctionnement du site.
Si la question précise est de savoir comment afficher un bouton qui permet de faire tourner une image en 3D sur une page web il faut d'abord savoir quel type d'image et comment vous aller avoir les images à afficher.
Si pour afficher une image vous pouvez faire cela:
CSS permet d'ajouter et modifier par les styles l'image et ses propriétés pour avoir la mise en page, les espacements , les cadres et tout ce qu'on veut.
La programmation rajoute la logique: si tu appuie là ça fait ça et faire défiler une liste d'images par exemple en changeant l'adresse indiqué par l'attribut src de notre image.
Voilà pouur le principe de l'image que vous avez montré.
Bien sûr avec une image il faudra soit indiquer les points de l'image à déformer si l'image est vectorielle ou avec un modèle 3d exporter toutes les images sous différents angles/ondulation Un calcul d'une courbe mathématique peut-être indiqué dans le programme pour déterminer les positions des points d'une image: le résultat à afficher.
. Et plein d'autres "détails" de la sorte qui demandent une connaissance avancée de la programmation aussi bien que son traitement et ses propriétés aussi bien que du travail de l'image numérique.
Et tant mieux visiblement c'est votre domaine. Il ne reste qu'à vous retrousser les manches.
Aussi bien pour trouver un script du genre lightbox qui permet ce genre d'effets qui corresponde à la façon (outils) avec lesquels vous faites votre site que pour améliorer vos connaissances dans le média web et le traitement/création d'images numériques.
L'approche est différente que pour une affiche où seul le résultat compte.
Il y a une séparation importante et nécessaire entre le fond et la forme, le fond ce sont les contenus(un titre, un paragraphe, une image...etc) et le résultat affiché par l'utilisateur sur son téléphone ou grand écran.
Ce résultat affiché est composé de plusieurs fichiers qui contiennent les contenus et leur désignation : le HTML( la balise <a> est un lien ses contenus sont l'adresse u lien et un texte cliquable), l'apparence que celle ci doit avoir avec CSS(la balise <a> des listes de menus ressemble à un bouton en forme de goutte d'eau allongée) et éventuellement de la programmation pour enrichir en fonctionnalités les contenus(et leur utilisation/gestion ) avec des fonctionnalités.
L'interactivité c'est une partie en soi de la programmation et comme pour le reste ça passe par un apprentissage.
L'interactivité en pratique, ici pour changer un texte de la page:
https://www.w3schools.com/jsref/prop_html_innerhtml.asp
la question est un peu générale.
Les publications sur le web ont plusieurs façons et techniques d'approcher le graphisme et les images, l'informatique plus globalement par rapport aux médias print.
conception graphique assistée par ordinateur:
C'est par exemple les images vectorielles qui permettent d'utiliser la liste des points et tracés d'une image de façon scalaire et permettent des fichiers légers et potentiellement de déplacer ces points(animation).
C'est aussi la venue d'autre outil/possibilités qui ont remplacé flash et permettent en combinant des technologies(par exemple HTML+CSS) pour des résultats graphiques élaborées(animations, design et images enrichies en possibilités et personnalisation dans la page....fonctionnalités associés au graphisme).
Ainsi l'élément Canvas permet dans une page d'afficher/créer des images en 2d ou en 3d.
La programmation permet d'ajouter une boucle d'animation ainsi que de l'interactivité: gérer des informations en fonction d'un contexte. exemple: la flèche est inclinée de tel angle donc le programme va répercuter cela sur ce qu'il y a à afficher pour montrer l'image correspondante.
Tout comme le cinéma est une suite de photos donnant l'illusion l'interactivité est enrichir un programme ou service(ici le site Internet) en donnant des possibilités.
Il existe des scripts à intégrer(tout dépends de la façon dont est fait votre site) et un script c'est un fichier de programme qui permet entre autre d'indiquer les événements possible et effectuer son résultat. Par exemple JavaScript permet de modifier, ajouter, écrire et réécrire le HTML et ses contenus. La page comme elle s'affiche.
Pour commencer si vous voulez faire ça vous-même en écrivant vos pages à la main il faut être au point sur HTML et CSS.
CSS permet d'ailleurs pas mal de possibilités d'affichage et peut animer toutes les propriétés.
Utiliser du JavaScript s’avère utile pour de l'interaction et des possibilités plus élaborées, la programmation permettant une gestion autrement des données et contenus qui peuvent être utilisés pour le fonctionnement du site.
Si la question précise est de savoir comment afficher un bouton qui permet de faire tourner une image en 3D sur une page web il faut d'abord savoir quel type d'image et comment vous aller avoir les images à afficher.
Si pour afficher une image vous pouvez faire cela:
<img src="mon_image.png" alt="description image" />
CSS permet d'ajouter et modifier par les styles l'image et ses propriétés pour avoir la mise en page, les espacements , les cadres et tout ce qu'on veut.
La programmation rajoute la logique: si tu appuie là ça fait ça et faire défiler une liste d'images par exemple en changeant l'adresse indiqué par l'attribut src de notre image.
Voilà pouur le principe de l'image que vous avez montré.
Bien sûr avec une image il faudra soit indiquer les points de l'image à déformer si l'image est vectorielle ou avec un modèle 3d exporter toutes les images sous différents angles/ondulation Un calcul d'une courbe mathématique peut-être indiqué dans le programme pour déterminer les positions des points d'une image: le résultat à afficher.
. Et plein d'autres "détails" de la sorte qui demandent une connaissance avancée de la programmation aussi bien que son traitement et ses propriétés aussi bien que du travail de l'image numérique.
Et tant mieux visiblement c'est votre domaine. Il ne reste qu'à vous retrousser les manches.
Aussi bien pour trouver un script du genre lightbox qui permet ce genre d'effets qui corresponde à la façon (outils) avec lesquels vous faites votre site que pour améliorer vos connaissances dans le média web et le traitement/création d'images numériques.
L'approche est différente que pour une affiche où seul le résultat compte.
Il y a une séparation importante et nécessaire entre le fond et la forme, le fond ce sont les contenus(un titre, un paragraphe, une image...etc) et le résultat affiché par l'utilisateur sur son téléphone ou grand écran.
Ce résultat affiché est composé de plusieurs fichiers qui contiennent les contenus et leur désignation : le HTML( la balise <a> est un lien ses contenus sont l'adresse u lien et un texte cliquable), l'apparence que celle ci doit avoir avec CSS(la balise <a> des listes de menus ressemble à un bouton en forme de goutte d'eau allongée) et éventuellement de la programmation pour enrichir en fonctionnalités les contenus(et leur utilisation/gestion ) avec des fonctionnalités.
L'interactivité c'est une partie en soi de la programmation et comme pour le reste ça passe par un apprentissage.
L'interactivité en pratique, ici pour changer un texte de la page:
https://www.w3schools.com/jsref/prop_html_innerhtml.asp
Bonjour,
L'effet utilisé sur le site est réalisé en utilisant WebGL dans une balise html canvas. Le site utilise notamment bibliothèque Three.js : https://threejs.org/
Pour en apprendre un peu plus sur l'utilisation de WebGL dans un canvas, tu peux éventuellement consulter le tuto proposé sur le site de mozilla :
https://developer.mozilla.org/fr/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
Les chapitres "Créer des objets 3D avec WebGL" et "Utilisation des textures en WebGL" devraient permettre de reproduire l'effet utilisé sur le site.
Bonne journée,
L'effet utilisé sur le site est réalisé en utilisant WebGL dans une balise html canvas. Le site utilise notamment bibliothèque Three.js : https://threejs.org/
Pour en apprendre un peu plus sur l'utilisation de WebGL dans un canvas, tu peux éventuellement consulter le tuto proposé sur le site de mozilla :
https://developer.mozilla.org/fr/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
Les chapitres "Créer des objets 3D avec WebGL" et "Utilisation des textures en WebGL" devraient permettre de reproduire l'effet utilisé sur le site.
Bonne journée,
https://fr.wikipedia.org/wiki/Scalable_Vector_Graphics
https://fr.wikipedia.org/wiki/Image_vectorielle
https://www.w3schools.com/graphics/svg_intro.asp