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

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

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

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 …”

Feedback retrieved Code Access: No Drupal expertise necessary: https://gitlab.cern.ch/eos/eos-webpage 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) -----

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

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

Extra Improvements Proposal: Gitbook for documentation Previous one too old design: https://eos.readthedocs.io/en/latest/

Extra Improvements Proposal: Gitbook for documentation Same as rest of CERN services (puppet, openstack, FTS, etc..) http://eos-docs.web.cern.ch/eos-docs/ https://gitlab.cern.ch/eos/documentation

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.

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

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 https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/getting-started/introduction/

Structure and Demo Quick start: How to access Drupal files? Via WebDAV – Connect to Server For EOS test: https://test-eos.web.cern.ch/_site/files http://information-technology.web.cern.ch/book/drupal-infrastructure-services/site-management/file-access Navigate files > themes > eos-webpage

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

Structure and Demo Website as favorite [favicon]: https://test-eos.web.cern.ch

Structure and Demo Website as favorite [favicon]: https://test-eos.web.cern.ch Add to home screen direct access

Header section page.tpl.php

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

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

Resources / Doc / News links Tittle Img Bootstrap grid Icons

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

Footer section Bootstrap grid page.tpl.php

EOS WEBPAGE DEMO

Feedback