Portfolio

Mises à jour

Portfolio de Andy Harvey

Mises à jour

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.

04-03-2012
Refonte complète visuelle ainsi qu'au niveau de la programmation.
Utilisation de CSS3 et HTML5.

07-12-2011
Ajout de la réalisation #14.

27-08-2011
Refonte complète du visuel.


Fermer

Réalisations

Retour

Mon blogue

Retour

16. Philippe Marquis

Retour

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
Visiter

15. Pub Edward

Retour

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é.

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
Visiter

14. 32 Mars

Retour

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 "parallaxe". 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 du 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

13. Ranch chez Ti-Gars

Retour

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

12. Poussières d'oeuf

Retour

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
Visiter

Site version mobile

Retour

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

Retour

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

10. CD-ROM (cours ADM 2013)

Retour

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

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

Retour

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

08. Générateur de Cadavre Exquis

Retour

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

07. IP Scanner

Retour

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

Liens utiles

Retour

Liens utiles

Cette section contient plusieurs sites que j'ai trouvés pour m'aider à programmer les applications que j'ai créées lors de mes études et celles de mes réalisations.

Programmation Web

HTML / CSS

SitesDescriptions
960 grid system Propose une base HTML/CSS pour offrir une présentation souple tout en évitant d'utiliser les tableaux. Afin d'avoir une meilleure sémantique pour nos sites Web.
OpenWeb Pour apprendre le (X)HTML et le CSS.
W3 Schools Tutoriaux en ligne pour le (X)HTML, CSS, XML, SQL, PHP, .NET et plus.
Progressive Internet Explorer (CSS3) Permet d'utiliser certains CSS3 dans Internet Explorer 6 à 8. Ce que les dernières versions de Firefox, Safari, Opera et Chrome supportent déjà.

Javascript

SitesDescriptions
jQuery jQuery est un excellent framework Javascript pour faciliter les effets visuels et le dynamisme des sites.
Mootools Mootools est un autre bon framework Javascript pour faciliter les effets visuels et le dynamisme des sites, mais je préfère tout de même jQuery.
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é.
L'éditeur JavaScript Plusieurs scripts en JavaScript.
Tout Javascript.com Références, tutoriaux et scripts en JavaScript.

PHP

SitesDescriptions
The PHP Benchmark Benchmark de codes PHP afin d'avoir de meilleures pratiques pour optimiser ses applications.
Nexen - PHP et MySQL Manuel de référence pour PHP et MySQL.
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.
PHPScripts Scripts pour PHP.
PHP Classes Des classes téléchargeables pour PHP.
PHP Snippets Plusieurs exemples de codes en PHP.
JpGraph JpGraph est une librairie orientée objet pour créer des graphiques en PHP.

Référencement

SitesDescriptions
Google - Informations pour webmasters Ce site donne l'information sur le référencement des sites Web.
Search Engine Tools Ce site donne l'information sur les "robots" des engins de recherches (robots.txt).
SEO Quotient Ce site permet d'évaluer un siteweb.

Flash

SitesDescriptions
Action Scripts Tutoriaux et librairies sur l'Actionscript.
Macromedia Flash - ActionScript Dictionary Opérateurs et fonctions pour Flash.
Webwasp Tutoriaux en Flash.

Autres

SitesDescriptions
Placehold.it Création automatique d'images (place holder) pour débuter un site. Exemple
W3 Schools - Web Page Validation Pour vérifier si votre site Web respecte les standards du W3C.
Open Source Web Design Design de sites Web gratuit.

06. Transactions bancaires

Retour

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. 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.

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

Retour

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.

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

Retour

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

Mon blogue

Retour

CSS Hacks pour IE et commentaires conditionnels

Retour

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

Retour

StickyTableHeaders : les entêtes de tableau toujours visibles

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

Retour

Rhinoslider : un plugin de caroussel en JQuery

Rhinoslider

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.

04. Gestion de billetterie

Retour

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)

03. Gestion des émissions de télévisions

Retour

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 auquel j'ai consacré le plus de temps en l'améliorant au fil des ans et dont je suis le plus fier.

Détails

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

Quelques sélecteurs utiles

Retour

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

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/

02. Inventaire et recherche de CD

Retour

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

Retour

Accueil

Photo de Andy HarveyBienvenue sur le portfolio de Andy Harvey.

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

N'hésitez pas à me contacter pour donner vos commentaires, vos suggestions ou simplement pour dire bonjour. Vous pouvez le faire facilement à l'aide de la page de contact.

Si vous visitez mon site sur un téléphone intelligent (Iphone ou appareil Android), vous pouvez visionner la version mobile.

Ce site utilise le HTML5 en combinaison avec CSS3. Il est donc préférable de mettre à jour votre navigateur pour bénéficier au maximum des effets de styles.

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 Javasctipt, 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.

Confirmation

Retour

Contact

Votre courriel a bien été envoyé.

01. Agenda électronique et disponibilités des laboratoires

Retour

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

Retour

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

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.