Web 2.0

Web 2.0


AlterHéros 2.0

12.2011

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

 


Zones du cégep de Saint-Laurent

9.2009 | 1 Commentaire

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, on m’a demandé de développer un site Internet pour chacun des programmes et des départements du cégep de Saint-Laurent.  Au total, il s’agissait de créer 19 sites Internet en 4 mois.  Sur les 19, certains départements avaient déjà un site Internet datant de plusieurs années conçus sans CMS ou intégré dans un CMS fermé.  De plus, il fallait concevoir des sites ayant chacun un look différent tout en mettant en pied un cadre commun pour l’ensemble des sites.  L’ampleur du travail était donc colossal.

Avec la participation du personnel enseignant et direction des communications pour le contenu, j’ai décidé de baser les 19 sites Internet, nommés « Zones », sur la plate-forme open-source WordPress MU (Multi-utilisateur).  Il s’agissait donc de concevoir une maquette suffisamment flexible pour s’adapter à plusieurs thèmes pour chacune des zones.  En plus de développer une nouvelle ligne graphique commune à l’ensemble des sites, concevoir au minimum deux thèmes différents pour chacune des zones, migrer ou intégrer le contenu, il a fallu penser à optimiser la plate-forme WordPress pour qu’elle réponde au mieux aux besoins du personnel du cégep quant à la gestion du contenu.

Tel que promis, les 19 sites Internet ont été livrés à temps pour la rentrée scolaire 2009.  Le retour a été des plus positifs, tant au niveau des internautes que le personnel utilisateur.

Composantes:

  • Installation et déploiement de WordPress MU 2.8
  • Conception de la ligne graphique avec Adobe Photoshop
  • Adaptation du thème Twicet de Christian Budschedl
  • Développement du thème WordPress pour permettre aux internautes un choix de personnalisation grâce à la magie du CSS et du Javascript
  • Intégration de plusieurs effets d’animation grâce à jQuery
  • Intégration de plusieurs extensions, dont RoleScoper et WP MU LDAP
  • Formation du personnel et création de tutoriels en ligne
  • 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

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.


Marc-Olivier.ca

10.2008 | 1 Commentaire

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)

Parles-en aux experts

9.2008

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

Description du projet:
Dans le cadre de la croissance de l’organisme à but non-lucratif AlterHéros, on m’a confié le mandat de la conception et du développement du projet Web 2.0 Parles-en aux experts.com (Tell the experts.com).   Il s’agit d’une initiative unique au monde visant à démystifier la diversité sexuelle, en mettant sur pied un réseau d’experts, tels que médecins, travailleurs sociaux, sexologues, psychologues, tous disponibles pour répondre gratuitement aux questions des visiteurs.  De plus, grâce un réseau social intégré, les internautes peuvent suggérer des compléments de réponse, partager des témoignages, publier des articles.  Le site est aussi doté d’un bottin des ressources que les groupes communautaires peuvent mettre à jour directement.

Composantes:

  • Un système de gestion de contenu (CMS) avec plusieurs niveaux d’accès
  • Un système de gestion des questions-réponses
  • Un réseau social incluant un profil détaillé, liste d’amis, historique
  • Un système d’étiquettage et de catégorie
  • Intégration des composantes Google Adsense et Google Maps
  • Site complètement internationalisé (i18n / l10n), initialement en français (Canada) et anglais (Canada)
  • Layout liquide en CSS, sans tableau HTML
  • Conforme aux normes d’accessibilité WCAG 2.0 Niveau A
  • Compatibilité avec Firefox 2, IE 6, Opera, Safari

Technologies utilisées:

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

Status:

En développement.  Une première version a été livrée en septembre.
Livraison béta prévue pour l’hiver 2009.


Zone des alterhéros

10.2004

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

Description du projet:
Afin de permettre aux jeunes allosexuels de moins de 30 ans de pouvoir tisser des liens entre eux, l’organisme AlterHéros m’a confié le mandat de concevoir une application web permettant aux internautes du portail AlterHéros.com de se rencontrer dans un univers en ligne unique et sécuritaire.  La Zone des alterhéros est un mini-site de rencontre qui permet aux internautes de se créer un profil, d’y attacher une photo, de se faire une liste d’amis (appelée liste d’alliés), de publier des témoignages, de devenir membre de l’organisme et plus.

Composantes:

  • Un système de modération des profils et des photos (approbation, modification, retrait)
  • Un système de statistique sur l’achalandage et la clientèle qui utilise l’application
  • Intégration des nouvelles fonctionnalités au site AlterHéros.com
  • Intégration au forum de discussions phpBB
  • Application bilingue
  • Compatibilité avec Firefox 2, IE 6, Opera, Safari

Technologies utilisées:

  • Côté serveur: Adobe ColdFusion 8, PHP, MySQL 5
  • Côté client: HTML, CSS, Javascript

Statut:

La zone des alterhéros est ligne.