TodoMVCBundle is now compatible with Symfony 2.3

I’ve just updated my Symfony 2 implementation of TodoMVC using Backbone.js and Chaplin.js for the UI.

Screenshot Symfony Todomvc

It is now compatible with Symfony 2.3 (the current version and first LTS of Symfony 2). I’ve moved the decoder which converts JSON data to application/x-www-form-urlencoded directly in FOSRest.

Take a look at this bundle if you want to use Backbone and Chaplin with Symfony. The demo is still online.

Diaporama diffusé lors du workshop sur le référencement avec HTML5

Voici le diaporama qui a servi de support au workshop sur le référencement avec HTML5 que j’ai animé jeudi 31 janvier pour La Coopérative des Tilleuls :

Ce sont le thème Prestashop HTML5 optimisé pour le référencement et l’implémentation de TodoMVC avec Symfony et Backbone.js qui ont servi de support.

Le prochain workshop de cette série sera justement dédié à la programmation JavaScript avancée avec Chaplin.js et Backbone.js. Il se déroulera début mars, toujours à Co-Factory.

Workshop HTML5

Symfony 2, Backbone.js et Chaplin.js : une implémentation de TodoMVC

Je viens de publier une implémentation du célèbre TodoMVC sous forme de  bundle Symfony 2. Cela fait suite à mon précèdent article sur l’utilisation de Symfony avec les bibliothèques JavaScript Chaplin.js et Backbone.js.

Screenshot Symfony Todomvc

TodoMVC est un projet présentant de nombreuses implémentations de la même application de gestion de tâches (todo) à l’aide des frameworks JavaScript MV* les plus populaires (Backbone.js, AngularJS, Ember.js, KnockoutJS…). Il permet ainsi de découvrir ces frameworks et de choisir celui qui nous semble le plus adapté.

L’ implémentation que je propose contient le code du frontend, mais aussi le backend réalisé à l’aide de Symfony.

Le bundle fourni un example d’intégration complète de Backbone, Chaplin et Symfony. Il inclus une API REST JSON réalisée à l’aide de FOSRestBundle et du framework de formulaire de Symfony, l’entité Doctrine représentant un Todo, le code CoffeeScript de l’application cliente, la vue chargeant la SPA et quelques tests fonctionnels.

Essayez la démo et consultez le code sur GitHub.
Version anglaise de cet article.

A Symfony 2 TodoMVC implementation using Backbone.js and Chaplin.js

I have just released an implementation of TodoMVC using Symfony 2 (the best PHP framework), Chaplin.js and Backbone.js. It follows my previous article on the use of these technologies (in french).

TodoMVC is a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.

This a backend and frontend implementation of this project. It is a demo of Chaplin and Backbone working with Symfony.
Screenshot Symfony Todomvc

 

My bundle includes a JSON REST API built with FOSRestBundle and the Symfony’s form framework, the Doctrine entitiy, the view to load the SPA, the CoffeeScript code and some functional tests.

Try the demo and download it on GitHub.

French version of this article.

 

Workshop gratuit sur le référencement naturel avec HTML5 jeudi 31 janvier à Lille

Worskhop sur le référencement naturel avec HTML5

Jeudi prochain, j’animerais pour La Coopérative des Tilleuls, un atelier gratuit sur l’utilisation des propriétés sémantiques de HTML5 pour améliorer le référencement naturel des sites internet. C’est chez nos amis de Co-Factory que ça se passe (677 avenue de la République, Lille).

Au programme :

  • Introduction au référencement
  • Présentation des balises sémantiques de HTML5
  • Comprendre l’algorithme de « outline » HTML5 pour mettre en valeur l’information pertinente
  • Mettre en avant ses pages dans les moteurs de recherche avec les microdata, Schema.org et les extraits enrichis
  • Allez plus loin, jouer avec Javascript pour référencer des SPA (Single Page Application)

Ce workshop est gratuit et ouvert à tous mais il est impératif de réserver au préalable. Venez !

Un thème Prestashop HTML5 optimisé pour le référencement avec Rich Snippets

Exemple d'extrait enrichi (Rich Snippet) sur Google

Exemple d’extrait enrichi (Rich Snippet) sur Google

Mise à jour : ces fonctionnalités sont maintenant incluses dans le thème par défaut de Prestashop 1.6. Ce thème n’est donc plus maintenu.

J’ai contribué il y’à quelques temps déjà la migration vers HTML5 du thème par défaut de Prestashop, la plateforme e-commerce libre. En attendant l’inclusion de ce patch dans la version upstream je vous propose au téléchargement un thème autonome libre et gratuit compatible avec les versions 1.5 et supérieures de Prestashop.

Il s’agit donc du thème par défaut techniquement optimisé pour un meilleur référencement naturel, plus accessible aux personnes handicapées et avec le support automatique des extraits enrichis affichés dans Google (voir l’illustration plus haut).

Voici la liste détaillée des fonctionnalités ajoutées :

  • Microdata HTML5 Schema.org Offer, Product et Breadcrumb pour afficher des “extraits enrichis” (Rich Snippets) dans Google
  • Nouvelles balises sémantiques HTML5 header, nav, footer et article pour un meilleur référencement (support des anciens navigateurs via Modernizr)
  • Rôles ARIA mainnavigationsearchcomplementarycontentinfo et banner pour rendre le site plus accessible aux personnes souffrant de déficiences visuelles, auditives ou cognitives

Bien sûr cette template est complétement personnalisable, faites pour se charger vite et compatible avec le mode multiboutique et multilingue de Prestashop. C’est une base moderne pour personnaliser l’apparence de sa boutique sans négliger le référencement.

3ème workshop d’initiation aux technologies du web

A la demande générale La Coopérative des Tilleuls vous invite à un troisième workshop d’initiation aux technologies du web.

Après avoir appris les bases de HTML lors du premier workshop et de CSS lors du second, nous réaliserons ensemble l’intégration complète d’une page web à partir d’une maquette graphique.

Nous apprendrons à découper une maquette afin de la transformer en page web puis nous reverrons les techniques apprises lors des premiers ateliers et les mettrons en pratique sur ce cas concret.
C’est l’occasion pour ceux qui n’ont pas pu assister aux séances précédentes de prendre le train en marche et pour les autres de se perfectionner.

Pour bien se préparer :

Ce workshop est destiné aux débutants. Aucune connaissance préalable n’est nécessaire à son suivi mais il est préférable de prendre connaissance du contenu des ateliers précédents.
L’encadrement est assuré par des développeurs professionnels coopérateurs à La Coopérative des Tilleuls. C’est gratuit.

L’atelier se déroulera le jeudi 28 juin à 14h à Co-Factory, 677 avenue de la République à Lille (arrêt de tramway Buisson). Réservation obligatoire auprès de Kévin : kevin@la-cooperative-des-tilleuls.com

Patch to use sfXssSafePlugin with symfony 1.2

HTML Purifier is a awesome PHP filter library designed to secure and add standard compliance to HTML. In websites including user generated content, this library allow to have mutlimedia pages including image, text formating and YouTube videos in a secure and SEO proof way thanks to rich text editors like Tiny MCE or FCK Editor and HTML purifier.

A plugin called sfXssSafePlugin is designed to integrate this library as an escapement strategy in symfony. If you have tried it with symfony 1.2 you can see this message:

HTML Purifier autoloader registrar is not compatible
with non-static object methods due to PHP Bug #44144;
Please do not use HTMLPurifier.autoload.php (or any
file that includes this file); instead, place the code:
spl_autoload_register(array(‘HTMLPurifier_Bootstrap’, ‘autoload’))
after your own autoloaders.

There are also some strict standards and constants compatibility problems. I’ve just wrote a patch to get this plugin working with symfony 1.2.

  1. Install sfXssSafePlugin like described in its README file
  2. Download my patch in the plugin’s folder
  3. Go into the plugin’s folder and run patch lib/helper/XssSafeHelper.php < XssSafeHelper.php.patch
  4. Edit your application configuration file (ie: apps/frontend/config/frontendConfiguration.class.php) and add the following code into the configure() method:

It’s done ! I’ve submitted this patch to the plugin’s author. I hope it will be upstream soon 🙂

The last update of Aptana block Django development server

The last update of Aptana Studio come with a new built-in Jetty-based HTTP server running on port 8000… the same as Django development server. There is no good way to disable the preview server feature of the popular editor, but our favorite web framework can be launched on another port. Just type python manage.py runserver 8080 instead of python manage.py and access to your work on http://localhost:8080.

Django logo

La faille de sécurité touchant MessengerFX semble corrigée

Il y’a quelques temps, j’avais découvert une vulnérabilité de type Cross Site Scripting dans MessengerFX, un client web populaire pour le réseau Windows Live Messenger, qui pouvait avoir de fâcheuses conséquences : en plus de pouvoir faire planter le navigateur de n’importe quel utilisateur du service, elle permet d’accéder à toutes les fonctionnalités implémentées par Messenger FX ce qui signifie entre autre : récupérer la liste de contact de l’utilisateur, envoyer des messages en son nom, supprimer, bloquer et débloquer des personnes de sa liste de contact et lui en ajouter, lire les messages, bref : de prendre le contrôle complet du compte MSN de la victime.

Vendredi, j’ai reçu un email de l’équipe MessengerFX m’indiquant que le problème est corrigé :

Hi Kevin,
First of all i want to thank you for your warn. We fixed that problem and
now its working correctly.
[…]

La correction actuelle ne permet plus d’envoyer de code Javascript via MessengerFX à un ami et éxecute toujours le dis code en local (sur l’ordinateur de celui qui l’envoi). L’équipe indique que la prochaine version, bientôt disponible, inclura une meilleure gestion de l’envoi de code via l’application internet.