Hi,

I've just received a very interesting mail from facebook developers blog since one hour explaining how to improve html5 performance in games (canvas+css3+javascript).

Main things to remember are :
- For desktop modern navigators ( Chrome 10/9, Firefox 4, IE9 =geeks&chuck norris at this time ) a canvas per object is better.
- But for now, this represents a little part of the mondial internet browsers park, so while waiting for a general up to date versions operation, user DIV tags with background images is better than canvas use.
- My personal tweak is to use the jquery-transform plugin, which has really results on oldIE for rotate and scales css3 replacement.
- Use webkit transitions for IOS games, javascript in desktop browsers to animate DOM ( absolute position )
- And finally for me, last advice was to use individuals sprites rather than one for all objects ( sprites images must be small to have better performances in cut )

So here now, the complete facebook blog post can be read here : http://developers.facebook.com/blog/post/460

Patator but what's this ? Patator is my first experience in social gaming made in HTML5 and to be more precise, in canvas and jQuery.
So I made for this the alpha version of a canvas gaming engine.

Sure this one has to grow, and gain in frame rate performance, but I think it's a good start to work on an open source HTML5 Gaming Framework.

For moment, Game is not avalaible on IE

Après le Grand Quizz du Sport, je viens de sortir sur le même principe, le Grand Quizz de la Bourse.
Donc n'hésitez pas à tester votre culture financière et si vous avez des questions sur les mécaniques ou l'implémentation de facebook au sein d'une application, contactez-moi ;)

10 questions, 15 secondes par question : soyez le plus rapide !

Jouez au Grand Quizz de la Bourse

J'ai été impressionné par le rendu des bannières générées par ce plugin jQuery : CustomAnimationBanner.
Dans les faits, ce plugin utilise les plugins Easing et 2D transforms pour animer des séquences.

On définit un timer, des étapes et les transitions à appliquer.

HTML :
[sourcecode]
























[/sourcecode]

STEPS CONFIG :
[sourcecode]$('#ca_banner1').banner({
steps : [
[
//1 step:
[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "1"}, {}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
],
[
//2 step:
[{"to" : "3"}, {"effect":"slideOutTop-slideInTop"}],
[{"to" : "1"}, {}],
[{"to" : "2"}, {}]
],
[
//3 step:
[{"to" : "4"}, {"effect": "zoomOut-zoomIn"}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}],
[{"to" : "2"}, {}]
],
[
//4 step
[{"to" : "5"}, {"effect": "slideOutBottom-slideInTop"}],
[{"to" : "2"}, {}],
[{"to" : "3"}, {"effect": "zoomOut-zoomIn"}]
],
[
//5 step
[{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
[{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],
[{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}]
]
],
total_steps : 5,
speed : 3000
});[/sourcecode]

EFFETS DISPONIBLES :
- zoomOut-zoomInRotated
- zoomOutRotated-zoomInRotated
- zoomOut-zoomIn
- slideOutRight-slideInRight
- slideOutLeft-slideInLeft
- slideOutTop-slideInTop
- slideOutBottom-slideInTop
- slideOutTop-slideInBottom
- fadeOut-fadeIn commented
- fadeOut-zoomIn commented
- zoomOut-fadeIn commented

Plus de détail sur l'installation et l'utilisation sur le blog de tympanus.

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 !

jQuery LazyLoad Ad plugin has been updated and version is now 1.4.
Improved on a lot of features, plugin is more strong and have now the capacity to chain script loading.

For this new version, I've build a mini site (jqueryad.web2ajax.fr) focused on this plugin. You'll find a presentation of the plugin, some demos, how to implement it in your own blog or website and download links.

Some people ask me a new feature that is Lazyload for images too. I hope it could be implemented in the next version 1.5 soon.

For moment, this plugin was successfully tested on adSense, OpenX tags, BlogBang and GoViral platforms.
Let me your feedbacks !

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.

Je voulais vous présenter un concept de MrBoo qui a littéralement boosté ma visibilité dans ma recherche d'emploi aujourd'hui.

Le concept s'appelle cvdujour et l'idée est très simple : tous les jours, 1 CV publié.

Pour le moment consultable sur Twitter à l'adresse : @cvdujour, ce flux est suivi par des entrepreneurs et recruteurs forcément au fait de l'actualité web, donc c'est que du bonheur !
Et qu'est-ce que ça va être quand le site web sera en ligne : http://www.cvdujour.com/ :)

Pour que MrBoo diffuse votre CV, rien de plus simple : envoyer un tweet à @cvdujour, en stipulant le poste que vous recherchez et l'adresse web de votre CV en ligne.

Pour moi, ça s'est traduit par 2 contacts concrets et une forte progression de la fréquentation sur web2ajax.fr et un pic de malade sur delarueguillaume.com, l'adresse de mon cv fournie dans le message de twitter.

Je ne peux donc que vous recommander cette option de recherche d'emploi :)

Encore un grand merci à MrBoo !

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

Suite à l'article de Korben : GTmetrix vous aide à optimiser le temps de chargement de vos pages, je me suis dit que je pouvais améliorer significativement les temps de chargement de mes sites en améliorant les dates d'expiration des fichiers statiques (images, css et js), en retirant les ETags et en hébergeant les images sur Amazon S3.

On pourrait se dire que la première étape est inutile puisque les fichiers concernés devraient être sur Amazon, mais dans la pratique, on a toujours 2-3 images, issues d'un plugin wordpress par exemple, qui seront toujours appelées de votre serveur.


Expires : configuration de .htaccess + apache2
Il faut tout d'abord activer les extensions 'expires.load' et 'headers.load' ci ce n'est pas déjà fait.
Pour ce faire, on vérifie que l'action n'est pas activée :

ls /etc/apache2/mods-enabled/expires.load
ls /etc/apache2/mods-enabled/headers.load

Si vous avez : "ls: ne peut accèder /etc/apache2/mods-enabled/expires.load: Aucun fichier ou répertoire de ce type", c'est que l'extension n'est pas activée.

Pour l'activer :
ln -s /etc/apache2/mods-available/expires.load /etc/apache2/mods-enabled/expires.load
ln -s /etc/apache2/mods-available/headers.load /etc/apache2/mods-enabled/headers.load

Ensuite, on vérifie la config d'apache et on reload :
apache2ctl configtest
=> Syntax OK
/etc/init.d/apache2 reload
=> Reloading web server config: apache2.

Dans votre fichier .htaccess, il faut ajouter les lignes suivantes :
# BEGIN Expires + ETag remove

Header unset ETag
FileETag None

ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

# END Expires + ETag remove

La date d'expiration par défaut est donc à 0s et pour les gif, jpeg, css, js... on passe la date à 30j ( 2 592 000 secondes).

Pour en savoir plus sur le pourquoi du comment il faut retirer les ETag, je vous invite à lire cet article : Best Practices for Speeding Up Your Web Site

Amazon Single Storage Service
Maintenant, on va mettre les fichiers statiques (images, css et js) sur Amazon S3.

Il vous faut tout d'abord vous rendre sur http://aws.amazon.com/s3/, créer un compte développeur si vous n'en avez pas, liez votre CB à ce compte et suivre les étapes pour activer votre compte.

Ensuite, il vous faut un client pour créer et mettre à jour vos instances, nommées buckets, une pour chaque site. Différents outils en ligne de commande ou libs sont également dispos pour scripter tout ça.
Personnellement, j'utilise cyberduck pour mac et voici la config :


Server : s3.amazonaws.com
Port : 443
Username : Access Key ID ( http://aws-portal.amazon.com/gp/aws/developer/account/index.html?action=access-key)
Password : The secret Access key

Maintenant, les répertoires à la racine sont les 'buckets', on va donc en créer un pour chaque site et ensuite, tout se comporte comme un FTP standard.

Intégration des fichiers statiques
Une fois tous vos fichiers copiés sur S3, il ne vous reste plus qu'à modifier les chemins des fichiers statiques dans vos templates.
L'url de base utilisée sera :
http://the_bucket_name.s3.amazon.com/repertoire/fichier.extension

Coût de l'opération
J'ai en fait trouvé les tarifs très cheap car on est à 0.15$ du Giga uploadé. Ca me convient, maintenant faut voir si ça contient à tout le monde ^^.
Ca me permet en tout cas, avec un pti serveur comme un kimsufi, d'héberger plusieurs sites et donc finalement de réduire les coûts, étant donné que je réduis significativement la charge du serveur.

Conclusion
Après ces ajustements effectués et d'après GTmetrix, je suis passé d'un score de 67% à 75% sous YSlow et de 72 à 86% pour Google Page Speed !
Yeah !

Si vous avez des questions, je suis là ^

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

@+

Since last Facebook Event, the F8, it becomes very easy to add the 'Like' button under any post on your blog or website.

Let's see how to do that in a few words and less than 5 minutes.


In facts, go to http://developers.facebook.com/docs/reference/plugins/like and generate the code, regarding layout, colors...

Now, copy the code and simply paste it where you want to insert this feature on your page.

And that's all !!
Impressive no ? Let see example just under this post ^^

Below, you can find the code to add in your wordpress blog.
And in a more general case, replace get_permalink() by your dynamic url.

[sourcecode]

[/sourcecode]

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 !

Voilà un effet typographique plus qu'impressionnant !

En effet The Man From Hollywood créé par Tyler Gaw reprend les dialogues de Pulp Fiction pour les animer en un clip kinétique de toute splendeur.

Il utilise pour ça les propriétés css3 spécifiques pour le moment à Safari et Chrome (webkit) : gradients, transforms, transition.

Un petit peu de jQuery pour animer tout ça et jouer la bande audio, pour obtenir un résultat de toute beauté.

Il utilise une fonction que j'aime bien :

[sourcecode]
// Add or remove class names to advance the scene at the specified time
//
direct: function (actor, direction, delay)
{
var a = $(actor);
setTimeout(function ()
{
if (a.hasClass(direction))
{
a.removeClass(direction);
}
else
{
a.addClass(direction);
HOLLYWOOD.helpers.logDirection(direction);
}

}, delay);
},
[/sourcecode]

Ensuite, pour animer, il a juste définit des classes comme 'spotlight', 'actions', 'end', un timeout bien réglé et le tour est joué.

Bon, Tyler à dû se prendre la tête comme il faut pour câler les images, le son etc... Mais quand on voit le résultat... Bravo !

Vu sur ajaxian.

Ping.fm est un service qui permet, à partir d'une seule et unique interface, de publier automatiquement un nouveau billet sur une multitude de services de micro-blogging.

On peut ainsi nommer : Twitter, Facebook ou encore Delicous dans les service supportés.

C'était déjà bien sympathique bien sur, mais ils ont encore fait plus fort ! Maintenant, on associe un Flux RSS à notre compte Ping.fm et dès que l'on publie un billet, il se retrouve dans le flux RSS et pouf : également sur Twitter, facebook et compagnie.



Je vais justement tester cette fonctionnalité avec ce nouveau post.
Et pour rappel, si vous voulez suivre les news de Web2ajax sur twitter, c'est par ici : http://twitter.com/Web2ajaX

Je vous laisse essayer tout ça :)

Perhaps you already know smushit, the Yahoo! service that compress your png files without alterate them.

First in the domain, the service has some inconvenients as multiple images upload.

With PunyPNG, no problem : you can upload up to 50 files and download a zip archive containing all optimized images.

And it's not all : fully supports for PNG, .GIF, .JPG, no problem of transparency.

The icing on the cake : once registered, you can use punyPNG's API.
For example, if you want to optimize a single image (in a batch for example), simply call :
[sourcecode]
http://www.gracepointafterfive.com/punypng/api/optimize?img=http://www.conradchu.com/images/portfolio/targets.gif&key=fe79db612343cbc781d4faddd22990d282e24e75c
[/sourcecode]

Will return in JSON :
[sourcecode]
{"savings_bytes": 7149, "original_url": "http://www.conradchu.com/images/portfolio/targets.gif", "original_size": 35071, "optimized_url": "http://www.gracepointafterfive.com/punypng/attachments/eb1955a35625ea97e107132cbd49b65840d35532/targets.gif.png", "group_id": "", "savings_percent": 21, "optimized_size": 27922}
[/sourcecode]

Web2ajaX images are optimized with PunyPNG, and I find no degradation, adopted ?

Click on 'Visit Link' to have more infos.

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