Une galerie de modèles de tableaux CSS téléchargeable !

Comment ça marche ?

C’est ultra simple, vous créez vos tableaux avec l’éditeur HTML de votre choix (en y attachant aucune classe CSS).

Rendez-vous sur ce site et testez différents exemples de tableaux CSS en cliquant sur le nom se trouvant dans la colonne “Design Name”.

Une fois le tableau CSS de vos rêves trouvé, cliquez sur “download” et copiez/collez les éléments CSS dans votre feuille de style

Le tour est joué !

Quelques modèles de tableaux CSS

Jusque là j’utilisais une simple feuille de calcul dans mon tableur préféré.

Le suivi de mes séances correspond à un journal de bord, un blog d’une certaine manière, Wordpress est par conséquent plutôt adapté (adaptable) à mes besoins. C’est donc ce que j’ai fait, de manière très modeste, j’ai ajouté quelques fonctions à mon thème Wordpress pour suivre mes entrainements.

Je précise qu’il s’agît d’une interface de suivi d’entrainements et pas de programmation d’entrainements.

Pour l’instant,  le système reste assez sommaire et se limite à l’affichage du détail de ma séance.

L’image ci-dessous vous présente une séance de la méthode Lafay :

Exemple d’une séance de course à pied :

Il manque encore pas mal de chose (ce fut le travail d’une soirée), mais si je rajoute des outils statistiques permettant de suivre l’évolution, les performances semaine par semaine ou mois pas mois le système deviendra vraiment intéressant (je ne rentrerai pas, sur ce blog, dans les détails des raisons qui font qu’un carnet d’entrainement est important pour le suivi du sportif).

J’aurai sans doute l’occasion de vous reparler de mes expérimentation Wordpressique dans quelques semaines puisque j’ai bien l’intention de continuer le développement de mon carnet sportif.

Les sportifs, qu’en pensez-vous ? et les autres ? Votre avis m’intéresse !

PS : Oui, je sais il existe des sites très sympas pour cela au niveau de la course à pied notamment. Mais je suis quelqu’un de multisports qui, en plus, souhaite centraliser toutes ses informations sportives.

L’excellent Noupe, propose une série de plusieurs articles dédiés aux modifications de Wordpress pour en faire un CMS.

Les meilleurs plugins pour utiliser Wordpress en tant que CMS

Dans cet article l’auteur nous propose une liste de plugins vraiment intéressants pour vous aider à transformer votre plate forme de blog préférée en véritable CMS.

Le plus intéressant dans la liste proposée est Flutter, un plugin qui vous permet de créer très facilement des champs personnalisés dans Wordpress sans aucune connaissance en programmation.

On y retrouve également des plugins pour :

• Gérer les utilisateurs et leurs rôles
• Gérer la navigation (fil d’ariane, pagination, etc. )
• Gérer les sites multilingues
• Gérer les pages, catégories et articles
• le référencement
• les Widgets

Voici l’article complet dont je vous conseille la lecture : 40 Exceptional “CMS Enabling” WordPress Plugins

Des exemples de sites pour mieux comprendre

Pour bien comprendre ce que l’on peut faire avec Wordpress transformé en CMS, jetez donc un œil aux sites ci-dessous :

• UGSMAG
• Search Inside Video
• The Weather Pops
• KMX Karts
• Temple Bar TradFest
• Table Talk

Sympa, non ? Voir plus d’exemples sur le site de Noupe

Trucs et astuces pour transformer Wordpress en CMS

Vous retrouverez ici des trucs et astuces (des hacks) et quelques informations basiques. C’est pour moi la partie la moins intéressante (la moins originale) de cette série d’article.

• Dans cet article on apprends notamment comment utiliser une page statique en home page
• Des astuces sur la navigation
• Les champs personnalisés
• La structure des liens
• Les sitemap
• Les commentaires et trackbacks
• …

Voici l’article complet : 101 Techniques for a Powerful CMS using WordPress

Vous vous demandez sans doute ce qui en est la cause et comment régler les problèmes de lenteur de votre site Wordpress ?

Dans cet article, nous allons essayer de trouver des solutions pour booster un peu votre site.

Supprimer les plugins inutiles

Si votre site met du temps à se lancer c’est peut être parce que vous utilisez trop de plugins. Si vous dépassez allègrement les 10 plugins, essayez de voir s’il est possible d’en intégrer directement à votre thème ou alors posez-vous la question : ai-je vraiment besoin de ces plugins ?

Utiliser WP Super Cache

L’une des techniques les plus employées pour donner un peu de vitesse à Wordpress est l’utilisation du plugin WP Super Cache. En gros, la mise en Cache permet de faire moins d’accès au serveur (PHP/MySQL) et, du coup, d’obtenir des pages qui s’affichent plus rapidement.

N’oubliez pas de cocher la case “Don’t cache pages for logged in users” si vous avez l’intention de faire des mises à jours de votre thème, sinon les changements ne se verront pas

Virer le PHP superflue

Si vous utilisez un thème que vous avez téléchargé, il y a de fortes chances que ce dernier soit blindé de code PHP superflue. Pas d’inquiétude, il ne s’agît que de petites modifications très basiques qui ne demandent aucune compétence particulière en PHP.

Pour plus d’informations sur ce sujet, je vous conseille la lecture de cet article : 13 Tags to Delete From your Theme.

Optimiser la base de données de Wordpress

Il existe deux méthodes pour optimiser la base de données de Wordpress : à la main ou via un plugin. Pour faire simple, intéressons nous au plugin Optimize DB plugin from yoast.com. Son fonctionnement est rudimentaire, on télécharge, on installe, on suit les instructions et hop ! la base de données est optimisée.

Optimiser les images

Cela va sans dire, mais mieux en le disant : si vos images ne sont pas optimisées, le temps de chargement de votre site en subira les conséquences.

Il existe de nombreux logiciels permettant de redimensionner et compresser les images, utilisez-les ! Ne collez pas les photos fraichement sorties de votre appareil numérique (bien souvent des fichiers immenses) sur votre blog sans les avoir compressé un max ! Au besoin, utilisez Smush.It, un outil en ligne de compression d’images.

Compresser les feuilles de style CSS et les JavaScripts

Il s’agît d’une chose très facile à faire et qui ne vous prendra pas beaucoup de temps : compressez vos CSS et placez tous les Javascript dans un seul fichier.

Pour la partie CSS, vous pouvez utiliser un site comme CleanCSS , cet outil compresse vos CSS selon vos critères (image ci-dessous). Si vous utilisez plusieurs feuilles de styles, placez les toutes dans un seul fichier et compressez-le.

Pour la partie Javascript, comme pour les CSS, placez tout vos javascript dans un seul fichier et compressez-le en utilisant un outil comme JavaScripCompressor. Une fois votre javascript compressé, placez l’appel au fichier dans votre footer.php. Ainsi, votre site chargera d’abord la mise en forme et, en dernier, tous les extras javascripts

Astuces et liens pour accélerer Wordpress : en vrac

Supprimer le Hotlinking via htAccess

Tenir les spammeurs à bonne distance (toujours via un fichier htaccess)

Désactiver la révision des articles

La bible de l’optimisation wordpress chez Christrophe Logiste

13 Great WordPress Speed Tips and Tricks for MAX Performance sur Noupe.com

D’autres astuces à partager pour régler les problèmes de lenteur de Wordpress ?

Ainsi, depuis plusieurs années j’utilise une méthode (qui s’apparente plus à une règle de bon sens) pour optimiser mes temps de développement : la capitalisation et le copié/collé/modifié.

La capitalisation

Rien de bien sorcier dans cette partie, il suffit de garder une trace de tout les dossiers sur lesquels vous travaillez et, si possible, de les archiver de manière à facilement les retrouver. Ceci est valable pour les personnes ayant déjà quelques projets au compteur. Il est également possible (j’y passe beaucoup de temps) de vous créer vos propres bibliothèques d’images, icones, logo, script, astuces etc., au gré de vos surfs sur la toile.

Ainsi, tous les sites que j’ai fait, tous les projet sur lesquels j’ai travaillé, toutes les données que j’ai soigneusement conservé sont régulièrement exploitées. En effet, pourquoi ré-inventer la roue lorsqu’il est possible de reprendre d’anciennes créations, en partie ou entièrement, d’en adapter certaines portions pour les faire correspondre aux nouveaux besoins. Ce qui m’amène à vous parler du copié / collé / modifié.

Le copié / collé / modifié

Les experts de la programmation ne vous diront pas le contraire, une bonne partie des applications qu’ils développent sont bien souvent basées sur du code “copié/collé” depuis un précédent projet.

Il est donc très facile de reprendre une application web, un script, un design, de le copier et le coller dans un nouveau projet. Cela épargne de nombreuses heures de développement. Certains puristes préféreront repartir de zéro à chaque fois, mais cela prend du temps et le temps c’est de l’argent

Pour conclure, d’un coté on capitalise et de l’autre on ré-utilisent intelligemment, le tout pour gagner du temps.

Et vous, des techniques similaires à partager ?

Voici quelques ressources pour télécharger des icones gratuitement :

Les icones de FreeIconsDownload.com

Des icones et boutons classés par thème.

Les icones de IconShock Blog

Un blog qui offre très régulièrement des icones en téléchargement gratuit mais aussi des informations sur le design web et les logos…

Les icones de Free Icons Web

20 catégories et plus de 15 000 icones à télécharger gratuitement.

Les icones de DryIcons

Encore un blog qui diffuse régulièrement des icones en téléchargement gratuit pour notre plus grand bonheur.

Les icones de Icon Archive

24 000 icones classé dans plus de 30 catégories disponible en téléchargement gratuit

Les icones de Designus.com

Je vous parlais déjà de ce site qui met à disposition de très bonnes ressources pour WebDesigner. La rubrique logo est également très bien fournie.

Les icones de IconFinder.Net

Les icones de Icon Dock

Les icones de Icons-Online

Une liste exclusivement en English de 9 sites et non 10 comme indiqué dans le titre, n’hésitez pas à partager dans les commentaires des sites (de qualité) francophones que je rajouterai à la liste.

Voici quelques astuces pour vous aider à atteindre vos objectifs :

Soyez réaliste dans vos estimations de temps pour réaliser un projet

Si vous êtes actuellement entrain de réaliser une mission et une nouvelle opportunité se présente, soyez réaliste dans votre estimation de temps pour boucler le nouveau projet. Si vous n’êtes pas capable de terminer une nouvelle mission dans les temps ne la prenez pas ! Pour ma part, j’informe le client avant de signer : “ok je peux le faire, mais pas dans vos délais”, souvent ça passe.

Pour les acharnés : chiffrez bien le temps pour vos missions quotidiennes

L’erreur à ne pas faire lorsque l’on télétravail c’est de ne pas pas compter ses heures. On arrive vite à croire qu’en travaillant beaucoup (d’heure) on achève plus de travail (je l’ai fait cette connerie). Il est préférable de bien chiffrer chaque tâche en nombre d’heures avant de commencer et essayer de s’y tenir.

Récompensez-vous

Pratiquez vos activités perso. (sports et loisirs) en récompense pour avoir atteint vos objectifs de la journée ! Il m’arrive souvent de me dire, par une belle journée ensoleillé : “J’irai bouquiner au bord de l’eau seulement après avoir terminé [la mission]”. Evidement, il convient ici d’être assez lucide pour vous fixer des objectifs ni trop simples, ni trop compliqués (sinon la lecture au bord de l’eau tombe à l’eau).

Donnez vous des deadlines interne

Déplacez la date limite de remise d’un projet de quelques jours en amont, ainsi il vous restera un peu de rab pour les changements de dernière minute.

Le répondeur de votre téléphone peut vous faire gagner du temps !

Vos clients comprendront très bien que vous ne pouvez pas être disponible par téléphone 24h/24h. Certaines missions demandent beaucoup de concentration, un coup de téléphone et la charge de travail que ce dernier vous apportera peut vous faire perdre du temps  Rappelez vos clients au moment ou vous prendrez une petite pause.

Faites la vaisselle, le ménage et donnez à manger au chat avant d’attaquer !

Il y a une multitude de distractions lorsque l’on travaille de chez soi. Essayez de vous occuper d’elles avant de commencer votre travail.

Assurez-vous que vos amis et famille savent que vous travaillez comme un fou et que vous ne pouvez pas être dérangé.

Je ne parle pas des enfants, parce que là c’est quasiment impossible… Par contre, les membres de votre famille peuvent penser que comme vous travaillez à la maison vous êtes toujours disponible. Il faudra les éduquer sans les brusquer, leur expliquer que vous faites un “vrai” travail et ne pouvez vous arrêter pour un café n’importes quand.

A mes débuts en tant que freelance, un vieil ami, très bon vivant, avait la fâcheuse tendance à venir me voir au moment de l’apéro (parfois même assez tôt le matin). Il pensait que le travail à la maison était en quelque sorte des vacances et venait fêter cela avec moi (à l’insu de mon plein gré). Je vous rassure, il ne s’est pas du tout senti vexé lorsque je lui ai expliqué que mon travail était réel et que le Ricard était contre productif.

Pour les moins bosseurs : prévoyez un minimum de temps pour travailler

Chaque mission doit être chiffrée en temps, par exemple prévoyez 45 minutes pour écrire une proposition, si vous y passez 1h ne vous inquiétez pas, travailler plus que le temps imparti devrait vous “booster” un peu ! Par contre, ne travaillez pas moins que le temps prévu !

Ignorer Internet, les mails et twitter

J’exagère ? Internet, les mails et twitter c’est l’appel des sirènes, il est difficile d’y résister ! A moins d’attendre un mail important, il n’est pas nécessaire de lire vos mails plus d’une fois par heure (voir : pourquoi sommes nous accros aux mails). Un petit surf qui, initialement, devait vous prendre 5 minutes peut très vite se transformer en 1 heure. D’ailleurs, Twitter vous mènera bien souvent vers du surf chronophage (et parfois inutile).

Evidemment, ces conseils ne s’appliquent pas à tout le monde, mais pour ma part ça marche relativement bien !

Isolez-vous pour travailler

Aménager une pièce de travail, un bureau, avec une porte qui ferme, afin de ménager un environnement professionnel au milieu de toutes ces distractions personnelles. Même si c’est un coin dans une cave, c’est estampillé “boulot” et cela met en condition quand on y pénètre, de la même manière qu’aller au bureau dans une entreprise. (astuces soumises par turtleram via les commentaires)

Qu’est ce qui change avec le nouveau blog ?

Pas grand chose à vrai dire… La barre latérale a été allégée pour en faciliter la lecture laissant ainsi plus de place pour les articles. J’ai ajouté une page prestations et modifier la section a propos. Ce qui va surtout changer avec ce nouveau blog sera le rythme de publication, je vais publier plus régulièrement avec une moyenne de 2 ou 3 articles par semaine.

Les évolutions de legizz.com de 2003 à 2009

Première version de début 2003

Quelques mois plus tard, en mars 2003 (admirez les couleurs)

A la même période, dans la partie Boxe

Version de 2004

Version de 2005

La version d’hier

Et la nouvelle version… Vous êtes dessus !

N’hésitez pas à me donner vos avis sur cette nouvelle version.

Comment ça marche les Webby Awards ?

Les prix sont décernés par l’Académie internationale des arts digitaux et sciences, une communauté de 550 experts qui compte, entre autres, parmi ses membres, l’un des pères fondateurs d’Internet Vint Cerf, le chanteur David Bowie, le PDG de Virgin Richard Branson, le PDG de RealNetworks Rob Glaser ou le créateur de la série animée "Les Simpsons" Matt Groening. L’Académie compte aussi de nombreux journalistes de journaux et magazine comme Elle, le New York Times, Wired, etc.

C’est l’Académie internationale des arts digitaux qui sélectionne les sites et décerne le “The Webby Award” dans chaque catégorie (Websites, Interactive Advertising, Online Film & Video et Mobile). Un deuxième prix est également délivré, “The People’s Voice Award”, ce dernier est voté par le public (c-a-d nous).

Et les lauréats des Webby Awards ?

Voici quelques uns des lauréats :

• Meilleur site e-commerce : Nike ID
• Meilleur site automobile : Smart
• Meilleur site télécom : Orange
• Meilleur site beauté : Axe
• Meilleure animation : Coraline 
• Meilleure page d’accueil : Adidas
• Meilleur usage de la typographie : Wordle
• Meilleur design visuel : Saab
• Meilleur site produit high tech : Tom Tom
• Meilleur service financier : Mint
• Meilleur site de mode : Red Issue
• Meilleur site de jeux : Club Penguin
• Meilleur site d’Art : Dreamgrove
• Meilleure application : Animoto

Vous le remarquerez sans doute, il n’y a pas que du site d’exception dans la liste…

Qu’en pensez-vous ?

Ah ouais ? Et à quoi ça sert les Mind Map ?

C’est un très bon moyen pour gagner du temps ! Tout simplement en représentant les informations de manière moins linéaire que ce qui se fait d’ordinaire (l’écriture et la création de dossiers/rapports est d’ordinaire quelque chose de très linéaire).

Voici un exemple très simple pour comprendre le fonctionnement d’une carte heuristique :

Il suffit de suivre les différentes branches (en partant du centre) pour découvrir les idées sous-jacentes.

Et comment on fait des cartes heuristiques ?

La solution basique pour créer des Mind Map est l’utilisation d’une feuille de papier et des feutres de couleurs. Utilisation archaïque, j’en conviens, mais utilisation qui s’avère rudement efficace en réunion lorsque l’on a pas d’ordinateur.

Aujourd’hui de nombreuses applications informatiques permettent de créer des cartes heuristiques, des logiciels (MindManager, FreeMind) ou des sites web (MindMeister, Mindomo).

L’utilisation de MindMap ne demande pas de formation particulière, mais il convient d’y accorder un certain temps pour s’y habituer (résistance au changement ?). Pour bien commencer, je vous conseille vivement la lecture du livre : Organisez Vos Idees - avec le Mind Mapping. Les critiques du livre vous en diront long sur la qualité de cet ouvrage (lien).

Des cartes heuristiques à toutes les sauces

La carte heuristique a de nombreuses applications dans de divers domaines (perso, pro et éducatifs). Ses possibilités incluent :

• la prise de notes et la remise en forme de ces notes
• la préparation d’un exposé
• le brainstorming (j’en parlais brièvement ici)
• la structuration et la gestion d’un projet (d’ailleurs MindManager est très bien adapté pour cela avec son interfaçage avec toutes la suite Office y compris MS Project)
• la visualisation d’idées complexes
• L’aide à l’apprentissage mnémotechnique : pour les révisions
• L’organisation de l’accès (par des liens) à un ensemble de dossiers et de fichiers informatiques.
• La préparation de discours
• …

Comme vous pouvez le constater on peut vraiment utiliser des cartes heuristiques à toutes les sauces !

Et leGizz, comment utilise-t-il les cartes heuristiques ?

Je les utilise principalement pour représenter l’ensemble d’un projet web, j’y place les budgets, responsables, objectifs, liens utiles, liens vers fichiers etc.

Les maps s’avèrent très utiles pour représenter, à des non experts, des projets web ”complexes”. Avec un peu de couleur, quelques images et flèches il est possible de représenter beaucoup de choses sur une simple page.

J’utilise également les cartes heuristiques pour représenter mes idées, un nouveau projet : hop, une carte heuristique ! Cela permet sur une seule page d’avoir une vue d’ensemble de mes idées/projets/tâches que je complète au fil de l’eau.

Depuis peu j’utilise également les cartes heuristiques pour faire mon planning hebdomadaire, par contre, dans ce cas j’en fais une utilisation un peu particulière puisque je fais un mix de MindMapping et GTD.

Je remarque qu’assez régulièrement j’’essai d’élargir mon champs d’utilisation des cartes heuristiques. A présent, je m’en sers également pour faire de la prise de note lors de réunion (trop pratique !).

Vous l’aurez compris, j’utilise et explore activement l’utilisation des cartes heuristiques si bien qu’aujourd’hui, j’ai eu envie de vous en parler.

Et vous, utilisez-vous les cartes heuristiques ?