Site institutionnel de la TÉLUQ (2013)

Description

Ce projet est une refonte totale du contenu et du visuel de l'ancien site promotionnel que j'avais fait en 2010. Les contenus ont été réécrits entièrement et nous avons simplifié et clarifié plusieurs pages. L'accessibilité du site a été améliorée, le contenu HTML reste bien sûr valide aux normes du W3C et nous avons ajouté les microdata pour un meilleur référencement des pages.

Cette nouvelle version utilise beaucoup l'environnement Javascript JQuery, notamment sur la page d'accueil pour changer le bandeau et la zone clientèle. Mais aussi pour le menu déroulant, les infobulles, les accordéons et plus encore.

Au niveau des feuilles de styles, l'impression des pages est améliorée afin d'imprimer l'adresse de chaque lien après celui-ci. Il y a aussi un code QR qui s'imprime dans le coin de la page, qui permet d'accéder à la page imprimée avec l'utilisation d'un téléphone intelligent.

De plus, nous avons amélioré les statistiques de fréquentation du site à l'aide de Google Analytics. Nous l'utilisions déjà, mais on identifie maintenant quelles pages sont imprimées et quels sont les documents téléchargés en plus des liens sortants cliqués.

Mise à jour - mars 2014

Modification du site pour un affichage responsive. Il s'agit d'adapter l'affichage des pages pour offrir une meilleure lisibilité sur un téléphone ou une tablette.

Détails

Technologies	PHP, HTML, XML, XSL, MySQL, Oracle, CSS et JavaScript
Programmeur	Andy Harvey
Année	2013-2014
Visiter

Philippe Marquis

Description

C'est le site personnel du skieur Québécois Philippe Marquis. J'ai utilisé le Content Management System (CMS) nommé MODX afin de permettre au client de maintenir à jour son site Web.

Les particularités de ce site sont : multilingue, intégration des derniers statuts Facebook et Twitter de Philippe Marquis, fichiers multimédias (vidéos et photos) et calendrier des événements sur la page d'accueil.

Note : Ce site utilise l'environnement Javascript JQuery. De plus, je n'ai fait qu'une partie des scripts ainsi que le backend du site, soit l'intégration dans MODX.

Détails

Technologies	HTML, PHP, CSS et JavaScript
Programmeur	Andy Harvey
Année	2012

Pub Edward

Description

C'est le site du restaurant Pub Edward à Québec. La complexité de ce site est la navigation des bières qui utilise beaucoup de scripts asynchrones afin de charger les bières progressivement, sans recharger la page. De plus, on peut filtrer les bières par couleur, pays et importation, tout en combinant ces filtres. Après avoir fait un choix, on voit les autres options disponibles qui retourneraient au moins une bière et on désactive celles qui n'ont aucune correspondance. Je suis assez fier de cette fonctionnalité qui a été un beau défi.

Note : Ce site utilise l'environnement Javascript JQuery. De plus, je me suis occupé que des scripts comportant une communication asynchrone AJAX du frontend pour l'affichage des bières.

Détails

Technologies	HTML, CSS et JavaScript
Programmeur	Andy Harvey
Année	2012

32 Mars

Description

Ce site est le portfolio des différents projets réalisés par la compagnie. La complexité de ce site est la navigation qui utilise le principe de parallax. C'est-à-dire qu'il y a plusieurs images de fonds se déplaçant à des vitesses différentes pour donner un effet de perspective.

On peut naviguer à l'aide du menu, mais on peut aussi se déplacer dans le site à notre rythme à l'aide de la souris par le drag & drop.

Note : Ce site utilise l'environnement Javascript JQuery. De plus, je n'ai fait que le frontend du site (animations et interactivité).

Détails

Technologies	HTML, CSS et JavaScript
Programmeur	Andy Harvey
Année	2011
Visiter sur mon serveur (sans les données)

Ranch chez Ti-Gars

Description

Ce site donne l'éventail des services offert par le Ranch chez Ti-Gars ainsi que leurs coordonnées.

Note : Ce site utilise l'environnement Javascript Mootools pour la galerie photos.

Détails

Technologies	PHP, HTML, CSS et JavaScript
Programmeur	Andy Harvey
Année	2010
Visiter

Poussières d'oeuf (Œuvres de Myriam Bélanger)

Description

Ce site est un portfolio artistique ayant pour but de montrer et de vendre les toiles de Myriam Bélanger.

Note : Ce site utilise l'environnement Javascript JQuery, notamment sur la page d'accueil pour changer le bandeau.

Détails

Technologies	PHP, HTML, CSS et JavaScript
Programmeur	Andy Harvey
Année	2011-2013
Visiter

Site institutionnel de la TÉLUQ (2010)

Description

Ce projet est une refonte au niveau du code et du visuel de l'ancien site promotionnel que j'avais fait en 2006. Les changements au niveau du contenu se font graduellement. Le but était de remettre au goût du jour le visuel, tout en utilisant des contrastes assez grands pour l'accessibilité, ainsi que de rendre le contenu HTML valide aux normes du W3C.

Note 1 : Cette nouvelle version utilise l'environnement Javascript Mootools, notamment sur la page d'accueil pour changer le bandeau.

Note 2 : Les options d'accessibilités sont le bouton Inverser qui change la couleur de texte, de fond et les images pour un meilleur contraste et le bouton Changer la taille du texte qui permet d'agrandir la taille du texte sur tout le site.
Ces options sont gérés uniquement par des fichiers CSS.

Détails

Technologies	PHP, HTML, XML, XSL, MySQL, Oracle, CSS et JavaScript
Programmeur	Andy Harvey
Année	2009 - 2010
Visiter

Accessibilité VS accordéons

L'accessibilité sur le Web n'est pas toujours facile lorsqu'on veut utiliser certains type d'affichage tels que les accordéons ou les menus déroulants. JQuery offre des fonctions rapides comme slideToggle(), mais il faut les utiliser avec prudence.

Ces fonctions marchent très bien. Le problème est qu'on ne peut les utiliser si on souhaite rendre accessible aux lecteurs vocal l'information cachée, car les différentes fonctions de slide se terminent tous par la propriété display:none à l'état fermé. Et nous savons que les lecteurs vocal ignorent tout ce qui est caché avec display:none;

Heureusement, on peut tout de même utiliser cette présentation et cette animation tout en rendant le contenu accessible avec un peu d'imagination.

Le principe général est d'utiliser la classe "visuallyhidden" (provenant d'HTML5 Boilerplate) après l'utilisation de la fonction slideUp.

Le code

Prenons le code HTML suivant :

<div class="accordeon">
    <h2 class="toggler">Exemple de titre cliquable</h2>
    <div>
        <p>Le contenu texte de l'accordéon</p>
    </div>
    
    <h2 class="toggler">Second titre cliquable</h2>
    <div>
        <p>Autre texte d'accordéon</p>
    </div>
</div>

Voici d'abord la façon normale/courte (non accessible) d'utiliser les accordéons :

// Cacher les blocs de contenu d'accordéon au chargement
$(".accordeon > div").hide();

// Les boutons d'action pour ouvrir/fermer les accordéons
var togglers = $('.accordeon > .toggler');

togglers.click(function(){
	// Switch au click
	$(this).toggleClass("ouvert").next().slideToggle("fast", 'linear', function(){  });
	return false; // Prévient le navigateur d'activer la cible du lien
});

Voici maintenant le même comportement, mais en laissant accessible le contenu à l'état fermé grâce à la classe "visuallyhidden".

// Cacher les blocs de contenu d'accordéon au chargement (mais laisser accessible)
$(".accordeon > div").addClass('visuallyhidden');

var togglers = $('.accordeon > .toggler');

// Switch au click
togglers.click(function(){
	var me = $(this);
	var div = me.next();
	if (me.hasClass("ouvert")) {
		// Fermer, mais laisser accessible
		me.removeClass("ouvert");
		div.slideUp("fast", 'linear', function(){
			$(this).addClass("visuallyhidden").show();
		});
	}
	else {
		// Ouvrir
		me.addClass("ouvert");
		div.hide().removeClass("visuallyhidden").slideDown("fast", 'linear', function(){  });
	}
	return false; // Prévient le navigateur d'activer la cible du lien
});

On peut voir qu'il suffit d'appeller la fonction show() pour forcer la propriété display:block après avoir ajouté la classe "visuallyhidden" à la fin de la fermeture de l'accordéon (dans le callback). À l'inverse, il faut appeler la fonction hide() d'abord avant d'enlever la classe "visuallyhidden", puis appeller la fonction slideDown() pour ouvrir l'accordéon.

Mise à jour 30-11-2013.

Jusqu'ici, l'accessibilité proposée n'était que pour les lecteurs vocaux, mais il faut aussi penser à la navigation clavier! Voici un ajout pour faciliter la navigation au clavier (par tabulation). En bonus, j'inclus les attributs WAI-ARIA

// Cacher le bloc de contenu de l'accordéon au chargement
$(".accordeon").attr('aria-multiselectable', 'true'); // ARIA
$(".accordeon > div").addClass('visuallyhidden');

// Désactiver les liens des accordéons pour le TAB
$(".accordeon > div a").attr('tabindex', '-1');

var togglers = $('.accordeon > .toggler');

// Switch de l'ouverture à la fermeture au click
togglers.on('click keypress', function(e){
	// Exécute seulement si cliqué ou keypress avec la touche ENTER (#13)
	if(!e) {e=window.event;}
	var keynum = e.keyCode||e.which;
	if (e.type == 'keypress' && keynum != 13) {
		return true;
	}
	
	var me = $(this);
	var div = me.next();
	
	if (me.hasClass("ouvert")) {
		// Fermeture, mais laisser accessible
		me.removeClass("ouvert");
		
		div.find('a').attr('tabindex', '-1'); // Désactiver le TAB sur les liens
		div.attr('aria-hidden', 'true').slideUp('fast', 'linear', function(){
			$(this).addClass("visuallyhidden").show(); // Laisser accessible
		});
	}
	else {
		// Ouverture
		me.addClass("ouvert");
		
		div.find('a').attr('tabindex', '0'); // Permet le TAB sur les liens
		div.hide().removeClass("visuallyhidden").attr('aria-hidden', 'false').slideDown('fast', 'linear', function(){ });
	}
	return false; // Prévient le navigateur d'activer la cible du lien
});

// Initialise l'état de tous les accordéons (ARIA)
togglers.each(function(index, element) {
	var me = $(this);
	var div = me.next();
	
	// ARIA
	var id = div.attr("id");
	if (id == undefined) {
		id = 'AccPanel'+'-'+index;
		div.attr('id', id);
	}
	
	me.attr('tabindex', '0'); // Permet le focus sur le toggler (si pas un <a>)
	me.attr('aria-controls', id);
	me.attr('role', 'tab');
	div.attr('aria-hidden', 'true');
	div.attr('role', 'tabpanel');
});

Pour la navigation clavier, il faut "désactiver", à la tabulation, tous les liens lorsque l'accordéon est fermé. On y arrive à l'aide de l'attribut tabindex="-1". Notez que tout autre balise ou champ de formulaire pouvant obtenir le focus devrait être désactiver aussi à l'intérieur des accordéons fermés.

Voici le code CSS provenant de HTML5 Boilerplate :

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

CD-ROM (cours ADM 2013)

Description

Ce CD-ROM est un complément au cours ADM 2013 et contient des vidéos ainsi que des documents Powerpoint et Excel. J'ai dû apprendre VB.NET pour ce projet, créer un autorun et un setup pour installer les différentes composantes nécessaires à l'exécution du CD-ROM. Les outils utilisés sont : Microsoft Visual Studio, Autorun Magick Studio et Setup Factory.

Détails

Technologie	VB.NET
Programmeur	Andy Harvey
Année	2006

Quelques trucs et astuces

Voici quelques trucs et bonnes pratiques pour démarrer vos futurs projets.

CSS Table Grid

On a souvent besoin de spécifier des largeurs aux colonnes de tableau. Au lieu d'ajouter une ligne CSS à chaque tableau ou encore, de spécifier directement dans le code, on peut prévoir une série de classes pour avoir des dimensions en pourcentage (%), donc responsive. Par exemple t10 pour 10% et t20 pour 20% qui sont facile à se rappeler. Voici un exemple complet en action de ce que je veux dire. Remarquez que l'utilisation des largeurs en pourcentage permet d'avoir un site dit "responsive".

CSS Diagnostics

L'idée est d'utiliser les sélecteurs CSS afin de mettre en évidence le mauvais code (oublie de l'attribut alt) ou les éléments oubliés (balise vide).

*[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"] { border: 5px solid yellow !important; }
img[alt=""] { border: 3px dotted red !important; }
img:not([alt]) { border: 5px solid red !important; }

Pour plus d'exemples, visitez le site CSS-Tricks. Je vous conseil cependant d'ajouter !important à chaque instruction afin d'être certain de bien mettre en évidence tous les éléments. Idéalement, il vous faut bien sûr un navigateur assez récent, sinon, vous pouvez utiliser ces même sélecteurs avec JQuery afin d'ajouter une classe.

Centrer verticalement

Centrer dans un bloc avec les pseudos éléments (hauteur connue) : Voir le code ici.
Centrer dans un bloc avec display: table-cell; (hauteur connue) : Voir le code ici.
Centrer dans un bloc/fenêtre de façon responsive et de dimensions inconnues (%) : Voir le code ici (IE9+)
Centrer horizontalement et verticalement en absolu : Voir l'article ici.

Site institutionnel de la TÉLUQ (2006)

Description

Ce projet est une refonte quasi totale de l'ancien site institutionnel. Il a été grandement simplifié dans le but de faciliter la navigation pour les visiteurs et les étudiants. J'ai aussi développé des outils web afin de permettre aux employés d'effectuer la mise à jour eux-mêmes de certaines sections du site.
Ces outils sont utilisés pour : les actualités, la salle de presse et la calculatrice.

Détails

Technologies	PHP, HTML, XML, XSL, Oracle et JavaScript
Programmeur	Andy Harvey
Année	2005 - 2006

Select2 un plugin jQuery intéressant de listbox (balise <select>)

Nous savons que les éléments de formulaires sont difficilement stylable pour tous les navigateurs. Select2 permet de styler les listes de formulaire. Non seulement styler, mais aussi "pimper" celle-ci.

En effet, les listes à sélections multiples sont bien mieux présentées et l'option de rechercher parmis la liste est d'autant plus intéressante. Facile à utiliser, il suffit simplement de créer la liste en HTML, comme d'habitude, et d'appeler le script sur la liste en question. On peut aussi effectuer une recherche ajax et avoir le même comportement, en javascript, que l'attribut Placeholder d'HTML5 fonctionnant ainsi dans tous les navigateurs. Ce sont là des exemples qui peuvent être très utile et rapide d'intégration au lieu de créer son propre script.

Compatibilité

IE 8+
Chrome 8+
Firefox 3.5+
Safari 3+
Opera 10.6+

Pour voir des exemples et le télécharger : https://select2.github.io/

Générateur de Cadavre Exquis

Description

Ce programme génère aléatoirement des phrases contenant deux noms, un verbe et deux adjectifs. Il suffit d'entrer les mots désirés, puis de générer les phrases automatiquement. C'est un ami qui m'a donné l'idée de faire ce programme après avoir joué avec lui à ce jeu. Nous pigions des mots au hasard pour donner des phrases absurdes et comiques.

Pour voir la définition d'un cadavre exquis, visitez le site Wikipédia.

Pour un exemple plus concret, vous pouvez visiter ce site : Mots de tête.

Détails

Langage	Visual Basic 6
Programmeur	Andy Harvey
Année	2005
Taille	19.5 Ko
Télécharger

Bogue avec Fancybox et JW Player dans IE9

Je me suis confronté récemment à un problème vraiment étrange concernant l'affichage de vidéos avec JW Player et Fancybox dans IE version 9.Il s'agit, en réalité, plutôt d'un problème concernant l'utilisation de flash dans un iframe.

Mise en situation

Une galerie de vidéos utilisant Fancybox pour le cours HIS 1075 de la TÉLUQ. Chaque vidéo est une page externe affichée dans un iframe par Fancybox. Les pages vidéos utilisent JW Player pour créer, soit l'objet flash, soit la balise <video> HTML5.

Le problème

Lorsqu'on affiche plusieurs vidéos dans IE9, on voit que ça commence rapidement à être lent et à ne plus vouloir charger les vidéos/flash. En ouvrant la console, je me suis aperçu qu'il y avait plusieurs erreurs à la fermeture de Fancybox.

SCRIPT5009: « __flash__removeCallback » est indéfini

La solution

Voici donc ce qui a réglé mon problème. L'important se trouve dans la fonction beforeClose :

$("a.lienVideo").fancybox({
	'maxWidth'		: '720',
	'maxHeight'		: '540',
	'autoScale'		: false,
	'autoSize'		: true,
	'type'			: 'iframe',
	'beforeClose'		: function(){
		$('.fancybox-inner iframe').attr('src', $('.fancybox-inner iframe').attr('src'));
		$('.fancybox-inner').hide();
	}
});

L'explication est que lors de la fermeture de Fancybox, l'objet flash n'est pas réellement détruit dans IE9. Il faut recharger le contenu de l'iframe pour forcer la "destruction". En fait, je ne sais pas pourquoi ça marche et je m'en fou :)

IP Scanner

Description

Ce programme balaie les adresses IP ayant le port spécifié ouvert et lorsqu'il en trouve, il ajoute cette adresse IP à la liste. Il suffit de double-cliquer sur l'adresse IP pour l'ouvrir dans Internet Explorer. J'ai créé cette application afin de me familiariser un peu avec la programmation Internet.

Détails

Langage	Visual Basic 6
Programmeur	Andy Harvey
Année	2001
Taille	35.3 Ko
Télécharger

Optimiser les ressources lors du redimensionnements de la fenêtre

Si on exécute du code Javascript lors du redimensionnement de la fenêtre du navigateur (on resize), il peut être justifié d'optimiser le nombre d'appels afin de sauver des ressources processeur.

Une façon simple de sauter quelques rafraîchissements et d'utiliser un timer (setTimeout conjointement à clearTimeout).

Code habituel

$(window).bind('resize', function(e){
     // Code ici
});

Code optimisé

$(window).bind('resize', function(e){
    window.resizeEvt;
    $(window).resize(function()
    {
        clearTimeout(window.resizeEvt);
        window.resizeEvt = setTimeout(function()
        {
            // Code ici (exécuté après le 250 millisecondes)
        }, 250);
    });
});

Code JQuery optimisé

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// Utilisation:
$(window).smartresize(function(){
   // Code ici
});

Source 1

Source 2

Liens utiles

Cette section contient plusieurs sites que j'ai trouvés pour m'aider à programmer. C'est aussi une référence pour moi-même qui me permet de retrouver rapidement certains outils et sites utiles.

HTML / CSS

Sites	Descriptions
HTML5 Boilerplate	Propose une très bonne base HTML5/CSS/JS pour commencer un site Web. Idéal pour commencer à utiliser le HTML5! Supporte même les vieux navigateurs comme IE6.
How to Center in CSS	Outil offrant une façon de centrer verticalement et/ou horizontalement du contenu en CSS. Il suffit de décrire notre situation (hauteur inconnue, etc.) et d'indiquer nos besoins en terme de support des navigateurs.
CSS Almanac	Liste les différents sélecteurs et propriétés CSS. Ce site offre des exemples d'utilisation et indique le support des navigateurs.
CSS Reference	Liste les différents sélecteurs et propriétés CSS avec des exemples d'utilisation.
Can I Use	Ce site donne un tableau comparatif sur les différentes versions de navigateur indiquant le support des technologies (CSS3, HTML5 et bien plus). Site très complet pour vérifier si on peut utiliser, par exemple, les Box-shadow en CSS3 sur les navigateurs cibles qu'on veut supporter.
HTML5 Please	Ce site indique un recommendation des composants HTML5/CSS3 selon le support des différentes navigateurs. Il fournit aussi certains fallbacks disponibles.
Skeleton	Propose une base HTML/CSS de grille CSS en plus d'offrir une présentation minimale qui s'adapte à l'écran (Responsive Web Design). L'utilisation des @media queries est utilisée afin de présenter différemment la page selon la taille du navigateur. Prêt pour mobiles et tablettes.
Normalize.css	Feuille de styles de base. Contrairement aux nombreux reset, Normalize.css se contente de "normaliser" l'affichage pour tous les navigateurs. Ceci évite de devoir styler tous les éléments HTML soi-même.
Responsive Grid System	Une autre grille en CSS, mais cette fois, on peut plus facilement insérer son contenu dans les formats multiples de grilles. Contrairement aux autres systèmes de grille qui nous "oblige" à utiliser la largeur maximale de 12 colonnes par ligne, ce qui devient plus difficile de faire entrer 5 colonnes identiques. Ce système-ci est beaucoup plus souple et nous permet de créer des lignes de 2 à 12 colonnes comme on le désire, tout en ayant les mêmes dimensions. Voir l'exemple ici.
OpenWeb	Pour apprendre le HTML et le CSS.
Progressive Internet Explorer (CSS3 PIE)	Permet d'utiliser certains CSS3 dans Internet Explorer 6 à 8, comme les coins arrondis et les ombres. Ce que Firefox, Safari, Opera et Chrome supportent sans problème.
Stripe Generator	Ce site génère un carreau rayé comme on le veut (sens, couleur, ombre, etc.) Ça facilite beaucoup la création d'image de fond de ce style.
Formstone	Collection de composants pour front-end (CSS/JS)

Javascript

Sites	Descriptions
jQuery	jQuery est un excellent framework Javascript pour faciliter les effets visuels et le dynamisme des sites.
Modernizr	C'est un script qui détecte si les fonctionnalités CSS3/HTML5 sont supportés dans le navigateur et permet de préparer un fallback dans le cas où ce n'est pas supporté.
Prefix Free	Ce script permet d'utiliser les propriétés CSS sans leur préfixe. Il les ajoutera au besoin : webkit- moz- o- ms-
You might not need jQuery	C'est un site offrant plusieurs bouts de code JavaScript qui pourraient éviter d'inclure la librairie JQuery dans un site. Ceci permet d'alléger de beaucoup le téléchargement de scripts si on n'a pas besoin de fonctionnalités plus poussées.
JQuery 4u	C'est un blogue listant principalement des scripts JQuery intéressants. On y retrouve aussi beaucoup de tutoriels, du code et des articles.
CSS-Tricks	C'est un blogue proposant des articles intéressants sur Javascript, CSS, HTML et PHP.

PHP

Sites	Descriptions
The PHP Benchmark	Benchmark de codes PHP afin d'avoir de meilleures pratiques pour optimiser ses applications.
PHP Freaks	Articles, tutoriaux, références PHP/MySQL et scripts.
PHP.net	Site officiel de PHP. Il contient toute la documentation sur PHP.
PHP Builder	Articles et codes sources en PHP.
PHP Classes	Des classes téléchargeables pour PHP.
PHP Snippets	Plusieurs exemples de codes en PHP.

Référencement, optimisation, etc.

Sites	Descriptions
Fontastic	Fontastic offre un service de création de polices de caractères (fonts) personnalisables avec des icônes. L'utilisation d'icônes en fonts permettent l'utilisation d'images vectorielles sur lesquelles on peut ensuite appliquer n'importe quel style CSS.
Web Developer Checklist	Ce site offre une liste de vérifications pour optimiser un site.
The Accessibility Cheatsheet	Une liste de rappels et techniques pour rendre accessible votre site.
Browser Diet	Un guide pour améliorer les performances.
Google - Informations pour webmasters	Ce site donne l'information sur le référencement des sites Web par Google.
Google Analytics Setup and Configuration Tool	Outil permettant de configurer Google Analytics : recherche, page 404, objectifs et événements.
Guide de Google Analytics	Site expliquant plusieurs façons d'intégrer les fonctionnalités de Google Analytics.
Search Engine Tools	Ce site donne l'information sur les "robots" des engins de recherches (robots.txt).
Pingdom Tools	Cet outil donne une très bonne analyse des sites Web à scanner.

Mobiles

Sites	Descriptions
Detect Mobile Browsers	Detect Mobile Browsers offre des méthodes pour détecter si un site est vu sur un téléphone. Les scripts sont disponibles en PHP, JQuery, htaccess et plus.
Screensiz.es	Une grande base de données sur la taille des différents écrans d'appareils mobiles.
Real Favicon Generator	Créateur de favicon avec toutes les versions "nécessaires" pour cibler les appareils mobiles, tout en fournissant le code à insérer dans la page.

Autres

Sites	Descriptions
RegExr v2.0	Un site permettant de créer et vérifier des expressions régulières dans une chaîne de caractères.
Ink	Un outil de création de courriels responsive. Je m'en sert surtout l'outil d'inliner CSS avant d'envoyer des courriels.
Awesome SVG	Plusieurs articles et démos regroupés afin d'apprendre à utiliser les SVG.
Webfont generator	Création automatique de fonts dans tous les formats nécessaires pour le Web (woff, otf, etc.) et génère le code à utiliser.
Contrast Ratio	Ce site permet de calculer le contraste des 2 couleurs ensembles. Si l'accessibilité de votre site Web vous tient à coeur. Il existe aussi cette application qui fait très bien le travail (PC et Mac)
Hello Color	Ce site offre des exemples de couleurs aux contrastes élevés. Pratique si vous n'êtes pas graphiste (comme moi).
Placehold.it	Création automatique d'images (place holder) pour débuter un site. Exemple
Dynamic Dummy Image Generator	Un autre site de création automatique d'images.
Dummy Image Generator	Un autre générateur d'images, mais cette fois, on choisi parmi une banque d'images celles qui nous intéresse en spécifiant les dimensions désirées.
modern.IE	Vous permet de télécharger différentes versions d'Internet Explorer à utiliser dans une machine virtuelle, telle que VirtualBox. Idéal pour tester votre site dans de vieux IE ou sur une vieille version de Windows, par exemple.
OverAPI	Collection de plusieurs Cheat Sheets (guides).
Open Source Web Design	Design de sites Web gratuit.
Plain Pattern	Interface pour faciliter la création d'image en pattern.

Transactions bancaires

Description

Ce programme garde un historique des dépôts et des retraits que j'effectue dans mon compte bancaire. Il me permet aussi de savoir facilement combien d'argent il me reste en banque, et dans quel compte. J'ai créé cette application afin de savoir combien il me reste d'argent dans mon compte en banque séparément de mes prêts étudiants. Donc, je n'avais qu'à rentrer l'argent qui ne provenait pas de mes prêts ainsi que les dépenses non reliées aux études. Ce programme a remplacé un document Excel dont je me servais à l'origine. Je l'utilise encore aujourd'hui.

Détails

Langage	Visual Basic 6
Programmeur	Andy Harvey
Année	2003
Taille	22.3 Ko
Télécharger

Créer des rollovers d'images en noir et blanc

Voici une technique utilisant JQuery pour créer un effet en rollover sur des images. Il s'agit de créer une copie des images en modifiant les couleurs. Cette technique utilise le canevas provenant de l'HTML5. Il faut donc un navigateur récent pour que cela fonctionne. Dans le cas contraire, il y aura un effet sur l'opacité uniquement.

Feuille de styles

.img_wrapper { position:relative; overflow:hidden; display:inline-block; *display:inline; }
.img_wrapper img { position:absolute; }
.img_wrapper img.originale { z-index:500; }
.img_wrapper img.grayscale { z-index:700; } /* Fade sur cette image seulement, doit être au dessus */
.img_wrapper img.faux_grayscale { display:none; } /* Canevas non supporté */

La classe img_wrapper contiendra les images. N'oubliez pas de modifier ces styles selon vos besoins. Exemple : img_wrapper pourrait être en display:block ou encore float:left.

Code HTML

<img src="http://www.andyharvey.ca/uploads/blog/html/images/andy1.jpg" alt="" width="750" height="200" />
<img src="http://www.andyharvey.ca/uploads/blog/html/images/andy2.jpg" alt="" width="750" height="200" />
<img src="http://www.andyharvey.ca/uploads/blog/html/images/andy4.jpg" alt="" width="750" height="200" />
<img src="http://www.andyharvey.ca/uploads/blog/html/images/andy5.jpg" alt="" width="750" height="200" />

Code Javascript : fonctions de base

La fonction grayscale s'occupe de créer la copie des images en noir et blanc tandis que la fonction isCanvasSupported détecte si le navigateur supporte le canevas HTML5.

function grayscale(src){
	var canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');
	var imgObj = new Image();
	imgObj.src = src;
	canvas.width = imgObj.width;
	canvas.height = imgObj.height; 
	ctx.drawImage(imgObj, 0, 0); 
	var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
	for (var y = 0; y < imgPixels.height; y++){
		for (var x = 0; x < imgPixels.width; x++){
			var i = (y * 4) * imgPixels.width + x * 4;
			var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
			imgPixels.data[i] = avg; 
			imgPixels.data[i + 1] = avg; 
			imgPixels.data[i + 2] = avg;
		}
	}
	ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
	return canvas.toDataURL();
}

function isCanvasSupported(){
	var elem = document.createElement('canvas');
	return !!(elem.getContext && elem.getContext('2d'));
}

JQuery

Tout d'abord, on ne souhaite pas que les images soient affichées immédiatement (avant d'avoir créé l'équivalent en noir et blanc).

// Au DOM Ready
$(function(){
	// On cache les images
	$("img").css({opacity:0});
});

Ensuite, le reste du code JQuery doit être exécuté après que les images soient chargées. Donc, sur l'événement window.load

$(window).load(function(){
	var canvasOK = isCanvasSupported();
	
	// Clone les images
	$('img').each(function(){
		var el = $(this);
		
		el.wrap("<div/>");
		el.parent().addClass('img_wrapper').css({"opacity":"0.7","width":el.outerWidth(),"height":el.outerHeight()});
		el.clone().addClass('originale').css({"opacity":"1"}).insertBefore(el);
		
		if (canvasOK) {
			this.src = grayscale(this.src);
			el.addClass('grayscale');
		}
		else {
			el.addClass('faux_grayscale');
		}
	});
	
	// On montre les images chargées (grayscale par dessus grâce au z-index)
	$(".img_wrapper img").animate({opacity:1}, 250);
	
	/*  Animation des événements de souris sur les images */
	$('.img_wrapper').bind('mouseenter',function(){
		var el = $(this);
		el.stop().animate({opacity:1}, 250);
		el.find('.grayscale').stop().animate({opacity:0}, 250);
	});
	
	$('.img_wrapper').bind('mouseleave',function(){
		var el = $(this);
		el.stop().animate({opacity:0.7}, 250);
		el.find('.grayscale').stop().animate({opacity:1}, 250);
	});
});

Télécharger le code source

Vous trouverez cet exemple ici avec le code source en entier.

Mise à jour

Voici un plugin JQuery qui utilise aussi le HTML5 : http://www.megaptery.com/2013/01/blackandwhite-images-noir-blanc-jquery.html
J'ai trouvé une autre façon de transformer les couleurs d'une image : http://demosthenes.info/blog/532/Convert-Images-To-Black--White-With-CSS

Enlever le numéro de piste d'une liste de chansons

Description

Ce programme enlève automatiquement le numéro de piste devant chaque chanson dans une liste de chansons générée par Winamp. Je l'utilise lorsque je fais une liste de mes chansons et comme il n'y a pas qu'un seul album dans cette liste, le numéro de piste n'est pas significatif. Par conséquent, il n'est pas désiré. Le fonctionnement est simple. Il suffit d'enregistrer la liste dans un fichier texte nommé "entre.txt" et de démarrer le fichier batch "start.bat". Le programme supprime le numéro de piste au début de chaque ligne et enregistre la nouvelle liste dans le fichier "sortie.txt".

Détails

Langage	C++
Programmeur	Andy Harvey
Année	2003
Taille	36.6 Ko
Télécharger

CSS Hacks pour IE et commentaires conditionnels

Tout d'abord, il faut savoir que nous pouvons utiliser les commentaires conditionnels pour cibler une ou des versions d'IE et inclure dans une page Web : une feuille de styles, un fichier javascript, ou n'importe quel code HTML. Voici comment :

<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" />< ![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" />< ![endif]-->

Mais parfois, nous voulons juste corriger un style qui s'affiche mal dans une version spécifique d'IE et nous ne voulons pas commencer à gérer plusieurs feuilles de styles pour toutes les situations possibles.

Les hacks

Les hacks CSS sont la solution facile à ce problème. Voici une liste de hacks CSS pour cibler les différentes versions d'IE :

IE 6 seulement

* html #div {
    height: 300px;
}

#div {
    _height: 300px;
}

IE 7 seulement

*+html #div {
    height: 300px;
}

*:first-child+html #div { color: red; }

IE 8 seulement

#div {
  height: 300px\0/; /* doit être le dernier style */
}

IE 6 & IE 7

#div {
    *height: 300px;
}

IE 6, IE 7, IE 8 & IE 9

#div {
  height: 300px\9;
}

Voir une démonstration des hacks précédents

Voir une démonstration très complète

Les commentaires conditionnels de façon intelligente

Voici une préparation passe-partout pour cibler IE sans hack

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->

Et l'utilisation dans la feuille de styles :

.foo { color: black; } /* Tous les navigateurs */
.lt-ie9 .foo { color: green; } /* IE8 et - */
.lt-ie8 .foo { color: blue; } /* IE7 et - */
.lt-ie7 .foo { color: red; } /* IE6 et - */

De cette façon, on a une seule la feuille de styles qui est valide et ça marche partout! Il faut juste partir son site du bon pied.

Source : How To Create an IE-Only Stylesheet

Source : Conditional stylesheets vs CSS hacks? Answer: Neither!

Source : Browser CSS hacks

Autre article intéressant si vous développez pour IE 6 : IE CSS Bugs That’ll Get You Every Time

StickyTableHeaders : les entêtes de tableau toujours visibles

`:else=

Si vous cherchez un moyen de faire suivre l'entête d'un long tableau lorsqu'on scroll trop bas et qu'on ne voit plus les titres de colonne.

Ne cherchez plus, j'ai trouvé le plugin parfait : StickyTableHeaders, le voici en action.

Pour le télécharger, c'est ici : https://github.com/jmosbech/StickyTableHeaders.

Rhinoslider : un plugin de caroussel en JQuery

`:else=

Rhinoslider est un plugin JQuery très flexible offrant plusieurs styles d'animations intéressantes.

Ce plugin offre des animations allant du simple slide et fade jusqu'au shuffle et kick qui sont plus poussées.

Le site permet de paramétrer l'animation désirée et nous donne le code final à utiliser. On peut aussi optimiser la taille du script en téléchargeant uniquement les animations voulues.

Parmis les autres options possibles, on peut choisir d'afficher ou non les boutons de contrôles, un caption, les "puces" (le numérotage), etc.

Je le recommande fortement. Voici le lien pour télécharger Rhinoslider.

Gestion de billetterie

Description

Ce programme permet la saisie des ventes de billets dans le but d'imprimer rapidement des rapports statistiques. J'ai programmé cette application à la demande de vendeurs qui devaient calculer et retaper en Excel les statistiques des billets vendus pour les pièces de la troupe de théâtre Les Grands Enfants. En 2005, J'ai modifié ce programme pour répondre aux besoins de la troupe de théâtre Les Boules à mythes.

Détails

Langages	Visual Basic 6 et Access
Programmeur	Andy Harvey
Année	2004 - 2005
Taille	67.7 Ko et 80.0 ko
Télécharger (Les Grands Enfants) Télécharger (Les Boules à mythes)

Gestion des émissions de télévisions

Description

Ce programme permet de ne pas oublier de regarder les émissions de télévisions que nous désirons suivre durant la saison, en avertissant automatiquement l'utilisateur avant le commencement de chaque émission. C'est le projet personnel auquel j'ai consacré le plus de temps en l'améliorant au fil des ans.

Détails

Langage	Visual Basic 6
Programmeur	Andy Harvey
Année	2002 - 2005
Taille	4.0 Mo
Télécharger

Quelques sélecteurs utiles

Il y a des sélecteurs CSS qu'on utilise peu souvent et qu'on a intérêt à connaître. En voici quelques-uns

Les frères (siblings) directs (+)

Pour cibler le frère d'un élément, il faut utiliser le symbole +. Des frères sont des balises de même niveau, côte à côte.

Voici le code :

h1 + h2 {
   margin-top:0;
}

Les styles seront appliqués uniquement à la balise h2 s'il suit directement la balise h1.

Compatibilité

La prise en charge de ce sélecteur est intéressante, puisque Firefox 1+, Safari 1.3+, Opera 9.2+, Chrome 2.0+ et IE 7+ comprennent ce sélecteur.
Petite nuance pour Safari qui a un problème d'interprétation lorsqu'on cible le frère d'un élément en hover jusqu'à la version 5.

Les frères indirects (~)

Tout comme les frères directs, les frères indirects sont des balises de même niveau, mais qui peuvent avoir un autre frère qui les séparent. Il faut utiliser le symbole ~ afin de cibler ces frères.

Voici le code :

h1 ~ h2 {
   margin-top:0;
}

Ceci stylera tous les h2 qui suivent un h1 (au même niveau). Même s'il est séparé par des paragraphes.

Compatibilité

La prise en charge est plutôt large pour un sélecteur CSS3, puisque Firefox 1+, Safari 3.1+, Opera 9.2+, Chrome 2.0+ et IE 7+ comprennent ce sélecteur.
Petite nuance cependant pour IE 7 qui n'aime pas qu'un commentaire HTML vienne s'interposer entre des frères, et pour IE 8 qui ne ciblera que les 298 premiers éléments.

Les descendants directs (>)

Pour cibler les enfants d'un élément, nous utilisons simplement un espace. Mais pour cibler un enfant directement en dessous, par exemple, obtenir les <li> de premier niveau d'une liste à puce. Il suffit d'utiliser le symbole >.

Voici le code :

ul > li {
   border: 1px solid #000;
}

Ceci stylera uniquement les <li> de premier niveau. Si on prend le code suivant :

<ul>
   <li>Premier niveau</li>
   <li>
      <ul>
         <li>Deuxième niveau</li>
      </ul>
   </li>
</ul>

Le <li> de deuxième niveau ne sera pas touché.

Compatibilité

La prise en charge est bonne, puisque IE 7+ et les autres navigateurs comprennent ce sélecteur.

Les attributs

Compatibilité

La prise en charge est bonne, puisque IE 7+ et les autres navigateurs comprennent les sélecteurs utilisant les attributs suivants.

1) Cibler un attribut présent

On peut rechercher des éléments ayant un certain attribut spécifié, peu importe sa valeur. Il suffit de saisir l'attribut désiré entre crochets.

Voici le code :

a[title] {
	font-weight:bold;
}

2) Cibler un attribut ayant une valeur précise

On peut également rechercher des éléments ayant un attribut avec une valeur spécifique.

Voici le code :

a[title="foo"] {
	color:red;
}

3) Cibler un attribut contenant une chaine de caractères (*=)

On peut rechercher des éléments avec un attribut contenant une chaine de caractères, peu importe où cette chaine est située.

Voici le code :

a[href*="andyharvey.ca"] {
	color:green;
}

4) Cibler un attribut commencant par une chaine de caractères (^=)

On peut rechercher des éléments avec un attribut commencant par une chaine de caractères précise.

Voici le code :

a[href^="http"] {
	background: url(path/to/external/icon.png) no-repeat;
	padding-left: 10px;
}

5) Cibler un attribut finissant par une chaine de caractères ($=)

On peut rechercher des éléments avec un attribut finissant par une chaine de caractères précise.

Voici le code :

a[href$=".jpg"] {
	background: url(path/to/fileimage/icon.png) no-repeat;
	padding-left: 10px;
}

6) Cibler un attribut ayant une valeur précise parmis plusieurs valeurs (~=)

Comme au point 2, on peut rechercher des éléments avec une valeur d'attribut précise, mais cet attribut pourrait contenir plus d'une valeur séparées par un espace.

Prenons cet exemple :

<a href="path/to/image.jpg" data-infos="externe image">Exemple de lien</a>

Et voici le code :

a[data-info~="externe"] {
	color: red;
}

a[data-info~="image"] {
	border: 1px solid black;
}

Les champs input de formulaire (JQuery seulement)

Lorsqu'on veut valider un formulaire, on peut vouloir obtenir tous les champs de ce formulaire. Pas uniquement les champs <input>, mais aussi les textarea, button, select, etc. JQuery met à notre disposition le sélecteur suivant :

$('form :input');

À ne pas confondre avec simplement :

$('form input');

Les deux points devant input font toute la différence.

Source

Source 2

Voici le code en exemple

Ajout 22 avril 2012 :
Voici un site qui regroupe beaucoup de sélecteurs pour diverses situations : http://vogtjosh.com/selectors/

Inventaire et recherche de CD

Description

Ce programme permet la saisie de l'inventaire des CD en indiquant leur emplacement dans les étagères. Nous pouvons aussi faire une recherche rapide pour retrouver facilement un CD ou logiciel. De plus, il est possible de spécifier pour quelles personnes le logiciel a été acheté. On peut également imprimer différents rapports. J'ai programmé ce logiciel lorsque je travaillais au ministère du Développement économique et régional et de la Recherche à l'été 2004 en plus d'effectuer un soutien technique téléphonique. Ce Ministère a changé de nom depuis et s'appelle maintenant le ministère du Développement économique, innovation et exportation.

Détails

Langage	Access
Programmeur	Andy Harvey
Année	2004
Taille	162 Ko
Télécharger

Accueil

Bienvenue sur le portfolio de Andy Harvey.

Ce site contient de l'information sur mon cheminement, mes études ainsi que mes réalisations.

Bonne visite!

Qui suis-je?

J'occupe un poste de technicien en informatique à la TÉLUQ, mais plus précisément, je fais le travail d'intégrateur Web. Je travaille avec des logiciels tels que Dreamweaver et Photoshop afin de publier en ligne du contenu texte et visuel. J'utilise certains outils, que j'ai découvert au fil du temps, pouvant me faciliter la tâche et rendre les sites Web plus beau et intéressant visuellement. Je parle ici de l'environnement Javascript JQuery. En plus de l'HTML et du Javascript, j'utilise le langage PHP afin de créer des sites Web plus dynamique incluant une base de données et des formulaires. J'ai aussi acquis de l'expérience sur le développement HTML5 et mobile afin de rendre la visite d'un site Web plus convivial sur un petit écran ainsi que le visionnement de vidéos en HTML5 au lieu du Flash.

Mes études

J'ai eu la piqûre pour l'informatique et spécialement la programmation lors du cours d'informatique de quatrième secondaire. On m'enseignait alors les rudiments de Visual Basic 3. J'aimais beaucoup l'idée de pouvoir créer mes propres applications. J'ai donc décidé d'étudier en informatique au Cégep de Sainte-Foy. Durant ces années, j'ai appris différents langages de programmation. À ma deuxième année, on m'a enseigné la fonction d'analyste ainsi que la modélisation de données. Durant mes études, j'ai programmé plusieurs applications lors de travaux pratiques et de devoirs. À ma dernière année d'études, j'ai monté, en équipe de quatre, un système de gestion pour le syndicat du Cégep. Le système était programmé en Oracle et fût le produit du cours de projet synthèse. En stage, j'ai créé un site d'agenda électronique adapté aux besoins d'une entreprise, soit le Cégep de Sainte-Foy.

Contact

Votre courriel a bien été envoyé.

Agenda électronique et disponibilités des laboratoires

Description

Ce site permet aux employés du Cégep de Sainte-Foy d'avoir leur agenda électronique en ligne et donc de pouvoir le consulter à partir de n'importe quel endroit où il y a un accès à Internet. De plus, certains ajouts ont été inclus pour des besoins spécifiques comme l'impression de l'horaire des laboratoires à chaque semaine en un clic. Ce site est également pratique pour les étudiants qui peuvent, eux aussi, le consulter pour vérifier les disponibilités des laboratoires informatiques. Pour créer ce site, je me suis basé sur PHP iCalendar et j'y ai intégré une base de données MySQL en plus d'y ajouter des fonctionnalités propres aux besoins du Cégep de Sainte-Foy. J'ai fait ce site en stage à l'hiver 2004.

Détails

Technologies	HTML, CSS, JavaScript, PHP et MySQL
Programmeur	Andy Harvey
Année	2004
Visiter Nom d'utilisateur : demo Mot de passe : demo

Précharger des images avec JQuery

Une façon très simple de précharger des images en JQuery est de créer des balises <img> en mémoire, mais sans les ajouter au DOM.

Voici le code :

function miseEnCacheImages() {
	// Array of images:
	var imageArray = ['images/bouton1_on.jpg', 'images/bouton2_on.jpg'];
	 
	// Loop through and declare an element that will not actually be used.
	$.each(imageArray, function (i, val) {
	  $('<img/>').attr('src', val);
	});
}

Source

Script pour précharger les images en CSS

jPreLoader - un script pour afficher une barre de chargement des images

Les sprites

Une bonne pratique est d'utiliser les sprites. C'est-à-dire qu'au lieu d'avoir des images différentes pour chaque état d'un bouton (rollovers, sélectionné, etc.), on peut utiliser une même image qui contient l'ensemble de ces états. Il suffit ensuite d'afficher qu'une partie de cette image à la fois. Pour ce faire, on utilise la propriété background-image et on spécifie les dimensions pour un seul état (width et height). Lorsqu'on veut changer la partie visible, on déplace l'image à l'aide de la propriété background-position.

Un bon article qui parle de cette technique

Par contre, il existe un désavantage à cette technique. Lorsqu'on combine une image à un contenu texte, tel qu'un bouton et son icône, on devra appliquer l'image sur un <span> vide afin de pouvoir afficher qu'une seule partie de notre image de sprite.

Portfolio

Mises à jour au site

Réalisations

Mon blogue

22. Claude Miville Inc

Claude Miville Inc

Description

Détails

21. Tango Assurance Auto et Habitation

Tango Assurance Auto et Habitation

Description

Détails

20. Le Quartier de Lune

Le Quartier de Lune

Description

Détails

19. ADHOC Formation comptable

ADHOC Formation comptable

Description

Détails

18. Ricky Monaco

Ricky Monaco

Description

Détails

17. Site institutionnel de la TÉLUQ (2013)

Site institutionnel de la TÉLUQ (2013)

Description

Mise à jour - mars 2014

Détails

16. Philippe Marquis

Philippe Marquis

Description

Détails

15. Pub Edward

Pub Edward

Description

Détails

14. 32 Mars

32 Mars

Description

Détails

13. Ranch chez Ti-Gars

Ranch chez Ti-Gars

Description

Détails

12. Poussières d'oeuf

Poussières d'oeuf (Œuvres de Myriam Bélanger)

Description

Détails

Site Web mobile

11. Site institutionnel de la TÉLUQ (2010)

Site institutionnel de la TÉLUQ (2010)

Description

Détails

Accessibilité VS accordéons

Accessibilité VS accordéons

Le code

10. CD-ROM (cours ADM 2013)

CD-ROM (cours ADM 2013)

Description

Détails

Quelques trucs et astuces

Quelques trucs et astuces

CSS Table Grid

CSS Diagnostics

Centrer verticalement

09. Site institutionnel de la TÉLUQ (2006)

Site institutionnel de la TÉLUQ (2006)

Description

Détails

Select2 un plugin jQuery intéressant de listbox (balise <select>)

Select2 un plugin jQuery intéressant de listbox (balise <select>)

Compatibilité

08. Générateur de Cadavre Exquis

Générateur de Cadavre Exquis

Description

Détails

Bogue avec Fancybox et JW Player dans IE9

Bogue avec Fancybox et JW Player dans IE9

Mise en situation