Archives mensuelles : mars 2015

Code, CSS, Html, Javascript

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

Laisser un commentaire

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

Code, PHP, Symfony

Faire une redirection 301 en symfony 1

Laisser un commentaire

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