A quick overview on the advantages to architect you HTML in an “Object Oriented” approach

I am reading quite a few comments on mailing lists about how they’d like to improve the markup but show what we were doing many years ago. Ahem. When we were NOT yet doing HTML5.

I would like to remind that OOCSS as far as I recall is to use CSS selectors in an Object Oriented approach.

Nicole Sullivan, who coined the term made it pretty clear.

Separate CSS effects and assemble afterward.

Namely, separating:

  • Structure and Skin
  • Container and Content

Just think of things for their use, more than the specifics:

  • helper link beside input
  • placeholder where form buttons are
  • Region where there is call to action
  • Label is beside input/label over input
  • Error message in any case possible

With the following requirement:

All this and more are the benefits of imementing OOCSS

I recommend to have a look at markup libraries such as Twitter bootstrap, jQuery UI Bootstrap (jQuery UI, writing Twitter Bootstrap markup), Kickstrap, Zurb Foundation, Pea.rs, and others. I have a list on my delicious account tagged as css+framework

As an example of this concept, I wrote a plugin to create a form confirmation window using only two class names.

References

devLAB Montréal c’est maintenant parti!

Je l’avait annoncé. Nous avons particié a des événements, joints d’autres. Maintenant, depuis Janvier 2011, à tous les mercredis, nous vous invitons a vous joindre a nos rencontres. Donc,depuis cinq semaines maintenant nous hébergeons au public nos ateliers de travail qu’on appelait nos GeekNights maintenant surnommé devLAB.

Comment devLAB a commencé?

Tout a commencé en 2006. Le besoin est né après plusieurs mois à discuter de technologie a deux (avec Etienne) a prendre une bière au 3Brasseurs et de parler de binaire, netmask… vous savez, des trucs de Geeks. Nous avons joins notre  vieil ami Stephan et nous avons officialisé le pacte que nous avons tenu de 2006-2009. Une fois par semaine tous les Mercredis soir nous suivions ce concept:

  1. Se rencontrer peu importe la charge de travail au bureau
  2. Faire avancer une idée
  3. Utiliser quelque chose qu’on a jamais utilisé avant
  4. Pratiquer les méthodologies pour prendre les plis qu’on ne pouvait pas toujours prendre au bureau

Parfois nous en faisions des CodeFests qui duraient une fin de semaine complète. D’autres fois nous invitions des amis a jouer avec nous sur des sujets divers.

Continue reading “devLAB Montréal c’est maintenant parti!”

Réalisation de l’intégration du site de Jean Émond [2008]

Pour ajouter a ma collection de billets de mon Portfolio professionnel j’ai fait en 2008 ce petit site.

J’ai de la difficulté à trouver des mots pour decrire ce projet. Un pamphlet publicitaire est le nom le plus près de ce que je peit utiliser pour decrire.

Contrairement aux autres clients que j’ai eu je n’ai pas rencontré le client directement.

Intégration HTML/CSS

Le but était principalement de refaire la brochure PDF en version web. Il a été fait en deux itérations comme vous pouvez le voir sur les captures d’écran.

Captures d’ecran

Voir le site Jean Emond.ca

Réalisation site Manoir Saint-Francis faits avec GéraniumCMS [2007]

Manoir Saint-Francis : Page avec images cartes généré par GéraniumCMSDans ma série d’articles ou je parle des sites que j’ai fait dans le passé. J’ai mentionné quelques fois que j’utilisait GéraniumCMS. Le projet du site du Manoir Saint-Francis à Magog, est l’un des derniers déployés.

Derniers sites faits avec GéraniumCMS

J’était en emploi chez TechSolCom Groupe informatique depuis quelques temps déjà et un ancien client de Inexis a voulu que je fasse un site pour lui.

Le contexte général du projet est comme il l’est souvent. Un graphiste me fournit des planches Photoshop et je dois le rendre identique en HTML.

Gallerie d’images

Réalisation du Micro-site de l’Initiative Environnementale de la Ville de Sherbrooke [2006]

Environnement * Ville de Sherbrooke : Accueil

Ce micro-site était une manière d’afficher aux citoyens de la Ville de Sherbrooke les ressources disponibles (en 2006) pour participer aux précautions relatives aux matières résiduelles domestiques et commerciales du territoire. Le site actuel est maintenant partie intégrante du portail officiel.

Le travail avait été donné a Tatou communication visuelle de s’occuper du projet et Inexis Solution Web Inc était l’exécutant qui devait intégrer les maquettes graphiques pour les transformer en documents HTML.

Continue reading “Réalisation du Micro-site de l’Initiative Environnementale de la Ville de Sherbrooke [2006]”

Plugin MODx pour générer automatiquement les balises ABBR et autres pour chaque page

Il s’agit d’un plugin que j’ai fait, en PHP 4 il y a deux ans pour MODx 0.9.6.3, pour un site web et je pense qu’il vaut la peine que je partage le code avec la communauté.

Le plugin sert a entourer des mots définis dans un fichier CSV (séparé par des virgules) dans le contenu qui est retourné par le CMS.

 

LA SITUATION

Lorsque je travaillait sur ce site web, mon employeur et mon collègue nous étions donné comme objectif de paufiner l’Ergonomie et l’Accessibilité du contenu. Ce qui est dommage c’est qu’il n’a jamais été évalué par AccessibilitéWeb. J’ai pourtant reçu la formation pour évaluer les sites… mais je préfère, personnellement, programmer des applications.

 

Continue reading “Plugin MODx pour générer automatiquement les balises ABBR et autres pour chaque page”

Réalisation (jamais publiée) du site de Savon des Cantons [2005]

Savon des cantons : logo Il s’agit d’une de mes dernières réalisation avant un an et demi sans produire de sites web sous la tutelle de Inexis Solution web Inc.

Avec le recul, j’ai réalisé que ce site m’a appris une bonne leçon: Savoir les conditions et les deal-breakers possibles avant de commencer a produire quoi que ce soit!. C’est pour cette raison que j’avait arrêté Inexis Solution web: Je ne pouvait plus travailler seul.

Continue reading “Réalisation (jamais publiée) du site de Savon des Cantons [2005]”

Réalisation du site et de l’Image «branding» de Beebox [2008]

beebox.ca : Page Accueil

 

Comme j’en ai parlé dans ce billet j’ai eu plusieurs rôles dans la réalisation du logiciel beebox. L’un d’eux était de m’occuper de l’image du produit.

Pour résumer l’usage du produit je vous laisser aller visiter le site web (beebox.ca) mais pour ce qui me concerne j’ai conçu et entretenu l’image du produit jusqu’en 2009.

 

Continue reading “Réalisation du site et de l’Image «branding» de Beebox [2008]”

Réalisation du site Musé des Beaux Arts de Sherbrooke [2005]

Extrait de la page d'Accueil

 

Dans la lignée de vouloir apporter a mon blogue l’accumulation de mes réalisations j’ai pensé vous montrer mon travail avec le Musé des Beaux Arts de Sherbrooke. J’ai fait ce site en 2005. Encore ici je n’ai pas conservé de rapport sur la durée du travail que j’ai investi dans ce mandat car à l’époque je ne faisait pas de suivi là dessus.

Détails
Graphisme Tatou Communication visuelle
Date de réalisation Septembre 2005
Nom de domaine mbas.qc.ca

Continue reading “Réalisation du site Musé des Beaux Arts de Sherbrooke [2005]”

Réalisation de l’Interface logiciel Beebox [2007]

Rapports de séquence
Rapports de séquence

J’ai eu la chance de travailler sur l’interface d’un logiciel fait en Java avec Struts.

A quoi sert le logiciel

Ce logiciel sert pour automatiser les déploiements des versions selon l’idéologie du Développement en mode «Intégration continue». Bref il est utilisé pour créer des suites d’actions programmables qui peuvent être répétées au besoin.

Histoire brève

Au début le logiciel s’appelait TSCM et était utilisé chez quelques clients dont Téléfilm Canada et la Banque Nationale du Canada dans un département que je ne mentionnerai pas. Dans le but de le rendre plus grand public nous avons changé le nom et remonté l’image.

Continue reading “Réalisation de l’Interface logiciel Beebox [2007]”

Réalisation du site de Remises Réal Lamontagne [2004]

Page fabriquez votre remise
Page fabriquez votre remise

Parmi les sites que j’ai fait dans les dernières années. Celui de Remises Réal Lamontagne était parmi les plus agréables a travailler. L’équipe de IMACOM (sherbrooke) avait fait un très beau travail. Chacun avait sa tâche de fait et mon travail consistait qu’a intégrer en html valide le code.

C’est aussi l’un des derniers sites que j’ai fait en utilisant Macromedia Dreamweaver.

Continue reading “Réalisation du site de Remises Réal Lamontagne [2004]”

Réalisation du site de Câble Axion [2006]

Voir la consommation modem
Voir la consommation modem

Dans la série de billets sur mes réalisations j’aimerai donner mon avis sur le travail que j’ai fait pour Câble Axion.

Contexte

J’ai travaillé là pendant un an entre Octobre (environ) 2005 et Novembre 2006. Mon emploi était dit comme étant programmeur d’applications pour améliorer les processus de travail de l’entreprise du point de vue support technique pour les départements de services Internet et télé numérique.

J’ai donc travaillé sur les bases de données accès en Microsoft Access puis ensuite j’ai fait un travail d’intégration sur le site corporatif (ce 30 octobre 2009, c’est encore mon travail qui est aparent pour une bonne partie).
Continue reading “Réalisation du site de Câble Axion [2006]”

Pourquoi tout ces caractères bizzares?

UNE SOLUTION A ÉTÉ PUBLIÉE

J’ai enfin réglé la situation! J’ai pris du temps avant de le faire, mais j’ai réussi. Suite sur Comment remplacer les caractères bizzares dans WordPress lorsqu’on a mal fait la conversion.

C’est dommage.

C’est pour rester poli car vous pouvez vous imaginer que ça me met pas de bonne humeur ;)

Les lettres bizzares qui remplacent les accents (é, √ä)… c’est un problème de traduction de «Character set».

Pourquoi?

Parceque j’ai fait la gaffe de ne pas «Backuper» ma base de donnée de mon blogue avant de faire une mise a jour sur le serveur des Geeks et après l’avoir réinstallé.

Ça m’apprendra!

Il faudrait donc que je regarde chaque endroit où j’écris en français et que je corrige «à bras».

Mais j’en ai pas envie!

Alors je suis, présentement, en train de faire un programme en PHP pour corriger la situation. Une fois qu’il sera terminé, je compte le publier ici ;)

En attendant?

Voici ce que signifie chaque symbole… en attendant que j’applique sur toute ma base de donnée les corrections:

  • √© = é
  • √â = É
  • √† = à
  • √® = è
  • √™ = ê
  • √¢ = â
  • ‚Äô = ‘
  • ¬´ = «
  • ¬ª = »
  • √ß = ç
  • √π = ù
  • √ª = û
  • √Æ = î

Si vous permettez, je vais retourner tenter de régler le problème :)

Accessibilité et les liens externes

Il existe plusieurs normes en accessibilité du web qui demande des choses qu’on ne prend pas nécessairement le temps de faire.

Soit que c’est pas manque de temps, trop de choses à penser, ou on n’y pense simplement pas.

Dans cet article j’exprime mon opinion sur l’importance (du point de vue utilisabilité) des icones de liens extérieurs. Plus tard je montrerai une méthode pour automatiser [EDIT 2009-08-23] J’ai documenté comment faire dans Manipulation des liens extérieurs et les popup pour améliorer l’Accessibilité.

Continue reading “Accessibilité et les liens externes”