Le plugin

Dans le cadre d’un de mes projets (bloginy), j’ai développé un petit plugin pour l’éditeur WYSIWG, Tiny MCE. Ce plugin vous permet d’avoir un petit bouton yamli dans la bare d’outils de votre éditeur. Le plugin est fonctionnel seulement pour les francophones actuellement.

Démo

Démonstration du plugin

Téléchargement

Télécharger l’archive en cliquant ici, et ensuite décompressez la dans le dossier plugins de votre installation tinyMce.

Installation

Il suffit d’activer le plugin ‘rbyamli’ dans la liste des plugins de tinyMce, et d’ajouter ensuite le bouton ‘rbyamli’ à une des barres d’outils à l’endroit désiré. Ci dessous un exemple de code de configuration de tinyMce, tout en activant rbYamli :

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">

tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "rbyamli,safari,iespell,inlinepopups,fullscreend",
theme_advanced_buttons1 : "rbyamli,bold,italic,underline,separator,strikethrough,separator, bullist,numlist,separator,undo,redo,separator,link,unlink, image, fullscreen",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom"
});
</script>

<form method="post" action="somepage">
<textarea name="content" style="width:100%">
</textarea>
</form>


L’utilisation de Javascript aussi diffère grandement d’une application web à une autre. Quelques applications web n’utilisent JAVASCRIPT juste pour avoir quelques effets sympas et de beaux widgets, d’autres par contre nécessite une utilisation plus approfondie pour aboutir par exemple à une application entière sur une seule page sans rafraichissement. C’est souvent cette dernière catégorie d’applications qui nécessite l’utilisation d’un framework (ou d’une architecture solide faite par le développeur lui même).

Travaillant sur une application web de ce dernier type (Zikyt), je me suis trouvé face à ce problème et pour être tout à fait franc, je ne suis pas encore convaincu par aucun des frameworks actuels (peut être par manque de connaissance de quelques uns).

JQuery

Le framework que je connais le mieux et que j’utilise le plus c’est jQuery, tout d’abord ses avantages :

• Très léger,
• Abstraction très facile du DOM, manipulation avancée du DOM,
• Easy Ajax, des fonctions assez simples vous permettent de faire des appels AJAX assez simplement,
• Des widgets et plugins plus ou moins sympas avec jQueryUI notamment,
• Très bonne communauté et documentation.

Le framework (à lui tout seul) est en effet assez pratique pour les applications web qui n’utilisent pas le Javascript pour faire des RIA, mais plutot pour du design et à la limite deux ou trois appels AJAX par page. Cependant pour le développement d’une Rich Internet Application, la tâche est moins aisée. Il est nécessaire de se construire sa propre architecture de l’interface coté client, et le framework n’offre pas d’outils pour simplifier la conception de cette architecture mais sert plutot de complément (« simplificateur de Javascript pour la manipulation du DOM »).

DOJO

Un framework intéréssant (que je connais un peu moins bien que jQuery) mais qui dispose de quelques atouts intéressants :

• Javascript Orienté Objet : DOJO offre une manière élégante de faire de l’orienté objet en Javascript,
• Chargement de fichiers (classes) à la volée : DOJO charge vos fichiers que lorsque c’est nécessaire => gain de performances,
• Abstraction du DOM.

Malgré ses fonctionnalités qui permettent de faciliter la conception de RIA (notamment l’aspect programmation orientée objet), je trouve que DOJO est un peu vieillissant, notamment avec ses widgets (le design laisse à désirer). Bien sur, Il est tout à fait possible de ne pas utiliser ces widgets.

Autres frameworks

Ma connaissance des autres frameworks Javascript (Prototype, Mootools, Scriptaculous, …) n’est pas suffisante pour pouvoir les analyser. Un framework sort du lot GWT, qui vous permet de générer automatiquement du Javascript à partir de code JAVA (A Tester).

Voila je compte sur vous pour enrichir cette liste avec vos propres analyses des frameworks. Je partage avec vous, mais je compte bien apprendre de vous aussi

Personnellement, voulant toujours être au top de la technologie, je me pose souvent ce genre de questions, et j’ai de plus en plus de mal à y répondre. Bien sur le choix souvent repose sur la nature des projets qu’on veux réaliser, les contraintes … mais qui ne s’est jamais dit, moi je veux tout maitriser !!! Bien sur, c’est tout simplement impossible, d’où cet article dans lequel je vais essayer de vous présenter les technologies que je connais (celles qui en valent la peine) et celles que je prévois d’apprendre (c’est juste mes choix personnels et nullement les choix à faire absolument).

Le couple HTML/CSS

Je suis un fervent supporteur du Cloud Computing (je ne suis pas le seul), et je suis convaincu que le web représente le centre de toutes les technologies du futur. Et qui dit web, dit forcément HTML/CSS. Les navigateurs suivent plus ou moins bien cette tendance. Internet Explorer 6 est en declin (plus qu’un tout petit pourcentage) et les standards sont assez bien suivis par le reste des navigateurs. Le passage vers HTML5 et CSS3 est sur la bonne voie.

Le langage PHP

A mon avis, c’est un langage à maitriser absolument pour tout développeur web, pour différentes raisons : productivité, communauté, documentation, serveurs web, …. Malgré ses inconvénients liés à sa lourdeur lors des calculs complexes, il a encore de très beaux jours devant lui.

Framework PHP : Symfony

Le couplage de PHP à un framework est une nécessité pour tout projet de taille moyenne/grande. Et sur ce point la, les possibilités ne manquent pas : faire son propre framework, utiliser Zend Framework, Symfony, CodeIgniter … Mon choix se porte vers Symfony (et notamment la version 2) pour les raisons suivantes : flexibilité, documentation, communauté, à la pointe (design patterns, technos, mise à jour) …

Javascript et son framework

Après la maitrise d’un langage serveur, il est tout aussi important d’utiliser un langage client (notamment pour les RIA), et de ce coté la, on ne peux pas passer à coté de Javascript. Je vous disais que l’utilisation de frameworks est nécessaire pour les langages serveurs, c’est encore plus vrai pour javascript (langage client). Jj’utilise jQuery actuellement comme Framework Javascript, mais je ne suis pas convaincu à 100%. En réalité je n’ai pas encore trouvé le framework Javascript qui me convient le plus (je compte sur vous pour des suggestions )

Systèmes d’exploitation type UNIX

Mon avis personnel sur ce point est catégorique : vous êtes développeur web, oubliez windows (pour l’instant) !!! Il est absolument nécessaire de maitriser les systèmes d’exploitation type UNIX (GNU/Linux, FreeBSD, Mac OS …) et ceci notamment pour leur utilisation en tant que serveurs web.

Développement d’applications Mobiles

Ce n’est plus un marché à négliger, et je pense que l’iPhone et Android sont les deux poids lourds du futur des applications mobiles. Le développement pour iPhone implique donc la maitrise d’Objective-C, Cocoa Touch et XCode, et le développement pour Android implique quand à lui, JAVA et le SDK d’Android.

Amazon Web Services

Ce sont les différents services amazon pour le développement en Cloud computing. Actuellement ce sont les techologies les plus abouties dans ce domaine la. Les services les plus intéressants sont : Amazon S3 pour le stockage et, Amazon EC2 pour la puissance de calcul.

Autres

En plus de toutes ces technologies, d’autres non moins intéréssantes, mais que je trouve moins prioritaires pour l’instant viennent s’ajouter à ma liste d’attente des technologies à surveiller de prés : Python, Django, Le langage Go, Google App Engine, GWT, Microsoft Windows Azure.

Voila pour mes choix personnels, maintenant je compte sur vous pour nous faire part de vos choix et suggestions.

Cette version vient directement améliorer les points les plus critiqués de la première version de symfony à savoir la rapidité, les performances, la facilité de prise en main et la flexibilité.

Rapidité et performances :

Selon les benchmarks effectués, Symfony 2.0 est 3 fois plus rapide que Symfony 1.4 et Zend Framework 1.10, 2 fois plus rapide que Solar 1.0 et 6 fois plus rapide que Cake PHP 1.2.6. Symfony consome également deux fois mois de mémoire que ses principaux concurrents. Détails des tests

Facilité de prise en main :

D’après les créateurs, vous pouvez commencer à développer en Symfony 2.0 après 10 minutes de lecture de ce tour rapide et au bout d’une heure vous maitriserez les fondements. Personnellement, après avoir lu rapidement le Quick Tour, j’ai trouvé Symfony 2.0 très simple. (mais c’est peut être parce que je connais déjà symfony 1).

Flexibiltié :

La principale amélioration de Symfony 2.0 est la réécriture de la partie basse du framework (kernel), en utilisant un conteneur d’injection de dépendances. Si vous n’êtes pas familiers avec cette notion, je vous invite à découvrir les slides de Fabien Potencier (le CEO de Sensio, l’éditeur derrière Symfony). Ce mécanisme permet à Symfony 2 d’être très flexible, puisque tout est paramétrable et que vous pouvez très simplement vous passer de certaines fonctions de Symfony par exemple, où bien utiliser vos propres classes pour les remplacer. Vous pouvez absolument tout changer.

Sachez que vous pouvez dés à présent utiliser et tester le framework, rendez vous sur ce site mis en ligne pour l’occasion. Personnellement je suis très satisfait par cette évolution (révolution), et je vais commencer illico à migrer quelques uns de mes projets vers Symfony 2 pour mieux cerner le framework.

Pour ceux qui ne connaissent pas, Qu’est ce qu’une API RESTFull ?

C’est un service Web qui propose des fonctions accessibles généralement par protocole HTTP (c’est à dire en appelant une Url tout simplement, à laquelle on fournit différents paramètres). L’utilisation de ce genre d’API a connu un essor important avec les différentes applications dites Web 2.0. A titre d’exemple, Twitter propose une API RESTful pour accéder à sa timeline, publier des messages… Même chose pour Facebook ou encore Bloginy.

Utilisation de RESTClient

Pour utiliser RESTClient, rien de plus simple, il suffit de fournir l’url voulue, les paramètres, la méthode (GET, POST, ….). Vous pouvez aussi vous authentifier ou utiliser des certificats SSL. Ensuite, lancez le service et vous aurez accès à un certain nombre d’informations sur le résultat obtenu : le header, le body avec colloration syntaxique et indentation (XML, JSON). Vous pouvez également implémenter aisément différents tests sur les résultats obtenus (en JAVA, directement sur l’application). Bref assez parlé, vous êtes développeur, vous utilisez des API, jetez y un oeil, ça vaut le détour.

Cerise sur le gateau, c’est disponible pour Windows, Mac et Linux.

SVN Privés + Trac

Si vous ne voulez pas diffuser le code source de vos applications en Open Source, ces services sont pour vous :

• XP-Dev Certainement le service le plus complet en matière de SVN privés. Il dispose des fonctionnalités suivantes : Un espace de 200 Mo, deux projets privés et un nombre illimités de projets open source et tout ceci pour un nombre d’utilisateurs illimité par projet.



• ProjectLocker Si votre projet nécessite plus d’espace, ProjectLocker vous propose 500 Mo cependant le nombre d’utilisateurs est limité à 5 seulement. Il conviendra aux petites équipes. J’ai également remarqué quelques ralentissements au niveau du serveur SVN.

SVN publics + Trac

Pour vous applications Open Source, le choix ne manque pas :

• Assembla Une interface agréable, un nombre d’utilisateurs ililmité, un wiki, un chat … un espace collaboratif complet.
• SourceForge La plus grande plateforme d’hébergement de projets Open Source. Au menu des fonctionnalités : Trac, dotProject, MediaWiki, SVN, Git, Backup, Statistiques ….

Si vous en connaissez d’autres ou si vous avez un retour à faire concernant un de ces services, c’est juste en bas ici

Amazon S3 – Simple Storage Service

Avant d’aborder la nouvelle offre d’Amazon, revenons un peu sur les services qui font le succès de leurs services web à ce jour. S3, l’offre de stockage sur le cloud qui vous permet de stocker des données sur les serveurs d’Amazon sans se soucier de la complexité de l’architecture technique qu’il y a derrière. ça permet aux développeurs notamment de stocker les ressources utilisés par leurs projets web tout en garantissant la montée en charge (nombre d’accès, capacité …).

Amazon EC2 -Elastic Compute Cloud -

A travers cette offre, Amazon propose de la puissance de calcul sur ces serveurs selon nos besoins. Concrètement, pour un développeur web qui développe une application nécessitant un traitement lourd qui ne veux pas faire planter son serveur web, dés que son application dépasse un certain nombre de visiteurs, peut à chaque fois qu’un utilisateur lance un traitement, lancer une machine virtuelle Amazon (AMI – Amazon Machine Image -) et libérerai ainsi son serveur web de ses tâches fastidieuses.

Amazon RDS – Relational Database Service -

Avec les deux offres précédentes, Amazon avait déjà une main mise sur les services de Cloud Computing. Le seul frein pour ses services était l’absence d’offres concernant les bases de données (pour des raisons techniques dont je ne saurais parler). En effet, avec ces offres Amazon ainsi que les différentes offres de Cloud Computing sur le marché, on ne pouvait gérer la montée en charge d’accès aux bases de données. Notre petit serveur mySql ne pouvait supporter un nombre élevés d’utilisateurs en accès concurrent à la base de données. C’était sans compter sur la nouvelle offre Amazon RDS qui permet exactement cela. Elle gère entièrement le SQL 5.1.

Pour nous développeurs ?

Amazon propose déja une API riche, mais il existe également d’autres librairies qui pourraient simplifier la vie de nous autres développeurs. Ainsi pour PHP, je vous invite à découvrir Tarzan AWS

Enjoy !!!

Prérequis :

Télécharger et installer les deux softs suivants :

• MAMP, (Apache / MySQL / PHP)
• SPMPT un petit soft qui va grandement nous simplifier la vie, un genre d’extension à MAMP, pour lui ajouter mod_python, svn, et trac en un clic. (Dailleurs c’est dommage que ce n’est pas inclus par défaut sur MAMP).

Mise en place de SVN et Trac

Une fois les deux softs téléchargés et installés avec succès (ce qui ne devrait pas poser trop de soucis), il ne vous reste plus qu’à mettre en place votre repository SVN et le relier à Trac. Pour ce faire suivez les instructions ci-dessous.

1 – Ouvrez un terminal (/Applications/utilitaires/Terminal)

2 – Créez votre repository avec la commande suivante :

/Applications/MAMP/subversion/bin/svnadmin create /Dossier/de/votre/repository

2 – Ajoutez les lignes suivantes à la fin de votre fichier de configuration Apache (/Applications/MAMP/conf/apache/httpd.conf)

LoadModule python_module modules/mod_python.so
<Location /svn>
DAV svn
SVNPath /Dossier/de/votre/repository
AuthType Basic
AuthName "Subversion Repository"
AuthUserFile /Applications/MAMP/conf/svn-auth-file
Require valid-user
</Location>
<Location /trac>
SetHandler mod_python
PythonDebug on
PythonInterpreter main_interpreter
PythonHandler trac.web.modpython_frontend
# Yout trac-projects environment
PythonOption TracEnv /Dossier/de/votre/trac
#/trac/ refer to /trac (Location)
PythonOption TracUriRoot /trac
PythonOption PYTHON_EGG_CACHE /tmp
AuthType Basic
AuthName "Trac"
AuthUserFile /Applications/MAMP/conf/svn-auth-file
Require valid-user
</Location>


3 – Après il faut créer le fichier qui contiendra les utilisateur de votre serveur SVN/Trac en utilisant la commande suivante :

htpasswd -c /Applications/MAMP/conf/svn-auth-file nomutilisateur

Choisissez ensuite votre mot de passe (cet utilisateur va être choisi pour être administrateur de Trac)

4- Ensuite, Initialisez Trac avec la commande suivante :

/Applications/MAMP/Trac/bin/trac-admin /Dossier/de/votre/trac initenv "nom-de-votre-trac" sqlite:db/trac.db "svn" /Dossier/de/votre/repository

5- Accordez ensuite les droits d’admin du trac à l’utilisateur créé précédemment :

/Applications/MAMP/Trac/bin/trac-admin /Dossier/de/votre/trac permission add nomutilisateur TRAC_ADMIN

6- Quelques réglages de droits avec les commandes suivantes :

current_user=`ls -l /Applications/MAMP/ | grep MAMP.app | awk '{ print $3 }'`
sudo chown -R $current_user /Applications/MAMP/
chmod -R ug+rw /Applications/MAMP/

Voilà maintenant votre trac et votre SVN sont prêts à être utilisé, lancez MAMP, et ensuite vous aurez accès à votre serveur svn avec l’url http://localhost:8888/svn ou votre trac avec l’adresse http://localhost:8888/trac

Mise en place du hook ‘post commit’ de Trac

Pour faire fonctionner le hook de post commit de Trac, la procédure est assez simple :

1 – Téléchargez tout dabord la dernière version du script de post-commit de trac,

2- Copiez ce script dans le dossier hooks de votre repository SVN créé précédemment,

3- modifiez ensuite le fichier post-commit.tmpl qui est dans le dossier hooks de votre svn comme suit :

REPOS="$1"
REV="$2"
TRAC_ENV="/dossier/de/votre/trac"
/Applications/MAMP/python/bin/python2.6 Dossier/de/votre/repository/hooks/trac-post-commit-hook -p "$TRAC_ENV" -r "$REV"

Remarque : Attention il faut mettre le bon numéro de version de python, actuellement dans SPMPT c’est 2.6

4- renommer ce fichier en enlevant simplement l’extension .tmpl, vous pouvez par exemple utiliser la commande :

cd /Dossier/de/votre/repository/hooks
mv post-commit.tmpl post-commit


Voilà vous êtes prêts à commiter et à agir sur le trac directement

Enjoy

Les tâches Symfony

Vous savez, c’est toutes ces commandes qu’on lance à partir du terminal avec un namespace et un nom de tâche pour initialiser un projet par exemple ou construire le modèle de données (./symfony propel:build-model) ou toute autre commande.

Création de la tâche

Eh bain symfony nous permet de créer des tâches personnalisés à l’aide de la commande

./symfony generate:task monnamespace:matache

un fichier PHP est donc créé dans le dossier ‘lib/task’ de votre projet, que vous pouvez personnaliser très aisément, puisque vous pouvez accéder directement aux classes du model.

addArguments(array(
// new sfCommandArgument('my_arg', sfCommandArgument::REQUIRED, 'My argument'),
// ));
 
$this->addOptions(array(
new sfCommandOption('application', null, sfCommandOption::PARAMETER_REQUIRED, 'The application name'),
new sfCommandOption('env', null, sfCommandOption::PARAMETER_REQUIRED, 'The environment', 'dev'),
new sfCommandOption('connection', null, sfCommandOption::PARAMETER_REQUIRED, 'The connection name', 'propel'),
// add your own options here
));
 
$this->namespace = 'monnamespace';
$this->name = 'matache';
$this->briefDescription = '';
$this->detailedDescription = <<configuration);
$connection = $databaseManager->getDatabase($options['connection'] ? $options['connection'] : null)->getConnection();
 
 
// add your code here
}
}

Vous pouvez personnalisez ce fichier pour donner un titre et une description à cette tâche.

Une fois votre tâche créée et personnalisée, il ne vous reste plus qu’à créer la tâche CRON qui appelle cette tâche avec la commande suivante : ./symfony monnamespace:matache

Exemple d’une tache :

Voici un exemple de tâche que j’ai créé pour Bloginy.
class bloginyUpdateblogsfeedsTask extends sfBaseTask
{
protected function configure()
{
// // add your own arguments here
// $this->addArguments(array(
// new sfCommandArgument('my_arg', sfCommandArgument::REQUIRED, 'My argument'),
// ));
 
$this->addOptions(array(
new sfCommandOption('application', null, sfCommandOption::PARAMETER_REQUIRED, 'The application name'),
new sfCommandOption('env', null, sfCommandOption::PARAMETER_REQUIRED, 'The environment', 'dev'),
new sfCommandOption('connection', null, sfCommandOption::PARAMETER_REQUIRED, 'The connection name', 'propel'),
// add your own options here
));
 
$this->namespace = 'bloginy';
$this->name = 'update-blogs-feeds';
$this->briefDescription = 'Met à jour les flux des blogs inscrits sur Bloginy';
$this->detailedDescription = <<configuration);
$connection = $databaseManager->getDatabase($options['connection'] ? $options['connection'] : null)->getConnection();
 
// add your code here
$count = BlogPeer::updateBlogFeeds();
printf('%s articles ont été ajoutés à Bloginy.',$count);
}
}

Vous pouvez voir ici que tout le fonctionnement de cette tâche est effectué dans la classe du modèle « BlogPeer ».

Voilà j’espère que ça pourra aider plus d’un

Entre les différents IDE de développement Web existants, j’ai toujours eu un peu de mal à me fixer sur un seul. Entre Eclipse, Netbeans, Coda, Adobe dreamweaver, Textmate, … j’ai toujours eu du mal à me décider avec toujours une petite préférence pour Eclipse et PDT. Je crois qu’avec Aptana Studio, je viens de trouver une sérieuse alternative que j’ai rapidement adopté.

De quoi a besoin un développeur web en matière d’IDE

• Support HTML, CSS,
• Support PHP, (ou d’autres langages Ruby, Python …)
• Support SVN,
• Support Javascript,
• Support de frameworks JS : jQuery, Prototype …
• Accès rapide à la base de donnée,
• Accès rapide à la console,
• Extra : Support de frameworks tel que Symfony, Zend, Django, Ruby on rails …

Les plus d’Aptana Studio

Aptana Studio est un soft qui se présente sous forme de plugin Eclipse ou entièrement Standalone, et qui répond à tous les besoins cités ci-dessus (il me manque juste le support de mon framework favori « symfony ») et d’une excellente manière. La ou Eclipse PDT répondait aussi aux besoins indiqués mais avec quelques inconvénients non négligeables (un peu trop lent à la détente le support de PHP sous éclipse), Aptana studio apporte un nouvel éditeur PHP, très confortable à utiliser et très réactif. Aptana propose aussi d’autres plugins intéressants : Support de développement web pour iPhone, Support Ruby on Rails, Support python, Support Adobe Air …

L’essentiel d’Aptana est gratuit excepté quelques plugins payants (pensez à les désactiver), notamment le support de leur offre Cloud Computing (Jaxter).

Alors merci Arisoft de m’avoir fait découvrir ce soft. Et je vous invite chers lecteurs et amis à y jeter un oeil. Je vous garantis que vous ne serez pas déçus