Développement Article

Jquery, soyez prêt

15 Mar , 2012 Aucun commentaire

L’article de ce jour sera une explication rapide d’une petite subtilité que le fameux framework Javascript Jquery propose pour charger des scripts. En effet Jquery propose 2 façons pour exécuter des instructions au loading de la page, le « document ready » et le « window load ».

Le « document ready » dans Jquery

C’est la fonction la plus connue et la plus utilisé des 2 fonctions que nous allons voir.

La fonction « document ready » dans Jquery permet de lancer des instructions lorsque le DOM (Document Object Model) à fini de se charger. Concrètement qu’est ce que ça veut dire ? Cela signifie que Jquery va attendre que toutes les balises HTML aient été chargées dans le document (la page web) pour exécuter les instructions à l’intérieur de cette fonction (attacher des évènements, lancer des actions qui ont besoins que ces balises soient présentes).

$(document).ready(function() {
// les instructions à executer quant le DOM est prêt.
alert("document is ready");
});

Le « window load » de Jquery

Cette fonction moins utilisé et moins connu sert à éxécuter des instructions lorsque tous les objets de la page ont fini de charger. Concrètement qu’est ce ça veut dire ? Jquery va attendre que tous les scripts / images / objets flash / Video … soit charger dans la page pour exécuter les instructions présentes dans cette fonction.

Utiliser cette fonction peut-être interessant dans certains cas précis. Je vais donner un exemple sur lequel j’ai travaillé et qui m’a d’ailleurs permis de connaître l’existence de cette fonction « window load ».

L’exemple avec window load

J’ai eu à faire un système d’aide pour une application que je développe à ma job. Ce système d’aide est composé de vignette qui présente chaque fonctionnalité du dashboard. Pour afficher la première vignette, il me fallait attendre que tous les éléments soient chargés. Cette fonction à donc fait le travail à merveille.

$(window).load(function() {
// les instructions à executer quand les frames, objects and images ... sont chargés.
alert("window is loaded");
});

Conclusion

La différence entre ces 2 fonctions est donc une question de timing mais la finalité est la même : charger les instructions à éxécuter au chargement de la page. Je connais depuis peu window load et je dois dire qu’elle m,a été utile uniquement pour un projet et que je dirais qu’elle est à utiliser avec prudence.

Aller sur la page de l'article

Afficher plusieurs images pour un produit avec wp-ecommerce

09 Mar , 2012 5 commentaires

WP-Ecommerce est un plugin de E-commerce pour WordPress. Il est vraiment idéale sur le papier puisqu’il permet de construire un système de E-commerce (backend et frontend) sans rien coder. Dans la pratique le plugin se révèle un peu moins idyllique, je pense que tous ceux qui ont essayé une fois dans leur vie de personnaliser un thème WP-Ecommerce comprendrons de quoi je parle.

Aujourd’hui je vais vous exposer un problème auquel j’ai été confronté, qui paraît très bête mais qui fût assez chronophage pour moi.

Le problème dans WP-Ecommerce

Le backend du plugin permet d’uploader plusieurs photo pour un produit mais le front-end ne propose aucune methode pour aller les chercher et les afficher. En fait, WP-Ecommerce propose un add-on payant « Gold Cart » pour cela mais on s’entend que ce n’est pas une solution.

La solution pour afficher plusieurs images

Voici la marche à suivre, il vous faudra tout d’abord repérer le code suivant dans le fichier « wpsc-single_product.php ».

< ?php if ( wpsc_the_product_thumbnail() ) : ?>
        
      < ?php if ( function_exists( 'gold_shpcrt_display_gallery' ) )
         echo gold_shpcrt_display_gallery( wpsc_the_product_id() );
      ?>
   < ?php else: ?>

Ensuite vous pourrez remplacer le code ci-dessus par :

< ?php if ( wpsc_the_product_thumbnail()) ://if the product has any images...
      if (has_post_thumbnail()):?>//...display the thumbnail if there is one...
          < ?php echo get_the_post_thumbnail(wpsc_the_product_id(),'thumbnail',array('alt' => wpsc_the_product_title(),'title' => wpsc_the_product_title() ));?> 
      < ?php endif;
      sb_get_images_for_product(wpsc_the_product_id());//...and then display all the rest of the images
else: ?>

Puis ajouter dans le fichier « function.php » de votre thème la fonction suivante :

function sb_get_images_for_product($id){
   global $wpdb;
   $post_thumbnail = get_post_thumbnail_id();//read the thumbnail id
   $attachments = $wpdb->get_results($wpdb->prepare("SELECT * FROM $wpdb->posts WHERE post_parent = $id AND post_type = 'attachment' ORDER BY menu_order ASC"));
   foreach ($attachments as $attachment){
      if ($attachment->ID <> $post_thumbnail){//if we haven't already got the attachment as the post thumbnail
         $image_attributes = wp_get_attachment_image_src($attachment->ID,'thumbnail');?>
	  
   < ?php }
   }
}

Conclusion

En conclusion, j’adore WP-Ecommerce pour plein de choses, ce plugin est vraiment cool tant qu’on a pas à rentrer dans le code. Une fois les mains dans le cambouis, on peut vite perdre patience. En plus de ça la doc n’est pas toujours très claire. Cependant grâce à une communauté plutôt importante, on trouve souvent des solutions à nos problèmes. Donc voici ma participation en français 😉

 

Ressources

Aller sur la page de l'article

4 milliards de video par jour sur Youtube

21 Fév , 2012 Aucun commentaire

Youtube vient d’atteindre le stade record de 4 milliards de vidéos consultées par jour. Ce chiffre est assez monstrueux quand on y pense, on va bientôt arriver à 1 humain consulte 1 vidéo par jour.

Youtube nous fait part pour l’occasion d’une animation assez fun et vraiment bien réalisée, le tout est en HTML5 et javascript. Je vous laisse juger de l’oeuvre par vous même en allant sur le site : onehourpersecond.com.

Ressources :

Aller sur la page de l'article
Highcharts une librairie javascript pour les graphs – 2/3 – Tutoriel

Highcharts une librairie javascript pour les graphs – 2/3 – Tutoriel

20 Fév , 2012 47 commentaires

Voici comme promis avec un peu de retard la suite du post sur Highchart la fameuse librarie javascript pour faire des graphiques. La partie 2 sur 3 sera donc consacré à un tutoriel pour démarrer avec la librarie.

Comme je viens de découvrir un site qui va bien m’amuser (j’ai nommé data.gouv.fr), je vais utiliser un des datasets proposés par ce site. J’ai décidé d’illustrer donc notre premier exemple de cette librarie Highcharts avec les données des dépenses de la sécurité sociale en France continentale par Région pour le mois de Janvier. (voici le dataset que je vous donne en json). Attention les chiffres sont impressionnants.

Préparation

Pour commencer allez sur le site de Highcharts et téléchargez la librairie. Créez un fichier index.html comme ceci :

Le fichier index.html

<!DOCTYPE HTML>
<html>
<head>
<title>Undisconnected - Exemples librairie js Highcharts</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Libs -->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.2/highcharts.js'></script>
<script type='text/javascript' src='../js/utils.js'></script>
<script type='text/javascript' src='data.js'></script>
<script type='text/javascript' src='main.js'></script>

</head>
<body style='margin:0px;'>
<div class='wrapper'>

<div id='pieChart'></div>
  
  
</div>
</body>
</html>

On charge les fichiers suivants :

  • Jquery (via google api)
  • Highchart (mettre le bon chemin vers highcharts que vous avez télécharger)
  • Fichier utils.js (expliqué en dessous)
  • Fichier data.js (Le fichier data de l’exemple)
  • Main.js (le fichier qui va contenir notre code javascript pour lancer highcharts)
Le fichier utils.js est un fichier qui comprends des fonctions javascript que j’utilise souvent. La plupart de ces fonctions proviennent de php.js (voir mon post à propos de php.js). – Télécharger le fichier utils.js

Le fichier main.js

$(document).ready(function() {

  $.displayPieChart(colors, data);

});

var colors = ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"];

$.displayPieChart = function(colors, data) {

		var chart;

		var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'pieChart',
         width: 598,
         height: 450,
         marginLeft: 25,
         marginRight: 25,
      },
      colors: colors,
      title: {
         text: "Dépenses SECU janvier par région",
         margin: 10
      },
      tooltip: {
         formatter: function() {
            return "Dépense : " + number_format(this.y,0,',',' ') + "€" ;
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
               enabled: true,
               formatter: function() {
                  return "" + this.point.name.toLowerCase() + "";
               }
            }
         },
         series: {
            dataLabels: {
                enabled: true,
                color: 'black',
                fontSize: 3
            }
        }
      },
       series: [{
         type: 'pie',
         data: data
      }]
   });

	}

Dans ce fichier on crée une fonction $.displayPieChart qui paramètre notre graphique.

Le array color représente les couleurs que l’on va utiliser pour notre graphique (je les change car j’aime mieux ce set de couleur que celui par défaut).

On appelle ensuite la fonction $.displayPieChart au document ready en passant 2 paramètres, la variable data (représente le dataset contenu dans data.js) et le array color.

Le résultat


Voici un beau camembert présentant les dépenses de la sécu au mois de janvier réparties par régions.

Conclusion

Comme vous pouvez le voir, un diagramme circulaire (camembert) est assez facile à mettre en place avec Highcharts. Aussi comme c’est mon premier tutoriel (d’une grande lignée j’espère) j’attend vos commentaires avec impatience pour améliorer ce post et les tutoriaux suivants.

Bientôt d’autres exemples avec Highcharts qui seront un peu plus avancés.

Aller sur la page de l'article
La fonction partage d’écran de skype

La fonction partage d’écran de skype

17 Fév , 2012 Aucun commentaire

Je viens juste de découvrir un outil formidable dans skype alors je vous en fait profiter. Peut-être que nombre d’entre vous le savent déjà mais il est possible de partager son écran via skype.

Pourquoi est-ce interessant ?

Parce que dans skype vous avez vos contacts familiaux, amicaux et professionnels. Vous allez donc pouvoir parler avec ces gens en ayant la possibilité de leur partager la vue de votre écran pour leur expliquer quelque chose ou leur demander de partager leur écran pour comprendre un problème. La beauté d’avoir cela dans skype est que ça reste ultra simple.

La famille et les amis

Je ne sais pas vous mais, personnellement ça arrive assez fréquement qu’on me pose une question informatique du genre  :

Je comprend pas, j’ai installé Word mais je peux pas lire les DIVX. Est-ce que tu pourrais m’aider ?

Je sais, des fois on a des questions bizarres 😉 … Eh bien avec cette merveilleuse fonctionnalité de skype, vous allez pouvoir dire ok buddy, partage moi ton écran avec skype, je vais regarder ce qui peut se passer et essayer de te guider pour trouver une solution à ce problème. Vous pourrez aussi aider votre maman qui n’arrive pas à écouter sa musique sur son ordinateur ou résoudre multes autres situations.

Pour les contacts professionnels

Encore là pour un contact pro, l’outil est génial ! Il va permettre de faire une courte présentation du dernier back-end que vous avez programmé. En effet, vous allez partager votre écran et « Oh Magie » votre client va pouvoir suivre le visuel de votre présentation tout en écoutant vos explications. Pour l’avoir testé juste hier, je peux vous assurer que c’est vraiment pratique.

 L’outil est gratuit et de bonne qualité

Comme d’habitude, skype propose cet outil gratuitement pour partager votre écran avec une  personne mais devient payant si l’on veut s’en servir en groupe. Je trouve le principe très saint dans un sens, si vous souhaitez avoir une utilisation extrême du produit, vous payez ! Faut bien que Microsoft fasse un peu d’argent 😉

Pour rappel, Microsoft à racheté Skype pour la rondelette somme de 8,5 milliards de dollars en mai 2011.

Conclusion

Je vous conseille donc de vous servir de cet outil pour apprécier son côté pratique. Il ne s’agit pas de prendre le contrôle de l’ordinateur mais bien de partager la vue de l’écran et c’est vraiment une bonne initiative que d’avoir intégrer cet outil dans Skype.

 

Ressources

 

 

 

 

Aller sur la page de l'article