jDigiClock is a beautiful jQuery inspired by the HTC Hero Widget.
It displays local time and weather.

Simple to integrate, I’ll include it in the new theme of web2ajax

Article : http://www.radoslavdimov.com/2010/03/08/jdigiclock%E2%80%93ver-2-1/#content
Demo : http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/#Examples

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

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

DEMO : click here to view a demo and how to use the plugin

1/ HTML : juste définir un div qui va contenir l’iframe

<div id="ad_slot"></div>

2/ jQuery : la fonction qui va créer l’iframe et y insérer le code google adsense

	function refreshAd(el, width, height) {
    	var currentTime = new Date();
    	if ( timer_refreshAd ) clearTimeout(timer_refreshAd) ;
    	timer_refreshAd = setTimeout(function() {
	    	keywords = escape($("meta[name='keywords']").attr('content'));
                file_get_ad = "/path/get_ad.php" ;
	    	$(el).html('<iframe id="googlead" class="googlead" name="googlead" href="" src="/'+ file_get_ad  +'/?s=' + currentTime.getTime() + '&amp;amp;keywords=' + keywords + '&amp;amp;w='+width+'&amp;amp;h='+height+'" width="'+width+'" height="'+height+'" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe>' ) ;
    	}, 10) ;
	}

3/ Php : la page qui va servir de source à l’iframe généré

<script type="text/javascript">
google_ad_client = "YOUR_AD_ID";
google_ad_slot = "THE AD SLOT";
google_ad_width = <?php echo $_GET['w']; ?> ;
google_ad_height = <?php echo $_GET['h']; ?>
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> 

<div class="content">
<?php
echo urldecode($_GET['keywords']) ;
?>
</div>

4/ On appelle maintenant le refreshAd par jquery

	refreshAd($('#ad_slot'), 300, 250) ;

Et la pub s’affiche

Bye.

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 :

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

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

<?php
// ... Build the json response as you know to do ...
$json_response = {0:{name:'Test', sex:'male'}, 1:{name:'miss', sex:'female'}} ;

// jQuery send $_GET['callback'],
// the callback wich will be executed after request completed
// When returns the data response is parsed by a javascript 'eval()'
// So we produce exactly what jQuery want to execute
die($_GET['callback'].'('.$json_response.')') ;
?>

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…

Bonjour tout le monde,

Vous allez vous dire : "il écrit pas beaucoup de billets en ce moment et il recherche des beta testeurs gratos !!"

Et bah oui, et pour une raison qui explique largement la première  

Mon projet secret du moment ne l’ai plus trop puisqu’il va sortir incessement sous peu et donc nous aimerions avoir vos avis sur le look&feel et les informations qui y sont présentées.

Le site s’appelle donc boursereflex.com, un site boursier et financier dont la baseline est "L’argent, vu autrement".

Je serais vraiment trés interessé d’avoir une vingtaine de retours sur ce qui est fait actuellement, donc si ça vous interesse postez un petit commentaire à ce billet, j’aurais ainsi vos emails et je vous contacterais lundi soir pour vous donner les accès.

D’avance merci pour votre aide les bloggeurs fous !!

Il n’y a pas de solutions miracle bien sur, et c’est aussi ce qui fait la beauté de ce métier, mais quelques bonnes adresses peuvent vous permettre de sortir de quelques impasses de type inspirationnelles

Pour ce qui est des moteur de recherche d’icones, j’en ai sélectionné trois qui à mes yeux sont les plus riches en icones dispos, qualité et originalité.

1. Iconlook.com

The Reference !

Sans doute l’un des meilleurs dépot d’icones libres de droit et vraiment originaux.
 

2. IconFinder.net

The Reference 2 !

Bah il est pas mal non plus celui-là : "sans doute l’un des meilleurs… " Je l’ai déjà dit je crois

3. Iconlet.com

A mon avis le moins original de tous. On y retrouve tous les icones les plus standards, mais ça peut dépanner (C’est le but de cet article )

Si vous avez d’autres liens, n’hésitez pas à me les filer, je les publierai dans cet article.

Voici, voilà, je vous ai préparé une courte liste de références trouvées sur la toile. Des coups de coeur et des bonnes idées qui méritent d’être connues.
Au programme : un site clair et léger, un bon exemple de page d’inscription, un catalogue de produit efficace, des couleurs trippantes

Sans plus tarder, allez visiter les sites ci-dessous :

Home Page

Aviary.com

Ergonomie excellente. tous les éléments sont bien mis en valeur, les pages sont belles, le header est maginfique ! (http://a.viary.com/)

Formulaire d’inscription et de login

Emob

Bravo à eMob, déjà pour le contenu (je suis un fervent lecteur du RSS ), et également pour l’ergonomie de leur site !
Entre autre : un processus d’inscription vraiment bien fait ! (http://www.formationvideo.fr/inscription.php)

Gallerie de produits

AppleStore

Le site d’apple est une référence graphique incontestable. Et une nouveauté toute particulière a attiré mon attention sur le apple store. Cliquez sur une des images en bas à droite du produit…. Pas mal hein ?

Palettes de couleur

I’m Blogging That !

J’ai bien aimé la palette de couleurs en haut du menu. Des couleurs flashy, dont on peut s’inspirer pour créer des logos… (http://www.imbloggingthat.com/)

Andrew Berg’s : Flash photo browser

D’une part un diaporama très sympa, et en plus j’aime ces mélanges de vert pétant et blanc/gris. C’est accrocheur et pur. (http://www.andrewberg.com/photobrowser/afpb_flash.html)

компютри 

Celui-ci détecte automatiquement le user agent et si vous surfez avec un iPhone, vous verrez le site en version optimisée pour l’iPhone.
Je l’ai installé en moins de 2 minutes

Et si jamais vous souhaitez tout de même voir le site en version nomale : il y’a un lien en bas de page.

Y’a pas plus simple !!

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 !

Aujourd’hui je vous présente le site qu’un ami à réaliser dans l’espoir de financer ses études.
Un petit blog où il nous raconte son périple à la recherche des 9000E necessaires pour le paiement de son école de design automobile. Personne ne veut l’aider à financer ses études.

Amis bloggeurs, développeurs Ajax, mobilisons nous !

Il s’agit en fait d’un js qui, utilisé sans aucune dépendance, permet d’insérer des indicateurs de chargemenr n’importe où et n’importe quand dans votre site !

Jettez un oeil à la démo et voyez par vous même en changeant les paramètres, c’est vraiment génial !!

Vous pouvez l’associer à jQuery par exemple en utilisant ce code :

1. var ctrl = getBusyOverlay($(‘#box’));

2. setTimeout(
       function() {
           ctrl.remove();
       }, 2000);

Pour télécharger la librairie et peut-être en faire un plugin jQuery , cliquez-ici : busy.js

Et oui, voici un outil qui devrait en surprendre plus d’un, permettant de dessiner de beaux graphiques en flash ou direct en gif avec une particularité tout de même : ils ont de la gueule !

Pour la démo, c’est ici : http://piwik.org/demo/

Starbox, basé sur la librairie javascript Prototype, (et utilisant en Scriptaculous pour créer de jolis effets fantômes…)

Va vous permettre de laissez à vos visiteurs le loisirs de noter articles, photos et autres contenus,

L’enregistrement des votes devant se faire en Ajax, c’est à dire sans avoir à recharger toute la page( pour faire simple)

L’outils est facile à paramétrer et à utiliser:

• couleurs des étoiles par css
• nombre d’étoiles, de cran
• bloquer les votes
• affichages d’informations sur le nombre de votants, la note moyenne
• remplacer les étoiles par le lettres ABCDEF
• renverser le sens des étoiles
• …

L’utilisation est simple :

On charge les fichiers

<script type=’text/javascript’ src=’js/prototype.js’></script>

<script type=’text/javascript’ src=’js/scriptaculous.js?load=effects’></script>

<script type=’text/javascript’ src=’js/starbox.js’></script>

<link rel="stylesheet" type="text/css" href="css/starbox.css" />

On crée le div dans lequel s’affichera la grille d’étoile

<div id="maNOte"></div>

Enfin pour afficher les étoiles

new Starbox(element, average);

Voilà pour aujourd'hui ! DEMO ET DOWNLOAD

american application card credit expressbill card consolidation credit debt life partner,credit card bill consolidationcash back business credit cardbank one credit card offercard christian consolidation credit debthsbc rs credit card,card credit hsbc,hsbc credit card malaysiacard credit debt reduction strategythe best credit card,best card credit rate transfer,best credit card debt helpcard credit debt help onlineapplication card credit depot home,home depot credit card applicationprepaid credit card,international prepaid credit card,prepaid visa credit cardwireless credit card terminalinternet credit card processing services,internet credit card processingapplication card credit unsecureddiscover credit card offer,card credit discover offerlegally terminate credit card debt0 apr intro credit card,0 apr credit card,0 apr card credit studentcredit card debt consolidation oregonbest business credit card offer,business credit card offercard credit loan ukbest reward credit cardcapital one credit card applicationcard consolidation counseling credit debtcompare credit card ukcard consolidation credit debt reductionconsolidate credit card debt,card consolidate credit debt it? ?,consolidate credit card debt without morbad card credit debt ukbalance card consolidat credit transferapplication bad card creditsetup online credit card processingcredit card merchant servicescard credit discover number phonevisa credit card offer,card credit offer visabank card credit securedonline credit card services,card credit online prepaid services,card chase credit online serviceswal mart credit card applicationcard citibank credit,citibank credit card malaysia,citibank malaysia credit card onlineinstant decision credit cardcard credit ukhow to reduce credit card bad debt,bad debt credit card,credit card bad debt statisticscard credit debt guide reduce,reduce credit card debt quickly,reduce credit card debtcredit card bad debt ukamerica bank card credit visacard credit debt elimination programinstant online credit card applicationcircuit city credit card applicationbusiness credit card online applicationbest cash back credit cardapplied bank card card creditbad card credit credit secured,bad card credit credit people secured

Ce script php permet :

• Un resize de qualité
• Prise en charge de tous les formats d’image reconnus par GD
• Mise en cache des images générées
• L’image n’est pas resizée si plus petite que les dimensions fixées
• Une manière sûre de ne pas dépasser une dimension fixée

Voici comment utiliser le script :

<img src="thumb.php?i=chemin_image&w=150&h=150">

i  => Chemin de l’image sur le serveur

w => Largeur maximale

h => Hauteur maximale

Pour éviter de déformer l’image, je vous conseille d’utiliser dans tous les cas une hauteur égale à la largeur.

Le script :

<?php
#@
#@ Load a picture and take few parameters
#@ Build cache file for thumbnail view
#@
#@ Created by Guillaume DE LA RUE <http://web2ajax.fr/>
#@

#@
#@ Local Function to get extension
#@ ————————————————————
function _getExtension($file_name) {
    $file_infos = pathinfo($file_name);
    return ‘.’.$file_infos['extension'] ;
}   
   

#@
#@ Config
#@ ————————————————————
$cache_dir = ‘common_files/cache/’ ;

#@
#@ Get url params
#@ ————————————————————
$width             = $_GET['w'] ;
$height            = $_GET['h'] ;
$image_file        = $_GET['i'] ;
$cache_force    = $_GET['nocache'] ;

#@
#@ Set vars
#@ ————————————————————
$image_file_extension = _getExtension($image_file, true) ;
$image_file_basename = @basename($image_file, $image_file_extension) ;    // Filename without extension ‘.jpg’
$thumb_file        = $image_file."_".$width."_".$height ;

#@
#@ Infos in image_file
#@ ————————————————————
## Get md5 of files location
//$image_file_md5 = md5($image_file) ;
$thumb_file_md5 = @md5($thumb_file) ;

#@
#@ If thumbnail doesn’t exists create it !
#@ ————————————————————
if ( ! @file_exists($cache_dir.$thumb_file_md5.$image_file_extension) || $cache_force == "true") {
    ## Get infos on file with exif
    $image_infos     = @getimagesize($image_file) ;
    $width_original = $image_infos[0] ;
    $height_original = $image_infos[1] ;

    ## Detect Portait( => 0) / paysage ( => 1)
    if ( $width_original <= $height_original ) {
        $image_type = 0 ;
    } else {
        $image_type = 1 ;
    }

    ## Define best size to thumb depending params
    if ( $image_type == 0 ) {
        $best_height     = $height ;
        $best_width     = (int) ( $width_original * ($height / $height_original ) ) ;
    } else {
        $best_width     = $width ;
        $best_height     = (int) ( $height_original * ( $width / $width_original ) ) ;       
    }

    ## If picture is little than wanted => don’t stretch it, juste create a standard thumbnail
    if ( $width_original < $width && $height_original < $height ) {
        $best_width = $width_original ;
        $best_height = $height_original ;       
    }
   
   

   VS    ?

    Habitué à utiliser Really easy field Validation (REFV pour nous ) avec prototype et scriptaculous, je m’attachai à ce plugin pour rester sur scriptaculous.

En effet, il est très simple à utiliser et facilement adaptable, paramétrable, couplé avec juste Prototype et Effects.js de Scriptaculous pour les tests et les effets d’apparition des messages d’erreur.

Facilement adaptable, vous pouvez consulté un exemple ici en anglais sur la demo de l’auteur  (telechargement)

ou  en francais sur un site client récent (pas de spam s’il vous plait)

Ses Avantages…

• Des effets d’affichage des erreurs superbes, sobre mais efficaces.
• facilité d’adaptation (ajout de types de test temporaires intégrable facilement dans la page ou généraux dans le fichier source)
• permet la validation javascript des champs lorsque le champs perd le focus ou au submit du formulaire
• une source legere

Mais alors allez vous me dire, comment ca marche ?

C’est simple, tout d’abord pour chacun de vos champs vous fixez une class css correspondante au type de test requis.

<input type="text" name="fax" class="none validate-telephone"/>

Ensuite vous donnez un identifiant au formulaire ( par expérience toujours le faire dans tous les cas !)

et enfin, à la suite du formulaire

<script type="text/javascript">

	function formCallback(result, form) {

	}

	var valid = new Validation('id_form', {immediate : true, onFormValidate : formCallback});

</script>

    Qu’est ce que je découvre aujourd’hui ? un plugin similaire (néanmoins plus puissant) existe aussi avec Jquery Jquery Validation Plugin !

Brièvement ? Ben c’est pratiquement le même principe, les mêmes options de bases,  + ?

Eh bien ses avantages :

• Reprend les mêmes options que celui utilisant Prototype
• Ajoute la validation sur l’évenement ‘onchange’ (peut être pratique, croyez moi)
• Ajoute la possibilité de mettre un Capcha
• Ajoute la possibilité de valider un champs en ajax par la balise remote ( par exemple vérifier que ce mail n’est pas pris !)
• Et cela me libère de scriptaculous je vais enfin pouvoir tester JQuery, sachant que la communauté est  beaucoup plus dynamique et que le nombre de plugins disponibles est… faramineux !

La démo et téléchargement sur le site de l’auteur

  Projet IUI

Ce SDK simule à merveille l’environnement javascript et d’interface du petit bijoux d’apple.

C’est un projet open source bien sûr ..

Download It !

Vous pourrez alors réaliser très facilement des interfaces de ce type :

Et bien, j’ai une solution solide pour réduire par 2 ou 3 le temps de chargement des pages : Lighttp (prononcez "Lighty)

Sur notre site web www.lavf.com, et après bien des optimisations, les temps de chargement étaient de l’ordre de 6 secondes : inacceptable pour un site à forte audience !

Nous avons donc testé lighty et le résultat est vraiment hallucinant, le temps de chargement est passé de 6 secondes à 2 ou 3 secondes pour la homepage !

Alors, vous allez me dire, oui mais je fais du rewriting avec apache, j’ai des alias, des virtual hosts,.. Et bien nous aussi et ça marche du feu de dieu !

Nous avons pu mettre en place très aisément un load balancing qui se révèle extremement efficace lors de pics d’audience, c’est redoutable

Je vous invite donc à vous rendre sur http://www.lighttpd.net/ pour télécharger ce serveur web et attardez-vous sur les références qui ont déjà opté pour  lighty : youtube, wikipedia… C’est pas anodin quand même !

Si vous souhaitez plus d’éléments techniques sur la config, faites moi en part dans les commentaires et je prendrai le temps de vous expliquer les différents paramètres pour mettre en place telle ou telle fonctionnalité.

Bon lighty à vous !

Download It !

Je vous présente ici module permettant de mettre en place un moteur de recherche style "FaceBook" avec autocomplétion.

Ce module s’appuie sur les librairies de jQuery, ainsi que sur le module d’autocomplétion ‘Bsn Autosuggest".

Côté customisation, on peut s’appuyer sur des plugins de recherche qui permettent de catégoriser les résultats de recherche.

=> Exemple : http://web2ajax.fr/examples/facebook_searchengine/

Have Fun !

Mais j’ai une bonne excuse : www.lavf.com. On a fait ça à 3,5 pendant 6 semaines et c’était un très bon challenge qui me semble en tout cas très réussit.

Et vous savez quoi ? J’ai beaucoup appris depuis et plus particuliérement sur l’optimisation des différents plugins utilisables avec jQuery. C’est pour ça : je vais pouvoir vous donner plein de bons pti conseils sur l’utilisation

Donc le premier GROS conseil du jour pour optimiser l’utilisation de jQuery, et bien je l’ai découvert aujourd’hui. Notre HomePage bloqué pendant 3-4 secondes sous IE6, c’est embêtant quand que c’est encore 33% des navigateurs (sur lavf.com en tout cas)…

Alors on s’est pris la tête toute l’après-midi, parce que c’est quand même rédibitoire ce genre "d’accueil" pour un nouvel utilisateur !! Et en fait on a découvert qu’en faisant toutes nos déclarations js avec des $(document).ready(…) et bien on bloquait le navigateur car tout se faisait en même temps (la CPU grimpe comme il faut).

SOLUTION : lisser le chargement des modules sur tout le chargement de page, et c’est possible de la manière suivante :$(‘#div_id’).ready(…)

De cette manière, dès que le div est présent et "construit" dans les éléments DOM, on applique les différents js dessus. De cette manière, le gros temps de blocage que l’on avait au début s’est trouvé "gommé" et quasi invisible lors du chargement de la page.

Dans les jours à venir, je vous mets le code pour le module de graph en haut à droite, que j’ai également optimisé à son maximum.

Ciao.

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