Démonstration vidéo: ma façon d’utiliser une règle à pixel

Démonstration vidéo: ma façon d’utiliser une règle à pixel

Dans cette courte vidéo, je vous montre une situation où j’utilise la règle à pixel JRuler, un logiciel de mesure sur écran que je vous ai présenté la semaine dernière.

Dans quel cas utiliser le logiciel de mesure sur écran JRuler ?

  • Durée: 3min 13
  • Niveau: facile | intermédiaire | expert
  • Public: webmaster | développeur | chef d’entreprise | tous

Cliquez ici pour afficher la transcription de la vidéo :
« Tuto N° 11 : Utiliser une règle à pixel »


Bonjour à tous. Ici Marie-Eve du blog Les Doigts dans Le Net. Alors la semaine dernière, je vous avais présenté cet outil, JRuler Pixel, qui est une petite règle pour les pixels. Et j’ai eu plusieurs personnes qui m’ont demandé en commentaire et même par mail comment est-ce que j’utilisais cette règle, en fait, dans quelles situations c’était nécessaire. Et donc, comme je suis tombée sur cette situation encore ce week-end, j’ai eu besoin de l’utiliser et je me suis dit que c’était le bon moment pour tourner une petite vidéo de deux-trois minutes en vous montrant donc cette manipulation. Vous allez voir, c’est vraiment très rapide.

1/Démonstration : dans quelle situation jRuler s’avère utile? 00:30

1/(et comment l’utiliser)

Donc ceci, c’est le site du client pour lequel j’ai travaillé ce week-end. Ça s’appelle : http://la-cane-biere.fr et c’est un site pour un magasin de bières, une cave à bières en fait, située à Marseille. Et donc ce que j’ai fait ce week-end, c’est leur rajouter ce petit bouton « J’aime » et « Envoyer » que vous voyez situé ici et j’ai eu envie de leur proposer deux versions : d’abord cette version qu’ils ont choisie et une autre dans laquelle le texte à droite était caché. Alors, comment j’ai fait ça?

Bien, c’est très simple : nous allons voir tout de suite le code avec Firebug.

Donc je fais un clic droit sur la zone, « Inspect Element with Firebug ». Voilà et ici dans ma partie de gauche de Firebug, je vais chercher l’iframe. Voilà l’iframe.

Donc ça, c’est le code que j’ai copié collé en fait depuis Facebook. Donc comment est-ce que je vais faire en fait pour cacher le texte qui est à droite? Bien, tout simplement, je vais mettre cet iframe dans un div, dans une section div et cette section div, je vais réduire sa taille pour qu’on ne voie que les boutons.

Donc je clique sur le div et sur la partie de droite ici j’ai le code CSS qui correspond à ce div. Je vais tout de suite mettre une petite bordure pour que vous puissiez voir vraiment le div, toute la taille.

border : 1px solid red;

Le voilà donc, qui fait tout le long. Et donc, mais maintenant, la prochaine étape évidemment, ça va être de réduire ce div en largeur et pour ça j’ai besoin de connaître sa taille. C’est là qu’intervient ma petite règle.

Donc je prends ma petite règle, je la cale dans le coin. Je glisse mon curseur à l’endroit où je le voudrais. Voilà, par exemple ici, et je lis le nombre de pixels correspondant, à savoir ici 137 pixels. Donc je peux enlever ma petite règle. Je vais rajouter donc une propriété « width » pour la largeur : 137 pixels.

border : 1px solid red;
width : 137px;

Hop! Et là tout de suite, nous voyons que mon div s’est bien retaillé à la bonne largeur. Par contre, je vois toujours le texte.

Ça, c’est parce qu’en fait, par défaut, quand un div est trop petit pour présenter tout le contenu qui est à l’intérieur, le contenu sort du div et on le voit quand même. Mais on peut régler ça en CSS. C’est avec la propriété « overflow ».

	border : 1px solid red;
	width : 137px;
	overflow : hidden;

Si je le mets sur « hidden », voilà, il cache du coup tout ce qui est en dehors de ce div. Et donc maintenant, je peux enlever ma bordure et j’ai bien juste mon bouton « J’aime », mon bouton « Envoyer ». Il n’y a plus de texte à droite.

Donc voilà : c’était tout pour aujourd’hui.

http://lesdoigtsdanslenet.com

Une petite manipulation très simple pour vous montrer donc comment j’utilise cette règle. Bien, je vous souhaite une très bonne journée et à très bientôt. Au revoir.

Fin de la transcription

Résumé

  • Téléchargez la règle
  • Décompressez le dossier: la règle est directement prête à être utilisée!
  • Lancez la règle en double-cliquant sur jruler.exe
  • Placez la règle sur l’élément à mesurer.
  • Placez votre curseur à l’endroit jusqu’où vous souhaitez mesurer
  • Lisez le nombre de pixel affiché sur la règle

astuce, logiciel, logiciel de mesure par pixel, logiciel de mesure sur écran, mesure pixel sur écran, mesure sur écran, règle à pixel, vidéo, webmaster

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

11 commentaires

  1. Bonjour Marie Eve

    Pour une utilisation à peu près identique, j’utilise le plugin firefox « measure it » qui permet en sélectionnant une fenêtre d’avoir les deux mesures. largeur et hauteur.

    Thierry

    Répondre
    • de même…
      je reste toujours sceptique.
      En même temps, j’aime pas trop avoir plein d’applications qui traine sur mon ordi.
      J’admet que c’est pratique mais je préfère me débrouiller avec Firebug et d’autres plugin Firefox :)

      Sinon, merci pour la vidéo :)

      Répondre
  2. Génial, merci pour la propriété overflow qui permet de masquer ce qui sort du div, je ne la connaissai pas et cela va m’être bien utile pour le projet sur lequel je travail en ce moment, une belle coïncidence !

    Répondre
  3. Merci,

    Outil très utiles.

    Répondre
  4. « La règle à pixel JRuler (que je vous ai présentéE la semaine dernière) ». Le verbe au participe passé s’accorde en genre et en nombre avec le COD quand celui-ci est placé avant et lorsqu’il se conjugue avec le verbe avoir.

    Répondre
    • mdr! J’ai droit à un cours de français. oO Merci pour la règle, mais je la connaissais (sinon y’aurait quand même bien plus de fautes sur ce blog!), ce qui me manque en ce moment, c’est du temps pour me relire.

      Répondre
      • C’est moi qui te remercie pour la règle (à pixels). Je serais venue visiter ton blog un peu plus tôt, j’aurais eu moins de mal avec mon sprite.

      • Un lecteur m’a fait découvrir cet outil pour les sprites : http://gridulator.com/
        Je ne l’ai pas testé, mais ça paraît prometteur!

  5. Bonjour MarieEve

    Wouah, cette règle est plus que sympa.

    Moi j’utilise Photoshop pour la mise en page et les dimensions de mes éléments.

    Je vais gagner beaucoup de temps avec cette règle.

    Je pense revenir plus souvent içi.

    Il y a des astuces bien sympa

    Merci

    Répondre
    • Bonjour Frédéric,
      Bienvenu sur le blog :)
      A bientôt!

      Répondre
  6. Je connaissais pas l’outil : merci pour la découverte. M’en vais tester cette règle à pixels de ce pas – ça pourra m’être bien utile 😉

    Répondre

Trackbacks/Pingbacks

  1. Vous administrez vous-même votre site professionnel: vos difficultés techniques et comment les résoudre - Les Doigts dans le Net - [...] « Les Doigts Dans Le Net », je privilégie plutôt  les langages, outils et astuces dont l’apprentissage est rapide et…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint