Nous vous révélons aujourd’hui la recette pour créer un site web avec E-monsite, que vous ayez fait le choix de créer un site gratuit, créer un site pro ou créer un site marchand. En effet, nous avons remarqué que quels que soient les projets web sélectionnés chaque semaine, site d’association, site de photographe, site d’artiste, site d’entreprise etc , la liste des points forts et des axes d’amélioration du site internet comportaient de nombreux points communs. Dès lors, il me semble intéressant de vous proposer un florilège  des qualités que doivent posséder un site web pour être une bonne vitrine de votre activité sur le net.

Recette pour un bon site :

• Une navigation simple et claire : l’internaute doit savoir où il se trouve et quel type de contenu il va trouver lorsqu’il arrive sur une page ou clique sur un lien, une rubrique etc. Des titres visibles et des textes de présentation lisibles orienteront la navigation de l’internaute. En effet si le visiteur ne trouve pas les éléments qu’il recherche rapidement et s’il n’a aucune raison de penser qu’il va les trouver ailleurs sur votre site, il va déguerpir aussitôt !
• Cohérence des contenus : tant au niveau de la forme que du fond. Le visiteur ne doit pas se demander s’il est toujours sur le même site à chaque fois qu’il change de page. Exemple fréquent sur E-monsite, ce sont les polices et les couleurs de police qui changent à tous les paragraphes. Je vous assure que seuls les visiteurs les plus fidèles et obstinés (vous ou votre maman ) lisent une page jusqu’au bout dans ce cas.
• Utilisation judicieuse des outils : E-monsite propose de nombreux outils de création de site et widgets pour ajouter des fonctionnalités à vos site web… Cependant, il vous faut utiliser ceux qui sont vraiment adaptés à votre activité et ne pas forcément tous les utiliser sous peine de créer des rubriques vides ou des outils qui ne seront pas utilisés. Par exemple,  créer un blog peut se révéler très efficace, tant pour proposer du contenu intéressant à vos visiteurs que pour le référencement,  mais cela vous dessert si vous ne publiez aucun article ou que le dernier date d’il y a plusieurs mois. Vos visiteurs penseront que le site n’est plus actualisé alors que peut être d’autres pages ou rubriques le sont tous les jours !

Ingrédients à proscrire :

• Page d’introduction : très mauvais pour le référencement de votre site et souvent si cette page est mal faite, les visiteurs ne chercheront même pas à entrer sur votre site. Et puis tout simplement, cela rajoute une étape avant que l’internaute puisse consulter les informations qu’il est venu chercher.
• Profusion de gifs animés : paillettes et autres curseurs de souris qui peuvent provoquer des crises d’épilepsies chez les internautes les plus sensibles .
• La musique qui démarre automatiquement : et qui est difficile à arrêter car le player est introuvable… Beaucoup d’internautes surfent en écoutant leur propre playlist (j’en fait parti) et le mélange de musiques avec le son au maximum va amener l’internaute à faire un choix…Dans la majorité des cas il quittera votre site.
• Contenu uniquement constitué d’images avec peu de textes ou de titres. Problème que l’on retrouve principalement sur les pages d’accueil de sites parfois très bien réussies d’ailleurs. Malheureusement, les robots des moteurs de recherche ne lisent pas le texte des images ( à part leur titre si vous l’avez renseigné) et si vous avez peu de contenu texte qui se rapporte a votre thématique et qui reprend les mots clés que vous avez sélectionnés… les internautes ont peu de chance de trouver votre site sur les moteurs de recherche.
• Effet aléatoire dans vos diaporamas : Il est très simple de passer à un effet plus classique dans les options du module qui permet de faire un album photo. Je vous assure qu’il est plutôt difficile de se concentrer sur la qualité des images lorsque qu’elles s’affichent en tournoyant de tous les cotés .

Pour aller plus loin :

Vous avez quelques clés en mains pour améliorer votre site et rejoindre la qualité des sites du Mercredi. Le plus simple est de voir comment votre site se situe par rapport à la liste des points relevés. Parfois des modifications très simples à réaliser peuvent avoir un impact important sur la perception des visiteurs et le trafic de votre site.

Bien sûr il y a beaucoup d’autres éléments qui vont avoir un impact sur la réussite de votre projet web et lorsque l’on a la tête dans le guidon, il est parfois difficile de conserver un oeil neuf. Faire un peu de Benchmarking et demander l’avis de personnes extérieures au projet est un plus.

Si vous débutez dans la création de site web, vous avez sûrement déjà fait un tour du côté des tutoriels E-monsite, si non, je vous conseille de commencer par la liste des 20 choses à faire et à ne pas faire sur un site web.

Ensuite passez un peu temps à optimiser le référencement de votre site sur vos pages existantes, vous ne le regretterez pas et vous prendrez de bons réflexes lorsque vous créerez de nouveaux contenus pour votre site.

Ce billet est  aussi l’occasion de vous dire que le site du Mercredi prend des vacances bien méritées. Profitez du mois d’août pour que votre site soit prêt pour la rentrée, la rubrique évoluera certainement pour mettre encore plus en avant vos projets web réussis et prodiguer astuces et conseils à tous les webmasters.

Si E-monsite, qui vous permet de créer un site facilement, ne peut pas vraiment vous aider pour créer des liens vers votre site (à part le lien dans l’annuaire de sites web qui est très important), E-monsite peut vous aider à optimiser le référencement de votre site en vous donnant les outils adéquats et de bons conseils.

Ainsi, plusieurs modifications et nouvelles fonctionnalités ont été développées afin que vos sites soient mieux vus par les moteurs de recherche dont notamment le très populaire google :

Format des balises title personnalisables

E-monsite vous offre la possibilité de formater les titres (la balise <title>, affichée dans la barre de titre du navigateur Internet) des pages de votre site. Concrètement, à l’aide de variables vous allez pouvoir placer le nom de la page en cours, le nom du site et le texte que vous souhaitez (des mots clés par exemple !!) dans la balise title.

La balise title est probablement la plus importante (puis suit la balise H1, voir point suivant) pour le référencement. En effet, elle a deux rôles :

• Les mots clés qu’elle contient sont mieux considérés par google pour positionner la page dans le résultat des recherches.
• Dans les résultats de la recherche, c’est ce qui doit donner envie à l’internaute de cliquer. En effet, google (et les autres moteurs de recherche) reprend la balise title comme titre du site dans les résultats. Il faut donc que le titre incite à cliquer (à éviter, les titres racoleurs du genre « Meilleur site du monde, cliquez ici »…)

Pour éditer le format des titres, allez dans Site > Informations sur le site puis descendez jusqu’au paragraphe « Format des balises de titre du site ».

Balises de titres optimisés

La seconde amélioration est implémentée pour tous automatiquement. Vous n’avez donc rien à faire !

Après la balise <title>, une autre balise est très importante pour le référencement : la balise de titre <h1>. Avant cette modification, la balise H1 était le titre de votre site, affiché dans la zone d’entête de votre site. Cette balise était donc identique sur toutes les pages.

Cette amélioration consiste donc à avoir une balise H1 différente sur les pages de contenu. Ainsi, sur les pages, le blog et les catégories de pages le titre de la page, qui était anciennement dans une balise de titre secondaire (<h2>) est à présent en balise de titre principale (<h1>).

Ainsi, il va être plus aisé de se référencer sur des pages précises, plutôt que sur l’ensemble du site !

META description et balise TITLE personnalisables sur les pages

Notre troisième nouvelle fonctionnalité est ce cadre « Optimisation du référencement de la page » que beaucoup ont déjà repéré en bas de la création ou de la modification d’une page sur votre manager (Pages > Nouvelle page ou Pages > Gestion des pages).

Ainsi, pour la même raison que le premier point, vous allez pouvoir définir un titre différent dans la balise <title> (affiché en titre du navigateur) et dans la balise de titre principale <h1>. Dans ce cadre, vous pourrez donc définir le contenu de la balise <title> de la page en cours de modification ou de création. Elle doit à la fois inciter au clic et contenir des mots clés importants en rapport avec la page (tout en restant cohérent : il ne faut pas que ce soit une liste de mots clés)

De plus, vous allez pouvoir définir le contenu de la balise META description de la page en cours. Cette balise, dont le contenu n’est pas affiché sur la page (c’est juste une indication pour les moteurs de recherche) n’est pas prise en compte dans le positionnement de votre site sur les moteurs de recherche. Cependant, tout comme la balise <title> elle a une importance dans l’incitation à l’internaute à visiter le site. En effet, dans certains cas, Google affiche le contenu de cette balise dans les résultats de la recherche. Il faut donc travailler avec soin ce contenu.

Enfin, la dernière option de ce cadre permet de lier une image (à partir de votre espace de stockage) à votre page. Cela ne concerne pas vraiment Google, mais cela a un intêret majeur pour les sites de réseaux sociaux comme facebook. En effet, lorsque la page sera partagée sur Facebook, en indiquant une image c’est celle ci qui sera proposée pour illustrer la page dans le flux d’actualité. De plus, les deux précédentes options (title et meta description) sont aussi reprises lors du partage en titre et texte de présentation de la page. Encore une bonne raison de renseigner ces options !

(Vous pouvez partager vos pages à partir du manager dans Pages > Gestion des pages. Prochainement, nous vous proposerons un outil – facultatif -  qui permettra à vos visiteurs de partager vos pages auprès de leurs amis sur les différents réseaux sociaux)

Pour aller plus loin

Avec ces nouveaux outils d’optimisation au référencement, E-monsite vous permet d’améliorer potentiellement votre référencement. Néanmoins, se positionner sur google (ou tout autre moteur de recherche) et optimiser son site pour le référencement ne se fait pas tout seul et demande un peu de travail. Voici une liste non exaustives de choses importantes que vous devez faire pour vous faire bien voir par les moteurs de recherche :

• Revoir les titres de ses pages (titres title et h1) en se demandant quels sont les termes que tapent les internautes pour trouver le type d’informations que vous proposez (Attention de ne pas mettre de listes de mots clés en titre, ni de faire des titres trop longs : les mots clés seront noyés et perdront en poids). Consultez cette article rédigé par Colin : Choisir les mots clés.
• Tisser un maillage de liens entres les différentes pages de votre site. En effet, si des liens externes sont importants, des liens internes bien réfléchis est un élément essentiel. Un footer (zone en bas de votre site) contenant les pages les plus importantes de votre site est également une bonne chose. Plus d’infos sur le maillage de liens.
• Mettre à jour votre site régulièrement (pourquoi ne pas créer un blog ?) et créer du contenu optimisé (mots clés sur lesquels vous souhaitez vous positionner doivent être répétés, mais pas de trop !), intéressant, unique, original (pas de copier-coller à droite, à gauche) et en quantité (plus un site est gros, plus il a de chance d’être mieux référencé).
• Tisser des liens externes (les fameux backlinks) en s’inscrivant à des annuaires (généralistes et dans votre thématique, ne demandant pas de lien en retour) et en créant des partenariats avec des sites dans le même univers que le vôtre (pas des concurrents non plus !)

Vous voulez en savoir encore plus ? Consultez cet article sur Wikipedia, puis fouillez un peu les dossiers et le forum de Webrankinfo, la référence en la matière.

Et vous, qu’avez vous fait pour optimiser votre site au référencement et le positionner sur les moteurs de recherche ?

En général, pour chaque formulaire sur un site on créé une fonction spécifique. Ce qui peut s’avérer rapidement une grosse perte de temps.

La problématique est donc posée : comment gagner du temps tout en effectuant des contrôles sur les formulaires en bonne et due forme ?

Il suffit d’avoir une seule et même fonction pour l’ensemble des formulaires. C’est là que l’utilisation de jQuery devient très intéressante. En effet, avec jQuery il est possible d’agir sur les éléments de la page ayant le même sélecteur.

Nous allons donc définir une classe spécifique aux éléments de formulaire obligatoires. De plus, nous allons indiquer un élément title aux champs formulaires afin de pouvoir les réutiliser dans notre fonction :

<input name="nom" id="nom" class="obligatoire" title="Nom" type="text">

Ainsi, tous les éléments ayant la classe « obligatoire » devront être remplis. La fonction javascript suivante se charge du contrôle :

function VerifForm(){
var count=1;
var message="";
$(".obligatoire").map(function(){

if($(this).val()== »)
{
message += « \n – « +$(this).attr(« title »);
count++;
}
});

message += « \n\n »+ »Puis validez de nouveau le formulaire »;

if(count==2) { alert(« Veuillez remplir ce champ :\n »+message);
return false; }
else if(count>2) { alert(« Veuillez remplir ces champs\n »+message);
return false; }
else { return true; }

}

Ainsi, si le champ « nom » n’est pas rempli, une alerte javascript (qui peut être modifiée par une alerte ajax, avec par exemple le plugin facebox) indiquera que le champ n’est pas rempli.

Il ne faut pas oublier d’appeler cette fonction dans la balise <form> : onsubmit= »return VerifForm(); »

Cette fonction est basique et doit être améliorée pour prendre en compte d’autres éléments de formulaire tels que les cases checkbox, les boutons radio, etc. De plus, il serait judicieux de définir des classes différentes pour contrôler les adresses email, les numéros de téléphone, etc.

Pour inaugurer cette partie, je vous fournis 4 fonctions (+ 2 variantes) bien utiles pour faire des traitements SQL de base à savoir : SELECT, INSERT, UPDATE et DELETE.

Ces fonctions sont finalement assez simples, mais ça fait gagner du temps. De plus, ce genre de fonction permet d’opérer des changements sur toutes les requêtes identiques très simplement (ex : en cas de changement de système de base de données).

Insérer un enregistrement :

function inserer_sql($table,$champs,$donnees)
{
$sql = "INSERT INTO $table ($champs) ";
$sql .= "VALUES ($donnees)";

if(mysql_query($sql))
{
return true;
}
else
{
return false;
}
}

Et pour l’utiliser, c’est tout aussi simple. Par exemple :

if(inserer_sql("utilisateurs","email,nom,prenom",
"'$_POST[email]','$_POST[nom]','$_POST[prenom]'"))
echo"L'ajout a été effectué avec succès";
else echo"L'ajout a échoué";

Ensuite, pour gagner du temps j’utilise une autre fonction qui n’a comme arguments que le nom de la table et la liste des champs à ajouter (sous forme de tableau). Cela suppose bien sur une correspondance des champs du formulaire (données POST) et des champs de la table :

function inserer_sql_array($table,$array)
{
$req="";
$i=1;
foreach($array as $k)
{

if($i!=’1′) { $req.= », « ; $req2.= », « ; }

$req.= »$k »;
$req2.= »‘$_POST[$k]‘ »;
$i++;
}

return inserer_sql($table,$req,$req2);
}

Il suffit de l’utiliser comme ceci :

if(inserer_sql_array("utilisateurs",array("email,nom,prenom"))
echo"L'ajout a été effectué avec succès";
else echo"L'ajout a échoué";

Modification de données :

Sur le même principe que pour l’ajout j’ai cette fonction :

function maj_sql($table,$action,$where)
{
if($where=='') { $where=1; }

$sql = « UPDATE $table SET $action « ;
$sql .= « WHERE $where »;

if(mysql_query($sql))
{
return true;
}
else
{
return false;
}
}

Dans cette fonction, il est permis de modifier tous les enregistrements d’une table (en laissant l’argument $where à vide). Mais, par mesure de sécurité, on peut désactiver cela en testant la variable $where au début et en renvoyant false si elle est vide.

Pour utiliser cette fonction, il suffit de tester que la fonction renvoie bien true.

La variante de cette fonction qui génère la requête à partir d’un tableau array() :

function maj_sql_array($table,$array,$where)
{
$req="";
$i=1;
foreach($array as $k)
{
if($i!='1') $req.=", ";

$req.= »$k=’$_POST[$k]‘ »;
$i++;
}

maj_sql($table,$req,$where);
}

Suppression de données :

Cette fonction permet de supprimer un ou plusieurs enregistrements dans une table en précisant uniquement la table et la condition à remplir. Cependant, par mesure de sécurité, il est impossible de ne pas préciser de condition (cela supprimerait tous les enregistrements de la table) :

function sup_sql($table,$where)
{

if($where== ») {
return false;
}
else
{
$sql = « DELETE FROM $table « ;
$sql .= « WHERE $where »;

if(mysql_query($sql))
{
return true;
}
else
{
return false;
}
}
}

Lire une ligne d’une table :

Enfin, la dernière fonction permet d’extraire les données d’un enregistrement d’une table. C’est bien sûr en fait un simple SELECT mais comme pour les autres fonctions, cela permet de gagner du temps.

function requete_sql($table,$champs,$where)
{
// si $where est vide on lui attribue une valeur par défaut
if($where=='') { $where=1; }

// en cas de jointure on utilise le nom de la première table pour le tri par ID.
$tab=explode(« , »,$table);

$sql = « select $champs from $table where $where ORDER by $tab[0].id DESC LIMIT 1″;
$p = mysql_query($sql)OR DIE(« Erreur sur la requete SELECT $champs FROM $table WHERE $where »);
return mysql_fetch_array($p);
}

Le résultat de cette fonction est un tableau contenant les données précisées dans l’argument $champs. Exemple :

$requete=requete_sql("utilisateurs","nom,prenom,email","id='$_GET[user]'");
echo"Bonjour ".$requete[prenom]." !";

En bonus, voici la fonction qui permet de compter le nombre d’enregistrements dans une table pour une condition précise. Cette fonction effectue un mysql_numrows sur une requête SELECT. Les puristes préféreraient sans doûte un SELECT count(id), cependant, il me semble que ma méthode est moins lourde :

function compter_sql($table,$where)
{
if($where=='') { $where=1; }
$sql = "select id from $table where $where";
$p = mysql_query($sql)OR DIE("Erreur sur la requete SELECT id FROM $table WHERE $where");
return mysql_numrows($p);
}

Cette fonction suppose que vous avez une colonne id dans votre table puisque le SELECT est effectué dessus. Pour l’utiliser, rien de plus simple :

$nb_utilisateurs_hommes = compter_sql("utilisateurs","sexe='H'");

Conclusion :

Ces petites fonctions ne sont pas révolutionnaires en soit puisqu’elles reprennent les principes de base de SQL. Cependant, et ce n’est pas négligeable, elles permettent réellement de gagner du temps car elles sont plus rapides à écrire et plus faciles à retenir (je retiens mieux des noms de fonction en français qu’en anglais).

Bien sûr, elles ne sont pas parfaites, il faudrait protéger les données à insérer ou à modifier par des htmlspecialchars() et addslashes(). Mais pour ça, c’est à vous de jouer, je ne vais pas vous prémacher tout le travail non plus !

• Bien penser la structure de sa base de données avant le développement afin de réduire au maximum le nombre de requêtes SQL dans le développement (par exemple, ne pas hésiter à créer une colonne contenant le nombre de messages postés par un utilisateur – qui sera remis à jour à chaque message qu’il postera – plutôt que de faire un mysql_num_rows à chaque affichage de ce nombre).

• Mettre en cache tout ou une partie du contenu (stocker la page dans un fichier html et l’afficher s’il existe ou sinon affichage de la page php et génération du cache).

• Mettre en cache des variables avec les fonctions serialize et unserialize. Cela permet par exemple de mettre en cache le résultat d’un mysql_fetch_array assez lourd appelé sur chaque page (comme des variables sur l’utilisateur ou le contenu de menus…). J’y reviendrais plus en détail dans un prochain billet.

• Optimiser les requêtes SQL : utiliser les jointures (SELECT sur plusieurs table ayant des champs en communs) et ne pas faire de SELECT * (select sur tous les champs) mais lister les champs utilisés (SELECT id,login,nom FROM …).

• Mettre des index intelligents sur les tables SQL. Les index permettent un gain de temps d’accès énorme. Il faut les placer sur les colonnes utilisées dans la clause WHERE.

• Compresser vos pages web, fichiers CSS et javascripts à l’aide de la fonction gzip de php. Vous trouverez sur ce site une classe complète pour compresser vos pages. Cela peut paraître idiot à l’heure du haut débit : il faut optimiser le poids des images car des images lourdes ralentissent malgré tout le chargement de la page.

• Vérifier qu’un script, notamment de régie publicitaire, ne ralentit pas l’affichage de la page. Cela arrive fréquemment et certaines régies sont championnes dans ce domaine !

N’hésitez pas à compléter si j’ai oublié des choses

E-monsite propose à ses membres de créer une campagne publicitaire sur le réseau E-monsite. Le réseau E-monsite se compose du site E-monsite (dont le forum), la zone membre et l’ensemble des sites E-monsite (en version gratuite). Vous pouvez afficher votre bannière tout en haut (d’où une très grande visibilité) de E-monsite et des sites hébergés pour un tarif très bas. En effet, par exemple une campagne pub de 50′000 affichages coûte 25 €.

Avec un taux de clic moyen de 1% vous pouvez espérer obtenir 500 visiteurs en très peu de temps !! Une aubaine qu’il vous faut saisir ! Pour commander votre campagne de pub, allez sur la zone membre dans le menu « Campagnes Pub ».

1) Outre le référencement proprement dit, il y a une étape préalable : l’optimisation du référencement.

Cette optimisation consiste en premier à mettre en avant des mots clefs. Ces mots clefs sont à mettre dans la description de votre site, les mots clefs et… (le plus important) dans le titre de votre site (car il apparait dans la barre titre des navigateur et en haut de votre site). Choisissez donc avec précaution le titre de votre site ainsi même que votre login (si vous n’avez pas encore créé votre site) ainsi que la description et les mots clefs, qui apparaissent dans les balises META de vos pages. Pour modifier ces éléments, allez dans « Configuration » >> « Informations sur votre site ». Ensuite, pour optimiser votre site, il faut placer des mots clefs dans vos contenus et dans le titre de vos rubriques (qui apparait également dans la barre titre du navigateur). Enfin, google ainsi que d’autres moteurs classent les résultats de la recherche selon le nombre de « back-link » des sites. Ainsi, plus un site a des liens qui pointent vers lui sur d’autres sites, plus il aura de chance d’être bien placé sur les moteurs de recherche. Pour cela, il vous faut multiplier les partenariats ou échange de lien avec d’autres sites traitant de votre thême ou ayant la même cible.

2) Votre site est parfaitement optimisé pour le référencement, alors, place au référencement !

Il n’y a pas de secret, il vous faut inscrire votre site dans la plupart des moteurs de recherche dont le célèbre Google. Vérifiez au préalable que votre site n’est pas déjà indexé, afin de ne pas soumettre un doublon.
Une petite liste non exaustive : Google, Yahoo, Lycos, Voila.fr, … Il y en a d’autres, mais, entre-nous, le plus important est d’être bien référencé sur le moteur Google qui a environ 90% de part de marché en France.
Le référencement sur les moteurs de recherche n’est pas pris en compte immédiatement, il faut en général un délais de quelques semaines pour que votre site soit effectivement dans les résultats des recherches. En attendant, pourquoi ne pas référencer votre site sur les annuaires ? Les annuaires sont des guides du web.
Il y a deux sortes d’annuaires : les généraux et les thématiques. Il vous faut donc vous inscrire sur les principaux généraux Yahoo, Dmoz, Voila.fr, …) et sur votre thématique (tapez « annuaire » et votre thématique sur google pour en trouver, exemple : « annuaire internet »)

Voilà, vous avez les clefs en main, maintenant à vous de jouer !!