 Xa xa, nós o chámos. Cámo senooo, ouro, ok, xa de todos os entarritos para a session digital de Xochona digital. Meu nome é Montaña Franco, é raise de oado dos anos que eu juro. Xochona video lá xa por 7 anos e xochona xa para o manejo de xochona digital. Hello, I am Diego and I have been working on Drupal for four years in Neveris and I work as a Drupal architect. So you are here to hear about how we approach the CERN website and this is what we are going to explain. So we are willing to follow these steps starting with the context of the project. The digital portfolio was a distribution made on Drupal 7, it's multi-site based and the CERN has around 800 websites developed on Drupal 7 and in that sense the scope of the Neveris project was to help them to migrate the Drupal 7 distribution to Drupal 8.1 and also includes different applications on that distribution. This project was performed by different teams so we worked together with the CERN teams based on Geneva and the Neveris team based in Spain and also in Belgium. We were distributed in three, four different cities depending on the time of the project and now we are going to review the understanding phase. Ok, in order to understand the project we have two key points. The first one was to define a vision of the platform that responds with the needs and the wants of the different users that in that case was business, CERN and education community, general public, different authorities in order to develop in that sense a distribution that meets with the objective of all the stakeholders. So the result of this study was a four exercise that guides four different questions. While we are designing something new, this question produced the vision of the project. What will be designed? This question covered the base thoughts of the audience. How will the look and feel be created? In this case with this question we wanted to gather or understand the user experience and the look and feel that the different stakeholders expected. And who will this design for in order to attract all the users to the new digital portfolio. So we perform different exercise as user experience studies, plan it in Geneva at CERN premises and plan it also in Barcelona at every premises. As you can see this is the result of the new visual identity of the CERN digital portfolio. It's quite cool. I recommend you to go through the website and play a little bit. We have plenty of interactions for the users that are really cool. And I will give the floor to Diego to explain the common phases of the project. Ok, so after finishing the U.S. phase the development team started to define the design system useful for all Drupal H sites. Ok, so we started with a Drupal H site called Web Experience Library that introduces final user to Drupal to component to things and other topics. At that moment the design system was based in three main elements of the tool. A system based on components built in Drupal H, a thin hierarchy with color scheme and integration with the third system. Regarding components there were three main needs. One solution system built in Drupal H that were resolved using pattern definition based on the UI pattern control model. Also we needed a way to create, reorder and edit component. So we applied each pattern with display switch inside a paragraph for each component. And the last one was a multiple approach solution and a first way to start using components. Ok, so the solution in this case was create a custom model called third landing page that install all components as dependency. Although each component can be used individually. Regarding themes the solution was a hierarchy of themes with the booster theme as a base theme. Then we have in the next level we have the third base theme with common element and definition for all sites. Finally we have the themes used on Shailate for example the third home. And at the same level we have the third override. The third override is a theme used by final user to add custom definitions. In parallel with the themes we had the color scheme. This feature allows final users in this case for example editors change color without creating code. And we are going to see an example. This is the home page, the third home page. And you can see that right now the header isn't red and the footer is in blue. So inside the theme we define a lot of options to be configurable. In this case we are going to change the color for the header in this case and the footer too. This is the preview and if you go to the site the colors are being updated. The header, the screen and the footer. Ok, the last element or feature is the integrations. We have four integrations. Integrations with Indico and WebCAD that are system 2 managed events. Integrations with the single sign on and the integration with the CDS. We are going to talk about the integration with the CDS. The CDS is a service where third has images, videos, galleries, PDFs. In summary, different files, resources. This is integration, voice saving, storing files, resources in true path. So the solution is very light because at the end you don't have files in true path. So in this case the approach was created custom development based on Drupal files and JavaScript. And we integrated with the CDID torture and we are going to see an example. This is the CDS where they have in this case images with an ID. We copy the ID. We are using the ID for integrating in Drupal. So in the backend we can get the result. So we can change the size of the image. And we have other information from the CDS. In this case we are going to create a new node. The node that has been created. And if we print the information and if we inspect we can see that at the end the information came from the CDS. Ok, we are not storing information, files in Drupal. After finishing the development of this feature we applied them in the home site of there. Apart from the task life, create content types, views and migrate content. So now we are going to see a real example of how the editorial team manage components. This is in this case a page, who we are page. Where they have different components. In this case we have in the backend we have a section for components where they can edit. We are going to reorder components. Everything is based in paragraph and fields with patterns. So now we have reordered the components. Now we are going to edit in this case the title of that component. That component is inside the section components. It is the first one. And we integrated the components with the CDS too. And in this case we are going to change the title. So this is the change. And now we are going to see a functionality of components. You can see that here we have a component and if we change the theme in the site. We can see that the look and feel is the same. Because each component has the look and feel JavaScript and resources inside the definition. So the look and feel for the components is always the same. Although you use different themes. Ok, so you have reviewed what was the result of the project. And now I will give you some figures. The CERN digital portfolio was launched last year, 5th of November. And since then from around 800 websites that they have migrated. They have developed on Drupal 7. They have migrated more than 600. I mean that is a powerful tool and they are using it quite well. We put here some examples for you to review some of these 600 websites. With a showcase URL in case you are curious and you want to play a little bit with the digital portfolio. We would like to thank you all of you for attending to this session. And also to Drupalcom for allowing us to speak and to share with you this project. And now is the moment of questions if you have.