Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

09.01.2009

En mâchant du template : Home

Vous êtes passés en configuration avancée ? Vous allez manger du template et de la feuille de style. Quelques modifications anecdotiques pour commencer.

J'ai préparé un document à télécharger qui contient le contenu initial du template "page d'accueil" et une forme de visualisation de la structure de la page d'accueil. On voit nettement deux éléments pour la bannière supérieure, un bloc pour chaque colonne et un bloc pour la partie centrale.

Je ne rentrerai pas maintenant dans le détail de chacun des éléments. Pour l'instant, appréciez (si vous le pouvez) l'imbrication de chacun des éléments, et le soin que vous devrez apporter à vos interventions.

Vous constaterez qu'il y en a déjà eu sur ce blog.

Dans le template, modifier le favicon.

La procédure est très bien expliquée sur le Blog Haut&Fort dans cette note que je vous incite à lire. Une fois l'icône préparée, l'intervention dans le template est mineure.

À la quatrième ligne, il faut remplacer ce qui est surligné <link rel="icon" href="{$platform.url}graphics/favicon.ico" type="image/x-icon" />,  par l'adresse de l'image que vous aurez téléchargée via Tableau de bord / Fichiers / Images. En l'occurence, la ligne est devenue <link rel="icon" href="http://geemee.hautetfort.com/images/favicon1.ico" type="image/x-icon" />. Et un jour j'en mettrai une jolie.

Dans la feuille de styles, modifier la police principale

C'est une intervention mineure dans la feuille de style avec de grandes conséquences pour le blog.

Je n'ai rien contre la police Arial, précisément parce qu'on en dit rien, aussi lui préféré-je Verdana. Normalement, on peut personnaliser son modèle standard et changer l'ordre des familles de polices, mais avec moi, cela ne voulait pas fonctionner. Une fois en configuration avancée, il "suffit" de modifier la feuille de style.

Dans la classe "body", la première, j'ai modifié l'ordre des polices utilisées pour que Verdana passe en premier
body {
margin: 0px 0px 20px 0px;
padding: 0px;
background-color: #aaaaaa;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
word-spacing: normal;
text-align: center;
}

L'un des principes des CSS, c'est la mise en cascade, la hiérarchie descendante des intructions. Modifier "Body" c'est modifier tout le blog, sauf instruction contraire. Comme le passage en Verdana modifiait la description du blog "Modeste contribution à l'émancipation technique du mardi et du vendredi à 12h30" en provoquant un retour à la ligne, j'ai modifié le style concerné.

Je suis donc intervenu sur la classe suivante en ajoutant l'instruction surlignée qui remet la police Arial en première position.
#banner h2 {
font-family: Arial, Verdana, Helvetica, sans-serif;
padding: 10px 25px 0px 25px;
}

En analysant le document à télécharger, vous comprendrez plus vite que c'est bien sur cette classe qu'il fallait intervenir.

Ces quelques interventions illustrent juste le principe, je vous proposerai bientôt des modifications plus ciblées et détaillées. D'ailleurs, avez-vous des priorités ?

07.01.2009

Configuration avancée... mais prudemment

Il ne serait pas très prudent d'aller trop vite alors que la plupart des routes de France se couvrent d'une neige abondante, jusque dans des départements qui n'en voient pas le bout d'un flocon depuis des lustres. On se gardera ici de faire les malins, et on mettra des chaussettes autour de ses chaussures pour ne pas glisser ; c'est une autre forme de configuration avancée.

Cette note est publiée avec retard sur le planning (en fait de 12h30 AM ce serait plutôt PM), et j'espère que mes lecteurs les plus fidèles et les plus attentifs ne m'en tiendront pas trop rigueur. Les plus addicted auront remarqué quelques changements. Ils sont minces, les changements, on est tout de même dans la première semaine qui suit les fêtes. Notez bien que les visiteurs aussi.
J'avais activé des listes, un album, pour vérifier certaines conséquences du passage au mode avancé, avant de proposer quelques précautions.

Faisons donc le bilan de ce que cela change vraiment.

La séparation du contenu et de la forme permet de récupérer vos notes sans changement, malgré vos interventions sur la forme du blog. Passez en mode avancé, vous ne perdrez aucune note, ni aucun commentaire.

Vos notes sont tellement inchangées que si vous y introduisiez régulièrement du texte rose, parce qu'il s'accordait merveilleusement avec la mise en forme des pages... Il restera rose alors que vous avez viré vos pages au bleu. Cela peut être pénible de revenir sur toutes vos notes pour une faute de goût.

Vous avez toujours accès à la gestion du contenu des colonnes, des listes et des albums, qui viendront s'intégrer dans vos pages modifiées ou non.

Je m'en excuse auprès de tous ceux qui maîtrisent parfaitement la technique en plus du globish, mais il est peut-être temps de revenir sur le principe du template et de la feuille de styles.

Si vous avez l'habitude d'apporter du contenu dans la base de données éditoriale de votre blog, l'apparence des pages vient de deux documents différents : le template (un par type de page) et la feuille de styles (normalement valable pour le blog).

Le template Haut&Fort, c'est un document qui indique la structure de la page, la présence, l'emplacement et le comportement des différents éléments. Combien de colonnes, à gauche ou à droite, combien de « dernières notes » affichées, la note est-elle coupée sur la page d'accueil pour qu'on la lise in-extenso sur une autre page, la fonction « commentaire » se trouve-t-elle bien après le lien permanent, etc... En gros, quand vous changez la mise en page d'un modèle standard, vous changez surtout de template.

La feuille de styles, c'est ce qui commande le type de police, les couleurs de fonds, les couleurs de caractères, la mise en forme des liens hypertextes... C'est la couche de finition. En gros, quand vous « personnalisez » un modèle standard, vous changez de feuille de styles.

Quand vous passez en configuration avancée, vous avez accès à la feuille de styles et à différents templates. La page d'archive n'a pas nécessairement la même structure que la page d'accueil. Mais tant que vous n'y touchez pas, vous ne verrez aucun changement.
D'ailleurs, vous ne verrez aucun changement tant que vous ne serez pas intervenu dans les templates et ou la feuille de styles.

Allez-y, vous n'en reviendrez pas.

Pas si facilement. Certaines des modifications effectuées dans les templates en configuration avancée demeurent alors que vous êtes repassé à un modèle standard. La limite de ce qui reste, et de ce qui disparaît ne me paraît pas encore très claire, mais notez que si vous passez en mode avancé pour modifier vos pages, vous ne reviendrez qu'avec difficulté à l'état "standard" de départ.

C'est pourquoi je vous propose quelques principes de précaution :

• Pour avoir un document de référence, vous pouvez faire une copie de sauvegarde de votre blog.

• Pour rapidement retrouver une base saine après quelques séances d'essais et d'erreurs, faites des sauvegarde partielles.

• Pour les templates, il existe une fonction "voir la version originale" qui vous accorde une solution de secours. Copier son contenu et le coller dans le document modifié permet de revenir à une version stable. Mais pour conserver des modifications graduelles, copier dans un fichier texte (avec Notepad++ ou MS Windows Bloc-notes) reste la méthode la plus sûre. D'autant qu'il n'y a pas de "voir la version originale" pour les colonnes de droite et gauche. Dans les templates, vous pouvez insérez des commentaires en code HTML.
Vous encadrez vos commentaires <!-- ainsi -->.

• Pour la feuille de styles pas de "voir la version originale" non plus. Copiez-la donc en intégralité dans un fichier texte (avec un logiciel comme Notepad++, ou le bloc-note MS Windows à la limite). Dans la feuille de styles elle-même, vous pouvez insérer des commentaires avec une autre syntaxe qu'en HTML.
Vous encadrez vos commentaires /** ainsi **/.

• Sauvegardez ce qui fonctionne avant de faire la modification de trop qui écroulera le château de cartes.

Ces principes généraux étant exposés, nous allons pouvoir aborder la struture des templates, la modification d'éléments précis, et les interventions sur la feuille de styles. Vous avez des priorités ?

00:42 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (2) | Tags : avancé, précaution, sauvegarde | |  del.icio.us | | Digg! Digg |  Facebook

23.12.2008

Web design : Profitez de la trêve des confiseurs

Avec la fin de l'année, arrive le temps des bilans et des bonnes résolutions. Si l'amélioration de votre blog est l'un de vos objectifs, cette note peut être un point de départ.

Depuis bien plus longtemps que moi, Lavande donne des conseils aux blogueurs et webmestres qui souhaitent proposer des blogs toujours plus sympas et efficaces. S'il y a relativement peu de contenu pour Haut&Fort, on trouve des informations qui intéressent tout le monde, et notamment dans deux articles.

10 conseils aux blogueurs sur les erreurs à ne pas commettre

C'est la traduction d'un article de Jakob Nielsen qui fait référence en matière de webdesign depuis les débuts de l'internet commercial, il y a de cela une douzaine d'années. Ces réflexions vont parfois à l'encontre de ce que vous pouvez constater en ligne, et notamment dans l'utilisation des images. Ses intelligentes préconisations devraient être plus souvent suivies, mais la vie est une suite de compromis.

Conseils de design

Cette note est une sélection de liens vers des articles qui vous aideront dans votre réflexion en vous prodigant des conseils, en vous montrant de beaux sites... et des moins beaux.

Je me suis permis cette note, programmée qui plus est, pour ne pas laisser mon blog totalement désert pendant que je m'occupe de ma petite famille. Elle n'est intéressante que par la sélection effectuée par Lavande, et je l'en remercie encore.

Joyeux Noël !

12:30 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (3) | Tags : webdesign, usability, utilisabilité, nielsen | |  del.icio.us | | Digg! Digg |  Facebook

19.12.2008

Pour avancer dans la configuration

Pourquoi faire simple quand on peut faire compliqué ? C'est assez rapidement ce qui vient à l'esprit quand on envisage de passer son blog H&F en mode avancé.

À l'origine, un "blog" devait être un site internet personnel basique, aussi facile à mettre en place qu'à jour.
La disponibilité de plateformes telle Hautetfort accéléra le déclin des webmasters improvisés, nerds peu convaincus et souvent solitaires dans l'écume des océans de codes, membres improbables de la compagnie d'éffarés des balises.
En quelques instants, et le plus souvent gratuitement, il est devenu possible d'ouvrir son blog et de tisser sa part de la toile. L'égo n'étant pas la moindre des dimensions de la personnalité d'un blogueur (je me mets dans le lot), le besoin d'appropriation sinon de distinction s'est assez rapidement fait sentir. Le balancier, courant inlassablement de la simplicité à la complexité repartit alors dans l'autre sens et ouvrit la possibilité d'intervenir dans le code du blog.

Le webmestre est de retour.

Si vous ne voulez rien savoir de comment cela marche, et de pourquoi cela fait-il ci ou ça, renoncez au mode avancé. Ce mode là n'a d'intérêt que si vous mettez les mains dans le code, et s'il n'est pas question que cet engrenage vous fasse perdre vos doigts, il vous mangera certainement plus de temps que vous ne l'imaginez au départ. S'approprier le fonctionnement d'un site dynamique, avec une base de données, un langage de requête propre, et des feuilles de styles n'est pas insurmontable. Cela vous demandera juste du temps et de la concentration. Et puis rien ne vous oblige à tout réinventer.
Pour reprendre une métaphore automobile, le mode avancé n'est pas pour vous si l'ouverture de la boîte à gants vous parait déjà relever de la mécanique. Et la personnalisation peut se faire avec goût et sobriété sans verser dans la jackysation.

Le choix du mode avancé est-il réversible ?

Le contenu de vos notes ne sera pas affecté par le changement de mode. Si votre blog suit une "configuration avancée" au point de vous dépasser, vous pouvez revenir à un modèle standard sans perte des données comprises dans vos notes. Tout ce que vous aurez mis dans vos "templates" sera par contre définitivement perdu. Avec un peu de méthode cependant, vous vous éviterez bien des désagréments.

Vous l'avez compris Gee Mee va passer à la configuration avancée pour vous faire partager cette aventure. Mais l'auriez-vous déjà tentée ?

12:30 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : avancé, configuration avancée | |  del.icio.us | | Digg! Digg |  Facebook