13-05-2015
Ajout de la réalisation #21 et réalisation #22
10-03-2015
Ajout de la réalisation #18, réalisation #19 et réalisation #20
09-12-2013
Ajout de la réalisation #17
04-05-2012
Ajout des réalisations #15 et #16
28-04-2012
Modifications pour ajuster l'affichage selon les dimensions du navigateur, même aussi petit que les mobiles (responsive layout). Ce qui rend complètement inutile la version mobile uniquement.
Pour suivre mon blogue, vous pouvez vous abonner à mon fil RSS.
Ce site est la vitrine virtuelle de Claude Miville Inc.
Note : Je n'ai fait que le frontend du site (css, js, adaptation mobile/tablette).
| Technologies | HTML, CSS et JavaScript |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2014 |
| Visiter | |
Ce site est la vitrine virtuelle de Tango Assurance.
Note : Je n'ai fait que le frontend du site (css, js, adaptation mobile/tablette).
| Technologies | HTML, CSS et JavaScript |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2014 |
| Visiter | |
Ce site est la vitrine virtuelle du bar Le Quartier de Lune à Québec.
Note : Je n'ai fait que le frontend du site (css, js, adaptation mobile/tablette).
| Technologies | HTML, CSS et JavaScript |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2014 |
Ce site offre des formations comptable aux particuliers. En groupe ou individuellement. On peut également réserver en ligne.
Note : Je n'ai fait que le frontend du site (css, js, adaptation mobile/tablette). J'ai également travaillé sur le script de géolocalisation et la carte Google Maps.
| Technologies | HTML, CSS et JavaScript |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2014 |
| Visiter | |
Le site du DJ Ricky Monaco est entièrement responsive pour une meilleure lisibilité sur un téléphone ou une tablette. Tout son contenu tient sur une seule page (one pager).
Au menu : smooth scroll et menu sticky.
| Technologies | HTML, CSS et JavaScript |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2014 |
| Visiter | |
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.
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.
| Technologies | PHP, HTML, XML, XSL, MySQL, Oracle, CSS et JavaScript |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2013-2014 |
| Visiter | |
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.
| Technologies | HTML, PHP, CSS et JavaScript |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2012 |
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.
| Technologies | HTML, CSS et JavaScript |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2012 |
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é).
| Technologies | HTML, CSS et JavaScript |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2011 |
| Visiter sur mon serveur (sans les données) | |
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.
| Technologies | PHP, HTML, CSS et JavaScript |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2010 |
| Visiter | |
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.
| Technologies | PHP, HTML, CSS et JavaScript |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2011-2013 |
| Visiter | |
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.
| Technologies | PHP, HTML, XML, XSL, MySQL, Oracle, CSS et JavaScript |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2009 - 2010 |
| Visiter | |
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.
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; }
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.
| Technologie | VB.NET |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2006 |
Voici quelques trucs et bonnes pratiques pour démarrer vos futurs projets.
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".
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.
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.
| Technologies | PHP, HTML, XML, XSL, Oracle et JavaScript |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2005 - 2006 |
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.
Pour voir des exemples et le télécharger : https://select2.github.io/
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.
| Langage | Visual Basic 6 |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2005 |
| Taille | 19.5 Ko |
| Télécharger | |
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.
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.
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
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 :)
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.
| Langage | Visual Basic 6 |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2001 |
| Taille | 35.3 Ko |
| Télécharger | |
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).
$(window).bind('resize', function(e){
// Code ici
});
$(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);
});
});
(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
});
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.
| 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) |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
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.
| Langage | Visual Basic 6 |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2003 |
| Taille | 22.3 Ko |
| Télécharger | |
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.
.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.
<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" />
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'));
}
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);
});
});
Vous trouverez cet exemple ici avec le code source en entier.
Mise à jour
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".
| Langage | C++ |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2003 |
| Taille | 36.6 Ko |
| Télécharger | |
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 CSS sont la solution facile à ce problème. Voici une liste de hacks CSS pour cibler les différentes versions d'IE :
* html #div {
height: 300px;
}
#div {
_height: 300px;
}
*+html #div {
height: 300px;
}
*:first-child+html #div { color: red; }
#div {
height: 300px\0/; /* doit être le dernier style */
}
#div {
*height: 300px;
}
#div {
height: 300px\9;
}
Voir une démonstration des hacks précédents
Voir une démonstration très complète
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!
Autre article intéressant si vous développez pour IE 6 : IE CSS Bugs That’ll Get You Every Time
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 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.
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.
| 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) |
|
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.
| Langage | Visual Basic 6 |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2002 - 2005 |
| Taille | 4.0 Mo |
| Télécharger | |
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
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.
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.
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.
Compatibilité
La prise en charge est bonne, puisque IE 7+ et les autres navigateurs comprennent les sélecteurs utilisant les attributs suivants.
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;
}
On peut également rechercher des éléments ayant un attribut avec une valeur spécifique.
Voici le code :
a[title="foo"] {
color:red;
}
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;
}
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;
}
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;
}
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;
}
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.
Ajout 22 avril 2012 :
Voici un site qui regroupe beaucoup de sélecteurs pour diverses situations : http://vogtjosh.com/selectors/
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.
| Langage | Access |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2004 |
| Taille | 162 Ko |
| Télécharger | |
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!
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.
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.
Votre courriel a bien été envoyé.
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.
| Technologies | HTML, CSS, JavaScript, PHP et MySQL |
|---|---|
| Programmeur | Andy Harvey |
| Année | 2004 |
|
Nom d'utilisateur : demo |
|
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);
});
}
Script pour précharger les images en CSS
jPreLoader - un script pour afficher une barre de chargement des images
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.