De nombreuses conventions existent sur Internet, pas besoin d’être un développeur Web pour se flatter de les respecter. Il s’agit souvent de quelques petites règles à suivre qui rendent l’ensemble d’un site plus agréable à l’œil, plus facile à naviguer et d’aspect beaucoup plus professionnel!

Voici notre palmarès de 7 des plus importantes règles de mise en page.

1. Garder le soulignement seulement pour les hyperliens
2. Éviter la surcharge de la mise en forme
3. Aligner le texte une fois pour toute
4. Le gras, les majuscules, l’italique, quelle différence?
5. L’espace vide est aussi un caractère
6. La place des images
7. Les .gif animés

 

1.

Garder le soulignement pour les hyperliens

Nous sommes parfois tentés de souligner nos titres ou les éléments importants d’un texte. Cela est un reliquat du temps où c’était la seule manière de mettre certains mots en évidence lorsque l’on travaillait à l’aide des machines à écrire. Non seulement cet usage tombe en désuétude dans les documents imprimés, mais de plus, l’Internet s’est développé en utilisant le soulignement pour signifier une portion de texte cliquable (hyperlien), permettant de naviguer vers une autre page Web. En contrevenant à cette convention, vous risquez de frustrer les utilisateurs qui tenteront, sans succès, de cliquer sur le texte en question.

2.

Éviter la surcharge de la mise en forme

Lors du développement de vos maquettes et lors de la création de vos gabarits de page, Nmedia Solutions s’assure que le contraste du texte soit suffisant et programme l’affichage automatique de cette couleur dans vos pages.

Nmedia Solutions fixe également la taille du texte et la police de caractère.

Vous n’avez donc pas à les modifier dans Altitude, à moins de vouloir mettre certaines portions de texte en évidence. Dans ce cas, pertinence et parcimonie s’imposent.

Résistez à la tentation d’utiliser beaucoup de couleur, de gras, etc. : en appliquant plusieurs attributs différents et/ou en grande quantité dans une page, le texte devient difficile à lire (ou devient carrément agressant pour le lecteur); les éléments vraiment essentiels se noient dans la masse; et, encore pire, le site prend un aspect amateur et déglingué qui nuit à l’image, au sérieux et à la crédibilité de l’organisation.

Posez-vous comme question : « Est-il vraiment pertinent que je mette telle ou telle partie de texte en évidence? Est-ce absolument nécessaire par rapport au cœur du message qui est à véhiculer? Est-ce que ça va apporter quelque chose au lecteur? » Restreignez-vous.

Exemples d’utilisations pertinentes et ciblées de la couleur

• Un sous-titre : choisir une couleur assez foncée et faisant écho aux couleurs du design;
• Un chapeau de page : choisir une couleur plus tendre pour faire ressortir le texte sans ombrager le reste du contenu de la page;
• Une légende de photo : choisir une couleur plus terne (gris) qui laisse la lisibilité aux éléments plus importants et à la photo elle-même;
• Un avertissement : choisir une couleur chaude (rouge) pour faire en sorte que le lecteur se sente interpellé et qu’il sente une urgence ou un danger. N’en abusez pas, cela pouvant devenir très vite agressant (surtout le rouge).

Exemples d’utilisations du jeu sur la taille du texte

• Un sous-titre : choisir une taille de 14pt
• Un titre de 3e niveau : choisir une taille de 12pt et mettre en gras
• Une légende de photo : choisir une taille de 9pt

En fait, définissez-vous une « recette » pour chacun des niveaux de titres, et appliquez-la à tout votre site. Cette structure logique facilitera la lecture et conférera une meilleure crédibilité à votre site.

3. Aligner le texte une fois pour toutes

L’alignement dans le corps du texte doit être constant sur tout le site : toujours à gauche ou toujours justifié. Cet alignement de base est déterminé dans le gabarit, vous ne devriez donc pas avoir à le paramétrer sur chaque page.

Notez que, d’une part, l’usage de la justification – qui faisait presqu’office de loi depuis l’avènement du traitement de texte assisté par ordinateur – tend à tomber en désuétude. D’autre part, soyez conscient qu’à l’écran un texte justifié peut parfois avoir l’air lamentable à cause de trop grands espaces entre les mots.

Vous pouvez tout de même modifier l’alignement dans quelques cas précis.

Aligner au centre

Évitez de centrer de gros paragraphes de texte, cela rend la lecture très difficile. Le centrage est réservé aux colonnes de texte très courtes et étroites.

Exemples d’alignements au centre pertinents:

• Centrer une image avec son titre et sa légende
• Centrer les éléments d’une colonne d’un tableau de données
• Centrer le titre d’un tableau

Aligner à droite

L’alignement à droite est aussi utilisé de manière très parcimonieuse.

Exemples d’alignement à droite corrects :

• Liens « Pour en savoir plus », « Suivant », « Suite », etc., qui amènent le lecteur « plus loin »;
• Nombres et valeurs monétaires d’un tableau. Cela permet d’aligner les décimales;
• Nom de l’auteur d’une citation ou d’un texte;
• Paragraphe court lié à une image qui serait placée à droite dans la page;
• Éléments de certaines colonnes dans un tableau, lorsque c’est pertinent. Par exemple : la colonne de gauche d’un formulaire qui contiendrait les questions, ce qui rapproche ainsi les questions (colonne de gauche) de leurs réponses respectives (colonne de droite) et en facilite la lecture.

4. Le gras, les majuscules et l’italique

Le gras

Pour faire ressortir les mots clés les plus importants, qui vont guider le lecteur et l’aider à faire la synthèse des informations, on peut avoir recours au gras. Évitez cependant de mettre en gras de longs paragraphes, cela alourdit les pages sans faciliter la lecture. Le gras peut aussi être utilisé pour la hiérarchisation des titres.

Les majuscules

En ce qui concerne les majuscules, elles peuvent également être utilisées pour écrire des titres et attirer l’attention, mais elles deviendront très agressantes et illisibles sur de longs textes. Pensez également que, pour mettre de l’emphase, vous pouvez utiliser les signes de ponctuation (!, ..., ?).

L’italique

L’italique n’est pas une mise en forme de style, mais un formatage sémantique. Il ne doit pas servir à « faire beau » mais à refléter la nature des mots écrits. Voici une petite citation de chez Wikipédia expliquant l’utilité de l’italique dans la langue française :

« En typographie française l'italique est principalement employée pour les passages en langue étrangère — par rapport à la langue principale du texte —, aux citations de mots isolés, aux noms d'œuvres d'arts, aux notes de musique, aux mots et caractères autonymes (employés en tant que mots ou en tant que caractères : « le mot mot », « mettre les points sur les i »). Certaines parties du paratexte sont, selon les éditions, écrites en italique. »

http://fr.wikipedia.org/wiki/Italique

Pour plus de détails sur les règles d’usage de la typographie, nous vous invitons à consulter Le Ramat de la typographie par Aurel Ramat; ou encore Le français au bureau de l’Office de la langue française (Publications du Québec).

5.

L’espace vide est aussi un caractère

L’espace vide, dans l’imprimerie comme dans l’informatique, constitue un élément de typographie à part entière. Il faut lui donner la place qu’elle mérite.

N’ayez pas peur de faire de nombreux paragraphes pour bien délimiter les idées principales de vos textes. Faites des sauts de ligne manuels après des éléments de listes afin de bien distinguer les éléments. Lorsque vous utilisez des tableaux, mettez une marge interne d’au moins 3 pixels. Bref, laissez votre page respirer, elle n’en sera que plus agréable à visiter.

N’essayez pas à tout prix de remplir les vides avec des photos ou des dessins de moindre qualité. Les images que vous utilisez doivent servir à la communication en apportant de l’ambiance ou de l’information supplémentaire.

6.

La place des images

Puisqu’on parle des images, voici quelques petits trucs concernant leur positionnement dans les pages.

Positionnement d’image à gauche et à droite du texte

Pour positionner une image à droite ou à gauche du texte, insérez d’abord un tableau de deux colonnes, avec une marge interne. Positionnez votre curseur dans l’une des deux cellules, insérez votre image. Positionnez votre curseur dans l’autre cellule, insérez votre texte. Le tour est joué!

Positionnement de plusieurs images côte à côte

Pour positionner plusieurs images, créez un tableau de plusieurs colonnes. Positionnez votre curseur dans chacune des cellules pour y insérer les images.

Faites attention à quelques petits détails pour maximiser l’apparence de votre page :

• Assurez-vous que vos images ont la même ou sensiblement la même taille. Une grosse image à côté d’une toute petite génère un mauvais contraste.
• Regroupez les images selon leur grandeur ou leur format. Positionnez sur la même ligne les images de même format.
• Créez une symétrie dans l’organisation des photos. Si deux photos sont à dominance rouge, et qu’une est noire, on préfèrera mettre la noire au centre. Cette symétrie horizontale donnera un aspect balancé à la page.

7.

Les .gif animés

Il fut un temps où la capacité d’afficher des images sur Internet constituait une véritable révolution technologique et nous vîmes bientôt pulluler une multitude de petites animations visuelles très simples, des images de type « .gif animés ». L’engouement était total, chaque site en contenait son lot : petites enveloppes se cachetant et se postant d’elles-mêmes, oiseaux voletant, etc.

Sachez que ce type d’animation est maintenant généralement perçu comme très agaçant et ne s’utilise strictement plus dorénavant sur les sites de calibre professionnel.

Elles peuvent tout au plus parfois convenir à des sites destinés aux enfants ou à l’amusement en général....

 

---

En suivant ces quelques conseils, vous pourrez conserver l’unité et l’apparence professionnelle de votre site, en plus de rendre vos textes plus faciles à lire et à synthétiser.

Bon travail!

Sur Internet, pas de place pour la perte de temps : il faut être efficace. Le lecteur sait ce qu’il veut et il faut le lui donner avant qu’il ne passe au site suivant.

Les études des spécialistes d’Internet l’ont prouvé; les gens ne lisent pas sur le Web. Les gens survolent un texte à la recherche de mots-clés.ⁱ
Puisque la lecture sur un écran est 25% plus lente que sur du papier, l’internaute est beaucoup plus impatient.
Vous avez donc peu de marge de manœuvre pour retenir le client. Pour maximiser votre impact : votre texte doit être « balayable », concis, simple, neutre et sans fautes d’orthographe.

Voici quelques conseils pratiques et théoriques pour que vos textes respectent ces règles.

Un texte « balayable »

Un texte « balayable » est un texte d’où on peut sortir l’idée principale d’un simple balayage des yeux. Un des principaux procédés pour remplir cette qualité est l’écriture en pyramide inversée. La mise en page et la typographie peuvent aussi renforcer cet aspect du texte. 

La pyramide inversée

La pyramide inversée est un procédé d’écriture qui consiste à résumer d’abord l’idée principale du texte et ensuite à approfondir avec des arguments et des exemples.
On résume d’abord le texte sous forme d’un chapeau de page, ce qui permet au lecteur de déterminer si le contenu de la rubrique l’intéresse. Puis, on commence chacun des paragraphes par une phrase résumant son idée globale, ce qui permet au lecteur de parcourir le texte et d’en sortir les grandes lignes très rapidement.

L’internaute fera ensuite le choix de lire l’article plus attentivement ou de se contenter d’un survol. Plus on avance dans le texte, moins l’information est utile ou pertinente.

Autres éléments de structuration

• Table des matières – Pour un texte très long, commencez-le par une table des matières résumant les idées principales traitées et créez des liens vers chacune des parties principales du texte.
• Titres et intertitres – Abusez des titres et des intertitres. Choisissez des titres explicites qui collent le plus possible au sujet du contenu. Rappelez-vous que les internautes peuvent arriver sur votre site à partir de n’importe quelle page et qu’ils doivent être en mesure de situer le sujet traité d’entrée de jeu.
• Tableaux et listes à puces – Les tableaux et les listes à puces permettent de synthétiser en peu de mots une quantité importante d’informations. C’est un format facile à survoler qui donne de bons résultats dans les tests de rétention de l’information.

Éléments typographiques
• Gras, italique – Utilisez le gras et l’italique dans vos textes pour faire ressortir les mots clés et faciliter la synthèse.
• Boîtes de couleur – Même si certaines couleurs peuvent rendre plus ardue la lecture, une utilisation minutieuse d’un ton particulier peut permettre de faire ressortir des mots clés et d’isoler des éléments en fonction de leur importance.
• Hyperliens – En plus de donner de la crédibilité à vos textes, les hyperliens sont des méthodes efficaces de faire ressortir des noms de produits, de personnes ou de services dont vous parlez ailleurs sur votre site.

Un texte concis

Un texte concis, c’est un texte court et qui se lit rapidement. Comme la lecture est plus lente à l’écran, il faut, pour équivaloir la lecture papier, condenser la même information dans moins de mots.

Même s’il est difficile de s’en tenir à une règle très stricte au niveau des longueurs « acceptables » pour les éléments de contenu, on peut généralement se fier à ces quelques mesures :

Longueur « acceptables » pour les éléments de contenu

Page-écran	3 ou 4 paragraphes
Paragraphe	4 phrases
Phrase	20 mots
Éléments de liste	7 éléments
Titre de page	60 caractères
Hyperliens	3 ou 4 mots

 

Pour atteindre cette concision, il est primordial de cibler l’objectif du texte, de le diviser en idées principales et de s’en tenir à cette division. Chaque idée principale devrait être énoncée textuellement dans un paragraphe qui lui est propre.

La concision passe aussi par le fait d’être direct dans notre style d’écriture et d’éliminer tous les éléments inutiles qui n’apportent pas d’informations supplémentaires.

1. Éliminez les superlatifs, les adverbes et les entrées en matière inutiles tels que « très », « indubitablement » ou « visiblement », « vous vous doutez que », etc.;
2. Limitez l’utilisation d’incises et de périphrases qui ralentissent inutilement la lecture;
3. Chiffres et nombres – La langue française veut que l’on écrive textuellement certains nombres selon leur rôle et leur position dans une phrase. L’écriture sur le Web échappe à cette règle. Même si le nombre est en début de phrase, qu’il est inférieur à 100 ou qu’il est suivi par mille, dix mille ou million, écrivez-le en chiffres. Par contre, les très gros nombres (de l’ordre des milliards, des billions, des trillions, etc.) se lisent mieux lorsqu’ils sont écrits textuellement.

 

Un texte simple

Un texte simple, c’est un texte qui colle au langage de l’utilisateur.

1. Vocabulaire précis et neutre - Évitez les termes trop techniques et le jargon du métier lorsque des équivalents plus communs existent ou fournissez un glossaire des mots techniques.
2. Structures de phrases simples - Bannissez de votre style d’écriture les doubles négations ou les phrases qui traitent de plus d'une idée à la fois. Si vous faites lire un texte à un collègue et qu’il doit lire une phrase deux fois avant de la comprendre, reformulez-la ou scindez-la en deux phrases différentes.
3. Forme active - Utilisez des verbes et des structures actifs plutôt que passifs. (ex. : « La voiture a percuté le piéton à 2 heures. » plutôt que « Le piéton a été percuté par une voiture à 2 heures. »)

 

Un texte neutre

Un texte neutre est un texte objectif, dont le sujet n’est pas éclipsé par l’utilisation d’hyperbole servant à exprimer l’opinion de l’auteur. Les trucs pour garder un texte neutre sont similaires à  ceux pour être concis.

L’avantage supplémentaire que la neutralité du langage apporte, c’est d’éviter que le lecteur confronte mentalement son opinion à celle de l’auteur et soit ralenti dans sa lecture. Bien sûr, cela n’est vrai que pour les textes à caractère informatif et non pas pour les éditoriaux Web, les critiques de films ou les billets de « blogs ».

Un texte sans fautes

 

Les fautes d’orthographe et de syntaxe sont un important facteur de stress et ralentissent considérablement la lecture, à l’écran comme sur papier. On soigne parfois moins notre écriture sur Internet : c’est une grave erreur. Si on choisit d’être bref et de laisser notre poésie de côté, on ne se soustrait pas à l’obligation de soigner notre grammaire et notre orthographe. En plus d’accélérer la lecture (ce qui augmente la quantité d’information qu’il pourra lire pour un temps égal), cela donne une image professionnelle et crédible de l’entreprise et l’information contenu dans le texte.

Suggestion de lecture

Si vous désirez aller plus en détails sur le sujet, accéder à plus de statistiques sur les habitudes de lecture des internautes et sur l’efficacité marketing des différents styles d’écriture, n’hésitez pas à naviguer sur le Web qui compte des centaines de ressources pertinentes.

Notre répertoire personnel

Techniques pour l'accessibilité des contenus Web (http://www.la-grange.net/w3c/WAI-WEBCONTENT-TECHS/)
Writing for the Web (http://www.useit.com/papers/webwriting/)
La rédaction et la communication, dans la Banque de dépannage linguistique, Office québécois de la langue française (http://66.46.185.79/bdl/gabarit_bdl.asp?Th=1&Th_id=271&niveau=)
Guide d'Internet du Gouvernement du Canada (http://www.tbs-sct.gc.ca/ig-gi/i-mo/bs-cs/bs-cs2_f.asp#b06)

 

ⁱ How Users Read on the Web, http://www.useit.com/alertbox/9710a.html, Jakob Nielsen

Images : format .GIF ou .JPG?

 

.GIF et .JPG sont deux formats de compression complémentaires. Chacun a des avantages et des inconvénients. Le format .GIF offre des images de meilleures résolutions, tandis que le format .JPG permet des photos de meilleure qualité. Nmedia Solutions vous recommande d’utiliser un de ces deux formats pour les images. Cette rubrique vous permettra de mieux comprendre quel format est approprié à votre besoin.

 

Pourquoi ces formats?

Pour deux raisons : la compatibilité avec les autres utilisateurs et un format pratique.
Les photos doivent être compatibles avec le net pour qu’un maximum d’utilisateurs puisse les voir. Les formats .GIF et .JPG sont des formats universels. Tous les utilisateurs pourront les voir.
Il vous est probablement déjà arrivé, alors que vous naviguiez sur le net, que des photos prennent un temps énorme pour apparaître. Ces photos sont d’un poids très lourd : c’est-à-dire que la couleur, le motif et la taille (nombre de pixels) font en sorte que l’image possède beaucoup d’information à télécharger. Plus vos images sont claires et précises, plus elles seront lentes à télécharger. Les formats .GIF et .JPG sont des modes de compression qui permettent de diminuer le poids de l’image tout en gardant une qualité optimale.

Cependant, ces deux formats offrent des avantages différents.

.GIF

La conversion en .GIF convient aux images qui comptent peu de couleurs ou peu de nuances (pâle, foncé). Elle est idéale pour des logos, des formes plutôt simples aux couleurs unies, du texte que l'on tient à placer sous forme d'image. Le contour des formes est net et la typographie est facile à lire.

Le degré de compression en .GIF - donc le poids de l'image - dépend du nombre de couleurs utilisées pour "mémoriser" l'image. Le maximum que ce format permet d'utiliser est de 256 couleurs pour une image donnée. On peut compresser encore plus l'image (réduire son poids) en ne permettant l'enregistrement que de 128, 64, 32, 16, 8, 4, ou 2 couleurs. Chaque nuance (ton plus foncé ou plus pâle) compte pour une couleur, ce qui explique la difficulté de reproduire en .GIF des dégradés de couleurs.

Par exemple :

2 couleurs, 0,7 Ko	4 couleurs, 1,2 Ko	8 couleurs, 1,9 Ko	16 couleurs, 2,6 Ko
32 couleurs, 3,7 Ko	64 couleurs, 5,0 Ko	128 couleurs, 6,2 Ko	256 couleurs, 8,1 Ko

 

.JPG

La conversion en .JPG convient en général aux photographies pour sa capacité à mieux rendre une palette de couleur variée ou des formes variés et complexes. Les photos restent claires en format .JPG.

Le degré de compression d'une image en .JPG ne dépend pas du nombre de couleurs, mais plutôt du pourcentage de qualité (flou plus ou moins grand) que l'on désire obtenir: basse qualité, de 0 à 29 %; qualité moyenne, de 30 à 59 %; haute qualité, de 60 à 79 % et enfin qualité maximale, 80 à 100 %.

À retenir: pour obtenir un bon rapport qualité/poids dans le cas d'images destinées au Web, nul besoin de dépasser le 50 %. La taille des images étant souvent petite : la résolution de la plupart des écrans empêche l’œil de percevoir une différence.
Exemples :

Basse qualité (10%), poids : 2,6 Ko	Qualité moyenne (30%), poids : 4,0 Ko
Haute qualité (60%), poids : 8,6 Ko	Qualité maximale (80%), poids : 15,5 Ko

 

.GIF vs .JPG : l’ultime combat
Pour un logo, le format .JPG offre une qualité moindre qu’en format .GIF :

Format .JPG, qualité moyenne (30%), Poids: 3 Ko Observations: le trait sous Nmedia est verdâtre; le jaune du N stylisé n'est pas uniforme. Voyez les taches floues sur le contour. Et le poids reste malgré tout plus élevé que le .GIF ci-contre!	Format .GIF, nombre de couleurs utilisées : le nombre maximal dans ce cas, soit 33. Poids: 1,87 Ko Obvervations : le lettrage est clair, les contours sont précis, sans bavure, les couleurs uniformes.

Une photo en .GIF, avec un poids comparable avec le format .JPG, offre une piètre qualité:

.gif, 9,1 Ko : 16 couleurs	.jpg, 7,8 Ko : 50 %
.gif, 14,0 Ko : 16 couleurs	.jpg, 12,8 Ko : 50 %

  Tableau de comparaison

Le tableau suivant décrit les principaux types d'images et la compression recommandée pour chacun d'eux. Néanmoins, il y a toujours des zones grises. Certaines images se trouvent à mi-chemin, en quelque sorte, entre un type ou l'autre. Une seule solution : essayez!

Image à traiter	Type de compression recommandé
Logos	GIF
Images comportant du lettrage	GIF
Images ou dessins simples, comportant relativement peu de couleurs différentes et avec peu ou pas de nuances (pâle, foncé)	GIF
Photographies	JPG
Images ou photographies complexes avec énormément de détails et de couleurs, y compris des nuances ou variations de couleurs	JPG

Poids maximal des images pour le web

Une image pour une page Web ne devrait pas dépasser 15 Ko afin de diminuer son temps d'affichage.

Pour ce faire, publiez des images de la plus petite taille possible et compressez-les de façon la plus appropriée qui soit.

Idéalement, ne surchargez pas une seule page avec plusieurs images, surtout si vous dépassez les 15 Ko par image. Bien sûr, plus vos images sont petites et légères, plus vous pouvez vous permettre d'en utiliser un grand nombre. Notre recommandation: tentez de vous en tenir à un maximum de 45 Ko d'images par page.

Voici un petit aide mémoire des fonctionnalités les plus utilisées dans Urchin :
(cliquez sur l'image pour l'agrandir)

Pour transférer une fiche dans une autre sous-section :

- Ouvrir la fiche à partir de Structure et contenu
- Une fois dans la page d’édition de fiche, sélectionner l’onglet Emplacement
- Pour retirer la fiche de sa sous-section actuelle, décocher la case
- Pour ajouter la fiche à une/des sous-section(s) ou section(s) cocher les cases correspondantes (Une fiche peut se situer à plusieurs endroits à la fois)
- Enregistrer

Pour changer l'emplacement d'une sous-section :

- Cliquer sur le crayon à côté du nom de la sous-section dans Structure et contenu
- Une fois dans la page d’édition de sous-section, changer la section à laquelle la sous-section appartient à l'aide du menu déroulant "Section"
- Enregistrer

Pour changer une section de menu :

- Cliquer sur le crayon à côté du nom de la section dans Structure et contenu
- Une fois dans la page d’édition de section, changer le menu auquel la section appartient à l'aide du menu déroulant "Menu"
- Enregistrer

1. Éditer la page dans laquelle on désire faire le lien.
2. Sélectionner le texte qui doit contenir le lien de téléchargement.
3. Cliquer sur l'icône d'attachement (le trombone)
4. Dans la nouvelle fenêtre, faire "Parcourir" et sélectionner le fichier sur son poste.
5. Confirmer le téléchargement en faisant "upload." La fenêtre se ferme et le fichier est téléchargé sur le serveur. Cela peut prendre plus ou moins de temps selon le poids du fichier.

Vous désirez placer un formulaire à l’intérieur de votre site Internet afin que vos visiteurs le remplissent à même l’écran et que le tout vous soit transmis instantanément? Il n’est maintenant plus nécessaire d’avoir des notions en programmation pour ainsi créer son propre formulaire en ligne. Altitude^mc offre maintenant un outil simple et rapide vous permettant de monter et de diffuser vos formulaires sur mesure!

Vous pouvez utiliser les formulaires en ligne pour recueillir toutes sortes d’informations, qu’il s’agisse de commentaires, d’inscriptions à une activité ou à un colloque, ou d’une demande de soumission. Les informations sont collectées grâce à des champs dont vous déterminez tous les paramètres et sont ensuite acheminées par COURRIEL à une ou plusieurs adresses de votre choix.

Voici un petit cours intensif qui vous permettra de créer un formulaire en deux temps trois mouvements!

 

1. Partir du bon pied

Avant de monter le formulaire proprement dit dans Altitude, faites une liste brouillon des questions que vous voulez poser au visiteur. Déterminez la nature de chacun des champs en fonction de la réponse que vous attendez. Et, dans les cas de questions à choix de réponses, faites la liste des choix que vous allez offrir.

Nature ou « types » de champs qu’il est possible de mettre en place

 

Pour une question dont la réponse est courte	Champ texte court (ex. : nom, adresse, etc.)
Pour une question à développement	Champ texte multi ligne (ex. : commentaires)
Pour une question à 2 ou 3 choix de réponse, mais à réponse unique	Boutons radio (ex. : vrai ou faux, etc.)
Pour une question à plus de 3 choix de réponse, toujours à réponse unique	Liste déroulante (ex. : tranche d’âge, province, etc.)
Pour une question à choix de réponses multiples	Cases à cocher (ex. : domaines d’intérêts, choix d’ateliers, etc.)

 

Déterminez quels champs seront obligatoires à l’envoi du formulaire. On oblige généralement le visiteur à nous communiquer au moins son nom et son courriel, afin de pouvoir l’identifier et de le contacter; à moins qu’il ne s’agisse d’une demande de commentaires anonyme, par exemple. Une convention sur Internet dit que les champs obligatoires doivent être précédés d’un astérisque (*).

Donnez un titre à votre formulaire, déterminez la ou les adresses courriel auxquelles les réponses seront envoyées et choisissez le texte qui sera inscrit sur le bouton : on choisit en général un verbe d’action à l’infinitif, tel que : « Envoyer » ou « Soumettre. »

Par exemple:

Titre : Soumission d’un communiqué
Courriel de réception : soumission@journal.com et info@journal.com
Texte sur le bouton : Soumettre le communiqué

Texte de votre question	Choix de réponses données à l’internaute	Type de champ à créer
* Votre nom	(ne s’applique pas)	Texte court
* Appellation	[M.]  [Mme.]   [Mlle.]	Boutons radio
* Votre adresse courriel	(ne s’applique pas)	Champ texte avec validation de courriel
Votre numéro de téléphone	(ne s’applique pas)	Texte court
* Nature du texte	[Éditorial]  [Chronique]  [Nouvelles]  [Courrier des lecteurs]	Liste déroulante
* Votre texte	(ne s’applique pas)	Texte long
Je désire être avisé lors de la mise en ligne	[Par courriel]  [Par téléphone]	Cases à cocher

 

 

2. Préparer le terrain dans Altitude

Dans Altitude, créez d’abord la page où doit se trouver le formulaire. Maintenant que vous savez de quoi le formulaire aura l’air, vous pouvez préparer la page en conséquence.

Insérez d’abord un tableau. Ce tableau doit avoir 2 colonnes, une ligne pour chacune des questions et une ligne supplémentaire pour le bouton d’envoi. Fixez sa bordure à 0, afin qu’elle ne soit pas visible et sa marge intérieure à 3 pixels, afin d’éloigner les champs les uns des autres et de donner un aspect plus aéré à la page.

Dans la colonne de gauche, transcrivez les questions que vous avez formulées au point no. 1.

Vous devriez arriver à un résultat semblable à ceci:

 

 

3. Le nerf de la guerre: ajouter les champs dans Altitude

Il faut maintenant insérer les champs de formulaire aux bons endroits. Positionnez votre curseur dans la colonne de droite, vis-à-vis la première question. Ensuite, parmi la première série d’icônes en haut (main, trombone, etc.), cliquez sur le bouton «Formulaire» .

Dans la boîte de dialogue qui vient de s’ouvrir, choisissez le type de champ qui convient selon la question. Si vous doutez de la signification des icônes, positionnez votre curseur sur l’icône pendant quelques secondes pour voir apparaître son nom (info-bulle). Selon le type de champ que vous sélectionnerez, divers éléments à paramétrer s’offriront alors à vous.

Chacun des éléments comporte un paramètre nommé « Titre devant apparaître dans le courriel pour ce nouveau champ. » Il s’agit du texte qui accompagnera la réponse dans le courriel envoyé lors de la soumission du formulaire. Vous pouvez y inscrire une abréviation de la question, la question complète, la question avec des informations supplémentaires ou la question adaptée à la 3e personne. Par exemple : « Votre nom » deviendrait « Nom de l’auteur. » L’essentiel est que la personne à qui le formulaire-courriel sera acheminé soit en mesure de comprendre ce dont il est question.

Voici des détails sur le paramétrage ou certaines procédures spécifiques à chacun des éléments de formulaire :

Champ texte

1. Champs obligatoire : Si coché, rend obligatoire la saisie du champ

2. Champs de courriel : Si coché, rend obligatoire la saisie d’une adresse courriel valide

Champ texte multilignes

1. Nombre de colonnes : Largeur de la boîte. (plus ou moins 40)

2. Nombre de ligne : Hauteur de la boîte. (plus ou moins 5)

Listes déroulantes

1. Pour chacun des éléments à inclure dans la liste, saisir le texte de l’élément dans le champ « Ajouter cet élément » et peser sur « + »

2. Éditer, supprimer, ou ajouter des éléments au besoin

Boutons radio et cases à cocher

1. Insérer un bouton radio ou une case à cocher

2. Saisir le champ « valeur. » Cela correspond au texte qui sera envoyé par courriel si le répondant sélectionne ce choix de réponse.

3. Saisir le champ « Nom pour le nouveau groupe. »
   Un groupe de contrôle regroupe les choix de réponses rattachées à une même question et permet de faire le lien entre la question et la ou les réponses. Pour la question « Je désire être avisé lors de la mise en ligne » le nom de groupe pourrait par exemple être « avis » ou « mise_en_ligne ». (Évitez les espaces, les accents et les caractères spéciaux).
   Si vous avez déjà créé une option de réponse pour une question, le nom du groupe apparaît dans la liste déroulante à cet effet, et vous devriez directement le sélectionner à cet endroit plutôt que de le ressaisir.

4. Cliquer sur « Insérer ». La petite fenêtre se ferme et le bouton ou la case à cocher apparaît dans le tableau.

5. À droite de l’élément de formulaire, dans la même cellule du tableau, inscrire ce à quoi correspond ce choix de réponse.

6. Recommencer pour chacun des choix de réponses, en ayant soin de toujours sélectionner le même groupe de contrôle pour une question donnée.

Protection anti-spam

La protection anti-spam consiste en une série de lettres et de chiffres sous forme d'images que l'utilisateur doit reconnaître et saisir dans un champ texte. Cela permet d'éviter qu'un robot puisse remplir automatiquement le formulaire et ainsi l'utiliser pour envoyer de la publicité indésirable.

1. Cliquer simplement sur « Insérer ».

2. Inscrire une phrase explicative près de l'image. Par exemple: « S'il-vous-plaît, transcrire les caractères qui se trouvent dans l'image dans le champ texte qui suit. »

Bouton

1. Sujet du courriel : Correspond au sujet (titre) du courriel qui sera envoyé. Peut être le titre du formulaire, par exemple « Soumission d’un communiqué. »

2. Liste des adresses : Taper la liste des adresses courriel auxquelles les réponses du formulaire seront envoyées.

3. Texte à afficher sur le bouton : Correspond à un verbe d’action. Dans notre cas, « Soumettre le communiqué ».

4. Envoyer CSV : En plus d’envoyer les réponses inscrites par courriel, cette option permet aussi d’enregistrer les réponses sous forme de fichier .CSV (Comma Separated Value) attaché au courriel. Cela peut permettre d’importer les réponses plus rapidement dans un tableur comme Excel.

Le bouton est essentiel au formulaire, ne l’oubliez surtout pas!

 

 

 

 

 

 

4. Fignolage

Le formulaire est maintenant complet. Il ne reste qu’à le tester.

Sur votre site Web, remplissez le formulaire et soumettez-le. Vérifiez la boîte de courriel à laquelle le formulaire est censé être envoyé : assurez-vous qu’il y soit bien entré. Si vous ne l’avez pas reçu, c’est peut-être parce que vous avez fait une erreur dans l’inscription de l’adresse d’envoi lorsque vous avez créé le bouton. Dans Altitude, dans le formulaire en question, positionnez votre curseur sur l’élément de bouton, et cliquez de nouveau sur «Formulaire».

Vous pourrez alors vérifier les paramètres précédemment entrés et les modifier au besoin.

Si vous avez reçu le courriel, assurez-vous qu’il soit lisible et que toutes les informations nécessaires à interpréter les réponses soient présentes. Si ce n’est pas le cas, éditez les paramètres des champs qui manquent de clarté en affinant les « titres dans le courriel » et les « valeurs » des cases à cocher et des boutons-radio.

Maintenant que tout fonctionne, vous pouvez également améliorer l’aspect graphique du formulaire. Vous pouvez faire varier la largeur des champs en fonction de la valeur qui y sera inscrite. Par exemple, le champ de courriel sera plus large que le champ de nom, et celui de code postal plus court.

Pour plus de clarté,  faites alterner les couleurs de fond des lignes du tableau en modifiant les propriétés des cellules. Dans la colonne de gauche (les questions), vous pouvez aligner le texte à droite.  Au besoin, ajoutez des commentaires sur la nature des réponses que vous désirez. Si votre formulaire est long, séparez-le en plusieurs parties, avec des sous-titres.

5. Résultat du formulaire

Vous pouvez nous transmettre votre communiqué à travers ce formulaire. Selon votre désire, nous vous contacterons avant la mise en ligne. Merci!

* Votre nom

* Appellation

M.Mme.Mlle.

* Votre adresse courriel

Votre numéro de téléphone

* Nature du texte

Courrier des lecteurs

* Votre texte

Je désire être avisé
lors de la mise en ligne

Par téléphone Par courriel

S'il-vous-plaît, transcrire les caractères qui se trouvent dans l'image dans le champ
texte qui suit.

Pour plusieurs, l’arrivée d’applications Web dans le monde merveilleux d’Internet peut sembler récente, mais il en existe depuis une dizaine d’années. En effet, l’application Web de messagerie électronique Hotmail de Microsoft en est un bel exemple. Mais au fond, qu’est-ce qu’une application Web? Pourquoi les spécialistes du Web en disent-ils autant de bien? Quelle valeur ajoutée une application Web peut-elle apporter à une organisation comme la mienne?

Description

Contrairement à un logiciel traditionnel, qui a été acheté puis configuré sur un ou des postes de travail, une application Web n’est pas installée à proprement parler dans l’ordinateur des utilisateurs. Elle se retrouve plutôt sur un serveur dont la communication est rendue possible pour les utilisateurs. Ainsi donc, on ne retrouvera pas d’applications Web sur les tablettes des magasins. Elles sont plutôt développées sur mesure par des concepteurs Web en fonction des besoins spécifiques d’un client donné.

Par exemple, une application Web pourrait servir à gérer les commandes d’une entreprise, à suivre l’évolution des livraisons d’un transporteur, à instaurer un système de contrôle de l’inventaire d’un commerce de détail, à mettre sur pied un tableau de présence des employés, etc. En fait, les possibilités de ces solutions d’affaires électroniques sont infinies.

Avantages

Les avantages de l’application Web sont nombreux, à commencer par son accessibilité. En effet, on peut l’utiliser à partir de n’importe quel poste de travail. Tout ce qu’il faut, c’est une connexion Internet et un fureteur Web (Explorer, Firefox, Safari, etc.), celui-ci devenant l’interface de navigation.

Généralement, c’est le site Web de l’organisation qui sert de «porte d’entrée» à l’application Web. Une section sécurisée est ainsi créée, section à partir de laquelle les utilisateurs doivent inscrire leur nom d’usager et leur mot de passe pour accéder aux fonctionnalités de l’application Web.

Autre avantage, les accès peuvent être différents d’un utilisateur à l’autre. Ainsi, des modules supplémentaires peuvent être visibles uniquement au personnel administratif, par exemple.

Contrairement au logiciel traditionnel, qui doit être installé sur le poste de travail pour être utilisé, l’application Web est flexible et permet la consultation des données ici comme ailleurs. Qui plus est, les mises à jour sont réalisées automatiquement, sans que l’utilisateur ait à intervenir. Il en découle des gains de productivité (temps, coûts, énergie) indéniables.

Du point de vue de la sécurité des données, une application Web ne cesse pas de fonctionner si le disque dur du poste de travail éprouve des problèmes : elle n’y est pas installée. Il n’y a donc rien à craindre quant à la perte de données. Une application Web est plutôt hébergée sur un serveur grande capacité qui réalise quotidiennement des copies de sauvegarde. Ainsi, advenant le cas d’une mauvaise manipulation par un utilisateur, les précieuses données peuvent être récupérées en un rien de temps.

Et Nmedia solutions dans tout ça?

Au cours des dernières années, Nmedia solutions s’est spécialisée dans le développement d’applications Web sur mesure en raison de leur fort potentiel et de l’intérêt manifeste du monde des affaires. Pour y arriver, il fallait toutefois compter sur une équipe d’experts à l’avant-garde des nouvelles tendances de programmations, le fer de lance de la PME technologique drummondvilloise.

En effet, comme chaque mandat est unique, le degré de complexité technique varie constamment. Nmedia solutions est donc fière de compter sur une équipe jeune, dynamique et clairement en avance sur son temps : elle repousse constamment les limites en réalisant des percées technologiques notables.