Hello amis geeks. Voici le billet récurrent qui se fait l’écho de la catégorie « Geekitudes » de ce blog. Comme cette dernière est à part, ce billet permet de retrouver les 5 derniers tutoriels HTML, CSS, WordPress, Flex, Silverlight, Photoshop etc. Vous pouvez les retrouver en accédant aux catégories « Geekitudes » dans la barre de navigation supérieure du blog.

Les 5 derniers tutoriels HTML & CSS :

1. HTML & CSS3 : Réflexion d’image en HTML et CSS,  où l’on apprend comment produire une réflexion d’image simplement grâce à CSS3 à partir d’une simple photo de base et plus encore.

Réflexion d'image en CSS

2. HTML5 & CSS3 : Créer une navigation de site simple et élégante avec HTML5 et CSS3, où l’on reproduite la sympathique navigation principale d’un web magazine avec plusieurs catégories ayant chacune une couleur spécifique comme le site Mashable.

Cliquer pour agrandir la navigation de Mashable

3. HTML & CSS : Créer un compteur de commentaires pour votre blog en HTML et CSS, où l’on apprend une technique de base pour mettre en valeur le nombre de commentaires associés à une billet de blog.

Cliquer pour agrandir

4. HTML5 & CSS3 : Créer un design d’article de blog avec une date flottante en HTML et CSS, où l’on crée un beau design de base d’un billet  pour un blog avec la date mise en valeur sur la droite.

Cliquer pour agrandir

5. HTML & CSS3 : Créer une galerie animée d’images en HTML et CSS3, où l’on crée une belle galerie avec des effets de survol, d’opacité à la sauce CSS3.

Le titre coulisse sur l'image au survol de la souris et l'image devient plus nette.

Editions précédentes :

• Tutoriels HTML, CSS & WordPress #1

Vous ne l’avez sûrement pas vu mais j’ai ajouté une catégorie à ma barre de navigation en haut, nommée « Geekitudes« . Dans cette catégorie, je publie régulièrement des petits tutoriels techniques de développement ou de techniques web. Ils sont volontairement très abordables par tout un chacun et ne nécessitent que très peu de pré-requis pour être compris.

Il ne faut pas oublier que je suis développeur à la base et j’aime bien décrire les bonnes pratiques du web dans de brefs tutoriels pas-à-pas en ligne. Aussi, j’ai hésité entre rouvrir un mini-blog pour poster ces petits billets visant à décrire des petits éléments de web. Et puis, je me suis rabattu sur une simple catégorie sur ce blog. En revanche, cela me posait un problème : la plupart des lecteurs du KooNDeLLiTcH le sont car ils apprécient les thèmes abordés jusqu’ici. Du coup, je n’ai pas envie de les effrayer (voire de les trahir) en publiant régulièrement des billets trop techniques qui feraient tâches au milieu des billets de design, de séries TV US et autre. Surtout que mon rythme de billets techniques risque d’être plus soutenu que les autres.

Bref, j’ai exclu la catégorie de la page d’accueil et du flux RSS. Du coup, elle est accessible via le menu de navigation sur le site. Si vous pensez que ces billets ne vous gêneraient pas s’ils étaient publiés au milieu des autres, alors dites-le-moi dans les commentaires et je les réintègre dans le flux normal. En attendant, j’ai trouvé un petit compromis pour ceux qui seraient tout de même intéressés par ces contenus geeks en plus du contenu habituel de ce blog : faire un billet récapitulatif des 5 dernières publications techniques dans les sous-catégories de « Geekitudes ». Et vous êtes en train de lire le premier de la série.

Au programme, les 5 premiers tutoriels publiés sont les suivants :

1. HTML & CSS : Faire précéder un texte par une image en HTML et CSS, tutoriel ultra-simple pour débuter. Technique de base à maîtriser avant d’aborder les autres.

2. WordPress : Exclure de la home et du flux RSS les billets d’une catégorie dans WordPress, la technique que j’ai utilisée pour justement exclure la catégorie « Geekitudes » de la home du blog et du flux RSS.

3. HTML & CSS : Ajouter une barre de sélection de langue en haut de votre site en HTML et CSS, ici on reproduit l’élégante barre de choix de langue du site Fubiz.

4. HTML & CSS : Créer une jauge verticale dynamique en HTML et CSS, on apprend à créer une jauge avec la technique des images tiles et les décalages CSS en arrière-plan.

5. HTML & CSS : Créer une barre sociale dynamique grâce à CSS3 et HTML, on aborde un peu de CSS3 avec les transitions qu’on va utiliser pour créer une barre avec des boutons pour lier notre page aux différents réseaux sociaux de notre choix.

Et bien d’autres à venir !

On va apprendre ensemble comment exclure des images spécifiques d’une galerie automatique WordPress. Pour illustrer ce petit tutoriel, je vais prendre pour exemple mon dernier article sur les Upfronts 2010-2011 : la grille de TheCW. Dans ce billet, j’ai une galerie de 7 images et une image (le logo TheCW vert au tout début de l’article, voir ci-contre). Le but de ce tutoriel est d’enlever ce logo TheCW vert de ma galerie d’article.

Les galeries d’images automatique dans WordPress

Exemple d'une galerie dans un article WordPress

WordPress a la possibilité d’ajouter une galerie d’article. C’est super pratique et je l’utilise très fréquemment. Ces galeries d’articles permettent en 3 clics d’insérer au sein d’un article ou d’une page une galerie des images associées à cet article ou à cette page. Tout est automatique.

Le problème est que c’est un peu trop automatique. Dès qu’on ajoute une image à un article, elle y est automatiquement associée. Du coup, dans mon exemple, si je me contente d’insérer ma galerie avec les propriétés par défaut, toutes les images associées à l’article y figureront. Dans mon exemple, le logo TheCW sera dans la galerie en plus des images de séries qui sont les seules images que je souhaite vraiment voir dans la galerie.

L’attribut « exclude » du shortcode WordPress « gallery »

En édition visuel, une galerie est représentée ainsi. En édition HTML, c'est le shortcode "gallery" qui est utilisé.

Concrètement, lorsqu’on ajoute une galerie dans un article, un shortcode « gallery » configurable est inclus dans la version HTML de l’article. La documentation concernant ce shortcode sur le codex WordPress indique qu’il supporte plusieurs attributs dont include et exclude, choses qui ne sont pas du tout configurables via l’interface de configuration d’une galerie.

Aussi, dans mon exemple, je vais utiliser l’attribut « exclude » pour enlever le logo de la liste des images. Un seul problème, ici : l’attribut exclude prend une suite de nombres séparés par une virgule où chaque nombre correspond à l’identifiant d’une image. Et cet identifiant… Impossible de le connaître simplement via la galerie ou même la partie Média de l’administration.

Trouver l’identifiant d’une image associée à mon article

Pour récupérer l’ID à mettre, il suffit de regarder le code d’inclusion HTML de l’image que je veux retirer. Je passe donc mon éditeur d’article en mode HTML (Onglet HTML en haut à droite du champ d’édition d’article) et je regarde le code pour mon image insérée via l’outil d’insertion d’image de WordPress tout au début de mon article :

<img class="alignleft size-full wp-image-1112" title="thecw"
src="https://alconis.com/wp/wp-content/uploads/2010/05/thecw.jpg" alt="" width="40" height="30" />

Et dans ce code, on a accès à l’ID dans le nom de class CSS généré : wp-image-1112. Mon ID d’image est donc 1112. Il ne me reste plus, toujours en mode d’édition HTML, à changer mon shortcode [ gallery ] en :

[ gallery link="file" columns="3" exclude="1112" ]

Et le tour est joué ! (Ne pas mettre les espaces après le [ et avant le ])

Espérons qu’une des prochaines versions de WP permettra de faire cela plus facilement via l’interface directement.

Hier soir, je suis allé voir le nouveau film événement « Avatar » de James Cameron. En un mot : grandiose. Mais je ne vais pas m’étendre sur le film ici. Vous vous ferez votre propre avis en allant le voir. En revanche, j’aimerais revenir sur le film en abordant l’esthétique des habitants de la planète Pandora, les Na’vis.

Ces êtres issus de l’imagination incroyable de James Cameron ont une tête mi-humaine, mi-féline. Ainsi, elle diffère d’une tête humaine par les proportions et la forme des yeux (plus grand et félins), du nez (plus large et bas) et des oreilles (en pointe elfique). De plus, la peau a une texture une couleur bleu-verte particulière agrémentée de points lumineux blancs.

A la lecture de cette liste, on se rend compte qu’on pourrait facilement créer son propre portrait Avatar à partir d’une de nos photos. C’est ce qu’à fait Peter Ammentorp et ce monsieur plein de talent à eu l’idée de se filmer. Regardez plutôt.

Edit: BenJ nous a refait la vidéo ci-dessous image par image sur son Picasa. En attendant, le tutoriel détaillé, allez-voir ICI.

Pas mal du tout, hein ? Le problème c’est que refaire ce qu’il a fait, c’est impossible à la vitesse où va la vidéo. Même en la suivant image par image, il n’y a pas tout. Aussi, j’ai décidé de me lancer dans la confection d’un tutoriel simple pour tout possesseur de Photoshop. Pour ce faire, je me suis entrainer. Voilà ce que ça donne avec des modèles exceptionnellement beaux : Leonardo Di Caprio, Megan Fox et… moi.

Avatar de Leonardo Di Caprio

Avatar de Megan Fox

Avatar d'Alconis

Je dois encore peaufiner la technique et il faudra ensuite que je trouve le temps de pondre le tutoriel écrit de toutes les étapes. En attendant, Photoshop mis à part, voici les outils dont vous avez besoin :

• La vidéo ci-dessus comme inspiration,
• Cette texture à utiliser pour le grain de peau,
• Cette photo et cette photo de Na’vis pour extraire les yeux (mâle et femelle).
• Une belle photo de vous comme base de travail.

A vous de jouer !

Voici un petit tutoriel qui va vous apprendre très simplement à ré encoder une vidéo pour y incruster les sous-titres correspondant. Cette technique vous permettra de regarder une vidéo (admettons un épisode de votre série préférée) avec les sous-titres même si votre lecteur multimédia ne gère pas ou mal les fichiers sous-titres SRT et/ou SSA.

Cette technique est très simple surtout grâce au logiciel que nous allons utiliser : PocketDivxEncoder. Il est gratuit, tout petit et ultra simple d’utilisation. Il convient à la plupart des cas d’utilisations d’un utilisateur lambda. Pour le tutoriel pas à pas qui suit, je vais prendre l’exemple suivant :

• J’ai deux fichiers distincts : le premier est celui de la vidéo (episode.101.avi) et le second le fichier sous-titres français (soustitres.101.fr.srt).
• J’ai mon lecteur multimédia portable Archos qui ne lit pas les sous-titres à la volée. En renommant exactement le fichier SRT comme le fichier AVI et en mettant les 2 dans le mêmes répertoires, les répliques de sous-titrages ne s’affichent pas.
• Je veux ré encoder mon épisode pour incruster les sous-titres dans la vidéo afin de n’avoir plus qu’un fichier final (episode.101.vostfr.avi) que je pourrai regarder tranquillement dans le train en comprenant tout 🙂

Tutoriel express en 3 clics

Pour ceux qui ne veulent pas s’embarrasser des détails de débutants et souhaitent juste comprendre rapidement ce qu’il faut faire, téléchargez [download id= »7″] et suivez ce tutoriel express en 3 clics :

Simple, rapide, efficace. Point. Pour les détails et quelques petites astuces d’optimisations, parcourez la seconde version plus détaillée du tutoriel.

Lire la suite…

Ces derniers temps, vous vous êtes sûrement demandés ce que venaient faire ces oiseaux rigolos sur ce blog. Mais si, les petites BDs mettant en scène les adorables créatures du court-métrage de Pixar For The Birds. Ces petites bêtes-là étaient en fait des essais personnels pour un projet de plus grande envergure : créer un site internet où tout un chacun pourrait publier ses propre mini-BDs et les faire connaitre.

Je faisais donc des recherches sur Photoshop pour trouver les dimensions, les couleurs et surtout créer chaque image d’oiseaux qui allait se retrouver dans la banque de Birds (prononcé à l’anglaise « beurre-dzzz »). Ensuite, il m’a fallu créer l’éditeur qui allait permettre à n’importe qui de créer sa BD. Et quand je dis n’importe qui, je pensais même à ma grand-mère. Cet éditeur devait donc être le plus simple du monde. Je me suis donc doucement attelé à cette tâche. Ce qui a donné, peu de temps après la parution de mes essais sur mon blog, mon facebook, mon Twitter et sur le forum Sub-way.fr, une première version de l' »éditeur de Birds ». Mon entourage et surtout les membres du forum ont pu s’en donner à cœur joie pendant que je développais le site en lui-même. Ainsi, alors que les bugs m’étaient doucement remontés par ces béta-testeurs, ce sont pas moins de 712 Birds-Dessinés qui ont été produites avec l’éditeur ! Preuve que ça marche.

Le concept et l’éditeur marchent, donc. Bien. Reste le site ! Je vous annonce donc aujourd’hui la sortie en version béta du site http://www.birdsdessines.fr . Que veut dire version beta ? C’est une version publique ouverte aux testeurs dont les fonctionnalités sont à peu près celles de la version finale. Ainsi, les utilisateurs ont la primeur du site… mais aussi des bugs restants.

Pour l’occasion, vous avez la possibilité sur le site de :

• Voir, commenter et noter les Birds-Dessinés publiés.
• Créer vos propres Birds-Dessinés à l’aide de l’éditeur en ligne ultra simple d’utilisation (Deuxième onglet sur le menu du site).
• Télécharger l’image générée pour l’envoyer par courriel à vos amis ou si vous ne voulez pas publier sur le site.
• Créer votre compte pour pouvoir publier vos Birds-Dessinés. (Eh oui, c’est obligatoire !)
• Publier votre Birds-Dessinés en l’accompagnant d’un titre, d’une description, d’une catégorie et d’étiquettes (tags).
• Vous abonner au flux RSS et suivre le Twitter.
• Commencer à en parler autour de vous.

Cliquer pour agrandir

Pour ceux qui veulent des détails techniques, ça viendra plus tard sur ce blog. Mais sachez d’abord que l’éditeur est fait en FLEX, le site sous WordPress, la communication entre les 2 via l’API RPC de WordPress un peu modifiée et le tout hébergé chez OVH. Bref, à bientôt pour une ouverture officielle publique.

Mise à jour le 15 Mai 2008 : ajout de la vidéo du tutoriel pour la nouvelle marche à suivre.
Première mise en ligne : 6 octobre 2006

Ceux qui sont proches du milieu du sous-titrage sauvage de séries américaines, savent que ce processus est, dans le meilleur des cas, amorcé par la récupération du fichier sous-titres en version originale, ne laissant plus qu’aux équipes de sous-titrage qu’à traduire et relire dans leur langue maternelle.

Au jeu de la génération des sous-titres VO, les chinois sont les plus rapides. En effet, les sites, YDY.com et 1000fr.com parviennent à sortir le fichier sous-titres en version originale dès le lendemain de la diffusion aux Etats-Unis. Ce tutoriel va vous apprendre en quelques clics comment récupérer vos sous-titres VO à partir du site de référencement chinois shooter.cn, centralisant les productions des divers sites sus cités.

Lisez la suite pour suivre le tutoriel.

Lire la suite…

Attention. Cet article est destiné aux initiés et aux curieux. Il a pour but d’expliquer les tenants et les aboutissants de la mise en œuvre de la qualité dans le sous-titrage « sauvage » dit fansubbing. J’y détaille les motivations, apporte les explications techniques, montre ce qu’il faut faire pour réaliser des sous-titres de qualité et la mise en œuvre de cette qualité et son contrôle. Je démontre que notre première motivation est de respecter l’œuvre originelle et non de nuire à quelques grands médias.

Comme c’est certainement l’article le plus long de mon blog, je vous propose un petite table des matières pour aller directement à ce que vous cherchez.

1. La petite histoire du fansubbing
   1. Le précurseur Forom.com
   2. Sub-Way et la qualité naissent.
   3. La course aux sous-titres
   4. Première certification qualité et avènement du sous-titrage libéré.
2. La formalisation des normes de sous-titrage
   1. La VOST pour le respect de l’œuvre originelle et du spectateur
   2. 40 caractères maximum par ligne sur 2 lignes minimum
   3. Pas plus de 25 CPS par réplique
   4. Temps minimum entre 2 répliques
   5. Durée minimum d’une réplique.
   6. Respect des changements de plan avec priorité au CPS.
   7. Des 25 CPS aux TOO FAST de VSS
   8. De la traduction à l’adaptation
3. Formalisation officielle de Sub-Way.fr et outils de certification
4. Conclusion

Lire la suite…

Ça y est ! Vous avez enfin récupéré le dernier épisode de votre série préférée par un biais tout à fait légal. Votre fichier sous-titres est prêt, renommé convenablement et dans le même dossier que votre fichier vidéo. Votre copine vous a rejoint dans le canapé. Vous lancez l’épisode. Et là… C’est le drame. Les sous-titres sont décalés par rapport à la vidéo. Raaaaah ! Votre premier réflexe est d’injurier à voix haute ces maudits sous-titreurs. Puis, après vous être cogner le pied dans votre table basse, vous vous portez jusqu’à votre PC et tapez dans Google « Sous-titres décalés » et vous tombez ici. Pas de panique ! On va réparer tout ça. Lisez donc la suite.

Lire la suite…

Je vous ai concocté un petit schéma qui explique le plus simplement du monde la vie d’un épisode de votre série américaine préférée à partir de sa diffusion sur la télévision numérique outre-atlantique jusqu’à la lecture sur votre ordinateur avec les sous-titres français. Une présentation Powerpoint de mon cru viendra bientôt donner un peu plus de détails.