Une grosse journée aujour’hui!

Voilà, le Web Éducation est fini, et je dois dire que je me sens un peu lessivé. J’étais un peu inquiet, je me questionnais sur la pertinence de faire une présentation où je parlerais de portes coulissantes en CSS, de Sprites CSS, des techniques de remplacement d’images… je croyais que ces méthodes étaient maîtrisées et utilisées par tous, il semblerait que ce ne soit pas le cas.

Malgré tout, plusieurs m’ont dit qu’ils utilisaient les techniques, sans en connaître les noms, ce qui est bien compréhensible. Mais je crois que ce qui m’a surpris le plus, c’est de voir que peu de gens utilisent les fonctions telles que les slices (ou tranches) dans Photoshop ou encore les layers spécialisés (adjustment, fill, gradient…). Je leur ai ordonné de le faire dès maintenant, au lieu de toujours travailler sur des layers rasterisés (ouah! que d’anglicismes en un paragraphe!!).

Je dois valider si je peux diffuser l’ensemble de la documentation présentée (fichiers PSD, CSS, HTML et tout le reste) avant de pouvoir le rendre disponible ici même, sur mon blogue. Restez branchés, vous les verrez peut-être sous peu!

Document remis aux participants de la conférence

Je crois que cette présentation a été bénéfique, finalement. Je vous invite à consulter le document que j’ai remis aux personnes présentes.

La période de questions a été aussi assez intéressante. Des discussions et débats intéressants sur l’avenir de xHTML vs HTML 5, un peu sur les CSS, on a parlé de cSS3, design pour mobiles… plein de thèmes, en fait!

… Et un gros merci à Yannick et Simon pour leur prestation et leur invitation à participer avec eux à cette journée! Ouais, Yannick, je vais le ré-installer FireBug et tenter de m’y remettre! tu as réussi!

Trucs Photoshop et CSS

Merde! je me suis encore fait embarquer! Bon, je l’avoue, j’ai couru un peu après, mais je vais faire une autre présentation au WebÉducation de janvier 2009. Cette fois, ce sera sur Photoshop et les CSS, des trucs et des méthodes de travail qui peuvent aider les Web designers ou intégrateurs dans leur quotidien.

À cet effet, si vous connaissez des trucs pertinents que je devrais présenter, faites-moi signe. Je pensais parler des Sprites CSS, des techniques de remplacement d’image (incluant le SiFR) ainsi que du découpage d’une image en Photoshop en utilisant des slices et quelques petits trucs maison que j’utilise à profusion.

Je suis bien conscient qu’il n’y a rien de bien nouveau dans ce que je propose, mais vous seriez surpris de voir le nombre de personnes qui ne connaissent pas ces petits trucs!

Alors, si vous avez des propositions, bombardez-moi!

HTML 5

J’ai eu la chance, ce lundi, de participer à une présentation de Yan Bodain sur le HTML 5. Je dois avouer que je me suis un peu désintéressé du dossier depuis quelque temps (les mauvaises langues pourraient dire que je me suis aussi désintéressé de mon blogue… m’enfin).

J’ai donc pu avoir un aperçu de ce qui s’en vient avec la prochaine mouture, et c’est assez intéressant. Que l’on pense, par exemple, aux différents types de input ou aux divers éléments de sections (header, nav, footer…), le HTML 5 promet d’être nettement mieux que le vieux HTML ou le xHTML…

Parlant de xHTML… devrait-on continuer à s’obstiner? Yan n’est pas certain… il trouve que c’est lourd et contraignant. Il a bien raison, c’est lourd et contraignant. Il y a eu une lame de fond il y a quelques années pour les normes, le respect des standards, et depuis, on se rend compte que l’idéal n’est pas toujours d’être valide à tout prix, mais plutôt de s’assurer de fonctionner.

On peut tolérer quelques écarts de conduite par moment… j’en fais, je l’avoue. Être extrémiste pour les standards, c’est être extrémiste pareil… et c’est pas mieux que d’être trop laxiste.

HTML 5 nous redonne une latitude perdue, celle, entre autre, des balises non fermées. On peut être plus permissif. Considérant que le contenu est généré de façon automatisée ou par diverses sources, il devenait pratiquement impossible de s’assurer qu’une page soit valide en xHTML. Le HTML 5 est simple… plus simple…

Peut-être devait-on le nommer le «HTML simple»! eheh!

Acronymes gouvernementaux et TYPO3

Logo Typo3
Vous savez probablement que les organisation gouvernementales en général souffrent toutes d’une maladie: l’acronymite aigüe. Or, quand on gère un site Web, il devient difficile, voire impossible, de mettre la balise Acronym à chaque fois que l’on rencontre l’un de ces nombreux mélange de lettres incompréhensible.

Qu’à cela ne tienne, nous venons d’installer une petite extension, a21glossary, qui gère pour nous les acronymes, définitions et autres abréviations si courantes dans nos organisations publiques.

Une fois l’extension installée, vous n’avez qu’à créer une table des acronymes ou définitions et TYPO3 assignera la balise appropriée dès que le groupe de lettre sera rencontré! Oh joie! nous venons de nous sauver des heures de travail!

Pour ceux qui se demandaient encore à quoi sert un CMS, ben… ça sert à faire plein de trucs du genre de façon automatique!!!

Personnaliser le titre de page et le h1 dans TYPO3

Logo Typo3 Lors d’une présentation au WebÉducation sur le nouveau standard sur l’accessibilité des sites Web gouvernementaux, il a été conseillé de mettre en place certaines mesures, sommes toutes assez simples.

L’une de ces mesures proposées était de synchroniser le titre (title) de la page et le h1, de façon à ce qu’ils soient semblables. J’ai donc planché un peu dessus dans TYPO3 et je vous propose les solutions trouvées.

Modifier le titre de la page

Le titre de la page est déjà généré automatiquement par TYPO3, mais il est possible d’avoir un titre plus parlant, plus clair, que celui qui est défini (et utilisé en Back-End pour retrouver la page) en forçant l’utilisation du sous-titre. De plus, on peut configurer l’affichage du nom de l’organisme (ou du site) de façon à ce qu’il soit avant ou après le nom de la page.

La solution TypoScript est toute simple (et probablement déjà connue par plusieurs):


### Personnaliser le titre de page
# Supprimer la balise titre par défaut
config.noPageTitle = 2
# Déclarer un objet texte dans l'entête (head)
page.headerData.10 = TEXT
# Utiliser le champ sous-titre de la page, si absent, le titre
page.headerData.10.field = subtitle // title
# Englober (wrap) le champ avec le code suivant
page.headerData.10.wrap = <title> | — Nom du site</title>

… et maintenant le h1

Si j’en parle, c’est parce que je suis un peu nul en TypoScript et j’ai cherché comme un bon comment faire… et c’est par hasard que j’ai trouvé la solution, en regardant les statistiques de fréquentation de mon blog, les sites référents!

Tout d’abord, vous devez vous définir (mapper, en bon français) un élément dans votre gabarit TemplaVoilà et lui attribuer un type «TypoScript Object Path» et définir, par exemple lib.titre.

Une fois que ce sera fait, vous n’avez qu’à insérer ce code dans votre template principal (ou ailleurs, si vous le désirez):


### Personnaliser le H1

lib.titre = TEXT
lib.titre.wrap = <h1>|</h1>
lib.titre.data = page:subtitle
lib.titre.ifEmpty {
data = page:title
required = 1
}

C’est tout! ça fonctionne! merveilleux, non? vos title et votre h1 de page seront synchronisés et gérés à même l’interface BE de TYPO3!

C’est beau la techno… quand ça marche!