davidtouvet.com

Bon j’avoue, depuis que j’ai découvert Skitch, je peux plus m’en passer (lire mon article à ce sujet). Mais là, kwout fait fort puisqu’il permet de faire une capture d’écran et de fournir un code HTML à insérer sur une page web (ça on commence à connaître) mais en plus il ajoute la source de cette capture, c’est-à-dire le titre de la page avec un lien pour s’y rendre. Ah oui, si je ne m’abuse, “kwout” serait en gros la prononciation enrhumée de “quote” qui signifie en français “citer”. Boucle bouclée.

Pour aller plus vite, on peut même utiliser un bookmarklet. Du beau boulot! On peut poster l’image sur kwout mais aussi sur son compte Flickr et Tumblr. Allez un petit exemple issu de ce blog:

le blog de davidtouvet.com via kwout

Via Kwout - L’art de faire un screen en citant la source

Si comme moi vous n’arrivez toujours pas à vous faire à l’éditeur WYSIWYG de WordPress (essayez de copier-coller un code embed provenant de youtube par exemple en ayant pris soin avant de basculer en mode HTML et vous verrez le désastre…), vous n’avez comme autre choix que d’utiliser les quicktags de WordPress, sorte de petits boutons cliquables nous épargnant la saisie fastidieuse des balises HTML.

Eh bien, sachez qu’il est possible de les éditer ces petits boutons pour se configurer la barre quicktags de nos rêve. Deux cadeaux: un tutoriel qui explique tout cela et une barre améliorée de la mort qu’il suffit de charger sur son serveur à la place de l’originale.

Par exemple, lorsque j’ajoute une citation, la barre orginale me permet en cliquant sur blockquote d’obtenir ceci:

<blockquote></blockquote>

Jusqu’à présent, je devais rajouter à la main un attribut cite et la mention source pour obtenir ceci:

<blockquote cite="">

Source</blockquote>

Il suffit de repérer dans le fichier quicktags.js le code suivant:

edButtons[edButtons.length] =
new edButton('ed_block'
,'b-quote'
,'\n\n<blockquote>'
,'</blockquote>\n\n'
,'q'
);

et de remplacer par

edButtons[edButtons.length] =
new edButton('ed_block'
,'b-quote'
,'\n\n<blockquote cite="">'
,'\n\nSource</blockquote>\n\n'
,'q'
);

Et pour finir en beauté, on remarquera que l’avant-dernière ligne indique le raccourci clavier du quicktag, ici “q”. Sur OS X et Firefox, utilisez la touche Ctrl+q, sur Windows, essayez par exemple Alt+q ou ?

Extension sympathique pour les développeurs web: X-Ray vous permet d’économiser du temps et de la rétine puisqu’il est possible de visualiser les tages d’une page sans faire des va et vient avec la source (via gou blog).

One installed the X-Ray command is available by right-clicking as well as in the Tools menu. When applied to a page it can help you see how the document was constructed without having to go back and forth between the sourcecode and the page in your browser. Is that list made of li dd or p elements? Is that an h3 tag or just some bolded text? X-Ray shows you what’s beneath the surface of the page.

Source

Il fallait le savoir! Bien pratique cette astuce fonctionnant sous Firefox (j’ai pas testé plus loin) qui permet d’afficher la source d’une page web. Il suffit d’entrer l’”URL” suivante: view-source:http://www.davidtouvet.com.

Très pratique pour afficher sur une page web un lien qui pointerait vers la source d’une page.