Creation site InternetInternet simple pour tous

Internet facile pour tous !

Fil RSS

Visitez notre site

jeudi 10 novembre 2011

Attention aux ventes marseillaises

Si le nom ne vous dit rien, le principe vous est certainement connu. Vous recevez un coup de téléphone vous annonçant que vous avez gagné un cadeau à venir chercher en couple dans un magasin, de meubles généralement.

Lire la suite

lundi 6 juin 2011

Méfiez-vous des méthodes de vente

L'AWT signale qu'elle reçoit de plus en plus de plaintes de sociétés victimes des méthodes de vente, dites "One shot".

Le principe de cette méthode est simple : le vendeur de la société de création de site Internet démarche le client avec un argumentaire bien étudié et insistant (le client a gagné un concours, il est représentatif d'un secteur d'activité dans lequel le vendeur souhaite s'implanter, les prix proposés ne sont valables que jusqu'au soir...) dont le but est de rencontrer une seule fois le client et de sortir de la négociation avec le contrat signé, ce qui ne lui permet pas d'étudier le contrat à tête reposée.

Certes, cette pratique n'est pas illégale, mais il est à noter que ce système génère une situation mal aisée pour le prospect : celui-ci ne sait généralement pas l'étendue ni la teneur de l'engagement qu'il prend... Et la déconvenue peut être de taille :

  • Le client paie une petite somme par mois, mais est engagé en général pour 48 mois avec des frais de résiliation exorbitant
  • Le prix final, après les 48 mois, dépasse largement le coût communément pratiqué pour un site Internet classique développé par la majeure partie des agences Web
  • Il n'est pas rare de voir plusieurs clients doté de la même interface graphique
  • Le client n'est propriétaire de rien : ni du graphisme, ni du contenu, ni des bases de données ni du nom de domaine...
  • la société de création de site développant le site revend souvent le contrat à des sociétés de crédit-bail ce qui rend la communication assez difficile

Pour éviter ces situations scabreuses, l'AWT donne des conseils pratiques :

  • Contactez un fournisseur de site Internet ayant signé la charte eTIC
  • Utilisez les moteurs de recherche pour vérifier la réputation de l'entreprise envisagée
  • Passez en revue les références du fournisseur et n'hésitez pas à les contacter
  • Ne signez jamais un contrat qui vous engage pour une période dépassant un an
  • Cherchez les conditions générales du fournisseur, lisez-les et vérifiez qu'elles figurent sur le contrat
  • Vérifiez que vous êtes propriétaire de votre site et du nom de domaine
  • Lisez votre contrat à tête reposée et ne signez jamais rien le jour-même
  • Demandez le retrait des clauses que vous estimez douteuses

Source : Damien Jacobs, AWT

mardi 2 février 2010

L'e-commerce en pleine croissance

La crise frappe durement le secteur de la vente traditionnelle... Cela ne fait aucun doute. Par contre, nombreux sont les commerçants qui souhaitent se lancer dans la création d'un site de vente en ligne : quelques 80 boutiques sur Internet voient ainsi le jour mensuellement en Belgique ! Les raisons de ce choix stratégique sont multiples :

  • Les propriétaires d'un site Internet de présentation n'ont qu'à ajouter l'option de vente à leur site statique.
  • Le marché potentiel est gigantesque
  • Il est devenu impérieux d'être présent sur Internet si on veut éviter de souffrir d'avantage de la concurrence.
  • Les concurrents ne sont pas arrêtés par la frontière. Si un belge ne prend pas son créneau de vente, un Français ou un Luxembourgeois s'en chargera sans difficulté. Et ce, d'autant plus que les extensions en .be ne sont pas conditionnées à une présence physique sur le territoire.
  • Le confort pour le client est indéniable : pas besoin de se déplacer, de se parquer, pas de pluie ni de neige, pas de file aux caisses ou aux cabines d'essayage...
  • Les prix pour le client sont souvent plus intéressants que dans les commerces traditionnels
  • Le chiffre d'affaire des commerçants belges en ligne a augmenté de 20% en 2009, même si le montant moyen de la transaction a baissé de 10 %, ce qui tend à prouver que les clients ont pleinement confiance dans les moyens de paiement proposés.
  • Le risque financier d'une telle entreprise sur Internet est minime par rapport au chiffre d'affaires
  • Les entreprises wallonnes peuvent bénéficier d’une prise en charge de 50% par le biais d’une aide de la Région Wallonne.

Alors... Contactez-nous ! Nous pourrons construire ensemble votre catalogue et proposer la vente en ligne grâce à Ogone dont nous sommes partenaire certifié

jeudi 30 avril 2009

Payer cash sur Internet

De nombreux clients potentiels de vente en ligne rechignent à laisser leurs données de cartes de crédit sur Internet.

La paysafecard est un nouveau moyen de paiement en ligne qui est aussi simple d'utilisation que l'argent liquide. Nous ne devez posséder ni compte, ni carte de crédit : la paysafecard est une carte prépayée grâce à laquelle vous pouvez payer sur Internet.

Vous avez le choix entre différentes paysafecards d’une valeur de 10, 25, 50 ou 100 euros. Ces montants relativement faibles limitent le risque de pertes financières si vous veniez à la perdre.

Sur votre paysafecard, vous trouverez un code PIN à 16 caractères. Vous donnez ce code à la boutique virtuelle (site Internet de vente en ligne) dans laquelle vous voulez acheter ou jouer. Et c’est tout, le paiement est effectué sans avoir à communiquer la moindre donnée personnelle ou coordonnée bancaire. En fonction du point de vente, la paysafecard vous est délivrée soit sous forme de carte publicitaire, soit sous forme de récépissé électronique. La forme de votre paysafecard n'a aucune influence sur son fonctionnement. Vous pouvez également choisir d'utiliser votre paysafecard pour payer en devises étrangères.

Comment payer avec la paysafecard ?

  1. Entrez simplement le code PIN à 16 caractères dans la fenêtre de paiement. Pour les sommes plus importantes, vous pouvez sans aucun problème combiner jusqu'à dix paysafecards en indiquant plusieurs codes PIN.
  2. Cliquez ensuite sur "Paiement", validez avec "OK" et le paiement est effectué.

mardi 14 avril 2009

Se lancer dans les achats en ligne

La vente en ligne est un secteur qui, en ces périodes un peu plus difficiles, a le vent en poupe. Les avantages de ce type de commerce sont indéniables pour le marchand :

  • Il économise certaines charges comme le loyer et les frais de fonctionnement traditionnels d'un vrai magasin
  • la zone de chalandise est étendue au niveau international
  • La population actuelle des internautes est jeune et a un bon pouvoir d'achat
  • Le marché est en croissance constante
  • Les systèmes de paiement sont bien sécurisés

L'acheteur, lui aussi, en tire des bénéfices appréciables :

  • Le magasin en ligne est ouvert 24 heures sur 24, 7 jours sur 7
  • Les ventes en lignes proposent de nombreux type d'articles, dont certains sont difficilement accessibles dans le commerce traditionnel
  • On n'est pas harcelé par des vendeurs
  • Un magasin bien conçu proposera des fiches bien détaillées de tous les produits proposés à la vente
  • Les coûts de gestions étant réduits, les produits sont vendus à des prix intéressants
  • Les produits accessibles depuis le catalogue sont en stock

Pourtant, certains clients ne se sont pas encore lancé dans l'aventure, souvent à cause d'un manque de connaissances sur le sujet.

A l'initiative du SPF Economie, PME, Classes moyennes et Energie, Infoshopping, un site didactique a été mis en ligne. Ce site a pour objectif de vous faire découvrir de manière ludique et conviviale les règles applicables au commerce électronique en Belgique. En tant que consommateur, ce site illustrera toutes les étapes de l'achat en ligne ainsi que vos droits et obligations à chacune d'elle.

Pour cela, plusieurs portes d'entrées sont proposées :

vendredi 6 février 2009

Google News dans votre site

Envie de proposer un contenu sur votre site ou votre blog ? Pas le temps d'écrire de nouveaux articles ?

Google News propose une solution grâce au nouveau NewsShow Wizard de Google. Il s'agit d'un bout de code à installer à l'endroit où vous souhaitez voir s'afficher en rotation les dernières dépêches publiées sur Google News.

Le principe consiste à paramétrer la taille du bloc (728×90 ou 300×250), la langue des news, les rubriques d’actualités et le nombre de news à afficher. Lorsque c'est fait, vous recevez le code à coller dans votre page, à l'endroit où vous souhaitez les voir s'afficher.

Voici un exemple de pavé 300×250 :

mardi 14 octobre 2008

Testez votre site sous toutes les coutures

Hier, je vous ai présenté un site proposant 94 outils pour monitorer votre blog.

Test Everything propose un service similaire. Vous y trouverez une centaine d'outils pour analyser votre site ou votre blog. Comme le site proposé hier, il ne teste pas tout lui-même , mais suggère des liens vers les outils répartis en grandes sections :

  • Validateurs CSS et HTML
  • Outils de référencement
  • Services Sociaux
  • Proxies Web
  • Outils de réseaux
  • Outils pour les textes
  • Outils pour les images
  • Outils divers

vendredi 10 octobre 2008

CMS Made Simple

Lorsque nous développons de sites utilisant un CMS, nous portons notre choix sur deux d'entre eux.

Le premier est NEO CMS, le second CMS Made Simple aussi appelé CMSMS par les intimes... C'est ce dernier que je vais vous présenter brièvement car sa nouvelle version nous a particulièrement impressionnés.

CMS Made Simple est donc, comme son nom l'indique, un système de gestion de contenu qui permet à un rédacteur de site de modifier son site en ligne (ajout, suppression, modification de pages et d'images...) sans aucune connaissance informatique particulière.

Ses points forts :

  • la modularité : il est extensible grâce à des modules gérés dans l’interface d’administration
  • le système des gabarits qui permet, à un développeur Web d'intégrer et de modifier très facilement des modules dans de l'HTML classique. Tout fonctionne sur le système de modèle de pages (templates) où est contenu le code HTML de vos pages Web. Une ou plusieurs feuille de style (CSS) sont attachées à chaque modèle de page. Puis chaque page Web de votre site utilise un de ces modèles.
  • l’interface de gestion très ergonomique
  • La gestion très simple de la structure : L'ensemble des pages composent votre site Web. Il suffit donc de penser composer la structure de votre site en pages et sous-pages.

mardi 30 septembre 2008

Wix crée gratuitement votre site en Flash

Flash est un système d'animation créé par la société Macromedia. Il est utilisé pour réaliser des graphiques animés et interactifs, des présentations, des jeux et des sites Internet complet. L'apprentissage de ce logiciel est assez long et son prix de vente ne le met pas à la portée de toutes les bourses.

Pour les internautes qui souhaite réaliser un site ou des animations en flash sans avoir les connaissances requises, Wix est l'outil rêvé, car gratuit et disponible en ligne. Vous pouvez démarrer votre travail en utilisant un des thèmes départ qui servira de base à votre animation. Et si, contre toute attente, rien ne vous plaisait dans les templates proposés, il vous reste encore la possibilité de partir d'une page blanche...

Il vous restera ensuite à y intégrer vos textes, photos, musiques ou tout autre élément...

Bien sûr, comme pour tout nouveau logiciel, il faudra un certain temps pour vous habituer à l'interface de gestion et l'exploiter dans toute sa puissance.

Lorsque votre site sera terminé, vous pourrez alors choisir de l'héberger directement sur Wix ou sur un hébergement de votre choix. Seule ombre au tableau qui exclu son emploi dans le cadre d'un site professionnel, la publicité intégrée à l'animation que vous ne pourrez pas retirer en raison de la gratuité d'utilisation.


YouTube

vendredi 12 septembre 2008

CSS Menu Builder : générateur de menus CSS

Lorsque l'on crée un site, on se trouve toujours confronté, à un moment ou un autre, à la création d'un menu. Certains développeurs partent de rien et créent eux-même tous les éléments dont ils ont besoin. D'autres préférent visiter certains sites de ressources en se se basant sur les exemples donnés. Les moins avertis choisiront enfin d'en prendre un tout fait.

Pour les deux dernières catégories, voici un site, CSS Menu Builder, qui propose un générateur permettant de créer 3 types de menus en CSS :

  • des menus horizontaux
  • des menus verticaux
  • des chemins de progression ou "fils d’Ariane"

Selon les options choisies, vous pourrez ainsi choisir parmi plus de 30 menus horizontaux, 700 menus verticaux et 200 combinaisons de chemins de progression.

La manière de procéder est très simple :

  1. Choisissez une image de fond
  2. Choisissez une image de menu
  3. Choisissez une couleur
  4. Copiez-collez le code HTML, la CSS, les images de manière individuelle ou en téléchargeant un fichier ZIP
  5. Intégrez le tout dans vos pages

mardi 9 septembre 2008

Liste des caractères spéciaux pour HTML et le XHTML

Exemple Valeur HTML Valeur numérique Description
      espace insécable
¢ ¢ ¢ centime
£ £ £ livre
¤ ¤ ¤ signe monétaire
¥ ¥ ¥ yen
¦ ¦ ¦ barre verticale brisée
§ § § paragraphe
¨ ¨ ¨ tréma
© © © copyright
ª ª ª indicateur ordinal
« « « guillemet gauche
¬ ¬ ¬ pas de signe
­ ­ ­ triat d'union
® ® ® marque enregistrée
¯ ¯ ¯ macron
° ° ° degré
± ± ± plus ou moins
² ² ² exposant deux
³ ³ ³ exposant trois
´ ´ ´ accent aigu
µ µ µ micro
¶ ¶ signe de paragraphe
· · · point moyen
¸ ¸ ¸ cédille
¹ ¹ ¹ exposant un
º º º indicateur ordinal
» » » guillemets droite
¼ ¼ ¼ fraction un quart
½ ½ ½ fraction un demi
¾ ¾ ¾ fraction trois quart
¿ ¿ ¿ point d'interrogation inversé
À À À A majuscule avec accent grâve
Á Á Á A majuscule avec accent aidu
   A majuscule avec accent circonflexe
à à à A majuscule avec tilde
Ä Ä Ä A majuscule avec tréma
Å Å Å A majuscule avec degré
Æ Æ Æ AE majuscule
Ç Ç Ç C cédillle majuscule
È È È E majuscule avec accent grâve
É É É E majuscule avec accent aigu
Ê Ê Ê E majuscule avec accent circonflexe
Ë Ë Ë E majuscule avec tréma
Ì Ì Ì I majuscule avec accent grâve
Í Í Í I majuscule avec accent aigu
Î Î Î I majuscule avec accent circonflexe
Ï Ï Ï I majuscule avec tréma
Ñ Ñ Ñ N majuscule avec tilde
Ò Ò Ò O majuscule avec accent grâve
Ó Ó Ó O majuscule avec accent aigu
Ô Ô Ô O majuscule avec accent circonflexe
Õ Õ Õ O majuscule avec tilde
Ö Ö Ö O majuscule avec tréma
× × × multiplication
Ø Ø Ø O majuscule barré
Ù Ù Ù U majuscule avec accent grâve
Ú Ú Ú U majuscule avec accent aigu
Û Û Û U majuscule avec accent circonflexe
Ü Ü Ü Latin capital letter U with diaeresis
Ý Ý Ý Y majuscule avec accent grâve
à à à a minuscule avec accent grâve
á á á a minuscule avec accent aigu
â â â a minuscule avec accent circonflexe
ã ã ã a minuscule avec tilde
ä ä ä a minuscule avec tréma
å å å a minuscule avec degré
æ æ æ ae minuscules
ç ç ç c cédille minuscule
è è è e minuscule avec accent grâve
é é é e minuscule avec accent aigu
ê ê ê e minuscule avec accent circonflexe
ë ë ë e minuscule avec tréma
ì ì ì i minuscule avec accent grâve
í í í i minuscule avec accent aigu
î î î i minuscule avec accent circumflexe
ï ï ï i minuscule avec tréma
ñ ñ ñ n minuscule avec tilde
ò ò ò o minuscule avec accent grâve
ó ó ó o minuscule avec accent aigu
ô ô ô o minuscule avec accent circumflexe
õ õ õ o minuscule avec accent grâve
ö ö ö o minuscule avec tilde
÷ ÷ ÷ division
ø ø ø o minuscule barré
ù ù ù u minuscule avec accent grâve
ú ú ú u minuscule avec accent aigu
û û û u minuscule avec accent circumflexe
ü ü ü u minuscule avec tréma
ý ý ý y minuscule avec accent aigu
ÿ ÿ ÿ u minuscule avec tréma
" " " guillemets droits
& & & éperluette
< < plus petit
> > plus grand
ΠΠΠOE majuscule
œ œ œ oe minuscule
Š Š Š S majuscule avec accent circonflexe inversé
š š š s minucule avec accent circonflexe inversé
Ÿ Ÿ Ÿ Y majuscule avec tréma
ˆ ˆ ˆ accent circonflexe
˜ ˜ ˜ tilde
– – triat d'union
— — tiret cadratin
‘ ‘ marque de citation simple gauche
’ ’ marque de citation simple droite
‚ ‚ marque de citation bas
“ “ marque de citation double gauche
” ” marque de citation double droite
„ „ marque de citation double bas
† † poignard
‡ ‡ double poignard
‰ ‰ pour mille
€ € euro

jeudi 28 août 2008

Enlever les pointillés autour des liens

En présentant l'évolution d'un site statique en construction, j'ai expliqué au client que nous avions externalisé le menu. De cette manière, il pourra en changer l'ordre des items et son contenu en modifiant un seul fichier, lui évitant ainsi de devoir travailler sur tous les fichiers du site. J'ai alors pu constater que, graphiquement, nous pouvions améliorer l'aspect du menu en supprimant les pointillés entourant l'item lors du clic.

Ce pointillé peut être géré en CSS par le biais de la propriété "Outline" (contours). Les contours, à l'inverse des bordures, n'occupent pas d'espace et sont toujours tracés au-dessus de la zone qu'ils délimitent.

Pour supprimer le pointillé entourant le lien, il suffit de préciser que vous ne souhaitez pas voir les contours sur les liens : a {outline: none;}

Graphiquement, cette astuce est assez intéressante. Il faut cependant être conscient qu'il s'agit sans doute d'une entrave à la navigation par clavier. En effet, cette modification empêche les personnes qui utilisent l'appui sur la touche de tabulation de visualiser l'endroit où elles se situent dans le menu. A utiliser en connaissance de cause, donc !

mercredi 16 juillet 2008

Créez vos .htaccess avec htaccesseditor.com

Pour rappel, le fichier .htaccess est un fichier texte placé à la racine d'un site internet qui permet de gérer les droits d'accès, la réécriture d'url, de gérer des redirections, à personnaliser vos pages d"erreur et de bien d'autres paramètres.

Le problème majeur est l'écriture de ce type de fichier qui n'est pas toujours très aisée : le langage n'est pas forcément intuitif et la moindre erreur de frappe est interdite. Il n'est donc pas rare de s'arracher les cheveux pour un caractère oublié ou erroné.

Le site htaccesseditor.com simplifie cette tâche. Développé actuellement en chinois et en anglais (le français semble encore en cours de traduction), il utilise votre demande formulée au travers de formulaires pour écrire le code de ce fichier à votre place :

  • Autorisation d’accès aux fichiers
  • Authentification basique
  • Personnalisation de la page 404
  • Établissement de la page par défaut
  • Gestion des redirections
  • Gestion des restrictions d’accès

lundi 21 avril 2008

Des pages Web conformes au W3C

Le projet Amaya n'est pas très récent puisqu'il date de 1996.

Il propose un logiciel qui sert à la fois de navigateur et d'outil d'édition, entièrement gratuit, qui aidera les développeurs à proposer des pages Web compatibles avec le W3C. Grâce à lui, vous pourrez composer des pages en (X)HTML, CSS, XML, MML et SVG
Proposé nativement en anglais, il supporte également le français, l'allemand, l'espagnol, le portugais, l'italien et le finnois.

Avec cette version 10, Amaya offre une interface utilisateur complètement repensée et de nombreuses possibilités nouvelles dont l'édition guidée par des modèles. Vous pourrez manipuler des pages Web contenant des formulaires, des tables et exploitant les caractéristiques les plus avancées de XHTML.

Quelques caractéristiques :

  • Cinq profils d'édition différents sont fournis pour adapter l'ensemble des menus et des outils à votre propre usage. De plus, les panneaux d'outils peuvent être affichés à gauche ou à droite, à votre convenance pour chaque panneau (voir les Préférences).
  • Amaya est un éditeur structuré. Avec la touche F2 ou Esc vous pouvez sélectionner l'élément englobant dans la structure du document, pour appliquer les fonctions d'édition (copier, coller, attributs, etc.) au bon élément.
  • Un document peut être édité à travers plusieurs vues synchronisées. Le menu Vues vous permet d'ouvrir les vues Structure, Source, Liens, etc. Un double clic sur la ligne en bas ou à droite du document ouvre ou ferme la seconde vue.
  • Un document peut être publié directement sur un serveur Web. Avec la méthode http PUT vous pouvez écrire sur un serveur, à condition que vous y soyez autorisé. C'est aussi simple que de sauver le document localement.
  • Les liens peuvent être créés par un simple clic. Pour créer un lien il suffit de cliquer sur sa cible (utilisez le menu Vues / Montrer les cibles pour visualiser les cibles disponibles).
  • Amaya offre des commandes avancées comme la numérotation des sections, la génération d'une table des matières avec liens, l'insertion d'une date de mise à jour, la transformation de structure...

jeudi 27 mars 2008

Sauvez les développeurs

Selon Xiti Monitor, les visiteurs utilisant Internet Explorer (toutes versions confondues) représentaient encore 66,1% des tous les Internautes en décembre 2007

A présent, si l'on analyse l'usage de chaque version, on se rend compte que Firefox 2 génère 93% des visites Mozilla Firefox alors que IE7 ne couvre que 46% des visites Internet Explorer. Restent donc 35,7 % de tous les internautes qui utilisent IE6.

Sur le ton de l'humour, le site Save The Developers souhaite mettre fin à cette version détestée des développeurs et des intégrateurs. Il enjoint les utilisateurs d'Internet Explorer 6 à abonner ce navigateur au profit d'Internet Explorer 7. En effet, IE6 n'a jamais respecté les standards préconisés par le W3C ce qui engendre des problèmes de vulnérabilité et de sécurité. Les développeurs qui souhaitent proposer des sites visibles dans IE6, IE7 Firefox et Safari doivent donc faire preuve d'une bonne dose d'ingéniosité et de travail pour y parvenir.

Ils espèrent que cette campagne aura comme conséquence l'abandon d'IE 6, ce qui permettra de proposer un meilleur environnement de navigation pour les internautes et un mode de travail moins stressant et compliqué pour des les développeurs. Pour les soutenir, vous pouvez :

  • Utiliser un code Javascript sur votre site. Ce dernier affiche une invitation à upgrader IE6 vers IE7
  • Porter le T-Shirt de l'association

jeudi 6 mars 2008

Url rewriting

URL rewriting signifie "Réécriture des URL". Quelle peut être l'utilité d'une telle démarche ?

Imaginons que vous disposiez d'un site dynamique. Il y a, dès lors, fort à parier que votre site présente des adresses URL du genre : http://monbeausite.be/index.php?album=01&id=24

Mis à part le fait que ce n'est pas très lisible, que l'adresse est loin d'être mémorisable, le problème principal est que Google connait encore de grosses difficultés à indexer des pages dont l'URL contient ces signes spéciaux que sont =, & et autres séparateurs. la manière de contrer ce problème est de forcer le serveur en lui "demandant" de présenter l'URL sous une autre forme, une autre "écriture" qui soit interprétable par les moteurs de recherche : http://monbeausite.be/index-album-01-id-24.html par exemple.

A cette fin, on utilise un fichier nommé .htaccess qui n'est pas toujours simple de paramétrer.

Pour vous aider dans cette phase, le site SEO offre un nouvel outil bien agréable : un générateur permettant de créer le fichier nécessaire à cette transformation. Indiquez l'adresse, la Captcha qui préserve le site des robots et cliquez sur "Submit". Vous verrez alors s'afficher le code nécessaire :

Options +FollowSymLinks
RewriteEngine on
RewriteRule index-album-(.*)-id-(.*)\.html$ index.php?album=$1&id=$2

  1. Copiez-collez le code fournit dans un fichier texte.
  2. Nommez ce fichier .htaccess
  3. Envoyez le fichier à la racine du site... C'est tout. Si ce n'est que vous devrez aussi penser à renommer les liens suivant la nouvelle terminologie pour assurer un bon suivi des moteurs.

mercredi 27 février 2008

50 + 10 questions pour évaluer la qualité de son site Web

Sur son blog, Carsten Cumbrowski a publié 50 questions pour évaluer la qualité de son site Web. Il a choisi un classement par catégorie qui facilite la lecture et l'analyse. Pour votre propre facilité, les voici traduites en français :

Accessibilité

  1. Le contenu est structurellement séparé des éléments de navigation ?
  2. Le site est compatible avec tous les navigateurs ?
  3. Le site est-il compatible avec les normes du W3C , HTML et CSS ?
  4. Toutes les images importantes disposent-elles de balises «alt» ?
  5. Des alternatives textuelles sont-elles proposées en remplacement de l'information essentielle contenue dans des images ou des fichiers multimédia ?

Navigation

  1. Le texte des liens est-il suffisamment explicite ?
  2. Quel est le nombre maximum de clics nécessaire pour atteindre une page située dans les profondeurs du site ?
  3. Une alternative textuelle existe-t-elle en remplacement de toute animation d’accueil de système de navigation en Java, Javascript ou Flash ?
  4. Une réponse est-elle donnée immédiatement (0,1 seconde) après qu’un clic soit effectué sur un lien hypertexte?
  5. Tous les éléments cliquables sont-ils facilement identifiables ?
  6. N’existe-t-il aucune confusion entre les éléments textuels classiques et les éléments de navigation ?
  7. La police et sa taille sont-elles judicieusement choisies.
  8. Quelques secondes suffisent-elles pour découvrir l’objectif du site ?
  9. Existe-t-il un appel à l’action sur chaque page ? N’y a-t-il pas d’impasses ?
  10. Un plan du site cohérent est-il disponible ? Sinon, la recherche par mot-clé est-elle disponible ? Note: les sites importants de plusieurs milliers de pages se doivent d’avoir un formulaire de recherche digne de ce nom.

Design

  1. Le design du site est-il esthétique ?
  2. Les couleurs utilisées sont-elles harmonieuses et logiquement associées ?
  3. Les choix de couleurs sont visuellement accessibles ?
  4. Le design est adapté à votre lectorat ? La taille standard du texte devrait être lisible, pour les visiteurs qui ne savent pas comment ajuster leur navigateur.
  5. Les polices doivent être facilement lisibles et dégradées avec élégance et ce quelle que soit la résolution d’écran. ?

Contenu

  1. Le contenu du site est-il succinct mais instructif ?
  2. Le style rédactionnel du site est-il adapté à ses visiteurs et à ses habitudes linguistiques ?
  3. Le corps du texte est-il inférieur à 80 caractères par ligne ?
  4. Les textes peuvent-ils être redimensionnés par le biais du navigateur ?
  5. Le contraste entre le texte et sa couleur de fond est-il suffisant pour faciliter la lecture ?
  6. Le texte est-il divisé en blocs lisibles et est-il mis en valeur par l’usage de titres, de sous-titres et d’emphases facilitant la lecture rapide ?
  7. Existe-t-il des envois vers des descriptions détaillées pour les sujets ou les termes trop compliqués ?
  8. Avez-vous une page « A propos » permettant d’identifier l’auteur de contenus externes à votre site ?
  9. Avez-vous des témoignages publiés sur votre site?
  10. Mettez-vous régulièrement à jour le contenu de votre site ?

Sécurité

  1. Evitez-vous les failles de sécurité évidente ?
  2. Vos formulaires acceptent-ils les caractères spéciaux?
  3. Vos répertoires privés sont-ils protégés par des mots de passe via le fichier .htaccess ?
  4. Vos répertoires publics (cgi-bin, images…) sont-ils accessibles leur accès est-il bloqué ?
  5. Les données des clients sont-elles stockées en ligne? Si oui, cette base de données est-elle correctement protégée contre les accès externes ?

Autres considérations techniques

  1. Est-ce que le site charge rapidement, quelle soit-le type de connexion ?
  2. Tous les liens (internes et externes) sont-ils valides et actifs ?
  3. Les scripts sont-ils exempts d’erreur ?
  4. Le site est-il exempt d’erreur côté serveur ?

Autres considérations Marketing

  1. Le site est-il correctement optimisé pour les moteurs de recherche (texte essentiel mis en évidence, balises de titre adéquates, titres utilisant les balises <H>, liens sortants fiables sans erreur…) ?
  2. La page d’accueil incite-t-elle le visiteur à visiter le site ou à accéder au panier ?
  3. Le site contient-il des éléments encourageant le visiteur à revenir ultérieurement (concours, newsletter, en parler à un ami, forum, une barre d’outils téléchargeable, des flux RSS…) ? Avez-vous différents titres pour chaque page qui commencent (ou tout au moins comme 2ème ou 3ème mot) avec le mot-clé qui décrit au mieux le contenu ou le sujet de la page. ?
  4. Le fichier robots.txt est-il configuré?
  5. Un sitemap au format xml est-il disponible ?
  6. Chaque page est-elle accessible par un lien HTML en dur (pas de lien en JavaScript ou en Flash)?
  7. Toutes les pages contiennent-elles au minimum une partie de texte ? (Si on supprime toutes les images, vidéos, animations flash, applets Java et codes JavaScript , le reste renseigne-t-il toujours efficacement sur les objectifs de la page ?)
  8. Chaque page est-elle accessible via une URL unique ou plusieurs URL sont-elles disponibles (ce qui pose un problème de duplication de contenu pour les moteurs de recherche).

Mentions légales

  1. Votre page de contact contient-elle une adresse « physique », un numéro de téléphone (éventuellement gratuit) et un formulaire de contact par E-Mail ?
  2. La page des conditions générales de vente est-elle disponible partout où vous proposez des éléments à la vente et qui nécessite l’accord de l’acheteur.
  3. Votre politique de confidentialité est-elle en accessible sur les formulaires sur lesquels vous collectez des données personnelles ?

Ces 50 questions ont été complétées par 10 autres que je vous invite à lire également.

vendredi 15 février 2008

CSSHardcore : ressources css pour webmaster

Csshardcore est un site proposant une galerie de sites Web entièrement conçus à l'aide des CSS.

Sous celle-ci, une liste de liens qui constitue une véritable mine d'or en terme d'inspiration CSS : blogs, structure de layouts et templates, menus de navigation, techniques avancées, outils et services divers... De quoi passer des heures de lecture et de puiser de l'inspiration pour votre propre site !

mercredi 13 février 2008

Votre galerie photos Travelr

Travelr est une galerie de photos gratuite pour votre site dans laquelle les photos sont situées géographiquement sur une carte du monde. Vous pouvez cliquer ici pour le voir en action.

Chaque emplacement doit être défini une première fois. Vous ne devrez donc pas définir les coordonnées géographique de chaque photo.

Comment employer Travelr ?

  1. Créez un compte Flickr et téléchargez quelques photos ou utilisez le compte déjà existant.
  2. Ajoutez les geotags à quelques photos.
  3. Ajoutez les étiquettes précisant la localisation de toutes vos photos en utilisant les étiquettes définie à l'étape précédente.
  4. Après avoir téléchargé les archives Zip de Travelr, extrayez-les et téléchargerez-les sur votre serveur Web.
  5. Accédez au fichier ''travelr_config.xml '. Ouvrez-le dans n'importe quel éditeur de texte et voyez les instructions décrivant la manière dont modifier ce dossier.
  6. Téléchargez les dossiers sur votre site Web. Veuillez vous assurer que chacun des 4 dossiers inclus dans le paquet de téléchargement est bien téléchargé.

mardi 12 février 2008

Récupérer des fichiers effacés

Il nous est tous arrivé, la rage au ventre, de nous rendre compte qu'on avait validé l'effacement d'un fichier et d'avoir vidé la corbeille alors qu'il ne fallait pas le faire. Plus possible, dès lors, de le récupérer ? Pas forcément.

Undelete+, un outil gratuit, permet de récupérer les données effacées par erreur de votre disque dur. Un moteur de recehrcher vous permettra même de faire le tri dans tous les fichiers récupérables.

Aucun installation n'est nécessaire, vous pourrez donc aussi le copier sur une clé USB afin de devenir le "récupérateur" de vos amis...

vendredi 1 février 2008

Ressources pour les développeurs

Après les 419 liens pour les Webdesigners, voici une autre source d'information assez riche pour les développeurs : le Web Developer's Fiel Guide

Comme pour le site précédemment décrit, vous trouverez ici site plusieurs centaines de ressources dans des domaines très variés qui vous accompagneront lors de vos créations, et ce, dans des domaines assez larges. Une vrai mine d'or !

jeudi 24 janvier 2008

doTemplate crée gratuitement votre template

Tout le monde n'a pas des goûts ou des compétences de designer. Le service proposé par doTemplate devrait intéresser les personnes dans ce cas et ne disposant pas de budget pour faire appel à l'un d'eux.

DoTemplate propose en effet de générer des templates (un template est un anglicisme désignant un modèle de présentation des données d'une page Web) en ligne gratuitement. La procédure, même si elle est en anglais, est relativement simple :

  1. vous choisissez un template parmi les 16 proposés
  2. vous l'adatez à votre goût : arrière-plan, conteneur, bannière, titre, slogan, navigation, police
  3. vous validez votre choix
  4. vous téléchargez le fichier compressé.

Dans le Zip, vous trouverez le fichier CSS, les images qui composent le template ainsi qu’un fichier qu'il conviendra de renommer index.html ou home.html selon le serveur sur lequel votre site sera hébergé.

vendredi 14 décembre 2007

Insérer du JavaScript dans des pages HTML

Il existe 2 façons d'intégrer un code JavaScript sur vos pages. Les deux fonctionnent de manière similaires mais ne peuvent être mises sur un pied d'égalité au niveau du référencement dans les moteurs de recherche. En effet, si vous intégrez le code comme illustré dans le premier cas, votre code est écrit intégralement dans la page et augmente le nombre de mots qui la composent... Faisant perdre un peu de poids aux mots importants de votre contenu. Le second avantage de cette méthode est que le fichier ne sera chargé qu'une seule fois par le navigateur et stocké dans son cache s'il apparait sur plusieurs pages. D'une manière comme d'une autre, sachez que les robots n'exécutent pas le Javascript... Evitez donc les menus exclusivement écrits de cette manière.

Insérer le code directement sur votre page :
Il est conseillé de "masquer" les scripts par des balises commentaires qui permettront de cacher un script incompréhensible par les anciens navigateurs et les internautes qui ont désactivé le JavaScript dans les paramètres de leur navigateur. Vous pouvez également utiliser la balise <noscript> afin d'écrire un texte de remplacement qui sera interprété par les moteurs de recheche.

<script language="javascript">
<!- - votre script ici //-->
</script>
<noscript>texte pour les anciens navigateurs et les moteurs de recherche</noscript>

Renseignez-vous bien si ce code doit être inséré dans le HEAD ou dans lee BODY de votre fichier.

Appeler à un script extérieur :
Vous pouvez intégrer le code de votre script dans un fichier texte que vous enregistrez avec l'extension .js
Il suffit ensuite d'appeler ce fichier par une simple balise :

<script type="text/javascript" src="fichier.js"></script>

lundi 10 décembre 2007

Gérer les thumbshot de votre site

ThumbShots est un service gratuit de ThumbShots.org. Il permet d'afficher un aperçu graphique du site correspondant à une URL. Ces thumbshots rendent votre lien plus attrayant et permettent parfois d'avoir un taux de clic plus important. Si vous souhaitez obtenir un thumbshot de votre site, vous pouvez remplir le formulaire se trouvant sur cette page.

Sachez également que, pour y parvenir, vous devrez enregistrer votre site dans l'annuaire de DMOZ.

Votre site, de son côté, va continuer à évoluer... Le robot de Thumbshots détermine automatiquement si la vignette de votre site doit être mise à jour plus ou moins fréquemment selon la fréquence de ses mises à jour. La plupart des sites changent à peine ou le changement est trop subtil pour que l'œil puisse le détecter en raison de la petitesse de la vignette. Avec le temps, le robot s'ajustera pour assortir de façon optimale l'activité de votre site à sa vignette. Mais il se pourrait que vous veuillez, pour une raison quelconque, que la vignette soit modifiée le plus vite possible.

Dans ce cas, vous pouvez vous rendre sur cette page. Vous pourrez forcer manuellement le robot à visiter votre site. Votre thumbshot sera mis à jour normalement dans un délai de 72 heures.

lundi 3 décembre 2007

419 liens pour les webdesigners

A la recherche de ressources, d'idées ou d'autres pistes pour pouvoir améliorer votre site ?

For Webdesigners est fait pour vous ! Ce site propose une série de liens dans des domaines très variés : ajax, blogs, coleurrs, CSS, flash, polices, forums, photos gratuites, générateurs, sources graphiques, icônes, inspiration, magazines, tutoriels Photoshop, stock de photos, templates, xhtml.

Si vous trouvez qu'un site se devrait de figurer dans leur liste, vous pouvez le signaler en utilisant le formulaire destiné à cet effet.

vendredi 30 novembre 2007

Créer une favicon avec Genfavicon

A plusieurs reprise, je vous ai parlé de la manière de créer une favicon. Pour rappel, une favicon (contraction de "icône de favoris"), est une petite icône liée à un site Web ou à une page Web particulière, qui s'affiche à gauche de l'URL dans la barre d'adresse de la plupart des navigateurs. Les tailles les plus communes, exprimées en pixels, sont : 16x16, 32x32, 48x48, 64x64 ou 128x128.

Un autre site que FavIcon from Pics que je citais précédemment, permet maintenant de créer votre favicon : Genfavicon. Et comme souvent sur ce genre de site, la procédure est très simple :

  1. Uploadez une image (dont vous fournissez l'URL ou que vous sélectionnez sur votre disque dur). Seuls les formats jpg, gif et png sont supportés et sa taille ne peut excéder 9 Mo.
  2. Cliquez sur le bouton "Upload image"
  3. Après avoir été téléchargée sur le serveur, l'image s'affiche dans un cadre de prévisualisation. Sélectionnez l'image entière ou seulement une partie de celle-ci en réglant la taille du bloc transparent qui est superposé à l'image uploadée. Vous ne pouvez choisir qu'une section carrée en raison de la taille des favicons.
  4. Dans le cadre n°2, de couleur verte, indiquez la taille souhaitée pour votre favicon (voir plus haut pour les différentes possibilités)
  5. Cliquez sur le bouton "Capture & Preview"
  6. Si le résultat vous convient, téléchargez l'icône (Download favicon). Dans le cas contraire, modifiez la sélection ou la zone de l'image et cliquez à nouveau sur le bouton.

Il est possible de télécharger la favicon au format ad hoc ou jpg... Ce qui, à mes yeux, présente moins d'intérêt.

mercredi 28 novembre 2007

Des photos aux coins arrondis

Vous voulez ajouter, sur votre site ou votre blog, une photo dont les coins sont arrondis.Vous pouvez évidemment le faire avec un logiciel comme Photoshop ou Gimp. Mais peut-être que ces programmes vous semblent hermétiques... Vous pouvez alors utiliser les services en lignes de RounPic

La démarche est très simple :

  1. Sélectionnez une photo sur votre disque dur ou indiquez son url, si vous préférez une image en ligne (la taille maximale est de 1 Mb)
  2. Cliquez sur le bouton "Round it"
  3. Patientez le temps de chargement de la photo sur le serveur de round it
  4. Choisissez la taille du coin arrondi en faisant glisser le curseur
  5. Précisez la couleur de fond de l'arrondi (background)
  6. Indiquez la taille de la photo au format terminé : vous pouvez la réduire (en gardant ou non les proportions) ou la laisser à sa taille d'origine
  7. Déterminez la qualité finale de la photo. C'est ce paramètre qui va en déterminer le poids en Ko. Plus la qualité est élevée, plus l'image sera "lourde"... Et inversement.
  8. Attribuez un nom à la photo
  9. A tout moment, vous pouvez vérifier le résultat en cliquant sur "Preview", mais cette avant-dernière étape permet de ne pas devoir tout recommencer en cas d'erreur
  10. Téléchargez la photo en cliquant sur "Download".

vendredi 23 novembre 2007

CSS Type

Dans la gamme des outils destinés à aider le développeur, voici CSSType.

Ce site permet, en utilisant un formulaire avec des menus déroulant, de choisir, de tester le rendu d’une police de caractères et de rédiger la CSS correspondant à vos choix. Les polices proposées sont celles qui sont universellement reconnues par tous les navigateurs.

  1. Commencez par introduire le texte que vous devez rédiger dans la zone de texte supérieure ou choisissez l'un des 5 textes par défaut si vous manquez d'inspiration
  2. Mettez-le en forme en déterminant la police, la taille, la décoration, l'espacement des caractères, des mots et des paragraphes, l'alignement des paragraphes
  3. Dans la deuxième colonne du formulaire choisissez la couleur des caractères et du fond (indiquez-la directement ou utilisez le sélecteur de couleur en cliquant sur le petit carré rose)
  4. Cliquez sur "Generate CSS"

Le liste vous affiche alors le style à introduire dans votre feuille de style pour obtenir l'aspect exact de ce que vous venez d'encoder.

Par contre, je ne suis pas parvenu à obtenir directement la CSS pour les autres éléments de mise en forme proposés

lundi 19 novembre 2007

DewMoviePlayer un lecteur vidéo pour votre site

Décidément, il n'y a pas à dire... J'adore le site Alsacréations. Célèbre pour ses conseils et forums à propos des standards W3C, des feuilles de style CSS, des langages HTML et XHTML, ainsi qu'à propos de l'accessibilité du Web en général. Il regorge de petites merveilles qui facilitent la vie des webmasters.

Ainsi, après avoir proposé Dewplayer (un lecteur mp3 pour le web) et Dewslider (un diaporama d'images en Flash), voilà que Dew (administrateur et créateur du forum Alsacréations) remet le couvert avec DewMoviePlayer.

Ce lecteur est on ne peut plus simple (lecture, pause, défilement, son ou non...). Il permet de lire les vidéos préalablement convertie au format FLV. Si vous ne disposez pas de convertisseur, je vous conseille Riva FLV Encoder, un programme gratuit.

Pour l'installer, c'est très simple. Il suffit de :

  1. télécharger le lecteur
  2. transférer le lecteur sur votre site par FTP
  3. insérer le code HTML classique pour une animation flash, en spécifiant dans l'adresse le nom du fichier FLV à lire dans votre fichier HTML ou PHP. Pour les allergiques au code, le site propose même un générateur de code !

vendredi 26 octobre 2007

WidgetBox : des widgets pour vos blogs

Après le billet d'avant-hier sur les gadgets de Google, voici Widgetbox, un site qui propose de nombreux widgets, tous destinés à des blogs. Les widgets servent à utiliser un service en ligne (site Web, flux rss, vidéos, diaporamas, lecteurs de musique...) en dehors de leur source d'origine.

Ceux-ci sont classés par catégorie : nouveautés, blogosphère, communication, informations, intérêts, jeux... Pour en bénéficier, il faut passer par la page "My Widgest", cliquer sur "Register for a new account" et compléter le formulaire en ligne. Une fois votre enregistrement validé, choisissez votre widget et cliquez sur “Details”. Vous pouvez également le visualiser à l’aide du bouton “Preview”. Pour le placer dans votre blog, il suffit de copier-coller un code Javascript.

Cependant, la première installation est assez lourde... Elle est bien décrite sur le site de Web4U

Pour les développeurs, le site propose d'aller très loin en donnant accès accès aux outils nécessaires pour régler les widgets afin de les adapter aux attentes du clients final.

mercredi 24 octobre 2007

Gadgets Google pour votre page Web

Google n'est plus célèbre que pour son seul moteur de recherche. Il développe régulièrement de nouvelles applications qu'il met gratuitement à la disposition de ses visiteurs.

Les gadgets Google, qui en font partie, sont de petites applications que vous pouvez placer sur votre site Web. A leur naissance, ces gadgets ne pouvaient être utilisés que sur la page d'accueil personnalisée de Google. Maintenant vous pouvez en mettre sur n'importe quelle page, car intégrer un tel gadget est très simple. Il suffit d'insérer un code JavaScript fourni par Google... Et c'est tout !

Près de 22119 widgets pour vos pages web sont ainsi mis à votre disposition. Certains sont très simples, d'autres particulièrement utiles ou simplement amusants. Le classement se fait par catégorie ;  actualités, outils, communication, jeux et divertissement, finance, sports, style de vie et technologie. Si tout n'est pas bon à prendre, il peut toujours être intéressant d'aller y jeter un petit coup d'oeil...

Je ne résiste pas à vous proposer ainsi, la grille des programmes TV :

Ou cet horoscope, pour les taureaux, également disponible pour tous les signes

jeudi 18 octobre 2007

Protéger l'accès d'un répertoire par mot de passe

Placer un fichier .htaccess peut être utile dans de nombreux cas :

  • Personnaliser une page d'erreur
  • Effectuer une redirection
  • Jouer avec les index de répertoires
  • Proposer un index alternatif
  • Interdire ou autoriser l'accès du site à certaines adresses IP
  • Protéger l'accès d'un répertoire par mot de passe

Ce principe d'authentification est utilisé pour donner l'accès à un répertoire spécifique, que ce soit sur un intranet ou sur Internet, uniquement aux personnes en possession d'un nom d'utilisateur et d'un mot de passe valides. Le fichier contenant les informations relatives aux droits d'accès se nomme ".htaccess". Il est stocké dans le même répertoire que les données à protéger. Il s'agit d'un simple fichier texte dont voici le contenu :

AuthUserFile /adresse serveur/dossier à protéger/.htpasswd
AuthGroupFile /dev/null
AuthName "Accès Restreint"
AuthType Basic
<Limit GET POST>
require valid-user
</Limit>

Attention : Si votre hébergeur vous a déjà installé un fichier .htaccess sur votre site, ne l'effacez pas! Reprenez-le en local sur votre disque dur et ajoutez votre propre code à la suite du code existant.

Remarque : "adresse serveur" doit être remplacé par la véritable adresse de votre serveur et "dossier à protéger" doit être remplacé par le vrai nom de votre dossier.

Pour trouver la véritable adresse du serveur à indiquer dans le fichier .htaccess, vous avez 2 possibilités :

  1. la demander à votre hébergeur
  2. Si votre hébergement supporte PHP, créer un fichier PHP contenant le code suivant :

<?php
phpinfo();
echo realpath("chemin.php");
?>

  • Enregistrer le fichier sous le nom "chemin.php"
  • Uploader le fichier sur le serveur
  • Appeler le fichier en indiquant son nom dans la barre d'adresse : http://www.monsite.be/chemin.php

La page qui s'affiche alors vous donne beaucoup d'indication à propos de votre serveur et de sa configuration. La toute dernière ligne est la véritable adresse de votre serveur à placer dans le fichier .htaccess

Un second fichier, nommé .htpasswd se place également dans le répertoire à protéger.
Il contient, ligne par ligne, la liste des noms d'utilisateur et le mot de passe crypté qui leur est associé, séparé par deux points.
Cela donne, par exemple :

Philippe:f5 /Pj27gekU

Pour crypter un mot de passe, vous pouvez utiliser notre page.

vendredi 28 septembre 2007

Coordonnées GPS pour Google Map

Placer une carte dynamique sur son site en utilisant l'API (un programme) de Google Map n'est pas très compliqué dans sa première partie :

  1. se rendre sur le site de Google Map et cliquer sur "Sign up for a Google Maps API key" pour obtenir la clé propre à votre URL. En effet, chaque nom de domaine doit posséder sa propre clé.
  2. Cocher, en bas de page, la case d'acceptation des conditions d'utilisation
  3. Indiquer l'URL de votre site. (Noter la racine du site (www.easy-concept.com par exemple) et non une page particulière)
  4. Cliquez sur "Generate API Key"
  5. Une nouvelle page s'affichera avec la clé et les codes à insérer dans vos pages.

Le plus compliqué était ensuite de trouver avec précision les coordonnées GPS de l'endroit que vous vouliez situer. La majorité des développeurs utilisaient les services d'un géocodeur. Il fallait alors se déplacer sur la carte et zoomer de manière progressive, puis cliquer à l'endroit exact du lieu dont vous souhaitiez connaître les coordonnées. Si c'était votre maison, pas de problème. Mais pour situer une adresse qu'on ne savait pas placer avec précision ?

Easy-Concept à développé un petit script qui se charge de ce travail et qui permet de connaître les coordonnées GPS d'une adresse simplement en l'encodant dans un champ de formulaire. Nous vous invitons à l'utiliser et à nous faire part de vos remarques.

mardi 25 septembre 2007

ThumbShots : vignettes de sites Web

On les voit de plus en plus, ces petites vignettes qui permettent d'afficher une copie d'écran d'un site dans une vignette au format de 120 X 90 pixels. Plus de 1000 sites proposent ce principe.

La façon de l'afficher dans le navigateur est simple : il suffit de faire suivre l'adresse du site http://open.thumbshots.org/image.pxf?url= de l'url de votre site. Cela donne donc, par exemple :
http://open.thumbshots.org/image.pxf?url=http://www.easy-concept.com

A présent, vous pouvez utiliser cette image et l'afficher dans une page Web sans grande difficulté en codant l'HTML de manière classique :
<img src="http://open.thumbshots.org/image.pxf?url=http://www.easy-concept.com" alt="Création de sites Internet" title="Création de sites Internet"/>

Pour terminer, en échange des vignettes, le site vous demandera d'afficher en retour un champ de texte destiné à faire la proposition du service.

Je vous vois déjà vous précipiter dans un nouvel onglet pour afficher votre propre vignette... Et ne voir s'afficher qu'une page blanche. Désespoir. Comment est-ce possible ? Il y a plusieurs raisons possibles à cet état de fait :

  1. Votre site n'est pas enregistré dans l'annuaire DMOZ Directory. Ce n'est pas très compliqué de remédier à cela en vous y inscrivant gratuitement.
  2. Vos balises d'entête contiennent une balise META qui en interdit l'affichage : <meta name="robots" content="nothumbshots">
  3. Quelqu'un a demandé spécifiquement d'exclure votre site de la base de données de Thumshots

lundi 18 juin 2007

Des vidéos YouTube ou Dailymotion sur votre site

Avoir, sur sa page d'accueil, une vidéo qui change régulièrement, c'est possible... Et sans grand travail de développement. En effet, plusisuers sites sont spécialisés dans le stockage et le partage de vidéos. Voyez par exemple YouTube ou Dailymotion pour ne citer qu'eux !

La manière la plus simple de procéder, consiste simplement à proposer un lien sur lequel il suffit de cliquer pour ouvrir la vidéo. Rapide, mais pas très joli (on ne peut rien y voir directement...) ni très productif pour votre site puisque les visiteurs risquent de le quitter pour ne plus y revenir...

Beaucoup plus intéressant est le fait de pouvoir directement visualiser son contenu sur votre site. Voici, par exemple, le code que vous pouvez intégrer si vous voulez présenter des vidéos de YouTube :

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/-wZhO9GxrMc"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/-wZhO9GxrMc" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

Dans cet exemple, qui présente une superbe erreur d'un gardien de but, il suffit de remplacer la partie du code mise en gras -wZhO9GxrMc par le bon numéro de la vidéo. Pour la trouver :

  1. Choisissez la vidéo qui vous plait.
  2. Cliquez sur sa vignette
  3. Cliquez sur le lien "Share Video"
  4. Reprenez le numéro qui vous est fourni par le lien. Celui ci se trouve en fin de lien, juste après le signe égal.

jeudi 5 avril 2007

Des mosaïques pour votre site

Bien sûr, cela n'a pas un grand intérêt pour le commun des mortels... Vous ne pourrez pas utiliser ce service pour modifier toutes les photos de votre site... Mais il faut reconnaître que les mosaïques fournies gratuitement par Image Mosaic Generator sont assez impressionnantes...

N'hésitez pas à cliquer sur l'image pour l'agrandir.

samedi 10 mars 2007

Faites parler de vous et de votre site

Les publicités visent à faire parler d'une marque. Que ce soit parce qu'elles sont amusantes, idiotes, décalées ou instructives. Mais personne n'est obligé de les regarder.

Alors, lorsque ce sont les consommateurs eux-même qui se chargent de diffuser votre publicité car elle est amusante, vous avez gagné votre coup ! Et c'est le cas de Tobasco. Elle est véritablement délirante. Contentez-vous de communiquer les informations demandées dans les champs et gardez votre téléphone à portée de main. Vous ne serez pas déçus si vous comprennez l'anglais !

samedi 27 janvier 2007

JAlbum : créateur d'albums photos

Vous souhaitez que les internautes puissent profiter de vos derniers clichés ? Le plus simple est alors de créer un diaporama ou un album photos et de le placer sur votre site. JAlbum peut vous y aider. Il s'agit d'une application gratuite. Pas de date d'expiration, pas de message de pub. Pas d'adware. Pas de spyware.

Après avoir téléchargé JAlbum, vous pourrez glisser un dossier avec vos images et films dans Jalbum. Vous n'aurez plus qu'à cliquer sur "Créer l'album". JAlbum va s'occuper de tout : créer des vignettes à partir de vos images et les afficher dans une page index.html.

Vous pouvez également créer des diaporamas à partir de vos images, afin de faciliter la navigation. L'album ainsi créé peut contenir des images réduites en taille. En cliquant sur ces images réduites vous pouvez afficher si vous le souhaitez, les images originales (pour l'impression par exemple). JAlbum ne modifie en aucune façon vos images originales. Il n'ajoute que quelques fichiers et dossiers au dossier que vous avez sélectionné pour la création de l'album. Jalbum sait aussi traiter les arborescences de dossiers et accepte les fichiers jpeg, gif et png ainsi que les fichier films .avi, .mpg et .wmv

  • Glissez - déplacez un dossier avec des images dans JAlbum, choisissez un dossier de destination et cliquez sur "Créer l'Album.
  • Fonctionne avec n'importe quel navigateur web pour visualiser vos album.
  • Apparence des albums personnalisable grâce à l'utilisation de skins.
  • Disponible en 26 langues, dont le français.
  • Support de l'arborescence des dossiers.
  • Fonctionne sur toutes plateformes.

vendredi 26 janvier 2007

La date et la taille des fichiers proposés (2)

Le plus facile pour ce travail est d'utiliser un éditeur de texte ou votre éditeur HTML habituel.

Logiquement, votre fichier devrait contenir des liens libellés comme suit :

<a href="documentuntel.txt">Téléchargez le document untel</a>

Pour afficher la taille du document, s'il est contenu dans le même dossier que la page Web, ajoutez :

<!- -#fsize file="documentuntel.txt" - ->

La taille est affichée en octets. Si vous souhaitez afficher des Ko, entrez la commande suivante dan sle <head> :

<!- -#config sizefmt="abbrev" - ->

Pour afficher la date de mise à jour, entrez :

<!- -#flastmod file="documentuntel.txt" - ->

Si vous souhaitez obtenir un format français des dates, il faut alors ajouter à la section <head>:

<!- -#config timefmt="%d.%m.%Y" - ->

Pour rappel, j'ai toujours laissé, pour des raisons de mise en page dans ce blog, un espace entre les deux tirets - -, mais vous devez les supprimer de votre véritable fichier. Par contre, n'oubliez pas de laisser un espace entre la dernière commande et le - -> final

jeudi 25 janvier 2007

La date et la taille des fichiers proposés

Un client nous a demandé de placer sur son site une série de documents qu'il va régulièrement actualiser. Chaque nouvelle version conserve le même nom afin de ne pas devoir changer les liens figurant sur toutes les pages HTML du site. Pourtant, pour une question d'ergonomie, il souhaite logiquement que la taille et la date de la dernière modification s'affiche automatiquement dans la page où le téléchargement des fichiers est proposé.

Pour atteindre ce but, il n'est pas nécessaire de faire appel à PHP ni à Javascript, mais plutôt à des commandes SSI (Server Side Include). De quoi s'agit-il ?

Ce sont des commandes spéciales insérées dans une page Web et exécutées par le serveur au moment où il envoie la page vers le navigateur... Cette page est donc dynamique puisque le serveur exécute la commande à chaque fois que la page est demandée. Il faut cependant 3 conditions pour pouvoir utiliser un tel système :

  • Votre site doit être hébergé sur un serveur Apache, car les serveurs Windows ignorent le commandes SSI
  • Votre serveur doit être configuré pour traîter les SSI
  • Les fichiers utilisant ce système doivent se terminer par l'extension SHTML

Pour vérifier si votre site supporte ces 3 conditions, le plus simple est de créer un fichier de test, de l'uploader en FTP et d'en afficher le résultat dans votre navigateur favori. Voici le code que doit contenir votre fichier de test :

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Vérification du fonctionnement de SSI</title>
</head>
<body>
<!- -#echo var="SERVER_SOFTWARE" - ->
</body>
</html>

Veuillez noter que, pour des questions de règle de formatage, j'ai dû séparer les deux tirets - par un espace (dans le cas contraire, les caractères s'affichent avec une police barrée). Votre code, lui, ne doit pas contenir cet espace. Si cela fonctionne, vous devez voir le nom de votre serveur s'afficher... Je vous donnerai demain les commandes à placer sur vos pages pour arriver au résultat escompté...

vendredi 20 octobre 2006

De la musique légale dans vos pages

Lorsque quelqu'un souhaite insérer de la musique sur son site, la manière de procéder varie peu. Soit il cherche un morceau et va le "pomper" sur un site qui l'utilise déjà, soit on numérise un morceau au départ d'un CD... L'une comme l'autre méthode semble limite en terme de droit...

Un site fait parler beaucoup de lui ces temps-ci: Radio.blog. En effet, il propose de nombreux titres de chansons. Il vous suffit d'utiliser le moteur de recherche pour voir s"afficher la liste des réponses possibles. Un clic, et le code HTML à intégrer dans votre page par copier-coller s'affiche. Exemple avec Imagine, de John Lennon.

Un clic sur la flèche lance la musique. Un clic sur la double barre l'arrête. Pour modifier le volume, c'est le rectangle à droite. Un clic sur le point d'interrogation ouvre le site de Radio.blog. On ne peut imaginer plus simple

Et, dans ce cas, vous ne téléchargez rien. Plus de transfert important de données. Le morceau reste sur Radio Blog. Le ou les morceaux d'ailleurs puisqu'il est même possible de proposer une playlist...

Pour pouvoir disposer de ce service, il suffit de s'inscrire et de confirmer votre inscription par retour de mail.

vendredi 13 octobre 2006

Mise en place de la galerie GFD

Voici la procédure à suivre pour placer la galerie de photos en Flash dont le fonctionnement vous a été décrit hier.

  1. Téléchargez le fichier zippé
  2. Sur votre disque dur, décompressez le fichier
  3. Créez un dossier perso et un autre galeries (sans majuscule)
  4. Ouvrez le dossier décompressé
  5. Déplacez le fichier config.php dans le dossier galeries que vous venez de créer.
  6. Déplacez également 09.swf, ui.xml et index.php dans le dossier perso.
  7. Dans le dossier galeries, créez des sous-dossiers dont les noms deviendront ceux de vos onglets. La syntaxe est NuméroNom_suite. Par exemple, cela peut donner 01Vacances_2006. Le caractère underscore (le tiret bas _) remplace les espaces. Si les majuscules sont autorisées, les caractères accentués sont interdits.
  8. Connectez-vous ensuite à votre serveur à l'aide de votre logiciel FTP et copiez tout le contenu de votre dossier perso sur le serveur.
  9. Vous pouvez adapter le look de votre galerie en modifiant le fichier ui.xml ou en adoptant des skins qui sont téléchargeables depuis le site de l'auteur de cette application

Pour bien profiter de cette application, veillez à ce que les noms de fichiers dans les différents dossiers portent tous des noms différents.

jeudi 12 octobre 2006

Création d'une galerie de photos en Flash

GFD, dans sa version actuelle qui est v2.3l, signifie Galerie Flash Dynamique. Elle est entièrement configurable et gratuite à télécharger. Grâce à cette technologie, vous pourrez réaliser des albums photos très vivants.

Seul impératif : avoir un hébergeur qui supporte le PHP. Après quelques manipulations pour créer cette galerie, vous n'aurez plus qu'à ranger vos photos dans des répertoires sur votre site. Immédiatement après, les visiteurs pourront les visionner.

Il faut cependant reconnaître que, de prime abord, cet utilitaire peut se révéler un peu complexe pour les néophytes. Mais ces aperçus vous donneront sans doute envie de vous donner un peu de peine pour y parvenir :

Voici la manière de les exploiter pleinement :

  • En passant votre curseur sur le bandeau supérieur, vous pouvez choisir le répertoire qui vous intéresse. Sa mobilité permet de placer plus de dossier que la largeur de l'acran ne le permettrait normalement.
  • Les photos sont placées comme sur une planche contact par série de 18 photos maximum. Si vous dépassez ce nombre, vous créez alors un système de "pages", au sein du répertoire, qu'il faudra "tourner" pour accéder aux autres photos.
  • Les photos sont légèrement éclaircies. Si vous passez votre souris sur l'une d'elle, elle prend sa véritable couleur. Un clic lance une animation qui affiche une fenêtre de visualisation plus grande. Recliquez dessus pour fermer cette fenêtre.
  • Lorsqu'une photo est visualisée en grand, un menu graphique s'affiche en abs à gauche de la page. Il permet d'afficher la photo au format JPG dans une nouvelle fenêtre, d'arrêter ou de lancer le diaporama...

Et pour ceux qui souhaitent disposer de cette galerie sans le logo, il conviendra alors de passer "à la caisse" :

  • Galerie sans logo, avec habillage XML intégré : 50€
  • Galerie sans logo, avec habillage XML modifiable, comme sur la version gratuite : 150€

vendredi 29 septembre 2006

Crypter un texte en ROT13

Certaines personnes ont parfois des idées bizarres... Qui donc a pu inventer le ROT13 ? Il s'agit d'un système de chiffrement de texte. Son principe est simplissime : tous les caractères alphabétiques non accentués sont décalés de 13 caractères. Comme vous le savez tous, l'alphabet latin comptant 26 caractère, la même grille permet donc de chiffrer et de déchiffrer le code.

Ainsi :

  • a devient n et n devient a,
  • b devient o et o devient b,
  • z devient m et m devient z...

La grille complète de cette traduction est accessible sur Wikipedia. Quant aux personnes qui n'ont pas envie de jouer aux agents secrets, un site permet de passer d'une version à l'autre.

Certes, cela présente quelques avantages discrets :

  • camoufler la solution d'une devinette, la fin d'un film, d'un livre, d'une histoire
  • ne pas dévoiler une intrigue
  • éviter de choquer lors de l'emploi d'un vocabulaire "réservé aux adultes"

Fv ibhf gebhirm q'nhgerf nccyvpngvbaf à prggr égbaanagr qépbhiregr... A'uéfvgrm cnf à z'ra snver cneg

mercredi 6 septembre 2006

Envie de générer du trafic ?

Vous souhaitez augmenter le nombre de vos visiteurs ? Vous voulez que la liste des récepteurs de votre newsletter s'étoffe ? Alors ajoutez un coucours sur votre site.

Un de nos clients, Zone4men, site spécialisé dans la vente de cosmétiques pour homme, a lancé en début de mois un nouveau concours nécessitant une inscription... Certes, il faut envisager de distribuer de beaux lots pour attirer le visiteur, mais le carnet d'adresses s'est rapidement gonflé.

Au niveau de l'administration, c'est très simple :

Un interface d'administration permet de créer des concours, de déterminer les réponses attendues, de connaître les adresses des personnes ayant participé et... de déterminer automatiquement le vainqueur...

Intéressé ? webmaster@easy-concept.com

samedi 24 juin 2006

Des vidéos DivX sur vos pages

DivX Web Player 1.0 permet d'intégrer de la vidéo HD et DivX, en plein écran si vous le souhaitez, sur vos pages Web.

Intégrer de la vidéo n'a rien de bien original ni de nouveau. Par contre, ce qui est véritablement intéressant avec cet utilitaire gratuit, c'est qu'il n'est plus nécessaire d'avoir recours à un serveur de streaming ou d'installer un logiciel serveur. Il est aujourd'hui possible d'intégrer sa vidéo DivX dans une page Web ou un blog, laquelle est alors directement lue par la quasi totalité des navigateurs, en plein écran ou dans une fenêtre spéciale.

Qui plus est, il permet le téléchargement progressif. C'est à dire que la lecture du fichier peut commencer alors que son téléchargement n'est pas encore terminé.

D'un poids de 1Mo, il s'installe en quelques secondes et offre une grande convivialité d'utilisation. Il vous suffit d'être équipé de Windows 2000 - XP ou de Mac OS 10.2 Lors de la phase d'enregistrement, vous n'êtes même pas obligé de communiquer votre adresse E-Mail ni de souscrire à leur newsletter.

Cliquez sur la version souhaitée (Windows ou Mac) pour télécharger le fichier qui sera enregistré sur votre ordinateur. Exécutez-le. Choisissez votre langue, acceptez les conditions générales et validez chaque écran en cliquant sur "Suivant"... Le tour est joué.

Il ne vous reste plus qu'à vous rendre sur la page d'explication qui vous permettra de d'encoder les caractéristiques de la vidéo et de générer le code à copier-coller dans vos pages Web. Voici un exemple de page dans laquelle j'ai intégré une vidéo avec le code suivant :

<object classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616" width="490" height="242" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab">

<param name="loop" value="true" />
<param name="src" value="http://trailers.divx.com/Paramount/MissioImpossibleIII.divx" />

<embed type="video/divx" src="http://trailers.divx.com/Paramount/MissioImpossibleIII.divx" width="490" height="242" loop="true" pluginspage="http://go.divx.com/plugin/download/">
</embed>
</object>