Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Utiliser AddToAny

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez comment intégrer les icônes du service en ligne AddToAny. Il s'agit de partager votre site sur les réseaux sociaux.

Transcription

La seconde section de ma colonne de droite contient, vous le voyez, une série d'icônes, qui me permet de partager mon article de blog sur divers réseaux sociaux. Il existe des tas de services sur internet, qui vous permettent d'intégrer ce type d'icônes de partage, et moi j'ai choisi de vous parler de l'un d'entre eux, qui s'appelle AddToAny. Alors, je suis ici sur le site AddToAny.com, un site qui n'existe qu'en anglais malheureusement, mais, vous allez le voir, qui est extrêmement simple à utiliser, même pour des non anglophones. Donc, je vais descendre un petit peu ici, au niveau de cette page, et je vais placer ma souris sur ce gros bouton, Get the share buttons, obtenir les boutons de partage. Et vous voyez que AddToAny me propose de placer des boutons de partage, sur différents types de services, vous retrouvez ici des choses que vous connaissez probabement. Alors moi ce qui m'intéresse, c'est de placer ces boutons sur un site web, je vais donc choisir la première icône, web site. Alors ici, je vais pouvoir choisir le type de bouton à intégrer, donc des boutons de partage, ou des boutons qui vont permettre aux personnes de souscrire à mes comptes, donc de me suivre sur Twitter, etc. Moi j'ai besoin ici de boutons de partage, donc je vais choisir ici share buttons. Ensuite, je vais choisir les services, que je vais voir apparaître dans mes boutons de partage, donc choose services vous voyez que, par défaut, AddToAny vous propose, Facebook, Twitter et Google +. Et vous avez de l'autre côté, dans l'autre colonne, des tas d'autres services, que vous pouvez donc ajouter à cette liste. Par exemple, on va placer LinkedIn ici, que je vais placer dans la colonne de droite, Vous voyez également que vous pouvez réorganiser ces icônes, donc choisir l'ordre dans lequel elles apparaîtront sur votre page. Une fois que vous êtes satisfait de votre arrangement, vous cliquez sur le bouton done, vous voyez ici que les boutons se mettent à jour, et puis, il ne reste plus qu'une seule chose à faire, c'est de cliquer sur le bouton "get button code", obtenir le code de ces boutons, et vous obtenez ici un code HTML qu'il ne vous reste plus qu'à copier, et à coller dans votre éditeur de code. Alors je vais le coller ici, juste en dessous du titre H1, donc c'est un code HTML que j'ai copié d'internet. Alors vous le voyez, ça commence par un commentaire, addToAny BEGGIN, et puis ici addToAny END, donc il est très clair de voir exactement ce que vous avez copié d'internet, et ce qui vient de vous. Alors ici, au niveau du code AddToAny, eh bien, nous avons d'abord un élément div, avec une série de classes CCS, vous le voyez ici. Vous avez également une série de balises A, chacune de ces balises A représente l'un des boutons de partage, et surtout, vous avez ici une balise script, qui appelle un JavaScript, qui se trouve sur le site de AddToAny, et c'est lui, bien sûr, qui fait marcher tout cela. Voilà, nous avons donc intégré les icônes de partage, grâce à ce service AddToAny. Je vous rapelle qu'il existe un tas d'autres services, qui offrent le même genre de choses sur internet, à vous d'utiliser celui que vous préfèrez.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !