Utilisé pour faire des graphes statistiques en PHP ou générer des captcha.

C’est à la fois simple et beau. C’est rare que ce genre de solution puisses réunir ces deux qualités.

Site officiel : www.artichow.org

Notez que cet article, écrit par Jean-Luc Ranaivoarivao, a été copié sur le blog de ce dernier. Veuillez poster vos commentaires directement a son auteur.

Quand j’entends que l’utilisation de Flash “casse” les principes fondamentaux du web parce-que le bouton “retour”des navigateurs perdent leurs utilité sur Flash 99% Bad, je me sens obligé d’intervenir.

Le fond du problème est que dans un site full-flash, il n’y a très souvent qu’un seul .swf (voire plusieurs mais quand même un seul principal). Ce dernier comprend tout le site est est intégré dans une page HTML. Donc, quand on change de page, c’est l’animation qui réagi. On ne change pas réellement de page (En tout cas pas selon les principes web. Sinon l’url de la barre aurait changé). Du coup, on ne peut pas accéder à une page directement via un URL et quand on fait F5, on a l’impression qu’on reviens toujours sur la home.

Je vous apporte la solution : SWFAdress
Il s’agit d’une application couple d’AJAX et de Flash permettant de gérer les pages dans un fichier swf et d’en associer à chacune un url pré-défini.

Voici un exemple d’un site full-flash: Gil holsters qui utilise cette technologie.
Suitchez sur les pages Savoir Faire, Boutiques … Faites F5 …

Notez que cet article, écrit par Jean-Luc Ranaivoarivao, a été copié sur le blog de ce dernier. Veuillez poster vos commentaires directement a son auteur.

Firefox a annoncé récement son 1 000 000 000 ème téléchargement.
A l’occasion, la fondation vient de mettre en ligne le site onebillionplusyou.

Ca mérite une bouteille de champagne, d’accord. Toutefois, malgrès le chiffre qui semble énorme, Firefox n’atteint toujours pas le 1/4 du marché des navigateurs :

Firefox : 22 %
Internet Explorer : 65 %
Safari : 8 %
Chrome : 2 %

Notez que cet article, écrit par Jean-Luc Ranaivoarivao, a été copié sur le blog de ce dernier. Veuillez poster vos commentaires directement a son auteur.

Sans ce fait, je suis sûr, Internet Explorer aurait rejoins, aujourd’hui, le club de Netscape.

Ceci étant, aux société comme nous, de s’adapter a cette situation.

Pour la suite, apparement, Microsoft s’ouvre a la pression de Bruxelles : microsoft-pret-a-proposer-plusieurs-navigateurs-internet-sur-windows

Toutefois, pour moi, l’issue n’est pas si concluante que ça, en gros: “Internet Explorer reste mais on peut en installer d’autres navigateurs si on a du temps à perdre”.

Mais je dirais : “C’est déjà ça”.

Notez que cet article, écrit par Jean-Luc Ranaivoarivao, a été copié sur le blog de ce dernier. Veuillez poster vos commentaires directement a son auteur.

C’est facile de critiquer le monopole de Microsoft et d’oublier Google. C’est d’ailleurs le partenariat Google-Firefox qui a fait qu’aujourd’hui, tout le monde sait utiliser et n’utilise plus que Google. Ne laissant qu’une insignifiante part pour le reste.

Mais en même temps, si tout le monde utilise Google, c’est parce-que c’est celui qui a répondu au mieux aux attentes des internautes. La conséquence, c’est qu’en référencement, on ne mise que sur lui. Lui permettant de proposer des prix, me semblant trop énormes, pour les AdWords. C’est du monopole, tout simplement. Impossible, aujourd’hui de penser promouvoir son site rapidement, sans passer par Google.

Il est donc, pour moi important, ne serais-ce que de connaitre que d’autres alternatives existent. Je veux, ici, parler de celui qui a été MSN Search, ensuite Live Search et enfin, seulement depuis juin, Bing.

J’ai eu l’occasion de tester un peu, j’ai été en premier surpris par la rapidité, sur ce soup, il n’a rien à envier à son Maître. Côté fonctionnalité, ils sont au même niveau, Maps, Images, Shopping … Niveau pertinence, même niveau aussi sur mes premiers tests.

Par contre, l’affichage est supect, c’est trop “Google-User Friendly”.

C’est en éditant cet article que j’apprend un partenariat entre Microsoft et Yahoo : Microsoft et Yahoo! proches d’un accord pour contrer Google. C’est clair qu’ils ont intérêt. C’est comme ça qu’ils pourront s’imposer.

Au final, je suis quand même agréablement surpris. Je ne m’attend pas a ce qu’il remplace, demain, Google chez tout le monde, mais en tout cas, il va forcer un peu ce dernier à s’améliorer, surtout pour son tarif. Vive la concurence.

Notez que cet article, écrit par Jean-Luc Ranaivoarivao, a été copié sur le blog de ce dernier. Veuillez poster vos commentaires directement a son auteur.

Ses points forts par rapport à Trac :

• Redmine est multi-projet. C’est donc déjà un choix plus subtil que de copier-coller Trac à chaque nouveau projet.
• Redmine gère ses utilisateurs et ses droits. Beaucoup mieux qu’un .htaccess
• Redmine gère nativement les plus importants systèmes de gestion de versions. GIT, CVS, Subversion et Mercurial (qui me porte beaucoup d’intérêt). Vous me direz, sur Trac, il suffit d’intaller un plugin.
• Redmine est un véritable outil de gestion de projet avec son planning, son Gantt. Tout est bien pensé.
• Redmine est plus souple que Trac
• Redmine gère aussi les documents, les fichiers, et a même un forum. Tout ça pour chaque projet.

Pour gérer un projet, sans planning, ayant une poignée d’intervenants, le choix de Trac peut suffire. Un choix qui par contre nous met très vite face à ses limites, quand on est une SSII. J’ai donc décidé d’abandonner Trac définitivement pour Redmine.

Pour plus d’infos sur Redmine, le site officiel.

Passons maintenant à l’installation. Pour la suite, je suppose que vous avez déjà un LAMP qui tournes sous Debian-Like. Sachez toutefois que la procédure qui va suivre a été faite et réussie sur la Lenny 5.0. Supposons aussi que nous allons installer Redmine en créant un utilisateur du même nom, de mot de passe “rdmn”, dont le répertoire home est /home/redmine et que vous voulez servir redmine sur le nom de domaine redmine.maboite.com (les noms de domaines redmine.maboite.com et maboite.com redirige déjà sur l’IP de la machine où vous allez effectuer l’installation).

Commençons par créer cet utilisateur :

useradd -d /home/redmine -g 33 -m -s /bin/bash redmine

Notez qu’ici, on forces ce nouvel utilisateur à appartenir au GID 33, Apache. Il va vous demander le mot de passe, tapez “rdmn”. Une fois fait, faites un “ls -l” pour vérifiez que c’est bon, si c’est le cas, on passes à la suite.

Créez ensuite la base de donnée “redmine” sur MySQL, l’utilisateur du même nom et de mot de passe “rdmn” en lui donnant les doit sur la nouvelle base.

1. Installez RoR (Ruby on Rails)

aptitude install ruby rdoc irb libyaml-ruby ruby1.8-dev libzlib-ruby ri libopenssl-ruby1.8

Ca prend un petit moment. Une fois terminée, nous allons avoir besoin d’une version spécifique de RubyGems, qui est le gestionnaire de paquets de Ruby. Nous n’allons pas utiliser Aptitude, la version que vous aurez par ce moyen n’est pas la bonne.

wget http://rubyforge.org/frs/download.php/45905/rubygems-1.3.1.tgz
tar xvzf rubygems-1.3.1.tgz
cd rubygems-1.3.1
ruby setup.rb

Créez ensuite un lien symbolique, toujours utile:

ln -s /usr/bin/gem1.8 /usr/bin/gem

Une fois que tout est bon pour rubyGems, continuons en l’utilisant:

gem install rails -v 2.1.2

Il nous faut cette version là. Ensuite, nous allons faire en sorte que Ruby puisses utiliser MySQL :

aptitude install libmysqlclient15-dev
gem install mysql

Voilà, c’est presque prêt. Justes quelques derniers petits trucs:

aptitude install imagemagick libmagick9-dev librmagick-ruby1.8
gem install rmagick

rmagick va servir à Redmine pour les générations d’images, de graphes, etc …

2. Installez Redmine

Vous étiez en root.Changez d’utilisateur, maintenant pour ne pas tout embrouiller dans vos droits. Et ensuite, allez dans votre répertoire home.

su redmine
cd /home/redmine

C’est là que vous allez télécharger Redmine :

wget http://rubyforge.org/frs/download.php/52944/redmine-0.8.2.tar.gz
tar xvzf redmine-0.8.2.tar.gz
mv redmine-0.8.2 redmine

On va maintenant s’occuper de la base de donnée que vous avez créé plus haut.

cd redmine/config
cp database.yml.example database.yml
vi database.yml

Renseignez dedans les champs qui concernes PRODUCTION. C’est assez facile à comprendre. Une fois bon, initialisons la base et remplissons là par des données par défaut :

rake db:migrate RAILS_ENV="production"
rake redmine:load_default_data RAILS_ENV="production"

Faites un petit CHOWN :

chown -R redmine:www-data /home/redmine

Et c’est parti pour le premier lancement :

ruby script/server -e production

Sachez que Redmine est livré avec Webrick qui est un petit serveur. Une fois lancé, votre site est accessible http://maboite.com:3000.
C’est cool, vous pouvez déjà vous amuser, mais ce n’est pas fini parce-que Webrick ne peut pas être utilisé en production et que de toute façon, le port 3000 vous gène.

3. Installer Mongrel

Nous allons installer un vrai serveur pour Rails, Mongrel:

gem install gem_plugin mongrel mongrel_cluster

Et ensuite créer le fichier de configuration :

mongrel_rails cluster::configure -e production -p 8000 -N 3 -c /home/redmine/redmine -C /home/redmine/redmine/config/mongrel_cluster.yml -a 127.0.0.1 --user redmine --group www-data

Indiquons, ensuite à Mongrel le chemin de ce dernier fichier :

mkdir /etc/mongrel_cluster
ln -s /home/redmine/redmine/config/mongrel_cluster.yml /etc/mongrel_cluster/monsite.yml

Et on installe le script qui va gérer Mongrel :

cp /usr/lib/ruby/gems/1.8/gems/mongrel_cluster-1.0.5/resources/mongrel_cluster /etc/init.d/

Et on va le modifier :

vi /usr/lib/ruby/gems/1.8/gems/mongrel_cluster-1.0.5/resources/mongrel_cluster

De façon à avoir ce genre de chose :

#
# Copyright (c) 2007 Bradley Taylor, bradley@railsmachine.com
#
# mongrel_cluster Startup script for Mongrel clusters.
#
# chkconfig: - 85 15
# description: mongrel_cluster manages multiple Mongrel processes for use \
# behind a load balancer.
#
CONF_DIR=/etc/mongrel_cluster
PID_DIR=/home/redmine/redmine/tmp/pids
USER=redmine
RETVAL=0
# Gracefully exit if the controller is missing.
which mongrel_cluster_ctl >/dev/null || exit 0
# Go no further if config directory is missing.
[ -d "$CONF_DIR" ] || exit 0
case "$1" in
start)
# Create pid directory
mkdir -p $PID_DIR
chown $USER:www-data $PID_DIR
mongrel_cluster_ctl start -c $CONF_DIR --clean
RETVAL=$?
;;
stop)
mongrel_cluster_ctl stop -c $CONF_DIR --clean
RETVAL=$?
;;
restart)
mongrel_cluster_ctl restart -c $CONF_DIR --clean
RETVAL=$?
;;
status)
mongrel_cluster_ctl status -c $CONF_DIR
RETVAL=$?
;;
*)
echo "Usage: mongrel_cluster {start|stop|restart|status}"
exit 1
;;
esac
exit $RETVAL

vous remarquerez que nous avons surtout ajouté –clean, ceci indique à Mongrel qu’il faut supprimer correctement le fichier pid, sinon lors d’un redémarrage du serveur il y aura une erreur du type “pid file locked”.
Il faut maintenant le rendre éxecutable et on le met dans le système:

chmod +x /etc/init.d/mongrel_cluster
update-rc.d -f mongrel_cluster defaults

Lancez maintenant votre nouveau serveur (vous pourrez aussi le contrôler avec stop, restart) :

/etc/init.d/mongrel_cluster start

4. Mettre en place le Proxy Apache

Nous sommes à 2 doigts de finir. Activons certains modules d’apache si ce n’est pas encore fait et allons voir pour ce qui est du proxy

a2enmod rewrite
a2enmod proxy_http
a2enmod proxy_balancer
vi /etc/apache2/mods-available/proxy.conf

Modifiez le de façon a avoir ceci :

#turning ProxyRequests on and allowing proxying from all may allow
#spammers to use your proxy to send email.
ProxyRequests Off
 
AddDefaultCharset off
Order allow,deny
Allow from all
#Allow from .example.com
# Define the character set for proxied FTP directory listings
ProxyFtpDirCharset UTF-8
 
# Enable/disable the handling of HTTP/1.1 "Via:" headers.
# ("Full" adds the server version; "Block" removes all outgoing Via: headers)
# Set to one of: Off | On | Full | Block
ProxyVia On

Un doigt maintenant, il ne reste plus que le virtualHost :

vi /etc/apache2/sites-available/redmine

On va y mettre :

ServerAdmin admin@maboite.com
ServerName redmine.maboite.com
DocumentRoot /home/redmine/redmine/public/
 
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
 
BalancerMember http://127.0.0.1:8000
BalancerMember http://127.0.0.1:8001
BalancerMember http://127.0.0.1:8002
 
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_FILENAME} -f
RewriteRule (.*) $1 [L]
 
ProxyPass / Balancer://mongrel_cluster/
ProxyPassReverse / balancer://mongrel_cluster/
 
AddOutputFilter DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 
ErrorLog /var/log/apache2/redmine.maboite.com.error.log
LogLevel warn
CustomLog /var/log/apache2/redmine.maboite.com.access.log combined
ServerSignature Off

Là, nous indiquons à Apache de balancer les requettes de redmine.maboite.com:80 sur localhost:8000, soit sur mongrel_cluster. Par contre, Mongrel étant moins rapide que Apache, la directive DEFLATE dit que pour certains fichiers, il faut utiliser Apache plutôt que Mongrel.
Deux dernieres commandes pour finir en activant notre nouveau site et en redémarrant Apache :

a2ensite redmine
/etc/init.d/apache2 restart

Votre Redmine est disponible : http://redmine.maboite.com.

Vous pouvez maintenant jouer avec votre nouveau bijou.
Pour ma part, je n’en suis qu’à une semaine de réelle utilisation, je suis entièrement satisfait.
Le seul hic, c’est le principe des WorkFlow qui est un peu dur à assimiler. Ca mérite d’ailleurs un autre billet.

Notez que cet article, écrit par Jean-Luc Ranaivoarivao, a été copié sur le blog de ce dernier. Veuillez poster vos commentaires directement a son auteur.

Une des plus grandes révolution qu’apporte le Web 2.0 est le partage des tâches entre les deux machines intervenants, le serveur et le client. En effet, aujourd’hui, dans les conceptions technique, on peut se permettre de confier certaines tâches aux navigateurs de façon a soulager un peu le serveur.

D’autant plus la tâche est bien plus simple avec Flash, AJAX, JavaScript, JQuery, les WebServices … et il n’est plus question de portabilité puisque ces technologies sont maintenant quasi présentes sur tous les navigateurs, surtout JavaScript.

C’est dans cet esprit que je vous présente un petit bijou en JQuery que je viens de découvrir récement : DataTables.

En une seule phrase, tout est fait, prêt à être utilisé et une bonne partie des tâches usuelles mais fastidieuse se retrouve géré automatiquement par la machine cliente. Voici les plus grands avantages de son utilisation :

• Listing de donnée via flux AJAX
• Gestion de la pagination
• Gestion de la recherche (via un filtre)
• Gestion du “order by”
• Gestion du nombre de produit à afficher
• Gestion rapide des checkbox pour effectuer des actions groupés

On peut même effectuer des modifications rapides directement sur le tableau. Fonctionnalité que je n’utiliserai pas, je préfère rester sur l’esprit traditionnel de fiche modifiable. Mais pour une liste simple et courte, pourquoi pas.

Pour ce qui est de Vectoris, je l’adopte pour mon Back-Office, OurWeb.

Non seulement je vais simplifier le travail de mes développeurs mais aussi faciliter l’accès aux données a mes clients. Le seul souci qui m’inquiette, c’est justement sur cette histoire d’utilisation de ressources, qu’en est il quand il est question de lignes provenant d’une table dodue, dans le genre 10 000 enregistrements ?

Ca mérite ne serais-ce qu’un coup d’oeuil, dataTables.

Notez que cet article, écrit par Jean-Luc Ranaivoarivao, a été copié sur le blog de ce dernier. Veuillez poster vos commentaires directement a son auteur.

J’ai fini par en créer un prototype, très simple, d’objet movieClip pour ce faire :

////////// Prototype loadImage=
////////// Aucun Preload
MovieClip.prototype.loadImage = function(urlImage){
 	this.createEmptyMovieClip("container", 1);
	this["container"]._x = 0;
	this["container"]._y = 0;
	this["container"].loadMovie(urlImage);
	this.onEnterFrame = function(){
		if(this["container"]._width > 1){
			// Ajuste la position de movieClipContainer au milieu
			this["container"]._x = this["container"]._x - (this["container"]._width / 2);
			this["container"]._y = this["container"]._y - (this["container"]._height / 2);
			delete this.onEnterFrame;
		}
	}
}

A utiliser de cette façon :

MovieClip.loadImage("url/de/l/image/a/afficher.jpg");

Le prototype centre automatiquement l’image.

J’espère avoir fait gagné quelques secondes a mes lecteurs-flasheurs. A vous de l’améliorer selon vos besoin.

Vous trouvez d’autres tâches répétitives et prototypable ? Je suis preneur.

Notez que cet article, écrit par Jean-Luc Ranaivoarivao, a été copié sur le blog de ce dernier. Veuillez poster vos commentaires directement a son auteur.

L’alternative la plus simple, quoique pas forcément adapté à toutes les situations mais a l’avantage d’une implémentation très rapide, est LocalConnection. Un Objet AS2.

Considérons que nous avons deux animations qu’on appellera “action” et “evenement”.

On commence par créer l’objet réceptif dans le flash “action”:

in = new LocalConnection();

Dans le même flash, nous allons déclarer la méthode qui éxecutera l’action proprement dite et qui recevra un paramètre:

in.actionFunc = function(param) {
		//action
};

Ensuite on initialise la connexion de cet objet :

in.connect("evenement");

On passe ensuite sur l’animation “evenement” :

out = new LocalConnection();
out.send("action", "actionFunc", param);
//On supprime l'objet out.
delete out;

Il suffit de mettre ce dernier code sur l’évenement attendu. Le tour est joué.

L’implémentation est a la fois rapide et facile, toutefois sachez que LocalConnection est une connexion sur la machine cliente. Soit, si vous essayez d’ouvrir la page contenant les deux swf sur différents navigateurs, fenêtres ou onglets. Seule l’une des instances marchera.

Notez que cet article, écrit par Jean-Luc Ranaivoarivao, a été copié sur le blog de ce dernier. Veuillez poster vos commentaires directement a son auteur.