Lorsqu’on développe son site web avec les toutes dernières technologies comme l’HTML5 et CSS3, il est normal de ne pas tout savoir. En effet, les standards ne sont pas finalisés, les navigateurs internet n’ont pas encore tout implémenté. Du coup, on expérimente, on teste, on s’inspire d’autres sites, de best practices pêchées ça et là, on tâtonne. Mais, il est toujours très utile d’avoir sous la main les fondamentaux sous forme de mémos ou encore Cheat Sheets. (Anti-sêches mais j’ai préféré traduire en « mémo » en français).

Cliquer pour télécharger l'archive complète !

Aussi, je me suis baladé sur le net pour recenser, filtrer et élire les 6 mémos HTML5 & CSS3 les plus complets et utiles à avoir sous la main. Sous format PDF, ils seront vos premiers alliés une fois imprimés et fixés au mur.

• Télécharger l’archive avec les 6 cheat sheets HTML5 & CSS3 :

[download id= »10″]

Contenu de l’archive :

• HTML5 Cheat Sheet de Woorkup (PDF): élégante et assez complète. Version claire pour l’impression.
• CSS3 Cheat Sheet de GoSquared (PDF): élégante et assez complète.
• HTML5 Cheat Sheet de Smashing Magazine (PDF): moche mais complète
• CSS3 Cheat Sheet de Smashing Magazine (PDF): moche mais complète
• HTML5 Canvas Cheat Sheet de Nihilogic (PNG): le canvas étant complètement nouveau, cette cheat sheet complémente bien une autre plus généraliste sur l’HTML5. La version PDF existe en 2 pages sur le site. Dans l’archive, j’ai préféré la version PNG qui tient sur une seule page.
• CSS3 Webkit Cheat Sheet de Sencha : orientée Webkit mais très pratique en allant à l’essentiel.

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…

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…

Ç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…

En quelques mois, Deezer est devenu le site référence d’écoute de musique en ligne légal. De nombreux partenariats et accords ont été signés avec des maisons de disques et des organismes légaux afin de permettre à tout un chacun de pouvoir écouter toute la musique qu’il aime en streaming. Cependant, l’accès aux chansons et albums de certains artistes ont été restreints, en attendant l’accord des maisons de disques idoines.

Ce blocage se manifeste sur l’interface de Deezer par le « grisement » de la ligne dans une recherche et l’incapacité d’interagir avec la chanson (lecture, album etc.) comme le montre la capture ci-dessous.

Il existe une contournement extrêmement simple pour écouter tout de même votre chanson. Ici, je meurs d’envie d’écouter « Englishman in New York » de Sting. Mais la ligne est bloquée. Comment faire ? Tout simplement, en faisant un clic droit avec la souris sur la ligne m’intéressant. Là, le menu traditionnel de Flash apparait. (Vu que Deezer est fait en Flex) Mais dans ce menu, tout en haut, on peut apercevoir la ligne « Play this track« . Eurêka !

Je clic. La ligne se dégrise, la chanson se lance et j’ai accès à toutes les fonctionnalités (Voir album, notation etc.). Je peux enfin l’ajouter à une playlist personnelle m’y donnant accès les prochaines fois sans avoir à faire la manipulation à nouveau. Facile, non ?

Je vois souvent les mêmes questions posées au sujet des noms de fichier épisode du genre « Je dois prendre laquelle ? EZTV ou VTV ? » mettant en exergue une incompréhension des éléments composants le nom d’un fichier épisode type. C’est pourquoi je vous ai fait ce petit guide, histoire de vous y retrouver rapidement.

L’ordre peut varier mais le plus souvent les fichiers apparaissent sous cette forme :

The.4400.S03E04.Gone.Part1.PROPER.DSR.XviD-SAiNTS.EZTV.avi

Pour savoir ce que chaque élément veut dire, lisez la suite !

Lire la suite…