systemeio #systems io #systems io js #systemsiojs #systemsiotuto #systemsiojavascript #commentintegerdujs #integrerdujs …
Bonjour à tous et bienvenue sur cette vidéo ça fait un petit moment alors aujourd’hui j’ai décidé de reprendre le vidéo youtube et j’ai décidé de m’attaquer à système poyaud la dernière fois je ne sais pas si vous vous souvenez j’avais fait une vidéo dans laquelle j’ai expliqué comment
Grâce à du css vous allez pouvoir surclassé tous vos concurrents aujourd’hui grâce à ce système voyons on va aller plus loin que le css vous allez voir c’est parti alors vous allez me dire explique nous qu’est-ce qui va déjà plus loin que le html css comment est ce
Qu’on peut faire pour se différencier encore plus et faire des pages d’encore plus belles qualités eh bien ça s’appelle le javascript le javascript en fait c’est un langage qui va être comment dire centré sur les animations vous avez le css qui est centrée sur la
Mise en page le html qui est son très simplement sur le contenu et là vraiment on va passer sur un niveau au dessus en terme de design et en termes de way en termes de branding en termes de design interne tout ce que vous voulez et on appelle ça du javascript alors ne
Paniquez pas ça tout le monde peut la prendre et c’est vraiment facile à apprendre je vais vous faire un premier tutoriel pour que vous compreniez comment ça fonctionne pour commencer on va simplement faire un exercice de javascript assez simple vous allez voir on va apporter un petit peu
De dynamisme à notre élément de textes notre titre alors qu’est ce que je veux là en fait ce que je voudrais c’est avec un code javascript lorsque je clique sur le titre celui ci change de couleur mais celui ci change de couleur de manière permanente c’est dire que quand on faisait en css
C’était juste voilà le titre par exemple il devenait jaune et ensuite il revenait à sa couleur normal quand on a enlevé la souris là vraiment ce que je veux c’est lorsque je clique sur le titre eh bien ça change vraiment de couleur ça change vraiment
Ma page donc du coup ce que je vais faire là ce que vous allez faire si vous voulez essayer le tutoriel avec moi en fait ce que vous allez faire c’est vous allez créer un titre vous écrivez n’importe quoi blabla ce que vous voulez moi j’ai écrit gérer ce
Que vous allez ensuite ce que je vous conseille toujours sur system poyaud c’est d’utiliser les codes html parce que en fait ces natifs et vous pouvez faire n’importe quoi avec quand je dis n’importe quoi c’est les options sont vraiment illimité donc vous créez votre code html normalement à
L’intérieur il va y avoir h deux systèmes pour rio voilà c’est le code qu’il y a par défaut alors la dernière fois je vous avais expliqué pour d’éclairer du css vous mettez style là pour déclarer du javascript vous mettez script tout simplement vous allez mettre script donc script ouvrant et bien sûr
Pas oublié de fermer voilà il valait vers vous proposez donc vous mettez votre balise script ouvrante et fermente comme ceux-ci d’accord maintenant ce que je veux c’est simplement agir en fait sur l’élément qui est le comment dire le titre principal donc je vais enregistrer ce que je vais faire c’est que vous
Allez venir hop là ici sélectionnez l’identifiant le rappel l’identifiant en fait c’est simplement la référence en fait de votre votre élément vous allez le copier et ici vous allez donc vous allez lui coller ici est en fait vous allez prendre un morceau de code vous aller
Pondre un mois un morceau de code qui va dire un javascript ok je travaille sur cet élément là vous allez déclaré une variable alors on va dire que ce titre je travaillais sur un titre ok égal alors javascript qui ne comprend pas comme le css les identifiants donc
Pour l’aider vous allez peut avoir besoin simplement de lui fournir des comment dire et des directives alors vous allez lui dire documents documents c’est votre page web get éléments éléments maï a dit ok donc là vous allez chercher l’élément de la page par son habit cosmique et surtout
N’oubliez pas à la fin de chaque ligne mettre un point virgule c’est très important donc là une fois qu’on a fait ça ok dans dans le titre on dit ben voila moi je veux travailler sur le titre donkey qui est l’élément avec lequel je veux travailler donc là il dit
Que j’ai sélectionné le système audio m’a donné ensuite ce qu’on va faire c’est on va définir une fonction donc là la fonction c’est je veux changer de couleur mon titre les fonctions en fait ça vous permet simplement de créer du comportement créer de l’interaction dans votre page web
Et c’est ça qui va faire la différence vous allez faire une fonction dont une fonction c’est une action finalement on vous faites comme moi le tuto facile up fonctions et on va l’appeler couleur jaune par exemple là vous faites ceci de parenthèse et deux accolades à l’intérieur ce que vous
Mettez c est bien vous voulez agir justement sur le voulait agir sur le titre donc vous allez utiliser la variable titre donc le titre qu’on a stockées grâce à d’identifiants ici vous allez pouvoir il est dans cette variable à voulez vous allez pouvoir la réutiliser dans la
Fonction donc là je veux changer le style et la couleur je mets point style tout en couleur et je lui dis que je veux mettre mon texte en jaune quand je clique dessus voilà et enfin donc ça ça va pas fonctionner tout de suite il faut faire un pont entre la fonction est
Votre votre élément alors pour faire le pont eh bien ça va simplement être un événement comment commence css en fait on a des événements est bien là en javascript on va utiliser aussi un événement donc ce qui va se passer c’est que on va réutiliser la variable titre donc on va définir un
Événement sur mon titre d’option en titre j’ai défini un événement mon événement c’est en un clic quand je clique dessus je veux appeler la fonction couleurs jeu d’accord donc lorsque je clique sur mon titre je veux appeler cette fonction-là compte là on fait le pont entre la variable et la
Fonction que je viens de décrire on enregistre on enregistre la page et on va faire pré visualiser et on voit ce qui se passe donc là je vais faire mon test je clique dessus et on voit finalement que bah mon titre est resté de couleur jaune de manière définitive
D’accord donc voilà pour le premier tuto en javascript alors bien entendu ce que vous venez de voir c’est simplement les bases de javascript et bien sûr qu’avec système point you on peut faire quelque chose de beaucoup plus compliqué beaucoup plus joli moi ce que je vais vous montrer là maintenant c’est je vais
Aller chercher un bout de code un peu plus épique d’accord est ce qu’on va faire c’est que je vais l’intégrer devant vous et vous allez pouvoir copier ce que je fais pour ceux qui suivent le plus hot et donc là les amis en fait j’ai trouvé un tuto qui est sympa qu’on
Voit là un effet sympathique que vous pourriez refaire sur vos pages de vente donc c’est celui ci ont fait avec un petit tutoriel voilà donc c’est sympa parce qu’en fait on pourrait simplement imaginer je sais pas moi sur une page de vente le nom d’un programme mise en avant avec un bon cup
Et puis lorsqu’on commence à défiler bien on a le nom du programme qui diminue et on peut lire le texte tranquillement avec le rappel du nom du programme après c’est simplement une question de configuration donc là ce que je vais faire c’est que je vais intégrer
Avec vous en direct ce cet effet là et puis on va voir ce que ça donne alors du coup là on a quoi on à l’html le css ok super est là on a finalement le n’a finalement le code qui permet de faire cet effet là donc moi ce que je vais
Vous proposer c’est d’intégrer ce quad là devant vous donc du coup hop je vais copiez ce code l’agent qu’on est sûr système point you là j’ai pris un nouveau script html là bien sûr on n’oublie pas de mes scripts et ont fait un copier coller donc moi ce
Que je vous conseille cd que vous avez des morceaux de code comme ça à faire ou à modifier finalement vous avez envie vous voyez que je ce qui est joli sur internet vous voyez quelque chose qui est joli sur voilà un tuto aux quelque chose à intégrer ne vous prenez pas trop
La tête copier d’abord le code et essayer de l’intégrer tel quel bien sûr en changeant les identifiants en changeant ce que vous avez à changer et après normalement ça devrait être correct donc là on va enregistrer et donc on voit que ce dont on a besoin c’est l’identifiant du l’identifiant du titre
Donc ce que je vais faire c’est que donc là oui c’est vrai qu’en fait je faisais pas je ne sais pas expliquer mais là en fait ce que je fais c’est que j’ai rajouté du texte pour qu’on puisse scrollé et en section on va dire en section top section top
En fait j’ai mis en rouge pour qu on distingue bien que bah voila c’est un raid ensuite ce que j’ai fait tout simplement c’est g on voit que sur le tutoriel ici le header reste en haut et c’est en fait ce qui est super avec system for you
C’est qu’on peut le faire massivement donc là en fait ce que vous allez c’est petite information vous cliquez ici vous allez sur collant en eau et en fait enregistrer et en fait voilà vous avez déjà votre vote raider qui est collant au donc ça c’est super avec système voyait là du coup ce
Que je vais faire c’est simplement récupérer les identifiants de mon titre parce que c’est bas sur le titre que j’ai envie de travailler là je vais modifier le code alors la petite 10 km heure je crois pas que je me fasse savoir parce qu’avec ce système
Point you ce que je vais devoir faire ça ceux qui sont intéressés je vous expliquerai pourquoi mais en fait il ya des choses si il ya des choses qui sont un petit peu compliqué auquel certains paramètres ont changé et après donc là on a quoi on a
100 du coup ce qu’on va faire c’est là pour la faune de style en fait moi les six donc là en fait ce qui se passe c’est simplement il a créé plan va pouvoir enlever tout ça de commenter on se fout là en fait on a un événement
Disponible dans windows update 2 c’est la fenêtre l’événement disponibles lorsqu’on se crawl est en fait à cet événement là il eut affecté une fonction et cette fonction là en fait c’est la fonction qui vient travailler sur notre élément et lui changer la taille de texte en
Fait en fonction de si le utilisateurs à ce projet de plus de 50 pixels on comment dire le texte veut avoir une taille de trente 30 tennis par contre si l’utilisateur est un escroc les deux moins sympathique ciel ça veut dire qu’il est encore en haut de
La page eh bien on va laisser la page a le titre à 100 pixels sans pixels de largeur ce qui est donc on enregistre on enregistre ici et là on va voir ce que ça donne alors ça ne marche pas très bien alors pourquoi ça ne fonctionne pas
Ah oui bien sûr quand on a su relancer ou hérissé lecteurs j’ai oublié de rajouter les hashtag pour l’identifier du texte là on voit déjà que le texte diminue donc déjà avec un script c’est déjà cool ce qu’on arrive à faire ensuite ce que je voudrais faire c’est
Pas simplement faire en sorte que ça change de manière plus smooth et voir ce qui se passe et voilà là on a notre super effet je vous promets que si vous placez pas très propre c’est un peu dégueulasse mais je vous promets que si vous faites ça sur une page de manière
Correcte que vous allez avoir quelque chose de vraiment pas mal merci à tous d’avoir suivi cette vidéo merci à tous les courageux d’avoir été jusqu’au bout du coup je vous invite à simplement mettre un petit pouce bleus de mettre un like ça m’aide pour la chaîne et pour continuer à faire du contenu
Pour les autres ceux qui seraient intéressés par simplement avoir un tunnel de vente bien bande d avoir quelque chose qui voilà qui envoie du lourd avoir un effet whaou et bien c’est mon métier aussi c’est ce que je délivre donc je vous ai mis un lien en descriptions et je vous
Invite à me contacter à prendre rendez vous et on en discute voilà on se dit ah la semaine prochaine a très vite