1. EOS WEBPAGE Collaborative work with: Ewa Lopienska (logo),
Aurora Miguel de Couto (web)
& IT-ST (feedback)

2. Index Motivation New EOS Webpage More feedback Feedback retrieved
Extra Improvements
Structure & Demo
More feedback

3. Motivation
EOS workshops are emerging and this is the current webpage presented.
No visualization in all browsers, mobiles, tablets, etc…

4. Feedback retrieved “… I do not have access to the code…”
“… we do not have drupal expertise …”
“… there is not documentation …”
“… we would like something with more taste ..”
“… why a long video in the front-page? ...”
“… we would like something modern, like companies …”

5. Feedback retrieved Code Access: No Drupal expertise necessary:
No Drupal expertise necessary:
Drupal is only used as storage, everything can be changed from the code (a bit of php/html – very simple)
All is documented in the same place
Compatibility with mobile devices & tablets
A visual template is created with flexible and clear structure.
Aurora will explain more about it
----- Meeting Notes (15/09/17 14:47) -----

6. Extra improvements New official logo
Collaboration with Ewa Lopienska (CERN Communication Group)
Democratic selection by eos-adminshttp://doodle.com/poll/skmbkdfnqv85bmdy
All image formats for web and printing + icon format are provided

7. Extra improvements New location for centralized and official web data
Publications
Presentations & Logos

8. Extra Improvements Proposal: Gitbook for documentation
Previous one too old design:

9. Extra Improvements Proposal: Gitbook for documentation
Same as rest of CERN services (puppet, openstack, FTS, etc..)

10. Extra Improvements Proposal: What EOS means?
Got some feedback and let’s say
“EOS Open Storage”
Stickers will be printed on time with hexagonal format 
Collaboration with Ewa Lopienska, Tomas Oulevey and Melissa Gallard.

11. Structure and Demo CSS JS PHP fonts img video Doc Web Hosting
To store any content accessible via the web
Content Management System
Open source content-management framework
Content Management System
Open source content-management framework
Easy understanding
Custom website
Easy to update/add
Have full control
Create a easy website
Do not need HTML knowledge
Easy to maintain
Written in PHP
Create a easy website
Do not need HTML knowledge
Easy to maintain
Written in PHP
page.tpl.php
eoswebpage.info
CSS JS
PHP
fonts
img
video
Doc
yumPage.html
newBlog.html
newNews.html

12. Structure and Demo What have we used?
Drupal hosting
HTML5, CSS3, JS, PHP
Bootstrap
Open source toolkit for developing with HTML, CSS and JS.
Popular font-end component library
Responsive grid system (PCs, Mobiles, Tablets ..)
Extensive prebuild components (Navbar, Carousel, Forms, List group, …)
Easy to use and a lot of documentation

13. Structure and Demo Quick start: How to access Drupal files?
Via WebDAV – Connect to Server
For EOS test:
Navigate files > themes > eos-webpage

14. Structure and Demo Website: https://test-eos.web.cern.ch
Now we are going to see each section and starting from the very top, the first thing that we have it is the favicon
As you can see here and later in the real demo, the favicon is able for all browsers and mobiles and tablets

15. Structure and Demo Website as favorite [favicon]:

16. Structure and Demo Website as favorite [favicon]:
Add to home screen
direct access

17. Header section
page.tpl.php

18. About Us section https://getbootstrap.com/docs/3.3/examples/grid/
page.tpl.php
Bootstrap grid
Bootstrap grid
Bootstrap grid

19. Our Services section Bootstrap grid Bootstrap grid image Icon
page.tpl.php
Bootstrap grid
Bootstrap grid
image
Icon
Font awesome Icons

20. Resources / Doc / News
links
Tittle
Img
Bootstrap grid
Icons

21. Contact Us section Bootstrap grid Bootstrap grid Bootstrap grid
page.tpl.php
Bootstrap grid
Bootstrap grid
Bootstrap grid

22. Footer section
Bootstrap grid
page.tpl.php

23. EOS WEBPAGE DEMO

24. Feedback