tag:blogger.com,1999:blog-44103626774143601772024-03-14T05:34:42.300-04:00ProWeb BlogueLes "best of" de ProWebFrançoishttp://www.blogger.com/profile/05006268460185064582noreply@blogger.comBlogger31125tag:blogger.com,1999:blog-4410362677414360177.post-4450192577275935692016-03-04T11:16:00.002-05:002016-04-15T13:14:11.523-04:00Fatigué de payer pour faire modifier le contenu de votre site Web? <script>
window.location = "http://www.proweb.ca/blogue-details/fatigue-de-payer-pour-faire-modifier-le-contenu-de-votre-site-web";
</script>
<a href="http://3.bp.blogspot.com/-fFpJ394YkSA/VtmxTdUufUI/AAAAAAAAAPg/MY_uPjuvHtI/s1600/gerer-son-site.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://3.bp.blogspot.com/-fFpJ394YkSA/VtmxTdUufUI/AAAAAAAAAPg/MY_uPjuvHtI/s1600/gerer-son-site.png" /></a>Vous avez un site Web et payez pour le faire mettre à jour régulièrement? Vous dépensez ainsi un certain montant pour l’entretien de celui-ci par un webmestre? Peut-être serait-il temps d’envisager l’installation d’un <a href="http://www.proweb.ca/gestionnaire-contenu.aspx" target="_blank">gestionnaire de contenu (CMS)</a>.<br />
<br />
<h2>
<b>Un CMS, qu’est-ce que c’est?</b></h2>
Un CMS <i>(content management system en Anglais)</i> et SGC <i>(système de gestion de contenu en Français)</i>, est un outil vous permettant de mettre à jour vous-même le contenu se trouvant sur votre site Web. Vous accédez à ce gestionnaire de contenu avec un nom d’utilisateur et un mot de passe. Par la suite, vous pouvez modifier certaines sections contenues dans votre site internet.<br />
<br />
<h2>
<b>Un gestionnaire de contenu… pour gérer quoi?</b></h2>
On peut gérer son contenu, c’est-à-dire qu’on peut gérer certaines pages dont le contenu est amené à changer ou tout simplement l’ensemble du site.<br />
Le gestionnaire de contenu sur mesure est développé pour gérer des sections spécifiques de votre site Web (ou la totalité) selon vos besoins spécifiques. Bien entendu, plus vous gérez de sections, plus les coûts de programmation seront élevées au départ.<br />
Les gestionnaires de contenu pré faits quant-à-eux peuvent gérer l’ensemble de votre site Web. Vous n’utilisez que les fonctionnalités qui vous intéressent.<br />
<br />
<h2>
<b>Un site Web dynamique, est-ce pour mon entreprise? </b></h2>
<b>C’est pour mon entreprise si :</b><br />
<br />
<ul>
<li>Je modifie mon contenu aux 2 mois ou moins</li>
<li>J’ai fréquemment du nouveau contenu à mettre sur mon site (articles, nouvelles, produits, réalisations, etc…)</li>
<li>J’ai du temps ou des ressources à l’interne pour m’en occuper</li>
<li>La personne dédiée à la gestion de mon contenu est à l’aise sur le Web</li>
<li>J’ai un certain budget à investir sur le court terme</li>
<li>Ce n’est pas pour mon entreprise si :</li>
<li>Je n’ai pas de temps ou de ressources à y consacrer</li>
<li>Je n’ai pas de budget à court terme</li>
<li>Mon contenu reste le même durant plusieurs mois</li>
</ul>
<br />
<br />
<h2>
<b>Avantages et inconvénients du CMS</b></h2>
<b>Les avantages</b><br />
<br />
<ul>
<li>Économisez sur le moyen-long terme</li>
<li>Soyez autonome</li>
<li>Mettez votre site à jour plus souvent</li>
<li>Aidez à votre référencement en ajoutant du nouveau contenu</li>
<li>Déléguez à l’interne</li>
</ul>
<br />
<b>Les inconvénients</b><br />
<br />
<ul>
<li>Investissement de base requis pour la mise en place</li>
<li>Il faut du temps pour s’en occuper</li>
<li>Attention à la mise en page et l’uniformité</li>
</ul>
<br />
<br />
<h2>
<b>Les types de CMS</b></h2>
<b>Les systèmes de gestion de contenu existants</b><br />
Ces logiciels existent déjà et vous proposent une solution déjà programmée.<br />
<br />
<b>Les avantages</b><br />
<br />
<ul>
<li>Flexibilité</li>
<li>Une panoplie de modules existants</li>
</ul>
<br />
<b>Les inconvénients</b><br />
<br />
<ul>
<li>Complexe à utiliser</li>
<li>Plusieurs fonctionnalités dont vous n’aurez peut-être pas besoin</li>
</ul>
<br />
<b>Voici les principaux CMS</b><br />
<br />
<ul>
<li>Wordpress</li>
<li>Joomla</li>
<li>Drupal</li>
</ul>
<br />
<br />
<a href="http://www.proweb.ca/gestionnaire-contenu.aspx" target="_blank"><b>Le Système de gestion de contenu programmé sur mesure</b></a><br />
Informez-vous auprès d’un expert chez <a href="http://www.proweb.ca/nous-joindre.aspx" target="_blank">ProWeb</a><br />
<b><br /></b>
<b>Les avantages</b><br />
<br />
<ul>
<li>Interface allégée</li>
<li>Simple d’utilisation</li>
<li>Développement sur mesure</li>
<li>Courbe d’apprentissage plus rapide (formation sur mesure)</li>
<li>Vous avez les modules dont vous avez besoin seulement</li>
</ul>
<br />
<b>Les inconvénients</b><br />
<br />
<ul>
<li>Délais possible pour la programmation de modules spécifiques</li>
</ul>
<br />
<b>Voici des cas fréquents d’utilisation d’un module de gestion :</b><br />
<br />
<ul>
<li>Nouvelles ou actualités : <br />Pour informer vos clients à propos de votre entreprise</li>
</ul>
<br />
<ul>
<li>Produits :<br />Vous permet de vendre vos produits en ligne, d’ajouter vos nouveaux produits, de les mettre actif ou inactif, de supprimer ceux que vous ne vendez plus, de mettre à jour les prix, les photos, les caractéristiques, etc.</li>
</ul>
<br />
<ul>
<li>Services :<br />Pour expliquer vos services et démontrer à vos clients potentiels les avantages de les utiliser.</li>
</ul>
<br />
<ul>
<li>Page d’équipe (si votre personnel change souvent) :<br />Pour donner un aspect humain à votre entreprise.</li>
</ul>
<br />
<ul>
<li>FAQ (pour ajouter de nouvelles questions/réponses) :<br />Restez à l’affût des questions demandées régulièrement à votre service à la clientèle. En les mettant à jour sur le site, vous sauverez du temps.</li>
</ul>
<br />
<ul>
<li>Carrière : <br />Pour ajouter des offres d’emplois</li>
</ul>
<br />
<ul>
<li>Réalisations : <br />Pour montrer votre savoir-faire et l’évolution de votre entreprise</li>
</ul>
<br />
<ul>
<li>Événements :<br />Pour ajouter de nouveaux événements</li>
</ul>
<br />
<ul>
<li>Promotions et concours :<br />Pour inciter les gens à acheter chez vous</li>
</ul>
<br />
<ul>
<li>Album photo :<br />Pour gérer vos photos et albums.</li>
</ul>Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-42812995534642842472015-03-30T09:24:00.000-04:002016-04-15T13:16:34.858-04:0013 Astuces pour magasiner un site Web<script>
window.location = "http://www.proweb.ca/blogue-details/13-astuces-pour-magasiner-un-site-web";
</script>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-UIUJ4Lq9Gjk/VRlLmakPaDI/AAAAAAAAAPA/4Qo8QNsyqHY/s1600/13-astuces-pour-magasiner-un-site-Web.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-UIUJ4Lq9Gjk/VRlLmakPaDI/AAAAAAAAAPA/4Qo8QNsyqHY/s1600/13-astuces-pour-magasiner-un-site-Web.png" /></a></div>
<b>#1 Vos fichiers vous appartiennent-ils?</b><br />
Il est important de s’assurer que vous serez propriétaire de votre site Internet.<br />
<br />
En effet, si vous voulez déménager votre site ou utiliser vos fichiers sources, assurez-vous de pouvoir le faire et au besoin, vérifiez si un coût s’y rattachera.<br />
<br />
<b>#2 Qui sera propriétaire du Nom de Domaine?</b><br />
Cette question peut vous surprendre, mais si l’Agence Web réserve votre nom de domaine (DNS), la réserve-t-elle à votre nom ou à son nom? Vous pourriez vous retrouver sans votre nom de domaine si vous n’êtes pas le propriétaire légal.<br />
<br />
<b>#3 Votre visuel et votre code proviennent-ils d’un template?</b><br />
Plusieurs compagnies utilisent des templates achetés sur Internet. Certains les modifient, d’autres non. D’autres compagnies font un design personnalisé pour chaque client.<br />
<br />
Un design personnalisé a pour avantage de créer une image unique à votre compagnie. Méfiez-vous des templates, surtout ceux repris intégralement, un compétiteur pourrait se retrouver avec un site similaire au votre!<br />
<br />
<b>#4 Quels sont les délais de production?</b><br />
Il est pertinent de poser cette question, surtout si vous prévoyez faire un lancement ou utiliser votre URL sur vos publicités. Vous ne voudriez pas que vos clients tombent sur une page vide.<br />
<br />
<b>#5 Est-ce que l’achat de photos est inclus, si non, quel est le prix de celui-ci?</b><br />
Les sites Web contiennent généralement plusieurs photos, vérifiez bien si votre soumission contient un budget photo. Si elles ne sont pas incluses, vérifiez le coût de celles-ci.<br />
<br />
<b>#6 Votre site contient-il un code de suivi statistique?</b><br />
En bon gestionnaire, vous voudrez connaître le trafic que votre site Web reçoit. Vous voudrez aussi analyser le comportement des Internautes de votre site Web, pour ainsi savoir si votre site remplit bien son mandat initial. Pour ce faire, l’installation d’un code tel que celui de Google Analytics vous sera utile.<br />
<br />
Vous pourrez connaître la quantité de visiteurs sur votre site pour une période donnée, connaître le taux de rebond qui permet de savoir si les gens explorent votre site ou s’ils s’en vont tout de suite, vérifier si vos publicités dans les médias traditionnels ont un impact sur les visites de votre site, etc.<br />
<br />
<b>#7 Quels sont les frais récurrents ?</b><br />
Des dépenses sont à prévoir pour héberger votre site Web sur un serveur, de même que pour réserver votre nom de domaine (DNS) ou URL (par exemple pour réserver <a href="http://www.proweb.ca/">www.proweb.ca</a> dans le cas de notre compagnie).<br />
<br />
Ces frais sont récurrents, généralement au mois pour l’hébergement et à l’année pour les DNS.<br />
<br />
Attention aux prix tout inclus! Certaines compagnies vous offre un site à un prix plus bas, mais ce prix est annuel, vous pourriez donc perdre de l’argent sur le moyen/long terme.<br />
<br />
<b>#8 Votre site comprends-t-il une version mobile ou est-il adaptatif? </b><br />
Les sites adaptatifs s’ajustent à vos écrans, ils seront donc compatibles sur tous les appareils, par contre ce type de site est souvent plus coûteux, car ils nécessitent beaucoup plus de travail.<br />
Si votre site est standard, comprend-t-il une version mobile?<br />
<br />
<b>#9 Avec quels Navigateurs sera-t-il compatible?</b><br />
La compatibilité avec les différents navigateurs ainsi que leurs différentes versions est un élément à vérifier. Particulièrement si le public cible de votre site est susceptible d’utiliser des navigateurs moins récents.<br />
<br />
<b>#10 Le référencement est-il inclus?</b><br />
Le référencement est un incontournable de nos jours, si votre site est difficile à trouver sur les moteurs de recherche, cela affectera grandement son utilité. Assurez-vous que le référencement sera planifié avant la conception de votre site pour qu’il performe bien et que des suivis seront mis en place pour en vérifier l’efficacité. Un référencement non inclus pourrait vous générer des coûts supplémentaires.<br />
<br />
<b>#11 Comment fonctionneront les mises à jour?</b><br />
Est-ce que votre site comporte un module de gestion? Si oui, votre site coûtera plus cher sur le coup, mais vous récupérerez votre argent sur le long terme. Ces sites dits « dynamiques » sont idéals lorsque vous devez faire des mises à jour fréquentes.<br />
<br />
Si votre site est statique, vous devrez contacter votre Agence Web pour en faire la mise à jour. Informez-vous du mode de facturation et des tarifs pour de telles mises à jour. Généralement un site statique convient à la plupart des gens. Si vous prévoyez mettre votre site à jour une ou deux fois par année, le site statique sera beaucoup moins onéreux que le dynamique.<br />
<br />
<b>#12 Les textes, la rédaction, la correction et la traduction</b><br />
Informez-vous à savoir qui fournit les textes, qui fait la correction, rédaction ou la traduction et s’il y a des frais supplémentaires à ce niveau.<br />
<br />
<b>#13 Les technologies utilisées sont-elles à jour?</b><br />
Assurez-vous que les technologies que vous utiliserez sont à jour, car le domaine du Web change très rapidement et vous voudrez que les technologies utilisées pour créer votre site Internet ne soit pas désuètes.<br />
<br />
<b>EN BREF</b><br />
Vérifiez ce que comprends votre soumission<br />
<br />
<ol>
<li>Êtes-vous propriétaire de votre site et de votre DNS</li>
<li>Template ou sur mesure</li>
<li>Délais de production</li>
<li>Achats d’images</li>
<li>Accès aux statistiques (Google Analytics)</li>
<li>Hébergement</li>
<li>Version mobile / Design adaptatif / Site standard</li>
<li>Compatibilité des navigateurs</li>
<li>Référencement et suivis</li>
<li>Statique ou dynamique (module de gestion)</li>
<li>Rédaction, correction, traduction</li>
</ol>
<br />
<div>
<br /></div>Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-41843529365369933722014-11-25T10:43:00.002-05:002016-04-15T13:17:00.545-04:0010 éléments que vous devez absolument avoir sur votre site Web<script>
window.location = "http://www.proweb.ca/blogue-details/10-elements-que-vous-devez-absolument-avoir-sur-votre-site-web";
</script>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-aNJ7indi0Z0/VHSilupf9zI/AAAAAAAAAOg/lIW6TWxxvgA/s1600/10-elements-que-vous-devez-avoir-sur-votre-site-web.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-aNJ7indi0Z0/VHSilupf9zI/AAAAAAAAAOg/lIW6TWxxvgA/s1600/10-elements-que-vous-devez-avoir-sur-votre-site-web.png" /></a></div>
<h2>
</h2>
<b>Un suivi de vos statistiques</b><br />
Il est primordial d’avoir accès aux statistiques de votre site Web. Ces statistiques vous permettent de savoir si votre site Web performe bien et de connaitre les retombés de vos publicités en ligne ou hors ligne. Par exemple, vous pouvez faire une campagne journal et voir si les gens consultent votre site Web par la suite.<br />
<br />
Vous pouvez en apprendre plus sur vos visiteurs ; leur provenance (ville, province, pays…), la durée de leurs visites, quelles pages ils consultent, votre taux de rebond (si les gens trouvent votre site pertinent ou s’ils le quittent rapidement), etc.<br />
<div>
<br />
<b>
Vos médias sociaux</b><br />
Vous avez des médias sociaux? Vous devez les afficher sur votre site Web et ainsi inciter vos visiteurs à les consulter.<br />
<br />
Vous pouvez inclure des boutons J’aime (Facebook), +1 (Google), des boutons de partage et même des boites dans lesquels on retrouve le contenu de votre média social. La « Like Box » de Facebook ou votre dernier Tweet sont des exemples évocateurs de ce concept.</div>
<div>
<br /></div>
<div>
<b>
Un titre de page pertinent</b><br />
Le titre de votre page est un élément important pour le référencement dans les moteurs de recherche. Vous voudrez qu’il soit assez court, qu’il contienne le nom de votre compagnie ainsi que votre mot clé le plus important.</div>
<div>
<br /></div>
<div>
<b>
Les nouvelles de votre entreprise</b><br />
Mettre de l’avant les nouvelles de votre entreprise permet d’informer vos visiteurs sur ce qui se passe dans votre compagnie. Elle a aussi une double utilité, elle rend votre page plus vivante, c’est-à-dire que du nouveau contenu y est ajouté de façon régulière, ce qui a une incidence sur votre référencement et sur la perception de vos visiteurs. <br />
<br />
Certains sites comportent un module de nouvelles et d’autres optent de plus en plus pour une « Like Box » (voir la section « Vos médias sociaux ») pour faire office de module de nouvelles.</div>
<div>
<br />
<b>
Un bouton d’appel à l’action</b><br />
Un visiteur arrive sur votre page et la consulte. Si vous pouvez attirer son attention sur un bouton incitatif et lui suggérer une action à poser, vous profiterez pleinement du potentiel de votre site.<br />
<br />
Vous pouvez par exemple inscrire : Appelez-nous, téléchargez notre brochure, consultez nos promos, etc… Utilisez l’impératif lorsque vous rédigez votre appel à l’action.</div>
<div>
<br />
<b>
Vos promotions</b><br />
Quoi de plus efficace qu’une promotion sur l’accueil de votre site! Les mots GRATUIT, LIQUIDATION, 70% de RABAIS attirent l’attention de votre visiteur. Accrochez-le tout de suite et convertissez-le en acheteur.</div>
<div>
<br /></div>
<div>
<b>
Un formulaire d’abonnement à votre infolettre</b><br />
Celui-ci se doit d’être très court. Les gens n’aiment pas remplir un long formulaire, le courriel ou le courriel et le nom suffisent souvent. Si les gens s’abonnent à votre infolettre, cela voudra dire qu’ils sont intéressés par votre compagnie ou vos produits. Attention toutefois à respecter les règlements de la loi C-28.</div>
<div>
<br />
<b>
Des images accrocheuses</b><br />
Le visuel de votre site Web est important, c’est pourquoi il ne faut pas le négliger. Vous aurez intérêt à soigner celle-ci et à vous arrêter pour décider de l’image à projeter (amical, chic, sérieux, jeune, dynamique, sobre, créatif…)<br />
<br />
Agrémenter aussi votre page avec des visuels accrocheurs. Une bande d’images défilantes est un bon moyen de présenter votre information en créant un impact chez votre audience.</div>
<div>
<br />
<b>
Votre logo</b><br />
Cela va de soit me direz-vous… et vous avez raison. Il se doit d’être visible et de se démarquer. L’endroit idéal est de le placer en haut à gauche de votre site. Un lien vers l’accueil de votre site doit être présent. Attention toutefois à ne pas le rendre agressant en le mettant beaucoup trop gros, il doit se démarquer tout en laissant de la place à votre contenu.</div>
<div>
<br />
<b>
Un menu clair</b><br />
Vous devez guider l’internaute dans votre site de façon à ce qu’il trouve rapidement l’information désirée. La patience n’est malheureusement pas la norme sur le Web, il est donc utile de faire tester votre site par divers usagers et de respecter la règle des 3 clics : l’information doit être accessible en 3 clics maximum. Une section « plan du site » peut aussi aider l’Internaute à se repérer au besoin.<br />
<br />
<br />
<br />
<b>Astuce : </b>si votre site comporte plusieurs niveaux, un fil d’Ariane est un bon moyen d’aider l’utilisateur à naviguer sur celui-ci. Voici un exemple fictif à quoi cela peut ressembler : Proweb > Services Web > Conception de site Web > Microsite Web.</div>
<div>
<br /></div>
<div>
<div class="MsoNormal" style="text-align: justify;">
Liens : <o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify;">
Loi C-28 <a href="http://combattrelepourriel.gc.ca/eic/site/030.nsf/fra/accueil">http://combattrelepourriel.gc.ca/eic/site/030.nsf/fra/accueil</a><o:p></o:p></div>
</div>Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-51490594842413685082014-10-09T15:29:00.000-04:002016-04-15T13:17:21.763-04:007 signes que votre site Web est passé date!<script>
window.location = "http://www.proweb.ca/blogue-details/7-signes-que-votre-site-web-est-passe-date";
</script>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-kcoQJb0P41o/VDbgX1rjnvI/AAAAAAAAAOA/OJjgMyx9r38/s1600/7signes.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-kcoQJb0P41o/VDbgX1rjnvI/AAAAAAAAAOA/OJjgMyx9r38/s1600/7signes.jpg" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Il n’est pas toujours facile de porter un regard critique
sur soi-même ou sur nos actions marketing. Souvent, on croit à tort qu’un site
Web n’a pas besoin de modifications et qu’il est bon pour une dizaine d’années
sans problème. Comment savoir s’il est temps de donner une cure de rajeunissement
à votre site Web? Quel facteur doit influencer une refonte? Eh bien, tentons
d’éclaircir tout cela : <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<h4>
1 : Votre site n’est pas responsive</h4>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
Respons… quoi? Le responsive design est lorsque votre site Web
s’adapte à n’importe quel format d’écran. Les cellulaires, les tablettes font
maintenant partis de notre mode de vie moderne et votre site Web se doit d’être
adapté à tous ces nouveaux supports.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<h4>
2 : De la difficulté à mettre vos informations à jour.</h4>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
Au fil des années, vous avez ajouté de nouvelles sections,
de nouvelles pages, une centaine de nouvelles réalisations, les prix que vous
avez gagnés, les logos de vos nouveaux partenaires d’affaires, les icônes de
vos nombreux médias sociaux… Votre site ressemble maintenant à une grosse pizza
pêle-mêle d’informations? Vous craignez les mises à jour et vous vous demandez,
où vais-je bien pouvoir mettre ça sur mon site? Voici les signes majeurs qu’il
est grand temps de faire un bon gros ménage dans tout ça!<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<h4>
3 : Les gugusses qui ne servent à rien!</h4>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
Il y a un compteur de trafic dans le bas de chaque page de
votre site? Un petit .gif animé qui dit bonjour en arrivant? Un tas de liens
qui sont brisés ou qui n’arrivent pas aux bons endroits? Les choses qui ne
servent à rien nuisent à la visibilité et à la navigation sur votre site Web.
Si un internaute ne trouve pas ce qu’il veut, parce qu’il est ralenti par trop
de choses inutiles, soyez assuré qu’il ne reviendra plus jamais sur votre site.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<h4>
4 : C’est leeeeeennnnt!</h4>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
Quoi de plus désagréable que d’arriver sur un site où chaque
page prend 5 minutes à se télécharger? C’est le problème de votre site Web? Il
est fort probable que vous perdiez énormément de visiteurs et que cela augmente
drastiquement votre taux de rebond.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<h4>
5 : Tout est dans le look!</h4>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
Votre site Web a-t-il visuellement l’air vieux? Si vous
regardez les sites Web de vos compétiteurs, trouvez-vous que votre site Web
tire sérieusement de l’arrière? Si votre site web date des années 1990 et qu’il
n’y a eu aucun changement depuis, les gens pourront même croire que votre
entreprise n’existe plus. Cela vous donne une image pas du tout à jour! Un site Web
est une vitrine de votre entreprise. Entreriez-vous acheter des vêtements dans
une boutique dont les vêtements de la vitrine sont complètement passés mode? <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<h4>
6 : Vos statistiques sont mauvaises : </h4>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
Votre taux de visite est quasi nul et le taux de rebond est
alarmant? Cela est un bon indicateur afin de comprendre qu’il y a quelque chose qui cloche avec votre site Web. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<h4>
7 : Vous perdez du temps!</h4>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
C’est le dixième client de la journée qui vous appelle, car
il n’a pas trouvé l’information recherchée sur votre site Web? On vous écrit
des tonnes de courriels de demande d’informations? Votre site Web semble
incomplet et certaine section ne sont carrément pas à jour? Pensez à tout ce
que vous pourriez accomplir au lieu de répéter une centaine de fois par jour
telle ou telle information à vos clients. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
Et alors? Votre site Web correspond à un ou plusieurs points
énumérés? Pas de panique! L’équipe de ProWeb est là afin de vous épauler! Que
vous ayez besoin d’une petite correction, d’une refonte ou carrément d’un site
flambant neuf, il nous fera plaisir de vous aider et de vous guider vers les
bons choix pour votre entreprise.<o:p></o:p></div>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-68237203570013532502014-08-27T13:23:00.000-04:002016-04-15T13:17:47.849-04:00Mélanger vie personnelle et vie professionnelle sur Facebook, un mélange dangereux!<script>
window.location = "http://www.proweb.ca/blogue-details/melanger-vie-personnelle-et-professionnelle-sur-facebook-un-melange-dangereux";
</script>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://1.bp.blogspot.com/-kq_kL3M4bHI/U_4Tfr_Xb2I/AAAAAAAAAIs/n0Qj0aPyKnU/s1600/facebook-personnelle.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-kq_kL3M4bHI/U_4Tfr_Xb2I/AAAAAAAAAIs/n0Qj0aPyKnU/s1600/facebook-personnelle.jpg" /></a></div>
<div class="MsoNormal" style="line-height: 150%;">
<br /></div>
<div class="MsoNormal" style="line-height: 150%;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
J’ai récemment fait une recherche
sur Facebook pour une entreprise qu’on m’avait recommandée. J’ai cherché mais
je n’ai pas trouvé de site Web, seulement une page entreprise sur Facebook. Déjà
là, ce n’était pas bon signe! En affichant la page, je me suis retrouvée face à
des photos personnelles et à des vidéos de chats; il n’y avait que les heures
d’ouverture et le numéro de téléphone qui étaient pertinents. Il est évident
qu’il est important pour les entreprises d’avoir une présence en ligne mais encore
faut-il que celle-ci démontre le professionnalisme de l’entreprise!<o:p></o:p></div>
<div class="MsoNormal" style="line-height: 150%;">
<br /></div>
<div class="MsoNormal" style="line-height: 150%;">
Facebook vous oblige à avoir un
profil personnel afin de gérer une page entreprise. Comme l’un ne va pas sans
l’autre, il faut que vous fassiez une distinction entre les deux; tout ce qui
est personnel (photos d’enfants, vidéo d’animaux, publication sur votre humeur
du moment, etc.) va sur votre profil privé et tout ce qui touche votre
entreprise (promotion, nouveautés, ventes, etc.) va sur votre page entreprise. Votre
réputation en ligne est fragile. Ceci
est d’autant plus vrai depuis que le bouche à oreille réel a été remplacé par
le bouche à oreille virtuel. L’information
voyage désormais beaucoup plus rapidement. Pensez seulement à ce qui est arrivé
à ce propriétaire d’hôtel de la ville de Québec qui a reçu des commentaires à
l’effet qu’il y avait des puces de lit chez lui alors que ce n’était pas vrai.
Vous ne voudriez pas que votre entreprise souffre parce que vous n’utilisez pas
les outils mis à votre disposition de la bonne façon. De l’autre côté de la
médaille, avoir un profil personnel et commenter sur votre page entreprise avec
celui-ci, ajoute de la crédibilité à votre commerce puisqu’en agissant ainsi,
vous démontrez que vos clients sont traités de manière personnalisée.<o:p></o:p></div>
<div class="MsoNormal" style="line-height: 150%;">
<br /></div>
<div class="MsoNormal" style="line-height: 150%;">
Malgré cette démarcation entre vos
deux profils, il peut être intéressant, dans certains cas, de partager des
informations personnelles afin de vous rapprocher de votre clientèle. Si vous
êtes impliqués au niveau sportif ou encore si vous parrainez une OSBL, faites
le savoir à vos clients. L’implication sociale, c’est toujours payant. Il
existe des dizaines de façon de traiter une page Facebook. Par exemple, vous
pourriez souhaiter prendre un tournant amical sur votre page en partageant
les réalisations et succès personnels de vos employés (avec leur consentement)
ou encore, vous pourriez partager des photos de vos activités sociales. Tout
est une question d’équilibre. D’ailleurs, ProWeb offre des formations
personnalisées afin de vous montrer comment utiliser les médias sociaux.<o:p></o:p></div>
<div class="MsoNormal" style="line-height: 150%;">
<br /></div>
<div class="MsoNormal" style="line-height: 150%;">
Deuxièmement, comme vos profils
sont liés, vous devez porter attention à ce que vous publiez et partagez sur votre profil personnel
car il est dorénavant très facile de faire le pont entre vous et votre
entreprise. Les politiques de confidentialité de Facebook changent plusieurs
fois par année et ce que vous publiez sur votre profil personnel pourrait être
vu par vos clients. Ou encore, vous pourriez oublier de changer de profil et
publiez quelque chose de compromettant. Soyez intelligents et utilisez votre
profil personnel avec jugement. Vous le savez, les sujets chauds comme la
politique ou la religion ne devraient jamais être évoqués dans un milieu
professionnel.<o:p></o:p></div>
<div class="MsoNormal" style="line-height: 150%;">
<br /></div>
<div class="MsoNormal" style="line-height: 150%;">
En conclusion, vos profils
personnels et professionnels devraient être gérés différemment et séparément. Donnez un aspect professionnel à votre profil d’entreprise, vérifiez vos
paramètres de sécurité (particulièrement sur votre profil personnel) et
finalement, ne publiez rien que vous ne seriez prêt à rendre public.</div>
<div>
<div>
<div class="msocomtxt" id="_com_2" language="JavaScript">
<!--[if !supportAnnotations]--></div>
<!--[endif]--></div>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-74740420917717532692014-06-10T09:42:00.000-04:002016-04-15T13:18:07.733-04:00Les astuces de Pro!<script>
window.location = "http://www.proweb.ca/blogue-details/les-astuces-de-pro";
</script>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-wrZMZCFlLac/U5cIAWve7nI/AAAAAAAAALs/CWGdszjSo8U/s1600/astucesdepro.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-wrZMZCFlLac/U5cIAWve7nI/AAAAAAAAALs/CWGdszjSo8U/s1600/astucesdepro.jpg" /></a></div>
<div class="MsoNormal">
<b><span style="font-size: 12.0pt; line-height: 107%;"><br /></span></b></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Voici quelques conseils faciles à mettre en pratique pour
votre entreprise afin de devenir de vrai professionnel du Web. Ben oui, chez ProWeb
on est gentil de même! <span style="font-family: Wingdings; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-char-type: symbol; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-symbol-font-family: Wingdings;">J</span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Des adresses
professionnelles : <o:p></o:p></b></div>
<div class="MsoNormal">
Une adresse courriel <a href="mailto:machin_chouette0987@hotmail.com"><span style="color: orange;">machin_chouette0987@hotmail.com</span></a>....
Difficile de vous prendre au sérieux, n’est-ce pas? Et sur Facebook :<span style="color: orange;"> <span style="background: white; font-family: 'Trebuchet MS', sans-serif; font-size: 10pt; line-height: 107%;">http://www.facebook.com/pages/Madame_chose/139432919455014x3lhyj</span></span><span style="background: white; color: #63565f; font-family: "Trebuchet MS","sans-serif"; font-size: 10.0pt; line-height: 107%;"> </span><span style="background: white;">encore moins avouez-le!
Difficile à retenir en plus! Il est très facile de se créer une adresse de
messagerie ou un Url de page Facebook personnalisé. En cas de doute, n’hésitez
pas à nous contacter. Il nous fera plaisir de vous aider!<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><span style="background: white;">Les téléphones intelligents : <o:p></o:p></span></b></div>
<div class="MsoNormal">
<span style="background: white;">Les mobiles sont en train de
changer le visage et l’utilisation du web. Afin de ne pas être mis </span><span style="background: rgb(249, 249, 249); font-family: Arial, sans-serif; font-size: 9pt; line-height: 107%;">« </span><span style="background: white;">hors-jeux</span><span style="background: rgb(249, 249, 249); font-family: Arial, sans-serif; font-size: 9pt; line-height: 107%;"> »</span><span style="background: white;"> par
vos compétiteurs ou tout simplement ignoré par vos clients potentiels, il est
primordial d’optimiser votre site web afin qu’il s’affiche parfaitement sur tous
ces nouveaux gadgets. N’attendez plus, osez le </span><span style="background: rgb(249, 249, 249); font-family: Arial, sans-serif; font-size: 9pt; line-height: 107%;">« </span><span style="background: white;">Responsive Design </span><span style="background: rgb(249, 249, 249); font-family: Arial, sans-serif; font-size: 9pt; line-height: 107%;">»</span><span style="background: white;">! <o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><span style="background: white;">Notre ami Google : <o:p></o:p></span></b></div>
<div class="MsoNormal">
<span style="background: white;">Je vous présente votre
nouveau mot préféré : référencement! On ne vous dira pas de mensonge, un
site web qui n’est pas dans les premières pages des moteurs de recherche va
être fort probablement délaissé par les internautes. Il est très rare d’aller
jusqu’à la page 57 pour trouver un site web. <o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><span style="background: white;">Une image vaut milles mots : <o:p></o:p></span></b></div>
<div class="MsoNormal">
<span style="background: white;">Sur le web, les internautes
sont pressés et ils veulent leurs informations le plus rapidement possible. En
moyenne, une personne lira seulement 28% du contenu de votre site. Quoi de
mieux pour leur faire comprendre en un instant votre produit ou votre service?
Des photos!<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><span style="background: white;">Les médias sociaux : <o:p></o:p></span></b></div>
<div class="MsoNormal">
<span style="background: white;">Vous avez sûrement déjà
compris l’importance d’être sur les médias sociaux. (Bravo!) Il est donc très
important de mettre une icône de ceux-ci sur votre site web. Et inversement, il
est primordial d’afficher l’adresse de votre site web sur vos médias sociaux.</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><span style="background: white;">Être à jour : <o:p></o:p></span></b></div>
<div class="MsoNormal">
Voulez-vous vraiment que les gens voient que la dernière
fois que vous avez écrit dans la section <span style="background: rgb(249, 249, 249); font-family: Arial, sans-serif; font-size: 9pt; line-height: 107%;">«
</span>nouvelles <span style="background: rgb(249, 249, 249); font-family: Arial, sans-serif; font-size: 9pt; line-height: 107%;">»</span> de votre site web
est en 2006? Même chose pour vos médias sociaux, ne les laissez pas prendre la
poussière. Aucun client n’aura envie de vous poser une question ou de faire <span style="background: rgb(249, 249, 249); font-family: Arial, sans-serif; font-size: 9pt; line-height: 107%;">« </span>J’aime <span style="background: rgb(249, 249, 249); font-family: Arial, sans-serif; font-size: 9pt; line-height: 107%;">»</span>
sur votre page Facebook si la dernière fois que vous y avez écrit un message
est en janvier 2011. En plus de vous donner une image passée date, cela envoie
un message très négatif de votre entreprise. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Ne pas attendre les
bras croisés : <o:p></o:p></b></div>
<div class="MsoNormal">
Votre site est flambant neuf? Votre page Facebook aussi?
Vous attendez impatiemment des visiteurs et de nouveaux <span style="background: rgb(249, 249, 249); font-family: Arial, sans-serif; font-size: 9pt; line-height: 107%;">« </span>J’aime <span style="background: rgb(249, 249, 249); font-family: Arial, sans-serif; font-size: 9pt; line-height: 107%;">»</span>? N’attentez pas la venue d’un miracle, car il
n’arrivera pas. Soyez proactif! Pourquoi
ne pas en profiter pour faire une petite cure de rajeunissement à votre
papeterie et d’y inscrire l’adresse de votre site Web? Ou encore, promouvoir
vos publications sur Facebook, faire un concours ou pourquoi pas vous offrir une campagne
publicitaire. Foncez! Votre imagination n’a pas de limite!<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
ProWeb peut vous appuyer dans toutes vos démarches afin
d’améliorer votre site web et votre présence sur les médias sociaux. Nous
sommes là afin de vous épauler et à concrétiser votre vision. N’hésitez pas à
nous contacter! info@proweb.ca<o:p></o:p></div>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-54974134657919082562014-05-23T08:58:00.000-04:002016-04-15T13:18:31.390-04:00Projet de site Web : les intervenants.<script>
window.location = "http://www.proweb.ca/blogue-details/projet-de-site-web-les-intervenants";
</script>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-01ZkVgS6occ/U39FsEVIfCI/AAAAAAAAAN4/Kbd_uiQFaaI/s1600/les-intervenants.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-01ZkVgS6occ/U39FsEVIfCI/AAAAAAAAAN4/Kbd_uiQFaaI/s1600/les-intervenants.jpg" /></a></div>
<div class="MsoNormal">
<span style="font-size: 9pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<span style="font-size: 9pt; line-height: 115%;">Un projet de
conception de site Web bien géré compte sur l’expertise de plusieurs personnes :
chaque intervenant est qualifié pour une tâche particulière.</span></div>
<div class="MsoNormal">
<span style="font-size: 9pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<b><span style="font-size: 9.0pt; line-height: 115%;">Le gestionnaire de projet :<o:p></o:p></span></b></div>
<div class="MsoNormal">
<span style="font-size: 9.0pt; line-height: 115%;">Cette
personne vous rencontre pour en apprendre plus sur votre entreprise et sur
votre projet de site Web. Elle cerne vos besoins et créée une soumission personnalisée.
Elle vous écoute et vous propose des solutions qui s’adaptent bien à vos
besoins.<o:p></o:p></span></div>
<div class="MsoNormal">
<b><span style="font-size: 9.0pt; line-height: 115%;"><br /></span></b></div>
<div class="MsoNormal">
<b><span style="font-size: 9.0pt; line-height: 115%;">Le graphiste :<o:p></o:p></span></b></div>
<div class="MsoNormal">
<span style="font-size: 9.0pt; line-height: 115%;">Il créé un
visuel selon les spécifications que vous et le gestionnaire de projet lui avez
soumis. Il laisse donc aller sa créativité pour créer une ébauche unique qui
représentera bien l’image de votre entreprise. Il pourra alors créer une
maquette d’allure professionnelle, sobre, jeune, dynamique ou épurée selon vos
besoins. Il utilise parfois les banques d’images, particulièrement pour les
entreprises n’ayant pas les moyens de faire affaire avec un bon photographe.<o:p></o:p></span></div>
<div class="MsoNormal">
<b><span style="font-size: 9.0pt; line-height: 115%;"><br /></span></b></div>
<div class="MsoNormal">
<b><span style="font-size: 9.0pt; line-height: 115%;">Le photographe : <o:p></o:p></span></b></div>
<div class="MsoNormal">
<span style="font-size: 9.0pt; line-height: 115%;">Selon vos
directives ou ceux du chargé de projet, il se peut que votre site comporte des
photos. Que ce soit des photos de vos équipements, de votre lieu de travail ou
de vos employés, la touche artistique et professionnelle d’un bon photographe
fait toute la différence. Elle donne un côté humain à votre entreprise.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-size: 9.0pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<span style="font-size: 9.0pt; line-height: 115%;"><b>L’intégrateur :<o:p></o:p></b></span></div>
<div class="MsoNormal">
<span style="font-size: 9.0pt; line-height: 115%;">Lorsque le
visuel est approuvé, c’est lui qui s’occupe de transférer cette image en page
Web proprement dit. Il utilise le langage HTML et les CSS (feuille de style)
pour assembler le visuel fourni par le graphiste. Il s’occupe de rendre votre
page Web fonctionnelle sur les principaux navigateurs Internet.<o:p></o:p></span></div>
<div class="MsoNormal">
<b><span style="font-size: 9.0pt; line-height: 115%;"><br /></span></b></div>
<div class="MsoNormal">
<b><span style="font-size: 9.0pt; line-height: 115%;">Le programmeur Web :<o:p></o:p></span></b></div>
<div class="MsoNormal">
<span style="font-size: 9.0pt; line-height: 115%;">Son travail
consiste à programmer les différents modules de votre site Web. Il vise à
mettre en place un code propre et de qualité et s’assure de la sécurité de
votre site Web. Pour illustrer son travail, un formulaire sera conçu par le
graphiste, intégré en HTML par l’intégrateur et ensuite, programmé par le
programmeur. Sans lui, vous cliqueriez sur un formulaire qui ne ferait rien. Le
programmeur s’assure de la qualité des informations. Par exemple, il vérifiera
que les informations requises dans un formulaire ont bien été entrées avant
d’envoyer celui-ci et que votre numéro de téléphone, par exemple, contient bien
9 chiffres. Il s’occupe aussi de mettre en place votre module de gestion pour
vous permettre de mettre votre site Web à jour vous-même.<o:p></o:p></span></div>
<div class="MsoNormal">
<b><span style="font-size: 9.0pt; line-height: 115%;"><br /></span></b></div>
<div class="MsoNormal">
<b><span style="font-size: 9.0pt; line-height: 115%;">Le rédacteur :<o:p></o:p></span></b></div>
<div class="MsoNormal">
<span style="font-size: 9.0pt; line-height: 115%;">Il concocte
pour vous (au besoin) des textes pertinents, professionnels, percutants ou
explicatifs qui seront intégrés à votre site Web. Ce contenu doit être intéressant
et en général assez court; les internautes n’aimant pas lire de longs textes.
Les textes ainsi rédigés seront révisé plus tard par le spécialiste en
référencement pour s’assurer d’un bon impact vis-à-vis de l’indexation par les
moteurs de recherche.<o:p></o:p></span></div>
<div class="MsoNormal">
<b><span style="font-size: 9.0pt; line-height: 115%;"><br /></span></b></div>
<div class="MsoNormal">
<b><span style="font-size: 9.0pt; line-height: 115%;">Le spécialiste en référencement :<o:p></o:p></span></b></div>
<br />
<div class="MsoNormal">
<span style="font-size: 9.0pt; line-height: 115%;">Il s’occupe
de vérifier le code et les textes de votre site Web pour en optimiser
l’indexation par les moteurs de recherche (le plus connu étant Google). Il définira
des titres, des mots clés et des descriptions pertinentes et soumettra votre
site aux moteurs de recherches. Il fera le suivi par la suite pour s’assurer
que votre site Web est facilement trouvable par vous et vos clients.<sub><o:p></o:p></sub></span></div>Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-75282772189746643622014-03-10T11:05:00.000-04:002016-04-15T13:19:00.184-04:00La rédaction web<script>
window.location = "http://www.proweb.ca/blogue-details/la-redaction-web";
</script>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-dHZMf9v8U7k/Ux3RkMSpAhI/AAAAAAAAAJY/GylgGorj5Jg/s1600/r%25C3%25A9daction.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-dHZMf9v8U7k/Ux3RkMSpAhI/AAAAAAAAAJY/GylgGorj5Jg/s1600/r%25C3%25A9daction.jpg" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Même si vous avez le plus beau site du monde, à la fine
pointe de la technologie, aux couleurs hyper tendance et à l’ergonomie fantasmagorique,
mais que vous avez un texte nébuleux et peu attrayant, vous risquez de passer à
côté de votre objectif. Afin de mieux vous guider dans cette discipline ardue,
voici quelques trucs pour faire éclore l’écrivain en vous : <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>La connaissance de
votre public cible<o:p></o:p></b></div>
<div class="MsoNormal">
Qui est votre clientèle? Des enfants? Des gens d’affaire?
Des touristes? Le ton que vous utiliserez est primordial, voire crucial à votre
réussite. On ne s’adresse pas de la même façon à un individu si on souhaite lui
vendre des bonbons ou une Mercedes. Par exemple, si vous êtes une institution
financière, un ton plus formel est de mise pour représenter votre sérieux,
donner confiance et démontrer votre professionnalisme. Au contraire, si vous
êtes une entreprise qui offre des services de fêtes pour enfants, un ton plus
amical et joyeux vous rendra tout de suite plus sympathique et attrayant. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Le blabla un peu trop
technique<o:p></o:p></b></div>
<div class="MsoNormal">
Oui, vous êtes un brillant expert et tout le monde le sait.
Mais faites attention à ne pas parsemer votre texte de jargon technique
incompréhensible. Les grands mots savants intéressent rarement les gens qui
sont sur le web. Personne n’a envie de lire votre site web avec un dictionnaire
pour tenter de comprendre votre contenu. Le site du compétiteur deviendra tout
à coup beaucoup plus attrayant. En un mot : vulgariser! Rendez votre
contenu accessible à tous!<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>On fait ça court
s.v.p!<o:p></o:p></b></div>
<div class="MsoNormal">
Qui a le temps de lire un texte de la longueur d’une bible
sur le web? Personne! Les internautes veulent du rapide. Soyez clair, net et
précis. Allez droit au but et composez de petits paragraphes courts. Focusez
sur vos points importants et vous en sortirez grand gagnant!<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Les fameuses listes à
puces<o:p></o:p></b></div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: 53.25pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]-->c’est beaucoup plus précis,<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 53.25pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]-->lisible,<o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="margin-left: 53.25pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]-->et cela clarifie le contenu!<o:p></o:p></div>
<div class="MsoNormal" style="margin-left: 35.25pt;">
<br /></div>
<div class="MsoNormal">
<b>Les mots-clés <o:p></o:p></b></div>
<div class="MsoNormal">
Ha oui! Le référencement! C’est déjà un pas dans la bonne
voie. Quand on parle de rédaction web, il est normal de mettre souvent les mots rédaction web dans son texte. Car mettre souvent les mots rédaction web vous aidera à mieux sortir
dans les moteurs de recherche si quelqu’un recherche les mots : rédaction web.
Mais attention de ne pas abuser! Car écrire trop souvent les mots rédaction web
rend le texte lourd et moins intéressant à lire pour l’internaute.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Les vilaines fautes
d’ortografe!<o:p></o:p></b></div>
<div class="MsoNormal">
À moins d’être une sommité de la langue française ou que
votre emploi consiste à rédiger Le Larousse, nous vous suggérons fortement de
faire faire une relecture ou une correction par un professionnel. Une belle
grosse faute de frappe ou une erreur d’orthographe disgracieuse pourrait faire
fuir vos clients. C’est si simple et souvent peu onéreux. Pourquoi vouloir
jouer avec le feu?<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
Parler de soi et de son entreprise est souvent ardu : nous
ne savons pas par quel bout commencer et cela nous semble être une tâche
insurmontable. Si la composition de texte pour votre site web vous semble
inconcevable, n’hésitez pas à confier cette mission à des gens compétents. Il
est très facile de trouver un service de rédaction professionnelle dans votre
région. ProWeb offre ce service et nous serions très heureux de vous aider dans
l’écriture de vos textes. N’hésitez pas à nous faire part de vos projets, il
nous fera toujours plaisir d’être l’artisan de votre réussite.<o:p></o:p></div>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-41186823310203158342014-03-03T15:31:00.001-05:002016-04-15T13:19:23.375-04:00Qu’est-ce que le design émotionnel?<script>
window.location = "http://www.proweb.ca/blogue-details/qu-est-ce-que-le-design-emotionnel";
</script>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-GPiKD_h7Z-Q/UxTkd3BUf2I/AAAAAAAAAI4/aTDHNUdkBsA/s1600/designemotionnel.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-GPiKD_h7Z-Q/UxTkd3BUf2I/AAAAAAAAAI4/aTDHNUdkBsA/s1600/designemotionnel.jpg" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<h4>
</h4>
<h4>
<span style="font-size: 12.0pt; line-height: 115%;">Design émotionnel
= communiquer une émotion!</span></h4>
<div>
<span style="font-size: 12.0pt; line-height: 115%;"><br /></span></div>
</div>
<div class="MsoNormal">
Le but premier d’un site web est tout d’abord de transmettre
de l’information. Un site web doit être fonctionnel, lisible et fiable. Sans
ces trois mots clés, il ne fonctionnera pas de façon optimale voire
pas du tout. Cependant, la technique ne fait pas tout, le design est aussi très important. Lors de sa visite sur un site web, l’internaute doit
vivre une expérience! Le site web doit avoir sa propre personnalité et dégager un sentiment familier et agréable. Le design émotionnel sert donc à
créer une proximité, de l’empathie voire même un lien d’amitié envers un site
web. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<h4>
<span style="font-size: 12.0pt; line-height: 115%;">Comment
mettre du design émotionnel dans un site web?</span></h4>
<div>
<span style="font-size: 12.0pt; line-height: 115%;"><br /></span></div>
</div>
<div class="MsoNormal">
Mettre de l’émotion dans un site web n’est pas une tâche insurmontable.
Rendre un site agréable, original et amical passe souvent par les détails
graphiques ou fonctionnels. Voici quelques exemples :<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Une mascotte : <o:p></o:p></b></div>
<div class="MsoNormal">
<b><br /></b></div>
<div class="MsoNormal">
Mailchimp, Bitly, Twitter et bien d’autres utilisent une
mascotte sympathique pour nous attendrir! Pensons encore plus loin, les
mascottes sur les boîtes de céréale, l’ourson sur les pots de beurre d’arachide,
le singe de Subway et les publicités avec des animaux mignons comme tout de
Telus. Penser à Youpi, la mascotte des Expos ; l’équipe de baseball
n’existe plus depuis belle lurette et pourtant, tout le monde connaît encore
Youpi! ProWeb utilise également une
mascotte pour se représenter : un manchot. Avouez, il est impossible de ne
pas aimer un manchot à cravate! ;)<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Le contraste : <o:p></o:p></b></div>
<div class="MsoNormal">
<b><br /></b></div>
<div class="MsoNormal">
En jouant avec des contrastes, avec des formes ou bien des
couleurs qui s’harmonisent bien, on crée alors un milieu unique et spécifique à
notre marque. Par exemple, si je dis : Facebook, quelle couleur vous vient
à l’esprit? Le bleu, n’est-ce-pas? Et si je dis McDonald’s? Ou encore Coca
Cola? <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Mettre de l’avant des
personnes : <o:p></o:p></b></div>
<div class="MsoNormal">
<b><br /></b></div>
<div class="MsoNormal">
Mettre des photos de gens sur votre site web ou votre
publicité rendra celle-ci beaucoup plus accessible, humaine et sympathique. Par
exemple, notons le Monsieur Bell de Bell, Claude Meunier pour Pepsi, le célèbre
« pop sac a vie so sec fi copain» de
Marie-Josée Taillefer âgée d’à peine 6 ans pour les Caisses populaires
Desjardins ou encore les publicités de Chérios, Oréo et Évian qui utilisent
l’image d’adorables enfants. Même Michelin, un constructeur de pneu automobile,
a longtemps utilisé l’image d’un poupon faisant de beaux sourires à l’intérieur
d’un pneu. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Le nombre d’or :
<o:p></o:p></b></div>
<div class="MsoNormal">
<b><br /></b></div>
<div class="MsoNormal">
La beauté n'est pas toujours guidée par l’instinct. Il
existe des règles mathématiques d'harmonies qui permettent de rendre un objet,
ou une interface web, agréable à regarder. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>L’originalité, la
surprise et le glaçage du cupcake: <o:p></o:p></b></div>
<div class="MsoNormal">
<b><br /></b></div>
<div class="MsoNormal">
Un petit détail, un petit quelques chose qui fera sourire la
personne qui regardera votre site web. Il existe tellement de manières possibles
et imaginables pour attirer l’attention, il s’agit simplement de trouver la
recette qui convient à votre marque ou à votre entreprise. En bon pâtissier, le
designer web sera en mesure de bien vous guider et saura utiliser les bons
ingrédients du design émotionnel à votre avantage afin de créer l’impact
recherché.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
Source : <a href="http://dofollow.bz/?post/2012/04/30/design-emotionnel">http://dofollow.bz/?post/2012/04/30/design-emotionnel</a><o:p></o:p></div>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-87231855736313120052013-12-05T15:44:00.001-05:002016-04-15T13:19:46.548-04:00Démystifier le Web et le graphisme : les présuppositions.<script>
window.location = "http://www.proweb.ca/blogue-details/demystifier-le-web-et-le-graphisme-les-presuppositions";
</script>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-rTlmF8CvLKI/UqDkvz9YO-I/AAAAAAAAANc/yq_RE5jCqlQ/s1600/demystifier-le-web.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-rTlmF8CvLKI/UqDkvz9YO-I/AAAAAAAAANc/yq_RE5jCqlQ/s1600/demystifier-le-web.jpg" /></a></div>
<br />
Voilà plus de 10 ans que ProWeb réalise des mandats pour une clientèle diversifiée allant du néophyte à l’expert technologique. Voici donc une sélection de questions fréquentes ou de suppositions relatives à notre domaine.<br />
<br />
<b>1 : Une image vaut mille lignes de code : Puisque j’ai vu une image de mon site Web, celui-ci sera bientôt terminé.</b><br />
À cette étape, le rôle du graphiste est terminé mais celui de l’intégrateur et du programmeur commence à peine. L’intégrateur doit découper l’image que vous avez vu pour l’intégrer dans un langage que les navigateurs (Internet Explorer, Chrome, Firefox, etc.) peuvent comprendre.<br />
Par la suite, le programmeur doit coder pour que vos modules de gestions, vos formulaires et autres éléments gérables soient fonctionnels. Sans cette étape, votre superbe formulaire ne servirait absolument à rien!<br />
<br />
<b>2 : Un pour tous et tous pour un : Mon site Web fonctionne bien sur mon navigateur, il doit donc bien fonctionner partout!</b><br />
Le navigateur interprète le langage HTML pour vous présenter le résultat : une page Web. Toutefois, il existe plusieurs navigateurs (Internet Explorer, Firefox, Google Chrome, etc.) et parfois même plusieurs versions (Internet Explorer 6, 7, 8, 9, 10) et chacun interprète le code à sa façon. Par conséquent, il faut s’assurer que votre site s’affiche uniformément sur le plus de navigateur possible et cela ne se fait malheureusement pas par magie!<br />
<br />
<b>3 J’ai eu une idée : Mon site Web est terminé, mais j’aurais 2 ou 3 petites modifications.</b><br />
Une modification qui parait simple peut parfois être laborieuse alors qu’une modification qui parait laborieuse peut parfois se faire très rapidement. Par exemple, changer la couleur de tous les titres de mon site Web se fait très rapidement grâce aux CSS mais déplacer une image pourrait compromettre la structure même du site Web, ce qui reviendrait à refaire la structure en entier. Pour illustrer la situation, imaginez un mécanicien : si on lui demande de changer un essuie-glace, ce sera vite fait, par contre si on lui demande de déplacer le moteur à l’arrière du véhicule, ce ne sera pas la même histoire!<br />
<br />
<b>4 : Le coup de foudre : Quand je le verrai, je le saurai.</b><br />
Lorsque vous voyez les ébauches pour la première fois, il se peut que vous ayez un coup de foudre, il se peut aussi que certaines ébauches vous plaisent ou que vous vouliez faire d’autres essais. Cela est tout à fait normal. Bien que certains chanceux auront un coup de foudre, à l’opposé, certains autres attendront le prince charmant, en se disant « Quand je le verrai, je saurai que c’est le bon!» Dans ce dernier cas, le rôle du chargé de projet est de vous aider à cerner vos besoins et vos goûts. Soyez proactif : ne rester pas là à attendre le prince charmant les bras croisés.<br />
<br />
<b>5 : L’ornithorynque : Je vais montrer mon design à plusieurs personnes et je vous reviens.</b><br />
Lorsque vous demandez l’opinion de plusieurs personnes, il arrive que vous vouliez tout combiner, faire plusieurs tests ou que vous vous mettiez à douter de ce dont vous étiez sûr au début. Il est normal de demander l’avis de certaines personnes, mais il ne faut pas oublier que tous les goûts sont dans la nature, il faut donc arriver à faire sa propre opinion.<br />
Appelé «Design by commitee», ce processus où tout le monde met son grain de sel peut vous ralentir et même créer un monstre. L’un veut un bec, l’autre une queue aplatie, l’autre des palmes, bref, à la fin, vous vous retrouvez avec un ornithorynque! Et adieu l’uniformité. Et tous les goûts sont dans la nature.<br />
<br />
<b>6 : La cigale et la fourmi : Je veux que mon site soit prêt rapidement mais je vous fournirai le matériel vers la fin du projet.</b><br />
Bien qu’il soit possible de mettre du texte et des images pour donner un aperçu du résultat en utilisant du texte factice (lorem ipsum) et des images de remplissage, l’aspect d’un site peut changer drastiquement lorsque les bons éléments sont intégrés. Si vous n’avez qu’une seule phrase pour la section Équipe et une seule photo, mais que le design a été conçu avec trois gros paragraphes et plusieurs photos individuelles, le visuel risque d’en souffrir. Il arrive aussi que les délais de mise en ligne ne soient pas respectés car vos textes sont essentiels à la mise en ligne. Il y a un temps pour la cigale et un temps pour la fourmi!<br />
<div>
<br /></div>Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-4962993324694298532013-10-16T10:39:00.000-04:002016-04-15T13:20:07.558-04:00Nouveau logo ProWeb<script>
window.location = "http://www.proweb.ca/blogue-details/nouveau-logo-proweb";
</script>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-kmXBgWdROVg/Ul6kSJpa8eI/AAAAAAAAAG0/6KpxDfXbw9A/s1600/image-blog.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-kmXBgWdROVg/Ul6kSJpa8eI/AAAAAAAAAG0/6KpxDfXbw9A/s1600/image-blog.jpg" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Le W orange est le point central du logo, le pivot! Celui qui dit tout : nous faisons du Web! À la droite siège fièrement le manchot, icône emblématique de la compagnie : élégant par la couleur de son smoking et travailleur par sa cravate. Son bec pointe le ciel, car l’ascension de notre entreprise est vouée à de haut sommet. Uniquement composé de courbe, le manchot apporte une touche de vitalité et de dynamisme, ce qui caractérise très bien ProWeb.<br />
<br />
COULEUR :<br />
<br />
Nous avons choisi la couleur gris anthracite car elle symbolise la force et le respect. Elle représente également que nous ne manquerons jamais de «matière grise» afin de répondre à vos besoins. L’orange quant à lui, évoque l’énergie. Nous sommes une équipe jeune et dynamique, prête à tout afin de relever de nouveaux défis.<br />
<br />
TYPOGRAPHIE :<br />
<br />
Fine et élégante, elle représente le style et le bon goût. Discrète, mais déterminée, elle attire le regard et sait démontrer avec justesse que nous sommes une entreprise d’expérience et que la qualité est une norme sans équivoque pour nous.Anonymousnoreply@blogger.com1tag:blogger.com,1999:blog-4410362677414360177.post-1947901513467783442013-09-24T09:01:00.000-04:002016-04-15T13:20:31.297-04:00La psychologie des couleurs<script>
window.location = "http://www.proweb.ca/blogue-details/la-psychologie-des-couleurs";
</script>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-CGrZijE8N7Y/UkGLgvkdJiI/AAAAAAAAAFs/6gTVInVgQIE/s1600/Blogue_psychologie.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-CGrZijE8N7Y/UkGLgvkdJiI/AAAAAAAAAFs/6gTVInVgQIE/s1600/Blogue_psychologie.jpg" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="MsoNormal">
Notre monde, notre vie, notre vision sont remplies de
couleurs. Nous sommes constamment à la rencontre des couleurs. La création
d'associations et d'impressions personnelles et culturelles fondées sur les
différentes couleurs que nous voyons est innée. Notez que lorsque vous pensez à
un objet, l'une des premières choses qui vous vient à l’esprit est sa couleur. Cela
montre à quel point les couleurs sont présentes et bien ancrées dans la
perception humaine.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Les couleurs ont une signification émotive. Souvent, le sens
d’une couleur varie d’une personne à une autre, mais il y a des réactions
courantes associées à chaque couleur. Si vous faites une enquête rapide entre
amis ou collègues sur les couleurs qu'ils définissent comme «heureuse», vous
obtiendrez des réponses très similaires la plupart du temps.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Nous avons fait cette enquête rapide au bureau et le jaune a
été nommé à plusieurs reprises. (Jaune =
soleil = été = sourire = bonheur = joie = heureux)<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Dans la conception web, la couleur est tout aussi importante
que la structure de base et la navigation de votre site. Les couleurs peuvent
être utilisées pour attirer l'attention, créer une ambiance ou inciter vos
visiteurs à compléter des actions sur votre site. La couleur de votre logo, votre
arrière-plan, les boutons et j’en passe, peuvent être pensées pour améliorer
l'expérience de l’utilisateur, créer un
sentiment de familiarité et refléter l'essence de votre marque de manière
efficace.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Voici un petit lexique des émotions les plus communes
associés à chaque couleur:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
</div>
<ul>
<li>Brun = chaleur, confort</li>
<li>Noir = puissance, sophistication</li>
<li>Gris = sobre, calme</li>
<li>Bleu = loyauté, confiance</li>
<li>Rouge = excitation, passion</li>
<li>Rose = jeunesse, tendresse</li>
<li>Violet = luxe, sagesse</li>
<li>Orange = énergie, vivant</li>
<li>Vert = naturel, stabilité</li>
<li>Blanc = pureté, simplicité</li>
<li>Jaune = bonheur, joie</li>
</ul>
<o:p></o:p><br />
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
Source : <a href="http://www.wix.com/blog/2013/06/color-web-design/">http://www.wix.com/blog/2013/06/color-web-design/</a><o:p></o:p></div>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-72197592136444150072013-09-18T12:04:00.001-04:002016-04-15T13:21:57.474-04:00Chronique : Navigateurs<script>
window.location = "http://www.proweb.ca/blogue-details/chronique-navigateurs";
</script>
<a href="http://4.bp.blogspot.com/-Vj2Nu1ATVvM/UjnMidKCbqI/AAAAAAAAAIc/jnITfbPw9d8/s1600/navigateur.jpg" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://4.bp.blogspot.com/-Vj2Nu1ATVvM/UjnMidKCbqI/AAAAAAAAAIc/jnITfbPw9d8/s1600/navigateur.jpg" /></a><br />
<div class="MsoNormal">
<br /></div>
<span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt; line-height: 115%; mso-ansi-language: FR-CA; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">
Historique : </span><br />
<span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt; line-height: 115%; mso-ansi-language: FR-CA; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"><br /></span>
<span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt; line-height: 115%; mso-ansi-language: FR-CA; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">De nos jours, plusieurs navigateurs web sont disponibles
gratuitement sur le marché, mais il fut un temps où la compétition était
beaucoup moins féroce. Le navigateur
Mosaic, sorti au début des années 90, est le premier navigateur qui se répand
largement et qui permet une navigation stable et fonctionnelle sur le Web. </span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">Vers le milieu des années 90, Netscape
devient le navigateur le plus populaire et le fameux Internet Exploreur fait
son entrée sur le marché.</span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"> </span><br />
<span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"><br /></span>
<span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">À partir de
1995, Netscape et Internet Explorer se</span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">
</span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">mène une chaude lutte pour avoir la plus grande part de marché,
cependant Internet Exploreur étant installé de base sur les ordinateurs
Windows, il prit petit à petit la part de marché de Netscape.</span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"> </span><br />
<span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"><br /></span>
<span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">Au début des années 2000, plus de 80% des
gens utilisaient Internet Explorer et le navigateur était si populaire et bien
ancré que Microsoft décida de stopper le développement comme il n'avait plus
rien à craindre des compétiteurs.</span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"> </span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">Il
faut attendre</span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"> </span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">5 ans pour que Microsoft
décide de relancer le développement de son application web, mais pendant ce
temps, certains concurrents avaient commencé à se positionner, par exemple
Firefox qui était développé par des anciens employés de Netscape.</span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"> </span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">C'est ainsi que la guerre des navigateurs
revint à l'ordre du jour vers le milieu des années 2000.</span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"> </span><br />
<span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"><br /></span>
<span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">En 2008, Google décida de se lancer lui aussi
dans le marché en rendant disponible Google Chrome, </span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"> </span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">un navigateur épuré et plus rapide que ses
prédécesseurs.</span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"> </span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">Ces trois navigateurs
sont donc en compétition encore de nos jours et les statistiques recueillies ne
s'entendent pas sur les pourcentages d'utilisation.</span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"> </span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">Elles s'entendent cependant pour dire
qu'Internet Explorer est toujours le navigateur le plus utilisé et que,
quoiqu'il perde du terrain au profit de Google Chrome, il devrait le rester
pendant encore un bon moment. </span><br />
<span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt; line-height: 115%; mso-ansi-language: FR-CA; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">
<br />
Mot de l'éditeur : </span><br />
<span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt; line-height: 115%; mso-ansi-language: FR-CA; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"><br /></span>
<a href="http://www.proweb.ca/" style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">ProWeb</a><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"> vous suggère toujours d'avoir les versions les plus à
jour de votre navigateur pour éviter toutes sortes de problèmes de
compatibilité.</span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"> </span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"> </span><br />
<span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"><br /></span>
<span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">Voici une liste des navigateurs les plus à jours
en date de la publication de cet article :</span><br />
<ul>
<li><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">Internet Explorer 10</span></li>
<li><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">Google Chrome</span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;"> </span><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">Version 27.0.1453.116 m</span></li>
<li><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">Firefox 22</span></li>
<li><span style="font-family: Calibri, sans-serif; font-size: 11pt; line-height: 115%;">Safari 5</span></li>
</ul>
<!--[if !supportLineBreakNewLine]--><br />
<!--[endif]-->Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-78610399127339307252013-08-28T09:45:00.000-04:002016-04-15T13:22:18.629-04:00Le défilement infini (infinite scrolling)<script>
window.location = "http://www.proweb.ca/blogue-details/le-defilement-infini-infinite-scrolling";
</script>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-pcWlLUBnX2M/Uh3-N1xYBhI/AAAAAAAAAK8/Dr7JghCCciY/s1600/defilement-infini.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-pcWlLUBnX2M/Uh3-N1xYBhI/AAAAAAAAAK8/Dr7JghCCciY/s1600/defilement-infini.jpg" /></a></div>
Le défilement infini prend sa source avec l’arrivé des appareils mobiles. Ceux-ci ont un petit écran vertical, il faut donc que l’usager défile vers le bas pour accéder aux informations d’une page.<br /><br />Toutefois c’est Pinterest, un site Web de réseautage social axé sur les photographies et les intérêts des utilisateurs du réseau, qui l’a rendu populaire. Sa capacité à présenter beaucoup d’information sans avoir à charger une page s’appliquait bien au principe de base de Pinterest. Visitez le <a href="http://pinterest.com/proweb/">Pinterest</a> de <a href="http://www.proweb.ca/">ProWeb</a> pour un exemple.<br /><br /><a href="https://twitter.com/ProWebca">Twitter</a> est aussi un excellent exemple d’utilisation du défilement infini. Ce système s’applique en effet à merveille au système de messages courts de celui-ci. Il est pertinent d’aller voir les tweets plus anciens étant donné car ils s’empilent rapidement mais cela ne veut pas dire qu’ils perdent de leur intérêt. De plus, il permet de consulter des tweets sans avoir à précharger la page, ce qui facilite la vie de l’utilisateur. On retrouve aussi sur sa version mobile, un effet de papier déchiré qui vous indique où vous en êtes rendu dans votre lecture.<br /><br />Son atout majeur est de vous présenter une multitude de résultats sans préchargement.<br /><br />Il est utilisé pour la recherche d’image de Google : ce qui est pratique pour consulter rapidement une panoplie d’images. Par contre, pour les recherches régulières, cette solution n’a pas été retenue. En effet, lors d’une recherche régulière, l’utilisateur peut se repérer plus facilement à l’aide de la pagination. Il est aussi porté à regarder les quelques liens les plus pertinents qui se retrouvent en première page. Voir la fin de la page vous donne le sentiment que vous ne manquez rien alors que l’infini vous porte à continuer votre recherche indéfiniment (vers les résultats les moins pertinents).<br /><br />Notons tout de même certaines lacunes assez évidentes :<br /><ul>
<li>La tentation de cliquer sur toujours plus de lien entraîne une perte de temps;</li>
<li>La barre de défilement ne reflète pas la quantité de contenu;</li>
<li>Difficile de se repérer et de savoir où on en était précédemment;</li>
<li>Difficile de trier le pertinent du non pertinent;</li>
<li>Rend le pied de page inaccessible (dans certain cas).</li>
</ul>
Il existe un compromis entre le défilement infini et la pagination régulière : il s’agit de mettre un bouton « charger plus de résultats ». Ce qui permet à l’utilisateur de poursuivre sa recherche tout en le réconfortant en lui montrant une « fin » tangible.<br /><br />En conclusion, le défilement infini est une façon de présenter de l’information qui peut s’avérer pertinente et agréable lorsqu’il s’agit de présenter un contenu vaste. Il faut toutefois bien l’utiliser et garder à l’esprit que si la pertinence des résultats est un critère important, ce n’est peut-être pas la méthode de navigation la plus conseillée.<br /><br /><b>Source :</b><br /><br /><span style="font-size: x-small;">Infinite Scrolling: Let’s Get To The Bottom Of This</span><br /><a href="http://uxdesign.smashingmagazine.com/2013/05/03/infinite-scrolling-get-bottom/" style="font-size: small;">http://uxdesign.smashingmagazine.com/2013/05/03/infinite-scrolling-get-bottom/</a><br /><br /><span style="font-size: x-small;">2013 Web Design Trends Infographic</span><br /><a href="http://enfuzed.com/2013-web-design-trends-infographic/" style="font-size: small;">http://enfuzed.com/2013-web-design-trends-infographic/</a><br /><br /><span style="font-size: x-small;">Pinterest</span><br /><a href="http://fr.wikipedia.org/wiki/Pinterest" style="font-size: small;">http://fr.wikipedia.org/wiki/Pinterest</a>Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-61372237075142873252013-08-19T14:21:00.001-04:002016-04-15T13:22:45.978-04:00Prédiction pour le futur du Web<script>
window.location = "http://www.proweb.ca/blogue-details/predictions-pour-le-futur-du-web";
</script>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-C8tQQ00EZnI/UhJSLXuanVI/AAAAAAAAAKw/LLcmHIygLvY/s1600/futur-du-web.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-C8tQQ00EZnI/UhJSLXuanVI/AAAAAAAAAKw/LLcmHIygLvY/s1600/futur-du-web.jpg" /></a></div>
<br />
<b>Le Web sera accessible partout</b><br />
Il y aura encore plus d’appareils interagissant avec Internet car Internet sera accessible partout; vous pourrez accéder à vos données par le biais de votre ordinateur de maison, de votre tablette ou de votre téléphone intelligent et celles-ci seront toujours les mêmes. Pourquoi? Grâce au «nuage» qui permet l’entreposage de vos données en ligne (sur des serveurs). De plus, les logiciels seront achetés en ligne et non dans un magasin.<br />
<br />
<b>Internet ne sera plus associé à l’ordinateur</b><br />
Cette transformation est déjà commencée grâce aux téléphones intelligents et aux tablettes. Les télévisions commencent aussi petit à petit à intégrer Internet et les gens passeront facilement d’une plateforme à une autre. D’autres appareils offriront des fonctionnalités reliées à Internet. Par exemple, les appareils photo connectés à Internet existent déjà.<br />
<br />
<b>La souris cèdera progressivement sa place</b><br />
Les écrans tactiles sont largement utilisés à l’heure actuelle et la navigation vocale se développe. On peut penser que la détection de mouvement sera utilisée à son plein potentiel. La kinect de Xbox a d’ailleurs commencé à utiliser le corps comme outil de navigation. On peut aussi prédire que la reconnaissance vocale sera améliorée et que les commandes les plus fréquentes pourront être exécutées par une simple commande vocale.<br />
<br />
<b>Applications intégrées aux navigateurs</b><br />
Google développe déjà des applications et des jeux qui fonctionnent à même le navigateur (Google Chrome). Il est fort probable que certains programmes que nous utilisons indépendamment (installé à l’aide d’un CD et exécuté seul) pourraient se retrouver à même le navigateur.<br />
<br />
<b>La neutralité du Web</b><br />
Le principe de neutralité sur le Web implique que le contenu diffusé a la même importance pour tous. Nous pourrions par contre voir apparaitre des compagnies qui feraient payer des frais pour que les Internautes aient accès à votre site plus facilement. Une grande compagnie pourrait ainsi rendre ses sites plus visibles que ceux de base. Il y aurait donc la voie rapide et la voie lente.<br />
<br />
<b>La réalité augmentée et le Web ‘intérieur’</b><br />
Google développe ses fameuses lunettes (Project Glass) combinant la réalité et le virtuel. On peut penser qu’un jour, toutes sortes d’information nous seront accessibles via ces lunettes. Le monde réel se mélangera au monde virtuel pour nous informer et nous divertir. Des projets de réalité virtuelle voient le jour en ce moment même. C’est le cas d’Omni, un système de réalité virtuelle qui vous permet de vous immerger dans un jeu grâce à ses lunettes! Vos pieds contrôlent le déplacement de votre personnage : vous courez donc vraiment pour faire mouvoir votre personnage! On peut donc concevoir l’apparition future d’environnements où les gens utiliseraient un avatar pour se déplacer dans un monde totalement virtuel. Bienvenue dans la Matrice!<br />
<br />
<b>
La conscience globale</b><br />
Les idées et l’accès à l’information voyagent plus rapidement que jamais. Les médias sociaux font voyager les idées et on peut émettre l’hypothèse que les gens se considéreront de plus en plus comme des citoyens du monde plutôt que comme des individus habitants tel ou tel pays. Certaines barrières telles que le racisme pourraient tomber suite à une conscience plus globale. Auparavant, il était difficile de garder contact avec un ami habitant à l’étranger mais grâce à Internet, il est facile de garder contact avec ceux-ci, ce qui a pour effet de faire circuler les idées de façon plus globale.<br />
Une autre avancée possible serait le système nerveux planétaire, c’est-à-dire, l’étude en temps réel d’interactions à l’échelle mondiale. On pourrait étudier les réactions d’un événement en temps réel et par la suite peut-être même tenter d’en prévoir l’issu. Ce serait un peu comme jouer à SimCity mais en version mondiale.<br />
<br />
<b>
Le marketing Internet du futur</b>
<br />
Le marketing sera personnalisé et parfois même en temps réel. Les médias sociaux permettent aux compagnies d’interagir avec leurs clients et d’en connaître beaucoup à leur sujet. Les pubs que vous voyez sur Facebook sont déjà orientées selon vos intérêts et votre situation, imaginez ce que ce sera dans 50 ans!<br />
<br />
<b>
Bigbrother et les médias sociaux</b>
<br />
Les utilisateurs de médias sociaux, et particulièrement de Facebook, inscrivent beaucoup d’informations personnelles consciemment (en remplissant leur profil et en partageant à propos de leur vie quotidienne) et parfois sans le savoir (on peut retracer où une personne se trouvait grâce à une simple photo contenant des données GPS). On peut se questionner à savoir si nos données sont entre bonnes mains. En fait, l’avantage des médias sociaux est aussi son inconvénient : on peut partager rapidement nos opinions, ce qui fait circuler l’information plus rapidement et librement qu’auparavant mais on donne une quantité d’information considérable à quelques personnes. Il est facile de retracer une personne ayant un téléphone cellulaire et de connaitre ses allées et venues. On peut connaitre les sites web qu’elle a visités (sur Google ou Bing), et avec les divers profils (personnel et relationnel sur Facebook, professionnel sur LinkedIn) on pourrait dresser le portrait complet d’une personne. Les citoyens de partout doivent être conscientisés pour éviter que l’histoire du roman 1984 ne se produise pas plutôt en 2084 !<br />
<div>
<br />
<b>Source:</b><br />
<div class="MsoNormal">
<b>Omni: Move Naturally in Your Favorite Game</b></div>
<a href="http://www.kickstarter.com/projects/1944625487/omni-move-naturally-in-your-favorite-game">http://www.kickstarter.com/projects/1944625487/omni-move-naturally-in-your-favorite-game</a><br />
<br />
<br />
<b>2013, l’année du premier « système nerveux planétaire »?</b><br />
<a href="http://blogues.radio-canada.ca/triplex/2013/01/03/2013-demarrage-du-premier-systeme-nerveux-planetaire/">http://blogues.radio-canada.ca/triplex/2013/01/03/2013-demarrage-du-premier-systeme-nerveux-planetaire/</a><br />
<br />
<b>1984(roman)</b><br />
<a href="http://fr.wikipedia.org/wiki/1984_(roman)">http://fr.wikipedia.org/wiki/1984_(roman)</a><br />
<br />
<b>Google dévoile Project Glass, des lunettes à réalité augmentée</b><br />
<a href="http://www.01net.com/editorial/563110/google-devoile-project-glass-des-lunettes-a-realite-augmentee/">http://www.01net.com/editorial/563110/google-devoile-project-glass-des-lunettes-a-realite-augmentee/</a><br />
<br />
<b>What the Web of Tomorrow Will Look Like: 4 Big Trends to Watch</b><br />
<a href="http://mashable.com/2010/01/24/internet-of-tomorrow-column/">http://mashable.com/2010/01/24/internet-of-tomorrow-column/</a></div>
<div>
<br />
<b>The Future Of The Internet</b><br />
<a href="http://www.smashingmagazine.com/2010/08/11/the-future-of-the-internet/">http://www.smashingmagazine.com/2010/08/11/the-future-of-the-internet/</a><br />
<br />
<b>6 Predictions for the Future of the Internet</b><br />
<a href="http://sixrevisions.com/web-technology/6-predictions-for-the-future-of-the-internet/">http://sixrevisions.com/web-technology/6-predictions-for-the-future-of-the-internet/</a><br />
<br />
<b>Les predictions de marketing Internet 2013</b><br />
<a href="http://www.d-modules.com/blogue/2013/01/17/les-predictions-de-marketing-internet-2013/">http://www.d-modules.com/blogue/2013/01/17/les-predictions-de-marketing-internet-2013/</a></div>Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-87333284893675297032013-05-02T08:49:00.000-04:002016-04-15T13:23:08.561-04:00La nouvelle mode ou tendance Web : le Flat design<script>
window.location = "http://www.proweb.ca/blogue-details/la-nouvelle-mode-ou-tendance-web-le-flat-design";
</script>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-JiSsiYxlY1U/UYF0iI0ubhI/AAAAAAAAAAc/HfQM1bwWpdg/s1600/image-blog.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-JiSsiYxlY1U/UYF0iI0ubhI/AAAAAAAAAAc/HfQM1bwWpdg/s1600/image-blog.jpg" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
En 2009-2010, la tendance «grunge» était à son apogée :
photos déchirées, textures salies et typographies extravagantes étaient au
rendez-vous. Fini la petite interface
habituelle, proprette et bien alignée! Mais cela n’a pas été long avant
qu’Apple nous rappelle à l’ordre et impose à tous son style
avant-gardiste : le skeuomorphisme.
On peut résumer ce style par des lignes épurées et des interfaces intuitives, communément appelée « user
friendly ».</div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Aujourd’hui, quelle est la nouvelle tendance à suivre? Il
semblerait que le «flat design» soit la nouvelle «fashionista» des designers Web
et qu’elle serait là pour rester.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Mais tout d’abord, le «flat design», c’est quoi? C’est un
style graphique minimaliste et épuré. Plus précisément, il se caractérise par
des formes simples, sans textures, ni
effets de volume et les couleurs vives, très présentes, sont utilisées
en aplat.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Ce style prend racine dans la tendance « responsive Web
design» (ou en français « site adaptable »), qui est une méthode permettant
d’adapter un site à la taille d’un écran. Il est de plus en plus habituel de
voir ce genre de style utilisé par les concepteurs de site Web. Les contraintes
de cette méthode nécessitent une certaine souplesse d’utilisation, c’est-à-dire
que les éléments graphiques vectoriels sont mieux adaptés que les images
bitmap. Vectoriel et flat font donc un très bon mariage!<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Mais est-ce qu’on aime ça ? </b><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Pas sûr. J’ai mené ma petite enquête et les avis sont
partagés. Du point de vue d’un graphiste, le « flat design » serait
une bonne nouvelle puisqu’un design plus épuré et plus simple demande moins de
temps à réaliser. Mais comme toute tendance, celle-ci fera son temps et une autre idée verra le jour et la
remplacera, croit-on. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Du point de vue d’un intégrateur, c’est tout le contraire,
voire « Quelle horreur! » s’est-il exclamé. La trop grande simplicité
et le manque de réalisme du concept le fait douter que ce style soit là pour
durée. Et simplicité ne veut pas dire moins grande complexité dans
l’intégration des éléments. <o:p></o:p></div>
<div class="MsoNormal">
Alors le « flat design » c’est in ou pas ? Qu’en
pensez-vous ?<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b style="background-color: white; color: #222222; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 18px;">Source :</b></div>
<div class="MsoNormal">
<a href="http://cabaroc.com/flat-design-mode-passagere-ou-tendance-durable/">http://cabaroc.com/flat-design-mode-passagere-ou-tendance-durable/</a></div>
<div class="MsoNormal">
<a href="http://www.marevueweb.com/inspiration-web/nouvelles-tendances-design-web/">http://www.marevueweb.com/inspiration-web/nouvelles-tendances-design-web/</a></div>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-28696985503321040542013-01-29T17:18:00.000-05:002016-04-15T13:23:43.114-04:00Tendance Web : les fontes d’icônes.<script>
window.location = "http://www.proweb.ca/blogue-details/tendance-web-les-fontes-d-icones";
</script>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-LmZ4f2V732U/UQhKfOvalRI/AAAAAAAAAJo/8ZusPT2Ys44/s1600/typo.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-LmZ4f2V732U/UQhKfOvalRI/AAAAAAAAAJo/8ZusPT2Ys44/s1600/typo.jpg" /></a></div>
Il semble qu’une tendance émerge sur le Web depuis l’utilisation de fontes telles que celles proposées par <a href="http://www.google.com/webfonts" target="_blank">Google Web Fonts</a>. Il s’agit de l’utilisation de fontes d’icônes.<br />
<br />
<br />
<div>
En effet, il y a quelque temps, les fontes utilisées devaient être disponibles sur le poste de la majorité des utilisateurs d’un site Web. On appelait Web Safe Fonts la liste de fontes pouvant être utilisée. On pouvait contourner le problème en affichant une image plutôt qu’un texte…ce qui était moins pratique pour l’utilisateur (le texte ne pouvant être agrandi ou réduit) et pour le référencement (il fallait se servir de la balise ALT pour compenser cette lacune). <br />
<br />
Bien sûr, on avait utilisé les fontes comme Wingdings pour insérer des pictogrammes. Mais le peu de formes disponibles dans ces fontes fit qu’on se lassa assez rapidement de voir les mêmes icônes. <br />
<br />
Par la suite, des sites tels que <a href="http://www.google.com/webfonts" target="_blank">Google Web Font</a> et <a href="http://www.fontsquirrel.com/" target="_blank">Font Squirrel</a> proposèrent d’intégrer un lien vers un serveur, lequel se chargerait d’afficher la fonte sans que l’utilisateur ne la possède. Ceci ouvra la porte à un Web plus riche au niveau typographique, et ce sans utilisation d’images. <br />
<br />
Ce n’est que récemment que les Web designers ne recommencèrent à utiliser les pictogrammes contenu à même les fontes. Le fait que la communauté Internet est vaste pousse aussi dans cette direction car on voit apparaître des fontes faciles à utiliser contenant beaucoup de symboles.<br />
<br />
<b>Les avantages d’utiliser les fontes d’icônes :</b><br />
<ul>
<li>On peut les redimensionner </li>
<li>Elles sont compatibles avec tous les navigateurs </li>
<li>On peut leur appliquer différentes couleurs </li>
<li>On peut leur appliquer des effets (les mêmes effets applicables à un texte)</li>
</ul>
<b>Liens intéressants : </b><br />
<span style="font-size: x-small;"><a href="http://typicons.com/">http://typicons.com/</a><br /> <a href="http://fortawesome.github.com/Font-Awesome/">http://fortawesome.github.com/Font-Awesome/</a><br /> <a href="http://www.entypo.com/">http://www.entypo.com/</a><br /> <a href="http://www.zurb.com/playground/foundation-icons">http://www.zurb.com/playground/foundation-icons</a><br /> <a href="http://tipogram.com/">http://tipogram.com/</a><br /> <a href="http://icons.marekventur.de/">http://icons.marekventur.de/</a><br /> <a href="http://www.fontsquirrel.com/fonts/modern-pictograms">http://www.fontsquirrel.com/fonts/modern-pictograms</a><br /> <a href="http://css-tricks.com/flat-icons-icon-fonts/">http://css-tricks.com/flat-icons-icon-fonts/</a><br /> <a href="http://sixrevisions.com/resources/free-icon-fonts/">http://sixrevisions.com/resources/free-icon-fonts/</a><br /> <a href="http://css-tricks.com/examples/IconFont/">http://css-tricks.com/examples/IconFont/</a><br /> <a href="http://css-tricks.com/html-for-icon-font-usage/">http://css-tricks.com/html-for-icon-font-usage/</a> </span><br />
<br />
<b>Source :</b><br />
<a href="http://en.wikipedia.org/wiki/Wingdings"><span style="font-size: x-small;">http://en.wikipedia.org/wiki/Wingdings</span></a></div>Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-22803917131705590502013-01-17T10:01:00.001-05:002016-04-15T13:24:02.650-04:00Design Web : Tendances 2013<script>
window.location = "http://www.proweb.ca/blogue-details/design-web-tendances-2013";
</script>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://thenextweb.com/dd/2012/12/30/10-new-web-design-trends-you-can-expect-to-see-in-2013/?fromcat=dd"><img border="0" src="http://1.bp.blogspot.com/-n-iqkmO4oAI/UPgSPJAP9aI/AAAAAAAAAJI/KcIDnAnJXRo/s1600/img1.jpg" /></a></div>
<br />
Article intéressant à propos des tendances pour le design Web en 2013.
<a href="http://thenextweb.com/dd/2012/12/30/10-new-web-design-trends-you-can-expect-to-see-in-2013/?fromcat=dd">http://thenextweb.com/dd/2012/12/30/10-new-web-design-trends-you-can-expect-to-see-in-2013/?fromcat=dd</a>Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-87114910710298883242013-01-11T08:55:00.002-05:002016-04-15T13:46:17.018-04:00Est-ce le retour des GIFs animés?<script>
window.location = "http://www.proweb.ca/blogue-proweb";
</script>
Voici un article intéressant à propos du retour des GIFs animés; ces images autrefois si populaires pouvant être animées. (anglais)<br /><br /><a href="http://contently.com/blog/2012/08/29/what-the-rise-of-animated-gifs-means-for-content/">http://contently.com/blog/2012/08/29/what-the-rise-of-animated-gifs-means-for-content/</a>Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com1tag:blogger.com,1999:blog-4410362677414360177.post-36038312230016842422013-01-07T12:10:00.000-05:002016-04-15T13:46:50.560-04:0010 refontes de logos en 2012<script>
window.location = "http://www.proweb.ca/blogue-proweb";
</script>
<div class="separator" style="clear: both; text-align: left;">
<a target="_blank" biggest-logo-redesigns-2012-12121452="biggest-logo-redesigns-2012-12121452" href="http://www.creativebloq.com/10-biggest-logo-redesigns-2012-12121452" http:="http:" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" www.creativebloq.com="www.creativebloq.com">
<img border="0" src="http://2.bp.blogspot.com/-RTE6kTqmc_Y/UOsAXglfU1I/AAAAAAAAAFI/BNURz32H5b4/s1600/ebay.jpg" height="100" width="400" /></a></div>
<div style="clear: both;">
Voici un article intéressant à propos de la refonte de logos durant l'année 2012.<br />
<a target="_blank" href="http://www.creativebloq.com/10-biggest-logo-redesigns-2012-12121452">http://www.creativebloq.com/10-biggest-logo-redesigns-2012-12121452</a>
</div>Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com1tag:blogger.com,1999:blog-4410362677414360177.post-55768528448602104142013-01-03T10:06:00.000-05:002016-04-15T13:24:50.546-04:00Tendances visuelles découlant de systèmes d’exploitation : après le web 2.0 provenant d’Apple, l’interface de Windows 8 fait son apparition.<script>
window.location = "http://www.proweb.ca/blogue-details/tendances-visuelles-decoulant-de-systemes-d-exploitation";
</script>
Nous voyons depuis quelques années, beaucoup de dégradés, d’ombres, d’effets de réflexions et de miroirs. Ces éléments graphiques furent à l’origine inspirés de design créés par Apple. Cette fois, c’est Microsoft qui part le bal en introduisant la nouvelle interface Windows, fortement inspiré par le style typographique international aussi appelé style suisse. Ce style prône la simplicité et l’efficacité et utilise la typographie et des formes de base. L’interface fût pensé pour être facile d’utilisation sur une tablette ou un téléphone à écran tactile car on le sait, les gros boutons ayant peu de texte facilite la navigation sur ce genre d’appareils.<br /><br />Microsoft décline son design par la présence d’icônes simples et épurées de couleur blanche, par l’usage de typographie sans sérif et par la présence de masses de couleur rectangulaires ou carrées. La palette de couleur utilisée y est assez vive.<br /><br />Appelé au départ «interface Metro » (<i>Metro style</i>), Windows dût abandonner cette appellation suite à la menace de poursuite judiciaire de la part de la chaîne allemande Metro AG. Les noms les plus communément utilisés sont <i>Modern UI</i>,<i> interface Windows</i> ainsi qu’<i>interface Windows 8</i>. Le débat fait toujours rage sur le Web au sujet du nom définitif à donner à cette interface et seul l’avenir nous éclairera à ce sujet.<br /><br /><b>Sources : </b><br /><span style="font-size: x-small;"><a href="http://www.theinquirer.net/inquirer/news/2198399/microsoft-renames-metro-to-modern-ui">http://www.theinquirer.net/inquirer/news/2198399/microsoft-renames-metro-to-modern-ui</a> <br /><a href="http://www.neowin.net/news/is-metro-now-called-modern-ui">http://www.neowin.net/news/is-metro-now-called-modern-ui</a> <br /><a href="http://www.tomsguide.fr/actualite/Windows8-WindowsRT-Interface-Windows-Metro,18720.html">http://www.tomsguide.fr/actualite/Windows8-WindowsRT-Interface-Windows-Metro,18720.html</a> <br /><a href="http://www.pcinpact.com/dossier/600-l%E2%80%99interface-le-mauvais-carreau-de-windows-8/1.htm">http://www.pcinpact.com/dossier/600-l%E2%80%99interface-le-mauvais-carreau-de-windows-8/1.htm</a> <br /><a href="http://fr.wikipedia.org/wiki/Windows_8">http://fr.wikipedia.org/wiki/Windows_8</a> <br /><a href="http://onepartscissors.com/2012/04/web-design-trends-into-2013.html">http://onepartscissors.com/2012/04/web-design-trends-into-2013.html</a> <br /><a href="http://en.wikipedia.org/wiki/Metro_(design_language)">http://en.wikipedia.org/wiki/Metro_(design_language)</a> <br /><a href="http://www.fastcodesign.com/1669407/microsoft-gets-brutally-honest-about-redesigning-windows">http://www.fastcodesign.com/1669407/microsoft-gets-brutally-honest-about-redesigning-windows</a> <br /><a href="http://fr.wikipedia.org/wiki/Style_typographique_international">http://fr.wikipedia.org/wiki/Style_typographique_international</a> <br /><a href="http://www.01net.com/editorial/571209/windows-8-microsoft-renomme-l-interface-metro-en-windows-8/">http://www.01net.com/editorial/571209/windows-8-microsoft-renomme-l-interface-metro-en-windows-8/</a> </span><br /><br /> Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-2376136860013683492012-11-19T17:19:00.000-05:002016-04-15T13:25:19.647-04:00Le défilement parallaxe<script>
window.location = "http://www.proweb.ca/blogue-details/le-defilement-parallaxe";
</script>
Pour ajouter un effet de profondeur aux sites Web, les designers Web ont recours à une méthode utilisée depuis longtemps dans le domaine du jeu vidéo : le défilement parallaxe.<br /><br />Celui-ci consiste à faire bouger différents plans à différentes vitesses pour créer un effet de profondeur et de mouvement. Par exemple, au premier plan un personnage bougerait rapidement, au second plan une forêt lointaine bougerait à vitesse moyenne et finalement au troisième plan des nuages bougeraient à vitesse lente. Tout ceci dans le bus de créer un effet de profondeur.<br /><br />Le mouvement peut être associé au défilement du site (scroll) ou au mouvement de la souris et est exploité de différentes façons. Vous en trouvez aussi des exemples sur le site de <a href="http://www.proweb.ca/">ProWeb</a> au moyen des icônes de médias sociaux qui se chevauchent dans l'arrière-plan et dans la bannière présentant les services dans le haut de la page.<br /><br /><div>
Cet effet, bien utilisé, offre de multiples possibilités au designer Web. À noter qu'il faut garder la lisibilité, la facilité de navigation et le temps de chargement en tête lors de l'utilisation d'un tel effet dans un site Web.<br /><br /><b>Source :</b><br /><span style="font-size: x-small;"><b>Définition du défilement parallaxe</b><br /><a href="http://fr.wikipedia.org/wiki/D%C3%A9filement_parallaxe">http://fr.wikipedia.org/wiki/D%C3%A9filement_parallaxe</a> </span></div>
<div>
<span style="font-size: x-small;"><br /></span></div>
<div>
<span style="font-size: x-small;"><b>Six tendances prévues pour 2013 (anglais)</b><br /><a href="http://smashinghub.com/web-design-trends-in-2013.htm">http://smashinghub.com/web-design-trends-in-2013.htm</a> <br /><br /><b>Explication des effets de parallaxe</b><br /><a href="http://design.ikomeo.fr/les-effets-de-parallaxe-webtrends">http://design.ikomeo.fr/les-effets-de-parallaxe-webtrends</a> </span><br /><br /><b>Liens intéressants :</b><br /><span style="font-size: x-small;"><b>21 exemples de défilement parallaxe (anglais)</b><br /><a href="http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design">http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design</a> <br /><br /><b>30 sites contenants un effet parallaxe (anglais)</b><br /><a href="http://www.awwwards.com/20-great-websites-with-parallax-scrolling.html">http://www.awwwards.com/20-great-websites-with-parallax-scrolling.html</a></span></div>Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com1tag:blogger.com,1999:blog-4410362677414360177.post-67717109862914688652012-10-30T11:19:00.003-04:002016-04-15T13:25:58.176-04:00On peut se passer de Visio ?<script>
window.location = "http://www.proweb.ca/blogue-details/on-peut-se-passer-de-visio";
</script>
<span style="font-size: large;">Les outils de quand t'a pas Visio</span><br />
<br />
<a href="http://www.gliffy.com/">http://www.gliffy.com/</a><br />
Bon éditeur online, sauve juste en image, fait en Flash (<a href="http://preview.gliffy.com/html5/api/editor">html5 </a>en preview).<br />
Plusieurs beaux modèles de base. <br />
Permet la collaboration, et sauver xml.<br />
<br />
<a href="http://www.diagram.ly/">http://www.diagram.ly/</a><br />
Un peu moins beau que gliffy mais html5.<br />
A (entre autres) des templates uml et des clipart.<br />
Permet de sauver en xml (et de réouvrir ailleurs ce même fichier...) mais pas de collaborer.<br />
Il parait qu'on peut ouvrir des fichiers Visio également !<br />
<br />
<a href="https://bubbl.us/">https://bubbl.us/</a><br />
Vous avez besoin <i>très rapidement</i> de mettre vos <b>idées</b> sur un canvas ? Ça relie des bulles ensembles (juste à survoler les bulles et peser sur les petits icônes qui apparaissent autours.<br />
<br />
Go analyse go !<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imagecdn3.maketecheasier.com/2012/01/visio-man-drawing.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://imagecdn3.maketecheasier.com/2012/01/visio-man-drawing.jpg" /></a></div>
<a href="http://maketecheasier.com/5-best-free-alternatives-to-microsoft-visio/2012/01/20">Ici un lien</a> vers des alternative (que je ne recommende pas particulièrement...)Françoishttp://www.blogger.com/profile/05006268460185064582noreply@blogger.com0tag:blogger.com,1999:blog-4410362677414360177.post-56971638919524140572012-10-04T17:00:00.000-04:002016-04-15T13:26:22.570-04:00Savoir s'adapter, de plus en plus vrai sur le Web!<script>
window.location = "http://www.proweb.ca/blogue-details/savoir-s-adapter-de-plus-en-plus-vrai-sur-le-web";
</script>
<br />
<div lang="zxx" style="margin-bottom: 0cm;">
Vous avez fort probablement
déjà été obligé de « <i>zoomer »</i> (redimensionner) ou «
<i>scroller »</i> (faire défiler) pour pouvoir consulter un site
Web sur un mobile. Ceci est dû au fait que ces sites ont été
conçus pour un écran d'ordinateur.</div>
<div lang="zxx" style="margin-bottom: 0cm;">
<br /></div>
<div lang="zxx" style="margin-bottom: 0cm;">
Ce
<strong><span style="font-weight: normal;">problème</span></strong>
peut être évité grâce au « <i>responsive
design »</i> (<strong><span style="font-weight: normal;">conception
adaptative ou réactive).</span></strong></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<strong><span style="font-weight: normal;">Cette
méthode consiste à permettre à la mise en page d'un site Web de
s'adapter aux divers appareils et à leur résolution d'écran
respective.</span></strong></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<br /></div>
<div lang="zxx" style="margin-bottom: 0cm;">
Le site ainsi conçu
changera de disposition selon la taille d'écran de l'appareil sur
lequel il est affiché. Au moyen de CSS et de JavaScript, la
dimension et la disposition des images, titres, textes et autres
éléments pourra se modifier et permettre d'accéder à
l'information du site de façon agréable. Ce type de design fluide
s'oppose au design fixe de la méthode habituelle.</div>
<div lang="zxx" style="margin-bottom: 0cm;">
<br /></div>
<div lang="zxx" style="margin-bottom: 0cm;">
Il existe aussi un autre
moyen de créer un site adapté aux divers appareils; il s'agit de
faire plusieurs versions d'un même site. Ces versions séparées
seront de diverses tailles et seront pensées pour faciliter la vie
de l'utilisateur. Sur un appareil mobile par exemple, on pourrait
trouver des options de géolocalisation ou de recherche de
restaurants à proximité. L'utilisateur d'ordinateur de bureau,
celui qui consulte un site sur sa tablette le soir bien assis dans
son sofa et celui qui navigue sur son cellulaire en se déplaçant,
n'ont pas les mêmes besoins.</div>
<div lang="zxx" style="margin-bottom: 0cm;">
<br /></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<b>Voici une comparaison de
chacune des méthodes :</b></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<br /></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<b><i>Responsive design
(conception réactive) </i>:</b></div>
<ul>
<li><div lang="zxx" style="margin-bottom: 0cm;">
Une seule version doit
être développée</div>
</li>
<li><div lang="zxx" style="margin-bottom: 0cm;">
Intégration plus
complexe (compatibilité avec les navigateurs, CSS et code HTML plus
poussé).</div>
</li>
<li><div lang="zxx" style="margin-bottom: 0cm;">
Conception du site en
blocs modulables.</div>
</li>
<li><div lang="zxx" style="margin-bottom: 0cm;">
Maintenance plus facile</div>
</li>
<li><div lang="zxx" style="margin-bottom: 0cm;">
Adapté pour les sites
informatifs</div>
</li>
<li><div lang="zxx" style="margin-bottom: 0cm;">
Moins de latitude dans
le design (nottamment au niveau des images et de la disposition)</div>
</li>
</ul>
<div lang="zxx" style="margin-bottom: 0cm;">
<b>Versions séparés :</b></div>
<ul>
<li><div lang="zxx" style="margin-bottom: 0cm;">
Utilisation adaptée à
l'appareil sur lequel il est consulté</div>
</li>
<li><div lang="zxx" style="margin-bottom: 0cm;">
Couteux en temps et en
argent lors de la conception</div>
</li>
<li><div lang="zxx" style="margin-bottom: 0cm;">
Maintenance plus
difficile</div>
</li>
<li><div lang="zxx" style="margin-bottom: 0cm;">
Design plus facile car
adapté au média visé</div>
</li>
</ul>
<div lang="zxx" style="margin-bottom: 0cm;">
La conception du site
débutera par la version mobile pour téléphones intelligents,
comportant moins d'éléments et étant plus limitée. Elle se
poursuivra jusqu'à la version la plus complexe, soit la version pour
ordinateur de bureau ou portable.</div>
<div lang="zxx" style="margin-bottom: 0cm;">
<br /></div>
<div lang="zxx">
<span style="color: #565a5b;"><span style="font-family: Lucida Sans Unicode, Lucida Grande, Trebuchet MS, sans-serif;"><span style="font-size: x-small;"><strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: x-small;">Par
Serge Bilodeau</span></span></span></strong></span></span></span></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<br /></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<span style="font-size: medium;"><b>Sources
:</b></span></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<b><span style="font-size: x-small;">Explication détaillée
du concept de « <i>responsive</i> <i>design »</i> (conception
réactive)</span></b></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<span style="font-size: x-small;"><a href="http://www.ergonomie-interface.com/conception-maquettage/responsive-webdesign-adapter-resolutions/">http://www.ergonomie-interface.com/conception-maquettage/responsive-webdesign-adapter-resolutions/</a>
</span></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<span style="font-size: x-small;"><br />
</span></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<b><span style="font-size: x-small;">Tendances du design Web
pour 2012 – bref résumé du « <i>responsive</i> <i>design »
(conception réactive)</i></span></b></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<span style="font-size: x-small;"><a href="http://www.webdesignertrends.com/2012/01/tendances-du-webdesign-pour-2012/">http://www.webdesignertrends.com/2012/01/tendances-du-webdesign-pour-2012/</a>
</span></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<span style="font-size: x-small;"><a href="https://www.axialdev.com/blogue/2012/06/design-les-tendances-web-pour-2012/#.UDvd-dZlSAp">https://www.axialdev.com/blogue/2012/06/design-les-tendances-web-pour-2012/#.UDvd-dZlSAp</a>
</span></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<span style="font-size: x-small;"><a href="http://webdesignledger.com/tips/web-design-trends-in-2012">http://webdesignledger.com/tips/web-design-trends-in-2012</a>
</span></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<span style="font-size: x-small;"><br />
</span></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<span style="font-size: x-small;">Définition du « <i>Responsive
Web Design » </i>(conception
réactive)</span></div>
<div lang="zxx" style="margin-bottom: 0cm;">
<a href="http://fr.wikipedia.org/wiki/Responsive_Web_Design"><span style="font-size: x-small;">http://fr.wikipedia.org/wiki/Responsive_Web_Design</span></a></div>Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com1tag:blogger.com,1999:blog-4410362677414360177.post-72236498016812529942012-08-22T16:43:00.001-04:002016-04-15T13:26:55.152-04:00Tendance Web 2012: les menus fixes<script>
window.location = "http://www.proweb.ca/blogue-details/tendance-web-2012-les-menus-fixes";
</script>
<strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-weight: normal;">Le
Web et les technologies s'y rattachant évoluent rapidement ce qui
entraîne de nouveaux styles graphiques et de nouvelles idées. On
voit apparaitre des pages plus longues, ce qui est particulièrement
vrai pour les blogues, et l'utilisation du 'scroll' est de plus en
plus commun.</span></span></span></span></strong><br />
<div lang="zxx">
<br /></div>
<div lang="zxx">
<strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-weight: normal;">Cette
façon de </span></span></span></span></strong><strong><span style="color: #333333;"><span style="font-family: Segoe UI;"><span style="font-size: small;"><span style="font-weight: normal;">«
</span></span></span></span></strong><strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-weight: normal;">designer
</span></span></span></span></strong><strong><span style="color: #333333;"><span style="font-family: Segoe UI;"><span style="font-size: small;"><span style="font-weight: normal;">»</span></span></span></span></strong><strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-weight: normal;">
les sites a entraîné une utilisation de plus en plus fréquente de
la navigation en position fixe.</span></span></span></span></strong></div>
<div lang="zxx">
<br /></div>
<div lang="zxx">
<strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-weight: normal;">En
effet, les menus sont de plus en plus ancrés dans le haut d'une page
et restent ainsi accessibles en tout temps alors que le contenu
défile sous celui-ci.</span></span></span></span></strong></div>
<div lang="zxx">
<br /></div>
<div lang="zxx">
<strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-weight: normal;">Les
barres latérales de réseaux sociaux et autres informations
pertinentes sont souvent fixés à gauche de l'écran. Elles sont
facilement repérables et ne nuisent en rien au contenu et au visuel
du site, particulièrement depuis l'avénement des écrans
panoramiques.</span></span></span></span></strong></div>
<div lang="zxx">
<br /></div>
<div lang="zxx">
<span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><b>Liens
intéressants:</b></span></span></div>
<div lang="zxx">
<strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: x-small;">11
exemples de menu fixe</span></span></span></strong></div>
<div lang="zxx">
<strong><span style="font-size: x-small;"><a href="http://webdesigncrowd.com/11-inspirational-fixed-position-menus/" target="_blank">http://webdesigncrowd.com/11-inspirational-fixed-position-menus/</a></span></strong></div>
<div lang="zxx">
<b><br />
</b></div>
<div lang="zxx">
<strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: x-small;">21
exemples de menu fixe</span></span></span></strong></div>
<div lang="zxx">
<strong><span style="font-size: x-small;"><a href="http://webdesignledger.com/inspiration/21-examples-of-fixed-position-menus-in-web-design" target="_blank">http://webdesignledger.com/inspiration/21-examples-of-fixed-position-menus-in-web-design</a></span></strong></div>
<div lang="zxx">
<b><br />
</b></div>
<div lang="zxx">
<strong><span style="font-size: x-small;">Le module
d'extension "Sticky Social Bar" pour votre Blogue</span></strong></div>
<div lang="zxx">
<b><span style="font-size: x-small;"><a href="http://codecanyon.net/item/sticky-social-bar/1675421" target="_blank">http://codecanyon.net/item/sticky-social-bar/1675421</a></span><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: x-small;">
</span></span></span>
</b></div>
<div lang="zxx">
<b><br />
</b></div>
<div lang="zxx">
<strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: x-small;">Exemple
d'utilisation du "Sticky Social Bar"</span></span></span></strong></div>
<div lang="zxx">
<b><span style="font-size: x-small;"><a href="http://codecanyon.net/item/sticky-social-bar/full_screen_preview/1675421" target="_blank">http://codecanyon.net/item/sticky-social-bar/full_screen_preview/1675421</a></span><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: x-small;">
</span></span></span>
</b></div>
<div lang="zxx">
<b><br />
</b></div>
<div lang="zxx">
<strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: x-small;">Tutoriel
pour installer 'Sharebar' dans Wordpress</span></span></span></strong></div>
<div lang="zxx">
<b><span style="font-size: x-small;"><a href="http://www.youtube.com/watch?v=rENOWwm4B0o" target="_blank">http://www.youtube.com/watch?v=rENOWwm4B0o</a></span><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: x-small;">
</span></span></span>
</b></div>
<div lang="zxx">
<br />
<br /></div>
<div lang="zxx">
<strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;">Sources:</span></span></strong></div>
<div lang="zxx">
<strong><span style="font-size: x-small;">Article
sur les tendances Web en 2012</span></strong></div>
<div lang="zxx">
<strong><span style="font-size: x-small;"><a href="http://webdesignledger.com/tips/web-design-trends-in-2012" target="_blank">http://webdesignledger.com/tips/web-design-trends-in-2012</a></span></strong><strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: x-small;">
</span></span></span></strong>
</div>
<div lang="zxx">
<br /></div>
<div lang="zxx">
<strong><span style="font-size: x-small;">Article
sur les tendances Web en 2012</span></strong></div>
<div lang="zxx">
<strong><span style="font-size: x-small;"><a href="http://www.webdesignertrends.com/2012/01/tendances-du-webdesign-pour-2012/" target="_blank">http://www.webdesignertrends.com/2012/01/tendances-du-webdesign-pour-2012/</a></span></strong><strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: x-small;">
</span></span></span></strong>
</div>
<div lang="zxx">
<br /></div>
<div lang="zxx">
<strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: x-small;">Site
de tutoriels</span></span></span></strong></div>
<div lang="zxx">
<strong><a href="http://autourdututo.fr/" target="_blank">http://autourdututo.fr/</a></strong><strong><span style="color: #333333;"><span style="font-family: Arial, sans-serif;"><span style="font-size: x-small;"><b><span style="background-position: initial initial; background-repeat: initial initial;">
</span></b></span></span></span></strong>
</div>Anonymoushttp://www.blogger.com/profile/11919347392574671719noreply@blogger.com0