Pour ceux qui ne suivent pas la vie trépidante de Drupal, sachez que la version 7 du CMS est en attente. Que des trucs géniaux comme d’habitude, le monde va changer, les enfants vont manger à leur faim, les armes serviront de vases pour des milliers de fleurs.

Sinon, à part ça. On me dit dans l’oreillette, tout le monde n’est pas forcément d’accord, mais il est impossible de passer d’une version 6 de Drupal à une version 7. Ok d’accord je ne cherche pas à comprendre, c’est comme ça.

Si on veut faire l’effort de passer d’un 6 à un 7, on visite cette page : Convertir un thème 6.x vers une version 7.x.

Pour finir est-ce que quelqu’un sait ce que peut bien vouloir signifier qu’un thème est associé au core de Drupal 7 ? Quel intérêt d’utiliser un thème en 960, ou pas ?

Articles similaires :

1. Drupal et WordPress : deux logiques proches, mais différentes
2. P2, un thème WordPress pour le Micro Blogging
3. Drupal 7 et l’accessibilité
4. Comparer et choisir son CMS : Drupal et Django par Scot Hacker
5. Drupal, le détestable

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. A Custom ExtJS backend for TYPO3
2. Drupal et WordPress : deux logiques proches, mais différentes
3. P2, un thème WordPress pour le Micro Blogging
4. YAML, le FrameWork CSS, sort sa version 3.2
5. Instant Blueprint, FrameWork CSS express

Avec nth-of-type, par exemple, je peux dire, vous, mes petits paragraphes que j’aime ; quand vous êtes en premier vous avez une lettrine, tous les nombres impairs vous êtes gris et puis, tiens toi, le sixième, bah tu passes à la ligne.

Dans le monde de la CSS2, les petits paragraphes devaient se voir marquer d’une étiquette pour lui appliquer des styles. Avec le CSS3, on rentre dans un procédé plus mathématique, calculatoire. Le premier avantage est de simplifier l’écriture du code HTML en éliminant les class désignées pour le style uniquement ; le deuxième avantage est de pouvoir appliquer des feuilles de styles dédiées en fonction d’un navigateur, d’une taille d’écran… sans que cela soit le parcours du combattant pour s’y retrouver dans ses class.

Un matin CSS Wizardry s’est levé et s’est dit qu’avec nth-of-type combiné avec des body>div (première division après la balise body), il pouvait se passer des identifiants pour les divisions. En analysant sa réalisation, il a pu en tirer les avantages et les désavantages.

Les avantages

1. Moins de code dans la page HTML
2. Favorise la structuration du code HTML
3. Favorise la sémantisation

Les désavantages

1. La syntaxe est difficile à appréhender
2. Peut pas bouger une zone, sinon le style ne s’applique plus
3. La feuille CSS décrit la structure documentaire, alors qu’elle ne doit décrire que le style
4. Un élément à position variable, genre image, ne pourra pas être pris en compte
5. Où est défini ce style dans mon CSS, je trouve pas où c’est ?
6. Jenga time, je modifie une balise et tout le code est à refaire

Donc, sympa la CSS3, vraiment super puissant, en revanche les balises ne sont pas des positions, il faut les appeler par leurs noms. Si les sélecteurs sont utiles pour le contenu, ils se révèlent moins indispensables pour les contenants.

Les sélecteurs permettent par exemple de pointer des lignes ou des cellules d’un tableau, mais pas de pointer le tableau, car celui-ci peut être déplacé dans divers types de contenants.

Lire Building sites without using IDs or classes.

Articles similaires :

1. Afficher le nom de la page en titre
2. Easy, un FrameWork CSS/HTML/JavaScript
3. Ne plus utiliser page.config.no_cache = 1 ; préférer TCEMAIN.clearCacheCmd = all
4. Pas de plaisir sans travail dans les réseaux sociaux d’entreprise
5. Plugin jsPlumb, diagrammes avec éléments HTML liés

Le principe d’Instant Blueprint se décline en 5 points :

1. Indiquer le nom du projet
2. Sélectionner le DOCTYPE et la librairie JavaScript
3. Indiquer tous les tags d’id désirés
4. Choisir une extension pour le fichier index
5. Et euh… soumettre le formulaire

Voilà, un zip avec tout dedans, on gagne dix minutes pour un truc qu’on aurait pu faire à la main. Pratique, pas pratique ; je ne sais pas. Toujours bon à prendre en tous les cas.

Voir Instant Blueprint.

Articles similaires :

1. Easy, un FrameWork CSS/HTML/JavaScript
2. EZ-CSS, FrameWork CSS qui peut le moins peut le plus
3. OpenFaces, un FrameWork ajax
4. CSS FrameWorks : les pour et les contre
5. YAML, le FrameWork CSS, sort sa version 3.2

Le principe est de copier/coller des blocs prêt à l’emploi dans des containers. J’ai une zone de contenu que je veux diviser en 3, je copie le code pour 3 colonnes et je le colle dans mon container et ainsi de suite à l’infini.

Le fichier CSS ne comprend que le code pour diviser une zone en x colonnes et les faire flotter dans le bon ordre. L’auteur a ajouté quelques lignes pour la compatibilité multi-navigateurs (IE) et le tour est joué.

EZ-CSS se montre très pratique pour la division rapide des zones de contenus de sa page. Justement, EZ-CSS propose une version encore plus basique spécialement dédiée au prototypage.

C’est Jean-Paul du marketing que vous pouvez impressionner avec un site plus vrai que nature. Enfin, faites gaffe quand même, il va croire que le boulot est terminé.

EZ-CSS est un FrameWork a montrer aux quarantenaires développant encore en tableau et à utiliser pour les mises en page à réaliser rapidement.

Voir EZ-CSS – FrameWork CSS.

Articles similaires :

1. Easy, un FrameWork CSS/HTML/JavaScript
2. TYPO3 : un FrameWork pour TemplaVoila
3. WordPress, FrameWork et custom post
4. Instant Blueprint, FrameWork CSS express
5. OpenFaces, un FrameWork ajax

Un FrameWork CSS est constitué de feuilles CSS contenant des classes prédéfinies. Leur code permet de décliner un graphiste rapidement en respectant les règles de mise en page web : grilles, définition typographique…

Liste de FrameWorks CSS

• Blueprint CSS
• Elements
• YUI 2 : Grids CSS
• Logic CSS
• Elastic CSS

Les avantages

• Conformité multi-navigateurs
• Développement accéléré
• Cohérence
• Feuilles propres

Les désavantages

• Présence de code inutile
• Manque de liberté
• Incohérence sémantique des classes CSS

Les FrameWorks CSS, pour tout dire, ça dépend. Il vaut mieux avoir le sien ou en trouver un qui correspond à sa façon de coder.

Lire CSS Frameworks: Pros and Cons.

Articles similaires :

1. PrimerCSS, obtenir une feuille de style CSS pour démarrer
2. AlloyUI et LiveUI, deux FrameWorks pour interfaces riches
3. Appliquer les règles apportées par les FrameWorks CSS
4. Construire sa page HTML sans ID ni Class
5. CSS FrameWork : Scaffold pour le développement rapide

La structure des fichiers CSS

Deux fichiers de base

Le coeur du FrameWork est maintenant constitué de deux fichiers principaux :

• base.css – reset + structure
• iehacks.css – compatibilité de IE 5.x jusqu’à 7.0

Les performances

Le fichier print_base.css (pour les feuilles d’impression) a été inséré dans base.css. Ce choix permet de réduire le nombre de requêtes HTTP en appelant désormais un seul fichier.

Le poids du fichier a, de même, été réduit en factorisant un nombre important de comportement. 600 bytes (approx. 10%) ont été gagnés, ce qui fait de YAML 3.2, un des FrameWork les plus léger du marché ; surtout si la CSS iehacks.css n’est chargé que pour les versions de IE inférieure à la 7.0.

Les nouveautés

La flexible grid component (Structure) permet plusieur types de divisions : 20%, 40%, 60% et 80%. Les hauteurs de différentes divisions (div) peuvent être forcées à la même taille, grâce au plugin « SyncHeight » pour jQuery.

Le Kit de construction de formulaires a été amélioré ; l’insertion de la classe parente .yform permet de surcharger les formulaires insérés par des extensions par exemple.

Une nouvelle méthode pour les liens d’évitement a été conçu, elle permet une meilleure intégration avec le FrameWork.

Conclusion

La version 3.2 arrive 9 mois après la version 3.1 ; ceci est dû à la mise en ligne de nouveaux navigateurs (IE8) qui demande du temps pour la vérification de la compatibilité des avancées. Cette dernière mise à jour marque un pas important ; elle améliore la gestion du fonctionnement des différents modules du FrameWork et réalise une meilleure intégration l’accessibilité.

Lire YAML 3.2 Release Notes.

Articles similaires :

1. YAML -Yet Another Multicolumn Layout : un framework CSS pour TYPO3
2. YAML Debug : Un nouvel outil pour l’intégration web
3. CSS FrameWork : Scaffold pour le développement rapide
4. TYPO3 : un FrameWork pour TemplaVoila
5. Instant Blueprint, FrameWork CSS express