Étapes de réalisation d'un site Web
Adresses derrière les liens

Présentation du formateur
Écran 2
  1. www.espacecourbeformation.com/fr/cours/etapes-realisation-site-web/ https://www.espacecourbeformation.com/fr/cours/etapes-realisation-site-web/
Documentation pour votre équipe
Écran 4
  1. Web ReDesign 2.0, Workflow that Works http://www.web-redesign.com/
  2. Web Style Guide http://www.webstyleguide.com/
  3. Philip and Alex's Guide to Web Publishing http://philip.greenspun.com/panda/
Préplanificateur de site Web
Écran 9
  1. mettre sur papier la stratégie http://www.secretsites.com/classic/profiler/set_partnering.html
Cartographier le parcours client
Écran 10
  1. Examples of customer journey mapping https://www.smartinsights.com/user-experience/customer-experience-management-cxm/mapping-customer-journey/
Cibler la clientèle : établir le profil usager
Écran 13
  1. segmentations de la clientèle ou personas http://www.bruceclay.com/design/articles/webpersona.htm
Requis de l'environnement technologique
Écran 17
  1. framework http://fr.wikipedia.org/wiki/Framework
Fonctionnalités fréquemment demandées (p. 1/2)
Écran 19
  1. recherche plein texte https://fr.wikipedia.org/wiki/Recherche_plein_texte
  2. recherche par facettes https://fr.wikipedia.org/wiki/Recherche_%C3%A0_facettes
  3. recherche sur IGA.net https://www.iga.net/fr/epicerie_en_ligne/parcourir/
Exemple de recherche par facettes
Écran 20
  1. recherche sur UdeM Nouvelles http://nouvelles.umontreal.ca/recherche/filtres/prof_20/sujet_117/
Exemple de site adaptatif montrant le rendu pour différents types d'appareils
Écran 22
  1. page de présentation du projet Itinéraires musées http://www.espacecourbe.com/fr/creation/realisations/itineraires-musees/
  2. galerie de sites RWD sur Media Queries http://mediaqueri.es/
Sites adaptatifs : il y a un coût
Écran 23
  1. exemple d'un tableau complexe https://icra2019.org/sponsors-exhibitors/talent-program-organizations
Exemple de fonctionnalité adaptée : recherche dans le Guide des musées (p. 1/2)
Écran 24
  1. Guide des musées https://www.musees.qc.ca/fr/musees/guide
Exemple de fonctionnalité adaptée : recherche dans le Guide des musées (p. 2/2)
Écran 25
  1. UdeM Nouvelles https://nouvelles.umontreal.ca/recherche/?q=
Possibilités pour gérer sa vitrine Web
Écran 27
  1. gabarit musée de Wix http://fr.wix.com/website-template/view/html/1478
  2. wordpress.com http://wordpress.com
  3. squarespace.com https://fr.squarespace.com/
Exemple 1 : refonte de l'espace professionnel de la SMQ (2013-2015)
Écran 29
  1. Espace professionnel de la Société des musées du Québec https://www.musees.qc.ca/fr/professionnel/
Exemple 2 : Microsite admission pour l'ITHQ (2019)
Écran 30
  1. ITHQ Admission https://www.ithq.qc.ca/admission/
Exemple 3 : Site de GIRO (2013)
Écran 31
  1. GIRO http://www.giro.ca/fr/
Exemple 4 : Site d'ICRA 2019 (2018)
Écran 32
  1. ICRA 2019 https://icra2019.org/
Exigences techniques
Écran 36
  1. responsive Web design http://fr.wikipedia.org/wiki/Responsive_Web_Design
  2. AJAX http://fr.wikipedia.org/wiki/Asynchronous_JavaScript_And_XML
  3. aide-mémoire de Goto+Cotler http://www.web-redesign.com/downloads/06_client-specsheet.pdf
Exemple d'une application faite en React (p. 1/2)
Écran 37
  1. Baladodiffuseur https://www.trucshtml5.com/demos/synthese/offread/dist/
Classes de contenu (p. 1/3)
Écran 41
  1. Qu'est-ce qu'une classe de contenu? https://www.espacecourbeformation.com/fr/articles/classe-de-contenu/
Rappel: refonte de l'espace professionnel de la SMQ (2013-2015)
Écran 45
  1. Espace professionnel de la Société des musées du Québec http://www.musees.qc.ca/fr/professionnel/
Exercice : décrire une classe de contenu
Écran 46
  1. Espace professionnel de la Société des musées du Québec http://www.musees.qc.ca/fr/professionnel/
Patrons d'éléments d'interface : exemple d'une page
Écran 48
  1. Société des musées du Québec http://www.musees.qc.ca/fr/professionnel/activites-services/prix-smq/laureats
Patrons d'éléments d'interface : description des éléments
Écran 49
  1. menu horizontal et/ou menu vertical avec quelques niveaux http://www.immigration-quebec.gouv.qc.ca/fr/immigrer-installer/travailleurs-temporaires/demarches/index.html
  2. menus déroulants http://www.musees.qc.ca/fr/professionnel/activites-services/formation
  3. contrôles pour alternatives linguistiques http://www.giro.ca/fr/
  4. mega menus déroulants http://www.useit.com/alertbox/mega-dropdown-menus.html
  5. pieds de page épais http://www.chop.edu/
  6. UI Design Patterns http://ui-patterns.com/patterns
Spécifications fonctionnelles (p. 4/4)
Écran 50
  1. WAI http://www.w3.org/TR/WCAG20/
  2. SGQRI 008-01 http://www.tresor.gouv.qc.ca/ressources-informationnelles/standards-sur-laccessibilite-du-web/
  3. PIV http://piv.gouv.qc.ca/index.php?id=2
  4. NSI http://www.tbs-sct.gc.ca/clf-nsi/index-fra.asp
  5. PCI https://www.pcisecuritystandards.org/
  6. RGPD https://ec.europa.eu/info/law/law-topic/data-protection/reform/rules-business-and-organisations_fr
Éléments à ne pas oublier pour un site de commerce électronique
Écran 51
  1. normes de sécurité de l'industrie https://www.pcisecuritystandards.org/
Développer des applications interactives
Écran 52
  1. validation client sur un formulaire http://www.rememberthemilk.com/signup/
Étapes de la production (p. 1/3)
Écran 55
  1. mood boards http://bit.ly/L1aPeZ
  2. maquette en fil de fer https://www.invisionapp.com/inside-design/wireframe-examples/
  3. maquette fonctionnelle adresse privée
  4. concept graphique adresse privée
  5. maquette avec interface usager adresse privée
Maquette en fil de fer (maquette wireframe)
Écran 56
  1. Balsamic Mockups https://balsamiq.com/products/mockups/
  2. Axure Wireframes and Prototypes http://www.axure.com/
  3. MockFlow adresse privée
  4. Cacoo https://cacoo.com/
  5. inVision adresse privée
Mise en scénario des maquettes
Écran 57
  1. Website & App Wireframe Examples For Creating a Solid UX Design https://www.invisionapp.com/inside-design/wireframe-examples/
Étapes de la production (p. 2/3)
Écran 59
  1. page 503 sur mesure http://www.smashingmagazine.com/2009/06/effective-maintenance-pages-examples-and-best-practices/
Outils ou services pour aider au contrôle de qualité
Écran 65
  1. validator.w3.org : validation de syntaxe HTML http://validator.w3.org/
  2. Jigsaw : validation de feuilles de styles http://jigsaw.w3.org/css-validator
  3. Spoon.net http://www.spoon.net/browsers
  4. url2png http://url2png.com/
  5. Selenium : extension Firefox pour les tests fonctionnels http://docs.seleniumhq.org/
  6. backtrac.io https://backtrac.io/
  7. Collaboration continue avec Drupal https://philosophilly.com/twin-cities-drupalcamp-presentation-on-continuous-collaboration-b1e46b5908fe
  8. intégration continue de eZ Publish et platform.sh https://youtu.be/iufireMN5jU
Références pour l'utilisabilité
Écran 67
  1. useit.com (Jakob Nielsen) http://www.useit.com/alertbox/
  2. Don't make me think! http://www.sensible.com/downloads-dmmt.html
  3. enregistrement de session http://www.techsmith.com/products/morae/default.asp
Personnaliser les pages d'erreur
Écran 68
  1. exemples de pages d'erreurs https://rigor.com/blog/15-awesome-fail-pages
Contenu pour une page d'erreur 404
Écran 69
  1. Espace Courbe http://www.espacecourbe.com/fr/pagenontrouvee
  2. gouvernement du Canada (bilingue) http://www.canada.ca/non-trouvee
Penser à un plan de migration...
Écran 71
  1. moteurs de recherche publics http://www.google.com/support/webmasters/bin/answer.py?hl=fr&answer=93633
Illustrer le changement au niveau des DNS
Écran 72
  1. changement au niveaux des serveurs DNS https://www.whatsmydns.net/
Quelques outils utiles pour la gestion du projet Web
Écran 74
  1. Wrike https://www.wrike.com/fr/
  2. Smartsheet https://fr.smartsheet.com/
  3. project management software https://www.capterra.com/project-management-software/
  4. Basecamp http://www.basecamphq.com/
  5. Redmine http://www.redmine.org/
  6. Inspiration http://www.inspiration.com/
  7. LucidChart https://www.lucidchart.com/pages/examples/sitemap_creator
  8. OmniGraffle avec les bons stencils http://wireframes.linowski.ca/2010/10/site-architecture-stencil-for-omnigraffle/
  9. inVision https://www.invisionapp.com/
  10. Balsamic Mockups https://balsamiq.com/products/mockups/
  11. Axure Wireframes and Prototypes http://www.axure.com/
  12. MockFlow adresse privée
  13. Cacoo https://cacoo.com/
  14. Git https://fr.wikipedia.org/wiki/Git
  15. subversion (svn) https://fr.wikipedia.org/wiki/Apache_Subversion
  16. CVS http://www.nongnu.org/cvs/
  17. Request tracker http://www.fsck.com/projects/rt/
  18. TestTrack Pro http://www.seapine.com/ttpro.html
  19. Bugzilla http://www.bugzilla.org/
  20. Mantis BT http://www.mantisbt.org/
  21. JIRA https://fr.atlassian.com/software/jira
  22. top bug tracking software http://www.capterra.com/bug-tracking-software/
  23. MHonArc http://www.mhonarc.org/
  24. Trello https://trello.com/
Site de pilotage
Écran 75
  1. site pour le site http://www.secretsites.com/classic/projectsite/set_site.html
Art pour tous, ce sont...
Écran 82
  1. www.artpourtous.ca http://www.artpourtous.umontreal.ca/
Grille des œuvres
Écran 89
  1. grille des œuvres http://www.artpourtous.umontreal.ca/voir/oeuvres/index.html
Élément central : l'œuvre
Écran 91
  1. Molécules http://www.artpourtous.umontreal.ca/voir/oeuvres/molecules/index.html
Baladodiffusion : visite virtuelle
Écran 94
  1. troisième étape du parcours des anciens couvents http://www.artpourtous.umontreal.ca/promener/parcours/anciens-couvents.html#balado-molecules
Panneau pour l'œuvre 30
Écran 97
  1. Biennale de Vancouver http://www.flickr.com/photos/benoitdubuc/4890531403/in/photostream
Œuvres et bâtiments sur la carte
Écran 98
  1. œuvres sur la carte http://www.artpourtous.umontreal.ca/voir/carte/index.html?id=molecules
  2. zooms de cartes sur le site http://www.artpourtous.umontreal.ca/voir/carte/index.html
Étapes (1/4)
Écran 100
  1. orientations conceptuelles adresse privée
  2. spécifications fonctionnelles adresse privée
  3. maquette fonctionnelle adresse privée
  4. concept graphique adresse privée
Étapes (3/4)
Écran 102
  1. visuel pour le contrôle adresse privée
  2. images couvertures pour les mp3 adresse privée
Outil pour communiquer
Écran 104
  1. index ouvert adresse privée
Moins bons coups dans le projet
Écran 106
  1. fiche de l'œuvre 11e heure http://www.artpourtous.umontreal.ca/voir/oeuvres/11e-heure/index.html
  2. position sur la carte http://www.artpourtous.umontreal.ca/voir/carte/index.html?id=11e-heure
Où retrouve-t-on de la redondance dans un site Web?
Écran 109
  1. système d'export-import http://docs.oasis-open.org/xliff/xliff-core/xliff-core.html
Logiciels pour la gestion de contenu Web
Écran 112
  1. Microsoft Sharepoint Server https://fr.wikipedia.org/wiki/Microsoft_SharePoint
  2. SPIP http://www.spip.net/
  3. Joomla! http://www.joomla.org/
  4. Drupal http://drupal.org/
  5. WordPress http://wordpress.org/
  6. TYPO3 http://www.typo3.com/
  7. eZ Platform http://ez.no/fr/
  8. https://www.cmscritic.com/dir/ https://www.cmscritic.com/dir/
  9. http://www.realstorygroup.com/Vendors-Evaluated/ http://www.realstorygroup.com/Vendors-Evaluated/
  10. https://www.wappalyzer.com/categories/cms https://www.wappalyzer.com/categories/cms
Éléments de décisions pour le choix d'un SGC
Écran 113
  1. OpenHub https://www.openhub.net/
Quelques références sur les SGC
Écran 114
  1. Real StoryGroup et son rapport: Web Content and Experience Management http://www.realstorygroup.com/Reports/cms/
  2. Gartner Magic Quadrant for Web Content Management http://www.gartner.com/DisplayDocument?id=2148315
  3. Livre blanc sur les SGC open source http://www.smile.fr
  4. How to evaluate a content management system http://www.steptwo.com.au/papers/kmc_evaluate/

Tous droits réservés 2019, Espace Courbe Formation inc. —17 novembre 2019 — 16:25:32