Tendances techniques, webdesign, des composants HTML, CSS et graphiques du moment.Recensement non exhaustif des tendances du moment. Analyse des avantages et inconvénients pour chacun d'eux
Webdesign Passe Present et Present Part2bduverneuil
2ème partie "Webdesign Passé, Présent et... Présent" une présentation de Benoit Duverneuil lors de la 3ème édition du Festival de Webdesign de Rouyn-Noranda (Québec).
Consultez la première partie : http://www.slideshare.net/bduverneuil/webdesign-pass-prsent-et-prsent-part1/
La prochaine version de la gamme de produit Visual Studio ALM est en préparation. Nous en savons déjà beaucoup sur les futures fonctionnalités ! Venez découvrir ce que ce nouvel opus vous permettra de faire en termes d'agilité, de tests et de développement ! La session privilégiera les démonstrations d’un maximum de nouvelles fonctionnalités, telles que la notion de feedback, le code review, les tests exploratoires, les nouvelles expériences utilisateurs, les nouveautés du contrôle de code source, et bien d’autres !
Tendances techniques, webdesign, des composants HTML, CSS et graphiques du moment.Recensement non exhaustif des tendances du moment. Analyse des avantages et inconvénients pour chacun d'eux
Webdesign Passe Present et Present Part2bduverneuil
2ème partie "Webdesign Passé, Présent et... Présent" une présentation de Benoit Duverneuil lors de la 3ème édition du Festival de Webdesign de Rouyn-Noranda (Québec).
Consultez la première partie : http://www.slideshare.net/bduverneuil/webdesign-pass-prsent-et-prsent-part1/
La prochaine version de la gamme de produit Visual Studio ALM est en préparation. Nous en savons déjà beaucoup sur les futures fonctionnalités ! Venez découvrir ce que ce nouvel opus vous permettra de faire en termes d'agilité, de tests et de développement ! La session privilégiera les démonstrations d’un maximum de nouvelles fonctionnalités, telles que la notion de feedback, le code review, les tests exploratoires, les nouvelles expériences utilisateurs, les nouveautés du contrôle de code source, et bien d’autres !
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...SOAT
Plus de 50% des internautes français utilisent un support mobile pour naviguer sur le web. Il est donc temps de repenser votre stratégie mobile et le Responsive Web Design, consistant à ne faire qu’un seul site adapté au périphérique qui l’affiche, constitue une approche possible.
Après une introduction à ses principes, nous verrons qu’au-delà des défis techniques, le RWD suppose de revoir entièrement le processus de développement d’un site web et les méthodes de travail des équipes, que ce soit en phase de conception ou lors des tests.
Cette conférence sera l’occasion de découvrir les nouveaux challenges à relever par vos équipes lors de la conception de vos prochains sites internet.
Agile Tour Nantes 2011 - Jean philippe gouigoux - architecture et agilité, ré...Association Agile Nantes
L'architecture et l'agilité sont souvent vues comme opposées : l'architecture encourage l'abstraction, la structuration pour le futur, alors que l'agilité met l'accent sur le réalisme et la simplicité. Cette conférence tente de jeter un éclairage sur cette apparente incompatibilité, en commençant par détruire quelques mythes sur l'architecture. Ensuite, elle donne des critères pour positionner correctement le curseur entre abstraction et pragmatisme. Enfin, elle montre l'apport essentiel des techniques de refactoring dans une approche agile de l'architecture logicielle, avec une démonstration sur du code.
Propulsez votre architecture grâce au TDD et aux mocks (Agile Québec 2013)Elapse Technologies
La communauté a découvert depuis un certain temps des pratiques permettant de maximiser l'émergence du design (architecture) via le TDD. Mais comment faire? Cette présentation explique comment tirer le maximum de vos tests unitaires et de vos «mocks» à l'aide de l'approche «Mockiste» (TDD de Londres). Nous verrons comment les mocks peuvent aider à concevoir une architecture ayant une meilleure conception orientée objet.
La séance prendra la forme d'un tutoriel (démonstration) avancé en réalisant pas à pas un design simple parsemé de trucs et astuces.
Code source: https://github.com/fbourbonnais/propulsez-architecture-tdd-mocks
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019Oeil de Coach
Une User Story (US) est le juste formalisme d’un élément fonctionnel du point de vue de l’utilisateur, précisant la valeur apportée à ce dernier.
Comment rédiger de bonnes USER STORIES ?
Bonnes pratiques à l’usage des équipes agiles (SCRUM / KANBAN / SAFe)
Sommaire :
> Les origines des User Stories
> Les 3C
> Définition et formalisation d’une User Story
> Méthode INVEST
> Comment découper vos US
> Quel niveau de détail
> Quel est le cycle de vie d'une User Story
> Le rôle du Product Owner sur une US
> Erreurs à éviter
Présentation PPT en libre téléchargement, créée par Martial SEGURA - OEIL DE COACH
www.oeildecoach.com
Webdesign sites web et mobiles-methodes-realisation-outilsOlivier Dommange
Méthodes et stratégies de conception sites Web et mobiles. Processus de conception présentant la maquette de fil de fer (wireframe), mockups jusqu'au design. Présentation des objectifs et du rôle du Webdesigner à chacun des étapes. Rapports entre la dégradation élégante (gracefull degradation) et amélioration progressive (progressive enhancement - mobile first).
Présentation de la bibliothèque JavaScript jQuery dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'École de technologie supérieure, Montréal, Automne 2009
L'histoire d'html5 pour les développeurs windows phone 8davrous
Dans cette session, nous parcourons ensemble l'histoire HTML5 pour les développeurs Windows Phone 8. Nous verrons d'abord comment utiliser des morceaux d'HTML5 dans certaines applications natives, ce qui peut s'avérer dans certains cas exceptionnels être assez pratique. Ensuite, grâce aux possibilités d'IE10, nous verrons qu'il est également possible de créer de vraies applications vivant uniquement dans le navigateur. Pour finir, nous jetterons un oeil aux possibilités d'intégration dans l'OS grâce au template de projet HTML5 de Visual Studio 2012 ou grâce à des frameworks comme PhoneGap ou Sencha Touch 2.
Jouée pendant les MS Techdays 2013: http://www.microsoft.com/france/mstechdays/programmes/2013/fiche-session.aspx?ID=2d81322e-6ab2-4840-a4b1-568f1bd370f4
The document discusses principles of good web design. It advocates for design that is flexible, adaptable to change, and uses language that is intuitive for humans. Specifically, it recommends design that can evolve over time, adapt to different environments and user needs, and helps bridge gaps in users' knowledge to make learning easy. The document also emphasizes that the web experience should be universal, mobile, and bring people together across borders.
The document is a lecture on design interaction that defines design, discusses its objectives of organizing chaos, serving humans and communicating, and emphasizes people-centered design. It explores how to be a good design interaction professional through creativity, logic and compassion. The lecture also provides an overview of different design disciplines like graphic, physical/tangible, and interaction design.
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...SOAT
Plus de 50% des internautes français utilisent un support mobile pour naviguer sur le web. Il est donc temps de repenser votre stratégie mobile et le Responsive Web Design, consistant à ne faire qu’un seul site adapté au périphérique qui l’affiche, constitue une approche possible.
Après une introduction à ses principes, nous verrons qu’au-delà des défis techniques, le RWD suppose de revoir entièrement le processus de développement d’un site web et les méthodes de travail des équipes, que ce soit en phase de conception ou lors des tests.
Cette conférence sera l’occasion de découvrir les nouveaux challenges à relever par vos équipes lors de la conception de vos prochains sites internet.
Agile Tour Nantes 2011 - Jean philippe gouigoux - architecture et agilité, ré...Association Agile Nantes
L'architecture et l'agilité sont souvent vues comme opposées : l'architecture encourage l'abstraction, la structuration pour le futur, alors que l'agilité met l'accent sur le réalisme et la simplicité. Cette conférence tente de jeter un éclairage sur cette apparente incompatibilité, en commençant par détruire quelques mythes sur l'architecture. Ensuite, elle donne des critères pour positionner correctement le curseur entre abstraction et pragmatisme. Enfin, elle montre l'apport essentiel des techniques de refactoring dans une approche agile de l'architecture logicielle, avec une démonstration sur du code.
Propulsez votre architecture grâce au TDD et aux mocks (Agile Québec 2013)Elapse Technologies
La communauté a découvert depuis un certain temps des pratiques permettant de maximiser l'émergence du design (architecture) via le TDD. Mais comment faire? Cette présentation explique comment tirer le maximum de vos tests unitaires et de vos «mocks» à l'aide de l'approche «Mockiste» (TDD de Londres). Nous verrons comment les mocks peuvent aider à concevoir une architecture ayant une meilleure conception orientée objet.
La séance prendra la forme d'un tutoriel (démonstration) avancé en réalisant pas à pas un design simple parsemé de trucs et astuces.
Code source: https://github.com/fbourbonnais/propulsez-architecture-tdd-mocks
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019Oeil de Coach
Une User Story (US) est le juste formalisme d’un élément fonctionnel du point de vue de l’utilisateur, précisant la valeur apportée à ce dernier.
Comment rédiger de bonnes USER STORIES ?
Bonnes pratiques à l’usage des équipes agiles (SCRUM / KANBAN / SAFe)
Sommaire :
> Les origines des User Stories
> Les 3C
> Définition et formalisation d’une User Story
> Méthode INVEST
> Comment découper vos US
> Quel niveau de détail
> Quel est le cycle de vie d'une User Story
> Le rôle du Product Owner sur une US
> Erreurs à éviter
Présentation PPT en libre téléchargement, créée par Martial SEGURA - OEIL DE COACH
www.oeildecoach.com
Webdesign sites web et mobiles-methodes-realisation-outilsOlivier Dommange
Méthodes et stratégies de conception sites Web et mobiles. Processus de conception présentant la maquette de fil de fer (wireframe), mockups jusqu'au design. Présentation des objectifs et du rôle du Webdesigner à chacun des étapes. Rapports entre la dégradation élégante (gracefull degradation) et amélioration progressive (progressive enhancement - mobile first).
Présentation de la bibliothèque JavaScript jQuery dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'École de technologie supérieure, Montréal, Automne 2009
L'histoire d'html5 pour les développeurs windows phone 8davrous
Dans cette session, nous parcourons ensemble l'histoire HTML5 pour les développeurs Windows Phone 8. Nous verrons d'abord comment utiliser des morceaux d'HTML5 dans certaines applications natives, ce qui peut s'avérer dans certains cas exceptionnels être assez pratique. Ensuite, grâce aux possibilités d'IE10, nous verrons qu'il est également possible de créer de vraies applications vivant uniquement dans le navigateur. Pour finir, nous jetterons un oeil aux possibilités d'intégration dans l'OS grâce au template de projet HTML5 de Visual Studio 2012 ou grâce à des frameworks comme PhoneGap ou Sencha Touch 2.
Jouée pendant les MS Techdays 2013: http://www.microsoft.com/france/mstechdays/programmes/2013/fiche-session.aspx?ID=2d81322e-6ab2-4840-a4b1-568f1bd370f4
The document discusses principles of good web design. It advocates for design that is flexible, adaptable to change, and uses language that is intuitive for humans. Specifically, it recommends design that can evolve over time, adapt to different environments and user needs, and helps bridge gaps in users' knowledge to make learning easy. The document also emphasizes that the web experience should be universal, mobile, and bring people together across borders.
The document is a lecture on design interaction that defines design, discusses its objectives of organizing chaos, serving humans and communicating, and emphasizes people-centered design. It explores how to be a good design interaction professional through creativity, logic and compassion. The lecture also provides an overview of different design disciplines like graphic, physical/tangible, and interaction design.
Wireframes are low-fidelity visual guides that represent the skeletal framework of a website or application, focusing on functionality and content hierarchy rather than visual design. They aid in interface design, rapid prototyping, and establishing relationships between pages. Common uses of wireframes include illustrating information architecture, prototyping interactions and scenarios, and ensuring usability.
The document is a lecture on interaction design that covers several topics:
1. It defines design and discusses its goals of organizing chaos, serving humans, and communicating.
2. It discusses different design disciplines like graphic, physical/tangible, and interaction design.
3. It outlines the importance of user-centered design and understanding needs versus wants.
The summary highlights the key topics covered in the lecture including defining design, discussing design disciplines, and focusing on user-centered design principles. It concisely summarizes the essential information from the document in 3 sentences.
During the Pecha Kucha Montreal on April 20 2011, I presented the upcoming conference I am helping organize called Libre Graphics Meeting from May 10 -13. I encouraged designers to participate in the movement of open source software because they are needed. Designers and programmers, they complete each other and can build together really cool shit.
The document discusses several key aspects of design thinking for web projects, including understanding the culture, competitors, users, and content. Some of the main points covered are: understanding business goals and stakeholders, auditing competitors to see what works and what to avoid, identifying different types of users and their goals, and ensuring content is easily readable and scannable. The overall focus is on taking a holistic and user-centered approach to design.
2. Avez-vous
fait vos
devoirs?
Tuesday, September 20, 2011
3. Devoir
Évaluer 3 designs
(Choisir au moins un design d’interface)
Quels sont les objectif(s)
Comment auriez-vous innové ce design?
Tuesday, September 20, 2011
4. Processus de
design d’un produit
Tuesday, September 20, 2011
5. Waterfall (classique)
Tuesday, September 20, 2011
6. Waterfall
http://en.wikipedia.org/wiki/Waterfall_model
Tuesday, September 20, 2011
8. Livrables
Requirements
★ Brief (Collecte d'informations)
★ Collecte et analyse des metrics (Données du site)
★ Audit du site (Étude d'utilisabilité des éléments existants)
★ Ethnographie ou entrevues (Définir le profil utilisateurs)
★ Benchmarking (Marché/Concurrence)
★ Card sorting (Le tri par cartes)
Tuesday, September 20, 2011
9. Livrables
UX Design
★ Persona: (Utilisateurs-types)
★ Plans du site et inventaire des contenus / arborescence
★ UseCase (Scénarios d'utilisation)
★ Wireframes (Croquis d'écrans)
★ PDD
★ Test utilisateurs
Tuesday, September 20, 2011
15. Livrables
Test / Analyse
★ Environement de test
★ Test utilisateurs
★ Modifications design (ux et v)
★ Déploiement
★ Modifications et tests
★ Mise en ligne
Tuesday, September 20, 2011
21. UX
[User Experience Design]
Aspect du design qui répond à comment l’utilisateur va
utiliser, apprendre, et pecevoir un produit.
Ce domaine a les rascines dans l’ergonomie et l’aspect
humain (human factor). L’objectif principal est de créer
des systèmes entre l’homme et la machine de façon à
créer une expérience intuitive et productive pour les
deux. Ce domaine emprunte les lois et principes du
Human Centered Design.
Tuesday, September 20, 2011
22. UX Design
Le design UX est un champ du design d'expérience. Il
concerne la création des modèles architecturaux et
interactifs qui affectent l'expérience-utilisateur dans un
appareil ou un système.
Étant donné son caractère subjectif, l'expérience-utilisateur ne peut être designée.
On doit plutôt designer en fonction de l'expérience-utilisateur, en essayant d'activer
certains types d'expérience. La portée de cette pratique couvre « tous les aspects
de l'interaction des utilisateurs avec le produit, incluant la façon dont il sera perçu,
maîtrisé et utilisé. »
Tuesday, September 20, 2011
23. Ergonomie
On nomme ergonomie « l'étude scientifique de la relation
entre l'homme et ses moyens, méthodes et milieux de
travail » et l'application de ses connaissances à la
conception de systèmes « qui puissent être utilisés avec le
maximum de confort, de sécurité et d'efficacité par le plus
grand nombre. »
Tuesday, September 20, 2011
25. Gabarits
Le modèle (ou gabarit) permet de construire les pages
d'un site web selon une trame (un squelette) de page
identique constituée d'éléments modifiables
Tuesday, September 20, 2011
26. Patterns
Les patrons sont des solutions aux problèmes
communs.
Tuesday, September 20, 2011
27. Patterns
Chaque patron a 4 composantes:
1. un titre
2. un problème
3. un contexte
4. une solution
Tuesday, September 20, 2011
28. Les patterns
peuvent être
combinés
ensemble
Tuesday, September 20, 2011
31. WYSIWYG
Problème:
“Je veux pouvoir écrire du texte et ajouter
des images, mais je ne sais pas écrire du
HTML pour le faire.”
Tuesday, September 20, 2011
32. WYSIWYG
What You See Is What You Get
Tuesday, September 20, 2011
33. WYSIWYG
Solutions apportées:
• Donner à l’utilisateur une idée du
résultat final de son intéraction
• Facilite l’édition du contenu en ligne ainsi
que sa manipulation
Tuesday, September 20, 2011
34. Dessinez-moi un
Password Strength
Meter
Tuesday, September 20, 2011
35. Password
Strength Meter
Problème:
“Je veux pouvoir indiquer à mon utilisateur
que son mot de passe est safe.”
Tuesday, September 20, 2011
36. Password
Strength Meter
Tuesday, September 20, 2011
37. Password
Strength Meter
Solutions apportées:
• Indique clairement à l’utilisateur si le mot
de passe est assez sécuritaire
• Informe et sécurise l’utilisateur
Tuesday, September 20, 2011
42. Caroussel
Solutions apportées:
• Permet d’économiser l’espace sur une
page et d’offrir une série de contenu
navigable
• Facilite la promotion de contenu qui
autrement n’aurait pas été visible à
l’utilisateur
Tuesday, September 20, 2011
44. Fil d’ariane a.k.a Breadcrumb
Problème:
“Je veux savoir où je suis dans ce site.”
Tuesday, September 20, 2011
45. Fil d’ariane a.k.a Breadcrumb
Tuesday, September 20, 2011
46. Fil d’ariane a.k.a Breadcrumb
Solutions apportées:
• Permet à l’utilisateur de retrouver son
chemin
• Si l’utilisateur arrive sur la page par une
recherche, il peut naviguer vers des
sections principales
Tuesday, September 20, 2011
48. Accordéon
Problème:
“Je veux pouvoir survoler l’information
principale d’abord.”
Attention!
Personne ne s’exprime comme ça!!!
Tuesday, September 20, 2011
51. Accordéon
Solutions apportées:
• Permet la navigation rapide et
thématique
• Permet d’afficher des options de
navigation tout en ayant une interface
épurée
Tuesday, September 20, 2011
63. Arbo. Web
site
:
Accueil Recherche
Groupe
d’informa7on
A Groupe
d’informa7on
B Groupe
d’informa7on
C Groupe
d’informa7on
D
Sec7on
B1 Sec7on
C1
Thèmes
communs
Sous-‐groupe
A1 Sous-‐groupe
A2 Sous-‐groupe
D1 Sous-‐groupe
D2
Thèmes
1
Sec7on
B2 Sec7on
C2
Thèmes
2
Sec7on
A2 Sec7on
D1
Thèmes
3
Sec7on
C3
Sec7on
D1’
Thèmes
4
Forum
de
Communauté UGC
conversa7on
Tuesday, September 20, 2011
64. Navigation principale
L’objectif de cet exercice :
★ Organiser le contenu principal
★ S’addresser au 80% des utilisateurs
★ Avoir un objectif principale
Web
site
:
Accueil Recherche
Groupe
d’informa7on
A Groupe
d’informa7on
B Groupe
d’informa7on
C Groupe
d’informa7on
D
Tuesday, September 20, 2011
66. Navigation secondaire
L’objectif de cet exercice :
★ Trouver
l’informa7on
clé
à
travers
tout
le
site
★ Contenir
des
sec7ons
cachées
(les
meLre
de
l’avant)
★ Créer
des
liens
vers
les
sites
partenaires
(ou
des
sites
externes)
Tuesday, September 20, 2011
68. Audit de contenu
L’objectif de cet exercice :
★ Connaître le contenu
★ Créer des liens entre différentes sections
★ Comprendre la dynamique du site
★ Comprendre comment ce site ce construit
★ Regroupement des grands contenus
★ “Card sorting”
Tuesday, September 20, 2011
69. Audit de contenu
★ Arborescence principale : Accueil, Société,
musique, ...
★ Arborescence secondaire correspondant
★ Détail du contenu (type, mise à jour)
★ Détail des éléments répétitifs ou
confondants
Tuesday, September 20, 2011
71. Tri de carte
L’objectif de cet exercice :
★ Regrouper le contenu sous de grande
catégorie
★ Permettre de classer les éléments de
navigation
★ Créer ou découvrir de nouvelles catégorie
lors de la réorganisation de l’arborescence
d’un site
Tuesday, September 20, 2011
72. Tri de carte
Deux méthodes possibles:
★ Première: Inviter un groupe à classer par
catégorie non définit les différentes parties
de contenu d’un site
★ Deuxième: Inviter un groupe à classer selon
des catégories définies les différentes
parties de contenu d’un site
http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide
Tuesday, September 20, 2011
74. Atelier
Design et organisation 1
http://www.maisoncorbeil.com
Faire un audit de contenu détaillé
Préparer les éléments pour un tri de carte en groupe la
semaine prochaine
Tuesday, September 20, 2011