Pixelastic

You can cut our wings but we will always remember what it was like to fly.

Blog

Caracole - Edition directe

En plus de son interface d'administration complète, Caracole permet un mode d'édition rapide directement accessible depuis le coté front-end des sites, pour corriger rapidement un titre ou un coquille qui se serait glissée quelque part.

Grâce à jQuery et cakePHP, cette fonctionnalité est très simple à utiliser. Il suffit pour cela d'avoir les droits d'administration sur le site que l'on veut modifier. Il suffit ensuite d'y naviguer avec un navigateur assez récent (cela signifie que IE6 n'y est pas convié) et s'affichera alors automatiquement en haut à gauche de l'écran un petit switch qui permet d'activer ou de désactiver en un clic le mode édition.

Lorsque le mode d'édition est activé, il suffit de cliquer sur une zone que l'on veut modifier pour la transformer automatiquement en champ de formulaire modifiable (avec intégration de tinyMCE pour les grands textes). Il suffit alors de modifier le texte exactement comme on peut le faire dans l'admin et de valider. La modification est prise en compte automatiquement.

Coté développeur, il suffit d'ajouter une class="editable" ainsi qu'un id formé de la forme "controller-champ-id". Ainsi id="posts-text-12" identifiera le champ "text" du 12e post.

C'est extremement pratique pour modifier des fautes de frappe, ou faire des tas de petites modifications, je m'en sers énormément et c'est un pas de plus pour faciliter l'administration à l'utilisateur final.

Caracole - Référencement

Le référencement est une des préocupations principales de nos clients, tous veulent savoir si avec le produit qu'on leur propose ils seront en mesure d'être les premiers dans les résultats Google.

Bien qu'il n'existe pas de recette miracle pour parvenir à ce résultat, certaines sociétés sont spécialisés dans ce business et déploient des trésors d'ingéniosité pour réussir à faire grimper les pages de leurs clients dans les index des moteurs.

Mais c'est un boulot à part entière, et ce n'est pas le nôtre. Nous faisons des sites web, à chacun sa spécialité.

Malgré tout, il existe plusieurs bonnes pratiques qui permettent d'obtenir de bons résultats sans trop d'efforts, et Caracole s'en sort pas trop mal de ce coté là.

Tout d'abord il tire parti de la façon dont les urls sont gérées par cakePHP, et donc aucune url ne contient de paramètre de la forme ?foo=bar&action=foobar qui sont très mal indexées. Chaque page possède donc sa propre url unique. Les méthodes d'url rewriting proposées de base par cakePHP sont très puissantes et font déjà une très grosse partie du travail.

Dans la même veine, il est possible de définir des 'slugs' pour chaque élément, un slug permet de donner un identifiant à chacune des pages, ce qui signifie qu'au lieu de retrouver un élément par son id dans l'url (un simple nombre, qui ne donne pas d'indication sur le contenu), on peut à la place le remplacer par un slug (du genre 'services', 'nous-contacter', etc). Cela donne des urls du genre /services.html, /posts/1:mon-premier-post, etc

Cela facilite le référencement des pages car des mots clés se rapportant au contenu de la page peuvent déjà être mis dans l'url, qui est une place privilégiée.

Ici encore, il suffit d'ajouter un champ 'slug' dans la table correspondante au modèle pour que celui-ci soit automatiquement généré à partir du nom (il est bien sur possible de le modifier si besoin).

Caracole est aussi doté d'un système de génération automatique de sitemap (le plan du site). Celui-ci est généré en deux versions, une version html pour vos visiteurs, et une version XML (qui indique les fréquences de réactualisations ainsi que les dates de dernière modification) pour les moteurs.

Et pour finir, je vais passer rapidement sur les essentiels : balise <title> et meta description différents pour chaque page, fichier robots.txt, texte alternatif sur les images et accessibilité du markup HTML mais bien sur, Caracole se charge de tout cela aussi.

Caracole - Corbeille

Dans la lignée du principe de brouillon j'ai aussi ajouté une fonction de "Corbeille". Ca fonctionne exactement comme celle du bureau de Windows qu'on est bien content d'avoir quand on a eu la main un peu généreuse dans les fichiers à supprimer.

Elle fait office de sécurité et les éléments soit-disant supprimés ne sont pas réellement effacés instantanément, ils passent dans une corbeille intermédiaire. A partir de là, si on se rends compte qu'on a fait une bétise, on peut toujours les restaurer à leur état d'origine. Ou alors vider la corbeille de temps en temps pour faire de la place.

Exactement de la même façon que pour les brouillons, il suffit ici d'ajouter un champ 'is_deleted' à la table du modèle correspondant pour lui ajouter la fonction de corbeille, Caracole se charge du reste.

Les éléments supprimés ne sont plus retournés par les fonctions de recherche habituelle, à moins de préciser l'option 'includeDeleted'.

Caracole - Brouillons

Une des fonctionnalités les plus pratiques de Wordpress, c'est de pouvoir enregistrer un billet comme brouillon lorsqu'on ne l'a pas terminé. Ca permet d'y revenir plus tard et de le garder dans un coin sans qu'il ne soit perdu.

J'ai ajouté cette fonctionnalité à Caracole hier, et elle peut s'appliquer à n'importe quel modèle (actuellement je l'ai mise sur les pages et les billets de blog uniquement, mais comme vous allez le voir, c'est très facile à ajouter pour n'importe quel modèle).

Une case à cocher "Enregistrer comme brouillon" permet d'enregistrer l'élement comme brouillon, cela signifie qu'il ne sera plus visible sur le site tant qu'il restera à l'état de brouillon.

Pour le développeur, c'est très simple à utiliser, il suffit de rajouter un champ 'is_draft' dans la table correspondante au modèle et Caracole se charge du reste. Les brouillons ne sont plus retournés par les recherches, à moins de préciser 'includeDraft' dans les options de recherche, ce qui permet de garder le code le plus clair possible.

Dans l'admin, les brouillons restent bien sur visibles (bien qu'indiqués de façon légerement différente), et il suffit d'aller décocher la case pour les publier réellement.

Caracole - Présentation

L'un des principaux atouts que l'on mets en avant quand on propose nos services à nos clients c'est l'autonomie qu'ils auront dans la gestion de leur site web. J'entends trop souvent des clients qui possèdent déjà un site web me dire qu'ils veulent changer de prestataire car celui qu'ils ont actuellement est trop lent à réagir quand ils ont besoin d'une modification et surtout que la modification leur est facturée à chaque fois !

J'ai toujours trouvé cette approche ridicule. D'une part parce que pour moi le client devient propriétaire du site et qu'il ne doit plus être dépendant de son prestataire une fois la livraison effectuée. Ensuite parce qu'il faut bien l'avouer, mettre à jour des textes, des images et des liens sur un site web qui n'est pas le notre, c'est pas la partie la plus excitante de notre métier.

C'est pour ça que dès le début, j'ai voulu permettre à mes clients la plus grande flexibilité possible dans l'administration de leur site. Et c'est ainsi que j'ai commencé à développer des interfaces d'administration, et que de fil en aiguille Caracole a vu le jour.

Caracole est un CMS, basé sur le framework cakePHP. Il permet dans sa version de base de gérer une architecture de site simple (Actualités, Pages, Formulaire de contact). Il a été pensé afin de simplifier au maximum la vie à la fois à l'utilisateur et au développeur.

Pour l'utilisateur, l'interface d'administration est très simple d'utilisation et claire, pas besoin de compétences techniques pour s'en servir. Il suffit de quelques clics pour uploader et redimensionner une image, un éditeur de texte riche (tinyMCE) permet des mises en pages évoluées, un simple système de drag'n'drop permet de réordonner des éléments au sein d'une liste, une corbeille permet de ne pas perdre définitivement les éléments supprimés, on peut enregistrer son travail comme brouillon avant de le publier sur le site, etc, etc

Pour le développeur, vu que tout cela est basé sur cakePHP, il est très simple d'ajouter de nouveaux modèles en plus de ceux existants pour s'adapter à tout type de projet. Beaucoup d'outils ont été intégrés pour éviter au maximum les taches fastidieuses et répétitives (compression des Javascript/CSS, CSS Sprite, réecriture d'url, intégration avec Firebug, etc).

Caracole est encore en développement, il reste plusieurs fonctionnalités que nous aimerions rajouter ainsi qu'un polissage de l'interface. Néanmoins il est suffisamment stable pour être utilisé, ce site en est un très bon exemple. Je posterai d'autres billets sur les différentes fonctionnalités utiles de Caracole dans les jours prochains.

Ouverture

Et voila le premier billet du blog de Pixelastic. Quel grand moment... Après tout ces durs mois de labeur pour réussir à se mettre d'accord sur le design et le logo (d'ailleurs, rien n'est encore définitif), le site est enfin en ligne.

Il reste encore beaucoup de choses à faire, de pages à styler, de texte à écrire, mais on déballe nos cartons petit à petit.

Bienvenue à tout le monde, et restez à l'écoute, ce blog va se remplir petit à petit lui aussi.