Le Blog de webdesign-tutoriaux

Bonne année 2009

Webdesign — Thu, 01 Jan 2009 08:47:47 +0000

Nous vous souhaitons une bonne année 2009, que Webdesign vous apporte toutes les réponses et tous les tutos nécessaires !

Bonne année !

Bon reveillon de Noël

Webdesign — Wed, 24 Dec 2008 11:27:41 +0000

Bonjour à tous,

Je profite de cette occasion pour vous souhaiter un bon reveillon de Noel en espérant que les dernières améliorations de Webdesign vous ont plu !

Ouverture du forum de Webdesign

Webdesign — Sat, 01 Nov 2008 15:27:26 +0000

Voilà quelques jours que je travaille à l’ouverture d’un forum pour le site Webdesign-tutoriaux. Mon choix s’est penché sur IP Board. Même s’il a peu de traduction Française et qu’il est payant, ce forum est ma foi extrêmement complet et semble plus sécurisé qu’un PhpBB !

Donc je vous invite à aller faire un tour sur le forum encore vide pour l’instant:-)

J’espère que cela sera un lien d’échange et d’apprentissage car nous avons tous à apprendre les uns les autres. J’ai aussi souscris au service IP Gallery qui vous permettra de créer des Albums et de stocker vos photos ou vos productions avec ou sans copyright !

Il y a encore pas mal de travail pour ce forum (traduction et comprehension de la bête) donc si vous avez un soucis n’hésitez pas à me contacter par Mp au pseudo Webdesign

Le forum de Webdesign

Optimiser Wordpress

Webdesign — Tue, 28 Oct 2008 11:37:34 +0000

Avez-vous constaté vous aussi que Wordpress avait tout de même tendance à prendre beaucoup de ressource ? Si tel est le cas, vous serez peut être interressé à optimiser Wordpress.

Pas question de rentrer dans le code trop volumineux, il existe une solution plus rapide. Vous trouverez dans ce tutorial plusieurs astuces basées sur des plugins pour accélérer Wordpress.

Personnellement, j’ai opté pour le plugin WP Super Cache que je viens d’installer sur le site et qui fonctionne correctement. Il s’agit simplement d’un simple cache HTML. En clair, au lieu de reconstruire la page sans cesse avec PHP et Mysql, on sauvegarde une copie au format HTML sur le disque dur qu’on apelle ensuite…

Si vous avez des questions sur l’installation, n’hésitez pas !

Optimiser Mysql

Webdesign — Mon, 27 Oct 2008 10:42:15 +0000

L’optimisation de Mysql n’est pas une chose à prendre à la légère. Certaines optimisations peuvent parfois accélérer par 100 voir 1000 certaines requêtes ! Et vous allez me dire : et après ? Les ordinateurs sont tellement puissants ! Oui sauf que cela a un coût financier et écologique. Non seulement vous allez avoir besoin d’un serveur plus puissant pour faire tourner vos requêtes non optimisés (donc plus cher) mais ce serveur consommera aussi plus d’énergie !

La nécessité

L’optimisation Mysql peut devenir une réelle nécessité que vous soyez en hébergement mutualisé ou en dédié. Votre site répondra beaucoup plus rapidement et donc attirera plus de visiteurs avec des requêtes optimisés. Sans compter l’économie d’un serveur dédié moins puissant !

Nous allons voir donc quelques principes de bases sans entrer dans le cœur de Mysql.

Detecter les requêtes non optimisés

Le premier but va être de détecter vos requêtes non optimisées. Pour cela vous avez déjà un moyen visuel trés simple. Vous cliquez sur une rubrique de votre site et le chargement est extrêmement long ? La page d’entrée du site se charge par étape ? Demandez-vous ce qui peut causer ces soucis, cela peut être une page trop lourde à charger, des images trop volumineuses ou des requêtes SQL non optimisés !

Un autre moyen consiste à utiliser aussi le calcul du temps pris par les requêtes Mysql avec PHP, voir par exemple ce tutoriel. Cela consiste à utiliser une fonction temps de PHP qui donnera des indications trés précises sur le temps utilisé. Vous mettez cette fonction avant et après la requête et vous affichez le résultat !

function utime_temps() { $t=microtime(); $t=((double)strstr($t, ' ')+(double)substr($t,0,strpos($t,' '))); return $t; }

Pour ceux qui sont en dédiés ou qui ont accès au fichier my.cnf dans /etc/mysql, vous pouvez rajouter ces lignes

log-slow-queries = /var/log/mysql/mysql-slow.log
long_query_time = 1

dans le fichier my.cnf (et faire un restart de Mysql par exemple avec /etc/init.d/mysql restart). Avec ces paramètres les requêtes Mysql trop longue d’une seconde (paramètre long_query_time) seront indiquées dans le fichier mysql-slow.log. Ainsi la consultation de ce fichier vous permet simplement de cibler précisément vos optimisations.

Une autre fonction Mysql est aussi pratique : la fonction EXPLAIN. Il suffit par exemple dans PhpMyAdmin de positionner EXPLAIN devant la requête SQL que vous voulez analyser. Celle-ci retourne un résultat expliquant exactement ce que fait Mysql concernant cette requête. Et notamment la colonne rows indique le nombre de ligne parcouru (celui-ci doit être le plus petit possible) et la colonne key indique les clefs utilisées (ci c’est NULL alors aucune clef est utilisée pour cette requête)

Clef et index !

Une erreur classique consiste à négliger les clefs et les index. Dans une requête Mysql, lorsque vous utilisez la condition WHERE, celle-ci pourra être extrêmement améliorée par l’utilisation d’un index dans la condition WHERE. Par exemple :

SELECT * FROM tutoriaux WHERE categorie=1

Dans cette requête ci-dessous, si la table tutoriaux contient 100 000 enregistrements, Mysql va passer les 100 000 enregistrements pour chercher les tutoriaux de catégorie 1 !! C’est du temps perdu. Il suffit de mettre catégorie en index pour que de 100 000 enregistrements examinés on passe à …1 !

Vous allez me dire, dans ce cas là, pourquoi ne pas mettre des index partout ? Il y a plusieurs raisons à cela : d’abord un index prend de la place mémoire dans la table Mysql et si vous avez trop d’index, cette place mémoire peut être plus importante que la place que prend les données. Ensuite lorsque vous faites une insertion dans la table, Mysql est obligé de mettre à jour tous les index, ce qui prend du temps aussi !

Vous devez donc calculer ce qui est le plus intéressant pour vous. Si la requête est exécutée très souvent, il sera intéressant de mettre des index sur les conditions WHERE MAIS si vous faites beaucoup d’insertions dans la table, il faudra limiter les index au strict necessaire et calculer au plus juste avec EXPLAIN le gain réalisé en mettant un index.

Jointures et inclusions

Il faut faire attention à ne pas utiliser des requêtes trop complexe. Et surtout faire attention aux jointures et aux inclusions. Voici un exemple de requête :

SELECT * FROM tutoriaux WHERE id_cat IN
(SELECT id_cat FROM tutoriaux_categorie WHERE id_cat_mere=2)

Dans cette requête, nous recherchons des tutoriaux dont la catégorie appartient à la catégorie “mère” 2. Cette requête est très belle mais peut rapidement poser d’énormes problèmes de temps si elle n’est pas optimisée. Déjà, oublier un index sur id_cat par exemple ou encore oublier un index sur id_cat_mere surtout que cette dernière table sera plutôt fixe (nous ne rajoutons pas des catégories tous les jours) avec une table assez conséquente de plusieurs milliers d’enregistrements conduira à une requête s’exécutant très lentement…pouvant prendre plusieurs secondes !

Toutefois on peut faire une chose pour optimiser tout cela. Pourquoi ne pas mettre l’information id_cat_mere dans la table tutoriaux ? D’accord, c’est moins joli, c’est moins conceptuel et on devra faire plus de mise à jour si on change la table tutoriaux_categorie MAIS ALORS que de temps de gagner ! Puisqu’au final on arrive à ça

SELECT * FROM tutoriaux WHERE id_cat_mere=2

Avec un index sur id_cat_mere, la requête est exécutée immédiatement !

Concernant les jointures, c’est la même chose…Par exemple :

SELECT *,count(c.nb_com) as nb FROM tutoriaux t LEFT JOIN tutoriaux_commentaire c WHERE t.id=c.id_tutoriaux GROUP BY t.id

Ici cette requête recherche les tutoriaux avec une information supplémentaire : le nombre de commentaire sur chaque tutoriel. Comme les commentaires sont dans une autre table Mysql, une jointure est effectué permettant de récupérer le nombre d’enregistrements (donc de commentaires) concernant le tutorial. Si vous avez 10 000 tutoriaux et des centaines de milliers de commentaires, cette requête est totalement explosive (pour le serveur !)

Hors nous pouvons faire une chose très simple. Inclure dans la table tutoriaux un champ nb_commentaire. Alors bien sur chaque fois qu’un commentaire est ajouté, il faudra incrémenter le champ nb_commentaire mais au final que de temps gagné car la requête devient :

SELECT * FROM tutoriaux

Ce n’est pas plus simple ?

C’est fini

Voilà j’aurais encore beaucoup de choses à dire sur le sujet mais j’espère que pour mon premier tutorial sur le site j’aurais éveillé la curiosité de certains concernant l’organisation des données dans la base de données et l’optimisation des requêtes Mysql !

Nouveau webmaster de webdesign !

Webdesign — Sun, 26 Oct 2008 17:34:27 +0000

Bonjour à tous,

Voilà, Thomas m’a passé son bébé et je suis donc en charge de continuer l’aventure. Je vais me présenter brièvement : Jaccard Emmanuel, 37 ans et propriétaire de plusieurs sites sur Internet. Ma passion est principalement la programmation et donc j’écrirais de temps en temps des tutoriaux à ce sujet. De plus ayant été pigiste quelques temps chez Login, Computer music et d’autres, j’espère que vous apprécierez ma prose !

Mes spécialités sont donc le PHP, Mysql, Javascript, HTML, Java, Flash…Mais je pratique souvent Photoshop aussi même si mes talents artistiques sont plutôt minces…

Pour l’avenir de Webdesign j’entrevois l’ouverture d’un forum, d’une rubrique astuce et une amélioration permanente du site. Ce week-end j’ai d’ailleurs passé beaucoup de temps à optimiser le site au niveau SQL car celui-ci me faisait planter mon serveur tellement il consommait de puissance !

J’espère que vous continuerez avec plaisir à passer par ici et laissez vos commentaires et suggestions !

Lancement d’un nouveau Blog Graphique

beal2912 — Wed, 08 Oct 2008 13:53:40 +0000

J’ai décidé de lancer un blog graphique sous mon vrai nom Thomas Beal, ceci va surtout me permettre d’être plus libre sur la ligne éditoriale… au programme : du web design, des brushes Photoshop gratuits, de l’inspiration et des news Wordpress

Webdesign-Tutoriaux à Vendre

beal2912 — Wed, 01 Oct 2008 15:19:15 +0000

Voilà c’est décidé, j’ai mis Webdesign Tutoriaux en vente. Vous pouvez retrouver l’annonce sur le forum de Rentabilisez.

Le site est en pleine croissance mais j’ai des projets qui m’intéressent plus. Du coup, j’ai de moins en moins de temps à consacrer à Webdesign Tutoriaux. Et plutôt que de le laisser dépérir par manque de mises à jour, je préfère vendre. N’hesitez pas à me contacter directement par le formulaire de contact si vous êtes intéressé.

Le Top du mois de Septembre sur CssLeak : 16 Web Designs

beal2912 — Wed, 01 Oct 2008 13:17:55 +0000

Voici la nouvelle sélection de designs pour l’inspiration sur CssLeak : 16 sites à découvrir

Branded07

Magouya

Elune Art

Découvrez le Blog Graphique Design Spartan

beal2912 — Fri, 05 Sep 2008 11:58:49 +0000

Les blogs graphique se font vraiment très rares sur la toile Francophone. C’est pourquoi je tiens à vous présenter le blog design spartan. C’est le blog de Gaétan Weltzer un jeune étudiant en DUT Services et Réseaux de Communication qui adore le Design.

En plus d’avoir un Thème vraiment exceptionnel Design Spartan vous proposent des tutoriels (qui sont d’ailleurs présent sur Webdesign-Tutoriaux), et de nombreux articles sur l’actualité graphique :

Gaétan fait vraiment du super boulot, je lui souhaite donc bonne continuation.

Le Top du mois d’Août sur CssLeak : 16 Web Designs

beal2912 — Fri, 05 Sep 2008 11:40:53 +0000

Comme chaque mois sur CssLeak, j’ai compilé les meilleurs designs de site du mois. Il y a en tout 16 sites à découvrir :

31 sites utilisant le bois dans leur Design

beal2912 — Tue, 26 Aug 2008 12:10:39 +0000

Suite à la dernière news : 34 Designs de sites faits à partir de paysage vectoriel. Voici la suite dans la série tendance du Webdesign sur CssLeak : 31 sites qui utilisent le bois dans leur Design. Cet élément peut vraiment être utilisé de manière différente avec des styles de site plutôt Grunge (Bois abimé ou vieilli) et des styles de site très propre avec des motifs de parquet stratifié. voici quelques exemples :

enrichmint

Revota

Carsonified

Bonne inspiration

34 Designs de sites faits à partir de paysage vectoriel

beal2912 — Fri, 22 Aug 2008 14:48:41 +0000

Voici une nouvelle catégorie de CssLeak dans les tendances du Webdesign : 34 sites dont le design est inspiré par la nature : des arbres, des montagnes, des iles … Cette categorie n’est pas une simple liste de sites comme on peux le voir sur beaucoup de blog parce qu’elle sera mise à jour automatiquement avec les nouvelles entrées dans la galerie.

Vector Art

Nemstudio

5th column

Tomas Pojeta

4 sites down à cause de FeedBurner ….

beal2912 — Thu, 21 Aug 2008 09:25:43 +0000

Certains l’auront surement remarqué… hier Webdesign-Tutoriaux ainsi que mes autres sites : CssLeak, PixBay et mon portefolio étaient down avec des erreurs 500 partout. Après avoir cherché un certain temps une solution au problème, j’ai par hasard découvert que c’était FeedBurner et mon script pour afficher les lecteurs. En gros, Feedburner ne fermait pas les connections avec le serveur… du coup 100% de la CPU, qui m’est allouée, était mangée par ces connections et tous les sites étaient down :(.

Bref, Webdesign-Tutoriaux va donc subir quelques améliorations et optimisations

Un nouveau plug-in Wordpress pour gérer les publicités 125×125

beal2912 — Wed, 06 Aug 2008 14:03:24 +0000

Si vous vendez de la publicité en direct sur votre blog vous serez heureux d’apprendre qu’il existe maintenant un plug-in permettant de gérer ces publicités en 125×125 pixels : WP125

Vous pouvez afficher autant de “slots” 125×125 que vous voulez et vous aurez des statistiques sur le nombre de cliques effectués par vos visiteurs.

BrushKing : Une collection de Brushes pour Photoshop

beal2912 — Tue, 05 Aug 2008 11:46:12 +0000

Je lance officiellement aujourd’hui BrushKing.eu. BrushKing est une Collection de Brushes(pinceaux) pour Photoshop.

Les Brushes sont classés par catégories (Vectoriel, Grunge, Abstrait…) et par tags ce qui aide fortement pour la recherche via le moteur de recherche interne.

BrushKing a 2 sections : Les news communautaires et la galerie de Brushes.

2 Flux RSS sont disponibles :

En espérant que ce site vous aidera pour vos créations graphique

Le nouveau .PSD est en vente

beal2912 — Fri, 01 Aug 2008 13:49:40 +0000

Pour informations, voici les détails du dernier .psd “Dynamisez vos images” 5/2008.

Cette édition est dediée à la photographie et aux photomotages.

Sommaire :

* Cosmic silence – créez une image fantastique, futuriste, un univers cosmique
* Écrire en lumière naturelle – aprennez comment maîtriser la lumière
* Osez la perfection – découvrez les arcanes de la retouche photo
* Devenir N°1 sur Google – comment rester visible et ne pas finir aux oubliettes
* Qui se cache derrière ces logos ? – jouez et retrouvez à qui appartiennent ces différentes logos

Best of : 15 Designs de site sur CssLeak

beal2912 — Fri, 01 Aug 2008 08:52:35 +0000

Voici le “Best of” en Webdesign du mois de Juillet sur CssLeak. 15 sites à découvrir :

Best of Juin : 13 design de site sur CssLeak

beal2912 — Tue, 01 Jul 2008 11:44:17 +0000

La sélection de webdesign du mois de Juin sur CssLeak. 13 design au total à découvrir (parmis lesquels des Thèmes Wordpress, Portefolio, Site d’agence web …)

Optimiser son code PHP avec PHP Bench

beal2912 — Tue, 17 Jun 2008 12:23:33 +0000

Je voulais vous présenter The PHP Benchmark un site qui liste les meilleurs optimisations de codage en PHP. Par exemple : vaut-il mieux utiliser “print” ou “echo”, la simple quote ou la double quote pour les chaines de caractère…

Je pense qu’il est vraiment intéressant de prendre connaissance des bouts de code à éviter