Il y a 4 sections dans le logiciel:

• Music Renamer: permet de renommer les fichiers en se basant sur les Tags de celui-ci
• TAG Editor: permet de modifier les TAG en masse (ou pas)
• Tag Processor: permet d'ajouter des tags à vos fichiers en se basant soit sur son nom (et/ou dossier) ou via une recherche dans une base de données online (qui ajoute la pochette en plus)
• List Maker: permet de faire un listing complet et précis de vos MP3 sous différents formats (.csv, .html, .m3u, .txt, .xml) avec prise en charge de vos propres modèles.

Voici quelques exemples concrets ...

Lancez Tag Scanner et faites glisser un dossier ou un groupe de MP3 dans la fenêtre du logiciel. A noter que si vous faites glisser un dossier, le contenu des sous dossiers sera lui aussi affiché.

Sélectionnez les titres que sur lesquels vous désirez intervenir (ctrl+clic ou ctrl+a pour tout). Voilà un peu dans quel ordre je procède :

Tag Processor

Cliquez sur le bouton "Obtenir les infos sur le Web" (1) et faites une recherche du nom de l'album dans la zone prévue a cette effet à droite (2) (sur Discogs ou Amazon). Une fois l’album trouvé, cliquez dessus. Vous pouvez aussi éventuellement cliquer sur la petite flèche pour vous assurer que c'est les bon titres et même en décocher si votre album n'est pas complet (3). Maintenant cliquez sur "Prévisualiser" en bas (4).

Assurez vous que les tags correspondent aux bons morceaux, il est possible que vous ayez à réorganiser manuellement l'ordre de votre liste. Les TAGS en mauve sont ceux qui vont être changés/mis à jour. Si celà vous convient, cliquez sur "Sauvegarder"

TAG editor

Facultatif, vous pouvez maintenant allez faire un petit tour dans l'onglet TAG editor pour changer quelques infos (le "genre" par exemple) Et même en virer certaines qui ne sont pas forcement utile (Editeur/ISRC).

Music Renamer

Vous allez maintenant pouvoir renommer vos chansons selon vos gouts. Personnellement pour les albums j'aime les renommer de la façon suivante: Artiste (Album) - Numéro de piste - Titre (Format: %artist% (%album%) - %track% - %title%). Cela permet de toujours garder un ordre cohérent même si vous mettez tous vos albums dans un même dossier (sans sous-dossiers), ce qui peut s’avérer pratique pour certains lecteurs MP3.

Donc entrez le format désiré (1) (vous avez un aperçu rapide juste en dessous (2)) et cliquez sur "Prévisualiser" (3)

Si celà vous convient, cliquez sur "Renommer".

Et voilà, ensuite vous pouvez vous amuser à faire des listes si vous en avez l'utilité.

• Site internet : http://xdlab.ru/en/
• Version testée : 5.1.598
• Téléchargement : Dernière version - Mirroir (v5.1.598)

iTypo est donc un thème WordPress simple et léger. A la base, je cherchais un thème pour un petit projet personnel qui soit assez épuré et léger pour mettre le contenu du blog en avant. Après de nombreuses recherches dans la jungle des thèmes WordPress, rien ne me convenait, et comme j'avais une idée très précise de ce que je voulais, j'ai fini par le faire moi-même ... l'histoire classique de la naissance d'un thème en somme

Il est évidement "Widgets ready", compatible WordPress 3.0+, disponible en 4 coloris et 6 langues, convient parfaitement pour un blog perso ou un mini blog "à la Tumblr" et est absolument gratuit.

Telecharger le thème gratuitement

iTypo est sous license GPL, vous pouvez l'utiliser gratuitement pour vos projets sans restrictions

• Live demo
• Large preview (.png, 310 Kb)
• Guide d'installation et documentation
• Telecharger le .zip, v1.0.2 (zip, 353 kb)

Features

• Widget ready (footer et sidebar)
• Disponible par défaut en 6 langues (et plus si nécessaire)
• 4 coloris différents
• Facile à personnaliser avec sa page d'options
• Choix de miniatures carré ou large sur la page d'accueil
• Choix d'afficher un extrait ou le post complet sur la home
• WordPress Post Thumbnail activé
• Shortcode pour miniature
• JQuery Colorbox Lightbox (désactivable via la page d'options)
• "Sticky post" skinné
• Commentaires en "thread" (discussion)
• Mise en avant de l'auteur
• Logo personnalisable (upload d'image)
• Compatible Feedburner
• WP-pagenavi ready
• Et encore plein de petites choses ...

Captures

(Commentaires)

(Avec miniatures larges)

(Accueil avec les billets complets)

(Page d'options)

(Page d'upload de logo)

A noter que même si il fonctionne sous IE6 et supérieur, certains effets CSS3 ne seront pas pris en charge (typographie personnalisée, ombres, inclinaisons, ...)

Voilà, en espérant qu'il plaira à certains d'entre vous ! Comme je le distribue gratuitement, il serait fairplay de laisser les crédits du footer

Que-est ce que des "Sprites CSS"

Rien de bien sorcier en fait. Il s'agit d'une technique qui consiste à regrouper toutes (ou une partie) de vos images utilisées dans vos CSS en une seule et de la positionner ensuite via des coordonnées X et Y. Les parties de votre site ayant besoin d'afficher une des images agiront en fait comme une fenêtre donnant sur votre sprite !

Voici une illustration :

Le bloc H1 laisse apparaitre une des images se trouvant sur le sprite, les autres n'étant pas visibles puisque "hors bloc". Pour vous, la seule chose qui change c'est qu'au lieu de mettre :

Vous aurez quelque chose du style:

Voici un exemple de sprite venant de youtube:

Pourquoi utiliser les sprites CSS ?

Le fait de remplacer une dizaine (ou plus) d'images par une seule va permettre de soulager votre serveur qui ne devrait plus se taper des dizaines de requêtes HTTP à chaque page affichée. Cela se traduit donc par une charge moins élevée (et donc de la puissance disponible pour d'autres taches) et un affichage plus rapide. De plus, si vous utilisez des liens avec des images au survol (:hover), il n'y a plus de temps de latence pour l'utilisateur puisque toutes les images sont chargées d'un coup.

Pour ce qui est du poids, là rien de spécial, en général le sprite fait sensiblement le même poids que l'ensemble des images le composant, même si la superficie est plus importante. De plus, vous pourrez optimiser (voir smush.it) votre sprite en une seule fois, plutôt pratique.

Trop beau pour être vrai ?

Les sprites sont à manipuler avec précautions. Le positionnement de vos images doit être bien réfléchi pour ne pas se retrouver avec des problèmes de conceptions (plusieurs images visibles dans un élément, ....). Un des autres inconvenant c'est que pour faire une simple modification de l'une de vos images, il faut re-générer le sprite en entier.

Et enfin, les sprites ont leurs limites, notamment dans le cas d'images répétées (repeat, repeat-x, repeat-y) ou d'alignement différent (background-position: top right; background-position: bottom left;). Nous verrons ces cas particuliers un peu plus loin.

Je suis convaincu, je veux faire mon 1er sprite CSS !

Selon la complexité de votre design, il va être plus ou moins facile de faire votre sprite. Dans le cas où vos images ne sont pas répétées et s'alignent toutes du même coté (droite ou gauche), la méthode est assez simple puisqu'il suffit "d'empiler" vos images en laissant une marge entre chaque, comme ceci:

Pensez a laisser le fond transparent (ou blanc si votre design le permet) et d'enregistrer le tout en gif ou png avec transparence.

Ensuite, il faut placer votre sprite de la manière suivante:

Donc ici on a décalé notre sprite de 320 pixels vers le haut. Cette valeur correspond tout simplement à la distance entre le haut du sprite et le haut de l'icône "Forum". Pour l'icône "Facebook" qui se trouve à 95 pixels du bord, on écrira:

Cela n'a donc rien de bien sorcier

Et si vous ne voulez pas sortir votre photoshop, il existe des générateurs de sprites permettant de créer une image unique depuis un zip contenant toutes vos images. Personnellement je recommande celui-ci: spritegen
Il est assez complet et en français. Il vous suffit dons d'uploader votre zip contenant vos images et l'application vous retournera le sprite ainsi que les positions CSS à appliquer !

Pensez bien à laisser une marge suffisante pour que 2 images ne soient pas visibles dans vos éléments (ça arrive lorsque vous utilisez un padding trop important par exemple)

Parfait, mais mon design utilise des images alignées de manières différentes

Si vous utilisez des images qui doivent s'aligner à droite et d'autres à gauche ou parfois en bas, la conception de votre sprite va demander une petite adaptation ! Attention, je parle ici d'images de background ayant un conteneur beaucoup plus grand qu'elles, comme la cas d'un titre Hx (largeur souvent importante), du body (hauteur importante), etc ...

Voici un exemple :

(On ne se moque pas de mes images hein ! -_-)

Donc les images qui doivent s'aligner à gauche sont placées à gauche (en fait, ce n'est pas obligatoire, mais c'est plus simple) et les images alignées à droite sont placées sur le bord droit. Pour les images devant s'aligner sur le bas, là il serait préférable de faire une sprite à part pour les regrouper de façon horizontale.

Tout ce bidouillage à cause du manque d'offset pour les alignements droite et bas. Car autant il est possible de placer une image précisément tout en la "fixant" à gauche ou en haut, autant dès qu'on la fixe à droite ou en bas il est impossible de préciser la valeur en pixels. L'autre chose ennuyante avec les alignements à droite, c'est IE6 ! Oui encore lui ! Il semblerait que le fait d'utiliser une valeur en toutes lettres et une valeur en pixels dans le positionnement créer des bugs d'affichage, par exemple un background-position: right -100px; risque de ne pas donner le résultat escompté.

Les images répétées

Les images utilisant la propriété background-repeat: repeat; ne peuvent pas être incluse dans une sprite, tout simplement parce qu'elles ont besoin d'être répétées à la fois sur la verticale et sur l'horizontale

Pour les autres, il suffit de regrouper les images qui doivent se répéter sur l'axe Y dans une sprite horizontale et les images qui doivent se répéter sur l'axe X dans une sprite verticale.

Un détails qui a son importance, comme en général vos images de répétition servent à remplir parfaitement une zone de votre design (sans espaces/marges donc), il faut penser à bien remplir toute la surface (en hauteur dans le cas d'un repeat-y et en largeur dans la cas d'un repeat-x). Voici un exemple (va falloir zoomer pour bien vous rendre compte). Donc sur cette sprite, les images prennent toute la hauteur (2 pixels dans ce cas) sans laisser de vide pour pouvoir être répétées verticalement.

Conclusions

Les sprites CSS permettent d'améliorer les performances de votre site de façon significative. Par contre selon la configuration de votre design il pourra être plus ou moins laborieux de construire vos sprites.

• Smush.it (optimisation d'images) : http://developer.yahoo.com/yslow/smushit/
• Spritegen (générateur de sprites) : http://fr.spritegen.website-performance.org/

NB: pour les amateurs de thèmes WordPress, je vous invite a jeter un oeil au thème "Kubrick On Crack" de la liste WordPress

Et n'oubliez pas que je partage quelques-uns de ces liens en temps réel sur mon twitter, et que pour voir a veille "mobile", il faut vous rendre sur Mobiliens

PHP

1. nedmartin - Site Guide - Caching Rappel sur les techniques de mises en cache disponible via PHP
2. TimThumb PHP Script Released Script php pour la création de miniatures d'images à la volée (avec système de cache)
3. Image Resizer Redimensionneur d'images à la volée
4. Online PHP Editor - PHPanywhere.net Editeur de code online pour coder depuis n'importe quel ordinateur
5. UserCake - Opensource PHP user management system Script PHP Opensource pour gérer un espace membre

Photoshop

1. 79 tutoriales para crear plantillas en PSD 79 tutoriels pour creer des designs web
2. Create a Clean and Colorful Web Layout in Photoshop Créer un web design sobre et coloré avec photoshop
3. 70 Of The Best Photoshop Actions For Enhancing Photos 70 "actions" photoshop pour embellir vos photos
4. Design a Minimal and Modern Portfolio Layout with Photoshop Faire un design minimaliste et moderne de portfolio avec Photoshop
5. Design a colorful theme for wordpress Fabriquer un thèmes worpdress coloré avec photoshop
6. 75 PSD to HTML Resources for Web Designers 75 .psd pour webdesigner
7. 40 Amazing Photoshop Brush Directories and Collections 40 sites/collections de brosses pour photoshop

Typographie

1. 50 Examples of Effective Uses of Typography Within Web Design 50 exemples de bonnes utilisations de la typographie en webDesign
2. 50+ Exceptional Collections of Typography Tutorials 50 tutoriels sur la typographie
3. 90 Exciting Typography Posters and Designs 90 designs typographiques intéressant
4. 40 Beautiful uses of Typography in Web Design 40 jolies utilisations de typographies dans des design web
5. 25+ Experimental Typography Showcases 25 designs typographiques expérimentaux
6. 40 Spectacular Typography Videos 40 vidéos typographiques spectaculaires
7. 104 Free Fonts for Web Designers and Logo Artists 104 polices gratuites pour web design et logos

Javascript/jQuery

1. Build a Simple Password Strength Checker Fabriquer un vérificateur de sécurité de mot de passe
2. jQuery-gestures- Image gallery Gestion de mouvements via jQuery
3. Pluralink© Script permettant d'inclure plusieurs liens en 1 via un menu au survol
4. Validatious 2.0 - Easy form validation with unobtrusive JavaScript Validation de formulaire en javascript, valide, fonctionnant avec ou sans framework js
5. 15 jQuery slideshow/gallery plugins 15 plugins jQuery pour faire des diaporamas (slideshow)
6. 10 Awesome Techniques and Examples of Animation with jQuery 10 incroyables techniques et exemples d'animations avec jQuery
7. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery Faire un diaporama dans le style Apple
8. Mu — Mu Connect Librairie javascript pour vous aidez à intégrer FaceBook Connect sur vos sites
9. Simple Draggable Element Persistence with jQuery Rendre un élément "draggable" avec mémorisation via jQuery
10. 30 Amazing jQuery Plugins To Play With Tables 30 plugins jQuery pour jouer avec vos tableaux html
11. How To Parse XML Using jQuery and Ajax Comment parser du XML en AJAX via jQuery
12. Plugins And Tutorials To Enhance The Images Of Your Website With jQuery Plugins et astuces pour améliorer vos images web grâce à jQuery
13. Floom Diaporama original avec Mootools
14. 9 Useful Twitter Retweet Button Scripts For Blogs 9 scripts de boutons "retweet" pour votre blog
15. Making a Google Wave History Slider Reproduire le slider d'historique de Google Wave via jQuery, CSS, PHP et mysql

Inspiration et (web)design

1. 28 Delightful Blog Designs That Will Make You Say WOW 28 designs de blog incroyables
2. Blog Headers: 20 Great Examples and Best Practices 20 exemples et bonnes pratiques de "header"
3. 40 Killer Minimalist Blog Designs 40 designs de blog minimalistes
4. Modern CSS Layouts: The Essential Characteristics Les caractéristiques d'un design CSS modern
5. Super-Clean and Minimal Web Designs: 70+ Stunning Examples and Resources Exemples et ressources de webdesign minimalistes et propres
6. Best of Best WordPress Cusom Login Page Designs Sélection des meilleurs pages de login WordPress
7. 111 CSS Gallery To Submit Your Design 111 galeries CSS pour soumettre vos designs web
8. 40 Adobe Illustrator Text Effect Tutorials 40 tutoriels pour faire des effets de textes avec Adobe Illustrator
9. 25+ Tools, Cheat Sheets and Inspiration for Designers working with Color Themes 25 outils/astuces/inspirations pour vous aider avec vos "schémas de couleurs"
10. 55 Astonishing Online Generators for Web Designers 55 générateurs web pour designers
11. Best Practices for 6 Common User Interface Elements Bonnes pratiques pour 6 éléments d'interface communs
12. 80 Stunning Background Patterns For Your Websites 80 motifs pour vos backgrounds de sites
13. How to create your best website layouts ever Article expliquant la manière de procéder pour créer une maquette de site web

CSS/CSS3

1. Quickie CSS3 Tricks with Fallbacks Quelques effets CSS3 avec leurs "fallbacks"
2. Universal Method of Block Decoration / CSS / SPLASHnology Très bonne méthode pour décorer vos blocs html (coins arrondis)
3. Minimal and Modern Layout: PSD to XHTML/CSS Conversion Comment convertir un web design .psd en HTLM/CSS
4. Investing in the Grid Petit rappel/survol sur les frameworks CSS à base de "grilles"
5. Essential CSS/HTML Lists Styling Techniques Les principales techniques pour styliser vos listes HTLM/CSS
6. Créez des info-bulles avec CSS 3
7. Table of CSS3 border-radius Compliance Tableau du support de la propriété CSS 3 border-radius
8. Fluid Grid System Framework CSS permettant de construire des design fluides (extensibles)
9. 25 CSS CHEAT CODES: Designers & Developers Delight 25 feuilles d'astuces (Cheat Sheet) pour CSS
10. 15 CSS Tricks That Must be Learned 15 astuces CSS à connaitre
11. How to Achieve Cross-Browser @font-face Support Rendre le support de la propriété CSS @font-face compatible avec les principaux navigateurs
12. The Blueprint CSS Framework – Tutorials, How-to Guides and Tools Collection de ressources pour le framework CSS Blueprint
13. Using Rounded Corners with CSS3 Utiliser les coins arrondis en CSS3
14. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them Petit rappel sur l'utilisation des sprites CSS
15. 15 Useful Firefox Add-Ons To Make CSS Developers Lives Easier 15 plugins Firefox pour faciliter le développement CSS

WordPress

1. Kubrick On Crack - Free WordPress Theme Thème wordpress gratuit très sympa et aéré qui se dit être un "Kubrick" (thème par défaut) amélioré
2. I Like This « WordPress Plugins Plugin WordPress pour ajouter un bouton de vote (positif seulement) à votre blog
3. YouAre Theme · Promote your real-life identity Nouveau thème WordPress pour promouvoir votre identité numérique
4. 101 Pro and Free WordPress Themes for Personal Blogs 101 thèmes wordpress gratuits pour votre blog perso
5. WordPress hack: Extend the body_class function Étendre la classe "body" de wordpress
6. WordPress Visual Cheat Sheet Jolie feuille d'astuces (Cheat Sheet) pour WordPress
7. Useful WordPress Plugins for Statistics Collection de plugins de statistiques pour votre blog WordPress
8. How to Improve your WordPress Theme with 9 Useful Plugins 9 plugins utiles pour améliorer un thème WordPress
9. Easier And Better Solutions To Get Pictures On Your Posts - only the first image, last image from the Gallery , first 2 pics, last 2 pictures, last two pictures, HTML Worpdress : Quelques solutions pour intégrer/recuperer vos images
10. 45+ great looking free WordPress Themes 45 thèmes WordPress pas trop vilains
11. Top 10 Free Halloween WordPress Themes 10 thèmes wordpress gratuit pour Halloween
12. 24 WordPress Image-Based Plugins 24 "plugins d'images" pour wordpress
13. 18 Alternative Ways To Use WordPress 18 utilisations alternatives de WordPress
14. 20 Premium WordPress Themes Released In October 2009 20 thèmes wordpress premium sorti en Octobre 2009
15. Top 30 Awesome WordPress Plugins That You Must Have In Building A New WordPress Blog Le top 30 des plugins Worpdress à installer lors d'une nouvelle installation
16. WordPress Hack: Anything Can Be Added Anywhere In The Post Content WordPress: Ajouté la fiche de l'auteur dans un article et insérez de la pub après l'intro
17. 9 Useful Minimalist WordPress Themes 9 thèmes wordpress minimalistes

Divers

1. HYPE Un framework pour coder facilement en Action Script 3 (AS3)
2. Coda: A Collection of 120+ Plugins, Clips, Snippets and Tuts For Designers and Developers Collection de ressources pour developper avec CODA
3. 21 Fresh & Stunning Drupal Themes 21 thèmes Drupal "frais"
4. 10 Free Server & Network Monitoring Tools that Kick Ass 10 outils gratuits pour monitorer votre serveur/reseau
5. 101 Ways to Promote a New Blog 101 façons de promouvoir un nouveau blog
6. Les auto-entrepreneurs parlent de leur expérience
7. Building your First ExpressionEngine Plugin Construire votre 1er plugin ExpressionEngine
8. 60+ Promotional Websites to Promote and Submit Your Design Related Articles and News 60 sites pour promouvoir et envoyer vos articles en relation avec le "design"
9. Solving a Sudoku using Recursive Subquery Factoring Résoudre une grille de sudoku via sql
10. Configuration d'un serveur dédié de A à Z Rappel: comment bien configurer votre dédié
11. HTML 5, le renouveau du Web standard Dossier sur l'HTML 5, en français
12. Best of High-Dynamic-Range - Fotos, Weblogs, Tutorials, Software, Books Collection de ressources pour la photographie HDR (inspiration, blogs, tutoriels, logiciels, ...)
13. 200+ Free Exclusive RSS Icons: “Supra” 200 icônes RSS ("Supra")
14. Six free antivirus programs made for your Windows 7 system 6 antivirus gratuits pour Windows 7

Inspiration et Design

1. Showcase Of Professional Looking Website Designs Sélection de sites au design professionnel (inspiration)
2. 62 Intelligent And Integrated Logos For Typography Lovers 62 intégrations intelligentes de typographies dans des logos
3. A Showcase of 35 Beautiful Typographical Illustrations 35 jolies illustrations typographiques
4. How to Create Remarkable 3D Text in Photoshop Comment créer un texte en 3D avec photoshop
5. 80+ Identity Logo Design With PSD Files 80 logos avec fichier .psd
6. 75 Creative And Unique Business Card Designs For Your Inspiration 75 cartes de visites creatives pour votre inspiration
7. Beautiful Gradient Typography in Web Design Exemples d'utilisation de polices dégradées en webDesign

WordPress

1. Theme: Cleanr Focuses on Typography and Space Thème worpdress simple et épuré
2. 20 Best WordPress Typography Plugins To Enhance Readability 20 plugins WordPress pour améliorer la lisibilité
3. 20 Pure Typography based WordPress Themes for FREE – Part 1 20 thèmes wordpress "typographique"
4. 10 Outstanding Corporate WordPress Themes for Freelancers and Small Business Owners 10 thèmes premium pour blogs d'entreprise
5. 10 Useful WordPress Coding Techniques 10 techniques utiles pour WordPress
6. 15 Most Important WordPress Plugins To Help You Fight Spam 10 plugins wordpress pour combattre le spam
7. 10 Most Useful Google Plugins for WordPress 10 plugins wordpress utilisant les services google
8. TAC - Theme Authenticity Checker WordPress Plugin Plugin wordpress pour vérifier si vos thèmes sont infectés

Typographie

1. Compte rendu : « La typographie pour le web »
2. Rich Typography On The Web: Techniques and Tools Techniques et outils pour améliorer vos typographies sur le web
3. 8 Javascript Plugin Effects and Tools to Beautify and Control Web Text 8 effets javascripts pour améliorer et contrôler vos textes web
4. Fonts on the web and a list of web safe fonts Tableau sur le compatibilité des fonts selon les navigateurs
5. Fonts for Designers Series Issue no. 1 Sélection de polices de caractère pour designers
6. 55 Unconventional And Original Free Fonts For An Unique Design 55 polices de caractère gratuites non conventionnelles et originales

Webdesign/CSS

1. #eCSStender.org Unification du support CSS via Javascript
2. Top reasons your CSS columns are messed up Pourquoi vos colonnes CSS ne régissant pas comme vous le désirez (solutions)
3. Ten Most Popular Firefox Plugins of Web Designers Les 10 plugins firefox pour web WebDesigners les plus populaires
4. Create a Clean Business Web Template Design in Photoshop Creez un webdesign d'entreprise simple et propre avec photoshop
5. 51 Web Apps for Web Designers and Developers – Web.AppStorm 51 applications online pour WebDesigneurs et développeurs
6. Custom Checkboxes, Custom Radio Buttons, Custom Select Lists Personnalisez vos Checkboxes, Radio Buttons et Select Lists via CSS et jQuery
7. Solution For Very Long Dropdown Menus Astuce en CSS et jQuery pour faire de long menu defilant
8. HTML, CSS, and Web Development Practices: Past, Present, and Future L'évolution des pratiques du développement web
9. Is Your CSS Reset Doing More Harm Than Good? Petit reset CSS bien expliqué
10. 15 Ways to Improve CSS Techniques Using jQuery 10 techniques jQuery pour faciliter vos CSS
11. Icones.pro, la plus grande collection d'images PNG et d'icônes Moteur de recherches d'icônes
12. The Mystery Of The CSS Float Property Découvrez tous les mystères de la propriété CSS "float"
13. 8 different ways to beautifully style your HTML lists with CSS 8 manières de présenter de jolies liste html

Javascript/jQuery

1. 10 Superb Image Effects and Slider Tutorials with Jquery 10 tutoriels jQuery pour faire des effets de gliddements
2. 25 Cutest jQuery Plugins 25 plugins jQuery pour des effets amusants
3. Introduction to building jQuery plugins Les bases pour développer un plugin jQuery
4. How to Create an Image Gallery Powered by Picasa Comment créer un galerie d'image à partir de Picasa
5. 35 Fresh and Useful jQuery Plugins 35 plugins jQuery récents et utiles
6. 35+ Web Developers Useful Ajax Tutorials 35 tutoriels utiles sur l'AJAX
7. 10+ astonishing jQuery resources to spice up your website 10 ressources jQuery pour booster votre site
8. Drag to Share Tutoriel pour ajouter un drag & drop à la Mashable sur votre site
9. 10+ jQuery Form Enhancement Plugins 10 plugins jQuery pour améliorer vos formulaires
10. 17 Amazing jQuery Rollovers – Examples and Tutorials 17 manières originales de faire des "survols" (rollovers) via jquery
11. Making A Cool Login System With PHP, MySQL & jQuery Tutoriel pour faire votre propre zone membre avec PHP, MySQL et jQuery
12. jQuery Approach by Scott Robbin Un plugin jQuery qui gère les animations en fonction de la position du pointeur de votre souris

Divers

1. jekyll Générateur de blog statique (via rsync et serveur local)
2. Fast Picture Viewer | WIC Codec Pack for Windows 7, Vista and XP Pack de "codec" Windows pour visualiser les fichiers RAW directement depuis l'explorateur
3. EZFlar: Opensource Code For Augmented Reality Productions Outils open source pour utiliser la réalité augmentée
4. File Management and Organization Tools and Ideas Sélection d'outils d'organisations
5. 20 Handy Photoshop Tips For a Faster Workflow 20 astuces pour travailler plus rapidement avec photoshop
6. 10 Best Content Management Systems for Designers Top 10 des CMS pour Designers
7. 9 Open Source Microblogging Applications 9 applications de micro-blogging open source
8. 5 Rules To Write More Readable CSS Files 5 règles pour rendre vos CSS plus lisibles
9. 5 Cool Ways to Add Graphs to Your Website 5 façons d'ajouter des graphiques sur votre site
10. Killer Xcode Tips and Tricks – Tips 1 to 10 10 astuces utile pour Xcode
11. Top 10 Tiny & Awesome Windows Utilities Top 10 des petits utilitaires pratique pour Windows
12. 70 Free Useful Portable Applications You Should Know 70 applications portables gratuites à connaitre

WordPress (4)

1. 31 WordPress Plugins That Turn Your Blog Into a CMS 31 plugins pour transformer votre blog wordpress en CMS
2. Creating Custom Write Panels in WordPress Créez vos propres champs additionnels avec wordpress (CMS style). A voir !
3. 45+ Free Premium WordPress Themes with Magazine or Grid Layouts 45 thèmes magasines/grilles wordpress gratuits
4. 6 WordPress Plugins for Better Comments 6 plugins WordPress pour améliorer la gestion de vos commentaires

Logo (5)

1. Logo Design Inspiration: 60+ Exceptional New Designs 60 logos au design exceptionnel
2. Logo Design: 40+ Must Have Tutorials 40 tutoriels pour faire des logos
3. 57 Creatively Designed Examples Of Typography In Logo Design 57 exemples créatifs de typographie utilisé dans des logos
4. Free 83 Professional Logos With PSD Files 83 logos "pro" avec leur .psd (photoshop)
5. Logo Design Toolbox: 60+ Resources for Logo Design 60 ressources pour vos Logos

jQuery (6)

1. Display JSON Data with jQuey and Ajax Petit exemple pratique de creation de JSON via PHP avec affichage via jQuery
2. 26 jQuery Plugins for Superb Navigation 26 plugins jQuery pour faire de superbes menus de navigation
3. AJAX User Poll Using jQuery and PHP Fabriquez vos propres sondages en PHP avec jQuery
4. Free Slideshow, Gallery And Lightboxes Scripts Collection de scripts de diaporama, lightbox et galeries
5. Building a jQuery/PHP Powered Chat Room Créez votre propre salle de Chat via jQuery/PHP
6. A jQuery Twitter Ticker – Tutorialzine Comment se fabriquer son propre widget Twitter via jQuery

Inspiration et Design (5)

1. 40 Beautifully Designed Vintage Websites 40 webdesigns vintages
2. 18 Really Beautiful and Creative Web Designs 18 webdesigns créatifs
3. 30 Impressive vCard Web Designs 30 vCard (Carte de visite online) au design impressionnant
4. 70 Beautiful Handpicked CSS Galleries 70 galeries CSS pour votre inspiration ou soumettre votre site
5. Comment Form Styling: Examples and Best Practices Exemples et bonnes pratiques pour styler vos formulaires
6. Tips for Designing an Awesome Coming Soon Page Conseils et inspiration pour réussir une page de lancement
7. 40+ simple and elegant business card designs 40 exemples de design élégant de cartes de visite
8. 90+ Latest Trends of Business Cards 90 dernières tendances de cartes de visite

CSS (13)

1. Browser support for CSS3 and HTML5 Récapitulatif des propriétés CSS3/HTML5 supportées par les différents navigateurs
2. CSScaffold Fraework CSS configurable via PHP (optimisation à la volée)
3. How to: CSS Large Background Petit rappel sur les bonnes pratiques pour utiliser un large background en CSS
4. Juicer - a CSS and JavaScript packaging tool / Ruby Outils pour packager vos CSS et Javascript en ligne
5. 20+ Awesome Resources To Learn and Improve CSS 20 ressources classées par difficulté pour apprendre le CSS
6. Breadcrumbs en CSS Tutoriel pour faire un menu de navigation de type "Breadcrumbs"
7. 53 CSS-Techniques You Couldn’t Live Without 53 techniques CSS intéressantes
8. CSS Differences in Internet Explorer 6, 7 and 8 Les différences d'interprétation CSS entre IE6, 7 et 8
9. Really simple CSS trick for equal height columns Astuce CSS pour avoir des colonnes de hauteurs égales
10. CssDispatcher - Manage your CSS like a pro Script PHP pour gérer (surcharger, mixer, compresser, ....) vos feuilles de style CSS
11. HOW TO: Elegant CSS Message Boxes for Blogs Des exemples de jolies boites d'informations en CSS
12. CSS Font-Size: em vs. px vs. pt vs. percent Explications sur les unités de mesures px pt % en CSS
13. xCSS - OO CSS Framework Framework CSS orienté objet

Webdesign (8)

1. How to Make a Creative Blog Layout Comment créer un design créatif de blog avec photoshop
2. 25 Free Online Tools for Web Designers, Developers, Freelancers and Individuals 25 outils en ligne gratuits pour les webDesigner et développeurs
3. 30 Stunning Fonts To Enhance Your Designs 30 polices de caractères pour améliorer vos designs
4. CU3ER – flash 3D image slider! Visionneuse d'image en flash avec effet de transitions en 3D (Papervision), magnifique
5. 1st Photoshop Web Design Professional Layout Tutorial Créez un webdesign professionnel avec photoshop
6. Quelques conseils pour designer une interface
7. sendcube email marketing: Get All Free: View Our Free Templates Quelques joli templates de newsletters gratuits
8. 101 Five-Minute Fixes to Incrementally Improve Your Web Site 101 astuces de 5 minutes pour améliorer votre site

Divers (6)

1. 27.000 photoshop gradients 27000 dégradés pour photoshop
2. Supercharge Website Performance With AWS S3 and CloudFront Comment mettre en place un CDN pour votre site avec AWS S3 et CloudFront
3. 5 Must Have Sans Serif Fonts 5 fonts "Sans Serif" incontournables
4. 8 Hand Drawn Icon Sets For Bloggers 8 packs d'icônes sociales avec un effet dessiné
5. Titres, intertitres, chapeaux : les niveaux de lecture Niveaux de lecture : 7 clés pour multiplier les points d’entrée d’un texte web
6. Best PHP Frameworks to build quickly complex web applications Sélection des meilleurs frameworks PHP

Dans mon cas je suis l'heureux propriétaire de 4 adresses gmail, 1 hotmail et d'une adresse webmaster@... pour chacun de mes domaines actifs. La hotmail fut ma 1ère adresse, celle que ma famille et amis ont, et que j'utilise pour msn (oui je sais msn saymal). Pour gmail, j'ai ma principale, 2 autres crée pour une occasion particulière mais qui continuent de me servir et une dernière vers laquelle je prévois de basculer dans un futur plus ou moins proche. Quand aux adresses mails de mes sites, c'est pour être joignable sans pour autant donner mon adresse principale, et puis ça fait plus sérieux (non ? )

Donc voilà le joyeux bordel ! Relever les mails de tous ce petit monde quotidiennement c'est pas de la tarte, du coup ce week-end je me suis penché sur les options que m'offrait gmail pour voir comment simplifier tout celà.

La première chose à faire est de décider quelle adresse gmail va vous servir de compte principale, à savoir qu'il vous sera possible ensuite de la faire rediriger vers le mail de votre choix évidement. Allez, c'est parti !

1. Mise en place des redirections

Redirection des adresses mails de vos domaines vers votre gmail principale

Ici il s'agit de créer une simple redirection de vos adresses de sites vers gmail. Pour celà il vous suffit d'utiliser le client mail fourni avec votre hébergement. Dans mon cas il s'agit de Qmailadmin, mais dans tous les cas la manipulation est souvent très simple ...

Redirection de vos autres comptes gmail vers votre gmail principale

La aussi c'est très simple. Connectez-vous sur les comptes à rediriger, allez dans les paramètres (en haut à droite), cliquez sur l'onglet "Transfert et pop/IMAP", sélectionnez "Transférer une copie des messages reçus à" et inscrivez votre gmail principal. Vous pouvez aussi choisir de garder une copie de chaque mail sur le compte d'origine, là c'est à vous de voir si c'est vraiment utile.

Redirection de hotmail vers votre gmail principale

Connectez vous sur votre boite hotmail, allez dans "autres options" (menu déroulant "options")

Cliquez sur "Transfert du courrier vers un autre compte de messagerie", cochez "Transférer votre courrier vers un autre compte de messagerie" et ajouter votre mail gmail. Attention, dans le cas de hotmail, il faudra tout de même vous connectez tous les 270 jours pour ne pas qu'on vous supprime votre compte !

2. Création des libellés (tags/étiquettes)

A ce niveau là, tous vos mails arrivent maintenant sur votre adresse principale, c'est déjà une bonne chose de faites, mais il va falloir mettre en place quelques règles si on veut pouvoir s'y retrouver un peu ! Pour celà on va utiliser les libellés et les filtres de gmail. Les libellés vous permettent d'assigner des sortes de tags à vos mails, un peu comme des catégories.

Tout d'abord, créez un libellé pour chacun de vos domaines, pour pouvoir classer facilement vos différents mails par la suite. Pour ajouter un libellé, dans la barre latérale de gmail choisissez "plus" et "Créer un libellé"

Ensuite faites en de même pour vos autres adresses gmail et hotmail.

Astuce: donnez des noms de libellé qui ont un sens, comme par exemple l'adresse mail ciblée ....

Bon vous avez donc autant de libellés que d'adresse mail redirigée, mais en l'état actuel des choses celà ne vous avances à rien, c'est là que les filtres entre en scène.

3. Création des filtres

Les filtres permettent d'identifier les mails selon plusieurs critères et de les ranger ensuite automatiquement dans des libellés. Ici le but étant d'identifier tous les mails provenant de vos autres adresses pour les étiqueter/ranger proprement.

Sur votre compte gmail principal, allez dans "Paramètres", puis l'onglet "filtres" et cliquez sur "Créer un filtre". Là vous avez à votre disposition plusieurs critères, mais nous allons nous servir principalement du champs "À :" qui va permettre d'identifier les destinataires de vos mails reçu.

Remplissez le champs "À :" avec l'une de vos adresses redirigées et faites "étape suivante"

Ensuite cochez "Appliquer le libellé" et sélectionnez le libellé correspondant dans le menu déroulant.

Sur l'exemple ci-dessus j'ai donc attribué le libellé "Webinventif" à tous les mails redirigés depuis l'adresse mail webmaster[atte]webinventif.fr. A noter que vous pouvez cocher la case "Appliquer également le filtre aux X conversations ci-dessous" si jamais vous aviez déjà une redirection.

Maintenant répétez cette opération pour chaque libellé/email redirigé.

4. C'est fini ? Pas tout à fait !

Là tout vous semble parfait, mais pourtant il manque quelque chose d'assez essentiel à mes yeux .... la possibilité de répondre aux mails avec le bon expéditeur ! Et oui car dans l'état actuel des choses, si vous répondez à un mail venant d'un de vos domaines, le destinataire verra votre adresse mail principale au lieu de celle du domaine, ce qui n'est pas forcement souhaité et qui peu en plus semer la confusion. Mais encore une fois gmail à prévue le coup en permettant l'ajout de différents expéditeurs !

Toujours dans les paramètres de votre compte gmail principal, allez sur l'onglet "Comptes et importation", dans la zone "Envoyer des e-mails en tant que :", cliquez sur "Envoyer un message à partir d'une autre adresse"

(En passant, cochez "Répondre avec l'adresse à laquelle le message a été envoyé")

Un pop-up s'ouvre, suivez les instructions :

1. Entrez le nom que vous voulez afficher à votre correspondant
2. Laissez tel quel
3. On valide pour recevoir le code de vérification
4. Une fois le mail reçu (sur votre boite principale du coup puisque les redirections sont en place), cliquez sur le liens fourni dedans pour finaliser la vérification

Répéter l'opération pour toutes les adresses mails, enfin uniquement celles dont vous pourriez vous servir pour répondre à un mail évidement.

Voilà, maintenant lorsque vous répondez à un mail venant d'une autre de vos boites, vous aurez le choix de l'expéditeur, et si vous avez cochez l'option "Répondre avec l'adresse à laquelle le message a été envoyé" comme indiqué un peu plus haut, la bonne adresse mail sera sélectionnée par défaut.

La fin, pour de vrai !

Bon d'accord c'était un petit peu long, mais au final il y a un réel gain de temps ! Et si google passe par ici, s'il vous plait, permettez nous de choisir plusieurs pseudo (en fait ça c'est déjà possible) et de leurs attribuer d'office une adresse mail @gmail.com (ça évitera la duplication des comptes inutilement).

Je vais essayer d'en faire une chaque semaine, histoire que de ne plus avoir un gros bloc d'un seul coup ! Si vous désirez découvrir ma veille de manière plus diluée, vous pouvez me suivre sur twitter

Et un petit hors sujet pour signaler que j'ai réparé mon formulaire de contact, je ne sais pas exactement depuis quand il était en panne, mais si vous avez tenté de me contacter ces derniers jours semaines, excusez mon silence et retentez votre chance !

1. CSS Tips and Tricks Collection Collection d'astuces CSS
2. Essential WordPress Plugin Development Resources, Tutorials and Guides Collection de ressources pour WordPress
3. 6 Advanced JavaScript Techniques You Should Know 6 techniques de javascript avancés à connaitre
4. Centered Vertical and Horizontal Align of elements in css Petit rappel sur les techniques de centrages en CSS (Horizontal/vertical)
5. 34 Fresh and Creative WordPress Blog Design 34 design de blog WordPress frais et créatifs
6. Introducing the Flexible Box Layout module - CSS3 . Info Initiation aux FlexBox en CSS3 (modèle de boites évolué)
7. 25 Cheat Sheets Web Developer Should Have 25 "Cheat Sheets" pour Développeur Web
8. Becoming a Font Embedding Master Un nouvel article traitant de la propriété CSS @font-face
9. Create a Free Email Newsletter Service using WordPress Créer simplement un service de newsletter en utilisant wordpress
10. HTML5 et l'avenir du web Superbe condensé de ce que HTML 5 nous réserve
11. Create a CSS3 Button That Degrades Nicely Créer un bouton tirant profit de CCS3 et retro-compatible
12. Preparing for HTML5 with Semantic Class Names Commencez doucement à vous habituer à HTML5 avec des noms de classes sémantiques
13. Top 10 Most Common Errors Made Using Photoshop Les 10 erreurs les plus communes en utilisant Photoshop
14. Themes and Plugins For Extreme WordPress Functionality Thèmes et plugins pour transformer complètement votre WordPress
15. Become A WordPress Theme Developer Who Rocks In Four Steps (and 50+ readings) Devenez un meilleur développeur Worpdress en 4 étapes (collection de liens)
16. 20 Mind Blowing Website Layout tutorials in Photoshop 20 tutoriels pour créer votre webdesign avec photoshop
17. 50 Great Examples of Data Visualization 50 exemples d'affichage graphique de données
18. 24 High Quality Free And Stunning Symbol Fonts 24 polices de symboles haute qualité
19. The Ultimate WordPress Developer Toolbox Trucs et astuces pour WordPress
20. Beautiful and Simple CSS Button Styling 8 façons de faire de jolis boutons en CSS
21. How to Code a Clean Portfolio Design (Plus Free Five-Page Template) Comment créer un design propre pour un portfolio
22. 28 Excellent Examples of Using Gradient Effects in Web Design- The Design Magazine 28 excellents exemples d'utilisation des dégradés en webdesign
23. 50 Surprisingly Amazing Themes for Blogger 50 thèmes surprenant pour Blogger (Google blogspot)
24. 40+ Quite Useful WordPress Plugins using jQuery 40 plugins pour WordPress utilisant jQuery
25. Create WordPress Page Templates with Custom Queries WordPress, créez une "template page" pour une requête perso (avec pagination)
26. 20 Remarkable WordPress Themes Releases for September 2009 20 nouveau thèmes Worpdress remarquables
27. 40 Excellent WordPress Themes For Photoblogs 40 thèmes wordpress pour photoblog
28. 77 Inspirational Example of Pricing Page Designs 77 designs de pages de vente
29. Free Farm-Fresh Web Icons by FatCow Web Hosting Pack de 1000 icônes web
30. 10 Life Saving WordPress Plugins Often Ignored By Bloggers 10 plugins wordpress qui peuvent vous sauver la vie
31. Excellent Tutorials to Utilize the Power of WordPress and Facebook Astuces pour intégrer FaceBook et WordPress
32. QueryLoader – preload your website in style Preloadez les pages/images de votre site (ou une partie) via un plugin jQuery
33. 16 WordPress Plugins Everyone Must Install 16 plugins wordpress incontouranbles
34. 10+ WordPress plugins for developers 10 plugins WordPress pour les développeurs
35. Create a Very Simple Portfolio Web Layout with Photoshop Créer un design de site portfolio avec photoshop
36. Useful scripts Facebook inspired for web developers – woorkup.com Collection de scripts inspiré de FaceBook
37. 50 Spectacular Type and Text Artworks 50 créations typographiques exceptionnelles
38. 30 Professional Free Fonts for Excellent Typography 30 fonts professionnelles gratuites
39. @font-face in Depth Tout savoir sur la propriété CSS @font-face
40. 25 Best Collection of jQuery Menu Design Tutorials 25 menus design via jQuery
41. 50 Useful Tools and Generators for Easy CSS Development Liste de 50 outils et générateur pour vous aider à faire vos CSS
42. 10 Essential WordPress Plugins For New WordPress Installation 10 plugins indispensable pour une nouvelle installation de WordPress
43. 16 Free “Premium Quality” WordPress Magazine Themes 10 thèmes magazine "Premium" et gratuit pour Worpdress
44. 23 Free WordPress Themes You Probably Haven’t Heard Of | TutsAZ.com - Tutorials from A to Z 23 Thèmes gratuit pour WordPress dont vous n'avez peut-ètre jamais entendu parlé !
45. 9 Top CSS Essential Skills That Every Web designer Should Learn Plein d'astuces CSS
46. 70+ Photo Manipulations Art That Will Blow You Away 70 photo manipulation qui décoiffent
47. jQuery Visual Cheat Sheet Cheat Sheet pour jQuery
48. 7 Fresh & Effective Shopping Themes for WordPress 7 thèmes pour votre boutique sous Worpdress
49. 45+ Inspiring Examples of Vintage in Web Design 45 sites au design vintage
50. Simple Techniques to Lock Down your Website Sécurité et PHP pour vos sites
51. 33 Creative and Beautiful Logos 33 logos créatifs
52. 650+ Ultimate Twitter Icons Collection For Web designers Besoin d'icônes pour twitter ? En voici plus de 650 !
53. 13 Great WordPress Plugins To Power Up Your Admin Area 13 plugins pour gonfler votre administration WordPress
54. 33 Examples of Beautiful Hand-Drawn Typography 33 exemples de belles typographies manuscrites
55. CSS3: To Infinity And Beyond! [CSS Tutorials] Petit retour sur les nouveautés "magiques" de CSS3 !
56. 300+ Resources to Help You Become a WordPress Expert Gigantesque pack de ressources pour WordPress (300+)
57. 100++ jQuery Tutorial and Plugin Collections on September Collection de 100 tutoriels et plugins jQuery
58. CSS Order Priority Tips and Tricks Rappel sur l'ordre de hiérarchie en CSS
59. 18 New Design Freebies 18 pack d'icônes récents
60. The Only SEO Tools You’ll Ever Need - Nettuts+ Tout un tas d'outils online pour vous aider dans votre SEO
61. 70+ Seriously Useful Handwritten Fonts and Inspirational Showcases ... 70 sources d'inspiration de typographie manuscrites
62. 27 Best WebSites to Download Free Seamless Patterns 27 sites pour télécharger des motifs gratuits
63. 10 Easy jQuery Tricks for Designers 10 astuces jQuery simple pour designers
64. 99 High-Quality Free (X)HTML/CSS Templates 99 templates (X)HTML/CSS de qualité et gratuit
65. Typographic illustrations in Photoshop: 10 awesome tutorials 10 incroyable tutoriels pour réaliser des illustrations typographiques
66. Definitive List of Free WordPress Theme Frameworks Liste des frameworks WordPress existants
67. 20 great free fonts for designers 20 fonts pour designers
68. Creating a Crypter Class with PHP
69. Alexa Keywords PHP Script
70. 38 jQuery And CSS Drop Down Multi Level Menu Solutions
71. WordPress shortcode: Display the loop
72. Glyphish – Great icons for great iPhone applications
73. 46 Outstanding Web Layouts From DeviantArt:September 2009 46 Outstanding Web Layouts From DeviantArt:September 2009
74. Réalisez un bandeau de news en jQuery, comme sur iTélé
75. miniGallery - An extremely lightweight gallery template
76. Monkeypr WordPress Theme Magnifique thème pour WordPress
77. Coder un thème WordPress : bonnes pratiques – technique, wordpress
78. 30 CSS Best Practices for Beginners - Nettuts+
79. 100+ Useful Bookmarklets For Better Productivity
80. Free ‘Social Media Bookmark Icon +’ pack, the ever growing icon set Pack d'icônes sociales en 3 tailles différentes
81. Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
82. How to Make a Light and Sleek Web Layout in Photoshop
83. Ajouter un annuaire sur votre blog WordPress
84. HTML 5 And CSS3 Cheat Sheets Collection
85. OpenUpload – Script clone de Rapidshare ou Megaupload
86. WinToFlash - Install Windows from usb - Home page WinToFlash pour monter une image Windows sur une clé USB en 3 clics.
87. jQTouch — jQuery plugin for mobile web development Plugin adapté pour la creation de site mobile (optimisé pour iphone)
88. Bien débuter avec la conception de plugins jQuery

Je sens que ce n'est pas clair pour tout le monde, alors voici un exemple en image :

Vous voyez, ici on se trouve sur un page d'image et sur la droite on a l'ensemble de la galerie, avec en bonus une classe spécifique pour différencier la miniature qui correspond à l'image que l'on est en train de regarder.

Le script

Les portions de code suivantes sont à ajouter dans le fichier functions.php de votre thème.

Utilisation

Il vous suffit de placer ce bout de code dans votre thème à l'endroit ou vous souhaitez voir apparaitre le lien, en général dans attachment.php ou parfois dans image.php

Vous pouvez également personnaliser le type de liste en modifiant les attributs $beforelist, $afterlist, $beforeitem, $afteritem. Par exemple si vous vouliez un simple enchainement de miniatures contenu dans une DIV :

A noter que par défaut la liste comporte un ID "gallerythumb", que les images comportent la classe "attachment-thumbnail", que les liens des miniatures comportent la classe "wallthumb" et que le lien vers la miniature actuelle comporte en plus la classe "thumbactu"

Edit: j'ai inspiré Mehdi qui nous a pondu un code plus propre que le mien, voici le résultat (merci à lui, et du coup on se rend compte que je suis une quiche en PHP ^^ )

Au final

Je vous conseille d'éviter d'utiliser cette fonction si vos galeries comportent des centaines d'images car ça alourdirait considérablement la navigation, aussi bien visuellement qu'au niveau charge serveur. Penser bien évidement à utiliser un plugin du style wp-super-cache pour ménager les appels vers votre base de données.

Préférez l'utilisation d'une liste html plutôt qu'un simple suite d'images, quitte à utiliser un bout de CSS pour obtenir le visuel voulu.

Présentation

Pour l'instant le site est composé d'un blog avec une section tutoriels qui sera très bientôt complétée par d'autres sections (chuuut) et surtout d'un forum dans lequel tout le monde est le bienvenu, que se soit pour un coup de pouce ou juste pour partager sa passion.

Si la mayonnaise prend, le site se verra doter d'applications online principalement destinées aux divertissements mobiles. J'ai déjà 2 idées qui, sans être révolutionnaires, devraient plaire à la plupart d'entre vous.

De plus, comme je compte me mettre au développement d'applications mobiles, c'est un moyen de pouvoir mettre en avant mes travaux mais aussi de donner un coup de main aux autres via le forum ou les tutoriels avec les connaissances acquises.

L'aspect communautaire

J'ai surtout voulu mettre l'accent sur l'aspect communautaire, c'est d'ailleurs pour ça que le forum était quasi obligatoire. De plus, n'importe qui peut soumettre un article via ce formulaire et les topics du forum les plus intéressants se retrouveront sur la page d'accueil pour plus de visibilité.

Qui dit communautaire, dit "social" ... du coup vous pouvez devenir fan sur FaceBook ou suivre le flux via twitter.

Les inscriptions en tant que rédacteur se font simplement en s'enregistrant ici, pour devenir modérateur il faut faire la demande par là

En mouvement

Pour l'instant rien n'est figé, les catégories du blog et du forum peuvent encore changer/évoluer et toutes les suggestions sont les bienvenues ! Il reste certainement quelques petites choses techniques à régler à gauche et à droite mais dans l'ensemble ça tourne déjà pas mal !

La technique

Le blog

Pas de surprise, je suis parti sur du WordPress sur lequel j'ai collé le thème "framework" Thematic pour voir son potentiel (avis mitigé pour l'instant). Pour le reste de l'habillage j'ai été volontairement sobre afin de garder des pages les plus légères possible, histoire de rester dans l'esprit "mobile". Je pense que je m'en suis pas trop mal sorti (testez le avec yslow), merci les sprites CSS ! Je pense que c'est mon record en terme d'optimisation d'un blog qui a un thème pourtant "pas vilain".

Le forum

J'ai longtemps hésité entre un fluxxBB qui a l'avantage d'être léger et phpBB3 qui est plus lourd mais plus complet. Le but étant de pouvoir offrir des outils assez performants aux membres, j'ai fini par prendre phpbb3 que j'ai un peu allégé tout de même. Je lui ai ajouté un mod SEO pour le duplicate et les url rewritées, d'autre mod sont prévu mais seront mis en place que si absolument nécessaire.

L'intégration

J'avais d'abord couplé la base des membres forum/blog pour que les membre du forum voulant participer au blog n'ai pas à s'inscrire 2 fois. Et puis j'ai rencontré pas mal de soucis au niveau des cookies, sans compter les performances à la baisse et pas mal de grosses modifications dans le code. Au final j'ai trouvé ça vraiment trop lourd et j'ai opté pour une inscription à part, certes un peu plus gênant pour les membres mais tellement plus facile d'entretien !
Niveau design j'ai volontairement pas copié/collé le design du blog sur le forum pour que la différence soit clair pour tout le monde.

Et ensuite ?

Et bien comme je l'ai dit, si la machine tourne bien, quelques surprises devraient arriver. Mais ça c'est pour le moment classé "secret" !

N'hésitez donc pas à vous inscrire et à participer ! Je remercierais bien évidement tous ceux qui prendront la peine de parler un peu du projet (si jamais je vous oubli, manifestez-vous !).

++