oct 15 2009

Un menu en onglets (« Tabs ») avec CSS

Michael Zwyssig

Il existe de nombreux menus différents : les menus classiques, soit une grosse barre horizontale, les menus dropdown, les menus verticaux alignés à gauche ou à droite, qui peuvent être plus ou moins complexes, etc. Certains de ces menus sont énormément lourds et quasiment inutilisables, d’autres très légers sobres. Nous voyons maintenant comment faire une barre de menu horizontale avec des onglets, comme c’est à la mode de nos jours, sans images ni javascript.

exemple1

Lire la suite


sept 7 2009

Islande 2009, Alftavatn et HDR sous Linux avec qtpfsgui

Michael Zwyssig

On commence gentiment, je viens de rentrer. Je suis en train de faire de l’ordre dans les photos là, il y’en a plus de mille…

Cette photo représente un des paysage les plus spectaculaires que j’ai vu en Islande. On marchait direction la « Hut » Aftavatn, et là, juste en commençant à descendre vers le Lac, le brouillard a commencé à dissiper…

Alors, comment cette image a été faite sous Linux ? C’est (relativement) facile. J’ai utilisé le logiciel qtpfsgui.

Ce logiciel permet d’utiliser la technique d’imagerie à grande gamme dynamique (High dynamic range imaging ou HDRI). Ça donne souvent des photos plus contrastées et avec des couleurs peut-être un peu surnaturelles. C’est parfois utilisé lorsqu’on prend des photos à contre jour et qu’on veut faire en sorte que tout soit affiché sans sur-exposition ou sous-exposition.

Pour créer une photo HDR, il y a plusieurs méthodes. Celle-ci décrit la méthode qui utilise plusieurs photos à différents niveaux de luminosité. Assure-toi donc d’avoir un trépied ou endroit stable (genre une table) où il est possible de poser l’appareil. S’il est doté de la fonction Bracketing, utilise-là :)

Avant de commencer, assure-toi d’avoir entre 3 et 5 photos du même objet à différents seuils de luminosités.

Pas très droites les photos (trépied pourri quoi)

Pas très droites les photos (trépied pourri sur sol caillouteux)

1) Installation du logiciel

Pour installer qtpfsgui sur Ubuntu :

sudo aptitude install qtpfsgui

Les sources sont disponibles à cette adresse.

2) Lancement

Gnome : Applications -> Graphisme -> Qtpfsgui

3) Utilisation

L’utilisation du logiciel est très intuitive.

La première chose à faire est de créer le fichier HDR. On clique donc sur « Nouveau Hdr… », puis « Charger les images ». Il faut prendre garde à une chose, c’est que les fichiers jpg ont bien une extension .jpg et pas .JPG, car le programme ne va rien trouver sinon. Je ne sais pas pourquoi.

Il faut cocher la case "Aligner automatiquement les images" si on veut corriger au pixel près.

Il faut cocher la case "Aligner automatiquement les images" si on veut corriger au pixel près.

On clique sur suivant, et ça peut prendre un moment. Chez moi, l’alignement dure environs 4 minutes.

On peut encore ajuster les images individuellement avec les flèches :

capture_2

Après, on clique sur Suivant puis sur Terminer, et le fichier HDR est créé.

Maintenant qu’on a le fichier HDR, il va falloir le Tonemapper. Clique donc sur le bouton adéquat, et c’est parti. Là, essaies un peu tout, pour commencer. Tu peux choisir la taille de l’image de sortie, ça ouvre une image à chaque fois qu’on valide qu’il suffira d’enregistrer. Ne pas oublier d’enregistrer le fichier HDR également si tu veux faire d’autres modifications par la suite !

Les paramètres pour la photo ci-dessus sont :

mantiuk, contrast mapping : 0.359, saturation factor : 1.127


août 19 2009

YAPB pour Wordpress

Michael Zwyssig

Yet Another Photoblog. Sympatique module pour wordpress.

Après un essai et une adaptation dans thème (pour les bordures d’images et lightbox) , ça marche !

Dans les options de base de YAPB, on peut choisir comment afficher les miniatures, de quelle taille et leur comportement sur chaque type de page (une page,  le blog, les archives, pour un article seul). La seule « impossibilité », c’était de lier la miniature à l’image pour faire fonctionner Lightbox.

On ajoute le bout de code suivant aux fichiers page.php, index.php et single.php, entre les balises <div class="entry"> et le </div> correspondant. Les fichiers se situent dans le dossier du thème, pour ma part /chemin/vers/wordpress/wp-content/themes/elegant-grunge.

Le code a donc été personnalisé pour mes besoins.

<?php if (yapb_is_photoblog_post()): ?>
<?php if ($post->image): ?>
<div>
<span><span><span><span><span>
<a href="<?php echo $post->image->uri ?>" rel="lightbox">
<img src="<?php echo $post->image->getThumbnailHref(array('w=425','fltr[]=usm|30|0.5|3')) ?>" style="width:425px;" />
</a>
</span></span></span></span></span>
</div>
<?php endif ?>
<?php else: ?>
<?php endif ?>

On fait d’abord un test, voir si le post est bien fourni avec une image YAPB.

Les 40 span sont utiles pour les bordures d’image spéciales du thème. Ensuite on met le lien avec echo $post->image->uri ce qui nous sort l’url de l’image traitée.

La miniature est gérée avec $post->image->getThumbnailHref(array('w=425','fltr[]=usm|30|0.5|3')), 425 étant sa largeur.

Code adapté venant du forum de YAPB. L’image utilisée est une retouche d’une photo du CICG (Centre international de conférence de  Genève).


août 4 2009

Drupal : Le thème basique ultime

Michael Zwyssig

basic-illu_1.thumbnail

se nomme sobrement Basic. Créé à partir du thème Zen (en moins complexe), il fourni l’essentiel : une colonne à gauche, une à droite, un en-tête et un pied de page.

Lire la suite


juil 29 2009

Mémo : Commenter plusieurs lignes d’un coup avec VIM

Michael Zwyssig

C’est toujours le bordel pour commenter tout un bloc d’un fichier de configuration sans devoir taper 134 dièses.
Voici la méthode VIM.

  1. CTRL+V sur le premier caractère de la première ligne à commenter, puis sélectionner toutes les lignes voulues avec la flèche du bas ou la touche J
  2. Maj+i (I majuscule)
  3. Insérer le caractère de commentaire (# ou // ou n’importe quoi d’autre )
  4. Esc, Esc

EDIT: Pour mapper une commande directement :

map ,# :s/^/#/<CR>

On peut très bien mettre cela dans le .vimrc pour faire en sorte que le mapping se fasse à chaque lancement de vim.

Lorsqu’on selectionne du texte en visual mode, on peut ensuite taper , (virgule) puis # et ça rajoutera un # en début de ligne.
(Merci raph et wikia qui nous explique bien comment ça marche)


juil 28 2009

Linux : Monter un partage FTP avec FUSE / Curlftpfs

Michael Zwyssig

Voici comment monter un partage FTP en ligne de commande.

Installe curlftpfs (méthode Debian/Ubuntu)

$ sudo aptitude install curlftpfs

Crée le dossier où tu veux monter le partage :

$ mkdir partageftp

Pour le montage en question:

$ curlftpfs ftp://user:password@ftpserver partageftp

user, password et ftpserver sont des données que t’es sensé connaître pour accéder au FTP.

Si tu n’as pas les droits, vérifie le fichier /etc/group pour voir si ton utilisateur est bien dans le groupe fuse.

$ cat /etc/group | grep fuse

S’il n’est pas dedans :

$ usermod -a -G fuse tonnomdutilisateur

Et voilà, tu devrais pouvoir accéder au FTP en passant par ton dossier local !


juil 26 2009

2 fonds d’écran Debian

Michael Zwyssig

Deux petits fonds d’écran pour les utilisateurs Debian.

somegrassdebian

J’ai eu l’idée en voyant un wallpaper un peu pareil mais avec des ronds. SomeGrass quelque chose.

debian_brown-grey

Là, j’avais un thème un peu beige/gris, et je ne trouvais pas de fond d’écran simple qui allait avec.

Clique pour agrandir.


juil 17 2009

Drupal : une vue dans un noeud

Michael Zwyssig

Il est intéressant d’inclure ses vues dans un noeud entre autres lorsque :

  • la vue est linkée dans le menu principal : Le « menu item » n’est pas traduisible.
  • vous désirez mettre du contenu différent en plus. On est obligé de passer par les options « en-tête » ou « pied de page » dans les paramètres de la vue, et c’est la misère pour le traduire.

Grâce à cette solutions élégante et conviviale, il suffit de créer un noeud (une page par exemple), de mettre le contenu qu’on veut puis un tag pour que la vue s’affiche, telle une simple fonction « include ».

Nous allons utiliser le module « Insert View » disponible sur le site officiel. Téléchargez et installez-le.

Ensuite, allez configurer les formats d’entrée (Configuration – input formats). Dans les options de chacun d’eux, activez « Insert view ». Maintenant, lorsque vous créerez contenu, il suffit d’entrer les tags suivants pour afficher ce que vous voulez  :

[view:nom_de_la_vue] est remplacé par la vue
[view:nom_de_la_vue=nom_du_display] est remplacé par le display spécifique de la vue

Plus d’options sont disponibles dans le README.TXT du module.


mai 7 2009

La messagerie Facebook sans ouvrir votre navigateur web, avec Pidgin

Michael Zwyssig

On connaît tous Pidgin, le fameux pigeon mal écrit (au niveau orthographique). Toutefois, pour ceux qui ne le connaissent pas, c’est un client (donc un logiciel à installer sur, en l’occurence, son propre ordinateur qui va se connecter à un serveur) de messagerie instantanée (donc comme msn berk, mais en mieux) multi-protocole (qui supporte pas seulement msn, mais aussi jabber, yahoo, irc, etc.) et multi-plateforme (fonctionne aussi bien sous GNU/Linux que sous windows).

Dernièrement, je tombe sur un article agrégé sur Planet-libre. La personne a installé le client de messagerie de Facebook sur Pidgin ! Wah. J’étais étonné d’abord, mais finalement, vu que la messagerie Facebook fonctionne sur du XMPP, ça ne me surprenait même plus. N’est pas (encore) XMPP. Voir commentaires.

Je lance donc la commande qui installe le plugin pour pidgin, sous Ubuntu (j’ai la version 9.04) :

$ sudo aptitude install pidgin-facebookchat

Il a suffit de relancer Pidgin et de créer un nouveau compte (comptes, gérer les comptes, ajouter). Là, dans la liste des protocoles, on voit Facebook. Ça marche très bien. On voit le statut et la photo des gens, on peut changer son propre statut, etc.

Quand on ouvre une page facebook lorsqu’on communique avec une personne via Pidgin, la conversation s’affiche dans le navigateur en même temps que dans la fenêtre de conversation. Par contre, lorsqu’on répond via le site web, rien ne se passe au niveau de Pidgin. Mais bon, on peut pas tout avoir.


fév 27 2009

Effets d’ombre portée et d’empreinte avec Inkscape

Michael Zwyssig

Ces effets, surtout le premier, sont très facile à obtenir avec un peu de savoir-faire.

L’effet d’ombre se crée en duplicant l’objet et en le rendant flou. En arrière plan et en noir, l’effet est garanti.

L’effet d’empreinte quant à lui est un tantinet plus complexe. L’ombre est à l’intérieur et pas à l’extérieur, on va donc devoir rajouter un objet qui « coupe » le contour de l’ombre. Tout cela est expliqué dans la suite.

Lire la suite