Un petit billet pour vous signaler que mon dernier bébé est sorti ce matin : www.socialmixmedia.fr.


C'est le site vitrine de l'agence Web spécialisée sur les Médias Sociaux pour laquelle je travaille en tant que Freelance.

Alors n'hésitez pas à nous contacter pour toute question sur le SMO (Social Media Optimization) afin d'améliorer votre visibilité sur les réseaux sociaux comme facebook, twitter, linked...
=> On commence à avoir une bonne expérience et de solides contacts

Rejoignez-nous sur facebook : Devenez Fan !
Compte twitter : Suivez-nous !
Linkedin : Rejoignez-nous !

Je tenais à vous présenter ma première application développée pour facebook qui se présente sous la forme d'un Quizz avec un timer pour chaque question. Tout ça sur le thème du sport !

Le FrontEnd est en FBJS + jQuery et le backEnd, c'est une api en PHP.

Elle comporte des outils de viralisation comme les Social Plugins "I Like" / "Invite your friends" / "Facepile"..., un classement mondial, la tenue de stats, Facebook Connect...


L'application est sortie officiellement aujourd'hui et validée sur le apps dir de facebook.
Je vous tiendrais au courant de l'évolution des stats et le phénomène de propagation.

On croise les doigts pour que ça prenne !

D'ailleurs si vous voulez tester vos connaissances ou voir à quoi ressemble cette application et analyser les différents mécanismes (authentification/publication...), cliquez-ici : Le Grand Quizz du Sport sur Facebook

Si vous souhaitez en savoir plus sur comment telle ou telle chose : faites moi signe :)

Bye.

jQuery.gaTracker.js adds 2 features to standard Google Analytics script :
- Asynchronous Tracking ( tracking start once page load is complete )
- Allow to track dynamic pages on full ajax websites

Implementation
Load the last version of jQuery.

To init your UA-ID and track the current page, you can use it like this :
[sourcecode]

jQuery(document).ready(function($) {
$.gaTracker.init("YOUR-UA-ID");
}) ;
[/sourcecode]

Firstly, this will init the goggle analytics tracker with your Google Analytics Account ID.
Secondly, it will track the current page after ga.js load.

Track with jQuery binds
If you use dynamic navigation in Ajax, you normally already bind clicks on links in order to override standard navigator implementations.
To track those clicks with analytics, simply call $.gaTracker, passing the url in parameter, like this :
[sourcecode]jQuery(document).ready(function($) {
$('a').bind('click', function(e) {
e.preventDefault() ;
$.gaTracker.track($(this).attr('href')) ;
}) ;
}) ;[/sourcecode]

Download
Download jQuery.gatracker.js v1.0 : source code & minified version

I'll show you here how to implement a simple solution to detect and serve content in the visitor language.

For this, I use two web domains, one with a '.com' extension and the other in '.fr'
But you can either use it as subdomain, like 'fr.website.com' or 'en.website.com'.
And third solution, only based on a url param and cookies.

Let me explains more below..


First to see an example : check at www.delarueguillaume.com.

How to Implement it ?
What you need :
The first thing we have to do is to detect the visitor language. For this, I'd find a very simple, but efficiently, PHP class named 'Language' ( from Jonas Raoni Soares Silva ).

Below, this the code to paste in a new file called "LanguageDetect.php", located in your website directory.

[sourcecode][/sourcecode]

Auto Detection
1/ Now to detect visitor's language, we have to load the LanguageDetect class file, like that :
[sourcecode][/sourcecode]

2/ Set accepted languages : (for me, French or English)
[sourcecode][/sourcecode]

3/ And finally Retrieve best match, which give :
[sourcecode][/sourcecode]

URL Param : $_GET[lang]
If the GET 'lang' param is added to url, like 'www.example.com?lang=fr', we overwrite the auto detection value.
It's useful to let visitor choose is language by clicking on country flag by example.

Our code becomes :
[sourcecode][/sourcecode]

Cookie Store and get preferences
To avoid to send each time the GET[lang] param, you can use cookies to store language.
[sourcecode][/sourcecode]

Translation File Linking :

Basics
We'll create a file called 'i18n'. This file will contains translations and a function to return translated output.
[sourcecode]

Je tenais à vous présenter le site que je viens de mettre en ligne pour présenter mon CV, mon Portfolio et mes expériences.
Tout se passe sur : www.delarueguillaume.com

Par la même occasion, je profite de ce billet pour vous glisser que je recherche un Job de développeur ou de consultant web sur Paris.

Je vais en effet déménager prochainement et je me disais que revenir à l'endroit qui m'avait "professionnalisé" était plutôt une bonne idée.
Ce serait également une belle occasion d'offrir mes services à une entreprise dynamique à la recherche de marchés innovants, apprendre toujours et encore.

Donc si vous êtes à la recherche de quelqu'un comme moi, n'hésitez pas à me contacter ;)

Pour me contacter :
Email : delarueguillaume@gmail.com
CV en ligne : http://www.delarueguillaume.com/
Portfolio : http://www.delarueguillaume.com/#portfolio
Télécharger en PDF : CV_DE-LA-RUE_Guillaume.pdf

Je travaille depuis un bon gros mois sur le projet d'un ami et j'avoue que le résultat est au-delà de nos espérances !
C'est pourquoi je tenais à vous présenter mon travail : www.meetimmo.fr, car on peut dire que je me suis bien laché sur l'utilisation de jQuery, sans oublier d'être SEO friendly and IE compatible (Certainement le plus hardu...)

Je vous invite à en découvrir un peu plus...

MeeT ImmO est donc une agence immobilière basée sur Rouen et Paris.
Elle se positionne sur un marché dit 'Immobilier de Prestige' et c'est pourquoi nous avions besoin d'un site réellement différent de la concurrence, avec une mise en valeur importante des photo-reportages.

C'est sur ce principe qu'est né l'interface de MeeT ImmO : une interface quasi plein-écran

Je vous invite donc à aller voir ce site sans plus tarder et si vous avez la moindre question concernant le développement, je suis prêt à divulguer mes petits secrets de fabrication.

A noter que les nouveaux bien sont automatiquement publiés vers Twitter et Facebook. Tout ça connecté au flux RSS FeedBurner... C'est beau quand même la techologie !

Sur ce, je vais me coucher heureux de mon accouchement ^^

@+

A simple tip for wordpress blogs to hide oldest comments at single load page with jQuery.


For this tip, I suppose you already load jQuery JS framework in your blog.

In your wordpress theme directory, edit 'comments.php' and add the code below to to the end of the file :

[sourcecode]

jQuery(document).ready(function() {

var $comment = $('#comment_list') ;
var $comments = $comment.find('li') ;
var num2display = 8 ;

// -- Hide all comments except 'num2display' newest
$comments.slice(0, $comments.length - num2display).css({display:'none'}) ;

// -- Create the 'Show all comments' link
if ( $comments.length > num2display ) {
$show_all = $('

Click here to view the '+Math.max(0, $comments.length - num2display) +' other comments...

') ;

// -- Bind click on link
$show_all.click(function() {
$comments.css({display:'block'}) ;
$(this).remove() ;
}) ;

// -- Insert link to click after comments list
$show_all.insertAfter($comment.find('ul')) ;
}
}) ;

[/sourcecode]

Then, at load page, you will only have the 8 newest comments on your post and a link to show others.

Look at this blog for more examples and have fun with jQuery !

jQuery Lazy Load Ad is a jQuery plugin that takes advantage of Lazy Load delaying ads loading.
- Highly improve general page load (Ads are displayed after the page load and only inside the viewport)
- Compatibility with AdSense and many other advertisers
– Cross Browser support (IE5.5+, Firefox, Opera, Chrome, Safari)

A new version of this post and of the jQuery Lazyload Ad plugin is available here

Gains on my blog : 65% for the page load, and 52% for page weight
-> Without lazy Load Ad : Page loaded in 8.88s (371.98kb)
-> With : page loaded and accessible in 3.17s (179.18kb)


Big thanks to Mika Tuupola for the Lazy load part
-> http://www.appelsiini.net/projects/lazyload

Another big thanks to FrankT and his document.write overload code
-> http://blog.phpbuero.de/?p=26

To View Demo, simply look at all the ads on web2ajax, they are loaded by Lazy Load Ad.
You can either view the full page Demo by clickinh on 'Demo' Button just below to know how to use it on your own website.


INSERT AD CODE

First, insert placements into your HTML code.
For that, you can use a 'div' tag.
Apply a specified class, only used for lazyLoad Ad uses, as example 'lazyLoadAd_places'
So you have this :
[sourcecode]<div class="lazyLoadAd_places"></div>[/sourcecode]

Now, call the ad publisher code and put it into the div attributes, named as 'original'.

For example with original BlogBang code :
[sourcecode]<div>
<script src="http://www.blogbang.com/d.php?id=a16a937291&n=1&p=L&o=SLW&w=300" type="text/javascript"></script>
</div>[/sourcecode]

Becomes :
[sourcecode]<div class="lazyLoadAd_places" original='http://www.blogbang.com/d.php?id=a16a937291&n=1&p=L&o=SLW&w=300'></div>[/sourcecode]

To finish you can put 'code' tags into the div, code will be evaluated as javascript, just before calling publisher script (look to adsense example).
You can put either HTML code, like tags or image mobile replacements. Degraded content will be replaced by document.write when called.


EXAMPLES

In your HTML code for adSense:
[sourcecode]<div class="lazyLoadAd_places" original='http://pagead2.googlesyndication.com/pagead/show_ads.js'>
<code><!--
google_ad_client = 'YOUR_AD_CLIENT_ID';
google_ad_slot = 'YOUR_AD_SLOT';
google_ad_width = 300;
google_ad_height = 250;
//-->
</code>
</div>
[/sourcecode]


In your HTML code for eBuzzing:
[sourcecode]<div class="lazyLoadAd_places" original='http://www.ebuzzing.com/player_blog/player.php?parametre=115660'></div>
[/sourcecode]


In your HTML code for BlogBang :
[sourcecode]<div class="lazyLoadAd_places" original='http://www.blogbang.com/d.php?id=a16a937291&n=1&p=L&o=SLW&w=300&c=2222222&bg=121212'>
<a href="http://www.blogbang.com/" target="_blank"><img src="http://www.blogbang.com/s.php" border="0" alt="BlogBang"></a>
</div>[/sourcecode]


HOW TO CALL LAZY LOAD AD

Insert the script declarations just before the 'body' endtag.

After loading the last jQuery version and document is ready, lazyLoad the Ads
[sourcecode] ...

<script type="text/javascript" src="/assets/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery.lazyLoadAd.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

// Load LazyLoad Ad on each dom with classname 'lazyLoadAd_places'
$(".lazyLoadAd_places").lazyLoadAd({
threshold: 200,
onComplete: function() {
// -- Pub is displayed !
}
}) ;
}) ;
</script>

...
</body>
</html>
[/sourcecode]

Web2ajaX has a new face today !!

More Funky, more colored, I hope those changes on theme will enjoy your navigation on this blog.

Bye and see you for the next episode...

Genius Menu is an highly flexible expand list plugin for jQuery.
The Expand style is inspired from MaxOSX Dock Genius Effect.

Click on View Demo to look at effect, flexibility and code.

Features :
- Auto orientation of expand
- Highly Customizable
- Easily draggable with jQueryUI
- Browser support ( IE > 5.5??, FireFox, Safari, Opera )

Vous le savez, jQuery est génial, c'est la classe américaine ce truc et cependant, j'avais encore un soucis avec des requetes ajax synchrone qui bloquaient le navigateur le temps du retour de la réponse et quand cette requête est exécutée toutes les 10 secondes et que le browser est bloqué 2s sur les 10s, ça le fait pas trop...

Et bien j'ai la solution et elle se nomme 'jsonp'.


But What is 'jsonp' ? JSONp c'est du json et le 'p' pour 'padding' (formatage). Cette technique est utilisée par de nombreux gros voir très gros comme google, yahoo ou facebook...

Dans l'idée, celà permet d'effectuer une requete ajax en GET asynchrone (donc ne bloque pas le navigateur) et quand la réponse est disponible, jQuery créait une fonction javascript tempraire (callback) qui sera exécutée en passant le json en paramètre.

Vous allez voir, c'est dans simplicité angélique :

1. La requête jQuery :

[sourcecode language='js']
jQuery(document).ready(function() {
// To manage ajax req and be able to abort one
var ajax_req = {} ;

// The refresh function
var refresh_div = function() {
if ( ajax_req.refresh_div ) ajax_req.refresh_div.abort() ;
ajax_req.refresh_div = jQuery.ajax({
type: 'GET',
url: '/url_to_the_page/',
cache: false,
async: true,
dataType: 'jsonp',
success: function(data) {
// Request is complete and returned a json result
console.log(data) ;
}
});
}

// The updater dameon every 10 seconds
if ( timer_d ) clearInterval(timer_d);
timer_d = setInterval(function() {
refresh_div() ;
}, 10000) ;
});
[/sourcecode]

2. La page en php qui va recevoir la requete ajax et produire le json

[sourcecode language='php']

[/sourcecode]

distributed raman amplifier3. A ce point, tout est fini ou presque et jQuery fera le reste en exécutant le callback 'success' de la requete ajax.

Voilou, j'espère avoir pu vous aider quelque peu.
Attention tout de même, il vous faut au minimum jquery 1.2.1 et comme je n'ai que des navigateurs à jour, je ne sais pas ce que ça donne sur des navigateurs comme IE6...

Chose promise chose dûe :)

Je vous avez dit que j'allais tester IUI incessament sous peu le projet IUI à des fins pros et en voici le résultat : http://www.lavf.com/iphone/

L'intégration est vraiment très simple et hormis 2-3 modifs maison pour le moteur de recherche et le footer, ce framework pour iPhone est excellent !

Gestion du JS et de l'Ajax efficace, j'ai également découverts les outils css "-webkit' qui sont vraiment très utiles. Une bonne petite expérience !

Merci Yoni pour m'avoir fait découvrir cette petite chose...

Maintenant, je vais m'attaquer à la version smartphone mais ça va être beaucoup plus basique... dommage...

En tout cas, les portes de l'Ajax mobile sont grand ouvertes maintenant pour les boursicoteurs !

FaceBook Autosuggest Like is a powerful jQuery plugin to transform an input field into a real time autocompletion search engine, designed like facebook one.

This plugin require jQuery libs and the autocompletion plugin 'Bsn Autosuggest".

On custom side, make an ajax request and build search plugins to categorize your results.

Features :
- Autocomplete and ajax support
- Database search
- Support search plugins
- Support cache
- Cross Browser support ( IE > 5.5, FireFox, Safari, Opera )

I let u see the demo...
Have Fun !

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://code.google.com/p/jquery-in-place-editor/

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

1/ Tout ce qui est éditable est entouré de :
[sourcecode]
echo "<span class='editInPlace_i18n' id='lang__$var'>$var</span>";
[/sourcecode]

2/ On applique le EditInPlace sur tous les éléments que l'on souhaite pouvoir éditer :
[sourcecode]
$(document).ready(function(){
$(".editInPlace_i18n").editInPlace({
url: "index.php?module=core_admin&amp;amp;action=update_i18n",
bg_over: "transparent",
value_required: true,
params: "ajax=yes"
});
});
[/sourcecode]

3/ Mon action update_i18n récupère les données en POST et fait un update en base :
[sourcecode]
#@ Update lang var in DB
// Default lang
$def_lang = 'fr' ;

// Get var to update
$var_update = str_replace('lang__', '', $_POST['element_id']) ;

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

4/ Pour éditer les liens tranquillement, il faut également 'unbinder' tous les liens ', pour ça, il suffit d'ajouter :
[sourcecode]
$("a").unbind().bind("click", function(e) { e.preventDefault();} ) ;
[/sourcecode]

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 !!

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" :

[sourcecode]
/*
* jquery.refreshDiv 1.0 - 2007-09-26
*
* 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);
[/sourcecode]

Et pour raffraichir un DIv :

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

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

Développeur de profession et avant tout accro aux nouvelles technologies du web, j'ai décidé d'ouvrir www.web2ajax.fr afin de vous faire partager mes lectures, trouvailles et expériences personnelles.

Parce qu'il serait prétentieux de vous dire que toute l'actualité du web2.0 passera par Web2Ajax.fr, je souhaite en tout cas faire en sorte que ce site devienne incontournable et une aide précieuse pour les développeurs. Alors à très bientôt et n'hésitez pas à repasser dans le coin et participer aux sujets.