Tout est bon pour gagner de précieuses minutes pour un webdesigner, et ce plugin est vraiment très pratique.

Comment on fait pour créer une boite avec des coins arrondis en temps normal ? On prend photoshop, on dessine un rectangle avec coins arrondis, on découpe l’image en 8, on la stocke sur le serveur et on met tout ça dans un tableau 3×3 ou dans des div imbriqués…

Vous m’avez compris, celà prend du temps et peut devenir fastidieux si on veut changer la couleur, faire des boites de style différents…

Et bien c’est terminé tout ça ! Une ligne de commande suffit à donner le plus bel effet à un simple rectangle de couleur. Pour plus d’informations, lisez ce post : http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery

Avant toute chose : cet outil est magique !!

Le site que je suis en train de faire est un framework maison qui me permet entre autre de faire un site multilingue. Et c’est en ces moments que le EditInPlace prend tout sons sens : plutot que de passer par une interface d’admin pour traduire et déclarer une variable de langue une à une, je peux faire ça en live sur le site !

Pour ce qui est du plugin, tout se trouve sur le site : http://davehauenstein.com/blog/archives/28

Quand à sa mise en place, c’est on ne peut plus facile :

1/ Tout ce qui est éditable est entouré de :

echo "<span class=’editInPlace_i18n’ id=’lang__$var’>$var</span>";

2/ On applique le EditInPlace sur tous les éléments que l’on souhaite pouvoir éditer :

$(document).ready(function(){
    $(".editInPlace_i18n").editInPlace({
        url: "index.php?module=core_admin&action=update_i18n",
        bg_over: "transparent",
        value_required: true,
        params: "ajax=yes"
    });     
});

3/ Mon action update_i18n récupère les données en POST et fait un update en base :

#@ Update lang var in DB
// Default lang
$def_lang = ‘fr’ ;

// Do update & write new text
if ( set_lang($var_update, $def_lang, $_POST['update_value']) ) {
    echo $_POST['update_value'] ;
} else {
    echo $_POST['original_html'] ;
}

4/ Pour éditer les liens tranquillement, il faut également ‘unbinder’ tous les liens ‘<a…>’, pour ça, il suffit d’ajouter :

    $("a").unbind() ;
    $("a").bind("click", function() { return false;} ) ;

Je me sers d’une variable de session et d’un champ caché accessible par Javascript pour mettre à ‘On’ ou ‘Off’ le mode d’édition.

Bien sur, ce sera à adapter à votre environnement, mais tout est très bien expliqué sur le lien plus haut.

Vous savez tout maintenant, alors bon EditInPlace à tous !!

Download It !

Je cherchais depuis hier soir un plugin jQuery qui puisse me permettre de raffraichir le code html d’une DIV a intervalle régulier pour un module de news et Ô, désespoir : celui-ci n’existait pas !

Donc Bibi, comme il en avait besoin et qu’il aime bien l’esprit communautaire, bah il a commencé à créer ce plugin pour sa bibine, et aussi et surtout à partager ce plugin à toute la communauté

Pour le plugin jQuery "jQuery.refreshDiv.js" :

    /*
     *    jquery.refreshDiv 1.0 – 2007-09-26
     *   
     *    Uses code and techniques from following forum:
     *    1. http://forum.alsacreations.com/topic-24-29380-1-Resolu-jQuery-Raffraichir-un-div-periodiquement-.html
     *
     *    All the new stuff written by Guillaume DE LA RUE (www.web2ajax.fr)   
     *    Feel free to do whatever you want with this file
     *
     */
     
    (function($) {
        $.refreshDiv = function(source, url, interval_ms) {
            return setInterval(
            function() {
                return $(source).load(url) ;
            }, interval_ms );                              
        }
       
        $.fn.refreshDiv = function(url, interval_ms) {           
            if (!url)
                return;
       
            this.each(function() {
                new $.refreshDiv(this, url, interval_ms);
            });
   
            return this;
           
        };       

    })(jQuery);

Et pour raffraichir un DIv :

    jQuery(document).ready(function() {
        // Refresh news div every 3000 sec
        $(‘#news_panel’).refreshDiv(‘/Actualites/module.html’, 3*60*1000) ;                           
    });

Testez le et dites moi si c’est bon pour vous que je le mette directement sur le site officiel de jQuery !

Je pense que je vais ajouter une ptite customi

Alors attention, avis aux webmasters : ce post est pour vous !!

Voici un site qui regroupe une palanquée de générateurs Web2.0 pour donner un bon coup de contraste à votre site : http://techmagazine.ws/online-generators/

On y trouve de tout : générateur de badges, de boutons, de loading, de stripes (ces fameuses bandes obliques),  de logos, de textes multicolores…

A utiliser sans modération !

Vous souhaitez mettre en place un menu design horizontal ou vertical sur votre site, votre blog et ce en moins de 10 minutes ?

Un Générateur de menu vient de faire son apparition sous le nom de http://cssmenumaker.com/

On met le nombre de boutons que l’on veut afficher, le texte, les URL et tout ça est servi dans un zip prêt à utiliser.

C’est avec une grande fierté (et aussi des ptis yeux), que j’ai mis mon premier site pro en ligne cet après-midi !

Le site www.lavieimmo.com rassemble plusieurs services inédits : dépot d’annonces immobilières gratuites, cinq à six actualités écrites par nos journalistes, des données de prix ville par ville, getsion d’un portefeuille immobilier, données statistiques INSEE, guides immobiler…

Dites-moi ce que vous en pensez mais en tout cas, ça fait plaisir de voir son petit bébé en ligne

Il va de soit qu’un bon développeur, geeker de surcroit ne peut plus développer un projet sans faire appel à la magie d’Ajax ! Je sais et j’en connais, il y’aura toujours les fans du bon <TABLE> et notepad pour développer, le fait d’utiliser AJAX change vraiment la vie et ouvre la porte à des fonctionnalités vraiment étonnantes.

J’ai commencé par le fameux ’scriptaculous’ (http://script.aculo.us/), mais pour être honnête les mises à jour et nouveaux plugins ne sont pas fréquents.

=> Je l’ai tout de même utilisé sur la V2 du site de www.lavieimmobiliere.com, qui sera en ligne lundi 10 sept et c’est vrai que ça m’a déjà bien aidé pour coder le moteur de recherche, ainsi que les transitions entres les pages, le menu accordéon… Mais toujours avec un pti gout de pas assez…

Alors suivant ajaxrain quotidiennement (à mettre d’urgence dans votre RSS reader), les frameworks à la mode en ce moment sont jQuery et Mootools.

C’est donc curieux comme un loup affamé que j’ai testé jQuery sur un petit site web que je suis en train de faire (www.keystone.fr – Pas encore en ligne ! ) et c’est vraiment sidérant à quel point c’est simple et complet. La manipulation des objets DOM est impeccable, celle des CSS également, rapide… Que du bon en boite  !

Alors ayant un nouveau projet sur le feu (un site de bourse plutot bien chiadé), avec plein de courbes dynamiques, beaucoup de contenu et finalement peu de place, quel framework choisir ?

- Côté perf : jQuery dont la réputation était très mauvaise au début à améliorer par 8 sa vitesse de traitement, ce qui en fait un des framework le plus rapide => C’est plutot un bon point ça

- Au moins un plugin différent sort par jour, plus fonctionnel les uns que les autres => C’est pas mal non plus ça

- Doc bien fournie

- Communauté très active donc.

Et puis en tapant sur une fourmilière, apparait ExtJS… (Tiens je l’avais pas encore vu celui-là !) Mais c’est exactement ce qu’il me faut ! D’ailleurs, pour me comprendre un peu mieux et avant de lire la suite, allez jetter un coup d’oeil aux démos disponibles sur le site :

Possibilité de l’utilsier en standalone, ou avec jQuery, YahooUI…

Nombreux effets et des choses comme les datagrid à partir d’un XML m’interessent plus particulièrement, possibilité de télecharger un packake ‘Light’ et de choisir les modules que l’on veut ajouter…

Donc à moins que je ne trouve mieux, mon choix va donc se porter sur ExtJS, que je trouve extrêmement bien fouttu et qui évolue super rapidement.

Allé, y’a plus qu’à maintenant !

Si vous voulez partager votre expérience, surtout n’hésitez pas car je vous avoue que le ‘benchmarking’ n’a pas été facile et je lorgne encore pas mal sur le YahooUI ou le google Toolkit…

Je commence à lire pas mal de choses sur l’art et la manière de contraster et disposer les éléments d’une page web pour que l’oeil du visiteur suive un chemin précis que j’ai fixé.

C’est pas facile, mais quoiqu’il en soit, ça améliore terriblement le rendu visuel et le visiteur ne se dit pas : "Mais c’est quoi ce site où je comprends rien ??"(D’ailleurs, vous me ferez penser à changer le design du site qui est à mon gout horrible...).

Bon en tout cas, voici un excellent article linké par Ajaxian (http://ajaxian.com/archives/primary-secondary-actions-in-web-forms) , et une étude métrique faite sur 23 utilisateurs que l’on a instrumenté pour voir où se poser leur regard.

=> Très interessant et instructif, à consulter donc d’urgence : http://www.lukew.com/resources/articles/PSactions.asp

Un autre article m’avait également appris beaucoup de choses sur le contraste, et la hauteur des éléments à utiliser pour mettre en évidence le contenu sur un site => c’est rempli de bonnes vérités et de bons conseils.

=> A lire également d’urgence pour rattraper votre retards : http://www.pompage.net/pompe/contraste-et-sens/

Allé, je vous laisse pour aujourd’hui ! Ciao.

Edit de 10h40 : Et merci à DezinerFolio pour ce thème ! (http://www.dezinerfolio.com/2007/09/04/simpress-free-theme-download/)

Alors, attention en avant première mondiale !!, voici la Bonne méthode pour binder un callback sur un DOM… (Je me la pète là)

En clair, les événements comme "onClick", "onMouseOver", mappage de des touches peuvent être associés dynamiquement à des fonctions javascript et donc à la puissance de jQuery !

Un bon mouseOver ou onClick :

$("#div_id").unbind( "click" ) $('#div_id').bind("click", function() { alert('Oh yes, click me again !'; }); $("#div_id").unbind( "mouseover" ) $('#div_id').bind("mouseover", function() { alert('Mouse is Over me !'; });

=> Pour plus de détails : http://jquery.developpeur-web2.com/documentation/evenements/bind.php

Un bon mappage de touche (Je m’en sers pour afficher la fenêtre de login admin sur CTRL+L) :

Ajouter &ccedil;a dans les headers, le.js est dispo en dessous de l'article : <script src="includes/jQuery/jquery.shortkeys.js" type="text/javascript"></script> Apr&egrave;s : $(document).shortkeys({ 'CTRL+L': function () { _dispLoginForm(); } });

=> Plus de détails : http://rikrikrik.com/jquery/shortkeys/ more…