Archives de catégorie : Javascript

Astuces JS

Brackets -Un éditeur open source à la page du web-design.

Brackets, un éditeur qui comprend les besoins des web-designers

Voila cela fait plusieurs mois que je recherchait un éditeur html, CSS, javascript plutôt léger et qui fonctionne bien. J’ai découvert cette perle rare : brackets

C’est un editeur agréable et ergonomique et facile a configurer, il dispose de plus d’un système de “plugins” qui permettent la personnalisation  de l’ensemble, soit au niveau des thèmes (Perso j’en prend un bien sombre, car moins fatiguant pour les yeux), soit au niveau des fonctionnalités (J’aime beaucoup “beautify”, “lint”).

Parmi les petits trucs que j’aime dans brackets, il y a le “live preview” qui montre en temps réel les modifications effectuées soit dans le html, soit dans le Css par le webdesigner. Il y a également la possibilité de voir “in code” les prévisualisation des images, styles css, etc …Brackets

C’est réellement pratique !

Pour les intégrateurs html en “full stack”, le raccourci “Ctrl+E” permet une fois qu’on as lié sa feuille de style, de définir ses styles directement dans l’édition du code HTML. Il faut toutefois faire attention à s’organiser un tant soit peu pour éviter l’anarchie.

Voici une liste d’extensions directement accessible dans “Brackets” que j’adore :

  • Beautify : Permet de ré-organiser son code, refaire l’indentation notamment.
  • Emmet : L’auto-complétion par excellence.
  • HTMLHint : Un validateur parfois plus pertinent que le validateur W3C.
  • CSSlint : Permet de trouver les erreurs CSS
  • ColorHints : pour retrouver rapidement les couleurs utilisées dans les feuilles de styles (Les dernieres saisies en commancant par #)
  • PHP Code Quality Tools : pour “auditer son code PHP”, nécéssite un binaire PHP et codeSniffer.
  • Brackets Git : Extension pour utiliser Git  :-p
  • Brackets file tabs : Pour afficher les fichiers ouverts en “onglets” plutot qu’en liste sur la gauche, un peu comme Eclipse, Komodo.

En résumé,  Brackets est sympa, pratique et ergonomique avec quelques modifications. Il est résolument orienté “frontend” et ne trouvera sa plein utilité qu’en complément avec un IDE. En effet, Brackets permet de créer, modifier, améliorer en live l’affichage d’un site, mais n’est pas encore au niveau des IDE tels que Komodo, Eclipse pour la gestion des bibliothèques et des projets complexes.

Je le recommande pour tous les webdesigners et intégrateurs qui ne s’occupent que de  la mise en page d’un site.

En plus c’est de l’open-source, ce qui n’est pas pour gacher mon plaisir ! 😀

Cet article est très largement inspiré de Alsa creations et mon expérience personnelle : http://www.alsacreations.com/outils/lire/1654-brackets-editeur-front-end.html

La CNIL et les cookies – Un petit tutoriel pour implémenter le fameux bandeau sur votre WordPress

Bonjour les gens,

Depuis le mois de décembre 2013, vous pouvez voir fleurir sur vos sites préférés des bandeaux vous informant que les dits sites utilisent des cookies à des fins publicitaireset de mesure d’audience.

Ces bandeaux apparaissent en réponse à la transposition de la directive européenne. Voila maintenant il faut distinguer 3 types de cookies qui nécéssitent la mise en place d’un tel bandeau :

  • Les cookies de mesure d’audience : Ce sont les cookies déposés par notre fameux google analytics.
  • Les cookies à des fins publicitaires : Criteo, tradedoubler et autres régies publicitaires.
  • Les cookies des réseaux sociaux  : facebook; et consorts.

Dans ce tutoriel, je vais juste reprendre la gestion pour les cookies dits de mesure d’audience, notamment en ce qui concerne google analytics. J’ai exploité pour cela les recommendations de la CNIL que vous pourrez égalemen retrouver ici

On va procéder en 2 étapes, tout d’abord nous allons créer un fichier javascript dans le thème et ensuite nous allons l’ajouter au chargement de la page.

Alors commencons par récuperer le contenu du fichier cookies.js

// Remplacez la valeur UA-XXXXXX-Y par l'identifiant analytics de votre site.
gaProperty = 'UA-XXXXXX-Y'

// Désactive le tracking si le cookie d’Opt-out existe déjà.

var disableStr = 'ga-disable-' + gaProperty;

if (document.cookie.indexOf('hasConsent=false') > -1) {
window[disableStr] = true;
}
//Cette fonction retourne la date d’expiration du cookie de consentement 

function getCookieExpireDate() {
 var cookieTimeout = 34214400000;// Le nombre de millisecondes que font 13 mois 
 var date = new Date();
date.setTime(date.getTime()+cookieTimeout);
var expires = "; expires="+date.toGMTString();
return expires;
}

// Cette fonction est appelée pour afficher la demande de consentement
function askConsent(){
    var bodytag = document.getElementsByTagName('body')[0];
    var div = document.createElement('div');
    div.setAttribute('id','cookie-banner');
    div.setAttribute('width','70%');
    // Le code HTML de la demande de consentement
    // Vous pouvez modifier le contenu ainsi que le style
    div.innerHTML =  '<div style="background-color:#000000;color:#FFFFFF"> Ce site utilise des cookies pour mesurer son audience. En naviguant sur ce site, vous en accepter l`utilisation. Pour vous y opposer en suivant c\'est <a href="javascript:gaOptout()" style="color:white;text-decoration:underline;">lien</a>.</div>';
    bodytag.insertBefore(div,bodytag.firstChild); // Ajoute la bannière juste au début de la page 
    document.getElementsByTagName('body')[0].className+=' cookiebanner';
}


// Retourne la chaine de caractère correspondant à nom=valeur
function getCookie(NomDuCookie)  {
    if (document.cookie.length > 0) {
        begin = document.cookie.indexOf(NomDuCookie+"=");
        if (begin != -1)  {
            begin += NomDuCookie.length+1;
            end = document.cookie.indexOf(";", begin);
            if (end == -1) end = document.cookie.length;
            return unescape(document.cookie.substring(begin, end));
        }
     }
    return null;
}

// Fonction d'effacement des cookies   
function delCookie(name )   {
    path = ";path=" + "/";
    domain = ";domain=" + "."+document.location.hostname;
    var expiration = "Thu, 01-Jan-1970 00:00:01 GMT";
    document.cookie = name + "=" + path + domain + ";expires=" + expiration;
}
// Efface tous les types de cookies utilisés par Google Analytics    
function deleteAnalyticsCookies() {
    var cookieNames = ["__utma","__utmb","__utmc","__utmz","_ga"]
    for (var i=0; i<cookieNames.length; i++)
        delCookie(cookieNames[i])
}

// La fonction d'opt-out   
function gaOptout() {
    document.cookie = disableStr + '=true;'+ getCookieExpireDate() +' ; path=/';
    document.cookie = 'hasConsent=false;'+ getCookieExpireDate() +' ; path=/';
    var div = document.getElementById('cookie-banner');
    // Ci dessous le code de la bannière affichée une fois que l'utilisateur s'est opposé au dépôt
    // Vous pouvez modifier le contenu et le style
    if ( div!= null ) div.innerHTML = '<div style="background-color:#000000;color:#FFF"> Vous vous êtes opposé \
    au dépôt de cookies de mesures d\'audience dans votre navigateur.<br/>Pour accepter le depot des cookies, il vous suffit de supprimer les cookies du domaine \'www.domain.tld\' </div>'
    window[disableStr] = true;
    deleteAnalyticsCookies();
}



//Ce bout de code vérifie que le consentement n'a pas déjà été obtenu avant d'afficher
// la baniére
var consentCookie =  getCookie('hasConsent');
if (!consentCookie) {//L'utilisateur n'a pas encore de cookie de consentement
 var referrer_host = document.referrer.split('/')[2];
   if ( referrer_host != document.location.hostname ) { //si il vient d'un autre site
   //on désactive le tracking et on affiche la demande de consentement            
     window[disableStr] = true;
     window[disableStr] = true;
     window.onload = askConsent;
   } else { //sinon on lui dépose un cookie 
      document.cookie = 'hasConsent=true; '+ getCookieExpireDate() +' ; path=/';
   }
}

Copiez ce code, collez dans un fichier “cookies.js” que vous déposerez dans le dossier js de votre thème

www/wp-content/themes/mon-theme/js/cookies.js

Ensuite, nous allons ajouter ce ficher js au chargement de toutes les pages, pour cela nous allons modifier le fichier “header.php” de votre thème.

Ajoutez la ligne suivante dans le fichier :

 <script src="<?php echo get_template_directory_uri(); ?>/js/cookies.js"></script>

Voila, sauvegardez votre fichier, et si vous avez deja inscrit le tag G.A., vous n’avez rien d’autre a faire.

Pour tester votre bandeau, vous pouvez accèder à votre site en utilisant la navigation privée.

A bientot !!

Comment récuperer les parametres d’appel de votre page en javascript.

Bonjour,

Juste un petit code super rapide, pour extraire les paramêtres de l’url d’appel d’une page en javascript. Dans mon cas ca a été utile pour retransmettre certains  paramètres dans le cas d’une redirection pour de l’affiliation.

Attention, ce post n’est en aucun cas une redite par rapport a mon post précédent : Je parle ici des paramètres d’appel à la page html :

Si par exemple, votre page a comme url  monsite.tld/toto.php?arg1=AAAAA&arg2=BBBBB, ce script va vous permettre de recuperer une tableau associatif de cette forme :

array(
    [arg1]=>'AAAAA',
    [arg2]=>'BBBBB'
);

La différence vient que dans mon précédent post ( Voir le post ) j’extrayer les paramêtres d’appel du fichier javascript et non du fichier PHP (ou html).

Voila le snippet :

function extractUrlParams(){	
	var t = location.search.substring(1).split('&');
	var f = [];
	for (var i=0; i<t.length; i++){
		var x = t[ i ].split('=');
		f[x[0]]=x[1];
	}
	return f;
}

En espérant que ce petit bout de code puisse pour permettre d’extraire les paramètres de l’appel de votre url en javascript.

Comment récuperer des paramètres passés en Url d’un appel de javascript !

Bonjour,

Derrière ce titre quelque peut imbitable, se cache une problèmatique réelle. Dans le cadre de l’affilation certains diffuseurs ont besoin d’inclure des javascript plutot que des widget en iframe.

Pourquoi ? Ben tout simplement pour pouvoir afficher de manière asynchrone leur page et les widgets des annonceurs.

Si comme moi, vos bannières sont des médias riches incluant des images, css, et js, vous  et si en plus vos médias ont besoin de paramètres particuliers, vous allez aimer ce billet !

Je m’explique.

J’ai des bannières paramétrables et qui nécéssitent d’être insérées dans la pages du diffuseur via une iframe (Oui je sais les iframes c’est mal ! :-D).

Exemple de script Iframe :

<iframe src="monurliframe" width="malargeur" height="mahauteur"/>

Seulement je voudrais faire ceci en chargeant simplement un fichier javascript avec un appel du type :

<script type="application/x-javascript" src="httpw://monsite/js/monscript.js?param1=valeur1&param2=valeur2"></script>

Ah oui mais seulement voila, les paramêtres ne sont pas recupérable  en javascript, donc “Houston ? On as un problème !”

L’astuce consiste a rechercher l’inclusion du script, de “parser” la source de l’appel et à en extraire les paramètres.

Pour ce faire, j’ai utliser un bout de code trouvé à l’adresse suivante : http://linuxfr.org/forums/programmationweb/posts/javascript-appel%C3%A9-avec-param%C3%A8tres-dans-lurl

Avec un peu de reformattage, on arrive au code suivant :

//Recuperation des parametres passés en url de l'appel javascript.
function getParam(){
  var src;
  var scripts = document.getElementsByTagName('script');
  for(var i = 0; i < scripts.length; i++){
    src = scripts[i].getAttribute('src');
    if(src.match(/widget\.js(\?.*)?$/) != null){
      var splitURL = src.split('?');
      var params = splitURL[1].split('&');
      var myParams = new Object();
      var keyValue = new Array();
      for(var j = 0; j < params.length; j++){
        keyValue = params[j].split('=');
        myParams[keyValue[0]] = unescape(keyValue[1]);
      }
    }
  }
  return myParams;
}
params = getParam();
//Ecriture de l'iframe
document.write('<iframe src=\"http:/monsite.com/mapageiframe.php?param1='+params['param1']+'&param2='+params['param2']+'\" frameborder=\"0\" border=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"></iframe>');

La premiere partie est la fonction qui parcourt le document courant et isole toutes les balises <script>, ensuite pour chacune d’entre elles, on verifie que le nom du fichier javascript correspond bien au notre. Si c’est le cas, on extrait les paramêtres que l’on retourne dans un tableau associatif.

La seconde partie est un exemple d’utilisation : l’ecriture d’une iframe, ceci dit c’est applicable à nombre de cas !

En espérant que ce billet vous sera utile !

Les boutons sociaux

Les réseaux sociaux prennent de plus en plus d’ampleur de nos jours. Les nouveaux algorithmes de Google les prennent de plus en plus en compte. Il devient important pour le référencement naturel de parler de nous sur ces nouveaux vecteurs de communications.

Voici quelques exemples de codes pour insérer les différents boutons :

  • Facebook :
    <!-- Inclusion pour facebook -->
    <div id="fb-root"></div>
    <script>
    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    
    <div data-href="URL_A_RECOMMANDER" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-action="recommend" data-font="arial" data-ref="fblikeButton"></div>
  • Pinterest :
    <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
    
    <a href="http://pinterest.com/pin/create/button/?url=URL_A_RECOMMANDER_ENCODEE&media=URL_A_RECOMMANDER_ENCODEE&description=DESCRIPTION_ENCODEE" count-layout="none"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" style="vertical-align: top;margin:none;"/></a>
  • Twitter : 
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    
    <a href="https://twitter.com/share" data-via="TWITTER_USER" data-lang="fr" data-related="TWITTER_RELATED" data-hashtags="TWITTER_HASHTAG">Tweeter</a>

Je modifierai ce post au fur et à mesure que le nombre de boutons sociaux intéressants augmentera.