1. Teambox
2. Basecamp
3. Activecollab
4. DeskAway
5. Teamwork
6. 5pm
7. Wrike
8. Wridea
9. ZOHO projects
10. onstage
11. Springloops
12. Comindwork
13. Central Desktop
14. Ajaxworkspace

Articles similaires :

1. Retrospectiva, outil de gestion de projet Open Source
2. 8 outils pour tester l’accessibilité de votre site
3. Choisir son outil de gestion de projet
4. Outils de recherche web
5. 3 projets Open Source à suivre dont TYPO3

Reprenons un article d’Alex Dawson qui liste les différentes méthodes des FrameWorks CSS pour en analyser les avantages : The Right Frame of Mind: Applying the Lessons of CSS Frameworks.

Un FrameWork, qu’est-ce c’est ?

Un FrameWork CSS est avant tout un système de convention par rapport à la manière de développer une interface. Le code traite de sujets comme le colonnage, la typographie ou encore la navigation. Quels sont les aspects traités par un FrameWork :

• Les comportements navigateurs – bugs IE
• Les composants habituels – formulaires, erreurs…
• Les propriétés récurentes – styles souvent utilisés

Les méthodes

Le reset

Le chargement d’une css de reset (reset.css) permet d’initialiser les styles par défaut des navigateurs. Chaque navigateur ne propose pas les mêmes styles pour l’affichage des listes à puces ou des polices.

La grande majorité des FrameWorks passent par le reset.css. A vous de définir votre propre reset.css ou de reprendre la feuille d’Eric Meyer.

A noter que vous pouvez passer, non pas par un reset.css, mais par un base.css ; solution qui au lieu d’intialiser les styles par défaut puis les redéfinir, les définit en réécrasant les styles initaux directement (a piori gain de poids de CSS)

Les styles de la baseline

Les FrameWorks apportent une configuration pour l’affichage des balises courantes (type : title, del, ins, abbr…). Cette configuration, reprise de zéro, est très fastidieuse et se révèle (à part quelques couleurs) similaire sur tous les projets.

Une fois que vous avez défini un comportement, pour ces balises particulières, qui convient à votre style de développement, regroupez les dans un fichier pour reprendre les styles à chaque projet.

Les styles appliqués sur des id

De ce côté, les FrameWorks CSS sont peu fournis, puisque les styles appliqués par id sont difficilement similaire d’un projet à l’autre. A savoir qu’une id ne peut se déclarer qu’une seule fois dans une page HTML, les styles ne peuvent donc s’appliquer qu’à des éléments uniques de la page.

L’objectif pour définir des styles pouvant être repris dans divers projets est de déterminer la similitude de propriétés entre ces projets; Pour cela, on va se pencher sur des zones comme l’entête, le pied de page, ou les menus de navigation.

Les styles appliqués sur des class

Les styles sur des class sont appliqués par tous les FrameWork CSS ; ce qui semble normal, sinon on se demanderait à quoi ils peuvent bien servir. Grâce à des styles prédéfinis et correctement dissociés, pour appliquer un style à un élément, il suffit de lui donner la class correspondante contenue dans votre feuille de style CSS.

On rappelle que plusieurs class peuvent être associées à un élément.

L’idée à bien retenir est d’avoir des class que vous pouvez réutiliser dans l’ensemble de vos projets. A savoir que la définition de ces classes est aussi variée que le nombre de FrameWork existant ; elle correspond à une logique. Chacun peut avoir la sienne. C’est quand on a bien assimilé ce principe que le grand débat sur la sémantisation des class fait son apparition.

La phase de réutilisation du code

Voici les points à considérer pour une bonne réutilisation de son code CSS

• Utiliser une convention de nommage
• Estimer la probabilité de réutilisation d’une class
• Correction des bugs de navigateur
• Structuration du code dans les feuilles de styles
• Suppression des redondances
• Commenter et documenter le code

Conclusion

Cet article montre les grands principes de construction d’un FrameWork CSS. Le principe majeur est que beaucoup de code peut être réutilisé d’un projet à l’autre. Une fois les propriétés définies, il est important de respecter des règles de nommage et d’organisation afin d’accélérer la déclinaison d’un site mais aussi pour en faciliter la maintenance.

Articles similaires :

1. CSS FrameWorks : les pour et les contre
2. AlloyUI et LiveUI, deux FrameWorks pour interfaces riches
3. Appliquer l’expérience Agile à l’UX
4. YAML, le FrameWork CSS, sort sa version 3.2
5. Easy, un FrameWork CSS/HTML/JavaScript

En effet, malgré toutes les solutions du marché en ce qui concerne le développement rapide de gabarits, la problématque sémantique nécessite quelques tortures de cerveau. La sémantique consiste à donner à ses identifiants et classes CSS des noms assez parlant pour définir des zones de contenu.

Exemples faciles à comprendre : menu pour le menu, contenu pour le contenu, titre principal pour le titre principal. Parfois, c’est quand même plus compliqué.

Primer CSS est une aide à la rédaction des classes pour démarrer la déclinaison des feuilles de styles en CSS. Un fois un gabarit HTML décliné, un petit copier/coller dans Primer CSS et se retrouve disponible une feuille de style minimale avec toutes les classes de la page HTML précédente. Ça permet de gagner un peu de temps.

L’idée est bonne au départ, mais le résultat n’est pas très probant. Le rendu donne les classes principales de la page HTML et pas grand chose de plus. Pour les doubles classes, les héritages, je n’ai pas vraiment vu de résultats. Sûrement pratique pour débuter sa feuille de style mais pas indispensable. Dépend en grande partie de sa façon de coder à mon avis.

Essayer PrimerCSS.

Articles similaires :

1. Construire sa page HTML sans ID ni Class
2. Appliquer les règles apportées par les FrameWorks CSS
3. Writing Style for Print vs. Web
4. CSS FrameWorks : les pour et les contre
5. YAML Debug : Un nouvel outil pour l’intégration web

Les présupposés

A l’école de journalisme de Berkeley et au Knight Digital Media Center, Scot Hacker utilise le moteur de blogs WordPress pour l’édition d’actualité, ainsi que le FrameWork Django pour des sites éditoriaux plus complexes comportant des données plus structurées.

Pourquoi ne pas utiliser Drupal ?

Pour résumer simplement la nature de chacun des systèmes :

• WordPress est CMS simple
• Drupal est un CMS avancé
• Django est un FrameWork.

Un FrameWork est plus bas niveau qu’un CMS. Django est un FrameWork destiné à la création simplifiée d’espaces d’administration de contenus. Son utilisation permet une grande flexibilité pour la création de sites spécifiques.

Scot tente d’expliquer que Django, en tant que FrameWork, n’engage en rien sur la structuration du contenu. Choisir Drupal peut se réveler pertinent à partir du moment où sa structuration de contenu est cohérente par rapport à votre projet.

Orientation objet du code

Etant en Python, Django est par définition optimisé pour l’écriture en objet. Le code de ce FrameWork évite le code redondant et les lignes inutiles, il respecte les principes de développement DRY.

Tous les développeurs les disent, Drupal comporte des soupçons de code orienté objet mais il ne respecte pas les principes dans la totalité de ses fonctions. Drupal 7 apporte des améliorations, mais sans arriver à égaler les FrameWork orienté objet.

Système de gabarits

Django est super clean. Son principe se base sur une séparation stricte entre le système de données et le rendu logique; son utilisation est très simple.

En revanche, Drupal comprend des traitements de données dans le système de gabarit (système de thème et sous-thème), ce qui empêche le partage de code entre différents thèmes.

Ce fonctionnement peut se réveler très souple, mais compliqué à maintenir dans le temps. La copie les fonctions logiques d’un thème à un autre peut être fastidieuse et générer des dysfonctionnements.

Le modèle de données ORM

Les développeurs Django utilisent le Object Relational Mapper, ou ORM, afin d’accéder aux données de leur modèle, ceci sans l’écriture d’une seule requête SQL. Cette pratique permet un réel gain de temps à long terme.

Drupal ne dispose pas de ce genre de fonctionnement ; l’accès aux données se fait de manière « plate ». L’utilisation du CCK permet à des non-développeurs de créer leur propres types de contenu (simple). Souvent les développeurs Drupal discutent pour savoir comment contourner un problème plutôt que de coder directement la fonction nécessaire.

Les performances

Les comparaisons sont difficiles à établir. L’auteur suppose que le système d’appel en base de données par requêtes SQl de Drupal ralentit fortement l’affichage des pages. Il cite Bruno Desthuilliers qui prétend que les performances en local (sans cache) de Drupal sont épouvantables.

L’apprentissage

Tous les sytèmes proposent leur complexité. Le temps d’apprentissage dépend en grande part de ses capacités en développement. Drupal n’est pas plus complexe qu’un autre CMS, son avantage est d’être plus accessible à des débutants.

Le langage

L’utilisation de PHP est souvent une utilisation par défaut du fait de sa grande utilisation dans le web. Pourtant, PHP se révèle assez lent quand les systèmes sont trop complexes (suffisant pour de petits sites).

La réussite de PHP s’est faite sur les débuts du web avec des sites plutôt simples ; avec l’arrivée à maturité du marché, PHP se révèle être vieux et dépassé, il prévoit encore en évolution certains fonctionnements intégrés par les autres langages depuis des lustres.

Le déploiement

L’avantage de Drupal est de pouvoir être deployé sans aucne connaissance en PHP. L’usage de Django est moins commun et les hébergeur proposent moins de solutions dédiées que pour le PHP. Hormi, l’installation à proprement dit, configuration d’Apache et quelques modules à installer, la maintenance est très similaire.

Conclusion

Drupal se situe entre le CMS et la FrameWork ; mieux dimensionné qu’un CMS, moins fexible qu’un FrameWork (Pour moi, un CMS tout simplement). Drupal n’est pas Orienté Objet, il ne propose pas de système de gabarit (MVC) propre, n’a pas d’ORM et ne permet pas de passer par Pyhton (au dessus du PHP) pour les développements.

Voilà ce qui justifie de ne pas utiliser Drupal pour Scot Hacker. Même si un bon développeur peut réaliser de beaux projets avec Drupal , l’avantage certain de Django est de ne pas se soucier de la structuration et de l’architecture de données passées et futures.

Rappelons que la communauté TYPO3 proposera une prochaine version de TYPO3 (version 5.0) basée sur un FrameWork en PHP. TYPO3 présentera donc les avantages du FrameWork avec les désavantages du PHP (en se basant sur cet article). Le FrameWork FLOW3 de TYPO3 est totalement Orienté Objet, il est compatible avec la prochaine version de PHP (PHP6).

Lire Drupal or Django? A Guide for Decision Makers.

Articles similaires :

1. Django CMS, un CMS en Python
2. Comparer et choisir son CMS : Qui est le meilleur ?
3. Comparer et choisir son CMS : la popularité
4. Comparer et choisir son CMS : l’évaluation
5. Comparer et choisir son CMS : 10 choses à savoir avant de choisir un CMS

• 100% gratuit et Open Source
• Très simple et facile d’utilisation
• Une interface pertinente et propre
• Léger
• Modulable et extensible

Rien de très original, Refinery est un CMS plutôt simple sans originalité extrême. Il est codé en Ruby on Rails, l’administration est effectivement propre et fonctionnelle. Petit plus proposé par l’équipe, la possibilité d’envoyer votre PSD pour qu’ils le déclinent spécifiquement pour ce CMS.

Visiter le site de Refinery.

Articles similaires :

1. Les éditeurs de texte, Rich Text Editor (RTE)
2. Comparaison de CMS : quelques conseils
3. Forgeos Commerce
4. Easy, un FrameWork CSS/HTML/JavaScript
5. Apostrophe, le CMS à ouverture facile

Les avantages

• Meilleur alignement, équilibre et dans les espacements des blocs.
• La zone d’affichage est directement définie dès la conception
• Les grilles confèrent l’avantage de la structure en tableaux qui était préférée pour sa fiabilité à la déclinaison en division
• Les grilles proposent une meilleure organisation du code contenu dans les feuilles de style
• Les grilles permettent une moduralité grâce à des largeurs de blocs prédéfinies
• La déclinaison graphique est accélérée
• L’intégration de grilles dans une grille (pour plus de détail) est facilitée

Les désavantages

• Les grilles sont un frein aux mises en page particulières et ambitieuses.
• Les grilles proposent de gérer de multiples blocs de contenus. Dans le cas de pages simples, pourquoi utiliser une grille ?
• Les grilles ne permettent pas nécessairement d’accélérer l’intégration graphique. Elles peuvent justement, dans cetains cas, la ralentir.

La conclusion

Pas besoin de grilles pour un site avec quelques pages et peu de contenu. En revanche dès que cela se complique légérement et que le site est améné à évoluer, pensez à élaborer votre propre grille, où en tous cas celle du site. Si vous êtes dans la déclinaison de gabarits sensés contenir divers types de contenus, alors passez par une grille.

Lire To Grid or Not to Grid: Advantages and Disadvantages

Articles similaires :

1. Fracture et solidarité numériques – les avantages du libre
2. TYPO3 – exemple de site : Screenteam

Les performances d’un site impactent directement la qualité perçue d’une page web, ainsi que le nombre de visites.

• 10 Easy Steps to Great Website Optimization
• Ultimate Guide To Web Optimization (Tips & Best Practices)
• Performance Research, Part 1 / Part 2 / Part 3 / Part 4 / …
• Optimisation des performances serveurs : tampon mémoire et cache serveur en référencement

Optimiser les performances de son site est une pratique durable, elle permet de limiter l’énergie consommée par les serveurs de données.

Articles similaires :

1. Améliorer les performances de typo3
2. Comparer et choisir son CMS : les performances
3. Magento SEO – optimisez le référencement de votre site E-commerce
4. Nicolle Sullivan pour les performances CSS au Velocity 2010
5. Optimisation TYPO3 – cacher les pages avec memcache

Voici les critères majeurs selon cet article :

1. Le support : l’aide en ligne disponible
2. Les add-on, plugins et modules
3. L’ampleur de la communauté et la qualité des appéciations sur la toile
4. La fréquence de visualisation d’un bug majeur (jamais corrigé)
5. L’existence d’un bulletin de sécurité, pour les failles

A la fin de l’article, on retrouve un peu de promotion pour Joomla, Drupal and Zikula ; bien entendu d’autres CMS présentent les mêmes qualités, tout dépend du niveau de sa confidentialité sur la toile et de se qu’on cherche.

De plus, un CMS majeur répond à tout ces critères ; TYPO3 propose : un site officiel avec des tutoriaux dans plusieurs langues, un wiki, des milliers d’extensions documentées, un bugtracker public super actif (en anglais) avec plus de 10 000 bugs et bien sur son équipe sécurité.

Je rajouterai que pour TYPO3, je n’ai encore personnellement jamais vu une seule personne prétendre (après avoir mis le nez dedans) que ce CMS était mal codé. On ne reproche à TYPO3 que sa complexité de configuration et sa longue courbe d’apprentissage.

Articles similaires :

1. Comparer et choisir son CMS : la popularité
2. Comparer et choisir son CMS : les leaders des Content Management System en 2008
3. Comparer et choisir son CMS : Qui est le meilleur ?
4. Comparer et choisir son CMS open source
5. Comparer et choisir son CMS : 10 choses à savoir avant de choisir un CMS

L’interface de ce CMS est épurée, c’est le cas de le dire. Seulement quatre onglets disponibles (plus une page de configuration) : gestion des pages, gestion des fichiers (upload), gestion des thèmes et gestion des sauvegardes.

GetSimple propose un avantage non négligeable pas rapport à la concurrence, c’est qu’il n’utilise pas de base SQL, il stocke les données directement en XML. Il est donc idéal pour mettre en ligne un petit site avec quelques pages de contenu.

Tester GetSimple : user (admin) ; password (demo123).

Articles similaires :

1. Listes de 10 CMS stockant les données en XML
2. Simple Punctual Translation
3. Drupal, ça sent pas bon par Mariya Lysenkova
4. Comprendre les CMS (Content Management System)

Arora is a lightweight cross-platform web browser. It’s free (as in free speech and free beer). Arora runs on Linux, embedded Linux, FreeBSD, Mac OS X, Windows and any other platforms supported by the Qt toolkit.

Quelques fonctionnalités :

• Démarrage rapide
• Gestion des sessions
• Mode privé
• Gestion des moteurs de recherche facilitée
• Plugin ClickToFlash
• Gestion des téléghargements
• WebInspector, un outil pour web developers
• 30 langues

Une alternative à Chrome ou Safari ; un navigateur simple et rapide, c’est peut être ce qu’il nous faut.

Visiter le site du projet arora.

Articles similaires :

1. La communauté WAI-ARIA
2. TYPO3 conférence 2009
3. Retrospectiva, outil de gestion de projet Open Source