Articles étiquettés avec ‘ wordpress ’

Articles étiquettés ‘wordpress’


Site du Gris-Montréal

3.2012 | Sites Internet

Accueil du site

Client:
GRIS-Montréal, organisme communautaire

Description du projet:
Le GRIS-Montréal possédait un site statique qu’il désirait pouvoir mettre à jour plus fréquemment sans l’intermédiaire d’un bénévole ou d’un fournisseur externe.  On a donc fait appel à mes services à titre d’intégrateur et programmeur WordPress/PHP.  Le défi était de convertir le site existant, incluant la ligne graphique vers un thème WordPress.  L’organisme souhaitait aussi développer un environnement « extranet » pour des informations privilégiées à ses membres.  Doté d’un comité communication et de deux bénévoles assidus, mes services ont permis d’avancer et mettre en ligne une première version du site sur le nouvel environnement.

Composantes:

  • Personnalisation du thème WordPress existant (Newscast)
  • Adaptation de la ligne graphique à l’aide de feuilles de style CSS
  • Développement de quelques widgets WordPress pour faciliter la mise à jour du site
  • Participation au développement de la section dédiée aux membres
  • Migration des données et aide au déploiement sur l’environnement de test et de production

Technologies utilisées:

  • Côté serveur: PHP 5, WordPress 3.3, MySQL 5
  • Côté client: HTML, CSS

Status:

En ligne.


AlterHéros 2.0

12.2011 | Sites Internet, Web 2.0

Page d'accueil sur site de l'association

Client:
AlterHéros, Montréal, Québec

Description du projet:
À titre de directeur du développement web bénévole au sein de l’organisme AlterHéros, j’ai été le webmestre en charge de tous les éléments reliés à la refonte complète du site: design, intégration, développement web, coordination.  C’était un projet de très grande envergure, réalisé sur une période de 3 ans.  Il a fallu que je construise de zéro un nouveau site, mieux adaptée à la réalité du web 2.0 pour l’organisme.  Même si l’ancien site demeurait actuel et facile à gérer, il était quand même limité au niveau de ses possibilités futures.  Le nouveau site est tant qu’à lui beaucoup plus puissant.  Bien plus qu’un site Internet, il est une véritable plate-forme de diffusion, de gestion et de promotion.  Des tonnes de changements le rend plus convivial, autant aux yeux des internautes et les administrateurs que pour les outils de recherche comme Google.  Construit sur les standards sur web, il offre des fonctions avancées de type Web 2.0.  De plus, il possède une capacité d’intégrer de nouvelles fonctionnalités assez facilement.

Ma petite équipe de développement web et moi avons du investi plus de 1 500 h de travail dans ce projet.  Nous avons pu compter sur des technologies libres, comme WordPress et BuddyPress pour nous aider à mettre sur pied le nouveau site, qui comprend quatre sous-sites distincts, mais inter-reliés.  Ces sous-sites sont:

  • AlterHéros.com: le réseau social pour la diversité sexuelle
  • Parles-en aux experts: le site d’entraide de démystification
  • AlterCité: le magazine de la diversité sexuelle
  • AlterHéros.org: le site dédié à l’organisme

Grâce à l’intégration à BuddyPress, le site est doté d’un réseau social, ayant plusieurs fonctionnalités intéressantes.  Car en plus de permettre à chaque internaute de se créer un compte AlterHéros où chacune de ses contributions est listée, nous avons aussi donner plus de contrôle aux bénévoles, qui bénéficient eux aussi d’un accès privilégié au réseau.  Désormais, chaque contribution d’un bénévole, que ce soit par la réponse à une question d’un internaute ou la publication d’un article, ne passe plus inaperçue et est pleinement intégrée à notre réseau.  De plus, grâce à la fonctionnalité des « groupes », AlterHéros.com devienne un outil pour les groupes communautaires qui peuvent dès aujourd’hui se créer des groupes d’intérêt pour rejoindre leur clientèle cible par le biais du réseau.

Parles-en aux experts est le programme d’aide et de soutien d’AlterHéros qui centralise plusieurs sections importantes de l’ancien site sur cet espace unique et bilingue.  L’ensemble du contenu de l’ancien site a été migré sur ce sous-site, grâce à un script de migration que j’ai développé en XML pour s’interfacer avec l’outil d’importation de WordPress.  En fait, on y retrouve la plus grande banque de question-réponse sur la diversité sexuelle publié sur le web: près de 2 500 questions ont été répondues et publiées sur ce site!

Composantes:

Le travail de refonte du site n’a pas touché exclusivement la migration du contenu et de l’apparence.  Il a aussi nécessité le développement PHP d’extensions WordPress spécifiques à AlterHéros pour permettre une continuité des fonctionnalités présentes sur l’ancien site et plusieurs nouvelles.  En voici un aperçu:

  • Développement d’une quatre thèmes WordPress et BuddyPress pour chacun des sous-sites
  • Conception de la ligne graphique avec Adobe Photoshop
  • Intégration de plusieurs effets d’animation grâce à jQuery, prettyPhoto et autres libraries Javascript open-source
  • Intégration de plusieurs extensions WP et BP, tel que qTranslate, s2Member, etc.
  • Gestion du projet et coordination des bénévoles impliqués
  • Création d’un outil bilingue de gestion du service de questions-réponses
  • Création d’un outil de gestion des bénévoles de l’organise, intégré à WordPress
  • Création de plusieurs widgets WP et shortcodes
  • Intégration de paiement en ligne avec PayPal
  • Intégration de la connexion avec son compte Facebook
  • Traduction d’extensions en français, avec poEdit
  • Formation des administrateurs et des bénévoles
  • Optimisation des performances du serveur dédié
  • Rédaction d’un guide de gestion pour les bénévoles
  • Compatibilité avec Firefox 8+, IE 8+, Safari 5

Technologies utilisées:

  • Côté serveur: PHP 5, WordPress 3, BuddyPress 1.3, MySQL 5
  • Côté client: XHTML 1.1, CSS 2.1, jQuery

Status:

En ligne

 


Site institutionnel du cégep de Saint-Laurent

6.2010 | Portfolio, Sites Internet

Page d'accueil au 14 février 2012

Employeur:
Le Cégep de Saint-Laurent, Montréal, Québec

Description du projet:
Dans le cadre de mon travail d’analyste-webmestre au cégep de Saint-Laurent, j’ai été le chef de projet et développeur en charge de la refonte complet du site Internet du Collège.  Le défi était de taille puisque le cégep dépendait d’un fournisseur externe pour la gestion et l’hébergement de son site et souhaitait se réapproprier l’ensemble du contenu, de l’hébergement et de l’expertise du site à l’interne.  L’ancien site comptait des centaines de pages intégrées à un CMS propriétaire qui n’avaient pas été mises à jour depuis plusieurs mois, voire année.  Il a donc fallu migrer, tirer, réorganiser et mettre à jour ce contenu dans une nouvelle plate-forme web interne.  En plus du contenu, nous devions repenser la coquille du site au complet, revoir la navigation afin d’améliorer l’ergonomie et l’expérience utilisateur pour l’internaute.

Pour réaliser ce projet, j’ai décidé de construire le site de la même manière que je l’avais fait le projet des zones d’études l’année précédente.  Chaque rubrique du site a donc fait l’objet d’une nouvelle « zone », c’est-à-dire un micro-site sur notre plate-forme WordPress 3.0 en configuration Multi-Site.  Au total, plus d’une vingtaine de sites supplémentaires ont été développés.

J’ai conçu un concept visuel qui reprenait aussi le travail des zones d’études effectués en 2009 en y apportant plusieurs améliorations.  D’abord, la navigation a fait l’objet de plusieurs « focus groupes » où des utilisateurs se sont prêtés à la technique de « tri de cartes », qui a permis d’accoucher à une navigation efficace.  La conception de la page d’accueil a aussi été tout un défi puisqu’il s’agissait de mettre en valeur le dynamisme du Cégep et avant tout, les programmes offerts.  Finalement, nous avons développées de nouvelles fonctionnalités afin d’améliorer l’ergonomie du site et l’accès à l’information pour les internautes.  En voici quelques-unes :

  • De nouvelles fonctionnalités permettant plus d’interactivité :
    • Un moteur de recherche intégré au site, basé sur la technologie Google
    • La possibilité de partager les pages du site sur les réseaux sociaux, comme Facebook et Twitter
    • La possibilité de choisir le thème visuel de la page que vous visitez (plus de 80 thèmes visuels ont été conçus au total)
    • La possibilité de signaler une coquille sur le site
  • Une plus grande visibilité offerte aux activités étudiantes et au rayonnement de nos étudiants
  • L’intégration des visites virtuelles qui permettent à l’internaute de visiter les locaux les programmes sur 360°

Dans ce projet, j’ai été aidé par une édimestre et une intégratrice web, en plus de divers comités qui m’ont épaulés dans mes choix.  Pour le détail des crédits, visitez cette page.

Tour guidé:

Un tour guidé web a été mis en ligne pour permettre à tous d’explorer ce nouveau site.  Visionnez-le en cliquant sur ce lien.

Composantes:

  • Développement d’un thème intelligent et spécifique pour WordPress 3.0
  • Conception de la ligne graphique avec Adobe Photoshop
  • Intégration de plusieurs effets d’animation grâce à jQuery, prettyPhoto et autres libraries Javascript open-source
  • Gestion du projet et coordination des différents acteurs impliqués
  • Formation du personnel
  • Compatibilité avec Firefox 3+, IE 6+, Safari 4

Technologies utilisées:

  • Côté serveur: PHP 5, WordPress 3, MySQL 5
  • Côté client: XHTML 1.1, CSS 2.1, jQuery

Status:

En ligne


Formation continue + inscription en ligne

12.2009 | Applications, Portfolio, Sites Internet

Employeur:
Le Cégep de Saint-Laurent, Montréal, Québec

Fournisseurs externes:
Quiboweb, Longueuil, Québec
Solutions de paiement Desjardins, Québec

Description du projet:
Dans le cadre de mon travail d’analyste-webmestre au cégep de Saint-Laurent, j’ai travaillé au projet de refonte du site de la Formation continue.  Le service de la Formation continue du cégep offre plusieurs types de cours aux adultes, tant des AEC, des ateliers de perfectionnement que des cours offerts aux gestionnaires des municipalités et d’entreprises.  De plus, le site devait permettre l’inscription et le paiement en ligne des cours à temps partiel et des cours offerts aux municipalités.  Pour cette partie, nous avons fait appel à un fournisseur externe qui s’est chargé de développer un module d’inscription sur mesure, que j’ai ensuite intégré à notre site.  Suite à l’offre d’appel, le choix s’est arrêté sur l’entreprise de conception Internet, Quiboweb.

Au niveau de la refonte du site, j’ai décidé de concevoir une nouvelle « zone » au sein de l’infrastructure de la plate-forme open-source WordPress MU (Multi-utilisateur), comme je l’avais fait avec le projet des zones d’études à l’été 2009.  J’ai conçu un thème suffisamment flexible pour s’adapter aux différentes sections du site.  Par exemple, la section « Francisation » affiche une image de fond différente de l’image sur la page d’accueil.  J’ai donc dû développer un petit script qui s’intègre dans WordPress.  J’ai aussi revu entièrement l’arborescence du site, et l’intégration du contenu.  Plusieurs pages ont été optimisées pour assurer une meilleure uniformité dans la présentation du contenu.  Ce travail a necessité une fois de plus le développement de shortcodes spéciaux pour que la mise à jour du contenu par les utilisateurs soient faciles.

Quant au module d’inscription en ligne développé par Quiboweb, j’ai été impliqué dans toutes les phases du projet, autant dans la phase préparatoire (collecte des besoins, définition du plan d’action, rédaction de l’appel d’offre, rencontres avec les fournisseurs invités), la phase de démarrage que les phases de développement, test et mise en ligne.   J’ai particulièrement été impliqué dans les phases de test, où j’ai du demandé des changements importants à la logique d’inscription pour s’assurer que le module était simple et facile à utiliser.  J’ai aussi intégré complètement le module dans la nouvelle zone, de même que sur la page de paiement en ligne chez Desjardins.

Je suis très fier du travail qui a été accompli dans ce projet et les résultats.  Le module d’inscription de Quiboweb fonctionne tel que promis.  Il offre des fonctionnalités uniques au cégep de Saint-Laurent, à faire envier les autres cégeps.  Le module permet de gérer quasiment de A à Z le processus d’inscription pour les ateliers de perfectionnement et les formations aux municipalités (ATPA), y compris le traitement pour les tarifs réduits admissibles pour Emploi-Québec, le paiement en ligne, la génération de PDFs spéciaux, le publipostage, etc.  Donc un gros merci à l’équipe de Quiboweb, et merci aussi à Myriam Boisvert, intégratrice web au cégep de Saint-Laurent pour m’avoir aider dans l’intégration du contenu et les phases de tests.

Composantes:

  • Développement d’un thème spécifique pour WordPress MU 2.8
  • Conception de la ligne graphique avec Adobe Photoshop
  • Intégration de plusieurs effets d’animation grâce à jQuery
  • Définition, suivi du développement, intégration, test et déploiement du module d’inscription en ligne par Quiboweb
  • Démarches avec les fournisseurs pour la solution de paiement en ligne
  • Personnalisation de la page de paiement en ligne chez Desjardins
  • Formation du personnel
  • Compatibilité avec Firefox 3+, IE 6+, Safari 4

Technologies utilisées:

  • Côté serveur: PHP 5, WordPress MU 2.8, MySQL 5
  • Côté client: XHTML 1.1, CSS 2.1, jQuery

Status:

En ligne.


Centre des technologies de l’eau

5.2009 | Portfolio, Sites Internet, Web 2.0

Client:
Le Centre des technologies de l’eau, Montréal, Québec

Description du projet:
Dans le cadre de mon travail d’analyste-webmestre au cégep de Saint-Laurent, on m’a demandé de développer le site Internet du Centre des technologies de l’eau, un centre affilié au cégep.  L’objectif du site était de fournir une vitrine informationnelle et promotionnelle pour le centre.  Le Centre désirait un design visuel inspirant le dynamisme et l’innovation, distinct de l’image institutionnelle du cégep de Saint-Laurent.  J’ai donc conçu une ligne graphique respectant le logo du CTE très axée sur les tendances du Web 2.0 en 2009: larges titres, bandeaux colorés, beaucoup de place aux images, navigation animée, grand bandeau foncé en bas de page.  Pour faciliter la gestion du site, le site a été développé sur la plate-forme WordPress.

Composantes:

  • Installation et déploiement de WordPress
  • Conception d’un thème WordPress spécifique pour le CTE
  • Conception de la ligne graphique avec Adobe Photoshop CS3
  • Intégration de plusieurs extensions, dont qTranslate pour un site dont l’interface est entièrement bilingue
  • Formation du personnel et rédaction de la documentation
  • Compatibilité avec Firefox 3+, IE 6+, Safari 4

Technologies utilisées:

  • Côté serveur: PHP 5, WordPress 2.8, MySQL 5
  • Côté client: XHTML 1.1, CSS 2.1, jQuery

Status:

En ligne.


Bienvenue sur mon nouveau blog!

10.2008 | Blogue

(Re)bienvenue dans mon univers en ligne!

Mon aventure en ligne a débuté avant les années 2000 où je créais mon premier site « la page à Marco ».  C’était un site conçu en HTML avec des « frames » en noir et mauve.  L’effet est très cool, mais la maintenance du site était épouvantable!  En 2000, je remodelais la page à Marco en « la zone à Marco » qui était très design, coloré et avant-gardiste.  Je l’utilisais comme un terrain de jeu: mes premiers rollover avant leur temps, les effets Javascripts dynamiques avant Ajax… Puis, quelques années plus tard, j’ai pris le virage du Web 2.0 en convertissant mon site en blogue, plus standard et surtout plus facile à gérer à distance, mais toutefois moins personnel.

Aujourd’hui, je m’offre un cadeau: un tout nouveau site, nettement plus complet, plus adapté, plus design et combien plus l’fun à gérer grâce au meilleur CMS, WordPress!  Pour les détails techniques, visitez mon portfolio.

Alors que retrouverez-vous sur mon site?  Une partie plus professionnelle, axée sur mes réalisations dans le domaine du web, et une partie plus personnelle, avec les textes et les photos extraits de mon ancien blog et des nouveaux textes qui feront leur apparition très bientôt sur divers sujets: le web, la musique, les technos, les voyages, …  Bref un mélange technico-culturo-geeko-communo-fun, comme moi!

Bonne visite!  Et n’hésitez pas à me laisser vos commentaires. :)


Marc-Olivier.ca

10.2008 | 1 Commentaire | Portfolio, Web 2.0

Description du projet:
Afin de présenter mon portfolio en ligne, j’étais à la recherche un CMS me permettant de gérer facilement mon site, tout en me donnant la flexibilité nécessaire afin de développer une ligne graphique unique et sympathique.  J’ai opté pour WordPress, un gestionnaire de blogue offrant toutes les fonctionnalités recherchées, dans un environnement hyper flexible, stable et hautement performant. J’ai adapté le thème à mon goût en PHP, CSS et Javascript grace à l’API de WordPress.

Composantes:

  • WordPress 2.6
  • Shadowbox 2.0 pour les effets visuels dans les galeries d’images
  • Intégration à Google Analytics

Technologies utilisées:

  • Côté serveur: PHP 5.2, MySQL 5
  • Côté client: XHTML 1.1, CSS 2.1, jQuery (animations et ajax)

AlterHéros

10.2008 | Implications communautaires

AlterHeros.com
De août 2002 à 2005, j’ai été président-fondateur de l’organisme AlterHéros.  Depuis 2002 et jusqu’à ce jour, je suis sur le conseil d’administration à titre de Directeur du développement web.

Mes responsabilités :

  • Fournir mon expertise au conseil d’administration en matière de développement des stratégies Internet, d’e-marketing, de publicité en ligne et des développements logiciels futurs
  • Participer à l’élaboration des grandes orientations de l’organisme
  • Concevoir, développer et maintenir le portail AlterHeros.com et le système gestion de contenu ci-rattachant, permettant de gérer les activités quotidiennes de l’organisme, telles que les services en ligne, les membres, les bénévoles, les infolettres, etc.
  • Orienter l’organisme dans le choix d’applications externes comme Google Apps, de publicité en ligne comme Google AdSense, de CMS tels que WordPress, et autres développements
  • Concevoir la ligne graphique et l’ensemble du matériel promotionnelle avec les outils d’Adobe CS3
  • Évaluer les stratégies de positionnement, analyser les outils de statistiques tels que Google Analytics, SmarterStats et Urchin, et apporter les optimisations requises