C’était pour vous tenir au courant un peu. Mais voici ce que vous êtes venu chercher, les bons plans de la semaine.

• Des graphs en jQuery qu’ils sont beaux
  Le flash, j’aime pas trop, mais son utilisation pour des graphiques m’a toujours semblé adapté. Mais petit à petit jQuery grignote ce secteur, en voici une nouvelle illustration très réussie.
• Profiler vos script PHP
  Une alternative à xdebug très bien introduite par ce billet
• 12 sites pour vos présentations en lignes
  Parce que c’est devenu un peu une grosse source de connaissance, les présentations exposées en conférence puis mise en ligne, les outils ne manquent donc pas.
• Les myths des réseaux sociaux
  Très bon article sur un sujet d’actualité
• Des Tshirt pour graphistes et développeurs
  C’est bientôt noël, peut-être une idée de cadeaux se cache dans ce billet. Ils ne sont pas tous en vente, mais ils sont tous bien pensés.
• Une jolie ombre portée en photoshop
  Toujours dans la rubrique « passons nous des graphistes », voici un petit tutorial pour une ombre portée très réussie.
• Plugin symfony sfCodeReview
  Je ne le connaissais pas, mais je le trouve parfaitement bien pensé. ce plugin vous permettra de balayer le code source de Symfony directement depuis la debug bar
• Reflet d’image en jquery
  Ca reste toujours sympa, surtout quand c’est bien codé.
• Encore un set d’icone pour blog très bien fichu
  Très travaillé et coloré, tous les icônes indispensables pour réussir son thème de blog
• Un explorateur de fichier en PHP
  Très belle réalisation, ce script pour permettra de vous balader dans l’arborescence de votre serveur web avec un certain style. Ajax et graphisme sont aussi au rendez-vous.

crédit photo: http://www.flickr.com/photos/besimo/4094334183/

Bref, en attendant, pas de raison que je ne publie pas! Voici donc une mini astuce, sur un problème rencontré cette semaine, qui m’aura un peu usé, surtout quand on voit la solution finale.

On va donc parler de IE et de l’AJAX.

Commençons par poser le décor comme d’habitude. Quand on fait de l’AJAX avec symfony, il n’est pas rare d’essayer de le faire non intrusif (c’est même conseillé, mais ça dépend si le site a un intérêt à fonctionner sans javascript), et donc de rendre une même action symfony différemment selon qu’on l’attaque en normal ou en AJAX.

Pour cela, on utilise donc un code proche de celui-ci:

if($request->isXmlHttpRequest())
{
  return $this->renderPartial('panier/widget');
}

Au final pour le navigateur, la requête reste la même. Demandez donc maintenant à un navigateur obsolète du genre IE de gérer se genre de mécanisme.
Vous vous attendez au résultat, et je confirme pour vous. De façon non systématique, mais il arrive que si vous chargez d’abord l’action par un appel GET classique et que vous exécuez ensuite une requête ajax sur cette même action, IE a tendance à vous renvoyer la page entière et non pas seulement notre partial comme on l’a défini.

On peut penser que le souci vient de nos entêtes non détectées, mais on s’aperçoit que d’autres requêtes AJAX fonctionne… Et là, on essaye une petite ligne jquery avant notre requête AJAX:

$.ajaxSetup ({
    cache: false
});

Et par magie, IE arrête son jeu de cache cache!

C’est tout bête, mais il fallait le savoir.

Maintenant, je le sais, et vous aussi ;)

Après avoir définitivement abandonné TinyMCE, car trop usine à gaz et n’en faisant qu’à sa tête, j’ai essayé nicedit comme je vous l’avais signalé dans un bon plan de la semaine. Malheureusement, il reste un peu juste pour certains besoins.
Sur les conseils de Sam, je me suis donc relancé dans une vieille connaissance, FCKEditor, un des plus vieux RTE avec TinyMCE.

S’il est a noté de nets progrès, il fait encore un peu usine à gaz (mais moins que TinyMCE quand même) et je le trouve particulièrement moche, mais c’est un détail qui peut se modifier, donc on va le mettre de côté pour l’instant ;)

Un des impératifs par contre, c’est la personnalisation et donc la création de plugin permettant de rajouter des boutons avec des fonctionnalités que l’on aura déterminer nous même. Et vu les difficultés que j’ai pu rencontrer pour créer mon premier, je me suis dis que ca valait bien quelques explications. Dans un souci de clarté, je ne détaillerai pas l’installation de fck, je vous invite à faire un tour sur leur site pour ça.

Première chose quand on veut créer un plugin fck, créer son arborescence, dans editor/plugins. Ici, on va créer un plugin qui nous permettra de rajouter un bouton à notre toolbar qui lancera une fenêtre nous permettant de faire un peu ce qu’on veut, en l’occurrence dans notre cas, afficher une liste des pages de notre gestionnaire de contenus symfony afin de pouvoir insérer des liens internes entre elle.

Dans notre nouveau dossier, vous créez donc un fichier plugin.js avec à l’intérieur:

// Ici je crée une action FCK qui s'appelle Internlink, et qui chargera le fichier test.html (qui sera au même niveau que ce fichier) lors de son appel
FCKCommands.RegisterCommand('Internlink', new FCKDialogCommand('Internlink','Ajout lien interne',FCKConfig.PluginsPath+'internlink/test.html', 300, 300 ));
 
// Ici je crée un bouton pour la toolbar auquel j'associe l'action précédemment définie
FCKToolbarItems.RegisterItem( 'Internlink', new FCKToolbarButton( 'Internlink', 'Lien interne', null, FCK_TOOLBARITEM_ICONTEXT, true, true, 1 ) ) ;

Ensuite on enchaine avec le template de notre popup qu’on a appelé test.html plus haut (on le met bien où on veut mais j’ai définis au-dessus de le mettre au même niveau):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
    // Cette partie est nécessaire pour pouvoir utiliser les fonctions de fck à l'intérieur de notre popup 
    var oEditor = window.parent.InnerDialogLoaded();
    var FCKConfig = oEditor.FCKConfig;
    var dialog = window.parent;
    document.write('<script src="' + FCKConfig.BasePath + 'dialog/common/fck_dialog_common.js" type="text/javascript"><\/script>');
    dialog.SetOkButton(true); // Par défaut, seul le bouton annuler est affiché, on rajoute le bouton ok	
 
    // Maintenant on fait bien ce qu'on veux, ici j'ai décidé de récupérer en AJAX, une liste en JSON de toutes mes pages et d'alimenter ma selectbox avec
    jQuery(document).ready(function(){
      $.getJSON("/content/selectJson",{}, function(j){
        var options = '';
        for (var i = 0; i < j.length; i++) {
          options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
        }
        $("select#intern-link").html(options);
      })
    });
 
    // Puis on surdéfinit une fonction Ok qui est appelé par fck quand on appuye sur le bouton ... ok
    function Ok()
    {
      // Maintenant on utilise fck pour rajouter du contenu à notre RTE. Ici je rajoute simplement les valeurs de mes 2 champs définis dans mon HTML ci-dessous
      oEditor.FCK.InsertHtml( '<a href="'+ jQuery('#intern-link').val() +'" class="extern">'+ jQuery('#intern-label').val() +'</a>' );
      return true; // Il faut renvoyer true pour fermer la popup
    }
</script>
</head>
<body>
	<div id="add-intern-link">		
		<p>
			<label for="intern-link">Lien interne</label>
			<select id="intern-link" name="intern-link">
			</select>						
		</p>
		<p>
			<label for="intern-label">Label</label>
			<input type="text" id="intern-label" name="intern-label" />						
		</p>
	</div>
</body>
</html>

Il ne reste plus qu’à charger notre plugin dans notre conf:

FCKConfig.Plugins.Add( 'internlink' ) ;

et ajouter le bouton à notre toolbar comme par exemple:

FCKConfig.ToolbarSets["nice"] = ['Internlink'];

et on obtient:

On a maintenant accès à toutes nos pages, et un clic sur ok, nous rajoutera un lien dans notre contenu avec le label renseigné.

Il ne reste plus qu’à adapter à vos besoins ces petits bouts de codes!

Et bien, Amicalement-web va se mettre à suivre la mode! Pourquoi? Et bien, je suis un grand bookmarqueur, mais qui bookmark surtout à son lieu de travail car rarement le temps de lire un article en entier et surtout je bookmark très ciblé sur tout ce qui pourrait me servir dans le monde du développement web.

Alors pour m’obliger à faire du tri et à relire tous ces bookmarks, je vais vous présenter une sélection chaque semaine. Donc après le billet Symfony du mardi, on aura le billet bon plans du vendredi! (ca rime bof pour le coup).

Voici en exclusivité mondiale la première liste estampillée amicalement-web:

• Le pense bête pour les déploiements symfony
  Une petite liste (encore une!) très user friendly, qui permet de vérifiez si votre application symfony est prête pour le déploiement. En gros un résumé de toutes les personnalisations disponibles
• Firesymfony
  Une extension firebug pour remplacer la debug bar de symfony qui se pare avec cette nouvelle release d’un lokk and feel très pro.
• jQuery Password Strength Meter
  Un plugin jquery qui permet facilement de vérifier la complexité d’un mot de passe et de renvoyer cette information à l’utilisateur
• Ajax Fancy Captcha
  Un autre plugin jquery de captcha plutôt original (via drag n drop)
• Des badges twitter
  Des badges twitter avec des zozios qui ont du style
• Simple Perfect WordPress Theme
  Un thème que je pourrais me voir utiliser, très sobre et propre
• Comment donner à vos liens un style de bouton
  Un tutorial très sympa avec un rendu très pro qui utilise le système CSS de porte coulissante
• A jQuery inline form validation
  Un des meilleurs validateurs de formulaires jquery qui m’a été donné de voir

Voilà, c’est tout pour cette semaine de mon côté, et vous un lien vous a marqué cette semaine?

Mais du coup, on en demande de plus en plus, et les traitements sont bien souvent de plus en plus lourd. Et pour un utilisateur rien n’est plus frustrant que de cliquer sur un lien/bouton et ne de pas voir l’application réagir, ne serait-ce que pour l’informer qu’elle a bien compris sa demande.

On a donc trouvé la solution, de petits gif animés qui symbolisent l’attente comme par exemple:
ou bien

Et certains ont donc eu la bonne idée de faire un générateur de load ajax avec la possibilité de changer les couleurs pour coller au mieux à votre charte graphique. Il suffisait d’y penser!