Le nouveautés de Contao CMS 2.9

Il y a une semaine exactement, la nouvelle était annoncée sur Twitter.

Chose promie, chose due. La version 2.9 de Contao (ex-Typolight) est sortie.

Contao est un CMS simple. Son code est propre. Il est très facile à utiliser. Le backend est accessible et respecte les standards HTML et CSS du web. Contao ressemble beaucoup à Typo3 dans la façon de gérer la structure d’un projet dans le backend et dans la structure des fichiers de configuration. Un exemple concret, en typo3 pour représenter les élements d’un enregistrement en backend, on utilise le TCA (Table Content Array). Avec Contao, on a le DCA (Data Container Array) si je ne me trompe pas? De ce fait, certains utilisateurs confondent Contao et Typo3. Mais il est très important de faire savoir que malgré quelques ressemblances, ce CMS tire des avantages par rapport à d’autres CMS.

Cette nouvelle version signe aussi la nouvelle dénomination du CMS. En effet, ce CMS s’appelait jusqu’alors Typolight.

Parmi les nouveautés apportées : un nouveau gestionnaire de thème. Les thèmes n’existaient pas dans Typolight. On n’avait que les templates pour pouvoir modifier le gabarit de la page frontend. En effet, un template est juste un fichier au format .tpl . Un thème quand à lui est un groupe qui peut contenir des feuilles de styles CSS, des modules, et des layout. Ce groupe est stocké en base de données et reconnu automatiquement par le backend de Contao lors de l’accès à la page gestion des thèmes. De plus il est possible d’exporter un thème pour pouvoir l’utiliser plus tard par exemple. L’export sera au format .cto qui n’est autre qu’un fichier compréssé au format ZIP renommé différement.

Un nouveau gestionnaire des extensions a été mis en place également. De multitudes options ont été ajoutées telles que  : la possibilité de faire une recherche dans la liste des extensions installées. Une option pour permettre de mettre à jour en une seule fois plusieurs extensions. Sur ce point, il me semble que wordpress a été le premier CMS à initier cette option.

Il est possible maintenant d’associer différents templates à des sous-pages. Jusqu’à maintenant, on ne pouvait avoir qu’un seul template pour l’ensemble du site et un seul template pour un module. Ces fichiers étaient stockés dans le répertoire templates. L’avantage est dans cette nouveauté la possibilité de pouvoir skinner différemment un même module placé dans diverses pages du site.

Partager sur Twitter et Facebook deviennent maintenant très facile et sont intégrés nativement dans la version 2.9 de Contao. En plus des boutons déjà existants tels que : impression au format PDF, et lien à un ami, On peut paramétrer une page pour que l’internaute puisse l’imprimer, et partager la page sur les réseaux sociaux : Twitter et Facebook. Lors d’une partage d’un lien, Contao a prévu de raccourcir les liens avec TinyURL. J’imagine déjà que d’ici quelques jours, une extension qui utilisera bit.ly verra le jour.

>> Tester, Télécharger Contao http://www.contao.org/

WordPress 3 – les nouveautés (Partie 2)

Dans la suite du post 1 sur les nouveautés de WordPress 3, je suis maintenant prêt pour approfondir ce CMS et vous présenter d’autres nouveautés.

Possibilité de créer des nouveaux types de contenus et taxonomy.

Cette nouveauté figure parmi les plus importantes de cette version 3 de WordPress. Jusqu’à ce jour, on était limité uniquement à deux types de contenus pour remplir le site : les articles et les pages. Aussi, nous n’avions droit qu’aux taxonomy suivants : tags et catégories.

Il est maintenant possible de créer n’importe quel type de contenu structuré ou de taxonomy, de les remonter facilement dans la partie publique du site. Cette remontée se fait très facilement puisque WordPress a créé spécialement une fonction pour. Il est important de noter que ce type de contenu n’a rien à voir avec les catégories et les tags.

En lisant ce post et particulièrement le paragraphe précédent, vous direz surement : « mais sous une version antérieure, ceci était possible, et le nombre de plugins faisant cette fonctionnalité était innombrable« . D’accord, mais il s’agit là, d’un nouveau type de contenu intégré nativement dans WordPress. Ce qui veut dire que le risque de perte de données est nul si une mise à jour de l’outil devait être fait. De plus, il ne s’agit plus de surcharger la base de données en créant de nouvelles tables. J’ajouterai en plus qu’il s’agit d’écrire quelques lignes de codes aussi bien pour les créer que pour les remonter dans la partie publique.

Techniquement, voici comment faire fonctionner et créer un nouveau type de contenu video par exemple :

• Editer le fichier functions.php situé dans le répertoire de votre thème avec un éditeur de texte tel que notepad par exemple.
• L’objectif est de créer une fonction qui se lancera au chargement du backend de WordPress. Cette fonction est init.
• Ajouter le code suivant à la fin du fichier :
  

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

  <?php add_action('init', 'my_video_init'); function my_video_init() { //Ajouter un nouveau type de contenu register_post_type( 'projet', array( 'label' => __('Video'), //Nom de l'élément utilisé dans la remontée 'singular_label' => __('Video'), //Nom de l'élément affiché dans la colonne de gauche du backend 'public' => true, //Permet de modérer le type de contenu 'show_ui' => true, //Faire apparaître ou non cet élément dans le backend 'capability_type' => 'post', //post ou pages, 'hierarchical' => false, //Si il y a une relation enfant parent 'supports' => array('title', 'editor', 'thumbnail', 'custom-fields') //Autres élements qu'on souhaite avoir ) ); //Ajouter un nouveau type de taxonomy register_taxonomy( 'nom_taxonomy', //nom de la taxonomy 'projet', //post,pages, ou ici projet array( 'hierarchical' => true, //Si il y a une relation enfant parent 'label' => 'Nom taxonomy',//Nom qui s'affichera dans le backend 'query_var' => true, 'rewrite' => true ) ); //Ajouter autant de fonctions que nécessaire à la suite } ?>

• Enregistrer le fichier et renvoyer le dans le répertoire de votre thème.

Voici ce que ca devrait donner en Backend

Gestionnaire de menu personnalisé.

Pourquoi créer des menus personnalisés ? Pour avoir la possibilité de créer un menu qui va vers un site externe par exemple. Pour créer un menu de type mailto. Pour créer un menu qui regroupera les posts et catégories….Autant de possibilités limitées par l’imagination.

Comme c’est une fonctionnalité de la version 3.0, pour le faire fonctionner correctement, quelques retouches doivent être faites au niveau du code.

• Editer le fichier header.php situé dans le répertoire de votre thème avec un éditeur de texte tel que notepad par exemple.
• Ajouter le code suivant à l’endroit où vous souhaitez faire apparaitre le menu personnalisé :

  1	<?php wp_nav_menu(); ?>

• Enregistrer le fichier et renvoyer le dans le répertoire de votre thème.

Voyez plutôt le résultat :

L’intérêt est multiple :

• On n’a plus besoin de bidouiller le code de notre thème, pour afficher un menu personnalisé, en essayant de jouer sur l’affichage des catégories, tags…
• La gestion des menus devient administrable par le contributeur. Il a le contrôle total de son affichage, de sa gestion.
• Il peut créer autant de menus souhaité, par exemple en bas de page, en haut de page, à gauche, dans la navigation centrale.

Typo3 4.4.0 se rapproche des standards Joomla, WordPress, Contao.

Il y a trop de chiffres certes. Je ne peux pas m’empêcher de créer un post sur cette nouveauté importante. Typo 3 4.4.0 vient de sortir 5 jours après la sortie de WordPress 3.0.  Pour les néophytes, il s’agit du très puissant CMS (Content Management System) Typo3, qui est disponible avec une nouvelle version -  la 4.4.

Je me suis pressé de mettre à jour un grand site portail développé avec, pour laquelle la dernière version installée est la 4.3. Après avoir transféré les sources téléchargées à partir du site http://typo3.org/  sur le serveur destinataire, je commence à tester en se connectant au backend. Et la j’ai une page sans formulaire de connexion ni de mot de passe. J’ai compris qu’il s’agit de ces fameux extensions qui permettent de donner un look différent au backend de ce qui est proposé en natif par typo3. Je désinstalle ces extensions. Je n’ai toujours rien :( Je décide alors d’aller dans le répertoire d’installation de typo3. Voici les captures d’écrans proposées.

Après avoir fait les mises à jour de la base de données, et aussi après suppression des fichiers de caches temporaires, je teste cette nouvelle mouture. Et là, sans trop de surprises, la mise à jour s’est bien passée, très bien même. Le frontend fonctionne correctement. Après avoir fait un tour sur le site, en parcourant l’ensemble des pages, aucun bug constaté. Je félicite et remercie la communauté qui continue à oeuvrer autour de ce grand CMS.

Typo3 se rapproche maintenant des standards dans le sens où pour un néophyte, il était impossible jusqu’à maintenant de faire fonctionner correctement un site sans connaître au moins les bases de ce CMS ou se documenter pendant quelques jours voire quelques mois. L’essentiel de cette nouveauté est qu’en 5 minutes, un site est fonctionnel et ceci sans avoir lu une quelconque documentation. Un template par défaut est installé. Cette force a été toujours revendiqué par le CMS Joomla. La guère des CMS est déclarée.

Le backend a été reskinné avec quelques nouvelles icônes. Typo3 devient plus facile et agréable à utiliser. Les feuilles de styles du backend ont été refactorisées. L’utilisation de la technique des sprites (une seule image pour donner un look à un ensemble d’éléments) a allégé grandement le chargement du backend puisque toutes les icônes dans le menu de gauche sont affichés grâce à cette technique. L’utilisateur est guidé pas à pas lors d’une nouvelle installation.  Typo3, Contao et WordPress sont de sérieux concurrents sur ce point. Le RTE (Editeur de texte enrichi) de typo3 basé initialement sur le HTMLAREA est maintenant fonctionnel avec Sencha (ExtJS). Il n’y a plus de fenêtres qui alourdissent l’écran lors d’insertion d’un lien par exemple. Celles-ci sont remplacées par les boîtes de dialogues de Sencha. Sur ce point, Joomla a choisi d’utiliser le framework Mootools. Le HTML5 est maintenant supporté par cette nouvelle version. Ceci de façon très simple via un typoscript.

Les éditeurs de CMS ne connaissent pas la crise en 2010. Ces nouveautés ne sont pas prêts de s’arrêter. Après WordPress 3.0 et Typo3 4.4, je sens que la sortie de Joomla 1.6 est pour bientôt et promet aussi des nouveautés importantes. Sans oublier Drupal 7.0. Typolight est aussi dans la course. Rappelons que ce CMS que j’aime bien se nomme maintenant Contao 2.9.

GoogleCL : produits de Google en ligne de commande

(GoogleCL peut prêter à confusion au nom de domaine www.google.cl qui est le moteur de recherche de Google au Chili.) La grande nouveauté du jour est GoogleCL (ligne de commande). Google permet maintenant d’utiliser ses produits (Blogger, Calendar, Youtube, Picasa, Docs, Contacts) en ligne de Commande.

Il est vrai que l’on pouvait tout imaginer avec ce géant de l’Internet. Cette nouveauté me surprend encore une fois après la sortie il y a quelques semaines de Google Webfonts.

Au lieu de se connecter à Google Calendar pour enregistrer par exemple un évènement, il ne vous suffit plus qu’à lancer votre terminal (si vous êtes sous Linux ou MacOSX) ou votre fenêtre MSDOS (sous windows) et taper la commande suivante :

$ google calendar add « Lunch with Jim at noon tomorrow »

L’intérêt d’un tel service est pour l’utilisateur la rapidité de l’utilisation des produits de Google. En effet, comme plusieurs entreprises intègrent déjà Google en tant qu’outil collaboratif, cette nouveauté ne pourra qu’être remercié par les utilisateurs puisque le gain de temps est prouvé.

En revanche, comme l’utilisation est en ligne de commande. Ce qui veut dire accès sur la machine de l’utilisateur. On ne sait pas si Google veut récolter nos données personnelles pour les utiliser à des fins commerciales ?

Toutefois, l’installation de Python sur la machine de l’utilisateur est un prérequis pour utiliser ce service. De plus, les manipulations sont un peu compliqués pour une personne qui n’aime pas trop les lignes de commandes.

Des exemples de scripts sont disponibles sur cette page si vous souhaitez en savoir plus.

le framework « ExtJs » devient « Sencha » et crée Sencha Touch (apps mobile)

Depuis le 14 Juin,  le framework ExtJS très puissant change de nom et devient maintenant Sencha. De ce fait, l’URL est désormais http://www.sencha.com/ . Sencha (dérivé d’un thé vert japonais) est une combinaison de 3 puissants produits Javascript : ExtJS, jQtouch, et RaphaelJs.

De plus, Sencha crée une application pour mobile « Sencha Touch ». Il s’agit plutôt d’application qui ressemble aux applications destinées pour les iPad, iPhone et Android. Plus précisément, les smartphones tactiles.

L’application Sencha touch est construit  entièrement en HTML5 et CSS3. C’est ce point qui m’impressionne. Lorsqu’on voit les captures d’écrans et les démonstrations, le travail réalisé est bluffant.

Géolocalisation, Ajax, des animations et plusieurs autres options sont au menus de cette nouvelle application qui vaut le détour. Je reviendrai vous livrer mes impressions lorsque je l’aurai testé . En attendant, pour faire un détour c’est par ici > http://www.sencha.com

WordPress 3 – les nouveautés (Partie 1)

WordPress vient d’être sorti en version 3 sous le nom de code « Thelonious » le 17 juin 2010. A première vue, je constate que l’interface du back office de la 3 est plus claire que la version 2.

Version 2.9

Version 3.0

Parmi les principales nouveautés, je résumerai comme ceci « WordPress figure maintenant parmi les grands CMS avec cette version 3.0« . En effet, cette version intègre plusieurs possibilités attendues par les utilisateurs habitués, mais aussi facilite d’avantage l’utilisation pour les débutants.

WordPress MU est maintenant intégrée dans WordPress.

WordPress MU (Multi Sites) est une autre version de wordpress qui permet de créer plusieurs blogs dans une seule installation wordpress. Il est maintenant possible grâce à la version 3, avec un seul outil de créer plusieurs blogs / sites dans une seule installation de wordpress . En résumé, une seule installation wordpress permet d’installer plusieurs blogs différents. On n’aura plus besoin d’avoir plusieurs adresses pour gérer 2 ou 3 blogs différents. Ceci ne s’arrête pas là puisque dans ce cas, on pourra aussi créer son réseau social avec wordpress grâce à Buddypress qui jusqu’à maintenant ne fonctionnait que sur Worpress MU.  Un menu supplémentaire Réseau s’ajoute dans le bloc Réglages

Toutefois,  l’affichage de ce menu requiert quelques manipulations au niveau des fichiers.

1. Editer le fichier wp-config.php à la racine du site sur votre serveur avec un éditeur de texte par exemple. Enregistrer et envoyer ce fichier vers le serveur.
2. Rafraichir la page d’administration de WordPress, vous devez maintenant voir le menu Réseau sous le menu Outils.
3. Désactiver toutes les extensions comme demandés par l’installation de WordPress en allant sur Extensions > Extensions, cocher tout, dans la liste déroulante « Actions groupées », choisissez Désactiver puis cliquer sur le bouton « Appliquer« 
4. Retourner dans le menu Réseau du menu Outils. Suivez les instructions.  Il s’agit essentiellement de modifier les fichiers wp-config.php et .htaccess.

L’administrateur peut maintenant choisir son identifiant.

La sécurité est de mise cette fois-ci. On n’est plus limité au fameux identifiant « admin » pour la connexion. Pour cela, il faut tout d’abord créer un utilisateur en lui donnant le statu d’administrateur, avec un couple d’ »identifiant/mot de passe«   dans le menu Utilisateurs > Ajouter. Il faut ensuite supprimer l’utilisateur admin dans le menu Utilisateurs > Utilisateurs, en veillant à ne pas cocher la case « Supprimer les articles et les liens » (sinon tout sera perdu).

La suite (Partie 2).

RGraph : Graphiques réalisés avec du Canvas en HTML5

RGraph est un script javascript qui permet de créer des graphiques avec du HTML5 en utilisant la nouvelle balise <canvas></canvas>.

Parmi les possibilités offertes, on peut trouver :

- Des diagrammes, des camemberts, des graphiques sous forme d’entonnoirs, un gantt, des courbes, un rapporteur, des nuages de points.

Ce script fonctionne avec les navigateurs récents qui supportent le HTML5 et aussi avec Internet Explorer 8.

Nivo Slider – Pareil que jQueryTransition mais en mieux…

Nivo Slider fait partie de ces plugins jQuery qui permet de faire des effets de transitions sympathiques. Récemment j’ai rédigé un billet sur jQueryTransition un autre plugin avec les mêmes fonctionnalités.

9 effets (8 pour jQTrans), possibilité d’ajouter une légende dans l’attribut title de l’image (attribut alt pour jQTrans), une barre permet d’aller directement à une image dans les 2 plugins, pèse 6Ko.

Pour rappel, c’est le fameux Smoothgallery (fait en mootools) qui a ouvert cette voie des sliders en javascripts. Depuis, plusieurs plugins ont été créés de part et d’autre sur Internet.

HTML5/CSS3 – Quasiment tous les browsers sont prêts

Et c’est parti pour les développeurs web, webdesigner,  éditeurs, et les webmaster dans un nouvel apprentissage. C’est une nouvelle aventure qui s’ouvre dès maintenant, on peut le dire puisque presque tous les nouveaux navigateurs en ce moment supportent le HTML5 et les nouvelles propriétés du CSS3.

Le site findmebyip.com a dressé un tableau comparatif des propriétés du CSS3 et les navigateurs qui supportent actuellement ces propriétés. Pas de surprise au niveau des navigateurs de Microsoft. Toutefois, ils nous ont annoncé récemment que la version 9 de Internet Explorer allait supporter le HTML5 et le CSS3.

Les grands gagnants de l’aventure  sont Chrome 4,5 et Safari 4 d’après le tableau.

Ballons et dégradés en pur CSS

Bientôt, on n’aura plus besoin de passer par photoshop pour dessiner des images ou faire des petits dégradés.

Comment cela est possible me diriez vous? et bien tout simplement grâce à la magie de CSS et plus particulièrement de la version 3 qui vient en parrallèle avec le HTML5.

Admirez plutôt le résultat ici : http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html