5 raisons de créer un guide de style au lieu des traditionnelles maquettes graphiques La création d'un guide de style Web est une approche émergente qui pourrait permettre de maximiser le temps des ergonomes et des designers graphiques Web. Par conséquent, cette approche a le potentiel d'améliorer la qualité des réalisations et de réduire leur coût. Qu'est-ce qu'un guide de style Web? Un guide de style est un document qui montre tous les éléments d'interface composant un site ou une application Web. Un guide de style Web devrait informer sur : Partant des besoins du site déterminés par l'ergonome, un tel guide de style devient la référence pour construire toutes les pages du site. Le passage du flambeau entre l'ergonomie et le design graphique L'approche courante Traditionnellement, l'ergonome web produit des maquettes en fil de fer (wireframes) qui sont ensuite réinterprétées par un designer graphique Web. Je ne pense pas que cette approche soit une bonne utilisation du talent des designers, car il s'agit d'un surplus de travail qui n'a pas nécessairement raison d'être. 1.
Recette de test utilisateur, Partie 1 Introduction Cet article propose une recette de test utilisateur. On peut parler de recette parce que mettre en place un test nécessite de passer par plusieurs étapes. Chacune de ces étapes exige des ingrédients spécifiques. Il est important de savoir où se procurer ces ingrédients et comment les mêler. Comme pour les recettes de cuisine, la dextérité vient avec l'expérience. Comprendre l'importance des tests utilisateurs n'implique pas de pouvoir les conduire. La façon de conduire un test utilisateur dépend en grande partie du budget accordé à l'ergonomie dans le projet. » Pré-requis Notre présentation part du principe que l'on a pris connaissance de l'interface et identifié les objectifs du projet. Le choix de la méthode du test suppose que le projet soit d'ampleur suffisante pour l'avoir fait précéder d'autres analyses (consultation libre des utilisateurs, tri de cartes, analyse des tâches, analyses concurrentielles, inspection experte d'une interface existante…). 1. 2. 3. 4. 5.
An activity based Workflow Engine for PHP By Tony Marston 16th September 2004Amended 1st May 2010 As of 10th April 2006 the software discussed in this article can be downloaded from www.radicore.org IntroductionWorkflow modelling with Petri Nets - Objects within a Petri Net - Triggers within a Petri Net - Routing within a Petri Net - Splitting and Joining within a Petri NetA sample Workflow processDatabase Design - Workflow E-R Diagram - WORKFLOW table - PLACE table - TRANSITION table - ARC table - CASE table - TOKEN table - WORKITEM tableMaintenance Screens - Processes - Places - Transitions - Arcs - Cases - Tokens - WorkitemsThe Workflow Engine - Creating a new workflow Case - Updating an existing workflow Case - Result of Creating a TokenConclusionFrequently Asked Questions (FAQ)Amendment History Introduction A computer application contains a number of different 'tasks', 'transactions', 'programs' or 'modules', each of which performs a particular function. What is a 'workflow' system? There can be two basic types of workflow:
Styleguide — Paul Robert Lloyd This document is a guide to the mark-up styles used throughout the site. Parts of this markup guide are attributable to Dave Shea, and licensed under a Creative Commons License. Sections The main page header of this guide is an h1 element. Any header elements may include links, as depicted in the example. The secondary header above is an h2 element, which may be used for any form of important page-level header. Third-Level Header The header above is an h3 element, which may be used for any form of page-level header which falls below the h2 header in a document hierarchy. Fourth-Level Header The header above is an h4 element, which may be used for any form of page-level header which falls below the h3 header in a document hierarchy. Fifth-Level Header The header above is an h5 element, which may be used for any form of page-level header which falls below the h4 header in a document hierarchy. Sixth-Level Header Grouping content Paragraphs All paragraphs are wrapped in p tags. Horizontal rule ! Bob’s
Style Guide Introduction As the Buffer team grows, it will become increasingly important to maintain a consistent style and visual language across all areas of the product. To do this, we have built the following style guide to document reusable components for faster product development. This style guide is based largely on the principles of atomic design. The key idea of this methodology is that small, independent - atomic - parts, can be combined into larger molecular structures. Molecular structures can be combined into larger organisms, which can then serve as the foundation for templates and full pages. Grid At the moment we only utilize the grid system on static (non-app) pages. Each grid row must contain parts that add up to one whole. Nested Grids Grids can be nested, too! Full-Width Grids You can add a full-width class modifier to a <section class="grid"> in order to escape any containers and margins. This is an example of a full-width grid (note: turn off the sidebar): Colors Typography Buttons
Les critères ergonomiques de Bastien & Scapin, Partie 2 Introduction Notre premier article sur les critères ergonomiques évoquait les notions de guidage de l'utilisateur et de charge de travail. Nous continuons dans cette seconde partie la description des critères proposés par Bastien et Scapin. 1. 1.1. Lorsqu'un utilisateur est amené à interagir avec un système informatique, il s'attend implicitement à ce que le système lui obéisse. Puisque dans la plupart des interfaces informatiques, l'utilisateur doit avoir le dessus sur le système, il faut que toute action du système corresponde à une demande explicite de l'utilisateur. Concernant les applications automatisées (par exemple la mise à jour d'un anti-virus), elles sont en général automatisées car l'utilisateur l'a demandé à un moment ou à un autre. Note. 1.2. Dans le même ordre d'idées, l'utilisateur doit être persuadé qu'il a le contrôle sur le système. 2. Le critère d'adaptabilité comprend deux sous-critères : flexibilité et prise en compte de l'expérience utilisateur. 2.1. 2.2. 3. 3.1. 4.
Ergonomie web et logiciel, architecture de l'information, utilisabilité sites Internet – Ergolab Essential JavaScript Design Patterns For Beginners Design patterns are reusable solutions to commonly occurring problems in software design. They are both exciting and a fascinating topic to explore in any programming language. One reason for this is that they help us build upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we're attempting to solve. Design patterns also provide us a common vocabulary to describe solutions. This can be significantly simpler than describing syntax and semantics when we're attempting to convey a way of structuring a solution in code form to others. In this book we will explore applying both classical and modern design patterns to the JavaScript programming language. Target Audience This book is targeted at professional developers wishing to improve their knowledge of design patterns and how they can be applied to the JavaScript programming language. Acknowledgments Credits Reading We already use patterns everyday
Front-end Style Guides We all know that feeling: some time after we launch a site, new designers and developers come in and make adjustments. They add styles that don’t fit with the content, use typefaces that make us cringe, or chuck in bloated code. But if we didn’t leave behind any documentation, we can’t really blame them for messing up our hard work. To counter this problem, graphic designers are often commissioned to produce style guides as part of a rebranding project. Design guidelines Some design guidelines focus on visual branding and identity. Some guidelines go further, encompassing a whole experience, from the visual branding to the messaging, and the icon sets used. The BBC’s Global Experience Language. Design guidelines may be brief and loose to promote creativity, like Mozilla’s “brand toolkit”, or be precise and run to many pages to encourage greater conformity, such as Apple’s “Human Interface Guidelines”. Code standards documents We can make a similar argument for code. Paul Lloyd’s style guide