dimanche 30 novembre 2008

[photoshop] Quatre manières de corriger les imperfections d'une image

Nous parlons là des imperfections qu'il faut supprimer ou ajouter à une image : prolonger une pelouse pour supprimer le bout de route de la photo, supprimer un panneau de signalisation, un fil électrique, corriger des rides sur un portrait... Voici quatre outils de photoshop pour ce faire :

- L'outil Tampon de duplication (S) : il prélève un morceau d'image à un endroit pour le reproduire dans une autre partie de l'image. Il s'utilise en sélectionnant d'abord le morceau d'image que vous souhaitez dupliquer sur l'imperfection en maintenant la touche Alt appuyée. Puis vous avez le choix : soit vous souhaitez que l'image suive le même axe horizontal que le pointeur et dans ce cas vous gardez la case "Aligné" cochée, soit vous souhaitez que le tampon ne reproduise que la zone sélectionnée sans suivre l'axe de votre pointeur, et dans ce cas il faut décocher la case "Aligné".

- L'outil Correcteur de tons directs (J) : il agit comme un tampon de duplication, mais vous n'avez pas besoin de sélectionner une zone de duplication : il s'occupe de prendre lui-même l'environnement direct de la zone à supprimer pour la fondre dans l'image : idéal pour faire "disparaître" quelque chose en un clic !

- L'Outil Correcteur (Maj + J) : il est à privilégier lorsque le fond de l'image n'est pas uniforme. En effet, contrairement aux deux outils précédents, celui-ci (et le suivant) prend compte de la texture, de la luminosité et de l'ombrage de la zone corrigée... Il s'utilise comme le tampon de duplication, en prélévant avec la touche Alt un échantillon et en le dupliquant ensuite.

- L'Outil Pièce (Maj + J) : il s'agit d'un mélange entre le lasso et le correcteur. Vous allez l'utiliser comme le correcteur, mais en définissant auparavant une zone de correction, puis en glissant vers un endroit qui vous paraît adapter, photoshop s'occupe du reste.

Une astuce pour que les retouches d'un portrait soient le plus naturelles possible : avant de commencer les retouches, dupliquez le calque de travail, et faites les retouches sur le deuxième caque uniquement : une fois que vous avez tout retouché, réduisez l'opacité de ce nouveau calque à 65%, de manière à ce que le premier calque se montre un petit peu : lorsque le résultat sera convainquant, vous pourrez aplatir l'image en fusionnant les deux calques et le tout sera d'autant plus naturel...

mercredi 26 novembre 2008

[spip] Menu tout simple rubriques et sous rubriques du secteur en cours

Voilà je veux un menu tout simple, ni pliant/dépliant, ni déroulant, tout simple donc, avec les rubriques à la racine du site, et puis les sous-rubriques de la rubrique en cours uniquement. La clef de la manip est dans les trois premières boucles, dans lesquelles je mémorise les rubriques que je ne veux pas afficher, c'est à dire les sous-rubriques des secteurs où le visiteur ne se trouve pas.

<BOUCLE_RubCourante(HIERARCHIE){id_rubrique}{tout}>
<BOUCLE_RubSoeurs(RUBRIQUES){meme_parent}{id_rubrique!=#ID_RUBRIQUE}>
<BOUCLE_RubNieces(RUBRIQUES){id_parent}{doublons nieces}> </BOUCLE_RubNieces>
</BOUCLE_RubSoeurs> </BOUCLE_RubCourante>

<div id="menu">
<p> <a href="spip.php?page=sommaire">Accueil</a> </p>
<BOUCLE_Menu(RUBRIQUES){racine}{unique}{par num titre}>
<p> [<#EXPOSE{span,a href="#URL_RUBRIQUE"}[ class="(#EXPOSE)"]>(#TITRE|supprimer_numero)</#EXPOSE{span,a}>]</p>
<B_SsMenu> <ul> <BOUCLE_SsMenu(RUBRIQUES){id_parent}{par num titre}{doublons nieces}>
[<li><#EXPOSE{span,a href="#URL_RUBRIQUE"}[ class="(#EXPOSE)"]>(#TITRE|supprimer_numero)</#EXPOSE{span,a}></li>]</BOUCLE_SsMenu></ul></B_SsMenu></BOUCLE_Menu></div>

samedi 22 novembre 2008

[(x)html] Tous les styles de listes possibles

Voici représentés sur une seule page tous les styles de listes CSS possibles, afin de choisir plus facilement. Bien-sûr on peut apporter sa propre image en utilisant "list-style-image" à la place de "list-style-type". Compatibilité entre navigateurs ? Sur Firefox, tout s'affiche sauf upper-greek. Sur IE, on ne pourra utiliser que celles qui sont en gras...




Les classiques

Type circle :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type disc :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type square :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient

Les numériques

Type decimal :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type decimal-leading-zero :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type lower-roman :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type upper-roman :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient

Les alphabétiques

Type lower-alpha :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type upper-alpha :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type lower-latin :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type upper-latin :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type lower-greek :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez

  • Ils rient
Type upper-greek :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type cjk-ideographic :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type armenian :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type georgian :

  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type hebrew :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type hiragana :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type hiragana-iroha :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type katakana :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient
Type katakana-iroha :
  • Je ris
  • Tu ris
  • Il rit
  • Nous rions
  • Vous riez
  • Ils rient

mardi 18 novembre 2008

[spip] Menu qui change selon le contenu disponible dans la langue

Situation : mon site spip est multilingue (3 langues). J'ai choisi de faire une structure dans laquelle j'aurai tous mes articles "originaux" et leurs traductions dans une seule rubrique. Dans chaque langue, à terme, ce sera le même contenu (tous les articles seront traduits), mais ça viendra très doucement. Donc, pour l'instant, les rubriques sont très inégales. Par exemple, en FR j'ai 3 rubriques avec 10 articles chacune, et en EN j'en ai 1 seule qui contient des articles. Je ne veux pas que les visiteurs voient des rubriques vides dans le menu.

Solution : ci-dessous, un menu qui répond à cette situation. Le principe est simple : je demande les rubriques, je vérifie qu'il existe bien des articles publiés dans la langue, et dans ce cas seulement, j'affiche le titre des sous-rubriques. On peut bien-sûr compléter et compliquer encore plus la chose...

<ul> <BOUCLE_Secteur(RUBRIQUES){id_rubrique}{!lang_select}>
[<li>(#TITRE|supprimer_numero):</li>] </BOUCLE_Secteur>
<BOUCLE_Sect(RUBRIQUES){id_parent=1}{!lang_select}{par multi titre}{tous}>
<BOUCLE_SiSiArts(ARTICLES){branche}{lang}>
<BOUCLE_TitRubArt(HIERARCHIE){id_rubrique}{1,1}{!lang_select}{unique}>
[<li><a href="#URL_RUBRIQUE">(#TITRE|supprimer_numero)</a> |</li>] </BOUCLE_TitRubArt>
</BOUCLE_SiSiArts> </BOUCLE_Sect> </ul>


Ce principe est mis en application ici.

vendredi 14 novembre 2008

[blogger] Sauvegarder le contenu de votre blog

Voici 4 méthodes pour sauvergarder le contenu d'un blog "blogger" :

1) Utiliser l'outil Blogger Backup
Une fois le logiciel installé : vous donnez vos identifiants blogger, vous choisissez le(s) blog(s) concerné(s), et vous pouvez sauvegarder toutes les données du blog.
Vous pouvez trouver un mode d'emploi détaillé ici.

2) Utiliser un aspirateur de sites comme HTTrack

3) Suivre la procédure issue de l'aide de Blogger, que vous trouverez traduite ici

4) Une fois que vous avez déterminé dans "Paramètres > Flux d'actualisation" que vous souhaitez un affichage complet, vous tapez cette url dans votre navigateur :
http://votreblog.blogger.com/feeds/posts/default?max-results=1000
Vous n'avez plus qu'à afficher la source et sauvegarder au format XML. N'oubliez pas de remettre un affichage partiel dans le flux d'actualisation, si celui-ci n'était pas complet auparavant.

N'oubliez pas de sauvegarder les images à côté.

lundi 10 novembre 2008

[firefox] Voir son site dans IE 5.5, 6, 7 ou 8 bêta

Voilà du nouveau pour les webmestres soucieux de savoir comment va marcher leur site dans les autres navigateurs que Firefox (au hasard : dans IE).

NetRenderer (en anglais ou allemand) vous permet de vérifier votre page dans Internet Explorer 8(bêta), 7, 6 ou 5.5, à partir d'un datacenter situé en Allemagne. D'une utilisation simplissime et libre, vous avez juste à donner l'URL du site en question et choisir la version IE.

Son extension Firefox, en français, est disponible ici.

mercredi 5 novembre 2008

Moins de 1% des visiteurs laissent des commentaires

Voici le résultat d'une toute petite analyse que j'ai fait le 16/09/08, répondant à cette question : sur trois sites d'information connus, quel est le pourcentage moyen de commentaires sur le nombre de visites pour un article ?

- www.rue89.com (sur 86 articles pris dans les premières pages de résultats) : 1% (de 0.2% à 4.22%); pas de commentaires avant 533 visiteurs. Pour un article, de 60 à 40025 visites.
- www.lepost.fr (sur 92 articles pris dans les premières pages de résultats) : .84% (de 0.3% à 4.39%); pas de commentaires avant 522 visiteurs. Pour un article, de 93 à 22258 visites.
- www.marianne2.fr (sur 89 articles pris dans les premières pages de résultats) : .85% (de 0.08% à 2.61%); pas de commentaires avant 933 visiteurs. Pour un article, de 59 à 46486 visites.

En moyenne nous avons donc .9% de visiteurs qui laissent des commentaires sur un article.

samedi 1 novembre 2008

[spip] Personnaliser la puce de spip

Lorsqu'un utilisateur écrit cela dans un article spip
- premier élément
- deuxième élément
- troisième élément

Spip renvoie ça :


Cette puce est de couleur neutre, ce qui est fait express, et surtout très laide.

La remplacer est un jeu d'enfant :
- Ouvrez l'image dans votre logiciel de graphisme préféré
- Créez un nouveau calque transparent par dessus l'actuel
- A l'exact emplacement de la puce, dans le nouveau calque, créez la puce que vous voulez pour votre site (avec les formes personnalisées fournies par défaut par exemple)
- désactivez le premier calque et enregistrez la nouvelle puce, au format gif, dans le dossier /squelettes et transférez-la.

Et voilà !