- il y a 2 jours
30 jours d'essai gratuit sur Canva Pro en t'inscrivant via le lien : https://partner.canva.com/6bk6ZV
Catégorie
🤖
TechnologieTranscription
00:00CanvaCode 2.0 évolue et propose deux nouvelles fonctionnalités qui vont te permettre d'aller plus loin,
00:06que ce soit dans la création de tes widgets, de tes applications, de tes jeux interactifs et même de tes
00:12sites internet.
00:13Dans ce tuto complet, on verra d'abord comment y accéder, on verra les nouveautés et ensuite on fera trois
00:19cas pratiques.
00:20La création d'un jeu interactif, d'une application éducative et enfin d'un site internet pour ton business.
00:27Dans un premier temps, tu pourras accéder à CanvaCode via ton compte Canva, que tu sois en compte gratuit, pro,
00:33éducation.
00:34La seule différence sera en termes de génération puisque CanvaCode utilise des crédits IA.
00:39En gratuit, tu seras donc limité et ensuite, selon les abonnements, tu auras plus ou moins de crédits IA à
00:45utiliser mensuellement.
00:47Donc, pour accéder à CanvaCode 2.0, il y a plusieurs possibilités.
00:50Maintenant, sur notre accueil, nous avons une icône qui nous donne accès directement à une fenêtre d'interface CanvaCode.
00:57Et ainsi, écrire le prompt pour générer notre code via le nouvel onglet IA Canva.
01:02Ainsi, il suffira de décrire via un prompt le plus précis possible son idée d'application, de widget, de jeu
01:09ou de site internet.
01:10Nous avons aussi toujours la possibilité de générer notre code directement en allant sur l'accueil via le menu de
01:16gauche dans IA Canva.
01:17Et en sélectionnant sur la fenêtre d'interface l'option code, nous pourrons ici, toujours à l'aide d'un
01:23prompt, générer ce que nous souhaitons faire avec quelques suggestions en dessous.
01:27Et sur la gauche, l'accès à notre historique de génération de code en allant sur le petit bouton d
01:33'ouverture de fenêtre.
01:34Ainsi, pouvoir retrouver un ancien code et continuer la génération de celui-ci ou retrouver la template que nous avons
01:40créé.
01:40Et grosse nouveauté, en allant cette fois-ci dans modèle, nous avons maintenant accès aux différents templates.
01:46En sélectionnant CanvaCode, nous aurons maintenant accès à une cinquantaine de modèles répartis selon les styles, les thématiques, les fonctionnalités.
01:53On a des applications, des sites internet, des widgets que nous pouvons sélectionner et personnaliser.
01:58Ainsi, un design s'ouvrira avec l'application déjà pré-codée.
02:02On pourra, si on souhaite ces nouveaux, modifier l'esthétique de celle-ci.
02:07Pour l'instant, ça sera limité au texte, que ce soit réécrire ce qu'il y a à l'intérieur,
02:12changer la couleur ou changer la police.
02:13Et nous pouvons, en allant dans code, récupérer le code HTML de l'application pour pouvoir par exemple copier et
02:20recréer,
02:20que ce soit sur Canva ou une autre plateforme, pour par exemple recréer à partir d'un nouveau design,
02:25puisque l'agent IA de Canva comprend le langage HTML et va nous régénérer l'application.
02:31Donc ici, on l'a fait à partir de Canva, mais imaginons, nous avions codé une application sur Cloud ou
02:36ChatGPT.
02:37Il suffit de copier le code HTML de celle-ci et de le coller dans l'agent IA de Canva
02:43pour régénérer cette application.
02:44A savoir qu'en termes de performance, le temps de génération sur CanvaCode a été réduit de 75%
02:50et le délai entre la demande et la publication est maintenant 30% plus rapide.
02:55Et comme on peut voir, notre application a été générée à partir du code HTML source du modèle.
02:59On pourra appliquer nos modifications esthétiques ou tout simplement continuer à coder pour ajouter ou enlever des fonctionnalités.
03:06Parmi les nouveautés, nous avons aussi la possibilité de partager notre code en donnant accès à nos collaborateurs
03:12ou à toute personne ayant le lien de modification du modèle.
03:15Cela permettra ainsi de travailler à plusieurs sur une même application, un site internet ou un jeu.
03:21Et enfin, le code est bien sûr publiable en site internet en le publiant via un site internet,
03:27en choisissant l'URL et ainsi le publier en tant que CanvaSite ou si nous préférons,
03:32en allant dans le petit modifier ici, et obtenir un nom de domaine professionnel,
03:37soit en le liant à un nom de domaine qu'on a déjà acheté, soit l'acheter directement sur Canva.
03:42Il suffira de faire une recherche de mots-clés, les noms de domaine s'afficheront avec le prix annuel.
03:48Il suffira ensuite de continuer son achat pour revendiquer le domaine.
03:51Je peux aussi, nouveauté, en publiant le site web, ajouter des conditions d'accès.
03:56C'est-à-dire en allant dans le paramètre, outre l'ensemble des paramètres, je peux maintenant ajouter un mot
04:01de passe.
04:01Je n'aurai qu'à définir celui-ci et une fois le site internet publié,
04:05pour avoir accès à celui-ci, il faudra rentrer le mot de passe pour pouvoir profiter de l'application.
04:09Pour rappel, pour retrouver l'ensemble des sites internet créés avec votre compte Canva,
04:13il faudra aller dans l'accueil, sur votre profil, en allant ensuite dans paramètres,
04:18aller tout en bas dans domaine web, pour parcourir le nom de votre domaine
04:21et l'ensemble des sites et applications qui y sont liés et publiés.
04:25Donc maintenant qu'on a fait le tour des nouveautés, passons au premier cas pratique.
04:30Le premier, ce sera la création d'un jeu vidéo, ensuite d'une application, et enfin d'un site web.
04:35On commence d'abord avec le jeu vidéo, pour cela j'ouvre ma fenêtre CanvaCode
04:39et je vais pouvoir prompter mon idée de jeu.
04:42Petite astuce, comme on a dit en introduction, plus ce prompt est complet,
04:46plus nous aurons une première version qui colle vraiment à ce qu'on a demandé.
04:51Pour t'aider à prompter, n'hésite pas à passer par une IA.
04:53Moi ici j'ai pris le dernier modèle de ChatGPT pour avoir un prompt assez costaud
04:58afin de me reproduire un jeu vidéo sur le style de Doom.
05:01Et de toute façon, si le résultat n'est pas concluant, nous pourrons toujours continuer la conversation avec l'agent
05:07IA
05:08pour arriver à ce que nous souhaitons.
05:10Sachant que quand même, il y a une condition, le format par défaut du CanvaCode est en HTML
05:15pour être publié via un site internet.
05:18Du coup, à préciser dans votre requête pour optimiser en HTML et ainsi avoir une bonne proposition de prompt.
05:25Je lance mon prompt, j'ai l'IA Canva qui va tourner.
05:27Ça va me prendre 2-3 minutes, mais grâce à la magie du montage, on va tout de suite avancer
05:31la vidéo pour arriver à la première version.
05:34Ça y est, notre jeu vidéo est prêt.
05:36On va pouvoir, en le sélectionnant, le lancer.
05:39Déjà on peut, comme on avait vu, personnaliser au niveau du texte si on souhaite personnaliser que ça soit la
05:46police ou la couleur.
05:48Mais ici, on va directement cliquer sur jouer et voir un petit peu comment il fonctionne.
05:52On voit qu'on a notre labyrinthe, on a notre joueur 1, la touche tirée et ici, si on souhaite
05:58avancer dans le labyrinthe,
05:59donc on a notre personnage qui avance dans un labyrinthe généré en 3D.
06:05Donc en termes de gameplay, ça a l'air correct.
06:07C'est bien sûr en termes de graphique où ça pêche un petit peu, malgré fait qu'on voit, hop,
06:12on a les ennemis.
06:16Hop, je viens de le tuer et je peux continuer à avancer comme ça dans mon labyrinthe jusqu'à récupérer
06:23la clé et sortir de celui-ci.
06:25Donc comme on peut voir, l'interface est super simple, mais le gameplay est là et à part les assets
06:29graphiques qui manquent, ça fonctionne.
06:31C'est pour ça que même si je ne pourrais pas lui donner accès à un dossier avec les assets
06:35graphiques en 3D,
06:36ce que je vais essayer, c'est d'aller dans le petit plus qui est juste ici et j'ai
06:39la possibilité de donner à mon code des éléments supplémentaires.
06:43Alors pour l'instant, on voit que je ne peux pas appliquer mon modèle de marque ou que je ne
06:47peux pas le connecter à des applications,
06:48mais je peux importer des images ou directement les ajouter à partir de mes importations Canva.
06:53Et ici par exemple, j'ai sélectionné l'image d'un petit dragon qui est en PNG.
06:58Je vais essayer, mais ce n'est pas garanti, de remplacer les ennemis par l'image de ce dragon.
07:02J'ai ici ma version 2 qui est prête, je peux la lancer et on va essayer de trouver un
07:07ennemi pour voir si celui-ci a été remplacé par l'image du dragon.
07:10Oui, on peut voir qu'on a nos dragons qui ont été remplacés.
07:14Donc bon, ça reste pour l'instant de l'image PNG.
07:17Donc ce qu'il faudrait en fait, ça serait la possibilité d'avoir un dossier avec des accès d'images
07:23en format 3D
07:24pour pouvoir ainsi avoir nos ennemis qui s'intègrent sur le décor.
07:28Mais chaque chose en temps peut être une future évolution de Canva Code.
07:31On va passer tout de suite sur notre exemple numéro 2, ici en générant une application éducative.
07:37Et pour cela, je vais demander une application pour comprendre et me balader dans le système solaire.
07:43Ma version 1 est prête et comme on peut voir ici, si je lance mon application, eh bien celle-ci
07:47ne fonctionne pas.
07:48C'est pour ça que je vais demander de corriger les bugs, celle-ci ne fonctionne pas.
07:52Et à ce moment-là, Canva Code va continuer son travail via IA Canva pour pouvoir me proposer une V2.
07:57Ce qui est bien, c'est que Canva Code m'explique les erreurs qui ont été faites, les corrige.
08:02L'agent IA me prévient en temps réel de ce qu'il est en train d'exécuter pour ainsi me
08:07proposer la V2.
08:08Celle-ci a l'air de bien meilleure qualité.
08:10Et en effet, je peux zoomer et sélectionner les planètes avec l'information de celle-ci.
08:15C'est pas mal, je vais demander maintenant de me faire l'application en 3D pour avoir un petit peu
08:20plus d'immersion.
08:21Et ainsi, j'aurai ici ma V3.
08:23Mais celle-ci ne fonctionne pas, pas grave, je vais demander de la corriger.
08:25Ou si je préfère, je peux toujours aussi, si je souhaite, me balader dans ma barre de dialogue et revenir
08:30à la version 2 qui était exploitable.
08:34Donc je pourrais soit publier ma version 2, puisque celle-ci est correcte, et ainsi en faire profiter par exemple
08:39mes élèves.
08:40Ou soit continuer mon dialogue, ici c'est ce que je vais faire, pour demander sur cette V3 de corriger
08:45ce qui ne va pas.
08:46A savoir qu'aussi, en sélectionnant n'importe laquelle de ces versions et en allant dans code, je peux avoir
08:51accès directement au code de l'application si je souhaite le copier.
08:56Et pourquoi pas l'utiliser dans une nouvelle conversation, comme on avait vu en introduction, ou alors dans un autre
09:01générateur de code.
09:03Par exemple comme CloudCode ou ChatGPT Codex.
09:05Et voici ma V4 avec la possibilité de bien me balader en 3D via ce système solaire.
09:12Alors maintenant, on va essayer de générer notre site internet.
09:15Et pour cela, j'ai travaillé un prompt qui va me créer un site internet pour évaluer une formation que
09:20j'ai donnée immédiatement et qui pousse avec une capture mail à s'inscrire à une newsletter.
09:25On va à celui-ci ajouter en éléments, à partir de notre bibliothèque Canva, une photo de nous.
09:31Et on va essayer avec CanvaCode de générer ce site internet.
09:35L'agent IA est en cours de réflexion.
09:36Le code se lance et les lignes sont en génération.
09:39Et ma version 1 avec ma petite photo vient de s'afficher.
09:43Donc ici, on a notre site internet.
09:44Bien sûr, on pourra personnaliser en termes de texte, en termes de police, en termes de couleur de texte.
09:50On peut le retravailler ici, mais dans un premier temps, je vais voir si ça fonctionne.
09:54Donc, hop, imaginons, je suis un utilisateur, je souhaite évaluer l'expérience.
09:58Donc ici, par exemple, 5 étoiles.
09:59Je mets mon nom.
10:00Il écrit le nom de la formation, le commentaire.
10:04J'accepte que mon avis soit publié anonymement sur le site.
10:07Voilà, et j'envoie l'avis.
10:09Ainsi, on voit que celui-ci dans administration apparaît juste ici, avec les 4 étoiles et le commentaire.
10:15Donc ça, c'est intéressant dans le menu qu'on va plutôt renommer avis général.
10:21Et pour la capture mail, imaginons que ici, j'accepte de recevoir la newsletter.
10:26Du coup, je m'inscris à la newsletter.
10:29Et on voit que dans avis général ici, l'adresse mail se met.
10:33Donc là, c'est peut-être dommage que justement, l'adresse mail se met en mode public.
10:37C'est pour ça que je lui ai demandé.
10:38Créer plutôt un form pour capturer l'email via l'inscription de newsletter et récupérer la data via une feuille
10:46de calcul Canva.
10:47Car c'est une option disponible et compatible avec Canva Code.
10:50La possibilité de récupérer des données, que ce soit sur son application ou son site internet généré avec Canva Code.
10:58On va voir ça tout de suite.
11:00Une fois que l'avis a été ajouté, au moment de l'inscription à la newsletter, si je clique sur
11:05« Je m'inscris sur l'email »,
11:07l'inscription a été faite en cours.
11:09Et en fait ici, en sélectionnant le form, nous avons maintenant accès à un menu « Données ».
11:16Ici, nous avons une feuille de calcul qui a été enregistrée.
11:20Elle est disponible sur notre compte Canva.
11:22Et en ouvrant celle-ci, nous verrons bien l'inscription qui a été faite avec la date, le consentement, le
11:29nom et l'email
11:30pour pouvoir ainsi récupérer l'ensemble des gens qui veulent s'inscrire à la newsletter.
11:35Sans que les données soient communiquées directement sur le site,
11:38elles seront renvoyées via notre Canva Sheet où on aura accès à partir de notre accueil
11:44ou directement en allant sur le code de notre site et en allant dans le menu « Données ».
11:49Et intention de bien respecter les règles en vigueur sur la capture et le partage de données.
11:54Donc voilà pour l'utilisation de Canva Code à partir de l'interface.
11:58A noter aussi que Canva Code évolue dans son utilisation via le menu « Éléments ».
12:02Par exemple ici, si j'étais sur une formation et que je souhaite glisser un widget à l'intérieur de
12:07celle-ci,
12:08et en décrivant ici sur le dessus le mot-clé « Chronomètre »,
12:11en sélectionnant parmi les options l'option « Code »,
12:15je peux générer un mini chronomètre en widget que je placerai dans ma présentation.
12:21Là voici, je vais pouvoir la charger et comme on a avec la nouvelle version de Canva Code,
12:26je pourrais modifier l'application pour changer les textes, la couleur, la fonte,
12:30récupérer le code si besoin.
12:32Donc super pratique pour pouvoir générer sa micro-application dans sa présentation,
12:37que ce soit un petit widget comme celui-ci, ou alors imaginons pourquoi pas ici une roue de tirage au
12:43sort
12:43avec le nom des gens que j'ai en formation pour savoir qui prendra la parole.
12:47Toujours sympa pour animer les réunions.
12:50Voilà donc pour cette mise à jour et ses nouveautés, Canva Code évolue,
12:54et je pense très bientôt on aura encore plus de possibilités.
12:57Ce que j'aimerais voir de mon côté, c'est la possibilité d'avoir accès à nos dossiers illustration Canva
13:03avec une compatibilité des fichiers 3D pour pouvoir ainsi créer des dossiers complets illustration et asset 3D
13:11pour la création de nos applications ou jeux vidéo.
13:13Ensuite, ce qui peut être intéressant aussi, c'est l'ajout de connecteurs comme on a sur IA Canva
13:19avec les différents MCP de certaines applications.
13:22Je pense notamment aux liens qui peuvent être faits avec le MCP de Leonardo.
13:26Donc Leonardo, c'est la plateforme IA de Canva où on peut générer des vidéos et des images
13:31avec les différents modèles IA et à ce moment-là, en mettant en relation les deux,
13:35avoir la possibilité de créer une application qui peut utiliser notre compte Leonardo
13:40pour générer des images ou des vidéos IA.
13:42J'attends avec impatience de voir si mes souhaits seront réalisés,
13:46mais avec Canva je ne veux pas.
13:47En tout cas, si tu veux essayer Canva Code, tu l'as en accès dans ton compte gratuit,
13:52mais si tu veux aller plus loin et découvrir non seulement Canva Code avec plus de crédit IA,
13:56mais aussi toutes les nouveautés et toutes les fonctionnalités de Canva Pro,
14:00eh bien, n'hésite pas à passer par mon lien disponible en commentaire et en description
14:04épinglé, 30 jours d'essai gratuits à l'inscription via ce lien.
14:09C'était Marco, Canva Verify Expert.
14:11Je te dis à très bientôt sur Canva avec Marco pour d'autres tutos,
14:14d'autres découvertes et d'autres astuces autour de Canva.
Commentaires