Passionnant le quotidien des intégrateurs HTML et CSS qui chaque jour s’aventurent sur le terrain du HTML5 et du CSS3. Comment je fais pour la compatibilité navigateur, fournir du contenu accessible pour l’ensemble de mes utilisateurs ou laisser sur le bord de la route les victimes de la politique de Microsoft ?

Des solutions alternatives pullulent sur le web, certaines sont alléchantes mais peuvent demander des ressources humaine pour la mise en place ou bien des ressources matérielles pour garantir le temps d’affichage de ses pages. Chaque cas est unique, c’est la remise en cause de sa manière de travailler qui évolue, sa manière d’aborder la création de sites.

Voici quelques ressources pour passer à HTML5 en respectant la compatibilité multi-navigateurs.

• HTML5 ★ Boilerplate
• HTML5 Reset
• HTML5 form
• 28 HTML5 Features, Tips, and Techniques you Must Know

Articles similaires :

1. Les outils indispensables pour le HTML5 et le CSS3
2. HTML5 et la vidéo, Open Standard Media Player
3. Exemples de structure HTML5
4. Humble Finance: graphiques dynamiques avec HTML5
5. Le futur avec HTML5 par Bruce Lawson

Les FrameWorks

Le principe d’un FrameWork sous WordPress et de fournir un gabarit de base pour le rendu des pages ainsi que quelques fonctionnalités d’administration pour la gestion des zones d’ajout de widget, par exemple.

• Utiliser un Framework WordPress
• Comparisons Between Most Popular Theme Frameworks

Personnellement, je me suis lancé sur le FrameWork Hybrid pour la DTD est en XHTML strict, le nombre de hooks, les zones widgetisables ainsi que le nombre de gabarits de pages spécifiques. Noter qu’Hybrid fonctionne très bien avec les custom post.

Les custom post

Les custom post peuvent être assimilés au concept de fiches. Si les billets de blogs sont associés à des articles datés ; avec un titre, un champ de date et une description ; on peut très bien imaginer éditer des informations sur des albums musicaux ou encore des nouvelles recettes de cuisine.

Dans le cas de fiches spéciales, des champs supplémentaires peuvent être nécessaires : les ingrédients, l’auteur, les images, la région d’origine… Imaginons que l’on veuille, sur le même site, présenter des ustensiles indispensables, il faudra créer un nouveau type de fiche avec des champs différents.

Les custom post permettent, avec très peu de connaissances en programmation, de définir de nouveaux types de fiches à chaque fois que nécessaire.

Pour comprendre les custom post :

• Create your first WordPress Custom Post Type
• Showing custom post types on your home/blog page
• Create A Professional Portfolio Using WordPress 3.0 Custom Post Types
• Everything You Need to Know About WordPress Custom Post Types
• 12 Awesome Examples of Custom Post Types
• Introduction à WordPress 3 : custom post type et custom taxonomy

Je vous laisse expérimenter par vous même.

Articles similaires :

1. Drupal et WordPress : deux logiques proches, mais différentes
2. YAML, le FrameWork CSS, sort sa version 3.2
3. P2, un thème WordPress pour le Micro Blogging
4. Instant Blueprint, FrameWork CSS express
5. Des billets WordPress dans du TYPO3

Jeffrey, responsable de la documentation, reste très synthétique en ce qui concerne la technologie Drupal, Kian, le responsable marketing/communication, propose un discours plus complet sur les ambitions de TYPO3.

Je ne vais pas proposer de traduction complète de cet article et me pencher sur quelques questions qui me semblent plus dignes d’intérêt.

Marché visé

Drupal défend son placement sur le marché du web social. Sa communauté est très active, elle est bien plus importante que celle de TYPO3.

TYPO3 répète sont placement sur le marché « entreprise ». Si sa communauté semble moins active en volume, il faut noter que cette technologie est plus adaptée aux agences qu’aux particuliers et aux freelances ; ce qui justifie les écart de volume de visites et de contributions.

Le modèle économique

Oui, Drupal et totalement Open Source et sous license GPL. Cependant Kian fait remarquer que les évolutions de Drupal servent l’entreprise Aquia dans sa valorisation et dans son gain de part de marchés. TYPO3 est une communauté totalement libre qui ne gagne pas d’argent. Pour le moment les différents mécènes de TYPO3 ne pratiquent pas de lobbying en faveur de cette technologie.

Position par rapport à la concurrence

On compare souvent les technologies comme Drupal, TYPO3, WordPress, Django ou encore Ruby. Jeffrey pense que les FrameWorks comme Django et Ruby sont de très bonnes solutions pour les « systèmes ». Cependant pour l’utilisateur final et l’affichage Front-end autant passer (coupler) par des CMS plutôt que de tout recoder.

Kian va tout à fait dans ce sens en prenant l’exemple du couplage entre TYPO3 et RedHot. La crise propose une forte possibilité de croissance pour le libre. Drupal monte en puissance dans le domaine du web social. TYPO3 doit confirmer sa position dans celui de l’entreprise.

Cette traduction est très succincte et soumise à un niveau d’allemand très moyen. Je vous laisse consulter l’ensemble de l’article par vous même.

Lire TYPO3 vs Drupal – Wettkampf über 20 Runden.

Articles similaires :

1. TYPO3 et Drupal, les refontes
2. TYPO3 vs Drupal, la bataille des CMS
3. Open CMS Alliance : Joomla, Drupal, TYPO3 et eZ Publish
4. Drupal, le détestable
5. Obama choisit Drupal pour la Maison Blanche !

Suite à un appel d’offre manqué, c’est une petite société qui a eu à charge de développer cette vitrine sur notre beau pays. Malheureusement, le CMS Drupal fait les frais des mauvais choix réalisés en amont : France.fr change d’hébergeur web et choisit Typhon

Le CMS (Content management system) est un outil servant à créer des sites internet. Oui, mais voilà: Drupal est un CMS open-source (logiciel libre), qui ne bénéficie pas de la garantie d’une société clairement identifiée, et qui peut inclure énormément de modules indépendants qui doivent pouvoir dialoguer parfaitement sous peine de bugs à répétition.

Comme vous pouvez le lire, c’est même le logiciel libre qui s’en prend plein la face. Les logiciels propriétaires seraient évidemment plus performants, c’est bien connu.

Notons donc un manque flagrant de la France en terme de formation. Dans ce cas nous voyons un journaliste écrivant des conclusions hâtives sur une sujet qu’il connait mal et un déficit de développeurs Open Source afin de coder des sites en Drupal ou autres CMS capables de remplir la mission demandée : Recruter des développeurs, ce qui a changé.

Si je devais retenir une caractéristique de notre pays, c’est que le développeur est une espèce rare en voie de disparition. La formation en France ne pousse pas forcément les jeunes diplômés vers les structures en croissance et les startups. La voie royale pour le jeune développeur est la société de service informatique (SSII).

Il faut encore le répéter mais il n’y a pas de mauvais outils. Seb Magniant parle de quinquennat au bord du « naufrage digital » ? et Arnaud Dassier de Président low tech.

Articles similaires :

1. 48 astuces pour Drupal par Lullabot
2. Obama choisit Drupal pour la Maison Blanche !
3. Fabriquer en France : valoriser le made in France
4. Drupal 7 et l’accessibilité
5. Drupal, le détestable

Articles similaires :

1. TYPO3 5.0 est arrivé en release
2. FLOW3 1.0.0 alpha 10
3. TYPO3 Phoenix (v5) et le TypoScript II
4. Université TYPO3 vendredi 4 juillet 2008
5. Robert Lemke et FLOW3

Possibilité de définir un fichier contenant la règles de sécurité du site. Un administrateur peut ainsi appeler des méthodes pour définir ses propres règles de sécurité.

Lire FLOW3 1.0.0 alpha 10 Release Notes.

Articles similaires :

1. osCommerce version 3.0 Alpha 5
2. TYPO3 : documentation en ligne pour découvrir le FLOW3
3. TYPO3 : suivre l’actualité de FLOW3
4. TYPO3 5.0 est arrivé en release
5. TYPO3, démo du sprint 2 de Phoenix (TYPO3 V5)

Mon objectif n’est pas d’évoquer le fond de l’affaire mais de mettre quelques liens la concernant. En effet, les journaux n’hésitent pas à tweeter quelques dépêches pour générer un peu de trafic. Dans ce brouhaha national, l’information est difficile à retrouver.

Suite aux révélations de mediapart, le gouvernement à décidé de jouer la carte des ragots et d’agiter la manipulation rampante de groupuscules gauchistes.

C’est la liberté d’expression sur internet qui est menacée, ou la liberté d’expression tout court, en fin de compte. Alors passer un peu de temps à voir ces divers liens :

• « Eric Woerth est surtout un dommage collatéral de l’affaire Bettencourt » – lemonde
• Affaire Woerth : Martine Aubry demande «la vérité» – partie socialiste
• Affaire Woerth : comment on se rend service dans le gotha – rue89
• Ce que cache encore l’affaire des cigares de Christian Blanc – l’express
• Le haras qui rit de Florence Woerth – l’express < Important
• Sarkozy dénonce les méthodes de Plenel – le figaro

Donc, oui ragots, il y a ; articles inutiles pour faire de l’audience, il y a ; mais affaire, il y a, aussi.

Articles similaires :

1. Introduction à la Gestion de Projet avec Eric Di Pol
2. APPEL HADOPI : «black-out» du Net français
3. Clavier français amélioré avec kbdfr dk

Sur le T3Blog, réalisé par la TYPO3 Marketing Task Force, on trouve de nombreuses références de sites propulsés par la technologie TYPO3.

Sur le site, on trouve différentes catégories :

• Internet
• Extranet
• Intranet
• Application
• Microsite

Pour postuler, il faut respecter les règles suivantes :

1. The company generates at least 500 million EUR in global revenue
2. The company is listed on the BrandFinance® Global 500
3. The company employs more than 5,000 employees worldwide
4. The company is of recognizable global recognition (well-known brand)
5. The company uses TYPO3 for a highly business critical large application

Durs comme prérequis ? Je rappelle les expériences douloureuses de portefolios dans lesquelles on trouve à boire et à manger ; qui ne montrent pas vraiment les possibilités du CMS sous son meilleur jour.

Cela est d’autant plus logique que TYPO3 essaye de se présenter comme un CMS dédié aux (grandes) entreprises. T3Blog, un blog de marketeux, permettant aux décideurs d’avoir un aperçu des sociétés ayant optées pour TYPO3.

Voir T3Blog

Articles similaires :

1. Blog TYPO3 de l’année 2007
2. TYPO3 : éditer des actualités
3. Le macaron du meilleur blog TYPO3 de l’année est attribué a…
4. Le meilleur Blog TYPO3 2008 ?
5. Les références du FrameWork CSS Markercss

BIG BAG BIG BOOM – the new wall-painted animation by BLU from blu on Vimeo.

Articles similaires :

1. The Mystery of Flying Kicks
2. Suddenly, last summer
3. Casser des oeufs en vidéo
4. L’histoire des jeux videos
5. 555 KubiK | facade projection

On peut choisir de ne pas utiliser de règles CSS3, d’en exploiter certaines ou encore de se servir de toutes mais de ne pas prendre en compte l’ensemble de navigateurs. En effet, les propriétés ne sont pas encore tout à fait implémentées dans les navigateurs et chacun utilise ce qu’on nomme des préfixes pour les produire : -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;

Le problème fondamental reste garantir un code compatible dans le temps (1 an, 2 ans, 5 ans…). Comment écrire un code simple, court, lisible, facilement modifiable et compatible au court du temps avec les avancées probables des navigateurs ?

Modernizr

La première solution est d’utiliser Modernizr. Ce script teste la compatibilité du navigateur de l’utilisateur avec les règles CSS3 ou autres. En fonction des capacités du navigateur, le script ajoute un préfixe (no-) sur la classe appliquée dans le code CSS.

Ainsi, on déclare dans un sélecteur le code pour les navigateurs qui supportent une propriété, on déclare dans un autre sélecteur le code préfixe (avec le préfixe no-) pour les navigateurs qui ne supporte pas la propriété.

Sans appeler de feuilles particulières, Modernizr va modifier le code de la page en HTML pour que le style adapté aux capacités du navigateur s’affiche.

Enorme avantage de ne pas cibler un navigateur mais bien une propriété en particulier, avec son alternative.

Lire Taking Advantage of HTML5 and CSS3 with Modernizr.

eCSStender

Autre couche JavaScript sur l’interprétation des feuilles de style, eCSStender script qui permet de ne plus jongler les propriétés préfixées par moteur de rendu (-moz, -webkit, -o, -khtml…).

Souvent le travailleur du web imagine les utilisateurs comme lui, souvent exactement comme lui : un mac avec Safari et Firefox. Sauf que les moteurs de rendus ne sont pas au nombre de 2 mais sont plus diversifiées que ça.

Donc quand on déclare une propriété comme : -webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 5px;-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 5px;.

On est très content, c’est beau, sauf que quand on nous demande de l’appliquer à l’ensemble des navigateurs, ça peut devenir : border-radius: 10px 5px;-moz-border-radius: 10px 5px;-webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 5px;-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 5px;-o-border-radius: 10px 5px;-khtml-border-top-left-radius: 10px;-khtml-border-top-right-radius: 5px;-khtml-border-bottom-right-radius: 10px;-khtml-border-bottom-left-radius: 5px;

Appliquer des petits coins arrondis demandent donc d’appliquer des hacks spécifiques à chaque navigateur. Cette façon de procéder allonge le code mais augmente, de même, le nombre d’erreurs possibles.

Script eCSStender vient à mon aide. On disait que quand j’écrivais une propriété du type : border-radius: 5px; ; toi tu t’arrangeais pour sortir au navigateur ce qu’il comprend ; le machin avec les préfixes.

Comme ça moi, j’écris du CSS3 de manière idéale, mon code est propre, court et en plus si jamais, un jour, un nouveau moteur sort avec son préfixe à lui, j’ai juste à mettre à jour mon fichier .js.

Lire Stop Forking with CSS3.

Conclusion

Certes Modernizr et eCSStender sont deux scripts JavaScript, leur utilisation augmente le poids de la page à télécharger. Cependant, leur utilisation permet, d’une part, d’écrire un code spécifique (dégradé) pour les navigateurs qui n’ont pas implémentés certaines propriétés et, d’autre part, de ne plus surcharger son code avec des spécificités particulières à chaque navigateur.

Articles similaires :

1. Les outils indispensables pour le HTML5 et le CSS3
2. eCSStender : une librarie JavaScript pour prendre le contrôle de vos CSS
3. Video for Everybody!, lecture de vidéos avec HTML5 ou pas
4. Hacker IE, forcer l’interprétation CSS3
5. Songbird, bientôt la RC2