Blogueur

« François Viens »

François Viens
2 septembre 2010

Bilinguisme et WordPress : plugins et astuces

La fin de semaine dernière se tenait l’anti-conférence (pas mal le même format qu’une conférence standard!) WordCamp Montréal qui en était à la 2e édition. Pour l’occasion, non seulement QuiboWeb s’était trouvé des T-Shirts, en plus, nous avions trouvé un conférencier, Yannick Carrière, qui a parlé de bilinguisme et WordPress, une réalité avec laquelle les concepteurs Web du Québec doivent jongler dans leur day to day. Vous pouvez consulter les slides, en gros, le plugin WPML Multilingual CMS est à ce jour la solution la plus intéressante pour la majorité des cas.

View more presentations from yannickcg.

J’ai également pris une vidéo avec mon Iphone, le son est approximatif… il faut absolument mettre des écouteurs ou le volume dans le tapis pour bien en profiter… Bon visionnement!

Bilinguisme et WordPress : plugins et astuces from Quibo Web on Vimeo.



François Viens
21 juillet 2010

Convention de nommage en CSS

Ce billet est une simple traduction d’un billet d’Antonio Lupetti rédigé en 2008 mais encore tellement pertinent : CSS coding: semantic approach in naming convention . En caractères italiques gras, mes commentaires!

Les conventions de nommage en CSS c’est un sujet chaud (Pas assez chaud à mon avis car avec les Frameworks CSS, ces mêmes questions se doivent d’être soulignées…). Dans ce billet, je veux illustrer quelques bonnes pratiques pour avoir une approche sémantique plutôt qu’une approche structurale lorsque vient le temps de faire le choix des noms de nos classes CSS. L’exemple utilisé pour illustrer mon propos est un modèle typique et populaire d’une mise en page sur 3 colonnes.

À la toute fin du billet, une liste d’articles à lire sur ce même sujet et une liste de Frameworks pour faciliter votre développement CSS (Pour ma part je n’aime pas ces Frameworks car pour permettre leur flexibilité, le nom des classes est souvent très peu sémantique et l’ajout de chiffre pour numéroter les zones est très répandu… beurk…)

Approche sémantique versus l’approche structurale pour le choix des noms de classes en CSS

En général, l’approche sémantique permet de définir le nom des classes en considérant sa signification, son sens par rapport à la page, indépendamment de sa position ou autres propriétés spécifiques qui constituent l’approche structurale. Des exemples d’approche structurale sont : left-bar, red-text, small-title… (Un truc serait pour faire la différence est de ce demander s’il est possible de faire mentir le nom d’une classe simplement en changeant quelques règles CSS pour cette classe… Ainsi, une classe « bleu » peut facilement être dans le champ simplement en changeant la couleur pour rouge. Une classe « zone-gauche » peut être dans le champ si on déplace cette zone à la droite. Par contre, une classe « menu » ou « entete », c’est plus difficile à faire mentir en changeant une règle CSS).

Voyons ensemble un exemple :

Sémantique versus structure

… et imaginons maintenant notre modèle si on change la position des zones de notre page. Si vous utilisez une approche structurale (1), il devient préférable de changer le nom des classes dans le code car la position des zones dans l’illustration (3) inverse la gauche et la droite affichées en (1). En utilisant une approche sémantique, ce problème ne se pose pas (4) :

Sémantique versus structure prise 2


En d’autres mots, en utilisant une approche sémantique, il est envisageable de changer complètement la disposition des éléments d’une page sans pour autant devoir changer le nom des classes CSS.

Quelques bonnes pratiques…

Avant de commencer, j’aimerais suggérer 2 règles simples pour développer du code CSS clair :

1. Utilisez les minuscules pour nommer vos classes et utilisez le « - » ou une lettre majuscule pour les noms de classe de plusieurs mots (ex. « main-content« , ou « mainContent).

2. Optimisez le code CSS en ajoutant une classe seulement sur l’élément principal et en utilisant les balises standards HTML pour les sous éléments (h1, h2, p, ul, li, blockquote,…). Par exemple, n’utilisez pas cette approche :

<div class=’main‘>
<div class=’main-title‘>…</div>
<div class=’main-paragraph‘>…</div>

</div>

…utilisez plutôt ceci :

<div class=’main’>
<h1>…</h1>
<p>…</p>

</div>

Exemple d’une approche sémantique pour une mise en page sur 3 colonnes

Regardons un exemple simplifié qui illustre comment utiliser une approche sémantique pour une mise en page sur 3 colonnes :

Sémantique


Le CSS d’une telle approche pourrait ressembler à ceci :

#container{…}
/*—- Top section —-*/
#header{…}
#navbar{…}

/*—- Main —-*/
#menu{…}
#main{…}
#sidebar{…}

/*—- Footer —-*/
#footer{…}

1. Container
« #container » est la section qui contient tous les éléments de votre page et permet de contrôler la disposition du contenu dans l’espace disponible dans la fenêtre du navigateur. Pour cette section, les noms suivants pourraient également être de bons choix : « wrapper« , « wrap« , « page« .

2. Header
« #header » c’est l’entête de votre page Web. En général, l’entête inclut le logo du site et quelques éléments supplémentaires. Pour cette section, les noms suivants pourraient également être utilisés : « top » (J’aime pas), « logo » (Pas bon si ça contient plus que le logo), « page-header » (ou pageHeader).

3. Navbar
« #navbar » représente la barre de navigation horizontale (Pas nécessairement horizontale par contre…) standard. Pour cette section, les noms suivants auraient également pu être utilisés : « nav », « navigation », « nav-wrapper ».

4. Menu
« #menu » contient des liens et menu. Pour cette section, les noms suivants pourraient être utilisés : « sub-nav « , « links« . (En fait, pour ma part, je trouve que #navbar c’est souvent assez… une liste de lien sous #navbar c’est nécessairement le menu et si on est tenté de mettre autre chose dans le #navbar, c’est que le nom #navbar est alors mal choisi…)

5. Main
« #main » est la section principale d’une page du site. S’il s’agit d’un blogue, c’est la section qui contiendra vos articles. Pour cette section, les noms suivants pourraient être utilisés : « content« , « main-content » (or « mainContent »),

6. Sidebar
« #sidebar » contient du contenu d’ordre secondaire comme une liste de liens vers les derniers articles, un court texte descriptif à propos du site, de la publicité… Les noms suivants pourraient être pertinents : « sub-nav« , « side-panel« , « secondary-content« .

7. Footer
« #footer » contient généralement des informations supplémentaires à propos du site Web. Un autre nom pourrait être « copyright » (Je ne sais pas pour vous, mais plus souvent qu’autrement, mes footers ont plus que le copyright…).

Si vous avez des suggestions de noms sémantiques de classes, n’hésitez pas à laisser un commentaire.

J’ai pris la peine de traduire ce billet car il est important de se conscientiser sur le nom des classes que nous utilisons pour nos CSS. De bons noms assurent la pérennité de notre code, donc par le fait même sa valeur. Tout n’est pas à mon goût dans les propositions mais il ne faut pas non plus virer fou avec le concept…



François Viens
15 juin 2010

Inefficace si bien utilisé

Mon côté hypocondriaque me dirige parfois vers de la sur-analyse de l’état de salubrité dans les endroits que je visite… aucune crainte de m’inviter chez vous, ce comportement est particulièrement plus prononcé dans les endroits publics où la multiplication des visiteurs alimente ma réflexion… je n’en fais pas encore officiellement de crise, mais mon hamster travaille très très fort et si ce n’était pas du Purell qui a été après l’Internet une véritable révolution dans mon cas (et pas la peine de commenter que le Purell ne tue que X% de ci ou ça, je sais déjà mais il faut pouvoir s’appuyer sur des trucs dans la vie, même si parfois c’est futile)

Où veux tu en venir?

Ce matin, j’arrive tôt au travail, je profite de l’occasion pour me prendre un petit café et un bagel au Tim en face du bureau. La jeune dame bien intentionnée (ou bedon elle me draguait… ish…) décide de quitter son poste au grille pain pour venir me servir à la caisse. Gants de plastique dans les mains, avant de toucher à la caisse, elle a la brillante idée de retirer un gant, le temps de manipuler la caisse et l’argent… mon hamster commence à analyser, bien que satisfait du premier geste de cette dame. Une fois payé, elle remet son gant et met mon bagel dans le grille pain. Étant une personne très efficace, attendre après le bagel n’était pas possible et c’est à partir de là que ça se gâte, je surveille encore… manipulation de :

  • la machine à café
  • la carafe
  • boîte de filtres
  • poubelle mais en surface
  • porte d’armoire

… tout ça avec les mêmes gants, de retour sur mon bagel, application du fromage à la crème, emballage, merci et bonne journée Monsieur.

Le bagel était délicieux MAIS, si cette dame avait bien utilisé les gants?

Et bien, si elle avait bien utilisé les gants, elle aurait été très inefficace… elle aurait dû les retirer, faire les différentes manipulations de la cafetière et autre, se prendre une nouvelle paire de gants, réussir à les remettre en place sans trop les scrapper (ça c’est un autre sujet, mais la sur manipulation du gant pour arriver à le mettre rend souvent le gant useless au niveau hygiène) et revenir dans la chaîne de travail… le résultat, mon bagel aurait été froid…

Si les gants sont utilisés sans trop de réflexion, autant continuer à faire la job main nue… qu’est-ce que le gant change anyway si la personne qui les porte fait de la caisse, se gratte la face, se dépogne les bobettes, touche à tout autour d’elle… RIEN.

Bref, je suis peut-être un peu freak avec toute cette réflexion, mais si vous avez un restaurant et que votre équipe utilise des gants, autant vérifier qu’ils les utilisent correctement car autrement, c’est une dépense inutile, ce n’est pas plus propre, ça pollue et les clients comme moi, ne se laisseront pas prendre par le simple port du gant, et les autres, ils s’en foutent de toute façon…

Bon lunch!



François Viens
4 mai 2010

En fin de crise économique, du bon vin cheap!

Je suis un amateur de vin… pas que j’en connais beaucoup sur le sujet mais j’aime simplement en consommer! Bien que je sais apprécier une bonne bouteille dispendieuse, je préfère encore plusieurs bouteilles à prix moindre. Dans un tel contexte, 3 bouteilles à 20$ c’est mieux qu’une bouteille à 60$… Pendant longtemps je n’étais pas prêt à changer cette proportion pour passer à 6 bouteilles à 10$ mais certaines choses ont changé dans ma vie, dont l’arrivée d’un bébé et l’obligation (très difficile!) de boire la bouteille à moi seul… plus souvent qu’autrement j’en prends la moitié et conserve l’autre moitié pour quelques jours plus tard… et c’est dommage faire ça avec un bon vin, car il n’est plus aussi bon le jour suivant…

Voilà pourquoi je me suis mis à essayer des vins « cheap » et dans quelques cas, j’ai été agréablement surpris, alors voici les résultats de mes tests, en ordre de prix, les meilleurs à mon avis sont tout de même à la fin de la liste ;-)

Nero d’Avola Giacondi Sicilia i.g.t. 2008

Pas dans ma pastille de goût du tout, j’ai tout de même réussi à apprécier ce vin à 8,30$.Pour ma part je le réserve pour un plat de pâte… L’utilisation de la carafe aide beaucoup! La première gorgée n’est pas représentative de l’expérience globale. Ne poussez pas l’audace à servir à de la visite ou à donner en cadeau, parfait pour un soir de semaine, seul!

Pour plus d’information ou pour acheter ce vin sur le site de la SAQ : http://www.saq.com/webapp/wcs/stores/servlet/ProductDisplay?catalogId=10001&storeId=10001&productId=101633&langId=-2&parent_category_rn=11749&top_category=

Ruffino Chianti 2008

Encore un autre vin à pâte! Celui-ci peut se conserver jusqu’en 2012 mais entre vous et moi, un vin à 9,95$ autant le consommer que le collectionner… Même un peu gênant de le collectionner en fait… L’utilisation de la carafe aide beaucoup! Vous pouvez le servir avec de la visite et cacher la bouteille si vous faite affaire avec des amateurs de vin! Ça reste un vin assez connu et l’appellation est également assez connue. Encore là, risqué d’offrir en cadeau, selon le cercle d’amis que vous fréquentez…

Pour plus d’information ou pour acheter ce vin sur le site de la SAQ : http://www.saq.com/webapp/wcs/stores/servlet/ProductDisplay?catalogId=10001&storeId=10001&productId=55281&langId=-2&parent_category_rn=11749&top_category=

Jackson-Triggs Esprit Sélection Spéciale

En plus d’encourager l’économie locale (Canada), il s’agit d’un vin très bien après quelques gorgées pour seulement 11,20$ . Je prends ce vin à l’occasion avec du poulet, pas vraiment avec de la viande rouge… Je n’utilise pas la carafe, sûrement pour des raisons de respect envers notre vin canadien (au dessus de la carafe voyons!). Étant un produit local, bien que peu dispendieux, il n’est pas trop gênant de l’offrir en cadeau ou bien de le servir à votre visite, s’ils n’aiment pas, vous aurez toujours l’argument que c’est un produit local. Peut être servi à des amis étrangers, ne croyant pas trop à notre production de vin, ils seront surpris!

Pour plus d’information ou pour acheter ce vin sur le site de la SAQ : http://www.saq.com/webapp/wcs/stores/servlet/ProductDisplay?catalogId=10001&storeId=10001&productId=97301&langId=-2&parent_category_rn=11749&top_category=

Borsao Campo de Borja 2008

Un bon petit vin d’Espagne à 11,90$ . Je l’apprécie particulièrement avec des poitrines de poulet à la dijonnaise. Pas très connu, il s’offre bien autant en cadeau qu’à la visite. Jamais mis en carafe, je devrais essayer pour voir la différence.

Pour plus d’information ou pour acheter ce vin sur le site de la SAQ : http://www.saq.com/webapp/wcs/stores/servlet/ProductDisplay?catalogId=10001&storeId=10001&productId=89579&langId=-2&parent_category_rn=11749&top_category=

Shiraz Two Oceans Western Cape 2009

La on commence à jaser et entrer dans la crème du vin cheap… À 11,95$ c’est un des meilleurs rapports qualité-prix que je connaisse à la SAQ… De plus en plus populaire, plusieurs connaissent son bas prix ce qui peut rendre risqué de l’offrir en cadeau. Je n’ai par contre aucune honte à l’offrir à la visite avec un bon repas. Pas besoin de carafe pour ce vin, quoi que ça pourrait l’améliorer (une carafe c’est chiant à laver), il est excellent avec la viande rouge, fondue et raclette.

Pour plus d’information ou pour acheter ce vin sur le site de la SAQ : http://www.saq.com/webapp/wcs/stores/servlet/ProductDisplay?catalogId=10001&storeId=10001&productId=95521&langId=-2&parent_category_rn=11749&top_category=

Cabernet-Sauvignon Jacob’s Creek South Eastern Australia 2007

À mon avis, le meilleur rapport qualité-prix que j’ai eu la chance de goûter à ce jour à la SAQ. À la limite du cheap (moins de 15$) à 14,90$, un vin passe partout mais que j’apprécie encore une fois avec la viande rouge, fondue et raclette. Pour les amateurs de vin avec du tonus, sans pour autant être ultrafortuné, ce vin est pour vous, une petite gâterie de 15$ une fois par semaine, vous le méritez bien. Dans mes goûts à moi, en compétition directe avec plusieurs vins de près ou supérieurs à 20$.

Pour plus d’information ou pour acheter ce vin sur le site de la SAQ : http://www.saq.com/webapp/wcs/stores/servlet/ProductDisplay?catalogId=10001&storeId=10001&productId=91023&langId=-2&parent_category_rn=&top_category=

Il s’agit de mes goûts personnels. À mon humble avis, aucune raison d’acheter un Relais des Oliviers à l’épicerie autre que des raisons d’heures d’ouverture de la SAQ en connaissant une liste comme celle-ci.

Bonne bouffe!…



François Viens
1 avril 2010

Un retour en arrière s’impose en développement Web

MAJ : Billet rédigé le 1er avril 2010… Tentez de saisir l’ironie dans les propos!

On ne peut pas se cacher le fait que le Web a beaucoup changé au cours des dernières années. Pour le mieux vous direz? Je n’en suis pas sûr… À force de travailler dans le Web, notre vision s’éloigne de la vision des utilisateurs, les vrais québécois à moitié techno… Ce qui avec le temps est devenu la norme de qualité est alors critiquable si elle ne correspond pas aux goûts des utilisateurs… et c’est pour eux que nous faisons tout ça après tout…

Voici donc une liste d’anciennes pratiques Web à reconsidérer sérieusement dans vos prochaines réalisations :

1 – Utilisation abondante des GIF animés

Voilà une pratique qui est de plus en plus rare alors qu’elle répondait à un besoin ultra intéressant : attirer l’attention. Il est vrai que ce n’est pas ce qu’il y a de mieux au niveau esthétique mais croyez vous que le concessionnaire d’autos trouve la banderole soufflée, les franges bleu blanc rouge ou encore les drapeaux et ballons jolies? Peut-être que oui, peut-être que non, mais ça marche, ça attire l’attention… Comment résister à des images comme celles-ci?

2 – Splash Page Français English

Voulez-vous vraiment courir le risque d’afficher de l’anglais pour un visiteur français ou l’inverse?? Ne prenez pas chance, c’est tellement simple de régler cette question avec la fameuse « splash page »… et si vous avez la chance, profitez de l’occasion pour insérer un clip musical, c’est l’endroit tout indiqué!

3 – Utilisation des Frames

Après l’utilisation des GIF animés et de musique de toutes sortes, il est certain que votre site Web peut sembler un peu lourd à charger. Ne vous en faites pas, les « Frames » sont là pour ça! Ça permet de ne charger que le contenu nouveau d’une page à l’autre sans perturber l’emplacement de vos amis graphiques hyperactifs.

4 – Thématique des pages

Chaque page comporte un message différent. Comment  véhiculer un message différent si le « layout » reste le même? Ça me semble incohérent… Les nouveaux sites Web sont trop standardisés, plus de sentiment de personnalisation… Changez les couleurs, les polices et n’ayez pas peur de changer le menu de place ou de tout simplement le retirer, ça prend généralement beaucoup trop de place de toute façon…

5 – Largeur et hauteur fixes

Il est beaucoup plus simple et plus jolie de fixer une largeur et une hauteur et de jouer avec le contenu pour s’assurer que ça ne dépasse pas trop… Après tout, c’est de cette façon que sont pensées les nombreuses publicités papier et s’il y a encore autant de publicités imprimées c’est que c’est la méthode la plus efficace! Faire votre site Web compatible en 8.5 X 11 vous permettra également d’utiliser le même designer que vous utilisez pour votre impression. Si vous avez un designer Web, formez le à utiliser FrontPage ou autre outil, il sera ainsi de nouveau rentable.

6 – Pas trop de texte SVP

Tout le monde le sait, personne ne lit sur Internet… donc ça ne sert à rien de mettre trop de texte. De plus, tant qu’à réduire la quantité de texte, en partie pour que ça rentre dans votre largeur et hauteur fixe, autant transformer ce texte en image. Ce genre de pratique permet l’utilisation des différentes polices non Web et facilite également la mise à jour du site Web car vous n’aurez qu’à éditer vos JPG avec un éditeur d’image… fini le cassage de tête avec les « balises ».

7 – Utilisation de talbeaux (table)

Tout le monde est parti sur un tripe de ne plus utiliser de tableaux… bon bon bon… Au niveau programmation, qu’est-ce qui est le plus facile de travailler avec : un fichier word ou un fichier Excel sous CSV? C’est clair que c’est le fichier Excel… La structure en tableaux ne peut donc pas être si mauvaise que ça pour structurer les données. L’autre avantage de l’utilisation des tableaux est l’affichage parfaite dans les différents navigateurs si on s’assure d’avoir un premier TR définissant toutes les colonnes mais à 1 pixel de hauteur et en insérant des images blank.gif aux bons endroits, on est en business!  Si ça marche pas bien à cause d’un mélange dans les rowspans et les colspans, montrez le concept de base à vos enfants, ça va les occuper pendant de longues heures!

8 – Retour au forum

Depuis quelques années on ne voit presque plus de nouveaux forums… mais des milliers de nouveaux blogues… Il s’agit d’un très mauvais choix technologique… Le blogue vous oblige à créer du contenu sur une base régulière. Le forum en contrepartie vous permet de déléguer à 100% la création de contenu par une couple de pas de vie qui vont venir chialer sur la plateforme… pensez-y!

9 – Noms de domaine

Ne prenez pas de chance, réservez le plus de noms de domaine possible… Pensez à toutes les façons étranges d’écrire le nom de votre entreprise et réserver chaque version du nom de domaine dans les 10 ou 12 extensions disponibles… Ainsi, vous êtes certains d’accrocher votre visiteur. N’oubliez pas également de vous assurer que le site Web fonctionne peu importe le nom de domaine qu’on utilise. Tant qu’à parler des noms de domaine, choisissez le forfait d’hébergement le plus « cheap » même s’il est aux îles « moukmouk »… Après tout un site Web est une dépense considérable et tout votre argent doit être réservé pour avoir le plus grand nombre de noms de domaine possible alors autant diminuer le coût de l’hébergement.

10 – Faites le dont vous même

Pourquoi engager des similis experts? Une page Web, c’est pas tellement compliqué à faire et il existe une multitude d’outils pour vous aider! Ne gaspillez pas votre temps et votre argent, télécharger Front Page et amusez-vous! Il est vrai qu’au niveau SEO (être dans les premiers dans Google) ce ne sera pas parfait… mais bon… qui veut être sur Google alors qu’il est si simple d’être dans les pages jaunes? Et si jamais vous désirez améliorer votre sort sur Google, simplement mettre des mots clés à la tonne écrits en blanc sur fond blanc…

Bien entendu, il aurait été facile de continuer pendant longtemps cette liste de nouvelles vieilles bonnes pratiques :

  • whatever les aveugles
  • DHTML is so king
  • maximiser les meta keyword
  • le CSS : trop compliqué
  • Flash est votre ami
  • tout le monde est sur IE anyway
  • doubler votre contenu avec des pages pour impression
  • title « sans titre » c’est plus simple
  • évitez de payer l’hébergement en étant dans un sous répertoire du site de votre webmestre
  • faites vos formulaires en PDF
  • maximiser son utilisation des popups
  • pas plus que 500$ s.v.p.

Bon développement Web!