![Aknowledgmets
At EBI
• Brendan Vaughan, Peter Walter, Thomas Laurent, Jenny Cham, Francis Rowland, Liang Shen, Rodrigo Lopez (head
of Web Production team), the Webstyle Guidelines Committee members.
Sketchnotes by Francis Rowland
Slides of the content organization by Liang Shen
Images by
• Tkgd2007 (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via
Wikimedia Commons
• RRZEicons (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons
• Bobarino [CC-BY-SA-2.5 (http://creativecommons.org/licenses/by-sa/2.5)], via Wikimedia Commons
• By The people from the Tango! project (The Tango! Desktop Project) [Public domain or Public domain], via Wikimedia Commons
• http://saa.dyndns.org/stewart [GFDL (www.gnu.org/copyleft/fdl.html) or CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via
Wikimedia Commons
• By nattu [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons
• By Berdea (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons
• Dries Buytaert for the Drupal logo](https://image.slidesharecdn.com/drupal-at-embl-ebigmod-130415100307-phpapp01/85/Drupal-at-embl-ebi-gmod-43-320.jpg)
Drupal at-embl-ebi gmod
- 2. What is EMBL-EBI? • Part of the European Molecular Biology Laboratory • International, non-profit research institute • Europe’s hub for biological data services and research
- 3. EMBL-EBI’s mission • Provide freely available data and bioinformatics services • Perform research in bioinformatics • Provide advanced training • Help disseminate technologies to industry
- 4. Drupal
- 5. What is Drupal? • Content Management System • Free • Open source www.drupal.org
- 6. Why Drupal? www.economist.com www.whitehouse.gov www.greenpeace.org.uk/ • High performance • SEO friendly • Big community • Framework • User management • Presentation // Content
- 10. Drupal EBI websites in figures 28 Drupal 6 5 Drupal 7 _____________ 33 Drupal sites
- 11. What are we doing already with Drupal? EBI branded websites
- 12. What are we doing already with Drupal? EBI non branded websites
- 13. What does Drupal do for us? Data distribution • Datasets • Studies • Catalogues www.ebi.ac.uk/ega www.ebi.ac.uk/dgva European Genome-phenome archive Database of genomic variants archive
- 14. What does Drupal do for us? Data distribution • Datasets • Studies • Catalogues www.ebi.ac.uk/ega www.ebi.ac.uk/dgva
- 15. Data distribution • Search inventory engine • Query Bilder Interface • Return (cached) objects multi formats www.pombase.org What does Drupal do for us?
- 16. www.microme.eu www.1000genomes.org What does Drupal do for us? Display information • Publications • Announcements
- 17. What does Drupal do for us? Documentation • Alfresco DMS • Download area www.biomedbridges.eu www.ebi.ac.uk/Tools/docs www.ebi.ac.uk/training/online
- 18. What does Drupal do for us? Community portal • Membership • Training events • Blogs www.biotnet.org www.ebi.ac.uk/training www.biomedbridges.eu
- 19. What does Drupal do for us? Project management • Work packages • Deliverables • Partners www.biomedbridges.eu
- 20. What does Drupal do for us? Drupal as a Service
- 21. The new EBI website
- 22. What is the story?
- 23. Evolution
- 24. Transition from old site to Drupal
- 25. Transition from old site to Drupal • Make things look better • Help users find what they want • Enable discovery • Offer a consistent experience • Transition phase
- 26. Challenges • Assets • Content strategy • Development • Technology • Template • User management • UX design & testing • WYSIWYG
- 27. People UX designers Outreach Web team Web admins Developers Target users Content authors Team leaders
- 28. Guidance for Design Lot of meetings Collaboration Web guidelines Styleguide Web guidelines committee UX
- 29. The new EBI website in action
- 30. Changes • Static HTML • No users • Dreamweaver • Open roles • Web server • Scattered assets • Local/live deployment CMS Group-based CM WYSIWYG Editorial workflow LAMP + VM Repository Dev/stage/prod environments
- 31. Content & Content types
- 32. Content & Content types Create Group Create Group
- 33. Content & Content types Create Group Create Group More content types… More content types
- 34. Publications Biblio Module: • Import PubMed, Bibtex… • Tied up to people/groups. • Link to www.europepmc.org
- 35. Content feeds < > XML as Data vector
- 36. Content feeds Contrib: Views Xml BackendCustom: Staff Feeds Contrib: Views data export Drupal to Drupal Runtime Cron job http://www… /file/system/…
- 37. Content feeds XML External MySQL www.ebi.ac.uk/dgva www.ebi.ac.uk/ega Non Drupal to Drupal
- 38. Organize content and group workflow • Organic Group • Workflow, OG workflow • Revisioning, Rules
- 39. The Template • Grid based • HTML 5 • CSS 3 • Custom made Icon fonts
- 40. What’s next? • Improve the content authors’ experience • WYSIWYG • Testing Drupal 8 • Responsive theme • Respond to feedback
- 41. Questions?
- 42. Thank you Slides at https://dl.dropbox.com/u/2914319/Drupal-at-EMBL-EBI_GMOD.pptx https://dl.dropbox.com/u/2914319/Drupal-at-EMBL-EBI_GMOD.pdf Sketchnote at https://dl.dropbox.com/u/2914319/Drupal-at-EMBL-EBI-sketchnotes- JosephRossetto.pdf
- 43. Aknowledgmets At EBI • Brendan Vaughan, Peter Walter, Thomas Laurent, Jenny Cham, Francis Rowland, Liang Shen, Rodrigo Lopez (head of Web Production team), the Webstyle Guidelines Committee members. Sketchnotes by Francis Rowland Slides of the content organization by Liang Shen Images by • Tkgd2007 (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons • RRZEicons (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons • Bobarino [CC-BY-SA-2.5 (http://creativecommons.org/licenses/by-sa/2.5)], via Wikimedia Commons • By The people from the Tango! project (The Tango! Desktop Project) [Public domain or Public domain], via Wikimedia Commons • http://saa.dyndns.org/stewart [GFDL (www.gnu.org/copyleft/fdl.html) or CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons • By nattu [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons • By Berdea (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons • Dries Buytaert for the Drupal logo
- 44. Stay in touch!
Editor's Notes
- #2: Drupal @ EMBL-EBI
- #3: The EBI is based on the Wellcome Trust Genome Campus in Hinxton, which is near Cambridge in UK. The EBI is part of the European Molecular Biology Laboratory and as part of that, we’re a non-profit organisation.
- #4: EMBl-EBI’s mission is:to Provide freely available data and bioinformatics servicesContribute to the advancement of biology through researchProvide advanced bioinformatics trainingHelp disseminate cutting-edge technologies to industryCoordinate biological data provision throughout Europe
- #5: Drupal
- #6: Drupal is a Content Management System. It is free and open source. Drupal.org is the main site.
- #7: Why Drupal?Drupal is first choice when looking for a solution requiring as follows:High performance, Search Engine Optimization, a CMFramework, a user management system.Also, it has a wide community of developers updating, mantainig end extending the functionality of its core and contributed modules.
- #8: The Drupal layers build the architecture of the CMS. They are:Data layer, Modules layer, Blocks & Menus layer, the permissions and the template layers.
- #9: Drupal is written in PHP. Also, here is a list of requirements for Drupal to run: an OS, a web server,, and a DbMS.Additional and non mandatory technology can improve the quality of the Drupal experience, both on development and/or deployment.In our case we use Git as revision control and Memcached for enhancing the caching capabilities of Drupal.
- #10: EBI and Drupal
- #11: The EBI runs more than 30 Drupal installations, both on Drupal 6 and 7.
- #12: A list of EBI branded websites.
- #13: Another list of non-branded websites made in Drupal at the EBI.
- #14: Drupal helps data distribution by hooking it to external resources (Databases, data feeds)
- #15: By hooking Drupal to external data sources like the EGA or the DGVA repositories we can pull and display data like Datasets, Studies, Catalogues.
- #16: Like in the case of www.pombase.org we can build a custom search inventory engine or a Query builder interface to access data-sources like the Ensembl Genomes data set.
- #17: We can use Drupal to Display information through custom modules. In www.microme.eu we query the Citexplore literature search service by simply passing the publication ID (doi, Pmid, ISBN).
- #18: Drupal comes out-of-the-box with a set of features that enable document handling like in www.ebi.ac.uk/training/online. Also, Apart from having specific Drupal distributions addressing the problem of handling documents, Drupal can connect to Alfresco Documentation Management System to help building a doc-oriented application. It is helpful in project-management scenario like www.biomedbridges.eu.
- #19: Drupal can be used to build a community portal, involving users in the content creation, or through membership in a training programm or as a blogging platform.
- #20: Drupal can act as a Project Management System, enabling users to create Work packages, provide deliverables and manage
- #21: Through contrib or custom modules Drupal’s can create feeds for other resources/services to consume.
- #22: The EBI website redesign is a long-term and complex process. The inspiration for the design principle came from many sources. One for all: the BBC Global Visual Language.
- #23: The evolution has been a huge leap along the line of the web standards.
- #24: The transition implied one first simple change: going from static to dynamic.
- #25: The website redesign was not just about making things look better, but to help users find what they want, enable discovery and offer a consistent experience.The implementation is a two/phase process.
- #26: The team in charge of redesigning the site had to go through many challenges.
- #27: Several people were involved in the process. Each of them came with its own set of need, requirements and solutions.
- #29: The new EBI website in action
- #30: Here are just a few changes involved: from static to CMS; from no users to Group-based CM; from use of DM to a standard CMS WYSIWYG;
- #31: We can create diverseContent & Content types.
- #32: Content & Content types
- #33: In some cases we can avoid the content creation process by pulling content from external sources.
- #34: Content & Content types: Publication are created from Bibtex, Pubmed files. They can be tied up to specific groups and linked to the European PubMed Central Database.
- #35: Content feeds
- #36: Content feeds through Contrib modules:Views data export, Views Xml Backend and Custom module: Staff Feeds.
- #37: Content feeds. Drupal can connect external data-sources like an XML files or mapping a Database schema and import its data.
- #38: Organize content and group workflow
- #39: The EBI is based on the Wellcome Trust Genome Campus in Hinxton, which is near Cambridge in UK. The EBI is part of the European Molecular Biology Laboratory and as part of that, we’re a non-profit organisation.
- #40: The EBI is based on the Wellcome Trust Genome Campus in Hinxton, which is near Cambridge in UK. The EBI is part of the European Molecular Biology Laboratory and as part of that, we’re a non-profit organisation.