Différences entre versions de « Développement professionnel/Pensée conceptuelle/Prototypage de logiciels et outils »

De Wiki CGEC
Aller à la navigation Aller à la recherche
m
m
 
(9 versions intermédiaires par le même utilisateur non affichées)
Ligne 57 : Ligne 57 :
 
|Logiciel fonctionnel
 
|Logiciel fonctionnel
 
|}
 
|}
 +
Voici des métriques qui pourraient vous être utile https://www.nngroup.com/articles/usability-metrics/ et des astuces d'interface utilisateur https://lawsofux.com/.
  
 
===Partage===
 
===Partage===
Ligne 64 : Ligne 65 :
  
 
===Outils===
 
===Outils===
−
Voici une liste d'outils de prototypage UI et UX qui pourraient être utiles et sont très facile à utiliser: https://blog.prototypr.io/top-20-prototyping-tools-for-ui-and-ux-designers-2017-46d59be0b3a9 (Figma, Balsamiq et Adobe XD sont suggérés qui sont gratuits ou gratuit pour étudiants)
+
Voici une liste d'outils de <u>prototypage UI et UX</u> qui pourraient être utiles et sont très facile à utiliser: https://blog.prototypr.io/top-20-prototyping-tools-for-ui-and-ux-designers-2017-46d59be0b3a9 (Figma, Balsamiq et Adobe XD sont suggérés qui sont gratuits ou gratuit pour étudiants). [https://app.diagrams.net/ Draw.io] est aussi très utile pour créer des <u>organigrammes</u>.
  
 
Assurez-vous que lorsque vous concevez votre interface utilisateur pour des clients ayant des <u>besoins d'accessibilité</u>, vous prenez en compte les couleurs que vous utilisez.
 
Assurez-vous que lorsque vous concevez votre interface utilisateur pour des clients ayant des <u>besoins d'accessibilité</u>, vous prenez en compte les couleurs que vous utilisez.
Ligne 77 : Ligne 78 :
 
*[https://appinventor.mit.edu/ MIT app inventor] (applications android seulement)
 
*[https://appinventor.mit.edu/ MIT app inventor] (applications android seulement)
 
*[https://thunkable.com/#/ Thunkable] (applications android et iOS)
 
*[https://thunkable.com/#/ Thunkable] (applications android et iOS)
 +
*[https://www.adalo.com/ Adalo] (applications android et iOS, plus limité que Thunkable)
 
*[https://www.wix.com/ Wix] (siteweb)
 
*[https://www.wix.com/ Wix] (siteweb)
 
*[https://powerapps.microsoft.com/en-us/ Microsoft Power Apps] (android, iOS et windows)
 
*[https://powerapps.microsoft.com/en-us/ Microsoft Power Apps] (android, iOS et windows)
Ligne 89 : Ligne 91 :
 
*[https://developer.android.com/studio Android studio]
 
*[https://developer.android.com/studio Android studio]
 
*[https://developers.google.com/apis-explorer Google API]
 
*[https://developers.google.com/apis-explorer Google API]
 +
 +
===Developement Apple===
 +
Il est plus compliqué de développer des applications pour iPhone ou Mac que pour Android ou Windows. Vous pouvez obtenir un compte développeur Apple qui vous permet de publier sur le magasin Applee ou sur Test Flight, mais cela coûte 99 $ USD/an. La publication sur ces plates-formes implique également des tests rigoureux et doit respecter les normes élevées d'Apple, ce qui n'en fait pas habituellement un choix très réalisable pour un projet d'un semestre.
 +
 +
Il est recommandé de créer des [https://fr.wikipedia.org/wiki/Progressive_web_app applications web progressives] (PWA) lors du développement pour les appareils Apple. Ces sites Web peuvent être «installés» sur des téléphones comme s'il s'agissait d'applications et il y a beaucoup de documentation à ce sujet. Voici quelques ressources pour vous aider à commencer:
 +
 +
*C'est quoi des PWA's: https://www.youtube.com/watch?v=4XT23X0Fjfk
 +
*Code pour bâtir des PWA's:
 +
**[https://angular.io/ Angular] guide PWA- https://angular.io/guide/service-worker-getting-started
 +
**[https://reactjs.org/ React] guide PWA- https://create-react-app.dev/docs/making-a-progressive-web-app/
 +
**[https://nextjs.org/ Next] guide PWA- https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app
 +
**Tutoriel avec HTML et javascript:
 +
***https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605
 +
***https://dzone.com/articles/how-to-build-a-progressive-web-app-pwa-with-javasc
 +
***https://web.dev/progressive-web-apps/
 +
*Une option est AWS (Amazon web services) comme le cadre pour héberger le PWA
 +
**Créer un [https://aws.amazon.com/s3/pricing/ S3 bucket] pour chaque projet -> gratuit, presque, coute peut-être quelques cennes par mois
 +
**[https://aws.amazon.com/route53/pricing/ Route 53] pour créer les sous-domaines -> gratuit
 +
**[https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/domain-register.html#domain-register-procedure Domaines] -> pour acheter le domaine pour la classe, peut-être $15 par année (pas nécessaire pour GNG)
 +
**[https://aws.amazon.com/certificate-manager/ Certificates] -> gratuit pour avoid les certificats ssl
 +
**[https://github.com/pricing GIthub] pour héberger le code et publier à S3-> gratuit
 +
*Outils pour créer PWA's:
 +
**Convertir des applications web en PWA: https://www.creativebloq.com/how-to/build-a-progressive-web-app
 +
**Convertir un site wix en PWA: https://wappaa.com/wappstore/wix-site-to-app/
 +
**https://techbeacon.com/app-dev-testing/5-best-tools-building-progressive-web-apps-fast
 +
**https://developers.google.com/web/updates/2015/12/getting-started-pwa
 +
**https://developer.mozilla.org/fr/docs/Web/Progressive_web_apps

Version actuelle datée du 10 février 2022 à 13:50

Beaucoup d'entre nous (AEs/GPs et étudiants) ont du mal avec le concept de test de logiciel ou simplement avec la façon de prototyper un logiciel. C'est moins concret que le prototypage physique et il est plus difficile de comprendre. Vous pourriez dire que vous ne pouvez pas tester ou prototyper quelque chose parce que c'est un logiciel... détrompez-vous!

Nous allons le comparer à un cycle de conception mécanique typique (sans tenir compte de l'implication du client):

Étape de conception Mécanique Logiciel
Conception conceptuels Croquis dessinés à la main/ordinateur Croquis dessinés à la main/ordinateur
Conception preliminaire Assemblages CAO initiaux Conceptions filaires (wireframe)/organigramme
Conception détaillée CAD entièrement défini Schéma haute fidélité/Logiciel codé initial
Simulation/ test Simulations de force/ fluide CAO Simulation UX
Prototype 1 Pièce(s) fabriquée(s) Logiciel codé fonctionnel
Tests raffinés Test sous charge par rapport aux métriques Sous-fonctions pour tester le comportement de fonctionnalités spécifiques par rapport aux métriques

Dans nos classes GNG1503/2501, le cycle est un peu différent là où vous pourriez avoir:

Étape de conception Mécanique Logiciel
Dessins conceptuels Croquis dessinés à la main Croquis dessinés à la main
Conception détaillée Croquis détaillés des sous-ensembles avec quelques analyses Conceptions filaires (wireframe)/organigramme
Prototype 1 Prototype en carton Schéma haute fidélité/ Logiciel codé initial
Simulation / test Test fonctionnel du prototype par rapport aux métriques Simulation UX par rapport aux métriques
Prototype 2/3 Prototype assemblé et fonctionnel Logiciel fonctionnel

Voici des métriques qui pourraient vous être utile https://www.nngroup.com/articles/usability-metrics/ et des astuces d'interface utilisateur https://lawsofux.com/.

Partage

Lorsque vous travaillez en équipe, vous voudrez certainement partager vos fichiers pour travailler ensemble. En mécanique, GrabCad Workbench est un outil populaire, mais dans le logiciel, GitHub est définitivement un standard de l'industrie.

Voici une introduction à GitHub https://rogerdudler.github.io/git-guide/index.fr.html

Outils

Voici une liste d'outils de prototypage UI et UX qui pourraient être utiles et sont très facile à utiliser: https://blog.prototypr.io/top-20-prototyping-tools-for-ui-and-ux-designers-2017-46d59be0b3a9 (Figma, Balsamiq et Adobe XD sont suggérés qui sont gratuits ou gratuit pour étudiants). Draw.io est aussi très utile pour créer des organigrammes.

Assurez-vous que lorsque vous concevez votre interface utilisateur pour des clients ayant des besoins d'accessibilité, vous prenez en compte les couleurs que vous utilisez.

Voici une liste de plateformes qui exige de l'expérience minimale de programmation à utiliser:

Voici une liste de sitewebs avec du syntax de code et des bibliothèques utiles qui peuvent vous aider à commencer:

  • W3 Schools (HTML, CSS, JavaScript, SQL, PHP et plus!)

Voici une liste d'autres plateformes pour construire des applications ou sitewebs qui exigent plus d'expérience en programmation pour utiliser:

Developement Apple

Il est plus compliqué de développer des applications pour iPhone ou Mac que pour Android ou Windows. Vous pouvez obtenir un compte développeur Apple qui vous permet de publier sur le magasin Applee ou sur Test Flight, mais cela coûte 99 $ USD/an. La publication sur ces plates-formes implique également des tests rigoureux et doit respecter les normes élevées d'Apple, ce qui n'en fait pas habituellement un choix très réalisable pour un projet d'un semestre.

Il est recommandé de créer des applications web progressives (PWA) lors du développement pour les appareils Apple. Ces sites Web peuvent être «installés» sur des téléphones comme s'il s'agissait d'applications et il y a beaucoup de documentation à ce sujet. Voici quelques ressources pour vous aider à commencer:

Récupérée de « https://fr.wiki.makerepo.com/mediawiki/index.php?title=Développement_professionnel/Pensée_conceptuelle/Prototypage_de_logiciels_et_outils&oldid=325 »