Enfin! J’ai refait mon site

Après plusieurs mois a avoir une partie du projet de fait, et laissé là. J’ai mis en ligne.

C’est la saison des refontes de sites personnels à ce qu’il paraît, beaucoup de monde l’ont refait.

Il n’est pas parfait. Il n’est pas final. Mais il est utilisable et en meilleur état que la version précédente.

Pourtant ça faisait un bon moment que j’avait déjà de quoi de fait. Mais je voulait faire plus grand!

Comme je disait, l’intégration était déjà faite avec mon espace de travail sous Yeoman (Grunt), les patterns de RoughDraft.js et Twitter Bootstrap, tout était prêt sous forme statique (voir le styleguide).

Avant de publier, je voulait en plus;

Puis un moment donné je me suis dit:

Je veut juste publier!

Deux soirs de travail plus tard, tout a été intégré dans WordPress!

C’est une leçon de vie: apprendre en utilisant de nouvelles techniques, mais c’est important aussi de livrer.

Même pour des projets personnels.

Fonctionnalités

  • Écriture sous format Markdown
  • Servi via SSL seulement
  • Caching du contenu avec Memcached
  • Billets balisés avec micro-format RDFa

Outils de travail utilisé

  • Thème enfant de Roots, adapté
  • Twitter Bootstrap, avec mon propre thème utilisant LESS

J’ai aussi crée une maquette statique spécifiquement pour le balisage HTML. Tout ceci dans le but de me concentrer sur l’aspect intégration web du projet, à coté de la partie blogue, base de donnée ou serveur.

Pour ceux que ça intéresse, j’ai commencé a utiliser intensivement Yeoman et RoughDraft.js.

Voir le Styleguide statique de mon site web

À venir

Maintenant que le site est en ligne, j’ai déjà prévu d’autres choses pour l’améliorer.

Notamment:

  • Migration du serveur web sous NGINX avec module SPDY (au lieu d’Apache)
  • Caching HTTP seulement (Varnish ou Memcached, a déterminer)
  • Quelques effets Javascript chargés progressivement
  • Relire, et corriger tout le contenu (ce billet n’a pas été révisé, je l’ai écrit rapidement)
  • Ajouter de nouvelles vues

Mercis

Je voulait donner un beau merci à Gabriela Viana qui est la responsable du design de mon site.

Creating and using Javascript events while combining events on two separates behaviors

I discovered something that chocked me: Did you know that the ‘click’ event is only a string and you can create any event name you may want? Here is an experimentation example.

During web development, it often happens you want to attach events handler on something in your page. A common usage could be you want to flip a plus sign to a minus sign when you click on a button.

<a href="/some/url/324" class="flip-icon" data-target="#generated-324"><i class="icon-plus"></i></a>

Later in a script you may be compelled to do something similar to the following (assuming you are using jQuery):

$(document).ready(function(){
// Rest of the document in document.ready
// DO NOT USE AS-IS, SEE LAST EXAMPLE

    $('.flip-icon.).click(function(event){  
        event.preventDefault(); 
        var clicked = $(this);
        var flipElement = clicked.find('i');
        if (flipElement.hasClass('icon-plus')) {
            flipElement.removeClass('icon-plus').addClass('icon-minus');
        } else {
            flipElement.removeClass('icon-minus').addClass('icon-plus');
        }
    });
});

But what happens if you want to add other events such as, for example, activating an accordion. You may end up with duplicating events and get some collisions.

Did you know that the ‘click’ event is only a string and you can create any event name you may want?

To describe what I am refering to, I have a add an other behavior that will also, in part, require the previous example.

Imagine we have an accordion managed already grabbing the element’s a[data-target] click event handler.

$(document).ready(function(){
// Rest of the document in document.ready
// DO NOT USE AS-IS, SEE LAST EXAMPLE

    $('a[data-target]').click(function(event){
        // do the accordion stuff
    });
});

But, what if for some reason, our page has to reload some sections and our event handler managing the a[data-target] click gets lost

Instead, of creating a click specific event handler (what if we want to change) and be potentially lost with the element to attach event onto.

You can use jQuery’s on method and attach an event to the <body>, a safe element that every document has.

Things to note about the on method:

  • First parameter is an event name, can be ANYTHING (yes, you read it), space separated
  • Second element is on what to listen, can be null
  • a Function object to handle the event

Also, there is nice thing about bubbling.

When an event happens, the event crawls the DOM up to the body (called ‘catch’) then gets back to the triggerer element (called ‘bubbling’) and firing in that order all event handlers.

Knowing all of this now, instead of attaching a single event type handler to a specific element, let’s take advantage of our new knowledge.

'use strict';
$(document).ready(function(){
// Rest of your document

    // Look at the 'flip-my-icon-event', we just made-up that one. See below.
    $('body').on('click flip-my-icon-event', '.flip-icon', function(){
/* Look here     *************************                                       */
        // Let's put it also in a self-executing anonymous, to isolate scope
        (function(triggered){

            // Same as earlier.
            var clicked = $(this);
            var flipElement = clicked.find('i');
            if (flipElement.hasClass('icon-plus')) {
                flipElement.removeClass('icon-plus').addClass('icon-minus');
            } else {
                flipElement.removeClass('icon-minus').addClass('icon-plus');
            }
            // End same as earlier

        })($(this)); // this fires the self-executing.
    });

    $('body').on('click', 'a[data-target]', function(event){
        event.preventDefault();

        // do the accordion stuff
        var collapsible = $($(this).attr('data-target'));
        if (typeof collapsible.attr('data-collapsible') === 'undefined')  {
            collapsible
                .collapse()
                .attr('data-collapsible', 'applied')
                .on('show', function(){
                    jQuery(this).parent().removeClass('is-hidden');
                })
                .on('hide', function(){
                    jQuery(this).parent().addClass('is-hidden');
                });
        // End do the accordion stuff

        jQuery(this).trigger('click').trigger('flip-my-icon-event');
/* Look here                         *******************************        */
        }
    });
});

The following works, because of the following trigger html pattern, as from the begining:

<a href="/some/url/324" class="flip-icon" data-target="#generated-324"><i class="icon-plus"></i></a>

And of the following:

  • We have an icon for .icon-plus and .icon-minus class names
  • The a[data-target] attribute has ALSO a .flip-icon class name
  • The a[data-target] triggers our made-up flip-my-icon-event event to an element that also matches (see the two ‘look here’ comments)

References

Conférence: Comment évaluer le niveau de qualité d’un site web selon les techniques d’intégration web d’actualité

Sur scène durant ma présentation donnée au Web-In 2013 quelques mois avant le WAQ

Cette semaine, je fait une conférence pour la deuxième fois de ma présentation qui décrit les pratiques en intégration web qui sont d’actualités.

La première fois que j’ai présenté c’était pendant le WebIn 2012, et cette-semaine c’est à Québec pendant la conférence Web à Québec 2013 (WAQ).

Cette fois-ci, j’aurai l’honneur de présenter tout juste avant une personne que j’admire; Jonathan Snook.

Audience

L’audience de cette présentation est principalement les gens qui travaillent avec le web, qui engagent des programmeurs/intégrateurs et qui veulent comprendre les dernières tendances et le pourquoi elles sont populaires.

Comme une valeur ajoutée, j’illustre avec des exemples concrêts et compare les outils vis à vis leur utilité.

 

Synopsis

La façon de concevoir des sites Web a beaucoup évolué au cours des deux dernières années. Concevez-vous encore vos sites comme en 2009? Trouvez-vous vos sites lents? Êtes-vous web-responsable? Imaginez si vous étiez capable de gagner du temps.

Comment pouvez-vous être certain que votre pigiste, employé ou fournisseur fait un travail de qualité?

Nous allons couvrir des techniques clé qui permettent d’optimiser le travail, comment être plus efficace avec votre équipe technique et savoir jauger le son niveau d’expérience.

L’objectif de la séance est de donner des outils pour évaluer le niveau de qualité d’un site web; des pistes pour en améliorer la performance et s’assurer de pouvoir en entretenir le code après plusieurs révisions.

 

Trois questions qui seront répondues dans la conférence

  1. Que faire pour optimiser la communication lors de l’établissement du cahier de charge
  2. Quelles techniques ont été découvertes pour éviter le gaspillage lors de la réalisation
  3. Indicateurs de qualité qu’on peut retrouver dans le HTML/CSS

 

Les «slides»


Télécharger en format PDF

 

Réception

Je ne m’attendait pas vraiment au succès de ma présentation durant la conférence, c’était une belle surprise.

Mon ami François Légaré a pris cette photo:

Il y avait foule lors de ma présentation au Web à Québec

 

Merci à

  1. @gabiviana: Gabi Viana pour les visuels
  2. @joplam: Josée Plamondon pour la révision
  3. @cybik: Renaud Lepage pour la révision
  4. @vivrass: Martin Provencher pour l’inspiration de l’angle technique à couvrir.

Comment je valide et convertit des documents HTML trop chargés ou provenant de Microsoft Word en HTML valide et simplifié

Description

Cette procédure est faite optimiser la conversion document word en html, spécialement ceux qui sont généré avec beaucoup de «tagsoup» en en simplifier a sa plus simple expression html. Valide.

Sauter à la Procédure

Exemple

Avant
<h2 class="Standard" dir="ltr" lang="fr-FR" style="margin-top: 0; margin-bottom: 0; text-align: center;" xml:lang="fr-FR">
  <span lang="en-CA" style="font-weight: bold; font-size: 16.0px;" xml:lang="en-CA">TERMS AND CONDITIONS OF 1</span> <span lang="en-CA" style="font-weight: bold; font-size: 16.0px;" xml:lang="en-CA">‐</span> <span lang="en-CA" style="font-weight: bold; font-size: 16.0px;" xml:lang="en-CA">YEAR OR 30</span> <span lang="en-CA" style="font-weight: bold; font-size: 16.0px;" xml:lang="en-CA">‐</span> <span lang="en-CA" style="font-weight: bold; font-size: 16.0px;" xml:lang="en-CA">DAY ACCESS AND USE</span>
</h2>

<span lang="en-CA" style="font-weight: bold; font-size: 16.0px;" xml:lang="en-CA">OF THE SERVICE BY SUBSCRIBERS</span> <span lang="en-CA" style="font-weight: bold; font-size: 16.0px;" xml:lang="en-CA">SECTION 1</span> <span lang="en-CA" style="font-weight: bold; font-size: 16.0px;" xml:lang="en-CA">PURPOSE OF THE SERVICE</span>
Après
<h2>TERMS AND CONDITIONS OF 1 ‐ YEAR OR 30 ‐ DAY ACCESS AND USE</h2>

<span>OF THE SERVICE BY SUBSCRIBERS SECTION 1 PURPOSE OF THE SERVICE</span> 

 

Inspiration et pistes

  1. Convertir de format document en ligne de commandeDe Word2000 vers HTML, voir UNOCONV http://dag.wieers.com/home-made/unoconv/#download

 

 

 

Procédure 

Version abstraite

  1. Utiliser Open Office (ou peu importe) pour exporter le document en HTML

* Purifier via HTMLTidy
* Nettoyer les attributs inutiles avec la classe htmLawed 

Use cases

Document texte seulement

  • Pas de formulaire, ni images, etc
  • Idéal pour un document légal, par exemple.

Étapes concrètes:

  1. A partir du fichier HTML généré exemple: Fichier appelé “1.1.2.en.html”

* Extraire le fichier htmLawed.zip
 
cd ~
mkdir htmlawed
mv htmLawed.zip htmlawed/
cd htmlawed
unzip htmLawed.zip

Passer au travers de la classe htmLawed

require('htmLawed.php');
$config = array('safe'=>1,'elements'=>'a,em,strong,p,ul,li,ol,h1,h2,h3,h4,h5,div,tr,td,table','deny_attribute'=>'* -title -href');
$out = htmLawed(file_get_contents('in.html'), $config);
echo $out;

Rouler le script. Déplacer le fichier a utiliser, puis exécuter le script pour en générer dans out.html

cp ~/1.1.2.en.tidy.html in.html
php cleanup.php &gt; out.html</pre>

Rouler Tidy. Normaliser le fichier “1.1.2.en.html”, Nettoyer les balises, minuscules, etc

tidy --drop-font-tags 1 --logical-emphasis 1 --clean 1 --merge-spans 1 --show-body-only 1 --output-xhtml 1 --word-2000 1 --indent "auto" --char-encoding "utf8" --indent-spaces "2" --wrap "90" 1.1.2.en.html &gt; 1.1.2.en.tidy.html

tada!

Précautions

Ordre d’exécution des tâches

Remarque:

J’ai essayé de passer Tidy avant htmLawed et j’ai réalisé que le nettoyage de htmLawed est assez drastique et que Tidy rend le code plus propre. Sans oublier que htmLawed peut générer des balises vides que Tidy va éliminer.

Références

  1. Options Tidy
  2. htmLawed Documentation a PHP Html purification Class
    1. original documentation
    2. Example settings

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 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 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 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]”

Fait d’usabilité no3, Nous n’essayons pas de comprendre les choses, nous fouillons

dmmt_cover.jpg

Voici la suite de ma revue du livre que j’ai lu récemment qui traîte de l’Utilisabilité. Le livre s’appelait: Don’t make me think. A Common Sense Approach to Web Usability, voici un troisième fait qu’il est bien de considérer.

Attention à l’anglicisme;
Fact of life #3 > We don’t figure out how things work. We muddle through.

Continue reading “Fait d’usabilité no3, Nous n’essayons pas de comprendre les choses, nous fouillons”

Fait d’usabilité no2, Nous ne faisons pas de choix optimaux. Nous choisisons le premier choix cohérent

Couverture de Don't make me think a common sense of usability

J’ai dit il y a quelques semaines que je ferait une revue allégée d’un livre très inspirant qui traite de l’Utilisabilité (peut être un nouveau mot?).

Le livre s’appelait: Don’t make me think. A Common Sense Approach to Web Usability, voici le second point qu’il est important de considérer.

Attention à l’anglicisme;

Fact of life #2 > We don’t make optimal choices. We satisfice.

Continue reading “Fait d’usabilité no2, Nous ne faisons pas de choix optimaux. Nous choisisons le premier choix cohérent”