Voici donc le code, résultat de cette réflexion, ou un clic avec ctrl (ou cmd pour les mac) ou le bouton du milieu de la souris devrait ouvrir le lien dans un nouvel onglet, comme le ferait un lien normal :

$('.line-click').live('click', function(e){
  e.stopPropagation();
  href = $(this).children('a:first').attr('href');
  if (e.ctrlKey || e.metaKey || e.which == 2) {
    window.open(href);
  } else {
    window.location = href;
  }
}).css('cursor', 'pointer');

A utiliser avec le code html suivant par exemple:

<ul>
  <li class="line-click"><img src="monimage.jpg" alt="youpi" /> 10/02/11 <a href="monlien.html">Titre de mon billet</a></li>
  <li class="line-click"><img src="monimage2.jpg" alt="youpi" /> 07/02/11 <a href="monlien2.html">Titre de mon 2e billet</a></li>
  <li class="line-click"><img src="monimage3.jpg" alt="youpi" /> 21/01/11 <a href="monlien3.html">Titre de mon 3e billet</a></li>
</ul>

A adapter selon vos envies. Ici c’est le premier lien trouvé dans l’élément avec la class line-click qui sera déclenché. Voilà, en attendant que j’arrive à finir un billet plus consistent!

Crédit photo : http://www.flickr.com/photos/flyingturtle/837938254

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/

Wait and see mais en attendant voici la sélection de la semaine.

• Propel 1.4 stable
  C’est un peu l’annonce de la semaine. Propel 1.4 stable est sortie! Pas mal de nouveautés dont certaines reprises des bonnes idées de Doctrine, mais également quelques exclus. Peut-être un futur billet plus complet à ce sujet ;)
• Un joli thème wordpress
  Une fois n’est pas coutume, croisé au détour d’un clic, assez sobre mais bourré de petits détails.
• Un autre joli thème wordpress
  Comme quoi ya des semaines comme ça. Celui-ci est plus poussé graphiquement mais a un vrai potentiel je pense
• Event jquery sur la sélection de texte
  Fonctionnalité qui pourrait ouvrir la porte à quelques nouvelles possibilités sympa
• Un nouveau script de validation de formulaire
  Oui encore un. Ca faisait longtemps. Mais celui-ci est vraiment bien fini et permet de définir ses validations avec très peu de ligne js, tout étant calibré depuis le code html
• Memcache et le PHP
  Une petite explication sur Memcache et ses bienfaits pour le PHP
• Drag and share avec jQuery
  Une façon originale de penser le drag and drop et le partage sur les medias sociaux.
• Un compilateur javascript par Google
  C’est le lien qui a fait le tour du web, cette semaine. Le voilà décrit par dew, même s’il s’avère très compliqué d’être utilisé avec jquery, ca reste un outil assez novateur.
• Un nouvel ORM PHP
  Basé sur l’ORM de Ruby, voici un ORM dont on pourrait bien entendre parler prochainement.

• jQuery pour interagir avec les form
  Un bon billet pour débutant pour apprivoiser jquery dans le contexte des formulaires. Ca permet de faire rapidement certaines choses élémentaires qu’on utiliser plus tard dans des scripts plus complexes.
• Class PHP5 pour merger et compresser vos CSS
  Simple et efficace, cela reste une bonne pratique pour réduire les appels HTTP souvent pointé du doigt dans les performances d’un site.
• Styler vos boutons
  Encore un, mais bien fait. Et quand on est développeurs, on est content d’avoir ce genre de ressource ;)
• 20 moyens de réduire notre empreinte carbone en tant que développeur
  Et oui, c’est pas parce qu’on est bien au chaud derrière notre machine qu’on ne peut pas faire de petits gestes pour la planète.
• jQuery plugin d’approche
  Pour faire réagir un lien en fonction de la proximité de la souris. L’effet est très sympa!
• Doctrine plugin pour schema mysql workbench
  Dans le monde de la conception de modèle de données, mysql workbench commence à s’imposer grâce à un vrai look n feel. Voici donc un plugin qui permet de passer facilement d’un schema workbench à un schéma doctrine!
• Outils pour développeurs javascript
  Parce que le javascript a bien évolué, voici une liste d’outils très pratiques pour tout ce qui touche de près ou de loin à ce langage.
• Un robot twitter en PHP
  Pas vraiment d’utilisation précise mais le principe est sympa.

• Un colorateur synthaxique multilangage (via blogmotion)
  Le monde des colorateur synthaxique, c’est un peu comme les modalbox en jquery, il y en a partout. Pourtant celui-ci a encore réussi à innover, dans le sens où il arrive à colorer chaque langage présent dans une même page, très pratique pour le cas de code web alliant html, css, javascript et php. On attend une version portable avec impatience.
• Comment écrire un behavior pour doctrine
  Et oui, doctrine on va en parler de plus en plus. Et avec ces behavior bien pratique, on va forcément avoir la question, comment qu’on fait? J’anticipe donc! A noter qu’une rumeur suggèrerait que notre ami Vincent pourrait en parler prochainement sur son blog
• JSON? Comment ca marche?
  Avec l’avènement du javascript, un format de données est sorti de sa cachette: le JSON. Il permet de modéliser des objets javascript, très simplement et est maintenant utilisé régulièrement comme format d’échange en ajax. Mais pour en savoir plus, il suffit de jeter un oeil au lien ci-dessus.
• Passez votre site symfony en maintenance
  Un site web vivant, c’est un site qu’on met à jour. Mais quand ces modifications peuvent prendre du temps, plutôt que de donner un mauvais rendu ou des erreurs à vos visiteurs, il est préférable de leur fournir une page d’attente. Ce billet donne la marche à suivre pour le faire sous Symfony!
• Un plugin jquery pour récupérer des tweets très facilement
  C’est la mode, mettre ses derniers tweets sur son site. Voilà un moyen très simple d’y parvenir
• Un plugin jquery pour tronquer des textes
  Du même auteur, voici un autre plugin jquery qui permet de tronquer très facilement des textes sur notre site.
• Comparons Zend et Symfony
  Un très bon comparatif qui sort des benchmarks classiques où l’auteur montre les différences lors d’une création d’un nouveau projet sous ces 2 framework
• 11 astuces pour protéger votre admin wordpress
  En plein d’actualité avec la faille découverte dans wordpress 2.8.3, voici un récapitulatif des meilleures techniques pour protéger votre admin wordpress.

Une semaine très riche j’ai trouvé, comme quoi ca sentirait presque la fin des vacances déjà…

A demain si tout va bien sous de nouvelles couleurs!

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 ;)

Du coup, la question qui s’impose c’est, est-ce que certains d’entre vous trouverez sympa d’avoir la traduction d’un de ces articles (à raison d’un par semaine grand max hein)? Voilà, c’est dit, à vous de jouer et de me dire, histoire que je me tracasse pas pour rien.

Pour vous aider à réfléchir, voici la liste de la semaine:

• Evolution de l’interface admin de WordPress
  Petit billet sympa qui retrace grâce à différent screenshot, l’évolution de l’interface admin de WordPress, pour ceux qui ne blog pas depuis 6ans.
• Collez vos pieds de page en bas
  C’est un des détails que les graphistes aiment, mais que les intégrateurs ont vite dégagé, pouvoir collé le footer d’une page en bas du navigateur et ce même si le contenu fait la moitié de la fenêtre. Il y a des solutions JS qui existe, en voici une pure CSS, qui demande juste quelques contraintes pour fonctionner. Pour la plupart des cas, ca ne devrait pas poser de souci.
• Les 100 plugins wordpress les plus populaires
  On a souvent du mal à s’y retrouver dans les plugins wordpress, tellement il y en a et tellement la zone qui leur est réservée sur le site officiel est pas top. Voilà donc une liste qui s’avère pratique où on mentionne tous les leaders pour chaque fonction qu’on souhaite rajouter à notre blog préféré.
• Librairie de cryptage en javascript
  Voici une petite librairie sympa vu qu’elle propose un premier niveau de sécurité au niveau des formulaires html, en cryptant leur envoi au serveur. Bien sûr, cela reste très rudimentaire dans une grosse politique de sécurité, mais l’initiative est bonne et dans certains cas, ne serait-ce que pour compliquer le snif de requête, elle peut s’avérer utile
• Paypal va s’ouvrir aux développeurs
  Je n’ai pas eu le temps d’enquêter plus que ça, donc je vous met le lien d’origine où j’ai trouvé l’info. Mais ca promet!
• Améliorer l’expérience utilisation avec des détails
  Une petite astuce toujours dans la quête de la meilleur expérience utilisateur. Le principe est simple, bien faire comprendre à votre utilisateur que vous avez reçu sa demande.
• 6 choses que votre mère ne vous a jamais dit sur le debug javascript
  Article très sympa, et se serait lui qui serait traduit cette semaine, si jamais vous décidiez qu’il faut que je le fasse.
• Un enième plugin jquery slideshow
  Au royaume du jquery, les slideshow sont rois. On ne compte plus le nombre différentes de plugins qu’il existe. Alors pourquoi je vous parle de celui-là? 2 particularités, il gère la roulette pour le défilement mais surtout il est francophone : )) Et oui quand je trouve de la qualité dans notre belle langue, je me gène pas

Et bien sûr, stay tunes cette semaine, au cas où vous croiseriez un nouveau thème dans le coin… ou pas :p

• Passer de photoshop à wordpress via (@alsacreations)
  Un projet très prometteur qui se présente sous la forme d’un plugin photoshop qui permet d’identifier les parties de votre design à un « élément » wordpress. Vous obtenez alors votre template wordpress prêt à emploi! Je n’ai pas encore eu l’occasion de tester, mais j’y compte bien. Et je suis preneur de tout retour du coup.
• Switch CSS en jquery
  Il y a quelques années avec l’avènement du CSS dans les sites web, la mode a été au style switcher, ou comment changer l’habillage d’un site juste en changeant de CSS! Et bien ce petit plugin, très bien fichu remet cette mode au goût du jour en permettant de changer de css comme bon vous semble, via un lien, un évènement, ou tout autre action que vous jugerez intéressante. Personnellement j’y vois plein de possibilité!
• Un billet sur la considération des autres envers les développeurs via (@n1k0)
  J’ai la chance de pas connaitre ce genre de considération, mais je ne m’étonne pas que cela existe. On fait un boulot quasi invisible pour le commun du mortel et pour certains, tout le monde peur le faire pour peu qu’il connaisse le langage. Ah si c’était si simple…
• Gérer vos listes via jquery
  J’ai souvent tenter de reproduire ce comportement, mais je dois avouer que l’idée est très bonne ici! Ajouter la possibilité d’ajouter un item à une liste déroulante directement dans cette liste, c’est du très bon! A tester très rapidement pour ma part.
• AddATweet
  Quand une bonne idée, rencontre twitter, cela donne un nouveau genre de service qui va peut faire du bruit. Le principe est simple, un plugin firefox qui permet de donner son avis sur la page que vous être en train de visiter via un tweet, et donc de consulter les avis des autres! Un coup d’oeil sur le screencast de la home vous en dira plus. En cours de test chez moi.
• Test de rapidité des framework JS
  Quand il faut choisir son framework javascript, on a parfois du mal à expliquer pourquoi on préfère celui-ci plutôt qu’un autre. Ici, on peut au moins juger les plus répandus sur un critère très simple, leur vitesse de sélection d’un élément selon les différents sélecteurs. Et devinez qui arrive en tête… Un indice, je ne parle quasi que de lui ;)
• Guitar Hero version Jquery
  C’est la mode en ce moment, les jeux jquery avec des animations de plus en plus impressionnantes. Ici, on reprend le concept de l’addictif Guitar Hero appliqué à un clavier d’ordinateur.
• Créer des formulaires sous wordpress
  Un projet à l’aube d’une grande carrière certainement. A quelques jours de son lancement officiel, il s’annonce déjà répondre à un réel besoin. Construire des formulaires, simplement, via l’interface wordpress. A suivre de très près.
• Comment se créer un mot de passe sécurisé
  Aujourd’hui tout service, application, demande de renseigner un mot de passe. Et souvent, par facilité, on en choisit très (trop?) simple. Pourtant, les annonces de comptes piratés et autres exploits se font de plus en plus nombreux. Voici donc un moyen très simple de se créer un mot de passe, sans être infaillible, d’être au moins plus difficile à percer.

La deuxième découle de la première, finalement, on aura un lien « lire la suite » histoire d’être sûr de mesurer toutes les lectures. Bref, des détails, rien de bien grave et voici la sélection de la semaine!

• jGrow
  C’est une des fonctionnalités des RTE assez populaires, pouvoir agrandir la hauteur d’un textarea en fonction de la taille de son contenu, le tout dans un petit plugin jquery
• Comment développer un plugin jquery
  Un très bon tutorial sur les bases de la création de plugin jquery. En anglais certes, mais réaliser par la fine équipe de Sitepoint.com, une très bonne référence
• ImageFlow
  De toute les galeries jquery, en voici une très aboutie qui reproduit l’effet coverflow d’itunes. Très réussie!
• DateJS
  Voici une librairie javascript très intéressante qui permet de transformer une date texte en une « vrai » date, un peu à la manière de strtotime en PHP.
• Select box ipod style
  Un énième plugin jquery sur la customisation d’un selectbox qui s’inspire lui du menu de sélection d’un ipod. Plutôt bien pensé niveau ergonomie.
• Créer un carousel jquery de billets wordpress
  Tout est dans le titre, un tutorial en anglais qui indique comme créer simplement un carousel avec les billets de son blog que l’on souhaite mettre en avant
• Une classe CSS selon la taille du navigateur
  Avec l’avènement des grandes résolutions et du mobile, il devient parfois délicat de contenter tout le monde sur le rendu visuel d’un site. Voici un petit plugin qui va pouvoir aider, en donnant une class CSS au body de notre page html selon les dimensions de notre navigateur.
• Une select box sexy
  Et voici encore une customisation de selectbox qui cette fois-ci, mise sur le look et l’effet est très réussi.

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!