Tutoriels du web

Points essentiels du developpement de sites

2007-08-12T11:57:00.000+02:00

Le design de votre site web est un des points importants de la promotion en ligne. Sans une bonne charte graphique, sans le respect d'un certain esthetisme, il n'est meme pas necessaire de passer votre temps a faire la promotion de votre site. Vous allez decouvrir, ci-dessous, une liste de choses a faire et a ne pas faire au niveau du design lors du developpement de votre site.

Votre site doit etre facile a lire

Cette premiere regle concernant la facilite de lecture de votre site est surement la plus importante de toutes. Qu'est ce que ca veut dire ? Et bien, vous devez choisir les couleurs de votre texte et de votre fond d'ecran d'une maniere judicieuse. Vous ne voulez surement pas utiliser un fond d'ecran obscurcissant votre texte ou bien prendre des couleurs difficile a lire pour votre texte ! Un texte de couleur fonce sur un fond d'ecran de couleur clair est beaucoup plus facile a lire qu'un texte de couleur clair sur un fond d'ecran fonce.

De meme, il faut faire attention et eviter d'avoir un texte ecrit beaucoup trop petit (ce qui est extremement dur a lire selon la police definie dans les preferences du navigateur) ou beaucoup trop gros (ce qui donne l'impression d'hurler a l'encontre des visiteurs). Un texte ecrit uniquement en majuscule est aussi a proscrire. Les majuscules peuvent etre utiles pour mettre en valeur un mot ici ou la mais surement pas pour ecrire une phrase et / ou un paragraphe complet.

Penser a aligner votre texte sur la gauche. Je sais, ca peut vous sembler evident, tellement evident mais c'est peut-etre pour ca qu'il existe certaines personnes qui ne le font pas ! Il est preferable d'aligner le texte de vos paragraphes sur la gauche voire de les justifier mais surtout de ne pas le centrer. Par contre, centrer vos titres ne pose aucun probleme.

Ces petits conseils sur la mise en page, la presentation de votre texte devraient permettre une meilleure lecture de celui-ci pour vos visiteurs.

Votre site doit etre facile a naviguer

Vos images, et plus particulierement vos boutons et vos bandeaux, doivent etre suffisamment explicites et lisibles. Votre graphiste se doit de selectionner les couleurs, les fonds d'ecran, les textures et tous les autres graphismes prudemment, judicieusement. Il est plus important d'avoir des boutons et des bandeaux lisibles que des effets graphiques qui "flashent" dans tous les sens.

Tous vos liens hypertextes doivent etre facilement identifiables par vos visiteurs. La couleur de vos liens dans votre texte doit etre suffisamment reconnaissable pour vos visiteurs (le texte bleu indique generalement un lien non visite alors que du texte poupre, marron indique un lien deja visite). Si vous decidez de ne pas utiliser les couleurs predefinies par defaut, vos liens hypertextes doivent etre mis en valeur d'une autre maniere (en caractere gras, avec une police un peu plus grande, mis entre crochets ou pourquoi pas, une combinaison de tout cela a la fois !). Vos liens doivent avoir une presentation, un style unique qu'il n'est pas possible de retrouver autrement dans votre site. Vous ne voulez pas, vous ne desirez quand meme pas que vos visiteurs cliquent sur les titres de votre page pensant trouver un lien a cet endroit !?

Une regle d'or sur Internet est que votre visiteur doit etre capable d'acceder a toutes les parties, a toutes les pages de votre site en trois clics au maximum. Je ne sais pas exactement d'ou vient cette regle, surement a partir de differents sondages effectues aupres d'internautes. Il est donc etabli qu'un visiteur ne trouvant pas en trois clics ce qu'il recherche, quitte le site pour aller voir ailleurs !

Votre site doit etre facile a trouver

A votre avis, comment vos visiteurs vous trouvent-ils ? La legende disant qu"une fois un site est construit, les visiteurs viendront" est profondement ancree aupres des entreprises et associations venant juste de rejoindre le milieu de l'Internet. Mais comme je l'ai dit au debut de ce paragraphe, ce n'est juste qu'une legende. Personne ne viendra sur votre site a moins d'en faire la promotion en ligne et hors ligne.

Pour la promotion en et hors ligne, je ne vais pas approfondir ces points a travers cet article, ce n'est pas l'objectif mais je vous invite a consulter les autres articles sur ce sujet disponible sur le site IDF.net. (http://www.idf.net/info/articles.html)

La promotion en ligne d'un site peut se faire a travers les moteurs de recherche, les repertoires / annuaires thematiques ou non, les sites delivrant des awards, l'echange de bannieres ou l'achat de bandeaux selon votre budget, les e-zines (magazines electroniques), l'echange de liens, etc. Si tous ces termes vous semblent vraiment incomprehensibles, il me semble indeniable que vous devez faire appel a un professionnel en marketing en ligne.

La promotion hors ligne d'un site se fait a travers des outils de promotion plus conventionnels comme les annonces dans les journaux, la radio, la television mais aussi par le bouche a oreille, etc, etc. Une fois que votre site est en ligne, pensez a modifier vos cartes de visite, votre papier a en-tete, vos enveloppes, factures, etc... Tout ce qui sort de chez vous doit avoir votre adresse URL inscrit dessus !

Votre site doit respecter une certaine harmonie

Une harmonie de couleurs, de formes et de presentations doit etre respectee a travers tout votre site. L'idee est la meme que lorsque vous effectuez un rapport avec un traitement de texte ou bien tout autre travail du meme genre sur papier (magazine, brochure, prospectus, etc), il est important de respecter une harmonie globale dans l'ensemble du document travaille. Cette harmonie doit se retrouver dans les images, la presentation, les titres, les hauts et bas de pages, etc. C'est exactement la meme chose pour votre site web. Une coherence dans le contenu de votre rapport ou dans les pages de votre site Internet permet de donner une image de professionnel a vos visiteurs.

Par exemple, si vous desirez donner un petit effet graphique a vos points (balles, boules ?!) en ajoutant un ombrage... Et bien, il va etre necessaire de rajouter cet ombrage a tous les points de votre site. De meme, la couleur, la forme de vos liens hypertextes doit etre la meme tout le long de votre site. Harmonie, coherence, voila ce qui aide a donner une image de professionnel !

Votre site doit repecter une certaine taille

Une page dans sa totalite ne doit pas depasser les 75 ko. Par totalite, ca comprend le html mais aussi les graphismes, les scripts inclus dans la page, les applets, les sons, etc. Ca semble tres dur mais pourtant, c'est faisable et beaucoup y arrive.

Les differentes etudes ont demontre qu'un visiteur perd rapidement de l'interet pour un site si la majeure partie de la page n'est pas chargee dans les 15 secondes. Les pages lourdes en graphismes d'artistes, peintres ou de photographes, par exemple, peuvent se trouver desavantagees mais dans ce cas-la, pensez a mettre une page d'introduction prevenant le visiteur de ce qui l'attend ensuite, ca evitera de perdre un visiteur et vous fera peut-etre meme gagner un client.

Qu'est-ce que je disais, deja ?! Meme les sites destines au grand public peuvent se retrouver menaces si cette regle n'est pas respectee.

Vous savez comment vous etes ?

Et bien, les autres visiteurs sont pareils. Un site qui met trop de temps a se charger ne necessite pas que l'on s'y attarde, il y a d'autres sites du meme genre un peu partout sur Internet et beaucoup plus rapide d'acces. La concurrence est rude.

Certains sites comme ceux de Microsoft ou Sun Microsystems sont tellement surcharges par le nombre de visiteurs que l'acces est tres tres lent. Pourtant, les visiteurs essayent et reessayent... Et ils attendent, pour certains, plusieurs minutes pour voir afficher une page. Mais la difference avec vous reside dans le nom, dans la marque et dans les produits. Il y a tout un ensemble de choses que vous ne possedez pas forcement et qui fait que les visiteurs sont prets a attendre de longues minutes avant de voir s'afficher une page.

Attention, je ne dis pas que les problemes d'acces a vos pages viennent uniquement de votre site, il y a beaucoup d'autres choses qui influent dessus et pour les connaitre, je vous invite a lire le second article, ci-dessous, qui fait parti de la serie sur "la connexion & l'hebergement".

Pour conclure

Lorsque vous developpez un site, il y a, je crois, une question evidente que vous devez vous posez et y repondre avant tout. Que recherchez-vous ?

Vous developpez ce site pour le plaisir, pour vous amuser.
Vous developpez ce site pour votre societe et pouvoir dire qu'elle est ainsi sur Internet.
Vous developpez ce site pour votre societe et tenez a transmettre une certaine image de celle-ci.
Vous developpez ce site pour votre societe dans l'objectif de vendre des produits ou services.

Ce sont ces differentes considerations qui doivent influencer la maniere dont vous faites ou vous faites faire votre site. Une societe serieuse ne fera pas developper son site par "le neveu du cousin de l'ami de la secretaire" et ne sera pas heberger en "pro.wanad**.fr" ou alors, ce n'est pas une societe avec les objectifs 3 et / ou 4.

A vous de voir ce que vous recherchez !
A propos de l'auteur :
Chris HEDE est le concepteur du site IDF.net et s'est specialise dans la promotion des sites Internet ainsi que les moteurs de recherche.
La Lettre - marketing & promotion - est un ezine gratuit en francais et bimensuel.

Supprimer la barre Blogger de votre blog

2007-08-11T16:33:00.000+02:00

Un petit truc pour supprimer la Barre Supérieur sur un blog "Blogger":
Dans votre tableau de bord, choisissez l'onglet "Modèle", puis "Modifier le code Html".

Dans le code qui s'affiche, repérez la balise "body {", et copiez collez le code ci-dessous juste avant cette balise :

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

body { ....

Cliquez sur "Enregistrer le modèle" et comme par magie la barre a disparu !!!!

Créez votre site en ligne gratuitement

2007-08-05T20:48:00.000+02:00

Avec weebly, vous pouvez créer votre site Internet en ligne, facilement, gratuitement et rapidement.

Vous pouvez choisir parmi de nombreux templates originaux (2, 3 colonnes) insérer du texte des images et photos (Flickr), des vidéos (Youtube, google), créer le nombre de pages que vous souhaitez et gérer tout cela grâce à un backoffice.

Si vous n'avez aucune connaissance en développement de sites Internet, ce site est fait pour vous.

http://www.weebly.com/

Superbes Menu CSS

2007-07-19T18:56:00.000+02:00

13Styles.com nous offre 11 très beaux menus CSS.

A garder dans ses favoris pour de futur sites Internet.

Via le blog de Bizet

Base de donnée facile avec SQL Designer

2007-07-08T16:13:00.000+02:00

J'ai découvert un outil original et ergonomique pour la conception de base de données.
Étant débutant dans ce milieu, j'ai trouvé cet utilitaire très efficace.

Il s'agit donc d'une application tout en Ajax, qui vous présente un simple espace de travail dans lequel vous créez des tables, faite des laisons entre elles etc....

A la fin vous pouvez exporter votre shéma relationnel sous différents format (XML, SQL ...)

Je vous laisse juger dans cette copie d'écran.

Le lien de la démo en ligne ici
Le site officiel où vous pouvez télécharger l'application ici

Hébergement gratuit et sans pub.

2007-07-08T10:24:00.000+02:00

Je viens de découvrir un nouvel hébergeur gratuit et sans pub, freehostingnow.com.

L'offre a l'air sérieuse :

- Utilisez votre propre nom de domaine ou un domaine en .freehostingnow.com
- 10 Go de stockage
- 10 Go de traffic
- Possibilité d'installer 20 applications différentes en 1 click
(tikiwiki, ZenCart, Nucleus, MyBB, cutenews, SMF, 4images, UseBB, coppermine, osCommerce, Mambo, wikiwig, gallery, bBlog, sBlog, MyLittleForum, Joomla, phpBB2, wordpress, Xoops)
- Editeur Wysiwyg
- Php/Mysql (PhpMyAdmin, MysqlManager)
- 3 Bases de données
- Gestionnaire de fichiers
- Accès Ftp
- Stats
- Sans pub

Que demander de plus.

Ca se passe donc ici : http://www.freehostingnow.com

Référencement : Suivre son positionnement sur Google

2007-06-24T12:13:00.000+02:00

Aujourd'hui j'aimerais vous présenter un script php très utile que j'utilise depuis + de 6mois.

Ce script développé par Nicolas Jean (Salemioche) s'intitule SMT pour Seo Mioche Tool .
Celui-ci vous permet de suivre le positionnement de vos sites Internet sur le moteur de recherche Google.

Programmé en Php et lié à une base Mysql, celui-ci permet de tester le référencement de votre site sur tous les DC (Datacenter) de Google en fonction des mots-clés que vous avez choisit.
(le programme vous donne une moyenne sur tous les DC Google)

Le programme stocke donc les informations dans une base Mysql pour garder un historique complet de vos requêtes et affiche l'évolution de votre référencement sous forme de tableau.

Le script permet de gérer autant de sites et de mots clés que vous le souhaitez.
Encore un grand merci au talentueux Nicolas Jean pour cet utilitaire fort utile.

Voici quelques Screenshots de l'application quelque peu modifiée par mes soins :

Envoyer un formulaire par email avec PHP

2007-06-24T11:58:00.000+02:00

Ce script permet de saisir et d'envoyer un formulaire, grâce à Php et la fonction mail().

Trop souvent sujet à problème pour les débutants, envoyer un formulaire par e-mail est une opération simple et rapide que tout développeur web se doit de connaître.
Donc voici comment réaliser cela simplement :

Tout d'abord créez un formulaire simple de la sorte dans votre page html (formulaire.html) :
Code à insérer entre les balises <body> et </body>

<form method="post" action="envoimail.php" name="formulaire">
Nom : <input name="nom" size="30" maxlength="50" type="text">

<br /><br />
Prénom : <input name="prenom" size="30" maxlength="50" type="text"><br /><br />

E-mail : <input name="mail" size="30" maxlength="50" type="text"><br /><br />

Commentaires :
<textarea name="commentaires" cols="30" rows="6" wrap="soft"></textarea><br /><br />

<input name="bouton" value="Envoyer" type="submit">

</form>

Nous avons donc un formulaire de 4 champs : "nom", "prenom", "mail", "commentaires", ainsi qu'un bouton "Envoyer" !

Vous remarquerez que dans la première ligne

<form method="post" action="envoimail.php" name="formulaire">

nous indiquons que après avoir appuyer sur "Envoyer" le contenu du formulaire ( donc les variables $nom, $prenom, $mail et $commentaires ) sera transmis à un fichier appelé "envoimail.php", que nous allons créer dès à présent :

Créer donc un fichier envoimail.php dans lequel vous allez entrer ce qui suit :

<?

// récuperation des variables provenant du formulaire

$nom = $_POST['nom'];
$prenom = $_POST['prenom'];
$mail = $_POST['mail'];
$commentaires= $_POST['commentaires'];

//E-mail auquel sera envoyé le formulaire
$destinataire = 'votre@email.fr';

//sujet du mail envoyé
$sujet = 'Sujet de l\'email qui vous sera envoyé';

//test pour vérifier que les champs sont bien tous remplis !!

if( !empty($nom) && !empty($prenom) && !empty($mail) && !empty($commentaires)){

// création du message, les \n permettent de faire un saut de ligne

$message = "Nom : $nom\n Prénom : $prenom\n E-mail : $mail\n Commentaires : $commentaires";

// On envoi le mail
if( mail($destinataire, $sujet, $message) )

// Si tout se passe bien on affiche un message de succès d'envoi

{ echo 'les informations on bien été envoyé!';

}

// Si on rencontre un problème de réseau (connection serveur etc...)

else{ echo 'une erreur est survenu lors de l\'envoi du message';

}

}

// Si tous les champs ne sont pas remplis

else{ echo 'merci de remplir tous les champs';

}

Enregistrez votre fichier envoimail.php.

Il ne vous reste plus qu'à uploader les deux fichiers "formulaire.html" et "envoimail.php" chez votre hébergeur (attention celui-ci doit prendre en compte le php et la fonction mail() bien-sûr ) et tester !!

Vous pouvez par la suite ajouter d'autres champs pour adapter le formulaire à vos besoins.

Bonne chance à tous !