Avatar, Gravatar et Favicon pour blog hautETfort

Avatar, Gravatar et Favicon sont les icones qui vous identifient visuellement auprès des bloggueurs.
Je propose de produire chaque icone avec Genfavicon. Free Online Favicon Generator. Icon Generator.

Un lecteur vraiment personnalisé pour Youtube, sans feuille de styles

Au début du mois de janvier, nous voyions comment personnaliser un lecteur vidéo Dailymotion en appliquant une mise en forme enregistrée dans la feuille de styles. Si cela vous permet de ne plus avoir à taper les codes de styles, cela veut aussi dire que tous vos lecteurs vont être identiques. Plutôt que de multiplier les insertions dans la feuille de styles, vous pouvez les "passer" en direct.

D'ailleurs, vous le savez déjà, si vous avez la curiosité de regarder le code HTML de vos notes. Si vous appliquez une couleur rouge sur un mot dans votre texte, le code ressemblera à ceci.

Si vous appliquez une couleur <span style="color: #800000;">rouge</span> sur un mot dans votre texte,

Avec <Span> on crée une exception dans la feuille de styles courante, puis on déclare les styles. Rien ne nous empêche de procéder de même pour la mise en forme d'un lecteur exportable vidéo.

Un lecteur vraiment personnalisé pour les vidéos DailyMotion

^[maj] Par hasard, alors qu'il m'avait vu le premier, j'ai découvert l'univers d'un "apprenti conteur visuel", d'un artiste de l'image qui sait aussi écrire. Serait-ce qu'il passe sa vie au cinéma, pour voir les films des autres, préparer les siens, et parfois regarde le halo blanc du projecteur dans les ténèbres, maintenant il l'affirme : J'habite sous la lune. Pour aujourd'hui je vous invite à vous laisser émouvoir par "Sick Boy & The Tree", et quand vous aurez repris vos esprits, lisez la suite pour voir comment encadrer les vidéos que vous proposez sur votre blog.

 

Créer une image translucide avec GIMP

Nous avons déjà vu comment afficher une image d'arrière-plan translucide, mais pas encore comment la créer. Voici une méthode simple à mettre en œuvre avec GIMP.

Étape par étape :

1. Créer un nouveau fichier
2. Spécifier un arrière-plan transparent
3. Sélectionner l'outil de remplissage
4. Régler le niveau d'opacité
5. Sélectionner la couleur de remplissage
6. Remplir
7. Enregistrer le fichier au format PNG

La vidéo est hébergée par Viméo, et vous la trouverez ci-dessous. Je vous remercie de votre indulgence, c'est ma première.

Afficher un arrière-plan translucide sur une image de fond

C'est certainement du B-A-Ba pour les graphistes et autres web-designers, mais il a fallu que je trouve un blog utilisant l'effet que je cherchais pour comprendre. Vous avez trouvée une chouette image d'arrière-plan, mais l'on n'arrive plus à vous lire sur ce fond. L'idéal serait de pouvoir l'atténuer, le descendre (ah pardon c'est en papier ça), pour gagner en lisibilité sans trop perdre en décor.

En jetant un œil aux récents candidats du Very Nice Blog, j'ai découvert le blog Arkino 3.0 qui propose d'explorer le Concept Abstrait de l'Optimisme Relatif. Il n'y a pas que la poésie du titre pour valoir le détour, et je pourrais vous parler de sa mise en forme originale et sans trop de fioritures, d'un graphisme sympathique et soigné sans être précieux... Mais je ne vous parlerai que d'un détail, d'une anecdote, un rien du tout pourtant très utile.

Visitez-le et vous verrez, entre autres choses, que les éléments de colonne sont encadrés en pointillés (ça on sait faire) avec un fond translucide qui permet de voir l'image d'arrière plan. Et ça, je ne savais pas.

(Cette note créée le 15/09/09 a été mise à jour le 11/11/09, avec la publication de Créer une image image translucide)

Protéger ses photos de blog

Soyons lucide! Rien n'empêche un esprit mal intentionné de s'emparer d'une photo par une simple capture d'écran.

Ne devenons pas parano! Parmi les solutions ici testées, vous en trouverez une suffisamment dissuasive.

 

Créer et insérer une animation GIF avec Loogix.com

Le site Loogix.com vous aide à produire en ligne une animation simple pour l'insérer dans votre blog hautETfort.
Cette solution pour insérer un GIF animé s'ajoute à la note "Insérer une image transparente, animée, voire les deux"

** = niveau assez facile, nécessite de copier/coller un peu de code HTML

Insérer une image transparente, animée, voire les deux.

Insertion depuis un fichier, ou depuis une URL, il faut savoir bien choisir la méthode d'insertion d'une image pour en préserver l'intégrité.

Vous en avez peut-être déjà fait l'expérience. Vous aviez trouvé une image animée ou une image partiellement transparente, et après l'avoir inséré, cette dernière était figée, et sur fond noir. Sous ces lignes, deux images dont l'une était à l'origine un GIF animé, et l'autre avait un fond transparent. Vous voyez bien qu'elles ont toutes deux perdu une qualité essentielle, et peut-être même la seule qu'elles possédaient.

Quand on insère une image avec l'onglet "Depuis un fichier", on active un process de conversion qui va permettre la génération d'une image dans une dimension déterminée, avec la possibilité d'accéder à une copie de l'image d'origine. Nous avons vu ce processus dans la note qui ne veut pas que ça l'affiche mal.
C'est pendant cette conversion que l'on perd la transparence et ou l'animation. Plutôt que de leur faire traverser la vitrine, il faut donc livrer ces images par l'arrière-cour puis les faire venir en magasin.

Insérer des images, pour que le moins souvent, ça l'affiche mal

Vous n'avez besoin de personne pour insérer une image dans une note, mais il peut tout de même être utile de faire le point sur les différentes méthodes disponibles. Dans de prochaines notes, nous aborderons l'affichage de galeries et autres collections d'images, sans qu'il s'agisse d'album ou de photoblog.

Vous n'avez pas mis longtemps à savoir insérer une image. Dans l'éditeur de notes, vous cliquez sur l'icône représentant un arbre dans un cadre, et la fenêtre suivante s'ouvre alors à vos yeux éblouis.

La plupart du temps vous "Choisissez un fichier" en cliquant sur le bouton "Parcourir..." pour explorer votre machine, vos supports mémoire, afin de récupérer la belle image.

Éventuellement, vous ajoutez des "Tags" pour faciliter la recherche. C'est ce qui permettra de faire remonter votre image, et donc votre note quand quelqu'un fait une recherche sur le portail Hautetfort.

Viennent ensuite les "Propriétés d'affichage" qui vous permettront d'aligner l'image et le texte alentour.

Mon blog hautETfort a grossi !

Pas de panique! Il suffit de supprimer les images inutiles pour que votre blog retrouve sa taille habituelle.

L'onglet ACCUEIL de l'éditeur hautETfort affiche l'Espace disque utilisé mesuré en Mo (méga-octets). Cliquez sur chaque image ci-dessous pour l'afficher en taille réelle.

Que faire quand vous constatez que cet espace augmente de façon incontrôlée?

Cliquez-ici pour lire la suite de cette note de Kielut dans la rubrique Hotline de son blog Upset Diary.