Lors de la conception et la manipulation de logiciel par modélisation, il est avantageux de bénéficier d’un grand degré de liberté au niveau de la présentation afin de comprendre l’information et prendre une action en exerçant peu d’effort cognitif et physique. Cette caractéristique doit aussi s’étendre aux outils que nous employons afin que ceux-ci augmentent nos capacités, plutôt que les restreindre. En génie logiciel, nous travaillons présentement à rehausser encore le niveau d’abstraction afin de réduire le rôle central du code décrit avec un langage de programmation à usage général. Ceci permettrait d’inclure les experts non techniques dans les activités de développement de logiciel. Cette approche, centralisée sur le domaine et l’expert, s’inscrit dans l’ingénierie dirigée par les modèles (IDM), où un modèle est produit et manipulé par divers experts et utilisateurs. Le modèle est alors décrit avec un langage créé spécifiquement pour un domaine d’application ou une tache, appelé langage dédié (DSL). Une technique utilisée pour créer ces modèles et leurs DSL est le projectional editing, qui permet d’utiliser des notations diverses interchangeables et d’étendre et composer facilement un langage. Toutefois, les solutions actuelles sont lourdes, spécifiques à une plateforme, et manquent considérablement d’utilisabilité, limitant ainsi l’usage et l’exploitation de cette approche. Pour mieux refléter les avantages du paradigme IDM avec le style projectionnel, nous introduisons dans cette thèse Gentleman, un éditeur projectionnel léger sur le web. Avec Gentleman, le développeur crée un modèle en combinant des concepts utilisés pour définir la structure du modèle et des projections pour les manipuler dans l’éditeur. Nous avons évalué Gentleman à travers une étude basée sur un groupe d’utilisateur. L’étude a confirmé sa capacité à créer et manipuler des modèles efficacement. Les participants ont noté qu’il est facile de prendre en main Gentleman et que l’interface est très intuitive comparativement aux éditeurs existants. Nous avons aussi intégré Gentleman avec succès à une plateforme web, démontrant ainsi ses capacités d’interopérabilité et l’avantage d’une solution web. / In software activities and, more specifically, when modeling, the modeler should benefit from as much freedom as possible to understand the presented information and take action with minimal cognitive and mechanical effort. This characteristic should also apply to the tools used in the process so that they extend our capabilities rather than limit them. In the field of software engineering, current work aims to push the level of abstraction past general-purpose programming language into domain-specific modeling. This enables domain experts with various backgrounds to participate in software development activities. This vision is central to model-driven engineering (MDE) where, instead of code, various experts and users produce and manipulate domain-specific language (DSL). In recent years, projectional editing has proven to be a valid approach to creating and manipulating DSLs, as it supports various easily interchangeable notations and enables language extension and composition. However, current solutions are heavyweight, platform-specific, and suffer from poor usability. To better support this paradigm and minimize the risk of accidental complexity in terms of expressiveness, in this thesis, we introduce Gentleman, a lightweight web-based projectional editor. With Gentleman, a developer creates a model by combining concepts used to define its structure and projections to interact and manipulate them in the editor. We have evaluated Gentleman through a user study. The evaluation confirmed its capacity to create and manipulate models effectively. Most participants noted that the editor is very user-friendly and intuitive compared to existing editors. We have also successfully integrated Gentleman into a web application, demonstrating its interoperability and the benefit of a web solution.

En ingénierie dirigée par les modèles, les langages spécifiques au domaine (DSL) offrent des notations adaptées à un domaine précis pour représenter ses différents concepts. De nombreux outils permettent la définition de DSLs en explicitant les relations entre un concept et ses représentations. En fonction de la sémantique du domaine, l’ingénieur du langage peut choisir entre des notations textuelles ou graphiques. Les langages de modélisation graphique nécessitent une gestion de la position, la taille et la disposition des éléments visuels afin de maximiser leur expressivité visuelle. La plupart des éditeurs de modélisation manquent de support automatique pour gérer ces propriétés de la syntaxe concrète. Les éditeurs projectionnels permettent aux utilisateurs de se concentrer sur la conception de leur modèle en limitant les modifications de la syntaxe concrète. Cependant, bien qu’ils offrent de multiples notations, ces éditeurs ne permettent pas la création de langage graphique. Dans ce mémoire, nous proposons une nouvelle approche pour concevoir des éditeurs graphiques et projectionnels. Nous avons créé une extension d’un éditeur projectionnel orienté vers le web, Gentleman, qui nous a permis d’extraire différentes exigences. Au cours du mémoire, nous décrivons leurs impacts sur les projections et proposons des lignes directrices ainsi que des exemples d’implémentation. Comme l’édition projectionnelle demande une gestion spécifique de l’interaction, nous présentons différentes approches pour interagir avec les représentations graphiques utilisant les nouvelles informations disponibles dans les projections. Étant donné que la plupart des exigences se concentrent sur la disposition des projections, nous avons défini plusieurs algorithmes simples de disposition qui couvrent une large gamme de structures pouvant être retrouvées dans un éditeur graphique. Enfin, afin d’évaluer cette approche, nous avons exploré la génération de trois éditeurs graphiques et projectionnels pour différents domaines: les machines d’états, les diagrammes de séquences et les partitions de musique. / In model-driven engineering, domain specific-languages (DSL) provide tailored notations towards a specific problem domain to represent its different concepts. Multiple tools allow the definition of DSL by specifying the relations between a concept and its representations. Depending on the semantics of the domain, the language engineer can choose between textual or graphical notations. Graphical modeling languages require proper management of position, size, and layout to maximize their visual expressiveness. Most modeling editors lack automated support to manage these graphical concrete syntax properties. It is a time-consuming effort that affects the understandability of the model. Projectional editors prevent end-users from modifying the concrete syntax so they can focus on the modeling task. However, while they offer multiple notations, these editors lack support for graphical languages. During this thesis, we propose a new approach to design graphical and projectional editors. We created an extension of a web-oriented projectional editor, Gentleman, that allowed us to extract different requirements. During the thesis, we describe their impact on the projections and propose guidelines and examples of implementation. Because projectional editing requires specific management of the interaction, we present multiple approaches to interact with the graphical representations, using the new information available in the graphics. Since most of the requirements were focusing on the disposition of the projection, we define multiple simple layout algorithms that cover a large range of structures that can be found in a graphical editor. Finally, we explore the generation of three graphical and projectional editors for different domains: statecharts, sequence diagrams, and music sheet.