Concrete5 cms – intuitif, novateur et puissant

Il s’agit d’un CMS (Système de Gestion de Contenu) créé en 2003 mais que j’ai découvert qu’il y a 2 ans.  2 jeunes développeurs sont à l’initiative de ce projet.

Concrete est un cms différent des autres. L’éditeur du site internet édite son site internet directement en front-office une fois connecté. Il repose sur un système de WYSIWYG aussi bien pour les contenus textuels que pour les blocs de contenus à l’intérieur des pages. L’ajout de pages est un jeu d’enfant puisqu’il s’agit de cliquer un bouton présent dans la barre d’outils et de suivre les instructions présentes à l’écran. L’organisation des contenus au sein de chaque page est également une tâche facile. En effet, il suffit de placer son curseur à l’endroit approprié et de cliquer sur un bouton permettant d’ajouter un bloc. On peut également réorganiser les contenus comme on veut, déplacer un bloc dans un autre. Tout ceci se fait à l’aide d’un système de glisser-déposer. Concrete est un CMS intuitif et novateur. Il est possible de créer ses propres blocs personnalisés. Différents attributs sont proposés pour chaque page. Ces attributs permettent par exemple de modifier facilement le contenu de chaque balise META. Il est possible également de créer un chemin personnalisé pour la réecriture d’URL de chaque page. Cerise sur le gateau, Concrete permet aussi de créer ses propres attributs.

Un backoffice simpliste existe dans ce CMS. Une fonctionnalité intéressante que je trouve importante est la gestion des fichiers. En effet les fichiers peuvent être classés en collections.  La différence avec un fichier classé dans un dossier est qu’il est possible de classer un seul fichier dans plusieurs collections, alors que dans le cas d’un dossier, il faut copier autant de fois que l’on souhaite ce fichier dans les dossiers. Un fichier image peut être édité facilement. Il est possible de créer également des attributs pour les fichiers. L’éditeur d’image en ligne Picnik est relié au gestionnaire de fichiers. Cette relation permet de retoucher une image directement depuis le backoffice sans passer par un logiciel de retouche d’image.

Zend framework  est le moteur qui permet de faire tourner Concrete. Lorsqu’on s’approprie d’un nouveau CMS, on se demande beaucoup de questions, parmi lesquelles : « est-il possible de créer ses propres templates, mais surtout jusqu’où peut-on aller dans le templating de chaque bloc ? ». Concrete a la réponse à toutes ces questions. Pour résumer la puissante fonctionnalité proposée par ce CMS, il est possible de surcharger toutes les classes, modèles, et templates existantes dans Concrete (même le template de connexion au back-office). En effet, un dossier concrete à la racine du site contient tous les controlleurs, modèles et vues de Concrete. Pour surcharger un modèle quelconque, il suffit par exemple de créer un dossier du même type dans le dossier model à la racine du site. Sur ce point, Concrete est un cms très puissant. Comme tout cms qui se respecte, il est possible pour tout développeur connaissant le principe du MVC, d’ajouter des fonctionnalités à concrete.

#jQuerymobile vs #Senchatouch – Quel #framework pour mon application web mobile #HTML5 ?

#jQuerymobile ou #Senchatouch ? Voila 2 principales questions qu’un développeur devra se poser à partir de maintenant lorsque son client lui demande de lui créer une application web mobile avec HTML5.

En effet, comme John Resig l’avait annoncé sur son compte twitter, jQuery mobile est enfin disponible depuis ce Samedi 16 Octobre 2010. jQuerymobile est un framework développé avec jQuery. Il permet de créer des applications web pour les plateformes des téléphones mobile de type smartphones tels que IOS (iPhone), Android, Blackberry, Bada, Windows Phone, Symbian, Palm Web OS et Meego.

Senchatouch est un concurrent très sérieux de jQuerymobile. La différence est que Senchatouch ne fonctionne correctement que sur IOS et Android d’après ce qui est annoncé sur leur site officiel. Il faut payer une licence pour le faire fonctionner correctement. D’un point de vue marketing, jQuery est le gagnant dans l’histoire. Aussi, comme jQuery est plus facile d’accès et plus utilisé que Sencha, ce nouveau framework jquerymobile trouvera facilement sa place.

Mon choix portera évidemment sur jQuerymobile. Ceci parce que ce framework a de l’avenir devant lui. La communauté de développeur qui enrichit jQuery grâce à leurs plugins est très grande. Ceci ne sera pas prêt de s’arrêter avec jQuerymobile.

HTML5 fait maintenant partie du quotidien des développeurs souhaitant créer des applications mobiles. Ce qui est impressionnant, est qu’il est possible actuellement de créer des applications natives avec du HTML5, CSS et Javascript. Un logiciel propriétaire Appcelerator a commencé à se lancer dans l’aventure. Il a été suivi par Phonegap.

Internet Explorer et les nouveaux standards HTML5, CSS3

Il est impossible de faire fonctionner du HTML5 et encore moins avoir des beaux effets CSS3 avec le navigateur Internet Explorer jusqu’à la version 8.

Toutefois, quelques outils et scripts existent et permettent de pallier à ce problème.

Selectivizr

Il s’agit d’un émulateur en Javascript de 19 pseudo-classes, 2 pseudo-élements et tous les attributs en CSS3 pour les version de 6 à 8 de Internet Explorer. Il suffit juste d’inclure le script téléchargeable sur le site Internet de l’éditeur dans l’entête de la page HTML c’est-à-dire entre les balises <head></head> et Selectivizr s’occupe du reste. Une autre librairie Javascript telle que (jQuery, Mootools, Django…) est nécessaire au bon fonctionnement de Selectivizr. En revanche, il n’est plus nécessaire de créer plusieurs feuilles de styles CSS pour les navigateurs non compatibles.

L’appel dans l’entête d’une page se fait tout simplement comme ce bout de code :

Pour que ces élements CSS3 soient bien interprétés, il faut qu’ils soient inclus :

• Soit dans la balise <link />
• Soit avec la propriété @import dans la balise <style></style>

Aussi, la feuille de style doit être située sur le même serveur.

PIE (Progressive Internet Explorer)

PIE est un fichier .htc (behavior) qui permet à Internet Explorer 6 et 7 de reconnaître et d’interpréter les propriétés CSS3 suivantes : border-radius, box-shadow, border-image, rgba et gradients

IE-CSS3 est un autre fichier htc qui permet de faire les mêmes manipulations que PIE mais ne reconnaît que les propriétés suivantes :  border-radius, box-shadow et text-shadow

html5shiv

html5shiv est un script Javascript créé par le développeur Remy Sharp. Ce script permet d’accepter les nouvelles balises du HTML5 avec les navigateurs Internet Explorer de 6 à 8.

Il suffit d’appeler le bout de code suivant dans l’entete de la page HTML :

Internet Explorer UA Style Sheets

Internet Explorer User Agent Style Sheets est une grande liste tabulaire permettant au développeur de mieux comprendre l’interprétation par défaut des balises par les navigateurs Internet Explorer 6 à 8.

Par exemple, une balise <body> possède une marge différente selon les navigateurs :

• Internet Explorer 6-7 – appliquent une marge supérieure et inférieure de 15px, et une marge gauche et droite de 10 pixels.
• Internet Explorer 8-9 et les navigateurs Opera, Webkit, firefox- appliquent une marge  de 8 pixels.

elRTE – L’éditeur de texte enrichi WYSIWYG nouvelle génération

Pourquoi nouvelle génération ? Euh…parce que…ben….c’est parce que j’ai envie de donner ce titre.

Trêve de plaisanterie, j’avais envie de bloguer sur ce nouvel éditeur de texte enrichi WysiWYG qui va bientôt se classer dans le rang des grands tels que tinymce, ckeditor, rtehtmlarea… Cet éditeur s’appelle elRTE.

Il s’agit d’un éditeur enrichi opensource créé avec jQuery et utilise jQuery UI pour les fonctionnalités avancées et supplémentaires.

Comme les grands RTE, en plus d’être rapide et facile à mettre en place, il est possible :

• d’Avoir une barre d’outils personnalisée.
• de Contrôler l’apparence de l’éditeur avec des CSS.
• de créer des extensions.
• de l’utiliser dans plusieurs langues.

L’autre grand atout par rapport aux autres éditeurs RTE est qu’il est accompagné nativement de elFinder, le gestionnaire de fichier opensource créé par l’éditeur même du RTE.  Il est à noter que ce gestionnaire peut être utilisé indépendamment de l’éditeur.

Je noterai quand même un point pour lequel je n’ai pas trop apprécié par rapport aux autres RTE.  Au lieu d’éxecuter ou de remplacer la valeur d’un champ de texte multiligne, cet éditeur remplace la valeur d’une DIV qu’on lui donne en paramètre lors du chargement.

Pour tester >>

Formulaires HTML5 multinavigateurs avec jQuery

Parmi les types de champs classique d’un formulaire HTML4, on a :

• Un type text (une seule ligne), textarea (champ texte multiligne) ou un password
• Un type checkbox ou bouton radio.
• Un bouton de validation submit, de réinitialisation reset ou bouton simple button
• Un bouton avancé button.
• Une liste déroulante select avec ses items option.
• Un champ fichier file.
• Un champ caché hidden.

Read the rest of this entry »

HTML5Reset – HTML5Boilerplate

HTML5 encore lui et toujours lui…Et ca ne fait que commencer. Parmi tous les navigateurs les plus utilisés, seul Internet Explorer 8 n’est pas totalement prêt alors qu’il détient quand même le maximum d’utilisateurs. La Beta de la version 9 de IE devrait sortir d’ici le 15 Septembre 2010 On pourra donc confirmer que HTML5 sera le nouveau standard pour créer des pages web en 2011.

Read the rest of this entry »

CLEditor – Editeur WYSIWYG en Jquery

Il existe des tonnes d’éditeurs WYSIWYG en Jquery. Parmi les meilleurs qui sont TinyMCE, CKeditor (anciennement FCKeditor), d’autres valent le coup de présenter ici. La raison est qu’ils sont fait en Jquery. Ce qui implique qu’il est très facile de les intégrer dans une page puisqu’ils bénéficient de toute la richesse de Jquery.

CLEditor fait partie de ces nouveaux éditeurs WYSIWYG faits avec Jquery. Voici les caractéristiques de cet éditeur :

• Il est possible d’avoir une barre d’outils personnalisée.
• Plusieurs éditeurs peuvent s’intégrer facilement dans une page.
• La taille de l’éditeur peut s’adapter automatiquement à son élement parent (soit la fenêtre du navigateur, soit le bloc de contenu dans lequel il se trouve).
• Des plugins peuvent être créés et ajouter dans la barre d’outils pour avoir une barre d’outil supplémentaire par exemple.
• S’intègre facilement dans une page avec le code suivant :

D’autres éditeurs WYSIWYG existent également en Jquery :

• jwysiwyg
• jhtmlarea
• light weight RTE
• HtmlBox

Mais aussi d’autres éditeurs destinés plutôt à des langages spécifiques telles BBCODE, Wiki :

• Markitup

Firefox 4.0 Beta – les premiers screenshots…

Suite à l’annonce de la sortie de la version de Firefox 4.0 Beta, je me suis pressé de télécharger et de tester la bête. Je vous partage ci-dessous quelques copies d’écran :

La navigation par onglet en haut du navigateur.

Cette nouveauté se trouve dans le menu Tools > Heads Up Display.

Rien à signaler spécialement sur cette nouveauté si ce n’est qu’on a plus d’espace pour travailler correctement

Inspecteur DOM

Un nouvel onglet pour gérer les extensions, thèmes, plugins

Cette amélioration se trouve dans le menu View > Toolbar > Tabs on top .

Ainsi, il est possible dans cet onglet de désinstaller rapidement une extension, d’activer un thème, de supprimer ou d’ajouter un plugin.

Affichage de l’entête HTTP d’une page

Cette nouveauté se trouve dans le menu Tools > Heads Up Display

#CMSMadeSimple sort en version 1.8 – nom de code #Madagascar

Ce 3 juillet 2010, #Madagascar est le nom de code choisi par CMSMadesimple pour la version 1.8 de leur Outil de gestion de contenu après avoir refondu leur site Internet le 28 juin 2010. Ca me fait plaisir de voir qu’ils ont choisi #Madagascar comme nom de code. Cependant je n’arrive pas à trouver l’origine de ce choix.

CMSMadeSimple a la particularité comme son nom l’indique d’être simple d’utilisation mais aussi simple à maintenir. De nouvelles fonctionnalités ont été ajoutées, des améliorations ont été apportées pour rendre le CMS plus rapide et plus léger et des bugs signalés récemment résolus.

Nouvelles balises {cms_stylesheet} et {content_module}

Principalement, la fonction {stylesheet} remplacée récemment par {smarty_stylesheet} a été finalement remplacée par {cms_stylesheet}.

Pour info, cette balise lie toutes les feuilles de style attachées au gabarit. Si elle est oubliée, la page apparaîtra sans style. Pour utiliser des feuilles de style externes, l’utilisation de <link/> standard dans l’en-tête est également permise.

Voici donc la nouvelle utilisation dans un template :

Il ne s’agit pas que d’un remplacement de fonction ou de dénomination. En effet, cette nouvelle fonction prend tout le contenu des feuilles de styles. Elle les envoie à Smarty, qui est le moteur de template de ce CMS. Smarty met en cache ensuite ces feuilles de styles pour rendre l’affichage plus rapide et envoie le tout vers le navigateur dans un fichier unique.

La balise {content_module} est également une grande amélioration ajoutée à ce CMS. En effet, jusqu’alors il était impossible sans extension de mettre en forme un même module différemment sur 2 pages différentes.

Copier-Coller une page

Il est maintenant facile et possible de copier une structure d’une page et de coller dans l’arborescence du site comme ce que font les grands CMS actuels.

De #Typolight vers #Contao : une expérience riche…

Depuis que je me suis intéressé à #Contao (ex-#Typolight), je constate que ce CMS ne cesse d’évoluer et mes découvertes me font dire qu’il est vraiment très puissant.

J’ai un site Internet qui tourne avec ce CMS (Typolight 2.8.4) depuis quelques mois et voici les étapes pour la mise à jour vers Contao 2.9.
Il faut tout d’abord télécharger l’archive contao-2.9.0.zip sur cette page http://www.contao.org/download.html.

Sur le serveur du projet pour lequel Typolight 2.8 est installé, je renomme les fichiers et dossiers suivants pour éviter qu’ils soient écrasés par les fichiers de Contao :

• system/config/dcaconfig.php est renommé en system/config/___dcaconfig.php
• system/config/localconfig.php renommé en system/config/___localconfig.php
• system/config/langconfig.php renommé en system/config/___langconfig.php
• templates/ renommé en ___templates/
• tl_files/ renommé en ___tl_files

J’envoies ensuite tous les fichiers extraits de l’archive téléchargée sur le serveur en écrasant tous les fichiers.

En allant sur http://votrenomdedomaine.fr/typolight/install, je suis  redirigé automatiquement sur http://votrenomdedomaine.fr/contao/install

L’outil d’installation me demande de saisir le mot de passe, je saisis alors contao au lieu de typolight.

Les étapes suivantes sont inchangées : changer directement le mot de passe par défaut, générer la clé de cryptage, information de connexion à la base de données.

Après cette étape, un bouton « Run version 2.9 Update » est apparu. A la page suivante, Contao m’informe que de nouvelles colonnes vont être ajoutées sur les tables suivantes : layout, member, module, user, article, content et des colonnes vont être supprimées sur les tables : calendar, faq_category,  layout, news_archive

La mise à jour de la base de données s’effectue correctement. Contao a conservé l’utilisateur administrateur (ce qui est logique d’ailleurs, sinon je suis un peu dans la m****)

Je remets les noms des fichiers que j’ai renommé précédemment. Ceci afin que les templates et configurations personnalisées puissent être conservés.

Je me connecte en front et en backend, Tout se passe très bien. Contao est bien en version 2.9.

Ddans le BE pour voir ce qu’il y a dans le menu thème , je clique sur ce menu

Un thème « Contao Open Source CMS » par défaut a été créé. Il regroupe les éléments permettant de personnaliser l’affichage du frontend général. 7 boutons suivants : Editer, Supprimer, détail, Editer la feuille de style, Editer les fichiers de templates, Editer les modèles de présentation, Exporter le thème se situent à droite du thème pour permettre d’intéragir sur le thème. Il est bien entendu possible de créer un autre thème et aussi d’importer un thème au format .cto.

Je vous raconterai la suite de cette expérience bientôt…