css 4 design » Framework

CodeIgniter : un framework PHP simple et robuste

Bruno Bichet — Mon, 20 Sep 2010 11:34:52 +0000

CodeIgniter est un framework PHP robuste comme Zend Framework ou Symfony mais bien plus léger. Il vous aidera à construire votre site web avec le modèle MVC (Modèle, Vue et Contrôleur) en améliorant le temps de développement de vos projets grâce à un ensemble complet de bibliothèques simple d’utilisation.

Tutoriel CodeIgniter

Même si le guide de l’utilisateur disponible sur le site de l’éditeur est très bien fait, voici un tutoriel en plusieurs parties pour développer un CMS (Content Management System) rédigé par Ange Chierchia (@nighcrawl) :

Code Igniter en français

codeigniter.fr est le miroir francophone de codeigniter.com. Vous y trouverez notamment le guide de l’utilisateur avec la plupart des rubriques traduites en français ainsi que des tutoriels. Si cela ne suffit pas, le forum est à votre disposition.

Question : «quel site francophone développé avec CodeIgniter fait bonheur des intégrateurs web ?»

Réponse : Alsacréations — Et oui, depuis sa version 3, le site de la communauté d’apprentissage pour les standards du web est développé avec CodeIgniter !

Articles sur le même sujet

HTML5 Boilerplate Thematic — Un «WordPress Theme Framework» complet

Bruno Bichet — Thu, 02 Sep 2010 18:57:20 +0000

Thematic-html5boilerplate est un un thème WordPress basé sur le thème par défaut Twenty Ten présent dans l’installation de WordPress depuis la version 3.0, le framework Thematic et HTML5Boilerplate qui est est lui-même un template composé d’un ensemble cohérent de fichiers HTML, Javascript et CSS. Son but ? Rendre votre blog prêt pour HTML5 et CSS3, le tout avec des performances améliorées.

A ce propos, j’ai eu l’occasion d’utiliser Thematic sur ce blog il y a plusieurs mois et j’avais trouvé que le framework avait une marge de progression en terme de performance non nulle, mais c’est peut-être de l’histoire ancienne. D’ailleurs, il semble que seules certaines parties de Thematic ont été incluses dans Thematic-html5boilerplate.

Bref, avec autant de qualités sur le papier, il me tarde de remettre les mains dans le cambouis pour travailler sur un nouveau thème !

Articles sur le même sujet

Performances web avec WordPress : méfiez-vous des « Themes Frameworks »

Bruno Bichet — Tue, 05 Jan 2010 09:32:03 +0000

Dans la famille des WordPress Themes Frameworks, Thematic se présente comme un framework pour WordPress permettant de créer des thèmes optimisés SEO (Search Engine Optimization) à l’attention des blogueurs débutants ou des professionnels du développement. Je l’ai utilisé sur ce blog en attendant de créer 942, mon nouveau thème WordPress à partir d’une toute nouvelle charte graphique. J’ai laissé Thematic en l’état pendant plusieurs mois sans ajouter d’images, même pour le logo. Si l’extrême sobriété de Thematic incite à penser que sous le capot tout a été optimisé pour assurer un affichage rapide, sachez qu’il n’en est rien.

J’avais déjà un doute en regardant l’organisation des différents fichiers composant le thème : sous prétexte de généricité, on trouve des appels de fonctions pour tout et n’importe quoi. Comme je n’aime pas vraiment construire sur des fondations douteuses (ou que je maitrise mal), je suis parti d’une page blanche en ce qui concerne le marquage HTML et le fichier functions.php. Pour les CSS, je me suis laissé tenté par Boks pour le calcul de la grille de mise en page.

Dans la foulée, j’ai modifié la structure de mes permaliens, supprimé le répertoire /blog, et je suis allé prévenir Google de toutes ces modifications via Google Webmaster Tools.

WTF! (WordPress Theme Framework)

Amélioration notable des performances : les pages se chargent beaucoup plus rapidement.

Quelle ne fut pas ma surprise en voyant que les pages de mon site se chargeaient en 5 à 10 secondes avant le changement de thème pour passer à moins de 2 secondes ensuite, alors que j’ai ajouté des miniatures au début des billets en page d’accueil et des visuels de manière plus systématique dans les articles !

Statistiques de l’exploration

Voici quelques captures d’écran de la page Diagnostic de Google Webmaster Tools concernant les 90 derniers jours qui englobent les données récoltées avec le thème Thematic (jusqu’à mi-novembre) et le nouveau thème pour la suite. L’absence de données autour du 11 novembre s’explique aisément : j’ai oublié d’insérer le script Google Analytics dans mon thème sur cette période ^_^v

Hasard du calendrier ou relation de cause à effet, le volume global des pages explorées augmente à partir de mi-novembre.

Nombre de pages explorées par jour

Mettez votre blog au régime parce qu’il le vaut bien ;)

Nombre de Kilo-octets téléchargés par jour.

Désengorgez le réseau avec des pages profilées comme des fusés !

Temps de téléchargement d'une page en millisecondes.

Le temps, c’est de l’ergonomie

Qu’il s’agisse d’optimiser ses fichiers CSS, sa base de données, ses fichiers HTML ou Javascript, les performances web ont fait couler beaucoup de pixels en 2009 et nul doute que ça continuera en 2010.

L’ami Google, toujours prompt à encourager chez les autres les pratiques qui vont dans le sens de ses affaires, envisage de prendre en compte le temps de chargement pour le classement d’une page web dans les SERP’s.

Or, le choix d’un thème pour WordPress se limite souvent au nombre de colonnes ou à des éléments bassement matériel comme la couleur du fond ou la présence de coins arrondis ^^

J’espère que ce billet vous donnera envie d’améliorer les performances de votre site ou de votre blog pour offrir une meilleure expérience de navigation à vos lecteurs, parce qu’ils le valent bien !

Articles sur le même sujet

WordPress, HTML5, CSS3, jQuery, graphisme et orthographe

Bruno Bichet — Mon, 05 Oct 2009 15:46:57 +0000

Abandonnées peu à peu depuis mon utilisation intensive de Twitter où je partage l’essentielle de ma veille technologique (en plus de Delicious), les listes de liens commentées refond leur apparition sur ce blog. Si Twitter est le format idéal pour partager des liens au fil de l’eau, il n’est pas toujours évident pour le follower de s’y retrouver parmis les nombreux liens proposés. C’est pourquoi, j’en rajoute une couche dans cette nouvelle rubrique intitulée Le petit journal du web. Par ailleurs, je me dit qu’un tweet est bien peu de chose : rien ne vaut un bon vieux backlink en dur comme récompense du travail accompli et comme motivation pour celui à venir !

WordPress, what else!

Si on ne présente plus WordPress, ce n’est pas une raison pour ne pas rappeler que ce n’est pas qu’un moteur de blog ni même un CMS : c’est un moteur d’envies !

Pour en savoir plus sur nos envies, justement, Xavier Borderie lance un grand sondage pour mieux connaitre la communauté francophone de WordPress. A vos claviers !

En attendant, voici une sélection de liens qui devraient vous intéresser que vous soyez débutant de chez débutant ou un professionnel de la profession :

WordPress Upgrade — Ce script développé par Martin Panel et Billyboylindien permet de mettre à jour automatiquement plusieurs installations de WordPress en une seule passe. Via Free Tools. Voici le déroulement des opérations : 1) Téléchargement de la dernière version de WordPress ; 2) Backup des fichiers et de la base de données de votre WordPress (pas besoin de renseigner les login et password) ; 3) Mise en place des nouveaux fichiers (conserve votre wp-content intact) ; 4) Mise à jour de votre base de données.
L’ordre d’affichage des catégories par ordre alphabétique ascendant ou descendant n’est pas forcément le plus adapté. Pour y remédier, je vous propose deux plugins : Category Order qui date peut-être un peu mais qui me donne entière satisfaction et My Category Order qui ne fonctionne pas chez moi (peut-être à cause du thème Hybrid). Si vous le testez, n’hésitez pas à revenir pour nous en toucher deux mots.
Widgetifyr — Créer un widget pour WordPress n’aura jamais été aussi simple. Il suffit de renseigner quelques champs concernant votre plugin et hop ! Widgetifyr se charge de toute la partie laborieuse. Il ne reste plus qu’à créer une belle fonction PHP… Via SlyDnet.
Last but not least, voici la partie WordPress de la grosse grosse liste.

HTML5, CSS

Vous en avez sûrement du vous en rendre compte, la pression exercée par HTML5 (et CSS3) ne fait de plus en plus forte. Il y a quelques temps j’avais fait une tentative pour faire le point sur HTML5 et voir s’il ne s’agissait pas de vaporware vu les délais et les contraintes (absence de support des nouvelles balises par IE et guerre interne pour le contrôle des codecs audio et vidéo). Mais il semblerait que l’on puisse commencer à travailler avec HTML5.

Envie d’utiliser HTML5 mais pas chaud pour mettre les utilisateurs d’IE de côté ? Facile, placez ce bout de code dans votre page web :

Créé par Remy Sharp et inspiré par HTML5 Shiv de John Resig. On en profitera pour connaitre une des manières les plus courtes pour savoir si le navigateur est Internet Explorer avec var isMSIE = /@cc_on!@/false; ou plus court encore var isMSIE = /@cc_on!@/0;

Galerie de site réalisés avec HTML5 — Comme son nom l’indique, ce site présente des sites web réalisés avec HTML5 et pourrait bien de prendre la place qu’avait CSS Zen Garden en son temps pour vanter les mérites des feuilles de styles. Bref, du « en veux-tu en voilà !
HTML et CSS orienté objet ? — Les bonnes pratiques de codage, la séparation de la forme et du fond par l’exemple dans ce tutoriel présentant les avantages de la pensée « objet » avec moult snippets de codes CSS3 et HTML5 pour aboutir à une page web comprenant un header, une section, une barre latérale (aside) et un footer.
DOM vs namespace pour implémenter HTML5 sur IE6, IE7, Firefox2, Camino, etc.
Comparez les meilleurs Frameworks — Avec une dizaine de frameworks PHP, 6 frameworks Ruby, de 12 frameworks Javascript et de pas moins de 22 frameworks CSS, ce comparateur de Framework permettra aux indécis d’avoir une vision claire des principaux atouts des uns et de découvrir les autres.
CSS Sticky Footer Layout — Un pied de page (footer) toujours en bas de la page en CSS (sans Javascript, sans div surnuméraire) tout en restant compatible avec moult navigateurs.
Last but not least, voici la partie ressources pour webdesigners de la grosse grosse liste.

jQuery

jQuery est toujours une bibliothèque Javascript aussi rapide et concise pour simplifier les longues traversées de DOM, border les manipulations hasardeuses d’événements, faire de jolies animations et dompter Ajax. jQuery est tout désigné pour changer la manière dont vous écrivez Javascript. Ou pas, d’ailleurs, parce qu’une des raisons de la popularité de jQuery provient de la foultitude de plugins prêts à être installés en deux coups de cuillères à pot, et c’est très bien ainsi !

Lazy loader — Vous souvenez-vous du préchargement d’images en Javascript ? Et bien ce plugin pour jQuery fait exactement le contraire : il ne charge vos images que lorsqu’elles apparaissent dans la fenêtre du navigateur. Le plugin est doté d’options plutôt bien pensées : seuil en pixels à partir duquel l’image sera chargée ; image de substitution en attendant le chargement de l’image ; apparition des images sur un événement click ou mouseover ; affichage des images après le déclenchement d’une fonction personnalisée, etc. Via Anis Berejeb.
jQuery UI Multiselect — Améliore l’apparence et l’ergonomie de la balise HTML select basé sur jQuery 1.3 et jQuery UI 1.7, ce plugin dispose même d’un champs pour rechercher parmis les options proposées. Via arnaud-k.
Faire un carrousel avec jQuery — Tutoriel très didactique qui décompose le déroulement des opérations pour réaliser un carrousel de base avec HTML, CSS et jQuery.
jQuery Tools — Si jQuery UI propose des éléments d’interface de qualité, jQuery Tools va encore plus loin en proposant l’incorporation des animations Flash, une gamme étendue d’overlay, des tooltips à foison, des tabs, etc. Voir jQuery Tools: The missing UI library for the Web pour plus d’information. Et pour achever de vous convaincre, voici la page de démontration.
News déroulantes à la iTélé — Très bonne solution pour avoir un joli bandeau de news à l’aide de liste de définition, d’une pincée de CSS et d’une bonne rasade de jQuery avec explication de texte. Le tutoriel aborde également les aspects graphiques avec le découpage des images. Profitez-en pour jeter un oeil sur la création de plugins jQuery et sur cet effet de page cornée en quelques lignes de jQuery.
Last but not least, voici la partie jQuery de la grosse grosse liste (plus de 240 plugins classés par thème)

Graphisme, images et icônes

Après le code, le visuel est un élément indispensable. Il peut être minimaliste ou exubérant. Coloré ou gris. Simple ou complexe. C’est à vous de voir.

Worth1000 — Peu connu en France, Worth1000 est pourtant une référence internationale quand il s’agit de dégainer Photoshop. Voici la page des tutoriels qui vous permettra de vous faire la main pour participer aux nombreux concours thématiques auxquels j’ai participé en 2005. Cf. ma petite note sur Worth1000.
45 tutoriels pour Photoshop — Une bonne tranche de tutoriels assez variés pour élargir nos connaissances concernant le meilleur logiciel du monde ! J’ai particulièrement apprécié Creating a Vector Composite Effect from a Photo pour son impact visuel, Photo Cutout Photoshop Tutorial, Turn A Photo Into A Collage Of Polaroids, Making Skin Beautiful et Create an Illustrated Look From a Photograph.
All Silhouettes — contient plus de 5 700 silhouettes vectorielles au format Illustrator (.ai) et Photoshop (brossse) réparties dans plus de 90 packs (via webstorming) : feuilles et palmiers, signalétique de danger ou de sport, flèches diverses, fleurs, chevaux, couples, vaisseaux spaciaux, bateaux, filles sexy ou au travail et autres silhouettes humaines.
Icon Finder — Recherchez parmi plus de 110 000 icônes et 230 collections avec ce moteur de recherche très bien pensé : recherche par taille (12px, 16px, 16px, 32px, 48px, 64px et 128 pixels) ; par couleur de background ; pour usage commercial seulement ou non, etc.

Une suggestion des recherches liées à la vôtre vous permettra d’élargir votre horizon. Bref, c’est le coup de coeur de cette semaine (que j’ajoute à la grosse grosse liste des 1000 ressources pour webdesigner). Merci @codeur !

25 blogs de graphistes — jolie liste dont votre serviteur fait partie.
Last but not least, voici la partie icônes et goodies pour Photoshop de la grosse grosse liste.

Grammaire, orthographe et synonyme

Ressources gratuites pour s’améliorer en français — plus de 80 liens pour décrypter les mots et expressions de la langue française. Mais aussi : des dictionnaires en ligne, de synonymes, de rimes, conjugaison, dépannage linguistique, grammaire et orthographe, terminologie, vocabulaires thématiques, thésaurus, dictionnaires de sigles, d’acronymes et d’abréviations, étymologie, littérature classique, dictées, logiciels, forums et portails, argot etc.
11 ressources pour mieux bloguer en français — comme son nom l’indique ;)

Miscellanées

Mac OS X est-il vraiment ergonomique ? — Comparatif entre un environnement Linux (Kubuntu) et Mac OS X Léopard : gestion des fenêtres, explorateur de fichiers et autres applications. Conclusion : Et vous ? Qu’est-ce qui vous fait rester sous Mac ?

PS : Le petit journal du web est gratuit : faites tourner !

Articles sur le même sujet

3 frameworks pour vos thèmes WordPress

Bruno Bichet — Sun, 19 Apr 2009 09:17:37 +0000

C’est chez WPTavern que Dan Cole nous offre ce comparatif entre trois frameworks de thème pour WordPress :

Thematic de Ian Stewart dont on lira cette interview sur les thèmes enfants (child theme),
ThemeHybrid de Justin Tadlock,
Carrington d’Alex King. Ce thème est décliné en version texte ainsi qu’en version mobile.

Dans cette optique, jettez un oeil sur le thème Sandbox créé par Scott Wallick.

Articles sur le même sujet

The HTML Framework Project | Phase 1.1 — définir

Bruno Bichet — Fri, 05 Sep 2008 02:25:23 +0000

Je vous ai rapidement parlé de The HTML Framework Project qui propose de réfléchir ensemble à la mise en place d’un environnement de travail pour rendre le démarrage d’un projet de site web moins ennuyeux. Le projet en est à la phase 1.1 : définir. Il est évident que produire un bon code HTML est un métier, un art qui peut difficilement se faire comme on élève des poules en batteries. Pour autant, il doit être possible de dégager parmi les bonnes pratiques de travail, quelques concepts récurrents que l’on pourrait utiliser au démarrage d’un projet.

C’est quoi un framework HTML, au juste ?

Un Framework HTML devrait inclure une structure de fichiers normalisée, quelques trucs pour mettre les navigateurs au garde-à-vous et des fichiers HTML servant de fondations pour des maquettes différentes. C’est aussi simple que ça : un jeu de fichiers et de répertoires pour amorcer le travail dans la joie et la bonne humeur ;)

Sur quelles bases construire ce framework ?

S’assurer que le Framework HTML est conforme avec les points suivants :

Éviter les tables pour la présentation,
Séparer le fond et la forme,
Réserver la partie présentation aux CSS,
Prendre en considération la « sémantique » des balises HTML,
Intégrer des noms de classes signifiants,
Valider en accord avec les spécifications du W3C.

Un mot d’ordre : la flexibilité

Pour que ce framework HTML soit utile aux développeurs, il faudra :

Ne pas gêner les web designers (les graphistes doivent pouvoir laisser libre-court à leur créativité),
S’adapter aux contraintes propres d’un projet (être un plus, pas un obstacle),
Rester léger en excluant les fonctionnalités superflues,
Être extensible pour faire face aux besoins futurs.

Participer à la discussion

On parle beaucoup (ou pas) de HTML5. J’ai donc lancé l’idée de bâtir les fondations du framework sur la base des spécifications du HTML5, notamment pour la partie structure en accord avec la partie sections du W3C :

section — Chapitres, onglets des menu, etc. La page d’accueil d’un site web pourrait être découpée en sections : introduction, news et informations de contact.
nav — Menu principal ou secondaire d’un site web.
article — Partie indépendante d’une page, d’un document ou d’un site : contribution sur un forum, article de magazine, billet de blog, commentaire, etc.
aside — Barre latérale ou contenu adjacent,
header — Regroupement de sections ou de balises h1, h2, etc.
footer — Pied de page d’une section,
address — Informations de contact, idéalement placées dans le footer.

Dans le framework HTML, ces éléments pourraient se traduire par :

Les autres éléments de HTML4 étant utilisés — comme d’habitude — de manière à coller au plus près du sens véhiculé par le contenu.

Pour conclure

L’avantage de calquer les id et les class sur les balises prévues par HTML5, c’est de voir loin tout en s’adaptant dès maintenant aux nouvelles habitudes de structuration des contenus avec HTML5. Et comme le suggère jdgraffam il est envisageable que le framework définisse un plan pour passer du framework au HTML 5 quand ce dernier sera pris en compte par les navigateurs, tout en restant rétro-compatible !

Faites tourner et n’hésitez pas à partager ce que ce projet vous inspire. Si vous avez des idées et quelques connaissances en anglais, je vous invite à commenter ce billet, ou ici, si vous êtes plus à l’aise en français ;)

Articles sur le même sujet

The HTML Framework Project | Phase 1 — définir

Bruno Bichet — Sat, 30 Aug 2008 00:08:50 +0000

Le HTML Framework Project se donne pour mission de rassembler les idées des développeurs d’interface utilisateur et des webdesigners pour poser les bases d’une spécification de framework HTML. Le projet s’étalera sur une durée de 18 semaines de réflexion :

Qu’est-ce qu’un framework HTML ?
Utilisez-vous un framework HTML ?
Avez-vous créé votre propre solution ?
Est-il souhaitable de standardiser les noms de classe CSS (.head vs .header) ?
Est-ce que les frameworks sont une bonne idée ?
Le framework HTML parfait existe-t-il ?

Ces questions sont là pour amorcer la discussion et comme les questions ne valent que par les réponses qu’elles induisent, n’hésitez pas à vous faire connaitre : ce projet est communautaire et n’avancera pas sans vous !

Note : « Définir » est la première étape du projet qui en compte six : définir, collecter, sélectionner, trier, standardiser et publier. En savoir plus sur le projet et suivre htmlframework via Twitter.

Faites tourner ;)