WebSite Developer

Photos et vecteurs gratuits

2012-01-29T22:01:00.001+01:00

Freepik moteur de recherche pour images

Ce moteur permet de rechercher des ressources graphiques gratuites plutôt utiles: vecteurs, photos, PSD.

Cependant, il faut rester vigilant :

il y a des ressources sponsorisées par les banques d'images
pas mal de pubs je trouve !
les liens mènent vers les articles et non vers le lien de téléchargement direct. Certains articles planquent bien soigneusement les liens de téléchargement entre 2 publicités

Free photos and vectors to download | Freepik

ClearBox, PhotoStack, JotForm

2011-12-31T14:27:00.000+01:00

3 ressources gratuites pour améliorer son site

Que du Charabia ?
Quelques explications !

Cet article fait suite à l'article suivant : Sam's Traiteur dans l'Oise

ClearBox (affichage type lightbox), PhotoBox (Diaporama en Flash) et JotForm (Création de formulaire en ligne) sont 3 services utilisés sur la page Traiteur Mariage.
Plus d'informations sur leur utilisation.

ClearBox

Pour afficher du contenu façon lightbox :

Images et groupes d'images
flash, vidéo, audio
HTML, IFrame

Donc bien plus puissant que la lightbox simple. Ce script est largement paramétrable. On notera la possibilité d'utiliser un fichier traduction, ce qui évite de devoir farfouiller dans le code.

Comment faire ?

Dans le fichier clearbox.js, il faut modifier le paramètre suivant : var CB_Language='fr';
Il faut ensuite créer un dossier clearbox/language/fr et y copier le fichier cb_language.js
Modifiez la traduction à votre convenance (utilisez le code HTML pour les caractères accentués et un \ avant chaque ' sous peine de bug)
Voici ce que ça donne pour moi :

//
// ClearBox French Language File (JavaScript)
//
var
CB_NavTextPrv='précédent', // texte pour image précédente
CB_NavTextNxt='suivant', // texte pour image suivante
CB_NavTextFull='plein écran', // texte pour l'image originale (uniquement pour les images)
CB_NavTextOpen='ouvrir dans une nouvelle fenêtre', // texte pour ouvrir dans une nouvelle fenêtre
CB_NavTextDL='télécharger', // texte pour télécharger une image ou un autre contenu
CB_NavTextClose='fermer', // texte pour fermer clearbox
CB_NavTextStart='démarrer le diaporama', // texte pour démarrer le diaporama
CB_NavTextStop='arrêter le diaporama', // texte pour arrêter le diaporama
CB_NavTextRotR='rotation de l\'image à 90° vers la droite', // texte pour faire une rotation vers la droite
CB_NavTextRotL='rotation de l\'image à 90° vers la gauche', // texte pour faire une rotation vers la gauche
CB_NavTextReady='Bienvenu chez Sam\'s Traiteur' // texte pour la mise en route de la clearbox
;

Le site pour télécharger Clearbox
Téléchargement du fichier clearbox en français

PhotoStack

Photostack est un simple template pour Picasa parmi tant d'autres disponibles sur cette page Templates pour Picasa.
A ce jour 28 modèles de galeries pour Picasa sont disponibles.
Comment faire ?
Extrayez le contenu du fichier zip dans le répertoire Program Files\Picasa 2\ web\templates\. Il est important de placer le contenu du fichier zip dans un dossier séparé proprement nommé PhotoStack par exemple ! Démarrez Picasa et sélectionnez les images que vous voulez exporter puis cliquez sur Dossier> Exporter comme page Web.

JotForm

JotForm est un générateur de formulaires vraiment époustouflant gratuit pour un certain nombre de soumissions.

Il n'a pour moi que des avantages (à part celui d'être dépendant d'un service tiers évidemment).

L'interface est en français, une interaction avec FaceBook, MailChimp, Paypal est disponible, des stats détaillées, un paramétrage très précis de quasiment tous les éléments.

Jotform

Pour information, j'ai abandonné le script HelloBar car il est limité à 25 clics par mois dans sa version gratuite. Ce script fonctionne très bien et est très attractif pour les clients potentiels mais je l'ai remplacé par une modal box (1 affichage par session).

Système de commentaires sur votre site

2011-11-24T16:56:00.001+01:00

Comment avoir un feedback de vos visiteurs ?
Si vous n'utilisez pas un CMS tel que Wordpress et consorts mais que vous utilisez un générateur de site web tel que Izispot ou autres, il est difficile de mettre en place un système de commentaires pour vos visiteurs.
L'intérêt d'utiliser ces outils est de se décharger de la gestion des commentaires, en contrepartie vous êtes dépendant de ce service.
Pour l'utilisateur le plus c'est l'authentification unique, cela évite de créer un compte pour commenter sur chaque site.

Voici quelques solutions pour ceux qui ne veulent pas coder.

Google Friend connect

Image via CrunchBase

Encore un service de google qui permet(tait) de jouer dans la cour des grands avec ses nombreux gadgets :

gestion des commentaires
mise en place d'une newsletter
mise en place de sondage

L'inscription se fait en français c'est un petit plus par rapport à ses concurrents même si les vidéos explicatives sont en anglais.
Malgré tout ça, ce service n'a pas rencontré le succès escompté, il fermera ses portes le 1er mars 2012.
Google met fin à Friend
Pour info
Google Friend Connect
Exemple concret des conséquences de l'utilisation d'un service tiers. Si le service ferme, c'est le black-out sur votre site !

Disqus

Image via CrunchBase

Egalement une plateforme de commentaires plutôt performante utilisée par CNN ou Fox News Channel.(Disqus sur Wikipedia).
Même si l'inscription se fait en anglais, le service supporte un grand nombre de langues dont le français.
Le petits plus de disqus :

Pour laisser un commentaire, vous pouvez utiliser votre compte Disqus mais aussi FaceBook, Twitter, OpenID et Yahoo
La possibilité de lier des vidéos et des images à vos commentaires
L'accès aux CSS pour mettre la boite de commentaires à vos couleurs

Toutes les fonctionnalités de Disqus

Intense Debate

Image via CrunchBase

Voici un service équivalent qui mérite aussi votre attention. Il présente plus ou moins les mêmes fonctionnalités que Disqus.
Les petits plus d'Intense Debate

Un système de points de réputation pour les commentateurs
La possibilité de lire et de faire des commentaires via votre lecteur RSS
Réponse à un commentaire par mail

Facebook

Image via CrunchBase

Il est possible d'utiliser Facebook pour ajouter un système de commentaires sur son site mais la doc est en anglais, ce qui peut en freiner plus d'un !
Ce n'est pas forcément la solution la plus facile à mettre en place, mais Facebook draine des millions d'utilisateurs. Une solution à envisager !
Documentation FaceBook pour les développeurs

Charte graphique poker pour IziSpot

2011-11-15T00:43:00.000+01:00

Voici pour les amateurs de poker de quoi démarrer rapidement un site sur votre passion

Télécharger le fichier
Téléchargement alternatif
contient un site au format izi en téléchargement gratuit(à ouvrir avec le logiciel Izispot)

Pour ouvrir ce fichier, veuillez télécharger le logiciel gratuit Izispot :
http://www.izispot.com
Pour modifier les contenus et prendre en main le logiciel :
http://www.tutoriel.izispot.com/

Fonctionnalités du site:

un ticker de news en haut à droite sur le monde du poker
des boutons d'ajouts sur les réseaux sociaux en haut à gauche
des titres de pages avec une police originale (utilise google font)
une zone ajax modifiable
des contenus relatifs au poker sur la colonne de droite
la charte graphique s'adapte aux contenus très longs (pas d'apparition d'ascenseur)

Comparatif des versions

Pourquoi acheter ?

Vous pouvez modifier et personnaliser cette charte graphique en l'achetant avec Paypal. Vous recevrez tous les fichiers après réception et validation de votre paiement. :

l'option 1 correspond à l'achat du fichier charte graphique qui vous permet de supprimer ou de personnaliser les éléments de votre choix dans la charte graphique
l'option 2 contient les mêmes attributs que l'offre 1 mais avec le fichier source PSD exploitable sous Photoshop en plus

Pixfinder : Recherche de wallpaper

2011-11-04T15:23:00.000+01:00

Pixfinder est un moteur de recherche de fonds d'écran

Grâce à ce moteur de recherche spécialisé, vous pouvez affiner votre recherche par couleurs ou par résolution d'écran.
Il est possible également d'effectuer des recherches de papier-peint pour les écrans doubles (dual-screen disponible en cochant l'option en haut à droite).
La majorité des écrans proviennent de deviantart.com et de hebus.com

Pixfinder.net

Sam's Traiteur dans l'Oise

2011-10-20T00:19:00.000+02:00

Sam's Traiteur est un traiteur Isarien pour vos mariages, communions et autres évènements festifs.

Carte de visite Sam's Traiteur

Voilà le coup de pub pour mon client picard est fait !
Maintenant un petit bilan au bout de quelques mois d'existence :

Création
Le design a été travaillé sous Photoshop (logo, palette de couleurs, ...)
Le choix d'Izispot s'est imposé pour que le client soit autonome dans ses mises à jour
La charte graphique a été décliné sur plusieurs supports (carte de visite, brochure, ...)

Services tiers
JotForm a été utilisé pour la mise en place d'un formulaire élaboré de devis avec outil statistique. Izispot ne proposant qu'un formulaire de contact basique
HelloBar pour mettre en valeur une information importante
PhotoStack template gratuite pour Picasa pour créer un diaporama des photos de buffets, des plats cuisinés, ...
Google Web Font pour mettre en valeur les titres de niveau H1

Référencement
Etant "localement" une niche, le site s'est rapidement classé dans les deux premières pages pour les mots clés choisis sur ~~les~~ le principal moteur de recherche.
J'attends beaucoup de l'inscription sur l'annuaire de WRI : le site Sam's Traiteur est listé dans la catégorie Entreprises dans l'Oise : Traiteur mariage Oise de l'annuaire
A suivre...
Vous habitez en Picardie et vous un cherchez un traiteur pour votre mariage ?

PS : Un Isarien est un habitant de l'Oise, à ne pas confondre avec un oisif ;-)

SimpleCart 2 en français

2011-09-29T23:27:00.003+02:00

SimpleCart en est à sa version 2
SimpleCart est un script en javascript qui permet de créer rapidement un panier simple pour les quelques articles que vous avez à vendre. Il ne s'agit bien évidemment pas d'un concurrent sérieux à PrestaShop ou Magento mais ce qu'il fait il le fait bien et simplement !
Voir une démo de simplecart

Les nouveautés

Il n'y a plus rien à franciser dans le code source. Soit vous utilisez du texte soit vous utilisez des images (sprites CSS) pour l'ajout au panier et le bouton de commande
Pour les méthodes de paiement, en plus de Paypal, ils ont ajouté Google Checkout. Paypal est sélectionné par défaut
SimpleCart 2 est beaucoup plus simple à paramétrer (voir documentation)

Comment l'utiliser ?

Vous téléchargez le script
Ajoutez vos images et vos descriptions avec votre éditeur favori
Mettez le en forme avec les feuilles de style
Modifier la devise dans le script simpleCart.currency = EUR;
Modifier l'adresse paypal dans le scriptsimpleCart.email = "you@yours.com";

Pour les moins courageux
Je vous propose de télécharger l'archive suivante qui contient :

La copie de la démo originale (car le script en téléchargement est nu) avec la devise en euro
La traduction des boutons en français
Les fichiers psd des sprites

Besoin d'aide ?
SimpleCart permet de nombreuses choses tel que l'ajout de taxes, ou de frais d'envoi en fonction de certains paramètres (taille, poids, ...), et bien d'autres encore.
Si vous avez besoin d'aide pour personnaliser ce script ou pour l'ajouter sur votre site, contactez-moi !

Pour info, je travaille sur 3 axes avec ce script :

La possibilité d'imprimer une commande et de payer par chèque (feuille de style d'impression)
Création d'un modèle pour Picasa qui génère une boutique à partir des photos d'un album
Mix de TBS (TinyButStrong) avec SimpleCart qui permet la création d'une boutique à partir d'un fichier CSV

Développeurs & Designers faites avancer ce projet ! Contactez-moi !

Formulaires Web : bonnes pratiques

2011-08-23T13:29:00.013+02:00

Intérêt d'un formulaire

Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par exemple un dialogue avec les internautes, voire de futurs clients.

Il est primordiale d'attacher de l'importance quant à son formulaire et à son traitement.
Si la page d'accueil d'un site est un peu comme la vitrine d'un magasin, le formulaire est un peu comme la porte d'entrée du magasin. Si elle est trop lourde ou bloquée, le client potentiel ne prendra pas la peine de rentrer en contact avec le vendeur. Il en va de même pour un formulaire, on peut récupérer de nombreuses informations mais toujours dans l'intérêt du client.

Comment fonctionne un formulaire web ?
Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des boutons, puis appuie sur un bouton de soumission (submit, envoyer) qui sera par un script qui transférera les données sur une base de données ou par mail ou les deux.

Il est primordial de distinguer clairement les champs de saisie obligatoires des champs de saisie optionnels (ou inversement). De manière générale, on indiquera les champs obligatoires par des astérisques qui renvoie à un signet indiquant que ce champ est requis.

En tant qu'utilisateur, je n'aime pas les champs obligatoires quand je ne saisis pas leur nécessité, alors veillez à ne rendre obligatoire que le strict nécessaire.
Je vous recommande la lecture de cet article : Un exemple de filtrage réussi.

Les champs doivent être correctement organisés, c'est-à-dire présentés dans un ordre qui soit pertinent pour l' utilisateur. Les formulaires les plus élaborés peuvent contenir des champs conditionnels et correspondre à des scénarios différents, en fonction des critères retenus par l'utilisateur on adapte les champs du formulaire.

L'internaute remplit le formulaire et le soumet. Dans certains cas les vérifications peuvent se faire lors de la frappe, bien avant l'envoi du formulaire comme avec LiveValidation par exemple (voir la capture ci-dessus). Les champs obligatoires et le format des données sont contrôlés au niveau du navigateur via un script ajax.

Ce premier contrôle permet d'éviter des échanges inutiles avec le serveur. Si des erreurs sont détectées, on affiche de nouveau le formulaire en ayant pris soin de conserver les données déjà rentrées par l'utilisateur et en mentionnant les champs erronés. Rien de pire que de se retrouver face un formulaire qui ne veut pas se valider sans qu'on sache pourquoi !
Les données sont envoyées au serveur et de nouveau contrôlées. Cette nouvelle vérification n'est pas facultative, car elle permet de garantir l'intégrité des données de la base et de filtrer des tentatives de piratage ou de destruction des données par injection SQL par exemple.
Un message de confirmation (e-mail) est envoyé avec le récapitulatif des informations saisies. Il est appréciable de pouvoir conserver dans sa messagerie la trace des informations fournies.
Un page de confirmation ou de remerciements avec le récapitulatif des informations saisies est renvoyée au navigateur Web de l'internaute, ce qui clôture le processus.

Pour aller plus loin

Une checklist très intéressante à lire : Qualité web pour les formulaires
Un framework formulaire JQuery : JFormer
Un framework CSS pour des formulaires joliment présentés : Formee
Des ressources graphiques pour customiser vos formulaires : 30 modèles PSD, Download PSD, 18 collections d'éléments graphiques
Mon préféré de Elemis : login form et contact form

Très prochainement une liste très complète de générateurs de formulaires sur ce site. Restez branché !

1and1 gagne à être détesté

2011-08-16T14:07:00.002+02:00

1and1 continue sa lutte contre les bonnes pratiques commerciales ...

... si on se fie aux commentaires de cet article : Mon problème avec 1and1.

Pour rappel, 1and1 est un hébergeur discount dont les offres très accessibles sont disponibles depuis plusieurs années. Les publicités pullulent dans la presse spécialisée mais aussi dans les publicités web notamment par l'affiliation.

Vous pouvez voir ci-contre une "antipub" qui propose à 1and1 de modifier ses prestations en offrant gratuitement un tube de Mitosyl parce que nombreux sont les insatisfaits plus qu'irrités par les procédures longues pour stopper l'hébergement ou bien se faire rembourser.

Pétitions et groupes
De nombreux utilisateurs déçus se sont mobilisés, entre autres :

Groupe Facebook en Français Boycottons l’hébergeur 1 et 1
Pétition 1and1 fermée car elle a atteint son objectif de 1000 signataires !
Pétition Buzz fraîchement créée
Encore une autre pétition pour boycotter 1and1

Propager comme il se doit cette information, car bien que certains se battent, d'autres intimidés par un tel déballage (des mineurs parfois) finissent par céder et paient pour être tranquille.
N'oubliez pas de commenter (poliment) les articles qui vantent les produits 1and1 (affiliation), une mauvaise publicité leur fera peut-être arrêter cette promotion qui induit les consommateurs en erreur.

Personnaliser le menu contextuel de windows

2011-07-14T12:16:00.004+02:00

Vous êtes un fan du clic droit mais ...

Vous ne vous y retrouvez plus dans votre menu contextuel et vous y perdez en productivité. Habituellement, il faut mettre le nez dans le registre pour configurer ce menu, ce qui peut être repoussant pour les néophytes. Les logiciels que je vous présente ci-dessous facilite cette manipulation qui demande de la précaution car la base de registre est modifié donc ...

Avant d'utiliser ce type de logiciel, une sauvegarde de la base de registre est fortement recommandé par précaution.

Context menu Editor

Context Menu Editor est un logiciel portable qui permet de visualiser et de supprimer les liens vers programmes de votre menu contextuel via le clic droit. Ce logiciel ne supprime pas proprement dit les programmes, mais il les enlève du menu contextuel. C'est assez pratique si vous possédez plusieurs logiciels qui peuvent ouvrir le même type de fichier (txt par exemple ouvrable par bloc-notes traditionnel, scite, notepad++).
Ne fonctionne que sous XP ( oui il y a encore des gens qui utilisent XP !)
Télécharger le logiciel

File Menu tools

Maintenant parfaitement fonctionnel sur Windows 7. Il est multilingue, français inclus (patch à télécharger tout de même sur le site de l'éditeur).

FileMenu Tools vous permet de personnaliser le menu contextuel (clic droit) de l'explorateur Windows. On peut configurer (entre autres) les paramètres suivants :

Faire des manipulations avancées sur les dossiers et les fichiers.
Configurer le menu "Envoyer vers"
Synchroniser des dossiers
Supprimer des fichiers bloqués (très utile !)
Fonction de renommage avancée
etc

Téléchargement FileMenuTools

Right click extender

Right-Click Extender permet de gérer facilement les options proposées par le menu contextuel de Windows en effectuant les modifications via une interface graphique un peu comme les précédents logiciels cités.

Plutôt que de triturer le registre à la main pour configurer ledit menu et de risquer une fausse manipulation qui pourrait nuire à la stabilité du système, l'outil Right-Click Extender propose d'effectuer ces modifications en passant par une interface graphique plus colorée que les précédents logiciels cités. C'est une affaire de goût !

Il est possible d'accéder :

aux menus contextuels des fichiers / dossiers
au bureau de Windows
au système (icône ordinateur)
aux unités de données ( disques durs, clés USB, cartes mémoire, etc. )

Proposé gratuitement, Right-Click Extender est prévu pour le système d'exploitation Windows 7, mais est compatible avec Windows Vista, tandis qu'il fonctionne partiellement avec Windows XP.
Page de téléchargement

7CmenuEditor

7CMenuEditor.INC est un petit logiciel codé en VisualBasic portable identique aux précédents . En quelques clics, vous pouvez ajouter des raccourcis vers vos programmes favoris et vers les sites que vous fréquentez régulièrement. Pour l'utiliser, il suffit de choisir le programme ou le site que vous souhaitez ajouter puis de cliquer sur le bouton Create.
Simple et élégant !

Il fonctionne sous Windows XP, Vista et 7.

7CMenuEditor sur DeviantArt (Un logiciel sur DeviantArt pourquoi pas !?)

Send to toys

Send To Toys est un logiciel assez ancien (mais qui fonctionne avec les versions récentes de Windows) qui permet d'améliorer le menu contextuel de l'explorateur de Windows "Envoyer vers".

Il ajoute une option dans le menu du clic droit qui permet d'ajouter ou d'enlever des items du menu contextuel pour gagner du temps dans vos manipulations de fichiers et de dossiers.

Send To Toys (un nom un peu ridicule) est disponible en français et fonctionne sous Windows XP, Vista et 7.

FilerFrog

FilerFrog permet d'ajouter des options supplémentaires au menu contextuel de Windows (clic-droit), principalement pour manipuler les dossiers et les fichiers de façon rapide et efficace.
A vous d'organiser manuellement vos fonctionnalités favorites:

extraire du/vers dossier, copier, renommer
crypter/décrypter par mot de passe
séparer/joindre
redimensionner un lot d'images.

FilerFrog (shareware devenu Freeware) existe en version 32 et 64 bits.
Télécharger FilerFrog

Fast Explorer

Outil pour configurer les menus contextuels dynamiques et statiques de l'explorateur, pour créer ou supprimer des options, faire des sous-menus, mettre des séparateurs.

Version portable disponible sur le site de l'éditeur. Possibilité pour un utilisateur normal (sans droits d'administrateur) de profiter des éléments de menu dynamiques créés par un administrateur

Télécharger Fast Explorer

Your menu

Disponible gratuitement et ne nécessitant même pas d’installation, Your Menu est un utilitaire permettant d’ajouter des raccourcis vers vos applications favorites dans le menu contextuel de Windows 7.

Ainsi vous pourrez accéder plus rapidement aux applications que vous utilisez fréquemment (votre navigateur web préféré, votre boîte mails, traitement de texte, tableur, etc, par exemple) via un simple clic droit dans un dossier ou sur le Bureau.

A tout moment vous pouvez revenir en arrière et retrouver votre menu contextuel d’origine.

Télécharger Your Menu

Tous ces logiciels sont très proches les uns des autres mais on chacun leurs spécificités : fonctions spéciales, traduit dans plusieurs langues, portable, taille du fichier, portabilité, ...
Il en existe un très grand nombre, il est difficile de tous les citer, vous pouvez néanmoins jeter un oeil sur la liste suivante :

Si vous connaissez un autre logiciel de ce type, signalez-le en commentaire, merci !

Ajouter la lightbox dans Izispot

2011-06-22T22:25:00.002+02:00

Objectif
Lors d'un clic sur une image dans Izispot, l'image s'affiche en grand dans la page
N'oubliez pas par précaution d'effectuer vos modifications sur une copie de votre site.
Veillez également à faire une sauvegarde de votre site sur votre serveur.
La prudence est mère de sureté !

Comment

Télécharger l'archive lightbox en français
Déclarer les fichiers nécessaires dans la page
Attribuer l'effet à une image

Etapes

Téléchargez et dézippez l'archive http://www.filedropper.com/lightbox2033fr
Dans Izispot ouvrez votre site et cliquez sur le nom de la page dans la barre de gauche pour l'éditer
Cliquez sur Source HTML <head> et copier-coller la portion de code suivant (remplacer votresite.com par l'adresse de votre site) :

<script type="text/javascript" src="http://votresite.com/js/prototype.js"></script>
<script type="text/javascript" src="http://votresite.com/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://votresite.com/js/lightbox.js"></script>
<link rel="stylesheet" href="http://votresite.com/css/lightbox.css" type="text/css" media="screen">

Ajoutez une nouvelle image dans votre page et refusez la réduction de l'image
Réduisez la taille de l'image manuellement à la taille désirée
Créez un lien sur l'image en cliquant sur l'onglet lien en bas à gauche d'Izispot à côté de l'onglet image.
Cliquez sur le bouton une page du site et choisissez une page quelconque du site. Sans importance puisqu'on va modifier ça par la suite
Cliquez sur l'onglet Source html <body> et cherchez une ligne qui ressemble à peu près à celle-ci (les nombres peuvent varier) :
<P><A href="perso.asp?num_langue=7&num_page=30&flash=non"><IMG border=0 src="http://127.0.0.1:5126/image.asp?num_image=17" width=70 height=74></A></P>
Remplacez l'url du lien par l'url de l'image soit :
perso.asp?num_langue=7&num_page=30&flash=non par http://127.0.0.1:5126/image.asp?num_image=17
Ajouter l'attribut rel=lightbox à la balise A
On se retrouve au final avec :
<A href="http://127.0.0.1:5126/image.asp?num_image=17" rel=lightbox><IMG border=0 src="http://127.0.0.1:5126/image.asp?num_image=17" width=70 height=74></A></P>

Mise en ligne
Il est temps maintenant de mettre en ligne le site :

cliquez sur le bouton de mise en ligne
renseignez les champs (serveur, identifiant, mot de passe) si ce n'est déjà fait
cliquez sur le bouton fichiers complémentaires
faites glisser les dossiers js, css et images contenus dans l'archive lightbox dans cette fenêtre
cliquez sur le bouton Démarrer la mise en ligne

Voilà c'est terminé
Tutoriel vidéo
Voici une vidéo explicative pour la mise en place de la lightbox

Plus d'infos sur la lightbox en francais
N'oubliez pas de consultez le forum des utilisateurs d'Izispot

Quiz Flash intégré à un diaporama

2011-03-12T17:35:00.008+01:00

Diaporama et quiz sur le don du sang

Globule rouge
par Website Developer

ou comment développer au service des autres.

Grâce à sa présence sur tout le territoire, l’Établissement Français du Sang collecte les 9500 dons de sang nécessaires chaque jour et distribuer les produits sanguins pour soigner 1 000 000 de malades chaque année.

Donnez son sang c'est un acte désintéressé. Voici ma modeste contribution qui je l'espère favorisera "modestement" le don du sang. Enfin, elle participe à l'éducation et à la connaissance du corps humain.
Regardez le diaporama puis répondez au quiz !
Etes-vous calé sur le sang ?

Pour télécharger cette présentation sous licence creative commons sur les composants du sang, cliquez sur la flèche ci-contre ou le lien ci-dessous.

N'hésitez pas à partager ce quiz pour informer vos amis sur le don du sang
http://www.filedropper.com/composants-du-sang

La version diaporama disponible sur Slideshare

Don du sang

Voir plus de présentations de Adonfff.

Plasma par WebSite Developer

Vous voulez un diaporama dynamique comme celui-ci ?
N'hésitez pas à me contacter via la page contact, j'étudie toutes les propositions.
Je propose gratuitement mes services pour tout projet d'intérêt public !

Apprendre le langage urbain

2011-02-15T12:57:00.003+01:00

Urban dictionnary est un site regroupant des définitions du langage urbain

Même en ayant un niveau d'anglais correct, il m'arrive de ne rien comprendre lorsque que je chatte avec des anglophones. Ce site regroupe de nombreuses définitions, acronymes, expressions toutes faites, idiomes et autres néologismes.
Très utile pour comprendre l'anglais courant, l'anglais familier, l'argot, ...
[Attention tranche de vie]Très utile pour savoir quoi répondre à wtg (way to go), tc hagn (take care have a good night), ty (thank you)

Quelques définitions
Wikiot : Un idiot qui croit tout ce qui est est écrit sur Wikipedia (Contraction de Wikipedia et idiot)
Noob : Un newbie qui croit tout savoir sur internet, troll les forums avec une mauvaise grammaire

http://www.urbandictionary.com

Charte graphique Izispot association

2011-01-17T17:46:00.018+01:00

Charte graphique Izispot gratuite à destination des associations
Il s'agit du modèle de base fourni (modèle téléchargeable via la zone charte graphique) par Izispot au niveau de la structure auquel j'ai appliqué la charte graphique que vous pouvez voir ci-contre.

Au niveau des fonctionnalités, on y trouve :

un onglet partage social addthis : Twitter, Facebook, ...
une zone de traduction pour les langues suivantes : anglais, allemand, espagnol, arabe
un slideshow de produits amazon
menu personnalisé vertical

Téléchargement
Via FileDropper
clic sur le bouton ci-contre

Via Box.net

En cliquant sur le fichier charte-izispot-association.zip

Personnalisation
NB: le zip ne contient pas le fichier charte graphique .C50
Si vous souhaitez personnaliser à votre goût ce template, n'hésitez pas me contacter !

Vous aimerez également

Template gratuite Izispot (dominance bleu et blanc)
Modèle Business
Site sur la Féerie et la Bretagne utilisant Izispot

Métamoteur de recherche : Yippy

2010-12-08T17:43:00.010+01:00

Yippy

http://yippy.com/

Quand je ne trouve pas mon bonheur sur google pour une info de base, c'est vers Yippy (anciennement Clusty) que je me tourne. Yippy est un meta-moteur, qui va agréger plusieurs résultats de moteurs de recherche. Sur la colonne de droite apparaissent des "clusters", groupes de mots clés très utiles associés à votre requête.

Les recherches habituelles sont présentes : images, web, news.
Mais également des recherches sur Wikipedia, les blogs et le plus étonnant sur des emplois.
Clusty est en langue anglaise mais on y trouve des annonces d'emplois dans la langue de Molière !

64 trucs de geek à savoir

2010-11-30T17:45:00.000+01:00

Voici une liste de trucs qu'un geek doit savoir faire...
... mais ça peut aider les autres quand même

Dans le rayon des choses drôles et inutiles :

parler un langage imaginaire
rafistoler ses lunettes
jouer à des jeux rétros

Dans le rayon des trucs plus utiles, on vous explique entre autres comment :

flasher le BIOS
exécuter un script shell
débrider un smartphone
récupérer un mot de passe Wi-fi
et bien d'autres encore

Une lecture à faire (en anglais).

Savez-vous faire tout ces choses là ?
64 Things Every Geek Should Know

Gains aux jeux en baisse fatale

2010-11-20T22:58:00.000+01:00

L'argent gagné au jeu est 2 fois plus précieux que l'argent gagné en travaillant.

Martin Scorsese

Et bien je constate actuellement que l'affiliation sur les jeux en ligne ne me rapporte plus grand chose.

Ma façon de procéder :

Je passe en revue, en rédigeant un article, les sites de jeux auxquels je joue comme n'importe quel joueur lambda. Je mets un lien d'affiliation sur une image que j'ai retouchée pour reprendre les principaux éléments graphiques du site, les images proposées par les annonceurs sont stéréotypées et n'ont pas un taux de transformation à la hauteur.
Je rajoute en fin d'article en ayant passer en revue les points positifs et négatifs encore un lien d'affiliation avec le texte inscrivez-vous sur XXX

Mais depuis quelques temps, les nouveaux sites de jeux se bousculent moins sur les plateformes d'affiliation. Sur certaines plateformes, j'ai plus de programmes en pause que de programmes actifs.
Je reçois même des mails me disant et c'est la première fois depuis plusieurs années que l'annonceur a atteint son volume annuel???
Son volume annuel !!!
On est en train de me faire croire que l'annonceur s'est limité en termes de gains !?
La réalité est que le retour sur investissement n'est pas à la hauteur et il préfère stopper le programme.
La raison est que le comportement des joueurs a évolué, cela mériterait une belle enquête sociologique sur les jeux en ligne.

Plusieurs explications

La légalisation du casino en ligne, des paris sportifs, du poker en ligne. Sur ces sites on peut gagner de l'argent frais pas des bub's ou des points à la con à échanger contre des cadeaux bidons. Ca sent le vécu ;(
Les joueurs ont compris qu'il y avait beaucoup de temps à passer sur ces sites de jeux et que le retour financier n'était pas terrible.
Facebook ne doit pas être étranger aussi à ce phénomène. Facebook dispose d'un très grand nombre d'applications jeux mais surtout une base de clients très bien ciblée. De plus, avant la démocratisation de Facebook, on jouait puis on faisait connaissance avec d'autres joueurs de son clan. Avec FaceBook c'est l'inverse.

D'un point de vue référencement, la façon dont mon site adonfff.com est traité a changé me semble-t-il. C'est un site avec plusieurs thématiques mais une seule semble prédominer : la magie.
Ca se ressent également dans les pubs Adsense qui ont évolué apparemment de contextualisation de pages vers une contextualisation de site. A savoir que Adsense n'affiche que des publicités à thématique magique quelque soit la thématique du site.
La magie phagocyte le reste du site.
D'un point de vue conception, c'est une erreur. Il est préférable d'avoir de nos jours un thème = un site. Cependant, ce site existe depuis 2002 !

Conclusion
Le marché de l'affiliation évolue quant à la rémunération au lead. L'affiliation à la vente ne semble pas trop menacé.
Il y a plusieurs années la rémunération au CPM rapportait bien, puis elle a chuté pour disparaître. Le lead a-t-il encore un taux de transformation suffisant, est-il devenu lui aussi trop coûteux pour les annonceurs ?
Prend-il le chemin du CPM ?

Personnaliser son favicon dans blogger

2010-11-13T22:48:00.023+01:00

Un favicon personalisé c'est plus pro non ?
Je poursuis la mutation de mon blog avec le changement de la favicon grâce à un tutoriel trouvé sur un blog... qui parle de blogger mais pas seulement...
J'y ai trouvé un tutoriel clair et concis sur la manière d'ajouter un favicon à la plateforme de blog gratuit blogger. Il y a même une vidéo explicative pour ceux qui n'aiment pas lire.
Pas de raison de rater ça alors !

Le tuto en question du site LeBlogger
Comment utiliser une Favicon personnelle dans Blogger-Blogspot

Quelques ressources qui pourront vous aider :

Favicon from pics
C'est l'outil que j'ai utilisé pour convertir mon png qu'on voit ci-dessus pour obtenir le favicon qu'on voit dans la barre d'adresse de WebSite Developer
Favicon Creator
Outil en ligne pour créer un favicon. Le résultat peut sembler simpliste mais c'est efficace.
GenFavicon
L'outil est intéressant. Ne cliquez pas sur le drapeau français pour avoir l'outil en Français. Ce n'est pas traduit !
IconsPedia
Une bibliothèque d'icônes gratuites assez conséquente
PNG Optimizer
Pour optimer ses icônes au format png, 20% de poids en moins nous est promis.
Ave Iconifier
Un logiciel portable qui convertit les png en ico et inversement par drag n drop. A utiliser avec le site ci-dessous parce que la taille du png peut être assez conséquente selon le png. Le petit plus est la conversion par lots.
Tuto en image et en français

NDD gandi vers Blogger

2010-11-12T15:22:00.046+01:00

Pour faire plus crédible, une adresse professionnelle pour son blog (même sur une plateforme de blog gratuit tel que Blogger) est important. J'ai passé le cap et ce tuto pour utiliser son nom de domaine sur blogger m'a bien aidé.

Au passage, j'ai supprimé les pubs adsense qui parasitent les pages plus qu'elles ne rapportent.

Studio-Adsense.blogspot.com devient donc WebSite-Developer.fr.
De plus, Blogger s'est largement amélioré, notamment la possiblité de créer des pages statiques, ce qui m'a convaincu de franchir le pas. Évidement, Blogger est bien loin de concurrencer Wordpress mais un pas significatif a été franchi.

Enfin, il m'est régulièrement demandé d'intervenir sur des sites web, j'ai donc choisi de me professionnaliser en optant pour le statut d'autoentrepreneur et pour une URL plus acceptable.

Le tutoriel pour paramétrer Gandi
Une bonne synthèse entre l'aide de Google et de Gandi:

Changer les DNS gandi pour pointer vers blogspot

Insertion propre et rapide d'une vidéo sur son site

2010-11-08T15:16:00.002+01:00

Souhaitant respecter un minimum les normes W3C pour le XHTML, je ne pouvais pas laisser tels quels les codes à copier pour embarquer une vidéo provenant d'une plateforme tel que youtube, Dailymotion, ...

Quand on pense qu'il est recommandé de nettoyer son code pour espérer un meilleur référencement dans google et que celui ne propose pas un code propre pour ses vidéos, ça me fait bien rire !
Faites ce que je dis mais pas ce que fais !
Zut ! Je ne suis pas un gosse !
Enfin bref, je vais quand même obéir !

Le code à utiliser
Ce code fonctionne pour moi sous Firefox 3.6.12 et IE 8 pour Youtube, DailyMotion, et Metacafe

<object type="application/x-shockwave-flash" width="480" height="385" data="$[URL]">
<param name="movie" value="$[URL]" />
<param name="wmode" value="transparent" />
</object>

Ce code est à utiliser avec clippings une extension (en Français) très pratique pour Firefox
$[URL] représente une variable, ce code va appeler une fenêtre ou il faudra coller l'adresse de la video :

Pour Dailymotion, il faut récupérer la valeur de l'attribut value de la balise embed dans le code à copier.
Pour Youtube c'est l'attribut src
Même chose pour Metacafe

Récupérez la valeur URL
Pour récupérer cette valeur facilement; le code n'est pas très lisible dans la zone de texte et de plus cette zone ne sert qu'à copier-coller le code; copier-coller le code classique donné par la plateforme vidéo dans un éditeur de texte, CTRL+F pour chercher le mot src, value pour DM et copier tout ce qu'il y a entre les guillemets.
Vous pouvez également supprimer tout ce qu'il y a après le ? (point d'interrogation compris) ça fonctionne sans.
src="http://www.youtube.com/v/PMrWn-UGTf4?fs=1&hl=fr_FR"
value="http://www.dailymotion.com/swf/video/xfjjzn?additionalInfos=0"
src="http://www.metacafe.com/fplayer/619727/shoe_string_magic_trick.swf"

Utiliser Clippings

Une fois installé clippings apparaît dans le menu contextuel de Firefox.
Sélectionner la portion de code montré ci-dessus dans la partie le code à utiliser
Clic droit>Clippings>Nouveau à partir de la sélection.

Cette extension est très utile pour copier des portions de texte que l'on écrit souvent dans les forums, les blogs, les webmails, etc.
Clippings fonctionne également avec thunderbird

Voir aussi le site du zéro et son tuto sur comment insérer une vidéo sur son site montrant une balise conditionnel pour les anciens navigateurs. Personnellement, je ne la mets pas ça ne coûte pas bézef de mettre à jour son navigateur, non ?
L'image du T-Shirt vient de là : W3C compliant

Annuaire WRI abuse

2010-09-07T17:04:00.006+02:00

Les annuaires de qualité ne sont pas légion
Mais là l'annuaire de WRI abuse grandement.
Aujourd'hui, suite à un email de WRI, je décide de mettre à jour la description d'un site.
Il y a beaucoup de formulaire à remplir mais je me plie à l'exercice qui est malgré tout intéressant car il est plutôt exigeant. Il m'a fait réfléchir sur la manière de décrire mon site, de trouver les mots justes.

Comme tous les annuaires, et c'est tant mieux d'un point de vue SEO, il me demande de rédiger du contenu original.

Ce que j'ai crû faire mais l'envoi de la modification est bloquée car le contenu de la description semble d'après ce satané script qu'il soit dupliqué, sans me donner plus d'indications sur le site qui contient la description fautive.

2 suggestions que certains pourront reprendre pour créer leur propre annuaire :

donner l'URL fautive qui contient le contenu dupliqué car dans le cas d'inscription à plusieurs annuaires, comment faire à moins d'appeler un voyant !?
avoir la possibilité de mettre le formulaire en mode brouillon pour pouvoir le reprendre par la suite

Mes recherches sur les descriptions présentes dans différents annuaires n'ont rien donné. J'ai modifié la description qui ne ressemble à aucune autre sur le web au point de dénaturer partiellement le sens de la description en y mettant des synonymes proches.
Mais non là toujours pas bon !
Je vais y mettre quoi, la description de la recette de l'estouffade provençale ?

Il me semble que WRI a pris le parti du SEO et de Google en omettant que ce sont encore des êtres humains qui surfent.
Ou bien est-ce un aveu que plus personne ne fait des recherches sur les annuaires, que WRI n'est plus qu'un link farm évolué, et qu'ils se font du blé sur nos mots clés et nos descriptions chiadées ?!
----
Modif du 9 septembre
L'administrateur a répondu à mon message sur le forum "Problème points fors dans inscription annuaire WRI". Je le félicite pour sa réactivité, WRI se soucie donc bien de ses utilisateurs et c'est tant mieux.

Comment ajouter un slideshare à CMSMS

2010-08-27T12:58:00.005+02:00

Voici le tuto pour ajouter un slideshare à CMSMS

Tout d'abord, téléchargez la balise objecttag
Via votre FTP, déposez le fichier function.object.php dans le répertoire plugins
Connectez-vous à la partie admin du site menu extensions puis balises
La balise devrait apparaître dans la liste, un clic sur l'aide vous permet d'accéder à des informations sur la manière d'utiliser ce module.

L'ajout dans la page d'un objet flash dans CMSMS se fait par la mise en place du tag Smarty suivant :

{object open=1 src='url_du_swf' height='300' width='400' class='flashplayer'}

Texte alternatif pour le SEO et l'accessibilité

{object close=1}

Cette syntaxe permet d'avoir un code XHTML valide. Mais pour afficher les diaporamas SlideShare en play list, il faut ajouter un paramètre.
Repérez le paramètre flashVars dans le code à copier sur la page widget de SlideShare:

flashVars="feedurl=adresse_presentation"

La balise Smarty devient :

{object open=1 src='url_duswf' height='300' width='400' class='flashplayer' param='flashvars::feedurl=adresse_presentation||allowFullScreen::true||allowscriptaccess::always'}

Texte alternatif pour le SEO et l'accessibilité

{object close=1}

Vous venez d'ajouter une playlist SlideShare à CMS Made Simple, tout en ayant un code propre.
Exemple sur adonfff.com : PPS humour.

Moteur de recherche RapidShare et autres

2010-07-30T10:11:00.000+02:00

Shufs

http://www.shufs.com/
Une alternative à RapidZearch qui semblent moins fourni en sites de téléchargement mais il est possible de faire des recherches sur un site en particulier et sur tous les sites également.
Ce site se distingue par ses plugins pour FireFox, IE et Chrome ainsi que quelques widgets de recherche.

Polémique sur le no links

2010-07-24T01:19:00.004+02:00

Je résume la discussion sur AQC.com concernant les commentaires
Do follow-> No Follow -> No links car les spammers vont vraiment ch*er !
Au départ le texte qui suit était le texte que je devais ajouter en commentaire sur AQC et plutôt que de donner mon avis sur le sujet dans les pages et d'ajouter du contenu, ce contenu sera pour ma pomme et celle de mes lecteurs.

Mon avis sur le nolinks
Comme me disait le beau-père du boulanger qui ne passe que le samedi dans le hameau du village d'à côté parce que je veux bien être "gentilmaisfautpaspousserquandmême" : T'occupe pas du chapeau de la gamine et pédale !

Plus sérieusement, j'écris un commentaire pourri et je prends le risque de ne pas être publié.
C'est la même chose pour les commentaires spam.

Qu'est-ce qu'un commentaire spam ?

un troll
un commentaire pourri
un lien vers un site porno, MFA, freesites
les commentaires style SkyBlog
...

Les commentaires c'est la porte ouverte à toutes les fenêtres dixit le beau-père du boulanger qui ne passe que le samedi dans le hameau du village d'à côté parce que je veux bien être "gentilmaisfautpaspousserquandmême"!

Si Dieu est un blogueur (si,si de source sûre je sais qu'il en est! La Bible ça vous dit rien ? Et s'il envoyait un messager maintenant il ne s'y prendrait pas autrement pour propager la bonne parole) et bien les blogueurs ne sont pas des dieux mais après tout chacun fait ce qu'il veut de son blog.

C'est ça qui est grisant avec un blog, on a le droit :

de vie ou de mort sur les commentaires
de raconter portnawak dans nos billets
de se réjouir parce qu'on a augmenté nos stats
de jubiler encore parce que vous êtes en train de lire cette ligne et la suivante
de penser que vous allez rire à cet instant précis grâce à ce billet !
...

Je pousse le concept encore plus loin
Do follow-> No Follow -> No links -> No comments -> No blogs et ça c'est mon avis pas celui du beau-père du boulanger qui ne passe que le samedi dans le hameau du village d'à côté parce que je veux bien être "gentilmaisfautpaspousserquandmême"!

Quel outil pour créer son site ?

2010-07-16T22:24:00.000+02:00

Seul un professionnel peut répondre !
Encore une fois, il faut analyser l'environnement de travail ?

Quels sont vos connaissances pratiques ?
connaissances de langages
connaissances d'un logiciel
De quel budget disposez-vous ?
Vous partez de rien ou êtes prêts à investir quelques dizaines d'euros
Quel temps pouvez-vous consacrer à la réalisation de votre projet ?
Quelques heures par mois, par jour
etc

Il faut savoir faire appel à un professionnel indépendant qui vous assistera dans la maîtrise d'ouvrage !
Confieriez-vous la réalisation de votre maison à l'architecte qui a dessiné les plans, feriez-vous totalement confiance au maçon qui doit monter les murs quant à la réalisation du plan ?

Et bien étonnamment de nombreux porteurs de projets ne trouvent pas ça étrange pour leur projet web !
Et vous ?