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

Faire une redirection 301 en symfony 1

Comment faire une redirection 301 ?

Etape 1 : Créer l’action de redirection

L’idée est de passer par une petite action qui se chargera de renvoyer un entête HTTP avec le code 301 et d’effectuer ensuite la redirection vers la page voulue.

Pour ce faire,  dans le fichier « MonProjet -> apps -> MonApplication -> modules -> seo -> actions -> actions.class.php » (cf arborescence ci-dessous), nous allons créer l’action « redirection ».

L'arborescence d'un projet symfony avec les 2 fichiers que nous allons utiliser.
L’arborescence d’un projet symfony avec les 2 fichiers que nous allons utiliser.

Voici le code à insérer pour  effectuer la redirection.

<?php

/**
 * SEO actions.
 *
 * @package    Nom de l'application
 * @subpackage Nom du module
 * @author     Votre nom ICI
 */
class seoActions extends sfActions
{
  /**
   * Executes index action
   *
   * @param sfRequest $request A request object
   *
   */
  public function executeRedirection(sfWebRequest $request)
  {
    $newRouteName = $this->getRequestParameter('newRoute');
    $myPatternRouting = $this->getContext()->getRouting();

    $parameters = $request->getRequestParameters();
    $status = $parameters['status'];
    unset($parameters['_sf_route']);
    unset($parameters['newRoute']);
    unset($parameters['status']);
    
    $this->redirect($myPatternRouting->generate($newRouteName, $parameters), $status);
  }
}

?>

Le principe est d’appeler cette action avec une certains nombre de paramètres dont :

  • La route vers laquelle on redirige « newRoute ».
  • Le status HTTP à renvoyer (dans notre cas « 301 ».

La fonction se charger ensuite de rediriger le navigateur via la dernière ligne « $this->redirect(…) ».

La méthode est simple et peut être adaptée pour d’autres usages.

Etape 2 : modifier le fichier de routing.

Maintenant que nous avons l’outil, il faut l’utiliser. Nous allons donc modifier le fichier de routing en conséquence.

route1:
  url: /MaNouvelleUrl.html
  param: { module: monmodule, action: monaction}

route1_redirect:
  url: /monAncienneUrl.html
  param: {module: default, action: redirectOldUrl, newRoute: 'route1', status: 301}

Alors la attention il y a une astuce ! en effet quand on developpe une application, on est souvent amener à utiliser les routes à plusieurs endroits dans son code. Si on change simplement la route, on risque d’avoir des conflits. L’astuce est donc de créer une nouvelle route « _redirect » par exemple, qui va répondre sur l’ancienne url. Cette nouvelle route va renvoyer vers notre action « seo/redirection » avec comme paramètre le nom de l’ancienne route.

Ensuite, on modifie notre ancienne route pour qu’elle réponde a la nouvelle url.

On sauvegarde, on déploie, on vide les caches et le tour est joué

Bon c’est pas grand-chose mais ca permet de gérer proprement les redirections 301, 302, etc ….

Ah ! Les jeux électroniques ! Je retombe en enfance !

Qui d’entre vous n’as pas joué avec ces mini jeux électronique tels que Donkey kong, ou encore Zelda sur un vieil écran LCD ?

Perso, en découvrant ce site, je suite retomber en enfance en moins de 2 secondes !!

http://www.pica-pic.com/

Le principe, c’est de simuler tout ces vieux jeux vidéos directement dans votre navigateur, c’est totalement inutile et contre-productif mais ca fait du bien !!

Google et son nouveau moteur de recherche : La Search Box

Qu’est ce que la »search box » ? Que cela va-t-il changer pour votre site et son référencement naturel ?

Depuis maintenant quelques jours/semaines, Google intègre votre moteur de recherche en laissant apparaître sur ses résultats de recherche, un nouveau champ en dessous des résultats .  Cette nouvelle fonctionnalités s’appelle la « Search Box ». En effet dans certains cas, Google propose aux internautes d’effectuer directement à partir de sa page une recherche sur le site voulu.

Un exemple de moteur de recherche intégré : la search box
Un exemple de moteur de recherche intégré : la search box

L’initiative est plutôt sympathique de la part de google, facilitant ainsi l’accès aux pages pour les internautes. Ce nouveau moteur se base soit sur les résultats de la commande « site: », soit sur un moteur de recherche interne au site même. Il faut spécifié a Google  la bonne url du moteur à l’aide des micro-données.

Toutefois, cette initiative fait naître en moi quelques spéculations , et si Google et son nouveau moteur de recherche évaluait les résultats renvoyés ?

Si l’on part de cette hypothèse, il peut en découler plusieurs constatations :

  1. Il devient essentiel d’avoir un moteur de recherche interne au site qui donne des résultats pertinents.
  2. En effet, si l’on souhaite se référencer sur une expression donnée (ex : « mon voisin totoro ») et que dans le propre moteur de recherche du site,  cette expression n’aboutit pas à un contenu de qualité, Google risque de pénaliser le site sur cette expression de recherche.
  3. A l’inverse, si le moteur de recherche interne du site, renvoi vers un contenu qualitatif, Google favorisera son indexation. Le site ressortira donc plus facilement sur cette expression.
  4. Pour les expressions génériques, cet intégration du moteur de recherche interne du site risque du coup de les pénalisées.

On peut y voir ainsi une belle opportunité de booster les résultats sur les expressions que l’on souhaite, notamment en travaillant de manière précise sur des « landing pages » adaptées à l’expression.

Mais il faut surtout, à mon avis, prêter attention aux recherches  » longues traînes  » qui doivent également être travaillées.

On peut d’ores et déjà évaluer un site avec l’expression de recherche suivante  :

site:monsite.com mon_expression_cherchée

Si on obtient des pages au contenu pertinent et adapté, alors tout va bien, sinon, il faut soir revoir son moteur de recherche interne, soit adapter les pages de résultats.

C’est une manière pour google, pour laisser les sites eux-mêmes évaluer leur pertinence par rapport à une expression de recherche.

Si l’on ne renvoie rien sur une expression de recherche, c’est un peu comme si on déclarait à Google :  « Non je ne suis pas pertinent sur cette recherche ».

Je vous laisse donc à l’optimisation et de vos pages de résultats et de votre moteur interne !

Pour en savoir plus :

[Edit] Google sous la pression de plusieurs organismes a décidé de permettre aux sites internet de refuser l’utilisation de cette « search box ». Il leur suffit d’ajouter une balise meta ainsi :

<meta name="google" content="nositelinkssearchbox">

Il convient donc de rajouter cette nouvelle balise tant que votre stratégie concernant cette nouvelle fonctionnalité n’est pas clairement définie et que vous ayez effectués les développements nécessaires.

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