KooNDeLLiTcH²

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 !