IFT 1005 - Design et développement Web

8. Design

Sébastien Roy, Université de Montréal

IFT 1005 - Design et développement Web

8. Design de site web

Sébastien Roy, Université de Montréal
21 mars 2022
 

Remerciements

Merci à Guy Lapalme et Louis Salvail pour avoir partager le matériel qu'ils ont monté pour IFT1005.

Dessin sur les diapos! (oui, en SVG!)

Ces diapos sont "dynamiques"... Appuyez sur ces touches: et quand on dessine... Si les liens d'une diapo ne sont pas actifs, faites b!

Le web comme média

Très différent des autres médias... (imprimé, tv, radio, ...) Un incontournable... Don't make me think, Steve Krug.

Le web

Le web a quelques particularités très spécifiques... Bref, si l'usager a un problème, il va s'en aller...

Utilisabilité et web (www.useit.com)

5 principales composantes ( selon Neisen, www.useit.com )

Design de site web

Comment on crée un site web, du début à la fin?
En théorie...

Un exemple... l'app mobile UdeM

Oui c'est une app, mais bon, c'est une page web dynamique...

Un exemple... l'app mobile UdeM

L'application mobile Mon UdeM est un espace personnalisé qui intègre les informations utiles et pertinentes en fonction des besoins de chaque étudiant / employé de l'Université de Montréal. Elle intègre des outils essentiels au quotidien à l'UdeM et est un lieu central de communication pour prendre connaissance des messages essentiels à la vie à l'UdeM.

Prenons un exemple... l'app mobile UdeM

On y retrouve :

Étapes du développement d'un site web

Pour un site "sérieux", réalisé par une agence web...

1. Stratégie

Réflexions initiales sur le projet de site web. Répond souvent à un appel d'offre, ou à une planification stratégique.

Conditions de réussite

Comment mesurer la réussite?
KPI (Key performance indicator)

2. Conception

Le projet démarre avec une conception initiale, et une équipe réduite. Ce qu'on veut faire...

Récits

Connecte un usager et une tâche à faire par cet usager... et
On associe: Découpage en sous-tâches... si une tache n'entre pas dans un sprint.

Méthode Agile

On découpe l'activité en périodes de 1 à 4 semaines, le sprint.

3. Réalisation

Cette étape réalise le site web complet, à partir de la maquette/prototype, jusqu'à un site fonctionnel.
Équipe de développement:

3. Réalisation

Note importante:
Après la conception initiale, les étapes réalisation et conception sont itératives, et sont donc en action en même temps jusqu'à la fin du projet.

4. Implantation

Cette étape vise la mise en ligne du site. Combien d'environnements on utilise, en pratique? 1? 2? ...

Environnements web

Chaque environnement a une utilité propre...

5. Support évolution

Assure la "vie" du site...
sous la responsabilité d'un chargé de compte.

Les métiers du web

Revenons sur les compétences et responsabilités requises pour construire un site web complet.

Développeur front end

Développeur concerné par tout ce qui est dans le navigateur web.
Il s'intérèsse donc à la partie HTML, CSS, et javascript d'un site.
Des connaissances en utilisabilité, UX, ergononimie, accessibilité, i18n, etc... sont utile ici.

Développeur back-end

Développeur concerné par tout ce qui est du coté serveur d'un site web. Un site web requiert souvent une base de donnés... dans ce cas le backend inclu la responsabilité d'analyste en bases de données (DBA).

Les CMS (Content Management System)

Les CMS sont des environnements pour créer/gérer un site web complet.
Wordpress, Drupal, ...

Webmestre

Le Webmestre est responsable du contenu du site.
En l'absence d'automatisation, il s'occupe de l'importation des données lors des refontes, par exemple.

Administrateur système (dev ops)

Responsable des aspects opérationels techniques d'un site. ici c'est Linux....

QA (Quality Assurance)

L'assurance qualité s'assure de vérifier que le site fait bien ce qu'il doit faire.
C'est un rôle essentiel, car... On prévoit habituellement un environnement dédié au QA.

SEO et cybermétrie

La SEO (Search Engine Optimization) vise à assurer la découvrabilité et visibilité d'un site web.
La cybermétrie vise à mesurer l'atteinte des objectifs statégique d'un site.

Google analytics et RGPD

Le tracking des usagers est omniprésent....
RGPD: Règlement général sur la protection des données
Loi européenne pour protéger les usagers de l'usage abusif de leurs donnees.

Accessibilité

Les usagers ne sont pas tous identiques... Très important, et ca fera l'objet d'un cours complet...

Bon design!