Comment créer de fausses captures d'écran de sites Web avec Firebug

Lorsque vous pensez à des captures d'écran truquées ou modifiées, des programmes comme Photoshop vous viennent probablement à l'esprit. Je n'ai jamais été très créatif en matière de design et de travail graphique, ce n'est donc pas une question pour moi. Si vous essayez d'échanger des visages dans une image, vous devrez apprendre à utiliser des programmes comme celui-ci. Si vous essayez de faire quelque chose comme changer le texte dans une conversation sur Facebook, inutile. Tout ce dont vous avez besoin est Firebug et une clé PrtScrn.

Firebug est disponible pour tous les principaux navigateurs. Comment installer Firebug sur IE, Safari, Chrome & Opera Comment installer Firebug sur IE, Safari, Chrome et Opera En savoir plus: IE6 +, Firefox, Opera, Safari et Chrome. Dans cet exemple, je vais vous présenter un didacticiel sur son utilisation pour son navigateur natif, Firefox. Qu'est-ce que Firebug? Firebug est un add-on de navigateur qui vous permet d’éditer, de déboguer et de contrôler CSS. Les prochaines étapes pour devenir un maître Jedi CSS Les prochaines étapes pour devenir un maître Jedi CSS CSS est absolument l’une des plus importantes Les technologies autour de l'Internet aujourd'hui, et bien que la plupart des gens admettent savoir un peu HTML, nous sommes généralement ignorants sur CSS. La dernière fois que je vous ai présenté… Lire la suite, HTML et JavaScript. Pour manipuler les pages Web comme je vais vous le montrer aujourd'hui, vous n'avez pas besoin de connaître ces langues..

Installation de Firebug

L'installation est incroyablement facile. Rendez-vous sur le site officiel pour télécharger l'add-on [N'est plus disponible]. A partir de là, sélectionnez votre navigateur (Firefox est préféré, pour que la suite soit plus facile). Installez l'add-on et redémarrez votre navigateur si nécessaire.

Utiliser Firebug

Lors de l’installation de Firebug, l’icône devrait par défaut être affichée dans votre barre d’outils, dans le menu Outils et éventuellement dans le menu contextuel. Cliquez sur l'icône dans la barre de votre add-on et vous verrez un nouvel onglet apparaître en bas de votre écran..

Ce que vous voyez ici est une vue HTML des éléments de la page Web sur laquelle vous vous trouvez. Dans cet exemple, il s’agit de la page de téléchargement de Firebug sur les add-ons de Firefox. Si vous souhaitez utiliser Firebug à des fins plus habituelles, n'hésitez pas à fouiller les onglets et à vous familiariser avec ses fonctionnalités..

Le bouton que j'ai mis en évidence dans cette capture d'écran est l'outil d'inspection. C'est l'outil que nous allons utiliser. Cliquez sur ce bouton et vous remarquerez que chaque zone de texte au-dessus de laquelle vous survolez sera mise en surbrillance dans la vue de page Web, puis en bas dans la vue HTML de Firebug..

Changer le texte

Cliquez sur le bloc de texte que vous souhaitez manipuler. Vous verrez que le texte a été sélectionné dans la vue HTML de Firebug. À partir de là, double-cliquez sur la ligne HTML contenant le texte que vous souhaitez modifier. Vous pouvez commencer à taper ce que vous voulez.

Au fur et à mesure que vous tapez, vous verrez que l'aperçu est mis à jour en direct sur la page Web..

Cool, non? C'est particulièrement facile en raison de la manière dont Firebug vous permet d'isoler le texte brut du HTML encapsulé. De cette façon, tous les éléments HTML, styles CSS et autres éléments visuels importants sont préservés afin que la copie soit identique à la copie réelle..

Au fur et à mesure que vous maîtrisez mieux Firebug ou que vous connaissez déjà le langage HTML, vous constaterez qu'il est tout aussi facile de modifier d'autres éléments de la page, tels que des images. Les possibilités sont assez infinies et je suis sûr que vous proposez déjà des moyens d'utiliser et d'abuser de ce petit truc..

Faites-moi savoir ce que vous pensez de ce petit conseil et partagez vos façons créatives de le mettre à profit dans les commentaires.!

En savoir plus sur: HTML, Mozilla Firefox, Capture d'écran, Éditeurs WYSIWYG.