Transcription
1. Introduction: Lorsque vous essayez de
concevoir votre propre site Web, vous commencez
généralement par
un grand nombre de ces griffonnages, croquis, idées, concepts pour vous retrouver avec un site Web défectueux
qui ne fonctionne pas Eh bien, plus maintenant. Dans
ce cours actuel, je vais vous montrer comment exploiter le pouvoir de l'intelligence
artificielle, particulier Claude pour
concevoir votre site Web, particulier le développement
Web frontal Ainsi, vous n'avez pas
à penser au codage, style, aux graphismes, aux
animations, qui sont généralement
fastidieux Ils prennent beaucoup de
temps, beaucoup d'efforts et se cassent assez facilement. Je vais vous montrer comment
contourner l'ensemble du processus. Aucun code n'est nécessaire, sorte que vous vous concentrez simplement sur une seule chose en tant que professionnel de la
création, la conceptualisation,
l'idéation, vos Et je vais vous montrer comment créer et concevoir le site Web, le
développement Web
frontal, spécifiquement pour donner vie à votre idée Qu'il s'
agisse de navigation, de
style, de graphisme, d'animation. Des concepts. Vous êtes en train
de constituer votre portefeuille. Vous créez votre
propre marque personnelle. Les applications
sont infinies. Je vais
vous montrer les tactiques, comment les utiliser de
la meilleure façon possible pour
intégrer Claude dans vos efforts de développement Web initial, sorte qu'à la
fin du cours, vous aurez un site Web magnifiquement conçu pour
présenter votre travail, votre parcours
créatif et vos projets
2. Votre projet: Le projet s'articule autour de
l'application des principales leçons apprises pour créer et créer votre
propre site Web de plusieurs pages Ensuite, vous
allez partager vos résultats avec la
communauté pour obtenir des commentaires.
3. Poser les bases: Bon retour. Maintenant, il
suffit naviguer vers Cloud et vous
allez vous connecter, et vous arriverez sur la fenêtre de l'interface
principale, la fenêtre d'invite ici. Maintenant que vous
allez utiliser le Cloud dans le cadre de l'
application actuelle pour le développement Web, particulier le développement Web
frontal, nous devons établir des bases et des
tactiques importantes pour garantir le
succès de notre application. Tout d'abord, nous
allons utiliser le
modèle de base suivant, Sonic Five, qui est disponible pour tous les
utilisateurs utilisant le cloud .
Qu'il s'agisse de
la version gratuite ou de la version pro, vous pouvez l'
utiliser assez facilement. Si vous êtes à un
niveau différent ou si vous
souhaitez opter pour une version différente,
cela dépend entièrement de vous. Vous pouvez opter pour Opus
Five, Fable ou Fab Five. N'oubliez pas qu'au fur et
à mesure que vous avancez dans le modèle, vous
utiliserez plus de crédits, ce qui est très, très
important à garder à l'esprit, en particulier pour les tâches complexes que la conception d'un site Web, édition d'un site Web, codes lors de la conception, de la
personnalisation, de l'édition de divers éléments Il s'agit donc d'un processus de
va-et-vient, peut être très
exigeant de la part du modèle d'IA. Cela consommera donc
beaucoup de crédits si vous êtes sur un modèle très
avancé. Pour les modèles de base ou les modèles de
moindre complexité, vous pourriez accomplir
le
travail sans surconsommation
de crédits Donc, si vous utilisez la version
gratuite et que vous optez pour les modèles avancés, vous pourriez être à court de
crédits assez rapidement. Ensuite, vous devez
attendre l'heure de réinitialisation, puis vous pouvez continuer. Si vous optez pour le
modèle actuel ou un modèle inférieur, nous pourrions opter,
par exemple, pour Sonic Five, qui est celui que nous
allons utiliser, qui est le plus efficace
pour les tâches quotidiennes. Cela fait le travail,
mais cela ne pèse pas vraiment sur la consommation réelle
de crédit De cette façon, vous pouvez effectuer
plus de modifications, plus de commentaires,
plus d'itérations grâce à la
personnalisation du site Web De cette façon, vous gagnez
du temps, vous économisez des efforts et vous obtenez toujours de bons
résultats. Gardez donc cela à l'esprit. C'est donc un concept très
important que nous devons comprendre. Comme nous nous occupons de
la conception d'un site Web, particulier du développement Web
frontal, nous allons
tweeter ce projet, ce que nous faisons
de manière récurrente, en particulier dans le contexte
professionnel. Vous ne créez pas un
design une seule fois, et c'est tout. Vous devez réellement
modifier le site Web. Vous devez
affiner la sortie. Vous devez vous assurer que vous êtes
en mesure de toujours
revenir sur votre travail précédent et de reprendre là où
vous vous êtes arrêté. C'est pourquoi nous devons l'
aborder en tant que projet. C'est très critique
et très important. Ce que nous allons
faire maintenant, c'est cliquer sur O plus, ce qui signifie ajouter un nouveau projet, et nous allons créer un nouveau projet pour notre application
pratique. Appelons cela le développement frontal
et web. OK. Nous pouvons donc l' utiliser en
fonction de nos préférences. Vous pouvez l'appeler comme vous
le souhaitez,
cela dépend entièrement
de vous, n'est-ce pas ? Qu'est-ce que nous essayons de réaliser ? cadre de la portée
de l'application, nous sommes en mesure de
décrire le projet, objectifs, le sujet, etc. Vous pouvez le modifier ou nous y
reviendrons plus tard. Cela dépend entièrement de vous. Ce que nous allons faire, c'est
simplement donner un thème de base. Nous allons
concevoir le front-end d'un site Web pour un projet
commercial, application
créative
, etc. C'est aussi simple que ça. C'est l'objectif principal.
C'est le thème principal. Tu pourrais être précis. Cependant,
dans l'état actuel des choses, ce n'est pas si nécessaire. Ainsi, une fois que vous avez créé le projet, étape fondamentale que nous devons aborder, car cela garantira
qu'à un stade ultérieur, une fois que vous aurez votre site Web
actuel et que vous souhaiterez modifier des
éléments, peaufiner des choses, vous pourrez le revoir et sélectionner un certain
segment du site Web, le modifier en quelques clics au lieu
d'
avoir à parcourir l'intégralité
recommencez le processus. Ainsi, une fois que vous avez accédé à
l'interface du produit, vous avez l'
interface de chat ici. Vous avez la possibilité d'
ajouter des fichiers, prendre une capture d'écran, des
compétences, des connecteurs , des
plugins, etc. Regardez le côté
droit ici. Nous avons des instructions. Nous avons obtenu de la mémoire, puis nous avons obtenu le contexte et les tâches
récurrentes planifiées. Ils sont très puissants
si vous voulez faire passer votre application de
développement Web frontale à un tout autre niveau. Laissez-moi vous montrer Tout d'abord, nous allons
ajouter des instructions. Nous allons dire à Claude
ce que nous essayons de faire. Cela fournira à Claude des instructions et des
informations
pertinentes pour les discussions basées
sur ce projet spécifique. Alors soyez précis ici. Qu'est-ce que vous essayez
de réaliser, n'est-ce pas ? Essayez-vous de concevoir un site Web pour votre entreprise,
pour votre entreprise ? Projet sur lequel vous travaillez ou
sur lequel vous essayez simplement de développer vos compétences en matière de développement
Web frontal. N'hésitez pas à ajouter le plus de
détails possible. Cependant, pour simplifier
les choses, je vais vous montrer le niveau d'instructions de
base que vous pouvez simplement
injecter et vous pourriez obtenir des résultats vraiment
puissants. Quelles sont donc les instructions
de base ? Je vais dire à
Cloud que nous allons
travailler sur le développement Web. Ou disons une entreprise
hypothétique, nous allons travailler sur
un café et une boulangerie, n'est-ce pas Nous allons travailler sur le
développement du site Web,
le développement frontal une
application hypothétique spécifique, et vous pourriez injecter et ajouter votre propre application unique en
fonction de vos Nous allons donc travailler sur
le développement Web d' une boulangerie Cafe Slash Pour créer un design de site Web d'
apparence professionnelle, telle sorte que n'hésitez pas à inclure toutes les contraintes,
toutes les préférences. Le design est professionnel
et modifiable, ce qui est très important
car nous aimerions le modifier facilement. Personnalisable. Les codes pertinents pour le site Web une fois créés, y compris le HTML, le CSS ou
tout autre
code pertinent, sont facilement extraits et modifiés pour une édition et une utilisation
futures. Donc, ce que j'
essaie de faire ici, jeter les bases
en fonction de mes préférences. Comme je l'ai mentionné, dans le cadre
de la démonstration, nous allons travailler
sur un projet hypothétique, qui est essentiellement une entreprise C'est un café et une boulangerie, et nous allons travailler sur le design de
développement web frontal pour c. N'hésitez pas à l'utiliser pour
votre propre application unique, votre propre entreprise,
votre propre projet, votre propre idée. Suivez
la même structure. Donc, cette invite les instructions
de base ou l'
invite pour les instructions, nous
indiquons
à Cloud que le design doit être assez professionnel
et modifiable Quelque chose n'est pas statique, quelque chose que nous pouvons
corriger et avec lequel nous pouvons travailler. Facilement personnalisable
pour référence future, si je souhaite
personnaliser le site Web, je reviens au projet. Je suis capable de le personnaliser facilement. Les codes pertinents
pour le site Web, une fois créés,
y compris le HTML, le CSS
ou tout autre code pertinent, sont facilement extraits et modifiés pour une édition et une utilisation
futures. C'est très puissant
car cela
indiquera à Cloud lorsque vous
concevez quelque chose, s'
assurer que le
code que vous créez est quelque chose
que je pourrais utiliser, récupérer et personnaliser. Si vous le déplacez
, par exemple, vers votre propre hébergement, par
exemple, si vous avez une utilisation plus avancée, vous essayez de
choisir un certain code le code que
vous avez créé, comme un extrait de code pour le fichier
HTML ou le fichier CSS, vous pouvez simplement
accéder à votre projet, obtenir ce code et le
placer directement sur votre
site Web si vous vers votre propre hébergement, par
exemple,
si vous avez une utilisation plus avancée, si
vous essayez de
choisir un certain code
dans le code que
vous avez créé,
comme un extrait de code pour le fichier
HTML ou le fichier CSS,
vous pouvez simplement
accéder à votre projet,
obtenir ce code et le
placer directement sur votre
site Web si vous
en avez sorte de compétences avancées en matière de
codage ou d'édition. Cela vous donne donc la flexibilité future dont vous aurez besoin ultérieurement. Ensuite, la mémoire pour
le projet proprement dit. En gardant à l'esprit
la fonction de mémoire, vous devez l'activer une fois que
vous avez accédé aux paramètres. Ainsi, une fois que vous avez accédé
aux paramètres, assurez-vous d'activer ou de désactiver la mémoire
selon vos préférences. Cependant, si vous activez la mémoire, elle commencera à enseigner à Cloud en fonction des
discussions ici. Donc, si nous avons une discussion,
elle figurera sur la liste, mais une autre discussion
figurera également dans
la mémoire du projet. Cela est très important pour les futures applications de développement. Et c'est l'un de mes cas d'utilisation
ou d'utilisation réels
préférés pour le contexte du
projet, l'application du projet,
qui est le contexte. Nous pourrions donc ajouter des PDF, des documents, d'autres références textuelles à
ce projet réel Je suis là en plus. J'ai la possibilité de télécharger les fichiers, ajouter certains contextes
ou même de les connecter à codes
externes si vous avez configuré
le code dans le cadre
de Github, par exemple Cependant, pour notre application, comme je l'ai mentionné, nous n'
allons rien coder. Je vous montre
comment effectuer
le
développement Web frontal à partir de
zéro via le cloud
sans écrire une seule ligne.
Cela étant dit, nous avons établi les bases
nécessaires pour poursuivre notre application de
développement Web. Nous avons configuré notre projet, nous avons mis en place nos
instructions, la mémoire est activée en
fonction d'une préférence. Maintenant, pour ce qui est du contexte, je vais vous montrer
ce que nous allons
utiliser pour nous aider à passer
à la vitesse supérieure et à courir. Cependant, à ce stade, nous ne faisons que jeter
les bases d' une application de
développement Web frontale réussie. fur et à mesure que vous
progressez dans le
projet, Au fur et à mesure que vous
progressez dans le
projet,
gardez-le à l'esprit Vous avez la possibilité de créer .
Vous avez la possibilité de créer
une tâche de planification dans laquelle
vous pouvez , par
exemple, la nommer,
donner des instructions, et si vous
souhaitez, par exemple, Cloud
scanne automatiquement un
code spécifique, par exemple, pour le site Web que vous ajoutez, puis
vous en donne sorte de feedback que vous
approuvez manuellement
ou que vous approuvez
automatiquement dans le Cloud. C'est quelque chose d'un
peu plus avancé pour une étape ultérieure une fois que vous aurez
terminé le projet lui-même. Si vous ajoutez certains codes ou si vous connectez le Cloud à codes
externes
par le biais du contexte ou des connecteurs, par
exemple, vous ajoutez un
connecteur, vous ajoutez un plugin. cloud a la capacité
d'accéder aux outils externes que
vous lui avez connectés. Vous pouvez ensuite
planifier des tâches pour lesquelles Cloud peut effectuer
des actions spécifiques, et il les approuve automatiquement ou vous les transmet
pour approbation manuelle. Il s'agit d'une tactique avancée,
gardez à l'esprit qu'elle existe. Si vous êtes un développeur Web
professionnel, vous aimeriez
que Cloud passe par une série de codes de
temps en temps. Il s'agit plutôt d'un outil avancé que vous pourriez utiliser pour
vous aider à réaliser ces
tâches répétitives sur une base planifiée. Cela étant dit, nous en sommes déjà à ce stade. Nous avons mis en place les bases pour démarrer notre application de
développement Web frontale.
4. Ajouter l'inspiration au design: Et bon retour. J'ai donc
établi notre projet, et nous avons jeté les
bases de notre application. C'est à cette
étape que nous allons
ajouter de l'inspiration.
Tu m'as bien entendu. Dans le cadre de votre développement
Web frontal et de votre application sans code, nous allons trouver de l'
inspiration Par exemple,
avez-vous déjà consulté un certain site Web ou votre propre site Web, un
certain papier sur lequel vous avez écrit votre design ou un schéma
ou capture d'écran que vous
avez obtenus des fins d'
inspiration dans le
cadre de votre conception ? C'est à cette
étape que nous allons
commencer à l'ajouter à notre contact. Nous allons maintenant
ajouter quelques fichiers dans le cadre de
notre démonstration. Nous allons travailler sur le
développement Web frontal d'un site Web,
pour un café et une boulangerie Par exemple,
il s'agit de l'étape où vous ajoutez les éléments de marque. Vous pouvez ajouter un logo. Vous pouvez ajouter des
palettes de couleurs si vous en avez une. Vous pouvez ajouter
le message de marque. Vous pouvez ajouter
une capture d'écran d' un certain design que vous avez vu quelque part à des fins
d'inspiration, ou même faire référence
à des sites Web que vous avez trouvés très
inspirants pour vous
aider à créer un design unique pour
votre site Web, des images
ou des photos que vous
avez capturées avec votre site Web, des images
ou des photos que vous votre appareil photo ou quelque chose que vous avez écrit sur une
feuille de papier, littéralement Le contexte que vous pourriez
ajouter pour vous aider à créer votre
site Web est assez infini Voici quelques éléments
que vous pourriez ajouter pour
vous aider à créer le contexte
du site Web. Vous pouvez ajouter le logo. Vous pouvez ajouter une image que vous avez capturée avec
votre appareil photo. Vous allez dire que vous
marchez dans la rue. Vous avez trouvé une belle
plante, un arbre ou une fleur. Vous êtes inspiré pour ajouter ce
design à votre site Web. Vous prenez une image, vous pouvez la
télécharger dans le contexte. Vous pouvez également prendre une capture d'écran, par
exemple, pour votre
propre site Web actuel. Et ajoutez-le si
vous essayez de
modifier un
site Web existant, ou mieux encore. Imaginons, par exemple, que vous
êtes en train de prendre une tasse de café
et que, sur une feuille de papier, vous esquissez le design d'un site Web. Prenez-en une photo
et ajoutez-la ici, même sur une serviette Même une URL, par exemple, pour votre propre site Web
que vous utilisez actuellement et que
vous souhaitez modifier, vous pouvez l'ajouter
ainsi qu'une partie d'un fichier PDF, ajouter tous ces détails
ou images, captures d'écran. Je vous donne toutes ces idées inspirantes pour vous aider
à voir que vous êtes capable
d'ajouter de nombreux détails pour vous aider à
démarrer À ce stade, l'objectif de cette conférence
est vous inspirer, d'
obtenir
votre logo, vos images, vos captures d'écran, votre site Web, vos captures d'écran, le design sur lequel
vous travaillez, le
document Word,
PowerPoint, PDF,
El file, quelle que le
document Word,
PowerPoint, PDF,
El file, soit la
référence que vous avez, même la serviette
que vous êtes en train de travailler sur le document que vous avez griffonné. N'hésitez pas à
le scanner et à simplement commencer
à ajouter
tous ces éléments au contexte
du projet, car
cela aidera Claude à
analyser comment avancer plus facilement
et efficacement À ce stade,
commencez donc à ajouter vos éléments de
marque, vos logos, une capture d'écran de votre site Web actuel si
vous souhaitez le modifier, quelques éléments d'inspiration
que vous avez collectés, et nous sommes prêts à nous lancer dans le
développement Web frontal de notre site Web
5. Créer un site Web à page unique: Et bon retour.
Nous allons maintenant créer un site Web d'une page. C'est très important pour toute entreprise, tout professionnel de la
création,
tout professionnel en activité
, agent de commercialisation, professionnel de la
vente,
et la liste est longue Généralement, lorsque vous essayez créer, par exemple, un lancement de produit, un
nouveau déjeuner d'affaires un produit que vous
aimeriez présenter ou une page de destination
pour un événement que vous organisez,
vous créez généralement un site Web
d'une page, n'est-ce pas ? Supposons que, dans le cadre de
notre application actuelle, nous ayons le lancement
de l'entreprise, qui est une boulangerie et un café, appelés hypothétiquement mugs Il s'agit d'une activité hypothétique uniquement à des fins de
démonstration Tous ces détails sont
simplement hypothétiques pour que vous puissiez
voir comment ils peuvent être facilement adaptés à
votre situation unique. Nous allons donc créer
un site Web d'une seule page manière très créative pour annoncer le lancement
de l'entreprise. Alors, comment allons-nous
créer un site Web d'une seule page ? Cela peut fonctionner pour
tout, d'ailleurs, pour un déjeuner de produit,
un déjeuner d'affaires, certains détails, une page de vente, peu importe ce que c'est, une page de
détails sur un événement spécifique concernant votre
entreprise, quel qu'il soit. C'est complètement réglé, donc
ce que nous allons
faire , c'est dire
à Claude d'agir tant que
développeur Web professionnel, en particulier. Développement frontal et Web dans lequel vous allez
m'aider à créer un site Web d'une seule page, qui inclut les éléments suivants. Il s'agit d'une invite très puissante. Il fournit des contextes
et des exigences clairs. Le logo figurant dans les fichiers du projet. Découvrez à quel point c'
est puissant lorsque vous ajoutez un grand nombre de fichiers importants au contexte Claude est capable de sélectionner tous ces détails et de
les associer à notre application Le logo des fichiers de projet, la palette de
couleurs des différentes images ajouté un design
élégant et professionnel. Ensuite, nous allons passer à Tell
Claude entièrement personnalisable. Je vais donc utiliser Tag
Cloud ici, agir en tant que développeur
Web professionnel, particulier dans le cadre d'un
développement Web dans lequel vous
allez m'aider à créer
un site Web d'une seule page. C'est à cette étape que
vous allez ajouter votre propre
application unique pour une entreprise,
votre entreprise, votre
site Web, où qu'il se trouve, quelque chose qui est lié à votre propre application pour laquelle vous appliquez
ces tactiques. Aidez-moi à créer un site Web d'une seule
page pour ma nouvelle entreprise appelée mugs, qui est un café et une boulangerie, qui comprend les éléments suivants Ensuite, je vais le dire à Claude, me
poser toutes les
questions pertinentes en cours de route. Il s'agit donc d'une structure
rapide très puissante, car elle indiquera à Cloud d'agir en tant que développeur Web
professionnel, particulier dans le domaine
du développement Web frontal dans lequel vous
allez m'aider à créer un site Web d'une seule page
pour ma nouvelle entreprise J'ai ajouté le
thème, les contacts, droite, y compris le logo des fichiers
du projet, la palette de couleurs des
différentes images ajoutées, design élégant et
professionnel,
un site entièrement personnalisable. Et du code. Et je vais ajouter qu'est-ce que j'essaie d'obtenir
de ce site Web actuel, ou je pourrais simplement le garder tel quel. Donc, si vous souhaitez simplement
opter pour un site Web d'une page, ce qui est suffisant pour
votre entreprise, tant mieux. Si vous avez une
tâche spécifique à accomplir, par exemple annoncer le lancement
de l'entreprise, vous pouvez ajouter cette exigence
spécifique. Je vais donc
rester précis. Site Web d'une seule page pour ma
nouvelle entreprise appelée UGS, qui est un café et une boulangerie Le
site d'une seule page doit annoncer le jour
et la date d'ouverture à venir. Allons-y. Je vais laisser
la date et le jour vides car Claude me les
demandera certainement si je souhaite
modifier la date du déjeuner
ou les dates d'ouverture ou des
dates spécifiques à ma guise. Et si on y allait
pour le jour et l'heure ? Pour y ajouter plus de variation. Comme vous pouvez le voir ici, j'ai commencé par
une invite générique. J'ai ensuite personnalisé
l'invite dans le cadre de pratiques d'
ingénierie
appropriées pour inclure un certain contexte, un
thème, des références, des
applications spécifiques afin que vous puissiez
voir exactement comment je
pourrais m'y prendre pour passer d'un site Web générique d'une
seule page
à un site Web spécifique d'une seule
page. De cette façon, vous pouvez
vous inspirer et vous frayer un chemin
grâce à votre propre application unique Allons-y. Claude est donc actuellement en train de travailler
sur le projet. Comme nous pouvons le voir ici, cadre du projet, nous
avons entamé une nouvelle discussion. C'est très puissant car cela nous
permettra de suivre le processus à
plusieurs reprises sans avoir à réinitialiser les choses
encore et encore Alors, quels
champs de direction visuelle conviennent à Mug ? Pourquoi Claude
m'a-t-il posé cette question ? Parce que cela fait partie de
mon objectif stratégique. Posez-moi toutes les
questions pertinentes en cours de route Il s'agit d'une tactique
d'ingénierie rapide avancée qui permet au modèle d'IA de
vous aider à améliorer le rendement Quelle est donc la direction visuelle ? Boulangerie chaleureuse et rustique avant-gardiste, textures
douillettes, élégantes et
minimalistes, audacieuses et modernes. Laissez-moi décider en fonction du logo. Donc, si vous avez votre
propre logo spécifique pour votre entreprise,
pour votre entreprise, et que vous souhaitez simplement le reprendre
à partir de là, cela vous aidera à
faire le travail. Cependant, à des fins de
démonstration, je vous montre l'étendue de la flexibilité et
les modifications que vous pouvez apporter et que vous pouvez apporter
tout au long du processus de conception. Optez pour l'élégance
et le minimalisme. Alors de quelles sections
la prochaine page Zoom a-t-elle besoin ? C'est très, très puissant. Cela n'a
pas été placé intentionnellement dans l'invite, car
cela donnerait à Claude la marge de manœuvre ou la flexibilité suggérer des éléments à vérifier C'est très important si
vous êtes un débutant
complet le développement Web ou le développement Web
frontal, ou si vous n'avez pas
assez d'inspiration
pour décomposer les
sections de la page Vous avez déjà décomposé les sections de la page
en fonction du contexte, vous pouvez simplement les ignorer complètement en cliquant sur Ignorer. Toutefois, si ces résultats vous
inspirent, n'hésitez pas à
les personnaliser , car tous
ces résultats sont basés sur
la solide
tactique d'ingénierie rapide que sont basés sur je vous enseigne. Alors, de quelles sections la
prochaine page Zoom a-t-elle besoin ? Juste le logo, les données d'ouverture et le
compte à rebours, plus l'adresse, le texte d'un court article
sur nous, inscription par e-mail
pour les notifications de lancement, les réseaux sociaux Et si on les ajoutait tous ? Je vais le dire à
Claude. Allons-y. Tout ce qui précède ou je peux
simplement les sélectionner tous. Cela dépend entièrement de moi. Allons-y.
Transmettez-le ensuite sur Cloud. Nous allons créer la
page complète pour moi. En gardant à l'esprit,
nous nous concentrons simplement sur le développement
frontal et Web
à ce stade. Pour les utilisateurs avancés, c'
est quelque chose de très puissant pour rationaliser votre processus de développement
Web. Cependant, dans le cadre de
notre application, nous nous concentrons sur le développement web
frontal Jetons un coup d'
œil aux commentaires. J'ai compris, élégant et minimaliste
avec tout le logo, adresse du
compte à rebours, un texte de présentation, inscription
par e-mail et des liens sociaux Avant de commencer à construire, j'ai
besoin de quelques détails concrets. J'utiliserai des
espaces réservés de bon goût pour tout ce que vous préférerez
remplir C'est très puissant
car cela
me permettra de jeter un œil au design, de
prendre le canevas et le
personnaliser ultérieurement
en fonction de mes préférences. Quelles sont la date et l'
heure d'ouverture, l'adresse et le lieu, les identifiants sociaux, une ou deux lignes à
propos de Mugs, e-mail de contact Cela apparaîtra en fonction de
votre propre application unique. N'hésitez pas à ajouter vos propres
informations si vous le souhaitez. N'hésitez pas à répondre à
ce que vous avez et à ignorer l'espace réservé au reste pour indiquer clairement
tout ce qui manque, afin de pouvoir le repérer
et le remplacer plus tard Je vais donc dire à
Claude de procéder à places pour chacun d'entre eux.
Tu vois à quel point c'est puissant ? Maintenant, j'ai un canevas
personnalisable complet
prêt à l'emploi en
fonction de la configuration de mon projet. C'est donc très puissant
car si vous vous souvenez, le
cadre de la
base du projet d'installation, nous avons demandé
que tout soit assez
personnalisable, viable et professionnel. C'est donc la base de la base que
vous voyez en ce moment. Si nous n'avons pas suivi les
étapes que je vous ai enseignées et que nous
les avons suivies dans
l'ordre, la transition depuis Cloud
sera très différente. C'est pourquoi de nombreux étudiants, de nombreux apprenants, de nombreux
professionnels obtiennent des résultats grâce à l'utilisation
de base du cloud, alors que des résultats complètement
différents proviennent de l'
utilisation professionnelle du cloud. C'est là que la
distinction a lieu. Si vous utilisez
Cloud avec désinvolture avec ces solides connaissances sur la façon
de l'utiliser
dans le cadre de la
séquence que je vous enseigne, vous obtiendrez
des résultats très différents Cependant, si vous suivez la méthode stratégique étape par
étape que je vous montre,
vous obtiendrez des résultats de qualité
professionnelle,
ce qui vous aidera à
voir la différence,
et vous serez ce qui vous aidera à
voir la différence, en mesure de vous
démarquer en fonction du résultat que vous générez, qui
est tout à fait unique, professionnel au niveau
par rapport à un apot de base générique qui n'est pas complètement
quelque chose que vous pourriez utiliser dans le cadre de vos
activités quotidiennes. Comme nous pouvons le voir
ici, c'est parti. Claude fait tourner le moteur pour effectuer l'ensemble du
processus. Jette un œil à ça. Comme nous pouvons le voir
ici, voici le site à venir, un seul point d'index HTML,
tout, HTML, CSS, JS, autonome, ainsi que votre logo enregistré
dans les ressources Excellente. Qu'est-ce qu'il y a dedans, tic ? Regardez les détails où se trouvent les espaces réservés et
sont tous marqués Excellente. Voyez à quel point c'est
professionnel. Il s'agit de créer le code proprement dit pour moi en le référençant
par le biais du logo Nous avons donc obtenu le logo. Et jetez un œil au fichier et
au site Web lui-même, site Web une seule page ici. Nous avons donc des tasses, un café et une boulangerie. Quelque chose de chaud se prépare, un nouveau lieu de quartier
pour les matinées calmes, jambon, l'espresso et le pain cuit de
toutes pièces tous les jours Ensuite, nous avons obtenu l'
espace réservé pour la date. Quand je dis simplement à Claude, vas-y, change la date. Nous allons régler ce problème automatiquement. Jetez ensuite un œil
au petit extrait sur
le thème du café Je peux le modifier comme je le souhaite. Jetez-y également un œil pour
les détails. Restez au courant, soyez les
premiers à franchir la porte. Vous pouvez simplement le connecter ultérieurement.
Une fois que
vous aurez terminé le développement Web
frontal, nous aurons les
réseaux sociaux ici Si nous souhaitons les
connecter d'ailleurs, et une fois que vous aurez cliqué sur l'un
d'entre eux, il vous indiquera simplement d'ouvrir
le lien en externe, car ceux-ci sont considérés comme
des espaces réservés
aux liens eux-mêmes En gardant à l'esprit que nous sommes en train de créer un site Web d'une
seule page, et notre application
est entièrement
exempte de code et spécifiquement destinée au développement Web
frontal Comme vous pouvez le voir ici, en cas d'erreur, Claude
les repérera en cours de route. Je vais donc dire à
Claude de corriger les erreurs. C'est essentiellement quelque chose
que vous pourriez faire avec Claude lorsqu'il y a des erreurs, suffit de dire à Claude de continuer, trouver une
erreur et de corriger l'erreur. Il s'agit d'un site Web d'une seule
page très professionnel et élégant. Comme vous pouvez le voir ici, nous avons obtenu les espaces réservés pour le logo lui-même dans le cadre
du site Web d'une seule page Maintenant que Claude
corrige les erreurs, j'ai la possibilité de le télécharger
sous forme de fichier HTML ou de l'ajouter
dans le cadre de mon projet Il suffit de dire à Cloud : allez-y, ajoutez-le au projet de développement
Web frontal, qui est une
autre application ou un autre niveau pour faire avancer
votre application, où vous pourrez
obtenir le résultat que vous générez pour
affiner votre projet Ainsi, chaque sortie que vous obtenez
du Cloud peut être ajoutée au projet pour obtenir meilleurs
résultats au fil du temps. Et supposons que vous soyez un développeur Web
professionnel, vous pouvez simplement
parcourir le code ici. Vous pouvez cliquer sur les
commentaires si vous
souhaitez commenter
ou modifier quelque chose. Comme je l'ai mentionné, notre
application est exempte de code. Cependant, pour que vous puissiez voir exactement ce
qui se passe si vous intéressé applications
supplémentaires
ou si vous êtes capable de coder, ou si vous souhaitez en savoir
plus utilisation de ces codes et les appliquer à vos
propres pratiques uniques, vous pouvez voir pratiquement toutes ces fonctionnalités
et options
devant vous pour que vous puissiez les obtenir inspiré et pour l'appliquer à
votre situation unique. Nous pouvons donc cliquer sur
l'icône Toggle ici. J'ai la possibilité de consulter
le code dans son intégralité. Pour la conception du site Web. J'ai la possibilité de le copier. J'ai la possibilité de le
télécharger pour le modifier ultérieurement ou de l'utiliser
dans le cadre de mon hébergement actuel, par
exemple, de site Web. Si vous utilisez un
hébergement de site Web ou un créateur de site Web, comme Wordpress, par exemple, vous pouvez simplement
prendre le fichier HTML et l'ajouter à votre page
Wordpress, par
exemple, à droite, dans le cadre
d'une page nouvellement créée Ce sont donc des applications tout à fait
uniques pour vous inspirer. Cependant, à ce stade, tout ce que nous faisons
est toujours
entièrement intégré à Claude
et sans code. Nous avons donc notre site Web, un site Web d'une seule page
entièrement conçu. Comme on peut le voir ici, Claude a ajouté une date
hypothétique simplement pour corriger les erreurs, ce qui
est assez Nous obtenons une
date hypothétique, un compte à rebours, et je pourrais simplement modifier n'importe quelle partie du processus en
fonction de mes préférences Il s'agit donc simplement
du résultat initial que nous recevons de Claude. Il s'agit d'un site Web d'une seule page
basé sur le contexte actuel.
6. Design Customization: Bon retour. Nous avons donc obtenu notre résultat initial grâce au Cloud, et en général, tout site Web
nécessite une certaine personnalisation. cadre de la
présente conférence, je vais vous montrer
comment personnaliser
le résultat de Cloud en
fonction de vos préférences. Vous pouvez simplement
changer les polices, les graphismes,
les couleurs, ajouter certains éléments. Cela dépend entièrement de nous. Comme nous pouvons le voir ici, à partir de la sortie de base, nous avons obtenu des espaces réservés
pour le logo lui-même Et selon mes préférences, je ne veux pas
avoir à m'occuper de segments provenant
des espaces réservés, et j'aimerais que tout
soit simplement prêt à fonctionner Je vais donc à Ta Claude. L'image du logo est
cassée sur le site. Assurez-vous que le logo
est entièrement visible et modifiez ce qui est nécessaire
pour que cela se produise. Cela prendra Cloud. Tu
as une certaine flexibilité. Mon résultat final est assez
simple. J'aimerais que
mon logo soit présenté directement ici dans le
cadre du design. Comme vous pouvez le constater, ici,
il s'agit d'un processus de va-et-vient, typique de tout modèle d'IA,
qui fait partie d'une
interaction stratégique avec le modèle d'IA. Vous pouvez obtenir les
résultats que vous préférez en de vos préférences à
chaque fois. Claude est simplement en train
de suivre le processus et de
regarder les fichiers réels ici. Et comme vous pouvez le voir ici, le
format du processus est différent et il trouve toujours une sorte d'erreur
de formatage,
car le logo semble correspondre à la palette
de couleurs réelle à l'origine de l'erreur, ce qui est une bonne chose à gérer pour le moment. Pourquoi ? Parce que si vous
le faisiez manuellement, vous
régleriez vous-même l'erreur. Ainsi, une fois que nous rencontrons une erreur, il
suffit de la renvoyer à Claude, afin
que Claude soit
en mesure de corriger l'
erreur en notre nom. Maintenant, comme nous pouvons le voir ici, on y arrive presque. Je vais donc
dire à Claude que le logo doit être exactement placé sur le site
avec un cadre circulaire. Jusqu'à présent, le logo n'est pas
affiché. Allons-y. Ainsi, tout eddor que nous
rencontrons manuellement, apporte des éléments
de marque,
votre logo, un format différent ou des palettes de couleurs différentes, et que vous essayez de les
afficher, sont des eddors typiques
auxquels tout développeur,
tout développeur Web frontal aura du mal à faire face dans le cadre
de la Eh bien, nous n'avons pas à le faire. En suivant simplement les
tactiques que je vous enseigne, nous pouvons
simplement expliquer à Claude comment procéder au processus de
personnalisation et
laisser Claude faire le gros du travail pour nous en termes de
modification du code, de
personnalisation de la sortie jusqu'à ce que nous
obtenions le
design final que nous préférons Comme nous pouvons le constater, Claude a essayé d'
intégrer quelques
modifications au logo, mais il a quand même
eu du mal à
le faire correspondre
exactement à nos préférences C'est donc très important. Comme nous pouvons le voir ici, nous pouvons effectuer
diverses modifications
afin d'obtenir les résultats
que nous essayons d'obtenir Claude essaie donc de le
réparer encore et encore, encore et encore jusqu'à ce que cela soit fait. Tu vois à
quel point c'est puissant ? Allons-y. Nous avons donc
pu voir directement devant nous toutes
les itérations effectuées par Claude et que vous deviez
généralement effectuer
manuellement pour y parvenir, ce qui nous
a généralement effectuer
manuellement pour y parvenir, ce permis de
gagner du temps et de nous éviter tous
les tracas Et c'est parti.
Nous pouvons voir le logo magnifiquement
présenté devant nous.
7. Ajouter des animations pour le site Web à page unique: Bon retour. Nous
avons donc ajouté avec succès un joli logo dans le cadre de
notre site Web d'une seule page. Maintenant, ajoutons d'autres
personnalisations, non ? Nous sommes en train de développer le site web
frontal, et nous pourrions procéder
à une série de personnalisations en
fonction de nos préférences Et
si je voulais le modifier, par
exemple, pour y ajouter plus
d'animation. Quelque chose de chaleureux se prépare, par
exemple. Je pourrais simplement prendre une capture d'écran
par ce biais, la glisser-déposer
directement ici, ou simplement surligner l'élément, copier et le coller dans Cloud. Je vais le dire à
Cloud. J'aimerais aussi
ajouter de l'animation.
Allons-y. Soulignez ceci. Quelque chose de chaud se prépare, tel qu'il se transforme en. Disons que quelque chose de
chaud est en train de cuire. Nous y voilà dans un style animé. Suggérez plusieurs animations
à sélectionner. C'est parti. Cela le dira donc à
Cloud. Allez-y. J'aimerais animer ceci. Si vous avez une animation spécifique en tête, cela
dépend entièrement de vous. Cependant, si vous souhaitez
passer en revue différentes options, alors que vous essayez de trouver le design qui vous convient le mieux,
la meilleure animation, ce message indiquera à
Claude, allez-y, listez quelques animations pour moi, puis je
trouverai celle que j'aime le plus. Quel style d'animation convient le mieux à
Brewing to Cooking Swap ? Doux dégradé croisé, rouleau vertical, type précédent, transformation bleue ? Eh bien, je pourrais le dire à Claude. J'aimerais tous les
tester. Alors affichez-les un par un manière interactive dans le
chat jusqu'à ce que je confirme Alors, qu'est-ce que cela ferait ? En ajoutant le mot de manière interactive
à l'invite ici, vous dites à Claude que j'aimerais voir
les animations affichées une par une avant de confirmer celle que je dois
choisir, ce qui est très important dans le
cadre de vos personnalisations Vous aimeriez savoir quelles sont
les meilleures options pour
votre site Web, n'est-ce pas ? Surtout si vous
essayez de vous
inspirer pour un
certain design ou si vous essayez de
découvrir quelles sont les
options qui s'offrent à vous. En ajoutant cette invite solide, vous pouvez le dire à
Claude dans le chat. Montre-moi exactement à
quoi ça ressemble. Je le confirme, alors
vous pourrez cartographier. Quelque chose de chaud est en train de cuire. C'est la première option. C'est ce qu'
on appelle le soft cross fade. OK, ce qui est bien.
Jetons un coup d'œil à la suivante. Je vais cliquer
sur Suivant. Allons-y. Nous pouvons donc voir
l'animation directe
et l' interaction directement dans l'interface Cloud avant de la
migrer vers notre site Web Il y a quelque chose de chaud dans la cuisine, qui est le rôle vertical. J'aime encore celui-ci.
Passons à la troisième option. Je vais également cliquer sur
Suivant ici. Dans le cadre des fonctionnalités
de personnalisation. Comme vous pouvez le voir, ici, vous pouvez ajouter
des animations à votre design. Toute partie du site Web d'
une seule page est entièrement personnalisable
en fonction de vos préférences. Vous pouvez modifier la
police, changer la couleur, ajouter une certaine section, par
exemple, modifier le graphisme. Changeons le
graphique ici. Si nous le voulons, cela
dépend entièrement de nous. Donc, tout ce que vous considérez
comme une application de Claude, vous avez la possibilité de
le personnaliser en suivant simplement les tactiques
que je vous apprends. Quelque chose de chaud se prépare. Je pense que celui-ci est bon. Je vais dire à
Claude de continuer. Avec la troisième option, j'aime les
deux, trois et deux. Ils sont très professionnels et correspondent au thème de l'activité
actuelle. Donc, quelque chose de chaud
prépare, nous allons le remplacer quelque chose de
chaud, c'est de la cuisson, non ? Comme nous pouvons le voir ici, Cloud est
en train de coder
les fichiers afin d'échanger
la sortie ici. Et chaque ligne de
code, comme je l'ai mentionné, vous pouvez la trouver directement dans
le menu à bascule si
vous souhaitez l'afficher
sur votre propre
site Web pour
y le menu à bascule si
vous souhaitez l'afficher apporter des modifications ultérieures Jette un œil à ça.
Quelque chose de chaud se prépare. Allons-y. Il
exécute la commande, et nous pouvons voir les modifications
commencer à apparaître ici Validons maintenant le résultat. Quelque chose de chaud se prépare, et les modifications sont toujours
en cours Allons-y. C'est
en train de le valider ici. Donc, une fois que c'est fait, cela nous montre que la
compilation de la sortie est terminée Ensuite, nous avons la possibilité de voir enfin fonctionner dans le cadre d'un
site Web d'une seule page. Allons-y. Quelque chose de chaud cuit, quelque chose de chaud prépare, et cela
nous dira que tout va parfaitement bien lors de l'
ajout des animations. Et la même tactique fonctionne
pour n'importe quel segment que vous aimeriez voir ici pour
vous aider à modifier ce segment spécifique, vous aimeriez y ajouter une
certaine animation,
pour ajouter un aspect et une
ambiance
professionnels supplémentaires à votre propre site Web d'une
seule page Et le cloud ici vérifie
simplement que tout fonctionne
correctement et parfaitement. Donc tout se passe bien.
Le fichier HTML est propre. Le pied de page, tout va bien, les lecteurs
d'écran obtiennent une phrase stable,
puis vacillante. Ainsi,
Claude
vous aide
à
contourner facilement tous les problèmes que vous pourriez habituellement rencontrer manuellement lors du
développement Web frontal . Et le code est prêt. Je peux simplement cliquer sur Télécharger. Je pourrais l'apporter sur mon
site Web pour une modification ultérieure. Pour créer une page U
sur mon site Web. Si j'ai réellement un site Web
complet dans le
cadre de mon projet pour
cette entreprise en cours, je peux ajouter une page U et simplement
ouvrir une page Zoom. Les applications sont infinies. Il s'agit donc d'une tactique de
personnalisation très puissante que vous pourriez ajouter dans le cadre de votre
développement Web frontal via le cloud.
8. Ajout de graphiques pour le site à page unique: Bon retour. Maintenant,
allons encore un niveau plus loin. Disons que j'
aimerais ajouter une sorte d'attrait dynamique à
la seule page latérale. J'aimerais ajouter des
cartes, par exemple, dans une section
qui présente
nos produits dans le cadre d'
un café ou d'une boulangerie. Nous avons des croissants, des
expressos, des baguettes. Nous avons du pain, des lattes, et la liste est longue J'aimerais donc présenter ces produits
ici sous forme de cartes. Hein ? Je vais donc dire à
Claude d'ajouter une section. Juste en dessous de la date et de
l'heure
d'ouverture, la section comprendra des cartes à retourner présentant les produits
suivants Par exemple, nous allons
dire croissants ici, nous allons dire
lattes ou latte Nous allons dire expresso. Ne gardons qu'un seul
article. Allons-y. Ensuite, nous allons chercher du pain,
et la liste est longue. Donc, vous avez compris l'idée. Cela indiquera donc à
Claude, allons-y, créer une nouvelle section
entre ces deux sections. Et ajoutez des cartes à retourner pour
refléter ces produits. Tout
développeur Web front-end
devrait le faire s'il
présente ses produits Ils présentent
leurs services, leur portefeuille de projets Vous pouvez ajouter ces cartes
retournables
magnifiquement animées, ce qui vous
prend généralement beaucoup de temps
à essayer de le faire vous-même, ou vous essayez de trouver
une version prête à l'emploi via
les créateurs de sites Web Par exemple, je
vous montre les tactiques, comment vous pouvez
les utiliser facilement via Cloud directement dans
l'interface C'est une application très
puissante, tactique
très puissante dont vous pouvez vous
inspirer, n'est-ce pas ? Nous avons donc la
possibilité d'animer. Nous avons eu la possibilité
d'ajouter des logos certaines fonctionnalités et images en
fonction de nos préférences, personnalisant élément par
élément en fonction de nos besoins Ensuite, nous avons la possibilité
d'ajouter des sections. Tout ce que vous
pouvez généralement faire dans le cadre d'un créateur de site Web, je vous apprends à
le faire via le cloud. ajoutant des animations via des cartes, en plus des sections, vous pouvez obtenir les codes exactement pour une
édition et une personnalisation ultérieures. Si vous savez également comment utiliser
ces codes, vous avez la flexibilité de le
faire en suivant les
leçons que je vous enseigne. Claude ici présent a compris le contexte réel que
nous essayons d'atteindre, et il va commencer à
développer la section ici. C'est en train de parcourir le code. Développons-le, d'ailleurs, si vous voulez voir
ce qui se passe. Une fois que vous avez cliqué dessus
, vous pouvez
voir ce que Cloud essaie de
réaliser à travers les fichiers. En général, une fois que
vous avez cliqué dessus , il s'agrandit, mais comme il exécute beaucoup
de codes, mais comme il exécute beaucoup
de codes,
il ne l'
étendra directement au moment où
nous cliquons dessus, il s'étend
simplement ici. Donc oui, s'il exécute une
série de codes dos à dos, il se peut qu'il y ait simplement un petit délai lorsque
vous cliquez dessus pour vous montrer exactement ce
qui se passe sous
le capot de Cloud Et juste
quelques secondes, vous cliquez à nouveau dessus et vous
pouvez voir tout le code secret qui se
déroule via Cloud jusqu'à
ce que le travail soit terminé. Maintenant, nous pouvons voir le
fichier. Il devrait être prêt. Nous avons agrandi en déplaçant le
bouton vers la gauche. Et c'est parti. Juste en dessous de la date et de l'heure, un avant-goût de ce qui vous attend, des croissants
fraîchement préparés tous les matins,
voilà, HoverTypeK, laminés
au beurre et pliés Il a même ajouté des éléments supplémentaires basés sur du
texte pour compléter l'
idée que j'ai. Découvrez à quel point il est puissant de le
développer de la manière que je vous ai enseignée jusqu'
à ce stade actuel où vous pouvez
avoir un projet complet, où Claude vous donne un
coup de pouce dans la bonne direction. J'ai un café au lait, un expresso à la
main et du lait
cuit à la vapeur, un excellent
pain, un Comme vous pouvez le constater, notre site Web d'une seule
page est en train de prendre forme. Nous allons modifier le graphique actuel dans
le cadre de notre personnalisation. Je vais le dire à Claude. Allons-y. Copiez-collez ceci. En dessous, allons-y. Quelque chose de chaud se prépare. Il y a un graphique que
j'ai besoin de changer. Transformez-le en tasse à café. Avec de la vapeur animée
qui sort du mug. Vous pourriez ajouter votre
propre point de vue et votre inspiration si vous
avez quelque chose en tête, mais vous ne savez pas
comment le coder. Suivez la tactique que je vous
enseigne en ce moment, et vous pourrez l'
intégrer à votre design. Cela va simplement au-delà
des tactiques de
développement Web frontales de base, en ajoutant des sections, des polices,
des images, des animations Non, vous pouvez
aller encore plus loin grâce à d'autres
personnalisations En apportant votre propre vision et fusionnant avec l'invite
à réellement la dire à Claude, allez-y et créez-la pour moi. Je vais donc modifier
ce graphique actuel, qui ne semble pas correspondre
au thème actuel que nous avons. Nous avons donc tout animé
jusqu'à l'étape actuelle, tout
corrigé jusqu'à
cette étape actuelle. Tous les autres éléments
sont facilement comestibles. Ils sont assez simples à modifier. Si vous avez suivi
jusqu'à présent, je vais
maintenant simplement
améliorer le design pour en
faire un résultat de développement
Web frontal professionnel Comme nous pouvons le voir ici, Claude est en train de
parcourir le design. Pour le finaliser en fonction ma vision et de mes
préférences. Allons-y. Il parcourt le code, me fait
gagner du temps, m'
épargne des efforts. Notre site Web d'
une seule page finalisé
se présente donc à merveille. Nous avons obtenu le petit
logo, le logo principal. Il y a quelque chose
de chaud qui cuisine ici. Ensuite, nous avons trouvé un nouvel
endroit dans le quartier pour les matinées calmes, et nous avons réduit les écarts, donc
nous avons eu un compte à rebours Nous pouvons changer la
date si nous le voulons. Ensuite, nous avons des cartes à retourner, une excellente déclaration, l'
emplacement que nous pourrions modifier Ensuite, nous pourrions avoir un petit
formulaire pour les e-mails. Si vous avez terminé la
création du site Web, vous pourrez l'utiliser pour développement
ultérieur si vous
le souhaitez. Nous avons obtenu les espaces réservés pour les liens des réseaux sociaux, en
gardant à l'esprit tout ce que nous faisons à
ce stade, uniquement le développement
Web frontal, et le code est
parfaitement prêt Comme nous pouvons le voir ici,
nous avons obtenu le Mug animé, et le site Web d'une seule page
fonctionne parfaitement. À ce stade,
nous avons donc créé un site Web
personnalisé et
créé un site Web d'une seule page
pour une entreprise hypothétique, qui est mappable à toute application que vous avez en tête
9. Déployez votre site Web à page unique: Et bon retour. Nous avons créé
avec succès notre site Web d'une
seule page, qui est destiné à l'ouverture
officielle d' une entreprise hypothétique, savoir un café et une boulangerie Nous avons créé le
beau design. Je vous ai enseigné les tactiques
de personnalisation en termes d'ajout d'
animations, de graphismes, chaque élément ici Si vous souhaitez le modifier, suivez
simplement les tactiques
que nous avons décrites, et vous aurez la
possibilité de le modifier. Vous pouvez simplement modifier
les dates, les heures. Vous pouvez supprimer des sections si vous n'êtes pas encore prêt à les
utiliser, par
exemple, vous pouvez
supprimer des sections. Vous pouvez éliminer, par
exemple, les icônes des réseaux sociaux. Si vous ne voulez pas
les connecter aux réseaux sociaux, c'est à vous de
décider, n'est-ce pas ? Mais tu vois l'idée.
Disons qu'après avoir suivi toutes les tactiques que je vous ai
enseignées et que vous avez personnalisé votre site Web d'
une page, vous êtes prêt à le
publier et à le lancer. La meilleure façon de
procéder pour les sites Web d'une page, généralement lorsque vous
l'utilisez pour des annonces, des événements,
des pages de destination, etc.,
vous pouvez le lancer en quelques secondes
simplement via
un caillot. Une fois que vous avez terminé, naviguez
vers le haut ici, et une fois que vous avez cliqué
sur publier l'artefact Avant de le publier, vous
pouvez l'ajouter à un projet, qui est le projet que
nous avons déjà créé. De cette façon, vous avez tout
sous un même toit. Pour les développements futurs, vous pouvez simplement vous
lancer dans le projet, personnaliser n'importe quoi, extraire le code que vous souhaitez en
fonction de vos préférences. Ensuite, avancez
facilement au lieu de simplement avoir à faire tout ce
que nous avons fait à
chaque fois à partir de zéro. Vous avez donc plusieurs options
que vous pouvez utiliser. Vous pouvez
le télécharger sous forme de fichier HTML
pour une modification ultérieure ou si vous souhaitez l'ajouter
à une certaine page cadre de votre hébergement, cela dépend entièrement de vous dans le
cadre de votre créateur de site Web. Cela dépend entièrement
de vous. Vous pouvez l'
ajouter au projet pour développement
futur
si vous
le faites un développement
futur
si vous
le faites
régulièrement pour votre entreprise. Enfin, si vous êtes prêt, vous êtes prêt
à publier Artifact Cliquez sur Publier l'artefact
et jetez-y un œil. La publication de cet artefact le
rendra accessible à tous sur Internet et potentiellement visible
dans les moteurs de recherche Il s'agit d'un site Web complet. Votre chat restera privé. Il s'agit du nom de
l'artefact lui-même. C'est ce qu'on appelle index point HTML
en fonction de la configuration
réelle du fichier. Ensuite, une fois que vous avez cliqué sur Publier et copier
le lien, c'est parti. Publiez et copiez le lien. Ceci est le lien réel, et il est entièrement publié. Je peux simplement le
dépublier selon mes préférences ou
simplement obtenir un code intégré. Si vous utilisez un créateur de
site Web, n'importe quel constructeur de site Web, une fois
que vous avez obtenu un code d'intégration, vous pouvez intégrer
cette page directement dans le cadre de votre site Web existant
actuel Ou s'il s'agit d'une page autonome, copiez le lien, vous pouvez le
partager avec vos amis Vous pouvez le partager
avec vos clients. Vous pourriez le partager
avec vos collègues. Cela dépend entièrement de vous. Et une fois que vous avez cliqué dessus
et que vous avez simplement accédé à la page finalisée voici le
site Web magnifiquement conçu en quelques clics, n'est-ce pas, en quelques minutes sans avoir à
tout parcourir à partir de zéro. Il s'agit d'une application
très, très puissante
pour vous inspirer, et elle fait partie des artefacts du
Cloud. Vous pouvez donc
simplement partager un lien ou celui-ci ou simplement revenir en arrière
en
fonction de vos préférences. Cela dépend entièrement de vous. Mais à ce stade, vous avez lancé avec succès votre site Web d'une seule page. Il vous suffit de
retourner dans le cloud pour voir
exactement ce que nous avons abordé jusqu'à présent dans le
cadre de la mise en place. Vous revenez voir Claude après avoir
lancé votre site Web, l'artefact est déjà lancé Il a déjà été publié. Je peux simplement le modifier
et le publier à nouveau, ou simplement les modifications
seront publiées à nouveau. Je peux le partager
directement, le placer directement sur le site Web ou
copier le code sur mon site Web. Ce sont toutes des options que vous pouvez
utiliser facilement.
10. Créer votre site Web multi-pages: Et bon retour. Maintenant, pour
commencer, nous allons créer
un site Web de plusieurs pages Nous allons créer
un site Web W
composé d' une série de pages réelles,
d' un site Web complet application de
développement Web
frontale De cette façon, vous pouvez
porter vos compétences en termes de développement
Web frontal à un tout autre niveau Nous avons déjà ajouté le logo de notre démonstration actuelle, le
café et la boulangerie hypothétiques, ainsi que des images de
référence dans le contexte Nous pourrions ajouter toute information
supplémentaire que
nous aimerions ajouter,
une image
inspirante supplémentaire
et une
capture d'écran inspirante contenant une note d'inspiration que nous avons
rédigée quelque information
supplémentaire que
nous aimerions ajouter, une image
inspirante supplémentaire et une
capture d'écran inspirante contenant une note d'inspiration que nous avons part Les idées sont infinies. Vous pouvez donc ajouter tous
ces éléments supplémentaires si vous le
souhaitez
dans le contexte du projet. C'est ce que vous faites, nous
allons commencer à créer notre site Web de plusieurs pages, pas un site Web d'
une seule page ,
mais une série de pages,
un site Web complet ,
que de
nombreuses entreprises ,
de nombreux professionnels, de nombreuses personnes ,
que de
nombreuses entreprises,
de nombreux professionnels, de nombreuses personnes utilisent soit au
quotidien quotidien cadre de leur environnement
professionnel. Donc, ce que nous allons
faire, c'est
dire à Claude d'agir en
tant que développeur Web professionnel, en particulier développement web et de
front. En gardant à l'esprit que toutes les
applications que nous utilisons actuellement sont basées sur le front-end, frontal et le développement Web Développement frontal et Web dans lequel vous allez m'aider à créer un site Web complet
pour ma nouvelle entreprise, café et la boulangerie Mugs Utilisation des fichiers joints dans le contexte à des fins de
référence et d'inspiration. Le site Web doit
inclure les éléments suivants. C'est la partie ou l'étape où vous allez
faire preuve de créativité. Comment imaginez-vous
votre site Web ? Par exemple, le site Web
comporterait
cinq pages uniques, une section
« À propos de cinq pages uniques nous », page «
Contactez-nous », une
galerie d'images et des suggestions de pages pertinentes fonction du contexte et du thème. Toutes les pages doivent être entièrement éditées et personnalisables afin d'éviter tout problème de
codage que vous pourriez rencontrer lors de modifications futures Toute section ou segment
du site Web peut être facilement récupéré sous forme de code
pour un déploiement futur Si vous prévoyez
de transférer votre site Web, par
exemple, chez un
certain fournisseur d'hébergement ou si vous essayez de le
personnaliser à l'avenir, ces tactiques rapides vous
permettront de poser
les bonnes bases pour votre application afin
d'éviter tout problème en termes de codage et manque de
flexibilité avec la sortie. Alors je vais dire à Cloud, vas-y. Je vais le dire à Cloud, vas-y. Ajoutez toute
contribution pertinente qui rendra la conception du site Web meilleure
et plus efficace. Cela prépare donc le terrain pour
notre site Web de plusieurs pages. Nous créons un site Web complet pour l'entreprise
hypothétique,
un site Web de plusieurs pages, n'est-ce pas ? Il s'agit essentiellement du contexte commercial
actuel, que de nombreux apprenants et
étudiants apprécieront en utilisant les fichiers
joints comme source d'inspiration
pour le projet Toute contrainte que vous souhaiteriez ajouter,
n'hésitez pas à l'ajouter. Une exigence pour votre propre site Web unique,
n'hésitez pas à l'ajouter. Le site Web,
selon mes préférences, serait composé de
cinq pages uniques, ce qui est généralement le cas
sur de nombreux sites Web. Expliquez une section, une page de
contact, galerie d'images et proposez des pages pertinentes en fonction
du contexte et du thème. Si vous souhaitez que
Claude suggère en fonction meilleures pratiques pour l'application
spécifique en question, quelle pourrait être une
autre solution appropriée. Toutes les pages doivent être entièrement modifiables et personnalisables
pour votre future modification C'est très important si vous
connaissez le HTML CSS et que vous
essayez de coder vous-même Même si l'application
actuelle est purement nulle, sans code, vous pouvez utiliser le code, l'
extraire des sorties pour vos préférences
et applications uniques. Toute section ou segment
du site Web peut être facilement récupéré sous forme de code
pour un déploiement futur. Si je souhaite extraire
un extrait du site Web,
ou si je souhaite migrer l' ou si je souhaite migrer intégralité du fichier
du Web que j'ai
créé via
le cloud, chaque élément de contenu ou de code doit être facilement déplaçable, et il ne se casse pas
simplement parce que j'ai quitté le
cloud, c'est très important car cela vous
aidera à tout le tracas d'essayer de retravailler les choses
dès le départ Maintenant, Claude construit
le site Web pour nous en
fonction de l'invite actuelle
et du contexte actuel. Maintenant, comme vous pouvez le voir ici, il passe en revue les détails du projet
que nous avons mis en place, toutes les images pertinentes,
tous les designs pertinents. En gardant à l'esprit, il existe
un élément très critique pour un site Web de plusieurs pages
, à savoir la navigation. Comment naviguer d'
une page à l'autre. Et généralement, en tant qu'étape de développement
Web frontal, cela peut être assez
difficile à
suivre manuellement , car vous êtes responsable de
la Et je vais vous montrer stratégies
très puissantes pour éliminer tous
les tracas de telle sorte qu'à la fin de
notre application, vous disposiez d'un package de développement
Web frontal complet complètement prêt
pour le Et c'est un cloud qui gère le design de
base ici. Il utilise JavaScript, CSS, HTML, simplement pour créer tout ce que je lui
ai demandé de faire. Et une fois que vous avez cliqué sur
l'un d'entre eux,
vous avez d'ailleurs la possibilité de voir à quel stade du
processus de codage se trouve le code. Même si vous pouvez
avoir quelques secondes de retard pour voir ce qui
se passe, car code parcourt simplement
la série de codes. Ici, par exemple, nous avons
obtenu le JS, les fichiers JSON,
puis les fichiers CSS,
puis
les fichiers HTML également, en cours puis les fichiers CSS, puis d'exécution. Il faut donc exécuter plusieurs codes en
même temps pour
créer le design. Maintenant, imaginez si vous
deviez le faire vous-même. Manuellement, en codant
chaque ligne pour que cela fonctionne. C'est que et cela vous
demandera beaucoup de temps, beaucoup d'efforts pour le faire. Et en téléphonant simplement aux tactiques que je vous
enseigne en ce moment, vous pouvez simplement suivre rapidement l'ensemble du
processus Maintenant, comme nous pouvons le
voir ici, Claude a presque terminé, et l'écran va
simplement
passer d'un
écran à l'autre pour refléter la scène dans laquelle
se trouve le cloud dans le cadre du processus de
compilation. Il construit l'ensemble du
site Web ici. Cela peut vous indiquer
qu'il y a une erreur. Je pourrais montrer qu'il est toujours en
cours de chargement. Cela pourrait vous montrer. Il est en train de compiler parce qu'il est encore en
phase d'accumulation, la même manière que vous le
feriez manuellement Vous le ferez par étapes. Et lorsque vous cliquez sur
chaque étape, vous pouvez voir
ce qui se passe et à quelle
étape se trouve Cloud de vous aider à définir le rythme de votre
flux unique. Où en êtes-vous actuellement au stade
du
développement du site Web, en gardant à l'esprit que
tout ce sur quoi nous avons basé l'analyse est basé sur
une activité hypothétique Cela pourrait fonctionner pour votre
propre entreprise, pour votre propre projet unique. Tous les personnages, tous les éléments sont
complètement hypothétiques des
fins de démonstration, afin que vous puissiez voir qu'il est facilement transférable et
mappable à votre propre carrière, à votre propre entreprise créative, à votre propre projet,
à votre propre environnement d'entreprise, quel que soit le domaine dans lequel vous vous trouvez, vous pouvez en déduire
quelque chose
qui vous aidera à déduire
quelque chose
qui vous aidera améliorer vos compétences en matière de
développement Web et à les faire passer à un tout autre niveau.
niveau. Comme nous pouvons le voir ici, Claude construit simplement toutes
ces pages une par une. Il exécute l'
intégralité des codes pour cinq pages uniques avec toutes
ces exigences en
fonction de nos préférences. Nous pouvons voir la page d'accueil qui
nous concerne, le menu, la galerie, le contact. Il a également été ajouté de réserver une table fonction de l'invite actuelle que j'ai transmise à Claude, suggérer quelque chose qui
correspond à notre thème Et comme ce
sera un café et une boulangerie, Claude a suggéré : « Vous savez quoi ? Que diriez-vous de réserver une table ? Page, ce qui est parfaitement logique. C'est donc très puissant,
car laissez toujours de
la place au modèle d'IA pour partager avec vous certains résultats qui
pourraient vous être utiles. Et comme nous pouvons le voir ici, nous avons un fichier MD. Tout est construit
à partir de zéro. Nous surveillons simplement
le résultat au lieu de simplement tout construire
à partir de zéro. C'est très, très puissant. La mise en place de votre site est créée. Cinq pages HTML, CSS,
JS, utilisant des logos, des photos, ce qu'il y a dans la maison à propos de
nous, un menu, une galerie, nous
contacter, la direction du design, pourquoi c'est facile à
modifier et à extraire. Un seul style CSS. Chaque section, chaque page comporte des pauses claires. Excellente. Aucune étape construite,
aucun cadre, excellent. Les fichiers Lisez-moi traitent de la
personnalisation des couleurs. Avant de vous lancer,
il vaut connecter le formulaire de contact
aux serveurs et de remplacer les vignettes par
votre adresse et vos photos réelles Les deux sont marqués, excellents. Puisque nous nous concentrons sur le développement Web
frontal, évidemment, pour les étapes ultérieures
du développement Web, tout formulaire ou toute
page
externe, disons, qui nécessitent de remplir un formulaire
pour collecter des données, par
exemple, dans le cadre de l'
inscription à un bulletin d'information Ceci est considéré comme quelque chose lié au développement du
back-end. Et comme je l'ai mentionné,
nous ne couvrons pas cela. Nous nous concentrons uniquement sur le développement Web
frontal. Dans le cadre de notre candidature. Maintenant, jetons un coup d'œil à ça.
Nous avons obtenu un fichier zip complet que nous pouvons simplement télécharger et
qui inclut tout, toutes ces pages. Et cela est d'ailleurs très important dans le cadre
de notre conception. Pourquoi ? Parce que nous avons créé
chaque page elle-même sous forme de code unique
plutôt que
de simplement tout compiler
et regrouper Chaque page peut
être personnalisée par elle-même. Nous avons donc le
code HTML de base pour notre site Web, n'est-ce pas ? C'est une sorte
de colonne vertébrale pour. Cependant, nous aimerions y
ajouter une sorte de graphisme
de personnalisation, car il est évident que nous n'allons pas utiliser un simple canevas HTML
pour notre site Web. Maintenant, je vais vous le montrer une
fois que nous avons rassemblé la
colonne vertébrale du site Web, qui est l'intégralité des fichiers HTML, et que nous avons obtenu le
dossier zip du site Web, y compris tous les codes. Nous allons maintenant
améliorer cela et
transformer le site Web en quelque chose de présentable, y compris des graphismes
et
11. Presenting the Website For Design Applications: Bon retour. Cloud a donc créé le
package complet pour notre site Web. Il inclut tous
les codes HTML. Et une fois que vous avez téléchargé le fichier
zip du site Web, vous obtenez tous les codes que
vous pouvez utiliser si vous essayez de le charger dans le
cadre de votre créateur de site Web. Cependant, ce n'est pas l'objectif que nous essayons d'atteindre. Comme je l'ai mentionné,
nous utilisons Claude pour le développement
Web frontal complet Même s'il s'agit d'un site
entièrement prêt à l'emploi, je vais vous montrer comment
tout faire dans
le cadre du
Cloud de A à Z. Nous avons
donc
créé le site Web avec succès, n'est-ce pas ? Nous avons obtenu les codes HTML. Maintenant, disons à Claude que
nous avons besoin du site Web, non pas qu'il soit conçu pour
être utilisé à l'extérieur. Non, je veux que tout
soit affiché, personnalisé, édité, entièrement
visible dans le Cloud. Donc, à l'invite de Fong, je veux que le site Web créé soit entièrement affiché ici
dans l'interface, y compris les couleurs, le
logo, les designs, etc. Donc ça dira à Claude : super. Nous avons obtenu le résultat
pour le site Web. Cependant, je ne veux pas l'
utiliser en externe en téléchargeant tout
pour travailler en externe. Non, j'aimerais que
tout soit intégré en interne dans l'interface car dans le cadre de l'
analyse de Claude, il essaiera de nous permettre de faire le
travail le plus rapidement possible en
téléchargeant simplement tous ces fichiers HTML distincts. Je pourrais les envoyer à
un créateur de site Web et télécharger
le fichier zip, qui inclut toutes les personnalisations
requises, les fichiers CSS,
qu' un développeur
Web frontal avancé
utiliserait dans le cadre de la
création d'un Cependant, comme je l'ai mentionné, ce n'est pas ce que nous
essayons de réaliser. Nous essayons de minimiser
les interactions manuelles et d'augmenter l'automatisation via le cloud pour le développement Web frontal Donc, en ajoutant l'invite
suivante, Cloud va créer à nouveau
la solution, directement dans l'interface ici en me montrant
toutes ces pages, tous ces différents designs, tous ces différents éléments
basés sur l'analyse, le contexte
du projet, le thème et l'invite que nous
avons fournis à Claude. Comme nous pouvons le voir ici, extrayez le contenu
principal de chaque page. Il parcourt le code qu'il nous a fourni précédemment, assemble la page,
assemble tous les fichiers HTML et
les fichiers CSS. Comme vous pouvez le constater, il fait le travail du
développeur Web qui prend
généralement tous
ces fichiers et crée le
site Web à l'aide de ces fichiers. Cela vous donne donc plutôt
une idée intermédiaire de la puissance de votre
application, n'est-ce pas ? Comme nous pouvons le constater, le
site Web a été lancé avec succès
sans que
je n'aie besoin de
commencer à télécharger tous les composants
du fichier, puis de les transmettre à un créateur de site Web et de simplement lancer le site Web
ou de créer le site Web. Non, en suivant cette tactique, je suis capable d'atteindre deux objectifs. Préparez tous les
dossiers pour moi. Je pourrais tous les télécharger. Si,
par exemple, vous avez un développeur Web, vous pouvez transmettre les fichiers
au développeur Web pour qu'il les retouche
ultérieurement ou si
vous êtes en mesure de gérer
vous-même
l'application dans le cadre de l'hébergement et de la création de votre site Web, vous
pouvez les utiliser. Ou pas si vous ne voulez pas vous lancer dans une application
impliquant le
déplacement externe d'un fichier contenant un code,
c'est parfaitement normal. Je vous montre toutes les
tactiques que vous pouvez suivre. En demandant simplement
à Claude de le faire maintenant, vous avez un site Web
complet prêt à l'emploi. Jetons un coup d'œil à ça.
Voyez à quel point c'est professionnel. Nous nous sommes procuré un site Web
complet qui est
divisé en différents
segments et composants. En gardant à l'esprit que dans le
résultat initial de Claude, vous pourriez rencontrer des
erreurs, ce qui est basique, ce qui est généralement
parfaitement normal, n'y a pas de quoi s'inquiéter. Ce que j'essaie de faire en moment, c'est de
confirmer que Cloud construit réellement le site Web en
fonction de mes préférences. Nous avons donc mis l'en-tête ici, puis nous avons obtenu la navigation. Si vous cliquez sur la navigation, rien n'apparaîtra, n'est-ce pas, ce qui est assez évident car Cloud est en
train d'assembler le site Web. Cependant, si vous avez des odeurs, ce sont des
odeurs non détectées que vous
rencontreriez manuellement Non, je vais dire à Claude, vas-y, corrige toutes
ces erreurs. Mais avant de le faire,
jetons un coup d'œil à tous
ces éléments ici. Si je clique sur des éléments, qu'obtient-on ? Allons-y. Donc, si je clique, par
exemple, sur le café
et les boissons et sur le menu, nous obtenons des en-têtes de menu, mais nous n'avons pas de fonctionnalités Toggle
. Nous pouvons régler ce problème. Ensuite, nous pourrions revenir
à la page d'accueil actuelle. Et d'ailleurs, une fois que
vous avez cliqué dessus parce qu'il contient un
espace réservé pour un lien, si vous cliquez sur Ouvrir le lien, vous n'atteindrez
nulle part car la page n'a pas encore
été lancée Le site Web n'est pas actif. Je peux cliquer sur Réserver une table. D'accord ? Cela m'amène à
cette page. Ensuite, je pourrais accéder
à la page d'accueil. Nous avons donc une
configuration solide ici, qui nécessite un
ajustement précis, n'est-ce pas ? Cliquons sur le
C pour accéder au menu complet. Ensuite, nous passons au menu, café et aux boissons, aux
pâtisseries et au pain, petit-déjeuner et au déjeuner, selon les saisons, que nous pouvons modifier en fonction de nos préférences. Nous avons donc la
configuration réelle en place. Et si vous remarquez, d'ailleurs,
l'image d'accueil en arrière-plan, c'est l'image que nous avons ajoutée dans le contexte, qui est essentiellement la
partie de la configuration du projet. Nous avons obtenu un titre clair
, très professionnel Tout semble donc
en ordre, mais cela nécessite quelques modifications supplémentaires, comme nous pouvons le constater dans le cas d'
aujourd'hui, quelques favoris C'est pour la
galerie, comme nous pouvons le voir, mais comme nous n'
avons pas d'images, nous y voilà. Aucune image n'a été
ajoutée à la galerie. C'est pourquoi nous ne pouvons voir aucune image, car
nous sommes en train de créer le site Web lui-même pour l'intégrer à d'
autres images. Maintenant, allons encore
un niveau plus loin. Je vais chez Ta Claude, corriger les erreurs sur le
site Web et m'
assurer d'inclure les images fournies dans le contexte du projet et les endroits où les
images peuvent être ajoutées, les
étiquetant avec un espace réservé. C'est donc le premier résultat que nous obtenons pour
le site Web de plusieurs pages, ce qui est excellent, d'ailleurs, parce que nous avons
les fichiers complets et
que Claude affiche directement les fichiers
du site Web. Et dans le cadre du processus, une fois que vous rencontrez des erreurs
d'intégration, nous n'avons pas à créer
ce menu nous-mêmes. Dites simplement à Claude Allez-y, corrigez toutes ces erreurs et assurez-vous que le site
est entièrement fonctionnel. cadre de la
phase de conception,
nous n'allons évidemment pas simplement avoir un résultat
prêt à l'emploi
dès le premier essai, surtout s'il s'agit de votre
première interaction avec Claude. Non, nous allons avoir la sortie de base comme nous
pouvons le voir ici. Nous sommes en train de corriger les erreurs, ce qui est très important pour nous
assurer que tout fonctionne
bien. Comme nous pouvons le constater, Claude
a trouvé un bogue ici, il essaie de
corriger toutes les erreurs du code, ce
que vous devez faire. Manuellement pour s'assurer que le site Web est entièrement fonctionnel. En gardant à l'esprit les tactiques que
je vous enseigne, vous pourrez personnaliser davantage le site Web. Supposons
que vous souhaitiez ajouter
une image ,
une icône à placer ou un élément de menu à remplacer,
tout ce que
vous pouvez faire
directement dans Claude selon les tactiques que
je vous enseigne en ce moment. Nous allons donc passer en revue
cela par étapes. Nous supprimons maintenant
toutes les erreurs de l'étape en cours pour confirmer que tout
fonctionne parfaitement. Et je dis à Claude d'utiliser toutes les ressources que je lui
ai fournies. Pour votre propre application, si vous souhaitez
minimiser le temps d'
interaction avec Claude,
vous pouvez simplement le dire à Claude ou ajouter d'autres images,
plus de fichiers, plus de détails
contextuels au segment contextuel
du projet Claude pourra alors
simplement
remplir tous ces détails
assez rapidement et efficacement. Maintenant, jetons un coup d'œil à ça. Nous allons maintenant jeter un œil
au site Web ici. Encore une fois, le fichier zip. Nous avons
obtenu la page toute seule. Le live reflète
tous les détails, même navigation, mêmes couleurs. Tout est
parfaitement en place. OK, passons en revue menu complet des
favoris depuis le boîtier d'aujourd'hui. Bien. Il s'agit de l'épine dorsale
de base du site Web actuel. Cependant, il n'est pas complet
car nous devons y ajouter la navigation. C'en est une. Ensuite,
nous avons la possibilité de modifier les autres
éléments ici, tels que la table de réservation, consulter notre menu, qui nécessitent une personnalisation
supplémentaire. Maintenant, à ce stade, nous sommes prêts à passer à
l' amélioration et à la personnalisation
de notre site Web.
12. Navigation et édition sur le site web: Et bon retour.
Nous avons donc lancé avec succès la fondation
du site Web. Cependant, nous devons
effectuer quelques modifications. Nous devons intégrer la
navigation pour nous
assurer qu'elle est pleinement
fonctionnelle, n'est-ce pas ? Nous avons donc obtenu les codes. Nous avons dit à Claude, allez-y, exécutez les codes dans
Claude pour voir le site Web. Passons maintenant à
un niveau plus loin. Nous allons dire à
Claude de nous assurer que la navigation
fonctionne parfaitement. Ça en est un. Le menu affiche correctement toutes
les pages et le menu renvoie correctement à la page
concernée. C'est la première chose
que nous devons faire. Voilà, juste pour nous
assurer que nous avons mis en place
la bonne navigation avant procéder à d'autres modifications afin assurer que le site Web
est pleinement fonctionnel Alors, qu'est-ce que cela ferait ? Cela
dira à Claude, vas-y. Bien sûr, sur
la base du site Web actuel, nous avons constaté que chaque fois que
je clique sur quelque chose, par
exemple, je ne vois pas
la navigation complète. J'aimerais que les choses soient
entièrement présentables de cette façon, lorsque je clique sur un certain élément de
menu ici, je puisse naviguer assez facilement d' une page à l'
autre C'est donc très important. Et d'ailleurs, une fois que
nous en aurons fini avec cela, je vais vous montrer que lorsque vous affichez le
résultat de Cloud, il y a un domaine
très important dont vous devez être très,
très conscient, à savoir
l'extension ici,
car lorsque Cloud crée le site Web lui-même, il vous montre parfois des versions
différentes en
fonction du mobile ou de l'ordinateur de bureau. Donc, lorsque j'aurai besoin de voir que
l'ensemble du site est fonctionnel, je vais l'étendre complètement pour confirmer que
tout a été construit. Et une fois que j'aurai zoomé et que j'aurai remarqué,
par exemple, que le menu ne fonctionne pas en
fonction de la taille du mobile, je vais dire à Claude assurer que le site Web
fonctionne également pour
les mobiles, juste pour m'assurer que
vous pouvez adapter le site Web en fonction juste pour m'assurer que
vous pouvez adapter
le site Web en fonction de l'appareil que vous
utilisez. Il s'agit d'un conseil professionnel avancé. Gardez cela de cette façon Lorsque vous créez Cloud,
essayez
toujours, une fois que vous avez
terminé le design, de l'étendre pour voir complètement la mise en page car lorsque vous modifiez les
dimensions et la taille, comme vous pouvez le voir ici, la mise en page réelle commence
à changer, n'est-ce pas ? Le menu commence à changer, la disposition du
texte commence à changer. Gardez donc toujours à l'
esprit que certaines fonctionnalités peuvent
dépendre de certains appareils. Cela fait donc partie de votre processus de
développement. C'est très simple. Simplement
par une ligne de code, vous le dites à Cloud par un message.
En fait, dites à Claude,
allez-y et
assurez-vous que l'appareil fonctionne
sur mobile et sur ordinateur de bureau. C'est principalement ça. Il
n'y a donc rien de complexe à cela,
mais quelque chose à garder à l'
esprit lorsque vous entamez le processus de création de
votre site Web. Comme nous pouvons le voir ici, nous disons à Claude de
confirmer la navigation. Il s'agit de regarder la navigation pour s'
assurer que tout est silencieux, conformément à nos
exigences. Il s'agit donc d'
examiner les étapes à suivre pour s'
assurer que toutes les
pages précédentes que nous avons créées, environ cinq pages,
sont correctement liées, et je vais vous montrer comment nous
pouvons confirmer que
tout va bien. Il est donc en train de
suivre le processus. Il est possible qu'il y ait des erreurs. Et si vous pouvez voir ici, de
vrais problèmes de basculement mobile. Il a identifié le problème
mobile par lui-même. Simplement en lui disant, allez-y, assurez-vous que la navigation
fonctionne correctement. Il passe en revue les codes. Il l'a
découvert, tu sais quoi ? Selon le mobile, cela peut
ne pas fonctionner correctement. Selon le bureau, il se
peut que cela fonctionne correctement. C'est donc quelque chose
dont je suis parfaitement conscient et, tout au long
du processus, Claude a réussi à l'
identifier par lui-même. Je vous ai donc donné un conseil, je vous ai
donné des conseils professionnels, mais en même temps,
gardez-le à l'esprit, car Claude vous aide
simplement à éviter
cet obstacle par défaut. Mais en tant que personne utilisant le
cloud de façon professionnelle, une fois que vous avez terminé de
créer votre site Web, étendez-le
toujours à toutes
les dimensions
du site Web pour en voir toutes
les fonctionnalités, puis vous dites à Cloud rendre compatible avec les appareils mobiles. Comme nous pouvons le voir
ici, par défaut, Cloud essaie également de le rendre adapté aux
mobiles. Il passe par
la navigation, au lieu d'avoir à
le faire manuellement. Nous confirmons les étapes de l'accumulation, un
niveau à la fois. Nous avons donc obtenu le code
de base initial. Nous avons demandé à Cloud de l'exécuter dans
le Cloud sans aucune référence externe
à un créateur de site Web ou sans utiliser de créateur
ou d'hébergement de sites Web sous quelque forme Nous prenons
alors
en compte la navigation, assurant que la navigation
fonctionne correctement tant que création complète sur le site. Nous progressons donc un
niveau à la fois pour avoir un site Web complet et
finalisé que
nous pouvons utiliser, et en même temps, vous pouvez vous inspirer
pour votre propre application unique. Maintenant, Claude est en train de finaliser
l'application ici. Nous sommes en mesure de l'étendre
pour voir exactement la configuration de la navigation, qui fait partie du processus, de
la même manière que vous
concevez un site Web, le front-end d'un site Web, vous le faites par étapes, n'est-ce Vous parcourez le montage, sections, les graphiques, la navigation,
et cela prend du temps Il faut quelques
semaines pour
créer un site Web entièrement
fonctionnel. Et grâce à l'
intégration du cloud, vous pouvez le réduire 2 minutes à une heure maximum pendant que vous maîtrisez les
tactiques que je vous enseigne. Maintenant, Cloud est en train de finaliser
l'Appo ici. Et nous sommes presque prêts avec la navigation en
place pour notre site Web. Gardez toujours à l'esprit que Claude finalise d'abord
la tâche avant de
passer au résultat Maintenant, il écrit les fonctions
réelles. Il s'agit d'élaborer l'architecture de la
navigation pour la valider. Vous pouvez voir
les différentes étapes de l'accumulation Évidemment, dans le cadre du
développement du site Web, du développement Web frontal, vous devez
parfois ajouter des textes Vous devez ajouter quelques
références pour la conception,
pour le projet sur lequel
vous travaillez Les tactiques que je vous
enseigne vous donnent
les compétences nécessaires pour vous les compétences nécessaires pour frayer un chemin dans
n'importe quel projet que vous
traitez et qui nécessite un développement Web
frontal Donc, une fois la navigation terminée
, nous passons
à un autre niveau, ce qui confirme que
nous avons la colonne vertébrale, la fonctionnalité
du site Web. La navigation fonctionne. Cependant, nous devons le
personnaliser davantage. Nous devons y ajouter des fonctionnalités
, des animations, ce qui fait partie de tout développement web
frontal Claude est donc en train compiler le résultat final
et le résultat final et charger l'aperçu réel pour que nous puissions confirmer exactement que
la navigation fonctionne Et comme je l'ai mentionné, gardez
toujours à l'esprit qu'une fois que vous obtenez le résultat,
toujours développé dans sa forme complète. Utilisez l'option de bascule ici pour voir le résultat
final Ensuite, une fois que vous aurez
ajusté la taille, et si vous remarquez que
quelque chose ne fonctionne pas, par
exemple, vous
pouvez le dire à Claude Confirm. Est-ce que cela fonctionne sur mobile ou non ? Cela fonctionne-t-il sur ordinateur de bureau ou non ? Et si Claude vous donne la
confirmation, alors oui, il se peut que
votre interface soit limitée ,
mais c'est une
mesure de précaution pour
vous assurer que votre site Web fonctionne
sur plusieurs appareils. Maintenant, le cloud ici
confirme la logique de navigation. Tout fonctionne parfaitement bien. Ensuite, j'ai dû peser correctement, mais j'ai découvert qu' un véritable problème de durcissement peut se produire dans le cadre
d'un bac à sable. Il passe donc par
le processus d'itération qu'il effectue généralement dans le
cadre de la recherche des erreurs, correction des erreurs si nécessaire Si un eddor a un impact sur le
résultat, je le corrigerai Si cela n'a pas
d'impact négatif, il le contournera simplement, ce que vous feriez également manuellement. Nous attendons donc le
résultat final ici. Comme nous pouvons le constater, le résultat est
inversé, et je m'attends à ce que le
cloud confirme dès maintenant que c'est prêt. La navigation est confirmée et fonctionne. Mon test avait juste besoin
de peser correctement. D'accord, nous avons déjà
abordé ce problème. Jetons un coup d'œil à
la commande en
cours d'exécution dans l'aperçu. Maintenant, toutes les navigations
sont vérifiées. Je préfère toujours m'étendre pour
voir ce qui se passe sous le capot, ce qui se passe
aux différentes étapes de l'analyse. C'est un conseil de pro. Je vous conseille de le
parcourir car cela vous
indiquera à quel
stade se trouve Claude, et si vous trouvez ou
repérez quelque chose
que vous ne préférez pas, vous pourrez y
répondre directement. Jetez un coup d'œil aux
commentaires de Claude. Tout semble parfaitement aligné. Il a trouvé un bogue dans le
processus et l'a corrigé. De plus, j'ai préparé le fichier zip, y compris tous les
codes, c'est prêt. Il continuera à le fournir. Plus nous mettons à jour le fichier, plus nous
le répétons,
comme je l' ai mentionné,
parce que vous
traitez cela dans le cadre d'un projet Donc, pour toute modification,
ajout, mise à jour ou
modification future ajout, mise à jour ou de votre projet
actuel, vous pouvez
symplte Claude, allez-y, mettez à jour le
zip complet du site Web et envoyez-le moi Je vais le prendre.
Ensuite, vous pouvez le déplacer vers un créateur de site Web. Vous pouvez le déplacer vers
votre propre hébergement au lieu d'avoir à le
faire à partir de zéro à
chaque fois. Jetons maintenant un coup d'œil à
la sortie finalisée. Nous y voilà. Maintenant, je vais
basculer dans le menu supérieur, étendre les fonctionnalités, et c'est
parti. C'est beau, non ? Nous avons la page Abo. Excellente.
Regardez l'image, qui fait partie du
contexte du projet. Ajout d'une histoire. Voilà comment c'est fabriqué. Rencontrez l'équipe, des individus
choisis au hasard, des noms
hypothétiques, une situation
hypothétique, un projet hypothétique Pourtant, il est magnifiquement conçu. Regardez la galerie, par
exemple, regardez
ceci. Ce sont les images,
d'après ce que nous avons ajoutées dans le contexte. Si vous y jetez un œil,
ajoutez une photo ici, ajoutez une photo ici. Cela nous donne des espaces réservés pour indiquer exactement quelles sont les
bonnes suggestions Les titres marqués comme
photo sont des espaces réservés, faites défiler vos images
et vous pouvez les échanger. Puissant. Page « Contactez-nous ». Allons-y. Nous avons un formulaire. Que nous pourrions utiliser ultérieurement sur le contenu,
par exemple, en gros, si vous obteniez un formulaire
ou un espace réservé supplémentaire pour cela, nous pourrions y remédier.
C'est parfaitement bien. Alors jetez également un œil à
la galerie . Nous l'avons vu. C'est le café, la
boulangerie, la vie de café. Si vous avez certaines vidéos
du café à notre sujet. C'est l'une de mes pages
préférées : mix, proof, shape, core, bake. Ce sont des ajouts suggérés par Claude en fonction
de l'invite ajoutée, qui correspondent au thème, n'est-ce pas ? Tous ces détails sont donc
importants. Comme nous pouvons le constater, il a simplement fourni quelques noms
hypothétiques pour personnel
hypothétique que nous pourrions simplement modifier et changer en
fonction de nos préférences, de
nos valeurs, venir dire bonjour,
entrer en contact, ce qui fait partie de
la page sans contact, la page sans contact Vérifions-le. Allons-y. Excellente. La navigation
fonctionne parfaitement bien. À la maison, on rentre, on
réserve une table. Avant de réserver une table,
examinons cela. Quelques plats préférés, de la pâte
acidulée, des croissont
au beurre, des
tasses à café maison,
un excellent menu complet de Californie beau, non ? Nous avons pris le
café. Nous avons reçu les pâtisseries. Si je fais défiler la page
un peu vers le bas, si je clique
ici, si vous remarquez, nous avons notre menu, non ? Nous avons présenté notre menu dans
le cadre d'une vue mobile par rapport à une
simple vue sur ordinateur, ce qui est un avantage considérable. C'est un excellent ajout pour s'
assurer que tout est parfaitement aligné et en ordre. La page À propos de nous
efface tout. Nous pouvons voir le logo
du lieu réel, membres
hypothétiques de l'équipe, du four à Il s'agit simplement d'un cas
hypothétique fictif facilement
adaptable à
votre situation unique Ces images qui ont été fournies
dans le cadre du projet ont été utilisées pour
créer le site Web. La page d'accueil est superbe. Nous avons obtenu les cas
préférés, les prix
extraits du menu, notre histoire à l'aide
des images fournies, les itinéraires. Si vous souhaitez ajouter une
sorte de fonction cartographique, jetez un œil au pied de page.
Tout va très bien. Expérimentons
la navigation si je clique sur Contact. Et oui, allons-y. Nous
allons sur la page de contact. Et puis, si je jette un
œil à la page À propos de nous, oui, elle fonctionne également. Nous arrivons sur la page À propos de nous. Si je regarde le menu, les pâtisseries et le pain,
oui, c'est parti. Claude en arrière-plan, comme je l'ai dit, arrange ça. Saisonnier. Allons-y. Planification d'une visite de groupe,
réservation d'une table. Cliquez sur Réserver. Oui
Retournez au menu. Allons-y.
13. Ajouter des animations pour le site Web multi-pages: Et bon retour. Et nous avons configuré
avec succès, à
ce stade, la navigation de notre site Web, et nous avons testé que tout fonctionne
parfaitement bien. Et la
configuration de la navigation, d'ailleurs, prend beaucoup de temps. Si vous avez essayé de le
faire manuellement comme moi, lorsque vous développez le
front-end d'un site Web, vous pourriez facilement rompre différents liens,
différents segments, sans oublier de
passer de l'affichage mobile à l'affichage sur
ordinateur, et
la liste est longue Et grâce à l'
intégration du cloud, comme je
le
partage avec vous, nous avons pu éviter tous
les tracas et obtenir ce magnifique design,
entièrement fonctionnel, avec une
navigation intacte Tout est parfaitement aligné. Maintenant, dans cette conférence, je vais
vous apprendre à appliquer l'une de mes parties préférées pour le
développement Web frontal de n'importe quel site Web, la personnalisation Nous sommes souvent limités par des thèmes. Nous ne savons pas comment coder, ou nous ne savons pas comment utiliser le
CSS ou le HTML, sans parler de casser des choses. Je vais maintenant
vous montrer comment nous pouvons simplement contourner l'ensemble du processus
en intégrant le Cloud. Donc, si nous examinons le site Web que nous avons créé
jusqu'à présent, les leçons que je vais partager
avec vous et les tactiques vous aideront à vous
inspirer et vous constaterez que
vous avez la capacité d'
intégrer diverses personnalisations fonction de vos préférences Ça donne le coup d'envoi.
Supposons, par exemple, que dans le cadre de la
page d'accueil ici, j'aimerais ajouter une
sorte d'animation. Les animations sont considérées comme un ajout très puissant
à tout site Web, n'est-ce pas ? Et si j'aimerais
avoir le titre principal ici. Il y a toujours quelque chose qui
mijote dans les tasses. Nous allons ajouter
une sorte d' animation dynamique dans laquelle le mot mijotera Disons passer à la cuisson, au mijotage
et à l'infusion. De cette façon, c'est quelque chose de
plus interactif. Je vais donc dire à Claude que
je veux ajouter une
animation dynamique au titre. Et puis j'ai deux
options, d'ailleurs. Soit je le copie, je le colle tel quel et je le mets
entre guillemets, Claude comprendra, soit l'une de mes options
alternatives préférées consiste simplement
à prendre une capture d'écran de ce site Web ou de
votre propre site Web. Si vous modifiez
votre propre site Web, suffit de prendre une capture d'écran, il vous
suffit de prendre une capture d'écran, de la
glisser-déposer directement
dans l'interface et d'ajouter la commande. C'est très puissant. Et un autre conseil de pro : lorsque
vous
faites glisser la capture d'écran, vous avez la possibilité de dire
à Cloud me
faire parvenir le code, le fichier HTML, qui se trouve
derrière la capture d'écran. Ainsi, si vous souhaitez
prendre un extrait, mettre sur votre site Web, par
exemple, vous avez
la possibilité de le faire C'est un
conseil très puissant à garder à l'esprit. Je souhaite donc ajouter une
animation dynamique au titre. Il y a toujours quelque chose
qui mijote dans les tasses,
comme les tongs qui mijotent La cuisson passe à l'
infusion, par exemple. Et allons encore un niveau plus loin. Je vais le dire
à Claude. Montrez-moi les différentes
options d'animation de manière interactive. Ajoutez toujours ce mot lorsque
vous avez affaire à Claude. Si vous souhaitez voir
le résultat suivant, qui est le résultat
directement dans le chat ici, alors que
le résultat est simplement
reflété sur le résultat. Une fois que vous aurez ajouté le
mot de manière interactive, Claude comprendra que je
dois montrer les résultats ici Et si
l' option d'interactivité ne
fonctionne pas pour vous, cela signifie que vous devez
accéder aux paramètres,
puis activer l' interactivité s'agit d'un protip très puissant dont beaucoup
ignorent l'existence, et je vous l'enseigne
pour vous aider à faire passer votre intégration de
Claude à un tout autre niveau Montrez-moi les différentes
options d'animation de manière interactive, que je puisse
confirmer celle que je veux au cas où vous n'auriez aucune
idée du type d'animation que
vous souhaitez avoir Il s'agit d'une tactique professionnelle très
puissante pour votre développement
web frontal Vous pouvez l'utiliser, dans un premier temps, pour personnaliser certains éléments, ajouter des animations à
certains éléments. Et surtout, si vous avez une certaine
animation en tête, hésitez pas à l'injecter dans le
cadre du bal de fin d'année. Cependant, si vous
ne savez pas de quel type d' animation vous avez besoin ou quelles sont les différentes
options qui s'offrent à vous ? Peut-être aimeriez-vous vous
inspirer pour votre design, ou souhaitez-vous voir quelles sont les meilleures options
dont vous disposez le
cadre des options
d'animations. En général, si cela
ne vous est pas familier, l'objectif est qu'en tant que personne ne
sachant pas comment coder, comment utiliser n'importe quel type de code, vous puissiez effectuer le développement Web frontal
sans en avoir besoin Donc, cette tactique vous
aidera simplement à vous inspirer, voir toutes les options
sans pour autant
casser le site Web. Si vous avez réalisé le développement Web
frontal de votre propre projet, par
exemple, vous avez peut-être remarqué que si
vous essayez de modifier quelque chose, par
exemple, ici, vous
risquez d'interrompre la navigation Vous pourriez casser la configuration, vous pourriez casser le thème, et bonne chance à passer des heures à
essayer de corriger les
modifications que vous avez apportées. Donc, cette tactique, l'invite
suivante vous
aidera à tout garder dans l'environnement de
chat cloud, l' interactivité ici Cela vous convient, vous le confirmez, puis vous pouvez le
migrer directement via
l'interface. Et surtout,
Cloud, par défaut, lorsqu'il exécute la
commande, examine les
étapes qu'il effectue. Il crée les animations. Il s'agit de créer les options. Cependant, une fois que vous aurez
fait votre sélection, elle
rectifiera tout dans cadre de votre site Web pour s'
assurer que rien ne se casse Et c'est l'une des
puissantes intégrations de Claude car le Cloud est
très puissant pour le codage Il a donc la capacité de
parcourir les codes assez rapidement, les
déboguer, de
s'assurer que tout fonctionne
bien. Jetons maintenant un coup d'
œil à la sortie. Voyez à quel point c'est puissant. Il s'agit d'une tactique professionnelle très
puissante qui
vous fera gagner beaucoup de temps. Jetons un coup d'
œil aux résultats. Il y a toujours quelque chose qui
se prépare. Allons-y. Mugs mijotants, excellent
toboggan pour compteur kilométrique. OK. Ensuite, il y a toujours quelque chose qui fait mijoter des tasses ou qui fait
cuire, trois D flip Ensuite, nous avons eu CrossFade
Plus Scale, puis Blur Focus,
quelque chose est toujours une tasse, Steam Rise Excellente. Chaque carte est prévisualisée dans le style du
héros Excellente. Arrière-plan foncé. Il s'agit donc de prendre les
éléments exactement tels quels. À quoi cela
ressemblerait-il, et
vous pouvez voir les
animations ici. Choisissons-en donc un à des fins de simple
démonstration. Et si on allait faire un
tour de vapeur ici ? Je vais cliquer sur Utiliser ceci et
regarder le résultat. Simply Cloud confirmera
les exigences de conception et d'animation,
puis exécutera le code pour mettre à jour
ce segment spécifique. L'objectif de cette
conférence
est donc tout d'abord d' apprendre cette nouvelle
tactique, cette nouvelle astuce, mais en même temps, de
comprendre que vous
n'êtes pas limité à une telle modification uniquement. Non Vous pouvez l'utiliser pour
animer le texte ici Nous pouvons l'utiliser pour
animer certains boutons, par exemple
pour animer
certains éléments Vous pouvez donc vous
inspirer pour apprendre cette tactique et l'appliquer à
votre propre situation, qui vous aidera à ouvrir de nombreuses portes dans
le cadre de votre développement
Web frontal Et la tactique que je
vous enseigne en ce moment, l'
interactivité, passe souvent inaperçue, même
par les utilisateurs professionnels du cloud C'est une tactique très puissante et
spécifique. Gardez à l'esprit que vous devez accéder aux
paramètres, l'activer. Et puis dans l'
invite ici, mentionnez le mot de manière interactive C'est très important car
cela indiquera à Cloud avant de migrer
quoi que ce soit ici, j'aimerais
que vous me montriez les résultats correctement devant moi dans le
cadre de l'interface. Et une fois que j'ai fait une sélection, vous allez le migrer. Par défaut, Cloud
implémentera le résultat de conception,
puis s'assurera qu'
il crée le fichier, exécutant des tests pour vérifier que
rien ne casse. Tout est
parfaitement fonctionnel. Alors n'hésitez pas, d'ailleurs. Simplement, si vous
travaillez sur votre propre site Web ou sur votre propre design, prenez un moment et essayez de vous inspirer pour créer ou
personnaliser votre propre site Web. Ou si vous créez un
site Web à partir de zéro. Si vous essayez de
personnaliser votre propre site Web, vous pouvez en fait prendre cette étape plutôt
professionnelle. Vous pouvez reprendre
votre design actuel. Par exemple, vous pouvez prendre une
capture d'écran de votre site Web et l'
ajouter à Claude et Claude de le créer pour vous
et de le personnaliser pour vous, puis demander à Claude de
récupérer votre fichier HTML, puis vous pourrez
copier ce fichier HTML et le
coller à nouveau dans l'éditeur de votre
site Web, par exemple. C'est quelque chose pour les développeurs Web
frontaux qui sont à l'aise avec le codage Comme je l'ai mentionné,
la pratique
actuelle ,
le cours en cours, les leçons sont conçus pour
vous, pour quelqu'un qui ne sait pas comment coder,
mais en même temps, si vous souhaitez
expérimenter le codage, vous pouvez le faire de
manière très rationalisée et
systématique. C'est donc très important pour quiconque souhaite travailler sur son site Web
ou
créer un nouveau site Web, que ce soit pour votre propre projet
personnel, pour votre propre entreprise ou
pour votre propre client. Les tactiques que
je vous enseigne vous
permettront d'économiser beaucoup
de temps et d'efforts. Regarde l'Apu
Bado comme tu peux le voir,
Claude, assure-toi que
tout fonctionne bien Et au fur et à mesure que nous apportons des modifications, que remarqueriez-vous D'
après la configuration
que nous avons faite, Claude emballe à nouveau
le site Web, y compris le fichier HTML et
le package complet sur le site Web, y compris tous
les derniers résultats C'est très important
car dans le cadre de la configuration,
comme je l'ai mentionné, vous aimeriez toujours
revenir à ce que vous
faites, n'est-ce pas Vous n'avez pas besoin de
tout construire à partir de zéro. Et en suivant ces tactiques, disons, un mois
plus tard, vous pourrez
simplement revenir à votre projet et
consulter la dernière édition, effectuer quelques modifications,
affiner le résultat, l' exporter
et le réutiliser Jetez un œil à l'
application ici. Et c'est parti. Nous nous sommes procuré une
superbe animation ajoutée spécifiquement en
fonction de nos préférences, sans rien
casser du site Web lui-même,
ce qui est très important. Et disons que j'aimerais
passer à un autre
design, n'est-ce pas ? Je voudrais donc simplement monter, jeter un œil aux
commentaires ici. Alors disons que j'ai
changé d'avis. Je vais choisir
ce design ici. Cliquez sur Utiliser ce modèle. Allons-y. Soyez prudent
avant d'exécuter cette invite. Le contenu de conversation malveillant peut inciter le cloud à
tenter une action nuisible. Eh bien, il s'agit d'
une entrée automatique qui apparaît simplement par défaut si vous essayez de
corriger quelque chose que vous avez
déjà généré .
Cela arrive de temps en temps. C'est parfaitement
normal. Ce n'est pas un problème. Nous allons donc mentionner qu'il faut plutôt
utiliser la diapositive du compteur kilométrique, animation pour le
titre du héros Ajoutez simplement le mot à la place, et nous allons
réexécuter le code. Cela
vous montrera donc que j'ai la possibilité de faire une
sélection, de mettre à jour le fichier. Et puis, en
regardant le résultat ici, j'ai remarqué qu'il avait l'air
bien, selon la marque. Cependant, j'
aimerais voir si les différentes animations correspondent
mieux à mes préférences. Et si je le faisais moi-même
manuellement, je risquerais de casser le fichier. Il se peut que je
doive passer beaucoup de temps à
essayer de voir cela avant
et après la comparaison, et je n'ai
aucune référence à référer en cas de
panne, par exemple. Beaucoup d'entre nous qui ont essayé de le faire manuellement ont rencontré de tels problèmes. Donc, si vous remarquez ici, Claude va exécuter à nouveau
l'invite de base. Il corrigera l'animation, à jour l'intégralité du fichier sans
aucune intervention. Gardez simplement à l'esprit
que vous avez la possibilité et la capacité de continuer à
courir en arrière-plan. Si vous effectuez une autre tâche, il vous suffit d'ajouter l'invite, laisser Claude faire le décodage
et le montage Et une fois que c'est fait,
vous pouvez y
revenir pour
examiner le résultat Et c'est parti.
Jette un œil à ça. a mis quelques secondes Claude a mis quelques secondes à tout
réparer. Et comme vous pouvez le constater, il
s'agit de la dernière
version. Allons-y. Nous avons donc pu simplement passer
à cette animation actuelle, qui est la diapositive du compteur kilométrique Ainsi, en quelques clics,
nous sommes en mesure de modifier l' ensemble de la structure
de codage du site Web afin intégrer
l'
animation sans aucun
codage. Et cette tactique s'applique
à n'importe quel segment de votre site Web que
vous essayez de créer si vous souhaitez
animer quoi Disons que j'aimerais
animer cette carte ici. J'aimerais animer
ce texte ici. N'hésitez pas à vous
inspirer pour faire passer votre candidature
à un tout autre niveau.
14. Ajouter des graphiques pour le site Web multi-pages: Et bon retour. Nous
avons donc créé avec succès les animations conformément
à nos exigences, et nous avons pu
les cartographier dans différentes
parties du site Web. Dans cette conférence en cours, je vais vous montrer comment
nous pourrions ajouter des graphiques. Supposons que vous
souhaitiez ajouter des graphiques ici ou une autre
partie du site Web,
ici, par exemple,
ou une autre
section, il n'y a pas de limites. Vous pouvez trouver l'inspiration pour
l'appliquer à votre propre situation. Maintenant, laissez-moi
vous montrer quelques astuces pour ajouter des
graphiques à votre site Web. Je vais dire à Claude que j'aimerais ajouter quelques graphismes animés à la section
principale des héros. Et la section des héros,
c'est essentiellement ce que nous appelons la
section des héros ici, n'est-ce pas ? À côté du bouton
pour réserver une table. Et d'ailleurs,
vous n'avez pas besoin de lire
la description complète. Comme je l'ai mentionné à nouveau,
prenez une capture d'écran de l'emplacement exact
ici, par exemple, puis étiquetez-la sur
une feuille de papier, sur une serviette, sur le
logiciel de votre Vous pouvez réellement écrire les
modifications que vous souhaitez effectuer et simplement prendre
cette capture d'écran, prendre cette feuille de
papier, prendre cette serviette, peu importe ce sur quoi vous
faites les modifications, puis l'associer à Claude Modifiez-le, glissez-déposez-le ici, mais je vous montre l'approche de
base la plus simple grâce à une interaction
basée sur du texte. Je dis donc à Claude
que j'aimerais ajouter un graphique ici à côté
pour réserver une table. Et j'aimerais
avoir quelques options. Je vais donc demander à
Claude d'ajouter quelques
graphiques interactifs. Allons-y. Juste pour être sûr que
Claude comprenne, j'aimerais d'
abord les voir avant de les faire migrer. Ici, dans l'interface,
c'est parti. C'est ainsi que vous pouvez
élever votre invite, qui est animée jusqu'à la section principale des héros située à
côté du bouton
permettant de réserver une table Nous pourrions également le rendre
plus spécifique pour l'ajouter. Allons-y. Les deux instructions vous
donneront donc des résultats Cependant, si je voudrais que
ce soit assez précis, là où je confirme l'
interactivité ici, je peux voir les graphiques J'aimerais
examiner quelques options avant de les migrer. Claude
analysera donc le thème, le contexte, la préparation que
nous avons accumulée jusqu'à
ce stade, et il proposera quelques graphiques importants
ou utiles qui correspondent au cas
hypothétique auquel nous avons affaire, n'
est-ce pas ? Nous avons ajouté un projet. Il s'agit
d'une approche basée sur le contexte. Nous avons des fichiers,
des éléments à ajouter. Claude a donc été
suffisamment formé pour le
moment pour être en mesure dire exactement ce que nous devions faire et de suggérer certains éléments
importants. Jetez un coup d'œil à ces graphismes animés
sur le thème de la boulangerie , qui sont très puissants
car ils nous indiquent que
Claude est sur la même longueur d'onde que nous en ce Claude est sur la même longueur d'onde concerne ce que nous essayons de faire Allons-y.
Jetez-y un coup d'œil. table est maintenant ouverte. Nous avons un indicateur en temps réel.
C'est très sympa. Nous avons une tasse, une tasse. Nous en avons un nouveau tous les jours. Nous avons réservé une table. Jetez un coup d'œil à ces ajouts
puissants et puissants
intégrés aux graphismes. Donc, selon mes
préférences, disons que si nous voulons
réserver une table, j'aimerais ajouter
cette fonctionnalité ici. Je vais donc dire à Claude, allez-y, ajoutez cette fonctionnalité. Au clignotant, le
badge d'état « open now » se trouve à côté du bouton de
réservation de la table. C'est donc une très belle animation, et au cas où je le souhaiterais, c'est un très beau graphisme,
qui est animé. Si je
souhaite tester
autre chose sans endommager
le site lui-même,
ce qui se fait
normalement manuellement, il
me suffit de revenir en
arrière, de cliquer dessus, utiliser et de dire à Claude de
l'utiliser à la place. Ou je pourrais simplement
dire à Claude, eh bien, m'
indiquer d'autres options si
je souhaite avoir des options supplémentaires pour trouver convient
le mieux à mon application. Mais ce sont de très jolis graphismes que vous devez généralement créer vous-même si vous
écrivez le code pour
les intégrer à votre site Web. Cloud est donc en train de corriger le code, le
HTML, le CSS Tout devrait être en place pour intégrer ce graphique
afin d'améliorer nos compétences en matière de développement
Web frontal et de les porter à un
tout Comme vous pouvez le voir
ici, Claude passe simplement en revue les
commandes, ce qui nous fait gagner du temps, nous
épargne des efforts, et
vous pouvez voir quelle étape du
codage est en cours. Comme je l'ai mentionné, les applications
que nous suivons n'
ont pas besoin que vous
sachiez coder quoi que ce soit. Suivez simplement les
tactiques que je vous
enseigne et vous
serez en mesure de
faire votre travail en tant que développeur Web
frontal professionnel avec de nombreuses tactiques et
compétences à votre disposition
pour vous permettre de vous démarquer en matière de développement Web
frontal Maintenant, jetons un coup d'
œil à la sortie, et c'est parti. Les tables sont ouvertes maintenant. Voyez à quel point c'est puissant. Il complète le
design de manière grise. À propos, ajoutons un autre graphique pour améliorer encore plus le design Je vais le dire à Claude. Pour réserver une table, je
vais la placer à côté, par
exemple, ou dans
le bouton Afficher notre menu. Je vais donc le dire à
Claude. Utilisons-le. Allons-y. Cependant, je vais être précis
dans mon message. Ajoutez l'animation de l'icône du
mug fumant, et non à côté du bouton de
réservation de table. Non, mais je vais
le corriger dans le bouton Afficher notre menu. Cela fait partie de votre parcours
créatif, n'est-ce pas ? Lorsque vous effectuez le développement Web
frontal, vous êtes censé faire preuve de
créativité au cours du processus Et je vous montre les tactiques, la même manière que je les
ferais normalement, comment je vais manœuvrer le
cadre de mon interaction
avec Claude J'ai trouvé
cela très utile. Puis j'ai réalisé, eh bien, que j'aimais bien ce graphique. Je ne veux pas simplement l'ignorer,
et il convient parfaitement, non pas à
côté de la table de réservation, mais à une partie de
notre menu, n'est-ce pas ? C'est quelque chose que vous
feriez normalement manuellement. Ou si vous travaillez au sein
d'une entreprise, par exemple,
vous avez une réunion pour discuter la mise en page, de la présentation, et nous sommes en mesure d'
intégrer tout
cela de la manière
la plus rapide et la plus efficace possible grâce aux tactiques
que je vous enseigne. Maintenant, selon mes attentes, Claude va placer ce mug dans
le bouton qui consulter notre menu,
et
c'est parti. Découvrez à quel point le design est puissant. Entièrement dynamique,
totalement professionnel, et c'est un produit de premier ordre,
conforme à nos exigences. Donc, à ce stade,
vous avez appris à ajouter des graphiques dans le
cadre de votre conception, et cela fonctionne à n'importe quel niveau importe quelle page ou étape de
votre site Web actuel, n'est-ce pas ? Vous pouvez simplement accéder à la page Nous contacter,
à propos de nous. Galerie, quelle qu'elle soit, et vous pouvez
appliquer ces tactiques pour vous
aider à intégrer
des graphismes à votre conception. Comme je l'ai
mentionné, Claude nous a confirmé
que
le site Web est prêt, et le design a
été finalisé Nous avons ajouté les graphismes
des tables déjà ouvertes, et nous avons ajouté un mug
animé pour améliorer
encore la
présence visuelle de notre site Web.
15. Nettoyage des polices à l'échelle du site: Bon retour.
Supposons maintenant que je souhaite changer et modifier les polices de l'ensemble
du site Web. Disons que je suis en train de
passer par le
processus de conception et que je me suis rendu compte j'aimerais avoir
différentes polices en fonction de mes besoins. Maintenant, même si la police semble parfaitement adaptée à
la marque, j'aimerais tester
différentes polices
pour voir laquelle
reflète le mieux l' essence du projet en cours, que ce
soit à des fins de marketing, pour la création de votre propre contenu,
et la liste est longue. Je vais donc voir Claude. J'aimerais tester différentes polices pour
l'ensemble du site Web. Affichez
des exemples interactifs dans le chat ici afin que je puisse confirmer
le balayage complet des polices du site Alors, à quoi servirait cette invite ? Tout d'abord, nous expliquons à
Claude quel
est mon objectif dans le cadre de tactiques d'
ingénierie efficaces et rapides. Et puis une fois que vous avez ajouté
le mot interactivité, gardez
toujours à l'esprit que vous avez
mis le mot interactif, cela dira à Claude : «
Tu sais quoi ? Affichez d'abord les résultats ici. C'est une tactique
professionnelle avancée très puissante. Pour t'aider à tirer le
meilleur parti de Claude. Dans le chat
, je peux confirmer le balayage complet des polices Et j'ai mentionné le
nettoyage complet des polices du site car cela indiquera à
Claude quel est l'objectif final Une fois que j'aurai tout confirmé, vous mettrez tout à jour dans le
cadre du site Web. L'intégralité du site sera entièrement modifiée
et mise à jour au
lieu de simplement me demander
de le faire manuellement. Jette un œil à ça. Regardez le résultat. Allons-y. Nous avons reçu les étiquettes des polices, la police actuelle est
la police actuelle. Ensuite, nous avons les différentes
options. Allons-y. Vous pouvez d'ailleurs voir
le nom de la police. Si vous êtes un
professionnel du marketing, vous êtes un spécialiste de l'image de marque, vous êtes capable
de comprendre les noms de police réels , les paires de polices
et, d'ailleurs, Claude saura
quelles sont les polices qui conviennent le
mieux l'équipe actuelle avec laquelle
nous travaillons Chaque carte applique le jumelage au contenu
réel de votre site Web.
Voyez à quel point c'est puissant. Je peux voir les
polices exactes que je pourrais utiliser, et Claude comprend que
ces polices vont de pair, et qu'indiquent-elles ? Vous pouvez donc
parcourir n'importe lequel de ces droits. Ensuite, vous pouvez
faire une sélection. Ensuite, nous allons appuyer sur
Utiliser ceci ou sur Gardez-le pour rester en place et je l'
appliquerai latéralement. Je vais donc choisir la police qui correspond
à mes préférences Choisissons l'un d'entre eux pour nous
assurer que tout
est bien aligné. Sur la base de la marque actuelle, je trouve celle-ci plutôt sympa. Je vais donc utiliser celui d'ici.
Allons-y. Celui-ci. Cliquez sur US Does, passez les polices du site
à Lib puis à Nunito Je vais donc avoir
cette combinaison entre Liber et
Nonito Et c'est exactement la conception d'un panneau
de commande unique qui porte ses fruits. J'ai juste besoin de me
changer. Allons-y. Un seul élément et Cloud est capable de balayer l'
ensemble du site Ainsi, si vous appliquez les tactiques
jusqu'à ce stade actuel, n'importe quelle modification, que
ce soit à ce stade ou dans
le futur, chaque fois que vous
revenez à votre projet parallèle en cours, vous pouvez simplement vous
lancer dans
le projet et effectuer une
modification en quelques minutes,
voire quelques secondes, au lieu de suivre l'ensemble du
processus à partir de zéro Donc, au début,
il vous faudra peut-être un certain temps pour atteindre le
stade actuel. Cependant, une fois que votre projet
est lancé et qu'il ne vous reste plus qu'à effectuer d'autres
modifications, il ne vous reste quelques secondes avant
d'obtenir une sortie finalisée Maintenant, Cloud passe
simplement en revue toutes les polices
du site Web et échange tous les codes requis sous le capot de
Claude
afin de modifier le design et
l' affichage
des polices du site Web Et vous pouvez utiliser la police que vous avez
en tête. D'ailleurs, vous n'avez pas besoin de
simplement vous fier
aux suggestions de Claude. Maintenant, si vous avez vos
propres polices ou si vous
utilisez des polices spécifiques dans le cadre
de votre propre site Web actuel, vous pouvez simplement les ajouter à l'invite et Claude
pourra les mapper
directement à la sortie. Claude exécute la
commande ici, et nous pouvons
voir qu'elle a tout mis à jour
avec succès de manière
assez systématique. Nous attendons la confirmation,
et c'est parti. Nous avons reçu la dernière
édition de notre site Web
et, comme vous pouvez le constater, les
polices ont été mises à jour. C'est très professionnel. C'est très élégant, et Claude a pu simplement
cartographier tous ces résultats
assez facilement, n'est-ce pas ? Et nous sommes en mesure de faire
la distinction claire entre l'avant et l'après. Dans la section
principale des héros ici, nous pouvons
voir directement que la police
a été complètement modifiée. Et simplement, je pourrais demander à
Claude de confirmer que l'ensemble du site a
changé de police. Tout simplement. C'est un message
très basique. Le site a complètement
changé de police. Cela confirmera donc
que Claude n'a
rien oublié dans le cadre d'une vérification de
confirmation. Confirmez donc que l'ensemble
du site a changé de police. C'est un message très
basique, très direct. De cette façon, Claude Claude dira exactement ce que nous
recherchons. Cependant, si vous le
remarquez ici, le
cadre de la vérification, faites-le
toujours, d'ailleurs. Lorsque vous exécutez quelque chose dans
le cadre d'un outil d'IA, y compris Claude, confirmez toujours le résultat final, car au
bout du compte, devinez quoi. Un outil d'IA commet des erreurs
en cours de route. Donc, une fois que vous aurez ajouté cette invite de
précaution supplémentaire, confirmez que l'ensemble du site a changé ses polices,
jetez-y un œil. ai trouvé un petit
détail pour le fichier lui-même Sur la
base des anciennes polices, j'ai trouvé un commentaire quelque part. C'est purement descriptif. Permettez-moi de vérifier l'aperçu pour ensuite vérifier le style calculé. Il faudra donc prendre une mesure de
précaution supplémentaire au cas où il manquerait
quelque chose ici ou là . Si nous y
jetons un coup d'œil, c' confirmé, l'ensemble du site utilise désormais est
confirmé, l'ensemble du site utilise désormais la même police
que celle que j'ai sélectionnée. Voici comment le modèle d'IA a
vérifié, et pas seulement le globe oculaire. Génial. Je vous ai montré les
étapes à suivre pour la confirmation. Cela vous donne un niveau de
fiabilité supplémentaire au lieu
d'avoir à simplement examiner chaque ligne de
police par elle-même, vous pouvez appliquer la
tactique et au modèle d'IA de confirmer exactement le résultat en
cas d'erreur Votre tâche serait
simplement de vérifier et confirmer de manière très
systématique.
16. Ajouter des images: Et bon retour. Maintenant, nous allons porter nos compétences en développement Web, nos compétences en
développement Web
frontal, à un tout autre niveau
grâce à l'utilisation de tissus. Généralement, lorsque vous avez
affaire à un site Web,
en particulier d'un point de vue
commercial ou créatif, nous devons y ajouter
des fichiers, n' est-ce pas ? De temps en temps. Par exemple, si vous vous souvenez, dans
le cadre de notre création, nous avons créé une galerie C'est donc quelque chose de typique
pour toute personne créative. Vous travaillez sur
votre portefeuille, vous présentez votre entreprise ou vous travaillez au
sein d'une entreprise Vous souhaitez mettre
en valeur vos produits. Cette conférence en cours vous
donnera inspiration et
vous montrera à quel point il
est facile d'ajouter votre propre contribution unique et de mettre à jour le site Web en
quelques clics. cadre de la
préparation du projet, nous avons initialement ajouté quelques entrées contextuelles dans le
cadre de la mise en place initiale Cependant, si vous
remarquez, par exemple, que nous avons créé certains
espaces réservés ici
pour les ajouts futurs dans le cadre
de la création du site Web. Je pourrais ajouter une photo, par
exemple, une
table à manger ou une salle à manger, ajouter une autre photo suggérée
par Claude, des croissants frais, ajouter une photo à verser sur un
bar, des marques de pâte acidulée. Au comptoir à l'ouverture, habitués de la communauté C'est très puissant,
et
ils s'harmonisent tous parfaitement avec une
boulangerie et un café, non ? Vous pouvez donc voir tous
ces éléments, généralement dans n'importe quel café ou boulangerie, où vous avez des croissants frais une pâte aigre. Vous avez un café à servir au bar. Tu t'es procuré un
comptoir à l'ouverture. C'est donc très, très réaliste dans le sens où nous
obtenons le résultat. Cependant, si je souhaite ajouter des informations de mon côté, n'est-ce pas le
cadre de ajout que j'ajoute à Claude,
je vais , par
exemple, ajouter quelques images basées sur
cette boulangerie hypothétique Donc, à ce stade,
je vais dire à Claude d'ajouter les images suivantes
à la galerie. En termes simples, et n'hésitez pas à l'appliquer à votre
propre situation. Je vais ajouter, par exemple, une image d'une tasse à café, une
image de pain, une image supplémentaire
ou une autre image de pain, et vous pourriez ajouter n'importe quel élément
contextuel avec
lequel vous souhaitez
mettre à jour votre site Cela peut être votre
propre œuvre d'art unique, projets de
votre entreprise, l'inspiration et
les idées sont infinies à
ce sujet. Je vais donc chez Claude, ajouter les images suivantes
à la galerie assurer qu'elles sont organisées de façon professionnelle et supprimer les espaces réservés
vides Disons que je suis
satisfait de ces images. Je n'ai pas besoin d'espaces réservés
supplémentaires. Je vais simplement dire à
Claude, allez-y, chargez ces images ma galerie et
ajoutez tout espace réservé
vide dans
ma galerie et
ajoutez tout espace réservé
vide pour le moment, je ne pense pas qu'
elles soient nécessaires. D'ailleurs, si vous l'avez
remarqué, Claude a modifié la mise en page et la personnalisation fonction de l'image réelle, tailles, des polices, la structure afin d'ajouter l'attrait du
développement Web frontal
au résultat réel ou au résultat réel
que vous obtenez Vous pouvez voir ici,
vérifier les images téléchargées, vérifier quel
fichier téléchargé correspond
aux emplacements réels que nous
avons ou aux espaces réservés, et Claude commencera à compiler les images dans le
cadre de la galerie, et il devra supprimer
tout élément supplémentaire N'oubliez pas que, étant donné que nous
sommes en train de créer le site Web, vous verrez peut-être certaines
remarques de Claude. Cependant, une fois le
design finalisé, vous pouvez simplement, Claude,
supprimer toutes ces remarques. Les vignettes marquées sur
Photo sont donc des espaces réservés. Alors je vais le dire à Claude,
tu sais quoi ? Je ne veux plus avoir ces
espaces réservés. J'ai presque terminé avec ma galerie, donc je n'ai pas besoin ces instructions ou de ces
espaces réservés. est très important si vous
travaillez en
équipe, n'est-ce pas ? Si vous avez une équipe de concepteurs ou développeurs Web
frontaux, vous pouvez leur laisser ces
remarques, ajouter une photo dans
les espaces réservés,
déposer vos propres images, déposer vos propres images, puis les échanger en
tant que partie intégrante ici Consultez le Read Me pour obtenir des instructions
précises C'est très utile dans le
cadre d'agences de design ou équipes
plus importantes où quelqu'un reprend là où
vous vous êtes arrêté. Donc,
comme nous pouvons le voir ici, Claude est en train de construire
la galerie
finalisée,
et la même tactique pourrait
fonctionner dans n'importe quel secteur d'activité, et la même tactique pourrait que vous travailliez dans
une industrie de l'art, dans le secteur de la
construction, dans le
développement, peu importe ce que c'est, vous pouvez
utiliser cette tactique de galerie pour ajouter et mettre votre travail de manière très
systématique, et vous pouvez toujours y
revenir puis le mettre à jour La galerie elle-même, en
ajoutant des entrées, la même manière que je la partage
avec
vous en ce moment, vous pouvez avoir Claude, prendre ces entrées et les
organiser de manière
systématique. Et vous avez
également la possibilité d'y ajouter des animations. Au lieu de simplement
survoler les images, je peux dire à Claude
que lorsque je clique sur une image, vous pouvez la transformer en carte à feuilleter
et écrire une note dessus en vous basant sur les tactiques que nous avons abordées jusqu'à
ce stade, qui vous aidera à vous
inspirer en même temps vous donnera les
compétences nécessaires pour vous frayer un chemin dans
votre propre interface
développement Web. Comme je l'ai mentionné,
je vous enseigne ces tactiques, ces compétences, et vous pouvez vous
inspirer pour les appliquer à
votre propre situation, que ce soit à un niveau
individuel spécifique ou à une combinaison des deux. Vous pouvez ajouter
des graphiques ici. Vous pouvez ajouter des animations. Vous pouvez ajouter des images, puis vous pouvez
tout combiner. Donc,
comme vous pouvez le voir, Claude fait clignoter la sortie, ce qui indique que les résultats sont
presque terminés Comme vous pouvez le constater, d'ailleurs, si nous devions le faire manuellement, considérez les
efforts que nous devons investir pour y parvenir,
redimensionner, ajuster, emballer, encadrer,
encadrer, etc. Donc, si vous avez lu ce manuel, ce n'est pas une tâche facile. Même si cela semble
facile, ce n'est pas le cas. Je vais vous prendre beaucoup
de temps pour le faire. Claude arrive donc à
l'étape finale, qui consiste à valider l'
aperçu, comme je l'ai mentionné, vous pouvez continuer
à le faire fonctionner en arrière-plan si vous travaillez
sur autre chose Cependant, nous en avons presque
terminé avec le résultat, et Claude
vérifie simplement que chaque élément est
parfaitement aligné, ce qui est un excellent résultat
et une étape importante dans le
développement web frontal, car généralement, lorsque vous ajoutez des images
ou des éléments externes, vous avez tendance à casser votre thème ou votre mise en page Et beaucoup d'entre nous en font l'expérience. Franchement, j'en ai fait l'expérience lors de la
création manuelle d'un site Web. Si vous
souhaitez ajouter une image,
tout d'un coup, vous
cassez la mise en page, puis vous essayez
de comprendre ce qui
s' est passé ou les dimensions, elles ont l'air assez
solides sur le bureau. Cependant, ils se cassent sur mobile. Donc, tout cela, ou dans les
coulisses, sous le capot, les
vérifications d'erreurs, les confirmations, Claude
les passe en revue pour éviter avoir
à essayer de réparer les choses dans les deux sens Maintenant, examinons
le résultat ici. Comme nous pouvons le constater, Claude fait
un très bon travail en ajoutant les images que j'ai
ajoutées pour les
intégrer à ma galerie. Cependant, comme je l'ai mentionné, nous ne prenons pas le résultat
directement avant d'avoir obtenu la confirmation que
tout est réglé, puis nous nous lançons dans
la vérification des résultats de Claude, ce qui est très important et très nécessaire pour éviter de traiter
avec des résultats incomplets. Cependant, dès le premier coup d'œil, nous pouvons voir que nous avons ajouté
les images ici, et Claude
les a arrangées et structurées pour que tout
soit élégant
et professionnel. Et devinez quoi ? Tous les espaces réservés
ont été supprimés. Les instructions d' utilisation des espaces réservés
ont été supprimées. Il s'agit d'une étape avancée fur et à mesure que vous
finalisez votre design Vous êtes en train de configurer
l'ensemble du site Web. Une remarque est en cours de suppression. Et comme vous pouvez le voir ici, nous avons une très belle galerie, avec quelques images liées
au contexte et au cas hypothétique
auquel nous avons affaire, à savoir un café et une boulangerie Ensuite, nous pouvons
accéder à l'écran d'accueil. Tout va bien. Nous avons ajouté quelques éléments graphiques. Nous avons ajouté une certaine intégration
pour la navigation. Nous avons une sorte d'éléments de menu
hypothétiques. Tout semble bien
organisé et systématique. Et d'ailleurs, n'importe quel élément, en fonction des tactiques
que je vous enseigne, vous pouvez le mettre à jour
en fonction de vos préférences. Et c'est un site Web élégant et très
puissant , d'ailleurs, dont
vous pouvez vous inspirer. Nous avons créé un site Web de
plusieurs pages. En général, cela
vous prendra quelques semaines de travail si vous le créez à partir de zéro, en vous assurant que vous codez et que vous essayez de
tout mettre en place
et de le faire fonctionner, n'est-ce pas ? Sans parler des erreurs,
des interruptions qui peuvent survenir lorsque vous essayez de mettre à jour
les choses ici et là, non, en suivant les
tactiques actuelles, nous sommes en mesure de
tout compiler un seul projet auquel nous
pouvons toujours nous référer. Il s'agit de l'une des leçons les plus
importantes que vous devez comprendre dans le cadre
du cours actuel. Il ne s'agit pas d'
une simple interaction avec Claude en ce moment. Non, vous êtes en
train de réaliser un projet
complet
construit avec Cloud. Il est très important
de garder cela à l'esprit, car si vous le faites
de manière professionnelle, vous devrez peut-être vous référer
à votre conception précédente, effectuer des modifications Vous devez apporter des modifications, ou vous repérez une erreur quelque part, ou si vous le faites de
manière professionnelle dans le cadre de votre entreprise ou d'un studio
de design, par
exemple, votre client
indique que nous avons besoin d'une mise à jour. Vous n'avez pas besoin de recommencer à zéro à chaque fois. Non, vous pouvez simplement
vous lancer dans
le projet et
personnaliser tout ce que vous
souhaitez personnaliser en fonction tactiques que vous avez apprises jusqu'à ce stade,
ce qui est très puissant
et excellent complément à vos compétences en matière de
développement Web frontal Nous pouvons voir ici que Claude est en finaliser
l'ensemble de la sortie Cependant, dès le premier coup d'œil, vous pouvez voir
que Claude a compris l'objectif final que nous
essayons d'atteindre. Nous avons mis les
images en place, et il ne reste plus que quelques secondes
avant que Claude
finalise les résultats et confirme que tout
est parfaitement aligné Nous sommes donc en mesure de voir exactement
où Claude se dirige. Cela complète donc
le résultat réel de la leçon en cours, et vous êtes tout à fait capable d' appliquer
simplement ces tactiques. Nous avons mis les images en place, les espaces réservés
ont disparu, et ma galerie est intacte, et j'ai simplement la possibilité, pour l' avenir, de continuer à ajouter
des images, supprimer des images
selon mes préférences Vous pouvez donc
utiliser les tactiques,
ces tactiques pour vous
aider à intégrer éléments
externes dans le
cadre de votre site Web, vous
ajoutiez
un certain projet une certaine image un certain Yo ou une certaine œuvre d'art sur laquelle
vous travaillez. Vous n'avez pas besoin de simplement accéder
au créateur de site Web et de continuer à
les charger un par un. Non, vous pouvez le
faire en quelques clics. Et c'est parti. Il s'agit de la reconstruction finale, et Claude confirme simplement que le site Web est prêt. Même s'il a fallu
quelques secondes de plus pour finaliser le résultat, par
rapport à
quelques jours de travail d'ailleurs, quelques jours de travail d'ailleurs, car ce qui se passe
sous le capot de Claude, vous remarquerez que de nombreuses modifications sont effectuées pour confirmer, sur la
base de la structure
que nous avons suivie, que le design est prêt
car à
la fin
de chaque itération,
une partie de de plus pour finaliser le résultat, par
rapport à
quelques jours de travail d'ailleurs,
car ce qui se passe
sous le capot de Claude,
vous remarquerez que de nombreuses modifications sont effectuées pour confirmer, sur la
base de la structure
que nous avons suivie, que le design est prêt
car à
la fin
de chaque itération,
une partie de solide
tactiques
d'ingénierie rapides, vous obtenez le code du site Web
mis à jour et le package complet du site Web, ce qui est très essentiel Donc, tous ces
ajouts en coulisse concernant le code HTML,
le CSS, la mise en page,
la structure, le dimensionnement et bien d'
autres choses encore sont gérés par Cloud. À ce stade,
nous sommes donc en mesure d'intégrer
des images et des
éléments externes supplémentaires à intégrer
à notre site Web via le cloud.
17. Changing Website Design Themes: Et bon retour. Tu crois
que c'est fini ? Bien sûr que non. Nous allons améliorer vos compétences en matière de développement Web
frontal et d'
intelligence artificielle et les faire passer
à un tout autre niveau. Maintenant, dans cette conférence, je vais vous montrer une étape très puissante mais
souvent considérée comme puissante mais
souvent considérée comme problématique dans le développement web
frontal, qui est en train de changer de thème Lorsqu'il s'agit développement Web
frontal, généralement, si je devais changer le thème du site Web actuel, c'est souvent quelque chose que de nombreux développeurs Web
frontaux oublieront lorsqu'ils auront
affaire
à cela, c'est souvent quelque chose que de nombreux développeurs Web
frontaux oublieront lorsqu'ils auront car c'est une recette pour détruire
l'ensemble du Cependant, je vais
vous montrer la tactique dès maintenant. Comme nous allons avoir Claude, allez-y et modifiez le thème de l'ensemble du site Web manière très stratégique. Je vais dire à
Claude que j'aimerais
changer le
thème complet du site Web. Suggérez différentes options de thème, y compris des couleurs et des mises en page manière
interactive,
pour que je puisse choisir celle qui convient avant
la
migration et m' assurer qu'il est très important de conserver une
copie du site Web actuel, créer pour y revenir Alors, qu'est-ce que cela
ferait ? Tout d'abord, je crée une sauvegarde
via Claude pour mon site Web actuel au cas où je souhaiterais l'extraire à nouveau. Il s'agit d'une tactique très avancée que beaucoup ne connaissent pas. J'utilise Claude, plutôt un moteur
de secours pour moi. Et je dis à
Claude, tu sais quoi ? Je vais explorer plusieurs
thèmes du site Web. Allez-y, montrez-moi ces
options, mais en même temps, assurez-vous de préserver
le travail que nous avons accompli. Examinez le résultat pour que Claude passe en revue le processus en
envisageant de présenter différentes
options de site Web
interactives à des fins de comparaison. Il est en train de créer cette
fonctionnalité interactive ici. Ensuite, il enregistrera l'intégralité, tout d'
abord, il
enregistrera l'intégralité du fichier en tant que sauvegarde, puis me
montrera ces thèmes. Commençons donc par sauvegarder la version actuelle afin que vous
puissiez toujours revenir en arrière Ensuite, je vais
rassembler des options de
thème interactives que vous pourrez comparer. Maintenant, il s'agit généralement d'une tâche
assez complexe. Si vous y réfléchissez d' un point de vue manuel,
c'est assez exigeant. Donc, une fois que nous avons affaire
à un modèle d'IA, ce n'est pas grave si cela prend
plus de temps que d'habitude, car la tâche est
plus exigeante que d'habitude. Donc, en gros, Claude, en
fonction de la tâche, la durée de la sortie peut varier. Cela peut vous prendre
quelques secondes, parfois quelques minutes, ce qui est parfaitement
bien,
selon le build et la tâche. Jetons un coup d'œil à
ça. Tout d'abord, sauvegardez, confirmez et sauvegardez. Nous sommes donc prêts à essayer d'expérimenter
différents thèmes. Créons une comparaison de
thèmes interactive. C'est
celui qui est en cours ici. OK. Ensuite, nous en avons eu
un autre. Minimaliste moderne. J'aime bien celui-ci. Que
diriez-vous de celui-ci ici ? Haut de gamme maussade,
pastel doux, contemporain audacieux. Chaque carte affiche un aperçu
de la même structure. Cependant, nous avons
des thèmes différents. Votre sauvegarde est donc déjà enregistrée. La boulangerie chaude actuelle
construit les cinq pages. Tout est parfaitement aligné
et zippé, prêt à être utilisé. Disons que, tout d'abord, je peux dire à Claude que
je n'aime aucun d'entre eux. Allez-y, proposez d'autres options. Cependant, j'aime bien ce thème
actuel ici. Donc je vais dire à
Claude, vas-y, utilise ça. Allons-y. C' est donc très important parce que
cela dira à Claude, tu sais quoi ? J'
aime bien ce thème. Allez-y et rénovez complètement l'
ensemble du site Web. Si vous le
faisiez, soit dit en passant, manuellement, vous courez le
risque de casser le site Web. Comme je l'ai fait manuellement à plusieurs
reprises, il
suffit de passer d'un thème à l'autre pour détruire l'ensemble du travail que
vous avez Bonne chance pour trouver
les eddors ici et là Nous contournons donc toute
l'option. Nous avons choisi un très beau thème, et je dis simplement à
Claude, vas-y. Modifiez l'
arrangement complet du site Web actuel en fonction
du thème que j'ai en tête, et n'hésitez pas à intégrer
à façon des éléments de
marque, fonction du thème
que vous avez Si vous travaillez sur un certain site Web,
votre site Web actuel, vous pouvez ajouter vos
propres palettes de couleurs, vos propres préférences de thème. De cette façon, vous
pouvez apporter des modifications qui imitent complètement votre
site Web actuel Jetons un coup d'
œil aux commentaires de Claude.
Faisons-le correctement. abord, un audit complet de chaque feuille de
style de référence couleur, exactement ce que vous
devez faire manuellement. Claude le fait automatiquement. Il est donc en train de procéder à
toutes ces modifications pour s'
assurer qu'il ne
manque rien. Tout sera
mis à jour pour refléter
votre propre thème unique et personnalisé, soit dit en passant. Et une fois que vous avez changé de thème, vous pouvez suivre
les tactiques que nous avons
décrites en ajoutant des graphismes, des
animations et des images. Cela dépend entièrement de vous. Il s'agit donc d'un ajout très
puissant à garder à l'esprit pour vous
aider à vos compétences en matière de développement
Web frontal car
je vous apprends comment
utiliser l'IA pour le faire en votre nom pour tout ce
que ,
car
je vous apprends comment
utiliser l'IA pour le faire en votre nom pour tout ce
que vous devez
généralement faire
manuellement vous devez
généralement faire
manuellement Donc, si vous ne savez pas
comment coder, c'est parfaitement bien. Vous êtes nouveau dans le domaine du développement
Web frontal. C'est parfaitement normal. Vous travaillez au sein d'une entreprise. Vous travaillez sur un projet, vous travaillez sur une
entreprise. Quoi qu'il en soit, les tactiques que je vous
enseigne vous aideront à améliorer vos compétences en matière de
création de sites Web,
en particulier les compétences en développement
Web frontal, car c'est le
cœur de ce que nous
faisons dans le cadre de la leçon Comme vous pouvez le voir ici, Claude a identifié toutes les palettes de couleurs et
il les corrige ou les remplace par des palettes de couleurs
alternatives fonction de mes préférences, en
gardant à l'esprit. C'est simplement à des fins de
démonstration. Je préfère le thème actuel, les couleurs correspondent parfaitement à l'activité
hypothétique actuelle Cependant, pour que vous compreniez les différentes options en termes
de sortie que vous
obtenez, car vous
n'êtes pas simplement limité à la sortie que vous obtenez
de Claude, car ce n'est pas vraiment le cas. Vous avez la possibilité d'ajouter vos propres préférences, de les modifier, modifier jusqu'à ce que vous
obteniez le résultat que vous préférez et que vous êtes
assez à l'aise avec. L'objectif est
que vous obteniez le résultat qui reflète votre véritable vision la
manière la plus systématique possible. Maintenant que Claude est en train de
finaliser le résultat, jetons un coup d'œil à la page d'accueil
elle-même, car
c'est généralement là vous observez le plus grand
nombre de modifications Et si je voudrais
changer une image, disons l'image du héros en
arrière-plan, je pourrais simplement dire à Cloud, tu sais quoi ? Changez cette image. Je pourrais télécharger
quelque chose si je le souhaite. Ou si j'ai un graphique en tête, je peux le dessiner sur
une feuille de papier. Prenez une capture d'écran de
mon site Web actuel, puis j'ai la
possibilité de la télécharger et de dire à Cloud, vous savez quoi, de
l'ajouter également à la version actuelle. Ce sont donc des
tactiques très puissantes que vous pouvez
intégrer dans le cadre
de vos activités. Examinons maintenant le
stade où en est le cloud. Comme vous pouvez le constater, il s'agit certainement d'une
grosse version, car nous mettons à jour un thème
entier, un thème entier. C'est pourquoi, au début
du
cours actuel, je vous l' ai dit, c'est quelque chose que de
nombreux
développeurs web frontaux ignorent lorsqu'ils
essaient de le faire parce que vous
n'avez aucune idée si le thème
risque de casser votre Cependant, nous contournons tous ces problèmes
de manière
stratégique Comme nous pouvons le constater, nous en sommes à
la phase finale de validation, et franchement, j'aime encore plus
le nouveau thème
par rapport au thème précédent. C'est très élégant,
très professionnel. Nous pouvons voir que tout
est parfaitement aligné, et nous avons le
package finalisé ici, qui est le
dossier zip prêt à être utilisé. Et n'hésitez pas à
faire une pause à tout moment. Supposons que vous soyez développeur
web front-end
professionnel, pour voir exactement ce que fait
Claude, pour en tirer le résultat, ce que vous devez faire de temps en temps pour vous
assurer que vous lui accordez une supervision humaine
suffisante C'est très important car
en fin de compte, c' vous qui êtes responsable
des résultats que vous
obtenez de n'importe quel outil d'IA. Maintenant, comme vous pouvez le voir ici, jetez un œil au design, très moderne, très élégant. Tout a été très bien
mis à jour. Laissez-moi examiner les menus. La navigation fonctionne. Et généralement, lorsque vous
traitez du thème, c'est la première
chose qui risque se casser dans le cadre du processus. Tout semble
assez systématique. Je vais jeter un coup d'
œil à la galerie, par
exemple. Que diriez-vous de ça ? Allons-y. Excellente.
Tout est parfaitement aligné. Nous avons intégré de belles
fonctionnalités. À ce stade, nous avons une version très puissante de notre site Web,
et nous pouvons simplement nous
inspirer pour mettre à jour les
couleurs, les thèmes, ajouter des graphiques, ajouter
des images, en ce qui
concerne vos propres compétences en développement
Web frontal Si vous avez poursuivi
jusqu'au stade actuel, sur la
base de ce que je vous ai enseigné, vous êtes en mesure de porter l'ensemble
de
vos compétences à un
tout autre niveau.
18. Deploying The Website Design Through Claude: Et bon retour. Une fois que nous avons finalisé
notre site Web, il est temps de le déployer et de le
lancer C'est très pratique si vous essayez de
présenter votre travail, si vous travaillez
en équipe
ou si vous essayez de le montrer
à votre client, il est très pratique de le lancer
directement dans le Cloud. Oui, tu m'as
bien entendu. Vous pouvez déployer le site Web de votre site, votre site Web directement sur Internet,
directement depuis
le Cloud. Comme je l'ai mentionné,
nous nous
occupons actuellement du développement
Web frontal Donc, si vous le faites
dans le cadre de votre travail créatif, vous essayez de finaliser le design frontal avant poursuivre le travail
sur votre Gardez toujours à l'esprit que vous
avez la possibilité de
le lancer directement dans Claude pour
voir comment il fonctionne également. Alors, comment vous y
prenez-vous ? Naviguez simplement vers le coin supérieur ici. Cliquez sur le menu déroulant. Vous avez la possibilité de le
télécharger sous forme de fichier HTML. Vous pouvez également l'
ajouter au projet. C'est l'une de mes
préférences et tactiques préférées. Une fois que vous avez terminé
cette version, ajoutez-la à votre projet sur lequel
vous avez travaillé. Pourquoi ? Parce que cela formera
Claude pour les prochaines modifications Ainsi, vous n'avez pas
à repartir de zéro. Non, Claude a un projet complet
qu'il construit avec vous sur lequel vous pourrez vous
référer pour de futurs ajouts Il s'agit d'une tactique très
puissante qui vous
permettra d'économiser du temps, d'économiser des efforts,
d'améliorer vos compétences et d'obtenir des résultats chaque fois que vous utiliserez le projet
encore et encore Et puis vous avez la fonctionnalité, dont je vous parle, qui consiste à publier le
site Web sous forme d'artefact Une fois que vous
aurez cliqué dessus, vous
aurez l'
URL réelle du site Web. Et une fois que vous avez cliqué sur Publier
et Copyink par défaut, votre site Web sera
en ligne sur Internet Vous pouvez le partager avec
vos collègues, partager si vous affichez votre propre portfolio sur votre
site Web, par exemple, si vous l'ajoutez en tant que page
supplémentaire sur votre site Web, ou si vous essayez de présenter cette activité dans le
cadre de votre client, les applications sont infinies. Cliquons dessus,
publions et copions le lien. Maintenant, le chargement prendra
quelques secondes. J'ai la possibilité d'intégrer l'intégralité de
ce site Web quelque part. C'est très pratique si vous
créez, par exemple, un petit écran
sur le site Web, ou si vous avez une page dédiée sur votre propre site Web actuel et
que vous souhaitez l'ajouter en complément. Comme je l'ai mentionné, les
applications sont infinies. J'ai la possibilité de le
dépublier si je souhaite y apporter
un travail supplémentaire Regardons maintenant le résultat
final, et c'est parti. Ce site Web est maintenant en ligne
sur Internet. Voyez à quel point c'est
puissant. Nous avons obtenu la page À propos de nous. Allons-y. Nous avons reçu le menu. Excellente. Tout est là. Nous avons la galerie. Tout
fonctionne parfaitement bien. Comme vous pouvez le constater, il s'agit d'un site Web complet et
fonctionnel que nous avons
pu créer directement. Et Mi a remarqué qu' une fois que vous avez cliqué sur l'une de ces
icônes de navigation ici, vous avez ce message. Pourquoi ? Parce que nous lançons cela sur Internet au
sein de Claude. Cela ne cessera donc de
nous le rappeler, vous savez quoi ? Vous êtes sur le point
de quitter Claude pour y accéder. C'est donc quelque chose
à garder à l'esprit, car comme je l'ai mentionné, nous le
construisons dans le cadre
de Claude, n'est-ce pas ? Donc, une fois que vous l'avez fait et que vous avez à différentes
parties du site Web, puisqu'il est en ligne sur Internet , il nous
dit : « Vous savez quoi ? C'est externe maintenant. Ce n'est plus chez Claude. Gardez cela à
l'esprit si vous
souhaitez naviguer sur
ce site Web. Eh bien, ça ne
change rien. Franchement,
vous obtenez toujours un site Web complet et fonctionnel entièrement
déployé sur Internet. Vous avez la possibilité
de partager le lien, copier
ce code et de l' intégrer
sur votre site Web,
et les applications, comme
je l' ai mentionné,
sont infinies
19. D'autres options pour le déploiement d'un site web: Bon retour. Maintenant, je
vais vous montrer une autre option très puissante pour déployer et
lancer votre site Web. Si vous vous souvenez, nous
avons simplement lancé notre site Web en tant qu'
artefact au sein de Claude Il est entièrement en ligne sur Internet, puis nous pouvons partager
le lien, intégrer le code Les applications, comme je l'ai
mentionné, sont infinies. Supposons, par exemple, que
vous essayez d'obtenir ce
site Web et de le
transférer vers votre propre hébergement actuel ou que vous essayez de le transférer vers votre propre créateur de site Web actuel
pour le déployer là-bas. Alors, comment vous y prendriez-vous ? C'est le principal résultat
de la conférence actuelle. Je vais
vous montrer comment il suffit demander à Claude de
vous fournir un package
complet prêt à l'emploi afin le télécharger
et de
le déployer le plus rapidement
possible sans intervention supplémentaire Je vais donc le dire à Claude. J'aimerais que le site Web soit disponible sous forme de package complet
prêt à l'emploi, y compris les images, les graphiques
et les fonctionnalités que nous avons créées. Pourquoi ? Parce que vous
ne voulez pas que Claude,
ce
qui peut arriver, par
exemple,
aux images de la galerie ou aux images d'arrière-plan les abandonne. Cela peut vous donner un espace réservé si vous êtes, disons,
un développeur
web front-end professionnel, si
vous savez coder, cela un développeur
web front-end professionnel, vous convient Vous pouvez simplement
prendre le code, déployer sur votre site Web et
votre hébergement Web. Ou votre créateur de site Web, puis vous ajoutez manuellement les
images. C'est une option. Cependant, je ne
préfère pas cette option. J'aimerais en avoir une version
complète sur le cloud. Je prends simplement la sortie dans son intégralité, puis je la déploie entièrement sans aucune
action intermédiaire entre les deux. J'aimerais donc que
le site Web soit disponible sous la forme d'un package complet et
prêt à l'emploi, y compris toutes les images, les graphiques
et fonctionnalités que nous
avons créés de telle sorte que le fichier soit complet et qu'
aucune action
supplémentaire ne soit nécessaire. Et assurez-vous que le
fichier est compatible
avec les créateurs et les hébergeurs de sites Web externes. Cela va donc étiqueter
Cloud. Tu sais quoi ? Compilez
le tout dans un package complet et confirmez que tout ce que nous avons créé et ajouté, y compris les images et les graphiques
de la liste, fait partie du fichier prêt à être utilisé. Et surtout, vous
devez vous assurer que
le fichier que nous allons obtenir du
Cloud est compatible
avec les
créateurs et hébergeurs de sites Web externes, car si vous l'utilisez, il fait partie de votre
hébergement Web actuel ou de votre créateur de
site Web actuel. Il existe de nombreux constructeurs. Il existe de nombreux
hébergeurs. Toutefois, cela peut
varier d'un apprenant à l'autre, professionnel
à l'autre, étudiant
à l' Nous devons nous assurer que Claude est en mesure de nous donner le résultat, qui soit facilement adaptable
à n'importe quelle situation à laquelle
vous êtes confronté Donc, en ajoutant cette invite
actuelle, n'importe quelle version que
vous avez ici, vous le dites simplement à
Claude dans le cadre de l'application de
développement Web frontale Donnez-moi le résultat complet tel quel, car j'aimerais prendre le site Web actuel
que nous avons créé et le déployer dans le
cadre de mon fournisseur d'hébergement,
de mon créateur de site Web ou de tout autre type de
service
supplémentaire qui pourrait prendre votre code actuel et le déployer en tant
que site Web en ligne. Il y en
a beaucoup là-bas. La liste est longue. D' ailleurs, n'hésitez pas
à faire vos propres
recherches. Vous pouvez repérer bon nombre de ces options qui sont
entièrement accessibles, où vous pouvez accéder à l'intégralité
du fichier HTML que
vous avez créé. Littéralement, vous le glissez et
déposez et vous obtenez l'URL de votre
propre site Web, et vous pouvez ajouter
votre propre domaine unique. Il s'agit donc d'une
sorte d'activité que vous pouvez faire vous-même, mais je vous montre
comment y arriver. En téléchargeant simplement le fichier
prêt à l'emploi, vous pouvez l'utiliser en
fonction de votre situation. Que vous l'
appliquiez à votre propre hébergement Web, c'est en
partie une option pour votre propre créateur de site Web votre propre créateur de site Web. C'est
une autre option. Vous allez trouver l'un
de ces services où vous pouvez simplement
glisser-déposer votre fichier HTML, par
exemple le fichier que
nous avons reçu ici, ce qui est largement suffisant. Je vais vous montrer le fichier
que vous pourriez utiliser. Supposons le fichier actuel, le code HTML, ou vous pouvez
simplement décompresser le fichier, prendre également le code HTML, et vous pouvez simplement
déployer le site littéralement en faisant glisser
le Vous prenez le code, vous le glissez
et déposez de ces services de
restauration directe, vous obtenez
votre propre URL et votre site Web est
entièrement accessible en ligne. Cependant, comme je l'ai mentionné, nous nous
occupons du développement
Web frontal du site Web Et il existe évidemment d'autres
composants qui vont de pair
avec
le développement Web complet. front-end est un segment, mais vous avez le
backend pour un autre segment Et dans le cadre du cours
actuel, nous ne traitons que du développement Web
frontal Il est donc très important de garder
cela à l'esprit, car les tactiques je vous enseigne peuvent vous
aider à améliorer votre site Web
actuel, concevoir un site Web complet
à partir de zéro, à
exporter tous les résultats
pour les modifier ultérieurement, mais gardez toujours à l'esprit que lorsque vous
traitez de ces résultats et des résultats
du modèle d'IA, vous devez vous assurer que
le résultat correspond à votre situation unique grâce à l'application
des tactiques que
je vous enseigne. Faisons donc en sorte que cette production
soit véritablement prête. Je vais combler
plusieurs lacunes réelles, notamment compatibilité du chargement
frontal
avec les créateurs de sites Web, fonctionnement du formulaire de contact sans aucune configuration requise. Comme vous pouvez le voir
ici, par exemple, un formulaire de contact typique, vous pouvez le concevoir depuis
le front-end, mais
vous devez évidemment le connecter à une
base de données depuis le back-end Il s'agit donc d'une question qui ne partie du champ d'application dont nous
parlons ou que nous traitons. Comme je l'ai mentionné,
nous nous concentrons uniquement sur le
développement Web frontal Gardez donc cela à l'esprit lorsque vous vous
lancez dans votre propre application
unique. Cependant, Claude en est
parfaitement conscient
et essaie de minimiser les
problèmes de compatibilité, les
problèmes qui pourraient survenir au cours
de cette et essaie de minimiser les
problèmes de compatibilité, les
problèmes qui pourraient survenir au cours
de étape ou de
cette intégration, ce qui est très
important à
garder à l'esprit dans
le cadre de l'invite actuelle. Nous avons besoin que le package de conception
de
notre site Web frontal soit compatible, facilement personnalisable
et transférable Ensuite, c'est
à vous de décider comment vous allez
procéder à partir de là votre propre hébergement, votre
propre service de déjeuner direct, votre propre
connexion dorsale, peu importe ce que c'est. Vous pouvez prendre
la sortie, puis la
modifier en fonction de
votre propre situation. Et comme on peut le voir ici, Claude est en train de tout vérifier. Le code HTML, le fichier CSS, les en-têtes, les images, la navigation, les graphismes, les polices, tout était
essentiellement une conception frontale prête à l'
emploi, prête à exporter, prête à déployer
pour le Maintenant, cela est très
important dans le cadre de vos options lorsqu'il s'agit
de déployer votre site Web. Et évidemment, cela varie en fonction de la nature
du site Web. Donc, si vous avez un site Web qui n'exige
aucune intégration
de formulaires ou de
back-end. Vous pouvez simplement le lancer
où que vous soyez. Cependant, comme je l'ai
mentionné, je partage avec vous les différentes
options qui s'offrent à vous, y compris d'autres ajouts
avancés. Vous pouvez utiliser le résultat pour faciliter
ce processus. Toutefois, en fonction de
votre situation, si vous n'avez besoin d'aucune de
ces fonctionnalités supplémentaires, vous pouvez lancer
votre site Web directement, soit comme je l'ai mentionné
dans Cloud en tant qu'artefact, soit vous pouvez le prendre comme
un fichier de sortie prêt à être expédié, vous pouvez le déployer directement cadre de votre créateur de site Web,
de votre hébergement Web ou de l'un de ces codes HTML en code direct aux
services de sites Web en direct disponibles sur le marché. Il vous suffit
de quelques minutes de recherche pour être en mesure d'identifier ceux
qui correspondent le mieux à votre application. Cependant, dans le cadre des résultats
de la leçon en cours, nous vous donnons
le produit final, le résultat final, le résultat final, qui est un site Web entièrement
conçu. Et le résultat et les leçons que vous en
avez tirées pour personnaliser le résultat fonction de votre situation
unique, en fonction de vos circonstances
uniques. De cette façon, vous avez acquis les compétences, l'expertise, et pas simplement pour rester coincé. En fonction de vos propres résultats. Non, vous avez les outils,
vous avez acquis le savoir-faire, et vous avez les
démonstrations pour vous montrer exactement, étape par étape,
comment procéder. Cela étant dit, Claude
est en train de tout finaliser. Il parcourt toutes
les pages, comme nous pouvons le voir. Il s'agit de
tout personnaliser, et cela pourrait atteindre une limite car c'est
très exigeant pour Claude Il vous suffit de cliquer sur Continuer. Et si vous n'avez plus de crédits, vous suffira d'attendre l'heure de réinitialisation et de
poursuivre votre demande. Cependant, cela n'est pas
nécessaire à
ce stade,
et c'est parti. Notre site Web est entièrement prêt. J'ai le code HTML que je
pourrais télécharger et je peux déployer dans le cadre du code HTML
pour les services de sites Web en direct. N'hésitez pas à explorer les
différentes options. N'hésitez pas à rechercher différentes options si cela
correspond aux exigences Ou je peux simplement cliquer sur
Télécharger le fichier complet sur le fichier zip. Cela inclut tout ce
que je vois et tout ce que nous
avons construit à partir d'ATZ Je peux l'utiliser dans le cadre de mon hébergement Web en tant que
site Web actuel pour une modification ultérieure, ou je peux simplement le confier à un créateur de site Web et le
charger directement. Les applications sont infinies et vous pouvez simplement avoir ces résultats prêts à l'emploi
en fonction de vos préférences.
20. Conclusion: Alors, qu'en penses-tu ?
Impressionnant ? J' espère sincèrement que vous avez trouvé ce
cours très utile, vous
a inspiré et que vous
avez même amélioré vos connaissances
d'au moins 1 %. C'est un travail bien fait. J'ai hâte de
recevoir vos commentaires sur le cours de cartes
et de m'assurer que vous suivez mon profil pour les dernières versions et mises à jour, et je vous verrai
lors du prochain cours.