How to make your development process user centred

• Bas Wallet

Room: 31/3-004 - IT Amphitheatre I’ve been designing and managing the development processes of websites and applications for companies since the 90s. In those years I’ve seen a lot of projects fail. The biggest issue: development teams prefer to spend the majority of their time in their cave behind their screens and clients stay in their ivory tower. This means that software is developed based on assumptions and personal taste. I’ve been to way to many meetings where arguments were leverages with ‘I don’t like this’ or ‘I think the user doesn’t want this’. During this presentation I will show the steps that should be taken to avoid all these issues and make a product that does bring the business objectives and the user’s desires together and is optimised for the real end user thus creates a usable product.

Indico front-end: From spaghetti to lasagna

• Alejandro Avilés (CERN)

Room: 31/3-004 - IT Amphitheatre We will present how we transitioned from legacy spaghetti UI code to a more coherent, easier to understand and maintain ecosystem of front-end technologies and facilities with a strong emphasis in reusable components. In particular, we will share with you: 1) how we use Sass to maintain our home-baked CSS, 2) how we survive in 2017 without front-end Javascript frameworks, and 3) how we use template macros and WTForms for generating consistent HTML transparently.

The messed up story of U and my X

• Ilias Trichopoulos (CERN)

Room: 31/3-004 - IT Amphitheatre User experience (UX) is hard. Hard to comprehend, implement and plan efficiently but very easy to underestimate or worse, ignore. The talk will focus mainly on the importance of the user-centered interface development and the logic behind it. We will discuss the reasons why UX is not a simple concept for developers but also ways to accomplish a pleasant user experience with no nitty-gritty details about the implementation. We will also look into some common mistakes and things to remember before implementing a new app or feature or refactoring existing ones. Lastly, I will talk about my experience in developing web applications targeted to CERN users and the lessons I acquired regarding the design of user interfaces in the last 4 years.

Building progressive web application in Angular 2 and Zurb Foundation 6

• Michal Piotr Rafalski (Ministere des affaires etrangeres et europeennes (FR))

Room: 31/3-004 - IT Amphitheatre I am responsible for design and development new progressive web application for CERN's Access Distribution and Management System (ADAMS) in BE-ICS-AC. The application is to be used both by the access control professionals and by end users. It also must work regardless of the browser used, fit any form factor (like desktop, mobile, tablet), be accessible on low quality networks and make the users feel that they are using an application and not a website. I would like to present to audience: - what are progressive web applications - what is Angular 2 framework and why it is better than AngularJS - why we could build components and how to do it - how to use TypeScript, webpack, gulp - how to build modern responsive website in Zurb Foundation 6 - using Angular 2 and Ionic 2 for building a hybrid mobile application I can also prepare workshops how to create basic application in Angular 2 and Zurb Foundation 6 in 1h.

Next generation Zero-Code control system UI

• Valter Jose Correia Costa (Ministere des affaires etrangeres et europeennes (FR))

Room: 31/3-004 - IT Amphitheatre Developing ergonomic user interfaces for control systems is challenging, especially during machine upgrade and commissioning where several small changes may suddenly be required. Zero-code systems, such as *Inspector*, provide agile features for creating and maintaining control system interfaces. More so, these next generation Zero-code systems bring simplicity and uniformity and brake the boundaries between Users and Developers. In this talk we present *Inspector*, a CERN made Zero-code application development system, and we introduce the major differences and advantages of using Zero-code control systems to develop operational UI.

Maintainable CSS with visual regression testing and functional CSS

• Sebastian Witowski (CERN)

Room: 31/3-004 - IT Amphitheatre Maintaining CSS is hard. Once your CSS files grows big, they become full of duplicated rules and unused code. What can we do to solve this problem? In this talk I will describe two concepts that can help us writing maintainable CSS: * Visual regression tests that can help us refactor our CSS with confidence * Functional CSS - a different way of writing CSS that can help us produce more maintainable code in the long term

Usability testing for dummies

• Stella Christodoulaki (CERN)

Room: 31/3-004 - IT Amphitheatre Usability testing seems complicated and time-consuming. Is it though? In fact, it is the best way to understand how real users experience your product. In this interactive session, we will do a live usability test and you will get advice on how to conduct your own usability tests.

Bringing realtime media capabilities to your interface with WebRTC

• Francisco Valentin Vinagrero (CERN)

Room: 31/3-004 - IT Amphitheatre WebRTC provides a simple API for web browsers and mobile application to enable Real-Time Communications (RTC) in your application. In this talk we explore the technology roadmap, an overview of the main API functions and the elements needed to establish a peer-to-peer communication between two clients.

Life after the MVC

• Harris Tzovanakis (National Technical Univ. of Athens (GR))

Room: 31/3-004 - IT Amphitheatre Write scalable, predictable and easy-to-debug web applications with Redux.

LANDB Portal redesign process (old network.cern.ch)

• Danai Andriopoulou (CERN)

Room: 31/3-004 - IT Amphitheatre An in-depth presentation of all the steps that were followed for the redesign of our current [network.cern.ch][1] website application to the forthcoming LANDB Portal. [1]: http://network.cern.ch

How we are building a complex Angular 2 application at Inspire

• Javier Martin Montull (CERN)

Room: 31/3-004 - IT Amphitheatre In this talk, at first we will talk about some basic and advanced Angular 2 concepts, then we will share our experiences with Angular 2 that we had so far while building a complex library and web applications at Inspire.

UX concepts, how they affected our development flow.

• Matteo Mara (CERN)

Room: 31/3-004 - IT Amphitheatre The Locations application has been the first in our Section (FAP-AIS-GI) in which some proper UI/UX concepts have been taken in account during the early phases of the development. This led to a change of the development flow by adding the UX designer to the core of the development phase. The talk aims at showing the development of Locations before and after this moment, and how the way of thinking at the application changed for taking in account the improvements in the user experience of the application.

Most common usability mistakes coders make

• Bas Wallet

Room: 31/3-004 - IT Amphitheatre This presentation contains an overview of bad practises in interface design. Though real-life screenshots elements like ‘setting up your page’, ‘forms’, ‘navigation and interactions’ and ‘colours’ will be covered. It’s easy to point out the negative aspects so a solution on how to make the examples will be given in addition.

Kickstarting your web-app with a tasty recipe

• Nikolaos Papapetrou (National and Kapodistrian University of Athens (GR))

Room: 31/3-004 - IT Amphitheatre In this talk, I'd like to give some insights on my journey to create this application, some comments on my experiences/experimentation with angular 2 and also introduce this very handy, tailor-made for use in CERN, project to the world.

Building an app with Angular 2 and Typescript

• Zacharias Zacharodimos (National Technical Univ. of Athens (GR))
• Harun Urhan (CERN)

Room: 31/3-004 - IT Amphitheatre In this workshop we will do a brief introduction to Angular2 and build an example application that will show case many of Angular 2 features.

Progressive Web applications

• Wojciech Kulma (University of Vienna (AT))

Room: 31/3-004 - IT Amphitheatre Progressive Web Applications are native-like applications running inside of a browser context. In my presentation I would like describe their characteristics, benchmarks and building process using a quick and simple case study example with focus on Service Workers api.

FESA Graph Editor

• Athanasios Topaloudis (CERN)

Room: 31/3-004 - IT Amphitheatre The Front-End Software Architecture (FESA) framework, is a comprehensive environment developed at CERN, for equipment-specialists to design, develop, test and deploy real-time control software for front-end computers. Based on an XML-design-document that is being validated against a FESA XML-schema to enforce all FESA-design-constraints, the framework can automatically generate C++ source code of which the developer only needs to implement some well-defined methods. Depending on the equipment and measuring system, an XML-design-document can grow in complexity making the overview of the SW from difficult to impossible. In addition, editing the XML document directly or by using the FESA’s design tool (eclipse’s plugin), can become cumbersome due to the intricacy of the framework. It is therefore essential to provide an interactive Graphical User Interface (GUI) where the FESA-design is represented graphically with blocks grouping the XML tags; and arrows depicting the logical linkage among them. This talk describes this GUI (FESA Graph Editor) and how it adds in the design and documentation process of a FESA-design-document.

Flexbox: The yoga of CSS

• Ilias Trichopoulos (CERN)

Room: 31/3-004 - IT Amphitheatre We will introduce flexbox, the single most valuable feature in CSS3 for elegantly solving page layout, vertical alignment, and many other typical nuances in web design. Now that flexbox is fully supported by all* browsers we at Indico are embracing its wonders to make our lives simpler and our CSS more predictable. We will share with you our findings, use cases, and examples, and, if you are down for some yoga, in the hands-on workshop you will learn how to use flexbox as we explore its different options.